/* ==========================================================================
layers.css - the "Пластове" (strata) system, site-layers experiment.
Reference: fora.so. There the hero is a gradient sky with three transparent
landscape layers stacked at the bottom, and the product card sits BETWEEN
the layers, so the front hills overlap its lower edge. The same scene
repeats inside feature panels and in the closing CTA.
Here the landscape is what MAG 97 sells: sheets, from white paper at the
back to kraft board at the front. The "product card" is a spec sheet.
Same @layer names as styles.css, so the cascade order is unchanged.
========================================================================== */
@layer tokens {
:root {
--kraft-300:#C9B590; /* light kraft, the third stratum */
--sky-top:#FBFAF7; --sky-mid:#F6F2EA; --sky-low:#F3EEE4;
/* the one shadow this system allows: a floating sheet needs separation
from the strata behind it. Everything else stays tonal. */
--shadow-sheet:0 40px 70px -34px rgba(10,16,15,.42), 0 2px 0 rgba(10,16,15,.06);
}
}
@layer components {
/* ---------- scene primitives ---------- */
.scene-stage { position:relative; width:100%; overflow:hidden; pointer-events:none; }
.strata { position:absolute; left:-2%; right:-2%; bottom:-1px; width:104%; display:block;
fill:var(--strata-fill,var(--paper-200)); }
.strata use { fill:inherit; }
.strata .strata-edge { fill:none; stroke:var(--strata-edge,rgba(255,255,255,.55)); stroke-width:1.5; vector-effect:non-scaling-stroke; }
.strata-1 { height:100%; --strata-fill:#E3DBCB; filter:drop-shadow(0 -6px 14px rgba(10,16,15,.06)); }
.strata-2 { height:88%; --strata-fill:#D0C3AA; filter:drop-shadow(0 -8px 18px rgba(10,16,15,.08)); }
.strata-3 { height:74%; --strata-fill:#BFA67A; filter:drop-shadow(0 -10px 22px rgba(10,16,15,.12)); }
.strata-4 { height:60%; --strata-fill:var(--kraft-600); --strata-edge:rgba(255,255,255,.28); filter:drop-shadow(0 -12px 26px rgba(10,16,15,.18)); }
/* ---------- photographic planes (hero) ----------
Each plane is a real sheet: an OpenArt paper texture cut to the same
curve as the vector stratum through a CSS mask. Three parts:
.strata-under the same shape shifted up a few px in a darker tone,
so the cut edge of the sheet reads as thickness;
.strata-body the texture, masked;
.strata-rim the vector highlight stroke along the top edge.
The wrapper carries the drop shadow, so it follows the masked alpha.
Planes overhang 6% each side: the pointer drift must never expose the
page ground at the edge (seen on 2026-09-04, right edge). */
.strata-paper { left:-6%; right:-6%; width:112%; fill:none; overflow:visible; --thick:5px;
--paper:url("../images/strata/paper-white.jpg"); --edge-tone:rgba(120,104,84,.45); }
.strata-paper > * { position:absolute; inset:0; }
.strata-under, .strata-body { -webkit-mask:var(--cut) center / 100% 100% no-repeat; mask:var(--cut) center / 100% 100% no-repeat; }
.strata-under { transform:translateY(calc(-1 * var(--thick)));
background:linear-gradient(180deg, var(--edge-tone), var(--edge-tone) 12px, transparent 42%); }
.strata-body { background:var(--paper) center / cover no-repeat; }
/* a soft light from the upper left, the same on all four, is what makes the
four separate photographs read as one stack under one lamp */
.strata-body::after { content:""; position:absolute; inset:0;
background:linear-gradient(105deg, rgba(255,255,255,.22), transparent 38%, rgba(10,16,15,.08) 100%); }
.strata-rim { fill:none; overflow:visible; }
.strata-rim .strata-edge { stroke:rgba(255,255,255,.7); stroke-width:1.25; }
.strata-paper[data-paper="a"] { --cut:url("data:image/svg+xml;utf8,");
--paper:url("../images/strata/paper-white.jpg"); --edge-tone:rgba(150,140,124,.40); --thick:4px; }
.strata-paper[data-paper="b"] { --cut:url("data:image/svg+xml;utf8,");
--paper:url("../images/strata/paper-cream.jpg"); --edge-tone:rgba(140,124,100,.45); --thick:5px; }
.strata-paper[data-paper="c"] { --cut:url("data:image/svg+xml;utf8,");
--paper:url("../images/strata/paper-tan.jpg"); --edge-tone:rgba(120,100,72,.50); --thick:6px; }
.strata-paper[data-paper="d"] { --cut:url("data:image/svg+xml;utf8,");
--paper:url("../images/strata/paper-kraft.jpg"); --edge-tone:rgba(70,48,28,.62); --thick:9px; }
.strata-paper[data-paper="d"] .strata-rim .strata-edge { stroke:rgba(255,236,210,.42); }
.strata-paper[data-paper="d"] .strata-body::after {
background:linear-gradient(105deg, rgba(255,240,220,.16), transparent 40%, rgba(10,16,15,.16) 100%); }
@media (max-width:900px) {
.strata-paper[data-paper="a"] { --paper:url("../images/strata/paper-white-m.jpg"); }
.strata-paper[data-paper="b"] { --paper:url("../images/strata/paper-cream-m.jpg"); }
.strata-paper[data-paper="c"] { --paper:url("../images/strata/paper-tan-m.jpg"); }
.strata-paper[data-paper="d"] { --paper:url("../images/strata/paper-kraft-m.jpg"); }
}
/* ---------- hero ---------- */
.hero.hero-layers { display:block; min-height:0; padding-top:0; color:var(--ink-900); overflow:hidden;
background:
radial-gradient(70% 45% at 50% 78%, rgba(26,156,163,.16), transparent 70%),
linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 55%, var(--sky-low) 100%); }
.hero.hero-layers::after { content:none; }
/* hex comb background layer (assets/js/hex-comb.js); the copy and the strata sit above it */
.hero-comb { position:absolute; inset:0 0 auto 0; width:100%; height:78%; display:block; z-index:0; pointer-events:none;
opacity:.62; touch-action:none;
/* lift the comb off the strata: no hard bottom edge, it dissolves into the paper */
-webkit-mask-image:linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
mask-image:linear-gradient(180deg, #000 0%, #000 58%, transparent 100%); }
/* paper wash so the copy keeps its contrast over the comb */
.hero.hero-layers::before { content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
background:
radial-gradient(60% 55% at 50% 38%, rgba(251,250,247,.78), rgba(251,250,247,.35) 60%, transparent 100%),
linear-gradient(180deg, rgba(251,250,247,.35) 0%, transparent 35%, transparent 70%, rgba(243,238,228,.6) 100%); }
.hero-layers .hero-layers-copy, .hero-layers .scene-stage { position:relative; z-index:2; }
/* CTA band: Three.js wave lines (assets/js/cta-lines.js) above the Velaris field, below the strata and copy */
.cta-lines { position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; pointer-events:none; opacity:0; transition:opacity 1.4s ease; }
.cta-lines.is-live { opacity:1; }
/* no halo behind the copy: it hid whatever moved behind it; .cta-band::after carries contrast */
.cta-layers .shader-canvas { z-index:0; }
/* product tiles: photo cards tumbling in 3D above the sheets, under the copy */
.cta-products { position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none; perspective:1100px; opacity:0; transition:opacity 1.2s ease; }
.cta-products.is-live { opacity:1; }
.cta-tile { position:absolute; top:0; left:0; margin:0; width:clamp(96px, 9vw, 150px); aspect-ratio:1; border-radius:14px; overflow:hidden;
transform-origin:50% 50%; will-change:transform; backface-visibility:visible;
box-shadow:0 30px 50px -22px rgba(4,14,14,.8), 0 0 0 1px rgba(255,255,255,.14);
opacity:calc(.55 + .45 * var(--depth, 1)); filter:saturate(.9) brightness(calc(.75 + .25 * var(--depth, 1))); }
.cta-tile img { display:block; width:100%; height:100%; object-fit:cover; }
.cta-tile::after { content:""; position:absolute; inset:0; background:linear-gradient(160deg, rgba(26,156,163,.18), transparent 45%, rgba(4,14,14,.35)); }
.cta-tile figcaption { position:absolute; left:8px; bottom:8px; z-index:1; padding:.25em .6em; border-radius:var(--r-pill);
font-family:var(--font-mono); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:#fff;
background:rgba(4,14,14,.55); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
@media (max-width:655px) { .cta-tile { width:84px; } .cta-tile figcaption { display:none; } }
.cta-layers .scene-stage-cta, .cta-layers > .container { position:relative; z-index:2; }
/* Rotating dot globe (assets/js/dot-globe.js), added 2026-09-17. Same stacking
contract as the shader field: z-index 0, so .ink-band::before grain and
.cta-band::after scrim (both z-index 1) stay above it and the copy (z-index 2)
stays above them. Later in the DOM than .shader-canvas, so it paints on top
of the field without needing a z-index of its own. */
.cta-layers .cta-globe { position:absolute; inset:0; z-index:0;
display:block; width:100%; height:100%; pointer-events:none;
/* Not decoration either. Unmasked, the globe's dots raised the brightest
pixel inside the lead paragraph's box and dropped it from 4.89:1 to
3.83:1 - the same accessibility regression the shader caused in August,
measured the same way (lab/verify-cta-contrast.mjs). This fade takes the
globe to nothing before it reaches the copy column; it reads as the
planet receding into the band, not as a cut. Re-measure after moving
data-x, data-radius or data-opacity. */
-webkit-mask-image:linear-gradient(to right, rgba(0,0,0,0) 56%, rgba(0,0,0,.5) 72%, rgba(0,0,0,1) 88%);
mask-image:linear-gradient(to right, rgba(0,0,0,0) 56%, rgba(0,0,0,.5) 72%, rgba(0,0,0,1) 88%); }
/* Narrow screens: there is no clear column beside the copy to fade into, so
the globe stops sharing space with it. The canvas shrinks to a strip below
the buttons and holds one small whole planet (data-sm-* on the canvas),
which is why no mask is needed here: nothing of it is behind any text, so
the measured contrast floor is kept by construction rather than by fading.
Left behind the copy at opacity .45 it was a faint texture nobody would
call a planet AND it still cost the lead paragraph 4.89:1 -> 4.11:1.
The band grows to make the strip. Re-measure: lab/verify-cta-contrast.mjs. */
@media (max-width:900px) {
.cta-layers .cta-globe { inset:auto 0 clamp(1.5rem,4vh,2.5rem) 0;
height:clamp(180px,24vh,230px);
-webkit-mask-image:none; mask-image:none; }
}
@media (prefers-reduced-motion:reduce){ .hero-comb { opacity:.6; } } /* no photo scrim */
.hero-layers .hero-layers-copy { position:relative; z-index:2; text-align:center;
padding-top:clamp(2.25rem,4.5vh,3rem); padding-bottom:0;
display:flex; flex-direction:column; align-items:center; }
.hero-layers .eyebrow { color:var(--accent-ink); }
.hero-layers .eyebrow-pill { gap:.5em; padding:.45em 1em; border:1px solid var(--paper-200);
border-radius:var(--r-pill); background:rgba(255,255,255,.62); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.hero-layers .eyebrow-pill::before { width:6px; height:6px; border-radius:50%; background:var(--brand-600); opacity:1; }
.hero-layers h1, .hero-layers h1.hero-title-long { color:var(--ink-900); max-width:24ch; margin-inline:auto; text-wrap:balance;
font-size:clamp(2rem,1.2rem + 2.6vw,3.4rem); font-weight:500; letter-spacing:-.015em; line-height:1.02; }
/* phones: balance would spread the long title into two-word lines; wrap
normally at full width so "Хартии и картони" sits on one row */
@media (max-width:640px) {
.hero-layers h1, .hero-layers h1.hero-title-long { max-width:15ch; text-wrap:pretty; font-size:clamp(1.7rem, 1rem + 3.4vw, 2rem); line-height:1.08; letter-spacing:-.02em; }
}
/* Split title (client request 2026-09-11): the product name carries the
display size, the sectors it serves drop to a quiet second line. Both are
block spans so SplitText's line pass keeps them as two separate lines. */
.hero-layers h1.hero-title-split { max-width:26ch; }
.hero-title-split .hero-title-main,
.hero-title-split .hero-title-sub { display:block; }
.hero-title-split .hero-title-main { font-size:clamp(2.4rem,1.3rem + 3.6vw,4.4rem); line-height:1; letter-spacing:-.02em; }
.hero-title-split .hero-title-sub { margin-top:.42em; max-width:46ch; margin-inline:auto;
font-size:clamp(1.02rem,.92rem + .75vw,1.55rem); font-weight:400; line-height:1.3;
letter-spacing:-.005em; color:var(--ink-700); text-wrap:pretty; }
/* Typewriter headline (animations.js): a solid block caret, steady while the
line types, blinking once it is finished. Sized in em so it tracks the
clamped display size at every breakpoint. */
.tw-caret { display:inline-block; width:.5em; height:.78em; margin-left:.07em;
background:currentColor; vertical-align:-.03em; }
.tw-caret.is-blinking { animation:twBlink 1.06s steps(1, end) infinite; }
@keyframes twBlink { 0%, 50% { opacity:1; } 50.01%, 100% { opacity:0; } }
@media (prefers-reduced-motion: reduce) { .tw-caret { display:none; } }
@media (max-width:640px) {
.hero-layers h1.hero-title-split { max-width:20ch; }
.hero-title-split .hero-title-main { font-size:clamp(1.95rem,1.1rem + 4.2vw,2.5rem); }
/* 24ch capped the line at 219px of the 296px available, which stranded
"индустриалното" and "направления" alone on their own rows. The widest
adjacent pair ("индустриалното производство,") measures 15.1em, so the
box has to clear that; balance then evens the rows out. */
.hero-title-split .hero-title-sub { font-size:clamp(.94rem,.86rem + .5vw,1.05rem);
max-width:30ch; text-wrap:balance; }
}
.hero-layers .hero-lead { color:var(--ink-600); max-width:60ch; margin-inline:auto; margin-top:var(--sp-2); font-size:clamp(1.05rem,1rem + .35vw,1.25rem); }
.hero-layers .hero-cta { justify-content:center; margin-top:var(--sp-3); }
.hero-layers .btn-ghost { color:var(--ink-900); border-color:var(--ink-700); }
.hero-layers .btn-ghost:hover { background:var(--ink-900); color:#fff; border-color:var(--ink-900); }
.hero-layers .scene-stage { height:clamp(400px,48vh,640px); z-index:1;
/* the back plane's crest sits a third of the way down the stage, so the
stage is pulled up under the buttons and the air above the crest goes */
margin-top:clamp(-84px,-8vh,-56px); }
/* front planes sit lower in the hero than in the vector version, so the
photographic foreground overlaps only the sheet's lower edge (fora.so) */
.hero-layers .strata-3 { height:64%; }
.hero-layers .strata-4 { height:52%; }
/* fade the section floor: planes travel past the bottom edge and would show
a clip line; a gradient to the page ground above every plane hides it */
.hero-layers .scene-stage::after { content:""; position:absolute; left:0; right:0; bottom:0; height:110px; z-index:6; pointer-events:none;
background:linear-gradient(180deg, transparent, rgba(242,238,231,.92)); }
.strata, .sheet-card { transition:none; } /* per-frame scroll writes must never ease */
/* Hero variant 2 (_variant-2.html) carries nothing under the buttons, so it
needs no rules here: the photograph it briefly used was dropped on
2026-09-16 and its CSS went with it. */
.hero-layers .hero-scroll { display:none; } /* the strata are the invitation to scroll */
/* the spec sheet: sits between stratum 2 and stratum 3 */
/* the sheet sits lower and runs longer than its content, so the two front
planes cover its foot: a leaf tucked into the stack, not floating on it */
.sheet-card { position:absolute; left:0; right:0; margin-inline:auto; bottom:4%; z-index:3;
width:min(760px, 92vw); color:var(--ink-900); pointer-events:auto; will-change:transform;
font-variant-numeric:tabular-nums; perspective:1400px; }
/* the datasheet is an app shell (reference: fora.so hero, "Join now" frame):
a dark blurred chassis with a 6px inset, a narrow nav rail on the left,
and an 18px-radius panel on the right. The reference paints the panel
with a shader; here it is a still teal field. The front planes cover
the foot of the shell. */
.sheet-card { width:min(900px, 92vw); bottom:14%; }
.sheet-inner { position:relative; display:flex; gap:6px; padding:6px; border-radius:24px; overflow:hidden;
background:rgba(41,40,39,.88); border:1px solid rgba(228,222,211,.16);
-webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px);
box-shadow:0 30px 60px -20px rgba(10,16,15,.45), 0 8px 18px -8px rgba(10,16,15,.3);
transform-style:preserve-3d; will-change:transform; color:var(--paper-100); }
.sheet-side { flex:0 0 200px; display:flex; flex-direction:column; gap:18px; padding:14px; border-radius:18px; }
.sheet-side-top { display:flex; align-items:center; justify-content:space-between; }
.sheet-side-top img { display:block; height:22px; width:auto; }
.sheet-side-dot { width:18px; height:18px; border-radius:50%; border:1.5px solid rgba(192,138,78,.7); }
.sheet-nav { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.sheet-nav li { display:flex; align-items:center; gap:10px; font-size:.82rem; color:rgba(242,238,231,.7); }
.sheet-nav li.is-on { color:var(--paper-050); }
.sheet-nav li.is-on svg { color:var(--brand-600); opacity:1; }
.sheet-nav svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:.8; }
.sheet-panel { position:relative; flex:1 1 0; min-width:0; min-height:0; border-radius:18px; overflow:hidden;
display:flex; flex-direction:column; justify-content:flex-start; gap:14px; padding:22px 16px clamp(64px,8vh,96px);
background:
radial-gradient(60% 55% at 28% 18%, rgba(26,156,163,.50), transparent 70%),
radial-gradient(46% 46% at 82% 88%, rgba(192,138,78,.42), transparent 70%),
linear-gradient(180deg, var(--brand-700) 0%, var(--brand-800) 55%, var(--deep-950) 100%); }
.sheet-hair { position:absolute; top:0; left:0; right:0; height:1px; background:rgba(242,238,231,.7);
-webkit-mask:linear-gradient(90deg, transparent, #000 50%, transparent); mask:linear-gradient(90deg, transparent, #000 50%, transparent); }
.sheet-cam, .sheet-mark, .sheet-base { display:none; }
.sheet-head { display:flex; flex-direction:column; align-items:center; gap:12px; padding-top:10px; text-align:center; }
.sheet-head, .sheet-rows, .sheet-foot { position:relative; z-index:1; }
.sheet-row, .sheet-stat { opacity:1; } /* layers.js staggers these in on load */
.sheet-title { font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--paper-100); text-wrap:balance; }
.sheet-tags { display:flex; gap:.4rem; flex-wrap:wrap; justify-content:center; }
.sheet-tag { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
padding:.3em .7em; border:1px solid rgba(214,205,187,.45); border-radius:var(--r-pill); color:var(--paper-200); }
.sheet-rows { display:grid; grid-template-columns:1fr 1fr; width:min(620px,100%); margin-inline:auto;
border:1px solid rgba(228,222,211,.18); border-radius:12px; overflow:hidden; background:rgba(10,16,15,.22); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.sheet-row { display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
padding:.7rem 1.1rem; border-bottom:1px solid rgba(228,222,211,.12); font-size:.9rem; }
.sheet-row:nth-child(odd) { border-right:1px solid rgba(228,222,211,.12); }
.sheet-row:nth-last-child(-n+2) { border-bottom:0; }
.sheet-row span { color:var(--paper-300); }
.sheet-row b { font-weight:600; white-space:nowrap; color:var(--paper-050); }
.sheet-foot { display:none; } /* the stats repeat the rows; the shell stays short so the hero buttons clear it */
.sheet-stat { padding:.4rem 1.1rem; text-align:center; }
.sheet-stat + .sheet-stat { border-left:1px solid rgba(255,255,255,.14); }
.sheet-stat small { display:block; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.65); }
.sheet-stat strong { display:block; margin-top:.2rem; font-size:1.25rem; font-weight:300; line-height:1.1; }
.strata-3, .strata-4 { z-index:4; }
.strata-1, .strata-2 { z-index:2; }
@media (max-width:655px) {
.hero-layers .scene-stage { height:clamp(360px,46vh,500px); }
.sheet-card { width:min(560px,94vw); }
.sheet-inner { border-radius:16px; padding:4px; }
.sheet-side { display:none; }
.sheet-panel { min-height:0; padding:28px 12px clamp(60px,10vh,110px); gap:16px; }
.sheet-rows { grid-template-columns:1fr; }
.sheet-row:nth-child(odd) { border-right:0; }
.sheet-row:nth-child(n+3) { display:none; }
.sheet-foot { display:none; } /* on a phone the foot sat under the front plane and wrapped; the head and two rows carry the sheet */
.sheet-tags { display:none; }
}
/* ---- Hero variant 3 (_variant-3.html): the same card, made real. Every row
is a link into the catalogue and the foot carries a working button, so
the panel stops advertising an interface that does not exist. The
stage keeps pointer-events:none; only the card takes the pointer. ---- */
.scene-stage-live .sheet-card-live { pointer-events:auto; }
/* the live card is taller than the old shell (six rows plus a button), so the
stage stops being pulled up under the hero buttons and grows instead */
.hero-layers .scene-stage-live { height:clamp(360px,40vh,460px); margin-top:clamp(.25rem,1.5vh,1rem); }
/* the decorative card tucks behind the front planes (z-index 3 under 4); a card
with real links must not, or the button ends up half-buried and unclickable */
.sheet-card-live { bottom:8%; z-index:5; }
.sheet-card-live .sheet-panel { padding:20px 14px 18px; gap:14px; }
.sheet-card-live .sheet-side { flex:0 0 220px; justify-content:space-between; }
.sheet-side-lead { margin:0; font-size:.84rem; line-height:1.4; color:rgba(242,238,231,.74); }
.sheet-card-live .sheet-tags { justify-content:flex-start; }
a.sheet-row { text-decoration:none; color:inherit; padding-inline:.9rem;
border-radius:8px; transition:background-color .18s ease, color .18s ease; }
a.sheet-row b { transition:color .18s ease; }
a.sheet-row:hover, a.sheet-row:focus-visible { background:rgba(255,255,255,.09); }
a.sheet-row:hover b, a.sheet-row:focus-visible b { color:var(--brand-400, #5FD0D4); }
a.sheet-row:focus-visible { outline:2px solid var(--brand-600); outline-offset:2px; }
.sheet-card-live .sheet-foot { display:flex; justify-content:center; border:0; padding-top:.2rem; }
.sheet-foot-btn { pointer-events:auto; }
@media (max-width:655px) {
/* four rows and the button fit above the front planes if the panel stops
reserving room for a foot it used to hide */
.sheet-card-live .sheet-row:nth-child(n+3) { display:flex; }
.sheet-card-live .sheet-row:nth-child(n+5) { display:none; }
.sheet-card-live .sheet-panel { padding:22px 10px 18px; gap:12px; }
.sheet-card-live .sheet-foot { display:flex; }
.sheet-card-live { bottom:20%; }
}
/* ---- Variant 3 card, paper tone (2026-09-17). The decorative shell was a
dark charcoal chassis over a near-black teal panel: the only dark
object on a warm paper hero, and the logo sat dark-on-dark. Same
geometry, repainted in the Paper & Teal palette - stock-white chassis,
a panel washed with teal and kraft at low alpha, ink text. Scoped to
.sheet-card-live so index.html and en/ keep the dark shell. ---- */
.sheet-card-live .sheet-inner {
background:rgba(255,255,255,.94); border:1px solid rgba(41,40,39,.14); color:var(--ink-900);
box-shadow:0 34px 60px -26px rgba(41,40,39,.38), 0 8px 20px -12px rgba(41,40,39,.24); }
.sheet-card-live .sheet-panel {
border:1px solid rgba(41,40,39,.07);
background:
radial-gradient(62% 56% at 26% 16%, rgba(26,156,163,.22), transparent 70%),
radial-gradient(48% 46% at 84% 90%, rgba(192,138,78,.16), transparent 70%),
linear-gradient(180deg, #F4FAFA 0%, var(--stock-050) 58%, var(--paper-100) 100%); }
.sheet-card-live .sheet-hair { background:rgba(41,40,39,.16); }
.sheet-card-live .sheet-title { color:var(--brand-800); }
.sheet-card-live .sheet-side-lead { color:var(--ink-600); }
.sheet-card-live .sheet-side-dot { border-color:rgba(192,138,78,.85); }
.sheet-card-live .sheet-tag {
border-color:rgba(26,156,163,.45); color:var(--brand-800); background:rgba(26,156,163,.08); }
.sheet-card-live .sheet-rows {
border-color:rgba(41,40,39,.12); background:rgba(255,255,255,.62); }
.sheet-card-live .sheet-row { border-bottom-color:rgba(41,40,39,.10); }
.sheet-card-live .sheet-row:nth-child(odd) { border-right-color:rgba(41,40,39,.10); }
.sheet-card-live .sheet-row span { color:var(--ink-700); }
.sheet-card-live .sheet-row b { color:var(--ink-900); }
.sheet-card-live a.sheet-row:hover,
.sheet-card-live a.sheet-row:focus-visible { background:rgba(26,156,163,.10); }
.sheet-card-live a.sheet-row:hover b,
.sheet-card-live a.sheet-row:focus-visible b { color:var(--brand-800); }
/* ---------- mid-page scene: the "Извън каталога" tile ---------- */
.scene-mini { position:absolute; inset:0; z-index:-2; overflow:hidden;
background:linear-gradient(180deg, var(--brand-700) 0%, var(--brand-800) 70%); }
.scene-mini .strata-2 { height:70%; --strata-fill:#0C4C50; --strata-edge:rgba(255,255,255,.22); filter:none; }
.scene-mini .strata-3 { height:54%; --strata-fill:#093B3E; --strata-edge:rgba(255,255,255,.18); filter:none; }
.scene-mini .strata-4 { height:40%; --strata-fill:var(--deep-950); --strata-edge:rgba(255,255,255,.14); filter:none; }
/* ---------- dark scenes: the same paper, inked teal ----------
The texture multiplies over a teal base, so the grain of the sheet stays
and the colour is the scene's. Shadows are stronger (dark on dark needs
more separation), the rim highlight is quieter. */
.scene-mini .strata-paper, .scene-stage-cta .strata-paper { --edge-tone:rgba(4,14,14,.75); }
.scene-mini .strata-body, .scene-stage-cta .strata-body {
background-color:var(--tint,#0C4C50); background-image:var(--paper); background-blend-mode:multiply; }
.scene-mini .strata-body::after, .scene-stage-cta .strata-body::after {
background:linear-gradient(105deg, rgba(255,255,255,.10), transparent 40%, rgba(0,0,0,.22) 100%); }
.scene-mini .strata-rim .strata-edge, .scene-stage-cta .strata-rim .strata-edge { stroke:rgba(255,255,255,.26); stroke-width:1; }
.scene-mini .strata-paper { filter:drop-shadow(0 -10px 22px rgba(0,0,0,.35)); }
.scene-mini .strata-2.strata-paper { --tint:#0E5A5F; --thick:4px; }
.scene-mini .strata-3.strata-paper { --tint:#0A4448; --thick:5px; }
.scene-mini .strata-4.strata-paper { --tint:#0B1716; --thick:7px; }
.ds-cta.ds-cta-scene::after { background:linear-gradient(180deg, rgba(10,16,15,.10), rgba(10,16,15,.34)); }
@media (hover:hover) { .ds-cta-scene:hover .scene-mini { transform:none; } }
/* ---------- closing band ---------- */
.cta-band.cta-layers { padding-bottom:clamp(6rem,14vh,9rem); }
/* the mobile globe strip lives in this padding, so the override has to sit
AFTER the line above, not with the other narrow-screen globe rules: same
specificity, and the later rule wins */
@media (max-width:900px) {
.cta-band.cta-layers { padding-bottom:clamp(13rem,30vh,17rem); }
}
.cta-layers .scene-stage-cta { position:absolute; inset:0; z-index:1; }
.cta-layers .scene-stage-cta .strata-1 { height:44%; --strata-fill:#0C4C50; --strata-edge:rgba(255,255,255,.18); filter:none; }
.cta-layers .scene-stage-cta .strata-2 { height:34%; --strata-fill:#093B3E; --strata-edge:rgba(255,255,255,.14); filter:none; }
.cta-layers .scene-stage-cta .strata-3 { height:24%; --strata-fill:var(--deep-950); --strata-edge:rgba(255,255,255,.10); filter:none; }
.scene-stage-cta .strata-paper { filter:drop-shadow(0 -14px 30px rgba(0,0,0,.45)); }
.scene-stage-cta .strata-1.strata-paper { --tint:#0F5A5F; --thick:4px; }
.scene-stage-cta .strata-2.strata-paper { --tint:#0A4347; --thick:6px; }
.scene-stage-cta .strata-3.strata-paper { --tint:#0B1716; --thick:8px; }
}
@layer motion {
/* Reduced motion: strata and sheet stay exactly where the CSS put them.
layers.js checks the same query and does nothing. */
@media (prefers-reduced-motion: reduce) {
.strata, .sheet-card, .sheet-inner { transform:none !important; }
}
}
/* ==========================================================================
Aurora hover, first product card. Reference: solidroad.com/careers,
"What you'll get": a heavily blurred colour field sits behind the card at
opacity 0 and scale 1.05; on hover it fades in and settles to scale 1.
Rebuilt here as CSS gradients in the brand colours (teal, kraft, paper) so
there is no image to load and the text keeps its contrast.
========================================================================== */
@layer components {
.ds-aurora-host { isolation:isolate; }
.ds-aurora { position:absolute; inset:-18%; z-index:0; pointer-events:none;
opacity:0; transform:scale(1.06); transform-origin:50% 60%;
transition:opacity .7s var(--ease), transform 1.1s var(--ease);
filter:blur(34px) saturate(1.1);
background:
radial-gradient(38% 34% at 22% 24%, rgba(26,156,163,.62), transparent 70%),
radial-gradient(34% 30% at 80% 18%, rgba(192,138,78,.50), transparent 70%),
radial-gradient(44% 40% at 74% 82%, rgba(20,117,122,.55), transparent 72%),
radial-gradient(36% 32% at 18% 84%, rgba(214,205,187,.9), transparent 70%),
radial-gradient(28% 26% at 52% 50%, rgba(255,255,255,.7), transparent 70%); }
.ds-aurora ~ * { position:relative; z-index:1; }
.ds-aurora-host:is(:hover,:focus-within) .ds-aurora { opacity:1; transform:scale(1); }
.product-grid > .ds-aurora-host:hover { background:var(--surface-2); }
@media (prefers-reduced-motion: reduce) { .ds-aurora { transition:opacity .3s; transform:none; } }
}
/* ==========================================================================
"Защо МАГ 97": pinned horizontal pan. The band stops, the heading settles
with a slight zoom, and the four numbered cards travel right to left under
the wheel, each growing as it reaches the centre. Below 900px and under
reduced motion there is no pin: the track is a native swipe row with snap.
Scroll device: pin + pan (scroll-craft devices.md). The transforms are set
per frame from layers.js and never eased in CSS.
========================================================================== */
@layer components {
.why-pin { padding-block:0; overflow:hidden; }
.why-pin-stage { display:flex; flex-direction:column; justify-content:center; gap:var(--sp-5);
min-height:100vh; min-height:100svh; padding-block:var(--sp-6); box-sizing:border-box; transform-origin:50% 50%; will-change:transform; }
.why-pin .section-head { margin-bottom:0; }
.why-track { display:flex; gap:var(--sp-4); align-items:stretch; width:max-content; will-change:transform;
padding-inline:max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); }
.why-pin .why-item { flex:0 0 auto; width:clamp(300px, 30vw, 440px); padding:var(--sp-4) var(--sp-4) var(--sp-5);
border-top:2px solid var(--ink-900); background:var(--surface-1); border:1px solid var(--line); border-top:2px solid var(--ink-900);
border-radius:6px; transform-origin:50% 60%; will-change:transform,opacity; }
.why-pin .why-num { top:var(--sp-3); right:var(--sp-4); font-size:2.4rem; font-weight:300; letter-spacing:0; color:var(--kraft-500); }
.why-pin .why-head { flex-direction:column; gap:var(--sp-3); padding-right:3.5rem; }
.why-pin .why-icon { width:32px; height:32px; }
.why-pin .why-item h3 { font-size:1.5rem; }
.why-pin .why-item p { font-size:1.02rem; line-height:1.55; }
/* the pan ends with the last card centred: the spacer after it is half the
viewport minus half a card minus the track's own right padding */
.why-track::after { content:""; flex:0 0 calc(50vw - clamp(150px, 15vw, 220px) - max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)))); }
/* phones: same pin + pan, narrower cards, tighter stage. The spacer keeps
the last card centred: half the viewport minus half a card minus the
track's own right padding (the gutter, since the container is wider than
the viewport here). */
@media (max-width:899px) {
.why-pin-stage { gap:var(--sp-4); padding-block:var(--sp-5); }
.why-pin .why-item { width:min(78vw, 360px); padding:var(--sp-4) var(--sp-3) var(--sp-4); }
.why-pin .why-item h3 { font-size:1.3rem; }
.why-pin .why-item p { font-size:0.98rem; }
.why-track::after { flex-basis:calc(50vw - min(39vw, 180px) - var(--gutter)); }
}
/* reduced motion: no pin, the track is a native swipe row */
@media (prefers-reduced-motion: reduce) {
.why-pin-stage { min-height:0; padding-block:var(--section-y); gap:var(--sp-4); }
.why-track { width:auto; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
padding-bottom:var(--sp-2); scrollbar-width:none; }
.why-track::-webkit-scrollbar { display:none; }
.why-track::after { flex-basis:var(--gutter); }
.why-pin .why-item { width:min(78vw, 360px); scroll-snap-align:center; transform:none !important; opacity:1 !important; }
.why-pin-stage { transform:none !important; }
}
}
/* ==========================================================================
Header: fora.so treatment. The bar itself is transparent and thin; a tall
eased gradient behind it fades the page ground into nothing over ~200px,
so content scrolls up into a soft cloud instead of hitting a hard edge.
No blur, no border, no shrink on scroll.
========================================================================== */
@layer components {
.site-header, .site-header.scrolled { background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none;
border-bottom-color:transparent; overflow:visible; }
.site-header::before { content:""; position:absolute; left:0; right:0; top:0; height:220px; z-index:-1; pointer-events:none;
background:linear-gradient(to bottom, rgba(251,250,247,1) 0%, rgba(251,250,247,1) 26%, rgba(251,250,247,0.980) 32.2%, rgba(251,250,247,0.926) 38.3%, rgba(251,250,247,0.844) 44.5%, rgba(251,250,247,0.741) 50.7%, rgba(251,250,247,0.624) 56.8%, rgba(251,250,247,0.500) 63.0%, rgba(251,250,247,0.376) 69.2%, rgba(251,250,247,0.259) 75.3%, rgba(251,250,247,0.156) 81.5%, rgba(251,250,247,0.074) 87.7%, rgba(251,250,247,0.020) 93.8%, rgba(251,250,247,0.000) 100.0%); }
.site-header { isolation:isolate; }
/* the cloud only exists once the page has moved; at rest the hero sky is untouched */
.site-header::before { opacity:0; transition:opacity .35s ease; }
.site-header.scrolled::before { opacity:1; }
/* buttons: rounded, not oval */
.btn, .phone-btn { border-radius:12px; }
.site-header .nav, .site-header.scrolled .nav { padding-block:.4rem; }
.site-header .brand-logo, .site-header.scrolled .brand-logo { height:36px; }
@media (max-width:760px) {
.site-header .brand-logo, .site-header.scrolled .brand-logo { height:32px; }
.site-header .nav { padding-block:.3rem; }
}
}