/* ============================================================================ wa-theme.css -- COMMAND-CENTER theme + component library for the Washington Business Legal Resource Center redesign. ---------------------------------------------------------------------------- Loaded AFTER /shared/firm.css and /shared/washington.css, and ONLY on redesigned pages that carry . Everything here is scoped under .wa-rc / body.wa-rc so the ~94 existing Washington pages (which lack the wa-rc class) are NOT repainted. The palette tokens are defined on .wa-rc, NOT on :root, for the same reason. This file SUPERSEDES the parchment prototype /shared/wa-resource-center.css. It reuses that file's component STRUCTURE ideas but applies the NEW evergreen / slate / rain palette (cream as an ACCENT ONLY) and a full-width dashboard layout: a "PNW legal command center", calm, technical, trustworthy. No tourist clichés (no Space Needle, mountains, coffee). ---------------------------------------------------------------------------- COMPONENT CLASS INVENTORY (so other agents can consume them) ---------------------------------------------------------------------------- LAYOUT .wa-rc body / root scope + palette tokens .wa-rc-shell full-width page background frame .wa-rc-wrap centered max-width 1440px content container .wa-rc-wrap--narrow narrower reading column (~1100px) .wa-rc-band full-width section band (plain) .wa-rc-band--evergreen full-width evergreen band (light-on-dark) .wa-rc-band--mist full-width pale band .wa-rc-band--rain full-width cool blue-grey band .wa-rc-grid 12-col-feel responsive content + right-rail grid .wa-rc-grid__main main column of .wa-rc-grid .wa-rc-grid__rail right rail column of .wa-rc-grid (risk/checklist/pkg) .wa-rc-section vertical section rhythm .wa-rc-sechead / -sectag section header block + eyebrow tag HERO .wa-rc-hero full-width evergreen command-center hero .wa-rc-hero__inner hero content wrap .wa-rc-hero__eyebrow / __title / __lede / __meta / __actions .wa-rc-hero__metric small KPI tile inside hero (deadline / exposure) STATUS RIBBON (admission-pending posture) .wa-rc-ribbon status ribbon container (calm, professional) .wa-rc-ribbon__pill "Admission pending" status pill (animated dot) .wa-rc-ribbon__title / __body .wa-rc-ribbon__zones / __zone / __zone-label (3 honest zones) NOTE: also styles the JS-injected .wa-disclaimer-mount .wa-disclosure so the existing single-flag disclaimer renders in command-center skin. AI LEGAL ANALYST (centerpiece, dark band, light text) .wa-rc-analyst dark analyst card (signal-grid texture) .wa-rc-analyst__grid two-column layout (pitch | console) .wa-rc-analyst__eyebrow / __title / __sub / __lede .wa-rc-analyst__checks "what it checks" list .wa-rc-analyst__console stylized analyst console panel .wa-rc-analyst__console-bar / __readout / __row / __tag .wa-rc-analyst__curator attorney-curator footer .wa-rc-analyst__actions button row RISK GAUGE (4-level: low / medium / high / critical) .wa-rc-gauge full gauge block (rail or inline) .wa-rc-gauge__dial segmented arc / bar dial .wa-rc-gauge__seg one of 4 dial segments .wa-rc-gauge__score / __level / __caption .wa-rc-gauge--low / --medium / --high / --critical level modifier .wa-rc-riskpill compact inline risk pill (same 4 levels) ISSUE CARDS + CHIPS .wa-rc-issues grid of issue cards .wa-rc-issue one issue card .wa-rc-issue__head / __title / __body / __foot .wa-rc-chiprow flex row of highlight chips .wa-rc-chip highlight chip (meaning-coded, small) .wa-rc-chip--deadline / --feeshift / --docgap / --cpa / --mhmda / --risk ACCORDION (native

, collapsed by default) .wa-rc-fold styled

.wa-rc-fold__summary

row (chevron, collapsed look) .wa-rc-fold__chevron rotating chevron .wa-rc-fold__body revealed body DOCUMENT CHECKLIST .wa-rc-checklist checklist container .wa-rc-checklist__group / __glabel .wa-rc-checklist__item one row (custom checkbox affordance) .wa-rc-checklist__item--have / --helpful / --nice tier styling PACKAGE RECOMMENDATION + TIER CARDS .wa-rc-packages package-recommendation panel .wa-rc-tiers grid of tier cards .wa-rc-tier one pricing tier card .wa-rc-tier--featured highlighted recommended tier .wa-rc-tier__price / __name / __bestfor / __foot NAV / WAYFINDING .wa-rc-crumbs lifecycle breadcrumb .wa-rc-sectionnav sticky in-page section/tab nav .wa-rc-sectionnav__link one tab .wa-rc-rail-card related-resources rail card .wa-rc-rail-card__group / __links CALCULATOR UI SHELL .wa-rc-calc calculator shell .wa-rc-calc__steps step tiles strip (progress) .wa-rc-calc__step one step tile .wa-rc-calc__panel active question panel .wa-rc-calc__q a progressive question step .wa-rc-calc__options / __option answer options .wa-rc-calc__nav prev/next bar .wa-rc-calc__result result panel (uses .wa-rc-gauge) .wa-rc-calc__factors contributing-factors list .wa-rc-calc__nextstep next-step card inside result .wa-rc-calc__disclaimer mandatory educational self-assessment disclaimer BUTTONS .wa-rc-btn base button .wa-rc-btn--primary / --ghost / --light / --quiet .wa-rc-btn--block full-width Rules baked in: first-person voice in markup (CSS is voice-neutral); explicit light-on-dark text on every evergreen / dark band because the global h1/h2 color rule would otherwise override inherited light color; 44px+ tap targets; single column under 768px; no horizontal scroll; print + reduced-motion safe. Sergei Tokmakov, Esq. -- CA Bar #279869 -- Washington admission pending -- Terms.Law ========================================================================= */ /* ---------------------------------------------------------------------------- 0. PALETTE TOKENS + RESET (scoped to .wa-rc, never :root) ---------------------------------------------------------------------------- */ .wa-rc { /* command-center palette: evergreen / slate / rain dominant, cream accent */ --wa-evergreen: #12352f; --wa-forest: #0b241f; --wa-moss: #2f5f4f; --wa-slate: #334155; --wa-slate-2: #475569; --wa-rain: #e5edf0; --wa-rain-2: #d4e0e6; --wa-mist: #f6f8f7; --wa-cedar: #8a5a36; --wa-gold: #c7a354; /* derived neutrals + on-dark text colors */ --wa-ink: #11221d; /* body text on light */ --wa-ink-soft: #33433d; /* secondary text on light */ --wa-stone: #5d6b66; /* meta text on light */ --wa-line: #d7e0dd; /* hairline rules on light */ --wa-line-2: #c2cfca; /* stronger rule */ --wa-on-dark: #eef3f1; /* primary text on dark */ --wa-on-dark-soft: rgba(238,243,241,0.78); /* secondary text on dark */ --wa-on-dark-faint: rgba(238,243,241,0.55); /* tertiary text on dark */ --wa-on-dark-line: rgba(199,163,84,0.30); /* gold hairline on dark */ --wa-card: #ffffff; /* 4-level risk scale */ --risk-low: #2f855a; --risk-medium: #b7791f; --risk-high: #c2410c; --risk-critical: #991b1b; --risk-low-bg: #e7f3ec; --risk-medium-bg: #fbf1de; --risk-high-bg: #fceee5; --risk-critical-bg: #f9e7e7; /* typography (fonts loaded by the page) */ --wa-serif: "Fraunces", "Iowan Old Style", Georgia, serif; --wa-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --wa-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* layout */ --wa-maxw: 1440px; --wa-maxw-rd: 1100px; --wa-pad: clamp(1.1rem, 4vw, 2.75rem); --wa-radius: 10px; --wa-radius-sm: 6px; /* elevation */ --wa-shadow: 0 18px 48px -28px rgba(11,36,31,0.45); --wa-shadow-sm: 0 8px 22px -16px rgba(11,36,31,0.35); color: var(--wa-ink); font-family: var(--wa-sans); } .wa-rc *, .wa-rc *::before, .wa-rc *::after { box-sizing: border-box; } /* page background frame (full-width dashboard) */ body.wa-rc, .wa-rc-shell { background: radial-gradient(1200px 520px at 88% -8%, rgba(47,95,79,0.10) 0%, transparent 60%), var(--wa-mist); color: var(--wa-ink); } /* ---------------------------------------------------------------------------- 1. LAYOUT PRIMITIVES ---------------------------------------------------------------------------- */ .wa-rc-wrap { width: 100%; max-width: var(--wa-maxw); margin-inline: auto; padding-inline: var(--wa-pad); } .wa-rc-wrap--narrow { max-width: var(--wa-maxw-rd); } .wa-rc-band { width: 100%; position: relative; } .wa-rc-band--mist { background: var(--wa-mist); } .wa-rc-band--rain { background: linear-gradient(180deg, var(--wa-rain) 0%, var(--wa-mist) 100%); } .wa-rc-band--evergreen { background: radial-gradient(900px 380px at 85% 0%, rgba(47,95,79,0.35) 0%, transparent 62%), linear-gradient(165deg, var(--wa-evergreen) 0%, var(--wa-forest) 100%); color: var(--wa-on-dark); } /* light-on-dark: global h-color rules are dark, so re-declare on the band */ .wa-rc-band--evergreen h1, .wa-rc-band--evergreen h2, .wa-rc-band--evergreen h3, .wa-rc-band--evergreen h4, .wa-rc-band--evergreen p, .wa-rc-band--evergreen li { color: var(--wa-on-dark); } .wa-rc-section { padding-block: clamp(2.4rem, 5.2vw, 4.4rem); } .wa-rc-section--tight { padding-block: clamp(1.6rem, 3.4vw, 2.6rem); } /* main + right rail (12-col feel) */ .wa-rc-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(280px, 26vw, 360px); gap: clamp(1.4rem, 3vw, 2.6rem); align-items: start; } .wa-rc-grid__main { min-width: 0; } .wa-rc-grid__rail { position: sticky; top: 84px; display: grid; gap: 1.1rem; align-self: start; } /* section header scaffold */ .wa-rc-sechead { max-width: 70ch; margin-bottom: clamp(1.3rem, 3vw, 2rem); } .wa-rc-sectag { display: inline-block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--wa-cedar); padding-top: 0.45rem; border-top: 2px solid var(--wa-gold); margin-bottom: 0.85rem; } .wa-rc-sechead h2 { font-family: var(--wa-serif); font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-weight: 430; line-height: 1.08; color: var(--wa-evergreen); margin: 0 0 0.7rem 0; } .wa-rc-sechead p { font-size: clamp(1rem, 1.5vw, 1.06rem); line-height: 1.62; color: var(--wa-ink-soft); margin: 0; } .wa-rc-band--evergreen .wa-rc-sechead h2 { color: var(--wa-on-dark); } .wa-rc-band--evergreen .wa-rc-sectag { color: var(--wa-gold); } /* ---------------------------------------------------------------------------- 2. BUTTONS (shared by hero, analyst, packages, calc, CTA) ---------------------------------------------------------------------------- */ .wa-rc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--wa-sans); font-size: 0.95rem; font-weight: 650; letter-spacing: 0.01em; line-height: 1.2; text-decoration: none; text-align: center; padding: 0.82rem 1.35rem; min-height: 46px; border-radius: var(--wa-radius-sm); border: 1px solid transparent; cursor: pointer; transition: background 200ms ease, color 200ms ease, border-color 200ms ease, transform 100ms ease, box-shadow 200ms ease; } .wa-rc-btn--primary { background: var(--wa-cedar); color: #fff; border-color: var(--wa-cedar); } .wa-rc-btn--primary:hover { background: #744826; border-color: #744826; box-shadow: 0 14px 30px -16px rgba(138,90,54,0.7); } .wa-rc-btn--ghost { background: transparent; color: var(--wa-evergreen); border-color: var(--wa-line-2); } .wa-rc-btn--ghost:hover { border-color: var(--wa-cedar); color: var(--wa-cedar); } /* light button for use on dark bands */ .wa-rc-btn--light { background: var(--wa-rain); color: var(--wa-forest); border-color: var(--wa-rain); } .wa-rc-btn--light:hover { background: #fff; border-color: #fff; } .wa-rc-btn--quiet { background: transparent; color: var(--wa-on-dark-soft); border-color: var(--wa-on-dark-line); } .wa-rc-btn--quiet:hover { color: var(--wa-on-dark); border-color: var(--wa-gold); } .wa-rc-btn--block { width: 100%; } .wa-rc-btn:active { transform: translateY(1px); } .wa-rc-btn:focus-visible { outline: 2px solid var(--wa-gold); outline-offset: 2px; } /* ---------------------------------------------------------------------------- 3. HERO -- full-width evergreen command-center header ---------------------------------------------------------------------------- */ .wa-rc-hero { width: 100%; position: relative; overflow: hidden; background: radial-gradient(1100px 460px at 84% -12%, rgba(47,95,79,0.42) 0%, transparent 60%), linear-gradient(160deg, var(--wa-evergreen) 0%, var(--wa-forest) 100%); color: var(--wa-on-dark); isolation: isolate; } .wa-rc-hero::before { /* faint signal-grid: conveys "command center" without clutter */ content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.5; background-image: linear-gradient(rgba(199,163,84,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(199,163,84,0.06) 1px, transparent 1px); background-size: 34px 34px; -webkit-mask-image: radial-gradient(circle at 82% 8%, #000 0%, transparent 72%); mask-image: radial-gradient(circle at 82% 8%, #000 0%, transparent 72%); } .wa-rc-hero__inner { max-width: var(--wa-maxw); margin-inline: auto; padding: clamp(2.2rem, 5.5vw, 4.2rem) var(--wa-pad); display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(1.6rem, 4vw, 3rem); align-items: center; } .wa-rc-hero__eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--wa-gold); margin: 0 0 1rem 0; } .wa-rc-hero__eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--wa-gold); } .wa-rc-hero__title { font-family: var(--wa-serif); font-size: clamp(2rem, 5vw, 3.3rem); font-weight: 420; line-height: 1.04; color: var(--wa-on-dark); margin: 0 0 1rem 0; max-width: 18ch; } .wa-rc-hero__lede { font-size: clamp(1rem, 1.7vw, 1.16rem); line-height: 1.6; color: var(--wa-on-dark-soft); margin: 0 0 1.6rem 0; max-width: 56ch; } .wa-rc-hero__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; } .wa-rc-hero__meta { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.5rem; } /* small KPI tiles on the hero (e.g. deadline, exposure) */ .wa-rc-hero__metric { background: rgba(255,255,255,0.05); border: 1px solid var(--wa-on-dark-line); border-radius: var(--wa-radius-sm); padding: 0.85rem 1rem; min-width: 130px; } .wa-rc-hero__metric .k { display: block; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.13em; color: var(--wa-gold); margin-bottom: 0.3rem; } .wa-rc-hero__metric .v { font-family: var(--wa-serif); font-size: 1.45rem; line-height: 1; color: var(--wa-on-dark); } .wa-rc-hero__metric .u { font-size: 0.78rem; color: var(--wa-on-dark-faint); } /* ---------------------------------------------------------------------------- 4. STATUS RIBBON -- admission-pending posture, command-center skin Calm, professional, three honest zones. Swaps via data-wa-show. Also re-skins the JS-injected .wa-disclaimer-mount disclosure. ---------------------------------------------------------------------------- */ .wa-rc-ribbon { background: var(--wa-card); border: 1px solid var(--wa-line); border-left: 4px solid var(--wa-gold); border-radius: var(--wa-radius-sm); padding: clamp(1.1rem, 2.6vw, 1.6rem) clamp(1.2rem, 2.8vw, 1.9rem); box-shadow: var(--wa-shadow-sm); } .wa-rc-ribbon__head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.55rem 0.9rem; margin-bottom: 0.65rem; } .wa-rc-ribbon__pill { display: inline-flex; align-items: center; gap: 0.45rem; background: var(--wa-evergreen); color: var(--wa-rain); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; padding: 0.34rem 0.7rem; border-radius: 999px; white-space: nowrap; } .wa-rc-ribbon__pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--wa-gold); box-shadow: 0 0 0 3px rgba(199,163,84,0.25); animation: waRcPulse 2.4s ease-in-out infinite; } @keyframes waRcPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } } .wa-rc-ribbon__title { font-family: var(--wa-serif); font-size: clamp(1.05rem, 1.9vw, 1.24rem); font-weight: 500; color: var(--wa-evergreen); margin: 0; line-height: 1.25; } .wa-rc-ribbon__body { font-size: 0.94rem; line-height: 1.6; color: var(--wa-ink-soft); margin: 0 0 1rem 0; max-width: 82ch; } .wa-rc-ribbon__zones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin: 0; padding: 0; list-style: none; } .wa-rc-ribbon__zone { background: var(--wa-mist); border: 1px solid var(--wa-line); border-top: 3px solid var(--risk-low); border-radius: var(--wa-radius-sm); padding: 0.85rem 0.95rem 0.95rem; } .wa-rc-ribbon__zone--scope { border-top-color: var(--wa-gold); } .wa-rc-ribbon__zone--hold { border-top-color: var(--wa-stone); } .wa-rc-ribbon__zone-label { display: block; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.11em; margin-bottom: 0.4rem; color: var(--risk-low); } .wa-rc-ribbon__zone--scope .wa-rc-ribbon__zone-label { color: var(--wa-cedar); } .wa-rc-ribbon__zone--hold .wa-rc-ribbon__zone-label { color: var(--wa-stone); } .wa-rc-ribbon__zone p { font-size: 0.83rem; line-height: 1.5; color: var(--wa-ink-soft); margin: 0; } /* re-skin the JS-injected single-flag disclaimer for the command-center look */ .wa-rc .wa-disclaimer-mount .wa-disclosure { background: var(--wa-card); border: 1px solid var(--wa-line); border-left: 4px solid var(--wa-gold); border-radius: var(--wa-radius-sm); padding: clamp(1rem, 2.4vw, 1.4rem) clamp(1.1rem, 2.6vw, 1.7rem); box-shadow: var(--wa-shadow-sm); } .wa-rc .wa-disclaimer-mount .wa-disclosure-pill { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--wa-evergreen); color: var(--wa-rain); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; padding: 0.3rem 0.65rem; border-radius: 999px; margin-bottom: 0.6rem; } .wa-rc .wa-disclaimer-mount .wa-disclosure-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--wa-gold); } .wa-rc .wa-disclaimer-mount .wa-disclosure-body { font-size: 0.9rem; line-height: 1.6; color: var(--wa-ink-soft); margin: 0; } /* ---------------------------------------------------------------------------- 5. AI LEGAL ANALYST -- the centerpiece. Dark band, light text. Framed as a custom attorney-curated issue-spotting system, NOT a chatbot. ---------------------------------------------------------------------------- */ .wa-rc-analyst { position: relative; background: radial-gradient(circle at 86% 14%, rgba(199,163,84,0.16) 0%, transparent 46%), linear-gradient(162deg, var(--wa-evergreen) 0%, var(--wa-forest) 100%); border: 1px solid var(--wa-on-dark-line); border-radius: var(--wa-radius); padding: clamp(1.6rem, 4vw, 2.9rem); color: var(--wa-on-dark); overflow: hidden; isolation: isolate; box-shadow: var(--wa-shadow); } .wa-rc-analyst::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.5; background-image: linear-gradient(rgba(47,95,79,0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(47,95,79,0.12) 1px, transparent 1px); background-size: 28px 28px; -webkit-mask-image: radial-gradient(circle at 80% 10%, #000 0%, transparent 70%); mask-image: radial-gradient(circle at 80% 10%, #000 0%, transparent 70%); } /* light-on-dark text re-declared (global h-colors are dark) */ .wa-rc-analyst h2, .wa-rc-analyst h3, .wa-rc-analyst p, .wa-rc-analyst li { color: var(--wa-on-dark); } .wa-rc-analyst__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1.4rem, 3.5vw, 2.6rem); align-items: center; } .wa-rc-analyst__eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--wa-gold); margin: 0 0 0.85rem 0; } .wa-rc-analyst__eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #6fcf97; box-shadow: 0 0 0 3px rgba(111,207,151,0.22); animation: waRcPulse 2.4s ease-in-out infinite; } .wa-rc-analyst__title { font-family: var(--wa-serif); font-size: clamp(1.7rem, 3.6vw, 2.4rem); font-weight: 440; line-height: 1.1; color: var(--wa-on-dark); margin: 0 0 0.4rem 0; max-width: 20ch; } .wa-rc-analyst__sub { font-size: 0.92rem; line-height: 1.5; color: var(--wa-gold); margin: 0 0 1rem 0; max-width: 56ch; font-weight: 500; } .wa-rc-analyst__lede { font-size: 1rem; line-height: 1.62; color: var(--wa-on-dark-soft); margin: 0 0 1.3rem 0; max-width: 58ch; } .wa-rc-analyst__checks { list-style: none; margin: 0 0 1.4rem 0; padding: 0; display: grid; gap: 0.65rem; } .wa-rc-analyst__checks li { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; font-size: 0.92rem; line-height: 1.5; color: var(--wa-on-dark-soft); } .wa-rc-analyst__checks li::before { content: ""; width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; border-radius: 4px; border: 1px solid var(--wa-gold); background-color: var(--wa-gold); -webkit-mask: no-repeat center / 11px url("data:image/svg+xml;utf8,"); mask: no-repeat center / 11px url("data:image/svg+xml;utf8,"); } .wa-rc-analyst__checks strong { color: var(--wa-on-dark); font-weight: 600; } .wa-rc-analyst__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; } /* the right-hand "analyst console" frame (CLAB ask card or sample readout) */ .wa-rc-analyst__console { background: rgba(8,18,15,0.55); border: 1px solid var(--wa-on-dark-line); border-radius: var(--wa-radius-sm); padding: 1.1rem 1.2rem 1.3rem; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 20px 50px -28px rgba(0,0,0,0.7); } .wa-rc-analyst__console-bar { display: flex; align-items: center; gap: 0.5rem; padding-bottom: 0.8rem; margin-bottom: 0.9rem; border-bottom: 1px solid var(--wa-on-dark-line); } .wa-rc-analyst__console-bar .dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(238,243,241,0.25); } .wa-rc-analyst__console-bar .dot.live { background: #6fcf97; box-shadow: 0 0 0 3px rgba(111,207,151,0.18); } .wa-rc-analyst__console-bar .title { margin-left: auto; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--wa-on-dark-faint); } /* sample structured readout (illustrative, not an input) */ .wa-rc-analyst__readout { display: grid; gap: 0.55rem; } .wa-rc-analyst__readout .prompt { font-size: 0.86rem; line-height: 1.45; color: var(--wa-on-dark); background: rgba(199,163,84,0.14); border: 1px solid var(--wa-on-dark-line); border-radius: 5px; padding: 0.6rem 0.75rem; } .wa-rc-analyst__readout .prompt::before { content: "You: "; color: var(--wa-gold); font-weight: 700; } .wa-rc-analyst__row { display: grid; grid-template-columns: auto 1fr; gap: 0.55rem; align-items: baseline; font-size: 0.84rem; line-height: 1.45; color: var(--wa-on-dark-soft); } .wa-rc-analyst__tag { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--wa-forest); background: var(--wa-moss); padding: 0.16rem 0.45rem; border-radius: 3px; white-space: nowrap; } .wa-rc-analyst__row.is-flag .wa-rc-analyst__tag { background: var(--wa-gold); } .wa-rc-analyst__row.is-route .wa-rc-analyst__tag { background: #6fcf97; } .wa-rc-analyst__note { font-size: 0.72rem; font-style: italic; color: var(--wa-on-dark-faint); margin: 0.3rem 0 0 0; } .wa-rc-analyst__curator { display: flex; align-items: center; gap: 0.7rem; margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--wa-on-dark-line); font-size: 0.8rem; line-height: 1.45; color: var(--wa-on-dark-faint); } .wa-rc-analyst__curator strong { color: var(--wa-on-dark); } /* the CLAB ask card injects at this anchor; give it room when filled */ .wa-rc-analyst [data-clab-mid-anchor]:not(:empty) { margin-top: 1rem; } /* ---------------------------------------------------------------------------- 6. RISK GAUGE -- 4 levels (low / medium / high / critical) Segmented dial + score + level word. Color communicates meaning. ---------------------------------------------------------------------------- */ .wa-rc-gauge { --g-color: var(--risk-low); --g-bg: var(--risk-low-bg); --g-fill: 1; /* 1..4 segments lit, set by level modifier */ background: var(--wa-card); border: 1px solid var(--wa-line); border-radius: var(--wa-radius); padding: 1.2rem 1.3rem 1.3rem; box-shadow: var(--wa-shadow-sm); } .wa-rc-gauge--low { --g-color: var(--risk-low); --g-bg: var(--risk-low-bg); --g-fill: 1; } .wa-rc-gauge--medium { --g-color: var(--risk-medium); --g-bg: var(--risk-medium-bg); --g-fill: 2; } .wa-rc-gauge--high { --g-color: var(--risk-high); --g-bg: var(--risk-high-bg); --g-fill: 3; } .wa-rc-gauge--critical { --g-color: var(--risk-critical); --g-bg: var(--risk-critical-bg); --g-fill: 4; } .wa-rc-gauge__caption { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.13em; color: var(--wa-stone); margin: 0 0 0.7rem 0; } .wa-rc-gauge__dial { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-bottom: 0.85rem; } .wa-rc-gauge__seg { height: 10px; border-radius: 3px; background: var(--wa-line); transition: background 240ms ease; } /* light the first --g-fill segments in the level color */ .wa-rc-gauge--low .wa-rc-gauge__seg:nth-child(-n+1), .wa-rc-gauge--medium .wa-rc-gauge__seg:nth-child(-n+2), .wa-rc-gauge--high .wa-rc-gauge__seg:nth-child(-n+3), .wa-rc-gauge--critical .wa-rc-gauge__seg:nth-child(-n+4) { background: var(--g-color); } .wa-rc-gauge__readout { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; } .wa-rc-gauge__score { font-family: var(--wa-serif); font-size: clamp(2rem, 4vw, 2.6rem); line-height: 1; font-weight: 460; color: var(--g-color); } .wa-rc-gauge__score small { font-size: 0.5em; color: var(--wa-stone); font-weight: 400; } .wa-rc-gauge__level { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--g-color); background: var(--g-bg); border: 1px solid color-mix(in srgb, var(--g-color) 35%, transparent); padding: 0.28rem 0.6rem; border-radius: 999px; } .wa-rc-gauge__desc { font-size: 0.9rem; line-height: 1.55; color: var(--wa-ink-soft); margin: 0.7rem 0 0 0; } /* compact inline risk pill (same 4 levels) */ .wa-rc-riskpill { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.24rem 0.58rem; border-radius: 999px; border: 1px solid currentColor; } .wa-rc-riskpill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .wa-rc-riskpill--low { color: var(--risk-low); background: var(--risk-low-bg); } .wa-rc-riskpill--medium { color: var(--risk-medium); background: var(--risk-medium-bg); } .wa-rc-riskpill--high { color: var(--risk-high); background: var(--risk-high-bg); } .wa-rc-riskpill--critical { color: var(--risk-critical); background: var(--risk-critical-bg); } /* ---------------------------------------------------------------------------- 7. ISSUE CARDS + HIGHLIGHT CHIPS ---------------------------------------------------------------------------- */ .wa-rc-issues { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; } .wa-rc-issue { background: var(--wa-card); border: 1px solid var(--wa-line); border-radius: var(--wa-radius-sm); padding: 1.2rem 1.25rem 1.3rem; display: flex; flex-direction: column; gap: 0.6rem; position: relative; transition: box-shadow 220ms ease, border-color 220ms ease, transform 120ms ease; } .wa-rc-issue::before { content: ""; position: absolute; top: 0; left: 0; height: 3px; width: 0; background: var(--wa-cedar); border-radius: 3px 0 0 0; transition: width 260ms ease; } .wa-rc-issue:hover { box-shadow: var(--wa-shadow-sm); border-color: var(--wa-line-2); transform: translateY(-1px); } .wa-rc-issue:hover::before { width: 100%; } .wa-rc-issue__head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; } .wa-rc-issue__title { font-family: var(--wa-serif); font-size: 1.12rem; font-weight: 500; line-height: 1.2; color: var(--wa-evergreen); margin: 0; } .wa-rc-issue__body { font-size: 0.9rem; line-height: 1.55; color: var(--wa-ink-soft); margin: 0; } .wa-rc-issue__foot { margin-top: auto; padding-top: 0.5rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } /* highlight chips: meaning-coded, small, NOT decorative blocks */ .wa-rc-chiprow { display: flex; flex-wrap: wrap; gap: 0.4rem; } .wa-rc-chip { display: inline-flex; align-items: center; gap: 0.32rem; font-size: 0.7rem; font-weight: 650; letter-spacing: 0.02em; padding: 0.26rem 0.58rem; border-radius: 999px; background: var(--wa-rain); color: var(--wa-slate); border: 1px solid var(--wa-rain-2); white-space: nowrap; } .wa-rc-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.85; } /* meaning-coded variants */ .wa-rc-chip--deadline { color: var(--risk-high); background: var(--risk-high-bg); border-color: color-mix(in srgb, var(--risk-high) 25%, transparent); } .wa-rc-chip--feeshift { color: var(--risk-medium); background: var(--risk-medium-bg); border-color: color-mix(in srgb, var(--risk-medium) 25%, transparent); } .wa-rc-chip--docgap { color: var(--wa-slate); background: var(--wa-rain); border-color: var(--wa-rain-2); } .wa-rc-chip--cpa { color: var(--wa-moss); background: var(--risk-low-bg); border-color: color-mix(in srgb, var(--wa-moss) 25%, transparent); } .wa-rc-chip--mhmda { color: var(--risk-critical); background: var(--risk-critical-bg); border-color: color-mix(in srgb, var(--risk-critical) 25%, transparent); } .wa-rc-chip--risk { color: var(--wa-cedar); background: #f6ece2; border-color: #e4cdb6; } /* ---------------------------------------------------------------------------- 8. ACCORDION -- native

, COLLAPSED by default ---------------------------------------------------------------------------- */ .wa-rc-fold { background: var(--wa-card); border: 1px solid var(--wa-line); border-radius: var(--wa-radius-sm); margin: 0 0 0.7rem 0; overflow: hidden; } .wa-rc-fold__summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.8rem; padding: 0.95rem 1.2rem; font-family: var(--wa-serif); font-size: 1.05rem; font-weight: 500; color: var(--wa-evergreen); min-height: 44px; } .wa-rc-fold__summary::-webkit-details-marker { display: none; } .wa-rc-fold__summary:hover { background: var(--wa-mist); } .wa-rc-fold__summary:focus-visible { outline: 2px solid var(--wa-gold); outline-offset: -2px; } .wa-rc-fold__chevron { width: 11px; height: 11px; margin-left: auto; flex-shrink: 0; border-right: 2px solid var(--wa-cedar); border-bottom: 2px solid var(--wa-cedar); transform: rotate(45deg); transition: transform 220ms ease; } .wa-rc-fold[open] .wa-rc-fold__chevron { transform: rotate(-135deg); } .wa-rc-fold__body { padding: 0 1.2rem 1.2rem; font-size: 0.94rem; line-height: 1.65; color: var(--wa-ink-soft); animation: waRcReveal 260ms ease; } .wa-rc-fold__body > :first-child { margin-top: 0; } .wa-rc-fold__body > :last-child { margin-bottom: 0; } @keyframes waRcReveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* ---------------------------------------------------------------------------- 9. DOCUMENT CHECKLIST ---------------------------------------------------------------------------- */ .wa-rc-checklist { background: var(--wa-card); border: 1px solid var(--wa-line); border-radius: var(--wa-radius); padding: 1.2rem 1.3rem 1.3rem; box-shadow: var(--wa-shadow-sm); } .wa-rc-checklist__group { margin: 0 0 1.1rem 0; } .wa-rc-checklist__group:last-child { margin-bottom: 0; } .wa-rc-checklist__glabel { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--wa-stone); margin: 0 0 0.55rem 0; } .wa-rc-checklist__item { display: grid; grid-template-columns: auto 1fr; gap: 0.65rem; align-items: start; padding: 0.4rem 0; min-height: 36px; font-size: 0.92rem; line-height: 1.45; color: var(--wa-ink); } .wa-rc-checklist__item::before { content: ""; width: 18px; height: 18px; margin-top: 1px; flex-shrink: 0; border-radius: 4px; border: 2px solid var(--wa-line-2); background: var(--wa-mist); } /* tier styling: have (solid check), helpful (outline), nice (dotted) */ .wa-rc-checklist__item--have::before { border-color: var(--risk-low); background-color: var(--risk-low); -webkit-mask: no-repeat center / 11px url("data:image/svg+xml;utf8,"); mask: no-repeat center / 11px url("data:image/svg+xml;utf8,"); } .wa-rc-checklist__item--helpful::before { border-color: var(--wa-moss); } .wa-rc-checklist__item--nice::before { border-style: dotted; border-color: var(--wa-stone); } .wa-rc-checklist__item strong { font-weight: 600; color: var(--wa-evergreen); } /* ---------------------------------------------------------------------------- 10. PACKAGE RECOMMENDATION + TIER CARDS ---------------------------------------------------------------------------- */ .wa-rc-packages { background: var(--wa-card); border: 1px solid var(--wa-line); border-radius: var(--wa-radius); padding: clamp(1.3rem, 3vw, 2rem); box-shadow: var(--wa-shadow-sm); } .wa-rc-packages__lede { font-size: 0.98rem; line-height: 1.6; color: var(--wa-ink-soft); margin: 0 0 1.4rem 0; max-width: 70ch; } .wa-rc-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; } .wa-rc-tier { background: var(--wa-mist); border: 1px solid var(--wa-line); border-top: 3px solid var(--wa-slate); border-radius: var(--wa-radius-sm); padding: 1.2rem 1.25rem 1.3rem; display: flex; flex-direction: column; gap: 0.5rem; position: relative; } .wa-rc-tier--featured { background: var(--wa-card); border-top-color: var(--wa-cedar); box-shadow: var(--wa-shadow-sm); } .wa-rc-tier--featured::after { content: "Recommended"; position: absolute; top: -10px; right: 14px; background: var(--wa-cedar); color: #fff; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.22rem 0.55rem; border-radius: 999px; } .wa-rc-tier__price { font-family: var(--wa-serif); font-size: 1.7rem; font-weight: 500; line-height: 1; color: var(--wa-evergreen); } .wa-rc-tier__name { font-size: 0.95rem; font-weight: 700; color: var(--wa-ink); margin: 0; } .wa-rc-tier__bestfor { font-size: 0.85rem; line-height: 1.5; color: var(--wa-ink-soft); margin: 0; } .wa-rc-tier__bestfor b { display: block; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--wa-cedar); margin-bottom: 0.25rem; } .wa-rc-tier__foot { margin-top: auto; padding-top: 0.7rem; } /* ---------------------------------------------------------------------------- 11. NAV / WAYFINDING -- breadcrumb, sticky section nav, related rail ---------------------------------------------------------------------------- */ .wa-rc-crumbs { font-size: 0.8rem; color: var(--wa-stone); padding: 0.5rem 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; } .wa-rc-crumbs a { color: var(--wa-cedar); text-decoration: none; } .wa-rc-crumbs a:hover { text-decoration: underline; } .wa-rc-crumbs .sep { color: var(--wa-line-2); margin: 0 0.35rem; } .wa-rc-crumbs [aria-current="page"] { color: var(--wa-ink-soft); font-weight: 600; } /* sticky in-page section / tab nav */ .wa-rc-sectionnav { position: sticky; top: 0; z-index: 180; background: linear-gradient(180deg, var(--wa-evergreen) 0%, var(--wa-forest) 100%); border-bottom: 1px solid var(--wa-on-dark-line); box-shadow: 0 6px 22px -16px rgba(0,0,0,0.55); } .wa-rc-sectionnav__track { display: flex; gap: 0; max-width: var(--wa-maxw); margin-inline: auto; padding-inline: max(0px, calc((100% - var(--wa-maxw)) / 2)); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } .wa-rc-sectionnav__track::-webkit-scrollbar { display: none; } .wa-rc-sectionnav__link { flex: 0 0 auto; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.8rem 1.05rem; min-height: 44px; background: none; border: none; border-bottom: 3px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; color: var(--wa-on-dark-soft); font-family: var(--wa-sans); font-size: 0.83rem; font-weight: 600; transition: color 180ms ease, background 180ms ease, border-color 180ms ease; } .wa-rc-sectionnav__link:hover, .wa-rc-sectionnav__link:focus-visible { color: var(--wa-on-dark); background: rgba(255,255,255,0.05); } .wa-rc-sectionnav__link.is-active { color: var(--wa-on-dark); border-bottom-color: var(--wa-gold); background: rgba(255,255,255,0.06); } /* related-resources rail card */ .wa-rc-rail-card { background: var(--wa-card); border: 1px solid var(--wa-line); border-radius: var(--wa-radius); padding: 1.2rem 1.3rem; box-shadow: var(--wa-shadow-sm); } .wa-rc-rail-card > h3 { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.13em; color: var(--wa-cedar); margin: 0 0 0.8rem 0; } .wa-rc-rail-card__group { margin: 0 0 1rem 0; } .wa-rc-rail-card__group:last-child { margin-bottom: 0; } .wa-rc-rail-card__group > .glabel { display: block; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--wa-stone); margin: 0 0 0.4rem 0; } .wa-rc-rail-card__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; } .wa-rc-rail-card__links a { display: block; padding: 0.4rem 0; min-height: 36px; font-size: 0.9rem; line-height: 1.4; color: var(--wa-ink); text-decoration: none; border-bottom: 1px solid var(--wa-line); transition: color 160ms ease, padding-left 160ms ease; } .wa-rc-rail-card__links li:last-child a { border-bottom: none; } .wa-rc-rail-card__links a:hover { color: var(--wa-cedar); padding-left: 0.3rem; } /* ---------------------------------------------------------------------------- 12. CALCULATOR UI SHELL step tiles -> progressive question steps -> result panel (gauge + factors + next-step + mandatory educational disclaimer) ---------------------------------------------------------------------------- */ .wa-rc-calc { background: var(--wa-card); border: 1px solid var(--wa-line); border-radius: var(--wa-radius); box-shadow: var(--wa-shadow); overflow: hidden; } /* step tiles strip (progress indicator) */ .wa-rc-calc__steps { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; background: var(--wa-mist); border-bottom: 1px solid var(--wa-line); } .wa-rc-calc__steps::-webkit-scrollbar { display: none; } .wa-rc-calc__step { flex: 1 0 auto; min-width: 120px; display: flex; align-items: center; gap: 0.5rem; padding: 0.8rem 1rem; min-height: 48px; font-size: 0.8rem; font-weight: 600; color: var(--wa-stone); border-bottom: 3px solid transparent; white-space: nowrap; } .wa-rc-calc__step + .wa-rc-calc__step { border-left: 1px solid var(--wa-line); } .wa-rc-calc__step .n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; font-size: 0.72rem; font-weight: 700; background: var(--wa-line); color: var(--wa-stone); } .wa-rc-calc__step.is-active { color: var(--wa-evergreen); border-bottom-color: var(--wa-cedar); } .wa-rc-calc__step.is-active .n { background: var(--wa-cedar); color: #fff; } .wa-rc-calc__step.is-done { color: var(--wa-moss); } .wa-rc-calc__step.is-done .n { background: var(--risk-low); color: #fff; } /* active question panel */ .wa-rc-calc__panel { padding: clamp(1.3rem, 3.5vw, 2.2rem); } .wa-rc-calc__q { margin: 0 0 1.3rem 0; } .wa-rc-calc__q > .qlabel { font-family: var(--wa-serif); font-size: clamp(1.15rem, 2.2vw, 1.45rem); font-weight: 500; line-height: 1.25; color: var(--wa-evergreen); margin: 0 0 0.4rem 0; } .wa-rc-calc__q > .qhint { font-size: 0.88rem; line-height: 1.5; color: var(--wa-stone); margin: 0 0 1rem 0; } .wa-rc-calc__options { display: grid; gap: 0.6rem; } .wa-rc-calc__option { display: flex; align-items: center; gap: 0.7rem; padding: 0.85rem 1rem; min-height: 48px; background: var(--wa-mist); border: 1px solid var(--wa-line); border-radius: var(--wa-radius-sm); cursor: pointer; font-size: 0.95rem; color: var(--wa-ink); transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease; } .wa-rc-calc__option:hover { border-color: var(--wa-line-2); background: #fff; } .wa-rc-calc__option:focus-within { outline: 2px solid var(--wa-gold); outline-offset: 1px; } .wa-rc-calc__option.is-selected { border-color: var(--wa-cedar); background: #f6ece2; box-shadow: inset 0 0 0 1px var(--wa-cedar); } .wa-rc-calc__option .mark { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; border: 2px solid var(--wa-line-2); background: #fff; transition: border-color 160ms ease, background 160ms ease; } .wa-rc-calc__option.is-selected .mark { border-color: var(--wa-cedar); background: var(--wa-cedar); box-shadow: inset 0 0 0 3px #fff; } .wa-rc-calc__nav { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--wa-line); } /* result panel */ .wa-rc-calc__result { padding: clamp(1.3rem, 3.5vw, 2.2rem); } .wa-rc-calc__result-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1.2rem; } .wa-rc-calc__result-head h3 { font-family: var(--wa-serif); font-size: clamp(1.3rem, 2.6vw, 1.7rem); font-weight: 500; color: var(--wa-evergreen); margin: 0; } .wa-rc-calc__factors { list-style: none; margin: 1.2rem 0 0 0; padding: 0; display: grid; gap: 0.5rem; } .wa-rc-calc__factors li { display: grid; grid-template-columns: auto 1fr auto; gap: 0.6rem; align-items: center; padding: 0.55rem 0; border-bottom: 1px solid var(--wa-line); font-size: 0.9rem; color: var(--wa-ink-soft); } .wa-rc-calc__factors li::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--wa-stone); } .wa-rc-calc__factors li[data-impact="raises"]::before { background: var(--risk-high); } .wa-rc-calc__factors li[data-impact="lowers"]::before { background: var(--risk-low); } .wa-rc-calc__factors .impact { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--wa-stone); } .wa-rc-calc__factors li[data-impact="raises"] .impact { color: var(--risk-high); } .wa-rc-calc__factors li[data-impact="lowers"] .impact { color: var(--risk-low); } .wa-rc-calc__nextstep { margin-top: 1.4rem; background: var(--wa-mist); border: 1px solid var(--wa-line); border-left: 4px solid var(--wa-cedar); border-radius: var(--wa-radius-sm); padding: 1.1rem 1.2rem 1.2rem; } .wa-rc-calc__nextstep > .nslabel { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--wa-cedar); margin: 0 0 0.5rem 0; } .wa-rc-calc__nextstep h4 { font-family: var(--wa-serif); font-size: 1.1rem; font-weight: 500; color: var(--wa-evergreen); margin: 0 0 0.4rem 0; line-height: 1.2; } .wa-rc-calc__nextstep p { font-size: 0.9rem; line-height: 1.55; color: var(--wa-ink-soft); margin: 0 0 0.9rem 0; } /* mandatory educational self-assessment disclaimer on every result */ .wa-rc-calc__disclaimer { margin-top: 1.3rem; background: var(--wa-rain); border: 1px solid var(--wa-rain-2); border-radius: var(--wa-radius-sm); padding: 0.9rem 1.1rem; font-size: 0.82rem; line-height: 1.55; color: var(--wa-slate); } .wa-rc-calc__disclaimer strong { color: var(--wa-evergreen); } /* ---------------------------------------------------------------------------- 13. RESPONSIVE -- mobile-ruthless ---------------------------------------------------------------------------- */ @media (max-width: 1080px) { .wa-rc-grid { grid-template-columns: 1fr; } .wa-rc-grid__rail { position: static; top: auto; order: 2; } .wa-rc-analyst__grid { grid-template-columns: 1fr; } .wa-rc-hero__inner { grid-template-columns: 1fr; } .wa-rc-ribbon__zones { grid-template-columns: 1fr; } } @media (max-width: 768px) { .wa-rc { --wa-pad: clamp(1rem, 5vw, 1.5rem); } .wa-rc-issues { grid-template-columns: 1fr; } .wa-rc-tiers { grid-template-columns: 1fr; } .wa-rc-sectionnav__link { font-size: 0.82rem; } .wa-rc-hero__title { font-size: clamp(1.8rem, 8vw, 2.4rem); } .wa-rc-hero__meta { width: 100%; } .wa-rc-hero__metric { flex: 1 1 calc(50% - 0.45rem); min-width: 0; } .wa-rc-hero__actions .wa-rc-btn, .wa-rc-analyst__actions .wa-rc-btn { width: 100%; } .wa-rc-calc__nav .wa-rc-btn { flex: 1; } /* keep body text legible: never below 14px */ .wa-rc-issue__body, .wa-rc-ribbon__zone p, .wa-rc-tier__bestfor { font-size: 0.875rem; } } /* never allow horizontal scroll on the shell */ body.wa-rc { overflow-x: hidden; } /* ---------------------------------------------------------------------------- 14. PRINT + REDUCED MOTION ---------------------------------------------------------------------------- */ @media print { body.wa-rc, .wa-rc-shell { background: #fff; } .wa-rc-sectionnav { position: static; background: #fff; border-bottom: 1px solid #ccc; } .wa-rc-sectionnav__link { color: #000; } .wa-rc-hero, .wa-rc-band--evergreen, .wa-rc-analyst { background: #fff !important; color: #000 !important; border: 1px solid #ccc; } .wa-rc-hero__title, .wa-rc-hero__lede, .wa-rc-hero__eyebrow, .wa-rc-analyst h2, .wa-rc-analyst h3, .wa-rc-analyst p, .wa-rc-analyst li, .wa-rc-band--evergreen h1, .wa-rc-band--evergreen h2, .wa-rc-band--evergreen h3, .wa-rc-band--evergreen p { color: #000 !important; } .wa-rc-fold[open] .wa-rc-fold__body { animation: none; } .wa-rc-fold:not([open]) .wa-rc-fold__body { display: block; } /* expand folds for print */ } @media (prefers-reduced-motion: reduce) { .wa-rc *, .wa-rc *::before, .wa-rc *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } } /* ============================================================================ 13. HARDENING (a) Anchor offset so in-page nav links land BELOW the two-level sticky header instead of behind it (collapsed stage summaries were hiding, making clicks appear to jump to the next section). (b) On-dark contrast that must out-specify washington.css body.vertical-page h1/h2/h3 (retrofit pages carry .vertical-page, whose dark heading color was overriding the hero/evergreen light text -> green-on-green). Scoped to body.wa-rc so non-redesigned WA pages are untouched. ========================================================================= */ html { scroll-behavior: smooth; } body.wa-rc { --wa-sticky-offset: 116px; } @media (max-width: 768px) { body.wa-rc { --wa-sticky-offset: 150px; } } body.wa-rc [id] { scroll-margin-top: var(--wa-sticky-offset); } body.wa-rc .wa-rc-hero, body.wa-rc .wa-rc-hero__title, body.wa-rc .wa-rc-band--evergreen, body.wa-rc .wa-rc-band--evergreen h1, body.wa-rc .wa-rc-band--evergreen h2, body.wa-rc .wa-rc-band--evergreen h3, body.wa-rc .wa-rc-band--evergreen h4 { color: var(--wa-on-dark) !important; } body.wa-rc .wa-rc-hero__lede, body.wa-rc .wa-rc-band--evergreen p, body.wa-rc .wa-rc-band--evergreen li { color: var(--wa-on-dark-soft) !important; } body.wa-rc .wa-rc-hero__eyebrow, body.wa-rc .wa-rc-band--evergreen .wa-rc-sectag { color: var(--wa-gold) !important; }