/* Applicaa for Local Authorities — page CSS * ============================================================================================ * Refined reproduction of "Applicaa for Local Authorities.dc.html" without its inline styles. * Eight sections remain after removing the redundant support CTA below the primary closer. * * STRATEGY (WORKFLOW.md): the markup uses DESIGN-SYSTEM classes wherever the DS has the right * component; this file carries the package's metric DELTAS as page-scoped overrides. * * PROVENANCE: descended from prototypes/sixth-forms/page.css — the container override, the * dc-py-* padding-pair convention, the dc-t-* / dc-body-* / dc-label-* scales, dc-tr-*, the * colour helpers, the dc-bar meters, the marquee overrides and dc-res carry * over. But this is the LEAST typical page of the set: it is the statutory/NEET audience, and * it brings a palette and two devices no school page has. Marked "NEW FOR THIS PAGE" below. * * THE PALETTE DEPARTURE (worth a decision, not just a note): alongside the brand tokens this * page uses a NAVY GRADIENT panel (160deg #16265E → #0F1A4F → #0B1338) and a PERIWINKLE accent * #7E9BE8, plus #C9D6F5 supporting text and a periwinkle glow. None of the seven school * pages use any of them, and the periwinkle — not coral — is what highlights the pull-quote. * They are declared here as page-locals; none is a token and none should become one on the * strength of a single page. * * TOKENS: identical to the reference — ink scale, coral 500, page-bg, paper, rule, dark-band, * ok-green(+bright), shadow-soft (= 0 14px 40px/.07). * Hairline: var(--color-rule) — #ECEEF3 closed 2026-08-17, no second token. * DIFFERENT, so declared here: #E9ECF3 sand-2, #9AA6C2 on-dark body. * Shadows with no token: 0 24px 60px/.1 · 0 18px 48px/.08 · 0 22px 54px rgba(4,8,24,.42). * * GEOMETRY: reference container is 1200px with a 24px gutter (DS is 1224/32) — page-local. * ============================================================================================ */ .local-authorities-page { --dc-sand-2: #E9ECF3; --dc-on-dark-body: var(--color-on-dark-body); --dc-on-dark-bright: var(--color-on-dark-bright); /* list/description copy on dark - 12.35:1 on #0B1023 */ /* NEW FOR THIS PAGE — the LA-only palette (see the note above) */ --dc-la-grad: linear-gradient(160deg, #16265E 0%, #0F1A4F 55%, #0B1338 100%); --dc-peri: #7E9BE8; --dc-peri-text: #C9D6F5; --dc-shadow-hero: 0 24px 60px rgba(15, 26, 79, 0.1); --dc-shadow-panel: 0 18px 48px rgba(15, 26, 79, 0.08); --dc-shadow-photo: 0 22px 54px rgba(4, 8, 24, 0.42); --dc-ease: cubic-bezier(.2, .8, .2, 1); /* The DS does not set Inter on body/.app, so the page root carries the family exactly as the reference's own wrapper does. */ font-family: var(--font-sans); background: var(--color-page-bg); } /* NO BREAKPOINT HERE IN THE REFERENCE - the padding steps that were here are gone. * A gutter step at 767px and a section-padding step at 991px had been added right across the * batch. No reference has either: they pad with literal px, no clamp and no media query, all the * way down to a phone - and neither 767px nor 991px is even a breakpoint the package uses * anywhere (its own are 1080/1000/940/900/800/720/680/640/620/560). Removed to keep the port * faithful; the narrow-viewport squeeze that leaves is the reference's own and is recorded in * STATUS.md section 5 as the defect most worth fixing at source, after the port. */ /* ── Vertical rhythm ────────────────────────────────────────────────────────────────────── */ .local-authorities-page .dc-py-40-48 { padding-top: 40px; padding-bottom: 48px; } .local-authorities-page .dc-py-40-88 { padding-top: 40px; padding-bottom: 88px; } .local-authorities-page .dc-py-88 { padding-top: 88px; padding-bottom: 88px; } /* ── Section surfaces ───────────────────────────────────────────────────────────────────── */ .local-authorities-page .dc-bg-paper { background: var(--color-paper); } .local-authorities-page .dc-rule-tb { border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); } /* ── Display type ───────────────────────────────────────────────────────────────────────── */ .local-authorities-page [class*="dc-t-"] { font-family: var(--font-heading); font-weight: 700; } /* margin + text-wrap at ZERO specificity, via :where(), so an ordinary utility can override them. As written before — a 0-2-0 descendant selector — this rule silently beat every unlayered Tailwind margin utility (0-1-0), so `mt-5` on a dc-t- heading did nothing at all. Same trick the design system uses for heading element defaults (:where(.app h3)), and the same class of bug fixed there earlier. */ :where(.local-authorities-page [class*="dc-t-"]) { margin: 0; text-wrap: balance; } .local-authorities-page .dc-t-66 { font-size: clamp(36px, 4.9vw, 66px); line-height: 1.04; letter-spacing: -0.038em; } .local-authorities-page .dc-t-66c { font-size: clamp(32px, 5vw, 66px); line-height: 1.02; letter-spacing: -0.04em; } .local-authorities-page .dc-t-48 { font-size: clamp(28px, 3.8vw, 48px); line-height: 1.08; letter-spacing: -0.03em; } .local-authorities-page .dc-t-48n { font-size: clamp(28px, 3.8vw, 48px); line-height: 1.08; letter-spacing: -0.032em; } .local-authorities-page .dc-t-46 { font-size: clamp(28px, 3.6vw, 46px); line-height: 1.08; letter-spacing: -0.03em; } .local-authorities-page .dc-t-44 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1; letter-spacing: -0.04em; } .local-authorities-page .dc-t-32 { font-size: clamp(21px, 2.6vw, 32px); line-height: 1.24; letter-spacing: -0.026em; } .local-authorities-page .dc-t-30 { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.16; letter-spacing: -0.024em; } .local-authorities-page .dc-t-19 { font-size: 19px; line-height: normal; letter-spacing: -0.016em; } .local-authorities-page .dc-t-17 { font-size: 17px; line-height: 1.28; letter-spacing: -0.014em; } .local-authorities-page .dc-t-16 { font-size: 16px; line-height: normal; letter-spacing: -0.014em; } .local-authorities-page .dc-t-15h { font-size: 15.5px; line-height: normal; letter-spacing: -0.012em; } .local-authorities-page .dc-t-15 { font-size: 15px; line-height: normal; letter-spacing: -0.012em; } /* ── Body copy steps (Inter), named by px ───────────────────────────────────────────────── */ .local-authorities-page .dc-lede { font-size: clamp(16px, 1.8vw, 18.5px); line-height: 1.6; color: var(--color-ink-soft); } .local-authorities-page .dc-lede-17 { font-size: clamp(15.5px, 1.7vw, 17.5px); line-height: 1.6; color: var(--color-ink-soft); } .local-authorities-page .dc-body-16 { font-size: 16px; line-height: 1.6; color: var(--color-ink-soft); margin: 0; } .local-authorities-page .dc-body-15 { font-size: 15px; line-height: 1.7; color: var(--color-ink-soft); margin: 0; } .local-authorities-page .dc-body-14 { font-size: 14px; line-height: 1.5; color: var(--color-ink-soft); margin: 0; } .local-authorities-page .dc-body-13 { font-size: 13px; line-height: 1.55; color: var(--color-ink-soft); margin: 0; } .local-authorities-page .dc-body-13h{ font-size: 13.5px; line-height: 1.55; color: var(--color-ink-soft); margin: 0; } .local-authorities-page .dc-body-12h{ font-size: 12.5px; line-height: 1.45; color: var(--color-ink-soft); margin: 0; } .local-authorities-page .dc-closer-lede { font-size: clamp(16px, 2vw, 20px); line-height: 1.5; color: rgba(255, 255, 255, 0.92); } /* ── Mono labels (IBM Plex Mono) ────────────────────────────────────────────────────────── */ /* The reference writes these with the `font:` SHORTHAND and no `/line-height`, so line-height resets to `normal`; inheriting 1.5 instead makes every label ~4px too tall. */ .local-authorities-page [class*="dc-label-"], .local-authorities-page .dc-eyebrow { font-family: var(--font-label); font-weight: 500; line-height: normal; letter-spacing: 0.08em; text-transform: uppercase; margin: 0; } /* The blanket label colour is a DEFAULT, not a decree — declared at zero specificity so a per-instance colour utility wins (coding-standards §2 rule 5). As a plain 0-2-0 attribute selector it beat `.text-coral-500` on the "Impact by the numbers" label. */ :where(.local-authorities-page [class*="dc-label-"], .local-authorities-page .dc-eyebrow) { color: var(--color-ink-mute); } .local-authorities-page .dc-eyebrow { display: block; font-size: 12.5px; } /* Coral is the DEFAULT eyebrow colour on this page (all six section eyebrows are coral in the reference) - but the HERO eyebrow is ink-mute there, so the colour has to be overridable. */ :where(.local-authorities-page .dc-eyebrow) { color: var(--color-coral-500); } .local-authorities-page .dc-label-11h { font-size: 11.5px; } .local-authorities-page .dc-label-11 { font-size: 11px; } .local-authorities-page .dc-label-10h { font-size: 10.5px; } .local-authorities-page .dc-label-10 { font-size: 10px; } .local-authorities-page .dc-label-9h { font-size: 9.5px; } .local-authorities-page .dc-label-9 { font-size: 9px; } /* Weight as an overridable default (§2 rule 5): the "Students processed" label is 500 in the reference, and at 0-2-0 this beat its font-medium. */ :where(.local-authorities-page .dc-w6) { font-weight: 600; } .local-authorities-page .dc-tr-0 { letter-spacing: 0; } .local-authorities-page .dc-tr-05 { letter-spacing: 0.05em; } .local-authorities-page .dc-tr-06 { letter-spacing: 0.06em; } .local-authorities-page .dc-tr-07 { letter-spacing: 0.07em; } .local-authorities-page .dc-tr-115 { letter-spacing: 0.115em; } /* ref 1.2px on the 10.5px label */ .local-authorities-page .dc-dot { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--color-ok-green-bright); } /* ── Colour helpers ─────────────────────────────────────────────────────────────────────── */ .local-authorities-page .dc-on-dark-body { color: var(--dc-on-dark-body); } .local-authorities-page .dc-on-dark-bright { color: var(--dc-on-dark-bright); } .local-authorities-page .dc-coral { color: var(--color-coral-500); } .local-authorities-page .dc-ok { color: var(--color-ok-green); } .local-authorities-page .dc-peri { color: var(--dc-peri); } /* ── Hero: centred copy and authority dashboard mock ────────────────────────────────────── */ .local-authorities-page .dc-hero-title { max-width: 1100px; margin-left: auto; margin-right: auto; } .local-authorities-page .dc-pill-outline { display: inline-flex; align-items: center; gap: 9px; background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-full); padding: 8px 15px; color: var(--color-ink-soft); } .local-authorities-page .dc-card-hero { background: var(--color-paper); border-radius: var(--radius-5); box-shadow: var(--dc-shadow-hero); padding: clamp(22px, 2.6vw, 30px); max-width: 900px; margin: 48px auto 0; text-align: left; } .local-authorities-page .dc-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .local-authorities-page .dc-tile-stat { background: var(--color-page-bg); border-radius: var(--radius-3\.5); padding: 16px 18px; } .local-authorities-page .dc-tile-num { font-family: var(--font-heading); font-weight: 700; font-size: 28px; line-height: 1; letter-spacing: -0.03em; color: var(--color-ink-deep); margin: 6px 0 4px; } .local-authorities-page .dc-tile-num-coral { color: var(--color-coral-500); } .local-authorities-page .dc-meter { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; } .local-authorities-page .dc-meter-head { display: flex; justify-content: space-between; } .local-authorities-page .dc-bar { height: 8px; background: var(--dc-sand-2); border-radius: var(--radius-1); margin-top: 5px; } .local-authorities-page .dc-bar-fill { display: block; height: 100%; border-radius: var(--radius-1); } .local-authorities-page .dc-bar-navy { background: var(--color-ink-deep); } .local-authorities-page .dc-bar-green { background: var(--color-ok-green); } .local-authorities-page .dc-bar-coral { background: var(--color-coral-500); } .local-authorities-page .dc-w-93 { width: 93%; } .local-authorities-page .dc-w-98 { width: 98%; } .local-authorities-page .dc-w-21 { width: 21%; } .local-authorities-page .dc-hero-proof { display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 32px auto 0; } .local-authorities-page .dc-hero-proof-stat { text-align: center; } .local-authorities-page .dc-hero-proof-num { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 28px; line-height: 1; letter-spacing: -0.02em; } .local-authorities-page .dc-hero-proof-cap { display: block; margin-top: 4px; font-family: var(--font-heading); font-weight: 600; font-size: 13px; line-height: 1.3; color: var(--color-ink-soft); } .local-authorities-page .dc-illustrative { text-align: center; margin-top: 14px; } /* ── Logo marquee ───────────────────────────────────────────────────────────────────────── */ /* The reference's ten LA logos are UNFILLED image slots, so the prototype shows the same empty slots rather than inventing crests. */ .local-authorities-page .marquee-track { animation-duration: 58s; } .local-authorities-page .dc-slot { flex: none; width: 132px; height: 54px; border-radius: var(--radius-2); background: var(--color-page-bg); border: 1px dashed var(--color-rule); display: flex; align-items: center; justify-content: center; text-align: center; } /* ── Coverage: the map + the two number cards ───────────────────────────────────────────── */ .local-authorities-page .dc-map { position: relative; width: 100%; aspect-ratio: 1129 / 670; border-radius: var(--radius-5\.5); overflow: hidden; border: 1px solid var(--color-rule); box-shadow: 0 24px 60px rgba(15, 26, 79, 0.12); } .local-authorities-page .dc-map img { display: block; width: 100%; height: 100%; object-fit: cover; } .local-authorities-page .dc-legend { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 26px; margin-top: 22px; } .local-authorities-page .dc-legend-key { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 500; color: var(--color-ink-soft); } .local-authorities-page .dc-swatch { width: 15px; height: 15px; border-radius: var(--radius-1\.5); flex: none; } .local-authorities-page .dc-sw-hi { background: #3F9A57; } .local-authorities-page .dc-sw-mid { background: #A6A93C; } .local-authorities-page .dc-sw-lo { background: #E0913A; } .local-authorities-page .dc-num-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 900px; margin: 0 auto; } .local-authorities-page .dc-num-card { background: var(--color-paper); border-radius: var(--radius-4\.5); box-shadow: var(--shadow-soft); padding: 30px 32px; text-align: center; } .local-authorities-page .dc-num-big { font-family: var(--font-heading); font-weight: 700; font-size: clamp(30px, 3.4vw, 44px); line-height: 1; letter-spacing: -0.038em; color: var(--color-coral-500); margin: 0; } /* ── Challenge / benefits grids ─────────────────────────────────────────────────────────── */ .local-authorities-page .dc-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .local-authorities-page .dc-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .local-authorities-page .dc-grid-challenge { column-gap: 56px; row-gap: 44px; } .local-authorities-page .dc-challenge-icon { display: inline-flex; color: var(--color-ink-royal); } .local-authorities-page .dc-challenge-icon > i { font-size: 28px; } /* The reference's own two steps for chalgrid / bengrid / numgrid: four-or-three → two → one. */ @media (max-width: 1080px) { .local-authorities-page .dc-grid-4, .local-authorities-page .dc-grid-3, .local-authorities-page .dc-num-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .local-authorities-page .dc-grid-4, .local-authorities-page .dc-grid-3, .local-authorities-page .dc-num-grid { grid-template-columns: minmax(0, 1fr); } } /* ── How the platforms connect: the three-module flow on the dark band ──────────────────── */ /* NEW FOR THIS PAGE: a 1fr/auto/1fr/auto/1fr grid — three glass module cards separated by two coral arrows. Not a switcher: all three are always visible, so there is nothing to drive. */ .local-authorities-page .dc-flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: stretch; } .local-authorities-page .dc-flow-card { display: flex; flex-direction: column; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--radius-4\.5); padding: 28px 30px; } .local-authorities-page .dc-flow-arrow { display: flex; align-items: center; justify-content: center; color: var(--color-coral-500); font-size: 18px; } .local-authorities-page .dc-flow-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .local-authorities-page .dc-flow-name { font-family: var(--font-heading); font-weight: 700; font-size: 18px; line-height: normal; letter-spacing: -0.016em; color: #fff; } .local-authorities-page .dc-flow-tag { font-family: var(--font-label); font-weight: 500; font-size: 9px; line-height: normal; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-coral-500); background: rgba(236, 99, 75, 0.14); border-radius: var(--radius-full); padding: 4px 9px; } .local-authorities-page .dc-flow-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; padding-top: 18px; } .local-authorities-page .dc-flow-chip { font-family: var(--font-heading); font-weight: 500; font-size: 11.5px; line-height: normal; /* ref 500 */ color: var(--dc-on-dark-body); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--radius-full); padding: 5px 11px; } /* auto-fit, as the reference declares it — it self-collapses, which is why the reference gives this grid no media query. At desktop the three notes still occupy equal thirds. */ .local-authorities-page .dc-flow-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 28px; } .local-authorities-page .dc-flow-note { display: flex; align-items: flex-start; gap: 12px; } .local-authorities-page .dc-tile-glass { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-2\.5); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); } .local-authorities-page .dc-tile-glass > i { font-size: 13px; color: var(--color-coral-500); } .local-authorities-page .dc-statband { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 40px; padding: 28px 30px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--radius-4\.5); text-align: center; } .local-authorities-page .dc-stat-num { font-family: var(--font-heading); font-weight: 700; font-size: clamp(26px, 3vw, 42px); /* ref is 42 at 1440; 2.8vw only reached 40.3 */ line-height: 1; letter-spacing: -0.03em; color: #fff; margin: 0; } @media (max-width: 1080px) { .local-authorities-page .dc-flow { grid-template-columns: minmax(0, 1fr); } .local-authorities-page .dc-statband { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* No `.dc-flow-arrow { transform: rotate(90deg) }` here, and no notes collapse: the reference stacks [data-flowgrid] at this width but leaves its two connector arrows pointing RIGHT between vertically stacked cards, and gives the notes grid no rule at all (auto-fit does it). The arrow is a defect in the reference — recorded rather than silently corrected, per the owner's ruling on reference divergences. */ } @media (max-width: 620px) { .local-authorities-page .dc-statband { grid-template-columns: minmax(0, 1fr); } } /* ── LA voice: the navy-gradient story panel ──────────────────────────────────────────────── */ /* NEW FOR THIS PAGE and the palette departure described in the header: a navy GRADIENT (not the dark band), a periwinkle pull-quote highlight (not coral) and supporting text. */ .local-authorities-page .dc-la-panel { position: relative; overflow: hidden; background: var(--dc-la-grad); border-radius: var(--radius-6); padding: clamp(28px, 3.4vw, 44px); } .local-authorities-page .dc-anya { position: relative; display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: clamp(28px, 4vw, 52px); align-items: start; } .local-authorities-page .dc-anya-photo { position: relative; width: 100%; max-width: 320px; border-radius: var(--radius-4); overflow: hidden; box-shadow: var(--dc-shadow-photo); } .local-authorities-page .dc-anya-photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; } .local-authorities-page .dc-anya-place { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-label); font-weight: 600; font-size: 10.5px; line-height: normal; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: rgba(11, 19, 56, 0.82); border-radius: var(--radius-full); padding: 7px 13px; } .local-authorities-page .dc-anya-body { padding-top: 6px; } .local-authorities-page .dc-words { display: inline-flex; align-items: center; gap: 9px; margin-top: 24px; font-family: var(--font-label); font-weight: 600; font-size: 10.5px; line-height: normal; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dc-peri-text); background: rgba(126, 155, 232, 0.18); border: 1px solid rgba(126, 155, 232, 0.3); border-radius: var(--radius-full); padding: 8px 15px; } .local-authorities-page .dc-changes-head { position: relative; margin-top: clamp(30px, 3.6vw, 44px); padding-top: clamp(26px, 3vw, 34px); border-top: 1px solid rgba(255, 255, 255, 0.14); } .local-authorities-page .dc-changes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .local-authorities-page .dc-change { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-3\.5); padding: 20px 22px; } /* each change tile is a DIFFERENT colour in the reference — coral, green, indigo. The indigo #3F63C8 and green #2F9E5E are LA-page-only, like the rest of this page's palette. */ .local-authorities-page .dc-tile-34 { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: var(--radius-2\.5); } .local-authorities-page .dc-tile-34 > i { font-size: 13px; color: #fff; } .local-authorities-page .dc-tile-coral-34 { background: var(--color-coral-500); } .local-authorities-page .dc-tile-green-34 { background: #2F9E5E; } .local-authorities-page .dc-tile-indigo-34 { background: #3F63C8; } .local-authorities-page .dc-changes-label { color: #8494BC; margin-bottom: 18px; } /* the disclosure that reveals the full article: the DS accordion controller drives it, so the panel ships with `hidden` + the hidden class and needs no page JS */ .local-authorities-page .dc-story { background: var(--color-paper); border-radius: var(--radius-5); box-shadow: var(--dc-shadow-panel); padding: clamp(30px, 3.6vw, 46px) clamp(26px, 3.4vw, 48px); margin-top: 16px; } .local-authorities-page .dc-story-body p { margin: 0 0 16px; } .local-authorities-page .dc-story-body ul { margin: 0 0 16px; padding-left: 22px; } .local-authorities-page .dc-story-body li { margin: 0 0 10px; } .local-authorities-page .dc-story-body > *:last-child { margin-bottom: 0; } .local-authorities-page .dc-story-toggle { margin-top: 26px; } /* the caret rotates from the trigger's own aria-expanded, CSS-only */ .local-authorities-page .dc-story-toggle[aria-expanded="true"] .dc-chev { transform: rotate(90deg); } .local-authorities-page .dc-chev { transition: transform 200ms var(--dc-ease); } @media (max-width: 1080px) { .local-authorities-page .dc-anya { grid-template-columns: minmax(0, 1fr); } .local-authorities-page .dc-changes { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .local-authorities-page .dc-changes { grid-template-columns: minmax(0, 1fr); } } /* ── Measures ───────────────────────────────────────────────────────────────────────────── */ .local-authorities-page .dc-measure-760 { max-width: 760px; } .local-authorities-page .dc-measure-720 { max-width: 720px; } .local-authorities-page .dc-ch-58 { max-width: 58ch; } .local-authorities-page .dc-ch-56 { max-width: 56ch; } .local-authorities-page .dc-ch-44 { max-width: 44ch; } /* ── Spacing steps the build does not carry ──────────────────────────────────────────────── */ /* `prototypes/` is not a Tailwind scan source and the compiled spacing surface is patchy anyway (mb-11 compiles, mt-11 does not), so the reference's exact values are declared here by px. */ .local-authorities-page .dc-mt-4 { margin-top: 4px; } .local-authorities-page .dc-mt-5 { margin-top: 5px; } .local-authorities-page .dc-mt-6 { margin-top: 6px; } .local-authorities-page .dc-mt-14 { margin-top: 14px; } .local-authorities-page .dc-mt-16 { margin-top: 16px; } .local-authorities-page .dc-mt-18 { margin-top: 18px; } .local-authorities-page .dc-mt-20 { margin-top: 20px; } .local-authorities-page .dc-mt-22 { margin-top: 22px; } .local-authorities-page .dc-mt-30 { margin-top: 30px; } .local-authorities-page .dc-mt-34 { margin-top: 34px; } .local-authorities-page .dc-mb-8 { margin-bottom: 8px; } .local-authorities-page .dc-mb-10 { margin-bottom: 10px; } .local-authorities-page .dc-mb-14 { margin-bottom: 14px; } .local-authorities-page .dc-mb-22 { margin-bottom: 22px; } .local-authorities-page .dc-mb-30 { margin-bottom: 30px; } .local-authorities-page .dc-mb-40 { margin-bottom: 40px; } /* ── Closer ─────────────────────────────────────────────────────────────────────────────── */ /* Full-bleed FLAT coral at clamp(72,10vw,130) 24px, with the DS .cta-section-contact row. The reference also holds an UNFILLED image slot under the buttons; the prototype keeps the empty slot rather than inventing an image. */ .local-authorities-page .cta-section { padding: clamp(72px, 10vw, 130px) 24px; } .local-authorities-page .cta-section-contact { font-size: 13.5px; } .local-authorities-page .dc-slot-cta { max-width: 820px; margin: 44px auto 0; aspect-ratio: 16 / 7; border-radius: var(--radius-4\.5); overflow: hidden; box-shadow: 0 28px 70px rgba(4, 8, 24, 0.28); background: rgba(255, 255, 255, 0.12); border: 1px dashed rgba(255, 255, 255, 0.45); display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px; } /* ── Reduced motion ─────────────────────────────────────────────────────────────────────── */ /* Deliberately empty: this page declares no @keyframes of its own, and every DS component it uses (section-glow drift, marquee) already stops itself under prefers-reduced-motion. A blanket `* { animation: … !important }` would break coding-standards §6 for no gain — the house precedent set on secondary/. The only page-owned motion is hover/disclosure transitions. */