/* ========================================================================== PKOUG Community — design tokens: Modern Technical (locked) -------------------------------------------------------------------------- The forum's own token sheet. It replaces the platform's assets/pkoug-tokens.css on forum pages, so forum.pkoug.org no longer takes its colours, type or geometry from pkoug.org — and nothing here can change how pkoug.org looks, because pkoug.org never loads this file. Source of truth: DEVELOPER-HANDOFF.md §1–§3 (Modern Technical). Values are copied, not reinterpreted. Where the handoff is silent for dark mode (--secondary-foreground, --input, --destructive) the value chosen is noted. TWO LAYERS 1. Semantic tokens (--background, --primary, --code-bg …): what new components consume, named exactly as in the handoff. 2. The `--pk-*` bridge: the vocabulary the existing forum sheet and the platform component sheet (pk-btn, pk-card, pk-alert …) were written against, mapped onto layer 1. That is what lets every existing screen wear Modern Technical without its layout being rebuilt. The bridge is temporary scaffolding: it shrinks as later phases move components onto the semantic names, and goes when the platform component sheet does. THEME CONTRACT (owner decision, 2026-09-11) The light palette is on bare :root. Dark values are declared THREE times, identically — a test asserts the three blocks match: - under prefers-color-scheme, for System (and for no-JS visitors); - on [data-theme="dark"], the existing explicit choice (localStorage `pkoug_forum_theme`, applied before first paint); - on .dark, the class the handoff's components expect. The boot script and the theme control keep it in step with the choice and, on System, with the device. No colour is ever defined only inside a media query. ========================================================================== */ /* --------------------------------------------------------------- fonts --- IBM Plex Sans (400, 400 italic, 500, 600, 700) and IBM Plex Mono (400, 500, 600), self-hosted from IBM's official repository (github.com/IBM/plex, packages/plex-*/fonts/split/woff2, the Latin1 subsets), SIL Open Font License 1.1 — see ../fonts/LICENSE.txt. About 160 KB for all eight, and a browser fetches only the faces a page actually uses. `swap` shows the system fallback immediately, so text is never invisible while a face loads; characters outside Latin-1 fall through to the fallback stack. */ @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/IBMPlexSans-Regular-Latin1.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215; } @font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/IBMPlexSans-Italic-Latin1.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215; } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/IBMPlexSans-Medium-Latin1.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215; } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/IBMPlexSans-SemiBold-Latin1.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215; } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/IBMPlexSans-Bold-Latin1.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215; } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/IBMPlexMono-Regular-Latin1.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215; } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/IBMPlexMono-Medium-Latin1.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215; } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/IBMPlexMono-SemiBold-Latin1.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215; } :root { color-scheme: light; /* --------------------------------------------------- 1. semantic colour */ --background: oklch(0.966 0.005 252); --foreground: oklch(0.208 0.014 264); --card: oklch(1 0 0); --elevated: oklch(0.981 0.005 252); --popover: oklch(1 0 0); --primary: oklch(0.585 0.232 27.4); /* PKOUG red ≈ #E81C23 */ --primary-deep: oklch(0.437 0.186 27.4); /* ≈ #A00F14 */ --primary-foreground: oklch(0.99 0 0); --primary-soft: oklch(0.585 0.232 27.4 / 0.10); /* Red used as TEXT. Not a handoff token: --primary measures 4.2:1 on --background, short of AA for body-size text, so red text (links, the current nav item) uses this deeper step. Fills keep --primary. */ --primary-ink: oklch(0.52 0.21 27.4); --primary-ink-hover: oklch(0.437 0.186 27.4); /* A red FILL carrying a label (primary buttons, Ask, counts). Owner decision, 2026-09-11: in dark mode it is PKOUG red with a white label, exactly as pkoug.org's primary CTA — not the handoff's lighter red with dark text. The lighter dark-mode --primary stays for rings, current-item bars and accents, where it has to read against the dark ground. */ --primary-fill: var(--primary); --primary-fill-deep: var(--primary-deep); --secondary: oklch(0.955 0.004 264); --secondary-foreground: oklch(0.3 0.012 265); --muted: oklch(0.951 0.006 252); --muted-foreground: oklch(0.508 0.011 265); --accent: oklch(0.933 0.008 252); /* hover surface */ --border: oklch(0.898 0.007 252); --border-strong: oklch(0.824 0.011 252); --input: oklch(0.902 0.005 264); --ring: oklch(0.585 0.232 27.4); --success: oklch(0.5 0.115 158); --success-soft: oklch(0.5 0.115 158 / 0.12); --warning: oklch(0.6 0.13 70); --warning-soft: oklch(0.6 0.13 70 / 0.14); --info: oklch(0.52 0.11 248); --info-soft: oklch(0.52 0.11 248 / 0.12); --destructive: oklch(0.55 0.2 25); --ace: oklch(0.5 0.12 258); --ace-soft: oklch(0.5 0.12 258 / 0.12); /* Code panels are never dark in light mode (handoff §1, §10). */ --code-bg: oklch(0.947 0.011 254); --code-fg: oklch(0.26 0.022 264); --steel: oklch(0.5 0.06 250); /* Shared with pkoug.org: the PkOUG wordmark colours, the exact values of the portal's --pk-brand-green-ink / --pk-brand-red-ink, so "PkOUG" reads the same on both sites. Brand marks only — never UI state. */ --pkoug-green: #124D26; --pkoug-red: #C4141A; --shadow-ink: oklch(0.208 0.014 264); /* ------------------------------------------------------- 2. typography */ --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --tracking-heading: -0.012em; --tracking-title: -0.022em; --tracking-eyebrow: 0.045em; --measure: 74ch; /* prose; code, logs and tables may exceed it */ --text-code: 0.78rem; --text-code-inline: 0.8125em; /* ----------------------------------- 3. spacing, radius, border, shadow */ /* Spacing unit 4px: 4 / 8 / 12 / 16 / 24 / 32 (the --pk-space scale below). */ --radius: 0.5625rem; /* 9px */ --radius-sm: calc(var(--radius) - 4px); /* 5px */ --radius-md: calc(var(--radius) - 2px); /* 7px */ --radius-lg: var(--radius); /* 9px */ --radius-xl: calc(var(--radius) + 4px); /* 13px */ --radius-tag: 5px; --radius-category: 6px; --radius-pill: 999px; /* Borders over shadows: every surface carries 1px var(--border). */ --shadow-card: 0 1px 1px color-mix(in oklch, var(--shadow-ink) 4%, transparent), 0 2px 6px -2px color-mix(in oklch, var(--shadow-ink) 7%, transparent); --shadow-raised: 0 2px 4px -2px color-mix(in oklch, var(--shadow-ink) 10%, transparent), 0 8px 22px -12px color-mix(in oklch, var(--shadow-ink) 18%, transparent); --shadow-pop: 0 18px 40px -18px color-mix(in oklch, var(--shadow-ink) 30%, transparent); /* The signature motif: a thin vertical red rule. Used sparingly. */ --rule-gradient: linear-gradient(180deg, var(--primary), var(--primary-deep)); /* Page shell. */ --shell: 78rem; --shell-wide: 88rem; --shell-pad: 1rem; --dur-fast: 120ms; --dur: 160ms; /* ============================================================ BRIDGE === The --pk-* vocabulary, mapped onto the tokens above. Values that are var() references resolve on :root, so the dark blocks below only need to redefine the semantic layer. */ --pk-brand-red: var(--primary-fill); --pk-brand-red-hover: var(--primary-fill-deep); --pk-on-brand: var(--primary-foreground); --pk-brand-red-ink: var(--primary-ink); --pk-brand-red-ink-hover: var(--primary-ink-hover); --pk-brand-red-tint: var(--primary-soft); --pk-brand-red-edge: color-mix(in oklch, var(--primary) 32%, var(--border)); --pk-brand-green: var(--success); --pk-brand-green-lift: var(--success); --pk-brand-green-ink: var(--success); --pk-brand-green-tint: var(--success-soft); /* The forum's "technical metadata" navy becomes Modern Technical steel. */ --pk-brand-navy: var(--steel); --pk-brand-navy-lift: var(--steel); --pk-brand-navy-tint: color-mix(in oklch, var(--steel) 12%, transparent); /* A fixed neutral ramp, as on the platform: a few components want an absolute grey that does not flip. */ --pk-n-950: #0B0F14; --pk-n-900: #111827; --pk-n-800: #1F2937; --pk-n-700: #374151; --pk-n-600: #4B5563; --pk-n-500: #666F7C; --pk-n-400: #9CA3AF; --pk-n-300: #D1D5DB; --pk-n-200: #E5E7EB; --pk-n-100: #F3F4F6; --pk-n-50: #F9FAFB; --pk-white: #FFFFFF; --pk-success: var(--success); --pk-success-tint: var(--success-soft); --pk-success-edge: color-mix(in oklch, var(--success) 35%, var(--border)); --pk-warning: var(--warning); --pk-warning-tint: var(--warning-soft); --pk-warning-edge: color-mix(in oklch, var(--warning) 35%, var(--border)); --pk-danger: var(--destructive); --pk-danger-tint: color-mix(in oklch, var(--destructive) 12%, transparent); --pk-danger-edge: color-mix(in oklch, var(--destructive) 35%, var(--border)); --pk-info: var(--info); --pk-info-tint: var(--info-soft); --pk-info-edge: color-mix(in oklch, var(--info) 35%, var(--border)); --pk-bg: var(--background); --pk-surface: var(--card); --pk-surface-sunk: var(--muted); --pk-surface-raised: var(--popover); --pk-overlay: color-mix(in oklch, var(--shadow-ink) 58%, transparent); --pk-ink: var(--foreground); --pk-ink-soft: var(--secondary-foreground); --pk-ink-muted: var(--muted-foreground); --pk-ink-faint: var(--muted-foreground); --pk-ink-invert: var(--card); --pk-border: var(--border); --pk-border-strong: var(--border-strong); --pk-divider: var(--border); --pk-link: var(--primary-ink); --pk-link-hover: var(--primary-ink-hover); --pk-text: var(--pk-ink); --pk-text-muted: var(--pk-ink-muted); --pk-surface-2: var(--pk-surface-sunk); --pk-focus-ring: var(--ring); --pk-focus-halo: color-mix(in oklch, var(--ring) 26%, transparent); --pk-focus-width: 2px; --pk-focus-offset: 2px; --pk-font-sans: var(--font-sans); --pk-font-mono: var(--font-mono); --pk-font-display: var(--font-sans); --pk-text-xs: 0.75rem; --pk-text-sm: 0.875rem; --pk-text-base: 1rem; --pk-text-lg: 1.125rem; --pk-text-xl: clamp(1.25rem, 1.18rem + 0.35vw, 1.5rem); --pk-text-2xl: clamp(1.5rem, 1.36rem + 0.70vw, 1.875rem); --pk-text-3xl: clamp(1.875rem, 1.66rem + 1.07vw, 2.5rem); --pk-text-4xl: clamp(2.25rem, 1.87rem + 1.90vw, 3.25rem); --pk-text-5xl: clamp(2.75rem, 2.10rem + 3.20vw, 4rem); --pk-weight-normal: 400; --pk-weight-regular: 400; --pk-weight-medium: 500; --pk-weight-semibold: 600; --pk-weight-bold: 700; --pk-weight-heavy: 700; /* Plex ships no 800; the handoff stops at 700 */ --pk-leading-tight: 1.15; --pk-leading-snug: 1.28; --pk-leading-normal: 1.6; --pk-leading-relaxed: 1.75; --pk-tracking-tight: var(--tracking-title); --pk-tracking-normal: 0; --pk-tracking-wide: var(--tracking-eyebrow); --pk-measure: var(--measure); --pk-space-1: 0.25rem; --pk-space-2: 0.5rem; --pk-space-3: 0.75rem; --pk-space-4: 1rem; --pk-space-5: 1.25rem; --pk-space-6: 1.5rem; --pk-space-7: 1.75rem; --pk-space-8: 2rem; --pk-space-10: 2.5rem; --pk-space-12: 3rem; --pk-space-16: 4rem; --pk-space-20: 5rem; --pk-space-24: 6rem; --pk-section-y: clamp(3rem, 2rem + 5vw, 6rem); --pk-container: var(--shell); --pk-container-pad: var(--shell-pad); --pk-radius-sm: var(--radius-sm); --pk-radius-md: var(--radius-md); --pk-radius-lg: var(--radius-lg); --pk-radius-xl: var(--radius-xl); --pk-radius-full: var(--radius-pill); --pk-shadow-xs: var(--shadow-card); --pk-shadow-sm: var(--shadow-card); --pk-shadow-md: var(--shadow-raised); --pk-shadow-lg: var(--shadow-pop); --pk-ease: cubic-bezier(0.4, 0, 0.2, 1); --pk-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --pk-dur-fast: var(--dur-fast); --pk-dur: var(--dur); --pk-dur-slow: var(--dur); --pk-z-base: 0; --pk-z-dropdown: 100; --pk-z-sticky: 200; --pk-z-header: 300; --pk-z-overlay: 400; --pk-z-modal: 500; --pk-z-toast: 600; } @media (min-width: 48rem) { :root { --shell-pad: 1.5rem; } } /* ========================================================================== DARK — the same declarations three times (see THEME CONTRACT above). Edit all three together; tools/test_forum_http.php asserts they match. ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --background: oklch(0.172 0.011 262); --foreground: oklch(0.952 0.005 250); --card: oklch(0.223 0.012 262); --elevated: oklch(0.259 0.013 262); --popover: oklch(0.248 0.01 266); --primary: oklch(0.665 0.192 27.4); --primary-deep: oklch(0.52 0.19 27.4); --primary-foreground: oklch(0.99 0 0); --primary-fill: oklch(0.585 0.232 27.4); --primary-fill-deep: oklch(0.437 0.186 27.4); --primary-soft: oklch(0.665 0.192 27.4 / 0.16); --primary-ink: oklch(0.72 0.17 27.4); --primary-ink-hover: oklch(0.8 0.13 27.4); --secondary: oklch(0.288 0.01 266); --secondary-foreground: oklch(0.86 0.007 250); --muted: oklch(0.256 0.013 262); --muted-foreground: oklch(0.712 0.009 264); --accent: oklch(0.298 0.014 262); --border: oklch(1 0 0 / 0.10); --border-strong: oklch(1 0 0 / 0.19); --input: oklch(1 0 0 / 0.15); --ring: oklch(0.665 0.192 27.4); --success: oklch(0.72 0.12 158); --success-soft: oklch(0.72 0.12 158 / 0.16); --warning: oklch(0.79 0.13 72); --warning-soft: oklch(0.79 0.13 72 / 0.16); --info: oklch(0.72 0.1 248); --info-soft: oklch(0.72 0.1 248 / 0.16); --destructive: oklch(0.7 0.19 25); --ace: oklch(0.74 0.09 258); --ace-soft: oklch(0.74 0.09 258 / 0.16); --code-bg: oklch(0.196 0.014 262); --code-fg: oklch(0.912 0.01 250); --steel: oklch(0.76 0.062 250); --pkoug-green: #4FBF77; --pkoug-red: #FF6E73; --shadow-ink: oklch(0 0 0); } } :root[data-theme="dark"] { color-scheme: dark; --background: oklch(0.172 0.011 262); --foreground: oklch(0.952 0.005 250); --card: oklch(0.223 0.012 262); --elevated: oklch(0.259 0.013 262); --popover: oklch(0.248 0.01 266); --primary: oklch(0.665 0.192 27.4); --primary-deep: oklch(0.52 0.19 27.4); --primary-foreground: oklch(0.99 0 0); --primary-fill: oklch(0.585 0.232 27.4); --primary-fill-deep: oklch(0.437 0.186 27.4); --primary-soft: oklch(0.665 0.192 27.4 / 0.16); --primary-ink: oklch(0.72 0.17 27.4); --primary-ink-hover: oklch(0.8 0.13 27.4); --secondary: oklch(0.288 0.01 266); --secondary-foreground: oklch(0.86 0.007 250); --muted: oklch(0.256 0.013 262); --muted-foreground: oklch(0.712 0.009 264); --accent: oklch(0.298 0.014 262); --border: oklch(1 0 0 / 0.10); --border-strong: oklch(1 0 0 / 0.19); --input: oklch(1 0 0 / 0.15); --ring: oklch(0.665 0.192 27.4); --success: oklch(0.72 0.12 158); --success-soft: oklch(0.72 0.12 158 / 0.16); --warning: oklch(0.79 0.13 72); --warning-soft: oklch(0.79 0.13 72 / 0.16); --info: oklch(0.72 0.1 248); --info-soft: oklch(0.72 0.1 248 / 0.16); --destructive: oklch(0.7 0.19 25); --ace: oklch(0.74 0.09 258); --ace-soft: oklch(0.74 0.09 258 / 0.16); --code-bg: oklch(0.196 0.014 262); --code-fg: oklch(0.912 0.01 250); --steel: oklch(0.76 0.062 250); --pkoug-green: #4FBF77; --pkoug-red: #FF6E73; --shadow-ink: oklch(0 0 0); } :root.dark { color-scheme: dark; --background: oklch(0.172 0.011 262); --foreground: oklch(0.952 0.005 250); --card: oklch(0.223 0.012 262); --elevated: oklch(0.259 0.013 262); --popover: oklch(0.248 0.01 266); --primary: oklch(0.665 0.192 27.4); --primary-deep: oklch(0.52 0.19 27.4); --primary-foreground: oklch(0.99 0 0); --primary-fill: oklch(0.585 0.232 27.4); --primary-fill-deep: oklch(0.437 0.186 27.4); --primary-soft: oklch(0.665 0.192 27.4 / 0.16); --primary-ink: oklch(0.72 0.17 27.4); --primary-ink-hover: oklch(0.8 0.13 27.4); --secondary: oklch(0.288 0.01 266); --secondary-foreground: oklch(0.86 0.007 250); --muted: oklch(0.256 0.013 262); --muted-foreground: oklch(0.712 0.009 264); --accent: oklch(0.298 0.014 262); --border: oklch(1 0 0 / 0.10); --border-strong: oklch(1 0 0 / 0.19); --input: oklch(1 0 0 / 0.15); --ring: oklch(0.665 0.192 27.4); --success: oklch(0.72 0.12 158); --success-soft: oklch(0.72 0.12 158 / 0.16); --warning: oklch(0.79 0.13 72); --warning-soft: oklch(0.79 0.13 72 / 0.16); --info: oklch(0.72 0.1 248); --info-soft: oklch(0.72 0.1 248 / 0.16); --destructive: oklch(0.7 0.19 25); --ace: oklch(0.74 0.09 258); --ace-soft: oklch(0.74 0.09 258 / 0.16); --code-bg: oklch(0.196 0.014 262); --code-fg: oklch(0.912 0.01 250); --steel: oklch(0.76 0.062 250); --pkoug-green: #4FBF77; --pkoug-red: #FF6E73; --shadow-ink: oklch(0 0 0); } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur: 1ms; } } /* ========================================================================== FOUNDATION — element-level rules only (no components). Scoped to the forum body so nothing here can reach a platform page even if this file were ever loaded there by mistake. ========================================================================== */ .fx-body, .fx-body *, .fx-body ::before, .fx-body ::after { border-color: var(--border); } .fx-body { font-family: var(--font-sans); font-feature-settings: "cv05", "ss01"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: var(--foreground); /* The one decoration: a single, very faint red tint at the top. */ background: radial-gradient(ellipse 120% 36rem at 50% -12rem, color-mix(in oklch, var(--primary) 4%, transparent), transparent 72%) no-repeat, var(--background); } .fx-body :is(h1, h2, h3, h4, h5, h6) { letter-spacing: var(--tracking-heading); text-wrap: balance; } .fx-body :is(code, kbd, samp, pre) { font-family: var(--font-mono); } .fx-body pre { font-size: var(--text-code); line-height: 1.55; } .fx-body :not(pre) > code { font-size: var(--text-code-inline); } .fx-body :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } .fx-body ::selection { background: color-mix(in oklch, var(--primary) 22%, transparent); }