/* Options+ — page CSS * ============================================================================================ * GOAL: a FAITHFUL (1:1) reproduction of the reference "Options Plus.dc.html" * (11 sections, 390 inline styles) without its inline styles. * * STRATEGY (prototypes/WORKFLOW.md): design-system classes carry the components; this file * carries the package's metric DELTAS as page-scoped overrides, so tuning toward the DS later is * deleting overrides rather than rewriting markup. Scoped under `.options-plus-page`, so the file * is inert on any other page. * * THE TWO TRAPS, APPLIED FROM THE START (both cost real height on earlier pages): * 1. The reference styles every heading and label with the CSS `font:` SHORTHAND, which RESETS * line-height to `normal`. Inheriting our 1.5 body leading makes each one 3-8px taller and * compounds down the page. So every fixed-size heading here sets `line-height: normal`, and * the mono labels deliberately do NOT carry the DS `leading-eyebrow` (1.15) — the reference * sets no line-height on them at all. * 2. A page class like `.dc-t-48 { margin: 0 }` is specificity 0-2-0 and BEATS an unlayered * Tailwind `mt-4` utility (0-1-0). Spacing next to those classes therefore uses px-named * page classes declared LATER in this file, never `mt-*`. * * REFERENCE vs OUR TOKENS (measured): * IDENTICAL, so we use ours: the ink scale (#0F1A4F / #4D5B7F / #8893B0), coral-500 #EC634B, * accent-soft #FFE7DD (= coral-100), paper, page-bg #F4F5F9, rule #E6E8EF, dark #0B1023 * (= dark-band), ok-green #1A8A3F, ok-green-bright #34D07F, and the shadows * 0 30px 80px /.12 (= shadow-deep) and 0 14px 40px /.07 (= shadow-soft). * DIFFERENT, so declared below (owner's call: keep the reference's colours): * ADOPTED OUR TOKEN (2026-08-14, owner decision): the hairline is now var(--color-rule) * #E6E8EF everywhere. The reference's #ECEEF3 is 6/255 lighter -- imperceptible, and the * package is not unanimous anyway (Demos, Events and Webinars already use #E6E8EF, and the * three legal pages have no hairline at all), so it did not earn a second token. * #E9ECF3 the "sand-2" fill behind progress bars and avatars * #F0F1F5 the tally-mock row hairline * #9AA6C2 body copy ON DARK * #5C688A captions ON DARK · #8D9AB8 the guardrail strip on dark * #F2B01E the "COMING SOON" amber (our warn-amber is #FEC84B — NOT the same) * Shadows with no token: 0 20px 60px /.14 · 0 22px 54px rgba(4,8,24,.34) · * 0 28px 70px rgba(4,8,24,.3) · 0 18px 48px /.08 · 0 14px 40px /.09 · 0 26px 60px /.13 · * 0 10px 24px rgba(236,99,75,.3). * * GEOMETRY: the reference container is 1200px with a 24px gutter (ours is 1224/32), plus two * page-local widths — 1100px (hero) and 1000px (the "choices in" split). * * BODY FONT: the reference sets `font-family: var(--font-body)` on its own root and the DS does * not set Inter on `body`/`.app`, so the family is set on the page root exactly as the reference * does (owner's decision: leave the DS alone for now). * ============================================================================================ */ .options-plus-page { /* reference-only values, all measured */ --dc-fill: #E9ECF3; /* progress-bar track + avatar disc */ --dc-row-line: #F0F1F5; /* tally-mock row hairline */ --dc-on-dark-body: var(--color-on-dark-body); --dc-on-dark-mute: var(--color-on-dark-faint); --dc-on-dark-strip: var(--color-ink-mute); --dc-amber: #F2B01E; /* "COMING SOON" — not our warn-amber */ --dc-shadow-phone: 0 20px 60px rgba(15, 26, 79, 0.14); --dc-shadow-panel: 0 18px 48px rgba(15, 26, 79, 0.08); --dc-shadow-mock: 0 14px 40px rgba(15, 26, 79, 0.09); --dc-shadow-dark-panel: 0 28px 70px rgba(4, 8, 24, 0.3); --dc-shadow-dark-card: 0 22px 54px rgba(4, 8, 24, 0.34); --dc-shadow-lift: 0 26px 60px rgba(15, 26, 79, 0.13); --dc-shadow-tile: 0 10px 24px rgba(236, 99, 75, 0.3); --dc-ease: cubic-bezier(0.2, 0.8, 0.2, 1); background: var(--color-page-bg); font-family: var(--font-sans); } /* ── Page-local container width ──────────────────────────────────────────────────────────── */ .options-plus-page .dc-container-1000 { max-width: 1000px; 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 reference's own per-section values ─────────────────────────────── */ .options-plus-page .dc-py-88 { padding-top: 88px; padding-bottom: 88px; } .options-plus-page .dc-py-0-88 { padding-top: 0; padding-bottom: 88px; } .options-plus-page .dc-py-96 { padding-top: 96px; padding-bottom: 96px; } .options-plus-page .dc-py-0-96 { padding-top: 0; padding-bottom: 96px; } .options-plus-page .dc-py-strip { padding-top: clamp(40px, 4vw, 56px); padding-bottom: clamp(40px, 4vw, 56px); } /* ── Display type: the reference clamps every headline individually ─────────────────────── */ /* Named by the maximum. Proxima 700 throughout; leading and tracking are the reference's own. Where two headlines share a maximum but differ, the second carries a letter suffix. */ .options-plus-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(.options-plus-page [class*="dc-t-"]) { margin: 0; text-wrap: balance; } .options-plus-page .dc-t-84 { font-size: clamp(44px, 6vw, 84px); line-height: 1.0; letter-spacing: -0.04em; } .options-plus-page .dc-t-80 { font-size: clamp(38px, 6vw, 80px); line-height: 1.0; letter-spacing: -0.04em; } .options-plus-page .dc-t-54 { font-size: clamp(30px, 4.2vw, 54px); line-height: 1.06; letter-spacing: -0.03em; } .options-plus-page .dc-t-48 { font-size: clamp(28px, 3.8vw, 48px); line-height: 1.08; letter-spacing: -0.03em; } .options-plus-page .dc-t-46 { font-size: clamp(28px, 3.8vw, 46px); line-height: 1.08; letter-spacing: -0.03em; } .options-plus-page .dc-t-42 { font-size: clamp(26px, 3.4vw, 42px); line-height: 1.1; letter-spacing: -0.025em; } .options-plus-page .dc-t-38 { font-size: clamp(24px, 3vw, 38px); line-height: 1.12; letter-spacing: -0.025em; } .options-plus-page .dc-t-38t { font-size: clamp(24px, 3vw, 38px); line-height: 1.1; letter-spacing: -0.026em; } .options-plus-page .dc-t-28 { font-size: clamp(20px, 2.4vw, 28px); line-height: 1.2; letter-spacing: -0.018em; } .options-plus-page .dc-t-26 { font-size: clamp(19px, 2.2vw, 26px); line-height: 1.22; letter-spacing: -0.018em; } /* The pull-quote is Proxima 500, so it sits outside the dc-t- scale. */ .options-plus-page .dc-q-23 { font-family: var(--font-heading); font-weight: 500; font-size: clamp(17px, 2vw, 23px); line-height: 1.45; letter-spacing: -0.015em; margin: 0; text-wrap: pretty; } /* Big numerals (the 51% stat and the 184/240 counter) */ .options-plus-page .dc-num-64 { font-family: var(--font-heading); font-weight: 700; font-size: clamp(44px, 5vw, 64px); line-height: 1; letter-spacing: -0.045em; } .options-plus-page .dc-num-40 { font-family: var(--font-heading); font-weight: 700; font-size: clamp(28px, 3.2vw, 40px); line-height: 1; letter-spacing: -0.035em; } .options-plus-page .dc-num-26 { font-family: var(--font-heading); font-weight: 700; font-size: 26px; line-height: normal; } /* Fixed-size display headings — line-height: normal, per trap 1 */ .options-plus-page .dc-h-175 { font-family: var(--font-heading); font-weight: 700; font-size: 17.5px; line-height: 1.28; letter-spacing: -0.014em; margin: 0; } .options-plus-page .dc-hs-15 { font-family: var(--font-heading); font-weight: 600; font-size: 15px; line-height: normal; } .options-plus-page .dc-hs-135{ font-family: var(--font-heading); font-weight: 600; font-size: 13.5px; line-height: normal; } .options-plus-page .dc-hs-125{ font-family: var(--font-heading); font-weight: 600; font-size: 12.5px; line-height: normal; } /* ── Body copy steps (Inter), named by px ───────────────────────────────────────────────── */ .options-plus-page .dc-lede-19 { font-size: clamp(16px, 1.8vw, 19px); line-height: 1.55; margin: 0; } .options-plus-page .dc-closer-lede { font-size: clamp(17px, 2vw, 21px); line-height: 1.5; margin: 0; color: rgba(255, 255, 255, 0.92); } .options-plus-page .dc-body-16 { font-size: 16px; line-height: 1.6; margin: 0; } .options-plus-page .dc-body-155 { font-size: 15.5px; line-height: 1.6; margin: 0; } .options-plus-page .dc-body-15 { font-size: 15px; line-height: 1.6; margin: 0; } .options-plus-page .dc-body-145 { font-size: 14.5px; line-height: 1.55; margin: 0; } .options-plus-page .dc-body-14 { font-size: 14px; line-height: 1.55; margin: 0; } .options-plus-page .dc-body-14s { font-size: 14px; line-height: 1.5; margin: 0; } .options-plus-page .dc-body-135 { font-size: 13.5px; line-height: 1.55; margin: 0; } .options-plus-page .dc-body-13 { font-size: 13px; line-height: 1.5; margin: 0; } .options-plus-page .dc-body-13n { font-size: 13px; line-height: normal; margin: 0; } .options-plus-page .dc-body-125 { font-size: 12.5px; line-height: 1.45; margin: 0; } .options-plus-page .dc-body-125s { font-size: 12.5px; line-height: 1.5; margin: 0; } .options-plus-page .dc-body-12 { font-size: 12px; line-height: 1.5; margin: 0; } .options-plus-page .dc-body-105 { font-size: 10.5px; line-height: normal; margin: 0; } /* Measures read off the RENDERED reference (it sets them in `ch`, so these are the px widths those `ch` values actually render at — the reference's own value is in the comment). */ .options-plus-page .dc-measure-760 { max-width: 760px; } /* section heads, px */ .options-plus-page .dc-measure-700 { max-width: 700px; } /* Emma head, px */ .options-plus-page .dc-measure-666 { max-width: 666px; margin-left: auto; margin-right: auto; } /* 56ch @19px */ .options-plus-page .dc-measure-620 { max-width: 620px; } /* MIS strip copy, px */ .options-plus-page .dc-measure-598 { max-width: 598px; } /* 62ch @15.5px */ .options-plus-page .dc-measure-584 { max-width: 584px; } /* 58ch @16px */ .options-plus-page .dc-measure-577 { max-width: 577px; margin-left: auto; margin-right: auto; } /* 44ch @21px */ .options-plus-page .dc-measure-546 { max-width: 546px; } /* 56ch @15.5px */ .options-plus-page .dc-measure-507 { max-width: 507px; } /* 52ch @15.5px */ .options-plus-page .dc-measure-435 { max-width: 435px; } /* 46ch @15px */ .options-plus-page .dc-measure-353 { max-width: 353px; } /* 40ch @14px */ .options-plus-page .dc-measure-900 { max-width: 900px; } /* the quote panel, px */ /* ── Spacing steps the compiled utility surface does not carry ───────────────────────────── */ /* prototypes/ is not a Tailwind scan source, so a step nothing else in the repo uses produces no CSS (mb-11 compiles, mt-11 does not; the `.5` steps are patchy). These are also what keeps the spacing next to a `dc-t-*`/`dc-h-*` class working at all — see trap 2. Named in px. */ .options-plus-page .dc-mt-3px { margin-top: 3px; } .options-plus-page .dc-mt-6px { margin-top: 6px; } .options-plus-page .dc-mt-7px { margin-top: 7px; } .options-plus-page .dc-mt-8px { margin-top: 8px; } .options-plus-page .dc-mt-12px { margin-top: 12px; } .options-plus-page .dc-mt-14px { margin-top: 14px; } .options-plus-page .dc-mt-16px { margin-top: 16px; } .options-plus-page .dc-mt-18px { margin-top: 18px; } .options-plus-page .dc-mt-20px { margin-top: 20px; } .options-plus-page .dc-mt-22px { margin-top: 22px; } .options-plus-page .dc-mt-24px { margin-top: 24px; } .options-plus-page .dc-mt-28px { margin-top: 28px; } .options-plus-page .dc-mt-30px { margin-top: 30px; } .options-plus-page .dc-mt-34px { margin-top: 34px; } .options-plus-page .dc-mt-40px { margin-top: 40px; } .options-plus-page .dc-mt-44px { margin-top: 44px; } .options-plus-page .dc-mb-12px { margin-bottom: 12px; } .options-plus-page .dc-mb-14px { margin-bottom: 14px; } .options-plus-page .dc-mb-16px { margin-bottom: 16px; } .options-plus-page .dc-mb-18px { margin-bottom: 18px; } .options-plus-page .dc-mb-24px { margin-bottom: 24px; } .options-plus-page .dc-mb-28px { margin-bottom: 28px; } .options-plus-page .dc-mb-32px { margin-bottom: 32px; } /* ── Mono labels ────────────────────────────────────────────────────────────────────────── */ /* The reference's mono eyebrow IS our font-label at 12.5px/0.08em — composed in the markup from font-label + text-label-l + tracking-label. Only the sizes and trackings the DS lacks are here (DS carries 9.5/10.5/12.5px and 0.08em). The one rule below is trap 1 applied to the labels, and it matters more than it looks: the reference sets every mono label with the `font:` shorthand, so its line-height is `normal`. Simply omitting the DS `leading-eyebrow` is NOT enough — the label then inherits the body's 1.5, which is wrong in the other direction (it made the phone mock's two-line rule chip 12px too tall). `normal` has to be stated. */ .options-plus-page .font-label { line-height: normal; } .options-plus-page .dc-ms-9 { font-size: 9px; } .options-plus-page .dc-ms-10 { font-size: 10px; } .options-plus-page .dc-ms-11 { font-size: 11px; } .options-plus-page .dc-ms-12 { font-size: 12px; } .options-plus-page .dc-ms-85 { font-size: 8.5px; } .options-plus-page .dc-tr-06 { letter-spacing: 0.06em; } .options-plus-page .dc-tr-07 { letter-spacing: 0.07em; } .options-plus-page .dc-tr-09 { letter-spacing: 0.09em; } /* A coral text link with a chevron */ .options-plus-page .dc-link { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-heading); font-weight: 600; font-size: 13.5px; color: var(--color-coral-500); text-decoration: none; } .options-plus-page .dc-link:hover { color: #fff; } .options-plus-page .dc-link i { font-size: 10px; } /* ── Surfaces ───────────────────────────────────────────────────────────────────────────── */ .options-plus-page .dc-panel { max-width: 1200px; margin: 0 auto; border-radius: var(--radius-5\.5); position: relative; overflow: hidden; } .options-plus-page .dc-panel-dark { background: var(--color-dark-band); color: #fff; box-shadow: var(--dc-shadow-dark-panel); padding: clamp(36px, 4.5vw, 60px) clamp(28px, 4vw, 56px); } /* the tracking panel is the same device at slightly tighter padding and no shadow */ .options-plus-page .dc-panel-dark-2 { background: var(--color-dark-band); color: #fff; padding: clamp(36px, 4.5vw, 56px) clamp(28px, 4vw, 52px); } .options-plus-page .dc-card { background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-4\.5); padding: 26px 28px; } .options-plus-page .dc-card-mock { border: 0; box-shadow: var(--shadow-deep); border-radius: var(--radius-4\.5); padding: 22px 26px; text-align: left; max-width: 760px; margin-left: auto; margin-right: auto; } /* LONGHANDS, NOT THE `transition` SHORTHAND. These cards are direct children of a `.reveal-stagger` container (the automate 4-up), and the stagger works by setting a per-child `transition-delay`. The shorthand RESETS `transition-delay` to 0s — and page CSS is unlayered while reveal.css compiles into `@layer components`, so unlayered wins regardless of specificity and every card animated at once. No intentional delay here, so the hover behaviour is unchanged. */ .options-plus-page .dc-card-lift { border: 0; box-shadow: var(--shadow-soft); border-radius: var(--radius-4\.5); padding: 28px 30px; transition-property: transform, box-shadow; transition-duration: 250ms, 250ms; transition-timing-function: var(--dc-ease), ease; } .options-plus-page .dc-card-lift:hover { transform: translateY(-5px); box-shadow: var(--dc-shadow-lift); } .options-plus-page .dc-card-panel { border: 0; box-shadow: var(--shadow-soft); border-radius: var(--radius-4\.5); padding: clamp(28px, 3.2vw, 38px) clamp(26px, 3.4vw, 44px); } .options-plus-page .dc-card-quote { border: 0; box-shadow: var(--dc-shadow-panel); border-radius: var(--radius-5); padding: clamp(30px, 3.6vw, 44px) clamp(28px, 3.6vw, 48px); margin: 0; } /* On dark */ .options-plus-page .dc-on-dark-body { color: var(--dc-on-dark-body); } .options-plus-page .dc-on-dark-mute { color: var(--dc-on-dark-mute); } .options-plus-page .dc-on-dark-strip { color: var(--dc-on-dark-strip); } .options-plus-page .dc-amber { color: var(--dc-amber); } /* Glass card on the dark band (the three Emma cards + the prompt lines) */ .options-plus-page .dc-glass { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-4\.5); padding: 26px; } .options-plus-page .dc-glass-dashed { border-style: dashed; border-color: rgba(255, 255, 255, 0.25); } .options-plus-page .dc-glass-line { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-3); padding: 14px 18px; font-family: var(--font-heading); font-weight: 500; font-size: 13.5px; line-height: normal; color: #fff; } .options-plus-page .dc-stat-box { flex: none; display: flex; flex-direction: column; gap: 10px; padding: 26px 30px; min-width: 230px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--radius-4\.5); background: rgba(255, 255, 255, 0.04); } /* Coral icon tile (the 4-up cards) and a plain sand tile (the how-it-works rows) */ .options-plus-page .dc-tile { flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-3); background: var(--color-coral-500); box-shadow: var(--dc-shadow-tile); width: 44px; height: 44px; } .options-plus-page .dc-tile i { font-size: 16px; color: #fff; } .options-plus-page .dc-tile-sand { flex: none; position: relative; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: var(--radius-3\.5); background: var(--color-page-bg); } .options-plus-page .dc-tile-sand > i { font-size: 16px; color: var(--color-coral-500); } .options-plus-page .dc-tile-pip { position: absolute; top: -7px; right: -7px; font-family: var(--font-label); font-weight: 700; font-size: 9px; line-height: normal; color: #fff; background: var(--color-ink-deep); border-radius: var(--radius-full); padding: 3px 6px; } .options-plus-page .dc-tile-glass { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-2\.5); background: rgba(255, 255, 255, 0.08); } .options-plus-page .dc-tile-glass i { font-size: 13px; color: var(--color-coral-500); } /* The live dot is deliberately static — the reference never animates it. */ .options-plus-page .dc-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--color-ok-green-bright); } /* ── Grids, measured off the reference ──────────────────────────────────────────────────── */ .options-plus-page .dc-grid { display: grid; } .options-plus-page .dc-grid-problem { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(32px, 4.5vw, 64px); align-items: center; } .options-plus-page .dc-grid-how { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 6px 28px; align-items: baseline; } .options-plus-page .dc-grid-choices { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; } .options-plus-page .dc-grid-block { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; } .options-plus-page .dc-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .options-plus-page .dc-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .options-plus-page .dc-grid-int { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 26px; } .options-plus-page .dc-grid-emma-strip { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(24px, 3.5vw, 44px); align-items: center; } .options-plus-page .dc-grid-engage { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(24px, 3.5vw, 48px); align-items: center; } .options-plus-page .dc-grid-track { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(30px, 4vw, 56px); align-items: center; } .options-plus-page .dc-grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; } /* The reference's OWN two collapse breakpoints, 1080px and 640px — it uses no other (its 1120 and 940 hide nav items, and its 1080/560 pair reflows the footer grid; both are chrome we do not port). What was here before was a single invented 991px block, which is off the package's scale entirely and collapsed more than the reference does. At 1080 every two-column split goes to one column — the reference lists exactly these seven (probgrid, choicesgrid, blockgrid, emmastrip, engagegrid, trackgrid, howrow) — while the two many-up grids only halve. */ @media (max-width: 1080px) { .options-plus-page .dc-grid-problem, .options-plus-page .dc-grid-choices, .options-plus-page .dc-grid-block, .options-plus-page .dc-grid-emma-strip, .options-plus-page .dc-grid-engage, .options-plus-page .dc-grid-track, .options-plus-page .dc-grid-how { grid-template-columns: minmax(0, 1fr); gap: 24px; } .options-plus-page .dc-grid-4, .options-plus-page .dc-grid-int { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .options-plus-page .dc-grid-4, .options-plus-page .dc-grid-int { grid-template-columns: minmax(0, 1fr); } } /* DELIBERATELY ABSENT, because the reference has no rule for either: · `.dc-grid-3` (the Emma prompt row) stays THREE-up all the way down — the reference's `repeat(3,minmax(0,1fr))` carries no collapse attribute at all. · the dark panels' padding is a fluid `clamp(36px,4.5vw,60px)` in the reference (already the base rule above), so the old `padding: 40px 28px` override at 991 was squeezing them early for no reason the package asks for. */ /* ── Struck chips: the DS .badge-struck / .badge-row are exactly this device ─────────────── */ /* Only the hairline colour differs (the reference uses #ECEEF3, our token is #E6E8EF). The DS also sets decoration-thickness 2px where the reference leaves it at the default — kept as the DS has it, and noted in the report rather than overridden. */ .options-plus-page .badge-struck { border-color: var(--color-rule); } /* ── 1 · Hero ───────────────────────────────────────────────────────────────────────────── */ /* The wash is 720px at left 50% / top -420px, translated -50% — a centred bleed the DS .section-glow corner placements cannot express, so it is page-local. Same recipe as the DS glow: coral at 10% over transparent. */ .options-plus-page .dc-glow-top { position: absolute; width: 720px; height: 720px; left: 50%; top: -420px; transform: translateX(-50%); border-radius: 50%; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--color-coral-500) 10%, transparent), transparent 62%); } /* The hero mock's demand bars */ .options-plus-page .dc-bars { display: flex; flex-direction: column; gap: 10px; } .options-plus-page .dc-bar-head { display: flex; justify-content: space-between; } .options-plus-page .dc-bar-track { height: 9px; border-radius: var(--radius-1\.5); background: var(--dc-fill); margin-top: 5px; } .options-plus-page .dc-bar-fill { height: 100%; border-radius: var(--radius-1\.5); background: var(--color-ink-deep); } .options-plus-page .dc-bar-fill-coral { background: var(--color-coral-500); } .options-plus-page .dc-bar-88 { width: 88%; } .options-plus-page .dc-bar-75 { width: 75%; } .options-plus-page .dc-bar-9 { width: 9%; } .options-plus-page .dc-mock-foot { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--color-rule); } /* ── 2 · The problem: the hand-tally mock ───────────────────────────────────────────────── */ .options-plus-page .dc-mock-frame { background: var(--color-page-bg); border-radius: var(--radius-4\.5); padding: clamp(22px, 2.6vw, 30px); } .options-plus-page .dc-mock-card { background: var(--color-paper); border-radius: var(--radius-3\.5); box-shadow: var(--dc-shadow-mock); padding: 20px 22px; } .options-plus-page .dc-mock-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--color-rule); } .options-plus-page .dc-tally-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--dc-row-line); } .options-plus-page .dc-tally-marks { font-family: var(--font-label); font-weight: 500; font-size: 11px; letter-spacing: 0.1em; color: var(--color-ink-soft); } .options-plus-page .dc-tally-flag { min-width: 46px; text-align: right; } .options-plus-page .dc-mock-warn { display: flex; align-items: flex-start; gap: 9px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--color-rule); } .options-plus-page .dc-mock-warn > i { flex: none; margin-top: 2px; font-size: 12px; color: var(--color-coral-500); } /* ── 3 · How it works: the numbered rows ────────────────────────────────────────────────── */ .options-plus-page .dc-rows { border-top: 1px solid var(--color-rule); } .options-plus-page .dc-row { display: flex; gap: 18px; align-items: flex-start; padding: 22px 0; border-bottom: 1px solid var(--color-rule); } .options-plus-page .dc-row:last-child { border-bottom: 0; } /* ── 4 · Choices in: the phone mock ─────────────────────────────────────────────────────── */ .options-plus-page .dc-phone { width: 290px; background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-7); box-shadow: var(--dc-shadow-phone); padding: 20px 18px; } .options-plus-page .dc-phone-head { display: flex; justify-content: space-between; } .options-plus-page .dc-phone-row { display: flex; justify-content: space-between; align-items: center; border: 1.5px solid var(--color-coral-500); border-radius: var(--radius-2\.5); padding: 11px 13px; } .options-plus-page .dc-phone-rule { border: 1px solid var(--color-rule); border-radius: var(--radius-2\.5); padding: 11px 13px; background: var(--color-coral-100); } .options-plus-page .dc-phone-reserve { display: flex; justify-content: space-between; align-items: center; border: 1px dashed var(--color-rule); border-radius: var(--radius-2\.5); padding: 11px 13px; } .options-plus-page .dc-phone-foot { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; } .options-plus-page .dc-phone-foot i { font-size: 9px; } /* ── 5 · Block modelling: the scenario-comparison card ──────────────────────────────────── */ .options-plus-page .dc-scenario-card { background: var(--color-paper); border-radius: var(--radius-4); padding: 20px 22px; box-shadow: var(--dc-shadow-dark-card); } .options-plus-page .dc-scenario { border: 1px solid var(--color-rule); border-radius: var(--radius-3); padding: 14px; } .options-plus-page .dc-scenario-best { border: 1.5px solid var(--color-coral-500); position: relative; } .options-plus-page .dc-scenario-tag { position: absolute; top: -9px; right: 10px; font-family: var(--font-label); font-weight: 600; font-size: 8.5px; line-height: normal; letter-spacing: 0.06em; color: #fff; background: var(--color-coral-500); border-radius: var(--radius-full); padding: 3px 8px; } .options-plus-page .dc-scenario-foot { margin: 12px 0 0; padding-top: 11px; border-top: 1px solid var(--color-rule); } /* ── 6 · Automate: the dark Emma strip ──────────────────────────────────────────────────── */ .options-plus-page .dc-strip-dark { background: var(--color-dark-band); color: #fff; border-radius: var(--radius-4\.5); padding: clamp(26px, 3vw, 34px) clamp(26px, 3.4vw, 40px); } /* ── 9 · Tracking: the counter rule ─────────────────────────────────────────────────────── */ .options-plus-page .dc-count-row { display: flex; align-items: baseline; gap: 14px; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.14); } /* MIS detail rule; layout and logo cards are shared in `_shared/cards.css`. */ .options-plus-page .dc-int-rule { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--color-rule); } /* ── 10 · Results: the quote attribution ────────────────────────────────────────────────── */ .options-plus-page .dc-quote-glyph { font-size: 17px; color: var(--color-coral-500); } .options-plus-page .dc-normal-case { text-transform: none; } .options-plus-page .dc-self-start { align-self: flex-start; } .options-plus-page .dc-quote-by { display: flex; align-items: center; gap: 13px; margin-top: 26px; } .options-plus-page .dc-avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--dc-fill); color: var(--color-ink-deep); font-family: var(--font-heading); font-weight: 700; font-size: 14px; line-height: normal; } /* ── Feature tick rows (used in three sections) ─────────────────────────────────────────── */ .options-plus-page .dc-tick { display: flex; gap: 11px; align-items: flex-start; } .options-plus-page .dc-tick > i { flex: none; margin-top: 5px; font-size: 11px; color: var(--color-coral-500); } .options-plus-page .dc-feature { display: flex; gap: 13px; align-items: flex-start; } /* The on-dark guardrail strip (a flowing row, not a list) */ .options-plus-page .dc-guardrails { display: flex; flex-wrap: wrap; gap: 10px 22px; } .options-plus-page .dc-guardrails > span > i { margin-right: 7px; font-size: 10px; color: var(--color-ok-green-bright); } /* ── PHONE (≤640) — beyond the reference, deliberately ───────────────────────────────────── */ /* The references pad in literal px with no media query at all, so at 390px they clip their own content (STATUS §5 records that as the defect most worth fixing at source). These rules fix the text loss WITHOUT hiding anything: the Emma stat box takes its own row instead of overflowing the dark band. */ @media (max-width: 640px) { .options-plus-page .dc-stat-box { min-width: 0; width: 100%; } /* READABILITY, not overflow (owner-approved): the three Emma prompt cards measure clean at 390px - nothing is lost - but a 105px track wraps them to roughly one word per line. The reference has no collapse here; this is one line, and reverting it restores the squeeze. */ .options-plus-page .dc-grid-3 { grid-template-columns: minmax(0, 1fr); } }