/* ======================================================================== DEPLOY PATH: /css/retirement.56969b0d.css Tepuy Solutions — Retirement calculator — complete layout and component styles Version: 2026-03-31 (headers added) Notes: Load BEFORE sidebar-polish.css and chart-improvements.css. ======================================================================== */ /* Smooth scroll for the new .explainer-jump-nav anchor links (2026-09 long-form Learn & Reference conversion) — PvS already has this in PvS_style.css (page-specific there too, not global in tepuy.css), so scoped here to match rather than adding it site-wide for four other calculators that didn't ask for it. */ html { scroll-behavior: smooth; } /* ── Google Fonts ─────────────────────────────────────────────────────── */ /* ═══════════════════════════════════════════════════════════════════════════ 0. DESIGN TOKENS — mobile visual-polish pass Shared spacing scale + elevation/radius tokens for retirement.html only. Reuses the clay/moss/ink/stone/bone brand palette from tepuy.css — no new colors are introduced here, only structure (shadow, radius, rhythm). ═══════════════════════════════════════════════════════════════════════════ */ :root { --tp-space-1: 8px; --tp-space-2: 16px; --tp-space-3: 24px; --tp-space-4: 32px; --tp-radius-card: 14px; /* cards / panels / callouts */ --tp-radius-control: 10px; /* inputs / buttons / mini-cards */ --tp-radius-pill: 999px; /* chips / segmented controls */ --tp-shadow-card: 0 2px 10px rgba(14, 21, 18, 0.07), 0 1px 3px rgba(14, 21, 18, 0.05); --tp-shadow-card-hover: 0 6px 20px rgba(14, 21, 18, 0.10); --tp-shadow-control: 0 1px 2px rgba(14, 21, 18, 0.06); } /* ── Bridge tokens: MOVED to css/simulators.css (2026-09) ── This block used to alias calculators.css's generic token names (--gold, --text-secondary, --bg-raised, --radius-*, --shadow-*, --transition, --danger …) to retirement's own literal values, because calculators.css was written against css/PvS_style.css's :root and retirement does not share PvS's clay palette. The same aliasing was needed on lmi / offset_vs_shares / mortgage the moment they started loading calculators.css, so it now lives once, in css/simulators.css — the only shared stylesheet all five calculators load. The values there are exactly the ones this block declared, with the var(--tp-shadow-*) aliases resolved to their literals so the other four pages can read them. Deleted rather than left in place: simulators.css loads AFTER this file on retirement.html, so keeping this block would have made it a silent duplicate that renders nothing but drifts on the next edit — the repeat defect this repo keeps producing (see docs/OPEN-ITEMS.md on .ret-load-dropdown / .scenario-load-dropdown and on .rtab-panel--hidden). --tp-space-*, --tp-radius-* and --tp-shadow-* above stay here: they are retirement's own scale, referenced only by this file. --text-muted USED to stay here too, at #9aada6, because that value could not be shared without propagating a failure. It now comes from the shared block in css/simulators.css at a value that clears AA, so the fork is gone. Measured on this page: --text-muted had ZERO failing consumers even at #9aada6 — every one of retirement's 14 failures was the same hex hardcoded into a rule below, not read through this token. */ /* Number cells — tabular numerics */ .tbl-total, .tbl-age, .insight-value, .mc-pct-label, .gap-strategy-value { font-variant-numeric: tabular-nums; } /* ═══════════════════════════════════════════════════════════════════════════ 1. SIDEBAR CARDS ═══════════════════════════════════════════════════════════════════════════ */ aside .card, aside .tp-card { padding: 0; border-radius: var(--tp-radius-card); border: 1px solid #e3ede8; margin-bottom: var(--tp-space-2); box-shadow: var(--tp-shadow-card); background: #ffffff; overflow: visible; transition: box-shadow 0.15s; } aside .card:hover { box-shadow: var(--tp-shadow-card-hover); transform: none; } aside .card-header { padding: 0.65rem 2.5rem 0.65rem 0.9rem !important; font-size: 0.875rem; font-weight: 600; cursor: pointer; user-select: none; position: relative; display: flex; align-items: center; gap: 0.35rem; background: var(--cardH-bg); color: var(--cardH-text); line-height: 1.25; letter-spacing: 0.01em; border-radius: 8px 8px 0 0; pointer-events: auto; } aside .card-header:hover { background: var(--cardH-bg-open); } aside .card-header::after { z-index: 1; pointer-events: none; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 1.25rem; height: 1.25rem; font-size: 0.8rem; } aside .card-header[aria-expanded="true"]::after { pointer-events: none; z-index: 1; } aside .card-content { display: block !important; max-height: 0; overflow: hidden; opacity: 0; padding: 0; background: #ffffff; transition: max-height 0.28s ease, opacity 0.22s ease, padding 0.28s ease; } aside .card-content.open { display: block !important; max-height: 4000px !important; overflow: visible !important; opacity: 1 !important; padding: 0.6rem 0.9rem 0.8rem !important; } /* ── Form rows ────────────────────────────────────────────────────────── */ .nested-fields { padding: 0.45rem 0 0.2rem; border-top: 1px solid #e3ede8; margin-top: 0.45rem; } aside .form-row { margin-bottom: 0.45rem; } /* aside .form-row label now comes from css/tepuy.css, once, at 0.8125rem. This file's byte-identical override was one of four. */ aside .form-row input[type="text"], aside .form-row input[type="number"], aside .form-row select, aside .form-row textarea { padding: 4px 7px; font-size: 0.875rem; border-radius: 4px; border: 1px solid #c8ddd3; background: #f8faf9; color: #0f1c16; font-family: inherit; } aside .form-row input:focus, aside .form-row select:focus { outline: none; border-color: #3db07e; background: #ffffff; box-shadow: 0 0 0 3px rgba(36,120,87,0.12); } /* One-off Events "Type" select (Purchase / Windfall). The generic `aside .form-row select` rule above already gives it Inter Tight + the brand border/background, but a bare native