/* ============================================================ MKK.Legal — THEMES Three modern directions sharing a navy/cream anchor. Switch via [data-theme] on . (1) editorial (2) grid (3) warm Accent can be overridden at runtime via --accent / --accent-on. ============================================================ */ :root { /* shared accent ring helper recomputed per accent */ --accent-ring: color-mix(in oklab, var(--accent) 22%, transparent); --accent-shadow: color-mix(in oklab, var(--accent) 55%, transparent); } /* ---------- 1 · EDITORIAL ---------- */ [data-theme="editorial"] { --bg: #faf8f3; --bg-2: #f2eee4; --ink: #14253c; --muted: #6b7689; --accent: #b8893f; --accent-on: #fffaf0; --line: color-mix(in oklab, #14253c 12%, transparent); --line-strong: color-mix(in oklab, #14253c 24%, transparent); --chip: color-mix(in oklab, #14253c 5%, transparent); --paper: #ffffff; --font-display: "Newsreader", Georgia, serif; --font-body: "Hanken Grotesk", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; --display-weight: 500; --display-tracking: -.015em; --radius: 18px; --card-radius: 16px; --img-radius: 14px; --btn-radius: 999px; --input-radius: 10px; --img-filter: none; --shadow: 0 30px 60px -30px rgba(20,37,60,.28); --shadow-soft: 0 20px 50px -28px rgba(20,37,60,.18); } /* ---------- 2 · GRID (swiss / tech) ---------- */ [data-theme="grid"] { --bg: #ffffff; --bg-2: #f4f5f7; --ink: #0d1b2a; --muted: #5a6675; --accent: #1d3a63; --accent-on: #ffffff; --line: color-mix(in oklab, #0d1b2a 14%, transparent); --line-strong: color-mix(in oklab, #0d1b2a 30%, transparent); --chip: color-mix(in oklab, #0d1b2a 5%, transparent); --paper: #ffffff; --font-display: "Space Grotesk", system-ui, sans-serif; --font-body: "Hanken Grotesk", system-ui, sans-serif; --font-mono: "Space Mono", ui-monospace, monospace; --display-weight: 600; --display-tracking: -.025em; --radius: 4px; --card-radius: 4px; --img-radius: 4px; --btn-radius: 4px; --input-radius: 4px; --img-filter: grayscale(.18) contrast(1.02); --shadow: 0 24px 48px -28px rgba(13,27,42,.34); --shadow-soft: 0 16px 40px -26px rgba(13,27,42,.2); } /* grid theme: structural hairlines feel */ [data-theme="grid"] .section { border-top: 1px solid var(--line); } [data-theme="grid"] .section:first-of-type { border-top: 0; } [data-theme="grid"] .kicker::before { width: 40px; } [data-theme="grid"] .h-display { letter-spacing: -.035em; } /* ---------- 3 · WARM ---------- */ [data-theme="warm"] { --bg: #f4efe7; --bg-2: #ece4d6; --ink: #2a2620; --muted: #7c7264; --accent: #1f4d5c; --accent-on: #f7f2ea; --line: color-mix(in oklab, #2a2620 13%, transparent); --line-strong: color-mix(in oklab, #2a2620 26%, transparent); --chip: color-mix(in oklab, #2a2620 6%, transparent); --paper: #fbf8f2; --font-display: "Instrument Serif", Georgia, serif; --font-body: "Hanken Grotesk", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; --display-weight: 400; --display-tracking: 0em; --radius: 26px; --card-radius: 22px; --img-radius: 22px; --btn-radius: 999px; --input-radius: 14px; --img-filter: saturate(1.04) sepia(.05); --shadow: 0 34px 70px -34px rgba(42,38,32,.3); --shadow-soft: 0 22px 56px -30px rgba(42,38,32,.2); } /* warm: larger, airier display */ [data-theme="warm"] .h-display { font-size: clamp(50px, 9vw, 122px); } [data-theme="warm"] .h-xl { font-size: clamp(38px, 6vw, 78px); } /* ============================================================ 4 · NOIR — the flagship "red dot" theme (always dark) Editorial drama, near-black canvas, a single decisive red accent. ============================================================ */ [data-theme="noir"] { --bg: #0c0b0d; --bg-2: #131115; --ink: #f4efe9; --muted: #948c87; --accent: #e23b32; --accent-on: #fff7f4; /* a11y: tekst kickera czytelny na bg-2 #131115 (4.9:1); linia i pulsująca kropka pozostają brandowym #e23b32 */ --accent-kicker: #e74b42; /* Ciemniejszy odcień TYLKO dla tła przycisku CTA: czysta biel na #d63a31 = 4.66:1 (WCAG AA); jaskrawe #e23b32 zostaje w kropkach/akcentach, gdzie kontrast tekstu nie obowiązuje. */ --accent-btn: #d63a31; --accent-btn-on: #ffffff; --line: color-mix(in oklab, #f4efe9 13%, transparent); --line-strong: color-mix(in oklab, #f4efe9 26%, transparent); --chip: color-mix(in oklab, #f4efe9 7%, transparent); --paper: #16141a; --font-display: "Newsreader", Georgia, serif; --font-body: "Hanken Grotesk", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; --display-weight: 500; --display-tracking: -.018em; --radius: 16px; --card-radius: 14px; --img-radius: 12px; --btn-radius: 999px; --input-radius: 10px; --img-filter: grayscale(.35) contrast(1.05) brightness(.95); --shadow: 0 40px 80px -36px rgba(0,0,0,.7); --shadow-soft: 0 24px 60px -34px rgba(0,0,0,.55); } /* ============================================================ DARK MODE — toggle that darkens editorial / grid / warm. Scoped away from Noir (which is already dark by design). ============================================================ */ [data-mode="dark"]:not([data-theme="noir"]) { --bg: #0e1014; --bg-2: #161922; --ink: #f2efe9; --muted: #9097a4; --line: color-mix(in oklab, #f2efe9 12%, transparent); --line-strong: color-mix(in oklab, #f2efe9 24%, transparent); --chip: color-mix(in oklab, #f2efe9 7%, transparent); --paper: #181b24; --shadow: 0 40px 80px -36px rgba(0,0,0,.65); --shadow-soft: 0 24px 60px -34px rgba(0,0,0,.5); --img-filter: brightness(.9) contrast(1.03); } /* keep each theme's accent vivid enough on a dark canvas */ [data-mode="dark"][data-theme="editorial"] { --accent: #d3a45f; --accent-on: #1a140a; } [data-mode="dark"][data-theme="grid"] { --bg: #0c1118; --bg-2: #121a26; --accent: #6c9ce8; --accent-on: #07101d; } [data-mode="dark"][data-theme="warm"] { --bg: #14110d; --bg-2: #1c1813; --paper: #1d1a14; --accent: #5cb6c7; --accent-on: #07171a; }