/* AI Kodex laws reader — V1 Insta-first prototype CSS * * Design rules: * - Mobile-first: 375 px viewport is the reference * - AI summary dominates first viewport * - One huge CTA at 44+ px touch target * - Body text collapsible (Insta visitor doesn't want raw law) * - 4 themes via CSS vars, FOUC-avoided by inline script in */ /* -------- Theme tokens -------- * On-brand LIGHT palette, mapped from the app design tokens in * web/src/styles/globals.css. The former warm-gold scheme is gone: accent is * now the app GREEN (was gold), surfaces are neutral. The inner pages set * data-theme="cream", which falls through to these defaults — so "cream" now * means on-brand light (see the alias block just below). */ :root { --bg: hsl(60 5% 95%); --surface: hsl(0 0% 100%); --surface-warm: hsl(60 8% 92%); --text: hsl(240 3% 12%); --text-muted: hsl(220 4% 45%); --text-faint: hsl(220 4% 58%); --border: hsl(0 0% 90%); --accent: hsl(137 48% 45%); /* brand green — was warm gold */ --accent-strong: hsl(137 52% 33%); /* darker green for links */ --cta-bg: hsl(137 48% 45%); --cta-text: hsl(0 0% 100%); --cta-hover: hsl(137 52% 38%); --share-bg: hsl(60 6% 97%); --share-bg-hover: hsl(60 6% 92%); --code-bg: hsl(60 6% 97%); --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "SF Mono", Menlo, Consolas, monospace; --size-base: 17px; --line-height: 1.65; } /* The inner pages set data-theme="cream"; it now resolves to the on-brand * light tokens above (no override needed). Kept as an explicit alias so the * markup keeps working and the intent is documented. */ [data-theme="cream"] {} [data-theme="white"] { --bg: #ffffff; --surface: #fafafa; --surface-warm: #fffaf0; --text: #1a1a1a; --text-muted: #555; --text-faint: #888; --border: #e5e5e5; --share-bg: #f5f5f5; --share-bg-hover: #ebebeb; --code-bg: #f5f5f5; } [data-theme="sepia"] { --bg: #f4ecd8; --surface: #faf3e0; --surface-warm: #f0e4c2; --text: #3a3025; --text-muted: #6b5a45; --text-faint: #8a7960; --border: #d8caa9; --accent: #8b5a1d; --accent-strong: #6b430f; /* 5.2:1 on sepia bg — WCAG AA */ --share-bg: #eddfbe; --share-bg-hover: #e2d2a8; --code-bg: #eddfbe; } /* On-brand DARK palette, mapped from web/src/styles/globals.css. Accent is now * the app GREEN (was orange #ffb74d). */ [data-theme="dark"] { --bg: hsl(240 5% 11%); --surface: hsl(240 4% 15%); --surface-warm: hsl(240 5% 21%); --text: hsl(240 3% 93%); --text-muted: hsl(230 5% 62%); --text-faint: #7a7268; --border: hsl(240 5% 20%); --accent: hsl(135 44% 49%); /* brand green — was orange */ --accent-strong: hsl(135 50% 62%); --cta-bg: hsl(135 44% 49%); --cta-text: hsl(150 50% 6%); --cta-hover: hsl(135 50% 55%); --share-bg: hsl(240 4% 18%); --share-bg-hover: hsl(240 4% 22%); --code-bg: hsl(240 4% 18%); } [data-font="sans"] { --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; } [data-size="s"] { --size-base: 15px; --line-height: 1.55; } [data-size="m"] { --size-base: 17px; --line-height: 1.65; } [data-size="l"] { --size-base: 19px; --line-height: 1.7; } [data-size="xl"] { --size-base: 22px; --line-height: 1.75; } /* -------- Global -------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font: var(--size-base)/var(--line-height) var(--font-body); transition: background-color 200ms ease, color 200ms ease; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; } a:hover { color: var(--accent); } button { font-family: inherit; font-size: inherit; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; } /* -------- Top bar -------- */ .topbar { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 92%, transparent); border-bottom: 1px solid var(--border); font-family: var(--font-ui); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .topbar-inner { max-width: 720px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; } .topbar-inner-wide { max-width: 1200px; padding: 12px 24px; } .topbar-cta { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px; background: var(--cta-bg); color: var(--cta-text); text-decoration: none; font-size: 13px; font-weight: 600; transition: background-color 150ms; } .topbar-cta:hover { background: var(--cta-hover); color: var(--cta-text); } .brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); font-weight: 700; font-size: 15px; } .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--accent); color: var(--cta-text); } .brand-name { letter-spacing: 0.01em; } .topbar-actions { display: flex; gap: 4px; } .icon-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 15px; font-weight: 600; color: var(--text-muted); transition: background-color 150ms, color 150ms; } .icon-btn:hover, .icon-btn:active { background: var(--share-bg); color: var(--text); } .icon-btn[data-active="true"] { color: var(--accent); } .icon-btn[data-active="true"] .lucide { fill: currentColor; } /* Lucide SVG icons — inherit color from parent */ .lucide { flex-shrink: 0; vertical-align: middle; } /* -------- Page layout -------- */ .page { max-width: 720px; margin: 0 auto; padding: 16px 16px 64px; } /* -------- Breadcrumbs -------- */ .breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 16px; font-family: var(--font-ui); font-size: 12px; color: var(--text-muted); } .breadcrumbs .crumb-link { color: var(--text-muted); text-decoration: none; } .breadcrumbs .crumb-link:hover { color: var(--text); text-decoration: underline; } .breadcrumbs .crumb-sep { color: var(--text-faint); } .breadcrumbs .crumb-current { color: var(--text); font-weight: 600; } /* -------- Head card -------- */ .head-card { margin-bottom: 24px; padding-left: 14px; border-left: 3px solid var(--accent); } .head-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; font-family: var(--font-ui); } .head-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: var(--surface-warm); border: 1px solid var(--border); color: var(--accent-strong); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; } .head-type { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); } .head-date { font-size: 12px; color: var(--text-faint); font-variant-numeric: tabular-nums; } .head-title { font-size: clamp(26px, 6vw, 34px); line-height: 1.2; margin: 0; font-weight: 700; letter-spacing: -0.015em; } /* -------- Summary card (the hero) -------- */ .summary-card { background: var(--surface-warm); border-radius: 16px; padding: 18px 20px 16px; margin-bottom: 20px; border: 1px solid var(--border); } .summary-title { display: flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-strong); margin: 0 0 12px; } .summary-icon { display: inline-flex; align-items: center; } .summary-brand { color: var(--accent-strong); font-weight: 800; letter-spacing: 0.04em; } .summary-divider { color: var(--text-faint); margin: 0 2px; } .summary-body { font-size: 16px; line-height: 1.55; color: var(--text); } .summary-body p { margin: 0 0 8px; } .summary-body p:last-child { margin-bottom: 0; } .summary-body strong { color: var(--text); font-weight: 700; } .summary-disclaimer { display: flex; align-items: center; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); font-family: var(--font-ui); font-size: 12px; color: var(--text-faint); } .summary-disclaimer .disclaimer-inline-icon { display: inline-flex; color: var(--accent); } /* -------- Primary CTA -------- */ .cta-primary { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 16px 20px; border-radius: 14px; background: var(--cta-bg); color: var(--cta-text); text-decoration: none; font-family: var(--font-ui); font-weight: 600; font-size: 16px; margin-bottom: 16px; min-height: 52px; transition: background-color 150ms, transform 100ms; } .cta-primary:hover { background: var(--cta-hover); color: var(--cta-text); } .cta-primary:active { transform: scale(0.98); } .cta-icon { display: inline-flex; align-items: center; } /* -------- Share row -------- */ .share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 28px; font-family: var(--font-ui); } .share-btn { padding: 8px 14px; border-radius: 999px; background: var(--share-bg); color: var(--text); text-decoration: none; font-size: 13px; font-weight: 500; transition: background-color 150ms; border: 1px solid transparent; cursor: pointer; } .share-btn:hover { background: var(--share-bg-hover); color: var(--text); } /* -------- Body disclosure (collapsed by default) -------- */ .body-disclosure { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); margin-bottom: 24px; overflow: hidden; } .body-disclosure-summary { list-style: none; cursor: pointer; padding: 14px 18px; display: flex; align-items: center; gap: 12px; font-family: var(--font-ui); font-weight: 600; font-size: 15px; color: var(--text); user-select: none; } .body-disclosure-summary::-webkit-details-marker { display: none; } .body-disclosure-label { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; } .body-disclosure-icon { display: inline-flex; color: var(--text-muted); } .body-meta { flex: 1; text-align: right; font-size: 12px; color: var(--text-faint); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .body-disclosure-caret { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--share-bg); color: var(--text-muted); flex-shrink: 0; transition: transform 200ms ease, background-color 150ms, color 150ms; } .body-disclosure[open] .body-disclosure-caret { transform: rotate(180deg); } .body-disclosure-summary:hover .body-disclosure-caret { background: var(--share-bg-hover); color: var(--text); } .body-content { padding: 4px 20px 20px; font-family: var(--font-body); border-top: 1px solid var(--border); padding-top: 16px; } .body-content h2 { font-size: 18px; margin: 24px 0 10px; font-weight: 700; } .body-content h2:first-child { margin-top: 0; } .body-content p { margin: 0 0 12px; } .body-content ol, .body-content ul { padding-left: 24px; margin-bottom: 16px; } .body-content code { font-family: var(--font-mono); background: var(--code-bg); padding: 1px 4px; border-radius: 3px; font-size: 0.9em; } /* -------- Section title (FAQ, Related) -------- */ .section-title { font-family: var(--font-ui); font-size: 18px; font-weight: 700; margin: 0 0 14px; letter-spacing: -0.005em; } /* -------- FAQ -------- */ .faq { margin-bottom: 28px; } .faq-item { border-bottom: 1px solid var(--border); padding: 12px 0; } .faq-item:last-child { border-bottom: 0; } .faq-item summary { cursor: pointer; list-style: none; font-family: var(--font-ui); font-weight: 600; font-size: 15px; display: flex; align-items: center; justify-content: space-between; gap: 12px; user-select: none; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; font-size: 20px; font-weight: 300; color: var(--text-muted); transition: transform 200ms; flex-shrink: 0; } .faq-item[open] summary::after { transform: rotate(45deg); } .faq-answer { padding-top: 8px; font-size: 15px; color: var(--text-muted); line-height: 1.6; } .faq-answer p { margin: 0 0 8px; } /* -------- Related docs -------- */ .related { margin-bottom: 32px; } .related-list { list-style: none; padding: 0; margin: 0; } .related-list li { padding: 10px 0; border-bottom: 1px solid var(--border); font-family: var(--font-ui); font-size: 14px; } .related-list li:last-child { border-bottom: 0; } .related-list a { font-weight: 600; } .related-note { color: var(--text-muted); font-weight: 400; } /* -------- Footer -------- */ .page-footer { margin-top: 32px; border-top: 1px solid var(--border); padding-top: 16px; font-family: var(--font-ui); font-size: 12px; color: var(--text-faint); line-height: 1.55; } /* Plain inline text flow — no flex (flex turns text nodes into columns) */ .disclaimer { margin: 0 0 8px; } .disclaimer-icon { display: inline-flex; align-items: center; margin-right: 6px; vertical-align: -2px; color: var(--text-faint); } .disclaimer-text { /* Inherits flow; link wraps naturally */ } .disclaimer a { color: var(--text-muted); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 2px; } .disclaimer a:hover { color: var(--text); text-decoration-color: currentColor; } .brand-footer { margin: 8px 0 0; } .brand-footer a { color: var(--text-muted); text-decoration: none; } .brand-footer a:hover { color: var(--text); text-decoration: underline; } /* ============================================================ * Punishments scale page (/penalties/) * ============================================================ */ .pun-body { background: var(--bg); } .pun-page { max-width: 880px; margin: 0 auto; padding: 24px 20px 80px; } .pun-hero { margin: 8px 0 24px; font-family: var(--font-ui); } .pun-hero h1 { font-size: clamp(32px, 6vw, 48px); margin: 0 0 12px; letter-spacing: -0.02em; font-weight: 800; line-height: 1.05; } .pun-hero p { font-size: 16px; line-height: 1.55; color: var(--text-muted); max-width: 640px; margin: 0; } /* Sticky control strip */ .pun-scale { position: sticky; top: 64px; z-index: 40; padding: 16px 18px 18px; margin: 24px 0 28px; border-radius: 16px; background: color-mix(in srgb, var(--bg) 95%, transparent); border: 1px solid var(--border); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-family: var(--font-ui); } .pun-scale-labels { display: flex; justify-content: space-between; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); font-weight: 600; margin-bottom: 10px; gap: 4px; } /* On narrow screens hide intermediate labels so only endpoints + one mid show */ @media (max-width: 560px) { .pun-scale-label[data-pos="20"], .pun-scale-label[data-pos="40"], .pun-scale-label[data-pos="85"] { display: none; } } @media (max-width: 380px) { .pun-scale-label[data-pos="65"] { display: none; } } .pun-scale-track { position: relative; height: 32px; } .pun-scale-fill { position: absolute; top: 13px; left: 0; height: 6px; width: 100%; border-radius: 999px; background: linear-gradient( 90deg, hsl(39 72% 45%) 0%, hsl(25 70% 45%) 45%, hsl(338 61% 52%) 100% ); pointer-events: none; transition: width 80ms linear; } .pun-scale-track::before { content: ""; position: absolute; top: 13px; left: 0; right: 0; height: 6px; border-radius: 999px; background: var(--share-bg); } .pun-scale-track input[type="range"] { position: relative; z-index: 2; width: 100%; height: 32px; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; } .pun-scale-track input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--text); border: 3px solid var(--bg); box-shadow: 0 2px 8px rgba(0,0,0,0.18); cursor: grab; margin-top: 0px; } .pun-scale-track input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; } .pun-scale-track input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--text); border: 3px solid var(--bg); box-shadow: 0 2px 8px rgba(0,0,0,0.18); cursor: grab; } .pun-scale-readout { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 13px; color: var(--text-muted); } .pun-scale-counter strong { color: var(--text); font-variant-numeric: tabular-nums; } .pun-scale-current strong { color: var(--accent-strong); } /* Cards */ .pun-list { display: flex; flex-direction: column; gap: 10px; } .pun-card { position: relative; padding: 16px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); font-family: var(--font-ui); overflow: hidden; transition: opacity 200ms ease, filter 200ms ease, background-color 200ms; } .pun-card--out { display: none; } .pun-card-bar { position: absolute; left: 0; top: 0; bottom: 0; width: var(--bar-width, 50%); background: linear-gradient( 90deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent) 2%, transparent) ); pointer-events: none; z-index: 0; } .pun-card > * { position: relative; z-index: 1; } .pun-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; } .pun-card-article { font-size: 12px; color: var(--accent-strong); font-weight: 700; letter-spacing: 0.02em; } .pun-card-severity { font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; font-weight: 600; } .pun-card-title { font-size: 18px; font-weight: 700; margin: 0 0 6px; letter-spacing: -0.005em; } .pun-card-penalty { font-size: 14px; color: var(--text); font-weight: 600; margin-bottom: 8px; } .pun-card-example { font-size: 13.5px; color: var(--text-muted); line-height: 1.5; margin: 0 0 8px; } .pun-card-example-label { font-weight: 600; color: var(--text); } .pun-card-details { font-size: 13px; color: var(--text-muted); } .pun-card-details summary { cursor: pointer; font-weight: 600; color: var(--accent-strong); font-size: 12.5px; padding: 4px 0; list-style: none; } .pun-card-details summary::-webkit-details-marker { display: none; } .pun-card-details summary::after { content: " ›"; transition: transform 200ms; display: inline-block; } .pun-card-details[open] summary::after { transform: rotate(90deg); } .pun-card-details p { margin: 6px 0 8px; line-height: 1.55; } .pun-card-link { display: inline-block; color: var(--accent-strong); text-decoration: none; font-weight: 600; font-size: 13px; margin-top: 4px; } .pun-card-link:hover { text-decoration: underline; } /* Bottom CTA box */ .pun-cta-box { margin: 48px 0 40px; padding: 28px 24px; border-radius: 18px; background: var(--surface-warm); border: 1px solid var(--border); text-align: center; font-family: var(--font-ui); } .pun-cta-box h2 { font-size: 22px; margin: 0 0 8px; letter-spacing: -0.01em; } .pun-cta-box p { color: var(--text-muted); margin: 0 0 18px; max-width: 460px; margin-left: auto; margin-right: auto; margin-bottom: 18px; line-height: 1.55; } .pun-cta { max-width: 360px; margin: 0 auto; } /* ============================================================ * Punishments — tier badges, category chips, real-case * ============================================================ */ .pun-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } .pun-action { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-family: var(--font-ui); font-size: 14px; font-weight: 600; text-decoration: none; transition: background 150ms, border-color 150ms, transform 100ms; } .pun-action:hover { background: var(--surface-warm); transform: translateY(-1px); } .pun-action-primary { background: var(--text); color: var(--bg); border-color: var(--text); } .pun-action-primary:hover { background: var(--accent-strong); } .pun-hero-link { color: var(--accent-strong); font-weight: 600; } .topbar-nav { display: flex; gap: 4px; margin-left: auto; margin-right: 12px; } @media (max-width: 640px) { .topbar-nav { display: none; } } .topbar-nav-link { padding: 6px 12px; border-radius: 999px; font-family: var(--font-ui); font-size: 13.5px; font-weight: 600; color: var(--text-muted); text-decoration: none; transition: background 120ms, color 120ms; } .topbar-nav-link:hover { color: var(--text); background: var(--surface); } .topbar-nav-link--on { color: var(--text); background: var(--surface-warm); } .pun-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 22px; } .pun-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); cursor: pointer; font-family: var(--font-ui); font-size: 13px; color: var(--text-muted); transition: background 120ms, border-color 120ms, color 120ms, transform 80ms; } .pun-chip:hover { background: var(--surface-warm); color: var(--text); } .pun-chip:active { transform: scale(0.97); } .pun-chip-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--cat-color, var(--text-muted)); } .pun-chip-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--dot-color, var(--text)); } .pun-chip-count { font-size: 11px; color: var(--text-faint); background: var(--bg); padding: 1px 6px; border-radius: 999px; font-variant-numeric: tabular-nums; } .pun-chip--on { background: var(--text); color: var(--bg); border-color: var(--text); } .pun-chip--on .pun-chip-count { background: rgba(255,255,255,0.18); color: var(--bg); } .pun-chip--on .pun-chip-icon { color: var(--bg); } .pun-chip--on .pun-chip-dot { background: var(--bg); } .pun-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .pun-card-cat { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--text-muted); padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--cat-color, #a8a29e) 12%, transparent); border: 1px solid color-mix(in srgb, var(--cat-color, #a8a29e) 28%, transparent); } .pun-card-cat-icon { font-size: 12px; line-height: 1; } .pun-card-tier { margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--tier-color, var(--accent-strong)); padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--tier-color, var(--accent-strong)) 10%, transparent); border: 1px solid color-mix(in srgb, var(--tier-color, var(--accent-strong)) 30%, transparent); } .pun-card-bar { background: linear-gradient( 90deg, color-mix(in srgb, var(--tier-color, var(--accent)) 22%, transparent), color-mix(in srgb, var(--tier-color, var(--accent)) 3%, transparent) ); } .pun-card-realcase { font-size: 12.5px; color: var(--text-muted); background: var(--surface-warm); border-left: 3px solid var(--tier-color, var(--accent)); padding: 8px 12px; border-radius: 0 8px 8px 0; margin: 6px 0 8px; line-height: 1.5; } .pun-card-realcase-label { font-weight: 700; color: var(--text); } .pun-sort { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 10px; font-family: var(--font-ui); } .pun-sort-label { font-size: 12px; color: var(--text-faint); margin-right: 4px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; } .pun-sort-btn { padding: 4px 10px; border-radius: 999px; background: transparent; border: 1px solid var(--border); font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; color: var(--text-muted); cursor: pointer; transition: background 120ms, color 120ms, border-color 120ms; } .pun-sort-btn:hover { background: var(--surface-warm); color: var(--text); } .pun-sort-btn--on { background: var(--text); color: var(--bg); border-color: var(--text); } .pun-empty { text-align: center; color: var(--text-muted); font-family: var(--font-ui); padding: 36px 20px; background: var(--surface-warm); border-radius: 14px; margin-top: 16px; } .pun-empty-title { font-size: 18px; font-weight: 700; margin: 0 0 8px; color: var(--text); letter-spacing: -0.005em; } .pun-empty p { margin: 0 0 16px; font-size: 14px; line-height: 1.5; } .pun-empty-reset { padding: 8px 18px; border-radius: 999px; background: var(--text); color: var(--bg); border: none; cursor: pointer; font-family: var(--font-ui); font-weight: 600; font-size: 13.5px; transition: background 120ms, transform 80ms; } .pun-empty-reset:hover { background: var(--accent-strong); transform: translateY(-1px); } /* Keyboard-key chip in quiz options */ .game-option { display: flex; align-items: center; gap: 10px; } .game-option-key { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 6px; background: var(--surface-warm); border: 1px solid var(--border); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-muted); flex-shrink: 0; } .game-option--correct .game-option-key { background: rgba(22, 163, 74, 0.18); border-color: #16a34a; color: #14532d; } .game-option--wrong .game-option-key { background: rgba(220, 38, 38, 0.18); border-color: #dc2626; color: #7f1d1d; } /* ============================================================ * Game pages — /quiz/ and /versus/ * ============================================================ */ .game-page, .vs-page { max-width: 720px; margin: 0 auto; padding: 24px 20px 64px; } .game-hero h1, .vs-hero h1 { font-size: 32px; margin: 8px 0 8px; letter-spacing: -0.015em; } .game-hero p, .vs-hero p { color: var(--text-muted); margin: 0 0 24px; line-height: 1.55; font-size: 15px; max-width: 540px; } .game-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); margin-bottom: 20px; font-family: var(--font-ui); } .game-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; } .game-stat-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); font-weight: 600; } .game-stat-value { font-size: 20px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } .game-stat-dim { color: var(--text-faint); font-weight: 500; font-size: 14px; } .game-card { padding: 24px 22px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); font-family: var(--font-ui); margin-bottom: 24px; } .game-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .game-card-article { font-size: 12px; color: var(--accent-strong); font-weight: 700; } .game-card-cat { font-size: 11px; color: var(--text-muted); padding: 2px 8px; border-radius: 999px; background: var(--surface-warm); } .game-card-title { font-size: 22px; margin: 0 0 10px; letter-spacing: -0.01em; } .game-card-scenario { font-size: 15px; color: var(--text); line-height: 1.55; margin: 0 0 18px; padding: 12px 14px; background: var(--surface-warm); border-radius: 10px; border-left: 3px solid var(--accent); } .game-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } @media (max-width: 480px) { .game-options { grid-template-columns: 1fr; } } .game-option { padding: 14px 16px; border-radius: 12px; background: var(--bg); border: 1.5px solid var(--border); cursor: pointer; font-family: var(--font-ui); font-size: 14.5px; font-weight: 600; color: var(--text); text-align: left; transition: background 120ms, border-color 120ms, transform 80ms; } .game-option:hover:not(:disabled) { background: var(--surface-warm); border-color: var(--accent); transform: translateY(-1px); } .game-option:active:not(:disabled) { transform: scale(0.98); } .game-option:disabled { cursor: default; } .game-option--correct { background: color-mix(in srgb, #16a34a 14%, var(--bg)); border-color: #16a34a; color: #14532d; } .game-option--wrong { background: color-mix(in srgb, #dc2626 14%, var(--bg)); border-color: #dc2626; color: #7f1d1d; } .game-feedback { margin-top: 18px; padding: 18px; border-radius: 14px; background: var(--surface-warm); border: 1px solid var(--border); animation: gameFeedbackIn 220ms ease; } @keyframes gameFeedbackIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .game-feedback-verdict { font-size: 17px; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.005em; } .game-feedback-verdict--great { color: #15803d; } .game-feedback-verdict--ok { color: #ca8a04; } .game-feedback-verdict--meh { color: #ea580c; } .game-feedback-verdict--bad { color: #dc2626; } .game-feedback-real { font-size: 14px; margin-bottom: 6px; } .game-feedback-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-right: 4px; } .game-feedback-real strong { color: var(--text); font-size: 15px; } .game-feedback-full { font-size: 13.5px; color: var(--text-muted); margin: 6px 0 10px; line-height: 1.55; } .game-feedback-case { font-size: 13px; margin: 6px 0 12px; color: var(--text-muted); } .game-feedback-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; } .game-feedback-link { color: var(--accent-strong); font-weight: 600; text-decoration: none; font-size: 13px; } .game-feedback-link:hover { text-decoration: underline; } .game-next { padding: 10px 22px; border-radius: 999px; background: var(--text); color: var(--bg); border: none; cursor: pointer; font-family: var(--font-ui); font-weight: 600; font-size: 14px; transition: background 120ms, transform 80ms; } .game-next:hover { background: var(--accent-strong); transform: translateY(-1px); } .game-result { padding: 28px 24px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); text-align: center; font-family: var(--font-ui); } .game-result-title { font-size: 22px; margin: 0 0 12px; letter-spacing: -0.01em; } .game-result-score { font-size: 48px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); letter-spacing: -0.02em; margin: 4px 0; } .game-result-score-of { font-size: 22px; color: var(--text-faint); font-weight: 500; } .game-result-verdict { color: var(--text-muted); font-size: 15px; margin: 4px 0 20px; } .game-result-breakdown { text-align: left; display: flex; flex-direction: column; gap: 4px; margin-bottom: 20px; } .game-result-row { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; padding: 8px 12px; border-radius: 8px; background: var(--surface-warm); font-size: 13.5px; } .game-result-dot { font-size: 18px; } .game-result-row--great .game-result-dot { color: #15803d; } .game-result-row--ok .game-result-dot { color: #ca8a04; } .game-result-row--bad .game-result-dot { color: #dc2626; } .game-result-row-title { color: var(--text); } .game-result-row-points { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-muted); font-size: 13px; } .game-result-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; } .game-restart { min-width: 180px; } .game-share { padding: 12px 22px; border-radius: 999px; background: transparent; color: var(--text); border: 1.5px solid var(--border); cursor: pointer; font-family: var(--font-ui); font-weight: 600; font-size: 14px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .game-share:hover { background: var(--surface-warm); border-color: var(--accent); } .game-result-aikodex { display: block; margin-top: 10px; color: var(--accent-strong); font-weight: 600; text-decoration: none; font-size: 14px; } .game-result-aikodex:hover { text-decoration: underline; } /* ============================================================ * Topic hubs (/topics/, /topics/{slug}/) * ============================================================ */ .topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 24px 0 32px; } .topic-card { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); text-decoration: none; color: inherit; font-family: var(--font-ui); transition: background 150ms, border-color 150ms, transform 100ms; } .topic-card:hover { background: var(--surface-warm); border-color: var(--accent); transform: translateY(-1px); } .topic-card-title { font-size: 18px; font-weight: 700; letter-spacing: -0.005em; margin: 0; color: var(--text); } .topic-card-subtitle { font-size: 13.5px; color: var(--text-muted); line-height: 1.4; margin: 0; } .topic-card-meta { margin-top: auto; font-size: 12px; color: var(--text-faint); font-variant-numeric: tabular-nums; } .topic-page { max-width: 880px; margin: 0 auto; padding: 24px 20px 64px; } .topic-hero h1 { font-size: clamp(28px, 5vw, 38px); margin: 8px 0 8px; letter-spacing: -0.015em; } .topic-hero-subtitle { color: var(--text-muted); font-size: 17px; line-height: 1.5; margin: 0 0 22px; max-width: 640px; } .topic-summary { background: var(--surface-warm); border-radius: 14px; padding: 20px 22px; border-left: 3px solid var(--accent); font-size: 15.5px; line-height: 1.6; margin: 0 0 32px; font-family: var(--font-ui); } .topic-summary p { margin: 0 0 12px; } .topic-summary p:last-child { margin-bottom: 0; } .topic-summary strong { color: var(--text); } .topic-laws { margin-bottom: 32px; } .about-feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 28px 0; } @media (max-width: 640px) { .about-feature-grid { grid-template-columns: 1fr; } } .about-feature { padding: 18px 20px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); font-family: var(--font-ui); } .about-feature h3 { font-size: 17px; font-weight: 700; margin: 0 0 8px; letter-spacing: -0.005em; } .about-feature p { font-size: 14px; color: var(--text-muted); margin: 0 0 12px; line-height: 1.55; } .about-feature-link { font-size: 13px; font-weight: 600; color: var(--accent-strong); text-decoration: none; } .about-feature-link:hover { text-decoration: underline; } .about-page .topic-summary h2 { font-size: 20px; margin: 0 0 12px; letter-spacing: -0.01em; font-family: var(--font-ui); color: var(--text); } .topic-laws .section-title { font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); font-weight: 700; margin: 0 0 14px; font-family: var(--font-ui); } /* ============================================================ * Fact-of-the-day page (/fact/) * ============================================================ */ .fact-page { max-width: 720px; margin: 0 auto; padding: 24px 20px 64px; } .fact-hero h1 { font-size: 32px; margin: 8px 0 8px; letter-spacing: -0.015em; } .fact-hero p { color: var(--text-muted); margin: 0 0 24px; line-height: 1.55; font-size: 15px; max-width: 540px; } .fact-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fact-card { padding: 28px 24px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); font-family: var(--font-ui); margin-bottom: 24px; } .fact-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .fact-card-article { font-size: 12.5px; color: var(--accent-strong); font-weight: 700; } .fact-card-cat { font-size: 11px; color: var(--text-muted); padding: 2px 8px; border-radius: 999px; background: var(--surface-warm); } .fact-card-title { font-size: 26px; margin: 0 0 14px; letter-spacing: -0.015em; line-height: 1.2; } .fact-card-scenario { font-size: 16px; color: var(--text); line-height: 1.55; margin: 0 0 22px; padding: 14px 18px; background: var(--surface-warm); border-radius: 12px; border-left: 3px solid var(--accent); } .fact-prompt-text { font-size: 15px; color: var(--text-muted); text-align: center; margin: 0 0 16px; } .fact-prompt-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .fact-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 18px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--bg); cursor: pointer; font-family: var(--font-ui); font-size: 15px; font-weight: 600; color: var(--text); transition: background 120ms, border-color 120ms, transform 80ms; } .fact-btn:hover { background: var(--surface-warm); transform: translateY(-1px); } .fact-btn:active { transform: scale(0.98); } .fact-btn-knew { border-color: #16a34a; color: #14532d; } .fact-btn-knew:hover { background: color-mix(in srgb, #16a34a 10%, var(--bg)); } .fact-btn-notknew { border-color: #d97706; color: #92400e; } .fact-btn-notknew:hover { background: color-mix(in srgb, #d97706 10%, var(--bg)); } .fact-reveal { animation: gameFeedbackIn 220ms ease; } .fact-reveal-penalty { font-size: 17px; margin-bottom: 12px; } .fact-reveal-penalty strong { display: block; font-size: 22px; margin-top: 6px; color: var(--text); letter-spacing: -0.005em; } .fact-reveal-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .fact-reveal-full { font-size: 14px; color: var(--text-muted); line-height: 1.55; margin: 4px 0 14px; } .fact-reveal-case { padding: 12px 14px; background: var(--surface-warm); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; margin: 8px 0 14px; font-size: 13.5px; color: var(--text-muted); line-height: 1.5; } .fact-reveal-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; } .fact-reveal-link { color: var(--accent-strong); font-weight: 600; text-decoration: none; font-size: 13.5px; } .fact-reveal-link:hover { text-decoration: underline; } /* ============================================================ * Versus arena * ============================================================ */ .vs-arena { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: stretch; margin-bottom: 22px; } @media (max-width: 560px) { .vs-arena { grid-template-columns: 1fr; grid-template-rows: 1fr auto 1fr; } } .vs-side { display: flex; flex-direction: column; gap: 8px; padding: 22px 20px; border-radius: 16px; background: var(--surface); border: 1.5px solid var(--border); cursor: pointer; text-align: left; font-family: var(--font-ui); transition: background 150ms, border-color 150ms, transform 100ms; } .vs-side:hover { background: var(--surface-warm); border-color: var(--accent); transform: translateY(-2px); } .vs-side:active { transform: scale(0.98); } .vs-side-article { font-size: 12px; color: var(--accent-strong); font-weight: 700; letter-spacing: 0.02em; } .vs-side-title { font-size: 18px; font-weight: 700; color: var(--text); letter-spacing: -0.005em; } .vs-side-example { font-size: 13px; color: var(--text-muted); line-height: 1.5; } .vs-side--winner { background: color-mix(in srgb, #16a34a 12%, var(--bg)); border-color: #16a34a; } .vs-side--loser { opacity: 0.6; } .vs-arena--locked .vs-side { cursor: default; } .vs-divider { display: flex; align-items: center; justify-content: center; padding: 0 10px; } @media (max-width: 560px) { .vs-divider { padding: 4px 0; } } .vs-divider-text { font-family: var(--font-ui); font-size: 18px; font-weight: 800; color: var(--text-faint); letter-spacing: 0.1em; background: var(--bg); padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--border); } .vs-feedback { padding: 16px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); margin-bottom: 18px; animation: gameFeedbackIn 220ms ease; font-family: var(--font-ui); } .vs-feedback-verdict { font-size: 16px; font-weight: 700; margin-bottom: 10px; } .vs-feedback-verdict--ok { color: #15803d; } .vs-feedback-verdict--bad { color: #dc2626; } .vs-feedback-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; } @media (max-width: 480px) { .vs-feedback-detail { grid-template-columns: 1fr; } } .vs-detail { padding: 8px 12px; background: var(--surface-warm); border-radius: 8px; } .vs-detail-article { display: block; font-size: 11px; font-weight: 700; color: var(--accent-strong); margin-bottom: 4px; } .vs-detail-penalty { display: block; font-size: 13px; color: var(--text); font-weight: 600; } /* ============================================================ * Reading progress bar * ============================================================ */ .reading-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 110; background: transparent; pointer-events: none; } .reading-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), var(--accent-strong)); transition: width 50ms linear; } /* ============================================================ * Cite button (paragraph hover) * ============================================================ */ .cite-btn { position: absolute; display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px; background: var(--text); color: var(--bg); font-family: var(--font-ui); font-size: 11px; font-weight: 600; text-decoration: none; border: 0; cursor: pointer; opacity: 0; transform: translateY(4px); transition: opacity 150ms, transform 150ms; z-index: 5; white-space: nowrap; pointer-events: none; } .body-content p:hover .cite-btn, .body-content p:focus-within .cite-btn, .cite-btn:focus, .cite-btn:hover { opacity: 1; transform: translateY(0); pointer-events: auto; } .cite-btn[data-copied="true"] { background: var(--accent-strong); color: #fff; opacity: 1; transform: translateY(0); pointer-events: auto; } /* ============================================================ * Catalog search input — client-side filter * ============================================================ */ .cat-search-empty { display: none; padding: 40px 20px; text-align: center; color: var(--text-muted); font-family: var(--font-ui); font-size: 15px; } .cat-grid.has-no-results .cat-search-empty { display: block; } .cat-item[hidden] { display: none !important; } /* -------- Sticky mobile CTA — appears once primary CTA scrolls out -------- */ .cta-sticky { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 80; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; border-radius: 999px; background: var(--cta-bg); color: var(--cta-text); text-decoration: none; font-family: var(--font-ui); font-weight: 600; font-size: 14px; box-shadow: 0 6px 24px color-mix(in srgb, var(--cta-bg) 25%, transparent); transform: translateY(140%); opacity: 0; transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1), opacity 180ms; pointer-events: none; max-width: 480px; margin: 0 auto; } .cta-sticky[data-state="visible"] { transform: translateY(0); opacity: 1; pointer-events: auto; } .cta-sticky:hover { background: var(--cta-hover); color: var(--cta-text); } .cta-sticky:active { transform: scale(0.98); } /* Hide sticky CTA on desktop — the in-page CTA is always reachable */ @media (min-width: 768px) { .cta-sticky { display: none !important; } } /* -------- Article anchors — hover reveals # link on h2/h3 in body -------- */ .body-content h2 { position: relative; scroll-margin-top: 80px; } .body-content h2 .anchor { position: absolute; left: -22px; top: 50%; transform: translateY(-50%); color: var(--text-faint); text-decoration: none; font-weight: 400; opacity: 0; transition: opacity 150ms, color 150ms; } .body-content h2:hover .anchor { opacity: 1; } .body-content h2 .anchor:hover { color: var(--accent-strong); } /* -------- Settings bottom-sheet (mobile-first) -------- */ .settings-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; background: var(--surface); border-top: 1px solid var(--border); border-radius: 16px 16px 0 0; padding: 12px 16px 32px; transform: translateY(100%); transition: transform 250ms cubic-bezier(0.32, 0.72, 0, 1); box-shadow: 0 -8px 30px rgba(0,0,0,0.1); max-width: 480px; margin: 0 auto; } .settings-sheet[data-state="open"] { transform: translateY(0); } .settings-handle { width: 36px; height: 4px; background: var(--border); border-radius: 2px; margin: 0 auto 14px; } .settings-title { font-family: var(--font-ui); font-size: 14px; font-weight: 600; text-align: center; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin: 0 0 16px; } .settings-group { margin-bottom: 16px; font-family: var(--font-ui); } .settings-group:last-child { margin-bottom: 0; } .settings-group label { display: block; font-size: 13px; color: var(--text-muted); margin-bottom: 8px; } .size-options, .theme-options, .font-options { display: flex; gap: 6px; flex-wrap: wrap; } .size-options button, .theme-options button, .font-options button { padding: 10px 14px; border-radius: 8px; background: var(--share-bg); color: var(--text); font-size: 14px; font-weight: 500; border: 1px solid transparent; flex: 1; min-width: 60px; } .size-options button.active, .theme-options button.active, .font-options button.active { background: var(--text); color: var(--bg); border-color: var(--text); } /* -------- Responsive -------- */ @media (min-width: 768px) { .page { padding: 24px 24px 80px; } .head-title { font-size: 32px; } .summary-card { padding: 24px 28px; } .body-content { padding: 8px 28px 28px; padding-top: 20px; } .body-disclosure-summary { padding: 18px 28px; } } @media (min-width: 1024px) { .page { padding: 32px 32px 120px; max-width: 760px; } .head-title { font-size: 36px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } html { scroll-behavior: auto; } } @media print { .topbar, .settings-sheet, .cta-primary, .share-row { display: none !important; } .body-disclosure { border: 0; } .body-disclosure-summary { display: none; } .body-content { padding: 0; border: 0; } body { background: white; color: black; } } /* ============================================================ * Catalog (/) + category index (/laws/{type}/...) pages. * ============================================================ */ .catalog, .cat-section-page { max-width: 1200px; margin: 0 auto; padding: 24px 24px 80px; } .cat-hero { max-width: 720px; margin: 8px 0 24px; font-family: var(--font-ui); } .cat-hero h1 { font-size: clamp(32px, 6vw, 48px); margin: 0 0 12px; letter-spacing: -0.02em; font-weight: 800; line-height: 1.1; } .cat-hero p { color: var(--text-muted); font-size: 17px; margin: 0 0 18px; line-height: 1.55; } .cat-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 4px; } .cat-hero-cta { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; background: var(--text); color: var(--bg); text-decoration: none; font-family: var(--font-ui); font-weight: 600; font-size: 14.5px; transition: background 150ms, transform 100ms; } .cat-hero-cta:hover { background: var(--accent-strong); color: var(--bg); transform: translateY(-1px); } .cat-hero-meta { font-family: var(--font-ui); font-size: 13px; color: var(--text-faint); } @media (max-width: 480px) { .cat-hero-meta { width: 100%; } } .cat-section-hero { margin: 0 0 28px; max-width: 720px; } .cat-section-hero h1 { font-family: var(--font-ui); font-size: clamp(28px, 5vw, 40px); margin: 0 0 8px; letter-spacing: -0.015em; font-weight: 800; } .cat-counter { font-family: var(--font-ui); font-size: 14px; color: var(--text-muted); margin: 0; } .cat-search { position: relative; max-width: 720px; margin: 0 0 20px; } .cat-search input { width: 100%; padding: 14px 16px 14px 46px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-family: var(--font-ui); font-size: 15px; transition: border-color 150ms, box-shadow 150ms; } .cat-search input::placeholder { color: var(--text-faint); } .cat-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } .cat-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-faint); pointer-events: none; } .cat-section { margin-bottom: 40px; } .cat-section-header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; font-family: var(--font-ui); } .cat-section-title { font-size: 20px; font-weight: 700; margin: 0; letter-spacing: -0.01em; } .cat-grid { display: grid; gap: 12px; grid-template-columns: 1fr; } @media (min-width: 640px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } } .cat-item { display: flex; flex-direction: column; text-decoration: none; color: var(--text); padding: 16px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); font-family: var(--font-ui); transition: background-color 150ms, transform 100ms, border-color 150ms, box-shadow 150ms; min-height: 160px; } .cat-item:hover { background: var(--surface-warm); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 8%, transparent); } .cat-item:active { transform: scale(0.995); } .cat-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; } .cat-badge { display: inline-flex; padding: 3px 9px; border-radius: 999px; background: var(--surface-warm); border: 1px solid var(--border); color: var(--accent-strong); font-size: 11px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; } .cat-type { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); font-weight: 600; margin-bottom: 6px; } .cat-date { font-size: 11px; color: var(--text-faint); margin-left: auto; font-variant-numeric: tabular-nums; } .cat-title { font-size: 16px; font-weight: 700; line-height: 1.3; margin: 0 0 8px; letter-spacing: -0.005em; color: var(--text); } .cat-summary { font-size: 13.5px; color: var(--text-muted); line-height: 1.5; margin: 0 0 auto; } .cat-feature { display: flex; align-items: center; gap: 18px; padding: 20px 24px; border-radius: 18px; background: linear-gradient(135deg, var(--surface-warm), color-mix(in srgb, var(--accent) 12%, var(--surface))); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); text-decoration: none; color: var(--text); font-family: var(--font-ui); margin-bottom: 32px; transition: transform 120ms, box-shadow 200ms; } .cat-feature:hover { transform: translateY(-2px); box-shadow: 0 8px 28px color-mix(in srgb, var(--accent) 15%, transparent); } .cat-feature-icon { flex-shrink: 0; width: 56px; height: 56px; border-radius: 14px; background: var(--text); color: var(--bg); display: flex; align-items: center; justify-content: center; } .cat-feature-body { flex: 1; min-width: 0; } .cat-feature-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-strong); font-weight: 700; margin-bottom: 4px; } .cat-feature-title { font-size: 19px; font-weight: 800; margin: 0 0 6px; letter-spacing: -0.005em; } .cat-feature-text { font-size: 14px; color: var(--text-muted); margin: 0; line-height: 1.5; } .cat-feature-arrow { flex-shrink: 0; font-size: 28px; color: var(--accent-strong); font-weight: 700; margin-left: auto; } @media (max-width: 560px) { .cat-feature { flex-wrap: wrap; padding: 16px 18px; gap: 14px; } .cat-feature-icon { width: 44px; height: 44px; } .cat-feature-arrow { display: none; } } .cat-games { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0 32px; } @media (max-width: 760px) { .cat-games { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .cat-games { grid-template-columns: 1fr; } } .cat-game { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); text-decoration: none; color: inherit; transition: background 150ms, border-color 150ms, transform 100ms; font-family: var(--font-ui); } .cat-game:hover { background: var(--surface-warm); border-color: var(--accent); transform: translateY(-1px); } .cat-game-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--surface-warm); color: var(--accent-strong); flex-shrink: 0; } .cat-game-title { font-size: 15px; font-weight: 700; margin: 0 0 2px; color: var(--text); letter-spacing: -0.005em; } .cat-game-text { margin: 0; font-size: 12.5px; color: var(--text-muted); line-height: 1.4; } .cat-footer { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--border); font-family: var(--font-ui); font-size: 12px; color: var(--text-faint); } .cat-footer a { color: var(--text-muted); text-decoration: none; } .cat-footer a:hover { color: var(--text); text-decoration: underline; } /* Topbar variant used by catalog/category pages */ .topbar-wide .topbar-inner-wide { max-width: 1200px; padding: 12px 24px; } .topbar-cta { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px; background: var(--text); color: var(--bg); text-decoration: none; font-family: var(--font-ui); font-size: 13px; font-weight: 600; transition: opacity 150ms; } .topbar-cta:hover { opacity: 0.85; color: var(--bg); } /* Codex TOC — chapter/article tree on codex landing pages. */ .codex-toc { margin: 24px 0; padding: 24px; background: var(--bg); border: 1px solid var(--border); border-radius: 16px; } .codex-toc-chapter { border-bottom: 1px solid var(--border); padding: 12px 0; } .codex-toc-chapter:last-child { border-bottom: none; } .codex-toc-chapter-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; cursor: pointer; list-style: none; font-family: var(--font-ui); font-weight: 600; font-size: 15px; padding: 6px 0; } .codex-toc-chapter-title::-webkit-details-marker { display: none; } .codex-toc-chapter-title a { color: var(--text); text-decoration: none; flex: 1; } .codex-toc-chapter-title a:hover { text-decoration: underline; } .codex-toc-counter { font-family: var(--font-ui); font-size: 12px; font-weight: 500; color: var(--text-muted); background: var(--surface-warm); padding: 2px 10px; border-radius: 999px; } .codex-toc-articles { margin: 8px 0 4px; padding: 0 0 0 20px; list-style: decimal; } .codex-toc-articles li { padding: 3px 0; font-size: 14px; line-height: 1.4; } .codex-toc-articles a { color: var(--text); text-decoration: none; } .codex-toc-articles a:hover { text-decoration: underline; }