/* ============================================================ ESC Location Map – Frontend Styles v2.0.0 CI: #2F414B #48768A #0C3A42 #CAD82A #DCE9C5 #F2F2F2 Font: Arial Nova / Arial Nova Condensed ============================================================ */ /* The modal is moved to , so the CI variables live on both roots. */ .esc-location-map-wrapper, .esc-location-modal { --esc-navy: #2F414B; --esc-steel: #48768A; --esc-petrol: #0C3A42; --esc-green: #CAD82A; /* Darkened CI green for white text on the contact cards (reference look). */ --esc-green-deep: #a3b318; --esc-mint: #DCE9C5; --esc-grey: #F2F2F2; --esc-card-grey: #f0f0ef; --esc-font: 'Arial Nova', Arial, 'Helvetica Neue', sans-serif; --esc-font-cond: 'Arial Nova Condensed', 'Arial Nova', 'Arial Narrow', Arial, sans-serif; font-family: var(--esc-font); color: var(--esc-navy); } /* ------------------------------------------------------------ Scroll lock: scrollbar always visible, no layout jump. ------------------------------------------------------------ */ html { overflow-y: scroll; } /* Scroll lock while the modal is open. Plain overflow lock - body keeps its normal flow so sticky/fixed headers and scroll-based theme logic are unaffected; JS compensates the scrollbar width via body padding. */ html.esc-modal-open { overflow: hidden !important; } /* ============================================================ WORLD MAP ============================================================ */ .esc-world-map { position: relative; max-width: 1080px; margin: 0 auto; /* Boxes are absolutely positioned and start unplaced at their marker; clipping prevents them from inflating the page width before (and while) the placement engine runs. */ overflow: hidden; } .esc-world-map-image { display: block; width: 100%; height: auto; } /* SVG layer for the connector lines. */ .esc-world-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } .esc-world-lines line { stroke: var(--esc-navy); stroke-width: 2; stroke-linecap: round; } /* Zero-size anchor that sits EXACTLY on the backend X/Y. */ .esc-world-marker { position: absolute; width: 0; height: 0; z-index: 2; } /* The dot: white with dark ring, centred on the anchor. */ .esc-marker-dot { position: absolute; left: 0; top: 0; width: 13px; height: 13px; transform: translate(-50%, -50%); background: #fff; border: 3px solid var(--esc-navy); border-radius: 50%; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); box-sizing: border-box; z-index: 4; } /* ------------------------------------------------------------ Location box (positioned by JS, never overlapping) ------------------------------------------------------------ */ .esc-location-box { position: absolute; left: 16px; top: 0; background: #fff; border-radius: 9px; box-shadow: 0 6px 18px rgba(15, 35, 45, .18); padding: 11px 15px 12px; min-width: 118px; max-width: 195px; font-size: 12px; line-height: 1.3; color: var(--esc-navy); z-index: 3; box-sizing: border-box; } .esc-location-box.is-link { cursor: pointer; transition: box-shadow .15s ease; } .esc-location-box.is-link:hover, .esc-location-box.is-link:focus-visible { box-shadow: 0 8px 24px rgba(15, 35, 45, .3); outline: none; } .esc-box-title { display: block; font-size: 15px; line-height: 1.15; font-weight: 800; margin-bottom: 4px; } /* Plain city lines (countries without regions, e.g. USA / PR China). */ .esc-box-lines span { display: block; font-size: 12px; line-height: 1.45; } /* Dark variant: country with regions (e.g. Deutschland). */ .esc-location-box.is-dark { background: var(--esc-navy); color: #fff; min-width: 150px; padding: 12px 13px 10px; } .esc-location-box.is-dark .esc-box-title { margin-bottom: 8px; } /* Region pill (the only clickable element inside a dark box). */ .esc-box-region { margin-bottom: 7px; border-radius: 7px; padding: 2px; margin-left: -2px; margin-right: -2px; } .esc-box-region.is-link { cursor: pointer; } .esc-box-region:focus-visible { outline: 2px solid var(--esc-green); outline-offset: 1px; } .esc-box-pill { display: block; background: #fff; color: var(--esc-navy); border-radius: 999px; padding: 3px 10px; text-align: center; font-size: 11px; line-height: 1.2; font-weight: 700; transition: background .15s ease; } .esc-box-region.is-link:hover .esc-box-pill { background: var(--esc-mint); } .esc-box-cities { margin: 5px 0 2px 16px; padding: 0; list-style: disc; } .esc-box-cities li { font-size: 11px; line-height: 1.45; margin: 0; } /* ============================================================ MODAL (desktop) ============================================================ */ .esc-location-modal { display: none; position: fixed; inset: 0; z-index: 2147483600; /* Above every Avada element. */ } .esc-location-modal.is-open { display: block; } .esc-modal-backdrop { position: absolute; inset: 0; background: rgba(12, 58, 66, .55); } .esc-modal-dialog { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(1140px, calc(100vw - 56px)); max-height: calc(100vh - 64px); overflow-y: auto; background: #fff; border-radius: 5px; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); padding: 48px 56px 52px; box-sizing: border-box; -webkit-overflow-scrolling: touch; } /* Close button (drawn ×). */ .esc-modal-close { position: absolute; right: 20px; top: 18px; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; padding: 0; } .esc-modal-close span { position: absolute; left: 50%; top: 50%; width: 2px; height: 34px; background: var(--esc-navy); } .esc-modal-close span:first-child { transform: translate(-50%, -50%) rotate(45deg); } .esc-modal-close span:last-child { transform: translate(-50%, -50%) rotate(-45deg); } .esc-modal-close:focus-visible { outline: 2px solid var(--esc-steel); outline-offset: 2px; } /* ============================================================ PANEL ============================================================ */ .esc-location-panel { display: none; } .esc-location-panel.is-active { display: block; } .esc-panel-title { text-align: center; font-family: var(--esc-font-cond); font-size: 27px; line-height: 1.2; font-weight: 800; color: var(--esc-navy); margin: 0 56px 38px; } .esc-panel-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: stretch; } .esc-panel-notice { padding: 16px; background: #fff8e1; border-left: 4px solid var(--esc-green); border-radius: 3px; font-size: 13px; } /* ============================================================ CONTACT CARDS ============================================================ */ .esc-contacts { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 34px; } .esc-contact-card { width: 232px; display: flex; flex-direction: column; } /* Circular photo, overlapping the green head. */ .esc-contact-photo { width: 104px; height: 104px; border-radius: 50%; overflow: hidden; margin: 0 auto -54px; position: relative; z-index: 2; background: #d9e1e5; border: 4px solid #fff; box-sizing: border-box; } .esc-contact-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Green head: name + position. */ .esc-contact-head { background: var(--esc-green-deep); color: #fff; border-radius: 16px 16px 0 0; padding: 64px 22px 10px; } .esc-contact-head strong { display: block; font-size: 15px; line-height: 1.15; font-weight: 800; } .esc-contact-head span { display: block; font-size: 11.5px; line-height: 1.35; margin-top: 3px; opacity: .95; } /* Wave template: the head uses the supplied PNG (rounded corners + wave) as one single graphic - nothing is stitched together, so no seams or hairlines are possible. aspect-ratio matches the PNG (394x240); the grey body slides 10.4% (of card width = wave height) up underneath the transparent wave corners. */ /* Wave template: the head uses the supplied PNG (rounded corners + wave) as one single graphic - nothing is stitched together, so no seams or hairlines are possible. The grey body slides up underneath the head; anything above the wave curve is hidden by the opaque green, the transparent wave corners reveal the grey - at any card height. */ .esc-contact-card.is-wave .esc-contact-head { background: url('img/esc-map-contact.png') no-repeat top center; background-size: 100% 100%; border-radius: 0; padding-bottom: 17%; /* reserved wave zone, scales with card width */ position: relative; z-index: 1; } .esc-contact-card.is-wave .esc-contact-info { margin-top: -24%; padding-top: calc(24% + 10px); border-radius: 0 0 16px 16px; } /* Grey body: phone + email. */ .esc-contact-info { background: var(--esc-card-grey); border-radius: 0 0 16px 16px; padding: 10px 22px 18px; font-size: 11.5px; line-height: 1.55; flex: 1; } .esc-contacts-simple .esc-contact-info { padding-top: 16px; } .esc-contact-info a { color: var(--esc-navy); text-decoration: none; } .esc-contact-info a:hover { text-decoration: underline; } /* ============================================================ CoCs – colours and icons are controlled via CSS classes ============================================================ */ .esc-cocs { margin-bottom: 30px; } .esc-cocs h4 { font-family: var(--esc-font-cond); font-size: 20px; line-height: 1.2; font-weight: 800; margin: 0 0 14px; color: var(--esc-navy); } .esc-coc-list { display: flex; gap: 8px; flex-wrap: nowrap; align-items: center; } /* CoC icons are the supplied PNGs. All CoCs are always rendered in ONE row; instead of wrapping they shrink evenly when space gets tight. Only the ones selected in the backend are fully visible. */ img.esc-coc { display: block; flex: 0 1 72px; width: 72px; min-width: 0; height: auto; object-fit: contain; opacity: .16; } img.esc-coc.is-active { opacity: 1; } /* ============================================================ Employees row ============================================================ */ .esc-employees { display: flex; align-items: center; gap: 14px; margin-top: 6px; color: var(--esc-navy); } .esc-employees strong { font-family: var(--esc-font-cond); font-size: 21px; font-weight: 800; } .esc-employee-icon { display: block; width: 38px; height: auto; } .esc-employee-count { font-size: 22px; font-weight: 700; } /* ============================================================ Region map (right column of the modal) ============================================================ */ /* Right column has a FIXED height regardless of the left column content length, so the regional map always renders at the same comfortable size across all standorte (and even when left content is short like only an intern CoC + address). */ .esc-panel-right { position: relative; height: 560px; min-height: 560px; } .esc-region-map-frame { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; /* Labels may extend beyond the right edge of the map image - the surrounding modal column has plenty of unused white space, so let them spill over without triggering scrollbars. */ overflow: visible; } .esc-region-map { position: relative; height: 100%; width: fit-content; max-width: 100%; overflow: visible; } .esc-region-map > img, .esc-region-map > svg:not(.esc-region-lines) { display: block; height: 100%; width: auto; max-width: 100%; } /* Anchor dot stays exactly on the saved X/Y. */ .esc-region-marker { position: absolute; width: 0; height: 0; z-index: 2; } .esc-region-anchor { position: absolute; left: 0; top: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--esc-navy); transform: translate(-50%, -50%); z-index: 2; } /* Content unit (icon + text). Positioned RELATIVE to the anchor; the icon column is centred on the anchor's X, the label column extends to the right. Layout never depends on JS, so it can never drift between modal opens. */ .esc-region-float { position: absolute; display: grid; grid-template-columns: 52px max-content; column-gap: 11px; align-items: center; z-index: 3; pointer-events: none; /* The icon column (1st column, 52px) is centred on the anchor: shift the float left by half the icon width (26px). */ left: -26px; } /* Odd marker (1st, 3rd, ...): block sits ABOVE the anchor. */ .esc-region-map > .esc-region-marker:nth-of-type(odd) .esc-region-float { bottom: 14px; } /* Even marker (2nd, 4th, ...): block sits BELOW the anchor. */ .esc-region-map > .esc-region-marker:nth-of-type(even) .esc-region-float { top: 14px; } /* Default marker: dark pin circle. */ .esc-region-pin { flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; background: var(--esc-navy); display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 10px rgba(0, 0, 0, .25); } /* Custom marker image: rendered as-is, no extra circle around it. */ .esc-region-pin.has-image { width: auto; height: auto; border-radius: 0; background: none; box-shadow: none; } .esc-region-pin.has-image img { display: block; width: 56px; height: 56px; object-fit: contain; } /* Plain text label to the right of the icon. */ .esc-region-label { font-size: 13px; line-height: 1.4; color: var(--esc-navy); width: max-content; } .esc-region-label p { margin: 0; white-space: nowrap; } .esc-region-label strong, .esc-region-label b { font-weight: 800; font-size: 14px; } /* ============================================================ ADDRESS BLOCK (under the contact cards) ============================================================ */ .esc-address { margin: 0 0 28px; } .esc-address h4 { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--esc-navy); } .esc-address-text { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--esc-navy); } .esc-address-link { display: inline-flex; align-items: center; gap: 6px; color: var(--esc-navy); font-size: 13px; font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; transition: opacity .15s ease; } .esc-address-link:hover, .esc-address-link:focus { opacity: .7; } .esc-address-link svg { flex-shrink: 0; } /* Region map - image-only mode (no markers): plain centred image. */ .esc-region-image-only > .esc-region-map > img { width: 100%; height: auto; max-height: 100%; object-fit: contain; } /* ============================================================ MOBILE ACCORDION ============================================================ */ .esc-location-accordion { display: none; } @media (max-width: 991px) { .esc-location-modal { display: none !important; } /* Accordion is single-column: the map flows normally with a height cap. */ .esc-panel-right { min-height: 0; } .esc-region-map-frame { position: static; display: block; } .esc-region-map { height: auto; margin: 0 auto; } .esc-region-map > img, .esc-region-map > svg:not(.esc-region-lines) { height: auto; max-height: 420px; } .esc-location-accordion { display: block; margin-top: 28px; } .esc-accordion-item + .esc-accordion-item { margin-top: 2px; } .esc-accordion-trigger { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 15px 18px; border: 0; background: var(--esc-navy); color: #fff; text-align: left; font-family: var(--esc-font); font-size: 15px; font-weight: 700; cursor: pointer; } .esc-accordion-icon { position: relative; width: 14px; height: 14px; flex-shrink: 0; } .esc-accordion-icon::before, .esc-accordion-icon::after { content: ''; position: absolute; background: var(--esc-green); left: 0; top: 6px; width: 14px; height: 2px; transition: transform .2s ease; } .esc-accordion-icon::after { transform: rotate(90deg); } .esc-accordion-item.is-open .esc-accordion-icon::after { transform: rotate(0deg); } .esc-accordion-content { display: none; padding: 22px 18px; background: var(--esc-grey); } .esc-accordion-item.is-open .esc-accordion-content { display: block; } .esc-accordion-content .esc-location-panel { display: block; } .esc-panel-title { text-align: left; font-size: 20px; margin: 0 0 22px; } .esc-panel-grid { grid-template-columns: 1fr; gap: 28px; } .esc-contacts { gap: 18px; } .esc-contact-card { width: 100%; max-width: 264px; } /* Scale the world-map boxes down on tablets. */ .esc-location-box { min-width: 96px; max-width: 150px; padding: 8px 10px 9px; font-size: 10px; } .esc-box-title { font-size: 12px; } .esc-box-pill { font-size: 9px; padding: 2px 8px; } .esc-box-cities li, .esc-box-lines span { font-size: 9.5px; } } /* Phones: compact name labels stay on the map so the accordion entries below are recognisable; pills and city lists move into the accordion. */ @media (max-width: 640px) { .esc-box-cities, .esc-box-lines, .esc-box-region { display: none; } .esc-location-box { padding: 7px 11px 8px; border-radius: 8px; max-width: 130px; } .esc-box-title { font-size: 11px; line-height: 1.2; white-space: nowrap; } .esc-world-lines line { stroke-width: 1; } .esc-marker-dot { width: 11px; height: 11px; border-width: 2px; } .esc-modal-dialog { padding: 40px 22px; } } /* Reduced motion: no smooth scrolling side effects. */ @media (prefers-reduced-motion: reduce) { .esc-location-box.is-link, .esc-box-pill, .esc-accordion-icon::before, .esc-accordion-icon::after { transition: none; } }