form {
display:inline
}
/* ============================================================================
powersport theme bundle — concatenated from the approved static slice
(build/index.html order). SDK auto-loads design/default/css/css.css
globally;
do NOT re-link these in a template. Change the SLICE,then re-port.
Only edit during port:font url(../../../design/default/css/) ../Fonts/ -> ../Fonts/ (15.0 convention).
============================================================================ */
/* ===== css/tokens.css ===== */
/* Power Sport — token layer.
Colours sampled from pages_png/landpage-flat.png (NOT from the SVG fill
attributes:the Inkscape export inherits fill from the wrong tspan — see
analysis/copy-source.md). Only colour + font + maxw + gutter are tokenised;
type and spacing are literal comp px wrapped in clamp() inline in main.css. */
@font-face { font-family:"Assistant";
font-weight:400;
font-display:swap;
src:url(../../../design/default/css/../Fonts/Assistant-Regular.woff2) format(woff2)
}
@font-face { font-family:"Assistant";
font-weight:700;
font-display:swap;
src:url(../../../design/default/css/../Fonts/Assistant-Bold.woff2) format(woff2)
}
:root{
--c-cyan:#1eb7dc;
/* the entire brand accent */
--c-black:#000;
/* section fills */
--c-ink:#0b0d0e;
/* darkest photo black,page bg */
--c-white:#fff;
--font-body:"Assistant",system-ui,Arial,sans-serif;
/* Comp is 1920pt wide => 1vw = 19.2px at comp width,so one comp pixel is
1/19.2 = 0.0520833vw. Every fixed comp measurement N is written
clamp(FLOOR,calc(N * var(--u)),Npx):at exactly 1920px viewport --u
resolves to 1.000px and every overlay-locked position is unchanged. */
--u:0.0520833vw;
--maxw:1200px;
/* confirmed by the hero:H1 and lead are both
right-aligned to x=1560 = (1920-1200)/2 + 1200 */
--gutter:clamp(20px,5vw,80px)
}
/* ===== css/base.css ===== */
/* Power Sport — base layer:reset + document defaults.
No section styling here. No fixed font sizes here either;
every size is a
clamp() built from --u (see tokens.css). */
*,*::before,*::after { box-sizing:border-box
}
html {
-webkit-text-size-adjust:100%;
scroll-behavior:smooth;
/* skip-link + floating-CTA #s6 anchor;
disabled under prefers-reduced-motion below */
/* Branded scrollbar in place of the default OS bar:a thin cyan thumb on a
faint track. Reads on the dark ink page,stays quiet on the light sections. */
scrollbar-width:thin;
/* Firefox */
scrollbar-color:var(--c-cyan) rgba(255,255,255,0.08)
}
::-webkit-scrollbar { inline-size:10px;
block-size:10px
}
::-webkit-scrollbar-track { background:rgba(255,255,255,0.06)
}
::-webkit-scrollbar-thumb {
background:var(--c-cyan);
border-radius:999px;
border:2px solid transparent;
background-clip:padding-box
}
::-webkit-scrollbar-thumb:hover { background:#17a0c2
}
body {
margin:0;
background:var(--c-ink);
color:var(--c-white);
font-family:var(--font-body);
font-weight:400;
line-height:1.5;
text-align:start;
-webkit-font-smoothing:antialiased;
/* Full-bleed photos and the two straddling bands can overhang during layout;
never let that produce a horizontal scrollbar. */
overflow-x:hidden
}
h1,h2,h3,h4,p,figure,blockquote { margin:0
}
ul,ol { margin:0;
padding:0;
list-style:none
}
img,picture,video,svg { display:block;
max-inline-size:100%;
height:auto
}
a { color:inherit;
text-decoration:none
}
button,input,select,textarea {
font:inherit;
color:inherit;
margin:0
}
button { background:none;
border:0;
cursor:pointer
}
/* Phone numbers must not reorder inside RTL runs. */
[dir="ltr"] { unicode-bidi:isolate
}
/* Two-tone focus ring so it stays visible on every section fill:the cyan ring
reads on black/white,the black halo reads on cyan (a plain cyan ring would
vanish on the S2/S6 cyan backgrounds). */
:where(a,button,input,select,textarea,[tabindex]):focus-visible {
outline:3px solid var(--c-cyan);
outline-offset:3px;
box-shadow:0 0 0 6px rgba(0,0,0,0.85)
}
.skip-link {
position:absolute;
inset-block-start:-100%;
inset-inline-start:0;
z-index:100;
padding:12px 20px;
background:var(--c-cyan);
color:var(--c-black);
font-weight:700
}
.skip-link:focus { inset-block-start:0
}
.visually-hidden {
position:absolute;
inline-size:1px;
block-size:1px;
overflow:hidden;
clip-path:inset(50%);
white-space:nowrap
}
@media (prefers-reduced-motion:reduce) {
*,*::before,*::after {
animation-duration:0.01ms !important;
animation-iteration-count:1 !important;
transition-duration:0.01ms !important;
scroll-behavior:auto !important
}
}
/* ===== css/layout.css ===== */
/* Power Sport — layout layer:the content column and the section shells.
Every section background bleeds the full viewport;
content sits in a 1200px
column centred inside it. Confirmed against the comp by the hero,whose H1
and lead both right-align to x=1560 = (1920-1200)/2 + 1200. */
/* The gutter is subtracted from the viewport rather than added as padding,so
at >=1920 the column is exactly 1200px wide with its start edge at x=1560 —
the measured position of the hero H1 — and the gutter only engages once the
viewport gets narrow enough to need it. */
.container {
inline-size:min(100% - var(--gutter) * 2,var(--maxw));
margin-inline:auto
}
/* Section paint. Read independently from the comp per design-slicing #9 —
do NOT infer a section's fill from its neighbours. */
.s1,.s5,.site-credit { background:var(--c-white);
color:var(--c-black)
}
.s2,.s6 { background:var(--c-cyan);
color:var(--c-black)
}
.s3a,.s3b,.s4,.footer { background:var(--c-black);
color:var(--c-white)
}
/* Scaffold heights,from the comp's measured section map. These are
placeholders:each is deleted as its section's real content lands,so the
page keeps a truthful total height while the slice is in progress. */
.s1:empty { block-size:clamp(400px,calc(1077 * var(--u)),1077px)
}
.s2:empty { block-size:clamp(320px,calc( 352 * var(--u)),352px)
}
.s3a:empty { block-size:clamp(600px,calc( 751 * var(--u)),751px)
}
.s3b:empty { block-size:clamp(500px,calc( 920 * var(--u)),920px)
}
.s4:empty { block-size:clamp(600px,calc( 702 * var(--u)),702px)
}
.s5:empty { block-size:clamp(600px,calc(1046 * var(--u)),1046px)
}
.s6:empty { block-size:clamp(500px,calc( 469 * var(--u)),469px)
}
.footer:empty { block-size:clamp(60px,calc(74 * var(--u)),74px)
}
.site-credit:empty { block-size:clamp(44px,calc(52 * var(--u)),52px)
}
/* ===== css/sections/hero.css ===== */
/* Hero — comp y 0–920.
All positions solved from measured baselines rather than eyeballed. Assistant
is ascent 1.021em / descent 0.287em / lineGap 0,so its content area is
1.308em and the first baseline of a block sits at
(line-height - font-size * 1.308) / 2 + font-size * 1.021
below the block's top edge. Every padding below is a measured comp baseline
minus that quantity. */
.hero {
position:relative;
isolation:isolate;
block-size:clamp(520px,calc(920 * var(--u)),920px);
background:var(--c-ink);
overflow:hidden
}
/* Full-bleed photo. The right-hand falloff the copy sits on is baked into the
asset — do not add a CSS gradient on top of it. */
.hero__bg {
position:absolute;
inset:0;
z-index:-1;
inline-size:100%;
block-size:100%;
object-fit:cover;
object-position:50% 50%
}
/* Ink box measured at x 785–1134,y 42–101:350x60,centred on x=960.
logo.png is 467x80 with no transparent padding,so 350/467 = 60/80 exactly. */
.hero__logo {
position:absolute;
inset-block-start:clamp(20px,calc(42 * var(--u)),42px);
inset-inline-start:50%;
transform:translateX(50%);
/* RTL:inline-start is the right edge */
inline-size:clamp(200px,calc(350 * var(--u)),350px);
block-size:auto
}
/* H1 and lead both right-align to x=1560 — the start edge of the 1200 column.
Block top = 379.0 - ((70.1 - 60*1.308)/2 + 60*1.021) = 379.0 - 57.07 */
.hero__content {
padding-block-start:clamp(180px,calc(321.9 * var(--u)),321.9px)
}
.hero__headline {
color:var(--c-cyan);
font-weight:700;
font-size:clamp(34px,calc(60 * var(--u)),60px);
line-height:calc(70.1 / 60);
/* measured baselines 379.0 -> 449.1 */
letter-spacing:0
}
.hero__headline-line { display:block
}
/* Block top = 519.0 - ((50 - 40*1.308)/2 + 40*1.021) = 519.0 - 39.68 = 479.3.
H1 block ends at 321.9 + 2*70.1 = 462.1,so the gap is 17.2.
max-inline-size must sit above the comp's widest line (715) and below the
width at which "לדחות," would join line 1 (~810),or the wrap point moves. */
.hero__lead {
margin-block-start:clamp(10px,calc(17.2 * var(--u)),17.2px);
max-inline-size:clamp(320px,calc(760 * var(--u)),760px);
color:var(--c-white);
font-weight:400;
font-size:clamp(20px,calc(40 * var(--u)),40px);
line-height:calc(50 / 40);
/* measured baselines 519.0 -> 569.0 */
}
/* ===== css/sections/s1.css ===== */
/* S1 — welcome + video placeholder. Comp y 920–1997 (section-relative below).
White section;
on white,body copy is black (design-slicing #7). Everything
here centres on the page centre (x=960),unlike the hero's column-edge
alignment. Baselines:title lines 106.6 / 160.6,subheading 204.6. */
.s1 {
min-block-size:clamp(700px,calc(1077 * var(--u)),1077px);
padding-block-start:clamp(40px,calc(61.25 * var(--u)),61.25px);
color:var(--c-black);
text-align:center
}
.s1__title {
font-weight:700;
font-size:clamp(30px,calc(50 * var(--u)),50px);
line-height:calc(54 / 50);
/* measured baselines 1026.6 -> 1080.6 */
}
.s1__title-line { display:block
}
/* Sentence-ending period,cyan. It follows POWER SPORT logically and lands at
the visual (left) end of the RTL line — verified against the comp at x=635. */
.s1__dot { color:var(--c-cyan)
}
/* Keep the Latin brand (and its period) from breaking across lines on a phone,
where "ל-POWER SPORT." otherwise wraps to "…POWER" / "SPORT.". */
.s1__brand { white-space:nowrap
}
/* Baseline 44 below title line 2 -> ~0.9px margin once the line boxes are set. */
.s1__sub {
margin-block-start:clamp(0px,calc(0.9 * var(--u)),0.9px);
font-weight:400;
font-size:clamp(20px,calc(34 * var(--u)),34px);
line-height:calc(44 / 34)
}
/* Video frame:full 1200 column,16:9 (measured 1201×677). Top at rel y=257,
i.e. 42.9 below the subheading box. */
.s1__frame {
position:relative;
margin-block-start:clamp(24px,calc(42.9 * var(--u)),42.9px);
inline-size:100%;
aspect-ratio:1200 / 677;
background:#333;
overflow:hidden
}
/* Placeholder play button — pure CSS,no asset,thrown away with the whole
frame when the YouTube embed lands. Circle outline + right-pointing triangle,
centred;
measured ~132px at 960,1515. */
.s1__play {
position:absolute;
inset:0;
margin:auto;
inline-size:clamp(72px,calc(132 * var(--u)),132px);
block-size:clamp(72px,calc(132 * var(--u)),132px);
border:clamp(3px,calc(5 * var(--u)),5px) solid var(--c-white);
border-radius:50%
}
.s1__play::before {
content:"";
position:absolute;
inset:0;
margin:auto;
inline-size:34%;
block-size:40%;
/* nudged a hair off-centre for optical balance,as the comp's triangle is */
transform:translateX(6%);
background:var(--c-white);
clip-path:polygon(0 0,100% 50%,0 100%)
}
/* YouTube facade (js/media.js):the poster thumbnail fills the frame;
the
iframe covers it once the play button is clicked. */
.s1__frame--facade { background-size:cover;
background-position:center
}
.s1__iframe { position:absolute;
inset:0;
inline-size:100%;
block-size:100%;
border:0
}
/* ── responsive (Task 9 follow-up) ── the 1077px desktop section height leaves a
tall empty band under the small video frame on a phone. Drop the min height so
the section fits its content,and tighten the frame gap. Layout only. */
@media (max-width:640px) {
.s1 { min-block-size:0;
padding-block-end:clamp(28px,9vw,48px)
}
.s1__frame { margin-block-start:clamp(20px,6vw,40px)
}
}
/* ===== css/sections/s2.css ===== */
/* S2 — lead form. Comp y 1997–2349. Cyan section;
on cyan,ink is black.
The black angled title band straddles 46px up into S1 (design-slicing #3):
it is absolutely positioned so it contributes no flow height,and the form
is placed from the section top independently. */
.s2 {
position:relative;
min-block-size:clamp(320px,calc(352 * var(--u)),352px);
color:var(--c-black)
}
/* ── straddling title band ── measured bbox x461–1468,y1951–2091 ── */
.s2__band {
position:absolute;
inset-block-start:calc(-46 * var(--u));
inset-inline-start:50%;
transform:translateX(50%);
/* RTL:start edge is the right */
inline-size:clamp(560px,calc(1010 * var(--u)),1010px);
z-index:2
}
/* Nudge only the slanted image +4px:its opaque centre is 964 in the comp,
while the horizontal text stays page-centred at 960. */
.s2__band-img { inline-size:100%;
block-size:auto;
transform:translateX(calc(4 * var(--u)))
}
/* Two white lines,horizontal over the slanted band,centred,baselines
2008.6 / 2061.8 -> band-relative 57.6 / 110.8. */
.s2__band-text {
position:absolute;
inset-inline:0;
inset-block-start:calc(12.95 * var(--u));
text-align:center;
color:var(--c-white);
font-weight:700;
font-size:clamp(28px,calc(49.3 * var(--u)),49.3px);
line-height:calc(53.2 / 49.3)
}
.s2__band-text span { display:block
}
/* ── field row ── top at rel 171;
4 fields ×252.5 + button 146,gap 11 ── */
.s2__form { padding-block-start:clamp(120px,calc(171 * var(--u)),171px)
}
.s2__row {
display:flex;
gap:clamp(6px,calc(11 * var(--u)),11px)
}
.s2__field { flex:1 1 0;
min-inline-size:0
}
.s2__field input,
.s2__field select {
inline-size:100%;
block-size:clamp(44px,calc(52 * var(--u)),52px);
background:var(--c-white);
color:#111;
border:0;
border-radius:clamp(2px,calc(4 * var(--u)),4px);
padding-inline:clamp(10px,calc(16 * var(--u)),16px);
font-size:clamp(16px,calc(24 * var(--u)),24px);
text-align:start
}
.s2__field ::placeholder { color:#1a1a1a;
opacity:1
}
/* custom dropdown chevron at the inline-end (left in RTL),measured ~x530 */
.s2__field--select { position:relative
}
/* comp shrinks this longer hint to ~21pt (raster width 109) to fit the field */
.s2__field--select select {
appearance:none;
padding-inline-start:clamp(24px,calc(34 * var(--u)),34px);
font-size:clamp(15px,calc(21 * var(--u)),21px)
}
.s2__field--select::after {
content:"";
position:absolute;
inset-inline-start:clamp(12px,calc(16 * var(--u)),16px);
inset-block-start:50%;
transform:translateY(-50%);
inline-size:clamp(8px,calc(12 * var(--u)),12px);
block-size:clamp(4px,calc(7 * var(--u)),7px);
background:#111;
clip-path:polygon(0 0,100% 0,50% 100%);
pointer-events:none
}
.s2__send {
flex:0 0 clamp(110px,calc(146 * var(--u)),146px);
block-size:clamp(44px,calc(52 * var(--u)),52px);
background:var(--c-black);
color:var(--c-white);
font-weight:700;
font-size:clamp(16px,calc(24 * var(--u)),24px);
border-radius:clamp(2px,calc(4 * var(--u)),4px);
display:inline-flex;
align-items:center;
justify-content:center;
gap:0.4em
}
.s2__send::after { content:"‹";
font-weight:700
}
/* ── consent row ── checkbox (start/right) + label,at rel y≈259 ── */
.s2__consent {
display:flex;
align-items:center;
justify-content:flex-start;
gap:clamp(10px,calc(22 * var(--u)),22px);
margin-block-start:clamp(20px,calc(36 * var(--u)),36px);
margin-inline-start:calc(4 * var(--u));
/* group sits 4px off the col edge */
cursor:pointer
}
.s2__consent-input { position:absolute;
opacity:0;
pointer-events:none
}
.s2__consent-box {
flex:none;
inline-size:clamp(18px,calc(23 * var(--u)),23px);
block-size:clamp(18px,calc(23 * var(--u)),23px);
background:var(--c-white);
border:2px solid var(--c-black);
position:relative
}
.s2__consent-input:checked + .s2__consent-box::after {
content:"";
position:absolute;
inset:12% 18%;
border:solid var(--c-black);
border-width:0 0 clamp(2px,calc(3 * var(--u)),3px) clamp(2px,calc(3 * var(--u)),3px);
transform:rotate(-45deg) translateY(-12%)
}
.s2__consent-input:focus-visible + .s2__consent-box {
outline:3px solid var(--c-black);
outline-offset:2px
}
/* raster width (262px) puts this at ~23pt. */
.s2__consent-text {
font-size:clamp(17px,calc(23 * var(--u)),23px);
line-height:1
}
/* ── responsive:inline form → stacked (design-slicing spec,Task 9) ──
Layout only;
every size above stays a clamp(). Below 640 the 4 fields + send
button no longer fit side by side,so stack them full-width. The section is
fixed-height for the desktop straddle,so free it to grow when stacked. */
@media (max-width:640px) {
.s2 { min-block-size:0;
padding-block-end:clamp(28px,8vw,44px)
}
.s2__row { flex-direction:column
}
.s2__send { flex-basis:auto;
inline-size:100%
}
/* Mobile band:the desktop raster (assets/title-band-form.webp) is a wide,
short parallelogram sized for a 1–2 line title;
on a phone the title wraps
to 3–4 lines and spills past it. Draw the band ourselves as the same solid
black parallelogram via clip-path,in-flow,so it grows with the wrapped
text. --band-skew is the horizontal corner offset (matches the asset's
~12° lean);
padding-inline must stay ≥ skew so the slants never clip text. */
.s2__band {
position:static;
inset:auto;
transform:none;
inline-size:min(94vw,560px);
margin:0 auto;
--band-skew:clamp(14px,4.5vw,26px);
background:#000;
clip-path:polygon(var(--band-skew) 0,100% 0,calc(100% - var(--band-skew)) 100%,0 100%);
padding:clamp(16px,5vw,24px) clamp(30px,9vw,46px)
}
.s2__band-img { display:none
}
.s2__band-text { position:static;
inset:auto
}
/* band is now in normal flow (took real height);
the form no longer needs the
big top padding that cleared the absolute desktop band. */
.s2__form { padding-block-start:clamp(22px,6vw,34px)
}
}
/* ===== css/sections/s3a.css ===== */
/* S3a — qualifier table. Comp y 2349–3100. Black section,white ink.
Headline is white here though the comp left it black-on-black (invisible);
flagged in the markup. Two-column comparison:cyan "suits" column (bold
rows) vs grey "doesn't suit" column (regular rows). */
.s3a {
min-block-size:clamp(560px,calc(751 * var(--u)),751px);
padding-block-start:clamp(36px,calc(58.85 * var(--u)),58.85px);
color:var(--c-white)
}
.s3a__headline {
text-align:center;
font-weight:700;
font-size:clamp(28px,calc(50 * var(--u)),50px);
line-height:calc(54 / 50);
/* baselines 2453.2 / 2507.2 */
}
.s3a__headline span { display:block
}
/* ── table ── header top at rel 231 ── */
.s3a__table {
margin-block-start:clamp(36px,calc(64 * var(--u)),64px)
}
.s3a__head {
display:grid;
grid-template-columns:1fr 1fr;
/* RTL:first cell (yes) on the right */
gap:clamp(6px,calc(11 * var(--u)),11px)
}
.s3a__th {
block-size:clamp(48px,calc(64 * var(--u)),64px);
display:flex;
align-items:center;
justify-content:center;
color:var(--c-black);
font-weight:700;
font-size:clamp(22px,calc(34 * var(--u)),34px)
}
.s3a__th--yes { background:var(--c-cyan)
}
.s3a__th--no { background:#e6e6e6
}
/* ── body ── 4 rows,faint dividers;
vertical rule down the centre ──
~16px gap sits between the header boxes and the first row (measured). */
.s3a__body {
position:relative;
margin-block-start:clamp(10px,calc(16 * var(--u)),16px)
}
.s3a__body::before { /* centre vertical divider */
content:"";
position:absolute;
inset-block:0;
inset-inline-start:50%;
inline-size:1px;
background:rgba(255,255,255,0.35)
}
.s3a__row {
display:grid;
grid-template-columns:1fr 1fr;
align-items:center;
border-block-end:1px solid rgba(255,255,255,0.35)
}
/* measured divider spacing:row bottoms at 2742/2823/2909/2989 */
.s3a__row:nth-child(1) { block-size:clamp(62px,calc(82 * var(--u)),82px)
}
.s3a__row:nth-child(2) { block-size:clamp(62px,calc(81 * var(--u)),81px)
}
.s3a__row:nth-child(3) { block-size:clamp(66px,calc(86 * var(--u)),86px)
}
.s3a__row:nth-child(4) { block-size:clamp(62px,calc(80 * var(--u)),80px)
}
.s3a__cell {
text-align:center;
padding-inline:clamp(10px,calc(20 * var(--u)),20px);
font-size:clamp(18px,calc(30 * var(--u)),30px);
line-height:1.15
}
.s3a__cell--yes { font-weight:700
}
.s3a__cell--no { font-weight:400
}
/* ── responsive (Task 9) ── The two columns are independent lists (who it
suits vs who it doesn't),not paired criteria,so stacking would interleave
unrelated items — keep the 2-col comparison and instead let rows grow to fit
wrapped text and drop the fixed comp heights. Layout only. */
@media (max-width:640px) {
.s3a { min-block-size:0;
padding-block-end:clamp(24px,7vw,40px)
}
/* A2:the headers had a fixed block-size,so a 2-line title (e.g.
"למי המעבדה לא מתאימה") overflowed its cyan/grey fill. Let the fill grow
with the wrapped title;
text-align centres the wrapped lines. */
.s3a__th {
block-size:auto;
min-block-size:clamp(48px,13vw,64px);
padding:clamp(8px,3vw,14px) clamp(8px,3vw,14px);
text-align:center
}
/* A3:the per-row `.s3a__row:nth-child(n) { block-size }` rules win on
specificity (0,2,0) over a bare `.s3a__row` (0,1,0),so the rows kept their
fixed comp heights and long cells overflowed. Override at matching
specificity so every row sizes to its (wrapped) content. */
.s3a__row { min-block-size:clamp(56px,14vw,82px)
}
.s3a__row:nth-child(1),
.s3a__row:nth-child(2),
.s3a__row:nth-child(3),
.s3a__row:nth-child(4) { block-size:auto
}
.s3a__cell { padding-block:clamp(8px,2.5vw,14px)
}
}
/* ===== css/sections/s3b.css ===== */
/* S3b — founder testimonial. Comp y 3100–3846. Full-bleed founder photo;
quote block on the right over the photo's dark side. Cyan quote marks and
cyan POP spans (the "64" and the whole last headline line). */
.s3b {
position:relative;
isolation:isolate;
min-block-size:clamp(560px,calc(746 * var(--u)),746px);
background:var(--c-ink);
overflow:hidden;
color:var(--c-white)
}
/* The delivered asset carries ~190px of headroom above the founder that the
comp crops off;
pull it up so the head lands at y3189 (clipped by overflow). */
.s3b__bg {
position:absolute;
inset-block-start:calc(-190 * var(--u));
inset-inline:0;
z-index:-1;
inline-size:100%;
block-size:auto
}
/* quote block,right-aligned to the column edge;
~640 wide forces the wraps */
.s3b__quote {
position:relative;
inline-size:min(100%,calc(690 * var(--u)));
padding-block-start:clamp(30px,calc(46.8 * var(--u)),46.8px);
text-align:start
}
/* cyan quote marks — delta asset pending;
text glyphs for now */
.s3b__quote::before,
.s3b__quote::after {
content:"\201D";
position:absolute;
color:var(--c-cyan);
font-weight:700;
font-size:clamp(40px,calc(70 * var(--u)),70px);
line-height:1
}
.s3b__quote::before { inset-block-start:calc(6 * var(--u));
inset-inline-start:calc(-52 * var(--u))
}
.s3b__quote::after { inset-block-end:calc(-8 * var(--u));
inset-inline-end:calc(20 * var(--u))
}
.s3b__headline {
max-inline-size:calc(618 * var(--u));
/* wraps 1 word tighter than the paras */
font-weight:700;
font-size:clamp(30px,calc(48 * var(--u)),48px);
line-height:calc(60 / 48);
/* baselines 3194.4 / 3254.4 / 3314.4 */
}
.s3b__cy { color:var(--c-cyan)
}
.s3b__para {
font-weight:400;
font-size:clamp(20px,calc(36 * var(--u)),36px);
line-height:calc(46 / 36);
/* baselines pitch 46 */
}
.s3b__para:nth-of-type(1) { margin-block-start:clamp(2px,calc(3.4 * var(--u)),3.4px)
}
.s3b__para:nth-of-type(2) { margin-block-start:clamp(28px,calc(46 * var(--u)),46px)
}
/* ── responsive (Task 9 follow-up) ── the quote width is comp-pixel-driven
(calc(690*var(--u))),which collapses to ~140px on a phone and stacks the
copy two words per line. Below 640:let the quote fill the column,drop the
desktop min height,add bottom clearance so the S4 straddle band doesn't
land on the last line,and lay a scrim over the founder photo so the white
copy stays legible wherever the photo is bright. Layout only. */
@media (max-width:640px) {
.s3b { min-block-size:0;
padding-block:clamp(48px,14vw,90px) clamp(56px,16vw,96px)
}
.s3b::after {
content:"";
position:absolute;
inset:0;
z-index:-1;
/* over .s3b__bg (also -1,earlier in paint order),under the text */
background:linear-gradient(180deg,rgba(11,15,17,0.5),rgba(11,15,17,0.8))
}
.s3b__quote { inline-size:100%;
padding-inline:clamp(24px,7vw,40px)
}
.s3b__headline { max-inline-size:100%
}
.s3b__quote::before { inset-inline-start:clamp(4px,3vw,16px)
}
.s3b__quote::after { inset-inline-end:clamp(4px,3vw,16px)
}
}
/* ===== css/sections/s4.css ===== */
/* S4 — POWER LAB. Comp y 3846–4722. Black section. Cyan straddling title band
(up 71px into S3b),then 3 process cards MACRO → MIND → RE-BUILD with dotted
dividers. Cards row is LTR so the process reads left-to-right;
each card's
Hebrew body stays RTL. */
.s4 {
position:relative;
min-block-size:clamp(680px,calc(876 * var(--u)),876px);
color:var(--c-white)
}
/* ── cyan title band ── measured bbox x481–1438,y3775–3917 ── */
.s4__band {
position:absolute;
inset-block-start:calc(-71 * var(--u));
inset-inline-start:50%;
transform:translateX(50%);
inline-size:clamp(540px,calc(959 * var(--u)),959px);
z-index:2
}
.s4__band-img { inline-size:100%;
block-size:auto
}
.s4__band-text {
position:absolute;
inset-inline:0;
inset-block-start:calc(19 * var(--u));
text-align:center;
color:var(--c-black);
font-weight:700;
font-size:clamp(26px,calc(44 * var(--u)),44px);
line-height:calc(53 / 44)
}
.s4__band-text span { display:block
}
/* ── cards ── image top at rel 140 ── */
.s4__cards {
direction:ltr;
display:flex;
justify-content:center;
gap:clamp(16px,calc(35 * var(--u)),35px);
padding-block-start:clamp(90px,calc(140 * var(--u)),140px)
}
.s4__card {
direction:rtl;
flex:0 0 clamp(200px,calc(373 * var(--u)),373px);
position:relative
}
.s4__card-img {
position:relative;
border-radius:clamp(8px,calc(14 * var(--u)),14px);
overflow:hidden;
border:1px solid rgba(30,183,220,0.35)
}
.s4__card-img img { inline-size:100%;
block-size:auto;
display:block
}
.s4__card-title {
position:absolute;
inset-block-start:calc(18 * var(--u));
direction:ltr;
left:calc(30 * var(--u));
/* physical left of the card */
color:var(--c-white);
font-weight:700;
font-size:clamp(22px,calc(32 * var(--u)),32px);
letter-spacing:0.02em
}
.s4__cy { color:var(--c-cyan)
}
/* card text block — bold heading + regular body,centred,27pt */
.s4__card-text {
margin-block-start:clamp(32px,calc(50 * var(--u)),50px);
padding-inline:clamp(3px,calc(6 * var(--u)),6px);
text-align:center;
font-weight:400;
font-size:clamp(23px,calc(36 * var(--u)),36px);
line-height:calc(46 / 36)
}
.s4__card-text strong { font-weight:700
}
/* Dotted dividers sit mid-gap to the physical LEFT of the 2nd and 3rd cards.
NB:cards are dir:rtl,so a logical inset-inline-start would land on the
wrong (right) side — use physical `left`,which ignores direction. */
.s4__card + .s4__card::before {
content:"";
position:absolute;
left:calc(-18 * var(--u));
/* ~half the 35u gap,into it */
top:calc(259 * var(--u));
/* comp divider top,rel card */
block-size:calc(476 * var(--u));
/* comp y399–875 (rel section) */
border-left:2px dotted rgba(255,255,255,0.4)
}
/* ── responsive (Task 9) ── 3-up → 1-up below 900. Cards stack full-width
(capped so they don't balloon),dotted column dividers are meaningless once
stacked,so drop them. Layout only — type stays fluid. */
@media (max-width:900px) {
.s4 { min-block-size:0;
padding-block-end:clamp(24px,6vw,48px)
}
.s4__cards {
flex-direction:column;
align-items:center;
gap:clamp(24px,6vw,40px);
/* band is in-flow on mobile now,so cards don't need to clear an absolute
straddle band — drop the 140u top padding to a small gap. */
padding-block-start:clamp(24px,7vw,40px)
}
.s4__card { flex-basis:auto;
inline-size:min(100%,420px)
}
.s4__card + .s4__card::before { display:none
}
/* Mobile band — same story as S2:the cyan desktop raster
(assets/title-band-powerlab.webp) can't hold the wrapped 2-line title on a
phone. Redraw it as the same cyan parallelogram,in-flow,auto-height.
padding-inline stays ≥ --band-skew so the slanted edges never clip text. */
.s4__band {
position:static;
inset:auto;
transform:none;
inline-size:min(94vw,540px);
margin:0 auto;
--band-skew:clamp(14px,4.5vw,28px);
background:var(--c-cyan);
clip-path:polygon(var(--band-skew) 0,100% 0,calc(100% - var(--band-skew)) 100%,0 100%);
padding:clamp(16px,5vw,24px) clamp(30px,9vw,46px)
}
.s4__band-img { display:none
}
.s4__band-text { position:static;
inset:auto
}
}
/* ===== css/sections/s5.css ===== */
/* S5 — results carousel. Comp y4722–5768. White section,black ink.
Centred headline,then a 3-up track of testimonial cards (before/after
photo + justified Hebrew quote + bold attribution). Thin circle prev/next
arrows sit outside the container,centred on the photo band. 4-dot
pagination below,first dot cyan (active).
Slice only — no carousel behaviour yet (js/carousel.js is TASK 7 wiring).
The three cards are the first visible page;
arrows/dots are inert. */
.s5 {
position:relative;
min-block-size:clamp(820px,calc(1046 * var(--u)),1046px);
background:var(--c-white);
color:#000;
padding-block-start:clamp(32px,calc(54 * var(--u)),54px)
}
/* ── headline ── ink-top y69,centred ── */
.s5__headline {
text-align:center;
font-weight:700;
font-size:clamp(34px,calc(50 * var(--u)),50px);
line-height:1.05
}
/* ── carousel row ── photos start y154 (≈47 below headline ink-bottom) ── */
.s5__carousel {
position:relative;
margin-block-start:clamp(28px,calc(49 * var(--u)),49px)
}
.s5__track {
display:flex;
justify-content:center;
gap:clamp(12px,calc(24 * var(--u)),24px);
list-style:none
}
.s5__card {
flex:0 0 clamp(240px,calc(383 * var(--u)),383px)
}
.s5__photo {
inline-size:100%;
block-size:auto;
aspect-ratio:383 / 272;
object-fit:cover;
display:block;
border-radius:clamp(4px,calc(6 * var(--u)),6px)
}
/* ── quote ── ~24px/36,justified,black,narrower than the photo ── */
.s5__quote {
margin:0;
margin-block-start:clamp(8px,calc(12 * var(--u)),12px);
/* Locked to the comp's 11-line block so the attribution/dots below stay put
even when placeholder lorem wraps to 10 lines on some rasterizers. */
min-block-size:clamp(300px,calc(396 * var(--u)),396px);
padding-inline:clamp(12px,calc(36 * var(--u)),36px);
text-align:justify;
font-weight:400;
font-size:clamp(16px,calc(25 * var(--u)),25px);
line-height:calc(36 / 25)
}
/* ── attribution ── bold,centred,y876 ── */
.s5__attrib {
display:block;
margin-block-start:clamp(14px,calc(28 * var(--u)),28px);
text-align:center;
font-style:normal;
font-weight:700;
font-size:clamp(21px,calc(30 * var(--u)),30px)
}
/* ── prev / next arrows ── thin circles outside the container,centred on the
photo band (photo y154–426 → centre 290,rel section top 69 padding). Delta
assets arrow-prev/arrow-next pending;
CSS placeholder circle + chevron. ── */
.s5__arrow {
position:absolute;
inset-block-start:calc(266 * var(--u));
/* circle top,rel section (full-width) */
inline-size:clamp(38px,calc(48 * var(--u)),48px);
block-size:clamp(38px,calc(48 * var(--u)),48px);
border:1.5px solid #000;
border-radius:50%;
background:none;
cursor:pointer;
display:grid;
place-items:center
}
.s5__arrow::before {
content:"";
inline-size:clamp(9px,calc(13 * var(--u)),13px);
block-size:clamp(9px,calc(13 * var(--u)),13px);
border-style:solid;
border-color:#000
}
/* prev = arrow pointing left,on the physical LEFT (dir-agnostic placement) */
.s5__arrow--prev { left:calc(260 * var(--u))
}
.s5__arrow--prev::before {
border-width:0 0 1.5px 1.5px;
/* left chevron */
transform:translateX(2px) rotate(45deg)
}
.s5__arrow--next { right:calc(260 * var(--u))
}
.s5__arrow--next::before {
border-width:1.5px 1.5px 0 0;
/* right chevron */
transform:translateX(-2px) rotate(45deg)
}
/* ── dot pagination ── 4 dots,centred,first cyan ── */
.s5__dots {
display:flex;
justify-content:center;
gap:clamp(4px,calc(6 * var(--u)),6px);
margin-block-start:clamp(44px,calc(76 * var(--u)),76px)
}
.s5__dot {
inline-size:clamp(7px,calc(9 * var(--u)),9px);
block-size:clamp(7px,calc(9 * var(--u)),9px);
border-radius:50%;
background:#cfcfcf
}
.s5__dot--active { background:var(--c-cyan)
}
/* ── responsive (Task 9) ── 3-up → swipeable 1-up rail below 900. The gutter
arrows have no room over the cards on mobile,so hide them;
swipe + the
keyboard-operable dots (js/carousel.js) drive navigation. The 11-line quote
height lock is desktop-only — release it so cards size to content. */
@media (max-width:900px) {
.s5 { min-block-size:0;
padding-block-end:clamp(24px,6vw,48px)
}
.s5__arrow { display:none
}
.s5__track {
/* CRITICAL:base .s5__track is justify-content:center,which on an
overflow-x rail centres all cards as a group (middle card with both
neighbours peeking) and makes the first card unreachable. Reset to
flex-start so the snap rail scrolls one card at a time from the start. */
justify-content:flex-start;
overflow-x:auto;
scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
gap:clamp(14px,5vw,24px);
padding-inline:0
}
.s5__track::-webkit-scrollbar { display:none
}
.s5__track { cursor:grab
} /* mouse/pen drag affordance (carousel.js) */
/* one card per view — no adjacent-card text bleeds into the frame */
.s5__card { flex:0 0 100%;
scroll-snap-align:center
}
.s5__quote { min-block-size:0
}
/* the dots are the mobile control;
give them a 44px tap target (WCAG 2.5.8)
without changing the 9px visual dot */
.s5__dots { gap:clamp(12px,5vw,18px)
}
.s5__dot { position:relative
}
.s5__dot::after {
content:"";
position:absolute;
top:50%;
left:50%;
inline-size:44px;
block-size:44px;
transform:translate(-50%,-50%)
}
}
/* While a mouse/pen drag is in progress (carousel.js),suspend snapping so the
rail tracks the pointer 1:1,then it re-snaps to the nearest card on release. */
.s5__track--dragging {
scroll-snap-type:none;
scroll-behavior:auto;
cursor:grabbing;
user-select:none
}
/* ===== css/sections/s6.css ===== */
/* S6 — contact. Comp y5768–6237. Cyan section,white ink.
RTL two-column grid:right column = heading + body + founder signature;
left column = "צור קשר" label + 4 white fields + black CTA.
Slice only — the form has no action/validation yet. design-slicing #15 flags
that this may be a click-to-WhatsApp cluster,not a real submit;
confirm with
the client before wiring (TASK 8). Signature is a delta asset NOT in the
delivered set — rendered as a styled text placeholder for now. */
/* A11Y CONTRAST FLAG (Task 9):white ink on cyan (#1EB7DC) = 2.37:1 — fails WCAG
AA (4.5:1 normal,3:1 large). Kept as-is to preserve comp/pixel-lock;
fixing it
is a client/design call. If approved,darkening --c-cyan to ~#0E7C96 in this
section takes white to 4.6:1. See docs/plan.md Task 9 checklist. */
.s6 {
background:var(--c-cyan);
color:var(--c-white);
min-block-size:clamp(400px,calc(469 * var(--u)),469px);
padding-block-start:clamp(48px,calc(76 * var(--u)),76px)
}
.s6__grid {
display:flex;
justify-content:flex-start;
/* RTL:packs from the right edge */
align-items:flex-start;
gap:clamp(32px,calc(93 * var(--u)),93px)
}
/* ── right column:heading + body + signature ── */
.s6__text {
inline-size:clamp(300px,calc(545 * var(--u)),545px);
text-align:start;
/* RTL → right-aligned */
}
.s6__heading {
margin:0;
margin-block-start:clamp(2px,calc(2 * var(--u)),2px);
font-weight:700;
font-size:clamp(32px,calc(50 * var(--u)),50px);
line-height:1
}
.s6__body {
margin:0;
margin-block-start:clamp(14px,calc(24 * var(--u)),24px);
font-weight:400;
font-size:clamp(18px,calc(26 * var(--u)),26px);
line-height:calc(41 / 26)
}
/* Founder signature — delta asset signature (handwritten,transparent bg) is
NOT in the delivered set. Placeholder script text until it arrives. */
/* Delivered signature asset (white on transparent — it reads against the cyan).
margin,not padding:as an the box IS the artwork,so padding would pad
around it instead of shifting it. */
.s6__sig {
display:block;
margin-block-start:clamp(6px,calc(10 * var(--u)),10px);
margin-inline-start:clamp(120px,calc(245 * var(--u)),245px);
/* shift left to comp x1107–1315 */
inline-size:clamp(146px,calc(210 * var(--u)),210px);
block-size:auto
}
/* ── left column:form ── */
.s6__form {
inline-size:clamp(240px,calc(385 * var(--u)),385px)
}
.s6__form-label {
display:block;
text-align:start;
/* right-aligned to the field edge */
font-weight:700;
font-size:clamp(30px,calc(42 * var(--u)),42px);
line-height:1;
margin-block-end:clamp(6px,calc(9 * var(--u)),9px)
}
.s6__field,
.s6__select {
inline-size:100%;
block-size:clamp(34px,calc(44 * var(--u)),44px);
margin-block-end:clamp(7px,calc(11 * var(--u)),11px);
padding-inline:clamp(14px,calc(20 * var(--u)),20px);
border:0;
background:var(--c-white);
color:#333;
font-family:inherit;
font-size:clamp(17px,calc(24 * var(--u)),24px);
text-align:start
}
.s6__field::placeholder { color:#333;
opacity:1
}
/* select keeps a native look but we draw our own chevron on the physical LEFT */
.s6__select-wrap { position:relative
}
.s6__select {
appearance:none;
-webkit-appearance:none;
margin-block-end:0
}
.s6__select-wrap::after {
content:"";
position:absolute;
left:calc(20 * var(--u));
/* chevron on the physical left (comp x554) */
top:50%;
inline-size:clamp(7px,calc(10 * var(--u)),10px);
block-size:clamp(7px,calc(10 * var(--u)),10px);
border:solid #333;
border-width:0 0 2px 2px;
transform:translateY(-70%) rotate(-45deg);
pointer-events:none
}
.s6__submit {
inline-size:clamp(230px,calc(336 * var(--u)),336px);
block-size:clamp(40px,calc(52 * var(--u)),52px);
margin-block-start:clamp(12px,calc(18 * var(--u)),18px);
border:0;
background:#000;
color:var(--c-white);
font-family:inherit;
font-weight:700;
font-size:clamp(17px,calc(24 * var(--u)),24px);
cursor:pointer
}
/* ── responsive (Task 9) ── 2-col → stacked below 900:heading/body/signature
on top,form beneath. Both columns go full-width (form capped). The signature
placeholder shift is a desktop nicety — reset it when stacked. Layout only. */
@media (max-width:900px) {
.s6 { min-block-size:0;
padding-block-end:clamp(28px,8vw,48px)
}
.s6__grid { flex-direction:column;
gap:clamp(28px,7vw,48px)
}
.s6__text { inline-size:100%
}
.s6__form { inline-size:min(100%,420px)
}
.s6__sig { margin-inline-start:0
}
}
/* ===== css/sections/footer.css ===== */
/* Footer bar + credit strip. Comp y6237–6363.
Footer bar (black):3 centred items — address · phone · hours — each a cyan
icon on the right of its white text. Credit strip (white):centred
"Made with ❤ by PEOPLE",the wordmark being the delivered PEOPLE logo. */
.footer {
background:#000;
color:var(--c-white);
min-block-size:clamp(56px,calc(74 * var(--u)),74px);
display:flex;
align-items:center
}
.footer__inner {
inline-size:100%;
display:flex;
justify-content:center;
align-items:center;
gap:clamp(48px,calc(110 * var(--u)),110px)
}
.footer__item {
display:inline-flex;
align-items:center;
gap:clamp(7px,calc(11 * var(--u)),11px);
/* icon ↔ text */
font-weight:400;
font-size:clamp(18px,calc(25 * var(--u)),25px);
white-space:nowrap
}
.footer__icon { display:block;
block-size:auto
}
.footer__icon--location { inline-size:clamp(13px,calc(18 * var(--u)),18px)
}
.footer__icon--phone { inline-size:clamp(20px,calc(27 * var(--u)),27px)
}
.footer__icon--clock { inline-size:clamp(21px,calc(29 * var(--u)),29px)
}
/* ── credit strip ── */
.site-credit {
/* white strip with an ~11px black rule at the very bottom (comp) */
background:linear-gradient(to bottom,
var(--c-white) 0,var(--c-white) calc(41 * var(--u)),#000 calc(41 * var(--u)));
color:#111;
min-block-size:clamp(40px,calc(52 * var(--u)),52px);
display:flex;
align-items:center;
justify-content:center;
gap:0.35em;
font-size:clamp(18px,calc(26 * var(--u)),26px);
font-weight:400
}
/* "Made with ❤ by PEOPLE" — the wordmark is the delivered PEOPLE logo,sized by
height so it optically matches the strip's cap height;
width follows. Both are
flex items of .site-credit,so its gap handles the spacing. */
.site-credit__heart {
color:#e0243c;
font-size:0.92em;
line-height:1
}
.site-credit__people {
block-size:clamp(20px,calc(35 * var(--u)),35px);
inline-size:auto
}
/* ── responsive (Task 9) ── the 3 footer items can't sit on one row on a
phone;
stack them and let the bar grow. Credit wraps naturally. Layout only. */
@media (max-width:640px) {
.footer { min-block-size:0;
padding-block:clamp(16px,5vw,26px)
}
.footer__inner { flex-direction:column;
gap:clamp(12px,3.5vw,18px)
}
.site-credit { min-block-size:0;
padding-block:clamp(12px,4vw,20px);
text-align:center
}
}
/* ===== css/floating.css ===== */
/* Floating thumb-reach CTAs — the IL lead-gen baseline (design-slicing #5).
Not in the comp;
expected after first client review. A tel:shortcut and a
scroll-to-form anchor,stacked bottom-right,above everything. Swap the
second button for a wa.me link once a WhatsApp mobile number is confirmed
(the footer 03- number is a landline,so WhatsApp can't use it yet). */
.floating-cta {
position:fixed;
right:clamp(14px,2.5vw,26px);
bottom:clamp(14px,2.5vw,26px);
z-index:50;
display:flex;
flex-direction:column;
gap:clamp(10px,1.4vw,14px)
}
.floating-cta__btn {
inline-size:clamp(48px,7vw,58px);
block-size:clamp(48px,7vw,58px);
border-radius:50%;
background:var(--c-cyan);
color:#fff;
display:grid;
place-items:center;
box-shadow:0 6px 18px rgba(0,0,0,0.35);
transition:transform 0.18s ease,box-shadow 0.18s ease
}
.floating-cta__btn:hover,
.floating-cta__btn:focus-visible {
transform:translateY(-2px);
box-shadow:0 10px 24px rgba(0,0,0,0.45)
}
.floating-cta__btn svg {
inline-size:48%;
block-size:48%;
fill:currentColor
}
/* The scroll-to-form button is the softer touch;
give it a black fill so the
two CTAs read as distinct affordances. */
.floating-cta__btn--form {
background:#000
}
/* ===== css/reveal.css ===== */
/* Scroll-reveal (progressive enhancement,pairs with js/reveal.js).
Elements start hidden ONLY when JS is on (html.js) and the failsafe hasn't
fired (:not(.reveal-off)),so no-JS users — and anyone whose reveal.js failed
to load — see everything. reveal.js adds .is-in via IntersectionObserver as
each element scrolls into view (one-shot),with a per-sibling stagger.
IMPORTANT:the selector lists here MUST stay in sync with REVEAL_SELECTOR in
js/reveal.js. Two groups:
- rise:fade up (opacity + translateY)
- fade:opacity only — for elements that already use `transform` for layout
(the S2/S4 title bands centre with translateX on desktop),so a reveal
transform would clobber their positioning. */
/* ── hidden (pre-reveal) state ── */
html.js:not(.reveal-off) :is(
.s1__title,.s1__sub,.s1__frame,
.s2__field,.s2__send,.s2__consent,
.s3a__headline,.s3a__head,.s3a__row,
.s3b__quote,
.s4__card,
.s5__headline,.s5__carousel,.s5__dots,
.s6__heading,.s6__body,.s6__sig,
.s6__form-label,.s6__field,.s6__select-wrap,.s6__submit,
.footer__inner,.site-credit
) {
opacity:0;
transform:translateY(22px);
transition:opacity 0.6s cubic-bezier(0.22,1,0.36,1),
transform 0.6s cubic-bezier(0.22,1,0.36,1);
transition-delay:var(--reveal-delay,0ms)
}
/* fade-only group (keep their own transform) */
html.js:not(.reveal-off) :is(.s2__band,.s4__band) {
opacity:0;
transition:opacity 0.6s cubic-bezier(0.22,1,0.36,1);
transition-delay:var(--reveal-delay,0ms)
}
/* ── revealed state ── */
html.js :is(
.s1__title,.s1__sub,.s1__frame,
.s2__field,.s2__send,.s2__consent,
.s3a__headline,.s3a__head,.s3a__row,
.s3b__quote,
.s4__card,
.s5__headline,.s5__carousel,.s5__dots,
.s6__heading,.s6__body,.s6__sig,
.s6__form-label,.s6__field,.s6__select-wrap,.s6__submit,
.footer__inner,.site-credit
).is-in {
opacity:1;
transform:none
}
/* fade group:only clear opacity,never touch transform (bands need it) */
html.js :is(.s2__band,.s4__band).is-in {
opacity:1
}
/* ── no motion:show everything immediately,don't depend on JS timing ── */
@media (prefers-reduced-motion:reduce) {
html.js :is(
.s1__title,.s1__sub,.s1__frame,
.s2__field,.s2__send,.s2__consent,
.s3a__headline,.s3a__head,.s3a__row,
.s3b__quote,
.s4__card,
.s5__headline,.s5__carousel,.s5__dots,
.s6__heading,.s6__body,.s6__sig,
.s6__form-label,.s6__field,.s6__select-wrap,.s6__submit,
.footer__inner,.site-credit
) {
opacity:1 !important;
transform:none !important
}
html.js :is(.s2__band,.s4__band) { opacity:1 !important
}
}
/* ===== css/forms.css ===== */
/* Form validation UI (pairs with js/forms.js). The S2 and S6 forms both sit on
the cyan section,so error/status chips use a solid fill for guaranteed
contrast regardless of the field colour behind them. Injected by forms.js:
.field-error after each field,.form-status at the end of the form. */
.field-error {
display:block;
margin-block-start:6px;
padding:3px 8px;
border-radius:4px;
background:var(--c-white);
color:#b00020;
font-size:0.82em;
font-weight:700;
line-height:1.3;
text-align:start
}
.field-error:empty { display:none
} /* no layout cost when there is no error */
/* invalid field ring — inputs are white,so a red ring reads clearly */
.is-invalid {
box-shadow:0 0 0 2px #b00020;
outline:none
}
.form-status {
margin-block-start:12px;
padding:10px 14px;
border-radius:6px;
font-weight:700;
text-align:start
}
.form-status[hidden] { display:none
}
.form-status--ok { background:#0b7a34;
color:var(--c-white)
}
.form-status--err { background:#b00020;
color:var(--c-white)
}
/* ===== CMS-port additions (no counterpart in the static slice) =====
Everything above this line is a verbatim concatenation of the slice CSS.
The rules below cover markup that exists only in the MagmaSDK theme,so a
re-port from the slice must PRESERVE this block rather than overwrite it. */
/* The SDK's global reset opens the bundle with `form { display:inline }`,long
before any theme CSS. The slice never had to counter it — a