/* ===== FONTS ===== */ @font-face { font-family: 'Cavalero'; src: url('assets/fonts/cavalero.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } /* ===== RESET ===== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :root { --amber: #c9943e; --amber-light: #e0b35a; --amber-dark: #a67a2e; --amber-glow: rgba(201, 148, 62, 0.25); --amber-glow-strong: rgba(201, 148, 62, 0.5); --cta: #ffffff; --cta-soft: #e8e3d8; --cta-glow: rgba(255, 255, 255, 0.32); --cta-glow-strong: rgba(255, 255, 255, 0.55); --max-width: 1200px; --nav-height: 72px; --radius: 12px; --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1); --transition: 0.4s var(--ease-out-expo); --bg: #070707; --bg-elevated: #0d0d0d; --bg-card: #131313; --bg-card-hover: #191919; --text: #f2efe8; --text-secondary: #8a857e; --text-dim: #3e3b36; --border: rgba(255, 255, 255, 0.05); --border-hover: rgba(255, 255, 255, 0.1); --nav-bg: rgba(7, 7, 7, 0.5); --nav-bg-solid: rgba(7, 7, 7, 0.94); --shadow-neu-out: 8px 8px 24px rgba(0,0,0,0.55), -4px -4px 16px rgba(255,255,255,0.015); --shadow-neu-in: inset 5px 5px 14px rgba(0,0,0,0.5), inset -3px -3px 10px rgba(255,255,255,0.015); --grain-opacity: 0.055; } html { /* Smooth-scroll handled in JS (script.js) so target Y can be recomputed each frame — native CSS smooth-scroll locks the target at click time, which races layout shifts (image load, font swap) and lands at a stale Y. */ scroll-padding-top: calc(var(--nav-height) + 24px); -webkit-text-size-adjust: 100%; overscroll-behavior: none; } body { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; /* `clip` (not `hidden`) on x-axis prevents body from becoming its own scroll container — keeps as the document scroller. Y-axis MUST stay visible: in Chrome, any non-visible y-overflow on body propagates to the viewport and disables document scrolling entirely. */ overflow-x: clip; overscroll-behavior: none; } /* Grain */ body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: var(--grain-opacity); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 256px; } /* Amber-tinted film grain — sparse warm speckles for background texture */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9998; opacity: 0.24; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 280 280' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 0.79 0 0 0 0 0.58 0 0 0 0 0.24 1.4 0 0 0 -0.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 200px; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } /* ===== AMBIENT ORBS ===== */ .orb-container { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .orb { position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.2; will-change: transform; } .orb--1 { width: 700px; height: 700px; background: radial-gradient(circle, rgba(201, 148, 62, 0.3) 0%, transparent 70%); top: -20%; right: -15%; animation: orbFloat1 28s ease-in-out infinite; } .orb--2 { width: 550px; height: 550px; background: radial-gradient(circle, rgba(180, 120, 40, 0.22) 0%, transparent 70%); bottom: 0; left: -15%; animation: orbFloat2 34s ease-in-out infinite; } .orb--3 { width: 400px; height: 400px; background: radial-gradient(circle, rgba(220, 170, 60, 0.18) 0%, transparent 70%); top: 60%; left: 40%; animation: orbFloat3 26s ease-in-out infinite; } @keyframes orbFloat1 { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(-100px, 120px) scale(1.15); } 66% { transform: translate(60px, -60px) scale(0.9); } } @keyframes orbFloat2 { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(110px, -70px) scale(1.18); } 66% { transform: translate(-50px, 80px) scale(0.88); } } @keyframes orbFloat3 { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-30%, -70%) scale(1.3); } } /* ===== NAVIGATION ===== */ .nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-height); background: var(--nav-bg); backdrop-filter: blur(28px) saturate(1.6); -webkit-backdrop-filter: blur(28px) saturate(1.6); border-bottom: 1px solid var(--border); z-index: 1000; transition: background 0.8s ease, border 0.4s ease; } .nav.scrolled { background: var(--nav-bg-solid); } .nav-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 24px 0 20px; height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } .nav-logo { font-family: 'Cavalero', serif; font-size: 1.45rem; letter-spacing: 0.02em; color: var(--text); white-space: nowrap; line-height: 1; justify-self: start; /* Hidden until the hero wordmark scrolls out — slot stays empty until then. */ opacity: 0; pointer-events: none; transition: opacity 0.45s var(--ease-out-expo); } .nav.past-hero .nav-logo { opacity: 1; pointer-events: auto; } .nav-links { display: flex; align-items: center; gap: 40px; list-style: none; justify-self: center; } .nav-links a { font-size: 0.84rem; font-weight: 500; color: var(--text-secondary); transition: color var(--transition); position: relative; letter-spacing: 0.01em; } .nav-links a::after { content: ''; position: absolute; bottom: -6px; left: 50%; width: 0; height: 1px; background: var(--amber); transition: width 0.4s var(--ease-out-expo), left 0.4s var(--ease-out-expo); } .nav-links a:hover { color: var(--text); } .nav-links a:hover::after { width: 100%; left: 0; } .nav-right { display: flex; align-items: center; gap: 12px; justify-self: end; } .menu-toggle { display: none; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 20px; color: var(--text-secondary); font-family: 'Outfit', sans-serif; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: all var(--transition); box-shadow: var(--shadow-neu-out); } .menu-toggle:hover { color: var(--text); } .menu-toggle:active { box-shadow: var(--shadow-neu-in); } .mobile-nav { display: none; position: fixed; top: var(--nav-height); left: 0; right: 0; bottom: 0; background: var(--bg); z-index: 999; padding: 48px 32px; opacity: 0; transition: opacity 0.5s ease; } .mobile-nav.active { opacity: 1; } .mobile-nav a { display: block; font-size: 2rem; font-weight: 700; color: var(--text-dim); padding: 24px 0; border-bottom: 1px solid var(--border); transition: color var(--transition), padding-left var(--transition); letter-spacing: -0.02em; } .mobile-nav a:hover { color: var(--text); padding-left: 16px; } /* ===== PAGE WRAP ===== Clips the photo-glow's tall bottom-inset (-180%) at the page's natural bottom (= footer's bottom edge), where every glow gradient has already faded to transparent — so the clip is visually invisible. Crucially this is a CHILD of body, not body itself: putting overflow: clip on body propagates to the viewport in Chrome and disables document scroll. */ .page-wrap { overflow: clip; } /* ===== HERO ===== */ .hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: calc(var(--nav-height) + 40px) 32px 0; z-index: 1; /* Intentionally NOT clipped — the photo-glow's bottom needs to flow naturally past the hero into the ticker zone. The mask gradient is the only thing controlling fade, so no clip cut, no seam. The phantom-scroll problem is solved one level up at .page-wrap. Mesh canvas is sized to hero bounds and paints inside its own pixel buffer, so it can't visually overflow. */ overflow: visible; } .hero-text { position: relative; z-index: 4; will-change: transform, opacity; } /* Staggered entrance */ .hero-badge, .hero h1, .hero-sub, .cta-group { opacity: 0; transform: translateY(40px); animation: enterUp 1.1s var(--ease-out-expo) forwards; } .hero-badge { animation-delay: 0.2s; } .hero h1 { animation-delay: 0.4s; } .hero-sub { animation-delay: 0.6s; } .cta-group { animation-delay: 0.85s; } @keyframes enterUp { to { opacity: 1; transform: translateY(0); } } .hero-badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 22px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 100px; font-size: 0.74rem; font-weight: 500; color: var(--text-secondary); margin-bottom: 44px; letter-spacing: 0.06em; box-shadow: var(--shadow-neu-out); } .hero-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 14px var(--amber-glow-strong); animation: pulse 2.5s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 14px var(--amber-glow-strong); } 50% { opacity: 0.35; box-shadow: 0 0 4px var(--amber-glow); } } .hero h1 { font-family: 'Outfit', sans-serif; font-size: clamp(3rem, 8vw, 7rem); font-weight: 800; line-height: 0.98; letter-spacing: -0.045em; max-width: 1000px; margin-bottom: 28px; } .hero h1.hero-wordmark { font-family: 'Cavalero', serif; font-weight: 400; font-size: clamp(3.5rem, 13vw, 11rem); letter-spacing: 0.02em; line-height: 0.95; max-width: none; } .hero-sub { font-size: clamp(0.95rem, 1.5vw, 1.1rem); color: var(--text-secondary); max-width: 440px; line-height: 1.8; margin: 0 auto 48px; font-weight: 400; letter-spacing: 0.005em; } /* ===== HERO MESH GRID ===== */ .hero-mesh { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 0.18s ease; /* Edge fade is performed inside drawMesh() via a destination-out gradient pass — gives a perfectly smooth falloff with no perceptible CSS-mask seam. */ } /* ===== HERO PHOTO — PARALLAX DEPTH LAYERS ===== */ .hero-photo-scene { position: relative; width: 100%; max-width: 800px; aspect-ratio: 1 / 1; margin: 0 auto 64px; will-change: transform, opacity; opacity: 0; transform: scale(0.92) translateY(40px); animation: photoEnter 1.6s var(--ease-out-expo) 0.7s forwards; } @keyframes photoEnter { to { opacity: 1; transform: scale(1) translateY(0); } } /* Ambient glow layer — asymmetric multi-radial "spill". Bottom inset extended very far down (-180%) so the warm wash flows out of the hero (which is now overflow:visible), past the CTAs, behind the translucent ticker, and dies softly before the countdown. The long mask gradient is the only thing that controls fade — there is no clip cut, so no seam can form. */ .photo-glow { position: absolute; inset: -55% -50% -180% -55%; background: radial-gradient(ellipse 55% 30% at 58% 28%, rgba(201, 148, 62, 0.40) 0%, rgba(201, 148, 62, 0.08) 38%, transparent 65%), radial-gradient(ellipse 38% 20% at 26% 38%, rgba(201, 148, 62, 0.32) 0%, transparent 65%), radial-gradient(ellipse 30% 16% at 78% 18%, rgba(224, 179, 90, 0.24) 0%, transparent 60%), /* downstream wash — drives the continuation through the ticker zone */ radial-gradient(ellipse 60% 28% at 50% 60%, rgba(201, 148, 62, 0.22) 0%, transparent 70%); -webkit-mask-image: linear-gradient( to bottom, black 0%, black 26%, rgba(0,0,0,0.94) 38%, rgba(0,0,0,0.82) 50%, rgba(0,0,0,0.62) 62%, rgba(0,0,0,0.40) 74%, rgba(0,0,0,0.22) 84%, rgba(0,0,0,0.08) 93%, transparent 100% ); mask-image: linear-gradient( to bottom, black 0%, black 26%, rgba(0,0,0,0.94) 38%, rgba(0,0,0,0.82) 50%, rgba(0,0,0,0.62) 62%, rgba(0,0,0,0.40) 74%, rgba(0,0,0,0.22) 84%, rgba(0,0,0,0.08) 93%, transparent 100% ); z-index: 1; will-change: transform; filter: blur(4px); animation: glowBreath 10s ease-in-out infinite; } @keyframes glowBreath { 0%, 100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.08); opacity: 0.9; } } /* The actual image — three masks; all hit pure black at the geometric center, so the photo center stays at 100% opacity. The horizontal mask's left ramp is widened to soften the left edge. */ .photo-main { position: relative; z-index: 2; aspect-ratio: 1 / 1; will-change: transform; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 16%, black 62%, transparent 100%), linear-gradient(to right, transparent 0%, black 26%, black 84%, transparent 100%), linear-gradient(45deg, transparent 0%, black 26%, black 74%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, transparent 0%, black 16%, black 62%, transparent 100%), linear-gradient(to right, transparent 0%, black 26%, black 84%, transparent 100%), linear-gradient(45deg, transparent 0%, black 26%, black 74%, transparent 100%); mask-composite: intersect; } .photo-main img { width: 100%; display: block; /* Belt-and-suspenders against CLS if the HTML width/height attrs ever get stripped — the asset is square, so reserving a 1:1 box keeps the hero's height stable from first paint. */ aspect-ratio: 1 / 1; } /* CTA */ .cta-group { position: relative; z-index: 5; display: flex; gap: 16px; align-items: center; justify-content: center; flex-wrap: wrap; } .btn-primary { display: inline-flex; align-items: center; gap: 10px; padding: 17px 42px; background: linear-gradient(135deg, var(--cta), var(--cta-soft)); color: #0a0a0a; font-family: 'Outfit', sans-serif; font-size: 0.9rem; font-weight: 700; border: none; border-radius: var(--radius); cursor: pointer; transition: all var(--transition); text-decoration: none; box-shadow: 0 4px 28px var(--cta-glow), var(--shadow-neu-out); position: relative; overflow: hidden; letter-spacing: 0.01em; } .btn-primary::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.3), transparent 60%); opacity: 0; transition: opacity var(--transition); } .btn-primary:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 14px 56px var(--cta-glow-strong), var(--shadow-neu-out); } .btn-primary:hover::before { opacity: 1; } .btn-primary:active { transform: translateY(0) scale(0.98); box-shadow: var(--shadow-neu-in); } .btn-primary .arrow { display: inline-block; transition: transform 0.35s var(--ease-out-expo); } .btn-primary:hover .arrow { transform: translateX(4px); } /* ===== SCENE TRANSITION ===== Both transitions share the same height so the ticker sits centered between the amber lines. Tight enough that the countdown reads as continuation of the ticker, not a fresh section. */ .scene-transition { position: relative; z-index: 2; height: 80px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .scene-transition--tight { height: 80px; } .scene-line { width: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--amber) 30%, var(--amber) 70%, transparent); transition: width 1.8s var(--ease-out-quint); } .scene-line.visible { width: min(70%, 500px); } /* ===== STOCK TICKER TAPE — translucent so amber-bleed flows through */ .ticker-wrap { overflow: hidden; position: relative; z-index: 2; background: rgba(10, 10, 10, 0.72); backdrop-filter: blur(8px) saturate(1.1); -webkit-backdrop-filter: blur(8px) saturate(1.1); border-top: 2px solid rgba(26, 26, 26, 0.7); border-bottom: 2px solid rgba(26, 26, 26, 0.7); padding: 14px 0; /* Slight inner shadow for inset LED panel feel */ box-shadow: inset 0 4px 12px rgba(0,0,0,0.5), inset 0 -4px 12px rgba(0,0,0,0.5); } .ticker { display: flex; width: max-content; animation: tickerScroll 30s linear infinite; } .ticker-track { display: flex; gap: 48px; padding-right: 48px; flex-shrink: 0; } @keyframes tickerScroll { to { transform: translateX(-50%); } } .ticker-item { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; font-family: 'Outfit', monospace; } .ticker-sym { font-size: 0.82rem; font-weight: 700; color: #e0e0e0; letter-spacing: 0.06em; } .ticker-price { font-size: 0.82rem; font-weight: 600; color: #aaa; font-variant-numeric: tabular-nums; } .ticker-change { font-size: 0.76rem; font-weight: 700; font-variant-numeric: tabular-nums; padding: 2px 8px; border-radius: 3px; } .ticker-change.up { color: #22c55e; text-shadow: 0 0 8px rgba(34, 197, 94, 0.4); } .ticker-change.down { color: #ef4444; text-shadow: 0 0 8px rgba(239, 68, 68, 0.4); } /* Horizontal scanline effect */ .ticker-wrap::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0,0,0,0.15) 2px, rgba(0,0,0,0.15) 4px ); pointer-events: none; z-index: 1; } /* Edge fade — matches the new translucent background */ .ticker-wrap::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,10,10,0.85), transparent 6%, transparent 94%, rgba(10,10,10,0.85)); pointer-events: none; z-index: 2; } /* ===== COUNTDOWN ===== */ .countdown-section { padding: 40px 32px 180px; text-align: center; position: relative; z-index: 2; overflow: hidden; /* contain the oversize launch-rays disc */ } /* Cinematic entrance — entire section */ .countdown-inner { position: relative; z-index: 1; will-change: transform, opacity; } /* Slowly rotating amber ray fan that fades in as the section enters view. The mask is an ellipse wider than tall — the rays fully fade to transparent well within the section's vertical extent, so no clip seam can form at the section's top/bottom edges. */ .launch-rays { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(0deg); width: 110vmin; height: 110vmin; pointer-events: none; z-index: 0; opacity: 0; background: conic-gradient(from 0deg, transparent 0deg, rgba(201,148,62,0.22) 6deg, transparent 14deg, transparent 40deg, rgba(224,179,90,0.18) 46deg, transparent 56deg, transparent 95deg, rgba(201,148,62,0.26) 102deg, transparent 112deg, transparent 160deg, rgba(201,148,62,0.16) 168deg, transparent 178deg, transparent 220deg, rgba(224,179,90,0.22) 228deg, transparent 240deg, transparent 290deg, rgba(201,148,62,0.18) 298deg, transparent 310deg, transparent 360deg); -webkit-mask-image: radial-gradient(ellipse 55% 32% at 50% 50%, black 0%, black 24%, transparent 70%); mask-image: radial-gradient(ellipse 55% 32% at 50% 50%, black 0%, black 24%, transparent 70%); filter: blur(1px); transition: opacity 1.6s var(--ease-out-expo); animation: raysSpin 90s linear infinite; } .countdown-section.in-view .launch-rays { opacity: 1; } @keyframes raysSpin { to { transform: translate(-50%, -50%) rotate(360deg); } } .countdown-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.28em; color: var(--amber); margin-bottom: 20px; font-weight: 700; opacity: 0; transform: translateY(30px); transition: opacity 0.9s var(--ease-out-expo), transform 0.9s var(--ease-out-expo); } .countdown-title { font-family: 'Outfit', sans-serif; font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 800; margin-bottom: 72px; letter-spacing: -0.04em; opacity: 0; transform: translateY(30px); transition: opacity 0.9s var(--ease-out-expo) 0.1s, transform 0.9s var(--ease-out-expo) 0.1s; } .countdown-section.in-view .countdown-label, .countdown-section.in-view .countdown-title { opacity: 1; transform: translateY(0); } .countdown { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; } .countdown-unit { background: var(--bg-card); border-radius: 22px; padding: 40px 36px 32px; min-width: 140px; box-shadow: var(--shadow-neu-out); position: relative; overflow: hidden; border: 1px solid transparent; background-clip: padding-box; /* Staggered entrance */ opacity: 0; transform: translateY(60px) scale(0.95); transition: opacity 0.9s var(--ease-out-expo), transform 0.9s var(--ease-out-expo), box-shadow 0.5s var(--ease-out-expo); } .countdown-section.in-view .countdown-unit { opacity: 1; transform: translateY(0) scale(1); } .countdown-section.in-view .countdown-unit:nth-child(1) { transition-delay: 0.15s; } .countdown-section.in-view .countdown-unit:nth-child(2) { transition-delay: 0.25s; } .countdown-section.in-view .countdown-unit:nth-child(3) { transition-delay: 0.35s; } .countdown-section.in-view .countdown-unit:nth-child(4) { transition-delay: 0.45s; } /* Gradient border — always visible, intensifies on hover */ .countdown-unit::before { content: ''; position: absolute; inset: -1px; border-radius: 23px; padding: 1px; background: linear-gradient(165deg, rgba(201,148,62,0.35), transparent 40%, transparent 60%, rgba(201,148,62,0.15)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; pointer-events: none; opacity: 0.6; transition: opacity 0.6s ease; } /* Top glow line — always visible, widens on hover */ .countdown-unit::after { content: ''; position: absolute; top: 0; left: 18%; right: 18%; height: 1px; background: linear-gradient(90deg, transparent, var(--amber), transparent); opacity: 0.5; transition: opacity 0.5s ease, left 0.5s var(--ease-out-expo), right 0.5s var(--ease-out-expo); } .countdown-unit:hover { transform: translateY(-8px) scale(1.02); box-shadow: var(--shadow-neu-out), 0 12px 40px rgba(0,0,0,0.2); } .countdown-unit:hover::before { opacity: 1; } .countdown-unit:hover::after { opacity: 0.85; left: 8%; right: 8%; } .countdown-number { font-family: 'Outfit', sans-serif; font-size: clamp(2.8rem, 6vw, 4.2rem); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; margin-bottom: 14px; color: var(--text); transition: color 0.25s ease, text-shadow 0.25s ease; } .countdown-number.tick { color: var(--amber); text-shadow: 0 0 28px var(--amber-glow); } .countdown-desc { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--text-dim); font-weight: 600; } /* ===== CONTACT ROW (under countdown) ===== */ .contact-row { display: flex; justify-content: center; gap: 14px; margin-top: 64px; position: relative; z-index: 1; scroll-margin-top: calc(var(--nav-height) + 24px); } .contact-row a, .contact-row .contact-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 50%; color: var(--text-secondary); transition: all var(--transition); box-shadow: var(--shadow-neu-out); padding: 0; font: inherit; cursor: pointer; } .contact-row a:hover, .contact-row .contact-icon:hover { color: var(--amber); border-color: rgba(201, 148, 62, 0.3); transform: translateY(-4px) scale(1.06); box-shadow: 0 6px 28px var(--amber-glow), var(--shadow-neu-out); } .contact-row a:active, .contact-row .contact-icon:active { box-shadow: var(--shadow-neu-in); transform: translateY(0) scale(0.94); } .contact-row a svg, .contact-row .contact-icon svg { width: 18px; height: 18px; } .email-picker { position: relative; display: inline-flex; } .email-menu { position: absolute; bottom: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(6px); min-width: 180px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px; box-shadow: var(--shadow-neu-out), 0 24px 64px rgba(0, 0, 0, 0.45); backdrop-filter: blur(20px); opacity: 0; pointer-events: none; transition: opacity 0.22s var(--ease-out-expo), transform 0.22s var(--ease-out-expo); z-index: 10; } .email-menu[hidden] { display: none; } .email-menu.open { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .email-menu::after { content: ''; position: absolute; top: 100%; left: 50%; width: 10px; height: 10px; margin-top: -6px; margin-left: -5px; background: var(--bg-card); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); transform: rotate(45deg); } .email-menu button { display: block; width: 100%; text-align: left; background: transparent; border: 0; color: var(--text-secondary); font: inherit; font-size: 0.85rem; padding: 10px 14px; border-radius: calc(var(--radius) - 4px); cursor: pointer; transition: background 0.18s ease, color 0.18s ease; } .email-menu button:hover, .email-menu button:focus-visible { background: var(--bg-card-hover); color: var(--amber); outline: none; } /* ===== TRUSTED BY ===== */ .trusted-by { padding: 60px 32px 40px; position: relative; z-index: 2; } .trusted-by-inner { max-width: var(--max-width); margin: 0 auto; text-align: center; } .trusted-by-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.28em; color: var(--text-dim); font-weight: 600; margin-bottom: 40px; } .trusted-by-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 56px 64px; opacity: 0.55; transition: opacity 0.4s ease; } .trusted-by-logos:hover { opacity: 0.9; } .trusted-logo { color: var(--text-secondary); transition: color 0.3s ease, transform 0.3s ease; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; white-space: nowrap; } .trusted-logo:hover { color: var(--text); transform: translateY(-2px); cursor: default; } /* Per-brand typographic treatments — each evokes the platform's wordmark */ .trusted-logo--spotify { font-weight: 800; font-size: 1.6rem; letter-spacing: -0.02em; } .trusted-logo--apple { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif; font-weight: 600; font-size: 1.45rem; letter-spacing: -0.015em; } .trusted-logo--tidal { font-weight: 300; font-size: 1.25rem; letter-spacing: 0.45em; } .trusted-logo--ytm { font-weight: 500; font-size: 1.4rem; letter-spacing: -0.01em; } .trusted-logo--amazon { font-family: 'Outfit', sans-serif; font-weight: 400; font-size: 1.4rem; letter-spacing: -0.005em; } .trusted-logo--deezer { font-weight: 500; font-size: 1.5rem; letter-spacing: 0.02em; } /* ===== FOOTER ===== */ .footer { padding: 60px 32px 80px; border-top: 1px solid var(--border); position: relative; z-index: 2; opacity: 0; transition: opacity 1s var(--ease-out-expo), border 0.4s ease; } .footer.visible { opacity: 1; } .footer-inner { max-width: var(--max-width); margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; } .footer-logo { font-family: 'Cavalero', serif; font-size: 1.5rem; letter-spacing: 0.08em; } .footer-copy { font-size: 0.76rem; color: var(--text-secondary); } /* ===== TOAST ===== */ .toast { position: fixed; bottom: 36px; left: 50%; transform: translateX(-50%) translateY(100px); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 28px; font-size: 0.84rem; font-weight: 500; color: var(--text-secondary); z-index: 2000; opacity: 0; transition: all 0.5s var(--ease-out-expo); pointer-events: none; white-space: nowrap; box-shadow: var(--shadow-neu-out), 0 24px 64px rgba(0,0,0,0.3); backdrop-filter: blur(20px); } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ===== RESPONSIVE ===== */ @media (max-width: 768px) { .nav-links { display: none; } .menu-toggle { display: block; } .mobile-nav { display: block; } .nav-inner { padding: 0 20px 0 16px; } .nav-logo { font-size: 1.35rem; } /* Mobile hero: switch from flex to block so the desktop's min-height:100vh + justify-content:center column can never compress the 1:1 photo or push the CTA on top of it. Block layout = items stack naturally, top-down, at their declared sizes. */ .hero { min-height: auto; padding: calc(var(--nav-height) + 32px) 20px 60px; display: block; text-align: center; } .hero-text { margin-bottom: 32px; } .hero h1 { font-size: clamp(2.6rem, 11vw, 4rem); } .hero h1.hero-wordmark { font-size: clamp(3rem, 16vw, 5.5rem); } /* Inherit desktop's photo sizing (width: 100% + max-width: 800px + aspect-ratio: 1/1) so the photo scales smoothly with viewport — no hard cap, no jump at the 768px breakpoint. Only the bottom margin is adjusted for mobile rhythm. object-fit: cover on the inner guards the square ratio against any nested aspect-ratio inference quirks. */ .hero-photo-scene { margin: 0 auto 56px; } .photo-main img { object-fit: cover; } .scene-transition { height: 56px; } .scene-transition--tight { height: 56px; } .countdown-section { padding: 24px 20px 100px; } .countdown { gap: 12px; } .countdown-unit { min-width: 72px; padding: 24px 14px 18px; border-radius: 16px; } .countdown-number { font-size: 2.2rem; } .contact-row { margin-top: 48px; } .trusted-by { padding: 40px 20px 32px; } .trusted-by-logos { gap: 28px 36px; } .trusted-logo--spotify { font-size: 1.25rem; } .trusted-logo--apple { font-size: 1.15rem; } .trusted-logo--tidal { font-size: 1rem; letter-spacing: 0.35em; } .trusted-logo--ytm { font-size: 1.1rem; } .trusted-logo--amazon { font-size: 1.1rem; } .trusted-logo--deezer { font-size: 1.2rem; } .footer { padding: 48px 20px 64px; } .cta-group { flex-direction: column; width: 100%; padding: 0 8px; } .btn-primary { width: 100%; justify-content: center; } .orb--1 { width: 400px; height: 400px; } .orb--2 { width: 300px; height: 300px; } .orb--3 { width: 220px; height: 220px; } } @media (max-width: 380px) { .countdown-unit { min-width: 65px; padding: 18px 10px 14px; } }