/* ═══════════════════════════════════════════════════════════════════ QDS · "Paper Ledger" UI theme (v1) Activated by (config app.ui_theme = ledger). Switch back with UI_THEME=prism in .env — nothing else changes. Warm paper surfaces, ink primary, terracotta accent, serif headlines. Loaded AFTER the Vite bundle + theme-fixes.css and unlayered, so plain selectors here win over Tailwind utilities. ═══════════════════════════════════════════════════════════════════ */ /* ── Tokens · light ─────────────────────────────────────────────── */ .ledger { --font-sans: 'DM Sans', 'Helvetica Neue', Arial, ui-sans-serif, system-ui, sans-serif; --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif; --color-primary: #1f1b16; --color-on-primary: #f6f2ea; --color-primary-container: #2b251f; --color-accent: #b5542c; --color-accent-soft: rgba(181, 84, 44, 0.12); --color-surface: #f6f2ea; --color-surface-container-lowest: #fffdf8; --color-surface-container-low: #f1ece2; --color-surface-container: #ebe4d6; --color-surface-container-high: #e3dccf; --color-surface-container-highest: #d9d1c2; --color-on-surface: #1f1b16; --color-on-surface-variant: #5f574c; --color-outline-variant: #e3dccf; --color-outline: #9a9184; --shadow-bento: 0 1px 2px rgba(31, 27, 22, 0.04), 0 8px 24px -16px rgba(31, 27, 22, 0.18); --shadow-prism: 0 8px 24px -16px rgba(31, 27, 22, 0.18); --shadow-indigo-glow: 0 8px 24px -14px rgba(31, 27, 22, 0.35); color-scheme: light; } /* ── Tokens · dark (specificity beats the plain `.dark {}` blocks) ── */ .ledger.dark { --color-primary: #c9683f; --color-on-primary: #fff8ef; --color-primary-container: #a4522f; --color-accent: #e0805a; --color-accent-soft: rgba(224, 128, 90, 0.16); --color-surface: #16130f; --color-surface-container-lowest: #1f1a15; --color-surface-container-low: #251f19; --color-surface-container: #2b251e; --color-surface-container-high: #342d25; --color-surface-container-highest: #3e362c; --color-on-surface: #f1eadf; --color-on-surface-variant: #b3a898; --color-outline-variant: #352e26; --color-outline: #7d7263; --shadow-bento: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -16px rgba(0, 0, 0, 0.6); --shadow-prism: 0 8px 24px -16px rgba(0, 0, 0, 0.6); --shadow-indigo-glow: 0 8px 24px -14px rgba(0, 0, 0, 0.6); color-scheme: dark; } /* ── Base ───────────────────────────────────────────────────────── */ .ledger body { font-family: var(--font-sans); letter-spacing: 0; background-color: var(--color-surface); color: var(--color-on-surface); } /* Kill the indigo page glow */ .ledger body.bg-surface, .ledger.dark body.bg-surface { background-image: none; } /* Serif headlines: h1 everywhere, h2 only when it is a real page heading (not the tiny uppercase card labels) */ .ledger h1 { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.005em; line-height: 1.08; text-transform: none; } .ledger h1.text-2xl { font-size: 2rem; } @media (min-width: 640px) { .ledger h1.sm\:text-3xl { font-size: 2.5rem; } } .ledger h1 em, .ledger h1 .accent { font-style: italic; color: var(--color-accent); } /* Selection */ .ledger ::selection { background: rgba(181, 84, 44, 0.22); color: inherit; } .ledger.dark ::selection { background: rgba(224, 128, 90, 0.3); } /* Focus ring — terracotta */ .ledger :where(a, button, [role="button"]):focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* Links that use text-primary keep ink; explicit accent helper */ .ledger .text-accent { color: var(--color-accent); } /* ── Sidebar ────────────────────────────────────────────────────── */ .ledger aside { background-color: var(--color-surface) !important; border-right: 1px solid var(--color-outline-variant) !important; } .ledger aside .bg-primary { border-radius: 0.5rem; } .ledger aside h2 { font-family: var(--font-serif); font-weight: 400; font-size: 1.35rem; letter-spacing: 0; color: var(--color-on-surface); } .ledger aside nav a { border-radius: 0.5rem; font-weight: 500; color: var(--color-on-surface-variant); letter-spacing: 0; } .ledger aside nav a:hover { background-color: var(--color-surface-container-low); color: var(--color-on-surface); } .ledger aside nav a svg { color: var(--color-outline); } .ledger aside nav a:hover svg { transform: none; color: var(--color-on-surface-variant); } .ledger .qds-nav-active, .ledger aside nav a.qds-nav-active { background: var(--color-surface-container); color: var(--color-on-surface); font-weight: 600; box-shadow: none; position: relative; } .ledger aside nav a.qds-nav-active svg { color: var(--color-accent); } .ledger aside nav a.qds-nav-active:hover { color: var(--color-on-surface); background: var(--color-surface-container-high); } .ledger aside .border-t { border-color: var(--color-outline-variant) !important; } .ledger aside .rounded-full.bg-slate-300, .ledger.dark aside .rounded-full.dark\:bg-slate-700 { background-color: var(--color-accent) !important; color: #fff; } .ledger aside p, .ledger aside .text-slate-500, .ledger aside .text-slate-900 { color: var(--color-on-surface-variant); } .ledger aside .text-slate-900, .ledger.dark aside .dark\:text-slate-100 { color: var(--color-on-surface); } /* ── Header bar ─────────────────────────────────────────────────── */ .ledger main > header { background-color: color-mix(in srgb, var(--color-surface) 86%, transparent) !important; border-bottom: 1px solid var(--color-outline-variant) !important; color: var(--color-on-surface-variant); } .ledger main > header input { background-color: var(--color-surface-container-lowest); border-radius: 9999px; --tw-ring-color: var(--color-outline-variant); } .ledger main > header input:focus { --tw-ring-color: var(--color-accent); } .ledger main > header button { border-radius: 9999px; color: var(--color-on-surface-variant); } .ledger main > header button:hover { background-color: var(--color-surface-container) !important; color: var(--color-on-surface) !important; } .ledger main > header .ring-slate-50, .ledger.dark main > header .dark\:ring-slate-950 { --tw-ring-color: var(--color-surface); } /* ── Cards / structure: hairline instead of blur shadow ─────────── */ .ledger .ring-outline-variant\/10, .ledger .ring-outline-variant\/20 { --tw-ring-color: var(--color-outline-variant); } .ledger .shadow-sm { --tw-shadow: 0 1px 2px rgba(31, 27, 22, 0.03); } .ledger.dark .shadow-sm { --tw-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .ledger .bento-card { border-radius: 0.875rem; } .ledger .prism-glass { background-color: color-mix(in srgb, var(--color-surface-container-lowest) 88%, transparent); border-color: var(--color-outline-variant); } .ledger .qds-stat:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -16px rgba(31, 27, 22, 0.35); } .ledger.dark .qds-stat:hover { box-shadow: 0 12px 26px -14px rgba(0, 0, 0, 0.7); } .ledger .qds-stat .text-2xl { font-family: var(--font-serif); font-weight: 400; font-size: 2.25rem; letter-spacing: -0.01em; line-height: 1; } /* Stat icon tiles: flat, no gradients */ .ledger .qds-stat-icon { border-radius: 0.65rem; box-shadow: none; } .ledger .qds-stat-icon-primary { background: var(--color-surface-container-high); color: var(--color-on-surface); } .ledger .qds-stat-icon-success { background: #2f7a4b; color: #fff; } .ledger .qds-stat-icon-attention { background: var(--color-accent); color: #fff; } /* Trend pills */ .ledger .stat-trend-neutral { background: var(--color-surface-container); --tw-ring-color: var(--color-outline-variant); } .ledger .stat-trend-success { color: #2f7a4b; background: rgba(47, 122, 75, 0.12); --tw-ring-color: rgba(47, 122, 75, 0.25); } .ledger.dark .stat-trend-success { color: #7fcf9a; background: rgba(47, 122, 75, 0.2); --tw-ring-color: rgba(127, 207, 154, 0.25); } .ledger .stat-trend-attention { color: var(--color-accent); background: var(--color-accent-soft); --tw-ring-color: rgba(181, 84, 44, 0.3); } .ledger.dark .stat-trend-attention { color: var(--color-accent); } /* ── Buttons: pills ─────────────────────────────────────────────── */ .ledger .prism-btn-primary { border-radius: 9999px; background-image: none; background-color: var(--color-primary); color: var(--color-on-primary); box-shadow: 0 6px 16px -10px rgba(31, 27, 22, 0.5); letter-spacing: 0.01em; } .ledger .prism-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -12px rgba(31, 27, 22, 0.55); background-color: var(--color-primary-container); } .ledger.dark .prism-btn-primary { box-shadow: 0 6px 16px -10px rgba(0, 0, 0, 0.6); } .ledger .prism-btn-secondary { border-radius: 9999px; background-color: transparent; border-color: var(--color-outline); box-shadow: none; } .ledger .prism-btn-secondary:hover { background-color: var(--color-surface-container-low); border-color: var(--color-on-surface-variant); } .ledger .prism-btn-on-primary-surface { border-radius: 9999px; background-color: var(--color-surface-container-lowest); color: var(--color-on-surface); --tw-ring-color: transparent; box-shadow: 0 6px 16px -10px rgba(0, 0, 0, 0.5); } .ledger .prism-btn-on-primary-surface svg { color: var(--color-accent); } .ledger .prism-btn-on-primary-surface:hover { background-color: #fff; } .ledger .qds-hero-btn { border-radius: 9999px; background: var(--color-surface-container-lowest); color: var(--color-on-surface); box-shadow: none; } .ledger .qds-hero-btn-ghost { border-radius: 9999px; } .ledger .qds-btn-sm { border-radius: 9999px !important; } /* ── Inputs ─────────────────────────────────────────────────────── */ .ledger .prism-input { border-radius: 0.65rem; background-color: var(--color-surface-container-lowest); --tw-ring-color: var(--color-outline-variant); font-weight: 500; } .ledger .prism-input:focus { --tw-ring-color: var(--color-accent); background-color: var(--color-surface-container-lowest); } .ledger.dark .prism-input { --tw-ring-color: var(--color-outline-variant); } .ledger.dark .prism-input:focus { --tw-ring-color: var(--color-accent); } /* ── Hero banners: ink block with paper text, serif headline ────── */ .ledger .qds-hero, .ledger .selection-on-inverse.bg-primary, .ledger.dark .qds-hero, .ledger.dark .selection-on-inverse.bg-primary { background-color: #1f1b16; background-image: none; border-radius: 1rem; box-shadow: 0 16px 40px -24px rgba(31, 27, 22, 0.6); --tw-ring-color: rgba(255, 255, 255, 0.06); } .ledger.dark .qds-hero, .ledger.dark .selection-on-inverse.bg-primary { background-color: #221c16; box-shadow: 0 16px 40px -24px rgba(0, 0, 0, 0.8); } .ledger .qds-hero .text-on-primary, .ledger .selection-on-inverse.bg-primary .text-on-primary, .ledger.dark .qds-hero .text-on-primary, .ledger.dark .selection-on-inverse.bg-primary .text-on-primary { color: #f6f2ea; } .ledger .qds-hero [class*="text-on-primary/"], .ledger .selection-on-inverse.bg-primary [class*="text-on-primary/"] { color: rgba(246, 242, 234, 0.72); } .ledger .qds-hero-grid { display: none; } .ledger .qds-hero h1 { font-size: clamp(1.9rem, 2.6vw, 2.6rem); } .ledger .qds-hero h1 .opacity-45 { color: var(--color-accent); opacity: 1; font-style: italic; } .ledger .qds-hero-clock-time { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.9rem, 2.8vw, 2.4rem); color: #f6f2ea; } .ledger .qds-hero-clock-date { color: rgba(246, 242, 234, 0.6); } .ledger .qds-hero .absolute.bg-on-primary\/10 { background: rgba(181, 84, 44, 0.25); } .ledger .qds-hero .badge-success, .ledger .qds-hero .badge-error, .ledger .qds-hero .badge-muted, .ledger .qds-hero .badge-load-booked, .ledger .qds-hero .badge-load-transit, .ledger .qds-hero .badge-load-delivered { background: rgba(246, 242, 234, 0.1); color: #f6f2ea; box-shadow: inset 0 0 0 1px rgba(246, 242, 234, 0.2); } .ledger.dark .selection-on-inverse .bg-on-primary, .ledger.dark .prism-btn-on-primary-surface { background-color: rgba(246, 242, 234, 0.1); color: #f6f2ea; } .ledger.dark .selection-on-inverse .bg-on-primary:hover, .ledger.dark .prism-btn-on-primary-surface:hover { background-color: rgba(246, 242, 234, 0.16); } .ledger.dark .prism-btn-on-primary-surface svg { color: var(--color-accent); } /* ── Load pipeline: warm, flat segments ─────────────────────────── */ .ledger .qds-pipe { height: 0.6rem; background: var(--color-surface-container); } .ledger .qds-pipe-seg + .qds-pipe-seg { border-left-color: var(--color-surface-container-lowest); } .ledger .qds-pipe-booked { background: #8c7b6b; } .ledger .qds-pipe-transit { background: var(--color-accent); } .ledger .qds-pipe-delivered { background: #2f6f8f; } .ledger .qds-pipe-completed { background: #2f7a4b; } .ledger .qds-pipe-cancelled { background: #9c3a3a; } .ledger .qds-pipe-chip { border-radius: 9999px; box-shadow: inset 0 0 0 1px var(--color-outline-variant); } .ledger .qds-pipe-chip:hover { color: var(--color-on-surface); box-shadow: inset 0 0 0 1px var(--color-outline); } /* dots in the pipeline legend are inline styles from blade (indigo etc.) — recolor by order */ .ledger .qds-pipe-chip:nth-child(1) .dot { background: #8c7b6b !important; } .ledger .qds-pipe-chip:nth-child(2) .dot { background: var(--color-accent) !important; } .ledger .qds-pipe-chip:nth-child(3) .dot { background: #2f6f8f !important; } .ledger .qds-pipe-chip:nth-child(4) .dot { background: #2f7a4b !important; } .ledger .qds-pipe-chip:nth-child(5) .dot { background: #9c3a3a !important; } /* ── Badges: keep semantics, warm the neutrals ──────────────────── */ .ledger .badge-success, .ledger .badge-transit, .ledger .badge-error, .ledger .badge-warning, .ledger .badge-muted, .ledger .badge-load-booked, .ledger .badge-load-transit, .ledger .badge-load-delivered { border-radius: 9999px; } .ledger .badge-muted { background: var(--color-surface-container-high); } .ledger .badge-load-booked { color: #5a4a3c; background: rgba(140, 123, 107, 0.2); } .ledger.dark .badge-load-booked { color: #d5c6b5; background: rgba(140, 123, 107, 0.28); } .ledger .badge-load-transit { color: #8f3f1f; background: var(--color-accent-soft); } .ledger.dark .badge-load-transit { color: #f0a684; } .ledger .badge-load-delivered { color: #21556e; background: rgba(47, 111, 143, 0.14); } .ledger.dark .badge-load-delivered { color: #8ec5df; background: rgba(47, 111, 143, 0.24); } .ledger .badge-success { color: #2f7a4b; background: rgba(47, 122, 75, 0.14); } .ledger.dark .badge-success { color: #7fcf9a; } /* ── Tables ─────────────────────────────────────────────────────── */ .ledger main thead th { font-weight: 600; letter-spacing: 0.08em; color: var(--color-on-surface-variant); } .ledger main tbody tr { border-color: var(--color-outline-variant); } .ledger main tbody tr:hover { background-color: var(--color-surface-container-low); } .ledger .divide-outline-variant\/10 > :not([hidden]) ~ :not([hidden]), .ledger .divide-outline-variant\/20 > :not([hidden]) ~ :not([hidden]) { border-color: var(--color-outline-variant); } .ledger .border-outline-variant\/10, .ledger .border-outline-variant\/20 { border-color: var(--color-outline-variant); } /* ── Misc chrome ────────────────────────────────────────────────── */ .ledger .qds-impersonate-bar { background: var(--color-accent); box-shadow: none; } .ledger .qds-impersonate-leave { color: var(--color-accent); } .ledger .qds-toast { border-radius: 9999px; } .ledger .qds-crumbs a:hover { color: var(--color-accent); } .ledger .qds-timeline-step.is-current .qds-timeline-label, .ledger .qds-timeline-step.is-done:not(:last-child)::after { color: var(--color-accent); background-color: var(--color-accent); } .ledger .qds-timeline-step.is-current .qds-timeline-label { background: transparent; } .ledger .custom-scrollbar::-webkit-scrollbar-thumb { background: var(--color-outline-variant); } .ledger .prism-nav-active { color: var(--color-on-surface); box-shadow: none; --tw-ring-color: var(--color-outline-variant); } .ledger .hover\:text-primary:hover { color: var(--color-accent); } .ledger .text-primary.ring-primary\/25 { color: var(--color-accent); --tw-ring-color: rgba(181, 84, 44, 0.35); } .ledger .text-primary.ring-primary\/25:hover { background: var(--color-accent-soft); } /* Flatpickr accent */ .ledger .flatpickr-day.selected, .ledger .flatpickr-day.startRange, .ledger .flatpickr-day.endRange, .ledger .flatpickr-day.selected:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); } .ledger .flatpickr-day.today { border-color: var(--color-accent); } .ledger.dark .flatpickr-calendar { background: var(--color-surface-container-low); } /* ── Login page ─────────────────────────────────────────────────── */ .ledger .auth-split, .ledger.dark .auth-split { background-color: var(--color-surface); } .ledger .brand-panel, .ledger.dark .brand-panel { background-color: #1f1b16; background-image: radial-gradient(900px 500px at 110% 110%, rgba(181, 84, 44, 0.28), transparent 60%); color: #f6f2ea; } .ledger .brand-panel h1, .ledger .brand-panel h2 { font-family: var(--font-serif); font-weight: 400; } .ledger .brand-grid { opacity: 0.25; } .ledger .brand-sub, .ledger .brand-feature-desc { color: rgba(246, 242, 234, 0.6); } .ledger .brand-chip .dot { background: var(--color-accent); } .ledger .brand-logo-box { background: var(--color-accent); border-color: transparent; } .ledger .mobile-logo-box, .ledger.dark .mobile-logo-box { background: #1f1b16; box-shadow: none; } .ledger .premium-input, .ledger.dark .premium-input { background: var(--color-surface-container-lowest); border-color: var(--color-outline-variant); border-radius: 0.75rem; color: var(--color-on-surface); font-family: var(--font-sans); } .ledger .premium-input:focus, .ledger.dark .premium-input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 4px var(--color-accent-soft); background: var(--color-surface-container-lowest); } .ledger .premium-input::placeholder, .ledger.dark .premium-input::placeholder { color: var(--color-outline); } .ledger .input-icon, .ledger.dark .input-icon { color: var(--color-outline); } .ledger .signin-btn, .ledger.dark .signin-btn { background: var(--color-primary); color: var(--color-on-primary); border-radius: 9999px; box-shadow: 0 10px 24px -14px rgba(31, 27, 22, 0.6); } .ledger .form-panel h1, .ledger .form-panel h2 { font-family: var(--font-serif); font-weight: 400; } .ledger .form-panel, .ledger.dark .form-panel { color: var(--color-on-surface); font-family: var(--font-sans); } /* Logout confirm card */ .ledger .auth-wrapper, .ledger.dark .auth-wrapper { background-color: var(--color-surface); } .ledger .login-card, .ledger.dark .login-card { background: var(--color-surface-container-lowest); border-color: var(--color-outline-variant); border-radius: 1rem; box-shadow: 0 16px 40px -28px rgba(31, 27, 22, 0.4); } /* ═══════════════════════════════════════════ v2 — structural pieces (editorial hero, figures strip, grouped nav, chrome-less pipeline) ═══════════════════════════════════════════ */ /* Editorial hero: no box — type on paper */ .lg-hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 2.5rem; padding: 0.75rem 0 0.25rem; } .lg-hero-main { min-width: 0; max-width: 46rem; } .lg-eyebrow { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-on-surface-variant); margin-bottom: 0.75rem; } .lg-hero-title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1.08; letter-spacing: -0.005em; color: var(--color-on-surface); } .lg-hero-title em { font-style: italic; color: var(--color-accent); } .lg-hero-title .lg-quiet { color: var(--color-on-surface-variant); } .lg-hero-side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.9rem; } .lg-hero-time { font-family: var(--font-serif); font-size: 2rem; line-height: 1; color: var(--color-on-surface); font-variant-numeric: tabular-nums; } .lg-hero-actions { display: flex; gap: 0.6rem; } @media (max-width: 640px) { .lg-hero-side { align-items: flex-start; } .lg-hero-time { display: none; } } /* Pills */ .lg-pill { display: inline-flex; align-items: center; justify-content: center; height: 2.5rem; padding: 0 1.25rem; border-radius: 9999px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.01em; cursor: pointer; text-decoration: none; transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; } .lg-pill:hover { transform: translateY(-1px); } .lg-pill-ink { background: var(--color-primary); color: var(--color-on-primary); box-shadow: 0 6px 16px -10px rgba(31, 27, 22, 0.5); } .lg-pill-ink:hover { background: var(--color-primary-container); } .lg-pill-ghost { background: transparent; color: var(--color-on-surface); border: 1px solid var(--color-outline); } .lg-pill-ghost:hover { background: var(--color-surface-container-low); } /* Figures strip: ruled columns, serif numerals */ .lg-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); border-top: 1.5px solid var(--color-on-surface); border-bottom: 1px solid var(--color-outline-variant); background: transparent; } .lg-figure { display: flex; flex-direction: column; gap: 0.55rem; padding: 1.35rem 1.5rem 1.35rem 0; text-decoration: none; color: inherit; border-right: 1px solid var(--color-outline-variant); } .lg-figure + .lg-figure { padding-left: 1.5rem; } .lg-figure:last-child { border-right: none; padding-right: 0; } @media (max-width: 900px) { .lg-figure { border-right: none; border-bottom: 1px solid var(--color-outline-variant); padding-left: 0 !important; } .lg-figure:last-child { border-bottom: none; } } a.lg-figure:hover .lg-figure-value { color: var(--color-accent); } .lg-figure-label { font-size: 0.78rem; font-weight: 500; color: var(--color-on-surface-variant); } .lg-figure-value { font-family: var(--font-serif); font-size: 2.6rem; line-height: 1; letter-spacing: -0.01em; color: var(--color-on-surface); font-variant-numeric: tabular-nums; transition: color 0.15s ease; } .lg-figure-attention .lg-figure-value { color: var(--color-accent); } .lg-figure-trend { font-size: 0.75rem; font-weight: 500; color: var(--color-on-surface-variant); } .lg-figure-trend.is-good { color: #2f7a4b; } .ledger.dark .lg-figure-trend.is-good { color: #7fcf9a; } .lg-figure-trend.is-warn { color: var(--color-accent); font-weight: 600; } /* Pipeline: shed the card, sit flat on paper */ .ledger .qds-pipeline-card { background: transparent; box-shadow: none; --tw-ring-color: transparent; padding-left: 0; padding-right: 0; padding-top: 0.25rem; border-radius: 0; } .ledger .qds-pipeline-card h2 { font-family: var(--font-serif); font-weight: 400; font-size: 1.3rem; text-transform: none; letter-spacing: 0; } .ledger .qds-pipe { background: var(--color-surface-container-high); } .ledger .qds-pipe-seg + .qds-pipe-seg { border-left-color: var(--color-surface); } /* Grouped sidebar */ .lg-nav-section { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-outline); padding: 1.1rem 1rem 0.35rem; } .ledger aside nav > a:first-of-type { margin-bottom: 0.25rem; } /* ═══ v3 — WHM-style nav groups ═══ */ .qds-nav-tools { display: flex; gap: 8px; margin-bottom: 12px; } .qds-nav-tool { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; border-radius: 8px; border: 1px solid var(--color-outline-variant); background: var(--color-surface-container-lowest); color: var(--color-on-surface-variant); font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.15s ease; } .qds-nav-tool:hover { border-color: var(--color-outline); color: var(--color-on-surface); } .qds-nav-group { background: transparent; border: 0; text-align: left; padding: 10px 10px 6px; margin-top: 4px; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--color-on-surface); letter-spacing: 0; } .qds-nav-group svg { color: var(--color-outline); } .qds-nav-group:hover svg { color: var(--color-accent); } .ledger aside nav a.qds-nav-child { padding-left: 2.1rem; } /* legacy tiny-caps section label no longer used */ /* v4 — secondary buttons on dark hero banners were ink-on-ink (invisible) */ .ledger .qds-hero .prism-btn-secondary, .ledger .selection-on-inverse .prism-btn-secondary, .ledger.dark .qds-hero .prism-btn-secondary, .ledger.dark .selection-on-inverse .prism-btn-secondary { color: #f6f2ea; border-color: rgba(246, 242, 234, 0.35); background: rgba(246, 242, 234, 0.08); } .ledger .qds-hero .prism-btn-secondary:hover, .ledger .selection-on-inverse .prism-btn-secondary:hover, .ledger.dark .qds-hero .prism-btn-secondary:hover, .ledger.dark .selection-on-inverse .prism-btn-secondary:hover { background: rgba(246, 242, 234, 0.16); border-color: rgba(246, 242, 234, 0.55); } .ledger .qds-hero .prism-btn-secondary svg, .ledger .selection-on-inverse .prism-btn-secondary svg { color: #f6f2ea; } /* ═══ v5 — two-factor challenge page ═══ */ .ledger .auth-wrapper, .ledger.dark .auth-wrapper { background-color: var(--color-surface); } .ledger body { font-family: var(--font-sans); } .ledger .tfa-card, .ledger.dark .tfa-card { background: var(--color-surface-container-lowest); border-color: var(--color-outline-variant); border-radius: 1rem; box-shadow: 0 20px 50px -30px rgba(31, 27, 22, 0.4); } .ledger .tfa-card h1 { font-family: var(--font-serif); font-weight: 400; font-size: 1.45rem; letter-spacing: 0; color: var(--color-on-surface); } .ledger .tfa-card .text-slate-500, .ledger .tfa-card .text-slate-400, .ledger.dark .tfa-card .dark\:text-slate-400, .ledger.dark .tfa-card .dark\:text-slate-500 { color: var(--color-on-surface-variant); } .ledger .tfa-card .text-slate-700, .ledger .tfa-card .text-slate-900, .ledger.dark .tfa-card .dark\:text-slate-200, .ledger.dark .tfa-card .dark\:text-white { color: var(--color-on-surface); } .ledger .tfa-icon, .ledger.dark .tfa-icon { background: var(--color-primary); color: var(--color-on-primary); border-radius: 0.8rem; box-shadow: none; } .ledger .tfa-code-input, .ledger.dark .tfa-code-input { background: var(--color-surface-container-low); border-color: var(--color-outline-variant); color: var(--color-on-surface); border-radius: 0.75rem; font-family: var(--font-sans); } .ledger .tfa-code-input:focus, .ledger.dark .tfa-code-input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 4px var(--color-accent-soft); background: var(--color-surface-container-lowest); } .ledger .tfa-submit, .ledger.dark .tfa-submit { background: var(--color-primary); color: var(--color-on-primary); border-radius: 9999px; box-shadow: 0 10px 24px -14px rgba(31, 27, 22, 0.6); } .ledger .tfa-submit:hover { box-shadow: 0 14px 28px -14px rgba(31, 27, 22, 0.65); } .ledger .tfa-footer { border-top-color: var(--color-outline-variant); } .ledger.dark .tfa-footer { border-top-color: var(--color-outline-variant); } .ledger .tfa-card a.text-primary { color: var(--color-accent); } .ledger .tfa-card input[type="checkbox"] { accent-color: var(--color-accent); } .ledger .tfa-alert { border-radius: 0.75rem; }