/* ========================================================================== theme.css — Car Description Writer design system Spec-sheet aesthetic: paper + graphite ink + racing green, tabular data, heavy section rules (borrowed from the Monroney window sticker). Light + dark themes. No build step; plain CSS custom properties. Theme resolution: - default: light - @media (prefers-color-scheme: dark) applies dark unless forces light - forces dark ========================================================================== */ /* -------------------------------------------------------------------------- 1. TOKENS -------------------------------------------------------------------------- */ :root { /* Type */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: "Avenir Next", "Segoe UI Variable Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, "Liberation Mono", monospace; /* Type scale (1.20 ratio, rem-based) */ --text-xs: 0.75rem; /* 12px — eyebrows, table meta */ --text-sm: 0.875rem; /* 14px — secondary, table body */ --text-md: 1rem; /* 16px — body */ --text-lg: 1.1875rem; /* 19px — card titles */ --text-xl: 1.4375rem; /* 23px — page titles */ --text-2xl: 1.75rem; /* 28px — hero headings */ --text-3xl: 2.125rem; /* 34px — display */ --leading-tight: 1.2; --leading-normal: 1.5; --tracking-wide: 0.08em; /* eyebrows / uppercase labels */ /* Spacing (4px grid) */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; /* Radii — engineered, not pill */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; /* Motion */ --ease-out: cubic-bezier(0.2, 0.8, 0.3, 1); --dur-fast: 120ms; --dur-med: 200ms; --dur-slow: 320ms; /* Z layers */ --z-nav: 100; --z-modal: 1000; --z-toast: 1100; /* Signature: heavy spec-sheet rule weight */ --rule-heavy: 3px; /* ------- LIGHT PALETTE (default) ------- */ color-scheme: light; --color-bg: #F5F6F4; /* paper */ --color-surface: #FFFFFF; /* card */ --color-surface-sunken: #EDEFEC; /* wells, table header */ --color-ink: #1A201C; /* primary text + heavy rules */ --color-text: #1A201C; --color-text-secondary: #4C5751; --color-text-muted: #69756D; /* placeholders, meta — still AA */ --color-border: #D7DDD8; --color-border-strong: #AEB8B1; --color-accent: #166B45; /* racing green — buttons, active nav */ --color-accent-hover: #0F5434; --color-accent-text: #136A43; /* links, accent text on surfaces */ --color-accent-soft: #E3F0E8; /* tinted fills (badges, selected rows) */ --color-on-accent: #FFFFFF; --color-danger: #B3261E; --color-danger-hover: #8F1E18; --color-danger-soft: #FBEAE9; --color-on-danger: #FFFFFF; --color-warn-text: #7A5800; --color-warn-soft: #FBF1DC; --color-info-text: #1D5A8A; --color-info-soft: #E4EFF7; --color-focus: #166B45; --color-backdrop: rgba(20, 25, 22, 0.55); --color-skeleton: #E2E6E2; --color-skeleton-sheen: #F1F3F0; --shadow-sm: 0 1px 2px rgba(20, 25, 22, 0.08); --shadow-md: 0 2px 8px rgba(20, 25, 22, 0.10), 0 1px 2px rgba(20, 25, 22, 0.06); --shadow-lg: 0 12px 32px rgba(20, 25, 22, 0.18), 0 2px 8px rgba(20, 25, 22, 0.08); } /* ------- DARK PALETTE (shared values via utility custom-prop block) ------- */ /* Duplicated in both the media query and the data-theme override because CSS cannot combine them without a preprocessor. Keep the two blocks in sync. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --color-bg: #111514; --color-surface: #181D1A; --color-surface-sunken: #131816; --color-ink: #E7ECE8; --color-text: #E7ECE8; --color-text-secondary: #A9B5AD; --color-text-muted: #8A968E; --color-border: #2B332E; --color-border-strong: #46514A; --color-accent: #2E9A66; --color-accent-hover: #3FBF83; --color-accent-text: #57C98F; --color-accent-soft: #1B2E24; --color-on-accent: #0C130F; --color-danger: #C94F46; --color-danger-hover: #DB6A61; --color-danger-soft: #33201E; --color-on-danger: #140807; --color-warn-text: #E4B95B; --color-warn-soft: #2E2717; --color-info-text: #7FB6DF; --color-info-soft: #17242E; --color-focus: #57C98F; --color-backdrop: rgba(0, 0, 0, 0.65); --color-skeleton: #222A25; --color-skeleton-sheen: #2B342E; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4); } } :root[data-theme="dark"] { color-scheme: dark; --color-bg: #111514; --color-surface: #181D1A; --color-surface-sunken: #131816; --color-ink: #E7ECE8; --color-text: #E7ECE8; --color-text-secondary: #A9B5AD; --color-text-muted: #8A968E; --color-border: #2B332E; --color-border-strong: #46514A; --color-accent: #2E9A66; --color-accent-hover: #3FBF83; --color-accent-text: #57C98F; --color-accent-soft: #1B2E24; --color-on-accent: #0C130F; --color-danger: #C94F46; --color-danger-hover: #DB6A61; --color-danger-soft: #33201E; --color-on-danger: #140807; --color-warn-text: #E4B95B; --color-warn-soft: #2E2717; --color-info-text: #7FB6DF; --color-info-soft: #17242E; --color-focus: #57C98F; --color-backdrop: rgba(0, 0, 0, 0.65); --color-skeleton: #222A25; --color-skeleton-sheen: #2B342E; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4); } /* -------------------------------------------------------------------------- 2. RESET / BASE -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; height: 100%; } body { min-height: 100%; font-family: var(--font-sans); font-size: var(--text-md); line-height: var(--leading-normal); color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; } img, svg, video, canvas { display: block; max-width: 100%; } /* The hidden attribute must win over component display rules (.alert etc.) */ [hidden] { display: none !important; } input, button, textarea, select { font: inherit; color: inherit; } h1, h2, h3, h4 { font-family: var(--font-display); line-height: var(--leading-tight); font-weight: 650; letter-spacing: -0.01em; overflow-wrap: break-word; } h1 { font-size: var(--text-2xl); } h2 { font-size: var(--text-xl); } h3 { font-size: var(--text-lg); } h4 { font-size: var(--text-md); } p { overflow-wrap: break-word; } a { color: var(--color-accent-text); text-decoration: none; } a:hover { text-decoration: underline; } code, kbd, .mono { font-family: var(--font-mono); font-size: 0.9em; } /* Numbers line up like a spec sheet everywhere data lives */ table, .tabular { font-variant-numeric: tabular-nums; } :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-sm); } ::placeholder { color: var(--color-text-muted); opacity: 1; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Skip link for keyboard users (place first in ) */ .skip-link { position: absolute; top: -100%; left: var(--space-4); z-index: calc(var(--z-nav) + 1); padding: var(--space-2) var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); } .skip-link:focus { top: var(--space-2); } /* -------------------------------------------------------------------------- 3. TYPOGRAPHIC DEVICES -------------------------------------------------------------------------- */ /* Eyebrow: uppercase section label, the Monroney header voice */ .eyebrow { display: block; font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-secondary); } .text-secondary { color: var(--color-text-secondary); } .text-muted { color: var(--color-text-muted); } .text-danger { color: var(--color-danger); } .text-sm { font-size: var(--text-sm); } .divider { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-4) 0; } /* -------------------------------------------------------------------------- 4. BUTTONS -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0.5625rem var(--space-4); min-height: 2.5rem; border: 1px solid transparent; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 600; line-height: 1.2; cursor: pointer; user-select: none; white-space: nowrap; text-decoration: none; transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .btn:hover { text-decoration: none; } .btn:disabled, .btn[aria-busy="true"] { opacity: 0.6; cursor: not-allowed; } .btn-primary { background: var(--color-accent); color: var(--color-on-accent); } .btn-primary:hover:not(:disabled) { background: var(--color-accent-hover); } .btn-secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border-strong); } .btn-secondary:hover:not(:disabled) { border-color: var(--color-text-secondary); background: var(--color-surface-sunken); } .btn-ghost { background: transparent; color: var(--color-text-secondary); } .btn-ghost:hover:not(:disabled) { background: var(--color-surface-sunken); color: var(--color-text); } .btn-danger { background: var(--color-danger); color: var(--color-on-danger); } .btn-danger:hover:not(:disabled) { background: var(--color-danger-hover); } .btn-sm { min-height: 2rem; padding: var(--space-1) var(--space-3); font-size: var(--text-xs); } .btn-block { display: flex; width: 100%; } /* Icon-only button (theme toggle, close, table row actions) */ .btn-icon { min-height: 2.25rem; min-width: 2.25rem; padding: var(--space-1); } /* Busy buttons show an inline spinner via ui.js; hide their label spinner gap */ .btn .spinner { width: 1em; height: 1em; border-width: 2px; } /* -------------------------------------------------------------------------- 5. FORMS -------------------------------------------------------------------------- */ .field { margin-bottom: var(--space-4); } .label { display: block; margin-bottom: var(--space-1); font-size: var(--text-sm); font-weight: 600; color: var(--color-text); } .label .label-optional { font-weight: 400; color: var(--color-text-muted); } .input, .select, .textarea { display: block; width: 100%; padding: 0.5625rem var(--space-3); min-height: 2.5rem; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); transition: border-color var(--dur-fast) var(--ease-out); } .input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -1px; border-color: var(--color-focus); } .input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--color-danger); } .input:disabled, .select:disabled, .textarea:disabled { background: var(--color-surface-sunken); color: var(--color-text-muted); cursor: not-allowed; } .textarea { min-height: 6rem; resize: vertical; } .field-hint { margin-top: var(--space-1); font-size: var(--text-xs); color: var(--color-text-secondary); } .field-error { margin-top: var(--space-1); font-size: var(--text-xs); font-weight: 600; color: var(--color-danger); } /* Input with trailing action (e.g. show/hide password) */ .input-group { position: relative; } .input-group .input { padding-right: 3rem; } .input-group .input-group-btn { position: absolute; top: 50%; right: var(--space-1); transform: translateY(-50%); min-height: 2rem; min-width: 2rem; } /* -------------------------------------------------------------------------- 6. CARDS -------------------------------------------------------------------------- */ .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } /* Signature: spec-sheet card — heavy ink rule across the top */ .card-spec { border-top: var(--rule-heavy) solid var(--color-ink); } .card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); } .card-body { padding: var(--space-5); } .card-footer { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border); } @media (max-width: 480px) { .card-header, .card-footer { padding-inline: var(--space-4); } .card-body { padding: var(--space-4); } } /* -------------------------------------------------------------------------- 7. TABLES -------------------------------------------------------------------------- */ /* Always wrap wide tables:
… */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--color-border); border-radius: var(--radius-md); } .table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } .table th { text-align: left; font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-secondary); background: var(--color-surface-sunken); padding: var(--space-2) var(--space-3); border-bottom: 2px solid var(--color-border-strong); white-space: nowrap; } .table td { padding: var(--space-3); border-bottom: 1px solid var(--color-border); vertical-align: middle; } .table tbody tr:last-child td { border-bottom: 0; } .table tbody tr:hover { background: var(--color-surface-sunken); } .table .td-num { text-align: right; } .table .td-actions { text-align: right; white-space: nowrap; } /* -------------------------------------------------------------------------- 8. BADGES (roles, statuses) -------------------------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0.125rem var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.02em; background: var(--color-surface-sunken); color: var(--color-text-secondary); border: 1px solid var(--color-border); } .badge-success { background: var(--color-accent-soft); color: var(--color-accent-text); border-color: transparent; } .badge-warn { background: var(--color-warn-soft); color: var(--color-warn-text); border-color: transparent; } .badge-danger { background: var(--color-danger-soft); color: var(--color-danger); border-color: transparent; } .badge-info { background: var(--color-info-soft); color: var(--color-info-text); border-color: transparent; } /* -------------------------------------------------------------------------- 9. ALERTS (inline page-level messages) -------------------------------------------------------------------------- */ .alert { display: flex; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface-sunken); font-size: var(--text-sm); } .alert-success { background: var(--color-accent-soft); color: var(--color-accent-text); border-color: transparent; } .alert-warn { background: var(--color-warn-soft); color: var(--color-warn-text); border-color: transparent; } .alert-danger { background: var(--color-danger-soft); color: var(--color-danger); border-color: transparent; } .alert-info { background: var(--color-info-soft); color: var(--color-info-text); border-color: transparent; } /* -------------------------------------------------------------------------- 10. MODALS (built by ui.js modal()/confirmDialog()) -------------------------------------------------------------------------- */ .modal-backdrop { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: var(--color-backdrop); animation: fade-in var(--dur-med) var(--ease-out); } .modal { width: 100%; max-width: 32rem; max-height: min(85vh, 48rem); display: flex; flex-direction: column; background: var(--color-surface); border-radius: var(--radius-lg); border-top: var(--rule-heavy) solid var(--color-ink); box-shadow: var(--shadow-lg); animation: modal-in var(--dur-med) var(--ease-out); } .modal-lg { max-width: 46rem; } .modal-sm { max-width: 24rem; } .modal-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); } .modal-title { font-size: var(--text-lg); } .modal-body { padding: var(--space-5); overflow-y: auto; } .modal-footer { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border); } @keyframes fade-in { from { opacity: 0; } } @keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } } /* -------------------------------------------------------------------------- 11. TOASTS (built by ui.js toast()) -------------------------------------------------------------------------- */ .toast-region { position: fixed; bottom: var(--space-4); right: var(--space-4); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-2); max-width: min(24rem, calc(100vw - 2rem)); } .toast { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-left: var(--rule-heavy) solid var(--color-border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-md); font-size: var(--text-sm); animation: toast-in var(--dur-med) var(--ease-out); } .toast-success { border-left-color: var(--color-accent); } .toast-danger { border-left-color: var(--color-danger); } .toast-warn { border-left-color: var(--color-warn-text); } .toast-info { border-left-color: var(--color-info-text); } .toast .toast-close { margin-left: auto; } @keyframes toast-in { from { opacity: 0; transform: translateY(6px); } } /* -------------------------------------------------------------------------- 12. NAV / SIDEBAR SHELL (for converted app pages) -------------------------------------------------------------------------- */ .app-shell { display: flex; min-height: 100vh; } .sidebar { display: flex; flex-direction: column; width: 15rem; flex-shrink: 0; padding: var(--space-4); background: var(--color-surface); border-right: 1px solid var(--color-border); position: sticky; top: 0; height: 100vh; } .sidebar-brand { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); margin-bottom: var(--space-5); } .sidebar-nav { display: flex; flex-direction: column; gap: var(--space-1); flex: 1; } .nav-link { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); border-left: var(--rule-heavy) solid transparent; color: var(--color-text-secondary); font-size: var(--text-sm); font-weight: 600; text-decoration: none; } .nav-link:hover { background: var(--color-surface-sunken); color: var(--color-text); text-decoration: none; } .nav-link[aria-current="page"] { background: var(--color-accent-soft); color: var(--color-accent-text); border-left-color: var(--color-accent); } .main-content { flex: 1; min-width: 0; /* allow table-scroll children to shrink */ padding: var(--space-6); } @media (max-width: 768px) { .app-shell { flex-direction: column; } .sidebar { width: 100%; height: auto; position: static; flex-direction: row; align-items: center; border-right: 0; border-bottom: 1px solid var(--color-border); overflow-x: auto; } .sidebar-brand { margin-bottom: 0; } .sidebar-nav { flex-direction: row; } .nav-link { border-left: 0; border-bottom: var(--rule-heavy) solid transparent; } .nav-link[aria-current="page"] { border-bottom-color: var(--color-accent); } .main-content { padding: var(--space-4); } } /* -------------------------------------------------------------------------- 13. LOADING: SPINNER + SKELETON -------------------------------------------------------------------------- */ .spinner { display: inline-block; width: 1.25rem; height: 1.25rem; border: 3px solid var(--color-border); border-top-color: var(--color-accent); border-radius: 50%; animation: spin 0.7s linear infinite; } .spinner-lg { width: 2.5rem; height: 2.5rem; } @keyframes spin { to { transform: rotate(360deg); } } .skeleton { display: block; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--color-skeleton) 25%, var(--color-skeleton-sheen) 42%, var(--color-skeleton) 60%); background-size: 200% 100%; animation: skeleton-sheen 1.4s ease-in-out infinite; min-height: 1em; color: transparent; user-select: none; } @keyframes skeleton-sheen { from { background-position: 200% 0; } to { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .skeleton { animation: none; background: var(--color-skeleton); } } /* -------------------------------------------------------------------------- 14. EMPTY STATE -------------------------------------------------------------------------- */ .empty-state { padding: var(--space-7) var(--space-5); text-align: center; color: var(--color-text-secondary); } .empty-state .empty-state-title { font-weight: 650; color: var(--color-text); margin-bottom: var(--space-1); } .empty-state .btn { margin-top: var(--space-4); }