/* Theme Name: EuroEyes DK Theme URI: https://euroeyes.dk Description: Child of Hello Elementor for the EuroEyes Danmark rebuild. Two things now: the SITE TOKEN MAP, one body .kfe block giving kf-elements' --kfe-* tokens EuroEyes' values as Elementor kit globals and no colour literal (components spec §1.1); and ADR-0010 decision 6's three CTA role styles, reconciled with the widgets' own grounds, plus the two ROLE TYPE sizes the kit hard-codes and exposes no token for (§2b, #247 and #250, since 2026-09-24 written as tokens the pack reads); and the HOME PAGE's own scope under body.home (§4: its serif, its palette as tokens and ee-ref's four ornaments; ADR-0010's amendment of 2026-09-24). The --ee-* palette, the five .ee-bg-* grounds and the reference's ee-* component rules are kept only until w2.generator-preview.2 regenerates the 21 pages and retires them (spec §1.4). ADR-0010, amended 2026-09-19. Author: K-Factor Template: hello-elementor Version: 0.4.7 License: GPL-3.0-or-later Text Domain: euroeyes-dk */ /* ========================================================================== EuroEyes DK — the child stylesheet -------------------------------------------------------------------------- The record is docs/decisions/0010-the-child-theme-and-the-design-tokens.md. Source of truth: this file in the repository (themes/euroeyes-dk/), pushed to ee-build by docs/runbooks/the-child-theme-and-kf-elements-on-ee-build.md with its sha256 read back on both sides. Never edit it on the instance. 0. The palette. Every colour value in this file is declared exactly once, here, and used everywhere else through var(). The first five are the container colours the Elementor kit does not carry; moving them into the kit's globals is a Ph10 handover item (ADR-0010, Consequences). ========================================================================== */ :root { --ee-white: #FFFFFF; --ee-mist: #F2F5FB; --ee-blue: #2F5E8C; --ee-pale: #E6ECF7; --ee-navy: #0B1E4D; --ee-accent: #1E419A; --ee-accent-deep: #16307A; --ee-primary: #0A5CA8; --ee-ink: #102E4A; --ee-ink-soft: #33405C; --ee-text: #4A5763; --ee-text-deep: #3C4E61; --ee-text-prose: #3A4652; --ee-text-cool: #4A6079; --ee-label: #5A6470; --ee-caption: #6B7684; --ee-dash: #8FA3B8; --ee-line: #E1E9F2; --ee-line-xref: #E1EAF3; --ee-line-strong: #D5E0EC; --ee-line-cta: #C4D2EE; --ee-on-accent: #D9E3F7; --ee-on-accent-soft: #9DB8EE; --ee-light: #EAF1F8; --ee-white-90: rgba(255,255,255,.9); --ee-white-85: rgba(255,255,255,.85); --ee-white-55: rgba(255,255,255,.55); --ee-white-15: rgba(255,255,255,.15); --ee-white-0: rgba(255,255,255,0); --ee-mist-90: rgba(242,245,251,.9); --ee-mist-0: rgba(242,245,251,0); --ee-accent-40: rgba(30,65,154,.4); --ee-accent-35: rgba(30,65,154,.35); --ee-shadow: rgba(16,46,74,.10); /* The home page's colours that the kit does not carry (§4, ADR-0010's amendment of 2026-09-24). ee-ref post 727's own tokens (`.eev4{…}`, R:6), each declared once, here; the kit's mist, pale, navy and accent already equal ee-ref's cream, cream-deep, navy and gold and are read from the kit. Moving these into the kit is the same Ph10 handover item as the five above. */ --ee-home-ink: #121A33; --ee-home-muted: #5E6B85; --ee-home-muted-2: #94A0B8; --ee-home-gold-deep: #14306E; --ee-home-line: #D9E0EF; --ee-home-red: #C0322A; --ee-home-red-deep: #9C261F; --ee-home-film: #0B111B; --ee-home-orb: rgba(30,65,154,.18); --ee-home-shadow: 0 30px 80px -40px rgba(7,40,60,.35); /* the suitability test's missing-answer line (`.quiz-hint`, ref727.html:262; §4.5, w4.quiz-pages.1) */ --ee-home-alert: #A8442F; } /* ========================================================================== 1. Container grounds — the five colours as utility classes -------------------------------------------------------------------------- An Elementor container's colour control takes a kit global, not a child theme variable, so a template reaches these five through the container's CSS Classes field. Each class sets the ground and the text colour that reads on it; the two dark grounds also flip Elementor's own heading and text widgets, whose default colours come from the kit. kf-elements widgets carry their own ground (their Background control) and flip their own text with it. ========================================================================== */ .ee-bg-white { background-color: var(--ee-white); color: var(--ee-text); } .ee-bg-mist { background-color: var(--ee-mist); color: var(--ee-text); } .ee-bg-pale { background-color: var(--ee-pale); color: var(--ee-text); } .ee-bg-blue { background-color: var(--ee-blue); color: var(--ee-white); } .ee-bg-navy { background-color: var(--ee-navy); color: var(--ee-white); } .ee-bg-blue .elementor-widget-heading .elementor-heading-title, .ee-bg-navy .elementor-widget-heading .elementor-heading-title, .ee-bg-blue .elementor-widget-text-editor, .ee-bg-navy .elementor-widget-text-editor { color: var(--ee-white); } .ee-bg-blue .elementor-widget-text-editor a, .ee-bg-navy .elementor-widget-text-editor a { color: var(--ee-white); text-decoration: underline; text-underline-offset: 3px; } .ee-bg-blue .elementor-widget-text-editor a:hover, .ee-bg-navy .elementor-widget-text-editor a:hover, .ee-bg-blue .elementor-widget-text-editor a:active, .ee-bg-navy .elementor-widget-text-editor a:active { color: var(--ee-pale); } /* ========================================================================== 2. The three CTA button styles, keyed by role -------------------------------------------------------------------------- Every kf-elements call to action is inside the widget's .kfe wrapper. The role is what the button IS (and what Ph7's listeners bind to); the widget's own style control only picks among kf-elements' defaults, so the role wins here. Specificity, not order: kf-elements styles .kfe .kfe-btn at (0,2,0) and .kfe .kfe-btn.solid and .kfe .kfe-btn.outline at (0,3,0), their :hover at (0,3,0) and (0,4,0), and loads per widget at render, so the child sheet's place in the page is not ours to rely on. Every selector below is .kfe a.kfe-btn[data-cta="…"] (0,3,1), its :hover/:active/:focus-visible (0,4,1), and the dark-ground variants one class higher again. No importance flag anywhere in this file. What the role styles own: colour, background, border and radius, the kit's button typography (the primary font at weight 600 — the one button key the kit carries), and the hover and focus-visible treatment. What they leave to the widget, on purpose: padding, font-size and the phone stack's display/width. Those are set by kf-elements rules that (0,3,1) does not beat: .kfe .kfe-event-list .event .kfe-btn at (0,4,0) (event-list.css:85) and the four stacks .kfe .kfe-cta-row.stack-mobile .actions .kfe-btn (0,5,0), .kfe .kfe-hero .actions .kfe-btn, .kfe .kfe-page-header .actions .kfe-btn and .kfe .kfe-cta .actions .kfe-btn (0,4,0) (cta-row.css:30, hero.css:100, page-header.css:38, cta.css:26). ========================================================================== */ .kfe a.kfe-btn[data-cta="primary"], .kfe a.kfe-btn[data-cta="secondary"], .kfe a.kfe-btn[data-cta="tertiary"] { border: 1px solid transparent; /* The radius and the tracking read two of this sheet's own tokens, unset everywhere but the home page (§4.1), so every other page computes the literal after the comma (2026-09-24). */ border-radius: var(--ee-cta-radius, 8px); font-family: var(--e-global-typography-primary-font-family, inherit); font-weight: 600; letter-spacing: var(--ee-cta-tracking, 0.01em); text-transform: none; box-shadow: none; transition: background-color 0.15s, border-color 0.15s, color 0.15s; } /* primary — solid, the booking CTA */ .kfe a.kfe-btn[data-cta="primary"] { background-color: var(--ee-accent); border-color: var(--ee-accent); color: var(--ee-white); } .kfe a.kfe-btn[data-cta="primary"]:hover, .kfe a.kfe-btn[data-cta="primary"]:active { background-color: var(--ee-accent-deep); border-color: var(--ee-accent-deep); color: var(--ee-white); transform: none; box-shadow: none; } /* secondary — an outline on the current ground, the events CTA */ .kfe a.kfe-btn[data-cta="secondary"] { background-color: transparent; border-color: var(--ee-accent); color: var(--ee-accent); } .kfe a.kfe-btn[data-cta="secondary"]:hover, .kfe a.kfe-btn[data-cta="secondary"]:active { background-color: var(--ee-pale); border-color: var(--ee-accent-deep); color: var(--ee-accent-deep); transform: none; box-shadow: none; } /* tertiary — white, the click-to-call */ .kfe a.kfe-btn[data-cta="tertiary"] { background-color: var(--ee-white); border-color: var(--ee-line-cta); color: var(--ee-navy); } .kfe a.kfe-btn[data-cta="tertiary"]:hover, .kfe a.kfe-btn[data-cta="tertiary"]:active { background-color: var(--ee-mist); border-color: var(--ee-accent); color: var(--ee-navy); transform: none; box-shadow: none; } .kfe a.kfe-btn[data-cta="primary"]:focus-visible, .kfe a.kfe-btn[data-cta="secondary"]:focus-visible, .kfe a.kfe-btn[data-cta="tertiary"]:focus-visible { outline: 2px solid var(--ee-accent); outline-offset: 2px; } /* On a dark ground — `.kfe-dark`, which a widget with a Background control adds for the dark presets (Primary, Primary deep, Accent) or for a Custom colour with "Light text on this background". Those widgets paint their own section ground (default Surface, off-white). The primary turns white, the secondary outlines in white and the tertiary keeps a translucent edge, so the three stay three. AMENDED 2026-09-19 (ADR-0010, #220): `.kfe-hero` has left this group. `kfe_hero` adds `.kfe-dark` through its own ground preset and STRIPS it under a photograph (kf-elements `includes/widgets/class-hero.php:549-557`), so a photo banner is a LIGHT ground for the roles and keeps the solid accent primary the reference paints (components spec `:321-322`), while an accent-ground band carries `.kfe-dark` and gets the white one (spec §3.5). Naming `.kfe-hero` here painted the button white on every banner, photograph or not — #210 comment 25465, raised by K1 and K6. The `.ee-bg-blue` / `.ee-bg-navy` container class never triggers these, so a widget that should read dark inside a dark container sets its own Background to dark. One card inside a dark section stays light, and the block after this one gives it back the light styles. */ .kfe .kfe-dark a.kfe-btn[data-cta="primary"] { background-color: var(--ee-white); border-color: var(--ee-white); color: var(--ee-navy); } .kfe .kfe-dark a.kfe-btn[data-cta="primary"]:hover, .kfe .kfe-dark a.kfe-btn[data-cta="primary"]:active { background-color: var(--ee-pale); border-color: var(--ee-pale); color: var(--ee-navy); } .kfe .kfe-dark a.kfe-btn[data-cta="secondary"] { background-color: transparent; border-color: var(--ee-white); color: var(--ee-white); } .kfe .kfe-dark a.kfe-btn[data-cta="secondary"]:hover, .kfe .kfe-dark a.kfe-btn[data-cta="secondary"]:active { background-color: var(--ee-white-15); border-color: var(--ee-white); color: var(--ee-white); } .kfe .kfe-dark a.kfe-btn[data-cta="tertiary"] { background-color: transparent; border-color: var(--ee-white-55); color: var(--ee-white); } .kfe .kfe-dark a.kfe-btn[data-cta="tertiary"]:hover, .kfe .kfe-dark a.kfe-btn[data-cta="tertiary"]:active { background-color: var(--ee-white-15); border-color: var(--ee-white); color: var(--ee-white); } .kfe .kfe-dark a.kfe-btn[data-cta]:focus-visible { outline-color: var(--ee-white); } /* The one exception on the deep ground. The reference's footer button is ACCENT on white type, not white on navy (`post-323.css:92-93`, `.ee-foot-cta`), and `kfe_site_footer`'s ground preset is `deep`, so its section element carries both `.kfe-bg-deep` and `.kfe-dark` (`class-widget-base.php:440-456`). This pair is (0,5,1) at rest and (0,6,1) on hover and active — exactly one class above the dark group — so it reaches the footer's primary and nothing else. A `dark`, `accent` or `custom` ground keeps the white primary above. */ .kfe .kfe-dark.kfe-bg-deep a.kfe-btn[data-cta="primary"] { background-color: var(--ee-cta-deep-fill, var(--ee-accent)); border-color: var(--ee-cta-deep-fill, var(--ee-accent)); color: var(--ee-white); } .kfe .kfe-dark.kfe-bg-deep a.kfe-btn[data-cta="primary"]:hover, .kfe .kfe-dark.kfe-bg-deep a.kfe-btn[data-cta="primary"]:active { background-color: var(--ee-cta-deep-fill-hover, var(--ee-accent-deep)); border-color: var(--ee-cta-deep-fill-hover, var(--ee-accent-deep)); color: var(--ee-white); } /* `--ee-cta-deep-fill` is unset everywhere but the home page's consult cards (§4.2), whose booking button is ee-ref's red (`.btn-red`, R:40) on the navy card (2026-09-24). */ /* The phone bar's own button size — the component specification's §4.1 line for ≤767: "the CTA (11/15, 14px, 40px tall)". The site token map sets `--kfe-btn-pad` and `--kfe-btn-size` for the page's buttons, and the header's bar is the one place the reference draws a smaller one. It is a size, not a colour, and it is scoped to the header's own CTA class, so no other button moves. MEASURED BOTH WAYS on the served page, with this sheet and the final header document live, by `qa/shots/chrome.mjs RULE_PROBE=1` on 2026-09-19, over all four pairs at 390: with this rule the end group is 246px and the bar is 61px over ONE row; with the page's button size (`--kfe-btn-pad` 15px 26px, `--kfe-btn-size` 16px) the end group is 275px and the bar is 108px over TWO. The row's content box is 358px, and the logo, the languages, the burger and the button must share it. At 1440 the same probe reads the same figures with the rule on and off — it is a `max-width: 767px` rule and reaches nothing above that width. (0,3,1), above base.css's `.kfe .kfe-btn` (0,2,0). */ @media (max-width: 767px) { .kfe a.kfe-btn.kfe-site-header-cta { padding: 11px 15px; font-size: 14px; } } /* The one light card on a dark ground. kfe_video_feature's landscape copy card (.band) is always white, even when the section behind it carries .kfe-dark (video-feature.css:47-50, :63-65), and its CTA renders inside that card (class-video-feature.php:272-281). The dark variants above would draw white on white there, so the light-ground role styles come back on the card one class set higher: (0,6,1) at rest, (0,7,1) on hover, active and focus-visible. The portrait layout's copy sits on the section ground itself and keeps the dark variants. */ .kfe .kfe-video.landscape .band a.kfe-btn[data-cta="primary"] { background-color: var(--ee-accent); border-color: var(--ee-accent); color: var(--ee-white); } .kfe .kfe-video.landscape .band a.kfe-btn[data-cta="primary"]:hover, .kfe .kfe-video.landscape .band a.kfe-btn[data-cta="primary"]:active { background-color: var(--ee-accent-deep); border-color: var(--ee-accent-deep); color: var(--ee-white); } .kfe .kfe-video.landscape .band a.kfe-btn[data-cta="secondary"] { background-color: transparent; border-color: var(--ee-accent); color: var(--ee-accent); } .kfe .kfe-video.landscape .band a.kfe-btn[data-cta="secondary"]:hover, .kfe .kfe-video.landscape .band a.kfe-btn[data-cta="secondary"]:active { background-color: var(--ee-pale); border-color: var(--ee-accent-deep); color: var(--ee-accent-deep); } .kfe .kfe-video.landscape .band a.kfe-btn[data-cta="tertiary"] { background-color: var(--ee-white); border-color: var(--ee-line-cta); color: var(--ee-navy); } .kfe .kfe-video.landscape .band a.kfe-btn[data-cta="tertiary"]:hover, .kfe .kfe-video.landscape .band a.kfe-btn[data-cta="tertiary"]:active { background-color: var(--ee-mist); border-color: var(--ee-accent); color: var(--ee-navy); } .kfe .kfe-video.landscape .band a.kfe-btn[data-cta]:focus-visible { outline-color: var(--ee-accent); } /* The phone stack (390 px up to the widgets' stack breaks: 560 px, 820 px for the hero): display and width come from the widget's own stack rule; at 560 px and below the role styles only keep a long Danish label inside the full-width button. */ @media (max-width: 560px) { .kfe a.kfe-btn[data-cta="primary"], .kfe a.kfe-btn[data-cta="secondary"], .kfe a.kfe-btn[data-cta="tertiary"] { text-align: center; overflow-wrap: anywhere; } } /* ========================================================================== 2b. ROLE TYPE sizes the kit hard-codes and exposes no token for (added 2026-09-20, ADR-0010's amendment; wp-eedk #247, #250, #265) -------------------------------------------------------------------------- The site token map below is the ordinary route for a type value: base.css declares a --kfe-* token with a neutral value and the map gives it EuroEyes'. These two roles have no token to give. kf-elements writes the number itself, with no custom property in front of it, so the map cannot reach them and the only other layer is this one — the same layer ADR-0010 decision 6 already uses for the CTA roles, and for the same reason: the SITE's scale wins over the pack's neutral default. Specificity, not order. Both rules are `body .kfe …`, one class-and-element above the base.css rule they answer, so the child sheet's place in the page is not relied on (the note at the top of section 2 applies here too). Each value is written as `var(--kfe--…, )`, so the day kf-elements READS these names these rules pick the value up. Retiring §2b is then ONE further edit and not zero: the value moves to the site token map at `body .kfe` in "The site token map" below — `--kfe-label-size: 12.5px`, `--kfe-label-weight: 700`, `--kfe-label-tracking: 0.15em`, `--kfe-label-size-sm: 11.5px` in the <=900 query, and `--kfe-h3-size: 20px`. Note the ORDER. If the kit ever DECLARES these tokens at its own neutral values rather than reading them with fallbacks, the `var()`s below resolve to the kit's 12/400/0.3em and 28px and EuroEyes' scale is lost silently — no walk finding but E8's eyebrow and section-h3 specs at 1440. So the map entry goes in FIRST, and §2b is deleted after it. That tokenisation is REQUESTED on kf-elements (w2.reveal.1): base.css:100 and base.css:98/:205. CORRECTED 2026-09-20 (#265). That retirement path works for ONE of the three eyebrow values and not for the other two. The reference does not render one eyebrow; it renders fourteen, and they differ: .ee-phd-eyebrow 12.5/700/.15em post-323.css:561 (page-header) .ee-jj-txt .eyebrow 12 /700/.2em post-323.css:231 (split-media cutout) .ee-card .ee-tag 11 /700/.16em post-323.css:116 (split-media card) .ee-fnl .eyebrow 11 /700/.17em post-323.css:496 (cta-band funnel) Every one of them is 700, and .ee-tp-lead (:76) and the homepage's .ee-split-l .ee-eyebrow (:26) are the only two at 600 — so `--kfe-label-weight: 700` IS a site-wide value and belongs in the map the day the kit reads it. `--kfe-label-size` and `--kfe-label-tracking` are NOT: one site token cannot carry four component values, so those stay per component in rules like the ones below, whatever the kit ends up declaring. The weight is therefore still written through its var() and the size and tracking are written as literals with the reference line beside each, which is the honest form: a var() whose name can never be fed is a promise the file cannot keep. 1. The page-header eyebrow (#247). base.css:100 is `.kfe .kfe-label { font-size: 12px; letter-spacing: 0.3em; … font-weight: 400 }`. The specification (components.md:277) and ee-ref (post-323.css:561, `.ee-phd-eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.15em}`) agree on 12.5/700/.15em, and the build rendered 400 on all 14 page-header pages. Scoped to the page-header's own eyebrow, because 12.5/700/.15em is that component's line (:561) and five other widgets share the `.kfe-label` class with looks of their own. The <=900 step is the reference's own (post-323.css:591, `.ee-phd-eyebrow{font-size:11.5px}`). 2. The frame's prose H3 (#250). base.css:98 gives `.kfe h3` a family, a weight and a colour and NO size, and :205 gives `.kfe-text-block-title` the same three, so a block heading fell through to whatever the theme draws and rendered 28px on six pages against the specification's (components.md:260) and ee-ref's (post-323.css:109, `.ee-vo h3`) 20px. Scoped to the text section's block title AT h3: a card title and a steps heading carry their own size in their own §3.x, and a block whose `block_level` is h2 or h4 prints the same class at that level and keeps its own. That is the scoping qa/walk's section-h3 role uses. ========================================================================== */ /* RETIRED 2026-09-24 (w2.homepage.1; kf-elements #170, R1.8): base.css now READS `--kfe-label-size`, `--kfe-label-weight` and `--kfe-label-tracking` on `.kfe .kfe-label` (base.css:117, the one rule anywhere in the pack that sets an eyebrow's size, weight or tracking), so each component's eyebrow is given here as TOKENS on its own section and the property rules that answered the hard-coded numbers are gone. The values are unchanged, so the computed eyebrow is unchanged on every page (read before and after the push; ADR-0010's amendment of 2026-09-24). The order the note above asked for was kept: the token is set in the same edit that deletes the rule. */ body .kfe .kfe-page-header { --kfe-label-size: 12.5px; --kfe-label-weight: 700; --kfe-label-tracking: 0.15em; } @media (max-width: 900px) { body .kfe .kfe-page-header { --kfe-label-size: 11.5px; } } body .kfe .kfe-text-section h3.kfe-text-block-title { font-size: var(--kfe-h3-size, 20px); } /* 3. The OTHER eyebrows (#265). #247's rule above answers the page header and nothing else, so every other kfe_* eyebrow still rendered base.css:100's neutral 12/400/0.3em against a reference that is bold and tightly tracked — read on the 2026-09-20 strips at 1440 and 390 on `kirurger` (the founder block) and at 1440 on `informationsaftener` (the evening card). #265 counts NINETEEN widgets that print `.kfe-label` and asks which of them the reference renders at the page header's numbers. Measured over the whole DA corpus rather than over the widget list, the answer is that only FIVE component/variant pairs ever print one at all: page-header / split 49 records post-323.css:561 (rule 1 above) cta-band / funnel 24 records post-323.css:496 split-media / cutout 1 record post-323.css:231 split-media / card 1 record post-323.css:116 page-header / text 1 record `cookies`, covered by rule 1 and NONE of the four with its own reference line wants 12.5/700/.15em. The founder block is `.ee-jj`, not the homepage's `.ee-split-l` — so the 11/600/.32em at post-323.css:26 that has been cited for it belongs to a different component. The other fourteen widgets are unreachable here because no record fills their `label`, and a rule for a component the corpus never prints would be a guess dressed as a fix; they are named here so the next reader does not re-derive the census. Scoped on the mode class the widget prints (`class-split-media.php:543` writes `mode-` for anything but `plain`), so each variant takes its own reference numbers and nothing else moves. `kfe_cta` prints no variant class, and it does not need one: `closing`, `teaser` and `team` print no label at all in any record, so `.kfe-cta .kfe-label` reaches the funnel band and nothing else. The colour is already right and is not touched — base.css:113 gives `.kfe-dark .kfe-label` the `--kfe-on-dark-soft` the map sets to the reference's own #9DB8EE. */ /* Retired to tokens with the page header's, 2026-09-24, values unchanged. */ body .kfe .kfe-split-media.mode-cutout { --kfe-label-size: 12px; --kfe-label-weight: 700; --kfe-label-tracking: 0.2em; } /* post-323.css:231 */ body .kfe .kfe-split-media.mode-card { --kfe-label-size: 11px; --kfe-label-weight: 700; --kfe-label-tracking: 0.16em; } /* post-323.css:116 */ body .kfe .kfe-cta { --kfe-label-size: 11px; --kfe-label-weight: 700; --kfe-label-tracking: 0.17em; } /* post-323.css:496 */ /* ========================================================================== 3. The reference's ee-* components, carried from its Customizer CSS -------------------------------------------------------------------------- Cut to the census: the ee-* class tokens that occur ten or more times in the reference's html widgets. Values and breakpoints are the reference's own; its importance flags are gone, replaced where they fought a rule on this theme (Hello's a:hover and img resets) by a :hover rule or one more class. ADR-0010 names every token and every rule group left out. ========================================================================== */ /* --- 3.1 The page header (ee-phd) ---------------------------------------- */ .ee-phd { background: var(--ee-white); width: 100%; overflow: hidden; } .ee-phd-w { display: grid; grid-template-columns: minmax(0, 50fr) minmax(0, 50fr); align-items: stretch; } .ee-phd-txt { display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - var(--ee-hdr, 94px)); padding: 62px 46px 62px max(24px, calc((100vw - 1140px) / 2 + 24px)); } .ee-phd-txt h1 { font-size: 44px; line-height: 1.14; color: var(--ee-ink); margin: 0 0 16px; font-weight: 700; } .ee-phd-eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--ee-accent); margin: 0 0 14px; } .ee-phd-lead { font-size: 18.5px; line-height: 1.62; color: var(--ee-text); margin: 0 0 28px; max-width: 33em; } .ee-phd-act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin: 0 0 24px; } .ee-phd a.ee-phd-alt { font-weight: 600; font-size: 16px; color: var(--ee-accent); text-decoration: none; border-bottom: 1px solid var(--ee-accent-40); padding-bottom: 2px; } .ee-phd a.ee-phd-alt:hover, .ee-phd a.ee-phd-alt:focus, .ee-phd a.ee-phd-alt:active { color: var(--ee-accent-deep); border-bottom-color: var(--ee-accent-deep); text-decoration: none; } .ee-phd-trust { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13.5px; color: var(--ee-caption); margin: 0; } .ee-phd-trust span { display: inline-flex; align-items: center; gap: 7px; } .ee-phd-trust svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--ee-accent); } .ee-phd a.ee-phd-cta { display: inline-block; align-self: flex-start; background: var(--ee-accent); color: var(--ee-white); font-weight: 600; font-size: 16px; line-height: 1.2; padding: 15px 26px; border-radius: 8px; text-decoration: none; } .ee-phd a.ee-phd-cta:hover, .ee-phd a.ee-phd-cta:focus, .ee-phd a.ee-phd-cta:active { background: var(--ee-accent-deep); color: var(--ee-white); text-decoration: none; } .ee-phd-img { position: relative; align-self: stretch; line-height: 0; } .ee-phd-img::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--ee-white) 0%, var(--ee-white-85) 4%, var(--ee-white-0) 15%); } .ee-phd .ee-phd-img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; } @media (max-width: 1200px) { .ee-phd-txt { padding: 54px 34px 54px max(20px, calc((100vw - 1040px) / 2 + 20px)); } .ee-phd-txt h1 { font-size: 38px; } .ee-phd-lead { font-size: 17.5px; } } @media (max-width: 900px) { .ee-phd-w { grid-template-columns: 1fr; grid-template-rows: auto 1fr; min-height: calc(100svh - var(--ee-hdr, 80px)); } .ee-phd-img { order: -1; height: 36svh; min-height: 190px; max-height: 300px; } .ee-phd-img::after { background: linear-gradient(180deg, var(--ee-white-0) 74%, var(--ee-white-90) 94%, var(--ee-white) 100%); } .ee-phd-txt { min-height: 0; padding: 30px 20px 38px; } .ee-phd-txt h1 { font-size: 32px; margin-bottom: 12px; } .ee-phd-lead { font-size: 16.5px; margin-bottom: 22px; } .ee-phd-eyebrow { font-size: 11.5px; margin-bottom: 10px; } .ee-phd-trust { font-size: 12.5px; } } /* The reference's phone pattern: image on top, text centred below on the light band, the two calls to action stacked full width. */ @media (max-width: 767px) { .ee-phd { background: var(--ee-mist); } .ee-phd-txt { background: var(--ee-mist); text-align: center; align-items: center; padding: 26px 20px 34px; } .ee-phd-txt h1 { color: var(--ee-navy); font-weight: 600; font-size: 32px; line-height: 1.06; letter-spacing: -.018em; } .ee-phd-lead { color: var(--ee-ink-soft); } .ee-phd-act { flex-direction: column; align-items: stretch; width: 100%; gap: 12px; } .ee-phd a.ee-phd-cta { align-self: stretch; text-align: center; padding: 16px 20px; } .ee-phd a.ee-phd-alt { text-align: center; background: var(--ee-white); border: 1px solid var(--ee-line-cta); border-radius: 8px; padding: 15px 20px; color: var(--ee-navy); } .ee-phd-trust { justify-content: center; } .ee-phd-img::after { background: linear-gradient(180deg, var(--ee-mist-0) 74%, var(--ee-mist-90) 94%, var(--ee-mist) 100%); } } /* --- 3.2 The content band (ee-vo), cards, checks and steps --------------- */ .ee-vo { padding: 70px 0; } .ee-vo.alt { background: var(--ee-mist); } .ee-vo-w { max-width: 1140px; margin: 0 auto; padding: 0 24px; } .ee-vo h2 { font-size: 30px; line-height: 1.2; color: var(--ee-ink); margin: 0 0 18px; font-weight: 700; } .ee-vo h3 { font-size: 20px; color: var(--ee-ink); margin: 0 0 10px; font-weight: 700; } .ee-vo p { color: var(--ee-text); font-size: 17px; line-height: 1.7; margin: 0 0 16px; } .ee-vo .lead { font-size: 18px; } .ee-vo-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; } .ee-vo .ee-vo-2 img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; border-radius: 14px; aspect-ratio: 4 / 3; display: block; } .ee-vo .ee-vo-2 img.portrait { object-position: center top; } .ee-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; margin-top: 34px; } .ee-card { background: var(--ee-white); border: 1px solid var(--ee-line); border-radius: 14px; padding: 30px 28px; display: flex; flex-direction: column; } .ee-card .ee-tag { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ee-accent); font-weight: 700; margin: 0 0 10px; } .ee-card p { font-size: 16px; margin: 0 0 14px; } .ee-card .ee-suit { background: var(--ee-mist); border-radius: 8px; padding: 14px 16px; font-size: 15px; color: var(--ee-text-deep); margin: 0 0 18px; } .ee-card a.ee-more { margin-top: auto; color: var(--ee-accent); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--ee-accent-35); align-self: flex-start; padding-bottom: 2px; } .ee-card a.ee-more:hover, .ee-card a.ee-more:active { color: var(--ee-accent); border-bottom-color: var(--ee-accent); } .ee-vo-2:has(.ee-imgcard) { align-items: stretch; } .ee-card.ee-imgcard { padding: 0; overflow: hidden; position: relative; min-height: 280px; } .ee-card.ee-imgcard img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: right center; display: block; border-radius: inherit; } .ee-check { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 30px; } .ee-check li { position: relative; padding-left: 30px; color: var(--ee-text-deep); font-size: 16px; line-height: 1.6; margin-bottom: 10px; } .ee-check li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--ee-accent); font-weight: 700; } .ee-check.no li::before { content: "\2013"; color: var(--ee-dash); } .ee-check li a { color: var(--ee-accent); } .ee-check li a:hover, .ee-check li a:active { color: var(--ee-accent-deep); } .ee-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 34px; counter-reset: s; } .ee-step { background: var(--ee-white); border: 1px solid var(--ee-line); border-radius: 12px; padding: 26px 22px; } .ee-step .n { width: 38px; height: 38px; border-radius: 50%; background: var(--ee-accent); color: var(--ee-white); display: flex; align-items: center; justify-content: center; font-weight: 700; margin: 0 0 14px; } .ee-step h3 { font-size: 17px; margin: 0 0 8px; } .ee-step p { font-size: 15px; margin: 0; } @media (max-width: 900px) { .ee-vo-2, .ee-cards, .ee-check { grid-template-columns: 1fr; gap: 24px; } .ee-steps { grid-template-columns: 1fr 1fr; } .ee-vo { padding: 52px 0; } } @media (max-width: 560px) { .ee-steps { grid-template-columns: 1fr; } } /* --- 3.3 The picture break (ee-break) and the picture strip (ee-strip) --- */ .ee-break { width: 100%; overflow: hidden; } .ee-break img { width: 100%; aspect-ratio: 2.6 / 1; height: auto; object-fit: cover; display: block; } .ee-break.ee-break-full img { aspect-ratio: auto; height: auto; width: 100%; object-fit: contain; display: block; } .ee-break.ee-break-hero img { aspect-ratio: auto; height: 357px; width: 100%; object-fit: cover; object-position: center 55%; display: block; } @media (max-width: 1024px) { .ee-break.ee-break-hero img { height: 300px; } } @media (max-width: 767px) { .ee-break.ee-break-hero img { height: 230px; } } @media (max-width: 600px) { .ee-break img { aspect-ratio: 2 / 1; } } .ee-strip { padding: 28px 0 0; } .ee-strip-w { max-width: 1140px; margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .ee-strip-w figure { margin: 0; } .ee-strip .ee-strip-w img { width: 100%; height: 100%; max-width: none; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 30%; border-radius: 12px; display: block; } @media (max-width: 900px) { .ee-strip-w { grid-template-columns: 1fr; gap: 18px; } } /* --- 3.4 The cross-reference band (ee-xref) ----------------------------- */ .ee-xref { background: var(--ee-mist); padding: 64px 0; margin: 0; } .ee-xref .ee-xw { max-width: 1140px; margin: 0 auto; padding: 0 24px; } .ee-xref h2 { font-size: 32px; line-height: 1.2; color: var(--ee-ink); margin: 0 0 10px; font-weight: 700; } .ee-xref .ee-xsub { color: var(--ee-text-cool); margin: 0 0 34px; font-size: 17px; line-height: 1.6; max-width: 760px; } .ee-xref .ee-xg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .ee-xref .ee-xcol { background: var(--ee-white); border: 1px solid var(--ee-line-xref); border-radius: 12px; padding: 26px 24px; } .ee-xref .ee-xcol h3 { font-size: 13px; letter-spacing: .09em; text-transform: uppercase; color: var(--ee-primary); margin: 0 0 16px; font-weight: 700; } .ee-xref .ee-xcol ul { list-style: none; margin: 0; padding: 0; } .ee-xref .ee-xcol li { margin: 0 0 11px; padding: 0; list-style: none; } .ee-xref .ee-xcol li::before { display: none; } .ee-xref .ee-xcol a { color: var(--ee-ink); text-decoration: none; font-size: 16px; line-height: 1.4; border-bottom: 1px solid transparent; transition: .15s; } .ee-xref .ee-xcol a:hover, .ee-xref .ee-xcol a:active { color: var(--ee-primary); border-bottom-color: var(--ee-primary); } @media (max-width: 880px) { .ee-xref .ee-xg { grid-template-columns: 1fr; gap: 20px; } .ee-xref h2 { font-size: 26px; } } /* --- 3.5 The key-benefits row (ee-kbrow) -------------------------------- */ .ee-kbrow { background: var(--ee-white); width: 100%; overflow: hidden; } .ee-kbrow-w { display: grid; grid-template-columns: minmax(0, 50fr) minmax(0, 50fr); align-items: stretch; } .ee-kbrow-txt { display: flex; flex-direction: column; justify-content: center; padding: 46px 38px 46px max(24px, calc((100vw - 1140px) / 2 + 24px)); } .ee-kbrow-txt h2 { font-size: 29px; line-height: 1.2; color: var(--ee-ink); margin: 0 0 20px; font-weight: 700; } .ee-kb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .ee-kb-card { background: var(--ee-accent); border: 1px solid var(--ee-accent); border-radius: 12px; padding: 17px 17px; display: flex; gap: 12px; align-items: flex-start; } .ee-kb-card svg { color: var(--ee-white); width: 21px; height: 21px; flex: 0 0 21px; margin-top: 2px; } .ee-kb-card h3 { font-size: 15px; color: var(--ee-white); margin: 0 0 3px; font-weight: 700; line-height: 1.3; } .ee-kb-card p { color: var(--ee-on-accent); font-size: 13.5px; line-height: 1.5; margin: 0; } .ee-kbrow-img { align-self: stretch; line-height: 0; display: grid; min-height: 100%; } .ee-kbrow .ee-kbrow-img img { width: 100%; height: 100%; min-height: 100%; max-width: none; object-fit: cover; object-position: center; display: block; } @media (max-width: 1024px) { .ee-kbrow-w { grid-template-columns: 1fr; } .ee-kbrow-txt { padding: 52px 24px; } .ee-kbrow-img { min-height: 0; } .ee-kbrow .ee-kbrow-img img { height: 340px; min-height: 0; } } @media (max-width: 600px) { .ee-kb-grid { grid-template-columns: 1fr; } } /* --- 3.6 The funnel launch band (ee-fnl) -------------------------------- */ .ee-fnl { background: var(--ee-accent); padding: 60px 20px; text-align: center; } .ee-fnl-w { max-width: 640px; margin: 0 auto; } .ee-fnl .eyebrow { font-size: 11px; letter-spacing: .17em; text-transform: uppercase; color: var(--ee-on-accent-soft); font-weight: 700; margin: 0 0 10px; } .ee-fnl h2 { font-size: 30px; line-height: 1.2; color: var(--ee-white); margin: 0 0 12px; font-weight: 700; } .ee-fnl p { color: var(--ee-on-accent); font-size: 16px; line-height: 1.65; margin: 0 0 24px; } .ee-fnl a.btn { display: inline-block; background: var(--ee-white); color: var(--ee-ink); padding: 15px 30px; border-radius: 10px; font-weight: 600; text-decoration: none; font-size: 16px; } .ee-fnl a.btn:hover, .ee-fnl a.btn:active { background: var(--ee-light); color: var(--ee-ink); } .ee-fnl .note { font-size: 12.5px; color: var(--ee-on-accent-soft); margin: 16px 0 0; } @media (max-width: 560px) { .ee-fnl { padding: 46px 18px; } .ee-fnl h2 { font-size: 24px; } } /* --- 3.7 The surgeon page (ee-doc) and its chips ------------------------ */ .ee-doc-hero { background: var(--ee-pale); padding: 70px 0; } .ee-doc-w { max-width: 1140px; margin: 0 auto; padding: 0 24px; } .ee-doc-top { display: grid; grid-template-columns: 320px 1fr; gap: 48px; align-items: center; } .ee-doc-photo { width: 320px; height: 320px; border-radius: 50%; overflow: hidden; background: var(--ee-white); box-shadow: 0 0 0 8px var(--ee-white), 0 8px 30px var(--ee-shadow); } .ee-doc-top .ee-doc-photo img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center 20%; display: block; } .ee-doc-ini { width: 320px; height: 320px; border-radius: 50%; background: linear-gradient(135deg, var(--ee-accent), var(--ee-navy)); color: var(--ee-white); display: flex; align-items: center; justify-content: center; font-size: 88px; font-weight: 700; box-shadow: 0 0 0 8px var(--ee-white), 0 8px 30px var(--ee-shadow); } .ee-doc-top h1 { font-size: clamp(30px, 3.4vw, 42px); color: var(--ee-ink); margin: 0 0 8px; font-weight: 700; line-height: 1.12; } .ee-doc-role { font-size: 19px; color: var(--ee-accent); font-weight: 700; margin: 0 0 20px; } .ee-doc-facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 24px; } .ee-doc-facts span { background: var(--ee-white); border: 1px solid var(--ee-line-strong); border-radius: 99px; padding: 8px 16px; font-size: 14px; color: var(--ee-ink); font-weight: 600; } a.ee-doc-cta { display: inline-block; background: var(--ee-accent); color: var(--ee-white); padding: 14px 28px; border-radius: 6px; font-weight: 600; text-decoration: none; } a.ee-doc-cta:hover, a.ee-doc-cta:active { background: var(--ee-accent-deep); color: var(--ee-white); } .ee-doc-body { display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: start; } .ee-doc-main h2 { font-size: 26px; color: var(--ee-ink); margin: 0 0 16px; font-weight: 700; } .ee-doc-main h2:not(:first-child) { margin-top: 38px; } .ee-doc-main p { font-size: 17px; line-height: 1.78; color: var(--ee-text-prose); margin: 0 0 16px; } .ee-doc-main ul { margin: 0 0 16px; padding-left: 20px; color: var(--ee-text-prose); font-size: 16px; line-height: 1.8; } .ee-doc-side { background: var(--ee-mist); border: 1px solid var(--ee-line); border-radius: 14px; padding: 28px; position: sticky; top: 24px; } .ee-doc-side h3 { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ee-accent); font-weight: 700; margin: 0 0 16px; } .ee-doc-side dl { margin: 0; } .ee-doc-side dt { font-size: 13px; color: var(--ee-label); margin: 14px 0 2px; font-weight: 600; } .ee-doc-side dt:first-child { margin-top: 0; } .ee-doc-side dd { margin: 0; font-size: 16px; color: var(--ee-ink); font-weight: 600; } .ee-doc-side dd a { color: var(--ee-accent); text-decoration: none; } .ee-doc-side dd a:hover, .ee-doc-side dd a:active { color: var(--ee-accent-deep); } .ee-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; } .ee-chips a { background: var(--ee-white); border: 1px solid var(--ee-line-strong); border-radius: 8px; padding: 10px 16px; font-size: 15px; color: var(--ee-ink); text-decoration: none; font-weight: 600; transition: .15s; } .ee-chips a:hover, .ee-chips a:active { border-color: var(--ee-accent); color: var(--ee-accent); } @media (max-width: 980px) { .ee-doc-top { grid-template-columns: 1fr; gap: 28px; text-align: center; } .ee-doc-photo, .ee-doc-ini { margin: 0 auto; width: 240px; height: 240px; font-size: 66px; } .ee-doc-facts { justify-content: center; } .ee-doc-body { grid-template-columns: 1fr; } .ee-doc-side { position: static; } } /* --- 3.8 The glossary (ee-gloss) ---------------------------------------- */ .ee-gloss { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 26px; } .ee-gterm { background: var(--ee-white); border: 1px solid var(--ee-line); border-radius: 12px; padding: 22px 24px; display: flex; gap: 16px; align-items: flex-start; } .ee-gicon { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 10px; background: var(--ee-pale); display: flex; align-items: center; justify-content: center; } .ee-gicon svg { width: 26px; height: 26px; fill: var(--ee-accent); stroke: none; } .ee-gterm h3 { font-size: 17px; color: var(--ee-ink); margin: 0 0 6px; } .ee-gterm p { font-size: 15px; color: var(--ee-text); margin: 0; line-height: 1.65; } .ee-gterm p a { color: var(--ee-accent); text-decoration: none; } .ee-gterm p a:hover, .ee-gterm p a:active { color: var(--ee-accent-deep); } .ee-galpha { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; justify-content: center; } .ee-galpha a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 8px; background: var(--ee-white); border: 1px solid var(--ee-line); color: var(--ee-accent); font-weight: 700; text-decoration: none; font-size: 15px; } .ee-galpha a:hover, .ee-galpha a:active { background: var(--ee-accent); color: var(--ee-white); } .ee-gletter { font-size: 26px; color: var(--ee-accent); font-weight: 700; margin: 38px 0 4px; border-bottom: 2px solid var(--ee-line); padding-bottom: 8px; } @media (max-width: 800px) { .ee-gloss { grid-template-columns: 1fr; } } /* --- 3.9 Info boxes, location cards and the map frame ------------------- */ .ee-info { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; margin-top: 36px; } .ee-info-box { background: var(--ee-white); border: 1px solid var(--ee-line); border-radius: 12px; padding: 32px 32px 30px; } .ee-info-box h3 { font-size: 17px; color: var(--ee-ink); margin: 0 0 12px; display: flex; align-items: center; gap: 10px; } .ee-info-box p, .ee-info-box li { font-size: 15px; color: var(--ee-text); line-height: 1.7; margin: 0 0 6px; } .ee-info-box ul { margin: 0; padding-left: 18px; } .ee-locs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 30px; } .ee-loc { background: var(--ee-white); border: 1px solid var(--ee-line); border-radius: 12px; padding: 24px; } .ee-loc h3 { font-size: 16px; color: var(--ee-ink); margin: 0 0 4px; display: flex; align-items: center; gap: 8px; } .ee-loc .flag { font-size: 20px; } .ee-loc ul { list-style: none; margin: 10px 0 0; padding: 0; } .ee-loc li { font-size: 15px; color: var(--ee-text); margin: 0 0 7px; line-height: 1.5; } .ee-loc li a { color: var(--ee-accent); text-decoration: none; } .ee-loc li a:hover, .ee-loc li a:active { color: var(--ee-accent); text-decoration: underline; } .ee-map { margin-top: 36px; border-radius: 14px; overflow: hidden; border: 1px solid var(--ee-line); line-height: 0; } .ee-map iframe { width: 100%; height: 420px; border: 0; display: block; } @media (max-width: 900px) { .ee-info { grid-template-columns: 1fr; } .ee-locs { grid-template-columns: 1fr 1fr; } } @media (max-width: 700px) { .ee-map iframe { height: 300px; } } @media (max-width: 600px) { .ee-locs { grid-template-columns: 1fr; } } /* ========================================================================== The site token map (added 2026-09-19, ADR-0010's amendment, #220) -------------------------------------------------------------------------- The third of the component specification's five layers (docs/design/ components.md §1.1, :48-63): kf-elements' base.css declares every --kfe-* token with today's neutral value, and this block gives those tokens EuroEyes' values. One selector, `body .kfe` (0,1,1), which beats base.css's `.kfe` (0,1,0) including its @supports block, and which a per-instance control on `{{WRAPPER}} .kfe` (at least 0,3,0) still beats. NO COLOUR LITERAL LIVES HERE (spec §1.1 :52). Every colour is `var(--e-global-color-)` — an Elementor kit global, editable by the client in Elementor, published by Elementor on the body's kit class, which is why `body .kfe` resolves them. The eight EuroEyes custom colours were written to ee-build's kit (post 5, `_elementor_page_settings.custom_colors`) by this lane under stamp w2-chrome-20260919T130030Z; their ids are recorded in ADR-0010's amendment and are: 1bd94c38 EE Mist #F2F5FB 0628e434 EE Pale #E6ECF7 997fdf84 EE Navy #0B1E4D 469ea250 EE Steel #2F5E8C ce38a589 EE Muted #4A5763 18b81cfe EE Line #E1E9F2 305a500b EE On-dark soft #9DB8EE 4323d781 EE Accent deep #16307A plus the kit's own `secondary` (#102E4A), `accent` (#1E419A) and the earlier custom `52c4f748` EE Light (#EAF1F8), which is the on-dark copy colour. `469ea250` EE Steel is read by no line below: it exists for the generator to bind `quote-card`'s `card_color` to through `__globals__` (#217). Only lengths, font stacks and `none` are written literally. ========================================================================== */ body .kfe { /* headings — the kit's Secondary, at the reference's weights and size */ --kfe-heading: var(--e-global-color-secondary); --kfe-heading-weight: 700; --kfe-h3-weight: 700; --kfe-h2-size: 30px; --kfe-title-measure: none; /* body copy — the reference sets no measure on its prose (kf-elements #87) */ --kfe-body: var(--kfe-muted); --kfe-body-size: 17px; --kfe-body-measure: none; /* the derived shades, re-chained to kit colours */ --kfe-muted: var(--e-global-color-ce38a589); --kfe-line: var(--e-global-color-18b81cfe); --kfe-surface: var(--e-global-color-1bd94c38); --kfe-surface-deep: var(--e-global-color-0628e434); --kfe-primary-deep: var(--e-global-color-997fdf84); --kfe-highlight: var(--kfe-accent); --kfe-on-dark: var(--e-global-color-52c4f748); --kfe-on-dark-soft: var(--e-global-color-305a500b); --kfe-accent-deep: var(--e-global-color-4323d781); --kfe-link: var(--kfe-accent); /* layout */ --kfe-max: 1140px; --kfe-gutter: 24px; --kfe-section-pad: 70px; --kfe-radius-card: 12px; --kfe-radius-media: 12px; --kfe-card-lift: none; /* buttons — ADR-0010 decision 6's role styles, as tokens */ --kfe-btn-radius: 8px; --kfe-btn-pad: 15px 26px; --kfe-btn-size: 16px; --kfe-btn-weight: 600; --kfe-btn-tracking: 0; --kfe-btn-transform: none; --kfe-btn-font: var(--e-global-typography-primary-font-family); --kfe-btn-ink: var(--e-global-color-secondary); --kfe-btn-solid: var(--kfe-accent); --kfe-btn-lift: none; --kfe-btn-shadow: none; /* The header's own height, MEASURED on ee-build at 1440 with this lane's own header document — `.kfe-site-header-bar`'s bounding box, qa/shots/chrome.mjs, 2026-09-19 — and not the 68px K6's harness read with a shorter menu. The split header's fold reads it. The reference's own header wrapper is 94px at this width and 57px at 390. RE-MEASURED against the served page after the window's last document write, with this sheet live, four pairs: same figure. */ --kfe-header-h: 75px; /* the mobile H1's display face (post-323.css:642-643). post 323 declares no @font-face for it, so the reference most likely renders Georgia; the stack keeps the intent and falls back the same way. */ --kfe-display-font: "Cormorant Garamond", Georgia, "Times New Roman", serif; /* the suitability test on every page but the home page (added 2026-09-25, w4.quiz-pages.1): kf-elements' kfe_quiz on /synstest/ (vision test) in the SITE's kit, not the home page's serif and palette, which §4 keeps to body.home. Each property is bound to the kit global nearest ee-ref's value (ref727.html :239-292); §4.5 sets every one of these again, so none reaches the home page. Left UNSET here, so the pack's own default applies, because no kit global is near ee-ref's value: -serif (the kit's heading face), -ring (#94A0B8), -rule (#C4D2EE), -shadow, -alert (#A8442F), -faint (#94A0B8; unset on the home page too, the operator's answer of 2026-09-25), -light, -focus, -link and -link-decoration (the pack's underline). */ --kfe-quiz-accent: var(--e-global-color-accent); /* ee-ref's gold #1E419A, exactly */ --kfe-quiz-accent-deep: var(--e-global-color-4323d781); /* EE Accent deep #16307A for gold-deep #14306E */ --kfe-quiz-head-muted: var(--e-global-color-ce38a589); /* EE Muted #4A5763 for #5E6B85 */ --kfe-quiz-ink-soft: var(--e-global-color-ce38a589); /* EE Muted #4A5763 for #33405C */ } @media (max-width: 900px) { body .kfe { --kfe-section-pad: 52px; } } @media (max-width: 767px) { /* MEASURED at 390 the same way, and re-measured against the served page: 61px over one row, with the phone-bar rule above. Without that rule the same page reads 108px over two — both figures printed by the same run. */ body .kfe { --kfe-header-h: 61px; } } /* ========================================================================== 4. The home page — body.home (added 2026-09-24, ADR-0010's amendment; w2.homepage.1, #355) -------------------------------------------------------------------------- The operator ruled on 2026-09-24 that the home page match ee-ref's (post 727) FULLY: the photo hero, the age question, both branches, the final booking band and "the home page's own serif headings". This block is that page's look, and it is the child theme's FIRST page-scoped rule: `body.home`, which WordPress adds for is_front_page() — the same condition functions.php uses to enqueue the serif — so the look and its font can never apply to different pages. Inside it, the page's OWN document, `[data-elementor-type="wp-page"]`: the header and the footer are kf-elements widgets too, in their theme-builder documents, and the operator ruled that our site header and footer stay — so nothing here reaches them on the front page either. TOKENS, NOT RULES ON PACK CLASSES (kf-elements #170's contract). Every value below is a --kfe-* token the pack reads, set on the widget's own `.kfe` or on its section, scoped per section by the classes the pack prints (`layout-photo`, `side-above`, a `:has()` on the part a section carries). The values are ee-ref's own (`tmp/lane-kit/waves/w2/scouts/homepage-ref.md` §3, R:NNN = the saved widget HTML's line), and the colours are the kit's globals where the kit has ee-ref's colour and §0's `--ee-home-*` where it does not. The two exceptions are drawn in §4.4: ee-ref's four ornaments, which no pack shape builds (kf-elements #170, decision (c)). ========================================================================== */ /* 4.1 The page: ee-ref's serif, its palette and its frame (R:6-R:15, R:34-R:41, R:134). */ body.home [data-elementor-type="wp-page"] .kfe { --kfe-font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif; --kfe-heading-weight: 500; --kfe-h3-weight: 600; --kfe-heading: var(--ee-home-ink); --kfe-ink: var(--ee-home-ink); --kfe-muted: var(--ee-home-muted); --kfe-body: var(--ee-ink-soft); --kfe-primary: var(--e-global-color-997fdf84); /* navy #0B1E4D */ --kfe-primary-deep: var(--e-global-color-997fdf84); --kfe-accent: var(--e-global-color-accent); /* ee-ref's "gold", #1E419A */ --kfe-surface: var(--e-global-color-1bd94c38); /* cream #F2F5FB */ --kfe-surface-deep: var(--e-global-color-0628e434); /* cream-deep #E6ECF7 */ --kfe-line: var(--ee-home-line); --kfe-on-dark-soft: var(--ee-line-cta); /* gold-soft #C4D2EE */ --kfe-title-measure: none; --kfe-label-color: var(--ee-home-gold-deep); /* .eyebrow R:13 */ --kfe-label-size: 11px; --kfe-label-tracking: 0.32em; --kfe-label-weight: 600; --kfe-title-accent-color: var(--ee-home-gold-deep); /* .serif-i R:15 */ --kfe-title-accent-on-dark: var(--ee-line-cta); --kfe-rule-key: var(--ee-home-gold-deep); --kfe-facts-color: var(--ee-home-gold-deep); --kfe-btn-radius: 2px; /* .btn R:34 */ --kfe-btn-pad: 15px 30px; --kfe-btn-size: 13px; --kfe-btn-weight: 600; --kfe-btn-tracking: 0.06em; --kfe-btn-solid: var(--kfe-accent); --kfe-btn-line: var(--ee-home-ink); --kfe-section-pad: 88px; /* .pad R:134 */ --kfe-max: 1180px; /* .wrap R:12 */ --kfe-gutter: 32px; --kfe-radius-card: 4px; --kfe-shadow-card: var(--ee-home-shadow); --kfe-path-tag-color: var(--ee-home-gold-deep); /* the age cards R:497-R:513 */ --kfe-path-ring: var(--ee-line-cta); --kfe-path-card-hover-border: var(--ee-line-cta); --kfe-path-claim-weight: 500; --kfe-faq-fold-color: var(--ee-home-gold-deep); /* the orchestrator's (a): the Nyhavn photograph at its natural height, as on ee-ref */ --kfe-photo-height: auto; /* the orchestrator's (b): ee-ref's dark player frame for the SMILE animation before consent */ --kfe-video-placeholder-ground: var(--ee-home-film); --kfe-video-placeholder-border: 0; --kfe-video-placeholder-shadow: var(--ee-home-shadow); /* the role styles' (§2) home values, read through their own tokens */ --ee-cta-radius: 2px; --ee-cta-tracking: 0.06em; } @media (max-width: 760px) { body.home [data-elementor-type="wp-page"] .kfe { --kfe-section-pad: 56px; } /* R:135 */ } /* 4.2 Section by section, in ee-ref's order. */ /* S1 + S2, the photo hero and its centred H1 band (R:541-R:561, R:622-R:623) */ body.home [data-elementor-type="wp-page"] .kfe .kfe-page-header.layout-photo { --kfe-heading: var(--e-global-color-997fdf84); --kfe-heading-weight: 600; --kfe-title-size: clamp(36px, 6vw, 68px); --kfe-body-size: clamp(16px, 1.6vw, 20px); --kfe-places-label-color: var(--ee-home-gold-deep); --kfe-places-color: var(--ee-ink-soft); } /* S3, the age question (R:492-R:513) */ body.home .elementor-widget-kfe_path_chooser .kfe { --kfe-title-size: clamp(30px, 4.6vw, 50px); } /* the two strips (R:52-R:53, R:40) */ body.home [data-elementor-type="wp-page"] .kfe:has(.kfe-cta-rating) { --kfe-cta-actions-gap: 0px; --kfe-btn-solid: var(--ee-home-red); --kfe-btn-pad: 10px 18px; --kfe-btn-size: 12px; } /* S4 and S15, the trust bands: the pillars' panel, the serif statement (R:297, R:395-R:402) */ body.home [data-elementor-type="wp-page"] .kfe:has(.kfe-text-pillars) { --kfe-title-size: clamp(30px, 4.6vw, 52px); --kfe-h3-weight: 700; --kfe-pillar-title-size: clamp(22px, 2.4vw, 28px); --kfe-lead-font: var(--kfe-font-heading); --kfe-lead-style: italic; --kfe-lead-weight: 500; --kfe-lead-size: clamp(17px, 2vw, 23px); --kfe-lead-color: var(--ee-home-gold-deep); } /* S5 and S16, the surgeons (R:348): the bios at `.doc-bio`'s 12.5px (R:462) in both halves, set on the cards and nothing above them — on the widget's `.kfe` the same token shrank S5's lead and S16's two USP lines with them (the second push's strips, 2026-09-24); the title in the 45+ half only, because the 18-45 half's `.eyebrow + h2` scale (4.3) sizes S16's */ body.home .elementor-widget-kfe_feature_grid .kfe:has(.kfe-feature-grid-avatar) .card { --kfe-body-size: 12.5px; } body.home .elementor-widget-kfe_feature_grid:not(.kfe-path-smile) .kfe:has(.kfe-feature-grid-avatar) { --kfe-title-size: clamp(28px, 4vw, 46px); } /* S10 and S20, the treatment cards' tag line (`.eev4 .card .tag`, R:159: 11px gold-deep capitals). The pack's tag rule sets 11px and the accent, but `.kfe … .card p` (base.css:585, (0,3,1)) outranks it (:654, (0,3,0)) and hands the `p.kfe-feature-grid-tag` the body size and colour through `--kfe-body-size` and `--kfe-body` — so they are set on the tag itself (fix round, 2026-09-24; the weight and the tracking have no token: §5 of qa/ph5-home.md) */ body.home .elementor-widget-kfe_feature_grid .kfe-feature-grid-tag { --kfe-body-size: 11px; --kfe-body: var(--ee-home-gold-deep); } /* S6 and S17, the folded FAQ (R:75-R:90) */ body.home .elementor-widget-kfe_faq .kfe { --kfe-title-size: clamp(26px, 3.6vw, 38px); } /* S7, the explain block with the facts (R:142) */ body.home [data-elementor-type="wp-page"] .kfe .kfe-split-media.side-above { --kfe-title-size: clamp(34px, 4.6vw, 54px); } /* S8, the film poster with its caption over the top (R:483) */ body.home [data-elementor-type="wp-page"] .kfe:has(.caption-over-top) { --kfe-title-size: clamp(26px, 3.4vw, 42px); } /* S9, S10 and S11: ee-ref's `.sec-head h2` (R:137), in the 45+ half only — their 18-45 twins S19, S20 and S21 take the half's own `.eyebrow + h2` scale (4.3) */ body.home .elementor-widget-kfe_steps:not(.kfe-path-smile) .kfe, body.home .elementor-widget-kfe_feature_grid:not(.kfe-path-smile) .kfe:not(:has(.kfe-feature-grid-avatar)), body.home .elementor-widget-kfe_cta.kfe-path-presby .kfe:not(:has(.kfe-cta-rating)) { --kfe-title-size: clamp(36px, 5vw, 60px); } /* The eyebrow of a `.sec-head` section — S9, S10, S11 and their twins — and of the final band. ee-ref writes it `p.eyebrow` inside `.sec-head` (or `.final`), and `.eev4 .sec-head p` (R:138, (0,2,1); `.eev4 .smile-path .sec-head p` R:566, (0,3,1)) and `.eev4 .final p` (R:227) out-specify `.eev4 .eyebrow` (R:13, (0,2,0)): so those eyebrows render at 17px, weight 300, in the muted grey, keeping only the eyebrow's capitals and tracking. Read off the reference's strips at 1440, 820 and 390 on 2026-09-24, not assumed from the eyebrow rule. The cta widgets carry §2b's label tokens on `.kfe-cta` itself, so theirs are set there. */ body.home .elementor-widget-kfe_steps .kfe, body.home .elementor-widget-kfe_feature_grid .kfe:not(:has(.kfe-feature-grid-avatar)), body.home [data-elementor-type="wp-page"] .kfe .kfe-cta { --kfe-label-size: 17px; --kfe-label-weight: 300; --kfe-label-tracking: 0.32em; --kfe-label-color: var(--ee-home-muted); } /* S9 and S19, the steps: the head at the start above 760px and centred under it (R:643). The record's `head_align: left` is written by Elementor per instance as `.elementor-779 .elementor-element .elementor-element- .kfe { --kfe-head-align: start }`, (0,4,0), which beat this rule while it read (0,3,1): the heads stayed at the start at 390 (read off the fix round's strips, 2026-09-24). `.elementor-element` compounded on the widget takes it to (0,4,1). */ @media (max-width: 760px) { body.home .elementor-element.elementor-widget-kfe_steps .kfe { --kfe-head-align: center; } } /* S12 and S22, the consult card: navy, serif ticks in a 780px column, a red button (R:336-R:344) */ body.home .elementor-widget-kfe_checklist .kfe { --kfe-title-size: clamp(28px, 4vw, 46px); --kfe-list-font: var(--kfe-font-heading); --kfe-checklist-measure: 780px; --kfe-checklist-measure-margin: auto; --ee-cta-deep-fill: var(--ee-home-red); --ee-cta-deep-fill-hover: var(--ee-home-red-deep); } /* At 900px and below the pack stacks the ticks into one column (checklist.css:118), and a 780px measure is wider than the card there, so nothing centred: the measure shrinks to the lines and the auto margin centres the column under the centred head and button (fix round, 2026-09-24). ee-ref keeps three across at 820 and centres each line when stacked — neither is a token (§5). */ @media (max-width: 900px) { body.home .elementor-widget-kfe_checklist .kfe { --kfe-checklist-measure: max-content; } } /* S23, the final booking band on ink (R:224-R:230) */ body.home .elementor-widget-kfe_cta:not(.kfe-path) .kfe { --kfe-title-size: clamp(40px, 6vw, 72px); --kfe-primary-deep: var(--ee-home-ink); --kfe-body-measure: 40ch; /* `.eev4 .final p{max-width:40ch}` (R:227) */ } /* 4.3 The 18-45 branch's own heading scale (R:618-R:630): its eyebrow LARGER than the h2 under it, a large trust title, and the hero's own H2 and serif lead. Last, so it wins where it applies. Every token here is set on the widget's `.kfe`, where the pack's own `title_size` control writes `--kfe-title-size` (`{{WRAPPER}} .kfe`), and on nothing below it: a token set on `.kfe-section` inherits past every per-section rule above, which is how the first push drew "Slip brillerne" and the 18-45 trust title at 20px (read off the strips, 2026-09-24). `.kfe-path-smile` is a class ON the widget element, so it is compounded with the widget's own class, never a descendant of it. */ body.home .kfe-path-smile .kfe { --kfe-label-size: clamp(20px, 3.4vw, 30px); --kfe-label-tracking: 0.08em; --kfe-label-weight: 700; --kfe-title-size: clamp(15px, 2.3vw, 20px); } /* S17, the FAQ card: no eyebrow before its h2, so `.eev4 .smile-path h2` (R:619) and not `+ h2` */ body.home .elementor-widget-kfe_faq.kfe-path-smile .kfe { --kfe-title-size: clamp(20px, 3.4vw, 30px); } /* S19, S20 and S21: `.sec-head` eyebrows (see 4.2), at this half's .08em tracking */ body.home .elementor-widget-kfe_steps.kfe-path-smile .kfe, body.home .elementor-widget-kfe_feature_grid.kfe-path-smile .kfe:not(:has(.kfe-feature-grid-avatar)), body.home .elementor-widget-kfe_cta.kfe-path-smile .kfe .kfe-cta { --kfe-label-size: 17px; --kfe-label-weight: 300; --kfe-label-tracking: 0.08em; --kfe-label-color: var(--ee-home-muted); } body.home .kfe-path-smile .kfe:has(.kfe-text-pillars) { --kfe-title-size: clamp(33px, 5.4vw, 58px); --kfe-heading-weight: 600; --kfe-lead-size: clamp(19px, 2.5vw, 27px); } body.home #kfe-path-smile .kfe { --kfe-title-size: clamp(40px, 6vw, 72px); --kfe-heading-weight: 600; --kfe-heading: var(--e-global-color-997fdf84); --kfe-title-accent-style: normal; /* ee-ref's `span.hl-gold`: gold-deep, upright */ --kfe-lead-font: var(--kfe-font-heading); --kfe-lead-weight: 600; --kfe-lead-size: clamp(22px, 3vw, 34px); --kfe-lead-color: var(--ee-home-ink); --kfe-lead-line-height: 1.16; } /* 4.4 ee-ref's four ornaments (kf-elements #170, decision (c)): drawn here because no pack shape builds them, each under body.home and each on the section the reference draws it on. */ /* (1) the short rule under the surgeons' heading (`span.intro-rule`, R:348 area) */ body.home .elementor-widget-kfe_feature_grid .kfe:has(.kfe-feature-grid-avatar) h2::after { content: ""; display: block; width: 50px; height: 2px; margin: 22px auto 0; background: linear-gradient(90deg, transparent, var(--kfe-accent), transparent); } /* (2) the trust rule over the 18-45 trust title (`span.trust-rule`, R:1009) */ body.home .kfe-path-smile .kfe:has(.kfe-text-pillars) h2::before { content: ""; display: block; width: 56px; height: 3px; margin: 0 auto 24px; border-radius: 3px; background: linear-gradient(90deg, var(--ee-line-cta), var(--ee-home-gold-deep)); } /* (3) the final band's radial orb (`div.orb`, R:225) */ body.home .elementor-widget-kfe_cta:not(.kfe-path) .kfe-section { position: relative; overflow: hidden; } body.home .elementor-widget-kfe_cta:not(.kfe-path) .kfe-section::before { content: ""; position: absolute; top: -200px; left: 50%; width: 600px; height: 600px; transform: translateX(-50%); background: radial-gradient(circle, var(--ee-home-orb), transparent 60%); pointer-events: none; } body.home .elementor-widget-kfe_cta:not(.kfe-path) .kfe-section > * { position: relative; } /* (4) the fixed film grain over the whole page (`.eev4::before`, R:11) */ body.home::after { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0.022; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* 4.5 The suitability test, S11 and S21 (added 2026-09-25, w4.quiz-pages.1; #403, refs #386): ee-ref's `section.quiz` (the `EIGNUNGSTEST` block, German for suitability test; ref727.html:239-292) as kf-elements' kfe_quiz. The widget reads fourteen widget-scoped properties (quiz.css:16-35 at 0d41610); each is set here to ee-ref's value, as §4.1 sets the pack's: the kit's global or §4.1's token where they hold it, §0's --ee-home-* where they do not. -faint is left unset by the operator's answer of 2026-09-25 (the disclaimer is readable), so the pack's --kfe-muted draws it where ee-ref draws --muted-2 #94A0B8; -focus is left unset because ee-ref draws the browser's own ring on the quiz (its one :focus rule, :645, is the unbuilt gate's inputs). Same selector as 4.1, so the site token map's quiz lines never reach this page. */ body.home [data-elementor-type="wp-page"] .kfe { --kfe-quiz-serif: var(--kfe-font-heading); /* --serif (R:6): legends, toggle, result title */ --kfe-quiz-accent: var(--kfe-accent); /* --gold #1E419A: the plus ring (:83), a hover border (:253), the filled circle (:254, :256) */ --kfe-quiz-accent-deep: var(--ee-home-gold-deep); /* --gold-deep #14306E: the plus glyph (:83), the numbers (:260), the chosen answer (:255-256), the result label (:281), the toggle's hover (:269) */ --kfe-quiz-head-muted: var(--ee-home-muted); /* --muted #5E6B85: the eyebrow and lede (`.sec-head p`, :138) */ --kfe-quiz-ink-soft: var(--ee-ink-soft); /* --ink-soft #33405C: the answers (:251), the reason (:284) */ --kfe-quiz-ring: var(--ee-home-muted-2); /* --muted-2 #94A0B8: the empty circle (:252) */ --kfe-quiz-rule: var(--ee-line-cta); /* --gold-soft #C4D2EE: the result card's top rule (:265) */ --kfe-quiz-shadow: var(--ee-home-shadow); /* --shadow: the result card (:264) */ --kfe-quiz-alert: var(--ee-home-alert); /* #a8442f: the missing-answer line (:262) */ --kfe-quiz-light: 300; /* the lede (:138), the reason (:284), the small print (:291), the disclaimer (:277) */ --kfe-quiz-link: var(--ee-home-ink); /* `.eeq-more` (:645) has no colour of its own: the card's --ink (R:10) */ --kfe-quiz-link-decoration: none; /* ee-ref draws `.eeq-more` with no underline (measured on its page, kf-elements w4.quiz.1 R2.5) */ } /* S11's heading, the first instance: ee-ref's `.sec-head h2` (ref727.html:137), which would otherwise fall to the site map's 30px --kfe-h2-size. Scoped to the 45+ branch's class, as 4.2 scopes that half, so it can never reach S21: the SMILE instance's heading takes 4.3's `.eyebrow + h2` clamp (clamp(15px, 2.3vw, 20px), ref727.html:619), which this block does not touch. */ body.home .elementor-widget-kfe_quiz.kfe-path-presby .kfe { --kfe-title-size: clamp(36px, 5vw, 60px); } /* Both instances' two buttons (*Vis mit resultat →*, show my result, and the booking button) are ee-ref's base `.btn` (ref727.html:34: 12px, padding 10px 18px), not the hero's larger pair that §4.1 sets page-wide (R:551-R:552); the radius, tracking and weight are §4.1's already, as the strips' rule in 4.2 does it. */ body.home .elementor-widget-kfe_quiz .kfe { --kfe-btn-pad: 10px 18px; --kfe-btn-size: 12px; } /* ========================================================================== 5. The final window's fixes (added 2026-09-25, wp-eedk #427 and #430) ========================================================================== */ /* 5.1 A stacked section that ends on the closing band (#427 item 5). build.php writes an `after` widget's section padding as 0/0, because it sits in its primary's container under the primary's own bottom padding. When that stack is the last thing before the page's call-to-action band, its last line sits flush on the band: aalborg-klinik's *Vores andre klinikker* (our other clinics) list, whose Copenhagen twin has a gallery section between it and the band. This gives such a last widget the section's own bottom padding back, the site's --kfe-section-pad (70px, 52px at 900px and below). Scoped to a container of two or more widgets directly followed by a container holding kfe_cta, so no other stack moves: on 2026-09-25 aalborg-klinik is the one DA page that matches, and aarhus-klinik joins it once its empty *Indenfor i klinikken* (inside the clinic) gallery is gone from the record (#369). (0,9,1) beats Elementor's per-element (0,4,0) rule without an importance flag. */ body .e-con:has(> .elementor-widget + .elementor-widget:last-child):has(+ .e-con > .elementor-widget-kfe_cta) > .elementor-widget:last-child .kfe { --kfe-section-pad-end: var(--kfe-section-pad); } /* 5.2 The site's 404 (#430): 404.php, inside `.kfe` so the role styles of §2 draw its buttons. The ground, the centred head and the 96px band are the thank-you shells' (templates/thank-you.json: surface ground, centred, section_padding 96); the heading steps are page-header.css's three (44, 38, 32: generator/components.json title_size_note). */ .ee-404 .ee-404-band { background-color: var(--ee-mist); padding: 96px var(--kfe-gutter, 24px); text-align: center; } .ee-404 .ee-404-wrap { max-width: 720px; margin: 0 auto; } .ee-404 .ee-404-eyebrow { color: var(--ee-text); font-family: var(--e-global-typography-primary-font-family, inherit); font-size: 11.5px; font-weight: 700; letter-spacing: 0.17em; margin: 0 0 14px; text-transform: uppercase; } .ee-404 .ee-404-title { color: var(--ee-ink); font-family: var(--e-global-typography-primary-font-family, inherit); font-size: 44px; font-weight: 700; line-height: 1.14; margin: 0 0 16px; overflow-wrap: break-word; } .ee-404 .ee-404-lede { color: var(--ee-text); font-family: var(--e-global-typography-text-font-family, inherit); font-size: 18.5px; line-height: 1.62; margin: 0 auto 32px; max-width: 560px; } .ee-404 .ee-404-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } .ee-404 .ee-404-links { display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: center; list-style: none; margin: 28px 0 0; padding: 0; } .ee-404 .ee-404-links a { color: var(--ee-accent); font-family: var(--e-global-typography-text-font-family, inherit); font-size: 16px; text-decoration: underline; text-underline-offset: 3px; } .ee-404 .ee-404-links a:hover { color: var(--ee-accent-deep); } @media (max-width: 1024px) { .ee-404 .ee-404-title { font-size: 38px; } } @media (max-width: 767px) { .ee-404 .ee-404-band { padding: 64px 16px; } .ee-404 .ee-404-title { font-size: 32px; } .ee-404 .ee-404-lede { font-size: 16.5px; } .ee-404 .ee-404-actions .kfe-btn { width: 100%; } } /* ========================================================================== 6. The final window's fixes, round two (added 2026-09-25, wp-eedk #367 and #371) ========================================================================== */ /* 6.1 An inline link in widget prose that no pack rule reaches (#367). Hello Elementor's reset.css sets `a { color: #c36 }`, and kf-elements colours a prose link only in the regions it names (base.css's `.body`, the text column and block, the list, each widget's intro). Three regions it does not name carry links in corpus/da, and each rendered the reset's pink, measured rgb(204, 51, 102) on ee-build on 2026-09-25: - `kfe_checklist`'s intro (and its outro, the same markup): *tørre øjne* (dry eyes) on /icl-linser/; - `kfe_feature_grid`'s card body: *grå stær* (cataract) on /sloeret-syn/; - `kfe_faq`'s answer, which the walker cannot see because an answer is closed until clicked: *prisside* (price page) on both vision-options pages (synsmuligheder-18-45, -45-plus), *Kontakt os* (contact us) on /informationsaftener/ and every other answer with a link (faq.css:136 leaves it to "the lane that owns base.css"). Each takes the site's link token, and the dark flip the pack's own rules carry. `:not([class])` for the pack's reason (base.css, "a link in a widget's OWN body copy"): an inline prose anchor has no class, so a button or an arrow link in the same region keeps its own rule. */ body .kfe .kfe-checklist-intro a:not([class]), body .kfe .kfe-checklist-outro a:not([class]), body .kfe .kfe-feature-grid .card p a:not([class]), body .kfe .kfe-faq .answer a:not([class]) { color: var(--kfe-link); } body .kfe .kfe-checklist.kfe-dark .kfe-checklist-intro a:not([class]), body .kfe .kfe-checklist.kfe-dark .kfe-checklist-outro a:not([class]), body .kfe .kfe-faq.kfe-dark .answer a:not([class]) { color: var(--ee-white); } /* 6.2 The compare table as cards on a phone (#371). Under 768px the pack keeps the table at 560px and scrolls it inside its wrap, which cut the four columns at the screen's edge on both vision-options pages (synsmuligheder-18-45, -45-plus). inc/compare-stack.php labels each body cell with its column heading and marks the table `ee-stack`; here each row becomes one card: the first cell (the option) as its title, every other cell under its own small heading. Only a marked table stacks, so a table the filter did not reach keeps the pack's scroll. The card is the table's own chrome: its line, its radius, its white ground. */ @media (max-width: 767px) { body .kfe .kfe-compare-table .kfe-compare.ee-stack, body .kfe .kfe-compare-table .kfe-compare.ee-stack tbody, body .kfe .kfe-compare-table .kfe-compare.ee-stack tr, body .kfe .kfe-compare-table .kfe-compare.ee-stack td { display: block; } body .kfe .kfe-compare-table .kfe-compare.ee-stack { min-inline-size: 0; background: none; border: 0; border-radius: 0; overflow: visible; } body .kfe .kfe-compare-table .kfe-compare.ee-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } body .kfe .kfe-compare-table .kfe-compare.ee-stack tr { background: var(--kfe-white); border: 1px solid var(--kfe-line); border-radius: var(--kfe-radius-card); overflow: hidden; } body .kfe .kfe-compare-table .kfe-compare.ee-stack tr + tr { margin-top: 14px; } /* No zebra on a card: Hello's reset tints every odd row's cells, which the table wants and a stack of cards does not (every card reads the same). */ body .kfe .kfe-compare-table .kfe-compare.ee-stack td { padding: 10px 16px; font-size: 15px; background: transparent; } body .kfe .kfe-compare-table .kfe-compare.ee-stack td:first-child { padding-block: 14px 12px; border-top: 0; font-size: 17px; white-space: normal; } body .kfe .kfe-compare-table .kfe-compare.ee-stack td[data-label]:not(:first-child)::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--kfe-heading); } } /* ========================================================================== 7. The final window's fixes, round three (added 2026-09-25, wp-eedk #371) ========================================================================== */ /* 7.1 A compare table's closing note (#371). On ee-ref, /synsmuligheder-45-plus/ (vision options, 45 plus) prints *Ved alle fire fjernes den naturlige linse …* (with all four, the natural lens is removed …) under its table, inside the table's own section, 20px below it and at 15px (ref vo453: `

`). kfe_compare_table has no field after the table, so the record carries the note as an untitled text-section right after the compare-table section (corpus/da/synsmuligheder-45-plus.json sections[5], and its EN and DE twins). Here that pair closes up: the table's section gives up its bottom padding, the table its 15px bottom margin (Hello Elementor's reset.css `table { margin-block-end: 15px }`, which the table's scrolling wrap contains), and the note starts 20px under the table, at 15px, keeping its own bottom padding before the next band. Scoped to a compare-table container DIRECTLY followed by a container whose text-section has no head (its text column is the wrap's first child), so /cookies/ (the cookie declaration), whose last table is followed by a TITLED legal text-section, does not move. On 2026-09-25 the 45-plus page and its two twins are the only records that match. */ body .e-con:has(> .elementor-widget-kfe_compare_table):has(+ .e-con > .elementor-widget-kfe_text_section .kfe-wrap > .kfe-text-col:first-child) > .elementor-widget-kfe_compare_table .kfe { --kfe-section-pad-end: 0px; } body .e-con:has(> .elementor-widget-kfe_compare_table):has(+ .e-con > .elementor-widget-kfe_text_section .kfe-wrap > .kfe-text-col:first-child) > .elementor-widget-kfe_compare_table .kfe-compare { margin-block-end: 0; } body .e-con:has(> .elementor-widget-kfe_compare_table) + .e-con > .elementor-widget-kfe_text_section .kfe:has(.kfe-wrap > .kfe-text-col:first-child) { --kfe-section-pad-start: 20px; --kfe-body-size: 15px; } /* ========================================================================== 8. The final window's fixes, round four (added 2026-09-25, wp-eedk #368) ========================================================================== */ /* 8.1 The founder quote card between 900px and 821px (#368). kfe_testimonials' card layout lifts its cut-out portrait above the card by --kfe-card-rise (144px) with a negative margin, which reserves no space: the rise lands in this section's top padding and the section before's bottom padding. At 1440 those are 70px + 70px and the portrait's head clears the line above by 2px (the design). §3 drops --kfe-section-pad to 52px at 900px and below, but the pack keeps the card in two columns down to 821px and reserves the rise only from 820px (testimonials.css, its 820px block). Between the two the paddings give 104px for a rise of up to 144px, and at 860 the portrait covered the last line of the section above on /linseudskiftning/ (lens replacement) and /skeleoperation/ (squint surgery), whose short quotes make the lowest cards and so the highest rise (140px, final read 3). Here the card reserves its own rise from where the padding drops, exactly as the pack does at 820px: the wrap becomes a flex column, so the reservation adds to what stands above instead of collapsing into it, and a card with a portrait keeps --kfe-card-rise free above itself. The pack's token when it declares one, its 144px otherwise. Bounded at 821px so the pack's own rule alone governs 820px and below; 1440 is outside the query. */ @media (min-width: 821px) and (max-width: 900px) { body .kfe .kfe-testimonials.layout-card > .kfe-wrap { display: flex; flex-direction: column; } body .kfe .kfe-testimonials.layout-card .tcard:not(.no-media) { margin-top: var(--kfe-card-rise, 144px); } }