/* dpdpa.dcomply.in — Editorial AI v2 * Warm cream paper, rotating category colours (Act indigo / Rules amber / Penalty rose / * Sector teal / Tool emerald / Board violet). Fraunces display + Inter body + JetBrains Mono. * Dark mode via prefers-color-scheme + manual toggle. Standalone, no framework. */ /* ================================ * TOKENS * ================================ */ :root { /* Ink + paper, warmer than pure black/white */ --ink: #17121B; --ink-2: #2E2731; --ink-3: #574F5C; --ink-4: #8A828F; --paper: #FBF7F0; --paper-2: #F4EEE3; --paper-3: #EDE5D5; --line: rgba(23, 18, 27, 0.12); --line-2: rgba(23, 18, 27, 0.06); /* Category palette */ --c-act: #3730A3; --c-act-w: #EDECFB; --c-rules: #B45309; --c-rules-w: #FBEED9; --c-penalty: #BE123C; --c-penalty-w:#FBE0E7; --c-sector: #0F766E; --c-sector-w: #D4EFEA; --c-tool: #15803D; --c-tool-w: #DBEFDC; --c-board: #6D28D9; --c-board-w: #ECE0FB; /* Freshness signal */ --ok: #15803D; --ok-w: #DBEFDC; --warn: #B45309; --warn-w: #FBEED9; --shift: 0.2s ease; --content-width: 720px; --wide-width: 1200px; } /* Dark mode */ @media (prefers-color-scheme: dark) { :root:not([data-force-theme="light"]) { --ink: #F5EFE1; --ink-2: #DED6C6; --ink-3: #ADA599; --ink-4: #6E675E; --paper: #100D14; --paper-2: #1A1520; --paper-3: #241E2A; --line: rgba(245, 239, 225, 0.15); --line-2: rgba(245, 239, 225, 0.08); --c-act: #A5B4FC; --c-act-w: rgba(165, 180, 252, 0.14); --c-rules: #FCD34D; --c-rules-w: rgba(252, 211, 77, 0.14); --c-penalty: #FDA4AF; --c-penalty-w:rgba(253, 164, 175, 0.14); --c-sector: #5EEAD4; --c-sector-w: rgba(94, 234, 212, 0.14); --c-tool: #86EFAC; --c-tool-w: rgba(134, 239, 172, 0.14); --c-board: #C4B5FD; --c-board-w: rgba(196, 181, 253, 0.14); --ok: #86EFAC; --ok-w: rgba(134, 239, 172, 0.14); --warn: #FCD34D; --warn-w: rgba(252, 211, 77, 0.14); } } :root[data-force-theme="dark"] { --ink: #F5EFE1; --ink-2: #DED6C6; --ink-3: #ADA599; --ink-4: #6E675E; --paper: #100D14; --paper-2: #1A1520; --paper-3: #241E2A; --line: rgba(245, 239, 225, 0.15); --line-2: rgba(245, 239, 225, 0.08); --c-act: #A5B4FC; --c-act-w: rgba(165, 180, 252, 0.14); --c-rules: #FCD34D; --c-rules-w: rgba(252, 211, 77, 0.14); --c-penalty: #FDA4AF; --c-penalty-w: rgba(253, 164, 175, 0.14); --c-sector: #5EEAD4; --c-sector-w: rgba(94, 234, 212, 0.14); --c-tool: #86EFAC; --c-tool-w: rgba(134, 239, 172, 0.14); --c-board: #C4B5FD; --c-board-w: rgba(196, 181, 253, 0.14); --ok: #86EFAC; --ok-w: rgba(134, 239, 172, 0.14); --warn: #FCD34D; --warn-w: rgba(252, 211, 77, 0.14); } /* Page-level category — set data-cat on per page type * act | rules | penalty | sector | tool | board (default: act) */ body { --cat: var(--c-act); --cat-w: var(--c-act-w); } body[data-cat="rules"] { --cat: var(--c-rules); --cat-w: var(--c-rules-w); } body[data-cat="penalty"] { --cat: var(--c-penalty); --cat-w: var(--c-penalty-w); } body[data-cat="sector"] { --cat: var(--c-sector); --cat-w: var(--c-sector-w); } body[data-cat="tool"] { --cat: var(--c-tool); --cat-w: var(--c-tool-w); } body[data-cat="board"] { --cat: var(--c-board); --cat-w: var(--c-board-w); } /* ================================ * BASE * ================================ */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 18px; line-height: 1.72; color: var(--ink-2); margin: 0; background: var(--paper); -webkit-font-smoothing: antialiased; font-feature-settings: 'ss01', 'cv11'; transition: background var(--shift), color var(--shift); } /* Subtle hero wash across page top */ body::before { content: ''; position: fixed; inset: 0 0 auto 0; height: 480px; pointer-events: none; z-index: -1; background: radial-gradient(1200px 500px at 15% -10%, color-mix(in oklab, var(--cat) 18%, transparent), transparent 70%), radial-gradient(900px 400px at 85% -5%, color-mix(in oklab, var(--c-rules) 12%, transparent), transparent 65%), linear-gradient(180deg, var(--paper-2) 0%, transparent 100%); opacity: 0.85; } h1, h2, h3, h4 { font-family: 'Fraunces', 'Times New Roman', Georgia, serif; color: var(--ink); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; margin-top: 0; font-variation-settings: 'opsz' 96, 'SOFT' 20; } h1 { font-size: 68px; margin-bottom: 24px; letter-spacing: -0.035em; } h2 { font-size: 34px; margin: 72px 0 20px; letter-spacing: -0.025em; scroll-margin-top: 80px; } h2 .h2-num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 14px; font-weight: 700; color: var(--cat); vertical-align: middle; margin-right: 12px; letter-spacing: 0.06em; } h3 { font-size: 22px; font-family: 'Inter', sans-serif; font-weight: 600; letter-spacing: -0.01em; margin: 32px 0 12px; color: var(--ink); } h4 { font-size: 18px; font-family: 'Inter', sans-serif; font-weight: 600; margin: 24px 0 10px; color: var(--ink); letter-spacing: -0.005em; } p { margin: 0 0 20px; max-width: 66ch; } a { color: var(--cat); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--shift); } a:hover { border-bottom-color: var(--cat); } strong { color: var(--ink); font-weight: 600; } em { font-style: italic; } code { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 90%; background: var(--paper-2); padding: 2px 6px; border-radius: 4px; color: var(--ink-2); } blockquote { border-left: 3px solid var(--cat); padding: 8px 20px; margin: 24px 0; color: var(--ink-3); font-family: 'Fraunces', serif; font-size: 20px; font-style: italic; } img { max-width: 100%; height: auto; } hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; } /* ================================ * TOPBAR * ================================ */ .topbar { border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(180%) blur(8px); -webkit-backdrop-filter: saturate(180%) blur(8px); background: color-mix(in oklab, var(--paper) 82%, transparent); } .topbar-inner { max-width: var(--wide-width); margin: 0 auto; padding: 12px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .brand { color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: 12px; } .brand:hover { border: 0; } .brand img { display: block; height: 34px; width: auto; } .brand .divider { color: var(--ink-4); font-size: 22px; font-weight: 300; line-height: 1; } .brand .k { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; color: var(--ink-4); letter-spacing: 0.14em; text-transform: uppercase; } /* Dark-mode logo swap */ .brand .logo-dark { display: none; } :root[data-force-theme="dark"] .brand .logo-light, @media (prefers-color-scheme: dark) { :root:not([data-force-theme="light"]) .brand .logo-light { display: none; } } :root[data-force-theme="dark"] .brand .logo-dark { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-force-theme="light"]) .brand .logo-light { display: none; } :root:not([data-force-theme="light"]) .brand .logo-dark { display: block; } } .top-nav { display: flex; gap: 4px; align-items: center; } .top-nav a { font-size: 14px; font-weight: 500; color: var(--ink-3); padding: 8px 12px; border-radius: 8px; } .top-nav a:hover { color: var(--ink); background: var(--paper-2); border: 0; } .top-nav a[data-cat="act"]:hover { color: var(--c-act); background: var(--c-act-w); } .top-nav a[data-cat="rules"]:hover { color: var(--c-rules); background: var(--c-rules-w); } .top-nav a[data-cat="penalty"]:hover { color: var(--c-penalty); background: var(--c-penalty-w); } .top-nav a[data-cat="sector"]:hover { color: var(--c-sector); background: var(--c-sector-w); } .top-nav a[data-cat="tool"]:hover { color: var(--c-tool); background: var(--c-tool-w); } .top-nav a[data-cat="board"]:hover { color: var(--c-board); background: var(--c-board-w); } .kbd-btn { display: inline-flex; align-items: center; gap: 10px; padding: 6px 10px 6px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; color: var(--ink-3); background: var(--paper-2); cursor: pointer; transition: all var(--shift); font-family: 'Inter', sans-serif; margin-left: 12px; } .kbd-btn:hover { color: var(--cat); border-color: var(--cat); } .kbd { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; padding: 2px 5px; background: var(--paper); border: 1px solid var(--line); border-radius: 4px; color: var(--ink-3); } .theme-toggle { background: transparent; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; color: var(--ink-3); cursor: pointer; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; margin-left: 8px; line-height: 1; } .theme-toggle:hover { color: var(--cat); border-color: var(--cat); } /* Mobile nav toggle */ .mobile-menu-btn { display: none; } @media (max-width: 900px) { .top-nav { display: none; } .top-nav.open { display: flex; position: absolute; top: 100%; right: 0; left: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--paper); border-bottom: 1px solid var(--line); padding: 8px 16px; } .top-nav.open a { padding: 12px 16px; border-radius: 6px; } .top-nav.open .kbd-btn, .top-nav.open .theme-toggle { margin: 8px 0; } .mobile-menu-btn { display: inline-flex; background: transparent; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; color: var(--ink-3); font-size: 18px; cursor: pointer; } } /* ================================ * LAYOUT * ================================ */ .container { max-width: var(--wide-width); margin: 0 auto; padding: 0 32px; } .content { max-width: var(--content-width); margin: 0 auto; padding: 0 24px; } main { min-height: 60vh; } /* Article shell with sticky right-rail TOC */ .article { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 72px; max-width: var(--wide-width); margin: 0 auto; padding: 56px 32px 96px; } .article-body { max-width: 720px; min-width: 0; } /* Hub home layout (no rail) */ .hub { max-width: var(--wide-width); margin: 0 auto; padding: 40px 32px 96px; } /* ================================ * HEADER OBJECTS * ================================ */ .crumbs { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--ink-4); margin-bottom: 20px; letter-spacing: 0.02em; } .crumbs a { color: var(--ink-4); } .crumbs a:hover { color: var(--ink-2); border: 0; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; } .mark { width: 64px; height: 64px; margin-bottom: 24px; display: block; opacity: 0.9; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; font-weight: 700; color: var(--cat); background: var(--cat-w); padding: 6px 12px; border-radius: 999px; letter-spacing: 0.06em; margin-bottom: 24px; text-transform: uppercase; } .eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cat); } h1 .accent { position: relative; display: inline-block; color: var(--cat); font-style: italic; font-weight: 500; } h1 .accent::after { content: ''; position: absolute; left: -4px; right: -4px; bottom: 4px; height: 14px; background: var(--cat-w); z-index: -1; border-radius: 3px; transform: rotate(-1deg); } .dek { font-family: 'Fraunces', serif; font-size: 22px; line-height: 1.5; color: var(--ink-3); font-weight: 400; max-width: 640px; margin: 8px 0 40px; font-variation-settings: 'opsz' 24, 'SOFT' 60; } .dek--dropcap::first-letter { font-size: 82px; float: left; font-weight: 600; line-height: 0.9; padding: 6px 12px 0 0; color: var(--cat); font-style: normal; font-variation-settings: 'opsz' 144, 'SOFT' 100; } /* Meta bar chips */ .meta-bar { display: flex; gap: 8px; flex-wrap: wrap; padding: 20px 0; margin: 24px 0 8px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-family: 'Inter', sans-serif; font-size: 13px; } .chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-weight: 500; font-size: 12.5px; letter-spacing: 0.01em; } .chip .dot { width: 6px; height: 6px; border-radius: 50%; } .chip-ok { background: var(--ok-w); color: var(--ok); } .chip-ok .dot { background: var(--ok); } .chip-warn { background: var(--warn-w); color: var(--warn); } .chip-warn .dot{ background: var(--warn); } .chip-src { background: var(--c-act-w); color: var(--c-act); } .chip-src .dot { background: var(--c-act); } .chip-time { background: var(--warn-w); color: var(--warn); } .chip-time .dot{ background: var(--warn); } .chip-tag { background: var(--c-board-w); color: var(--c-board); } .chip-tag .dot { background: var(--c-board); } .chip-cat { background: var(--cat-w); color: var(--cat); } .chip-cat .dot { background: var(--cat); } /* ================================ * ANSWER BLOCKS (passage-level GEO) * ================================ */ .answer { padding: 4px 0 4px 28px; border-left: 3px solid var(--cat); margin: 36px 0; position: relative; } .answer[data-kind="rules"] { border-left-color: var(--c-rules); } .answer[data-kind="penalty"] { border-left-color: var(--c-penalty); } .answer[data-kind="board"] { border-left-color: var(--c-board); } .answer[data-kind="tool"] { border-left-color: var(--c-tool); } .answer[data-kind="sector"] { border-left-color: var(--c-sector); } .answer::before { content: attr(data-label); display: inline-block; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cat); margin-bottom: 10px; padding: 3px 8px; background: var(--cat-w); border-radius: 4px; } .answer[data-kind="rules"]::before { color: var(--c-rules); background: var(--c-rules-w); } .answer[data-kind="penalty"]::before { color: var(--c-penalty); background: var(--c-penalty-w); } .answer[data-kind="board"]::before { color: var(--c-board); background: var(--c-board-w); } .answer[data-kind="tool"]::before { color: var(--c-tool); background: var(--c-tool-w); } .answer[data-kind="sector"]::before { color: var(--c-sector); background: var(--c-sector-w); } .answer .lede { font-family: 'Fraunces', serif; font-size: 24px; line-height: 1.45; color: var(--ink); font-weight: 500; margin: 12px 0 16px; letter-spacing: -0.01em; font-variation-settings: 'opsz' 32; } .answer p { font-size: 17px; margin: 0 0 12px; color: var(--ink-2); } .answer .cite { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; color: var(--ink-4); padding-top: 14px; margin-top: 16px; border-top: 1px dashed var(--line); letter-spacing: 0.01em; line-height: 1.6; } .answer .cite a { color: var(--ink-3); border-bottom: 1px solid var(--line); } .answer .cite a:hover { color: var(--ink); border-color: var(--ink-4); } /* ================================ * NUMBERED FACTORS LIST * ================================ */ .factors { list-style: none; padding: 0; margin: 28px 0; counter-reset: factor; } .factors li { counter-increment: factor; padding: 22px 0 22px 76px; border-bottom: 1px solid var(--line-2); position: relative; } .factors li:last-child { border-bottom: 0; } .factors li::before { content: counter(factor, decimal-leading-zero); position: absolute; left: 0; top: 20px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 20px; font-weight: 700; padding: 4px 12px; border-radius: 8px; } .factors li:nth-child(6n+1)::before { color: var(--c-act); background: var(--c-act-w); } .factors li:nth-child(6n+2)::before { color: var(--c-rules); background: var(--c-rules-w); } .factors li:nth-child(6n+3)::before { color: var(--c-penalty); background: var(--c-penalty-w); } .factors li:nth-child(6n+4)::before { color: var(--c-sector); background: var(--c-sector-w); } .factors li:nth-child(6n+5)::before { color: var(--c-tool); background: var(--c-tool-w); } .factors li:nth-child(6n)::before { color: var(--c-board); background: var(--c-board-w); } .factors h4 { font-family: 'Inter', sans-serif; font-size: 17px; font-weight: 600; margin: 0 0 6px; color: var(--ink); } .factors p { font-size: 15px; color: var(--ink-3); margin: 0; max-width: none; } /* ================================ * QUADRANT GRID (obligations, related, etc.) * ================================ */ .quad { display: grid; grid-template-columns: repeat(2, 1fr); border-radius: 14px; overflow: hidden; margin: 28px 0; border: 1px solid var(--line); } .quad > div { padding: 24px 26px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); transition: background var(--shift); } .quad > div:nth-child(2n) { border-right: 0; } .quad > div:nth-last-child(-n+2) { border-bottom: 0; } .quad > div:hover { background: var(--cat-w); } .quad > div[data-kind="rules"]:hover { background: var(--c-rules-w); } .quad > div[data-kind="board"]:hover { background: var(--c-board-w); } .quad > div[data-kind="sector"]:hover { background: var(--c-sector-w); } .quad > div[data-kind="tool"]:hover { background: var(--c-tool-w); } .quad > div[data-kind="penalty"]:hover{ background: var(--c-penalty-w); } .quad .rule { display: inline-block; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; margin-bottom: 10px; padding: 3px 8px; border-radius: 4px; color: var(--cat); background: var(--cat-w); } .quad [data-kind="rules"] .rule { color: var(--c-rules); background: var(--c-rules-w); } .quad [data-kind="board"] .rule { color: var(--c-board); background: var(--c-board-w); } .quad [data-kind="sector"] .rule { color: var(--c-sector); background: var(--c-sector-w); } .quad [data-kind="tool"] .rule { color: var(--c-tool); background: var(--c-tool-w); } .quad [data-kind="penalty"] .rule { color: var(--c-penalty); background: var(--c-penalty-w); } .quad h4 { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 500; margin: 0 0 8px; color: var(--ink); font-variation-settings: 'opsz' 32; } .quad p { font-size: 15px; color: var(--ink-3); margin: 0; max-width: none; } /* 3-column and 4-column extension of quad */ .quad-3 { grid-template-columns: repeat(3, 1fr); } .quad-3 > div:nth-child(3n) { border-right: 0; } .quad-3 > div:nth-child(3n+1), .quad-3 > div:nth-child(3n+2) { border-right: 1px solid var(--line); } .quad-3 > div:nth-last-child(-n+3) { border-bottom: 0; } /* ================================ * HUB CARD GRID (index / hub landing) * ================================ */ .grid { display: grid; gap: 20px; margin: 24px 0; } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .hub-card { display: block; padding: 24px 26px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); text-decoration: none !important; color: inherit !important; transition: border-color var(--shift), background var(--shift), transform var(--shift); position: relative; } .hub-card:hover { border-color: var(--cat); background: var(--cat-w); transform: translateY(-2px); } .hub-card[data-cat="rules"]:hover { border-color: var(--c-rules); background: var(--c-rules-w); } .hub-card[data-cat="penalty"]:hover { border-color: var(--c-penalty); background: var(--c-penalty-w); } .hub-card[data-cat="sector"]:hover { border-color: var(--c-sector); background: var(--c-sector-w); } .hub-card[data-cat="tool"]:hover { border-color: var(--c-tool); background: var(--c-tool-w); } .hub-card[data-cat="board"]:hover { border-color: var(--c-board); background: var(--c-board-w); } .hub-card .tag { display: inline-block; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; padding: 3px 8px; border-radius: 4px; margin-bottom: 12px; color: var(--cat); background: var(--cat-w); text-transform: uppercase; } .hub-card[data-cat="rules"] .tag { color: var(--c-rules); background: var(--c-rules-w); } .hub-card[data-cat="penalty"] .tag { color: var(--c-penalty); background: var(--c-penalty-w); } .hub-card[data-cat="sector"] .tag { color: var(--c-sector); background: var(--c-sector-w); } .hub-card[data-cat="tool"] .tag { color: var(--c-tool); background: var(--c-tool-w); } .hub-card[data-cat="board"] .tag { color: var(--c-board); background: var(--c-board-w); } .hub-card h3 { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 500; margin: 0 0 8px; color: var(--ink); font-variation-settings: 'opsz' 32; letter-spacing: -0.01em; } .hub-card p { font-size: 14.5px; color: var(--ink-3); margin: 0; line-height: 1.55; max-width: none; } .hub-card .sec-ref { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; color: var(--cat); font-weight: 700; margin-bottom: 8px; display: block; letter-spacing: 0.02em; } .hub-card[data-cat="rules"] .sec-ref { color: var(--c-rules); } .hub-card[data-cat="penalty"] .sec-ref { color: var(--c-penalty); } .hub-card[data-cat="sector"] .sec-ref { color: var(--c-sector); } .hub-card[data-cat="tool"] .sec-ref { color: var(--c-tool); } .hub-card[data-cat="board"] .sec-ref { color: var(--c-board); } /* ================================ * RELATED LIST * ================================ */ .related { margin: 56px 0 0; padding-top: 40px; border-top: 1px solid var(--line); } .related-title { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 20px; } .related-list { list-style: none; padding: 0; margin: 0; } .related-list li { padding: 16px 0; border-bottom: 1px solid var(--line-2); display: grid; grid-template-columns: 110px 1fr; gap: 20px; align-items: baseline; } .related-list li:last-child { border-bottom: 0; } .related-list .rr { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 4px; text-align: center; color: var(--cat); background: var(--cat-w); } .related-list li[data-kind="rules"] .rr { color: var(--c-rules); background: var(--c-rules-w); } .related-list li[data-kind="board"] .rr { color: var(--c-board); background: var(--c-board-w); } .related-list li[data-kind="sector"] .rr { color: var(--c-sector); background: var(--c-sector-w); } .related-list li[data-kind="tool"] .rr { color: var(--c-tool); background: var(--c-tool-w); } .related-list li[data-kind="penalty"] .rr { color: var(--c-penalty); background: var(--c-penalty-w); } .related-list a { color: var(--ink); font-weight: 500; font-size: 17px; } .related-list a:hover { border-bottom-color: var(--ink); } .related-list .sub { color: var(--ink-4); display: block; font-size: 14px; margin-top: 4px; } /* ================================ * RIGHT-RAIL TOC * ================================ */ .toc-rail { position: sticky; top: 88px; align-self: start; font-family: 'Inter', sans-serif; font-size: 14px; padding-left: 28px; border-left: 2px solid var(--cat-w); } .toc-rail .title { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cat); margin-bottom: 16px; } .toc-rail ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; } .toc-rail li { padding: 8px 0; counter-increment: toc; display: flex; gap: 12px; align-items: baseline; } .toc-rail li::before { content: counter(toc, decimal-leading-zero); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 700; color: var(--cat); } .toc-rail a { color: var(--ink-3); } .toc-rail a:hover, .toc-rail a.active { color: var(--ink); border: 0; } .toc-rail a.active { color: var(--cat); font-weight: 600; } .toc-rail .freshness { margin-top: 24px; padding: 16px; border-radius: 10px; background: var(--ok-w); font-size: 12.5px; color: var(--ink-2); line-height: 1.55; } .toc-rail .freshness strong { color: var(--ok); font-weight: 700; display: block; margin-bottom: 4px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; } /* ================================ * DCOMPLY MENTION (soft, no CTA button) * ================================ */ .dcomply-mention { margin: 32px 0 0; padding: 24px 28px; background: linear-gradient(135deg, var(--cat-w) 0%, var(--c-rules-w) 100%); border-radius: 14px; font-size: 15px; color: var(--ink-2); display: flex; gap: 20px; align-items: baseline; flex-wrap: wrap; position: relative; overflow: hidden; } .dcomply-mention::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--cat); } .dcomply-mention strong { color: var(--ink); font-weight: 600; } .dcomply-mention a { color: var(--cat); font-weight: 600; } /* ================================ * VERIFIED FOOTER STAMP * ================================ */ .verified-footer { margin: 56px 0 0; padding: 20px 0; border-top: 1px solid var(--line); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; color: var(--ink-4); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; } /* ================================ * SITE FOOTER * ================================ */ footer.site { border-top: 1px solid var(--line); padding: 56px 32px 32px; margin-top: 40px; font-family: 'Inter', sans-serif; font-size: 14px; color: var(--ink-3); background: var(--paper-2); } footer.site .inner { max-width: var(--wide-width); margin: 0 auto; } footer.site .footer-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 40px; margin-bottom: 40px; } footer.site h5 { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); margin: 0 0 14px; } footer.site ul { list-style: none; padding: 0; margin: 0; } footer.site li { padding: 5px 0; } footer.site a { color: var(--ink-2); font-size: 14px; } footer.site a:hover { color: var(--cat); border: 0; } footer.site .legal { border-top: 1px solid var(--line); padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--ink-4); } footer.site .legal a { color: var(--ink-4); } footer.site .brand-block img { height: 32px; margin-bottom: 12px; } footer.site .brand-block p { max-width: 380px; font-size: 14px; margin: 0 0 12px; color: var(--ink-3); } /* ================================ * COMMAND PALETTE * ================================ */ .palette { position: fixed; inset: 0; background: color-mix(in oklab, var(--ink) 50%, transparent); display: none; align-items: flex-start; justify-content: center; padding-top: 15vh; z-index: 100; backdrop-filter: blur(6px); } .palette.open { display: flex; } .palette-box { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; width: min(640px, 90vw); box-shadow: 0 30px 80px rgba(0,0,0,0.24); overflow: hidden; } .palette input { width: 100%; padding: 20px 24px; border: 0; background: transparent; color: var(--ink); font-family: 'Inter', sans-serif; font-size: 17px; outline: none; border-bottom: 1px solid var(--line); } .palette ul { list-style: none; padding: 8px 0; margin: 0; max-height: 340px; overflow: auto; } .palette li { padding: 12px 24px; font-size: 14px; color: var(--ink-2); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .palette li:hover, .palette li.active { background: var(--cat-w); color: var(--ink); } .palette li .rr { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; padding: 3px 8px; border-radius: 4px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .palette li[data-cat="act"] .rr { color: var(--c-act); background: var(--c-act-w); } .palette li[data-cat="rules"] .rr { color: var(--c-rules); background: var(--c-rules-w); } .palette li[data-cat="penalty"] .rr { color: var(--c-penalty); background: var(--c-penalty-w); } .palette li[data-cat="sector"] .rr { color: var(--c-sector); background: var(--c-sector-w); } .palette li[data-cat="tool"] .rr { color: var(--c-tool); background: var(--c-tool-w); } .palette li[data-cat="board"] .rr { color: var(--c-board); background: var(--c-board-w); } /* ================================ * TABLES * ================================ */ table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 14px; } th { text-align: left; padding: 12px 14px; background: var(--paper-2); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--ink-3); border-bottom: 1px solid var(--line); } td { padding: 14px; border-bottom: 1px solid var(--line-2); vertical-align: top; color: var(--ink-2); } tbody tr:hover { background: var(--paper-2); } /* ================================ * BUTTONS * ================================ */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 10px; font-weight: 600; text-decoration: none; font-size: 15px; border: 1px solid transparent; cursor: pointer; transition: all var(--shift); font-family: 'Inter', sans-serif; } .btn-primary { background: var(--cat); color: #fff !important; } .btn-primary:hover { background: var(--ink); color: #fff !important; border-bottom: 1px solid transparent; } .btn-outline { background: transparent; color: var(--cat); border-color: var(--cat); } .btn-outline:hover { background: var(--cat-w); border-bottom: 1px solid var(--cat); } /* ================================ * RESPONSIVE * ================================ */ @media (max-width: 1000px) { h1 { font-size: 48px; } h2 { font-size: 28px; margin: 48px 0 14px; } .article { grid-template-columns: 1fr; gap: 32px; padding: 32px 24px 64px; } .toc-rail { position: static; border-left: 0; border-top: 1px solid var(--line); padding: 24px 0 0; } .quad, .quad-3 { grid-template-columns: 1fr; } .quad > div, .quad-3 > div { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; } .quad > div:last-child, .quad-3 > div:last-child { border-bottom: 0 !important; } .dek { font-size: 20px; } .dek--dropcap::first-letter { font-size: 60px; } .answer .lede { font-size: 20px; } .related-list li { grid-template-columns: 1fr; gap: 8px; } footer.site .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; } .hub { padding: 24px 20px 60px; } } @media (max-width: 640px) { h1 { font-size: 38px; } .brand img { height: 28px; } .brand .k { display: none; } .container { padding: 0 20px; } footer.site .footer-grid { grid-template-columns: 1fr; } } /* ================================ * PRINT * ================================ */ @media print { .topbar, .dcomply-mention, footer.site, .palette, .theme-toggle, .kbd-btn, .mobile-menu-btn { display: none !important; } body::before { display: none; } main, .article, .hub { padding: 0; grid-template-columns: 1fr; } body { color: #000; font-size: 12pt; background: #fff; } a { color: #000; } .answer { break-inside: avoid; } .toc-rail { display: none; } }