/* ============================================================ themes.css — Visual style packs for BJJ Training Log. ------------------------------------------------------------ Each theme is selected via two attributes on : - data-theme : "dark" | "light" (Pico foundation palette) - data-style : (this file's brand layer) See theme-init.js for the slug → data-theme map. Each theme overrides: * Pico tokens (--pico-*) for palette, * Project tokens (--theme-*) defined in style.css for radii, shadows, badge/error/status colors and copy buttons, * Typography hooks for body and headings. Layout flourishes are scoped to :root[data-style=""] ... to keep them isolated from the base sheet. Webfonts are self-hosted under /static/fonts/ (no third-party requests). See /static/fonts/LICENSES.txt for attributions. ============================================================ */ /* ------------------------------------------------------------ Self-hosted webfonts (OFL). Loaded only when a theme that references the family is active, thanks to `font-display: swap` plus the lazy nature of @font-face evaluation. ------------------------------------------------------------ */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/static/fonts/inter-variable.woff2") format("woff2-variations"), url("/static/fonts/inter-variable.woff2") format("woff2"); } @font-face { font-family: "Lora"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/static/fonts/lora-latin.woff2") format("woff2-variations"), url("/static/fonts/lora-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/static/fonts/space-grotesk-latin.woff2") format("woff2-variations"), url("/static/fonts/space-grotesk-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Archivo Black"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/archivo-black-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ------------------------------------------------------------ tatami-dark — default; mirrors the historical Pico dark look. ------------------------------------------------------------ */ :root[data-style="tatami-dark"] { color-scheme: dark; --theme-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --theme-font-heading: var(--theme-font-body); --theme-heading-weight: 600; --theme-heading-tracking: -0.005em; --theme-radius-card: 0.5rem; --theme-shadow-card: none; } /* ------------------------------------------------------------ editorial-minimal — justinjackson.ca, dau.lt Cream paper, serif headings, generous whitespace, no shadows. ------------------------------------------------------------ */ :root[data-style="editorial-minimal"] { color-scheme: light; /* Foundation */ --pico-background-color: #f7f3ec; --pico-color: #2b2a26; --pico-muted-color: #6b675e; --pico-muted-border-color: #e3dccf; --pico-primary: #1a1a1a; --pico-primary-background: #1a1a1a; --pico-primary-border: #1a1a1a; --pico-primary-hover: #000; --pico-primary-hover-background: #000; --pico-primary-hover-border: #000; --pico-primary-focus: rgba(26, 26, 26, 0.18); --pico-primary-inverse: #f7f3ec; --pico-primary-underline: rgba(26, 26, 26, 0.4); --pico-secondary: #6b675e; --pico-secondary-background: #ece5d6; --pico-secondary-inverse: #2b2a26; --pico-card-background-color: #fbf8f2; --pico-card-sectioning-background-color: #fbf8f2; --pico-card-border-color: #e3dccf; --pico-border-radius: 0; --pico-form-element-background-color: #fbf8f2; --pico-form-element-border-color: #d6cebd; /* Typography — self-hosted Lora serif. */ --theme-font-body: "Lora", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif; --theme-font-heading: var(--theme-font-body); --theme-heading-weight: 700; --theme-heading-tracking: -0.01em; /* Brand layer */ --theme-radius-card: 0; --theme-radius-pill: 0; --theme-shadow-card: none; --theme-badge-bg: #1a1a1a; --theme-badge-fg: #f7f3ec; --theme-error-bg: #8b1d1d; --theme-error-fg: #fbf8f2; --theme-status-info-bg: rgba(70, 100, 150, 0.08); --theme-status-info-border: rgba(70, 100, 150, 0.3); --theme-status-success-bg: rgba(60, 120, 60, 0.08); --theme-status-success-border: rgba(60, 120, 60, 0.35); --theme-status-warn-bg: rgba(180, 130, 30, 0.08); --theme-status-warn-border: rgba(180, 130, 30, 0.35); --theme-status-error-bg: rgba(140, 40, 40, 0.08); --theme-status-error-border: rgba(140, 40, 40, 0.35); --theme-copy-btn-light-bg: rgba(0, 0, 0, 0.06); --theme-copy-btn-light-bg-hover: rgba(0, 0, 0, 0.12); --theme-copy-btn-light-border: rgba(0, 0, 0, 0.15); --theme-copy-btn-dark-bg: rgba(0, 0, 0, 0.06); --theme-copy-btn-dark-bg-hover: rgba(0, 0, 0, 0.12); --theme-copy-btn-dark-border: rgba(0, 0, 0, 0.15); } :root[data-style="editorial-minimal"] h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.15; } :root[data-style="editorial-minimal"] nav ul li a { font-weight: 600; text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; } :root[data-style="editorial-minimal"] nav ul li a[aria-current="page"] { text-decoration-thickness: 2px; } /* ------------------------------------------------------------ slack-friendly — slack.com, pay.google.com White surface, aubergine primary, rounded pills, soft shadows. ------------------------------------------------------------ */ :root[data-style="slack-friendly"] { color-scheme: light; /* Palette adopted from Google Pay (Material). */ --pico-background-color: #ffffff; --pico-color: #202124; --pico-muted-color: #5f6368; --pico-muted-border-color: #dadce0; --pico-primary: #1a73e8; --pico-primary-background: #1a73e8; --pico-primary-border: #1a73e8; --pico-primary-hover: #1765cc; --pico-primary-hover-background: #1765cc; --pico-primary-hover-border: #1765cc; --pico-primary-focus: rgba(26, 115, 232, 0.2); --pico-primary-inverse: #ffffff; --pico-primary-underline: rgba(26, 115, 232, 0.4); --pico-secondary: #5f6368; --pico-secondary-background: #f1f3f4; --pico-secondary-inverse: #202124; --pico-card-background-color: #ffffff; --pico-card-sectioning-background-color: #f8f9fa; --pico-card-border-color: #dadce0; --pico-border-radius: 0.5rem; --pico-form-element-background-color: #ffffff; --pico-form-element-border-color: #dadce0; --theme-font-body: "Inter", "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --theme-font-heading: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --theme-heading-weight: 800; --theme-heading-tracking: -0.015em; --theme-radius-card: 0.75rem; --theme-radius-pill: 999px; --theme-shadow-card: 0 1px 3px rgba(32, 33, 36, 0.06), 0 1px 2px rgba(32, 33, 36, 0.04); --theme-nav-link-radius: 999px; --theme-badge-bg: #ea4335; --theme-badge-fg: #ffffff; --theme-error-bg: #d93025; --theme-error-fg: #ffffff; --theme-status-info-bg: rgba(26, 115, 232, 0.08); --theme-status-info-border: rgba(26, 115, 232, 0.3); --theme-status-success-bg: rgba(15, 157, 88, 0.08); --theme-status-success-border: rgba(15, 157, 88, 0.35); --theme-status-warn-bg: rgba(244, 180, 0, 0.1); --theme-status-warn-border: rgba(244, 180, 0, 0.4); --theme-status-error-bg: rgba(217, 48, 37, 0.08); --theme-status-error-border: rgba(217, 48, 37, 0.35); --theme-copy-btn-light-bg: rgba(32, 33, 36, 0.05); --theme-copy-btn-light-bg-hover: rgba(32, 33, 36, 0.1); --theme-copy-btn-light-border: rgba(32, 33, 36, 0.1); --theme-copy-btn-dark-bg: rgba(32, 33, 36, 0.05); --theme-copy-btn-dark-bg-hover: rgba(32, 33, 36, 0.1); --theme-copy-btn-dark-border: rgba(32, 33, 36, 0.1); } :root[data-style="slack-friendly"] nav ul li a { padding: 0.35rem 0.75rem; border-radius: 999px; transition: background 0.15s ease; } :root[data-style="slack-friendly"] nav ul li a:hover { background: rgba(26, 115, 232, 0.08); text-decoration: none; } :root[data-style="slack-friendly"] nav ul li a[aria-current="page"] { background: rgba(26, 115, 232, 0.12); color: var(--pico-primary); } :root[data-style="slack-friendly"] button, :root[data-style="slack-friendly"] [role="button"], :root[data-style="slack-friendly"] input[type="submit"] { border-radius: 0.5rem; font-weight: 700; } /* ------------------------------------------------------------ slack-friendly-dark — Slack's dark workspace palette. Charcoal surfaces, brighter purple accent for legibility. ------------------------------------------------------------ */ :root[data-style="slack-friendly-dark"] { color-scheme: dark; /* Palette adopted from Google Pay dark (Material). */ --pico-background-color: #202124; --pico-color: #e8eaed; --pico-muted-color: #9aa0a6; --pico-muted-border-color: #3c4043; --pico-primary: #8ab4f8; --pico-primary-background: #8ab4f8; --pico-primary-border: #8ab4f8; --pico-primary-hover: #aecbfa; --pico-primary-hover-background: #aecbfa; --pico-primary-hover-border: #aecbfa; --pico-primary-focus: rgba(138, 180, 248, 0.24); --pico-primary-inverse: #202124; --pico-primary-underline: rgba(138, 180, 248, 0.5); --pico-secondary: #9aa0a6; --pico-secondary-background: #303134; --pico-secondary-inverse: #e8eaed; --pico-card-background-color: #292a2d; --pico-card-sectioning-background-color: #292a2d; --pico-card-border-color: #3c4043; --pico-border-radius: 0.5rem; --pico-form-element-background-color: #292a2d; --pico-form-element-border-color: #5f6368; --theme-font-body: "Inter", "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --theme-font-heading: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --theme-heading-weight: 800; --theme-heading-tracking: -0.015em; --theme-radius-card: 0.75rem; --theme-radius-pill: 999px; --theme-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25); --theme-nav-link-radius: 999px; --theme-badge-bg: #f28b82; --theme-badge-fg: #202124; --theme-error-bg: #f28b82; --theme-error-fg: #202124; --theme-status-info-bg: rgba(138, 180, 248, 0.12); --theme-status-info-border: rgba(138, 180, 248, 0.4); --theme-status-success-bg: rgba(129, 201, 149, 0.12); --theme-status-success-border: rgba(129, 201, 149, 0.4); --theme-status-warn-bg: rgba(253, 214, 99, 0.12); --theme-status-warn-border: rgba(253, 214, 99, 0.4); --theme-status-error-bg: rgba(242, 139, 130, 0.12); --theme-status-error-border: rgba(242, 139, 130, 0.4); --theme-copy-btn-light-bg: rgba(232, 234, 237, 0.08); --theme-copy-btn-light-bg-hover: rgba(232, 234, 237, 0.16); --theme-copy-btn-light-border: rgba(232, 234, 237, 0.2); --theme-copy-btn-dark-bg: rgba(232, 234, 237, 0.08); --theme-copy-btn-dark-bg-hover: rgba(232, 234, 237, 0.16); --theme-copy-btn-dark-border: rgba(232, 234, 237, 0.2); } :root[data-style="slack-friendly-dark"] nav ul li a { padding: 0.35rem 0.75rem; border-radius: 999px; transition: background 0.15s ease; } :root[data-style="slack-friendly-dark"] nav ul li a:hover { background: rgba(138, 180, 248, 0.12); text-decoration: none; } :root[data-style="slack-friendly-dark"] nav ul li a[aria-current="page"] { background: rgba(138, 180, 248, 0.18); color: var(--pico-primary); } :root[data-style="slack-friendly-dark"] button, :root[data-style="slack-friendly-dark"] [role="button"], :root[data-style="slack-friendly-dark"] input[type="submit"] { border-radius: 0.5rem; font-weight: 700; } /* ------------------------------------------------------------ kickpush-bold — kickpush.co Off-white paper, oversized headings, vivid orange, sharp edges. ------------------------------------------------------------ */ :root[data-style="kickpush-bold"] { color-scheme: light; --pico-background-color: #fcfbf7; --pico-color: #0e0e0e; --pico-muted-color: #5a5a5a; --pico-muted-border-color: #0e0e0e; --pico-primary: #ff5a1f; --pico-primary-background: #ff5a1f; --pico-primary-border: #0e0e0e; --pico-primary-hover: #e44a10; --pico-primary-hover-background: #e44a10; --pico-primary-hover-border: #0e0e0e; --pico-primary-focus: rgba(255, 90, 31, 0.25); --pico-primary-inverse: #0e0e0e; --pico-primary-underline: rgba(255, 90, 31, 0.5); --pico-secondary: #0e0e0e; --pico-secondary-background: #0e0e0e; --pico-secondary-inverse: #fcfbf7; --pico-card-background-color: #ffffff; --pico-card-sectioning-background-color: #ffffff; --pico-card-border-color: #0e0e0e; --pico-border-radius: 0; --pico-form-element-background-color: #ffffff; --pico-form-element-border-color: #0e0e0e; --theme-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --theme-font-heading: "Archivo Black", "Arial Black", Impact, "Inter", -apple-system, BlinkMacSystemFont, sans-serif; --theme-heading-weight: 900; --theme-heading-tracking: -0.025em; --theme-radius-card: 0; --theme-radius-pill: 0; --theme-shadow-card: 6px 6px 0 #0e0e0e; --theme-nav-link-transform: uppercase; --theme-nav-link-tracking: 0.08em; --theme-badge-bg: #ff5a1f; --theme-badge-fg: #0e0e0e; --theme-error-bg: #0e0e0e; --theme-error-fg: #ff5a1f; --theme-status-info-bg: #fcfbf7; --theme-status-info-border: #0e0e0e; --theme-status-success-bg: #fcfbf7; --theme-status-success-border: #0e0e0e; --theme-status-warn-bg: #fcfbf7; --theme-status-warn-border: #0e0e0e; --theme-status-error-bg: #fcfbf7; --theme-status-error-border: #0e0e0e; --theme-copy-btn-light-bg: #fcfbf7; --theme-copy-btn-light-bg-hover: #ff5a1f; --theme-copy-btn-light-border: #0e0e0e; --theme-copy-btn-dark-bg: #fcfbf7; --theme-copy-btn-dark-bg-hover: #ff5a1f; --theme-copy-btn-dark-border: #0e0e0e; } :root[data-style="kickpush-bold"] h1 { font-size: clamp(2rem, 6vw, 3.75rem); line-height: 0.95; text-transform: uppercase; } :root[data-style="kickpush-bold"] h2 { text-transform: uppercase; } :root[data-style="kickpush-bold"] nav ul li a { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800; font-size: 0.8rem; } :root[data-style="kickpush-bold"] nav ul li a[aria-current="page"] { background: #0e0e0e; color: #fcfbf7; padding: 0.15rem 0.45rem; } :root[data-style="kickpush-bold"] article, :root[data-style="kickpush-bold"] dialog article { border: 2px solid #0e0e0e; } :root[data-style="kickpush-bold"] button, :root[data-style="kickpush-bold"] [role="button"], :root[data-style="kickpush-bold"] input[type="submit"] { border: 2px solid #0e0e0e; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; }