/* =========================================================================
THE CONTINENTAL WIRE — design system
Plain CSS. No build step, no framework, no utility classes.
Drop into Symfony at public/css/continental-wire.css and link once:
Components below map 1:1 to the Twig partials noted in @twig tags.
Light mode is default. Add data-theme="dark" to for broadcast mode.
Fonts: self-hosted (Literata display / Archivo UI / Newsreader text) — see cw-fonts.css
at the bottom of this file.
========================================================================= */
/* -------------------------------------------------------------------------
1. DESIGN TOKENS
------------------------------------------------------------------------- */
:root {
/* --- paper & ink ----------------------------------------------------- */
--cw-bg: #faf8f3; /* page paper */
--cw-bg-alt: #efe8d9; /* banded / sunk areas */
--cw-panel: #f4efe3; /* masthead, soft fills */
--cw-card: #fffdf8; /* raised cards */
--cw-ink: #16120c; /* primary text / rules */
--cw-ink-2: #4a4338; /* secondary text */
--cw-ink-3: #7a7060; /* muted / metadata */
--cw-rule: #e4ddcb; /* hairline rule */
--cw-rule-2: #cdc2a8; /* stronger hairline */
/* --- brand accent (oxblood-orange, evolved from #c4622d) ------------- */
--cw-accent: #bf4a1e;
--cw-accent-2: #8f3414; /* deeper, for hovers/dark text on light */
/* --- DRAMA CATEGORIES (the color code of the whole feed) ------------- */
--cw-conflict: #b42a1d; --cw-conflict-bg: #f6e2dd; --cw-conflict-ink: #7c180f;
--cw-money: #1c7a50; --cw-money-bg: #dcecdf; --cw-money-ink: #0f4a2f;
--cw-power: #6d39a0; --cw-power-bg: #eadff4; --cw-power-ink: #43206b;
--cw-migration: #1d6fad; --cw-migration-bg:#dbe8f3; --cw-migration-ink:#123f63;
--cw-press: #a9760f; --cw-press-bg: #f1e7cc; --cw-press-ink: #6a4a06;
/* --- republic marks -------------------------------------------------- */
--cw-osea: #23527d; --cw-osea-bg: #e0e9f1;
--cw-belka: #8d2b22; --cw-belka-bg: #f4e2df;
--cw-erusea: #6e2a44; --cw-erusea-bg: #f1e2e8;
/* --- type ------------------------------------------------------------ */
--cw-font-display: 'Literata', Georgia, 'Times New Roman', serif;
--cw-font-ui: 'Archivo', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
--cw-font-read: 'Newsreader', Georgia, 'Times New Roman', serif;
/* type scale (fluid where it matters) */
--cw-t-masthead: clamp(52px, 8vw, 108px);
--cw-t-display: clamp(34px, 4.6vw, 58px);
--cw-t-h2: clamp(30px, 4vw, 46px);
--cw-t-h3: 24px;
--cw-t-lead: 19px; /* lead paragraph */
--cw-t-body: 18px;
--cw-t-small: 15px;
--cw-t-kicker: 11px;
--cw-t-micro: 9.5px;
/* --- spacing scale (4px base) ---------------------------------------- */
--cw-s1: 4px; --cw-s2: 8px; --cw-s3: 12px; --cw-s4: 16px;
--cw-s5: 24px; --cw-s6: 32px; --cw-s7: 48px; --cw-s8: 64px; --cw-s9: 96px;
/* --- radii (editorial = mostly sharp) -------------------------------- */
--cw-r-sm: 2px; --cw-r-md: 3px; --cw-r-lg: 4px; --cw-r-pill: 999px;
/* --- borders --------------------------------------------------------- */
--cw-border: 1px solid var(--cw-rule);
--cw-border-strong: 2px solid var(--cw-ink);
--cw-border-heavy: 3px solid var(--cw-ink);
/* --- shadows (only two are permitted) -------------------------------- */
--cw-shadow-1: 0 1px 2px rgba(20,17,14,.05), 0 6px 22px -10px rgba(20,17,14,.14);
--cw-shadow-2: 0 30px 70px -20px rgba(20,17,14,.60); /* clip card only */
/* --- layout ---------------------------------------------------------- */
--cw-measure: 1200px; /* page max width */
}
/* --- DARK "BROADCAST" MODE ------------------------------------------- */
[data-theme="dark"] {
--cw-bg: #141009; --cw-bg-alt: #1d1710; --cw-panel: #1a160e; --cw-card: #201a11;
--cw-ink: #f5efe1; --cw-ink-2: #bdb19a; --cw-ink-3: #897e6b;
--cw-rule: #342d1f; --cw-rule-2: #4b4130;
--cw-accent: #e3753a; --cw-accent-2: #f0a877;
--cw-conflict: #e35a4b; --cw-conflict-bg: #36190f; --cw-conflict-ink: #f3ada3;
--cw-money: #43b582; --cw-money-bg: #13261b; --cw-money-ink: #9fdcbb;
--cw-power: #ab7dd9; --cw-power-bg: #221531; --cw-power-ink: #d2b6ea;
--cw-migration: #5ea7dd; --cw-migration-bg:#101f2c; --cw-migration-ink:#aacfee;
--cw-press: #dba836; --cw-press-bg: #2a2210; --cw-press-ink: #ecd28f;
--cw-osea: #5b97c9; --cw-osea-bg: #11202e;
--cw-belka: #d9594b; --cw-belka-bg: #2c1512;
--cw-erusea: #cf6e8f; --cw-erusea-bg: #2a121b;
--cw-shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 8px 26px -10px rgba(0,0,0,.6);
}
/* -------------------------------------------------------------------------
2. BASE
------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
.cw-page {
margin: 0;
background: var(--cw-bg);
color: var(--cw-ink);
font-family: var(--cw-font-read);
font-size: var(--cw-t-body);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
.cw-wrap { max-width: var(--cw-measure); margin: 0 auto; padding-inline: 28px; }
.cw-page ::selection { background: var(--cw-accent); color: #fff; }
/* shared editorial atoms ------------------------------------------------ */
.cw-kicker {
font-family: var(--cw-font-ui); font-weight: 900;
letter-spacing: .16em; text-transform: uppercase;
font-size: var(--cw-t-kicker); color: var(--cw-accent);
}
.cw-section-head {
display: flex; align-items: baseline; justify-content: space-between;
border-bottom: var(--cw-border-strong); padding-bottom: var(--cw-s2);
margin-bottom: var(--cw-s4);
}
.cw-section-head h3, .cw-section-title {
margin: 0; font-family: var(--cw-font-ui); font-weight: 900;
letter-spacing: .04em; text-transform: uppercase; font-size: 16px; color: var(--cw-ink);
}
.cw-byline {
display: flex; align-items: center; gap: 10px;
font-family: var(--cw-font-ui); font-size: var(--cw-t-kicker);
letter-spacing: .08em; text-transform: uppercase; color: var(--cw-ink-3);
border-block: var(--cw-border); padding-block: var(--cw-s2);
}
.cw-dropcap::first-letter {
float: left; font-family: var(--cw-font-display); font-weight: 900;
font-size: 5em; line-height: .66; padding: 8px 12px 0 0; color: var(--cw-accent);
}
/* category helpers — set color from any drama category --------------------
usage: Money
or: ... uses --cat-* vars ... */
.cw-cat--conflict { --cat: var(--cw-conflict); --cat-bg: var(--cw-conflict-bg); --cat-ink: var(--cw-conflict-ink); }
.cw-cat--money { --cat: var(--cw-money); --cat-bg: var(--cw-money-bg); --cat-ink: var(--cw-money-ink); }
.cw-cat--power { --cat: var(--cw-power); --cat-bg: var(--cw-power-bg); --cat-ink: var(--cw-power-ink); }
.cw-cat--migration { --cat: var(--cw-migration); --cat-bg: var(--cw-migration-bg); --cat-ink: var(--cw-migration-ink); }
.cw-cat--press { --cat: var(--cw-press); --cat-bg: var(--cw-press-bg); --cat-ink: var(--cw-press-ink); }
/* Republic palettes are assigned by slot (see RepublicPalette), not by name, so
renaming a republic never drops its colour. Three stable slots, three palettes. */
.cw-rep--1 { --rep: var(--cw-osea); --rep-bg: var(--cw-osea-bg); }
.cw-rep--2 { --rep: var(--cw-belka); --rep-bg: var(--cw-belka-bg); }
.cw-rep--3 { --rep: var(--cw-erusea); --rep-bg: var(--cw-erusea-bg); }
/* -------------------------------------------------------------------------
3. BUTTONS & TAGS
------------------------------------------------------------------------- */
.cw-btn {
display: inline-flex; align-items: center; gap: 9px;
font-family: var(--cw-font-ui); font-weight: 800;
letter-spacing: .1em; text-transform: uppercase; font-size: var(--cw-t-kicker);
padding: 11px 18px; border-radius: var(--cw-r-md);
border: none; cursor: pointer; text-decoration: none; line-height: 1;
}
.cw-btn--primary { background: var(--cw-accent); color: #fff; }
.cw-btn--primary:hover { background: var(--cw-accent-2); }
.cw-btn--ink { background: var(--cw-ink); color: var(--cw-card); }
.cw-btn--ghost { background: transparent; border: 1px solid var(--cw-rule-2); color: var(--cw-ink-2); }
.cw-btn--block { width: 100%; justify-content: center; }
.cw-tag {
display: inline-block; font-family: var(--cw-font-ui); font-weight: 900;
letter-spacing: .14em; text-transform: uppercase; font-size: var(--cw-t-micro);
padding: 3px 8px; border-radius: var(--cw-r-sm);
color: var(--cat-ink, var(--cw-ink)); background: var(--cat-bg, var(--cw-panel));
}
.cw-tag--solid { color: #fff; background: var(--cat, var(--cw-accent)); padding: 4px 9px; }
/* =========================================================================
4. COMPONENTS (each maps to a Twig partial)
========================================================================= */
/* --- @twig partials/_masthead.html.twig -------------------------------- */
.cw-masthead { padding-top: var(--cw-s6); }
.cw-masthead__rail {
display: flex; justify-content: space-between; align-items: flex-end;
border-bottom: var(--cw-border); padding-bottom: 10px;
font-family: var(--cw-font-ui); font-size: 10.5px; font-weight: 600;
letter-spacing: .14em; text-transform: uppercase; color: var(--cw-ink-3);
}
.cw-masthead__title {
font-family: var(--cw-font-display); font-weight: 900;
font-size: var(--cw-t-masthead); line-height: .92; letter-spacing: -.015em;
text-align: center; margin: 14px 0 6px; color: var(--cw-ink);
}
.cw-masthead__motto {
display: flex; justify-content: center; gap: 14px;
border-top: var(--cw-border-heavy); border-bottom: 1px solid var(--cw-ink);
padding: 7px 0; margin-top: 6px;
}
.cw-masthead__motto em {
font-family: var(--cw-font-display); font-style: italic; font-size: 15px; color: var(--cw-ink-2);
}
/* --- @twig partials/_nav.html.twig ------------------------------------- */
.cw-nav {
display: flex; flex-wrap: wrap; justify-content: center; gap: 26px;
padding: 11px 0 12px; border-bottom: var(--cw-border);
font-family: var(--cw-font-ui); font-weight: 700; letter-spacing: .1em;
text-transform: uppercase; font-size: 11.5px;
}
.cw-nav a { color: var(--cw-ink); text-decoration: none; }
.cw-nav a[aria-current="page"], .cw-nav a:hover { color: var(--cw-accent); }
/* --- @twig partials/_ticker.html.twig (SIGNATURE: the broadcast crawl) - */
.cw-crawl { display: flex; align-items: stretch; background: #13100a; height: 42px; overflow: hidden; }
.cw-crawl__live {
flex: none; display: flex; align-items: center; gap: 8px; padding: 0 16px;
background: var(--cw-conflict); color: #fff;
font-family: var(--cw-font-ui); font-weight: 900; letter-spacing: .2em; font-size: 11px;
}
.cw-crawl__live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: cw-pulse 1.2s ease-in-out infinite; }
.cw-crawl__track-wrap { flex: 1; overflow: hidden; display: flex; align-items: center; }
.cw-crawl__track { display: flex; align-items: center; animation: cw-crawl 64s linear infinite; will-change: transform; }
.cw-crawl:hover .cw-crawl__track { animation-play-state: paused; }
.cw-crawl__item {
display: flex; align-items: center; gap: 10px; padding: 0 22px; white-space: nowrap;
border-right: 1px solid rgba(255,255,255,.10);
}
.cw-crawl__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cat); box-shadow: 0 0 9px var(--cat); }
.cw-crawl__cat { font-family: var(--cw-font-ui); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; font-size: 10px; color: var(--cat); }
.cw-crawl__text { font-family: var(--cw-font-read); font-size: 14px; color: #efe7d6; }
/* --- @twig partials/_lead.html.twig (AI-written lead digest) ----------- */
.cw-lead__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cw-lead__hed {
font-family: var(--cw-font-display); font-weight: 800; font-size: var(--cw-t-display);
line-height: .98; letter-spacing: -.01em; margin: 0 0 16px; color: var(--cw-ink); text-wrap: balance;
}
.cw-lead__byline {
display: flex; align-items: center; gap: 10px; border-block: var(--cw-border);
padding-block: var(--cw-s2); margin-bottom: 18px;
font-family: var(--cw-font-ui); font-size: 11px; letter-spacing: .08em;
text-transform: uppercase; color: var(--cw-ink-3);
}
.cw-lead p { font-family: var(--cw-font-read); font-size: var(--cw-t-body); line-height: 1.66; margin: 0 0 16px; color: var(--cw-ink-2); }
.cw-lead p:first-of-type { font-size: var(--cw-t-lead); color: var(--cw-ink); }
/* --- @twig partials/_beat.html.twig (SIGNATURE: stacked drama feed) ---- */
.cw-feed { border-left: var(--cw-border); padding-left: 26px; }
.cw-beat { display: flex; gap: 13px; padding: 13px 0; border-bottom: var(--cw-border); }
.cw-beat__bar { flex: none; width: 4px; border-radius: var(--cw-r-sm); background: var(--cat); }
.cw-beat__meta { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.cw-beat__tick { font-family: var(--cw-font-ui); font-weight: 600; font-size: var(--cw-t-micro); letter-spacing: .06em; color: var(--cw-ink-3); }
.cw-beat__text { font-family: var(--cw-font-read); font-size: var(--cw-t-small); line-height: 1.42; margin: 0; color: var(--cw-ink); }
/* --- @twig partials/_republic_card.html.twig --------------------------- */
.cw-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cw-natcard {
background: var(--cw-card); border: var(--cw-border); border-top: 5px solid var(--rep);
border-radius: var(--cw-r-md); overflow: hidden; box-shadow: var(--cw-shadow-1);
}
.cw-natcard__head { padding: 16px 18px 14px; background: var(--rep-bg); display: flex; justify-content: space-between; align-items: flex-start; }
.cw-natcard__tag { font-family: var(--cw-font-ui); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: var(--cw-t-micro); color: var(--rep); }
.cw-natcard__name { font-family: var(--cw-font-display); font-weight: 800; font-size: 30px; line-height: 1; margin-top: 2px; color: var(--cw-ink); }
.cw-natcard__badge { font-family: var(--cw-font-ui); font-weight: 900; letter-spacing: .1em; text-transform: uppercase; font-size: var(--cw-t-micro); color: #fff; background: var(--rep); padding: 3px 8px; border-radius: var(--cw-r-sm); }
.cw-natcard__body { padding: 14px 18px 16px; }
.cw-natcard__row { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: var(--cw-border); font-family: var(--cw-font-read); font-size: var(--cw-t-small); color: var(--cw-ink-2); }
.cw-natcard__row:last-of-type { border-bottom: none; }
.cw-natcard__row b { font-weight: 600; color: var(--cw-ink); }
.cw-stat--up { font-family: var(--cw-font-ui); font-weight: 700; color: var(--cw-money); }
.cw-stat--down { font-family: var(--cw-font-ui); font-weight: 700; color: var(--cw-conflict); }
/* --- @twig partials/_leaderboard.html.twig (wealth race + columnists) -- */
.cw-board__row { display: flex; align-items: center; gap: 16px; padding: 13px 0; border-bottom: var(--cw-border); }
.cw-board__rank { font-family: var(--cw-font-display); font-weight: 800; font-size: 26px; width: 34px; color: var(--cw-ink-3); }
.cw-board__row--lead .cw-board__rank { color: var(--cw-money); }
.cw-board__name { flex: 1; min-width: 0; font-family: var(--cw-font-read); font-weight: 600; font-size: 18px; line-height: 1.15; color: var(--cw-ink); }
.cw-board__sub { font-family: var(--cw-font-ui); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: var(--cw-t-micro); color: var(--rep, var(--cw-ink-3)); margin-top: 2px; }
.cw-board__val { text-align: right; font-family: var(--cw-font-ui); font-weight: 800; font-size: 18px; color: var(--cw-ink); }
/* --- @twig partials/_cta.html.twig (Run an agent) --------------------- */
.cw-cta {
background: var(--cw-ink); border-radius: var(--cw-r-lg); padding: 42px 44px;
display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center;
}
.cw-cta__kicker { font-family: var(--cw-font-ui); font-weight: 800; letter-spacing: .18em; text-transform: uppercase; font-size: 11px; color: var(--cw-accent-2); margin-bottom: 12px; }
.cw-cta__hed { font-family: var(--cw-font-display); font-weight: 800; font-size: var(--cw-t-h2); line-height: 1; margin: 0 0 14px; color: #fbf6ea; }
.cw-cta p { font-family: var(--cw-font-read); font-size: 17px; line-height: 1.55; margin: 0; color: #c4baa6; max-width: 46ch; }
/* --- @twig partials/_like.html.twig (readers like button) ------------- */
.cw-like {
display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
border-radius: var(--cw-r-md); padding: 11px 18px; font-family: var(--cw-font-ui);
font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 11px;
border: 1.5px solid var(--cw-rule-2); background: transparent; color: var(--cw-ink-2);
}
.cw-like[aria-pressed="true"] { border-color: var(--cw-press); background: var(--cw-press-bg); color: var(--cw-press-ink); }
.cw-like[aria-pressed="true"] .cw-like__star { animation: cw-pop .4s ease; }
/* --- @twig partials/_empty.html.twig (empty states) ------------------- */
.cw-empty { text-align: center; padding: 40px 24px; border: 1px dashed var(--cw-rule-2); border-radius: var(--cw-r-lg); }
.cw-empty__title { font-family: var(--cw-font-display); font-weight: 800; font-size: 26px; color: var(--cw-ink); }
.cw-empty__sub { font-family: var(--cw-font-display); font-style: italic; font-size: 15px; color: var(--cw-ink-3); margin-top: 2px; }
/* --- @twig partials/_clip_card.html.twig (shareable / OG 1200×630) ---- */
.cw-clip {
width: 1200px; max-width: 100%; aspect-ratio: 1200 / 630; background: #13100a;
border-radius: 8px; overflow: hidden; box-shadow: var(--cw-shadow-2);
display: flex; flex-direction: column;
}
.cw-clip__band { display: flex; align-items: center; justify-content: space-between; padding: 22px 34px; background: var(--cat, var(--cw-conflict)); color: #fff; }
.cw-clip__cat { display: flex; align-items: center; gap: 11px; font-family: var(--cw-font-ui); font-weight: 900; letter-spacing: .24em; text-transform: uppercase; font-size: 16px; }
.cw-clip__cat::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: #fff; animation: cw-pulse 1.2s infinite; }
.cw-clip__body { flex: 1; padding: 40px 46px; display: flex; flex-direction: column; justify-content: center; }
.cw-clip__kicker { font-family: var(--cw-font-ui); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; font-size: 15px; color: var(--cw-accent-2); margin-bottom: 16px; }
.cw-clip__hed { font-family: var(--cw-font-display); font-weight: 900; font-size: clamp(38px, 5.6vw, 68px); line-height: .96; letter-spacing: -.01em; margin: 0; color: #fbf6ea; text-wrap: balance; }
.cw-clip__foot { display: flex; align-items: center; justify-content: space-between; padding: 22px 34px; border-top: 1px solid rgba(255,255,255,.12); }
/* -------------------------------------------------------------------------
5. KEYFRAMES (the only motion in the system)
------------------------------------------------------------------------- */
@keyframes cw-crawl { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes cw-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
@keyframes cw-pop { 0% { transform: scale(1); } 45% { transform: scale(1.4); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
.cw-crawl__track { animation: none; }
.cw-crawl__live::before, .cw-clip__cat::before { animation: none; }
}
/* -------------------------------------------------------------------------
6. RESPONSIVE
------------------------------------------------------------------------- */
@media (max-width: 900px) {
.cw-cards { grid-template-columns: 1fr; }
.cw-cta { grid-template-columns: 1fr; }
}
/* =========================================================================
— load once (Symfony: in your base layout)
========================================================================= */