/* * custom.css — the handful of things Tailwind can't do (mostly @font-face) * PLUS the CSS-variable palette that powers per-site theme accents. * * Loaded AFTER tailwind.output.css so it can override anything. * * See tailwind.config.js — the `brand-*` utility classes read the raw RGB * triplets defined here. Swap themes by changing * (emitted from $CONFIG['theme_accent'] in includes/header.php); no rebuild. */ /* --- Fonts: self-hosted, referenced by --- * Only Inter is shipped by default. Rubik / Manrope are extension points * — drop the matching *Variable.woff2 into assets/fonts/ and uncomment. */ @font-face { font-family: 'Inter'; src: url('/assets/fonts/InterVariable.woff2') format('woff2-variations'), url('/assets/fonts/InterVariable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } /* @font-face { font-family: 'Rubik'; src: url('/assets/fonts/RubikVariable.woff2') format('woff2-variations'), url('/assets/fonts/RubikVariable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; } */ /* @font-face { font-family: 'Manrope'; src: url('/assets/fonts/ManropeVariable.woff2') format('woff2-variations'), url('/assets/fonts/ManropeVariable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; } */ /* Alias — Tailwind's fontFamily.sans reads 'WzBrand', which cascades from * whichever @font-face wins the data-font selector. Kept as a rename indirection * so we can swap the primary font without touching every template. */ :root { --wz-font-primary: 'Inter', ui-sans-serif, system-ui, sans-serif; } html[data-font="rubik"] { --wz-font-primary: 'Rubik', ui-sans-serif, system-ui, sans-serif; } html[data-font="manrope"] { --wz-font-primary: 'Manrope', ui-sans-serif, system-ui, sans-serif; } /* Aliased at body level so per-theme font choice cascades through everything * Tailwind doesn't inline. Tailwind's `.font-sans` targets 'WzBrand', which * we hand off to the alias below. */ @font-face { font-family: 'WzBrand'; src: local('Inter'), local('Rubik'), local('Manrope'), url('/assets/fonts/InterVariable.woff2') format('woff2-variations'); font-weight: 100 900; font-display: swap; } body { font-family: var(--wz-font-primary); } /* ============================================================ Brand palette — CSS variables consumed by tailwind.config.js. Format: raw RGB triplets (no rgb() wrapper), space-separated. Tailwind expands them via `rgb(var(--brand-500) / )`. ============================================================ */ /* Default: CS orange — matches article-website's brand */ :root { --brand-400: 255 150 51; /* #FF9633 */ --brand-500: 255 122 0; /* #FF7A00 */ --brand-600: 229 106 0; /* #E56A00 */ --brand-secondary: 255 122 0; /* Same as brand-500 for default; overridden per theme */ /* Hero atmosphere — dominant top-center glow of the hero section. Flag * SECONDARY colour per theme: orange on default, blue on RU, white on PL. */ --hero-glow-primary: rgb(255 122 0 / 0.18); /* Ambient background blob palette — the 4 blurred colour circles behind * the whole page (see includes/header.php). Raw RGB triplets consumed by * `rgb(var(--blob-X-rgb) / α)` in the blob divs' inline styles. * Default theme = all four orange (matches article-website). Regional * themes remap the "flag-position" slots (leftmost + middle) while * blobs 2 and 4 stay at brand-500 (auto-swaps to red / crimson). */ --blob-1-rgb: 255 122 0; /* leftmost blob (top-left) — flag LEFT band */ --blob-3-rgb: 255 122 0; /* middle blob — flag MIDDLE band */ /* Footer flag stripe — thin horizontal band above the footer content. * Transparent by default (English site has no flag), regional sites * paint their national flag as a linear gradient. */ --wz-flag-stripe: transparent; } /* Russian theme — red primary + blue flag secondary */ html[data-theme="russian"] { --brand-400: 234 74 63; /* #EA4A3F */ --brand-500: 218 41 28; /* #DA291C — Russian flag red (Pantone 485) */ --brand-600: 168 26 16; /* #A81A10 */ --brand-secondary: 0 57 166; /* #0039A6 — Russian flag blue (Pantone 286) */ /* Hero atmosphere = flag blue (secondary). */ --hero-glow-primary: rgb(0 57 166 / 0.30); /* Background blobs: leftmost = WHITE, middle = BLUE. Blobs 2 (right) and * 4 (bottom-left) stay on brand-500 = flag red. Reads as three flag * colours scattered across the page background. */ --blob-1-rgb: 255 255 255; /* white */ --blob-3-rgb: 0 57 166; /* blue */ /* Russian flag: three equal vertical bands (rendered horizontally here as a * top-of-footer stripe): white / blue / red. */ --wz-flag-stripe: linear-gradient(to right, #FFFFFF 0 33.333%, #0039A6 33.333% 66.666%, #DA291C 66.666% 100%); } /* Polish theme — crimson primary + white flag secondary */ html[data-theme="polish"] { --brand-400: 234 66 95; /* #EA425F */ --brand-500: 220 20 60; /* #DC143C — Polish flag crimson */ --brand-600: 165 14 46; /* #A50E2E */ --brand-secondary: 255 255 255; /* Polish flag white */ /* Hero atmosphere = flag white (secondary). */ --hero-glow-primary: rgb(255 255 255 / 0.10); /* Background blobs: leftmost = WHITE. Middle stays crimson (matches * brand-500, same effective colour). Blobs 2 and 4 stay on brand-500. * Reads as white + crimson accents matching the two-tone Polish flag. */ --blob-1-rgb: 255 255 255; /* white */ --blob-3-rgb: 220 20 60; /* crimson (same as brand-500 = no visible change) */ /* Polish flag: two equal bands, white on top / red below (rendered * horizontally as a two-tone stripe here). */ --wz-flag-stripe: linear-gradient(to right, #FFFFFF 0 50%, #DC143C 50% 100%); } /* Flag stripe utility — used as `
` at the * top of the footer. Regional sites paint their flag here; the default site * gets a 3px transparent band that collapses visually. */ .wz-flag-stripe { height: 3px; background: var(--wz-flag-stripe); } /* ============================================================ Overflow safety — long translations (RU compounds, DE nouns) overrun narrow viewports if not broken. Tailwind has utility classes but applying them globally via templates is verbose. ============================================================ */ html, body { overflow-x: hidden; } * { overflow-wrap: break-word; }