/* ==========================================================================
Submarine Max Pro — landing page
Two independent Figma canvases (desktop 1728x15162, mobile 440x11658).
Coordinates below are taken verbatim from Figma; nothing here is eyeballed.
========================================================================== */
/* ---------- Fonts (the exact families used in the design) ---------- */
/* ---------- Stage / canvas ---------------------------------------------
The canvas is rendered at its intrinsic Figma size and scaled to the
viewport. transform-origin is top-left because Figma coordinates are
measured from the left edge even in an RTL design.
--------------------------------------------------------------------- */
.svl-root {
background: #fff;
overflow-x: hidden;
width: 100%;
}
/* Reveal-when-ready (10/2026). The webfonts land a second or two after first
paint on a live network, and the two MEASURED blocks (the questions, the
thank-you paragraph) re-measure taller in the real face than in the fallback,
which makes the page grow and the content below the fold jump once. Keep the
page hidden until the fonts are in and the final fit() has run (front.js adds
.svl-ready), so that one-time growth happens off-screen.
Safety net: the keyframe reveals the page by itself after 3s even if the
script never runs, so a font that never resolves — or JS that is off — can
never leave the page blank. */
.svl-root { opacity: 0; }
.svl-root.svl-ready { opacity: 1; transition: opacity 0.3s ease; }
.svl-root:not(.svl-ready) { animation: svl-reveal-fallback 0.01s linear 3s forwards; }
@keyframes svl-reveal-fallback { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
.svl-root.svl-ready { transition: none; }
}
/* Headings carry the page s outline for a screen reader and for Google, but
the design decides how they look. Every heading here is an absolutely
positioned node whose font is set by its own rule, so the UA defaults —
margin, size, weight — would only move things. Reset them once, here, and
promoting a
to an
costs nothing visually. */
/* :where(), NOT :is(). This rule has to beat the browser's defaults for a
heading and lose to every rule in this file that styles one. :is() takes
the specificity of its argument, which made this (0,1,1) — higher than
`.d-s9__title` at (0,1,0) — so promoting a
to an
silently threw
away that title's size, weight and colour and left it inheriting the
theme's body text. Every one of the thirty headings on the page went that
way at once. :where() contributes nothing, so a UA default loses to it and
a design rule beats it. */
.svl-root :where( h1, h2, h3, h4, h5, h6 ) {
margin: 0;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
color: inherit;
}
/* The FAQ question is a button inside its own heading. The heading is only a
landmark — the button keeps the whole width and all of the styling. */
.svl-faq__head { margin: 0; font: inherit; display: block; }
.svl-stage {
position: relative;
width: 100%;
overflow: hidden;
/* Height is set by JS to designH * scale, since a transform does not
contribute to layout. */
}
/* The canvas is anchored explicitly rather than left in flow: it is wider than
its stage, and in an RTL context an over-wide box overflows to the LEFT, which
would push the whole design off-screen. Its own direction is LTR because Figma
coordinates are measured from the left edge in every design, RTL included —
the text nodes carry their own dir="rtl". */
.svl-canvas {
position: absolute;
left: 0;
top: 0;
direction: ltr;
transform-origin: top left;
background: #fff;
/* Set by JS: transform: scale(n), and left, to centre it once the scale caps. */
}
/* Past the scale cap the canvas is narrower than the window, which would leave a
white strip down each side wherever a section is not white. Only the full-bleed
background bands need to cover them — everything between those bands is white in
the design already — so those bands are widened by exactly the shortfall.
--svl-bleed-x is 1 until the cap bites, which makes this rule a no-op below it. */
/* Scoped to .svl-stage purely for specificity: a bare .svl-bleed--c ties with the
band's own .m-band-top rule, which is declared later in this file and therefore
won its transform back — the two centred bands then sat inside the canvas and
left a white strip down each side of the page at every width past the cap. */
.svl-stage .svl-bleed { transform: scaleX( var( --svl-bleed-x, 1 ) ); }
/* Bands that already carry a transform have to keep it; scaleX alone would drop
the centring translate and shove the band half its width to the right. */
.svl-stage .svl-bleed--c { transform: translateX( -50% ) scaleX( var( --svl-bleed-x, 1 ) ); }
/* Only elements with NOTHING inside them may be tagged .svl-bleed. scaleX on a
box that holds copy stretches the copy with it — tagging the hero
was the first attempt and it drew the headline 1.7x too wide on a tablet.
The hero therefore gets two empty stand-ins behind it instead. The bar's
second gradient layer is the seam fix: the first layer repaints the real
1728/440px ramp over the middle, and the half-and-half underneath extends the
ramp's own end colour into each gutter, so the join is invisible. */
/* The hero photo is anchored to the LEFT of the canvas and cannot be widened
(it is masked, and the section clips it), so the left gutter meets the photo
rather than the section colour. Sampled down the photo's own left edge it runs
#2A2828…#301D1E…#291B1B, so the gutter carries #2c2122 instead of the flat
#212121 and the join stops reading as an edge. The right gutter meets the flat
colour and keeps it. */
.svl-stage--mobile { display: none; }
@media (max-width: 900px) {
.svl-stage--desktop { display: none; }
.svl-stage--mobile { display: block; }
}
/* Editor preview forces a single canvas regardless of viewport. */
.svl-root--force-desktop .svl-stage--desktop { display: block !important; }
.svl-root--force-desktop .svl-stage--mobile { display: none !important; }
.svl-root--force-mobile .svl-stage--mobile { display: block !important; }
.svl-root--force-mobile .svl-stage--desktop { display: none !important; }
/* ---------- Canvas reset -----------------------------------------------
Every position in this file is an absolute Figma coordinate, so the browser's
default margins must go: a
carries margin-block 1em and an
0.67em,
which pushes each text node down by exactly its own font size and silently
breaks every measurement. border-box keeps a bordered element (the glass pill)
at its Figma width instead of growing by the border.
--------------------------------------------------------------------- */
:is(.svl-canvas,.svl-hero-canvas) *,
:is(.svl-canvas,.svl-hero-canvas) *::before,
:is(.svl-canvas,.svl-hero-canvas) *::after {
box-sizing: border-box;
}
:is(.svl-canvas,.svl-hero-canvas) p,
:is(.svl-canvas,.svl-hero-canvas) h1,
:is(.svl-canvas,.svl-hero-canvas) h2,
:is(.svl-canvas,.svl-hero-canvas) h3,
:is(.svl-canvas,.svl-hero-canvas) h4,
:is(.svl-canvas,.svl-hero-canvas) h5,
:is(.svl-canvas,.svl-hero-canvas) h6,
:is(.svl-canvas,.svl-hero-canvas) ul,
:is(.svl-canvas,.svl-hero-canvas) ol,
:is(.svl-canvas,.svl-hero-canvas) li,
:is(.svl-canvas,.svl-hero-canvas) figure,
:is(.svl-canvas,.svl-hero-canvas) blockquote {
margin: 0;
padding: 0;
/* NB: do not neutralise font-weight here. A element+class selector outranks the
single-class rules below, so anything set in this block wins over the
per-node values taken from Figma. Weights are declared per element. */
}
/* Typographic baseline. These are set on the canvas itself (inherited, and easy
for the per-node rules to override) purely to stop the active theme's own
typography from leaking in — a stray letter-spacing changes where every line
wraps, which is exactly the kind of drift this file exists to prevent. */
.svl-canvas {
letter-spacing: normal;
word-spacing: normal;
font-style: normal;
font-variant: normal;
text-transform: none;
text-decoration: none;
text-indent: 0;
font-kerning: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
:is(.svl-canvas,.svl-hero-canvas) * {
letter-spacing: inherit;
word-spacing: inherit;
}
/* ---------- Primitives used by the templates ---------- */
.svl-abs { position: absolute; }
:is(.svl-canvas,.svl-hero-canvas) img { display: block; max-width: none; }
/* Text nodes: Figma centres text inside a fixed-width box. */
.svl-txt {
position: absolute;
margin: 0;
padding: 0;
text-align: center;
white-space: pre-wrap;
word-break: break-word;
}
/* ==========================================================================
DESKTOP — 1728 x 15162
========================================================================== */
/* --- Section 1: Hero (Figma 75:3, 1728x1182) --- */
/* The root frame is white; the hero is a dark block sitting on it (Figma 75:3). */
/* Top bar (75:18) */
/* Top bar text (75:16) — Gveret Levin 30px */
/* Masked background photo (82:93 / 75:8) */
/* Decorative glows (75:90 / 82:91) — exported SVGs carry their own blur */
/* Headline (75:19) — gradient-filled text */
/* Sub-headline (75:20) */
/* Product badge plate (75:27) — rotated -2deg */
/* Product badge text (75:25) */
/* Tagline (75:28) */
/* Device shot (75:30) */
/* Glass pill (75:31) */
/* Glass pill text (75:33) */
/* Body copy (75:35) */
/* ==========================================================================
Forms (shared shell; each instance is positioned by its section rule)
========================================================================== */
.svl-form { margin: 0; }
.svl-hp {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap;
}
.svl-form-error {
color: #ff383c;
font-family: 'Tel Aviv Modernist', sans-serif;
font-size: 16px;
margin: 0 0 8px;
text-align: center;
}
.svl-field input {
width: 100%;
height: 100%;
box-sizing: border-box;
background: transparent;
border: 0;
outline: 0;
font-family: 'Tel Aviv Modernist', sans-serif;
color: #fff;
text-align: center;
}
.svl-field input::placeholder { color: rgba(255, 255, 255, 0.85); opacity: 1; }
.svl-field button {
width: 100%;
height: 100%;
box-sizing: border-box;
border: 0;
cursor: pointer;
font-family: 'Tel Aviv Modernist', sans-serif;
color: #fff;
background: transparent;
}
/* ==========================================================================
Reduced motion
========================================================================== */
@media (prefers-reduced-motion: reduce) {
.svl-canvas *,
.svl-canvas *::before,
.svl-canvas *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}
/* --- Section 2: FDA band + video + CTA ring (Figma 94:2 … 94:18) --- */
/* Gradient band behind the video (94:2). The SVG carries its own blur/falloff. */
/* Video plate (94:5) */
/* Play button circle (94:6) */
/* Play triangle (94:7) — Figma rotates it 90deg inside a 69x72 box. */
/* FDA approval copy (94:11) */
/* CTA rings (94:15 outer, 94:16 inner) */
/* CTA label (94:17) */
/* Arrow icon inside the CTA ring (94:18) */
/* --- Section 3: "אז מה זה בעצם הצוללת?" (94:25, 94:27, 94:29) --- */
/* Section heading with a black→grey→black gradient fill (94:25) */
/* Product line (94:27) — Brutalist Light on the white background */
/* Body copy (94:29) */
/* --- Shared: frosted-glass plate (used by the hero pill and every label pill) --- */
/* Label sitting on a glass plate — Modernist 25px, never wraps. */
/* --- Section 4: mechanism (94:37, 94:26, glass pills, 94:43) --- */
/* "הצוללת עובדת על ידי מנגנון חכם" (94:37) */
/* Mechanism photo (94:26) — Figma crops it inside a shorter frame. */
/* The five callout plates (94:40, 94:31, 94:38, 94:35, 94:33) */
/* Their labels (94:41, 94:32, 94:39, 94:36, 94:34) */
/* "וכל זה קורה כי…" (94:43) */
/* --- Section 5: "סוגי הטיפולים" (94:44, 94:45) --- */
/* Oversized watermark headline with a near-transparent gradient fill (94:44) */
/* Sub-headline over the watermark (94:45) */
/* --- Section 7: "טכנולוגיה אחת / 5 אורכי גל / 7 סוגי טיפולים" (103:99) --- */
/* --- Section 6: six wavelength cards (94:49 … 94:82) ------------------------
Two columns of three. Titles and bodies are right-anchored (translateX(-100%)
off a calc'd left edge) exactly as Figma emits them for this RTL block.
--------------------------------------------------------------------------- */
/* Glow ring behind the dot; the SVG carries the blur, hence the big negative inset. */
/* Right-hand anchor for each column. */
/* Section 7 body copy (103:100) */
/* --- Section 8: audience band + lead form 1 (103:91 … 105:112) --- */
/* Figma has this band at left 3 / width 1728, i.e. 3px short of the canvas on the
left and 3px past it on the right. The right side is covered either way; the
left one showed as a white hairline down the page edge at every width. Same
right edge, left edge closed. */
/* Right-anchored headings on the band (103:92, 103:93, 103:94) */
/* Four logo placeholders (103:95 … 103:98) */
/* --- Lead form, instance 1 (103:101 … 105:111) ------------------------------
The form element itself is left unpositioned so its fields resolve against the
canvas and can carry their literal Figma coordinates.
--------------------------------------------------------------------------- */
/* Form heading (182:15) */
/* Field shells */
.svl-form .svl-field { position: absolute; }
.svl-form .svl-field input,
.svl-form .svl-field button {
border-radius: 9px;
font-family: 'Tel Aviv Brutalist', sans-serif;
font-weight: 700;
font-size: 23px;
line-height: normal;
color: #000;
text-align: right;
backdrop-filter: blur( 20px );
-webkit-backdrop-filter: blur( 20px );
background: #e9e9e9;
}
.svl-form .svl-field input::placeholder { color: #000; opacity: 1; }
.svl-form .svl-field--submit button {
text-align: center;
/* Inherited from the other project s palette. Svetlana s button is the pink
gradient Figma states on 602:115. */
background: linear-gradient( to right, #bf6f81, #ffb3c4 );
cursor: pointer;
}
/* Instance 1 field geometry (103:103, 103:105, 103:104, 103:110) */
/* Inherited from the other project, where these coordinates pointed at a
canvas this plugin does not have. Re-aimed: desktop sits inside the
section-11 frame so its tops are in-frame; mobile is on the page. */
.d-s11 .svl-form--1 .svl-field--name { left: 861px; top: 756px; width: 354px; height: 78px; }
.d-s11 .svl-form--1 .svl-field--phone { left: 485px; top: 756px; width: 340px; height: 78px; }
.d-s11 .svl-form--1 .svl-field--years { left: 485px; top: 853px; width: 730px; height: 78px; }
.d-s11 .svl-form--1 .svl-field--submit { left: 489px; top: 965px; width: 730px; height: 63px; }
/* Mobile stacks them, and Figma puts the phone above the name. */
.m-s11 .svl-form--1 .svl-field--phone { left: 37px; top: 13211px; width: 354px; height: 78px; }
.m-s11 .svl-form--1 .svl-field--name { left: 37px; top: 13308px; width: 354px; height: 78px; }
.m-s11 .svl-form--1 .svl-field--years { left: 37px; top: 13405px; width: 354px; height: 78px; }
.m-s11 .svl-form--1 .svl-field--submit { left: 37px; top: 13502px; width: 359px; height: 63px; }
/* The placeholder sits where Figma's label sits: pad by the gap between the
field's right edge and the label's right edge. */
.svl-form--1 .svl-field--name input { padding-right: 25px; }
.svl-form--1 .svl-field--phone input { padding-right: 23px; }
.svl-form--1 .svl-field--years input { padding-right: 25px; }
/* --- Section 9 heading (105:112) --- */
/* Hero-area form heading (182:13) */
/* --- Section 9: seven differentiator rows (105:113 … 105:157) --- */
/* Row geometry, straight from each node's own left/top. */
/* Vertical divider running down the row stack (105:125) */
/* --- Section 10: video still (106:160) --- */
/* --- Section 11: "מי עומד מאחורי הטכנולוגיה" + lead form 2 (106:163 … 106:177) --- */
.svl-form--2 .svl-field--name { left: 860px; top: 8706px; width: 354px; height: 78px; }
.svl-form--2 .svl-field--phone { left: 484px; top: 8706px; width: 340px; height: 78px; }
.svl-form--2 .svl-field--years { left: 484px; top: 8803px; width: 730px; height: 78px; }
.svl-form--2 .svl-field--submit { left: 488px; top: 8915px; width: 730px; height: 63px; }
.svl-form--2 .svl-field--name input { padding-right: 25px; }
.svl-form--2 .svl-field--phone input { padding-right: 23px; }
.svl-form--2 .svl-field--years input { padding-right: 25px; }
/* Figma centres the button label 11px right of the button's own centre. */
.svl-form--2 .svl-field--submit button { padding-left: 22px; }
/* --- Section 16/17: bottom band, closing CTA + lead form 3 (112:227 … 112:242) --- */
/* Figma gives this third panel no heading at all (112:234 holds only the four
fields), so it reserves 76px above them where panels 1 and 2 reserve 135px.
The site does carry a heading here, and at the shared 385px width it wrapped
to two lines and ran 38px into the name and phone fields. One line at 700px
fits the 76px Figma left, and the panel geometry stays untouched. */
.svl-form--3 .svl-field--name { left: 873px; top: 14849px; width: 354px; height: 78px; }
.svl-form--3 .svl-field--phone { left: 497px; top: 14849px; width: 340px; height: 78px; }
.svl-form--3 .svl-field--years { left: 497px; top: 14946px; width: 730px; height: 78px; }
.svl-form--3 .svl-field--submit { left: 501px; top: 15058px; width: 730px; height: 63px; }
.svl-form--3 .svl-field--name input { padding-right: 25px; }
.svl-form--3 .svl-field--phone input { padding-right: 23px; }
.svl-form--3 .svl-field--years input { padding-right: 25px; }
.svl-form--3 .svl-field--submit button { padding-left: 22px; }
/* --- Section 12: client photo wall (108:179 … 108:184) --- */
/* The five cards Figma pins at 59 / 391 / 723 / 1056 / 1389 — a 252px card on a
332px pitch — are now driven by the shared carousel further down this file.
Their geometry is preserved there as the card size and the 80px gap. */
/* --- Section 13: long testimonial (108:185 … 108:194) --- */
/* Figma puts `opacity-30` on this image — it is a backdrop behind the letter,
not a portrait. Never transcribed, so the photo was competing with the copy
laid over it. Same omission as the pricing watermark. */
/* --- Section 14: four benefit cards + photo (112:198 … 75:10) --- */
/* --- Section 15: WhatsApp screenshots (112:219 … 112:226) --- */
/* The five before/after shots Figma pins at 81 / 337 / 685 / 1132 / 1383 — heights
194-199, widths 199 / 291 / 390 / 194 / 291, a consistent 57px apart. Each box
matches its own photo's aspect (1:1, 3:2, 2:1, 1:1, 3:2). They are driven by the
shared carousel further down this file, which keeps that rule: a fixed-height
slot with the image at its natural width inside it. */
/* --- Section 16: pricing copy (106:162, 112:228 … 112:231) --- */
/* The watermark is a backdrop, not a picture — at full strength the white
laurel competed with the copy sitting on top of it. 20%. The mobile carried
0.3 from the frame; both are on the same value now so the section reads the
same on either canvas. */
/* ==========================================================================
MOBILE — 440 x 11658 (Figma node 133:465)
A different layout, not a scaled desktop: its own coordinates throughout.
========================================================================== */
/* Hero block (133:466) — note this one is pure black, unlike the desktop's #212121. */
/* Background photo — mobile drops the desktop's mask and just scrims it. */
/* Glass pill + copy below the hero block (133:475 … 133:477) */
/* Section 2 — band, video, FDA, CTA ring (133:478 … 133:312) */
/* Figma insets the mark by 6.7% each side and 25% off the bottom. Expressed as
width/height rather than left+right+top+bottom with width:auto — the auto
form did not resolve against the rotated parent and the image rendered at
its natural 51x62 instead of the 24x20 the frame allows. */
/* Rotated node: these values come from Figma's own CSS, not from get_metadata,
which reports a different origin for anything with a rotation. */
/* ==========================================================================
QA fixes
========================================================================== */
/* A