/* ========================================================== COLLINS FOR COUNTY COUNCIL — DISTRICT 2 Shared stylesheet · v12 ⚠ REPLACE THE ENTIRE style.css FILE WITH THIS. Verify after deploy: collinsforcouncil.com/style.css must begin with "v12". If it doesn't, it isn't live yet. WHAT v6 DOES (on top of v5): · One centered column — every surface aligns to the same axis · Masthead signature: rules draw themselves, nameplate gets a one-time sheen, faint light wash at the top of the page · Reading text NEVER sits on the gold; no faded ink on gold · Motion smoothed: shorter travel, no overshoot, gentler ranges ========================================================== */ /* ---------- 1. TOKENS ---------- */ :root{ --gold: #C9A227; --gold-hi: #D6B13A; /* the light: top-of-page wash only */ --gold-deep: #8A6D12; --ink: #14120C; --ink-2: #5A5342; /* paper surfaces only — never on gold */ --paper: #FDFBF4; --paper-2: #F8F2E2; --hair: rgba(20,18,12,.16); /* Fluid type scale (1.24 ratio, 360px → 1200px) */ --step--1: clamp(.94rem, .92rem + .10vw, 1.00rem); --step-0: clamp(1.06rem, 1.02rem + .20vw, 1.19rem); --step-1: clamp(1.20rem, 1.14rem + .30vw, 1.42rem); --step-2: clamp(1.42rem, 1.31rem + .52vw, 1.76rem); --step-3: clamp(1.66rem, 1.49rem + .82vw, 2.18rem); --step-4: clamp(1.95rem, 1.70rem + 1.24vw, 2.70rem); --step-5: clamp(2.30rem, 1.92rem + 1.88vw, 3.35rem); --step-6: clamp(2.70rem, 2.10rem + 2.95vw, 4.40rem); /* Fluid spacing */ --sp-2xs: clamp(.5rem, .48rem + .10vw, .62rem); --sp-xs: clamp(.75rem, .72rem + .16vw, .94rem); --sp-s: clamp(1rem, .96rem + .21vw, 1.25rem); --sp-m: clamp(1.5rem, 1.43rem + .32vw, 1.88rem); --sp-l: clamp(2.25rem, 2.1rem + .6vw, 3rem); --sp-xl: clamp(3.25rem, 3rem + 1vw, 4.25rem); --sp-2xl: clamp(4.5rem, 4rem + 2vw, 6.5rem); --measure: 66ch; --wide: 46rem; --page: 70rem; /* Smoothed spring — eases out with no overshoot */ --spring: linear(0, .28 12%, .57 24%, .8 38%, .94 55%, 1 100%); --ease: cubic-bezier(.25, .9, .35, 1); /* True sine ease-in-out, sampled at 10% intervals. Symmetrical and gentle at both ends — how light actually travels across a surface. */ --glide: linear(0, 0.024 10%, 0.095 20%, 0.206 30%, 0.345 40%, 0.5 50%, 0.655 60%, 0.794 70%, 0.905 80%, 0.976 90%, 1); } /* ---------- 2. BASE ---------- */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; hanging-punctuation:first last; /* The root must carry the gold too. If only has it, the canvas underneath a page transition falls back to white. */ background-color:var(--gold); } body{ margin:0; background-color:var(--gold); /* A faint light falling on the top of the page. That's the whole trick. */ background-image:radial-gradient(110% 46rem at 50% -12rem, var(--gold-hi), rgba(214,177,58,0) 62%); background-repeat:no-repeat; color:var(--ink); font-family:"Open Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; font-size:var(--step-0); line-height:1.7; font-synthesis-weight:none; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{ max-width:100%; height:auto; display:block; } ::selection{ background:var(--ink); color:var(--gold); } /* ---------- 3. TYPOGRAPHY ---------- */ h1,h2,h3,h4{ text-wrap:balance; margin:0 0 var(--sp-xs); } .nameplate, h1, .fig{ font-family:"Ultra", Georgia, "Times New Roman", serif; font-weight:400; letter-spacing:-.015em; line-height:1.02; } h1{ font-size:var(--step-5); } h2,h3,h4{ font-family:"Zilla Slab", Georgia, serif; font-weight:600; line-height:1.18; letter-spacing:-.005em; } h2{ font-size:var(--step-3); margin-top:var(--sp-l); } h3{ font-size:var(--step-1); margin-top:var(--sp-m); font-weight:700; } .sheet > :first-child, .card > :first-child, .open > :first-child{ margin-top:0; } p{ margin:0 0 var(--sp-s); max-width:var(--measure); text-wrap:pretty; } .lede{ font-size:var(--step-1); line-height:1.55; font-weight:400; } .eyebrow{ font-family:"Open Sans", sans-serif; font-size:var(--step--1); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); margin:0 0 var(--sp-xs); } .small{ font-size:var(--step--1); line-height:1.6; color:var(--ink-2); } a{ color:inherit; text-decoration-thickness:1px; text-underline-offset:.2em; text-decoration-skip-ink:auto; transition:text-decoration-color .15s var(--ease); } a:hover{ text-decoration-thickness:2px; } :focus-visible{ outline:3px solid var(--ink); outline-offset:3px; border-radius:2px; } .skip{ position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--gold); padding:var(--sp-xs) var(--sp-s); z-index:99; } .skip:focus{ left:0; } /* ---------- 4. LAYOUT & SURFACES ---------- One column, one axis. Every surface centers itself. */ .wrap{ width:min(100% - 2.5rem, var(--page)); margin-inline:auto; } .col{ max-width:var(--wide); margin-inline:auto; } .band{ padding-block:var(--sp-xl); } .band--tight{ padding-block:var(--sp-l); } .band--defer{ content-visibility:auto; contain-intrinsic-size:auto 600px; } .band--hero{ min-height:min(42svh, 28rem); display:grid; align-content:center; padding-block:var(--sp-l) var(--sp-xl); } /* Paper surfaces. ALL reading text lives on one of these. */ .sheet, .card, .open{ background:var(--paper); border:1px solid rgba(20,18,12,.12); border-radius:2px; max-width:var(--wide); margin-inline:auto; } .sheet{ padding:clamp(1.5rem, 5vw, 3.25rem); } .card{ padding:clamp(1.25rem, 3.5vw, 2.25rem); } .card--alt{ background:var(--paper-2); } /* The tax-bill page: contents rail + article need a wider sheet */ .sheet:has(.article-grid){ max-width:64rem; } /* .open = poster panels: hero, identity, closing quotes */ .open{ padding:clamp(1.75rem, 5.5vw, 3.25rem); } /* ---------- 5. MASTHEAD — the signature ---------- */ .masthead{ padding-top:var(--sp-l); text-align:center; } .masthead p{ max-width:none; } /* free the nameplate & office from the prose cap */ .nameplate{ font-size:var(--step-6); margin:0; line-height:.9; } .nameplate a{ text-decoration:none; color:var(--ink); } .office{ font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:clamp(.8rem, 2.4vw, 1.05rem); margin:var(--sp-2xs) 0 0; } .rules{ margin:var(--sp-s) auto 0; max-width:var(--page); } .rules hr{ border:0; background:var(--ink); margin:0; } .rules hr:first-child{ height:4px; } .rules hr:last-child{ height:1px; margin-top:3px; } /* ---- MASTHEAD OVERTURE ---------------------------------------- One slow, quiet moment on load, in three beats: 0.00s the heavy rule draws itself, left to right 0.18s the hairline follows 0.90s a gleam drifts across the lettering and dissolves Only `transform` and `opacity` are animated — the two properties a browser can hand entirely to the GPU — so nothing repaints. The gleam is two layers, like a real specular highlight: a soft bright core with a much wider, fainter halo trailing behind it. Neither slides in from off-screen; each fades up as it arrives and fades away as it leaves, so there is no hard entry or exit. Colours are all darker than the gold field in every channel, so under mix-blend-mode:lighten they can only appear on the dark lettering. */ @media (prefers-reduced-motion:no-preference){ .rules hr{ transform-origin:left center; animation:draw 1.25s var(--glide) both; } .rules hr:last-child{ animation-delay:.18s; } @keyframes draw{ from{ transform:scaleX(0); } } @supports (mix-blend-mode:lighten){ .nameplate a{ position:relative; display:inline-block; } .nameplate a::before, .nameplate a::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:0; mix-blend-mode:lighten; will-change:transform, opacity; backface-visibility:hidden; } /* halo — very wide, very faint, trails behind */ .nameplate a::before{ width:52%; background:linear-gradient(100deg, rgba(184,148,31,0) 0%, rgba(184,148,31,.04) 18%, rgba(184,148,31,.12) 34%, rgba(184,148,31,.20) 50%, rgba(184,148,31,.12) 66%, rgba(184,148,31,.04) 82%, rgba(184,148,31,0) 100%); animation:glide-halo 3.4s var(--glide) .9s 1 forwards; } /* core — softer and wider than before, and half as bright */ .nameplate a::after{ width:22%; background:linear-gradient(100deg, rgba(198,159,37,0) 0%, rgba(198,159,37,.08) 20%, rgba(198,159,37,.26) 36%, rgba(199,160,38,.45) 50%, rgba(198,159,37,.26) 64%, rgba(198,159,37,.08) 80%, rgba(198,159,37,0) 100%); animation:glide-core 3s var(--glide) .9s 1 forwards; } /* Different widths, identical distance travelled (200% of the nameplate). The long opacity ramps are what remove the last of the harshness — the light arrives and leaves, it never appears. */ @keyframes glide-halo{ 0% { transform:translate3d(-106%,0,0); opacity:0; } 26% { opacity:1; } 74% { opacity:1; } 100% { transform:translate3d(279%,0,0); opacity:0; } } @keyframes glide-core{ 0% { transform:translate3d(-250%,0,0); opacity:0; } 24% { opacity:1; } 76% { opacity:1; } 100% { transform:translate3d(659%,0,0); opacity:0; } } } } .nav{ position:sticky; top:0; z-index:40; background:var(--gold); margin-top:var(--sp-xs); } .nav ul{ list-style:none; margin:0; padding:.5rem 0; display:flex; flex-wrap:wrap; justify-content:center; gap:.15rem 1.35rem; } .nav a{ font-size:var(--step--1); font-weight:700; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; padding:.4rem 0; border-bottom:2px solid transparent; transition:border-color .15s var(--ease); } .nav a:hover{ border-bottom-color:rgba(20,18,12,.35); } .nav a[aria-current="page"]{ border-bottom-color:var(--ink); } .nav::after{ content:""; position:absolute; inset:auto 0 0 0; height:1px; background:rgba(20,18,12,.35); opacity:0; } @supports (animation-timeline: scroll()){ @media (prefers-reduced-motion:no-preference){ .nav::after{ animation:navline linear both; animation-timeline:scroll(root block); animation-range:0 160px; } @keyframes navline{ to{ opacity:1; } } } } /* ---------- 6. BUTTONS ---------- */ .btn{ display:inline-block; font-family:"Open Sans", sans-serif; font-size:var(--step--1); font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:.85rem 1.4rem; background:var(--ink); color:var(--paper); border:2px solid var(--ink); border-radius:2px; text-decoration:none; transition:background .15s var(--ease), color .15s var(--ease), transform .1s var(--ease); } .btn:hover{ background:transparent; color:var(--ink); } .btn:active{ transform:translateY(1px); } .btn--ghost{ background:transparent; color:var(--ink); } .btn--ghost:hover{ background:var(--ink); color:var(--paper); } .btns{ display:flex; flex-wrap:wrap; gap:var(--sp-xs); margin-top:var(--sp-m); } /* ---------- 7. SIGNATURE: THE LEDGER ---------- */ .ledger{ max-width:var(--wide); } .ledger-head{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; font-size:var(--step--1); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); padding-bottom:var(--sp-2xs); border-bottom:2px solid var(--ink); } .entry{ display:grid; grid-template-columns:minmax(5.5rem, 7.5rem) 1fr; gap:var(--sp-2xs) var(--sp-m); align-items:baseline; padding-block:var(--sp-s); border-bottom:1px solid var(--hair); } .fig{ font-size:var(--step-4); font-variant-numeric:tabular-nums lining-nums; white-space:nowrap; } .entry p{ margin:0; max-width:52ch; font-size:var(--step-0); line-height:1.55; } .ledger-foot{ margin:0; padding-top:var(--sp-s); border-top:2px solid var(--ink); font-weight:700; font-size:var(--step-1); font-family:"Zilla Slab", Georgia, serif; max-width:none; } @media (max-width:30rem){ .entry{ grid-template-columns:1fr; } .fig{ font-size:var(--step-3); } } /* ---------- 8. PLANKS & LISTS ---------- */ /* ORDERED STEPS — used where sequence carries meaning. Unlike .plank (an unordered set), .steps says: this order matters. Numerals are Ultra + tabular, echoing the ledger figures. */ .steps{ counter-reset:step; margin:var(--sp-m) 0 0; } .step{ position:relative; padding:0 0 var(--sp-l) 4rem; } .step:last-of-type{ padding-bottom:0; } .step::before{ counter-increment:step; content:counter(step); position:absolute; left:0; top:-.12em; width:2.6rem; text-align:center; font-family:"Ultra", Georgia, serif; font-size:var(--step-3); line-height:1; font-variant-numeric:tabular-nums lining-nums; color:var(--gold-deep); } /* the connector: a hairline that fades as it descends */ .step::after{ content:""; position:absolute; left:1.3rem; top:2.4rem; bottom:.5rem; width:2px; background:linear-gradient(rgba(138,109,18,.45), rgba(138,109,18,.06)); } .step:last-of-type::after{ display:none; } .step h3{ margin:0 0 .25rem; } .step p{ margin:0; } /* capstone line — same treatment as the ledger total */ .steps-total{ margin:var(--sp-m) 0 0; padding-top:var(--sp-s); border-top:2px solid var(--ink); font-family:"Zilla Slab", Georgia, serif; font-weight:700; font-size:var(--step-1); max-width:none; } .plank{ padding-left:var(--sp-s); border-left:3px solid var(--gold-deep); } .plank + .plank{ margin-top:var(--sp-m); } .plank h3{ margin:0 0 .3rem; } .plank p{ margin:0; } .marks{ list-style:none; margin:var(--sp-s) 0; padding:0; max-width:var(--measure); } .marks li{ position:relative; padding:.5rem 0 .5rem 1.8rem; border-bottom:1px solid var(--hair); } .marks li:last-child{ border-bottom:0; } /* A proper checkmark — wider than tall, drawn in ink */ .marks li::before{ content:""; position:absolute; left:.1rem; top:.95em; width:.7rem; height:.35rem; border-bottom:2.5px solid var(--ink); border-left:2.5px solid var(--ink); transform:rotate(-48deg); } /* ---------- 9. QUOTES & EXHIBIT ---------- */ .quote{ margin:0; max-width:38rem; font-family:"Zilla Slab", Georgia, serif; font-size:var(--step-2); font-weight:500; line-height:1.35; text-wrap:balance; } .quote cite{ display:block; margin-top:var(--sp-s); font-family:"Open Sans", sans-serif; font-style:normal; font-size:var(--step--1); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); } .exhibit{ margin:var(--sp-m) 0; padding:var(--sp-m); max-width:var(--measure); background:var(--paper-2); border:1px solid var(--hair); border-left:4px solid var(--gold-deep); } .exhibit .eyebrow{ margin-bottom:var(--sp-2xs); } .exhibit blockquote{ margin:0; font-family:"Zilla Slab", Georgia, serif; font-size:var(--step-1); line-height:1.45; font-weight:500; } /* ---------- 10. ARTICLE + STICKY CONTENTS RAIL ---------- */ .article h2{ margin-top:var(--sp-l); padding-top:var(--sp-s); border-top:1px solid var(--hair); scroll-margin-top:5rem; } .article > h2:first-of-type, .article-body > h2:first-of-type{ border-top:0; padding-top:0; margin-top:0; } .article p:last-child{ margin-bottom:0; } .toc ol{ list-style:none; margin:0; padding:0; display:grid; gap:.15rem; counter-reset:toc; } .toc li{ counter-increment:toc; } .toc a{ display:block; padding:.3rem 0; font-size:var(--step--1); font-weight:600; text-decoration-color:transparent; } .toc a::before{ content:counter(toc, decimal-leading-zero); font-variant-numeric:tabular-nums; color:var(--gold-deep); font-weight:700; margin-right:.7rem; } .toc a:hover{ text-decoration-color:currentColor; } @media (min-width:64rem){ .article-grid{ display:grid; grid-template-columns:14rem minmax(0,1fr); gap:var(--sp-l); align-items:start; } .article-grid .toc{ position:sticky; top:4.25rem; padding-top:.25rem; } } .sources{ margin-top:var(--sp-l); padding-top:var(--sp-s); border-top:1px solid var(--hair); } .sources ul{ list-style:none; margin:0; padding:0; } .sources li{ font-size:var(--step--1); color:var(--ink-2); padding:.2rem 0; } /* ---------- 11. SIGNUP ---------- */ .signup{ max-width:var(--wide); margin-inline:auto; } .signup .card{ border-left:4px solid var(--ink); } /* ---------- 12. VOTE BAR + FOOTER ---------- */ .votebar{ background:var(--ink); color:var(--gold); text-align:center; padding:var(--sp-s); } .votebar p{ margin:0 auto; max-width:none; font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:var(--step--1); } .votebar a{ color:var(--gold); } .footer{ padding-block:var(--sp-l); border-top:1px solid rgba(20,18,12,.3); text-align:center; } .footer ul{ list-style:none; margin:0 0 var(--sp-s); padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem 1.5rem; } .footer a{ font-size:var(--step--1); font-weight:600; } .disclaimer{ margin:0 auto; font-size:var(--step--1); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); max-width:none; } /* ---------- 13. PORTRAIT ---------- */ .portrait{ float:none; width:100%; max-width:20rem; margin:0 auto var(--sp-m); border-radius:2px; } @media (min-width:48rem){ .portrait{ float:right; width:17rem; margin:.4rem 0 var(--sp-s) var(--sp-l); shape-outside:margin-box; } } /* ---------- 14. MOTION ---------- Calmer travel, no overshoot, wider ranges = no jumps. */ @media (prefers-reduced-motion:no-preference){ .rise{ animation:rise .6s var(--spring) both; } @keyframes rise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } } @supports (animation-timeline: view()){ .band--defer .sheet, .band--defer .card, .band--defer .open{ animation:inview both var(--ease); animation-timeline:view(); animation-range:entry 0% entry 55%; } @keyframes inview{ from{ opacity:.15; transform:translateY(8px); } to{ opacity:1; transform:none; } } } /* Cross-page fade only. The nameplate is deliberately NOT given a view-transition-name — snapshotting an element whose text colour is transparent is what produced the white flash. */ @view-transition{ navigation:auto; } ::view-transition-old(root), ::view-transition-new(root){ animation-duration:.2s; animation-timing-function:var(--ease); } } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; } } .progress{ display:none; } @supports (animation-timeline: scroll()){ @media (prefers-reduced-motion:no-preference){ .progress{ display:block; position:fixed; inset:0 0 auto 0; height:3px; background:var(--ink); transform-origin:0 50%; z-index:50; animation:grow linear both; animation-timeline:scroll(root block); } @keyframes grow{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } } } } /* ---------- 15. DESKTOP LAYER ---------- Everything above is written mobile-first. This section is what makes a wide screen feel designed rather than stretched. Nothing here changes the HTML — layout belongs in CSS. */ /* 15a. Tablet and up: sheets breathe wider. Prose stays capped at 66ch INSIDE them, so lines never get long. */ @media (min-width:64rem){ .sheet, .card, .open{ max-width:52rem; } .ledger{ max-width:52rem; } .sheet:has(.article-grid){ max-width:66rem; } .signup{ max-width:52rem; } /* A proper newspaper masthead: bigger nameplate, wider tracking */ .nameplate{ font-size:clamp(4.2rem, 5.6vw, 5.6rem); } .office{ font-size:1.1rem; letter-spacing:.18em; } /* The hero earns more room and a larger headline */ .band--hero{ min-height:min(48svh, 32rem); } .band--hero h1{ font-size:clamp(2.9rem, 4.2vw, 3.9rem); } .band--hero .open{ padding:clamp(2.5rem, 4vw, 3.5rem); } /* More air between sections when there's room for it. NOTE: .band--hero must be re-declared AFTER .band here, or the generic rule overrides the hero's own padding and opens a moat. */ .band{ padding-block:var(--sp-xl); } .band--tight{ padding-block:var(--sp-l); } .band--hero{ padding-block:var(--sp-m) var(--sp-xl); } } /* 15b. Large desktop: scale the entire system up one notch. Changing the root size scales type, spacing and max-widths together, because every value in this sheet is expressed in rem. */ @media (min-width:90rem){ :root{ font-size:106.25%; } /* 17px base */ } @media (min-width:120rem){ :root{ font-size:112.5%; } /* 18px base */ } /* ---------- 16. PRINT ---------- */ @media print{ body{ background:#fff; color:#000; font-size:11pt; line-height:1.45; } .nav,.btns,.votebar,.progress,.toc,.skip,.signup{ display:none; } .sheet,.card,.open,.exhibit{ border:0; padding:0; background:#fff; } .wrap{ width:100%; } p,.entry p{ max-width:none; } h1,h2,h3{ break-after:avoid; } .entry,.plank,.exhibit{ break-inside:avoid; } a::after{ content:" (" attr(href) ")"; font-size:9pt; word-break:break-all; } a[href^="#"]::after,a[href^="mailto"]::after{ content:""; } }