:root { /* ── Dark theme (default) ───────────────────────────────────────── prefers-color-scheme media query below flips these to light when the user's OS / browser is set to light AND they haven't explicitly overridden via [data-theme]. [data-theme="dark"] / [data-theme="light"] wins over both (user clicked the toggle). */ color-scheme: dark light; --bg: #0a0a0a; --bg2: #111111; --bg3: #1a1a1a; --bg-nav: #080808; --bg-card-hover: #14141a; --bg-code: #161616; --border: #2a2a2a; --border-strong: #444; --text: #e2e2e2; --text-strong: #ffffff; --text-dim: #bbb; --text-dim-2: #ccc; --text-dim-3: #ddd; --muted: #888; --muted-2: #555; --muted-3: #444; --accent: #e63946; --accent2: #c1121f; --accent-hover: #c62828; --accent-light: #ff6b75; --link: #e63946; --code-fg: #f0a04b; /* Verdict swatches — used by chips, badges, hero left-borders. The bg/fg pairing is tuned for contrast in each theme separately. */ --vc-correct-bg: #0d2e0d; --vc-correct-fg: #4caf50; --vc-wrong-bg: #2e0d0d; --vc-wrong-fg: #e63946; --vc-partial-bg: #3a2806; --vc-partial-fg: #ffb547; --vc-uncertain-bg: #2a2000; --vc-uncertain-fg: #f0a500; --max-w: 760px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } /* Auto-detect light mode from system preference. The user has NOT explicitly picked a theme via the top-nav toggle (no [data-theme] attribute set on ) — match the OS. */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { --bg: #ffffff; --bg2: #f7f7f7; --bg3: #ededed; --bg-nav: #fafafa; --bg-card-hover: #f5f5f5; --bg-code: #f3f3f3; --border: #e0e0e0; --border-strong: #aaaaaa; --text: #1a1a1a; --text-strong: #000000; --text-dim: #555555; --text-dim-2: #444444; --text-dim-3: #2a2a2a; --muted: #6a6a6a; --muted-2: #8a8a8a; --muted-3: #b0b0b0; --accent: #c1121f; --accent2: #e63946; --accent-hover: #a00d18; --accent-light: #d63944; --link: #c1121f; --code-fg: #b35d00; --vc-correct-bg: #e8f5e9; --vc-correct-fg: #2e7d32; --vc-wrong-bg: #ffebee; --vc-wrong-fg: #c1121f; --vc-partial-bg: #fff4e0; --vc-partial-fg: #b87900; --vc-uncertain-bg: #fff8d0; --vc-uncertain-fg: #8a6c00; } } /* Explicit user choice — wins over both default dark and the OS media query. JS in base.html reads localStorage and sets data-theme on before paint to prevent FOUC. */ :root[data-theme="light"] { --bg: #ffffff; --bg2: #f7f7f7; --bg3: #ededed; --bg-nav: #fafafa; --bg-card-hover: #f5f5f5; --bg-code: #f3f3f3; --border: #e0e0e0; --border-strong: #aaaaaa; --text: #1a1a1a; --text-strong: #000000; --text-dim: #333333; --text-dim-2: #444444; --text-dim-3: #555555; --muted: #6a6a6a; --muted-2: #8a8a8a; --muted-3: #b0b0b0; --accent: #c1121f; --accent2: #e63946; --accent-hover: #a00d18; --accent-light: #d63944; --link: #c1121f; --code-fg: #b35d00; --vc-correct-bg: #e8f5e9; --vc-correct-fg: #2e7d32; --vc-wrong-bg: #ffebee; --vc-wrong-fg: #c1121f; --vc-partial-bg: #fff4e0; --vc-partial-fg: #b87900; --vc-uncertain-bg: #fff8d0; --vc-uncertain-fg: #8a6c00; } /* No [data-theme="dark"] block needed — :root defaults are dark. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: var(--font); line-height: 1.7; -webkit-font-smoothing: antialiased; /* Guard against accidental horizontal overflow on mobile. Any rogue wide element (long word, oversized grid card, mis-sized iframe) would otherwise create a horizontal scroll on narrow viewports — visible as "user can scroll the page a bit sideways". Belt-and- braces only; the real fix is to size every component within the container, but this stops the leak. */ overflow-x: hidden; max-width: 100vw; } /* ── Site nav ── */ .site-nav { background: var(--bg-nav); border-bottom: 1px solid var(--border); padding: 0 24px; display: flex; align-items: center; justify-content: space-between; height: 52px; position: sticky; top: 0; z-index: 100; } .site-nav .brand { font-weight: 800; font-size: 1.05rem; color: var(--accent); text-decoration: none; letter-spacing: -.5px; } .site-nav .brand span { color: var(--text); } .site-nav .nav-links { display: flex; gap: 20px; align-items: center; } .site-nav .nav-links a { color: var(--muted); text-decoration: none; font-size: .88rem; transition: color .15s; } .site-nav .nav-links a:hover { color: var(--text); } .site-nav .nav-links a.active { color: var(--text); } .site-nav .cta-btn { background: var(--accent); color: #fff !important; padding: 6px 14px; border-radius: 6px; font-size: .82rem; font-weight: 600; transition: background .15s; } .site-nav .cta-btn:hover { background: var(--accent2) !important; } .site-nav .lang-switcher { background: var(--bg2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; font-size: .78rem; font-weight: 600; cursor: pointer; } .site-nav .lang-switcher:hover { border-color: var(--muted); } /* ── Theme toggle (light/dark) ───────────────────────────────────────── Sun visible in dark mode (click → go light); moon visible in light mode (click → go dark). CSS-only icon swap based on [data-theme] on (set by base.html bootstrap script) and the prefers-color-scheme media query (system default when no explicit choice). */ .theme-toggle { background: var(--bg2); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 3px 9px; font-size: .9rem; line-height: 1.2; cursor: pointer; transition: border-color .15s, background .15s; } .theme-toggle:hover { border-color: var(--border-strong); } .theme-toggle .ic-sun { display: inline-block; } .theme-toggle .ic-moon { display: none; } @media (prefers-color-scheme: light) { :root:not([data-theme]) .theme-toggle .ic-sun { display: none; } :root:not([data-theme]) .theme-toggle .ic-moon { display: inline-block; } } :root[data-theme="light"] .theme-toggle .ic-sun { display: none; } :root[data-theme="light"] .theme-toggle .ic-moon { display: inline-block; } /* ── Container ── */ .container { max-width: var(--max-w); margin: 0 auto; padding: 0 20px; } .container-wide { max-width: 1080px; margin: 0 auto; padding: 0 24px; } /* ── Blog index ── */ .blog-header { padding: 56px 0 36px; border-bottom: 1px solid var(--border); margin-bottom: 40px; } .blog-header h1 { font-size: 2rem; font-weight: 800; letter-spacing: -.5px; margin-bottom: 8px; } .blog-header h1 span { color: var(--accent); } .blog-header p { color: var(--muted); font-size: .95rem; } /* Blog post list — flat single-card layout. The old grid-trick (grid w/ gap:1px + bg:border) was creating phantom dividers around child elements that some browsers rendered as 3 stacked boxes per post. This is a plain stack of bordered cards, separated by margin — zero ambiguity. */ .post-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 48px; } .post-card { display: block; background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 22px 24px; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s, background .15s; } .post-card:hover { border-color: var(--accent); background: var(--bg-card-hover); transform: translateY(-1px); } .post-card-cover { display: block; width: 100%; max-height: 180px; object-fit: cover; border-radius: 8px; margin-bottom: 14px; background: var(--bg3); } .post-card-overhead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .74rem; color: var(--muted); margin-bottom: 10px; } .post-card-overhead .post-card-dot { color: var(--muted-3); } .post-card-title { font-size: 1.2rem; font-weight: 800; color: var(--text); line-height: 1.35; letter-spacing: -.01em; margin: 0 0 8px; } .post-card:hover .post-card-title { color: var(--accent); } .post-card-desc { font-size: .9rem; color: var(--muted); line-height: 1.55; margin: 0 0 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .post-card-cta { display: inline-block; font-size: .82rem; font-weight: 700; color: var(--accent); letter-spacing: .01em; } .post-card:hover .post-card-cta { text-decoration: underline; } .tag-pill { display: inline-block; background: var(--bg3); color: var(--muted); font-size: .72rem; padding: 2px 8px; border-radius: 20px; border: 1px solid var(--border); text-decoration: none; } .tag-pill:hover { color: var(--text); border-color: var(--border-strong); } /* ── RSS link ── */ .rss-link { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .82rem; text-decoration: none; border: 1px solid var(--border); padding: 5px 12px; border-radius: 6px; margin-bottom: 32px; } .rss-link:hover { color: var(--text); border-color: var(--border-strong); } /* ── Empty state ── */ .empty-state { text-align: center; padding: 80px 20px; color: var(--muted); } .empty-state h2 { font-size: 1.2rem; margin-bottom: 8px; color: var(--text); } /* ── Article page ── */ .article-hero { padding: 48px 0 32px; } .article-hero .article-tags { margin-bottom: 14px; display: flex; gap: 8px; flex-wrap: wrap; } .article-hero h1 { font-size: 2rem; font-weight: 800; letter-spacing: -.5px; line-height: 1.25; margin-bottom: 16px; } .article-hero .article-meta { color: var(--muted); font-size: .85rem; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-bottom: 24px; } .article-hero .article-desc { font-size: 1.1rem; color: var(--text-dim); line-height: 1.6; border-left: 3px solid var(--accent); padding-left: 16px; } .cover-img { width: 100%; max-height: 420px; object-fit: cover; border-radius: 10px; margin: 24px 0; display: block; } /* ── Article content ── */ .article-body { padding: 32px 0 64px; border-top: 1px solid var(--border); } .article-body h2 { font-size: 1.45rem; font-weight: 700; margin: 40px 0 14px; letter-spacing: -.3px; color: var(--text-strong); } .article-body h3 { font-size: 1.15rem; font-weight: 600; margin: 28px 0 10px; color: var(--text-dim-3); } .article-body p { margin-bottom: 18px; } .article-body ul, .article-body ol { margin: 0 0 18px 20px; } .article-body li { margin-bottom: 6px; } .article-body strong { color: var(--text-strong); font-weight: 600; } .article-body em { color: var(--text-dim-2); } .article-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .article-body a:hover { color: var(--accent-light); } .article-body blockquote { border-left: 3px solid var(--accent); margin: 24px 0; padding: 12px 20px; background: var(--bg2); border-radius: 0 6px 6px 0; color: var(--text-dim-2); } .article-body blockquote p { margin: 0; } .article-body code { font-family: "Fira Code", "Cascadia Code", monospace; font-size: .88em; background: var(--bg-code); padding: 2px 6px; border-radius: 4px; color: var(--code-fg); border: 1px solid var(--border); } .article-body pre { background: var(--bg-code); border: 1px solid var(--border); border-radius: 8px; padding: 18px 20px; overflow-x: auto; margin-bottom: 20px; } .article-body pre code { background: none; border: none; padding: 0; font-size: .88rem; color: var(--text); } .article-body table { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: .9rem; } .article-body th { text-align: left; padding: 10px 14px; background: var(--bg2); border-bottom: 2px solid var(--border); color: var(--text-dim-2); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; } .article-body td { padding: 10px 14px; border-bottom: 1px solid var(--border); } .article-body tr:hover td { background: var(--bg2); } .article-body hr { border: none; border-top: 1px solid var(--border); margin: 36px 0; } /* ── Back to app CTA ── */ .back-cta { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 24px; text-align: center; margin: 40px 0; } .back-cta p { color: var(--muted); font-size: .9rem; margin-bottom: 12px; } .back-cta a { display: inline-block; background: var(--accent); color: #fff; padding: 10px 24px; border-radius: 7px; font-weight: 600; font-size: .9rem; text-decoration: none; transition: background .15s; } .back-cta a:hover { background: var(--accent2); } /* ── Article language switcher ── Dedicated row above the fold CTA so it's discoverable. Earlier placement inside .article-meta made it a 54×25 squashed pill that readers missed. Now: clear "🌍 Read in:" label + visibly sized dropdown matching the Streamlit nav dropdown style. */ .article-lang-row { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; } .article-lang-label { font-size: .85rem; color: var(--text-dim-2); font-weight: 500; } .article-lang-switch { display: inline-flex; align-items: center; position: relative; } .article-lang-switch select { appearance: none; -webkit-appearance: none; background: var(--bg2); color: var(--text-strong); border: 1px solid var(--border); border-radius: 7px; font-size: .85rem; font-weight: 600; padding: 6px 28px 6px 12px; letter-spacing: .5px; cursor: pointer; text-transform: uppercase; font-family: inherit; line-height: 1.3; min-width: 64px; } .article-lang-switch::after { content: "▾"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: .7rem; color: var(--muted); pointer-events: none; } .article-lang-switch select:hover { border-color: var(--accent); } .article-lang-switch select:focus { outline: 2px solid var(--accent); outline-offset: 1px; } /* ── Above-the-fold "soft" CTA ── Tiny one-liner that appears right after the article description, before the body. Sets the expectation that the article is grounded in real data AND plants "I can do this myself" early. Deliberately understated so it doesn't compete with the article opening. */ .article-fold-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--bg2); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 6px; padding: 10px 16px; margin: 20px 0 8px; font-size: .82rem; color: var(--text-dim-2); } .article-fold-cta strong { color: var(--text-strong); font-weight: 600; } .article-fold-cta a { color: var(--accent); font-weight: 600; text-decoration: none; white-space: nowrap; } .article-fold-cta a:hover { color: var(--accent-light); text-decoration: underline; } @media (max-width: 560px) { .article-fold-cta { flex-direction: column; align-items: stretch; text-align: left; } } /* ── Mid-article CTA card ── Injected after the first

by blog_router.py. Highest-converting slot — reader is bought in but hasn't finished. */ .article-mid-cta { background: linear-gradient(135deg, var(--bg2) 0%, var(--bg) 100%); border: 1px solid var(--accent); border-radius: 12px; padding: 22px 24px; margin: 36px 0; position: relative; } .article-mid-cta::before { content: "🎬"; position: absolute; top: -14px; left: 22px; background: var(--bg); padding: 2px 10px; font-size: 1.4rem; line-height: 1; } .article-mid-cta h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 6px; color: var(--text-strong); letter-spacing: -.2px; } .article-mid-cta p { font-size: .9rem; color: var(--text-dim-2); margin: 0 0 14px; line-height: 1.55; } .article-mid-cta a { display: inline-block; background: var(--accent); color: #fff !important; padding: 9px 20px; border-radius: 7px; font-weight: 600; font-size: .85rem; text-decoration: none !important; transition: background .15s; } .article-mid-cta a:hover { background: var(--accent2); } .article-mid-cta .mid-cta-foot { display: block; margin-top: 8px; font-size: .72rem; color: var(--muted); } /* ── In-content "AI Verdict" callout ── Editorial mini-card embedded when an article references a real case. Drop into article markdown via:
⚖ AI VERDICT · Case #27
Leeds vs Spurs · 65th minute
WRONG HIGH confidence · Law 11
See the full analysis →
*/ .ai-verdict { border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 8px; padding: 14px 18px; margin: 24px 0; background: var(--bg2); font-size: .9rem; } .ai-verdict-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: 1px; color: var(--muted); text-transform: uppercase; margin-bottom: 6px; } .ai-verdict-match { font-weight: 600; color: var(--text-strong); margin-bottom: 10px; } .ai-verdict-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; } .ai-verdict-tag { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .5px; background: #555; color: #fff; } .ai-verdict-tag.verdict-correct { background: #2e7d32; } .ai-verdict-tag.verdict-wrong { background: #b71c1c; } .ai-verdict-tag.verdict-partial { background: #d97706; } .ai-verdict-tag.verdict-insufficient { background: #6b7280; } .ai-verdict-conf { font-size: .78rem; color: var(--text-dim-2); } .ai-verdict a { font-size: .85rem; color: var(--accent); font-weight: 600; text-decoration: none; } .ai-verdict a:hover { text-decoration: underline; } /* ── Sticky mobile bottom-bar CTA ── Mobile-only. Slides in once reader passes hero. */ .sticky-cta-bar { position: fixed; bottom: 0; left: 0; right: 0; background: var(--bg); border-top: 1px solid var(--border); padding: 10px 16px; display: none; z-index: 50; box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.18); transform: translateY(100%); transition: transform .25s ease-out; } .sticky-cta-bar.visible { transform: translateY(0); } .sticky-cta-bar a { display: block; background: var(--accent); color: #fff; text-align: center; padding: 11px 18px; border-radius: 7px; font-weight: 600; font-size: .92rem; text-decoration: none; } .sticky-cta-bar a:hover { background: var(--accent2); } @media (max-width: 760px) { .sticky-cta-bar { display: block; } body.has-sticky-cta { padding-bottom: 64px; } } /* ── Footer ── */ .blog-footer { border-top: 1px solid var(--border); padding: 24px; text-align: center; color: var(--muted); font-size: .8rem; } .blog-footer a { color: var(--muted); text-decoration: none; } .blog-footer a:hover { color: var(--text); } /* Social row — sits above the legal nav, icons inherit the muted→bright hover from the rule above. Extra padding-bottom keeps the legal row's first-line spacing intact. */ .blog-footer-social { margin: 0 0 12px 0; display: flex; justify-content: center; gap: 18px; } .blog-footer-social a { display: inline-flex; align-items: center; line-height: 0; } .blog-footer-social svg { display: block; } /* ── Responsive ── */ @media (max-width: 640px) { .site-nav .nav-links .hide-mobile { display: none; } .article-hero h1 { font-size: 1.55rem; } .blog-header h1 { font-size: 1.55rem; } .post-card { padding: 18px 18px; } .post-card-title { font-size: 1.05rem; } } /* Defensive resets — make sure no descendant of .post-card carries a stray border/background that some browsers (or a stale cached stylesheet) render as a separate box. The card itself is the only bordered surface; children are layout-only. */ .post-card > *, .post-card-overhead, .post-card-overhead > *, .post-card-title, .post-card-desc, .post-card-cta { background: transparent !important; border: 0 !important; box-shadow: none !important; } /* Tag pills are the only intentional bordered chip inside the card. */ .post-card .tag-pill { background: var(--bg3) !important; border: 1px solid var(--border) !important; } /* ── Entity pages (teams, refs, competitions) ────────────────────────────── */ .entity-hero { text-align: center; padding: 56px 0 32px; } .entity-type-badge { display: inline-block; background: var(--bg2); color: var(--accent); font-size: .72rem; font-weight: 700; letter-spacing: .1em; padding: 4px 12px; border-radius: 20px; border: 1px solid var(--border); margin-bottom: 16px; } .entity-hero h1 { font-size: 2.4rem; font-weight: 900; letter-spacing: -.03em; margin: 0 0 8px; } /* National-team flag emoji rendered inline with the H1. Slightly smaller than the title text so the country name stays the visual anchor. Letter-spacing reset because emoji glyphs include their own padding. */ .entity-hero h1 .entity-flag { display: inline-block; font-size: .85em; margin-right: .15em; letter-spacing: 0; transform: translateY(-0.05em); } .entity-subtitle { color: var(--muted); font-size: 1rem; margin-top: 4px; } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin: 32px 0; } .stat-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 20px 16px; text-align: center; } .stat-value { font-size: 2rem; font-weight: 900; color: var(--accent); line-height: 1; margin-bottom: 6px; } .stat-label { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; } .recent-section { margin: 40px 0; } .recent-section h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: 14px; border-bottom: 1px solid var(--border); padding-bottom: 8px; } .recent-section-foot { font-size: .8rem; color: var(--muted); margin: 14px 0 0; text-align: right; } .recent-section-foot a { color: var(--accent); text-decoration: none; font-weight: 600; } .recent-section-foot a:hover { text-decoration: underline; } .case-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; text-decoration: none; color: var(--text); transition: border-color .15s, background .15s; gap: 12px; } .case-item:hover { border-color: var(--border-strong); background: var(--bg-card-hover); } .case-match { font-size: .9rem; font-weight: 600; } .case-meta { font-size: .76rem; color: var(--muted); margin-top: 2px; } .verdict-badge { font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; } .verdict-correct { background: var(--vc-correct-bg); color: var(--vc-correct-fg); } .verdict-wrong { background: var(--vc-wrong-bg); color: var(--vc-wrong-fg); } .verdict-partial { background: var(--vc-partial-bg); color: var(--vc-partial-fg); } .verdict-uncertain{ background: var(--vc-uncertain-bg); color: var(--vc-uncertain-fg); } .entity-cta { text-align: center; padding: 56px 0 32px; border-top: 1px solid var(--border); margin-top: 48px; } .entity-cta p { color: var(--muted); margin-bottom: 20px; font-size: 1rem; } .cta-btn-large { display: inline-block; background: var(--accent); color: #fff; font-weight: 700; font-size: 1rem; padding: 14px 32px; border-radius: 8px; text-decoration: none; transition: opacity .15s; } .cta-btn-large:hover { opacity: .85; text-decoration: none; } @media (max-width: 640px) { .entity-hero h1 { font-size: 1.8rem; } .stat-grid { grid-template-columns: repeat(2, 1fr); } } /* ── Case page (single VAR verdict) ──────────────────────────────────────── */ .case-hero { position: relative; background: var(--bg2); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 12px; padding: 32px 28px; margin: 32px 0 16px; } .case-hero.verdict-bg-correct { border-left-color: var(--vc-correct-fg); } .case-hero.verdict-bg-wrong { border-left-color: var(--vc-wrong-fg); } .case-hero.verdict-bg-partial { border-left-color: var(--vc-partial-fg); } .case-hero.verdict-bg-uncertain { border-left-color: var(--vc-uncertain-fg); } .case-eyebrow { font-size: .68rem; font-weight: 800; letter-spacing: .14em; color: var(--accent); text-transform: uppercase; margin-bottom: 10px; } .case-teams { font-size: 2rem; font-weight: 900; letter-spacing: -.03em; margin: 0 0 8px; line-height: 1.2; } .case-match-meta { color: var(--muted); font-size: .9rem; margin: 0 0 18px; } .case-verdict-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 18px; } .case-verdict-chip { font-size: .85rem; font-weight: 700; padding: 6px 14px; border-radius: 20px; text-transform: uppercase; letter-spacing: .04em; } .case-verdict-chip.verdict-correct { background: var(--vc-correct-bg); color: var(--vc-correct-fg); } .case-verdict-chip.verdict-wrong { background: var(--vc-wrong-bg); color: var(--vc-wrong-fg); } .case-verdict-chip.verdict-partial { background: var(--vc-partial-bg); color: var(--vc-partial-fg); } .case-verdict-chip.verdict-uncertain { background: var(--vc-uncertain-bg); color: var(--vc-uncertain-fg); } .case-conf { font-size: .8rem; color: var(--muted); font-weight: 600; } .case-thumb { width: 100%; max-height: 480px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); margin: 16px 0 24px; } /* Side-by-side hero: verdict info on the left, thumbnail on the right. Stacks vertically on mobile so neither side gets squeezed. The hero itself loses its top/bottom margin inside the row so both columns align cleanly. */ .case-hero-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: stretch; margin: 32px 0 16px; } .case-hero-row .case-hero { margin: 0; height: 100%; } .case-thumb-side { width: 100%; height: 100%; min-height: 200px; max-height: 280px; object-fit: cover; border-radius: 12px; border: 1px solid var(--border); display: block; } @media (max-width: 720px) { .case-hero-row { grid-template-columns: 1fr; } .case-thumb-side { max-height: 220px; } } .case-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 24px 0; } .case-fact { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; } .case-fact-label { font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; } .case-fact-value { font-size: .92rem; font-weight: 600; color: var(--text); line-height: 1.4; } .case-fact-value a { color: var(--accent); text-decoration: none; } .case-fact-value a:hover { text-decoration: underline; } .case-section { margin: 36px 0; } .case-section h2 { font-size: 1.2rem; font-weight: 700; margin-bottom: 12px; border-bottom: 1px solid var(--border); padding-bottom: 6px; } .case-body { color: var(--text-dim-2); font-size: .95rem; line-height: 1.7; white-space: pre-wrap; } .case-key-points { list-style: none; padding: 0; margin: 0; } .case-key-points li { position: relative; padding: 10px 16px 10px 32px; margin-bottom: 8px; background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; font-size: .92rem; color: var(--text-dim-2); line-height: 1.55; } .case-key-points li::before { content: "▸"; position: absolute; left: 14px; top: 10px; color: var(--accent); font-weight: 700; } /* Locked-content CTA — shown in place of the (paid) full reasoning + key points on static case pages. The static page is marketing surface only; the interactive Streamlit app is where votes/comments/full reasoning live. Card carries enough product weight to make the click feel earned. */ .case-cta-locked { background: linear-gradient(160deg, var(--bg2) 0%, rgba(229,57,53,.06) 100%); border: 1px solid var(--accent); border-radius: 12px; padding: 28px 32px; margin: 36px 0; text-align: left; } .case-cta-eyebrow { font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; } .case-cta-title { font-size: 1.5rem; font-weight: 800; margin: 0 0 10px; color: var(--text); } .case-cta-body { font-size: .94rem; line-height: 1.6; color: var(--text-dim); margin-bottom: 18px; } .case-cta-feats { list-style: none; padding: 0; margin: 0 0 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; } .case-cta-feats li { font-size: .88rem; color: var(--text-dim-3); padding: 6px 0; } .case-cta-locked .cta-btn-large { display: inline-block; } .case-cta-foot { font-size: .76rem; color: var(--muted); margin: 12px 0 0; } @media (max-width: 640px) { .case-teams { font-size: 1.5rem; } .case-hero { padding: 22px 18px; } .case-cta-locked { padding: 22px 20px; } .case-cta-feats { grid-template-columns: 1fr; } } /* ── Team hyperlinks in the case hero ──────────────────────────────────── */ /* Teams and match meta are clickable but visually subtle — the verdict should still be what reads first. Underline appears only on hover. */ .case-teams a { color: inherit; text-decoration: none; border-bottom: 2px solid transparent; transition: border-color .15s ease; } .case-teams a:hover { border-bottom-color: var(--accent); } .case-teams .vs-sep { color: var(--muted); font-weight: 600; margin: 0 .25em; } .case-match-meta a { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--muted); transition: border-color .15s ease; } .case-match-meta a:hover { border-bottom-color: var(--accent); } /* ── Community agreement teaser ────────────────────────────────────────── */ .case-community { font-size: .9rem; color: var(--text); margin: 14px 0 0; display: flex; align-items: center; gap: 4px; } .case-community strong { font-weight: 800; color: var(--text); } .case-community.case-community-empty { color: var(--muted); font-style: italic; } /* ── Engagement bar (vote + share) ─────────────────────────────────────── */ /* Sits right under the verdict tile. Vote buttons are the primary conversion path (clicks → Streamlit case page → sign-in popup); share buttons drive distribution. Mobile: wraps cleanly to two rows. */ .case-engagement { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); } .ce-btn { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 700; padding: 9px 14px; border-radius: 8px; text-decoration: none; border: 1px solid var(--border); background: var(--bg2); color: var(--text); transition: background .15s ease, border-color .15s ease, transform .1s ease; } .ce-btn:hover { background: var(--bg3); border-color: var(--accent); transform: translateY(-1px); } .ce-vote-up:hover { color: var(--vc-correct-fg); border-color: var(--vc-correct-fg); } .ce-vote-down:hover { color: var(--accent); border-color: var(--accent); } .ce-share-group { display: inline-flex; gap: 10px; margin-left: auto; flex-wrap: wrap; } /* Circular icon pills with each platform's brand colour as a thin outline. SVG glyph sits in currentColor; the --share-fg custom property (set inline per-button in case.html) drives the fill on hover, matching the Streamlit `_share_section` treatment exactly. */ .ce-share { width: 38px; height: 38px; padding: 0; border-radius: 50%; border-color: var(--share-fg, var(--accent)); display: inline-flex; align-items: center; justify-content: center; transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease; } .ce-share svg { width: 18px; height: 18px; display: block; } .ce-share:hover { background: var(--share-fg, var(--accent)) !important; color: #fff !important; border-color: var(--share-fg, var(--accent)) !important; transform: translateY(-1px); } @media (max-width: 540px) { .case-engagement { flex-direction: column; align-items: stretch; } .ce-vote { width: 100%; justify-content: center; } .ce-share-group { margin-left: 0; justify-content: center; gap: 14px; } /* Bump touch target to ≥40px on phones so fingers clear the surrounding gap (Apple HIG asks for 44pt minimum). */ .ce-share { width: 44px; height: 44px; } .ce-share svg { width: 20px; height: 20px; } } /* ── Inline upgrade nudge ──────────────────────────────────────────────── */ /* Compact, above-the-fold "what you're missing" callout between the action grid and the bottom CTA. Reinforces the upgrade prompt without the verbosity of the locked-content CTA box at the page bottom. */ .case-inline-upgrade { background: linear-gradient(135deg, rgba(229, 57, 53, 0.08), rgba(229, 57, 53, 0.02)); border: 1px solid rgba(229, 57, 53, 0.35); border-left: 4px solid var(--accent); border-radius: 10px; padding: 18px 22px; margin: 24px 0; } .ciu-headline { margin: 0 0 12px; font-size: .95rem; font-weight: 800; color: var(--text); letter-spacing: -.01em; } .ciu-list { list-style: none; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px 18px; } .ciu-list li { font-size: .86rem; color: var(--text); padding-left: 18px; position: relative; line-height: 1.45; } .ciu-list li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 800; } .ciu-btn { display: inline-block; padding: 10px 20px; background: var(--accent); color: #fff; font-weight: 700; font-size: .9rem; border-radius: 8px; text-decoration: none; transition: background .15s ease, transform .1s ease; } .ciu-btn:hover { background: var(--accent-hover); transform: translateY(-1px); } .ciu-foot { margin: 12px 0 0; font-size: .78rem; color: var(--muted); } @media (max-width: 540px) { .case-inline-upgrade { padding: 16px 18px; } .ciu-list { grid-template-columns: 1fr; } .ciu-btn { display: block; text-align: center; } } /* ── Related cases section ─────────────────────────────────────────────── */ /* Pulls visitors deeper into the site after the case CTA. Each card is a single so the whole tile is clickable. Lazy-loaded thumbnails keep the page weight bounded even with 5 entries. */ .related-cases { margin: 40px 0 32px; } .rc-title { font-size: 1.1rem; font-weight: 800; letter-spacing: -.01em; margin: 0 0 16px; color: var(--text); } .rc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } .rc-card { display: flex; flex-direction: column; background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; text-decoration: none; color: inherit; transition: border-color .15s ease, transform .1s ease; } .rc-card:hover { border-color: var(--accent); transform: translateY(-2px); } .rc-thumb { width: 100%; height: 120px; object-fit: cover; display: block; background: var(--bg); } .rc-thumb-blank { background: linear-gradient(135deg, var(--bg), var(--bg2)); } .rc-body { padding: 12px 14px 14px; } .rc-verdict { display: inline-block; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 3px 9px; border-radius: 12px; margin-bottom: 8px; } .rc-verdict-correct { background: var(--vc-correct-bg); color: var(--vc-correct-fg); } .rc-verdict-wrong { background: var(--vc-wrong-bg); color: var(--vc-wrong-fg); } .rc-verdict-partial { background: var(--vc-partial-bg); color: var(--vc-partial-fg); } .rc-verdict-uncertain { background: var(--vc-uncertain-bg); color: var(--vc-uncertain-fg); } .rc-teams { font-size: .92rem; font-weight: 700; line-height: 1.3; margin-bottom: 6px; color: var(--text); } .rc-meta { font-size: .76rem; color: var(--muted); line-height: 1.4; } /* ── Entity submit CTA ─────────────────────────────────────────────────── */ /* Single-row banner at the top of /teams, /refs, /competitions, /match pages prompting visitors to submit their own incident clip. Creator- funnel hook: passive viewers → contributors → users with skin in. */ .entity-submit-cta { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 20px; margin: 8px 0 28px; background: linear-gradient(90deg, rgba(229, 57, 53, 0.10), rgba(229, 57, 53, 0.02)); border: 1px solid rgba(229, 57, 53, 0.35); border-left: 4px solid var(--accent); border-radius: 10px; } .esc-text { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1; } .esc-emoji { font-size: 1.6rem; line-height: 1; flex-shrink: 0; } .esc-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .esc-headline { font-size: .95rem; font-weight: 800; color: var(--text); line-height: 1.3; } .esc-sub { font-size: .8rem; color: var(--muted); line-height: 1.35; } .esc-btn { display: inline-block; padding: 10px 20px; background: var(--accent); color: #fff; font-weight: 700; font-size: .9rem; border-radius: 8px; text-decoration: none; white-space: nowrap; transition: background .15s ease, transform .1s ease; flex-shrink: 0; } .esc-btn:hover { background: var(--accent-hover); transform: translateY(-1px); } @media (max-width: 540px) { .entity-submit-cta { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px 18px; } .esc-btn { display: block; text-align: center; } }