/* Glitch V5 — design system ported from v4's dashboard UI (dashboard/base.html, onboarding/base.html): near-black + lime-green accent, flat bordered cards, Outfit typeface. Dark is the exact v4 palette; light is a derived variant using the same lime accent (darkened for contrast on white) and semantics. [data-theme="light"] on (set in base.html/theme.js before first paint) switches every token below — no per-theme overrides outside this block should be needed. */ :root, [data-theme="dark"] { --bg: #0d0d0d; --surface: #1a1a1a; --surface-2: #242424; --surface-3: #2a2a2a; --border: #2a2a2a; --border-light: #333333; --border-faint: #222222; --text: #ffffff; --text-2: #d1d5db; --text-secondary: #d1d5db; --text-muted: #9ca3af; --text-faint: #555555; --lime: #c8ff00; --lime-hover: #b8ef00; --lime-text: #000000; --accent: var(--lime); --accent-hover: var(--lime-hover); --accent-text: var(--lime-text); --accent-soft: rgba(200, 255, 0, 0.12); --success: #4ade80; --success-bg: #0d2d1a; --success-border: #166534; --success-text: #4ade80; --warning: #fbbf24; --warning-bg: #2d2000; --warning-border: #78350f; --warning-text: #fbbf24; --danger: #f87171; --danger-bg: #2d1515; --danger-border: #7f1d1d; --danger-text: #f87171; color-scheme: dark; } [data-theme="light"] { --bg: #fafafa; --surface: #ffffff; --surface-2: #f4f4f5; --surface-3: #ececee; --border: #e4e4e7; --border-light: #d4d4d8; --border-faint: #ededf0; --text: #18181b; --text-2: #3f3f46; --text-secondary: #3f3f46; --text-muted: #71717a; --text-faint: #a1a1aa; --lime: #65a30d; --lime-hover: #4d7c0f; --lime-text: #ffffff; --accent: var(--lime); --accent-hover: var(--lime-hover); --accent-text: var(--lime-text); --accent-soft: rgba(101, 163, 13, 0.1); --success: #16a34a; --success-bg: #f0fdf4; --success-border: #bbf7d0; --success-text: #15803d; --warning: #d97706; --warning-bg: #fffbeb; --warning-border: #fde68a; --warning-text: #b45309; --danger: #dc2626; --danger-bg: #fef2f2; --danger-border: #fecaca; --danger-text: #b91c1c; color-scheme: light; } :root { --radius-sm: 6px; --radius: 8px; --radius-lg: 12px; --radius-full: 9999px; --font: 'Outfit', system-ui, -apple-system, sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font); font-size: 15px; line-height: 1.6; color: var(--text); background: var(--bg); transition: background-color 0.15s ease, color 0.15s ease; } a { color: var(--lime); } h1, h2, h3, h4 { font-weight: 800; letter-spacing: -0.5px; line-height: 1.2; } .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } /* --------------------------------------------------------------------- Navbar --------------------------------------------------------------------- */ .navbar { background: var(--bg); border-bottom: 1px solid var(--border); padding: 0.9rem 0; position: sticky; top: 0; z-index: 1000; } .navbar .container { display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .nav-brand a { display: flex; align-items: center; gap: 0.3rem; text-decoration: none; color: var(--text); font-weight: 800; font-size: 1.15rem; letter-spacing: -0.5px; } .nav-logo-dot { color: var(--lime); } .nav-menu { display: flex; gap: 1.75rem; align-items: center; } .nav-link { color: var(--text-muted); text-decoration: none; font-weight: 500; font-size: 0.9rem; transition: color 0.15s; } .nav-link:hover { color: var(--text); } .nav-logout-form { display: inline; margin: 0; } .nav-logout-btn { background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; font-size: 0.9rem; font-weight: 500; color: var(--text-muted); transition: color 0.15s; } .nav-logout-btn:hover { color: var(--text); } /* Theme toggle */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-full); border: 1px solid var(--border-light); background: var(--surface-2); color: var(--text-muted); cursor: pointer; transition: border-color 0.15s, color 0.15s; } .theme-toggle:hover { color: var(--text); border-color: #666; } .theme-toggle svg { width: 15px; height: 15px; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="light"] .theme-toggle .icon-sun { display: block; } [data-theme="light"] .theme-toggle .icon-moon { display: none; } /* --------------------------------------------------------------------- Buttons --------------------------------------------------------------------- */ .btn-primary, .btn-secondary, .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.65rem 1.3rem; border-radius: var(--radius); text-decoration: none; font-weight: 700; font-size: 0.9rem; transition: background 0.15s ease, border-color 0.15s ease; border: 1px solid transparent; cursor: pointer; font-family: inherit; } .btn-primary { background: var(--lime); color: var(--lime-text); } .btn-primary:hover { background: var(--lime-hover); } .btn-secondary { background: var(--surface-2); color: var(--text); border-color: var(--border-light); font-weight: 600; } .btn-secondary:hover { background: var(--surface-3); } .btn-ghost { background: transparent; color: var(--text); border-color: var(--border-light); font-weight: 600; } .btn-ghost:hover { border-color: #666; } .btn-large { padding: 0.85rem 1.75rem; font-size: 0.95rem; } .btn-full { width: 100%; } .btn-disabled { display: inline-flex; align-items: center; justify-content: center; padding: 0.65rem 1.3rem; border-radius: var(--radius); font-weight: 700; font-size: 0.9rem; background: var(--surface-2); color: var(--text-faint); border: 1px solid var(--border-light); cursor: default; } .btn-remove { background: transparent; color: var(--danger-text); border: 1px solid var(--danger-border); padding: 0.4rem 0.9rem; border-radius: var(--radius-sm); cursor: pointer; font-weight: 600; font-size: 0.8rem; font-family: inherit; transition: background 0.15s; } .btn-remove:hover { background: var(--danger-bg); } /* --------------------------------------------------------------------- Hero --------------------------------------------------------------------- */ .hero { padding: 6rem 0 5rem; text-align: center; border-bottom: 1px solid var(--border); } .hero h1 { font-size: 3.1rem; max-width: 780px; margin: 0 auto 1.25rem; } .hero-subtitle { font-size: 1.15rem; color: var(--text-muted); max-width: 600px; margin: 0 auto 2.25rem; } .hero-cta { display: flex; gap: 0.9rem; justify-content: center; margin-bottom: 1.1rem; } .hero-note { font-size: 0.85rem; color: var(--text-faint); } /* --------------------------------------------------------------------- Features --------------------------------------------------------------------- */ .features { padding: 5rem 0; } .features h2, .pricing h2 { text-align: center; font-size: 2.1rem; margin-bottom: 3rem; } .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; } .feature-card { background: var(--surface); border: 1px solid var(--border); padding: 1.75rem; border-radius: var(--radius-lg); position: relative; transition: border-color 0.15s; } .feature-card:hover { border-color: var(--border-light); } .feature-icon { font-size: 1.75rem; margin-bottom: 0.9rem; } .feature-card h3 { font-size: 1.1rem; margin-bottom: 0.6rem; } .feature-card > p { color: var(--text-muted); font-size: 0.9rem; } .feature-list { list-style: none; margin-top: 1rem; } .feature-list li { padding: 0.35rem 0; padding-left: 1.4rem; position: relative; font-size: 0.88rem; color: var(--text-muted); } .feature-list li::before { content: "✓"; position: absolute; left: 0; color: var(--lime); font-weight: bold; } .badge-pro { position: absolute; top: 1.5rem; right: 1.5rem; background: var(--accent-soft); color: var(--lime); padding: 0.2rem 0.65rem; border-radius: var(--radius-full); font-size: 0.7rem; font-weight: 700; } /* --------------------------------------------------------------------- Pricing (home page + upgrade page) --------------------------------------------------------------------- */ .pricing { padding: 5rem 0; border-top: 1px solid var(--border); } .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .pricing-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; text-align: center; position: relative; } .pricing-card.pricing-featured { border-color: var(--lime); } .badge-popular { position: absolute; top: -0.7rem; left: 50%; transform: translateX(-50%); background: var(--lime); color: var(--lime-text); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; padding: 0.3rem 0.9rem; border-radius: var(--radius-full); white-space: nowrap; } .pricing-card h2, .pricing-card h3 { font-size: 1.05rem; margin-bottom: 0.5rem; } .price { font-size: 2.2rem; font-weight: 800; margin-bottom: 1.5rem; letter-spacing: -1px; } .price span { font-size: 0.95rem; font-weight: 500; color: var(--text-faint); } .pricing-features { list-style: none; text-align: left; margin-bottom: 1.75rem; line-height: 2.1; font-size: 0.88rem; color: var(--text-muted); } .cta-section { padding: 5rem 0; text-align: center; border-top: 1px solid var(--border); } .cta-section h2 { font-size: 1.9rem; margin-bottom: 0.75rem; } .cta-section p { color: var(--text-muted); margin-bottom: 2rem; max-width: 480px; margin-left: auto; margin-right: auto; } /* --------------------------------------------------------------------- Auth pages --------------------------------------------------------------------- */ .auth-container { min-height: 80vh; display: flex; align-items: center; justify-content: center; padding: 2rem; } .auth-card { background: var(--surface); border: 1px solid var(--border); padding: 2.5rem; border-radius: var(--radius-lg); max-width: 400px; width: 100%; } .auth-card h2 { margin-bottom: 0.5rem; text-align: center; font-size: 1.35rem; } .auth-card > p { text-align: center; color: var(--text-muted); margin-bottom: 2rem; font-size: 0.9rem; } .auth-form { display: flex; flex-direction: column; gap: 1.25rem; } .auth-footer { margin-top: 2rem; text-align: center; color: var(--text-muted); font-size: 0.88rem; } /* --------------------------------------------------------------------- Forms (shared: auth, watchlist, settings) --------------------------------------------------------------------- */ .form-group { display: flex; flex-direction: column; } .form-group label { margin-bottom: 0.4rem; font-weight: 600; font-size: 0.83rem; color: var(--text-muted); } .form-group input, .watchlist-form input { padding: 0.65rem 0.85rem; border: 1px solid var(--border-light); border-radius: var(--radius); font-size: 0.92rem; background: var(--surface-2); color: var(--text); font-family: inherit; transition: border-color 0.15s; } .form-group input:focus, .watchlist-form input:focus { outline: none; border-color: var(--lime); } .form-group input::placeholder, .watchlist-form input::placeholder { color: var(--text-faint); } .settings-form { display: flex; flex-direction: column; gap: 1.1rem; max-width: 420px; } /* --------------------------------------------------------------------- Alerts / banners --------------------------------------------------------------------- */ .alert { padding: 0.85rem 1.1rem; border-radius: var(--radius); margin-bottom: 1.25rem; font-size: 0.88rem; border: 1px solid transparent; } .alert-error { background: var(--danger-bg); color: var(--danger-text); border-color: var(--danger-border); } .alert-success { background: var(--success-bg); color: var(--success-text); border-color: var(--success-border); } /* --------------------------------------------------------------------- Dashboard --------------------------------------------------------------------- */ .dashboard { padding: 2.5rem 0 4rem; } .dashboard-header { margin-bottom: 2rem; } .dashboard-header h1 { font-size: 1.7rem; margin-bottom: 0.5rem; } .dashboard-meta { display: flex; gap: 1rem; align-items: center; color: var(--text-muted); font-size: 0.88rem; } .dashboard-section { margin-top: 2.5rem; } .dashboard-section h2 { font-size: 1.15rem; margin-bottom: 1.1rem; } .tier-badge { display: inline-block; padding: 0.2rem 0.65rem; border-radius: var(--radius-full); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; border: 1px solid; } .tier-basic { background: var(--accent-soft); color: var(--lime); border-color: var(--lime); } .tier-pro { background: var(--warning-bg); color: var(--warning-text); border-color: var(--warning-border); } .tier-enterprise { background: var(--success-bg); color: var(--success-text); border-color: var(--success-border); } /* Alert Summary Cards */ .alert-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.25rem; margin-bottom: 1rem; } .summary-card { background: var(--surface); border: 1px solid var(--border); padding: 1.4rem; border-radius: var(--radius-lg); display: flex; align-items: center; gap: 1rem; position: relative; } .summary-icon { font-size: 1.75rem; } .summary-content h3 { font-size: 1.6rem; font-weight: 800; } .summary-content p { color: var(--text-faint); font-size: 0.83rem; } .summary-link { position: absolute; bottom: 1rem; right: 1.25rem; color: var(--lime); text-decoration: none; font-size: 0.8rem; font-weight: 600; } /* Alert Lists */ .alert-group { background: var(--surface); border: 1px solid var(--border); padding: 1.4rem; border-radius: var(--radius-lg); margin-bottom: 1.25rem; } .alert-group h3 { margin-bottom: 1rem; font-size: 1rem; } .alert-list { display: flex; flex-direction: column; gap: 0.6rem; } .alert-item { display: flex; justify-content: space-between; align-items: center; padding: 0.85rem 1rem; background: var(--bg); border: 1px solid var(--border-faint); border-radius: var(--radius); gap: 1rem; } .alert-action { color: var(--lime); text-decoration: none; font-size: 0.83rem; font-weight: 600; white-space: nowrap; } .action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } .action-card { display: flex; align-items: center; gap: 0.75rem; background: var(--surface); border: 1px solid var(--border); padding: 1.1rem 1.25rem; border-radius: var(--radius); text-decoration: none; color: var(--text); font-weight: 600; font-size: 0.9rem; transition: border-color 0.15s, background 0.15s; } .action-card:hover { border-color: var(--border-light); background: var(--surface-2); } .action-icon { font-size: 1.2rem; } .empty-state { text-align: center; padding: 3.5rem 1.5rem; color: var(--text-muted); } /* --------------------------------------------------------------------- Source pages (shortages / recalls / pricing / compliance / watchlist / settings) --------------------------------------------------------------------- */ .source-page { padding: 2.5rem 0 4rem; } .source-header { margin-bottom: 2rem; } .source-header h1 { font-size: 1.7rem; margin-bottom: 0.5rem; } .source-meta { display: flex; gap: 1.5rem; color: var(--text-muted); font-size: 0.88rem; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25rem; margin-bottom: 2.5rem; } .stat-card { background: var(--surface); border: 1px solid var(--border); padding: 1.75rem; border-radius: var(--radius-lg); text-align: center; } .stat-card h3 { font-size: 2rem; color: var(--lime); margin-bottom: 0.35rem; letter-spacing: -1px; } .stat-card p { color: var(--text-faint); font-size: 0.85rem; } .data-section { background: var(--surface); border: 1px solid var(--border); padding: 1.75rem; border-radius: var(--radius-lg); } .data-section h2 { margin-bottom: 1.4rem; font-size: 1.1rem; } .watchlist-form { display: flex; gap: 0.75rem; flex-wrap: wrap; } .watchlist-form input { flex: 1; min-width: 200px; } .data-table { overflow-x: auto; } table { width: 100%; border-collapse: collapse; } thead { background: transparent; } th, td { padding: 0.85rem 1rem; text-align: left; border-bottom: 1px solid var(--border-faint); font-size: 0.88rem; } th { font-weight: 600; color: var(--text-faint); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--border); } tbody tr:hover { background: var(--surface-2); } tbody tr:last-child td { border-bottom: none; } /* Status / class / schedule badges — v4's 3-part pattern: bg + border + text */ .status-badge { display: inline-block; padding: 0.22rem 0.65rem; border-radius: var(--radius-full); font-size: 0.78rem; font-weight: 600; white-space: nowrap; border: 1px solid; } .status-shortage, .class-class-i, .schedule-ii { background: var(--danger-bg); color: var(--danger-text); border-color: var(--danger-border); } .class-class-ii, .schedule-iii { background: var(--warning-bg); color: var(--warning-text); border-color: var(--warning-border); } .class-class-iii, .schedule-iv { background: var(--warning-bg); color: var(--warning-text); border-color: var(--warning-border); opacity: 0.85; } .schedule-v { background: var(--success-bg); color: var(--success-text); border-color: var(--success-border); } .schedule-none { background: var(--surface-2); color: var(--text-faint); border-color: var(--border-light); } .recall-class-class-i { background: var(--danger-bg); color: var(--danger-text); border: 1px solid var(--danger-border); display: inline-block; padding: 0.22rem 0.65rem; border-radius: var(--radius-full); font-size: 0.78rem; font-weight: 600; } .recall-class-class-ii { background: var(--warning-bg); color: var(--warning-text); border: 1px solid var(--warning-border); display: inline-block; padding: 0.22rem 0.65rem; border-radius: var(--radius-full); font-size: 0.78rem; font-weight: 600; } .recall-class-class-iii { background: var(--warning-bg); color: var(--warning-text); border: 1px solid var(--warning-border); opacity: 0.85; display: inline-block; padding: 0.22rem 0.65rem; border-radius: var(--radius-full); font-size: 0.78rem; font-weight: 600; } .alert-meta { display: inline-block; padding: 0.18rem 0.6rem; border-radius: var(--radius-full); font-size: 0.72rem; font-weight: 600; margin-left: 0.5rem; background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border-light); } /* --------------------------------------------------------------------- Legal pages --------------------------------------------------------------------- */ .legal-page { padding: 3.5rem 0 4rem; max-width: 720px; margin: 0 auto; } .legal-page h1 { margin-bottom: 0.5rem; font-size: 1.85rem; } .updated { color: var(--text-faint); margin-bottom: 2rem; font-size: 0.88rem; } .legal-section { background: var(--surface); border: 1px solid var(--border); padding: 2rem; border-radius: var(--radius-lg); line-height: 1.8; font-size: 0.93rem; color: var(--text-muted); } .legal-section ul { margin: 1rem 0 1rem 1.5rem; } .legal-section li { margin-bottom: 0.75rem; } .legal-section strong { color: var(--text); } /* --------------------------------------------------------------------- Footer --------------------------------------------------------------------- */ .footer { border-top: 1px solid var(--border); color: var(--text-faint); padding: 2.5rem 0; text-align: center; margin-top: 4rem; font-size: 0.85rem; } .footer-links { margin-top: 0.6rem; } .footer-links a { color: var(--text-faint); text-decoration: none; margin: 0 0.6rem; } .footer-links a:hover { color: var(--text-muted); } /* --------------------------------------------------------------------- Responsive --------------------------------------------------------------------- */ @media (max-width: 768px) { .hero { padding: 4rem 0 3rem; } .hero h1 { font-size: 2.1rem; } .hero-cta { flex-direction: column; } .feature-grid { grid-template-columns: 1fr; } .pricing-grid { grid-template-columns: 1fr; } .alert-summary { grid-template-columns: 1fr; } .nav-menu { gap: 1rem; } .nav-link { font-size: 0.82rem; } .dashboard-meta { flex-wrap: wrap; } }