/* ========================================================================= SALEEM AKHTER — CUSTOM CSS Everything Elementor's panel genuinely cannot do. Rule: no colour or font is hard-coded here. All values come from Elementor Global Colors / Global Fonts via CSS custom properties, so changing Site Settings still updates this file's output too. CONTENTS 1. Local aliases for the Elementor globals 2. Design tokens (spacing / radius / shadow / motion) 3. Text-Editor heading inheritance <- required by the SEO retag 4. Card hover (replaces `transition: all` on 931 elements) 5. Sticky header (replaces Elementor Pro's jQuery sticky) 6. Scroll behaviour + reduced motion 7. Horizontal-overflow guard 8. Accessibility: focus states ====================================================================== */ /* ------------------------------------------------------------------------- 1. LOCAL ALIASES Short names that point at Elementor's globals. Change the colour in Site Settings > Global Colors and every rule below follows. NOTE ON SCOPE — this must be `body`, not `:root`. Elementor defines --e-global-color-* on `.elementor-kit-6`, which is a class on . is a DESCENDANT of :root, so an alias declared at :root cannot see those variables — it would resolve to empty and inherit that emptiness down the whole tree. Declaring the aliases on `body` puts them in the same scope as Elementor's own definitions. ---------------------------------------------------------------------- */ body { --sa-primary: var(--e-global-color-primary); --sa-secondary: var(--e-global-color-secondary); --sa-text: var(--e-global-color-text); --sa-accent: var(--e-global-color-accent); --sa-white: var(--e-global-color-cwhite0); --sa-bg: var(--e-global-color-cbgpage); --sa-surface-hover:var(--e-global-color-csurfhv); --sa-deep: var(--e-global-color-cdeep00); --sa-text-muted: var(--e-global-color-ctxtmut); --sa-on-dark: var(--e-global-color-ctxtdrk); --sa-on-dark-muted:var(--e-global-color-ctxtdkm); --sa-border: var(--e-global-color-cborder); --sa-border-strong:var(--e-global-color-cbordst); --sa-border-dark: var(--e-global-color-cborddk); --sa-accent-hover: var(--e-global-color-cacchov); --sa-accent-text: var(--e-global-color-cacctxt); --sa-accent-tint: var(--e-global-color-cacctnt); --sa-font-head: var(--e-global-typography-theadn1-font-family), sans-serif; --sa-font-body: var(--e-global-typography-tbodymd-font-family), sans-serif; --sa-font-mono: var(--e-global-typography-teyebro-font-family), monospace; } /* ------------------------------------------------------------------------- 2. DESIGN TOKENS Elementor has no global spacing/radius/shadow scale, so it lives here. ---------------------------------------------------------------------- */ :root { /* spacing — 4px base */ --sa-space-1: 4px; --sa-space-2: 8px; --sa-space-3: 12px; --sa-space-4: 16px; --sa-space-5: 24px; --sa-space-6: 32px; --sa-space-7: 48px; --sa-space-8: 64px; --sa-space-9: 96px; --sa-space-10:128px; /* section rhythm — fluid, no breakpoint needed */ --sa-section-y: clamp(56px, 8vw, 128px); --sa-gutter: clamp(16px, 4vw, 40px); /* radius */ --sa-radius-sm: 6px; --sa-radius-md: 12px; --sa-radius-lg: 20px; --sa-radius-xl: 32px; --sa-radius-full: 999px; /* shadow — warm, tinted to the brand rather than neutral black */ --sa-shadow-sm: 0 1px 2px rgb(47 22 1 / 0.06); --sa-shadow-md: 0 4px 12px rgb(47 22 1 / 0.08); --sa-shadow-lg: 0 12px 32px rgb(47 22 1 / 0.10); --sa-shadow-xl: 0 24px 64px rgb(47 22 1 / 0.14); /* motion */ --sa-ease: cubic-bezier(0.4, 0, 0.2, 1); --sa-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --sa-dur-fast: 0.15s; --sa-dur-base: 0.3s; --sa-dur-slow: 0.5s; } /* ------------------------------------------------------------------------- 3. TEXT-EDITOR HEADING INHERITANCE The SEO pass converted several Text Editors from

to real

/

. Without this, Elementor's Theme Style h1-h6 rules would override the per-widget Global Font each of those widgets is bound to, changing the design. `font: inherit` hands control back to the widget's own binding. Only applies INSIDE a text-editor widget — real Heading widgets and raw post content still follow Theme Style. ---------------------------------------------------------------------- / .elementor-widget-text-editor h1, .elementor-widget-text-editor h2, .elementor-widget-text-editor h3, .elementor-widget-text-editor h4, .elementor-widget-text-editor h5, .elementor-widget-text-editor h6 { font: inherit; color: inherit; letter-spacing: inherit; margin: 0; } / ------------------------------------------------------------------------- 4. CARD HOVER Replaces this, which was duplicated in the Custom CSS field of six separate containers and put 931 elements under observation: .hover-content * { transition: all 0.3s ease; } .hover-content:hover * { transform: translatex(3px); } `transition: all` on a descendant wildcard forces the browser to watch every animatable property on every child on each style recalculation. Below: ONE element, ONE property, GPU-composited. ---------------------------------------------------------------------- / .hover-content .sa-arrow, .hover-content .elementor-heading-title { transition: transform var(--sa-dur-base) var(--sa-ease); } .hover-content:hover .sa-arrow, .hover-content:hover .elementor-heading-title { transform: translateX(3px); } / Card lift — transform + opacity only, both composited / .sa-card { transition: transform var(--sa-dur-base) var(--sa-ease), box-shadow var(--sa-dur-base) var(--sa-ease); } .sa-card:hover { transform: translateY(-4px); box-shadow: var(--sa-shadow-lg); } / ------------------------------------------------------------------------- 5. STICKY HEADER — zero JavaScript Elementor Pro's Sticky loads jquery.sticky.min.js and recalculates offsets on every scroll event. Native position:sticky costs nothing. Add the class `sa-sticky-header` to the header Container and turn Elementor's own Sticky OFF (Advanced > Motion Effects > Sticky: None). ---------------------------------------------------------------------- / .sa-sticky-header { position: sticky; top: 0; z-index: 100; } / Anchor links must not land under the sticky header / :target, [id^="service-"], #services, #system, #about, #results, #portfolio, #contact { scroll-margin-top: clamp(72px, 12vh, 110px); } / ------------------------------------------------------------------------- 6. SCROLL BEHAVIOUR + REDUCED MOTION CSS smooth scroll — no JS library. Honours the OS "reduce motion" setting, which a JS smooth-scroll library typically does not. ---------------------------------------------------------------------- / html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } / Collapsing every animation to 0.01ms also destroyed continuous ones such as the service marquee, which then rendered mid-frame. Entrance/one-shot animations are still neutralised; looping decorative ones are paused in place instead (see .sa-marquee below). / :not(.sa-marqueetrack), :not(.sa-marqueetrack)::before, :not(.sa-marquee__track)::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ------------------------------------------------------------------------- SERVICE MARQUEE Was an inline