/** * tokens.css - LandboUngdom design tokens * * Handle: egovt-child-tokens. First of the three child-theme sheets: * * tokens.css <- we are here. Names, no rules. * design-system.css reusable lu-* components (geometry + type) * restyle.css site-specific overrides (nav, footer, safety nets) * * THE ONE IDEA IN THIS FILE * * Colour is not defined here. It is *aliased* here. * * The Elementor Kit (post 4, "Site Settings") already holds the whole palette * and the h1-h4 type scale, and Elementor publishes every entry as a CSS custom * property. Verified in the rendered : * * .elementor-kit-4{--e-global-color-primary:#125442; * --e-global-color-a53ee87:#E8B5DB; ... } * * So every --lu-* colour below is `var(--e-global-color-X, #hex)`. The hex is a * fallback for the case where Elementor is disabled or the Kit is re-keyed on * import (HANDOFF section 2 flags that as a real risk) - it is NOT the value. * * Consequence, and the whole point: the client changes a colour in * Site Settings -> Global Colors and every component follows. Nothing in this * theme has to be edited, and nothing here can drift from what the client sees. * * WHY THESE ARE ON `body` AND NOT `:root` * * Elementor declares --e-global-* on `.elementor-kit-4`, and that class is on * , not : * * * * Custom properties resolve against the element they are declared on. A * `:root { --lu-primary: var(--e-global-color-primary) }` would resolve against * , where --e-global-color-primary does not exist, and silently fall back * to the hex forever - the Kit would appear to be wired up and would not be. * Declaring on `body` puts both on the same element. Do not "tidy" this to * :root. * * NAMING * * --lu- cannot collide with --e-global-* or --wp--preset--*. Names are by role, * not by hue, and each carries the Kit entry it aliases so the two stay legible * against each other. The Kit titles are Danish; they are quoted verbatim. */ /* ========================================================================== 1. Colour - aliases of the Elementor Kit ========================================================================== */ body { /* Brand ---------------------------------------------------------------- */ --lu-primary: var(--e-global-color-primary, #125442); /* Kit system `primary` + `text`; customs 386d5a2, 8f447a8, 9b3bae4 */ --lu-secondary: var(--e-global-color-secondary, #BABC0E); /* Kit system `secondary` */ --lu-accent: var(--e-global-color-accent, #D94F08); /* Kit system `accent`; customs a653d0c, 7a4ba5c */ --lu-white: var(--e-global-color-40f4f99, #FFFFFF); /* Kit custom 40f4f99 "Hvid" */ /* Surfaces ------------------------------------------------------------- */ --lu-page-bg: var(--e-global-color-1fa1664, #FDF5EA); /* Kit custom 1fa1664 "Sidebaggrund" */ --lu-header-surface: var(--e-global-color-e7995fd, #FEFAF4); /* Kit custom e7995fd "Header flade" */ --lu-banner-surface: var(--e-global-color-4ec2446, #E3F2F5); /* Kit custom 4ec2446 "Banner flade"; ccb621b is a duplicate */ --lu-surface-green: var(--e-global-color-5b04f39, #ECF3DA); /* Kit custom 5b04f39 "Lysegroen fade" */ --lu-surface-blue: var(--e-global-color-ac5852a, #A1C2E5); /* Kit custom ac5852a "Lyseblaa" */ --lu-surface-sand: var(--e-global-color-5d6de1d, #EFE4C0); /* Kit custom 5d6de1d "Sand" */ /* Accents -------------------------------------------------------------- */ --lu-stat-blue: var(--e-global-color-b1a3d42, #4091D9); /* Kit custom b1a3d42 "Blaa" */ --lu-rule-pink: var(--e-global-color-a53ee87, #E8B5DB); /* Kit custom a53ee87 "Pink bjaelke" */ --lu-deep-red: var(--e-global-color-f711d1f, #5E1C1F); /* Kit custom f711d1f "Moerkeroed" */ /* ========================================================================== 2. Type - family aliased, scale named ========================================================================== */ /** * Families come from the Kit's typography globals, same reasoning as above. * The Kit sets `primary` = GT Era Display 500 and `text` = GT Era Text 400. * * The fallback stacks are not decoration: GT Era is a commercial Grilli Type * face served from assets/fonts/, and HANDOFF section 1a records that the * production install is a separate manual step. If it is missing, these are * what the site renders in. */ --lu-font-display: var(--e-global-typography-primary-font-family, "GT Era Display"), Georgia, "Times New Roman", serif; --lu-font-body: var(--e-global-typography-text-font-family, "GT Era Text"), "Helvetica Neue", Arial, sans-serif; /** * The scale, from the Figma variables (file jRKX6HSuFI3ocoJyyUGWZb). * * The Kit ALREADY applies h1-h4 and body to real elements, so these tokens * are not for headings. They exist for the one case the Kit cannot reach: * type *inside a third-party widget's markup*, where a heading is the wrong * element or the widget hardcodes its own size. `ova_blog` renders its card * title as an

, for instance - semantically fine, but the Kit then gives * it 48px where the design wants 24px. * * Figma line-heights are unitless-per-px values; kept as px so they cannot * be re-scaled by an inherited font-size further down some widget's tree. / --lu-type-h1-size: 81px; --lu-type-h1-lh: 81px; --lu-type-h1-ls: -0.005em; --lu-type-h2-size: 48px; --lu-type-h2-lh: 60.75px; --lu-type-h2-ls: -0.005em; --lu-type-h3-size: 36px; --lu-type-h3-lh: 40.5px; --lu-type-h3-ls: 0; --lu-type-h4-size: 24px; --lu-type-h4-lh: 27px; --lu-type-h4-ls: 0; --lu-type-body-size: 16px; --lu-type-body-lh: 20px; / "Broedtekst", 400 / --lu-type-menu-size: 18px; --lu-type-menu-lh: 20px; / "Menu", GT Era Text 700 / / ========================================================================== 3. Geometry - the part Elementor has no token layer for ========================================================================== */ /** * Elementor's Kit covers colour and type and nothing else. Radius, gutters, * aspect ratios and vertical rhythm have to live somewhere, and per-element * Elementor settings are the wrong place for them - they would be retyped by * hand on every widget and drift immediately. This is that somewhere. * * All of it is measured off the Figma frames, not guessed: * desktop 1:33 (1440 wide), mobile 1:130 (402 wide). / / Layout --------------------------------------------------------------- / --lu-container: 1320px; / 1440 - 2x60 gutter. The Elementor Kit's Content Width must match; see HANDOFF section 2. / --lu-gutter: 60px; / first content x-origin on the desktop frame. Descriptive: what the gutter measures at 1440. Not used for layout - --lu-pad is. */ /** * --lu-pad is the MINIMUM side padding, and the thing layout actually uses. * * A container capped at --lu-container and centred gives a 60px gutter at * 1440 for free, and nothing at all at 1320 - text runs into the viewport * edge, which is what happened at every width between roughly 1024 and 1340. * Padding fixes that, but then the two have to be reconciled so the gutter * is still exactly 60 at the design width: * * max-width: calc(var(--lu-container) + 2 * var(--lu-pad)) = 1368 * padding-inline: var(--lu-pad) = 24 * * At 1440: (1440 - 1368) / 2 + 24 = 36 + 24 = 60. Exactly the frame. * At 1100: the cap is inactive, so the gutter is a flat 24. * At 402: 20, and the content box is 362 - the Figma mobile width. / --lu-pad: 24px; --lu-col-gap: 20px; / card origins 60 / 506 / 953, each 427 wide / / Header --------------------------------------------------------------- / / Two heights, from the frame: the utility strip is shallower than the nav * bar it sits above (nodes 1:391 and 1:361). */ --lu-header-bar-h: 52px; --lu-utility-bar-h: 41px; /** * The two together, which is what sits above the first section on the page. * Derived rather than typed: 93px is not a number anyone should be able to * get wrong by editing one of the bars and not the other. */ --lu-chrome-h: calc(var(--lu-header-bar-h) + var(--lu-utility-bar-h)); /** * THE PINNED NAV'S GLASS. * * The bar and the page are near enough the same colour (header flade against * Sidebaggrund), so a bar pinned over content has nothing to say where it * ends. A shadow was the first answer and it was the wrong one: a shadow can * only show on what is directly under the bar, which on this site is a * photograph as often as it is the page ground, and on a photograph a wash * that subtle is invisible. Glass says it everywhere - what passes under the * bar goes soft, whatever colour it is. * * 90%, so the bar is the same colour it has always been when there is nothing * behind it and only shows its hand once the page is moving under it. The * blur is what does the work; the 10% is what makes the blur visible at all. * * Mixed from --lu-page-bg, the Kit global the masthead is bound to, so a * palette change still flows through. See restyle.css section 3 for the one * consequence: the bar's ground is now set here rather than in Elementor. */ --lu-nav-glass: color-mix(in srgb, var(--lu-page-bg) 90%, transparent); --lu-nav-glass-filter: blur(12px); /** * THE PINNED BAR'S SHADOW, which the glass works with rather than against: * the glass says the bar is in front of the page, the shadow says how far. * It is drawn only while the bar is pinned - see restyle.css section 3. * * BLACK, NOT THE PALETTE - one of the two places in the theme where that is * right; the other is --lu-media-scrim, for the same reason. Everything else * that washes over the page is mixed from --lu-primary - see --lu-media-tint * below - because a tint on a photograph should belong to the brand. A shadow * is not a tint: it is the absence of light, it is neutral, and at these * strengths a green-tinted one read as a dirty smudge on the cream rather than * as depth. Called on the rendered page rather than in the abstract, after * looking at both. * * Three stops, not two: a tight contact edge and a long ambient tail. A * single stop reads as a drawn line, and a two-stop version of this fell * away so fast that it was there on a screenshot and not there to the eye. * * CALIBRATED, not guessed. Measured against the page's own ground (#FDF5EA) * with the bar pinned over it, as the drop in the red channel row by row: * * 11% / 4% green, 14px 25 -> 7 too faint to read as anything * 16% / 6% / 2% green, 18px 38 -> 12 visible, but green and heavy * 22% / 9% / 3% green, 20px 52 -> 19 reads as a band, not a shadow * 8% / 3% / 1% black, 9px 20 -> 4 this * * The last row is half the strength and half the reach of the one above it, * which is the whole of the brief it was changed to meet. * * Re-measure the same way if the page ground ever changes: the number that * matters is the contact edge against the ground BEHIND it, not the * percentage. `black` is the CSS keyword, not a hex - no Kit colour is being * bypassed here, because the Kit has no black to bypass. */ --lu-nav-shadow-h: 9px; --lu-nav-shadow: linear-gradient( to bottom, color-mix(in srgb, black 8%, transparent), color-mix(in srgb, black 3%, transparent) 30%, color-mix(in srgb, black 1%, transparent) 60%, transparent ); /** * The search mark, drawn rather than set in an icon font. * * The widget renders `` from ElegantIcons, and a font * glyph has no stroke weight to adjust. Carrying it as a mask keeps the * colour on `currentColor`, so the widget's own "Icon Color" control still * works, and puts the stroke width where it can be edited - here. */ --lu-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='6.5'/%3E%3Cpath d='M14.9 14.9 20.5 20.5'/%3E%3C/svg%3E"); /** * The submenu chevron, drawn for a second reason on top of the stroke-weight * one above: THE ICON FONT IS NOT RELIABLE TO PAINT WITH. * * ElegantIcons addresses its glyphs through printable ASCII - * `.arrow_carrot-down:before { content: "\33" }` is the literal digit 3 * (egovt/assets/libs/elegant_font/ele_style.css:95). Any moment the browser * renders that character in a fallback face, the nav reads "Aktiviteter 3". * * Which is exactly what FlyingPress arranges. Its `fonts_display_swap` * option rewrites EVERY @font-face on the page - stripping any font-display * already declared and forcing `swap` * (flying-press/src/Optimizer/Font.php:126-136, no exclusion list). `swap` * means a zero block period: the fallback paints immediately and is replaced * only when the font arrives. Text fonts want that. An icon font must have * `block`, and cannot keep it while that option is on. * * Browsers differ in how long that window is, which is why this was reported * as a Chrome-only bug - it is not, it is a race, and Chrome loses it most * often. Drawing the mark removes the race rather than shortening it. * Same 24-box and stroke-width as the search mark, so the two read as a pair. * HANDOFF section 9 carries the site-wide fix for the glyphs still in a font. */ --lu-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9.5 12 16.5 19 9.5'/%3E%3C/svg%3E"); /** * The mobile drawer's three marks, and the same argument again: the plugin * renders `