/* ============================================================ Quantum Power Accounting System - Theme System ------------------------------------------------------------ CSS custom property theming with light + dark modes. HOW IT WORKS - All colors are semantic tokens defined on :root (light) and .theme-dark (dark). Components only ever reference tokens, never raw hex, so a new theme = one new block of variables. - Toggle by putting a class on : -> light (default, no JS needed) -> dark Because light is the default on :root, the correct theme shows on first paint with zero JavaScript. - Optional: respect the OS setting automatically (see the prefers-color-scheme block at the bottom). ADDING A THEME LATER Copy the .theme-dark block, rename it (e.g. .theme-highcontrast), and override only the tokens you want. No component CSS changes. CONTRAST Foreground/background pairings below are chosen to meet or exceed WCAG AA (4.5:1 for body text, 3:1 for large text and UI borders) in both themes. Key ratios noted inline. ============================================================ */ /* ------------------------------------------------------------ 1. BRAND SCALE (raw values - not used by components directly) These are the palette primitives. Semantic tokens below point at them. Keeping brand and semantic layers separate is what makes re-theming clean. ------------------------------------------------------------ */ :root { /* Quantum Power orange — #ff5000, sampled from the logo (5.90% of its pixels). Every ratio below is measured. The brand orange itself is only 3.28:1 on white, so it CANNOT carry body text; -600 is the darkened same-hue shade that can. */ --brand-orange-400: #ff7c40; /* light: for DARK surfaces. 5.87:1 on #23272d */ --brand-orange-500: #ff5000; /* THE logo orange. Fills only, never text on white */ --brand-orange-600: #bf3c00; /* text-on-light. 5.44:1 on #fff AA */ /* Quantum Power yellow — #ffcc00, also sampled from the logo (1.83%). */ --brand-yellow-400: #ffd633; /* fills and badges on dark */ --brand-yellow-500: #ffcc00; /* THE logo yellow. 1.51:1 on white — fills ONLY */ --brand-yellow-600: #8c7000; /* the only yellow safe as text: 4.74:1 AA */ /* Warm dark neutrals — the DARK-MODE page/card/row surfaces. The grey-* scale is cool (blue-leaning: B>G>R). Against the warm chrome band it read as two different products sharing a screen — a cool charcoal content area beside a warm brown sidebar. These are the same lightness steps, re-tinted warm (R>G>B) so the whole dark theme belongs to one family. Separation between them is 1.16 and 1.24, matching the cool scale's own 1.19 and 1.29, so surfaces stay as distinguishable as before. */ --dark-900: #15110e; /* page background */ --dark-800: #25201a; /* cards, tables, panels */ --dark-700: #36302a; /* zebra rows, subtle fills, borders */ --dark-600: #4a423a; /* stronger borders */ /* Entry-page ground — the sign-in, MFA, password-reset and error pages. #0c1117 sampled from the Quantum Power dashboard mock-up. Deliberately NOT --brand-chrome-900: the chrome token paints the sidebar band beside white content, where a near-black reads as heavy, while a full-bleed sign-in page behind a single white card wants the deeper ground. */ --brand-ink-900: #0c1117; /* Warm chrome (replaces Raven navy for the header/sidebar band). Warm rather than neutral so the dark band reads as part of an orange brand. */ --brand-chrome-900: #241a15; /* header/footer bg. white on it = 17:1 AAA */ --brand-chrome-800: #2b1d16; --brand-chrome-700: #33241c; /* hover state on chrome surfaces */ --brand-chrome-600: #4a362a; /* subtle dividers within the dark band */ /* --- compatibility aliases ------------------------------------------ The old Raven names are kept because they are referenced DIRECTLY in ~28 rules further down this file and in 10 templates — the header's claim that components only touch semantic tokens is aspirational. Renaming would mean editing all of them; aliasing costs nothing and keeps this change contained to the palette. --------------------------------------------------------------------- */ --brand-gold-400: var(--brand-orange-400); --brand-gold-500: var(--brand-orange-500); --brand-gold-600: var(--brand-orange-600); --brand-navy-900: var(--brand-chrome-900); --brand-navy-800: var(--brand-chrome-800); --brand-navy-700: var(--brand-chrome-700); --brand-navy-600: var(--brand-chrome-600); /* Neutral grey scale (the workhorse for a data UI) */ --grey-000: #ffffff; --grey-050: #f6f7f8; --grey-100: #eceef1; --grey-200: #dfe2e6; --grey-300: #c4c9d0; --grey-400: #9aa1ab; --grey-500: #6b727c; --grey-600: #4a4f57; --grey-700: #333940; --grey-800: #23272d; --grey-900: #15181c; /* Status hues (accounting needs clear paid/overdue/etc.) */ --green-500: #2e7d46; --green-600: #1f6b39; --red-500: #c0392b; --red-600: #a02f23; --amber-500: #b9770e; --blue-500: #2f6fb0; } /* ------------------------------------------------------------ 2. SEMANTIC TOKENS - LIGHT (default) Components reference ONLY these. Named by role, not by color. ------------------------------------------------------------ */ :root { color-scheme: light; /* Surfaces */ --color-bg: var(--grey-050); /* app background - light grey for visibility */ --color-surface: var(--grey-000); /* cards, tables, panels */ --color-surface-alt: var(--grey-100); /* zebra rows, subtle fills */ --color-overlay: rgba(21, 24, 28, 0.45); /* Text (on --color-surface unless noted) */ --color-text: var(--grey-900); /* body: #15181c on #fff = ~16:1 AAA */ --color-text-muted: var(--grey-500); /* secondary: #6b727c on #fff = ~5:1 AA */ --color-text-inverse: var(--grey-000); /* text on dark/accent fills */ /* Borders / lines */ --color-border: var(--grey-200); --color-border-strong: var(--grey-300); /* Brand accent */ /* THE LOGO ORANGE. Used for fills, active states, focus rings and borders — everywhere the accent is a SHAPE rather than a letterform. #ff5000 is only 3.28:1 on white, which is fine for a button body or a 4px rule but fails AA for body text, so text does not use this token. */ --color-accent: var(--brand-orange-500); /* #ff5000 — the logo orange */ --color-accent-hover: var(--brand-orange-600); /* The same orange darkened just enough to be legible as TEXT on white: #bf3c00 is 5.44:1 (AA). Links, small labels and figures use this. Same hue as the logo, so it reads as the brand rather than a second colour. */ --color-accent-text: var(--brand-orange-600); /* WHITE, not dark. This is the one token that had to flip when the brand moved from gold to orange: gold was light enough to carry dark text, the dark orange is not. On the #bf3c00 fill, white is 5.44:1 (AA) and #15181c is 3.29:1. But the accent is now the LOGO orange #ff5000, which is lighter — on it, a dark label is 5.43:1 and white is only 3.28:1. So the dark label wins in both themes now. */ --color-accent-contrast: var(--grey-900); /* Brand navy - used for the header/nav band and brand headings */ --color-brand: var(--brand-chrome-900); --color-header-bg: var(--brand-chrome-900); --color-header-text: var(--grey-000); /* #fff on #241a15 = 17:1 AAA */ --color-header-border: var(--brand-navy-600); /* Interactive / focus */ --color-focus-ring: var(--blue-500); /* Status - text colors meet AA on --color-surface */ --color-success: var(--green-600); --color-danger: var(--red-600); --color-warning: var(--amber-500); --color-info: var(--blue-500); /* Status - soft backgrounds (pair with the matching text token) */ /* A pale wash of the brand orange, for surfaces that are branded rather than carrying a status meaning — the summary tiles above a list, for one. Sits in the same family as the status -bg tokens below so tiles look like one set. */ --color-accent-bg: #fff4ee; --color-success-bg: #e7f3ec; --color-danger-bg: #fbeae8; --color-warning-bg: #fdf3e2; --color-info-bg: #e9f1f9; /* Elevation */ --shadow-sm: 0 1px 2px rgba(21,24,28,0.06), 0 1px 3px rgba(21,24,28,0.08); --shadow-md: 0 2px 6px rgba(21,24,28,0.08), 0 6px 16px rgba(21,24,28,0.10); /* Shape + rhythm (not colors, but part of the token system) */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-8: 48px; /* Type */ --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace; /* for figures */ } /* ------------------------------------------------------------ 3. SEMANTIC TOKENS - DARK Same names, dark values. Only overrides what changes. Applied via . ------------------------------------------------------------ */ .theme-dark { color-scheme: dark; --color-bg: var(--dark-900); --color-surface: var(--dark-800); --color-surface-alt: var(--dark-700); --color-overlay: rgba(0, 0, 0, 0.6); /* Warm off-white, not the blue-white #eef0f2 the cool scale used. */ --color-text: #f0ece9; /* on #25201a = 13.8:1 AAA */ --color-text-muted: #b3a49b; /* on #25201a = 6.7:1 AA */ --color-text-inverse: var(--dark-900); --color-border: var(--dark-700); --color-border-strong: var(--dark-600); --color-accent: var(--brand-orange-400); /* #ff7c40 on #25201a = 6.31:1 AA */ --color-accent-hover: var(--brand-orange-500); /* On the dark ground the accent is already legible as text, so there is no need for a darkened variant — both tokens are the same colour here. */ --color-accent-text: var(--brand-orange-400); /* Dark on the light-orange fill: 6.96:1 AA. White here would be 1.93:1. */ --color-accent-contrast: var(--grey-900); --color-focus-ring: #6ea8e0; --color-success: #5cc98a; --color-danger: #e8776b; --color-warning: #e0a944; --color-info: #6ea8e0; --color-accent-bg: #2e1d13; --color-success-bg: #1c3327; --color-danger-bg: #3a201d; --color-warning-bg: #362a15; --color-info-bg: #1d2c3b; --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 2px 6px rgba(0,0,0,0.45), 0 6px 16px rgba(0,0,0,0.5); /* Header/sidebar chrome sits a shade lighter than the near-black page bg so it stays legible as a distinct band instead of blending in. */ --color-header-bg: var(--brand-navy-800); --color-header-border: var(--brand-navy-600); } /* ------------------------------------------------------------ 3b. CONTENT BLACKOUT ("privacy screen") — Blacks out the working area on demand while keeping the left sidebar and the top ribbon usable. A full-viewport black layer is laid down, then the sidebar and ribbon are lifted ABOVE it — so the "L" of chrome shows through and only the content area goes black. Scroll-proof (the layer is fixed). Click the black area to dismiss. Momentary — it does not persist across page loads. ------------------------------------------------------------ */ #raven-blackout-layer { display: none; position: fixed; inset: 0; background: #000; z-index: 400; cursor: pointer; } html.content-blackout #raven-blackout-layer { display: block; } html.content-blackout .sidebar, html.content-blackout .site-ribbon { position: relative; z-index: 401; } /* ------------------------------------------------------------ 4. BASE ELEMENTS (consume tokens only) ------------------------------------------------------------ */ * { box-sizing: border-box; } /* Always reserve room for the vertical scrollbar. Without this, a short page (no scrollbar) and a long one (scrollbar) have different viewport widths, so the sidebar and every left margin jump sideways as you navigate. */ html { /* Reserve the vertical scrollbar so a short page and a long page have the same viewport width — otherwise every left margin jumps as you navigate. overflow-y:scroll is the universally-supported fallback; scrollbar-gutter is the modern equivalent and wins where supported. */ overflow-y: scroll; scrollbar-gutter: stable; } body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: var(--color-accent-text); text-decoration: none; } a:hover { color: var(--color-accent-hover); text-decoration: underline; } h1, h2, h3 { color: var(--color-text); line-height: 1.25; } /* Visible keyboard focus everywhere (accessibility floor) */ :focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); } /* ------------------------------------------------------------ 5. COMPONENT PATTERNS (examples using the tokens) ------------------------------------------------------------ */ /* App shell: fixed navy sidebar + fluid main column. The sidebar always uses the header/brand tokens (not the light/dark surface tokens) so it reads as constant chrome, the same way the marketing site's nav stays navy in both modes. */ .app-shell { display: flex; min-height: 100vh; } .sidebar { width: 224px; flex-shrink: 0; display: flex; flex-direction: column; background: var(--color-header-bg); border-right: 1px solid var(--color-header-border); /* Pin to the viewport: the sidebar is its own full-height column that scrolls internally, so the footer (theme / blackout / sign-out) stays reachable at the bottom of the SCREEN no matter how long the page content is. */ position: sticky; top: 0; align-self: flex-start; /* don't stretch to the tall page's height */ height: 100vh; overflow-y: auto; overflow-x: hidden; /* Keep the scrollbar out of the way — a full-width OS scrollbar down the navy reads as a seam. Thin, translucent, and only obvious on hover. */ scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent; } .sidebar::-webkit-scrollbar { width: 6px; } .sidebar::-webkit-scrollbar-track { background: transparent; } .sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 999px; } .sidebar:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,.30); } .sidebar::-webkit-scrollbar-button { display: none; } /* no arrow buttons */ .sidebar-brand { /* logo-sidebar.png is cropped to the artwork; logo.png carries ~66% empty canvas and pushed everything down when used here. */ padding: var(--space-3) var(--space-3) var(--space-2); } /* the logo links to the dashboard — keep it looking like a logo, not a link */ .sidebar-brand a { display: block; text-decoration: none; } .sidebar-brand a:hover { text-decoration: none; opacity: .88; } .sidebar-brand img { display: block; width: 100%; max-width: 178px; height: auto; margin: 0 auto; } .sidebar-subtitle { text-align: center; margin-top: var(--space-2); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-gold-400); } .sidebar-search { padding: 0 var(--space-3) var(--space-2); } .sidebar-search input { width: 100%; font: inherit; font-size: 13px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.08); color: #fff; } .sidebar-search input::placeholder { color: rgba(255,255,255,0.5); } .sidebar-search input:focus { outline: 2px solid var(--brand-gold-400); outline-offset: 1px; } /* ------------------------------------------------------------ SIDEBAR SECTION HEADINGS — now a clickable module toggle. They used to be the same weight and grey as the links around them, so they read as noise rather than as structure. Bigger, a lighter blue-grey, more air above, and a hairline divider so each module is visibly its own block. ------------------------------------------------------------ */ .sidebar-section { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: calc(100% - var(--space-4)); margin: var(--space-4) var(--space-2) 0; padding: var(--space-2) var(--space-3) 7px; font-size: 12px; /* was 11 */ font-weight: 700; /* was 600 */ letter-spacing: 0.07em; text-transform: uppercase; color: #9fb4cc; /* light blue-grey, not flat grey */ background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,0.09); /* the divider */ border-radius: 0; cursor: pointer; text-align: left; font-family: inherit; } .sidebar-section:hover { color: #cfe0f0; } .sidebar-section .chev { width: 12px; height: 12px; flex: none; transition: transform .15s ease; opacity: .7; } .sidebar-section[aria-expanded="false"] .chev { transform: rotate(-90deg); } .sidebar-section[aria-expanded="false"] { color: rgba(255,255,255,0.42); } /* A collapsed module hides its links entirely. */ .sidebar-nav[hidden] { display: none; } /* ---- Favorites: the pages you actually live in ---- */ .sidebar-fav a .star { margin-left: auto; opacity: .35; width: 14px; height: 14px; flex: none; } .sidebar-fav a:hover .star { opacity: .8; } .sidebar-nav a .star { margin-left: auto; opacity: 0; width: 14px; height: 14px; flex: none; transition: opacity .12s; } .sidebar-nav li:hover a .star { opacity: .45; } .sidebar-nav a .star:hover, .sidebar-nav a .star.on { opacity: 1; color: var(--brand-gold-400); } .star.on { color: var(--brand-gold-400); opacity: 1 !important; } /* ---- + New ---- */ .sidebar-new { position: relative; margin: var(--space-3) var(--space-3) 0; } .sidebar-new > button { width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px var(--space-3); border: 0; border-radius: var(--radius-sm); background: var(--brand-gold-400); color: #1a1a1a; font-weight: 700; font-size: 14px; cursor: pointer; font-family: inherit; } .sidebar-new > button:hover { filter: brightness(1.06); } .sidebar-new-menu { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 5px); z-index: 70; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: 0 10px 28px rgba(0,0,0,.3); padding: 5px; } .sidebar-new-menu.open { display: block; } .sidebar-new-menu a { display: block; padding: 8px 10px; font-size: 13px; color: var(--color-text); text-decoration: none; border-radius: var(--radius-sm); } .sidebar-new-menu a:hover { background: var(--color-surface-alt); text-decoration: none; } /* NOT flex:1 — each nav group is its own