/* ========================================================== REUW Global Stylesheet Standardized typography and design tokens ========================================================== */ /* ---- System Font (Calibri) ---- */ /* No @import needed — Calibri is a system font */ /* ---- CSS Custom Properties ---- */ :root { /* Typography */ --font-sans: 'Calibri', 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-ui: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace; /* REUW Institutional Color System */ --bg-primary: #060d17; --bg-secondary: #122a48; --bg-tertiary: #1a3557; --primary-text: #e8edf4; --secondary-text: #8494ac; /* AA on all three bg tiers (was #7888a0 — 3.9:1 on bg-tertiary) */ --text-tertiary: #708299; /* AA on bg-primary (was #5a6a80 — 3.3:1) */ --border-color: #24395a; --border-secondary: #142236; --accent-color: #c9a84c; --accent-text: #c9a84c; /* gold when used as TEXT — same as accent on dark, but darkened in light theme where #c9a84c/#b8923e fail AA on white. New text rules should use this, not accent. */ --accent-color-hover: #a07e2e; /* darker gold — pressed/standard hover */ --accent-color-light: #d8bd66; /* lighter gold — CTA "lift" hover (New Deal button, homepage primary) */ --success-color: #10b981; --warning-color: #f59e0b; --danger-color: #f25555; /* AA on card-bg (was #ef4444 — 4.35:1) */ --info-color: #60a5fa; /* blue status — AA (>=4.9:1) as text on all dark bg tiers */ --card-bg: #122a48; --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); /* Surface radius tokens (Phase 0, Lane A). Standard card/panel vs small control. ADDITIVE — existing rules keep their literals until migrated tab-by-tab; nothing changes visually until a rule opts in via var(). */ --radius: 0.5rem; /* cards, panels */ --radius-sm: 4px; /* inputs, chips, small controls */ /* Muted-accent for subtle decorations (e.g. text-shadow on dark cards) */ --accent-subtle: #3d2e0f; /* ---- Z-Index Scale ---- Replaces the ad-hoc 9998–10501 chaos. Use these tokens, not literals. Numbers are aligned with the existing app's stacking reality (the loading overlay sits at 99999, primary modals at 10000-10500). New code should use these tokens; old code can migrate one rule at a time. Modal-stacked is for one modal launched from another. */ --z-dropdown: 1050; /* form select dropdowns, etc. */ --z-sticky: 1055; /* sticky table headers, sticky footers */ --z-app-header: 1100; /* deal page top nav (logo + tab row) — above sticky thead, below datepickers/modals */ --z-datepicker: 9990; /* inline date pickers (above content, below modals) */ --z-modal-backdrop: 10059; --z-modal: 10060; /* matches existing #createNewDealModal */ --z-modal-stacked: 10500; /* matches existing #newDealTabs nested modal */ --z-popover: 10600; /* tooltips, hovercards above modals */ --z-toast: 99999; /* loading overlay, error overlay, toasts — top of all */ /* ---- Layout dimensions ---- */ --app-header-h: 96px; /* fallback only — index_init.js keeps this synced to #reuw-top-nav's real height, which varies (the tab row wraps to 2+ rows at laptop widths; logo shrinks <=768px) */ } /* The deal shell (index.html ) renders in Inter: the font was loaded there for years but never applied — body copy and tables silently fell back to Calibri under Inter nav chrome. Scoped as a token flip so standalone legacy pages keep the Calibri default. */ body.deal-shell { --font-sans: var(--font-ui); } /* ===================================================================== LIGHT THEME (opt-in via ) — Lane A, 2026-06-28 Token-flip only: every component reads these vars, so re-mapping them re-themes the whole app. DARK is the default (no attribute or data-theme="dark"). The toggle is persisted to localStorage by static/js/theme.js; a no-flash inline snippet sets data-theme before first paint. FIRST PASS palette — will iterate on Carson's eye. ===================================================================== */ :root[data-theme="light"] { /* WHITE-dominant institutional light. Surfaces are neutral near-white (no blue cast); blue + gold appear only as ACCENTS (inputs, totals, labels). */ --bg-primary: #e8ebf0; /* light-grey page so white containers read as panels (Carson 2026-07-13) */ --bg-secondary: #ffffff; /* raised panels / inputs */ --bg-tertiary: #f2f3f5; /* neutral light fills / hovers */ --primary-text: #18263c; /* dark ink */ --secondary-text: #5c6675; /* neutral slate */ --text-tertiary: #6d7480; /* AA on near-white (was #8b929e — 3.05:1) */ --border-color: #d5dae1; /* slightly stronger so container edges show */ --border-secondary: #eef0f2; --accent-color: #b8923e; /* gold accent — fills/borders only (2.9:1 as text on white) */ --accent-text: #8a6d2a; /* gold as TEXT — AA (4.9:1) on the near-white surfaces */ --accent-color-hover:#946f24; --accent-color-light:#c9a84c; --card-bg: #ffffff; /* white cards */ --card-shadow: 0 1px 3px rgba(30, 41, 59, 0.07), 0 1px 2px rgba(30, 41, 59, 0.05); --accent-subtle: #f6eccf; /* light gold tint */ /* Status colors as TEXT on white: the dark-theme #10b981/#f59e0b/#f25555 sit below AA on a light surface. Darken for light mode (fills/borders that also use these read fine — the darker shades still contrast). */ --success-color: #0f8a5f; /* AA on white (was #10b981 — 2.8:1) */ --warning-color: #b7791f; /* AA on white (was #f59e0b — 2.1:1) */ --danger-color: #d13b3b; /* AA on white (was #f25555 — 3.4:1) */ --info-color: #0b5ed7; /* blue status — AA (>=5.3:1) as text on the near-white surfaces */ } /* Light-theme shims: Bootstrap "light/white" text utilities mean "readable text" in this app — they must darken in light mode (else white-on-white). Bootstrap sets these with !important, so the override needs it too. */ :root[data-theme="light"] .text-light, :root[data-theme="light"] .text-white { color: var(--primary-text) !important; } :root[data-theme="light"] .text-muted { color: var(--secondary-text) !important; } /* Safety net: pin the page + deal-content surfaces to the theme bg in light mode. The deal-shell wrappers are transparent over the body, so anything that left a dark surface behind the white cards now reads light. */ :root[data-theme="light"] body, :root[data-theme="light"] #existing-deal-assumptions-root, :root[data-theme="light"] #newDealTabsContent { background: var(--bg-primary); } /* Dim the auth/settings gold geometric body overlays in light mode for a cleaner white (they read fine on dark; on white they add busy texture). */ :root[data-theme="light"] body::before, :root[data-theme="light"] body::after { opacity: 0.05; } /* Light-mode fixes (multi-agent audit 2026-06-28): components that kept a dark literal in light mode. Modal/card headers+footers use #081220 (dark) for the dark theme; give them a light surface in light. Button hover used a dark navy shadow. Dark theme unchanged (these are [data-theme=light]-scoped). */ :root[data-theme="light"] .modal-header, :root[data-theme="light"] .modal-footer, :root[data-theme="light"] .card-header, :root[data-theme="light"] .card-footer { background: var(--bg-tertiary); color: var(--primary-text); } :root[data-theme="light"] .btn-secondary:hover, :root[data-theme="light"] .btn-outline-secondary:hover { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); } /* Light-mode fix (2026-07-06): the bare "Waterfall"

(templates/tabs/ waterfall.html) sets no color, so it inherits .tab-pane's dark-theme literal (#e2e8f0, further down this file) and reads ghost-white on the light page. Scope the pane's h5s back to ink; the .text-light h6s are handled by the shim above, and the modal titles inherit .modal-header's light color. / :root[data-theme="light"] #tabpane-equity-waterfall h5 { color: var(--primary-text); } / Same fix for the Returns pane's "Returns"

(templates/tabs/returns.html). / :root[data-theme="light"] #tabpane-investment-summary h5 { color: var(--primary-text); } / Light-mode fix (2026-07-06): Bootstrap's btn-outline-light is built for dark surfaces; the app's base override (further down this file) keeps a white-alpha border + hover that vanish on the light theme's white panels. Give these buttons the app's .btn-outline-secondary look instead. Buttons on the legacy rent-roll module's stay-dark inline panels are excepted in tab-theme.css. / :root[data-theme="light"] .btn-outline-light { background: var(--bg-tertiary); border-color: var(--border-color); color: var(--primary-text); } :root[data-theme="light"] .btn-outline-light:hover { background: var(--border-color); border-color: var(--accent-color); color: var(--primary-text); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); } / Light-mode fix (2026-07-06): the dark-theme .btn-close inversion (further down this file) leaves every modal close X white — invisible once the modal header/footer surfaces flip light. Restore the dark X inside modals (covers .btn-close-white too — every close button here carries both classes, and this outranks Bootstrap 5.3.3's white-filter on specificity). Toasts stay excluded on purpose: their text-bg-* fills are saturated in both themes, so the white X is still right there. / :root[data-theme="light"] .modal-content .btn-close { filter: none; } / EXCEPTION: the legacy floorplan-grouping modal (?rr_legacy=1, rentroll_legacy.js) pins its header dark with an inline background:#081220 that no token flips — keep the inverted X on it (same filter literal as the dark-theme .btn-close rule below). / :root[data-theme="light"] .modal-header[style="#081220"] .btn-close { filter: invert(1) brightness(2); } /* ---- Base Typography ---- / html, body { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } / Universal font reset / , ::before, ::after { font-family: inherit; } /* Headings / h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.01em; } / Body text / p, span, div, label, a, li, td, th, input, select, textarea, button, option { font-family: var(--font-sans); } / ---- Tabular Numbers ---- All numeric / financial data should use tabular-nums so columns align. Apply via class or automatically on number inputs. / input[type="number"], .numeric, .money-field, .data-value, .tabular-nums, table td:not(:first-child), .form-control[readonly], .financial-value { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; font-family: var(--font-sans); } / ---- Monospace (intentional) ---- Only dev consoles and actual code blocks should be monospace. / code, pre, kbd, samp, .font-mono, .dev-console, #dev-log { font-family: var(--font-mono); } / ---- Form Controls ---- / .form-control, .form-select { font-family: var(--font-sans); font-size: 0.875rem; } / ---- Bootstrap Overrides ---- / .btn { font-family: var(--font-sans); } .table { font-family: var(--font-sans); } .modal-content { font-family: var(--font-sans); } .dropdown-menu, .dropdown-item { font-family: var(--font-sans); } .nav-link, .nav-pills .nav-link { font-family: var(--font-sans); } .badge { font-family: var(--font-sans); font-variant-numeric: tabular-nums; } / ---- Number Input Spinner Removal ---- / input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; appearance: textfield; } / ========================================================== Bootstrap Component Theming Relocated from templates/index.html inline