/* Design system extracted from tessfox's dashboard - a dark-first, Linear/Vercel-style SaaS look with a light-theme override, a card/grid layout system with no drag/drop customization (fixed, intentional layout), and a phone-width breakpoint pattern. Usage: include this file, apply data-theme="dark"|"light" on (see the inline anti-flash script at the bottom of this file's comment block), and build pages out of: .app-header (nav bar) -> .page-intro (per-page title+description) -> .section-label + .section-grid (named groups of .card elements) -> .card > .stat-grid > .stat-box (tile layout inside a card). */ :root { --bg: #0a0c11; --card: #12151d; --card-alt: #171b26; --border: #232838; --border-soft: #1b2130; --text: #e8eaf0; --muted: #8791a8; --accent: #38bdf8; --accent-2: #7c5cff; --accent-bg: rgba(56,189,248,0.12); --ok: #34d399; --ok-bg: rgba(52,211,153,0.14); --err: #f87171; --err-bg: rgba(248,113,113,0.14); --ok-text: #6ee7b7; --warn-text: #fbbf24; --err-text: #fca5a5; --focus-ring: rgba(255,255,255,0.35); } /* html[data-theme="light"], not a second :root block - an element+attribute selector reliably outranks a bare :root at equal specificity, so this can't lose a source-order tossup with the block above. */ html[data-theme="light"] { --bg: #e9ebf1; --card: #f6f7fa; --card-alt: #e8eaf0; --border: #d3d7e0; --border-soft: #dde0e8; --text: #23262f; --muted: #6b7280; --accent: #0284c7; --accent-2: #6d4aff; --accent-bg: rgba(2,132,199,0.10); --ok: #059669; --ok-bg: rgba(5,150,105,0.12); --err: #dc2626; --err-bg: rgba(220,38,38,0.12); --ok-text: #047857; --warn-text: #b45309; --err-text: #b91c1c; --focus-ring: rgba(0,0,0,0.3); } html[data-theme="light"] .card:hover { border-color: #b7bdca; } * { box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); margin: 0; padding: 24px 32px 60px; line-height: 1.5; min-height: 100vh; } .wrap { max-width: 1600px; margin: 0 auto; } h1 { font-size: 24px; font-weight: 700; margin: 0; letter-spacing: 0.2px; } .sub { color: var(--muted); margin: 2px 0 0; font-size: 13px; } /* --- Header: one bar (brand / primary nav / live trust signals), not three stacked rows - keeps the chrome to one consistent height regardless of how many pages/tabs the app grows to. --- */ .app-header { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 14px 20px; margin-bottom: 24px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; } .app-header-brand { display: flex; align-items: center; gap: 12px; } .brand-icon { width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0; } .brand-word { font-size: 17px; font-weight: 700; letter-spacing: 0.2px; line-height: 1.2; } .brand-caption { color: var(--muted); font-size: 11px; line-height: 1.2; } .app-nav { display: flex; gap: 4px; margin-left: 4px; } .app-nav button { display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 1px solid transparent; color: var(--muted); border-radius: 999px; padding: 8px 16px; } .app-nav button svg { width: 15px; height: 15px; } .app-nav button:hover { color: var(--text); background: var(--card-alt); } .app-nav button.active { background: var(--accent-bg); color: var(--accent); border-color: rgba(56,189,248,0.35); } .app-header-trust { display: flex; align-items: center; gap: 10px; margin-left: auto; } /* --- Page intro: one per page/tab, states what this page is for before showing any cards - reads as "a page with a job", not an unlabeled stack of widgets. --- */ .page-intro { margin: 4px 0 28px; } .page-intro h1 { display: flex; align-items: center; gap: 10px; } .page-intro p { color: var(--muted); margin: 6px 0 0; font-size: 14px; max-width: 640px; } .page-intro-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; } /* --- Section label + grid: groups a page's cards into named subsections instead of one same-weight stack. auto-fit + minmax means cards reflow on their own with zero JS position bookkeeping - no drag/resize layout system needed. --- */ .section-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 32px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); } .section-label:first-of-type { margin-top: 0; } .section-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; margin-bottom: 20px; align-items: start; } .section-grid .card.wide { grid-column: 1 / -1; } /* --- Card --- */ .card { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 22px; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; transition: border-color 0.25s ease, box-shadow 0.25s ease; } .card:hover { border-color: #2b3245; box-shadow: 0 18px 40px -26px rgba(0,0,0,0.8); } .card h2 { font-size: 15px; margin: 0 0 16px; display: flex; align-items: center; gap: 8px; font-weight: 600; letter-spacing: 0.15px; } .card h2 svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; } /* Content that can outgrow a card's natural height (tables, tab panes) scrolls internally instead of spilling past the card's border. */ .card-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; } /* --- Badge --- */ .badge { font-size: 11px; padding: 2px 9px; border-radius: 10px; font-weight: 600; background: var(--card-alt); color: var(--muted); border: 1px solid var(--border-soft); } .badge.ok { background: var(--ok-bg); color: var(--ok); border-color: rgba(52,211,153,0.3); } .badge.err { background: var(--err-bg); color: var(--err); border-color: rgba(248,113,113,0.3); } .badge.warn { background: rgba(251,191,36,0.14); color: var(--warn-text); border-color: rgba(251,191,36,0.3); } .badge.ok::before, .badge.err::before, .badge.warn::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; } .badge.ok::before { background: var(--ok); box-shadow: 0 0 6px rgba(52,211,153,0.7); } .badge.err::before { background: var(--err); box-shadow: 0 0 6px rgba(248,113,113,0.7); } .badge.warn::before { background: #fbbf24; box-shadow: 0 0 6px rgba(251,191,36,0.7); } /* --- Stat tiles inside a card --- */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; } .stat-category-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border-soft); } .stat-box { position: relative; border-radius: 10px; padding: 10px 12px; border: 1px solid var(--border-soft); background: var(--card-alt); } .stat-label { font-size: 12px; color: var(--muted); margin-bottom: 3px; display: flex; align-items: center; } .stat-value { font-size: 17px; font-weight: 700; } .stat-value-sub { font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 2px; } /* --- Buttons --- */ button { font: inherit; font-size: 13px; font-weight: 600; padding: 8px 15px; border-radius: 8px; border: 1px solid var(--border); background: var(--card-alt); color: var(--text); cursor: pointer; transition: border-color 0.15s, color 0.15s, box-shadow 0.15s; } button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 1px rgba(56,189,248,0.25); } button:disabled { opacity: 0.5; cursor: default; } button.warn { border-color: rgba(248,113,113,0.45); color: var(--err); } button.warn:hover:not(:disabled) { background: var(--err-bg); box-shadow: 0 0 0 1px rgba(248,113,113,0.3); } /* --- Tables --- */ table { width: 100%; border-collapse: collapse; font-size: 13px; } /* --- Footer --- */ .footer-note { text-align: center; color: var(--muted); font-size: 12px; line-height: 1.7; margin-top: 48px; padding: 20px 20px 4px; border-top: 1px solid var(--border); } /* ========================================================================= Phone-only fixes - everything below is scoped inside this max-width query, so it's purely additive and never touches the desktop rules above. Two lessons learned the hard way building tessfox's dashboard: 1. A fixed minmax() column minimum (e.g. 320px, used for .section-grid above) is wider than the usable content width on common 360-375px phones once body's side padding is subtracted - force a single column below the breakpoint instead of letting it overflow/pan. 2. Flex/grid items default to min-width:auto (their content's full unwrapped size), which silently defeats overflow-x:auto on a descendant unless the item itself gets min-width:0 - needed on both .card (for tables) and .app-nav (for a scrollable tab bar) below. ========================================================================= */ @media (max-width: 640px) { body { padding: 20px 14px 60px; } .section-grid { grid-template-columns: 1fr; } .card { min-width: 0; } .app-nav { min-width: 0; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; } table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } }