/* =========================================================================== eCommerce Health Check — Design System (single source of truth) --------------------------------------------------------------------------- HOW TO RESKIN: edit the tokens in :root below. Every component (buttons, inputs, badges, cards, tables…) is built from these variables, so changing a token cascades everywhere. No build step — this file is served statically; edit + refresh. See /styleguide for a live preview of every component. All classes are prefixed `hc-` to avoid collisions. The Filament admin panel is themed separately via its primary colour in AdminPanelProvider (matched to --hc-brand here). =========================================================================== */ :root { /* ---- Brand & surfaces (dark theme, matching the landing page) ---- */ --hc-bg: #0b1220; /* page background */ --hc-surface: #111a2e; /* cards / panels */ --hc-surface-2: #0e1626; /* nested / inset surfaces */ --hc-surface-3: #16213a; /* hover / raised */ --hc-line: #1f2c44; /* borders / dividers */ --hc-line-strong: #2b3b5c; --hc-text: #e6edf7; /* primary text */ --hc-muted: #93a4c0; /* secondary text */ --hc-faint: #64748b; /* tertiary / placeholders */ --hc-brand: #3b82f6; /* primary accent */ --hc-brand-strong:#2563eb; --hc-brand-2: #22d3ee; /* secondary accent (cyan) */ --hc-brand-soft: rgba(59,130,246,.14); --hc-brand-ring: rgba(59,130,246,.45); /* ---- RAG / status palette (single source for severity + bands) ---- */ --hc-good: #22c55e; --hc-good-soft: rgba(34,197,94,.14); --hc-low: #f59e0b; --hc-low-soft: rgba(245,158,11,.14); --hc-medium: #fb923c; --hc-medium-soft: rgba(251,146,60,.14); --hc-high: #ef4444; --hc-high-soft: rgba(239,68,68,.14); --hc-info: #38bdf8; --hc-info-soft: rgba(56,189,248,.14); /* ---- Typography ---- */ --hc-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif; --hc-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --hc-fs-xs: 12px; --hc-fs-sm: 13px; --hc-fs-md: 14.5px; --hc-fs-lg: 16px; --hc-fs-xl: 20px; --hc-fs-2xl: 26px; --hc-fs-3xl: 32px; --hc-lh: 1.55; /* ---- Shape & spacing ---- */ --hc-radius-sm: 7px; --hc-radius: 11px; --hc-radius-lg: 16px; --hc-radius-pill: 999px; --hc-space-1: 4px; --hc-space-2: 8px; --hc-space-3: 12px; --hc-space-4: 16px; --hc-space-5: 24px; --hc-space-6: 32px; --hc-space-7: 48px; /* ---- Elevation & motion ---- */ --hc-shadow-sm: 0 1px 2px rgba(0,0,0,.4); --hc-shadow: 0 12px 30px -12px rgba(0,0,0,.6); --hc-shadow-lg: 0 30px 80px -30px rgba(0,0,0,.7); --hc-ring: 0 0 0 3px var(--hc-brand-ring); --hc-ease: .15s ease; /* control sizing */ --hc-control-h: 40px; --hc-control-pad: 0 14px; } /* --------------------------------------------------------------------------- Scope: apply .hc-app to (or a wrapper) for base background + text. Component classes work anywhere. --------------------------------------------------------------------------- */ .hc-app { margin: 0; background: radial-gradient(1100px 600px at 80% -10%, rgba(34,211,238,.08), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(59,130,246,.12), transparent 55%), var(--hc-bg); color: var(--hc-text); font-family: var(--hc-font); font-size: var(--hc-fs-md); line-height: var(--hc-lh); -webkit-font-smoothing: antialiased; } .hc-app *, .hc-scope * { box-sizing: border-box; } /* ---- Typography ---- */ .hc-h1 { font-size: var(--hc-fs-3xl); line-height: 1.15; letter-spacing: -.01em; margin: 0 0 var(--hc-space-3); font-weight: 700; } .hc-h2 { font-size: var(--hc-fs-2xl); line-height: 1.2; margin: 0 0 var(--hc-space-3); font-weight: 650; } .hc-h3 { font-size: var(--hc-fs-xl); margin: 0 0 var(--hc-space-2); font-weight: 600; } .hc-eyebrow { font-size: var(--hc-fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--hc-muted); margin: 0 0 var(--hc-space-2); } .hc-text { color: var(--hc-text); } .hc-muted { color: var(--hc-muted); } .hc-lede { color: var(--hc-muted); font-size: var(--hc-fs-lg); line-height: 1.6; max-width: 60ch; } .hc-accent { background: linear-gradient(90deg, var(--hc-brand-2), var(--hc-brand)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hc-link { color: var(--hc-brand-2); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--hc-ease); } .hc-link:hover { border-bottom-color: currentColor; } .hc-code { font-family: var(--hc-font-mono); font-size: .92em; background: var(--hc-surface-2); border: 1px solid var(--hc-line); border-radius: var(--hc-radius-sm); padding: 1px 6px; color: var(--hc-text); } .hc-kbd { font-family: var(--hc-font-mono); font-size: .82em; background: var(--hc-surface-3); border: 1px solid var(--hc-line-strong); border-bottom-width: 2px; border-radius: 6px; padding: 2px 7px; color: var(--hc-text); } /* ---- Buttons ---- */ .hc-btn { --_bg: var(--hc-surface-3); --_fg: var(--hc-text); --_bd: var(--hc-line-strong); appearance: none; cursor: pointer; text-decoration: none; user-select: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--hc-space-2); height: var(--hc-control-h); padding: var(--hc-control-pad); font-family: var(--hc-font); font-size: var(--hc-fs-md); font-weight: 600; line-height: 1; color: var(--_fg); background: var(--_bg); border: 1px solid var(--_bd); border-radius: var(--hc-radius); transition: filter var(--hc-ease), background var(--hc-ease), transform .06s ease, box-shadow var(--hc-ease); } .hc-btn:hover { filter: brightness(1.08); } .hc-btn:active { transform: translateY(1px); } .hc-btn:focus-visible { outline: none; box-shadow: var(--hc-ring); } .hc-btn[disabled], .hc-btn.is-disabled { opacity: .5; cursor: not-allowed; filter: none; transform: none; } .hc-btn svg { width: 16px; height: 16px; } .hc-btn--primary { --_bg: linear-gradient(180deg, var(--hc-brand), var(--hc-brand-strong)); --_fg: #fff; --_bd: transparent; box-shadow: 0 10px 24px -12px rgba(37,99,235,.8); } .hc-btn--secondary { --_bg: var(--hc-surface); --_fg: var(--hc-text); --_bd: var(--hc-line-strong); } .hc-btn--ghost { --_bg: transparent; --_fg: var(--hc-text); --_bd: var(--hc-line); } .hc-btn--danger { --_bg: var(--hc-high); --_fg: #fff; --_bd: transparent; } .hc-btn--success { --_bg: var(--hc-good); --_fg: #06210f; --_bd: transparent; } .hc-btn--subtle { --_bg: var(--hc-brand-soft); --_fg: #cfe0ff; --_bd: var(--hc-brand-ring); } .hc-btn--sm { height: 32px; font-size: var(--hc-fs-sm); padding: 0 11px; border-radius: var(--hc-radius-sm); } .hc-btn--lg { height: 48px; font-size: var(--hc-fs-lg); padding: 0 22px; } .hc-btn--icon { width: var(--hc-control-h); padding: 0; } .hc-btn--block { display: flex; width: 100%; } /* ---- Forms ---- */ .hc-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--hc-space-4); } .hc-label { font-size: var(--hc-fs-sm); font-weight: 600; color: var(--hc-text); } .hc-label .hc-req { color: var(--hc-high); } .hc-hint { font-size: var(--hc-fs-xs); color: var(--hc-muted); } .hc-error { font-size: var(--hc-fs-xs); color: var(--hc-high); } .hc-input, .hc-textarea, .hc-select { width: 100%; font-family: var(--hc-font); font-size: var(--hc-fs-md); color: var(--hc-text); background: var(--hc-surface-2); border: 1px solid var(--hc-line-strong); border-radius: var(--hc-radius); height: var(--hc-control-h); padding: var(--hc-control-pad); transition: border-color var(--hc-ease), box-shadow var(--hc-ease), background var(--hc-ease); } .hc-textarea { height: auto; min-height: 96px; padding: 10px 14px; resize: vertical; line-height: 1.5; } .hc-input::placeholder, .hc-textarea::placeholder { color: var(--hc-faint); } .hc-input:focus, .hc-textarea:focus, .hc-select:focus { outline: none; border-color: var(--hc-brand); box-shadow: var(--hc-ring); background: var(--hc-surface); } .hc-input:disabled, .hc-textarea:disabled, .hc-select:disabled { opacity: .55; cursor: not-allowed; } .hc-input.is-invalid, .hc-textarea.is-invalid, .hc-select.is-invalid { border-color: var(--hc-high); box-shadow: 0 0 0 3px var(--hc-high-soft); } .hc-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2393a4c0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 38px; } /* input group (addon + field) */ .hc-input-group { display: flex; } .hc-input-group .hc-input { border-radius: 0 var(--hc-radius) var(--hc-radius) 0; } .hc-input-group .hc-addon { display: inline-flex; align-items: center; padding: 0 12px; font-size: var(--hc-fs-sm); color: var(--hc-muted); background: var(--hc-surface-3); border: 1px solid var(--hc-line-strong); border-right: 0; border-radius: var(--hc-radius) 0 0 var(--hc-radius); } /* checkbox / radio */ .hc-check { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: var(--hc-fs-md); color: var(--hc-text); } .hc-check input { appearance: none; width: 18px; height: 18px; flex: none; background: var(--hc-surface-2); border: 1px solid var(--hc-line-strong); border-radius: 5px; display: grid; place-content: center; transition: background var(--hc-ease), border-color var(--hc-ease); } .hc-check input[type="radio"] { border-radius: 999px; } .hc-check input:checked { background: var(--hc-brand); border-color: var(--hc-brand); } .hc-check input:checked::after { content: ""; width: 10px; height: 10px; } .hc-check input[type="checkbox"]:checked::after { width: 6px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-1px); } .hc-check input[type="radio"]:checked::after { width: 8px; height: 8px; border-radius: 999px; background: #fff; } .hc-check input:focus-visible { outline: none; box-shadow: var(--hc-ring); } /* switch */ .hc-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; } .hc-switch input { appearance: none; width: 40px; height: 22px; background: var(--hc-line-strong); border-radius: 999px; position: relative; transition: background var(--hc-ease); flex: none; } .hc-switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 999px; background: #fff; transition: transform var(--hc-ease); } .hc-switch input:checked { background: var(--hc-brand); } .hc-switch input:checked::after { transform: translateX(18px); } .hc-switch input:focus-visible { outline: none; box-shadow: var(--hc-ring); } /* ---- Badges / pills ---- */ .hc-badge { display: inline-flex; align-items: center; gap: 6px; font-size: var(--hc-fs-xs); font-weight: 600; line-height: 1; padding: 5px 10px; border-radius: var(--hc-radius-pill); border: 1px solid var(--hc-line); color: var(--hc-muted); background: rgba(255,255,255,.03); } .hc-badge .hc-dot { width: 8px; height: 8px; border-radius: 999px; background: currentColor; } .hc-badge--brand { color: #cfe0ff; background: var(--hc-brand-soft); border-color: var(--hc-brand-ring); } .hc-badge--good { color: var(--hc-good); background: var(--hc-good-soft); border-color: rgba(34,197,94,.4); } .hc-badge--low { color: var(--hc-low); background: var(--hc-low-soft); border-color: rgba(245,158,11,.4); } .hc-badge--medium { color: var(--hc-medium); background: var(--hc-medium-soft); border-color: rgba(251,146,60,.4); } .hc-badge--high { color: var(--hc-high); background: var(--hc-high-soft); border-color: rgba(239,68,68,.4); } .hc-badge--info { color: var(--hc-info); background: var(--hc-info-soft); border-color: rgba(56,189,248,.4); } /* RAG pill (the canonical score band look) */ .hc-rag { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: var(--hc-fs-sm); padding: 6px 12px; border-radius: var(--hc-radius-pill); } .hc-rag--good { color: var(--hc-good); background: var(--hc-good-soft); border: 1px solid rgba(34,197,94,.45); } .hc-rag--low { color: var(--hc-low); background: var(--hc-low-soft); border: 1px solid rgba(245,158,11,.45); } .hc-rag--medium { color: var(--hc-medium); background: var(--hc-medium-soft); border: 1px solid rgba(251,146,60,.45); } .hc-rag--high { color: var(--hc-high); background: var(--hc-high-soft); border: 1px solid rgba(239,68,68,.45); } /* ---- Cards ---- */ .hc-card { background: linear-gradient(180deg, var(--hc-surface), var(--hc-surface-2)); border: 1px solid var(--hc-line); border-radius: var(--hc-radius-lg); box-shadow: var(--hc-shadow); } .hc-card__header { padding: var(--hc-space-4) var(--hc-space-5); border-bottom: 1px solid var(--hc-line); font-weight: 650; } .hc-card__body { padding: var(--hc-space-5); } .hc-card__footer { padding: var(--hc-space-4) var(--hc-space-5); border-top: 1px solid var(--hc-line); display: flex; gap: var(--hc-space-3); justify-content: flex-end; } /* ---- Alerts ---- */ .hc-alert { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--hc-radius); border: 1px solid var(--hc-line); background: var(--hc-surface-2); font-size: var(--hc-fs-sm); } .hc-alert__title { font-weight: 650; margin: 0 0 2px; } .hc-alert--info { border-color: rgba(56,189,248,.4); background: var(--hc-info-soft); } .hc-alert--success { border-color: rgba(34,197,94,.4); background: var(--hc-good-soft); } .hc-alert--warning { border-color: rgba(245,158,11,.4); background: var(--hc-low-soft); } .hc-alert--danger { border-color: rgba(239,68,68,.4); background: var(--hc-high-soft); } /* ---- Table ---- */ .hc-table { width: 100%; border-collapse: collapse; font-size: var(--hc-fs-sm); } .hc-table th { text-align: left; font-weight: 600; color: var(--hc-muted); padding: 10px 14px; border-bottom: 1px solid var(--hc-line-strong); white-space: nowrap; } .hc-table td { padding: 11px 14px; border-bottom: 1px solid var(--hc-line); color: var(--hc-text); } .hc-table tr:hover td { background: rgba(255,255,255,.02); } /* ---- Helpers ---- */ .hc-divider { height: 1px; background: var(--hc-line); border: 0; margin: var(--hc-space-5) 0; } .hc-swatch { height: 56px; border-radius: var(--hc-radius); border: 1px solid var(--hc-line); } .hc-stack { display: flex; flex-direction: column; gap: var(--hc-space-3); } .hc-row { display: flex; flex-wrap: wrap; gap: var(--hc-space-3); align-items: center; } .hc-grid { display: grid; gap: var(--hc-space-4); }