/* Offers — page CSS * ============================================================================================ * FAITHFUL (1:1) reproduction of "Offers.dc.html" (5 sections) without its inline styles. * Every value below is read out of the reference file itself, not guessed. * * 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 is then deleting overrides, not rewriting markup. * * PROVENANCE: descended directly from prototypes/webinars/page.css, its batch sibling and the * nearest archetype — both are short RESOURCES-family pages built from full-width panels on * page-bg rather than the audience pages' alternating bands. Carried over unchanged: the * container override, the dc-py- pair convention, the dc-t- / dc-body- / dc-label- scales, * dc-tr-, the on-dark colour helpers, the dc-mt- steps and — the one real * device — the TOP-CENTRED hero glow, which is byte-identical in the two references. * What is new is marked "NEW FOR THIS PAGE". * * WHERE IT DIVERGES FROM WEBINARS: no card grid and no filter (so no page.js at all); the * hero is CENTRED, not left-aligned, and opens at 148px because this page has no resources * sub-nav above it; and the page does NOT close on the coral band — its closer is a WHITE * band on a top hairline, the only one of the two. * * TOKENS: identical to the reference and therefore used as-is — the ink scale, coral-500 * #EC634B, coral-100 #FFE7DD (the reference's `--accent-soft`), page-bg #F4F5F9, paper, * dark-band #0B1023. * * Hairline: var(--color-rule) — #ECEEF3 closed 2026-08-17, no second token. * DIFFERENT, so declared here (owner's call: keep the reference's colours): * #F8D2C3 the coral stat card's border * #F0C3AE the coral stat card's divider rule * #9AA6C2 body copy ON DARK * #C9D1E6 bright copy ON DARK * #8494BC the small-print note ON DARK * One shadow has no token: the panel's 0 18px 48px rgba(15,26,79,.08). * * GEOMETRY: the reference container is max-width 1200px with a 24px gutter; our DS is * 1224px / 32px. Overridden page-locally only — .page-container and .section are untouched. * ============================================================================================ */ .offers-page { --dc-coral-border: #F8D2C3; --dc-coral-rule: #F0C3AE; --dc-on-dark-body: var(--color-on-dark-body); --dc-on-dark-bright: var(--color-on-dark-bright); --dc-on-dark-note: var(--color-ink-mute); --dc-shadow-panel: 0 18px 48px rgba(15, 26, 79, 0.08); --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 closing band are narrowed to 900px and centred */ .offers-page .dc-narrow { max-width: 900px; margin-left: auto; margin-right: auto; } /* 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 ────────────────────────────────────────────────────────────────────── */ /* 148px at the top because this page has NO resources sub-nav between the fixed header and the hero (Webinars does, which is why its hero opens at 40). Then 40/88 and 0/88, closing on a symmetrical 88/88 white band. */ .offers-page .dc-py-148-48 { padding-bottom: 48px; } .offers-page .dc-py-40-88 { padding-top: 40px; padding-bottom: 88px; } .offers-page .dc-py-0-88 { padding-top: 0; padding-bottom: 88px; } .offers-page .dc-py-88 { padding-top: 88px; padding-bottom: 88px; } /* ── Display type ───────────────────────────────────────────────────────────────────────── */ .offers-page [class*="dc-t-"] { font-family: var(--font-heading); font-weight: 700; } /* margin at ZERO specificity, via :where(), so an ordinary utility can override it. Written as a plain descendant selector this is 0-2-0 and silently beats every unlayered Tailwind margin utility (0-1-0) — `mt-5` on a dc-t- heading would do nothing at all. Same trick the design system uses for heading element defaults, :where(.app h3). */ :where(.offers-page [class*="dc-t-"]) { margin: 0; } /* text-wrap: balance is set per step, NOT blanket — the reference balances only the four section headlines, never a card title or a numeral. */ .offers-page .dc-t-68 { font-size: clamp(36px, 5vw, 68px); line-height: 1.03; letter-spacing: -0.04em; text-wrap: balance; } .offers-page .dc-t-48 { font-size: clamp(28px, 3.8vw, 48px); line-height: 1.06; letter-spacing: -0.032em; text-wrap: balance; } .offers-page .dc-t-44 { font-size: clamp(26px, 3.4vw, 44px); line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; } .offers-page .dc-t-42 { font-size: clamp(26px, 3.4vw, 42px); line-height: 1.1; letter-spacing: -0.028em; text-wrap: balance; } .offers-page .dc-t-15h{ font-size: 15.5px; line-height: 1.35; letter-spacing: normal; } .offers-page .dc-t-15 { font-size: 15px; line-height: normal; letter-spacing: normal; } .offers-page .dc-t-15l{ font-size: 15px; line-height: 1.35; letter-spacing: normal; } /* The stat numerals. Same Proxima 700 family as the headings (hence the dc-t- prefix), but line-height 1 and a much tighter track — the package's "stat pairing" device. */ .offers-page .dc-t-76n { font-size: clamp(48px, 6vw, 76px); line-height: 1; letter-spacing: -0.05em; color: var(--color-coral-500); } .offers-page .dc-t-60n { font-size: clamp(38px, 4.6vw, 60px); line-height: 1; letter-spacing: -0.05em; } .offers-page .dc-t-50n { font-size: clamp(34px, 4vw, 50px); line-height: 1; letter-spacing: -0.045em; color: var(--color-coral-500); } /* ── Body copy steps (Inter), named by px ───────────────────────────────────────────────── */ .offers-page .dc-lede { font-size: clamp(16px, 1.8vw, 18.5px); line-height: 1.6; color: var(--color-ink-soft); } .offers-page .dc-body-16 { font-size: 16px; line-height: 1.65; color: var(--color-ink-soft); margin: 0; } .offers-page .dc-body-13h{ font-size: 13.5px; line-height: 1.5; color: var(--color-ink-soft); margin: 0; } .offers-page .dc-body-13 { font-size: 13px; line-height: 1.5; color: var(--color-ink-soft); margin: 0; } /* ── Mono labels (IBM Plex Mono) ────────────────────────────────────────────────────────── */ /* The reference writes every label with the `font:` SHORTHAND and no `/line-height`, so they all compute to `normal`; inheriting our 1.5 instead makes each one several px too tall, which is the single biggest source of height error in a port like this. */ .offers-page [class*="dc-label-"], .offers-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; } .offers-page .dc-eyebrow { display: block; font-size: 12.5px; color: var(--color-coral-500); } .offers-page .dc-eyebrow-hero { font-size: 12px; letter-spacing: 0.09em; color: var(--color-ink-mute); } .offers-page .dc-label-9 { font-size: 9.5px; letter-spacing: 0.07em; } /* ── Colour helpers ─────────────────────────────────────────────────────────────────────── */ .offers-page .dc-on-dark-body { color: var(--dc-on-dark-body); } .offers-page .dc-on-dark-bright { color: var(--dc-on-dark-bright); } .offers-page .dc-on-dark-note { color: var(--dc-on-dark-note); } /* ── The hero glow ──────────────────────────────────────────────────────────────────────── */ /* Byte-identical to the Webinars hero glow and to 19 of the package's 38 files: TOP-CENTRED, 700px, coral at 10%, unblurred. The DS `.section-glow` is 520px with four CORNER placements only, so no combination of DS classes can express it — see the report. */ .offers-page .dc-glow-hero { position: absolute; pointer-events: none; width: 700px; height: 700px; left: 50%; top: -440px; transform: translateX(-50%); background: radial-gradient(circle, rgba(236, 99, 75, 0.1), transparent 62%); } /* §3's panel glow IS the DS coral glow; only the reference's size (560 not 520), offset and 12px blur move here. */ .offers-page .dc-glow-mat { width: 560px; height: 560px; right: -200px; top: -250px; filter: blur(12px); } /* ── §1 · The hero's anchor-pill row ────────────────────────────────────────────────────── */ /* NEW FOR THIS PAGE: three in-page anchors as hairlined white pills. Deliberately NOT the DS `.badge` — these are navigation with a hover state, not labels. */ .offers-page .dc-anchors { display: flex; align-items: center; justify-content: center; gap: 10px 26px; flex-wrap: wrap; } .offers-page .dc-anchor { font-family: var(--font-heading); font-weight: 600; font-size: 14px; line-height: normal; color: var(--color-ink-deep); text-decoration: none; padding: 10px 18px; border-radius: var(--radius-full); border: 1px solid var(--color-rule); background: var(--color-paper); transition: border-color 200ms ease; } .offers-page .dc-anchor:hover { border-color: var(--color-ink-deep); } /* ── The two big surfaces: a white panel and the inset dark panel ───────────────────────── */ /* The dark one is the package device STATUS.md counts on 22 of 38 files; the white one is its sibling (14 of 38). Both are inset panels inside a light section, not full-bleed bands, so the page still has no true dark band — the DS rule "a moment, not a texture" holds. */ .offers-page .dc-panel { border-radius: var(--radius-5\.5); padding: clamp(32px, 4vw, 56px) clamp(28px, 3.6vw, 52px); } .offers-page .dc-panel-white { background: var(--color-paper); box-shadow: var(--dc-shadow-panel); } .offers-page .dc-panel-dark { background: var(--color-dark-band); position: relative; overflow: hidden; } .offers-page .dc-grid-referral { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(28px, 4vw, 56px); align-items: center; } .offers-page .dc-grid-bursary { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 4vw, 52px); align-items: start; } .offers-page .dc-grid-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .offers-page .dc-grid-prices { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } .offers-page .dc-grid-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; } /* ── §2 · The coral referral stat card ──────────────────────────────────────────────────── */ /* NEW FOR THIS PAGE: the package's "coral-wash panel" (12 of 38) used as a stat pairing — two numerals over a hairline, closed by a mono source line. */ .offers-page .dc-card-coral { background: var(--color-coral-100); border: 1px solid var(--dc-coral-border); border-radius: var(--radius-4\.5); padding: 32px 30px; text-align: center; } .offers-page .dc-coral-rule { height: 1px; background: var(--dc-coral-rule); margin: 20px 0; } /* ── §3 · The MAT / LA discount tiers ───────────────────────────────────────────────────── */ .offers-page .dc-tier { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--radius-4\.5); padding: 28px 26px; } /* the first tier is the highlighted one — a coral wash inside the dark panel */ .offers-page .dc-tier-lead { background: rgba(236, 99, 75, 0.14); border-color: rgba(236, 99, 75, 0.42); } .offers-page .dc-panel-foot { display: flex; align-items: center; gap: 18px 26px; flex-wrap: wrap; margin-top: 30px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.14); } .offers-page .dc-panel-foot > .btn { flex: none; } /* ── §4 · Bursary16+ ────────────────────────────────────────────────────────────────────── */ /* The feature list IS the DS .check-list; only the reference's own metrics move here — it is laid out as a 2-column GRID rather than a column, at 14px rows with an 11px glyph, and its ticks are CORAL, not green. (Coral rather than ok-green is the reference's choice; these are product features on a marketing panel, not the guardrail list the green tick belongs to.) */ .offers-page .dc-grid-checks.check-list { display: grid; } .offers-page .check-list > li { font-size: 14px; line-height: 1.55; gap: 11px; } .offers-page .check-list-yes > i { font-size: 11px; margin-top: 5px; color: var(--color-coral-500); } .offers-page .dc-card-sand { background: var(--color-page-bg); border-radius: var(--radius-4\.5); padding: 26px 28px; } .offers-page .dc-price-row { display: flex; align-items: baseline; gap: 12px; } .offers-page .dc-link-coral { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-family: var(--font-heading); font-weight: 600; font-size: 14.5px; line-height: normal; color: var(--color-coral-500); } .offers-page .dc-link-coral:hover { color: var(--color-ink-deep); } .offers-page .dc-link-coral > i { font-size: 10px; } /* ── §5 · The closing band ──────────────────────────────────────────────────────────────── */ /* NOT the coral `.cta-section` its Webinars sibling closes on: this page ends on a WHITE band over a top hairline, centred at 900px. Because it is white, its headline COULD carry the coral highlight word the brand asks for — the reference does not set one, and it is not this port's job to add copy. Flagged in the report. */ .offers-page .dc-band-white { background: var(--color-paper); border-top: 1px solid var(--color-rule); } .offers-page .dc-actions { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; } /* ── Measures ───────────────────────────────────────────────────────────────────────────── */ .offers-page .dc-ch-62 { max-width: 62ch; } .offers-page .dc-ch-58 { max-width: 58ch; } .offers-page .dc-ch-54 { max-width: 54ch; } .offers-page .dc-ch-52 { max-width: 52ch; } .offers-page .dc-ch-26 { max-width: 26ch; } /* ── Spacing steps the compiled surface 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. */ .offers-page .dc-mt-5 { margin-top: 5px; } .offers-page .dc-mt-10 { margin-top: 10px; } .offers-page .dc-mt-12 { margin-top: 12px; } .offers-page .dc-mt-14 { margin-top: 14px; } .offers-page .dc-mt-18 { margin-top: 18px; } .offers-page .dc-mt-20 { margin-top: 20px; } .offers-page .dc-mt-24 { margin-top: 24px; } .offers-page .dc-mt-26 { margin-top: 26px; } .offers-page .dc-mt-30 { margin-top: 30px; } .offers-page .dc-mt-34 { margin-top: 34px; } .offers-page .dc-mb-14 { margin-bottom: 14px; } .offers-page .dc-mb-16 { margin-bottom: 16px; } /* ── Responsive: the reference's own breakpoints, not ours ──────────────────────────────── */ /* RE-VERIFIED during the motion pass (§5b: "do not add responsiveness the reference does not * have"). Parsed out of Offers.dc.html, its @media rules are exactly seven: two grid collapses * on page CONTENT — ≤1000px stacks refgrid/matgrid/burgrid and drops burprice to 2-up, ≤620px * stacks tiergrid/burprice/checkgrid — four on CHROME we do not ship (data-nav-demo ≤1120, * data-nav-2 ≤940, data-footgrid ≤1080 and ≤560), and one reduced-motion block. The two content * collapses below match it breakpoint for breakpoint and grid for grid, so NOTHING was removed * here: unlike meet-emma/, this page never grew an invented 991px grid stack. * * The one divergence, left in place deliberately: the .section gutter step at 767px and the * padding reductions at 991px above are NOT in the reference — every section pads a literal * `148px 24px 48px`-style value with no media query at all. They are a batch-wide scaffold * convention (29 and 27 of the 32 prototypes carry them, meet-emma/ included), so removing them * from this page alone would trade one divergence for an inconsistency. Flagged for the owner as * a batch decision, not silently changed on two pages. */ @media (max-width: 1000px) { .offers-page .dc-grid-referral, .offers-page .dc-grid-bursary { grid-template-columns: minmax(0, 1fr); } .offers-page .dc-grid-prices { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .offers-page .dc-grid-tiers, .offers-page .dc-grid-prices, .offers-page .dc-grid-checks { grid-template-columns: minmax(0, 1fr); } } /* ── Reduced motion ─────────────────────────────────────────────────────────────────────── */ /* Deliberately empty of blanket rules: this page declares no @keyframes of its own and the DS components it uses (reveal) 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/. This page's only motion is hover transitions. */