/** * Design tokens — CSS custom properties. * * These defaults keep the page correct before/without JS and mirror the * "default" appearance profile shipped by the reciklart_settings module. At * runtime reciklart_preprocess_html() re-emits the same variables at :root * from the active profile, so editors retheme without touching CSS. * * Token names here MUST match Appearance::toTokens() keys in the module. * * The brand display font is loaded from Typekit (the festival's identity * font). @import must stay first in the file. If GDPR/perf demands it later, * self-host and drop this line. */ @import url("https://use.typekit.net/kfz2cjz.css"); /* * These defaults live in a cascade LAYER on purpose. reciklart_preprocess_html() * emits the active profile's tokens as an *unlayered* inline :root block in * ; unlayered styles always win over layered ones, so the profile values * override these regardless of stylesheet load order. Without the layer this * file (loaded after the inline block) would clobber the profile — colors/fonts * would silently revert to these defaults. */ @layer reciklart-defaults { :root { /* Colors */ --color-bg: #000000; --color-fg: #ffffff; --color-accent: #d41b00; --header-bg: transparent; --header-fg: #ffffff; --footer-bg: #000000; --footer-fg: #ffffff; /* Background behind the centered content panel, per content type. Translucent so the animated background shows through (matches the old site). */ --text-bg-landing: rgba(0, 0, 0, 0.8); --text-bg-page: rgba(0, 0, 0, 0.8); --text-bg-program: rgba(0, 0, 0, 0.8); --text-bg-event: rgba(0, 0, 0, 0.8); /* Typography — hero title (landing tagline/dates) */ --hero-title-font: "ff-prater-block-fill-web-pro", sans-serif; --hero-title-size: 8vw; --hero-title-weight: bold; --hero-title-color: #ffffff; /* Typography — page titles (interior H1s) */ --page-title-font: "ff-prater-block-fill-web-pro", sans-serif; --page-title-size: 3rem; --page-title-weight: normal; --page-title-color: #ffffff; /* Typography — content body */ --content-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --content-size: 1.5rem; --content-weight: normal; --content-color: #ffffff; /* Typography — hamburger menu */ --menu-font: "ff-prater-block-fill-web-pro", sans-serif; --menu-size: 1.25rem; --menu-weight: normal; --menu-color: #000000; --menu-bg: #ffffff; /* Animation */ --hero-duration: 6000ms; --hero-logo-size: 100%; --bg-duration: 30s; } }