/* ============================================================================ RatePilot redesign — shared shell (sidebar + topbar) and design tokens. Loaded sitewide from base.html, after every page-specific stylesheet, so its rules win on any incidental selector collision. Every new class is "rp-" prefixed to guarantee no collision with existing page CSS (verified against static/css/*.css before adding this file — .kpi-card and .nav-item were already taken by mystyle.css / pricing_dashboard.css). The .widget-gated* / .gated-* block near the bottom is the one deliberate exception: those are EXISTING selectors (templates/include/widget_overlay.html) reskinned in place so every already-gated widget sitewide picks up the new look without touching each widget's markup. ========================================================================= */ :root { color-scheme: light; --paper: #F3F4F1; --surface: #FFFFFF; --surface-2: #EAEBE6; --ink: #14181D; --ink-secondary:#4B5158; --muted: #868C8F; --border: rgba(20,24,29,0.10); --border-strong:rgba(20,24,29,0.16); --accent: #1E6E71; --accent-ink: #FFFFFF; --accent-soft: #DEEBEA; --accent-soft-ink: #12504F; --good: #0ca30c; --good-text: #006300; --warning: #fab219; --serious: #ec835a; --critical: #d03b3b; --series-1: #2a78d6; --series-2: #eb6834; --shadow-1: 0 1px 2px rgba(20,24,29,0.05); --radius-sm: 6px; --radius: 10px; --scrim: rgba(243,244,241,0.72); --font-display: ui-serif, "New York", Georgia, "Times New Roman", serif; --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace; } @media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) { color-scheme: dark; --paper: #0A0D0F; --surface: #1B2124; --surface-2: #161B1E; --ink: #F3F5F4; --ink-secondary:#C3C8C6; --muted: #8A9295; --border: rgba(255,255,255,0.10); --border-strong:rgba(255,255,255,0.16); --accent: #3FA6A0; --accent-ink: #06201F; --accent-soft: rgba(63,166,160,0.16); --accent-soft-ink: #8FD9D3; --good: #0ca30c; --good-text: #0ca30c; --warning: #fab219; --serious: #ec835a; --critical: #e66767; --series-1: #3987e5; --series-2: #d95926; --shadow-1: 0 1px 2px rgba(0,0,0,0.3); --scrim: rgba(10,13,15,0.72); } } :root[data-theme="dark"] { color-scheme: dark; --paper: #0D1113; --surface: #14181B; --surface-2: #101416; --ink: #F3F5F4; --ink-secondary:#C3C8C6; --muted: #8A9295; --border: rgba(255,255,255,0.10); --border-strong:rgba(255,255,255,0.16); --accent: #3FA6A0; --accent-ink: #06201F; --accent-soft: rgba(63,166,160,0.16); --accent-soft-ink: #8FD9D3; --good: #0ca30c; --good-text: #0ca30c; --warning: #fab219; --serious: #ec835a; --critical: #e66767; --series-1: #3987e5; --series-2: #d95926; --shadow-1: 0 1px 2px rgba(0,0,0,0.3); --scrim: rgba(13,17,19,0.72); } :root[data-theme="light"] { color-scheme: light; --paper: #F3F4F1; --surface:#FFFFFF; --surface-2:#EAEBE6; --ink:#14181D; --ink-secondary:#4B5158; --muted:#868C8F; --border: rgba(20,24,29,0.10); --border-strong: rgba(20,24,29,0.16); --accent:#1E6E71; --accent-ink:#FFFFFF; --accent-soft:#DEEBEA; --accent-soft-ink:#12504F; --good:#0ca30c; --good-text:#006300; --warning:#fab219; --serious:#ec835a; --critical:#d03b3b; --series-1:#2a78d6; --series-2:#eb6834; --shadow-1: 0 1px 2px rgba(20,24,29,0.05); --scrim: rgba(243,244,241,0.72); } .rp-tabular { font-variant-numeric: tabular-nums; } /* ---------- Page background + base type (scoped, not , so we don't fight every un-redesigned page's own background/typography choices) ---- */ .rp-shell { background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; } /* No blanket ".rp-shell a { color: inherit }" here on purpose: with .rp-nav-item etc. being tags, "a" in the selector made it MORE specific (0,1,1) than the single-class component rules (0,1,0) that are supposed to set their own color — inherit silently won, so every nav item rendered in --ink (white) instead of --ink-secondary regardless of state. Every link-like component below sets its own color explicitly instead. */ .rp-shell button { font-family: inherit; } .rp-shell ::selection { background: var(--accent-soft); color: var(--accent-soft-ink); } /* ---------- Sidebar ---------- */ .rp-sidebar { background: var(--surface-2); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 20px 14px; gap: 4px; /* Without this, the sidebar (a grid item next to .rp-main) stretches to match whichever column is taller — on any page with more content than one viewport-height, that's .rp-main, so .rp-sidebar-foot's margin-top:auto pushes "Upload data" down to the bottom of the whole PAGE, not the bottom of the visible viewport. Sticky pins it to the viewport instead, so the foot links stay reachable without scrolling to the very end of a long page. */ position: sticky; top: 0; height: 100vh; overflow-y: auto; } .rp-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 20px 8px; text-decoration: none; } .rp-brand-mark { /* Real logo mark (static/images/blue_logo.svg) — keeps its own brand blue rather than being tinted to the app accent, same as any product that puts a company mark next to a product wordmark. */ height: 22px; width: auto; flex-shrink: 0; } .rp-brand-name { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; letter-spacing: 0.2px; color: var(--ink); } .rp-nav-group { margin-bottom: 18px; } .rp-nav-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); padding: 6px 10px 8px 10px; } .rp-nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--ink-secondary); text-decoration: none; font-size: 0.88rem; font-weight: 500; position: relative; } .rp-nav-item svg { flex-shrink: 0; opacity: 0.85; } .rp-nav-item:hover { background: rgba(20,24,29,0.05); color: var(--ink); text-decoration: none; } .rp-nav-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .rp-nav-item.rp-active { background: var(--accent-soft); color: var(--accent-soft-ink); font-weight: 600; } .rp-nav-item.rp-active svg { opacity: 1; } .rp-nav-item.rp-locked { color: var(--muted); cursor: default; } .rp-nav-item.rp-locked:hover { background: none; color: var(--muted); } .rp-nav-item .rp-lock { margin-left: auto; opacity: 0.6; } .rp-sidebar-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; } /* Upload Data — was styled identically to every other muted nav-item and easy to miss at the bottom of the sidebar; this makes it read as a real call-to-action instead of blending into the rest of the list. */ .rp-nav-item-cta { background: var(--accent-soft); color: var(--accent-soft-ink); font-weight: 700; border: 1px solid transparent; } .rp-nav-item-cta svg { opacity: 1; } .rp-nav-item-cta:hover { background: var(--accent); color: var(--accent-ink); } .rp-nav-item-cta.rp-active { background: var(--accent); color: var(--accent-ink); } /* ---------- Topbar ---------- */ .rp-topbar { height: 60px; border-bottom: 1px solid var(--border); background: var(--surface); display: flex; align-items: center; flex-wrap: wrap; padding: 0 24px; gap: 8px 16px; position: sticky; top: 0; z-index: 50; font-family: var(--font-body); color: var(--ink); } /* flex-wrap above means a narrow viewport grows the bar taller instead of forcing horizontal scroll — but a wrapped row still needs somewhere to shrink to, so the hotel name/location truncate rather than push width. */ .rp-hotel-switch { display: flex; align-items: center; gap: 8px; background: none; border: 1px solid transparent; padding: 6px 10px; border-radius: var(--radius-sm); color: var(--ink); cursor: pointer; font-family: inherit; position: relative; min-width: 0; max-width: 100%; } .rp-hotel-switch:hover { border-color: var(--border-strong); } .rp-hotel-switch .rp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rp-hotel-switch .rp-name { font-weight: 600; font-size: 0.9rem; } .rp-topbar-spacer { flex: 1; } .rp-currency-select { border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink); padding: 6px 10px; border-radius: var(--radius-sm); font-size: 0.78rem; font-weight: 600; font-family: inherit; cursor: pointer; } .rp-lang-toggle { display: flex; gap: 4px; } .rp-lang-toggle button { border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink-secondary); border-radius: var(--radius-sm); padding: 5px 8px; font-size: 0.74rem; font-weight: 700; cursor: pointer; font-family: inherit; } .rp-lang-toggle button.rp-on { background: var(--ink); color: var(--surface); border-color: var(--ink); } .rp-theme-toggle { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink-secondary); border-radius: var(--radius-sm); cursor: pointer; flex-shrink: 0; } .rp-theme-toggle:hover { color: var(--ink); border-color: var(--accent); } .rp-avatar-btn { display:flex; align-items:center; gap:8px; border:1px solid var(--border-strong); background: var(--surface); border-radius: 999px; padding: 4px 12px 4px 4px; cursor:pointer; text-decoration: none; color: var(--ink); font-family: inherit; } .rp-avatar { width:26px; height:26px; border-radius:50%; background:var(--ink); color:var(--surface); display:flex; align-items:center; justify-content:center; font-size:0.7rem; font-weight:700; } .rp-avatar-btn .rp-who { font-size: 0.8rem; font-weight: 600; } .rp-hotel-menu { position: absolute; top: 52px; left: 0; min-width: 200px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 6px; z-index: 60; display: none; } .rp-hotel-menu.rp-open { display: block; } .rp-hotel-menu a, .rp-hotel-menu button { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: var(--radius-sm); border: none; background: none; color: var(--ink); font-size: 0.84rem; cursor: pointer; text-decoration: none; font-family: inherit; } .rp-hotel-menu a:hover, .rp-hotel-menu button:hover { background: var(--paper); } .rp-hotel-menu a.rp-active, .rp-hotel-menu button.rp-active { color: var(--accent-soft-ink); font-weight: 700; background: var(--accent-soft); } /* ---------- Main / content ---------- */ .rp-main { display: flex; flex-direction: column; min-width: 0; } .rp-content { padding: 28px 32px 48px 32px; max-width: 1800px; } .rp-page-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 22px; gap: 20px; flex-wrap: wrap; } .rp-page-head h1 { font-family: var(--font-display); font-size: 1.9rem; font-weight: 600; margin: 0 0 4px 0; letter-spacing: 0.1px; } .rp-page-head .rp-sub { color: var(--ink-secondary); font-size: 0.9rem; } .rp-freshness { display:flex; align-items:center; gap:7px; color: var(--muted); font-size: 0.8rem; padding: 6px 10px; border: 1px solid var(--border); border-radius: 999px; } .rp-freshness .rp-dot { width:6px; height:6px; border-radius:50%; background: var(--good); box-shadow: 0 0 0 3px rgba(12,163,12,0.15); } /* Confidence-in-pricing pill (include/rp_confidence_pill.html) — compact replacement for the old full-width confidence_banner.html. */ .rp-confidence-pill { display: flex; align-items: center; gap: 9px; padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); } .rp-confidence-label { font-size: 0.72rem; font-weight: 700; color: var(--ink-secondary); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; } .rp-confidence-track { width: 72px; height: 6px; border-radius: 3px; background: var(--border-strong); overflow: hidden; display: inline-block; } .rp-confidence-fill { display: block; height: 100%; background: var(--accent); border-radius: 3px; } .rp-confidence-pct { font-size: 0.78rem; font-weight: 700; color: var(--ink); } /* ---------- KPI row ---------- */ /* auto-fit + a minmax floor, not a fixed column count: the grid itself decides how many 220px-minimum cards fit, reflowing all the way down to one column on a narrow viewport with no media query needed. Bare `1fr` tracks default to a content-based minimum (min-content), which is why a long value like "$90,681,633.06" could force the row wider than the viewport — minmax(220px, 1fr) overrides that with an explicit floor. */ .rp-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 22px; } /* position:relative unconditional here too — see the long comment on .rp-card above; same widget_overlay.html anchoring requirement. */ .rp-kpi-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-1); } .rp-kpi-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); margin-bottom: 10px; } .rp-kpi-value { font-family: var(--font-mono); font-size: 2.2rem; font-weight: 700; letter-spacing: -0.01em; color: var(--accent); overflow-wrap: anywhere; } .rp-kpi-sub { color: var(--muted); font-size: 0.9em; margin-top: 4px; } .rp-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: 700; padding: 3px 7px; border-radius: 999px; margin-top: 10px; } .rp-chip.rp-good { background: rgba(12,163,12,0.12); color: var(--good-text); } .rp-chip.rp-critical { background: rgba(208,59,59,0.12); color: var(--critical); } .rp-chip.rp-neutral { background: rgba(134,140,143,0.15); color: var(--ink-secondary); } .rp-chip svg { width: 11px; height: 11px; } .rp-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--accent); color: var(--accent-ink); font-size: 0.82rem; font-weight: 700; padding: 9px 16px; border-radius: 999px; text-decoration: none; border: none; cursor: pointer; } .rp-btn-primary:hover { filter: brightness(1.08); color: var(--accent-ink); text-decoration: none; } /* ---------- Two column zone ---------- */ .rp-zone { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; } /* Grid/flex items default to min-width:auto (their content's min-content size) — without this, a wide chart canvas or a long unwrapped value anywhere down the tree can stop the whole 2fr/1fr column from shrinking, even though the column's own track is a flexible fr unit. */ .rp-zone > * { min-width: 0; } /* position:relative is UNCONDITIONAL here — it's the positioning context for include/widget_overlay.html's absolutely-positioned overlay. The macro renders that overlay for ANY state != "hidden" (no_upload, no_data, recomputing), but the caller only adds the .widget-gated modifier class for "no_upload" specifically (matching the original app's per-widget convention). Without position:relative here unconditionally, a card in "no_data"/"recomputing" state has no positioned ancestor, so the overlay's position:absolute + inset:0 escapes to the viewport and covers the whole page — that actually happened during redesign QA (a card in "no_data" painted a full-screen rgba(10,13,15,0.72) veil over the sidebar/topbar). overflow:hidden is deliberately NOT added here — pricing_dashboard.css's .widget-gated already adds its own overflow:hidden for the "no_upload" blur look; adding it unconditionally here too would clip calendar.js's own hover tooltips on cards that are never gated. */ .rp-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-1); min-width: 0; } .rp-card-head { display: flex; justify-content: space-between; align-items: flex-start; padding: 18px 20px 4px 20px; } .rp-card-title { font-size: 0.98rem; font-weight: 700; margin: 0; } .rp-card-sub { color: var(--muted); font-size: 0.78rem; margin-top: 2px; } .rp-legend { display: flex; gap: 14px; align-items: center; } .rp-legend-item { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--ink-secondary); font-weight: 600; } .rp-legend-swatch { width: 9px; height: 9px; border-radius: 2px; } .rp-chart-wrap { padding: 6px 16px 14px 8px; position: relative; } .rp-chart-callout { position: absolute; background: var(--ink); color: var(--surface); border-radius: 8px; padding: 8px 11px; font-size: 0.76rem; line-height: 1.5; box-shadow: 0 6px 18px rgba(0,0,0,0.18); pointer-events: none; } .rp-chart-callout .rp-tabular { font-weight: 700; } .rp-chart-callout b { display:block; font-size: 0.7rem; opacity: 0.7; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 3px; } .rp-right-rail { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .rp-signal-list { padding: 6px 20px 16px 20px; display: flex; flex-direction: column; } .rp-signal-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--border); } .rp-signal-row:last-child { border-bottom: none; } .rp-signal-left { display: flex; align-items: center; gap: 10px; color: var(--ink-secondary); font-size: 0.85rem; font-weight: 600; } .rp-signal-left svg { opacity: 0.75; } .rp-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 0.74rem; font-weight: 700; padding: 4px 9px; border-radius: 999px; } .rp-pill.rp-good { background: rgba(12,163,12,0.12); color: var(--good-text); } .rp-pill.rp-warning { background: rgba(250,178,25,0.16); color: #8a5b00; } .rp-pill.rp-serious { background: rgba(236,131,90,0.16); color: #9c3f1c; } .rp-pill.rp-neutral { background: rgba(134,140,143,0.15); color: var(--ink-secondary); } .rp-pill svg { width: 10px; height: 10px; } .rp-cal-wrap { padding: 4px 18px 16px 18px; } /* Capped so day cells (aspect-ratio: 1, sized off the column's available width) don't balloon on wide screens — a 2fr/1fr .rp-zone right-rail can get quite wide on a large viewport, and without a cap each square cell scales up right along with it. 340px keeps cells at the ~46px they were designed at (matches the width this column resolved to before .rp-content grew to fill wide screens), centered under the full-width header. */ .rp-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin: 8px auto 0 auto; max-width: 340px; } .rp-cal-dow { text-align:center; font-size: 0.66rem; color: var(--muted); font-weight: 700; padding-bottom: 4px; } .rp-cal-day { aspect-ratio: 1; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius: 6px; font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-secondary); position: relative; } .rp-cal-day.rp-muted { color: var(--muted); opacity: 0.35; } .rp-cal-day.rp-today { background: var(--accent); color: var(--accent-ink); font-weight: 700; } .rp-cal-day .rp-mark { position:absolute; bottom:4px; width:4px; height:4px; border-radius:50%; } .rp-cal-legend { display:flex; gap: 14px; margin-top: 10px; flex-wrap: wrap; } .rp-cal-legend-item { display:flex; align-items:center; gap:6px; font-size: 0.74rem; color: var(--muted); } .rp-cal-legend .rp-dot { width:6px; height:6px; border-radius:50%; } /* Gated/locked widgets use the REAL app's existing include/widget_overlay.html macro + .widget-gated/.widget-gated-content/.gated-* classes (reskinned below), not a parallel rp-* system — that macro already encodes the real no_upload / no_data / recomputing states and the deep-link-to-upload behavior; duplicating it here would drift out of sync with it. */ @media (prefers-reduced-motion: no-preference) { .rp-nav-item, .rp-chip, .rp-pill { transition: background-color 0.15s ease, color 0.15s ease; } } @media (max-width: 980px) { .rp-zone { grid-template-columns: 1fr; } /* .rp-kpi-row no longer needs an override here — its auto-fit/minmax track sizing already reflows at every width without a media query. */ } @media (max-width: 860px) { .rp-shell { grid-template-columns: 1fr; } .rp-sidebar { display: none; } /* mobile nav collapse is a follow-up; not in scope for this pass */ } /* ============================================================================ Reskin of the EXISTING gated-widget partial (templates/include/widget_overlay.html) — same selectors, new palette, sitewide. No markup changes required. ========================================================================= */ .widget-gated-content { filter: blur(4px); opacity: 0.5; } .widget-gated-overlay { background: var(--scrim) !important; backdrop-filter: blur(2px); border-radius: inherit; } .gated-icon { color: var(--accent) !important; } .gated-message { color: var(--ink) !important; } .gated-link { background: var(--accent) !important; box-shadow: var(--shadow-1) !important; border-radius: 999px !important; } .gated-link:hover { background: var(--accent) !important; filter: brightness(1.08); box-shadow: var(--shadow-1) !important; transform: none !important; } .gated-link-secondary { color: var(--accent) !important; border-color: var(--accent) !important; } .gated-link-secondary:hover { background: var(--accent-soft) !important; color: var(--accent-soft-ink) !important; } /* ============================================================================ Kill the white frame around the shell. style3.css's #content{padding:20px} and mystyle.css's body{padding-bottom:100px} (plus body{background:#fafafa}) were both designed for the OLD topnav layout and sit OUTSIDE .rp-shell — their light background was showing through as a border/strip around the dark shell. Scoped to .rp-shell-active (set on /#content in base.html only when the shell renders) so un-redesigned pages keep their original spacing untouched. ========================================================================= */ body.rp-shell-active { padding-bottom: 0; background: var(--paper); overflow-x: hidden; } #content.rp-shell-active { padding: 0; min-height: 0; } /* ============================================================================ Recomputing banner (include/recomputing_banner.html) — moved here from a hardcoded-hex