/* ============================================================ elite.css — Elite Worldwide Services shared design system ------------------------------------------------------------ One source of truth for chrome (topbar/nav/footer), type, buttons, cards, section looks and the motion vocabulary. Loaded by every page before elite.js + websly-cloud-settings.js. All looks key off the data-* attributes the settings engine applies to and to section elements; palette is the client's existing token set only. ============================================================ */ /* ---------- Brand tokens (E3) ---------- The four brand colours repeated throughout this file, named once here. Everything below reads these via var() instead of the literal hex, so a rebrand is a 4-line edit instead of a find/replace across the file. Names/roles per design-system/README.md's colour table. */ :root { --brand-blue: #1C7FC4; /* Accent blue — links, buttons, icons on light backgrounds */ --brand-blue-light: #7FC2EF; /* Accent blue (light) — accents on dark backgrounds */ --brand-ink-navy: #0B1E3A; /* Ink navy — utility bar, dark section backgrounds, footer */ --brand-deep-navy: #10233F; /* Deep navy — headings on light backgrounds */ } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: 'Public Sans', system-ui, -apple-system, sans-serif; font-size: 16px; line-height: 1.65; color: #1B2430; background: #FFFFFF; overflow-x: clip; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-family: 'Archivo', sans-serif; margin: 0; } p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } button { font-family: inherit; } .ews-container { max-width: 1200px; margin: 0 auto; padding-left: clamp(20px, 4vw, 44px); padding-right: clamp(20px, 4vw, 44px); } .ews-section { position: relative; padding-top: clamp(72px, 9vw, 124px); padding-bottom: clamp(72px, 9vw, 124px); background: var(--sec-bg); color: var(--sec-fg); /* Anchor links land below the fixed bar rather than under it. */ scroll-margin-top: 88px; } /* Division anchors are plain blocks inside a section, so they need the same offset — the nav dropdown and the Services pill bar both target them. */ .ews-split[id], .div-full[id] { scroll-margin-top: 104px; } /* Section tone system: every section reads its colours from these vars, so the panel's background switch keeps everything legible. */ .ews-section, .sec-white { --sec-bg: #FFFFFF; --sec-fg: #1B2430; --sec-head: var(--brand-deep-navy); --sec-muted: #5B6472; --sec-border: #E1E7EE; --sec-card: #FFFFFF; --sec-chip: #F2F6FA; --sec-accent: var(--brand-blue); } .sec-mist { --sec-bg: #F2F6FA; --sec-chip: #FFFFFF; } .sec-dark { --sec-bg: linear-gradient(135deg, var(--brand-ink-navy), #112B54); --sec-fg: #B9C7DA; --sec-head: #FFFFFF; --sec-muted: #B9C7DA; --sec-border: rgba(255, 255, 255, 0.14); --sec-card: rgba(255, 255, 255, 0.06); --sec-chip: rgba(255, 255, 255, 0.08); --sec-accent: var(--brand-blue-light); } /* Panel overrides (attribute set by the engine) — declared after the class defaults so equal specificity resolves in the override's favour. */ [data-secbg="white"] { --sec-bg: #FFFFFF; --sec-fg: #1B2430; --sec-head: var(--brand-deep-navy); --sec-muted: #5B6472; --sec-border: #E1E7EE; --sec-card: #FFFFFF; --sec-chip: #F2F6FA; --sec-accent: var(--brand-blue); } [data-secbg="mist"] { --sec-bg: #F2F6FA; --sec-fg: #1B2430; --sec-head: var(--brand-deep-navy); --sec-muted: #5B6472; --sec-border: #E1E7EE; --sec-card: #FFFFFF; --sec-chip: #FFFFFF; --sec-accent: var(--brand-blue); } [data-secbg="navy"] { --sec-bg: var(--brand-ink-navy); --sec-fg: #B9C7DA; --sec-head: #FFFFFF; --sec-muted: #B9C7DA; --sec-border: rgba(255,255,255,0.14); --sec-card: rgba(255,255,255,0.06); --sec-chip: rgba(255,255,255,0.08); --sec-accent: var(--brand-blue-light); } [data-secbg="deep"] { --sec-bg: linear-gradient(135deg, var(--brand-ink-navy), #112B54); --sec-fg: #B9C7DA; --sec-head: #FFFFFF; --sec-muted: #B9C7DA; --sec-border: rgba(255,255,255,0.14); --sec-card: rgba(255,255,255,0.06); --sec-chip: rgba(255,255,255,0.08); --sec-accent: var(--brand-blue-light); } /* Section show/hide switches */ html[data-show-marquee="off"] #marquee, html[data-show-stats="off"] #stats, html[data-show-vision="off"] #vision, html[data-show-industries="off"] #industries, html[data-show-leadership="off"] #leadership { display: none !important; } html[data-vision-globe="off"] .vis-globe { display: none !important; } html[data-topbar="off"] .ews-topbar { display: none !important; } /* ---------- Type ---------- */ .ews-h1 { font-weight: 800; font-size: clamp(42px, 6vw, 74px); letter-spacing: -0.03em; line-height: 1.04; color: #FFFFFF; } .ews-h2 { font-weight: 800; font-size: clamp(30px, 3.6vw, 46px); letter-spacing: -0.02em; line-height: 1.08; color: var(--sec-head); } .ews-lead { font-size: clamp(16px, 1.4vw, 18px); line-height: 1.65; color: var(--sec-muted); max-width: 58ch; } .ews-sechead { max-width: 720px; margin-bottom: clamp(36px, 5vw, 60px); } .ews-sechead .ews-lead { margin-top: 16px; } .ews-sechead--center { margin-left: auto; margin-right: auto; text-align: center; } /* ---------- Buttons & links ---------- */ .ews-btn { display: inline-flex; align-items: center; gap: 9px; border: 0; cursor: pointer; border-radius: 999px; padding: 15px 30px; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 15px; line-height: 1; white-space: nowrap; transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.28s ease, background 0.28s ease, color 0.28s ease; } .ews-btn--primary { background: var(--brand-blue); color: #FFFFFF; box-shadow: 0 10px 26px -10px rgba(28, 127, 196, 0.55); } .ews-btn--primary:hover { background: #145A8C; transform: translateY(-2px); box-shadow: 0 16px 34px -10px rgba(28, 127, 196, 0.6); } .ews-btn--white { background: #FFFFFF; color: var(--brand-ink-navy); box-shadow: 0 10px 26px -12px rgba(0, 0, 0, 0.45); } .ews-btn--white:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -12px rgba(0, 0, 0, 0.5); } /* Ghost buttons often sit on photography — a faint glass fill keeps the label readable over a bright frame without reading as a second solid button. */ .ews-btn--ghost { background: rgba(255, 255, 255, 0.12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: currentColor; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.7); } .ews-btn--ghost:hover { background: rgba(255, 255, 255, 0.2); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.92); transform: translateY(-2px); } html[data-spotlight="on"] .ews-btn:active { transform: translateY(1px) scale(0.975); } .ews-btn:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 3px; } .ews-arrowlink { display: inline-flex; align-items: center; gap: 8px; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 15px; color: var(--sec-accent, var(--brand-blue)); position: relative; } .ews-arrowlink::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); } .ews-arrowlink:hover::after { transform: scaleX(1); } .ews-arrowlink .al-arrow { transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); } .ews-arrowlink:hover .al-arrow { transform: translateX(5px); } /* Underline draw on nav/footer links */ .ews-ul { position: relative; } .ews-ul::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1); } .ews-ul:hover::after, .ews-ul.is-active::after { transform: scaleX(1); } /* ---------- Cards & spotlight ---------- */ .ews-card { position: relative; border-radius: 18px; } html[data-spotlight="on"] .ews-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity 0.35s ease; pointer-events: none; background: radial-gradient(280px circle at var(--ws-mx, 50%) var(--ws-my, 50%), rgba(28, 127, 196, 0.1), transparent 65%); z-index: 2; } @media (hover: hover) { html[data-spotlight="on"] .ews-card:hover::after { opacity: 1; } } /* ---------- Grain overlay ---------- */ html[data-grain="on"] body::after { content: ""; position: fixed; inset: 0; z-index: 9990; pointer-events: none; opacity: 0.05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E"); background-size: 160px 160px; } /* ============================================================ Chrome — topbar + navbar ============================================================ */ .ews-header { position: absolute; top: 0; left: 0; right: 0; z-index: 90; } .ews-topbar { background: var(--brand-ink-navy); color: #DCE6F0; font-size: 12.5px; position: relative; z-index: 2; } .ews-topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 9px; padding-bottom: 9px; flex-wrap: wrap; } .ews-topbar a, .ews-topbar span { display: inline-flex; align-items: center; gap: 7px; color: #DCE6F0; } .ews-topbar a:hover { color: #FFFFFF; } .ews-topbar-left { display: flex; gap: 22px; flex-wrap: wrap; } @media (max-width: 640px) { .ews-topbar span.ews-topbar-right { display: none; } .ews-topbar-left a:nth-child(2) { display: none; } .ews-topbar-inner { justify-content: center; } } .ews-navbar { position: absolute; left: 0; right: 0; z-index: 95; transition: background 0.35s ease, box-shadow 0.35s ease; } /* The bar floats over the hero photograph, and the hero's own scrim fades out towards the right — which is exactly where the links sit. So the bar carries its own top-down scrim, guaranteeing legibility over any photo behind it. */ .ews-navbar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 240%; pointer-events: none; background: linear-gradient(to bottom, rgba(6, 16, 33, 0.82) 0%, rgba(6, 16, 33, 0.56) 34%, rgba(6, 16, 33, 0.22) 66%, rgba(6, 16, 33, 0) 100%); transition: opacity 0.35s ease; } html.ews-scrolled .ews-navbar::before { opacity: 0; } html[data-topbar="off"] .ews-navbar { top: 0; } .ews-navbar-inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 14px; padding-bottom: 14px; } /* Logo — transparent artwork, two lockups stacked in place. The light one (white wordmark) rides the transparent and ink bars; the dark one fades in when the bar turns frost. No container chip. */ .ews-logo { position: relative; display: inline-flex; align-items: center; flex: none; } .ews-logo img { display: block; height: 42px; width: auto; transition: opacity 0.3s ease; } .ews-logo .logo-for-dark { filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.5)); } .ews-logo .logo-for-light { position: absolute; left: 0; top: 0; opacity: 0; } html.ews-scrolled[data-nav-scrolled="frost"] .ews-logo .logo-for-dark { opacity: 0; } html.ews-scrolled[data-nav-scrolled="frost"] .ews-logo .logo-for-light { opacity: 1; } .ews-nav { display: flex; align-items: center; gap: clamp(18px, 2.1vw, 30px); } .ews-nav-links { display: contents; } .ews-nav-head, .ews-nav-foot { display: none; } .ews-nav-links > a, .ews-navitem > a { color: #FFFFFF; font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 15px; padding-bottom: 3px; display: inline-flex; align-items: center; } html:not(.ews-scrolled) .ews-nav-links > a, html:not(.ews-scrolled) .ews-navitem > a { text-shadow: 0 1px 14px rgba(3, 10, 22, 0.6); } .nav-chev { display: inline-flex; margin-left: 5px; transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); } .ews-navitem { position: relative; } /* Invisible bridge so the pointer can cross the gap into the panel. */ .ews-navitem::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px; } @media (min-width: 901px) { .ews-navitem:hover .nav-chev, .ews-navitem:focus-within .nav-chev { transform: rotate(180deg); } } .ews-dropdown { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(8px); min-width: 300px; background: rgba(255, 255, 255, 0.97); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid #E1E7EE; border-radius: 14px; box-shadow: 0 28px 60px -18px rgba(11, 30, 58, 0.35); padding: 8px; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s; } .ews-navitem:hover .ews-dropdown, .ews-navitem:focus-within .ews-dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .ews-dropdown a { display: flex; flex-direction: column; gap: 3px; padding: 11px 14px; border-radius: 10px; } .ews-dropdown a:hover { background: #F2F6FA; } .ews-dropdown a .dd-t { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 14px; color: var(--brand-deep-navy); } .ews-dropdown a .dd-d { font-size: 12px; color: #5B6472; } .ews-dropdown a[aria-current="page"] .dd-t { color: var(--brand-blue); } .ews-nav .ews-btn { padding: 12px 22px; font-size: 14px; } /* Scrolled navbar states. Every backdrop-filter here is gated to desktop: a filtered ancestor becomes the containing block for position:fixed descendants, which would strand the mobile drawer inside the bar. */ html.ews-scrolled .ews-navbar { position: fixed; top: 0; } html.ews-scrolled[data-nav-scrolled="frost"] .ews-navbar { background: #FFFFFF; box-shadow: 0 10px 34px -18px rgba(11, 30, 58, 0.35); } html.ews-scrolled[data-nav-scrolled="frost"] .ews-nav-links > a, html.ews-scrolled[data-nav-scrolled="frost"] .ews-navitem > a { color: var(--brand-deep-navy); } html.ews-scrolled[data-nav-scrolled="dark"] .ews-navbar, html.ews-scrolled[data-nav-scrolled="pill"] .ews-navbar { background: var(--brand-ink-navy); box-shadow: 0 10px 34px -18px rgba(0, 0, 0, 0.6); } @media (min-width: 901px) { html.ews-scrolled[data-nav-scrolled="frost"] .ews-navbar { background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); } html.ews-scrolled[data-nav-scrolled="dark"] .ews-navbar { background: rgba(11, 30, 58, 0.96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } html.ews-scrolled[data-nav-scrolled="pill"] .ews-navbar { top: 12px; left: 0; right: 0; margin-inline: auto; width: min(94%, 1060px); border-radius: 999px; background: rgba(11, 30, 58, 0.9); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 16px 44px -16px rgba(0, 0, 0, 0.55); } html.ews-scrolled[data-nav-scrolled="pill"] .ews-navbar-inner { padding-top: 9px; padding-bottom: 9px; } } /* Hamburger — three bars that fold into an X. */ .ews-menu-btn { display: none; position: relative; background: rgba(255, 255, 255, 0.13); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 13px; color: #FFFFFF; width: 46px; height: 46px; align-items: center; justify-content: center; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease; } html.ews-scrolled[data-nav-scrolled="frost"] .ews-menu-btn { color: var(--brand-deep-navy); border-color: #C7D2DE; background: #F2F6FA; } .ews-menu-btn:focus-visible { outline: 2px solid var(--brand-blue-light); outline-offset: 3px; } .mb-bars { position: relative; display: block; width: 20px; height: 14px; } .mb-bars i { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.34s cubic-bezier(0.2, 0.7, 0.2, 1), top 0.34s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.2s ease; } .mb-bars i:nth-child(1) { top: 0; } .mb-bars i:nth-child(2) { top: 6px; } .mb-bars i:nth-child(3) { top: 12px; } .ews-menu-btn[aria-expanded="true"] .mb-bars i:nth-child(1) { top: 6px; transform: rotate(45deg); } .ews-menu-btn[aria-expanded="true"] .mb-bars i:nth-child(2) { opacity: 0; } .ews-menu-btn[aria-expanded="true"] .mb-bars i:nth-child(3) { top: 6px; transform: rotate(-45deg); } /* Drawer backdrop. Sits outside .ews-navbar so no filtered ancestor can capture it, and one step below the bar so the logo stays readable. */ .ews-navscrim { display: none; position: fixed; inset: 0; z-index: 94; background: rgba(5, 13, 27, 0.62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s; } /* ---------- Mobile drawer ---------- */ @media (max-width: 900px) { html.ews-scrolled[data-nav-scrolled="pill"] .ews-navbar, html.ews-scrolled[data-nav-scrolled="dark"] .ews-navbar { background: var(--brand-ink-navy); box-shadow: 0 10px 34px -18px rgba(0, 0, 0, 0.6); } .ews-logo img { height: 36px; } .ews-menu-btn { display: inline-flex; } .ews-navscrim { display: block; } html.ews-nav-open .ews-navscrim { opacity: 1; visibility: visible; } /* Freeze the page behind the drawer. Mobile scrollbars are overlaid, so removing the scroll here costs no layout shift. */ html.ews-nav-open, html.ews-nav-open body { overflow: hidden; } .ews-nav { position: fixed; top: 0; right: 0; bottom: 0; width: min(87vw, 372px); z-index: 96; flex-direction: column; align-items: stretch; gap: 0; padding: 0; background: linear-gradient(185deg, #0C2141 0%, #071426 100%); border-left: 1px solid rgba(255, 255, 255, 0.12); box-shadow: -34px 0 80px -22px rgba(0, 0, 0, 0.72); /* Past 100% so the panel still clears the edge when the scroll lock releases and the scrollbar narrows the containing block. */ transform: translateX(106%); visibility: hidden; transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1), visibility 0.42s; } .ews-nav.is-open { transform: none; visibility: visible; } .ews-nav-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex: none; padding: 16px 18px; padding-top: max(16px, env(safe-area-inset-top)); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .ews-nav-head img { height: 34px; width: auto; } .ews-nav-close { flex: none; width: 42px; height: 42px; border-radius: 12px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); color: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.25s ease; } .ews-nav-close:hover, .ews-nav-close:focus-visible { background: rgba(255, 255, 255, 0.17); } .ews-nav-links { display: block; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 12px 12px 6px; } .ews-nav-links > a, .ews-navitem > a { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 14px; border-radius: 12px; font-size: 16.5px; color: #FFFFFF; text-shadow: none; -webkit-tap-highlight-color: transparent; } .ews-nav-links > a:active, .ews-navitem > a:active { background: rgba(255, 255, 255, 0.09); } .ews-nav-links > a.is-active, .ews-navitem > a.is-active { background: rgba(28, 127, 196, 0.22); box-shadow: inset 0 0 0 1px rgba(127, 194, 239, 0.32); } .ews-ul::after { display: none; } .nav-chev { margin-left: auto; color: rgba(255, 255, 255, 0.5); } .ews-navitem > a[aria-expanded="true"] { color: var(--brand-blue-light); } .ews-navitem > a[aria-expanded="true"] .nav-chev { transform: rotate(180deg); color: var(--brand-blue-light); } .ews-navitem::after { display: none; } .ews-dropdown { position: static; transform: none; min-width: 0; background: transparent; border: 0; border-left: 1px solid rgba(255, 255, 255, 0.15); border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; margin: 2px 0 6px 14px; padding: 0; opacity: 1; max-height: 0; overflow: hidden; visibility: hidden; transition: max-height 0.36s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.36s; } .ews-navitem:hover .ews-dropdown, .ews-navitem:focus-within .ews-dropdown { transform: none; } .ews-dropdown.is-open { max-height: 480px; visibility: visible; } .ews-dropdown a { padding: 11px 14px; border-radius: 10px; } .ews-dropdown a:hover, .ews-dropdown a:active { background: rgba(255, 255, 255, 0.08); } .ews-dropdown a .dd-t { color: rgba(255, 255, 255, 0.94); font-size: 14.5px; } .ews-dropdown a .dd-d { color: rgba(255, 255, 255, 0.48); font-size: 12.5px; } .ews-nav .ews-btn { justify-content: center; margin: 4px 16px 0; padding: 15px 24px; font-size: 15px; } .ews-nav-foot { display: flex; flex-direction: column; gap: 11px; flex: none; padding: 16px 20px; padding-bottom: max(18px, env(safe-area-inset-bottom)); margin-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 13.5px; } .ews-nav-foot a, .ews-nav-foot span { display: inline-flex; align-items: center; gap: 9px; color: #B9C7DA; word-break: break-word; } .ews-nav-foot a:hover { color: #FFFFFF; } .ews-nav-foot svg { flex: none; color: var(--brand-blue-light); } } /* ============================================================ Hero ============================================================ */ .ews-hero { position: relative; min-height: 92svh; display: flex; align-items: flex-end; overflow: clip; background: var(--brand-ink-navy); color: #FFFFFF; } .ews-hero--short { min-height: 62svh; } .hero-media, .hero-media picture { position: absolute; inset: 0; } .hero-media image-slot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Photo switch (Home carries two hero imgs) */ html[data-hero-photo="towers"] .hero-ph-london { display: none; } html[data-hero-photo="london"] .hero-ph-towers { display: none; } html[data-hero-ken="on"][data-motion="on"] .ews-kb image-slot { animation: ewsKb 24s ease-in-out infinite alternate; } @keyframes ewsKb { from { transform: scale(1); } to { transform: scale(1.09); } } /* Three stacked washes, each doing one job: a blue vignette rising off the bottom edge so the headline and CTAs always sit on ink rather than on whatever the photograph happens to be doing, a left-weighted wash for the copy column, and a soft overall tint to hold the whole frame together. */ .hero-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(7, 22, 45, 0.94) 0%, rgba(8, 24, 48, 0.74) 18%, rgba(9, 26, 52, 0.42) 38%, rgba(10, 28, 54, 0.12) 60%, rgba(11, 30, 58, 0) 76%), linear-gradient(90deg, rgba(8, 18, 36, 0.84) 0%, rgba(8, 18, 36, 0.48) 46%, rgba(8, 18, 36, 0.12) 100%), linear-gradient(200deg, rgba(11, 30, 58, 0.4), rgba(11, 30, 58, 0.12) 45%, rgba(11, 30, 58, 0.5) 100%); } html[data-hero-look="classic"] .ews-hero .hero-media { display: none; } html[data-hero-look="classic"] .ews-hero { background: linear-gradient(135deg, var(--brand-ink-navy) 0%, #112B54 60%, var(--brand-ink-navy) 100%); } .hero-content { position: relative; z-index: 2; width: 100%; padding-top: clamp(150px, 22vh, 220px); padding-bottom: clamp(64px, 9vh, 110px); } .hero-sub { margin-top: 26px; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; color: #DCE6F0; max-width: 46ch; } .hero-ctas { display: flex; align-items: center; gap: 18px; margin-top: 38px; flex-wrap: wrap; } /* Split-line reveal (load) */ .sl { display: block; overflow: hidden; } .sl-in { display: block; } html[data-motion="on"] .sl-in { transform: translateY(112%); animation: ewsSlUp 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; } html[data-motion="on"] .sl:nth-child(2) .sl-in { animation-delay: 0.12s; } html[data-motion="on"] .sl:nth-child(3) .sl-in { animation-delay: 0.24s; } @keyframes ewsSlUp { to { transform: translateY(0); } } html[data-motion="on"] .hero-sub, html[data-motion="on"] .hero-ctas { opacity: 0; transform: translateY(18px); animation: ewsFadeUp 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; } html[data-motion="on"] .hero-sub { animation-delay: 0.38s; } html[data-motion="on"] .hero-ctas { animation-delay: 0.5s; } @keyframes ewsFadeUp { to { opacity: 1; transform: none; } } /* Rotating headline word */ .ews-rotator { display: inline-grid; overflow: hidden; vertical-align: bottom; text-align: left; } .ews-rotator > span { grid-area: 1 / 1; color: var(--brand-blue-light); opacity: 0; transform: translateY(105%); transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.4s ease; white-space: nowrap; } /* Resting state, before initRotator() owns the cycle: the FIRST word is the headline. Without this the h1 reads "One trusted partner for" with an empty gap until elite.js boots (a real flash on a live page), and it is also the state the capture measures — design behaviour scripts are blocked at capture time by design (D124-5), so the geometry gate saw this word parked 82px low at translateY(105%) while the built page had it on the line. initRotator() adds .rot-ready in the same tick it makes word 0 current, so the moment JS owns the rotation this rule stops matching and word 0 can hide on its turn like any other. Progressive enhancement, D45-E. */ .ews-rotator:not(.rot-ready) > span:first-child { opacity: 1; transform: none; } .ews-rotator > span.rot-cur { opacity: 1; transform: none; } .ews-rotator > span.rot-out { opacity: 0; transform: translateY(-105%); } html[data-hero-rotate="off"] .ews-rotator > span { transition: none; } /* Classic hero headline variant */ .h1-classic { display: none; } html[data-hero-look="classic"] .h1-classic { display: block; } html[data-hero-look="classic"] .h1-cinema { display: none; } /* Scroll-driven hero exit + soft rises */ @supports (animation-timeline: view()) { html[data-scroll-fx="on"] .hero-content { animation: ewsHeroExit linear both; animation-timeline: scroll(); animation-range: 0 92svh; } html[data-scroll-fx="on"] .ws-scrub-rise { animation: ewsRiseSoft linear both; animation-timeline: view(); animation-range: entry 0% entry 62%; } } @keyframes ewsHeroExit { from { opacity: 1; transform: none; } to { opacity: 0.05; transform: translateY(-46px); } } @keyframes ewsRiseSoft { from { opacity: 0.3; transform: translateY(26px); } to { opacity: 1; transform: none; } } /* ---------- Reveal-on-scroll vocabulary ---------- */ html[data-motion="on"] [data-rv] { opacity: 0; transform: translateY(26px); transition: opacity 0.75s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.75s cubic-bezier(0.2, 0.7, 0.2, 1); } html[data-motion="on"] [data-rv].rv-in { opacity: 1; transform: none; } html[data-motion="on"] [data-rv-d="1"] { transition-delay: 0.07s; } html[data-motion="on"] [data-rv-d="2"] { transition-delay: 0.14s; } html[data-motion="on"] [data-rv-d="3"] { transition-delay: 0.21s; } html[data-motion="on"] [data-rv-d="4"] { transition-delay: 0.28s; } html[data-motion="on"] [data-rv-d="5"] { transition-delay: 0.35s; } html[data-motion="on"] [data-rv-d="6"] { transition-delay: 0.42s; } /* ============================================================ Marquee (divisions band) ============================================================ */ #marquee { padding: clamp(30px, 4vw, 48px) 0; border-top: 1px solid var(--sec-border); border-bottom: 1px solid var(--sec-border); overflow: clip; } .mq-track { display: flex; align-items: center; gap: clamp(36px, 5vw, 72px); width: max-content; } html[data-motion="on"] #marquee.in-view .mq-track { animation: ewsMq 36s linear infinite; } #marquee:hover .mq-track { animation-play-state: paused; } @keyframes ewsMq { to { transform: translateX(-50%); } } .mq-item { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(38px, 5.4vw, 68px); letter-spacing: -0.02em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px rgba(16, 35, 63, 0.34); } [data-secbg="navy"] .mq-item, [data-secbg="deep"] .mq-item { -webkit-text-stroke-color: rgba(255, 255, 255, 0.38); } .mq-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand-blue); flex: none; } /* ============================================================ Services showcase ============================================================ */ .svc-grid { display: grid; gap: 22px; } #services[data-services-layout="showcase"] .svc-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 265px; } #services[data-services-layout="showcase"] .svc-card--tall { grid-row: span 2; } #services[data-services-layout="showcase"] .svc-card--wide { grid-column: span 2; } #services[data-services-layout="classic"] .svc-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-auto-rows: 340px; } .svc-card { position: relative; overflow: hidden; border-radius: 18px; display: block; background: var(--brand-ink-navy); } .svc-card image-slot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); } .svc-card:hover image-slot { transform: scale(1.06); } .svc-card::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(200deg, rgba(11, 30, 58, 0.06) 30%, rgba(8, 18, 36, 0.82) 100%); transition: background 0.4s ease; } .svc-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(20px, 2.6vw, 32px); display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; color: #FFFFFF; } .svc-body h3 { font-weight: 700; font-size: clamp(19px, 1.9vw, 24px); letter-spacing: -0.01em; color: #FFFFFF; } .svc-body p { margin-top: 7px; font-size: 14.5px; line-height: 1.5; color: #DCE6F0; max-width: 44ch; } .svc-go { flex: none; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.35); display: flex; align-items: center; justify-content: center; color: #FFFFFF; transition: background 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); } .svc-card:hover .svc-go { background: var(--brand-blue); border-color: var(--brand-blue); transform: translateX(4px); } /* ============================================================ Stats band (count-up) ============================================================ */ #stats { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px); } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: clamp(28px, 4vw, 48px); } .stat { border-left: 2px solid var(--sec-accent); padding-left: 22px; } .stat-num { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(46px, 5.6vw, 76px); letter-spacing: -0.03em; line-height: 1; color: var(--sec-head); font-variant-numeric: tabular-nums; } .stat-num .suf { color: var(--sec-accent); } .stat-label { margin-top: 10px; font-size: 14.5px; font-weight: 600; color: var(--sec-muted); } /* ============================================================ Why Elite — bento ============================================================ */ .why-grid { display: grid; gap: 22px; } #why[data-why-look="bento"] .why-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(230px, auto); } #why[data-why-look="bento"] .why-cell--photo { grid-row: span 2; } #why[data-why-look="classic"] .why-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } #why[data-why-look="classic"] .why-cell--photo, #why[data-why-look="classic"] .why-cell--cta { display: none; } .why-cell { border-radius: 18px; border: 1px solid var(--sec-border); background: var(--sec-card); padding: clamp(22px, 2.6vw, 32px); display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; overflow: hidden; transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease; } .why-cell:hover { transform: translateY(-5px); box-shadow: 0 26px 50px -22px rgba(11, 30, 58, 0.35); } .why-cell h3 { font-weight: 700; font-size: 19px; color: var(--sec-head); } .why-cell p { font-size: 14.5px; line-height: 1.6; color: var(--sec-muted); } .why-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--brand-ink-navy); color: var(--brand-blue-light); display: flex; align-items: center; justify-content: center; margin-bottom: auto; } .why-cell--photo { padding: 0; border: 0; position: relative; min-height: 300px; } .why-cell--photo image-slot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .why-cell--dark { background: linear-gradient(155deg, var(--brand-ink-navy), #112B54); border-color: rgba(255, 255, 255, 0.12); } .why-cell--dark h3 { color: #FFFFFF; } .why-cell--dark p { color: #B9C7DA; } .why-cell--dark .why-ico { background: rgba(255, 255, 255, 0.1); } .why-cell--cta { background: linear-gradient(135deg, var(--brand-blue), #145A8C); border: 0; justify-content: center; align-items: flex-start; } .why-cell--cta .ews-arrowlink { color: #FFFFFF; font-size: 18px; } /* ============================================================ Vision quote + globe ============================================================ */ #vision { overflow: clip; } .vis-wrap { display: flex; align-items: center; gap: clamp(40px, 6vw, 80px); flex-wrap: wrap; } .vis-quote { flex: 2 1 460px; } .vis-quote-text { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: clamp(24px, 2.9vw, 38px); letter-spacing: -0.01em; line-height: 1.45; } .vis-quote-text { color: var(--sec-head); } .vis-quote-text .ews-word { opacity: 0.24; transition: opacity 0.3s linear; } html[data-motion="off"] .vis-quote-text .ews-word { opacity: 1; } .vis-attr { margin-top: 30px; } .vis-attr .va-name { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 16px; color: var(--sec-head); } .vis-attr .va-role { font-size: 13.5px; color: var(--sec-accent); margin-top: 3px; } .vis-globe { flex: 1 1 300px; display: flex; justify-content: center; } .vis-globe-inner { position: relative; width: min(360px, 80vw); aspect-ratio: 1; } .vis-globe-inner::before { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 110px 24px rgba(127, 194, 239, 0.22); pointer-events: none; } .vis-globe canvas { width: 100%; height: 100%; opacity: 0; transition: opacity 0.6s ease; cursor: grab; } /* ============================================================ Industries ============================================================ */ .ind-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; } .ind-chip { display: inline-flex; align-items: center; gap: 10px; background: var(--sec-chip); border: 1px solid var(--sec-border); border-radius: 999px; padding: 13px 24px; font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 14.5px; color: var(--sec-head); transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease; } .ind-chip:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -14px rgba(11, 30, 58, 0.3); border-color: var(--brand-blue); } .ind-chip svg { color: var(--brand-blue); flex: none; } [data-secbg="navy"] .ind-chip svg, [data-secbg="deep"] .ind-chip svg { color: var(--brand-blue-light); } /* ============================================================ Split sections (leadership teaser / story / together) ============================================================ */ .ews-split { display: flex; align-items: center; gap: clamp(36px, 5.5vw, 72px); flex-wrap: wrap; } .ews-split > .sp-media { flex: 1 1 440px; position: relative; } .ews-split > .sp-copy { flex: 1 1 440px; } .sp-media image-slot { width: 100%; border-radius: 18px; aspect-ratio: 4 / 3; object-fit: cover; box-shadow: 0 36px 70px -30px rgba(11, 30, 58, 0.5); } .sp-chip { position: absolute; left: 22px; bottom: 22px; display: inline-flex; align-items: center; gap: 9px; background: rgba(255, 255, 255, 0.16); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.34); border-radius: 999px; padding: 11px 20px; color: #FFFFFF; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 13.5px; box-shadow: 0 18px 36px -14px rgba(0, 0, 0, 0.4); } .sp-copy .ews-lead { margin-top: 18px; } .sp-copy .ews-arrowlink, .sp-copy .ews-btn { margin-top: 28px; } /* ============================================================ CTA band ============================================================ */ #cta { text-align: center; overflow: clip; } #cta .ews-h2 { font-size: clamp(34px, 4.6vw, 58px); } #cta .ews-lead { margin: 18px auto 0; } .cta-actions { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 36px; flex-wrap: wrap; } .cta-tel { display: inline-flex; align-items: center; gap: 9px; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 16px; color: #FFFFFF; } .cta-tel:hover { color: var(--brand-blue-light); } /* ============================================================ Footer ============================================================ */ .ews-footrule { height: 3px; background: linear-gradient(90deg, var(--brand-blue), var(--brand-blue-light)); } .ews-footer { background: var(--brand-ink-navy); color: #B9C7DA; padding-top: clamp(56px, 7vw, 84px); overflow: clip; } .foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 40px; padding-bottom: 44px; } .foot-brand p { font-size: 14px; line-height: 1.65; max-width: 30ch; margin-top: 16px; } .foot-logo { display: inline-block; } .foot-logo img { height: 40px; width: auto; } .foot-h { color: #FFFFFF; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 13.5px; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 16px; } .foot-col a, .foot-col span { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #B9C7DA; margin-bottom: 10px; } .foot-col a:hover { color: #FFFFFF; } .foot-word { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(72px, 14vw, 190px); letter-spacing: 0.02em; line-height: 0.8; text-align: center; background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.01)); -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none; pointer-events: none; margin-top: 10px; transform: translateY(8px); } .foot-legal { border-top: 1px solid rgba(255, 255, 255, 0.14); padding-top: 22px; padding-bottom: 26px; font-size: 13px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; } .foot-legal a { color: #B9C7DA; font-weight: 600; } .foot-legal a:hover { color: #FFFFFF; } /* ============================================================ Inner-page patterns ============================================================ */ /* Division blocks (Services page) */ .div-list { display: grid; gap: clamp(56px, 8vw, 110px); } .div-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 26px; } .div-feat { display: flex; align-items: center; gap: 10px; background: var(--sec-chip); border: 1px solid var(--sec-border); border-radius: 12px; padding: 13px 16px; font-size: 14px; font-weight: 600; color: var(--sec-head); } .div-feat svg { color: var(--brand-blue); flex: none; } .div-full { position: relative; border-radius: 22px; overflow: hidden; min-height: 480px; display: flex; align-items: flex-end; color: #FFFFFF; } .div-full > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* The copy fills nearly the whole card here, so a bottom vignette alone can never carry it — the heading ends up on the brightest part of the photo. The copy gets its own glass panel instead, which keeps the photograph readable as a photograph and the text readable as text. */ .div-full::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(7, 20, 40, 0.72) 0%, rgba(8, 22, 44, 0.44) 55%, rgba(9, 24, 48, 0.3) 100%); } /* Dark panel inside a white section, so it carries its own accent — the light-background blue lands at ~3.4:1 against the photo behind it. */ .div-full-body { position: relative; z-index: 1; padding: clamp(24px, 3.2vw, 42px); max-width: 620px; margin: clamp(18px, 2.4vw, 32px); border-radius: 18px; /* No backdrop-filter: blurring inside this clipped, rounded, image-backed card stalls compositing badly, and at ~90% opacity it buys nothing. */ background: linear-gradient(150deg, rgba(9, 24, 48, 0.93), rgba(7, 18, 38, 0.88)); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 30px 70px -28px rgba(0, 0, 0, 0.6); --sec-accent: var(--brand-blue-light); } .div-full-body .ews-h2 { color: #FFFFFF; } .div-full-body p { color: #DCE6F0; margin-top: 14px; } .div-full-body .div-feat { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.2); color: #FFFFFF; } .div-full-body .div-feat svg { color: var(--brand-blue-light); } /* Team cards + initials avatars (never stock faces for real people) */ .team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; } .team-card { background: var(--sec-card); border: 1px solid var(--sec-border); border-radius: 18px; padding: clamp(24px, 2.6vw, 32px); transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease; overflow: hidden; position: relative; } .team-card:hover { transform: translateY(-5px); box-shadow: 0 28px 54px -24px rgba(11, 30, 58, 0.35); } .team-card--wide { grid-column: 1 / -1; display: flex; gap: clamp(24px, 3vw, 44px); align-items: center; flex-wrap: wrap; } .ews-avatar { width: 88px; height: 88px; border-radius: 50%; flex: none; background: linear-gradient(135deg, var(--brand-deep-navy), var(--brand-blue)); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 26px; letter-spacing: 0.02em; box-shadow: 0 14px 30px -12px rgba(11, 30, 58, 0.5); } /* team-name is an

so the leadership names appear in the page's heading outline (the v1 live-only SL-21 behaviour, carried into v3 by EDT-28). font-family: inherit neutralises the h1-h4 rule above, so the tag change is invisible on screen — same "typography neutralized" discipline SL-21 used. */ .team-name { font-family: inherit; font-weight: 700; font-size: 20px; color: var(--sec-head); margin-top: 18px; } .team-card--wide .team-name { margin-top: 0; } .team-role { font-size: 13.5px; font-weight: 700; color: var(--brand-blue); margin-top: 4px; } .team-bio { font-size: 14.5px; line-height: 1.65; color: var(--sec-muted); margin-top: 12px; } /* Difference rows (WhyChooseElite) */ .diff-row { position: relative; padding: clamp(34px, 5vw, 56px) 0; border-top: 1px solid var(--sec-border); overflow: clip; } .diff-row:last-child { border-bottom: 1px solid var(--sec-border); } .diff-num { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(120px, 18vw, 260px); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(16, 35, 63, 0.1); pointer-events: none; user-select: none; } .diff-body { max-width: 700px; position: relative; z-index: 1; } .diff-body h3 { font-weight: 800; font-size: clamp(22px, 2.4vw, 30px); color: var(--sec-head); } .diff-body > p { margin-top: 14px; color: var(--sec-muted); line-height: 1.7; } .diff-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } /* Vision statement + values grid (About) */ .vision-statement { position: relative; overflow: hidden; border-radius: 18px; padding: clamp(28px, 3.6vw, 52px); margin-bottom: 22px; background: linear-gradient(135deg, var(--brand-ink-navy) 0%, #143166 100%); color: #FFFFFF; box-shadow: 0 34px 70px -34px rgba(11, 30, 58, 0.6); } .vision-statement::after { content: ""; position: absolute; right: -60px; top: -80px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(127, 194, 239, 0.22), transparent 68%); pointer-events: none; } .vs-label { display: block; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-blue-light); margin-bottom: 16px; } .vision-statement p { position: relative; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: clamp(20px, 2.2vw, 30px); letter-spacing: -0.01em; line-height: 1.45; max-width: 34ch; } .values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; } /* The bento cells bottom-align their copy, which staggers the headings in a uniform row like this one — read top-down here instead. */ .values-grid .why-cell { justify-content: flex-start; } .values-grid .why-ico { margin-bottom: 6px; } /* Founder quote (Leadership) */ .big-quote { position: relative; max-width: 900px; margin: 0 auto; text-align: center; } .big-quote .bq-mark { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 140px; line-height: 0.6; color: var(--brand-blue); opacity: 0.35; display: block; } .big-quote blockquote { margin: 24px 0 0; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: clamp(22px, 2.8vw, 34px); letter-spacing: -0.01em; line-height: 1.45; color: var(--sec-head); } /* Careers — role cards + modal */ .role-card { background: var(--sec-card); border: 1px solid var(--sec-border); border-radius: 18px; padding: clamp(24px, 3vw, 36px); cursor: pointer; transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease; } .role-card:hover { transform: translateY(-5px); box-shadow: 0 28px 54px -24px rgba(11, 30, 58, 0.35); border-color: var(--brand-blue); } .role-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } .role-tag { font-size: 12.5px; font-weight: 700; color: var(--brand-blue); background: rgba(28, 127, 196, 0.1); border: 1px solid rgba(28, 127, 196, 0.25); border-radius: 999px; padding: 5px 13px; } /* Placeholder-listing marker (E1) — amber, deliberately not part of the accent-blue palette so it can never be mistaken for a real role tag. Static markup only, no settings-engine toggle, so it can't be left accidentally switched off. Remove this chip (and only this chip) the day the Event Coordinator role becomes a real listing. */ .role-tag--placeholder { color: #92400E; background: rgba(217, 119, 6, 0.14); border: 1px solid rgba(217, 119, 6, 0.4); } .role-card h3 { font-weight: 800; font-size: 24px; color: var(--sec-head); } .role-card > p { margin-top: 10px; color: var(--sec-muted); font-size: 15px; line-height: 1.65; } .ews-modal { position: fixed; inset: 0; z-index: 99000; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(8, 18, 36, 0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .ews-modal.is-open { display: flex; } .ews-modal-card { background: #FFFFFF; border-radius: 18px; max-width: 700px; width: 100%; max-height: 86vh; overflow-y: auto; padding: clamp(26px, 4vw, 44px); position: relative; box-shadow: 0 50px 120px -30px rgba(0, 0, 0, 0.6); } .ews-modal-close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #E1E7EE; background: #F2F6FA; color: var(--brand-deep-navy); font-size: 16px; cursor: pointer; } .ews-modal-close:hover { background: #E1E7EE; } .ews-modal-card h2 { font-weight: 800; font-size: 28px; color: var(--brand-deep-navy); margin: 6px 0 14px; } .ews-modal-card h4 { font-weight: 700; font-size: 16px; color: var(--brand-deep-navy); margin: 24px 0 10px; } .ews-modal-card p { color: #5B6472; line-height: 1.7; } .ews-modal-card ul { list-style: none; } .ews-modal-card li { position: relative; padding: 5px 0 5px 26px; color: #5B6472; line-height: 1.6; font-size: 15px; } .ews-modal-card li::before { content: "✓"; position: absolute; left: 2px; color: var(--brand-blue); font-weight: 800; } .apply-box { background: #F2F6FA; border: 1px solid #E1E7EE; border-radius: 14px; padding: 22px; margin-top: 26px; } /* How-to-apply steps (Careers) — the same instructions the role modal gives, surfaced on the page so speculative applicants can find them too. */ .apply-steps { margin-top: 40px; background: var(--sec-chip); border: 1px solid var(--sec-border); border-radius: 18px; padding: clamp(24px, 3vw, 38px); } .apply-steps h3 { font-weight: 800; font-size: clamp(20px, 2.2vw, 26px); color: var(--sec-head); } .apply-list { list-style: none; margin: 22px 0 26px; padding: 0; display: grid; gap: 18px; } .apply-list li { display: flex; align-items: flex-start; gap: 16px; } .as-n { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--brand-ink-navy); color: var(--brand-blue-light); display: flex; align-items: center; justify-content: center; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 14px; } .apply-list strong { display: block; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 16px; color: var(--sec-head); } .apply-list p { margin-top: 5px; font-size: 14.5px; line-height: 1.6; color: var(--sec-muted); } .apply-list a { color: var(--brand-blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } [data-secbg="navy"] .apply-list a, [data-secbg="deep"] .apply-list a { color: var(--brand-blue-light); } /* Contact page — details, form, map */ .det-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; } .det-card { background: var(--sec-card); border: 1px solid var(--sec-border); border-radius: 18px; padding: clamp(26px, 3vw, 38px); transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease; } .det-card:hover { transform: translateY(-5px); box-shadow: 0 28px 54px -24px rgba(11, 30, 58, 0.3); } .det-ico { width: 48px; height: 48px; border-radius: 14px; background: var(--brand-ink-navy); color: var(--brand-blue-light); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; } .det-label { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sec-muted); } .det-value { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: clamp(18px, 1.8vw, 22px); color: var(--sec-head); margin-top: 8px; display: block; } a.det-value:hover { color: var(--brand-blue); } .det-note { font-size: 13.5px; color: var(--sec-muted); margin-top: 8px; } .ews-form { max-width: 680px; margin: 0 auto; } .ews-form .websly-form__field { margin-bottom: 20px; } .ews-form label { display: block; font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 14px; color: var(--sec-head); margin-bottom: 8px; } .ews-form input, .ews-form textarea { width: 100%; background: #FFFFFF; border: 1px solid #C7D2DE; border-radius: 10px; padding: 14px 16px; font-family: inherit; font-size: 15px; color: #1B2430; transition: border-color 0.25s ease, box-shadow 0.25s ease; } .ews-form input:focus, .ews-form textarea:focus { outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 4px rgba(28, 127, 196, 0.14); } .ews-form textarea { min-height: 150px; resize: vertical; } .ews-form .websly-form__notice { border-radius: 10px; padding: 12px 16px; margin-bottom: 18px; font-size: 14px; } .ews-form .websly-form__notice--error { background: rgba(255, 80, 80, 0.08); border: 1px solid rgba(255, 80, 80, 0.3); color: #8C1414; } .ews-form .websly-form__notice--success { background: rgba(28, 127, 196, 0.08); border: 1px solid rgba(28, 127, 196, 0.3); color: var(--brand-deep-navy); } #map iframe { width: 100%; height: 420px; border: 0; border-radius: 18px; display: block; box-shadow: 0 30px 60px -28px rgba(11, 30, 58, 0.4); } /* ============================================================ Responsive collapses ============================================================ */ @media (max-width: 900px) { #services[data-services-layout="showcase"] .svc-grid { grid-template-columns: 1fr; grid-auto-rows: 300px; } #services[data-services-layout="showcase"] .svc-card--tall { grid-row: auto; } #services[data-services-layout="showcase"] .svc-card--wide { grid-column: auto; } #why[data-why-look="bento"] .why-grid { grid-template-columns: 1fr 1fr; } .diff-num { font-size: 120px; opacity: 0.7; } } @media (max-width: 640px) { .ews-hero { min-height: 86svh; } #why[data-why-look="bento"] .why-grid { grid-template-columns: 1fr; } #why[data-why-look="bento"] .why-cell--photo { grid-row: auto; min-height: 220px; } .hero-ctas .ews-btn { width: 100%; justify-content: center; } .cta-actions .ews-btn { width: 100%; justify-content: center; } .team-card--wide { display: block; } .team-card--wide .team-name { margin-top: 18px; } } /* ============================================================ Reduced motion — everything lands in its final state ============================================================ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } [data-rv] { opacity: 1; transform: none; transition: none; } .sl-in { transform: none; animation: none; } .hero-sub, .hero-ctas { opacity: 1; transform: none; animation: none; } .ews-kb image-slot { animation: none; } #marquee.in-view .mq-track { animation: none; } .ews-rotator > span { transition: none; } .hero-content, .ws-scrub-rise { animation: none; } .svc-card image-slot, .svc-card:hover image-slot { transition: none; transform: none; } .ews-btn, .why-cell, .team-card, .role-card, .det-card, .ind-chip { transition: none; } .ews-nav, .ews-navscrim, .ews-dropdown, .mb-bars i, .nav-chev { transition: none; } }