/* Fonts loaded via in HTML — see each page */
/* ── Variables ─────────────────────────────────────────── */
:root {
--void: #07100a;
--deep: #0d1a10;
--panel: #111e14;
--border: #1e3324;
--green: #1a7a47;
--green-d: #145f38;
--green-l: #4ade80;
--muted: #5a8c6a;
--text: #e4f0e8;
--text-dim: #7aaa88;
--steel: #c8d4dc;
--gray-l: #e2e8e4;
--bg: #f5f7f5;
--white: #ffffff;
--amber: #f59e0b;
--font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
--mono: 'JetBrains Mono', 'SF Mono', ui-monospace, 'Courier New', monospace;
--radius: 10px;
--max: 1240px;
--s1: 0 2px 8px rgba(0,0,0,.08);
--s2: 0 6px 24px rgba(0,0,0,.14);
--s3: 0 12px 48px rgba(0,0,0,.2);
--gs: 0 0 0 3px rgba(26,122,71,.2);
}
/* ── Reset ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip}
body{font-family:var(--font);background:var(--bg);color:#1a2e1d;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select{font-family:inherit}
.container{max-width:var(--max);margin:0 auto;padding:0 28px}
.mono{font-family:var(--mono)}
/* ── Gate veil animation ───────────────────────────────── */
.veil {
position: fixed;
inset: 0;
z-index: 9999;
pointer-events: none;
overflow: hidden;
background:
repeating-linear-gradient(
180deg,
transparent 0px, transparent 46px,
rgba(0,0,0,.35) 46px, rgba(0,0,0,.25) 48px,
rgba(255,255,255,.03) 48px, transparent 50px
),
linear-gradient(180deg, #162a1c 0%, #0a1410 55%, #162a1c 100%);
display: flex;
align-items: center;
justify-content: center;
animation: veil-rise 1.9s cubic-bezier(0.76,0,0.24,1) 0.3s both;
}
.veil-logo {
font-size: clamp(18px,3.5vw,38px);
font-weight: 900;
letter-spacing: 0.25em;
text-transform: uppercase;
color: rgba(255,255,255,.07);
animation: veil-logo-out 0.5s ease 1.4s both;
user-select: none;
}
@keyframes veil-rise {
0% { transform: translateY(0); }
100% { transform: translateY(-100%); }
}
@keyframes veil-logo-out {
to { opacity: 0; }
}
/* ── Mockup bar ────────────────────────────────────────── */
.mockup-bar {
position: sticky; top: 0; z-index: 200;
background: #4c1d95;
color: #fff;
text-align: center;
padding: 10px 24px;
font-size: 13px;
font-weight: 500;
}
.mockup-bar a { color: #fde68a; margin: 0 6px; font-weight: 600; }
.mockup-bar a:hover { text-decoration: underline; }
.mockup-bar a.cur { color: #fff; text-decoration: underline; }
/* ── Header ────────────────────────────────────────────── */
.site-header {
background: var(--void);
position: sticky; top: 40px; z-index: 100;
border-bottom: 1px solid var(--border);
}
.hdr {
max-width: var(--max); margin: 0 auto; padding: 0 28px;
display: flex; align-items: center; gap: 20px; height: 62px;
}
.logo {
display: flex; align-items: center; gap: 10px;
color: var(--text); font-weight: 800; font-size: 16px;
letter-spacing: -.3px; white-space: nowrap; flex-shrink: 0;
}
.logo-mark {
width: 36px; height: 36px;
background: var(--green);
border-radius: 7px;
display: flex; align-items: center; justify-content: center;
color: white; flex-shrink: 0;
}
.nav { display: flex; gap: 2px; flex: 1; }
.nav a {
color: var(--text-dim); font-size: 13.5px; font-weight: 500;
padding: 7px 12px; border-radius: 6px; transition: all .18s;
white-space: nowrap;
}
.nav a:hover { color: var(--text); background: rgba(255,255,255,.06); }
.nav a.on { color: var(--green-l); }
.hdr-phone { color: var(--text); font-size: 14px; font-weight: 600; white-space: nowrap; }
.hdr-cta {
background: var(--green); color: #fff; border: none;
padding: 9px 18px; border-radius: 7px; font-size: 13px;
font-weight: 700; cursor: pointer; transition: background .18s; flex-shrink: 0;
}
.hdr-cta:hover { background: var(--green-d); }
/* ── Hero ──────────────────────────────────────────────── */
.hero {
background: var(--void);
min-height: 460px;
display: flex; flex-direction: column; justify-content: center;
position: relative; overflow: hidden;
padding: 48px 0 60px;
}
/* Dot-grid background */
.hero::before {
content: '';
position: absolute; inset: 0;
background-image: radial-gradient(circle, rgba(74,222,128,.09) 1px, transparent 1px);
background-size: 34px 34px;
pointer-events: none;
}
/* Blueprint gate – right side decorative */
.hero-blueprint {
position: absolute; right: -40px; top: 50%;
transform: translateY(-50%);
width: min(52%, 620px);
opacity: .10;
pointer-events: none;
}
.hero-blueprint svg { width: 100%; height: auto; }
/* Gate panel right-side decoration */
.hero-gate-side {
position: absolute; right: 0; top: 0; bottom: 0;
width: 40%; z-index: 0;
clip-path: polygon(100px 0, 100% 0, 100% 100%, 0 100%);
background:
repeating-linear-gradient(180deg,
transparent 0, transparent 43px,
rgba(255,255,255,.07) 43px, rgba(255,255,255,.04) 45px,
rgba(0,0,0,.12) 45px, transparent 47px),
linear-gradient(160deg, #162a1c 0%, #0c1712 50%, #162a1c 100%);
pointer-events: none;
}
.hero-gate-side::before {
content: '';
position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
background: linear-gradient(180deg, transparent 0%, rgba(74,222,128,.3) 25%, rgba(74,222,128,.3) 75%, transparent 100%);
}
.hero-corner {
position: absolute; width: 20px; height: 20px;
pointer-events: none; z-index: 1;
}
.hero-corner::before, .hero-corner::after {
content: ''; position: absolute; background: rgba(74,222,128,.22);
}
.hero-corner.tl { top: 24px; left: 24px; }
.hero-corner.tl::before { width: 1px; height: 100%; left: 0; top: 0; }
.hero-corner.tl::after { width: 100%; height: 1px; left: 0; top: 0; }
.hero-corner.tr { top: 24px; right: 24px; }
.hero-corner.tr::before { width: 1px; height: 100%; right: 0; top: 0; }
.hero-corner.tr::after { width: 100%; height: 1px; right: 0; top: 0; }
.hero-corner.bl { bottom: 24px; left: 24px; }
.hero-corner.bl::before { width: 1px; height: 100%; left: 0; bottom: 0; }
.hero-corner.bl::after { width: 100%; height: 1px; left: 0; bottom: 0; }
.hero-corner.br { bottom: 24px; right: 24px; }
.hero-corner.br::before { width: 1px; height: 100%; right: 0; bottom: 0; }
.hero-corner.br::after { width: 100%; height: 1px; right: 0; bottom: 0; }
/* Animated-in content */
.hero-content {
position: relative; z-index: 2; max-width: 680px;
animation: emerge .5s ease .15s both;
}
.hero-tag {
font-family: var(--mono); font-size: 11px; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase;
color: var(--green-l);
display: flex; align-items: center; gap: 10px;
margin-bottom: 24px;
}
.hero-tag::before {
content: '';
display: inline-block; width: 32px; height: 1.5px;
background: var(--green-l);
}
.hero h1 {
font-size: clamp(36px, 5vw, 68px);
color: var(--text);
font-weight: 900; line-height: 1.05; letter-spacing: -2px;
margin-bottom: 20px;
}
.hero h1 em {
color: var(--green-l); font-style: normal;
text-shadow:
0 0 16px rgba(74,222,128,.45),
0 0 32px rgba(74,222,128,.25);
}
/* Halo вокруг H1 и подзаголовка — текст читаем на любом фрагменте фото */
.hero.has-photo h1,
.hero.has-photo .hero-sub,
.hero.has-photo .hero-tag {
text-shadow:
0 2px 4px rgba(0,0,0,.7),
0 4px 12px rgba(0,0,0,.55),
0 0 28px rgba(0,0,0,.4);
}
.hero-sub {
font-size: 16px; color: var(--text-dim); max-width: 440px;
line-height: 1.6; margin-bottom: 28px;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
/* Hero stats (bottom strip) */
.hero-stats {
position: absolute; bottom: 0; left: 0; right: 0;
border-top: 1px solid var(--border);
animation: emerge .5s ease .3s both;
}
.hero-stats-inner {
max-width: var(--max); margin: 0 auto; padding: 0 28px;
display: flex;
}
.hstat {
flex: 1; padding: 20px 24px;
border-right: 1px solid var(--border);
display: flex; align-items: baseline; gap: 12px;
}
.hstat:last-child { border-right: none; }
.hstat-n {
font-size: 36px; font-weight: 900;
color: var(--text); line-height: 1;
letter-spacing: -1.5px;
font-variant-numeric: tabular-nums;
}
.hstat-l { font-size: 12px; color: var(--text-dim); line-height: 1.3; max-width: 90px; }
.hstat-unit { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: .05em; }
@keyframes emerge {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── Buttons ────────────────────────────────────────────── */
.btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 13px 24px; border-radius: 9px; font-weight: 700;
font-size: 14px; border: none; cursor: pointer; transition: all .2s;
white-space: nowrap;
}
.btn-green { background: var(--green); color: #fff; }
.btn-green:hover { background: var(--green-d); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(26,122,71,.45); }
.btn-glass {
background: rgba(7,16,10,.65);
color: #fff;
border: 1px solid rgba(74,222,128,.4);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
text-shadow: 0 1px 3px rgba(0,0,0,.7);
box-shadow: 0 4px 14px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.05);
}
.btn-glass:hover {
background: rgba(13,26,16,.85);
border-color: var(--green-l);
box-shadow: 0 6px 20px rgba(0,0,0,.5), 0 0 18px rgba(74,222,128,.25);
}
.btn-outline-g { background: transparent; color: var(--green); border: 1.5px solid var(--green); }
.btn-outline-g:hover { background: var(--green); color: #fff; }
.btn-dark { background: var(--deep); color: var(--text); }
.btn-dark:hover { background: var(--panel); }
.btn-outline-l { background: transparent; color: #1a2e1d; border: 1.5px solid var(--gray-l); }
.btn-outline-l:hover { border-color: var(--green); color: var(--green); }
.btn-full { width: 100%; justify-content: center; }
.btn-sm { padding: 9px 16px; font-size: 13px; border-radius: 7px; }
.btn-lg { padding: 16px 32px; font-size: 16px; border-radius: 11px; }
/* ── Smart Finder ───────────────────────────────────────── */
.finder {
background: var(--deep);
border-top: 1px solid var(--border);
padding: 0;
}
.finder-wrap {
max-width: var(--max); margin: 0 auto; padding: 52px 28px;
}
.finder-head {
display: flex; align-items: baseline; gap: 20px; margin-bottom: 36px;
}
.finder-num {
font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
text-transform: uppercase; color: var(--green-l); font-weight: 700;
}
.finder-title {
font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: -.4px;
}
.finder-hint { font-size: 13px; color: var(--text-dim); margin-left: auto; }
/* Progress track */
.finder-progress {
display: flex; gap: 8px; margin-bottom: 32px;
align-items: center;
}
.fp-step {
display: flex; align-items: center; gap: 8px;
font-family: var(--mono); font-size: 11px; color: var(--muted);
letter-spacing: .08em;
}
.fp-dot {
width: 28px; height: 28px; border-radius: 50%;
border: 1.5px solid var(--border);
display: flex; align-items: center; justify-content: center;
font-family: var(--mono); font-size: 10px; font-weight: 700;
color: var(--muted); transition: all .25s;
}
.fp-dot.done { background: var(--green); border-color: var(--green); color: #fff; }
.fp-dot.active { border-color: var(--green-l); color: var(--green-l); }
.fp-line { flex: 1; height: 1px; background: var(--border); max-width: 60px; }
/* Step panel */
.finder-step { display: none; }
.finder-step.active { display: block; animation: step-in .3s ease both; }
@keyframes step-in {
from { opacity: 0; transform: translateX(12px); }
to { opacity: 1; transform: translateX(0); }
}
.finder-q {
font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 20px;
}
.finder-opts {
display: flex; gap: 12px; flex-wrap: wrap;
}
.fopt {
flex: 1; min-width: 140px; max-width: 220px;
background: var(--panel);
border: 1.5px solid var(--border);
border-radius: 10px;
padding: 18px 16px;
cursor: pointer;
transition: all .2s;
text-align: center;
color: var(--text-dim);
}
.fopt:hover {
border-color: var(--green-l);
background: rgba(26,122,71,.32);
color: #ffffff;
box-shadow: 0 6px 18px rgba(0,0,0,.25), 0 0 16px rgba(74,222,128,.18);
transform: translateY(-2px);
}
.fopt:hover .fopt-sub { color: rgba(255,255,255,.85); }
.fopt.sel {
border-color: var(--green-l);
background: rgba(74,222,128,.2);
color: #ffffff;
box-shadow: 0 0 0 3px rgba(74,222,128,.22), 0 6px 22px rgba(74,222,128,.25);
}
.fopt.sel .fopt-sub { color: rgba(255,255,255,.88); }
.fopt-icon { margin: 0 auto 10px; color: var(--muted); transition: color .2s; }
.fopt:hover .fopt-icon,
.fopt.sel .fopt-icon { color: var(--green-l); }
.fopt-text { font-size: 13px; font-weight: 700; line-height: 1.3; transition: color .2s; }
.fopt-sub { font-size: 11px; color: var(--muted); margin-top: 4px; font-family: var(--mono); transition: color .2s; }
/* Result state */
.finder-result {
display: none;
animation: step-in .4s ease both;
}
.finder-result.active { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.fr-count {
font-size: 52px; font-weight: 900; color: var(--green-l);
line-height: 1; letter-spacing: -2px;
}
.fr-text { font-size: 16px; color: var(--text-dim); line-height: 1.5; }
.fr-text strong { color: var(--text); display: block; font-size: 18px; margin-bottom: 4px; }
.finder-reset {
background: none; border: none; color: var(--muted); font-size: 12px;
cursor: pointer; text-decoration: underline; margin-left: auto; font-family: var(--font);
}
/* ── Section wrapper ───────────────────────────────────── */
.sec { padding: 72px 0; }
.sec-dark { background: var(--deep); }
.sec-void { background: var(--void); }
.sec-white { background: var(--white); }
.sec-label {
font-family: var(--mono); font-size: 11px; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase;
color: var(--muted); margin-bottom: 12px;
display: flex; align-items: center; gap: 10px;
}
.sec-label::after { content: ''; flex: 1; max-width: 48px; height: 1px; background: var(--border); }
.sec-label.light { color: var(--gray-l); }
.sec-label.light::after { background: var(--gray-l); }
.sec-h2 {
font-size: clamp(24px,3vw,38px); font-weight: 900;
letter-spacing: -1px; line-height: 1.15; margin-bottom: 6px;
}
.sec-h2-dark { color: var(--text); }
.sec-p { font-size: 15px; color: #6b7f70; }
.sec-p-dim { font-size: 15px; color: var(--text-dim); }
/* ── Editorial catalog grid (index) ────────────────────── */
.cat-editorial {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 260px 260px;
gap: 14px;
margin-top: 40px;
}
.cecard {
border-radius: var(--radius);
overflow: hidden;
position: relative;
cursor: pointer;
background: var(--deep);
}
.cecard-1 { grid-column: 1 / 6; grid-row: 1 / 3; }
.cecard-2 { grid-column: 6 / 9; grid-row: 1 / 2; }
.cecard-3 { grid-column: 9 / 13; grid-row: 1 / 2; }
.cecard-4 { grid-column: 6 / 9; grid-row: 2 / 3; }
.cecard-5 { grid-column: 9 / 11; grid-row: 2 / 3; }
.cecard-6 { grid-column: 11 / 13; grid-row: 2 / 3; }
.cecard-bg {
position: absolute; inset: 0;
transition: transform .5s ease;
}
.cecard:hover .cecard-bg { transform: scale(1.04); }
/* Gate texture backgrounds */
.bg-sectional { background: repeating-linear-gradient(180deg,transparent 0,transparent 43px,rgba(0,0,0,.28) 43px,rgba(0,0,0,.18) 45px,rgba(255,255,255,.04) 45px,transparent 47px), linear-gradient(135deg,#dde4ec 0%,#c4cdd8 45%,#d0d9e4 100%); }
.bg-sliding { background: linear-gradient(180deg,#3c3c3c 0%,#2a2a2a 50%,#363636 100%); }
.bg-swing { background: repeating-linear-gradient(90deg,transparent 0,transparent 60px,rgba(0,0,0,.12) 60px,rgba(0,0,0,.08) 62px), linear-gradient(160deg,#b8c8a0 0%,#8aaa70 50%,#b0c498 100%); }
.bg-door { background: linear-gradient(180deg,#c8a878 0%,#a47840 50%,#c0a070 100%); }
.bg-garage { background: repeating-linear-gradient(180deg,transparent 0,transparent 30px,rgba(0,0,0,.2) 30px,rgba(0,0,0,.12) 32px), linear-gradient(160deg,#e8d8c8 0%,#d0b898 50%,#e0caa8 100%); }
.bg-auto { background: radial-gradient(ellipse at 40% 40%, #1e3a2a 0%,#0d1a10 100%); }
.cecard-overlay {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(7,16,10,.88) 0%, rgba(7,16,10,.2) 55%, transparent 100%);
}
.cecard-body {
position: absolute; bottom: 0; left: 0; right: 0;
padding: 20px;
}
.cecard-count {
font-family: var(--mono); font-size: 10px; font-weight: 700;
letter-spacing: .1em; color: var(--green-l); margin-bottom: 6px;
}
.cecard-title { font-size: 16px; font-weight: 800; color: #fff; line-height: 1.2; margin-bottom: 8px; }
.cecard-1 .cecard-title { font-size: 26px; }
.cecard-link {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12px; font-weight: 700; color: var(--green-l);
opacity: 0; transform: translateY(6px);
transition: all .25s;
}
.cecard:hover .cecard-link { opacity: 1; transform: translateY(0); }
.cecard-arrow {
width: 20px; height: 20px; background: var(--green);
border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
/* ── Brand strip ────────────────────────────────────────── */
.brand-strip {
display: flex; gap: 12px; justify-content: center;
flex-wrap: wrap; margin-top: 40px;
}
.brand-chip {
padding: 11px 20px;
background: var(--panel); border: 1px solid var(--border);
border-radius: 8px; font-weight: 800; font-size: 14px;
color: var(--text-dim); letter-spacing: -.2px;
transition: all .2s;
}
.brand-chip:hover { border-color: var(--green); color: var(--text); }
/* ── USP dark strip ─────────────────────────────────────── */
.usp-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--border); }
.usp-item { background: var(--deep); padding: 36px 28px; }
.usp-num { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: .1em; margin-bottom: 12px; }
.usp-val { font-size: 28px; font-weight: 900; color: var(--text); letter-spacing: -1px; line-height: 1; margin-bottom: 8px; }
.usp-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.usp-desc { font-size: 12px; color: var(--text-dim); line-height: 1.55; }
/* ── CTA Banner ─────────────────────────────────────────── */
.cta-band {
background: var(--green);
padding: 64px 0;
position: relative; overflow: hidden;
}
.cta-band::before {
content: '';
position: absolute; inset: 0;
background-image: radial-gradient(circle, rgba(255,255,255,.08) 1px, transparent 1px);
background-size: 28px 28px;
}
.cta-band-inner {
position: relative; z-index: 2;
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 24px;
}
.cta-band h2 { font-size: 30px; font-weight: 900; color: #fff; letter-spacing: -.6px; }
.cta-band p { font-size: 15px; color: rgba(255,255,255,.75); margin-top: 6px; }
.cta-band-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-white { background: #fff; color: var(--green); }
.btn-white:hover { background: rgba(255,255,255,.9); }
.btn-white-ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.4); }
.btn-white-ghost:hover { background: rgba(255,255,255,.1); }
.btn-outline { background: transparent; color: #3a4e3c; border: 1.5px solid var(--gray-l); }
.btn-outline:hover { border-color: var(--green); color: var(--green); }
/* ── Footer ─────────────────────────────────────────────── */
.site-footer { background: var(--void); padding: 52px 0 24px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px; margin-bottom: 40px; }
.footer-logo { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 800; font-size: 16px; margin-bottom: 14px; }
.footer-logo .logo-mark { width: 30px; height: 30px; font-size: 14px; }
.footer-desc { font-size: 13px; color: var(--text-dim); line-height: 1.65; margin-bottom: 20px; }
.footer-phone { font-size: 19px; font-weight: 800; color: var(--text); letter-spacing: -.3px; }
.footer-hours { font-size: 12px; color: var(--muted); font-family: var(--mono); margin-top: 4px; }
.f-col-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 14px; font-family: var(--mono); }
.f-col ul { list-style: none; }
.f-col ul li { margin-bottom: 8px; }
.f-col ul li a { font-size: 13px; color: var(--text-dim); transition: color .18s; }
.f-col ul li a:hover { color: var(--green-l); }
.footer-bottom { border-top: 1px solid var(--border); padding-top: 20px; font-size: 12px; color: var(--muted); font-family: var(--mono); display: flex; justify-content: space-between; letter-spacing: .04em; }
/* ── Breadcrumb ─────────────────────────────────────────── */
.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 12px; font-family: var(--mono); color: var(--muted); padding: 14px 0; }
.breadcrumb a { color: var(--muted); transition: color .15s; }
.breadcrumb a:hover { color: var(--green-l); }
.breadcrumb-sep { opacity: .5; }
.breadcrumb span { color: var(--text-dim); }
.breadcrumb.light a,.breadcrumb.light {
color: #fff;
font-weight: 500;
text-shadow: 0 1px 4px rgba(0,0,0,.95), 0 2px 8px rgba(0,0,0,.7);
}
.breadcrumb.light a:hover { color: var(--green-l); text-shadow: 0 0 12px rgba(74,222,128,.65); }
.breadcrumb.light span { color: rgba(255,255,255,.85); }
.breadcrumb.light .breadcrumb-sep {
color: var(--green-l);
font-weight: 700;
text-shadow: 0 0 8px rgba(74,222,128,.5);
}
.breadcrumb.light span { color: rgba(255,255,255,.7); }
/* ── Page header (section page) ─────────────────────────── */
.page-hdr {
background: var(--void);
padding: 36px 0 32px;
border-bottom: 1px solid var(--border);
}
.page-hdr h1 { font-size: 32px; font-weight: 900; color: var(--text); letter-spacing: -.8px; }
.page-hdr-meta { font-size: 12px; color: var(--text-dim); font-family: var(--mono); margin-top: 4px; }
.page-hdr-row { display: flex; align-items: flex-end; justify-content: space-between; }
/* ── Filters ────────────────────────────────────────────── */
.filter-bar {
background: var(--white);
border-bottom: 1px solid var(--gray-l);
padding: 14px 0;
position: sticky; top: 102px; z-index: 50;
}
.filter-inner { max-width: var(--max); margin: 0 auto; padding: 0 28px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.filter-sep { width: 1px; height: 20px; background: var(--gray-l); margin: 0 4px; }
.chip {
padding: 6px 14px; border-radius: 100px; font-size: 13px; font-weight: 500;
border: 1.5px solid var(--gray-l); background: var(--white); cursor: pointer;
transition: all .18s; color: #3a4e3c;
}
.chip:hover { border-color: var(--green); color: var(--green); }
.chip.on { background: var(--green); border-color: var(--green); color: #fff; font-weight: 700; }
.chip-label { font-size: 11px; font-family: var(--mono); color: #6b7f70; letter-spacing: .06em; text-transform: uppercase; }
.sort-select { border: 1.5px solid var(--gray-l); background: var(--white); padding: 7px 12px; border-radius: 8px; font-size: 13px; font-weight: 500; color: #3a4e3c; cursor: pointer; margin-left: auto; }
/* ── Section layout ─────────────────────────────────────── */
.section-layout { display: grid; grid-template-columns: 256px 1fr; gap: 28px; align-items: start; }
/* ── Sidebar ────────────────────────────────────────────── */
.sidebar {
background: var(--white); border-radius: var(--radius);
border: 1px solid var(--gray-l); overflow: hidden;
position: sticky; top: 150px;
}
.sb-sec { padding: 16px 18px; border-bottom: 1px solid var(--gray-l); }
.sb-sec:last-child { border-bottom: none; }
.sb-title { font-family: var(--mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #6b7f70; margin-bottom: 10px; }
.sb-list { list-style: none; }
.sb-list a { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; border-radius: 6px; font-size: 13px; color: #3a4e3c; transition: all .15s; }
.sb-list a:hover { background: rgba(26,122,71,.06); color: var(--green); }
.sb-list a.on { background: rgba(26,122,71,.1); color: var(--green); font-weight: 700; }
.sb-cnt { font-family: var(--mono); font-size: 10px; color: #6b7f70; }
.sb-input { width: 100%; padding: 8px 10px; border: 1.5px solid var(--gray-l); border-radius: 7px; font-size: 13px; color: #1a2e1d; margin-bottom: 8px; }
.sb-input:last-child { margin-bottom: 0; }
.sb-input:focus { outline: none; border-color: var(--green); }
/* ── Sort bar ───────────────────────────────────────────── */
.sort-bar { display: flex; align-items: center; justify-content: space-between; padding: 20px 0 12px; }
.sort-meta { font-size: 13px; color: #6b7f70; font-family: var(--mono); }
.sort-meta strong { color: #1a2e1d; }
/* ── Product grid ───────────────────────────────────────── */
.product-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.pcard {
background: var(--white); border-radius: var(--radius);
border: 1px solid var(--gray-l); overflow: hidden;
transition: all .22s; cursor: pointer;
}
.pcard:hover { box-shadow: var(--s2); transform: translateY(-3px); border-color: var(--green); }
.pcard-img { height: 190px; position: relative; overflow: hidden; }
.pcard-img-bg { position: absolute; inset: 0; }
/* Gate panel textures */
.gate-white {
background:
radial-gradient(circle at 8% 8%,rgba(0,0,0,.2) 2px,rgba(255,255,255,.12) 3px,transparent 5px),
radial-gradient(circle at 92% 8%,rgba(0,0,0,.2) 2px,rgba(255,255,255,.12) 3px,transparent 5px),
radial-gradient(circle at 8% 92%,rgba(0,0,0,.2) 2px,rgba(255,255,255,.12) 3px,transparent 5px),
radial-gradient(circle at 92% 92%,rgba(0,0,0,.2) 2px,rgba(255,255,255,.12) 3px,transparent 5px),
repeating-linear-gradient(180deg,transparent 0,transparent 43px,rgba(0,0,0,.2) 43px,rgba(0,0,0,.12) 45px,rgba(255,255,255,.06) 45px,transparent 47px),
linear-gradient(160deg,#e4ecf4 0%,#d0dae6 50%,#dce6f0 100%);
}
.gate-anthracite {
background:
repeating-linear-gradient(180deg,transparent 0,transparent 43px,rgba(255,255,255,.07) 43px,rgba(255,255,255,.04) 45px,rgba(0,0,0,.2) 45px,transparent 47px),
linear-gradient(160deg,#42484e 0%,#2c3035 50%,#383e45 100%);
}
.gate-oak {
background:
repeating-linear-gradient(180deg,transparent 0,transparent 43px,rgba(0,0,0,.16) 43px,rgba(0,0,0,.08) 45px,rgba(255,255,255,.04) 45px,transparent 47px),
linear-gradient(160deg,#c8a46a 0%,#a07840 50%,#c09e64 100%);
}
.gate-brown {
background:
repeating-linear-gradient(180deg,transparent 0,transparent 43px,rgba(0,0,0,.2) 43px,rgba(0,0,0,.12) 45px,rgba(255,255,255,.04) 45px,transparent 47px),
linear-gradient(160deg,#6e4830 0%,#4e3020 50%,#6a4430 100%);
}
.gate-silver {
background:
repeating-linear-gradient(180deg,transparent 0,transparent 43px,rgba(0,0,0,.14) 43px,rgba(0,0,0,.08) 45px,rgba(255,255,255,.08) 45px,transparent 47px),
linear-gradient(160deg,#c0c8d0 0%,#a8b2bc 50%,#b8c2cc 100%);
}
.gate-green-ral {
background:
repeating-linear-gradient(180deg,transparent 0,transparent 43px,rgba(0,0,0,.2) 43px,rgba(0,0,0,.12) 45px,rgba(255,255,255,.04) 45px,transparent 47px),
linear-gradient(160deg,#4a7840 0%,#345e28 50%,#486e38 100%);
}
/* Tag label */
.pcard-img[data-tag]::after {
content: attr(data-tag);
position: absolute; top: 10px; right: 10px;
background: var(--green); color: #fff;
font-size: 10px; font-weight: 700; font-family: var(--mono);
padding: 3px 8px; border-radius: 4px; letter-spacing: .06em;
}
.pcard-body { padding: 14px 16px; }
.pcard-brand { font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; }
.pcard-name { font-size: 14px; font-weight: 700; color: #1a2e1d; margin-bottom: 8px; line-height: 1.3; }
.pcard-price { font-size: 20px; font-weight: 900; color: var(--green); letter-spacing: -.5px; margin-bottom: 12px; }
.pcard-price span { font-size: 11px; font-weight: 400; color: #6b7f70; }
.pcard-btn { width: 100%; background: #1a2e1d; color: #fff; border: none; padding: 10px; border-radius: 7px; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .18s; }
.pcard-btn:hover { background: var(--green); }
/* ── Pagination ─────────────────────────────────────────── */
.pagination { display: flex; gap: 4px; justify-content: center; margin-top: 36px; }
.pg { width: 36px; height: 36px; border: 1px solid var(--gray-l); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; cursor: pointer; transition: all .18s; background: #fff; color: #1a2e1d; }
.pg:hover { border-color: var(--green); color: var(--green); }
.pg.on { background: var(--green); border-color: var(--green); color: #fff; }
.pg.wide { width: auto; padding: 0 14px; }
/* ── Product page ───────────────────────────────────────── */
.product-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 600px; }
.product-split-left {
background: var(--deep);
padding: 40px;
position: sticky; top: 102px;
height: calc(100vh - 102px);
display: flex; flex-direction: column;
border-right: 1px solid var(--border);
}
.product-split-right { padding: 40px; background: var(--white); }
/* Gallery in dark panel */
.gallery-main-dark {
flex: 1;
border-radius: 12px; overflow: hidden;
position: relative; margin-bottom: 12px;
}
.gallery-main-bg {
position: absolute; inset: 0;
transition: all .4s;
}
.gallery-thumbs-dark { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.gthumb {
aspect-ratio: 1; border-radius: 7px; overflow: hidden;
border: 2px solid transparent; cursor: pointer; position: relative;
transition: border-color .18s;
}
.gthumb.on { border-color: var(--green-l); }
.gthumb-bg { position: absolute; inset: 0; }
/* Product info */
.pip-avail { display: inline-flex; align-items: center; gap: 6px; background: rgba(74,222,128,.1); color: var(--green-l); border: 1px solid rgba(74,222,128,.2); padding: 4px 10px; border-radius: 100px; font-size: 11px; font-weight: 700; font-family: var(--mono); letter-spacing: .06em; margin-bottom: 14px; }
.pip-avail::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green-l); display: inline-block; }
.pip-name { font-size: 28px; font-weight: 900; letter-spacing: -.7px; color: #1a2e1d; margin-bottom: 4px; line-height: 1.15; }
.pip-sub { color: #6b7f70; font-size: 14px; margin-bottom: 4px; }
.pip-rating { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #6b7f70; margin-bottom: 24px; }
.pip-price { font-size: 38px; font-weight: 900; color: var(--green); letter-spacing: -1.5px; margin-bottom: 4px; }
.pip-price-note { font-size: 12px; color: #6b7f70; font-family: var(--mono); margin-bottom: 28px; }
.config-label { font-family: var(--mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #6b7f70; margin-bottom: 10px; }
.config-label span { color: #1a2e1d; font-size: 13px; font-weight: 700; text-transform: none; font-family: var(--font); letter-spacing: 0; }
.swatches { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 20px; }
.sw {
width: 32px; height: 32px; border-radius: 6px;
border: 2.5px solid transparent; cursor: pointer;
transition: all .15s; position: relative;
}
.sw:hover { transform: scale(1.12); }
.sw.on { border-color: var(--green); box-shadow: 0 0 0 3px rgba(26,122,71,.2); }
.sw::after { content: attr(data-name); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #1a2e1d; color: #fff; font-size: 11px; font-family: var(--mono); padding: 3px 8px; border-radius: 4px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s; }
.sw:hover::after { opacity: 1; }
.panel-opts { display: flex; gap: 8px; margin-bottom: 24px; }
.popt { flex: 1; padding: 10px 8px; border: 1.5px solid var(--gray-l); border-radius: 8px; text-align: center; cursor: pointer; font-size: 12px; font-weight: 700; transition: all .18s; background: var(--white); line-height: 1.3; color: #1a2e1d; }
.popt sub { display: block; font-size: 10px; color: #6b7f70; font-weight: 400; font-family: var(--mono); }
.popt:hover { border-color: var(--green); color: var(--green); }
.popt.on { border-color: var(--green); background: rgba(26,122,71,.08); color: var(--green); }
.pip-actions { display: flex; gap: 10px; margin-bottom: 24px; }
.specs-mini { border: 1px solid var(--gray-l); border-radius: 9px; overflow: hidden; }
.spec-row { display: flex; font-size: 13px; border-bottom: 1px solid var(--gray-l); }
.spec-row:last-child { border-bottom: none; }
.spec-k { width: 50%; padding: 10px 14px; color: #6b7f70; background: #fafafa; font-family: var(--mono); font-size: 12px; }
.spec-v { padding: 10px 14px; font-weight: 700; font-size: 13px; }
/* ── Tabs ───────────────────────────────────────────────── */
.tabs { border-bottom: 1px solid var(--gray-l); display: flex; gap: 0; }
.tab { padding: 14px 22px; font-size: 14px; font-weight: 600; color: #6b7f70; cursor: pointer; border-bottom: 2.5px solid transparent; margin-bottom: -1px; transition: all .18s; }
.tab.on { color: var(--green); border-bottom-color: var(--green); }
.tab:hover { color: #1a2e1d; }
.tab-pane { display: none; padding: 32px 0; }
.tab-pane.on { display: block; }
.tab-content { font-size: 14px; color: #3a4e3c; line-height: 1.75; }
.tab-content h3 { font-size: 17px; font-weight: 800; margin: 24px 0 10px; color: #1a2e1d; }
.tab-content ul { padding-left: 20px; margin-bottom: 16px; }
.tab-content ul li { margin-bottom: 7px; }
/* ── Design note ────────────────────────────────────────── */
.design-note { background: #fffbeb; border: 1.5px dashed #fbbf24; border-radius: 9px; padding: 13px 17px; font-size: 13px; color: #92400e; margin-bottom: 24px; line-height: 1.55; }
.design-note strong { font-weight: 700; }
/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1100px) {
.cat-editorial { grid-template-rows: 200px 200px; }
.product-split { grid-template-columns: 1fr; }
.product-split-left { position: static; height: auto; min-height: 400px; }
.product-grid { grid-template-columns: repeat(2,1fr); }
.section-layout { grid-template-columns: 1fr; }
.sidebar { position: static; }
.usp-row { grid-template-columns: repeat(2,1fr); }
.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
.cat-editorial { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
.cecard-1,.cecard-2,.cecard-3,.cecard-4,.cecard-5,.cecard-6 { grid-column: auto; grid-row: auto; }
.hero-stats-inner { flex-direction: column; }
.hstat { border-right: none; border-bottom: 1px solid var(--border); }
.hstat:last-child { border-bottom: none; }
.usp-row { grid-template-columns: 1fr; }
.product-grid { grid-template-columns: 1fr; }
.nav { display: none; }
.hero { min-height: 460px; padding: 52px 0 60px; }
.cat-hero { min-height: 56vw; }
.cat-hero-stats-inner { flex-wrap: wrap; }
.chs { flex: 0 0 50%; border-right: none; border-bottom: 1px solid var(--border); }
.chs:nth-child(odd) { border-right: 1px solid var(--border); }
.cat-hero-bg-text { font-size: clamp(60px, 15vw, 140px); }
.hero-gate-side { display: none; }
.hero-corner { display: none; }
}
/* ── Double-panel gate veil (razdel) ─────────────────────── */
.veil-double {
position: fixed; inset: 0; z-index: 9999;
pointer-events: none; display: flex;
}
.veil-half {
flex: 1; position: relative;
background:
repeating-linear-gradient(
180deg,
transparent 0px, transparent 46px,
rgba(0,0,0,.38) 46px, rgba(0,0,0,.22) 48px,
rgba(255,255,255,.04) 48px, transparent 50px
),
linear-gradient(180deg, #1a3020 0%, #0a1410 55%, #1a3020 100%);
}
.veil-half-l { animation: vl 1.8s cubic-bezier(0.76,0,0.24,1) 0.25s both; }
.veil-half-r { animation: vr 1.8s cubic-bezier(0.76,0,0.24,1) 0.25s both; }
.veil-half-l::after {
content: ''; position: absolute; right: 0; top: 0; bottom: 0;
width: 2px; background: rgba(255,255,255,.12);
}
.veil-double-logo {
position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
font-weight: 900; font-size: clamp(14px,2.5vw,28px);
letter-spacing: .22em; color: rgba(255,255,255,.07);
white-space: nowrap; z-index: 2; pointer-events: none;
animation: veil-logo-out .5s ease 1.3s both;
}
@keyframes vl { from {transform:translateX(0)} to {transform:translateX(-100%)} }
@keyframes vr { from {transform:translateX(0)} to {transform:translateX(100%)} }
/* ── Category hero (razdel) ─────────────────────────────── */
.cat-hero {
background: var(--void);
min-height: 440px;
display: flex; flex-direction: column;
position: relative; overflow: hidden;
padding-bottom: 0;
}
/* Breadcrumb absolutely прикреплён к верху hero
(специфичность 0,3,0 — побеждает старое `.cat-hero.has-photo > *` 0,2,1) */
.cat-hero > .cat-hero-breadcrumb,
.cat-hero.has-photo > .cat-hero-breadcrumb {
position: absolute;
top: 0; left: 0; right: 0;
z-index: 5;
padding: 16px 0 12px;
/* Тёмная подложка-плашка снизу-вверх для читаемости */
background: linear-gradient(180deg,
rgba(7,16,10,.85) 0%,
rgba(7,16,10,.5) 70%,
transparent 100%);
}
.cat-hero-breadcrumb .breadcrumb { padding: 0; }
/* Главный контейнер с центральным контентом — растягивается, чтобы content центрировался по высоте */
.cat-hero > .cat-hero-main {
flex: 1;
display: flex;
flex-direction: column;
}
.cat-hero::before {
content: '';
position: absolute; inset: 0;
background-image: radial-gradient(circle, rgba(74,222,128,.07) 1px, transparent 1px);
background-size: 32px 32px;
pointer-events: none;
}
/* Large decorative category label */
.cat-hero-bg-text {
position: absolute; bottom: -0.18em; right: -0.06em;
font-size: clamp(80px, 14vw, 170px); font-weight: 900;
letter-spacing: -.06em; line-height: 1;
color: transparent;
-webkit-text-stroke: 1px rgba(74,222,128,.18);
text-shadow: 0 0 28px rgba(74,222,128,.10);
user-select: none; pointer-events: none;
white-space: nowrap;
z-index: 1;
}
.cat-hero-content {
position: relative; z-index: 2;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center; /* центр по вертикали */
align-items: flex-start; /* левое выравнивание */
text-align: left;
padding: 24px 0;
animation: emerge .5s ease .15s both;
}
.cat-hero-tag {
font-family: var(--mono); font-size: 11px; font-weight: 700;
letter-spacing: .12em; color: var(--green-l);
display: inline-flex; align-items: center;
gap: 10px; margin-bottom: 20px;
}
.cat-hero-tag::before { content:''; width:32px; height:1.5px; background:var(--green-l); }
.cat-hero h1 {
font-size: clamp(36px, 5vw, 64px);
color: var(--text); font-weight: 900;
letter-spacing: -2.5px; line-height: 1.05;
margin-bottom: 14px;
max-width: 720px;
}
.cat-hero-sub {
font-size: 15px; color: var(--text-dim);
margin: 0 0 24px; max-width: 540px; line-height: 1.55;
}
.cat-hero-actions {
display: flex; gap: 12px; flex-wrap: wrap;
}
/* Stats strip at hero bottom */
.cat-hero-stats {
position: relative; z-index: 2;
border-top: 1px solid rgba(74,222,128,.25);
margin-top: 28px;
background: linear-gradient(180deg, rgba(7,16,10,.55) 0%, rgba(7,16,10,.85) 100%);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
animation: emerge .5s ease .3s both;
}
.cat-hero-stats-inner {
display: flex;
}
.chs { flex: 1; padding: 14px 22px; border-right: 1px solid rgba(74,222,128,.12); }
.chs:last-child { border-right: none; }
.chs-val {
font-size: 22px; font-weight: 900; color: #fff; letter-spacing: -.5px; line-height: 1;
text-shadow: 0 2px 6px rgba(0,0,0,.85), 0 0 14px rgba(0,0,0,.6);
}
.chs-lbl {
font-family: var(--mono); font-size: 10px; color: rgba(255,255,255,.78);
letter-spacing: .08em; margin-top: 4px; text-transform: uppercase;
text-shadow: 0 1px 4px rgba(0,0,0,.9), 0 0 10px rgba(0,0,0,.5);
}
/* ── Subcategory horizontal strip ────────────────────────── */
.subcat-strip-wrap {
background: var(--deep);
border-bottom: 1px solid var(--border);
padding: 20px 0;
}
.subcat-strip {
display: flex; gap: 10px;
justify-content: center;
flex-wrap: wrap;
padding: 0 28px;
}
.subcat-card {
flex-shrink: 0; width: 160px; height: 90px;
border-radius: 8px; overflow: hidden;
position: relative; cursor: pointer;
border: 1.5px solid var(--border);
transition: border-color .2s;
}
.subcat-card.on { border-color: var(--green-l); }
.subcat-card:hover { border-color: var(--green); }
.subcat-card-bg { position: absolute; inset: 0; }
.subcat-card-overlay {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(7,16,10,.85) 0%, rgba(7,16,10,.35) 100%);
}
.subcat-card-body {
position: absolute; bottom: 8px; left: 10px; right: 10px;
}
.subcat-card-count { font-family: var(--mono); font-size: 9px; color: var(--green-l); letter-spacing: .08em; }
.subcat-card-name { font-size: 12px; font-weight: 700; color: #fff; line-height: 1.2; margin-top: 2px; }
.subcat-card.on .subcat-card-name { color: var(--green-l); }
/* ── Product card enhancements ───────────────────────────── */
.pcard { position: relative; overflow: hidden; }
.pcard-img { position: relative; overflow: hidden; }
.pcard-img-bg { position: absolute; inset: 0; }
/* Quick specs hover overlay */
.pcard-quick {
position: absolute; bottom: 0; left: 0; right: 0;
background: rgba(7,16,10,.92);
backdrop-filter: blur(4px);
padding: 10px 12px;
transform: translateY(100%);
transition: transform .28s cubic-bezier(0.4,0,0.2,1);
display: flex; flex-direction: column; gap: 3px;
}
.pcard:hover .pcard-quick { transform: translateY(0); }
.pcard-spec { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; }
.pcard-spec-k { color: var(--muted); letter-spacing: .04em; }
.pcard-spec-v { color: var(--green-l); font-weight: 700; }
/* Scroll-reveal for product cards */
.pcard {
opacity: 0;
transform: translateY(18px);
transition: opacity .5s ease, transform .5s ease, box-shadow .22s, border-color .22s;
}
.pcard.visible { opacity: 1; transform: translateY(0); }
/* Override for hover (only when visible) */
.pcard.visible:hover { box-shadow: var(--s2); border-color: var(--green); }
/* No hover transform - handled by JS class */
/* ── Floating CTA ────────────────────────────────────────── */
.float-cta {
position: fixed; bottom: 28px; right: 28px; z-index: 90;
opacity: 0; transform: translateY(14px) scale(.95);
transition: opacity .3s, transform .3s;
pointer-events: none;
}
.float-cta.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: all; }
.float-cta-btn {
display: flex; align-items: center; gap: 10px;
background: var(--green); color: #fff;
border: none; border-radius: 100px; cursor: pointer;
padding: 14px 24px; font-size: 14px; font-weight: 700;
font-family: var(--font);
box-shadow: 0 6px 24px rgba(26,122,71,.45), 0 2px 8px rgba(0,0,0,.2);
transition: all .2s;
}
.float-cta-btn:hover { background: var(--green-d); transform: translateY(-2px); box-shadow: 0 10px 32px rgba(26,122,71,.5), 0 2px 8px rgba(0,0,0,.2); }
.float-cta-icon { animation: float-pulse 2.4s ease-in-out infinite; }
@keyframes float-pulse {
0%,100% { transform: scale(1); }
50% { transform: scale(1.18); }
}
/* ── Quick-view modal ────────────────────────────────────── */
.qv-overlay {
position: fixed; inset: 0; z-index: 400;
background: rgba(4,12,7,.65);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
display: flex; align-items: center; justify-content: center;
opacity: 0; pointer-events: none;
transition: opacity .25s;
padding: 20px;
}
.qv-overlay.open { opacity: 1; pointer-events: all; }
.qv-modal {
background: var(--white); border-radius: 16px;
overflow: hidden; display: flex;
width: min(780px, 100%); max-height: 88vh;
transform: scale(.95) translateY(16px);
transition: transform .3s cubic-bezier(0.34,1.56,0.64,1);
box-shadow: 0 24px 80px rgba(0,0,0,.4);
}
.qv-overlay.open .qv-modal { transform: scale(1) translateY(0); }
.qv-left {
width: 42%; flex-shrink: 0;
position: relative; overflow: hidden;
min-height: 380px;
display: flex; flex-direction: column; justify-content: flex-end;
}
.qv-left-bg { position: absolute; inset: 0; }
.qv-left-overlay {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(7,16,10,.9) 0%, rgba(7,16,10,.15) 60%, transparent 100%);
}
.qv-left-body { position: relative; z-index: 2; padding: 20px; }
.qv-left-brand { font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--green-l); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; }
.qv-left-name { font-size: 18px; font-weight: 800; color: #fff; line-height: 1.2; }
.qv-left-tag { position: absolute; top: 14px; left: 14px; z-index: 3; background: var(--green); color: #fff; font-family: var(--mono); font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 4px; letter-spacing: .06em; }
.qv-right { flex: 1; padding: 28px; overflow-y: auto; display: flex; flex-direction: column; }
.qv-close {
position: absolute; top: 14px; right: 14px; z-index: 10;
width: 32px; height: 32px; background: rgba(255,255,255,.12); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
border: 1px solid rgba(255,255,255,.2); border-radius: 50%;
color: #fff; font-size: 18px; line-height: 1; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background .18s;
}
.qv-close:hover { background: rgba(255,255,255,.25); }
.qv-avail { display: inline-flex; align-items: center; gap: 5px; background: rgba(22,163,74,.1); color: var(--green); border: 1px solid rgba(22,163,74,.2); padding: 3px 10px; border-radius: 100px; font-size: 11px; font-weight: 700; font-family: var(--mono); letter-spacing: .05em; margin-bottom: 14px; }
.qv-avail::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--green); }
.qv-name { font-size: 22px; font-weight: 900; letter-spacing: -.5px; color: #1a2e1d; margin-bottom: 4px; line-height: 1.2; }
.qv-sub { font-size: 13px; color: #6b7f70; margin-bottom: 18px; }
.qv-price { font-size: 32px; font-weight: 900; color: var(--green); letter-spacing: -1px; margin-bottom: 4px; }
.qv-price-note { font-size: 11px; color: #6b7f70; font-family: var(--mono); margin-bottom: 20px; }
.qv-specs { border: 1px solid var(--gray-l); border-radius: 9px; overflow: hidden; margin-bottom: 22px; }
.qv-spec { display: flex; font-size: 12px; border-bottom: 1px solid var(--gray-l); }
.qv-spec:last-child { border-bottom: none; }
.qv-spec-k { width: 45%; padding: 9px 12px; color: #6b7f70; background: #fafaf9; font-family: var(--mono); font-size: 11px; }
.qv-spec-v { padding: 9px 12px; font-weight: 700; }
.qv-actions { display: flex; gap: 10px; margin-top: auto; }
.qv-actions .btn { flex: 1; justify-content: center; font-size: 14px; padding: 13px 16px; }
@media (max-width: 600px) { .qv-modal { flex-direction: column; } .qv-left { width: 100%; min-height: 180px; } }
/* ── Price range slider ───────────────────────────────────── */
.price-slider-outer { padding: 4px 0 0; }
.price-slider-vals { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--green); font-weight: 700; margin-bottom: 14px; }
.price-slider-track {
position: relative; height: 3px;
background: var(--gray-l); border-radius: 2px;
margin: 0 8px; cursor: pointer;
}
.price-slider-fill {
position: absolute; top: 0; height: 100%;
background: var(--green); border-radius: 2px;
pointer-events: none;
}
.price-slider-thumb {
position: absolute; top: 50%;
width: 18px; height: 18px;
transform: translate(-50%, -50%);
background: var(--white);
border: 2.5px solid var(--green);
border-radius: 50%; cursor: grab;
transition: box-shadow .15s, transform .1s;
z-index: 2;
}
.price-slider-thumb:hover { box-shadow: 0 0 0 5px rgba(26,122,71,.14); }
.price-slider-thumb:active { cursor: grabbing; transform: translate(-50%,-50%) scale(1.15); box-shadow: 0 0 0 7px rgba(26,122,71,.18); }
/* ── Wide product grid (no sidebar) ─────────────────────── */
.product-grid-wide { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
@media (max-width: 1100px) { .product-grid-wide { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 768px) { .product-grid-wide { grid-template-columns: repeat(2,1fr); } }
/* ── View toggle ─────────────────────────────────────────── */
.view-toggle { display: flex; gap: 4px; }
.vt-btn {
width: 34px; height: 34px; border: 1.5px solid var(--gray-l); border-radius: 6px;
background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
color: #6b7f70; transition: all .18s;
}
.vt-btn.on { background: var(--green); border-color: var(--green); color: #fff; }
/* List view */
.product-grid-wide.list-view { grid-template-columns: 1fr; }
.product-grid-wide.list-view .pcard { display: flex; flex-direction: row; }
.product-grid-wide.list-view .pcard-img { width: 200px; flex-shrink: 0; height: auto; min-height: 140px; }
.product-grid-wide.list-view .pcard-body { display: flex; flex-direction: column; justify-content: center; flex: 1; }
.product-grid-wide.list-view .pcard-quick { display: none; }
/* ── Reduced motion & animation safety ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
.veil, .veil-double { display: none !important; }
.hero-content, .hero-stats,
.cat-hero-content, .cat-hero-stats { animation: none !important; opacity: 1 !important; transform: none !important; }
.pcard { opacity: 1 !important; transform: none !important; animation: none !important; }
.float-cta { opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
.cecard-link { opacity: 1 !important; transform: none !important; }
}
/* ════════════════════════════════════════════════════════════
v3 ADDITIONS — promo bar, brands strip, trust cards, FAQ,
calculator, gallery «наши работы», улучшенные карточки
════════════════════════════════════════════════════════════ */
/* ── PROMO BAR ────────────────────────────────────────────── */
.promo-bar {
background: linear-gradient(135deg, var(--green) 0%, var(--green-d) 100%);
color: #fff;
font-size: 12.5px;
letter-spacing: .02em;
position: relative;
overflow: hidden;
}
.promo-bar::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
animation: promo-shimmer 6s linear infinite;
}
@keyframes promo-shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.promo-bar-inner {
max-width: var(--max);
margin: 0 auto;
padding: 9px 28px;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
position: relative;
z-index: 1;
}
.promo-bar-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px; height: 22px;
background: rgba(255,255,255,.18);
border-radius: 50%;
color: #fff;
animation: promo-pulse 1.8s ease-in-out infinite;
}
@keyframes promo-pulse {
0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,.5); }
50% { transform: scale(1.1); box-shadow: 0 0 0 6px rgba(255,255,255,0); }
}
.promo-bar strong { font-weight: 800; letter-spacing: .01em; }
.promo-bar-sep { opacity: .5; margin: 0 2px; }
.promo-bar-timer {
font-family: var(--mono);
background: rgba(0,0,0,.22);
padding: 3px 10px;
border-radius: 5px;
font-weight: 700;
font-size: 11.5px;
letter-spacing: .04em;
}
/* ── BRANDS STRIP ─────────────────────────────────────────── */
.brands-strip {
background: var(--void);
border-top: 1px solid rgba(74,222,128,.18);
border-bottom: 1px solid rgba(74,222,128,.18);
padding: 28px 0 32px;
position: relative;
overflow: hidden;
}
.brands-strip::before {
content: '';
position: absolute; inset: 0;
background-image: radial-gradient(circle, rgba(74,222,128,.06) 1px, transparent 1px);
background-size: 28px 28px;
pointer-events: none;
}
.brands-strip > .container { position: relative; z-index: 1; }
.brands-strip-label {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: .18em;
color: var(--green-l);
font-weight: 700;
text-align: center;
margin-bottom: 22px;
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
text-shadow: 0 0 14px rgba(74,222,128,.35);
}
.brands-strip-label::before,
.brands-strip-label::after {
content: '';
width: 50px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(74,222,128,.45), transparent);
}
.brands-strip-list {
display: flex;
align-items: center;
justify-content: center;
gap: 36px;
flex-wrap: wrap;
}
.brand-logo {
position: relative;
font-family: var(--font);
font-size: 16px;
color: rgba(228,240,232,.55);
opacity: .75;
transition: all .3s;
cursor: default;
padding: 8px 12px;
user-select: none;
display: inline-flex;
align-items: center;
gap: 6px;
}
.brand-logo:hover {
opacity: 1;
color: var(--green-l);
transform: translateY(-2px);
text-shadow: 0 0 16px rgba(74,222,128,.6);
}
.brand-tick {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--green-l);
box-shadow: 0 0 8px var(--green-l), 0 0 16px rgba(74,222,128,.4);
}
/* ── TRUST CARDS (под героем) ────────────────────────────── */
.trust-row {
background: var(--void);
padding: 38px 0 0;
position: relative;
overflow: hidden;
}
.trust-row::before {
content: '';
position: absolute; inset: 0;
background-image: radial-gradient(circle, rgba(74,222,128,.07) 1px, transparent 1px);
background-size: 32px 32px;
pointer-events: none;
}
.trust-row > .container { position: relative; z-index: 1; }
.trust-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.trust-card {
background: linear-gradient(180deg, rgba(13,26,16,.85) 0%, rgba(7,16,10,.95) 100%);
border: 1px solid rgba(74,222,128,.18);
border-radius: 14px;
padding: 20px 22px;
position: relative;
overflow: hidden;
transition: all .28s;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.trust-card::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 40px; height: 3px;
background: var(--green-l);
border-radius: 0 0 3px 3px;
box-shadow: 0 0 12px rgba(74,222,128,.6);
}
.trust-card::after {
content: '';
position: absolute; inset: 0;
background: radial-gradient(ellipse at top left, rgba(74,222,128,.08), transparent 60%);
pointer-events: none;
opacity: 0;
transition: opacity .3s;
}
.trust-card:hover {
border-color: rgba(74,222,128,.45);
transform: translateY(-3px);
box-shadow:
0 12px 32px rgba(0,0,0,.5),
0 0 0 1px rgba(74,222,128,.2),
0 0 24px rgba(74,222,128,.15);
}
.trust-card:hover::after { opacity: 1; }
.trust-card-ico {
width: 38px; height: 38px;
background: rgba(74,222,128,.12);
color: var(--green-l);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 14px;
box-shadow: inset 0 0 0 1px rgba(74,222,128,.2), 0 0 12px rgba(74,222,128,.15);
}
.trust-card-num {
font-size: 26px;
font-weight: 800;
letter-spacing: -.02em;
color: var(--green-l);
line-height: 1;
margin-bottom: 4px;
font-family: var(--font);
text-shadow: 0 0 14px rgba(74,222,128,.4), 0 0 28px rgba(74,222,128,.18);
}
.trust-card-num span { font-size: 14px; color: var(--text-dim); font-weight: 600; text-shadow: none; }
.trust-card-lbl {
font-size: 13px;
color: #fff;
font-weight: 600;
margin-bottom: 4px;
}
.trust-card-sub {
font-size: 11.5px;
color: var(--text-dim);
font-family: var(--mono);
letter-spacing: .03em;
}
/* ── CALCULATOR ROW ──────────────────────────────────────── */
.calc-section {
background: linear-gradient(180deg, var(--bg) 0%, #ebf0ed 100%);
padding: 60px 0;
}
.calc-wrap {
background: #fff;
border-radius: 18px;
box-shadow: var(--s2);
overflow: hidden;
display: grid;
grid-template-columns: 320px 1fr;
min-height: 380px;
}
.calc-left {
background: linear-gradient(155deg, var(--green-d) 0%, var(--void) 100%);
color: #fff;
padding: 36px 32px;
position: relative;
overflow: hidden;
}
.calc-left::before {
content: '';
position: absolute;
top: -50px; right: -50px;
width: 180px; height: 180px;
background: radial-gradient(circle, rgba(74,222,128,.2), transparent 70%);
filter: blur(20px);
}
.calc-left-tag {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: .18em;
color: var(--green-l);
font-weight: 700;
margin-bottom: 14px;
position: relative;
z-index: 1;
}
.calc-left h2 {
font-size: 26px;
font-weight: 800;
line-height: 1.15;
margin-bottom: 14px;
letter-spacing: -.02em;
position: relative;
z-index: 1;
}
.calc-left-sub {
font-size: 13.5px;
color: rgba(255,255,255,.65);
line-height: 1.55;
margin-bottom: 20px;
position: relative;
z-index: 1;
}
.calc-left-perks {
display: flex;
flex-direction: column;
gap: 10px;
position: relative;
z-index: 1;
}
.calc-left-perk {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
color: rgba(255,255,255,.85);
}
.calc-left-perk svg { color: var(--green-l); flex-shrink: 0; }
.calc-right {
padding: 36px 36px 32px;
display: flex;
flex-direction: column;
}
.calc-fields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 16px;
}
.calc-fld { display: flex; flex-direction: column; gap: 7px; }
.calc-fld label {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: .15em;
color: var(--muted);
font-weight: 700;
}
.calc-fld input,
.calc-fld select {
padding: 12px 14px;
background: #fafaf9;
border: 1.5px solid var(--gray-l);
border-radius: 10px;
font-family: var(--mono);
font-size: 15px;
font-weight: 700;
color: #1a2e1d;
transition: all .2s;
outline: none;
}
.calc-fld input:focus,
.calc-fld select:focus {
border-color: var(--green);
background: #fff;
box-shadow: var(--gs);
}
.calc-result {
margin-top: auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 22px;
background: linear-gradient(135deg, #f0f8f3 0%, #e1efe7 100%);
border-radius: 12px;
border: 1px solid rgba(26,122,71,.18);
position: relative;
overflow: hidden;
}
.calc-result::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 2px;
background: linear-gradient(90deg, transparent, var(--green), transparent);
}
.calc-result-lbl {
font-family: var(--mono);
font-size: 11px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .14em;
margin-bottom: 4px;
}
.calc-result-val {
font-size: 28px;
font-weight: 800;
color: var(--green);
letter-spacing: -.02em;
line-height: 1;
}
.calc-result-note {
font-size: 11.5px;
color: var(--muted);
margin-top: 4px;
}
.calc-result .btn { padding: 12px 22px; }
/* ── OUR WORKS GALLERY ───────────────────────────────────── */
.works-sec { padding: 70px 0 50px; background: #fff; }
.works-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 200px 200px;
gap: 14px;
}
.work-card {
position: relative;
border-radius: 14px;
overflow: hidden;
cursor: pointer;
transition: all .3s;
display: flex;
align-items: flex-end;
padding: 18px;
background: var(--panel);
}
.work-card:hover { transform: translateY(-3px); box-shadow: var(--s3); }
.work-card-img {
position: absolute;
inset: 0;
transition: transform .6s;
}
.work-card:hover .work-card-img { transform: scale(1.06); }
.work-card-overlay {
position: absolute;
inset: 0;
background: linear-gradient(0deg, rgba(7,16,10,.78) 0%, rgba(7,16,10,.20) 50%, rgba(7,16,10,0) 100%);
z-index: 1;
}
.work-card-body { position: relative; z-index: 2; color: #fff; width: 100%; }
.work-card-tag {
display: inline-block;
background: rgba(26,122,71,.85);
backdrop-filter: blur(6px);
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: .14em;
padding: 4px 10px;
border-radius: 4px;
margin-bottom: 10px;
}
.work-card-title {
font-size: 16px;
font-weight: 700;
line-height: 1.25;
margin-bottom: 4px;
}
.work-card-meta {
font-size: 11.5px;
color: rgba(255,255,255,.7);
font-family: var(--mono);
letter-spacing: .04em;
}
.work-card.feat { grid-column: span 1; grid-row: span 2; }
.work-card.feat .work-card-title { font-size: 22px; }
.work-card.feat .work-card-meta { font-size: 12.5px; }
/* ── FAQ ──────────────────────────────────────────────────── */
.faq-sec { padding: 60px 0; background: var(--bg); }
.faq-list { max-width: 880px; margin: 0 auto; }
.faq-item {
background: #fff;
border: 1px solid var(--gray-l);
border-radius: 12px;
margin-bottom: 10px;
overflow: hidden;
transition: all .25s;
}
.faq-item.open {
border-color: var(--green-l);
box-shadow: 0 6px 20px rgba(26,122,71,.10);
}
.faq-q {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 24px;
cursor: pointer;
font-size: 15px;
font-weight: 600;
color: #1a2e1d;
transition: all .2s;
}
.faq-q:hover { background: #fafaf9; }
.faq-item.open .faq-q { color: var(--green); }
.faq-toggle {
width: 28px; height: 28px;
border-radius: 50%;
background: rgba(26,122,71,.08);
color: var(--green);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 700;
flex-shrink: 0;
margin-left: 14px;
transition: all .25s;
}
.faq-item.open .faq-toggle {
background: var(--green);
color: #fff;
transform: rotate(45deg);
}
.faq-a {
max-height: 0;
overflow: hidden;
transition: max-height .35s ease, padding .35s ease;
padding: 0 24px;
font-size: 14px;
color: #4a5e4d;
line-height: 1.65;
}
.faq-item.open .faq-a {
max-height: 240px;
padding: 0 24px 22px;
}
/* ── PRODUCT CARD — DETAILED SVG VARIANTS ────────────────── */
/* Сами карточки уже стилизованы; здесь добавим обёртку для SVG */
.pcard-img-svg {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(155deg, #f4f6f4 0%, #d8e2db 100%);
overflow: hidden;
}
.pcard-img-svg::before {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 38%;
background: linear-gradient(0deg, rgba(7,16,10,.22) 0%, transparent 100%);
z-index: 1;
}
.pcard-img-svg svg {
position: relative;
z-index: 2;
width: 85%;
height: 85%;
filter: drop-shadow(0 12px 18px rgba(0,0,0,.20));
transition: transform .5s;
}
.pcard:hover .pcard-img-svg svg { transform: translateY(-3px) scale(1.03); }
.pcard-img-svg-ground {
position: absolute;
bottom: 0;
left: 10%; right: 10%;
height: 18px;
background: radial-gradient(ellipse at center, rgba(0,0,0,.32), transparent 70%);
filter: blur(6px);
z-index: 1;
}
/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 1080px) {
.calc-wrap { grid-template-columns: 1fr; }
.calc-left { padding: 28px; }
.works-grid {
grid-template-columns: 1fr 1fr;
grid-template-rows: 180px 180px 180px;
}
.work-card.feat { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 720px) {
.trust-grid { grid-template-columns: 1fr 1fr; }
.brands-strip-list { gap: 22px; }
.brand-logo { font-size: 14px; }
.works-grid { grid-template-columns: 1fr; grid-template-rows: 180px 180px 180px 180px 180px 180px; }
.work-card.feat { grid-column: 1; grid-row: 1; }
.calc-fields { grid-template-columns: 1fr; }
.promo-bar-inner { padding: 9px 14px; font-size: 11.5px; }
}
/* ── Карточка товара v3 — rating / swatches / stock / old price ── */
.pcard-head-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 4px;
}
.pcard-rating {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11.5px;
color: var(--text-dim);
font-family: var(--mono);
}
.pcard-rating strong { color: #1a2e1d; font-weight: 700; }
.pcard-rating span { color: var(--muted); }
.pcard-swatches {
display: flex;
gap: 5px;
align-items: center;
margin: 10px 0 8px;
}
.pcs {
width: 16px; height: 16px;
border-radius: 50%;
border: 1.5px solid #fff;
box-shadow: 0 0 0 1px rgba(0,0,0,.12), inset 0 -2px 4px rgba(0,0,0,.1);
display: inline-block;
transition: transform .2s;
}
.pcard:hover .pcs { transform: scale(1.1); }
.pcs-more {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
color: var(--muted);
background: var(--gray-l);
padding: 2px 6px;
border-radius: 8px;
letter-spacing: .03em;
}
.pcard-stock {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11.5px;
font-weight: 600;
font-family: var(--mono);
letter-spacing: .03em;
margin-bottom: 12px;
}
.pcard-stock-dot {
width: 7px; height: 7px;
border-radius: 50%;
}
.pcard-stock.instock { color: var(--green); }
.pcard-stock.instock .pcard-stock-dot {
background: var(--green-l);
box-shadow: 0 0 6px var(--green-l);
animation: stock-pulse 1.8s ease-in-out infinite;
}
.pcard-stock.order { color: #b87333; }
.pcard-stock.order .pcard-stock-dot { background: var(--amber); }
@keyframes stock-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .55; transform: scale(1.3); }
}
.pcard-old-price {
font-size: 13px;
color: var(--muted);
text-decoration: line-through;
font-family: var(--mono);
font-weight: 500;
}
.pcard-price-row {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 12px;
}
/* ════════════════════════════════════════════════════════════
TOVAR.PHP v3 — trust badges, reasons, cross-sell, sticky cta
════════════════════════════════════════════════════════════ */
/* ── Trust badges strip ──────────────────────────────────── */
.t-badges {
background: linear-gradient(180deg, #fff 0%, #f7faf8 100%);
border-bottom: 1px solid var(--gray-l);
padding: 22px 0;
}
.t-badges-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.t-badge {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 16px;
background: #fff;
border: 1px solid var(--gray-l);
border-radius: 12px;
transition: all .25s;
}
.t-badge:hover {
border-color: var(--green-l);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(26,122,71,.08);
}
.t-badge-ico {
flex-shrink: 0;
width: 40px; height: 40px;
background: rgba(26,122,71,.08);
color: var(--green);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.t-badge strong {
display: block;
font-size: 13.5px;
color: #1a2e1d;
margin-bottom: 2px;
}
.t-badge span {
display: block;
font-size: 11.5px;
color: var(--muted);
font-family: var(--mono);
letter-spacing: .03em;
}
/* ── Reasons section (5 причин) ──────────────────────────── */
.reasons-sec {
background: var(--bg);
padding: 70px 0;
}
.reasons-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 16px;
}
.reason-card {
background: #fff;
border: 1px solid var(--gray-l);
border-radius: 14px;
padding: 28px 24px;
position: relative;
transition: all .3s;
overflow: hidden;
}
.reason-card::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 3px;
background: linear-gradient(90deg, var(--green), var(--green-l));
transform: scaleX(0);
transform-origin: left;
transition: transform .35s;
}
.reason-card:hover {
transform: translateY(-4px);
box-shadow: var(--s2);
border-color: var(--green-l);
}
.reason-card:hover::before { transform: scaleX(1); }
.reason-num {
font-family: var(--mono);
font-size: 12px;
font-weight: 700;
letter-spacing: .15em;
color: var(--green-l);
margin-bottom: 16px;
}
.reason-ico {
color: var(--green);
margin-bottom: 16px;
}
.reason-h {
font-size: 16px;
font-weight: 700;
color: #1a2e1d;
margin-bottom: 10px;
letter-spacing: -.01em;
}
.reason-p {
font-size: 13px;
color: #4a5e4d;
line-height: 1.6;
}
/* ── Cross-sell ───────────────────────────────────────────── */
.cross-sec {
background: #fff;
padding: 60px 0;
border-top: 1px solid var(--gray-l);
}
.cross-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.cross-card {
background: linear-gradient(180deg, #fff 0%, #f7f9f7 100%);
border: 1px solid var(--gray-l);
border-radius: 14px;
padding: 24px;
transition: all .25s;
text-align: center;
cursor: pointer;
}
.cross-card:hover {
border-color: var(--green);
transform: translateY(-3px);
box-shadow: var(--s2);
}
.cross-img {
width: 100%;
height: 100px;
background: #f0f4f1;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: var(--green);
margin-bottom: 16px;
transition: background .25s;
}
.cross-card:hover .cross-img { background: rgba(74,222,128,.15); }
.cross-name {
font-size: 14px;
font-weight: 600;
color: #1a2e1d;
margin-bottom: 6px;
line-height: 1.3;
}
.cross-price {
font-size: 14px;
font-weight: 700;
color: var(--green);
font-family: var(--mono);
}
/* ── Sticky CTA at bottom ────────────────────────────────── */
.sticky-cta {
position: fixed;
bottom: -100px;
left: 0; right: 0;
background: rgba(255,255,255,.96);
backdrop-filter: blur(12px);
border-top: 1px solid var(--gray-l);
box-shadow: 0 -8px 30px rgba(0,0,0,.10);
z-index: 60;
transition: bottom .35s cubic-bezier(.22,.68,0,1.15);
padding: 14px 0;
}
.sticky-cta.show { bottom: 0; }
.sticky-cta-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.sticky-cta-l { display: flex; flex-direction: column; }
.sticky-cta-name {
font-size: 14px;
font-weight: 700;
color: #1a2e1d;
}
.sticky-cta-price {
font-size: 18px;
font-weight: 800;
color: var(--green);
font-family: var(--mono);
margin-top: 2px;
}
.sticky-cta-price span {
font-size: 12px;
color: var(--muted);
font-weight: 500;
}
.sticky-cta-r {
display: flex;
align-items: center;
gap: 10px;
}
.sticky-cta-phone {
padding: 11px 18px !important;
display: inline-flex;
align-items: center;
gap: 6px;
}
/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1080px) {
.t-badges-row { grid-template-columns: 1fr 1fr; }
.reasons-grid { grid-template-columns: repeat(2, 1fr); }
.cross-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
.t-badges-row { grid-template-columns: 1fr; }
.reasons-grid { grid-template-columns: 1fr; }
.cross-grid { grid-template-columns: 1fr 1fr; }
.sticky-cta-inner { flex-direction: column; gap: 10px; }
.sticky-cta-r { width: 100%; justify-content: space-between; }
}
/* ════════════════════════════════════════════════════════════
v4 — VISUAL ENHANCEMENTS (scroll-bar, reveal, glow, tilt,
particles, magnetic, smooth)
════════════════════════════════════════════════════════════ */
html { scroll-behavior: smooth; }
/* ── Scroll progress bar ─────────────────────────────────── */
.scroll-progress {
position: fixed;
top: 0; left: 0;
height: 3px;
width: 0%;
background: linear-gradient(90deg, var(--green) 0%, var(--green-l) 50%, var(--green) 100%);
z-index: 200;
box-shadow: 0 0 8px var(--green-l), 0 0 20px rgba(74,222,128,.5);
transition: width .08s linear;
pointer-events: none;
}
/* ── Reveal on scroll ─────────────────────────────────────── */
.reveal {
opacity: 0;
transform: translateY(36px);
transition: opacity .8s cubic-bezier(.22,.68,0,1.15), transform .9s cubic-bezier(.22,.68,0,1.15);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal.delay-1.visible { transition-delay: .1s; }
.reveal.delay-2.visible { transition-delay: .2s; }
.reveal.delay-3.visible { transition-delay: .3s; }
/* На тёмных секциях — БЕЗ вертикального сдвига, только fade.
Иначе во время transform виден белый body-фон в щели над секцией. */
.trust-row.reveal,
.brands-strip.reveal {
transform: none;
transition: opacity .6s ease;
}
.trust-row.reveal.visible,
.brands-strip.reveal.visible { transform: none; }
/* Доп. страховка: тёмное расширение ТОЛЬКО вверх (там где gap при scroll-jitter мог бы случиться).
Вниз не расширяем — там белая секция товаров, нельзя её перекрывать тёмным. */
.trust-row {
box-shadow: 0 -40px 0 0 var(--void);
}
.brands-strip {
box-shadow: 0 -40px 0 0 var(--void);
}
/* ── Hero animated background ─────────────────────────────── */
.cat-hero {
position: relative;
overflow: hidden;
}
.cat-hero::before,
.cat-hero::after {
content: '';
position: absolute;
border-radius: 50%;
pointer-events: none;
z-index: 0;
filter: blur(60px);
}
.cat-hero::before {
width: 480px; height: 480px;
background: radial-gradient(circle, rgba(74,222,128,.18), transparent 70%);
top: -200px; left: -120px;
animation: hero-orb-1 18s ease-in-out infinite;
}
.cat-hero::after {
width: 560px; height: 560px;
background: radial-gradient(circle, rgba(26,122,71,.15), transparent 70%);
bottom: -220px; right: -150px;
animation: hero-orb-2 22s ease-in-out infinite;
}
@keyframes hero-orb-1 {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(120px, 80px) scale(1.15); }
}
@keyframes hero-orb-2 {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(-100px, -60px) scale(.9); }
}
/* ── Floating particles in hero ───────────────────────────── */
.particles {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
}
.particle {
position: absolute;
bottom: -8px;
width: 4px; height: 4px;
background: var(--green-l);
border-radius: 50%;
box-shadow: 0 0 8px var(--green-l), 0 0 16px rgba(74,222,128,.5);
opacity: 0;
animation: float-up 11s linear infinite;
}
.particle:nth-child(1) { left: 6%; animation-delay: 0s; animation-duration: 13s; }
.particle:nth-child(2) { left: 14%; animation-delay: 2.5s; animation-duration: 9s; width: 3px; height: 3px; }
.particle:nth-child(3) { left: 22%; animation-delay: 5s; animation-duration: 14s; }
.particle:nth-child(4) { left: 33%; animation-delay: 1s; animation-duration: 10s; }
.particle:nth-child(5) { left: 45%; animation-delay: 6s; animation-duration: 12s; width: 5px; height: 5px; }
.particle:nth-child(6) { left: 58%; animation-delay: 3.5s; animation-duration: 11s; }
.particle:nth-child(7) { left: 71%; animation-delay: 7s; animation-duration: 13s; width: 3px; height: 3px; }
.particle:nth-child(8) { left: 83%; animation-delay: 4.5s; animation-duration: 10s; }
.particle:nth-child(9) { left: 92%; animation-delay: 8s; animation-duration: 12s; }
.particle:nth-child(10) { left: 50%; animation-delay: 9.5s; animation-duration: 14s; width: 5px; height: 5px; }
@keyframes float-up {
0% { transform: translateY(0) translateX(0); opacity: 0; }
8% { opacity: .9; }
90% { opacity: .7; }
100% { transform: translateY(-700px) translateX(40px); opacity: 0; }
}
/* ── Pulse glow on hot tags (ХИТ / АКЦИЯ / НОВИНКА) ──────── */
@keyframes badge-glow {
0%, 100% { box-shadow: 0 0 0 0 rgba(74,222,128,.5), 0 2px 6px rgba(0,0,0,.2); }
50% { box-shadow: 0 0 0 6px rgba(74,222,128,0), 0 2px 6px rgba(0,0,0,.2); }
}
.pcard-img[data-tag]::after {
animation: badge-glow 2.2s ease-in-out infinite;
}
/* ── 3D tilt on product card ─────────────────────────────── */
.pcard {
transform-style: preserve-3d;
transition: transform .3s ease, box-shadow .3s ease;
will-change: transform;
}
.pcard.tilt {
transition: transform 0s; /* JS controls during hover */
}
/* ── Shimmer on brand logos ─────────────────────────────── */
.brand-logo {
position: relative;
overflow: hidden;
}
.brand-logo::before {
content: '';
position: absolute;
top: 0; left: -100%;
width: 100%; height: 100%;
background: linear-gradient(90deg, transparent 0%, rgba(74,222,128,.18) 50%, transparent 100%);
transition: left .8s;
pointer-events: none;
}
.brand-logo:hover::before { left: 100%; }
/* ── Magnetic CTA button ─────────────────────────────────── */
.btn.magnetic {
position: relative;
transition: transform .25s cubic-bezier(.22,.68,0,1.15);
will-change: transform;
}
.btn.magnetic:hover {
box-shadow: 0 12px 32px rgba(26,122,71,.4), 0 0 0 4px rgba(74,222,128,.18);
}
.btn.magnetic::after {
content: '';
position: absolute;
inset: -4px;
border-radius: inherit;
background: radial-gradient(circle at 50% 50%, rgba(74,222,128,.3) 0%, transparent 60%);
opacity: 0;
transition: opacity .3s;
pointer-events: none;
z-index: -1;
}
.btn.magnetic:hover::after { opacity: 1; }
/* ── Glow on CTA-band — already exists, enhance ──────────── */
.btn.btn-green {
position: relative;
transition: transform .2s, box-shadow .25s, background .2s;
}
.btn.btn-green:hover {
box-shadow: 0 10px 28px rgba(26,122,71,.4), 0 0 24px rgba(74,222,128,.3);
}
/* ── Star rating reveal animation ────────────────────────── */
.pcard-rating svg {
animation: star-pop .5s cubic-bezier(.22,.68,0,1.15) both;
}
@keyframes star-pop {
from { transform: scale(0) rotate(-45deg); opacity: 0; }
to { transform: scale(1) rotate(0); opacity: 1; }
}
/* ── Strengthen glass on stickies & floaters ─────────────── */
.float-cta-btn {
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(74,222,128,.25);
box-shadow: 0 8px 28px rgba(0,0,0,.18), 0 0 0 1px rgba(74,222,128,.08) inset;
}
.sticky-cta {
border-top: 1px solid rgba(74,222,128,.25);
background: rgba(255,255,255,.92);
backdrop-filter: blur(16px) saturate(1.4);
-webkit-backdrop-filter: blur(16px) saturate(1.4);
}
/* ── Reduce hero overlay text ВОРОТА ────────────────────── */
.cat-hero-bg-text { opacity: .04 !important; letter-spacing: -.04em; }
/* ── Veil — короче ────────────────────────────────────────── */
.veil-half,
.veil-half-l,
.veil-half-r { animation-duration: .65s !important; }
/* ── Smooth focus rings ───────────────────────────────────── */
button:focus-visible,
a:focus-visible,
input:focus-visible {
outline: 2px solid var(--green-l);
outline-offset: 2px;
}
/* ── Reduced motion — accessibility ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
.reveal, .particle, .cat-hero::before, .cat-hero::after,
.pcard-img[data-tag]::after, .brand-logo::before {
animation: none !important;
transition: none !important;
}
.reveal { opacity: 1 !important; transform: none !important; }
}
/* ════════════════════════════════════════════════════════════
v5 — NEON GLOW в полосе и хедере
════════════════════════════════════════════════════════════ */
/* ── Промо-полоса: неоновая нижняя линия + усиление glow ─── */
.promo-bar {
border-bottom: 1px solid rgba(74,222,128,.35);
box-shadow:
0 0 22px rgba(74,222,128,.42),
0 1px 0 rgba(74,222,128,.5),
inset 0 -1px 0 rgba(74,222,128,.18);
position: relative;
}
.promo-bar strong {
text-shadow: 0 0 8px rgba(255,255,255,.45), 0 0 18px rgba(74,222,128,.4);
}
.promo-bar-timer {
text-shadow: 0 0 10px rgba(74,222,128,.8);
border: 1px solid rgba(74,222,128,.35);
}
/* ── Хедер: неоновое подчёркивание снизу + бегущая искра ── */
.site-header {
border-bottom-color: rgba(74,222,128,.18);
box-shadow:
0 1px 0 rgba(74,222,128,.4),
0 0 22px rgba(74,222,128,.28),
0 4px 30px rgba(74,222,128,.15);
position: sticky;
}
/* "Лазер" — тонкая зелёная неонка под хедером + бегущий блик */
.site-header::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -1px;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
rgba(74,222,128,.0) 5%,
rgba(74,222,128,.85) 40%,
rgba(74,222,128,.85) 60%,
rgba(74,222,128,.0) 95%,
transparent 100%);
filter: blur(.3px);
opacity: .8;
pointer-events: none;
}
.site-header::before {
content: '';
position: absolute;
left: -120px; bottom: -3px;
width: 220px; height: 4px;
background: radial-gradient(ellipse, rgba(74,222,128,1) 0%, rgba(74,222,128,.6) 30%, transparent 65%);
filter: blur(2px);
animation: neon-sweep 8s ease-in-out infinite;
pointer-events: none;
}
@keyframes neon-sweep {
0%, 100% { transform: translateX(0); opacity: 0; }
10% { opacity: 1; }
60% { opacity: 1; }
70% { transform: translateX(calc(100vw - 100px)); opacity: 0; }
100% { transform: translateX(calc(100vw - 100px)); opacity: 0; }
}
/* ── Logo: неоновый glow ─────────────────────────────────── */
.logo {
text-shadow: 0 0 10px rgba(74,222,128,.3), 0 0 20px rgba(74,222,128,.18);
}
.logo-mark {
box-shadow:
0 0 14px rgba(74,222,128,.6),
0 0 28px rgba(74,222,128,.35),
inset 0 0 8px rgba(255,255,255,.18);
animation: logo-pulse 3.6s ease-in-out infinite;
}
@keyframes logo-pulse {
0%, 100% { box-shadow: 0 0 14px rgba(74,222,128,.6), 0 0 28px rgba(74,222,128,.35), inset 0 0 8px rgba(255,255,255,.18); }
50% { box-shadow: 0 0 22px rgba(74,222,128,.85), 0 0 44px rgba(74,222,128,.55), inset 0 0 12px rgba(255,255,255,.25); }
}
/* ── Nav links: неоновое подчёркивание + hover glow ──────── */
.nav a {
position: relative;
}
.nav a::after {
content: '';
position: absolute;
left: 12px; right: 12px; bottom: 2px;
height: 1.5px;
background: var(--green-l);
border-radius: 1px;
transform: scaleX(0);
transform-origin: center;
transition: transform .3s cubic-bezier(.22,.68,0,1.15);
box-shadow: 0 0 8px var(--green-l), 0 0 14px rgba(74,222,128,.5);
}
.nav a:hover {
color: var(--green-l);
background: transparent;
text-shadow: 0 0 12px rgba(74,222,128,.6);
}
.nav a:hover::after { transform: scaleX(1); }
.nav a.on {
text-shadow: 0 0 12px rgba(74,222,128,.7), 0 0 20px rgba(74,222,128,.35);
}
.nav a.on::after {
transform: scaleX(1);
background: var(--green-l);
box-shadow: 0 0 10px var(--green-l), 0 0 20px rgba(74,222,128,.6);
}
/* ── Phone: неон-обводка + glow ──────────────────────────── */
.hdr-phone {
position: relative;
padding: 6px 12px;
border-radius: 6px;
text-shadow: 0 0 8px rgba(74,222,128,.4);
transition: all .25s;
}
.hdr-phone::before {
content: '';
position: absolute;
inset: 0;
border-radius: 6px;
padding: 1px;
background: linear-gradient(135deg, transparent 30%, rgba(74,222,128,.5) 50%, transparent 70%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity .25s;
}
.hdr-phone:hover {
color: var(--green-l);
text-shadow: 0 0 14px rgba(74,222,128,.8);
}
.hdr-phone:hover::before { opacity: 1; }
/* ── CTA-кнопка в хедере: яркий неон + пульсация ─────────── */
.hdr-cta {
position: relative;
background: linear-gradient(135deg, var(--green) 0%, var(--green-d) 100%);
box-shadow:
0 0 0 1px rgba(74,222,128,.5),
0 4px 14px rgba(26,122,71,.5),
0 0 20px rgba(74,222,128,.4),
inset 0 1px 0 rgba(255,255,255,.2);
text-shadow: 0 1px 2px rgba(0,0,0,.3);
overflow: hidden;
}
.hdr-cta::before {
content: '';
position: absolute;
inset: -2px;
border-radius: 9px;
background: linear-gradient(135deg, rgba(74,222,128,.7), transparent 50%, rgba(74,222,128,.5));
filter: blur(8px);
z-index: -1;
opacity: .8;
animation: cta-neon 3s ease-in-out infinite;
}
@keyframes cta-neon {
0%, 100% { opacity: .55; }
50% { opacity: .95; }
}
.hdr-cta::after {
content: '';
position: absolute;
top: 0; left: -100%;
width: 100%; height: 100%;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.25) 50%, transparent 100%);
transition: left .8s;
pointer-events: none;
}
.hdr-cta:hover::after { left: 100%; }
.hdr-cta:hover {
box-shadow:
0 0 0 1px rgba(74,222,128,.8),
0 6px 20px rgba(26,122,71,.6),
0 0 32px rgba(74,222,128,.6),
inset 0 1px 0 rgba(255,255,255,.25);
transform: translateY(-1px);
}
/* ── Уменьшенный неон-шум на мобильных ───────────────────── */
@media (max-width: 720px) {
.site-header::before { display: none; }
.logo-mark { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
.site-header::before,
.logo-mark,
.hdr-cta::before { animation: none !important; }
}
/* ════════════════════════════════════════════════════════════
v6 — РЕАЛЬНЫЕ ФОТО vorotadvery.ru как фоны
════════════════════════════════════════════════════════════ */
/* Универсальный photo-bg: задаётся через style="--ph:url(...)" */
.photo-bg {
position: absolute;
inset: 0;
background-image: var(--ph);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 0;
}
.photo-bg::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(7,16,10,.15) 0%, rgba(7,16,10,.55) 100%);
z-index: 1;
}
/* Карточка товара — реальное фото вместо CSS-силуэта */
.pcard-img.has-photo .pcard-img-bg {
background-image: var(--ph);
background-size: cover;
background-position: center;
background-color: transparent;
}
.pcard-img.has-photo .pcard-img-bg::before,
.pcard-img.has-photo .pcard-img-bg::after { display: none; }
/* Если фото — скрываем декоративный SVG ворот */
.pcard-img.has-photo > svg { display: none; }
/* Лёгкий vignette для контраста с верхним badge */
.pcard-img.has-photo::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(7,16,10,.25) 0%, transparent 35%, transparent 65%, rgba(7,16,10,.35) 100%);
z-index: 1;
pointer-events: none;
}
/* Subcat-strip — реальные фото подкатегорий */
.subcat-card-bg.has-photo {
background-image: var(--ph) !important;
background-size: cover;
background-position: center;
}
/* Works grid — фотогалерея реальных объектов */
.work-card-img.has-photo {
background-image: var(--ph);
background-size: cover;
background-position: center;
background-color: var(--panel);
}
/* Hero — фоновое фото с overlay */
.cat-hero.has-photo {
position: relative;
}
.cat-hero.has-photo .cat-hero-photo {
position: absolute;
/* Фото простирается до 88% (правые 12% — зелёная панель), а его mask делает плавный fade
с 50% до 100% — длинная мягкая зона перехода в зелёную панель */
top: 0; bottom: 0; left: 0; right: 12%;
background-image: var(--ph);
background-size: cover;
background-position: left center;
z-index: 0;
opacity: .92;
filter: contrast(1.05) saturate(.95) brightness(.72);
/* Плавный fade-out на правом крае от 50% к 100% (большая мягкая зона) */
mask-image: linear-gradient(90deg,
transparent 0%,
rgba(0,0,0,.25) 8%,
rgba(0,0,0,.85) 16%,
rgba(0,0,0,1) 22%,
rgba(0,0,0,1) 50%,
rgba(0,0,0,.85) 65%,
rgba(0,0,0,.55) 78%,
rgba(0,0,0,.25) 90%,
transparent 100%);
-webkit-mask-image: linear-gradient(90deg,
transparent 0%,
rgba(0,0,0,.25) 8%,
rgba(0,0,0,.85) 16%,
rgba(0,0,0,1) 22%,
rgba(0,0,0,1) 50%,
rgba(0,0,0,.85) 65%,
rgba(0,0,0,.55) 78%,
rgba(0,0,0,.25) 90%,
transparent 100%);
}
/* Фон самой секции — длинный плавный переход void → зелёный по всей правой половине.
Фото c длинным fade-out маски плавно ложится в этот градиент, переход выглядит мягко. */
.cat-hero.has-photo {
background:
radial-gradient(ellipse 35% 65% at 95% 50%, rgba(74,222,128,.12) 0%, transparent 65%),
linear-gradient(90deg,
var(--void) 0%,
var(--void) 45%,
rgb(8,28,17) 60%, /* самое раннее появление зелёного, очень тёмного */
rgb(10,40,23) 75%, /* плавно усиливается */
rgb(9,42,24) 88%,
rgb(6,28,16) 100%);
}
.cat-hero.has-photo::after {
content: '';
position: absolute;
inset: 0;
background:
/* vignette верх/низ */
linear-gradient(180deg, rgba(11,17,13,.45) 0%, transparent 25%, transparent 72%, rgba(11,17,13,.55) 100%),
/* Тёмная подложка слева под текст */
linear-gradient(90deg, rgba(11,17,13,.92) 0%, rgba(11,17,13,.7) 25%, rgba(11,17,13,.25) 42%, transparent 55%);
z-index: 2; /* выше зелёной панели чтобы vignette ложился и на неё */
pointer-events: none;
}
.cat-hero.has-photo > * { position: relative; z-index: 2; }
/* Halo вокруг текста — читаемость на любом фрагменте фото */
.cat-hero.has-photo h1,
.cat-hero.has-photo .cat-hero-sub,
.cat-hero.has-photo .cat-hero-tag {
text-shadow:
0 2px 4px rgba(0,0,0,.7),
0 4px 12px rgba(0,0,0,.55),
0 0 28px rgba(0,0,0,.4);
}
.cat-hero.has-photo h1 em {
text-shadow:
0 0 16px rgba(74,222,128,.45),
0 0 32px rgba(74,222,128,.25);
}
/* Cross-sell — фото в карточках */
.cross-img.has-photo {
background-image: var(--ph);
background-size: cover;
background-position: center;
}
.cross-img.has-photo > svg { display: none; }
/* Reasons — фото-аксент в углу карточки */
.reason-card.has-photo::after {
content: '';
position: absolute;
top: -20px; right: -30px;
width: 120px; height: 120px;
background-image: var(--ph);
background-size: cover;
background-position: center;
border-radius: 50%;
opacity: .08;
z-index: 0;
filter: blur(1px);
pointer-events: none;
}
/* ── Hero на главной — фото-подложка ─────────────────────── */
.hero.has-photo {
position: relative;
}
.hero.has-photo > .hero-photo-bg {
position: absolute;
inset: 0;
background-image: var(--ph);
background-size: cover;
background-position: center center;
z-index: 0;
opacity: .85;
filter: contrast(1.05) saturate(.95) brightness(.72); /* затемняем сам кадр */
/* Левые ~18% уходят в void-фон под текст, остальные ~82% показывают фото */
mask-image: linear-gradient(90deg,
transparent 0%,
rgba(0,0,0,.25) 8%,
rgba(0,0,0,.85) 16%,
rgba(0,0,0,1) 22%,
rgba(0,0,0,1) 100%);
-webkit-mask-image: linear-gradient(90deg,
transparent 0%,
rgba(0,0,0,.25) 8%,
rgba(0,0,0,.85) 16%,
rgba(0,0,0,1) 22%,
rgba(0,0,0,1) 100%);
}
/* Двухслойный overlay: тёмная подложка слева под текст + лёгкий vignette сверху-снизу */
.hero.has-photo::after {
content: '';
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(11,17,13,.35) 0%, transparent 30%, transparent 70%, rgba(11,17,13,.45) 100%),
linear-gradient(90deg, rgba(11,17,13,.92) 0%, rgba(11,17,13,.7) 25%, rgba(11,17,13,.25) 42%, transparent 55%);
z-index: 1;
pointer-events: none;
}
/* На фото уже есть свой фейд справа — прячем декоративную "панель ворот" и blueprint */
.hero.has-photo > .hero-gate-side,
.hero.has-photo > .hero-blueprint { display: none; }
.hero.has-photo > * { position: relative; z-index: 2; }
/* ══ LEAD FORM MODAL ════════════════════════════════════════════ */
.lf-overlay {
position: fixed; inset: 0; z-index: 1000;
background: rgba(7,16,10,.78);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
display: flex; align-items: center; justify-content: center;
padding: 24px;
opacity: 0; visibility: hidden;
transition: opacity .25s ease, visibility .25s;
}
.lf-overlay.on { opacity: 1; visibility: visible; }
.lf-modal {
display: grid; grid-template-columns: 320px 1fr;
width: 100%; max-width: 880px;
max-height: calc(100vh - 48px);
background: var(--panel);
border: 1px solid var(--border);
border-radius: 14px;
overflow: hidden;
box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(74,222,128,.05);
transform: translateY(20px) scale(.97);
opacity: 0;
transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .25s ease;
}
.lf-overlay.on .lf-modal { transform: translateY(0) scale(1); opacity: 1; }
/* ── Left blueprint panel ─────────────────────────────────────── */
.lf-left {
position: relative;
background:
linear-gradient(135deg, rgba(26,122,71,.18), rgba(7,16,10,.7)),
radial-gradient(ellipse at top right, rgba(74,222,128,.16), transparent 60%),
var(--void);
color: #fff;
padding: 32px 26px 26px;
display: flex; flex-direction: column;
overflow: hidden;
}
.lf-corner {
position: absolute; width: 14px; height: 14px;
border: 1.5px solid rgba(74,222,128,.55);
}
.lf-corner.tl { top: 14px; left: 14px; border-right: none; border-bottom: none; }
.lf-corner.tr { top: 14px; right: 14px; border-left: none; border-bottom: none; }
.lf-corner.bl { bottom: 14px; left: 14px; border-right: none; border-top: none; }
.lf-corner.br { bottom: 14px; right: 14px; border-left: none; border-top: none; }
.lf-bp {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
opacity: .55; pointer-events: none;
}
.lf-bp svg { width: 80%; max-width: 220px; }
.lf-left-body { position: relative; z-index: 1; margin-top: auto; }
.lf-left-tag {
font-family: var(--mono); font-size: 10.5px; font-weight: 700;
letter-spacing: .14em; color: var(--green-l);
margin-bottom: 12px; text-transform: uppercase;
}
.lf-left-h {
font-size: 24px; font-weight: 800; line-height: 1.15;
letter-spacing: -.01em; margin-bottom: 22px;
}
.lf-left-h em { font-style: normal; color: var(--green-l); }
.lf-left-list { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 10px; }
.lf-left-list li {
display: flex; gap: 10px; align-items: flex-start;
font-size: 12.5px; line-height: 1.4; color: rgba(255,255,255,.78);
}
.lf-li-num {
flex: none; font-family: var(--mono); font-size: 10px; font-weight: 700;
color: var(--green-l); border: 1px solid rgba(74,222,128,.35);
border-radius: 4px; padding: 2px 5px; min-width: 22px; text-align: center;
}
.lf-left-foot {
padding-top: 14px;
border-top: 1px dashed rgba(255,255,255,.12);
}
.lf-left-phone {
font-size: 17px; font-weight: 800; color: #fff;
letter-spacing: -.005em; margin-bottom: 3px;
}
.lf-left-phone--alt { font-size: 14px; font-weight: 700; color: rgba(255,255,255,.78); margin-bottom: 8px; }
.lf-left-hours {
font-family: var(--mono); font-size: 10.5px;
color: rgba(255,255,255,.55); letter-spacing: .05em;
}
/* ── Right form panel ─────────────────────────────────────────── */
.lf-right {
position: relative;
padding: 30px 32px 28px;
background: #fff;
color: #1a2e1d;
overflow-y: auto;
max-height: calc(100vh - 48px);
}
.lf-close {
position: absolute; top: 14px; right: 14px;
width: 32px; height: 32px; border-radius: 8px;
background: transparent; border: 1px solid var(--gray-l);
color: #4a5d50; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all .15s;
}
.lf-close:hover { background: var(--gray-l); color: #1a2e1d; }
.lf-head { margin-bottom: 18px; }
.lf-eyebrow {
font-family: var(--mono); font-size: 10.5px; font-weight: 700;
letter-spacing: .12em; color: var(--green); margin-bottom: 8px;
}
.lf-title {
font-size: 22px; font-weight: 800; line-height: 1.2;
letter-spacing: -.015em; color: #0d1a10;
}
.lf-title em { font-style: normal; color: var(--green); }
.lf-sub {
margin-top: 8px; font-size: 13.5px; color: #4a5d50; line-height: 1.5;
}
.lf-chip {
display: inline-flex; align-items: center; gap: 8px;
background: rgba(26,122,71,.07);
border: 1px solid rgba(26,122,71,.18);
border-radius: 8px;
padding: 7px 12px;
margin-bottom: 16px;
font-size: 12.5px;
max-width: 100%;
}
.lf-chip-i { color: var(--green); flex: none; }
.lf-chip-v {
color: #0d1a10; font-weight: 600;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Fields */
.lf-field { display: block; margin-bottom: 14px; }
.lf-lbl {
display: block;
font-family: var(--mono); font-size: 10.5px; font-weight: 700;
letter-spacing: .1em; color: var(--green);
margin-bottom: 6px; text-transform: uppercase;
}
.lf-opt { color: #8aa094; font-weight: 500; text-transform: none; letter-spacing: 0; }
.lf-field input,
.lf-field textarea {
width: 100%;
background: #fff;
border: 1.5px solid var(--gray-l);
border-radius: 9px;
padding: 12px 14px;
font-size: 14px; font-family: inherit; color: #1a2e1d;
transition: border-color .15s, box-shadow .15s;
line-height: 1.4;
}
.lf-field textarea { resize: vertical; min-height: 56px; max-height: 160px; }
.lf-field input:focus,
.lf-field textarea:focus {
outline: none;
border-color: var(--green);
box-shadow: 0 0 0 3px rgba(26,122,71,.13);
}
.lf-field input::placeholder,
.lf-field textarea::placeholder { color: #a8b8ae; }
/* Inline error */
.lf-msg {
background: #fef2f2;
color: #b91c1c;
border: 1px solid #fecaca;
border-radius: 8px;
padding: 10px 12px;
font-size: 13px;
margin-bottom: 12px;
}
/* Submit */
.lf-submit {
width: 100%;
display: inline-flex; align-items: center; justify-content: center; gap: 9px;
background: var(--green);
color: #fff;
border: none;
border-radius: 10px;
padding: 15px 22px;
font-size: 15px; font-weight: 800;
cursor: pointer;
transition: all .2s;
margin-top: 4px;
box-shadow: 0 4px 16px rgba(26,122,71,.28);
letter-spacing: -.005em;
}
.lf-submit:hover:not(:disabled) {
background: var(--green-d);
transform: translateY(-1px);
box-shadow: 0 6px 22px rgba(26,122,71,.4);
}
.lf-submit:disabled { opacity: .82; cursor: wait; transform: none; }
.lf-submit-spin { display: none; animation: lf-spin 1s linear infinite; }
.lf-submit.loading .lf-submit-arrow { display: none; }
.lf-submit.loading .lf-submit-spin { display: inline-block; }
@keyframes lf-spin { to { transform: rotate(360deg); } }
.lf-note {
margin-top: 12px;
font-size: 11.5px; color: #6c7a72; text-align: center; line-height: 1.5;
}
.lf-note a { color: var(--green); border-bottom: 1px dotted currentColor; }
.lf-note a:hover { color: var(--green-d); }
.lf-trust {
margin-top: 14px;
display: inline-flex; align-items: center; gap: 7px;
font-family: var(--mono); font-size: 10.5px; font-weight: 700;
letter-spacing: .08em; color: var(--green);
text-transform: uppercase;
background: rgba(26,122,71,.06);
border-radius: 6px;
padding: 6px 10px;
}
.lf-trust-i { display: inline-flex; }
/* Success */
.lf-success {
text-align: center;
padding: 20px 8px 8px;
}
.lf-success-ico {
display: inline-flex; align-items: center; justify-content: center;
width: 78px; height: 78px;
background: rgba(26,122,71,.08);
color: var(--green);
border-radius: 50%;
margin-bottom: 18px;
animation: lf-pop .45s cubic-bezier(.2,.9,.2,1.3);
}
@keyframes lf-pop {
0% { transform: scale(.4); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.lf-success-h {
font-size: 22px; font-weight: 800;
color: #0d1a10; margin-bottom: 8px; letter-spacing: -.01em;
}
.lf-success-p {
font-size: 14px; color: #4a5d50;
line-height: 1.5; margin-bottom: 24px;
}
.lf-success-close {
background: transparent; color: var(--green);
border: 1.5px solid var(--green);
border-radius: 9px;
padding: 11px 28px;
font-weight: 700; font-size: 14px;
cursor: pointer;
transition: all .18s;
}
.lf-success-close:hover { background: var(--green); color: #fff; }
/* Mobile */
@media (max-width: 720px) {
.lf-overlay { padding: 0; align-items: stretch; }
.lf-modal {
grid-template-columns: 1fr;
max-width: 100%;
max-height: 100vh;
height: 100vh;
border-radius: 0;
border: none;
}
.lf-left { display: none; }
.lf-right { padding: 26px 22px 22px; max-height: 100vh; }
.lf-close { top: 10px; right: 10px; }
.lf-title { font-size: 19px; }
}
.cookie{
position:fixed;
left:20px;
right:20px;
bottom:20px;
max-width:750px;
background:#fff;
padding:18px;
border-radius:12px;
box-shadow:0 5px 25px rgba(0,0,0,.2);
z-index:999999;
font-family:inherit;
font-size:14px;
display:none;
}
.cookie-buttons{
display:flex;
gap:10px;
margin-top:12px;
}
.cookie-buttons button{
padding:10px 16px;
border:none;
cursor:pointer;
border-radius:6px;
transition: all .2s;
}
.cookie-buttons .accept{background:#1a7a47;color:#fff;}
.cookie-buttons .accept:hover{background:#136c3d;}
.cookie-buttons .reject{background:#eee;color:#333;}
.cookie-buttons .reject:hover{background:#07100a;color:#fff;}
@media all and (max-width: 640px){.cookie{font-size: 12px; line-height: 14px;}}