/* Admissions+ for Sixth Forms — page CSS * ============================================================================================ * GOAL: a FAITHFUL (1:1) reproduction of the reference * "Admissions Plus for Sixth Forms.dc.html" (16 sections, ~700 inline styles) * without any of its inline styles. Every value below was read out of the reference file, not * guessed — the reference states its own clamps, paddings and hexes in the `style` attributes. * * STRATEGY (the same one WORKFLOW.md settled on `secondary/`): * the markup uses DESIGN-SYSTEM classes wherever the DS has the right component, and this * file carries the package's metric DELTAS as page-scoped overrides. Tuning toward the DS * later is then deleting overrides one at a time — not rewriting markup. * * Every rule is scoped under `.sixth-forms-page`, so this file is inert on any other page — * the pattern proven in production by /r/10 (`.about-page`). * * HOW THE REFERENCE COMPARES TO OUR TOKENS * IDENTICAL, so we use ours: the ink scale (#0F1A4F ink-deep / #4D5B7F ink-soft / * #8893B0 ink-mute), coral #EC634B + #FFE7DD (coral-100), #F4F5F9 page-bg, #FFFFFF paper, * #E6E8EF rule, #0B1023 dark-band, #1A8A3F ok-green, #DFF1E5 ok-green-soft, * #34D07F ok-green-bright, #FEF7E7 light-yellow, and the shadows * 0 30px 80px/.12 (shadow-deep), 0 14px 40px/.07 (shadow-soft), 0 30px 70px (shadow-dark). * The reference's `--navy` is #0F1A4F, i.e. ink-deep, so navy bars use the token. * * DIFFERENT, so declared here (owner's decision: keep the reference's colours): * ADOPTED OUR TOKEN (2026-08-14, owner decision): the hairline is now var(--color-rule) * #E6E8EF everywhere. The reference's #ECEEF3 is 6/255 lighter -- imperceptible, and the * package is not unanimous anyway (Demos, Events and Webinars already use #E6E8EF, and the * three legal pages have no hairline at all), so it did not earn a second token. * #E9ECF3 sand-2, the empty-bar grey * #C2C9DB dashed patchwork border / palest bar * #D5DAE6 patchwork node border * #9AA6C2 body copy ON DARK #C9D1E6 list copy ON DARK * #5C688A caption ON DARK #B9C3DC grader pill copy * #7E8AA6 bursary caption #E7ECF7 bursary row copy * #223055 testimonial avatar disc #31406F / #5A6890 funnel + chart navies * #F2B01E / #8A6116 the results-day "REVIEW" amber dot + text * #FFF6F3 the at-risk row wash #F8D2C3 the "coming soon" hairline * Shadows with no token: 0 20px 60px/.07 · /.14 · 0 12px 32px/.08 · 0 20px 50px/.08 · * 0 8px 22px/.08 · 0 40px 90px rgba(4,8,24,.5) · 0 16px 40px/.1 and /.35 (hover). * * GEOMETRY: reference container is max-width 1200px with a 24px gutter; our DS is 1224/32. * Overridden here only — changing .page-container would re-render every live page. * ============================================================================================ */ .sixth-forms-page { /* reference-only values, all read off the reference */ --dc-sand-2: #E9ECF3; /* empty progress-bar grey */ --dc-line-dash: #C2C9DB; /* dashed patchwork border, palest chart bar */ --dc-node-line: #D5DAE6; /* patchwork node border */ --dc-on-dark-body: var(--color-on-dark-body); /* body copy on the dark panels/band */ --dc-on-dark-bright: var(--color-on-dark-bright); /* guardrail list copy on dark */ --dc-on-dark-mute: var(--color-on-dark-faint); /* captions on dark */ --dc-on-dark-pill: var(--color-on-dark-bright); /* grader pill copy */ --dc-on-dark-cap: var(--color-ink-mute); /* bursary caption */ --dc-on-dark-row: #fff; /* bursary row copy */ --dc-avatar: #223055; /* testimonial avatar disc */ --dc-navy-2: #31406F; /* funnel bar 2 */ --dc-navy-3: #5A6890; /* funnel bar 3 / chart bar 3 */ --dc-amber-dot: #F2B01E; --dc-amber-ink: #8A6116; --dc-wash-risk: #FFF6F3; --dc-line-soon: #F8D2C3; --dc-shadow-panel: 0 20px 60px rgba(15, 26, 79, 0.07); --dc-shadow-phone: 0 20px 60px rgba(15, 26, 79, 0.14); --dc-shadow-mock: 0 12px 32px rgba(15, 26, 79, 0.08); --dc-shadow-chat: 0 20px 50px rgba(15, 26, 79, 0.08); --dc-shadow-tile: 0 8px 22px rgba(15, 26, 79, 0.08); --dc-shadow-audit: 0 40px 90px rgba(4, 8, 24, 0.5); --dc-ease: cubic-bezier(.2, .8, .2, 1); background: var(--color-page-bg); } /* ── Container: 1200px, 24px gutter — set-wide, `_shared/page-shared.css` §2 ─────────── */ /* 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: hand-tuned per section in the reference ───────────────────────────── */ /* `dc-py--` is deliberately literal, so the later normalisation pass can map each one to a DS step or explain why it should not. */ .sixth-forms-page .dc-py-128-72 { padding-bottom: 72px; } .sixth-forms-page .dc-py-44-48 { padding-top: 44px; padding-bottom: 48px; } .sixth-forms-page .dc-py-72-80 { padding-top: 72px; padding-bottom: 80px; } .sixth-forms-page .dc-py-24-104 { padding-top: 24px; padding-bottom: 104px; } .sixth-forms-page .dc-py-104-44 { padding-top: 104px; padding-bottom: 44px; } .sixth-forms-page .dc-py-0-96 { padding-top: 0; padding-bottom: 96px; } .sixth-forms-page .dc-py-104 { padding-top: 104px; padding-bottom: 104px; } .sixth-forms-page .dc-py-96-64 { padding-top: 96px; padding-bottom: 64px; } .sixth-forms-page .dc-py-88 { padding-top: 88px; padding-bottom: 88px; } .sixth-forms-page .dc-py-0-88 { padding-top: 0; padding-bottom: 88px; } .sixth-forms-page .dc-py-40-96 { padding-top: 40px; padding-bottom: 96px; } .sixth-forms-page .dc-py-96-0 { padding-top: 96px; padding-bottom: 0; } .sixth-forms-page .dc-py-56-96 { padding-top: 56px; padding-bottom: 96px; } /* ── Display type: the reference clamps every headline individually ─────────────────────── */ /* Named by their maximum so the mapping to a DS step stays obvious. Proxima 700 throughout (the two `-q-` quote steps are 500); tracking is the reference's own, -0.04em..-0.005em. */ .sixth-forms-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(.sixth-forms-page [class*="dc-t-"]) { margin: 0; text-wrap: balance; } .sixth-forms-page .dc-t-80 { font-size: clamp(38px, 6vw, 80px); line-height: 1.0; letter-spacing: -0.04em; } .sixth-forms-page .dc-t-76 { font-size: clamp(44px, 5.6vw, 76px); line-height: 1.0; letter-spacing: -0.04em; } .sixth-forms-page .dc-t-64 { font-size: clamp(36px, 5vw, 64px); line-height: 1.02; letter-spacing: -0.035em; } .sixth-forms-page .dc-t-56 { font-size: clamp(32px, 4.4vw, 56px); line-height: 1.04; letter-spacing: -0.03em; } .sixth-forms-page .dc-t-54 { font-size: clamp(30px, 4.4vw, 54px); line-height: 1.06; letter-spacing: -0.03em; } .sixth-forms-page .dc-t-48 { font-size: clamp(30px, 3.8vw, 48px); line-height: 1.06; letter-spacing: -0.03em; } .sixth-forms-page .dc-t-48r { font-size: clamp(28px, 3.8vw, 48px); line-height: 1.05; letter-spacing: -0.028em; } .sixth-forms-page .dc-t-46 { font-size: clamp(28px, 3.8vw, 46px); line-height: 1.08; letter-spacing: -0.03em; } .sixth-forms-page .dc-t-46f { font-size: clamp(28px, 3.8vw, 46px); line-height: 1.08; letter-spacing: -0.025em; } .sixth-forms-page .dc-t-42 { font-size: clamp(26px, 3.4vw, 42px); line-height: 1.1; letter-spacing: -0.025em; } .sixth-forms-page .dc-t-38 { font-size: clamp(24px, 3vw, 38px); line-height: 1.1; letter-spacing: -0.025em; } .sixth-forms-page .dc-t-34 { font-size: clamp(24px, 2.8vw, 34px); line-height: 1.12; letter-spacing: -0.02em; } .sixth-forms-page .dc-t-30 { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.12; letter-spacing: -0.018em; } .sixth-forms-page .dc-t-30f { font-size: clamp(20px, 2.4vw, 30px); line-height: 1.18; letter-spacing: -0.02em; } .sixth-forms-page .dc-t-26 { font-size: clamp(20px, 2vw, 26px); line-height: 1.15; letter-spacing: -0.015em; } .sixth-forms-page .dc-t-40s { font-size: clamp(30px, 3vw, 40px); line-height: normal; letter-spacing: -0.02em; } .sixth-forms-page .dc-t-20 { font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; } .sixth-forms-page .dc-q-25 { font-family: var(--font-heading); font-weight: 500; font-size: clamp(19px, 2.1vw, 25px); line-height: 1.42; letter-spacing: -0.012em; text-wrap: pretty; } /* ── Body copy steps (Inter), named by px ───────────────────────────────────────────────── */ .sixth-forms-page .dc-lede { font-size: clamp(16px, 1.8vw, 19px); line-height: 1.55; color: var(--color-ink-soft); } .sixth-forms-page .dc-lede-18 { font-size: clamp(15px, 1.5vw, 18px); line-height: 1.6; } .sixth-forms-page .dc-lede-17 { font-size: 17px; line-height: 1.6; color: var(--color-ink-soft); } .sixth-forms-page .dc-body-16h{ font-size: 16.5px; line-height: 1.6; color: var(--color-ink-soft); } .sixth-forms-page .dc-body-16 { font-size: 16px; line-height: 1.6; color: var(--color-ink-soft); } .sixth-forms-page .dc-body-15h{ font-size: 15.5px; line-height: 1.6; color: var(--color-ink-soft); margin: 0; } .sixth-forms-page .dc-body-15 { font-size: 15px; line-height: 1.6; color: var(--color-ink-soft); } .sixth-forms-page .dc-body-14h{ font-size: 14.5px; line-height: 1.6; color: var(--color-ink-soft); } .sixth-forms-page .dc-body-14 { font-size: 14px; line-height: 1.5; color: var(--color-ink-soft); margin: 0; } .sixth-forms-page .dc-body-13h{ font-size: 13.5px; line-height: 1.5; color: var(--color-ink-soft); } .sixth-forms-page .dc-body-13 { font-size: 13px; line-height: 1.5; color: var(--color-ink-soft); } .sixth-forms-page .dc-body-12h{ font-size: 12.5px; line-height: 1.45; color: var(--color-ink-soft); margin: 0; } .sixth-forms-page .dc-body-12 { font-size: 12px; line-height: 1.45; color: var(--color-ink-soft); margin: 0; } .sixth-forms-page .dc-body-11h{ font-size: 11.5px; line-height: 1.45; color: var(--color-ink-soft); } .sixth-forms-page .dc-body-11 { font-size: 11px; line-height: 1.4; color: var(--color-ink-soft); margin: 0; } .sixth-forms-page .dc-body-10h{ font-size: 10.5px; line-height: 1.4; color: var(--color-ink-soft); margin: 0; } .sixth-forms-page .dc-closer-lede { font-size: clamp(17px, 2vw, 21px); line-height: 1.5; color: rgba(255, 255, 255, 0.92); } /* ── Mono labels (IBM Plex Mono 500) ────────────────────────────────────────────────────── */ /* Confirmed against the reference: it really is the mono face. The 12.5px / 0.08em step is exactly our font-label + text-label-l + tracking-label, so `dc-eyebrow` is that composition spelled out once. Tracking varies by size in the reference, hence the `dc-tr-*` modifiers. */ .sixth-forms-page [class*="dc-label-"], .sixth-forms-page .dc-eyebrow { font-family: var(--font-label); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-mute); } .sixth-forms-page .dc-eyebrow { display: block; font-size: 12.5px; color: var(--color-coral-500); } /* The hero's eyebrow is the only one that is ink-mute rather than coral, and 12px/0.09em. */ .sixth-forms-page .dc-eyebrow-hero { font-size: 12px; letter-spacing: 0.09em; color: var(--color-ink-mute); } .sixth-forms-page .dc-eyebrow-row { display: inline-flex; align-items: center; gap: 11px; } .sixth-forms-page .dc-label-11h { font-size: 11.5px; letter-spacing: 0.06em; } .sixth-forms-page .dc-label-11 { font-size: 11px; } .sixth-forms-page .dc-label-10h { font-size: 10.5px; } .sixth-forms-page .dc-label-10 { font-size: 10px; } .sixth-forms-page .dc-label-9h { font-size: 9.5px; } .sixth-forms-page .dc-label-9 { font-size: 9px; } .sixth-forms-page .dc-tr-04 { letter-spacing: 0.04em; } .sixth-forms-page .dc-tr-05 { letter-spacing: 0.05em; } .sixth-forms-page .dc-tr-06 { letter-spacing: 0.06em; } .sixth-forms-page .dc-tr-07 { letter-spacing: 0.07em; } .sixth-forms-page .dc-tr-09 { letter-spacing: 0.09em; } .sixth-forms-page .dc-tr-10 { letter-spacing: 0.1em; } /* The stage kicker ("01 · BE FOUND") is the one BOLD mono label on the page. */ .sixth-forms-page .dc-kicker { font-family: var(--font-label); font-weight: 700; font-size: 13px; color: var(--color-coral-500); margin: 0; } /* ── Colour helpers for the dark surfaces ───────────────────────────────────────────────── */ .sixth-forms-page .dc-on-dark-body { color: var(--dc-on-dark-body); } .sixth-forms-page .dc-on-dark-bright { color: var(--dc-on-dark-bright); } .sixth-forms-page .dc-on-dark-mute { color: var(--dc-on-dark-mute); } .sixth-forms-page .dc-on-dark-pill { color: var(--dc-on-dark-pill); } .sixth-forms-page .dc-on-dark-cap { color: var(--dc-on-dark-cap); } .sixth-forms-page .dc-ok { color: var(--color-ok-green); } .sixth-forms-page .dc-ok-bright { color: var(--color-ok-green-bright); } .sixth-forms-page .dc-coral { color: var(--color-coral-500); } .sixth-forms-page .dc-mute { color: var(--color-ink-mute); } /* ── Surfaces: the inset panels and cards ───────────────────────────────────────────────── */ /* The page has ONE full-bleed dark band (Emma) plus two inset dark PANELS (grader, Bursary16+) and one full-bleed coral band (the closer). Both panel forms live here for now: a handful of uses on one page is not the cross-page repetition that earns a DS class. */ .sixth-forms-page .dc-panel { max-width: 1200px; margin: 0 auto; border-radius: var(--radius-5\.5); position: relative; overflow: hidden; } .sixth-forms-page .dc-panel-bursary { background: var(--color-dark-band); padding: clamp(40px, 5vw, 64px) clamp(28px, 5vw, 64px); } .sixth-forms-page .dc-card { background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-4\.5); } .sixth-forms-page .dc-card-mock { border-radius: var(--radius-4\.5); padding: 24px 24px 20px; border: 1px solid var(--color-rule); box-shadow: var(--shadow-deep); } .sixth-forms-page .dc-card-faith { border: 0; border-radius: var(--radius-5); box-shadow: var(--shadow-soft); padding: clamp(28px, 3.2vw, 40px) clamp(26px, 3.4vw, 44px); } .sixth-forms-page .dc-card-mis { border-radius: var(--radius-4\.5); padding: 28px 36px; } /* the panel that frames a mock inside a journey stage */ .sixth-forms-page .dc-frame { background: var(--color-page-bg); border-radius: var(--radius-4); padding: 28px; } .sixth-forms-page .dc-frame-col { display: flex; flex-direction: column; gap: 12px; } .sixth-forms-page .dc-frame-phone{ background: var(--color-page-bg); border-radius: var(--radius-4); padding: 32px 0 0; overflow: hidden; display: flex; justify-content: center; } /* the small elevated mock cards inside a frame */ .sixth-forms-page .dc-mock { background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-3\.5); box-shadow: var(--dc-shadow-mock); } .sixth-forms-page .dc-mock-pad { padding: 18px 20px; } .sixth-forms-page .dc-mock-pad-s { padding: 16px 20px; } .sixth-forms-page .dc-mock-pad-l { padding: 20px 22px; } .sixth-forms-page .dc-mock-clip { overflow: hidden; } /* the phone shell used by stages 01 and 04 */ .sixth-forms-page .dc-phone { width: 290px; background: var(--color-paper); border: 1px solid var(--color-rule); border-bottom: 0; border-radius: var(--radius-7) var(--radius-7) 0 0; box-shadow: var(--dc-shadow-phone); } .sixth-forms-page .dc-phone-a { padding: 18px 16px 0; } .sixth-forms-page .dc-phone-b { padding: 20px 18px 0; } /* ── Grids, measured off the reference ──────────────────────────────────────────────────── */ .sixth-forms-page .dc-grid { display: grid; } .sixth-forms-page .dc-grid-hero { grid-template-columns: 1.15fr 1fr; gap: clamp(36px, 5vw, 72px); align-items: center; } .sixth-forms-page .dc-grid-problem { grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); gap: clamp(14px, 2vw, 26px); align-items: stretch; } .sixth-forms-page .dc-grid-stakes { grid-template-columns: 1fr 340px; gap: clamp(28px, 4vw, 56px); align-items: center; } .sixth-forms-page .dc-grid-stage { grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; } /* minmax(0, …), not a bare `fr`: a bare track keeps an implicit auto (min-content) minimum, so these two columns held 336px + 229px of min-content inside a narrower panel and overflowed it. Below 640 the collapse hid that; between 641 and 653 nothing did, and the panel clipped 5 text nodes. A minmax correction has no boundary to be wrong at - raising the breakpoint would only move the window to a width nobody has measured. */ .sixth-forms-page .dc-grid-faith { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(24px, 3.5vw, 48px); align-items: center; } .sixth-forms-page .dc-grid-emma { grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; } .sixth-forms-page .dc-grid-families{ grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 4.5vw, 64px); align-items: center; } .sixth-forms-page .dc-grid-results { grid-template-columns: 1.35fr 1fr; gap: clamp(20px, 2.5vw, 32px); align-items: stretch; } .sixth-forms-page .dc-grid-bursary { grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 4.5vw, 64px); align-items: center; } .sixth-forms-page .dc-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; } .sixth-forms-page .dc-grid-2 { grid-template-columns: 1fr 1fr; gap: 10px 22px; } .sixth-forms-page .dc-measure-820 { max-width: 820px; } .sixth-forms-page .dc-measure-780 { max-width: 780px; } .sixth-forms-page .dc-measure-720 { max-width: 720px; } /* character measures, exactly as the reference expresses them */ .sixth-forms-page .dc-ch-62 { max-width: 62ch; } .sixth-forms-page .dc-ch-58 { max-width: 58ch; } .sixth-forms-page .dc-ch-56 { max-width: 56ch; } .sixth-forms-page .dc-ch-54 { max-width: 54ch; } .sixth-forms-page .dc-ch-52 { max-width: 52ch; } .sixth-forms-page .dc-ch-50 { max-width: 50ch; } .sixth-forms-page .dc-ch-46 { max-width: 46ch; } .sixth-forms-page .dc-ch-44 { max-width: 44ch; } .sixth-forms-page .dc-ch-24 { max-width: 24ch; } .sixth-forms-page .dc-ch-20 { max-width: 20ch; } /* THE REFERENCE COLLAPSES EXACTLY TWO GRIDS, AND BOTH AT 900px: * @media (max-width: 900px) { [data-faithgrid] { grid-template-columns: minmax(0,1fr) } } * @media (max-width: 900px) { [data-inyeargrid] { grid-template-columns: minmax(0,1fr) } } * Its other four @media rules are chrome we do not port (nav at 1120/940, footer grid at * 1080/560). Everything else — hero, stakes, toolkit, stage, grader, emma, families, results, * bursary, resources, the problem comparison, the toolkit's 2-up bullets, and both inset panels' * padding — keeps its fixed columns and its clamp padding all the way down to a phone. So this * block used to collapse thirteen grids at a breakpoint (991px) the package never uses; only the * two below are real, and they move to the reference's own 900px. The narrow squeeze that leaves * is the reference's own and is recorded in STATUS.md section 5, as with the gutter/padding steps. * * The `.dc-order-2 { order: 0 }` reset that was here went with the collapse — the reference swaps * stage sides with `order` and never unswaps it. It had also never worked: it sat at the same * specificity as the `.dc-order-2 { order: 2 }` rule DECLARED BELOW this block, so source order * won and `order: 2` applied at every width regardless. */ @media (max-width: 900px) { .sixth-forms-page .dc-grid-faith { grid-template-columns: minmax(0, 1fr); gap: 32px; } .sixth-forms-page .dc-grid-3 { grid-template-columns: minmax(0, 1fr); } } .sixth-forms-page .dc-order-2 { order: 2; } /* ── Logo marquee: page artwork over the shared unframed card pattern ───────────────────── */ /* The DS owns the equal-height cards, gap, edge fade and motion behaviour. The crests remain 152x58 and this page retains its 74s cycle. */ .sixth-forms-page .marquee-track { animation-duration: 74s; } .sixth-forms-page .marquee-item img { width: 152px; height: 58px; } /* The artwork stays 152x58; the shared cards handle the narrow viewport. */ /* ── The patchwork problem: disconnected map → connected workflow ───────────────────────── */ /* This is page artwork, not a reusable card or workflow component. Both halves share the same hierarchy; their inner diagrams carry the contrast between fragmented and connected. */ .sixth-forms-page .dc-problem-gradient { background: linear-gradient(to bottom, transparent 0%, var(--color-paper) 20%, var(--color-paper) 100%); } .sixth-forms-page .dc-problem-stack { background-color: transparent; } .sixth-forms-page .dc-compare-old { position: relative; display: flex; flex-direction: column; background: var(--color-paper); border: 1px dashed var(--dc-line-dash); border-radius: var(--radius-4); padding: 26px; } .sixth-forms-page .dc-compare-new { position: relative; display: flex; flex-direction: column; overflow: hidden; background: color-mix(in oklab, var(--color-coral-100) 60%, var(--color-paper)); border: 1px solid color-mix(in oklab, var(--color-coral-500) 48%, transparent); border-radius: var(--radius-4); padding: 26px; } .sixth-forms-page .dc-compare-new::before { content: ""; position: absolute; width: 180px; height: 180px; right: -72px; top: -92px; border-radius: var(--radius-full); background: color-mix(in oklab, var(--color-coral-500) 10%, transparent); pointer-events: none; } .sixth-forms-page .dc-compare-head { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 20px; } .sixth-forms-page .dc-compare-title { margin: 5px 0 0; font-family: var(--font-heading); font-weight: 700; font-size: 20px; line-height: 1.15; letter-spacing: -0.012em; color: var(--color-ink-deep); } .sixth-forms-page .dc-compare-state { flex: none; display: inline-flex; align-items: center; gap: 6px; border-radius: var(--radius-full); padding: 6px 9px; font-family: var(--font-heading); font-weight: 600; font-size: 11px; line-height: 1; color: var(--color-ink-mute); background: var(--color-page-bg); } .sixth-forms-page .dc-compare-state-live { color: var(--color-ok-green); background: var(--color-ok-green-soft); } .sixth-forms-page .dc-patchwork-map { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; margin-top: auto; padding: 18px 16px; border-radius: var(--radius-3); background-color: var(--color-page-bg); background-image: radial-gradient(circle, color-mix(in oklab, var(--color-ink-mute) 20%, transparent) 1px, transparent 1px); background-size: 16px 16px; } .sixth-forms-page .dc-patchwork-map::before, .sixth-forms-page .dc-patchwork-map::after { content: ""; position: absolute; z-index: 0; border-color: var(--dc-line-dash); border-style: dashed; } .sixth-forms-page .dc-patchwork-map::before { top: 18%; bottom: 18%; left: 50%; border-width: 0 0 0 1px; } .sixth-forms-page .dc-patchwork-map::after { top: 50%; right: 16%; left: 16%; border-width: 1px 0 0; } .sixth-forms-page .dc-patch-node { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; min-width: 0; padding: 11px 12px; border: 1px solid var(--dc-node-line); border-radius: var(--radius-2); background: var(--color-paper); font-family: var(--font-heading); font-weight: 600; font-size: 12.5px; line-height: 1.15; color: var(--color-ink-soft); } .sixth-forms-page .dc-patch-node > i { flex: none; width: 18px; color: var(--color-ink-mute); font-size: 15px; text-align: center; } .sixth-forms-page .dc-patch-node-mis { grid-column: 1 / -1; justify-self: center; width: min(82%, 310px); } .sixth-forms-page .dc-patch-break { position: absolute; z-index: 2; top: 50%; left: 50%; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: var(--color-coral-500); background: var(--color-paper); border: 1px solid color-mix(in oklab, var(--color-coral-500) 28%, transparent); border-radius: var(--radius-full); transform: translate(-50%, -50%); } .sixth-forms-page .dc-compare-arrow { position: relative; display: flex; align-items: center; justify-content: center; color: var(--color-white); } .sixth-forms-page .dc-compare-arrow::before { content: ""; position: absolute; right: 0; left: 0; height: 2px; background: linear-gradient(90deg, var(--dc-line-dash), var(--color-coral-500)); } .sixth-forms-page .dc-compare-arrow > i { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 5px solid var(--color-page-bg); border-radius: var(--radius-full); background: var(--color-coral-500); font-size: 14px; } .sixth-forms-page .dc-pipeline-copy { position: relative; z-index: 1; margin: 0; max-width: 46ch; } .sixth-forms-page .dc-pipeline-flow { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: auto; padding-top: 24px; } .sixth-forms-page .dc-pipeline-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; font-family: var(--font-heading); font-size: 12px; line-height: 1.1; color: var(--color-ink-deep); text-align: center; } .sixth-forms-page .dc-pipeline-step:not(:last-child)::after { content: ""; position: absolute; z-index: -1; top: 20px; left: calc(50% + 20px); width: calc(100% - 40px); height: 2px; background: var(--color-coral-500); } .sixth-forms-page .dc-pipeline-step > span { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; color: var(--color-coral-500); background: var(--color-paper); border: 1px solid color-mix(in oklab, var(--color-coral-500) 32%, transparent); border-radius: var(--radius-full); font-size: 16px; } .sixth-forms-page .dc-pipeline-emma { position: relative; z-index: 1; display: flex; align-items: center; gap: 11px; margin-top: 20px; padding: 11px 13px; background: var(--color-paper); border: 1px solid color-mix(in oklab, var(--color-ink-deep) 10%, transparent); border-radius: var(--radius-3); } .sixth-forms-page .dc-pipeline-emma .icon-emma { flex: none; width: 32px; height: 32px; } .sixth-forms-page .dc-pipeline-emma > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; color: var(--color-ink-deep); font-family: var(--font-heading); font-size: 13px; line-height: 1.2; } .sixth-forms-page .dc-pipeline-emma small { color: var(--color-ink-soft); font-family: var(--font-sans); font-size: 11px; } /* ── Classroom funding scene ────────────────────────────────────────────────────────────── */ /* A page-specific illustration rather than an icon grid: room context, desk surfaces, occupied places, vacant chairs, cohort capacity and the existing funding-impact figure. */ .sixth-forms-page .dc-classroom { width: 100%; max-width: 420px; margin: 0 auto; padding: 16px; overflow: hidden; box-shadow: var(--shadow-soft); } .sixth-forms-page .dc-classroom-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .sixth-forms-page .dc-classroom-head > div, .sixth-forms-page .dc-classroom-impact > span { display: flex; flex-direction: column; } .sixth-forms-page .dc-classroom-head > div { gap: 3px; } .sixth-forms-page .dc-classroom-head > div > strong { color: var(--color-ink-deep); font-family: var(--font-heading); font-size: 16px; line-height: 1.1; } .sixth-forms-page .dc-classroom-capacity { display: inline-flex; align-items: baseline; gap: 3px; flex: none; color: var(--color-ink-soft); background: var(--color-page-bg); border-radius: var(--radius-full); padding: 6px 9px; font-family: var(--font-heading); font-size: 11px; line-height: 1; } .sixth-forms-page .dc-classroom-capacity strong { color: var(--color-ink-deep); font-size: 13px; } .sixth-forms-page .dc-classroom-meter { height: 4px; margin-top: 10px; overflow: hidden; background: color-mix(in oklab, var(--color-coral-500) 18%, transparent); border-radius: var(--radius-full); } .sixth-forms-page .dc-classroom-meter > span { display: block; width: 75%; height: 100%; background: var(--color-ink-royal); border-radius: inherit; } .sixth-forms-page .dc-classroom-scene { margin-top: 10px; padding: 10px; overflow: hidden; background-color: var(--color-page-bg); background-image: radial-gradient(circle, color-mix(in oklab, var(--color-ink-mute) 18%, transparent) 1px, transparent 1px); background-size: 16px 16px; border: 1px solid var(--color-rule); border-radius: var(--radius-3); } .sixth-forms-page .dc-classroom-scene :where(i, em) { font-style: normal; } .sixth-forms-page .dc-classroom-front { display: grid; grid-template-columns: 46px minmax(0, 1fr) 36px; align-items: stretch; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--color-rule); } .sixth-forms-page .dc-classroom-window { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 4px; background: var(--color-paper); border: 1px solid var(--dc-node-line); border-radius: var(--radius-1\.5); } .sixth-forms-page .dc-classroom-window > i { background: color-mix(in oklab, var(--color-secondary) 15%, var(--color-paper)); border-radius: 2px; } .sixth-forms-page .dc-classroom-board { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 30px; color: var(--color-white); background: var(--color-ink-deep); border: 3px solid var(--color-paper); border-radius: var(--radius-1\.5); box-shadow: 0 0 0 1px var(--dc-node-line); font-family: var(--font-heading); line-height: 1.05; } .sixth-forms-page .dc-classroom-board strong { font-size: 10px; } .sixth-forms-page .dc-classroom-board small { margin-top: 2px; color: var(--color-on-dark-body); font-size: 7px; } .sixth-forms-page .dc-classroom-door { position: relative; background: var(--color-paper); border: 1px solid var(--dc-node-line); border-radius: var(--radius-1\.5) var(--radius-1\.5) 0 0; } .sixth-forms-page .dc-classroom-door > i { position: absolute; right: 5px; top: 50%; width: 3px; height: 3px; background: var(--color-coral-500); border-radius: var(--radius-full); } .sixth-forms-page .dc-classroom-seats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px 8px; margin-top: 10px; } .sixth-forms-page .dc-classroom-seat { position: relative; display: block; min-width: 0; height: 42px; } .sixth-forms-page .dc-student { position: absolute; z-index: 1; top: 6px; left: 50%; width: 22px; height: 19px; background: var(--color-ink-royal); border: 2px solid var(--color-paper); border-radius: 10px 10px 5px 5px; transform: translateX(-50%); } .sixth-forms-page .dc-student::before { content: ""; position: absolute; top: -6px; left: 50%; width: 11px; height: 11px; background: var(--color-coral-100); border: 2px solid var(--color-paper); border-radius: var(--radius-full); transform: translateX(-50%); } .sixth-forms-page .dc-student::after { content: ""; position: absolute; top: -6px; left: 50%; width: 11px; height: 5px; background: var(--color-ink-deep); border-radius: 8px 8px 2px 2px; transform: translateX(-50%); } .sixth-forms-page .dc-student > i { position: absolute; left: 50%; bottom: 3px; width: 8px; height: 2px; background: color-mix(in oklab, var(--color-white) 65%, transparent); border-radius: var(--radius-full); transform: translateX(-50%); } .sixth-forms-page .dc-seat-filled:nth-child(4n + 2) .dc-student { background: var(--dc-navy-3); } .sixth-forms-page .dc-seat-filled:nth-child(4n + 3) .dc-student { background: var(--color-secondary); } .sixth-forms-page .dc-desk { position: absolute; z-index: 2; right: 0; bottom: 4px; left: 0; height: 18px; background: var(--color-paper); border: 1px solid var(--dc-node-line); border-radius: var(--radius-1\.5); box-shadow: 0 5px 8px color-mix(in oklab, var(--color-ink-deep) 8%, transparent); } .sixth-forms-page .dc-desk::before { content: ""; position: absolute; top: 100%; right: 5px; left: 5px; height: 4px; border-right: 1px solid var(--dc-node-line); border-left: 1px solid var(--dc-node-line); } .sixth-forms-page .dc-desk > i { position: absolute; top: 4px; left: 6px; width: 13px; height: 8px; background: var(--color-page-bg); border: 1px solid var(--color-rule); border-radius: 2px; } .sixth-forms-page .dc-desk > b { position: absolute; top: 4px; right: 6px; width: 2px; height: 9px; background: var(--color-coral-500); border-radius: var(--radius-full); transform: rotate(18deg); } .sixth-forms-page .dc-seat-empty { background: color-mix(in oklab, var(--color-coral-500) 8%, transparent); border: 1px dashed color-mix(in oklab, var(--color-coral-500) 42%, transparent); border-radius: var(--radius-2); } .sixth-forms-page .dc-seat-empty > em { position: absolute; z-index: 3; top: 3px; right: 3px; color: var(--color-coral-500); font-family: var(--font-label); font-size: 5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .sixth-forms-page .dc-chair { position: absolute; top: 7px; left: 50%; width: 21px; height: 20px; border: 2px solid color-mix(in oklab, var(--color-coral-500) 58%, transparent); border-radius: 9px 9px 4px 4px; transform: translateX(-50%); } .sixth-forms-page .dc-seat-empty .dc-desk { right: 4px; bottom: 4px; left: 4px; background: color-mix(in oklab, var(--color-coral-100) 55%, var(--color-paper)); border-color: color-mix(in oklab, var(--color-coral-500) 42%, transparent); box-shadow: none; } .sixth-forms-page .dc-classroom-impact { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-rule); } .sixth-forms-page .dc-classroom-impact > span:first-child { gap: 2px; } .sixth-forms-page .dc-classroom-impact > span:last-child { align-items: flex-end; gap: 1px; text-align: right; } .sixth-forms-page .dc-classroom-impact strong { color: var(--color-ink-deep); font-family: var(--font-heading); font-size: 13px; line-height: 1.1; } .sixth-forms-page .dc-classroom-impact small { color: var(--color-ink-mute); font-size: 8px; line-height: 1.3; } .sixth-forms-page .dc-classroom-impact > span:last-child > strong { color: var(--color-coral-500); font-size: 21px; } /* MIS copy treatment; layout and logo cards are shared in `_shared/cards.css`. */ .sixth-forms-page .dc-mis-title { font-family: var(--font-heading); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; color: var(--color-ink-deep); margin: 0 0 5px; } /* ── The journey: 7 stages, ONE VISIBLE AT A TIME ───────────────────────────────────────── */ /* Measured off the reference: the stages are display:grid / display:none, driven by the step pills — a STEPPER, not the horizontal carousel Secondary's journey turned out to be. So it maps onto the DS `tabs` controller exactly as the toolkit does, and needs no page JS. */ /* 4fr + 3fr so all seven pills share one container width (each = 1/7). Same 8px gap between the two halves as between pills, so they read as one even strip. */ .sixth-forms-page .dc-steps { display: grid; grid-template-columns: 4fr 3fr; gap: 24px 8px; align-items: start; } .sixth-forms-page .dc-steps-half, .sixth-forms-page .dc-steps-half-b { min-width: 0; } .sixth-forms-page .dc-steps-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .sixth-forms-page .dc-steps-half-b .dc-steps-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sixth-forms-page .dc-step { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-width: 0; text-align: left; cursor: pointer; background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-2\.5); padding: 9px 14px 11px; color: var(--color-ink-soft); transition: border-color 200ms ease; } .sixth-forms-page .dc-step::before, .sixth-forms-page .dc-step::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; } .sixth-forms-page .dc-step::before { background: color-mix(in srgb, var(--color-rule) 80%, transparent); } .sixth-forms-page .dc-step[aria-selected="true"]::before { background: color-mix(in srgb, #fff 22%, transparent); } .sixth-forms-page .dc-step::after { background: var(--color-coral-500); transform: scaleX(0); transform-origin: left center; } .sixth-forms-page .dc-step.is-playing::after { animation: dc-step-progress var(--dc-step-ms, 4.5s) linear forwards; } @keyframes dc-step-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } } .sixth-forms-page .dc-step:hover { border-color: var(--color-ink-soft); } .sixth-forms-page .dc-step-num { font-family: var(--font-label); font-weight: 700; font-size: 10.5px; letter-spacing: 0.06em; color: var(--color-ink-mute); } .sixth-forms-page .dc-step-label { font-family: var(--font-heading); font-weight: 600; font-size: 12.5px; line-height: 1.2; color: inherit; } .sixth-forms-page .dc-step[aria-selected="true"] { background: var(--color-ink-deep); border-color: var(--color-ink-deep); color: #fff; } .sixth-forms-page .dc-step[aria-selected="true"] .dc-step-num { color: var(--color-coral-500); } .sixth-forms-page .dc-step-hint { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--color-ink-mute); } .sixth-forms-page .dc-step-hint i { transform: rotate(180deg); } .sixth-forms-page .dc-stages { display: flex; flex-direction: column; margin-top: 20px; padding: clamp(24px, 3vw, 36px); background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-4\.5); } /* a stage is a grid when shown; the HTML `hidden` attribute is what hides the rest. Author `display: grid` would otherwise beat both `.hidden` and the UA [hidden] rule. */ .sixth-forms-page .dc-stage { display: grid; } .sixth-forms-page .dc-stage[hidden] { display: none; } /* ── Mock atoms shared across the stage mocks ───────────────────────────────────────────── */ .sixth-forms-page .dc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--color-rule); } .sixth-forms-page .dc-row:last-child { border-bottom: 0; } .sixth-forms-page .dc-row-head { padding: 13px 18px; border-bottom: 1px solid var(--color-rule); } .sixth-forms-page .dc-row-risk { background: var(--dc-wash-risk); } .sixth-forms-page .dc-row-dark { background: var(--color-dark-band); } .sixth-forms-page .dc-name { font-family: var(--font-heading); font-weight: 600; font-size: 13.5px; line-height: normal; color: var(--color-ink-deep); margin: 0; } .sixth-forms-page .dc-name-b { font-weight: 700; font-size: 15px; color: var(--color-ink-deep); } .sixth-forms-page .dc-name-b-13 { font-size: 13px; } /* ref sizes these per instance */ /* status chips: mono, so they are NOT the DS .badge (which is Inter semibold) */ .sixth-forms-page .dc-pill { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-label); font-weight: 600; font-size: 9.5px; letter-spacing: 0.02em; border-radius: var(--radius-full); padding: 4px 10px; white-space: nowrap; } .sixth-forms-page .dc-pill-ok { color: var(--color-ok-green); background: var(--color-ok-green-soft); } .sixth-forms-page .dc-pill-risk { color: var(--color-coral-500); background: var(--color-coral-100); } .sixth-forms-page .dc-pill-new { color: var(--color-ink-soft); background: var(--dc-sand-2); } .sixth-forms-page .dc-pill-warn { color: var(--dc-amber-ink); background: var(--color-light-yellow); } .sixth-forms-page .dc-tag { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-label); font-weight: 500; font-size: 9px; border-radius: var(--radius-1); padding: 3px 7px; white-space: nowrap; } .sixth-forms-page .dc-tag-ok { color: var(--color-ok-green); background: var(--color-ok-green-soft); } .sixth-forms-page .dc-dot { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--color-ok-green-bright); } .sixth-forms-page .dc-dot-9 { width: 9px; height: 9px; } .sixth-forms-page .dc-dot-6 { width: 6px; height: 6px; } .sixth-forms-page .dc-dot-warn{ background: var(--dc-amber-dot); } .sixth-forms-page .dc-emma-line { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 12px; line-height: 1.45; font-weight: 500; color: var(--color-ink-deep); } .sixth-forms-page .dc-emma-line-top { margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--color-rule); } /* progress bars */ .sixth-forms-page .dc-bar { height: 8px; background: var(--dc-sand-2); border-radius: var(--radius-1); overflow: hidden; } .sixth-forms-page .dc-bar-fill { height: 100%; border-radius: var(--radius-1); background: var(--color-coral-500); } .sixth-forms-page .dc-bar-86 { width: 86%; } /* the 5-segment application stepper */ .sixth-forms-page .dc-seg { display: flex; gap: 4px; } .sixth-forms-page .dc-seg > span { flex: 1; height: 4px; border-radius: var(--radius-0\.5); background: var(--dc-sand-2); } /* one extra class rather than !important, so the "on" segment simply out-specifies the base */ .sixth-forms-page .dc-seg > .dc-seg-on { background: var(--color-coral-500); } /* ── Hero funnel mock ───────────────────────────────────────────────────────────────────── */ .sixth-forms-page .dc-funnel { display: flex; flex-direction: column; gap: 9px; list-style: none; margin: 0; padding: 0; } .sixth-forms-page .dc-funnel-row { display: flex; align-items: center; gap: 14px; } .sixth-forms-page .dc-funnel-label { flex: none; width: 92px; text-align: right; } .sixth-forms-page .dc-funnel-track { flex: 1; height: 34px; background: var(--color-page-bg); border-radius: var(--radius-2); overflow: hidden; } .sixth-forms-page .dc-funnel-fill { display: flex; align-items: center; justify-content: flex-end; height: 100%; border-radius: var(--radius-2); padding-right: 10px; font-family: var(--font-heading); font-weight: 700; font-size: 13px; color: #fff; } /* the reference animates these widths in; a prototype with no JS shows them at rest */ .sixth-forms-page .dc-funnel-1 { width: 100%; background: var(--color-ink-deep); } .sixth-forms-page .dc-funnel-2 { width: 78%; background: var(--dc-navy-2); } .sixth-forms-page .dc-funnel-3 { width: 62%; background: var(--dc-navy-3); } .sixth-forms-page .dc-funnel-4 { width: 47%; background: var(--color-coral-500); } .sixth-forms-page .dc-funnel-5 { width: 40%; background: var(--color-ok-green); } .sixth-forms-page .dc-mock-foot { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--color-rule); color: var(--color-ink-soft); } /* ── Stage 01: the ApplicaaOne search mock ──────────────────────────────────────────────── */ .sixth-forms-page .dc-one-logo { display: block; height: 28px; width: auto; } .sixth-forms-page .dc-pill-outline { display: inline-flex; align-items: center; border: 1px solid var(--color-rule); border-radius: var(--radius-full); padding: 4px 10px; } .sixth-forms-page .dc-phone .dc-search { display: flex; align-items: center; gap: 8px; background: var(--color-page-bg); border-radius: var(--radius-2\.5); padding: 9px 12px; font-size: 12.5px; color: var(--color-ink-soft); } .sixth-forms-page .dc-result-on { border: 1.5px solid var(--color-coral-500); border-radius: var(--radius-3); padding: 12px 13px; background: var(--color-paper); } .sixth-forms-page .dc-result-off { border: 1px solid var(--color-rule); border-radius: var(--radius-3); padding: 12px 13px; margin-top: 8px; opacity: 0.55; } .sixth-forms-page .dc-quick { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; background: var(--color-coral-500); color: #fff; border-radius: var(--radius-1\.5); padding: 7px 13px; font-family: var(--font-heading); font-weight: 600; font-size: 11.5px; } .sixth-forms-page .dc-tag-ofsted { font-family: var(--font-label); font-weight: 500; font-size: 8.5px; color: var(--color-ok-green); background: var(--color-ok-green-soft); border-radius: var(--radius-1); padding: 2px 6px; white-space: nowrap; } .sixth-forms-page .dc-stat-inline { font-family: var(--font-heading); font-weight: 700; font-size: 19px; color: var(--color-ink-deep); } /* ── Stage 02: the QR ticket mock ───────────────────────────────────────────────────────── */ .sixth-forms-page .dc-qr { font-size: 44px; color: var(--color-ink-deep); flex: none; } .sixth-forms-page .dc-qr-body { flex: 1; border-left: 1.5px dashed var(--color-rule); padding-left: 16px; } /* ── Stage quote cards ──────────────────────────────────────────────────────────────────── */ .sixth-forms-page .dc-quote-card { font-family: var(--font-heading); font-weight: 500; font-size: 14.5px; line-height: 1.55; letter-spacing: -0.005em; color: var(--color-ink-deep); margin: 18px 0 0; padding: 16px 20px; background: var(--color-page-bg); border-radius: var(--radius-3); } .sixth-forms-page .dc-quote-by { display: block; margin-top: 8px; } /* ── Stage 04: the course-choice rows ───────────────────────────────────────────────────── */ .sixth-forms-page .dc-choice { display: flex; align-items: center; justify-content: space-between; border: 1.5px solid var(--color-coral-500); border-radius: var(--radius-2\.5); padding: 11px 13px; margin-top: 7px; } .sixth-forms-page .dc-choice-off { border: 1px solid var(--color-rule); opacity: 0.6; } .sixth-forms-page .dc-choice-label { font-family: var(--font-heading); font-weight: 600; font-size: 12.5px; color: var(--color-ink-deep); } .sixth-forms-page .dc-radio { display: inline-block; width: 14px; height: 14px; border: 1.5px solid var(--color-rule); border-radius: 50%; } /* ── Stage 06: the blurred, locked market chart ─────────────────────────────────────────── */ .sixth-forms-page .dc-locked { position: relative; border-radius: var(--radius-4); overflow: hidden; } .sixth-forms-page .dc-locked-body { aspect-ratio: 16 / 10; width: 100%; padding: 28px; display: flex; flex-direction: column; background: var(--color-paper); border: 1px solid var(--color-rule); filter: blur(7px); transform: scale(1.04); } .sixth-forms-page .dc-locked-over { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; padding: 16px; text-align: center; } .sixth-forms-page .dc-locked-tag { display: inline-flex; align-items: center; gap: 8px; background: rgba(11, 16, 35, 0.82); color: #fff; font-family: var(--font-heading); font-weight: 600; font-size: 13px; border-radius: var(--radius-full); padding: 11px 20px; } .sixth-forms-page .dc-cols { flex: 1; display: flex; align-items: flex-end; gap: 18px; margin-top: 18px; } .sixth-forms-page .dc-col { flex: 1; border-radius: var(--radius-2) var(--radius-2) 0 0; } .sixth-forms-page .dc-col-1 { height: 82%; background: var(--color-coral-500); } .sixth-forms-page .dc-col-2 { height: 58%; background: var(--color-ink-deep); } .sixth-forms-page .dc-col-3 { height: 44%; background: var(--dc-navy-3); } .sixth-forms-page .dc-col-4 { height: 30%; background: var(--color-ink-mute); } .sixth-forms-page .dc-col-5 { height: 21%; background: var(--dc-line-dash); } /* ── Stage 07: the conversion chart + the "coming soon" note ─────────────────────────────── */ .sixth-forms-page .dc-chart { display: flex; align-items: flex-end; gap: 14px; height: 130px; margin-top: 18px; } .sixth-forms-page .dc-chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; position: relative; } .sixth-forms-page .dc-chart-bar { width: 100%; border-radius: var(--radius-1\.5) var(--radius-1\.5) 0 0; background: var(--color-ink-deep); } .sixth-forms-page .dc-chart-88 { height: 88%; } .sixth-forms-page .dc-chart-70 { height: 70%; } .sixth-forms-page .dc-chart-38 { height: 38%; background: var(--color-coral-500); } .sixth-forms-page .dc-chart-34 { height: 34%; } .sixth-forms-page .dc-chart-30 { height: 30%; background: var(--color-ok-green); } .sixth-forms-page .dc-chart-flag { position: absolute; top: 6px; font-family: var(--font-label); font-weight: 600; font-size: 8.5px; color: var(--color-coral-500); white-space: nowrap; } .sixth-forms-page .dc-soon { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; background: var(--color-coral-100); border: 1px solid var(--dc-line-soon); border-radius: var(--radius-3); padding: 14px 18px; } .sixth-forms-page .dc-soon-tag { flex: none; margin-top: 2px; font-family: var(--font-label); font-weight: 500; font-size: 9px; letter-spacing: 0.07em; color: #fff; background: var(--color-coral-500); border-radius: var(--radius-full); padding: 4px 9px; } /* ── Faith: icon-tile feature rows ──────────────────────────────────────────────────────── * The in-year features now reuse `_shared/page-shared.css` §4's unwrapped capability grid. */ .sixth-forms-page .dc-feature { display: flex; gap: 14px; align-items: flex-start; } .sixth-forms-page .dc-feature-body { flex: 1; min-width: 0; } .sixth-forms-page .dc-faith-list { display: flex; flex-direction: column; gap: 16px; } .sixth-forms-page .dc-faith-row { display: flex; gap: 13px; align-items: flex-start; } .sixth-forms-page .dc-tile-sand { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-2\.5); background: var(--color-page-bg); } .sixth-forms-page .dc-tile-sand > i { font-size: 14px; color: var(--color-coral-500); } .sixth-forms-page .dc-faith-title { font-family: var(--font-heading); font-weight: 700; font-size: 14.5px; letter-spacing: -0.012em; color: var(--color-ink-deep); margin: 0 0 3px; } .sixth-forms-page .dc-link-coral { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-heading); font-weight: 600; font-size: 14.5px; color: var(--color-coral-500); text-decoration: none; } .sixth-forms-page .dc-link-coral:hover { color: var(--color-ink-deep); } /* ── Emma band ──────────────────────────────────────────────────────────────────────────── */ .sixth-forms-page .dc-stat-pill { display: inline-flex; align-items: center; gap: 18px; } .sixth-forms-page .dc-stat-pill-num { flex: none; font-family: var(--font-heading); font-weight: 700; font-size: 40px; line-height: 1; letter-spacing: -0.02em; color: var(--color-coral-500); } .sixth-forms-page .dc-link-white { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.4); white-space: nowrap; } .sixth-forms-page .dc-guardrails { padding: 8px 4px 0; } /* the reference's guardrail list is 15px-gapped with a 14px body — tighter than .check-list */ .sixth-forms-page .dc-guardrails .check-list { gap: 15px; } .sixth-forms-page .dc-guardrails .check-list > li { font-size: 14px; line-height: 1.5; } .sixth-forms-page .dc-emma-tabs { flex-wrap: wrap; } .sixth-forms-page .dc-emma-tabs .tab { white-space: nowrap; } /* prompt-card: the DS component already carries the reference's 18px radius, shadow-dark, the 34px pulsing avatar, the caret and the pill row. Only the reply's mono-free metrics differ. */ .sixth-forms-page .prompt-card { padding: 22px 24px 18px; } .sixth-forms-page .prompt-card-line { font-size: 16px; } .sixth-forms-page .prompt-card-reply { border-color: var(--color-rule); } /* ── Emma for families: the chat mock ───────────────────────────────────────────────────── */ .sixth-forms-page .dc-chat { background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-4\.5); padding: 18px; box-shadow: var(--dc-shadow-chat); } /* ── Results: the testimonial slider + the stat stack ───────────────────────────────────── */ .sixth-forms-page .dc-results-band { background: var(--color-paper); border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); } .sixth-forms-page .dc-quote-panel { background: var(--color-dark-band); border-radius: var(--radius-5); padding: clamp(32px, 4vw, 48px); display: flex; flex-direction: column; min-height: 360px; } .sixth-forms-page .dc-quote { display: flex; flex-direction: column; flex: 1; } .sixth-forms-page .dc-quote-foot { margin-top: auto; padding-top: 28px; display: flex; align-items: center; gap: 14px; } .sixth-forms-page .dc-avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--dc-avatar); color: #fff; font-family: var(--font-heading); font-weight: 700; font-size: 14px; } .sixth-forms-page .dc-quote-name { font-family: var(--font-heading); font-weight: 600; font-size: 14.5px; color: #fff; } .sixth-forms-page .dc-quote-nav { display: flex; align-items: center; gap: 16px; margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.12); } .sixth-forms-page .dc-quote-dots { display: flex; gap: 0; } .sixth-forms-page .dc-quote-arrows { margin-left: auto; display: flex; gap: 8px; } .sixth-forms-page .dc-stat-col { display: flex; flex-direction: column; gap: 12px; } .sixth-forms-page .dc-stat-card { flex: 1; background: var(--color-page-bg); border-radius: var(--radius-4); padding: 24px 26px; display: flex; flex-direction: column; justify-content: center; } .sixth-forms-page .dc-ticker { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 14px; background: var(--color-page-bg); border: 1px solid var(--color-rule); border-radius: var(--radius-4); padding: 18px 26px; } .sixth-forms-page .dc-ticker-label { flex: none; display: inline-flex; align-items: center; gap: 8px; } .sixth-forms-page .dc-ticker-item { flex: 1; min-width: 260px; font-size: 14px; line-height: 1.45; font-weight: 500; color: var(--color-ink-deep); } .sixth-forms-page .dc-ticker-end { flex: none; margin-inline-start: auto; } /* ── Resources ──────────────────────────────────────────────────────────────────────────── */ .sixth-forms-page .dc-res-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .sixth-forms-page .dc-res { display: flex; flex-direction: column; gap: 6px; padding: 18px 22px; border-radius: var(--radius-4\.5); background: var(--color-paper); border: 1px solid var(--color-rule); text-decoration: none; color: inherit; transition-property: box-shadow, transform; transition-duration: 200ms, 150ms; transition-timing-function: cubic-bezier(.2, .8, .2, 1), ease; } .sixth-forms-page .dc-res:hover { box-shadow: var(--dc-shadow-panel); transform: translateY(-2px); } .sixth-forms-page .dc-res-title { font-family: var(--font-heading); font-weight: 700; font-size: 17px; line-height: 1.18; letter-spacing: -0.01em; color: var(--color-ink-deep); } /* ── Bursary16+ panel ───────────────────────────────────────────────────────────────────── */ .sixth-forms-page .dc-bursary-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-4); padding: 20px 22px; } .sixth-forms-page .dc-bursary-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-2\.5); } .sixth-forms-page .dc-bursary-row-on { border: 1.5px solid var(--color-coral-500); background: rgba(236, 99, 75, 0.1); } .sixth-forms-page .dc-bursary-row > span:first-child { font-size: 12.5px; font-weight: 500; color: var(--dc-on-dark-row); } .sixth-forms-page .dc-bursary-row-on > span:first-child { font-family: var(--font-heading); font-weight: 600; color: #fff; } .sixth-forms-page .dc-bursary-tag { font-family: var(--font-label); font-weight: 600; font-size: 9px; border-radius: var(--radius-1); padding: 3px 7px; white-space: nowrap; } .sixth-forms-page .dc-bursary-tag-ok { color: var(--color-ok-green-bright); background: rgba(52, 208, 127, 0.14); } .sixth-forms-page .dc-bursary-tag-on { color: #fff; background: var(--color-coral-500); } .sixth-forms-page .dc-bursary-tag-flat { color: var(--dc-on-dark-body); } .sixth-forms-page .dc-bursary-note { display: flex; align-items: flex-start; gap: 9px; margin-top: 14px; padding-top: 13px; border-top: 1px solid rgba(255, 255, 255, 0.1); } .sixth-forms-page .dc-bursary-pill { display: inline-flex; align-items: center; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: var(--radius-full); padding: 5px 11px; } .sixth-forms-page .dc-bursary-logo { height: 30px; width: auto; } /* ── Closer ─────────────────────────────────────────────────────────────────────────────── */ /* The standard full-bleed flat coral band; only this page's taller clamp is nudged. */ .sixth-forms-page .cta-section { padding: clamp(80px, 11vw, 150px) 24px; } /* ── Three spacing steps the build does not carry ───────────────────────────────────────── */ /* `prototypes/` is deliberately not a Tailwind scan source, so mt-1.5 / mt-3.5 / mt-14 produce no CSS here — the same failure a CMS block would hit. Declared page-locally, named by px. */ .sixth-forms-page .dc-mt-6 { margin-top: 6px; } .sixth-forms-page .dc-mt-14 { margin-top: 14px; } .sixth-forms-page .dc-mt-56 { margin-top: 56px; } /* ── Reduced motion ─────────────────────────────────────────────────────────────────────── */ /* No blanket `* { animation-duration: .01ms !important }` here. This page defines no @keyframes of its own: every animation on it comes from a design-system component (section-glow-drift, marquee, prompt-card, reveal), and each of those already neutralises itself under prefers-reduced-motion. The blanket rule broke the no-!important rule (coding-standards §6) to do a job the DS had already done. If this page ever gains its own animation, give that class an `animation: none` in the block below instead. */ /* .dc-q-25 is a
: the DS re-adds a default margin for that element type, so this reset is load-bearing and must survive - at ZERO specificity, via :where(), so a margin utility can still override it (coding-standards section 2 rule 5). */ :where(.sixth-forms-page .dc-q-25) { margin: 0; } /* The diagram needs more horizontal room than the page's text-only grids. 800px is an existing package step and prevents both cards being compressed into unreadable 250–312px columns. */ @media (max-width: 800px) { .sixth-forms-page .dc-grid-problem { grid-template-columns: minmax(0, 1fr); gap: 18px; } .sixth-forms-page .dc-compare-arrow { min-height: 60px; } .sixth-forms-page .dc-compare-arrow::before { top: 0; right: auto; bottom: 0; left: 50%; width: 2px; height: auto; background: linear-gradient(180deg, var(--dc-line-dash), var(--color-coral-500)); transform: translateX(-50%); } .sixth-forms-page .dc-compare-arrow > i { transform: rotate(90deg); } } /* ── Phone: single column at 640 ─────────────────────────────────────────────────────────── */ /* DEPARTURE FROM THE REFERENCES, owner-approved 2026-08-17. The package does not adapt below ~1000px at all - that is the defect being fixed, so breakpoint fidelity is not the goal here; readability at 390 is. 640 is a value from the package's OWN inventory (1080/1000/940/900/800/720/680/640/620/560), so nothing is invented - it is a step this page's reference does not use, which is a much weaker objection than the invented 767/991 that STATUS section 5 records being swept out. Collapsing is keyed on the MEASURED column count, never the class name: several `dc-grid-2` computed 4 columns. */ @media (max-width: 640px) { .sixth-forms-page .dc-emma-tabs .tab { flex-basis: calc(50% - 2px); } .sixth-forms-page .dc-grid-emma, .sixth-forms-page .dc-grid-stage, .sixth-forms-page .dc-grid-2, .sixth-forms-page .dc-grid-bursary, .sixth-forms-page .dc-grid-families, .sixth-forms-page .dc-grid-hero, .sixth-forms-page .dc-grid-problem, .sixth-forms-page .dc-grid-results, .sixth-forms-page .dc-grid-stakes { grid-template-columns: minmax(0, 1fr); } .sixth-forms-page .dc-compare-old, .sixth-forms-page .dc-compare-new { padding: 22px; } .sixth-forms-page .dc-steps { grid-template-columns: minmax(0, 1fr); } } /* The hero's 128px TOP pad, restored for the CMS. `dc-py-128-72` declares only the bottom: in the prototype the top comes from _shared/page-shared.css via `body.app > [data-site-header] + [data-stack-group] > .section:first-child`. /r/24's CMS replacement is `main > .section:first-of-type, main > div > .section:first-of-type` — depth 1 and 2 only. This page nests the hero THREE deep (main > div.sixth-forms-page > div[data-stack-group] > section#top), so neither form matches and the hero falls back to the DS `.section` default of 96px. Scoped to the FIRST stack group so later groups do not inherit 128px — the CMS equivalent of the shared rule's `[data-site-header] +` adjacency guard. Inert in the prototype, where `.sixth-forms-page` is and its first child is the header slot. Found on fe-colleges (2026-08-28 round 4); applies to every stack-group page. */ .sixth-forms-page > [data-stack-group]:first-child > .section:first-child { padding-top: 128px; }