/* ================================================================ SAMAAN MIKHAEL — ELITE LIGHT 2030 | style.css Full theme engine (light/dark) + all component styles ================================================================ */ /* ── Custom font attempt ─────────────────────────────────────── */ @font-face { font-family: 'BUNDAYCLEAN'; src: url('https://samaanmikhael.com/wp-content/themes/yootheme/fonts/BUNDAYCLEAN.woff2') format('woff2'), url('https://samaanmikhael.com/wp-content/themes/yootheme/fonts/BUNDAYCLEAN.woff') format('woff'); font-display: swap; } /* ================================================================ CSS CUSTOM PROPERTIES — THEME ENGINE The [data-theme] attribute on drives everything. GSAP transitions individual bg-color; CSS variables handle the rest. ================================================================ */ :root, [data-theme="light"] { --bg: #F9F6F7; --bg-card: rgba(255,255,255,1); --bg-card-hov: rgba(255,255,255,1); --text-primary: #471C2F; --text-muted: rgba(71,28,47,0.50); --text-faint: rgba(71,28,47,0.25); --border: rgba(71,28,47,0.08); --border-hover: rgba(187,38,73,0.20); --crimson: #BB2649; --plum: #471C2F; --ivory: #F9F6F7; /* Navbar */ --nav-text: #471C2F; --nav-text-top: rgba(71,28,47,0.75); /* on hero — now visible */ --nav-bg-scroll: rgba(249,246,247,0.93); --nav-border-scroll:rgba(71,28,47,0.08); --nav-logo-filter: none; /* light logo visible */ /* Footer */ --footer-bg: #471C2F; } [data-theme="dark"] { --bg: #1A0D14; --bg-card: rgba(38,25,32,1); --bg-card-hov: rgba(38,25,32,1); --text-primary: #F9F6F7; --text-muted: rgba(249,246,247,0.50); --text-faint: rgba(249,246,247,0.20); --border: rgba(249,246,247,0.08); --border-hover: rgba(187,38,73,0.35); --nav-text: #F9F6F7; --nav-text-top: rgba(249,246,247,0.90); --nav-bg-scroll: rgba(26,13,20,0.95); --nav-border-scroll:rgba(249,246,247,0.08); --nav-logo-filter: brightness(0) invert(1); --footer-bg: #0E0609; } /* ── Reset ────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: auto; overflow-x: hidden; /* nuclear guard — prevents any element from widening the viewport */ } body { background-color: var(--bg); color: var(--text-primary); cursor: none; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color 0.7s cubic-bezier(0.76,0,0.24,1), color 0.7s cubic-bezier(0.76,0,0.24,1); } /* ── Selection / Scrollbar / Focus ───────────────────────────── */ ::selection { background: #BB2649; color: #F9F6F7; } ::-webkit-scrollbar { width: 2px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #BB2649; border-radius: 999px; } :focus-visible { outline: 2px solid #BB2649; outline-offset: 4px; } /* ================================================================ CURSOR ================================================================ */ #cursor { position: fixed; top: 0; left: 0; width: 8px; height: 8px; background: #BB2649; border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%,-50%); will-change: transform; transition: width .25s ease, height .25s ease, opacity .25s ease; } #cursor-follower { position: fixed; top: 0; left: 0; width: 32px; height: 32px; border: 1.5px solid #BB2649; border-radius: 50%; pointer-events: none; z-index: 9998; transform: translate(-50%,-50%); opacity: 0.45; will-change: transform; transition: width .35s cubic-bezier(.23,1,.32,1), height .35s cubic-bezier(.23,1,.32,1), opacity .35s ease; } /* ================================================================ NAVBAR — always visible in both states ================================================================ */ #navbar { transition: background .4s ease, box-shadow .4s ease; } /* ── FRESH / TOP state ── */ #navbar:not(.is-scrolled) .nav-inner { background: transparent; } /* Subtle frosted gradient behind nav content — theme-aware */ #navbar:not(.is-scrolled)::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(249,246,247,0.6) 0%, transparent 100%); pointer-events: none; transition: background 0.4s ease; } [data-theme="dark"] #navbar:not(.is-scrolled)::before { background: linear-gradient(180deg, rgba(26,13,20,0.82) 0%, rgba(26,13,20,0.35) 60%, transparent 100%); } #navbar:not(.is-scrolled) .nav-link { color: var(--nav-text-top); } #navbar:not(.is-scrolled) .nav-cta { color: var(--nav-text-top); border-color: rgba(71,28,47,0.25); } #navbar:not(.is-scrolled) .hbar { background-color: var(--nav-text-top); } #navbar:not(.is-scrolled) .theme-toggle{ border-color: rgba(71,28,47,0.20); color: var(--nav-text-top); } /* Dark mode: fix non-scrolled nav element colors */ [data-theme="dark"] #navbar:not(.is-scrolled) .nav-cta { border-color: rgba(249,246,247,0.22); } [data-theme="dark"] #navbar:not(.is-scrolled) .theme-toggle{ border-color: rgba(249,246,247,0.18); } #navbar:not(.is-scrolled) .nav-logo-light { filter: none; } /* ── SCROLLED state ── */ #navbar.is-scrolled { background: var(--nav-bg-scroll); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: 0 1px 0 var(--nav-border-scroll); } #navbar.is-scrolled .nav-link { color: var(--nav-text); } #navbar.is-scrolled .nav-cta { color: #BB2649; border-color: #BB2649; } #navbar.is-scrolled .nav-cta:hover { background: #BB2649; color: #F9F6F7; } #navbar.is-scrolled .hbar { background-color: var(--nav-text); } #navbar.is-scrolled .theme-toggle{ border-color: var(--border); color: var(--text-primary); } #navbar.is-scrolled .nav-logo-light { filter: var(--nav-logo-filter); } /* Dark mode: logo swap */ [data-theme="dark"] .nav-logo-light { opacity: 0 !important; } [data-theme="dark"] .nav-logo-dark { opacity: 1 !important; } .nav-logo-dark { transition: opacity 0.4s ease; } .nav-link { position: relative; color: var(--nav-text); transition: color .3s ease; } .nav-link::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 0; height: 1px; background: #BB2649; transition: width .35s ease; } .nav-link:hover::after { width: 100%; } /* ── Theme toggle ────────────────────────────────────────────── */ .theme-toggle { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--border); color: var(--text-muted); transition: border-color .3s, color .3s, background .3s; position: relative; overflow: hidden; } .theme-toggle:hover { border-color: #BB2649; color: #BB2649; } .theme-sun { position: absolute; transition: opacity .4s, transform .4s; } .theme-moon { position: absolute; transition: opacity .4s, transform .4s; } [data-theme="light"] .theme-sun { opacity: 0; transform: rotate(90deg) scale(0.5); } [data-theme="light"] .theme-moon { opacity: 1; transform: rotate(0deg) scale(1); } [data-theme="dark"] .theme-sun { opacity: 1; transform: rotate(0deg) scale(1); } [data-theme="dark"] .theme-moon { opacity: 0; transform: rotate(-90deg) scale(0.5); } /* ── Hamburger ───────────────────────────────────────────────── */ .hamburger-wrap { pointer-events: none; } .hbar { background-color: var(--text-primary); transition: transform 0.38s cubic-bezier(0.76,0,0.24,1), width 0.38s ease, opacity 0.25s ease; } /* Open state via JS class */ #menu-toggle.is-open .hbar:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } #menu-toggle.is-open .hbar:nth-child(2) { opacity: 0; transform: scaleX(0); } #menu-toggle.is-open .hbar:nth-child(3) { width: 22px; transform: translateY(-7.5px) rotate(-45deg); margin-right: 0; } /* ================================================================ MOBILE NAV ================================================================ */ .mobile-nav { opacity: 0; pointer-events: none; transition: none; } .mobile-nav.is-open { pointer-events: all; } .mob-item { overflow: hidden; } .mob-link { display: inline-block; transform: translateY(100%); opacity: 0; transition: color .3s ease; } .mob-link:hover { letter-spacing: 0.04em; } /* ================================================================ HERO ================================================================ */ .hero-section { background-color: var(--bg); padding-top: 120px; transition: background-color 0.7s cubic-bezier(0.76,0,0.24,1); /* overflow-hidden removed — hero-kinetic-bg has its own; needed so CTA dropdown isn't clipped */ } /* CTA dropdown layering: ensure hero content stack is above subsequent sections */ .hero-cta { position: relative; z-index: 60; } .hero-cta-root { position: relative; z-index: 60; } #hero-cta-menu { z-index: 200 !important; /* above all subsequent sections */ } .hero-kinetic-word { color: var(--text-primary); opacity: 0.03; } .hero-name-1 { color: var(--text-primary); } .hero-name-2 { color: #BB2649; } .hero-divider { background-color: var(--text-primary); opacity: 0.25; } .hero-sub-text { color: var(--text-muted); } .hero-sub-strong { color: var(--text-primary); opacity: 0.8; } .hero-stat-label { color: var(--text-muted); } .hero-card-bg { background: rgba(255,255,255,0.88); } [data-theme="dark"] .hero-card-bg { background: rgba(71,28,47,0.6); } .hero-card-border { border-color: var(--border); } .scroll-label { color: var(--text-faint); } .scroll-track { background: var(--border); } @keyframes scrollPulse { 0% { transform: translateY(-100%); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(200%); opacity: 0; } } .scroll-pulse-line { height: 60%; animation: scrollPulse 1.8s ease-in-out infinite; } /* ================================================================ ABOUT (horizontal section) ================================================================ */ /* overflow-x: clip contains the 400vw track without creating a scroll container that would break GSAP's position:fixed pin behaviour */ .about-section { overflow-x: clip; } .about-track { will-change: transform; } .about-heading { color: var(--text-primary); } .about-hint, .about-body, .about-body-2 { color: var(--text-muted); } .about-stat-label { color: var(--text-faint); } /* ================================================================ DEFINITION SECTION ================================================================ */ .def-section { background-color: var(--bg); transition: background-color 0.7s ease; } .def-heading { color: var(--text-primary); } .def-sub { color: var(--text-muted); } .def-body { color: var(--text-muted); } .def-strong { color: var(--text-primary); font-weight: 600; } /* Reveal initial states */ .def-reveal { opacity: 0; transform: translateY(36px); } /* ── YouTube Player ─────────────────────────────────────────── */ .yt-player-wrap { position: relative; border-radius: 2rem; overflow: hidden; aspect-ratio: 16/9; background: #0d0d0d; cursor: none; } .yt-thumbnail-layer { position: absolute; inset: 0; transition: opacity 0.5s ease; z-index: 2; } .yt-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.76,0,0.24,1); } .yt-player-wrap:hover .yt-thumb { transform: scale(1.04); } .yt-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(71,28,47,0.75) 0%, rgba(71,28,47,0.15) 50%, transparent 100%); transition: background 0.4s ease; } .yt-player-wrap:hover .yt-overlay { background: linear-gradient(to top, rgba(71,28,47,0.9) 0%, rgba(71,28,47,0.25) 60%, transparent 100%); } .yt-label { position: absolute; bottom: 0; left: 0; right: 0; padding: 2rem; z-index: 3; } /* Play button */ .yt-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; z-index: 4; cursor: none; transition: transform 0.35s cubic-bezier(0.23,1,0.32,1); } .yt-play-btn:hover { transform: translate(-50%,-50%) scale(1.1); } .yt-play-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.5); animation: playRingPulse 2.5s ease-out infinite; } .yt-play-ring-2 { animation-delay: 1.25s; } @keyframes playRingPulse { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(1.6); opacity: 0; } } .yt-play-icon { width: 28px; height: 28px; color: white; filter: drop-shadow(0 2px 12px rgba(0,0,0,0.4)); margin-left: 4px; /* optical centre of triangle */ } /* Small play button variant (split section) */ .yt-play-btn--sm { width: 56px; height: 56px; bottom: auto; top: 50%; left: 50%; transform: translate(-50%,-50%); } .yt-play-btn--sm .yt-play-icon { width: 20px; height: 20px; } /* iFrame layer */ .yt-iframe-layer { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .yt-iframe-layer.active { pointer-events: all; } .yt-iframe-layer iframe { width: 100%; height: 100%; border: none; } /* Active state: hide thumbnail */ .yt-player-wrap.is-playing .yt-thumbnail-layer { opacity: 0; pointer-events: none; } .yt-player-wrap.is-playing .yt-iframe-layer { z-index: 5; pointer-events: all; } /* ================================================================ IMPACT SECTION — DARK INVERSION + SVG JOURNEY ================================================================ */ .impact-section { background-color: var(--bg); transition: background-color 0.85s cubic-bezier(0.76,0,0.24,1); } .impact-heading { color: var(--text-primary); transition: color 0.6s ease; } .impact-body { color: var(--text-muted); transition: color 0.6s ease; } .impact-link-cta { color: var(--text-primary); transition: color 0.4s; } .impact-reveal { opacity: 0; transform: translateY(36px); } /* Dark inversion state */ .impact-section.dark .impact-heading { color: #F9F6F7; } .impact-section.dark .impact-body { color: rgba(249,246,247,0.55); } .impact-section.dark .impact-link-cta { color: #F9F6F7; } /* ── Journey Spine ─────────────────────────────────────────── */ .journey-spine { display: none; } /* ── Orbit / Asymmetric Masonry layout ──────────────────────── */ .journey-nodes-orbit { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(2rem, 4vw, 3.5rem) clamp(1rem, 3vw, 2.5rem); align-items: start; } /* Staggered vertical offsets create organic masonry feel on desktop */ @media (min-width: 768px) { .journey-nodes-orbit .journey-node:nth-child(1) { margin-top: 0; } .journey-nodes-orbit .journey-node:nth-child(2) { margin-top: 3.5rem; } .journey-nodes-orbit .journey-node:nth-child(3) { margin-top: 1rem; } .journey-nodes-orbit .journey-node:nth-child(4) { margin-top: 4.5rem; } .journey-nodes-orbit .journey-node:nth-child(5) { margin-top: 2rem; } .journey-nodes-orbit .journey-node:nth-child(6) { margin-top: 0.5rem; } .journey-nodes-orbit .journey-node:nth-child(7) { margin-top: 3rem; } .journey-nodes-orbit .journey-node:nth-child(8) { margin-top: 1.5rem; } } /* Tablet: 2×4 grid to avoid overcrowded 4-column at narrow viewports */ @media (min-width: 768px) and (max-width: 899px) { .journey-nodes-orbit { grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem,3vw,2.5rem); } .journey-nodes-orbit .journey-node { margin-top: 0 !important; } } /* Mobile: vertical storytelling list — horizontal card per node */ @media (max-width: 767px) { .journey-nodes-orbit { grid-template-columns: 1fr; gap: 0; } .journey-nodes-orbit .journey-node { flex-direction: row; text-align: left; align-items: center; gap: 1.25rem; padding: 1.25rem 0; border-bottom: 1px solid var(--border); } .journey-nodes-orbit .journey-node:last-child { border-bottom: none; } .journey-nodes-orbit .node-icon-ring { width: 52px; height: 52px; flex-shrink: 0; } .journey-nodes-orbit .node-label { max-width: none; flex: 1; text-align: left; } .journey-nodes-orbit .node-title { font-size: 1.1rem; margin-bottom: 0.2rem; } .journey-nodes-orbit .node-desc { font-size: 11px; } } /* ── Journey Node ────────────────────────────────────────── */ .journey-node { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; text-align: center; opacity: 0; transform: translateY(40px); } .node-icon-ring { width: 80px; height: 80px; position: relative; flex-shrink: 0; /* Pre-promote to GPU compositor so float animation never causes rasterisation flicker or sub-pixel pixelation */ will-change: transform; transform: translateZ(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; } .node-svg { width: 100%; height: 100%; display: block; } .node-circle-bg { stroke: var(--border); transition: stroke 0.4s; } .node-pulse-ring { stroke: #BB2649; } .node-icon-fill { fill: #BB2649; } .node-icon-stroke { stroke: #BB2649; } /* Active node highlight */ .journey-node.activated .node-circle-bg { stroke: #BB2649; } .node-icon-ring--final .node-circle-bg { stroke: #BB2649; } .node-label { max-width: 140px; } .node-number { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.35em; text-transform: uppercase; color: #BB2649; margin-bottom: 0.35rem; } .node-title { font-family: 'BUNDAYCLEAN','Bebas Neue',sans-serif; font-size: 1.25rem; line-height: 1.15; color: var(--text-primary); transition: color 0.4s; margin-bottom: 0.35rem; } .impact-section.dark .node-title { color: #F9F6F7; } .node-desc { font-size: 12px; font-weight: 300; line-height: 1.5; color: var(--text-muted); transition: color 0.4s; } .impact-section.dark .node-desc { color: rgba(249,246,247,0.45); } /* ================================================================ ARSENAL — STICKY LEFT + STACKED CARD DECK ================================================================ */ /* clip-path transforms and slider deck won't widen the page on mobile */ .arsenal-section { overflow-x: clip; } .arsenal-section { background-color: var(--bg); transition: background-color 0.7s ease; /* Breathing room above so pin doesn't immediately collide with Impact section */ padding-top: clamp(2.5rem, 10vw, 14rem); } .arsenal-heading { color: var(--text-primary); } .arsenal-sub { color: var(--text-muted); } .grid-reveal { opacity: 0; transform: translateY(36px); } /* Two-column sticky layout — exactly 100vh tall so columns sit symmetrically centered within the pinned viewport (equal top/bottom space at every width) */ .arsenal-sticky { display: grid; grid-template-columns: 1fr 1fr; align-items: center; /* vertical center for every row */ justify-items: stretch; height: 100vh; /* fixed, not min-height: must match pin viewport */ padding: 0 clamp(1.5rem,6vw,8rem); gap: clamp(2rem,6vw,8rem); max-width: 1440px; margin: 0 auto; box-sizing: border-box; } .arsenal-left, .arsenal-right { /* Parent's align-items:center handles vertical positioning — equal top/bottom */ display: flex; flex-direction: column; justify-content: center; min-height: 0; /* allow column to be shorter than 100vh */ } .arsenal-right { align-items: center; } /* ── Stack Deck ── */ .stack-deck { position: relative; width: 100%; max-width: 480px; height: clamp(360px, 50vh, 520px); margin: 0 auto; } .stack-card { position: absolute; inset: 0; will-change: transform, opacity, filter; } .stack-card-inner { height: 100%; padding: clamp(1.75rem, 3vw, 2.5rem); display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border); border-radius: 2rem; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background 0.3s, border-color 0.3s; overflow: hidden; } .stack-card-icon { width: 52px; height: 52px; border-radius: 14px; background: rgba(187,38,73,0.08); display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; flex-shrink: 0; } .stack-card-num { font-size: 10px; font-weight: 700; letter-spacing: 0.4em; text-transform: uppercase; color: #BB2649; margin-bottom: 0.6rem; } .stack-card-title { font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1.0; color: var(--text-primary); margin-bottom: 1rem; transition: color 0.3s; } .stack-card-body { font-size: 13px; font-weight: 300; line-height: 1.75; color: var(--text-muted); margin-top: auto; } .stack-card-bar { margin-top: 1.75rem; height: 2px; background: linear-gradient(90deg, #BB2649, #DB343B); border-radius: 999px; width: 2.5rem; transition: width 0.5s cubic-bezier(0.76,0,0.24,1); } .stack-card.is-active .stack-card-bar { width: 100%; } .stack-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border); border: none; padding: 0; cursor: pointer; transition: background 0.3s, transform 0.3s; } .stack-dot.is-active { background: #BB2649; transform: scale(1.5); } .stack-counter { font-variant-numeric: tabular-nums; } @media (max-width: 767px) { .arsenal-sticky { grid-template-columns: 1fr; height: auto; /* override desktop's height:100vh */ min-height: unset; padding: 0 clamp(1rem,5vw,2rem); gap: clamp(2rem,5vw,4rem); } .arsenal-left { align-self: stretch; align-items: flex-start; text-align: left; } .arsenal-right { width: 100%; align-self: stretch; } .stack-deck { height: auto; min-height: unset; } /* Base mobile reset — slider JS overrides these via gsap.set */ .stack-card { position: relative !important; inset: auto !important; margin-bottom: 1rem; } .stack-card:last-child { margin-bottom: 0; } } /* ── Mobile slider (GSAP-driven) ── */ .stack-slider-outer { /* Full-bleed: break out of any parent container padding so the slider fills exactly the viewport width, no clipping. */ position: relative; width: 100vw; max-width: 100vw; /* Shift left by the gap between viewport width and parent width */ margin-left: calc(-1 * ((100vw - 100%) / 2)); overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; overscroll-behavior-x: none; } .stack-deck.is-slider { display: flex !important; width: auto !important; /* Height is computed in JS = tallest card's natural height + 10px buffer */ height: auto !important; max-width: none !important; align-items: stretch; /* every card matches the deck height */ cursor: grab; padding: 0 !important; /* Prevent elastic over-scroll from pushing deck outside outer clip */ overscroll-behavior-x: contain; } .stack-deck.is-slider:active { cursor: grabbing; } .stack-deck.is-slider .stack-card { position: relative !important; inset: auto !important; flex-shrink: 0; height: auto !important; /* JS sets explicit px height once measured */ margin-bottom: 0 !important; will-change: transform; transform-origin: center center; padding-inline: 30px 10px; box-sizing: border-box; background: transparent !important; } .stack-deck.is-slider .stack-card-inner { border-radius: 1rem; } /* ================================================================ CONSULTATION SECTION — High-end video reveal ================================================================ */ .consult-section { background-color: var(--bg); transition: background-color 0.7s ease; } .consult-bg-orb { width: 700px; height: 700px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(187,38,73,0.07) 0%, transparent 70%); top: 50%; left: 60%; transform: translate(-50%, -50%); } /* All animated-in elements start hidden */ .consult-eyebrow, .consult-line, .consult-body, .consult-cta { opacity: 0; transform: translateY(24px); } .consult-feature { opacity: 0; transform: translateX(-20px); } .consult-quote { opacity: 0; transform: translateY(16px); } .consult-video-wrap { opacity: 0; transform: translateY(40px) scale(0.98); transform-origin: center center; } /* Keep heading colour from theme var */ .consult-heading { color: var(--text-primary); } .consult-body { color: var(--text-muted); } .consult-feature-text { color: var(--text-primary); } /* Video shadow — theme-aware */ .consult-video-wrap .yt-player-wrap { box-shadow: 0 40px 80px rgba(71,28,47,0.12), 0 8px 24px rgba(187,38,73,0.08); } [data-theme="dark"] .consult-video-wrap .yt-player-wrap { box-shadow: 0 40px 80px rgba(0,0,0,0.4), 0 8px 24px rgba(187,38,73,0.12); } @media (max-width: 1023px) { .consult-bg-orb { display: none; } } /* ================================================================ GRAND FINALE — FULL-VIEWPORT CINEMATIC SCRUB ================================================================ */ .finale-section { background: var(--bg); position: relative; } /* Pinned viewport — mirrors .c-form-pin pattern on Consultation form-finale */ .finale-pin { position: relative; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; will-change: contents; } /* Background wrap clips bloom + deco-word without clipping centred content */ .finale-bg-wrap { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .finale-bg { background: var(--bg); will-change: background-color; transition: none; /* GSAP controls this fully */ } /* Dark mode: start finale at dark bg so transition from consultation is seamless */ [data-theme="dark"] .finale-bg { background: #1A0D14; } .finale-bloom { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(0); width: 120vw; height: 120vw; border-radius: 50%; pointer-events: none; opacity: 0; will-change: transform, opacity; } .finale-deco-word { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: transparent; -webkit-text-stroke: 1px rgba(187,38,73,0.12); will-change: opacity, transform; user-select: none; pointer-events: none; white-space: nowrap; } /* Centred content — sits above background, never clipped */ .finale-content { position: relative; z-index: 10; width: 100%; max-width: 960px; padding: 5.5rem clamp(1.5rem,4vw,3rem) 0; display: flex; flex-direction: column; align-items: center; text-align: center; } [data-theme="dark"] .finale-deco-word { -webkit-text-stroke: 1px rgba(187,38,73,0.18); } .finale-headline-col { color: var(--text-primary); will-change: color, transform; } .finale-body-col { color: var(--text-muted); will-change: color, opacity; } .finale-eyebrow { opacity: 0; will-change: opacity, transform; } .finale-sub { opacity: 0; will-change: opacity, transform; } .finale-ctas { opacity: 0; will-change: opacity, transform; } .finale-book-btn { border-color: rgba(187,38,73,0.4); color: var(--text-primary); transition: border-color 0.4s, color 0.4s, background 0.4s; } .finale-book-btn:hover { background: rgba(187,38,73,0.1); border-color: #BB2649; } .finale-section.is-dark .finale-book-btn { border-color: rgba(249,246,247,0.25); color: #F9F6F7; } .finale-section.is-dark .finale-book-btn:hover { background: rgba(249,246,247,0.08); border-color: #F9F6F7; } /* ================================================================ FOOTER ================================================================ */ .footer-section { background-color: var(--footer-bg); transition: background-color 0.7s ease; } .footer-wordmark-text { color: rgba(255,255,255,0.04); will-change: transform,opacity; } .footer-el { opacity: 0; transform: translateY(24px); } .footer-divider { border-color: rgba(255,255,255,0.08); } .footer-label { color: rgba(255,255,255,0.20); } .footer-text { color: rgba(255,255,255,0.35); } .footer-link { color: rgba(255,255,255,0.45); } .footer-copy { color: rgba(255,255,255,0.20); } .footer-legal { color: rgba(255,255,255,0.20); } .footer-social-border { border-color: rgba(255,255,255,0.15); } .footer-social-text { color: rgba(255,255,255,0.40); } .social-icon { transition: all .3s ease; } .social-icon:hover { border-color: #BB2649 !important; color: #BB2649 !important; } /* ================================================================ MAGNETIC BUTTONS ================================================================ */ .magnetic-btn { position: relative; will-change: transform; transition: transform .4s cubic-bezier(.23,1,.32,1), color .35s ease, background .35s ease, border-color .35s ease; } /* ================================================================ SPLITTYPE — CHARACTER REVEAL HELPERS (homepage sections) Lines must overflow-hide so chars entering from y:115% are clipped and never cause scroll or visual bleed outside the heading block. ================================================================ */ .def-heading .line, .impact-heading .line, .arsenal-heading .line, .consult-heading .line { overflow: hidden; display: block; } .def-heading .char, .impact-heading .char, .arsenal-heading .char, .consult-heading .char { display: inline-block; will-change: transform; } /* ================================================================ MOBILE OVERRIDES ================================================================ */ @media (max-width: 1023px) { body { cursor: auto; } #cursor, #cursor-follower { display: none !important; } .hero-section { padding-top: 90px; } } @media (max-width: 639px) { .hero-section { padding-top: 72px; } .yt-player-wrap { border-radius: 1.25rem; } } /* ================================================================ CLIENT LOGOS — TRUSTED BRANDS Reused on Consultation + Homepage testimonials block. White-sourced logos: filter for light theme, raw white for dark. ================================================================ */ .c-logos-wrap { width: 100%; will-change: transform, opacity; } .c-logos-viewport { width: 100%; overflow: hidden; } .c-logos-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.75rem) clamp(0.75rem, 1.5vw, 1.5rem); align-items: center; } .c-logo-cell { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; padding: 0.75rem; border-radius: 0.75rem; background: transparent; transition: transform 0.4s cubic-bezier(0.23,1,0.32,1), background 0.3s ease; opacity: 0; transform: translateY(20px); } .c-logo-cell:hover { transform: translateY(-4px); } .c-logo-img { max-width: 100%; max-height: 56px; width: auto; height: auto; object-fit: contain; opacity: 0.85; transition: opacity 0.35s ease, filter 0.5s cubic-bezier(0.76,0,0.24,1); } .c-logo-cell:hover .c-logo-img { opacity: 1; } /* Light mode — white logos need inversion to render on ivory bg */ [data-theme="light"] .c-logo-img { filter: invert(1) brightness(0.35) saturate(0); } /* Dark mode — leave white as-is, only slightly soften */ [data-theme="dark"] .c-logo-img { filter: brightness(1.05) saturate(0); } /* Mobile: convert grid → horizontal slider */ @media (max-width: 767px) { .c-logos-viewport { overflow: hidden; border-radius: 0.75rem; } .c-logos-track { display: flex; grid-template-columns: none; gap: 0; flex-wrap: nowrap; width: max-content; will-change: transform; } .c-logo-cell { flex: 0 0 50vw; /* two logos visible per viewport */ width: 50vw; aspect-ratio: 16 / 9; padding: 1rem; } .c-logo-img { max-height: 44px; } } /* Logos slider dots (mobile only) */ .c-logos-dots { display: none; align-items: center; justify-content: center; gap: 0.4rem; margin-top: 1rem; } @media (max-width: 767px) { .c-logos-dots { display: flex; } } .c-logos-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border); border: none; cursor: pointer; padding: 0; transition: background 0.3s ease, transform 0.3s ease; } .c-logos-dot.is-active { background: #BB2649; transform: scale(1.5); }