/* Theme Name: Hello Elementor Child Theme URI: https://github.com/elementor/hello-theme-child Description: Last Minute Bookings. Compatibility and customisation layer. Author: Erish Paolo Vital Template: hello-elementor Version: 1.0.7 Text Domain: hello-elementor-child */ /* ============================================================================ LMB CHILD LAYER v1.0.7 Cascade, lowest to highest: 1. Elementor frontend base CSS 2. Prototype CSS (assets/css/*.css, never edited) 3. This file (compatibility + customisation) 4. Elementor per-element CSS from the panel (always wins) Everything below either sets an Elementor CSS VARIABLE, or sits at a specificity Elementor's own per-element output beats. Panel edits win. ========================================================================= */ /* 1. TOKEN BRIDGE --------------------------------------------------------- On body, never :root. Elementor scopes kit variables to .elementor-kit-{id} which is printed on . A bridge on :root resolves to its fallback forever and Global Colour changes move nothing. Only these four slots have stable variable names. Custom global colours get a regenerated hash and break at migration, so nothing binds to them. */ body { --ink: var(--e-global-color-primary, #1d1d1f); --ink-soft: var(--e-global-color-text, #6e6e73); --accent: var(--e-global-color-secondary, #FE630D); --accent-text: var(--e-global-color-accent, #cf4b01); } /* 2. CONTAINER DEFAULTS --------------------------------------------------- Elementor containers default to display:flex / flex-direction:column. Prototype classes that relied on the CSS defaults have no declaration to raise, so they are declared here. v1.0.1: this was written as --display / --flex-direction so panel edits would win. Measured on the real install and it does not work: Elementor writes --display:flex per element for every container whether or not the Layout control was touched, at 0-3-0, so the variable never survived. Literal properties at 0-3-0, loading after Elementor's base sheet. Consequence: the panel Display and Direction controls do nothing on a container carrying one of these classes. Change the class list here. */ /* Elementor gives every container a default inline and block padding from the kit. The prototype owns its own padding, and with five levels of nesting the default compounds and squeezes the content: it is why the phone mockups lost about 40px and the filter chips wrapped. Zeroed as a VARIABLE, so a padding set in the panel writes --padding-* and still wins. */ .e-con.e-con { --container-default-padding-block-start: 0px; --container-default-padding-block-end: 0px; --container-default-padding-inline-start: 0px; --container-default-padding-inline-end: 0px; } /* Structural wrappers: block, as in the prototype */ .e-con.e-con:is(.article-footer, .article-head, .nav, .nav--over, .footer, .footer--dark, .bandwait, .bandwait-inner, .bandwait-media, .bhero-copy, .bhero-inner, .bhero-media, .bhero-scrim, .calc-divider, .calc-row-big, .contact-card, .error-page--img, .faq-group, .faq-item, .feature, .filmband, .footer-brand, .footer-col, .form-card, .glass-card, .glass-card-bg, .grain, .hero-visual, .legal-notice, .legal-toc, .lightbox-inner, .p-divider, .p-hero, .page-hero, .page-hero--img, .page-hero--plain, .ph-media, .phone, .phone-caption, .phone-head, .phones--3, .phones--4, .plate, .plate--21x9, .plate--4x5, .plate--fill, .plate--sq-corners, .problem-col, .prose, .section, .section--flush-bottom, .section--flush-top, .section--soft, .section--tight, .seq-item, .spread--flip, .spread-inner, .spread-media, .stage, .statement-copy, .statement-media, .statement-rule, .waitlist, .wrap, .wrap-narrow) { display: block; } /* Rows: flex, explicit direction */ .e-con.e-con:is(.article-byline, .bhero, .board-foot, .board-side, .board-toast, .board-top, .calc-input-wrap, .calc-result, .calc-row, .cat-body, .cat-roadmap, .categories, .chip-row, .cta-row, .error-links, .faq-q, .footer-bottom, .form-row, .lightbox, .marquee-track, .nav-inner, .nav-links, .p-check, .p-filters, .p-kv, .p-row, .pagination, .phone-bar, .post-thumb, .proof-row, .scroll-cue, .slot, .slot-left, .slot-right, .step-glyph, .videoslot-foot, .videoslot-play) { display: flex; flex-direction: row; } /* Grids */ .e-con.e-con:is(.board-slot, .calc, .cat-grid, .contact-aside, .egrid, .features, .footer-cols, .fork, .phones, .post-featured, .post-grid, .problems, .seq, .spread, .stages, .statement, .steps, .steps-v2) { display: grid; } /* v1.0.4: .nav and .footer joined the block list. The header and footer templates are generated from the prototype now, so their layout comes from .nav-inner and .footer-cols rather than from panel settings. */ /* 3. HEADING WIDGET WRAPPERS --------------------------------------------- A CSS class lands on the widget's outer div, not on the heading inside it, so the inner h1-h6 keeps its browser defaults and Elementor's .elementor-widget-heading .elementor-heading-title (0-2-0) leading. Both DOM shapes are covered because Optimized Markup removes .elementor-widget-container from a growing list of widgets. 0-3-0 here. Elementor's per-element heading rule is 0-4-0, so the Style tab still wins. */ .elementor-widget:is(.article-title, .bandwait-title, .display, .faq-group-title, .feature-title, .h1, .post-card-title, .post-featured-title, .section-title, .seq-title, .spread-title, .stage-title, .waitlist-title) > :is(h1, h2, h3, h4, h5, h6, p, span, .elementor-heading-title), .elementor-widget:is(.article-title, .bandwait-title, .display, .faq-group-title, .feature-title, .h1, .post-card-title, .post-featured-title, .section-title, .seq-title, .spread-title, .stage-title, .waitlist-title) > .elementor-widget-container > :is(h1, h2, h3, h4, h5, h6, p, div, span, .elementor-heading-title) { font: inherit; letter-spacing: inherit; line-height: inherit; color: inherit; text-wrap: inherit; margin: 0; padding: 0; } /* Bottom margin. v1.0.1: this was a wrapper rule fighting Elementor's widget margin reset and it lost on the real install. The margin now goes on the inner element, which the rule above already owns at 0-3-0 and Elementor never touches. A margin set in the panel sits on the wrapper and still adds on top of it. */ .elementor-widget.article-title > :is(h1,h2,h3,h4,h5,h6,.elementor-heading-title), .elementor-widget.article-title > .elementor-widget-container > :is(h1,h2,h3,h4,h5,h6,.elementor-heading-title) { margin-block-end: 20px; } .elementor-widget.bandwait-title > :is(h1,h2,h3,h4,h5,h6,.elementor-heading-title), .elementor-widget.bandwait-title > .elementor-widget-container > :is(h1,h2,h3,h4,h5,h6,.elementor-heading-title) { margin-block-end: 18px; } .elementor-widget.faq-group-title > :is(h1,h2,h3,h4,h5,h6,.elementor-heading-title), .elementor-widget.faq-group-title > .elementor-widget-container > :is(h1,h2,h3,h4,h5,h6,.elementor-heading-title) { margin-block-end: 4px; } .elementor-widget.feature-title > :is(h1,h2,h3,h4,h5,h6,.elementor-heading-title), .elementor-widget.feature-title > .elementor-widget-container > :is(h1,h2,h3,h4,h5,h6,.elementor-heading-title) { margin-block-end: 8px; } .elementor-widget.h1 > :is(h1,h2,h3,h4,h5,h6,.elementor-heading-title), .elementor-widget.h1 > .elementor-widget-container > :is(h1,h2,h3,h4,h5,h6,.elementor-heading-title) { margin-block-end: 24px; } .elementor-widget.post-card-title > :is(h1,h2,h3,h4,h5,h6,.elementor-heading-title), .elementor-widget.post-card-title > .elementor-widget-container > :is(h1,h2,h3,h4,h5,h6,.elementor-heading-title) { margin-block-end: 10px; } .elementor-widget.post-featured-title > :is(h1,h2,h3,h4,h5,h6,.elementor-heading-title), .elementor-widget.post-featured-title > .elementor-widget-container > :is(h1,h2,h3,h4,h5,h6,.elementor-heading-title) { margin-block-end: 14px; } .elementor-widget.section-title > :is(h1,h2,h3,h4,h5,h6,.elementor-heading-title), .elementor-widget.section-title > .elementor-widget-container > :is(h1,h2,h3,h4,h5,h6,.elementor-heading-title) { margin-block-end: 20px; } .elementor-widget.seq-title > :is(h1,h2,h3,h4,h5,h6,.elementor-heading-title), .elementor-widget.seq-title > .elementor-widget-container > :is(h1,h2,h3,h4,h5,h6,.elementor-heading-title) { margin-block-end: 10px; } .elementor-widget.spread-title > :is(h1,h2,h3,h4,h5,h6,.elementor-heading-title), .elementor-widget.spread-title > .elementor-widget-container > :is(h1,h2,h3,h4,h5,h6,.elementor-heading-title) { margin-block: 16px 18px; } .elementor-widget.stage-title > :is(h1,h2,h3,h4,h5,h6,.elementor-heading-title), .elementor-widget.stage-title > .elementor-widget-container > :is(h1,h2,h3,h4,h5,h6,.elementor-heading-title) { margin-block-end: 10px; } .elementor-widget.waitlist-title > :is(h1,h2,h3,h4,h5,h6,.elementor-heading-title), .elementor-widget.waitlist-title > .elementor-widget-container > :is(h1,h2,h3,h4,h5,h6,.elementor-heading-title) { margin-block-end: 16px; } /* 4. COMPONENT BRIDGES ---------------------------------------------------- Elementor's Button and Form widgets render their own markup, so a prototype class on the widget wrapper never reaches the element that needs it. Buttons carry no duplicated values. The wrapper keeps the .btn styling it already has from the prototype and the inner anchor is stripped back to a stretched hit area covering the wrapper's padding. Change a button anywhere and both stay in step, because there is only one set of values. 0-2-0, so the Style tab still overrides. */ .elementor-widget:is(.btn, .nav-cta) { position: relative; text-decoration: none; } .elementor-widget:is(.btn, .nav-cta) .elementor-button { all: unset; display: inline-flex; align-items: center; gap: 6px; font: inherit; color: inherit; cursor: pointer; } .elementor-widget:is(.btn, .nav-cta) :is(.elementor-button-content-wrapper, .elementor-button-text) { all: unset; } /* the anchor covers the wrapper's padding, so the whole pill is clickable */ .elementor-widget:is(.btn, .nav-cta) .elementor-button::before { content: ""; position: absolute; inset: 0; border-radius: inherit; } .elementor-widget:is(.btn, .nav-cta):has(.elementor-button:focus-visible) { outline: 2px solid var(--accent-text); outline-offset: 3px; } /* Forms. These values are duplicated from .form-row / .form-input / .form-btn because Elementor's field markup has no element the prototype class can sit on. If the prototype's form styling changes, change it here too. */ .elementor-widget.form-row .elementor-form { width: 100%; } .elementor-widget.form-row .elementor-form-fields-wrapper { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; } .elementor-widget.form-row .elementor-field-group { padding: 0; margin: 0; flex: 1 1 auto; width: auto; min-width: 0; } .elementor-widget.form-row .elementor-field-group.elementor-field-type-submit { flex: 0 0 auto; } /* The inline form is a single field and a button. Labels are for screen readers only, exactly as in the prototype. */ .elementor-widget.form-row .elementor-field-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .elementor-widget.form-row .elementor-form .elementor-field-type-submit .elementor-button-content-wrapper, .elementor-widget.form-row .elementor-form .elementor-field-type-submit .elementor-button-text { color: inherit; } .elementor-widget.form-row .elementor-form .elementor-field-group .elementor-field-textual { width: 100%; padding: 14px 20px; border: none; background: rgba(255, 255, 255, 0.12); color: #fff; border-radius: var(--radius-pill); font-size: 15px; font-family: inherit; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); outline: none; transition: background 0.2s ease; } .elementor-widget.form-row .elementor-form .elementor-field-group .elementor-field-textual::placeholder { color: rgba(255, 255, 255, 0.5); } .elementor-widget.form-row .elementor-form .elementor-field-group .elementor-field-textual:focus { background: rgba(255, 255, 255, 0.18); } .elementor-widget.form-row .elementor-form .elementor-field-type-submit .elementor-button { padding: 14px 24px; background: #fff; color: var(--ink); border-radius: var(--radius-pill); font-weight: 600; font-size: 15px; border: none; white-space: nowrap; transition: transform 0.2s ease; } .elementor-widget.form-row .elementor-form .elementor-field-type-submit .elementor-button:hover { transform: scale(1.03); } @media (max-width: 640px) { .elementor-widget.form-row .elementor-form { width: 100%; } .elementor-widget.form-row .elementor-form-fields-wrapper { flex-direction: column; align-items: stretch; } } /* Nav Menu. The prototype styles .nav-links and its anchors, and both survive on the widget wrapper. Only Elementor's own list chrome needs clearing. */ .elementor-widget.nav-links .elementor-nav-menu { display: flex; align-items: center; gap: 28px; } .elementor-widget.nav-links .elementor-nav-menu li { margin: 0; } .elementor-widget.nav-links .elementor-item { padding: 0; margin: 0; fill: currentColor; } .elementor-widget.nav-links .elementor-item.elementor-item-active, .elementor-widget.nav-links .elementor-item[aria-current="page"] { color: var(--ink); font-weight: 500; } .elementor-widget.nav-links .elementor-nav-menu .elementor-item, .elementor-widget.nav-links .elementor-nav-menu .elementor-item:hover, .elementor-widget.nav-links .elementor-nav-menu .elementor-item:focus, .elementor-widget.nav-links .elementor-nav-menu .elementor-item:active, .elementor-widget.nav-links .elementor-nav-menu .elementor-item.highlighted { padding: 0; margin: 0; background: none; transform: none; font-size: inherit; transition: color 0.2s ease; } @media (max-width: 860px) { .elementor-widget.nav-links { display: none; } } /* Sticky header. .nav carries position:sticky in the prototype, but in the Theme Builder it sits inside
, whose height is exactly the header's own. A sticky box cannot move inside a containing block its own size, so it never sticks. The sticky moves up to the wrapper and .nav keeps its background, blur and border. */ .elementor-location-header { position: sticky; top: 0; z-index: 100; } .e-con.e-con.nav { position: static; } /* Footer link lists. Icon List renders