/* Demos — page CSS * ============================================================================================ * FAITHFUL (1:1) reproduction of "Demos.dc.html" (4 sections, 141 inline styles) without any * 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/events/page.css, which was itself seeded from * customer-success. Events and Demos are the same page written twice — both are Resources-area * LIBRARY pages: a centred hero over a top-centred coral glow, a filtered card grid, an inset * dark panel with one action, and a full-bleed flat-coral closer. The container override, the * dc-py-* / dc-t-* / dc-body-* / dc-label-* scaffold, the .dc-filter row (identical CSS in both * references, down to the !important blocks), the .dc-panel-dark and the closer transferred * unchanged; roughly three quarters of this file is Events'. What is new is marked * "NEW FOR THIS PAGE". * * TOKENS — the reference's :root is byte-identical to Events' (same 15 properties, line 38): * IDENTICAL, so we use ours: --ink #0F1A4F = ink-deep · --ink-soft · --ink-mute · * --accent #EC634B = coral-500 · --accent-soft #FFE7DD = coral-100 · --paper · * --sand #F4F5F9 = page-bg · --rule #E6E8EF · --dark #0B1023 = dark-band · * --mono 'IBM Plex Mono' = font-label. The card's resting 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): * #8D9AB8 the thumbnail kicker on dark (no token; ink-mute is #8893B0 — close, not equal) * #9AA6C2 body copy ON DARK (decision 15 maps this to ink-mute) * Two shadows have no token: the card's hover lift and the play button's coral glow. * Note this page has NO #ECEEF3 hairline: its cards are shadow-only, with no border. * * GEOMETRY: 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. * ============================================================================================ */ .demos-page { /* reference-only values, all read off the file */ --dc-on-dark-body: var(--color-on-dark-body); /* body copy on the dark panel */ --dc-on-dark-kicker: var(--color-ink-mute); /* the thumbnail kicker */ --dc-shadow-lift: 0 26px 60px rgba(15, 26, 79, 0.13); /* the card's hover state */ --dc-shadow-play: 0 14px 36px rgba(236, 99, 75, 0.45); /* the play button's own glow */ --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, and unlike Events' it is CENTRED */ .demos-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 ────────────────────────────────────────────────────────────────────── */ /* The 148px hero top is the reference's clearance for its own fixed header; kept literal, as every other port in this set keeps it, because the CMS header is sticky in the same way. */ .demos-page .dc-py-148-40 { padding-bottom: 40px; } .demos-page .dc-py-40-96 { padding-top: 40px; padding-bottom: 96px; } .demos-page .dc-py-0-96 { padding-top: 0; padding-bottom: 96px; } /* ── Display type ───────────────────────────────────────────────────────────────────────── */ .demos-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(.demos-page [class*="dc-t-"]) { margin: 0; text-wrap: balance; } .demos-page .dc-t-80 { font-size: clamp(42px, 5.8vw, 80px); line-height: 1.0; letter-spacing: -0.04em; } /* hero h1 */ .demos-page .dc-t-66 { font-size: clamp(32px, 5vw, 66px); line-height: 1.02; letter-spacing: -0.04em; } /* closer */ .demos-page .dc-t-38 { font-size: clamp(24px, 3vw, 38px); line-height: 1.12; letter-spacing: -0.025em; } /* "more coming" panel */ .demos-page .dc-t-17 { font-size: 17px; line-height: 1.2; letter-spacing: -0.015em; } /* name ON the thumbnail */ .demos-page .dc-t-16h{ font-size: 16.5px; line-height: normal; letter-spacing: -0.014em; } /* card title */ /* ── Body copy steps (Inter), named by px ───────────────────────────────────────────────── */ .demos-page .dc-lede { font-size: clamp(16px, 1.8vw, 19px); line-height: 1.55; color: var(--color-ink-soft); } .demos-page .dc-body-15 { font-size: 15px; line-height: 1.6; color: var(--color-ink-soft); } .demos-page .dc-body-15e { font-size: 15px; line-height: 1.5; color: var(--color-ink-soft); } /* the empty state */ .demos-page .dc-body-13h { font-size: 13.5px; line-height: 1.55; color: var(--color-ink-soft); } .demos-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. */ .demos-page [class*="dc-label-"], .demos-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); } .demos-page .dc-eyebrow { display: block; font-size: 12.5px; color: var(--color-coral-500); } .demos-page .dc-eyebrow-hero { font-size: 12px; letter-spacing: 0.09em; color: var(--color-ink-mute); } /* the panel eyebrow is 12px but still coral (the hero's is 12px and ink-mute) */ .demos-page .dc-eyebrow-12 { font-size: 12px; } /* NEW FOR THIS PAGE: the kicker printed on the dark thumbnail */ .demos-page .dc-label-95 { font-size: 9.5px; color: var(--dc-on-dark-kicker); } /* 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(.demos-page [class*="dc-body-"], .demos-page [class*="dc-label-"], .demos-page .dc-lede, .demos-page .dc-closer-lede, .demos-page .dc-eyebrow) { } /* ── Colour helpers ─────────────────────────────────────────────────────────────────────── */ .demos-page .dc-on-dark-body { color: var(--dc-on-dark-body); } /* ── 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). */ .demos-page .dc-glow-hero { width: 720px; height: 720px; left: 50%; top: -420px; transform: translateX(-50%); filter: none; background: radial-gradient(circle, rgba(236, 99, 75, 0.1), transparent 62%); } /* the panel's glow: 15% rather than .section-glow-coral's 16%, off the BOTTOM-LEFT corner */ .demos-page .dc-glow-panel { width: 520px; height: 520px; left: -190px; bottom: -240px; filter: blur(12px); background: radial-gradient(circle, rgba(236, 99, 75, 0.15), transparent 62%); } /* ── The filter row ─────────────────────────────────────────────────────────────────────── */ /* Byte-identical to Events': the reference styles these with three `!important` blocks keyed on [data-filter] / [data-filter][data-on]. Here the state lives in aria-pressed, so the styling and the accessible state have ONE source and there is no class for a script to toggle (which the class audit could not see anyway). */ .demos-page .dc-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; } /* ── 2 · The demo library ───────────────────────────────────────────────────────────────── */ /* NEW FOR THIS PAGE: 13 cards, each a dark 16:9 thumbnail (kicker, coral play button, the demo name burnt into the artwork) over a white body. Reference grid: 3 up, 2 up under 1080px, 1 up under 640px — its own breakpoints, kept. */ .demos-page .dc-demogrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .demos-page .dc-demo { display: flex; flex-direction: column; overflow: hidden; background: var(--color-paper); border-radius: var(--radius-4\.5); box-shadow: var(--shadow-soft); /* = the reference's 0 14px 40px rgba(15,26,79,.07) */ transition: transform 220ms var(--dc-ease), box-shadow 220ms ease; } .demos-page .dc-demo:hover { transform: translateY(-4px); box-shadow: var(--dc-shadow-lift); } /* hidden by the filter — a plain attribute, so nothing has to toggle a class */ .demos-page .dc-demo[hidden] { display: none; } .demos-page .dc-thumb { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; background: var(--color-dark-band); text-decoration: none; } .demos-page .dc-thumb-glow { position: absolute; width: 300px; height: 300px; right: -110px; bottom: -140px; pointer-events: none; background: radial-gradient(circle, rgba(236, 99, 75, 0.26), transparent 62%); } /* As typed in the reference - "TRUSTS & LAs" keeps its lowercase "s"; the blanket label rule was flattening it to "LAS". */ .demos-page .dc-thumb-kicker { position: absolute; left: 20px; top: 18px; text-transform: none; } .demos-page .dc-thumb-name { position: absolute; left: 20px; right: 20px; bottom: 18px; color: #fff; } .demos-page .dc-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; background: var(--color-coral-500); box-shadow: var(--dc-shadow-play); } .demos-page .dc-play > i { font-size: 18px; color: #fff; margin-left: 3px; } .demos-page .dc-demo-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; } .demos-page .dc-demo-foot { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; margin-top: auto; padding-top: 16px; } .demos-page .dc-demo-watch, .demos-page .dc-demo-more { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-family: var(--font-heading); font-weight: 600; font-size: 13.5px; line-height: normal; } .demos-page .dc-demo-watch { color: var(--color-coral-500); } .demos-page .dc-demo-more { color: var(--color-ink-soft); } .demos-page .dc-demo-watch:hover, .demos-page .dc-demo-more:hover { color: var(--color-ink-deep); } .demos-page .dc-demo-watch > i, .demos-page .dc-demo-more > i { font-size: 9px; } .demos-page .dc-empty { text-align: center; padding: 48px 24px; } .demos-page .dc-empty[hidden] { display: none; } .demos-page .dc-empty a { color: var(--color-coral-500); font-weight: 600; text-decoration: none; } /* THE REFERENCE'S OWN BREAKPOINTS, and the only two layout collapses on the page. * * Re-verified against the reference during the motion pass (WORKFLOW §5b: "do not add * responsiveness the reference does not have"). Nothing had to be removed — the reference's * content @media rules are exactly `1080px: [data-demogrid] -> repeat(2,…); [data-filterrow] -> * overflow-x: auto` and `640px: [data-demogrid] -> 1fr`, which is what these two blocks are. * Its other three media queries are chrome only (the nav at 1120/940 and the footer grid at * 1080/560) and we do not copy the chrome. Everything else — every card grid, the dark panel, * the closer — stays fixed at every width, exactly as the reference leaves it. */ @media (max-width: 1080px) { .demos-page .dc-demogrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .demos-page .dc-filters { flex-wrap: nowrap; overflow-x: auto; } } @media (max-width: 640px) { .demos-page .dc-demogrid { grid-template-columns: minmax(0, 1fr); } } /* ── 3 · More coming ────────────────────────────────────────────────────────────────────── */ /* The INSET DARK PANEL again — #0B1023, 22px radius, corner glow. 22 of the package's 38 files carry this device (STATUS.md §4); still page-local, because promoting it to a DS class is not a decision to take mid-port. */ .demos-page .dc-panel-dark { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; background: var(--color-dark-band); border-radius: var(--radius-5\.5); padding: clamp(36px, 4.5vw, 56px) clamp(28px, 4vw, 52px); } .demos-page .dc-panel-body { position: relative; max-width: 52ch; } .demos-page .dc-panel-form { position: relative; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* The signup field is the DS .input with the reference's on-dark treatment. Kept as .input so the component (and its focus ring) stays visible; only the surface colours move. */ .demos-page .dc-input-dark { width: auto; min-width: 240px; font-size: 14.5px; line-height: normal; color: #fff; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--radius-2); padding: 13px 16px; } .demos-page .dc-input-dark::placeholder { color: rgba(255, 255, 255, 0.6); } /* ── Measures ───────────────────────────────────────────────────────────────────────────── */ .demos-page .dc-ch-54 { max-width: 54ch; } .demos-page .dc-ch-48 { max-width: 48ch; } /* ── Spacing steps the compiled surface does not carry ──────────────────────────────────── */ /* `prototypes/` is deliberately not a Tailwind scan source, and the compiled spacing surface is patchy anyway (mb-11 compiles, mt-11 does not), so the reference's exact values are declared here named by px rather than rounded to whatever happens to exist. */ .demos-page .dc-mt-6 { margin-top: 6px; } .demos-page .dc-mt-14 { margin-top: 14px; } .demos-page .dc-mt-20 { margin-top: 20px; } .demos-page .dc-mt-22 { margin-top: 22px; } .demos-page .dc-mt-32 { margin-top: 32px; } .demos-page .dc-mb-14 { margin-bottom: 14px; } /* ── Closer ─────────────────────────────────────────────────────────────────────────────── */ /* Full-bleed FLAT coral at the reference's own taller clamp, so `.cta-section` + `.cta-section-flat` with one padding override. The phone/email row beneath the buttons is the DS `.cta-section-contact` (its second real use in the package); only its size and top margin move — 13.5px against the DS 14px, 26px against 24px. */ .demos-page .cta-section { padding: clamp(72px, 10vw, 130px) 24px; } .demos-page .cta-section-contact { font-size: 13.5px; margin-top: 26px; } /* ── Reduced motion ─────────────────────────────────────────────────────────────────────── */ /* Deliberately 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. */