/* Theme Name: Hello Elementor Child Theme URI: https://github.com/elementor/hello-theme-child/ Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team Author: Elementor Team Author URI: https://elementor.com/ Template: hello-elementor Version: 2.0.0 Text Domain: hello-elementor-child License: GNU General Public License v3 or later. License URI: https://www.gnu.org/licenses/gpl-3.0.html Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready */ /* ============================================================================= ELEMENTOR V4 — KIT VARIABLES & GLOBAL CLASSES (REFERENCE) ----------------------------------------------------------------------------- CSS custom properties below are emitted by the Elementor v4 kit on :root. Do not redeclare them here; edit values in Site Settings → Design System. Custom CSS in this file: use var(--token-name). Re-sync this block after major kit changes via novamira/elementor-list-variables and novamira/elementor-list-global-classes (snapshot: 2026-05-13). ============================================================================= */ /* --- Colors ----------------------------------------------------------------- --primary #f2632c --secondary #fc9f00 --tertiary #131519 --white #ffffff --neutral-light #e5e5e5 --text-muted #bfbfbf --shadow-primary #00000029 ----------------------------------------------------------------------------- */ /* --- Fonts ------------------------------------------------------------------ --font-heading Inter --font-body Sora ----------------------------------------------------------------------------- */ /* --- Plain size tokens ------------------------------------------------------ --space-0 0px --leading-xs 150% --leading-s 150% --leading-m 155% --leading-l 135% --leading-xl 128% --leading-2xl 122% --leading-3xl 118% --leading-4xl 112% --radius-full 999rem --min-content-width 34rem --max-content-width 140rem ----------------------------------------------------------------------------- */ /* --- Fluid spacing ---------------------------------------------------------- --space-4xs clamp(0.52rem, calc(-0.03vw + 0.53rem), 0.49rem) --space-3xs clamp(0.66rem, calc(0.04vw + 0.64rem), 0.7rem) --space-2xs clamp(0.82rem, calc(0.16vw + 0.77rem), 0.99rem) --space-xs clamp(1.02rem, calc(0.35vw + 0.91rem), 1.4rem) --space-s clamp(1.28rem, calc(0.65vw + 1.07rem), 1.98rem) --space-m clamp(1.6rem, calc(1.11vw + 1.24rem), 2.8rem) --space-l clamp(2rem, calc(1.81vw + 1.42rem), 3.96rem) --space-xl clamp(2.5rem, calc(2.87vw + 1.58rem), 5.6rem) --space-2xl clamp(3.13rem, calc(4.44vw + 1.71rem), 7.92rem) --space-3xl clamp(3.91rem, calc(6.75vw + 1.75rem), 11.19rem) --space-4xl clamp(4.88rem, calc(10.13vw + 1.64rem), 15.83rem) --gap var(--space-m) ----------------------------------------------------------------------------- */ /* --- Component spacing shortcuts ------------------------------------------- --btn-space var(--space-xs) var(--space-s) --card-space var(--space-s) --footer-space var(--space-s) var(--space-m) ----------------------------------------------------------------------------- */ /* --- Type scale (fluid) ----------------------------------------------------- --text-xs clamp(0.883rem, calc(0.266vw + 0.783rem), 1.103rem) --text-s clamp(1.181rem, calc(0.074vw + 1.153rem), 1.243rem) --text-m clamp(1.4rem, calc(0.485vw + 1.218rem), 1.8rem) --text-l clamp(1.575rem, calc(1vw + 1.2rem), 2.4rem) --text-xl clamp(1.768rem, calc(1.736vw + 1.116rem), 3.2rem) --text-2xl clamp(1.995rem, calc(2.745vw + 0.966rem), 4.26rem) --text-3xl clamp(2.24rem, calc(4.17vw + 0.676rem), 5.68rem) --text-4xl clamp(2.52rem, calc(6.133vw + 0.22rem), 7.58rem) ----------------------------------------------------------------------------- */ /* --- Border radius (fluid) -------------------------------------------------- --radius-xs clamp(0.4rem, calc(0vw + 0.4rem), 0.4rem) --radius-s clamp(0.6rem, calc(-0.19vw + 0.86rem), 0.8rem) --radius-m clamp(1rem, calc(-0.19vw + 1.26rem), 1.2rem) --radius-l clamp(1.6rem, calc(-0.37vw + 2.12rem), 2rem) --radius-xl clamp(2.6rem, calc(-0.56vw + 3.38rem), 3.2rem) ----------------------------------------------------------------------------- */ /* --- Shadows ---------------------------------------------------------------- --shadow-xs 0 1px 2px var(--shadow-primary) --shadow-s 0 1.5px 3px var(--shadow-primary) --shadow-m 0 2px 6px var(--shadow-primary) --shadow-l 0 3px 12px var(--shadow-primary) ----------------------------------------------------------------------------- */ /* --- Grid column templates -------------------------------------------------- --columns-1 repeat(1, minmax(0, 1fr)) --columns-2 repeat(2, minmax(0, 1fr)) --columns-3 repeat(3, minmax(0, 1fr)) --columns-4 repeat(4, minmax(0, 1fr)) --columns-5 repeat(5, minmax(0, 1fr)) --columns-6 repeat(6, minmax(0, 1fr)) --columns-7 repeat(7, minmax(0, 1fr)) --columns-8 repeat(8, minmax(0, 1fr)) ----------------------------------------------------------------------------- */ /* --- Layout width ----------------------------------------------------------- --section-width clamp(var(--min-content-width), 100%, var(--max-content-width)) ----------------------------------------------------------------------------- */ /* --- Global classes (v4 kit) — use in the editor / JSON; IDs for Novamira --- Typography (font-size + line-height pairs): text-xs gc-93872f891e481586 text-s gc-7b784097983a7e1f text-m gc-84bd64845675cf10 text-l gc-872f33843e79188e text-xl gc-894ea91943fba7d7 text-2xl gc-046ccebe27b02cad text-3xl gc-5fa70e8e5da5bba0 text-4xl gc-e3c93f8d464d8c9f Layout / chrome: section g-60fe248 — flex column, centered, padding --space-xl section-inner g-dbae0e3 — width --section-width header-inner g-0fd4c05 — grid; gap var(--gap); (custom CSS in kit) navigation g-4404def — flex row; max-content (custom CSS in kit) btn-primary g-598da81 — secondary fill, white text, radius-l, space padding header g-5455d75 — legacy header padding (replaced on header template) header-site gc-8e37e7c636529bf4 — site header root, open state, padding header-offcanvas gc-5cd31cd4134e032c — drawer panel (display:contents desktop) header-offcanvas-backdrop gc-07ffa90c6e6cae51 — overlay header-menu-toggle gc-68a2e498f1414728 — hamburger control header-offcanvas-nav gc-078c6e30f56814ed — drawer nav stack (native flex) Theme CSS: prefer var(--*) above; for DOM hooks on generated class strings, inspect the live page — or use a stable element_id → .s- on atomic trees. ----------------------------------------------------------------------------- */ /* ============================================================================= CUSTOM STYLES ----------------------------------------------------------------------------- Root font-size is left at the browser default so kit rem-based fluid tokens match Site Settings. Outside Elementor templates, align body with kit body typography; editor content keeps its own atomic / class styling. BEM hooks: unprefixed blocks (e.g. header__nav, scroll--up). Post types: showcase, case, post — see CONTEXT.md. ============================================================================= */ html { font-size: 62.5%; } /* ============================================================================= Scroll direction (scroll-direction.js) — classes on .scroll--down while scrolling down; .scroll--up while scrolling up. Both removed at scrollY <= 0. Threshold 8px before direction flips. ============================================================================= */ /* ============================================================================= Header off-canvas (template 93) — open state via .is-open on [data-id="34c4f03"] JS (header-offcanvas.js) only toggles .is-open on the site root; visuals are here. ============================================================================= */ html:has(header [data-id="34c4f03"].is-open), html.header-menu-open { overflow: hidden; } html.scroll--up:not(.header-menu-open), html.scroll--down:not(.header-menu-open) { .header-site { padding-block-start: var(--space-s) !important; transform: translateY(-100%); transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); } } html.scroll--up:not(.header-menu-open) { .header-site { transform: translateY(0); } } /* Transform on .header-site traps fixed overlays; keep bar visible when menu is open */ html.header-menu-open .header-site, header [data-id="34c4f03"].is-open.header-site, header [data-id="34c4f03"].is-open { transform: none !important; } html.header-menu-open header.elementor-location-header, header:has([data-id="34c4f03"].is-open) { overflow: visible; } @media (max-width: 1024px) { /* Full-viewport overlay; not limited to the header bar box */ header [data-id="34c4f03"] [data-id="header-offcanvas-backdrop"] { position: fixed; inset: 0; z-index: 9990; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.35s ease, visibility 0.35s; } header [data-id="34c4f03"].is-open [data-id="header-offcanvas-backdrop"] { opacity: 1; visibility: visible; pointer-events: auto; } /* Drawer panel — closed by default; kit may also set transform */ header [data-id="34c4f03"] [data-id="header-offcanvas"] { position: fixed; inset-block: 0; inset-inline-end: 0; width: min(85vw, 28rem); max-width: 100%; z-index: 9991; overflow-y: auto; -webkit-overflow-scrolling: touch; visibility: hidden; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s; } header [data-id="34c4f03"].is-open [data-id="header-offcanvas"] { visibility: visible; transform: translateX(0); } /* Room for absolute close icon (first child in drawer) */ header [data-id="34c4f03"] [data-id="header-offcanvas"] > [data-id="93a7726"] { margin-block-start: calc(3rem + var(--space-s)); } header [data-id="34c4f03"] [data-id="header-offcanvas"] a:focus-visible, header [data-id="34c4f03"] [data-id="header-offcanvas"] button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* Close control (icon widget, top-end via Elementor position) */ header [data-id="34c4f03"] .header-offcanvas-close { z-index: 2; } header [data-id="34c4f03"] .header-offcanvas-close a, header [data-id="34c4f03"] .header-offcanvas-close .elementor-icon { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; color: var(--tertiary); cursor: pointer; text-decoration: none; transition: color 0.2s ease; } header [data-id="34c4f03"] .header-offcanvas-close a:hover, header [data-id="34c4f03"] .header-offcanvas-close a:focus-visible { color: var(--secondary); fill: var(--secondary); } /* Menu toggle visible in bar */ header [data-id="34c4f03"] [data-id="header-menu-toggle"] { display: inline-flex; align-items: center; justify-content: center; } header [data-id="34c4f03"] .header__nav ul { display: flex; flex-direction: column; gap: var(--space-4xs); li>a{ margin-inline: 0 !important; font-size: var(--text-xl); &:hover{ color: var(--secondary) !important; line-height: var(--e-global-typography-v4-text-m-line-height); } } } } @media (max-width: 1024px) and (prefers-reduced-motion: reduce) { header [data-id="34c4f03"] [data-id="header-offcanvas"], header [data-id="34c4f03"] [data-id="header-offcanvas-backdrop"] { transition: none; } }