/* ============================================ APEXA QLA — v2 "Light & Air" PLOTT-aligned aesthetic: soft whites, lake mist teal, less dark blue, more brightness and bloom ============================================ */ /* --- Reset & Base --- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :root { /* Core — unchanged brand */ --dark: #25323a; /* PLOTT navy — used sparingly */ --dark-deep: #1a252b; --accent: #fd9d49; /* brand orange */ --accent-hover: #e88a35; /* NEW v2 Light palette */ --mist: #e8f1f4; /* Lake Mist (sun on water) */ --mist-deep: #c8dfe6; /* Lake Mist teal, deeper */ --mist-text: #4a6b78; /* readable on mist */ --soft-white: #fafbfc; /* off-white section bg */ --cream: #f7f4ef; /* warm cream (Swiss clean) */ --warm: #e8e2d8; --text-dark: #1a252b; --text-muted: #5a6a72; --text-soft: #8a9aa2; --white: #ffffff; --grey-warm: #888581; --grey-light: #d9d9d9; --grey-bg: #f0eeeb; --black: #000000; /* Glow / bloom */ --glow-sun: 0 0 80px rgba(253, 157, 73, 0.25); --glow-mist: 0 20px 60px rgba(72, 123, 140, 0.12); --glow-soft: 0 10px 40px rgba(26, 37, 43, 0.06); /* Typography */ --font-heading: 'Plus Jakarta Sans', 'Inter', sans-serif; --font-body: 'Inter', sans-serif; --f-serif: 'Cormorant Garamond', 'Times New Roman', serif; /* Spacing */ --section-pad: clamp(5rem, 10vh, 8rem); --container: 1400px; --gap: 2rem; /* Transitions */ --ease: cubic-bezier(0.16, 1, 0.3, 1); --duration: 0.6s; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: auto; /* Lenis handles this */ /* mobile-first safety net: never let a stray element create a horizontal scrollbar (esp. RTL/Arabic). clip (not hidden) keeps position:sticky and the pinned hero working; wide tables/carousels use their own scrollers. */ overflow-x: clip; } body { font-family: var(--font-body); color: var(--text-dark); background: var(--soft-white); line-height: 1.65; /* clip (not hidden) — see the note on html above: hidden makes a scroll container and breaks position:sticky (pinned hero, scroll maps). */ overflow-x: clip; } img { max-width: 100%; height: auto; display: block; } a { text-decoration: none; color: inherit; } /* --- Container --- */ .container { max-width: var(--container); margin: 0 auto; padding: 0 clamp(1.5rem, 4vw, 4rem); } /* --- Typography --- */ .heading-xl { font-family: var(--font-heading); font-weight: 300; font-size: clamp(2.2rem, 4vw, 3.5rem); line-height: 1.15; letter-spacing: -0.02em; } .heading-lg { font-family: var(--font-heading); font-weight: 300; font-size: clamp(1.8rem, 3.5vw, 3rem); line-height: 1.2; letter-spacing: -0.01em; } .heading-md { font-family: var(--font-heading); font-weight: 400; font-size: clamp(1.3rem, 2vw, 1.75rem); line-height: 1.3; } .heading-accent { font-family: var(--font-heading); font-weight: 300; font-size: clamp(1.8rem, 3.5vw, 3rem); color: var(--accent); font-style: italic; } .body-lg { font-size: clamp(1rem, 1.2vw, 1.25rem); line-height: 1.7; opacity: 0.85; } .label { font-family: var(--font-body); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.15em; text-transform: uppercase; } .label--accent { color: var(--accent); } .text-accent { color: var(--accent); } .text-center { text-align: center; } .subtitle { max-width: 650px; margin: 1rem auto 3rem; } /* ============================================ BUTTONS ============================================ */ .btn { display: inline-flex; align-items: center; width: fit-content; gap: 0.5rem; font-family: var(--font-body); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 1rem 2rem; border: none; border-radius: 0; cursor: pointer; transition: all 0.3s var(--ease); } .btn--primary { background: var(--accent); color: var(--dark); } .btn--primary:hover { background: var(--accent-hover); transform: translateY(-2px); } .btn--outline { background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,0.4); } .btn--outline:hover { border-color: var(--white); background: rgba(255,255,255,0.05); } .btn--text { background: none; color: var(--accent); padding: 0; text-transform: uppercase; font-weight: 600; font-size: 0.8rem; letter-spacing: 0.1em; } .btn--text:hover { gap: 0.75rem; } .btn--sm { padding: 0.7rem 1.4rem; font-size: 0.75rem; } .btn--lg { padding: 1.2rem 2.8rem; font-size: 0.95rem; } /* ============================================ NAVIGATION — Floating bar → Full sticky on scroll ============================================ */ .nav { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; padding: 1.75rem clamp(1.5rem, 4vw, 4rem); transition: padding 0.4s var(--ease), transform 0.5s var(--ease), opacity 0.4s var(--ease); } /* When footer is in view, retract the sticky nav — footer has its own nav */ body.footer-in-view .nav { transform: translateY(-110%); opacity: 0; pointer-events: none; } /* Utility bar — hidden initially */ .nav__utility { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.4s var(--ease), opacity 0.3s var(--ease); } .nav__utility-inner { display: flex; align-items: center; justify-content: flex-end; gap: clamp(1.5rem, 3vw, 3rem); padding: 0.6rem 1.5rem; max-width: var(--container); margin: 0 auto; } .nav__utility-link { font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white); opacity: 0.75; display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; transition: opacity 0.3s; cursor: pointer; } .nav__utility-link:hover { opacity: 1; } .nav__utility-link i { font-size: 0.85rem; } .nav__flag { width: 18px; height: 13px; object-fit: cover; border-radius: 2px; vertical-align: middle; } /* Language dropdown wrapper */ .nav__lang-wrap { position: relative; } .nav__lang-toggle { background: none; border: none; color: inherit; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; opacity: 0.7; transition: opacity 0.3s; } .nav__lang-toggle:hover { opacity: 1; } .nav__lang-toggle i { font-size: 0.75rem; opacity: 0.6; transition: transform 0.3s; } .nav__lang-wrap.open .nav__lang-toggle i { transform: rotate(180deg); } .nav__lang-dropdown { position: absolute; top: calc(100% + 8px); right: 0; background: var(--dark); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 0.4rem 0; list-style: none; margin: 0; min-width: 150px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all 0.25s var(--ease); box-shadow: 0 12px 40px rgba(0,0,0,0.4); z-index: 200; } .nav__lang-wrap.open .nav__lang-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .nav__lang-opt { display: flex; align-items: center; gap: 10px; padding: 0.55rem 1rem; font-size: 0.78rem; font-weight: 500; color: rgba(255,255,255,0.7); cursor: pointer; transition: all 0.2s; } .nav__lang-opt:hover { background: rgba(255,255,255,0.06); color: var(--white); } .nav__lang-opt.active { color: var(--accent); } .nav__lang-opt .nav__flag { width: 20px; height: 14px; } /* Search trigger — proximity feedback (Codrops "demo 3" pattern). --p is set by JS in [0..1]: 0 = cursor far, 1 = cursor on the button. Outer ring scales up + glows; icon rotates and brightens. */ .nav__search { --p: 0; position: relative; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; display: inline-grid; place-items: center; color: #ffffff; margin-right: 0.75rem; isolation: isolate; -webkit-tap-highlight-color: transparent; } .nav__search-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid currentColor; /* Ring is invisible at p=0 and pops in as cursor approaches. */ opacity: calc(0.15 + var(--p) * 0.85); transform: scale(calc(0.65 + var(--p) * 0.55)); transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease); background: rgba(253, 157, 73, calc(var(--p) * 0.18)); border-color: rgba(255, 255, 255, calc(0.35 + var(--p) * 0.65)); z-index: -1; } .nav__search-icon { display: inline-grid; place-items: center; /* Icon scales up + rotates as proximity increases (subtle, ~12°). */ transform: scale(calc(0.9 + var(--p) * 0.25)) rotate(calc(var(--p) * -12deg)); transition: transform 0.2s var(--ease), color 0.2s var(--ease); color: rgba(255, 255, 255, calc(0.7 + var(--p) * 0.3)); } .nav__search-icon svg { display: block; stroke-width: calc(1.6 + var(--p) * 0.6); } /* Active "click" state: deeper ring, accent color */ .nav__search:active .nav__search-ring { background: rgba(253, 157, 73, 0.35); border-color: var(--accent); } /* When the nav is scrolled (light state) the search needs dark colors */ .nav.scrolled .nav__search { color: var(--text-dark); } .nav.scrolled .nav__search-ring { border-color: rgba(37, 50, 58, calc(0.4 + var(--p) * 0.6)); } .nav.scrolled .nav__search-icon { color: rgba(37, 50, 58, calc(0.7 + var(--p) * 0.3)); } /* ============================================================ SEARCH OVERLAY — full-screen dark brand, centered input + button ============================================================ */ .search-overlay { position: fixed; inset: 0; z-index: 1000; /* Translucent dark brand wash — content behind shows through, the heavy blur + saturate keeps it readable. */ background: linear-gradient(180deg, rgba(23, 32, 38, 0.55) 0%, rgba(37, 50, 58, 0.62) 100%); backdrop-filter: blur(28px) saturate(140%); -webkit-backdrop-filter: blur(28px) saturate(140%); display: flex; align-items: center; justify-content: center; padding: clamp(2rem, 6vw, 5rem); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.35s var(--ease), visibility 0s linear 0.35s; } .search-overlay[hidden] { display: flex; } /* keep flex; we control via .is-open */ .search-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; } /* Close button (top-right) */ .search-overlay__close { position: absolute; top: clamp(1.25rem, 2.5vw, 2rem); right: clamp(1.25rem, 2.5vw, 2rem); width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.35); background: transparent; color: #ffffff; cursor: pointer; display: grid; place-items: center; font-size: 1.6rem; transition: background 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease); } .search-overlay__close:hover { background: var(--accent); border-color: var(--accent); color: var(--text-dark); transform: rotate(90deg); } /* Form — vertically + horizontally centered, ~960px wide */ .search-overlay__form { width: 100%; max-width: 960px; display: flex; flex-direction: column; align-items: center; gap: clamp(1.25rem, 2.5vw, 2rem); transform: translateY(24px); opacity: 0; transition: transform 0.45s var(--ease) 0.05s, opacity 0.4s var(--ease) 0.05s; } .search-overlay.is-open .search-overlay__form { transform: translateY(0); opacity: 1; } .search-overlay__label { font-family: var(--font-heading); font-weight: 300; font-size: clamp(1.5rem, 3.5vw, 2.6rem); line-height: 1.15; letter-spacing: -0.02em; color: #ffffff; text-align: center; margin: 0; } /* Big input + button row */ .search-overlay__row { position: relative; width: 100%; display: flex; align-items: center; gap: 0.75rem; background: rgba(255, 255, 255, 0.06); border: 1.5px solid rgba(255, 255, 255, 0.18); border-radius: 100px; padding: 0.6rem 0.6rem 0.6rem 1.75rem; transition: border-color 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease); } .search-overlay__row:focus-within { border-color: var(--accent); background: rgba(255, 255, 255, 0.1); box-shadow: 0 0 0 4px rgba(253, 157, 73, 0.18); } .search-overlay__icon { font-size: 1.6rem; color: rgba(255, 255, 255, 0.55); transition: color 0.25s var(--ease); flex-shrink: 0; } .search-overlay__row:focus-within .search-overlay__icon { color: var(--accent); } .search-overlay__input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: #ffffff; font-family: var(--font-body); font-size: clamp(1.1rem, 2vw, 1.5rem); /* large input text */ font-weight: 400; padding: 0.85rem 0.5rem; caret-color: var(--accent); } .search-overlay__input::placeholder { color: rgba(255, 255, 255, 0.4); font-style: italic; } .search-overlay__input::-webkit-search-cancel-button { display: none; } /* Big orange pill button */ .search-overlay__btn { flex-shrink: 0; background: var(--accent); color: var(--text-dark); border: 0; border-radius: 100px; padding: 1rem clamp(1.5rem, 3vw, 2.4rem); font-family: var(--font-heading); font-weight: 700; font-size: clamp(0.95rem, 1.4vw, 1.1rem); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease); box-shadow: 0 8px 24px rgba(253, 157, 73, 0.3); } .search-overlay__btn:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(253, 157, 73, 0.45); } .search-overlay__btn:active { transform: translateY(0); } /* Hint line under the field */ .search-overlay__hint { font-family: var(--font-body); font-size: 0.875rem; color: rgba(255, 255, 255, 0.55); text-align: center; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; align-items: center; } .search-overlay__hint em { color: rgba(255, 255, 255, 0.85); font-style: italic; } .search-overlay__kbd { display: inline-block; padding: 0.15rem 0.5rem; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 4px; font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.06); } /* Lock body scroll while overlay is open */ body.search-open { overflow: hidden; } /* Responsive — stack input above button on narrow screens */ @media (max-width: 600px) { /* Utility strip (phone · Family Portal · language): the desktop flex-end + big gaps crowd/overflow at the right edge on phones. Spread the three items evenly across the bar and size them down so the row reads clean. */ .nav__utility-inner { justify-content: space-between; gap: 0.5rem; padding: 0.5rem clamp(0.75rem, 3.5vw, 1.25rem); } .nav__utility-link { font-size: 0.64rem; letter-spacing: 0.04em; gap: 0.35rem; /* the header's 12px tap padding made the strip ~60px — taller than the 50px bar cap — so the language switcher overflowed DOWN behind the main nav bar. Trim the padding AND (below) grow the bar so it always holds its content. */ padding-top: 7px !important; padding-bottom: 7px !important; } .nav__lang-toggle { padding-top: 7px !important; padding-bottom: 7px !important; } .nav__utility-link i { font-size: 0.82rem; } .nav__flag { width: 15px; height: 11px; } /* bar tall enough to fully contain the strip → never hides behind the nav bar */ .nav.scrolled .nav__utility { max-height: 60px; } .search-overlay__row { flex-direction: column; border-radius: 24px; padding: 1rem; gap: 1rem; align-items: stretch; } .search-overlay__icon { display: none; } .search-overlay__input { background: rgba(255, 255, 255, 0.04); border-radius: 12px; padding: 1rem 1.25rem; font-size: 1.1rem; } .search-overlay__btn { width: 100%; padding: 1rem; } } /* === SCROLLED STATE: full-width sticky with utility bar === */ .nav.scrolled { padding: 0; } .nav.scrolled .nav__utility { max-height: 50px; overflow: visible; opacity: 1; background: var(--dark); border-bottom: 1px solid rgba(255,255,255,0.06); } .nav.scrolled .nav__bar { border-radius: 0; background: var(--dark); backdrop-filter: blur(20px); max-width: 100%; padding: 0.75rem clamp(1.5rem, 4vw, 4rem); } /* Main nav bar — default floating pill */ .nav__bar { max-width: var(--container); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; background: var(--dark); border-radius: 100px; padding: 0.85rem 1rem 0.85rem 1.5rem; transition: all 0.4s var(--ease); } .nav__logo img { height: 32px; width: auto; } .nav__menu { display: flex; align-items: center; } .nav__link-group { display: flex; align-items: center; gap: clamp(1.2rem, 2.5vw, 2.5rem); } .nav__link-group a { font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white); opacity: 0.85; transition: opacity 0.3s; white-space: nowrap; display: inline-flex; align-items: center; gap: 2px; } .nav__link-group a i { font-size: 0.9rem; opacity: 0.6; } .nav__link-group a:hover { opacity: 1; } .nav__actions { display: flex; align-items: center; gap: 1rem; } .nav__cta { display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: var(--white); font-family: var(--font-body); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.75rem 1.6rem; border-radius: 100px; white-space: nowrap; transition: all 0.3s var(--ease); } .nav__cta:hover { background: var(--accent-hover); transform: scale(1.03); } .nav__burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 5px; } .nav__burger span { width: 24px; height: 2px; background: var(--white); transition: all 0.3s; } /* Mobile Menu */ .mobile-menu { position: fixed; /* anchor ALL four viewport edges so the overlay always stretches to the very bottom of the screen. height:100dvh could leave a gap at the bottom on mobile (stale dynamic-viewport value at open time / iOS address-bar), so the grey menu "didn't expand to the bottom". top+bottom:0 fills reliably. */ inset: 0; background: var(--dark-deep); z-index: 99; display: flex; flex-direction: column; align-items: stretch; /* full width (was center — clipped tall menus) */ justify-content: flex-start;/* top-align (was center — no way to scroll) */ overflow-y: auto; /* the fix: tall menus now scroll */ -webkit-overflow-scrolling: touch; overscroll-behavior: contain; opacity: 0; pointer-events: none; transition: opacity 0.4s var(--ease); } .mobile-menu.active { opacity: 1; pointer-events: all; } /* Lock page scroll while the mobile menu is open, so the page can't scroll behind the fixed overlay ("the menu scrolls with you"). The menu still scrolls internally via its own overflow-y:auto. */ html.menu-open, html.menu-open body { overflow: hidden; } .mobile-menu__nav { display: flex; flex-direction: column; gap: 2rem; text-align: center; width: 100%; /* top pad clears the fixed header/close button; bottom pad + auto margin keep a short menu vertically centred while a tall one scrolls freely */ padding: 5.5rem 1.5rem 4rem; margin: auto 0; } .mobile-menu__nav a { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 300; letter-spacing: 0.05em; text-transform: uppercase; } .mobile-menu__whatsapp { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; margin-top: 1rem; padding: 0.9rem 1.25rem; border-radius: 999px; background: #25D366; /* WhatsApp green */ color: #ffffff; } .mobile-menu__whatsapp i { font-size: 1.25rem; } .mobile-menu__phone { color: var(--accent); margin-top: 1.25rem; } /* ============================================ HERO SECTION ============================================ */ .hero { position: relative; /* v3: only 100vh — ScrollTrigger pin-spacer handles extra scroll distance. v1 had 400vh for native sticky scroll, but now pin:true adds its own spacer so 400vh created a second visible "ghost" hero below the pin. */ height: 100vh; width: 100%; } /* v2 hero liquid variant — removed. v2 now just uses the standard .hero / .hero-v2 styles with a plain looping video background. */ /* Bottom seam-hider — thin white fade right at the very bottom of the hero, just enough to kill the hard line between the video and the next section. */ .hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 48px; background: linear-gradient( to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 100% ); z-index: 2; pointer-events: none; } .hero__bg { position: absolute; top: 0; height: 100%; width: 100%; overflow: hidden; background: #1a2228; } .hero__video, .hero__canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; display: block; } /* v4: hidden video source (WebGL samples from it, not rendered itself) */ .hero-webgl .hero__video-source { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .hero__overlay { position: absolute; inset: 0; z-index: 2; background: linear-gradient( to bottom, rgba(37, 50, 58, 0.25) 0%, rgba(37, 50, 58, 0.45) 40%, rgba(37, 50, 58, 0.7) 70%, rgba(37, 50, 58, 1) 100% ); } .hero__content { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 0 clamp(2rem, 8vw, 10rem); z-index: 2; pointer-events: none; } /* Mobile / touch: the hero is NOT pinned (see main-v4.js heavyHero gate), so the content must NOT stay position:fixed — otherwise the "Progress isn't chance" title glues to the viewport and overlays the page as you scroll down. Make it absolute so the whole hero scrolls away as one 100vh block. */ @media (max-width: 900px), (pointer: coarse) { .hero__content { position: absolute; } } .hero__tagline { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; opacity: 0.7; margin-bottom: 1.5rem; } .hero__title { position: relative; height: 200px; overflow: hidden; } .hero__title-line { font-family: var(--font-heading); font-weight: 300; font-size: clamp(2.5rem, 5vw, 5rem); line-height: 1.1; letter-spacing: -0.02em; position: absolute; top: 0; left: 0; opacity: 0; transform: translateY(30px); transition: all 0.6s var(--ease); } .hero__title-line.active { opacity: 1; transform: translateY(0); } .hero__cta-group { margin-top: 3rem; display: flex; align-items: flex-start; gap: 3rem; pointer-events: all; } .hero__cta-label { font-family: var(--font-heading); font-weight: 600; font-size: 1.1rem; margin-bottom: 0.5rem; } .hero__cta-desc { font-size: 0.95rem; opacity: 0.7; max-width: 320px; } .hero__cta-buttons { display: flex; gap: 1rem; align-items: center; } .hero__progress { position: fixed; right: 3rem; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 12px; z-index: 10; pointer-events: none; transition: opacity 0.4s; } .hero__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.3); transition: all 0.3s; } .hero__dot.active { background: var(--accent); transform: scale(1.4); } .hero__scroll-hint { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; opacity: 0.5; z-index: 10; animation: bobDown 2s ease-in-out infinite; } @keyframes bobDown { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } } /* ============================================ SECTIONS (general) ============================================ */ .section { position: relative; padding: var(--section-pad) 0; z-index: 3; } .section--dark { background: var(--dark); color: var(--white); } .section--light { background: var(--soft-white); color: var(--text-dark); } .section--grey { background: var(--grey-warm); color: var(--white); } /* v2 NEW: Light & Air palette sections */ .section--mist { background: linear-gradient(180deg, var(--mist) 0%, var(--soft-white) 100%); color: var(--text-dark); } .section--cream { background: var(--cream); color: var(--text-dark); } .section--mist-deep { background: linear-gradient(135deg, var(--mist) 0%, var(--mist-deep) 100%); color: var(--text-dark); } .section--cta { position: relative; background: var(--dark-deep); overflow: hidden; } .section--cta .hero__bg { position: absolute; top: 0; left: 0; height: 100%; } /* --- Split Layout --- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .split--reverse .split__media { order: -1; } .split__text { display: flex; flex-direction: column; gap: 1.5rem; } .image-card { border-radius: 8px; overflow: hidden; position: relative; } .image-card img { width: 100%; height: 500px; object-fit: cover; } .image-card--accent::before { content: ''; position: absolute; top: -20px; left: -20px; width: 120px; height: 120px; background: var(--accent); opacity: 0.8; border-radius: 4px; z-index: -1; } /* Problem section heading — full width above split */ .problem__heading { margin-bottom: 2.5rem; } /* Condition triggers — interactive text */ .condition-trigger { position: relative; color: var(--white); font-weight: 600; cursor: pointer; transition: color 0.3s; padding-bottom: 2px; border-bottom: 2px solid transparent; } .condition-trigger:hover { color: var(--accent); } .condition-trigger.active { color: var(--accent); border-bottom-color: var(--accent); } /* Condition images — crossfade stack */ .condition-images { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; } .condition-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s var(--ease); } .condition-img.active { opacity: 1; } /* ============================================ PROGRAMME CARDS ============================================ */ .cards--three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .card { background: var(--white); padding: 2.5rem; border-radius: 8px; display: flex; flex-direction: column; gap: 1.2rem; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); } .card:hover { transform: translateY(-8px); box-shadow: 0 20px 60px rgba(0,0,0,0.1); } .card__icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: rgba(253, 157, 73, 0.12); border-radius: 12px; color: var(--accent); font-size: 1.5rem; } .card__title { font-family: var(--font-heading); font-weight: 600; font-size: 1.3rem; color: var(--dark); } .card__desc { color: var(--grey-warm); font-size: 0.95rem; line-height: 1.7; flex: 1; } /* ---- Programme cards (media variant — Figma 870:413) ---- Image/video lives in the upper portion (.card__media). All other card content keeps the existing typography and structure. */ .card--media { padding: 0; overflow: hidden; border: 1px solid #dadada; /* Override the base shadow on hover with brand-orange glow */ transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease); } .card--media:hover { transform: translateY(-8px); box-shadow: 0 20px 60px rgba(253, 157, 73, 0.35), 0 6px 18px rgba(253, 157, 73, 0.18); border-color: var(--accent); } .card__media { position: relative; width: 100%; aspect-ratio: 536 / 388; overflow: hidden; background: var(--mist); } .card__media img, .card__media .card__video { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .card__body { padding: 2rem 2rem 2.25rem; display: flex; flex-direction: column; gap: 1rem; flex: 1; } .card__body .card__title { font-family: var(--font-heading); font-weight: 600; font-size: 1.6rem; color: var(--dark); margin: 0; } .card__body .card__desc { color: var(--text-dark); font-size: 1rem; line-height: 1.55; margin: 0; flex: 1; } .card__cta { align-self: flex-start; display: inline-flex; align-items: center; padding: 0.7rem 1.75rem; margin-top: 0.4rem; background: var(--accent); color: #fff; font-family: var(--font-body); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 100px; text-decoration: none; transition: background 0.25s var(--ease), transform 0.25s var(--ease); } .card__cta:hover { background: var(--accent-hover); transform: translateY(-1px); } /* ============================================ THERAPY TOOLS GRID ============================================ */ .tools-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 2rem; } .tool-item { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 2rem 1.5rem; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; transition: all 0.3s var(--ease); } .tool-item:hover { background: rgba(253, 157, 73, 0.08); border-color: var(--accent); transform: translateY(-4px); } .tool-item__icon { font-size: 2rem; color: var(--accent); } .tool-item__name { font-weight: 600; font-size: 0.85rem; letter-spacing: 0.05em; text-transform: uppercase; } /* ============================================ CONDITIONS ============================================ */ .conditions-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 2.5rem; } .condition-tag { padding: 1rem 2rem; border: 2px solid var(--dark); border-radius: 50px; font-weight: 500; font-size: 1rem; color: var(--dark); transition: all 0.3s var(--ease); } .condition-tag:hover { background: var(--dark); color: var(--white); } /* ============================================ TESTIMONIALS ============================================ */ .testimonial { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 4rem; margin-top: 3rem; align-items: center; } .testimonial__mark { font-family: 'Georgia', serif; font-size: 6rem; line-height: 1; color: var(--accent); display: block; margin-bottom: -1rem; } .testimonial blockquote p { font-size: clamp(1rem, 1.2vw, 1.2rem); line-height: 1.8; opacity: 0.85; font-style: italic; } .testimonial__author { display: block; margin-top: 1.5rem; font-style: normal; font-weight: 600; color: var(--accent); font-size: 0.95rem; } .testimonial__nav { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; } .testimonial__btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); background: none; color: var(--white); font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s; } .testimonial__btn:hover { border-color: var(--accent); color: var(--accent); } .testimonial__progress { flex: 1; height: 2px; background: rgba(255,255,255,0.15); border-radius: 2px; overflow: hidden; } .testimonial__progress span { display: block; width: 33%; height: 100%; background: var(--accent); border-radius: 2px; } /* Slide container */ .testimonial__slides { position: relative; height: 220px; } .testimonial__slide { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; pointer-events: none; } .testimonial__slide.active { opacity: 1; pointer-events: all; z-index: 2; } /* Image stack */ .testimonial__media { border-radius: 12px; overflow: hidden; } .testimonial__images { position: relative; width: 100%; height: 450px; } .testimonial__img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s ease; } .testimonial__img.active { opacity: 1; } /* ============================================ VIRTUAL TOUR — Pannellum 360° ============================================ */ .tour-section { background: var(--dark); padding-bottom: 4rem; } .tour-header { text-align: center; margin-bottom: 2.5rem; } .tour-desc { max-width: 600px; margin: 0.8rem auto 0; opacity: 0.7; } .tour-viewer { width: 100%; height: clamp(400px, 55vh, 600px); border-radius: 16px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.06); } /* Override Pannellum default controls */ .tour-viewer .pnlm-controls-container { top: 1.2rem !important; right: 1.5rem !important; left: auto !important; } .tour-viewer .pnlm-zoom-controls, div.pnlm-zoom-controls.pnlm-controls { display: flex !important; flex-direction: column !important; gap: 6px !important; background: none !important; border: none !important; width: auto !important; height: auto !important; min-width: 42px !important; transform: none !important; -webkit-transform: none !important; text-indent: 0 !important; } .tour-viewer .pnlm-zoom-in, .tour-viewer .pnlm-zoom-out { width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; max-width: 42px !important; max-height: 42px !important; padding: 0 !important; margin: 0 !important; background: rgba(37, 50, 58, 0.85) !important; border: 1.5px solid rgba(255,255,255,0.2) !important; border-radius: 10px !important; color: transparent !important; font-size: 0 !important; line-height: 0 !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.3s !important; backdrop-filter: blur(12px) !important; position: relative !important; overflow: hidden !important; text-indent: -9999px !important; box-sizing: border-box !important; } /* + and - icons via pseudo-elements */ .tour-viewer .pnlm-zoom-in::before, .tour-viewer .pnlm-zoom-in::after, .tour-viewer .pnlm-zoom-out::before { content: '' !important; position: absolute !important; background: var(--white) !important; border-radius: 1px !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; } /* Horizontal bar (both + and -) */ .tour-viewer .pnlm-zoom-in::before, .tour-viewer .pnlm-zoom-out::before { width: 16px !important; height: 2.5px !important; } /* Vertical bar (only +) */ .tour-viewer .pnlm-zoom-in::after { width: 2.5px !important; height: 16px !important; } .tour-viewer .pnlm-zoom-in:hover, .tour-viewer .pnlm-zoom-out:hover { background: var(--accent) !important; border-color: var(--accent) !important; transform: scale(1.08) !important; } .tour-viewer .pnlm-fullscreen-toggle-button { width: 42px !important; height: 42px !important; background: rgba(37, 50, 58, 0.85) !important; border: 1.5px solid rgba(255,255,255,0.2) !important; border-radius: 10px !important; margin-top: 6px !important; backdrop-filter: blur(12px) !important; transition: all 0.3s !important; position: relative !important; font-size: 0 !important; text-indent: -9999px !important; overflow: hidden !important; } /* Fullscreen expand icon — 4 corner arrows */ .tour-viewer .pnlm-fullscreen-toggle-button::before, .tour-viewer .pnlm-fullscreen-toggle-button::after { content: '' !important; position: absolute !important; border-color: var(--white) !important; border-style: solid !important; } .tour-viewer .pnlm-fullscreen-toggle-button::before { top: 11px !important; left: 11px !important; width: 8px !important; height: 8px !important; border-width: 2.5px 0 0 2.5px !important; } .tour-viewer .pnlm-fullscreen-toggle-button::after { bottom: 11px !important; right: 11px !important; width: 8px !important; height: 8px !important; border-width: 0 2.5px 2.5px 0 !important; } .tour-viewer .pnlm-fullscreen-toggle-button:hover { background: var(--accent) !important; border-color: var(--accent) !important; } /* Pannellum info bar — force visible and styled */ .tour-viewer .pnlm-panorama-info { display: block !important; position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; top: auto !important; width: 100% !important; text-indent: 0 !important; transform: none !important; -webkit-transform: none !important; background: linear-gradient( to top, rgba(37, 50, 58, 0.92) 0%, rgba(37, 50, 58, 0.5) 60%, transparent 100% ) !important; padding: 5rem 2rem 1.5rem !important; margin: 0 !important; border: none !important; border-radius: 0 0 16px 16px !important; z-index: 2 !important; pointer-events: none !important; } .tour-viewer .pnlm-title-box { position: relative !important; background: none !important; padding: 0 !important; margin: 0 !important; border: none !important; display: block !important; font-size: 0 !important; } .tour-viewer .pnlm-title-box span, .tour-viewer .pnlm-title-box { font-family: var(--font-heading) !important; font-weight: 300 !important; font-size: clamp(1.6rem, 3vw, 2.4rem) !important; color: var(--white) !important; line-height: 1.2 !important; white-space: nowrap !important; } .tour-viewer .pnlm-author-box { display: none !important; } .tour-viewer .pnlm-hot-spot-debug-indicator { display: none; } /* Custom hotspot style */ .tour-viewer .pnlm-tooltip span { background: var(--dark) !important; color: var(--white) !important; border-radius: 8px !important; font-family: var(--font-body) !important; font-size: 0.8rem !important; padding: 0.5rem 1rem !important; box-shadow: 0 8px 30px rgba(0,0,0,0.3) !important; } /* Room navigation pills */ .tour-nav { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin-top: 1.5rem; flex-wrap: wrap; } .tour-nav__btn { display: inline-flex; align-items: center; gap: 6px; padding: 0.6rem 1.2rem; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 100px; color: rgba(255,255,255,0.7); font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; cursor: pointer; transition: all 0.3s var(--ease); } .tour-nav__btn i { font-size: 1rem; } .tour-nav__btn:hover { background: rgba(255,255,255,0.08); color: var(--white); border-color: rgba(255,255,255,0.2); } .tour-nav__btn.active { background: var(--accent); border-color: var(--accent); color: var(--white); } /* ============================================ TEAM — Pixel-perfect from Figma (1480×938) ============================================ */ .team-section { padding: 0; overflow: visible; background: var(--dark); } .team-header { padding: clamp(5.5rem, 7vw, 7rem) clamp(1.5rem, 4vw, 4rem) 0; text-align: center; } .team-header .heading-xl { /* Figma: 52px Light, -2% letter-spacing, line-height 66px */ font-size: clamp(2rem, 3.5vw, 3.25rem); letter-spacing: -0.02em; line-height: 1.27; } .team-header .subtitle { /* Figma: 20px Regular, 1% ls, line-height 30px */ font-size: clamp(0.9rem, 1.35vw, 1.25rem); letter-spacing: 0.01em; line-height: 1.5; max-width: 655px; margin: 0.5rem auto 0; opacity: 0.85; } .team-slider { position: relative; width: 100%; height: calc(100vh - 280px); overflow: visible; margin-top: 0; } .team-slider__track { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; } /* Card container: centered in slider, room for text below */ .team-slider__cards { list-style: none; padding: 0; margin: 0; position: absolute; width: 440px; height: 500px; top: 40%; left: 50%; transform: translate(-50%, -50%); } /* Each card: positioned at center, moved by GSAP */ .team-slide { position: absolute; top: 0; left: 0; width: 440px; height: 500px; border-radius: 10px; overflow: hidden; cursor: grab; user-select: none; will-change: transform, opacity; } .team-slide:active { cursor: grabbing; } .team-slide img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%) saturate(0); transition: filter 0.6s var(--ease); } .team-slide.is-active img { filter: grayscale(0%) saturate(1); } /* Gradient wash on the active card so the name + role text overlaid at the bottom of the photo stays readable regardless of the underlying image. Sides + center cards stay clean. */ .team-slide.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: linear-gradient( to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.45) 50%, rgba(0, 0, 0, 0) 100% ); pointer-events: none; } /* Name + Role + Stats — fixed strip at the very bottom of the viewport, below the active card image so it never overlaps the photo. */ .team-slider__info { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); text-align: center; z-index: 10; width: min(820px, calc(100% - 4rem)); opacity: 0; transition: opacity 0.3s; pointer-events: none; } .team-slider__info.is-visible { opacity: 1; } /* Figma: 38px Light, -2% ls, color #fd9d49 */ .team-slider__name { font-family: var(--font-heading); font-weight: 300; font-size: clamp(1.6rem, 2.2vw, 2.25rem); letter-spacing: -0.02em; line-height: 1; color: var(--accent); margin-bottom: 0.4rem; white-space: nowrap; } /* Figma: 14px SemiBold, 10% ls, color #fff, uppercase */ .team-slider__role { font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white); opacity: 0.78; } /* Arrow buttons — Figma: 70×70 circles, stroke #fff 2px, left/right sides */ .team-slider__btn { position: absolute; top: 38%; transform: translateY(-50%); width: 70px; height: 70px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.3); background: transparent; color: var(--white); font-size: 1.5rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s var(--ease); z-index: 10; } .team-slider__prev { left: clamp(1rem, 4vw, 4rem); } .team-slider__next { right: clamp(1rem, 4vw, 4rem); } .team-slider__btn:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.08); } .team-slider__drag-proxy { visibility: hidden; position: absolute; } /* ============================================ CTA SECTION ============================================ */ .cta-section { position: relative; z-index: 2; display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 4rem; align-items: center; } .cta-section__content { display: flex; flex-direction: column; gap: 1.5rem; } .cta-section__media { border-radius: 8px; overflow: hidden; } .cta-section__media img { width: 100%; height: 400px; object-fit: cover; } /* ============================================ FOOTER ============================================ */ .footer { background: var(--dark-deep); padding: 5rem 0 2rem; position: relative; z-index: 3; } .footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 2rem; } .footer__logo { height: 60px; width: auto; margin-bottom: 1rem; } .footer__tagline { font-style: italic; opacity: 0.6; font-size: 0.95rem; } .footer__col h4 { font-family: var(--font-heading); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 1.2rem; color: var(--accent); } .footer__col a, .footer__col p { display: block; font-size: 0.9rem; opacity: 0.6; margin-bottom: 0.6rem; transition: opacity 0.3s; } .footer__col a:hover { opacity: 1; } .footer__bottom { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; } .footer__lang { display: flex; gap: 0.5rem; } .lang-btn { display: inline-flex; align-items: center; gap: 5px; padding: 0.4rem 0.75rem; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; color: var(--white); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; cursor: pointer; transition: all 0.3s; } .lang-btn__flag { width: 18px; height: 13px; object-fit: cover; border-radius: 2px; } .lang-btn.active, .lang-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--dark); } .footer__social { display: flex; gap: 1rem; } .footer__social a { font-size: 1.3rem; opacity: 0.5; transition: opacity 0.3s, color 0.3s; } .footer__social a:hover { opacity: 1; color: var(--accent); } .footer__legal { display: flex; gap: 1.5rem; font-size: 0.8rem; opacity: 0.4; } /* ============================================ SCROLL REVEAL ANIMATIONS ============================================ */ .reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); } .reveal.is-visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } .reveal-delay-3 { transition-delay: 0.3s; } /* ============================================ RESPONSIVE ============================================ */ @media (max-width: 1280px) { .cards--three { grid-template-columns: repeat(2, 1fr); } .tools-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 1024px) { .nav__menu { display: none; } .nav__cta { display: none; } .nav__burger { display: flex; } .split { grid-template-columns: 1fr; gap: 2.5rem; } .split--reverse .split__media { order: 0; } .cards--three { grid-template-columns: 1fr; } .tools-grid { grid-template-columns: repeat(2, 1fr); } .testimonial { grid-template-columns: 1fr; } .testimonial__media { display: none; } .team-slide { width: 340px; height: 460px; } .team-slider__cards { width: 340px; height: 460px; } .team-slider__btn { width: 56px; height: 56px; } .cta-section { grid-template-columns: 1fr; } .cta-section__media { display: none; } .footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; } } @media (max-width: 640px) { .hero__title-line { font-size: clamp(2rem, 8vw, 3rem); } .hero__title { height: 140px; } .hero__cta-group { flex-direction: column; gap: 1.5rem; } .hero__cta-buttons { flex-direction: column; width: 100%; } .hero__cta-buttons .btn { width: 100%; justify-content: center; } .hero__progress { display: none; } .tools-grid { grid-template-columns: 1fr 1fr; } .team-slide { width: 280px; height: 380px; } .team-slider__cards { width: 280px; height: 380px; } .team-slider__btn { width: 48px; height: 48px; font-size: 1.2rem; } .team-slider__prev { left: 0.5rem; } .team-slider__next { right: 0.5rem; } .footer__grid { grid-template-columns: 1fr; } .footer__bottom { flex-direction: column; align-items: flex-start; } } /* ============================================================ V2 "LIGHT & AIR" — OVERRIDES Lighter sections, bloom, glow, Lake Mist aesthetic ============================================================ */ /* Light section text colors */ .section--light, .section--mist, .section--cream, .section--mist-deep { color: var(--text-dark); } .section--light .heading-xl, .section--light .heading-lg, .section--light .heading-md, .section--mist .heading-xl, .section--mist .heading-lg, .section--mist .heading-md, .section--cream .heading-xl, .section--cream .heading-lg, .section--cream .heading-md, .section--mist-deep .heading-xl, .section--mist-deep .heading-lg, .section--mist-deep .heading-md { color: var(--text-dark); } .section--light .body-lg, .section--mist .body-lg, .section--cream .body-lg, .section--mist-deep .body-lg { color: var(--text-muted); opacity: 1; } /* Cards on light backgrounds */ .section--light .card, .section--mist .card, .section--cream .card { background: var(--white); border: 1px solid rgba(72, 123, 140, 0.08); box-shadow: var(--glow-soft); } .section--light .card:hover, .section--mist .card:hover, .section--cream .card:hover { box-shadow: var(--glow-mist); transform: translateY(-4px); } .section--light .card__title, .section--mist .card__title, .section--cream .card__title { color: var(--text-dark); } .section--light .card__desc, .section--mist .card__desc, .section--cream .card__desc { color: var(--text-muted); } /* Condition tags light */ .section--light .condition-tag, .section--mist .condition-tag, .section--cream .condition-tag { background: var(--white); color: var(--text-dark); border: 1px solid var(--mist-deep); } /* Tool grid items on light */ .section--light .tool-item, .section--mist .tool-item, .section--cream .tool-item { background: var(--white); color: var(--text-dark); border: 1px solid rgba(72, 123, 140, 0.1); } /* Hero scroll hint in light */ .section--light .label, .section--mist .label, .section--cream .label { color: var(--mist-text); } /* Heading accent in light — keep orange but softer */ .section--light .text-accent, .section--mist .text-accent, .section--cream .text-accent { color: var(--accent); } /* Buttons primary on light */ .section--light .btn--outline, .section--mist .btn--outline, .section--cream .btn--outline { color: var(--text-dark); border-color: var(--mist-deep); } .section--light .btn--outline:hover, .section--mist .btn--outline:hover, .section--cream .btn--outline:hover { background: var(--text-dark); color: var(--white); } /* Subtitle lighter */ .section--light .subtitle, .section--mist .subtitle, .section--cream .subtitle { color: var(--text-muted); } /* ============================================ WALL OF WINS — Masonry Grid (Social Proof) ============================================ */ .wall-wins { padding: var(--section-pad) 0; background: linear-gradient(180deg, var(--mist) 0%, var(--soft-white) 100%); overflow: hidden; } .wall-wins__header { text-align: center; max-width: 720px; margin: 0 auto 3.5rem; } .wall-wins__label { font-family: var(--font-body); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; } .wall-wins__grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 10px; gap: 1.25rem; max-width: var(--container); margin: 0 auto; padding: 0 clamp(1.5rem, 4vw, 4rem); } /* Masonry items: different spans for organic layout */ .wall-wins__item { position: relative; border-radius: 16px; overflow: hidden; background: var(--white); box-shadow: var(--glow-soft); transition: all 0.5s var(--ease); cursor: pointer; } .wall-wins__item:hover { box-shadow: var(--glow-mist); transform: translateY(-4px); } .wall-wins__item--tall { grid-row: span 40; } .wall-wins__item--medium { grid-row: span 30; } .wall-wins__item--short { grid-row: span 22; } .wall-wins__item--wide { grid-column: span 2; grid-row: span 25; } .wall-wins__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); } .wall-wins__item:hover .wall-wins__img { transform: scale(1.05); } /* Quote card overlay */ .wall-wins__item--quote { background: var(--white); padding: 2rem; display: flex; flex-direction: column; justify-content: space-between; } .wall-wins__item--quote-accent { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%); color: var(--white); } .wall-wins__quote-mark { font-family: 'Georgia', serif; font-size: 4rem; line-height: 1; color: var(--accent); opacity: 0.4; margin-bottom: -1rem; } .wall-wins__item--quote-accent .wall-wins__quote-mark { color: var(--white); opacity: 0.5; } .wall-wins__quote-text { font-size: 1.05rem; line-height: 1.6; font-style: italic; color: var(--text-dark); margin-bottom: 1rem; } .wall-wins__item--quote-accent .wall-wins__quote-text { color: var(--white); font-style: normal; font-weight: 500; } .wall-wins__quote-author { font-size: 0.85rem; font-weight: 600; color: var(--mist-text); } .wall-wins__item--quote-accent .wall-wins__quote-author { color: rgba(255,255,255,0.85); } .wall-wins__tool-link { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); text-decoration: none; } .wall-wins__item--quote-accent .wall-wins__tool-link { color: var(--white); } /* Social post badge */ .wall-wins__badge { position: absolute; top: 1rem; left: 1rem; padding: 0.4rem 0.75rem; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(8px); color: var(--white); font-size: 0.7rem; font-weight: 600; border-radius: 100px; display: inline-flex; align-items: center; gap: 0.35rem; z-index: 2; } .wall-wins__badge i { font-size: 0.85rem; } /* Hero of the Week highlight */ .wall-wins__hero-week { position: absolute; top: 1rem; right: 1rem; padding: 0.4rem 0.9rem; background: var(--accent); color: var(--white); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 100px; z-index: 2; box-shadow: 0 4px 20px rgba(253, 157, 73, 0.4); } /* Caption at bottom of image */ .wall-wins__caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.25rem 1.25rem 1rem; background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 100%); color: var(--white); font-size: 0.85rem; line-height: 1.4; font-weight: 500; } @media (max-width: 900px) { .wall-wins__grid { grid-template-columns: repeat(2, 1fr); } .wall-wins__item--wide { grid-column: span 2; } } /* ============================================ PATH TO PROGRESS — Enhanced 4-step CTA ============================================ */ .path-progress { padding: var(--section-pad) 0; background: var(--soft-white); position: relative; overflow: hidden; } .path-progress::before { content: ''; position: absolute; top: -200px; right: -200px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(253, 157, 73, 0.08) 0%, transparent 70%); pointer-events: none; } .path-progress__header { text-align: center; max-width: 720px; margin: 0 auto 4rem; position: relative; } .path-progress__label { font-family: var(--font-body); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; } .path-progress__steps { max-width: var(--container); margin: 0 auto; padding: 0 clamp(1.5rem, 4vw, 4rem); display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; position: relative; } /* Connector line behind cards */ .path-progress__steps::before { content: ''; position: absolute; top: 72px; left: calc(1.5rem + 60px); right: calc(1.5rem + 60px); height: 2px; background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 30%, var(--mist-deep) 30%, var(--mist-deep) 100%); z-index: 0; } .path-step { position: relative; z-index: 1; background: var(--white); border-radius: 16px; padding: 2rem 1.5rem; box-shadow: var(--glow-soft); transition: all 0.4s var(--ease); text-align: center; } .path-step:hover { box-shadow: var(--glow-mist); transform: translateY(-6px); } .path-step__number { width: 64px; height: 64px; margin: 0 auto 1.5rem; background: var(--white); border: 2px solid var(--mist-deep); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 300; font-size: 1.6rem; color: var(--text-dark); transition: all 0.4s var(--ease); } .path-step:hover .path-step__number, .path-step.active .path-step__number { background: var(--accent); border-color: var(--accent); color: var(--white); box-shadow: var(--glow-sun); } .path-step__icon { font-size: 3.2rem; color: var(--accent); margin-bottom: 0.85rem; display: inline-block; line-height: 1; } .path-step__title { font-family: var(--font-heading); font-weight: 500; font-size: 1.15rem; color: var(--text-dark); margin-bottom: 0.6rem; line-height: 1.3; } .path-step__desc { font-size: 0.88rem; line-height: 1.6; color: var(--text-muted); } .path-progress__cta { text-align: center; margin-top: 4rem; position: relative; } .path-progress__cta-text { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 1rem; } .path-progress .btn--primary { box-shadow: var(--glow-sun); padding: 1.1rem 2.5rem; font-size: 0.85rem; } @media (max-width: 900px) { .path-progress__steps { grid-template-columns: 1fr; } .path-progress__steps::before { display: none; } } /* ============================================ SKILL TREE PREVIEW (Phase 2 teaser for team) Sits below the active team-slide photo; bars laid out 2 × 2 so the strip stays compact and the photo is never overlapped on 1920×1080. ============================================ */ .skill-tree { padding: 1rem 0 0; border-top: 1px solid rgba(255,255,255,0.08); margin-top: 0.85rem; /* 2 columns × 2 rows of bars */ display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.5rem; row-gap: 0.45rem; } .skill-tree__label { grid-column: 1 / -1; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.4rem; display: flex; align-items: center; justify-content: center; gap: 0.4rem; } /* PHASE 2 badge removed — no longer relevant per design feedback. */ .skill-bar { display: grid; grid-template-columns: 90px 1fr 38px; align-items: center; gap: 0.7rem; margin: 0; } .skill-bar__name { font-size: 0.92rem; color: rgba(255,255,255,0.85); font-weight: 500; letter-spacing: 0.01em; } .skill-bar__track { height: 8px; background: rgba(255,255,255,0.1); border-radius: 100px; overflow: hidden; } .skill-bar__fill { height: 100%; background: linear-gradient(90deg, var(--accent) 0%, #ffb873 100%); border-radius: 100px; transform-origin: left; } .skill-bar__value { font-size: 0.92rem; color: var(--accent); font-weight: 700; text-align: right; letter-spacing: 0.01em; } /* ============================================ PARENT QUOTE CARDS linked to TOOLS ============================================ */ .tool-quote { margin-top: 2rem; padding: 1.5rem; background: rgba(253, 157, 73, 0.08); border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; } .tool-quote__text { font-size: 0.9rem; font-style: italic; color: var(--text-dark); line-height: 1.6; margin-bottom: 0.6rem; } .tool-quote__author { font-size: 0.75rem; font-weight: 600; color: var(--accent); letter-spacing: 0.05em; } /* ============================================ HERO v2 — Bloom / Sun-drenched feel ============================================ */ /* v2 hero — force video to fully cover the viewport on all aspect ratios. The dark strips on the left & right (visible most when the window is stretched wide) come from the source video itself: the file has darker sky/horizon content on its outer edges, and on widescreen viewports object-fit: cover scales the video so those edges land at the viewport sides. Fix: scale the video up (1.18) so its outer ~9% gets cropped off-screen, leaving only the bright center area visible. White bg fallback under it just in case. */ .hero-v2, .hero-v2 .hero__bg { background: #ffffff !important; } .hero-v2 .hero__bg { left: 0; right: 0; width: 100% !important; overflow: hidden; } .hero-v2 .hero__video { background: transparent !important; position: absolute !important; top: 50% !important; left: 50% !important; width: 100vw !important; height: 100vh !important; min-width: 100vw; min-height: 100vh; object-fit: cover; object-position: center center; /* Crop the dark outer ~9% on each side that's baked into the video frame */ transform: translate(-50%, -50%) scale(1.18); transform-origin: center center; } /* No dark overlay on v2 — earlier rgba(26,37,43,...) tint made the sides/edges of the video look gray. Keep only a soft bottom-only white wash so text stays readable but the video shows true colors. */ .hero-v2 .hero__overlay { background: linear-gradient( 180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 55%, rgba(255, 255, 255, 0.25) 100% ) !important; } .hero-v2 .hero__title { text-shadow: 0 4px 60px rgba(253, 157, 73, 0.3); font-weight: 300 !important; } /* Force hero text always white (v2 body is dark text) */ .hero-v2, .hero-v2 .hero__title, .hero-v2 .hero__title-line, .hero-v2 .hero__tagline, .hero-v2 .hero__cta-label, .hero-v2 .hero__cta-desc, .hero-v2 .hero__scroll-hint { color: var(--white) !important; } .hero-v2 .hero__title-line { color: var(--white) !important; } /* Soft transition bridge — fades hero straight into the white #problem section below. Earlier this faded to var(--mist) which created a faint blue-gray seam against the pure-white .problem-v2 background. */ .hero-v2::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 420px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.18) 30%, rgba(255, 255, 255, 0.55) 60%, rgba(255, 255, 255, 0.9) 85%, #ffffff 100%); pointer-events: none; z-index: 2; } /* Problem section top fade: starts with the SAME mist color so no hard edge */ #problem.section--mist { background: linear-gradient(180deg, var(--mist) 0%, var(--mist) 30%, var(--soft-white) 100%); } /* Remove section top padding so the gradient bridges directly */ .hero-v2 + .section--mist { padding-top: 3rem; } /* Glow utility */ .glow-sun { box-shadow: var(--glow-sun); } .glow-mist { box-shadow: var(--glow-mist); } /* ============================================ V2 SCROLLED NAV — White Glassmorphism + Orange Glow ============================================ */ /* Utility bar (top row) — light glass */ .nav.scrolled .nav__utility { background: rgba(255, 255, 255, 0.75) !important; backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid rgba(72, 123, 140, 0.12) !important; } .nav.scrolled .nav__utility-link { color: var(--text-muted) !important; } .nav.scrolled .nav__utility-link:hover { color: var(--accent) !important; } /* Main nav bar — white glass with orange bottom glow */ .nav.scrolled .nav__bar { background: rgba(255, 255, 255, 0.72) !important; backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border-radius: 0 !important; border-bottom: 1px solid rgba(72, 123, 140, 0.1); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 20px 40px -10px rgba(253, 157, 73, 0.25), 0 4px 30px -2px rgba(72, 123, 140, 0.1); } /* Logo — swap to dark version for contrast on white */ .nav.scrolled .nav__logo img { filter: brightness(0) saturate(100%) invert(12%) sepia(14%) saturate(818%) hue-rotate(158deg) brightness(95%) contrast(88%); /* approximates #25323a from white source logo */ transition: filter 0.4s var(--ease); } /* Menu links — dark on white */ .nav.scrolled .nav__link-group a { color: var(--text-dark) !important; opacity: 0.75; } .nav.scrolled .nav__link-group a:hover { opacity: 1; color: var(--accent) !important; } /* Language dropdown — adapt for light bg */ .nav.scrolled .nav__lang-toggle { color: var(--text-muted); } .nav.scrolled .nav__lang-dropdown { background: rgba(255, 255, 255, 0.95); border: 1px solid rgba(72, 123, 140, 0.15); box-shadow: 0 12px 40px rgba(26, 37, 43, 0.15); } .nav.scrolled .nav__lang-opt { color: var(--text-muted); } .nav.scrolled .nav__lang-opt:hover { background: rgba(72, 123, 140, 0.08); color: var(--text-dark); } .nav.scrolled .nav__lang-opt.active { color: var(--accent); } /* CTA keeps orange but with extra glow */ .nav.scrolled .nav__cta { box-shadow: 0 6px 24px rgba(253, 157, 73, 0.45), 0 0 0 1px rgba(253, 157, 73, 0.3); } .nav.scrolled .nav__cta:hover { box-shadow: 0 10px 30px rgba(253, 157, 73, 0.6), 0 0 0 1px rgba(253, 157, 73, 0.5); } /* Burger lines dark on white */ .nav.scrolled .nav__burger span { background: var(--text-dark); } /* ============================================ 3D GAUSSIAN SPLAT — Portal Office Tour Demo ============================================ */ .splat { background: linear-gradient(180deg, var(--dark-deep) 0%, var(--dark) 100%); color: var(--white); position: relative; overflow: hidden; } /* Pin container — full-viewport stage. MUST have an opaque background: when GSAP pins this element it becomes position:fixed and the underlying .splat section is no longer behind it. Without a bg here, you see the previous section bleeding through gaps between bento cells. */ .splat__pin { position: relative; width: 100%; height: 100vh; overflow: hidden; background: linear-gradient(180deg, var(--dark-deep) 0%, var(--dark) 100%); } /* "Our Location" heading — fixed-style overlay at the top of the pinned stage. z-index is higher than .splat__center (2) and the iframe so it stays visible during the bento zoom. pointer-events:none so it never blocks the Enter/Exit Tour button. Generous top padding gives the section breathing room below the previous (cream) Stories section. */ .splat__heading { position: absolute; top: 0; left: 0; right: 0; z-index: 50; padding: clamp(2.5rem, 5vh, 4rem) clamp(1.5rem, 4vw, 4rem) clamp(2.5rem, 5vh, 3.5rem); text-align: center; pointer-events: none; /* Soft dark gradient behind the text so it stays readable when the panorama iframe slides up underneath during zoom. */ background: linear-gradient( to bottom, rgba(26, 37, 43, 0.9) 0%, rgba(26, 37, 43, 0.6) 65%, rgba(26, 37, 43, 0) 100% ); } .splat__eyebrow { font-family: var(--font-body); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--accent); margin: 0 0 0.6rem 0; } .splat__title { font-family: var(--font-heading); font-weight: 300; font-size: clamp(1.75rem, 3vw, 2.75rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--white); margin: 0; } /* ============================================ TOUR BENTO — 7 items, full-viewport edge-to-edge Layout: ┌────┬─────TOP IMG─────┬────┐ │ ├─────────────────┤ │ │ L1 │ │ R1 │ │ │ PANORAMA │ │ │ L2 │ │ R2 │ │ ├─────────────────┤ │ │ └───BOTTOM IMG────┘ │ └────────────────────────────┘ L1/L2 flush to left edge; R1/R2 flush to right edge; top, panorama, bottom share the SAME width (center column). Zoom: grow bento 100vw → 200vw so peripherals slide off viewport while panorama (center col = 100vw) fills the screen. ============================================ */ .splat__bento { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; display: grid; grid-template-columns: 1fr 2.5fr 1fr; grid-template-rows: 1fr 2fr 2fr 1fr; gap: 10px; /* fixed pixel gap — never grows during zoom */ will-change: width, height, top, left; /* NO transform — would break position:fixed on button inside */ } .splat__cell { position: relative; overflow: hidden; border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); will-change: opacity; } .splat__cell img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Grid placement */ .cell-top { grid-column: 2; grid-row: 1; } .cell-bottom { grid-column: 2; grid-row: 4; } .cell-lt { grid-column: 1; grid-row: 1 / 3; } /* spans 2 rows, flush left */ .cell-lb { grid-column: 1; grid-row: 3 / 5; } .cell-rt { grid-column: 3; grid-row: 1 / 3; } /* spans 2 rows, flush right */ .cell-rb { grid-column: 3; grid-row: 3 / 5; } /* Center panorama: middle column, spans 2 middle rows. position:relative makes it the containing block for the absolute button inside. */ .splat__center { grid-column: 2; grid-row: 2 / 4; position: relative; overflow: hidden; border-radius: 8px; z-index: 2; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 30px 80px rgba(0, 0, 0, 0.55); background: #000; /* dark fallback during iframe load */ } /* In fullscreen the container is the root element — no radius/shadow */ .splat__center:fullscreen, .splat__center:-webkit-full-screen { border-radius: 0; width: 100vw; height: 100vh; box-shadow: none; } .splat__center:fullscreen::after, .splat__center:-webkit-full-screen::after { display: none; } .splat__center::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.3); z-index: 3; border-radius: inherit; } /* iframe fills the center — pointer-events off by default so scroll works */ .splat__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: none; display: block; background: #000; pointer-events: none; /* scroll has priority */ } .splat__center.is-active .splat__frame { pointer-events: auto; /* after user clicks reveal button */ } /* ============================================ REVEAL BUTTON — appears at bottom after full zoom ============================================ */ .splat__reveal-btn { position: fixed; /* viewport-relative so it stays visible during zoom */ bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(20px); display: inline-flex; align-items: center; gap: 0.65rem; padding: 1rem 2rem; background: var(--accent); color: var(--white); border: none; border-radius: 100px; font-family: var(--font-body); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; opacity: 0; visibility: hidden; pointer-events: none; z-index: 2147483647; /* max — above everything, including in FS */ box-shadow: 0 10px 40px rgba(253, 157, 73, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.15) inset; transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), visibility 0.45s; } .splat__reveal-btn.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .splat__reveal-btn.is-visible:hover { background: var(--accent-hover); transform: translateX(-50%) translateY(-3px); box-shadow: 0 16px 50px rgba(253, 157, 73, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.2) inset; } .splat__reveal-btn i { font-size: 1.1rem; } /* v4: .splat__gate removed — clean layout per client feedback */ /* Ambient glow behind the stage */ .splat::before { content: ''; position: absolute; top: 50%; left: 50%; width: 900px; height: 900px; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(253, 157, 73, 0.08) 0%, transparent 60%); pointer-events: none; } /* v4: Old layout classes removed — bento flex stack above handles everything */ /* Hide sticky nav while the tour zoom is active — it distracts from the pinned view */ body.tour-zoomed .nav { opacity: 0; pointer-events: none; transform: translateY(-100%); transition: all 0.4s var(--ease); } /* Fullscreen mode (browser Fullscreen API) */ .splat__center:fullscreen { width: 100vw; height: 100vh; aspect-ratio: auto; } .splat__center:fullscreen .splat__frame { width: 100%; height: 100%; } .splat__center:fullscreen::after { display: none; } /* ========================================================= FULLSCREEN TOUR MODE — body.tour-fs class controls layout Activated when documentElement enters FS (or fallback class). Hides everything except the tour section + Exit button. ========================================================= */ body.tour-fs > *:not(#tour):not(.splat__reveal-btn), body.tour-fs-fallback > *:not(#tour):not(.splat__reveal-btn) { display: none !important; } body.tour-fs #tour, body.tour-fs-fallback #tour { position: fixed !important; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 99998; padding: 0; } body.tour-fs .splat__pin, body.tour-fs-fallback .splat__pin { width: 100vw; height: 100vh; overflow: visible; } body.tour-fs .splat__bento, body.tour-fs-fallback .splat__bento { width: 100vw !important; height: 100vh !important; top: 0 !important; left: 0 !important; grid-template-columns: 0fr 1fr 0fr !important; /* hide side columns */ grid-template-rows: 0fr 1fr 1fr 0fr !important; /* hide top/bottom rows */ gap: 0 !important; } body.tour-fs .splat__cell, body.tour-fs-fallback .splat__cell { display: none !important; } body.tour-fs .splat__center, body.tour-fs-fallback .splat__center { border-radius: 0 !important; box-shadow: none !important; } body.tour-fs .splat__center::after, body.tour-fs-fallback .splat__center::after { display: none; } /* Exit button always visible in FS */ body.tour-fs .splat__reveal-btn, body.tour-fs-fallback .splat__reveal-btn { position: fixed !important; bottom: 2rem !important; left: 50% !important; transform: translateX(-50%) !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; z-index: 99999; } body.tour-fs .splat__reveal-btn:hover, body.tour-fs-fallback .splat__reveal-btn:hover { transform: translateX(-50%) translateY(-3px) !important; } /* Fallback mode: add dark backdrop behind tour (when native FS API fails) */ body.tour-fs-fallback::before { content: ''; position: fixed; inset: 0; background: #000; z-index: 99997; } @media (max-width: 900px) { .splat__bento { width: 90vw; } .splat__cell { aspect-ratio: 16 / 6; } .splat__center { aspect-ratio: 16 / 9; } } /* ============================================================ PROBLEM V2 — White BG, dark text, diagonal image, orange CTA Figma ref: 813:392 (1920×960, inverted from dark to light) ============================================================ */ .problem-v2 { background: #ffffff; color: var(--text-dark); padding: 0; overflow: hidden; position: relative; } .problem-v2__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; min-height: min(960px, 85vh); /* Full bleed — image glues to the viewport right edge, no centered cap */ width: 100%; max-width: none; margin: 0; } /* LEFT content */ .problem-v2__content { padding: clamp(3rem, 6vw, 7rem) clamp(1.5rem, 4vw, 5rem) clamp(3rem, 6vw, 7rem) clamp(1.5rem, 4vw, 7rem); max-width: 720px; z-index: 2; position: relative; } .problem-v2__title, .problem-v2__subtitle { font-family: var(--font-heading); font-weight: 300; font-size: clamp(2rem, 4.2vw, 3.75rem); /* 60px at full */ line-height: 1.1; letter-spacing: -0.02em; margin: 0; } .problem-v2__title { color: var(--text-dark); margin-bottom: 0.35rem; } .problem-v2__subtitle { color: var(--text-dark); margin-bottom: 2rem; } .problem-v2__title em, .problem-v2__subtitle em { font-style: italic; color: var(--accent); font-weight: 400; } .problem-v2__body { font-family: var(--font-body); font-weight: 300; font-size: 1.05rem; line-height: 1.65; color: var(--text-muted); margin-bottom: 2.5rem; max-width: 560px; } .problem-v2__body p { margin-bottom: 1rem; } .problem-v2__body p:last-child { margin-bottom: 0; } /* Condition trigger chips — highlight on interaction */ .problem-v2__body .condition-trigger { color: var(--text-dark); font-weight: 500; border-bottom: 1px dashed rgba(253, 157, 73, 0.5); cursor: pointer; transition: color 0.3s, border-color 0.3s; white-space: nowrap; } .problem-v2__body .condition-trigger:hover, .problem-v2__body .condition-trigger.active { color: var(--accent); border-bottom-color: var(--accent); } /* CTA pill — orange, brand */ .problem-v2__cta { display: inline-flex; align-items: center; justify-content: center; padding: 14px 32px; background: var(--accent); color: var(--text-dark); font-family: var(--font-body); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; border-radius: 100px; transition: all 0.3s var(--ease); box-shadow: 0 8px 24px rgba(253, 157, 73, 0.25); } .problem-v2__cta:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(253, 157, 73, 0.4); } /* RIGHT media with logo-wing clip (matches Figma). Top/bottom padding = breathing space. Image glues to viewport right edge. */ .problem-v2__media { position: relative; align-self: stretch; height: 100%; min-height: 600px; padding: clamp(3rem, 6vw, 6rem) 0; /* breathing room top + bottom */ box-sizing: border-box; } .problem-v2__clip { /* Relative (not absolute) so it respects the parent's top/bottom padding — creates the breathing room above and below the image */ position: relative; width: 100%; height: 100%; min-height: inherit; /* Logo-wing mask — exact path exported from Figma (813:392 mask Vector 1). Derived from Apexa QLA logo wing shape — brand signature. */ clip-path: url(#problem-wing-mask); -webkit-clip-path: url(#problem-wing-mask); overflow: hidden; } /* Hide the inline SVG defs container (zero size but still rendered) */ .problem-v2__mask-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; } .problem-v2__clip .condition-images { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; aspect-ratio: auto; } .problem-v2__clip .condition-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s var(--ease); } .problem-v2__clip .condition-img.active { opacity: 1; } /* Responsive */ @media (max-width: 900px) { .problem-v2__layout { grid-template-columns: 1fr; min-height: auto; } .problem-v2__media { min-height: 400px; order: -1; } .problem-v2__clip { /* On mobile the image stacks on top — use the same wing mask but flipped so the diagonal cuts at the bottom instead of the left side */ clip-path: url(#problem-wing-mask-mobile); -webkit-clip-path: url(#problem-wing-mask-mobile); } .problem-v2__content { padding: 3rem 1.5rem; } } /* SENSOPHYSIO V2 — REMOVED (spec v11: brand retired, merged into ORCA) */ /* ============================================================ THERAPY TOOLS — Three.js 3D circle text. Code adapted from github.com/davidfaure/3d-text-circle-animation-codrops (Codrops "Building an On-Scroll 3D Circle Text Animation"). Canvas is sticky-pinned for the section duration; JS feeds it scroll y. ============================================================ */ .therapy-tools { background: #ffffff; color: var(--text-dark); position: relative; /* Taller section (280vh) gives more scroll runway for the rotation — each item gets ~150 actual scroll px of dwell time, so user can stop on / settle into any item rather than blowing past 2-3 at once. Inner stage is CSS-sticky (no GSAP pin → no cascade conflict with splat). */ height: 280vh; } /* Wrapper that pins via sticky — holds canvas + header + center mask + detail */ .therapy-tools__stage { position: sticky; top: 0; height: 100vh; width: 100%; overflow: hidden; } /* Header pulled to the top-left, out of the circle's center area. `top` is generous so the title clears the sticky nav (which is ~90px tall when scrolled). */ .therapy-tools__header { position: absolute; top: clamp(6rem, 15vh, 9rem); left: clamp(1.5rem, 5vw, 5rem); text-align: left; z-index: 3; pointer-events: none; max-width: 50vw; } .therapy-tools__eyebrow { font-family: var(--font-body); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin: 0 0 0.5rem 0; } .therapy-tools__title { font-family: var(--font-heading); font-weight: 300; font-size: clamp(2.4rem, 5vw, 4.5rem); line-height: 1.05; letter-spacing: -0.02em; margin: 0; color: var(--text-dark); } /* Canvas fills the section. GSAP pins the whole section, so this stays in place while the rotation runs and unpins on its own afterwards. */ .therapy-tools__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; } /* CENTER — circular photo mask sits in the middle of the ring. Pointer-events: none so it doesn't capture mouse from the canvas. */ .therapy-tools__center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; pointer-events: none; } .therapy-tools__circle { /* Tighter image — pairs with the smaller RING_RADIUS so the ring sits close to the photo without long item names spilling off-screen. */ width: clamp(240px, 28vh, 380px); aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; background: #f0ece6; box-shadow: 0 24px 60px rgba(37, 50, 58, 0.15), 0 5px 14px rgba(37, 50, 58, 0.08), 0 0 0 1px rgba(37, 50, 58, 0.05); position: relative; } .therapy-tools__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s var(--ease); } .therapy-tools__photo.is-active { opacity: 1; } /* DETAIL panel — bottom-left, swaps text + CTA per active therapy */ .therapy-tools__detail { position: absolute; left: clamp(1.5rem, 5vw, 5rem); bottom: clamp(2rem, 5vw, 4rem); max-width: min(420px, 36vw); z-index: 3; } .therapy-tools__name { font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.15; letter-spacing: -0.01em; color: var(--text-dark); margin: 0 0 0.6rem 0; /* Cross-fade animation when name changes — driven by .is-changing class */ transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); } .therapy-tools__desc { font-family: var(--font-body); font-size: 0.95rem; line-height: 1.55; color: rgba(37, 50, 58, 0.78); margin: 0 0 1.25rem 0; transition: opacity 0.25s var(--ease) 0.05s, transform 0.25s var(--ease) 0.05s; } .therapy-tools__cta { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-heading); font-weight: 600; font-size: 0.875rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dark); text-decoration: none; padding-bottom: 0.4rem; border-bottom: 1.5px solid var(--accent); transition: color 0.25s var(--ease), gap 0.25s var(--ease); } .therapy-tools__cta:hover { color: var(--accent); gap: 0.85rem; } /* Crossfade hook — JS adds .is-changing for ~250ms when therapy swaps */ .therapy-tools__detail.is-changing .therapy-tools__name, .therapy-tools__detail.is-changing .therapy-tools__desc { opacity: 0; transform: translateY(6px); } /* Mobile: stack circle + detail panel */ @media (max-width: 760px) { .therapy-tools__circle { width: 50vw; } .therapy-tools__detail { position: static; margin: clamp(2rem, 5vw, 3rem) auto 0; text-align: center; max-width: 90vw; padding: 0 1.25rem 2rem; } } /* Hover state on a ring item — JS adds this class via raycasting */ .therapy-tools.is-hovering { cursor: pointer; } /* ============================================================ CUSTOM CURSOR — Codrops Sketch 018 (turbulence + delayed twin). Two SVG circles follow the pointer; on hover-trigger the inner ring gets a feTurbulence + feDisplacementMap distortion via JS. Inner (radius 20, with filter) → dark navy. Outer (radius 24, [data-amt]) → brand accent orange. Hidden on touch (no-pointer-fine) devices. ============================================================ */ .cursor, .cursor-dot { display: none; } /* default off — only shown on fine pointers */ @media (any-pointer: fine) { /* Hide the native arrow everywhere — the orange dot replaces it. */ html, body { cursor: none; } a, button, [role="button"], input, textarea, select { cursor: none; } .cursor { position: fixed; top: 0; left: 0; display: block; pointer-events: none; z-index: 10000; } .cursor__inner { fill: none; stroke-width: 1.2px; } /* Inner cursor — dark navy (filter target) */ .cursor:not([data-amt]) .cursor__inner { stroke: var(--text-dark); } /* Outer cursor — orange accent (delayed twin) */ .cursor[data-amt] .cursor__inner { stroke: var(--accent); } /* Orange filled dot that REPLACES the native arrow. Tracks pointer 1:1 (no lerp) via JS so it always sits exactly where the user is pointing. The other two ring cursors trail behind it. */ .cursor-dot { position: fixed; top: 0; left: 0; display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); pointer-events: none; z-index: 10001; will-change: transform; /* tiny outline so the dot stays visible on busy white photos too */ box-shadow: 0 0 0 1px rgba(37, 50, 58, 0.15); } .no-js .cursor, .no-js .cursor-dot { display: none; } } /* ============================================================ FOOTER V2 — Figma ref: 926:1049 (1920×525, dark navy) ============================================================ */ .footer-v2 { background: var(--text-dark); /* #25323A */ color: #ffffff; padding: clamp(3rem, 5.5vw, 5.5rem) clamp(1.5rem, 7vw, 8.75rem) 0; position: relative; font-family: var(--font-body); } .footer-v2__inner { display: grid; grid-template-columns: minmax(200px, 260px) 1fr auto; gap: clamp(2rem, 5vw, 5rem); align-items: start; padding-bottom: clamp(2.5rem, 4vw, 4rem); } /* BRAND */ .footer-v2__brand { display: flex; flex-direction: column; gap: 2rem; } .footer-v2__logo { width: 180px; max-width: 100%; height: auto; display: block; } .footer-v2__tagline { font-family: var(--font-body); font-size: 15px; font-style: italic; line-height: 1.5; color: #ffffff; margin: 0; max-width: 200px; } /* NAV COLUMNS */ .footer-v2__nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); justify-content: start; } .footer-v2__col { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; } .footer-v2__heading { font-family: var(--font-body); font-size: 15px; font-weight: 700; letter-spacing: 0.04em; color: var(--accent); /* orange */ margin: 0 0 1rem 0; text-transform: uppercase; } .footer-v2__col a { font-size: 15px; font-weight: 600; color: rgba(137, 133, 129, 1); /* muted gray from Figma (0.533, 0.522, 0.506) */ text-decoration: none; padding: 0.25rem 0; transition: color 0.25s var(--ease); line-height: 1.5; } .footer-v2__col a:hover { color: #ffffff; } /* LANGUAGE SWITCHER */ .footer-v2__lang { justify-self: end; position: relative; } .footer-v2__lang-btn { display: inline-flex; align-items: center; gap: 0.75rem; background: transparent; border: none; color: #ffffff; font-family: var(--font-body); font-size: 15px; font-weight: 600; cursor: pointer; padding: 0.25rem 0; transition: opacity 0.25s var(--ease); } .footer-v2__lang-btn:hover { opacity: 0.75; } .footer-v2__flag { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; object-position: center; } .footer-v2__lang-btn i { font-size: 1.1rem; opacity: 0.8; transition: transform 0.3s var(--ease); } .footer-v2__lang[data-open="true"] .footer-v2__lang-btn i { transform: rotate(180deg); } /* Dropdown menu — drops DOWN from the button (avoids z-index clipping above) */ .footer-v2__lang-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 180px; margin: 0; padding: 0.4rem 0; list-style: none; background: #ffffff; color: var(--text-dark); border-radius: 10px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0s linear 0.2s; z-index: 200; /* above bottom strip, divider, social icons */ } .footer-v2__lang[data-open="true"] .footer-v2__lang-menu { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; } /* When dropdown is open, promote the whole switcher above any siblings that might create their own stacking context (e.g. the bottom strip) */ .footer-v2__lang[data-open="true"] { z-index: 200; } .footer-v2__lang-menu li { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 1rem; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.15s var(--ease); } .footer-v2__lang-menu li img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; } .footer-v2__lang-menu li:hover { background: rgba(253, 157, 73, 0.12); } .footer-v2__lang-menu li[aria-selected="true"] { color: var(--accent); } /* DIVIDER */ .footer-v2__divider { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.15); margin: 0; } /* BOTTOM STRIP */ .footer-v2__bottom { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.5rem 0 clamp(1.5rem, 2vw, 2rem); flex-wrap: wrap; } .footer-v2__location { display: flex; align-items: center; gap: 1rem; } .footer-v2__flag-ch svg { display: block; border-radius: 2px; flex-shrink: 0; } .footer-v2__location p { font-family: var(--font-body); font-size: 1.125rem; /* 18-20px per Figma */ font-weight: 400; color: #ffffff; margin: 0; line-height: 1.5; } /* SOCIAL ICONS — outlined circles */ .footer-v2__social { display: flex; gap: 0.75rem; } .footer-v2__soc-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid #ffffff; color: #ffffff; text-decoration: none; font-size: 1rem; transition: background 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease); } .footer-v2__soc-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--text-dark); transform: translateY(-2px); } /* Responsive */ @media (max-width: 1100px) { .footer-v2__inner { grid-template-columns: 1fr; gap: 2.5rem; } .footer-v2__lang { justify-self: start; } } @media (max-width: 720px) { .footer-v2__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } .footer-v2__bottom { flex-direction: column; align-items: flex-start; gap: 1.5rem; } .footer-v2__location p { font-size: 1rem; } } @media (max-width: 480px) { .footer-v2__nav { grid-template-columns: 1fr; } } /* ============================================ APEXA STORIES — merged Testimonials + Wall of Wins Left: isometric masonry grid (Codrops "Format is Everything" deco4 port). Right: testimonial card that swaps on hover. ============================================ */ .apexa-stories { background: var(--cream); /* Generous bottom space — the iso grid's bottom row (after rotateZ tilt + scale) drops below the layout's vertical center, so without ample padding the cards visually crash into the dark Virtual Tour section that follows. Top padding is moderate; bottom is large. */ padding: clamp(2.5rem, 5vh, 4rem) 0 clamp(11rem, 18vh, 15rem); overflow: hidden; position: relative; height: auto; min-height: 760px; } .apexa-stories__layout { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; width: 100%; max-width: 1700px; height: 100%; margin: 0 auto; padding: 0 clamp(1.5rem, 4vw, 4rem); } /* Let the iso grid bleed past the page's left padding to the viewport edge — mirrors the Codrops "Format is Everything" layout. Only ~60px of bleed so all 3 grid columns stay visible. */ .apexa-stories__grid-side .isolayer--apexa { margin-left: calc(-1 * clamp(1.5rem, 4vw, 4rem) - 60px); } .apexa-stories__grid-side { position: relative; width: 100%; height: 100%; } .apexa-stories__content-side { position: relative; z-index: 5; padding-right: clamp(0rem, 2vw, 2rem); } .apexa-stories__label { font-family: var(--font-body); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--accent); margin-bottom: 0.75rem; } .apexa-stories__title { font-family: var(--font-heading); font-weight: 300; font-size: clamp(1.65rem, 2.6vw, 2.4rem); line-height: 1.12; letter-spacing: -0.02em; color: var(--text-dark); margin-bottom: 0.75rem; } .apexa-stories__title em { font-family: var(--f-serif); font-style: italic; font-weight: 400; color: var(--accent); } .apexa-stories__subtitle { font-size: 0.95rem; line-height: 1.5; color: var(--text-muted); max-width: 480px; margin-bottom: 1.5rem; } /* The card that holds the swapping quote + photo. Sized to fit without internal scrolling on a 1080p viewport. */ .apexa-stories__card { position: relative; background: #fff; border-radius: 14px; padding: clamp(1.25rem, 1.8vw, 1.75rem); padding-top: clamp(2rem, 2.6vw, 2.5rem); box-shadow: 0 30px 70px rgba(26, 37, 43, 0.08), 0 6px 20px rgba(26, 37, 43, 0.04); } .apexa-stories__mark { position: absolute; top: -0.4rem; left: clamp(1.25rem, 1.8vw, 1.75rem); font-family: var(--f-serif); font-size: 5.5rem; line-height: 1; color: var(--accent); opacity: 0.85; pointer-events: none; user-select: none; } .apexa-stories__photos { position: relative; width: 100%; aspect-ratio: 16 / 8; border-radius: 10px; overflow: hidden; margin-bottom: 1rem; background: var(--mist); } .apexa-stories__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; transition: opacity 0.5s var(--ease); } .apexa-stories__photo.active { opacity: 1; } .apexa-stories__slides { position: relative; min-height: 170px; } .apexa-stories__slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 0.5s var(--ease); } .apexa-stories__slide.active { opacity: 1; pointer-events: auto; } .apexa-stories__slide blockquote { font-family: var(--font-heading); font-weight: 300; font-size: clamp(0.92rem, 1vw, 1rem); line-height: 1.5; color: var(--text-dark); margin: 0 0 0.85rem 0; } .apexa-stories__slide blockquote p { margin: 0; } .apexa-stories__author { display: block; font-style: normal; font-family: var(--font-body); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); } /* ---- Isometric grid (port of Codrops deco4) ---- Anchored to the LEFT edge of .apexa-stories__grid-side so the grid bleeds toward the page's left edge (matches the Codrops demo where the isometric stack sits flush-left and runs off-canvas). */ .isolayer { position: absolute; top: 50%; left: 0; transform-origin: 0% 50%; } /* 3 cols × 4 rows. Item width 420px incl 14px padding both sides; 420 × 3 = 1260 → use 1290 for masonry safety. JS handles masonry packing only; the static 3D transform below is applied via CSS so it doesn't depend on JS having booted yet. */ .isolayer--apexa { width: 1290px; height: 1320px; transform-style: preserve-3d; transform: perspective(2600px) translate(-90px, -50%) scale3d(0.9, 0.9, 1) rotateY(32deg) rotateZ(-9deg); } .isolayer--apexa .grid { position: relative; margin: 0 auto; padding: 0; list-style: none; } .isolayer--apexa .grid__item { width: 420px; height: 315px; padding: 14px; } .isolayer--apexa .grid__link { position: relative; z-index: 1; display: block; cursor: pointer; } /* All photos forced to the SAME rendered size regardless of source image dimensions — without this, masonry packs unevenly because each .grid__item leaves a gap proportional to its image's natural ratio. */ .isolayer--apexa .grid__img { display: block; width: 392px; height: 287px; object-fit: cover; object-position: center; border-radius: 6px; } .isolayer--apexa .layer { position: relative; display: block; } .isolayer--apexa .layer:not(:first-child) { position: absolute; top: 0; left: 0; } .isolayer--apexa .grid__link .layer:first-child:not(img) { background: rgba(253, 157, 73, 0.55); } .isolayer--apexa .grid__link .layer:nth-child(2):not(img) { background: rgba(72, 123, 140, 0.5); } .isolayer--apexa .grid__link .layer:nth-child(3):not(img) { background: rgba(26, 37, 43, 0.55); } /* All layers fan up around their bottom edge — Codrops "Format is Everything" original behavior. Image is the topmost layer in the deck. */ .isolayer--apexa .grid__link .layer { -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; } .isolayer--apexa .grid__link div.layer { width: 392px; height: 287px; border-radius: 6px; opacity: 0.6; } /* Orange ring shows ONLY on the literally hovered item (.is-hover), never on its data-story siblings — those keep no visual marker. */ .isolayer--apexa .grid__item.is-hover .grid__img { box-shadow: 0 0 0 3px var(--accent), 0 16px 30px rgba(0, 0, 0, 0.18); } /* JS hook: 3D works only with these set */ .js .grid, .js .grid__item, .js .grid__link { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .js .apexa-stories .grid { opacity: 0; transition: opacity 0.4s ease; } .js .apexa-stories .grid.grid--loaded { opacity: 1; } @media (max-width: 1024px) { .apexa-stories__layout { grid-template-columns: 1fr; min-height: auto; } .apexa-stories__grid-side { height: 520px; order: 2; } .apexa-stories__content-side { order: 1; } .isolayer--apexa { width: 700px; height: 600px; } } @media (max-width: 640px) { .apexa-stories__grid-side { height: 380px; } .isolayer--apexa { width: 520px; height: 480px; } .isolayer--apexa .grid__item { width: 180px; height: 135px; padding: 8px; } .isolayer--apexa .grid__link div.layer { width: 164px; height: 119px; } } /* ============================================ CONTACT BANNER — Full-width parallax CTA (Figma 922:1025) - Brand-orange background bleeds the page edges (full viewport width). - Photo on the right with a horizontal orange→transparent wash that blends the image into the orange field. - Background image translates on scroll (parallax) — JS sets a CSS custom property on .contact-banner__bg. ============================================ */ .contact-banner { position: relative; width: 100vw; /* break out of any container padding to be edge-to-edge */ margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); height: clamp(280px, 28vw, 380px); background: var(--accent); overflow: hidden; isolation: isolate; } /* Background image layer — sits on the right ~88% of the section. Parallax translates this layer via --parallax-y in pixels. */ .contact-banner__bg { position: absolute; top: 0; bottom: 0; left: 14%; right: 0; /* the JS sets --parallax-y; combined with the slight oversize below so the bg never reveals its top/bottom edges while shifting. */ transform: translate3d(0, var(--parallax-y, 0px), 0) scale(1.12); will-change: transform; } .contact-banner__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* Horizontal wash: solid orange at left edge → transparent toward the right, so the image fades INTO the orange field. */ .contact-banner__wash { position: absolute; inset: 0; background: linear-gradient( 90deg, var(--accent) 0%, rgba(253, 157, 73, 0.85) 18%, rgba(253, 157, 73, 0) 55% ); pointer-events: none; } /* Foreground content: title left, button right */ .contact-banner__inner { position: relative; z-index: 2; height: 100%; max-width: 1700px; margin: 0 auto; padding: 0 clamp(1.5rem, 4vw, 4.5rem); display: flex; align-items: center; justify-content: space-between; gap: clamp(2rem, 5vw, 5rem); } .contact-banner__title { font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.65rem, 3.2vw, 3.75rem); line-height: 1.1; letter-spacing: -0.015em; color: #000; max-width: 820px; margin: 0; } .contact-banner__cta { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; padding: 0.95rem 2.4rem; background: var(--dark); color: #fff; font-family: var(--font-body); font-weight: 600; font-size: clamp(1rem, 1.05vw, 1.175rem); letter-spacing: 0.01em; border-radius: 100px; text-decoration: none; transition: background 0.25s var(--ease), transform 0.25s var(--ease); white-space: nowrap; } .contact-banner__cta:hover { background: #0e1419; transform: translateY(-2px); } @media (max-width: 1024px) { .contact-banner { height: clamp(420px, 60vw, 560px); } .contact-banner__bg { left: 0; opacity: 0.35; } .contact-banner__wash { background: linear-gradient( 180deg, var(--accent) 0%, rgba(253, 157, 73, 0.7) 60%, rgba(253, 157, 73, 0.35) 100% ); } .contact-banner__inner { flex-direction: column; align-items: flex-start; justify-content: center; gap: 1.5rem; text-align: left; } }