/* ── Lenis 1.3.25 — self-hosted (was a render-blocking third-party to
unpkg in index.html , ahead of this very file, putting homepage FCP
behind a CDN for 513 bytes). Verbatim copy of lenis@1.3.25/dist/lenis.css.
All rules are .lenis-scoped, so they are inert on the 4 pages that never
instantiate Lenis. If Lenis is ever version-bumped, re-copy this block. ── */
html.lenis,
html.lenis body {
height: auto;
}
.lenis:not(.lenis-autoToggle).lenis-stopped {
overflow: clip;
}
.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
overscroll-behavior: contain;
}
.lenis.lenis-smooth iframe {
pointer-events: none;
}
.lenis.lenis-autoToggle {
transition-property: overflow;
transition-duration: 1ms;
transition-behavior: allow-discrete;
}
/* ============================================================
Automator Landing Page — Global tokens + Hero section
Clean white / luxurious direction. Mobile-first (390px).
============================================================ */
/* Self-hosted type system (subset: Hebrew + Latin + digits + punctuation).
IBM Plex Sans Hebrew = workhorse (body/UI, real weight range, Hebrew+Latin
designed together so scripts match in weight/color). Orbitron = kept only
for digits/Latin display (ghost-numerals, control-room, intro wordmark) —
it has zero Hebrew glyphs, so Hebrew headline text falls through to Plex
SemiBold rather than the OS default, see --font-head below. */
@font-face {
font-family: "Plex Hebrew";
src: url("assets/fonts/IBMPlexSansHebrew-Light.woff2") format("woff2");
font-weight: 300;
font-display: swap;
}
@font-face {
font-family: "Plex Hebrew";
src: url("assets/fonts/IBMPlexSansHebrew-Regular.woff2") format("woff2");
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: "Plex Hebrew";
src: url("assets/fonts/IBMPlexSansHebrew-Medium.woff2") format("woff2");
font-weight: 500;
font-display: swap;
}
@font-face {
font-family: "Plex Hebrew";
src: url("assets/fonts/IBMPlexSansHebrew-SemiBold.woff2") format("woff2");
font-weight: 600;
font-display: swap;
}
@font-face {
font-family: "Plex Hebrew";
src: url("assets/fonts/IBMPlexSansHebrew-Bold.woff2") format("woff2");
font-weight: 700;
font-display: swap;
}
@font-face {
font-family: "Orbitron";
src: url("assets/fonts/Orbitron-700.woff2") format("woff2");
font-weight: 700;
font-display: swap;
}
@font-face {
font-family: "Orbitron";
src: url("assets/fonts/Orbitron-900.woff2") format("woff2");
font-weight: 900;
font-display: swap;
}
/* ============================================================
DESIGN SYSTEM — warm cream/terracotta (2026-07Z redesign)
Replaced the dark navy/silver palette site-wide. Full rationale,
contrast ratios, and the "never reintroduce" note re-evaluation
live in CLAUDE.md's Design System section — read that before
touching any of these values.
============================================================ */
:root {
--bg: #f1ebe2; /* warm cream page background */
--bg-soft: #f1ebe2; /* kept in parity with --bg, matching the prior
(unused) pattern — not introducing a new tier */
--ink: #0d1427; /* headline / strong text — 15.46:1 vs --bg */
--muted: #6b5d52; /* body / subtitle — ~5.35:1 vs --bg, AA-safe */
--deco: #8a7a6d; /* decorative-only warm taupe: ghost numerals,
hairlines, dividers, borders — NOT for real text
(~3.48:1, fails AA text contrast; fine for
decorative/non-text elements) */
--accent: #c06548; /* terracotta — primary CTA/link/active/hover color */
--headline: var(--accent-active); /* 2026-07Z-4 — section-headline color
(the one large title identifying
each section, e.g. "שאלות נפוצות",
"בוא נדבר"). NOT for body/paragraph
text or per-card/per-step titles —
those stay var(--ink), unchanged.
Reuses --accent-active rather than
plain --accent: measured 4.46–4.70:1
against cream/glass card backgrounds
(plain --accent only reaches
3.41–3.59:1 — passes the 3:1 large-
text AA floor but with much less
margin, and several headline-styled
elements dip below the "large text"
bold/24px threshold). Aliased to its
own token (not just inlined) so a
future "make headlines a distinct
shade from buttons" call is a
one-line change. */
--accent-active: #a75439; /* darker terracotta for solid-fill button
backgrounds specifically — white text on
--accent alone is only 4.04:1 (borderline
fails AA); this variant measures 5.29:1 */
--accent-active-hover: #89452f; /* 2026-07Z-3 — button hover/press shade,
computed by darkening --accent-active
~8 HSL-lightness points (not lightened,
the opposite of the old --navy→
--navy-hover direction) specifically so
white button text stays AA-safe on
hover too, not just at rest — plain
--accent (the naive "lighter on hover"
choice mirroring the old pattern) only
measures 4.04:1 with white, this shade
measures 7.14:1. Used site-wide on every
solid-fill CTA button's :hover/:focus
alongside --accent-active at rest. */
/* Retired 2026-07Z-4: --navy (#1b2a4e) / --navy-hover (#26396b). Navy is
now fully retired as a visible site color, per Sagiv's explicit
"navy retires completely, anywhere" decision — confirmed via repo-wide
grep (zero remaining var(--navy)/var(--navy-hover) call sites, zero
remaining rgb/hex navy-family values outside the 4 archived secondary-
page hero rules, which are out of this redesign's scope entirely)
before removing, matching the same discipline already used for
--line/--btn/--btn-hover/--ease-out at the original palette cleanup.
Its last 2 call sites (.cursor-dot / .cursor-dot.is-hover, and the
hero text-mask) are now var(--accent-active)/var(--accent-active-hover). */
--font-head: "Orbitron", "Plex Hebrew", "Segoe UI", system-ui, sans-serif;
--font-body: "Plex Hebrew", "Segoe UI", "Arial Hebrew", system-ui, sans-serif;
/* Premium deceleration easing */
--ease: cubic-bezier(0.16, 1, 0.3, 1);
--ease-hover: cubic-bezier(0.34, 1.2, 0.64, 1);
}
/* ---------- Reset ---------- */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
background: var(--bg);
color: var(--ink);
font-family: var(--font-body);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body {
overflow-x: hidden;
}
/* Subtle grain texture — what separates premium dark sites from flat ones */
body::before {
content: "";
position: fixed;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
background-repeat: repeat;
background-size: 200px 200px;
opacity: 0.04;
pointer-events: none;
z-index: 9997;
}
img {
display: block;
max-width: 100%;
}
/* ============================================================
HERO
============================================================ */
.hero {
position: relative;
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 2.5rem 1.25rem;
background: var(--bg);
/* Scopes the wash's mix-blend-mode to this section only — without this,
the blend layers would composite against sections below/above too. */
isolation: isolate;
}
/* ---------- Cursor color wash (desktop + .anim-on + pointer:fine only,
activates after the intro sequence — see main.js) ----------
Two static radial-gradient discs, moved purely via `transform` each
frame (never repainted) so the sweep costs nothing beyond compositing.
Both track the same lerped cursor position for a single coherent "field".
Sizes (2026-07R, revised 2026-07S): originally resized to ~25% smaller
than the measured static cinematic-atmosphere bloom on this section
(empirically measured via box-averaged pixel sampling at 1440x900 —
half-max radius ~380px, target 380*0.75=285px bg / 152px fg). Sagiv
reviewed that size live and asked for it smaller still — 2026-07S takes
another 25% off those two numbers directly (285*0.75=214px bg radius,
152*0.75=114px fg radius; clamp() triplets scaled by the same 0.75x to
keep the responsive shape). The fg:bg ratio is unchanged throughout.
2026-07Z-4 — recolored navy/silver → terracotta AND completed a blend-
mode fix that was flagged but never finished: CLAUDE.md's own design
decision #1 (recorded well before this round) already said `--bg`'s
`mix-blend-mode: screen` "washes to near-invisible against a light
background by construction" and needed to invert to a multiply-based
shadow — but the code itself still had `--bg` on `screen` (only `--fg`
was ever on `multiply`) when this round started; the decision was
recorded, not built. Recoloring alone without also fixing `--bg`'s blend
mode would have shipped a wash where the outer disc stays structurally
near-invisible regardless of hue (screen against a light base is a
fixed point at white-ish, the same reason the ORIGINAL silver/navy
version needed replacing) — confirmed this live via screenshot before
deciding, not assumed from the doc note alone. Both discs are now
`multiply`, both now read as a warm shadow pooling under the cursor,
darkest/most-saturated at center fading to transparent — the "pools
where the cursor trails" language from the original decision. */
.hero__wash {
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
pointer-events: none;
opacity: 0;
transition: opacity 1.1s ease;
transform: translate(-50%, -50%);
will-change: transform;
}
.hero__wash.is-active { opacity: 1; }
.hero__wash--bg {
width: clamp(310px, 40.4vmin, 485px);
height: clamp(310px, 40.4vmin, 485px);
background: radial-gradient(circle,
rgba(167, 84, 57, 0.20) 0%,
rgba(192, 101, 72, 0.13) 40%,
rgba(224, 197, 181, 0.06) 65%,
transparent 80%);
mix-blend-mode: multiply;
z-index: 0;
}
.hero__wash--fg {
width: clamp(175px, 21.6vmin, 269px);
height: clamp(175px, 21.6vmin, 269px);
/* Trimmed from the first 2026-07Z-4 pass (0.22/0.14) after real pixel-
sampled contrast testing found the two discs compound where they
overlap at the cursor (both multiply, same location) and darkened the
background enough there to threaten the text-mask's own contrast —
see the mask color note below for the full numbers. This disc sits
exactly where the mask reveals, so it's the one trimmed most. */
background: radial-gradient(circle,
rgba(167, 84, 57, 0.15) 0%,
rgba(192, 101, 72, 0.09) 45%,
transparent 72%);
mix-blend-mode: multiply;
z-index: 2;
}
/* ---------- Cursor-wash text mask (2026-07R, new; stacking + color fixed 2026-07T) ----------
Where the wash's --fg disc currently sits, the headline/subtitle should
read in navy instead of silver/white, tracking the cursor in real time.
Technique: a `::after` duplicate of each text node (content: attr(),
populated once from textContent by main.js), positioned exactly over the
original via position:relative+inset:0 (so it inherits the same box/
wrapping the real text already resolved to — no separate width/line-
break math needed), colored solid, and revealed only within a
radial-gradient `mask-image` whose center/radius main.js updates as
CSS custom properties every frame — from the SAME lerped curX/curY the
wash discs already compute, not a second cursor-tracking system. A
transparent-outside/opaque-inside mask (not mix-blend-mode) gives a
genuine, exact color swap rather than a translucent tint, with a short
feather (last ~12px of the radius) so the edge anti-aliases instead of
hard-cutting. Only visible while `.hero` carries `.wash-tracking` (same
activation moment as the discs' own `.is-active`).
⚠️ 2026-07T fix — the mask was rendering muddy specifically where it
overlapped text, confirmed via a zoomed screenshot + computed-style
check: `.hero__wash--fg` (z-index:2, mix-blend-mode:multiply) sits
ABOVE `.hero__inner` (z-index:1) in the stacking order, so it was still
painting its OLD multiply-tint directly on top of the new mask —
double-compositing the disc's translucent tint with the mask's solid
color, muddying it. `.hero .hero__inner` is now bumped to z-index:3
(hero-scoped override — the shared `.hero__inner, .book__inner{z-index:1}`
rule below is untouched, so `.book__inner` is unaffected) so the masked
text paints as a clean, unblended color above the fg disc; the fg disc's
own multiply-glow is still visible in the negative space around/between
letters, just no longer smeared across the letter pixels themselves.
2026-07Z-4 — mask color, flagged for confirmation rather than decided
silently (per Sagiv's own instruction this round): navy retiring
site-wide raises a real question the original navy-mask design didn't
have to answer — the mask was chosen specifically to CONTRAST against
the wash (solid navy reveal vs. a lighter blended glow), and the wash
is now terracotta too. **First attempt, tested and rejected**:
`var(--accent-active)` (#a75439, same token buttons/headlines use) —
looked right, but real pixel-sampled contrast checking against the
ACTUAL rendered background (not just the token math vs. flat --bg)
found the wash's own two discs compound where they overlap the mask
(both `multiply`, same cursor position) and darken the background
enough there that the mask's contrast collapsed to ~2.7:1 at the
glow's center — failing even large-text AA, the opposite of "reads
clearly where the cursor is." **Shipped instead**: a dedicated deeper
blend, 70% --accent-active + 30% --ink ≈ `#794134` — darker/richer
than plain --accent-active specifically so it keeps working as the
background gets darker under the glow, while staying visually distinct
from both plain --ink (a real hue shift toward warm brick-red, not
just "slightly darker terracotta") and the lighter wash discs
themselves. Verified via real pixel sampling post-build: 6.77:1 against
flat cream (mask far from cursor), ~4.1–4.8:1 against the actual
darkened glow-center background (mask right under the cursor) — clears
the 4.5:1 normal-text floor the subtitle needs even in the worst case,
with comfortable margin left over for the headline (which only needs
3:1, being large/bold). The wash discs' own alpha was also trimmed
(previous values in a code comment above) as a second, independent
safety margin, not a substitute for the color fix. Both title and
subtitle now share this one mask color — simpler and more consistent
than two different hues, and both were failing/passing for the same
underlying reason (contrast against a background that darkens under
multiply), so one fix addresses both. */
.hero__title,
.hero__subtitle {
position: relative;
}
.hero .hero__inner { z-index: 3; }
.hero__title::after {
content: attr(data-mask-text);
position: absolute;
inset: 0;
color: #794134; /* 70% --accent-active / 30% --ink, see comment above */
pointer-events: none;
opacity: 0;
-webkit-mask-image: radial-gradient(circle var(--wash-mr, 0px) at var(--wash-mx, -9999px) var(--wash-my, -9999px), #000 0%, #000 calc(100% - 12px), transparent 100%);
mask-image: radial-gradient(circle var(--wash-mr, 0px) at var(--wash-mx, -9999px) var(--wash-my, -9999px), #000 0%, #000 calc(100% - 12px), transparent 100%);
transition: opacity 0.4s ease;
}
/* Subtitle mask — 2026-07Z-4 shares the exact same #794134 blend as the
headline mask above (see that comment for the full contrast story: the
first attempt, var(--accent-active) alone, tested at ~2.7:1 against the
wash's own darkened center and was replaced). Subtitle text is regular-
weight/sub-24px, so it needs the strict 4.5:1 normal-text floor (not
headline's relaxed 3:1 large-text one) — the darker blend clears that
with real margin (~4.1–4.8:1 against the actual darkened glow-center,
verified via pixel sampling, not the token math alone) where plain
--accent-active could not. One shared mask color for both elements now,
simpler than the original navy-era design's two-different-blends
approach — that split existed to solve a problem (near-identical
lightness against each element's own dim base) that doesn't recur here. */
.hero__subtitle::after {
content: attr(data-mask-text);
position: absolute;
inset: 0;
color: #794134; /* 70% --accent-active / 30% --ink, see comment above */
pointer-events: none;
opacity: 0;
-webkit-mask-image: radial-gradient(circle var(--wash-mr, 0px) at var(--wash-mx, -9999px) var(--wash-my, -9999px), #000 0%, #000 calc(100% - 12px), transparent 100%);
mask-image: radial-gradient(circle var(--wash-mr, 0px) at var(--wash-mx, -9999px) var(--wash-my, -9999px), #000 0%, #000 calc(100% - 12px), transparent 100%);
transition: opacity 0.4s ease;
}
.hero.wash-tracking .hero__title::after,
.hero.wash-tracking .hero__subtitle::after {
opacity: 1;
}
/* ---------- Content wrapper ---------- */
.hero__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
max-width: 760px;
width: 100%;
}
/* ---------- Headline ---------- */
.hero__title {
font-family: var(--font-body);
font-weight: 700;
font-size: clamp(2.2rem, 6vw, 4rem);
line-height: 1.15;
color: var(--ink);
letter-spacing: -0.02em;
}
/* ---------- Subtitle ---------- */
.hero__subtitle {
font-family: var(--font-body);
font-weight: 400;
font-size: clamp(1rem, 3.4vw, 1.3rem);
line-height: 1.75;
color: var(--muted);
max-width: 40ch;
}
/* ---------- Mobile scroll cue — fills the space below the CTA with intent
instead of leaving it empty, and hints there's more to scroll to (there's
no mobile nav signaling site depth otherwise). Hidden on desktop. ---------- */
.hero__scrollcue {
display: none;
}
@media (max-width: 767px) {
.hero {
justify-content: space-between;
padding-top: 4rem;
padding-bottom: 2rem;
}
.hero__scrollcue {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
opacity: 0.5;
position: relative;
z-index: 1;
}
}
.hero__scrollcue-line {
width: 1px;
height: 30px;
background: linear-gradient(to bottom, transparent, #b0b0b0 75%);
}
.hero__scrollcue-chevron {
width: 13px;
height: 13px;
color: #b0b0b0;
}
/* ---------- CTA button (formal, solid, subtle) ----------
2026-07Z-3: recolored navy→terracotta as part of the site-wide button
pass. Hero's own background/wash/atmosphere is still the old dark
palette (Hero is last in the rollout order) — this button now sits
ahead of its section's own conversion, a deliberate, scoped exception
per Sagiv's explicit "every button site-wide" instruction, not scope
creep into Hero's larger redesign. Expect it to look slightly ahead of
its surroundings until Hero's turn comes up — same mid-rollout
inconsistency already called out as expected elsewhere in this doc. */
.hero__cta {
display: inline-block;
margin-top: 0.25rem;
padding: 1.05rem 2.9rem;
background: var(--accent-active);
color: #ffffff;
font-family: var(--font-body);
font-weight: 700;
font-size: clamp(1rem, 3vw, 1.12rem);
text-decoration: none;
border-radius: 10px;
border: 1px solid rgba(176, 176, 176, 0.22);
box-shadow: 0 8px 26px rgba(167, 84, 57, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
transition: transform 0.3s var(--ease-hover), background 0.25s var(--ease), box-shadow 0.3s var(--ease);
}
.hero__cta:hover,
.hero__cta:focus-visible {
background: var(--accent-active-hover);
transform: translateY(-2px) scale(1.02);
box-shadow: 0 16px 44px rgba(137, 69, 47, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.1);
outline: none;
}
/* ---------- Secondary hero links row — "how it works" anchor + WhatsApp
community join, both intentionally lighter than .hero__cta so neither
competes with the primary booking CTA (2026-08B: added the WhatsApp
link as a second, equal-tier secondary action, not a second primary —
the hero already has one CTA, so the community link stays in the same
lighter visual register rather than duplicating .hero__cta's weight). */
.hero__links {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 0.6rem 1.5rem;
margin-top: 0.5rem;
}
.hero__secondary {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: var(--font-body);
font-size: 0.9rem;
font-weight: 500;
color: #b0b0b0;
text-decoration: none;
border-bottom: 1px solid rgba(176, 176, 176, 0.35);
padding-bottom: 2px;
transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.hero__secondary:hover,
.hero__secondary:focus-visible {
color: #ffffff;
border-color: #ffffff;
outline: none;
}
.hero__secondary--wa svg {
flex-shrink: 0;
}
/* ============================================================
ABOUT
Mobile: stacked (photo on top, text below).
Desktop: two columns — photo left, text right (RTL-aware).
============================================================ */
.about {
background: var(--bg);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: clamp(5rem, 11vw, 9rem) clamp(1.5rem, 5vw, 4rem);
position: relative;
overflow: hidden;
}
/* Section chapter label — in-flow block, own dedicated vertical space above the heading */
.sec-num {
display: block;
width: 100%;
text-align: right;
font-family: var(--font-head);
font-weight: 900;
font-size: clamp(5.5rem, 10.94vw, 9.4rem);
color: #B0B0B0;
opacity: 0.5;
line-height: 1;
pointer-events: none;
user-select: none;
letter-spacing: -0.05em;
direction: ltr;
margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
will-change: transform;
}
.about__grid {
width: 100%;
max-width: 1080px;
display: flex;
flex-direction: column;
align-items: center;
gap: 2.5rem;
position: relative;
z-index: 1;
}
/* Founder photo frame — was a typographic ghost-numeral placeholder until
the real photo shipped (2026-07). Kept the same box treatment (radius,
border, gradient wash) so the layout/reveal timing needed zero changes. */
.about__mark {
width: 100%;
max-width: 340px;
aspect-ratio: 4 / 5;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 16px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0));
border: 1px solid rgba(176, 176, 176, 0.12);
}
.about__mark-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.about__content {
width: 100%;
text-align: right; /* Hebrew reads right-to-left */
}
.about__title {
font-family: var(--font-head);
font-weight: 700;
font-size: clamp(2rem, 5vw, 3rem);
line-height: 1.15;
color: var(--headline); /* 2026-07Z-4: section headline, navy retired */
margin-bottom: 1.5rem;
letter-spacing: -0.02em;
}
.about__text {
font-family: var(--font-body);
font-weight: 400;
font-size: clamp(1rem, 2.6vw, 1.15rem);
line-height: 1.9;
color: var(--muted);
max-width: 62ch;
}
.about__text + .about__text {
margin-top: 1.1rem;
}
@media (min-width: 768px) {
.about__grid {
flex-direction: row-reverse; /* RTL: puts photo on the left, text on the right */
align-items: center;
gap: clamp(3rem, 6vw, 5.5rem);
}
.about__mark {
flex: 0 0 auto;
width: clamp(300px, 36%, 380px);
}
.about__content {
flex: 1;
}
}
/* ============================================================
RESULTS
============================================================ */
.results {
background: var(--bg);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
min-height: 100dvh;
padding: clamp(4rem, 8vw, 7rem) 1.25rem;
gap: 4rem;
overflow: hidden;
position: relative;
}
.results__title {
font-family: var(--font-head);
font-weight: 700;
font-size: clamp(2rem, 5vw, 3rem);
color: var(--headline); /* 2026-07Z-4: section headline, navy retired */
text-align: center;
letter-spacing: -0.02em;
}
.results__stats {
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
width: 100%;
max-width: 900px;
}
.results__stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
text-align: center;
}
.results__number {
font-family: var(--font-head);
font-weight: 700;
font-size: clamp(2.4rem, 8vw, 4rem);
color: var(--ink);
line-height: 1;
letter-spacing: -0.02em;
}
.results__number--ltr {
direction: ltr;
unicode-bidi: embed;
letter-spacing: 0.08em;
}
.results__slash {
display: inline-block;
transform: rotate(-15deg);
letter-spacing: 0;
}
.results__label {
font-family: var(--font-body);
font-size: clamp(0.9rem, 2.5vw, 1rem);
color: var(--muted);
letter-spacing: 0.02em;
}
/* Editorial cards — each carries its own ghost index numeral (brand's
sec-num motif, scaled down) instead of a repeated border accent. */
.results__cards {
display: flex;
flex-direction: column;
gap: 1rem;
width: 100%;
max-width: 860px;
counter-reset: results-card;
}
.results__card {
/* Glassmorphic card (2026-07Z) — see CLAUDE.md's Design System section
for the shared recipe rationale. backdrop-filter needs a real
performance check under scroll near this pinned section (done as
part of pilot verification, not assumed safe). */
background: rgba(255, 255, 255, 0.45);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.7);
border-radius: 16px;
padding: 1.75rem 2.25rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
text-align: right;
position: relative;
overflow: hidden;
counter-increment: results-card;
box-shadow:
0 8px 32px rgba(192, 101, 72, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.results__card::before {
content: counter(results-card, decimal-leading-zero);
position: absolute;
top: -0.5rem;
left: 1.25rem;
font-family: var(--font-head);
font-weight: 900;
font-size: clamp(2.4rem, 8vw, 3.2rem);
color: var(--deco);
opacity: 0.14;
line-height: 1;
letter-spacing: -0.03em;
pointer-events: none;
z-index: 0;
}
.results__card > * {
position: relative;
z-index: 1;
}
.results__card:hover {
transform: translateY(-4px);
box-shadow:
0 12px 40px rgba(192, 101, 72, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.results__card-tag {
font-family: var(--font-body);
font-size: 0.72rem;
font-weight: 600;
/* --muted, not --deco: this labels each card's real category
("אוטומציה עסקית" etc.) — informative text, not decorative filler. */
color: var(--muted);
letter-spacing: 0.09em;
text-transform: uppercase;
}
/* Visible "illustrative example" disclosure — used ONLY on the 3rd results card,
whose copy is placeholder pending a real client quote. An HTML comment alone is
invisible to readers, screen readers and scrapers, so without this the card reads
as a genuine verified case. Deliberately quiet (small, outlined, tertiary grey —
no accent colour, no banner): honest, not alarming. Delete along with the card's
placeholder copy once a real quote lands. Shared by index (.results__card-note)
and results.html (.res-card__note). */
.results__card-note,
.res-card__note {
display: inline-block;
align-self: flex-start;
font-family: var(--font-body);
font-size: 0.66rem;
font-weight: 500;
/* --muted, not --deco: this is a genuine accessibility disclosure
("illustrative example," see the comment above .results__card-note's
original definition) — must stay AA-legible, not just decorative. */
color: var(--muted);
letter-spacing: 0.04em;
border: 1px solid rgba(192, 101, 72, 0.25);
border-radius: 999px;
padding: 0.15rem 0.55rem;
margin-bottom: 0.15rem;
}
.results__card-title {
font-family: var(--font-body);
font-weight: 700;
font-size: clamp(1.1rem, 2.8vw, 1.4rem);
color: var(--ink);
line-height: 1.2;
}
.results__card-body {
font-family: var(--font-body);
font-size: clamp(0.88rem, 2.1vw, 0.98rem);
line-height: 1.9;
color: var(--muted);
}
@media (min-width: 640px) {
.results__stats {
flex-direction: row;
justify-content: center;
gap: clamp(2rem, 6vw, 5rem);
align-items: flex-start;
}
}
/* ============================================================
SERVICES — one card at a time, fade crossfade
Mobile: stacked cards (normal flow, all visible).
Desktop (.anim-on): stacked absolute, GSAP controls opacity.
============================================================ */
.services {
background: var(--bg);
min-height: 100vh;
min-height: 100dvh;
overflow: hidden;
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: clamp(3rem, 6vw, 5rem) 1.25rem;
gap: 3rem;
}
.services__title {
font-family: var(--font-head);
font-weight: 700;
font-size: clamp(1.6rem, 4vw, 2.6rem);
color: var(--headline); /* 2026-07Z-4: section headline, navy retired */
text-align: center;
letter-spacing: -0.02em;
flex-shrink: 0;
position: relative;
z-index: 1;
}
/* Mobile: stacked normal flow */
.services__stage {
display: flex;
flex-direction: column;
gap: 1.25rem;
width: 100%;
max-width: 600px;
position: relative;
z-index: 1;
counter-reset: services-card;
}
.services__card {
/* 2026-07Z-3: glassmorphic card, matching the established Results recipe.
Shared by the plain stacked mobile/tablet fallback AND (via
.ctrl-mode's own border/shadow overrides below) the pinned control-room
presentation — one conversion serves both, per the "Applies to"
inventory in CLAUDE.md's Design System section. */
background: rgba(255, 255, 255, 0.45);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.7);
border-radius: 24px;
padding: 2.5rem 3rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
text-align: right;
counter-increment: services-card;
overflow: hidden;
position: relative;
box-shadow:
0 8px 32px rgba(192, 101, 72, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
/* Ghost index numeral — same motif as .results__card, skipped on desktop
where GSAP already gives each card a distinct crossfade identity. */
.services__card::before {
content: counter(services-card, decimal-leading-zero);
position: absolute;
top: 0.75rem;
left: 1.5rem;
font-family: var(--font-head);
font-weight: 900;
font-size: clamp(2rem, 7vw, 2.6rem);
color: var(--deco);
opacity: 0.14;
line-height: 1;
letter-spacing: -0.03em;
pointer-events: none;
z-index: 0;
}
.services__card > * {
position: relative;
z-index: 1;
}
/* Ghost numeral is hidden only inside the pinned control room (the monitors
carry their own numerals there); the plain stacked band keeps it. */
.services__stage.ctrl-mode .services__card::before {
display: none;
}
.services__card-title {
font-family: var(--font-body);
font-weight: 500;
font-size: clamp(1rem, 2.5vw, 1.2rem);
color: var(--ink);
line-height: 1.35;
}
.services__card-body {
font-family: var(--font-body);
font-weight: 400;
font-size: clamp(0.88rem, 2vw, 0.98rem);
line-height: 1.9;
/* 2026-07Z-3: was a hardcoded pre-redesign #a0a0a0 (never tokenized) —
same latent-bug category as the auto-intro emphasis paragraph: light
gray tuned for the old #111 card, now sitting on a glass/cream card.
Migrated to var(--muted) proactively while converting this card's
background, rather than waiting to be separately reported. */
color: var(--muted);
}
/* Real automation screenshot per card (2026-07Z-6) — content-matched to each
card's pitch (invoicing card → the invoice-reminder flow, etc.), same
files already shown in the desktop control-room monitors. Only shown in
the plain stacked layout (mobile + the 768–1099px band); hidden inside
the pinned control room below, where the 4 side monitors already carry
proof screenshots and an inline image would be redundant/would clash
with the card's type-in and flip choreography. */
.services__card-img {
display: block;
width: 100%;
height: auto;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.6);
}
.services__stage.ctrl-mode .services__card-img {
display: none;
}
/* Per-card WhatsApp CTA (same treatment as automations .auto-card__btn). */
.services__card-btn {
display: inline-block;
align-self: flex-start;
background: var(--accent-active);
color: #ffffff;
font-family: var(--font-body);
font-size: 0.88rem;
font-weight: 600;
padding: 0.55rem 1.3rem;
border-radius: 8px;
text-decoration: none;
margin-top: 0.5rem;
transition: background 0.2s var(--ease);
}
.services__card-btn:hover { background: var(--accent-active-hover); }
/* ── Control room (desktop ≥1100px + .anim-on only; main.js adds .ctrl-mode
to .services__stage). The stage becomes a pinned full-viewport block: four
angled "monitor" panels flank a single centered card; cards present one at
a time. Below 1100px / reduced-motion the plain stacked grid stays, so the
768–1099 band is NOT forced into absolute stacking (that would leave cards
2–4 permanently opacity:0 with no timeline to reveal them). ── */
/* The pinned stage's PARENT section, in control-room mode only (main.js adds
.ctrl-host alongside .ctrl-mode). Two things this must do — see Known Issues:
1. `display: block` — the section is display:flex by default, and ScrollTrigger
silently forces pinSpacing:false whenever the pin's parent is a flex
container. That reserved zero scroll space, so every later section slid up
1:1 under the position:fixed stage instead of waiting below it.
2. `z-index` — .services and .how are both positioned siblings at z-index:auto,
so .how (later in the DOM, opaque background) painted ON TOP of the pinned
stage, and .services' `isolation: isolate` meant no z-index on the stage
itself could ever escape to fix it. Lifting the whole section fixes it at
the right level, and keeps the stage covered even if pin geometry ever
regresses again.
Scoped to ctrl-mode, so the mobile/tablet/reduced-motion flex grid is untouched. */
.services.ctrl-host {
display: block;
z-index: 1;
}
/* `display: block` drops the flex `gap: 3rem` — restore it as a margin so the
title↔stage spacing is visually identical to before. */
.services.ctrl-host .services__title {
margin-bottom: 3rem;
}
.services__stage.ctrl-mode {
display: block;
position: relative;
max-width: none;
width: 100%;
height: 100vh;
padding: 0;
overflow: hidden;
perspective: 1500px;
/* Opaque — while pinned the stage is position:fixed, so without a background
the NEXT section (How We Work) scrolls up behind it and shows through the
gaps between the monitors as you near the pin end. Match the section's
bloom so the atmosphere is preserved.
2026-07Z-3: navy→terracotta, and necessarily so, not just a nice-to-have —
the monitors/center card are glass now (see below), and glass against a
leftover navy-tinted backdrop would read as actively wrong (a translucent
white card floating on dark navy), not just "flat" like the pre-fix
Results pilot. Widened/re-centered vs. a literal copy of the old navy
values so the bloom reaches behind both the l1/r1 monitors and the
center card, not just the left edge. */
background:
radial-gradient(ellipse 75% 65% at 50% 40%, rgba(192, 101, 72, 0.20), transparent 70%),
var(--bg);
}
.ctrl-mode .services__card {
position: absolute;
top: 50%;
left: 50%;
width: min(560px, 46vw);
margin: 0;
opacity: 0;
pointer-events: none;
visibility: hidden;
will-change: transform, opacity;
border: 1px solid rgba(255, 255, 255, 0.7);
/* Was a heavy `0 30px 80px rgba(0,0,0,0.55)` — a dramatic black drop-shadow
tuned for a dark floating card. Against the light glass card + cream/
terracotta backdrop that reads as a heavy, mismatched black smudge, so
it's replaced with a warm glass shadow (same recipe as every other
converted card) at a larger spread to keep the "floating in 3D space"
depth cue the big shadow was originally for. */
box-shadow:
0 20px 60px rgba(192, 101, 72, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.ctrl-mode .services__card.is-live {
pointer-events: auto;
visibility: visible;
}
.ctrl-mode .services__card:hover { border-color: rgba(192, 101, 72, 0.4); }
/* Monitor panels — two per side, angled toward the center card. Light glass
screens (2026-07Z-3, was dark #111 — the "reinterpret as light glass
panels" design decision, CLAUDE.md), faint warm frame, a ghost numeral,
three status bars, and — since 2026-07Z-5 — a real automation screenshot
behind the furniture (was an abstract node-graph canvas). A sheen
highlight still drifts across each on offset periods so no two screens
catch light in sync; the screenshot itself is shown at full clarity/
opacity, not dimmed (see CLAUDE.md — a deliberate reversal of the
original "dimmed atmosphere" spec: these are meant to read as genuine
visible proof content now, not background texture).
Height dropped from the original 34vh (a near-square 21vw×34vh box, sized
for the abstract canvas) to 20vh: real screenshots are landscape
(~1.6–2.2:1 for 3 of the 4), and the shorter/wider box lets object-fit:
cover show most of each diagram instead of cropping half of it away.
Width intentionally left at 21vw — the panel's left/right edge has only
~30px of clearance from the center card at the ctrl-mode breakpoint's
narrow end (1100px viewport), so widening it risks the two colliding at
exactly the boundary where control-mode first turns on; only height
(which has no such constraint) was safe to change here. */
.ctrl-monitor {
position: absolute;
width: 21vw;
height: 20vh;
background: rgba(255, 255, 255, 0.45);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.7);
border-radius: 14px;
overflow: hidden;
pointer-events: none;
box-shadow:
0 8px 32px rgba(192, 101, 72, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.ctrl-monitor--l1 { left: 3vw; top: 18vh; transform: rotateY(30deg) rotateX(2deg); }
.ctrl-monitor--l2 { left: 3vw; bottom: 18vh; transform: rotateY(30deg) rotateX(-2deg); }
.ctrl-monitor--r1 { right: 3vw; top: 18vh; transform: rotateY(-30deg) rotateX(2deg); }
.ctrl-monitor--r2 { right: 3vw; bottom: 18vh; transform: rotateY(-30deg) rotateX(-2deg); }
/* Screenshot — sits behind the numeral/bars (DOM order, no z-index needed:
::after's sheen is z-index:2, __num/__bars are z-index:1, this has none,
so it naturally paints below both). cover crops to fill the panel edge-
to-edge for 3 of the 4 shots, whose aspect ratio is now close to the
panel's own (~1.68:1) after the height change above. */
.ctrl-monitor__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
/* Automation 3 (panel r1) is an unusually wide/short strip (756×157,
~4.8:1) — a 6-step invoice-reminder flow laid out in a single row. cover
would crop it down to ~1 visible node; contain keeps the whole flow
legible at the cost of some empty glass margin above/below. */
.ctrl-monitor--r1 .ctrl-monitor__img {
object-fit: contain;
}
.ctrl-monitor__num {
position: absolute;
top: 0.6rem;
left: 1rem;
font-family: var(--font-head);
font-weight: 900;
font-size: 2.2rem;
color: var(--deco);
opacity: 0.18;
letter-spacing: -0.03em;
z-index: 1;
}
.ctrl-monitor__bars {
position: absolute;
bottom: 1.1rem;
right: 1.1rem;
left: 1.1rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
z-index: 1;
}
.ctrl-monitor__bars span {
display: block;
height: 2px;
/* was rgba(176,176,176,.10) — near-invisible silver on the old dark
screen already, would vanish entirely on a light glass one. Warm
taupe (--deco) at a higher alpha so the status-bar furniture still
reads against the lighter backdrop. */
background: rgba(138, 122, 109, 0.28);
}
.ctrl-monitor__bars span:nth-child(1) { width: 62%; }
.ctrl-monitor__bars span:nth-child(2) { width: 38%; }
.ctrl-monitor__bars span:nth-child(3) { width: 74%; }
.ctrl-monitor::after {
content: '';
position: absolute;
inset: -40%;
/* Sheen stays white/bright (a glass specular highlight is conceptually
background-color-independent, same idiom as the glass recipe's own
inset highlight) — alpha raised from .05 since the old value was tuned
to be barely-there against near-black and would be fully invisible
against a light, already-bright glass panel. */
background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.45) 50%, transparent 58%);
transform: translateX(-55%);
animation: ctrlSheen 11s ease-in-out infinite alternate;
z-index: 2;
}
.ctrl-monitor--l2::after { animation-duration: 14s; animation-delay: -6s; }
.ctrl-monitor--r1::after { animation-duration: 12.5s; animation-delay: -3s; }
.ctrl-monitor--r2::after { animation-duration: 15.5s; animation-delay: -9s; }
@keyframes ctrlSheen {
from { transform: translateX(-55%); }
to { transform: translateX(55%); }
}
/* progress readout under the card */
.ctrl-counter {
position: absolute;
left: 50%;
bottom: 5vh;
transform: translateX(-50%);
font-family: var(--font-head);
font-weight: 700;
font-size: 0.85rem;
letter-spacing: 0.22em;
color: var(--deco);
opacity: 0.7;
direction: ltr;
}
/* first-card self-build scaffolding: frame lines + divider (injected) */
.ctrl-frame {
position: absolute;
background: rgba(138, 122, 109, 0.4);
pointer-events: none;
}
.ctrl-frame--t { top: 0; left: 0; right: 0; height: 1px; transform-origin: 100% 50%; }
.ctrl-frame--b { bottom: 0; left: 0; right: 0; height: 1px; transform-origin: 0% 50%; }
.ctrl-frame--l { top: 0; bottom: 0; left: 0; width: 1px; transform-origin: 50% 0%; }
.ctrl-frame--r { top: 0; bottom: 0; right: 0; width: 1px; transform-origin: 50% 100%; }
.ctrl-divider {
display: block;
height: 1px;
background: rgba(138, 122, 109, 0.32);
margin: 0.15rem 0 0.35rem;
transform-origin: 100% 50%; /* draws right→left, matching RTL reading */
}
@media (max-width: 480px) {
.services__card {
padding: 2rem 1.5rem;
}
}
/* ============================================================
HOW WE WORK — 6-step client process.
Odd steps (1, 3, 5) get the card treatment (#111111, radius);
even steps sit plain against the section background — alternating
weight instead of six identical blocks. Ghost step numerals reuse
the .sec-num visual language (Orbitron, silver, low opacity).
============================================================ */
.how {
background: var(--bg);
padding: clamp(5rem, 10vw, 8rem) 1.25rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
position: relative;
overflow: hidden;
}
.how__title {
font-family: var(--font-head);
font-weight: 700;
font-size: clamp(2rem, 5vw, 3rem);
color: var(--headline); /* 2026-07Z-4: section headline, navy retired */
text-align: center;
letter-spacing: -0.02em;
}
.how__subtitle {
font-family: var(--font-body);
font-size: clamp(0.95rem, 2.5vw, 1.1rem);
color: #a0a0a0;
text-align: center;
line-height: 1.75;
max-width: 56ch;
margin: 0 auto 1rem;
}
.how__list {
list-style: none;
width: 100%;
max-width: 780px;
display: flex;
flex-direction: column;
gap: 1.25rem;
margin: 0;
padding: 0;
}
.how__step {
display: flex;
flex-direction: row-reverse;
align-items: flex-start;
gap: 1.5rem;
border-radius: 20px;
}
.how__step:nth-child(odd) {
background: #111111;
padding: 1.75rem 2rem;
}
.how__step:nth-child(even) {
padding: 0 0.25rem;
}
.how__step-num {
flex-shrink: 0;
font-family: var(--font-head);
font-weight: 900;
font-size: clamp(2.2rem, 6vw, 3rem);
color: #b0b0b0;
opacity: 0.4;
line-height: 1;
letter-spacing: -0.02em;
direction: ltr;
}
.how__step-body {
flex: 1;
text-align: right;
}
.how__step-title {
font-family: var(--font-body);
font-weight: 700;
font-size: clamp(1.05rem, 2.6vw, 1.25rem);
color: var(--ink);
margin-bottom: 0.4rem;
}
.how__step-text {
font-family: var(--font-body);
font-size: clamp(0.9rem, 2.1vw, 1rem);
line-height: 1.8;
color: var(--muted);
}
/* ============================================================
BOOK A CALL
============================================================ */
.book {
background: var(--bg);
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 3rem 1.25rem;
position: relative;
overflow: hidden;
}
.book__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
max-width: 640px;
width: 100%;
text-align: center;
}
.book__line {
width: 80px;
height: 1px;
background: #b0b0b0;
}
.book__title {
font-family: var(--font-body);
font-weight: 300;
font-size: clamp(3.2rem, 11vw, 6.5rem);
color: var(--headline); /* 2026-07Z-4: section headline, navy retired — shared by both #book-mid and the final #book (verbatim class reuse) */
letter-spacing: -0.02em;
line-height: 1.05;
}
.book__body {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.book__body p {
font-family: var(--font-body);
font-size: clamp(0.95rem, 2.5vw, 1.1rem);
color: #a0a0a0;
line-height: 1.75;
}
/* 2026-07Z-4 diagnosis (Sagiv reported this as "broken/unstyled," so this
was actually checked, not just recolored on faith): it's NOT a missing
class or a specificity conflict — `.book__cta` was always a deliberate,
different component: a transparent/white-outline "ghost" button (fill on
hover only), while every other CTA on the site is a solid terracotta
fill. It was excluded from the earlier site-wide button pass on purpose
(2026-07Z-3 note, since removed) on the theory that a different-but-
intentional style wasn't the same bug as a stale navy fill. That
reasoning held at the time but doesn't anymore: the ghost style's white-
on-transparent look was designed for the still-fully-dark Book section
background, and as --bg's root value drifted the whole page toward
cream, a white outline on a page that's no longer reliably dark reads
as exactly what Sagiv called it — washed out, close to invisible, not
"a different but valid style." Per explicit instruction this round, made
to match the working terracotta button exactly rather than preserving
the ghost pattern — same component as `.hero__cta`/`.about-cta__btn`/etc. */
.book__cta {
display: inline-block;
padding: 1rem 3.2rem;
background: var(--accent-active);
color: #ffffff;
font-family: var(--font-body);
font-weight: 500;
font-size: clamp(0.95rem, 2.5vw, 1.05rem);
text-decoration: none;
border: none;
border-radius: 4px;
margin-top: 0.25rem;
transition: background 0.3s var(--ease), transform 0.3s var(--ease-hover);
}
.book__cta:hover,
.book__cta:focus-visible {
background: var(--accent-active-hover);
transform: scale(1.03);
outline: none;
}
/* ---------- Two-action row (2026-08B): "קבע שיחה" + WhatsApp community
join, deliberately EQUAL visual weight per Sagiv — both are the same
size/padding/font as .book__cta, side by side on desktop, stacked full-
width on mobile. No same-weight multi-button precedent existed
elsewhere on the site to reuse, so this is a new, minimal pattern:
equal prominence is carried by identical size, while an outlined
(rather than solid) fill + the WhatsApp glyph carry the "this leads
somewhere different" distinction — without introducing WhatsApp's
brand green, which would break the cream/terracotta/navy-black-only
palette rule. Shared by both #book-mid and the final #book (same
verbatim-class-reuse pattern .book__title/.book__body already use). */
.book__actions {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 1rem;
width: 100%;
}
.book__cta--wa {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
background: transparent;
color: var(--accent-active);
border: 1.5px solid var(--accent-active);
}
.book__cta--wa:hover,
.book__cta--wa:focus-visible {
background: var(--accent-active);
color: #ffffff;
outline: none;
}
.book__cta--wa svg {
flex-shrink: 0;
}
@media (max-width: 767px) {
.book__actions {
flex-direction: column;
}
.book__actions .book__cta {
width: 100%;
}
}
.book__note {
font-family: var(--font-body);
font-size: 0.75rem;
color: #b0b0b0;
letter-spacing: 0.04em;
}
/* ============================================================
FOOTER
============================================================ */
.footer {
background: #0a0a0a;
border-top: 1px solid #b0b0b0;
padding: 1.75rem 1.25rem;
}
.footer__inner {
max-width: 1080px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.footer__row {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.25rem;
}
.footer__logo {
height: 60px;
width: auto;
object-fit: contain;
filter: grayscale(1) brightness(1.45) contrast(0.8);
}
.footer__copy {
font-family: var(--font-body);
font-size: 0.8rem;
color: #8a8a8a;
text-align: center;
}
.footer__socials {
display: flex;
align-items: center;
gap: 1.25rem;
}
.footer__social {
display: flex;
align-items: center;
color: #8a8a8a;
transition: color 0.3s var(--ease), transform 0.3s var(--ease-hover);
}
.footer__social:hover {
color: #ffffff;
transform: translateY(-2px);
}
.footer__contact {
font-family: var(--font-body);
font-size: 0.72rem;
color: #8a8a8a;
text-align: center;
direction: ltr;
unicode-bidi: embed;
}
@media (min-width: 768px) {
.footer__row {
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 0;
}
}
/* ============================================================
MOTION — desktop only (enabled via .anim-on on )
Tresmares-style: staggered fade + slide-up intro reveal.
On phones / reduced-motion, .anim-on is never added, so
everything renders static and fully visible.
============================================================ */
/* Hero animated SVG line — draws left to right on page load (desktop only) */
.hero__line {
display: none;
margin: -0.75rem 0;
overflow: visible;
}
.anim-on .hero__line {
display: block;
}
.hero__line-path {
stroke-dasharray: 200;
stroke-dashoffset: 200;
}
.anim-on .hero__line-path {
animation: drawHeroLine 1.5s cubic-bezier(0.16, 1, 0.3, 1) 1s forwards;
}
@keyframes drawHeroLine {
to { stroke-dashoffset: 0; }
}
@keyframes heroReveal {
from {
opacity: 0;
transform: translateY(28px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.anim-on .footer__logo {
animation: logo-shimmer 5s ease-in-out infinite;
}
.anim-on .hero__title {
opacity: 0;
animation: heroReveal 1.5s var(--ease) 0.45s forwards;
}
.anim-on .hero__subtitle {
opacity: 0;
animation: heroReveal 1.5s var(--ease) 0.7s forwards;
}
.anim-on .hero__cta {
opacity: 0;
animation: heroReveal 1.5s var(--ease) 0.95s forwards;
}
/* Reusable scroll-reveal for future sections:
mark any element with data-reveal; main.js adds .is-visible
when it scrolls into view (desktop only). */
.anim-on [data-reveal] {
opacity: 0;
transform: translateY(52px);
transition: opacity 1.5s var(--ease), transform 1.5s var(--ease);
will-change: opacity, transform;
}
.anim-on [data-reveal].is-visible {
opacity: 1;
transform: none;
}
/* ============================================================
MOBILE-SAFE SCROLL REVEAL — separate track from [data-reveal].
Lightweight fade + rise, no GSAP, no pinning. Active whenever
.anim-on is absent (phones, and desktop with reduced motion).
Neutralized under .anim-on so it never fights GSAP-driven
elements that already have their own desktop treatment.
============================================================ */
[data-reveal-m] {
opacity: 0;
transform: translateY(18px);
transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
will-change: opacity, transform;
}
[data-reveal-m].is-visible {
opacity: 1;
transform: none;
}
.anim-on [data-reveal-m] {
opacity: 1;
transform: none;
transition: none;
}
@media (prefers-reduced-motion: reduce) {
[data-reveal-m] {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* ============================================================
TRAILING DOT — desktop + fine pointer only. The native cursor
stays as-is; this dot follows it with a smooth lag. Created and
driven by main.js. 2026-07Z-4: was navy (a confirmed exception in
an earlier round — "isolated secondary-accent use") — Sagiv's
screenshots kept showing it (near the top-left simply because
that's where his cursor was resting each time, not a deliberate
section marker as first suspected) and it's now in scope of the
"navy retires completely, anywhere" decision, superseding that
earlier exception. Terracotta now, matching every other accent use.
============================================================ */
.cursor-dot {
position: fixed;
top: 0;
left: 0;
width: 9.6px;
height: 9.6px;
border-radius: 50%;
background: var(--accent-active);
pointer-events: none;
z-index: 9999;
transform: translate(-50%, -50%) scale(1);
transition: opacity 0.25s ease, transform 0.2s var(--ease),
background 0.2s var(--ease);
}
/* Subtle grow when the mouse is over a link/button */
.cursor-dot.is-hover {
transform: translate(-50%, -50%) scale(1.7);
background: var(--accent-active-hover);
}
/* ============================================================
WhatsApp Floating Button
============================================================ */
.wa-btn {
position: fixed;
bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
right: 1.5rem;
z-index: 9998;
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, #6a6a6a, #c8c8c8, #8a8a8a, #d6d6d6, #6a6a6a);
background-size: 300% 300%;
background-position: 0% 50%;
color: #111;
box-shadow: 0 4px 16px rgba(180, 180, 180, 0.18);
text-decoration: none;
animation: wa-silver-shimmer 5s ease-in-out infinite;
transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.wa-btn:hover {
transform: scale(1.08);
box-shadow: 0 6px 20px rgba(200, 200, 200, 0.28);
}
@keyframes wa-silver-shimmer {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.wa-btn__tip {
position: absolute;
right: calc(100% + 10px);
top: 50%;
transform: translateY(-50%);
background: #111;
color: #fff;
font-family: var(--font-body);
font-size: 0.8rem;
white-space: nowrap;
padding: 0.3rem 0.65rem;
border-radius: 6px;
pointer-events: none;
opacity: 0;
transition: opacity 0.2s;
}
.wa-btn:hover .wa-btn__tip {
opacity: 1;
}
@keyframes logo-shimmer {
0%, 100% { filter: grayscale(1) brightness(1.35) contrast(0.82); }
45% { filter: grayscale(1) brightness(1.7) contrast(0.72); }
}
/* ============================================================
Newsletter Popup
============================================================ */
.nl-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 9990;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.35s var(--ease);
}
.nl-overlay.is-open {
opacity: 1;
pointer-events: auto;
}
.nl-modal {
position: relative;
background: #111111;
border: 1px solid rgba(176, 176, 176, 0.28);
border-radius: 24px;
padding: 2.75rem 2.5rem 2.25rem;
max-width: 460px;
width: 100%;
transform: scale(0.94) translateY(12px);
transition: transform 0.35s var(--ease);
text-align: right;
}
.nl-overlay.is-open .nl-modal {
transform: scale(1) translateY(0);
}
.nl-close {
position: absolute;
top: 1.1rem;
right: 1.25rem;
background: none;
border: none;
color: #A0A0A0;
font-size: 1.1rem;
line-height: 1;
padding: 0;
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: color 0.15s;
}
.nl-close:hover {
color: #ffffff;
}
.nl-headline {
font-family: var(--font-body);
font-weight: 700;
font-size: clamp(1.4rem, 4vw, 1.9rem);
color: #ffffff;
letter-spacing: -0.01em;
margin: 0 0 0.75rem;
}
.nl-sub {
font-family: var(--font-body);
font-size: 0.93rem;
color: #A0A0A0;
line-height: 1.8;
margin: 0 0 1.75rem;
}
.nl-form {
display: flex;
flex-direction: column;
gap: 0.875rem;
}
.nl-input {
width: 100%;
background: #1a1a1a;
border: 1px solid #2e2e2e;
border-radius: 10px;
padding: 0.8rem 1rem;
color: #ffffff;
font-family: var(--font-body);
font-size: 0.95rem;
text-align: right;
outline: none;
transition: border-color 0.2s;
}
.nl-input::placeholder {
color: #8a8a8a;
}
.nl-input:focus {
border-color: #B0B0B0;
}
.nl-submit {
width: 100%;
background: var(--accent-active);
color: #ffffff;
border: none;
border-radius: 12px;
padding: 0.85rem 1rem;
font-family: var(--font-body);
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
margin-top: 0.25rem;
transition: background 0.2s var(--ease);
}
.nl-submit:hover {
background: var(--accent-active-hover);
}
.nl-success {
font-family: var(--font-body);
font-size: 1rem;
color: #ffffff;
text-align: center;
padding: 1.5rem 0 0.5rem;
margin: 0;
}
.nl-error {
font-family: var(--font-body);
font-size: 0.82rem;
color: #ff6b6b;
text-align: right;
margin-top: -0.25rem;
}
/* Honeypot field — off-screen, invisible, never shown to real users */
.nl-hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
tabindex: -1;
}
/* ============================================================
SITE SUMMARY — factual anchor for AI/AEO crawlers.
Visually subtle (small, dark-on-dark) but real DOM text.
============================================================ */
.site-summary {
background: var(--bg);
padding: 0 1.25rem 2.5rem;
display: flex;
justify-content: center;
}
.site-summary__text {
font-family: var(--font-body);
font-size: 0.75rem;
color: #8a8a8a;
max-width: 60ch;
margin-left: auto;
margin-right: auto;
line-height: 1.75;
text-align: center;
}
/* ============================================================
FAQ
============================================================ */
.faq {
background: var(--bg);
padding: clamp(5rem, 10vw, 8rem) 1.25rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 2.5rem;
position: relative;
overflow: hidden;
}
.faq__title {
font-family: var(--font-head);
font-weight: 700;
font-size: clamp(2rem, 5vw, 3rem);
color: var(--headline); /* 2026-07Z-4: section headline, navy retired */
text-align: center;
letter-spacing: -0.02em;
}
.faq__list {
width: 100%;
max-width: 780px;
display: flex;
flex-direction: column;
row-gap: 0.85rem;
}
.faq__item {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(176, 176, 176, 0.1);
border-radius: 16px;
padding: 1.6rem 1.75rem;
}
/* Mobile: native / accordion — closed by default, tap to
expand. Desktop forces every item open (see media query below), matching
the always-expanded look the design already had there. */
.faq__q-wrap {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
cursor: pointer;
list-style: none;
}
.faq__q-wrap::-webkit-details-marker {
display: none;
}
.faq__q {
font-family: var(--font-body);
font-weight: 700;
font-size: clamp(1rem, 2.8vw, 1.15rem);
color: var(--ink);
text-align: right;
}
.faq__chevron {
flex-shrink: 0;
width: 18px;
height: 18px;
color: #b0b0b0;
transition: transform 0.25s var(--ease);
}
.faq__item[open] .faq__chevron {
transform: rotate(180deg);
}
.faq__a-wrap {
margin-top: 0.9rem;
}
.faq__a {
font-family: var(--font-body);
font-size: clamp(0.88rem, 2.1vw, 0.98rem);
line-height: 1.9;
color: var(--muted);
text-align: right;
}
@media (min-width: 768px) {
.faq__item > .faq__a-wrap {
display: block !important;
}
.faq__chevron {
display: none;
}
.faq__q-wrap {
cursor: default;
}
}
/* ============================================================
NAVBAR — slim bar on mobile (logo + hamburger → sheet),
full inline links on desktop (min-width: 768px).
============================================================ */
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 56px;
background: rgba(13, 13, 13, 0.85);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(176, 176, 176, 0.1);
z-index: 900;
display: flex;
align-items: center;
transform: translateY(0);
transition: transform 0.35s var(--ease);
}
html {
scroll-padding-top: 56px;
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
@media (min-width: 768px) {
html {
scroll-padding-top: 70px;
}
.navbar {
height: 70px;
}
}
.navbar.is-hidden {
transform: translateY(-100%);
}
.navbar__inner {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 1.25rem;
display: flex;
align-items: center;
justify-content: space-between;
direction: ltr; /* logo physical-left, links physical-right, overrides page RTL */
}
@media (min-width: 768px) {
.navbar__inner {
padding: 0 2rem;
}
}
.navbar__logo-link {
flex-shrink: 0;
display: flex;
align-items: center;
text-decoration: none;
}
.navbar__logo {
height: 32px;
width: auto;
object-fit: contain;
filter: grayscale(1) brightness(1.45) contrast(0.8);
}
@media (min-width: 768px) {
.navbar__logo {
height: 40px;
}
}
.navbar__links {
list-style: none;
display: none;
align-items: center;
gap: 1.75rem;
margin: 0;
padding: 0;
direction: rtl; /* ראשי (DOM first) rightmost, בוא נדבר (DOM last) leftmost */
}
@media (min-width: 768px) {
.navbar__links {
display: flex;
}
}
/* ---------- Mobile hamburger toggle ---------- */
.navbar__toggle {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: none;
border: none;
color: #ffffff;
cursor: pointer;
padding: 0;
}
@media (min-width: 768px) {
.navbar__toggle {
display: none;
}
}
.navbar__toggle-icon {
position: relative;
width: 20px;
height: 1.5px;
background: currentColor;
transition: background 0.2s var(--ease);
}
.navbar__toggle-icon::before,
.navbar__toggle-icon::after {
content: '';
position: absolute;
left: 0;
width: 20px;
height: 1.5px;
background: currentColor;
transition: transform 0.25s var(--ease);
}
.navbar__toggle-icon::before {
top: -6px;
}
.navbar__toggle-icon::after {
top: 6px;
}
.navbar__toggle[aria-expanded="true"] .navbar__toggle-icon {
background: transparent;
}
.navbar__toggle[aria-expanded="true"] .navbar__toggle-icon::before {
transform: translateY(6px) rotate(45deg);
}
.navbar__toggle[aria-expanded="true"] .navbar__toggle-icon::after {
transform: translateY(-6px) rotate(-45deg);
}
/* ---------- Mobile sheet ---------- */
.navbar__sheet {
position: fixed;
top: 56px;
left: 0;
right: 0;
bottom: 0;
background: rgba(10, 10, 10, 0.98);
backdrop-filter: blur(10px);
z-index: 899;
display: flex;
flex-direction: column;
padding: 1rem 1.25rem 2rem;
transform: translateY(-16px);
opacity: 0;
pointer-events: none;
transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
overflow-y: auto;
}
.navbar__sheet.is-open {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.navbar__sheet-link {
font-family: var(--font-body);
font-size: 1.05rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.85);
text-decoration: none;
padding: 1rem 0.1rem;
border-bottom: 1px solid rgba(176, 176, 176, 0.1);
text-align: right;
}
.navbar__sheet-link--active {
color: #ffffff;
}
.navbar__sheet-link--cta {
margin-top: 1.25rem;
text-align: center;
background: var(--accent-active);
/* Override the base .navbar__sheet-link's inherited rgba(255,255,255,.85) —
verified via real pixel sampling that 85%-opacity white composited over
--accent-active only measures ~4.31:1, under the 4.5:1 AA threshold (the
old navy background had enough headroom to absorb that 15% loss; this
more saturated terracotta doesn't). Full-opacity white matches every
other converted button and clears AA the same ~5.2:1 they measure. */
color: #ffffff;
border-radius: 10px;
border-bottom: none;
padding: 0.95rem 1rem;
}
@media (min-width: 768px) {
.navbar__sheet {
display: none;
}
}
.navbar__link {
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
position: relative;
white-space: nowrap;
transition: color 0.2s var(--ease);
}
.navbar__link::after {
content: '';
position: absolute;
bottom: -3px;
left: 0;
width: 100%;
height: 1px;
background: #ffffff;
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.25s var(--ease);
}
.navbar__link:hover {
color: #ffffff;
}
.navbar__link:hover::after {
transform: scaleX(1);
}
/* Active / current-page link */
.navbar__link--active {
color: #ffffff;
}
.navbar__link--active::after {
transform: scaleX(1);
}
/* ============================================================
PAGE-END FLOW — flex wrapper around .book + .faq
Allows CSS order to reposition .faq above .book at every width
without duplicating any DOM content. DOM order is .book then
.faq (06 then 05); this order swap is what makes FAQ render
first everywhere. Previously this was scoped to the desktop
media query only, leaving mobile on raw DOM order (book before
faq) — fixed 2026-07 to apply unconditionally.
============================================================ */
.page-end-flow {
display: flex;
flex-direction: column;
}
.page-end-flow .faq {
order: -1;
}
/* ── Hero iris ─────────────────────────────────────────────────────── */
.hero__iris {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: min(56vmin, 520px);
height: min(56vmin, 520px);
opacity: 0.13;
pointer-events: none;
z-index: 0;
}
/* ── Call-booking popup ────────────────────────────────────────────── */
.cb-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 9991;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.35s var(--ease);
}
.cb-overlay.is-open {
opacity: 1;
pointer-events: auto;
}
.cb-modal {
position: relative;
background: #111111;
border: 1px solid rgba(176, 176, 176, 0.28);
border-radius: 24px;
padding: 2.75rem 2.5rem 2.25rem;
max-width: 440px;
width: 100%;
transform: scale(0.94) translateY(12px);
transition: transform 0.35s var(--ease);
text-align: right;
}
.cb-overlay.is-open .cb-modal {
transform: scale(1) translateY(0);
}
.cb-close {
position: absolute;
top: 1.1rem;
right: 1.25rem;
background: none;
border: none;
color: #A0A0A0;
font-size: 1.1rem;
line-height: 1;
padding: 0;
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: color 0.15s;
}
.cb-close:hover { color: #ffffff; }
.cb-headline {
font-family: var(--font-body);
font-weight: 700;
font-size: clamp(1.3rem, 4vw, 1.8rem);
color: #ffffff;
letter-spacing: -0.01em;
margin: 0 0 0.75rem;
}
.cb-body {
font-family: var(--font-body);
font-size: 0.93rem;
color: #A0A0A0;
line-height: 1.8;
margin: 0 0 1.75rem;
}
.cb-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.cb-btn {
display: block;
background: var(--accent-active);
color: #ffffff;
font-family: var(--font-body);
font-size: 0.95rem;
font-weight: 600;
padding: 0.8rem 1.25rem;
border-radius: 10px;
text-decoration: none;
text-align: center;
transition: background 0.2s var(--ease);
}
.cb-btn:hover { background: var(--accent-active-hover); }
.cb-dismiss {
background: none;
border: none;
color: #8a8a8a;
font-family: var(--font-body);
font-size: 0.85rem;
cursor: pointer;
padding: 0.3rem 0;
text-align: center;
transition: color 0.15s;
width: 100%;
}
.cb-dismiss:hover { color: #A0A0A0; }
/* ============================================================
WhatsApp lead-capture modal
============================================================ */
.wam-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 9992;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.35s var(--ease);
}
.wam-overlay.is-open {
opacity: 1;
pointer-events: auto;
}
.wam-modal {
position: relative;
background: #111111;
border: 1px solid rgba(176, 176, 176, 0.28);
border-radius: 24px;
padding: 2.75rem 2.5rem 2.25rem;
max-width: 460px;
width: 100%;
transform: scale(0.94) translateY(12px);
transition: transform 0.35s var(--ease);
text-align: right;
}
.wam-overlay.is-open .wam-modal {
transform: scale(1) translateY(0);
}
.wam-close {
position: absolute;
top: 1.1rem;
right: 1.25rem;
background: none;
border: none;
color: #A0A0A0;
font-size: 1.1rem;
line-height: 1;
padding: 0;
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: color 0.15s;
}
.wam-close:hover { color: #ffffff; }
.wam-headline {
font-family: var(--font-body);
font-weight: 700;
font-size: clamp(1.4rem, 4vw, 1.9rem);
color: #ffffff;
letter-spacing: -0.01em;
margin: 0 0 0.75rem;
}
.wam-sub {
font-family: var(--font-body);
font-size: 0.93rem;
color: #A0A0A0;
line-height: 1.8;
margin: 0 0 1.75rem;
}
.wam-form {
display: flex;
flex-direction: column;
gap: 0.875rem;
}
.wam-field {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.wam-label {
font-family: var(--font-body);
font-size: 0.82rem;
font-weight: 600;
color: #ffffff;
text-align: right;
letter-spacing: 0.005em;
}
.wam-req {
color: #B0B0B0;
font-weight: 700;
}
.wam-optional {
color: #8a8a8a;
font-weight: 400;
font-size: 0.78rem;
}
.wam-reqnote {
font-family: var(--font-body);
font-size: 0.76rem;
color: #8a8a8a;
text-align: right;
margin: -0.25rem 0 0;
}
.wam-reqnote span { color: #B0B0B0; }
/* Cloudflare Turnstile widget slot — framed like the surrounding form inputs
(same bg/border/radius as .nl-input/.wam-input) so the cross-origin iframe
reads as a contained field in the form, not a mismatched box on the page.
Reserves height up front to avoid layout shift when it renders. */
.ts-widget {
margin: 0.35rem 0 0.15rem;
min-height: 65px;
display: flex;
align-items: center;
justify-content: center;
padding: 6px;
background: #1a1a1a;
border: 1px solid #2e2e2e;
border-radius: 10px;
overflow: hidden;
}
.wam-input,
.wam-textarea {
width: 100%;
background: #1a1a1a;
border: 1px solid #2e2e2e;
border-radius: 10px;
padding: 0.8rem 1rem;
color: #ffffff;
font-family: var(--font-body);
font-size: 0.95rem;
text-align: right;
outline: none;
transition: border-color 0.2s;
}
.wam-textarea {
resize: vertical;
min-height: 68px;
line-height: 1.6;
}
.wam-input::placeholder,
.wam-textarea::placeholder {
color: #8a8a8a;
}
.wam-input:focus,
.wam-textarea:focus {
border-color: #B0B0B0;
}
.wam-submit {
width: 100%;
background: var(--accent-active);
color: #ffffff;
border: none;
border-radius: 12px;
padding: 0.85rem 1rem;
font-family: var(--font-body);
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
margin-top: 0.25rem;
transition: background 0.2s var(--ease);
}
.wam-submit:hover { background: var(--accent-active-hover); }
.wam-submit:disabled {
opacity: 0.7;
cursor: default;
}
.wam-error {
font-family: var(--font-body);
font-size: 0.82rem;
color: #ff6b6b;
text-align: right;
margin-top: -0.25rem;
}
@media (min-width: 768px) {
/* 2-column grid for FAQ items on desktop */
.faq__list {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 4rem;
max-width: 1100px;
align-items: start;
}
/* Card-style FAQ items sit in a 2-col grid with row spacing */
.faq__list {
row-gap: 1rem;
}
}
/* ============================================================
MOBILE TYPE SCALE — real hierarchy for small screens, not a
linear shrink of the desktop clamp() ramp. Widens the gap
between hero/section headings and body copy, and moves
section titles to the RTL right edge instead of centering
them (the card content below each title is already right-
aligned — only the heading above it was centered).
Scoped to <768px so desktop's approved scale is untouched.
============================================================ */
@media (max-width: 767px) {
.hero__title {
font-size: 2.75rem;
line-height: 1.1;
}
.hero__subtitle {
font-size: 1.05rem;
}
.about__title {
font-size: 1.7rem;
}
.results__title,
.services__title,
.faq__title,
.how__title {
align-self: stretch;
font-size: 1.7rem;
text-align: right;
}
.how__subtitle {
align-self: stretch;
text-align: right;
margin-left: 0;
margin-right: 0;
}
/* Even (plain, non-card) steps lose their own right-padding on mobile
since the section already has consistent side padding. */
.how__step:nth-child(even) {
padding: 0;
}
.how__step:nth-child(odd) {
padding: 1.5rem 1.5rem;
}
/* Comfortable reading size for body/card copy — was bottoming
out around 14px at the clamp() minimum. */
.about__text,
.results__card-body,
.services__card-body,
.faq__a,
.how__step-text {
font-size: 0.98rem;
}
}
/* ============================================================
CINEMATIC ATMOSPHERE — static light blooms.
Extra background layers on the existing flat --bg sections
(no new elements, no stacking-context changes); the fixed
grain overlay (body::before) dithers any banding.
2026-07Z-4: was "navy family only" (#1B2A4E/#26396B/#2F4785) — per the
"navy retires completely, anywhere" decision, the remaining 6 section
rules below (.hero/.about/.founder/.how/.book/.faq) are now terracotta,
same geometry/opacity, matching the rgb substitution pattern already
used for .results (pilot) and .services (2026-07Z-3): both navy shades
collapse to the single --accent family (192,101,72), alphas unchanged
from their navy originals (straight swap, no re-tuning — matches the
.services precedent, not the .results pilot's separate opacity cut).
NOT touched: the 4 secondary-page hero rules further below
(.about-hero/.res-hero/.auto-hero/.faqp-hero) — those serve the 4
archived, no-longer-deployed secondary pages, entirely outside this
redesign's scope (index.html only, throughout every round so far). */
.hero {
background:
radial-gradient(ellipse 85% 62% at 50% -12%, rgba(192, 101, 72, 0.30), transparent 68%),
radial-gradient(ellipse 55% 40% at 10% 92%, rgba(192, 101, 72, 0.16), transparent 70%),
var(--bg);
}
.about {
background:
radial-gradient(ellipse 52% 58% at 100% 15%, rgba(192, 101, 72, 0.22), transparent 70%),
var(--bg);
}
.results {
/* 2026-07Z: navy bloom → terracotta highlight bloom (same ellipse
geometry/position, new warm palette — first section converted as
part of the pilot, see CLAUDE.md). Opacity brought down from the
navy original's 0.20 to 0.14 since terracotta is a more saturated
mid-tone than navy-on-black was — tune further after live review.
This mobile (default-flow) sizing/position already reads as strong,
pronounced glass behind the cards — confirmed via live screenshot —
because the card sits proportionally close to the bloom's bottom-
anchored hot zone in the section's natural (unpinned) content height.
Kept as the mobile rule; desktop gets its own override below. */
background:
radial-gradient(ellipse 70% 50% at 50% 110%, rgba(192, 101, 72, 0.14), transparent 70%),
var(--bg);
}
@media (min-width: 768px) {
/* Desktop-specific bloom (2026-07Z, glass-contrast fix). On desktop this
section is a GSAP scrub/pin, so its rendered height is driven by the
pin's own math, not organic content flow — the mobile rule's bottom-
anchored ellipse (center 110%, i.e. below the section) barely reaches
the card column at all here (measured live: at 1440x900 the cards
span ~43%–92% of section height, while the mobile ellipse's opacity
falls to 0 well above that band), so cards rendered against essentially
flat cream — the exact "subtly, not pronounced" gap Sagiv flagged.
This override re-centers the same terracotta bloom directly behind the
stats+card column (measured center ≈68% of section height) with a
wider/taller ellipse (sized to comfortably span the full card cluster)
and roughly double the opacity, so there's real color/texture for the
cards' backdrop-filter to actually blur against — matching the mobile
rule's effective strength rather than its literal numbers. */
.results {
background:
radial-gradient(ellipse 62% 58% at 50% 68%, rgba(192, 101, 72, 0.30), transparent 72%),
var(--bg);
}
}
.founder {
background:
radial-gradient(ellipse 70% 50% at 50% -8%, rgba(192, 101, 72, 0.20), transparent 70%),
var(--bg);
}
.services {
/* 2026-07Z-3: navy→terracotta, alongside the control room's glass
conversion (.services__card/.ctrl-monitor) — this is the section's
base/mobile-tablet-fallback bloom (the pinned ctrl-mode stage has its
own separate, stronger bloom above, for when it's covering this as an
opaque pinned overlay). Left navy here while the cards went glass would
have put translucent white cards over a dark, mismatched backdrop. */
background:
radial-gradient(ellipse 60% 55% at 0% 20%, rgba(192, 101, 72, 0.18), transparent 70%),
var(--bg);
}
.how {
background:
radial-gradient(ellipse 55% 45% at 100% 70%, rgba(192, 101, 72, 0.18), transparent 70%),
var(--bg);
}
.book {
background:
radial-gradient(ellipse 62% 55% at 50% 36%, rgba(192, 101, 72, 0.30), transparent 72%),
radial-gradient(ellipse 110% 40% at 50% 110%, rgba(192, 101, 72, 0.14), transparent 70%),
var(--bg);
}
.faq {
background:
radial-gradient(ellipse 50% 40% at 0% 0%, rgba(192, 101, 72, 0.14), transparent 70%),
var(--bg);
}
/* Secondary-page heroes — their layout styles live in each page's own
inline