/* Meet Emma — page CSS * ============================================================================================ * GOAL: a FAITHFUL (1:1) reproduction of the reference * "Meet Emma.dc.html" (11 sections) * * SEEDED FROM prototypes/independent/page.css — the reference declares an IDENTICAL token block * (same 15 custom properties, byte for byte), so the container geometry, the padding literals, * the type/label scaffold, the panel and card surfaces, the spacing helpers, * the chat mock and the closer all transferred unchanged. The additions below are this page's own * devices; the audit pruned what it did not use. * 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 `.meet-emma-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/. * ============================================================================================ */ .meet-emma-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-mute: var(--color-on-dark-faint); /* the dimmest caption on dark */ --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); /* The reference sets the body face on its page root and so do we. The DS deliberately does not set Inter on body/.app (a decided non-issue), so without this the whole page falls back to the system sans — measured on production as 44 of 45 paragraphs. */ font-family: var(--font-sans); 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. */ .meet-emma-page .dc-py-48-64 { padding-top: 48px; padding-bottom: 64px; } .meet-emma-page .dc-py-104 { padding-top: 104px; padding-bottom: 104px; } .meet-emma-page .dc-py-96-0 { padding-top: 96px; padding-bottom: 0; } .meet-emma-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. */ .meet-emma-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(.meet-emma-page [class*="dc-t-"]) { margin: 0; text-wrap: balance; } .meet-emma-page .dc-t-80 { font-size: clamp(38px, 6vw, 80px); line-height: 1.0; letter-spacing: -0.04em; } /* closer */ /* hero h1 */ .meet-emma-page .dc-t-64 { font-size: clamp(36px, 5vw, 64px); line-height: 1.02; letter-spacing: -0.035em; } /* toolkit · journey · results */ /* journey stage number */ .meet-emma-page .dc-t-56 { font-size: clamp(32px, 4.4vw, 56px); line-height: 1.04; letter-spacing: -0.03em; } /* Emma */ /* the problem */ /* agents & boarding */ /* Bursary+ */ /* audit */ /* resources */ /* in-year */ .meet-emma-page .dc-t-46f { font-size: clamp(28px, 3.8vw, 46px); line-height: 1.08; letter-spacing: -0.025em; } /* Emma for families */ /* a day in the life */ /* journey stage title */ /* toolkit panel title */ /* "one pipeline" card */ .meet-emma-page .dc-t-22 { font-size: 22px; line-height: 1.1; letter-spacing: -0.02em; } /* who-she-works-for card titles */ .meet-emma-page .dc-t-17 { font-size: 17px; line-height: 1.25; letter-spacing: -0.01em; } /* card / strip titles */ /* resource card titles */ .meet-emma-page .dc-t-155 { font-size: 15.5px; line-height: 1.3; letter-spacing: -0.012em; } /* in-year feature titles */ /* Bursary+ step titles */ .meet-emma-page .dc-t-16 { font-size: 16px; line-height: 1.3; letter-spacing: -0.01em; } /* the Bursary+ strip title */ /* ── Body copy steps (Inter), named by px ───────────────────────────────────────────────── */ .meet-emma-page .dc-lede-17 { font-size: 17px; line-height: 1.6; color: var(--color-ink-soft); margin: 0; } .meet-emma-page .dc-body-16 { font-size: 16px; line-height: 1.6; color: var(--color-ink-soft); margin: 0; } .meet-emma-page .dc-body-15 { font-size: 15px; line-height: 1.55; color: var(--color-ink-soft); margin: 0; } .meet-emma-page .dc-body-155 { font-size: 15.5px; line-height: 1.6; color: var(--color-ink-soft); margin: 0; } .meet-emma-page .dc-body-14 { font-size: 14px; line-height: 1.5; color: var(--color-ink-soft); margin: 0; } .meet-emma-page .dc-body-135 { font-size: 13.5px; line-height: 1.5; color: var(--color-ink-soft); margin: 0; } .meet-emma-page .dc-body-13 { font-size: 13px; line-height: 1.5; color: var(--color-ink-soft); margin: 0; } .meet-emma-page .dc-body-125 { font-size: 12.5px; line-height: 1.45; color: var(--color-ink-soft); margin: 0; } .meet-emma-page .dc-body-12 { font-size: 12px; line-height: 1.45; color: var(--color-ink-soft); margin: 0; } .meet-emma-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. */ .meet-emma-page [class*="dc-label-"], .meet-emma-page .dc-eyebrow { font-family: var(--font-label); font-weight: 500; text-transform: uppercase; } .meet-emma-page .dc-eyebrow { display: block; font-size: 12.5px; letter-spacing: 0.08em; color: var(--color-coral-500); } .meet-emma-page .dc-eyebrow-hero { font-size: 12px; letter-spacing: 0.09em; color: var(--color-ink-mute); } .meet-emma-page .dc-eyebrow-row { display: inline-flex; align-items: center; gap: 11px; } .meet-emma-page .dc-label-11 { font-size: 11px; letter-spacing: 0.08em; } .meet-emma-page .dc-label-105 { font-size: 10.5px; letter-spacing: 0.08em; color: var(--color-ink-mute); } .meet-emma-page .dc-label-10 { font-size: 10px; letter-spacing: 0.08em; color: var(--color-ink-mute); } .meet-emma-page .dc-label-95 { font-size: 9.5px; letter-spacing: 0.07em; color: var(--color-ink-mute); } .meet-emma-page .dc-label-9 { font-size: 9px; letter-spacing: 0.07em; color: var(--color-ink-mute); } /* the criteria line under the audit lede — mono, wide leading, not uppercase-transformed (the copy is already uppercase in the reference) */ /* ── 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. */ .meet-emma-page .dc-panel { max-width: 1200px; margin: 0 auto; border-radius: var(--radius-5\.5); position: relative; overflow: hidden; } .meet-emma-page .dc-panel-dark { background: var(--color-dark-band); color: #fff; padding: clamp(56px, 7vw, 96px) clamp(28px, 5vw, 72px); } .meet-emma-page .dc-panel-widget { background: var(--color-paper); box-shadow: var(--dc-shadow-panel); padding: clamp(44px, 5.5vw, 72px) clamp(28px, 5vw, 64px); } /* the four Bursary+ cards */ /* on-dark copy colours */ .meet-emma-page .dc-on-dark-body { color: var(--dc-on-dark-body); } .meet-emma-page .dc-on-dark-bright { color: var(--dc-on-dark-bright); } /* ── Grids, measured off the reference ──────────────────────────────────────────────────── */ .meet-emma-page .dc-grid { display: grid; } .meet-emma-page .dc-grid-widget { grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 4.5vw, 64px); align-items: center; } .meet-emma-page .dc-grid-pairs { grid-template-columns: 1fr 1fr; gap: 10px 22px; } .meet-emma-page .dc-measure-820 { max-width: 820px; } .meet-emma-page .dc-measure-780 { max-width: 780px; } .meet-emma-page .dc-measure-720 { max-width: 720px; } /* the reference measures several paragraphs in `ch` rather than px — kept as `ch` so the wrap point matches at any size */ .meet-emma-page .dc-measure-50c { max-width: 50ch; } .meet-emma-page .dc-measure-52c { max-width: 52ch; } .meet-emma-page .dc-measure-54c { max-width: 54ch; } .meet-emma-page .dc-measure-58c { max-width: 58ch; } .meet-emma-page .dc-measure-44c { max-width: 44ch; } .meet-emma-page .dc-measure-22c { max-width: 22ch; } /* NO 991px BREAKPOINT IN THE REFERENCE, and nothing equivalent at any other value: its widget grid is a fixed `1.1fr 1fr`, its pairs grid a fixed `1fr 1fr`, and both panels size themselves with clamps that already floor at 44/28px. The block that was here stacked those grids and replaced the clamps with smaller fixed padding - all four invented. Removed. */ /* ── 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. */ .meet-emma-page .dc-mt-6 { margin-top: 6px; } .meet-emma-page .dc-mt-14 { margin-top: 14px; } .meet-emma-page .dc-mt-18 { margin-top: 18px; } .meet-emma-page .dc-mt-22 { margin-top: 22px; } .meet-emma-page .dc-mt-28 { margin-top: 28px; } .meet-emma-page .dc-mt-36 { margin-top: 36px; } .meet-emma-page .dc-mt-52c { margin-top: clamp(36px, 4.5vw, 52px); } .meet-emma-page .dc-mb-6 { margin-bottom: 6px; } .meet-emma-page .dc-mb-10 { margin-bottom: 10px; } .meet-emma-page .dc-mb-14 { margin-bottom: 14px; } .meet-emma-page .dc-mb-20 { margin-bottom: 20px; } .meet-emma-page .dc-gap-11 { gap: 11px; } .meet-emma-page .dc-gap-18 { gap: 18px; } .meet-emma-page .dc-gap-28 { gap: 28px; } /* ── 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%). */ .meet-emma-page .dc-glow-520 { width: 520px; height: 520px; } .meet-emma-page .dc-glow-560 { width: 560px; height: 560px; } .meet-emma-page .dc-glow-problem { right: -160px; top: -220px; filter: blur(14px); } /* ── Small shared devices ────────────────────────────────────────────────────────────────── */ /* the live dot is deliberately STATIC — the reference never animates it */ .meet-emma-page .dc-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--color-ok-green-bright); flex: none; } .meet-emma-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. */ /* the hairline-topped footer line inside a mock card */ /* icon tile — a rounded square holding one coral glyph (in-year, Bursary+, the journey strip) */ /* icon + copy row (in-year, the widget's four points, the toolkit bullets) */ .meet-emma-page .dc-bullet { display: flex; gap: 10px; align-items: flex-start; } .meet-emma-page .dc-bullet > i { flex: none; margin-top: 5px; font-size: 11px; color: var(--color-coral-500); } /* the "your team never" crosses inside the journey's dark card */ /* chips — the reference's pill vocabulary. Coloured variants for the two dark panels. */ /* 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. */ .meet-emma-page .dc-badge, /* the two badge-shaped section openers (audit, agents, Bursary+, "NEW") */ .meet-emma-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; } .meet-emma-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 ───────────────────────────────────────────────────────────── */ /* the hero's "grade your journey" link */ /* ── 2 · Social proof: the marquee ──────────────────────────────────────────────────────── */ /* The DS .marquee pattern supplies the seamless loop and the 8%/92% edge mask — identical to the reference. Only the cell metrics differ (62px tall, 132px wide, 48px gap, 55s). */ /* ── 3 · The patchwork problem ──────────────────────────────────────────────────────────── */ /* ── 4 · A day in the life: the two timelines ───────────────────────────────────────────── */ /* 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 */ /* ── 5 · Admissions audit ───────────────────────────────────────────────────────────────── */ /* The search row is a real — the DS .input is a full-width bordered field, and this is a borderless field inside a white pill with the button attached, so it is written here. */ /* the reference's amber and red grade chips have no token pair of ours that matches */ /* the same chip as a pill — the toolkit's ADD-ON / AUTUMN 2026 tags */ /* ── 6 · The toolkit: a pill tablist over one panel ─────────────────────────────────────── */ /* The DS tabs controller drives it from markup (aria-selected + hidden panels); these are the reference's pill metrics. Inactive = white on rule, active = navy fill with a coral icon. */ /* The reference mixes 7 real tabs with 2 plain links (Bursary+, Agents & Boarding) in ONE wrapping row. `display: contents` lets the [role=tablist] hold only the tabs — which is what the role means — while its children still wrap in the outer row alongside the two links. */ /* the classes the tabs controller toggles. They must exist HERE and be named in the markup's data-* attributes — a class only ever named in JS would never be styled. */ /* ── 7 · MIS strip ──────────────────────────────────────────────────────────────────────── */ /* ── 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. */ /* toggled by the tabs controller */ /* the Bursary+ cross-sell strip at the foot of the journey panel */ /* ── 9 · Agents & Boarding: the two locked mocks ────────────────────────────────────────── */ /* ── 11 · Emma: the stat pill on the dark band ──────────────────────────────────────────── */ /* The hero ticker is the DS .prompt-card / .prompt-card-light console. Page CSS below only keeps geometry the DS does not own (720px measure, 20/22/16 padding, 16px gap above the input row, the clamp on the typed line). */ /* 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 */ /* ── 12 · Emma for families: the chat mock ──────────────────────────────────────────────── */ .meet-emma-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); } /* the "new enquiry created" confirmation — a soft green strip with no matching token pair */ .meet-emma-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; } .meet-emma-page .dc-chat-created i { flex: none; font-size: 12px; color: var(--color-ok-green); } .meet-emma-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 ────────────────────────────────── */ /* ── 14 · Bursary+ ──────────────────────────────────────────────────────────────────────── */ /* ── 15 · Resources ─────────────────────────────────────────────────────────────────────── */ /* ── 16 · Closer ────────────────────────────────────────────────────────────────────────── */ .meet-emma-page .dc-closer-actions { display: flex; gap: 12px; justify-content: center; align-items: center; margin-top: 34px; flex-wrap: wrap; } /* The reference's closer panel keeps its 40px sides at EVERY width - `clamp(56px,8vw,104px) 40px` with no media query - so the 24px narrow override that was here is 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. */ /* ════════════════════════════════════════════════════════════════════════════════════════════ * MEET EMMA — this page's own devices * Everything above this line came from the shared scaffold. Every value below was read out of * "Meet Emma.dc.html". * * THE `font:` SHORTHAND TRAP (all four ports hit it): `font: 600 13px var(--font-display)` * RESETS line-height to `normal`. Where the reference writes the shorthand without a `/lh`, the * rule below says `line-height: normal` deliberately — it is not an omission. * ════════════════════════════════════════════════════════════════════════════════════════════ */ /* ── Padding steps this page adds ───────────────────────────────────────────────────────────── */ .meet-emma-page .dc-py-132-72 { padding-bottom: 72px; } /* Glob / wash live in `_shared/motion.css`. */ .meet-emma-page .dc-py-0-104 { padding-top: 0; padding-bottom: 104px; } .meet-emma-page .dc-py-104-0 { padding-top: 104px; padding-bottom: 0; } .meet-emma-page .dc-py-104-64 { padding-top: 104px; padding-bottom: 64px; } .meet-emma-page .dc-py-40-104 { padding-top: 40px; padding-bottom: 104px; } /* ── Display steps this page adds ──────────────────────────────────────────────────────────── */ /* Hero h1 — 68 step matches the other centred heroes (About / Partnerships / Integrations). */ .meet-emma-page .dc-t-68 { font-size: clamp(36px, 5vw, 68px); line-height: 1.0; letter-spacing: -0.04em; } .meet-emma-page .dc-t-76 { font-size: clamp(44px, 5.6vw, 76px); line-height: 1.0; letter-spacing: -0.04em; } /* dc-t-100 kept for anything still on the old hero scale. */ .meet-emma-page .dc-t-100 { font-size: clamp(48px, 7.4vw, 100px); line-height: 0.98; letter-spacing: -0.045em; } .meet-emma-page .dc-t-58 { font-size: clamp(34px, 4.6vw, 58px); line-height: 1.03; letter-spacing: -0.035em; } .meet-emma-page .dc-t-56h { font-size: clamp(32px, 4.6vw, 56px); line-height: 1.06; letter-spacing: -0.03em; } .meet-emma-page .dc-t-52t { font-size: clamp(32px, 4.2vw, 52px); line-height: 1.06; letter-spacing: -0.03em; } .meet-emma-page .dc-t-48p { font-size: clamp(28px, 3.8vw, 48px); line-height: 1.06; letter-spacing: -0.03em; } .meet-emma-page .dc-t-26d { font-size: clamp(20px, 2.2vw, 26px); line-height: 1.15; letter-spacing: -0.015em; } /* THE BALANCE TRAP, and it is worth as much as the `font:` shorthand one. The shared scaffold's blanket [class*="dc-t-"] rule sets `text-wrap: balance`, but the reference sets balance ONLY on its section h1/h2s - never on a card title. Left applied, balance re-wrapped the 3-column card headings and cost 54px on the capability grid and 40px on the glass cards alone. So every small step opts back out. (`wrap` is the reset - `text-wrap: auto` is not a valid value and is dropped.) */ .meet-emma-page .dc-t-21, .meet-emma-page .dc-t-18c, .meet-emma-page .dc-t-155, .meet-emma-page .dc-t-16, .meet-emma-page .dc-t-17, .meet-emma-page .dc-t-145, .meet-emma-page .dc-t-15b, .meet-emma-page .dc-t-26d, .meet-emma-page .dc-t-155q { text-wrap: wrap; } .meet-emma-page .dc-t-21 { font-size: 21px; line-height: normal; letter-spacing: -0.01em; } .meet-emma-page .dc-t-18c { font-size: 18px; line-height: 1.25; letter-spacing: -0.01em; } .meet-emma-page .dc-t-145 { font-size: 14.5px; line-height: normal; font-weight: 600; } .meet-emma-page .dc-t-15b { font-size: 15px; line-height: normal; font-weight: 600; } .meet-emma-page .dc-t-155q { font-size: 15.5px; line-height: 1.4; font-weight: 600; letter-spacing: -0.008em; color: var(--color-ink-deep); } .meet-emma-page .dc-q-26 { font-family: var(--font-heading); font-weight: 500; font-size: clamp(18px, 2.2vw, 26px); line-height: 1.45; letter-spacing: -0.017em; margin: 0; text-wrap: pretty; } /* ── Body steps this page adds ─────────────────────────────────────────────────────────────── */ .meet-emma-page .dc-lede-21 { font-size: clamp(17px, 1.9vw, 21px); line-height: 1.5; color: var(--color-ink-soft); } .meet-emma-page .dc-body-145 { font-size: 14.5px; line-height: 1.55; margin: 0; } .meet-emma-page .dc-body-155-165 { font-size: 15.5px; line-height: 1.65; color: var(--color-ink-soft); margin: 0; } .meet-emma-page .dc-num-15 { font-family: var(--font-label); font-weight: 700; font-size: 15px; line-height: normal; color: var(--color-coral-500); margin: 0; } .meet-emma-page .dc-stat-32 { font-family: var(--font-heading); font-weight: 700; font-size: 32px; line-height: 1; letter-spacing: -0.02em; color: var(--color-ink-deep); margin: 0; } /* ── Spacing / measure additions ───────────────────────────────────────────────────────────── */ .meet-emma-page .dc-mt-3 { margin-top: 3px; } .meet-emma-page .dc-mt-26 { margin-top: 26px; } .meet-emma-page .dc-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .meet-emma-page .dc-label-115 { font-family: var(--font-label); font-weight: 500; font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; } .meet-emma-page .dc-mb-40 { margin-bottom: 40px; } .meet-emma-page .dc-gap-13 { gap: 13px; } .meet-emma-page .dc-min-260 { min-height: 260px; } .meet-emma-page .dc-min-280 { min-width: 280px; } .meet-emma-page .dc-measure-60c { max-width: 60ch; } .meet-emma-page .dc-measure-72c { max-width: 72ch; } /* ── 1 · The hero task ticker ──────────────────────────────────────────────────────────────── */ /* Surface, ring, disc, caret, field, send: DS .prompt-card*. Page owns the measure. */ .meet-emma-page .dc-ticker-card { max-width: 720px; margin-top: 40px; margin-inline: auto; padding: 20px 22px 16px; } .meet-emma-page .dc-ticker-ask { margin-top: 16px; } .meet-emma-page .dc-typed { font-size: clamp(16px, 1.8vw, 19px); line-height: 1.5; color: var(--color-ink-deep); } /* min-height is what holds the card steady while the ticker fills — it is why the section does not grow as tasks arrive, and it is part of the at-rest height. */ .meet-emma-page .dc-convo { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; min-height: 216px; } .meet-emma-page .dc-convo-row { display: flex; align-items: center; gap: 12px; margin: 0; background: var(--color-page-bg); border: 1px solid var(--color-rule); border-radius: var(--radius-3); padding: 11px 14px; } .meet-emma-page .dc-convo-dot { flex: none; width: 22px; height: 22px; border-radius: 50%; color: #fff; display: inline-flex; align-items: center; justify-content: center; } .meet-emma-page .dc-convo-dot i { font-size: 10px; } .meet-emma-page .dc-convo-dot-ok { background: var(--color-ok-green); } .meet-emma-page .dc-convo-dot-draft { background: var(--color-coral-500); } /* The fifth task in the ticker's cycle - only ever seen once the typewriter is running, which is why the no-JS markup does not carry one. */ .meet-emma-page .dc-convo-dot-flag { background: var(--color-ink-deep); } /* Each completed task drops into the list. The reference's v6MsgIn, measured. */ .meet-emma-page .dc-convo-row-in { animation: dc-msg-in 0.45s var(--dc-ease) both; } @keyframes dc-msg-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } } .meet-emma-page .dc-convo-task { flex: 1; font-size: 14px; line-height: 1.4; font-weight: 500; color: var(--color-ink-deep); } .meet-emma-page .dc-convo-meta { flex: none; white-space: nowrap; } .meet-emma-page .dc-ticker-foot { display: flex; align-items: center; gap: 8px; margin: 0; } /* ── 2 · Glass cards on the dark panel + the flow chips + the learning strip ───────────────── */ .meet-emma-page .dc-glass { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-4\.5); padding: 30px 28px; } .meet-emma-page .dc-glass-on { border-color: var(--color-coral-500); } /* Three equal cells, one row, icon over label (owner, 2026-08-22). `1fr` each rather than a flex row, so the three read as one control regardless of label length - "You approve" is twice the width of "Sent". Pill radius is gone with the pill shape: a two-line stacked cell at radius-full reads as a lozenge, so it steps down to the 10px inset radius. */ .meet-emma-page .dc-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; /* No `margin: 0` here. It was a carryover from when this row was a

, and as page CSS at 0-2-0 it beat `.dc-mt-*` on source order - so the spacing class on the element silently did nothing (coding-standards §2 rule 3: never restate what preflight already guarantees). */ /* minmax(0, ...) not a bare 1fr: the card grid stays 3-up down to 768px, so between 768 and 900 the flow has only ~150px to divide. A bare `1fr` is `minmax(auto, 1fr)`, and once space runs short each track falls back to its OWN min-content - giving 43/56/41 instead of thirds. Flooring the minimum at 0 keeps them equal and wraps the labels instead. */ } .meet-emma-page .dc-flow-chip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; font-family: var(--font-heading); font-weight: 600; font-size: 11.5px; line-height: normal; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--radius-2\.5); padding: 10px 6px; animation: dc-flow-step 6.6s ease infinite; } .meet-emma-page .dc-flow-chip-2 { animation-delay: 2.2s; } .meet-emma-page .dc-flow-chip-3 { animation-delay: 4.4s; } .meet-emma-page .dc-flow-chip i { font-size: 13px; } /* the reference's v7Step: each chip lights in turn */ @keyframes dc-flow-step { 0%, 100% { border-color: rgba(255, 255, 255, 0.14); color: var(--dc-on-dark-bright); } 8%, 25% { border-color: var(--color-coral-500); color: #fff; } } .meet-emma-page .dc-learn { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; background: rgba(236, 99, 75, 0.1); border: 1px solid rgba(236, 99, 75, 0.35); border-radius: var(--radius-4\.5); padding: 24px 28px; } .meet-emma-page .dc-tile-46 { flex: none; width: 46px; height: 46px; border-radius: var(--radius-3); background: var(--color-coral-500); display: flex; align-items: center; justify-content: center; } .meet-emma-page .dc-tile-46 i { font-size: 19px; color: #fff; } /* ── 3 · Capability cards ──────────────────────────────────────────────────────────────────── */ /* Unwrapped (owner, 2026-08-22) - the same move Home v6's Meet-Emma row made. `.dc-card-cap` (page-bg fill, 20px radius, 30/26 padding) is gone entirely rather than emptied: it had six usages, all here, so an empty rule would only be a name to trip over later. The white 44px icon tile went with it, which is why the class is `-icon` and not `-44` any more - a name for a box that no longer exists is worse than a rename across six lines. The wrapper span STAYS: it carries the glyph's size and duotone colours, so unwrapping it in markup would mean re-declaring all three. The larger 30px glyph gives each capability a clearer visual anchor without restoring the old tile. The shared implementation now lives in `_shared/page-shared.css` §4 so Sixth Forms can use the identical treatment. */ /* ── 4 · Emma in action ────────────────────────────────────────────────────────────────────── */ .meet-emma-page .dc-grid-action { grid-template-columns: minmax(0, 30fr) minmax(0, 70fr); gap: clamp(28px, 4vw, 56px); align-items: start; } .meet-emma-page .dc-grid-asks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } /* The left list is intentionally unframed. Rows retain their hairline separators and rhythm. */ .meet-emma-page .dc-list-row { display: flex; align-items: flex-start; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--color-rule); } .meet-emma-page .dc-list-row:last-child { border-bottom: 0; } .meet-emma-page .dc-list-icon { flex: none; display: inline-flex; padding-top: 2px; } .meet-emma-page .dc-list-icon i { font-size: 24px; line-height: 1; color: var(--color-coral-500); } .meet-emma-page .dc-ask-card { background: var(--color-paper); border-radius: var(--radius-4); box-shadow: 0 12px 32px rgba(15, 26, 79, 0.06); padding: 22px 24px; } .meet-emma-page .dc-quote-icon { flex: none; margin-top: 4px; font-size: 12px; color: var(--color-coral-500); } .meet-emma-page .dc-ask-reply { display: flex; align-items: flex-start; gap: 11px; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--color-rule); } /* ── 5 · Proof panel ──────────────────────────────────────────────────────────────────────── */ .meet-emma-page .dc-panel-proof { padding: clamp(40px, 5vw, 64px) clamp(28px, 5vw, 60px); } .meet-emma-page .dc-glow-proof { right: -180px; bottom: -240px; filter: blur(12px); } .meet-emma-page .dc-quote-stage { display: grid; } .meet-emma-page .dc-quote-slide { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; opacity: 0; visibility: hidden; transform: translateY(10px); pointer-events: none; transition-property: opacity, transform, visibility; transition-duration: 300ms, 300ms, 0ms; transition-timing-function: ease-out; transition-delay: 0ms, 0ms, 300ms; } .meet-emma-page .dc-quote-slide-active { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; transition-delay: 0ms; } @media (prefers-reduced-motion: reduce) { .meet-emma-page .dc-quote-slide { transform: none; transition-duration: 0.01ms; } } .meet-emma-page .dc-avatar-42 { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: #fff; font-family: var(--font-heading); font-weight: 700; font-size: 14px; } .meet-emma-page .dc-proof-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 30px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.14); } /* ── 6 · The skills disclosure ─────────────────────────────────────────────────────────────── */ .meet-emma-page .dc-skills-ready { padding-bottom: 1px; } .meet-emma-page [data-skill-toggle]:focus:not(:focus-visible) { outline: none; box-shadow: 0 0 0 1px var(--color-neutral-translucent-200); } .meet-emma-page [data-skill-toggle].card-highlight:focus:not(:focus-visible) { box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-blue-700) 32%, transparent); } .meet-emma-page [data-skill-toggle] { transition-property: background-color, box-shadow; transition-duration: 200ms; transition-timing-function: ease-out; } .meet-emma-page .dc-skill-icon { flex: none; margin-top: 3px; font-size: 16px; color: var(--color-coral-500); } .meet-emma-page .dc-skill-chev { flex: none; margin-top: 5px; font-size: 12px; color: var(--color-ink-mute); } .meet-emma-page .dc-skill-detail { display: grid; grid-template-rows: 0fr; margin-top: 0; overflow: hidden; visibility: hidden; opacity: 0; background: var(--color-paper); border: 0 solid var(--color-coral-500); border-radius: var(--radius-5); padding-inline: clamp(28px, 3.5vw, 44px); padding-block: 0; } .meet-emma-page .dc-skill-detail-inner { min-height: 0; overflow: hidden; } .meet-emma-page .dc-skills-ready .dc-skill-detail { transition-property: grid-template-rows, margin-top, padding-block, opacity, visibility; transition-duration: 300ms, 300ms, 300ms, 200ms, 0ms; transition-timing-function: ease-in-out; transition-delay: 0ms, 0ms, 0ms, 0ms, 300ms; } .meet-emma-page .dc-skill-detail-open { grid-template-rows: 1fr; margin-top: 14px; visibility: visible; opacity: 1; border-width: 1px; padding-block: clamp(28px, 3.5vw, 44px); } .meet-emma-page .dc-skills-ready .dc-skill-detail-open { transition-delay: 0ms; } @media (prefers-reduced-motion: reduce) { .meet-emma-page [data-skill-toggle], .meet-emma-page .dc-skills-ready .dc-skill-detail { transition-duration: 0.01ms; } } .meet-emma-page .dc-grid-skill { grid-template-columns: 1.35fr 1fr; gap: clamp(24px, 3vw, 44px); align-items: start; } .meet-emma-page .dc-tile-48 { flex: none; width: 48px; height: 48px; border-radius: var(--radius-3); background: var(--color-coral-100); display: flex; align-items: center; justify-content: center; } .meet-emma-page .dc-tile-48 i { font-size: 19px; color: var(--color-coral-500); } /* the coral-wash "as a …" story box — #F8D2C3 is the reference's own hairline on coral-100 */ .meet-emma-page .dc-story { background: var(--color-coral-100); border: 1px solid #F8D2C3; border-radius: var(--radius-3\.5); padding: 22px 24px; } .meet-emma-page .dc-story-quote { font-family: var(--font-heading); font-weight: 500; font-size: 15px; line-height: 1.55; letter-spacing: -0.005em; color: var(--color-ink-deep); margin: 0; } /* ── 7 · The families panel is BORDERED here, not shadowed ────────────────────────────────── */ .meet-emma-page .dc-panel-bordered { border: 1px solid var(--color-rule); box-shadow: none; } /* and its chat mock uses the standard rule, not the softer #ECEEF3 */ .meet-emma-page .dc-chat-ruled { border-color: var(--color-rule); } .meet-emma-page .dc-chat-ruled .dc-bubble-them { border-color: var(--color-rule); } .meet-emma-page .dc-chat-ruled .dc-chat-reply-off { border-color: var(--color-rule); } /* ── 8 · The hand-drawn underline + the browser video frame ────────────────────────────────── */ /* Brand drawing, not an icon — the one sanctioned inline-SVG case. `currentColor` inherits the coral from .orange-title's sibling, so no hex here. The reference animates the stroke in on scroll; static is the honest resting state. */ .meet-emma-page .dc-uline { position: relative; display: inline-block; color: var(--color-coral-500); } .meet-emma-page .dc-uline-svg { position: absolute; left: 0; bottom: -8px; width: 100%; height: 12px; overflow: visible; } .meet-emma-page .dc-grid-trained { grid-template-columns: 1fr 1.1fr; gap: clamp(36px, 5vw, 72px); align-items: center; } .meet-emma-page .dc-browser { border-radius: var(--radius-4); overflow: hidden; background: var(--color-dark-band); border: 1px solid rgba(15, 26, 79, 0.15); box-shadow: 0 30px 70px rgba(4, 8, 24, 0.35); } .meet-emma-page .dc-browser-bar { display: flex; align-items: center; gap: 7px; padding: 11px 15px; background: rgba(255, 255, 255, 0.05); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .meet-emma-page .dc-tl { width: 10px; height: 10px; border-radius: 50%; flex: none; } /* macOS traffic lights — literal by nature, no token could mean these */ .meet-emma-page .dc-tl-r { background: #FF5F57; } .meet-emma-page .dc-tl-y { background: #FEBC2E; } .meet-emma-page .dc-tl-g { background: #28C840; } .meet-emma-page .dc-browser-url { flex: 1; margin-left: 10px; height: 22px; border-radius: var(--radius-1\.5); background: rgba(255, 255, 255, 0.07); display: flex; align-items: center; justify-content: center; gap: 8px; letter-spacing: 0.04em; color: #8D9AB8; } .meet-emma-page .dc-browser-stage { position: relative; aspect-ratio: 16 / 9; } .meet-emma-page .dc-video-hint { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; pointer-events: none; background: color-mix(in srgb, var(--color-dark-band) 84%, #FFFFFF); } .meet-emma-page .dc-video-play { width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.3); display: flex; align-items: center; justify-content: center; } .meet-emma-page .dc-video-play i { font-size: 20px; color: #fff; margin-left: 4px; } .meet-emma-page .dc-video-note { color: #8D9AB8; text-align: center; max-width: 36ch; line-height: 1.6; } /* ── 9 · The coral-wash control panel ──────────────────────────────────────────────────────── */ .meet-emma-page .dc-panel-wash { background: var(--color-coral-100); border: 1px solid #F8D2C3; } .meet-emma-page .dc-control-title { font-size: calc((var(--font-size-heading-2) + var(--font-size-heading-3)) / 2); } .meet-emma-page .dc-grid-guard { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .meet-emma-page .dc-card-guard { background: var(--color-paper); border-radius: var(--radius-4); padding: 26px; } /* 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. */ /* Provider cards: look is `_shared/cards.css` `.dc-linkcard`. */ /* THE REFERENCE'S ONLY GRID COLLAPSE, and it is deliberately the only one here too. * * A previous pass added a 991px breakpoint that stacked dc-grid-3, -action, -trained and -skill * and re-padded the wash panel. None of that is in the reference: every one of its grids is a * fixed `repeat(3, 1fr)` / `1fr 1.1fr` with no media query, and the wash panel's padding is * already a clamp that floors at 44px/28px. The extra rules made narrow viewports better and the * page unfaithful, which is the wrong trade while we are still matching the reference. * * Recorded as a reference defect in STATUS.md §5 — the three-column grids do squeeze badly on a * phone. Fixing it is a tuning decision for after the port, not a silent improvement now. */ @media (max-width: 800px) { .meet-emma-page .dc-grid-guard { grid-template-columns: minmax(0, 1fr); } } /* Margin literals for headings and body steps. A Tailwind `mt-5` cannot reach them: their own rule sets `margin: 0` at 0-2-0 and beats a 0-1-0 utility, so the margin would be silently dropped. These sit last in the file, so at equal specificity they win. */ .meet-emma-page .dc-mb-8 { margin-bottom: 8px; } .meet-emma-page .dc-mt-8 { margin-top: 8px; } .meet-emma-page .dc-mt-12 { margin-top: 12px; } .meet-emma-page .dc-mt-16 { margin-top: 16px; } .meet-emma-page .dc-mt-20 { margin-top: 20px; } .meet-emma-page .dc-mt-24 { margin-top: 24px; } /* ── 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) { .meet-emma-page .dc-grid-trained, .meet-emma-page .dc-grid-widget, .meet-emma-page .dc-grid-3, .meet-emma-page .dc-grid-action, .meet-emma-page .dc-grid-asks, .meet-emma-page .dc-grid-pairs, .meet-emma-page .dc-grid-skill { grid-template-columns: minmax(0, 1fr); } } /* `dc-min-280` is a 280px flex floor, which exceeds the panel's 256px content box at 360 and pushes its text out under the panel's clip. The parent already wraps, so releasing the floor lets each item take the row it was going to wrap onto anyway. */ @media (max-width: 640px) { .meet-emma-page .dc-min-280 { min-width: 0; } }