/* ================================================================ GavelSight — Application Stylesheet Brand: Dark navy/charcoal + Dark Goldenrod accent Font: Plus Jakarta Sans (single typeface, self-hosted — no CDN). Empire-wide single-font rule (2026-05-18). ================================================================ */ /* ─── @font-face: Plus Jakarta Sans (self-hosted) ─────────────── */ @font-face { font-family: 'Plus Jakarta Sans'; src: url('/static/fonts/PlusJakartaSans-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Plus Jakarta Sans'; src: url('/static/fonts/PlusJakartaSans-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; } @font-face { font-family: 'Plus Jakarta Sans'; src: url('/static/fonts/PlusJakartaSans-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; } @font-face { font-family: 'Plus Jakarta Sans'; src: url('/static/fonts/PlusJakartaSans-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; } @font-face { font-family: 'Plus Jakarta Sans'; src: url('/static/fonts/PlusJakartaSans-ExtraBold.ttf') format('truetype'); font-weight: 800; font-display: swap; } /* ─── TOKENS ──────────────────────────────────────────────────── */ /* Default = DARK theme. [data-theme="light"] on overrides for the institutional/Westlaw-grade light treatment. Toggle persists in localStorage('gs-theme'). Pre-paint script in base.html prevents FOUC. */ :root { --gold: #B8860B; --gold-light: #D4A017; --gold-dim: rgba(184,134,11,0.15); --bg: #0D1117; --surface: #161B22; --surface-2: #1C2128; --border: #30363D; --text: #F0F6FC; --muted: #8B949E; --danger: #F85149; --success: #3FB950; --warning: #D29922; --radius-card: 8px; --radius-btn: 6px; --shadow: 0 4px 6px rgba(0,0,0,0.3); --shadow-lg: 0 8px 24px rgba(0,0,0,0.4); --font-display: 'Plus Jakarta Sans', system-ui, sans-serif; --font-body: 'Plus Jakarta Sans', system-ui, sans-serif; --nav-h: 64px; /* Aliases so judge_chat.css (which uses --text-muted/--accent/etc.) resolves to the real theme tokens instead of its hardcoded dark fallbacks. */ --text-muted: var(--muted); --accent: var(--gold); --accent-subtle: var(--gold-dim); --surface-hover: var(--surface-2); } /* ─── LIGHT THEME (institutional / Westlaw-grade) ──────────────── */ [data-theme="light"] { --gold: #8B6914; /* darker gold for AA legibility on cream */ --gold-light: #B8860B; --gold-dim: rgba(139,105,20,0.10); --bg: #FAFAF7; /* warm cream — Bloomberg/NYT register */ --surface: #FFFFFF; --surface-2: #F4F4ED; --border: #D6D3D1; /* warm neutral */ --text: #18181B; /* near-black */ --muted: #57534E; /* warm gray */ --danger: #B91C1C; --success: #166534; --warning: #92400E; --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04); --shadow-lg: 0 4px 10px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.05); } /* ─── RESET ───────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; display: flex; flex-direction: column; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } main { flex: 1; } /* ─── TYPOGRAPHY ──────────────────────────────────────────────── */ /* Type scale: 0.75rem → 3rem */ :root { --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 2rem; /* 32px */ --text-4xl: 3rem; /* 48px */ } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; color: var(--text); line-height: 1.2; } h1 { font-size: var(--text-3xl); } h2 { font-size: var(--text-2xl); } h3 { font-size: var(--text-xl); font-weight: 600; } h4 { font-size: var(--text-base); font-weight: 600; } p { color: var(--muted); line-height: 1.5; } strong { font-weight: 600; } /* ─── LAYOUT ──────────────────────────────────────────────────── */ .container { max-width: 1280px; margin: 0 auto; padding: 0 32px; } .page-content { padding: 48px 0 80px; } .section { padding: 48px 0; } .section-lg { padding: 64px 0; } /* ─── SITE HEADER ─────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 200; background: rgba(13,17,23,0.94); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); height: var(--nav-h); } .header-shell { display: flex; align-items: center; height: 100%; gap: 24px; } .logo-mark { display: flex; flex-direction: column; justify-content: center; flex-shrink: 0; } .logo-kicker { font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); line-height: 1; } .logo-kicker::after { content: ''; display: inline-block; width: 6px; height: 6px; background: var(--gold); border-radius: 50%; margin-left: 4px; vertical-align: middle; margin-bottom: 2px; } .logo-sub { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-top: 2px; } .top-nav { display: flex; gap: 4px; flex: 1; /* Was overflow:hidden, which silently CLIPPED nav links when the bar got crowded (8-10 items for paid users). Let them wrap instead of vanishing. */ flex-wrap: wrap; align-items: center; } .top-nav a { font-size: 13px; font-weight: 500; color: var(--muted); padding: 6px 12px; border-radius: var(--radius-btn); transition: color 150ms ease, background 150ms ease; white-space: nowrap; } .top-nav a:hover { color: var(--text); background: var(--surface); } .top-nav a.active { color: var(--text); background: var(--surface); } .header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .mobile-menu-btn { display: none; } /* ─── BUTTONS ─────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 16px; font-size: var(--text-sm); font-weight: 500; border-radius: var(--radius-btn); cursor: pointer; border: none; transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease, color 150ms ease, opacity 150ms ease; white-space: nowrap; font-family: var(--font-body); text-decoration: none; user-select: none; } .btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .btn:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .btn-primary { background: var(--gold); color: #0D1117; font-weight: 600; } .btn-primary:hover { background: var(--gold-light); box-shadow: 0 4px 12px rgba(184,134,11,0.3); } .btn-primary:active { transform: scale(0.98); box-shadow: none; } .btn-outline { background: transparent; color: var(--muted); border: 1px solid var(--border); } .btn-outline:hover { border-color: var(--muted); color: var(--text); background: var(--surface); } .btn-outline:active { transform: scale(0.98); } .btn-ghost { background: transparent; color: var(--muted); } .btn-ghost:hover { color: var(--text); background: var(--surface); } .btn-ghost:active { transform: scale(0.98); } /* ─── THEME TOGGLE ────────────────────────────────────────────── */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-btn); background: transparent; border: 1px solid transparent; color: var(--muted); cursor: pointer; transition: color 150ms ease, background 150ms ease, border-color 150ms ease; padding: 0; } .theme-toggle:hover { color: var(--text); background: var(--surface); border-color: var(--border); } .theme-toggle:active { transform: scale(0.96); } .theme-toggle svg { display: block; } /* Show sun icon when light theme is active (user can click to go dark) */ [data-theme="light"] .theme-toggle__moon { display: none; } [data-theme="dark"] .theme-toggle__sun { display: none; } :root:not([data-theme]) .theme-toggle__moon { display: none; } .btn-danger { background: transparent; color: var(--danger); border: 1px solid var(--danger); } .btn-danger:hover { background: rgba(248,81,73,0.1); } .btn-danger:active { transform: scale(0.98); } .btn-lg { height: 48px; padding: 0 24px; font-size: var(--text-base); } .btn-sm { height: 32px; padding: 0 12px; font-size: var(--text-xs); } /* ─── CARDS ───────────────────────────────────────────────────── */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 24px; box-shadow: var(--shadow); } .card-hover { transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease; cursor: pointer; } .card-hover:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: rgba(184,134,11,0.3); } .card-hover:active { transform: translateY(0); } .card-title { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--text); margin-bottom: 8px; letter-spacing: -0.01em; } .card-desc { font-size: 14px; color: var(--muted); } /* ─── PAGE HEADER ─────────────────────────────────────────────── */ .page-header { padding: 32px 0 0; border-bottom: 1px solid var(--border); margin-bottom: 32px; } .page-header h1 { font-family: var(--font-display); font-size: 28px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 4px; } .page-header p { font-size: 14px; color: var(--muted); margin-bottom: 24px; } .page-header-actions { display: flex; align-items: center; gap: 8px; padding-bottom: 20px; } /* ─── FORMS ───────────────────────────────────────────────────── */ .form-group { margin-bottom: 20px; } .form-label { display: block; font-size: 13px; font-weight: 500; color: var(--text); margin-bottom: 6px; } .form-control { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-btn); padding: 0 14px; height: 40px; font-size: 14px; color: var(--text); font-family: var(--font-body); transition: border-color 150ms ease; outline: none; } .form-control::placeholder { color: var(--muted); } .form-control:focus { border-color: var(--gold); } textarea.form-control { height: auto; padding: 12px 14px; resize: vertical; } .form-hint { font-size: 12px; color: var(--muted); margin-top: 4px; } /* ─── TABLES ──────────────────────────────────────────────────── */ .table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; } table { width: 100%; border-collapse: collapse; font-size: 14px; } thead { background: var(--surface-2); border-bottom: 1px solid var(--border); } thead th { padding: 12px 16px; text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } tbody tr { border-bottom: 1px solid var(--border); transition: background 150ms ease; } tbody tr:last-child { border-bottom: none; } tbody tr:hover { background: var(--surface-2); } tbody td { padding: 14px 16px; color: var(--text); } /* ─── BADGES ──────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 100px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; } .badge-gold { background: var(--gold-dim); color: var(--gold-light); border: 1px solid rgba(184,134,11,0.3); } .badge-green { background: rgba(63,185,80,0.12); color: var(--success); border: 1px solid rgba(63,185,80,0.3); } .badge-red { background: rgba(248,81,73,0.12); color: var(--danger); border: 1px solid rgba(248,81,73,0.3); } .badge-gray { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); } /* ─── FLASH MESSAGES ──────────────────────────────────────────── */ @keyframes flash-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .flash-stack { padding: 16px 0 0; } .flash { padding: 12px 16px; border-radius: var(--radius-btn); font-size: var(--text-sm); font-weight: 500; margin-bottom: 8px; border: 1px solid; display: flex; align-items: center; gap: 8px; animation: flash-in 200ms ease both; } .flash-success { background: rgba(63,185,80,0.1); color: var(--success); border-color: rgba(63,185,80,0.3); } .flash-error { background: rgba(248,81,73,0.1); color: var(--danger); border-color: rgba(248,81,73,0.3); } .flash-info { background: var(--gold-dim); color: var(--gold-light); border-color: rgba(184,134,11,0.3); } .flash-warning { background: rgba(210,153,34,0.1); color: var(--warning); border-color: rgba(210,153,34,0.3); } /* ─── STAT CARDS ──────────────────────────────────────────────── */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 32px; } .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 20px; box-shadow: var(--shadow); transition: transform 150ms ease, box-shadow 150ms ease; } .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } .stat-label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } .stat-value { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; line-height: 1; } .stat-value.gold { color: var(--gold-light); } .stat-change { font-size: 12px; color: var(--muted); margin-top: 4px; } /* ─── SEARCH ──────────────────────────────────────────────────── */ .search-bar { display: flex; gap: 8px; margin-bottom: 24px; } .search-bar .form-control { flex: 1; } /* ─── PREDICTION METER ────────────────────────────────────────── */ .prediction-meter { background: var(--surface-2); border-radius: 100px; height: 8px; overflow: hidden; margin: 8px 0; } .prediction-fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-light)); border-radius: 100px; transition: width 600ms ease; } .prediction-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 4px; } /* ─── SITE FOOTER ─────────────────────────────────────────────── */ .site-footer { background: var(--surface); border-top: 1px solid var(--border); padding: 28px 0; margin-top: auto; } .footer-shell { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; } .footer-brand { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; } .footer-links { display: flex; gap: 20px; } .footer-links a { font-size: 13px; color: var(--muted); transition: color 150ms ease; } .footer-links a:hover { color: var(--text); } .footer-meta { font-size: 12px; color: var(--muted); display: flex; gap: 16px; flex-wrap: wrap; } /* ─── JUDGE PROFILE CARD ──────────────────────────────────────── */ .judge-card { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; } .judge-avatar { width: 64px; height: 64px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; flex-shrink: 0; } .judge-name { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); margin-bottom: 4px; } .judge-meta { font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 12px; } .judge-meta span { display: flex; align-items: center; gap: 4px; } /* ─── SECTION DIVIDER ─────────────────────────────────────────── */ .divider { width: 40px; height: 2px; background: var(--gold); border-radius: 2px; margin: 16px 0 24px; } /* ─── EMPTY STATE ─────────────────────────────────────────────── */ .empty-state { text-align: center; padding: 60px 24px; color: var(--muted); } .empty-state .icon { font-size: 40px; margin-bottom: 16px; } .empty-state h3 { font-family: var(--font-display); font-size: 18px; color: var(--text); margin-bottom: 8px; } .empty-state p { font-size: 14px; } /* ─── LOADING SPINNER ─────────────────────────────────────────── */ .spinner { width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--gold); border-radius: 50%; animation: spin 0.6s linear infinite; display: inline-block; flex-shrink: 0; } @keyframes spin { to { transform: rotate(360deg); } } /* ─── SKELETON LOADERS ─────────────────────────────────────────── */ @keyframes skeleton-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } .skeleton { background: linear-gradient( 90deg, var(--surface-2) 25%, rgba(48,54,61,0.6) 50%, var(--surface-2) 75% ); background-size: 800px 100%; animation: skeleton-shimmer 1.4s ease infinite; border-radius: var(--radius-btn); color: transparent !important; pointer-events: none; user-select: none; } .skeleton-text { height: 1em; border-radius: 4px; margin-bottom: 8px; display: block; } .skeleton-text.w-75 { width: 75%; } .skeleton-text.w-50 { width: 50%; } .skeleton-text.w-33 { width: 33%; } .skeleton-heading { height: 1.5em; border-radius: 4px; margin-bottom: 12px; display: block; } .skeleton-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 24px; overflow: hidden; } /* ─── UTILITY ─────────────────────────────────────────────────── */ .text-gold { color: var(--gold-light); } .text-muted { color: var(--muted); } .text-danger { color: var(--danger); } .text-success { color: var(--success); } .text-warning { color: var(--warning); } /* Font weights */ .fw-400 { font-weight: 400; } .fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; } /* Font sizes */ .text-xs { font-size: var(--text-xs); } .text-sm { font-size: var(--text-sm); } .text-base { font-size: var(--text-base); } .text-lg { font-size: var(--text-lg); } .text-xl { font-size: var(--text-xl); } .text-2xl { font-size: var(--text-2xl); } .text-3xl { font-size: var(--text-3xl); } .text-4xl { font-size: var(--text-4xl); } /* Layout */ .flex { display: flex; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .flex-1 { flex: 1; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } /* Gaps */ .gap-4 { gap: 4px; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; } .gap-32 { gap: 32px; } /* Margins top */ .mt-4 { margin-top: 4px; } .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .mt-48 { margin-top: 48px; } /* Margins bottom */ .mb-4 { margin-bottom: 4px; } .mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; } .mb-32 { margin-bottom: 32px; } .mb-48 { margin-bottom: 48px; } /* Text helpers */ .font-display { font-family: var(--font-display); } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } /* Grids */ .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } /* ─── RESPONSIVE ──────────────────────────────────────────────── */ @media (max-width: 768px) { .container { padding: 0 16px; } .top-nav { display: none; } .header-shell.nav-open .top-nav { display: flex; flex-direction: column; position: absolute; top: var(--nav-h); left: 0; right: 0; background: var(--surface); border-bottom: 1px solid var(--border); padding: 12px; } .mobile-menu-btn { display: flex; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; padding: 4px; } .mobile-menu-btn span { display: block; width: 20px; height: 2px; background: var(--muted); border-radius: 2px; } .footer-shell { flex-direction: column; align-items: flex-start; } .stats-grid { grid-template-columns: repeat(2, 1fr); } } /* Freshness banner */ .freshness-banner { background: #161B22; color: #8B949E; padding: 0.6rem 1rem; font-size: 0.8125rem; line-height: 1.5; margin-bottom: 1rem; border-radius: 4px; border: 1px solid #30363D; } /* Freshness banner: warning variant (state courts early coverage) */ .freshness-banner-warning { background: #fef3c7; border: 1px solid #f59e0b; color: #92400e; padding: 0.75rem 1rem; border-radius: 6px; margin-bottom: 1.5rem; } /* Disclaimer banner */ .disclaimer-banner { border-left: 3px solid #B8860B; background: #161B22; color: #8B949E; padding: 0.75rem 1rem; font-size: 0.875rem; line-height: 1.5; margin-top: 1rem; } .confidentiality-notice { color: #8B949E; font-size: 0.85em; line-height: 1.5; margin-top: 0.5rem; } .confidentiality-notice a { color: #B8860B; } /* Auth forms (signup, login) */ .auth-shell { max-width: 480px; margin: 2rem auto; } .auth-card { background: #161B22; border: 1px solid #30363D; border-radius: 8px; padding: 2rem; } .auth-card h1 { margin: 0 0 1.5rem; font-size: 1.5rem; } .stack-form { display: flex; flex-direction: column; gap: 0.25rem; } .stack-form label { font-size: 0.875rem; color: #8B949E; margin-top: 0.75rem; } .stack-form input[type="text"], .stack-form input[type="email"], .stack-form input[type="password"] { padding: 0.625rem 0.75rem; background: #0D1117; border: 1px solid #30363D; border-radius: 4px; color: #C9D1D9; font-size: 1rem; } .stack-form input:focus { border-color: #B8860B; outline: none; } .stack-form button { margin-top: 1.25rem; } /* Contact form */ .contact-form { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 1.5rem; } .contact-form label { font-size: 0.875rem; color: #8B949E; margin-top: 0.75rem; } .contact-form input, .contact-form textarea { padding: 0.625rem 0.75rem; background: #0D1117; border: 1px solid #30363D; border-radius: 4px; color: #C9D1D9; font-size: 1rem; font-family: inherit; } .contact-form input:focus, .contact-form textarea:focus { border-color: #B8860B; outline: none; } .contact-form textarea { min-height: 120px; resize: vertical; } .contact-form button { margin-top: 1.25rem; align-self: flex-start; } /* ─── PAGE SCAFFOLD + ENTITY CARDS (2026-06-02 UI polish) ────────── These component classes were referenced across templates (judge search, lists, profiles) but had NO css — so cards rendered as bare text with raw list bullets and the filter row collapsed into cramped default inputs. This block defines them against the existing design tokens. */ .page-shell { padding: 40px 0 80px; } .page-header { margin-bottom: 28px; } .page-header h1 { font-size: var(--text-3xl); line-height: 1.15; margin: 6px 0 0; letter-spacing: -0.01em; } .page-header .lede, .page-header p { color: var(--muted); font-size: var(--text-base); margin: 8px 0 0; max-width: 60ch; } .eyebrow { display: inline-block; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--gold); } /* Filter / search form: a responsive grid of properly-styled fields. */ .filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; align-items: end; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow); } .filter-grid input[type="text"], .filter-grid input[type="search"], .filter-grid select { width: 100%; height: 42px; padding: 0 12px; font: inherit; font-size: var(--text-sm); color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-btn); transition: border-color 120ms ease, box-shadow 120ms ease; } .filter-grid input:focus, .filter-grid select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-dim); } .filter-grid .btn { height: 42px; } .filter-grid .jurisdiction-toggle { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--muted); } /* Result list: real cards, not a bulleted text dump. */ .card-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; } .card-list > li { list-style: none; } .entity-card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 18px 20px; text-decoration: none; color: var(--text); box-shadow: var(--shadow); transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease; } a.entity-card:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: var(--shadow-lg); } .entity-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; line-height: 1.25; } .entity-meta { margin-top: 5px; font-size: var(--text-sm); color: var(--muted); line-height: 1.4; } .entity-card .muted { margin-top: 8px; } @media (max-width: 640px) { .card-list { grid-template-columns: 1fr; } .filter-grid { padding: 16px; } } /* ─── AUTOFIX from Grok + Cursor review (2026-06-02) ──────────────── */ /* Accessibility: real :focus-visible rings on every interactive surface (Cursor P1 — focus was hover-only). */ .top-nav a:focus-visible, a.entity-card:focus-visible, .btn:focus-visible, .theme-toggle:focus-visible, .chat-session-btn:focus-visible, .citation-link:focus-visible, .filter-grid input:focus-visible, .filter-grid select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: var(--radius-btn); } /* Empty-metadata fallback (Grok P0): never a lone "·". When a judge has no court/circuit yet, show an honest muted pending line instead. */ .entity-meta--pending { color: var(--muted); font-style: italic; opacity: 0.85; } .entity-note { margin-top: 8px; font-size: var(--text-sm); color: var(--muted); line-height: 1.45; } /* Tokenized badges (Cursor P1 — was inline white-on-orange, low contrast). */ .badge { display: inline-block; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.02em; padding: 2px 8px; border-radius: 999px; line-height: 1.4; vertical-align: middle; } .badge-state { background: var(--gold-dim); color: var(--gold); } /* Result-count header above the judge grid (Grok #3). */ .result-summary { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 20px 0 4px; font-size: var(--text-sm); color: var(--muted); } .result-summary a { color: var(--gold); font-weight: 600; } /* Components templates referenced but never defined (Cursor P2): alert + panel-card. */ .alert { padding: 12px 16px; border-radius: var(--radius-card); border: 1px solid var(--border); background: var(--surface-2); font-size: var(--text-sm); line-height: 1.5; color: var(--text); } .alert-info { border-color: var(--gold-dim); background: var(--gold-dim); color: var(--text); } .panel-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 24px; box-shadow: var(--shadow); } /* Cursor P0: the generic mobile rule `[class*="sidebar"]{position:fixed;left:-100%}` was hiding the CHAT sidebar off-screen on small viewports. Keep the chat shell's own layout. */ .chat-shell .chat-sidebar, .chat-shell .chat-citations { position: static; left: auto; top: auto; width: auto; max-width: none; height: auto; box-shadow: none; } .badge-municipal { background: rgba(99,102,241,0.15); color: #6366f1; } [data-theme="light"] .badge-municipal { background: rgba(79,70,229,0.10); color: #4338CA; } /* ================================================================ MARKETING SURFACES — homepage + pricing card system (added 2026-06-16: these classes were used in index.html/pricing.html but never defined, so the pages rendered as flat unstyled text. Defined here against the live design tokens to match the app's polish.) ================================================================ */ /* ---- Hero / section typography ---- */ .feature-kicker, .section-subtitle { font-family: var(--font-body); font-size: var(--text-sm, 0.8rem); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); } .section-subtitle { text-transform: none; letter-spacing: 0; color: var(--muted); font-weight: 400; font-size: 1.05rem; } .microcopy { color: var(--muted); font-size: var(--text-sm, 0.85rem); } /* Make the homepage hero headline actually hero-sized */ main > section:first-of-type h1, .hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.1; letter-spacing: -0.01em; } /* ---- Feature card grid (homepage "What You Get" / "Built for Litigators") ---- */ .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.1rem; margin: 1.5rem 0 2.5rem; } .feature-card, .status-card, .panel-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card, 12px); padding: 1.5rem 1.6rem; box-shadow: var(--shadow); transition: border-color 0.15s, transform 0.15s; } .feature-card:hover { border-color: var(--gold); transform: translateY(-2px); } .feature-card h3, .status-card h3, .panel-card h3 { font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; margin: 0 0 0.5rem; color: var(--text); } .feature-card p, .status-card p, .panel-card p { color: var(--muted); font-size: 0.93rem; line-height: 1.55; margin: 0; } .panel-card.warning-card, .warning-card { border-left: 3px solid var(--warning, #B8860B); } /* status lists (homepage build-state bullets) */ .status-list { list-style: none; padding: 0; margin: 0.5rem 0; } .status-list li { padding: 0.35rem 0 0.35rem 1.5rem; position: relative; color: var(--text); font-size: 0.93rem; line-height: 1.5; } .status-list li::before { content: "✓"; position: absolute; left: 0; color: var(--gold); font-weight: 700; } /* citation pills + the live-demo Q&A block */ .cite-pill { display: inline-block; background: var(--accent-subtle, rgba(139,105,20,0.10)); color: var(--gold); border: 1px solid var(--gold); border-radius: 999px; padding: 0.15rem 0.6rem; font-size: 0.78rem; font-weight: 600; margin: 0.15rem 0.2rem 0.15rem 0; white-space: nowrap; } .ls-demo__pill { display:inline-block; background: var(--gold); color:#fff; border-radius:999px; padding:0.1rem 0.55rem; font-size:0.72rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; } .ls-demo__role { font-weight:600; color: var(--text); font-size:0.85rem; } .ls-demo__q { font-weight:600; color: var(--text); margin: 0.4rem 0; } .ls-demo__qa { background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-card,12px); padding:1.3rem 1.5rem; box-shadow: var(--shadow); } .ls-demo__sub, .ls-demo__note { color: var(--muted); font-size: 0.85rem; line-height:1.5; } /* ---- Pricing card columns ---- */ .pricing-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card, 14px); padding: 1.8rem 1.7rem; box-shadow: var(--shadow); display: flex; flex-direction: column; } .pricing-card.accent-card { border: 2px solid var(--gold); box-shadow: 0 6px 24px rgba(139,105,20,0.12); } .pricing-card > h2, .pricing-card > h3 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; margin: 0 0 0.3rem; color: var(--text); } .price-line { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--text); margin: 0.2rem 0 0.1rem; } .price-subline { color: var(--muted); font-size: 0.88rem; margin: 0 0 0.4rem; } .coming-soon { color: var(--muted); font-style: italic; font-size: 0.85rem; } /* a pricing grid wrapper if the template wraps cards in .pricing-grid */ .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.3rem; align-items: stretch; margin: 1.5rem 0; } /* check-list = the feature bullets inside a pricing card */ .check-list { list-style: none; padding: 0; margin: 0.8rem 0 1.2rem; flex: 1; } .check-list li { padding: 0.4rem 0 0.4rem 1.6rem; position: relative; color: var(--text); font-size: 0.92rem; line-height: 1.45; } .check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--gold); font-weight: 700; } /* annual/monthly toggle pills */ .radio-pill { display:inline-block; border:1px solid var(--border); border-radius:999px; padding:0.45rem 1.1rem; cursor:pointer; font-size:0.9rem; color: var(--text); background: var(--surface); } .radio-pill input { margin-right: 0.4rem; } /* ---- State add-on cards ---- */ .state-addons-section { margin: 2.5rem 0; } .addon-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card, 12px); padding: 1.4rem 1.5rem; box-shadow: var(--shadow); margin-bottom: 1rem; } .addon-header { display:flex; align-items:center; gap:0.6rem; font-family: var(--font-display); font-weight:600; font-size:1.05rem; color: var(--text); margin-bottom:0.3rem; } .addon-badge { display:inline-block; background: var(--accent-subtle, rgba(139,105,20,0.10)); color: var(--gold); border:1px solid var(--gold); border-radius:999px; padding:0.1rem 0.55rem; font-size:0.72rem; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; } .addon-description { color: var(--muted); font-size:0.9rem; line-height:1.5; margin:0.2rem 0; } .addon-note { color: var(--muted); font-size:0.82rem; font-style:italic; }