/* ========================================================================== Disability News Hub — styles. Design language deliberately matches spiralwaves.co.uk and spiralrespitebreaks.org: Spiral aubergine/magenta palette, full-width colour bands with a dotted texture, pill section titles, rounded cards with arrow CTAs, wave dividers, a deep-purple footer with yellow links. TWO TOKEN LAYERS — this is what lets the reader themes work, so keep it: 1. Brand palette — fixed hues, identical in every theme. 2. Semantic tokens (--bg / --surface / --ink / --grad-* / …) — re-declared per theme, so Dark and High contrast restyle the whole site. Style components from LAYER 2 unless a colour must never change. Type is rem-based so the reader text-size control scales everything (the .fs-1..fs-4 classes move the rem base). Themes come from [data-theme] on ; .easy is the easy-read font. prefs.js applies saved choices in before paint (no flash, and CSP-safe because it's an external file). ========================================================================== */ /* ---- Layer 1: brand palette (same in all themes) ---- */ :root{ --purple:#5a2a5e; --purple-dark:#401e44; --purple-deep:#2b1430; --magenta:#c0176a; --magenta-dark:#a2105a; --teal:#0c7d7a; --teal-dark:#0a6462; --gold:#f2b705; --yellow:#f4ef9b; --orange:#f5842b; /* Type scale — matches the Spiral sites' rendered sizes at the default step. */ --font-sans:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; --fs-base:1.0625rem; --fs-lg:1.25rem; --fs-xl:1.55rem; --fs-2xl:2.05rem; --fs-3xl:2.6rem; --leading:1.65; --radius:18px; --radius-lg:28px; --container:66rem; --measure:36rem; --transition:170ms ease; } /* ---- Layer 2: semantic tokens — Light ---- */ :root,:root[data-theme="light"]{ --bg:#fdfbf6; /* cream canvas, as on spiralwaves */ --surface:#ffffff; --ink:#201b22; --ink-soft:#4a444e; --heading:var(--purple-dark); --border:#e6dfe8; --link:#9a1358; --link-hover:var(--purple-dark); --focus:#8a0040; --panel:#fbf5d6; /* soft yellow panel tint */ --panel-line:#ecdfa8; --chip-bg:var(--purple); --chip-ink:#ffffff; /* teal-dark, not teal: the sources heading sits on the pale tint and needs AA (6.2:1) */ --accent:var(--teal-dark); --accent-bg:#e6f4f3; --accent-line:#bfe0de; /* Logo: aubergine wordmark, gold NEWS box, orange highlight */ --logo-ink:var(--purple); --logo-box:var(--gold); --logo-box-ink:var(--purple-dark); --logo-accent:var(--orange); --danger-bg:#fdeef5; --danger-ink:#8a0040; --shadow:0 3px 14px rgba(43,20,48,.10); --shadow-lg:0 16px 40px rgba(43,20,48,.22); /* Colour bands */ --grad-purple:linear-gradient(140deg,var(--purple),var(--purple-deep)); --grad-magenta:linear-gradient(140deg,var(--magenta),#7d1250); --grad-teal:linear-gradient(140deg,var(--teal),var(--teal-dark)); --on-band:#ffffff; --on-band-soft:rgba(255,255,255,.92); --dots:rgba(255,255,255,.10); --band-edge:transparent; } /* ---- Dark ---- */ :root[data-theme="dark"]{ --bg:#15101a; --surface:#1f1826; --ink:#f0eaf2; --ink-soft:#bdb0c4; --heading:#e8d9ec; --border:#3a2f42; --link:#ffb3d8; --link-hover:#ffd9ec; --focus:#ffb3d8; --panel:#2a2033; --panel-line:#453655; --chip-bg:#4a2450; --chip-ink:#f6e6f8; --accent:#5fd0c9; --accent-bg:#14312f; --accent-line:#2c5b58; --danger-bg:#3d1428; --danger-ink:#ffb3d8; --shadow:0 3px 14px rgba(0,0,0,.45); --shadow-lg:0 16px 40px rgba(0,0,0,.6); --grad-purple:linear-gradient(140deg,#3b1c40,#1a0c1f); --grad-magenta:linear-gradient(140deg,#7d1250,#42092c); --grad-teal:linear-gradient(140deg,#0a5d5b,#053331); --on-band:#ffffff; --on-band-soft:rgba(255,255,255,.88); --dots:rgba(255,255,255,.07); --band-edge:transparent; /* Aubergine is unreadable on the dark header, so the wordmark goes pale. The gold box keeps its own dark text, so it needs no change. */ --logo-ink:#e8d9ec; --logo-box:var(--gold); --logo-box-ink:var(--purple-dark); --logo-accent:var(--orange); } /* ---- High contrast: black canvas, white text, yellow accents, hard borders ---- */ :root[data-theme="hc"]{ --bg:#000; --surface:#000; --ink:#fff; --ink-soft:#ffff00; --heading:#fff; --border:#fff; --link:#ffff00; --link-hover:#fff; --focus:#ffff00; --panel:#000; --panel-line:#fff; --chip-bg:#000; --chip-ink:#ffff00; --accent:#00ff9c; --accent-bg:#000; --accent-line:#00ff9c; --danger-bg:#000; --danger-ink:#ff7a7a; --shadow:none; --shadow-lg:none; --grad-purple:#000; --grad-magenta:#000; --grad-teal:#000; --on-band:#fff; --on-band-soft:#fff; --dots:transparent; --band-edge:#fff; /* bands need a visible edge without colour */ --logo-ink:#fff; --logo-box:#ffff00; --logo-box-ink:#000; --logo-accent:#fff; } /* Follow the OS when the visitor hasn't chosen a theme. */ @media (prefers-color-scheme:dark){ :root:not([data-theme]){ --bg:#15101a; --surface:#1f1826; --ink:#f0eaf2; --ink-soft:#bdb0c4; --heading:#e8d9ec; --border:#3a2f42; --link:#ffb3d8; --link-hover:#ffd9ec; --focus:#ffb3d8; --panel:#2a2033; --panel-line:#453655; --chip-bg:#4a2450; --chip-ink:#f6e6f8; --accent:#5fd0c9; --accent-bg:#14312f; --accent-line:#2c5b58; --danger-bg:#3d1428; --danger-ink:#ffb3d8; --shadow:0 3px 14px rgba(0,0,0,.45); --shadow-lg:0 16px 40px rgba(0,0,0,.6); --grad-purple:linear-gradient(140deg,#3b1c40,#1a0c1f); --grad-magenta:linear-gradient(140deg,#7d1250,#42092c); --grad-teal:linear-gradient(140deg,#0a5d5b,#053331); --dots:rgba(255,255,255,.07); --logo-ink:#e8d9ec; } } /* ---- Reader text size (moves the rem base — everything else scales) ---- */ html{font-size:18px} html.fs-1{font-size:16px} html.fs-2{font-size:18px} html.fs-3{font-size:21px} html.fs-4{font-size:24px} *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0;background:var(--bg);color:var(--ink); font-family:var(--font-sans);font-size:var(--fs-base);line-height:var(--leading); -webkit-font-smoothing:antialiased;overflow-x:hidden; } /* Headings inherit font-family so the easy-read font reaches them too. */ h1,h2,h3,h4{font-family:inherit;color:var(--heading);line-height:1.12;margin:0 0 .5em; letter-spacing:-.015em;font-weight:800} h1{font-size:clamp(1.9rem,5vw,var(--fs-3xl))} h2{font-size:clamp(1.5rem,3.5vw,var(--fs-2xl))} h3{font-size:var(--fs-xl)} h4{font-size:var(--fs-lg)} p,li{font-size:var(--fs-base)} p{margin:0 0 1em} a{color:var(--link);text-underline-offset:.18em;text-decoration-thickness:.08em} a:hover{color:var(--link-hover)} :focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px} img,picture,video,iframe{max-width:100%} img{height:auto;border-radius:8px} .muted{color:var(--ink-soft)} .loading{color:var(--ink-soft);padding:2.5rem 0;text-align:center} /* The block being read aloud (see speech.js). Outline rather than colour alone, so it is visible in High contrast where the panel tint is black on black. */ .speaking{background:var(--panel);outline:3px solid var(--focus);outline-offset:3px; border-radius:6px;scroll-margin:6rem} .empty{text-align:center;color:var(--ink-soft);padding:2.2rem 0} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0} /* Easy-read / dyslexia-friendly: readable stack, generous spacing, left aligned. Local fonts only — the CSP forbids external font files. */ html.easy body{ font-family:"OpenDyslexic","Atkinson Hyperlegible","Comic Sans MS","Comic Neue",Verdana,Tahoma,sans-serif; line-height:1.9;letter-spacing:.03em;word-spacing:.12em; } html.easy h1,html.easy h2,html.easy h3,html.easy h4{letter-spacing:0} html.easy p,html.easy li{max-width:66ch} html.easy .body,html.easy .summary,html.easy .card p{text-align:left} /* ---- Skip link ---- */ .skip{position:absolute;left:.5rem;top:-100px;z-index:1000;background:var(--purple-dark); color:#fff;padding:.75rem 1.25rem;border-radius:0 0 var(--radius) var(--radius); font-weight:700;text-decoration:none} .skip:focus{top:0;color:#fff} /* ---- Layout ---- */ .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:1.25rem} .section{padding-block:clamp(2rem,4.5vw,3.5rem);position:relative} .prose{max-width:var(--measure)} /* Full-width colour bands, with the dotted texture LAYERED over the gradient (a flat colour in high contrast) so it never replaces it. */ .band--purple{background:var(--grad-purple);color:var(--on-band-soft)} .band--magenta{background:var(--grad-magenta);color:var(--on-band-soft)} .band--teal{background:var(--grad-teal);color:var(--on-band-soft)} .band--panel{background:var(--panel)} .band--purple.band--dots{background:radial-gradient(var(--dots) 2px,transparent 2px) 0 0/26px 26px,var(--grad-purple)} .band--magenta.band--dots{background:radial-gradient(var(--dots) 2px,transparent 2px) 0 0/26px 26px,var(--grad-magenta)} .band--teal.band--dots{background:radial-gradient(var(--dots) 2px,transparent 2px) 0 0/26px 26px,var(--grad-teal)} /* Headings on a colour band take the band's ink — EXCEPT pills, which carry their own background and their own ink. Without :not(.pill) this rule wins on specificity (0-1-1 beats .pill--white's 0-1-0) and paints white text on a white pill: the "Services directory" title was invisible until you selected it, and "Latest news" was white on gold. */ .band--purple h1:not(.pill),.band--purple h2:not(.pill),.band--purple h3:not(.pill), .band--magenta h1:not(.pill),.band--magenta h2:not(.pill),.band--magenta h3:not(.pill), .band--teal h1:not(.pill),.band--teal h2:not(.pill),.band--teal h3:not(.pill){color:var(--on-band)} .band--purple a:not(.btn),.band--magenta a:not(.btn),.band--teal a:not(.btn){ color:var(--on-band);text-decoration-thickness:.09em} /* The "back" control sits inside the article's hero band, so it needs band text. */ .band--purple .back,.band--magenta .back,.band--teal .back{color:var(--on-band)} /* High contrast has no band colour, so give the band a drawn edge instead. */ :root[data-theme="hc"] .band--purple, :root[data-theme="hc"] .band--magenta, :root[data-theme="hc"] .band--teal{border-block:3px solid var(--band-edge)} /* Wave divider (the Spiral sites' signature transition into the page body) */ .wave{display:block;width:100%;height:44px;position:relative;margin-bottom:-1px;color:var(--bg)} /* Category icon (CAT_ICON in app.js). Sits before the label, never instead of it. Emoji come from the system font, so nothing is downloaded and the Easy-read stack doesn't distort them. Sized in em so it scales with the text size control along with everything else. */ .cat-ico{margin-right:.4em;font-style:normal;font-weight:400;line-height:1; font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif} .sec-head .cat-ico{font-size:.9em} /* ---- Pill section titles ---- */ .pill{display:inline-block;font-weight:800;font-size:.92rem;letter-spacing:.02em; padding:.4em 1.1em;border-radius:999px;background:var(--gold);color:var(--purple-dark)} .pill--magenta{background:var(--magenta);color:#fff} .pill--teal{background:var(--teal);color:#fff} .pill--white{background:#fff;color:var(--purple-dark)} :root[data-theme="hc"] .pill{background:#ffff00;color:#000} :root[data-theme="hc"] .pill--magenta, :root[data-theme="hc"] .pill--teal, :root[data-theme="hc"] .pill--white{background:#fff;color:#000} .section-head{margin-bottom:1.6rem} .section-head h2{margin-top:.6rem} /* ---- Buttons: rounded pills, arrow on hover ---- */ .btn{display:inline-flex;align-items:center;gap:.5em;font-size:var(--fs-lg);font-weight:800; padding:.68em 1.45em;border-radius:999px;text-decoration:none;border:3px solid transparent; cursor:pointer;line-height:1.15;font-family:inherit; transition:transform var(--transition),background var(--transition),box-shadow var(--transition),color var(--transition)} .btn:hover{transform:translateY(-2px)} .btn--primary{background:var(--magenta);color:#fff;box-shadow:var(--shadow)} .btn--primary:hover{background:var(--magenta-dark);color:#fff;box-shadow:var(--shadow-lg)} .btn--gold{background:var(--gold);color:var(--purple-dark)} .btn--gold:hover{background:#ffca2b;color:var(--purple-dark)} .btn--outline{background:transparent;color:var(--link);border-color:currentColor} .btn--outline:hover{background:var(--magenta);color:#fff;border-color:var(--magenta)} .btn--ghost{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.75)} .btn--ghost:hover{background:#fff;color:var(--purple-dark)} .btn--arrow::after{content:"→";font-weight:800;transition:transform var(--transition)} .btn--arrow:hover::after{transform:translateX(4px)} .btn--sm{font-size:1rem;padding:.5em 1.1em} :root[data-theme="hc"] .btn--primary, :root[data-theme="hc"] .btn--gold{background:#ffff00;color:#000;border-color:#fff} /* ---- Accessibility toolbar (sits above the header) ---- */ .a11y{background:var(--purple-deep);color:#f3e9f4;border-bottom:3px solid var(--gold)} :root[data-theme="hc"] .a11y{background:#000;border-bottom-color:#fff} .a11y-inner{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:.55rem 1.25rem} .a11y-label{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em; color:var(--yellow)} .a11y-group{display:flex;align-items:center;gap:6px} .a11y-group>span{font-size:.8rem;color:#e5d3e8} .a11y-btn{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.1); color:#fff;border:2px solid rgba(255,255,255,.55);border-radius:999px;padding:.3em .85em; font-size:.85rem;font-weight:700;cursor:pointer;font-family:inherit;line-height:1.15; transition:background var(--transition),color var(--transition)} .a11y-btn:hover{background:#fff;color:var(--purple-dark);border-color:#fff} .a11y-btn[aria-pressed="true"]{background:var(--gold);color:var(--purple-deep);border-color:var(--gold)} .a11y-btn .t{font-weight:900} .a11y-btn.sz-s .t{font-size:.8rem} .a11y-btn.sz-l .t{font-size:1.15rem} /* ---- Site header: white bar, magenta rule, pill nav (as on spiralwaves) ---- */ .site-hd{background:var(--surface);border-bottom:4px solid var(--magenta); box-shadow:0 2px 12px rgba(43,20,48,.08)} .hd-inner{display:flex;align-items:center;gap:.6rem 1.5rem;padding-block:.7rem;flex-wrap:wrap} @media (max-width:34rem){ .hd-tag{flex-basis:100%;max-width:none;margin:0} } /* ---- Logo: typographic, not an image file ---- Built from type so it stays sharp at any size, scales with the reader's text-size control, re-themes for dark / high contrast, and follows the Easy-read font. A raster logo would do none of those. Huge aubergine "Spiral", gold NEWS box beneath, orange highlight on top. */ .brand{display:inline-flex;flex-direction:column;align-items:flex-start;gap:.3rem; text-decoration:none;line-height:1;padding:.15rem 0;max-width:100%} /* The small "The" above the wordmark. The orange rule on .brand-word sits directly beneath it, so it reads as a masthead rule rather than a stray bar. */ .brand-the{display:block;font-size:clamp(.68rem,1.5vw,.9rem);font-weight:800; text-transform:uppercase;letter-spacing:.26em;color:var(--logo-ink);margin-bottom:.1rem} /* "LD" is two capitals, so it gets open tracking rather than the tight setting a long word wants — capitals set tight look cramped. Still clamped so it holds up at the largest reader text step on a 320px screen. */ .brand-word{position:relative;display:block;padding-top:.32em; font-size:clamp(1.9rem,5.5vw,2.8rem);font-weight:900;letter-spacing:.01em; color:var(--logo-ink)} /* the orange highlight, sitting on top of the wordmark */ /* The accent rule was 2.4em, sized for the word "Disability". Against a two-letter mark it shot way past it, so it is now sized to the mark itself. */ .brand-word::before{content:"";position:absolute;top:0;left:.05em; width:1.35em;height:.15em;border-radius:999px;background:var(--logo-accent)} .brand-badge{display:inline-block;background:var(--logo-box);color:var(--logo-box-ink); border-top:.18em solid var(--logo-accent);border-radius:5px; font-size:clamp(.9rem,2vw,1.2rem);font-weight:900;text-transform:uppercase; letter-spacing:.2em;padding:.32em .5em .3em .7em} .brand:hover .brand-word{text-decoration:underline;text-decoration-thickness:.06em; text-underline-offset:.12em} .brand:focus-visible{outline:3px solid var(--focus);outline-offset:3px} /* Tagline carries "disability", since the mark itself doesn't say it. */ .hd-tag{margin:0 auto 0 0;color:var(--ink-soft);font-size:.95rem;font-weight:600; max-width:20rem;line-height:1.35;align-self:center} .hd-nav{flex-basis:100%} .hd-nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:.15rem .35rem;margin:0;padding:.35rem 0 0} .hd-nav a,.hd-nav button{display:block;padding:.45em .9em;border-radius:999px;text-decoration:none; color:var(--heading);font-weight:700;font-size:1rem;background:none;border:0;cursor:pointer; font-family:inherit} .hd-nav a:hover,.hd-nav button:hover{background:var(--panel);color:var(--link)} .hd-nav [aria-current="page"],.hd-nav [aria-pressed="true"]{background:var(--purple);color:#fff} :root[data-theme="hc"] .hd-nav [aria-current="page"], :root[data-theme="hc"] .hd-nav [aria-pressed="true"]{background:#ffff00;color:#000} /* ---- Hero band ---- */ .hero{position:relative;overflow:hidden} .hero-inner{padding-block:clamp(1.9rem,4.5vw,3rem) clamp(2.6rem,5.5vw,3.6rem);position:relative;z-index:1} .hero h1{margin:.7rem 0 0} .hero-intro{color:var(--on-band-soft);font-size:var(--fs-lg);max-width:var(--measure);margin:.7rem 0 0} .hero-date{color:var(--on-band-soft);font-size:1rem;margin:.5rem 0 0} .hero .back-row{padding:0 0 .2rem} /* ---- News front page ---- A dated masthead strip rather than a marketing hero, then a lead story with an "also in the news" column beside it, then the rest. */ .mast{position:relative;overflow:hidden} .mast-inner{display:flex;align-items:center;gap:.6rem 1.25rem;flex-wrap:wrap; padding-block:.9rem 1.9rem;position:relative;z-index:1} .mast-date{margin:0;color:var(--on-band-soft);font-size:1rem;font-weight:600} /* The front page's h1 — visible, but sized as a pill so it reads as a kicker. */ .mast-h1{font-size:.92rem;margin:0;letter-spacing:.02em;line-height:1.3} /* Lead + aside. Single column on narrow screens, 2:1 once there's room. */ .frontpage{display:grid;gap:2rem;margin-bottom:2.5rem} @media (min-width:52rem){ .frontpage{grid-template-columns:2fr 1fr;gap:2.5rem} } .lead{display:grid;gap:1.1rem} .lead-media{margin:0} .lead-media img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover; border-radius:var(--radius);border:1px solid var(--border)} .lead-body{display:flex;flex-direction:column;gap:.6rem;align-items:flex-start} .lead-title{font-size:clamp(1.6rem,3.6vw,2.3rem);line-height:1.12;margin:0} .lead-title a{color:var(--heading);text-decoration:none} .lead-title a:hover{text-decoration:underline} .lead-standfirst{margin:0;font-size:var(--fs-lg);color:var(--ink-soft);max-width:38rem} /* Headline list — no images, tighter rhythm, rules between items. */ .alsobox{border-top:4px solid var(--magenta);padding-top:.9rem} .newslist{list-style:none;margin:0;padding:0} .newsitem{padding:.85rem 0;border-bottom:1px solid var(--border)} .newsitem:first-child{padding-top:0} .newsitem:last-child{border-bottom:0;padding-bottom:0} .newsitem-title{font-size:1.05rem;line-height:1.3;margin:0 0 .25rem;font-weight:800} .newsitem-title a{color:var(--heading);text-decoration:none} .newsitem-title a:hover{text-decoration:underline} .newsitem-meta{margin:0;color:var(--ink-soft);font-size:.85rem} /* Section heading with a rule, the way a newspaper separates sections. */ .sec-head{display:flex;align-items:center;gap:.9rem;font-size:var(--fs-xl); margin:0 0 1.25rem;white-space:nowrap} .sec-head::after{content:"";flex:1;height:3px;background:var(--border);border-radius:2px} .sec-head--tight{font-size:var(--fs-lg);margin-bottom:.5rem} .sec-head--tight::after{display:none} /* ---- Services directory ---- Entries are reference material, not stories: no photos, generous spacing, and contact details as real tel:/mailto: links so a phone can dial them. */ .svc-search{margin:0 0 1.25rem;max-width:26rem} .svc-search label{display:block;font-weight:800;font-size:.9rem;margin-bottom:.3rem} .svc-search input{width:100%;border:2px solid var(--border);border-radius:999px; padding:.55em 1em;font-size:var(--fs-base);font-family:inherit; background:var(--surface);color:var(--ink)} .svc-search input:hover{border-color:var(--magenta)} /* Services and groups are separate sections under their own heading — see the comment on SVC_SECTIONS in app.js for why they aren't one list. */ .svc-sec + .svc-sec{margin-top:2.75rem} .svc-sec-intro{margin:-.6rem 0 1.25rem;max-width:44rem;color:var(--ink-soft)} .svc-sec-count{display:inline-block;margin-left:.5rem;padding:.15em .7em;border-radius:999px; background:var(--panel);border:1px solid var(--panel-line);color:var(--ink); font-size:.85rem;font-weight:800;white-space:nowrap} .svc-list{display:grid;gap:1.5rem} @media (min-width:48rem){ .svc-list{grid-template-columns:repeat(auto-fill,minmax(23rem,1fr))} } .svc{background:var(--surface);border:1px solid var(--border);border-left:7px solid var(--teal); border-radius:var(--radius);padding:1.25rem 1.35rem;box-shadow:var(--shadow)} .svc-list>.svc:nth-child(4n+2){border-left-color:var(--magenta)} .svc-list>.svc:nth-child(4n+3){border-left-color:var(--purple)} .svc-list>.svc:nth-child(4n+4){border-left-color:var(--gold)} /* Organisation photo. Fixed ratio so a mixed bag of logos and photographs still lines up across the grid. */ .svc-figure{margin:0 0 .9rem} .svc-img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px; border:1px solid var(--border);display:block;background:var(--panel)} .svc-figure .credit{margin-top:.35rem} .svc-name{margin:0;font-size:var(--fs-lg)} .svc-area{margin:.15rem 0 .6rem;font-size:.85rem;font-weight:800;letter-spacing:.04em; text-transform:uppercase;color:var(--ink-soft)} .svc-summary{margin:0 0 .7rem;font-weight:700} /* An event's date is the thing people came for — give it a panel, not a line of body text buried under the description. */ .svc-when{margin:0 0 .7rem;padding:.5rem .8rem;background:var(--panel); border:1px solid var(--panel-line);border-radius:10px} .svc-desc p{margin:0 0 .7em;color:var(--ink-soft)} .svc-forwho{margin:.2rem 0 .8rem} .svc-contact{list-style:none;margin:0 0 .8rem;padding:.8rem 0 0;border-top:1px solid var(--border)} .svc-contact li{margin-bottom:.3rem;font-size:1rem} .svc-tags{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 .7rem;padding:0} .svc-src{margin:0;font-size:.85rem;color:var(--ink-soft)} /* ---- Local area chooser ---- */ .area-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 1.4rem} .area-label{font-size:.85rem;font-weight:800;text-transform:uppercase; letter-spacing:.05em;color:var(--ink-soft)} /* ---- Category filter (pill row) ---- */ .filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 1.5rem} .filter{background:var(--surface);color:var(--heading);border:2px solid var(--border); border-radius:999px;padding:.4em 1.05em;font-size:1rem;font-weight:700;cursor:pointer; font-family:inherit;transition:background var(--transition),color var(--transition),border-color var(--transition)} .filter:hover{border-color:var(--magenta);color:var(--link)} .filter[aria-pressed="true"]{background:var(--magenta);color:#fff;border-color:var(--magenta)} :root[data-theme="hc"] .filter[aria-pressed="true"]{background:#ffff00;color:#000;border-color:#fff} /* ---- Article cards ---- */ .grid{display:grid;gap:1.75rem;grid-template-columns:repeat(auto-fill,minmax(17.5rem,1fr))} .card{position:relative;background:var(--surface);border:1px solid var(--border); border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex; flex-direction:column;border-top:7px solid var(--purple); transition:transform var(--transition),box-shadow var(--transition)} .card:hover,.card:focus-within{transform:translateY(-5px);box-shadow:var(--shadow-lg)} /* Cycling accent bar, like the Spiral sites' link cards. */ .grid>.card:nth-child(5n+1){border-top-color:var(--magenta)} .grid>.card:nth-child(5n+2){border-top-color:var(--teal)} .grid>.card:nth-child(5n+3){border-top-color:var(--gold)} .grid>.card:nth-child(5n+4){border-top-color:var(--orange)} .grid>.card:nth-child(5n+5){border-top-color:var(--purple)} .card-img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:0; background:var(--panel);transition:transform 450ms ease} .card:hover .card-img{transform:scale(1.06)} .card-body{padding:1.1rem 1.3rem 1.4rem;display:flex;flex-direction:column;gap:.5rem;flex:1} .card-body h2,.card-body h3{margin:0;font-size:var(--fs-lg);line-height:1.25} .card-body h2 a,.card-body h3 a{color:var(--heading);text-decoration:none} .card-body h2 a:hover,.card-body h3 a:hover{text-decoration:underline} .card-body h2 a::after,.card-body h3 a::after{content:"";position:absolute;inset:0;z-index:1} /* whole card clickable */ .card .summary{margin:0;color:var(--ink-soft);font-size:1rem} .card .date{color:var(--ink-soft);font-size:.85rem} .card-more{margin-top:auto;font-weight:800;color:var(--link);text-decoration:none; display:inline-flex;align-items:center;gap:.35em;font-size:1rem} .card-more::after{content:"→";transition:transform var(--transition)} .card:hover .card-more::after{transform:translateX(4px)} /* Category tag, over the image where there is one */ .tag{display:inline-block;align-self:flex-start;font-size:.8rem;font-weight:800;padding:.28em .85em; border-radius:999px;background:var(--chip-bg);color:var(--chip-ink);letter-spacing:.02em} .tag--magenta{background:var(--magenta);color:#fff} .tag--teal{background:var(--teal);color:#fff} .tag--gold{background:var(--gold);color:var(--purple-dark)} .tag--orange{background:var(--orange);color:var(--ink)} .tag--purple{background:var(--purple);color:#fff} .card-img+.card-body .tag{position:absolute;top:.8rem;left:.8rem;z-index:2} :root[data-theme="hc"] .tag{background:#000;color:#ffff00;border:2px solid #fff} /* ---- Article page ---- */ .back{display:inline-flex;align-items:center;gap:.4em;background:none;border:none; color:var(--link);font-size:1rem;font-weight:800;cursor:pointer;padding:0;font-family:inherit} .back:hover{text-decoration:underline} .back-row{padding:1.2rem 0 0} .article{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); padding:1.5rem;box-shadow:var(--shadow);margin-bottom:1.75rem} .article .hero-img{width:100%;max-height:440px;object-fit:cover;border-radius:12px;display:block} /* ---- Collated link items ---- The site links out to other people's journalism, so outbound links are the normal case and are marked as such rather than treated as an exception. */ .out-mark{font-size:.8em;opacity:.75} .byline{font-weight:800;color:var(--ink)} /* The publisher's own words, quoted and credited — never styled as body copy, so it can't be mistaken for something written here. */ .extract{margin:0 0 .8rem;padding:.6rem 0 .6rem .9rem;border-left:4px solid var(--accent-line); background:none} .extract p{margin:0;color:var(--ink-soft);font-style:italic} .extract cite{display:block;margin-top:.35rem;font-size:.85rem;font-style:normal; color:var(--ink-soft);font-weight:700} .item-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;margin:.7rem 0 0} .btn--read{background:var(--chip-bg);color:var(--chip-ink);border:0} .btn--read:hover{background:var(--link-hover);color:#fff} .btn--big{font-size:var(--fs-lg);padding:.7em 1.3em} .item-comments{font-weight:700} .read-there{margin:1.2rem 0 1.6rem} .read-there-note{display:block;margin-top:.5rem;color:var(--ink-soft);font-size:.9rem} .hero-by{margin:.2rem 0 .4rem;color:var(--on-band-soft);font-size:1.05rem} /* Prose written before the site became a collator. Kept readable but visibly set apart; scripts/convert-to-links.js clears it. */ .legacy-body{border-top:1px solid var(--border);padding-top:1rem;margin-top:1rem} .figure{margin:0 0 1.2rem} .credit{color:var(--ink-soft);font-size:.85rem;margin-top:.4rem} /* Staff thumbnail, so the photo can be checked before publishing */ .admin-thumb{width:100%;max-width:18rem;aspect-ratio:16/10;object-fit:cover;border-radius:12px; border:1px solid var(--border);margin:.6rem 0 0;display:block} .article h1{font-size:clamp(1.7rem,4vw,var(--fs-2xl));margin:.5rem 0 .4rem} .article .meta{color:var(--ink-soft);font-size:.9rem;margin-bottom:1rem} .article .lede{font-size:var(--fs-lg);font-weight:700;color:var(--heading)} .article .body>p{margin:0 0 1em} .article .body{max-width:var(--measure)} /* Sources box — the verification aid; keep it prominent. */ .sources{background:var(--accent-bg);border:1px solid var(--accent-line); border-left:6px solid var(--accent);border-radius:0 12px 12px 0;padding:1.1rem 1.25rem;margin:1.6rem 0} .sources h2{margin:0 0 .5rem;font-size:var(--fs-lg);color:var(--accent)} :root[data-theme="hc"] .sources h2{color:var(--accent)} .sources ul{margin:0;padding-left:1.3rem} .sources li{margin:.35rem 0} .sources a{font-weight:700} .sources .why{color:var(--ink-soft);font-size:.9rem;margin:.6rem 0 0} /* ---- Comments ---- */ .comments{margin-bottom:2rem} .comments h2{font-size:var(--fs-xl);margin:0 0 .9rem} .comment{background:var(--surface);border:1px solid var(--border);border-left:5px solid var(--gold); border-radius:0 12px 12px 0;padding:.85rem 1rem;margin-bottom:.7rem} .comment .who{font-weight:800} .comment .when{color:var(--ink-soft);font-size:.85rem} .comment .text{margin:.3rem 0 0} .cform{background:var(--panel);border:1px solid var(--panel-line);border-radius:var(--radius); padding:1.25rem;margin-top:1rem} .cform h3{margin:0 0 .5rem;font-size:var(--fs-lg)} .cform label{display:block;font-weight:700;font-size:1rem;margin:.7rem 0 .25rem} .cform input,.cform textarea{width:100%;border:2px solid var(--border);border-radius:12px; padding:.7em .8em;font-size:var(--fs-base);font-family:inherit;background:var(--surface);color:var(--ink)} .cform textarea{min-height:6rem;resize:vertical} .note{font-size:.9rem;color:var(--ink-soft);margin-top:.7rem} .ok{color:var(--accent);font-weight:800} /* ---- Footer ---- */ .site-ft{background:var(--purple-deep);color:#f3eef4;margin-top:3rem} :root[data-theme="hc"] .site-ft{background:#000;border-top:3px solid #fff} .site-ft a{color:var(--yellow)} .site-ft a:hover{color:#fff} .ft-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); padding-block:2.5rem} .ft-h{color:var(--yellow);font-size:var(--fs-lg);margin-bottom:.5rem} .site-ft ul{list-style:none;margin:0;padding:0} .site-ft li{margin-bottom:.35rem} /* Parent-brand plate — the logo has a white background, so give it one on purpose */ .ft-brand{display:inline-block;background:#fff;border-radius:12px;padding:.55rem .75rem; margin:0 0 .8rem;line-height:0} .ft-brand img{display:block;width:100%;max-width:11.5rem;height:auto;border-radius:0} :root[data-theme="hc"] .ft-brand{border:2px solid #fff} .ft-note{color:#e5d3e8;font-size:.9rem} .ft-base{border-top:1px solid rgba(255,255,255,.18);padding-block:1rem;font-size:.92rem} .ft-base p{margin:0} /* ---- Admin ---- */ .admin-wrap{max-width:56rem;margin:0 auto;padding:1.5rem 1.25rem 4rem} .admin-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap} .admin-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); padding:1.1rem 1.25rem;margin-bottom:.9rem;box-shadow:var(--shadow)} .admin-card h3{margin:.3rem 0 .4rem;font-size:var(--fs-lg)} .admin-sect{margin:2rem 0 .9rem;font-size:var(--fs-xl)} .admin-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem} .btn-sm{border:2px solid transparent;border-radius:999px;padding:.42em 1.05em;font-size:.95rem; font-weight:800;cursor:pointer;font-family:inherit} .btn-pub{background:var(--teal);color:#fff} .btn-del{background:var(--danger-bg);color:var(--danger-ink);border-color:currentColor} .btn-neu{background:var(--panel);color:var(--heading);border-color:var(--border)} :root[data-theme="hc"] .btn-pub{background:#000;color:#00ff9c;border-color:#00ff9c} .warn{background:var(--danger-bg);color:var(--danger-ink);border:2px solid currentColor; border-radius:12px;padding:.6rem .8rem;font-weight:700;margin:.7rem 0} /* ---- Respect reduced motion ---- */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} .card:hover,.card:focus-within{transform:none} .card:hover .card-img{transform:none} .btn:hover{transform:none} }