/* Theme Name: Last Minute Bookings Theme URI: https://lastminutebookings.app/ Description: Child theme for Last Minute Bookings. Holds the brand token layer and the component stylesheet. Built by XAPP Design. Author: XAPP Design Author URI: https://xappdesign.com/ Template: hello-elementor Version: 1.0.0 Text Domain: lmb */ /* ========================================================================== TOKEN LAYER — the single source of truth for the brand ========================================================================== HOW THE ELEMENTOR BRIDGE WORKS Three tokens read from Elementor's Global Colors, with the hex as a fallback: --ink <- Global Colors > Primary --ink-soft <- Global Colors > Text --accent-text <- Global Colors > Secondary Change Primary in Elementor > Site Settings > Global Colors and every component in components.css follows, with no code edit. The fallback means the site still renders correctly if Elementor is deactivated. WHY THE BRIDGE IS ON body AND NOT :root This is the part that is easy to get wrong, and it fails silently. Elementor does not publish its kit variables globally. It scopes them to the active kit's own class — `.elementor-kit-6 { --e-global-color-primary: ... }` — and that class is printed on the element. `:root` is the element, the *parent* of . Custom properties inherit downward only, so at :root the kit variables are not yet in scope. A bridge declared there resolves to its fallback every single time: the site looks correct, so nothing appears broken, but changing a Global Color moves nothing. So the literal values live on :root, and the three bridged tokens are re-declared on body, where the kit variables exist. A declaration on body overrides the value body would otherwise inherit from :root, which is exactly what we want. If Elementor is absent, the var() falls back to the same hex as :root and nothing changes. WHY ONLY THREE Elementor gives stable, readable variable names to exactly four system colors: --e-global-color-primary, -secondary, -text and -accent. Any custom global color you add gets a generated hash instead, like --e-global-color-7deaba8, and that hash is regenerated when the kit is recreated. It will therefore differ between staging and production, so a stylesheet that depends on one breaks at migration. We bind only to the named four and keep everything else as literal values here. The fourth slot, Accent, is deliberately set to the same ink as Primary so Elementor's button widget renders correctly with no configuration. It is not bridged, because nothing needs to read it. EDITING ANYTHING ELSE The semantic and tag colors below are literal on purpose. Nobody is ever going to want to change the discount badge amber through a UI, and exposing them would mean nine more hash-dependent variables. Edit them here. ========================================================================== */ :root { /* ---- Core ink --------------------------------------------------------- Literal values, and the fallbacks the bridge below resolves to. Keep these in step with the Global Colors listed in ELEMENTOR-SETUP.md. */ --ink: #1d1d1f; --ink-soft: #6e6e73; --accent-text: #d70015; /* ---- Surfaces --------------------------------------------------------- */ --bg: #ffffff; --bg-soft: #f5f5f7; --bg-tint: rgba(255, 255, 255, 0.72); --bg-dark: #000000; /* ---- Ink, continued --------------------------------------------------- */ --ink-faint: #86868b; --line: rgba(0, 0, 0, 0.08); --line-strong: rgba(0, 0, 0, 0.14); /* ---- Accent ---------------------------------------------------------- --accent is pure red, reserved for the pulsing logo dot, the radial glows and the large calculator numeral. It measures 4.00:1 on white and fails WCAG AA, so it must never be used for small text. --accent-text above is the accessible equivalent at 5.38:1. */ --accent: #ff0000; --accent-glow: rgba(255, 0, 0, 0.25); /* ---- Semantic badges -------------------------------------------------- */ --live-bg: #ffe5e5; --live-ink: #d70015; --filled-bg: #e8f5ec; --filled-ink: #0f7a3a; --discount-bg: #fff7e6; --discount-ink: #b25600; /* ---- Stage tags ------------------------------------------------------- */ --tag-new-bg: #e6f4ff; --tag-new-ink: #0055aa; --tag-grow-bg: #fff7e6; --tag-grow-ink: #b25600; --tag-est-bg: #f0ebff; --tag-est-ink: #5e3eb8; /* ---- Layout ---------------------------------------------------------- --container must match Elementor > Site Settings > Layout > Content Width. If you change one, change the other. */ --container: 1080px; --container-narrow: 720px; --gutter: 24px; --radius-pill: 980px; --radius-lg: 28px; --radius-md: 22px; --radius-sm: 14px; /* ---- Type ----------------------------------------------------------- System stack, so nothing is fetched over the network. Elementor's Google Fonts loading should be disabled — see functions.php. */ --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif; } /* ========================================================================== THE ELEMENTOR BRIDGE ========================================================================== Re-declared on body because that is where Elementor prints the kit class that carries --e-global-color-*. See the long note at the top of this file for why :root cannot work. Verify it is live, don't assume: change Primary in Site Settings to something garish and confirm a component moves. There is a ready-made diagnostic in bridge-check.html that does this without needing any page content to exist yet. ========================================================================== */ body { --ink: var(--e-global-color-primary, #1d1d1f); --ink-soft: var(--e-global-color-text, #6e6e73); --accent-text: var(--e-global-color-secondary, #d70015); } /* ========================================================================== ELEMENTOR INTEGRATION Neutralises the builder defaults that would otherwise fight the component layer. Keep this short — if it grows, something is being set in a Style tab that shouldn't be. ========================================================================== */ /* Elementor containers ship with their own padding from the kit. Our .section and .wrap classes own vertical rhythm and gutters, so a container carrying one of them must contribute nothing itself. */ .e-con.section, .e-con.wrap, .e-con.wrap-narrow, .elementor-section.section { --padding-top: 0; --padding-right: 0; --padding-bottom: 0; --padding-left: 0; } /* Elementor wraps every widget in a div that introduces a width constraint inside grid and flex parents. Our grids expect their children to be the cards themselves. */ .fork > .elementor-widget, .stages > .elementor-widget, .features > .elementor-widget, .problems > .elementor-widget, .post-grid > .elementor-widget, .phones > .elementor-widget { width: 100%; max-width: 100%; } /* Heading and text widgets carrying a type class must not inherit the widget's own margin reset battle. */ .elementor-widget-heading .h1, .elementor-widget-heading .section-title, .elementor-widget-heading .article-title, .elementor-widget-heading .waitlist-title, .elementor-widget-heading .fork-title { margin: 0; } /* The block editor and Elementor both emit a wrapper around post content. Applying .prose to that wrapper is what gives Katy's posts the full typographic scale — see ELEMENTOR-SETUP.md, step 7. */ .prose > .elementor-widget-container > *:first-child, .prose > *:first-child { margin-top: 0; }