/* ========================================================================== EM3 Energy - nav.css Header (hybrid mega-menu navigation), mobile menu, rich footer, Coming Soon. Loaded after brand.css. Menu markup comes from the custom walker in inc/nav.php (data from WordPress menus - editable in WP Admin, never hardcoded). ========================================================================== */ /* -------------------------------------------------------------------------- Coming Soon placeholder page -------------------------------------------------------------------------- */ .em3-coming { min-height: calc(100vh - 70px); display: flex; align-items: center; justify-content: center; text-align: center; background: var(--em3-bg-deep); color: var(--em3-ink); position: relative; overflow: hidden; } .em3-coming h1 { color: var(--em3-ink); } .em3-coming::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 8%, rgba(46,93,255,0.10), transparent 45%), radial-gradient(circle at 0% 50%, rgba(46,93,255,0.06), transparent 42%); pointer-events: none; } .em3-coming-inner { position: relative; z-index: 1; max-width: 720px; padding: 80px 0; } .em3-coming .em3-dot { display: block; margin: 0 auto 18px; } .em3-coming .em3-eyebrow { justify-content: center; } .em3-coming h1 { margin: 14px 0 0; } .em3-coming-sub { font-size: 18px; color: var(--em3-ink-muted); line-height: 1.5; margin: 24px auto 40px; max-width: 560px; } .em3-coming .em3-cta-actions { justify-content: center; } /* ========================================================================== HEADER - hybrid mega-menu navigation ========================================================================== */ .em3-skip { position: absolute; left: -9999px; top: 0; z-index: 10000; background: var(--em3-accent); color: #fff; padding: 10px 16px; border-radius: 1px; font-weight: 600; } .em3-skip:focus { left: 8px; top: 8px; } .em3-nav { position: fixed; inset: 0 0 auto 0; z-index: 9999; display: flex; justify-content: center; padding: 14px 32px; background: rgba(6,17,66,0.28); -webkit-backdrop-filter: saturate(140%) blur(22px); backdrop-filter: saturate(140%) blur(22px); border-bottom: 1px solid rgba(255,255,255,0.06); transition: background .4s, padding .3s, box-shadow .4s, transform .4s ease; } .em3-nav.scrolled { background: rgba(5,13,51,0.96); padding: 10px 32px; box-shadow: 0 12px 32px -16px rgba(0,0,0,0.55); border-bottom-color: rgba(255,255,255,0.10); } .em3-nav.hidden { transform: translateY(-100%); } /* WordPress admin bar offset (logged-in users only; visitors never see the bar). The admin bar is position:fixed; top:0 and pushes normal page flow down via `html{margin-top:32px}`. A *fixed* header ignores that margin, so without this it sits beneath the bar. (Static headers on other sites get moved by the margin - hence no overlap.) */ .admin-bar .em3-nav { top: 32px; } @media screen and (max-width: 782px) { .admin-bar .em3-nav { top: 46px; } /* admin bar is 46px tall at <=782px */ } @media screen and (max-width: 600px) { /* at <=600px WP switches the admin bar to position:absolute (it scrolls away with the page), so the fixed nav returns to the very top to avoid a permanent gap. */ .admin-bar .em3-nav { top: 0; } } /* SF1 - dark-text nav variant for pages whose hero sits on a light background. Set body class .has-light-hero (via the _em3_light_hero page meta) to enable. */ body.has-light-hero .em3-nav { background: rgba(255,255,255,0.85); border-bottom: 1px solid rgba(0,0,0,0.06); } body.has-light-hero .em3-nav.scrolled { background: rgba(255,255,255,0.96); border-bottom-color: rgba(0,0,0,0.10); box-shadow: 0 12px 32px -16px rgba(0,0,0,0.18); } body.has-light-hero .em3-mi > a { color: rgba(10,24,88,0.85); } body.has-light-hero .em3-mi > a:hover, body.has-light-hero .em3-mi:focus-within > a { background: rgba(10,24,88,0.08); color: #0a1858; } /* The .em3-btn-primary CTA is a blue gradient (reference .nav-cta); reads on dark and light. */ .em3-nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; max-width: 1180px; } .em3-nav-logo img { height: 30px; width: auto; display: block; } .em3-nav-right { display: flex; align-items: center; gap: 14px; } .em3-menu { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; } .em3-mi { position: static; } .em3-mi.has-drop { position: relative; } .em3-mi > a { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,0.85); padding: 8px 13px; border-radius: 1px; text-decoration: none; white-space: nowrap; transition: background .18s, color .18s; } .em3-mi > a:hover, .em3-mi:focus-within > a { color: #fff; background: rgba(255,255,255,0.10); } .em3-mi .em3-caret { opacity: .7; transition: transform .2s; } .em3-mi:hover .em3-caret, .em3-mi:focus-within .em3-caret { transform: rotate(180deg); } .em3-mi.current-menu-item > a, .em3-mi.current-page-ancestor > a, .em3-mi.current-menu-parent > a { box-shadow: inset 0 -2px 0 var(--em3-accent-hot); } /* simple dropdown */ .em3-drop { position: absolute; top: calc(100% + 6px); left: 0; min-width: 240px; background: rgba(5,13,51,0.98); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); border: 1px solid var(--em3-line-soft); border-radius: 1px; padding: 10px 0; box-shadow: 0 16px 40px -12px rgba(0,0,0,0.6); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s, transform .18s, visibility .18s; z-index: 50; } .em3-mi.has-drop:hover > .em3-drop, .em3-mi.has-drop:focus-within > .em3-drop { opacity: 1; visibility: visible; transform: translateY(0); } .em3-drop ul { list-style: none; margin: 0; padding: 0; } .em3-drop a { display: block; padding: 10px 20px; font-size: 14px; color: rgba(255,255,255,0.85); text-decoration: none; transition: background .15s, color .15s; } .em3-drop a:hover { background: rgba(46,93,255,0.18); color: #fff; } .em3-drop-all { display: block; margin-top: 6px; padding: 12px 20px 4px; border-top: 1px solid var(--em3-line-soft); font-size: 13px; font-weight: 600; color: var(--em3-accent-hot); text-decoration: none; } /* mega panel (full-width, centred on viewport) */ .em3-mega { position: absolute; top: 100%; left: 50%; width: 100vw; transform: translate(-50%, -6px); background: rgba(5,13,51,0.98); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid var(--em3-line-soft); box-shadow: 0 24px 48px -20px rgba(0,0,0,0.6); opacity: 0; visibility: hidden; transition: opacity .18s, transform .18s, visibility .18s; z-index: 40; } .em3-mi.has-mega:hover > .em3-mega, .em3-mi.has-mega:focus-within > .em3-mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .em3-mega-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 28px; padding: 28px 0; } .em3-mega-grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 28px; padding: 28px 0; } .em3-mega-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding: 28px 0; } .em3-mega-cell { display: flex; gap: 14px; align-items: flex-start; padding: 12px 14px; border-radius: 4px; text-decoration: none; transition: background .15s; } .em3-mega-cell:hover { background: rgba(46,93,255,0.12); } .em3-mega-icon { flex-shrink: 0; margin-top: 2px; width: 24px; height: 24px; } .em3-mega-text { display: flex; flex-direction: column; gap: 3px; } .em3-mega-name { font-size: 16px; font-weight: 600; color: #fff; } .em3-mega-desc { font-size: 13px; color: rgba(255,255,255,0.65); line-height: 1.4; } .em3-mega-col .em3-mega-colhead { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; color: var(--em3-accent-hot); margin-bottom: 10px; text-decoration: none; } .em3-mega-colicon { width: 20px; height: 20px; flex-shrink: 0; } .em3-mega-col ul { list-style: none; margin: 0; padding: 0; } .em3-mega-col li a { display: block; padding: 6px 0; font-size: 13.5px; color: rgba(255,255,255,0.85); text-decoration: none; transition: color .15s; } .em3-mega-col li a:hover { color: #fff; } /* burger */ .em3-burger { display: none; width: 34px; height: 34px; background: none; border: none; cursor: pointer; flex-direction: column; justify-content: center; gap: 5px; padding: 0; } /* Neutralise reset.css `button:hover/:focus { background:#cc3366 }` (0,1,1) which painted the open X a pink-red square. Keep the burger transparent in every state; X stays white. */ .em3-burger:hover, .em3-burger:focus, .em3-burger:active, .em3-burger.active { background: none; border: none; } .em3-burger span { display: block; height: 2px; width: 22px; background: #fff; border-radius: 2px; margin: 0 auto; transition: transform .25s, opacity .2s; } .em3-burger:hover span, .em3-burger:focus span { background: #fff; } .em3-burger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .em3-burger.active span:nth-child(2) { opacity: 0; } .em3-burger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* mobile slide-in */ .em3-mobile-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9997; opacity: 0; visibility: hidden; transition: opacity .3s; } .em3-mobile-overlay.open { opacity: 1; visibility: visible; } .em3-mobile { position: fixed; inset: 0 0 0 auto; width: min(420px, 100%); background: rgba(5,13,51,0.98); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); z-index: 9998; transform: translateX(100%); transition: transform .35s ease; overflow-y: auto; padding: 90px 24px 40px; display: flex; flex-direction: column; } .em3-mobile.open { transform: translateX(0); } body.em3-menu-open { overflow: hidden; } .em3-mobile-menu { list-style: none; margin: 0; padding: 0; flex: 1; } .em3-mob-item { border-bottom: 1px solid var(--em3-line-soft); } .em3-mob-row { display: flex; align-items: center; justify-content: space-between; } .em3-mob-row > a { display: block; padding: 14px 0; font-size: 16px; font-weight: 600; color: #fff; text-decoration: none; flex: 1; } /* Dropdown-arrow toggles: brand accent-hot blue carets (currentColor drives the SVG stroke). The :hover/:focus/:active rule also overrides reset.css `button:hover { background:#cc3366; color:#fff }` so tapping a toggle no longer flashes a pink-red square. */ .em3-mob-toggle { background: none; border: none; color: var(--em3-accent-hot); padding: 12px; cursor: pointer; } .em3-mob-toggle:hover, .em3-mob-toggle:focus, .em3-mob-toggle:active { background: none; color: var(--em3-accent-hot); } .em3-mob-toggle .em3-caret { transition: transform .2s; } .em3-mob-toggle.active .em3-caret { transform: rotate(180deg); } .em3-mob-sub { list-style: none; margin: 0; padding: 0; max-height: 0; overflow: hidden; transition: max-height .3s ease; } .em3-mob-sub.open { max-height: 1600px; padding-bottom: 10px; } .em3-mob-sub a { display: block; padding: 8px 0 8px 12px; font-size: 14px; color: rgba(255,255,255,0.8); text-decoration: none; } .em3-mob-sub .em3-mob-l3 a { padding-left: 26px; font-size: 13px; color: rgba(255,255,255,0.6); } .em3-mobile-cta { margin-top: 24px; justify-content: center; } @media (max-width: 1023px) { .em3-menu { display: none; } .em3-burger { display: flex; } /* Hide the top-bar CTA on mobile - the slide-in drawer carries its own "Request An Audit". */ .em3-nav-cta { display: none; } } @media (min-width: 1024px) { .em3-mobile, .em3-mobile-overlay { display: none; } } /* ========================================================================== FOOTER - "The Engineered Closing Statement" (2 acts: manifesto+conversion -> utility lattice -> lit trust plate -> legal) New anchors/btns/imgs/svgs are scoped >=(0,2,0) to beat reset.css + Elementor. ========================================================================== */ /* Footer chrome (bg + top accent) attaches to BOTH the fallback `.em3-footer` wrapper and the Elementor theme-builder footer location wrapper, since the hybrid template renders the bands as separate shortcode blocks with no shared `.em3-footer` ancestor. */ .em3-footer, .elementor-location-footer { position: relative; background: var(--em3-bg-deep); color: var(--em3-ink-dim); } .em3-footer::before, .elementor-location-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 2; background: linear-gradient(90deg, transparent, rgba(46,93,255,0.5), transparent); } /* CTA text stays white: footer's generic `.em3-footer a` (0,1,1) was beating `.em3-btn-primary` (0,1,0). */ .em3-footer .em3-btn-primary, .em3-footer .em3-btn-primary:link, .em3-footer .em3-btn-primary:visited, .em3-footer .em3-btn-primary:hover, .em3-footer .em3-btn-primary:focus, .em3-footer .em3-btn-primary:active { color: #fff; } /* notched divider: the 1px near-square corner as repeated structural punctuation */ .em3-foot-rule { position: relative; height: 1px; background: var(--em3-line-soft); } .em3-foot-rule::before { content: ""; position: absolute; left: 0; top: -1.5px; width: 30px; height: 3px; background: var(--em3-accent); border-radius: var(--em3-radius); } /* ----- BAND 1: manifesto + conversion ----- */ .em3-foot-cta { position: relative; background: var(--em3-bg); overflow: hidden; } .em3-foot-cta::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 78% 0%, rgba(46,93,255,0.16), transparent 58%); pointer-events: none; } .em3-foot-cta-grid { position: relative; display: grid; grid-template-columns: 7fr 5fr; gap: var(--em3-space-2); align-items: center; padding: var(--em3-space-4) 0 var(--em3-space-3); } .em3-foot-news2 { border-left: 2px solid rgba(255,255,255,0.30); padding: 14px 0 14px var(--em3-space-1); } .em3-foot-manifesto-h { font-family: var(--em3-font-sans); font-weight: 700; font-size: clamp(34px, 4.4vw, 58px); line-height: 1.02; letter-spacing: -0.03em; color: #fff; margin: 14px 0 0; } .em3-foot-manifesto-sub { margin: 18px 0 28px; color: var(--em3-ink-muted); font-size: 16px; max-width: 42ch; } .em3-foot-news2-label { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--em3-ink-dim); margin-bottom: 16px; } .em3-foot-news2-vp { margin: 0 0 20px; font-size: 13.5px; color: var(--em3-ink-dim); max-width: 40ch; line-height: 1.5; } /* dark/premium GF newsletter - footer-scoped overrides of brand.css light-panel form defaults */ .em3-foot-news2 .gform_wrapper .gform_fields { gap: 16px; } .em3-foot-news2 .gform_wrapper .gfield_label, .em3-foot-news2 .gform_wrapper legend.gfield_label { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--em3-ink-dim); margin-bottom: 7px; } .em3-foot-news2 .gform_wrapper .gfield_required { display: none; } .em3-foot-news2 .gform_wrapper input[type=text], .em3-foot-news2 .gform_wrapper input[type=email] { background: rgba(255,255,255,0.04); color: #fff; border: 1px solid var(--em3-line-soft); border-radius: var(--em3-radius); padding: 12px 14px; font-size: 14px; } .em3-foot-news2 .gform_wrapper input::placeholder { color: rgba(255,255,255,0.38); } .em3-foot-news2 .gform_wrapper input:focus { border-color: var(--em3-accent-hot); box-shadow: 0 0 0 3px rgba(46,93,255,0.18); } .em3-foot-news2 .gform_wrapper fieldset.gfield { border: none; padding: 0; margin: 4px 0 0; min-width: 0; } .em3-foot-news2 .gform_wrapper fieldset.gfield legend.gfield_label { position: absolute; left: -9999px; } .em3-foot-news2 .gform_wrapper .gchoice { display: flex; align-items: flex-start; gap: 10px; } .em3-foot-news2 .gform_wrapper .gchoice input[type=checkbox] { appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 18px; height: 18px; margin: 1px 0 0; background: rgba(255,255,255,0.04); border: 1px solid var(--em3-line); border-radius: var(--em3-radius); cursor: pointer; position: relative; transition: background .15s, border-color .15s; } .em3-foot-news2 .gform_wrapper .gchoice input[type=checkbox]:checked { background: var(--em3-accent); border-color: var(--em3-accent); } .em3-foot-news2 .gform_wrapper .gchoice input[type=checkbox]:checked::after { content: ""; position: absolute; left: 5.5px; top: 2px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .em3-foot-news2 .gform_wrapper .gchoice label, .em3-foot-news2 .gform_wrapper .gfield_consent_label { color: var(--em3-ink-dim); font-size: 12.5px; line-height: 1.45; cursor: pointer; } .em3-foot-news2 .gform_wrapper .gform_footer { margin-top: 18px; padding-top: 0; } .em3-foot-news2 .gform_wrapper .gform_footer .gform_button { background: linear-gradient(135deg, var(--em3-accent), var(--em3-accent-mid)); color: #fff; border: none; border-radius: var(--em3-radius); padding: 14px 32px; font-size: 14.5px; font-weight: 700; box-shadow: 0 14px 32px -12px rgba(46,93,255,0.5); transition: background .25s, transform .2s, box-shadow .25s; } .em3-foot-news2 .gform_wrapper .gform_footer .gform_button:hover { background: linear-gradient(135deg, var(--em3-accent-mid), var(--em3-accent-hot)); transform: translateY(-2px); box-shadow: 0 20px 40px -12px rgba(46,93,255,0.65); } /* ----- BAND 1 as native Elementor widgets (hybrid) ----- Targeted by Elementor's auto `.elementor-element-{id}` classes (fixed ids fb000xx) since Elementor drops raw `_css_classes` and puts widget classes on the wrapper not the h2/a. Heading/Text/Button are editable in the canvas; this CSS gives them the manifesto look. */ .elementor-element-fb00001 { position: relative; overflow: hidden; background: var(--em3-bg); } .elementor-element-fb00001::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 78% 0%, rgba(46,93,255,0.16), transparent 58%); pointer-events: none; } .elementor-element-fb00002 { position: relative; z-index: 1; max-width: var(--em3-maxw); margin: 0 auto; padding: var(--em3-space-4) var(--em3-pad-x) var(--em3-space-3); display: flex; gap: var(--em3-space-1); align-items: center; } .elementor-element-fb00003 { flex: 0 1 58%; min-width: 0; } .elementor-element-fb00008 { flex: 0 0 520px; min-width: 0; } .elementor-element-fb00004 .elementor-widget-container, .elementor-element-fb00004 p { margin: 0; font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--em3-ink-dim); } .elementor-element-fb00005 .elementor-heading-title { font-family: var(--em3-font-sans); font-weight: 700; font-size: clamp(34px, 4.4vw, 58px); line-height: 1.02; letter-spacing: -0.03em; color: #fff; margin: 14px 0 0; } .elementor-element-fb00006 .elementor-widget-container, .elementor-element-fb00006 p { margin: 18px 0 28px; color: var(--em3-ink-muted); font-size: 16px; max-width: 42ch; line-height: 1.5; } .elementor-element-fb00007 .elementor-button { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, var(--em3-accent), var(--em3-accent-mid)); color: #fff; border: 1px solid transparent; border-radius: var(--em3-radius); padding: 16px 28px; font-size: 15px; font-weight: 700; letter-spacing: .005em; box-shadow: 0 14px 32px -10px rgba(46,93,255,0.55), inset 0 1px 0 rgba(255,255,255,0.22); transition: transform .2s, box-shadow .25s, background .25s; } .elementor-element-fb00007 .elementor-button:hover { background: linear-gradient(135deg, var(--em3-accent-mid), var(--em3-accent-hot)); transform: translateY(-2px); box-shadow: 0 20px 40px -10px rgba(46,93,255,0.7); } .elementor-element-fb00007 .elementor-button-content-wrapper { gap: 0; } .elementor-element-fb00007 .elementor-button-content-wrapper::after { content: "\2192"; font-size: 16px; margin-left: 8px; transition: transform .2s; } .elementor-element-fb00007 .elementor-button:hover .elementor-button-content-wrapper::after { transform: translateX(3px); } @media (max-width: 980px) { .elementor-element-fb00002 { flex-direction: column !important; align-items: stretch; padding: var(--em3-space-3) var(--em3-pad-x); } .elementor-element-fb00003, .elementor-element-fb00008 { flex-basis: auto; width: 100%; } } /* ----- BAND 2: navigation lattice ----- */ .em3-foot-nav { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: var(--em3-space-2); padding: var(--em3-space-3) var(--em3-pad-x); } .em3-foot-logo img { height: 38px; width: auto; display: block; margin-bottom: 18px; } .em3-foot-pos { color: var(--em3-ink-muted); font-size: 14px; max-width: 240px; line-height: 1.55; margin: 0; } .em3-foot-social-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--em3-ink-dim); margin: 22px 0 11px; } .em3-social { display: flex; gap: 10px; } .em3-foot-head { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--em3-ink-dim); margin-bottom: 16px; position: relative; padding-bottom: 9px; } .em3-foot-head::after { content: ""; position: absolute; left: 0; bottom: 0; width: 18px; height: 1px; background: var(--em3-accent-hot); } .em3-foot-col ul, .em3-foot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; } .em3-foot-col a { color: var(--em3-ink-dim); font-size: 14px; text-decoration: none; transition: color .15s; } .em3-foot-col a:hover { color: #fff; } .em3-foot-contact { display: grid; gap: 12px; } .em3-foot-contact .row { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--em3-ink-muted); } .em3-foot-contact .row svg { flex-shrink: 0; margin-top: 2px; width: 16px; height: 16px; stroke: var(--em3-accent-hot); } .em3-foot-contact .row strong { color: #fff; font-weight: 600; } .em3-foot-contact .row .dim { color: var(--em3-ink-dim); font-size: 13px; } .em3-foot-contact .row a { color: var(--em3-ink-muted); text-decoration: none; } .em3-foot-getintouch { display: inline-flex; align-items: center; gap: 7px; color: var(--em3-accent-hot); font-weight: 600; font-size: 14px; text-decoration: none; margin-top: 2px; } .em3-foot-getintouch::after { content: "\2192"; transition: transform .2s; } .em3-foot-getintouch:hover { color: var(--em3-accent-hot); } .em3-foot-getintouch:hover::after { transform: translateX(3px); } /* SHV Energy parent-brand lockup below Get in touch */ .em3-foot-shv { margin-top: 24px; } .em3-foot-shv-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--em3-ink-dim); margin-bottom: 10px; } .em3-foot-shv .em3-foot-shv-logo { height: 22px; width: auto; display: block; } /* ----- BAND 3: global presence strip ----- */ .em3-foot-global { display: flex; align-items: center; gap: var(--em3-space-2); padding: 22px var(--em3-pad-x) var(--em3-space-3); flex-wrap: wrap; } .em3-foot-global-label { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--em3-ink-dim); white-space: nowrap; } .em3-foot-global-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 14px 30px; flex-wrap: wrap; flex: 1; } .em3-foot-global-list li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--em3-ink-muted); } .em3-foot-global-list svg { width: 13px; height: 16px; flex-shrink: 0; } .em3-foot-global-list .city { color: #fff; font-weight: 600; } .em3-foot-global-list .country { color: var(--em3-ink-dim); font-size: 12px; } .em3-foot-global-list .pin-fill { fill: var(--em3-accent); stroke: var(--em3-accent); } .em3-foot-global-list .pin-out { fill: none; stroke: var(--em3-accent-hot); stroke-width: 2; } /* ----- BAND 4: certified trust plate + Engineered Shield seals ----- */ .em3-foot-certwrap { padding: var(--em3-space-3) var(--em3-pad-x); } .em3-foot-certplate { position: relative; overflow: hidden; background: rgba(255,255,255,0.03); border: 1px solid var(--em3-line-soft); border-radius: var(--em3-radius-card); padding: var(--em3-space-2); } .em3-foot-certplate::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% -10%, rgba(46,93,255,0.12), transparent 65%); pointer-events: none; } .em3-foot-cert-head { position: relative; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; } .em3-foot-cert-title { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--em3-ink-muted); } .em3-foot-cert-sub { font-size: 13px; color: var(--em3-ink-dim); } .em3-foot-seals { position: relative; display: flex; gap: var(--em3-space-1); flex-wrap: wrap; } .em3-seal { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 96px; text-align: center; } .em3-seal__plaque { position: relative; width: 64px; height: 64px; display: grid; place-items: center; background: linear-gradient(158deg, rgba(255,255,255,0.06), rgba(255,255,255,0.012)); border: 1px solid var(--em3-line-soft); border-radius: var(--em3-radius); transition: transform .25s, box-shadow .25s, border-color .25s; } .em3-seal__plaque::before { content: ""; position: absolute; top: 0; left: 6px; right: 6px; height: 1px; background: rgba(255,255,255,0.14); } .em3-foot-seals .em3-seal__art { width: 46px; height: 46px; display: block; } .em3-seal__official img { max-height: 44px; width: auto; } .em3-seal__knurl { fill: none; stroke: var(--em3-accent); stroke-opacity: .35; stroke-width: 1.4; stroke-dasharray: .4 3; stroke-linecap: round; } .em3-seal__ring { fill: none; stroke: var(--em3-accent); stroke-opacity: .5; stroke-width: 1.1; } .em3-seal__glyph { fill: none; stroke: var(--em3-accent-hot); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .25s; } .em3-seal__hub { fill: var(--em3-accent-hot); stroke: none; } .em3-seal__tick { position: absolute; top: -5px; right: -5px; width: 16px; height: 16px; border-radius: var(--em3-radius); background: var(--em3-accent-warm); display: grid; place-items: center; } .em3-seal__tick::after { content: ""; width: 7px; height: 4px; border-left: 2px solid var(--em3-ink-navy); border-bottom: 2px solid var(--em3-ink-navy); transform: rotate(-45deg); margin-top: -2px; } .em3-seal__cap { display: flex; flex-direction: column; gap: 1px; } .em3-seal__std { font-size: 13px; font-weight: 700; color: #fff; letter-spacing: .01em; } .em3-seal__desc { font-size: 10.5px; font-weight: 500; color: var(--em3-ink-dim); letter-spacing: .02em; } .em3-seal:hover .em3-seal__plaque { transform: translateY(-3px); box-shadow: 0 16px 30px -12px rgba(46,93,255,0.5); border-color: rgba(106,138,255,0.5); } .em3-seal:hover .em3-seal__ring { stroke: var(--em3-accent-hot); stroke-opacity: .9; } .em3-seal:hover .em3-seal__glyph { stroke: #fff; } /* ----- BAND 5: legal baseline ----- */ .em3-foot-legal { padding: 26px var(--em3-pad-x); } .em3-foot-legal-top { display: flex; align-items: center; justify-content: space-between; gap: 14px 28px; flex-wrap: wrap; padding-bottom: 16px; } .em3-foot-copy { display: block; font-size: 12px; color: var(--em3-ink-dim); text-align: center; } .em3-foot-legal-menu { list-style: none; display: flex; gap: 10px 18px; margin: 0; padding: 0; flex-wrap: wrap; } .em3-foot-legal-menu a { font-size: 12px; color: rgba(255,255,255,0.5); text-decoration: none; transition: color .15s; } .em3-foot-legal-menu a:hover { color: var(--em3-accent-hot); } .em3-foot-built { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; opacity: .72; transition: opacity .2s; } .em3-foot-built:hover { opacity: 1; } .em3-foot-built-label { font-size: 11px; letter-spacing: .03em; color: rgba(255,255,255,0.5); white-space: nowrap; } /* (0,2,0) so height wins over Elementor's `.elementor img {height:auto}` (0,1,1). */ .em3-foot-built .em3-foot-mktg-logo { height: 17px; width: auto; display: block; } /* ----- responsive: 3 explicit breakpoints; seals never sink far below the fold ----- */ @media (max-width: 980px) { .em3-foot-cta-grid { grid-template-columns: 1fr; gap: var(--em3-space-2); padding: var(--em3-space-3) 0; } .em3-foot-news2 { border-left: none; border-top: 1px solid var(--em3-line-soft); padding-left: 0; padding-top: 28px; } .em3-foot-nav { grid-template-columns: 1fr 1fr; gap: var(--em3-space-2) var(--em3-space-1); } .em3-foot-anchor { grid-column: 1 / -1; } } @media (max-width: 640px) { /* tighter vertical rhythm on phones (the 64px band gaps were far too tall) */ /* footer nav as a 2x2 on phones: Explore | Company, then Contact | Part of SHV */ .em3-foot-nav { grid-template-columns: 1fr 1fr; gap: var(--em3-space-2) var(--em3-space-1); padding-top: var(--em3-space-2); padding-bottom: var(--em3-space-2); } /* The Contact column (the only div.em3-foot-col; Explore/Company are