/* ═══════════════════════════════════════════════════════════════════ NRI Outpost — Senior Mode Adjustable text size via data-fontscale attribute on . Scale is stored in localStorage['nri-fontscale'] as a number (1–1.5). The pre-paint script in applies it before first render. We use a CSS custom property --font-scale that multiplies base sizes. Rather than refactoring every px value, we apply a global transform via font-size on which cascades through all rem/em units, plus explicit overrides for px-based elements. ═══════════════════════════════════════════════════════════════════ */ /* ─── Base scaling ──────────────────────────────────────────────── */ :root { --font-scale: 1; } /* When senior mode is active (any scale > 1), increase base font and apply high-contrast / large-target overrides */ html[data-senior="true"] { --font-scale: var(--senior-scale, 1.25); } /* Scale all text globally via html font-size. Most of the site uses px, so we also use targeted overrides below. */ html[data-senior="true"] body { font-size: calc(16px * var(--font-scale)); line-height: 1.65; letter-spacing: 0.01em; } /* ─── Headings ──────────────────────────────────────────────────── */ html[data-senior="true"] h1, html[data-senior="true"] .section-title { font-size: calc(36px * var(--font-scale)) !important; } html[data-senior="true"] h2, html[data-senior="true"] .section-subtitle { font-size: calc(24px * var(--font-scale)) !important; } html[data-senior="true"] h3 { font-size: calc(20px * var(--font-scale)) !important; } html[data-senior="true"] h4 { font-size: calc(18px * var(--font-scale)) !important; } /* ─── Body text, paragraphs, list items ─────────────────────────── */ html[data-senior="true"] p, html[data-senior="true"] li, html[data-senior="true"] td, html[data-senior="true"] th, html[data-senior="true"] label, html[data-senior="true"] span, html[data-senior="true"] a, html[data-senior="true"] .card-body, html[data-senior="true"] .card-text, html[data-senior="true"] .card-detail { font-size: calc(16px * var(--font-scale)) !important; line-height: 1.65 !important; } /* ─── Navigation ────────────────────────────────────────────────── */ html[data-senior="true"] .nav-link, html[data-senior="true"] .nav-more-btn { font-size: calc(15px * var(--font-scale)) !important; } html[data-senior="true"] .mob-drawer-link { font-size: calc(17px * var(--font-scale)) !important; padding: calc(14px * var(--font-scale)) 24px !important; min-height: 56px; } html[data-senior="true"] .mob-tabbar .mob-tab span { font-size: calc(11px * var(--font-scale)) !important; } /* ─── Buttons — larger touch targets ────────────────────────────── */ html[data-senior="true"] button, html[data-senior="true"] .btn, html[data-senior="true"] .nav-cta, html[data-senior="true"] input[type="submit"], html[data-senior="true"] input[type="button"] { min-height: calc(48px * var(--font-scale)); font-size: calc(15px * var(--font-scale)) !important; padding: calc(10px * var(--font-scale)) calc(20px * var(--font-scale)); } /* ─── Form inputs ───────────────────────────────────────────────── */ html[data-senior="true"] input, html[data-senior="true"] select, html[data-senior="true"] textarea { font-size: calc(16px * var(--font-scale)) !important; min-height: calc(48px * var(--font-scale)); padding: calc(10px * var(--font-scale)); } /* ─── Cards ─────────────────────────────────────────────────────── */ html[data-senior="true"] .card, html[data-senior="true"] [class*="card"] { padding: calc(16px * var(--font-scale)); } /* ─── High contrast: ensure no light-grey-on-white ──────────────── */ html[data-senior="true"] .ink-3, html[data-senior="true"] .text-muted, html[data-senior="true"] small, html[data-senior="true"] .verify-note { color: var(--ink-2, #4a3f33) !important; opacity: 1 !important; } /* ─── Chat widget ───────────────────────────────────────────────── */ html[data-senior="true"] .chat-msg, html[data-senior="true"] .chat-input { font-size: calc(15px * var(--font-scale)) !important; } /* ─── Font-size slider in drawer / nav ──────────────────────────── */ .senior-controls { padding: 12px 24px 16px; } .senior-controls-label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink-2, #4a3f33); margin-bottom: 8px; } .senior-controls-label svg { width: 18px; height: 18px; flex-shrink: 0; } .senior-slider-row { display: flex; align-items: center; gap: 10px; } .senior-slider-row .sz-label { font-size: 12px; color: var(--ink-3, #7a6f60); user-select: none; flex-shrink: 0; } .senior-slider-row .sz-label.sz-big { font-size: 18px; font-weight: 700; } .senior-slider { -webkit-appearance: none; appearance: none; flex: 1; height: 6px; border-radius: 3px; background: var(--rule, #d8cdb5); outline: none; cursor: pointer; } .senior-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--saffron, #c75a2a); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2); cursor: pointer; } .senior-slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--saffron, #c75a2a); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2); cursor: pointer; } /* Nav-bar compact version */ .nav-tools .senior-controls-compact { display: inline-flex; align-items: center; gap: 4px; margin-right: 4px; } .nav-tools .senior-controls-compact .sz-label { font-size: 11px; color: var(--ink-3, #7a6f60); cursor: default; } .nav-tools .senior-controls-compact .sz-label.sz-big { font-size: 16px; font-weight: 700; } .nav-tools .senior-controls-compact .senior-slider { width: 70px; height: 4px; } .nav-tools .senior-controls-compact .senior-slider::-webkit-slider-thumb { width: 16px; height: 16px; } .nav-tools .senior-controls-compact .senior-slider::-moz-range-thumb { width: 16px; height: 16px; } /* Hide compact slider on mobile, show full slider in drawer */ @media (max-width: 920px) { .nav-tools .senior-controls-compact { display: none; } } @media (min-width: 921px) { .mob-drawer .senior-controls { display: none; } }