/* ===================================================================== FREE SPEECH — Design System High-contrast print tabloid, rebuilt as a futuristic web broadsheet. ===================================================================== */ :root{ /* Ink & paper */ --fs-ink:#0A0A0A; --fs-ink-soft:#3A3A3A; --fs-paper:#F7F5F0; --fs-paper-pure:#FFFFFF; /* Accent */ --fs-red:#E8241C; --fs-red-deep:#B01810; /* Support */ --fs-ash:#8A8A8A; --fs-rule:#111111; --fs-rule-invert:#2A2A2A; --fs-line-faint:#DAD6CE; --fs-highlight:#F2E641; /* Type scale */ --fs-display:clamp(3.5rem,9vw,9rem); --fs-h1:clamp(2.5rem,6vw,5.5rem); --fs-h2:clamp(1.8rem,3.5vw,3rem); --fs-h3:clamp(1.3rem,2.2vw,1.9rem); --fs-lead:clamp(1.15rem,1.6vw,1.5rem); --fs-body:1.125rem; --fs-meta:0.8rem; /* Fonts */ --fs-font-display:"Archivo Black","Anton",Impact,sans-serif; --fs-font-head:"Archivo","Helvetica Neue",Arial,sans-serif; --fs-font-body:"Newsreader","Source Serif 4",Georgia,serif; --fs-font-mono:"Space Mono",ui-monospace,monospace; /* Layout */ --fs-gap:24px; --fs-max:1440px; --fs-read:720px; color-scheme:light; } /* ===================================================================== THEME — light is the default (:root above). Dark is a premium, restrained inversion: rich warm near-black paper, warm off-white ink, a brighter red so the accent still cuts. Toggled by setting data-fs-theme="dark" on (see theme-toggle.js). ===================================================================== */ html[data-fs-theme="light"]{ color-scheme:light; } html[data-fs-theme="dark"]{ --fs-ink:#ECE7DE; --fs-ink-soft:#B4AFA4; --fs-paper:#0C0C0E; --fs-paper-pure:#151519; --fs-red:#FF3A2E; --fs-red-deep:#C81E14; --fs-ash:#726E66; --fs-rule:#2B2B31; --fs-rule-invert:#ECE7DE; --fs-line-faint:#26262C; --fs-highlight:#F2E641; color-scheme:dark; } /* Apply the theme to the page. Free Speech is the site's identity, so the canvas itself flips. A whisper-faint vignette gives dark mode depth without shadow or gloss. */ html[data-fs-theme] body{ background:var(--fs-paper); color:var(--fs-ink); transition:background-color .35s ease, color .35s ease; } html[data-fs-theme="dark"] body{ background: radial-gradient(120% 80% at 50% -10%, #17171C 0%, rgba(23,23,28,0) 60%), var(--fs-paper); } html[data-fs-theme="dark"] img, html[data-fs-theme="dark"] .fs-hero__canvas{ filter:brightness(.92) contrast(1.02); } @media (prefers-reduced-motion:reduce){ html[data-fs-theme] body{ transition:none; } } /* --- Base ----------------------------------------------------------- */ .fs-scope, body.fs-active{ background:var(--fs-paper); color:var(--fs-ink); font-family:var(--fs-font-body); font-size:var(--fs-body); line-height:1.7; -webkit-font-smoothing:antialiased; } /* Shared display heading treatment */ .fs-hero__headline, .fs-cta__heading, .fs-pullquote blockquote{ font-family:var(--fs-font-display); text-transform:uppercase; letter-spacing:-0.02em; line-height:0.95; margin:0; } /* --- Kicker / censor-bar tag ---------------------------------------- */ .fs-kicker{ display:inline-block; font-family:var(--fs-font-mono); font-size:var(--fs-meta); font-weight:700; text-transform:uppercase; letter-spacing:0.12em; color:var(--fs-paper); background:var(--fs-red); padding:.35em .7em; margin-bottom:1rem; } /* --- Meta label ----------------------------------------------------- */ .fs-meta{ font-family:var(--fs-font-mono); font-size:var(--fs-meta); text-transform:uppercase; letter-spacing:0.08em; color:var(--fs-ash); } /* --- Buttons -------------------------------------------------------- */ .fs-btn{ display:inline-block; font-family:var(--fs-font-mono); font-size:0.9rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; text-decoration:none; padding:.85em 1.6em; border:2px solid var(--fs-ink); background:var(--fs-ink); color:var(--fs-paper); cursor:pointer; transition:background .15s ease-out,color .15s ease-out; } .fs-btn:hover{ background:var(--fs-red); border-color:var(--fs-red); color:var(--fs-paper); } .fs-btn:active{ background:var(--fs-red-deep); border-color:var(--fs-red-deep); } .fs-btn--accent{ background:var(--fs-red); border-color:var(--fs-red); } .fs-btn--accent:hover{ background:var(--fs-paper); color:var(--fs-ink); border-color:var(--fs-paper); } /* On inverted sections */ .fs-hero--inverted .fs-btn--primary, .fs-cta .fs-btn{ border-color:var(--fs-paper); } /* --- Focus (never removed) ------------------------------------------ */ .fs-btn:focus-visible, .fs-scope a:focus-visible{ outline:2px solid var(--fs-red); outline-offset:3px; } /* --- Reduced motion ------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ .fs-hero__canvas{ display:none; } .fs-ticker__run{ animation:none !important; } } /* ===================================================================== THEME TOGGLE — fixed, premium pill. Injected on every page by theme-toggle.js. Backdrop-blur, hard-edged, mono label, sun/moon swap. ===================================================================== */ .fs-theme-toggle{ position:fixed; z-index:2147483000; bottom:clamp(16px,3vw,28px); right:clamp(16px,3vw,28px); display:inline-flex; align-items:center; gap:.55em; height:46px; padding:0 1.05em; font-family:var(--fs-font-mono,"Space Mono",monospace); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--fs-ink); background:color-mix(in srgb, var(--fs-paper) 78%, transparent); border:2px solid var(--fs-ink); -webkit-backdrop-filter:blur(10px) saturate(1.1); backdrop-filter:blur(10px) saturate(1.1); cursor:pointer; user-select:none; transition:background-color .2s ease, color .2s ease, border-color .2s ease, transform .12s ease; } .fs-theme-toggle:hover{ background:var(--fs-ink); color:var(--fs-paper); border-color:var(--fs-ink); } .fs-theme-toggle:active{ transform:translateY(1px); } .fs-theme-toggle:focus-visible{ outline:2px solid var(--fs-red); outline-offset:3px; } .fs-theme-toggle__icon{ width:16px; height:16px; display:block; flex:0 0 auto; } .fs-theme-toggle__label{ line-height:1; } /* icon + label swap by theme */ .fs-theme-toggle .fs-i-moon{ display:none; } .fs-theme-toggle .fs-i-sun{ display:block; } html[data-fs-theme="dark"] .fs-theme-toggle .fs-i-sun{ display:none; } html[data-fs-theme="dark"] .fs-theme-toggle .fs-i-moon{ display:block; } /* the accent dot echoes the censor-bar motif */ .fs-theme-toggle__dot{ width:7px; height:7px; background:var(--fs-red); flex:0 0 auto; } @media (prefers-reduced-motion:reduce){ .fs-theme-toggle{ transition:none; } } @media print{ .fs-theme-toggle{ display:none; } }