must not transform. */
.h-hero .cta-but.cta-main a:hover { transform:none; }
.h-hero .cta-but.cta-sec a::before, .h-hero .cta-but.cta-sec a::after { content:none; }
/* leonprod Hebrew glyphs sit low in their em box: flex-centering leaves the
label below the pill's middle. Lift the label span only. */
.h-hero .cta-but.cta-main .main { position:relative; top:-3px; }
/* the hero nav replaces the theme mini-header at the top of the homepage;
the mini-header returns as the fixed navbar on scroll (js: .navbar-fixed-top) */
body.homepage:not(.navbar-fixed-top) .mini-header { visibility:hidden; pointer-events:none; }
/* ============================================================================
Every section preview harness ran under a global `* { box-sizing:border-box }`
reset that the theme (all.css) does NOT have — the legacy theme is content-box
everywhere. Rules below that pair width with padding (e.g. .b-orgs .holder)
need it, so scope the reset to the 2026 section roots. Hero excluded:
prep/hero.html was built without the reset.
============================================================================ */
.b-sp-gallery.spks26, .b-sp-gallery.spks26 *, .b-sp-gallery.spks26 *::before, .b-sp-gallery.spks26 *::after,
.b-what, .b-what *, .b-what *::before, .b-what *::after,
.b-audience.sec3, .b-audience.sec3 *, .b-audience.sec3 *::before, .b-audience.sec3 *::after,
.b-video, .b-video *, .b-video *::before, .b-video *::after,
.b-orgs, .b-orgs *, .b-orgs *::before, .b-orgs *::after,
.b-testimons, .b-testimons *, .b-testimons *::before, .b-testimons *::after,
.b-workshops, .b-workshops *, .b-workshops *::before, .b-workshops *::after,
.b-cta, .b-cta *, .b-cta *::before, .b-cta *::after,
.b-code, .b-code *, .b-code *::before, .b-code *::after {
box-sizing: border-box;
}
/* ================= SECTION: spks (prep/sections/spks.css) ================= */
/* ============================================================================
COM.PLEX 2026 homepage — part "spks" (speakers strip under the hero)
Figma: figma-v2-raw.json > '1' > 'spks' (node 42:1737), section-relative.
Namespaced under the block root class combo .b-sp-gallery.spks26 —
OVERRIDES the legacy block styles (all.css:1847-2246, responsive.css:
2181-2383, 3726-3770) without editing them. Load AFTER all.css/responsive.css.
All selectors here are >= 0,3,0 specificity so they beat the legacy
0,2,0 rules regardless of order; mobile values are re-asserted inside
the media query because of that.
Image urls are theme-relative (../images/...) assuming this file ships
in the theme css/ dir next to all.css; spks-preview.html rewrites them
to assets/spks/ copies.
Kept untouched on purpose (JS/hover/carousel mechanics):
.spks flex row, .item flex sizing, .spk-photo grayscale cover,
.hoverized (z10) + .spk-video-overlay, .gal-nav (z50) mobile arrows.
============================================================================ */
/* ---- block root: was .hblock.inv black — now transparent over the hero BG
gradient continuation (hero-owned, runs to y=2240) / white page ------ */
.hblock.b-sp-gallery.spks26 {
background: transparent;
padding-top: 260px; /* Figma: spks frame padding-top 260 below hero bottom (y=1056) */
}
/* The design's `spks` frame starts at y=1056 — the HERO frame's height (42:1659).
The fold here renders 1136 tall instead, because .hero-viewport is sized to
the BG band's bg1 (42:1662, h=1136), which in the design overshoots the hero
frame and runs on behind this section. So everything below started 80 design-px
low: title at design y≈1398 instead of its 1316, photo strip at ≈1570 instead
of 1487 — and that is the whole reason the squiggles "ended a bit above" the
photos. .hero-pattern is right (1494 tall, ending 7px INTO the strip, exactly
as Figma clips it at 42:1664); the strip was the thing out of place.
Pull the section back onto its design origin. -80 expressed against the same
vw scale the fold uses, so the two track at every width. Nothing is hidden by
the overlap: this section is transparent over a band that paints continuously
through it, so there is no seam to expose. Fixing the fold height itself would
re-centre .hero-stage and move the brain 40px — this is the surgical half. */
@media (min-width:901px) {
.hblock.b-sp-gallery.spks26 {
margin-top: calc(-80 / 1920 * 100vw);
}
}
/* ---- header: Frame 1000000851 (160,1316) 1600x111, centered --------------
position:relative lifts the title into the positioned paint phase: the
hero's extended BG band + Pattern (positioned, earlier in tree) continue
behind this header — a static title would be painted over by them. */
.hblock.b-sp-gallery.spks26 .bl-title {
position: relative;
z-index: 1;
font-family: 'leonprod', sans-serif; /* was anomalia serif */
color: #0E1819; /* was #fff on .inv */
width: min(1600px, calc(100% - 40px)); /* 1600px box = 160px side margins @1920 */
max-width: 1600px;
margin: 0 auto;
padding: 0 0 60px; /* 60 = Figma itemSpacing header->strip (was 150/60) */
text-align: center;
}
/* H2 — node 42:1739: leonprod 400, 70/80, center, #0E1819 */
.b-sp-gallery.spks26 .bl-title h2 {
font-weight: 400;
font-size: 70px;
line-height: 80px;
color: #0E1819;
margin: 0;
}
/* subtitle — node 42:1740: leonprod 400, 29/36.95, center, #0E1819 */
.b-sp-gallery.spks26 .bl-title h3 {
font-weight: 400;
font-size: 29px;
line-height: 1.274; /* 36.946px intrinsic */
color: #0E1819;
margin: 30px 0 0; /* ~= Figma 40px cap-to-cap gap (leadingTrim CAP_HEIGHT) */
}
/* exact cap-height trimming where supported (both nodes have leadingTrim) */
@supports (text-box: trim-both cap alphabetic) {
.b-sp-gallery.spks26 .bl-title h2,
.b-sp-gallery.spks26 .bl-title h3 {
text-box: trim-both cap alphabetic;
}
.b-sp-gallery.spks26 .bl-title h3 {
margin-top: 40px; /* true Figma gap once cap-trimmed */
}
}
/* ---- strip: node 42:1741 (0,1487) 1920x954 full-bleed -------------------- */
.b-sp-gallery.spks26 .spks {
position: relative; /* anchors the ::after tint */
height: 49.6875vw; /* 954/1920 (was 53.125vw) */
max-height: 954px; /* design height @1920 (was 90vh) */
/* background:#000 inherited from all.css — fully covered by the 5 photos */
}
/* #9EC5FF @20%, blend mode COLOR — tint layer ON TOP of the photo strip.
z-order: photos z1 < tint z2 < .hoverized z10 < .gal-nav z50 */
.b-sp-gallery.spks26 .spks::after {
content: "";
position: absolute;
inset: 0;
background: #9EC5FF;
opacity: 0.2;
mix-blend-mode: color;
pointer-events: none;
z-index: 2;
}
/* ---- "לתוכנית הכנס" CTA under the strip ------------------------------------
Was the legacy big arrow, absolutely placed over the photos (top:50%/left:2%,
all.css:2321) and hidden here because it is not in the 2026 design. It is now
an in-flow, centered pill at every breakpoint: strip above, .b-what below.
#sp_cta stays as the scroll anchor (uxilive-home.js:58). Shape/fill/arrow/hover
all come from the shared .cta-but.cta-main a (all.css:3600). */
.b-sp-gallery.spks26 .cta {
display: block;
position: static;
margin: 0;
padding: 120px 20px;
text-align: center;
background: var(--ink);
}
/* The .cta used to be carousel chrome, so three legacy rules still reach it and
would now fire off a button that sits below the strip:
.lefties / .last-sel faded it while speakers 4-5 were hovered
(all.css:2334/2345; uxilive-home.js:96-102 still tags .spks26 .lefties),
.cta:hover scaled the whole box (all.css:2338) — the pill has its own
:hover scale (all.css:3620), and two transforms compound,
hovering it dimmed all five photos to 0.6 via .ctahov (all.css:2366,
uxilive-home.js:87-95).
It is a section CTA now: keep it lit, keep the strip alone. */
.b-sp-gallery.spks26.lefties .cta,
.b-sp-gallery.spks26.last-sel .cta {
opacity: 1;
}
.b-sp-gallery.spks26 .cta:hover {
transform: none;
}
.b-sp-gallery.spks26 .gal-wrap.ctahov .item {
opacity: 1;
}
/* ============================================================================
Mobile — keep the legacy carousel mechanics (responsive.css:2181-2383),
reskin colors for the light background. Values duplicated at .spks26
specificity so the desktop overrides above don't clobber them.
============================================================================ */
@media only screen and (max-width: 768px) {
.hblock.b-sp-gallery.spks26 {
padding-top: 40px; /* light bg: no 260px gradient runway on mobile */
}
.hblock.b-sp-gallery.spks26 .bl-title {
width: 100%;
padding: 42px 16px 32px; /* responsive.css .bl-title pattern (42/32) */
box-sizing: border-box;
}
.b-sp-gallery.spks26 .bl-title h2 {
font-size: 40px; /* suggested scale @390 viewport */
line-height: 46px;
}
.b-sp-gallery.spks26 .bl-title h3 {
font-size: 20px;
line-height: 26px;
margin-top: 12px;
}
@supports (text-box: trim-both cap alphabetic) {
.b-sp-gallery.spks26 .bl-title h3 {
margin-top: 18px;
}
}
/* re-assert legacy carousel geometry (responsive.css:2248-2264) over the
desktop .spks26 rules above */
.b-sp-gallery.spks26 .spks {
max-height: 150vw;
height: calc(90vh - 60px);
width: 390vw; /* 5 x 78vw items */
overflow: visible;
}
.b-sp-gallery.spks26 .spks .item {
width: 78vw;
flex: 1 0 78%;
height: 100%;
}
/* tint stays on .spks so it scrolls with the strip; still under
.gal-nav (z50) / .hoverized (z10), pointer-events:none */
/* CTA under the strip: the same centered pill as desktop, tighter rhythm.
responsive.css:2168 still pushes the legacy absolute geometry at
.b-sp-gallery .cta (0,2,0) — the base rule above outranks it (0,3,0). */
.b-sp-gallery.spks26 .cta {
padding: 60px 20px;
}
/* .gal-nav prev/next white arrows on black .back squares stay as-is —
still legible over the blue-tinted photos (responsive.css:2284-2369) */
}
/* ============================================================================
spks26 — speaker hover panel (Figma floating node 42:2391 "Frame 8338")
Design mock: photo 392x934 (42:2390, full colour) + bottom panel 392x167,
top-LEFT corner radius 124, filled by an "Animate 10 / Variant1" instance
(500x500 at panel-local (0,-129), clipped). Name: Leon 40/100 #0E1819,
title: 22/26.4, both right-aligned; text box at (74,38) 294x91.
Implemented as the existing .spk-info (kept for JS hooks) rising on
hover/focus-within with a gcanvas (js/hero26-gradient.js) inside; the
2025 hoverized-clone + video overlay is disabled for .spks26 in
js/uxilive-home.js. Units: design px -> vw via item width (20vw = 392px
mock, f = 20/392).
============================================================================ */
/* panel must not paint outside the tile while parked below it */
.b-sp-gallery.spks26 .spks .item {
overflow: hidden;
}
/* hovered/focused photo regains colour (design mock photo is full colour) */
.b-sp-gallery.spks26 .spks .item:hover .spk-photo a,
.b-sp-gallery.spks26 .spks .item:focus-within .spk-photo a {
filter: none;
}
/* 2025 video-overlay treatment: gone (belt & braces — JS no longer builds it) */
.b-sp-gallery.spks26 .spk-video-overlay {
display: none !important;
}
/* the panel itself */
.b-sp-gallery.spks26 .spk.item .spk-info {
display: block; /* overrides .home ... display:none */
position: absolute;
right: 0;
bottom: 0;
left: auto;
width: 100%;
height: auto;
min-height: 8.52vw; /* 167px @392-wide mock */
padding: 1.94vw 1.22vw 1.6vw; /* 38 top / 24 sides */
margin: 0;
border-radius: 6.33vw 0 0 0; /* rectangleCornerRadii [124,0,0,0] */
overflow: hidden;
/* fallback wash while the canvas boots / no JS (pastel like the design) */
background: linear-gradient(160deg, #C9E9FF 0%, #DFF7C9 55%, #EFFBD8 100%);
z-index: 3; /* photos z1 < tint z2 < panel z3 < .gal-nav z50 */
font-family: 'leonprod', sans-serif;
text-align: right;
transform: translateY(102%);
transition: transform 0.35s ease;
pointer-events: none; /* whole tile is one click target */
}
.b-sp-gallery.spks26 .spks .item:hover .spk-info,
.b-sp-gallery.spks26 .spks .item:focus-within .spk-info {
transform: translateY(0);
}
/* animated gradient fill — Animate 10 500x500 box at panel-local (0,-129),
clipped by the panel (overflow:hidden + radius). Canvas internal aspect is
the component frame (700x375); the Figma instance stretches it to 500x500,
so we stretch the same way. */
.b-sp-gallery.spks26 .spk-info .gcanvas {
position: absolute;
left: 0;
top: -6.58vw; /* -129px */
width: 25.51vw; /* 500px */
height: 25.51vw;
max-width: none;
display: block;
z-index: 0;
pointer-events: none;
}
/* text above the canvas */
.b-sp-gallery.spks26 .spk.item .spk-info-wrap {
position: relative;
z-index: 2;
display: block;
width: auto;
margin: 0;
}
/* name — Leon 40/100 #0E1819, right-aligned, no 2025 peach tag/rotation */
.b-sp-gallery.spks26 .spk.item .spk-name {
font-family: 'leonprod', sans-serif;
font-weight: 400;
font-size: 2.04vw; /* 40px */
line-height: 1;
color: #0E1819;
text-align: right;
display: block;
width: auto;
max-width: 100%;
margin: 0;
padding: 0;
background: none;
transform: none;
right: auto;
}
/* title/role — Leon 22/26.4 #0E1819 */
.b-sp-gallery.spks26 .spk.item .spk-role {
font-family: 'leonprod', sans-serif;
font-weight: 400;
font-size: 1.12vw; /* 22px */
line-height: 1.2;
color: #0E1819;
text-align: right;
display: block;
max-width: 100%;
margin: 1.02vw 0 0; /* 20px name->title gap */
padding: 0;
background: none;
transform: none;
right: auto;
}
.b-sp-gallery.spks26 .spk.item .spk-info a {
color: #0E1819;
text-decoration: none;
}
/* cap-height trimming (both design text nodes are cap-trimmed; makes the
38/20/38 rhythm land on the 167px panel exactly) */
@supports (text-box: trim-both cap alphabetic) {
.b-sp-gallery.spks26 .spk.item .spk-name,
.b-sp-gallery.spks26 .spk.item .spk-role {
text-box: trim-both cap alphabetic;
}
}
/* touch devices: no hover — the panel is simply always up */
@media (hover: none) {
.b-sp-gallery.spks26 .spk.item .spk-info {
transform: none;
transition: none;
}
.b-sp-gallery.spks26 .spks .item .spk-photo a {
filter: none;
}
}
/* mobile carousel (78vw tiles): rescale the panel, keep it static.
f = 78/392 per design px. */
@media only screen and (max-width: 768px) {
.b-sp-gallery.spks26 .spk.item .spk-info {
transform: none;
transition: none;
min-height: 33.2vw;
padding: 7.56vw 4.78vw 6.3vw;
border-radius: 24.7vw 0 0 0;
}
.b-sp-gallery.spks26 .spk-info .gcanvas {
top: -25.7vw;
width: 99.5vw;
height: 99.5vw;
}
.b-sp-gallery.spks26 .spk.item .spk-name {
font-size: 7.96vw;
}
.b-sp-gallery.spks26 .spk.item .spk-role {
font-size: 4.38vw;
margin-top: 3.98vw;
}
/* carousel photos show in colour on mobile */
.b-sp-gallery.spks26 .spks .item .spk-photo a {
filter: none;
}
}
/* ================= SECTION: what (prep/sections/what.css) ================= */
/* ============================================================
Section "what" — Figma section '2' (node 42:1742), 1920x854
Scoped under .b-what. Overrides the legacy all.css rules
(.b-what turquoise bg + planets are replaced by this design).
Layers: bg gradient (section) -> noise (::before) -> .holder
content -> .what-pattern line-art (topmost, per design).
============================================================ */
.b-what {
position: relative;
z-index: 18;
overflow: hidden;
padding: 0; /* overrides all.css 9em/8em — .holder carries the 160px paddings */
color: #0E1819;
font-family: 'leonprod', 'leonprod', "Times New Roman", times, serif;
/* white base + mint/lilac radial glow, center 696px@1920 = 36.25% */
background: radial-gradient(2029px 1125px at 36.25% 40px,
#FFFFFF 2.4%, #DFFCC7 14.4%, #FFFFFF 28.3%, #E8C0FF 82.6%, #FFFFFF 100%) #FFFFFF;
}
/* film-grain noise: Figma NOISE effect (size .5, black @ .25) — same
feTurbulence recipe as prep/pattern.svg filter0_n_8_1246 */
.b-what::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image: var(--figma-noise);
opacity: var(--noise-opacity);
background-repeat: repeat;
}
/* --- layout: two columns on the 1205px design grid ------------- */
.b-what .holder {
position: relative;
z-index: 1;
display: flex;
flex-direction: row; /* overrides all.css column */
align-items: flex-start; /* overrides all.css center */
gap: 80px;
width: auto; /* overrides all.css 80% */
max-width: 1205px; /* 475 + 80 + 650 */
margin: 0 auto;
/* 150px top (not 160): Figma y=160 is CAP-top (leadingTrim), the web line
box adds ~10px half-leading/ascent gap above the caps */
padding: 150px 0 160px; /* overrides all.css padding-bottom:0 */
}
/* heading — right column in RTL (first in DOM) */
.b-what .bl-title {
flex: 0 0 auto;
width: 475px;
margin: 0;
padding: 0; /* overrides generic .bl-title 150px/60px */
max-width: none;
text-align: right;
font-family: inherit;
}
.b-what .bl-title h2 {
/* pull the h2 cap-top up to the body column's cap-top (Figma aligns both
at y=160 with CAP_HEIGHT trim; the 70/80 line box sits ~17px lower) */
margin: -0.24em 0 0;
font-weight: 400; /* overrides generic bold */
font-size: 70px; /* overrides generic 4em */
line-height: 80px;
letter-spacing: 0;
text-align: right;
color: #0E1819;
}
/* body copy — left column */
.b-what .bl-content {
flex: 0 0 auto;
width: 650px;
max-width: none; /* overrides all.css var(--maxblock) */
font-size: 22px; /* overrides all.css 1.1em */
line-height: 33px;
letter-spacing: 0.44px;
text-align: right;
color: #0E1819;
}
.b-what .bl-content p {
margin: 0 0 40px; /* Figma paragraph gap */
}
.b-what .bl-content p:last-child {
margin-bottom: 0;
}
/* links: the 2px black / lime-on-hover underline comes from the shared
`.b-what .bl-content a` rule in all.css */
/* decorative line-art pattern — topmost, 10% strokes over the title */
.b-what .what-pattern {
position: absolute;
top: -5px;
left: calc(50% + 443.5px); /* pattern center is 443.5px left-canvas-right of section center */
transform: translateX(-50%);
width: 1145px;
height: 723px;
z-index: 2;
pointer-events: none;
}
.b-what .what-pattern img {
display: block;
width: 100%;
height: 100%;
}
/* legacy planet decorations are gone in this design */
.b-what .bl-title::before,
.b-what .bl-title::after,
.b-what .holder::before,
.b-what .holder::after {
display: none;
content: none;
animation: none;
}
/* ============================================================
Responsive — theme responsive.css conventions
============================================================ */
@media (max-width: 1400px) {
.b-what .holder {
max-width: none;
width: auto;
padding: 140px 4em;
}
.b-what .bl-title {
width: auto;
flex: 0 0 39%;
}
.b-what .bl-content {
width: auto;
flex: 1;
}
}
@media (max-width: 1024px) {
.b-what .holder {
padding: 120px 4em;
gap: 60px;
}
.b-what .bl-title h2 {
font-size: clamp(44px, 5.5vw, 70px);
line-height: 1.14em;
}
.b-what .what-pattern {
opacity: 0.85;
}
}
@media (max-width: 768px) {
/* stack: heading above body (theme's main stack point for this block) */
.b-what .holder {
flex-direction: column;
align-items: stretch;
gap: 40px;
padding: 80px 4em;
}
.b-what .bl-title,
.b-what .bl-content {
flex: 0 0 auto;
width: 100%;
}
.b-what .bl-title h2 {
font-size: 44px;
line-height: 1.14em;
}
/* 10%-opacity lines over a narrow column just add mud */
.b-what .what-pattern {
display: none;
}
}
@media (max-width: 600px) {
.b-what .holder {
width: 90%;
margin: 0 auto;
padding: 80px 0;
}
}
@media (max-width: 450px) {
.b-what .bl-title h2 {
font-size: 38px;
}
.b-what .bl-content {
font-size: 18px;
line-height: 1.5em;
letter-spacing: 0.36px;
}
.b-what .bl-content p {
margin-bottom: 1.2em;
}
}
@media (max-width: 380px) {
.h-hero .m-hero-content .cta {
flex-direction: column;
}
}
/* ============================================================
what — inverse state. page-home.php adds .inv when the speaker
gallery above it is hidden: ink block, white type, and the
testimonials' white-squiggle patterns standing in for pat-what
(whose ink strokes are invisible on ink).
============================================================ */
.hblock.b-what.inv {
background: var(--ink);
color: #fff;
}
.b-what.inv .bl-title h2,
.b-what.inv .bl-content {
color: #fff;
}
/* links: the shared all.css rule paints them ink-on-ink here —
flip to white, keep the lime hover accent */
.b-what.inv .bl-content a {
color: #fff;
border-bottom-color: #fff;
}
.b-what.inv .bl-content a:hover {
color: #fff;
border-color: var(--lime);
}
/* same assets and treatment as .b-testimons .tst-pattern (white
squiggles @10%, difference blend), topmost like .what-pattern.
Boxes are the native SVGs at ~60%, bled off opposite corners so
the strokes frame the columns the way they frame the cards. */
.b-what.inv .tst-pattern {
position: absolute;
z-index: 2;
mix-blend-mode: difference;
pointer-events: none;
}
.b-what.inv .tst-pattern img {
display: block;
width: 100%;
height: 100%;
}
.b-what.inv .tst-pat-a { right: -140px; top: -430px; width: 551px; height: 824px; }
.b-what.inv .tst-pat-b { left: -170px; bottom: -300px; width: 619px; height: 644px; }
@media (max-width: 1024px) {
.b-what.inv .tst-pattern {
opacity: 0.85;
}
}
/* same rationale as .what-pattern: 10% lines over a narrow column are mud */
@media (max-width: 768px) {
.b-what.inv .tst-pattern {
display: none;
}
}
/* ================= SECTION: sec3 (prep/sections/sec3.css) ================= */
/* ============================================================
SEC3 — "למי מתאים יום ההרצאות?" (Figma 42:1753, frame '3')
Scope: everything is namespaced under .b-audience.sec3
Desktop geometry: 1920x1060 design frame -> vw units (px/19.2)
for the ribbon decor, px for the content typography.
RTL page; left/right below are PHYSICAL (design coordinates).
============================================================ */
.b-audience.sec3 {
position: relative;
overflow: visible;
background: #FFFFFF;
box-sizing: border-box;
min-height: 55.2083vw; /* 1060/1920 */
padding: 16.2240vw 0 16.1719vw; /* content y=311.5, bottom gap 310.5 */
color: #0E1819;
}
/* Figma NOISE effect (black @25%) — subtle film grain, kept gentle */
.b-audience.sec3::before {
content: '';
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background-image: var(--figma-noise);
opacity: var(--noise-opacity);
}
/* ---- scaffolding (mirrors theme .holder/.splitbox so the preview
is standalone; same values as all.css) ------------------- */
.b-audience.sec3 .holder {
max-width: var(--maxsection, 1620px);
margin: 0 auto;
position: relative;
z-index: 10;
}
.b-audience.sec3 .splitbox {
display: flex;
}
/* min-width:0 is load-bearing: flex items default to min-width:auto, which
floors the column at its min-content (596px — the one-row CTA, see below).
Without it the column stops shrinking under ~1292px and marches left into
the ribbon zone, which clips at 49.6875vw and keeps tracking the viewport. */
.b-audience.sec3 .splitbox .split-right,
.b-audience.sec3 .splitbox .split-left {
flex-basis: 50%;
min-width: 0;
}
.b-audience.sec3 .split-right {
box-sizing: border-box;
padding-right: 12px; /* holder right edge 1770 -> design column edge 1758 */
}
/* =================== content column (42:1754) =================== */
.b-audience.sec3 .bl-title {
width: auto;
margin: 0;
padding: 0;
text-align: right;
font-family: 'leonprod', sans-serif;
}
.b-audience.sec3 .bl-title h2 {
font-family: 'leonprod', sans-serif;
font-weight: 400;
font-size: 70px;
line-height: 80px; /* Figma lineHeightPx */
margin: -24px 0 34px; /* leading-trim calibration: ink top at 311.5, para top at 481.5 (screenshot-measured) */
color: #0E1819;
}
.b-audience.sec3 .bcontent {
font-family: 'leonprod', sans-serif;
font-size: 20px;
line-height: 30px;
padding-left: 0;
max-width: 589px;
text-align: right;
}
.b-audience.sec3 .bcontent p {
margin: 0 0 14px;
}
.b-audience.sec3 .bcontent p:last-child {
margin-bottom: 0;
}
/* ---- CTA row (42:1757): primary pill right, outlined link pill left,
boxes touch, bottom-aligned, flush right ------------------ */
.b-audience.sec3 .cta {
margin-top: 40px;
}
.b-audience.sec3 .cta-but-row {
margin-top: 0;
display: flex;
align-items: flex-end;
justify-content: flex-start; /* RTL: starts at the physical right */
}
.b-audience.sec3 .cta-but {
font-size: 20px;
}
/* only the SECONDARY link is stripped of the shared button styling — the main
CTA keeps the lime pill from all.css */
.b-audience.sec3 .cta-but.cta-sec a {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
font-family: 'leonprod', sans-serif;
font-weight: 400;
color: #0E1819;
text-decoration: none;
background: none;
border: none;
padding: 0;
transform: none;
}
.b-audience.sec3 .cta-but.cta-main {
font-size: 29px;
}
/* shape/fill/hover come from the shared `.cta-but.cta-main a` rule (all.css);
only the Figma fixed width is section-specific */
.b-audience.sec3 .cta-but.cta-main a {
width: 271px;
}
/* the 313x55 box (Figma row placement) lives on the .cta-but so the link itself
can shrink-wrap — a border-bottom on the box would sit ~14px under the text */
.b-audience.sec3 .cta-but.cta-sec {
margin-top: 0;
width: 313px;
height: 55px;
display: flex;
align-items: center;
justify-content: center;
}
/* Design (Figma 42:1758): plain link — the frame's #6891A9 stroke has
visible:false, so NO border/pill; a 2px rule replaces the text-decoration. */
.b-audience.sec3 .cta-but.cta-sec a {
width: auto;
height: auto;
border: none;
border-bottom: 2px solid var(--ink);
border-radius: 0;
padding-bottom: 3px;
font-size: 20px;
line-height: 30px;
text-decoration: none;
transition: border-color 0.2s ease;
}
.b-audience.sec3 .cta-but.cta-sec a:hover {
color: #0E1819;
border-color: var(--lime);
}
.b-audience.sec3 .cta-but.cta-sec a::after {
display: none; /* kill the theme's purple underline bar */
}
/* =================== ribbons (Frame 1000000818, 42:1762) ===================
Clip container on the physical LEFT half; extends ~64px below the
section bottom (1124 vs 1060) so ribbon C bleeds over the seam. */
.b-audience.sec3 .aud-ribbons {
position: absolute;
left: 0;
top: 0;
bottom: 0; /* trim at the block bottom (user request) */
width: 49.6875vw; /* 954 */
overflow: hidden;
z-index: 5;
pointer-events: none;
}
/* ---- pill recipe: place by (cx - w/2, cy - h/2) + rotate around center */
.b-audience.sec3 .ribbon {
position: absolute;
height: 4.1146vw; /* 79 */
border: 0; /* review round: tickers must have no border at all */
border-radius: 999px;
overflow: hidden;
box-sizing: border-box;
/* ribbons are the ONE anomalia exception (user request) — non-bold */
font-family: anomalia, "Times New Roman", times, serif;
font-weight: 400;
font-size: 2.6042vw; /* 50 */
text-transform: uppercase;
color: #0E1819;
}
/* animated mesh-gradient surface — the same "Animate N" canvas system as
the hero (js/hero26-gradient.js). Each pill clips a 1000x1000 design-px
gcanvas slice; placement derived from anim-map.json (bboxInSection +
rtInParent) converted to the pill's local frame. Units are em
(1em = 50 design px = the ribbon font-size) so the mobile font-size
overrides rescale the canvas with the pill. Base background-color
stays visible beyond the canvas extents, exactly like Figma. */
.b-audience.sec3 .ribbon .gcanvas {
position: absolute;
width: 20em; /* 1000 design px */
height: 20em;
z-index: 0;
pointer-events: none;
/* fade the canvas into the pill's base background-color where the
1000px gradient square ends mid-pill: the variants tween, so the
canvas edge color drifts from the static base fill — an unmasked
edge reads as a hard seam (seen on rb-e) at most phases. */
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.b-audience.sec3 .ribbon-int {
position: relative;
z-index: 1;
display: flex;
width: max-content;
height: 100%;
align-items: center;
animation: sec3-marquee 30s linear infinite;
will-change: transform;
}
.b-audience.sec3 .ribbon.rev .ribbon-int {
animation-name: sec3-marquee-rev;
}
.b-audience.sec3 .ribbon .mq {
display: flex;
align-items: center;
gap: 1.5625vw; /* 30 */
padding-left: 1.5625vw; /* trailing gap -> seamless 50% loop */
white-space: nowrap;
}
.b-audience.sec3 .ribbon .mq span {
font-weight: 400;
}
/* ---- per-ribbon placement — EXACT Figma matrices (figma-v2-tickers-geometry.json,
Group 42:1763). Each pill is anchored by its end-circle A centre
(transform-origin h/2 h/2) and rotated by the design angle, so the two
design fold joints meet by construction: A/B ends at (891,460) ±2px,
C/D ends at (815,700) ±8px. px/19.2 = vw; gcanvas em = designpx/50,
canvas rotates about its own origin (transform-origin:0 0). ---- */
.b-audience.sec3 .ribbon .gcanvas { transform-origin: 0 0; }
/* A 42:1764 — pink, -4.99deg, z1 */
.b-audience.sec3 .rb-a {
left: -9.5684vw;
top: 26.6258vw;
width: 58.2171vw;
transform-origin: 2.0573vw 2.0573vw;
transform: rotate(-4.99deg);
z-index: 1;
border-color: #D983FA;
background-color: #ECA2F1;
}
/* animate3 v3 (42:1769) */
.b-audience.sec3 .rb-a .gcanvas {
left: 5.394em;
top: -12em;
transform: rotate(19.99deg);
}
/* B 42:1801 — purple, +15.02deg, z2 (its end B meets A's end B) */
.b-audience.sec3 .rb-b {
left: -7.8184vw;
top: 7.8864vw;
width: 58.2171vw;
transform-origin: 2.0573vw 2.0573vw;
transform: rotate(15.02deg);
z-index: 2;
border-color: var(--ink);
background-color: #884FFF;
}
/* animate1 v3 (42:1806) — aligned with the pill */
.b-audience.sec3 .rb-b .gcanvas {
left: 2.41em;
top: -10.77em;
}
/* C 42:1838 — green, -23.03deg, z3 */
.b-audience.sec3 .rb-c {
left: -26.9351vw;
top: 63.1466vw;
width: 77.2576vw;
transform-origin: 2.0573vw 2.0573vw;
transform: rotate(-23.03deg);
z-index: 3;
border-color: var(--ink);
background-color: #0A5C34;
}
/* animate2 v1 (42:1843) */
.b-audience.sec3 .rb-c .gcanvas {
left: 20.064em;
top: -16.096em;
transform: rotate(38.03deg);
}
/* D 42:1861 — blue, +8deg, z4 (its end B meets C's end B) */
.b-audience.sec3 .rb-d {
left: -12.8587vw;
top: 26.8046vw;
width: 58.2292vw;
transform-origin: 2.0573vw 2.0573vw;
transform: rotate(8deg);
z-index: 4;
border-color: #D983FA;
background-color: #4E49FD;
}
/* animate17 v3 (42:1866) */
.b-audience.sec3 .rb-d .gcanvas {
left: 4.506em;
top: -8.814em;
transform: rotate(7deg);
}
/* E 42:1880 — orange, -18deg, z5 (top; runs off the top-right) */
.b-audience.sec3 .rb-e {
left: -16.913vw;
top: 12.6952vw;
width: 77.2576vw;
transform-origin: 2.0573vw 2.0573vw;
transform: rotate(-18deg);
z-index: 5;
border-color: #D983FA;
background-color: #FF7237;
}
/* animate25 v1 (42:1885) */
.b-audience.sec3 .rb-e .gcanvas {
left: 11.902em;
top: -13.04em;
transform: rotate(33deg);
}
/* marquee: 0 -> 50% keeps the window fed in RTL (theme marquee pattern);
loop distance == one .mq copy incl. its trailing padding */
@keyframes sec3-marquee {
from { transform: translateX(0); }
to { transform: translateX(50%); }
}
@keyframes sec3-marquee-rev {
from { transform: translateX(50%); }
to { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
.b-audience.sec3 .ribbon-int {
animation: none;
}
/* the gcanvas renderer freezes itself under reduced motion */
}
/* ============================================================
TABLET — the split layout survives down to 768 (as 2025's does); only the
CTA row has to give. Desktop puts both CTAs side by side (271 + 313 = 584),
which is the min-content floor under .split-right. Half the holder falls
below 584+12 once the viewport drops under ~1292px, so stack them from
there and the column tracks 50% again, staying clear of the 49.6875vw
ribbon clip at every width.
============================================================ */
@media only screen and (max-width: 1292px) and (min-width: 769px) {
.b-audience.sec3 .cta-but-row {
flex-direction: column;
align-items: flex-start; /* RTL: flush to the physical right */
gap: 10px;
}
/* the 313px box only exists to seat the link in the desktop row; stacked it
just overflows the column (313 > half the holder under ~838px) and the
link inside measures 213px regardless */
.b-audience.sec3 .cta-but.cta-sec {
width: auto;
max-width: 100%;
}
}
/* ============================================================
MOBILE — theme responsive.css .b-audience patterns:
block layout, centered text, E+B ribbons above the heading
(title padding-top clears them), A+D+C below the CTA.
============================================================ */
@media only screen and (max-width: 768px) {
.b-audience.sec3 {
min-height: 0;
height: auto;
padding: 0 0 380px;
overflow: hidden;
}
.b-audience.sec3 .holder {
padding-left: 20px;
padding-right: 20px;
width: calc(100% - 40px);
}
.b-audience.sec3 .splitbox {
display: block;
position: relative;
}
.b-audience.sec3 .split-right {
padding-right: 0;
}
.b-audience.sec3 .bl-title {
padding-top: 340px;
padding-bottom: 16px;
text-align: center;
width: 100%;
}
.b-audience.sec3 .bl-title h2 {
font-size: 40px;
line-height: 46px;
margin: 0;
}
.b-audience.sec3 .bcontent {
width: 100%;
max-width: none;
padding-left: 0;
text-align: center;
font-size: 18px;
line-height: 27px;
}
.b-audience.sec3 .cta {
margin-top: 30px;
}
.b-audience.sec3 .cta-but-row {
flex-direction: column;
align-items: center;
gap: 10px;
}
/* ribbons: free-floating over the whole section */
.b-audience.sec3 .aud-ribbons {
position: absolute;
inset: 0;
width: auto;
height: auto;
overflow: visible;
}
/* desktop anchors each pill ~8px from its LEFT END so the Figma fold
joints meet; rotating a >100vw bar about that point swings its far
end up/down by width*sin(angle), so top/bottom stop describing the
painted band. Mobile has no fold joints to honour — rotate about the
centre (2025's default) so top/bottom place the band directly. */
.b-audience.sec3 .ribbon {
height: 48px;
font-size: 30px;
transform-origin: 50% 50%;
}
.b-audience.sec3 .ribbon .mq {
gap: 16px;
padding-left: 16px;
}
/* Placement matches the 2025 band centres (measured at 390px):
top pair 12 / 128 from the section top; bottom fan 232 / 112 / 33
from the section bottom. top = centre - height/2. */
/* above the heading — steep pair crossing at the section top */
.b-audience.sec3 .rb-e {
top: -12px;
left: -15vw;
width: 130vw;
max-width: none;
}
.b-audience.sec3 .rb-b {
top: 104px;
left: -20vw;
width: 140vw;
max-width: none;
}
/* below the CTA — fan runs shallow, shallow, steep (2025 t3/t4/t5 order).
The fan reads as a mass rather than parallel stripes because D and C are
pushed left and END mid-screen (~x300 / ~x288 at 390w, as 2025 t4/t5 do),
so the bars converge left and leave the right side open. Full-width bars
here would read as three evenly-gapped stripes instead. */
.b-audience.sec3 .rb-a {
top: auto;
bottom: 208px;
left: -5vw;
width: 140vw;
max-width: none;
}
.b-audience.sec3 .rb-d {
top: auto;
bottom: 88px;
left: -33vw;
width: 110vw;
max-width: none;
}
/* mobile-only angle: the desktop -23.03deg is a Figma fold-joint angle, and
mobile has no joints to honour. At -23deg a full-width bar is 268px tall,
so it crosses D and dumps 101px below the section; -15deg matches 2025 t5
and nests it under D instead. */
.b-audience.sec3 .rb-c {
top: auto;
bottom: 9px;
left: -28vw;
width: 102vw;
max-width: none;
transform: rotate(-15deg);
}
}
@media only screen and (max-width: 600px) {
.b-audience.sec3 {
padding-bottom: 340px;
}
.b-audience.sec3 .bl-title {
padding-top: 245px;
}
.b-audience.sec3 .ribbon {
height: 42px;
font-size: 26px;
}
/* same 2025 band centres, re-derived for the 42px pill (centre -+ 21) */
.b-audience.sec3 .rb-e {
top: -9px;
}
.b-audience.sec3 .rb-b {
top: 107px;
}
.b-audience.sec3 .rb-a {
bottom: 211px;
}
.b-audience.sec3 .rb-d {
bottom: 91px;
}
.b-audience.sec3 .rb-c {
bottom: 12px;
}
}
@media only screen and (max-width: 380px) {
.b-audience.sec3 .cta-but.cta-sec {
width: 290px;
}
}
/* ================= SECTION: video (prep/sections/video.css) ================= */
/* ============================================================================
COM.PLEX 2026 homepage — part "video"
Band 1: .b-video (Figma frame `video` 42:1909, 1920x1421, section '4' y=0)
Band 2: .b-orgs (Figma frame `5a` 42:1904, 1920x556, section '4' y=5576)
Design bg #0E1819, all text #FFFFFF, font 'leonprod' 400 (fonts/leon/leon.css).
INTEGRATION: load AFTER css/all.css — rules below intentionally override the
legacy light-bg .b-video / .b-orgs styling (all.css 2372-2624, 3195-3300).
============================================================================ */
/* ----------------------------------------------------------------------------
BAND 1 — .b-video
Geometry @1920: H2 line at y~159.5 (ink 164..220), sub ink 251..276,
thumbnail 162..1760 x 353.5..1258.5 (1598x905), play 151px at thumb center,
band height 1421.
---------------------------------------------------------------------------- */
.b-video {
position: relative;
background: #0E1819; /* overrides all.css radial gradient */
padding: 0; /* overrides all.css 0 160px (gutters live on .b-video-int) */
}
.b-video .holder {
position: relative;
max-width: 1920px;
margin: 0 auto;
padding: 143px 0 162px; /* top: H2 ink lands at y=164 (measured); bottom: 1421-1258.5 */
}
.b-video .bl-title {
width: auto;
max-width: 1141px;
margin: 0 auto;
padding: 0;
text-align: center;
color: #fff;
}
.b-video .bl-title h2 {
font-family: 'leonprod', sans-serif;
font-weight: 400;
font-size: 70px;
line-height: 75px;
letter-spacing: 0;
color: #fff;
margin: 0;
}
.b-video .bl-title h3 {
font-family: 'leonprod', sans-serif;
font-weight: 400;
font-size: 29px;
line-height: 36.95px;
letter-spacing: 0;
color: #fff;
max-width: 1088px;
margin: 24px auto 0; /* sub ink lands at y=250.7 (measured) */
}
/* --- thumbnail box (poster + tint + play) --- */
.b-video .b-video-int {
position: relative;
/* above the band's film grain (.b-video::after, z-index 20 in all.css). The
2026 block embeds the player permanently instead of behind the legacy
.playing lightbox, so without this the grain lands on moving picture and
reads as compression artefacts. */
z-index: 21;
width: calc(100% - 320px); /* 160px side gutters at 1920 -> 1598px wide (design 162/160) */
/* never taller than the visible area under the 117px top bar; the width
clamp keeps the 1598/905 ratio so the box shrinks instead of squashing */
max-width: min(1598px, calc((100vh - 117px) * 1598 / 905));
max-height: calc(100vh - 117px);
height: auto; /* overrides all.css height:100% */
max-height: none; /* overrides all.css max-height:95vh */
aspect-ratio: 1598 / 905;
margin: 74px auto 0; /* thumb top y=353.5 (measured) */
overflow: hidden;
}
.b-video .video-wrap {
display: block; /* all.css hides it until the legacy .playing lightbox state */
position: absolute;
inset: 0;
background: var(--ink);
}
.b-video .video-wrap iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
}
/* ----------------------------------------------------------------------------
BAND 2 — .b-orgs (Figma `5a`, 1920x556)
RTL: text col RIGHT (x 1314..1760, 160 from right edge), logos LEFT
(x 107..940, full band height). H2 70/80 right, 4 lines (br,br + natural wrap).
---------------------------------------------------------------------------- */
.b-orgs {
background: #0E1819;
}
.b-orgs .holder {
width: 100%; /* overrides all.css calc(100% - 100px) */
max-width: 1920px; /* overrides --maxsection */
margin: 0 auto;
padding: 0 160px 0 107px; /* design column edges at 1920 */
}
.b-orgs .splitbox {
display: flex;
justify-content: space-between;
align-items: flex-start;
min-height: 556px;
}
.b-orgs .split-right {
flex: 0 0 446px;
max-width: 446px;
}
.b-orgs .split-left {
flex: 0 0 833px;
max-width: 833px;
height: 556px;
min-height: 556px; /* initOrgs() sets inline height to .bl-title height; keep design box */
overflow: hidden;
padding: 0; /* overrides all.css padding-top:90px */
display: block; /* overrides all.css flex */
}
.b-orgs .bl-title {
width: 100%;
margin: 0;
padding: 66px 0 0; /* H2 ink lands at band y=88.4 (measured; Figma box y=84 leading-trimmed) */
text-align: right;
color: #fff;
}
.b-orgs .bl-title h2 {
display: block; /* overrides all.css display:table-caption */
font-family: 'leonprod', sans-serif;
font-weight: 400;
font-size: 70px;
line-height: 80px;
letter-spacing: 0;
color: #fff;
margin: 0;
width: auto;
}
.b-orgs .bl-title h3 {
font-family: 'leonprod', sans-serif;
font-weight: 400;
font-size: 29px;
line-height: 36.95px;
letter-spacing: 0;
color: #fff;
margin: 21px 0 0; /* sub ink lands at band y=414.3 (measured) */
}
/* --- logos: live org loop styled as the design's 833x558 white-logo wall --- */
.b-orgs .orgs-wrap {
overflow: hidden;
height: 100%;
}
.b-orgs .orgs {
display: flex;
justify-content: space-between;
align-items: flex-start;
grid-column-gap: 120px;
overflow: hidden;
height: 100%;
}
.b-orgs .orgs-column {
color: #fff;
cursor: pointer;
flex: 0 0 290px;
/* own bg = blend backdrop for the imgs inside this (transformed) column,
so screen-blend can knock out black/white logo plates (design: LINEAR_DODGE) */
background: #0E1819;
}
.b-orgs .orgs-column.orgs-right {
animation: marquee_v 102s linear infinite;
will-change: transform;
}
.b-orgs .orgs-column.orgs-left {
animation: marquee_v_rev 90s linear infinite;
will-change: transform;
}
.stop .b-orgs .orgs-column {
animation-play-state: paused;
}
.b-orgs .org {
width: 290px;
height: 140px; /* FIXED box height — the column height must NOT depend
on when the logos load. The marquee scrolls by
translateY(-50%) = exactly one of the two identical
copies; if a logo's box grew on load the 50% anchor
drifted and WebKit (which resolves the % against the
pre-load height and caches it on the will-change
layer) scrolled into empty space. Fixed box = exact
seam from frame 1 on every engine. */
margin-bottom: 84px;
display: flex; /* center the logo inside the fixed box */
align-items: center;
justify-content: center;
}
.b-orgs .org img {
/* sized by the equal-area script in hero26.js; this is the no-JS fallback */
width: auto;
max-width: 100%;
max-height: 100%; /* track the fixed .org box, not a magic 140 */
line-height: 0;
object-fit: contain; /* equal-area JS sets explicit w/h; the narrow cell clamps
width via max-width and the fixed box clamps height, so
contain preserves the logo aspect (no squish, no clip). */
/* dark-band treatment: white/grayscale logos (Figma PNG is the visual target);
invert flips the light-bg logo art, screen-blend drops resulting black plates */
filter: grayscale(1) invert(1) brightness(1.35);
mix-blend-mode: screen;
opacity: 0.95;
}
.b-orgs .org img:hover {
filter: grayscale(1) invert(1) brightness(1.7);
opacity: 1;
transition: all 0.3s ease;
}
/* marquee keyframes — duplicates of all.css marquee_v/marquee_v_rev (kept for
standalone preview; harmless duplicate at integration, or drop this pair) */
@keyframes marquee_v {
from { transform: translateY(0); }
to { transform: translateY(-50%); }
}
@keyframes marquee_v_rev {
from { transform: translateY(-50%); }
to { transform: translateY(0); }
}
/* ============================================================================
RESPONSIVE — theme ladder (responsive.css conventions)
============================================================================ */
@media (max-width: 1600px) {
.b-orgs .holder {
padding: 0 100px 0 60px;
}
.b-orgs .split-left {
flex-basis: 700px;
max-width: 700px;
}
.b-orgs .org {
width: 250px;
}
.b-orgs .orgs-column {
flex-basis: 250px;
}
.b-orgs .orgs {
grid-column-gap: 90px;
}
}
@media (max-width: 1400px) {
.b-video .holder {
padding-top: 120px;
padding-bottom: 130px;
}
.b-video .bl-title h2 {
font-size: 60px;
line-height: 66px;
}
.b-video .bl-title h3 {
font-size: 26px;
line-height: 33px;
}
.b-video .b-video-int {
width: calc(100% - 240px);
margin-top: 60px;
}
.b-orgs .bl-title h2 {
font-size: 60px;
line-height: 70px;
}
.b-orgs .bl-title h3 {
font-size: 26px;
line-height: 33px;
}
.b-orgs .split-right {
flex-basis: 390px;
max-width: 390px;
}
.b-orgs .split-left {
flex-basis: 560px;
max-width: 560px;
height: 480px;
min-height: 480px;
}
.b-orgs .splitbox {
min-height: 480px;
}
.b-orgs .org {
width: 200px;
}
.b-orgs .orgs-column {
flex-basis: 200px;
}
.b-orgs .orgs {
grid-column-gap: 70px;
}
}
@media (max-width: 1024px) {
/* theme: .b-video{padding:0} .holder{padding-bottom:0} — dark band keeps its own padding */
.b-video .holder {
padding-top: 90px;
padding-bottom: 100px;
}
.b-video .b-video-int {
width: calc(100% - 80px);
}
.b-orgs .holder {
padding: 0 50px 0 30px;
}
.b-orgs .split-right {
flex-basis: 330px;
max-width: 330px;
}
.b-orgs .bl-title h2 {
font-size: 50px;
line-height: 58px;
}
.b-orgs .split-left {
flex-basis: 460px;
max-width: 460px;
}
}
@media (max-width: 768px) {
/* theme pattern: block padding 47/55, .bl-title padding-top 70px */
.b-video .holder {
padding: 70px 0 55px;
}
.b-video .bl-title {
width: calc(100% - 40px);
}
.b-video .bl-title h2 {
font-size: 42px;
line-height: 48px;
}
.b-video .bl-title h3 {
font-size: 19px;
line-height: 26px;
margin-top: 12px;
}
.b-video .b-video-int {
width: calc(100% - 40px); /* theme mobile gutter pattern */
margin-top: 36px;
}
/* theme pattern: .b-orgs .splitbox{display:block}, title centered, logos below */
.b-orgs .holder {
width: calc(100% - 40px);
padding: 0;
}
.b-orgs .splitbox {
display: block;
min-height: 0;
}
.b-orgs .split-right {
max-width: none;
}
.b-orgs .bl-title {
padding: 70px 0 0;
text-align: center;
}
.b-orgs .bl-title h2 {
font-size: 42px;
line-height: 50px;
max-width: 500px;
margin: 0 auto;
}
.b-orgs .bl-title h2 br {
display: none; /* designer pattern: centered, natural wrap on mobile */
}
.b-orgs .bl-title h3 {
font-size: 19px;
line-height: 26px;
margin-top: 14px;
}
.b-orgs .bl-title h3 br {
display: none;
}
.b-orgs .split-left {
margin: 32px auto 0;
max-width: none;
height: 80vh; /* theme: .split-left{height:80vh} at <=768 */
max-height: 640px; /* keep the logo wall sane in tall viewports */
min-height: 0;
}
.b-orgs .orgs {
justify-content: center;
grid-column-gap: 90px;
height: 100%;
}
.b-orgs .org,
.b-orgs .orgs-column {
width: 160px; /* theme <=1280 org size */
flex-basis: 160px;
}
.b-orgs .org {
margin-bottom: 60px;
}
}
@media (max-width: 600px) {
.b-video .bl-title h2 {
font-size: 36px;
line-height: 42px;
}
.b-orgs .org,
.b-orgs .orgs-column {
width: 95px; /* theme <=600 org size */
flex-basis: 95px;
}
.b-orgs .orgs {
grid-column-gap: 70px; /* theme <=600 gap */
}
.b-orgs .org {
height: 95px; /* match the 95px cell so the fixed box stays snug */
margin-bottom: 44px;
}
.b-orgs .split-left {
height: 70vh;
max-height: 560px;
}
}
/* ================= SECTION: testimonials (prep/sections/testimonials.css) ================= */
/* ============================================================================
COM.PLEX 2026 HP — Testimonials block (Figma section '4' > 'Testimonials')
Scope: .b-testimons only. Load AFTER all.css + responsive.css so equal-
specificity overrides win. Design canvas: 1590 x 1495.5 inside a 1920 frame,
section bg #0E1819, font 'leonprod' (theme fonts/leon/leon.css).
--u is the proportional design unit: 1px at >=1690px viewport, scaling
linearly below it ((100vw - 100px) / 1590), so type/padding/radius track the
percent-based card grid exactly (spec §7, 1024-1690 proportional scaling).
Asset paths are relative to this file's location (prep/sections/); on theme
integration move assets/testimonials/* into the theme and re-point the urls.
========================================================================== */
.b-testimons {
--u: min(1px, calc((100vw - 100px) / 1590));
background: #0E1819; /* section-4 bg; drop if the section wrapper provides it */
color: #fff;
padding-bottom: 0;
overflow: hidden;
}
/* block-level spacing placeholder — final rhythm comes from section-4 assembly */
.b-testimons .holder {
padding-top: calc(120 * var(--u));
padding-bottom: calc(120 * var(--u));
background: none;
}
/* the old mobile-only star/blob decorations do not exist in the new design */
.b-testimons .holder .decor {
display: none;
}
.b-testimons::before,
.b-testimons .holder::before {
display: none;
}
/* ---- testimonials line-art pattern (Figma 42:2033 + 42:2037, white
squiggles @10%, difference blend) — anchored to .gal-wrap like the cards,
uncropped (pieces extend left of and above the cards box) ---- */
.b-testimons .gal-wrap .tst-pattern {
position: absolute;
z-index: 3; /* above the cards, like the orgs pattern */
mix-blend-mode: difference;
pointer-events: none;
}
.b-testimons .gal-wrap .tst-pattern img { display: block; width: 100%; height: 100%; }
.b-testimons .gal-wrap .tst-pat-a { left: -20.56%; top: -12.92%; width: 57.80%; height: 91.78%; }
.b-testimons .gal-wrap .tst-pat-b { left: 36.05%; top: 23.06%; width: 64.84%; height: 71.72%; }
/* ---- title (JS initTestimonials moves .bl-title after the 4th card on
desktop; these rules take over once it lands inside .testimons) ---------- */
.b-testimons .bl-title,
.b-testimons .testimons .bl-title {
padding: 0;
margin: 0;
max-width: none;
text-align: center;
color: #fff;
}
.b-testimons .bl-title .bl-title-int {
max-width: none;
margin: 0;
}
.b-testimons .bl-title h2 {
font-family: 'leonprod', sans-serif;
font-weight: 400;
font-size: calc(70 * var(--u));
line-height: calc(80 * var(--u));
letter-spacing: 0;
color: #fff;
margin: 0;
}
.b-testimons .bl-title h3 {
font-family: 'leonprod', sans-serif;
font-weight: 400;
font-size: calc(29 * var(--u));
/* 21px box, vertically centered glyphs => subtitle center at +250.5 from title top */
line-height: calc(21 * var(--u));
letter-spacing: 0;
color: #fff;
margin: 0;
max-width: none;
}
/* ---- card visuals (all breakpoints) -------------------------------------- */
.b-testimons .testimon.item .testimon-int {
position: absolute;
inset: 0;
width: auto;
max-width: none;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: calc(48 * var(--u));
border: none;
border-radius: calc(24 * var(--u));
overflow: hidden;
/* Fallback while the canvas boots. Flat --ink (= the section bg) rather than
the design base gradient: that gradient's bottom stop was #0BFF06, and any
sub-pixel bleed below the canvas (fractional card heights on mobile, where
the canvas sits flush at inset:0 instead of overscanning) painted it as a
1-2px neon-green hairline along the card's rounded bottom edge. */
background-color: var(--ink);
color: #fff;
font-size: inherit;
line-height: normal;
}
/* animated card backgrounds — live gcanvas instances (same renderer as the
hero). Geometry = the Figma 'Animate NN' instance box inside each card,
expressed as % of the card (offset_cardRel / sizePx over 403 x cardH,
spec-testimonials.json); item-6/7 get ~1% overscan so the 400px-wide
instances still cover the 403px card. */
.b-testimons .testimon .testimon-int .gcanvas {
position: absolute;
display: block;
z-index: 0;
height: auto;
aspect-ratio: 1 / 1;
pointer-events: none;
}
.b-testimons .testimon.item-1 .testimon-int .gcanvas { left: -11.98%; top: -14.81%; width: 124.07%; } /* animate17 500px @(-48.28,-57) in 403x385 */
.b-testimons .testimon.item-2 .testimon-int .gcanvas { left: -4.71%; top: 0.14%; width: 105.21%; } /* animate25 424px @(-19,0.5) in 403x352 */
.b-testimons .testimon.item-3 .testimon-int .gcanvas { left: -12.03%; top: -35.94%; width: 124.07%; transform: rotate(90deg); } /* animate23 500px @(-48.48,-126.5), design instance rotated 90deg */
.b-testimons .testimon.item-4 .testimon-int .gcanvas { left: -11.85%; top: 0; width: 124.07%; transform: scaleY(-1); } /* animate21 500px @(-47.77,0), design instance mirrored vertically */
.b-testimons .testimon.item-5 .testimon-int .gcanvas { left: -12.41%; top: -131.12%; width: 173.70%; }
/* animate19 window moved from the design's (0,0) crop to (50,375): the
top-left corner is ~100%% blue for most of the cycle; this window keeps
blue/magenta/orange interplay at every cycle state (min-colorfulness
search over 9 samples: 141 vs 71). User-requested deviation. */
.b-testimons .testimon.item-6 .testimon-int .gcanvas { left: -0.4%; top: -6.53%; width: 101%; } /* animate20 400px @(0.83,-18.68) in 403x286 */
.b-testimons .testimon.item-7 .testimon-int .gcanvas { left: -0.5%; top: -2.41%; width: 101%; } /* animate12 400px @(0,-8.5) in 403x352 */
/* quote/cite above the canvas */
.b-testimons .testimon .testimon-int blockquote,
.b-testimons .testimon .testimon-int cite {
position: relative;
z-index: 1;
}
.b-testimons .testimon .testimon-int blockquote {
margin: 0;
padding: 0;
font-family: 'leonprod', sans-serif;
font-weight: 700;
font-size: calc(22 * var(--u));
line-height: calc(33 * var(--u));
letter-spacing: calc(0.44 * var(--u));
text-align: right;
color: #fff;
overflow: hidden; /* crop only — line-clamp can't ellipsize over children */
min-height: 0; /* the quote yields space to the credits, never the reverse */
}
.b-testimons .testimon .testimon-int blockquote p {
margin: 0;
}
/* Credits are never clamped or ellipsized — they get however many lines the
name + role + org need. On the fixed-height desktop cards the space comes out
of the quote above (min-height:0 + overflow:hidden lets it crop instead). */
.b-testimons .testimon .testimon-int cite {
display: block;
flex: 0 0 auto;
margin-top: auto;
padding-top: calc(12 * var(--u));
font-family: 'leonprod', sans-serif;
font-style: normal;
font-weight: 400;
font-size: calc(20 * var(--u));
line-height: calc(25.48 * var(--u));
letter-spacing: calc(0.4 * var(--u));
text-align: right;
color: #fff;
}
/* ============================================================================
DESKTOP / TABLET (>=769px): absolute scatter on the 1590x1495.5 canvas
========================================================================== */
@media only screen and (min-width: 769px) {
.b-testimons .gal-wrap {
width: calc(100% - 100px);
max-width: 1590px;
margin: 0 auto;
position: relative;
}
/* the scatter canvas */
.b-testimons .gal-wrap .testimons {
display: block;
position: relative;
width: 100%;
aspect-ratio: 1590 / 1495.5;
padding: 0;
color: #fff;
}
/* title centered inside the canvas (group-rel x=556 y=581.04, 468 wide) */
.b-testimons .gal-wrap .testimons .bl-title {
display: block;
position: absolute;
left: 34.9686%;
top: 38.8526%;
width: 29.434%;
z-index: 0; /* below the cards, as in the design */
}
/* cards: group-relative boxes from the Figma card table (C1..C7) */
.b-testimons .gal-wrap .testimon.item {
position: absolute;
display: block;
width: 25.3459%;
max-width: none;
margin: 0;
z-index: 1;
}
.b-testimons .gal-wrap .testimon.item-1 { left: 54.3572%; top: 71.4143%; aspect-ratio: 403 / 385; }
.b-testimons .gal-wrap .testimon.item-2 { left: 20.8805%; top: 76.4627%; aspect-ratio: 403 / 352; }
.b-testimons .gal-wrap .testimon.item-3 { left: 70.6918%; top: 10.5316%; aspect-ratio: 403 / 352; }
.b-testimons .gal-wrap .testimon.item-4 { left: 37.3585%; top: 0; aspect-ratio: 403 / 385; }
.b-testimons .gal-wrap .testimon.item-5 { left: 3.8994%; top: 15.0786%; aspect-ratio: 403 / 286; }
.b-testimons .gal-wrap .testimon.item-6 { left: 74.6541%; top: 42.6279%; aspect-ratio: 403 / 286; }
.b-testimons .gal-wrap .testimon.item-7 { left: 0; top: 43.5641%; aspect-ratio: 403 / 352; }
/* no slider on desktop */
.b-testimons .gal-wrap .gal-nav {
display: none;
}
}
/* ============================================================================
MOBILE (<=768px): theme gallery slider pattern (initGallery steps
margin-right by 100vw), title above the slider, uniform M-proportion cards
========================================================================== */
@media only screen and (max-width: 768px) {
.b-testimons {
--u: 1px; /* mobile uses fixed sizes, not canvas scaling */
padding-bottom: 70px;
}
.b-testimons .holder {
padding-top: 0;
padding-bottom: 0;
position: relative;
}
/* title stays in its original DOM spot (JS moves it on desktop only) */
.b-testimons .bl-title {
position: relative;
padding: 55px 25px 35px;
z-index: 1;
}
.b-testimons .bl-title h2 {
font-size: min(34px, 8.7vw);
line-height: 1.18;
}
.b-testimons .bl-title h3 {
font-size: 18px;
line-height: 24px;
margin-top: 10px;
}
.b-testimons .gal-wrap {
width: 100%;
position: relative;
z-index: 10;
}
.b-testimons .gal-wrap .testimons {
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: flex-start;
width: 800vw;
margin-right: 0;
padding-top: 0;
overflow: visible;
grid-column-gap: 0;
-webkit-transition: all 0.5s 0s ease;
-moz-transition: all 0.5s 0s ease;
-o-transition: all 0.5s 0s ease;
transition: all 0.5s 0s ease;
}
.b-testimons .gal-wrap .testimons .testimon.item {
position: relative;
width: calc(100vw - 100px);
max-width: none;
margin: 0 50px;
aspect-ratio: auto; /* was 403/352 — height now grows with the quote */
align-self: flex-start;
}
/* Flexible-height cards: the content drives the card height (no fixed crop),
and the gradient canvas fills the whole card so the CSS fallback gradient
never shows through below a square canvas. Mobile only; desktop keeps the
tuned Figma scatter. */
.b-testimons .gal-wrap .testimons .testimon.item .testimon-int {
position: relative;
inset: auto;
min-height: calc((100vw - 100px) * 0.8734); /* old 403:352 height as a floor */
}
.b-testimons .gal-wrap .testimons .testimon.item .testimon-int .gcanvas {
position: absolute;
inset: 0;
left: 0;
top: 0;
width: 100%;
height: 100%;
aspect-ratio: auto;
transform: none;
}
/* never truncate on mobile — the card grows instead, so the quote is not
cropped either (the credits are already unclamped at every breakpoint) */
.b-testimons .gal-wrap .testimons .testimon .testimon-int blockquote {
overflow: visible;
}
.b-testimons .testimon.item .testimon-int {
padding: 36px;
border-radius: 24px;
}
.b-testimons .testimon .testimon-int blockquote {
font-size: 17px;
line-height: 25px;
letter-spacing: 0.34px;
}
.b-testimons .testimon .testimon-int cite {
font-size: 15px;
line-height: 19px;
letter-spacing: 0.3px;
padding-top: 10px;
}
/* slider arrows — white variants for the dark background */
.b-testimons .gal-wrap .gal-nav {
display: block;
position: absolute;
top: calc(50% - 64px);
width: 100%;
height: 128px;
z-index: 50;
}
.b-testimons .gal-nav .nav-ctl {
position: absolute;
height: 100%;
top: 0;
width: 82px;
right: 0;
-webkit-transition: all 0.3s 0s ease;
-moz-transition: all 0.3s 0s ease;
-o-transition: all 0.3s 0s ease;
transition: all 0.3s 0s ease;
}
.b-testimons .gal-nav .nav-ctl.next {
right: auto;
left: 0;
}
.b-testimons .gal-nav .nav-ctl a {
height: 100%;
width: 100%;
display: block;
}
.b-testimons .gal-nav .nav-ctl.prev a {
background: url(../images/hp26/testimonials/right-arrow-white6.svg) no-repeat center center;
background-size: 85%;
}
.b-testimons .gal-nav .nav-ctl.next a {
background: url(../images/hp26/testimonials/left-arrow-white6.svg) no-repeat 9px center;
background-size: 85%;
}
.b-testimons .gal-nav .nav-ctl.disable {
opacity: 0;
display: none;
}
}
/* ================= SECTION: workshops =================================== */
/* Workshops block styling MOVED to all.css (desktop) + responsive.css
(responsive) so page-program.php gets the same 2026 design. Only the
homepage loaded home26.css, so the block was homepage-only before. */
/* ================= SECTION: cta (prep/sections/cta.css) ================= */
/* ====================================================================
COM.PLEX 2026 — HP section 5: CTA strip (.b-cta) + code-of-conduct card (.b-code)
Figma: Design > Complex_2026_HP > Frame 1000000866 > '5' (42:2046), 1920x1249.
Spec: prep/sections/spec-cta.md / spec-cta.json.
Scope: everything is namespaced under .b-cta / .b-code.
Integration notes:
- Supersedes old .b-cta rules (all.css:2388-2404), .b-code rules
(all.css:2345-2366 + 3301-3508) and the responsive.css .b-code rules.
- Overrides the shared `.cta-but.cta-main.arrow-left a` arrow background
(all.css:1116) INSIDE these two blocks only.
- JS states (js/uxilive-home.js, untouched): `.decor.off` = sad colors,
`.decor.sad` = sad faces. Default = happy.
- Asset urls point at assets/cta/ (preview layout). When moved into the
theme, relocate to images/b-cta26/ and adjust url()s.
- Figma boxes are cap-height-trimmed; measured Leon cap offsets from the
CSS line-box top: 31px for 70/80 text, 11px for 22/33 text. All vertical
paddings/margins below already compensate for this.
==================================================================== */
.b-cta,
.b-code {
--ink: #0E1819;
--lime: #DBF263;
--spink: #FF7CD2;
}
.b-cta, .b-cta *,
.b-code, .b-code *,
.b-cta *::before, .b-cta *::after,
.b-code *::before, .b-code *::after {
box-sizing: border-box;
}
/* ================================================================
Part A — CTA strip (Figma 'CTA' 42:2047): 711x154 at (604.5, 160)
================================================================ */
.b-cta {
background: #fff;
padding: 129px 20px 0; /* Figma cap-top 160 - 31px measured cap offset (70/80 Leon) */
}
.b-cta .holder {
max-width: var(--maxsection, 1620px);
margin: 0 auto;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
}
.b-cta .bl-title {
padding: 0;
margin: 0 0 42px; /* Figma: headline cap-bottom 210 -> pill top 251 */
font-size: 1em;
width: auto;
}
.b-cta .bl-title h2 {
font-family: 'leonprod', sans-serif;
font-weight: 400;
font-size: 70px;
line-height: 80px;
letter-spacing: 0;
color: var(--ink);
text-align: center;
margin: 0;
padding: 0;
}
.b-cta .cta {
margin: 0;
}
/* ---- lime pill button: the shape/fill/arrow/hover all come from the shared
`.cta-but.cta-main a` rule in all.css. Only the Figma label size and the
section-specific glow live here (Figma 42:2050 / 42:2063). ---- */
.b-cta .cta-but.cta-main,
.b-code .cta-but.cta-main,
.b-sp-gallery.spks26 .cta-but.cta-main {
font-size: 29px;
display: inline-block;
position: relative;
}
.b-cta .cta-but.cta-main.arrow-left a,
.b-code .cta-but.cta-main.arrow-left a {
box-shadow: 15px 40px 80px 10px rgba(255, 255, 255, 0.7); /* Figma white glow */
}
/* ================================================================
Part B — code-of-conduct card (Figma '5b' 42:2054 > card 42:2055)
card: 1598x775, centered, overflow hidden, square corners
================================================================ */
.b-code {
padding: 160px 160px 0; /* strip bottom (313) -> card top (474) */
background: #fff;
}
.b-code .holder {
position: relative;
overflow: hidden;
isolation: isolate; /* contain the blend modes to the card */
max-width: 1598px;
min-height: 775px;
margin: 0 auto;
background: #fff;
}
/* ---- animated gradient background: the design's three stacked live
"Animate" canvases (anim-map.json section 5), card-relative boxes as %
of the 1598x775 card. z-order bottom->top: animate18 (rotated 180deg,
1597x775 @ 1,0) -> animate4 (1620x775 @ 1,0) -> animate10 (flipped X,
1650x884 @ -29,0). All three are opaque; a slow cross-fade cycles the
stack (the Figma prototype's layer cross-fade). ---- */
.b-code .b-code-bg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
background: linear-gradient(to top, #0BFF06, #00A4AE); /* pre-boot fallback */
pointer-events: none;
}
.b-code .b-code-bg .bg-cv {
position: absolute;
display: block;
top: 0;
}
/* design boxes start at x=1px; stretched to 0 so no fallback sliver peeks out */
.b-code .bg-cv1 { left: 0; width: 100%; height: 100%; transform: rotate(180deg); }
.b-code .bg-cv2 { left: 0; width: 101.44%; height: 100%; animation: ctaXfade2 54s linear infinite; }
.b-code .bg-cv3 { left: -1.82%; width: 103.25%; height: 114.06%; transform: scaleX(-1);
animation: ctaXfade3 54s linear infinite; }
/* 54s = 3 x the 18s gradient cycle; each layer holds for a third */
@keyframes ctaXfade3 {
0%, 30% { opacity: 1; }
36%, 94% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes ctaXfade2 {
0%, 63% { opacity: 1; }
70%, 96% { opacity: 0; }
100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.b-code .bg-cv2, .b-code .bg-cv3 { animation: none; }
}
/* Mobile: one static layer, no cross-fade. The stack is three full-card
canvases — the heaviest thing on the page — so data-mobile-static (blocks.php)
freezes each to a single frame there; cycling three FROZEN frames is just a
slideshow, and two of them fail contrast against the card's --ink #0E1819 text.
Measured worst-case (5th-percentile luminance, AA body text needs 4.5:1):
animate18 p2 = 9.98, animate10 p1 = 7.82 but bottoms out at 3.27, animate4 p3
= 2.30. animate18 is the only uniformly light one, and it is already bg-cv1 —
so keep it and drop the other two. display:none also means their canvases
never intersect, so no Renderer is ever built for them. Breakpoint must stay
in step with MOBILE in js/hero26-gradient.js. */
@media (max-width: 900px) {
.b-code .bg-cv2, .b-code .bg-cv3 { display: none; }
}
/* ---- card layout: content col right (836,111 card-rel, 682 wide),
decor left (board/toggle at x=81) ---- */
.b-code .b-code-wrap {
position: relative;
z-index: 1;
padding: 80px 80px 90px 53px; /* content cap-top 111 - 31px cap offset */
}
/* (the card's grain comes from the shared section-grain rule in all.css --
.b-code::after already spans the whole section at z-index 2, above both
.b-code-bg and .b-code-wrap, so b-code and b-sponsors stay identical) */
.b-code .splitbox {
display: flex;
justify-content: space-between;
grid-column-gap: 40px;
}
.b-code .split-right {
flex: 0 0 682px;
max-width: 682px;
}
.b-code .split-left {
flex: 0 1 auto;
display: flex;
}
/* ---- content column: all text dark #0E1819 (NOT white) ---- */
.b-code .bl-title {
padding: 0;
width: auto;
margin: 0 0 31px; /* Figma: title cap-bottom 241 -> body cap-top 281 */
}
.b-code .bl-title h2 {
font-family: 'leonprod', sans-serif;
font-weight: 400;
font-size: 70px;
line-height: 80px;
letter-spacing: 0;
color: var(--ink);
text-align: right;
margin: 0;
padding: 0;
}
.b-code .bl-title a {
color: var(--ink);
text-decoration: none;
transition: opacity 0.2s ease;
}
.b-code .bl-title a:hover {
color: var(--ink);
opacity: 0.75;
}
.b-code .bl-content {
font-family: 'leonprod', sans-serif;
font-weight: 400;
font-size: 22px;
line-height: 33px;
letter-spacing: 0.44px;
color: var(--ink);
text-align: right;
}
.b-code .bl-content p {
margin: 0; /* Figma: plain line break, no paragraph gap */
}
/* links: the 2px black / lime-on-hover underline comes from the shared
`.b-code .bl-content a` rule in all.css */
.b-code .cta {
margin-top: 32px; /* Figma: body cap-bottom 561 -> pill top 602 */
text-align: right;
}
/* ---- decor: toggle + 6x6 board + 5 smileys ----
Geometry via --u (cell pitch 62.043px; cells 62.782 overlap -0.739).
Board 373x373 at card-rel (81, 258.54); toggle 125x58.93 at (81, 136.54). */
.b-code .decor {
--u: 62.04px;
--face: calc(var(--u) * 0.983); /* 61px at desktop */
display: flex;
flex-direction: column;
align-items: flex-end; /* RTL column: flex-end = LEFT edge (switch + board left-aligned) */
margin: 56px 0 0 28px; /* wrap padL 53 + 28 = 81 = Figma x; top 80 + 56 = 136.5 */
}
.b-code .switch {
position: relative;
width: 125px;
height: 59px;
padding: 0;
border-radius: 29.5px;
background: var(--ink);
cursor: pointer;
margin: 0 0 63px; /* Figma gap 63.07 to board */
display: block;
transition: background 0.3s ease;
}
.b-code .switch-int {
position: absolute;
top: 5.4px;
right: 5.4px; /* happy: knob on the RIGHT */
width: 48.2px;
height: 48.2px;
border-radius: 50%;
background: var(--lime);
transition: transform 0.3s ease, background 0.3s ease;
}
.b-code .off .switch {
/* !important + opacity:1 beat all.css:3403 (.off .switch kpink !important
+ opacity:0.35) which washed the sad toggle pink over the gradient */
/* var(--ink) + var(--spink) @ 25%, flattened — the sibling rules below are
ink, so this composite is based on ink too (it was #3F2035, over black) */
background: #4A3147 !important;
opacity: 1;
}
.b-code .off .switch .switch-int {
transform: translateX(-62px); /* sad: knob to the LEFT (x 71.43 -> 9.43) */
background: var(--ink);
}
.b-code .board {
position: relative;
width: calc(var(--u) * 6 + 0.75px);
height: calc(var(--u) * 6 + 0.75px);
background-color: transparent;
background-image:
linear-gradient(to right, #fff 1.5px, transparent 1.5px),
linear-gradient(to bottom, #fff 1.5px, transparent 1.5px);
background-size: var(--u) var(--u);
background-position: 0 0;
box-shadow: inset 0 0 0 1.5px #fff; /* outer frame incl. right/bottom edges */
margin: 0;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.b-code .off .board {
background-color: var(--ink);
background-image:
linear-gradient(to right, var(--spink) 1.5px, transparent 1.5px),
linear-gradient(to bottom, var(--spink) 1.5px, transparent 1.5px);
box-shadow: inset 0 0 0 1.5px var(--spink);
}
/* faces: 61px lime circle centered in its cell, dark features */
.b-code .bitem {
position: absolute;
width: var(--face);
height: var(--face);
border-radius: 50%;
background: var(--lime);
border: 0 solid transparent;
transition: background 0.3s ease, transform 0.5s ease, border 0.3s ease;
}
.b-code .bitem::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(../images/hp26/cta/code-smiley.svg) no-repeat center;
background-size: 50%;
transition: background-image 0.1s 0.05s ease;
}
/* occupied cells (row, col from top-left): (0,5) (1,1) (3,3) (4,0) (5,4) — uniform lime, no glow per design */
.b-code .bitem.smiley-1 { /* blue */
left: calc(var(--u) * 5 + (var(--u) - var(--face)) / 2 + 0.75px);
top: calc((var(--u) - var(--face)) / 2 + 0.75px);
}
.b-code .bitem.smiley-2 { /* pink */
left: calc(var(--u) * 1 + (var(--u) - var(--face)) / 2 + 0.75px);
top: calc(var(--u) * 1 + (var(--u) - var(--face)) / 2 + 0.75px);
}
.b-code .bitem.smiley-3 { /* purple */
left: calc(var(--u) * 3 + (var(--u) - var(--face)) / 2 + 0.75px);
top: calc(var(--u) * 3 + (var(--u) - var(--face)) / 2 + 0.75px);
}
.b-code .bitem.smiley-4 { /* green */
left: calc((var(--u) - var(--face)) / 2 + 0.75px);
top: calc(var(--u) * 4 + (var(--u) - var(--face)) / 2 + 0.75px);
}
.b-code .bitem.smiley-5 { /* yellow */
left: calc(var(--u) * 4 + (var(--u) - var(--face)) / 2 + 0.75px);
top: calc(var(--u) * 5 + (var(--u) - var(--face)) / 2 + 0.75px);
}
/* neutralize the 2025 board leaking from all.css: per-cell nth-child
backgrounds (kturq/kpink) and .smiley drop-shadow glows. Design: every
cell #DBF263, face #0E1819, no glow. nth-child(n) matches the legacy
specificity; the .off sad-state rules below still win (later in file). */
.b-code .bitem:nth-child(n) {
background: var(--lime);
filter: none;
}
/* sad state: black faces with pink stroke + frown */
.b-code .off .bitem {
background: var(--ink);
border: 2px solid var(--spink);
transform: rotateY(180deg);
filter: none;
}
.b-code .sad .bitem::after {
background-image: url(../images/hp26/cta/code-sad2.svg);
}
/* ================================================================
Responsive — mirrors the theme's responsive.css .b-code treatment
================================================================ */
@media only screen and (max-width: 1400px) {
.b-cta {
padding-top: 90px;
}
.b-code {
padding: 90px 90px 0;
}
}
@media only screen and (max-width: 1280px) {
.b-cta .bl-title h2,
.b-code .bl-title h2 {
font-size: 54px;
line-height: 62px;
}
/* the pill is em-based (all.css) — the label size scales the whole button */
.b-cta .cta-but.cta-main,
.b-code .cta-but.cta-main,
.b-sp-gallery.spks26 .cta-but.cta-main {
font-size: 26px;
}
.b-code .holder {
min-height: 0;
}
.b-code .b-code-wrap {
padding: 70px 60px 70px 40px;
}
.b-code .split-right {
flex: 0 1 55%;
}
.b-code .bl-content {
font-size: 20px;
line-height: 30px;
letter-spacing: 0.4px;
}
/* board 373 -> ~303, faces scale along (responsive.css:792-878 pattern) */
.b-code .decor {
--u: 50.4px;
margin: 20px 0 0 0;
}
.b-code .switch {
width: 86px;
height: 36px;
border-radius: 18px;
margin-bottom: 40px;
}
.b-code .switch-int {
width: 30px;
height: 30px;
top: 3px;
right: 3px;
}
.b-code .off .switch .switch-int {
transform: translateX(-47px);
}
}
@media only screen and (max-width: 1024px) {
.b-code .b-code-wrap {
padding-top: 56px;
}
}
@media only screen and (max-width: 768px) {
.b-cta {
padding: 70px 20px 0;
}
.b-cta .bl-title {
margin-bottom: 18px;
}
.b-cta .bl-title h2,
.b-code .bl-title h2 {
font-size: 40px;
line-height: 48px;
}
.b-code {
padding: 70px 20px 0;
}
/* card goes column: content on top, decor below (responsive.css:2763-2787) */
.b-code .b-code-wrap {
padding: 70px;
}
.b-code .splitbox {
flex-direction: column;
grid-gap: 2em;
}
.b-code .split-right {
flex: 0 1 auto;
max-width: none;
}
.b-code .bl-title {
margin-bottom: 16px;
}
/* board above switch; board shrinks with the viewport (wrap pad 70x2 + 40) */
.b-code .decor {
--u: min(50.4px, calc((100vw - 180px) / 6));
flex-direction: column-reverse;
margin: 0;
}
.b-code .switch {
margin: 20px 0 0;
}
.b-code .board {
margin-top: 12px;
}
}
@media only screen and (max-width: 600px) {
.b-cta .bl-title h2,
.b-code .bl-title h2 {
font-size: 34px;
line-height: 42px;
}
/* card edge-to-edge (responsive.css:4436, 4503-4511) */
.b-code {
padding: 60px 0 0;
}
.b-code .holder {
padding: 0;
width: 100%;
max-width: none;
}
.b-code .b-code-wrap {
padding: 70px 5%;
}
.b-code .decor {
--u: min(50.4px, calc((90vw - 4px) / 6));
}
}
@media only screen and (max-width: 400px) {
/* hide the decor entirely (responsive.css:4585-4591) */
.b-code .split-left {
display: none;
}
.b-code .cta {
margin-bottom: 32px;
}
}
/* ---- HP floating bar: arrival ---------------------------------------------
The bar now lands at the hero's midpoint (js/uxilive_fe.js), not at 85px, so
it can no longer rely on the old near-in-place switch to fixed going unseen —
it slides in from above instead. Two mechanics because the theme has two:
>1024 the fixed element is #header and it paints the bar edge-to-edge
(.mini-header is capped at --maxsection); <=1024 .mini-header is itself fixed
(responsive.css) and #header's offset cannot move it. ---- */
@media (min-width:1025px) {
/* `top`, never `transform`: .menu-holder is a position:fixed fullscreen overlay
nested inside #header (all.css), and ANY transform here would make #header its
containing block and collapse the menu into the 117px bar. `top` creates no
containing block. Fixed at all times so the slide-out animates too — position
is not transitionable, so letting it flip absolute<->fixed with the class
would make the bar jump away instead of leave. Parked at -117px (the whole
height of #header: .mini-header is its only in-flow child and no-head-ticker
is unconditional) it is a transparent, off-viewport box — nothing to see and
nothing to click. */
body.homepage #header { position:fixed; transition:top .3s ease, background .3s ease; }
body.homepage:not(.navbar-fixed-top) #header { top:-117px; }
/* hold the bar's contents visible through the slide-out: the rule above sets
visibility:hidden, and all.css gives .mini-header no transition above 1024 */
body.homepage .mini-header { transition:visibility .3s ease; }
}
@media (max-width:1024px) {
/* .mini-header is fixed here and already carries `transition: all .3s`
(responsive.css), which covers transform and visibility — only the off-state
is missing. */
body.homepage:not(.navbar-fixed-top) .mini-header { transform:translateY(-100%); }
}
/* ---- hero+footer only mode -------------------------------------------
Homepage shows just the hero and the footer; every other homepage
section, the site header/menu, and the sales countdown are hidden.
#header covers the sticky/floating-bar reveal too (the position:fixed
rules above), so it can never slide back in on scroll. .h-promo is the
countdown — it lives inside the hero (desktop .hero-nav, or reparented
into .m-hero-content on mobile by hero26.js) so one rule catches both
locations. .b-sponsors is printed by footer.php just before