/* AI Kodex — unified lawsite design system. * * Source of truth for every static page (/laws hub, law pages, category * indexes, topics, about). Tokens mirror the /laws hub redesign * (2026-06-06): Inter, light/dark via `.dark` on , green primary. * Palette rules: no cyan, no neon, no purple+pink gradients * (docs/superpowers/specs/2026-05-31-web-redesign-design.md §2). * * Page-specific sections are grouped at the bottom; shared primitives on * top. Old reader.css remains only for the games pages (/penalties, /quiz, * /versus, /fact) until they're migrated. */ /* ---------- Tokens ---------- */ :root{ --radius:.875rem; --background:60 5% 95%; --foreground:240 3% 12%; --card:0 0% 100%; --primary:137 48% 45%; --primary-foreground:0 0% 100%; --secondary:60 6% 97%; --muted-foreground:220 4% 45%; --border:0 0% 90%; --ring:213 61% 45%; --shadow:0 1px 2px hsl(240 3% 12%/.04),0 6px 20px hsl(240 3% 12%/.05); } .dark{ --background:240 5% 11%; --foreground:240 3% 93%; --card:240 4% 15%; --primary:135 44% 49%; --primary-foreground:150 50% 6%; --secondary:240 4% 18%; --muted-foreground:230 5% 62%; --border:240 5% 20%; --ring:212 72% 59%; --shadow:0 1px 2px hsl(0 0% 0%/.25),0 8px 24px hsl(0 0% 0%/.30); } /* ---------- Base ---------- */ *{box-sizing:border-box} html{color-scheme:light dark;scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{margin:0;background:hsl(var(--background));color:hsl(var(--foreground)); font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased;letter-spacing:-.011em} a{color:inherit;text-decoration:none} .wrap{max-width:1120px;margin:0 auto;padding:0 24px} .wrap--narrow{max-width:760px} .muted{color:hsl(var(--muted-foreground))} /* ---------- Header ---------- */ .topbar{position:sticky;top:0;z-index:30;background:hsl(var(--background)/.82); backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid hsl(var(--border))} .hrow{display:flex;align-items:center;justify-content:space-between;height:60px} .logo{display:flex;align-items:center;gap:9px;font-weight:650;font-size:16px} .logo .mark{width:28px;height:28px;display:grid;place-items:center;border-radius:8px; background:hsl(var(--primary));color:hsl(var(--primary-foreground))} .right{display:flex;align-items:center;gap:10px} .icobtn{width:36px;height:36px;display:grid;place-items:center;border-radius:9px;border:1px solid hsl(var(--border)); background:hsl(var(--card));cursor:pointer;font-size:15px;color:hsl(var(--muted-foreground));padding:0} .icobtn:hover{color:hsl(var(--foreground))} .icobtn .sun{display:none}.icobtn .moon{display:block} .dark .icobtn .sun{display:block}.dark .icobtn .moon{display:none} .tg{background:hsl(var(--primary));color:hsl(var(--primary-foreground));padding:9px 16px;border-radius:999px; font-size:13.5px;font-weight:600;white-space:nowrap} .tg:hover{filter:brightness(1.06)} /* ---------- Footer ---------- */ .sitefoot{border-top:1px solid hsl(var(--border));margin-top:24px;padding:30px 0; color:hsl(var(--muted-foreground));font-size:13px;text-align:center;line-height:1.9} .sitefoot a{color:hsl(var(--muted-foreground))} .sitefoot a:hover{color:hsl(var(--foreground))} /* ---------- Breadcrumbs ---------- */ .breadcrumbs{display:flex;align-items:center;flex-wrap:wrap;gap:6px; padding:18px 0 0;font-size:13px;color:hsl(var(--muted-foreground))} .breadcrumbs .crumb-link:hover{color:hsl(var(--foreground))} .breadcrumbs .crumb-sep{color:hsl(var(--border));user-select:none} .breadcrumbs .crumb-current{color:hsl(var(--foreground));font-weight:550; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60vw} /* ---------- Section headers ---------- */ .shead{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 14px} .shead h2{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; color:hsl(var(--muted-foreground));margin:0} .shead a{font-size:13px;color:hsl(var(--primary));font-weight:600} section{padding:26px 0} /* ---------- Document list (categories, topics, popular) ---------- */ .doclist{display:flex;flex-direction:column;border:1px solid hsl(var(--border)); border-radius:var(--radius);background:hsl(var(--card));overflow:hidden} .docrow{display:flex;align-items:baseline;gap:14px;padding:13px 16px; border-bottom:1px solid hsl(var(--border));transition:background .12s} .docrow:last-child{border-bottom:0} .docrow:hover{background:hsl(var(--secondary))} .docrow .tag{flex:0 0 auto;min-width:58px;text-align:center;font-size:12px;font-weight:600; color:hsl(var(--primary));background:hsl(var(--primary)/.12);padding:5px 8px;border-radius:8px; align-self:flex-start;white-space:nowrap} .docrow .body{min-width:0;flex:1} .docrow .t{font-size:14.5px;font-weight:600;letter-spacing:-.01em;line-height:1.35} .docrow .d{font-size:12.5px;color:hsl(var(--muted-foreground));margin-top:2px;line-height:1.45} .docrow .date{flex:0 0 auto;font-size:12px;color:hsl(var(--muted-foreground)); font-variant-numeric:tabular-nums} @media(max-width:560px){.docrow .date{display:none}} /* ---------- Chips (subcategories, topics) ---------- */ .chips{display:flex;gap:9px;flex-wrap:wrap} .chip{font-size:14px;font-weight:550;background:hsl(var(--card));border:1px solid hsl(var(--border)); padding:8px 15px;border-radius:999px;transition:.12s} .chip:hover{border-color:hsl(var(--primary));color:hsl(var(--primary))} .chip b{font-weight:500;font-variant-numeric:tabular-nums;opacity:.6;margin-left:5px} /* ---------- Cards ---------- */ .cardgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .card{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius); padding:16px 18px;transition:.12s} a.card:hover{transform:translateY(-2px);box-shadow:var(--shadow)} .ctop{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px} .badge{font-size:12px;font-weight:600;color:hsl(var(--primary));background:hsl(var(--primary)/.12); padding:3px 9px;border-radius:999px;white-space:nowrap} .date{font-size:12px;color:hsl(var(--muted-foreground))} .card h3{font-size:15.5px;line-height:1.3;margin:0 0 5px;font-weight:600;letter-spacing:-.01em} .card p{font-size:13px;color:hsl(var(--muted-foreground));line-height:1.5;margin:0} @media(max-width:880px){.cardgrid{grid-template-columns:1fr}} /* ---------- Ask-AI bar ---------- */ .askbar{margin:8px 0 0;background:hsl(var(--primary)/.10);border:1px solid hsl(var(--primary)/.30); border-radius:var(--radius);padding:18px 22px;display:flex;align-items:center; justify-content:space-between;gap:16px;flex-wrap:wrap} .askbar .t{font-size:15px;font-weight:600} .askbar .s{font-size:13px;color:hsl(var(--muted-foreground));margin-top:2px} /* ============================================================ HUB (/laws home) ============================================================ */ .hero{padding:54px 0 18px;text-align:center} .hero h1{font-size:40px;line-height:1.07;margin:0 0 8px;font-weight:700;letter-spacing:-.025em} .hero p{font-size:16px;margin:0 0 26px} .search{max-width:680px;margin:0 auto;position:relative} .search input{width:100%;height:58px;border-radius:var(--radius);border:1px solid hsl(var(--border)); background:hsl(var(--card));padding:0 18px 0 52px;font:inherit;font-size:16px;color:hsl(var(--foreground)); box-shadow:var(--shadow);outline:none;transition:border-color .15s,box-shadow .15s;appearance:none;-webkit-appearance:none} .search input::placeholder{color:hsl(var(--muted-foreground))} .search input:focus{border-color:hsl(var(--ring));box-shadow:0 0 0 3px hsl(var(--ring)/.25),var(--shadow)} .search .ico{position:absolute;left:18px;top:50%;transform:translateY(-50%); color:hsl(var(--muted-foreground));display:grid;place-items:center} .dd{position:absolute;left:0;right:0;top:66px;background:hsl(var(--card));border:1px solid hsl(var(--border)); border-radius:var(--radius);box-shadow:var(--shadow);text-align:left; opacity:0;visibility:hidden;transform:translateY(-4px);transition:.14s;z-index:40;max-height:62vh;overflow-y:auto} .search.open .dd{opacity:1;visibility:visible;transform:none} .dd .grp{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase; color:hsl(var(--muted-foreground));padding:11px 16px 5px} .dd .row{display:flex;align-items:center;gap:12px;padding:9px 16px;cursor:pointer} .dd .row:hover,.dd .row.active{background:hsl(var(--secondary))} .dd .row .ic{flex:0 0 auto;min-width:30px;height:30px;display:grid;place-items:center;border-radius:7px; background:hsl(var(--primary)/.12);color:hsl(var(--primary));font-size:11px;font-weight:700;padding:0 5px} .dd .row .tx{font-size:14px;font-weight:550;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dd .row .tx span{color:hsl(var(--muted-foreground));font-weight:400} .dd mark{background:hsl(var(--primary)/.16);color:inherit;font-weight:650;border-radius:3px;padding:0 1px} .dd .all{border-top:1px solid hsl(var(--border));padding:11px 16px;font-size:13.5px; color:hsl(var(--primary));font-weight:600;cursor:pointer} .dd .all:hover{background:hsl(var(--secondary))} .dd .empty{padding:18px 16px;font-size:13.5px;color:hsl(var(--muted-foreground));text-align:center} .trust{margin:12px 0 0;font-size:12.5px;color:hsl(var(--muted-foreground)); display:flex;gap:7px;justify-content:center;align-items:center} .trust .dot{width:6px;height:6px;border-radius:999px;background:hsl(var(--primary))} .typenav{margin:18px auto 0;display:flex;gap:6px;justify-content:center;flex-wrap:wrap;font-size:13.5px} .typenav a{padding:7px 13px;border-radius:999px;color:hsl(var(--muted-foreground));transition:.12s} .typenav a:hover{background:hsl(var(--secondary));color:hsl(var(--foreground))} .typenav b{font-weight:500;font-variant-numeric:tabular-nums;opacity:.65;margin-left:4px} /* Codex grid — flex, last row stretches: never a hole at any width. */ .codes{display:flex;flex-wrap:wrap;gap:10px} .code{flex:1 1 132px;min-width:118px;background:hsl(var(--card));border:1px solid hsl(var(--border)); border-radius:var(--radius);padding:15px 10px;text-align:center;transition:.12s} .code:hover{transform:translateY(-2px);border-color:hsl(var(--primary));box-shadow:var(--shadow)} .code .ab{font-weight:700;font-size:19px;color:hsl(var(--primary));line-height:1;letter-spacing:-.02em} .code .nm{font-size:12px;margin-top:7px;line-height:1.2;font-weight:500} .code .ct{font-size:11px;color:hsl(var(--muted-foreground));margin-top:3px} .explore{display:grid;grid-template-columns:1.55fr 1fr;gap:24px;align-items:start} .explore--solo{grid-template-columns:1fr;max-width:720px} .tools{display:grid;grid-template-columns:repeat(4,1fr);gap:10px} .tool{display:flex;align-items:center;gap:10px;background:hsl(var(--card));border:1px solid hsl(var(--border)); border-radius:var(--radius);padding:13px 15px;font-size:13.5px;font-weight:550;transition:.12s} .tool:hover{border-color:hsl(var(--primary))} .tool svg{flex:0 0 auto;color:hsl(var(--primary))} @media(max-width:880px){ .explore{grid-template-columns:1fr;gap:18px} .tools{grid-template-columns:repeat(2,1fr)} .hero h1{font-size:30px} } /* ============================================================ LAW PAGE (/laws//) ============================================================ */ .head-card{margin-top:18px;background:hsl(var(--card));border:1px solid hsl(var(--border)); border-radius:var(--radius);padding:22px 24px} .head-eyebrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px} .head-badge{font-size:12.5px;font-weight:650;color:hsl(var(--primary)); background:hsl(var(--primary)/.12);padding:4px 10px;border-radius:999px} .head-type{font-size:12.5px;color:hsl(var(--muted-foreground))} .head-date{font-size:12.5px;color:hsl(var(--muted-foreground));font-variant-numeric:tabular-nums} .head-title{font-size:26px;line-height:1.2;margin:0;font-weight:700;letter-spacing:-.02em} @media(max-width:560px){.head-title{font-size:21px}} .summary-card{margin-top:14px;background:hsl(var(--primary)/.08);border:1px solid hsl(var(--primary)/.28); border-radius:var(--radius);padding:18px 22px} .summary-title{display:flex;align-items:center;gap:8px;margin:0 0 10px; font-size:13px;font-weight:700;color:hsl(var(--primary))} .summary-title .summary-divider{opacity:.5} .summary-body{font-size:15px;line-height:1.65} .summary-body p{margin:0 0 8px} .summary-body p:last-child{margin-bottom:0} .section-title{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; color:hsl(var(--muted-foreground));margin:0 0 14px} /* Codex TOC */ .codex-toc{margin-top:22px} .codex-toc-chapter{background:hsl(var(--card));border:1px solid hsl(var(--border)); border-radius:var(--radius);margin-bottom:8px;overflow:hidden} .codex-toc-chapter-title{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:13px 16px;cursor:pointer;font-size:14.5px;font-weight:600;list-style:none} .codex-toc-chapter-title::-webkit-details-marker{display:none} .codex-toc-chapter-title:hover{background:hsl(var(--secondary))} .codex-toc-chapter-title a{color:inherit} .codex-toc-chapter-title a:hover{color:hsl(var(--primary))} .codex-toc-counter{font-size:12px;font-weight:600;color:hsl(var(--muted-foreground)); background:hsl(var(--secondary));border:1px solid hsl(var(--border)); padding:2px 9px;border-radius:999px;font-variant-numeric:tabular-nums} .codex-toc-articles{margin:0;padding:6px 0;list-style:none;border-top:1px solid hsl(var(--border)); columns:2;column-gap:0} .codex-toc-articles li{break-inside:avoid} .codex-toc-articles a{display:block;padding:7px 16px;font-size:13.5px; color:hsl(var(--muted-foreground));overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .codex-toc-articles a:hover{color:hsl(var(--primary));background:hsl(var(--secondary))} @media(max-width:680px){.codex-toc-articles{columns:1}} /* Body disclosure */ .body-disclosure{margin-top:14px;background:hsl(var(--card));border:1px solid hsl(var(--border)); border-radius:var(--radius);overflow:hidden} .body-disclosure-summary{display:flex;align-items:center;gap:10px;padding:15px 18px;cursor:pointer; font-size:14.5px;font-weight:600;list-style:none;user-select:none} .body-disclosure-summary::-webkit-details-marker{display:none} .body-disclosure-summary:hover{background:hsl(var(--secondary))} .body-disclosure-label{display:flex;align-items:center;gap:9px} .body-disclosure-icon{display:grid;place-items:center;color:hsl(var(--primary))} .body-meta{margin-left:auto;font-size:12.5px;font-weight:500;color:hsl(var(--muted-foreground))} .body-disclosure-caret{display:grid;place-items:center;color:hsl(var(--muted-foreground)); transition:transform .15s;margin-left:auto} .body-meta+.body-disclosure-caret{margin-left:0} .body-disclosure[open] .body-disclosure-caret{transform:rotate(180deg)} /* Law text typography */ .body-content{padding:6px 22px 22px;border-top:1px solid hsl(var(--border)); font-size:16px;line-height:1.7;overflow-wrap:break-word} .body-content h2{font-size:18px;line-height:1.35;margin:26px 0 10px;font-weight:650; letter-spacing:-.01em;position:relative} .body-content h3{font-size:16px;margin:20px 0 8px;font-weight:650} .body-content p{margin:0 0 12px} .body-content li{margin:0 0 6px} .body-content a{color:hsl(var(--primary));text-decoration:underline;text-underline-offset:2px} .body-content blockquote{margin:14px 0;padding:10px 16px;border-left:3px solid hsl(var(--primary)/.5); background:hsl(var(--secondary));border-radius:0 8px 8px 0} .body-content .anchor{position:absolute;left:-20px;top:0;color:hsl(var(--muted-foreground)); opacity:0;font-weight:500;text-decoration:none} .body-content h2:hover .anchor{opacity:.7} @media(max-width:760px){.body-content .anchor{display:none}} /* Cite button (injected by reader.js) */ .cite-btn{position:absolute;display:none;align-items:center;gap:5px;padding:4px 9px; font-size:11px;font-weight:600;color:hsl(var(--muted-foreground));background:hsl(var(--card)); border:1px solid hsl(var(--border));border-radius:7px;cursor:pointer;font-family:inherit} .body-content p:hover .cite-btn,.body-content li:hover .cite-btn{display:inline-flex} .cite-btn:hover{color:hsl(var(--primary));border-color:hsl(var(--primary))} .cite-btn[data-copied="true"]{color:hsl(var(--primary))} /* Primary CTA */ .cta-primary{margin-top:18px;display:flex;align-items:center;justify-content:center;gap:10px; background:hsl(var(--primary));color:hsl(var(--primary-foreground));border-radius:var(--radius); padding:15px 20px;font-size:15px;font-weight:650;transition:.12s} .cta-primary:hover{filter:brightness(1.06)} .cta-primary:active{transform:scale(.99)} .cta-icon{display:grid;place-items:center} /* Share row */ .share-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px} .share-btn{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center; padding:10px 14px;font-size:13px;font-weight:600;color:hsl(var(--muted-foreground)); background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:10px; cursor:pointer;font-family:inherit;transition:.12s} .share-btn:hover{color:hsl(var(--foreground));border-color:hsl(var(--primary))} /* FAQ */ .faq{margin-top:26px} .faq-item{background:hsl(var(--card));border:1px solid hsl(var(--border)); border-radius:var(--radius);margin-bottom:8px;overflow:hidden} .faq-item summary{padding:13px 16px;cursor:pointer;font-size:14.5px;font-weight:600;list-style:none} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary:hover{background:hsl(var(--secondary))} .faq-answer{padding:2px 16px 14px;font-size:14px;line-height:1.65;color:hsl(var(--muted-foreground))} .faq-answer a{color:hsl(var(--primary));text-decoration:underline} /* Related */ .related{margin-top:26px} .related-list{margin:0;padding:0;list-style:none;border:1px solid hsl(var(--border)); border-radius:var(--radius);background:hsl(var(--card));overflow:hidden} .related-list li{border-bottom:1px solid hsl(var(--border));font-size:14px;line-height:1.5} .related-list li:last-child{border-bottom:0} .related-list li a{display:inline;color:hsl(var(--primary));font-weight:600} .related-list li{padding:11px 16px} .related-note{color:hsl(var(--muted-foreground))} /* Disclaimer / source */ .page-note{margin-top:26px;font-size:12.5px;color:hsl(var(--muted-foreground)); display:flex;gap:7px;align-items:flex-start;line-height:1.55} .page-note a{text-decoration:underline} .page-note svg{flex:0 0 auto;margin-top:2px} /* Sticky mobile CTA */ .cta-sticky{position:fixed;left:12px;right:12px;bottom:12px;z-index:50; display:flex;align-items:center;justify-content:center;gap:9px; background:hsl(var(--primary));color:hsl(var(--primary-foreground)); border-radius:999px;padding:14px 18px;font-size:14.5px;font-weight:650; box-shadow:var(--shadow);transform:translateY(90px);opacity:0;transition:.2s} .cta-sticky[data-state="visible"]{transform:none;opacity:1} @media(min-width:761px){.cta-sticky{display:none}} /* Reading progress (injected by reader.js) */ .reading-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;pointer-events:none} .reading-progress-fill{height:100%;width:0;background:hsl(var(--primary))} /* ============================================================ CATEGORY PAGE (/laws//) ============================================================ */ .cat-hero{padding:26px 0 4px} .cat-hero h1{font-size:30px;line-height:1.1;margin:0 0 6px;font-weight:700;letter-spacing:-.02em} .cat-counter{font-size:14px;color:hsl(var(--muted-foreground));margin:0} /* ============================================================ TOPICS ============================================================ */ .topic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} @media(max-width:880px){.topic-grid{grid-template-columns:1fr}} .topic-card{display:flex;flex-direction:column;gap:6px;background:hsl(var(--card)); border:1px solid hsl(var(--border));border-radius:var(--radius);padding:18px;transition:.12s} .topic-card:hover{transform:translateY(-2px);border-color:hsl(var(--primary));box-shadow:var(--shadow)} .topic-card-title{font-size:16px;font-weight:650;margin:0;letter-spacing:-.01em} .topic-card-sub{font-size:13px;color:hsl(var(--muted-foreground));line-height:1.5;margin:0} .topic-card-count{margin-top:auto;padding-top:8px;font-size:12.5px;font-weight:600;color:hsl(var(--primary))} .topic-summary{margin-top:14px;background:hsl(var(--card));border:1px solid hsl(var(--border)); border-radius:var(--radius);padding:18px 22px;font-size:15px;line-height:1.65} .topic-summary p{margin:0 0 10px} .topic-summary p:last-child{margin-bottom:0} .topic-summary a{color:hsl(var(--primary));text-decoration:underline} /* ============================================================ ABOUT / prose pages ============================================================ */ .prose{font-size:15.5px;line-height:1.7} .prose h2{font-size:19px;margin:28px 0 10px;font-weight:650;letter-spacing:-.01em} .prose p{margin:0 0 12px} .prose a{color:hsl(var(--primary));text-decoration:underline;text-underline-offset:2px} .prose ul{padding-left:22px} .prose li{margin:0 0 6px}