/* ============================================================ HEADSTART AU — GLOBAL STYLESHEET Managed via Slater TABLE OF CONTENTS ───────────────────────────────────────────────────────────── 1. Design Tokens 2. Osmo Fluid Scale (kept — still works for rem values) 3. Base & Resets 4. Typography Classes (now use px/vw clamp — no rem) 5. Button Components 6. Form Components 7. Webflow Components 7a. Sticky Features 7b. Shutter Scroll 7c. Navigation ============================================================ */ /* ============================================================ 1. DESIGN TOKENS ============================================================ */ :root { /* ---- Colors: Blue Scale --------------------------------- */ --color-blue-10: #CFDAE7; --color-blue-20: #AEC1D7; --color-blue-30: #86A1C3; --color-blue-40: #35639B; --color-blue-50: #0D4487; --color-blue-60: #0B3971; --color-blue-70: #092D5A; --color-blue-80: #072244; --color-blue-90: #04172D; --color-blue-mid: #2E537F; /* ---- Colors: Neutrals ----------------------------------- */ --color-white: #FFFFFF; --color-neutral-200: #F4F4F4; --color-neutral-450: #DADADA; --color-neutral-475: #B8B8B8; --color-neutral-900: #151313; --color-black: #000000; /* ---- Colors: Brand & Accent ----------------------------- */ --color-red-500: #F84131; --color-ndis-purple: #6A2875; --color-picton-blue: #4D9AE5; --color-sail: #A8D0F7; --color-input-bg: #E7ECF3; --color-section-tint: rgba(207, 218, 231, 0.5); /* ---- Colors: Semantic ----------------------------------- */ --color-text: #000000; --color-background: #FFFFFF; --color-border: #000000; /* ---- Colors: Overlays ----------------------------------- */ --overlay-hero: rgba(0, 0, 0, 0.4); --overlay-dark: rgba(0, 0, 0, 0.66); --overlay-subtle: rgba(0, 0, 0, 0.2); /* ---- Typography: Font Families -------------------------- */ --font-heading: "Satoshi Variable", sans-serif; --font-body: "Mukta", sans-serif; --font-display: "Unbounded", sans-serif; --font-form: "Haffer VF", sans-serif; /* ---- Typography: Font Sizes — FLUID CLAMP --------------- Formula: slope-intercept, range 375px → 1440px clamp(mobile-min, vw + offset, desktop-max) These are pure px/vw values — no rem, no Osmo dependency. They scale continuously from mobile to desktop. Apply via utility classes OR use the variable directly. Min (375px) → Max (1440px) ---------------------------------------------------------- */ --text-display: clamp(40px, 7.51vw + 11.83px, 120px); /* 40 → 120 */ --text-hero: clamp(36px, 6.01vw + 13.46px, 100px); /* 36 → 100 */ --text-h1: clamp(28px, 4.88vw + 9.69px, 80px); /* 28 → 80 */ --text-h2: clamp(24px, 3.00vw + 12.73px, 56px); /* 24 → 56 */ --text-h3: clamp(20px, 1.88vw + 12.96px, 40px); /* 20 → 40 */ --text-h4: clamp(18px, 1.69vw + 11.66px, 36px); /* 18 → 36 */ --text-h5: clamp(16px, 1.13vw + 11.77px, 28px); /* 16 → 28 */ --text-subtitle: clamp(15px, 0.47vw + 13.24px, 20px); /* 15 → 20 */ --text-quote: clamp(22px, 2.44vw + 12.85px, 48px); /* 22 → 48 */ --text-marquee: clamp(32px, 3.38vw + 19.32px, 68px); /* 32 → 68 */ --text-marquee-alt: clamp(28px, 3.38vw + 15.32px, 64px); /* 28 → 64 */ --text-body: clamp(14px, 0.19vw + 13.30px, 16px); /* 14 → 16 */ --text-body-lg: clamp(15px, 0.28vw + 13.94px, 18px); /* 15 → 18 */ --text-small: clamp(11px, 0.19vw + 10.30px, 13px); /* 11 → 13 */ /* ---- Typography: Font Weights --------------------------- */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-bold: 700; /* ---- Typography: Line Heights --------------------------- */ --leading-none: 1; --leading-tight: 1.1; --leading-snug: 1.2; --leading-normal: 1.3; --leading-relaxed: 1.4; --leading-loose: 1.45; /* ---- Typography: Letter Spacing (optical, stays in px) -- */ --tracking-display: -3.6px; --tracking-hero: -3px; --tracking-h1: -2.4px; --tracking-h2: -1.68px; --tracking-h3: -1.2px; --tracking-h4: -1.08px; --tracking-h5: -0.28px; --tracking-subtitle: -0.2px; --tracking-quote: -0.96px; --tracking-marquee: -2.04px; --tracking-marquee-alt: -1.92px; --tracking-label-caps: -0.16px; --tracking-body: 0px; --tracking-input: -0.36px; /* ---- Spacing: Layout ------------------------------------ */ --container-max: 1280px; --padding-global: 64px; --padding-section-md: 80px; --padding-section-lg: 128px; --padding-nav-x: 48px; --padding-nav-y: 32px; --padding-inner: 136px; /* ---- Spacing: Gap Scale --------------------------------- */ --gap-xs: 8px; --gap-sm: 16px; --gap-md: 24px; --gap-lg: 32px; --gap-xl: 48px; --gap-2xl: 64px; --gap-3xl: 72px; --gutter: 32px; /* ---- Border Radius -------------------------------------- */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 7px; --radius-card: 10px; --radius-button: 15px; --radius-image-lg: 16px; --radius-image-xl: 20px; --radius-pill: 100px; --radius-full: 999px; /* ---- Buttons: Asymmetric Radius ------------------------- */ --btn-primary-radius: 2px 15px 2px 15px; --btn-secondary-radius: 15px 2px 15px 2px; /* ---- Effects: Shadows ----------------------------------- */ --shadow-card: drop-shadow(0px -4px 10px rgba(0, 0, 0, 0.1)); /* ---- Effects: Blur -------------------------------------- */ --blur-subtle: blur(0.75px); --blur-medium: blur(7.45px); --blur-heavy: blur(16.9px); /* ---- Effects: Opacity ----------------------------------- */ --opacity-grid: 0.1; --opacity-inactive: 0.2; --opacity-muted: 0.5; --opacity-body-dark: 0.6; /* ---- Gradients ------------------------------------------ */ --gradient-image-overlay: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)); --gradient-horizontal-fade: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 28%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0.5) 68%, rgba(255, 255, 255, 0) 100%); /* ---- Animation (shared with Osmo nav) ------------------- */ --cubic-default: cubic-bezier(0.525, 0, 0, 1); --duration-fast: 0.2s; --duration-normal: 0.45s; --color-dark: #2b1d15; /* ---- Nav ------------------------------------------------ */ --nav-bg-height: calc(20em + (2em + 3em + 2.5em + 3em)); } /* ============================================================ 2. OSMO FLUID SCALE Kept for any element that uses plain rem values. The --text-* tokens above no longer use rem so they are independent of this system — but Osmo still benefits spacing values, em-based sizes, and third-party components. FIX: removed !important from --size-unit (invalid on vars). FIX: removed body { font-size } to prevent cascade conflict. ============================================================ */ :root { --size-unit: 16; --size-container-ideal: 1440; --size-container-min: 992px; --size-container-max: 1920px; --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max)); --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit))); } @media screen and (max-width: 991px) { :root { --size-container-ideal: 834; --size-container-min: 768px; --size-container-max: 991px; } } @media screen and (max-width: 767px) { :root { --size-container-ideal: 550; --size-container-min: 480px; --size-container-max: 767px; --nav-bg-height: 100dvh; } } @media screen and (max-width: 479px) { :root { --size-container-ideal: 390; --size-container-min: 320px; --size-container-max: 479px; } } html { font-size: var(--size-font); } /* ============================================================ 3. BASE & RESETS ============================================================ */ a { color: inherit; text-decoration: none; } a:focus-visible, button:focus-visible { outline: 1px solid var(--color-dark); } /* ============================================================ 4. TYPOGRAPHY CLASSES font-size uses var(--text-*) which are px/vw clamp values. They are completely independent of html font-size / Osmo. !important overrides Webflow's own element-level styles. HOW TO USE IN WEBFLOW: Add the class name to any element in the class field. Do NOT manually set font-size in Webflow's style panel for these elements — the class handles it. ============================================================ */ .text-display { font-family: var(--font-heading); font-weight: var(--weight-medium); font-size: var(--text-display) !important; line-height: var(--leading-none); letter-spacing: var(--tracking-display); } .text-hero { font-family: var(--font-heading); font-weight: var(--weight-medium); font-size: var(--text-hero) !important; line-height: var(--leading-snug); letter-spacing: var(--tracking-hero); } .text-h1 { font-family: var(--font-heading); font-weight: var(--weight-medium); font-size: var(--text-h1) !important; line-height: var(--leading-snug); letter-spacing: var(--tracking-h1); } .text-h2 { font-family: var(--font-heading); font-weight: var(--weight-medium); font-size: var(--text-h2) !important; line-height: var(--leading-none); letter-spacing: var(--tracking-h2); } .text-h3 { font-family: var(--font-heading); font-weight: var(--weight-medium); font-size: var(--text-h3) !important; line-height: var(--leading-normal); letter-spacing: var(--tracking-h3); } .text-h4 { font-family: var(--font-heading); font-weight: var(--weight-medium); font-size: var(--text-h4) !important; line-height: var(--leading-normal); letter-spacing: var(--tracking-h4); } .text-h5 { font-family: var(--font-heading); font-weight: var(--weight-medium); font-size: var(--text-h5) !important; line-height: var(--leading-relaxed); letter-spacing: var(--tracking-h5); } .text-subtitle { font-family: var(--font-heading); font-weight: var(--weight-medium); font-size: var(--text-subtitle) !important; line-height: var(--leading-loose); letter-spacing: var(--tracking-subtitle); } .text-quote { font-family: var(--font-body); font-weight: var(--weight-light); font-size: var(--text-quote) !important; line-height: var(--leading-tight); letter-spacing: var(--tracking-quote); } .text-marquee { font-family: var(--font-heading); font-weight: var(--weight-regular); font-size: var(--text-marquee) !important; line-height: var(--leading-none); letter-spacing: var(--tracking-marquee); } .text-marquee-alt { font-family: var(--font-display); font-weight: var(--weight-light); font-size: var(--text-marquee-alt) !important; line-height: var(--leading-none); letter-spacing: var(--tracking-marquee-alt); } .text-label-caps { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-body) !important; line-height: var(--leading-none); letter-spacing: var(--tracking-label-caps); text-transform: uppercase; } .text-body { font-family: var(--font-body); font-weight: var(--weight-regular); font-size: var(--text-body) !important; line-height: var(--leading-relaxed); letter-spacing: var(--tracking-body); } .text-body-lg { font-family: var(--font-body); font-weight: var(--weight-regular); font-size: var(--text-body-lg) !important; line-height: var(--leading-snug); letter-spacing: var(--tracking-input); } .text-small { font-family: var(--font-body); font-weight: var(--weight-regular); font-size: var(--text-small) !important; line-height: var(--leading-relaxed); letter-spacing: var(--tracking-body); } .container { max-width: var(--size-container); padding-right: 3rem; padding-left: 3rem; } @media(max-width: 1000px) { .container { max-width: var(--size-container); padding-right: 2rem; padding-left: 2rem; } } @media(max-width: 600px) { .container { max-width: var(--size-container); padding-right: 1.5rem; padding-left: 1.5rem; } } .container.medium { max-width: calc(var(--size-container) * 0.85); } .container.small { max-width: calc(var(--size-container) * 0.7); } /* ============================================================ 4. TYPOGRAPHY CLASSES font-size uses rem → scales automatically via Osmo. letter-spacing stays in px (optical value, not layout). ============================================================ */ .text-display { font-family: var(--font-heading); font-weight: var(--weight-medium); font-size: var(--text-display) !important; line-height: var(--leading-none); letter-spacing: var(--tracking-display); } .text-hero { font-family: var(--font-heading); font-weight: var(--weight-medium); font-size: var(--text-hero) !important; line-height: var(--leading-snug); letter-spacing: var(--tracking-hero); } .text-h1 { font-family: var(--font-heading); font-weight: var(--weight-medium); font-size: var(--text-h1) !important; line-height: var(--leading-snug); letter-spacing: var(--tracking-h1); } .text-h2 { font-family: var(--font-heading); font-weight: var(--weight-medium); font-size: var(--text-h2) !important; line-height: var(--leading-none); letter-spacing: var(--tracking-h2); } .text-h3 { font-family: var(--font-heading); font-weight: var(--weight-medium); font-size: var(--text-h3) !important; line-height: var(--leading-normal); letter-spacing: var(--tracking-h3); } .text-h4 { font-family: var(--font-heading); font-weight: var(--weight-medium); font-size: var(--text-h4) !important; line-height: var(--leading-normal); letter-spacing: var(--tracking-h4); } .text-h5 { font-family: var(--font-heading); font-weight: var(--weight-medium); font-size: var(--text-h5) !important; line-height: var(--leading-relaxed); letter-spacing: var(--tracking-h5); } .text-subtitle { font-family: var(--font-heading); font-weight: var(--weight-medium); font-size: var(--text-subtitle); line-height: var(--leading-loose); letter-spacing: var(--tracking-subtitle); } .text-quote { font-family: var(--font-body); font-weight: var(--weight-light); font-size: var(--text-quote); line-height: var(--leading-tight); letter-spacing: var(--tracking-quote); } .text-marquee { font-family: var(--font-heading); font-weight: var(--weight-regular); font-size: var(--text-marquee); line-height: var(--leading-none); letter-spacing: var(--tracking-marquee); } .text-marquee-alt { font-family: var(--font-display); font-weight: var(--weight-light); font-size: var(--text-marquee-alt); line-height: var(--leading-none); letter-spacing: var(--tracking-marquee-alt); } .text-label-caps { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-body); line-height: var(--leading-none); letter-spacing: var(--tracking-label-caps); } .text-body { font-family: var(--font-body); font-weight: var(--weight-regular); font-size: var(--text-body); line-height: var(--leading-relaxed); letter-spacing: var(--tracking-body); } .text-body-lg { font-family: var(--font-body); font-weight: var(--weight-regular); font-size: var(--text-body-lg); line-height: var(--leading-snug); letter-spacing: var(--tracking-input); } .text-small { font-family: var(--font-body); font-weight: var(--weight-regular); font-size: var(--text-small); line-height: var(--leading-relaxed); letter-spacing: var(--tracking-body); } /* ============================================================ 5. BUTTON COMPONENTS ============================================================ */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; height: 45px; padding: 0 16px; background-color: var(--color-neutral-200); color: var(--color-blue-mid); font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: var(--text-body); line-height: var(--leading-relaxed); border-radius: var(--btn-primary-radius); border: none; cursor: pointer; white-space: nowrap; } .btn-secondary { display: inline-flex; align-items: center; justify-content: center; height: 45px; padding: 0 16px; background-color: transparent; color: var(--color-white); font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: var(--text-body); line-height: var(--leading-relaxed); border-radius: var(--btn-secondary-radius); border: 1px solid var(--color-white); cursor: pointer; white-space: nowrap; } .btn-bubble { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; background-color: var(--color-blue-mid); border-radius: var(--radius-full); overflow: hidden; flex-shrink: 0; } /* ============================================================ 6. FORM COMPONENTS ============================================================ */ .input-field { width: 100%; height: 56px; padding: 16px 18px; background-color: var(--color-input-bg); border: 1px solid var(--color-neutral-475); border-radius: var(--radius-card); font-family: var(--font-body); font-weight: var(--weight-regular); font-size: var(--text-body-lg); line-height: var(--leading-snug); letter-spacing: var(--tracking-input); color: var(--color-neutral-900); } .input-field::placeholder { color: var(--color-blue-30); } .input-textarea { width: 100%; height: 128px; padding: 16px 18px; background-color: var(--color-input-bg); border: none; border-radius: var(--radius-card); font-family: var(--font-body); font-weight: var(--weight-regular); font-size: var(--text-body-lg); line-height: var(--leading-snug); letter-spacing: var(--tracking-input); color: var(--color-neutral-900); resize: vertical; } .input-textarea::placeholder { color: var(--color-blue-30); } .input-label { font-family: var(--font-body); font-weight: var(--weight-regular); font-size: var(--text-body); line-height: var(--leading-relaxed); color: var(--color-white); } .input-required { font-family: var(--font-form); font-weight: var(--weight-regular); font-size: 0.875rem; /* 14px — not in type scale, kept in rem */ line-height: 1; color: var(--color-red-500); } /* ============================================================ 7a. WEBFLOW COMPONENT — Sticky Features ============================================================ */ /* Reveal hidden overflow in Designer for easier editing */ .wf-design-mode .sticky-features__text-list { overflow: auto; max-height: 45em; gap: 2em; justify-content: flex-start; } .wf-design-mode .sticky-features__text-item { position: relative; } .wf-design-mode [data-sticky-feature-item] { visibility: visible; } /* Live: show only the first visual panel by default */ [data-sticky-feature-visual-wrap]:first-of-type { clip-path: inset(0% round 0.75em); } [data-sticky-feature-item]:first-of-type { visibility: visible; } /* ============================================================ 7b. WEBFLOW COMPONENT — Shutter Scroll ============================================================ */ [data-shutter-scroll-panel] { display: flex; flex-direction: column; width: 100%; } [data-shutter-scroll-row] { height: 3em; width: 100%; background-color: currentColor; backface-visibility: hidden; will-change: opacity; } [data-shutter-scroll-transition][data-shutter-height="1.5em"] [data-shutter-scroll-row] { height: 1.5em; } /* ============================================================ 7c. WEBFLOW COMPONENT — Navigation ============================================================ */ /* --- Transitions ------------------------------------------ */ .nav-bg { transition: height var(--duration-normal) var(--cubic-default); } .page-bg { transition: opacity var(--duration-fast) var(--cubic-default); } .nav { transition: color var(--duration-fast) var(--cubic-default); } .nav-button { transition: all var(--duration-fast) var(--cubic-default); } .nav-dropdown { transition: all var(--duration-fast) ease, transform var(--duration-normal) var(--cubic-default); } /* --- Show dropdown on hover / focus ----------------------- */ [data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):hover+.nav-dropdown, [data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):focus-visible+.nav-dropdown, [data-dropdown-toggle]:not([data-dropdown-toggle="closed"])+.nav-dropdown:hover, [data-dropdown-toggle]:not([data-dropdown-toggle="closed"])+.nav-dropdown:focus-within, .wf-design-mode [data-dropdown-toggle="open"]+.nav-dropdown { opacity: 1; visibility: visible; pointer-events: auto; } /* --- Global styles when a dropdown is active -------------- */ :is(body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):hover), body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):focus-visible), body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):focus-within), body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"]) + .nav-dropdown:hover), body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"]) + .nav-dropdown:focus-within)), .wf-design-mode body:has([data-dropdown-toggle="open"]) { .nav-bg { height: var(--nav-bg-height); } .page-bg { opacity: 1; } .nav { color: var(--color-dark); } .nav-button { border-color: var(--color-dark); color: var(--color-dark); } .nav-button.is--primary { background-color: var(--color-dark); border-color: var(--color-dark); color: #FFF; } } /* --- Dropdown icon ---------------------------------------- */ .nav-link__dropdown-icon { transition: transform var(--duration-normal) var(--cubic-default); } [data-dropdown-toggle] { transition: background-color var(--duration-fast) var(--cubic-default); } /* --- Desktop hover / focus states ------------------------- */ @media screen and (min-width: 768px) { [data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):hover .nav-link__dropdown-icon, [data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):focus .nav-link__dropdown-icon, [data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):focus-within .nav-link__dropdown-icon, [data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):has(+ .nav-dropdown:hover) .nav-link__dropdown-icon, [data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):has(+ .nav-dropdown:focus-within) .nav-link__dropdown-icon { transform: rotate(180deg); } [data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):hover, [data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):focus, [data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):focus-within, [data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):has(+ .nav-dropdown:hover), [data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):has(+ .nav-dropdown:focus-within), .wf-design-mode body:has([data-dropdown-toggle="open"])+.nav-dropdown { background-color: #EBE7E4; } } /* --- Dropdown list items: staggered entrance animation ---- */ .nav-dropdown__content-li { transition: all var(--duration-normal) var(--cubic-default); transition-delay: 0.18s; opacity: 0; transform: translate(4em, 0); } .nav-dropdown__content-li:nth-child(2) { transition-delay: 0.24s; } .nav-dropdown__content-li:nth-child(3) { transition-delay: 0.30s; } .nav-dropdown__content-li:nth-child(4) { transition-delay: 0.36s; } .nav-dropdown__content-li:nth-child(5) { transition-delay: 0.44s; } body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):hover) [data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):hover+.nav-dropdown .nav-dropdown__content-li, body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):focus-visible) .nav-dropdown__content-li, body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):focus-within) .nav-dropdown__content-li, body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"]) + .nav-dropdown:hover) .nav-dropdown__content-li, body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"]) + .nav-dropdown:focus-within) .nav-dropdown__content-li, .wf-design-mode [data-dropdown-toggle="open"]+.nav-dropdown .nav-dropdown__content-li { opacity: 1; transform: translate(0, 0); } /* --- Dropdown link image hover ---------------------------- */ .nav-dropdown__link:hover .nav-dropdown__img-overlay, .nav-dropdown__link:focus-visible .nav-dropdown__img-overlay { opacity: 0; } .nav-dropdown__link:hover .nav-dropdown__img, .nav-dropdown__link:focus-visible .nav-dropdown__img { transform: scale(1.1); } /* --- Static dropdown item hover --------------------------- */ .nav-dropdown__link.is--static:hover, .nav-dropdown__link.is--static:focus-visible { background: #D7D1CD; } /* --- Nav link underline animation ------------------------- */ a.nav-link .nav-link__label::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background: currentColor; transition: transform var(--duration-normal) var(--cubic-default); transform: scale(0, 1); transform-origin: right center; } a.nav-link:hover .nav-link__label::after, a.nav-link:focus-visible .nav-link__label::after { transform: scale(1, 1); transform-origin: left center; } /* --- Nav theme variants ----------------------------------- */ [data-theme-nav="light"] .nav__inner { color: #131313; } [data-theme-nav="dark"] .nav__inner { color: #EFEEEC; } [data-theme-nav="difference"] .nav__inner { color: #EFEEEC; /*color: #fff;*/ /*mix-blend-mode: difference;*/ } /* --- Mobile: burger menu ---------------------------------- */ @media screen and (max-width: 767px) { .nav-dropdown__overflow { transition: grid-template-rows var(--duration-normal) var(--cubic-default); } /* BUG FIX: .nav-center must have a default hidden state on mobile. Without this, the open/closed transition has no visible effect — the nav content is always visible and the button appears broken. If Webflow's own classes already handle this, remove these lines. */ .nav-center { opacity: 0; visibility: hidden; transform: translate(0, -1em); transition: all var(--duration-normal) var(--cubic-default), opacity var(--duration-fast) var(--cubic-default); } .menu-button__line { transition: all var(--duration-normal) var(--cubic-default); } /* Styles when burger menu is open */ [data-menu-status="open"] { color: var(--color-blue-60) !important; } [data-menu-status="open"] .menu-button__line:nth-of-type(1) { transform: translate(0, 0.125em) rotate(135deg); background-color: #FFF; } [data-menu-status="open"] .menu-button__line:nth-of-type(2) { transform: translate(0, -0.175em) rotate(-135deg); background-color: #FFF; } [data-menu-status="open"] .nav-bg { height: var(--nav-bg-height); } [data-menu-status="open"] .page-bg { opacity: 1; } [data-menu-status="open"] .nav-button.is--primary { background-color: var(--color-blue-10); border-color: var(--color-dark); color: var(--color-blue-70); border: 1px solid transparent; } [data-menu-status="open"] .nav-center { opacity: 1; visibility: visible; transform: translate(0, 0); transition-delay: 0.1s; } [data-dropdown-toggle="open"]+.nav-dropdown .nav-dropdown__overflow { grid-template-rows: 1fr; } [data-dropdown-toggle="open"]+.nav-dropdown .nav-dropdown__content-li { opacity: 1; transform: translate(0, 0); } [data-dropdown-toggle="open"] .nav-link__dropdown-icon { transform: rotate(180deg); } } /*Custom Bubble Button*/ .btn-bubble-arrow__content { transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1); transform: translateX(-3rem) rotate(0.001deg); } .btn-bubble-arrow__arrow { transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1); transform: scale(0) rotate(0.001deg); transform-origin: left; } .btn-bubble-arrow__arrow-svg { transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1); transform: rotate(0.001deg); } .btn-bubble-arrow__arrow.is--duplicate { position: absolute; z-index: 2; right: 0; transform: scale(1) rotate(0.001deg); transform-origin: right; } /* Hover */ .btn-bubble-arrow:hover .btn-bubble-arrow__content { transform: translateX(0em) rotate(0.001deg); } .btn-bubble-arrow:hover .btn-bubble-arrow__arrow-svg { transform: rotate(-45deg); } .btn-bubble-arrow:hover .btn-bubble-arrow__arrow { transform: scale(1) rotate(0.001deg); } .btn-bubble-arrow:hover .btn-bubble-arrow__arrow.is--duplicate { transform: scale(0) rotate(0.001deg); } /*Text Clip Testimonial*/ .text-line-mask { padding-bottom: 0.2em; margin-bottom: -0.2em; } /*Overlapping Slider */ .wf-design-mode [data-overlap-slider-collection] { overflow: auto; } [data-overlap-slider-init] { position: relative; z-index: 30; } .testimonial-image-stack { position: relative; overflow: hidden; } [data-testimonial-img] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /*Marquee Arrow rotate*/ /* Optional: Rotating arrow left/right based on Scroll Direction */ .marquee__advanced__arrow-svg, [data-marquee-direction="right"][data-marquee-status="inverted"] .marquee__advanced__arrow-svg { transition: 0.5s cubic-bezier(0.625, 0.05, 0, 1); transform: rotate(-359.999deg); } [data-marquee-status="inverted"] .marquee__advanced__arrow-svg, [data-marquee-direction="right"][data-marquee-status="normal"] .marquee__advanced__arrow-svg { transform: rotate(-180deg); } /*Data Odometer Number */ [data-odometer-element] { display: inline-flex; align-items: center; font-variant-numeric: tabular-nums; } [data-odometer-part="mask"], [data-odometer-part="static"] { display: inline-block; overflow: clip; padding: 0.05em; margin: -0.05em; } [data-odometer-part="roller"] { display: block; white-space: pre; text-align: center; will-change: transform; } [data-odometer-part="static"] { display: inline-block; } /*Highlight Text Reveal*/ [data-highlight-marker-reveal] { visibility: hidden; } .wf-design-mode [data-highlight-marker-reveal] { visibility: visible; } [data-highlight-marker-reveal] .highlight-marker-line { width: auto; display: inline-block !important; margin: -0.055em 0px; } .highlight-marker-bar { position: absolute; inset: -0.055em 0px; z-index: 1; pointer-events: none; } /*Reveal Masked Text*/ [data-reveal="text"], [data-reveal="blur"] { visibility: hidden; } .wf-design-mode [data-reveal="text"], .w-editor [data-reveal="text"], .wf-design-mode [data-reveal="blur"], .w-editor [data-reveal="blur"] { visibility: visible !important; } /* Mask wrapper must be block so it doesn't collapse */ .reveal-line-mask { display: block; overflow: hidden; } /* Words and chars stay inline so text reflows naturally */ .reveal-word, .reveal-char { display: inline-block; } /* ============================================================ VIDEO PREVIEW + LIGHTBOX — fixed cursor CSS ============================================================ */ /* ── Preview wrapper ─────────────────────────────────────── */ [data-video-preview] { cursor: none; position: relative; } /* Hide Webflow's native play button */ [data-video-preview] [data-w-bg-video-control] { display: none !important; } /* ── Floating Cursor ─────────────────────────────────────── */ /* KEY CHANGES vs original: - Removed width/height animation (was causing stuck/jank) - Cursor is always full pill size (148 × 48); GSAP animates scale 0→1 for show/hide — GPU composited, no layout work - Removed overflow: hidden so elastic scale bounce is clean - xPercent/yPercent -50 (set via GSAP) centres the pill on the raw clientX/Y — no manual offset math needed - transform-origin: center ensures scale origin is correct */ .vp-cursor { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; display: flex; align-items: center; justify-content: center; gap: 8px; /* Fixed size — never changes, scale does the work */ width: 148px; height: 48px; border-radius: 999px; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px) saturate(1.8); -webkit-backdrop-filter: blur(12px) saturate(1.8); border: 1px solid rgba(255, 255, 255, 0.3); will-change: transform, opacity; transform-origin: center center; /* Initial state hidden — GSAP owns scale + opacity */ } /* Icon */ .vp-cursor__icon { width: 16px; height: 16px; flex-shrink: 0; opacity: 0; transform: scale(0.5); transition: opacity 0.2s ease, transform 0.25s ease; } /* Label */ .vp-cursor__label { font-family: var(--font-heading, sans-serif); font-weight: 600; font-size: 13px; color: #fff; white-space: nowrap; opacity: 0; transform: translateX(-6px); transition: opacity 0.2s ease 0.05s, transform 0.25s ease 0.05s; } /* Reveal inner content once pill is fully open */ .vp-cursor.is-active .vp-cursor__icon { opacity: 1; transform: scale(1); } .vp-cursor.is-active .vp-cursor__label { opacity: 1; transform: translateX(0); } .vp-cursor__label { position: relative; /* anchor for the absolute drag label */ overflow: clip; /* mask exiting/entering chars */ display: inline-flex; align-items: center; } .vp-cursor__label-play, .vp-cursor__label-drag { white-space: nowrap; display: block; } /* Drag label sits on top of play label — GSAP controls opacity/transform */ .vp-cursor__label-drag { position: absolute; left: 0; top: 0; pointer-events: none; } /* Each char needs overflow clip to mask the yPercent slide */ .vp-char { display: inline-block; overflow: clip; /* clip individual char travel */ } /* Touch devices — hide custom cursor entirely */ @media (hover: none) { .vp-cursor { display: none; } [data-video-preview] { cursor: pointer; } } /* ── Lightbox base — always present ─────────────────────── */ .vp-lightbox { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; } .vp-lightbox.is-open { opacity: 1; pointer-events: all; } .vp-lightbox__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.88); cursor: pointer; } /* ── Inner wrapper ───────────────────────────────────────── */ .vp-lightbox__inner { position: relative; z-index: 1; width: 90vw; max-width: 1200px; margin: auto; } /* ── Ratio box: landscape default (16:9) ─────────────────── */ .vp-lightbox__ratio { position: relative; width: 100%; padding-top: 56.25%; background: #000; border-radius: 12px; overflow: hidden; } /* ── Vertical override (9:16) ────────────────────────────── */ /* 85vh tall → width = 85vh × (9/16) = 47.8125vh Use a CSS custom property so the math is readable. */ .vp-lightbox.is-vertical .vp-lightbox__inner { /* 9:16 ratio means width = height × 0.5625 */ /* We want height = 85vh, so width = 85vh × 0.5625 = 47.8125vh */ width: 47.8125vh; max-width: 90vw; /* never overflow on very short/wide viewports */ } .vp-lightbox.is-vertical .vp-lightbox__ratio { padding-top: 177.78%; /* 16/9 × 100 = 9:16 aspect ratio */ /* Clamp total height to 85vh — padding-top drives height here */ max-height: 85vh; /* When max-height kicks in, the box shrinks — video fills via object-fit */ } /* ── Video fills the ratio box ───────────────────────────── */ .vp-lightbox__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; } /* ── Poster image ────────────────────────────────────────── */ .vp-lightbox__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: opacity 0.3s ease; } .vp-lightbox.is-playing .vp-lightbox__poster { opacity: 0 !important; pointer-events: none; } /* ── Close button ────────────────────────────────────────── */ .vp-lightbox__close { position: absolute; top: -2.5rem; right: 0; background: none; border: none; cursor: pointer; padding: 0.25rem; z-index: 2; color: white; opacity: 0.8; transition: opacity 0.2s; } .vp-lightbox__close:hover { opacity: 1; } .vp-lightbox__close svg { width: 24px; height: 24px; stroke: currentColor; display: block; } /* ── Controls ────────────────────────────────────────────── */ .vp-controls { position: absolute; bottom: 0; left: 0; right: 0; padding: 2rem 1rem 0.75rem; background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, transparent 100%); border-radius: 0 0 12px 12px; z-index: 3; } .vp-controls__row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; } .vp-spacer { flex: 1; } .vp-btn { background: none; border: none; cursor: pointer; padding: 0.25rem; color: white; opacity: 0.85; transition: opacity 0.2s; display: flex; align-items: center; justify-content: center; } .vp-btn:hover { opacity: 1; } .vp-btn svg { width: 20px; height: 20px; fill: currentColor; display: block; } .vp-time { color: rgba(255, 255, 255, 0.85); font-size: 0.75rem; font-variant-numeric: tabular-nums; white-space: nowrap; } /* ── Timeline ────────────────────────────────────────────── */ .vp-timeline { position: relative; height: 3px; background: rgba(255, 255, 255, 0.25); border-radius: 2px; cursor: pointer; transition: height 0.15s ease; } .vp-timeline:hover { height: 5px; } .vp-timeline__buffered, .vp-timeline__progress { position: absolute; left: 0; top: 0; height: 100%; border-radius: 2px; pointer-events: none; } .vp-timeline__buffered { background: rgba(255, 255, 255, 0.3); } .vp-timeline__progress { background: white; } .vp-timeline__handle { position: absolute; top: 50%; width: 12px; height: 12px; background: white; border-radius: 50%; transform: translate(-50%, -50%) scale(0); transition: transform 0.15s ease; pointer-events: none; } .vp-timeline:hover .vp-timeline__handle, .vp-lightbox.is-scrubbing .vp-timeline__handle { transform: translate(-50%, -50%) scale(1); } /* ── Loading spinner ─────────────────────────────────────── */ .vp-lightbox__loading { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; z-index: 2; } .vp-lightbox.is-loading .vp-lightbox__loading { display: flex; } .vp-spinner { width: 36px; height: 36px; border: 3px solid rgba(255, 255, 255, 0.2); border-top-color: white; border-radius: 50%; animation: vp-spin 0.7s linear infinite; } @keyframes vp-spin { to { transform: rotate(360deg); } } .vp-unmute-nudge { position: absolute; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; align-items: center; gap: 0.4rem; background: rgba(0, 0, 0, 0.65); color: white; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px; padding: 0.4rem 0.9rem; font-size: 0.8rem; cursor: pointer; backdrop-filter: blur(6px); white-space: nowrap; } .vp-unmute-nudge:hover { background: rgba(0, 0, 0, 0.85); } /* ============================================================ MOBILE PLAY BADGE White play icon on a low-opacity, blurred circle. Hidden on hover/desktop devices; fades in on scroll-into-view. ============================================================ */ .vp-play-badge { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.85); width: 64px; height: 64px; display: none; /* enabled on touch devices only (below) */ align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; cursor: pointer; z-index: 3; opacity: 0; /* hidden until scrolled into view */ pointer-events: none; /* re-enabled with .is-visible */ transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); -webkit-tap-highlight-color: transparent; } /* The blurred, low-opacity circle — this is the "depth" layer */ .vp-play-badge__bg { position: absolute; inset: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.85); /*-webkit-backdrop-filter: blur(10px);*/ /*backdrop-filter: blur(10px);*/ /* soft edge so it reads as depth, not a hard button */ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18); } .vp-play-badge__icon { position: relative; width: 2rem; height: 2rem; margin-left: 2px; /* optical centering of the triangle */ /*fill: #fff;*/ fill: #0b3971; z-index: 1; border-radius: 5px; overflow: hidden; } /* Scrolled into view → fade + settle in */ .vp-play-badge.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; } /* Press feedback — dips while a finger is down, springs back on release. Higher specificity (.is-visible.is-pressed) so it wins over .is-visible; the fast transition applies only to the press-down, release settles on the base 0.55s ease. */ .vp-play-badge.is-visible.is-pressed { transform: translate(-50%, -50%) scale(0.9); transition: transform 0.14s cubic-bezier(0.22, 1, 0.36, 1); } /* Only show on touch / no-hover devices */ @media (hover: hover) and (pointer: fine) { .vp-play-badge { display: none !important; } } @media (hover: none) { .vp-play-badge { display: flex; } } /* Respect reduced-motion */ @media (prefers-reduced-motion: reduce) { .vp-play-badge { transition: opacity 0.3s ease; transform: translate(-50%, -50%); } .vp-play-badge.is-visible { transform: translate(-50%, -50%); } .vp-play-badge.is-visible.is-pressed { transform: translate(-50%, -50%) scale(0.94); } } /*Lines Testimonial News*/ [data-testimonial-list] { position: relative; } [data-testimonial-item] { display: grid; grid-template-columns: 1fr 1fr; /* left: image | right: text */ gap: 48px; align-items: center; } /* ============================================================ TESTIMONIAL LINES — REDESIGNED Class names match the structure guide exactly. Add to your Slater global CSS file. ============================================================ */ /* ── List: stacks all items on top of each other ─────────── */ [data-testimonial-list] { position: relative; display: grid; width: 100%; } /* ── Webflow Designer fix — Testimonial slider ─────────────── Only fires inside the Designer (wf-design-mode on <html>). Zero effect on published site. ──────────────────────────────────────────────────────────── */ /* ── Unstack all testimonial items ──────────────────────── */ .wf-design-mode [data-testimonial-list] { display: flex !important; flex-direction: column !important; gap: 3rem !important; position: relative !important; } .wf-design-mode [data-testimonial-item] { position: relative !important; display: flex !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; z-index: auto !important; } /* Divider between cards so they're clearly separate */ .wf-design-mode [data-testimonial-item]+[data-testimonial-item] { padding-top: 3rem; border-top: 1px solid rgba(128, 128, 128, 0.2); } /* ── Image: remove clip-path wipe + parallax scale ──────── */ .wf-design-mode [data-testimonial-img] { clip-path: none !important; transform: none !important; scale: none !important; will-change: auto !important; object-fit: cover !important; width: 100% !important; height: 100% !important; display: block !important; } .wf-design-mode .testimonial-image-stack { overflow: hidden !important; } /* ── SplitText: un-mask all lines ───────────────────────── */ .wf-design-mode .text-line-mask { overflow: visible !important; height: auto !important; } .wf-design-mode .text-line { position: relative !important; transform: none !important; display: block !important; opacity: 1 !important; visibility: visible !important; } /* Counter numbers flow inline naturally */ .wf-design-mode .testimonial-counter [data-testimonial-split] .text-line { display: inline !important; } /* ── Logos — remove scale(0) hide ───────────────────────── */ .wf-design-mode [data-testimonial-logo] { transform: none !important; opacity: 1 !important; visibility: visible !important; } /* ── Badges — same ──────────────────────────────────────── */ .wf-design-mode [data-testimonial-badge] { transform: none !important; opacity: 1 !important; visibility: visible !important; } /* ── Label inactive cards clearly in the Designer ───────── */ .wf-design-mode [data-testimonial-item]:not(.is--active) { outline: 2px dashed rgba(128, 128, 128, 0.35); outline-offset: 12px; border-radius: 4px; } /* Small "inactive" badge on non-active slides */ .wf-design-mode [data-testimonial-item]:not(.is--active)::before { content: 'Slide ' attr(aria-label) ' — inactive'; display: block; position: absolute; top: -1.6rem; left: 0; font-size: 10px; font-family: monospace; color: rgba(128, 128, 128, 0.6); letter-spacing: 0.05em; text-transform: uppercase; pointer-events: none; } /* ── Item: two-column grid layout ─────────────────────────── grid-area: 1/1 stacks every item in the same cell so the wipe animation reveals the incoming over the outgoing */ [data-testimonial-item] { display: grid; grid-template-columns: 1fr 1fr; grid-area: 1/1; align-items: center; gap: 4em; width: 100%; opacity: 0; visibility: hidden; } [data-testimonial-item].is--active { opacity: 1; visibility: visible; } @media (max-width: 767px) { [data-testimonial-item] { grid-template-columns: 1fr; gap: 2em; } } /* ── Left column ─────────────────────────────────────────── */ .testimonial-image-col { display: flex; flex-direction: column; } /* ── Image stack — clips the wipe animation ───────────────── REQUIRED: position:relative + overflow:hidden */ .testimonial-image-stack { position: relative; overflow: hidden; width: 100%; aspect-ratio: 4/5; } @media (max-width: 767px) { .testimonial-image-stack { aspect-ratio: 1/1; } } /* ── Photo inside the stack — receives clip-path from GSAP ── REQUIRED: position:absolute + inset:0 so images stack */ [data-testimonial-img] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* ── Badge base — both badges sit inside the stack ────────── GSAP sets scale:0 / autoAlpha:0 on these initially */ [data-testimonial-badge] { position: absolute; z-index: 2; display: flex; flex-direction: row; align-items: center; } /* Top badge: "As seen on [Station]" pill */ .testimonial-badge-top { top: 16px; left: 16px; padding: 6px 14px; } /* Bottom badge: station logo */ .testimonial-badge-bottom { bottom: 16px; left: 16px; padding: 8px 12px; border-radius: 12px; background-color: #ffffff; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); } .testimonial-badge-bottom img { display: block; height: 28px; width: auto; object-fit: contain; } /* Badge text */ .badge-label { font-size: 12px; font-weight: 400; opacity: 0.6; white-space: nowrap; } .badge-chip { font-size: 13px; font-weight: 700; white-space: nowrap; } /* ── Right column ────────────────────────────────────────── */ .testimonial-content-col { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5em; } /* ── Counter row ─────────────────────────────────────────── */ .testimonial-counter { display: flex; align-items: center; gap: 0.5em; opacity: 0.5; font-size: 0.9em; } .testimonial-category { margin-left: 0.75em; opacity: 1; } /* ── Quote ───────────────────────────────────────────────── */ .testimonial-quote { margin: 0; padding: 0; border: none; font-size: clamp(1.25rem, 2.5vw, 2rem); line-height: 1.2; font-style: normal; } /* ── Attribution ─────────────────────────────────────────── */ .testimonial-attribution { margin: 0; opacity: 0.6; font-size: 1em; } /* ── Channel / media logo below quote ────────────────────── */ /* GSAP sets scale:0 / autoAlpha:0 on this initially */ [data-testimonial-logo] { display: flex; align-items: center; } [data-testimonial-logo] img { display: block; height: 36px; width: auto; object-fit: contain; } /*Button Hover Mask Text*/ :root { --button-038-color: #131313; --button-038-color-background: #fff; --button-038-color-focus: #000; --button-038-padding: 0.75em 1em; --button-038-border-radius: 2.5em; --button-038-focus-inset: -0.125em; --button-038-stagger: 0.015s; --button-038-ease-hover: cubic-bezier(0.625, 0.05, 0, 1); --button-038-ease-focus: cubic-bezier(0.32, 0.72, 0, 1); } .button-038, [data-button-split-text] { -webkit-tap-highlight-color: transparent; } @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .button-038:is(:hover, :focus-visible) .button-038__bg, [data-hover]:is(:hover, :focus-visible) .button-038 .button-038__bg { scale: var(--button-038-scale-x) var(--button-038-scale-y); transition: scale 0.55s 0.05s var(--button-038-ease-hover); } .button-038:is(:hover, :focus-visible) .button-038__text span, [data-hover]:is(:hover, :focus-visible) .button-038 .button-038__text span, [data-button-split-text]:is(:hover, :focus-visible) span span { translate: 0 -1.3em 0; transition: translate 0.6s calc(var(--index) * var(--button-038-stagger) + 0.05s) var(--button-038-ease-hover); } } .button-038:is(:focus-visible)::after, [data-button-split-text]:is(:focus-visible)::after { box-shadow: 0 0 0 0.125em var(--button-038-color-focus); scale: var(--button-038-scale-x) var(--button-038-scale-y); transition: box-shadow 0.3s var(--button-038-ease-focus), scale 0.55s 0.05s var(--button-038-ease-hover); } /* 038 keeps its own border radius on the focus ring */ .button-038::after { content: ''; display: block; position: absolute; inset: var(--button-038-focus-inset); border-radius: var(--button-038-border-radius); transition: box-shadow 0.3s var(--button-038-ease-focus), scale 0.45s var(--button-038-ease-hover); pointer-events: none; z-index: 1; } /* Split text gets its own after — no border-radius, or inherit from the element */ /* Remove ::after from split-text entirely — it was only needed for .button-038 focus rings */ [data-button-split-text]::after { display: none; } /* Only restore it if the element also has .button-038 class */ .button-038[data-button-split-text]::after { display: block; content: ''; position: absolute; inset: var(--button-038-focus-inset); border-radius: var(--button-038-border-radius); transition: box-shadow 0.3s var(--button-038-ease-focus), scale 0.45s var(--button-038-ease-hover); pointer-events: none; z-index: 1; } .button-038__bg { transition: scale 0.45s var(--button-038-ease-hover); } .button-038__text span, [data-button-split-text] span span { will-change: transform; display: inline-block; white-space: nowrap; translate: 0 0 0; text-shadow: 0px 1.3em currentColor; transition: translate 0.6s calc(var(--index) * var(--button-038-stagger)) var(--button-038-ease-hover); } /* ── ROW: visible window ── */ /*.home-hero__marquee-row {*/ /* position: relative;*/ /* height: 50vh;*/ /*}*/ /* ── CONTAINER ── */ .home-hero__marquee-row { position: relative !important; display: block !important; width: 100% !important; height: 530px !important; /* taller to fit 3:2 cards */ min-height: unset !important; aspect-ratio: unset !important; /*overflow: hidden !important;*/ pointer-events: none; } .home-hero__marquee-row::after { content: ""; display: block; min-width: 100vw; min-height: 100vh; background: linear-gradient(270deg, #E7ECF3 0%, rgba(231, 236, 243, 0.00) 19.71%, rgba(231, 236, 243, 0.00) 83.17%, #E7ECF3 100%); position: absolute; left: 50%; transform: translateX(-50%); top: 0; bottom: 0; pointer-events: none; } .home-hero__marquee-row::before { content: ""; display: block; min-width: 100vw; min-height: 150vh; background: linear-gradient(180deg, rgba(231, 236, 243, 0.00) 0%, #E7ECF3 100%); position: absolute; left: 50%; transform: translateX(-50%); top: 0; bottom: 0; z-index: 2; pointer-events: none; } /* ── PASS-THROUGH WRAPPERS ── */ [data-radial-marquee], .radial-marquee__half-circle, .radial-marquee__circle, .radial-marquee__collection { position: relative; width: 100%; height: 100%; overflow: visible; } /* ── SPINNING RING — desktop 6:4 (3:2) ── */ [data-radial-marquee-rotate] { position: absolute; width: 50vw; height: 33.33vw; /* was 27.2vw (≈16:9), now 3:2 */ top: calc(30px + 90vw); left: 50%; margin-left: -25vw; transform-origin: center center; animation: rotateMarquee 200s linear infinite; animation-play-state: paused; will-change: transform; } /* ── IMAGE CARDS — desktop 6:4 R=90vw, h=33.33vw, half-h=16.67vw --y = (90+16.67)/33.33×100 = 320% --y-circ = -270% → |translateY| = 2.7×33.33vw = 90vw = R ✓ ── */ .radial-marquee__item { --y: 320%; --y-circ: calc(var(--y) * -1 + 50%); transform-origin: center var(--y); position: absolute; top: 0; left: 0; width: 50vw; height: 33.33vw; min-height: unset; aspect-ratio: unset; object-fit: cover; border-radius: 10px; display: block; box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.10); } /* ── ANGULAR PLACEMENT ── */ .radial-marquee__item:nth-child(10n+1) { transform: translateY(var(--y-circ)) rotate(0deg); } .radial-marquee__item:nth-child(10n+2) { transform: translateY(var(--y-circ)) rotate(36deg); } .radial-marquee__item:nth-child(10n+3) { transform: translateY(var(--y-circ)) rotate(72deg); } .radial-marquee__item:nth-child(10n+4) { transform: translateY(var(--y-circ)) rotate(108deg); } .radial-marquee__item:nth-child(10n+5) { transform: translateY(var(--y-circ)) rotate(144deg); } .radial-marquee__item:nth-child(10n+6) { transform: translateY(var(--y-circ)) rotate(180deg); } .radial-marquee__item:nth-child(10n+7) { transform: translateY(var(--y-circ)) rotate(216deg); } .radial-marquee__item:nth-child(10n+8) { transform: translateY(var(--y-circ)) rotate(252deg); } .radial-marquee__item:nth-child(10n+9) { transform: translateY(var(--y-circ)) rotate(288deg); } .radial-marquee__item:nth-child(10n+10) { transform: translateY(var(--y-circ)) rotate(324deg); } /* ── MOBILE: portrait 4:6 at 90vw R=90vw, h=135vw, half-h=67.5vw --y = (90+67.5)/135×100 = 116.67% --y-circ = -66.67% → |translateY| = 0.667×135vw = 90vw = R ✓ ── */ @media (max-width: 768px) { .home-hero__marquee-row { height: 560px !important; } [data-radial-marquee-rotate] { top: calc(5rem + 150vw); width: 80vw; height: 110vw; /* portrait: w × 6/4 */ margin-left: -45vw; } .radial-marquee__item { --y: 200.67%; width: 80vw; height: 110vw; } } /* ── TAG PARALLAX Uses CSS `translate` + `rotate` properties — completely independent from Webflow's `transform`. The !important beats Webflow's inline `translate:none`. JS sets --tag-tx and --tag-r as custom props on each element. ── */ .about-hero-section .gradient-button-float { translate: var(--tag-tx, 0px) !important; rotate: var(--tag-r, 0deg) !important; } @keyframes rotateMarquee { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } /* ── TAB SYSTEM (unchanged) ── */ .tab-content__bottom:has(.tab-content__item.active) .tab-content__item:not(.active) { opacity: 0.5; } @media (hover:hover) and (pointer:fine) { .tab-content__item:not(.active):hover .tab-content__item-bottom { background-color: rgba(0, 0, 0, 0.75); } .tab-content__item:not(.active):hover .content-item__nr { transform: translate(25%, 0px); } } /*Directional List Hover*/ /* ── Tile sits behind content ───────────────────────── */ [data-directional-hover-tile] { position: absolute; inset: 0; background-color: #0B3971; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); transform: translateY(-100%); will-change: transform; z-index: 0; } .directional-list__item { position: relative; overflow: hidden; } .directional-list__col-award, .directional-list__col-client, .directional-list__col-year, /*.directional-list__border.is--item {*/ { position: relative; z-index: 1; } /* ── Text: blue default, white on hover ─────────────── */ .directional-list__item .direcitonal-list__p { color: #0B3971; transition: color 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .directional-list__item[data-status^="enter"] .direcitonal-list__p { color: #ffffff; } /* ── Apply button ───────────────────────────────────── */ .job-apply-group { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; } .job-apply-pill { display: inline-flex; align-items: center; padding: 0.5rem 1.25rem; border-radius: 100px; border: 1.5px solid #0B3971; color: #0B3971; font-size: 0.875rem; font-weight: 500; background: transparent; transition: background 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .directional-list__item[data-status^="enter"] .job-apply-pill { background: #ffffff; border-color: #ffffff; } .job-apply-arrow { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #ffffff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; opacity: 0; transform: scale(0.6); transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .directional-list__item[data-status^="enter"] .job-apply-arrow { opacity: 1; transform: scale(1); } .job-apply-arrow svg { width: 1rem; height: 1rem; stroke: #0B3971; fill: none; } /*Accordion for faq*/ /* Animate Accordion Bottom Grid */ .accordion-css__item-bottom { transition: grid-template-rows 0.6s cubic-bezier(0.625, 0.05, 0, 1); } [data-accordion-status="active"] .accordion-css__item-bottom { grid-template-rows: 1fr; } /* Animate Icon */ .accordion-css__item-icon { transition: transform 0.6s cubic-bezier(0.625, 0.05, 0, 1); } [data-accordion-status="active"] .accordion-css__item-icon { transform: rotate(0.001deg); } .job-apply-btn { display: inline-flex; align-items: center; border: 1.5px solid #0B3971; border-radius: 5px 1rem 5px 15rem; overflow: hidden; text-decoration: none; transition: border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .job-apply-btn__label { padding: 0.625rem 1.25rem; color: #0B3971; font-size: 0.875rem; font-weight: 500; white-space: nowrap; transition: color 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .job-apply-btn__arrow { width: 0; flex-shrink: 0; align-self: stretch; display: flex; align-items: center; justify-content: center; background: #ffffff; overflow: hidden; transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .job-apply-btn__arrow svg { width: 1rem; height: 1rem; stroke: #0B3971; flex-shrink: 0; /* margin controls the arrow's natural padding — contributes to auto-detected width */ margin: 0 1.1rem; } /* ── Row hover states ───────────────────────────── */ .directional-list__item[data-status^="enter"] .job-apply-btn { border-color: #ffffff; } .directional-list__item[data-status^="enter"] .job-apply-btn__label { color: #ffffff; } .directional-list__item[data-status^="enter"] .job-apply-btn__arrow { width: var(--arrow-width, 57.2px); } /*Horizontal Scrolling */ /* Add auto overflow in webflow to make editing easier */ .wf-design-mode [data-horizontal-scroll-wrap] { overflow: auto; } /* ── Prevent flash before JS runs ── */ [data-blur-reveal] { opacity: 0; } /* ══════════════════════════════ TAB SYSTEM — ROWS HOVER VARIANT ══════════════════════════════ */ /* ── Webflow Designer / Editor visibility fix ──────────────── Only applies inside the Webflow canvas (html[data-wf-page] when the GSAP-powered tab JS has NOT initialised). On the published site, JS runs first and overrides all of this with inline styles, so live visitors are unaffected. ──────────────────────────────────────────────────────────── */ /* Target the editor environment only */ html:not(.wf-design-mode) .tab-visual__item, html:not(.wf-design-mode) [data-tabs="visual-item"], html:not(.wf-design-mode) [data-tabs="desc-item"], html:not(.wf-design-mode) [data-tabs="content-item"] { /* Let live site JS take over — no interference */ } /* Inside Webflow Designer, .wf-design-mode is added to <html> */ .wf-design-mode [data-tabs="visual-item"], .wf-design-mode [data-tabs="desc-item"] { /* Un-stack: show all items stacked vertically */ position: relative !important; display: block !important; opacity: 1 !important; visibility: visible !important; clip-path: none !important; transform: none !important; filter: none !important; pointer-events: auto !important; margin-bottom: 1rem; } /* Visual image items: give each a natural height so images show */ .wf-design-mode .tab-visual__wrap { display: flex !important; flex-direction: column !important; gap: 1rem; height: auto !important; } .wf-design-mode .tab-visual__item { height: 300px !important; border-radius: 12px; overflow: hidden; } .wf-design-mode .tab-visual__inner, .wf-design-mode .tab-image { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } /* Content tab items: unstack the heading list */ .wf-design-mode [data-tabs="content-item"] { position: relative !important; display: block !important; opacity: 1 !important; visibility: visible !important; } /* Show the animated heading clone (aria-hidden ghost) */ .wf-design-mode .content-item__heading[aria-hidden="true"] { position: relative !important; opacity: 1 !important; visibility: visible !important; display: block !important; } /* Hide the SplitText duplicate heading — only show the clean one */ .wf-design-mode .content-item__heading:not([aria-hidden]) .tab-line-mask { overflow: visible !important; } .wf-design-mode .tab-line { transform: none !important; } /* Description panel */ .wf-design-mode .tab-description__panel { position: relative !important; height: auto !important; } .wf-design-mode [data-tabs="desc-item"] { margin-bottom: 1.5rem; border-left: 3px solid rgba(255, 255, 255, 0.2); padding-left: 1rem; } /* Progress bars — hide in editor, they're meaningless without JS */ .wf-design-mode [data-tabs="item-progress"], .wf-design-mode .tab-progress, .wf-design-mode .location-nav-bar { display: none !important; } /* SplitText line masks — let text flow naturally in editor */ .wf-design-mode .tab-line-mask, .wf-design-mode .desc-line-mask { overflow: visible !important; height: auto !important; } .wf-design-mode .tab-line, .wf-design-mode .desc-line { position: relative !important; transform: none !important; display: inline !important; } /* Ghost heading needs a containing block */ [data-tabs-style="rows"] .tab-content__item-main { position: relative; } [data-tabs-style="rows"] { display: flex; gap: 4rem; align-items: flex-start; position: relative; } /* ── Left: sticky image column ── */ [data-tabs-style="rows"] .tab-layout__col:first-child { width: 48%; flex-shrink: 0; position: sticky; top: 2rem; height: 65vh; border-radius: 1.25rem; overflow: hidden; } /* Slightly oversized for parallax room */ [data-tabs-style="rows"] .tab-visual__wrap { position: relative; width: 106%; height: 106%; left: -3%; top: -3%; } [data-tabs-style="rows"] .tab-visual__item { position: absolute; inset: 0; clip-path: inset(100% 0% 0% 0%); } [data-tabs-style="rows"] .tab-visual__item .tab-visual__inner, [data-tabs-style="rows"] .tab-visual__item .tab-image { width: 100%; height: 100%; object-fit: cover; display: block; } /* ── Right: full-width title rows ── */ [data-tabs-style="rows"] .tab-layout__col:last-child { flex: 1; min-width: 0; } [data-tabs-style="rows"] .tab-content__item { display: block; width: 100%; padding: 1.5rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* ← was rgba(0,0,0,0.1) */ cursor: pointer; text-decoration: none; color: inherit; opacity: 0.1; /* ← default dim state */ transition: opacity 0.3s ease; /* ← smooth on class toggle + hover */ } /* Active and hover both light up via CSS — no JS needed */ [data-tabs-style="rows"] .tab-content__item.active, [data-tabs-style="rows"] .tab-content__item:hover { opacity: 1; } /* Also fix progress bar track — invisible on dark bg */ [data-tabs-style="rows"] .tab-content__item-bottom { background: rgba(255, 255, 255, 0.1); /* ← was rgba(0,0,0,0.08) */ } [data-tabs-style="rows"] .tab-progress { height: 100%; background: currentColor; transform-origin: left center; transform: scaleX(0); } /* ── Mobile: accordion top, image bottom ── */ @media (max-width: 767px) { [data-tabs-style="rows"] { flex-direction: column; gap: 2rem; } [data-tabs-style="rows"] .tab-layout__col:first-child { order: 2; position: relative; top: 0; width: 100%; height: 60vw; flex-shrink: 0; } [data-tabs-style="rows"] .tab-layout__col:last-child { order: 1; width: 100%; } } /* ── Webflow Designer fix — invert/rows tab variant ────────── Targets the .invert / data-tabs-style="rows" version. Zero impact on published site (wf-design-mode never exists). ──────────────────────────────────────────────────────────── */ /* ── Visual panel: unstack images ───────────────────────── */ .wf-design-mode .tab-visual__wrap { display: flex !important; flex-direction: column !important; gap: 1rem !important; height: auto !important; position: relative !important; } .wf-design-mode .tab-visual__item { position: relative !important; display: block !important; opacity: 1 !important; visibility: visible !important; transform: none !important; height: 280px !important; border-radius: 12px; overflow: hidden; flex-shrink: 0; } .wf-design-mode .tab-visual__inner { width: 100% !important; height: 100% !important; } .wf-design-mode .tab-image { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } /* ── Tab content items: show all, no overlap ─────────────── */ .wf-design-mode [data-tabs="content-item"] { position: relative !important; display: block !important; opacity: 1 !important; visibility: visible !important; transform: none !important; margin-bottom: 0 !important; } /* ── Accordion detail panels: force open ────────────────── */ .wf-design-mode [data-tabs="item-details"] { height: auto !important; overflow: visible !important; opacity: 1 !important; visibility: visible !important; } .wf-design-mode [data-tabs="item-details"] p, .wf-design-mode [data-tabs="item-details"] .tab-description { opacity: 1 !important; visibility: visible !important; transform: none !important; } /* ── Description panel (column variant) ─────────────────── */ .wf-design-mode [data-tabs="desc-item"] { position: relative !important; display: block !important; opacity: 1 !important; visibility: visible !important; transform: none !important; margin-bottom: 1.5rem; padding-left: 1rem; border-left: 3px solid rgba(255, 255, 255, 0.15); } .wf-design-mode .tab-description__panel { position: relative !important; height: auto !important; } /* ── SplitText: un-mask all lines ────────────────────────── */ .wf-design-mode .tab-line-mask, .wf-design-mode .desc-line-mask, .wf-design-mode .reveal-line-mask { overflow: visible !important; height: auto !important; } .wf-design-mode .tab-line, .wf-design-mode .desc-line, .wf-design-mode .reveal-line, .wf-design-mode .reveal-word { position: relative !important; transform: none !important; opacity: 1 !important; visibility: visible !important; display: inline-block !important; } /* reveal-line should be block so words wrap correctly */ .wf-design-mode .reveal-line { display: block !important; } /* ── Ghost heading (aria-hidden clone) ───────────────────── */ .wf-design-mode .content-item__heading[aria-hidden="true"] { position: relative !important; opacity: 1 !important; visibility: visible !important; display: block !important; /* Push it below the live heading so they don't overlap */ margin-top: 0.25rem; font-size: 0.7em; opacity: 0.35 !important; } /* Hide the ghost entirely if you'd rather — cleaner option */ /* .wf-design-mode .content-item__heading[aria-hidden="true"] { display: none !important; } */ /* ── Progress bars: hidden in editor ────────────────────── */ .wf-design-mode [data-tabs="item-progress"], .wf-design-mode .tab-progress { display: none !important; } /* ── Spacers inside accordion: collapse so layout is tight ─ */ .wf-design-mode .tab-description__spacer { height: 0.5rem !important; min-height: 0 !important; } /* ── Section heading (the big H1) ───────────────────────── */ .wf-design-mode [data-reveal="text"] { opacity: 1 !important; visibility: visible !important; } .wf-design-mode [data-reveal="text"] .reveal-word { transform: none !important; opacity: 1 !important; } /* ── Description panel ── */ .tab-description__panel { position: relative; min-height: 9rem; /* adjust to your longest description */ margin-top: 2rem; } [data-tabs="desc-item"] { position: absolute; top: 0; left: 0; width: 100%; /* autoAlpha controlled by JS */ } /* ── Visual items: all stacked, clip-path controls reveal ── */ [data-tabs-style="rows"] .tab-visual__wrap { position: relative; width: 106%; height: 106%; left: -3%; top: -3%; } [data-tabs-style="rows"] .tab-visual__item { position: absolute; inset: 0; /* z-index and clip-path set by JS */ } [data-tabs-style="rows"] .tab-visual__item .tab-visual__inner, [data-tabs-style="rows"] .tab-visual__item .tab-image { width: 100%; height: 100%; object-fit: cover; display: block; } /* ── Tab item: no accordion, just the row ── */ [data-tabs-style="rows"] .tab-content__item { display: block; width: 100%; padding: 1.25rem 0; border-bottom: 1px solid rgba(0, 0, 0, 0.1); cursor: pointer; text-decoration: none; color: inherit; } [data-tabs-style="rows"] .tab-content__item-bottom { margin-top: 0.75rem; height: 2px; background: rgba(0, 0, 0, 0.08); overflow: hidden; } [data-tabs-style="rows"] .tab-progress { height: 100%; background: currentColor; transform-origin: left center; transform: scaleX(0); } /* ── Mobile ── */ @media (max-width: 767px) { [data-tabs-style="rows"] { flex-direction: column; gap: 2rem; } [data-tabs-style="rows"] .tab-layout__col:first-child { order: 2; position: relative; top: 0; width: 100%; height: 60vw; } [data-tabs-style="rows"] .tab-layout__col:last-child { order: 1; width: 100%; } } /*404 Minigame*/ .minigame__pull.is--drag .minigame__rocket-top { display: block; } .minigame__score-screen { transition: 0.4s cubic-bezier(0.625, 0.05, 0, 1); opacity: 0; visibility: hidden; transform: translateY(32px) rotate(0.001deg) scale(0.9); } [data-minigame-status="finished"] .minigame__score-screen { opacity: 1; visibility: visible; transform: translateY(0px) rotate(0.001deg) scale(1); } .minigame__controls { transition: 0.4s cubic-bezier(0.625, 0.05, 0, 1); } .minigame:has([data-minigame-status="finished"]) .minigame__controls { opacity: 0; visibility: hidden; } /*Progressive Blur Header*/ /*.progressive-blur {*/ /* z-index: 40;*/ /* pointer-events: none;*/ /* isolation: isolate;*/ /* contain: paint;*/ /* width: 100%;*/ /* height: 15em;*/ /* transform-style: preserve-3d;*/ /* position: fixed;*/ /* bottom: 0;*/ /* left: 0;*/ /* overflow: hidden;*/ /* transform: translateZ(0);*/ /*}*/ .progressive-blur__layer { width: 100%; height: 100%; position: absolute; } .progressive-blur__layer.is--1 { -webkit-backdrop-filter: blur(.19375em); backdrop-filter: blur(.09375em); -webkit-mask: linear-gradient(#0000 50%, #000 62.5% 75%, #0000 87.5%); mask: linear-gradient(#0000 50%, #000 62.5% 75%, #0000 87.5%); } .progressive-blur__layer.is--2 { -webkit-backdrop-filter: blur(.345em); backdrop-filter: blur(.1875em); -webkit-mask: linear-gradient(#0000 62.5%, #000 75% 87.5%, #0000 100%); mask: linear-gradient(#0000 62.5%, #000 75% 87.5%, #0000 100%); } .progressive-blur__layer.is--3 { -webkit-backdrop-filter: blur(.725em); backdrop-filter: blur(.375em); -webkit-mask: linear-gradient(#0000 75%, #000 87.5% 100%); mask: linear-gradient(#0000 75%, #000 87.5% 100%); } .progressive-blur__layer.is--4 { -webkit-backdrop-filter: blur(1.1em); backdrop-filter: blur(.75em); -webkit-mask: linear-gradient(#0000 82%, #000 92% 100%); mask: linear-gradient(#0000 82%, #000 92% 100%); } .progressive-blur__layer.is--5 { -webkit-backdrop-filter: blur(2em); backdrop-filter: blur(1.3em); -webkit-mask: linear-gradient(#0000 88%, #000 100%); mask: linear-gradient(#0000 88%, #000 100%); } /* Prevents "flash of unscaled content" before GSAP initialises. Must match the default data-image-parallax-scale value (1.2). GSAP will take ownership of the transform when it runs. */ [data-image-parallax] { transform: scale(1.2); transform-origin: center center; will-change: transform; } /*For drawing section, to avoid the draw get out of section*/ [data-draw] { overflow: hidden; } /* ── Location nav progress bar ───────────────────────────── */ .location-navigation-button { position: relative; /* required for the bar */ overflow: hidden; /* keeps bar inside rounded corners if any */ } .location-nav-bar { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: currentColor; /* inherits button text colour — swap to a brand token if needed */ transform: scaleX(0); transform-origin: left center; pointer-events: none; } /* ── Map items: only active item rendered ─────────────────── */ .location-map-item { display: none; column-gap: 1.2rem; } .location-map-item.is--active { display: flex; column-gap: 1.2rem; /* or whatever the Webflow layout value is */ } /* Active nav full opacity — inactive dimmed */ .location-navigation-button { opacity: 0.4; /* GSAP will override this — just the fallback default */ } .location-nav-bar { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left center; pointer-events: none; } .location-map-item { display: none; } .location-map-item.is--active { display: flex; } /*Hero Section Draw*/ svg.cursor-svg { position: absolute; z-index: 10; top: 0; left: 0; height: 100%; width: 100%; pointer-events: none; } /*Cursor Follow Animation*/ body:has(a:hover) .cursor, body:has(button:hover) .cursor, body:has([data-cursor]:hover) .cursor { width: 3em; height: 3em; background-color: rgba(13, 68, 135, 0.3); } @media (hover: none) and (pointer: coarse) { .cursor { display: none; } } /*/Map Location List/*/ /* Wrapper that holds all map items — give it a fixed height context */ .location-map-list { position: relative; } /* All items stack in the same space */ [data-location-map] { position: absolute; inset: 0; width: 100%; /* No display:none needed — GSAP autoAlpha handles visibility */ } /* The first/active item drives the natural height of the container */ [data-location-map].is--active { position: relative; /* back in flow = sets the container height */ } /* ── Webflow Designer fix — Location Map Navigation ───────── Only fires inside the Designer (wf-design-mode on <html>). Zero effect on published site. ──────────────────────────────────────────────────────────── */ /* ── Unstack all map items into a vertical list ─────────── */ .wf-design-mode .location-map-list { position: relative !important; display: flex !important; flex-direction: column !important; gap: 3rem !important; } .wf-design-mode [data-location-map] { position: relative !important; display: flex !important; opacity: 1 !important; visibility: visible !important; transform: none !important; filter: none !important; pointer-events: auto !important; } /* Divider between cards */ .wf-design-mode [data-location-map]+[data-location-map] { padding-top: 3rem; border-top: 1px solid rgba(128, 128, 128, 0.2); } /* ── Map container: remove GSAP blur/transform state ─────── */ .wf-design-mode .location-map-container { opacity: 1 !important; visibility: visible !important; transform: none !important; filter: none !important; width: 100% !important; } /* ── Float image: remove GSAP hidden state ───────────────── */ .wf-design-mode .location-navigation-image-float-wrap { opacity: 1 !important; visibility: visible !important; transform: none !important; filter: none !important; } .wf-design-mode .location-navigation-image-float { transform: none !important; } /* ── Progress bars: hide in editor ──────────────────────── */ .wf-design-mode .location-nav-bar { display: none !important; } /* ── Nav buttons: all visible at full opacity ────────────── */ .wf-design-mode .location-navigation-button { opacity: 1 !important; } /* ── Label inactive map items clearly ───────────────────── */ .wf-design-mode [data-location-map]:not(.is--active) { outline: 2px dashed rgba(128, 128, 128, 0.35) !important; outline-offset: 12px; border-radius: 4px; } .wf-design-mode [data-location-map]:not(.is--active)::before { content: attr(data-location-map) ' — inactive'; display: block; position: absolute; top: -1.6rem; left: 0; font-size: 10px; font-family: monospace; color: rgba(128, 128, 128, 0.6); letter-spacing: 0.05em; text-transform: uppercase; pointer-events: none; z-index: 10; } /* Need relative on item so the ::before label positions correctly */ .wf-design-mode [data-location-map] { position: relative !important; } /*Preloader*/ /* ── Preloader ─────────────────────────────────────────────── Sits above everything. JS removes it after the reveal. ──────────────────────────────────────────────────────────── */ [data-preloader] { position: fixed; inset: 0; z-index: 9999; pointer-events: none; /* allow clicks through once invisible */ pointer-events: all; /* block during load */ } .preloader__svg { position: absolute; inset: 0; width: 100%; height: 100%; } .preloader__path { fill: #0a1f44; /* ← your Headstart navy — swap to your brand blue */ } .wf-design-mode .preloader { display: none; } /*Sticky Steps*/ @media screen and (min-width: 992px) { [data-sticky-steps-item-status] .sticky-steps__visual { transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out; opacity: 0; visibility: hidden; } [data-sticky-steps-item-status="before"] .sticky-steps__visual, [data-sticky-steps-item-status="active"] .sticky-steps__visual { opacity: 1; visibility: visible; } [data-sticky-steps-item-status] .sticky-steps__text { transition: opacity 0.5s ease-in-out; opacity: 0.25; } [data-sticky-steps-item-status="active"] .sticky-steps__text { opacity: 1; } } [data-underline-link] { text-decoration: none; position: relative; } [data-underline-link]::before, [data-underline-link="alt"]::before, [data-underline-link="alt"]::after { content: ""; position: absolute; bottom: -0.0625em; left: 0; width: 100%; height: 0.0625em; background-color: currentColor; transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1); transform-origin: right; transform: scaleX(0) rotate(0.001deg); } [data-underline-link="alt"]::before { transform-origin: left; transform: scaleX(1) rotate(0.001deg); transition-delay: 0.3s; } [data-underline-link="alt"]::after { transform-origin: right; transform: scaleX(0) rotate(0.001deg); transition-delay: 0s; } @media (hover: hover) and (pointer: fine) { [data-hover]:hover [data-underline-link]::before, [data-underline-link]:hover::before { transform-origin: left; transform: scaleX(1) rotate(0.001deg); } [data-hover]:hover [data-underline-link="alt"]::before, [data-underline-link="alt"]:hover::before { transform-origin: right; transform: scaleX(0) rotate(0.001deg); transition-delay: 0s; } [data-hover]:hover [data-underline-link="alt"]::after, [data-underline-link="alt"]:hover::after { transform-origin: left; transform: scaleX(1) rotate(0.001deg); transition-delay: 0.3s; } } /*<!-- Keep this css code to improve the font quality-->*/ * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -o-font-smoothing: antialiased; }