/* Bursary16+ — page CSS * ============================================================================================ * GOAL: a FAITHFUL (1:1) reproduction of the reference "Bursary16 Plus.dc.html" * (13 sections, 569 inline styles) without its inline styles. * * STRATEGY (prototypes/WORKFLOW.md): design-system classes carry the components; this file * carries the package's metric DELTAS as page-scoped overrides, so tuning toward the DS later is * deleting overrides rather than rewriting markup. Scoped under `.bursary16-page`. * * THE PAIR: this file STARTED as a byte-for-byte copy of prototypes/bursary/page.css (410 lines) * with the scope class renamed — the two Bursary pages are the same page shape with different * content: the same centred hero + illustrative mock, the same problem split with struck chips, * the same dark Emma band with a video placeholder and three glass cards, the same "Into the MIS" * strip, closer and "Related" footer strip. Everything from here to the "BURSARY16-ONLY" heading * below is shared with Bursary+; after it are the four devices only this page has — the rules * cards, the staggered capability grid, the cost calculator, and the DfE checklist tabs — plus the * testimonial carousel. * * THE TWO TRAPS, APPLIED FROM THE START: * 1. The reference styles every heading and label with the CSS `font:` SHORTHAND, which RESETS * line-height to `normal`. Inheriting our 1.5 body leading makes each one 3-12px taller and * compounds down the page. Every fixed-size heading here sets `line-height: normal`, and so * does `.font-label` — note that merely omitting a DS leading utility is NOT enough, * because the label then inherits the body's 1.5 and is wrong the other way. * FIXED IN THE DS (2026-08-14): `leading-label` = `normal` now exists, so new work * composes it in the markup and needs no page-local override. * 2. A page class like `.dc-t-48 { margin: 0 }` is specificity 0-2-0 and BEATS an unlayered * Tailwind `mt-4` utility (0-1-0). Spacing next to those classes therefore uses px-named * page classes declared LATER in this file, never `mt-*`. * * REFERENCE vs OUR TOKENS (measured): * IDENTICAL, so we use ours: the ink scale (#0F1A4F / #4D5B7F / #8893B0), coral-500 #EC634B, * accent-soft #FFE7DD (= coral-100), paper, page-bg #F4F5F9, rule #E6E8EF, dark #0B1023 * (= dark-band), ok-green #1A8A3F, ok-green-bright #34D07F, shadow-deep (0 30px 80px /.12), * shadow-soft (0 14px 40px /.07). * DIFFERENT, so declared below (owner's call: 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 the "sand-2" fill behind progress bars and avatars * #9AA6C2 body copy ON DARK * #5C688A captions ON DARK · #8D9AB8 the guardrail strip on dark * #F2B01E the "COMING SOON" amber (our warn-amber is #FEC84B — NOT the same) * Shadows with no token: 0 24px 60px /.06 · 0 14px 40px /.09 · 0 26px 60px /.13 · * 0 10px 24px rgba(236,99,75,.3) · 0 14px 36px rgba(236,99,75,.42) · 0 20px 60px /.14 · * 0 12px 32px /.08 · 0 18px 48px /.08 · 0 24px 60px /.10 · 0 22px 56px rgba(4,8,24,.3). * * GEOMETRY: the reference container is 1200px with a 24px gutter (ours is 1224/32), plus a * page-local 1100px hero column. * * BODY FONT: the reference sets `font-family: var(--font-body)` on its own root and the DS does * not set Inter on `body`/`.app`, so the family is set on the page root exactly as the reference * does (owner's decision: leave the DS alone for now). * ============================================================================================ */ .bursary16-page { /* reference-only values, all measured */ --dc-fill: #E9ECF3; --dc-on-dark-body: var(--color-on-dark-body); --dc-on-dark-mute: var(--color-on-dark-faint); --dc-on-dark-strip: var(--color-ink-mute); --dc-amber: #F2B01E; --dc-shadow-panel-soft: 0 24px 60px rgba(15, 26, 79, 0.06); --dc-shadow-mock: 0 14px 40px rgba(15, 26, 79, 0.09); --dc-shadow-lift: 0 26px 60px rgba(15, 26, 79, 0.13); --dc-shadow-tile: 0 10px 24px rgba(236, 99, 75, 0.3); --dc-shadow-play: 0 14px 36px rgba(236, 99, 75, 0.42); --dc-ease: cubic-bezier(0.2, 0.8, 0.2, 1); background: var(--color-page-bg); font-family: var(--font-sans); } /* 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: the reference's own per-section values ─────────────────────────────── */ .bursary16-page .dc-py-96-64 { padding-top: 96px; padding-bottom: 64px; } .bursary16-page .dc-py-96 { padding-top: 96px; padding-bottom: 96px; } .bursary16-page .dc-py-0-96 { padding-top: 0; padding-bottom: 96px; } .bursary16-page .dc-py-0-72 { padding-top: 0; padding-bottom: 72px; } /* ── Display type: the reference clamps every headline individually ─────────────────────── */ .bursary16-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(.bursary16-page [class*="dc-t-"]) { margin: 0; text-wrap: balance; } .bursary16-page .dc-t-84 { font-size: clamp(44px, 6vw, 84px); line-height: 1.0; letter-spacing: -0.04em; } .bursary16-page .dc-t-80 { font-size: clamp(38px, 6vw, 80px); line-height: 1.0; letter-spacing: -0.04em; } .bursary16-page .dc-t-54 { font-size: clamp(30px, 4.2vw, 54px); line-height: 1.06; letter-spacing: -0.03em; } .bursary16-page .dc-t-48 { font-size: clamp(28px, 3.8vw, 48px); line-height: 1.08; letter-spacing: -0.03em; } .bursary16-page .dc-t-42 { font-size: clamp(26px, 3.4vw, 42px); line-height: 1.1; letter-spacing: -0.025em; } .bursary16-page .dc-t-38 { font-size: clamp(24px, 3vw, 38px); line-height: 1.12; letter-spacing: -0.025em; } /* Big numerals */ .bursary16-page .dc-num-22 { font-family: var(--font-heading); font-weight: 700; font-size: 22px; line-height: 1; letter-spacing: -0.02em; } /* Fixed-size display headings — line-height per the reference, `normal` where it uses the `font:` shorthand without one (trap 1) */ .bursary16-page .dc-h-175t { font-family: var(--font-heading); font-weight: 700; font-size: 17.5px; line-height: 1.25; margin: 0; } .bursary16-page .dc-hs-155 { font-family: var(--font-heading); font-weight: 600; font-size: 15.5px; line-height: normal; } .bursary16-page .dc-normal-case { text-transform: none; } .bursary16-page .dc-centre { margin-left: auto; margin-right: auto; } .bursary16-page .dc-hs-125 { font-family: var(--font-heading); font-weight: 600; font-size: 12.5px; line-height: normal; } /* ── Body copy steps (Inter), named by px ───────────────────────────────────────────────── */ .bursary16-page .dc-lede-19 { font-size: clamp(16px, 1.8vw, 19px); line-height: 1.55; margin: 0; } .bursary16-page .dc-closer-lede { font-size: clamp(17px, 2vw, 21px); line-height: 1.5; margin: 0; color: rgba(255, 255, 255, 0.92); } .bursary16-page .dc-body-16 { font-size: 16px; line-height: 1.6; margin: 0; } .bursary16-page .dc-body-155 { font-size: 15.5px; line-height: 1.6; margin: 0; } .bursary16-page .dc-body-15 { font-size: 15px; line-height: 1.6; margin: 0; } .bursary16-page .dc-body-145 { font-size: 14.5px; line-height: 1.55; margin: 0; } .bursary16-page .dc-body-14 { font-size: 14px; line-height: 1.55; margin: 0; } .bursary16-page .dc-body-14q { font-size: 14px; line-height: 1.45; margin: 0; } .bursary16-page .dc-body-135 { font-size: 13.5px; line-height: 1.55; margin: 0; } .bursary16-page .dc-body-135q { font-size: 13.5px; line-height: 1.45; margin: 0; } .bursary16-page .dc-body-13 { font-size: 13px; line-height: 1.5; margin: 0; } .bursary16-page .dc-body-125 { font-size: 12.5px; line-height: 1.45; margin: 0; } .bursary16-page .dc-body-12 { font-size: 12px; line-height: 1.5; margin: 0; } /* Measures read off the RENDERED reference (it sets them in `ch`; the reference's own value is in the comment). */ .bursary16-page .dc-measure-760 { max-width: 760px; } /* section heads, px */ /* the how-it-works head, px */ .bursary16-page .dc-measure-666 { max-width: 666px; margin-left: auto; margin-right: auto; } /* 56ch @19px */ .bursary16-page .dc-measure-598 { max-width: 598px; } /* 62ch @15.5px */ .bursary16-page .dc-measure-584 { max-width: 584px; } /* 58ch @16px */ .bursary16-page .dc-measure-577 { max-width: 577px; margin-left: auto; margin-right: auto; } /* 44ch @21px */ /* 58ch @15.5px */ .bursary16-page .dc-measure-560 { max-width: 560px; } /* the MIS strip copy, px */ .bursary16-page .dc-measure-507 { max-width: 507px; } /* 52ch @15.5px */ /* 34ch @15px */ /* ── Spacing steps the compiled utility surface does not carry ───────────────────────────── */ /* prototypes/ is not a Tailwind scan source, so a step nothing else in the repo uses produces no CSS (mb-11 compiles, mt-11 does not; the `.5` steps are patchy). These are also what makes spacing beside a `dc-t-*`/`dc-h-*` class work at all — see trap 2. Named in px. */ .bursary16-page .dc-mt-2px { margin-top: 2px; } .bursary16-page .dc-mt-6px { margin-top: 6px; } .bursary16-page .dc-mt-7px { margin-top: 7px; } .bursary16-page .dc-mt-8px { margin-top: 8px; } .bursary16-page .dc-mt-12px { margin-top: 12px; } .bursary16-page .dc-mt-14px { margin-top: 14px; } .bursary16-page .dc-mt-16px { margin-top: 16px; } .bursary16-page .dc-mt-18px { margin-top: 18px; } .bursary16-page .dc-mt-20px { margin-top: 20px; } .bursary16-page .dc-mt-22px { margin-top: 22px; } .bursary16-page .dc-mt-24px { margin-top: 24px; } .bursary16-page .dc-mt-28px { margin-top: 28px; } .bursary16-page .dc-mt-30px { margin-top: 30px; } .bursary16-page .dc-mt-34px { margin-top: 34px; } .bursary16-page .dc-mt-40px { margin-top: 40px; } .bursary16-page .dc-mt-44px { margin-top: 44px; } .bursary16-page .dc-mb-14px { margin-bottom: 14px; } .bursary16-page .dc-mb-18px { margin-bottom: 18px; } .bursary16-page .dc-mb-16px { margin-bottom: 16px; } /* ── Mono labels ────────────────────────────────────────────────────────────────────────── */ /* The reference's mono eyebrow IS our font-label at 12.5px/0.08em — composed in the markup from font-label + text-label-l + tracking-label. Only the sizes and trackings the DS lacks are here (DS carries 9.5/10.5/12.5px and 0.08em). The line-height rule is trap 1: the reference's `font:` shorthand means `normal`, and omitting `leading-eyebrow` alone would inherit 1.5. */ .bursary16-page .font-label { line-height: normal; } .bursary16-page .dc-ms-85 { font-size: 8.5px; } .bursary16-page .dc-ms-9 { font-size: 9px; } .bursary16-page .dc-ms-10 { font-size: 10px; } .bursary16-page .dc-ms-11 { font-size: 11px; } .bursary16-page .dc-ms-12 { font-size: 12px; } .bursary16-page .dc-tr-05 { letter-spacing: 0.05em; } .bursary16-page .dc-tr-06 { letter-spacing: 0.06em; } .bursary16-page .dc-tr-07 { letter-spacing: 0.07em; } .bursary16-page .dc-tr-09 { letter-spacing: 0.09em; } .bursary16-page .dc-tr-10 { letter-spacing: 0.1em; } /* A coral text link with a chevron (used on dark and on light) */ .bursary16-page .dc-link { 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; } .bursary16-page .dc-link:hover { color: var(--color-ink-deep); } .bursary16-page .dc-link i { font-size: 10px; } /* ── Surfaces ───────────────────────────────────────────────────────────────────────────── */ .bursary16-page .dc-panel { max-width: 1200px; margin: 0 auto; border-radius: var(--radius-5\.5); position: relative; overflow: hidden; } .bursary16-page .dc-card { background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-4\.5); padding: 26px 28px; } .bursary16-page .dc-card-mock { border: 0; box-shadow: var(--shadow-deep); border-radius: var(--radius-4\.5); padding: 22px 26px; text-align: left; max-width: 760px; margin-left: auto; margin-right: auto; } /* On dark */ .bursary16-page .dc-on-dark-body { color: var(--dc-on-dark-body); } .bursary16-page .dc-on-dark-mute { color: var(--dc-on-dark-mute); } .bursary16-page .dc-on-dark-strip { color: var(--dc-on-dark-strip); } .bursary16-page .dc-amber { color: var(--dc-amber); } .bursary16-page .dc-glass { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-4\.5); padding: 26px; } .bursary16-page .dc-glass-dashed { border-style: dashed; border-color: rgba(255, 255, 255, 0.25); } .bursary16-page .dc-stat-pill { display: inline-flex; align-items: center; gap: 14px; padding: 13px 20px 13px 16px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.16); } /* Icon tiles */ .bursary16-page .dc-tile { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-3); background: var(--color-coral-500); box-shadow: var(--dc-shadow-tile); } .bursary16-page .dc-tile i { font-size: 16px; color: #fff; } .bursary16-page .dc-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--color-ok-green-bright); } /* ── Grids, measured off the reference ──────────────────────────────────────────────────── */ .bursary16-page .dc-grid { display: grid; } .bursary16-page .dc-grid-problem { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(32px, 4.5vw, 64px); align-items: center; } .bursary16-page .dc-grid-2 { grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; } .bursary16-page .dc-grid-emma { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: clamp(32px, 4.5vw, 64px); align-items: center; } .bursary16-page .dc-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } /* the tracker mock's 4-column table */ /* the bento's spans */ /* 991px IS NOT A BREAKPOINT THIS REFERENCE USES — it collapses content at 1080px and again at 720px (its 1120/940/560 queries all target chrome we do not port). So each rule that was here moves to the reference's own value: · dc-grid-problem (probgrid) and dc-grid-emma (emmagrid) → 1080px, below. · dc-grid-2 (§4 and §5, both `1fr 1fr`) and dc-grid-3 (§7's glass cards, `repeat(3,1fr)`) are DROPPED: the reference has no query for either, so they stay multi-column all the way down. The squeeze belongs in STATUS.md §5, not in an invented breakpoint. */ @media (max-width: 1080px) { .bursary16-page .dc-grid-problem, .bursary16-page .dc-grid-emma { grid-template-columns: minmax(0, 1fr); } } /* ── Struck chips: the DS .badge-struck / .badge-row are exactly this device ─────────────── */ /* Only the hairline colour differs (the reference uses #ECEEF3, our token is #E6E8EF). */ .bursary16-page .badge-struck { border-color: var(--color-rule); } /* ── 1 · Hero ───────────────────────────────────────────────────────────────────────────── */ /* A 720px coral wash bled off the top centre — a centred bleed the DS .section-glow corner placements cannot express, so it is page-local. Same recipe as the DS glow. */ .bursary16-page .dc-glow-top { position: absolute; width: 720px; height: 720px; left: 50%; top: -420px; transform: translateX(-50%); border-radius: 50%; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--color-coral-500) 10%, transparent), transparent 62%); } .bursary16-page .dc-bars { display: flex; flex-direction: column; gap: 10px; } .bursary16-page .dc-bar-head { display: flex; justify-content: space-between; } .bursary16-page .dc-bar-track { height: 9px; border-radius: var(--radius-1\.5); background: var(--dc-fill); margin-top: 5px; } .bursary16-page .dc-bar-fill { height: 100%; border-radius: var(--radius-1\.5); background: var(--color-ink-deep); } .bursary16-page .dc-bar-fill-coral { background: var(--color-coral-500); } .bursary16-page .dc-bar-fill-green { background: var(--color-ok-green); } .bursary16-page .dc-bar-88 { width: 88%; } .bursary16-page .dc-bar-76 { width: 76%; } .bursary16-page .dc-bar-12 { width: 12%; } .bursary16-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); } /* ── 2 · The problem: the spreadsheet-tracker mock ──────────────────────────────────────── */ .bursary16-page .dc-mock-frame { background: var(--color-page-bg); border-radius: var(--radius-4\.5); padding: clamp(22px, 2.6vw, 30px); } .bursary16-page .dc-mock-card { background: var(--color-paper); border-radius: var(--radius-3\.5); box-shadow: var(--dc-shadow-mock); padding: 20px 22px; } .bursary16-page .dc-mock-warn { display: flex; align-items: flex-start; gap: 9px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--color-rule); } .bursary16-page .dc-mock-warn > i { flex: none; margin-top: 2px; font-size: 12px; color: var(--color-coral-500); } /* ── 3 · How it works: the bento's dark hero card ───────────────────────────────────────── */ /* ── 5 · Reporting: the dark panel's head rule ──────────────────────────────────────────── */ /* ── 6 · Managing the round: the hairline rows ──────────────────────────────────────────── */ /* ── 7 · Emma: the video placeholder ────────────────────────────────────────────────────── */ /* The reference ships this as an empty 16/10 frame with a play disc and a "DROP THE DEMO CLIP HERE" caption. Reproduced as-is rather than substituting an image that does not exist. */ .bursary16-page .dc-video { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius-4\.5); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.04); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; } .bursary16-page .dc-play { display: inline-flex; align-items: center; justify-content: center; width: 66px; height: 66px; border-radius: 50%; background: var(--color-coral-500); box-shadow: var(--dc-shadow-play); } .bursary16-page .dc-play i { font-size: 20px; color: #fff; margin-left: 3px; } /* The on-dark guardrail strip (a flowing row, not a list) */ .bursary16-page .dc-guardrails { display: flex; flex-wrap: wrap; gap: 10px 22px; } .bursary16-page .dc-guardrails > span > i { margin-right: 7px; font-size: 10px; color: var(--color-ok-green-bright); } /* ── 10 · Related: the centred cross-link strip ─────────────────────────────────────────── */ .bursary16-page .dc-related { max-width: 1200px; margin: 0 auto; border-top: 1px solid var(--color-rule); padding-top: 28px; display: flex; align-items: center; justify-content: center; gap: 12px 16px; flex-wrap: wrap; text-align: center; } /* ── Feature tick rows ──────────────────────────────────────────────────────────────────── */ /* ════════════════════════════════════════════════════════════════════════════════════════════ * BURSARY16-ONLY — the devices Bursary+ does not have * ════════════════════════════════════════════════════════════════════════════════════════════ */ /* Extra per-section rhythm */ .bursary16-page .dc-py-32-96 { padding-top: 32px; padding-bottom: 96px; } .bursary16-page .dc-py-96-56 { padding-top: 96px; padding-bottom: 56px; } .bursary16-page .dc-py-mis { padding-top: clamp(34px, 3.6vw, 46px); padding-bottom: clamp(34px, 3.6vw, 46px); } /* Extra type steps */ .bursary16-page .dc-h-18 { font-family: var(--font-heading); font-weight: 700; font-size: 18px; line-height: 1.28; letter-spacing: -0.014em; margin: 0; } .bursary16-page .dc-h-17 { font-family: var(--font-heading); font-weight: 700; font-size: 17px; line-height: 1.3; letter-spacing: -0.012em; margin: 0; } .bursary16-page .dc-h-145 { font-family: var(--font-heading); font-weight: 700; font-size: 14.5px; line-height: normal; letter-spacing: -0.01em; margin: 0; } .bursary16-page .dc-h-14 { font-family: var(--font-heading); font-weight: 700; font-size: 14px; line-height: normal; margin: 0; } .bursary16-page .dc-hs-13 { font-family: var(--font-heading); font-size: 13px; line-height: normal; } :where(.bursary16-page .dc-hs-13) { font-weight: 600; } /* default, overridable (§2 rule 5) */ .bursary16-page .dc-hs-15 { font-family: var(--font-heading); font-weight: 600; font-size: 15px; line-height: normal; } .bursary16-page .dc-num-26 { font-family: var(--font-heading); font-weight: 700; font-size: 26px; line-height: normal; } /* A Proxima 500 pull-line (the rules strip) and the carousel quote */ .bursary16-page .dc-q-21 { font-family: var(--font-heading); font-weight: 500; font-size: clamp(16px, 1.8vw, 21px); line-height: 1.45; letter-spacing: -0.012em; margin: 0; text-wrap: pretty; } .bursary16-page .dc-q-23 { font-family: var(--font-heading); font-weight: 500; font-size: clamp(17px, 2vw, 23px); line-height: 1.45; letter-spacing: -0.015em; margin: 0; text-wrap: pretty; } .bursary16-page .dc-q-145 { font-family: var(--font-heading); font-weight: 500; font-size: 14.5px; line-height: 1.5; margin: 0; } /* Extra body steps */ .bursary16-page .dc-body-165 { font-size: 16.5px; line-height: 1.6; margin: 0; } .bursary16-page .dc-body-115 { font-size: 11.5px; line-height: 1.45; margin: 0; } .bursary16-page .dc-body-105 { font-size: 10.5px; line-height: normal; margin: 0; } /* Extra measures, read off the rendered reference */ .bursary16-page .dc-measure-780 { max-width: 780px; } /* section heads, px */ .bursary16-page .dc-measure-643 { max-width: 643px; } /* 62ch @16.5px */ .bursary16-page .dc-measure-622 { max-width: 622px; } /* 60ch @16.5px */ /* Extra spacing steps */ .bursary16-page .dc-mt-3px { margin-top: 3px; } .bursary16-page .dc-mb-15px { margin-bottom: 15px; } .bursary16-page .dc-mb-26px { margin-bottom: 26px; } .bursary16-page .dc-mb-40px { margin-bottom: 40px; } /* Extra grids */ .bursary16-page .dc-grid-3e { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .bursary16-page .dc-grid-caps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; } .bursary16-page .dc-grid-staff { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 28px; } .bursary16-page .dc-grid-calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 48px); align-items: start; } .bursary16-page .dc-grid-cl { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bursary16-page .dc-grid-clitems { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; } .bursary16-page .dc-grid-2s { grid-template-columns: 1fr 1fr; gap: 10px; } /* Again the reference's own two values, not 991px. The three 3-up grids step to TWO columns at 1080 and only reach one at 720; the rest go straight to one column at 1080. */ @media (max-width: 1080px) { /* rulegrid, capgrid, staffgrid */ .bursary16-page .dc-grid-3e, .bursary16-page .dc-grid-caps, .bursary16-page .dc-grid-staff { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* cltabs, clitems, calcgrid */ .bursary16-page .dc-grid-cl, .bursary16-page .dc-grid-clitems, .bursary16-page .dc-grid-calc { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 720px) { .bursary16-page .dc-grid-3e, .bursary16-page .dc-grid-caps, .bursary16-page .dc-grid-staff { grid-template-columns: minmax(0, 1fr); } } /* ── 2 · The problem: the 21-day timeline mock ───────────────────────────────────────────── */ .bursary16-page .dc-quote-head { display: flex; align-items: flex-start; gap: 11px; padding-bottom: 16px; border-bottom: 1px solid var(--color-rule); } .bursary16-page .dc-avatar-soft { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--color-coral-100); } .bursary16-page .dc-avatar-soft i { font-size: 13px; color: var(--color-coral-500); } .bursary16-page .dc-timeline { position: relative; margin-top: 18px; } .bursary16-page .dc-timeline-spine { position: absolute; left: 5px; top: 8px; bottom: 26px; width: 2px; background: var(--dc-fill); } .bursary16-page .dc-tl-row { display: flex; gap: 14px; align-items: flex-start; position: relative; } .bursary16-page .dc-tl-dot { flex: none; width: 11px; height: 11px; border-radius: 50%; background: var(--dc-fill); border: 2px solid var(--color-paper); margin-top: 4px; z-index: 1; } .bursary16-page .dc-tl-dot-coral { background: var(--color-coral-500); } .bursary16-page .dc-tl-body { flex: 1; min-width: 0; padding-bottom: 18px; } .bursary16-page .dc-tl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } /* ── 3 · The rules: three cards + a dark pull strip ─────────────────────────────────────── */ .bursary16-page .dc-card-rule { border: 0; border-radius: var(--radius-4); box-shadow: var(--shadow-soft); padding: 26px 28px; } .bursary16-page .dc-card-head { display: flex; align-items: center; justify-content: space-between; } .bursary16-page .dc-tile-soft { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-3); background: var(--color-coral-100); } .bursary16-page .dc-tile-soft i { font-size: 15px; color: var(--color-coral-500); } .bursary16-page .dc-strip-dark { background: var(--color-dark-band); color: #fff; border-radius: var(--radius-4\.5); padding: 30px 34px; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; } .bursary16-page .dc-strip-grow { flex: 1; min-width: 280px; } /* ── 4 · Apply with dignity: the phone mock ─────────────────────────────────────────────── */ .bursary16-page .dc-phone-frame { display: flex; justify-content: center; background: var(--color-page-bg); border-radius: var(--radius-4); padding: 36px 0; } .bursary16-page .dc-phone { width: 290px; background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-7); box-shadow: 0 20px 60px rgba(15, 26, 79, 0.14); padding: 20px 18px; } .bursary16-page .dc-phone-head { display: flex; justify-content: space-between; } .bursary16-page .dc-phone-row { display: flex; justify-content: space-between; align-items: center; border: 1.5px solid var(--color-coral-500); border-radius: var(--radius-2\.5); padding: 11px 13px; } .bursary16-page .dc-phone-note { border: 1px solid var(--color-rule); border-radius: var(--radius-2\.5); padding: 11px 13px; background: var(--color-coral-100); } .bursary16-page .dc-phone-note i { font-size: 9px; margin-right: 6px; } .bursary16-page .dc-phone-dashed { display: flex; justify-content: space-between; align-items: center; border: 1px dashed var(--color-rule); border-radius: var(--radius-2\.5); padding: 11px 13px; } .bursary16-page .dc-phone-foot { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; } .bursary16-page .dc-phone-foot i { font-size: 9px; } /* The feature rows beside it use a fixed-width icon column so the copy aligns. */ .bursary16-page .dc-feature { display: flex; gap: 11px; align-items: flex-start; } .bursary16-page .dc-feature > i { flex: none; margin-top: 4px; width: 14px; text-align: center; font-size: 12px; color: var(--color-coral-500); } /* ── 5 · Audit-ready: the sand inset panel + the audit card ─────────────────────────────── */ .bursary16-page .dc-panel-sand { background: var(--color-page-bg); box-shadow: var(--dc-shadow-panel-soft); padding: clamp(36px, 4.5vw, 56px) clamp(28px, 4vw, 56px); } .bursary16-page .dc-audit-card { background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-4); padding: 20px 22px; box-shadow: 0 12px 32px rgba(15, 26, 79, 0.08); } .bursary16-page .dc-audit-cell { border: 1px solid var(--color-rule); border-radius: var(--radius-3); padding: 14px; } .bursary16-page .dc-audit-cell-ready { border: 1.5px solid var(--color-coral-500); position: relative; } .bursary16-page .dc-audit-tag { position: absolute; top: -9px; right: 10px; font-family: var(--font-label); font-weight: 600; font-size: 8.5px; line-height: normal; letter-spacing: 0.06em; color: #fff; background: var(--color-coral-500); border-radius: var(--radius-full); padding: 3px 8px; } .bursary16-page .dc-audit-foot { margin: 12px 0 0; padding-top: 11px; border-top: 1px solid var(--color-rule); } /* LONGHANDS, NOT THE `transition` SHORTHAND. This element is a direct child of a .reveal-stagger container, and the stagger works by setting per-child transition-delay. The shorthand RESETS transition-delay to 0s, and page CSS is unlayered while reveal.css compiles into @layer components — so unlayered wins regardless of specificity and every child animated at once. Same trap reveal.css's own header documents, reached from the child's side. */ /* ── 6 · What it does: aligned capability grid with ghost numerals ───────────────────────── */ /* Rows share one baseline and equal card height. The huge translucent numerals retain the process sequence, and the sixth card stays dark as the payoff. */ .bursary16-page .dc-cap { position: relative; overflow: hidden; border-radius: var(--radius-4\.5); padding: 28px 30px 30px; background: var(--color-paper); box-shadow: var(--shadow-soft); transition-property: transform, box-shadow; transition-duration: 250ms, 250ms; transition-timing-function: var(--dc-ease), ease; } .bursary16-page .dc-cap:hover { transform: translateY(-6px); box-shadow: var(--dc-shadow-lift); } .bursary16-page .dc-cap-dark { background: var(--color-dark-band); color: #fff; box-shadow: 0 22px 56px rgba(4, 8, 24, 0.3); } .bursary16-page .dc-cap-dark:hover { box-shadow: 0 30px 70px rgba(4, 8, 24, 0.4); } .bursary16-page .dc-cap > h3 { margin-top: 24px; } .bursary16-page .dc-ghost { position: absolute; right: 18px; top: 10px; font-family: var(--font-heading); font-weight: 700; font-size: 62px; line-height: 1; letter-spacing: -0.05em; color: var(--dc-fill); } .bursary16-page .dc-ghost-dark { color: rgba(255, 255, 255, 0.09); } .bursary16-page .dc-cap > * { position: relative; } .bursary16-page .dc-cap > .dc-ghost { position: absolute; } .bursary16-page .dc-payoff { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; font-family: var(--font-label); font-weight: 600; font-size: 10.5px; line-height: normal; letter-spacing: 0.07em; color: var(--color-coral-500); } .bursary16-page .dc-payoff i { font-size: 10px; } /* The apply→audit progress rule above the grid */ .bursary16-page .dc-flow { display: flex; align-items: center; gap: 14px; } .bursary16-page .dc-flow-line { flex: 1; height: 2px; border-radius: var(--radius-0\.5); background: linear-gradient(90deg, var(--color-coral-500), var(--dc-fill)); } .bursary16-page .dc-staff-rule { margin-top: 32px; padding-top: 30px; border-top: 1px solid var(--color-rule); } /* ── 8 · Cost calculator ────────────────────────────────────────────────────────────────── */ /* The one genuinely interactive device in the pair: a range input drives four figures. The section sits on coral-100, which is the only place either Bursary page uses a tinted band. */ .bursary16-page .dc-calc-panel { background: var(--color-paper); border-radius: var(--radius-5); box-shadow: 0 24px 60px rgba(15, 26, 79, 0.1); padding: clamp(28px, 3.4vw, 40px); } .bursary16-page .dc-badge-coral { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-label); font-weight: 600; font-size: 11px; line-height: normal; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: var(--color-coral-500); border-radius: var(--radius-full); padding: 7px 15px; } .bursary16-page .dc-badge-coral i { font-size: 10px; } .bursary16-page .dc-calc-value { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; } .bursary16-page .dc-calc-num { font-family: var(--font-heading); font-weight: 700; font-size: clamp(38px, 4.6vw, 58px); line-height: 1; letter-spacing: -0.035em; } .bursary16-page .dc-range { width: 100%; margin-top: 20px; accent-color: var(--color-coral-500); } .bursary16-page .dc-range-ends { display: flex; justify-content: space-between; margin-top: 6px; } .bursary16-page .dc-calc-rows { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--color-rule); display: flex; flex-direction: column; gap: 14px; } .bursary16-page .dc-calc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .bursary16-page .dc-calc-fig { font-family: var(--font-heading); font-weight: 700; font-size: 17px; line-height: normal; flex: none; } .bursary16-page .dc-calc-out { background: var(--color-dark-band); color: #fff; border-radius: var(--radius-4); padding: clamp(26px, 3vw, 34px); position: relative; overflow: hidden; } .bursary16-page .dc-calc-big { font-family: var(--font-heading); font-weight: 700; font-size: clamp(34px, 4.4vw, 54px); line-height: 1; letter-spacing: -0.04em; margin: 12px 0 0; } .bursary16-page .dc-calc-note { display: flex; align-items: flex-start; gap: 11px; margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.14); } .bursary16-page .dc-calc-note > i { flex: none; margin-top: 3px; font-size: 14px; color: var(--color-ok-green-bright); } /* the reference's glow here is 320px at right -120 / bottom -160 — smaller than the DS 520px corner glow, so it is page-local */ .bursary16-page .dc-glow-320 { position: absolute; width: 320px; height: 320px; right: -120px; bottom: -160px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--color-coral-500) 20%, transparent), transparent 62%); } /* ── 9 · DfE checklist: three tabs over one panel ───────────────────────────────────────── */ /* Driven by the DS `tabs` Stimulus controller from markup — its contract is all panels rendered, the first selected, the rest carrying `hidden` + the hidden attribute, so with JS off the first checklist still reads. */ .bursary16-page .dc-cl-tab { width: 100%; justify-content: flex-start; text-align: left; } .bursary16-page .dc-cl-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-2\.5); background: var(--color-page-bg); } .bursary16-page .dc-cl-icon i { font-size: 13px; color: var(--color-coral-500); } .bursary16-page .dc-cl-sub { display: block; margin-top: 2px; } .bursary16-page .dc-cl-text { min-width: 0; } .bursary16-page .dc-cl-panel { background: var(--color-paper); border-radius: var(--radius-4\.5); box-shadow: 0 18px 48px rgba(15, 26, 79, 0.08); padding: clamp(26px, 3.2vw, 38px) clamp(26px, 3.4vw, 44px); } .bursary16-page .dc-cl-head { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; } .bursary16-page .dc-cl-rule { flex: 1; height: 1px; background: var(--color-rule); } .bursary16-page .dc-check { display: flex; gap: 12px; align-items: flex-start; } .bursary16-page .dc-check-disc { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--color-coral-100); margin-top: 1px; } .bursary16-page .dc-check-disc i { font-size: 9px; color: var(--color-coral-500); } .bursary16-page .dc-cl-links { margin-top: 20px; background: var(--color-paper); border-radius: var(--radius-4); padding: 24px 28px; display: flex; align-items: center; gap: 16px 28px; flex-wrap: wrap; } .bursary16-page .dc-cl-links .dc-link i { font-size: 12px; } .bursary16-page .dc-spacer { flex: 1; } /* ── 11 · Results: the testimonial carousel ─────────────────────────────────────────────── */ /* The reference switches slides with display:none and auto-advances every 7s. Rebuilt here as a scroll-snap track (see page.js): touch, trackpad and keyboard scrolling come for free, and with JS off the track is still fully scrollable instead of stuck on slide 1. */ .bursary16-page .dc-carousel-frame { background: var(--color-paper); border-radius: var(--radius-5); box-shadow: 0 18px 48px rgba(15, 26, 79, 0.08); overflow: hidden; } .bursary16-page .dc-carousel { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; } .bursary16-page .dc-carousel::-webkit-scrollbar { display: none; } .bursary16-page .dc-carousel-track { display: flex; } .bursary16-page .dc-slide { flex: 0 0 100%; scroll-snap-align: start; margin: 0; padding: clamp(28px, 3.4vw, 44px) clamp(26px, 3.4vw, 48px); } .bursary16-page .dc-carousel-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 clamp(26px, 3.4vw, 48px) clamp(24px, 3vw, 34px); } .bursary16-page .dc-dots { display: flex; align-items: center; gap: 0; } .bursary16-page .dc-quote-glyph { font-size: 17px; color: var(--color-coral-500); } .bursary16-page .dc-quote-by { display: flex; align-items: center; gap: 13px; margin-top: 26px; } .bursary16-page .dc-avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--dc-fill); color: var(--color-ink-deep); font-family: var(--font-heading); font-weight: 700; font-size: 14px; line-height: normal; } /* ── 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) { .bursary16-page .dc-grid-emma, .bursary16-page .dc-grid-2, .bursary16-page .dc-grid-2s, .bursary16-page .dc-grid-3, .bursary16-page .dc-grid-clitems { grid-template-columns: minmax(0, 1fr); } }