/* ============================================================
MOBILE LAYOUT (<=768px) — base design width 360px
------------------------------------------------------------
Desktop (>768px) is 100% untouched: every rule below lives
inside this single media query, and the section wrappers added
in the HTML are inline `display:contents` on desktop, so they
generate no box and their absolutely-positioned children keep
resolving against .page exactly as before. Only inside this
query do the wrappers become real flow boxes and the whole
1920px scale system is dropped for a single-column flow.
Shared base (scale reset + header/nav) applies to index,
catalog and product; homepage sections are fully styled here.
============================================================ */
@media (max-width:768px){
/* ---------- never scroll sideways ---------- */
html,body{ overflow-x:hidden!important; max-width:100%; }
/* ---------- kill the 1920 "scale-to-fit" system ---------- */
.page-wrap{
width:100%!important;
height:auto!important;
overflow:visible!important;
display:flex!important; flex-direction:column;
position:relative;
isolation:isolate; /* own stacking context so the z-index:-1
watermark sits above the body bg (not
hidden behind it), still under content */
padding-top:60px; /* clear the fixed header bar */
}
/* .page becomes display:contents so ITS children (the section wrappers + the
fixed header) collapse into direct flex items of .page-wrap, sitting in the
SAME flex column as .hero-bottle and .pinned-front-layer (which live in
.page-wrap, before .page, in the DOM). That lets CSS `order` interleave the
title (from inside .page) before the bottle, and the 25+ block after the
tagline. The page background is safe: body already has background:var(--bg).
The desktop JS still positions .hero-bottle/.pinned-front-layer against
.page-wrap, so they are NOT moved in the DOM. */
.page{
width:100%!important;
height:auto!important;
transform:none!important;
overflow:visible!important;
display:contents!important;
}
/* ---------- section wrappers -> real blocks (beat inline display:contents).
.m-hero stays display:contents (its inline value) so its two inner wrappers
promote to direct flex items of .page-wrap and can be ordered individually. */
.m-range,.m-cards,.m-std,.m-splash,
.m-tech,.m-find,.m-contacts{
display:block!important; width:100%;
}
/* ---------- force every scroll-driven effect to its finished/visible state ---------- */
.reveal,.find-rise,.footer-rise,.footer-rise-lead,.hero-anim,
.splash-img,.find-canister-wrap,.marker,.ring-dot{
opacity:1!important; transform:none!important; filter:none!important;
}
/* ---------- reset the desktop-absolute homepage elements into flow ---------- */
.logo-header,.nav-link,.pill,.hero-h1,.hero-25,.hero-25-sub,.hero-25-p,
.hero-right-p,.range-h,.cards-lead,.card,.card-title,.card-num,.card-lorem,
.std-h,.ring-svg,.splash-wrap,.splash-img,.ring-dot,.marker,.tech-h,.tech-p,
.find-wm,.find-glow,.find-canister-wrap,.find-canister,.find-h,.find-p,
.contacts-h,.contacts-info,.banner,.contact-form,.form-legal,
.footer-anchor,.footer-bar,.footer-logo,.footer-legal,.footer-name,
.footer-rights,.footer-policy,
.hero-bottle,.pinned-front-layer,.hero-reliab{
position:static!important;
left:auto!important; top:auto!important; right:auto!important; bottom:auto!important;
white-space:normal!important;
}
/* purely decorative desktop-only art (would overflow / clutter on 360px) */
.find-wm,.find-glow,.ring-svg,.ring-dot{ display:none!important; }
/* faint "OILRIGHT" watermark behind the hero — kept per the mockup. Placed
absolutely behind the title/canister (z-index:-1), bleeding off the left
edge; body's overflow-x:hidden clips the overhang so it never adds a
sideways scroll. (.wm-full is inside .page which is display:contents on
mobile, so it resolves against .page-wrap, position:relative.) */
.wm-full{
display:block!important;
position:absolute!important; z-index:-1; pointer-events:none;
top:78px; left:10px; width:374px; height:auto;
}
/* =========================================================
HEADER — fixed top bar + pure-CSS hamburger dropdown
========================================================= */
.m-header{
display:flex!important; align-items:center; gap:10px;
position:fixed!important; top:0; left:0; right:0; z-index:200;
height:60px; padding:0 20px;
background:rgba(92,91,91,0.97);
border-bottom:1px solid rgba(255,255,255,0.10);
}
.m-header .logo-header{
position:static!important; width:132px; height:19px; z-index:auto;
}
.m-header .pill-order{
position:static!important; margin-left:auto;
width:auto; height:40px; padding:0 16px; border-radius:9px;
}
.m-header .pill-order .nav-cta{ font-size:13px; }
.m-nav-toggle{ display:none!important; }
.m-burger{
display:flex!important; flex-direction:column; justify-content:center;
gap:5px; width:44px; height:44px; padding:10px; cursor:pointer;
position:static!important;
}
.m-burger span{
display:block; height:2px; width:100%; background:var(--white);
border-radius:2px; transition:transform .25s ease, opacity .2s ease;
}
.m-nav-toggle:checked ~ .m-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.m-nav-toggle:checked ~ .m-burger span:nth-child(2){ opacity:0; }
.m-nav-toggle:checked ~ .m-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
/* dropdown panel — collapsed by default, expands when the checkbox is on */
.nav{
position:fixed!important; top:60px; left:0; right:0;
width:100%!important; height:auto!important; z-index:190;
background:rgba(92,91,91,0.99);
display:flex; flex-direction:column;
max-height:0; overflow:hidden;
transition:max-height .3s ease;
box-shadow:0 14px 26px rgba(0,0,0,0.28);
}
.m-nav-toggle:checked ~ .nav{ max-height:70vh; }
.nav-link{
position:static!important; display:block;
padding:15px 24px; font-weight:400; font-size:16px; letter-spacing:.5px;
border-top:1px solid rgba(255,255,255,0.08);
}
/* =========================================================
HERO — title -> big 3D bottle -> tagline -> copy -> 25+
------------------------------------------------------------
Flow order is controlled by flex `order` on the direct children
of .page-wrap (because .page + .m-hero are display:contents, the
hero pieces are all siblings here). Target visual order at 360px:
1 title (.m-hero-top) order -5
2 big 3D bottle (.hero-bottle) order -4
3 tagline (.pinned-front-layer) order -3
4 "Специалистами…" + 25+ block (.m-hero-25) order -2
5 range and everything after default order 0, in source order
========================================================= */
/* title wrapper — real block on mobile, first in the hero */
.m-hero-top{
display:block!important; width:100%; order:-5;
padding:22px 20px 4px;
}
.hero-h1{
position:static!important; font-size:28px; line-height:1.22;
white-space:normal!important; margin:0;
}
/* keep the inner
visible: no space around it in the source, so hiding it
would fuse the words ("линейкамоторных"). */
/* the mockup drops the "В каталог" button from the hero (redundant with the
nav + the later "Найдите масло" section) */
.pill-catalog{ display:none!important; }
/* big dominant canister */
.hero-bottle{
position:static!important; z-index:1; order:-4;
width:100%!important; height:430px!important; /* was 410 — a tall frame is what makes the canister
full-width: it forces the horizontal extent to be
the binding fit constraint (see fitCameraToModel),
so the bottle spans nearly edge-to-edge, uncropped */
margin:-16px 0 -10px;
pointer-events:auto; touch-action:pan-y; /* allow finger-spin (JS), keep vertical scroll */
}
#bottleCanvas{
-webkit-mask-image:none; mask-image:none;
pointer-events:auto;
}
.pinned-front-layer{
position:static!important; transform:none!important; order:-3;
width:100%; text-align:left; z-index:2; pointer-events:none;
}
/* mockup places the tagline larger and offset toward the centre-right
(starts ~1/5 in from the left), left-aligned across its two lines */
.hero-reliab{
position:static!important; text-align:right; text-shadow:none;
font-size:30px; font-weight:700; line-height:1.14; white-space:normal!important;
margin:0 20px 0 16px;
}
/* keep the inner
visible: there's no space around it in the source, so
hiding it would fuse the words ("Надежность икачество"). */
/* "Специалистами…" paragraph + the 25+ block — real flex-column block,
ordered right after the tagline. hero-right-p is pulled to the top with
order:-1 so the small paragraph precedes the "25+" figure. */
.m-hero-25{
display:flex!important; flex-direction:column; width:100%; order:-2;
padding:14px 20px 6px;
}
.hero-right-p{ order:-1; text-align:right; }
.m-brk{ display:inline!important; }
.hero-25{
position:static!important; font-size:40px; line-height:1; margin:6px 0 2px;
}
.hero-25-sub{
position:static!important; font-size:13px; letter-spacing:.6px; margin:0 0 10px;
}
.hero-25-p,.hero-right-p{
position:static!important; width:auto!important;
font-size:13px; line-height:1.5; opacity:.85; margin:0 0 14px;
}
/* =========================================================
RANGE ("От 1 литра до 200 литров …")
========================================================= */
.m-range{ padding:18px 20px; scroll-margin-top:72px; }
.range-h{
position:static!important; text-align:center;
font-size:30px; line-height:1.3; white-space:normal!important;
}
.range-h .big{ font-size:42px; }
/* =========================================================
CARDS — 3 stacked full-width gold cards
========================================================= */
.m-cards{ padding:6px 20px 18px; }
.cards-lead{
position:static!important; width:auto!important; height:auto!important;
font-size:15px; line-height:1.55; margin:0 0 20px;
}
.cards-wrap{ display:flex!important; flex-direction:column; gap:16px; }
.m-card{
display:block!important; position:relative;
background:var(--gold); border-radius:14px;
padding:22px 20px 18px; overflow:hidden;
box-shadow:0 3px 8px rgba(255,224,166,0.28);
}
.m-card .card{ display:none!important; } /* the empty desktop bg box */
.m-card .card-title{
position:static!important; width:auto!important;
font-size:22px; line-height:1.2; letter-spacing:.6px;
color:var(--white); margin:0 0 12px;
}
.m-card .card-title p{ margin:0; }
.m-card .card-lorem{
position:static!important; width:auto!important;
font-size:13px; line-height:1.55; margin:0 0 6px;
}
.m-card .card-num{
position:static!important; width:auto!important;
font-size:88px!important; line-height:.9; letter-spacing:2px;
opacity:.30; margin:6px 0 0;
}
/* =========================================================
STANDARDS heading
========================================================= */
.m-std{ padding:12px 20px; }
.std-h{
position:static!important; width:auto!important;
font-size:26px; line-height:1.25; white-space:normal!important;
}
/* =========================================================
SPLASH — image + markers as a stacked list
========================================================= */
.m-splash{ padding:16px 20px; }
.splash-wrap{
position:static!important; width:auto!important; height:auto!important;
display:flex!important; justify-content:center; margin:0 0 22px;
}
.splash-img{
position:static!important; width:75%!important; max-width:280px; height:auto!important;
object-fit:contain; opacity:1!important; transform:none!important;
}
.marker{
position:static!important; width:auto!important;
opacity:1!important; transform:none!important;
font-size:14px; line-height:1.5; margin:0 0 14px;
padding-left:14px; border-left:2px solid var(--gold);
}
.marker p{ margin:0; }
/* =========================================================
TECH
========================================================= */
.m-tech{ padding:16px 20px; }
.tech-h{
position:static!important; width:auto!important; text-align:left;
font-size:26px; line-height:1.25; white-space:normal!important;
}
.tech-p{
position:static!important; width:auto!important; height:auto!important;
font-size:15px; line-height:1.6; margin-top:12px;
}
/* =========================================================
FIND — "Найдите масло…"
========================================================= */
.m-find{ padding:16px 20px; position:relative; }
.find-canister-wrap{
position:static!important; width:auto!important; height:auto!important;
opacity:1!important; transform:none!important;
display:flex!important; justify-content:center; margin:6px 0 16px;
}
.find-canister{
position:static!important; width:auto!important; height:280px!important;
max-width:100%; object-fit:contain; animation:none!important;
}
.find-h{
position:static!important; font-size:26px; line-height:1.25;
white-space:normal!important; transform:none!important; margin:0 0 12px;
}
/* keep the inner
s visible: no spaces around them in the source, so
hiding them would fuse words ("масло,подходящее", "именновашей"). */
.find-p{
position:static!important; width:auto!important;
font-size:15px; line-height:1.6; transform:none!important; margin:0 0 20px;
}
.pill-find{
position:static!important; width:100%!important; max-width:280px; height:48px;
}
/* =========================================================
CONTACTS — info + banner + form
========================================================= */
.m-contacts{ padding:24px 20px; scroll-margin-top:72px; }
.contacts-h{
position:static!important; font-size:30px; margin:0 0 20px;
white-space:normal!important;
}
.contacts-info{
position:static!important; width:auto!important;
font-size:15px; line-height:1.6; margin:0 0 22px;
}
.contacts-info p{ margin:0 0 12px; }
.banner{
position:static!important; width:100%!important; height:180px!important;
margin:0 0 26px;
}
.contact-form{
position:static!important; width:100%!important; height:auto!important;
display:flex!important; flex-direction:column; gap:26px;
}
/* Force the fields into normal flow: style.css pins each one with a huge
top (field-name top:4208px … field-msg top:4670px). Left un-cleared, they
drop ~4000-5000px below their flow slot (empty form area). position:relative
keeps the floating label (.field span, position:absolute) anchored to the
field. */
.field{
position:relative!important; top:auto!important; left:auto!important;
width:100%!important; display:block;
}
.field-name,.field-email,.field-phone,.field-region,.field-msg{ top:auto!important; }
.field span{ font-size:16px; }
.field input{ width:100%!important; font-size:16px; }
.pill-submit{
position:static!important; width:100%!important; max-width:280px; height:48px;
margin-top:2px;
}
.form-legal{
position:static!important; width:auto!important; font-size:11px; margin-top:2px;
}
/* =========================================================
FOOTER
========================================================= */
.m-footer{
display:block!important; background:var(--footer);
padding:32px 20px 28px;
}
.footer-anchor,.footer-bar{ display:none!important; }
.footer-logo{
position:static!important; width:100%!important; height:auto!important;
max-width:100%; margin:0 0 20px; pointer-events:auto;
}
.footer-logo img{ width:100%; height:auto; }
.footer-legal{
position:static!important; width:auto!important;
font-size:11px; line-height:1.6; opacity:.7; margin:0 0 16px;
}
.footer-name{
position:static!important; font-size:14px; opacity:.85; margin:0 0 6px;
}
.footer-rights{
position:static!important; font-size:11px; opacity:.7; margin:0 0 6px;
white-space:normal!important;
}
.footer-policy{
position:static!important; font-size:11px; opacity:.7; text-decoration:underline;
}
/* =========================================================
MOBILE SCROLL REVEAL — rise + fade as elements enter view
---------------------------------------------------------
The desktop reveal/pin/scale system is disabled on mobile
(innerWidth<=768 gates in main.js/site.js + the force-show
reset near the top of this file), so mobile had no motion.
JS (main.js on index, site.js on catalog/product) tags the
chosen blocks with `.m-anim` and flips `.m-in` via a light
IntersectionObserver — fully independent of scale/pin/GSAP.
The `:not(.m-in)` selector is one class heavier than the
force-show reset above, so it can legitimately hold reveal
targets (.reveal/.marker/.splash-img/.hero-anim/…) hidden
until they enter, then hand them back. prefers-reduced-motion
is honored in JS (the classes are simply never added). */
.m-anim{
transition:opacity .6s cubic-bezier(.22,.61,.36,1) var(--m-delay,0s),
transform .6s cubic-bezier(.22,.61,.36,1) var(--m-delay,0s);
backface-visibility:hidden;
/* NOTE: no persistent `will-change` — leaving it on ~20 elements forever
forces a compositor layer per element and janks/hangs mobile GPUs. JS
strips `.m-anim` on transitionend once each element has entered, so the
transition machinery is released right after it's used. */
}
.m-anim:not(.m-in){
opacity:0!important;
transform:translateY(26px)!important;
filter:none!important;
}
.m-anim.m-in{ opacity:1!important; transform:none!important; }
/* Hero canister: OPACITY-ONLY fade — the element wraps the live WebGL
#bottleCanvas that repaints every frame, so animating a transform on it
(scale/translate) thrashes the compositor and desyncs resizeRenderer's
getBoundingClientRect. A plain fade avoids transforming the canvas. */
.m-anim.m-hero-bottle:not(.m-in){
opacity:0!important;
transform:none!important;
}
.m-anim.m-hero-bottle{
transition:opacity .7s cubic-bezier(.22,.61,.36,1) var(--m-delay,0s);
}
}