/* ============================================================ CALCSITE DESIGN SYSTEM — v4 Inspired by EquityBinder's structure/cards, recolored red/white/blue+gold Display/Buttons: Poppins 700/800 · Body: Inter ============================================================ */ /* Font loading moved to link tags (preconnect + non-blocking stylesheet) for better Core Web Vitals — @import blocks parallel resource loading. */ :root{ --blue: #1D4ED8; --blue-deep: #0B1F4D; --red: #DC2626; --red-light: #FDEAEA; --gold: #D4A017; --gold-light: #FCF3DA; --bg: #F4F6F9; --card: #FFFFFF; --panel: #FFFFFF; --panel-2: #F6F8FA; --ink: #101828; --ink-soft: #5B6B7C; --border: #E2E7ED; --border-soft: #EEF1F5; /* primary accent used across buttons/links/badges */ --orange: #1D4ED8; /* kept var name for backward compat across pages; now blue */ --orange-dim: #1739A6; --amber: #DC2626; /* per-category vibrant icon colors */ --cat-math: #6B5BD6; --cat-stats: #2F9E6E; --cat-time: #3F7FD6; --cat-finance: #D4A017; --cat-health: #DB4C77; --cat-misc: #4A8FAE; --band-1: #1D4ED8; --band-2: #2F9E6E; --band-3: #D4A017; --band-4: #DC2626; --font-display: 'Poppins', sans-serif; --font-body: 'Inter', sans-serif; --font-mono: 'Poppins', sans-serif; --radius: 14px; --radius-sm: 9px; --shadow: 0 2px 6px rgba(11,42,74,.06), 0 10px 24px -12px rgba(11,42,74,.14); --shadow-hover: 0 16px 30px -14px rgba(11,42,74,.28); } [data-theme="dark"]{ --bg: #0B1220; --card: #131C2E; --panel: #131C2E; --panel-2: #1A2438; --ink: #F5F7FA; --ink-soft: #93A2B8; --border: #253046; --border-soft: #1D2740; } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; } a{ color:inherit; text-decoration:none; } h1,h2,h3{ font-family:var(--font-display); font-weight:800; margin:0; letter-spacing:.01em; } p{ margin:0 0 .75em; color:var(--ink-soft); } button{ font-family:inherit; cursor:pointer; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; } @media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } } /* ============ TOP UTILITY BAR ============ */ .topbar{ background:var(--blue-deep); color:#cfe0ee; font-size:12px; } .topbar-inner{ max-width:1180px; margin:0 auto; padding:7px 20px; display:flex; justify-content:space-between; align-items:center; gap:10px; } @media (max-width:700px){ .topbar-inner span:last-child{ display:none; } } /* ============ TOP NAV ============ */ .topnav{ position:sticky; top:0; z-index:50; background:var(--blue-deep); border-bottom:1px solid rgba(255,255,255,.08); box-shadow:0 4px 14px rgba(8,29,52,.18); } .topnav-inner{ max-width:1180px; margin:0 auto; padding:14px 20px; display:flex; align-items:center; gap:24px; } .brand{ font-family:var(--font-display); font-weight:800; font-size:19px; color:#fff; display:flex; align-items:center; gap:10px; } .brand-mark{ width:32px; height:32px; border-radius:9px; background:linear-gradient(145deg, var(--red), #a51c1c); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:13px; font-weight:800; box-shadow:inset 0 0 0 2px rgba(255,255,255,.18); } .nav-cats{ display:flex; gap:2px; flex-wrap:wrap; } .nav-cats a{ font-family:var(--font-body); font-size:13px; font-weight:600; color:#c9daea; padding:8px 12px; border-radius:7px; } .nav-cats a:hover{ background:rgba(255,255,255,.08); color:#fff; } .nav-search{ margin-left:auto; } .nav-search input{ font-family:var(--font-body); font-size:13.5px; border:1px solid rgba(255,255,255,.18); border-radius:9px; padding:9px 14px; width:210px; background:rgba(255,255,255,.1); color:#fff; } .nav-search input::placeholder{ color:#9fb6cb; } .nav-hamburger{ display:none; flex:none; width:36px; height:36px; border-radius:8px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.08); color:#fff; font-size:18px; align-items:center; justify-content:center; margin-left:auto; order:2; } @media (max-width:760px){ .topnav-inner{ flex-wrap:wrap; } .brand{ order:1; } .nav-hamburger{ display:flex; } .nav-cats{ display:none; width:100%; flex-direction:column; gap:0; order:3; } .nav-search{ display:none; width:100%; order:4; margin-top:10px; } .nav-search input{ width:100%; } .topnav.nav-open .nav-cats{ display:flex; } .topnav.nav-open .nav-search{ display:block; } .nav-cats a{ padding:13px 4px; border-top:1px solid rgba(255,255,255,.08); } .topbar-inner{ flex-direction:column; gap:2px; } } /* ============ CONTAINER ============ */ .wrap{ max-width:1180px; margin:0 auto; padding:0 20px; } /* ============ HERO (home) ============ */ .hero{ background: radial-gradient(ellipse 700px 400px at 85% -10%, rgba(220,38,38,.28), transparent 60%), radial-gradient(ellipse 600px 350px at 10% 10%, rgba(29,78,216,.35), transparent 60%), linear-gradient(180deg, var(--blue-deep) 0%, #071431 100%); color:#fff; padding:52px 20px 64px; } .hero-inner{ max-width:1180px; margin:0 auto; text-align:center; } .hero-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body); font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#7fa8e0; margin-bottom:16px; } .hero-eyebrow a{ color:#f4b0b0; font-weight:700; text-transform:none; letter-spacing:normal; } .hero h1{ font-size:clamp(30px,4.6vw,52px); line-height:1.08; max-width:820px; margin:0 auto; } .hero h1 .accent{ color:#7fa8e0; } .hero p.lead{ color:#b9cee1; font-size:16.5px; max-width:560px; margin:16px auto 0; font-weight:500; } .search-box{ max-width:600px; margin:32px auto 0; background:#fff; border-radius:14px; padding:6px; display:flex; align-items:center; box-shadow:0 18px 40px -12px rgba(0,0,0,.4); } .search-box input{ border:none; outline:none; flex:1; padding:13px 16px; font-size:15px; color:var(--ink); font-family:var(--font-body); background:transparent; } .search-box .count-pill{ background:var(--red-light); color:var(--red); font-weight:700; font-size:12px; padding:8px 14px; border-radius:9px; white-space:nowrap; margin-right:4px; font-family:var(--font-body); } .stat-row{ display:flex; justify-content:center; gap:38px; margin-top:36px; flex-wrap:wrap; } .stat-row div{ text-align:center; } .stat-row .num{ font-family:var(--font-display); font-weight:800; font-size:26px; color:#fff; } .stat-row .lab{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#8fa8bd; margin-top:2px; } /* ============ CATEGORY QUICK CARDS (overlapping hero) ============ */ .cat-quick-wrap{ max-width:1180px; margin:-40px auto 0; padding:0 20px 10px; position:relative; z-index:5; } .cat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; } .cat-card{ background:var(--card); border-radius:var(--radius); padding:18px 16px; box-shadow:var(--shadow); border:1px solid var(--border); display:flex; gap:12px; align-items:flex-start; transition:transform .12s ease, box-shadow .12s ease; } .cat-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-hover); } .cat-card .dot{ width:38px; height:38px; border-radius:10px; flex:none; display:flex; align-items:center; justify-content:center; font-size:17px; color:#fff; background:var(--orange) !important; } .cat-card h3{ font-size:14.5px; font-weight:700; } .cat-card .count{ font-family:var(--font-body); font-size:12px; color:var(--ink-soft); margin-top:2px; } /* ============ FILTER CHIPS + SEARCH (homepage catalog) ============ */ .home-search{ width:100%; max-width:480px; font-family:var(--font-body); font-size:15px; border:1.5px solid var(--border); border-radius:100px; padding:12px 20px; background:var(--panel-2); color:var(--ink); margin-bottom:16px; } .home-search:focus{ border-color:var(--blue); outline:none; } .filter-chips{ display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 22px; } .filter-chip{ font-family:var(--font-body); font-size:13px; font-weight:600; padding:8px 15px; border-radius:100px; background:#fff; color:var(--ink); border:1px solid var(--border); cursor:pointer; display:flex; align-items:center; gap:6px; } .filter-chip .dot{ width:7px; height:7px; border-radius:50%; background:var(--ink-soft); } .filter-chip:hover{ border-color:var(--blue); } .filter-chip.active{ background:var(--blue-deep); color:#fff; border-color:var(--blue-deep); } .filter-chip.active .dot{ background:#7fa8e0; } .no-results-msg{ font-family:var(--font-body); font-size:14px; color:var(--ink-soft); padding:32px 0; text-align:center; display:none; } /* ============ TOOL CARD GRID ============ */ .tool-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; margin:24px 0 56px; } .tool-card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); display:flex; flex-direction:column; transition:transform .12s ease, box-shadow .12s ease; } .tool-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-hover); } .tool-card-top{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:14px; } .tool-icon{ width:40px; height:40px; border-radius:10px; flex:none; display:flex; align-items:center; justify-content:center; font-size:18px; color:#fff; } .tool-card-badges{ display:flex; align-items:center; gap:8px; } .tool-live-badge{ font-family:var(--font-body); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--blue); background:rgba(29,78,216,.08); padding:4px 9px; border-radius:100px; } [data-theme="dark"] .tool-live-badge{ background:rgba(127,168,224,.14); } .tool-star{ font-size:15px; color:var(--border); line-height:1; user-select:none; cursor:pointer; } .tool-star:hover, .tool-star.active{ color:var(--gold); } .tool-card .tool-name{ font-family:var(--font-display); font-weight:800; font-size:16px; line-height:1.32; color:var(--ink); margin-bottom:8px; } .tool-card .tool-desc{ margin:0 0 14px; font-size:13px; color:var(--ink-soft); line-height:1.5; flex:1; } .tool-card .tool-tag{ font-family:var(--font-body); font-weight:700; font-size:12px; margin-bottom:14px; display:block; } .tool-card-foot{ display:flex; align-items:center; justify-content:space-between; font-family:var(--font-display); font-weight:800; font-size:13px; color:var(--ink); padding-top:14px; border-top:1px solid var(--border-soft); } .tool-card:hover .tool-card-foot{ color:var(--blue); } .tool-arrow{ transition:transform .15s ease; } .tool-card:hover .tool-arrow{ transform:translateX(3px); } /* ============ CALCULATOR PAGE LAYOUT ============ */ .calc-header{ padding:32px 0 8px; } .calc-breadcrumb{ font-family:var(--font-body); font-size:13px; color:var(--ink-soft); margin-bottom:10px; } .calc-breadcrumb a:hover{ color:var(--blue); } .calc-header h1{ font-size:26px; color:var(--blue-deep); } [data-theme="dark"] .calc-header h1{ color:var(--ink); } .calc-header p.lead{ font-size:14.5px; margin-top:8px; max-width:640px; color:var(--ink-soft); } .calc-layout{ display:grid; grid-template-columns:minmax(320px,480px) minmax(300px,380px); gap:22px; align-items:start; padding:20px 0 60px; max-width:888px; margin:0 auto; } @media (max-width:860px){ .calc-layout{ grid-template-columns:1fr; max-width:none; } } .calc-panel{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); } .calc-panel-head{ font-family:var(--font-body); font-size:12.5px; font-weight:700; color:var(--blue-deep); text-transform:uppercase; letter-spacing:.05em; margin-bottom:14px; } [data-theme="dark"] .calc-panel-head{ color:var(--ink); } .field-row{ display:grid; grid-template-columns:1fr; gap:16px; margin-bottom:14px; } .field-row.split{ grid-template-columns:1fr 1fr; } label{ display:block; font-family:var(--font-body); font-size:12.5px; font-weight:700; margin-bottom:5px; color:var(--ink); } input[type=number], input[type=text], select{ width:100%; font-family:var(--font-body); font-size:14.5px; border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:10px 12px; background:#fff; color:var(--ink); } [data-theme="dark"] input[type=number], [data-theme="dark"] input[type=text], [data-theme="dark"] select{ background:var(--panel-2); } input:focus, select:focus{ border-color:var(--blue); } select option{ background:#fff; color:var(--ink); } .unit-suffix{ font-family:var(--font-body); font-size:11.5px; color:var(--ink-soft); margin-top:4px; } /* prefix/suffix input decoration */ .input-wrap{ position:relative; } .input-wrap .prefix, .input-wrap .suffix{ position:absolute; top:50%; transform:translateY(-50%); color:var(--ink-soft); font-size:13.5px; font-weight:600; pointer-events:none; } .input-wrap .prefix{ left:12px; } .input-wrap .suffix{ right:12px; } .input-wrap input.has-prefix{ padding-left:26px; } .input-wrap input.has-suffix{ padding-right:34px; } .btn-primary{ background:var(--blue); color:#fff; border:none; padding:13px 20px; border-radius:var(--radius-sm); font-family:var(--font-display); font-weight:700; font-size:14.5px; width:100%; margin-top:6px; transition:background .15s ease; } .btn-primary:hover{ background:var(--orange-dim); } .btn-reset{ width:100%; margin-top:8px; padding:11px 20px; border-radius:var(--radius-sm); background:transparent; border:1.5px solid var(--border); color:var(--ink-soft); font-family:var(--font-body); font-weight:600; font-size:13.5px; } .btn-reset:hover{ border-color:var(--ink-soft); color:var(--ink); } /* ---------- RESULT PANEL — dark gradient, matches reference exactly ---------- */ .readout{ position:sticky; top:88px; background:linear-gradient(160deg, var(--blue-deep), #071431); color:#fff; border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); } .readout-label{ font-family:var(--font-body); font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#9fc9c4; margin-bottom:14px; } .readout-value{ font-family:var(--font-display); font-size:36px; font-weight:800; color:#fff; line-height:1.1; word-break:break-word; } .readout-unit{ font-family:var(--font-body); font-size:14px; font-weight:600; color:#9fc9c4; margin-left:6px; } .readout-sub{ border-top:1px solid rgba(255,255,255,.15); padding-top:12px; margin-top:16px; } .readout-sub .row{ display:flex; justify-content:space-between; gap:10px; padding:6px 0; font-family:var(--font-body); font-size:13px; color:#dbe8f3; } .readout-sub .row span:first-child{ color:#b9cee1; } .readout-sub .row span:last-child{ font-weight:700; color:#fff; } .readout .disclaimer{ font-size:10.5px; color:#7f93a5; margin-top:14px; line-height:1.5; } /* result-table nested inside the dark readout needs light text, not the default dark-on-light styling */ .readout .result-table td{ border-top:1px solid rgba(255,255,255,.15); color:#dbe8f3; } .readout .result-table tr:first-child td{ border-top:1px solid rgba(255,255,255,.15); } .readout .result-table td:first-child{ color:#b9cee1; } .readout .result-table td:last-child{ color:#fff; } .readout .result-table tr.primary td:last-child{ color:#ff8080; } .readout .range-bar-labels{ color:#9fb6cb; } .readout .range-bar-labels span.active{ color:#ff8080; } .readout .range-bar-marker{ background:#fff; } .readout .range-bar-marker::after{ border-top-color:#fff; } .readout .alt-row{ color:#b9cee1; } .readout .alt-row .alt-val{ color:#fff; } .readout .alt-units-list{ border-top-color:rgba(255,255,255,.15); } .readout .mini-cal-pair{ border-top-color:rgba(255,255,255,.15); } .readout .mini-cal-label{ color:#b9cee1; } .readout .mini-cal-grid .dow{ color:#9fb6cb; } .readout .mini-cal-grid .day{ color:#dbe8f3; } .readout .mini-cal-grid .day.in-month{ background:rgba(255,255,255,.06); } /* answer data-table (light theme, used within white cards e.g. AnswerUI.dataTable) */ .result-table{ width:100%; border-collapse:collapse; margin-top:16px; font-family:var(--font-body); font-size:13.5px; } .result-table td{ padding:10px 0; border-top:1px solid var(--border-soft); } .result-table tr:first-child td{ border-top:1px solid var(--border); } .result-table td:first-child{ color:var(--ink-soft); } .result-table td:last-child{ text-align:right; font-weight:700; color:var(--ink); } .result-table tr.primary td:last-child{ color:var(--red); font-size:15px; } /* alt units cascading list */ .alt-units-list{ margin-top:14px; padding-top:14px; border-top:1px solid var(--border); } .alt-row{ font-family:var(--font-body); font-size:13.5px; color:var(--ink-soft); padding:5px 0; display:flex; gap:6px; align-items:baseline; } .alt-row .alt-or{ color:var(--ink-soft); } .alt-row .alt-val{ font-weight:700; color:var(--ink); font-family:var(--font-display); } /* range bar */ .range-bar-wrap{ margin-top:16px; } .range-bar-labels{ display:flex; justify-content:space-between; font-family:var(--font-body); font-size:10px; font-weight:600; color:var(--ink-soft); margin-bottom:6px; } .range-bar-labels span{ flex:1; text-align:center; } .range-bar-labels span:first-child{ text-align:left; } .range-bar-labels span:last-child{ text-align:right; } .range-bar-labels span.active{ color:var(--red); } .range-bar{ display:flex; height:9px; border-radius:100px; overflow:hidden; gap:2px; } .range-bar .seg{ flex:1; } .range-bar-marker-wrap{ position:relative; height:0; } .range-bar-marker{ position:absolute; top:-15px; width:2px; height:16px; background:var(--ink); transform:translateX(-1px); } .range-bar-marker::after{ content:""; position:absolute; top:-5px; left:50%; transform:translateX(-50%); width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid var(--ink); } /* mini calendar pair */ .mini-cal-pair{ display:flex; gap:14px; flex-wrap:wrap; margin-top:16px; padding-top:16px; border-top:1px solid var(--border); } .mini-cal{ flex:1; min-width:190px; } .mini-cal-label{ font-family:var(--font-body); font-size:11.5px; font-weight:600; color:var(--ink-soft); margin-bottom:8px; } .mini-cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; } .mini-cal-grid .dow{ font-family:var(--font-body); font-size:9.5px; font-weight:700; color:var(--ink-soft); text-align:center; padding-bottom:4px; } .mini-cal-grid .day{ font-family:var(--font-body); font-size:10.5px; text-align:center; padding:4px 0; border-radius:4px; color:var(--ink); } .mini-cal-grid .day.in-month{ background:var(--panel-2); } .mini-cal-grid .day.highlight{ background:var(--red); color:#fff; font-weight:700; } .copy-btn{ position:absolute; top:16px; right:16px; font-family:var(--font-body); font-size:11px; font-weight:700; padding:5px 12px; border-radius:100px; background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.28); } .copy-btn:hover{ background:rgba(255,255,255,.22); } .readout{ position:sticky; top:88px; } /* re-affirm sticky (copy-btn needs relative parent) */ .calc-layout .readout{ position:relative; } @media (min-width:861px){ .calc-layout .readout{ position:sticky; top:88px; } } /* ---------- INSIGHT BOX ---------- */ .insight-box{ background:var(--gold-light); border:1px solid #ecd48a; border-radius:12px; padding:14px 16px; margin:18px 0 0; display:flex; gap:10px; align-items:flex-start; } .insight-box .ic{ font-size:16px; flex:none; } .insight-box p{ margin:0; font-size:13px; color:#7a5a0a; line-height:1.55; } .insight-box p b{ color:#4a3600; } /* ---------- CHART CARD ---------- */ .chart-card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); margin-top:16px; } .chart-card h2{ font-size:13px; color:var(--blue-deep); text-transform:uppercase; letter-spacing:.05em; margin-bottom:14px; font-weight:700; } [data-theme="dark"] .chart-card h2{ color:var(--ink); } /* explainer / SEO copy block */ .explainer{ max-width:760px; margin-top:12px; border-top:1px solid var(--border); padding-top:32px; } .explainer h2{ font-size:19px; margin-bottom:10px; color:var(--blue-deep); } [data-theme="dark"] .explainer h2{ color:var(--ink); } .explainer h3{ font-size:15px; margin:20px 0 8px; } /* related calculators — pill chips, matches reference's related-row */ .related-calcs{ margin-top:24px; } .related-calcs h2{ font-size:13px; font-weight:700; color:var(--blue-deep); margin:0 0 12px; text-transform:uppercase; letter-spacing:.04em; } [data-theme="dark"] .related-calcs h2{ color:var(--ink); } .related-calcs .tool-grid{ margin:0; } .cat-hub-header{ padding:36px 0 10px; } .cat-hub-header h1{ font-size:32px; color:var(--blue-deep); } [data-theme="dark"] .cat-hub-header h1{ color:var(--ink); } .cat-hub-header .count-line{ font-family:var(--font-body); font-size:13.5px; color:var(--ink-soft); margin-top:8px; } /* ---------- THEME TOGGLE ---------- */ .theme-toggle{ flex:none; width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.1); font-size:14px; line-height:1; color:#fff; display:flex; align-items:center; justify-content:center; } .theme-toggle:hover{ border-color:var(--red); } .theme-icon-dark{ display:none; } [data-theme="dark"] .theme-icon-light{ display:none; } [data-theme="dark"] .theme-icon-dark{ display:inline; } /* ---------- NAV SEARCH DROPDOWN ---------- */ .search-dropdown{ display:none; position:absolute; top:calc(100% + 8px); right:0; width:300px; background:#fff; border:1px solid var(--border); border-radius:var(--radius-sm); box-shadow:0 18px 36px -10px rgba(0,0,0,.4); overflow:hidden; z-index:100; } .search-dropdown.open{ display:block; } .search-dropdown a{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 14px; font-family:var(--font-body); font-size:13px; color:var(--ink); border-bottom:1px solid var(--border-soft); } .search-dropdown a:last-child{ border-bottom:none; } .search-dropdown a:hover{ background:var(--panel-2); color:var(--blue); } .search-dropdown .sr-title{ font-weight:600; } .search-dropdown .sr-cat{ flex:none; font-size:11px; color:var(--red); } .search-empty{ padding:14px; font-family:var(--font-body); font-size:13px; color:var(--ink-soft); } /* footer */ .site-footer{ background:var(--blue-deep); padding:30px 0; margin-top:40px; } .site-footer p{ font-family:var(--font-body); font-size:12px; color:#9fb6cb; text-align:center; margin:0; } /* utility badges — category-colored pill, color set inline per page via data */ .badge{ display:inline-block; font-family:var(--font-body); font-size:10.5px; padding:4px 10px; border-radius:6px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; background:var(--red-light) !important; color:var(--red) !important; border:none; } /* ============================================================ GLOSSARY — inline term links + standalone glossary page ============================================================ */ .gloss-term{ color:var(--blue); text-decoration:underline dotted; text-decoration-thickness:1px; text-underline-offset:3px; cursor:help; font-weight:600; } .gloss-term:hover{ color:var(--red); } .gloss-tooltip{ position:absolute; z-index:300; max-width:300px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-sm); box-shadow:0 16px 36px -10px rgba(0,0,0,.35); padding:14px 16px; font-family:var(--font-body); } .gloss-tooltip strong{ display:block; font-family:var(--font-display); font-size:13.5px; color:var(--blue-deep); margin-bottom:6px; } [data-theme="dark"] .gloss-tooltip strong{ color:var(--ink); } .gloss-tooltip p{ font-size:12.5px; color:var(--ink-soft); margin:0 0 8px; line-height:1.5; } .gloss-tooltip a{ font-size:11.5px; font-weight:700; color:var(--red); } .glossary-hero{ background:linear-gradient(180deg, var(--blue-deep) 0%, #071431 100%); color:#fff; padding:44px 20px 40px; text-align:center; } .glossary-hero h1{ font-size:clamp(28px,4vw,42px); color:#fff; } .glossary-hero p{ color:#b9cee1; max-width:520px; margin:12px auto 0; } .glossary-search-box{ max-width:480px; margin:26px auto 0; background:#fff; border-radius:14px; padding:6px; display:flex; align-items:center; box-shadow:0 18px 40px -12px rgba(0,0,0,.4); } .glossary-search-box input{ border:none; outline:none; flex:1; padding:12px 16px; font-size:15px; color:var(--ink); font-family:var(--font-body); background:transparent; } .glossary-count{ font-family:var(--font-body); font-size:12px; color:#8fa8bd; margin-top:12px; } .glossary-cat-label{ font-family:var(--font-display); font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--blue-deep); margin:32px 0 14px; } [data-theme="dark"] .glossary-cat-label{ color:var(--ink); } .glossary-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; } .glossary-term-card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow); scroll-margin-top:100px; transition:box-shadow .3s ease, border-color .3s ease; } .glossary-term-card h3{ font-size:14.5px; margin-bottom:6px; } .glossary-term-card p{ font-size:12.8px; margin:0; line-height:1.55; } .glossary-highlight{ border-color:var(--red) !important; box-shadow:0 0 0 3px var(--red-light) !important; } /* ============================================================ REUSABLE OPTIONAL COMPONENTS — amortization/comparison tables, step-by-step breakdowns. Used only where they add real value. ============================================================ */ .amort-wrap{ max-height:340px; overflow-y:auto; border:1px solid var(--border); border-radius:var(--radius-sm); margin-top:14px; } .amort-table{ width:100%; border-collapse:collapse; font-family:var(--font-body); font-size:12.5px; } .amort-table thead th{ position:sticky; top:0; background:var(--panel-2); color:var(--ink-soft); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.03em; text-align:right; padding:9px 12px; border-bottom:1px solid var(--border); } .amort-table thead th:first-child{ text-align:left; } .amort-table td{ padding:8px 12px; text-align:right; border-bottom:1px solid var(--border-soft); color:var(--ink); } .amort-table td:first-child{ text-align:left; font-weight:700; color:var(--ink-soft); } .amort-table tr:last-child td{ border-bottom:none; } .amort-table .highlight-row td{ background:rgba(29,78,216,.06); font-weight:700; } .step-list{ margin-top:14px; } .step-row{ display:flex; gap:12px; padding:10px 0; border-top:1px solid var(--border-soft); } .step-row:first-child{ border-top:none; } .step-num{ flex:none; width:22px; height:22px; border-radius:50%; background:var(--blue); color:#fff; font-family:var(--font-display); font-weight:800; font-size:11px; display:flex; align-items:center; justify-content:center; } .step-label{ font-family:var(--font-body); font-weight:700; font-size:12.5px; color:var(--ink); margin-bottom:2px; } .step-detail{ font-family:var(--font-mono); font-size:12.5px; color:var(--ink-soft); } /* ============================================================ KEY TERMS BOX + FAQ ACCORDION ============================================================ */ .key-terms-box{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:20px; margin-top:20px; box-shadow:var(--shadow); } .key-terms-box h2{ font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--blue-deep); margin-bottom:14px; } [data-theme="dark"] .key-terms-box h2{ color:var(--ink); } .key-term{ padding:10px 0; border-top:1px solid var(--border-soft); } .key-term:first-of-type{ border-top:none; padding-top:0; } .key-term strong{ display:block; font-family:var(--font-display); font-size:13.5px; color:var(--ink); margin-bottom:3px; } .key-term p{ margin:0; font-size:12.5px; color:var(--ink-soft); line-height:1.5; } .faq-list{ margin-top:16px; } .faq-item{ border-top:1px solid var(--border-soft); padding:14px 0; } .faq-item:first-child{ border-top:none; } .faq-item summary{ font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--ink); cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; } .faq-item summary::-webkit-details-marker{ display:none; } .faq-item summary::after{ content:'+'; font-size:18px; color:var(--blue); flex:none; margin-left:12px; } .faq-item[open] summary::after{ content:'−'; } .faq-item p{ margin:10px 0 0; font-size:13px; color:var(--ink-soft); line-height:1.6; } /* ============================================================ BUDGET GRID — Trip Planner's editable rows-and-columns table ============================================================ */ .budget-grid-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--card); box-shadow:var(--shadow); margin-bottom:16px; } .budget-grid{ border-collapse:collapse; width:100%; min-width:480px; } .budget-grid th, .budget-grid td{ border:1px solid var(--border-soft); padding:0; } .budget-grid thead th{ position:sticky; top:0; z-index:2; background:var(--panel-2); font-family:var(--font-body); font-weight:700; font-size:12px; color:var(--ink-soft); padding:9px 8px; border-bottom:1.5px solid var(--border); white-space:nowrap; } .budget-grid .row-label-header{ position:sticky; left:0; z-index:3; text-align:left; min-width:170px; border-right:1.5px solid var(--border); } .budget-grid .col-head{ min-width:110px; border-right:1px solid var(--border-soft); } .budget-grid .col-head-inner{ display:flex; align-items:center; gap:6px; justify-content:center; } .budget-grid .col-name-input{ border:none; background:transparent; font-family:var(--font-body); font-weight:700; font-size:12.5px; color:var(--ink); text-align:center; width:80px; padding:2px; } .budget-grid .add-col-cell{ min-width:56px; text-align:center; border-right:none; } .budget-grid tbody tr:nth-child(even) td{ background:var(--panel-2); } .budget-grid tbody tr.dragging{ opacity:.4; } .budget-grid tbody tr.drag-over td{ border-top:2px solid var(--blue); } .budget-grid .row-label-cell{ position:sticky; left:0; z-index:1; background:inherit; display:flex; align-items:center; gap:4px; padding:6px 6px 6px 4px; min-width:170px; border-right:1.5px solid var(--border); } .budget-grid tbody tr:hover .row-label-cell{ background:var(--panel-2); } .budget-grid .row-drag-handle{ flex:none; cursor:grab; color:var(--border); font-size:13px; letter-spacing:-2px; padding:0 2px; user-select:none; } .budget-grid .row-drag-handle:hover{ color:var(--ink-soft); } .budget-grid .row-label-input{ border:none; background:transparent; font-family:var(--font-body); font-weight:600; font-size:12.5px; color:var(--ink); width:100%; padding:2px; } .budget-grid .cell-input{ width:100%; border:none; background:transparent; font-family:var(--font-body); font-size:12.5px; color:var(--ink); text-align:right; padding:10px 8px; box-sizing:border-box; } .budget-grid .cell-input::-webkit-inner-spin-button, .budget-grid .cell-input::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; } .budget-grid .cell-input[type=number]{ -moz-appearance:textfield; appearance:textfield; } .budget-grid .cell-input:focus{ background:var(--panel-2); outline:1.5px solid var(--blue); outline-offset:-1.5px; } .budget-grid .grid-remove-btn{ flex:none; width:18px; height:18px; border-radius:50%; border:1px solid var(--border); background:transparent; color:var(--ink-soft); font-size:11px; line-height:1; padding:0; } .budget-grid .grid-remove-btn:hover{ border-color:var(--red); color:var(--red); } .budget-grid tfoot td{ font-family:var(--font-display); font-weight:800; font-size:13px; color:var(--ink); padding:10px 8px; text-align:right; border-top:2px solid var(--border); background:var(--panel-2); } .budget-grid tfoot .row-label-cell{ background:var(--panel-2); } .add-row-btn, .add-col-btn{ border:1.5px dashed var(--border); background:transparent; color:var(--blue); font-family:var(--font-body); font-weight:700; font-size:12px; border-radius:var(--radius-sm); padding:7px 12px; white-space:nowrap; } .add-row-btn{ width:100%; text-align:left; margin:8px; width:calc(100% - 16px); } .add-col-btn{ width:36px; height:32px; } .add-row-btn:hover, .add-col-btn:hover{ border-color:var(--blue); background:var(--panel-2); } .grid-toolbar{ display:flex; gap:8px; margin:10px 0 16px; } .grid-tool-btn{ border:1px solid var(--border); background:var(--card); color:var(--ink); font-family:var(--font-body); font-weight:700; font-size:12.5px; border-radius:var(--radius-sm); padding:8px 14px; display:flex; align-items:center; gap:6px; } .grid-tool-btn:hover{ border-color:var(--blue); color:var(--blue); } .grid-tool-btn.copied{ border-color:var(--band-2); color:var(--band-2); } /* ============================================================ UNIT TOGGLE — imperial/metric switch pill next to a field's unit ============================================================ */ .unit-toggle-btn{ display:inline-block; margin-left:8px; padding:2px 9px; border-radius:100px; border:1px solid var(--border); background:transparent; color:var(--blue); font-family:var(--font-body); font-size:10.5px; font-weight:700; } .unit-toggle-btn:hover{ border-color:var(--blue); background:var(--panel-2); }