/* ============================================================================ SPECTRA, STYLE PRESETS ---------------------------------------------------------------------------- A second token axis, orthogonal to color THEMES. • THEME (data-theme) → color only • STYLE (data-style) → typography, scale, density & shape only (no color) Any style composes with any theme. Selected globally on the page body: Per widget (overrides page-level):

…

Resolution: inline → .w[data-style] → body[data-style] → :root defaults. A style is much more than a font: it reshapes the type scale, corner radius, edge weight, padding/density, list grouping, pill shape and the title marker, but never color, and never tries to introduce a divider line unless that rule is core to the style's identity (Mono console, Display masthead, Condensed timetable, De Stijl Mondrian). ============================================================================ */ /* ---------------------------------------------------------------------------- @font-face declarations for vendored style fonts. Pulled from the `fonts_core` plugin (the same vendored woff2s already used by the per-page / per-cell font picker). Declaring them here means widgets pick up the style font even when fonts_core's per-family @font-face emission only includes the page's chosen font. All nine style families are vendored locally, no Google Fonts round-trip at render time. Five came from the original fonts_core set (Space Grotesk, IBM Plex Sans, JetBrains Mono, Archivo, Space Mono); Bodoni Moda, Archivo Narrow, and Jost were added under plugins/fonts_core/static/ in v0.19.3 to complete the Elegant / Condensed / Bauhaus style personalities. ---------------------------------------------------------------------------- */ @font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("../../plugins/fonts_core/static/space-grotesk/400.woff2") format("woff2"); } @font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("../../plugins/fonts_core/static/space-grotesk/700.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../../plugins/fonts_core/static/ibm_plex_sans/400.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../../plugins/fonts_core/static/ibm_plex_sans/700.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../../plugins/fonts_core/static/jetbrains-mono/400.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("../../plugins/fonts_core/static/jetbrains-mono/700.woff2") format("woff2"); } @font-face { font-family: "Archivo"; font-style: normal; font-weight: 400; font-display: swap; src: url("../../plugins/fonts_core/static/archivo/400.woff2") format("woff2"); } @font-face { font-family: "Archivo"; font-style: normal; font-weight: 700; font-display: swap; src: url("../../plugins/fonts_core/static/archivo/700.woff2") format("woff2"); } @font-face { font-family: "Archivo"; font-style: normal; font-weight: 800; font-display: swap; src: url("../../plugins/fonts_core/static/archivo/800.woff2") format("woff2"); } @font-face { font-family: "Space Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../../plugins/fonts_core/static/space-mono/400.woff2") format("woff2"); } @font-face { font-family: "Space Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("../../plugins/fonts_core/static/space-mono/700.woff2") format("woff2"); } @font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 400; font-display: swap; src: url("../../plugins/fonts_core/static/bodoni-moda/400.woff2") format("woff2"); } @font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 700; font-display: swap; src: url("../../plugins/fonts_core/static/bodoni-moda/700.woff2") format("woff2"); } @font-face { font-family: "Archivo Narrow"; font-style: normal; font-weight: 400; font-display: swap; src: url("../../plugins/fonts_core/static/archivo-narrow/400.woff2") format("woff2"); } @font-face { font-family: "Archivo Narrow"; font-style: normal; font-weight: 700; font-display: swap; src: url("../../plugins/fonts_core/static/archivo-narrow/700.woff2") format("woff2"); } @font-face { font-family: "Jost"; font-style: normal; font-weight: 400; font-display: swap; src: url("../../plugins/fonts_core/static/jost/400.woff2") format("woff2"); } @font-face { font-family: "Jost"; font-style: normal; font-weight: 700; font-display: swap; src: url("../../plugins/fonts_core/static/jost/700.woff2") format("woff2"); } /* ---------------------------------------------------------------------------- STANDARD (default), Helvetica, sharp, even density. The neutral baseline; tracked uppercase labels, solid zebra rows. ---------------------------------------------------------------------------- */ [data-style="standard"], .w[data-style="standard"]{ --font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; --label-transform: uppercase; --ls-label: 0.08em; --ls-tight: -0.01em; --radius-0: 0px; --edge-weight: 2px; --zebra-bg: var(--surface-sunken); --title-marker: none; --pill-radius: 0px; } /* ---------------------------------------------------------------------------- DISPLAY, Space Grotesk, BIG & heavy, poster energy. Outsized headline scale, tight tracking, thick edge, accent rule under the title (the "masthead" / poster cue). Lists drop zebra grouping so the loud headline rule reads as the focal point and rows breathe via whitespace; otherwise the alternating tint plus the accent rule above fight each other and the widget reads as chaotic. ---------------------------------------------------------------------------- */ [data-style="display"], .w[data-style="display"]{ --font-family: "Space Grotesk", "Helvetica Neue", sans-serif; --label-transform: uppercase; --ls-label: 0.14em; --ls-tight: -0.035em; --radius-0: 0px; --edge-weight: 3px; --fs-display: 3.9em; --fs-jumbo: 3em; --fs-value: 2.1em; --lh-tight: 0.96; --pad: clamp(0.8em, 8cqmin, 1.25em); --title-marker: none; --title-rule-w: 3px; --title-rule-c: var(--accent-1); --title-rule-pad: var(--space-2); --pill-radius: 0px; --zebra-bg: transparent; --list-pad-y: 0.5em; --list-gap: var(--space-2); } /* ---------------------------------------------------------------------------- EDITORIAL, IBM Plex Sans, airy & rounded, calm. Sentence-case labels, soft corners, generous whitespace, NO zebra fill (groups by space alone), stadium pills, looser line height. ---------------------------------------------------------------------------- */ [data-style="editorial"], .w[data-style="editorial"]{ --font-family: "IBM Plex Sans", "Helvetica Neue", sans-serif; --label-transform: none; --ls-label: 0.005em; --ls-tight: -0.01em; --radius-0: 8px; --edge-weight: 2px; --fs-display: 2.7em; --fs-label: 0.82em; --lh-body: 1.5; --pad: clamp(1.2em, 12cqmin, 2.2em); --list-pad-y: 0.55em; --list-gap: var(--space-2); --zebra-bg: transparent; --pill-radius: 999px; --title-marker: none; } /* ---------------------------------------------------------------------------- MONO, JetBrains Mono, dense technical console. Thick edge, tight leading, compact padding, accent title tick, title + row dividers (terminal table feel). ---------------------------------------------------------------------------- */ [data-style="mono"], .w[data-style="mono"]{ --font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace; --label-transform: uppercase; --ls-label: 0.03em; --ls-tight: 0em; --radius-0: 0px; --edge-weight: 3px; --fs-display: 2.8em; --lh-body: 1.25; --lh-tight: 1.0; --pad: clamp(0.8em, 8cqmin, 1.2em); --list-pad-y: 0.5em; --list-gap: 0px; --zebra-bg: transparent; --row-rule-w: 2px; --title-marker: block; --title-rule-w: 2px; --title-rule-pad: var(--space-2); --pill-radius: 0px; } /* ---------------------------------------------------------------------------- ELEGANT, Bodoni Moda, high-contrast fashion serif, masthead. Wide tracked serif caps, a thin rule under the title, generous whitespace. NOTE: serif hairlines read best on larger widgets, fine on full panels, can dither on the smallest tiles. ---------------------------------------------------------------------------- */ [data-style="elegant"], .w[data-style="elegant"]{ --font-family: "Bodoni Moda", "Playfair Display", Georgia, serif; --label-transform: uppercase; --ls-label: 0.2em; --ls-tight: -0.005em; --radius-0: 0px; --edge-weight: 2px; --fs-display: 3.5em; --fs-jumbo: 2.7em; --fs-label: 0.74em; --lh-body: 1.4; --lh-tight: 1.0; --pad: clamp(1.1em, 11cqmin, 2em); --zebra-bg: transparent; --list-pad-y: 0.5em; --list-gap: var(--space-2); --title-rule-w: 2px; --title-rule-c: var(--edge); --title-rule-pad: var(--space-2); --title-marker: none; --pill-radius: 0px; } /* ---------------------------------------------------------------------------- CONDENSED, Archivo Narrow, dense board, tall & loud. Narrow letterforms let type run large; tight padding & gaps pack content; row rules give it the timetable-board feel. ---------------------------------------------------------------------------- */ [data-style="condensed"], .w[data-style="condensed"]{ --font-family: "Archivo Narrow", "Archivo", "Helvetica Neue", sans-serif; --label-transform: uppercase; --ls-label: 0.1em; --ls-tight: -0.01em; --radius-0: 0px; --edge-weight: 2px; --fs-display: 3.8em; --fs-jumbo: 3em; --fs-value: 2.1em; --lh-tight: 0.98; --pad: clamp(0.7em, 7cqmin, 1.1em); --list-pad-y: 0.34em; --list-gap: 0px; --zebra-bg: transparent; --row-rule-w: 2px; --title-marker: none; --pill-radius: 0px; } /* ============================================================================ MOVEMENT STYLES, type/shape only. Each is meant to be paired with its matching THEME (data-theme="bauhaus|destijl|brutalist") which supplies the palette. Style alone = the forms; theme supplies colour. Either half mixes with any other theme/style. ============================================================================ */ /* ---- BAUHAUS, geometric, circle marker (pair with the bauhaus theme) ---- Jost is the canonical font; Century Gothic and Inter remain in the chain as graceful fallbacks for older browsers or stripped builds. */ [data-style="bauhaus"], .w[data-style="bauhaus"]{ --font-family: "Jost", "Century Gothic", "Inter", "Helvetica Neue", sans-serif; --label-transform: uppercase; --ls-label: 0.18em; --ls-tight: -0.02em; --radius-0: 0px; --edge-weight: 4px; --fs-display: 3.7em; --fs-jumbo: 2.9em; --pad: clamp(1em, 10cqmin, 1.7em); --pill-radius: 999px; --title-marker: block; --marker-w: 0.85em; --marker-h: 0.85em; --marker-radius: 999px; --marker-color: var(--accent-1); --zebra-bg: var(--surface-sunken); } /* ---- DE STIJL, thick frame + grid rules (pair with the destijl theme) ---- */ [data-style="destijl"], .w[data-style="destijl"]{ --font-family: "Archivo", "Helvetica Neue", sans-serif; --label-transform: uppercase; --ls-label: 0.12em; --ls-tight: -0.03em; --radius-0: 0px; --edge-weight: 6px; --fs-display: 3.8em; --fs-jumbo: 3em; --pad: clamp(0.9em, 9cqmin, 1.5em); --title-marker: none; --title-rule-w: 5px; --title-rule-c: var(--edge); --title-rule-pad: var(--space-2); --row-rule-w: 4px; --zebra-bg: transparent; --list-gap: 0px; --pill-radius: 0px; } /* ---- BRUTALIST, monospace, exposed rules (pair with the brutalist theme) - */ [data-style="brutalist"], .w[data-style="brutalist"]{ --font-family: "Space Mono", "JetBrains Mono", ui-monospace, monospace; --label-transform: uppercase; --ls-label: 0.06em; --ls-tight: 0em; --radius-0: 0px; --edge-weight: 4px; --fs-display: 2.9em; --lh-body: 1.3; --lh-tight: 1.0; --pad: clamp(0.8em, 8cqmin, 1.3em); --title-marker: none; --title-rule-w: 3px; --title-rule-pad: var(--space-2); --row-rule-w: 3px; --zebra-bg: transparent; --list-gap: 0px; --pill-radius: 0px; }