/* === SS HOME START === */
/* First-fold tokens — Hero + Brands fill one screen under the header.
* Prefer 100svh (stable / small viewport) so browser chrome on 14" laptops
* is not ignored the way 100vh / large dvh can be. */
body.home {
--ss-home-header-h: clamp(56px, 8vw, 88px);
/*
* === Golden ladder for the four first-fold blocks ===
* One ratio, phi = 1.618, one anchor: the header (a), which is global
* chrome and must not move. Every tier below it is the one above / phi.
*
* a header 104.00 (given, fixed)
* d logo rail 96.00 (raised so the brand marks read on the
* first screen — see below)
*
* The rail was 64.28 (= a / phi) but the marks were optically too small to
* register on the first fold. It now sits at 96px and the marks are scaled
* up to a ~16px cap (see ss-home-brands-optical.css) so the brand wall is
* actually visible the moment the page opens, instead of being a faint
* strip at the very bottom edge.
*/
--ss-home-brands-h: 64px;
/* Vertical air .ss-hero__inner puts around the grid. The card's height
budget is the fold MINUS this on both edges — bounding it against the
raw fold double-charges the padding and shrinks the card far too far on
short viewports (see .ss-hero__spec). */
--ss-home-hero-pad: clamp(24px, 5vh, 56px);
/* Height the hero actually gets once header + brands rail are placed.
Reference (1920x950) = 950 - 104 - 64.28 = 781.72px — the K constants in
the scale-law block below are all desktop_value / 781.72. */
--ss-home-fold-h: calc(100svh - var(--ss-home-header-h) - var(--ss-home-brands-h));
/* The card's own width, published so the card's interior can be a fixed
fraction of it (the interior used to be hard-coded px and stopped
shrinking on a laptop). Width-driven like any Elementor image: 30vw,
capped at the designed 420px, so a 1440px-wide laptop and a 1920px
desktop both show the full 420px card. The third term is only a fit
guard so the card still fits a genuinely short fold; at 1440x900 and
1920x1080 the guard is looser than 420, so the cap decides and the card
is width-bound, never height-bound (a height-bound card reads too small
on a laptop). */
--ss-home-card-w: clamp(
260px,
min(30vw, calc((var(--ss-home-fold-h) - 2 * var(--ss-home-hero-pad) - 30px) / 1.176)),
420px
);
}
@media (max-width: 999px) {
body.home { --ss-home-header-h: clamp(56px, 8vw, 88px); }
}
@media (max-width: 689px) {
body.home {
--ss-home-header-h: clamp(56px, 8vw, 88px);
--ss-home-brands-h: 90px;
}
}
/* Locking the four golden tiers costs the fold ~8px it used to borrow from the
* rail, which leaves a 3px overflow at 660px. Take it back out of the air, not
* the content: nothing here changes composition, aspect or visibility — the
* padding is the designed buffer, so it is the only thing that should give. */
@media (max-height: 700px) {
body.home { --ss-home-hero-pad: clamp(20px, 4.6vh, 56px); }
}
/* 14" laptop browser viewports such as 1440x778 keep the hero copy taller
* than the fold math expects. Reduce the hero's vertical air so the brands
* rail still lands inside the first viewport instead of below it. */
@media (max-height: 820px) and (min-width: 1000px) {
body.home { --ss-home-hero-pad: clamp(14px, 2.8vh, 30px); }
}
/* —— Hero: layered stage — copy + floating product card ——
* First fold = Hero + Brands. Do NOT floor with max(520px) — that pushes
* brands below the fold on short laptop viewports. */
#ss-home-hero.ss-home-hero,
#ss-home-hero.e-con,
#ss-home-hero > .e-con-inner {
position: relative;
overflow: visible;
padding: 0 !important;
margin: 0 !important;
background: #060b16 !important;
min-height: calc(100vh - var(--ss-home-header-h) - var(--ss-home-brands-h));
min-height: calc(100dvh - var(--ss-home-header-h) - var(--ss-home-brands-h));
min-height: calc(100svh - var(--ss-home-header-h) - var(--ss-home-brands-h));
}
#ss-home-hero .elementor-widget-html,
#ss-home-hero .elementor-widget-container {
margin: 0 !important;
padding: 0 !important;
}
#ss-home-brands.ss-home-brands,
#ss-home-brands.e-con,
#ss-home-brands > .e-con-inner {
position: relative;
overflow: hidden;
padding: 0 !important;
margin: 0 !important;
}
#ss-home-brands .elementor-widget-html,
#ss-home-brands .elementor-widget-container {
margin: 0 !important;
padding: 0 !important;
}
/*
* Brands rail — reuse hero atmosphere (same stack), don’t invent a second plate.
* Hero DNA: floor var(--ss-night) → 54px grid (masked) → blue/cyan glow blobs → quiet mono logos.
* Height locked ~64px (header-height golden ratio).
*/
#ss-home-brands.ss-home-brands,
#ss-home-brands.ss-brands,
#ss-home-brands.e-con {
position: relative;
/* The rail sits on the hero's floor but gets its OWN material: a subtle
deep-blue wash (var(--ss-steel-soft) → var(--ss-steel)) that reads as the stage continuing
darker, not a black void — see the live site. A hairline under the bar
closes the band without ever showing above it. */
background: linear-gradient(180deg, var(--ss-steel-soft) 0%, var(--ss-steel) 100%) !important;
border: none !important;
border-top: none !important;
border-bottom: 1px solid rgba(148, 180, 255, 0.12) !important;
box-shadow: none;
overflow: hidden;
min-height: var(--ss-home-brands-h);
height: var(--ss-home-brands-h);
box-sizing: border-box;
}
/* Keep inner transparent so ::before/::after atmosphere shows through */
#ss-home-brands > .e-con-inner {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* The rail is part of the hero stage, not a separate plate: let it inherit
the same atmosphere (.ss-brands::before grid + ::after blue/cyan glow) so
the two areas share ONE material. The previous override killed those
pseudo-elements ("no competing hero atmosphere"), which left a flat
same-colour void under the richly-lit hero — the seam that read as
uncoordinated. */
#ss-home-brands .ss-brands__bar.e-con,
#ss-home-brands .ss-brands__bar > .e-con-inner {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
flex-wrap: nowrap !important;
gap: clamp(16px, 2vw, 28px) !important;
min-height: var(--ss-home-brands-h);
height: 100%;
width: 100%;
max-width: min(1520px, calc(100vw - clamp(48px, 8vw, 160px))) !important;
margin-inline: auto !important;
/* Vertical pad 0 — chip + logos center in the locked 64px */
padding: 0 clamp(24px, 4vw, 72px) !important;
box-sizing: border-box !important;
}
/* Label: green live dot only — no pill, no glow ring (one continuous bar) */
#ss-home-brands .ss-brands__label {
flex: none;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
#ss-home-brands .ss-brands__label::before {
content: none !important;
display: none !important;
}
#ss-home-brands .ss-brands__label .elementor-heading-title,
#ss-home-brands .ss-brands__label:not(:has(.elementor-heading-title)) {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
margin: 0 !important;
padding: 0 !important;
font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif !important;
font-size: 10.5px !important;
font-weight: 700 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
line-height: 1.2 !important;
/* Support text, not a heading: dim enough to read as a caption on the
hero floor rather than a second focal point competing with the hero. */
color: rgba(168, 190, 230, 0.58) !important;
background: none !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
white-space: nowrap;
}
/* Solid green dot + soft ring — same language as .ss-hero__dot (no pill) */
#ss-home-brands .ss-brands__label .elementor-heading-title::before,
#ss-home-brands .ss-brands__label:not(:has(.elementor-heading-title))::before {
content: "" !important;
display: block !important;
flex: none;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--ss-green);
box-shadow: 0 0 0 3px rgba(67, 230, 164, 0.25);
animation: ss-hero-pulse 2.2s ease-in-out infinite;
}
#ss-home-brands .ss-brands__viewport.e-con,
#ss-home-brands .ss-brands__viewport > .e-con-inner {
position: relative;
flex: 1 1 auto !important;
min-width: 0 !important;
width: auto !important;
max-width: none !important;
overflow: hidden !important;
padding: 0 !important;
/* Narrow edge fade — softens the marquee cut without hiding marks */
-webkit-mask-image: linear-gradient(90deg, transparent 0%, var(--ss-black) 2.2%, var(--ss-black) 97.8%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, var(--ss-black) 2.2%, var(--ss-black) 97.8%, transparent 100%);
}
#ss-home-brands .ss-brands__track.e-con {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
width: max-content !important;
max-width: none !important;
padding: 0 !important;
gap: 0 !important;
/* Animate track when groups are direct children (no .e-con-inner) */
animation: ss-brands-marquee 56s linear infinite !important;
will-change: transform;
}
#ss-home-brands .ss-brands__track:has(> .e-con-inner) {
animation: none !important;
will-change: auto;
}
#ss-home-brands .ss-brands__track > .e-con-inner {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
width: max-content !important;
max-width: none !important;
padding: 0 !important;
gap: 0 !important;
animation: ss-brands-marquee 56s linear infinite;
will-change: transform;
}
#ss-home-brands:hover .ss-brands__track.e-con,
#ss-home-brands:hover .ss-brands__track > .e-con-inner {
animation-play-state: paused !important;
}
#ss-home-brands .ss-brands__group.e-con,
#ss-home-brands .ss-brands__group > .e-con-inner {
display: flex !important;
flex: none !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 28px !important;
width: max-content !important;
max-width: none !important;
margin: 0 !important;
padding: 0 14px !important;
}
#ss-home-brands .ss-brands__item.e-con,
#ss-home-brands .ss-brands__item > .e-con-inner {
flex-direction: row !important;
gap: 0 !important;
height: auto;
}
#ss-home-brands .ss-brands__item.e-con,#ss-home-brands .ss-brands__item > .e-con-inner,#ss-home-brands .ss-brands__mark.e-con,#ss-home-brands .ss-brands__mark > .e-con-inner {
display: inline-flex !important;
flex: none !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
#ss-home-brands .ss-brands__mark.e-con,
#ss-home-brands .ss-brands__mark > .e-con-inner {
height: auto !important;
min-width: 0 !important;
line-height: 0;
}
#ss-home-brands .ss-brands__mark .elementor-widget-image,
#ss-home-brands .ss-brands__mark .elementor-widget-container {
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0;
}
/*
* Mark sizes: assets/css/ss-home-brands-optical.css (generated from
* _brands-inventory-catalog.json). Do NOT add per-slug height tiers here.
*/
#ss-home-brands .ss-brands__mark img {
display: block !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
/* Color harmony: 18 full-colour logos are the page's only uncontrolled
colour, and their mixed luminances (deep-blue IBM vs red F5 vs green HPE)
sink or pop unpredictably on the dark floor — that is the real "not
merged". Unify them to ONE silver-grey: grayscale to drop hue, a MODEST
brightness lift (not the old 1.6, which blew them to garish white), and
opacity to pull light marks back. Result is a calm, legible, single-tone
line — visible on the first screen, quiet against the cool hero. */
filter: grayscale(1) brightness(1.24) !important;
opacity: 0.78 !important;
visibility: visible !important;
user-select: none;
pointer-events: none;
}
#ss-home-brands .ss-brands__item:hover .ss-brands__mark img {
opacity: 0.96 !important;
}
@media (prefers-reduced-motion: reduce) {
#ss-home-brands .ss-brands__track.e-con,
#ss-home-brands .ss-brands__track > .e-con-inner {
animation: none !important;
flex-wrap: wrap !important;
width: 100% !important;
}
#ss-home-brands .ss-brands__group.is-duplicate,
#ss-home-brands #ss-brands-group-dup {
display: none !important;
}
#ss-home-brands .ss-brands__viewport.e-con,
#ss-home-brands .ss-brands__viewport > .e-con-inner {
-webkit-mask-image: none;
mask-image: none;
}
}
@media (max-width: 700px) {
#ss-home-brands .ss-brands__bar.e-con,
#ss-home-brands .ss-brands__bar > .e-con-inner {
flex-direction: column !important;
align-items: stretch !important;
gap: 20px !important;
min-height: 0;
height: auto;
padding: 14px clamp(20px, 4vw, 72px) 16px !important;
}
#ss-home-brands.ss-home-brands,
#ss-home-brands.ss-brands,
#ss-home-brands.e-con {
height: auto;
min-height: var(--ss-home-brands-h);
}
#ss-home-brands .ss-brands__label .elementor-heading-title,
#ss-home-brands .ss-brands__label:not(:has(.elementor-heading-title)) {
align-self: flex-start;
}
#ss-home-brands .ss-brands__group.e-con,
#ss-home-brands .ss-brands__group > .e-con-inner {
gap: 24px !important;
padding: 0 12px !important;
}
#ss-home-brands .ss-brands__mark.e-con,
#ss-home-brands .ss-brands__mark > .e-con-inner {
height: auto !important;
width: auto !important;
}
#ss-home-brands .ss-brands__item.e-con,
#ss-home-brands .ss-brands__item > .e-con-inner {
height: auto;
}
}
#ss-home-paths.ss-home-paths,
#ss-home-paths.e-con {
position: relative;
overflow: hidden;
}
#ss-home-paths .elementor-widget-html,
#ss-home-paths .elementor-widget-container {
margin: 0 !important;
padding: 0 !important;
width: 100%;
}
.ss-hero {
position: relative;
isolation: isolate;
overflow: hidden;
/* Promote to a compositing layer and contain paint so the blurred,
animated glow layers (filter: blur + translate3d) can't bleed outside
this box as intermittent color blocks during scroll. */
contain: paint;
transform: translateZ(0);
display: flex;
align-items: center;
/* Match #ss-home-hero — first fold with brands; no min floor. */
min-height: calc(100vh - var(--ss-home-header-h) - var(--ss-home-brands-h));
min-height: calc(100dvh - var(--ss-home-header-h) - var(--ss-home-brands-h));
min-height: calc(100svh - var(--ss-home-header-h) - var(--ss-home-brands-h));
background: radial-gradient(130% 100% at 12% -10%, var(--ss-navy) 0%, var(--ss-navy-deep) 42%, var(--ss-night) 100%);
color: var(--ss-white);
}
/* atmosphere */
.ss-hero__atmosphere {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.ss-hero__grid {
position: absolute;
inset: -1px;
background-image:
linear-gradient(rgba(148, 180, 255, 0.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(148, 180, 255, 0.08) 1px, transparent 1px);
background-size: 54px 54px;
/* Widen with the content band so large monitors don't leave flat
dark panels outside a narrow lit core. The live site keeps the grid
as a lit CORE that fades at its edges — not a wall-to-wall fill — so
it reads as light, not as a tiled texture. */
-webkit-mask-image: radial-gradient(88% 82% at 48% 44%, var(--ss-black) 0%, transparent 88%);
mask-image: radial-gradient(88% 82% at 48% 44%, var(--ss-black) 0%, transparent 88%);
}
.ss-hero__glow {
position: absolute;
border-radius: 50%;
filter: blur(70px);
}
.ss-hero__glow--a {
/* Scale with viewport width so the glow keeps real presence instead of
thinning out (as a % of the hero) on large/ultrawide monitors. */
width: clamp(560px, 40vw, 900px);
height: clamp(560px, 40vw, 900px);
left: clamp(-220px, -8vw, -140px);
top: -200px;
background: radial-gradient(circle, rgba(39, 119, 242, 0.55), transparent 72%);
animation: ss-hero-drift 17s ease-in-out infinite alternate;
}
.ss-hero__glow--b {
width: clamp(500px, 34vw, 820px);
height: clamp(500px, 34vw, 820px);
right: clamp(-200px, -7vw, -120px);
bottom: -220px;
background: radial-gradient(circle, rgba(79, 209, 255, 0.32), transparent 72%);
animation: ss-hero-drift 21s ease-in-out infinite alternate-reverse;
}
.ss-hero__glow--c {
/* Third accent seated behind the spec card so the right-hand zone on
wide screens reads as deliberately lit, not merely empty. */
width: clamp(360px, 30vw, 620px);
height: clamp(360px, 30vw, 620px);
right: clamp(-40px, 4vw, 120px);
top: 46%;
transform: translateY(-50%);
background: radial-gradient(circle, rgba(67, 230, 164, 0.16), transparent 74%);
animation: ss-hero-drift 24s ease-in-out infinite alternate;
}
@keyframes ss-hero-drift {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(34px, 24px, 0); }
}
.ss-hero__noise {
position: absolute;
inset: 0;
opacity: 0.05;
mix-blend-mode: overlay;
background-image: radial-gradient(var(--ss-white) 0.6px, transparent 0.6px);
background-size: 3px 3px;
}
/* layout — rail + φ split (copy : visual ≈ 1.618 : 1).
Gap capped near pad/φ so the middle doesn’t open into a dead channel. */
.ss-hero__inner {
position: relative;
z-index: 1;
width: 100%;
max-width: min(1520px, calc(100vw - clamp(48px, 8vw, 160px)));
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr);
align-items: center;
gap: clamp(24px, 2.8vw, 44px);
padding: clamp(24px, 5vh, 56px) clamp(24px, 4vw, 72px);
}
.ss-hero__copy {
position: relative;
animation: ss-hero-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes ss-hero-in {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
.ss-hero__badge {
display: inline-flex;
align-items: center;
flex-wrap: nowrap;
gap: 8px;
max-width: 100%;
margin: 0 0 16px;
padding: 7px 16px 7px 12px;
font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #d3e3ff;
background: linear-gradient(180deg, rgba(64, 138, 255, 0.22), rgba(39, 119, 242, 0.12));
border: 1px solid rgba(148, 190, 255, 0.6);
border-radius: 999px;
box-shadow: 0 0 0 1px rgba(148, 190, 255, 0.12) inset, 0 8px 20px -10px rgba(39, 119, 242, 0.6);
white-space: nowrap;
box-sizing: border-box;
}
.ss-hero__badge span {
flex: none;
white-space: nowrap;
}
.ss-hero__dot {
flex: none;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--ss-green);
box-shadow: 0 0 0 3px rgba(67, 230, 164, 0.25);
animation: ss-hero-pulse 2.2s ease-in-out infinite;
}
@keyframes ss-hero-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
.ss-hero__title {
margin: 0 0 12px;
max-width: 16em;
font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
font-size: clamp(28px, 2.6vw + 0.6rem, 50px);
font-weight: 700;
line-height: 1.14;
letter-spacing: -0.01em;
color: var(--ss-white);
text-wrap: balance;
}
.ss-hero__title-sub {
display: block;
margin-top: 4px;
font-size: clamp(16px, 1.6vw, 21px);
font-weight: 600;
letter-spacing: -0.005em;
background: linear-gradient(96deg, #8fc1ff 0%, var(--ss-cyan) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.ss-hero__lede {
margin: 0 0 18px;
max-width: min(36rem, 100%);
font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
font-size: clamp(14px, 1.05vw + 0.15rem, 17px);
line-height: 1.55;
color: rgba(226, 234, 250, 0.82);
}
.ss-hero__caps {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 2px;
margin: 0 0 6px;
}
.ss-hero__cap {
font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #9ec4ff;
text-decoration: none;
padding: 4px 8px;
border-bottom: 1px solid transparent;
transition: color 0.15s ease, border-color 0.15s ease;
}
.ss-hero__cap:hover {
color: var(--ss-white);
border-bottom-color: rgba(255, 255, 255, 0.5);
}
.ss-hero__cap-sep {
color: rgba(255, 255, 255, 0.3);
padding: 0 2px;
user-select: none;
}
.ss-hero__caps-note {
margin: 0 0 20px;
padding-left: 9px;
max-width: 28rem;
font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 1.45;
color: rgba(200, 214, 240, 0.62);
}
.ss-hero__cta {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 24px;
}
.ss-hero__btn--solid {
background: var(--ss-ink);
color: var(--ss-white) !important;
box-shadow: 0 14px 34px rgba(27, 50, 96, 0.28);
}
.ss-hero__btn--solid:hover {
background: #122544;
color: var(--ss-white) !important;
transform: translateY(-1px);
box-shadow: 0 18px 40px rgba(27, 50, 96, 0.26);
}
.ss-hero__btn--ghost {
background: rgba(255, 255, 255, 0.05);
color: var(--ss-white) !important;
border-color: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(10px);
}
.ss-hero__btn--ghost:hover {
background: rgba(255, 255, 255, 0.1);
border-color: var(--ss-white);
transform: translateY(-1px);
}
.ss-hero__stats {
display: flex;
flex-wrap: wrap;
gap: clamp(22px, 3.5vw, 40px);
/* Same measure as .ss-hero__lede — line ends on the text block’s right edge */
width: min(100%, 36rem);
max-width: 100%;
padding-top: 18px;
margin-bottom: 10px;
border-top: 1px solid var(--ss-white-14);
}
.ss-hero__stat {
display: flex;
flex-direction: column;
gap: 5px;
}
.ss-hero__stat-num {
font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
font-size: clamp(24px, 2.6vw, 30px);
font-weight: 700;
line-height: 1;
color: var(--ss-white);
white-space: nowrap;
}
.ss-hero__stat-label {
line-height: 1.3;
color: rgba(210, 222, 245, 0.68);
max-width: 11em;
}
.ss-hero__stat-label,.ss-hero__note {
font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
font-size: 12px;
}
.ss-hero__note {
margin: 0;
max-width: 34rem;
line-height: 1.5;
color: rgba(180, 197, 230, 0.55);
}
/* visual: unified server spec card */
.ss-hero__visual {
position: relative;
display: flex;
align-items: center;
justify-content: center;
/* Short laptops: cap by the fold, not the width — 42svh keeps the card
inside hero when the brands rail sits below (see ss-home-brands). */
height: clamp(260px, min(30vw, 42svh), 460px);
}
.ss-hero__stage-glow {
position: absolute;
width: min(560px, 96%);
height: min(560px, 96%);
border-radius: 50%;
background: radial-gradient(circle at 50% 32%, rgba(96, 200, 255, 0.38), rgba(39, 119, 242, 0.12) 52%, transparent 74%);
filter: blur(6px);
animation: ss-hero-orb 8s ease-in-out infinite;
}
@keyframes ss-hero-orb {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(0, -10px, 0) scale(1.03); }
}
.ss-hero__spec {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
width: min(clamp(260px, 30vw, 420px), 100%);
background:
radial-gradient(circle at 50% 30%, rgba(96, 200, 255, 0.18) 0%, rgba(39, 119, 242, 0.08) 52%, transparent 76%),
rgba(10, 20, 40, 0.86);
border: 1px solid rgba(140, 178, 255, 0.22);
box-shadow: 0 22px 44px -20px rgba(0, 0, 0, 0.48), 0 34px 70px -30px rgba(15, 60, 160, 0.38);
animation: ss-hero-float 12s ease-in-out infinite;
}
@keyframes ss-hero-float {
0%, 100% { transform: translate3d(0, 0, 0); }
50% { transform: translate3d(0, -5px, 0); }
}
.ss-hero__spec::before,
.ss-hero__spec::after {
content: "";
position: absolute;
width: 18px;
height: 18px;
pointer-events: none;
z-index: 3;
}
.ss-hero__spec::before {
left: 0;
top: 0;
border-top: 1.5px solid var(--ss-cyan-soft);
border-left: 1.5px solid var(--ss-cyan-soft);
}
.ss-hero__spec::after {
right: 0;
bottom: 0;
border-bottom: 1.5px solid var(--ss-cyan-soft);
border-right: 1.5px solid var(--ss-cyan-soft);
}
.ss-hero__spec-media {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
border-bottom: 1px solid rgba(140, 178, 255, 0.22);
}
/* Fills the 4:3 stage when sunspike.css loads AFTER Elementor (normal enqueue). */
.ss-hero__spec-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 42%;
}
.ss-hero__spec-media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 55%, rgba(10, 20, 40, 0.9) 100%);
pointer-events: none;
}
.ss-hero__spec-live {
position: absolute;
left: 14px;
top: 14px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 12px;
font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #eaf1ff;
background: rgba(6, 13, 28, 0.72);
border: 1px solid rgba(148, 180, 255, 0.3);
border-radius: 999px;
backdrop-filter: blur(8px);
}
.ss-hero__spec-live .ss-hero__chip-dot {
flex: none;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--ss-green);
box-shadow: 0 0 0 3px rgba(67, 230, 164, 0.25);
animation: ss-hero-pulse 2.2s ease-in-out infinite;
}
.ss-hero__spec-info {
position: relative;
padding: 20px 22px 22px;
}
.ss-hero__spec-eyebrow {
margin: 0 0 4px;
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #7ea9ff;
}
.ss-hero__spec-eyebrow,.ss-hero__spec-heading {
font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
font-weight: 700;
}
.ss-hero__spec-heading {
margin: 0 0 14px;
font-size: 21px;
letter-spacing: -0.01em;
color: var(--ss-white);
}
.ss-hero__spec-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 14px;
margin: 0;
padding: 14px 0 0;
list-style: none;
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.ss-hero__spec-list li {
display: flex;
align-items: center;
gap: 8px;
font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
color: rgba(226, 234, 250, 0.9);
}
.ss-hero__spec-check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 17px;
height: 17px;
flex: none;
font-size: 9px;
color: #08121f;
background: var(--ss-cyan);
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(79, 209, 255, 0.16);
}
@media (prefers-reduced-motion: reduce) {
.ss-hero__glow,
.ss-hero__stage-glow,
.ss-hero__dot,
.ss-hero__spec {
animation: none !important;
}
}
/* Two-column layout (grid fr-based) is kept all the way down to 681px so the
hero height stays roughly constant across desktop/laptop/tablet — only
switch to a stacked layout once there truly isn't room side-by-side. */
@media (max-width: 560px) {
.ss-hero__inner {
grid-template-columns: 1fr;
padding: 28px 20px 32px;
gap: 22px;
}
.ss-hero__copy {
max-width: 100%;
}
.ss-hero__title {
max-width: none;
}
.ss-hero__badge {
font-size: 10.5px;
letter-spacing: 0.07em;
padding: 7px 14px 7px 11px;
}
.ss-hero__stats {
gap: 14px 26px;
}
.ss-hero__stat-num {
font-size: 23px;
}
.ss-hero__visual {
height: auto;
margin-top: 4px;
}
.ss-hero__spec {
width: 100%;
}
.ss-hero__spec-media {
aspect-ratio: 16 / 9;
}
.ss-hero__spec-info {
padding: 18px 18px 20px;
}
.ss-hero__spec-heading {
margin-bottom: 10px;
font-size: 20px;
}
.ss-hero__spec-list {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 6px;
padding-top: 12px;
}
.ss-hero__spec-list li {
flex-direction: column;
align-items: flex-start;
gap: 5px;
font-size: 10px;
line-height: 1.2;
}
}
/* —— Brands marquee (under hero) —— */
/* Reuse hero atmosphere stack: floor → masked 54px grid → blue/cyan glow; mono logos */
.ss-brands {
padding: 0;
background: linear-gradient(180deg, var(--ss-steel-soft) 0%, var(--ss-steel) 100%);
border-bottom: 1px solid rgba(148, 180, 255, 0.12);
box-shadow: none;
overflow: hidden;
height: var(--ss-home-brands-h, 64px);
}
/* No grid here. The grid is the hero's light-field language; by the time
it reaches this strip it should have ALREADY faded out (the hero's radial
mask does that). Copying the grid into the rail is what kept reading as
"not merged" — two textures fighting at the seam. The live strip is a
clean deep-blue band with a hairline foot, and that stillness is exactly
what lets the quiet logos breathe. */
.ss-brands,.ss-brands__bar {
position: relative;
width: 100%;
min-height: var(--ss-home-brands-h, 64px);
box-sizing: border-box;
}
.ss-brands__bar {
z-index: 1;
display: flex;
align-items: center;
gap: clamp(16px, 2vw, 28px);
height: 100%;
max-width: min(1520px, calc(100vw - clamp(48px, 8vw, 160px)));
margin-inline: auto;
padding: 0 clamp(24px, 4vw, 72px);
}
.ss-brands__label {
flex: none;
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
padding: 0;
max-width: none;
font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
line-height: 1.2;
color: rgba(168, 190, 230, 0.58);
background: none;
border: none;
border-radius: 0;
box-shadow: none;
white-space: nowrap;
}
.ss-brands__label::before {
content: "";
flex: none;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--ss-green);
box-shadow: 0 0 0 3px rgba(67, 230, 164, 0.25);
animation: ss-hero-pulse 2.2s ease-in-out infinite;
}
.ss-brands__viewport {
position: relative;
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, var(--ss-black) 1.5%, var(--ss-black) 98.5%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, var(--ss-black) 1.5%, var(--ss-black) 98.5%, transparent 100%);
}
.ss-brands__track {
display: flex;
width: max-content;
align-items: center;
animation: ss-brands-marquee 42s linear infinite;
will-change: transform;
}
.ss-brands:hover .ss-brands__track {
animation-play-state: paused;
}
.ss-brands__group {
display: flex;
flex: none;
align-items: center;
gap: 28px;
margin: 0;
padding: 0 14px;
list-style: none;
}
.ss-brands__item {
gap: 0;
margin: 0;
padding: 0;
}
.ss-brands__item,.ss-brands__mark {
flex: none;
display: inline-flex;
align-items: center;
height: auto;
}
.ss-brands__mark {
justify-content: center;
width: auto;
line-height: 0;
}
.ss-brands__mark img {
display: block;
width: auto;
height: auto;
object-fit: contain;
filter: none;
opacity: 1;
user-select: none;
pointer-events: none;
transition: opacity .18s ease;
}
.ss-brands__item:hover .ss-brands__mark img {
opacity: 1;
}
@keyframes ss-brands-marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.ss-brands__track {
animation: none;
flex-wrap: wrap;
justify-content: flex-start;
width: 100%;
max-width: none;
margin: 0;
padding: 0 24px 0 0;
gap: 16px 32px;
}
.ss-brands__group[aria-hidden="true"] {
display: none;
}
.ss-brands__viewport {
-webkit-mask-image: none;
mask-image: none;
}
.ss-brands__group {
flex-wrap: wrap;
justify-content: flex-start;
gap: 16px 32px;
padding: 0 24px 0 0;
}
}
@media (max-width: 700px) {
.ss-brands {
height: auto;
min-height: 90px;
}
.ss-brands__bar {
flex-direction: column;
align-items: stretch;
gap: 12px;
min-height: 0;
height: auto;
padding: 14px 20px 16px;
}
.ss-brands__label {
padding: 0;
white-space: nowrap;
}
.ss-brands__group {
gap: 24px;
padding: 0 12px;
}
.ss-brands__mark img {
max-height: 12px;
max-width: 56px;
}
.ss-brands__item {
height: auto;
gap: 0;
}
}
/* —— Offer block: inventory rail + dual paths —— */
.ss-home-offer-section {
border-bottom: 1px solid #e8eef5;
}
.ss-home-offer-section,.ss-home-offer-section.e-con,.ss-home-offer-section > .e-con-inner {
background: var(--ss-white-hex) !important;
}
.ss-offer {
display: flex;
flex-direction: column;
width: 100%;
gap: 0;
}
.ss-offer__intro {
margin: 0 0 clamp(28px, 3.5vw, 40px);
max-width: 40rem;
}
.ss-offer__eyebrow {
margin: 0 0 10px;
font-size: 13px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ss-royal);
}
.ss-offer__eyebrow,.ss-offer__heading {
font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
font-weight: 600;
}
.ss-offer__heading {
margin: 0 0 12px;
font-size: clamp(26px, 2.6vw, 34px);
line-height: 1.2;
letter-spacing: -0.02em;
text-transform: none;
color: var(--ss-ink);
}
.ss-offer__lede {
margin: 0;
font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
font-size: 15px;
font-weight: 400;
line-height: 1.65;
color: rgba(27, 50, 96, 0.62);
}
.ss-home-stock,
.ss-stock {
--ss-stock-ink: #1b3260;
--ss-stock-accent: #2777f2;
--ss-stock-muted: rgba(27, 50, 96, 0.55);
--ss-stock-line: #9aabbe;
--ss-stock-inset: 22px;
--ss-stock-gap: 18px;
}
#ss-home-stock,
#ss-home-stock.e-con,
#ss-home-stock > .e-con-inner {
background: var(--ss-white-hex) !important;
}
#ss-home-stock.e-con,
#ss-home-stock > .e-con-inner {
--gap: 28px !important;
--row-gap: 28px !important;
gap: 28px !important;
}
#ss-home-stock .elementor-widget-html,
#ss-home-stock .elementor-widget-html > .elementor-widget-container {
margin: 0 !important;
}
.ss-stock__head {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
}
.ss-stock__eyebrow {
margin: 0;
font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(27, 50, 96, 0.5);
}
.ss-stock__title-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px 28px;
flex-wrap: wrap;
}
.ss-stock__title {
margin: 0;
font-size: clamp(24px, 2.4vw, 30px);
letter-spacing: -0.025em;
line-height: 1.12;
color: var(--ss-stock-ink);
}
.ss-stock__title,.ss-stock__cta {
font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
font-weight: 700;
}
.ss-stock__cta {
flex: none;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0;
border: 0;
background: none;
color: var(--ss-stock-accent) !important;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none !important;
white-space: nowrap;
transition: color 0.2s ease;
}
.ss-stock__cta::after {
content: "→";
font-size: 14px;
transition: transform 0.2s ease;
}
.ss-stock__cta:hover {
color: var(--ss-stock-ink) !important;
}
.ss-stock__cta:hover::after {
transform: translateX(3px);
}
.ss-stock__lede {
margin: 0;
max-width: 36rem;
font-size: 14px;
line-height: 1.55;
color: var(--ss-stock-muted);
}
/* Stacked panel: Category above, Featured below — stroke + corner accents, no cell grid */
.ss-home-stock .ss-stock__panel,
.ss-home-stock .ss-stock__panel.e-con {
position: relative;
width: 100%;
margin: 0;
padding: 0 !important;
border: 1px solid var(--ss-stock-line);
background: var(--ss-white-hex);
--gap: 0px !important;
--row-gap: 0px !important;
gap: 0 !important;
}
.ss-home-stock .ss-stock__panel::before,
.ss-home-stock .ss-stock__panel::after {
content: "";
position: absolute;
width: 18px;
height: 18px;
pointer-events: none;
z-index: 2;
}
.ss-home-stock .ss-stock__panel::before {
top: -1px;
left: -1px;
border-top: 2px solid var(--ss-stock-accent);
border-left: 2px solid var(--ss-stock-accent);
}
.ss-home-stock .ss-stock__panel::after {
right: -1px;
bottom: -1px;
border-right: 2px solid var(--ss-stock-ink);
border-bottom: 2px solid var(--ss-stock-ink);
}
.ss-stock__band {
display: flex;
flex-direction: column;
gap: 16px;
padding: 22px var(--ss-stock-inset) 10px;
background: var(--ss-white-hex);
}
.ss-stock__band-label {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0;
font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(27, 50, 96, 0.55);
}
.ss-stock__band-label::after {
content: "";
display: block;
width: 28px;
height: 2px;
background: var(--ss-stock-accent);
flex: none;
}
.ss-stock__cats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--ss-stock-gap);
margin: 0;
}
.ss-stock__cats,.ss-stock__cat {
border: 0;
background: transparent;
}
.ss-stock__cat {
position: relative;
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
padding: 0 0 16px;
text-decoration: none !important;
color: inherit;
outline: none;
}
/* Calm separators — feathered, not hard cell walls */
.ss-stock__cat + .ss-stock__cat::before {
content: "";
position: absolute;
left: calc(var(--ss-stock-gap) / -2);
top: 12px;
bottom: 20px;
width: 1px;
background: linear-gradient(
180deg,
transparent 0%,
var(--ss-mist) 18%,
rgba(154, 171, 190, 0.75) 50%,
var(--ss-mist) 82%,
transparent 100%
);
pointer-events: none;
}
.ss-stock__media {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 112px;
padding: 8px 8px 12px;
overflow: hidden;
background: transparent;
}
/* Soft resting floor — feathered ray, light only */
.ss-stock__media::before {
content: "";
position: absolute;
left: 12%;
right: 12%;
bottom: 0;
height: 1px;
background: linear-gradient(
90deg,
transparent 0%,
var(--ss-mist) 50%,
transparent 100%
);
transform-origin: center;
transition:
left 0.4s cubic-bezier(0.22, 1, 0.36, 1),
right 0.4s cubic-bezier(0.22, 1, 0.36, 1),
background 0.3s ease;
pointer-events: none;
z-index: 2;
}
.ss-stock__media img {
position: relative;
z-index: 1;
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
transform: translateZ(0);
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.ss-stock__meta {
display: flex;
flex-direction: column;
gap: 3px;
padding: 0 2px;
}
.ss-stock__num {
font-size: clamp(24px, 2.2vw, 30px);
letter-spacing: -0.04em;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.ss-stock__num,.ss-stock__name {
font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
font-weight: 700;
color: var(--ss-stock-ink);
transition: color 0.25s ease;
}
.ss-stock__name {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
letter-spacing: 0.03em;
text-transform: uppercase;
}
.ss-stock__name::after {
content: "→";
font-size: 13px;
opacity: 0;
transform: translateX(-4px);
transition: opacity 0.28s ease, transform 0.28s ease;
color: var(--ss-stock-accent);
}
.ss-stock__tags {
font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 1.35;
color: var(--ss-stock-muted);
transition: color 0.25s ease;
}
/* Hover: light stays on the ray — no image bloom / heavy glow */
/* Hover: crisp center→sides ray — no glow haze */
.ss-stock__cat:hover .ss-stock__media::before,
.ss-stock__cat:focus-visible .ss-stock__media::before {
left: 0;
right: 0;
background: linear-gradient(
90deg,
transparent 0%,
rgba(39, 119, 242, 0.15) 22%,
var(--ss-blue) 50%,
rgba(39, 119, 242, 0.15) 78%,
transparent 100%
);
}
.ss-stock__cat:hover .ss-stock__media img,
.ss-stock__cat:focus-visible .ss-stock__media img {
transform: translateY(-3px);
}
.ss-stock__cat:hover .ss-stock__num,
.ss-stock__cat:focus-visible .ss-stock__num,
.ss-stock__cat:hover .ss-stock__name,
.ss-stock__cat:focus-visible .ss-stock__name {
color: var(--ss-stock-accent);
}
.ss-stock__cat:hover .ss-stock__name::after,
.ss-stock__cat:focus-visible .ss-stock__name::after {
opacity: 1;
transform: translateX(0);
}
.ss-stock__cat:hover .ss-stock__tags,
.ss-stock__cat:focus-visible .ss-stock__tags {
color: rgba(27, 50, 96, 0.68);
}
/* Featured continues inside the same panel */
.ss-home-stock .ss-stock-featured {
position: relative;
margin: 0 !important;
padding: 20px var(--ss-stock-inset) 14px !important;
border: 0 !important;
border-top: 0 !important;
background: var(--ss-white-hex) !important;
box-shadow: none;
}
.ss-home-stock .ss-stock-featured::before {
content: "";
position: absolute;
top: 0;
left: var(--ss-stock-inset);
right: var(--ss-stock-inset);
height: 1px;
transform: none;
width: auto;
background: linear-gradient(
90deg,
transparent 0%,
var(--ss-mist) 18%,
rgba(39, 119, 242, 0.85) 50%,
var(--ss-mist) 82%,
transparent 100%
);
}
.ss-home-stock .ss-stock-featured,
.ss-home-stock .ss-stock-featured.e-con,
.ss-home-stock .ss-stock-featured > .e-con-inner {
--gap: 14px !important;
--row-gap: 14px !important;
gap: 14px !important;
}
.ss-home-stock .ss-stock-featured__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding: 0 !important;
background: transparent;
border: 0 !important;
}
.ss-home-stock .ss-stock-featured__head .elementor-heading-title {
margin: 0;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
color: rgba(27, 50, 96, 0.55) !important;
}
.ss-home-stock .ss-stock-featured__cta .elementor-button {
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: var(--ss-stock-accent) !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
transition: color 0.2s ease, letter-spacing 0.2s ease !important;
}
.ss-home-stock .ss-stock-featured__cta .elementor-button:hover {
color: var(--ss-stock-ink) !important;
background: transparent !important;
}
.ss-home-stock .ss-stock-featured .elementor-widget-shortcode,.ss-home-stock .ss-stock-featured .elementor-widget-container,body.home #ss-home-stock ul.products {
margin: 0 !important;
padding: 0 !important;
}
body.home #ss-home-stock ul.products {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--ss-stock-gap) !important;
list-style: none !important;
border: 0 !important;
background: transparent;
}
body.home #ss-home-stock ul.products::before,
body.home #ss-home-stock ul.products::after {
display: none !important;
content: none !important;
}
body.home #ss-home-stock ul.products > li.product {
position: relative !important;
width: auto !important;
margin: 0 !important;
padding: 8px 4px 42px !important;
float: none !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
overflow: hidden;
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Soft resting ray → crisp center-out light on hover */
body.home #ss-home-stock ul.products > li.product::before {
content: "";
position: absolute;
left: 14%;
right: 14%;
bottom: 40px;
height: 1px;
background: linear-gradient(
90deg,
transparent 0%,
var(--ss-mist) 50%,
transparent 100%
);
transform-origin: center;
transition:
left 0.4s cubic-bezier(0.22, 1, 0.36, 1),
right 0.4s cubic-bezier(0.22, 1, 0.36, 1),
background 0.3s ease;
pointer-events: none;
z-index: 1;
}
body.home #ss-home-stock ul.products > li.product:hover,
body.home #ss-home-stock ul.products > li.product:focus-within {
transform: translateY(-3px);
}
body.home #ss-home-stock ul.products > li.product:hover::before,
body.home #ss-home-stock ul.products > li.product:focus-within::before {
left: 0;
right: 0;
background: linear-gradient(
90deg,
transparent 0%,
rgba(39, 119, 242, 0.2) 18%,
var(--ss-blue) 50%,
rgba(39, 119, 242, 0.2) 82%,
transparent 100%
);
}
body.home #ss-home-stock ul.products > li.product a {
text-decoration: none !important;
}
body.home #ss-home-stock ul.products > li.product .ct-media-container,
body.home #ss-home-stock ul.products > li.product figure,
body.home #ss-home-stock ul.products > li.product .ct-image-container {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 132px !important;
max-height: 132px !important;
aspect-ratio: auto !important;
margin: 0 auto 10px !important;
overflow: hidden !important;
background: transparent !important;
}
body.home #ss-home-stock ul.products > li.product .ct-media-container img,
body.home #ss-home-stock ul.products > li.product img {
display: block !important;
width: auto !important;
max-width: 100% !important;
height: 100% !important;
max-height: 132px !important;
margin: 0 auto !important;
object-fit: contain !important;
object-position: center !important;
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease !important;
}
body.home #ss-home-stock ul.products[data-hover="swap"] li.product .ct-swap {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
max-height: none !important;
object-fit: contain !important;
opacity: 0 !important;
z-index: 1;
transform: none !important;
pointer-events: none;
}
@media (hover: hover) {
body.home #ss-home-stock ul.products[data-hover="swap"] li.product .has-hover-effect:hover .ct-swap {
opacity: 1 !important;
}
body.home #ss-home-stock ul.products[data-hover="swap"] li.product .has-hover-effect:hover .ct-swap + img {
opacity: 0 !important;
transform: none !important;
}
}
body.home #ss-home-stock ul.products > li.product:hover .ct-media-container img:not(.ct-swap),
body.home #ss-home-stock ul.products > li.product:hover img:not(.ct-swap) {
transform: translateY(-3px);
}
body.home #ss-home-stock ul.products > li.product .woocommerce-loop-product__title,
body.home #ss-home-stock ul.products > li.product .ct-woo-card-title {
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1.35 !important;
color: var(--ss-stock-ink) !important;
margin: 0 0 2px !important;
}
body.home #ss-home-stock ul.products > li.product .price {
font-size: 12px !important;
color: var(--ss-stock-muted) !important;
margin: 0 !important;
}
body.home #ss-home-stock ul.products > li.product .button,
body.home #ss-home-stock ul.products > li.product .added_to_cart,
body.home #ss-home-stock ul.products > li.product .entry-meta,
body.home #ss-home-stock ul.products > li.product .entry-excerpt {
display: none !important;
}
body.home #ss-home-stock ul.products > li.product .ct-woo-card-extra {
display: flex !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
top: auto !important;
bottom: 0 !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
align-items: stretch;
justify-content: center;
opacity: 0;
transform: translateY(100%);
pointer-events: none;
transition: opacity 0.28s ease, transform 0.28s ease;
z-index: 3;
background: var(--ss-stock-ink);
}
body.home #ss-home-stock ul.products > li.product:hover .ct-woo-card-extra,
body.home #ss-home-stock ul.products > li.product:focus-within .ct-woo-card-extra {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
body.home #ss-home-stock ul.products > li.product .ct-open-quick-view {
display: flex !important;
align-items: center;
justify-content: center;
width: 100% !important;
min-height: 36px;
padding: 0 10px !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
color: var(--ss-white-hex) !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.08em;
text-transform: uppercase;
}
body.home #ss-home-stock ul.products > li.product .ct-open-quick-view:hover {
background: var(--ss-stock-accent) !important;
color: var(--ss-white-hex) !important;
}
body.home #ss-home-stock ul.products > li.product .ct-open-quick-view svg,
body.home #ss-home-stock ul.products > li.product .ct-open-quick-view .ct-button-loader {
display: none !important;
}
@media (max-width: 999px) {
.ss-stock__cats {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px 14px;
}
.ss-stock__cat + .ss-stock__cat::before {
display: none;
}
.ss-stock__cat:nth-child(2n)::before {
content: "";
display: block;
position: absolute;
left: calc(var(--ss-stock-gap) / -2);
top: 12px;
bottom: 20px;
width: 1px;
background: linear-gradient(
180deg,
transparent 0%,
var(--ss-mist) 18%,
rgba(154, 171, 190, 0.75) 50%,
var(--ss-mist) 82%,
transparent 100%
);
pointer-events: none;
}
body.home #ss-home-stock ul.products {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 560px) {
:is(.ss-home-stock, .ss-stock) {
--ss-stock-inset: 14px;
--ss-stock-gap: 12px;
}
.ss-stock__cat + .ss-stock__cat::before,
.ss-stock__cat:nth-child(2n)::before {
display: none;
}
.ss-stock__media {
height: 96px;
}
.ss-stock__num {
font-size: 22px;
}
.ss-stock__meta {
align-items: center;
text-align: center;
}
.ss-stock__num,
.ss-stock__name,
.ss-stock__tags {
justify-content: center;
text-align: center;
}
body.home #ss-home-stock ul.products > li.product {
padding: 6px 2px 40px !important;
}
body.home #ss-home-stock ul.products > li.product::before {
bottom: 38px;
}
body.home #ss-home-stock ul.products > li.product .ct-media-container,
body.home #ss-home-stock ul.products > li.product .ct-image-container {
height: 100px !important;
max-height: 100px !important;
}
body.home #ss-home-stock ul.products > li.product figure {
height: auto !important;
max-height: none !important;
padding-bottom: 48px !important;
}
body.home #ss-home-stock ul.products > li.product .ct-media-container img,
body.home #ss-home-stock ul.products > li.product img {
max-height: 100px !important;
}
body.home #ss-home-stock ul.products > li.product .ct-woo-card-extra {
opacity: 1;
transform: none;
pointer-events: auto;
}
}
/* —— Inventory close — last band inside the stock panel —— */
.ss-home-stock .ss-stock__close {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.45fr) minmax(220px, 0.7fr);
gap: 28px 40px;
align-items: stretch;
width: 100%;
margin: 0;
padding: 32px var(--ss-stock-inset) 30px;
border-top: 0;
background: var(--ss-white-hex);
}
.ss-home-stock .ss-stock__close::before {
content: "";
position: absolute;
top: 0;
left: var(--ss-stock-inset);
right: var(--ss-stock-inset);
height: 1px;
background: linear-gradient(
90deg,
transparent 0%,
var(--ss-mist) 18%,
rgba(39, 119, 242, 0.85) 50%,
var(--ss-mist) 82%,
transparent 100%
);
}
.ss-stock__close-copy {
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 0;
}
.ss-stock__close-copy .ss-stock__band-label {
margin-bottom: 12px;
}
.ss-stock__close-title {
margin: 0 0 14px;
max-width: 18em;
font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
font-size: 22px;
font-weight: 700;
letter-spacing: -0.015em;
line-height: 1.25;
color: var(--ss-stock-ink);
}
.ss-stock__close-body {
max-width: 40rem;
}
.ss-stock__close-body p {
margin: 0 0 0.85em;
font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
font-size: 15px;
font-weight: 400;
line-height: 1.65;
color: var(--ss-stock-muted);
}
.ss-stock__close-body p:last-child {
margin-bottom: 0;
}
.ss-stock__close-action {
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
gap: 0;
padding: 8px 0 8px 8px;
border-left: 0;
background: var(--ss-white-hex);
}
.ss-stock__close-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 16px 20px;
border: 1px solid var(--ss-blue);
background: var(--ss-blue);
color: var(--ss-white) !important;
font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none !important;
text-align: center;
transition: background-color 0.18s ease, border-color 0.18s ease;
}
.ss-stock__close-btn:hover {
background: var(--ss-ink);
border-color: var(--ss-ink);
color: var(--ss-white) !important;
}
/* Native Elementor migration: .ss-stock__close-btn is the button WIDGET div (live served
a bare ). The wrapper was eating the pill padding/border AND the inner .elementor-button
ran line-height:1, stacking to ~80px vs live 54px. Reset the wrapper, style the inner. */
.ss-stock__close-btn {
display: block;
width: 100%;
padding: 0;
border: 0;
background: transparent;
}
.ss-stock__close-btn .elementor-button {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 16px 20px;
border: 1px solid var(--ss-blue);
border-radius: 0;
background: var(--ss-blue);
color: var(--ss-white) !important;
font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
text-align: center;
line-height: 1.65;
transition: background-color 0.18s ease, border-color 0.18s ease;
}
.ss-stock__close-btn .elementor-button:hover {
background: var(--ss-ink);
border-color: var(--ss-ink);
color: var(--ss-white) !important;
}
@media (max-width: 767px) {
.ss-home-stock .ss-stock__close {
grid-template-columns: 1fr;
gap: 22px;
padding: 24px var(--ss-stock-inset) 26px;
}
.ss-stock__close-action {
padding: 0;
border-left: 0;
border-top: 0;
padding-top: 4px;
}
.ss-stock__close-title {
max-width: none;
font-size: 20px;
}
}
/* Fix: keep Next Step from touching the closing CTA headline in Elementor DOM. */
body.home #contact-cta .ss-stock__close-copy {
display: flex;
flex-direction: column;
gap: 14px;
}
body.home #contact-cta .ss-stock__close-copy .ss-stock__band-label,
body.home #contact-cta .ss-stock__close-copy .ss-stock__band-label .elementor-heading-title,
body.home #contact-cta .ss-stock__close-title,
body.home #contact-cta .ss-stock__close-title .elementor-heading-title {
margin: 0 !important;
}
body.home #contact-cta .ss-stock__close-body p {
margin-bottom: 0;
}
body.home #contact-cta .ss-stock__close-body p + p {
margin-top: 8px;
max-width: 38rem;
font-size: 14px;
font-weight: 500;
line-height: 1.6;
color: rgba(27, 50, 96, 0.82);
}
/* —— Paths (upper half of offer block) —— */
.ss-offer .ss-paths {
display: grid;
grid-template-columns: 1fr 1fr;
width: 100%;
margin: 0;
border: 1px solid #c3d3e6;
background: var(--ss-white);
}
.ss-paths__panel {
display: flex;
align-items: stretch;
position: relative;
background: var(--ss-white);
}
.ss-paths__panel + .ss-paths__panel {
border-left: 1px solid #c3d3e6;
}
.ss-paths__panel:first-child::before {
top: -1px;
left: -1px;
border-top: 2px solid var(--ss-blue);
border-left: 2px solid var(--ss-blue);
}
.ss-paths__panel:first-child::before,.ss-paths__panel:last-child::before {
content: "";
position: absolute;
width: 20px;
height: 20px;
z-index: 3;
}
.ss-paths__panel:last-child::before {
top: auto !important;
left: auto !important;
bottom: -1px;
right: -1px;
border-bottom: 2px solid var(--ss-blue);
border-right: 2px solid var(--ss-blue);
}
.ss-paths__inner {
display: flex;
flex-direction: column;
width: 100%;
padding: clamp(28px, 3.5vw, 40px) clamp(22px, 2.8vw, 36px);
}
.ss-paths__eyebrow {
margin: 0 0 14px;
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.ss-paths__eyebrow,.ss-paths__title {
font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
font-weight: 600;
color: var(--ss-ink);
}
.ss-paths__title {
margin: 0 0 12px;
font-size: clamp(20px, 2vw, 24px);
line-height: 1.28;
letter-spacing: -0.025em;
}
.ss-paths__body {
margin: 0 0 24px !important;
max-width: 34em;
font-size: 14.5px;
font-weight: 400;
line-height: 1.62;
color: #4a628c;
}
.ss-paths__body,.ss-paths__btn {
font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
}
.ss-paths__btn {
display: inline-flex;
align-items: center;
justify-content: center;
align-self: flex-start;
min-height: 44px;
padding: 0 22px;
margin: 0 0 0;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: none !important;
color: var(--ss-white) !important;
background: var(--ss-ink);
border: 1px solid var(--ss-ink);
transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.ss-paths__btn:hover {
background: var(--ss-blue);
border-color: var(--ss-blue);
color: var(--ss-white) !important;
transform: translateY(-1px);
}
.ss-paths__btn:hover .elementor-button {
background-color: var(--ss-blue) !important;
border-color: var(--ss-blue) !important;
}
.elementor-widget-icon-list.ss-paths__points {
width: 100%;
margin: 28px 0 0;
}
.elementor-widget-icon-list.ss-paths__points .elementor-icon-list-items {
margin: 0;
padding: 18px 0 0 !important;
list-style: none;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 18px;
background: transparent;
border: 0;
border-top: 1px solid #dbe6f2;
}
.elementor-widget-icon-list.ss-paths__points .elementor-icon-list-item {
display: flex;
align-items: center;
gap: 10px;
min-height: 24px;
padding: 0;
font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.01em;
line-height: 1.3;
color: var(--ss-ink);
}
.elementor-widget-icon-list.ss-paths__points .elementor-icon-list-icon {
width: 15px;
height: 15px;
flex: none;
--e-icon-list-icon-size: 15px;
}
.elementor-widget-icon-list.ss-paths__points .elementor-icon-list-icon svg {
margin: 0;
}
.elementor-widget-icon-list.ss-paths__points .elementor-icon-list-icon svg,
.elementor-widget-icon-list.ss-paths__points .elementor-icon-list-icon svg path { fill: none; }
.elementor-widget-icon-list.ss-paths__points .elementor-icon-list-icon + .elementor-icon-list-text {
padding-inline-start: 0; /* the parent flex gap (10px) supplies the spacing */
}
@media (max-width: 900px) {
.ss-offer .ss-paths {
grid-template-columns: 1fr;
}
.ss-paths__panel + .ss-paths__panel {
border-left: 0;
border-top: 1px solid #c3d3e6;
}
.ss-paths__inner {
padding: 28px 20px;
}
}
@media (max-width: 520px) {
.elementor-widget-icon-list.ss-paths__points .elementor-icon-list-items {
grid-template-columns: 1fr;
gap: 10px;
padding-top: 16px;
}
.ss-paths__btn {
width: 100%;
}
}
/* —— Why (dark) —— */
.ss-home-why,
.ss-home-why.e-con,
.ss-home-why > .e-con-inner {
background: linear-gradient(180deg, var(--ss-steel-soft) 0%, var(--ss-steel) 100%) !important;
}
.ss-home-fact {
border-top: 2px solid var(--ss-blue);
padding-top: 14px !important;
}
.ss-home-why .ss-home-fact + .ss-home-fact {
border-left: 0;
}
.ss-home-why-head {
width: 100%;
margin: 0;
padding: 0;
}
.ss-home-why-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
width: 100%;
margin: 0 0 10px;
padding: 0;
}
.ss-home-why-eyebrow {
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(168, 190, 230, 0.72);
}
.ss-home-why-eyebrow,.ss-home-why-link {
margin: 0;
padding: 0;
font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: 600;
line-height: 1;
}
.ss-home-why-link {
color: #7eb6ff;
letter-spacing: 0.04em;
text-decoration: none;
white-space: nowrap;
transition: color 0.2s ease;
}
.ss-home-why-link:hover {
color: #a8d0ff;
}
.ss-home-why-title {
margin: 0;
padding: 0;
color: #e8eef8;
font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
font-size: 26px;
font-weight: 700;
line-height: 1.25;
}
.ss-home-why .elementor-widget-html,
.ss-home-why .elementor-widget-html > .elementor-widget-container {
margin: 0 !important;
padding: 0 !important;
width: 100%;
}
.ss-home-why-facts,
.ss-home-why-facts.e-con,
.ss-home-why-facts > .e-con-inner {
padding: 0 !important;
width: 100% !important;
}
.ss-home-why .ss-home-fact {
box-sizing: border-box;
}
.ss-home-why .ss-home-fact:last-child {
padding-right: 0 !important;
}
/* Kill Elementor default 10px padding if old markup ever resurfaces */
.ss-home-why .ss-home-why-head.e-con,
.ss-home-why .ss-home-why-meta.e-con,
.ss-home-why .ss-home-why-head > .e-con-inner,
.ss-home-why .ss-home-why-meta > .e-con-inner {
padding: 0 !important;
}
.ss-home-why .ss-home-why-meta .elementor-widget-heading {
margin: 0 !important;
}
/* —— Services intro (below Why) ——
Equal-height panels: left claim panel | right services stage. */
.ss-home-services-section {
background: var(--ss-white-hex) !important;
border-top: 1px solid #e8eef5;
border-bottom: 1px solid #e8eef5;
}
.ss-svc {
display: flex;
flex-direction: column;
width: 100%;
gap: 0;
}
.ss-svc__intro {
margin: 0 0 clamp(24px, 3vw, 32px);
max-width: 40rem;
}
.ss-svc__split {
display: grid;
grid-template-columns: minmax(18rem, 1fr) minmax(0, 1.35fr);
gap: clamp(20px, 2.5vw, 28px);
align-items: stretch;
width: 100%;
}
.ss-svc__rail,
.ss-svc__stage {
position: relative;
min-height: clamp(360px, 38vw, 430px);
padding: clamp(32px, 3.5vw, 44px);
border: 1px solid #d5dde8;
background: var(--ss-white-hex);
}
.ss-svc__rail {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.ss-svc__rail,.ss-svc__stage {
justify-content: center;
}
.ss-svc__rail-top {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
max-width: 24rem;
order: 0;
}
.ss-svc__kicker {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ss-blue);
}
.ss-svc__kicker,.ss-svc__claim {
margin: 0;
font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
}
.ss-svc__claim {
font-size: clamp(20px, 1.9vw, 24px);
font-weight: 600;
letter-spacing: -0.025em;
line-height: 1.32;
color: var(--ss-ink);
}
.ss-svc__rail-bottom {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
width: 100%;
max-width: 24rem;
order: 1;
}
.ss-svc__bridge-lead {
font-size: 15px;
font-weight: 600;
letter-spacing: -0.015em;
line-height: 1.4;
color: var(--ss-ink);
}
.ss-svc__bridge-lead,.ss-svc__bridge-line {
margin: 0;
font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
}
.ss-svc__bridge-line {
font-size: 13.5px;
font-weight: 400;
letter-spacing: -0.01em;
line-height: 1.65;
color: rgba(27, 50, 96, 0.62);
}
.ss-svc__cta {
display: inline-flex;
margin-top: auto;
padding: 14px 24px;
background: var(--ss-ink);
text-decoration: none !important;
display: block;
width: 100%;
max-width: 24rem;
margin: 0;
margin-top: 24px !important;
padding: 24px 0 0 !important;
border-top: 1px solid var(--ss-line);
background: transparent !important;
order: 2;
}
/* Native Elementor migration: .ss-svc__cta is now the button WIDGET div (live served
a bare ). Keep the wrapper in normal top-down flow and put
the pill styling on the inner .elementor-button. Line-height inherits 1.65 like
live — the arrow glyph (14px × 1.65) sets the button height to ~51px. */
.ss-svc__cta,.ss-svc__cta .elementor-button {
align-items: center;
gap: 10px;
color: var(--ss-white-hex) !important;
font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
transition: background 0.2s ease;
}
.ss-svc__cta .elementor-button {
display: inline-flex;
margin: 0;
padding: 12px 24px;
min-height: 46px;
border: 0;
border-radius: 0;
background: var(--ss-ink);
line-height: 1.2;
}
.ss-svc__cta .elementor-button-text {
font-size: 0 !important;
letter-spacing: 0 !important;
}
.ss-svc__cta .elementor-button-text::before {
content: "FOR BUSINESS";
font-size: 12px;
font-weight: 700;
letter-spacing: 0.1em;
}
.ss-svc__cta .elementor-button::after {
content: "→";
font-size: 14px;
transition: transform 0.2s ease;
}
.ss-svc__cta .elementor-button:hover {
background: var(--ss-blue);
color: var(--ss-white-hex) !important;
}
.ss-svc__cta .elementor-button:hover::after {
transform: translateX(4px);
}
.ss-svc__corner {
position: absolute;
width: 20px;
height: 20px;
pointer-events: none;
z-index: 3;
}
.ss-svc__corner--tl {
top: -1px;
left: -1px;
border-top: 2px solid var(--ss-blue);
border-left: 2px solid var(--ss-blue);
}
.ss-svc__corner--br {
bottom: -1px;
right: -1px;
border-bottom: 2px solid var(--ss-blue);
border-right: 2px solid var(--ss-blue);
}
.ss-svc__divider {
position: absolute;
background: var(--ss-line);
pointer-events: none;
z-index: 1;
}
.ss-svc__divider--v {
left: 50%;
top: 12%;
bottom: 12%;
width: 1px;
margin-left: -0.5px;
}
.ss-svc__divider--h {
top: 50%;
left: 10%;
right: 10%;
height: 1px;
margin-top: -0.5px;
}
.ss-svc__list {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 1fr;
gap: clamp(36px, 4vw, 52px);
margin: 0;
padding: 0;
list-style: none;
width: 100%;
align-content: center;
}
.ss-svc__item {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
padding: 0;
max-width: 18rem;
background: transparent;
}
.ss-svc__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
color: var(--ss-blue);
flex: none;
}
.ss-svc__icon svg {
width: 30px;
height: 30px;
display: block;
}
.ss-svc__icon img {
width: 30px !important;
height: 30px !important;
max-width: 30px;
}
.ss-svc__title {
font-size: clamp(17px, 1.5vw, 20px);
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.25;
color: var(--ss-ink);
}
.ss-svc__title,.ss-svc__body {
margin: 0;
font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
}
.ss-svc__body {
font-size: 14px;
font-weight: 400;
line-height: 1.65;
color: rgba(27, 50, 96, 0.56);
}
@media (max-width: 900px) {
.ss-svc__split {
grid-template-columns: 1fr;
gap: 20px;
}
.ss-svc__rail,
.ss-svc__stage {
min-height: 0;
}
.ss-svc__rail {
gap: 22px;
}
.ss-svc__rail-top {
order: 0;
}
.ss-svc__rail-bottom {
order: 1;
}
.ss-svc__cta {
margin-top: 4px;
order: 2;
}
.ss-svc__divider {
display: none;
}
}
@media (max-width: 560px) {
.ss-svc__list {
grid-template-columns: 1fr;
gap: 28px;
}
.ss-svc__item {
max-width: none;
}
}
/* —— Bridge (Services → Inventory)
LOCKED — see .cursor/rules/sunspike-home-bridge.mdc
Rail = 1140px (same as #ss-home-services / #ss-home-stock), NOT Hero 1520 */
.ss-home-bridge,
.ss-home-bridge.e-con,
.ss-home-bridge > .e-con-inner {
--ss-phi: 1.618;
--ss-phi-inv: 0.618;
background: linear-gradient(180deg, var(--ss-steel-soft) 0%, var(--ss-steel) 100%) !important;
}
.ss-home-bridge,
.ss-home-bridge *,
.ss-home-bridge .elementor-button,
.ss-home-bridge .e-con,
.ss-home-bridge .e-con-inner {
border-radius: 0 !important;
}
.ss-home-bridge .ss-bridge-copy,
.ss-home-bridge .ss-bridge-stage,
.ss-home-bridge .ss-bridge-copy > .e-con-inner,
.ss-home-bridge .ss-bridge-stage > .e-con-inner {
padding: 0 !important;
}
/* Copy column — packed unit (not stretched hollow); width = .ss-svc__rail-top */
.ss-home-bridge .ss-bridge-copy {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: flex-start !important;
align-self: stretch !important;
--align-self: stretch !important;
gap: 14px !important;
width: 100% !important;
max-width: none !important;
--width: 100% !important;
flex: none !important;
height: auto !important;
min-width: 0;
min-height: 100%;
}
.ss-home-bridge .ss-bridge-copy > .elementor-element:not(.ss-bridge-cta) {
width: 100% !important;
max-width: 24rem !important;
margin: 0 !important;
}
/* Bottom rail — same job as .ss-svc__rail-bottom (anchors CTA, kills mid void) */
.ss-home-bridge .ss-bridge-copy > .elementor-element.ss-bridge-cta {
width: 100% !important;
max-width: 24rem !important;
margin: 8px 0 0 !important;
padding-top: 16px !important;
border-top: 1px solid rgba(140, 178, 255, 0.2);
align-self: flex-start !important;
}
.ss-home-bridge .ss-bridge-copy > .elementor-element:first-child {
margin: 0 !important;
}
.ss-home-bridge .ss-bridge-copy > .elementor-element:first-child .elementor-heading-title {
margin: 0 !important;
max-width: none !important;
font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.18em !important;
line-height: 1.2 !important;
text-transform: uppercase !important;
color: rgba(79, 209, 255, 0.62) !important;
}
.ss-home-bridge .ss-bridge-copy .elementor-heading-title {
margin: 0;
max-width: none !important;
line-height: 1.2 !important;
}
.ss-home-bridge .ss-bridge-copy > .elementor-element:nth-child(2) {
margin: 0 !important;
}
.ss-home-bridge .ss-bridge-copy > .elementor-element:nth-child(2) .elementor-heading-title {
font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif !important;
font-size: clamp(22px, 2vw, 26px) !important;
font-weight: 600 !important;
letter-spacing: -0.025em !important;
line-height: 1.28 !important;
color: #e8eef8 !important;
}
.ss-home-bridge .ss-bridge-copy__body {
margin: 0 !important;
}
.ss-home-bridge .ss-bridge-copy__body .elementor-widget-container p,
.ss-home-bridge .ss-bridge-copy__body p {
margin: 0 0 0.7em;
font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif !important;
font-size: 14.5px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
color: rgba(168, 190, 230, 0.78) !important;
}
/* Second line = claim weight (Services .ss-svc__bridge-lead) */
.ss-home-bridge .ss-bridge-copy__body .elementor-widget-container p:last-child,
.ss-home-bridge .ss-bridge-copy__body p:last-child {
margin: 0;
font-size: 15px !important;
font-weight: 600 !important;
letter-spacing: -0.015em !important;
line-height: 1.45 !important;
color: rgba(216, 232, 255, 0.88) !important;
}
.ss-home-bridge .ss-bridge-cta .elementor-button {
display: inline-flex !important;
align-items: center !important;
justify-content: flex-start !important;
text-align: left !important;
line-height: 1.2 !important;
border-radius: 0 !important;
min-height: 46px !important;
padding: 10px 24px !important;
border-color: rgba(140, 178, 255, 0.45) !important;
background: rgba(255, 255, 255, 0.04) !important;
color: #e8eef8 !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.ss-home-bridge .ss-bridge-cta .elementor-button:hover {
background: var(--ss-blue) !important;
border-color: var(--ss-blue) !important;
color: var(--ss-white-hex) !important;
}
#ss-home-bridge.ss-home-bridge,
#ss-home-bridge.e-con {
position: relative;
isolation: isolate;
overflow: hidden;
padding-top: 48px !important;
padding-bottom: 48px !important;
--padding-top: 48px !important;
--padding-bottom: 48px !important;
--gap: 0px !important;
--row-gap: 0px !important;
--column-gap: 0px !important;
--align-items: stretch !important;
gap: 0 !important;
background: linear-gradient(180deg, var(--ss-steel-soft) 0%, var(--ss-steel) 100%) !important;
}
/* Field atmosphere — same idea as .ss-hero__grid / glow */
#ss-home-bridge.ss-home-bridge::before {
content: "";
position: absolute;
inset: -1px;
z-index: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(148, 180, 255, 0.07) 1px, transparent 1px),
linear-gradient(90deg, rgba(148, 180, 255, 0.07) 1px, transparent 1px);
background-size: 48px 48px;
-webkit-mask-image: radial-gradient(86% 80% at 58% 48%, var(--ss-black) 0%, transparent 86%);
mask-image: radial-gradient(86% 80% at 58% 48%, var(--ss-black) 0%, transparent 86%);
opacity: 0.9;
}
#ss-home-bridge.ss-home-bridge::after {
content: "";
position: absolute;
z-index: 0;
pointer-events: none;
width: clamp(360px, 34vw, 640px);
height: clamp(360px, 34vw, 640px);
right: clamp(-40px, 6vw, 120px);
top: 50%;
transform: translateY(-50%);
border-radius: 50%;
background: radial-gradient(circle, rgba(39, 119, 242, 0.28) 0%, rgba(79, 209, 255, 0.1) 42%, transparent 72%);
filter: blur(8px);
}
#ss-home-bridge > .e-con-inner {
position: relative;
z-index: 1;
--display: grid !important;
display: grid !important;
/* Same split rhythm as .ss-svc__split (section above) */
grid-template-columns: minmax(18rem, 1fr) minmax(0, 1.35fr);
width: 100% !important;
max-width: 1140px !important;
margin-inline: auto !important;
padding: 0 !important;
align-items: stretch !important;
--align-items: stretch !important;
gap: clamp(20px, 2.5vw, 28px) !important;
--gap: clamp(20px, 2.5vw, 28px) !important;
--column-gap: clamp(20px, 2.5vw, 28px) !important;
background: transparent !important;
}
@media (max-width: 767px) {
#ss-home-bridge.ss-home-bridge,
#ss-home-bridge.e-con {
padding-top: 36px !important;
padding-bottom: 36px !important;
--padding-top: 36px !important;
--padding-bottom: 36px !important;
}
#ss-home-bridge > .e-con-inner {
grid-template-columns: 1fr;
max-width: 100% !important;
padding: 0 16px !important;
}
}
/* Stage — same material language as .ss-hero__spec (one edge, float, glow behind) */
.ss-home-bridge .ss-bridge-stage {
--ss-mon-cyan: #4fd1ff;
--ss-mon-blue: #2777f2;
--ss-mon-live: #3dd68c;
position: relative;
isolation: isolate;
overflow: visible;
border-radius: 0 !important;
--border-radius: 0px !important;
width: 100% !important;
max-width: none !important;
--width: 100% !important;
flex: none !important;
--align-self: stretch !important;
align-self: stretch !important;
height: auto !important;
min-width: 0;
min-height: 0 !important;
/* One thin edge — no inset ring, no outer 1px stack (that was the bloated “round” look) */
border: 1px solid rgba(140, 178, 255, 0.3) !important;
/* Opaque panel, no backdrop-filter: backdrop blur on a scrolling element
forces per-frame re-rasterization = scroll jank (plus the 7s float loop). */
background:
radial-gradient(circle at 50% 36%, rgba(96, 200, 255, 0.28) 0%, rgba(39, 119, 242, 0.10) 52%, transparent 74%),
rgba(10, 20, 40, 0.86) !important;
/* Soft float like Hero — light far from edge, not an edge halo */
box-shadow:
0 22px 44px -20px rgba(0, 0, 0, 0.48),
0 34px 70px -30px rgba(15, 60, 160, 0.38);
animation: ss-bridge-float 12s ease-in-out infinite;
}
@keyframes ss-bridge-float {
0%, 100% { transform: translate3d(0, 0, 0); }
50% { transform: translate3d(0, -4px, 0); }
}
@media (prefers-reduced-motion: reduce) {
.ss-home-bridge .ss-bridge-stage {
animation: none;
}
}
/* L-corners — border-based (proven .ss-hero__spec pattern), one elbow per pseudo.
Inner edge of each 2px stroke sits on the 1px frame line's inner edge, so the
stroke overflows 1px outward past the frame. */
.ss-home-bridge .ss-bridge-stage::before,
.ss-home-bridge .ss-bridge-stage::after {
content: "";
position: absolute;
width: 22px;
height: 22px;
pointer-events: none;
z-index: 5;
}
.ss-home-bridge .ss-bridge-stage::before {
left: -1px;
top: -1px;
border-top: 2px solid var(--ss-cyan);
border-left: 2px solid var(--ss-cyan);
}
.ss-home-bridge .ss-bridge-stage::after {
right: -1px;
bottom: -1px;
border-bottom: 2px solid var(--ss-cyan);
border-right: 2px solid var(--ss-cyan);
}
@media (min-width: 1024px) {
#ss-home-bridge.ss-home-bridge::after {
opacity: 0.38;
}
}
.ss-home-bridge .ss-bridge-stage,
.ss-home-bridge .ss-bridge-stage *,
.ss-home-bridge .ss-bridge-cta .elementor-button {
border-radius: 0 !important;
}
.ss-home-bridge .ss-bridge-stage > .elementor-widget-html,
.ss-home-bridge .ss-bridge-stage > .elementor-widget-html > .elementor-widget-container {
position: relative;
z-index: 2;
margin: 0 !important;
padding: 0 !important;
}
.ss-home-bridge .ss-bridge-stage__head {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px 20px;
padding: 12px 18px 10px;
border-bottom: 1px solid rgba(140, 178, 255, 0.18);
background: rgba(6, 14, 28, 0.35);
}
.ss-home-bridge .ss-bridge-stage__head::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(
90deg,
var(--ss-cyan) 0%,
rgba(39, 119, 242, 0.55) 40%,
transparent 100%
);
pointer-events: none;
}
.ss-home-bridge .ss-bridge-stage__eyebrow {
margin: 0 0 3px;
font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(79, 209, 255, 0.52);
}
.ss-home-bridge .ss-bridge-stage__title {
margin: 0;
font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1.25;
color: #d8e8ff;
}
.ss-home-bridge .ss-bridge-stage__status {
display: inline-flex;
align-items: center;
gap: 7px;
margin: 0;
flex: none;
padding: 4px 9px 4px 7px;
border: 1px solid rgba(61, 214, 140, 0.38);
border-radius: 0;
background: rgba(61, 214, 140, 0.08);
font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #5eeaa8;
white-space: nowrap;
box-shadow: inset 0 0 12px rgba(61, 214, 140, 0.06);
}
.ss-home-bridge .ss-bridge-stage__pulse {
display: block;
width: 6px;
height: 6px;
border-radius: 0;
background: var(--ss-mon-live, #3dd68c);
box-shadow: 0 0 8px rgba(61, 214, 140, 0.75);
animation: ss-bridge-live-pulse 2.2s ease-in-out infinite;
}
@keyframes ss-bridge-live-pulse {
0%, 100% {
opacity: 1;
transform: scale(1);
box-shadow: 0 0 6px rgba(61, 214, 140, 0.55);
}
50% {
opacity: 0.55;
transform: scale(0.92);
box-shadow: 0 0 14px rgba(61, 214, 140, 0.9);
}
}
@media (prefers-reduced-motion: reduce) {
.ss-home-bridge .ss-bridge-stage__pulse {
animation: none;
}
}
.ss-home-bridge .ss-bridge-slides {
--ss-bridge-inset: 18px;
position: relative;
z-index: 1;
width: 100%;
}
.ss-home-bridge .ss-bridge-slides--live {
padding: 10px 16px 34px;
box-sizing: border-box;
}
.ss-home-bridge .ss-bridge-slides__viewport {
position: relative;
width: 100%;
min-height: 0;
/* Locked to tallest slide via home-bridge-brands.js — prevents carousel height jump */
padding-bottom: 4px;
}
.ss-home-bridge .ss-bridge-slides__slide {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 1;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.55s ease, visibility 0.55s ease;
}
.ss-home-bridge .ss-bridge-slides__slide.is-active {
position: absolute;
z-index: 2;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.ss-home-bridge .ss-bridge-slide__panel {
position: relative;
z-index: 2;
margin: 0 0 10px;
padding: 0 0 9px;
border-bottom: 1px solid rgba(79, 209, 255, 0.14);
}
.ss-home-bridge .ss-bridge-slide__panel::before {
content: "";
position: absolute;
left: 0;
bottom: -1px;
width: 42px;
height: 1px;
background: var(--ss-cyan);
box-shadow: 0 0 10px rgba(79, 209, 255, 0.55);
pointer-events: none;
}
.ss-home-bridge .ss-bridge-slide__heading {
flex: 1 1 auto;
min-width: 0;
margin: 0;
padding: 0;
display: block;
font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
font-size: 17px;
font-weight: 700;
letter-spacing: 0.07em;
line-height: 1.2;
text-transform: uppercase;
color: #e8f2ff;
text-shadow: 0 0 20px rgba(79, 209, 255, 0.12);
}
.ss-home-bridge .ss-bridge-slide__brand-row {
margin: 0 0 6px;
}
.ss-home-bridge .ss-bridge-slide__brand-row,.ss-home-bridge .ss-bridge-slide__stats {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.ss-home-bridge .ss-bridge-slide__body {
display: block;
width: 100%;
color: rgba(168, 190, 230, 0.85);
font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 1.4;
}
/* Stage frame corners live on .ss-bridge-stage — no duplicate on head widget */
.ss-home-bridge .ss-bridge-stage > .elementor-widget-html::before,.ss-home-bridge .ss-bridge-stage > .elementor-widget-html::after,.ss-home-bridge .ss-bridge-slides::before,.ss-home-bridge .ss-bridge-slides::after {
content: none;
}
.ss-home-bridge .ss-bridge-slides .elementor-slide-heading {
letter-spacing: 0.06em;
line-height: 1.2;
min-height: 0;
padding-right: 0;
margin: 0;
display: block;
}
.ss-home-bridge .ss-bridge-slides .elementor-slide-description {
display: block;
width: 100%;
}
.ss-home-bridge .ss-bridge-slide__top {
display: none;
}
.ss-home-bridge .ss-bridge-slide__table {
width: 100%;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
}
.ss-home-bridge .ss-bridge-slide__table-head,
.ss-home-bridge .ss-bridge-slide__series li {
display: grid;
grid-template-columns: minmax(0, 1fr) 3.25rem;
column-gap: 12px;
align-items: baseline;
}
.ss-home-bridge .ss-bridge-slide__table-head {
padding: 0 0 6px;
margin: 0 0 4px;
border-bottom: 1px solid rgba(79, 209, 255, 0.22);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(79, 209, 255, 0.48);
}
.ss-home-bridge .ss-bridge-slide__table-head span:last-child {
text-align: right;
}
.ss-home-bridge .ss-bridge-slide__logo {
position: static;
flex: none;
display: grid;
place-items: center;
width: 68px;
height: 26px;
padding: 3px 6px;
border: 1px solid rgba(140, 178, 255, 0.28);
background: rgba(6, 13, 28, 0.72);
box-shadow: none;
text-decoration: none;
color: inherit;
}
.ss-home-bridge a.ss-bridge-slide__logo:hover {
border-color: rgba(140, 178, 255, 0.5);
background: rgba(8, 16, 32, 0.85);
box-shadow: none;
}
.ss-home-bridge .ss-bridge-slide__empty a {
color: #7eb6ff;
text-decoration: none;
}
.ss-home-bridge .ss-bridge-slide__empty a:hover {
color: var(--ss-white-hex);
}
.ss-home-bridge .ss-bridge-slide__logo img {
display: block;
width: 100%;
height: 100%;
max-width: 56px;
max-height: 20px;
object-fit: contain;
object-position: center;
margin: 0 auto;
}
.ss-home-bridge .ss-bridge-slide__meta {
display: inline-flex;
align-items: baseline;
gap: 8px;
color: rgba(148, 170, 210, 0.62);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.ss-home-bridge .ss-bridge-slide__meta-label {
color: rgba(148, 170, 210, 0.48);
}
.ss-home-bridge .ss-bridge-slide__meta-value {
color: var(--ss-cyan);
font-size: 13px;
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
text-shadow: 0 0 14px rgba(79, 209, 255, 0.35);
}
.ss-home-bridge .ss-bridge-slide__page {
display: block;
margin: 0;
padding: 2px 6px;
border: 1px solid rgba(39, 119, 242, 0.22);
border-radius: 0;
background: rgba(39, 119, 242, 0.08);
color: rgba(79, 209, 255, 0.72);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.12em;
font-variant-numeric: tabular-nums;
}
.ss-home-bridge .ss-bridge-slide__series {
list-style: none;
margin: 0 0 12px;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 16px;
width: 100%;
max-width: none;
border-top: none;
}
.ss-home-bridge .ss-bridge-slide__series li {
padding: 5px 4px;
border-bottom: 1px solid rgba(39, 119, 242, 0.12);
transition: background 0.18s ease, border-color 0.18s ease;
}
.ss-home-bridge .ss-bridge-slide__series li:nth-child(odd) {
background: rgba(39, 119, 242, 0.04);
}
.ss-home-bridge .ss-bridge-slide__series li:hover {
background: rgba(39, 119, 242, 0.11);
border-bottom-color: rgba(79, 209, 255, 0.28);
}
.ss-home-bridge .ss-bridge-slide__series a {
color: #d8e8ff !important;
font-size: 12.5px;
font-weight: 500;
line-height: 1.25;
text-decoration: none !important;
transition: color 0.18s ease;
}
.ss-home-bridge .ss-bridge-slide__series a:hover {
color: var(--ss-cyan) !important;
}
.ss-home-bridge .ss-bridge-slide__series span {
justify-self: end;
color: var(--ss-cyan);
font-size: 11px;
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
text-shadow: 0 0 10px rgba(79, 209, 255, 0.22);
}
.ss-home-bridge .ss-bridge-slide__empty {
margin: 0;
color: rgba(168, 190, 230, 0.65);
font-size: 14px;
}
.ss-home-bridge .ss-bridge-slides,
.ss-home-bridge .ss-bridge-slides > .elementor-widget-container {
position: relative;
}
.ss-home-bridge .ss-bridge-brand-dots {
position: absolute;
left: var(--ss-bridge-inset, 16px);
right: var(--ss-bridge-inset, 16px);
bottom: 10px;
z-index: 30;
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
min-height: 18px;
padding: 9px 0 0;
border-top: 1px solid rgba(79, 209, 255, 0.16);
background: linear-gradient(180deg, transparent 0%, rgba(3, 10, 22, 0.45) 100%);
pointer-events: auto;
touch-action: manipulation;
cursor: default;
}
.ss-home-bridge .ss-bridge-brand-dots__dot {
pointer-events: auto;
position: relative;
display: block;
width: 18px;
height: 2px;
padding: 0;
margin: 0;
border: 0;
border-radius: 0;
background: rgba(39, 119, 242, 0.35);
cursor: pointer;
appearance: none;
touch-action: manipulation;
transition: background 0.2s ease, width 0.2s ease, box-shadow 0.2s ease;
}
.ss-home-bridge .ss-bridge-brand-dots__dot.is-active,
.ss-home-bridge .ss-bridge-brand-dots__dot[aria-selected="true"] {
width: 26px;
background: var(--ss-cyan);
box-shadow: 0 0 10px rgba(79, 209, 255, 0.55);
animation: ss-bridge-channel-pulse 2.8s ease-in-out infinite;
}
.ss-home-bridge .ss-bridge-brand-dots__dot.is-committed {
animation: ss-bridge-dot-commit 0.28s ease;
}
@keyframes ss-bridge-dot-commit {
0% { transform: scale(1); }
40% { transform: scale(1.7, 2.4); }
100% { transform: scale(1); }
}
.ss-home-bridge .ss-bridge-slides__slide.is-refreshing {
animation: ss-bridge-slide-refresh 0.5s ease;
}
@keyframes ss-bridge-slide-refresh {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes ss-bridge-channel-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.72; }
}
@media (prefers-reduced-motion: reduce) {
.ss-home-bridge .ss-bridge-brand-dots__dot.is-active,.ss-home-bridge .ss-bridge-brand-dots__dot[aria-selected="true"],.ss-home-bridge .ss-bridge-brand-dots__dot.is-committed,.ss-home-bridge .ss-bridge-slides__slide.is-refreshing {
animation: none;
}
}
.ss-home-bridge .ss-bridge-brand-dots__dot::after {
content: "";
position: absolute;
inset: -10px -4px;
}
.ss-home-bridge .ss-bridge-brand-dots__dot:focus-visible {
outline: 1px solid #7eb6ff;
outline-offset: 3px;
}
@media (max-width: 767px) {
.ss-home-bridge .ss-bridge-slides {
--ss-bridge-inset: 16px;
}
.ss-home-bridge .ss-bridge-stage__head {
padding: 12px 16px 10px;
}
/* Title + pill (269px + 117px) can't share the 301px content row, so the pill
wraps to a detached second line. Pin it to the head's top-right instead so it
reads as a status chip on the eyebrow's row, above the full-width title. */
.ss-home-bridge .ss-bridge-stage__status {
position: absolute;
top: 12px;
right: 16px;
}
.ss-home-bridge .ss-bridge-slide__series {
grid-template-columns: 1fr;
column-gap: 0;
}
.ss-home-bridge .ss-bridge-slide__logo {
width: 72px;
height: 30px;
}
}
/* === Native Elementor home hero (no raw HTML widget) === */
#ss-home-hero .ss-hero.e-con {
position: relative;
isolation: isolate;
overflow: hidden;
contain: paint;
transform: translateZ(0);
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: center !important;
min-height: calc(100vh - var(--ss-home-header-h) - var(--ss-home-brands-h));
min-height: calc(100dvh - var(--ss-home-header-h) - var(--ss-home-brands-h));
min-height: calc(100svh - var(--ss-home-header-h) - var(--ss-home-brands-h));
padding: 0 !important;
background: radial-gradient(130% 100% at 12% -10%, var(--ss-navy) 0%, var(--ss-navy-deep) 42%, var(--ss-night) 100%) !important;
color: var(--ss-white);
}
/* Atmosphere now uses the original .ss-hero__atmosphere element stack. */
#ss-home-hero .ss-hero__atmosphere.e-con,
#ss-home-hero .ss-hero__grid.e-con,
#ss-home-hero .ss-hero__glow.e-con,
#ss-home-hero .ss-hero__noise.e-con,
#ss-home-hero .ss-hero__stage-glow.e-con {
display: block !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
box-shadow: none !important;
background-color: transparent !important;
}
#ss-home-hero .ss-hero__atmosphere.e-con {
inset: 0 !important;
}
#ss-home-hero .ss-hero__atmosphere.e-con,#ss-home-hero .ss-hero__grid.e-con {
position: absolute !important;
z-index: 0 !important;
pointer-events: none;
}
#ss-home-hero .ss-hero__grid.e-con {
inset: -1px !important;
}
#ss-home-hero .ss-hero__glow.e-con,#ss-home-hero .ss-hero__noise.e-con {
position: absolute !important;
z-index: 0 !important;
pointer-events: none;
}
#ss-home-hero .ss-hero__noise.e-con {
inset: 0 !important;
}
#ss-home-hero .ss-hero__stage-glow.e-con {
position: absolute !important;
z-index: 0 !important;
pointer-events: none;
}
#ss-home-hero .ss-hero__inner.e-con {
position: relative;
z-index: 1;
display: grid !important;
grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr);
align-items: center;
gap: clamp(24px, 2.8vw, 44px);
width: 100% !important;
max-width: min(1520px, calc(100vw - clamp(48px, 8vw, 160px))) !important;
margin-inline: auto !important;
/* Same token the card's height budget subtracts, so the two can never
drift apart and re-introduce the double-charge shrink. */
padding: var(--ss-home-hero-pad, clamp(24px, 5vh, 56px)) clamp(24px, 4vw, 72px) !important;
box-sizing: border-box;
}
#ss-home-hero .ss-hero__copy.e-con {
position: relative;
z-index: 1;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: center !important;
width: 100%;
padding: 0 !important;
gap: 0 !important;
}
#ss-home-hero .ss-hero__inner > .e-con,
#ss-home-hero .ss-hero__copy > .elementor-widget,
#ss-home-hero .ss-hero__spec-info > .elementor-widget,
#ss-home-hero .ss-hero__cta > .elementor-widget,
#ss-home-hero .ss-hero__spec-media > .elementor-widget {
margin: 0;
}
#ss-home-hero .ss-hero__visual.e-con {
position: relative;
display: flex !important;
align-items: center !important;
justify-content: center !important;
/* Mirrors .ss-hero__visual above — 42svh (not vh) so the card
never outgrows the fold on short laptops with browser chrome.
min() keeps the card bounded by BOTH width and viewport height;
on very short viewports the .ss-hero__spec internal content
(image + spec-info) reflows instead of pushing the rail away. */
height: clamp(260px, min(30vw, 42svh), 460px) !important;
padding: 0 !important;
}
/* Laptop heights — deliberately NO height-gated overrides.
* WordPress/Elementor scale on WIDTH breakpoints: a 13" laptop must show the
* same content and the same 4:3 card as a desktop monitor, just smaller. The
* two @media (max-height: …) blocks that used to live here did the opposite —
* they flipped .ss-hero__spec-media to 16/9 and hid .ss-hero__note and
* .ss-hero__caps-note, so every laptop rendered a *different composition*
* instead of a smaller one, and 16" (860px) vs 13" (770px) disagreed.
* Removed. The short-viewport case is now handled fluidly instead: the card
* is bounded by the fold's height budget (see .ss-hero__spec below), so it
* scales down with the available height while keeping its 4:3 shape and its
* share of the hero — no breakpoint, no dropped content. */
#ss-home-hero .ss-hero__spec.e-con {
position: relative;
z-index: 2;
display: flex !important;
flex-direction: column !important;
/* Single source of truth for the card width: the --ss-home-card-w token
in body.home. Do not add a second width rule for this selector anywhere
in this file — a later copy silently wins on cascade order and makes
edits to the token look like they did nothing.
Width-driven like any other Elementor widget (30vw, capped at 420px), so
the card keeps its designed proportions on every laptop width.
The second term is the height budget, and it is the ONLY thing that may
shrink the card: the card is 4:3 media + an info block, so its height is
1.176x its width. (fold - 2 * hero pad) / 1.176 is therefore the widest
card that still fits inside the fold — measure against what is actually
left AFTER the hero's own padding, not against the raw fold.
Result: full 420px on every laptop down to ~740px tall, and the card
height lands at 94–106% of the copy column's height — i.e. the two
columns read as one balanced block instead of a big text wall beside a
small card. */
width: min(100%, var(--ss-home-card-w));
padding: 0 !important;
background:
radial-gradient(circle at 50% 30%, rgba(96, 200, 255, 0.18) 0%, rgba(39, 119, 242, 0.08) 52%, transparent 76%),
rgba(10, 20, 40, 0.86);
border: 1px solid rgba(140, 178, 255, 0.22);
box-shadow: 0 22px 44px -20px rgba(0, 0, 0, 0.48), 0 34px 70px -30px rgba(15, 60, 160, 0.38);
animation: ss-hero-float 12s ease-in-out infinite;
}
#ss-home-hero .ss-hero__spec.e-con::before,
#ss-home-hero .ss-hero__spec.e-con::after {
content: "";
position: absolute;
width: 18px;
height: 18px;
pointer-events: none;
z-index: 3;
}
#ss-home-hero .ss-hero__spec.e-con::before {
left: 0;
top: 0;
border-top: 1.5px solid var(--ss-cyan-soft);
border-left: 1.5px solid var(--ss-cyan-soft);
}
#ss-home-hero .ss-hero__spec.e-con::after {
right: 0;
bottom: 0;
border-bottom: 1.5px solid var(--ss-cyan-soft);
border-right: 1.5px solid var(--ss-cyan-soft);
}
#ss-home-hero .ss-hero__spec-media.e-con {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
padding: 0 !important;
border-bottom: 1px solid rgba(140, 178, 255, 0.22);
}
#ss-home-hero .ss-hero__spec-media > .elementor-widget-image {
width: 100% !important;
height: 100% !important;
}
#ss-home-hero .elementor-widget-image.ss-hero__spec-image,
#ss-home-hero .elementor-widget-image.ss-hero__spec-image img {
display: block;
width: 100% !important;
height: 100% !important;
object-fit: cover;
object-position: 50% 42%;
}
#ss-home-hero .ss-hero__spec-media.e-con::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, transparent 55%, rgba(10, 20, 40, 0.9) 100%);
pointer-events: none;
}
#ss-home-hero .elementor-widget-text-editor.ss-hero__spec-live {
position: absolute;
left: 14px;
top: 14px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: calc(0.0166667 * var(--ss-home-card-w));
width: max-content;
/* Tier c of the golden ladder = a / phi^3 = 24.55px (it was 24 — already
within 2% of the ladder, which is why this one barely moves).
Font and padding are fractions of the card width, not fixed px: the card
shrinks to 88.6% on a laptop and its interior used not to shrink at all. */
height: 24.55px;
padding-block: 0;
padding-inline: 11.77px;
box-sizing: border-box;
font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
font-size: clamp(8.5px, calc(0.0238095 * var(--ss-home-card-w)), 10px);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
line-height: 1;
color: #eaf1ff;
background: rgba(6, 13, 28, 0.72);
border: 1px solid rgba(148, 180, 255, 0.3);
border-radius: 999px;
backdrop-filter: blur(8px);
}
#ss-home-hero .ss-hero__spec-info.e-con {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
/* Fluid so the info block shrinks with the card instead of staying a fixed
slab (its 2-col spec list wraps more as the card narrows, which used to
make the card stop scaling below ~370px). Percentages resolve against
the card width and land on 26px/26px/28px at the 420px desktop width,
so the approved desktop look is unchanged. */
padding: clamp(18px, 6.22%, 26px) clamp(18px, 6.22%, 26px) clamp(20px, 6.7%, 28px) !important;
}
#ss-home-hero .elementor-widget-text-editor.ss-hero__badge {
display: inline-flex;
align-items: center;
flex-wrap: nowrap;
gap: 8px;
width: max-content;
max-width: 100%;
margin: 0 0 clamp(8px, 1.5vh, 14px);
padding: 8px 16px 8px 12px;
font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
line-height: 1.3;
min-height: 32px;
color: #d3e3ff;
background: linear-gradient(180deg, rgba(64, 138, 255, 0.22), rgba(39, 119, 242, 0.12));
border: 1px solid rgba(148, 190, 255, 0.6);
border-radius: 999px;
box-shadow: 0 0 0 1px rgba(148, 190, 255, 0.12) inset, 0 8px 20px -10px rgba(39, 119, 242, 0.6);
white-space: nowrap;
}
#ss-home-hero .elementor-widget-heading.ss-hero__title .elementor-heading-title {
margin: 0 0 14px;
max-width: 16em;
font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
font-size: clamp(28px, 3.5vw, 50px); /* saturates at ~1440px so 1440 and 1920 render the same */
font-weight: 700;
line-height: 1.14;
letter-spacing: -0.01em;
color: var(--ss-white);
}
#ss-home-hero .elementor-widget-heading.ss-hero__title-sub .elementor-heading-title {
display: block;
margin: 0 0 clamp(14px, 2.2vh, 20px);
font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
font-size: clamp(16px, 1.458vw, 21px); /* 21/1440 — saturates at 1440 so 1440 and 1920 render the same */
font-weight: 600;
letter-spacing: -0.005em;
line-height: 1.2;
background: linear-gradient(96deg, #8fc1ff 0%, var(--ss-cyan) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
#ss-home-hero .elementor-widget-text-editor.ss-hero__lede {
margin: 0 0 clamp(18px, 3vh, 28px);
max-width: min(36rem, 100%);
font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
font-size: clamp(14px, 1.19vw, 17px); /* saturates at ~1430px so 1440 and 1920 render the same */
line-height: 1.55;
color: rgba(226, 234, 250, 0.82);
}
#ss-home-hero .elementor-widget-text-editor.ss-hero__caps {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 2px;
margin: 0 0 14px;
font-size: 12.5px;
line-height: 1.2;
}
#ss-home-hero .elementor-widget-text-editor.ss-hero__caps a.ss-hero__cap {
font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #9ec4ff;
text-decoration: none;
padding: 4px 8px;
border-bottom: 1px solid transparent;
transition: color 0.15s ease, border-color 0.15s ease;
}
#ss-home-hero .elementor-widget-text-editor.ss-hero__caps a.ss-hero__cap:hover {
color: var(--ss-white);
border-bottom-color: rgba(255, 255, 255, 0.5);
}
#ss-home-hero .elementor-widget-text-editor.ss-hero__caps-note {
margin: 0 0 clamp(10px, 2.1vh, 20px);
padding-left: 9px;
max-width: 28rem;
font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 1.45;
color: rgba(200, 214, 240, 0.62);
}
#ss-home-hero .ss-hero__cta.e-con {
position: relative;
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap;
align-items: center !important;
gap: 12px;
margin: 0 0 clamp(12px, 2.5vh, 24px) !important;
padding: 0 !important;
}
#ss-home-hero .ss-hero__cta.e-con > .elementor-widget {
position: relative;
z-index: 1;
width: auto !important;
flex: none;
}
#ss-home-hero .ss-hero__cta.e-con > .elementor-widget-button {
box-shadow: none !important;
filter: none !important;
}
#ss-home-hero .elementor-widget-button.ss-hero__btn--solid .elementor-button,
#ss-home-hero .elementor-widget-button.ss-hero__btn--ghost .elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 12px 26px;
font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: 0;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
#ss-home-hero .elementor-widget-button.ss-hero__btn--solid .elementor-button {
background: var(--ss-ink);
color: var(--ss-white) !important;
border-color: var(--ss-ink);
box-shadow: none;
}
#ss-home-hero .elementor-widget-button.ss-hero__btn--solid .elementor-button:hover {
background: #122544;
color: var(--ss-white) !important;
transform: translateY(-1px);
box-shadow: none;
}
#ss-home-hero .elementor-widget-button.ss-hero__btn--ghost .elementor-button {
background: rgba(255, 255, 255, 0.05);
color: var(--ss-white) !important;
border-color: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(10px);
}
#ss-home-hero .elementor-widget-button.ss-hero__btn--ghost .elementor-button:hover {
background: rgba(255, 255, 255, 0.1);
border-color: var(--ss-white);
transform: translateY(-1px);
}
#ss-home-hero .ss-hero__stats.e-con {
flex-direction: row !important;
flex-wrap: wrap;
gap: clamp(22px, 3.5vw, 40px);
width: min(100%, 36rem) !important;
padding: clamp(10px, 1.9vh, 18px) 0 0 !important;
margin: 0 0 clamp(5px, 1.05vh, 10px) !important;
border-top: 1px solid var(--ss-white-14);
}
#ss-home-hero .ss-hero__stats.e-con,#ss-home-hero .ss-hero__stat.e-con {
display: flex !important;
align-items: flex-start !important;
max-width: 100% !important;
}
#ss-home-hero .ss-hero__stat.e-con {
flex-direction: column !important;
gap: 5px;
width: auto !important;
flex: 0 1 auto;
padding: 0 !important;
}
#ss-home-hero .elementor-widget-heading.ss-hero__stat-num .elementor-heading-title {
margin: 0;
font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
font-size: clamp(22px, 2.4vw, 30px); /* saturates at ~1250px; at 1440 → 30px cap */
font-weight: 700;
line-height: 1;
color: var(--ss-white);
white-space: nowrap;
}
#ss-home-hero .elementor-widget-text-editor.ss-hero__stat-label {
margin: 0;
font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 1.3;
color: rgba(210, 222, 245, 0.68);
max-width: 11em;
}
#ss-home-hero .elementor-widget-text-editor.ss-hero__note {
margin: 0;
max-width: 34rem;
font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 1.5;
color: rgba(180, 197, 230, 0.55);
}
#ss-home-hero .elementor-widget-heading.ss-hero__spec-eyebrow .elementor-heading-title {
margin: 0 0 12px;
font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
font-size: clamp(9px, calc(0.0261905 * var(--ss-home-card-w)), 11px);
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
line-height: 1.2;
color: #7ea9ff;
}
#ss-home-hero .elementor-widget-heading.ss-hero__spec-heading .elementor-heading-title {
margin: 0 0 clamp(10px, 4.3%, 18px);
font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
font-size: clamp(18px, calc(0.052381 * var(--ss-home-card-w)), 22px);
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.18;
color: var(--ss-white);
}
#ss-home-hero .elementor-widget-icon-list.ss-hero__spec-list {
display: block !important;
width: 100% !important;
margin: 0;
padding: 0;
border-top: 0;
}
#ss-home-hero .elementor-widget-icon-list.ss-hero__spec-list .elementor-icon-list-items {
display: grid;
width: 100%;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 14px;
margin: 0;
padding: clamp(9px, 3.35%, 14px) 0 0;
list-style: none;
border-top: 1px solid rgba(255, 255, 255, 0.12);
box-sizing: border-box;
}
#ss-home-hero .elementor-widget-icon-list.ss-hero__spec-list .elementor-icon-list-item {
display: flex;
align-items: center;
gap: 8px;
margin-top: 0; /* kill Elementor's +sibling margin so all four beans align on one line */
font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
/* Tracks the card width so the two-column specs stay on one line when a
short viewport narrows the card. Resolves to 12px at the 420px desktop
card to match live (.ss-hero__spec-list li { font-size: 12px }). */
font-size: clamp(8.5px, calc(0.0285714 * var(--ss-home-card-w)), 12px);
font-weight: 600;
letter-spacing: 0.02em;
color: rgba(226, 234, 250, 0.9);
}
#ss-home-hero .elementor-widget-icon-list.ss-hero__spec-list .elementor-icon-list-icon {
/* Mirrors the old .ss-hero__spec-check: a 17px cyan circle with a dark
tick and a soft glow ring. The svg already draws the circle + tick, so
only size + glow are needed here. */
width: 17px;
height: 17px;
flex: none;
--e-icon-list-icon-size: 17px;
}
#ss-home-hero .elementor-widget-icon-list.ss-hero__spec-list .elementor-icon-list-icon svg {
margin: 0;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(79, 209, 255, 0.16);
}
#ss-home-hero .elementor-widget-icon-list.ss-hero__spec-list .elementor-icon-list-icon + .elementor-icon-list-text {
padding-inline-start: 0; /* the parent flex gap (8px) supplies the spacing */
}
/*
* Type scales with viewport WIDTH (vw), not height. A 1440x900 laptop is the
* same design as a 1920x1080 desktop at full size; the old "fold x K" law
* scaled every font by the remaining viewport height, so 1440 (fold 732px,
* just below the 781.72px reference) rendered ~6% smaller than desktop. That
* one height-based shrink broke the badge/title ratio (the badge pill is a
* fixed golden-ladder tier that never shrank) and shifted the lede's line
* breaks (a smaller font in the same 36rem box wraps later). The width-driven
* clamps in the base rules are now the single source of truth; height (vh)
* remains there only as an overflow guard.
*/
#ss-home-hero .elementor-widget-text-editor.ss-hero__badge {
/* Tier b of the golden ladder = a / phi^2 = 39.73px. Height is set (not
min-height) with the content centred, so the tier holds exactly; the
inline pad is the vertical air x phi, which keeps the pill's own
proportions golden too. */
height: 39.73px;
padding-block: 0;
padding-inline: 20.57px;
box-sizing: border-box;
}
@media (max-width: 560px) {
#ss-home-hero .ss-hero__inner.e-con {
grid-template-columns: 1fr;
padding: 20px 16px 24px !important;
gap: 16px;
}
#ss-home-hero .ss-hero__copy.e-con {
width: 100%;
}
#ss-home-hero .ss-hero__visual.e-con {
height: auto !important;
margin-top: 0;
width: 100%;
}
#ss-home-hero .ss-hero__spec-media.e-con {
aspect-ratio: 16 / 9;
}
#ss-home-hero .elementor-widget-heading.ss-hero__title .elementor-heading-title {
max-width: none;
}
#ss-home-hero .ss-hero__spec.e-con {
width: 100%;
}
#ss-home-hero .ss-hero__spec-info.e-con {
padding: 16px 16px 18px !important;
}
#ss-home-hero .elementor-widget-heading.ss-hero__spec-heading .elementor-heading-title {
margin-bottom: 8px;
font-size: 19px;
}
#ss-home-hero .elementor-widget-icon-list.ss-hero__spec-list .elementor-icon-list-items {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 5px;
padding-top: 8px;
}
#ss-home-hero .elementor-widget-icon-list.ss-hero__spec-list .elementor-icon-list-item {
flex-direction: column;
align-items: flex-start;
gap: 5px;
font-size: 10px;
line-height: 1.2;
}
#ss-home-hero .elementor-widget-text-editor.ss-hero__badge {
margin-bottom: 10px;
}
#ss-home-hero .elementor-widget-heading.ss-hero__title-sub .elementor-heading-title {
margin-bottom: 8px;
}
#ss-home-hero .elementor-widget-text-editor.ss-hero__lede,#ss-home-hero .elementor-widget-text-editor.ss-hero__caps-note {
margin-bottom: 12px;
}
#ss-home-hero .ss-hero__cta.e-con {
flex-wrap: nowrap !important;
gap: 8px !important;
margin-bottom: 10px !important;
}
#ss-home-hero .ss-hero__cta.e-con > .elementor-widget-button {
flex: 1 1 0 !important;
width: auto !important;
min-width: 0 !important;
}
#ss-home-hero .elementor-widget-button.ss-hero__btn--solid .elementor-button,
#ss-home-hero .elementor-widget-button.ss-hero__btn--ghost .elementor-button {
width: 100% !important;
min-height: 42px;
padding: 9px 8px;
font-size: 11px;
letter-spacing: 0.055em;
white-space: nowrap;
box-sizing: border-box;
}
#ss-home-hero .ss-hero__stats.e-con {
padding-top: 10px;
margin-bottom: 8px !important;
}
#ss-home-hero .elementor-widget-text-editor.ss-hero__note {
line-height: 1.45;
}
#ss-home-hero .elementor-widget-text-editor.ss-hero__badge {
font-size: 9.5px;
letter-spacing: 0.04em;
padding-inline: 14px;
}
#ss-home-hero .ss-hero__inner.e-con > .ss-hero__stats.e-con {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px 12px;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 14px 0 0 !important;
border-top: 1px solid var(--ss-white-14);
background: transparent;
}
#ss-home-hero .ss-hero__inner.e-con > .ss-hero__stats.e-con > .ss-hero__stat.e-con {
display: flex !important;
flex-direction: column !important;
gap: 5px;
margin: 0 !important;
padding: 0 !important;
}
#ss-home-hero .ss-hero__inner.e-con > .ss-hero__stats.e-con .elementor-widget-heading.ss-hero__stat-num .elementor-heading-title {
font-size: 21px;
}
#ss-home-hero .ss-hero__inner.e-con > .ss-hero__stats.e-con .elementor-widget-text-editor.ss-hero__stat-label {
font-size: 10.5px;
line-height: 1.25;
max-width: none;
}
#ss-home-hero .ss-hero__inner.e-con > .elementor-widget-text-editor.ss-hero__note {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
font-size: 11px;
line-height: 1.45;
color: rgba(180, 197, 230, 0.55);
}
}
/* Tablet / iPad: keep the copy and product card as the upper band, then pull
stats/note out of both columns into a full-width proof rail below them. The
DOM move is done only by home-hero-tablet.js, so this media block cannot
affect the web layout. */
@media (min-width: 561px) and (max-width: 1024px) {
body.home {
--ss-home-card-w: clamp(280px, 38vw, 400px);
}
#ss-home-hero .ss-hero__inner.e-con {
grid-template-columns: minmax(0, 1.12fr) minmax(280px, 0.88fr) !important;
grid-template-rows: minmax(0, 1fr) auto auto !important;
align-items: stretch !important;
column-gap: clamp(16px, 2.6vw, 32px) !important;
row-gap: clamp(14px, 2.2vh, 22px) !important;
}
#ss-home-hero .ss-hero__copy.e-con {
grid-column: 1;
grid-row: 1;
}
#ss-home-hero .ss-hero__visual.e-con {
grid-column: 2;
grid-row: 1;
height: auto !important;
min-height: 0;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
gap: 0;
}
#ss-home-hero .ss-hero__stage-glow.e-con {
width: min(420px, 130%) !important;
height: min(420px, 82%) !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
animation: none !important;
}
#ss-home-hero .ss-hero__spec.e-con {
width: min(100%, var(--ss-home-card-w));
}
#ss-home-hero .ss-hero__inner.e-con > .ss-hero__stats.e-con {
grid-column: 1 / -1;
grid-row: 2;
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(16px, 3vw, 36px);
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: clamp(12px, 1.8vh, 18px) 0 0 !important;
border-top: 1px solid var(--ss-white-14);
border-bottom: 0;
background: transparent;
}
#ss-home-hero .ss-hero__inner.e-con > .ss-hero__stats.e-con > .ss-hero__stat.e-con {
display: flex !important;
flex-direction: column !important;
gap: 6px;
margin: 0 !important;
padding: 0 !important;
border-right: 0;
}
#ss-home-hero .ss-hero__inner.e-con > .ss-hero__stats.e-con .elementor-widget-heading.ss-hero__stat-num .elementor-heading-title {
font-size: clamp(24px, 3.2vw, 30px);
}
#ss-home-hero .ss-hero__inner.e-con > .ss-hero__stats.e-con .elementor-widget-text-editor.ss-hero__stat-label {
font-size: clamp(11px, 1.35vw, 13px);
max-width: none;
}
#ss-home-hero .ss-hero__inner.e-con > .elementor-widget-text-editor.ss-hero__note {
grid-column: 1 / -1;
grid-row: 3;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
font-size: 11px;
line-height: 1.5;
color: rgba(180, 197, 230, 0.52);
}
#ss-home-hero .elementor-widget-heading.ss-hero__title .elementor-heading-title {
font-size: clamp(27px, 3.7vw, 33px) !important;
line-height: 1.12 !important;
margin-bottom: 8px;
}
#ss-home-hero .elementor-widget-heading.ss-hero__title-sub .elementor-heading-title {
margin-bottom: 14px;
}
#ss-home-hero .elementor-widget-text-editor.ss-hero__badge {
height: 36px;
font-size: 10.5px;
letter-spacing: 0.07em;
padding-inline: 16px;
margin-bottom: 12px;
}
#ss-home-hero .elementor-widget-text-editor.ss-hero__lede {
font-size: 15px !important;
margin-bottom: 16px;
}
#ss-home-hero .ss-hero__cta.e-con {
flex-wrap: nowrap !important;
gap: 8px !important;
}
#ss-home-hero .ss-hero__cta.e-con > .elementor-widget-button {
flex: 1 1 0 !important;
width: auto !important;
min-width: 0 !important;
}
#ss-home-hero .elementor-widget-button.ss-hero__btn--solid .elementor-button,
#ss-home-hero .elementor-widget-button.ss-hero__btn--ghost .elementor-button {
width: 100% !important;
min-height: 44px;
padding: 10px 12px;
font-size: 11.5px;
letter-spacing: 0.06em;
white-space: nowrap;
box-sizing: border-box;
}
#ss-home-hero .elementor-widget-text-editor.ss-hero__caps-note {
font-size: 11.5px !important;
}
#ss-home-hero .ss-hero__stats.e-con {
gap: 16px 24px !important;
}
#ss-home-hero .elementor-widget-text-editor.ss-hero__note {
font-size: 11px !important;
}
}
@media (prefers-reduced-motion: reduce) {
#ss-home-hero .ss-hero__spec.e-con {
animation: none !important;
}
}
/* === SS HOME NATIVE: heading line-height ===
* Elementor's frontend.min.css forces `.elementor-heading-title { line-height: 1 }`,
* so the design line-heights set on the widget wrappers (e.g. .ss-paths__title) no
* longer reach the text. Restore the original values on the inner title element. */
.ss-offer__heading .elementor-heading-title { line-height: 1.2; }
.ss-stock__title .elementor-heading-title { line-height: 1.12; }
.ss-stock__close-title .elementor-heading-title { line-height: 1.25; }
.ss-paths__title .elementor-heading-title { line-height: 1.28; }
.ss-home-why-title .elementor-heading-title { line-height: 1.25; }
.ss-svc__claim .elementor-heading-title { line-height: 1.32; }
.ss-svc__bridge-lead .elementor-heading-title { line-height: 1.4; }
.ss-svc__title .elementor-heading-title,.ss-home-bridge .ss-bridge-stage__title .elementor-heading-title { line-height: 1.25; }
/* Elementor writes a fixed px font-size on the inner heading-title, which
overrides the responsive clamp set on the widget wrappers. Restore the
clamp values so the headings scale down on mobile. */
.ss-offer__heading .elementor-heading-title { font-size: clamp(26px, 2.6vw, 34px) !important; }
.ss-svc__claim .elementor-heading-title { font-size: clamp(20px, 1.9vw, 24px) !important; }
.ss-svc__title .elementor-heading-title { font-size: clamp(17px, 1.5vw, 20px) !important; }
/* Eyebrows/kickers inherit the theme body line-height 1.65 on live (raw HTML);
native heading-title forces `normal` (~1.2), shortening every eyebrow box by
~3px and shifting the vertical rhythm. Restore 1.65 to match live. */
.ss-offer__eyebrow .elementor-heading-title,
.ss-stock__eyebrow .elementor-heading-title,
.ss-stock__band-label .elementor-heading-title,
.ss-paths__eyebrow .elementor-heading-title,
.ss-svc__kicker .elementor-heading-title,
.ss-bridge-stage__eyebrow .elementor-heading-title { line-height: 1.65; }
/* Native heading widget nests the pulse dot + "Beijing stock" text inside
p.elementor-heading-title, so the status pill's inline-flex/center/gap (set on
the outer .elementor-widget-heading div) never reaches them and the display:block
dot drops onto its own line. Re-create the flex row on the inner title. */
.ss-bridge-stage__status .elementor-heading-title {
display: inline-flex;
align-items: center;
gap: 7px;
line-height: 1;
}
/* Elementor writes a px letter-spacing (1.98px) onto the inner heading-title that
is ~0.1px tighter than live's 0.16em (2.08px at 13px); correct it. !important
needed: the generated selector has 4 classes, beating a 2-class override. */
.ss-offer__eyebrow .elementor-heading-title { letter-spacing: 0.16em !important; }
/* Elementor turns .ss-offer__intro into a flex column, so its heading/text
* widgets shrink-wrap to content (eyebrow 89.73px, heading 494.23px) instead
* of filling the 640px intro like live's display:block children. Stretch them
* to full width so text sits against the same left edge as live. */
.ss-offer__eyebrow,
.ss-offer__heading,
.ss-offer__lede {
width: 100%;
}
/* === SS HOME NATIVE: svc stage chrome ===
* Native widgets replaced the raw HTML, so the corner brackets + cross
* dividers no longer render. Rebuild with pseudo-elements. */
.ss-svc__rail::before {
top: -1px;
left: -1px;
border-top: 2px solid var(--ss-blue);
border-left: 2px solid var(--ss-blue);
}
.ss-svc__rail::before,.ss-svc__stage::before {
content: "";
position: absolute;
width: 20px;
height: 20px;
z-index: 3;
}
.ss-svc__stage::before {
top: auto !important;
left: auto !important;
bottom: -1px;
right: -1px;
border-bottom: 2px solid var(--ss-blue);
border-right: 2px solid var(--ss-blue);
}
.ss-svc__stage::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 1;
background-image:
linear-gradient(var(--ss-line), var(--ss-line)),
linear-gradient(var(--ss-line), var(--ss-line));
background-size: 1px 100%, 100% 1px;
background-position: center, center;
background-repeat: no-repeat;
}
@media (max-width: 560px) {
.ss-svc__stage::after {
display: none;
}
}
/* === SS HOME END === */
/* Top ambient glow under the header: soften the transition from the white bar
* into the dark hero with a faint cool falloff. Visual-only. */
#ss-home-hero .ss-hero__atmosphere {
background-image: linear-gradient(to bottom, rgba(15, 23, 42, 0.20), rgba(15, 23, 42, 0) 190px);
}
/* Grounding the first fold: a faint cyan hairline above the brand rail plus a
* very soft bottom fade so the visual container closes instead of stopping. */
#ss-home-brands::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.28), transparent);
pointer-events: none;
z-index: 2;
}
#ss-home-brands::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 34px;
background: linear-gradient(to bottom, rgba(5, 8, 15, 0), rgba(5, 8, 15, 0.16));
pointer-events: none;
z-index: 2;
}
/* Keep first screen full with 80px header: add 7px to home brands rail. */
body.home #ss-home-brands {
height: 72px !important;
min-height: 72px !important;
}