/* Shared additions for the inner pages: breadcrumb, page hero, section patterns, * card and strip primitives. Loaded after styles.css on every page, so it may only * ADD selectors - never redefine one styles.css already owns, or the home page moves. * * ============================================================================================ * WHAT IS IN HERE (every block is commented where it starts) * * .crumbs breadcrumb bar - the builder emits it, no page writes it * .phero page hero: eyebrow, h1, lead, actions, media, floating stat card * .explorer filter bar: status pills, search field, programme select, result count * .badge status badge: --active / --upcoming / --past, each a WORD and a SHAPE * .chip small label over a photograph (programme name, year) * .mcard generic media card, image zooms on hover, badge and chip slots * .strip full-width impact strip, dark by default, --light for a pale one * .band--sage soft tinted section | .band--forest dark section (colours in section 15) * .steps numbered step row with a connecting line (vertical under 900px) * .acc accordion built from
/ * .dtable data table that becomes stacked rows under 700px (needs td[data-label]) * .split-7-5 two-column editorial split (.split-5-7 puts the media first) * .donut the chart Hope.donut() draws: arcs, legend, centre label * helpers .grid-2/3/4, .stack, .measure, .notice, .quote, .meterline, .section--tight * * Reuse from styles.css before reaching for anything here: .container .section .section__head * .btn .btn--primary/--outline/--green/--light .card .card--tint .pill .pill--tag .bar .stat * .tiles-mini (the transparency row) .list-check .eyebrow .lead .small .muted and every form class. * ============================================================================================ */ /* ------------------------------------------------------------------ added tokens New custom properties only - nothing here changes a value styles.css set. */ :root { --amber-ink: #8A6200; /* yellow darkened until it passes AA as text (5.3:1 on warm white) */ --amber-line: #EBD08A; /* the border that goes with it */ --stripe: #EFF4EC; /* table zebra: sage at ~30% over warm white */ --on-dark-line: rgba(255, 255, 255, .16); --steps-line: var(--line-2); } /* ================================================================== 1. Breadcrumb