/* Webinars — page CSS * ============================================================================================ * FAITHFUL (1:1) reproduction of "Webinars.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 from prototypes/customer-success/page.css — the nearest archetype * sibling (both are RESOURCES-family pages: the same 900px left-aligned 40/40 hero, the same * flat 0/88 rhythm for every following section, the same full-bleed flat coral closer, and the * same dropped resources sub-nav). Carried over: the container override, the dc-py-* pair * convention, the dc-t-/dc-body-/dc-label- scales, dc-tr-*, the colour helpers, the button * metrics, and the dc-mt- / dc-mb- steps. What is new is marked "NEW FOR THIS PAGE". * * TOKENS: identical to the reference and therefore used as-is — the whole ink scale * (#0F1A4F/#4D5B7F/#8893B0), coral-500 #EC634B, page-bg #F4F5F9, paper, rule #E6E8EF, * dark-band #0B1023, ok-green-bright #34D07F (the reference's tick on dark), and * shadow-soft, which is EXACTLY the reference's card shadow `0 14px 40px rgba(15,26,79,.07)`. * * DIFFERENT, so declared here (owner's call: keep the reference's colours): * #E9ECF3 the reference's `--sand-2` (the non-live badge fill; our page-bg is #F4F5F9) * #9AA6C2 body copy ON DARK (our ink-mute is #8893B0) * #C9D1E6 bright copy ON DARK * #8D9AB8 muted copy ON DARK * #7E8AA6 mono captions ON DARK * One shadow has no token: the card's hover lift, 0 26px 60px rgba(15,26,79,.13). * * 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. * ============================================================================================ */ .webinars-page { --dc-sand-2: #E9ECF3; /* the reference's --sand-2 */ --dc-on-dark-body: var(--color-on-dark-body); --dc-on-dark-bright: var(--color-on-dark-bright); --dc-on-dark-mute: var(--color-ink-mute); --dc-on-dark-label: var(--color-ink-mute); --dc-shadow-hover: 0 26px 60px rgba(15, 26, 79, 0.13); --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 is narrowed to 900px in the reference; every other section is the full 1200 */ .webinars-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. */ .webinars-page .dc-hero-centred { text-align: center; } .webinars-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 all the way down, so the page reads as one continuous column rather than alternating bands. */ .webinars-page .dc-py-40 { padding-bottom: 40px; } .webinars-page .dc-py-0-88 { padding-top: 0; padding-bottom: 88px; } /* ── Display type ───────────────────────────────────────────────────────────────────────── */ .webinars-page [class*="dc-t-"] { font-family: var(--font-heading); } /* 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(.webinars-page [class*="dc-t-"]) { margin: 0; } /* Weight as an overridable default too (§2 rule 5) - the speaker line is 600 in the reference. */ :where(.webinars-page [class*="dc-t-"]) { font-weight: 700; } /* text-wrap: balance is set per step, NOT blanket — the reference balances only the four section headlines, never the card titles. (`text-wrap: auto` is not a valid value; the reset is `wrap`.) */ .webinars-page .dc-t-74 { font-size: clamp(38px, 5.4vw, 74px); line-height: 1.02; letter-spacing: -0.04em; text-wrap: balance; } .webinars-page .dc-t-62 { font-size: clamp(30px, 4.6vw, 62px); line-height: 1.03; letter-spacing: -0.04em; text-wrap: balance; } .webinars-page .dc-t-44 { font-size: clamp(26px, 3.4vw, 44px); line-height: 1.06; letter-spacing: -0.03em; text-wrap: balance; } .webinars-page .dc-t-40 { font-size: clamp(24px, 3.2vw, 40px); line-height: 1.1; letter-spacing: -0.028em; text-wrap: balance; } .webinars-page .dc-t-16h{ font-size: 16.5px; line-height: 1.28; letter-spacing: -0.014em; } .webinars-page .dc-t-16 { font-size: 16px; line-height: normal; letter-spacing: -0.014em; } .webinars-page .dc-t-13h{ font-size: 13.5px; line-height: normal; } /* ── Body copy steps (Inter), named by px ───────────────────────────────────────────────── */ .webinars-page .dc-lede { font-size: clamp(16px, 1.8vw, 19px); line-height: 1.55; color: var(--color-ink-soft); margin: 0; } .webinars-page .dc-body-15h{ font-size: 15.5px; line-height: 1.6; color: var(--color-ink-soft); margin: 0; } .webinars-page .dc-body-15 { font-size: 15px; line-height: 1.5; color: var(--color-ink-soft); margin: 0; } .webinars-page .dc-body-13h{ font-size: 13.5px; line-height: 1.5; color: var(--color-ink-soft); margin: 0; } .webinars-page .dc-body-13 { font-size: 13px; line-height: 1.5; color: var(--color-ink-soft); margin: 0; } .webinars-page .dc-body-12 { font-size: 12px; line-height: normal; color: var(--color-ink-soft); margin: 0; } .webinars-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 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. Declared once here and repeated on each fixed step so no path can pick 1.5 up again. */ .webinars-page [class*="dc-label-"], .webinars-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; } .webinars-page .dc-eyebrow { display: block; font-size: 12.5px; color: var(--color-coral-500); } .webinars-page .dc-eyebrow-hero { font-size: 12px; letter-spacing: 0.09em; color: var(--color-ink-mute); } .webinars-page .dc-label-12h { font-size: 12.5px; } .webinars-page .dc-label-11h { font-size: 11.5px; } .webinars-page .dc-label-11 { font-size: 11px; } .webinars-page .dc-label-10h { font-size: 10.5px; } .webinars-page .dc-label-10 { font-size: 10px; } .webinars-page .dc-tr-04 { letter-spacing: 0.04em; } .webinars-page .dc-tr-07 { letter-spacing: 0.07em; } .webinars-page .dc-tr-none { letter-spacing: normal; text-transform: none; } /* ── Colour helpers ─────────────────────────────────────────────────────────────────────── */ .webinars-page .dc-on-dark-body { color: var(--dc-on-dark-body); } .webinars-page .dc-on-dark-bright { color: var(--dc-on-dark-bright); } .webinars-page .dc-on-dark-mute { color: var(--dc-on-dark-mute); } .webinars-page .dc-on-dark-label { color: var(--dc-on-dark-label); } /* ── Glows ──────────────────────────────────────────────────────────────────────────────── */ /* NEW FOR THIS PAGE (and a cross-page candidate — see the report): the hero glow is TOP-CENTRED, 700px and unblurred. The DS `.section-glow` is 520px with four CORNER placements only, so no combination of DS classes can express it; the whole device is page-local. `.dc-glow-2` is the opposite case — the panel glow IS the DS coral glow, so the markup keeps `.section-glow .section-glow-coral .section-glow-tr` and only its offset and blur (the reference's -190/-240 and 12px, against the DS -140/-180 and 10px) move here. */ .webinars-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%); } .webinars-page .dc-glow-2 { right: -190px; top: -240px; filter: blur(12px); } /* ── §2 · The featured "next live" panel ────────────────────────────────────────────────── */ /* NEW FOR THIS PAGE in its detail, but the surface is the package's INSET DARK PANEL again (#0B1023, 22px radius, corner glow) — the device STATUS.md already counts on 22 of 38 files. */ .webinars-page .dc-feature { position: relative; overflow: hidden; background: var(--color-dark-band); border-radius: var(--radius-5\.5); padding: clamp(34px, 4vw, 52px) clamp(28px, 4vw, 52px); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(28px, 4vw, 56px); align-items: center; } /* the live pill: coral fill, white dot, mono label */ .webinars-page .dc-live { display: inline-flex; align-items: center; gap: 9px; background: var(--color-coral-500); color: #fff; border-radius: var(--radius-full); padding: 6px 13px; } .webinars-page .dc-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; flex: none; } /* the date / time / platform row under the blurb */ .webinars-page .dc-meta { display: flex; align-items: center; gap: 10px 24px; flex-wrap: wrap; /* The reference prints the hero meta AS TYPED ("Tuesday 9 June 2026", "11:00am - 12:00pm"). The row carries dc-label-12h for the mono face + size, and the blanket [class*="dc-label-"] rule was uppercasing it (children inherit). Its 0.04em tracking is right and stays. */ text-transform: none; } /* Same story on the card-top labels (times, durations, "Pick your date"): the reference renders every one of them as typed - mono face and size, no caps, no tracking. */ .webinars-page .dc-card-top .dc-label-10 { text-transform: none; letter-spacing: normal; } .webinars-page .dc-meta > span > i { font-size: 12px; color: var(--color-coral-500); margin-right: 8px; } .webinars-page .dc-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } /* the agenda card inside the dark panel — glass on dark (STATUS counts this device on 14/38) */ .webinars-page .dc-glass { position: relative; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--radius-4\.5); padding: 24px 26px; } /* The agenda IS the DS check-list; only the reference's tighter metrics move here — gap 12 (DS gap-4 = 16), 13.5px rows (DS text-body-s = 14), an 11px glyph (DS text-body-xs = 12) and ok-green-bright, which the DS applies contextually inside `.section-dark` but this panel is an inset, not a band. */ .webinars-page .dc-glass .check-list { gap: 12px; } .webinars-page .dc-glass .check-list > li { font-size: 13.5px; line-height: 1.5; gap: 11px; color: var(--dc-on-dark-bright); } .webinars-page .dc-glass .check-list-yes > i { font-size: 11px; margin-top: 4px; color: var(--color-ok-green-bright); } .webinars-page .dc-host { display: flex; align-items: center; gap: 11px; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.12); } .webinars-page .dc-avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: #fff; font-family: var(--font-heading); font-weight: 700; font-size: 12px; line-height: normal; } /* ── §3 · The library head + filter row ─────────────────────────────────────────────────── */ .webinars-page .dc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 0 0 26px; } .webinars-page .dc-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; } /* ── §3 · The webinar card grid ─────────────────────────────────────────────────────────── */ .webinars-page .dc-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .webinars-page .dc-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--color-paper); border-radius: var(--radius-4\.5); box-shadow: var(--shadow-soft); padding: 24px 26px; transition: transform 220ms var(--dc-ease), box-shadow 220ms ease; } .webinars-page .dc-card:hover { transform: translateY(-4px); box-shadow: var(--dc-shadow-hover); } /* page.js filters by toggling the HTML `hidden` attribute (no inline styles). `hidden` is a `display: none` UA rule at specificity 0, so ANY display declaration beats it — the exact trap the workflow warns about. This restores it for the filtered-out cards. */ .webinars-page .dc-card[hidden] { display: none; } .webinars-page .dc-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .webinars-page .dc-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 16px; } .webinars-page .dc-card-cta { font-family: var(--font-heading); font-weight: 600; font-size: 13px; line-height: normal; color: var(--color-coral-500); } .webinars-page .dc-card-cta > i { font-size: 9px; } /* The card badge keeps the DS `.badge` (pill shape, inline-flex) and only its type and fill move here: the package's badges are MONO, which the DS badge is not. */ .webinars-page .badge.dc-badge { font-family: var(--font-label); font-weight: 600; font-size: 9.5px; line-height: normal; letter-spacing: 0.07em; text-transform: none; padding: 4px 10px; border-radius: var(--radius-full); } .webinars-page .dc-badge-live { background: var(--color-coral-500); color: #fff; } .webinars-page .dc-badge-soft { background: var(--dc-sand-2); color: var(--color-ink-soft); } /* The "nothing in that category" state. Hidden by default and revealed by page.js — with JS off no filter can be applied, so it can never be the only thing on screen. */ .webinars-page .dc-empty { display: none; text-align: center; padding: 44px 24px; } .webinars-page .dc-empty[data-shown] { display: block; } /* ── 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 Webinars.dc.html, its @media rules are exactly seven: two grid collapses * on page CONTENT — ≤1080px drops webgrid to 2-up and stacks featwebinar, ≤640px stacks webgrid — * 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 * `0 24px 88px`-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: 1080px) { .webinars-page .dc-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .webinars-page .dc-feature { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { .webinars-page .dc-grid-3 { grid-template-columns: minmax(0, 1fr); } } /* ── §4 · The Zoom-feed note strip ──────────────────────────────────────────────────────── */ .webinars-page .dc-strip { 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: 26px 30px; } .webinars-page .dc-strip-body { flex: 1; min-width: 300px; } .webinars-page .dc-tile-sand { 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); } .webinars-page .dc-tile-sand > i { font-size: 16px; color: var(--color-coral-500); } /* ── Measures ───────────────────────────────────────────────────────────────────────────── */ .webinars-page .dc-ch-56 { max-width: 56ch; } .webinars-page .dc-ch-50 { max-width: 50ch; } .webinars-page .dc-ch-46 { max-width: 46ch; } /* ── 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. */ .webinars-page .dc-mt-4 { margin-top: 4px; } .webinars-page .dc-mt-6 { margin-top: 6px; } .webinars-page .dc-mt-14 { margin-top: 14px; } .webinars-page .dc-mt-16 { margin-top: 16px; } .webinars-page .dc-mt-20 { margin-top: 20px; } .webinars-page .dc-mt-22 { margin-top: 22px; } .webinars-page .dc-mt-26 { margin-top: 26px; } .webinars-page .dc-mt-30 { margin-top: 30px; } .webinars-page .dc-mb-14 { margin-bottom: 14px; } /* ── Closer ─────────────────────────────────────────────────────────────────────────────── */ /* Full-bleed FLAT coral (not the inset panel some sibling pages use), at the reference's own taller clamp — `.cta-section` + `.cta-section-flat` with one padding override. */ .webinars-page .cta-section { padding: clamp(64px, 9vw, 120px) 24px; } /* ── Reduced motion ─────────────────────────────────────────────────────────────────────── */ /* Deliberately near-empty: this page declares no @keyframes of its own, and the DS components it uses (section-glow-drift, 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/. The only page-owned motion is the card's hover lift. */