/* ============================================================ JourneyWell — Lite Stylesheet Light, Spotify/YouTube-inspired aesthetic for primary site pages. White background, black text, single accent green (#CFF42A). Pages using this load chrome.js and add . ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Cormorant+Garamond:ital,wght@1,400;1,500&display=swap'); body.lite { /* Color tokens (light) */ --bg: #ffffff; --bg-alt: #f7f7f8; --bg-card: #ffffff; --bg-hover: rgba(0, 0, 0, 0.04); --ink: #0a0a0a; --ink-2: #1f2024; --muted: #5d6066; --muted-2: #8a8d94; --line: rgba(0, 0, 0, 0.08); --line-strong: rgba(0, 0, 0, 0.16); --accent: #CFF42A; /* Spotify green */ --accent-deep: #CFF42A; --accent-tint: rgba(207, 244, 42, 0.10); --accent-glow: rgba(207, 244, 42, 0.22); --danger: #d61f4a; --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 1px rgba(0,0,0,0.03); --shadow-md: 0 6px 20px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04); --shadow-lg: 0 24px 60px rgba(0,0,0,0.10), 0 8px 16px rgba(0,0,0,0.05); --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 24px; --radius-pill: 999px; --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --serif: 'Cormorant Garamond', 'Apple Garamond', Garamond, serif; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.6; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.lite * { box-sizing: border-box; } body.lite a { color: inherit; text-decoration: none; } body.lite img { max-width: 100%; display: block; } /* ---------- LAYOUT PRIMITIVES ---------- */ body.lite .lite-container { max-width: 1180px; margin: 0 auto; padding: 0 28px; } body.lite .lite-narrow { max-width: 760px; margin: 0 auto; padding: 0 28px; } @media (max-width: 720px) { body.lite .lite-container, body.lite .lite-narrow { padding: 0 18px; } } body.lite .lite-section { padding: 96px 0; } body.lite .lite-section.tight { padding: 56px 0; } body.lite .lite-section.alt { background: var(--bg-alt); } /* ---------- NAV (overrides chrome.js dark nav) ---------- */ body.lite .nav { background: rgba(255,255,255,0.85); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; } body.lite .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; max-width: 1180px; margin: 0 auto; padding: 0 28px; } body.lite .logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font); font-weight: 800; font-size: 17px; letter-spacing: -0.01em; text-transform: none; color: var(--ink); } body.lite .nav-links { display: flex; gap: 4px; } body.lite .nav-links a { font-family: var(--font); font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); padding: 8px 14px; border-radius: var(--radius-pill); transition: background 150ms ease, color 150ms ease; } body.lite .nav-links a:hover { color: var(--ink); background: var(--bg-hover); } body.lite .nav-links a.active { color: var(--ink); background: var(--bg-hover); } body.lite .nav-links a.active::after { display: none; } body.lite .nav-cta { display: flex; align-items: center; gap: 12px; } body.lite .nav-cta .signin { font-family: var(--font); font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); } body.lite .nav-cta .signin:hover { color: var(--ink); } @media (max-width: 880px) { body.lite .nav-links { display: none; } } /* ---------- BUTTONS ---------- */ body.lite .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; font-family: var(--font); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; border-radius: var(--radius-pill); border: 1px solid transparent; transition: transform 120ms ease, box-shadow 150ms ease, background 150ms ease, border-color 150ms ease; cursor: pointer; white-space: nowrap; } body.lite .btn-large { padding: 14px 26px; font-size: 15px; } body.lite .btn svg.icon { width: 16px; height: 16px; flex-shrink: 0; } body.lite .btn-gold, body.lite .btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); } body.lite .btn-gold:hover, body.lite .btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); transform: translateY(-1px); box-shadow: 0 8px 24px var(--accent-glow); } body.lite .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); } body.lite .btn-ghost:hover { background: var(--bg-hover); border-color: var(--ink); } body.lite .btn-dark { background: var(--ink); color: #fff; border-color: var(--ink); } body.lite .btn-dark:hover { background: var(--ink-2); transform: translateY(-1px); box-shadow: var(--shadow-md); } /* ---------- TYPOGRAPHY ---------- */ body.lite h1, body.lite h2, body.lite h3, body.lite h4 { font-family: var(--font); letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); font-weight: 700; } body.lite h1 { font-size: clamp(40px, 6vw, 72px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; } body.lite h2 { font-size: clamp(28px, 4vw, 44px); font-weight: 700; } body.lite h3 { font-size: clamp(20px, 2.4vw, 26px); font-weight: 600; } body.lite p { color: var(--ink-2); } body.lite .muted { color: var(--muted); } body.lite em.serif, body.lite h1 em, body.lite h2 em { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--accent-deep); letter-spacing: -0.01em; } body.lite .eyebrow { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-deep); background: var(--accent-tint); padding: 6px 12px; border-radius: var(--radius-pill); margin-bottom: 18px; } body.lite .eyebrow.neutral { background: var(--bg-alt); color: var(--muted); border: 1px solid var(--line); } body.lite .lead { font-size: clamp(17px, 1.6vw, 19px); line-height: 1.55; color: var(--muted); max-width: 60ch; } /* ---------- HERO BRAND VIDEO ---------- */ /* Sits above .lite-hero. 16:9 landscape inside the same container. See index.html top of for the wiring plan (Creator Tunnel `hero` tag). */ body.lite .hero-video { padding: 0; } /* Full-bleed: bypass the .lite-container width + side padding so the frame spans the entire viewport. Keeps the section markup unchanged. */ body.lite .hero-video > .lite-container { max-width: none; padding: 0; } body.lite .hero-video-frame { position: relative; width: 100%; /* Fill the visible area below the sticky nav. `svh` keeps the value stable on mobile while the URL bar collapses; `vh` is the fallback for browsers without `svh` support. */ height: calc(100vh - var(--nav-h, 65px)); height: calc(100svh - var(--nav-h, 65px)); min-height: 360px; border-radius: 0; overflow: hidden; background: linear-gradient(135deg, #0e0e0e 0%, #1a1a1a 50%, #0a0a0a 100%); } body.lite .hero-video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; /* Start invisible; fade in once chrome.js flips data-ready on the video element (fires on `canplay`, so the frame stays empty during fetch + buffer instead of popping a blank placeholder, then the video glides in once it's actually ready to play). */ opacity: 0; transition: opacity 600ms ease; } body.lite .hero-video-frame video[data-ready="1"] { opacity: 1; } /* ---------- HERO VIDEO OVERLAY ---------- Centered text + CTA layered on top of the brand video. Sits ABOVE the video element via z-index because chrome.js inserts