/** * Can I Retire Now? — Scorecard UI shell styling. * * BRAND-SYSTEM RECONCILIATION PASS: the color/font/border/radius/button/ * field/header values below are reconciled against the approved free-check * visual system in brand-reference/styles.css (brand-reference/ is a * read-only copy of the completed, frozen free check — authoritative for * visual/brand only, never for product logic/copy). See the delivery * report for the full before/after reconciliation table. Two things are * DELIBERATELY kept different from the free-check reference, both * explicitly required by the Scorecard's own task instructions rather * than oversights: * 1. No per-verdict red/green/amber/blue result-card colors (free-check * has --color-on-track-bg/--color-gap-bg/etc.) — the Scorecard uses * one neutral coral/dark treatment for all three ratio bands, per * results-copy-updated.md's "Tone is deliberately non-alarming * across all states... no fear-based or urgency language," and per * this task's explicit "Do not create verdict-specific red/green * styling." * 2. The baseline result panel keeps a dark fill (.panel-dark, using * free-check's exact --color-shell dark value) even though * free-check itself never uses that dark color as a CONTENT * background (only as the outer decorative shell wrapping its * single form+result). The Scorecard has multiple sibling panels * competing for attention (baseline, 3 scenarios, sensitivity, * country) that free-check doesn't have, and this task explicitly * requires "baseline remains visually dominant" as part of the * Scorecard's own paid-product hierarchy — so the approved dark * color is reused, deliberately, for a role free-check doesn't need. * * Anton loading: identical method to brand-reference/index.html — Google * Fonts CDN link in ui/scorecard.html's (preconnect + stylesheet), * no bundled/invented font file. Anton is used only in the same role * free-check establishes for it: the single main product-title H1 — not * section headings or card titles, which free-check doesn't use Anton * for either (its .result-stats dd figures are bold body-font, not * Anton). Section/card headings and stat figures below use the regular * body font at bold weights instead, matching free-check's own * .result-stats dd / .field label / .eyebrow weight conventions. */ :root { /* Exact values from brand-reference/styles.css :root. */ --color-bg: #faf1e8; --color-panel: #ffffff; --color-panel-quiet: #f3eadc; /* Scorecard-only "secondary panel" tint — free-check has no equivalent (no de-emphasized-panel concept); kept close to the family of --color-bg since it still needs to read as part of the same warm cream system. */ --color-dark-panel: #201a17; /* = free-check --color-shell */ --color-dark-panel-text: #faf1e8; /* = free-check --color-page-bg, reused as text-on-dark */ --color-text: #1c1712; /* = free-check --color-text */ --color-text-muted: #5c6570; /* = free-check --color-muted */ --color-border: #e3d9cd; /* = free-check --color-border */ --color-border-dark: rgba(250, 241, 232, 0.16); --color-coral: #e8734a; /* = free-check --color-accent */ --color-coral-dark: #d4623c; /* = free-check --color-accent-hover */ --color-focus: #c14f2b; /* = free-check --color-focus */ --color-error: #b3261e; /* = free-check --color-error */ --font-body: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-headline: 'Anton', 'Arial Narrow', Impact, "Segoe UI", sans-serif; --radius: 16px; /* = free-check --radius-card */ --radius-sm: 8px; /* = free-check --radius-field (already matched) */ --container-width: 1040px; /* wider than free-check's 760px — a deliberate, necessary difference: the Scorecard's baseline+3 scenarios+3 sensitivity+country+disclosure content needs more width than free-check's single compact form, not a brand-color/shape divergence. */ --section-gap: 1.75rem; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 18px; line-height: 1.5; } .container { max-width: var(--container-width); margin: 0 auto; padding: 0 1.25rem; } /* --------------------------------------------------------------------- A. Header — reconciled to sit on the plain cream page background like brand-reference's .brand-header (no dark fill/border; free-check never puts its header on the dark shell color). Locked strings ("Can I Retire Now?" / "Retirement Readiness Scorecard" / the subline) are unchanged — only the visual container/typography changed. --------------------------------------------------------------------- */ .site-header { padding: 2.25rem 0 1.25rem; } .header-inner { text-align: center; } .brand-icon { margin-bottom: 0.6rem; } .brand-icon img { display: block; margin: 0 auto; height: auto; } .brand-kicker { margin: 0 0 0.4rem; font-size: 1.15rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-coral); font-weight: 800; } .brand-title { margin: 0 0 0.4rem; font-family: var(--font-headline); font-weight: 400; /* Anton is a single heavy weight; 400 renders correctly (matches brand-reference's own comment on this exact rule). */ font-size: 2.75rem; letter-spacing: 0.02em; line-height: 1.05; text-transform: none; white-space: normal; } .brand-sub { max-width: 40rem; /* kept — line-length control for the Scorecard's wider container, not a brand-color/shape property. */ margin: 0 auto; color: var(--color-text-muted); font-size: 1.2rem; line-height: 1.5; } /* --------------------------------------------------------------------- Panels --------------------------------------------------------------------- */ main.container { padding-top: 2.5rem; padding-bottom: 3rem; } .panel { background: var(--color-panel); border: 2px solid var(--color-border); /* was 1px — reconciled to free-check's primary-content-card border weight (input/.result-card both use 2px). */ border-radius: var(--radius); padding: 2rem; /* = free-check .calc-card padding */ margin-bottom: var(--section-gap); } .panel-quiet { background: var(--color-panel-quiet); border-color: var(--color-border); } .panel-dark { /* See file header comment: dark fill intentionally kept for the baseline result only, using the exact approved dark value. */ background: var(--color-dark-panel); color: var(--color-dark-panel-text); border: 2px solid var(--color-dark-panel); border-left: 6px solid var(--color-coral); padding: 2rem; } .panel h2 { font-family: var(--font-body); font-weight: 800; /* matches free-check's .result-stats dd / bold-body convention — Anton is reserved for the main H1 only, see file header comment. */ text-transform: none; letter-spacing: normal; font-size: 1.4rem; margin: 0 0 1.1rem; } .section-note { color: var(--color-text-muted); font-size: 0.95rem; margin: -0.6rem 0 1.1rem; } /* --------------------------------------------------------------------- B. Form / inputs — reconciled to brand-reference's field styling (border weight, padding, font-size, label weight, focus color). --------------------------------------------------------------------- */ .field { margin-bottom: 1.15rem; } .field:last-of-type { margin-bottom: 1.4rem; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; } .field-row .field { margin-bottom: 1.15rem; } .field label { display: block; font-weight: 600; font-size: 1.05rem; margin-bottom: 0.35rem; } .field input, .field select { width: 100%; padding: 0.65rem 0.75rem; font-size: 1.1rem; border: 2px solid var(--color-border); /* was 1px */ border-radius: var(--radius-sm); background: var(--color-panel); color: var(--color-text); font-family: inherit; } .field input:focus-visible, .field select:focus-visible, .field input:focus, .field select:focus { outline: 3px solid var(--color-focus); /* was var(--color-coral) — free-check uses a dedicated, slightly darker focus color distinct from the plain accent. */ outline-offset: 2px; } .field-help { margin: 0.4rem 0 0; /* top-margin (help text follows the input here, unlike some free-check fields where it precedes it) — DOM order/behavior unchanged per instructions, only the color/size below is reconciled. */ font-size: 0.95rem; color: var(--color-text-muted); line-height: 1.45; } .form-error { background: #fdeceb; border: 1px solid var(--color-error); color: var(--color-error); /* was --color-coral-dark — free-check keeps a dedicated error color distinct from the accent-hover color. */ border-radius: var(--radius-sm); padding: 0.85rem 1.1rem; margin: 0 0 1.4rem; font-weight: 600; } .btn { display: inline-block; font-family: inherit; font-size: 1.15rem; font-weight: 700; padding: 0.95rem 1.5rem; border-radius: var(--radius-sm); /* was 999px pill — free-check's .btn-primary/.cta-button both use the 8px field radius, not a pill. */ border: 2px solid transparent; cursor: pointer; text-decoration: none; /* .btn is also used on the Share — no link underline, same look as the Print