/* feat-fst.css — isolated stylesheet for the "fst" redesign feature (loads after forum.css so same-specificity rules here override it). Owned by one subagent. Purpose: give FootballSportsTalk its OWN visual identity (approved mock at footballsportstalk.apps.breezedeploy.dev) instead of the shared CF1/forum.css look. Distinct FST signals brought over from the mock: 1. Broadcast-BLUE accent (mock --accent #2563eb) replacing CF1's red/orange brand. 2. Italic UPPERCASE condensed section headings (Saira Condensed) — the "talk-radio" voice. 3. Outline uppercase tag pills + soft filled status badges (Popular / Unanswered / Active). 4. "Hot Takes" sidebar widget, "Welcome back" sign-in card, and the REAL FANS / REAL TALK / 24/7 / STAY LOUD broadcast strip. Everything is scoped to FST (this file only loads on the FST site) and is purely additive/overriding — forum.css and the data hooks are untouched, so it is reversible. */ /* ============================================================ 1. TEAM ACCENT — reskin brand tokens to broadcast blue. feat-fst.css is the last stylesheet in , so these :root rules win over the inline critical CSS and forum.css. Every FST-facing forum.css rule reads these tokens, so the whole site turns blue from here. ============================================================ */ :root { --accent: #2563eb; /* mock broadcast blue */ --brand: #2563eb; --brand-strong: #1d4ed8; --accent-fill: #2563eb; --accent-fill-strong: #1d4ed8; --brand-tint: #e8eefc; --brand-tint-2: #dbe6fb; --ring: rgba(37, 99, 235, 0.38); --badge-hot: #1d4ed8; --role-admin: #1d4ed8; --vote-up: #2563eb; /* Category accents that used the red brand -> blue (the multi-hue ones stay varied) */ --c-host: #2563eb; --c-host-t: #e8eefc; --c-gen: #2563eb; --c-gen-t: #e8eefc; /* FST status palette (Unanswered = gold, Active = steel) */ --fst-warn: #7f570e; --fst-warn-bg: rgba(154, 106, 18, 0.10); --fst-warn-bd: rgba(154, 106, 18, 0.38); --fst-steel: #5a6472; --fst-steel-bg: rgba(90, 100, 114, 0.10); } /* Dark — explicit toggle. Overrides forum.css's red dark tokens. */ :root[data-theme="dark"] { --accent: #3b82f6; --brand: #3b82f6; --brand-strong: #60a5fa; --accent-fill: #3b82f6; --accent-fill-strong: #2563eb; --brand-tint: #16233a; --brand-tint-2: #12203a; --ring: rgba(59, 130, 246, 0.5); --badge-hot: #60a5fa; --role-admin: #60a5fa; --vote-up: #3b82f6; --c-host: #3b82f6; --c-host-t: #16233a; --c-gen: #3b82f6; --c-gen-t: #16233a; --fst-warn: #d8b46a; --fst-warn-bg: rgba(216, 180, 106, 0.12); --fst-warn-bd: rgba(216, 180, 106, 0.35); --fst-steel: #94a3b8; --fst-steel-bg: rgba(148, 163, 184, 0.12); } /* Dark by system preference before any toggle (mirrors forum.css's guarded block). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --accent: #3b82f6; --brand: #3b82f6; --brand-strong: #60a5fa; --accent-fill: #3b82f6; --accent-fill-strong: #2563eb; --brand-tint: #16233a; --brand-tint-2: #12203a; --ring: rgba(59, 130, 246, 0.5); --badge-hot: #60a5fa; --role-admin: #60a5fa; --vote-up: #3b82f6; --c-host: #3b82f6; --c-host-t: #16233a; --c-gen: #3b82f6; --c-gen-t: #16233a; --fst-warn: #d8b46a; --fst-warn-bg: rgba(216, 180, 106, 0.12); --fst-warn-bd: rgba(216, 180, 106, 0.35); --fst-steel: #94a3b8; --fst-steel-bg: rgba(148, 163, 184, 0.12); } } /* ============================================================ 2. ITALIC UPPERCASE CONDENSED HEADINGS — the FST voice. Applies to every home-page section title. forum.css renders these in condensed but upright/mixed-case; the mock is italic + uppercase (the "LATEST DISCUSSIONS" broadcast look). ============================================================ */ .hero__title { font-style: italic; text-transform: uppercase; font-weight: 900; letter-spacing: -0.01em; line-height: 0.9; font-size: clamp(2.6rem, 6vw, 4.6rem); } .s-head h2 { font-style: italic; text-transform: uppercase; letter-spacing: 0.01em; font-size: 1.5rem; line-height: 1; } .s-card-h { font-style: italic; text-transform: uppercase; letter-spacing: 0.01em; font-size: 1.2rem; line-height: 1.05; } /* keep the inline "View all / All" links upright and small, not italic caps */ .s-card-h .link-more, .s-head .link-more { font-style: normal; text-transform: uppercase; letter-spacing: 0.04em; } .vids-head h2 { font-family: var(--font-display); font-style: italic; text-transform: uppercase; letter-spacing: 0.01em; font-size: 1.6rem; font-weight: 800; line-height: 1; } /* ============================================================ 3. TAG + STATUS BADGE TREATMENT (mock: outline caps tags, soft filled status pills). ============================================================ */ .s-tag { background: transparent; color: var(--muted); border: 1px solid var(--line); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.68rem; font-weight: 700; } .s-badge { text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800; font-size: 0.62rem; border: 1px solid transparent; padding: 3px 9px; } /* mock: no leading dot on Popular / Unanswered; only Active keeps a pulsing dot */ .s-badge::before { display: none; } .s-hot { /* Popular */ color: var(--brand-strong); background: var(--brand-tint); border-color: color-mix(in srgb, var(--brand) 40%, transparent); } .s-open { /* Unanswered */ color: var(--fst-warn); background: var(--fst-warn-bg); border-color: var(--fst-warn-bd); } .s-ans { /* Active */ color: var(--fst-steel); background: var(--fst-steel-bg); border-color: var(--line); } .s-ans::before { display: inline-block; content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 60%, transparent); animation: fst-pulse 1.8s infinite; } @keyframes fst-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 50%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } /* ============================================================ 4a. WELCOME-BACK sign-in card (sidebar, guests only). The mock's "Welcome back" panel lives in the header (owned by another agent), so the FST element is surfaced here on the home sidebar instead. Reuses .s-card chrome. ============================================================ */ .fst-signin p { font-size: 0.85rem; color: var(--muted); line-height: 1.5; margin: 0 0 13px; } .fst-signin .btn { width: 100%; justify-content: center; } .fst-signin__alt { display: block; margin-top: 10px; text-align: center; font-size: 0.8rem; font-weight: 600; color: var(--muted); } .fst-signin__alt:hover { color: var(--brand); } /* ============================================================ 4b. HOT TAKES widget (sidebar) — mock "Join the Debate". ============================================================ */ .fst-take-list { list-style: none; margin: 0 -20px; padding: 0; } .fst-take { display: grid; grid-template-columns: auto 1fr; gap: 11px; padding: 13px 20px; border-top: 1px solid var(--line-soft); transition: background 0.14s ease; } .fst-take:hover { background: var(--brand-tint); } .fst-take__flame { color: var(--brand); margin-top: 1px; display: flex; } .fst-take__flame svg { width: 18px; height: 18px; } .fst-take__text { display: block; font-weight: 600; color: var(--ink); line-height: 1.35; font-size: 0.86rem; } .fst-take:hover .fst-take__text { color: var(--brand-strong); } .fst-take__meta { display: block; margin-top: 3px; font-size: 0.72rem; font-weight: 500; color: var(--faint); } .fst-takes-foot { margin: 13px -20px -18px; padding: 13px 20px; border-top: 1px solid var(--line); text-align: center; } /* ============================================================ 4c. BROADCAST STRIP — REAL FANS / REAL TALK / 24/7 / STAY LOUD. Full-bleed band (same 100vw trick the hero uses inside .page). ============================================================ */ .fst-broadcast { margin: 36px calc(50% - 50vw) 0; width: 100vw; background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .fst-broadcast__inner { max-width: var(--container); margin-inline: auto; padding: 16px 32px; display: flex; align-items: center; flex-wrap: wrap; gap: 14px 32px; } .fst-broadcast__badge { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: 0.03em; font-size: 1.1rem; color: var(--ink); } .fst-accent { color: var(--brand); } .fst-live { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 60%, transparent); animation: fst-pulse 1.8s infinite; } .fst-broadcast__tags { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-left: auto; font-family: var(--font-display); font-weight: 800; font-style: italic; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.9rem; color: var(--muted); } .fst-broadcast__tags .hot { color: var(--brand); } @media (max-width: 700px) { .fst-broadcast__inner { padding: 14px 20px; } .fst-broadcast__tags { margin-left: 0; } }