/* ================================================================ landing.css — public marketing page for playlist.al / ONAIR Visual language aligns with the app: Aesop / Bottega-veneta / Linear / Vercel territory. Near-black neutral progression, warm cream foreground, a single warm-taupe accent used sparingly. No bright saturation anywhere; no candy-coloured aurora. Flat surfaces, hairline borders, inverted-monochrome primary button. Scoped under `.landing` so Bootstrap globals from base_simple.html don't bleed in. Forces dark visuals regardless of theme class on , because this surface is the brand front door — light mode is the dashboard concern, not the marketing site. ================================================================ */ /* ---------------------------------- 0. Tokens (scoped) ---------- */ .landing { /* Surface progression — same near-black as the app. */ --ink: #0a0a0a; /* base canvas, marginally cooler than the app */ --ink-1: #111111; /* sub-surface */ --ink-2: #161616; /* card surface */ --ink-3: #1c1c1c; /* raised surface */ /* Warm neutrals — matches app foreground/comment exactly. */ --cream: #f0eee8; /* foreground / button bg */ --cream-soft: #d8d4ca; --cream-mute: #8a857b; /* body copy on dark */ --cream-dim: #5a564f; --cream-deep: #38352f; /* Single accent — warm taupe, lifted slightly for marketing use. */ --taupe: #bea98e; --taupe-rgb: 190, 169, 142; --taupe-warm: #c9b598; /* hover */ --taupe-deep: #8c7c66; /* used in subtle borders */ /* Subtle semantic — kept desaturated, used very sparingly. */ --sage: #8a9b7b; --terracotta: #c2937a; --rose: #b08a85; /* Hairlines */ --hair: rgba(255, 255, 255, 0.06); --hair-strong: rgba(255, 255, 255, 0.12); --hair-faint: rgba(255, 255, 255, 0.04); /* Typography */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-serif: 'Instrument Serif', 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace; /* Motion */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* Radii — match app conservatism */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 9999px; /* Shadows — soft, deep blacks, no colored glows */ --shadow-1: 0 1px 2px rgba(0,0,0,0.5), 0 1px 1px rgba(0,0,0,0.3); --shadow-2: 0 4px 12px rgba(0,0,0,0.6), 0 2px 4px rgba(0,0,0,0.4); --shadow-3: 0 16px 40px rgba(0,0,0,0.7), 0 8px 16px rgba(0,0,0,0.5); --shadow-4: 0 30px 80px -16px rgba(0,0,0,0.8), 0 12px 32px -12px rgba(0,0,0,0.5); --shadow-bloom: 0 0 80px -20px rgba(var(--taupe-rgb), 0.25); /* Layout */ --max: 1280px; --max-narrow: 960px; --gutter: clamp(16px, 4vw, 48px); /* Force this canvas regardless of html.light-mode/dark-mode */ background: var(--ink); color: var(--cream); font-family: var(--font-sans); font-size: 0.9375rem; line-height: 1.5; letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; overflow-x: hidden; position: relative; scroll-behavior: smooth; } .landing *, .landing *::before, .landing *::after { box-sizing: border-box; } /* :where() so the reset doesn't outrank `.btn--primary` etc — without it the descendant `a` element bumps specificity above the variant class and primary buttons render cream-text-on-cream-bg. */ .landing :where(a) { color: inherit; text-decoration: none; } .landing img, .landing svg { display: block; } .landing :focus-visible { outline: 2px solid var(--taupe); outline-offset: 3px; border-radius: 4px; } /* Honour the motion preference — the scroll-behavior is set on `.landing` above; this disables it when the user has asked for less movement. */ @media (prefers-reduced-motion: reduce) { .landing { scroll-behavior: auto; } } /* ---------------------------------- 1. Ambient backdrop ---------- Subtle "studio light" + grain + grid. NO multi-colour aurora — a single soft warm-taupe radiance from the upper portion, plus a second softer one mid-page. Reads as filtered key light, not a nightclub. */ .aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .aurora__layer { position: absolute; border-radius: 50%; filter: blur(140px); opacity: 0.5; mix-blend-mode: screen; will-change: transform; } .aurora__layer--key { /* Upper warm key light — uses a centring transform, so its drift animation runs aurora-drift-key (preserves the -50% X offset). */ width: 75vw; height: 75vw; top: -42vw; left: 50%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(var(--taupe-rgb), 0.18), transparent 70%); animation: aurora-drift-key 30s var(--ease-in-out) infinite alternate; } .aurora__layer--fill { /* Right mid-page fill */ width: 55vw; height: 55vw; top: 35vh; right: -18vw; background: radial-gradient(closest-side, rgba(138, 155, 123, 0.07), transparent 70%); animation: aurora-drift 38s var(--ease-in-out) -10s infinite alternate; } .aurora__layer--rim { /* Bottom left rim light */ width: 60vw; height: 60vw; bottom: -28vw; left: -18vw; background: radial-gradient(closest-side, rgba(176, 138, 133, 0.06), transparent 70%); animation: aurora-drift 42s var(--ease-in-out) -22s infinite alternate; } @keyframes aurora-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(6%, 4%) scale(1.08); } } @keyframes aurora-drift-key { from { transform: translate(-50%, 0) scale(1); } to { transform: translate(-46%, 3%) scale(1.06); } } /* Faint grid overlay — only above the hero, fades out below. Provides architectural rigour without competing with the type. */ .aurora__grid { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px); background-size: 64px 64px; background-position: center top; mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, black 0%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, black 0%, transparent 75%); } /* Film grain — very low opacity */ .aurora__noise { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.94 0 0 0 0 0.93 0 0 0 0 0.91 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: 0.04; } /* Cursor-following soft light — set via JS-driven CSS vars. Falls back gracefully (just doesn't render) when JS is off. */ .aurora__cursor { position: absolute; width: 640px; height: 640px; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--taupe-rgb), 0.10), transparent 70%); filter: blur(40px); pointer-events: none; transform: translate3d(var(--mx, 50%), var(--my, 30%), 0) translate(-50%, -50%); transition: opacity 240ms var(--ease-out); opacity: 0; mix-blend-mode: screen; } .landing:hover .aurora__cursor, .landing.is-cursor-active .aurora__cursor { opacity: 1; } @media (max-width: 900px) { .aurora__cursor { display: none; } } @media (prefers-reduced-motion: reduce) { .aurora__layer { animation: none; } } /* ---------------------------------- 2. Nav ----------------------- Floating pill, hairline outline, subtle blur. Matches the app's tonal vocabulary — no neon, no glass-glow. */ .landing-nav { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); width: calc(100% - 32px); max-width: var(--max); z-index: 100; display: flex; align-items: center; gap: 24px; padding: 10px 12px 10px 20px; background: rgba(10, 10, 10, 0.7); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border: 1px solid var(--hair); border-radius: var(--r-pill); box-shadow: var(--shadow-2); transition: border-color 200ms var(--ease-out), background-color 200ms var(--ease-out); } .landing-nav.is-scrolled { background: rgba(10, 10, 10, 0.88); border-color: var(--hair-strong); } .brand-link { display: inline-flex; align-items: center; gap: 10px; color: var(--cream); flex-shrink: 0; } /* Brand mark — same vocabulary as the app header (square chip + on-air pulse dot). Sized for marketing display. */ .brand-mark { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; background: var(--ink-2); border: 1px solid var(--hair-strong); color: var(--cream); font-size: 12px; font-weight: 600; letter-spacing: -0.04em; flex-shrink: 0; transition: border-color 200ms var(--ease-out), background 200ms var(--ease-out); } .brand-link:hover .brand-mark { border-color: rgba(var(--taupe-rgb), 0.45); background: var(--ink-3); } .brand-mark__dot { position: absolute; top: 5px; right: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--taupe); box-shadow: 0 0 0 0 rgba(var(--taupe-rgb), 0.45); animation: pulse-air 2.4s var(--ease-in-out) infinite; } @keyframes pulse-air { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--taupe-rgb), 0.45); } 50% { box-shadow: 0 0 0 5px rgba(var(--taupe-rgb), 0); } } .brand-wordmark { font-size: 15px; font-weight: 600; letter-spacing: -0.025em; line-height: 1; color: var(--cream); } .brand-wordmark__sub { color: var(--cream-mute); font-weight: 500; } .landing-nav__links { display: flex; align-items: center; gap: 4px; margin-left: auto; margin-right: 8px; } .landing-nav__links a { color: var(--cream-mute); font-size: 13px; font-weight: 500; letter-spacing: -0.01em; padding: 8px 14px; border-radius: var(--r-pill); transition: color 160ms var(--ease-out), background 160ms var(--ease-out); } .landing-nav__links a:hover { color: var(--cream); background: rgba(255, 255, 255, 0.04); } .landing-nav__actions { display: flex; align-items: center; gap: 8px; } @media (max-width: 760px) { .landing-nav { padding: 8px 8px 8px 14px; gap: 12px; } .landing-nav__links { display: none; } .brand-wordmark__sub { display: none; } } /* ---------------------------------- 3. Buttons ------------------- Matches the app: primary is inverted monochrome (cream button, near- black text). Ghost is a quiet neutral. No translate-on-hover, no coloured glows. Premium = restraint. */ .btn { --btn-pad-y: 9px; --btn-pad-x: 18px; --btn-font: 13px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: var(--btn-pad-y) var(--btn-pad-x); border-radius: 10px; font-size: var(--btn-font); font-weight: 500; letter-spacing: -0.01em; border: 1px solid transparent; background: transparent; color: var(--cream); cursor: pointer; transition: background-color 160ms var(--ease-out), border-color 160ms var(--ease-out), color 160ms var(--ease-out), opacity 160ms var(--ease-out); white-space: nowrap; } .btn--lg { --btn-pad-y: 13px; --btn-pad-x: 22px; --btn-font: 14px; border-radius: 12px; } .btn--xl { --btn-pad-y: 16px; --btn-pad-x: 28px; --btn-font: 15px; border-radius: 14px; } .btn--primary { background: var(--cream); color: var(--ink); border-color: var(--cream); } .btn--primary:hover { background: #ffffff; border-color: #ffffff; color: var(--ink); } .btn--primary:active { opacity: 0.95; } .btn--ghost { background: transparent; border-color: var(--hair-strong); color: var(--cream); } .btn--ghost:hover { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.18); } .btn--quiet { background: transparent; color: var(--cream-mute); } .btn--quiet:hover { color: var(--cream); background: rgba(255, 255, 255, 0.03); } .btn__arrow { width: 14px; height: 14px; transition: transform 200ms var(--ease-out); } .btn:hover .btn__arrow { transform: translateX(2px); } /* ---------------------------------- 4. Hero ---------------------- */ .hero { position: relative; z-index: 2; padding: clamp(120px, 18vh, 180px) var(--gutter) clamp(60px, 10vh, 100px); max-width: var(--max); margin: 0 auto; } .hero__copy { max-width: 820px; margin: 0 auto; text-align: center; position: relative; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; background: var(--ink-2); border: 1px solid var(--hair); border-radius: var(--r-pill); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cream-soft); margin-bottom: 28px; } .eyebrow__dot { position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--taupe); box-shadow: 0 0 0 0 rgba(var(--taupe-rgb), 0.5); animation: pulse-air 2.4s var(--ease-in-out) infinite; } .eyebrow__divider { width: 1px; height: 10px; background: var(--hair-strong); margin: 0 2px; } .hero__title { font-family: var(--font-sans); font-size: clamp(2.5rem, 7vw, 5.25rem); font-weight: 600; letter-spacing: -0.045em; line-height: 0.98; margin: 0 0 28px; color: var(--cream); } .hero__title em { display: block; font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 1.04em; letter-spacing: -0.02em; background: linear-gradient(180deg, var(--cream) 0%, var(--taupe) 80%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-bottom: 0.08em; /* room for descenders inside the gradient mask */ } .hero__lede { font-size: clamp(1rem, 1.6vw, 1.1875rem); line-height: 1.6; color: var(--cream-mute); max-width: 580px; margin: 0 auto 36px; letter-spacing: -0.01em; } .hero__cta { display: inline-flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 56px; } .hero__signal { display: flex; gap: 32px; justify-content: center; flex-wrap: wrap; margin-bottom: 64px; } .hero__signal-item { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 140px; } .hero__signal-num { font-family: var(--font-sans); font-size: 22px; font-weight: 600; letter-spacing: -0.03em; color: var(--cream); font-variant-numeric: tabular-nums; } .hero__signal-label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cream-mute); } @media (max-width: 640px) { .hero__signal { gap: 20px; } .hero__signal-item { min-width: 100px; } } /* ---------------------------------- 5. Hero product showcase ----- The wow shot. A faux Content Studio dashboard rendered in CSS, with floating "module" cards around it. 3D tilt comes from JS-set CSS vars (--rx, --ry); graceful fallback to a static 4° X-rotation when JS is off. */ .showcase { position: relative; max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); perspective: 2200px; } .showcase__stage { position: relative; transform-style: preserve-3d; transform: rotateX(var(--rx, 8deg)) rotateY(var(--ry, 0deg)) scale(var(--rs, 1)); transition: transform 600ms var(--ease-out-soft); will-change: transform; } .showcase__shadow { position: absolute; left: 8%; right: 8%; bottom: -40px; height: 80px; background: radial-gradient(closest-side, rgba(0,0,0,0.85), transparent 70%); filter: blur(20px); z-index: 0; } /* Outer chrome — slightly thicker bezel, like a hardware mount. */ .studio { position: relative; border-radius: 16px; background: var(--ink-1); border: 1px solid var(--hair-strong); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), var(--shadow-4), var(--shadow-bloom); overflow: hidden; z-index: 1; } .studio__top { display: flex; align-items: center; gap: 16px; height: 44px; padding: 0 16px; background: rgba(255,255,255,0.015); border-bottom: 1px solid var(--hair); } .studio__dots { display: flex; gap: 6px; } .studio__dots span { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,0.12); } .studio__dots span:nth-child(1) { background: rgba(176, 92, 82, 0.55); } .studio__dots span:nth-child(2) { background: rgba(194, 147, 122, 0.55); } .studio__dots span:nth-child(3) { background: rgba(138, 155, 123, 0.55); } .studio__urlbar { flex: 1; display: flex; align-items: center; gap: 8px; height: 24px; padding: 0 10px; background: var(--ink); border: 1px solid var(--hair); border-radius: 7px; font-size: 11px; color: var(--cream-mute); font-family: var(--font-mono); letter-spacing: -0.01em; max-width: 320px; margin: 0 auto; } .studio__urlbar svg { width: 11px; height: 11px; opacity: 0.7; } .studio__urlbar-domain { color: var(--cream-soft); } .studio__top-actions { display: flex; gap: 6px; } .studio__top-actions span { width: 22px; height: 22px; border-radius: 6px; background: rgba(255,255,255,0.04); } .studio__app { display: grid; grid-template-columns: 220px 1fr; min-height: 460px; } /* Sidebar */ .studio__sidebar { border-right: 1px solid var(--hair); padding: 20px 14px; background: rgba(0,0,0,0.18); } .studio__brandchip { display: flex; align-items: center; gap: 10px; padding: 4px 6px 18px; margin-bottom: 6px; border-bottom: 1px solid var(--hair); } .studio__brandchip-mark { width: 26px; height: 26px; border-radius: 7px; background: var(--ink-3); border: 1px solid var(--hair-strong); font-size: 10px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; position: relative; } .studio__brandchip-mark::after { content: ''; position: absolute; top: 4px; right: 4px; width: 4px; height: 4px; border-radius: 50%; background: var(--taupe); } .studio__brandchip-name { font-size: 12px; font-weight: 600; letter-spacing: -0.02em; } .studio__nav { display: flex; flex-direction: column; gap: 2px; padding-top: 14px; } .studio__nav-section { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-dim); padding: 14px 8px 6px; font-weight: 600; } .studio__nav-item { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 7px; font-size: 12px; color: var(--cream-mute); letter-spacing: -0.01em; } .studio__nav-item svg { width: 14px; height: 14px; opacity: 0.75; flex-shrink: 0; } .studio__nav-item.is-active { background: rgba(var(--taupe-rgb), 0.10); color: var(--cream); border: 1px solid rgba(var(--taupe-rgb), 0.18); } .studio__nav-item.is-active svg { opacity: 1; color: var(--taupe); } .studio__nav-badge { margin-left: auto; font-size: 10px; padding: 1px 6px; border-radius: 6px; background: rgba(255,255,255,0.06); color: var(--cream-soft); font-variant-numeric: tabular-nums; } /* Main content */ .studio__main { padding: 22px 24px 28px; display: flex; flex-direction: column; gap: 18px; min-width: 0; } .studio__breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--cream-dim); letter-spacing: 0.02em; } .studio__breadcrumb strong { color: var(--cream-soft); font-weight: 500; } .studio__h { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; } .studio__title { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; margin: 0; } .studio__chip-row { display: flex; gap: 6px; flex-wrap: wrap; } .studio__chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill); font-size: 10.5px; font-weight: 500; background: var(--ink-2); border: 1px solid var(--hair); color: var(--cream-soft); letter-spacing: -0.005em; } .studio__chip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cream-mute); } .studio__chip.is-active { background: var(--cream); color: var(--ink); border-color: var(--cream); } .studio__chip.is-active .studio__chip-dot { background: var(--ink); } /* Stat row */ .studio__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .studio__stat { padding: 12px 14px; background: var(--ink-2); border: 1px solid var(--hair); border-radius: 12px; } .studio__stat-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cream-dim); margin-bottom: 6px; } .studio__stat-num { font-size: 18px; font-weight: 600; letter-spacing: -0.025em; color: var(--cream); font-variant-numeric: tabular-nums; } .studio__stat-delta { font-size: 10px; color: var(--sage); margin-top: 3px; font-variant-numeric: tabular-nums; } .studio__stat-delta--down { color: var(--rose); } /* Video grid */ .studio__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .thumb { border-radius: 9px; overflow: hidden; background: var(--ink-2); border: 1px solid var(--hair); display: flex; flex-direction: column; position: relative; transition: transform 240ms var(--ease-out), border-color 240ms var(--ease-out); } .thumb:hover { transform: translateY(-2px); border-color: var(--hair-strong); } .thumb__art { position: relative; aspect-ratio: 16 / 9; overflow: hidden; /* Slight darken+saturation pass so thumbnails sit in tonal family with the dark UI instead of screaming against it. Reduced in light mode. */ filter: saturate(0.92) contrast(0.96); } .thumb__art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.5) 100%); } .thumb__duration { position: absolute; bottom: 5px; right: 5px; z-index: 2; font-size: 9px; font-family: var(--font-mono); padding: 1.5px 4px; background: rgba(0,0,0,0.75); color: var(--cream); border-radius: 3px; letter-spacing: 0.02em; } .thumb__meta { padding: 9px 10px; display: flex; flex-direction: column; gap: 4px; } .thumb__title { font-size: 11px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; color: var(--cream-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .thumb__line { display: flex; align-items: center; gap: 5px; font-size: 9.5px; color: var(--cream-dim); } .thumb__line .dot { width: 2px; height: 2px; border-radius: 50%; background: var(--cream-dim); } .thumb__state { position: absolute; top: 5px; left: 5px; z-index: 2; font-size: 9px; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; } .thumb__state--ready { background: rgba(138, 155, 123, 0.18); color: var(--sage); border: 1px solid rgba(138, 155, 123, 0.25); } .thumb__state--draft { background: rgba(194, 147, 122, 0.16); color: var(--terracotta); border: 1px solid rgba(194, 147, 122, 0.25); } .thumb__state--new { background: rgba(var(--taupe-rgb), 0.16); color: var(--taupe); border: 1px solid rgba(var(--taupe-rgb), 0.28); } /* Concrete thumbnail "art" — actual YouTube thumbnails for recognisable poster content. Files live in /static/img/landing/thumbs/. background- size: cover + center keeps each thumb cropped to the 16:9 art window regardless of the source's exact aspect. The default tonal gradients stay as fallback in case an image 404s. */ .thumb__art--01 { background: #2a2622 url('/static/img/landing/thumbs/01-rickroll.jpg') center/cover no-repeat; } .thumb__art--02 { background: #1d2421 url('/static/img/landing/thumbs/02-gangnam.jpg') center/cover no-repeat; } .thumb__art--03 { background: #2a1d1f url('/static/img/landing/thumbs/03-despacito.jpg') center/cover no-repeat; } .thumb__art--04 { background: #1f1f24 url('/static/img/landing/thumbs/04-bohemian.jpg') center/cover no-repeat; } .thumb__art--05 { background: #2c2620 url('/static/img/landing/thumbs/05-hello.jpg') center/cover no-repeat; } .thumb__art--06 { background: #25201d url('/static/img/landing/thumbs/06-marshmello.jpg') center/cover no-repeat; } .thumb__art--07 { background: #1a1f24 url('/static/img/landing/thumbs/07-hotline.jpg') center/cover no-repeat; } .thumb__art--08 { background: #2a2218 url('/static/img/landing/thumbs/08-uptownfunk.jpg') center/cover no-repeat; } /* Floating module cards around the showcase */ .float-card { position: absolute; background: var(--ink-2); border: 1px solid var(--hair-strong); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow-3); z-index: 3; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: float-y 8s var(--ease-in-out) infinite alternate; transform: translateZ(50px); } .float-card__head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .float-card__icon { width: 24px; height: 24px; border-radius: 6px; background: rgba(var(--taupe-rgb), 0.16); border: 1px solid rgba(var(--taupe-rgb), 0.3); display: flex; align-items: center; justify-content: center; color: var(--taupe); } .float-card__icon svg { width: 12px; height: 12px; } .float-card__title { font-size: 11px; font-weight: 600; letter-spacing: -0.005em; color: var(--cream); } .float-card__tag { margin-left: auto; font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cream-dim); } /* AI Studio thumbnail variations card */ .float-card--ai { top: 18%; right: -6%; width: 260px; animation-delay: -2s; } .float-card--ai .float-card__variants { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .float-card--ai .variant { aspect-ratio: 16 / 9; border-radius: 6px; border: 1px solid var(--hair); position: relative; overflow: hidden; filter: saturate(0.9) contrast(0.95); } .float-card--ai .variant--01 { background: #2a2218 url('/static/img/landing/thumbs/01-rickroll.jpg') center/cover no-repeat; } .float-card--ai .variant--02 { background: #1d2421 url('/static/img/landing/thumbs/05-hello.jpg') center/cover no-repeat; } .float-card--ai .variant--03 { background: #2a1d1f url('/static/img/landing/thumbs/07-hotline.jpg') center/cover no-repeat; } .float-card--ai .variant.is-pick { border-color: var(--taupe); box-shadow: 0 0 0 2px rgba(var(--taupe-rgb), 0.35); filter: saturate(1.05) contrast(1) brightness(1.04); } /* Quiet diagonal halo on the pick — reads as "this is the selected variation" without bleaching the underlying thumbnail. */ .float-card--ai .variant.is-pick::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(var(--taupe-rgb), 0.16), transparent 55%), radial-gradient(closest-side at 50% 100%, rgba(var(--taupe-rgb), 0.22), transparent 70%); pointer-events: none; } .float-card__footer { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-size: 10px; color: var(--cream-dim); } .float-card__cta { font-size: 10px; font-weight: 500; color: var(--taupe); } /* Cut waveform card */ .float-card--cut { bottom: 12%; left: -7%; width: 280px; animation-delay: -5s; } .waveform { display: flex; align-items: flex-end; height: 42px; gap: 2px; padding: 4px 2px; margin: 6px 0; position: relative; } .waveform__bar { flex: 1; background: var(--cream-deep); border-radius: 1px; min-height: 8%; transition: background 200ms var(--ease-out); } .waveform__bar.is-kept { background: var(--cream-mute); } .waveform__bar.is-cut { background: rgba(176, 92, 82, 0.35); } .waveform__cut-marker { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(var(--taupe-rgb), 0.6); pointer-events: none; } .float-card--cut .float-card__footer strong { color: var(--cream); font-weight: 600; } @keyframes float-y { from { transform: translate(0, 0) translateZ(50px); } to { transform: translate(0, -10px) translateZ(50px); } } @media (max-width: 1100px) { .float-card--ai { right: -2%; } .float-card--cut { left: -2%; } } @media (max-width: 880px) { .showcase__stage { transform: rotateX(0deg); } .float-card { display: none; } .studio__app { grid-template-columns: 60px 1fr; min-height: 380px; } .studio__nav-item span { display: none; } .studio__nav-section { display: none; } .studio__brandchip-name { display: none; } .studio__stats { grid-template-columns: repeat(2, 1fr); } .studio__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .studio__top { height: 32px; padding: 0 10px; } .studio__dots span { width: 8px; height: 8px; } .studio__urlbar { display: none; } .studio__main { padding: 14px 14px 18px; gap: 12px; } .studio__h { flex-direction: column; align-items: flex-start; gap: 8px; } .studio__chip-row { gap: 4px; } .studio__chip { padding: 3px 8px; font-size: 9.5px; } .thumb__meta { padding: 6px 8px; } } /* ---------------------------------- 6. Trust strip --------------- */ .trust { position: relative; z-index: 2; padding: 80px var(--gutter) 20px; max-width: var(--max); margin: 0 auto; } .trust__label { text-align: center; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-dim); margin-bottom: 24px; } .trust__row { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 32px 56px; color: var(--cream-mute); opacity: 0.85; } .trust__item { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; letter-spacing: -0.015em; transition: color 200ms var(--ease-out); } .trust__item:hover { color: var(--cream); } .trust__icon { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.7; } /* ---------------------------------- 7. Section headers ----------- */ .section { position: relative; z-index: 2; padding: clamp(80px, 12vh, 140px) var(--gutter); max-width: var(--max); margin: 0 auto; } .section--narrow { max-width: var(--max-narrow); } .section-head { text-align: center; margin-bottom: clamp(48px, 7vh, 80px); max-width: 720px; margin-left: auto; margin-right: auto; } .section-tag { display: inline-block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--taupe); font-weight: 600; margin-bottom: 16px; } .section-tag::before { content: '— '; opacity: 0.6; } .section-title { font-size: clamp(1.875rem, 4.5vw, 3.25rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; margin: 0 0 16px; color: var(--cream); } .section-title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 1.05em; letter-spacing: -0.015em; background: linear-gradient(180deg, var(--cream) 0%, var(--taupe) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .section-lede { font-size: 1.0625rem; line-height: 1.6; color: var(--cream-mute); margin: 0 auto; max-width: 560px; letter-spacing: -0.01em; } /* ---------------------------------- 8. Module spotlights --------- */ .spotlight { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: center; padding: clamp(40px, 8vh, 80px) 0; border-top: 1px solid var(--hair); } .spotlight:first-of-type { border-top: 0; } .spotlight--reverse .spotlight__visual { order: 2; } .spotlight--reverse .spotlight__copy { order: 1; } .spotlight__copy { max-width: 480px; } .spotlight__tag { display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; background: rgba(var(--taupe-rgb), 0.10); border: 1px solid rgba(var(--taupe-rgb), 0.20); color: var(--taupe); border-radius: var(--r-pill); margin-bottom: 20px; } .spotlight__tag svg { width: 12px; height: 12px; } .spotlight__title { font-size: clamp(1.625rem, 3.2vw, 2.5rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; margin: 0 0 18px; color: var(--cream); } .spotlight__title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 1.04em; color: var(--taupe); background: none; -webkit-text-fill-color: var(--taupe); } .spotlight__lede { font-size: 1rem; line-height: 1.65; color: var(--cream-mute); margin: 0 0 24px; letter-spacing: -0.005em; } .spotlight__list { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 12px; } .spotlight__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9375rem; line-height: 1.55; color: var(--cream-soft); letter-spacing: -0.005em; } .spotlight__list svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--taupe); } .spotlight__link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--cream); font-weight: 500; padding: 4px 0; border-bottom: 1px solid transparent; transition: border-color 200ms var(--ease-out), color 200ms var(--ease-out); } .spotlight__link:hover { color: var(--taupe); border-bottom-color: var(--taupe); } .spotlight__link svg { width: 14px; height: 14px; transition: transform 200ms var(--ease-out); } .spotlight__link:hover svg { transform: translateX(3px); } /* Visual — each module gets its own custom CSS-only "screenshot" */ .spotlight__visual { position: relative; border-radius: var(--r-md); background: var(--ink-1); border: 1px solid var(--hair-strong); box-shadow: var(--shadow-3), inset 0 1px 0 rgba(255,255,255,0.04); overflow: hidden; min-height: 360px; padding: 20px; display: flex; flex-direction: column; } .spotlight__visual::before { content: ''; position: absolute; inset: -1px; background: linear-gradient(135deg, rgba(var(--taupe-rgb), 0.10) 0%, transparent 30%, transparent 70%, rgba(var(--taupe-rgb), 0.06) 100%); border-radius: inherit; pointer-events: none; mix-blend-mode: plus-lighter; } .spotlight__visual-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; font-size: 11px; color: var(--cream-dim); letter-spacing: 0.02em; } .spotlight__visual-tabs { display: flex; gap: 4px; } .spotlight__visual-tab { padding: 4px 10px; font-size: 11px; border-radius: 6px; color: var(--cream-mute); background: var(--ink-2); border: 1px solid var(--hair); } .spotlight__visual-tab.is-active { background: var(--cream); color: var(--ink); border-color: var(--cream); } /* --- AI Studio visual --- */ .ai-studio { display: grid; grid-template-rows: auto 1fr auto; gap: 14px; flex: 1; } .ai-studio__prompt { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--ink); border: 1px solid var(--hair); border-radius: 10px; font-size: 12px; color: var(--cream-soft); } .ai-studio__prompt svg { width: 14px; height: 14px; color: var(--taupe); flex-shrink: 0; } .ai-studio__prompt .cursor { display: inline-block; width: 1px; height: 12px; background: var(--taupe); margin-left: 4px; animation: cursor-blink 1.1s steps(2) infinite; vertical-align: middle; } @keyframes cursor-blink { to { opacity: 0; } } .ai-studio__grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 10px; } .ai-tile { aspect-ratio: 16 / 9; border-radius: 10px; border: 1px solid var(--hair); position: relative; overflow: hidden; transition: transform 200ms var(--ease-out), filter 200ms var(--ease-out); filter: saturate(0.9) contrast(0.96); } .ai-tile:hover { transform: scale(1.02); filter: saturate(1) contrast(1); } /* Soft gradient floor so the label badge stays readable over busy thumbnails. */ .ai-tile::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.55) 100%); pointer-events: none; } .ai-tile::after { content: attr(data-label); position: absolute; bottom: 5px; left: 6px; font-family: var(--font-mono); font-size: 9px; padding: 1px 4px; background: rgba(0,0,0,0.7); border-radius: 3px; color: var(--cream-soft); letter-spacing: 0.02em; z-index: 1; } .ai-tile--01 { background: #1f1a16 url('/static/img/landing/thumbs/05-hello.jpg') center/cover no-repeat; } .ai-tile--02 { background: #181c1a url('/static/img/landing/thumbs/06-marshmello.jpg') center/cover no-repeat; } .ai-tile--03 { background: #1f1a1d url('/static/img/landing/thumbs/04-bohemian.jpg') center/cover no-repeat; } .ai-tile--04 { background: #1c1a20 url('/static/img/landing/thumbs/07-hotline.jpg') center/cover no-repeat; } .ai-tile--05 { background: #2a2218 url('/static/img/landing/thumbs/08-uptownfunk.jpg') center/cover no-repeat; } .ai-tile--06 { background: #1a1f1a url('/static/img/landing/thumbs/03-despacito.jpg') center/cover no-repeat; } .ai-tile.is-pick { border-color: var(--taupe); box-shadow: 0 0 0 2px rgba(var(--taupe-rgb), 0.3); } .ai-tile.is-pick::before { content: ''; position: absolute; top: 6px; right: 6px; width: 16px; height: 16px; background: var(--taupe); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .ai-tile.is-pick::after { background: var(--taupe); color: var(--ink); } .ai-studio__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; background: var(--ink-2); border: 1px solid var(--hair); border-radius: 10px; font-size: 11px; color: var(--cream-soft); } .ai-studio__row-cluster { display: flex; align-items: center; gap: 6px; } .ai-studio__pill { padding: 3px 8px; background: var(--ink); border: 1px solid var(--hair); border-radius: 100px; font-size: 10px; font-family: var(--font-mono); color: var(--cream-mute); } /* --- Cut visual --- */ .cut { display: grid; grid-template-rows: auto 1fr auto; gap: 14px; flex: 1; } .cut__player { position: relative; aspect-ratio: 16 / 9; background: #1a1815 url('/static/img/landing/thumbs/04-bohemian.jpg') center/cover no-repeat; border-radius: 10px; border: 1px solid var(--hair); overflow: hidden; filter: saturate(0.88) contrast(0.94); } /* Twin overlays: subtle vignette so the play button + meta tags stay readable over whatever thumbnail loads, and a warm rim-light glow that gives the frame cinematic depth without bleaching the source. */ .cut__player::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, transparent 35%, rgba(0,0,0,0.45) 100%), radial-gradient(circle at 65% 38%, rgba(255,240,210, 0.18), transparent 55%); pointer-events: none; } .cut__player-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.9); color: var(--ink); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0,0,0,0.4); } .cut__player-play svg { width: 16px; height: 16px; transform: translateX(1px); } .cut__player-meta { position: absolute; bottom: 10px; left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.9); } .cut__player-meta .tag { padding: 2px 6px; background: rgba(0,0,0,0.5); border-radius: 4px; backdrop-filter: blur(4px); } .cut__timeline { background: var(--ink-2); border: 1px solid var(--hair); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 10px; } .cut__timeline-head { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--cream-mute); } .cut__timeline-head strong { color: var(--cream); font-weight: 600; } .cut__lane { position: relative; height: 56px; display: flex; align-items: flex-end; gap: 1px; } .cut__lane .waveform__bar { flex: 1; border-radius: 1.5px; min-height: 6%; } .cut__segment { position: absolute; top: 0; bottom: 0; background: rgba(176, 92, 82, 0.12); border-left: 1px dashed rgba(176, 92, 82, 0.7); border-right: 1px dashed rgba(176, 92, 82, 0.7); } .cut__segment-label { position: absolute; top: -16px; left: 4px; font-size: 9px; font-family: var(--font-mono); letter-spacing: 0.02em; color: rgba(194, 147, 122, 0.9); white-space: nowrap; } .cut__chip-row { display: flex; gap: 6px; flex-wrap: wrap; } .cut__chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 10.5px; border-radius: 6px; background: var(--ink); border: 1px solid var(--hair); color: var(--cream-soft); } .cut__chip svg { width: 10px; height: 10px; opacity: 0.7; } .cut__chip--detected { background: rgba(194, 147, 122, 0.10); border-color: rgba(194, 147, 122, 0.22); color: var(--terracotta); } /* --- Multi-platform visual --- */ .platform { display: grid; grid-template-rows: auto 1fr auto; gap: 12px; flex: 1; } .platform__top { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; } .platform-tile { padding: 10px 12px; background: var(--ink-2); border: 1px solid var(--hair); border-radius: 10px; } .platform-tile__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 11px; font-weight: 600; color: var(--cream); } .platform-tile__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sage); } .platform-tile__num { font-size: 18px; font-weight: 600; letter-spacing: -0.03em; color: var(--cream); font-variant-numeric: tabular-nums; } .platform-tile__label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cream-dim); } .platform__queue { background: var(--ink-2); border: 1px solid var(--hair); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 10px; } .platform__queue-head { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--cream-mute); } .queue-row { display: grid; grid-template-columns: 56px 1fr auto auto; align-items: center; gap: 12px; padding: 8px 4px; border-top: 1px solid var(--hair); font-size: 11.5px; } .queue-row:first-of-type { border-top: 0; padding-top: 4px; } .queue-row__thumb { aspect-ratio: 16/9; border-radius: 5px; background: #2a2218 url('/static/img/landing/thumbs/01-rickroll.jpg') center/cover no-repeat; filter: saturate(0.92) contrast(0.96); } .queue-row__thumb--02 { background: #1d2421 url('/static/img/landing/thumbs/06-marshmello.jpg') center/cover no-repeat; } .queue-row__thumb--03 { background: #2a1d1f url('/static/img/landing/thumbs/03-despacito.jpg') center/cover no-repeat; } .queue-row__title { font-weight: 500; color: var(--cream-soft); letter-spacing: -0.005em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .queue-row__platforms { display: inline-flex; align-items: center; gap: 4px; } .queue-row__platforms svg { width: 14px; height: 14px; color: var(--cream-mute); } .queue-row__state { font-family: var(--font-mono); font-size: 10px; padding: 2px 7px; border-radius: 4px; background: rgba(138, 155, 123, 0.14); color: var(--sage); border: 1px solid rgba(138, 155, 123, 0.22); letter-spacing: 0.02em; } .queue-row__state--draft { background: rgba(255,255,255,0.04); color: var(--cream-mute); border-color: var(--hair); } .queue-row__state--scheduled { background: rgba(var(--taupe-rgb), 0.12); color: var(--taupe); border-color: rgba(var(--taupe-rgb), 0.25); } .platform__schedule { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--ink); border: 1px solid var(--hair); border-radius: 10px; font-size: 11px; color: var(--cream-soft); } .platform__schedule svg { width: 14px; height: 14px; color: var(--taupe); } .platform__schedule .at { margin-left: auto; font-family: var(--font-mono); color: var(--cream-mute); } @media (max-width: 880px) { .spotlight { grid-template-columns: 1fr; gap: 32px; } .spotlight--reverse .spotlight__visual, .spotlight--reverse .spotlight__copy { order: initial; } .spotlight__visual { min-height: 320px; padding: 16px; } } /* ---------------------------------- 9. Bento (capabilities) ------ */ .bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(180px, auto); gap: 14px; } .bento-card { position: relative; background: var(--ink-1); border: 1px solid var(--hair); border-radius: var(--r-md); padding: 22px; overflow: hidden; transition: border-color 220ms var(--ease-out), background 220ms var(--ease-out); display: flex; flex-direction: column; gap: 12px; } .bento-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, rgba(var(--taupe-rgb), 0.08) 0%, transparent 35%, transparent 65%, rgba(var(--taupe-rgb), 0.04) 100%); opacity: 0; transition: opacity 240ms var(--ease-out); pointer-events: none; mix-blend-mode: plus-lighter; } .bento-card:hover { border-color: rgba(var(--taupe-rgb), 0.28); background: var(--ink-2); } .bento-card:hover::before { opacity: 1; } .bento-card > * { position: relative; } .bento-card__icon { width: 36px; height: 36px; border-radius: 10px; background: var(--ink-3); border: 1px solid var(--hair-strong); display: flex; align-items: center; justify-content: center; color: var(--taupe); } .bento-card__icon svg { width: 16px; height: 16px; } .bento-card__title { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.02em; margin: 0; color: var(--cream); } .bento-card__copy { font-size: 0.875rem; line-height: 1.55; color: var(--cream-mute); margin: 0; letter-spacing: -0.005em; } /* Featured (wide) bento cards. 4-col grid: - default card: span 1 col (small chip) - `--medium`: span 2 cols - `--feature`: span 2 cols × 2 rows (the hero of the bento) - `--full`: span 4 cols (full-width manifesto card) Legacy aliases (`--wide`, `--third`) map onto the new modifiers so old markup keeps rendering. */ .bento-card--medium { grid-column: span 2; } .bento-card--full { grid-column: span 4; } .bento-card--third { grid-column: span 2; } /* legacy alias → medium */ .bento-card--wide { grid-column: span 2; } /* legacy alias → medium */ .bento-card--feature { grid-column: span 2; grid-row: span 2; padding: 32px; background: radial-gradient(120% 80% at 100% 0%, rgba(var(--taupe-rgb), 0.12), transparent 60%), var(--ink-1); border-color: var(--hair-strong); } .bento-card--feature .bento-card__title { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.025em; } .bento-card__deco { margin-top: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .bento-card__deco-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--ink-2); border: 1px solid var(--hair); border-radius: 100px; font-size: 11px; color: var(--cream-soft); letter-spacing: -0.005em; } .bento-card__deco-chip svg { width: 12px; height: 12px; opacity: 0.7; } /* Sparkline visual for the analytics card */ .bento-card__spark { margin-top: auto; height: 60px; position: relative; } .bento-card__spark svg { width: 100%; height: 100%; } .bento-card__spark path { stroke: var(--taupe); stroke-width: 1.5; fill: none; } .bento-card__spark .area { fill: url(#sparkGradient); stroke: none; } /* Browser-extension card visual */ .bento-card__ext { margin-top: auto; height: 76px; border-radius: 8px; background: var(--ink); border: 1px solid var(--hair); position: relative; overflow: hidden; } .bento-card__ext::before { content: ''; position: absolute; top: 8px; left: 8px; right: 8px; height: 18px; background: var(--ink-2); border-radius: 4px; border: 1px solid var(--hair); } .bento-card__ext::after { content: 'youtube.com/watch?v=…'; position: absolute; top: 13px; left: 16px; font-family: var(--font-mono); font-size: 9px; color: var(--cream-mute); } .bento-card__ext-chip { position: absolute; top: 33px; left: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; background: rgba(var(--taupe-rgb), 0.15); border: 1px solid rgba(var(--taupe-rgb), 0.3); border-radius: 6px; font-size: 10px; color: var(--taupe); font-weight: 500; } .bento-card__ext-chip svg { width: 10px; height: 10px; } @media (max-width: 880px) { .bento { grid-template-columns: repeat(2, 1fr); } .bento-card { grid-column: span 1; } .bento-card--medium, .bento-card--third, .bento-card--wide, .bento-card--feature, .bento-card--full { grid-column: span 2; } .bento-card--feature { grid-row: auto; padding: 28px; } } @media (max-width: 560px) { .bento { grid-template-columns: 1fr; gap: 10px; } .bento-card, .bento-card--medium, .bento-card--third, .bento-card--wide, .bento-card--feature, .bento-card--full { grid-column: span 1; grid-row: auto; } .bento-card--feature { padding: 24px; } } /* ---------------------------------- 10. Manifesto / pull-quote --- */ .manifesto { position: relative; z-index: 2; padding: clamp(80px, 14vh, 160px) var(--gutter); max-width: var(--max-narrow); margin: 0 auto; } .manifesto__inner { text-align: center; position: relative; padding: 0 4%; } .manifesto__mark { font-family: var(--font-serif); font-style: italic; font-size: 72px; line-height: 1; color: var(--taupe); opacity: 0.85; margin-bottom: 12px; } .manifesto__quote { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(1.5rem, 3.5vw, 2.75rem); line-height: 1.25; letter-spacing: -0.015em; color: var(--cream); margin: 0 0 28px; } .manifesto__attribution { font-family: var(--font-sans); font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--cream-mute); } /* ---------------------------------- 11. Final CTA ---------------- */ .cta { position: relative; z-index: 2; padding: clamp(40px, 8vh, 80px) var(--gutter) clamp(80px, 14vh, 140px); max-width: var(--max); margin: 0 auto; } .cta__card { position: relative; overflow: hidden; border-radius: var(--r-xl); border: 1px solid var(--hair-strong); padding: clamp(48px, 8vh, 88px) clamp(24px, 5vw, 80px); text-align: center; background: radial-gradient(80% 80% at 50% 0%, rgba(var(--taupe-rgb), 0.18), transparent 65%), radial-gradient(60% 50% at 50% 100%, rgba(var(--taupe-rgb), 0.08), transparent 70%), var(--ink-1); box-shadow: var(--shadow-3), inset 0 1px 0 rgba(255,255,255,0.06); } .cta__card::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 0%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 0%, transparent 80%); opacity: 0.7; pointer-events: none; } .cta__card > * { position: relative; } .cta__tag { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 8px; background: var(--ink); border: 1px solid var(--hair); border-radius: var(--r-pill); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cream-soft); margin-bottom: 24px; } .cta__tag-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--taupe); animation: pulse-air 2.4s var(--ease-in-out) infinite; } .cta__title { font-size: clamp(2rem, 5vw, 3.75rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; margin: 0 0 16px; color: var(--cream); } .cta__title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 1.05em; background: linear-gradient(180deg, var(--cream), var(--taupe)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .cta__lede { font-size: 1.0625rem; color: var(--cream-mute); margin: 0 auto 36px; max-width: 540px; line-height: 1.6; letter-spacing: -0.005em; } .cta__actions { display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: center; } .cta__fine { margin-top: 28px; font-size: 12px; color: var(--cream-dim); } /* ---------------------------------- 12. Footer ------------------- */ .landing-footer { position: relative; z-index: 2; padding: 60px var(--gutter) 32px; max-width: var(--max); margin: 0 auto; border-top: 1px solid var(--hair); } .landing-footer__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-bottom: 40px; } .landing-footer__brand { max-width: 320px; } .landing-footer__brand p { margin-top: 14px; font-size: 13px; color: var(--cream-mute); line-height: 1.55; } .landing-footer__cols { display: grid; grid-template-columns: repeat(3, minmax(120px, auto)); gap: 40px; } .landing-footer__col h4 { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-dim); margin: 0 0 14px; } .landing-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } .landing-footer__col a { font-size: 13px; color: var(--cream-mute); transition: color 160ms var(--ease-out); } .landing-footer__col a:hover { color: var(--cream); } .landing-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--hair); font-size: 12px; color: var(--cream-dim); } .landing-footer__bottom p { margin: 0; } .landing-footer__bottom .tag { display: inline-flex; align-items: center; gap: 6px; } .landing-footer__bottom .tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--taupe); display: inline-block; } @media (max-width: 720px) { .landing-footer__top { flex-direction: column; gap: 32px; } .landing-footer__cols { grid-template-columns: repeat(2, 1fr); gap: 24px; } .landing-footer__bottom { flex-direction: column; align-items: flex-start; } } /* ---------------------------------- 13. Scroll reveals ----------- */ [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 700ms var(--ease-out-soft), transform 700ms var(--ease-out-soft); will-change: opacity, transform; } [data-reveal].is-visible { opacity: 1; transform: translateY(0); } [data-reveal-delay="1"] { transition-delay: 60ms; } [data-reveal-delay="2"] { transition-delay: 120ms; } [data-reveal-delay="3"] { transition-delay: 180ms; } [data-reveal-delay="4"] { transition-delay: 240ms; } [data-reveal-delay="5"] { transition-delay: 300ms; } /* If JS never runs (no IntersectionObserver), still show everything so the page isn't permanently invisible. landing.js strips .no-js on load, so the reveal animation only kicks in when JS is up. */ .landing.no-js [data-reveal] { opacity: 1; transform: none; transition: none; } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } } /* ---------------------------------- 14a. Mobile polish ---------- Phone tier (≤640px). Goal: it shouldn't feel like a desktop page bashed into a phone — it should feel designed for the device. Bigger display type, full-width CTAs, smarter rhythm, generous breathing room. Touch targets honour Apple HIG (≥44px). */ @media (max-width: 760px) { /* Nav — tighten, hide brand subtext, keep theme toggle */ .landing .landing-nav { top: 12px; width: calc(100% - 20px); padding: 6px 6px 6px 12px; gap: 8px; border-radius: 16px; } .landing .landing-nav__actions { gap: 4px; } .landing .brand-mark { width: 30px; height: 30px; border-radius: 8px; font-size: 11px; } .landing .brand-wordmark { font-size: 14px; } .landing .brand-wordmark__sub { display: none; } .landing .landing-nav .btn--quiet { display: none; } /* "Sign in" collapses into primary on phone */ .landing .landing-nav .btn--primary { padding: 8px 14px; font-size: 12.5px; border-radius: 10px; } .landing .landing-nav .btn--primary .btn__arrow { width: 12px; height: 12px; } .landing .theme-toggle { width: 38px; height: 38px; border-radius: 10px; } .landing .theme-toggle svg { width: 15px; height: 15px; } /* Hero — bolder min size, more vertical air */ .landing .hero { padding-top: clamp(96px, 18vh, 140px); padding-bottom: 48px; } .landing .hero__title { font-size: clamp(2.6rem, 11vw, 4rem); letter-spacing: -0.04em; } .landing .hero__lede { font-size: 1.0625rem; line-height: 1.5; padding: 0 4px; } .landing .eyebrow { font-size: 10px; padding: 5px 10px 5px 8px; } /* CTA stack — each button full-width, capped so they don't feel lonely */ .landing .hero__cta { display: flex; flex-direction: column; align-items: stretch; width: 100%; max-width: 360px; margin-left: auto; margin-right: auto; gap: 10px; margin-bottom: 48px; } .landing .hero__cta .btn { width: 100%; padding: 14px 20px; font-size: 14px; min-height: 48px; } /* Signal row — centred 1-col list with hairline rules */ .landing .hero__signal { flex-direction: column; gap: 0; margin-bottom: 36px; max-width: 320px; margin-left: auto; margin-right: auto; border-top: 1px solid var(--hair); } .landing .hero__signal-item { flex-direction: row; align-items: baseline; justify-content: space-between; width: 100%; padding: 14px 4px; border-bottom: 1px solid var(--hair); gap: 12px; min-width: 0; } .landing .hero__signal-num { font-size: 14px; font-weight: 600; } .landing .hero__signal-label { font-size: 10px; letter-spacing: 0.1em; color: var(--cream-dim); text-align: right; } /* Section type — heavier hero feel on phone */ .landing .section { padding-top: clamp(72px, 12vh, 100px); padding-bottom: clamp(72px, 12vh, 100px); } .landing .section-head { margin-bottom: 40px; } .landing .section-title { font-size: clamp(1.75rem, 7vw, 2.5rem); letter-spacing: -0.03em; } .landing .section-tag { font-size: 10px; letter-spacing: 0.18em; } .landing .section-lede { font-size: 0.9375rem; } /* Spotlight — single column with proper rhythm */ .landing .spotlight { padding: 32px 0 8px; gap: 24px; } .landing .spotlight:first-of-type { padding-top: 0; } .landing .spotlight__title { font-size: clamp(1.5rem, 6vw, 2rem); } .landing .spotlight__lede { font-size: 0.9375rem; } .landing .spotlight__list li { font-size: 0.875rem; line-height: 1.5; } .landing .spotlight__visual { min-height: 280px; padding: 14px; border-radius: 14px; } .landing .spotlight__visual-head { font-size: 10px; margin-bottom: 12px; } /* AI Studio mock — keep 3 cols, tighter gap */ .landing .ai-studio__grid { gap: 7px; } .landing .ai-tile::after { font-size: 8px; padding: 1px 3px; } .landing .ai-studio__pill { font-size: 9px; padding: 2px 6px; } /* Cut player + timeline — readable at width */ .landing .cut__timeline { padding: 10px; gap: 8px; } .landing .cut__segment-label { font-size: 8px; } .landing .cut__chip { font-size: 9.5px; padding: 3px 8px; } /* Platform tile triple → still fits, smaller numbers */ .landing .platform-tile { padding: 8px 10px; } .landing .platform-tile__num { font-size: 16px; } .landing .queue-row { grid-template-columns: 44px 1fr auto; column-gap: 10px; } .landing .queue-row__platforms { display: none; } /* Manifesto pull-quote — bigger serif for that magazine feel */ .landing .manifesto { padding-left: 6px; padding-right: 6px; } .landing .manifesto__mark { font-size: 56px; } .landing .manifesto__quote { font-size: clamp(1.5rem, 6.5vw, 2.25rem); line-height: 1.22; } /* Final CTA — tight title + full-width buttons */ .landing .cta__card { padding: 40px 20px 36px; border-radius: 22px; } .landing .cta__tag { font-size: 10px; padding: 4px 10px 4px 6px; margin-bottom: 18px; } .landing .cta__title { font-size: clamp(1.75rem, 7vw, 2.75rem); } .landing .cta__lede { font-size: 0.9375rem; margin-bottom: 28px; } .landing .cta__actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: 100%; max-width: 320px; margin: 0 auto; } .landing .cta__actions .btn { width: 100%; padding: 14px 20px; font-size: 14px; min-height: 48px; } .landing .cta__fine { font-size: 11px; } /* Footer — looser stacking, less awkward */ .landing .landing-footer { padding-top: 48px; padding-bottom: 24px; } .landing .landing-footer__top { gap: 36px; margin-bottom: 32px; } .landing .landing-footer__cols { grid-template-columns: 1fr 1fr; gap: 28px 36px; } .landing .landing-footer__col h4 { margin-bottom: 12px; } .landing .landing-footer__bottom { gap: 8px; } /* Touch hygiene — kill grey tap flash, ensure manipulation gesture */ .landing a, .landing button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } } @media (max-width: 480px) { /* Studio mock — collapse the chrome further; let the grid breathe */ .landing .showcase { padding-left: 12px; padding-right: 12px; } .landing .showcase__stage { transform: none; } .landing .studio__top { padding: 0 10px; height: 32px; } .landing .studio__dots span { width: 8px; height: 8px; } .landing .studio__urlbar { display: none; } .landing .studio__top-actions { display: none; } .landing .studio__app { grid-template-columns: 48px 1fr; min-height: 360px; } .landing .studio__sidebar { padding: 14px 8px; } .landing .studio__brandchip { padding-bottom: 14px; gap: 0; } .landing .studio__brandchip-name, .landing .studio__nav-item span, .landing .studio__nav-badge, .landing .studio__nav-section { display: none; } .landing .studio__nav-item { justify-content: center; padding: 8px 0; } .landing .studio__main { padding: 14px 12px 18px; gap: 14px; min-width: 0; } .landing .studio__breadcrumb { font-size: 10px; } .landing .studio__h { flex-direction: column; align-items: flex-start; gap: 10px; } .landing .studio__title { font-size: 16px; } .landing .studio__chip { padding: 3px 9px; font-size: 10px; } .landing .studio__stats { grid-template-columns: 1fr 1fr; gap: 8px; } .landing .studio__stat { padding: 10px 12px; } .landing .studio__stat-num { font-size: 16px; } .landing .studio__grid { grid-template-columns: 1fr 1fr; gap: 8px; } .landing .thumb__meta { padding: 8px 10px; } .landing .thumb__title { font-size: 10.5px; } .landing .thumb__line { font-size: 9px; } .landing .thumb__duration { font-size: 8.5px; bottom: 4px; right: 4px; } .landing .thumb__state { font-size: 8.5px; padding: 1.5px 5px; } /* Bento — single column, but feel rich, not stacked rectangles */ .landing .bento { gap: 10px; } .landing .bento-card { padding: 22px 20px; } .landing .bento-card--feature { padding: 26px 22px; } .landing .bento-card__icon { width: 32px; height: 32px; border-radius: 9px; } .landing .bento-card__icon svg { width: 14px; height: 14px; } .landing .bento-card--feature .bento-card__title { font-size: 1.25rem; } /* Section padding gets a hair tighter so content dominates */ .landing .section { padding-left: 16px; padding-right: 16px; } /* Hero text — slightly smaller min so the long phrase wraps to two clean lines instead of three uneven ones on the smallest devices. */ .landing .hero__title { font-size: clamp(2.25rem, 10.5vw, 3.5rem); } } /* iOS Safari notch / home-indicator safe areas — push the bottom CTA block above the home bar so it never sits under the gesture handle. */ @supports (padding: max(0px)) { .landing .landing-footer { padding-bottom: max(24px, env(safe-area-inset-bottom)); } .landing .cta { padding-bottom: max(80px, env(safe-area-inset-bottom)); } } /* ---------------------------------- 14. Utilities ---------------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ---------------------------------- 15. Light theme overrides --- Triggered when base_simple.html stamps `html.light-mode` from the user's saved preference or their system setting. Mirrors the app's light theme (`themes/_light.css`): warm paper (#f8f7f4) + near- black ink + a deeper taupe accent. Same brand register, inverted tonal stack. We override the small set of tokens that change — everything keyed off them (cards, hairlines, buttons, glows) picks the new values up automatically. */ html.light-mode .landing { /* Paper progression — pure white reads sterile; the existing app uses warm cream/paper to keep the taupe accent in family. */ --ink: #f8f7f4; --ink-1: #ffffff; --ink-2: #fbfaf6; --ink-3: #f1ede4; /* Ink progression — near-black sits at the top of the scale, gradually warming through grays. */ --cream: #0c0c0c; /* foreground / button bg in dark, ink here */ --cream-soft: #2a2825; --cream-mute: #6b655a; /* body copy on cream */ --cream-dim: #8a857b; --cream-deep: #b8b3a8; /* Single accent — slightly deeper taupe to read on warm paper. Matches themes/_light.css's --theme-accent exactly. */ --taupe: #8a7357; --taupe-rgb: 138, 115, 87; --taupe-warm: #9c8568; --taupe-deep: #6b573e; /* Semantic tints — pulled deeper so they're readable on cream. */ --sage: #5c6e4e; --terracotta: #9c6a50; --rose: #8a5e59; /* Hairlines flip from white-rgba to black-rgba. */ --hair: rgba(12, 12, 12, 0.08); --hair-strong: rgba(12, 12, 12, 0.16); --hair-faint: rgba(12, 12, 12, 0.04); /* Shadows — heavy near-blacks read as smudges on cream. Drop the ink to a warm gray and lower the alphas. */ --shadow-1: 0 1px 2px rgba(60, 50, 35, 0.06), 0 1px 1px rgba(60, 50, 35, 0.03); --shadow-2: 0 4px 12px rgba(60, 50, 35, 0.08), 0 2px 4px rgba(60, 50, 35, 0.05); --shadow-3: 0 16px 40px rgba(60, 50, 35, 0.12), 0 6px 14px rgba(60, 50, 35, 0.06); --shadow-4: 0 30px 80px -16px rgba(60, 50, 35, 0.18), 0 12px 32px -12px rgba(60, 50, 35, 0.10); --shadow-bloom: 0 0 80px -20px rgba(var(--taupe-rgb), 0.18); /* Container surface override — `.landing` itself paints the canvas; the dark default is on `.landing { background }`, so flip it here. */ background: var(--ink); color: var(--cream); } /* Tweaks that aren't just token-substitutions ─────────────────── */ /* Aurora reads as too "stagey" on light bg — reduce opacity so the warm glow is felt, not seen. */ html.light-mode .landing .aurora__layer { opacity: 0.55; mix-blend-mode: multiply; } html.light-mode .landing .aurora__layer--key { background: radial-gradient(closest-side, rgba(var(--taupe-rgb), 0.14), transparent 70%); } html.light-mode .landing .aurora__layer--fill { background: radial-gradient(closest-side, rgba(92, 110, 78, 0.07), transparent 70%); } html.light-mode .landing .aurora__layer--rim { background: radial-gradient(closest-side, rgba(156, 106, 80, 0.06), transparent 70%); } html.light-mode .landing .aurora__cursor { background: radial-gradient(closest-side, rgba(var(--taupe-rgb), 0.10), transparent 70%); mix-blend-mode: multiply; } html.light-mode .landing .aurora__noise { opacity: 0.025; } /* Grid overlay — black 1px lines on cream */ html.light-mode .landing .aurora__grid { background-image: linear-gradient(to right, rgba(12,12,12,0.035) 1px, transparent 1px), linear-gradient(to bottom, rgba(12,12,12,0.035) 1px, transparent 1px); } /* Nav pill — light variant. */ html.light-mode .landing .landing-nav { background: rgba(248, 247, 244, 0.82); } html.light-mode .landing .landing-nav.is-scrolled { background: rgba(248, 247, 244, 0.95); } /* Brand mark — invert chip surface */ html.light-mode .landing .brand-mark { background: var(--ink-3); color: var(--cream); border-color: var(--hair-strong); } /* Primary button = inverted monochrome → near-black on cream */ html.light-mode .landing .btn--primary { background: var(--cream); color: var(--ink); border-color: var(--cream); } html.light-mode .landing .btn--primary:hover { background: #000000; border-color: #000000; color: var(--ink); } /* Ghost button border + hover */ html.light-mode .landing .btn--ghost { border-color: var(--hair-strong); } html.light-mode .landing .btn--ghost:hover { background: rgba(12, 12, 12, 0.04); border-color: rgba(12, 12, 12, 0.2); } html.light-mode .landing .btn--quiet:hover { color: var(--cream); background: rgba(12, 12, 12, 0.04); } /* Hero title gradient — `cream` is now ink. Run the gradient ink→taupe so the italic still warms toward the accent. */ html.light-mode .landing .hero__title em, html.light-mode .landing .section-title em, html.light-mode .landing .cta__title em { background: linear-gradient(180deg, var(--cream) 0%, var(--taupe) 90%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Studio mock chrome — invert dot row tints and shadow */ html.light-mode .landing .studio { background: var(--ink-1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), var(--shadow-4), var(--shadow-bloom); } html.light-mode .landing .studio__dots span { background: rgba(12, 12, 12, 0.16); } html.light-mode .landing .studio__dots span:nth-child(1) { background: rgba(138, 62, 52, 0.6); } html.light-mode .landing .studio__dots span:nth-child(2) { background: rgba(156, 106, 80, 0.6); } html.light-mode .landing .studio__dots span:nth-child(3) { background: rgba(92, 110, 78, 0.6); } html.light-mode .landing .studio__sidebar { background: rgba(12, 12, 12, 0.02); } html.light-mode .landing .studio__urlbar { background: var(--ink-2); } html.light-mode .landing .studio__chip.is-active { background: var(--cream); color: var(--ink); } html.light-mode .landing .studio__chip.is-active .studio__chip-dot { background: var(--ink); } /* Studio-grid thumbnails share the dark-mode photographic sources (the url() backgrounds on .thumb__art--01..08). In light mode we only lift the tonal pass via `filter` (see .thumb__art below) — no gradient override, so the real posters stay on cream paper too. */ /* The duration badge is dark-on-light → keep readable */ html.light-mode .landing .thumb__duration { background: rgba(12, 12, 12, 0.75); color: #f8f7f4; } /* Float-card sidebars + per-tile cards */ html.light-mode .landing .float-card { background: var(--ink-1); backdrop-filter: blur(8px); } /* AI Studio variations + tiles use the same lighter palette */ /* AI Studio variations + tiles + Cut player share the dark-mode thumbnail sources. In light mode we just lift the tonal pass via `filter` so they sit on cream paper without an extra dark cast. */ html.light-mode .landing .float-card--ai .variant { filter: saturate(0.85) contrast(0.94) brightness(1.05); } html.light-mode .landing .float-card--ai .variant.is-pick { filter: saturate(1) contrast(1) brightness(1.06); } html.light-mode .landing .ai-tile { filter: saturate(0.85) contrast(0.94) brightness(1.04); } html.light-mode .landing .ai-tile:hover { filter: saturate(0.95) contrast(0.98) brightness(1.06); } html.light-mode .landing .cut__player { filter: saturate(0.86) contrast(0.93) brightness(1.04); } /* Queue thumbnails — slight tonal lift in light mode (same source images, the cover/center positioning is shared). */ html.light-mode .landing .queue-row__thumb, html.light-mode .landing .queue-row__thumb--02, html.light-mode .landing .queue-row__thumb--03 { filter: saturate(0.85) contrast(0.95) brightness(1.04); } html.light-mode .landing .thumb__art { filter: saturate(0.85) contrast(0.94) brightness(1.04); } /* Wave bars — flip the muted greys to warmer tints */ html.light-mode .landing .waveform__bar { background: rgba(12, 12, 12, 0.12); } html.light-mode .landing .waveform__bar.is-kept { background: rgba(12, 12, 12, 0.34); } html.light-mode .landing .waveform__bar.is-cut { background: rgba(156, 106, 80, 0.35); } /* Bento feature glow */ html.light-mode .landing .bento-card--feature { background: radial-gradient(120% 80% at 100% 0%, rgba(var(--taupe-rgb), 0.16), transparent 60%), var(--ink-1); } /* Final CTA card glow */ html.light-mode .landing .cta__card { background: radial-gradient(80% 80% at 50% 0%, rgba(var(--taupe-rgb), 0.22), transparent 65%), radial-gradient(60% 50% at 50% 100%, rgba(var(--taupe-rgb), 0.10), transparent 70%), var(--ink-1); box-shadow: var(--shadow-3), inset 0 1px 0 rgba(255, 255, 255, 0.8); } html.light-mode .landing .cta__card::before { background-image: linear-gradient(to right, rgba(12,12,12,0.035) 1px, transparent 1px), linear-gradient(to bottom, rgba(12,12,12,0.035) 1px, transparent 1px); } /* ---------------------------------- 16. Theme toggle ----------- */ .theme-toggle { position: relative; width: 36px; height: 36px; border-radius: 9px; background: transparent; border: 1px solid var(--hair-strong); cursor: pointer; color: var(--cream-soft); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; transition: background-color 200ms var(--ease-out), border-color 200ms var(--ease-out), color 200ms var(--ease-out); } .theme-toggle:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.2); color: var(--cream); } html.light-mode .landing .theme-toggle:hover { background: rgba(12, 12, 12, 0.05); border-color: rgba(12, 12, 12, 0.22); color: var(--cream); } .theme-toggle svg { position: absolute; width: 16px; height: 16px; transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out-soft); } /* Sun visible in dark mode (click → light); moon visible in light. */ .theme-toggle .theme-toggle__sun { opacity: 1; transform: rotate(0deg) scale(1); } .theme-toggle .theme-toggle__moon { opacity: 0; transform: rotate(-90deg) scale(0.4); } html.light-mode .theme-toggle .theme-toggle__sun { opacity: 0; transform: rotate(90deg) scale(0.4); } html.light-mode .theme-toggle .theme-toggle__moon { opacity: 1; transform: rotate(0deg) scale(1); } /* Smooth tonal crossfade when the theme flips, so the page eases between modes rather than snapping. Scoped so child animations (reveals, floats, pulses) aren't affected by this transition. */ .landing, .landing .landing-nav, .landing .studio, .landing .float-card, .landing .bento-card, .landing .spotlight__visual, .landing .cta__card, .landing .landing-footer { transition: background-color 280ms var(--ease-out), border-color 280ms var(--ease-out), color 280ms var(--ease-out); }