/* ============================================================= FANATIK Site Phase 0+1 Hybrid v2.1 sections-tail.css — Sections 5, 6, 8, 9 (DEV-4) ------------------------------------------------------------- Section 5 — Pitchside Test CTA (v2 promoted to position 5) Section 6 — Editorial Cabinet (6 reels, 3×2 grid) Section 8 — Press / Partners (restrained, empty-state honest) Section 9 — Footer (legal + lang picker + social + attribution) Palette tokens are defined in tokens.css (single source of truth, loaded first in cascade): --black #000000 --off-black #0A0A0A --lime #D3FE4C --white #FFFFFF --mute rgba(255,255,255,0.55) (6.25:1 on off-black) --mute-deep rgba(255,255,255,0.30) (decorative chrome only) Mobile-first. WCAG AA. No emoji. No exclamation marks anywhere. ============================================================= */ /* ---------- Component-local spacing + layout tokens. Canonical brand tokens (--black/--off-black/--lime/--white/ --mute/--mute-deep) now live in tokens.css (single source of truth; loaded first in the cascade). */ :root { /* Spacing scale (mobile-first) */ --space-1: 0.5rem; /* 8px */ --space-2: 1rem; /* 16px */ --space-3: 1.5rem; /* 24px */ --space-4: 2rem; /* 32px */ --space-5: 3rem; /* 48px */ --space-6: 4rem; /* 64px */ --space-7: 6rem; /* 96px */ --max-width: 1280px; --tile-radius: 0; /* hard-edge broadcast feel */ --hairline: 1px; /* v2.7 Agent-C vertical rhythm bump. v2.2 stripped 4 sections but kept v2.1's tight padding calibration — the page felt cramped because there's now less between major surfaces. Each section gets its own surface treatment: generous block padding so the reader's eye registers a hard break between rooms. Fluid scale: 320w → 80px, 768w → 100px, 1280w → 128px, 1920w → 160px This is the same scale shared by pitchside, press, and footer. (The legacy member-counter preview section was removed in SW v2.10.0; its custom padding token is no longer needed.) */ --section-py: clamp(80px, 10vw, 160px); --section-py-tight: clamp(64px, 8vw, 128px); /* footer top — sits next to legal row, slightly tighter */ } /* ============================================================ v2.12.0 — Section-frame chyron strap ------------------------------------------------------------ Broadcast register handoff between sections. CEO directive 2026-05-21: the quiz and app-tour sections shared too many design DNA markers (same pure-black, same centred axis, same slam-period title scale) — read as one long section instead of two. The .section-frame sits at the top of each section as a chyron strap: lime hairline gradient + § index + label, broadcast-formal register matching the hero LIVE strap and footer separators. Pattern (rendered): ──── § 02 · TEST ──────── ============================================================ */ .section-frame { display: flex; align-items: center; justify-content: center; gap: 14px; max-width: var(--max-width); margin: clamp(48px, 6vw, 96px) auto; padding: 0 var(--space-3); font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; font-weight: 700; font-size: clamp(11px, 1.1vw, 13px); text-transform: uppercase; line-height: 1; } .section-frame::before, .section-frame::after { content: ""; flex: 1; height: 1px; background: linear-gradient(to right, transparent, rgba(211, 254, 76, 0.35)); } .section-frame::after { background: linear-gradient(to left, transparent, rgba(211, 254, 76, 0.35)); } .section-frame__index { color: var(--lime); letter-spacing: 0.14em; } .section-frame__sep { color: var(--mute-deep); opacity: 0.6; } .section-frame__label { color: var(--white); letter-spacing: 0.36em; } @media (min-width: 768px) { .section-frame { padding-inline: var(--space-5); } } /* ---------- Universal helpers ---------- */ .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; } .period { color: var(--lime); } /* v2.11.1 (2026-05-20): SECTION 5 (PITCHSIDE TEST CTA) was REMOVED per CEO directive ("we dont need it"). Section deleted from index.html; pitchsideTest i18n keys cleared from all 9 locales; tokens.css groupings cleaned. No replacement. */ /* ============================================================= SECTION 6 — EDITORIAL CABINET (3×2 grid of reels) ============================================================= */ .cabinet { background-color: var(--black); color: var(--white); padding: var(--space-6) var(--space-3); /* v2.6 Agent-B FIX-2: width safety. */ width: 100%; max-width: 100%; box-sizing: border-box; } .cabinet__header { max-width: var(--max-width); margin: 0 auto var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); } .cabinet__eyebrow { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 700; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); margin: 0; } .cabinet__title { font-family: "Inter", system-ui, sans-serif; font-weight: 900; font-size: clamp(2rem, 6vw, 4.5rem); line-height: 0.94; letter-spacing: -0.03em; text-transform: uppercase; color: var(--white); margin: 0; } .cabinet__grid { max-width: var(--max-width); margin: 0 auto; list-style: none; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-2); } @media (min-width: 640px) { .cabinet__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .cabinet__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); } } .cabinet__cell { display: flex; } /* Reel tile */ .reel-tile { display: block; width: 100%; background-color: var(--off-black); color: var(--white); text-decoration: none; border: var(--hairline) solid rgba(255, 255, 255, 0.06); transition: border-color 160ms ease, transform 160ms ease; } .reel-tile:hover, .reel-tile:focus-visible { border-color: var(--lime); } .reel-tile:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; } .reel-tile__figure { margin: 0; display: flex; flex-direction: column; } .reel-tile__thumb { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; /* portrait reel aspect */ object-fit: cover; background-color: var(--off-black); /* BUG-M7: was #111 → tokenized placeholder while image loads */ } .reel-tile__meta { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2); } .reel-tile__title { font-family: "Inter", system-ui, sans-serif; font-weight: 700; font-size: clamp(0.9375rem, 1.6vw, 1.0625rem); line-height: 1.3; letter-spacing: -0.01em; color: var(--white); margin: 0; } .reel-tile__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin: 0; } .reel-tile__date { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 700; font-size: 0.6875rem; /* 11px — chrome scale */ letter-spacing: 0.06em; color: var(--mute); text-transform: uppercase; } .reel-tile__beat { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 700; font-size: 0.6875rem; letter-spacing: 0.08em; color: var(--lime); text-transform: uppercase; } @media (min-width: 768px) { .cabinet { padding: var(--space-7) var(--space-5); } } /* ============================================================= SECTION 8 — PRESS / PARTNERS (v2.11 PRUNE: removed) ============================================================= */ /* The PRESS / PARTNERS section ("THE ROOM IS QUIET.") was stripped along with its HTML in index.html. Rules removed: .press, .press__*, section#press, and the section-padding micro-shift at the tail of this file. */ /* ============================================================= SECTION 9 — FOOTER ============================================================= */ /* R5: ID + class compound selector (specificity 1,1,0) guarantees the micro-shift wins over tokens.css `html, body { background: var(--off-black) }` and any element-level overrides without resorting to !important. HTML markup: