/* ApplicaaOne — page CSS * ============================================================================================ * GOAL: a FAITHFUL (1:1) reproduction of the reference * "ApplicaaOne.dc.html" (14 sections) * * SEEDED FROM prototypes/independent/page.css — the reference declares an IDENTICAL token block, * so the container geometry, the padding literals, the type/label scaffold, * the surfaces, the grids, the spacing helpers, the locked-mock device and the closer transferred * unchanged. The additions below are this page's own; 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 `.applicaa-one-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/. * ============================================================================================ */ .applicaa-one-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-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 every paragraph would fall back to the system sans. */ 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. */ .applicaa-one-page .dc-py-0-96 { padding-top: 0; padding-bottom: 96px; } .applicaa-one-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. */ .applicaa-one-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(.applicaa-one-page [class*="dc-t-"]) { margin: 0; text-wrap: balance; } .applicaa-one-page .dc-t-80 { font-size: clamp(38px, 6vw, 80px); line-height: 1.0; letter-spacing: -0.04em; } /* closer */ /* hero h1 */ /* toolkit · journey · results */ /* journey stage number */ /* Emma */ .applicaa-one-page .dc-t-54 { font-size: clamp(30px, 4.4vw, 54px); line-height: 1.06; letter-spacing: -0.03em; } /* the problem */ /* agents & boarding */ .applicaa-one-page .dc-t-52b { font-size: clamp(30px, 4.2vw, 52px); line-height: 1.05; letter-spacing: -0.032em; } /* Bursary+ */ /* audit */ /* resources */ /* in-year */ /* Emma for families */ .applicaa-one-page .dc-t-42 { font-size: clamp(26px, 3.4vw, 42px); line-height: 1.1; letter-spacing: -0.025em; } /* a day in the life */ /* journey stage title */ /* toolkit panel title */ /* "one pipeline" card */ /* card / strip titles */ /* resource card titles */ /* in-year feature titles */ /* Bursary+ step titles */ /* the Bursary+ strip title */ /* ── Body copy steps (Inter), named by px ───────────────────────────────────────────────── */ .applicaa-one-page .dc-lede { font-size: clamp(16px, 1.8vw, 19px); line-height: 1.55; color: var(--color-ink-soft); } .applicaa-one-page .dc-body-165 { font-size: 16.5px; line-height: 1.6; } .applicaa-one-page .dc-body-16 { font-size: 16px; line-height: 1.6; color: var(--color-ink-soft); margin: 0; } .applicaa-one-page .dc-body-155 { font-size: 15.5px; line-height: 1.6; color: var(--color-ink-soft); margin: 0; } .applicaa-one-page .dc-body-13 { font-size: 13px; line-height: 1.5; color: var(--color-ink-soft); margin: 0; } .applicaa-one-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. */ .applicaa-one-page [class*="dc-label-"], .applicaa-one-page .dc-eyebrow { font-family: var(--font-label); font-weight: 500; text-transform: uppercase; } .applicaa-one-page .dc-eyebrow { display: block; font-size: 12.5px; letter-spacing: 0.08em; color: var(--color-coral-500); } /* HERO MONO COLOUR (owner, 2026-09-09). Both of the hero's mono labels were ink-mute (#8893B0), which is ~3.0:1 on the hero's white wash and too faint to read at 10-12px. They now track the hero lede's own colour, ink-deep/60 (~4.6:1 composited). Hero only, and `.dc-label-hero` is a modifier for the same reason `.dc-eyebrow-hero` is one: `.dc-label-10` is used 13 more times on this page, on white cards and on the dark band, where ink-mute is correct. */ .applicaa-one-page .dc-eyebrow-hero { font-size: 12px; letter-spacing: 0.09em; color: color-mix(in srgb, var(--color-ink-deep) 60%, transparent); } .applicaa-one-page .dc-eyebrow-row { display: inline-flex; align-items: center; gap: 11px; } .applicaa-one-page .dc-label-11 { font-size: 11px; letter-spacing: 0.08em; } .applicaa-one-page .dc-label-105 { font-size: 10.5px; letter-spacing: 0.08em; color: var(--color-ink-mute); } .applicaa-one-page .dc-label-10 { font-size: 10px; letter-spacing: 0.08em; color: var(--color-ink-mute); } .applicaa-one-page .dc-label-95 { font-size: 9.5px; letter-spacing: 0.07em; color: var(--color-ink-mute); } .applicaa-one-page .dc-label-9 { font-size: 9px; letter-spacing: 0.07em; color: var(--color-ink-mute); } .applicaa-one-page .dc-label-hero { color: color-mix(in srgb, var(--color-ink-deep) 60%, transparent); } /* 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. */ .applicaa-one-page .dc-panel { max-width: 1200px; margin: 0 auto; border-radius: var(--radius-5\.5); position: relative; overflow: hidden; } /* the four Bursary+ cards */ /* on-dark copy colours */ .applicaa-one-page .dc-on-dark-body { color: var(--dc-on-dark-body); } .applicaa-one-page .dc-on-dark-bright { color: var(--dc-on-dark-bright); } .applicaa-one-page .dc-on-dark-dim { color: var(--dc-on-dark-dim); } .applicaa-one-page .dc-on-dark-mute { color: var(--dc-on-dark-mute); } /* ── Grids, measured off the reference ──────────────────────────────────────────────────── */ .applicaa-one-page .dc-grid { display: grid; } .applicaa-one-page .dc-grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; } .applicaa-one-page .dc-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .applicaa-one-page .dc-measure-820 { max-width: 820px; } .applicaa-one-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 */ .applicaa-one-page .dc-measure-52c { max-width: 52ch; } .applicaa-one-page .dc-measure-54c { max-width: 54ch; } .applicaa-one-page .dc-measure-56c { max-width: 56ch; } .applicaa-one-page .dc-measure-58c { max-width: 58ch; } .applicaa-one-page .dc-measure-62c { max-width: 62ch; } .applicaa-one-page .dc-measure-44c { max-width: 44ch; } /* The two grids that used to collapse here (`dc-grid-4`, `dc-grid-2`) are handled once, at the reference's own breakpoints, in the Responsive block at the foot of this file. 991px is not a breakpoint this reference uses — it collapses content at 1080px and 720px only. */ /* ── 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. */ .applicaa-one-page .dc-mt-6 { margin-top: 6px; } .applicaa-one-page .dc-mt-10 { margin-top: 10px; } .applicaa-one-page .dc-mt-14 { margin-top: 14px; } .applicaa-one-page .dc-mt-18 { margin-top: 18px; } .applicaa-one-page .dc-mt-22 { margin-top: 22px; } .applicaa-one-page .dc-mt-30 { margin-top: 30px; } .applicaa-one-page .dc-mt-36 { margin-top: 36px; } .applicaa-one-page .dc-mb-6 { margin-bottom: 6px; } .applicaa-one-page .dc-mb-14 { margin-bottom: 14px; } .applicaa-one-page .dc-mb-36 { margin-bottom: 36px; } /* ── 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%). */ .applicaa-one-page .dc-glow-560 { width: 560px; height: 560px; } /* ── Small shared devices ────────────────────────────────────────────────────────────────── */ /* the live dot is deliberately STATIC — the reference never animates it */ /* 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) */ .applicaa-one-page .dc-bullet { display: flex; gap: 10px; align-items: flex-start; } .applicaa-one-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. */ .applicaa-one-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. */ .applicaa-one-page .dc-chip, .applicaa-one-page .dc-locked-pill { line-height: normal; } .applicaa-one-page .dc-chip-row { display: flex; flex-wrap: wrap; gap: 8px; } /* the two badge-shaped section openers (audit, agents, Bursary+, "NEW") */ /* ── 1 · Hero: the offer mock ───────────────────────────────────────────────────────────── */ .applicaa-one-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; } /* 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 ────────────────────────────────────────── */ .applicaa-one-page .dc-locked { position: relative; border-radius: var(--radius-4); overflow: hidden; } .applicaa-one-page .dc-locked-mock { filter: blur(7px); transform: scale(1.04); background: #fff; padding: 22px; display: flex; flex-direction: column; gap: 10px; } .applicaa-one-page .dc-locked-veil { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .applicaa-one-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; } .applicaa-one-page .dc-locked-pill i { font-size: 11px; color: var(--color-coral-500); } .applicaa-one-page .dc-meter { height: 8px; background: var(--dc-sand-2); border-radius: var(--radius-1); margin-top: 5px; } .applicaa-one-page .dc-meter > span { display: block; height: 100%; border-radius: var(--radius-1); background: var(--color-ink-deep); } .applicaa-one-page .dc-meter-coral > span { background: var(--color-coral-500); } .applicaa-one-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 ──────────────────────────────────────────── */ /* 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). */ /* 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 */ .applicaa-one-page .section-dark .check-list-no > i { color: var(--dc-on-dark-body); } /* ── 12 · Emma for families: the chat mock ──────────────────────────────────────────────── */ /* the "new enquiry created" confirmation — a soft green strip with no matching token pair */ /* ── 13 · Results: quote carousel + stat column + ticker ────────────────────────────────── */ /* ── 14 · Bursary+ ──────────────────────────────────────────────────────────────────────── */ /* ── 15 · Resources ─────────────────────────────────────────────────────────────────────── */ /* ── 16 · Closer ────────────────────────────────────────────────────────────────────────── */ .applicaa-one-page .dc-closer-actions { display: flex; gap: 12px; justify-content: center; align-items: center; margin-top: 34px; flex-wrap: wrap; } /* No narrow override for the closer panel: the reference holds its 40px sides at EVERY width (`clamp(56px,8vw,104px) 40px` - only the vertical is fluid), so the 480px step that was here was invented. The base rule above already IS the reference's clamp. */ /* ── 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. */ /* ════════════════════════════════════════════════════════════════════════════════════════════ * APPLICAAONE — this page's own devices. Every value read out of "ApplicaaOne.dc.html". * * THE `font:` SHORTHAND RESETS line-height TO `normal`. Where the reference writes * `font: 700 17px var(--font-display)` with no `/lh`, the rule below says `line-height: normal` * deliberately. This page is full of them (mock rows, flags, product names). * * AND THE TWO SCAFFOLD TRAPS, both fixed at the bottom of this file: * · `[class*="dc-t-"] { margin: 0 }` (0-2-0) beats a `mt-5` utility (0-1-0), so heading margins * are the literal `dc-mt-*` / `dc-mb-*` helpers, never utilities. * · the same blanket rule sets `text-wrap: balance`, which the reference applies only to section * headings — so the card-sized steps opt back out with `text-wrap: wrap`. * ════════════════════════════════════════════════════════════════════════════════════════════ */ /* ── Padding steps ─────────────────────────────────────────────────────────────────────────── */ .applicaa-one-page .dc-py-24-48 { padding-top: 24px; padding-bottom: 48px; } .applicaa-one-page .dc-py-96-40 { padding-top: 96px; padding-bottom: 40px; } .applicaa-one-page .dc-py-56-96 { padding-top: 56px; padding-bottom: 96px; } .applicaa-one-page .dc-py-40-96 { padding-top: 40px; padding-bottom: 96px; } /* ── Display steps ─────────────────────────────────────────────────────────────────────────── */ /* Note how many maxima repeat across the package with DIFFERENT slopes or leading — 54 at 4.2vw here against 4.4vw on Independent, 46 at 1.06 against 1.08, 48 from a 28px floor against 30. Each keeps its own step rather than being rounded into a sibling. */ .applicaa-one-page .dc-t-84 { font-size: clamp(44px, 6vw, 84px); line-height: 1.0; letter-spacing: -0.04em; } .applicaa-one-page .dc-t-54 { font-size: clamp(30px, 4.2vw, 54px); line-height: 1.06; letter-spacing: -0.03em; } .applicaa-one-page .dc-t-48n { font-size: clamp(28px, 3.8vw, 48px); line-height: 1.08; letter-spacing: -0.03em; } .applicaa-one-page .dc-t-46u { font-size: clamp(28px, 3.8vw, 46px); line-height: 1.06; letter-spacing: -0.03em; } .applicaa-one-page .dc-t-36 { font-size: clamp(24px, 3vw, 36px); line-height: 1.1; letter-spacing: -0.025em; } .applicaa-one-page .dc-t-40s { font-size: clamp(28px, 3.4vw, 40px); line-height: 1; letter-spacing: -0.035em; color: var(--color-ink-deep); } .applicaa-one-page .dc-t-21p { font-size: clamp(17px, 1.9vw, 21px); line-height: 1.3; letter-spacing: -0.015em; } .applicaa-one-page .dc-t-18d { font-size: 18px; line-height: 1.25; letter-spacing: -0.012em; } .applicaa-one-page .dc-t-175 { font-size: 17.5px; line-height: normal; letter-spacing: -0.015em; } .applicaa-one-page .dc-t-17p { font-size: 17px; line-height: normal; letter-spacing: -0.015em; } .applicaa-one-page .dc-t-165 { font-size: 16.5px; line-height: 1.25; letter-spacing: -0.012em; } .applicaa-one-page .dc-t-155b { font-size: 15.5px; line-height: 1.25; letter-spacing: -0.012em; } .applicaa-one-page .dc-t-145b { font-size: 14.5px; line-height: 1.3; letter-spacing: -0.01em; } .applicaa-one-page .dc-t-14b { font-size: 14px; line-height: normal; font-weight: 600; } .applicaa-one-page .dc-t-135 { font-size: 13.5px; line-height: normal; } .applicaa-one-page .dc-t-135b { font-size: 13.5px; line-height: normal; font-weight: 600; color: var(--color-ink-deep); } .applicaa-one-page .dc-t-13 { font-size: 13px; line-height: normal; font-weight: 600; } .applicaa-one-page .dc-t-125c { font-family: var(--font-heading); font-weight: 600; font-size: 12.5px; line-height: normal; color: var(--color-coral-500); } .applicaa-one-page .dc-t-125c i { font-size: 10px; margin-right: 7px; } .applicaa-one-page .dc-q-185 { font-family: var(--font-heading); font-weight: 500; font-size: clamp(16px, 1.7vw, 18.5px); line-height: 1.5; letter-spacing: -0.01em; margin: 0; text-wrap: pretty; } /* ── Body steps ────────────────────────────────────────────────────────────────────────────── */ .applicaa-one-page .dc-body-14-155 { font-size: 14px; line-height: 1.55; margin: 0; } .applicaa-one-page .dc-body-135-155 { font-size: 13.5px; line-height: 1.55; color: var(--color-ink-soft); margin: 0; } .applicaa-one-page .dc-body-125n { font-size: 12.5px; line-height: normal; color: var(--color-ink-mute); margin: 0; } .applicaa-one-page .dc-body-11 { font-size: 11px; line-height: normal; color: var(--color-ink-mute); margin: 0; } .applicaa-one-page .dc-num-11 { font-family: var(--font-label); font-weight: 700; font-size: 11px; line-height: normal; color: var(--color-ink-mute); } /* ── Measures ──────────────────────────────────────────────────────────────────────────────── */ .applicaa-one-page .dc-measure-880 { max-width: 880px; } .applicaa-one-page .dc-measure-760 { max-width: 760px; } .applicaa-one-page .dc-measure-820 { max-width: 820px; } .applicaa-one-page .dc-measure-60c { max-width: 60ch; } /* ── Glows ─────────────────────────────────────────────────────────────────────────────────── */ .applicaa-one-page .dc-glow-760 { width: 760px; height: 760px; } .applicaa-one-page .dc-glow-top { left: 50%; top: -440px; right: auto; transform: translateX(-50%); filter: none; background: radial-gradient(circle, color-mix(in srgb, var(--color-coral-500) 10%, transparent), transparent 62%); } .applicaa-one-page .dc-glow-claim { right: -180px; top: -260px; filter: blur(14px); } /* ── 1 · Hero: the wordmark, the search tablist and the search bar ────────────────────────── */ /* The real ApplicaaOne wordmark (Media /m/43, 351x64). 22px tall is the height the reference's own text fallback used, so the eyebrow row's rhythm is unchanged; width follows the intrinsic ratio. `display: block` because it sits in an inline-flex row and the base reset's inline baseline gap would otherwise push the row off-centre. */ .applicaa-one-page .dc-one-mark { display: block; height: 22px; width: auto; } /* THE SEARCH TABLIST (owner, 2026-09-09). The DS `.tabs .tabs-pills .tabs-sm` supplies the whole segmented control - track, active pill, focus ring, aria-selected styling - so this carries only the deltas the hero needs: · inline-flex, so the track shrinks to its content and the hero's own `text-center` centres it (`.tabs` is display:flex, which would stretch it across the 880px measure); · a TRANSLUCENT paper track. The DS track is opaque page-bg-soft, which reads as a grey slab over this hero's white wash - the same delta the homepage's `.dc-ask-chips` makes, and for the same reason. color-mix, not rgba(), so the colour still resolves through a token; · the coral icon, at the size the old `.dc-pill-lg i` used - the four glyphs say what each mode searches, so they are content, not decoration. Both `.dc-pill-lg` and `.dc-pill-sm` are gone with the spans they styled: the four search pills became these tabs, and the four suggestion chips became phrases in the typing cycle. */ .applicaa-one-page .dc-one-tabs { display: inline-flex; flex-wrap: wrap; justify-content: center; background-color: color-mix(in srgb, var(--color-paper) 62%, transparent); } .applicaa-one-page .dc-one-tabs .tab { white-space: nowrap; } .applicaa-one-page .dc-one-tabs .tab i { font-size: 10px; color: var(--color-coral-500); } .applicaa-one-page .dc-searchbar { display: flex; align-items: center; gap: 14px; text-align: left; max-width: 640px; margin: 36px auto 0; background: #fff; border: 1px solid var(--color-rule); border-radius: var(--radius-full); box-shadow: 0 24px 64px rgba(15, 26, 79, 0.12); padding: 10px 12px 10px 26px; } .applicaa-one-page .dc-searchbar > i { flex: none; font-size: 15px; color: var(--color-ink-mute); } /* min-height pins the row while the typing cycle empties the query between phrases: the line box would otherwise collapse to the caret's 18px and the whole bar would breathe once per phrase. 24px is this span's own line box at 16px/1.5. */ .applicaa-one-page .dc-searchbar-q { flex: 1; min-width: 0; min-height: 24px; font-size: 16px; color: var(--color-ink-deep); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* The cycle made a latent mobile problem visible, and only on mobile: measured, the query has 454px at 768px and up, where the longest phrase needs 239px, so nothing clips there. At 390px it has 172px, and the bar was showing "open days at the w...". It was always this tight - the reference's own five cycled queries would have clipped too - one static short query just never exposed it. Two changes, both measured rather than guessed: no phrase in page.js exceeds 24 characters, and the query steps down to 14px below 768px. Measured after both: the widest phrase needs 155px of the 172 at 390px and 177px of the 454 at 768px, so 0 of the 20 clip at 390 / 480 / 768 / 1440. The gap and left padding come in with it to buy the last few pixels. 320px is past the brand's tested floor (992 / 768 / 480) and does still clip - the bar's own chrome leaves 102px there, which no type step recovers. */ @media (max-width: 767px) { .applicaa-one-page .dc-searchbar { gap: 10px; padding-left: 18px; } .applicaa-one-page .dc-searchbar-q { font-size: 14px; min-height: 21px; } } .applicaa-one-page .dc-search-caret { display: inline-block; width: 2px; height: 18px; margin-left: 2px; vertical-align: -3px; background: var(--color-coral-500); animation: prompt-card-caret 1.1s steps(1) infinite; } .applicaa-one-page .dc-searchbar-btn { flex: none; background: var(--color-coral-500); color: #fff; font-family: var(--font-heading); font-weight: 600; font-size: 14.5px; line-height: normal; padding: 12px 24px; border-radius: var(--radius-full); } /* ── 2 · The stat strip ────────────────────────────────────────────────────────────────────── */ .applicaa-one-page .dc-statstrip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; max-width: 1200px; margin: 0 auto; background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-4\.5); padding: 32px clamp(20px, 3vw, 40px); } /* ── 3 · The claim band ────────────────────────────────────────────────────────────────────── */ /* The green "free" pills. #34D07F on its own alpha wash is the reference's; our ok-green-bright IS #34D07F, so only the alphas are literal. */ .applicaa-one-page .dc-pill-free { font-family: var(--font-label); font-weight: 600; font-size: 9.5px; line-height: normal; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-ok-green-bright); background: rgba(52, 208, 127, 0.14); border: 1px solid rgba(52, 208, 127, 0.35); border-radius: var(--radius-full); padding: 4px 10px; gap: 7px; } .applicaa-one-page .dc-pill-free-lg { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-label); font-weight: 500; font-size: 11px; line-height: normal; letter-spacing: 0.07em; text-transform: uppercase; color: #fff; background: rgba(52, 208, 127, 0.16); border: 1px solid rgba(52, 208, 127, 0.4); border-radius: var(--radius-full); padding: 7px 15px; } .applicaa-one-page .dc-pill-free-lg i { font-size: 10px; color: var(--color-ok-green-bright); } .applicaa-one-page .dc-chip-dark-tick { font-family: var(--font-heading); font-weight: 600; font-size: 12.5px; line-height: normal; color: var(--dc-on-dark-bright); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--radius-full); padding: 7px 14px; gap: 7px; } .applicaa-one-page .dc-chip-dark-tick i { font-size: 9px; color: var(--color-ok-green-bright); } .applicaa-one-page .dc-chip-dark-quote { font-family: var(--font-heading); font-weight: 600; font-size: 12.5px; line-height: normal; color: var(--dc-on-dark-bright); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--radius-full); padding: 8px 15px; } .applicaa-one-page .dc-chip-soft { font-family: var(--font-heading); font-weight: 600; font-size: 12.5px; line-height: normal; color: var(--color-ink-soft); background: var(--color-page-bg); border: 1px solid var(--color-rule); border-radius: var(--radius-full); padding: 7px 13px; } /* the "WITH ADMISSIONS+" navy pill that marks every paid-tier section */ .applicaa-one-page .dc-pill-plus { font-family: var(--font-label); font-weight: 600; font-size: 9.5px; line-height: normal; letter-spacing: 0.07em; text-transform: uppercase; color: #fff; background: var(--color-ink-deep); border-radius: var(--radius-full); padding: 4px 10px; gap: 7px; } .applicaa-one-page .dc-pill-plus i { font-size: 8px; color: var(--color-coral-500); } .applicaa-one-page .dc-plus-row { display: flex; justify-content: center; margin: 12px 0 18px; } .applicaa-one-page .dc-plus-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: -6px 0 16px; } .applicaa-one-page .dc-preview { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--radius-5); padding: clamp(24px, 3vw, 32px); } .applicaa-one-page .dc-preview-head { display: grid; grid-template-columns: 1fr auto; gap: 16px 24px; align-items: center; } .applicaa-one-page .dc-preview-card { background: var(--color-paper); border-radius: var(--radius-4); padding: 24px 26px; margin-top: 22px; } .applicaa-one-page .dc-preview-badge { flex: none; font-family: var(--font-label); font-weight: 600; font-size: 9px; line-height: normal; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-mute); background: var(--dc-sand-2); border-radius: var(--radius-full); padding: 5px 11px; } .applicaa-one-page .dc-preview-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--color-rule); } .applicaa-one-page .dc-preview-key { font-size: 13px; font-weight: 500; color: var(--color-ink-mute); } .applicaa-one-page .dc-preview-val { font-family: var(--font-label); font-weight: 600; font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-ink-mute); } .applicaa-one-page .dc-preview-foot { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--color-rule); font-size: 12.5px; color: var(--color-ink-mute); } .applicaa-one-page .dc-preview-foot i { font-size: 11px; } /* 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. */ .applicaa-one-page .dc-glass-card { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--radius-4\.5); padding: 28px; transition-property: transform, border-color, background; transition-duration: 220ms, 220ms, 220ms; transition-timing-function: var(--dc-ease), ease, ease; } .applicaa-one-page .dc-glass-card:hover { transform: translateY(-4px); border-color: var(--color-coral-500); background: rgba(255, 255, 255, 0.12); } .applicaa-one-page .dc-tile-coral-44 { display: inline-flex; width: 44px; height: 44px; border-radius: var(--radius-3); background: var(--color-coral-500); align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(236, 99, 75, 0.35); } .applicaa-one-page .dc-tile-coral-44 i { font-size: 16px; color: #fff; } /* ── 4 · The capped white panel ───────────────────────────────────────────────────────────── */ .applicaa-one-page .dc-panel-cap { background: var(--color-paper); border-radius: var(--radius-5\.5); overflow: hidden; box-shadow: 0 26px 64px rgba(15, 26, 79, 0.1); } /* the 5px gradient cap — one of the few places a gradient is a RULE, not a fill */ .applicaa-one-page .dc-panel-cap-bar { height: 5px; background: linear-gradient(90deg, var(--color-coral-500), #F6A48F); } .applicaa-one-page .dc-panel-cap-body { padding: clamp(36px, 4.5vw, 56px) clamp(28px, 4vw, 56px); } .applicaa-one-page .dc-grid-endcta { display: grid; grid-template-columns: 1fr auto; gap: 22px 40px; align-items: end; justify-items: start; } .applicaa-one-page .dc-grid-endcta-mid { display: grid; grid-template-columns: 1fr auto; gap: clamp(24px, 4vw, 48px); align-items: center; } .applicaa-one-page .dc-bridge { margin-top: clamp(30px, 3.4vw, 40px); padding-top: clamp(30px, 3.4vw, 40px); border-top: 1px solid var(--color-rule); } .applicaa-one-page .dc-step-card { background: var(--color-page-bg); border-radius: var(--radius-3\.5); padding: 22px 24px; } .applicaa-one-page .dc-tile-38p { display: inline-flex; width: 38px; height: 38px; border-radius: var(--radius-3); background: var(--color-paper); align-items: center; justify-content: center; } .applicaa-one-page .dc-tile-38p i { font-size: 14px; color: var(--color-coral-500); } .applicaa-one-page .dc-mb-13 { margin-bottom: 13px; } /* ── 5 · The phone mock ───────────────────────────────────────────────────────────────────── */ .applicaa-one-page .dc-grid-half { grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; } .applicaa-one-page .dc-tray { display: flex; justify-content: center; background: var(--color-page-bg); border-radius: var(--radius-4); padding: 36px 0; } .applicaa-one-page .dc-phone { width: 290px; background: #fff; border: 1px solid var(--color-rule); border-radius: var(--radius-7); box-shadow: 0 20px 60px rgba(15, 26, 79, 0.14); padding: 20px 18px; } .applicaa-one-page .dc-phone-row { border: 1px solid var(--color-rule); border-radius: var(--radius-3); padding: 13px 14px; } .applicaa-one-page .dc-phone-row-dash { border: 1.5px dashed var(--color-coral-500); display: flex; align-items: center; justify-content: space-between; } .applicaa-one-page .dc-phone-foot { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 10.5px; color: var(--color-ink-mute); margin: 0; } .applicaa-one-page .dc-phone-foot i { font-size: 9px; } .applicaa-one-page .dc-flag-ok { font-family: var(--font-label); font-weight: 600; font-size: 9px; line-height: normal; text-transform: uppercase; color: var(--color-ok-green); background: #DFF1E5; border-radius: var(--radius-full); padding: 3px 8px; } .applicaa-one-page .dc-flag-mute { font-family: var(--font-label); font-weight: 600; font-size: 9px; line-height: normal; text-transform: uppercase; color: var(--color-ink-soft); background: var(--dc-sand-2); border-radius: var(--radius-full); padding: 3px 8px; } /* ── 6 · The Emma panel ───────────────────────────────────────────────────────────────────── */ .applicaa-one-page .dc-panel-emma { background: var(--color-dark-band); color: #fff; border-radius: var(--radius-5\.5); padding: clamp(32px, 4vw, 48px) clamp(28px, 4vw, 52px); } .applicaa-one-page .dc-guardrow { display: flex; flex-wrap: wrap; gap: 9px 20px; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 13px; line-height: 1.5; color: #8D9AB8; } .applicaa-one-page .dc-tick { margin-right: 7px; font-size: 10px; color: var(--color-ok-green-bright); } .applicaa-one-page .dc-cross { margin-right: 7px; font-size: 10px; color: var(--dc-on-dark-body); } /* ── 7 · The coral-wash band ──────────────────────────────────────────────────────────────── */ .applicaa-one-page .dc-band-wash { background: var(--color-coral-100); border-bottom: 1px solid #F6D6C8; } .applicaa-one-page .dc-card-enrol { background: var(--color-paper); border-radius: var(--radius-4\.5); box-shadow: 0 18px 48px rgba(15, 26, 79, 0.08); padding: 26px 28px; } .applicaa-one-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: 13px 15px; } /* #F2FBF5 is the reference's own palest green — no token is that light */ .applicaa-one-page .dc-offer-row-accepted { border: 1.5px solid var(--color-ok-green-bright); background: #F2FBF5; } .applicaa-one-page .dc-offer-row-closed { opacity: 0.55; } .applicaa-one-page .dc-struck { color: var(--color-ink-soft); text-decoration: line-through; } .applicaa-one-page .dc-card-enrol-foot { font-size: 12px; line-height: 1.5; color: var(--color-ink-soft); margin: 14px 0 0; padding-top: 13px; border-top: 1px solid var(--color-rule); } .applicaa-one-page .dc-card-gives { background: var(--color-dark-band); border-radius: var(--radius-4\.5); padding: 26px 28px; display: flex; flex-direction: column; gap: 14px; } .applicaa-one-page .dc-bullet-tick { margin: 0; gap: 11px; } .applicaa-one-page .dc-bullet-tick > i { flex: none; margin-top: 5px; font-size: 11px; color: var(--color-ok-green-bright); } .applicaa-one-page .dc-gives-foot { margin-top: auto; padding-top: 12px; letter-spacing: 0.05em; } /* ── 8 · Late places ──────────────────────────────────────────────────────────────────────── */ .applicaa-one-page .dc-panel-sand { background: var(--color-page-bg); border-radius: var(--radius-5\.5); box-shadow: 0 24px 60px rgba(15, 26, 79, 0.06); padding: clamp(36px, 4.5vw, 56px) clamp(28px, 4vw, 56px); } .applicaa-one-page .dc-panel-white { background: var(--color-paper); border-radius: var(--radius-5\.5); box-shadow: 0 24px 60px rgba(15, 26, 79, 0.06); padding: clamp(36px, 4.5vw, 56px) clamp(28px, 4vw, 56px); } /* a dashed "coming" button — deliberately NOT a .btn: it is not interactive in the reference */ .applicaa-one-page .dc-ghost-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--color-paper); border: 1px dashed var(--color-ink-mute); color: var(--color-ink-soft); border-radius: var(--radius-2); padding: 12px 20px; font-family: var(--font-heading); font-weight: 600; font-size: 14px; line-height: normal; } .applicaa-one-page .dc-card-matched { background: #fff; border: 1px solid var(--color-rule); border-radius: var(--radius-4); padding: 20px 22px; min-width: 280px; box-shadow: 0 12px 32px rgba(15, 26, 79, 0.08); } .applicaa-one-page .dc-matched-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--color-rule); } .applicaa-one-page .dc-matched-row:last-child { border-bottom: 0; } /* ── 9 · Insight panel ────────────────────────────────────────────────────────────────────── */ .applicaa-one-page .dc-grid-insight { grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; } .applicaa-one-page .dc-locked-mock-ruled { border: 1px solid var(--color-rule); gap: 12px; } .applicaa-one-page .dc-locked-veil { pointer-events: none; } .applicaa-one-page .dc-meter-grey > span { background: #5A6890; } .applicaa-one-page .dc-meter-82 > span { width: 82%; } .applicaa-one-page .dc-meter-52 > span { width: 52%; } .applicaa-one-page .dc-meter-28 > span { width: 28%; } /* ── 10 · Product cards ───────────────────────────────────────────────────────────────────── */ /* THE AUDIT'S BLIND SPOT, found by measuring: `.dc-grid-3` existed ONLY inside the <=991px media query, so the class audit passed (the selector text is present) while at desktop the grid had no columns at all and six cards stacked - the section ran 605px long. A class audit proves a class is DEFINED somewhere; only a measurement proves it is defined where it is needed. */ .applicaa-one-page .dc-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .applicaa-one-page .dc-grid-prod { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .applicaa-one-page .dc-gap-prod { gap: 6px 10px; } /* 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. */ .applicaa-one-page .dc-prod { display: block; background: var(--color-page-bg); border-radius: var(--radius-4); padding: 26px 28px; text-decoration: none; color: inherit; transition-property: transform, box-shadow; transition-duration: 220ms, 220ms; transition-timing-function: var(--dc-ease), ease; } .applicaa-one-page .dc-prod:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(15, 26, 79, 0.1); } .applicaa-one-page .dc-prod-flat:hover { transform: none; box-shadow: none; } .applicaa-one-page .dc-prod-more { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; font-family: var(--font-heading); font-weight: 600; font-size: 12.5px; color: var(--color-coral-500); } .applicaa-one-page .dc-prod-more i { font-size: 10px; } /* ── 11 · Regional reach ──────────────────────────────────────────────────────────────────── */ .applicaa-one-page .dc-grid-reach { grid-template-columns: 1fr 1.15fr; gap: clamp(24px, 3vw, 32px) clamp(28px, 4vw, 56px); align-items: start; } .applicaa-one-page .dc-grid-cities { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; } .applicaa-one-page .dc-city-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0; } .applicaa-one-page .dc-city-pct { font-family: var(--font-label); font-weight: 700; font-size: 12.5px; color: var(--color-coral-500); } .applicaa-one-page .dc-bar { height: 7px; background: var(--dc-sand-2); border-radius: var(--radius-1); margin-top: 6px; overflow: hidden; } .applicaa-one-page .dc-bar > span { display: block; height: 100%; border-radius: var(--radius-1); background: var(--color-ink-deep); } .applicaa-one-page .dc-bar-63 > span, .applicaa-one-page .dc-bar-63 { width: 100%; } .applicaa-one-page .dc-bar-63 > span { width: 63%; } .applicaa-one-page .dc-bar-57 > span { width: 57%; } .applicaa-one-page .dc-bar-55 > span { width: 55%; } .applicaa-one-page .dc-bar-53 > span { width: 53%; } .applicaa-one-page .dc-bar-46 > span { width: 46%; } .applicaa-one-page .dc-bar-43 > span { width: 43%; } .applicaa-one-page .dc-bar-39 > span { width: 39%; } .applicaa-one-page .dc-bar-37 > span { width: 37%; } .applicaa-one-page .dc-grid-strands { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-top: clamp(22px, 2.4vw, 30px); border-top: 1px solid var(--color-rule); } .applicaa-one-page .dc-strand { background: var(--color-page-bg); border-radius: var(--radius-3\.5); padding: 22px 24px; } /* ── 12 · The loop ────────────────────────────────────────────────────────────────────────── */ .applicaa-one-page .dc-loopbar-row { display: flex; align-items: center; gap: 14px; max-width: 1200px; margin: 0 auto 18px; } .applicaa-one-page .dc-loopbar { flex: 1; height: 3px; background: var(--dc-sand-2); border-radius: var(--radius-0\.5); overflow: hidden; } .applicaa-one-page .dc-loopbar-fill { display: block; height: 100%; width: 25%; background: var(--color-coral-500); border-radius: var(--radius-0\.5); transition: width 500ms var(--dc-ease); } /* the four stage widths as classes — page.js toggles these rather than writing a style property */ .applicaa-one-page .dc-loopbar-1 { width: 25%; } .applicaa-one-page .dc-loopbar-2 { width: 50%; } .applicaa-one-page .dc-loopbar-3 { width: 75%; } .applicaa-one-page .dc-loopbar-4 { width: 100%; } .applicaa-one-page .dc-grid-loop { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } /* 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. */ .applicaa-one-page .dc-loop-tile { display: inline-flex; width: 40px; height: 40px; border-radius: var(--radius-3); background: var(--color-page-bg); align-items: center; justify-content: center; transition-property: background; transition-duration: 250ms; transition-timing-function: ease; } .applicaa-one-page .dc-loop-tile i { font-size: 15px; color: var(--color-coral-500); transition: color 250ms ease; } /* The DS highlight variant owns selected-card styling; these rules only coordinate its contents. */ .applicaa-one-page .card-highlight .dc-loop-tile { background: var(--color-coral-500); } .applicaa-one-page .card-highlight .dc-loop-tile i { color: #fff; } .applicaa-one-page .card-highlight .dc-loop-num { color: var(--color-coral-500); } .applicaa-one-page .dc-loop-detail { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; margin-top: 16px; background: var(--color-dark-band); border-radius: var(--radius-4\.5); padding: clamp(26px, 3vw, 36px) clamp(26px, 3.2vw, 40px); } .applicaa-one-page .dc-loop-detail-num { flex: none; font-family: var(--font-heading); font-weight: 700; font-size: clamp(34px, 4vw, 52px); line-height: 1; letter-spacing: -0.04em; color: rgba(255, 255, 255, 0.22); } .applicaa-one-page .dc-loop-detail-body { font-family: var(--font-heading); font-weight: 500; font-size: clamp(16px, 1.9vw, 21px); line-height: 1.45; letter-spacing: -0.014em; color: #fff; margin: 0; text-wrap: pretty; } .applicaa-one-page .dc-loop-foot { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 26px 0 0; font-family: var(--font-label); font-weight: 500; font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-coral-500); } .applicaa-one-page .dc-loop-foot i { font-size: 12px; } /* ── 13 · The quote card ──────────────────────────────────────────────────────────────────── */ .applicaa-one-page .dc-quote-card { margin: 0; background: var(--color-paper); border-radius: var(--radius-4\.5); box-shadow: 0 14px 40px rgba(15, 26, 79, 0.07); padding: 30px 32px; display: flex; flex-direction: column; } .applicaa-one-page .dc-quote-mark { font-size: 14px; color: var(--color-coral-500); } .applicaa-one-page .dc-pt-20 { padding-top: 20px; } /* ── Responsive ───────────────────────────────────────────────────────────────────────────── */ /* THE REFERENCE'S OWN BREAKPOINTS, and only those: it collapses content at 1080px and again at 720px (its other queries — 1120, 940, 560 — all target chrome we do not port). The 991px and 640px blocks that used to be here were invented; each rule below is one of the reference's, moved to the value the reference actually uses. The reference changes grid-template-columns only, never the gap, so the gap overrides went with them. Three grids deliberately have NO rule: §5 (1fr 1fr), §8 (1fr auto) and §9 (1.1fr 1fr) stay two columns all the way down in the reference — it has no query for them at all. The squeeze is recorded in STATUS.md rather than fixed here. */ @media (max-width: 1080px) { /* 4-up and 3-up grids step to two columns first (statgrid, bridgegrid, provgrid, loopgrid) */ .applicaa-one-page .dc-statstrip, .applicaa-one-page .dc-grid-4, .applicaa-one-page .dc-grid-3, .applicaa-one-page .dc-grid-loop { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* the two-column splits go straight to one (previewhead, upgradepanel + emmagrid, enrolgrid, prodgrid, reachgrid) */ .applicaa-one-page .dc-preview-head, .applicaa-one-page .dc-grid-endcta, .applicaa-one-page .dc-grid-2, .applicaa-one-page .dc-grid-prod, .applicaa-one-page .dc-grid-reach { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 720px) { .applicaa-one-page .dc-grid-3, .applicaa-one-page .dc-grid-4, .applicaa-one-page .dc-grid-loop, .applicaa-one-page .dc-grid-strands, .applicaa-one-page .dc-grid-cities { grid-template-columns: minmax(0, 1fr); } } /* Margin literals, last in the file so they win at equal specificity over the blanket `[class*="dc-t-"] { margin: 0 }` rule (which silently defeats any Tailwind `mt-*` / `mb-*` utility). */ .applicaa-one-page .dc-mt-3 { margin-top: 3px; } .applicaa-one-page .dc-mt-4 { margin-top: 4px; } .applicaa-one-page .dc-mt-7 { margin-top: 7px; } .applicaa-one-page .dc-mt-8 { margin-top: 8px; } .applicaa-one-page .dc-mt-16 { margin-top: 16px; } .applicaa-one-page .dc-mt-20 { margin-top: 20px; } .applicaa-one-page .dc-mt-24 { margin-top: 24px; } .applicaa-one-page .dc-mt-32 { margin-top: 32px; } .applicaa-one-page .dc-mb-7 { margin-bottom: 7px; } .applicaa-one-page .dc-mb-16 { margin-bottom: 16px; } .applicaa-one-page .dc-mb-40 { margin-bottom: 40px; } /* ── 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) { .applicaa-one-page .dc-grid-endcta-mid, .applicaa-one-page .dc-grid-half, .applicaa-one-page .dc-grid-insight, .applicaa-one-page .dc-loop-detail, .applicaa-one-page .dc-statstrip { grid-template-columns: minmax(0, 1fr); } } /* .dc-grid-endcta is already collapsed by the 1080 query above - not restated here. Its phone defect is different: `justify-items: start` sizes each item to max-content, so a 356px child sits in a 286px track and is clipped by the panel. Stretch makes items take the track. */ @media (max-width: 640px) { .applicaa-one-page .dc-grid-endcta { justify-items: stretch; } } /* The Emma quote chip is `white-space: nowrap`, so at 390 it runs 356px inside a 342px panel and is cut. A quote is prose - let it wrap on a phone rather than lose its end. */ @media (max-width: 640px) { .applicaa-one-page .dc-chip-dark-quote { white-space: normal; } } /* ── Reduced motion ───────────────────────────────────────────────────────────────────────── */ /* The search caret is the only animation this page declares itself (everything else is a DS component or _shared), so its reduce gate belongs here. page.js stops the typing cycle at the same setting and paints the phrase whole, so the pair degrades to a plain filled-in query. */ @media (prefers-reduced-motion: reduce) { .applicaa-one-page .dc-search-caret { animation: none; } }