/* Theme Name: Hello Elementor Child Theme URI: https://lexx.co.il Description: LEXX Child Theme for Hello Elementor. Defines the canonical CSS variable aliases for LEXX brand tokens (via :root) and the cross-page accessibility CSS (skip link, focus indicators, mobile nav, hamburger). Brand tokens read from Elementor Site Settings (Global Colors); hex fallbacks here keep visuals correct if Elementor doesn't emit. See docs/adr/adr-0006-child-theme-structure.md and the brand-token configuration in Elementor Kit 4. Author: LEXX — Alex Kirmayer Author URI: https://lexx.co.il Template: hello-elementor Version: 1.2.6 Text Domain: hello-elementor-child */ /* * Parent stylesheet is enqueued as a dependency via functions.php * (no @import — @import serializes downloads, dependency chain does not). * * Per-concern modules appear under css/.css only when populated * by a PORT — see ADR-0012. */ /* ========================================================================== Brand tokens — single source of truth aliases. Each --lexx-* variable reads from the matching Elementor Global Color (--e-global-color-*), with a hex fallback for safety. Operators change brand colors in Elementor → Site Settings → Global Colors; every rule that uses var(--lexx-*) follows automatically. No CSS edits required. ========================================================================== */ :root { /* Brand identity */ --lexx-lime: var(--e-global-color-lexx-lime, #C8F000); --lexx-dark: var(--e-global-color-lexx-dark, #0D0D0F); --lexx-white: var(--e-global-color-lexx-white, #FFFFFF); --lexx-muted: var(--e-global-color-lexx-muted, #9E9E9F); --lexx-lime-dark-text: var(--e-global-color-lexx-lime-dark-text, #0D0D0F); /* Chrome — dark-greyscale tiers */ --lexx-surface: var(--e-global-color-lexx-surface, #1E1E20); --lexx-input-bg: var(--e-global-color-lexx-input-bg, #1A1A1C); --lexx-input-border: var(--e-global-color-lexx-input-border, #2A2A2C); /* Glass surfaces (semi-transparent white on dark) */ --lexx-glass-bg: var(--e-global-color-lexx-glass-bg, rgba(255, 255, 255, 0.04)); --lexx-glass-border: var(--e-global-color-lexx-glass-border, rgba(255, 255, 255, 0.08)); /* Muted text alphas */ --lexx-text-muted-50: var(--e-global-color-lexx-text-muted-50, rgba(255, 255, 255, 0.5)); --lexx-text-muted-60: var(--e-global-color-lexx-text-muted-60, rgba(255, 255, 255, 0.6)); /* Functional */ --lexx-focus: var(--e-global-color-lexx-focus, #F5A623); --lexx-danger: var(--e-global-color-lexx-danger, #FF8080); /* Accents — showcase/portfolio per-card identity */ --lexx-accent-orange: var(--e-global-color-lexx-accent-orange, #FF6B35); --lexx-accent-cyan: var(--e-global-color-lexx-accent-cyan, #00D4FF); --lexx-accent-pink: var(--e-global-color-lexx-accent-pink, #FF3CAC); } /* ========================================================================== Baseline page surface — site-wide dark background. Hoisted from page 266 custom_css during Batch A (2026-05-30); applies to every page rather than only the homepage since the dark surface is the site's baseline (privacy-policy, /works/, future standalone pages). Specificity note: `html body` (0,0,2) is deliberate. Hello Elementor's reset.css declares `body { background-color: #fff }` and loads after this stylesheet in ; matching it at equal specificity (`body`, 0,0,1) would lose to load order. Bumping to `html body` makes this rule win by specificity regardless of where it sits in the cascade. ========================================================================== */ html, html body { background-color: var(--lexx-dark); } /* ========================================================================== Accessibility — visual layer (Layer 1) Preserved from 2026-04-28 source; values updated to use brand tokens. ========================================================================== */ /* 1. Skip link */ .skip-link { position: absolute; inset-inline-start: -9999px; inset-block-start: 0; z-index: 9999; padding: 0.5rem 1rem; background: var(--lexx-dark); color: var(--lexx-white); font-size: 1rem; text-decoration: none; white-space: nowrap; } .skip-link:focus { inset-inline-start: 0; } /* 2. Focus indicators — keyboard navigation */ :focus-visible { outline: 3px solid var(--lexx-focus); outline-offset: 3px; } a:focus-visible, button:focus-visible, [role="button"]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--lexx-focus); outline-offset: 3px; border-radius: 2px; } /* 3. Body type baseline */ body { font-size: 1rem; } /* 4. Mobile nav — tab order + accessible overflow */ @media (max-width: 767px) { .elementor-nav-menu--main.elementor-nav-menu__container { overflow-y: auto; -webkit-overflow-scrolling: touch; } .elementor-nav-menu--main .elementor-nav-menu li a { outline-offset: -3px; } } /* 5. Hamburger animation */ .elementor-menu-toggle { transition: transform 0.2s ease; } .elementor-menu-toggle[aria-expanded="true"] { transform: rotate(90deg); } .elementor-menu-toggle .elementor-menu-toggle__icon--open, .elementor-menu-toggle .elementor-menu-toggle__icon--close { transition: opacity 0.2s ease; }