/* ── Brand design tokens ───────────────────────────────────────────────────── Extracted from ai-litigation-staging/src/styles/global.css Fonts loaded via CDN in homepage.html ──────────────────────────────────────────────────────────────────────────── */ :root { --font-sans: 'Geist Variable', system-ui, sans-serif; --font-display: 'Plus Jakarta Sans', sans-serif; --font-ui: 'Barlow', sans-serif; --font-serif: 'Source Serif 4', Georgia, serif; --brand-navy: #0d263c; --brand-blue: #60abd4; --brand-blue-mid: #abcee1; --brand-blue-light: #d4e2e9; --brand-slate: #f6f6f6; --brand-orange: #f34d25; --background: #ffffff; --foreground: #0d263c; --muted-fg: #4a6b80; --border: #d4e2e9; --radius: 0.5rem; } /* ── Base ────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } body { font-family: var(--font-sans); background-color: var(--background); color: var(--foreground); margin: 0; padding: 0; line-height: 1.6; } /* ── Header ──────────────────────────────────────────────────────────────── */ header { background-color: var(--brand-navy); color: #fff; padding: 1.25rem 1.5rem; text-align: center; } header h1 { font-family: var(--font-display); font-size: 1.75rem; font-weight: 800; margin: 0; letter-spacing: -0.01em; } .last-scraped { font-family: var(--font-ui); font-size: 0.8rem; color: var(--brand-blue-mid); margin-top: 0.4rem; } .last-scraped p { margin: 0; } /* ── Nav ─────────────────────────────────────────────────────────────────── */ nav { background-color: #0f2f4a; display: flex; justify-content: center; gap: 2rem; padding: 0.6rem 1rem; border-bottom: 1px solid #1a3d55; } nav a { font-family: var(--font-ui); font-weight: 600; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--brand-blue-mid); text-decoration: none; padding: 0.25rem 0; transition: color 0.15s; } nav a:hover { color: #fff; } nav a.active { color: var(--brand-blue); border-bottom: 2px solid var(--brand-blue); } /* ── Hero (homepage) ─────────────────────────────────────────────────────── */ .hero { background: var(--brand-navy); border-bottom: 3px solid var(--brand-blue); padding: 3rem 2rem 2.5rem; } .hero-inner { max-width: 1200px; margin: 0 auto; } .hero-title { font-family: var(--font-display); font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 800; color: #ffffff; margin: 0 0 0.75rem; letter-spacing: -0.02em; line-height: 1.15; } .hero-subtitle { font-family: var(--font-serif); font-size: 1rem; line-height: 1.7; color: var(--brand-blue-mid); max-width: 640px; margin: 0 0 1rem; } .hero-meta { font-family: var(--font-ui); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #4a6b80; margin: 0; } /* ── Page header (interior pages — User Guide, etc.) ─────────────────────── */ .page-header { background: var(--brand-navy); border-bottom: 3px solid var(--brand-blue); padding: 1.75rem 2rem; } .page-header h1 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: #ffffff; margin: 0; max-width: 1200px; margin-left: auto; margin-right: auto; letter-spacing: -0.01em; } /* ── Week headings ───────────────────────────────────────────────────────── */ .week-heading { display: flex; align-items: center; gap: 0.75rem; margin: 1.5rem 0 0.5rem; } .week-heading:first-child { margin-top: 0; } .week-heading span { font-family: var(--font-ui); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-fg); white-space: nowrap; } .week-heading::after { content: ''; flex: 1; height: 1px; background: var(--border); } /* ── Page layout ─────────────────────────────────────────────────────────── */ .page-layout { display: flex; max-width: 1200px; margin: 0 auto; padding: 1.5rem 1rem; gap: 1.5rem; align-items: flex-start; } .page-main { flex: 1; min-width: 0; } /* ── Sidebar ─────────────────────────────────────────────────────────────── */ .sidebar { width: 220px; flex-shrink: 0; background: var(--brand-slate); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; transition: transform 0.3s ease; } .sidebar-toggle { display: none; background: var(--brand-navy); color: #fff; border: none; padding: 0.5rem 1rem; border-radius: var(--radius); cursor: pointer; font-family: var(--font-ui); font-weight: 600; font-size: 0.85rem; margin-bottom: 1rem; } .sidebar-content h3 { font-family: var(--font-display); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-fg); margin: 0 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--border); } .sidebar-content ul { list-style: none; padding: 0; margin: 0; } .sidebar-content ul li { margin: 0.2rem 0; background: none; box-shadow: none; border: none; padding: 0; border-radius: 0; } .sidebar-content ul li a { display: block; padding: 0.4rem 0.6rem; border-radius: calc(var(--radius) * 0.7); text-decoration: none; font-family: var(--font-sans); font-size: 0.82rem; color: var(--foreground); transition: background 0.15s, color 0.15s; } .sidebar-content ul li a:hover { background: var(--brand-blue-light); color: var(--brand-navy); } .sidebar-content ul li a.active { background: var(--brand-navy); color: #fff; font-weight: 600; } /* ── Sidebar sections (subscribe, TOC) ───────────────────────────────────── */ .sidebar-section { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); } .sidebar-heading { font-family: var(--font-ui); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-fg); margin: 0 0 0.6rem; } /* ── Scrape list cards ───────────────────────────────────────────────────── */ .scrape-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.25rem; } .scrape-list li { background: none; border: none; box-shadow: none; padding: 0; margin: 0; border-radius: 0; } .scrape-list li:hover { box-shadow: none; } .scrape-link { display: block; padding: 0.5rem 0.6rem; border-radius: calc(var(--radius) * 0.7); text-decoration: none; transition: background 0.15s; border: 1px solid transparent; } .scrape-link:hover { background: var(--brand-blue-light); border-color: var(--border); } .scrape-link.active { background: var(--brand-navy); border-color: var(--brand-navy); } .scrape-link-all { font-family: var(--font-ui); font-size: 0.82rem; font-weight: 600; color: var(--foreground); } .scrape-link.active .scrape-link-all { color: #fff; } .scrape-person { display: block; font-family: var(--font-display); font-size: 0.8rem; font-weight: 700; color: var(--foreground); line-height: 1.3; } .scrape-link.active .scrape-person { color: #fff; } .scrape-keyword { display: block; font-family: var(--font-sans); font-size: 0.78rem; color: var(--muted-fg); line-height: 1.4; } .scrape-link.active .scrape-keyword { color: var(--brand-blue-light); } .scrape-freq { display: inline-block; margin-top: 0.2rem; font-family: var(--font-ui); font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand-blue); background: var(--brand-blue-light); padding: 0.1rem 0.45rem; border-radius: 999px; } .scrape-link.active .scrape-freq { background: rgba(255,255,255,0.15); color: #fff; } /* ── Subscribe section ───────────────────────────────────────────────────── */ .subscribe-desc { font-family: var(--font-sans); font-size: 0.78rem; line-height: 1.5; color: var(--foreground); margin: 0 0 0.6rem; } .subscribe-desc.muted { color: var(--muted-fg); font-style: italic; } .subscribe-form { display: flex; flex-direction: column; gap: 0.4rem; margin: 0; } .subscribe-form input[type="email"] { font-family: var(--font-sans); font-size: 0.8rem; padding: 0.4rem 0.6rem; border: 1px solid var(--border); border-radius: calc(var(--radius) * 0.7); background: #fff; color: var(--foreground); width: 100%; outline: none; } .subscribe-form input[type="email"]:focus { border-color: var(--brand-blue); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-blue) 20%, transparent); } .subscribe-form button { font-family: var(--font-ui); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.4rem 0.75rem; background: var(--brand-orange); color: #fff; border: none; border-radius: calc(var(--radius) * 0.7); cursor: pointer; transition: opacity 0.15s; } .subscribe-form button:hover { opacity: 0.88; } .subscribe-msg { font-family: var(--font-sans); font-size: 0.78rem; line-height: 1.5; padding: 0.5rem 0.6rem; border-radius: calc(var(--radius) * 0.7); margin: 0; } .subscribe-msg--ok { background: #e6f7ee; color: #1a5c38; border: 1px solid #a3d9b8; } .subscribe-msg--error { background: #fdf0ee; color: #8c2b1a; border: 1px solid #f5b8ae; } .subscribe-msg--info { background: #eaf4fb; color: var(--brand-navy); border: 1px solid var(--brand-blue-mid); } /* ── Month TOC ───────────────────────────────────────────────────────────── */ .months-toc { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.1rem; } .months-toc li { background: none; border: none; box-shadow: none; padding: 0; margin: 0; border-radius: 0; } .months-toc li:hover { box-shadow: none; } .months-toc-link { display: block; font-family: var(--font-ui); font-size: 0.78rem; font-weight: 500; padding: 0.3rem 0.5rem; border-radius: calc(var(--radius) * 0.5); color: var(--foreground); text-decoration: none; transition: background 0.12s, color 0.12s; } .months-toc-link:hover { background: var(--brand-blue-light); color: var(--brand-navy); } .months-toc-link.active { background: var(--brand-blue); color: #fff; font-weight: 700; } /* ── Controls bar (search form + results count inline) ───────────────────── */ .controls-bar { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; } .controls-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; flex: 1; } /* ── Form controls ───────────────────────────────────────────────────────── */ form { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 0 0 1rem; } form input[type="text"], form select { font-family: var(--font-sans); font-size: 0.875rem; padding: 0.45rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; color: var(--foreground); outline: none; transition: border-color 0.15s, box-shadow 0.15s; } form input[type="text"]:focus, form select:focus { border-color: var(--brand-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-blue) 20%, transparent); } form button[type="submit"] { font-family: var(--font-ui); font-weight: 600; font-size: 0.875rem; padding: 0.45rem 1.1rem; background: var(--brand-orange); color: #fff; border: none; border-radius: var(--radius); cursor: pointer; transition: opacity 0.15s; } form button[type="submit"]:hover { opacity: 0.88; } /* ── Results count ───────────────────────────────────────────────────────── */ .results-count { font-family: var(--font-ui); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-fg); margin: 0; padding: 0.45rem 0.75rem; background: var(--brand-slate); border-left: 3px solid var(--brand-blue); border-radius: 0 var(--radius) var(--radius) 0; white-space: nowrap; } /* ── Result list ─────────────────────────────────────────────────────────── */ ul { list-style: none; padding: 0; margin: 0; } li { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 1rem; padding: 1rem 1.25rem; transition: box-shadow 0.15s; } li:hover { box-shadow: 0 2px 12px color-mix(in srgb, var(--brand-blue) 15%, transparent); } /* ── Result card ─────────────────────────────────────────────────────────── */ .result-card { display: flex; align-items: flex-start; gap: 1rem; } .result-thumbnail { width: 100px; height: auto; border-radius: calc(var(--radius) * 0.6); object-fit: cover; flex-shrink: 0; } .result-icon { font-size: 2.5rem; color: var(--brand-blue-light); width: 100px; text-align: center; flex-shrink: 0; } .result-content { flex: 1; min-width: 0; border-left: 3px solid var(--brand-blue); padding-left: 0.75rem; } .result-content a { text-decoration: none; color: var(--foreground); } .result-content a:hover { color: var(--brand-blue); } /* ── Snippet meta line (date · source, inline) ───────────────────────────── */ .snippet-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; margin-bottom: 0.15rem; } .snippet-meta-date { font-family: var(--font-ui); font-size: 0.75rem; font-weight: 600; color: var(--muted-fg); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; } .snippet-meta-source { font-family: var(--font-ui); font-size: 0.75rem; color: var(--muted-fg); white-space: nowrap; } /* Middot separator only when a date precedes the source. */ .snippet-meta-date + .snippet-meta-source::before { content: "·"; margin-right: 0.4rem; color: var(--muted-fg); } /* ── Title (own row, below the meta line) ────────────────────────────────── */ .snippet-title { font-family: var(--font-display); font-size: 1rem; font-weight: 700; line-height: 1.3; color: var(--foreground); margin-bottom: 0.4rem; word-break: break-word; overflow-wrap: anywhere; } /* ── Meta tags (person + keyword pills) ─────────────────────────────────── */ .meta-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.5rem; } .meta-tag { display: inline-block; font-family: var(--font-ui); font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.15rem 0.55rem; border-radius: 999px; white-space: nowrap; } .meta-tag.person { background: var(--brand-navy); color: #fff; } .meta-tag.keyword { background: var(--brand-blue-light); color: var(--brand-navy); border: 1px solid var(--brand-blue-mid); } /* ── Body text (context snippets) ────────────────────────────────────────── */ .snippet p, .result-content > p { font-family: var(--font-serif); font-size: 0.95rem; line-height: 1.7; color: var(--foreground); margin: 0.4rem 0; } /* ── Expanded snippets: plain stacked list, hairline between (no callout box) ─ */ .snippet-list { margin-top: 0.25rem; } /* Override the generic card chrome the global `li` rule applies. */ .snippet { background: none; border: none; border-radius: 0; margin: 0; padding: 0.6rem 0; border-bottom: 1px solid var(--border); } .snippet:last-child { border-bottom: none; padding-bottom: 0; } .snippet:hover { box-shadow: none; } .snippet p { margin: 0; } /* ── Read more ───────────────────────────────────────────────────────────── */ .read-more { font-family: var(--font-ui); font-weight: 600; font-size: 0.78rem; color: var(--brand-blue); text-decoration: none; margin-left: 0.4rem; white-space: nowrap; } .read-more:hover { text-decoration: underline; color: var(--brand-navy); } /* ── Snippet expand toggle (text-only, with a +/× icon) ──────────────────── */ .snippet-toggle { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-ui); font-weight: 600; font-size: 0.8rem; color: var(--brand-blue); background: none; border: none; padding: 0.2rem 0; margin-top: 0.5rem; cursor: pointer; list-style: none; } .snippet-toggle::-webkit-details-marker { display: none; } .snippet-toggle:hover { color: var(--brand-navy); text-decoration: underline; } .snippet-toggle-icon { font-size: 0.7rem; transition: transform 0.15s ease; } /* Plus rotates into an × when the extra snippets are open. */ details[open] .snippet-toggle-icon { transform: rotate(45deg); } /* ── Pagination ──────────────────────────────────────────────────────────── */ .pagination { display: flex; justify-content: center; align-items: center; gap: 0.75rem; font-family: var(--font-ui); font-size: 0.875rem; color: var(--muted-fg); margin: 2rem 0 1rem; } .pagination a { color: var(--brand-blue); font-weight: 600; text-decoration: none; transition: color 0.15s; } .pagination a:hover { color: var(--brand-navy); text-decoration: underline; } /* ── Load More button ────────────────────────────────────────────────────── */ .load-more-item { background: none; border: none; box-shadow: none; padding: 0.75rem 0; text-align: center; } .load-more-item:hover { box-shadow: none; } .load-more-btn { font-family: var(--font-ui); font-weight: 600; font-size: 0.875rem; padding: 0.6rem 2.5rem; background: transparent; color: var(--brand-blue); border: 2px solid var(--brand-blue); border-radius: 999px; cursor: pointer; transition: background 0.15s, color 0.15s; } .load-more-btn:hover { background: var(--brand-blue); color: #fff; } .load-more-btn.htmx-request { opacity: 0.55; pointer-events: none; } /* ── Prose (editorial / about page content) ─────────────────────────────── */ .about-layout { max-width: 820px; margin: 2.5rem auto; padding: 0 1.5rem; } .prose h2 { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; color: var(--foreground); margin: 2.25rem 0 0.5rem; padding-bottom: 0.4rem; border-bottom: 2px solid var(--border); } .prose h3 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--foreground); margin: 1.5rem 0 0.35rem; } .prose p { font-family: var(--font-serif); font-size: 1rem; line-height: 1.8; color: var(--foreground); margin: 0.6rem 0; } .prose ol, .prose ul { font-family: var(--font-serif); font-size: 0.975rem; line-height: 1.75; color: var(--foreground); margin: 0.6rem 0; padding-left: 1.5rem; list-style: revert; } /* Reset the global li card styles inside prose */ .prose li { background: none; border: none; box-shadow: none; padding: 0; margin-bottom: 0.4rem; border-radius: 0; transition: none; } .prose li:hover { box-shadow: none; } .prose strong { font-weight: 700; } .prose em { font-style: italic; } .prose a { color: var(--brand-blue); text-decoration: underline; } /* ── Responsive ──────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .sidebar { position: fixed; top: 0; left: 0; height: 100%; border-radius: 0; transform: translateX(-100%); z-index: 1000; overflow-y: auto; } .sidebar.open { transform: translateX(0); } .sidebar-toggle { display: inline-block; } .page-layout { flex-direction: column; padding: 1rem; } } @media (max-width: 500px) { .result-card { flex-direction: column; align-items: center; text-align: center; } .result-thumbnail, .result-icon { margin-bottom: 0.5rem; } .result-content { text-align: center; border-left: none; border-top: 3px solid var(--brand-blue); padding-left: 0; padding-top: 0.5rem; } .snippet-meta { justify-content: center; } .meta-tags { justify-content: center; } }