/* * Bring the Elementor page content onto the design token system. * Typography and colour only. Nothing here touches spacing, layout, section * padding or card structure. * * --------------------------------------------------------------------------- * TWO LEVERS, IN ORDER OF LEVERAGE * --------------------------------------------------------------------------- * * LEVER 1, below: rebind the Elementor Global Kit's custom properties. * * 82% of the font-size declarations and 57% of the colour declarations in * Elementor's generated page CSS are not literals at all. They are * var(--e-global-typography-*) and var(--e-global-color-*) references, looked * up on the element being styled and inherited from , where the Kit * defines them on .elementor-kit-5 at specificity (0,1,0). * * Custom properties inherit. So redefining those variables on at any * specificity above (0,1,0) silently retargets every consumer on every page * at once, without overriding a single one of the rules that consume them. * No specificity fight. No !important. No source-order dependency, which * matters because the theme's stylesheets print BEFORE Elementor's and would * lose every equal-specificity tie. * * The selector below is (0,3,1), which clears the Kit's (0,1,0) with room to * spare, and clears the Kit's own responsive redefinitions too: a @media block * adds no specificity, so the Kit's max-width:1024px and max-width:767px * overrides of these same variables lose to this rule as well. That is * deliberate. The tokens are fluid clamps and want to own every breakpoint, * not hand back control below 1024px. * * LEVER 2, in the generated block at the foot of this file: the literals that no * variable rebind can reach, snapped to tokens at (0,7,1) and above. * See bin/gen-elementor-tokens.js, which explains the mapping and the guards. * * --------------------------------------------------------------------------- * WHY IT IS DONE FROM THE THEME AND NOT IN THE KIT * --------------------------------------------------------------------------- * Editing post 5 in the database would achieve the same rendering. It would also * be a content change: no diff, no review, no revert except by hand, and the * next person to open the Kit in the Elementor editor would see tokens they * cannot resolve. This file is a stylesheet. Delete the enqueue line and the * site is exactly as it was. * * --------------------------------------------------------------------------- * WHAT IS DELIBERATELY NOT TOUCHED * --------------------------------------------------------------------------- * - DigitalMe. Every selector here is gated on :not(.sr-cinema) and, in the * generated half, scoped inside .sr-main, which DigitalMe does not have. Its * cinema palette is its own and stays its own. * - The body ink. WPCode snippet 989976 sets body { color: rgba(0,0,0,.75) * !important } sitewide, and that snippet is untouchable for now. It is a * single consistent value already, and beating it would need !important, which * is reserved. Left as it is, on purpose. * - The body line-height. The Kit sets 1.4em. Raising it to --leading-normal * would reflow every paragraph on the site and change the height of fixed-size * cards, which is a layout change and out of scope. Flagged, not done. * - Semantic colour: the red compliance countdown, the traffic-light status * matrix, the lime verdict axis, Zealy's teal. See the generator. */ body.elementor-kit-5:not(.sr-cinema) { /* -- Colour -------------------------------------------------------------- */ /* accent_1 is already the brand blue and accent_5 is already white; naming them costs nothing and means a future change to the token moves them too. */ --e-global-color-vamtam_accent_1: var(--sr-brand); --e-global-color-vamtam_accent_5: var(--sr-canvas); --e-global-color-vamtam_sticky_header_bg_color: var(--sr-brand); /* #F5F5F5, the pale ground. Two units of blue away from --sr-tint. */ --e-global-color-vamtam_accent_2: var(--sr-tint); /* #5F6567, the muted body grey. 31 of its 34 uses set `color`. */ --e-global-color-vamtam_accent_3: var(--sr-ink-soft); /* #DEE0FF, the pale blue. Used as a ground (37), a border (18) and, on dark sections, as text (12). --sr-tint is pale enough to carry all three roles: it stays a light ground, a light border, and light text on a dark band. */ --e-global-color-vamtam_accent_4: var(--sr-tint); /* #0a0557 is --sr-eyebrow to the digit. It is also the Kit's link colour and its button-hover fill, so this is an identity rebind and moves nothing. */ --e-global-color-vamtam_accent_6: var(--sr-eyebrow); /* #00000026, the hairline. Now navy-tinted rather than neutral black. */ --e-global-color-vamtam_accent_7: var(--sr-hairline); /* #00000099, black at 60%. Six uses set text, four set a scrim ground. */ --e-global-color-vamtam_accent_8: var(--sr-ink-soft); /* #0A0D31 is --sr-ink to the digit. The heading colour. Identity. */ --e-global-color-a9cf77f: var(--sr-ink); /* #F5F5F1B3, off-white at 70%, used as text on dark. */ --e-global-color-8a42445: var(--sr-ink-invert-soft); /* -- Type: family -------------------------------------------------------- */ /* The body global and the form-field global are still set to Helvetica in the Kit, and the menu global to Inter, which is a different face from Inter Tight rather than a weight of it. A WPCode snippet exists solely to paper over the first of those. These three lines fix it at source. */ --e-global-typography-vamtam_primary_font-font-family: var(--font-ui); --e-global-typography-6ed87f1-font-family: var(--font-ui); --e-global-typography-e41de06-font-family: var(--font-ui); --e-global-typography-vamtam_h1-font-family: var(--font-ui); --e-global-typography-vamtam_h2-font-family: var(--font-ui); --e-global-typography-vamtam_h3-font-family: var(--font-ui); --e-global-typography-vamtam_h4-font-family: var(--font-ui); --e-global-typography-vamtam_h5-font-family: var(--font-ui); --e-global-typography-vamtam_h6-font-family: var(--font-ui); --e-global-typography-be24d1a-font-family: var(--font-ui); --e-global-typography-35e5858-font-family: var(--font-ui); --e-global-typography-c3f4d00-font-family: var(--font-ui); --e-global-typography-4448a67-font-family: var(--font-ui); /* -- Type: size ---------------------------------------------------------- */ /* The six heading levels, onto the six rungs of the scale. h1 and h2 shed 60px and 48px fixed sizes for fluid clamps that hold their top end and no longer drop to 30px and 25px the moment the viewport crosses 767px. */ --e-global-typography-vamtam_h1-font-size: var(--type-h1); --e-global-typography-vamtam_h2-font-size: var(--type-h2); --e-global-typography-vamtam_h3-font-size: var(--type-h3); --e-global-typography-vamtam_h4-font-size: var(--type-h4); --e-global-typography-vamtam_h5-font-size: var(--type-h5); --e-global-typography-vamtam_h6-font-size: var(--type-body); --e-global-typography-vamtam_primary_font-font-size: var(--type-body); --e-global-typography-2621617-font-size: var(--type-lead); /* Body L, 20px */ --e-global-typography-0306bf1-font-size: var(--type-caption); /* Body S, 14px */ --e-global-typography-8e8a58f-font-size: var(--type-eyebrow); /* Body XS, 12px */ --e-global-typography-8464352-font-size: var(--type-h3); /* Quote, 30px */ --e-global-typography-f3d7635-font-size: var(--type-body); /* Body links */ --e-global-typography-35e5858-font-size: var(--type-body); /* Menu main */ --e-global-typography-c3f4d00-font-size: var(--type-caption); /* Button text */ --e-global-typography-6ed87f1-font-size: var(--type-caption); /* Form input */ --e-global-typography-4d7b2aa-font-size: var(--type-eyebrow); /* Form label */ --e-global-typography-67933a0-font-size: var(--type-caption); /* Form label */ --e-global-typography-e41de06-font-size: var(--type-caption); /* Menu medium */ --e-global-typography-4448a67-font-size: var(--type-display); /* Accent title, 80px */ /* be24d1a is the Kit's 10px uppercase micro-label, and 78 elements in page content use it. 10px is below the floor at which a tracked, uppercased string is comfortably legible; --type-eyebrow is 13px and is the token that exists for exactly this job. This is the one rebind that makes text noticeably BIGGER, and it is intended. */ --e-global-typography-be24d1a-font-size: var(--type-eyebrow); /* -- Type: leading and tracking ------------------------------------------ */ /* Only h1 moves. The Kit sets it to 1em, which clips descenders on any heading that wraps to a second line, and pairs it with a flat -1px of tracking that is far too tight at 36px and not tight enough at 60px. The other five levels are already sane and are left alone: changing them would reflow content for no gain. */ --e-global-typography-vamtam_h1-line-height: var(--leading-tight); --e-global-typography-vamtam_h1-letter-spacing: var(--tracking-tight); --e-global-typography-vamtam_h2-letter-spacing: var(--tracking-tight); } /* * Code stays code. The generated block below sweeps every stray font-family onto * --font-ui, and this is the counterweight: the three pages that legitimately * set code in a monospace face keep one, and it is now a named token rather than * three different families. */ body.elementor-kit-5:not(.sr-cinema) .sr-main code, body.elementor-kit-5:not(.sr-cinema) .sr-main pre, body.elementor-kit-5:not(.sr-cinema) .sr-main kbd, body.elementor-kit-5:not(.sr-cinema) .sr-main samp { font-family: var(--font-mono), monospace; } /* === BEGIN GENERATED: literal snap. Regenerate with bin/gen-elementor-tokens.js === */ /* 1306 rules, 1875 declarations, across 43 pages: * 19 from Elementor's generated page CSS, 32 from the hand-written *