/* Admissions+ for Independent Schools — page CSS * ============================================================================================ * GOAL: a FAITHFUL (1:1) reproduction of the reference * "Admissions Plus for Independent Schools.dc.html" (16 sections, ~600 inline styles) * without any inline styles. Every value below is READ OUT OF THE REFERENCE, not guessed — * the file was parsed section by section (see WORKFLOW.md §1). * * STRATEGY (WORKFLOW.md, and the reason it is worth the discipline): * 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 `.independent-page`, so this file is inert on any other page * (the pattern proven in production by /r/10 `.about-page`). * * HOW THE REFERENCE'S TOKENS COMPARE TO OURS (its own :root is one inline declaration on the * page root — line 41 of the reference): * IDENTICAL, so we use ours: * --ink #0F1A4F = ink-deep · --ink-soft #4D5B7F · --ink-mute #8893B0 · --accent #EC634B = * coral-500 · --accent-soft #FFE7DD = coral-100 · --paper #FFFFFF · --sand #F4F5F9 = * page-bg · --rule #E6E8EF = rule · --dark #0B1023 = dark-band · --navy #0F1A4F · * --mono 'IBM Plex Mono' = font-label. Status greens/ambers/reds match ok-green, * ok-green-bright (#34D07F), warn/ light-yellow. shadow-dark (0 30px 70px rgba(4,8,24,.4)) * is an exact match. * DIFFERENT, so declared below (owner's ruling: 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, chip/track grey (no token) * #9AA6C2 body copy ON DARK (decision 15 maps this to ink-mute) * #C9D1E6 list/bright copy ON DARK * #7E8AA6 dim mono labels ON DARK * #5C688A the dimmest copy ON DARK * #B9C3DC the audit pill's text ON DARK * grade chips: #8A6116/#FEF7E7 (C) and #B3402C/#FCE6E1 (D) — no tokens for either pair * chat success strip: #E9F7EE / #BFE7CC * Seven shadows have no token (listed as --dc-shadow-* below). * * GEOMETRY: the reference container is max-width 1200px with a 24px section gutter; our DS * is 1224px / 32px. Overridden HERE only — never in app/. * ============================================================================================ */ .independent-page { /* reference-only values, all read off the file */ --dc-sand-2: #E9ECF3; /* chip fills, progress tracks */ --dc-on-dark-body: var(--color-on-dark-body); /* body copy on dark */ --dc-on-dark-bright: var(--color-on-dark-bright); /* list items on dark */ --dc-on-dark-dim: var(--color-ink-mute); /* mono labels on dark */ --dc-on-dark-mute: var(--color-on-dark-faint); /* the dimmest caption on dark */ --dc-on-dark-pill: var(--color-on-dark-bright); /* the audit badge's label */ --dc-shadow-hero: 0 30px 80px rgba(15, 26, 79, 0.14); /* hero mock (our shadow-deep is .12) */ --dc-shadow-panel: 0 24px 60px rgba(15, 26, 79, 0.06); /* the white inset panels */ --dc-shadow-panel-8: 0 24px 60px rgba(15, 26, 79, 0.08); --dc-shadow-tool: 0 20px 60px rgba(15, 26, 79, 0.07); /* toolkit panel */ --dc-shadow-chat: 0 20px 50px rgba(15, 26, 79, 0.08); /* the family chat mock */ --dc-shadow-card: 0 14px 40px rgba(15, 26, 79, 0.07); /* journey + bursary cards */ --dc-shadow-flat: 0 10px 30px rgba(15, 26, 79, 0.05); /* the Bursary+ strip */ --dc-shadow-tile: 0 8px 22px rgba(15, 26, 79, 0.08); /* in-year icon tiles */ --dc-shadow-audit: 0 40px 90px rgba(4, 8, 24, 0.5); /* the audit card, on dark */ --dc-shadow-hover: 0 16px 40px rgba(15, 26, 79, 0.1); /* resource card hover */ --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 ────────────────────────────── */ /* Not a scale — the reference's own values, section by section, which our padding modifiers cannot express. `dc-py--` is deliberately literal so a later normalisation pass maps each one to a DS step or explains why it should not. */ .independent-page .dc-py-128-72 { padding-bottom: 72px; } .independent-page .dc-py-44-48 { padding-top: 44px; padding-bottom: 48px; } .independent-page .dc-py-48-64 { padding-top: 48px; padding-bottom: 64px; } .independent-page .dc-py-0-64 { padding-top: 0; padding-bottom: 64px; } .independent-page .dc-py-24-8 { padding-top: 24px; padding-bottom: 8px; } .independent-page .dc-py-104-44 { padding-top: 104px; padding-bottom: 44px; } .independent-page .dc-py-0-96 { padding-top: 0; padding-bottom: 96px; } .independent-page .dc-py-104 { padding-top: 104px; padding-bottom: 104px; } .independent-page .dc-py-24-104 { padding-top: 24px; padding-bottom: 104px; } .independent-page .dc-py-88 { padding-top: 88px; padding-bottom: 88px; } .independent-page .dc-py-40-32 { padding-top: 40px; padding-bottom: 32px; } .independent-page .dc-py-96-0 { padding-top: 96px; padding-bottom: 0; } .independent-page .dc-py-96 { padding-top: 96px; padding-bottom: 96px; } /* ── Display type: the reference clamps every headline individually ──────────────────────── */ /* Proxima 700 throughout (the quote is 500 — see .dc-q-24). Named by the clamp maximum; where two sections share a maximum but differ in tracking or minimum, the second carries a suffix rather than being silently rounded into the first. */ .independent-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(.independent-page [class*="dc-t-"]) { margin: 0; text-wrap: balance; } .independent-page .dc-t-80 { font-size: clamp(38px, 6vw, 80px); line-height: 1.0; letter-spacing: -0.04em; } /* closer */ .independent-page .dc-t-76 { font-size: clamp(44px, 5.6vw, 76px); line-height: 1.0; letter-spacing: -0.04em; } /* hero h1 */ .independent-page .dc-t-64 { font-size: clamp(36px, 5vw, 64px); line-height: 1.02; letter-spacing: -0.035em; } /* toolkit · journey · results */ .independent-page .dc-t-64n { font-size: clamp(40px, 5vw, 64px); line-height: 1; letter-spacing: -0.04em; } /* journey stage number */ .independent-page .dc-t-56 { font-size: clamp(32px, 4.4vw, 56px); line-height: 1.04; letter-spacing: -0.03em; } /* Emma */ .independent-page .dc-t-54 { font-size: clamp(30px, 4.4vw, 54px); line-height: 1.06; letter-spacing: -0.03em; } /* the problem */ .independent-page .dc-t-52 { font-size: clamp(30px, 4.2vw, 52px); line-height: 1.06; letter-spacing: -0.03em; } /* agents & boarding */ .independent-page .dc-t-52b { font-size: clamp(30px, 4.2vw, 52px); line-height: 1.05; letter-spacing: -0.032em; } /* Bursary+ */ .independent-page .dc-t-48 { font-size: clamp(30px, 3.8vw, 48px); line-height: 1.06; letter-spacing: -0.03em; } /* audit */ .independent-page .dc-t-48r { font-size: clamp(28px, 3.8vw, 48px); line-height: 1.05; letter-spacing: -0.028em; } /* resources */ .independent-page .dc-t-46 { font-size: clamp(28px, 3.8vw, 46px); line-height: 1.08; letter-spacing: -0.03em; } /* in-year */ .independent-page .dc-t-46f { font-size: clamp(28px, 3.8vw, 46px); line-height: 1.08; letter-spacing: -0.025em; } /* Emma for families */ .independent-page .dc-t-42 { font-size: clamp(26px, 3.4vw, 42px); line-height: 1.1; letter-spacing: -0.025em; } /* a day in the life */ .independent-page .dc-t-32 { font-size: clamp(23px, 2.7vw, 32px); line-height: 1.14; letter-spacing: -0.02em; } /* journey stage title */ .independent-page .dc-t-30 { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.12; letter-spacing: -0.018em; } /* toolkit panel title */ .independent-page .dc-t-20 { font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; } /* "one pipeline" card */ .independent-page .dc-t-17 { font-size: 17px; line-height: 1.25; letter-spacing: -0.01em; } /* card / strip titles */ .independent-page .dc-t-18 { font-size: 18px; line-height: 1.25; letter-spacing: -0.012em; } /* resource card titles */ .independent-page .dc-t-155 { font-size: 15.5px; line-height: 1.3; letter-spacing: -0.012em; } /* in-year feature titles */ .independent-page .dc-t-15 { font-size: 15px; line-height: 1.3; letter-spacing: -0.01em; } /* Bursary+ step titles */ .independent-page .dc-t-16 { font-size: 16px; line-height: 1.3; letter-spacing: -0.01em; } /* the Bursary+ strip title */ .independent-page .dc-q-24 { font-family: var(--font-heading); font-weight: 500; font-size: clamp(18px, 2vw, 24px); line-height: 1.42; letter-spacing: -0.012em; text-wrap: pretty; } /* ── Body copy steps (Inter), named by px ───────────────────────────────────────────────── */ .independent-page .dc-lede { font-size: clamp(16px, 1.8vw, 19px); line-height: 1.55; color: var(--color-ink-soft); margin: 0; } .independent-page .dc-lede-18 { font-size: clamp(15px, 1.5vw, 18px); line-height: 1.6; margin: 0; } .independent-page .dc-lede-17 { font-size: 17px; line-height: 1.6; color: var(--color-ink-soft); margin: 0; } .independent-page .dc-body-165{ font-size: 16.5px; line-height: 1.6; } .independent-page .dc-body-16 { font-size: 16px; line-height: 1.6; color: var(--color-ink-soft); margin: 0; } .independent-page .dc-body-155{ font-size: 15.5px; line-height: 1.6; color: var(--color-ink-soft); margin: 0; } .independent-page .dc-body-14 { font-size: 14px; line-height: 1.5; color: var(--color-ink-soft); margin: 0; } .independent-page .dc-body-135{ font-size: 13.5px; line-height: 1.5; color: var(--color-ink-soft); } .independent-page .dc-body-13 { font-size: 13px; line-height: 1.5; color: var(--color-ink-soft); } .independent-page .dc-body-125{ font-size: 12.5px; line-height: 1.45; color: var(--color-ink-soft); margin: 0; } .independent-page .dc-body-12 { font-size: 12px; line-height: 1.45; margin: 0; } :where(.independent-page .dc-body-12) { color: var(--color-ink-soft); } /* default (§2 rule 5) */ .independent-page .dc-closer-lede { font-size: clamp(17px, 2vw, 21px); line-height: 1.5; color: rgba(255,255,255,0.92); } /* ── The mono labels (IBM Plex Mono 500 = our font-label) ────────────────────────────────── */ /* Confirmed against the reference: the eyebrow really is the mono face at 12.5px / 0.08em, which is exactly font-label + text-label-l + tracking-label. Only the hero's is different (12px, 0.09em, ink-mute); every other section eyebrow is coral. */ .independent-page [class*="dc-label-"], .independent-page .dc-eyebrow { font-family: var(--font-label); font-weight: 500; text-transform: uppercase; } .independent-page .dc-eyebrow { display: block; font-size: 12.5px; letter-spacing: 0.08em; color: var(--color-coral-500); } .independent-page .dc-eyebrow-hero { font-size: 12px; letter-spacing: 0.09em; color: var(--color-ink-mute); } .independent-page .dc-eyebrow-row { display: inline-flex; align-items: center; gap: 11px; } .independent-page .dc-label-11 { font-size: 11px; letter-spacing: 0.08em; } .independent-page .dc-label-105 { font-size: 10.5px; letter-spacing: 0.08em; color: var(--color-ink-mute); } .independent-page .dc-label-10 { font-size: 10px; letter-spacing: 0.08em; color: var(--color-ink-mute); } .independent-page .dc-label-95 { font-size: 9.5px; letter-spacing: 0.07em; color: var(--color-ink-mute); } .independent-page .dc-label-9 { font-size: 9px; letter-spacing: 0.07em; color: var(--color-ink-mute); } /* ── Surfaces ───────────────────────────────────────────────────────────────────────────── */ /* The reference has ONE full-bleed dark band (Emma) and three inset dark PANELS, plus three inset white panels. Both live here for now: repetition inside one page is not the cross-page repetition that earns a DS class. If a second page family confirms the dark inset panel, .cta-section-panel gets a dark sibling. */ .independent-page .dc-panel { max-width: 1200px; margin: 0 auto; border-radius: var(--radius-5\.5); position: relative; overflow: hidden; } .independent-page .dc-panel-dark { background: var(--color-dark-band); color: #fff; padding: clamp(56px, 7vw, 96px) clamp(28px, 5vw, 72px); } .independent-page .dc-panel-dark-sm { padding: clamp(48px, 6vw, 80px) clamp(28px, 5vw, 72px); } .independent-page .dc-panel-paper { background: var(--color-paper); box-shadow: var(--dc-shadow-panel); padding: clamp(36px, 4.5vw, 56px) clamp(28px, 4vw, 56px); } .independent-page .dc-panel-widget { background: var(--color-paper); box-shadow: var(--dc-shadow-panel); padding: clamp(44px, 5.5vw, 72px) clamp(28px, 5vw, 64px); } .independent-page .dc-panel-soft { background: var(--color-page-bg); padding: clamp(28px, 3.6vw, 48px); } .independent-page .dc-card { background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-4); padding: 24px 26px; } .independent-page .dc-card-mock { border: 0; border-radius: var(--radius-4\.5); box-shadow: var(--dc-shadow-hero); padding: 24px 26px; } .independent-page .dc-card-lift { border: 0; border-radius: var(--radius-4); box-shadow: var(--dc-shadow-card); padding: 22px 24px; } .independent-page .dc-card-lift-24 { padding: 24px 26px; } /* the four Bursary+ cards */ .independent-page .dc-card-lift-8 { border: 0; border-radius: var(--radius-4\.5); box-shadow: var(--dc-shadow-panel-8); padding: 28px 30px; } .independent-page .dc-card-flat { background: var(--color-page-bg); border: 1px solid var(--color-rule); } .independent-page .dc-card-dark { background: var(--color-dark-band); border: 0; border-radius: var(--radius-4); padding: 22px 24px; color: #fff; } .independent-page .dc-card-quote { background: var(--color-dark-band); border: 0; border-radius: var(--radius-5); padding: clamp(32px, 4vw, 48px); color: #fff; display: flex; flex-direction: column; } /* on-dark copy colours */ .independent-page .dc-on-dark-body { color: var(--dc-on-dark-body); } .independent-page .dc-on-dark-bright { color: var(--dc-on-dark-bright); } .independent-page .dc-on-dark-dim { color: var(--dc-on-dark-dim); } .independent-page .dc-on-dark-mute { color: var(--dc-on-dark-mute); } /* ── Grids, measured off the reference ──────────────────────────────────────────────────── */ .independent-page .dc-grid { display: grid; } .independent-page .dc-grid-hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 72px); align-items: center; } .independent-page .dc-grid-problem { grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); gap: clamp(14px, 2vw, 26px); align-items: stretch; } .independent-page .dc-grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; } .independent-page .dc-grid-journey { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(28px, 4vw, 56px); align-items: start; } .independent-page .dc-grid-locked { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; } .independent-page .dc-grid-inyear { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; } .independent-page .dc-grid-emma { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; } .independent-page .dc-grid-widget { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 4.5vw, 64px); align-items: center; } .independent-page .dc-grid-results { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(20px, 2.5vw, 32px); align-items: stretch; } .independent-page .dc-grid-bursary { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; } .independent-page .dc-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .independent-page .dc-grid-pairs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 22px; } .independent-page .dc-measure-820 { max-width: 820px; } .independent-page .dc-measure-780 { max-width: 780px; } .independent-page .dc-measure-720 { max-width: 720px; } .independent-page .dc-measure-640 { max-width: 640px; } /* the reference measures several paragraphs in `ch` rather than px — kept as `ch` so the wrap point matches at any size */ .independent-page .dc-measure-50c { max-width: 50ch; } .independent-page .dc-measure-52c { max-width: 52ch; } .independent-page .dc-measure-54c { max-width: 54ch; } .independent-page .dc-measure-56c { max-width: 56ch; } .independent-page .dc-measure-58c { max-width: 58ch; } .independent-page .dc-measure-62c { max-width: 62ch; } .independent-page .dc-measure-44c { max-width: 44ch; } .independent-page .dc-measure-24c { max-width: 24ch; } .independent-page .dc-measure-22c { max-width: 22ch; } /* ── Responsive: the reference's ONE collapse rule, at 900px ───────────────────────────────── This block used to collapse eleven grids and repad three panels at 991px, a value this reference never uses. Read out of its own stylesheet, its ENTIRE content scale is: 900 [data-inyeargrid] → 1 col and nothing else. Its other media rules are chrome we do not port (1120 and 940 hide nav items, 1080 and 560 reflow the footer grid). Every other grid on the page is a fixed `1.15fr 1fr` or `repeat(4, 1fr)` all the way down, and its panels are padded with `clamp()` rather than breakpoints — so the 991/768/767/480 rules were all divergence, added to make a phone better. Removed rather than moved: there is no reference breakpoint to move them to. The squeeze this leaves below ~900px is real and is recorded in STATUS.md §5; improving it is a tuning decision for after the port (WORKFLOW §5b). Nothing here changes above 900px, so no section height moves at the 1440x900 fidelity width. */ @media (max-width: 900px) { .independent-page .dc-grid-inyear { grid-template-columns: minmax(0, 1fr); } } /* ── Literal spacing helpers ─────────────────────────────────────────────────────────────── */ /* The reference's rhythm is full of odd values (18, 22, 26, 30, 34px) that the 4px Tailwind scale cannot express, and `mt-4.5`-style dynamic steps are not in the compiled surface because prototypes/ is not a Tailwind scan source (WORKFLOW.md §4 — the same constraint a CMS block has). So the odd ones are literal here; every EVEN multiple-of-4 gap in the markup still uses a plain utility. */ /* The class audit (WORKFLOW.md §4) showed which "ordinary" steps are NOT in the compiled surface either: mt-1.5 / mt-2.5 / mt-7 / mt-9 / mt-11 / mb-1.5 / mb-2.5 / mb-9 / gap-7 / pt-7 all render as nothing, as do arbitrary values like max-w-[130px]. They are literal here for the same reason — this is what a CMS block would hit. */ .independent-page .dc-mt-6 { margin-top: 6px; } .independent-page .dc-mt-10 { margin-top: 10px; } .independent-page .dc-mt-14 { margin-top: 14px; } .independent-page .dc-mt-18 { margin-top: 18px; } .independent-page .dc-mt-22 { margin-top: 22px; } .independent-page .dc-mt-28 { margin-top: 28px; } .independent-page .dc-mt-30 { margin-top: 30px; } .independent-page .dc-mt-36 { margin-top: 36px; } .independent-page .dc-mt-52c { margin-top: clamp(36px, 4.5vw, 52px); } .independent-page .dc-mb-6 { margin-bottom: 6px; } .independent-page .dc-mb-10 { margin-bottom: 10px; } .independent-page .dc-mb-14 { margin-bottom: 14px; } .independent-page .dc-mb-18 { margin-bottom: 18px; } .independent-page .dc-mb-20 { margin-bottom: 20px; } .independent-page .dc-mb-26 { margin-bottom: 26px; } .independent-page .dc-mb-36 { margin-bottom: 36px; } .independent-page .dc-pt-28 { padding-top: 28px; } .independent-page .dc-gap-9 { gap: 9px; } .independent-page .dc-gap-11 { gap: 11px; } .independent-page .dc-gap-15 { gap: 15px; } .independent-page .dc-gap-18 { gap: 18px; } .independent-page .dc-gap-22 { gap: 22px; } .independent-page .dc-gap-28 { gap: 28px; } .independent-page .dc-w-130 { max-width: 130px; } .independent-page .dc-min-240 { min-width: 240px; } /* ── Glows: the DS .section-glow with the reference's sizes, corners and blurs ───────────── */ /* .section-glow is a fixed 520px at -140/-180; this page uses five different sizes and one bottom-anchored corner. The coral alpha stays the DS 16% everywhere except the hero, which is visibly lighter in the reference (11%). */ .independent-page .dc-glow-720 { width: 720px; height: 720px; } .independent-page .dc-glow-520 { width: 520px; height: 520px; } .independent-page .dc-glow-640 { width: 640px; height: 640px; } .independent-page .dc-glow-560 { width: 560px; height: 560px; } .independent-page .dc-glow-hero { right: -240px; top: -320px; filter: none; background: radial-gradient(circle, color-mix(in srgb, var(--color-coral-500) 11%, transparent), transparent 62%); } .independent-page .dc-glow-problem { right: -160px; top: -220px; filter: blur(14px); } .independent-page .dc-glow-agents { right: -160px; bottom: -240px; filter: blur(14px); } .independent-page .dc-glow-emma { left: -220px; top: -200px; filter: blur(12px); } /* ── Small shared devices ────────────────────────────────────────────────────────────────── */ /* the live dot is deliberately STATIC — the reference never animates it */ .independent-page .dc-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--color-ok-green-bright); flex: none; } .independent-page .dc-dot-sm { width: 6px; height: 6px; } /* Emma's note inside a card / panel — light grey strip, coral disc, one line. Carries no margin of its own: the reference uses 22px in the journey and 24px in the toolkit, so the gap is set at the use site with one of the literal spacing helpers below. */ .independent-page .dc-emma-note { display: flex; align-items: center; gap: 11px; padding: 13px 17px; background: var(--color-page-bg); border-radius: var(--radius-3); } .independent-page .dc-emma-note-paper { background: var(--color-paper); } .independent-page .dc-emma-note span:last-child { font-size: 13.5px; line-height: 1.45; font-weight: 500; color: var(--color-ink-deep); } /* the hairline-topped footer line inside a mock card */ .independent-page .dc-mock-foot { display: flex; align-items: center; gap: 9px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--color-rule); } /* icon tile — a rounded square holding one coral glyph (in-year, Bursary+, the journey strip) */ .independent-page .dc-tile { flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-3); background: var(--color-paper); box-shadow: var(--dc-shadow-tile); width: 40px; height: 40px; } .independent-page .dc-tile i { font-size: 15px; color: var(--color-coral-500); } .independent-page .dc-tile-coral { background: var(--color-coral-100); box-shadow: none; } .independent-page .dc-tile-38 { width: 38px; height: 38px; border-radius: var(--radius-2\.5); } .independent-page .dc-tile-34 { width: 34px; height: 34px; border-radius: var(--radius-2\.5); background: var(--color-page-bg); box-shadow: none; } .independent-page .dc-tile-34 i { font-size: 13px; } /* icon + copy row (in-year, the widget's four points, the toolkit bullets) */ .independent-page .dc-feature { display: flex; gap: 14px; align-items: flex-start; } .independent-page .dc-bullet { display: flex; gap: 10px; align-items: flex-start; } .independent-page .dc-bullet > i { flex: none; margin-top: 5px; font-size: 11px; color: var(--color-coral-500); } .independent-page .dc-bullet-sm > i { font-size: 10px; } /* the "your team never" crosses inside the journey's dark card */ .independent-page .dc-bullet-dark > i { font-size: 11px; margin-top: 4px; color: var(--dc-on-dark-mute); } /* chips — the reference's pill vocabulary. Coloured variants for the two dark panels. */ .independent-page .dc-chip { display: inline-flex; align-items: center; gap: 8px; border-radius: var(--radius-full); padding: 7px 13px; font-family: var(--font-heading); font-weight: 600; font-size: 13px; } /* None of the reference's chips, flags or grade pills declares a line-height, so they render at `normal`; the DS .badge they ride on sets one, which would quietly make every chip row taller. */ .independent-page .dc-chip, .independent-page .dc-badge, .independent-page .dc-offer-flag, .independent-page .dc-grade-chip, .independent-page .dc-entry-chip, .independent-page .dc-chat-reply, .independent-page .dc-locked-pill { line-height: normal; } .independent-page .dc-chip-dark { color: var(--dc-on-dark-body); border: 1px solid rgba(255,255,255,0.14); } .independent-page .dc-chip-dark-500 { font-weight: 500; font-size: 12px; color: var(--dc-on-dark-bright); border: 1px solid rgba(255,255,255,0.16); } .independent-page .dc-chip-row { display: flex; flex-wrap: wrap; gap: 8px; } /* the two badge-shaped section openers (audit, agents, Bursary+, "NEW") */ .independent-page .dc-badge { display: inline-flex; align-items: center; gap: 9px; border-radius: var(--radius-full); padding: 7px 14px; font-family: var(--font-label); font-weight: 500; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; } .independent-page .dc-badge-outline { color: var(--dc-on-dark-pill); border: 1px solid rgba(255,255,255,0.18); } .independent-page .dc-badge-coral { color: #fff; background: var(--color-coral-500); } .independent-page .dc-badge-wash { color: var(--color-coral-500); background: var(--color-coral-100); font-size: 11px; letter-spacing: 0.08em; padding: 6px 13px; } .independent-page .dc-badge-new { color: #fff; background: var(--color-coral-500); font-size: 9px; letter-spacing: 0.07em; padding: 4px 9px; } /* ── 1 · Hero: the offer mock ───────────────────────────────────────────────────────────── */ .independent-page .dc-offer-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--color-rule); border-radius: var(--radius-3); padding: 12px 14px; } .independent-page .dc-offer-row-on { border: 1.5px solid var(--color-coral-500); background: var(--color-coral-100); } .independent-page .dc-offer-row-off { border-style: dashed; } .independent-page .dc-offer-name { font-family: var(--font-heading); font-weight: 600; font-size: 13px; color: var(--color-ink-deep); } .independent-page .dc-offer-name-off { color: var(--color-ink-soft); } .independent-page .dc-offer-flag { font-family: var(--font-label); font-weight: 600; font-size: 9px; letter-spacing: 0.06em; color: var(--color-ok-green); background: #DFF1E5; border-radius: var(--radius-full); padding: 4px 9px; } .independent-page .dc-offer-flag-coral { color: var(--color-coral-500); background: transparent; padding: 0; } /* the hero's "grade your journey" link */ .independent-page .dc-link-coral { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-heading); font-weight: 600; font-size: 14px; color: var(--color-coral-500); text-decoration: none; } .independent-page .dc-link-coral:hover { color: var(--color-ink-deep); } .independent-page .dc-link-inline { color: var(--color-coral-500); font-weight: 600; white-space: nowrap; } /* ── 2 · Social proof: the marquee ──────────────────────────────────────────────────────── */ /* The DS owns the unframed row, equal-height cards, gap and 8%/92% edge mask. The artwork remains 132 x 62 and this page retains its 55s cycle. */ .independent-page .marquee-track { animation-duration: 55s; } .independent-page .marquee-item img { height: 62px; width: 132px; } /* The artwork stays 132 x 62; the shared cards handle the narrow viewport. */ /* ── 3 · The patchwork problem ──────────────────────────────────────────────────────────── */ .independent-page .dc-compare-old { position: relative; display: flex; flex-direction: column; background-color: rgb(255 255 255 / 0.025); border: 1px dashed rgb(255 255 255 / 0.2); border-radius: var(--radius-4); padding: 26px; } .independent-page .dc-compare-new { position: relative; display: flex; flex-direction: column; overflow: hidden; background-color: rgb(236 99 75 / 0.1); border: 1px solid rgb(236 99 75 / 0.48); border-radius: var(--radius-4); padding: 26px; } .independent-page .dc-compare-new::before { content: ""; position: absolute; width: 190px; height: 190px; top: -96px; right: -76px; background-color: rgb(236 99 75 / 0.1); border-radius: var(--radius-full); pointer-events: none; } .independent-page .dc-compare-head { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 20px; } .independent-page .dc-compare-title { margin: 5px 0 0; color: var(--color-paper); font-family: var(--font-heading); font-weight: 700; font-size: 20px; line-height: 1.15; letter-spacing: -0.012em; } .independent-page .dc-compare-state { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; color: var(--dc-on-dark-dim); background-color: rgb(255 255 255 / 0.06); border-radius: var(--radius-full); font-family: var(--font-heading); font-weight: 600; font-size: 11px; line-height: 1; } .independent-page .dc-compare-state-live { color: var(--color-ok-green-bright); background-color: rgb(52 208 127 / 0.12); } .independent-page .dc-patchwork-map { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin-top: auto; padding: 16px; background-color: rgb(255 255 255 / 0.035); background-image: radial-gradient(circle, rgb(255 255 255 / 0.12) 1px, transparent 1px); background-size: 16px 16px; border-radius: var(--radius-3); } .independent-page .dc-patchwork-map::before, .independent-page .dc-patchwork-map::after { content: ""; position: absolute; z-index: 0; border-color: rgb(255 255 255 / 0.2); border-style: dashed; } .independent-page .dc-patchwork-map::before { top: 16%; bottom: 16%; left: 50%; border-width: 0 0 0 1px; } .independent-page .dc-patchwork-map::after { top: 50%; right: 16%; left: 16%; border-width: 1px 0 0; } .independent-page .dc-patch-node { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; min-width: 0; padding: 10px 11px; color: var(--dc-on-dark-body); background-color: color-mix(in oklab, var(--color-dark-band) 78%, var(--color-ink-royal)); border: 1px solid rgb(255 255 255 / 0.13); border-radius: var(--radius-2); font-family: var(--font-heading); font-weight: 600; font-size: 12px; line-height: 1.15; } .independent-page .dc-patch-node > i { --fa-primary-color: var(--dc-on-dark-body); --fa-secondary-color: var(--dc-on-dark-dim); --fa-secondary-opacity: 0.75; flex: none; width: 18px; color: var(--dc-on-dark-dim); font-size: 14px; text-align: center; } .independent-page .dc-patch-node-mis { grid-column: 1 / -1; justify-self: center; width: min(88%, 320px); } .independent-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-color: var(--color-dark-band); border: 1px solid rgb(236 99 75 / 0.35); border-radius: var(--radius-full); transform: translate(-50%, -50%); } .independent-page .dc-compare-arrow { position: relative; display: flex; align-items: center; justify-content: center; color: var(--color-paper); } .independent-page .dc-compare-arrow::before { content: ""; position: absolute; right: 0; left: 0; height: 2px; background-image: linear-gradient(90deg, rgb(255 255 255 / 0.2), var(--color-coral-500)); } .independent-page .dc-compare-arrow > i { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; background-color: var(--color-coral-500); border: 5px solid var(--color-dark-band); border-radius: var(--radius-full); font-size: 14px; } .independent-page .dc-pipeline-copy { position: relative; z-index: 1; max-width: 48ch; color: var(--dc-on-dark-body); } .independent-page .dc-pipeline-flow { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: auto; padding-top: 24px; } .independent-page .dc-pipeline-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; color: var(--color-paper); font-family: var(--font-heading); font-size: 11.5px; line-height: 1.1; text-align: center; } .independent-page .dc-pipeline-step:not(:last-child)::after { content: ""; position: absolute; z-index: -1; top: 19px; left: calc(50% + 19px); width: calc(100% - 38px); height: 2px; background-color: var(--color-coral-500); } .independent-page .dc-pipeline-step > span { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--color-coral-500); background-color: rgb(255 255 255 / 0.07); border: 1px solid rgb(236 99 75 / 0.42); border-radius: var(--radius-full); font-size: 15px; } .independent-page .dc-pipeline-step > span > i { --fa-primary-color: var(--color-coral-500); --fa-secondary-color: var(--color-paper); --fa-secondary-opacity: 0.75; } .independent-page .dc-pipeline-emma { position: relative; z-index: 1; display: flex; align-items: center; gap: 11px; margin-top: 20px; padding: 11px 13px; background-color: rgb(255 255 255 / 0.06); border: 1px solid rgb(255 255 255 / 0.11); border-radius: var(--radius-3); } .independent-page .dc-pipeline-emma .icon-emma { flex: none; width: 32px; height: 32px; } .independent-page .dc-pipeline-emma > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; color: var(--color-paper); font-family: var(--font-heading); font-size: 13px; line-height: 1.2; } .independent-page .dc-pipeline-emma small { color: var(--dc-on-dark-body); font-family: var(--font-sans); font-size: 11px; } /* ── 4 · A day in the life: the two timelines ───────────────────────────────────────────── */ .independent-page .dc-timeline { display: flex; flex-direction: column; } .independent-page .dc-timeline-row { display: flex; gap: 12px; } .independent-page .dc-timeline-rail { display: flex; flex-direction: column; align-items: center; } .independent-page .dc-timeline-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; background: var(--color-ink-mute); } .independent-page .dc-timeline-dot-ok { background: var(--color-ok-green-bright); } .independent-page .dc-timeline-dot-end { background: var(--color-coral-500); } .independent-page .dc-timeline-line { width: 1.5px; flex: 1; background: var(--color-rule); } .independent-page .dc-timeline-line-dark { background: rgba(255, 255, 255, 0.16); } .independent-page .dc-timeline-body { padding-bottom: 14px; } /* the reference sets no line-height on these labels (so: `normal`), and 1.4 on the very last row of the Admissions+ card only — measured, and worth keeping because 13px × 4 rows × 2 cards is where a wrong leading shows up as a whole section running long */ .independent-page .dc-timeline-label { font-family: var(--font-heading); font-weight: 600; font-size: 13px; line-height: normal; color: var(--color-ink-deep); } .independent-page .dc-timeline-label-last { line-height: 1.4; } .independent-page .dc-timeline-label-end { color: var(--color-coral-500); } .independent-page .dc-timeline-label-dark { color: #fff; } .independent-page .dc-timeline-flag { font-family: var(--font-label); font-weight: 500; font-size: 9.5px; color: var(--color-ok-green-bright); margin-left: 6px; } .independent-page .dc-entry-chip { font-family: var(--font-label); font-weight: 600; font-size: 9.5px; color: var(--color-ink-soft); background: var(--dc-sand-2); border-radius: var(--radius-1); padding: 3px 7px; } /* the same chip as a pill — the toolkit's ADD-ON / AUTUMN 2026 tags */ .independent-page .dc-entry-chip-pill { border-radius: var(--radius-full); padding: 4px 9px; } .independent-page .dc-entry-chip-coral { color: var(--color-coral-500); background: var(--color-coral-100); } /* MIS note is page-specific; layout and logo cards are shared in `_shared/cards.css`. */ .independent-page .dc-mis-note { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--color-ink-deep); border-radius: var(--radius-3\.5); padding: 16px 24px; margin-top: 12px; } /* ── 8 · Journey: a 7-stage stepper (NOT a stack, and not a carousel) ───────────────────── */ /* Measured: one stage is shown at a time behind a 7-node progress rail with prev/next, so the section is ~1030px in the reference rather than the ~5,000px a stacked list would be. Built on the DS tabs controller (nodes = tabs, stages = panels): with JS off stage 01 shows and the rail is static, which is the correct progressive-enhancement floor. */ .independent-page .dc-steps { position: relative; margin-bottom: 40px; } .independent-page .dc-steps-nodes { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; } .independent-page .dc-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 2px; background: none; border: 0; cursor: pointer; text-decoration: none; font-family: var(--font-heading); font-weight: 600; font-size: 11.5px; line-height: 1.3; text-align: center; color: var(--color-ink-mute); transition: color 300ms ease; } .independent-page .dc-step:not(:last-child)::before, .independent-page .dc-step:not(:last-child)::after { content: ""; position: absolute; z-index: 0; top: 11px; left: 50%; width: calc(100% + 6px); height: 2px; border-radius: var(--radius-0\.5); } .independent-page .dc-step:not(:last-child)::before { background: var(--dc-sand-2); } .independent-page .dc-step:not(:last-child)::after { background: var(--color-coral-500); transform: scaleX(0); transform-origin: left center; transition: transform 500ms var(--dc-ease); } .independent-page .dc-step-passed:not(:last-child)::after { transform: scaleX(1); } .independent-page .dc-step-dot { position: relative; z-index: 1; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--color-paper); border: 2px solid var(--dc-sand-2); transition: background 300ms ease, border-color 300ms ease, transform 300ms ease; } .independent-page .dc-step-dot::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dc-sand-2); } .independent-page .dc-step-passed .dc-step-dot { background: var(--color-coral-500); border-color: var(--color-coral-500); } .independent-page .dc-step-passed .dc-step-dot::after { background: var(--color-paper); } .independent-page .dc-step[aria-selected="true"] { color: var(--color-ink-deep); } .independent-page .dc-step[aria-selected="true"] .dc-step-dot { background: var(--color-coral-500); border-color: var(--color-coral-500); transform: scale(1.25); } .independent-page .dc-step[aria-selected="true"] .dc-step-dot::after { background: #fff; } /* the Bursary+ cross-sell strip at the foot of the journey panel */ .independent-page .dc-crosslink { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; text-decoration: none; color: inherit; margin-top: 18px; padding: 18px 22px; background: var(--color-paper); border-radius: var(--radius-3\.5); box-shadow: var(--dc-shadow-flat); transition: transform 200ms var(--dc-ease); } .independent-page .dc-crosslink:hover { transform: translateY(-2px); } /* ── 9 · Agents & Boarding: the two locked mocks ────────────────────────────────────────── */ .independent-page .dc-locked { position: relative; border-radius: var(--radius-4); overflow: hidden; } .independent-page .dc-locked-mock { filter: blur(7px); transform: scale(1.04); background: #fff; padding: 22px; display: flex; flex-direction: column; gap: 10px; } .independent-page .dc-locked-veil { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .independent-page .dc-locked-pill { display: inline-flex; align-items: center; gap: 8px; background: rgba(11, 16, 35, 0.82); color: #fff; border-radius: var(--radius-full); padding: 11px 20px; font-family: var(--font-heading); font-weight: 600; font-size: 13px; } .independent-page .dc-locked-pill i { font-size: 11px; color: var(--color-coral-500); } .independent-page .dc-locked-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--color-rule); } .independent-page .dc-locked-row:last-child { border-bottom: 0; } .independent-page .dc-meter { height: 8px; background: var(--dc-sand-2); border-radius: var(--radius-1); margin-top: 5px; } .independent-page .dc-meter > span { display: block; height: 100%; border-radius: var(--radius-1); background: var(--color-ink-deep); } .independent-page .dc-meter-coral > span { background: var(--color-coral-500); } .independent-page .dc-meter-92 > span { width: 92%; } .independent-page .dc-meter-78 > span { width: 78%; } .independent-page .dc-meter-64 > span { width: 64%; } .independent-page .dc-meter-head { display: flex; justify-content: space-between; font-family: var(--font-label); font-weight: 500; font-size: 11px; color: var(--color-ink-soft); } /* ── 11 · Emma: the stat pill on the dark band ──────────────────────────────────────────── */ .independent-page .dc-stat-pill { display: inline-flex; align-items: center; gap: 18px; } .independent-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); } .independent-page .dc-emma-tabs { flex-wrap: wrap; } .independent-page .dc-emma-tabs .tab { white-space: nowrap; } /* The DS .prompt-card was extracted from exactly this device, so it already matches the reference: 18px radius, shadow-dark, the mono label, the pulsing 34px coral avatar, the min-height on the typed line, the caret, the reply chip and 12.5px pills above a rule. The only measurable delta on this page is the card's own padding (DS 20/24/16 → 22/24/18). */ .independent-page .prompt-card { padding: 22px 24px 18px; } /* the guardrail list: the reference's on-dark cross is #9AA6C2, one step brighter than the DS ink-mute, and its rows sit 15px apart rather than 16 */ .independent-page .section-dark .check-list-no > i { color: var(--dc-on-dark-body); } /* ── 12 · Emma for families: the chat mock ──────────────────────────────────────────────── */ .independent-page .dc-chat { background: var(--color-page-bg); border: 1px solid var(--color-rule); border-radius: var(--radius-4\.5); padding: 18px; box-shadow: var(--dc-shadow-chat); } .independent-page .dc-chat-head { display: flex; align-items: center; gap: 9px; padding: 0 4px 12px; border-bottom: 1px solid var(--color-rule); } .independent-page .dc-chat-body { display: flex; flex-direction: column; gap: 9px; padding-top: 14px; } .independent-page .dc-bubble { font-size: 13.5px; line-height: 1.5; border-radius: var(--radius-3\.5); padding: 10px 14px; margin: 0; } .independent-page .dc-bubble-us { align-self: flex-end; max-width: 88%; background: var(--color-ink-deep); color: #fff; } .independent-page .dc-bubble-them { align-self: flex-start; max-width: 92%; background: var(--color-paper); border: 1px solid var(--color-rule); color: var(--color-ink-deep); } .independent-page .dc-bubble-source { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; font-family: var(--font-label); font-weight: 500; font-size: 10.5px; color: var(--color-coral-500); background: var(--color-coral-100); border-radius: var(--radius-full); padding: 4px 11px; text-decoration: none; } .independent-page .dc-chat-replies { align-self: flex-start; display: flex; gap: 7px; flex-wrap: wrap; } .independent-page .dc-chat-reply { font-family: var(--font-heading); font-weight: 600; font-size: 12px; border-radius: var(--radius-full); padding: 7px 14px; color: #fff; background: var(--color-coral-500); } .independent-page .dc-chat-reply-off { color: var(--color-ink-soft); background: var(--color-paper); border: 1px solid var(--color-rule); } /* the "new enquiry created" confirmation — a soft green strip with no matching token pair */ .independent-page .dc-chat-created { display: flex; align-items: center; gap: 10px; margin-top: 4px; background: #E9F7EE; border: 1px solid #BFE7CC; border-radius: var(--radius-3); padding: 10px 13px; } .independent-page .dc-chat-created i { flex: none; font-size: 12px; color: var(--color-ok-green); } .independent-page .dc-chat-foot { font-family: var(--font-label); font-weight: 400; font-size: 9.5px; letter-spacing: 0.05em; color: var(--color-ink-mute); text-align: center; padding-top: 12px; text-transform: uppercase; } /* ── 13 · Results: quote carousel + stat column + ticker ────────────────────────────────── */ .independent-page .dc-quote-controls { display: flex; align-items: center; gap: 16px; margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.12); } .independent-page .dc-stat-col { display: flex; flex-direction: column; gap: 12px; } .independent-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; } .independent-page .dc-stat-num { font-family: var(--font-heading); font-weight: 700; font-size: clamp(30px, 3vw, 40px); line-height: 1.1; letter-spacing: -0.02em; color: var(--color-ink-deep); margin: 0; } .independent-page .dc-stat-label { font-family: var(--font-heading); font-weight: 600; font-size: 14px; color: var(--color-ink-deep); margin-top: 8px; } .independent-page .dc-ticker { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 14px; padding: 18px 26px; background: var(--color-page-bg); border: 1px solid var(--color-rule); border-radius: var(--radius-4); } .independent-page .dc-ticker-label { flex: none; display: inline-flex; align-items: center; gap: 8px; } .independent-page .dc-ticker-text { flex: 1; min-width: 260px; font-size: 14px; line-height: 1.45; font-weight: 500; color: var(--color-ink-deep); } /* ── 14 · Bursary+ ──────────────────────────────────────────────────────────────────────── */ .independent-page .dc-step-num { font-family: var(--font-label); font-weight: 700; font-size: 9.5px; color: var(--color-ink-mute); } .independent-page .dc-strip { display: flex; align-items: center; gap: 10px 22px; flex-wrap: wrap; margin-top: 20px; padding: 16px 22px; background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-3\.5); } /* ── 15 · Resources ─────────────────────────────────────────────────────────────────────── */ .independent-page .dc-res { display: flex; flex-direction: column; gap: 6px; background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-4\.5); padding: 18px 22px; text-decoration: none; color: inherit; transition: transform 200ms var(--dc-ease), box-shadow 200ms ease, border-color 200ms ease; } .independent-page .dc-res:hover { transform: translateY(-4px); box-shadow: var(--dc-shadow-hover); border-color: var(--color-coral-500); } .independent-page .dc-res .dc-t-18 { font-size: 17px; line-height: 1.18; } .independent-page .dc-res-more { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-heading); font-weight: 600; font-size: 13.5px; color: var(--color-coral-500); } /* ── 16 · Closer ────────────────────────────────────────────────────────────────────────── */ .independent-page .dc-closer-actions { display: flex; gap: 12px; justify-content: center; align-items: center; margin-top: 34px; flex-wrap: wrap; } /* No 480px narrowing: the reference's closer panel keeps its 40px sides at every width, and its vertical padding is a clamp rather than a breakpoint. Removed. */ /* ── Reduced motion ─────────────────────────────────────────────────────────────────────── */ /* No blanket `* { animation: none !important }` here: every animation on this page comes from a DS component (.marquee-track, .section-glow-drift, .prompt-card-ring/-caret) and each of those already stops itself under reduced motion. All that is left is the hover lifts. */ /* .dc-q-24 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(.independent-page .dc-q-24) { margin: 0; } /* ── PHONE (≤900 / ≤640) — beyond the reference, deliberately ────────────────────────────── */ /* At 390px this page drift-scrolled 24px and lost 49 text nodes - almost all of them the SECOND column of a split (the grade rows, the offer mock, the chat replies) sitting off the right edge of a panel that clips. Collapsing the splits recovers them; nothing is hidden. */ @media (max-width: 900px) { .independent-page .dc-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 800px) { .independent-page .dc-grid-problem { grid-template-columns: minmax(0, 1fr); gap: 18px; } .independent-page .dc-compare-arrow { min-height: 60px; } .independent-page .dc-compare-arrow::before { top: 0; right: auto; bottom: 0; left: 50%; width: 2px; height: auto; background-image: linear-gradient(180deg, rgb(255 255 255 / 0.2), var(--color-coral-500)); transform: translateX(-50%); } .independent-page .dc-compare-arrow > i { transform: rotate(90deg); } } @media (max-width: 640px) { .independent-page .dc-emma-tabs .tab { flex-basis: calc(50% - 2px); } /* Collapse on the MEASURED column count, not the class name: `.dc-grid-2` computes four tracks on this page, so naming it "2" and trusting that would have left it four-up. */ .independent-page .dc-grid-2, .independent-page .dc-grid-4, .independent-page .dc-grid-pairs, .independent-page .dc-grid-locked, .independent-page .dc-grid-bursary, .independent-page .dc-grid-journey, .independent-page .dc-grid-widget, .independent-page .dc-grid-hero, /* the offer mock rides off the right of the hero split */ .independent-page .dc-grid-emma, .independent-page .dc-grid-results { grid-template-columns: minmax(0, 1fr); } .independent-page .dc-pipeline-step { font-size: 9.5px; letter-spacing: -0.01em; } .independent-page .dc-pipeline-step > span { width: 36px; height: 36px; font-size: 13px; } .independent-page .dc-pipeline-step:not(:last-child)::after { top: 17px; left: calc(50% + 17px); width: calc(100% - 34px); } /* The 7-step journey rail does NOT collapse: one column would be a seven-row stack that reads as nonsense. It becomes a horizontal scroll rail instead - the steps stay in sequence and every one is reachable by swiping, which is why the clipped-text census does not count a genuinely scrollable ancestor as lost content. */ .independent-page .dc-steps-nodes { grid-template-columns: repeat(7, minmax(84px, 1fr)); overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; padding-bottom: 6px; } .independent-page .dc-step { scroll-snap-align: start; } }