/* ================================================================
TN Explorer · Elections · TN 2026
Banyan-leaf almanac. Warm paper background, ink type,
party colour used only on data. Source Serif 4 + Inter.
Zerodha Kite simplicity, travel-brand soul.
================================================================ */
:root {
/* ---- Paper + ink — SUNSET PAPER ------------------------------ */
/* Warm peach/sand background + ink + saffron + cobalt accents.
Tamil festival meets Sunday newspaper. */
--paper: #f7e8d3; /* warm sand-peach — main page */
--paper-soft: #fbe9c9; /* alt sections — slightly more saffron */
--paper-deep: #ecd6b0; /* deeper hairlines, tick marks */
--card: #fef5e3; /* card surfaces — warmer than ivory */
--card-pure: #fffbf0; /* high-contrast card (results, search) */
--card-tilt: #fff7e6; /* tilted speech-bubble cards */
--ink: #1a1410; /* body type — warm near-black */
--ink-strong: #0d0a07; /* headlines */
--ink-soft: #4a3e2f; /* secondary copy */
--muted: #8a7556; /* tertiary copy, ticks */
--muted-soft: #b8a583;
--line: #d9c39a; /* hairlines on warm paper */
--line-soft: #e8d6b0;
--line-strong: #b8965f;
/* ---- Brand · cobalt + saffron rhythm ------------------------- */
--leaf: #2d4a3a; /* TN Explorer forest green — primary chrome */
--leaf-dark: #1f3a1c; /* deep forest for headlines + active */
--leaf-soft: #d2e0cb; /* sage wash */
--leaf-pale: #e8efe0; /* sage whisper */
--leaf-hair: #9bb491; /* sage hairline */
/* ---- Editorial accent · saffron sun + temple-red ------------- */
--accent: #e8841a; /* sunset saffron — used for callouts */
--accent-soft: #fbe1bb;
--accent-deep: #b85a1e; /* burnt orange */
--temple-red: #c93d2b; /* temple kovil red — used very sparingly */
--temple-red-soft: #f5d4cd;
/* ---- Party colours · official, do not retune ----------------- */
/* On warm paper: rich saturated brand colours pop. */
--tvk: #D97706; --tvk-bg: #fff7ed; --tvk-fg: #B45309;
--dmk: #DC2626; --dmk-bg: #fef2f2; --dmk-fg: #991B1B;
--admk: #0F766E; --admk-bg:#f0fdfa; --admk-fg:#115E59;
--ntk: #7C3AED; --ntk-bg: #faf5ff; --ntk-fg: #5B21B6;
--oth: #475569;
/* ---- Type ---------------------------------------------------- */
--serif: 'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
--sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
/* ---- Geometry ------------------------------------------------ */
--rad-xs: 4px;
--rad-sm: 6px;
--rad-md: 10px;
--rad-lg: 14px;
--rad-xl: 18px;
--max-w: 1200px;
--pad-x: 18px;
/* ---- Shadows · warm sunset, not cool ------------------------- */
--shadow: 0 1px 2px rgba(120, 70, 20, 0.08);
--shadow-card: 0 1px 0 rgba(120, 70, 20, 0.05), 0 2px 8px rgba(120, 70, 20, 0.08);
--shadow-lift: 0 8px 24px rgba(120, 70, 20, 0.14);
--shadow-tilt: 0 4px 12px rgba(80, 50, 20, 0.10), 0 1px 3px rgba(80, 50, 20, 0.08);
}
/* ---- Density tweak (set by Tweaks panel) ------------------------ */
body.density-comfy {
--pad-x: 22px;
}
body.density-comfy .section { padding-block: 56px; }
/* ---- Accent variants — recoloured for sunset paper -------------- */
body.accent-saffron { --leaf: #b85a1e; --leaf-dark: #8a4012; --leaf-pale: #fbe9d4; --leaf-soft: #f3d6b2; --leaf-hair: #e1b889; }
body.accent-indigo { --leaf: #1f3d8c; --leaf-dark: #122352; --leaf-pale: #e8edf7; --leaf-soft: #d4dcef; --leaf-hair: #94a3c4; }
* , *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--sans);
font-size: 14.5px;
line-height: 1.55;
color: var(--ink);
background: var(--paper);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-feature-settings: "ss01", "cv11";
/* Default motif intensity (0 = off, 1 = loud). Overridden by Tweaks. */
--bg-motif: 0.55;
}
/* Layer 1: paper grain — warm radial blooms */
body::before {
content: '';
position: fixed; inset: 0;
pointer-events: none;
opacity: calc(0.45 * var(--bg-motif));
background-image:
radial-gradient(circle at 18% 12%, rgba(232, 132, 26, 0.10) 0, transparent 38%),
radial-gradient(circle at 82% 88%, rgba(31, 61, 140, 0.05) 0, transparent 42%),
radial-gradient(circle at 50% 50%, rgba(201, 61, 43, 0.025) 0, transparent 60%);
z-index: 0;
}
/* Layer 2: kolam dot motif (ink on warm paper) */
body::after {
content: '';
position: fixed; inset: 0;
pointer-events: none;
z-index: 0;
opacity: calc(0.18 * var(--bg-motif));
background-image:
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,");
background-position: 0 0, 90px 90px;
background-size: 320px 320px, 180px 180px;
}
/* Body content sits above motif layers */
body > * { position: relative; z-index: 1; }
/* Tweaks: motif intensity classes */
body.motif-off { --bg-motif: 0; }
body.motif-whisper { --bg-motif: 0.35; }
body.motif-visible { --bg-motif: 0.7; }
body.motif-loud { --bg-motif: 1.15; }
img { max-width: 100%; display: block; }
a { color: var(--leaf-dark); text-decoration: none; }
a:hover { color: var(--leaf); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
button { cursor: pointer; font: inherit; }
::selection { background: var(--leaf-soft); color: var(--ink-strong); }
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-x); }
/* ================================================================
TOP NAV
================================================================ */
.site-head {
background: var(--paper);
border-bottom: 1px solid var(--line);
position: sticky; top: 0; z-index: 60;
backdrop-filter: saturate(180%) blur(6px);
background-color: rgba(247, 232, 211, 0.92);
}
.head-row {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
height: 60px;
}
.brand-block {
display: inline-flex; align-items: center; gap: 11px;
text-decoration: none; color: inherit;
}
.brand-block:hover { text-decoration: none; }
.brand-mark {
width: 34px; height: 34px;
border-radius: 8px;
background: var(--leaf);
color: #fef5e3;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.10), 0 1px 0 rgba(255,255,255,0.4);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name {
font-family: var(--serif);
font-size: 17px; font-weight: 700; letter-spacing: -0.2px;
color: var(--ink-strong);
}
.brand-tagline {
font-family: var(--serif);
font-style: italic;
font-size: 11px; font-weight: 400;
color: var(--muted);
margin-top: 2px;
letter-spacing: 0.1px;
}
.primary-nav {
display: flex; gap: 1px; align-items: center;
flex-wrap: wrap;
}
.primary-nav a {
font-size: 13px; font-weight: 500;
color: var(--ink-soft);
text-decoration: none;
padding: 8px 12px;
border-radius: 6px;
letter-spacing: 0.1px;
}
.primary-nav a:hover { background: var(--leaf-pale); color: var(--leaf-dark); text-decoration: none; }
.primary-nav a.active {
color: var(--leaf-dark);
background: var(--leaf-pale);
font-weight: 700;
}
.primary-nav .has-sub { position: relative; }
.primary-nav .has-sub > a::after {
content: ' ▾'; font-size: 9px; color: var(--muted);
display: inline-block; transform: translateY(-1px);
}
.primary-nav .submenu {
position: absolute; top: calc(100% + 2px); right: 0;
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--rad-md);
box-shadow: var(--shadow-lift);
padding: 6px;
min-width: 240px;
display: none;
z-index: 70;
}
.primary-nav .has-sub:hover .submenu,
.primary-nav .has-sub:focus-within .submenu { display: block; }
.primary-nav .submenu a {
display: block; padding: 9px 12px; font-size: 13px;
border-radius: 6px;
white-space: nowrap;
color: var(--ink);
}
.primary-nav .submenu a small {
display: block; font-size: 11px; color: var(--muted); margin-top: 2px;
font-weight: 400;
}
.primary-nav .submenu .future { opacity: 0.55; cursor: not-allowed; }
/* ================================================================
IN-PAGE STICKY SUB-NAV
================================================================ */
.sub-nav {
background: rgba(247, 232, 211, 0.88);
border-bottom: 1px solid var(--line);
position: sticky; top: 60px; z-index: 50;
backdrop-filter: saturate(180%) blur(8px);
}
.sub-nav-row {
display: flex; align-items: center; gap: 14px;
padding-block: 8px;
}
.sub-nav-label {
flex-shrink: 0;
font-family: var(--serif);
font-style: italic;
font-size: 12px;
color: var(--muted);
white-space: nowrap;
}
.sub-nav-links {
display: flex; gap: 2px;
overflow-x: auto;
scrollbar-width: thin;
flex: 1;
}
.sub-nav-links::-webkit-scrollbar { height: 3px; }
.sub-nav-links::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }
.sub-nav-links a {
flex: 0 0 auto;
font-size: 12px; font-weight: 600;
color: var(--ink-soft);
padding: 6px 10px;
border-radius: 5px;
white-space: nowrap;
letter-spacing: 0.1px;
}
.sub-nav-links a:hover {
color: var(--leaf-dark);
background: var(--leaf-pale);
text-decoration: none;
}
/* ================================================================
HERO — forest-green gradient (matches TN Explorer travel page)
================================================================ */
.hero {
position: relative;
background:
linear-gradient(135deg, #1f3a1c 0%, #2d4a3a 50%, #4a6b3f 100%);
color: #fef5e3;
padding: 56px var(--pad-x) 0;
overflow: hidden;
border-bottom: 1px solid rgba(0,0,0,0.2);
}
/* Decorative kolam dots scattered across hero */
.hero::before {
content: '';
position: absolute; inset: 0;
pointer-events: none;
background-image:
radial-gradient(circle, rgba(254, 245, 227, 0.12) 1.4px, transparent 1.6px);
background-size: 26px 26px;
background-position: 13px 13px;
opacity: 0.55;
z-index: 0;
}
.hero-bg {
position: absolute; inset: 0;
pointer-events: none;
color: #fef5e3;
opacity: 0.06;
}
.hero-bg-leaves {
position: absolute; inset: 0;
width: 100%; height: 100%;
}
.hero-inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 0;
padding-bottom: 0;
}
/* Eyebrow row */
.hero-eyebrow-row {
display: flex; justify-content: space-between; align-items: center;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 36px;
}
.hero-eyebrow {
display: inline-flex; align-items: center; gap: 12px;
font-family: var(--sans);
font-size: 11px; font-weight: 700; letter-spacing: 2px;
color: #ffd9a8;
text-transform: uppercase;
}
.hero-eyebrow-rule {
display: inline-block;
width: 24px; height: 1px;
background: #ffd9a8;
opacity: 0.7;
}
.hero-eyebrow-meta {
font-family: var(--mono, ui-monospace, 'SF Mono', Menlo, monospace);
font-size: 11px;
color: rgba(254, 245, 227, 0.75);
letter-spacing: 0.3px;
}
/* ================================================================
HERO TALLY STRIP — speech-bubble cards with tails
Each tile is a tilted pinned card floating on the gradient.
Reference: travel-poster pop-out cards.
================================================================ */
.hero-tally {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px 12px;
margin-bottom: 56px;
font-family: var(--serif);
padding: 8px 4px 24px;
}
.ht-tile {
background: var(--card-tilt, #fff7e6);
color: var(--ink-strong);
padding: 14px 16px 16px;
display: flex;
flex-direction: column;
gap: 4px;
position: relative;
border-radius: 14px 14px 14px 14px;
border: 1.5px solid var(--ink-strong);
box-shadow:
var(--shadow-tilt),
inset 0 0 0 4px var(--card-tilt, #fff7e6),
inset 0 0 0 5px rgba(26, 20, 16, 0.08);
transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s ease;
isolation: isolate;
}
/* Slight tilt rotation per nth-child — pinned-card feel */
.ht-tile:nth-child(1) { transform: rotate(-1.5deg); }
.ht-tile:nth-child(2) { transform: rotate(0.5deg); }
.ht-tile:nth-child(3) { transform: rotate(-0.5deg); }
.ht-tile:nth-child(4) { transform: rotate(1.5deg); }
.ht-tile:hover {
transform: rotate(0deg) translateY(-3px);
box-shadow:
0 12px 28px rgba(80, 50, 20, 0.22),
inset 0 0 0 4px var(--card-tilt, #fff7e6),
inset 0 0 0 5px rgba(26, 20, 16, 0.08);
z-index: 5;
}
/* Tail pointing down — speech-bubble */
.ht-tile::after {
content: '';
position: absolute;
bottom: -10px;
left: 22px;
width: 18px; height: 18px;
background: var(--card-tilt, #fff7e6);
border-right: 1.5px solid var(--ink-strong);
border-bottom: 1.5px solid var(--ink-strong);
transform: rotate(45deg);
border-radius: 0 0 4px 0;
z-index: -1;
}
/* Lead tile: temple-red highlight */
.ht-tile--lead {
background: var(--temple-red-soft, #f5d4cd);
box-shadow:
var(--shadow-tilt),
inset 0 0 0 4px var(--temple-red-soft, #f5d4cd),
inset 0 0 0 5px rgba(201, 61, 43, 0.18);
}
.ht-tile--lead::after {
background: var(--temple-red-soft, #f5d4cd);
}
/* Sticker corner notch — visible little circle in top-left of each tile */
.ht-tile-pin {
position: absolute;
top: 10px; right: 12px;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--ink-strong);
box-shadow: 0 0 0 2px var(--card-tilt, #fff7e6), 0 1px 2px rgba(0,0,0,0.2);
}
.ht-tile--lead .ht-tile-pin {
background: var(--temple-red);
box-shadow: 0 0 0 2px var(--temple-red-soft, #f5d4cd), 0 1px 2px rgba(0,0,0,0.2);
}
.ht-lbl {
font-family: var(--sans);
font-size: 9.5px; font-weight: 800;
text-transform: uppercase;
letter-spacing: 1.8px;
color: var(--muted);
}
.ht-val {
font-size: clamp(34px, 5vw, 50px);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 0.92;
color: var(--ink-strong);
font-variant-numeric: tabular-nums;
font-optical-sizing: auto;
margin-top: 2px;
}
.ht-val--lead {
color: var(--temple-red);
font-size: clamp(26px, 4vw, 38px);
letter-spacing: -0.025em;
position: relative;
display: inline-block;
}
/* Hand-drawn underline on the lead party name */
.ht-val--lead::after {
content: '';
position: absolute;
left: -4px; right: -4px; bottom: -4px;
height: 6px;
background: url("data:image/svg+xml;utf8,") no-repeat center / 100% 100%;
pointer-events: none;
}
.ht-val--date {
font-size: clamp(26px, 4vw, 36px);
}
.ht-sub {
font-family: var(--serif);
font-style: italic;
font-size: 12.5px;
color: var(--muted);
letter-spacing: 0.2px;
line-height: 1.4;
}
@media (min-width: 720px) {
.hero-tally {
grid-template-columns: repeat(4, 1fr);
gap: 18px 16px;
padding: 12px 6px 32px;
}
.ht-tile { padding: 16px 20px 20px; gap: 5px; }
}
/* Carousel container */
.hero-carousel {
position: relative;
overflow: hidden;
min-height: 360px;
}
.hero-track {
display: flex;
width: 100%;
transition: margin-left .7s cubic-bezier(.6,.05,.25,1);
}
.hero-slide {
flex: 0 0 100%;
display: grid;
grid-template-columns: 1fr;
gap: 36px;
align-items: center;
padding: 24px 0 56px;
}
.hero-slide-text {
max-width: 720px;
}
.hero-kicker {
display: inline-flex; align-items: center;
font-family: var(--serif);
font-style: italic;
font-size: 14px;
color: #d4c896;
letter-spacing: 0.3px;
margin-bottom: 16px;
padding-bottom: 6px;
border-bottom: 1px solid rgba(212, 200, 150, 0.25);
}
.hero-headline {
margin: 0 0 18px;
font-family: var(--serif);
font-weight: 700;
font-size: clamp(38px, 6.2vw, 76px);
line-height: 0.96;
letter-spacing: -0.025em;
color: #faf3df;
text-wrap: balance;
font-optical-sizing: auto;
}
.hero-subhead {
margin: 0 0 28px;
font-family: var(--serif);
font-size: 17px;
line-height: 1.55;
color: rgba(244, 236, 216, 0.78);
max-width: 580px;
text-wrap: pretty;
}
.hero-cta {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--sans);
font-size: 13px; font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
color: #faf3df;
text-decoration: none;
padding: 10px 0;
border-bottom: 1px solid rgba(244, 236, 216, 0.4);
transition: border-color .15s ease, color .15s ease, gap .15s ease;
}
.hero-cta:hover {
color: #ffd28a;
border-bottom-color: #ffd28a;
text-decoration: none;
gap: 14px;
}
.hero-cta-arrow {
font-family: var(--serif);
font-size: 16px;
font-weight: 400;
}
/* Visual slot */
.hero-slide-visual {
display: flex; align-items: center; justify-content: center;
min-height: 200px;
}
/* Visual: tally bar */
.hero-visual-tally {
width: 100%;
max-width: 560px;
font-family: var(--serif);
}
.hv-headline {
display: flex; align-items: baseline; gap: 12px;
margin-bottom: 14px;
}
.hv-num {
font-size: clamp(64px, 10vw, 120px);
font-weight: 700;
letter-spacing: -0.04em;
line-height: 0.85;
color: #ffd28a;
font-variant-numeric: tabular-nums;
}
.hv-of {
font-family: var(--sans);
font-size: 13px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: rgba(244, 236, 216, 0.6);
font-weight: 600;
}
.hv-bar {
display: flex;
height: 14px;
border-radius: 100px;
overflow: hidden;
background: rgba(244, 236, 216, 0.08);
border: 1px solid rgba(244, 236, 216, 0.15);
margin-bottom: 12px;
}
.hv-seg {
display: block;
height: 100%;
}
.hv-foot {
font-family: var(--mono, ui-monospace, monospace);
font-size: 11px;
letter-spacing: 0.5px;
color: rgba(244, 236, 216, 0.55);
}
/* Visual: stat */
.hero-visual-stat {
text-align: center;
font-family: var(--serif);
position: relative;
}
.hero-visual-stat::before,
.hero-visual-stat::after {
content: '';
position: absolute;
left: 50%; transform: translateX(-50%);
width: 60px; height: 1px;
background: rgba(244, 236, 216, 0.3);
}
.hero-visual-stat::before { top: -16px; }
.hero-visual-stat::after { bottom: -16px; }
.hv-stat-num {
font-size: clamp(72px, 12vw, 160px);
font-weight: 700;
line-height: 0.85;
letter-spacing: -0.04em;
color: #ffd28a;
font-variant-numeric: tabular-nums;
}
.hv-stat-lbl {
margin-top: 14px;
font-family: var(--sans);
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
color: rgba(244, 236, 216, 0.65);
font-weight: 600;
}
/* Visual: map silhouette */
.hero-visual-map {
color: #d4c896;
width: 100%;
max-width: 280px;
display: flex; align-items: center; justify-content: center;
}
.hv-map-svg {
width: 100%; height: auto;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.2));
}
/* Visual: image */
.hero-visual-image {
width: 100%;
max-width: 480px;
border-radius: 4px;
overflow: hidden;
border: 1px solid rgba(244, 236, 216, 0.2);
}
.hero-visual-image img {
display: block; width: 100%; height: auto;
}
/* Filmstrip — slide pager at bottom of hero */
.hero-filmstrip {
display: flex;
align-items: stretch;
gap: 0;
border-top: 1px solid rgba(244, 236, 216, 0.18);
margin: 0 calc(var(--pad-x) * -1);
background: rgba(0, 0, 0, 0.18);
}
.hero-strip-prev,
.hero-strip-next {
flex: 0 0 auto;
width: 56px;
background: transparent;
border: none;
color: rgba(244, 236, 216, 0.55);
font-family: var(--serif);
font-size: 22px;
cursor: pointer;
padding: 0;
transition: background .15s ease, color .15s ease;
}
.hero-strip-prev { border-right: 1px solid rgba(244, 236, 216, 0.18); }
.hero-strip-next { border-left: 1px solid rgba(244, 236, 216, 0.18); }
.hero-strip-prev:hover,
.hero-strip-next:hover {
background: rgba(244, 236, 216, 0.06);
color: #faf3df;
}
.hero-strip-list {
display: flex;
flex: 1;
overflow-x: auto;
scrollbar-width: none;
}
.hero-strip-list::-webkit-scrollbar { display: none; }
.hero-strip-item {
flex: 1;
min-width: 200px;
display: flex; align-items: center;
gap: 14px;
padding: 16px 20px;
background: transparent;
border: none;
border-right: 1px solid rgba(244, 236, 216, 0.08);
text-align: left;
cursor: pointer;
position: relative;
transition: background .15s ease;
color: rgba(244, 236, 216, 0.5);
font-family: var(--serif);
}
.hero-strip-item:hover { background: rgba(244, 236, 216, 0.04); color: rgba(244, 236, 216, 0.85); }
.hero-strip-item.active { color: #faf3df; background: rgba(244, 236, 216, 0.06); }
.hero-strip-num {
font-family: var(--mono, ui-monospace, monospace);
font-size: 11px;
letter-spacing: 0.5px;
color: rgba(244, 236, 216, 0.55);
flex-shrink: 0;
}
.hero-strip-item.active .hero-strip-num { color: #ffd28a; }
.hero-strip-title {
font-size: 14px;
font-weight: 600;
letter-spacing: -0.005em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hero-strip-progress {
position: absolute;
bottom: 0; left: 0;
height: 2px; width: 0;
background: #ffd28a;
transition: width .2s ease;
}
.hero-strip-item.active .hero-strip-progress {
width: 100%;
animation: hero-progress 10s linear forwards;
}
@keyframes hero-progress {
from { width: 0; }
to { width: 100%; }
}
/* Two-column layout from medium up */
@media (min-width: 880px) {
.hero-slide {
grid-template-columns: 1.4fr 1fr;
gap: 56px;
}
}
/* ================================================================
SECTION PRIMITIVES
================================================================ */
.section {
padding: 44px 0;
border-bottom: 1px solid var(--line);
}
.section.alt { background: var(--paper-soft); }
.section-head { margin-bottom: 26px; max-width: 760px; }
.section-counter {
display: inline-block;
font-family: var(--serif);
font-style: italic;
font-size: 12.5px;
color: var(--muted);
letter-spacing: 0.3px;
margin-bottom: 8px;
padding-bottom: 6px;
border-bottom: 1px solid var(--line-strong);
}
.section h2 {
margin: 0 0 8px;
font-family: var(--serif);
font-size: clamp(22px, 3vw, 30px);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--ink-strong);
}
.section .section-sub {
font-family: var(--serif);
color: var(--ink-soft);
font-size: 15px;
line-height: 1.55;
margin: 0;
max-width: 640px;
text-wrap: pretty;
}
/* ================================================================
CARD PRIMITIVE
================================================================ */
.card {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--rad-md);
padding: 16px 18px;
box-shadow: var(--shadow-card);
}
.card.flush { padding: 18px 20px; }
.card-cap {
display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
flex-wrap: wrap;
margin-bottom: 14px;
}
.card-cap-lbl {
font-size: 10.5px; font-weight: 700;
color: var(--leaf-dark);
text-transform: uppercase; letter-spacing: 1.6px;
}
.card-cap-meta {
font-family: var(--serif);
font-style: italic;
font-size: 12.5px;
color: var(--muted);
}
/* ================================================================
AT-A-GLANCE GRID
================================================================ */
.glance-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
border-radius: var(--rad-md);
overflow: hidden;
}
.glance-tile {
background: var(--card);
padding: 16px 16px 14px;
}
.glance-tile .num {
font-family: var(--serif);
font-size: 30px; font-weight: 700;
color: var(--ink-strong);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
line-height: 1.0;
}
.glance-tile .lbl {
font-size: 11px; font-weight: 600;
color: var(--muted);
margin-top: 8px;
text-transform: uppercase;
letter-spacing: 0.8px;
}
.glance-tile.green .num { color: var(--leaf-dark); }
.glance-tile.amber .num { color: var(--accent); }
/* ================================================================
SEAT TALLY
================================================================ */
.tally-bar {
display: flex;
height: 44px;
border-radius: 6px;
overflow: hidden;
background: var(--paper-soft);
border: 1px solid var(--line);
position: relative;
box-shadow: inset 0 1px 0 rgba(0,0,0,.05);
}
.tally-bar .seg {
display: flex; align-items: center; justify-content: center;
background: var(--seg-color, var(--oth));
color: #fff;
font-size: 13px; font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: 0.2px;
min-width: 12px;
transition: filter .12s ease, transform .12s ease;
text-decoration: none;
border-right: 1px solid rgba(0,0,0,0.1);
}
.tally-bar .seg:last-child { border-right: none; }
.tally-bar .seg:hover { filter: brightness(1.08); text-decoration: none; }
.tally-bar .seg.tiny { font-size: 10px; }
/* The 118 majority tick */
.tally-foot {
position: relative;
height: 22px;
margin-top: 4px;
font-variant-numeric: tabular-nums;
}
.tally-tick {
position: absolute;
top: 0;
font-size: 10.5px;
color: var(--muted);
font-weight: 600;
letter-spacing: 0.4px;
white-space: nowrap;
}
.tally-tick > span { display: inline-block; transform: translateX(-50%); padding-top: 8px; }
.tally-tick:first-child > span { transform: none; }
.tally-tick:last-child > span { transform: translateX(-100%); }
.tally-tick::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 1px; height: 6px;
background: var(--line-strong);
}
.tally-tick.majority {
color: var(--leaf-dark); font-weight: 700;
}
.tally-tick.majority::before {
background: var(--leaf-dark); height: 8px; width: 1.5px;
}
.tally-tick.majority > span::before {
content: '↑ ';
color: var(--leaf-dark);
}
/* Party strip */
.party-strip-card { margin-top: 12px; }
.party-strip {
display: flex; flex-wrap: wrap; gap: 6px;
}
.pchip {
display: inline-flex; align-items: center; gap: 7px;
padding: 5px 11px 5px 9px;
border-radius: 100px;
font-size: 12px; font-weight: 700;
border: 1px solid var(--p-border);
background: var(--p-bg);
color: var(--p-fg);
cursor: pointer;
text-decoration: none;
transition: transform .08s ease, box-shadow .12s ease;
font-variant-numeric: tabular-nums;
}
.pchip:hover {
transform: translateY(-1px);
text-decoration: none;
box-shadow: 0 2px 6px rgba(60,45,15,.10);
}
.pchip .nm { letter-spacing: 0.3px; }
.pchip .ct {
font-size: 14px; font-weight: 800;
font-variant-numeric: tabular-nums;
opacity: 0.95;
}
/* ================================================================
DUAL-MANDATE NOTICE
================================================================ */
.dual-mandate {
background:
linear-gradient(135deg, rgba(217,119,6,.05), rgba(220,38,38,.03)),
var(--card);
border: 1px solid rgba(184,90,30,.30);
border-left: 3px solid var(--accent);
border-radius: var(--rad-md);
padding: 18px 20px;
margin-top: 22px;
box-shadow: var(--shadow-card);
}
.dual-mandate h3 {
font-family: var(--sans);
font-size: 11px; font-weight: 800; letter-spacing: 1.6px;
color: var(--accent); text-transform: uppercase;
margin: 0 0 10px;
display: flex; align-items: center; gap: 8px;
}
.dual-mandate h3::before {
content: '⚐';
font-size: 14px;
}
.dual-mandate p {
margin: 0 0 14px;
font-family: var(--serif);
font-size: 14.5px; color: var(--ink);
line-height: 1.6;
}
.dual-mandate .seat-pair {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}
.dual-mandate .seat-card {
background: var(--card-pure);
border: 1px solid var(--line);
border-radius: var(--rad-sm);
padding: 12px 14px;
text-decoration: none;
color: inherit;
display: block;
transition: border-color .12s ease;
}
.dual-mandate .seat-card:hover { border-color: var(--accent); text-decoration: none; }
.dual-mandate .seat-card .nm {
font-size: 11px; font-weight: 800; letter-spacing: 1.3px;
color: var(--accent); text-transform: uppercase;
}
.dual-mandate .seat-card .meta {
font-size: 12px; color: var(--muted); margin-top: 3px;
}
.dual-mandate .seat-card .vts {
font-size: 14px; font-weight: 700;
color: var(--ink-strong); margin-top: 6px;
font-variant-numeric: tabular-nums;
font-family: var(--serif);
}
/* ================================================================
MAP
================================================================ */
.map-wrap {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
.map-stage {
position: relative;
background:
radial-gradient(ellipse at center, var(--card) 0%, var(--card) 65%, var(--paper-soft) 100%);
border: 1px solid var(--line);
border-radius: var(--rad-md);
aspect-ratio: 1 / 1.18;
width: 100%;
overflow: hidden;
box-shadow: var(--shadow-card);
}
.map-stage svg { width: 100%; height: 100%; display: block; }
.map-stage .ac-path {
stroke: rgba(255,255,255,.75);
stroke-width: .4px;
cursor: pointer;
transition: opacity .12s ease;
}
.map-stage .ac-path:hover, .map-stage .ac-path.active {
opacity: .85;
stroke-width: 1.4px;
stroke: var(--ink-strong);
}
.map-loading {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
color: var(--muted); font-style: italic; font-size: 13px;
font-family: var(--serif);
}
.map-side { display: flex; flex-direction: column; gap: 12px; }
.map-detail {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--rad-md);
padding: 16px 18px;
min-height: 220px;
box-shadow: var(--shadow-card);
}
.map-detail .hint {
color: var(--muted); font-style: italic; font-size: 14px; margin: 0;
font-family: var(--serif);
line-height: 1.5;
}
.map-detail .ac-no {
font-size: 11px; font-weight: 700; letter-spacing: 1.4px;
color: var(--leaf-dark); text-transform: uppercase;
font-family: var(--sans);
}
.map-detail .ac-name {
font-family: var(--serif);
font-size: 22px; font-weight: 700;
margin: 4px 0 2px;
color: var(--ink-strong);
letter-spacing: -0.01em;
}
.map-detail .ac-district {
font-size: 12.5px; color: var(--muted); margin-bottom: 12px;
font-family: var(--serif); font-style: italic;
}
.map-detail .winner-row {
padding: 10px 0; border-top: 1px solid var(--line);
}
.map-detail .winner-row .nm {
font-weight: 800; font-size: 14px; color: var(--ink-strong);
}
.map-detail .winner-row .meta {
font-size: 12px; color: var(--muted); margin-top: 2px;
}
.map-detail .winner-row .vts {
font-family: var(--serif);
font-size: 17px; font-weight: 700;
font-variant-numeric: tabular-nums;
margin-top: 4px;
color: var(--ink-strong);
}
.map-detail .verdict {
font-size: 10px; font-weight: 800; letter-spacing: 1.5px;
text-transform: uppercase;
padding: 3px 8px; border-radius: 4px;
display: inline-block;
margin-top: 8px;
}
.map-detail .verdict.won { background: var(--leaf); color: #fef5e3; }
.map-detail .verdict.runner { background: var(--muted); color: #fff; }
.map-legend {
display: flex; flex-wrap: wrap; gap: 8px;
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--rad-md);
padding: 12px 14px;
font-size: 12px; font-weight: 600; color: var(--ink-soft);
align-items: center;
box-shadow: var(--shadow-card);
}
.legend-title {
font-size: 10px; font-weight: 700;
text-transform: uppercase; letter-spacing: 1.4px;
color: var(--muted);
margin-right: 4px;
width: 100%;
margin-bottom: 4px;
}
.legend-item {
display: inline-flex; align-items: center; gap: 6px;
cursor: pointer; padding: 4px 8px; border-radius: 5px;
text-decoration: none; color: inherit;
transition: background .1s ease;
}
.legend-item:hover { background: var(--paper-soft); color: var(--ink-strong); text-decoration: none; }
.legend-swatch { width: 12px; height: 12px; border-radius: 3px; }
/* ================================================================
VOTE/SEAT SHARE TABLE
================================================================ */
.share-table {
background: transparent;
border: 0;
overflow: hidden;
}
.share-row {
display: grid;
grid-template-columns: 1fr 90px 90px;
gap: 12px;
padding: 14px 4px;
border-bottom: 1px solid var(--line);
align-items: center;
text-decoration: none;
color: inherit;
}
.share-row:hover { background: var(--paper-soft); }
.share-row:last-child { border-bottom: none; }
.share-row.head {
background: transparent;
font-size: 10.5px; font-weight: 700; letter-spacing: 1.5px;
color: var(--muted); text-transform: uppercase;
border-bottom: 1.5px solid var(--line-strong);
padding-block: 8px;
}
.share-row.head:hover { background: transparent; }
.share-row .name {
font-weight: 700; font-size: 15.5px;
color: var(--row-color, var(--ink));
font-family: var(--sans);
}
.share-row .name .bar-bg {
display: block;
height: 6px; border-radius: 100px;
background: var(--paper-soft);
margin-top: 8px;
overflow: hidden;
border: 1px solid var(--line);
}
.share-row .name .bar-bg .bar-fill {
display: block; height: 100%;
background: var(--row-color, var(--ink));
border-radius: 100px;
transition: width .6s ease;
}
.share-row .v {
font-family: var(--serif);
font-weight: 700;
font-size: 18px;
font-variant-numeric: tabular-nums;
text-align: right;
color: var(--row-color, var(--ink));
}
.share-row .vs {
font-size: 12px; color: var(--muted);
display: block;
margin-top: 4px;
font-weight: 500;
font-family: var(--sans);
}
/* ================================================================
RECORDS GRID
================================================================ */
.record-grid {
display: grid; grid-template-columns: 1fr; gap: 10px;
}
.record-card {
background: var(--card);
border: 1px solid var(--line);
border-left: 3px solid var(--rec-color, var(--leaf));
border-radius: var(--rad-md);
padding: 16px 18px;
box-shadow: var(--shadow-card);
display: flex; flex-direction: column; gap: 4px;
}
.record-card .tag {
font-size: 10px; font-weight: 800; letter-spacing: 1.6px;
color: var(--rec-color, var(--leaf-dark));
text-transform: uppercase;
}
.record-card .h {
font-family: var(--serif);
font-size: 18px; font-weight: 700; line-height: 1.25;
margin-top: 4px;
color: var(--ink-strong);
letter-spacing: -0.01em;
}
.record-card .num {
font-family: var(--serif);
font-size: 28px; font-weight: 700;
color: var(--rec-color, var(--leaf));
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
margin-top: 6px;
line-height: 1.0;
}
.record-card .b {
margin-top: 8px;
color: var(--muted); font-size: 12.5px;
line-height: 1.55;
font-family: var(--serif);
}
/* ================================================================
STORY GRID
================================================================ */
.story-carousel {
position: relative;
padding: 0 48px;
}
.story-track {
display: flex;
overflow: hidden;
will-change: transform;
}
.story-track-inner {
display: flex;
width: 100%;
transition: margin-left .55s cubic-bezier(.6,.05,.25,1);
}
.story-track-inner .story-card {
flex: 0 0 100%;
min-height: 0;
box-sizing: border-box;
}
.story-nav {
position: absolute; top: 50%; transform: translateY(-50%);
width: 36px; height: 36px;
border-radius: 50%;
border: 1px solid var(--line);
background: transparent;
color: var(--ink-soft);
font-family: var(--serif);
font-size: 22px; line-height: 1;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: background .15s ease, color .15s ease, border-color .15s ease, transform .08s ease;
padding: 0; padding-bottom: 2px;
z-index: 2;
}
.story-nav:hover {
background: var(--leaf);
border-color: var(--leaf);
color: #fef5e3;
}
.story-nav:active { transform: translateY(-50%) scale(.96); }
.story-nav.prev { left: 0; }
.story-nav.next { right: 0; }
.story-dots {
display: flex; justify-content: center; gap: 6px;
margin-top: 14px;
}
.story-dot {
width: 6px; height: 6px;
border-radius: 50%;
border: none;
background: var(--line);
padding: 0;
cursor: pointer;
transition: width .25s ease, background .15s ease;
}
.story-dot.active {
width: 18px;
border-radius: 100px;
background: var(--leaf);
}
.story-dot:hover:not(.active) { background: var(--muted-soft); }
.story-card {
background: transparent;
border: none;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
border-radius: 0;
padding: 20px 8px 20px 56px;
position: relative;
overflow: hidden;
box-shadow: none;
box-sizing: border-box;
}
.story-card .num-tag {
position: absolute; top: 22px; left: 0;
font-family: var(--mono, ui-monospace, 'SF Mono', Menlo, Consolas, monospace);
font-style: normal;
font-size: 11px; font-weight: 600;
color: var(--muted);
font-variant-numeric: tabular-nums;
line-height: 1;
letter-spacing: 0.5px;
opacity: 1;
}
.story-card .num-tag::after {
content: '';
display: block;
width: 18px; height: 1px;
background: var(--line-strong);
margin-top: 8px;
}
.story-card h3 {
font-family: var(--serif);
font-size: 19px; font-weight: 700;
margin: 0 0 10px;
letter-spacing: -0.015em;
color: var(--ink-strong);
line-height: 1.25;
}
.story-card p {
margin: 0;
color: var(--ink-soft);
font-size: 14.5px; line-height: 1.6;
font-family: var(--serif);
max-width: 68ch;
}
.story-card p strong {
color: var(--ink-strong);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
/* ================================================================
DISTRICT GRID
================================================================ */
.district-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.district-card {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--rad-md);
padding: 16px 14px 12px;
cursor: pointer;
transition: transform .08s ease, border-color .12s ease, box-shadow .12s ease;
text-decoration: none;
color: inherit;
box-shadow: var(--shadow);
position: relative;
overflow: hidden;
isolation: isolate;
}
/* Soft party-colour wash, weighted by seat share */
.district-card::before {
content: '';
position: absolute;
inset: 0;
background: var(--district-wash, transparent);
opacity: 0.13;
z-index: -1;
transition: opacity .15s ease;
}
.district-card:hover::before { opacity: 0.22; }
/* Leader colour stripe on top edge */
.district-stripe {
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--district-wash, var(--district-leader, var(--leaf)));
opacity: 0.95;
}
.district-card:hover {
transform: translateY(-1px);
border-color: var(--district-leader, var(--leaf));
box-shadow: var(--shadow-card);
text-decoration: none;
}
.district-card .name {
font-family: var(--serif);
font-size: 15px; font-weight: 700;
margin-bottom: 8px;
display: flex; justify-content: space-between; align-items: baseline;
color: var(--ink-strong);
letter-spacing: -0.005em;
}
.district-card .name small {
font-family: var(--sans);
font-size: 10.5px; font-weight: 600;
color: var(--muted); letter-spacing: 0.5px;
font-variant-numeric: tabular-nums;
}
.district-card .row {
display: flex; gap: 4px; flex-wrap: wrap;
}
.district-card .row .pchip {
font-size: 10.5px;
padding: 2px 7px 2px 6px;
cursor: default;
}
.district-card .row .pchip:hover { transform: none; box-shadow: none; }
.district-card .row .pchip .ct { font-size: 12px; padding-left: 5px; }
.district-card.swept {
border-color: transparent;
}
.district-card.swept::before { opacity: 0.22; }
.district-card.swept:hover::before { opacity: 0.32; }
.district-card .swept-tag {
font-size: 9.5px; font-weight: 800; letter-spacing: 1.4px;
color: var(--leaf-dark); text-transform: uppercase;
margin-top: 7px;
display: inline-flex; align-items: center; gap: 5px;
}
.district-card .swept-tag::before {
content: '◆'; font-size: 8px;
}
/* ================================================================
RESULTS TABLE
================================================================ */
.results-controls {
display: grid; gap: 8px;
grid-template-columns: 1fr;
margin-bottom: 16px;
}
.results-search-wrap {
position: relative;
display: block;
}
.results-search-icon {
position: absolute;
left: 12px; top: 50%; transform: translateY(-50%);
color: var(--muted);
pointer-events: none;
}
.results-controls input,
.results-controls select {
font: inherit;
padding: 11px 13px;
border: 1px solid var(--line);
border-radius: var(--rad-sm);
background: var(--card-pure);
color: var(--ink);
width: 100%;
font-size: 14px;
transition: border-color .12s ease, box-shadow .12s ease;
}
.results-controls input { padding-left: 36px; }
.results-controls input:focus,
.results-controls select:focus {
outline: none;
border-color: var(--leaf);
box-shadow: 0 0 0 3px var(--leaf-pale);
}
.results-list {
display: grid; gap: 8px;
}
.result-row {
background: var(--card);
border: 1px solid var(--line);
border-left: 3px solid var(--row-color, var(--oth));
border-radius: var(--rad-sm);
padding: 11px 14px 9px;
transition: box-shadow .12s ease, border-color .12s ease;
}
.result-row:hover { box-shadow: var(--shadow-card); }
/* Header — AC · seat name · district */
.rr-head {
display: flex; align-items: baseline; gap: 10px;
flex-wrap: wrap;
margin-bottom: 6px;
padding-bottom: 6px;
border-bottom: 1px solid var(--line-soft);
}
.rr-ac {
font-size: 10.5px; font-weight: 700;
color: var(--muted);
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
background: var(--paper-soft);
padding: 2px 7px;
border-radius: 3px;
letter-spacing: 0.3px;
flex-shrink: 0;
}
.rr-seat {
margin: 0;
font-family: var(--serif);
font-size: 18px;
font-weight: 700;
color: var(--ink-strong);
letter-spacing: -0.01em;
line-height: 1.15;
flex: 1 1 auto;
min-width: 0;
}
.rr-district {
font-family: var(--serif);
font-style: italic;
font-size: 12.5px;
color: var(--muted);
flex-shrink: 0;
}
/* Candidate list — typographic pyramid */
.rr-cands {
display: flex; flex-direction: column;
gap: 2px;
}
.rr-cand {
display: grid;
grid-template-columns: minmax(0, 1fr) 64px minmax(120px, 200px) 80px 50px;
align-items: center;
gap: 10px;
padding: 3px 0;
font-variant-numeric: tabular-nums;
}
.rr-cand-name {
font-family: var(--serif);
font-weight: 600;
letter-spacing: -0.005em;
color: var(--ink-strong);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.rr-party {
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--sans);
font-size: 10px; font-weight: 800;
letter-spacing: 0.5px;
padding: 2px 0;
border-radius: 3px;
background: var(--p-bg);
color: var(--p-fg);
border: 1px solid var(--p-border);
width: 100%;
justify-self: start;
}
.rr-cand-bar {
display: block;
height: 6px;
background: var(--paper-soft);
border-radius: 100px;
overflow: hidden;
border: 1px solid var(--line-soft);
}
.rr-cand-bar-fill {
display: block;
height: 100%;
border-radius: 100px;
transition: width .5s ease;
min-width: 1px;
}
.rr-cand-votes {
font-family: var(--serif);
font-weight: 700;
color: var(--ink-strong);
text-align: right;
white-space: nowrap;
}
.rr-cand-pct {
font-family: var(--serif);
font-weight: 600;
color: var(--ink-soft);
text-align: right;
white-space: nowrap;
}
/* Pyramid: rank-1 winner biggest in row colour, rank-2 ink, ranks 3/4/5 same small/muted */
.rr-cand.rank-1 .rr-cand-name { font-size: 16px; color: var(--row-color, var(--ink-strong)); }
.rr-cand.rank-1 .rr-cand-votes { font-size: 16px; }
.rr-cand.rank-1 .rr-cand-pct { font-size: 13px; }
.rr-cand.rank-1 .rr-cand-bar { height: 7px; }
.rr-cand.rank-2 .rr-cand-name { font-size: 14px; color: var(--ink-strong); }
.rr-cand.rank-2 .rr-cand-votes { font-size: 14px; }
.rr-cand.rank-2 .rr-cand-pct { font-size: 12px; }
.rr-cand.rank-2 .rr-cand-bar { height: 6px; }
.rr-cand.rank-3,
.rr-cand.rank-4,
.rr-cand.rank-5 { padding: 2px 0; }
.rr-cand.rank-3 .rr-cand-name,
.rr-cand.rank-4 .rr-cand-name,
.rr-cand.rank-5 .rr-cand-name {
font-size: 12px; color: var(--muted); font-weight: 500;
}
.rr-cand.rank-3 .rr-cand-votes,
.rr-cand.rank-4 .rr-cand-votes,
.rr-cand.rank-5 .rr-cand-votes {
font-size: 12px; color: var(--muted); font-weight: 600;
}
.rr-cand.rank-3 .rr-cand-pct,
.rr-cand.rank-4 .rr-cand-pct,
.rr-cand.rank-5 .rr-cand-pct {
font-size: 11px; color: var(--muted); font-weight: 500;
}
.rr-cand.rank-3 .rr-cand-bar,
.rr-cand.rank-4 .rr-cand-bar,
.rr-cand.rank-5 .rr-cand-bar { height: 3px; opacity: 0.55; }
.rr-cand.rank-3 .rr-party,
.rr-cand.rank-4 .rr-party,
.rr-cand.rank-5 .rr-party {
opacity: 0.6; font-size: 9.5px;
}
/* Footer stats */
.rr-foot {
display: flex; flex-wrap: wrap;
gap: 6px 8px;
margin-top: 7px;
padding-top: 6px;
border-top: 1px solid var(--line-soft);
font-size: 11px; font-weight: 600;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
.rr-foot .margin { color: var(--leaf-dark); font-weight: 700; }
.rr-foot .dot { color: var(--line-strong); }
.results-meta {
margin-top: 14px; color: var(--muted);
font-size: 12px; text-align: center;
font-family: var(--serif); font-style: italic;
}
.filter-active {
display: inline-flex; align-items: center; gap: 8px;
background: var(--leaf-pale);
color: var(--leaf-dark);
padding: 6px 6px 6px 12px;
border-radius: 100px;
font-size: 12px; font-weight: 700;
margin-bottom: 12px;
border: 1px solid var(--leaf-hair);
letter-spacing: 0.2px;
}
.filter-active .x {
background: var(--leaf-dark);
color: #fef5e3;
width: 18px; height: 18px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700;
cursor: pointer;
border: none;
line-height: 1;
}
.filter-active .x:hover { background: var(--ink-strong); color: #fef5e3; }
/* ================================================================
FOOTER
================================================================ */
.site-foot {
background: #122352;
color: #d8dcef;
padding: 40px 0 28px;
font-size: 13px;
border-top: 4px double rgba(255,255,255,0.12);
position: relative;
}
.site-foot::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 8px;
background-image:
linear-gradient(90deg, var(--accent) 0%, var(--accent) 14.28%, transparent 14.28%, transparent 28.56%, var(--temple-red) 28.56%, var(--temple-red) 42.84%, transparent 42.84%, transparent 57.12%, var(--accent) 57.12%, var(--accent) 71.40%, transparent 71.40%, transparent 85.68%, var(--temple-red) 85.68%, var(--temple-red) 100%);
opacity: 0.85;
}
.foot-grid {
display: grid; gap: 28px;
grid-template-columns: 1fr;
align-items: start;
}
.foot-brand-col .brand-block.dark .brand-name { color: #fff; }
.foot-brand-col .brand-block.dark .brand-tagline { color: #c2cbe3; }
.foot-brand-col .brand-block.dark .brand-mark {
background: rgba(255,255,255,0.10);
color: #f4ecd8;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2);
}
.foot-meta {
margin-top: 14px;
font-family: var(--serif);
font-size: 13px;
color: #aab18d;
line-height: 1.6;
max-width: 520px;
}
.foot-meta #foot-generated { color: #d8dcc6; font-style: italic; }
.foot-nav {
display: flex; flex-direction: column; gap: 8px;
align-items: flex-start;
}
.foot-nav-h {
font-size: 10px; font-weight: 800;
letter-spacing: 1.6px; text-transform: uppercase;
color: #8c9573;
margin-bottom: 4px;
}
.foot-nav a {
color: #e8edd2;
font-weight: 500;
text-decoration: none;
font-size: 13px;
}
.foot-nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
/* ================================================================
TWEAKS PANEL (added by tweaks.js)
================================================================ */
.tweaks-fab {
position: fixed; bottom: 18px; right: 18px;
z-index: 80;
background: var(--ink-strong);
color: var(--paper);
border: 1px solid var(--ink-strong);
border-radius: 100px;
padding: 9px 14px 9px 12px;
font-family: var(--sans);
font-size: 12px; font-weight: 700;
letter-spacing: 0.4px;
box-shadow: 0 6px 20px rgba(0,0,0,0.18);
display: inline-flex; align-items: center; gap: 6px;
cursor: pointer;
}
.tweaks-fab:hover { background: var(--leaf); border-color: var(--leaf); color: #fef5e3; }
.tweaks-panel {
position: fixed; bottom: 64px; right: 18px;
z-index: 80;
background: var(--card-pure);
border: 1px solid var(--line-strong);
border-radius: var(--rad-md);
box-shadow: 0 12px 40px rgba(0,0,0,0.18);
width: 260px;
padding: 14px 16px 16px;
}
.tweaks-panel h3 {
font-family: var(--serif);
font-size: 14px; font-weight: 700;
margin: 0 0 10px;
display: flex; justify-content: space-between; align-items: center;
}
.tweaks-panel h3 button {
background: none; border: 0; cursor: pointer;
font-size: 16px; line-height: 1;
color: var(--muted);
padding: 2px 4px;
}
.tweaks-panel h3 button:hover { color: var(--ink-strong); }
.tweaks-row {
margin-bottom: 12px;
}
.tweaks-row:last-child { margin-bottom: 0; }
.tweaks-row .lbl {
font-size: 10px; font-weight: 700;
text-transform: uppercase; letter-spacing: 1.3px;
color: var(--muted);
margin-bottom: 6px;
}
.tweaks-seg {
display: flex; gap: 0;
background: var(--paper-soft);
border: 1px solid var(--line);
border-radius: 6px;
padding: 2px;
}
.tweaks-seg button {
flex: 1;
background: transparent;
border: 0;
padding: 6px 8px;
font-size: 12px; font-weight: 600;
color: var(--ink-soft);
border-radius: 4px;
cursor: pointer;
}
.tweaks-seg button.on {
background: var(--card-pure);
color: var(--ink-strong);
box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
/* ================================================================
RESPONSIVE
================================================================ */
@media (min-width: 720px) {
.container { padding: 0 24px; }
.hero { padding: 64px 24px 48px; }
.hero-inner {
grid-template-columns: 1.3fr 1fr;
gap: 40px;
align-items: end;
}
.hero-stats { grid-template-columns: repeat(2, 1fr); }
.glance-grid { grid-template-columns: repeat(3, 1fr); }
.record-grid { grid-template-columns: 1fr 1fr; }
.district-grid { grid-template-columns: 1fr 1fr 1fr; }
.dual-mandate .seat-pair { grid-template-columns: 1fr 1fr; }
.map-wrap { grid-template-columns: 1fr 320px; }
.results-controls { grid-template-columns: 1fr 200px 220px; }
.foot-grid { grid-template-columns: 1.6fr 1fr; gap: 40px; }
.foot-nav { flex-direction: row; flex-wrap: wrap; gap: 18px; align-items: center; }
.foot-nav-h { width: 100%; }
}
@media (min-width: 1024px) {
.section { padding: 56px 0; }
.glance-grid { grid-template-columns: repeat(6, 1fr); }
.record-grid { grid-template-columns: 1fr 1fr 1fr; }
.district-grid { grid-template-columns: repeat(4, 1fr); }
.hero-stats { grid-template-columns: repeat(4, 1fr); }
.hero h1 { font-size: 64px; }
}
/* ================================================================
REDUCED MOTION + PRINT
================================================================ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001s !important;
transition-duration: 0.001s !important;
}
}
@media print {
.site-head, .site-foot, .results-controls, .sub-nav, .tweaks-fab, .tweaks-panel { display: none; }
.section { padding: 16px 0; border-bottom: 1px solid #ccc; }
body { background: white; }
body::before { display: none; }
}
/* ================================================================
ROUND 2 POLISH — completing items left mid-flight when Design
Claude's weekly limit ran out. Additive only; doesn't touch any
pre-existing selectors. Scope-locked so the existing aesthetic
carries through.
================================================================ */
/* --- 1. Party-chip readability lock ---------------------------
.map-detail .winner-row .nm and .dual-mandate .seat-card .nm both
override the .pchip's `color: var(--p-fg)` because of higher
selector specificity (3 classes vs 1). Force the chip's text to
inherit so the inline-styled --p-fg always wins. */
.pchip .nm { color: inherit !important; }
.map-detail .winner-row .pchip,
.map-detail .winner-row .pchip .nm,
.dual-mandate .seat-card .pchip,
.dual-mandate .seat-card .pchip .nm {
color: var(--p-fg, var(--ink-strong));
}
/* --- 2. Sticker drop-shadow on every party badge --------------
Subtle two-layer shadow gives party chips physical presence on
the warm paper background, like cut stickers pinned to a sketch. */
.pchip {
box-shadow:
0 1px 0 rgba(80, 50, 20, 0.05),
0 2px 4px rgba(80, 50, 20, 0.10);
}
.pchip:hover {
box-shadow:
0 1px 0 rgba(80, 50, 20, 0.06),
0 4px 8px rgba(80, 50, 20, 0.16);
}
/* --- 3. Map-detail as pinned speech-bubble card --------------
Carries the hero-tally aesthetic into the map side-panel:
slight tilt, ink hairline border, sticker pin in the corner,
and a downward tail pointing back at the map. */
.map-detail {
position: relative;
background: var(--card-tilt, #fff7e6);
border: 1.5px solid var(--ink-strong);
border-radius: 14px;
padding: 18px 20px 22px;
transform: rotate(-0.6deg);
box-shadow:
var(--shadow-tilt),
inset 0 0 0 4px var(--card-tilt, #fff7e6),
inset 0 0 0 5px rgba(26, 20, 16, 0.06);
isolation: isolate;
transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.map-detail:hover {
transform: rotate(0deg) translateY(-2px);
}
/* sticker pin top-right */
.map-detail::before {
content: '';
position: absolute;
top: 12px; right: 14px;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--ink-strong);
box-shadow:
0 0 0 2px var(--card-tilt, #fff7e6),
0 1px 2px rgba(0, 0, 0, 0.2);
z-index: 1;
}
/* tail pointing down-left towards the map */
.map-detail::after {
content: '';
position: absolute;
bottom: -10px; left: 28px;
width: 18px; height: 18px;
background: var(--card-tilt, #fff7e6);
border-right: 1.5px solid var(--ink-strong);
border-bottom: 1.5px solid var(--ink-strong);
transform: rotate(45deg);
border-radius: 0 0 4px 0;
z-index: -1;
}
/* On larger screens the map-detail sits beside the map; tilt the
tail to point left at the map instead of down */
@media (min-width: 720px) {
.map-detail::after {
bottom: auto;
top: 38px;
left: -10px;
border-right: none;
border-bottom: 1.5px solid var(--ink-strong);
border-left: 1.5px solid var(--ink-strong);
}
}
/* --- 4. Hand-drawn red circle on the lead seat number --------
Companion to the existing saffron underline. A loose ring around
the lead party name gives it the "circled in pen" newspaper feel. */
.ht-tile--lead .ht-val--lead {
isolation: isolate;
}
.ht-tile--lead .ht-val--lead::before {
content: '';
position: absolute;
inset: -8px -16px -6px -16px;
background: url("data:image/svg+xml;utf8,") no-repeat center / 100% 100%;
pointer-events: none;
z-index: -1;
}
/* --- 5. Kolam section dividers --------------------------------
A small sequence of dots-and-dashes between sections gives the
page a Sunday-magazine rhythm without hard rules. */
.section + .section {
position: relative;
}
.section + .section::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
width: 96px; height: 12px;
background-color: var(--paper);
background-image: url("data:image/svg+xml;utf8,") no-repeat center / 96px 12px;
z-index: 2;
}
/* When the next section is .alt, paint the divider in alt's bg
so the dot-row floats cleanly above the saffron tint */
.section.alt + .section::before { background-color: var(--paper); }
.section + .section.alt::before { background-color: var(--paper-soft); }
/* --- 6. Stronger alt-section rhythm ---------------------------
Saffron-tinted gradient at the top edge, with a faint kolam
sub-stripe so alt sections feel like a pulled-apart spread. */
.section.alt {
background:
linear-gradient(180deg, rgba(232, 132, 26, 0.06) 0%, transparent 14%),
var(--paper-soft);
}
/* --- 7. Number ticker animation styling -----------------------
Numbers fade in from a slightly transparent state when the
ticker.js IntersectionObserver fires. */
.ht-val.ticker-pending { opacity: 0.55; }
.ht-val.ticker-active { opacity: 1; transition: opacity .3s ease; }
/* --- 8. Readability sweep — overrides for legacy contrast pairs */
/* The carousel kicker on cobalt gradient — make sure it's saffron */
.hero-kicker { color: #ffd9a8 !important; }
/* The hero meta text on the gradient — slightly brighter cream */
.hero-eyebrow-meta { color: rgba(254, 245, 227, 0.85); }
/* Verdict won pill — bump contrast on saffron paper */
.map-detail .verdict.won {
background: var(--leaf-dark);
color: #fbe9c9;
letter-spacing: 1.5px;
}
/* Section "Records" tag chip etc — make sure they don't blend in */
.story-card p strong { color: var(--ink-strong); }
/* ================================================================
ROUND 3 — bigger numbers, mobile alignment fixes
- Hero tally values bumped (mobile minimum 48px, desktop 76px)
- Final tally stacked-bar height + segment text bumped
- Mobile responsive cleanups so text wraps nicely at narrow widths
================================================================ */
/* --- Hero tally: bigger, more dominant numbers --------------- */
.ht-val {
font-size: clamp(48px, 7vw, 72px);
letter-spacing: -0.035em;
line-height: 0.92;
}
.ht-val--lead {
font-size: clamp(36px, 5.5vw, 56px);
letter-spacing: -0.025em;
word-break: break-word;
}
.ht-val--date {
font-size: clamp(36px, 5.5vw, 52px);
}
.ht-tile {
padding: 16px 18px 18px;
min-height: 124px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.ht-lbl {
font-size: 10.5px;
letter-spacing: 1.6px;
}
.ht-sub {
font-size: 13px;
line-height: 1.4;
}
@media (min-width: 720px) {
.ht-tile { min-height: 168px; padding: 20px 24px 22px; }
.ht-lbl { font-size: 11.5px; letter-spacing: 1.8px; }
.ht-sub { font-size: 14px; }
}
/* --- Final tally stacked-bar: bigger, easier to read -------- */
.tally-bar {
height: 56px;
border-radius: 8px;
}
.tally-bar .seg {
font-size: 17px;
font-weight: 800;
letter-spacing: 0.3px;
}
.tally-bar .seg.tiny { font-size: 11px; }
@media (min-width: 720px) {
.tally-bar { height: 68px; }
.tally-bar .seg { font-size: 22px; }
.tally-bar .seg.tiny { font-size: 12px; }
}
/* --- Mobile layout fixes (narrow widths) -------------------- */
@media (max-width: 480px) {
/* Stop the page-wrapper padding from squeezing tile content */
:root { --pad-x: 14px; }
/* Two columns of tiles can be too tight at < 360px — single column */
.hero-tally {
grid-template-columns: 1fr;
gap: 12px;
}
/* When stacked single-column, kill the alternating tilt so the column
reads cleanly (the tilt looks great at 2-up, messy at 1-up). */
.ht-tile { transform: rotate(0) !important; }
.ht-tile::after { left: 28px; }
/* Hero headline / sub text — give it room to breathe */
.hero h1, .hero-headline {
font-size: clamp(32px, 8vw, 44px) !important;
line-height: 1.05;
word-break: break-word;
}
.hero-eyebrow-row {
flex-direction: column;
align-items: flex-start;
gap: 8px;
margin-bottom: 22px;
}
/* Section heads — reduce margin so content starts higher */
.section h2 { font-size: 22px; line-height: 1.18; }
.section .section-sub { font-size: 13.5px; line-height: 1.55; }
/* Allow the tally-bar legend chips to reflow without overflow */
.party-strip { gap: 6px; }
.pchip { font-size: 11.5px; padding: 4px 9px 4px 7px; }
.pchip .ct { font-size: 13px; }
/* Map detail tile — keep tail centred at narrow widths */
.map-detail { transform: rotate(0); }
.map-detail::after { left: 50%; margin-left: -9px; }
}
@media (min-width: 481px) and (max-width: 720px) {
/* Two-column tally with smaller tilt at small tablet widths */
.ht-tile:nth-child(1) { transform: rotate(-0.8deg); }
.ht-tile:nth-child(2) { transform: rotate(0.4deg); }
.ht-tile:nth-child(3) { transform: rotate(-0.4deg); }
.ht-tile:nth-child(4) { transform: rotate(0.8deg); }
}
/* --- Defensive: never let the ::before circle eat the text -- */
.ht-tile--lead .ht-val--lead {
position: relative;
z-index: 1;
}
.ht-tile--lead .ht-val--lead::before {
z-index: 0; /* draw circle BEHIND text, not above */
}
.ht-tile--lead .ht-val--lead::after {
z-index: 2; /* underline above text */
}
/* And anchor the lead party name to its colour token regardless of inline-styling
battles — never let it drop to "0" or to a default ink colour */
#ht-lead-name { color: var(--temple-red); }
/* --- A bit more sticker-feel on the Final tally section ----- */
@media (min-width: 720px) {
.tally-bar {
box-shadow:
inset 0 1px 0 rgba(0,0,0,.06),
0 4px 12px rgba(80, 50, 20, 0.08);
}
}
/* --- Hero carousel hero-num bigger ("108 of 234") ----------- */
.hero-visual-tally .hv-num {
font-size: clamp(72px, 11vw, 132px) !important;
line-height: 0.9;
letter-spacing: -0.04em;
font-weight: 700;
}
.hero-visual-tally .hv-of {
font-size: clamp(14px, 1.6vw, 18px) !important;
letter-spacing: 0.6px;
}
.hero-visual-stat .hv-stat-num {
font-size: clamp(64px, 10vw, 120px) !important;
letter-spacing: -0.04em;
line-height: 0.9;
}
/* ================================================================
ROUND 4 — make it BIG, mobile-first
User feedback: "verdict and vote vs power and numbers too" should
be much bigger. Mobile feels small. Going aggressive on sizes,
especially at the smallest breakpoints.
================================================================ */
/* --- Hero tally values: dramatically larger ----------------- */
.ht-val {
font-size: clamp(58px, 11vw, 96px) !important;
letter-spacing: -0.04em;
line-height: 0.92;
}
.ht-val--lead {
font-size: clamp(40px, 7vw, 64px) !important;
letter-spacing: -0.025em;
}
.ht-val--date {
font-size: clamp(44px, 8vw, 64px) !important;
}
.ht-tile {
padding: 22px 22px 26px !important;
min-height: 168px !important;
}
.ht-lbl {
font-size: 11px !important;
letter-spacing: 1.8px !important;
margin-bottom: 4px;
}
.ht-sub {
font-size: 14px !important;
line-height: 1.4 !important;
margin-top: 6px;
}
@media (min-width: 720px) {
.ht-tile { min-height: 220px !important; padding: 28px 28px 32px !important; }
.ht-lbl { font-size: 12px !important; letter-spacing: 2px !important; }
.ht-sub { font-size: 15px !important; }
}
/* --- Section headings (verdict + vote vs power): bigger ----- */
.section h2 {
font-size: clamp(28px, 6vw, 38px) !important;
letter-spacing: -.6px !important;
line-height: 1.15;
}
.section .section-sub {
font-size: clamp(15px, 2.4vw, 17px) !important;
line-height: 1.55 !important;
}
.section-counter {
font-size: 13px !important;
}
@media (min-width: 1024px) {
.section h2 { font-size: 44px !important; }
.section .section-sub { font-size: 18px !important; }
}
/* --- Final tally section: BIG stacked bar ------------------- */
.tally-bar {
height: 72px !important;
border-radius: 10px;
}
.tally-bar .seg {
font-size: 22px !important;
font-weight: 800 !important;
letter-spacing: 0.4px !important;
}
.tally-bar .seg.tiny { font-size: 13px !important; }
@media (min-width: 720px) {
.tally-bar { height: 88px !important; border-radius: 12px; }
.tally-bar .seg { font-size: 28px !important; }
.tally-bar .seg.tiny { font-size: 14px !important; }
}
.tally-tick { font-size: 12px !important; }
.tally-tick.majority { font-size: 13px !important; }
/* --- Party-by-party chips: bigger ---------------------------- */
.party-strip-card { padding: 16px 18px; }
.party-strip { gap: 8px; }
.pchip {
font-size: 14px !important;
padding: 7px 14px 7px 11px !important;
border-width: 1.8px;
}
.pchip .ct {
font-size: 17px !important;
}
@media (min-width: 720px) {
.pchip { font-size: 15px !important; padding: 8px 16px 8px 13px !important; }
.pchip .ct { font-size: 19px !important; }
}
/* --- Vote share vs seat share table: bigger ---------------- */
.share-row {
padding: 18px 18px !important;
grid-template-columns: 1fr 80px 80px;
gap: 14px;
}
.share-row.head {
font-size: 11px !important;
letter-spacing: 1.6px !important;
}
.share-row .name {
font-size: 19px !important;
font-weight: 800 !important;
}
.share-row .name .vs {
font-size: 13px !important;
margin-top: 4px;
}
.share-row .name .bar-bg {
height: 10px !important;
margin-top: 8px !important;
}
.share-row .v {
font-size: 22px !important;
font-weight: 800 !important;
}
@media (min-width: 720px) {
.share-row {
grid-template-columns: 1fr 110px 110px !important;
padding: 22px 22px !important;
}
.share-row .name { font-size: 22px !important; }
.share-row .v { font-size: 28px !important; }
.share-row .name .vs { font-size: 14px !important; }
.share-row .name .bar-bg { height: 12px !important; }
}
/* --- Section title block: more breathing room -------------- */
.section-head {
margin-bottom: 32px !important;
}
@media (min-width: 720px) {
.section-head { margin-bottom: 40px !important; }
}
/* --- Mobile layout final tweaks --------------------------- */
@media (max-width: 480px) {
/* tile spans full width — tilts off, big numbers, breathing space */
.hero-tally {
grid-template-columns: 1fr !important;
gap: 14px;
}
.ht-tile { transform: rotate(0) !important; min-height: 152px !important; }
.ht-tile::after { left: 28px; }
/* Hero headline */
.hero h1, .hero-headline {
font-size: clamp(34px, 9vw, 48px) !important;
line-height: 1.05;
word-break: break-word;
}
.hero-eyebrow-row {
flex-direction: column;
align-items: flex-start;
gap: 8px;
margin-bottom: 24px;
}
/* Section headings on mobile — bigger again */
.section h2 { font-size: 26px !important; }
.section .section-sub { font-size: 14.5px !important; }
/* Tally bar still readable on tiny screens */
.tally-bar { height: 58px !important; }
.tally-bar .seg { font-size: 18px !important; }
.tally-bar .seg.tiny { font-size: 11px !important; }
/* Vote vs power table — narrower columns on tiny screens */
.share-row {
grid-template-columns: 1fr 60px 60px !important;
gap: 8px;
padding: 14px !important;
}
.share-row .name { font-size: 17px !important; }
.share-row .v { font-size: 18px !important; }
.share-row .name .vs { font-size: 12px !important; }
/* Map detail tile */
.map-detail { transform: rotate(0); padding: 16px 16px 20px; }
.map-detail::after { left: 50%; margin-left: -9px; }
}
/* --- Defensive: lock the lead-name text colour and ensure
::before doesn't eat the text (anti-stacking-context) ----- */
.ht-tile--lead .ht-val--lead {
position: relative;
z-index: 1;
isolation: isolate;
/* Hug the actual word so the underline + circle don't stretch
to the full tile width inside the flex-column parent */
align-self: flex-start;
width: max-content;
max-width: 100%;
}
.ht-tile--lead .ht-val--lead::before { z-index: 0; }
.ht-tile--lead .ht-val--lead::after { z-index: 2; }
#ht-lead-name { color: var(--temple-red) !important; }
/* --- Hero carousel numbers: even bigger ------------------- */
.hero-visual-tally .hv-num {
font-size: clamp(96px, 14vw, 168px) !important;
line-height: 0.88;
font-weight: 700;
letter-spacing: -0.045em;
}
.hero-visual-stat .hv-stat-num {
font-size: clamp(80px, 13vw, 156px) !important;
letter-spacing: -0.045em;
line-height: 0.88;
}
.hero-headline {
font-size: clamp(40px, 6.5vw, 72px) !important;
line-height: 1.05 !important;
letter-spacing: -0.025em !important;
}
@media (min-width: 720px) {
.hero-headline { font-size: clamp(48px, 7vw, 84px) !important; }
}
/* ================================================================
ROUND 5 — calibrate. User said: hero numbers a touch smaller, and
stop globally inflating every section. Final tally + Vote-vs-power
stay big (those need it). Section headings revert to a sensible
editorial scale.
================================================================ */
/* --- Hero tally values: bring back down a notch ------------ */
.ht-val {
font-size: clamp(44px, 7.5vw, 68px) !important; /* was clamp(58, 11vw, 96) */
letter-spacing: -0.035em;
}
.ht-val--lead {
font-size: clamp(30px, 5vw, 48px) !important; /* was clamp(40, 7vw, 64) */
letter-spacing: -0.025em;
}
.ht-val--date {
font-size: clamp(34px, 5.5vw, 50px) !important; /* was clamp(44, 8vw, 64) */
}
.ht-tile {
padding: 16px 18px 18px !important; /* was 22 22 26 */
min-height: 132px !important; /* was 168 */
}
@media (min-width: 720px) {
.ht-tile { min-height: 176px !important; padding: 22px 24px 24px !important; }
}
/* --- Section headings: revert to editorial scale ----------- */
/* Was inflated to 28→44px globally. Restore reasonable hierarchy. */
.section h2 {
font-size: clamp(22px, 3.6vw, 28px) !important;
letter-spacing: -.3px !important;
line-height: 1.2;
}
.section .section-sub {
font-size: clamp(13.5px, 1.8vw, 15px) !important;
line-height: 1.55 !important;
}
@media (min-width: 1024px) {
.section h2 { font-size: 32px !important; }
.section .section-sub { font-size: 15px !important; }
}
/* --- Section title block spacing: tighten ----------------- */
.section-head { margin-bottom: 22px !important; }
@media (min-width: 720px) {
.section-head { margin-bottom: 28px !important; }
}
/* --- Mobile-specific: keep mobile readable but not oversized */
@media (max-width: 480px) {
/* Hero hero (carousel) headline — back to moderate size */
.hero h1, .hero-headline {
font-size: clamp(28px, 7vw, 38px) !important;
line-height: 1.08;
}
/* Section headings on mobile */
.section h2 { font-size: 21px !important; }
.section .section-sub { font-size: 13.5px !important; }
}
/* --- Hero carousel: trim the giant numbers down ----------- */
.hero-visual-tally .hv-num {
font-size: clamp(72px, 11vw, 132px) !important; /* was 96-168 */
line-height: 0.9;
}
.hero-visual-stat .hv-stat-num {
font-size: clamp(64px, 10vw, 120px) !important; /* was 80-156 */
}
.hero-headline {
font-size: clamp(34px, 5.5vw, 56px) !important; /* was 40-72 */
line-height: 1.08 !important;
}
@media (min-width: 720px) {
.hero-headline { font-size: clamp(40px, 6vw, 64px) !important; }
}
/* --- Story / Records / At a glance / Districts cards back
to their original fixed sizes (the !important ones from earlier
blocks are fine as-is; this rule asserts a calmer max). */
.glance-tile .num { font-size: 24px !important; }
@media (min-width: 720px) {
.glance-tile .num { font-size: 28px !important; }
}
.record-card .num { font-size: 22px !important; }
@media (min-width: 720px) {
.record-card .num { font-size: 26px !important; }
}
.story-card h3 { font-size: 15px !important; }
@media (min-width: 720px) {
.story-card h3 { font-size: 17px !important; }
}
/* ================================================================
ROUND 6 — kill the dead-space inside hero carousel slides on mobile
The text block + visual block were separated by a 36 px gap PLUS
a 200 px min-height on the visual + 56 px bottom padding. Total
could push a slide to 600+ px tall with mostly blank gradient in
the middle. Trim ruthlessly on mobile, keep desktop comfortable.
================================================================ */
@media (max-width: 880px) {
.hero-carousel {
min-height: 0;
}
.hero-slide {
gap: 18px !important; /* was 36 */
padding: 8px 0 24px !important; /* was 24 0 56 */
align-items: flex-start;
}
.hero-slide-visual {
min-height: 0 !important; /* was 200 */
padding: 0;
}
/* Drop generous internal padding from the visual variants on mobile */
.hero-visual-tally,
.hero-visual-stat {
padding: 0 !important;
margin: 0 !important;
}
.hv-bar { margin: 12px 0 8px !important; }
.hv-headline { margin-bottom: 0 !important; }
}
/* Even tighter on phones (≤ 480 px) */
@media (max-width: 480px) {
.hero-slide {
gap: 14px !important;
padding-bottom: 16px !important;
}
.hero-slide-text { max-width: 100%; }
.hero-kicker { margin-bottom: 4px !important; }
.hero-headline { margin-bottom: 8px !important; }
.hero-subhead {
font-size: 14px !important;
line-height: 1.45 !important;
margin-bottom: 14px !important;
max-width: 100%;
}
.hero-cta { font-size: 12px !important; }
/* Visual block — keep numbers prominent but compact */
.hv-num { font-size: 64px !important; }
.hv-stat-num { font-size: 60px !important; }
.hv-foot { font-size: 11.5px !important; margin-top: 4px !important; }
}
/* Don't force a tall carousel container at the breakpoint either */
@media (min-width: 481px) and (max-width: 880px) {
.hero-carousel { min-height: 0; }
}
/* ================================================================
ROUND 7 — make the carousel strip fit all 3 slides on mobile
The strip items had min-width: 200 px, prev/next buttons 56 px
each. On a 360 px phone that needs 712 px to fit — so the third
slide was hidden. Shrink everything proportionally.
================================================================ */
@media (max-width: 720px) {
.hero-strip-prev,
.hero-strip-next {
width: 36px !important;
font-size: 18px !important;
}
.hero-strip-item {
flex: 1 1 0 !important; /* equal share */
min-width: 0 !important; /* let titles shrink */
padding: 12px 10px !important;
gap: 8px !important;
}
.hero-strip-num {
font-size: 10px !important;
}
.hero-strip-title {
font-size: 12px !important;
line-height: 1.2;
}
}
/* Phones (≤ 480 px) — even tighter; title may still ellipsize */
@media (max-width: 480px) {
.hero-strip-prev,
.hero-strip-next {
width: 28px !important;
font-size: 16px !important;
}
.hero-strip-item {
padding: 10px 6px !important;
gap: 5px !important;
flex-direction: column !important; /* stack number above title */
align-items: flex-start !important;
}
.hero-strip-num {
font-size: 10px !important;
letter-spacing: 0.6px !important;
}
.hero-strip-title {
font-size: 11px !important;
white-space: normal !important; /* allow 2-line wrap if needed */
line-height: 1.15;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
/* ================================================================
ROUND 8 — replace the decorative TN silhouette with a real
colour-coded mini-map + visible legend + a one-line caption.
"What does this map mean?" answered before viewers can ask.
================================================================ */
.hero-visual-map {
display: flex; flex-direction: column;
align-items: center; gap: 12px;
width: 100%;
max-width: 360px;
color: #fef5e3;
}
.hv-mini-stage {
width: 100%;
aspect-ratio: 800 / 920;
background: rgba(254, 245, 227, 0.06);
border: 1px solid rgba(254, 245, 227, 0.25);
border-radius: 10px;
overflow: hidden;
padding: 8px;
}
.hv-mini-stage svg {
width: 100%; height: 100%;
display: block;
}
.hv-mini-stage .mini-ac-path {
stroke: rgba(254, 245, 227, 0.50);
stroke-width: 0.4px;
}
.hv-mini-legend {
display: flex; flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 6px 12px;
font-size: 11px;
font-weight: 600;
color: rgba(254, 245, 227, 0.92);
letter-spacing: 0.2px;
}
.hv-mini-pip {
display: inline-block;
width: 10px; height: 10px;
border-radius: 2px;
margin-right: 5px;
vertical-align: -1px;
}
.hv-mini-caption {
font-family: var(--serif);
font-style: italic;
font-size: 12.5px;
line-height: 1.45;
color: rgba(254, 245, 227, 0.85);
text-align: center;
margin: 4px 0 0;
max-width: 320px;
}
/* Mobile — keep mini-map readable + caption shrunk */
@media (max-width: 480px) {
.hero-visual-map { max-width: 100%; gap: 8px; }
.hv-mini-stage { max-width: 220px; margin: 0 auto; }
.hv-mini-caption { font-size: 12px; max-width: 100%; }
.hv-mini-legend { font-size: 10.5px; gap: 4px 10px; }
.hv-mini-pip { width: 9px; height: 9px; }
}
/* ================================================================
ROUND 9 — kill wasted vertical space in the hero on every screen.
The carousel had min-height: 360 + slide padding 24/56 + slide
gap 36 + tally margin-bottom 56. All trimmed.
Map mini-map BOX no longer rendered (slide-3 visual switched to
a stat). Whatever empty .hv-mini-* still exists in cached HTML
is hidden defensively.
================================================================ */
/* All sizes — eliminate dead space */
.hero { padding: 36px var(--pad-x) 0 !important; }
.hero-eyebrow-row { margin-bottom: 22px !important; }
.hero-tally { margin-bottom: 26px !important; padding: 8px 4px 16px !important; }
.hero-carousel { min-height: 0 !important; }
.hero-slide {
padding: 12px 0 16px !important;
gap: 24px !important;
align-items: center !important;
}
.hero-slide-visual { min-height: 0 !important; }
/* Desktop / wide — trim further (this was the user's screenshot view) */
@media (min-width: 720px) {
.hero { padding: 48px var(--pad-x) 0 !important; }
.hero-eyebrow-row { margin-bottom: 28px !important; }
.hero-tally { margin-bottom: 32px !important; padding: 12px 6px 18px !important; }
.hero-slide {
padding: 16px 0 20px !important;
gap: 40px !important;
}
}
/* Defensive: if any cached HTML still contains the old .hv-mini-* nodes,
collapse them to nothing so they can't add height. */
.hv-mini-stage,
.hv-mini-legend,
.hv-mini-caption { display: none !important; }
/* ================================================================
ROUND 10 — phone-only space audit. The header brand is wrapping
onto 2 lines, the eyebrow + 4 tiles + sub-text were eating ~85%
of the viewport before "How Tamil Nadu voted" appeared. Trim
ruthlessly so the carousel headline lives above the fold.
================================================================ */
@media (max-width: 480px) {
/* Header — drop the tagline, the brand wrapping eats a row */
.brand-tagline { display: none !important; }
.brand-name { font-size: 15px !important; }
.site-head .container { height: 50px; }
/* Sub-nav — slimmer */
.sub-nav { padding: 6px 0 !important; }
.sub-nav a { padding: 4px 8px !important; font-size: 12px !important; }
/* Hero — top padding cut, eyebrow row tight */
.hero { padding-top: 22px !important; }
.hero-eyebrow-row {
margin-bottom: 14px !important;
gap: 4px !important;
}
.hero-eyebrow { font-size: 10.5px !important; letter-spacing: 1.6px !important; }
.hero-eyebrow-meta { font-size: 10.5px !important; }
/* Tally tiles — much smaller */
.hero-tally {
margin-bottom: 18px !important;
padding: 6px 4px 14px !important;
gap: 12px !important;
}
.ht-tile {
min-height: 88px !important;
padding: 12px 14px 14px !important;
border-width: 1.2px !important;
}
.ht-tile::after {
width: 14px; height: 14px;
bottom: -8px; left: 18px;
}
.ht-tile-pin { top: 8px; right: 10px; width: 6px; height: 6px; }
.ht-lbl {
font-size: 9.5px !important;
letter-spacing: 1.4px !important;
margin-bottom: 2px;
}
.ht-val {
font-size: clamp(30px, 7.5vw, 40px) !important;
line-height: 0.92;
letter-spacing: -0.04em;
}
.ht-val--lead {
font-size: clamp(22px, 6vw, 32px) !important;
}
.ht-val--lead::before { display: none !important; } /* drop the red circle on phones */
.ht-val--lead::after { height: 4px !important; bottom: -2px !important; }
.ht-val--date { font-size: clamp(24px, 6.5vw, 34px) !important; }
.ht-sub {
font-size: 11px !important;
line-height: 1.3 !important;
margin-top: 3px !important;
}
/* Tally is back to 2-up on phones (was forced to 1-col earlier) —
2-up makes everything fit in less vertical real estate */
.hero-tally {
grid-template-columns: 1fr 1fr !important;
gap: 10px 10px !important;
}
.ht-tile:nth-child(1) { transform: rotate(-1deg) !important; }
.ht-tile:nth-child(2) { transform: rotate(0.4deg) !important; }
.ht-tile:nth-child(3) { transform: rotate(-0.4deg) !important; }
.ht-tile:nth-child(4) { transform: rotate(1deg) !important; }
/* Carousel slide — slimmer text + smaller "108" */
.hero-slide { gap: 12px !important; padding: 8px 0 12px !important; }
.hero-kicker { font-size: 12px !important; margin-bottom: 4px !important; }
.hero-headline {
font-size: clamp(26px, 7.5vw, 34px) !important;
margin-bottom: 6px !important;
}
.hero-subhead {
font-size: 13px !important;
line-height: 1.45 !important;
margin-bottom: 12px !important;
}
.hv-num { font-size: 56px !important; }
.hv-of { font-size: 13px !important; }
.hv-bar { margin: 8px 0 6px !important; }
.hv-foot { font-size: 11px !important; }
}
/* ================================================================
ROUND 11 — At-a-glance was 4× "234". Replace with 6 surprise stats.
New tile gets an optional sub-line (the seat / context).
================================================================ */
.glance-tile .sub {
font-size: 11px;
color: var(--muted);
margin-top: 4px;
font-family: var(--serif);
font-style: italic;
line-height: 1.3;
}
.glance-tile .num {
font-size: clamp(20px, 3vw, 26px) !important; /* slightly tighter for longer values like "+1" or "2,20,382" */
}
@media (min-width: 720px) {
.glance-tile .num { font-size: 28px !important; }
}
/* Update the section sub-text to reflect the new content (set in JS too) */
/* ================================================================
ROUND 12 — kill the actual cause of the desktop hero dead space.
1. align-items: center → align-items: start (text + visual
stick to top of the slide row, no phantom centering)
2. Reduce the giant stat number max sizes — they were forcing
all slides to match the height of the tallest slide
3. hero-track align: stretch → start
Verified in CSS by inspecting the rules cascade.
================================================================ */
.hero-slide {
align-items: start !important;
}
.hero-track {
align-items: stretch; /* keeps cards equal width; height stays auto */
}
.hero-slide-text {
align-self: start !important;
}
.hero-slide-visual {
align-self: start !important;
}
/* Hero carousel container — never let it pad itself */
.hero-carousel { padding: 0 !important; }
/* Reduce the giant numbers. clamp(64-120) was forcing slide 3 to be
~200 px tall, and the flex-track equalised every other slide to it. */
.hero-visual-tally .hv-num,
.hero-visual-stat .hv-stat-num {
font-size: clamp(56px, 8vw, 96px) !important;
line-height: 0.94 !important;
letter-spacing: -0.04em;
}
.hero-visual-stat .hv-stat-num {
/* "14 of 16" needs less width because of the "of" — slightly tighter */
font-size: clamp(48px, 7vw, 84px) !important;
}
/* Trim decoration bars on the stat — they pushed the visible block taller */
.hero-visual-stat::before,
.hero-visual-stat::after {
width: 60px !important;
height: 1px !important;
}
.hero-visual-stat::before { top: -10px !important; }
.hero-visual-stat::after { bottom: -10px !important; }
/* "VOTES" / "OF 16" label under the giant — slimmer */
.hv-stat-lbl,
.hv-foot,
.hv-of {
font-size: 12px !important;
letter-spacing: 0.6px;
margin-top: 2px !important;
}
/* Hero outer block — pull bottom in tight on desktop */
@media (min-width: 720px) {
.hero { padding-bottom: 0 !important; }
.hero-tally { margin-bottom: 24px !important; padding-bottom: 12px !important; }
.hero-slide { padding: 8px 0 12px !important; gap: 32px !important; }
}
/* ================================================================
ROUND 13 — fit the carousel strip above the fold on desktop.
Target: save ~80 px from hero internals, re-add a compact map
for slide 3, kill the .hv-mini-* hide rule from earlier.
================================================================ */
/* Re-enable the mini-map node — earlier rounds had display:none */
.hv-mini-stage { display: block !important; }
.hv-mini-legend, .hv-mini-caption { display: none !important; }
.hv-mini-stage {
width: 100%;
max-width: 220px; /* compact — fits inside the visual cell */
aspect-ratio: 800 / 920;
background: rgba(254, 245, 227, 0.06);
border: 1px solid rgba(254, 245, 227, 0.22);
border-radius: 8px;
overflow: hidden;
padding: 4px;
margin: 0 auto;
}
.hv-mini-stage svg { width: 100%; height: 100%; display: block; }
.hv-mini-stage .mini-ac-path { stroke: rgba(254, 245, 227, 0.45); stroke-width: 0.4px; }
.hero-visual-map {
width: 100%;
display: flex; align-items: center; justify-content: center;
max-width: 280px;
margin-left: auto; /* sit right side of the slide grid */
}
/* Trim hero internals on desktop ≥ 720 — total ~80 px saved */
@media (min-width: 720px) {
.hero { padding-top: 28px !important; } /* was 48 (-20) */
.hero-eyebrow-row { margin-bottom: 14px !important; } /* was 28 (-14) */
.hero-tally {
margin-bottom: 14px !important; /* was 24 (-10) */
padding: 8px 4px 10px !important; /* was 12 6 18 (-12) */
}
.ht-tile {
min-height: 144px !important; /* was 176 (-32) */
padding: 16px 18px 18px !important; /* was 22 24 24 (-12) */
}
.ht-val { font-size: clamp(38px, 5.5vw, 54px) !important; } /* was 44-68 */
.ht-val--lead { font-size: clamp(28px, 4.5vw, 42px) !important; }
.ht-val--date { font-size: clamp(30px, 4.5vw, 44px) !important; }
.ht-sub { font-size: 12.5px !important; line-height: 1.35 !important; }
.ht-lbl { font-size: 11px !important; }
/* Slide layout — text smaller, no extra padding */
.hero-slide { padding: 6px 0 8px !important; gap: 28px !important; }
.hero-headline {
font-size: clamp(30px, 4.5vw, 48px) !important; /* was 40-64 */
line-height: 1.06 !important;
margin-bottom: 6px !important;
}
.hero-subhead {
font-size: 13.5px !important;
line-height: 1.45 !important;
margin-bottom: 14px !important;
max-width: 100%;
}
.hero-kicker { font-size: 12px !important; margin-bottom: 4px !important; }
.hero-cta { font-size: 12.5px !important; }
/* Strip nav — slimmer */
.hero-strip-prev, .hero-strip-next { width: 44px !important; }
.hero-strip-item { padding: 12px 16px !important; }
}
/* Anywhere the slide visual block sits — no extra height */
.hero-slide-visual { padding: 0 !important; min-height: 0 !important; }
/* ================================================================
ROUND 14 — viewport-fit hero, mini-map debox, mobile aggression
================================================================ */
/* 1. Mini-map: just the SVG, no box around it ---------- */
.hv-mini-stage {
background: transparent !important;
border: none !important;
padding: 0 !important;
border-radius: 0 !important;
overflow: visible !important;
}
.hv-mini-stage .mini-ac-path { stroke: rgba(254, 245, 227, 0.55) !important; }
/* 2. Hero — kill ALL bottom space (gradient ends at strip) ------- */
.hero { padding-bottom: 0 !important; margin: 0 !important; }
.hero-strip { margin-bottom: 0 !important; padding-bottom: 0 !important; }
.hero-inner { padding-bottom: 0 !important; }
/* No gap between strip and the next section */
.hero + .section { margin-top: 0 !important; }
/* 3. Viewport-aware hero — fills available screen exactly ------- */
.hero {
min-height: var(--hero-fit, calc(100dvh - 88px));
display: flex;
flex-direction: column;
}
.hero-inner {
flex: 1;
display: flex;
flex-direction: column;
}
.hero-eyebrow-row { flex: 0 0 auto; }
.hero-tally { flex: 0 0 auto; }
.hero-carousel { flex: 1 1 auto; min-height: 0 !important; display: flex; flex-direction: column; justify-content: center; }
.hero-strip { flex: 0 0 auto; }
/* 4. Mobile — trim further so 3 strip options fit above the fold */
@media (max-width: 480px) {
.hero { padding-top: 16px !important; min-height: var(--hero-fit, calc(100dvh - 80px)); }
.hero-eyebrow-row { margin-bottom: 8px !important; }
.hero-tally { margin-bottom: 10px !important; padding: 4px 2px 6px !important; gap: 8px !important; }
.ht-tile {
min-height: 70px !important;
padding: 9px 11px 10px !important;
border-width: 1px !important;
}
.ht-tile::after { width: 12px; height: 12px; bottom: -7px; left: 14px; }
.ht-tile-pin { top: 6px; right: 8px; width: 5px; height: 5px; }
.ht-lbl { font-size: 9px !important; letter-spacing: 1.2px !important; margin-bottom: 1px; }
.ht-val { font-size: clamp(24px, 6.5vw, 32px) !important; }
.ht-val--lead { font-size: clamp(18px, 5.5vw, 26px) !important; }
.ht-val--date { font-size: clamp(20px, 6vw, 28px) !important; }
.ht-val--lead::after { height: 3px !important; }
.ht-sub { font-size: 10px !important; line-height: 1.2 !important; margin-top: 2px !important; }
/* Slide compact */
.hero-slide { padding: 6px 0 8px !important; gap: 10px !important; }
.hero-kicker { font-size: 11px !important; margin-bottom: 2px !important; }
.hero-headline { font-size: clamp(22px, 6.5vw, 28px) !important; line-height: 1.05 !important; margin-bottom: 4px !important; }
.hero-subhead { font-size: 12px !important; line-height: 1.35 !important; margin-bottom: 8px !important; }
.hero-cta { font-size: 11px !important; }
/* Visual blocks compact */
.hv-num { font-size: 40px !important; }
.hv-of { font-size: 11px !important; }
.hv-bar { margin: 6px 0 4px !important; }
.hv-foot { font-size: 10px !important; margin-top: 2px !important; }
.hv-stat-num { font-size: 36px !important; }
.hv-stat-lbl { font-size: 10px !important; margin-top: 0 !important; }
.hv-mini-stage { max-width: 130px !important; }
/* Strip — tight */
.hero-strip-prev, .hero-strip-next { width: 26px !important; font-size: 14px !important; }
.hero-strip-item { padding: 8px 6px !important; gap: 4px !important; }
.hero-strip-num { font-size: 9.5px !important; }
.hero-strip-title { font-size: 10.5px !important; line-height: 1.1; }
}
/* ================================================================
ROUND 15 — extend the aggressive mobile trim from ≤480 to ≤720
so larger phones / small tablets fit too. Desktop (≥720) keeps
the look the user already approved.
================================================================ */
@media (max-width: 720px) {
/* Header — drop the tagline so brand sits on one line */
.brand-tagline { display: none !important; }
.brand-name { font-size: 15px !important; }
.site-head .container { height: 50px !important; }
/* Sub-nav — slimmer; align to mobile site-head height (50px) so no gap shows */
.sub-nav { padding: 4px 0 !important; top: 50px !important; }
.sub-nav a { padding: 4px 8px !important; font-size: 12px !important; }
/* Hero — top trim */
.hero { padding-top: 16px !important; }
.hero-eyebrow-row { margin-bottom: 8px !important; gap: 4px !important; }
.hero-eyebrow { font-size: 10.5px !important; letter-spacing: 1.6px !important; }
.hero-eyebrow-meta { font-size: 10.5px !important; }
/* Tally tiles — compact 2-up */
.hero-tally {
margin-bottom: 10px !important;
padding: 4px 2px 6px !important;
gap: 8px !important;
grid-template-columns: 1fr 1fr !important;
}
.ht-tile {
min-height: 76px !important;
padding: 9px 11px 10px !important;
border-width: 1px !important;
}
.ht-tile:nth-child(1) { transform: rotate(-1deg) !important; }
.ht-tile:nth-child(2) { transform: rotate(0.4deg) !important; }
.ht-tile:nth-child(3) { transform: rotate(-0.4deg) !important; }
.ht-tile:nth-child(4) { transform: rotate(1deg) !important; }
.ht-tile::after { width: 12px; height: 12px; bottom: -7px; left: 14px; }
.ht-tile-pin { top: 6px; right: 8px; width: 5px; height: 5px; }
.ht-lbl { font-size: 9px !important; letter-spacing: 1.2px !important; margin-bottom: 1px !important; }
.ht-val { font-size: clamp(24px, 6.5vw, 34px) !important; line-height: 0.9 !important; }
.ht-val--lead { font-size: clamp(18px, 5.5vw, 26px) !important; }
.ht-val--lead::before { display: none !important; } /* no red circle on phones */
.ht-val--lead::after { height: 3px !important; bottom: -1px !important; }
.ht-val--date { font-size: clamp(20px, 6vw, 28px) !important; }
.ht-sub { font-size: 10px !important; line-height: 1.2 !important; margin-top: 2px !important; }
/* Slide content — compact text + small visual */
.hero-slide { gap: 10px !important; padding: 6px 0 8px !important; }
.hero-kicker { font-size: 11px !important; margin-bottom: 2px !important; }
.hero-headline {
font-size: clamp(22px, 6.5vw, 30px) !important;
line-height: 1.05 !important;
margin-bottom: 4px !important;
}
.hero-subhead {
font-size: 12px !important;
line-height: 1.35 !important;
margin-bottom: 8px !important;
}
.hero-cta { font-size: 11px !important; }
.hv-num { font-size: 40px !important; }
.hv-of { font-size: 11px !important; }
.hv-bar { margin: 6px 0 4px !important; }
.hv-foot { font-size: 10px !important; margin-top: 2px !important; }
.hv-stat-num { font-size: 36px !important; }
.hv-stat-lbl { font-size: 10px !important; margin-top: 0 !important; }
.hv-mini-stage { max-width: 130px !important; }
/* Strip nav — fits all 3 + arrows on a 360 px phone */
.hero-strip-prev, .hero-strip-next { width: 26px !important; font-size: 14px !important; }
.hero-strip-item { padding: 8px 6px !important; gap: 4px !important; flex-direction: row !important; }
.hero-strip-num { font-size: 9.5px !important; }
.hero-strip-title { font-size: 10.5px !important; line-height: 1.1 !important; }
}
/* Phones-only nudge (< 380 px) — corner cases */
@media (max-width: 380px) {
.ht-tile { min-height: 66px !important; padding: 8px 10px 9px !important; }
.hero-headline { font-size: 22px !important; }
.hv-num, .hv-stat-num { font-size: 32px !important; }
}
/* ================================================================
ROUND 16 — top nav cleanup. Only "Elections" + IG/FB/X/YT icons.
Tagline removed globally. Brand name visible at all sizes.
================================================================ */
/* Brand tagline — gone everywhere (not just mobile) */
.brand-tagline { display: none !important; }
.brand-text { display: flex; align-items: center; }
.brand-name { font-size: 16px !important; font-weight: 700; }
/* Nav layout — Elections on left, divider, then 4 social icons */
.primary-nav {
display: flex;
align-items: center;
gap: 4px;
}
.primary-nav .nav-divider {
width: 1px;
height: 18px;
background: var(--line);
margin: 0 6px;
}
.primary-nav a.active {
background: var(--leaf-pale);
color: var(--leaf-dark);
border-radius: 8px;
padding: 6px 12px;
font-weight: 700;
font-size: 14px;
}
.primary-nav .social-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 8px;
color: var(--ink-soft);
transition: background .15s ease, color .15s ease;
text-decoration: none;
}
.primary-nav .social-icon:hover {
background: var(--leaf-pale);
color: var(--leaf-dark);
text-decoration: none;
}
/* Mobile: hide social icons + divider entirely; only the Elections pill stays */
@media (max-width: 720px) {
.primary-nav { gap: 2px; }
.primary-nav a.active { padding: 5px 10px; font-size: 13px; }
.primary-nav .social-icon,
.primary-nav .nav-divider { display: none !important; }
}
/* ================================================================
ROUND 17 — mobile-only per-party row tally. Replaces the cramped
stacked-bar segments (5, 4, etc.) with readable rows like the
Vote-vs-Seats table on mobile. Desktop stays as-is.
================================================================ */
/* Hide the row-style tally on desktop */
.tally-rows { display: none; }
/* Per-party row */
.tally-rows .trow {
display: grid;
grid-template-columns: 1fr 110px;
gap: 6px 12px;
padding: 10px 0;
border-bottom: 1px solid var(--line);
text-decoration: none;
align-items: center;
color: inherit;
transition: background .15s ease;
}
.tally-rows .trow:last-child { border-bottom: none; }
.tally-rows .trow:hover {
background: var(--paper-soft);
text-decoration: none;
}
.tally-rows .trow-name {
grid-column: 1 / -1;
font-size: 14px;
font-weight: 800;
color: var(--row-fg, var(--ink));
letter-spacing: 0.1px;
}
.tally-rows .trow-bar {
grid-column: 1;
height: 8px;
border-radius: 100px;
background: var(--paper-deep);
overflow: hidden;
}
.tally-rows .trow-fill {
display: block;
height: 100%;
border-radius: 100px;
transition: width .6s ease;
}
.tally-rows .trow-val {
grid-column: 2;
font-size: 16px;
font-weight: 800;
color: var(--row-fg, var(--ink));
font-variant-numeric: tabular-nums;
text-align: right;
}
.tally-rows .trow-val small {
font-size: 11px;
font-weight: 700;
color: var(--muted);
margin-left: 4px;
letter-spacing: 0.2px;
}
/* On mobile (≤720px): hide the stacked bar + ticks, show the rows */
@media (max-width: 720px) {
#tally-bar { display: none !important; }
.tally-foot { display: none !important; }
.tally-rows { display: block !important; }
.tally-rows .trow {
padding: 9px 0;
}
.tally-rows .trow-name { font-size: 13.5px; }
.tally-rows .trow-val { font-size: 15px; }
.tally-rows .trow-val small { font-size: 10.5px; }
}
/* ================================================================
ROUND 18 — replace the single stacked bar with multi-row layout
on every screen. The stacked bar squashed parties below 5 seats
into illegible slivers — the row layout shows each party on its
own line with a proportional bar + count.
================================================================ */
/* Hide the stacked bar + ticks everywhere (was desktop-only viewable) */
#tally-bar { display: none !important; }
.tally-foot { display: none !important; }
/* Show the row tally everywhere */
.tally-rows { display: block !important; }
/* Desktop styling — bigger, more polished than mobile */
@media (min-width: 720px) {
.tally-rows .trow {
grid-template-columns: 200px 1fr 130px;
padding: 14px 4px;
gap: 18px;
align-items: center;
}
.tally-rows .trow-name {
grid-column: 1;
font-size: 17px;
font-weight: 800;
}
.tally-rows .trow-bar {
grid-column: 2;
height: 14px;
background: var(--paper-deep);
}
.tally-rows .trow-val {
grid-column: 3;
font-size: 22px;
font-weight: 800;
}
.tally-rows .trow-val small {
font-size: 13px;
margin-left: 6px;
}
}
/* Hover on desktop = subtle highlight + accent border-left */
.tally-rows .trow {
border-left: 3px solid transparent;
padding-left: 12px;
transition: border-left-color .15s ease, background .15s ease;
}
.tally-rows .trow:hover {
border-left-color: var(--row-color);
background: var(--paper-soft);
}
/* ================================================================
ROUND 19 — show full party name + abbr in tally rows.
"Tamilaga Vettri Kazhagam (TVK)" style for every party.
================================================================ */
.tally-rows .trow-name .trow-abbr {
font-size: 0.75em; /* relative — scales with row name */
font-weight: 700;
color: var(--muted);
margin-left: 4px;
letter-spacing: 0.4px;
}
/* On desktop the row name has more room — give the abbreviation
a slightly nicer presentation. */
@media (min-width: 720px) {
.tally-rows .trow {
grid-template-columns: minmax(220px, 1fr) minmax(200px, 2fr) 130px;
}
.tally-rows .trow-name {
font-size: 17px;
line-height: 1.25;
}
.tally-rows .trow-name .trow-abbr {
font-size: 13px;
margin-left: 6px;
}
}
/* On mobile, the name might wrap; keep the abbr tight against it */
@media (max-width: 720px) {
.tally-rows .trow-name {
line-height: 1.2;
}
.tally-rows .trow-name .trow-abbr {
font-size: 11px;
white-space: nowrap;
}
}
/* ================================================================
ROUND 20 — filter chip seat count + dropdown optgroup styling
================================================================ */
.filter-active .filter-count {
display: inline-block;
margin-left: 4px;
padding: 3px 10px;
border-radius: 100px;
background: var(--leaf-dark);
color: #fef5e3;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.4px;
font-variant-numeric: tabular-nums;
}
/* Dropdown — make optgroup labels readable on the cream paper */
#results-bucket-filter optgroup {
font-weight: 700;
color: var(--leaf-dark);
background: var(--paper-soft);
}
#results-bucket-filter option {
padding: 4px 8px;
}
/* ================================================================
ROUND 21 — story carousel → editorial story wall
12 patterns visible at once. Cards cycle through 5 accent colours
so the wall reads like a magazine spread, not a uniform list.
No auto-rotation, no slider — eyes scan at the reader's pace.
================================================================ */
/* Hide the old carousel chrome if any cached HTML still has it */
.story-carousel, .story-track, .story-track-inner, .story-nav, .story-dots, .story-card {
display: none !important;
}
.story-wall {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
margin-top: 8px;
}
@media (min-width: 720px) {
.story-wall { grid-template-columns: 1fr 1fr; gap: 18px; }
}
@media (min-width: 1024px) {
.story-wall { grid-template-columns: repeat(3, 1fr); gap: 22px; }
}
.story-tile {
background: var(--card);
border: 1px solid var(--line);
border-radius: 14px;
padding: 22px 24px 24px;
position: relative;
overflow: hidden;
box-shadow: var(--shadow-card);
transition: transform .18s ease, box-shadow .18s ease;
}
.story-tile:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lift);
}
/* Accent stripe on the left edge — distinct per tile */
.story-tile::before {
content: '';
position: absolute;
left: 0; top: 18px; bottom: 18px;
width: 4px;
border-radius: 4px;
background: var(--tile-accent, var(--leaf));
}
.story-tile.accent-accent { --tile-accent: var(--accent); }
.story-tile.accent-leaf { --tile-accent: var(--leaf); }
.story-tile.accent-tvk { --tile-accent: var(--tvk); }
.story-tile.accent-dmk { --tile-accent: var(--dmk); }
.story-tile.accent-admk { --tile-accent: var(--admk); }
/* Big serif number in the corner — newspaper edition feel */
.story-tile .story-num {
position: absolute;
top: 12px; right: 16px;
font-family: var(--serif);
font-size: 38px;
font-weight: 700;
color: var(--tile-accent, var(--leaf));
opacity: 0.18;
font-variant-numeric: tabular-nums;
line-height: 1;
letter-spacing: -0.02em;
pointer-events: none;
}
.story-tile h3 {
font-family: var(--serif);
font-size: 19px;
font-weight: 700;
line-height: 1.25;
margin: 0 60px 8px 0; /* room for the corner number */
color: var(--ink-strong);
letter-spacing: -0.01em;
}
.story-tile p {
margin: 0;
font-size: 13.5px;
line-height: 1.55;
color: var(--ink-soft);
}
.story-tile p strong {
color: var(--ink-strong);
font-weight: 700;
}
/* Hover-only "read mark" on the corner number — fades full-strength */
.story-tile:hover .story-num { opacity: 0.55; transition: opacity .25s ease; }
/* Mobile — slightly tighter padding + smaller corner number */
@media (max-width: 480px) {
.story-tile { padding: 16px 18px 18px; border-radius: 12px; }
.story-tile h3 { font-size: 16px; margin-right: 44px; }
.story-tile p { font-size: 12.5px; line-height: 1.5; }
.story-tile .story-num { font-size: 30px; top: 8px; right: 12px; }
.story-tile::before { top: 14px; bottom: 14px; }
}
/* ================================================================
ROUND 24 — district cards now show individual-party chips with
alliance suffix (e.g. "AMMK · ADMK+"). Style the suffix small and
muted so it doesn't fight with the party abbreviation.
================================================================ */
.district-card .pchip-suffix {
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.5px;
color: var(--muted);
margin-left: 5px;
padding-left: 5px;
border-left: 1px solid currentColor;
opacity: 0.65;
text-transform: none;
}
.district-card .pchip { padding: 3px 9px; }
.district-card .pchip .ct { font-size: 12px; margin-left: 2px; }
/* Round 24's .pchip-suffix (the "(ADMK+)" tag inside party chips) is
no longer rendered — hide any cached HTML version */
.district-card .pchip-suffix { display: none !important; }
/* ================================================================
ROUND 26 — seat-ledger row title is now a clickable link to the
per-seat detail page (/seats//). Underline appears on hover
so existing visual stays calm; the small arrow is the affordance.
Internal linking is needed for Google sitelinks + crawl depth.
================================================================ */
.rr-seat-link {
color: inherit;
text-decoration: none;
background-image: linear-gradient(currentColor, currentColor);
background-size: 0% 1px;
background-position: 0 100%;
background-repeat: no-repeat;
transition: background-size 0.2s ease;
}
.rr-seat-link:hover {
color: var(--temple-red);
text-decoration: none;
background-size: 100% 1px;
}
.rr-seat-arrow {
display: inline-block;
opacity: 0;
transform: translateX(-4px);
transition: opacity 0.15s ease, transform 0.15s ease;
font-weight: 400;
margin-left: 2px;
}
.rr-seat-link:hover .rr-seat-arrow {
opacity: 1;
transform: translateX(0);
}
/* ================================================================
ROUND 27 — sticky-aware anchor scrolling + floating back-to-top
================================================================ */
html {
/* When any in-page anchor (#results-list, #map, etc.) is clicked,
leave room for the sticky site-head + sub-nav so the section
heading isn't hidden under them. */
scroll-padding-top: 116px;
}
@media (max-width: 720px) {
html { scroll-padding-top: 96px; }
}
/* Floating "back to top" button — appears after scrolling 400px,
replaces the older Display tweaks FAB which is no longer loaded. */
.back-to-top {
position: fixed;
bottom: 18px;
right: 18px;
z-index: 80;
width: 46px;
height: 46px;
border-radius: 50%;
background: var(--ink-strong);
color: var(--paper);
border: 1px solid var(--ink-strong);
font-family: var(--sans);
font-size: 20px;
font-weight: 700;
cursor: pointer;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.20);
display: none;
align-items: center;
justify-content: center;
transition: transform 0.18s ease, background 0.15s ease, box-shadow 0.18s ease;
padding: 0;
line-height: 1;
}
.back-to-top.visible { display: flex; }
.back-to-top:hover {
background: var(--leaf);
border-color: var(--leaf);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
}
.back-to-top:active { transform: translateY(0); }
/* ================================================================
ROUND 28 — homepage navigation gap fix: clear paths to /seats/ hub
================================================================ */
/* Top-nav 'All 234 seats' link — sits next to the active Elections pill,
gives users a one-click path to the dedicated /seats/ hub page. */
.primary-nav .nav-link {
font-size: 14px;
font-weight: 600;
color: var(--ink);
padding: 6px 12px;
border-radius: 8px;
text-decoration: none;
}
.primary-nav .nav-link:hover {
background: var(--leaf-pale);
color: var(--leaf-dark);
text-decoration: none;
}
/* REMOVED 2026-09-20 (mobile remediation R1-01).
* This used to be:
* @media (max-width: 720px) { .primary-nav .nav-link { display: none; } }
* It was written when .nav-link marked ONE link ("All 234 seats") and there
* was no room for it on a phone. The shared header partial later put
* .nav-link on all nine nav links, so the rule silently deleted the entire
* mobile navigation on every page that loads this stylesheet — districts,
* cabinet, parties and by-polls — leaving only a search icon.
* The nav is now a horizontal scroll rail (see assets/css/site-chrome.css,
* MOBILE TUNING), so nothing needs hiding to make it fit. Do not
* reintroduce a display:none here: it will not fix overflow, and it will
* take the navigation with it.
*/
/* Inline CTA inside section 08 sub-text — points to /seats/ hub. */
.section-sub .hub-cta {
display: inline-block;
margin-left: 8px;
font-weight: 700;
color: var(--temple-red);
text-decoration: underline;
text-decoration-thickness: 1.5px;
text-underline-offset: 3px;
}
.section-sub .hub-cta:hover {
color: var(--leaf-dark);
}