/* =================================================== NexGen AIvolution: Header Component Styles All values reference tokens from nexgen-tokens.css. Component-specific variables (header heights, logo heights) are defined here because they apply only to this component and have no entry in the global token set. The spacing scale does not include 80 / 72 / 64px or 40 / 36 / 32px, so they live here as named vars rather than as hardcoded literals in the rules below. =================================================== */ /* --- Component variables --------------------------- */ :root { --h-header: 64px; --h-logo: 32px; } @media (min-width: 768px) { :root { --h-header: 72px; --h-logo: 36px; } } @media (min-width: 1025px) { :root { --h-header: 80px; --h-logo: 40px; } } /* --- Logo ------------------------------------------ Atomic e-image renders as: a.e-image-link-base > img.e-image-base (no .elementor-element-{id} wrapper — e-image is not a classic widget) Hello's reset.css (0,0,1): img { height:auto; max-width:100% } Elementor base CSS (0,1,0): .e-image-link-base { all:unset; width:fit-content } — all:unset resets min-width to 0, allowing the link to compress. Our (0,3,0) rules on both elements beat both at every property we declare. */ .elementor .elementor-element-128276c .e-image-base { height: var(--h-logo); width: auto; max-width: none; aspect-ratio: 1200 / 175; display: block; } /* flex-shrink:0 keeps the flex algorithm from taking width from the logo. min-width:fit-content restores the minimum the link lost to all:unset. */ .elementor .elementor-element-128276c .e-image-link-base { min-width: fit-content; flex-shrink: 0; } /* --- CTA button ------------------------------------ Atomic e-button renders as: .elementor > .elementor-element-128276c > a.e-0b6e064-dd437fc.e-button-base Elementor compiles to .elementor .e-0b6e064-dd437fc (0,2,0). Three-class selector here is (0,3,0) — wins on specificity, not load order, so LiteSpeed CSS combine cannot flip it. */ .elementor .elementor-element-128276c .e-0b6e064-dd437fc { display: inline-flex; align-items: center; justify-content: center; background: var(--gold); color: var(--ink); font-family: var(--font-display); font-weight: var(--fw-ui); font-size: var(--fs-btn); letter-spacing: var(--tr-ui); line-height: var(--lh-ui); border-radius: var(--r-btn); padding: var(--pad-btn-y) var(--pad-btn-x); text-decoration: none; border: none; white-space: nowrap; } @media (prefers-reduced-motion: no-preference) { .elementor .elementor-element-128276c .e-0b6e064-dd437fc { transition: transform 0.2s ease, box-shadow 0.2s ease; } .elementor .elementor-element-128276c .e-0b6e064-dd437fc:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 30%, transparent), 0 8px 28px color-mix(in srgb, var(--gold) 20%, transparent); } } .elementor .elementor-element-128276c .e-0b6e064-dd437fc:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; } /* --- CTA button: hidden below 768px --- At mobile the nav CTA item (9th menu item, class nav-cta-item) is the primary action. display:none removes this element from the flex flow entirely — visibility:hidden would leave a gap. */ @media (max-width: 767px) { .elementor .elementor-element-128276c .e-0b6e064-dd437fc { display: none; } } /* =================================================== Section 3: Navigation UAE navigation-menu widget (element 473302d) stores literal hex in all color and typography controls — no CSS variable support. All nav styling in this file. The UAE inline