/* ============================================================ AI FRONTLINES — clean editorial podcast site Light (default) + Dark, driven by :root[data-dir]. Tweaks set data-font / data-density / data-lang / --accent on . ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Hanken+Grotesk:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&family=Fraunces:ital,opsz,wght@0,9..144,400..600;1,9..144,400&family=IBM+Plex+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;700;900&family=Noto+Serif+SC:wght@600;700&display=swap'); *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; } img { max-width: 100%; display: block; } button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; } a { color: inherit; text-decoration: none; } h1,h2,h3,h4,p,figure,ul,ol { margin: 0; } ul,ol { padding: 0; list-style: none; } :root { --layout-scale: 1.1; /* default view ≈ former 110% browser zoom */ zoom: var(--layout-scale); } /* ---------- LIGHT (default) ---------- */ :root, :root[data-dir="light"] { --bg: #EAE3D5; --surface: #FFFFFF; --surface-2: #F4EFE5; --ink: #1A1712; --ink-2: #544E42; --muted: #968E7E; --line: #E6DFD0; --line-2: #EFE9DC; --accent: #EBB73E; --accent-deep:#B17C16; --panel: #EFC24A; --on-accent: #211808; --on-panel: #1F1707; --shadow: 0 30px 60px -34px rgba(60,45,12,.4); --shadow-sm: 0 14px 30px -18px rgba(60,45,12,.34); --font-display: 'Bricolage Grotesque', system-ui, sans-serif; --font-body: 'Hanken Grotesk', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; --display-weight: 700; --display-tracking: -0.02em; } /* ---------- DARK ---------- */ :root[data-dir="dark"] { --bg: #16140E; --surface: #201D15; --surface-2: #27221A; --ink: #F3ECDC; --ink-2: #C3BAA6; --muted: #8A8169; --line: #322C22; --line-2: #2B2620; --accent: #EFC152; --accent-deep:#EFC152; --panel: #2A2417; --on-accent: #211808; --on-panel: #F3ECDC; --shadow: 0 36px 70px -34px rgba(0,0,0,.7); --shadow-sm: 0 16px 34px -18px rgba(0,0,0,.6); } /* ---------- Headline font (Tweak) ---------- */ :root[data-font="bricolage"] { --font-display:'Bricolage Grotesque',sans-serif; --display-weight:700; --display-tracking:-0.02em; } :root[data-font="grotesk"] { --font-display:'Space Grotesk',sans-serif; --display-weight:600; --display-tracking:-0.03em; } :root[data-font="fraunces"] { --font-display:'Fraunces',Georgia,serif; --display-weight:560; --display-tracking:-0.01em; } /* ---------- Density (Tweak) ---------- */ :root { --section-y: 104px; --gap: 26px; } :root[data-density="compact"] { --section-y: 72px; --gap: 20px; } :root[data-density="comfy"] { --section-y: 136px; --gap: 34px; } /* ============================================================ */ body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background .4s ease, color .4s ease; overflow-x: hidden; } :root[data-lang="zh"] body { font-family: 'Noto Sans SC', var(--font-body); } :root[data-lang="zh"] .display, :root[data-lang="zh"] h1, :root[data-lang="zh"] h2, :root[data-lang="zh"] h3 { font-family: 'Noto Sans SC', var(--font-display); letter-spacing: 0; font-weight: 800; } :root[data-lang="zh"][data-font="fraunces"] .display { font-family: 'Noto Serif SC', serif; font-weight: 700; } .wrap { width: min(1260px, 92vw); margin-inline: auto; } .display { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); line-height: 1.04; text-wrap: balance; } .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 9px; } .eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; } .lead { color: var(--ink-2); font-size: 18px; line-height: 1.62; text-wrap: pretty; } .mono { font-family: var(--font-mono); } /* i18n */ .zh { display: none; } :root[data-lang="zh"] .en { display: none; } :root[data-lang="zh"] .zh { display: revert; } /* ============================================================ NAV ============================================================ */ .nav { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); } .nav-inner { display: flex; align-items: center; gap: 30px; height: 78px; } .brand { display: inline-flex; align-items: center; gap: 12px; } .brand-mark { width: 38px; height: 38px; border-radius: 8px; background: var(--ink); color: var(--bg); display: grid; place-items: center; flex: none; font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: 17px; letter-spacing: .01em; } .brand-name { font-family: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif; font-weight: 500; letter-spacing: -.01em; font-size: 21px; line-height: 1; white-space: nowrap; color: var(--ink); } .nav-links { display: flex; align-items: center; gap: 28px; margin-left: 8px; } .nav-links a { font-size: 15px; font-weight: 500; color: var(--ink-2); transition: color .2s; } .nav-links a:hover { color: var(--ink); } .nav-right { margin-left: auto; display: flex; align-items: center; gap: 14px; } .btn { display: inline-flex; align-items: center; gap: 9px; padding: 12px 20px; border-radius: 100px; font-weight: 600; font-size: 14.5px; border: 1px solid transparent; transition: transform .15s, background .2s, color .2s, border-color .2s; } .btn:hover { transform: translateY(-1px); } .btn-primary { background: var(--ink); color: var(--bg); } .btn-primary:hover { background: var(--accent); color: var(--on-accent); } .btn-ghost { border-color: var(--line); color: var(--ink); } .btn-ghost:hover { border-color: var(--ink); } .lang-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 100px; overflow: hidden; font-weight: 700; font-size: 13px; } .lang-toggle button { padding: 8px 13px; color: var(--muted); line-height: 1; } :root[data-lang="en"] .lang-toggle button[data-l="en"], :root[data-lang="zh"] .lang-toggle button[data-l="zh"] { background: var(--ink); color: var(--bg); } .theme-toggle { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); color: var(--ink); transition: border-color .2s, background .2s, transform .15s, color .2s; } .theme-toggle:hover { border-color: var(--ink); background: color-mix(in srgb, var(--accent) 14%, transparent); transform: translateY(-1px); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .ic-sun { display: none; } :root[data-dir="dark"] .theme-toggle .ic-sun { display: block; color: var(--accent); } :root[data-dir="dark"] .theme-toggle .ic-moon { display: none; } /* ============================================================ HERO ============================================================ */ .hero { padding-top: 30px; padding-bottom: var(--section-y); } .hero-grid { display: grid; grid-template-columns: 1fr; gap: var(--gap); align-items: stretch; } .stage { position: relative; border-radius: 30px; overflow: hidden; background: #181206; min-height: 600px; box-shadow: var(--shadow); isolation: isolate; } .stage-photo { position: absolute; inset: 0; z-index: 0; } .stage-photo img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; object-position: 42% 40%; } /* cinematic scrim for legible light type over the establishing shot */ .stage-photo::after { content:""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18,13,5,.70) 0%, rgba(18,13,5,.34) 32%, rgba(18,13,5,.04) 62%, transparent 100%), linear-gradient(0deg, rgba(18,13,5,.78) 0%, rgba(18,13,5,.10) 38%, transparent 58%), linear-gradient(180deg, rgba(18,13,5,.40) 0%, transparent 22%); } .stage-inner { position: relative; z-index: 2; height: 100%; padding: 34px 36px; display: flex; flex-direction: column; min-height: 600px; } .stage-top { display: flex; align-items: center; gap: 14px; } .avail-label { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #F4ECD9; opacity: .9; text-shadow: 0 1px 6px rgba(0,0,0,.5); } .avail-icons { display: flex; gap: 8px; } .avail-icons a { width: 36px; height: 36px; border-radius: 50%; background: var(--surface); color: var(--ink); display: grid; place-items: center; transition: transform .15s; box-shadow: var(--shadow-sm); } .avail-icons a:hover { transform: translateY(-2px); } .avail-icons svg { width: 17px; height: 17px; } .stage-head { margin-top: auto; max-width: 64%; } .stage-eyebrow { color: #F4ECD9; opacity: .88; margin-bottom: 16px; text-shadow: 0 1px 8px rgba(0,0,0,.5); } .stage h1 { font-size: clamp(34px, 4.1vw, 60px); color: #FCF8EE; text-shadow: 0 2px 24px rgba(0,0,0,.42); } .stage h1 .hl { background: var(--accent); color: var(--on-accent); padding: 0 .14em; border-radius: 8px; text-shadow: none; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .stage-sub { color: #EFE6D2; opacity: .94; font-size: 16.5px; margin-top: 16px; max-width: 32ch; font-weight: 500; text-shadow: 0 1px 10px rgba(0,0,0,.5); } /* now-playing card */ /* standalone live voice-wave */ .player-cover { position: relative; z-index: 3; margin-top: 26px; align-self: flex-start; width: min(400px, 100%); } .player-wave { display: flex; align-items: flex-end; gap: 6px; height: 60px; } .player-wave span { flex: 1; max-width: 8px; border-radius: 4px 4px 2px 2px; background: var(--accent); height: 24%; box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 65%, transparent); animation: nowwv 1.2s ease-in-out infinite; } .player-meta { flex: 1; min-width: 0; } .player-meta .t { font-weight: 700; font-size: 14.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .player-meta .s { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); margin-top: 3px; } .player-ctrls { display: flex; align-items: center; gap: 8px; } .player-ctrls button { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); } .player-ctrls .play { width: 38px; height: 38px; background: var(--accent); color: var(--on-accent); } .player-ctrls svg { width: 15px; height: 15px; } /* hero email capture (primary conversion) */ .hero-cta { margin-top: 22px; width: min(440px, 100%); } .hero-cta-field { display: flex; gap: 8px; align-items: center; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(10px); border: 1px solid color-mix(in srgb, #fff 30%, transparent); border-radius: 100px; padding: 6px 6px 6px 10px; box-shadow: var(--shadow-sm); } .hero-cta-field input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; font: inherit; font-size: 15px; color: var(--ink); padding: 8px 6px; } .hero-cta-field input::placeholder { color: var(--muted); } .hero-cta-field .btn { flex: none; white-space: nowrap; padding: 11px 18px; } .hero-cta-done { margin-top: 12px; font-weight: 700; color: #F6EFD9; text-shadow: 0 1px 10px rgba(0,0,0,.5); } .hero-cta-err { margin-top: 12px; font-weight: 600; font-size: 14px; color: #FFD7C7; text-shadow: 0 1px 10px rgba(0,0,0,.5); } .hero-cta.is-done .hero-cta-field { opacity: .5; pointer-events: none; } /* motion: slow Ken Burns drift + headline entrance — both opt-in via no-preference */ @media (prefers-reduced-motion: no-preference) { .stage-photo img { animation: kenburns 32s ease-in-out infinite alternate; transform-origin: 50% 42%; } .js .stage-eyebrow, .js .stage h1, .js .stage-sub, .js .hero-cta { opacity: 0; transform: translateY(16px); } body.hero-ready .stage-eyebrow { animation: heroRise .6s .00s ease-out forwards; } body.hero-ready .stage h1 { animation: heroRise .7s .12s ease-out forwards; } body.hero-ready .stage-sub { animation: heroRise .7s .26s ease-out forwards; } body.hero-ready .hero-cta { animation: heroRise .7s .40s ease-out forwards; } } @keyframes kenburns { from { transform: scale(1.015); } to { transform: scale(1.085); } } @keyframes heroRise { to { opacity: 1; transform: none; } } /* hero sidebar */ .hero-side { display: flex; flex-direction: column; justify-content: center; gap: 18px; } .feature { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 14px; box-shadow: var(--shadow-sm); } /* mini broadcast screen (face-free, on-theme) */ .now-screen { position: relative; border-radius: 15px; overflow: hidden; aspect-ratio: 5/4; background: #14100A; display: grid; place-items: center; } .now-screen::after { content:""; position:absolute; inset:0; pointer-events:none; background: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px); } .now-screen::before { content:""; position:absolute; inset:0; pointer-events:none; box-shadow: inset 0 0 70px rgba(0,0,0,.7); } .now-bug { position:absolute; top:11px; left:12px; z-index:2; font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; color:#F0D98A; display:flex; align-items:center; gap:6px; } .now-bug i { width:7px; height:7px; border-radius:50%; background:#ff4d3d; } .now-wave { display:flex; align-items:center; gap:4px; height:44%; z-index:1; } .now-wave span { width:5px; border-radius:3px; background:var(--accent); height:30%; animation: nowwv 1.2s ease-in-out infinite; } @keyframes nowwv { 0%,100%{height:20%;opacity:.55;} 50%{height:100%;opacity:1;} } @media (prefers-reduced-motion: reduce){ .now-wave span, .player-wave span { animation:none; height:60%; } } .feature-body { padding: 16px 8px 8px; } .feature-body h3 { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 20px; letter-spacing: var(--display-tracking); } :root[data-lang="zh"] .feature-body h3 { font-family:'Noto Sans SC',sans-serif; font-weight:800; } .feature-body p { color: var(--ink-2); font-size: 14px; line-height: 1.5; margin-top: 8px; } .topics { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 20px; box-shadow: var(--shadow-sm); } .topics h4 { font-size: 13px; font-weight: 800; letter-spacing: .04em; margin-bottom: 14px; } .topic-pills { display: flex; flex-wrap: wrap; gap: 8px; } .topic-pills span { display: inline-flex; align-items: center; padding: 9px 15px; border: 1px solid var(--line); border-radius: 100px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); transition: border-color .2s, color .2s, background .2s; } .topic-pills span:hover { border-color: var(--accent); color: var(--ink); background: color-mix(in srgb, var(--accent) 10%, transparent); } /* ============================================================ SECTION SHELL ============================================================ */ section { padding-block: var(--section-y); } .section-head { max-width: 760px; margin-bottom: 48px; } .section-head .eyebrow { margin-bottom: 16px; } .section-head h2 { font-size: clamp(30px, 3.8vw, 48px); } .section-head p { margin-top: 16px; } .surface-band { background: var(--surface); } /* ============================================================ EPISODES (kult "listen our best podcast") ============================================================ */ .episodes .panel { background: var(--surface-2); border-radius: 30px; padding: clamp(28px, 4vw, 52px); } .ep-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 36px; } .ep-top h2 { font-size: clamp(28px, 3.6vw, 44px); } .ep-top .arrow-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); border-bottom: 2px solid var(--accent); padding-bottom: 3px; } .ep-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); } .ep-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 26px 26px 22px; min-height: 208px; transition: transform .2s, box-shadow .2s, border-color .2s; } .ep-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); } .ep-chead { display: flex; align-items: center; justify-content: space-between; } .ep-num { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--accent-deep); letter-spacing: .04em; } .ep-dur { font-family: var(--font-mono); font-size: 12px; color: var(--muted); } .ep-title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 22px; letter-spacing: var(--display-tracking); line-height: 1.18; margin: 16px 0 0; } :root[data-lang="zh"] .ep-title { font-family:'Noto Sans SC',sans-serif; font-weight:800; } .ep-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 20px; } .ep-playc { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; color: var(--ink); transition: background .2s, color .2s, border-color .2s; } .ep-card:hover .ep-playc { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .ep-playc svg { width: 14px; height: 14px; } .ep-soon { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .ep-progress { display: flex; align-items: center; gap: 18px; margin-top: 34px; } .ep-track { flex: 1; height: 3px; border-radius: 3px; background: var(--line); position: relative; overflow: hidden; } .ep-track i { position: absolute; left: 0; top: 0; height: 100%; width: 34%; background: var(--ink); border-radius: 3px; } .ep-count { font-family: var(--font-mono); font-size: 13px; color: var(--muted); } /* ============================================================ MANIFESTO (5W / H) ============================================================ */ .mf-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); } .mf { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 30px 32px; transition: transform .2s, border-color .2s; } .mf:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); } .mf .num { font-family: var(--font-mono); font-size: 13px; color: var(--accent-deep); } .mf h3 { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 25px; letter-spacing: var(--display-tracking); margin: 8px 0 0; } :root[data-lang="zh"] .mf h3 { font-family:'Noto Sans SC',sans-serif; font-weight:800; } .mf h3 small { display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 7px; } .mf p { color: var(--ink-2); font-size: 15px; margin-top: 14px; line-height: 1.58; } .mf .sub { margin-top: 12px; } .mf .sub b { color: var(--ink); } .mf-what { grid-column: span 7; } .mf-why { grid-column: span 5; } .mf-who { grid-column: span 5; } .mf-when { grid-column: span 3; background: var(--accent); border-color: transparent; } .mf-when .num, .mf-when h3, .mf-when h3 small, .mf-when p { color: var(--on-accent); } .mf-when p { opacity: .82; } .mf-how { grid-column: span 4; } /* ============================================================ VALUE ============================================================ */ .value .quote { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(28px, 4.2vw, 56px); line-height: 1.1; letter-spacing: var(--display-tracking); max-width: 22ch; text-wrap: balance; } :root[data-lang="zh"] .value .quote { font-family:'Noto Sans SC',sans-serif; font-weight:800; line-height:1.32; } .value .quote em { font-style: normal; background: var(--accent); color: var(--on-accent); padding: 0 .12em; border-radius: 8px; box-decoration-break: clone; -webkit-box-decoration-break: clone; } /* ============================================================ COMPARISON ============================================================ */ .cmp { display: grid; grid-template-columns: 1fr 1fr 1.1fr; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: var(--surface); } .cmp .ch { padding: 20px 24px; font-weight: 700; font-size: 14px; border-bottom: 1px solid var(--line); display: flex; align-items: center; } .cmp .ch-dim { font-family: var(--font-mono); font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-size: 11.5px; } .cmp .ch-old { color: var(--ink-2); } .cmp .ch-new { background: var(--accent); color: var(--on-accent); } .cmp .cell { padding: 20px 24px; border-bottom: 1px solid var(--line); font-size: 14.5px; line-height: 1.5; } .cmp .cell.dim { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 17px; letter-spacing: var(--display-tracking); } :root[data-lang="zh"] .cmp .cell.dim { font-family:'Noto Sans SC',sans-serif; font-weight:800; } .cmp .cell.old { color: var(--muted); } .cmp .cell.new { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); font-weight: 500; } .cmp .cell.new b { color: var(--accent-deep); } .cmp .row-last .cell { border-bottom: none; } /* ============================================================ HOSTS ============================================================ */ .host-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); } .host { display: flex; gap: 24px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 24px; } .host .photo { width: 128px; height: 128px; border-radius: 50%; overflow: hidden; flex: none; background: var(--surface-2); } .host .photo img { width: 100%; height: 100%; object-fit: cover; } .host h3 { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 24px; letter-spacing: var(--display-tracking); } :root[data-lang="zh"] .host h3 { font-family:'Noto Sans SC',sans-serif; font-weight:800; } .host .role { color: var(--accent-deep); font-weight: 700; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; margin: 5px 0 12px; } .host p { color: var(--ink-2); font-size: 14.5px; line-height: 1.55; } /* ============================================================ SUBSCRIBE ============================================================ */ .sub-card { background: var(--ink); color: var(--bg); border-radius: 30px; padding: clamp(40px,5.5vw,76px); text-align: center; position: relative; overflow: hidden; } .sub-card h2 { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(28px,4vw,50px); letter-spacing: var(--display-tracking); } :root[data-lang="zh"] .sub-card h2 { font-family:'Noto Sans SC',sans-serif; font-weight:800; } .sub-card p { color: color-mix(in srgb, var(--bg) 74%, var(--accent)); margin: 14px auto 0; max-width: 50ch; } .platforms { display: flex; flex-wrap: wrap; justify-content: center; gap: 11px; margin-top: 34px; } .platforms a { display: inline-flex; align-items: center; gap: 9px; padding: 12px 20px; border-radius: 100px; background: color-mix(in srgb, var(--bg) 10%, transparent); border: 1px solid color-mix(in srgb, var(--bg) 22%, transparent); color: var(--bg); font-weight: 600; font-size: 14px; transition: background .2s, color .2s, transform .15s, border-color .2s; } .platforms a:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); transform: translateY(-2px); } .platforms svg { width: 17px; height: 17px; } /* ============================================================ FOOTER ============================================================ */ .footer { padding-block: 52px; border-top: 1px solid var(--line); } .footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; } .footer .muted { color: var(--muted); font-size: 13px; } .footer nav { display: flex; gap: 20px; } .footer nav a { font-size: 13.5px; color: var(--ink-2); } .footer nav a:hover { color: var(--accent-deep); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1040px) { .hero-grid { grid-template-columns: 1fr; } .hero-side { flex-direction: row; } .feature, .topics { flex: 1; } .nav-links { display: none; } } @media (max-width: 820px) { .ep-row { grid-template-columns: 1fr; } .mf-what,.mf-why,.mf-who,.mf-when,.mf-how { grid-column: span 12; } .host-grid { grid-template-columns: 1fr; } .cmp { grid-template-columns: 1fr; } .cmp .ch-dim { display: none; } .hero-side { flex-direction: column; } .stage-head { max-width: 88%; } } @media (max-width: 560px) { body { font-size: 16px; } .stage-inner { padding: 24px; } .stage-head { max-width: 100%; } .footer-inner { flex-direction: column; align-items: flex-start; } .player { width: 100%; } .hero-cta { width: 100%; } .hero-cta-field { flex-direction: column; align-items: stretch; gap: 8px; border-radius: 18px; padding: 10px; } .hero-cta-field .btn { justify-content: center; width: 100%; } } /* ============================================================ CRT INTRO (tune-in overlay) ============================================================ */ body.intro-lock { overflow: hidden; } #crt-intro { position: fixed; inset: 0; z-index: 9999; background: #000; display: grid; place-items: center; perspective: 1300px; } #crt-intro.done { opacity: 0; pointer-events: none; transition: opacity .55s ease; } .crt-screen { position: relative; width: min(86vw, 1080px); aspect-ratio: 16/10; background: #05060a; border-radius: 16px; overflow: hidden; transform-origin: center; transform: rotateX(90deg) scaleY(.02); opacity: 0; box-shadow: 0 50px 130px -20px rgba(0,0,0,.9), inset 0 0 130px rgba(0,0,0,.55); } #crt-intro.on .crt-screen { animation: crtOpen .6s cubic-bezier(.2,.8,.2,1) forwards; } @keyframes crtOpen { 0% { transform: rotateX(90deg) scaleY(.02); opacity: 0; } 34% { transform: rotateX(0deg) scaleY(.02); opacity: 1; } 54% { transform: rotateX(0deg) scaleY(.02); } 100% { transform: rotateX(0deg) scaleY(1); } } #crt-intro.exit .crt-screen { animation: crtExit .55s ease forwards; } @keyframes crtExit { 0% { transform: scaleY(1) scaleX(1); opacity: 1; } 55% { transform: scaleY(.018) scaleX(1); opacity: 1; } 100% { transform: scaleY(.0016) scaleX(.55); opacity: 0; } } .crt-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); } #crt-intro.tuned .crt-photo { animation: crtTune .9s ease forwards; } @keyframes crtTune { 0% { opacity: 0; filter: brightness(1.7) contrast(1.5) saturate(.4); } 100% { opacity: 1; filter: none; transform: scale(1); } } .crt-flash { position: absolute; inset: 0; z-index: 6; background: #fff; opacity: 0; pointer-events: none; } #crt-intro.on .crt-flash { animation: crtFlash .65s ease forwards; } @keyframes crtFlash { 0%,28% { opacity: 0; } 40% { opacity: .92; } 62% { opacity: .06; } 100% { opacity: 0; } } .crt-static { position: absolute; inset: 0; z-index: 4; opacity: 0; pointer-events: none; mix-blend-mode: screen; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 200px 200px; } #crt-intro.on .crt-static { opacity: .5; animation: snow .12s steps(3) infinite; } #crt-intro.tuned .crt-static { opacity: 0; animation: none; transition: opacity .5s ease; } @keyframes snow { 0%{background-position:0 0;} 33%{background-position:60px -40px;} 66%{background-position:-50px 30px;} 100%{background-position:30px 60px;} } .crt-scan { position: absolute; inset: 0; z-index: 5; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 2px, transparent 2px 4px); } .crt-vig { position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: 16px; box-shadow: inset 0 0 170px rgba(0,0,0,.82); } .crt-bug { position: absolute; top: 18px; left: 20px; z-index: 7; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .14em; color: #F0D98A; display: flex; align-items: center; gap: 8px; opacity: 0; } .crt-bug i { width: 8px; height: 8px; border-radius: 50%; background: #ff4d3d; box-shadow: 0 0 10px rgba(255,77,61,.8); } #crt-intro.tuned .crt-bug { animation: crtFade .5s ease .1s forwards; } .crt-title { position: absolute; left: 20px; bottom: 20px; z-index: 7; opacity: 0; } .crt-title span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .22em; color: #F0D98A; display: block; margin-bottom: 6px; } .crt-title b { font-family: var(--font-display); font-weight: 700; color: #fff; font-size: clamp(22px, 3vw, 40px); letter-spacing: -.02em; display: block; } #crt-intro.tuned .crt-title { animation: crtFade .5s ease .26s forwards; } @keyframes crtFade { to { opacity: 1; } } .crt-skip { position: fixed; right: 18px; bottom: 16px; z-index: 10000; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; color: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.3); border-radius: 100px; padding: 8px 15px; background: rgba(0,0,0,.35); transition: color .2s, border-color .2s; } .crt-skip:hover { color: #fff; border-color: #fff; } #crt-intro.done .crt-skip { opacity: 0; } .replay-intro { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; } @media (prefers-reduced-motion: reduce) { #crt-intro { display: none !important; } }