/* SC header height fallback for first paint; JS overwrites with the measured value. This is the sticky nav's (#custom-sticky-header) height only — the announcement bar above it is not included. */ :root { --header-h: 111px; } @media screen and (max-width: 1024px) { :root { --header-h: 104px; } } @media screen and (max-width: 440px) { :root { --header-h: 100px; } } /* SC Remove margin from last item in text widget */ .elementor-widget-text-editor :last-child { margin-bottom: 0px; } /* ========================================================================== SC Animated backgrounds -------------------------------------------------------------------------- Sections — apply one variant class: bg-corner-orbs | bg-rotating-orbs | bg-central-orbs Each one is context-aware. The orbs sit at their light strength (0.5) by default and switch to their dark strength (0.4) when the section — or any ancestor — carries invert-primary-dark or invert-secondary-dark. Putting invert-primary-light or invert-secondary-light on the section itself takes it back to the light strength. Geometry (size, position, timing) is fixed per variant; strength is the only thing that follows the context. Colour is the brand-2 pair of each palette in every context — brand-2 is the only shade with enough luminance to read on a dark section. Add animated-bg-fixed alongside a variant to pin its blobs to the viewport instead of the section. Full page — driven by the ACF "Animated Background" field, which puts these on . Light vs dark stays an explicit choice there: sc-has-animated-background (always, = fixed page mode) sc-animated-background-lro/dro Light/Dark Rotating Orbs sc-animated-background-lco/dco Light/Dark Corner Orbs sc-animated-background-lce/dce Light/Dark Central Orbs Recolour per-instance by setting these on the element (or an ancestor): --animated-bg-color-1: var(--color-primary-brand-1); --animated-bg-strength-1: 0.7; --animated-bg-color-2: var(--color-secondary-brand-2); --animated-bg-strength-2: 0.8; ========================================================================== */ /* ---- engine: shared by every variant, section or page ---- Classes are doubled throughout to out-specify Elementor's flexbox container styles: .e-con::before / .e-con (background overlay, overflow) load after this file and would otherwise win the cascade. */ .bg-corner-orbs.bg-corner-orbs, .bg-rotating-orbs.bg-rotating-orbs, .bg-central-orbs.bg-central-orbs, .sc-has-animated-background.sc-has-animated-background { position: relative; isolation: isolate; --_bg1: var(--animated-bg-color-1, var(--color-primary-brand-2)); --_bg2: var(--animated-bg-color-2, var(--color-secondary-brand-2)); &::before, &::after { content: ""; position: var(--_pos, absolute); z-index: -1; will-change: transform; background: radial-gradient( closest-side, var(--_c) 0%, var(--_c) 20%, color-mix(in srgb, var(--_c) 88%, transparent) 32%, color-mix(in srgb, var(--_c) 66%, transparent) 44%, color-mix(in srgb, var(--_c) 42%, transparent) 56%, color-mix(in srgb, var(--_c) 22%, transparent) 68%, color-mix(in srgb, var(--_c) 9%, transparent) 78%, color-mix(in srgb, var(--_c) 3%, transparent) 86%, transparent 94% ); } &::before { --_c: var(--_bg1); opacity: var(--animated-bg-strength-1, var(--_strength-1)); } &::after { --_c: var(--_bg2); opacity: var(--animated-bg-strength-2, var(--_strength-2)); } } /* ---- shape: corner orbs (drifting corner blobs) ---- */ .bg-corner-orbs.bg-corner-orbs, .sc-animated-background-lco.sc-animated-background-lco, .sc-animated-background-dco.sc-animated-background-dco { &::before { top: -20%; left: -30%; width: max(55vw, 36rem); height: max(65vh, 40rem); border-radius: 50%; animation: animated-bg-drift 22s ease-in-out infinite alternate; } &::after { bottom: -30%; right: -30%; width: max(65vw, 36rem); height: max(80vh, 40rem); border-radius: 50%; animation: animated-bg-drift 17s ease-in-out infinite alternate; animation-delay: -8s; } } /* ---- shape: rotating orbs (centred, orbiting) ---- */ .bg-rotating-orbs.bg-rotating-orbs, .sc-animated-background-lro.sc-animated-background-lro, .sc-animated-background-dro.sc-animated-background-dro { &::before, &::after { left: 50%; top: 50%; height: max(80vh, 40rem); transform: translate(-50%, -50%); animation: animated-bg-orbit 80s linear infinite, animated-bg-wobble 11s ease-in-out infinite alternate, animated-bg-breathe 21s ease-in-out infinite alternate; } &::before { width: max(85vw, 44rem); animation-delay: 0s, 0s, -6s; } &::after { width: max(65vw, 36rem); animation-delay: -40s, -7s, -12s; } } /* ---- shape: central orbs (one large, one small, both drifting) ---- Anchored well apart either side of the middle, each with its own sway so they never converge, and sized so the large one always reads as the large one: the smallest the big orb ever gets still beats the biggest the small orb ever gets, across the whole breathe range. The sways run `alternate`, not as a closed loop — the orbs wander to and fro, they don't circle. */ .bg-central-orbs.bg-central-orbs, .sc-animated-background-lce.sc-animated-background-lce, .sc-animated-background-dce.sc-animated-background-dce { &::before, &::after { transform: translate(-50%, -50%); } &::before { left: 34%; top: 46%; width: max(66vw, 38rem); height: max(62vh, 34rem); animation: animated-bg-sway-1 46s ease-in-out infinite alternate, animated-bg-wobble 13s ease-in-out infinite alternate, animated-bg-breathe 19s ease-in-out infinite alternate; animation-delay: -12s, -4s, -7s; } &::after { left: 72%; top: 54%; width: max(30vw, 17rem); height: max(30vh, 16rem); animation: animated-bg-sway-2 37s ease-in-out infinite alternate, animated-bg-wobble 11s ease-in-out infinite alternate, animated-bg-breathe 23s ease-in-out infinite alternate; animation-delay: -20s, -6s, -14s; } } /* ---- strength: the one thing that follows the light/dark context ---- Dark block first, light block second. A light invert on the section itself ties on specificity with a dark invert on an ancestor, so the light block has to come last to win that pairing. The bare variant classes are the no-invert default and are out-specified by every invert selector. */ /* dark context */ .invert-primary-dark :is(.bg-corner-orbs, .bg-rotating-orbs, .bg-central-orbs), .invert-primary-dark:is(.bg-corner-orbs, .bg-rotating-orbs, .bg-central-orbs), .invert-secondary-dark :is(.bg-corner-orbs, .bg-rotating-orbs, .bg-central-orbs), .invert-secondary-dark:is(.bg-corner-orbs, .bg-rotating-orbs, .bg-central-orbs), .sc-animated-background-dco, .sc-animated-background-dro, .sc-animated-background-dce { --_strength-1: 0.4; --_strength-2: 0.4; } /* light context */ .bg-corner-orbs, .bg-rotating-orbs, .bg-central-orbs, :is(.invert-primary-light, .invert-secondary-light):is( .bg-corner-orbs, .bg-rotating-orbs, .bg-central-orbs ), .sc-animated-background-lco, .sc-animated-background-lro, .sc-animated-background-lce { --_strength-1: 0.5; --_strength-2: 0.5; } /* ---- attachment ---- Sections: blobs anchor to the section and clip at its edge. --_pos is set explicitly (not just the fallback) so a section nested inside an animated page doesn't inherit the page's fixed mode. */ .bg-corner-orbs.bg-corner-orbs, .bg-rotating-orbs.bg-rotating-orbs, .bg-central-orbs.bg-central-orbs { --_pos: absolute; overflow: hidden; } /* Full page (and the opt-in section modifier): pin blobs to the viewport. Must come after the section rule above so animated-bg-fixed wins when combined. Fixed boxes create no scrollable overflow, so no clipping — and overflow:hidden on would disable page scrolling. */ .animated-bg-fixed.animated-bg-fixed, .sc-has-animated-background.sc-has-animated-background { --_pos: fixed; overflow: visible; } /* ---- motion preference: keep the glow, stop the movement ---- */ @media (prefers-reduced-motion: reduce) { .bg-corner-orbs.bg-corner-orbs, .bg-rotating-orbs.bg-rotating-orbs, .bg-central-orbs.bg-central-orbs, .sc-has-animated-background.sc-has-animated-background { &::before, &::after { animation: none; } } } @keyframes animated-bg-orbit { 0% { transform: translate(-50%, -50%) translate(-52vw, -32.5%); } 18.1% { transform: translate(-50%, -50%) translate(0vw, -34.5%); } 36.3% { transform: translate(-50%, -50%) translate(52vw, -32.5%); } 43.1% { transform: translate(-50%, -50%) translate(55vw, 0%); } 50% { transform: translate(-50%, -50%) translate(52vw, 32.5%); } 68.1% { transform: translate(-50%, -50%) translate(0vw, 34.5%); } 86.3% { transform: translate(-50%, -50%) translate(-52vw, 32.5%); } 93.1% { transform: translate(-50%, -50%) translate(-55vw, 0%); } 100% { transform: translate(-50%, -50%) translate(-52vw, -32.5%); } } /* Open, to-and-fro drifts for the central orbs — deliberately NOT closed loops, so neither orb ever travels a circuit. Amplitudes are small next to the gap between the two anchor points: even at their worst, both swaying fully towards each other, the anchors stay roughly 24% of the viewport apart, so the pair never converges on the middle. */ @keyframes animated-bg-sway-1 { 0% { transform: translate(-50%, -50%) translate(-7vw, -4%); } 38% { transform: translate(-50%, -50%) translate(-2vw, 5%); } 72% { transform: translate(-50%, -50%) translate(3vw, -2%); } 100% { transform: translate(-50%, -50%) translate(7vw, 4%); } } @keyframes animated-bg-sway-2 { 0% { transform: translate(-50%, -50%) translate(-5vw, 5%); } 32% { transform: translate(-50%, -50%) translate(-1vw, -4%); } 68% { transform: translate(-50%, -50%) translate(2vw, 3%); } 100% { transform: translate(-50%, -50%) translate(5vw, -5%); } } /* Small organic drift layered on the orbit via the individual `translate` property (composes with `transform`) */ @keyframes animated-bg-wobble { 0% { translate: 0vw 0%; } 33% { translate: 0.8vw -3%; } 66% { translate: -0.7vw 2.5%; } 100% { translate: 0.5vw 2%; } } /* Slow grow/shrink layered on via the individual `scale` property (composes with orbit + wobble) */ @keyframes animated-bg-breathe { 0% { scale: 0.88; } 100% { scale: 1.15; } } /* CodePen-style blurred blob drift — used by the corner-orb variants */ @keyframes animated-bg-drift { 0% { transform: translate(0, 0) scale(1); } 33% { transform: translate(60px, -40px) scale(1.08); } 66% { transform: translate(-40px, 60px) scale(0.94); } 100% { transform: translate(30px, 30px) scale(1.04); } }