/* Events — page CSS * ============================================================================================ * FAITHFUL (1:1) reproduction of "Events.dc.html" (4 sections) without its 229 inline styles. * Every value below is READ OUT OF THE REFERENCE FILE, 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 one at a time, not rewriting markup. * * PROVENANCE: seeded from prototypes/customer-success/page.css. Events and Customer Success are * the SAME ARCHETYPE — both are Resources-area listing pages, and their references share the * whole skeleton: the 40/40 hero, the flat 0/88 rhythm for every following section, the * full-bleed flat-coral closer at clamp(64,9vw,120)/24, and (byte for byte) the dc-t-74 hero, * dc-t-62 closer, dc-lede, dc-closer-lede and dc-ch-46 steps. That transferred unchanged. * What is new here is marked "NEW FOR THIS PAGE". * * TOKENS — how the reference's own :root (declared inline on its page root, line 37) compares: * 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. The event card's shadow (0 14px 40px rgba(15,26,79, * .07)) is an exact match for --shadow-soft. The standardised closer is deliberately * glow-free. * DIFFERENT, so declared here (owner's ruling: keep the reference's colours): * #E9ECF3 --sand-2, the PAST event's date tile (no token) * #9AA6C2 body copy ON DARK (decision 15 maps this to ink-mute) * Note this page has NO #ECEEF3 hairline: its cards are shadow-only, with no border at all. * * GEOMETRY: the reference container is max-width 1200px with a 24px section gutter (our DS is * 1224 / 32) — overridden HERE only, never in app/. The hero alone is narrowed to 900px. * ============================================================================================ */ .events-page { /* reference-only values, all read off the file */ --dc-sand-2: #E9ECF3; /* the past-event date tile */ --dc-on-dark-body: var(--color-on-dark-body); /* body copy on the dark panel */ --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 alone is narrowed to 900px */ .events-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-56` 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. */ .events-page .dc-hero-centred { text-align: center; } .events-page .dc-hero-centred [class*="dc-ch-"] { margin-inline: 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 ────────────────────────────────────────────────────────────────────── */ /* Flat after the hero: first-section top is the set-wide 128px (`_shared/page-shared.css` §1), then 0/88, so the page reads as one continuous sand column that the coral closer terminates. */ .events-page .dc-py-40 { padding-bottom: 40px; } .events-page .dc-py-0-88 { padding-top: 0; padding-bottom: 88px; } /* ── Display type ───────────────────────────────────────────────────────────────────────── */ .events-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. Written as a plain 0-2-0 descendant selector this rule silently beats every unlayered Tailwind margin utility (0-1-0) — `mt-5` on a dc-t- heading would then do nothing at all. Same trick the design system uses for heading element defaults (:where(.app h3)). */ :where(.events-page [class*="dc-t-"]) { margin: 0; text-wrap: balance; } .events-page .dc-t-74 { font-size: clamp(38px, 5.4vw, 74px); line-height: 1.02; letter-spacing: -0.04em; } /* hero h1 */ .events-page .dc-t-62 { font-size: clamp(30px, 4.6vw, 62px); line-height: 1.03; letter-spacing: -0.04em; } /* closer */ .events-page .dc-t-44 { font-size: clamp(26px, 3.4vw, 44px); line-height: 1.06; letter-spacing: -0.03em; } /* "The year ahead." */ .events-page .dc-t-38 { font-size: clamp(24px, 3vw, 38px); line-height: 1.12; letter-spacing: -0.025em; } /* host-an-event panel */ .events-page .dc-t-17 { font-size: 17px; line-height: 1.28; letter-spacing: -0.014em; } /* event card title */ /* ── Body copy steps (Inter), named by px ───────────────────────────────────────────────── */ .events-page .dc-lede { font-size: clamp(16px, 1.8vw, 19px); line-height: 1.55; color: var(--color-ink-soft); } .events-page .dc-body-15 { font-size: 15px; line-height: 1.6; color: var(--color-ink-soft); } .events-page .dc-body-15e { font-size: 15px; line-height: 1.5; color: var(--color-ink-soft); } /* the empty state */ .events-page .dc-body-13h { font-size: 13.5px; line-height: 1.55; color: var(--color-ink-soft); } .events-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 every one of these with the `font:` SHORTHAND and no `/line-height`, so line-height computes to `normal`; letting them inherit 1.5 instead makes each label ~4px too tall, which is the single largest source of height error in this whole port. */ .events-page [class*="dc-label-"], .events-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); } .events-page .dc-eyebrow { display: block; font-size: 12.5px; color: var(--color-coral-500); } .events-page .dc-eyebrow-hero { font-size: 12px; letter-spacing: 0.09em; color: var(--color-ink-mute); } /* the host-an-event panel's eyebrow is 12px but still coral (the hero's is 12px and ink-mute) */ .events-page .dc-eyebrow-12 { font-size: 12px; } .events-page .dc-label-10h { font-size: 10.5px; } /* NEW FOR THIS PAGE: the one mono label the reference does NOT uppercase or track — the event card's location line. Reproduced faithfully rather than folded into the block above. */ .events-page .dc-label-115n { font-family: var(--font-label); font-weight: 500; font-size: 11.5px; line-height: normal; letter-spacing: 0; text-transform: none; color: var(--color-ink-mute); } .events-page .dc-tr-07 { letter-spacing: 0.07em; } /* margin at ZERO specificity for the body/label steps too — TRAP 1 again, and it bites the other way round here. `.-page .dc-closer-lede { margin: 0 }` is 0-2-0; Tailwind's `mx-auto` is an unlayered 0-1-0, so the centred lede in the closer was silently pinned to the left edge even though `mx-auto` sat right there in the markup. Page-scoped helpers (`.dc-mt-22`) are themselves 0-2-0 and still win, so only the plain utilities are freed. */ :where(.events-page [class*="dc-body-"], .events-page [class*="dc-label-"], .events-page .dc-lede, .events-page .dc-closer-lede, .events-page .dc-eyebrow) { } /* ── Colour helpers ─────────────────────────────────────────────────────────────────────── */ .events-page .dc-on-dark-body { color: var(--dc-on-dark-body); } .events-page .dc-coral { color: var(--color-coral-500); } /* ── Glows ──────────────────────────────────────────────────────────────────────────────── */ /* The remaining washes use the DS .section-glow base (absolute, pointer-events-none, rounded). Only the hero's fill is bespoke: the reference washes it at 10% coral with no blur, where .section-glow-coral is 16% + blur(10px). */ .events-page .dc-glow-hero { width: 700px; height: 700px; left: 50%; top: -440px; transform: translateX(-50%); filter: none; background: radial-gradient(circle, rgba(236, 99, 75, 0.1), transparent 62%); } /* the host panel's glow: same 16% coral as .section-glow-coral, but pulled further out and blurred 12px rather than 10px */ .events-page .dc-glow-host { width: 520px; height: 520px; right: -190px; bottom: -240px; filter: blur(12px); } /* ── 2 · Event list ─────────────────────────────────────────────────────────────────────── */ /* NEW FOR THIS PAGE, and the reason this page exists: a 2-up grid of dated event cards behind a three-way filter. This is the one section in the whole package whose structure is a CONTENT COLLECTION rather than authored prose — see the report. */ .events-page .dc-list-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 0 0 26px; } /* The filter row. The reference styles these with three `!important` blocks in its