/*
Theme Name: Hello Elementor Child
Theme URI: https://nanocell.test/
Description: Nanocell's site-wide custom CSS — utility classes and one-off overrides that don't belong in Elementor's per-page settings. Child of Hello Elementor.
Author: Nanocell
Template: hello-elementor
Version: 1.0.0
Requires PHP: 7.4
Text Domain: hello-elementor-child
*/
/* ==========================================================================
This file is the source of truth for Nanocell's design-system CSS —
edit it directly, no build step or WP-CLI sync required. It used to live
in the Elementor Kit's "Custom CSS" field, pushed via
scripts/sync-design-system-to-production.php — moved here because that
script overwrote the whole field on every run (silently wiping any CSS
added later through Elementor's own Custom CSS panel) and required a
developer + wp-cli just to see a change take effect.
Elementor's own Global Colors / Global Fonts (Site Settings -> Global
Colors/Fonts) are UNCHANGED by this move and still live in the Elementor
Kit — that's Elementor's native, client-editable styling surface, and
these CSS rules below reference those colours via
var(--e-global-color-*) / var(--e-global-typography-*) custom properties,
so they stay in sync automatically if a colour token's value changes
there.
========================================================================== */
/* ========== TEXT COLOR / INLINE SPAN UTILITIES ========== */
/* For wrapping a word/symbol inside a heading or paragraph, e.g.:
word or NanoCelle® */
.text-blue-00 { color: var(--e-global-color-nc_blue00, #1A6CE7); }
.text-blue-02 { color: var(--e-global-color-text, #002C6E); }
.text-cyan { color: var(--e-global-color-secondary, #3CCBE9); }
.text-purple { color: var(--e-global-color-accent, #B972F0); }
.text-blue-pale { color: var(--e-global-color-nc_bluepale, #EDF7FF); }
.reg-mark { font-size: 0.4em; vertical-align: super; }
/* Contact Us form (Figma node 327:944), scoped to its own auto-generated
.elementor-element-{id} class — the Form widget has no CSS Classes control
(that's container/section/column only) so this can't hang off a custom
class. Field height/padding aren't exposed as plain Form-widget style
controls either (only Input Size presets are), so pin them here to match
the 56px / 20px spec exactly instead of picking the closest preset. */
.elementor-element-7dad486 .elementor-field-group .elementor-field:not(textarea) {
height: 56px !important;
padding: 0 20px !important;
}
.elementor-element-7dad486 .elementor-field-group textarea.elementor-field {
height: 160px !important;
padding: 16px 20px !important;
}
.elementor-element-7dad486 .elementor-field-group > label {
margin-bottom: 8px !important;
}
.blue-gradient {
/* Matches the Figma layer stack: solid Blue01 base at 80% opacity, with
the exact Linear gradient (1A6CE7 @ 13% -> 254C99 @ 100%) on top.
color-mix() applies the opacity so both still read from live tokens
instead of baking in flat rgba values. 180deg: solid/opaque at the
bottom, fading to transparent at the top. */
background:
linear-gradient(
180deg,
color-mix(in srgb, var(--e-global-color-nc_blue00, #1A6CE7) 13%, transparent) 0%,
var(--e-global-color-nc_blue02, #265397) 100%
),
color-mix(in srgb, var(--e-global-color-primary, #1A63D1) 80%, transparent);
}
/* .pastel-gradient is an older name for the exact same gradient as
.soft-gradient below (identical stops/colours) — it used to live in
Appearance -> Customize -> Additional CSS under the old "Hello Elementor"
theme, which silently stopped loading when this site switched to the
"Hello Elementor Child" theme (WordPress scopes that field per theme by
name). Kept as an alias here rather than repointing every page that
already uses the pastel-gradient class name. */
.soft-gradient, .pastel-gradient {
background: linear-gradient(
120deg,
var(--e-global-color-nc_purplepale, #EAD0F6) 0%,
var(--e-global-color-nc_bluepale, #F7F4FB) 30%,
var(--e-global-color-nc_bluepale, #E7FBFC) 52%,
var(--e-global-color-nc_cyanpale, #B9F3F7) 72%,
var(--e-global-color-secondary, #50D2E5) 100%
);
}
.dark-gradient {
background:
radial-gradient(
ellipse at 0% 0%,
var(--e-global-color-accent, #B56BE7) 0%,
var(--e-global-color-accent, #9C6BD0) 22%,
transparent 55%
),
radial-gradient(
ellipse at 100% 100%,
var(--e-global-color-secondary, #28C7DF) 0%,
var(--e-global-color-secondary, #48C7DC) 28%,
transparent 65%
),
linear-gradient(
135deg,
var(--e-global-color-nc_black, #09052D) 0%,
var(--e-global-color-text, #18264B) 30%,
var(--e-global-color-nc_blue02, #6688B4) 58%,
var(--e-global-color-nc_bluepale, #EEFAFA) 100%
);
}
/* .pastel-gradient-motion / .dark-gradient-motion — same gradients as
.pastel-gradient / .dark-gradient above, oversized (background-size:
200% 200%) and slowly drifting via background-position. Self-contained
(the full gradient is repeated here, not just the animation) so either
works on its own in Elementor's CSS Classes field, same as every other
class in this file — no need to also apply the non-motion class.
Kept slow (18s, ease-in-out) since these sit behind full-width hero
sections: fast movement over a large area reads as gimmicky and costs
more repaint than a slow drift. Respects prefers-reduced-motion. */
@keyframes nc-gradient-drift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.pastel-gradient-motion {
background: linear-gradient(
120deg,
var(--e-global-color-nc_purplepale, #EAD0F6) 0%,
var(--e-global-color-nc_bluepale, #F7F4FB) 30%,
var(--e-global-color-nc_bluepale, #E7FBFC) 52%,
var(--e-global-color-nc_cyanpale, #B9F3F7) 72%,
var(--e-global-color-secondary, #50D2E5) 100%
);
background-size: 200% 200%;
animation: nc-gradient-drift 18s ease-in-out infinite;
}
.dark-gradient-motion {
background:
radial-gradient(
ellipse at 0% 0%,
var(--e-global-color-accent, #B56BE7) 0%,
var(--e-global-color-accent, #9C6BD0) 22%,
transparent 55%
),
radial-gradient(
ellipse at 100% 100%,
var(--e-global-color-secondary, #28C7DF) 0%,
var(--e-global-color-secondary, #48C7DC) 28%,
transparent 65%
),
linear-gradient(
135deg,
var(--e-global-color-nc_black, #09052D) 0%,
var(--e-global-color-text, #18264B) 30%,
var(--e-global-color-nc_blue02, #6688B4) 58%,
var(--e-global-color-nc_bluepale, #EEFAFA) 100%
);
background-size: 200% 200%;
animation: nc-gradient-drift 18s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.pastel-gradient-motion,
.dark-gradient-motion {
animation: none;
}
}
/* ==========================================================================
VERTICAL PADDING UTILITY SYSTEM (fluid via clamp())
--------------------------------------------------------------------------
Scales continuously between 375px and 1280px viewport width — the same
two anchor points nc_clamp_font_size() (see sync-design-system-to-production.php)
uses for type, so padding and typography reach full size together rather
than on different curves. Tiers and their max values come from real
section padding already used in the Figma "Clean Test" page (proof-strip
80/160, FAQ block 96, Frame 66 / Frame 62 120) — not arbitrary round
numbers. Min values are each tier's own spot on the existing 4px spacing
scale. Apply via Elementor > Section > Advanced > CSS Classes.
========================================================================== */
/* ========== EQUAL PADDING CLASSES ========== */
/* Every tier sets padding two ways, split by target:
- on a plain element, or a full-width Elementor container (.e-con
without .e-con-boxed — those render straight on the .e-con itself,
no wrapper child), the plain property applies directly.
- on a *boxed* Elementor container (.e-con-boxed), Elementor renders
the visible padding on an auto-generated .e-con-inner child instead
of the .e-con itself, so the plain property is aimed at that child
directly. Earlier this used a --padding-top/--padding-bottom custom
property inherited into .e-con-inner instead of a direct child
selector — but the plain property on .e-con-boxed itself was ALSO
rendering (Elementor does not ignore it there), so both halves fired
and padding was doubled. Targeting .e-con-inner directly avoids
touching .e-con-boxed's own padding at all, so there's nothing left
to double. */
/* .pad-xs — 24px to 48px (one tier below sm; tightest spacing available) */
.pad-xs:not(.e-con-boxed) {
padding-top: clamp(1.5rem, 0.8785rem + 2.6519vw, 3rem);
padding-bottom: clamp(1.5rem, 0.8785rem + 2.6519vw, 3rem);
}
.pad-xs.e-con-boxed > .e-con-inner {
padding-top: clamp(1.5rem, 0.8785rem + 2.6519vw, 3rem);
padding-bottom: clamp(1.5rem, 0.8785rem + 2.6519vw, 3rem);
}
/* .pad-sm — 40px to 80px (smaller proof-strip) */
.pad-sm:not(.e-con-boxed) {
padding-top: clamp(2.5rem, 1.4641rem + 4.4199vw, 5rem);
padding-bottom: clamp(2.5rem, 1.4641rem + 4.4199vw, 5rem);
}
.pad-sm.e-con-boxed > .e-con-inner {
padding-top: clamp(2.5rem, 1.4641rem + 4.4199vw, 5rem);
padding-bottom: clamp(2.5rem, 1.4641rem + 4.4199vw, 5rem);
}
/* .pad-md — 48px to 96px (FAQ block; also the spacing scale's own ceiling) */
.pad-md:not(.e-con-boxed) {
padding-top: clamp(3rem, 1.7569rem + 5.3039vw, 6rem);
padding-bottom: clamp(3rem, 1.7569rem + 5.3039vw, 6rem);
}
.pad-md.e-con-boxed > .e-con-inner {
padding-top: clamp(3rem, 1.7569rem + 5.3039vw, 6rem);
padding-bottom: clamp(3rem, 1.7569rem + 5.3039vw, 6rem);
}
/* .pad-lg — 64px to 120px (Frame 66 / Frame 62) */
.pad-lg:not(.e-con-boxed) {
padding-top: clamp(4rem, 2.5497rem + 6.1878vw, 7.5rem);
padding-bottom: clamp(4rem, 2.5497rem + 6.1878vw, 7.5rem);
}
.pad-lg.e-con-boxed > .e-con-inner {
padding-top: clamp(4rem, 2.5497rem + 6.1878vw, 7.5rem);
padding-bottom: clamp(4rem, 2.5497rem + 6.1878vw, 7.5rem);
}
/* .pad-xl — 80px to 160px (larger proof-strip) */
.pad-xl:not(.e-con-boxed) {
padding-top: clamp(5rem, 2.9282rem + 8.8398vw, 10rem);
padding-bottom: clamp(5rem, 2.9282rem + 8.8398vw, 10rem);
}
.pad-xl.e-con-boxed > .e-con-inner {
padding-top: clamp(5rem, 2.9282rem + 8.8398vw, 10rem);
padding-bottom: clamp(5rem, 2.9282rem + 8.8398vw, 10rem);
}
/* ========== ASYMMETRIC PADDING CLASSES ========== */
/* Each pairs a tier with the one below it, on top or bottom only.
Split the same way as the equal-padding tiers above: plain elements
and full-width containers get the padding directly, boxed containers
get it on their .e-con-inner child, and neither path fires the other
on the same element, so nothing stacks. */
/* .pad-md-top — md on top, sm on bottom */
.pad-md-top:not(.e-con-boxed) {
padding-top: clamp(3rem, 1.7569rem + 5.3039vw, 6rem);
padding-bottom: clamp(2.5rem, 1.4641rem + 4.4199vw, 5rem);
}
.pad-md-top.e-con-boxed > .e-con-inner {
padding-top: clamp(3rem, 1.7569rem + 5.3039vw, 6rem);
padding-bottom: clamp(2.5rem, 1.4641rem + 4.4199vw, 5rem);
}
/* .pad-md-bottom — sm on top, md on bottom */
.pad-md-bottom:not(.e-con-boxed) {
padding-top: clamp(2.5rem, 1.4641rem + 4.4199vw, 5rem);
padding-bottom: clamp(3rem, 1.7569rem + 5.3039vw, 6rem);
}
.pad-md-bottom.e-con-boxed > .e-con-inner {
padding-top: clamp(2.5rem, 1.4641rem + 4.4199vw, 5rem);
padding-bottom: clamp(3rem, 1.7569rem + 5.3039vw, 6rem);
}
/* .pad-lg-top — lg on top, md on bottom */
.pad-lg-top:not(.e-con-boxed) {
padding-top: clamp(4rem, 2.5497rem + 6.1878vw, 7.5rem);
padding-bottom: clamp(3rem, 1.7569rem + 5.3039vw, 6rem);
}
.pad-lg-top.e-con-boxed > .e-con-inner {
padding-top: clamp(4rem, 2.5497rem + 6.1878vw, 7.5rem);
padding-bottom: clamp(3rem, 1.7569rem + 5.3039vw, 6rem);
}
/* .pad-lg-bottom — md on top, lg on bottom */
.pad-lg-bottom:not(.e-con-boxed) {
padding-top: clamp(3rem, 1.7569rem + 5.3039vw, 6rem);
padding-bottom: clamp(4rem, 2.5497rem + 6.1878vw, 7.5rem);
}
.pad-lg-bottom.e-con-boxed > .e-con-inner {
padding-top: clamp(3rem, 1.7569rem + 5.3039vw, 6rem);
padding-bottom: clamp(4rem, 2.5497rem + 6.1878vw, 7.5rem);
}
/* .pad-xl-top — xl on top, lg on bottom */
.pad-xl-top:not(.e-con-boxed) {
padding-top: clamp(5rem, 2.9282rem + 8.8398vw, 10rem);
padding-bottom: clamp(4rem, 2.5497rem + 6.1878vw, 7.5rem);
}
.pad-xl-top.e-con-boxed > .e-con-inner {
padding-top: clamp(5rem, 2.9282rem + 8.8398vw, 10rem);
padding-bottom: clamp(4rem, 2.5497rem + 6.1878vw, 7.5rem);
}
/* .pad-xl-bottom — lg on top, xl on bottom */
.pad-xl-bottom:not(.e-con-boxed) {
padding-top: clamp(4rem, 2.5497rem + 6.1878vw, 7.5rem);
padding-bottom: clamp(5rem, 2.9282rem + 8.8398vw, 10rem);
}
.pad-xl-bottom.e-con-boxed > .e-con-inner {
padding-top: clamp(4rem, 2.5497rem + 6.1878vw, 7.5rem);
padding-bottom: clamp(5rem, 2.9282rem + 8.8398vw, 10rem);
}
/* ========== SKIP-TIER ASYMMETRIC PADDING CLASSES ========== */
/* Named with both tiers spelled out for clarity — same values as the
older pad-md-top / pad-md-bottom / pad-lg-top / pad-lg-bottom classes
above (kept as-is since those are already live on real pages), just
under names that say both sizes instead of only one. */
/* .pad-sm-top-md-bottom — sm on top, md on bottom (same values as pad-md-bottom) */
.pad-sm-top-md-bottom:not(.e-con-boxed) {
padding-top: clamp(2.5rem, 1.4641rem + 4.4199vw, 5rem);
padding-bottom: clamp(3rem, 1.7569rem + 5.3039vw, 6rem);
}
.pad-sm-top-md-bottom.e-con-boxed > .e-con-inner {
padding-top: clamp(2.5rem, 1.4641rem + 4.4199vw, 5rem);
padding-bottom: clamp(3rem, 1.7569rem + 5.3039vw, 6rem);
}
/* .pad-md-top-sm-bottom — md on top, sm on bottom (same values as pad-md-top) */
.pad-md-top-sm-bottom:not(.e-con-boxed) {
padding-top: clamp(3rem, 1.7569rem + 5.3039vw, 6rem);
padding-bottom: clamp(2.5rem, 1.4641rem + 4.4199vw, 5rem);
}
.pad-md-top-sm-bottom.e-con-boxed > .e-con-inner {
padding-top: clamp(3rem, 1.7569rem + 5.3039vw, 6rem);
padding-bottom: clamp(2.5rem, 1.4641rem + 4.4199vw, 5rem);
}
/* .pad-sm-top-lg-bottom — sm on top, lg on bottom */
.pad-sm-top-lg-bottom:not(.e-con-boxed) {
padding-top: clamp(2.5rem, 1.4641rem + 4.4199vw, 5rem);
padding-bottom: clamp(4rem, 2.5497rem + 6.1878vw, 7.5rem);
}
.pad-sm-top-lg-bottom.e-con-boxed > .e-con-inner {
padding-top: clamp(2.5rem, 1.4641rem + 4.4199vw, 5rem);
padding-bottom: clamp(4rem, 2.5497rem + 6.1878vw, 7.5rem);
}
/* .pad-lg-top-sm-bottom — lg on top, sm on bottom */
.pad-lg-top-sm-bottom:not(.e-con-boxed) {
padding-top: clamp(4rem, 2.5497rem + 6.1878vw, 7.5rem);
padding-bottom: clamp(2.5rem, 1.4641rem + 4.4199vw, 5rem);
}
.pad-lg-top-sm-bottom.e-con-boxed > .e-con-inner {
padding-top: clamp(4rem, 2.5497rem + 6.1878vw, 7.5rem);
padding-bottom: clamp(2.5rem, 1.4641rem + 4.4199vw, 5rem);
}
/* ==========================================================================
GLASS HEADER SCROLL EFFECT
--------------------------------------------------------------------------
Transparent at the top of the page; frosted glass once scrolled. Uses the
site's own Text color token (#002C6E) rather than a flat rgba value, so
it stays in sync if that token ever changes. The .is-scrolled class is
toggled by JS (nanocelle-elementor-widgets plugin, assets/js/glass-header.js)
on scroll. Applied to the "Pill Header" element (id 2318d85) in the
site-wide Header Theme Builder template (post #70) via its css_classes
setting — see scripts and the Theme Builder Header template itself.
!important throughout: Elementor's own per-element background rule for
this container has equal specificity — without !important, it can win
regardless of load order and the glass effect never shows despite the
is-scrolled class toggling correctly.
========================================================================== */
.glass-header {
background: var(--e-global-color-text, #002C6E) !important;
backdrop-filter: blur(0px) !important;
-webkit-backdrop-filter: blur(0px) !important;
transition: background 0.4s ease, backdrop-filter 0.4s ease, padding 0.4s ease, min-height 0.4s ease, border-radius 0.4s ease !important;
}
/*
* Real box-model shrink on the header itself, NOT transform:scale() —
* scaling the whole .glass-header used to also catch the mega menu's
* dropdown panel (elementor-element-2b2da33, an .e-con-full container
* that breaks out to full viewport width via Elementor's own
* width:100vw-style trick) in its transformed containing block, so the
* dropdown rendered shrunk AND shifted toward the scale's transform-origin
* instead of spanning the real viewport under its own nav item — the
* "menu goes left once the header shrinks on scroll" bug. Padding/
* min-height/border-radius changes don't create a containing block for
* anything, so this can't recur regardless of what's nested inside.
*/
.glass-header.is-scrolled {
background: color-mix(in srgb, var(--e-global-color-text, #002C6E) 75%, transparent) !important;
backdrop-filter: blur(28px) !important;
-webkit-backdrop-filter: blur(28px) !important;
border: 1px solid rgba(255, 255, 255, 0.07) !important;
padding-top: 8px !important;
padding-bottom: 8px !important;
padding-left: 64px !important;
padding-right: 64px !important;
min-height: 64px !important;
border-radius: 56px !important;
}
/*
* The visible "everything gets a bit smaller" look is recreated here with
* transform:scale(0.8) applied directly to specific leaf-ish elements
* instead — each one verified to have no e-con-full / dropdown-panel
* descendant, so none of them can reintroduce the bug above. The mega
* menu's dropdown content sits as a SIBLING of .e-n-menu-title within the
* same (confirmed in the rendered DOM), not inside it, so scaling
* the title/icon here never touches it.
*/
.glass-header.is-scrolled .elementor-element-da74a07 .elementor-heading-title,
.glass-header.is-scrolled .elementor-element-ab116df .elementor-heading-title,
.glass-header.is-scrolled .e-n-menu-title,
.glass-header.is-scrolled .e-n-menu-dropdown-icon {
transform: scale(0.8) !important;
transition: transform 0.4s ease !important;
}
/* Shrink-on-scroll is desktop/tablet only — on mobile the header is
already compact, and scaling it down further crowds the logo/nav. */
@media (max-width: 767px) {
/* Cancel the shrink, but restore the header's actual resting pill shape
(its own mobile padding/border-radius/min-height) — `initial` was
zeroing border-radius and padding entirely, turning the pill into a
flush, square-cornered bar on scroll instead of leaving it unchanged. */
.glass-header.is-scrolled {
padding: 18px 32px !important;
min-height: 80px !important;
border-radius: 50px !important;
}
.glass-header.is-scrolled .elementor-element-da74a07 .elementor-heading-title,
.glass-header.is-scrolled .elementor-element-ab116df .elementor-heading-title,
.glass-header.is-scrolled .e-n-menu-title,
.glass-header.is-scrolled .e-n-menu-dropdown-icon {
transform: none !important;
}
}
/* ==========================================================================
MOBILE OFF-CANVAS MENU — HOME ICON
--------------------------------------------------------------------------
Pinned to the bottom of the off-canvas panel regardless of how much
accordion content sits above it — the panel is a column flex container,
so margin-top:auto pushes this one item to the end instead of it just
trailing after the accordion.
========================================================================== */
.elementor-element-223aff5 {
margin-top: auto !important;
}
/* ==========================================================================
SITE-WIDE BUTTON HOVER
--------------------------------------------------------------------------
The Kit's own Theme Style > Buttons hover (background_color -> Text/navy)
is defined in the generated CSS but gets outranked by per-page/per-widget
rules on many buttons, so hovering did nothing at all on most of the site.
Rather than hunt down every individual button's specificity, this applies
one consistent hover treatment everywhere via !important — a background
fill (solid buttons darken, outline/transparent buttons fill in with the
brand navy), a matching border, and a subtle lift, with a smooth
transition in both directions. White text buttons stay legible against
the navy fill; buttons with colour text (e.g. outline CTAs already using
navy/primary) also read fine once filled, since navy-on-navy text is the
one combination this can't universally predict — none currently do that.
========================================================================== */
.elementor-button,
.elementor-button-link {
transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
}
.elementor-button:hover,
.elementor-button:focus,
.elementor-button-link:hover,
.elementor-button-link:focus {
background-color: var(--e-global-color-text, #002C6E) !important;
border-color: var(--e-global-color-text, #002C6E) !important;
color: var(--e-global-color-nc_white, #FFFFFF) !important;
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(0, 44, 110, 0.22);
}
.elementor-button:hover svg,
.elementor-button:focus svg,
.elementor-button-link:hover svg,
.elementor-button-link:focus svg {
fill: var(--e-global-color-nc_white, #FFFFFF) !important;
}
/* ==========================================================================
GRADIENT OVERLAYS (for layering on top of a video/image background)
--------------------------------------------------------------------------
.dark-gradient / .soft-gradient set a plain `background`, which would
replace a video background entirely. These target Elementor's own
background-overlay pseudo-element instead, so the gradient sits on top
of whatever's behind it (video, image, slideshow) rather than replacing
it. Self-contained — Elementor's own "Background Overlay" toggle does
NOT need to be enabled separately, this class generates its own
::before layer. Apply via Section/Container → Advanced → CSS Classes.
========================================================================== */
.dark-gradient-overlay::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
/* Negative (not +1): this selector fires directly on the .e-con itself,
not nested inside Elementor's video/slideshow wrapper — so unlike the
nested rule below, there's no separate stacking context to contain it.
A positive z-index here would paint above .e-con-inner's real content
(it's position:static by default, landing it a full stacking tier
below any positioned positive-z-index sibling, DOM order notwithstanding).
Do NOT "fix" this by giving .e-con-inner position+z-index instead —
that was tried and it broke something more important: Elementor's
background-video-container is position:absolute and resolves its
inset:0 against the nearest positioned ancestor. .e-con-inner is the
boxed, max-width-constrained inner wrapper — making it positioned
turns it into that containing block, which shrinks the video to the
boxed width instead of the full-bleed .e-con behind it. z-index:-1
here sits above .e-con's own background/color (layer 0) but below
.e-con-inner's in-flow content (layer "3"), with zero side effects
on any other element's containing-block chain. */
z-index: -1 !important;
pointer-events: none !important;
opacity: 0.6 !important;
background:
radial-gradient(
ellipse at 0% 0%,
var(--e-global-color-accent, #B56BE7) 0%,
var(--e-global-color-accent, #9C6BD0) 22%,
transparent 55%
),
radial-gradient(
ellipse at 100% 100%,
var(--e-global-color-secondary, #28C7DF) 0%,
var(--e-global-color-secondary, #48C7DC) 28%,
transparent 65%
),
linear-gradient(
135deg,
var(--e-global-color-nc_black, #09052D) 0%,
var(--e-global-color-text, #18264B) 30%,
var(--e-global-color-nc_blue02, #6688B4) 58%,
var(--e-global-color-nc_bluepale, #EEFAFA) 100%
) !important;
}
.dark-gradient-overlay > .elementor-background-video-container::before,
.dark-gradient-overlay > .e-con-inner > .elementor-background-video-container::before,
.dark-gradient-overlay > .elementor-background-slideshow::before,
.dark-gradient-overlay > .e-con-inner > .elementor-background-slideshow::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
/* Positive here is safe: this fires inside Elementor's own video/
slideshow wrapper, which is already position:absolute with its own
z-index — a separate, self-contained stacking context that never
competes with .e-con-inner's real content. */
z-index: 1 !important;
pointer-events: none !important;
opacity: 0.6 !important;
background:
radial-gradient(
ellipse at 0% 0%,
var(--e-global-color-accent, #B56BE7) 0%,
var(--e-global-color-accent, #9C6BD0) 22%,
transparent 55%
),
radial-gradient(
ellipse at 100% 100%,
var(--e-global-color-secondary, #28C7DF) 0%,
var(--e-global-color-secondary, #48C7DC) 28%,
transparent 65%
),
linear-gradient(
135deg,
var(--e-global-color-nc_black, #09052D) 0%,
var(--e-global-color-text, #18264B) 30%,
var(--e-global-color-nc_blue02, #6688B4) 58%,
var(--e-global-color-nc_bluepale, #EEFAFA) 100%
) !important;
}
.soft-gradient-overlay::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
z-index: -1 !important;
pointer-events: none !important;
opacity: 0.6 !important;
background: linear-gradient(
120deg,
var(--e-global-color-nc_purplepale, #EAD0F6) 0%,
var(--e-global-color-nc_bluepale, #F7F4FB) 30%,
var(--e-global-color-nc_bluepale, #E7FBFC) 52%,
var(--e-global-color-nc_cyanpale, #B9F3F7) 72%,
var(--e-global-color-secondary, #50D2E5) 100%
) !important;
}
.soft-gradient-overlay > .elementor-background-video-container::before,
.soft-gradient-overlay > .e-con-inner > .elementor-background-video-container::before,
.soft-gradient-overlay > .elementor-background-slideshow::before,
.soft-gradient-overlay > .e-con-inner > .elementor-background-slideshow::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
pointer-events: none !important;
opacity: 0.6 !important;
background: linear-gradient(
120deg,
var(--e-global-color-nc_purplepale, #EAD0F6) 0%,
var(--e-global-color-nc_bluepale, #F7F4FB) 30%,
var(--e-global-color-nc_bluepale, #E7FBFC) 52%,
var(--e-global-color-nc_cyanpale, #B9F3F7) 72%,
var(--e-global-color-secondary, #50D2E5) 100%
) !important;
}
/* ==========================================================================
GRADIENT OVERLAY OPACITY VARIANTS
--------------------------------------------------------------------------
Same gradients as .dark-gradient-overlay / .soft-gradient-overlay, just
at fixed opacity steps instead of the default 0.6. Use the plain
.dark-gradient-overlay / .soft-gradient-overlay classes for the original
strength; use -20/-40/-60/-80 for a lighter or heavier wash.
========================================================================== */
.dark-gradient-overlay-20::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
z-index: -1 !important;
pointer-events: none !important;
opacity: 0.2 !important;
background:
radial-gradient(
ellipse at 0% 0%,
var(--e-global-color-accent, #B56BE7) 0%,
var(--e-global-color-accent, #9C6BD0) 22%,
transparent 55%
),
radial-gradient(
ellipse at 100% 100%,
var(--e-global-color-secondary, #28C7DF) 0%,
var(--e-global-color-secondary, #48C7DC) 28%,
transparent 65%
),
linear-gradient(
135deg,
var(--e-global-color-nc_black, #09052D) 0%,
var(--e-global-color-text, #18264B) 30%,
var(--e-global-color-nc_blue02, #6688B4) 58%,
var(--e-global-color-nc_bluepale, #EEFAFA) 100%
) !important;
}
.dark-gradient-overlay-20 > .elementor-background-video-container::before,
.dark-gradient-overlay-20 > .e-con-inner > .elementor-background-video-container::before,
.dark-gradient-overlay-20 > .elementor-background-slideshow::before,
.dark-gradient-overlay-20 > .e-con-inner > .elementor-background-slideshow::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
pointer-events: none !important;
opacity: 0.2 !important;
background:
radial-gradient(
ellipse at 0% 0%,
var(--e-global-color-accent, #B56BE7) 0%,
var(--e-global-color-accent, #9C6BD0) 22%,
transparent 55%
),
radial-gradient(
ellipse at 100% 100%,
var(--e-global-color-secondary, #28C7DF) 0%,
var(--e-global-color-secondary, #48C7DC) 28%,
transparent 65%
),
linear-gradient(
135deg,
var(--e-global-color-nc_black, #09052D) 0%,
var(--e-global-color-text, #18264B) 30%,
var(--e-global-color-nc_blue02, #6688B4) 58%,
var(--e-global-color-nc_bluepale, #EEFAFA) 100%
) !important;
}
.dark-gradient-overlay-40::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
z-index: -1 !important;
pointer-events: none !important;
opacity: 0.4 !important;
background:
radial-gradient(
ellipse at 0% 0%,
var(--e-global-color-accent, #B56BE7) 0%,
var(--e-global-color-accent, #9C6BD0) 22%,
transparent 55%
),
radial-gradient(
ellipse at 100% 100%,
var(--e-global-color-secondary, #28C7DF) 0%,
var(--e-global-color-secondary, #48C7DC) 28%,
transparent 65%
),
linear-gradient(
135deg,
var(--e-global-color-nc_black, #09052D) 0%,
var(--e-global-color-text, #18264B) 30%,
var(--e-global-color-nc_blue02, #6688B4) 58%,
var(--e-global-color-nc_bluepale, #EEFAFA) 100%
) !important;
}
.dark-gradient-overlay-40 > .elementor-background-video-container::before,
.dark-gradient-overlay-40 > .e-con-inner > .elementor-background-video-container::before,
.dark-gradient-overlay-40 > .elementor-background-slideshow::before,
.dark-gradient-overlay-40 > .e-con-inner > .elementor-background-slideshow::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
pointer-events: none !important;
opacity: 0.4 !important;
background:
radial-gradient(
ellipse at 0% 0%,
var(--e-global-color-accent, #B56BE7) 0%,
var(--e-global-color-accent, #9C6BD0) 22%,
transparent 55%
),
radial-gradient(
ellipse at 100% 100%,
var(--e-global-color-secondary, #28C7DF) 0%,
var(--e-global-color-secondary, #48C7DC) 28%,
transparent 65%
),
linear-gradient(
135deg,
var(--e-global-color-nc_black, #09052D) 0%,
var(--e-global-color-text, #18264B) 30%,
var(--e-global-color-nc_blue02, #6688B4) 58%,
var(--e-global-color-nc_bluepale, #EEFAFA) 100%
) !important;
}
.dark-gradient-overlay-60::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
z-index: -1 !important;
pointer-events: none !important;
opacity: 0.6 !important;
background:
radial-gradient(
ellipse at 0% 0%,
var(--e-global-color-accent, #B56BE7) 0%,
var(--e-global-color-accent, #9C6BD0) 22%,
transparent 55%
),
radial-gradient(
ellipse at 100% 100%,
var(--e-global-color-secondary, #28C7DF) 0%,
var(--e-global-color-secondary, #48C7DC) 28%,
transparent 65%
),
linear-gradient(
135deg,
var(--e-global-color-nc_black, #09052D) 0%,
var(--e-global-color-text, #18264B) 30%,
var(--e-global-color-nc_blue02, #6688B4) 58%,
var(--e-global-color-nc_bluepale, #EEFAFA) 100%
) !important;
}
.dark-gradient-overlay-60 > .elementor-background-video-container::before,
.dark-gradient-overlay-60 > .e-con-inner > .elementor-background-video-container::before,
.dark-gradient-overlay-60 > .elementor-background-slideshow::before,
.dark-gradient-overlay-60 > .e-con-inner > .elementor-background-slideshow::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
pointer-events: none !important;
opacity: 0.6 !important;
background:
radial-gradient(
ellipse at 0% 0%,
var(--e-global-color-accent, #B56BE7) 0%,
var(--e-global-color-accent, #9C6BD0) 22%,
transparent 55%
),
radial-gradient(
ellipse at 100% 100%,
var(--e-global-color-secondary, #28C7DF) 0%,
var(--e-global-color-secondary, #48C7DC) 28%,
transparent 65%
),
linear-gradient(
135deg,
var(--e-global-color-nc_black, #09052D) 0%,
var(--e-global-color-text, #18264B) 30%,
var(--e-global-color-nc_blue02, #6688B4) 58%,
var(--e-global-color-nc_bluepale, #EEFAFA) 100%
) !important;
}
.dark-gradient-overlay-80::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
z-index: -1 !important;
pointer-events: none !important;
opacity: 0.8 !important;
background:
radial-gradient(
ellipse at 0% 0%,
var(--e-global-color-accent, #B56BE7) 0%,
var(--e-global-color-accent, #9C6BD0) 22%,
transparent 55%
),
radial-gradient(
ellipse at 100% 100%,
var(--e-global-color-secondary, #28C7DF) 0%,
var(--e-global-color-secondary, #48C7DC) 28%,
transparent 65%
),
linear-gradient(
135deg,
var(--e-global-color-nc_black, #09052D) 0%,
var(--e-global-color-text, #18264B) 30%,
var(--e-global-color-nc_blue02, #6688B4) 58%,
var(--e-global-color-nc_bluepale, #EEFAFA) 100%
) !important;
}
.dark-gradient-overlay-80 > .elementor-background-video-container::before,
.dark-gradient-overlay-80 > .e-con-inner > .elementor-background-video-container::before,
.dark-gradient-overlay-80 > .elementor-background-slideshow::before,
.dark-gradient-overlay-80 > .e-con-inner > .elementor-background-slideshow::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
pointer-events: none !important;
opacity: 0.8 !important;
background:
radial-gradient(
ellipse at 0% 0%,
var(--e-global-color-accent, #B56BE7) 0%,
var(--e-global-color-accent, #9C6BD0) 22%,
transparent 55%
),
radial-gradient(
ellipse at 100% 100%,
var(--e-global-color-secondary, #28C7DF) 0%,
var(--e-global-color-secondary, #48C7DC) 28%,
transparent 65%
),
linear-gradient(
135deg,
var(--e-global-color-nc_black, #09052D) 0%,
var(--e-global-color-text, #18264B) 30%,
var(--e-global-color-nc_blue02, #6688B4) 58%,
var(--e-global-color-nc_bluepale, #EEFAFA) 100%
) !important;
}
.soft-gradient-overlay-20::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
z-index: -1 !important;
pointer-events: none !important;
opacity: 0.2 !important;
background: linear-gradient(
120deg,
var(--e-global-color-nc_purplepale, #EAD0F6) 0%,
var(--e-global-color-nc_bluepale, #F7F4FB) 30%,
var(--e-global-color-nc_bluepale, #E7FBFC) 52%,
var(--e-global-color-nc_cyanpale, #B9F3F7) 72%,
var(--e-global-color-secondary, #50D2E5) 100%
) !important;
}
.soft-gradient-overlay-20 > .elementor-background-video-container::before,
.soft-gradient-overlay-20 > .e-con-inner > .elementor-background-video-container::before,
.soft-gradient-overlay-20 > .elementor-background-slideshow::before,
.soft-gradient-overlay-20 > .e-con-inner > .elementor-background-slideshow::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
pointer-events: none !important;
opacity: 0.2 !important;
background: linear-gradient(
120deg,
var(--e-global-color-nc_purplepale, #EAD0F6) 0%,
var(--e-global-color-nc_bluepale, #F7F4FB) 30%,
var(--e-global-color-nc_bluepale, #E7FBFC) 52%,
var(--e-global-color-nc_cyanpale, #B9F3F7) 72%,
var(--e-global-color-secondary, #50D2E5) 100%
) !important;
}
.soft-gradient-overlay-40::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
z-index: -1 !important;
pointer-events: none !important;
opacity: 0.4 !important;
background: linear-gradient(
120deg,
var(--e-global-color-nc_purplepale, #EAD0F6) 0%,
var(--e-global-color-nc_bluepale, #F7F4FB) 30%,
var(--e-global-color-nc_bluepale, #E7FBFC) 52%,
var(--e-global-color-nc_cyanpale, #B9F3F7) 72%,
var(--e-global-color-secondary, #50D2E5) 100%
) !important;
}
.soft-gradient-overlay-40 > .elementor-background-video-container::before,
.soft-gradient-overlay-40 > .e-con-inner > .elementor-background-video-container::before,
.soft-gradient-overlay-40 > .elementor-background-slideshow::before,
.soft-gradient-overlay-40 > .e-con-inner > .elementor-background-slideshow::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
pointer-events: none !important;
opacity: 0.4 !important;
background: linear-gradient(
120deg,
var(--e-global-color-nc_purplepale, #EAD0F6) 0%,
var(--e-global-color-nc_bluepale, #F7F4FB) 30%,
var(--e-global-color-nc_bluepale, #E7FBFC) 52%,
var(--e-global-color-nc_cyanpale, #B9F3F7) 72%,
var(--e-global-color-secondary, #50D2E5) 100%
) !important;
}
.soft-gradient-overlay-60::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
z-index: -1 !important;
pointer-events: none !important;
opacity: 0.6 !important;
background: linear-gradient(
120deg,
var(--e-global-color-nc_purplepale, #EAD0F6) 0%,
var(--e-global-color-nc_bluepale, #F7F4FB) 30%,
var(--e-global-color-nc_bluepale, #E7FBFC) 52%,
var(--e-global-color-nc_cyanpale, #B9F3F7) 72%,
var(--e-global-color-secondary, #50D2E5) 100%
) !important;
}
.soft-gradient-overlay-60 > .elementor-background-video-container::before,
.soft-gradient-overlay-60 > .e-con-inner > .elementor-background-video-container::before,
.soft-gradient-overlay-60 > .elementor-background-slideshow::before,
.soft-gradient-overlay-60 > .e-con-inner > .elementor-background-slideshow::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
pointer-events: none !important;
opacity: 0.6 !important;
background: linear-gradient(
120deg,
var(--e-global-color-nc_purplepale, #EAD0F6) 0%,
var(--e-global-color-nc_bluepale, #F7F4FB) 30%,
var(--e-global-color-nc_bluepale, #E7FBFC) 52%,
var(--e-global-color-nc_cyanpale, #B9F3F7) 72%,
var(--e-global-color-secondary, #50D2E5) 100%
) !important;
}
.soft-gradient-overlay-80::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
z-index: -1 !important;
pointer-events: none !important;
opacity: 0.8 !important;
background: linear-gradient(
120deg,
var(--e-global-color-nc_purplepale, #EAD0F6) 0%,
var(--e-global-color-nc_bluepale, #F7F4FB) 30%,
var(--e-global-color-nc_bluepale, #E7FBFC) 52%,
var(--e-global-color-nc_cyanpale, #B9F3F7) 72%,
var(--e-global-color-secondary, #50D2E5) 100%
) !important;
}
.soft-gradient-overlay-80 > .elementor-background-video-container::before,
.soft-gradient-overlay-80 > .e-con-inner > .elementor-background-video-container::before,
.soft-gradient-overlay-80 > .elementor-background-slideshow::before,
.soft-gradient-overlay-80 > .e-con-inner > .elementor-background-slideshow::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
pointer-events: none !important;
opacity: 0.8 !important;
background: linear-gradient(
120deg,
var(--e-global-color-nc_purplepale, #EAD0F6) 0%,
var(--e-global-color-nc_bluepale, #F7F4FB) 30%,
var(--e-global-color-nc_bluepale, #E7FBFC) 52%,
var(--e-global-color-nc_cyanpale, #B9F3F7) 72%,
var(--e-global-color-secondary, #50D2E5) 100%
) !important;
}
/* ==========================================================================
GRADIENT OVERLAY BLEND VARIANTS
--------------------------------------------------------------------------
Same layering technique as .dark-gradient-overlay / .soft-gradient-overlay
(target Elementor's own background-overlay pseudo-element, self-contained,
no need to enable Elementor's overlay toggle separately) — but instead of
a flat opacity fade, these use mix-blend-mode at full opacity so the
gradient actually interacts with the video/image underneath (bright
footage punches through, dark footage darkens further) rather than just
sitting on top of it at a fixed transparency.
========================================================================== */
/* .dark-gradient-overlay-soft-light — 100% opacity, soft-light blend */
.dark-gradient-overlay-soft-light::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
z-index: -1 !important;
pointer-events: none !important;
opacity: 1 !important;
mix-blend-mode: soft-light !important;
background:
radial-gradient(
ellipse at 0% 0%,
var(--e-global-color-accent, #B56BE7) 0%,
var(--e-global-color-accent, #9C6BD0) 22%,
transparent 55%
),
radial-gradient(
ellipse at 100% 100%,
var(--e-global-color-secondary, #28C7DF) 0%,
var(--e-global-color-secondary, #48C7DC) 28%,
transparent 65%
),
linear-gradient(
135deg,
var(--e-global-color-nc_black, #09052D) 0%,
var(--e-global-color-text, #18264B) 30%,
var(--e-global-color-nc_blue02, #6688B4) 58%,
var(--e-global-color-nc_bluepale, #EEFAFA) 100%
) !important;
}
.dark-gradient-overlay-soft-light > .elementor-background-video-container::before,
.dark-gradient-overlay-soft-light > .e-con-inner > .elementor-background-video-container::before,
.dark-gradient-overlay-soft-light > .elementor-background-slideshow::before,
.dark-gradient-overlay-soft-light > .e-con-inner > .elementor-background-slideshow::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
pointer-events: none !important;
opacity: 1 !important;
mix-blend-mode: soft-light !important;
background:
radial-gradient(
ellipse at 0% 0%,
var(--e-global-color-accent, #B56BE7) 0%,
var(--e-global-color-accent, #9C6BD0) 22%,
transparent 55%
),
radial-gradient(
ellipse at 100% 100%,
var(--e-global-color-secondary, #28C7DF) 0%,
var(--e-global-color-secondary, #48C7DC) 28%,
transparent 65%
),
linear-gradient(
135deg,
var(--e-global-color-nc_black, #09052D) 0%,
var(--e-global-color-text, #18264B) 30%,
var(--e-global-color-nc_blue02, #6688B4) 58%,
var(--e-global-color-nc_bluepale, #EEFAFA) 100%
) !important;
}
/* .dark-gradient-overlay-lighten — 100% opacity, lighten blend */
.dark-gradient-overlay-lighten::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
z-index: -1 !important;
pointer-events: none !important;
opacity: 1 !important;
mix-blend-mode: lighten !important;
background:
radial-gradient(
ellipse at 0% 0%,
var(--e-global-color-accent, #B56BE7) 0%,
var(--e-global-color-accent, #9C6BD0) 22%,
transparent 55%
),
radial-gradient(
ellipse at 100% 100%,
var(--e-global-color-secondary, #28C7DF) 0%,
var(--e-global-color-secondary, #48C7DC) 28%,
transparent 65%
),
linear-gradient(
135deg,
var(--e-global-color-nc_black, #09052D) 0%,
var(--e-global-color-text, #18264B) 30%,
var(--e-global-color-nc_blue02, #6688B4) 58%,
var(--e-global-color-nc_bluepale, #EEFAFA) 100%
) !important;
}
.dark-gradient-overlay-lighten > .elementor-background-video-container::before,
.dark-gradient-overlay-lighten > .e-con-inner > .elementor-background-video-container::before,
.dark-gradient-overlay-lighten > .elementor-background-slideshow::before,
.dark-gradient-overlay-lighten > .e-con-inner > .elementor-background-slideshow::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
pointer-events: none !important;
opacity: 1 !important;
mix-blend-mode: lighten !important;
background:
radial-gradient(
ellipse at 0% 0%,
var(--e-global-color-accent, #B56BE7) 0%,
var(--e-global-color-accent, #9C6BD0) 22%,
transparent 55%
),
radial-gradient(
ellipse at 100% 100%,
var(--e-global-color-secondary, #28C7DF) 0%,
var(--e-global-color-secondary, #48C7DC) 28%,
transparent 65%
),
linear-gradient(
135deg,
var(--e-global-color-nc_black, #09052D) 0%,
var(--e-global-color-text, #18264B) 30%,
var(--e-global-color-nc_blue02, #6688B4) 58%,
var(--e-global-color-nc_bluepale, #EEFAFA) 100%
) !important;
}
/* .soft-gradient-overlay-soft-light — 100% opacity, soft-light blend */
.soft-gradient-overlay-soft-light::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
z-index: -1 !important;
pointer-events: none !important;
opacity: 1 !important;
mix-blend-mode: soft-light !important;
background: linear-gradient(
120deg,
var(--e-global-color-nc_purplepale, #EAD0F6) 0%,
var(--e-global-color-nc_bluepale, #F7F4FB) 30%,
var(--e-global-color-nc_bluepale, #E7FBFC) 52%,
var(--e-global-color-nc_cyanpale, #B9F3F7) 72%,
var(--e-global-color-secondary, #50D2E5) 100%
) !important;
}
.soft-gradient-overlay-soft-light > .elementor-background-video-container::before,
.soft-gradient-overlay-soft-light > .e-con-inner > .elementor-background-video-container::before,
.soft-gradient-overlay-soft-light > .elementor-background-slideshow::before,
.soft-gradient-overlay-soft-light > .e-con-inner > .elementor-background-slideshow::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
pointer-events: none !important;
opacity: 1 !important;
mix-blend-mode: soft-light !important;
background: linear-gradient(
120deg,
var(--e-global-color-nc_purplepale, #EAD0F6) 0%,
var(--e-global-color-nc_bluepale, #F7F4FB) 30%,
var(--e-global-color-nc_bluepale, #E7FBFC) 52%,
var(--e-global-color-nc_cyanpale, #B9F3F7) 72%,
var(--e-global-color-secondary, #50D2E5) 100%
) !important;
}
/* .soft-gradient-overlay-lighten — 100% opacity, lighten blend */
.soft-gradient-overlay-lighten::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
z-index: -1 !important;
pointer-events: none !important;
opacity: 1 !important;
mix-blend-mode: lighten !important;
background: linear-gradient(
120deg,
var(--e-global-color-nc_purplepale, #EAD0F6) 0%,
var(--e-global-color-nc_bluepale, #F7F4FB) 30%,
var(--e-global-color-nc_bluepale, #E7FBFC) 52%,
var(--e-global-color-nc_cyanpale, #B9F3F7) 72%,
var(--e-global-color-secondary, #50D2E5) 100%
) !important;
}
.soft-gradient-overlay-lighten > .elementor-background-video-container::before,
.soft-gradient-overlay-lighten > .e-con-inner > .elementor-background-video-container::before,
.soft-gradient-overlay-lighten > .elementor-background-slideshow::before,
.soft-gradient-overlay-lighten > .e-con-inner > .elementor-background-slideshow::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
pointer-events: none !important;
opacity: 1 !important;
mix-blend-mode: lighten !important;
background: linear-gradient(
120deg,
var(--e-global-color-nc_purplepale, #EAD0F6) 0%,
var(--e-global-color-nc_bluepale, #F7F4FB) 30%,
var(--e-global-color-nc_bluepale, #E7FBFC) 52%,
var(--e-global-color-nc_cyanpale, #B9F3F7) 72%,
var(--e-global-color-secondary, #50D2E5) 100%
) !important;
}
/* ==========================================================================
BACKGROUND VIDEO CROP POSITION (tablet/mobile only)
--------------------------------------------------------------------------
Elementor centers a self-hosted background video and applies
object-fit:cover with no position control in the UI — on narrow screens
that crop can cut off the side of the shot that actually matters. These
classes only override the crop at Elementor's own tablet/mobile
breakpoint (<=1024px, covers both tiers in one query); desktop is
untouched and stays centered/cover as Elementor's default. Apply via
Section/Container -> Advanced -> CSS Classes.
========================================================================== */
@media (max-width: 1024px) {
.bg-video-left .elementor-background-video-hosted {
object-position: left center;
}
.bg-video-right .elementor-background-video-hosted {
object-position: right center;
}
.bg-video-top .elementor-background-video-hosted {
object-position: center top;
}
.bg-video-bottom .elementor-background-video-hosted {
object-position: center bottom;
}
}
/* ==========================================================================
INNER-PAGE HERO: mobile vertical centering + height
Root cause of "image isn't vertically centered" on mobile: Elementor's
Justify Content control on these Hero Section containers only ever
generates a CSS custom property (--justify-content: center), but no
base Elementor stylesheet rule on this site actually consumes that
variable into a real `justify-content` declaration — so the computed
value is always the browser default ("normal", i.e. content packs to
the start) at every breakpoint, regardless of what's set in the editor.
min-height's own variable IS consumed correctly (confirmed via
computed styles), which is why the box was the right height but its
content still sat at the top instead of centering within it.
Rather than chase why Elementor's variable plumbing is broken
site-wide (a bigger, separate investigation), this sets both properties
directly with real CSS, scoped to mobile only. Desktop/tablet are left
alone on purpose — one of these five (the Milestones hero,
elementor-element-b2c3b3f) deliberately uses "space-between" at desktop
for its two-block layout, not "center".
Selectors are the specific Hero Section containers on the ten inner
pages that use this hero pattern (Technology, Why it matters, Market
opportunity, Patent and IP protection share f422436; Science, Partner
with us, Regulatory pathway share b0cbe67; About is e52f646; Milestones
is b2c3b3f; Licensing is c34b2a7).
========================================================================== */
@media (max-width: 767px) {
.elementor-element-f422436,
.elementor-element-b0cbe67,
.elementor-element-e52f646,
.elementor-element-b2c3b3f,
.elementor-element-c34b2a7 {
justify-content: center !important;
min-height: 550px !important;
/* Reserves a dead zone under the floating header before centering
happens in the space that's left — otherwise centering (now that
it actually works, see above) shifts content up into the header.
Generous on purpose so small header-height variance across
phones never causes a real overlap; box-sizing:border-box means
this comes out of the 550px, it doesn't add to it. */
padding-top: 110px !important;
}
}
/* ==========================================================================
MOBILE OFF-CANVAS MENU: "Science" row height parity with the accordion
Typography (font family/weight/size per breakpoint/line-height) for
both the accordion titles (Technology/Opportunity/Milestones/About)
and "Science" (a plain heading widget standing in for an accordion
row it can't actually be, since it links out to its own page) is
handled by a real Elementor Global Font — Site Settings > Global
Fonts > "Mobile Menu Item" (kit custom_typography id
"mobile-menu-item": Acid Grotesk, weight 700, line-height 1.3em,
20px desktop/tablet, 16px mobile) — assigned to both widgets via the
Global dropdown in their typography controls. No hand-written CSS
needed for that part; Elementor renders global font assignments
correctly, including the responsive size steps, once the widget's
own local typography override is cleared in favor of the global.
(An earlier version of this fix hard-coded font values here instead,
because the accordion's LOCAL "custom" typography override wasn't
rendering — that's a real, narrower bug specific to un-linked custom
values on this widget, not a limitation of Global Fonts.)
What real CSS still handles: "Science" has its own fixed vertical
padding (24px top/bottom) that isn't part of the Global Font, and a
separately-edited padding_tablet override (top:6px) applies at BOTH
tablet AND mobile widths (Elementor's cascade: nothing narrower
overrides it) unless pinned back — otherwise this row goes well
short of the accordion's height and reads as off-center against its
divider lines. Both widgets carry their own custom class (set via
the editor's Advanced > CSS Classes field) instead of relying on the
auto-generated .elementor-element-{hash} selector, so this rule
stays easy to find: .nc-mobile-menu-accordion on the accordion,
.nc-mobile-menu-science on "Science".
========================================================================== */
.nc-mobile-menu-science {
padding-top: 24px !important;
}