/* Customer Success — page CSS * ============================================================================================ * FAITHFUL (1:1) reproduction of "Customer Success.dc.html" (6 sections) without its inline * styles. Every value is read out of the reference file. * * STRATEGY (WORKFLOW.md): the markup uses DESIGN-SYSTEM classes wherever the DS has the right * component; this file carries the package's metric DELTAS as page-scoped overrides. Tuning * toward the DS later = deleting overrides, not rewriting markup. * * PROVENANCE: descended from prototypes/sixth-forms/page.css — the container override, the * dc-py-* padding-pair convention, the dc-t-* / dc-body-* / dc-label-* scales, dc-tr-*, the * colour helpers, dc-tile-sand and dc-avatar all carry over. This is the * SHORTEST page in the set and it drops most of the archetype: no marquee, no Emma band, no * chat mock, no journey, no MIS strip. What is new is marked "NEW FOR THIS PAGE". * * TOKENS: identical to the reference — ink scale, coral 500/100, page-bg, paper, rule, * dark-band, shadow-soft (= the reference's 0 14px 40px/.07). * Hairline: var(--color-rule) — #ECEEF3 closed 2026-08-17, no second token. * DIFFERENT, so declared here (keep the reference's colours): #9AA6C2 body copy on dark. * Shadows with no token: 0 18px 48px/.07 (the extra-mile panel) and 0 10px 24px rgba(coral,.28) * (the coral icon tile's own glow) and 0 12px 32px/.08 (the selected tab). * * GEOMETRY: reference container is 1200px with a 24px gutter (DS is 1224/32) — page-local; the * hero, the quote and nothing else are narrowed to 900px. * ============================================================================================ */ .customer-success-page { --dc-on-dark-body: var(--color-on-dark-body); --dc-shadow-panel: 0 18px 48px rgba(15, 26, 79, 0.07); --dc-shadow-tab: 0 12px 32px rgba(15, 26, 79, 0.08); --dc-shadow-coral: 0 10px 24px rgba(236, 99, 75, 0.28); --dc-ease: cubic-bezier(.2, .8, .2, 1); /* The DS does not set Inter on body/.app, so the page root carries the family exactly as the reference's own wrapper does. */ font-family: var(--font-sans); background: var(--color-page-bg); } /* ── Container: 1200px, 24px gutter — set-wide, `_shared/page-shared.css` §2 ─────────── */ /* the hero and the quote are narrowed to 900px in the reference */ .customer-success-page .dc-narrow { max-width: 900px; margin-left: auto; margin-right: auto; } /* ── Hero centring - DEPARTURE FROM THE REFERENCE, owner-approved 2026-08-17 ─────────────── */ /* The reference left-aligns this hero; Phong asked for it centred. `.dc-narrow` above already centres the 900px BOX, so this only centres the TEXT in it - plus the lede, which carries its own `dc-ch-58` measure and would otherwise left-hug inside a centred box (the failure mode coding-standards §2 rule 7 describes: the property reads right, the text lands wrong). `margin-inline`, not the `margin` shorthand, and at 0-3-0 so it outranks `.dc-lede { margin: 0 }` (0-2-0) whose shorthand would erase margin-inline - rules 2 and 6. The mono fact row is a flex row, so it needs its own main-axis centring; text-align does not reach it. */ .customer-success-page .dc-hero-centred { text-align: center; } .customer-success-page .dc-hero-centred [class*="dc-ch-"] { margin-inline: auto; } .customer-success-page .dc-hero-centred .dc-facts { justify-content: center; } /* 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 ────────────────────────────────────────────────────────────────────── */ /* Flat after the hero: first-section top is the set-wide 128px (`_shared/page-shared.css` §1), then 0/88, so the whole page reads as one continuous column rather than alternating bands. */ .customer-success-page .dc-py-40 { padding-bottom: 40px; } .customer-success-page .dc-py-0-88 { padding-top: 0; padding-bottom: 88px; } /* ── Display type ───────────────────────────────────────────────────────────────────────── */ .customer-success-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(.customer-success-page [class*="dc-t-"]) { margin: 0; text-wrap: balance; } .customer-success-page .dc-t-74 { font-size: clamp(38px, 5.4vw, 74px); line-height: 1.02; letter-spacing: -0.04em; } .customer-success-page .dc-t-62 { font-size: clamp(30px, 4.6vw, 62px); line-height: 1.03; letter-spacing: -0.04em; } .customer-success-page .dc-t-48 { font-size: clamp(28px, 3.8vw, 48px); line-height: 1.08; letter-spacing: -0.03em; } .customer-success-page .dc-t-34 { font-size: clamp(22px, 2.8vw, 34px); line-height: 1.14; letter-spacing: -0.024em; } .customer-success-page .dc-t-17 { font-size: 17px; line-height: 1.28; letter-spacing: -0.014em; } .customer-success-page .dc-t-17n { font-size: 17px; line-height: normal; letter-spacing: -0.014em; } .customer-success-page .dc-t-16 { font-size: 16px; line-height: normal; letter-spacing: -0.014em; } .customer-success-page .dc-t-15h { font-size: 15.5px; line-height: normal; letter-spacing: -0.012em; } .customer-success-page .dc-t-14h { font-size: 14.5px; line-height: normal; } .customer-success-page .dc-q-24 { font-family: var(--font-heading); font-weight: 500; font-size: clamp(17px, 2.1vw, 24px); line-height: 1.45; letter-spacing: -0.015em; margin: 0; text-wrap: pretty; } /* ── Body copy steps (Inter), named by px ───────────────────────────────────────────────── */ .customer-success-page .dc-lede { font-size: clamp(16px, 1.8vw, 19px); line-height: 1.55; color: var(--color-ink-soft); margin: 0; } .customer-success-page .dc-body-15h{ font-size: 15.5px; line-height: 1.6; color: var(--color-ink-soft); margin: 0; } .customer-success-page .dc-body-15 { font-size: 15px; line-height: 1.6; color: var(--color-ink-soft); margin: 0; } .customer-success-page .dc-body-13h{ font-size: 13.5px; line-height: 1.55; color: var(--color-ink-soft); margin: 0; } .customer-success-page .dc-body-13 { font-size: 13.5px; line-height: 1.5; color: var(--color-ink-soft); margin: 0; } .customer-success-page .dc-body-13p{ font-size: 13px; line-height: 1.5; color: var(--color-ink-soft); margin: 0; } .customer-success-page .dc-body-12h{ font-size: 12.5px; line-height: 1.45; color: var(--color-ink-soft); margin: 0; } .customer-success-page .dc-closer-lede { font-size: clamp(16px, 2vw, 20px); line-height: 1.5; color: rgba(255, 255, 255, 0.92); } /* ── Mono labels (IBM Plex Mono) ────────────────────────────────────────────────────────── */ /* The reference writes these with the `font:` SHORTHAND and no `/line-height`, so line-height resets to `normal`; inheriting 1.5 instead makes every label ~4px too tall, which was the single biggest source of height error across this batch. */ .customer-success-page [class*="dc-label-"], .customer-success-page .dc-eyebrow { font-family: var(--font-label); font-weight: 500; line-height: normal; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-mute); margin: 0; } .customer-success-page .dc-eyebrow { display: block; font-size: 12.5px; color: var(--color-coral-500); } .customer-success-page .dc-eyebrow-hero { font-size: 12px; letter-spacing: 0.09em; color: var(--color-ink-mute); } .customer-success-page .dc-label-11 { font-size: 11px; } .customer-success-page .dc-label-10h { font-size: 10.5px; } .customer-success-page .dc-label-10 { font-size: 10px; } /* the card's step number is the one BOLD mono label on the page */ .customer-success-page .dc-num { font-weight: 700; font-size: 11px; letter-spacing: 0; } .customer-success-page .dc-tr-05 { letter-spacing: 0.05em; } .customer-success-page .dc-tr-07 { letter-spacing: 0.07em; } /* ── Colour helpers ─────────────────────────────────────────────────────────────────────── */ .customer-success-page .dc-on-dark-body { color: var(--dc-on-dark-body); } .customer-success-page .dc-coral { color: var(--color-coral-500); } .customer-success-page .dc-mute { color: var(--color-ink-mute); } /* ── The hero's mono fact row ────────────────────────────────────────────────────────────── */ /* NEW FOR THIS PAGE: three mono facts on a hairline, in place of the illustrative mock every audience page opens with. The whole hero is 900px wide and left-aligned. */ .customer-success-page .dc-facts { display: flex; align-items: center; gap: 10px 26px; flex-wrap: wrap; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--color-rule); } /* ── The two-way support tab row ─────────────────────────────────────────────────────────── */ /* NEW FOR THIS PAGE, and the switcher mechanism here is a pair of wide LABEL+SUBLABEL cards (state schools vs independent schools) rather than a rail, a stepper or a carousel — the fifth distinct mechanism across this archetype. Each tab is a bordered card that gains a coral border, a paper fill and a shadow when selected; the panels are display-switched, so the DS tabs controller drives it and the page needs no JS for it. */ .customer-success-page .dc-tabrow { display: flex; flex-wrap: wrap; margin-bottom: 26px; } .customer-success-page .dc-tab { flex: 1; min-width: 220px; flex-direction: column; align-items: flex-start; text-align: left; } .customer-success-page .dc-tab-label { display: block; color: var(--color-ink-soft); } .customer-success-page .dc-tab-sub { display: block; margin-top: 3px; color: var(--color-ink-mute); } .customer-success-page .dc-tab[aria-selected="true"] .dc-tab-label { color: var(--color-ink-deep); } /* ── The numbered support cards ──────────────────────────────────────────────────────────── */ /* NEW FOR THIS PAGE: a 3-up of white cards, each with a CORAL-FILLED icon tile (the audience pages use a white tile with a coral glyph instead) and a mono step number opposite it. */ .customer-success-page .dc-sup-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .customer-success-page .dc-sup-card { display: flex; flex-direction: column; background: var(--color-paper); border-radius: var(--radius-4\.5); box-shadow: var(--shadow-soft); padding: 26px 28px; } .customer-success-page .dc-sup-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .customer-success-page .dc-tile-coral { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 42px; height: 42px; border-radius: var(--radius-3); background: var(--color-coral-500); box-shadow: var(--dc-shadow-coral); } .customer-success-page .dc-tile-coral > i { font-size: 16px; color: #fff; } .customer-success-page .dc-sup-cta { margin-top: auto; padding-top: 14px; text-decoration: none; font-family: var(--font-heading); font-weight: 600; font-size: 13px; line-height: normal; color: var(--color-coral-500); } .customer-success-page .dc-sup-cta:hover { color: var(--color-ink-deep); } .customer-success-page .dc-sup-cta > i { font-size: 9px; } .customer-success-page .dc-sup-hours { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--color-rule); } /* ── The in-person training strip (dark, state-schools track only) ───────────────────────── */ /* NEW FOR THIS PAGE. Note this page's ONLY dark surfaces are this strip and the quote panel — there is no full-bleed dark band at all. */ .customer-success-page .dc-strip-dark { display: flex; align-items: center; gap: 20px 32px; flex-wrap: wrap; margin-top: 16px; background: var(--color-dark-band); border-radius: var(--radius-4\.5); padding: clamp(26px, 3vw, 34px) clamp(26px, 3.4vw, 40px); } .customer-success-page .dc-strip-body { flex: 1; min-width: 280px; } .customer-success-page .dc-tile-coral-44 { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: var(--radius-3); background: var(--color-coral-500); } .customer-success-page .dc-tile-coral-44 > i { font-size: 16px; color: #fff; } /* ── "Going the extra mile": a white panel + two link rows ───────────────────────────────── */ .customer-success-page .dc-panel-white { background: var(--color-paper); border-radius: var(--radius-5); box-shadow: var(--dc-shadow-panel); padding: clamp(30px, 3.4vw, 44px) clamp(28px, 3.6vw, 48px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(28px, 4vw, 56px); align-items: center; } .customer-success-page .dc-links { display: flex; flex-direction: column; gap: 12px; } .customer-success-page .dc-link-row { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; background: var(--color-page-bg); border-radius: var(--radius-3\.5); padding: 18px 20px; transition: background 200ms ease; } .customer-success-page .dc-link-row:hover { background: var(--color-coral-100); } .customer-success-page .dc-link-body { flex: 1; } .customer-success-page .dc-tile-sand { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius-2\.5); background: var(--color-paper); } .customer-success-page .dc-tile-sand > i { font-size: 14px; color: var(--color-coral-500); } /* ── The quote panel (inset dark, 900px) ─────────────────────────────────────────────────── */ .customer-success-page .dc-quote-panel { position: relative; overflow: hidden; background: var(--color-dark-band); border-radius: var(--radius-5\.5); padding: clamp(34px, 4vw, 52px) clamp(28px, 4vw, 48px); margin: 0 auto; max-width: 900px; } .customer-success-page .dc-quote-foot { display: flex; align-items: center; gap: 13px; margin-top: 26px; } .customer-success-page .dc-avatar { 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; line-height: normal; } .customer-success-page .dc-quote-name { font-family: var(--font-heading); font-weight: 600; font-size: 15px; line-height: normal; color: #fff; } /* ── The help-links strip ────────────────────────────────────────────────────────────────── */ .customer-success-page .dc-help { display: flex; align-items: center; gap: 16px 28px; flex-wrap: wrap; background: var(--color-paper); border-radius: var(--radius-4\.5); box-shadow: var(--shadow-soft); padding: 28px 30px; } .customer-success-page .dc-help-body { flex: 1; min-width: 280px; } .customer-success-page .dc-help-links { flex: none; display: flex; gap: 8px 18px; flex-wrap: wrap; } .customer-success-page .dc-help-link { font-family: var(--font-heading); font-weight: 600; font-size: 14px; line-height: normal; color: var(--color-coral-500); text-decoration: none; } .customer-success-page .dc-help-link:hover { color: var(--color-ink-deep); } .customer-success-page .dc-help-link > i { font-size: 11px; margin-right: 7px; } .customer-success-page .dc-tile-help { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--radius-3); background: var(--color-page-bg); } .customer-success-page .dc-tile-help > i { font-size: 16px; color: var(--color-coral-500); } /* ── Measures ───────────────────────────────────────────────────────────────────────────── */ .customer-success-page .dc-measure-780 { max-width: 780px; } .customer-success-page .dc-ch-58 { max-width: 58ch; } .customer-success-page .dc-ch-46 { max-width: 46ch; } /* ── Spacing steps the build does not carry ──────────────────────────────────────────────── */ /* `prototypes/` is not a Tailwind scan source and the compiled spacing surface is patchy anyway (mb-11 exists, mt-11 does not), so the reference's exact values are declared here named by px rather than rounded to whatever happens to compile. */ .customer-success-page .dc-mt-2 { margin-top: 2px; } .customer-success-page .dc-mt-4 { margin-top: 4px; } .customer-success-page .dc-mt-6 { margin-top: 6px; } .customer-success-page .dc-mt-14 { margin-top: 14px; } .customer-success-page .dc-mt-18 { margin-top: 18px; } .customer-success-page .dc-mt-20 { margin-top: 20px; } .customer-success-page .dc-mt-22 { margin-top: 22px; } .customer-success-page .dc-mt-30 { margin-top: 30px; } .customer-success-page .dc-mb-7 { margin-bottom: 7px; } .customer-success-page .dc-mb-12 { margin-bottom: 12px; } .customer-success-page .dc-mb-14 { margin-bottom: 14px; } .customer-success-page .dc-mb-28 { margin-bottom: 28px; } /* THE REFERENCE'S OWN COLLAPSE, AND ONLY IT (WORKFLOW.md §5b). * * Audited every `@media` rule in Customer Success.dc.html against this file. Its content rules are * exactly these two: `[data-supgrid]` 3 → 2 columns at 1000px and → 1 at 680px, and * `[data-extragrid]` → 1 column at 1000px (that is `.dc-panel-white`). Reproduced 1:1 below. * Everything else in the reference's media list is boilerplate for selectors this page never uses: * `[data-csgrid]`/`[data-csrow]` at 1080/640px, `[data-footgrid]` at 1080/560px and * `[data-nav-demo]`/`[data-nav-2]` at 1120/940px (chrome, which we do not copy), plus the * reduced-motion reset. Nothing was added on top — a breakpoint we invent to help a phone is a * divergence, and the narrow-viewport squeeze that remains is the reference's own. */ @media (max-width: 1000px) { .customer-success-page .dc-sup-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .customer-success-page .dc-panel-white { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 680px) { .customer-success-page .dc-sup-grid { grid-template-columns: minmax(0, 1fr); } } /* ── Closer ─────────────────────────────────────────────────────────────────────────────── */ /* Full-bleed FLAT coral (not the inset panel some sibling pages use), at the reference's own taller clamp — so `.cta-section .cta-section-flat` with one padding override. */ .customer-success-page .cta-section { padding: clamp(64px, 9vw, 120px) 24px; } /* ── Reduced motion ─────────────────────────────────────────────────────────────────────── */ /* Deliberately empty: this page declares no @keyframes of its own, and the DS components it uses (section-glow drift) already stop themselves under prefers-reduced-motion. A blanket `* { animation: … !important }` would break coding-standards §6 for no gain — the house precedent set on secondary/. The only page-owned motion is hover/selection transitions. */