/* === Apple system font stack === */
html, body {
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
"SF Pro Display", "Helvetica Neue", Helvetica,
Arial, system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
:root{
--bg:#f6f8fb;
--card: rgba(255,255,255,.92);
--text:#0b1220;
--muted:#5b6b86;
--line:rgba(10,20,40,.12);
--accent:#1b66ff;
--radius:18px;
--shadow: 0 14px 34px rgba(10,20,40,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;
font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
background:
radial-gradient(1100px 650px at 10% 0%, rgba(27,102,255,.10), transparent 60%),
radial-gradient(900px 600px at 90% 10%, rgba(45,180,255,.10), transparent 55%),
var(--bg);
color:var(--text);
line-height:1.55;
}
a{color:inherit; text-decoration:none}
.container{width:min(1160px, 92vw); margin:0 auto;}
header{
position:sticky; top:0; z-index:50;
backdrop-filter: blur(10px);
background: rgba(7,11,18,.72);
border-bottom: 1px solid var(--line);
}
.nav{
display:flex; align-items:center; justify-content:space-between;
padding:14px 0;
gap:18px;
}
.brand{display:flex; align-items:center; gap:12px; min-width: 220px;}
.brand img{
width:40px; height:40px; border-radius: 12px;
object-fit: cover;
border:1px solid var(--line);
background: rgba(255,255,255,.05);
}
.brand .name{display:flex; flex-direction:column; line-height:1.05;}
.brand .name b{font-size:16px; letter-spacing:.02em}
.brand .name span{font-size:12px; color:var(--muted); margin-top:4px}
nav.menu{display:flex; gap:14px; flex-wrap:wrap}
nav.menu a{color:var(--muted); font-weight:800; font-size:13px}
nav.menu a:hover{color:var(--text)}
.actions{display:flex; align-items:center; gap:10px}
.btn{
border:1px solid var(--line);
background: rgba(255,255,255,.92);
color:var(--text);
padding:10px 14px;
border-radius: 12px;
font-weight:850;
cursor:pointer;
transition: transform .18s ease, background .18s ease, border-color .18s ease;
user-select:none;
}
.btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.22)}
.btn.primary{
border-color: transparent;
background: none;
color:#061023;
}
.hero{padding: 26px 0 18px}
.hero-wrap{
position:relative;
overflow:hidden;
border-radius: 22px;
border:1px solid var(--line);
box-shadow: var(--shadow);
background: transparent;
}
.hero-bg{
position:absolute; inset:0;
background-image: url("../assets/brand.jpg");
background-size: 140%;
background-position: center;
opacity: 1;
filter: none;
transform: none;
}
.hero-overlay{
position:absolute; inset:0;
background: none;
}
.hero-grid{
position:relative;
display:grid;
grid-template-columns: 1.2fr .8fr;
gap: 16px;
padding: 22px;
}
.card{
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
}
.hero-main{padding:18px}
.kicker{color:var(--muted); font-weight:900; letter-spacing:.02em; font-size:13px}
h1{margin:10px 0 10px; font-size: clamp(26px, 3.2vw, 44px); line-height:1.08}
.lead{color:var(--muted); font-size:16px; margin: 0 0 14px}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin: 14px 0 14px}
.chip{
font-size:13px; color:var(--text);
padding:7px 10px;
border-radius: 999px;
border:1px solid var(--line);
background: rgba(255,255,255,.92);
}
.hero-ctas{display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px}
.hero-side{padding:16px; display:flex; flex-direction:column; gap:10px}
.contact-mini{
padding:12px;
border-radius: 16px;
border:1px solid var(--line);
background: rgba(255,255,255,.92);
}
.contact-mini b{display:block; font-size:16px; margin-bottom:6px}
.contact-mini a, .contact-mini div{color: var(--muted); font-weight:700; font-size:13px}
.contact-mini a:hover{color: var(--text)}
section{padding: 22px 0}
.section-title{
display:flex; align-items:flex-end; justify-content:space-between;
gap:12px; margin: 0 0 12px;
}
.section-title h2{margin:0; font-size:22px}
.section-title p{margin:0; color:var(--muted); font-size:14px}
.grid3{display:grid; grid-template-columns: repeat(3, 1fr); gap:12px}
.tile{
padding:16px;
border-radius: var(--radius);
border:1px solid var(--line);
background: rgba(255,255,255,.92);
transition: transform .18s ease, background .18s ease;
min-height: 122px;
}
.tile:hover{transform: translateY(-2px); background: rgba(255,255,255,.06)}
.tile .t{font-weight:950; margin-bottom:8px}
.tile .d{color:var(--muted); font-size:14px}
.split{
display:grid;
grid-template-columns: 1fr 1fr;
gap:12px;
align-items:stretch;
}
.block{padding:16px}
.list{margin:10px 0 0; padding-left:18px; color:var(--muted)}
.cta{
display:flex; align-items:center; justify-content:space-between;
gap:14px; padding:18px;
}
.breadcrumbs{
color: var(--muted);
font-size: 13px;
font-weight: 750;
display:flex;
gap:8px;
flex-wrap:wrap;
}
.breadcrumbs a{color: var(--muted)}
.breadcrumbs a:hover{color: var(--text)}
.note{color:var(--muted); font-size:12px}
footer{
padding: 28px 0 40px;
border-top: 1px solid var(--line);
color: var(--muted);
}
/* Modal */
.modal-backdrop{
position:fixed; inset:0; z-index:100;
background: rgba(10,20,40,.45);
display:none;
align-items:center;
justify-content:center;
padding: 18px;
}
.modal{
width:min(620px, 96vw);
padding:18px;
box-shadow: var(--shadow);
}
.modal h3{margin:0}
.x{background:transparent; border:none; color:var(--muted); cursor:pointer; font-weight:950; font-size:16px}
.row{display:grid; grid-template-columns: 1fr 1fr; gap:10px}
input, textarea{
width: 100%;
padding:12px 12px;
border-radius: 12px;
border:1px solid var(--line);
background: rgba(255,255,255,.92);
color: var(--text);
outline:none;
}
textarea{min-height: 110px; resize: vertical}
.modal .bar{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:12px}
/* Reveal */
.reveal{opacity:0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease}
.reveal.show{opacity:1; transform:none}
@media (max-width: 900px){
.hero-grid{grid-template-columns: 1fr}
.grid3{grid-template-columns: 1fr}
.split{grid-template-columns: 1fr}
nav.menu{display:none}
.row{grid-template-columns: 1fr}
.brand{min-width:auto}
}
/* Team */
.team-grid{
display:grid;
grid-template-columns: repeat(4, 1fr);
gap:12px;
}
.team-card{
overflow:hidden;
border-radius: var(--radius);
border:1px solid var(--line);
background: rgba(255,255,255,.92);
transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.team-card:hover{
transform: translateY(-2px);
background: rgba(27,102,255,.06);
border-color: rgba(255,255,255,.22);
}
.team-meta{padding:14px}
.team-name{font-weight:950; margin:0 0 6px; font-size:15px}
.team-role{margin:0; color:var(--muted); font-weight:750; font-size:13px}
@media (max-width: 1100px){
.team-grid{grid-template-columns: repeat(3, 1fr);}
}
@media (max-width: 900px){
.team-grid{grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 520px){
.team-grid{grid-template-columns: 1fr;}
}
/* Light theme overrides */
body{
margin:0;
font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
background:
radial-gradient(1100px 650px at 10% 0%, rgba(27,102,255,.10), transparent 60%),
radial-gradient(900px 600px at 90% 10%, rgba(45,180,255,.10), transparent 55%),
var(--bg);
color:var(--text);
line-height:1.55;
}
header{
background:#ffffff;
border-bottom:1px solid var(--line);
}
nav a{
color: var(--text);
}
nav a:hover{
color: var(--accent);
}
.card{
background: var(--card);
}
footer{
background: var(--bg-soft);
color: var(--muted);
}
.btn.primary{
background: var(--accent);
color:#fff;
}
.btn.primary:hover{
background: var(--accent-2);
}
/* Header (light, like chelzeo: top contacts + main nav) */
.topbar{
background: #ffffff;
border-bottom: 1px solid var(--line);
}
.topbar .topbar-inner{
display:flex; align-items:center; justify-content:space-between;
padding: 8px 0;
gap:12px;
color: var(--muted);
font-weight: 750;
font-size: 13px;
}
.topbar a{color: inherit}
.topbar a:hover{color: var(--text)}
header{
position:sticky; top:0; z-index:50;
backdrop-filter: none;
background: rgba(246,248,251,.86);
border-bottom: 1px solid var(--line);
}
.nav{
display:flex; align-items:center; justify-content:space-between;
padding: 12px 0;
gap:16px;
}
.brand img{
border:1px solid var(--line);
background: #fff;
}
nav.menu a{color: var(--muted)}
nav.menu a:hover{color: var(--text)}
.btn{
border:1px solid var(--line);
background: #fff;
color: var(--text);
box-shadow: 0 8px 18px rgba(10,20,40,.06);
}
.btn:hover{background:#fff;
/* subtle frame */ border-color: rgba(10,20,40,.22)}
.btn.primary{
border-color: transparent;
background: none;
color:#ffffff;
box-shadow: 0 12px 24px rgba(27,102,255,.18);
}
/* Dropdown */
.menu{position:relative}
.dropdown{position:relative}
.dropbtn{
display:inline-flex; align-items:center; gap:6px;
cursor:pointer;
}
.caret{font-size:12px; color: var(--muted); transform: translateY(-1px)}
.dropdown-panel{
pointer-events:auto;
position:absolute;
top: calc(100% + 10px);
left:0;
min-width: 260px;
padding: 10px;
border-radius: 16px;
border:1px solid var(--line);
background: rgba(255,255,255,.96);
box-shadow: var(--shadow);
display:none;
}
.dropdown-panel a{
display:flex;
padding:10px 10px;
border-radius: 12px;
color: var(--text);
font-weight: 850;
}
.dropdown-panel a:hover{background: rgba(27,102,255,.06)}
.dropdown-panel small{display:block; margin-top:4px; color: var(--muted); font-weight:700}
/* Mobile menu */
.burger{
display:none;
width:44px; height:44px;
border-radius: 12px;
border:1px solid var(--line);
background:#fff;
cursor:pointer;
align-items:center; justify-content:center;
box-shadow: 0 8px 18px rgba(10,20,40,.06);
}
.burger span{
width:18px; height:2px; background: var(--text);
display:block; position:relative;
}
.burger span::before,.burger span::after{
content:""; position:absolute; left:0;
width:18px; height:2px; background: var(--text);
}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.mobile-panel{
display:none;
border-top: 1px solid var(--line);
background: rgba(255,255,255,.92);
}
.mobile-panel .inner{
padding: 10px 0 14px;
display:flex;
flex-direction:column;
gap:8px;
}
.mobile-panel a{
padding: 10px 12px;
border-radius: 12px;
border:1px solid var(--line);
background:#fff;
font-weight: 850;
color: var(--text);
}
.mobile-panel a:hover{background: rgba(27,102,255,.06)}
@media (max-width: 900px){
nav.menu{display:none}
.burger{display:flex}
}
/* Fix menu vertical alignment */
nav.menu{
display:flex;
align-items:center;
}
nav.menu a,
.dropbtn{
display:inline-flex;
align-items:center;
line-height:1;
padding-top:8px;
padding-bottom:8px;
}
.caret{
margin-top:1px;
}
/* Dropdown controlled by click (persistent) */
.dropdown.open .dropdown-panel{
display:block;
}
/* === Dropdown "Продукция": единый шрифт и размер === */
.dropdown-panel a{
font-family: inherit;
font-size: 16px;
font-weight: 500;
line-height: 1.3;
}
.dropdown-panel a small{
font-size: 16px;
font-weight: 500;
line-height: 1.3;
color: var(--muted);
}
/* === Dropdown "Продукция": ровный вертикальный список (без поломки закрытия) === */
.dropdown-panel{
flex-direction:column;
gap:0;
}
.dropdown.open .dropdown-panel{
display:flex;
}
.dropdown-panel a{
width: 100%;
box-sizing:border-box;
}
/* Products page cards */
.product-grid{
display:grid;
grid-template-columns: repeat(3, 1fr);
gap:14px;
}
.product-card{
border:1px solid var(--line);
background: rgba(255,255,255,.92);
border-radius: 20px;
box-shadow: 0 12px 28px rgba(10,20,40,.08);
padding: 16px 16px 14px;
display:flex;
flex-direction:column;
gap:10px;
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.product-card:hover{
transform: translateY(-2px);
border-color: rgba(10,20,40,.22);
box-shadow: 0 16px 34px rgba(10,20,40,.10);
}
.p-top{
display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
}
.p-title{
margin:0;
font-size: 16px;
font-weight: 900;
}
.p-chip{
white-space:nowrap;
font-size: 12px;
font-weight: 800;
padding: 6px 10px;
border-radius: 999px;
border:1px solid var(--line);
background: rgba(27,102,255,.06);
color: var(--text);
}
.p-desc{
margin:0;
color: var(--muted);
font-size: 13.5px;
}
.p-list{
margin: 0;
padding-left: 18px;
color: var(--muted);
font-size: 13px;
}
.p-actions{
margin-top:auto;
display:flex;
gap:10px;
flex-wrap:wrap;
}
.p-actions .btn{padding:10px 12px}
.p-actions .btn.primary{padding:10px 12px}
@media (max-width: 980px){
.product-grid{grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 620px){
.product-grid{grid-template-columns: 1fr;}
}
/* Active menu item */
nav.menu a.active,
nav.menu .dropdown.active > .dropbtn{
color: var(--accent);
font-weight: 800;
position: relative;
}
nav.menu a.active::after,
nav.menu .dropdown.active > .dropbtn::after{
content:"";
position:absolute;
left:0;
right:0;
bottom:-6px;
height:2px;
background: var(--accent);
border-radius:2px;
}
/* Active menu */
nav.menu a.active,
nav.menu .dropbtn.active{
color: var(--text);
position:relative;
}
nav.menu a.active::after,
nav.menu .dropbtn.active::after{
content:"";
position:absolute;
left:0; right:0;
bottom:-10px;
height:2px;
border-radius: 999px;
background: rgba(27,102,255,.9);
}
.dropdown-panel a.active{
background: rgba(27,102,255,.08);
}
/* Home hero layout tweaks */
.hero-inner{
display:grid;
grid-template-columns: 1.35fr .65fr;
gap:16px;
padding: 26px 0 10px;
}
.hero-main h1{margin-top:10px}
@media (max-width: 980px){
.hero-inner{grid-template-columns: 1fr; padding-top:18px}
.hero-side{order:2}
}
/* Industrial hero (strict) */
.hero-inner.industrial{
padding: 22px 0 10px;
}
.hero-inner.industrial h1{
font-size: clamp(28px, 3.2vw, 44px);
font-weight: 900;
letter-spacing: .2px;
}
.hero-inner.industrial .lead{
font-size: 15px;
margin-top: 8px;
}
.hero-metrics{
display:flex;
gap:18px;
margin-top:14px;
}
.hero-metrics div{
display:flex;
flex-direction:column;
gap:2px;
}
.hero-metrics b{
font-size:18px;
}
.hero-metrics span{
font-size:12px;
color:var(--muted);
}
.list.compact li{
margin-bottom:6px;
}
/* Industrial hero */
.hero-industrial .hero-wrap{
position:relative;
overflow:hidden;
border-radius: 22px;
border:1px solid var(--line);
box-shadow: var(--shadow);
background: transparent;
}
.hero-industrial .hero-main{
padding: 18px;
}
.hero-industrial .hero-side{
padding: 18px;
}
.hero-industrial .eyebrow{
font-weight: 800;
font-size: 12px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--muted);
}
.hero-industrial .subline{
margin-top: 10px;
font-weight: 850;
color: var(--text);
opacity: .92;
}
.hero-industrial .hero-ctas{
margin-top: 14px;
display:flex;
gap:10px;
flex-wrap:wrap;
}
.hero-industrial .mini{
margin-top: 14px;
display:grid;
grid-template-columns: repeat(3, 1fr);
gap:10px;
}
.hero-industrial .mini-item{
border:1px solid var(--line);
border-radius: 16px;
background: rgba(255,255,255,.92);
padding: 12px 12px;
}
.hero-industrial .mini-item b{
display:block;
font-size: 13px;
}
.hero-industrial .mini-item span{
display:block;
margin-top:6px;
color: var(--muted);
font-size: 12.5px;
line-height:1.35;
}
.hero-industrial .industrial-grid{
display:grid;
grid-template-columns: 1.35fr .65fr;
gap:14px;
}
@media (max-width: 980px){
.hero-industrial .industrial-grid{grid-template-columns:1fr}
.hero-industrial .mini{grid-template-columns:1fr}
}
/* Product card image */
.product-img{
width: 100%;
padding:10px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid var(--line);
border-radius:14px;
background:#fff;
}
.product-img img{
width: 100%;
height:100%;
object-fit:cover;
object-position:center;
}
/* === Unified product cards & images === */
.product-grid{
display:grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap:16px;
align-items:stretch;
}
.product-card{
display:flex;
flex-direction:column;
height:100%;
}
.product-img{
height:200px;
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
border:1px solid var(--line);
border-radius:14px;
background:#fff;
overflow:hidden;
margin-top:10px;
}
.product-img img{
width: 100%;
height:100%;
object-fit:cover;
object-position:center;
}
.p-desc{flex-grow:1;}
.p-actions{margin-top:auto;}
/* === Hide hero chips on inner pages === */
body:not(.home) .chips,
body:not(.home) .hero .chips,
body:not(.home) .hero-badges{
display:none !important;
}
/* === Design refresh v1 === */
:root{
--radius: 18px;
--radius-sm: 14px;
--shadow: 0 14px 34px rgba(10,20,40,.10);
--shadow-sm: 0 10px 24px rgba(10,20,40,.08);
--accent: rgba(27,102,255,1);
--accent-soft: rgba(27,102,255,.08);
--bg-soft: rgba(245,247,250,.92);
}
body{
color: var(--text);
letter-spacing: .01em;
}
/* Container width */
.container{
max-width: 1160px;
}
/* Header polish */
header{
backdrop-filter: blur(10px);
}
.topline{
font-size: 13px;
}
nav.menu a, .dropbtn{
font-weight: 800;
font-size: 16px;
padding: 10px 10px;
border-radius: 12px;
}
nav.menu a:hover, .dropbtn:hover{
background: var(--accent-soft);
}
/* Buttons */
.btn{
border-radius: 14px;
font-weight: 850;
box-shadow: none;
}
.btn.primary{
background: var(--accent);
border-color: rgba(27,102,255,.55);
}
.btn.primary:hover{
filter: brightness(0.98);
}
/* Sections */
section{
padding: 44px 0;
}
.section-title h2{
font-size: 28px;
letter-spacing: .01em;
}
.section-title p{
max-width: 760px;
}
/* Card system */
.card, .product-card{
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
}
.card.block{
padding: 18px;
}
.product-card{
padding: 16px;
box-shadow: var(--shadow-sm);
}
.product-card:hover{
box-shadow: var(--shadow);
}
/* Product image frame */
.product-img{
border-radius: var(--radius-sm);
}
/* Soft separators */
.section-sep{
height:1px;
background: var(--line);
opacity:.8;
margin: 0;
}
/* Footer */
footer{
margin-top: 20px;
}
.footer-grid{
display:grid;
grid-template-columns: 1.2fr .8fr .8fr;
gap: 14px;
}
@media (max-width: 980px){
.footer-grid{grid-template-columns:1fr}
}
/* Intro video block polish */
.intro-video{
height: 92vh;
}
.intro-video::after{
content:"";
position:absolute;
inset:0;
background: none;
pointer-events:none;
}
/* === Industrial palette v2 === */
:root{
--bg-main:#ffffff;
--bg-soft:#f4f7fb;
--text:#0f1e3a;
--text-soft:#4b5b78;
--accent:#1b6cff;
--accent-light:#6fb7ff;
--line:#e1e7f0;
}
body{
background:var(--bg-main);
color:var(--text);
}
header, footer{
background:#ffffff;
}
section{
background:transparent;
}
/* remove decorative shadows & extras */
.card, .product-card{
box-shadow: 0 8px 20px rgba(15,30,58,.08);
}
.hero, .intro-video::after{
background:none;
}
.btn.primary{
background:var(--accent);
color:#fff;
}
.btn.secondary{
background:#fff;
border:1px solid var(--accent);
color:var(--accent);
}
a{
color:var(--accent);
}
a:hover{
color:var(--accent-light);
}
/* tables & specs */
table{
border-collapse:collapse;
}
table th, table td{
border:1px solid var(--line);
padding:10px 12px;
}
/* footer minimal */
footer{
border-top:1px solid var(--line);
}
/* === Vertical left navigation (fixed) === */
@media (min-width: 981px){
header{
width: var(--sidebar-w);
min-height: 100vh;
position: fixed;
left: 0;
top: 0;
border-right: 1px solid var(--line);
background: #fff;
z-index: 100;
overflow-y: auto;
}
/* hide topbar in sidebar mode (keeps layout clean) */
.topbar{display:none;}
/* content shifted */
main, footer{
margin-left: var(--sidebar-w);
}
/* stack header content */
.container.nav{
display:flex;
flex-direction: column;
align-items: stretch;
gap: 14px;
padding: 18px 14px 16px;
}
.brand{
width: 100%;
padding: 12px 12px;
border:1px solid var(--line);
border-radius: 16px;
background: var(--bg-soft);
}
.brand img{width:42px;height:42px;border-radius:10px;object-fit:cover}
.brand .name b{font-size:16px; letter-spacing:.06em}
.brand .name span{font-size:12px}
nav.menu{
display:flex;
flex-direction: column;
gap: 6px;
width: 100%;
margin-top: 0;
}
nav.menu a, .dropbtn{
width: 100%;
display:flex;
align-items:center;
justify-content: space-between;
padding: 12px 12px;
font-size: 16px;
border-radius: 14px;
color: var(--text-soft);
}
nav.menu a:hover, .dropbtn:hover{
background: var(--accent-soft);
color: var(--text);
}
/* active state: background only (no underline line) */
nav.menu a.active, nav.menu .dropbtn.active{
background: var(--accent-soft);
color: var(--accent);
font-weight: 900;
}
nav.menu a.active::after,
nav.menu .dropbtn.active::after{ display:none !important; }
/* dropdown in vertical menu */
.dropdown{width: 100%;}
.dropdown-panel{
position: static;
border: 0;
box-shadow: none;
padding: 6px 6px 6px 10px;
margin-top: 4px;
background: transparent;
}
.dropdown-panel a{
border-radius: 12px;
padding: 10px 10px;
}
}
@media (max-width: 980px){
/* keep original top header behavior on mobile */
header{
position: relative;
width: 100%;
min-height: auto;
border-right: none;
}
main, footer{ margin-left: 0; }
}
/* === Global branded background (full width) === */
body{
background:
radial-gradient(ellipse at center, rgba(255, 255, 255, 0.77), rgba(244, 247, 251, 0.82)),
url("../assets/bg/site-bg.png") center top / cover no-repeat fixed;
}
/* === Apple-inspired industrial layer === */
:root{
/* slightly softer, more premium */
--text:#0b1220;
--text-soft:#3d4a61;
--bg-main:#ffffff;
--bg-soft:#f5f7fb;
--line:#e6ebf3;
--accent:#0a66ff;
--accent-light:#5aa6ff;
}
/* Global rhythm */
html{ font-size: 16px; }
body{
letter-spacing: .005em;
line-height: 1.55;
background: var(--bg-main);
}
/* Headings like Apple */
h1,h2,h3{
letter-spacing: -0.015em;
color: var(--text);
}
h1{
font-size: clamp(34px, 3.2vw, 46px);
line-height: 1.08;
font-weight: 650;
}
h2{
font-size: clamp(24px, 2.2vw, 34px);
line-height: 1.15;
font-weight: 650;
}
h3{
font-size: 18px;
line-height: 1.25;
font-weight: 650;
}
p{
color: var(--text-soft);
}
/* More “air” */
section{ padding: 54px 0; }
.container{ max-width: 1180px; }
/* Sidebar/menu: cleaner */
nav.menu a, .dropbtn{
font-weight: 650;
font-size: 14.5px;
letter-spacing: .002em;
}
nav.menu a.active, nav.menu .dropbtn.active{
font-weight: 750;
}
nav.menu a:hover, .dropbtn:hover{
background: rgba(10,102,255,.08);
}
/* Buttons: Apple-like */
.btn{
border-radius: 999px;
padding: 11px 16px;
font-weight: 650;
border: 1px solid rgba(15,30,58,.12);
transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
}
.btn:hover{
transform: translateY(-1px);
box-shadow: 0 10px 22px rgba(10,20,40,.10);
}
.btn.primary{
background: var(--accent);
border-color: rgba(10,102,255,.45);
}
.btn.primary:hover{
background: #085cf0;
}
.btn:active{
transform: translateY(0px);
}
/* Cards: minimal, crisp */
.card, .product-card{
border-radius: 22px;
border: 1px solid var(--line);
box-shadow: 0 10px 30px rgba(10,20,40,.06);
}
.product-card{
padding: 18px;
}
.product-card:hover{
box-shadow: 0 18px 44px rgba(10,20,40,.10);
}
.product-img{
border-radius: 18px;
border: 1px solid var(--line);
background: #fff;
}
.product-img img{
object-fit: cover;
}
/* Chips/labels: quieter */
.p-chip{
background: rgba(10,102,255,.08);
color: var(--accent);
border: 1px solid rgba(10,102,255,.14);
font-weight: 650;
}
/* Links */
a{ color: var(--accent); }
a:hover{ color: var(--accent-light); }
/* Tables: Apple clean */
table{
border-radius: 16px;
overflow:hidden;
}
table th{
background: var(--bg-soft);
font-weight: 650;
color: var(--text);
}
/* Reduce noisy elements (if any) */
.section-sep{ opacity:.65; }
/* === HeroA (variant A) === */
.heroA{
position: relative;
border-radius: 26px;
overflow: hidden;
margin: 22px 0 0;
border: 1px solid var(--line);
background: #fff;
}
.heroA-media{
position:absolute; inset:0;
background-position:center;
background-size: 140%;
filter: saturate(0.95) contrast(1.02);
transform: scale(1.02);
}
.heroA-overlay{
position:absolute; inset:0;
background: none;
}
.heroA-inner{
position: relative;
display:grid;
grid-template-columns: 1.35fr .65fr;
gap: 18px;
padding: 28px;
}
.heroA-kicker{
font-size: 12px;
letter-spacing: .14em;
font-weight: 750;
color: var(--text-soft);
}
.heroA-sub{
margin: 10px 0 0;
font-weight: 700;
color: var(--text-soft);
}
.heroA-actions{
display:flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 18px;
}
.heroA-right .heroA-box{
border:1px solid var(--line);
border-radius: 20px;
padding: 16px;
background: rgba(255,255,255,.85);
}
.heroA-box-title{
font-weight: 750;
color: var(--text);
margin-bottom: 10px;
}
.heroA-box-list{
margin: 0;
padding-left: 18px;
color: var(--text-soft);
}
.heroA-box-list li{ margin: 6px 0; }
.heroA-box-actions{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-top: 14px;
}
@media (max-width: 980px){
.heroA-inner{ grid-template-columns: 1fr; }
}
/* === Variant A homepage (chelzeo-inspired) === */
.section-a .section-head{
display:flex;
flex-direction:column;
gap:10px;
max-width: 900px;
}
.section-a .section-head p{
margin:0;
color: var(--text-soft);
font-size: 15px;
line-height: 1.6;
}
.product-tree{
list-style:none;
padding:0;
margin: 22px 0 0;
border: 1px solid var(--line);
border-radius: 18px;
overflow:hidden;
background:#fff;
}
.product-tree li + li{ border-top: 1px solid var(--line); }
.product-tree a{
display:flex;
gap: 10px;
align-items:baseline;
padding: 14px 16px;
text-decoration:none;
color: var(--text);
}
.product-tree a:hover{ background: rgba(10,102,255,.06); }
.product-tree .code{
min-width: 58px;
font-weight: 750;
letter-spacing: .02em;
}
.product-tree .dash{ color: var(--text-soft); }
.product-tree .desc{ color: var(--text-soft); }
.facts{
margin: 18px 0 0;
padding-left: 18px;
color: var(--text-soft);
}
.facts li{ margin: 6px 0; }
.more-link{ margin-top: 14px; }
.more-link a{ font-weight: 650; text-decoration:none; }
.more-link a:hover{ text-decoration:underline; }
.contact-row{
margin-top: 18px;
display:flex;
justify-content: space-between;
gap: 18px;
align-items:flex-start;
border:1px solid var(--line);
border-radius: 18px;
padding: 16px;
background:#fff;
}
.contact-label{
font-size: 12px;
letter-spacing: .08em;
font-weight: 750;
color: var(--text-soft);
margin-top: 10px;
}
.contact-link{
display:block;
margin: 6px 0;
font-weight: 650;
color: var(--accent);
text-decoration:none;
}
.contact-link:hover{ color: var(--accent-light); }
.contact-col.right{ display:flex; justify-content:flex-end; flex: 0 0 auto; align-self: center; }
@media (max-width: 900px){
.contact-row{ flex-direction: column; }
.contact-col.right{ justify-content:flex-start; align-self:flex-start; }
}
/* === MockA homepage layout === */
.page-home.mockA{ padding-top: 8px; }
.heroMock{
position: relative;
border-radius: 22px;
overflow: hidden;
border: 1px solid var(--line);
min-height: 360px;
background:#fff;
}
.heroMock-media{
position:absolute; inset:0;
background-position:center;
background-size: 140%;
filter: saturate(.95) contrast(1.05);
transform: scale(1.02);
}
.heroMock-shade{
position:absolute; inset:0;
background: none;
}
.heroMock-inner{
position:relative;
max-width: 680px;
padding: 42px 42px 40px;
}
.heroMock h1{
margin:0;
font-size: 44px;
line-height: 1.05;
letter-spacing: -.02em;
}
.heroMock-lead{
margin: 14px 0 0;
color: var(--text-soft);
font-size: 15px;
line-height: 1.65;
font-weight: 550;
}
.heroMock-actions{
display:flex;
gap: 10px;
flex-wrap:wrap;
margin-top: 18px;
}
@media (max-width: 980px){
.heroMock-inner{ padding: 26px; }
.heroMock h1{ font-size: 34px; }
}
/* product cards like in mock */
.cards{
margin-top: 16px;
display:grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 14px;
}
@media (max-width: 1200px){
.cards{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px){
.cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.card{
display:block;
padding: 14px;
border:1px solid var(--line);
border-radius: 18px;
background:#fff;
text-decoration:none;
color: var(--text);
transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.card:hover{
transform: translateY(-2px);
box-shadow: 0 12px 26px rgba(15,23,42,.08);
border-color: rgba(10,102,255,.25);
}
.card-img{
height: 120px;
border-radius: 14px;
background: #f3f6fb;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}
.card-img img{
width: 100%;
height: 100%;
object-fit: contain;
padding: 10px;
}
.card-title{
margin-top: 12px;
font-weight: 800;
letter-spacing: .02em;
}
.card-text{
margin-top: 6px;
color: var(--text-soft);
font-size: 13px;
line-height: 1.5;
}
/* Sidebar tweaks for mock */
.side-nav .nav-toggle{
display:flex;
justify-content: space-between;
align-items:center;
width: 100%;
background: transparent;
border: 0;
padding: 12px 12px;
border-radius: 12px;
font: inherit;
color: var(--text);
cursor:pointer;
}
.side-nav .nav-toggle:hover{ background: rgba(10,102,255,.06); }
.side-nav .nav-toggle .chev{ color: var(--text-soft); font-size: 16px; }
.nav-sub{
padding: 2px 0 10px 0;
display:block;
}
.nav-sub-item{
display:block;
padding: 10px 12px 10px 20px;
border-radius: 12px;
text-decoration:none;
color: var(--text-soft);
font-weight: 650;
}
.nav-sub-item:hover{ background: rgba(10,102,255,.06); color: var(--text); }
.nav-sub-item.active{ background: rgba(10,102,255,.10); color: var(--text); }
.nav-item.active{ background: rgba(10,102,255,.10); }
.section-head.compact h2{ margin-bottom: 0; }
/* === Brand logo size (big) === */
.brand{
display:flex;
align-items:center;
gap: 12px;
}
.brand img{
width: 110px;
height: auto;
border-radius: 16px;
box-shadow: 0 6px 18px rgba(15,23,42,.10);
}
.brand .brand-subtitle{
display:none;
}
/* === Side nav spacing & wrap fix === */
.side-nav{
display:flex;
flex-direction:column;
gap: 6px;
}
.side-nav .nav-item,
.side-nav .nav-toggle,
.side-nav .nav-sub-item{
width: 100%;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.side-nav .nav-item{
display:block;
}
.nav-sub{ margin-top: 2px; }
/* === Nav section title === */
.nav-section-title{
margin-top: 10px;
padding: 10px 12px;
font-size: 15px;
font-weight: 800;
color: var(--text-soft);
letter-spacing: .02em;
}
.nav-sub.always-open{ display:block !important; }
/* === Active indicator like ref === */
.side-nav .nav-item,
.side-nav .nav-sub-item{
position: relative;
}
.side-nav .nav-item.active::before,
.side-nav .nav-sub-item.active::before{
content:"";
position:absolute;
left: 0;
top: 8px;
bottom: 8px;
width: 3px;
border-radius: 999px;
background: var(--accent);
}
.side-nav .nav-item.active,
.side-nav .nav-sub-item.active{
background: rgba(10,102,255,.08);
}
/* === Chelzeo-inspired layout (applied to our structure) === */
:root{
--radius: 22px;
}
.container{
max-width: 1120px;
}
.chel .section{ padding: 38px 0; }
.chel-section .section-head{
display:flex;
align-items:flex-end;
justify-content: space-between;
gap: 16px;
margin-bottom: 16px;
}
.chel-section .section-head h2{
margin:0;
font-size: 28px;
letter-spacing: -0.01em;
}
.chel-section .section-head p{ margin:0; }
.section-head.row .link{
font-weight: 700;
text-decoration:none;
}
.section-head.row .link:hover{ text-decoration:underline; }
.h1{ font-size: 38px; letter-spacing: -0.02em; margin:0 0 10px; }
.h2{ font-size: 28px; letter-spacing: -0.01em; margin:0 0 10px; }
.p{ margin:0; line-height: 1.7; color: var(--text-soft); }
.muted{ color: var(--text-soft); }
/* Hero */
.chel-hero{
position: relative;
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--line);
background:#fff;
min-height: 420px;
}
.chel-hero .hero-media{
position:absolute; inset:0;
background-size: 140%;
background-position: center;
transform: scale(1.02);
filter: saturate(.98) contrast(1.08);
}
/* Video background for hero */
.chel-hero video.hero-media{
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 768px){
.chel-hero{
background-image: url('../assets/hero/hero-welder.jpg');
background-size: 140%;
background-position: center;
}
.chel-hero video.hero-media{ display:none; }
}
.chel-hero .hero-overlay{
position:absolute; inset:0;
background: none;
}
.chel-hero .hero-inner{
position:relative;
padding: 54px 0;
}
.chel-hero h1{
margin: 14px 0 0;
font-size: 48px;
line-height: 1.03;
letter-spacing: -0.02em;
max-width: 18ch;
}
.chel-hero .hero-lead{
margin: 14px 0 0;
max-width: 60ch;
color: var(--text-soft);
line-height: 1.7;
font-weight: 500;
}
.hero-contact{
display:flex;
align-items:center;
gap:10px;
color: var(--text-soft);
font-weight: 650;
}
.hero-contact a{
color: inherit;
text-decoration:none;
}
.hero-contact a:hover{ color: var(--accent); }
.hero-contact .dot{ opacity:.6; }
.hero-actions{
display:flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 22px;
}
/* Buttons */
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
height: 44px;
padding: 0 18px;
border-radius: 999px;
border: 1px solid rgba(15,23,42,.16);
background: #fff;
color: var(--text);
font-weight: 750;
text-decoration:none;
transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover{
transform: translateY(-1px);
box-shadow: 0 10px 22px rgba(15,23,42,.10);
}
.btn.primary{
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
.btn.primary:hover{ box-shadow: 0 12px 26px rgba(10,102,255,.22); }
.btn.ghost{
background: rgba(255,255,255,.86);
}
/* Product links list (Chelzeo-like) */
.product-links{
list-style:none;
margin: 0;
padding: 0;
border: 1px solid var(--line);
border-radius: 18px;
overflow:hidden;
background:#fff;
}
.product-links li + li{ border-top: 1px solid var(--line); }
.product-links a{
display:flex;
gap: 12px;
align-items:baseline;
justify-content: space-between;
padding: 14px 16px;
text-decoration:none;
color: var(--text);
font-weight: 800;
}
.product-links a span{
font-weight: 650;
color: var(--text-soft);
}
.product-links a:hover{ background: rgba(10,102,255,.06); }
.section-cta{ margin-top: 14px; }
/* Split + facts */
.split{
display:grid;
grid-template-columns: 1.2fr .8fr;
gap: 18px;
align-items:start;
}
.facts{
display:grid;
gap: 12px;
grid-template-columns: repeat(3, minmax(0,1fr));
}
.fact{
border:1px solid var(--line);
border-radius: 18px;
padding: 14px;
background:#fff;
}
.fact-num{ font-size: 22px; font-weight: 900; letter-spacing: -0.01em; }
.fact-txt{ margin-top: 6px; color: var(--text-soft); font-weight: 650; }
/* Geography */
.geo-placeholder{
display:grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 14px;
margin-top: 12px;
}
.geo-card{
border:1px solid var(--line);
border-radius: 18px;
padding: 16px;
background:#fff;
}
.geo-title{ font-weight: 850; }
.geo-text{ margin-top: 8px; color: var(--text-soft); line-height:1.6; }
/* News */
.news-grid{
display:grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 14px;
}
.news-card{
border:1px solid var(--line);
border-radius: 18px;
padding: 16px;
background:#fff;
text-decoration:none;
color: var(--text);
transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.news-card:hover{
transform: translateY(-2px);
box-shadow: 0 12px 26px rgba(15,23,42,.08);
border-color: rgba(10,102,255,.25);
}
.news-date{ color: var(--text-soft); font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.news-title{ margin-top: 10px; font-weight: 900; }
.news-text{ margin-top: 8px; color: var(--text-soft); line-height: 1.6; }
/* Logos */
.logos{
display:grid;
grid-template-columns: repeat(6, minmax(0,1fr));
gap: 10px;
}
.logo-pill{
border:1px solid var(--line);
border-radius: 14px;
padding: 18px 10px;
background:#fff;
color: var(--text-soft);
font-weight: 800;
text-align:center;
}
/* Projects */
.projects-grid{
display:grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 14px;
}
.proj-card{
border:1px solid var(--line);
border-radius: 18px;
padding: 16px;
background:#fff;
text-decoration:none;
color: var(--text);
transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.proj-card:hover{
transform: translateY(-2px);
box-shadow: 0 12px 26px rgba(15,23,42,.08);
border-color: rgba(10,102,255,.25);
}
.proj-title{ font-weight: 900; }
.proj-text{ margin-top: 8px; color: var(--text-soft); line-height: 1.6; }
.mini-cta a{ font-weight: 750; text-decoration:none; }
.mini-cta a:hover{ text-decoration:underline; }
@media (max-width: 980px){
.chel-hero h1{ font-size: 36px; }
.chel-hero .hero-inner{ padding: 30px 0; }
.split{ grid-template-columns: 1fr; }
.facts{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.geo-placeholder{ grid-template-columns: 1fr; }
.news-grid{ grid-template-columns: 1fr; }
.projects-grid{ grid-template-columns: 1fr; }
.logos{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.product-links a{ flex-direction: column; align-items:flex-start; }
}
/* === Sidebar brand without logo === */
.brand img{ display:none !important; }
.brand{
padding: 16px 18px;
}
.brand .name b{
font-size: 16px;
letter-spacing: .06em;
}
/* === Hero grid (1:1 chelzeo-inspired: width, offsets, radii) === */
:root{
--content-max: 1200px;
--gutter: 28px;
--hero-radius: 28px;
}
.container{
max-width: var(--content-max);
padding-left: var(--gutter);
padding-right: var(--gutter);
}
.chel-hero{
border-radius: var(--hero-radius);
min-height: 520px;
}
/* no top gap: hero starts right after header */
.chel-hero{ margin-top: 0; }
.chel-hero .hero-inner{
padding: 66px 0 64px;
}
.chel-hero h1{
max-width: 20ch;
font-size: 52px;
line-height: 1.02;
letter-spacing: -0.03em;
}
.chel-hero .hero-lead{
margin-top: 16px;
font-size: 16px;
max-width: 62ch;
}
/* CTA sizes consistent */
.hero-actions .btn{
height: 46px;
padding: 0 20px;
font-size: 16px;
}
/* overlay balance */
.chel-hero .hero-overlay{
background: none;
}
@media (max-width: 980px){
:root{ --gutter: 18px; --hero-radius: 22px; }
.chel-hero{ min-height: 420px; }
.chel-hero .hero-inner{ padding: 34px 0 28px; }
.chel-hero h1{ font-size: 38px; max-width: 22ch; }
}
@media (max-width: 520px){
.chel-hero{ min-height: 360px; }
.chel-hero h1{ font-size: 32px; }
}
/* === Product list refinement (chelzeo-like) === */
.product-links{
border-radius: 20px;
}
.product-links .prod-row{
display:grid;
grid-template-columns: 72px 1fr 24px;
gap: 10px;
align-items:center;
padding: 16px 18px;
}
.product-links .prod-code{
font-weight: 900;
letter-spacing: .02em;
}
.product-links .prod-desc{
color: var(--text-soft);
font-weight: 650;
line-height: 1.35;
}
.product-links .prod-chev{
color: var(--text-soft);
font-weight: 900;
justify-self:end;
opacity: .7;
transition: transform .12s ease, opacity .12s ease;
}
.product-links a:hover .prod-chev{
transform: translateX(2px);
opacity: 1;
}
/* Section rhythm */
.chel .section{ padding: 44px 0; }
.chel-section .section-head{ margin-bottom: 18px; }
/* Reduce heavy borders feeling */
.product-links li + li{ border-top-color: rgba(15,23,42,.10); }
@media (max-width: 760px){
.product-links .prod-row{
grid-template-columns: 1fr 20px;
grid-template-areas:
"code chev"
"desc chev";
align-items:start;
}
.product-links .prod-code{ grid-area: code; }
.product-links .prod-desc{ grid-area: desc; }
.product-links .prod-chev{ grid-area: chev; padding-top: 2px; }
}
/* === Catalog page === */
.catalog{
display:grid;
grid-template-columns: 320px 1fr;
gap: 18px;
align-items:start;
}
.catalog--wide{
grid-template-columns: 1fr;
}
.catalog-side{ position: sticky; top: 16px; }
.catalog-box{
border:1px solid var(--line);
border-radius: 18px;
padding: 16px;
background:#fff;
margin-bottom: 14px;
}
.catalog-title{ font-weight: 900; margin-bottom: 10px; }
.catalog-text{ color: var(--text-soft); line-height: 1.6; margin-bottom: 12px; }
.catalog-link{
display:block;
padding: 10px 12px;
border-radius: 12px;
text-decoration:none;
color: var(--text);
font-weight: 800;
}
.catalog-link:hover{ background: rgba(10,102,255,.06); }
.catalog-main .cat-section{
border:1px solid var(--line);
border-radius: 18px;
padding: 18px;
background:#fff;
margin-bottom: 14px;
}
.cat-head{
display:flex;
justify-content: space-between;
align-items: baseline;
gap: 10px;
}
.cat-head .link{ font-weight: 800; text-decoration:none; }
.cat-head .link:hover{ text-decoration: underline; }
/* === Products list (cards background behind text & link) === */
.chel-section .cat-section{
position: relative;
overflow: hidden;
background: transparent;
}
.chel-section .cat-section::before{
content:"";
position:absolute;
inset:0;
background-image: url("../assets/bg/product-panel.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: 103% 103%;
z-index: 0;
pointer-events: none;
}
.chel-section .cat-section > *{
position: relative;
z-index: 1;
}
/* === Product pages === */
.crumbs{
color: var(--text-soft);
font-weight: 650;
margin-bottom: 12px;
}
.crumbs a{ color: inherit; text-decoration:none; }
.crumbs a:hover{ color: var(--accent); }
.crumbs .sep{ opacity:.6; padding: 0 6px; }
.product-hero{
display:grid;
grid-template-columns: 1.2fr .8fr;
gap: 18px;
align-items:start;
}
.product-note{
border:1px solid var(--line);
border-radius: 18px;
padding: 16px;
background:#fff;
}
.product-note-title{ font-weight: 900; }
.product-note-text{ margin-top: 8px; color: var(--text-soft); line-height: 1.6; }
.grid-2{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
align-items: stretch; /* чтобы карточки в строке были одинаковой высоты */
}
/* Выровнять нижние рамки карточек внутри .grid-2 (включая обёртку .grid-left-stack) */
.grid-2 > *{ align-self: stretch; }
.grid-2 > .cardBox{ height: 100%; display:flex; flex-direction:column; }
/* KRU (и аналогичные): если внутри .grid-2 колонка обёрнута в .grid-left-stack,
растягиваем саму карточку на всю высоту строки, чтобы нижние рамки совпадали. */
.grid-2 > .grid-left-stack{ display:flex; }
.grid-2 > .grid-left-stack > .cardBox{ height:100%; }
.cardBox{
border:1px solid var(--line);
border-radius: 18px;
padding: 16px;
background:#fff;
}
.cardBox-title{ font-weight: 900; margin-bottom: 10px; }
.list{ margin:0; padding-left: 18px; color: var(--text-soft); }
.list li{ margin: 6px 0; }
.mini-list{ margin: 10px 0 0; padding-left: 18px; color: var(--text-soft); }
.mini-list li{ margin: 6px 0; }
.ctaPanel{
border:1px solid var(--line);
border-radius: 20px;
padding: 18px;
background: rgba(10,102,255,.06);
display:flex;
justify-content: space-between;
gap: 14px;
align-items:center;
}
.ctaTitle{ font-weight: 900; }
.ctaText{ margin-top: 6px; color: var(--text-soft); line-height: 1.6; }
.ctaText a{ color: var(--accent); text-decoration:none; }
.ctaText a:hover{ text-decoration:underline; }
@media (max-width: 980px){
.catalog{ grid-template-columns: 1fr; }
.catalog-side{ position: static; }
.product-hero{ grid-template-columns: 1fr; }
.grid-2{ grid-template-columns: 1fr; }
.ctaPanel{ flex-direction: column; align-items:flex-start; }
}
/* === Documentation page === */
.docs{
display:grid;
grid-template-columns: 320px 1fr;
gap: 18px;
align-items:start;
}
.docs-side{ position: sticky; top: 16px; }
.doc-section{
border:1px solid var(--line);
border-radius: 18px;
padding: 18px;
background:#fff;
margin-bottom: 14px;
}
.doc-list{
margin-top: 12px;
border: 1px solid rgba(15,23,42,.10);
border-radius: 16px;
overflow:hidden;
}
.doc-item{
display:grid;
grid-template-columns: 1fr auto;
gap: 12px;
align-items:center;
padding: 14px 14px;
background:#fff;
}
.doc-item + .doc-item{ border-top: 1px solid rgba(15,23,42,.10); }
.doc-title{ font-weight: 900; }
.doc-meta{ margin-top: 4px; color: var(--text-soft); font-weight: 650; font-size: 13px; }
.doc-actions{ display:flex; justify-content:flex-end; }
.btn.small{
height: 38px;
padding: 0 14px;
border-radius: 999px;
font-size: 13px;
}
.btn[disabled]{
opacity: .55;
cursor: not-allowed;
transform: none !important;
box-shadow: none !important;
}
@media (max-width: 980px){
.docs{ grid-template-columns: 1fr; }
.docs-side{ position: static; }
.doc-item{ grid-template-columns: 1fr; }
.doc-actions{ justify-content:flex-start; }
}
/* === News page === */
.newsPage{
display:grid;
gap: 16px;
}
.newsItem{
border:1px solid var(--line);
border-radius: 20px;
padding: 18px;
background:#fff;
}
.newsDate{
font-size: 12px;
font-weight: 800;
letter-spacing: .08em;
color: var(--text-soft);
}
.newsTitle{
margin-top: 10px;
font-size: 22px;
font-weight: 900;
letter-spacing: -0.01em;
}
.newsText{
margin-top: 10px;
color: var(--text-soft);
line-height: 1.7;
}
/* === Clients & Partners page === */
.partnersGrid{
display:grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 16px;
}
.partnerCard{
border:1px solid var(--line);
border-radius: 20px;
padding: 22px;
background:#fff;
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
}
.partnerLogo{
width: 100%;
height: 80px;
border-radius: 14px;
background: rgba(15,23,42,.04);
display:flex;
align-items:center;
justify-content:center;
font-weight: 800;
color: var(--text-soft);
}
.partnerText{
margin-top: 12px;
font-weight: 700;
color: var(--text-soft);
}
@media (max-width: 980px){
.partnersGrid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
.partnersGrid{ grid-template-columns: 1fr; }
}
/* === Projects page === */
.projectsGrid{
display:grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 18px;
}
.projectCard{
border:1px solid var(--line);
border-radius: 20px;
padding: 20px;
background:#fff;
}
.projectType{
font-size: 12px;
font-weight: 800;
letter-spacing: .08em;
color: var(--text-soft);
}
.projectTitle{
margin-top: 10px;
font-size: 22px;
font-weight: 900;
letter-spacing: -0.01em;
}
.projectText{
margin-top: 10px;
color: var(--text-soft);
line-height: 1.7;
}
.projectMeta{
margin-top: 12px;
font-size: 13px;
color: var(--text-soft);
font-weight: 650;
}
@media (max-width: 980px){
.projectsGrid{ grid-template-columns: 1fr; }
}
/* === Contacts page === */
.contactsGrid{
display:grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 18px;
}
.contactCard{
border:1px solid var(--line);
border-radius: 20px;
padding: 20px;
background:#fff;
}
.contactTitle{
font-weight: 900;
margin-bottom: 12px;
}
.contactList{
list-style:none;
padding:0;
margin:0;
color: var(--text-soft);
line-height:1.7;
}
.contactList li{ margin-bottom: 8px; }
.contactList a{ color: var(--accent); text-decoration:none; }
.contactList a:hover{ text-decoration:underline; }
.contactText{
color: var(--text-soft);
line-height:1.7;
margin-bottom: 14px;
}
@media (max-width: 980px){
.contactsGrid{ grid-template-columns: 1fr; }
}
/* === Products dropdown in sidebar nav === */
.nav-dropdown{
position: relative;
}
.has-dropdown{
display:flex;
align-items:center;
justify-content: space-between;
gap: 10px;
}
.has-dropdown .caret{
font-size: 12px;
opacity: .7;
}
.dropdown-menu{
position: absolute;
left: 0;
top: 100%;
min-width: 220px;
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
padding: 8px;
box-shadow: 0 16px 32px rgba(15,23,42,.14);
display: none;
z-index: 50;
}
.nav-dropdown.open .dropdown-menu{
display: block;
}
.dropdown-menu .nav-sub-item{
display:block;
padding: 10px 12px;
border-radius: 12px;
text-decoration:none;
color: var(--text);
font-weight: 800;
}
.dropdown-menu .nav-sub-item:hover{
background: rgba(10,102,255,.06);
}
/* Keep active styling inside dropdown */
.dropdown-menu .nav-sub-item.active::before{ display:none; }
.dropdown-menu .nav-sub-item.active{
background: rgba(10,102,255,.10);
}
/* Mobile / narrow: dropdown becomes inline list */
@media (max-width: 980px){
.dropdown-menu{
position: static;
min-width: 0;
box-shadow: none;
padding: 6px;
margin-top: 6px;
display: none;
}
.nav-dropdown.open .dropdown-menu{ display:block; }
}
/* Hover fallback for dropdown (in case JS is blocked) */
.nav-dropdown:hover .dropdown-menu{
display:block;
}
/* Ensure dropdown not clipped */
header, .nav, .side-nav{ overflow: visible; }
/* Dropdown safe hover zone */
.nav-dropdown{ position: relative; }
.nav-dropdown::after{
content:"";
position:absolute;
left: 0;
top: 100%;
width: 100%;
height: 8px; /* invisible bridge, no layout gap */
}
.dropdown-menu{
margin-top: 6px; /* visual gap but bridge keeps hover */
padding: 10px; /* slightly larger target area */
}
/* === Micro-polish: subtle motion, no UX logic changes === */
/* smooth scroll for in-page anchors */
html{ scroll-behavior: smooth; }
/* link underline micro interaction */
a.link, .cat-head .link{
position: relative;
}
a.link::after, .cat-head .link::after{
content:"";
position:absolute;
left:0;
bottom:-2px;
height:2px;
width:0;
background: currentColor;
opacity:.35;
transition: width .16s ease;
}
a.link:hover::after, .cat-head .link:hover::after{ width: 100%; }
/* buttons: gentle lift */
.btn{
transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease, color .14s ease;
will-change: transform;
}
.btn:hover{
transform: translateY(-1px);
box-shadow: 0 10px 22px rgba(15,23,42,.10);
}
.btn:active{
transform: translateY(0);
box-shadow: 0 6px 14px rgba(15,23,42,.08);
}
/* cards: subtle hover */
.card, .cardBox, .partnerCard, .projectCard, .newsItem, .doc-section, .cat-section{
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
will-change: transform;
}
.card:hover, .cardBox:hover, .partnerCard:hover, .projectCard:hover, .newsItem:hover, .doc-section:hover, .cat-section:hover{
transform: translateY(-2px);
box-shadow: 0 18px 34px rgba(15,23,42,.10);
border-color: rgba(15,23,42,.16);
}
/* list rows: smooth hover */
.product-links a,
.doc-item{
transition: background .14s ease, transform .14s ease;
}
.product-links a:hover{
transform: translateY(-1px);
}
.doc-item:hover{
background: rgba(15,23,42,.02);
}
/* dropdown: tiny fade */
.dropdown-menu{
transform: translateY(2px);
opacity: 0;
transition: opacity .14s ease, transform .14s ease;
}
.nav-dropdown.open .dropdown-menu,
.nav-dropdown:hover .dropdown-menu{
opacity: 1;
transform: translateY(0);
}
/* reduced motion support */
@media (prefers-reduced-motion: reduce){
html{ scroll-behavior: auto; }
.btn, .card, .cardBox, .partnerCard, .projectCard, .newsItem, .doc-section, .cat-section,
.product-links a, .doc-item, .dropdown-menu{
transition: none !important;
transform: none !important;
box-shadow: none !important;
}
}
/* === Sidebar nav size tweak === */
:root{
--sidebar-w: 250px;
}
.layout{
grid-template-columns: var(--sidebar-w) 1fr;
}
.sidebar{
width: var(--sidebar-w);
}
.side-nav{
padding: 10px 10px 14px;
}
.side-nav .nav-item,
.side-nav .nav-sub-item{
padding: 10px 12px;
border-radius: 12px;
font-size: 15px;
}
/* Remove lingering blue focus highlight after click in sidebar nav */
.side-nav a:focus,
.side-nav a:focus-visible{
outline: none !important;
box-shadow: none !important;
background: transparent !important;
}
/* === Hard disable: any blue highlight/shadow on sidebar nav === */
.side-nav a{
-webkit-tap-highlight-color: transparent;
}
.side-nav a:focus,
.side-nav a:focus-visible,
.side-nav a:active{
outline: none !important;
box-shadow: none !important;
background: transparent !important;
}
.side-nav a.active{
background: transparent !important;
box-shadow: none !important;
}
/* If active indicator uses pseudo-element, disable it */
.side-nav a.active::before,
.side-nav a.active::after{
content: none !important;
}
/* If any border/outline used as indicator */
.side-nav a.active{
border-color: transparent !important;
}
header, header *{ box-sizing: border-box; }
/* Fix: prevent sidebar header inner container from stretching over main content */
@media (min-width: 981px){
header{ overflow-x: hidden; }
header .container.nav{
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
}
/* Sidebar logo visible fix */
.sidebar-logo{
padding: 18px 14px 10px;
}
/* === Seamless hero (no frame, soft blend to page) === */
.chel-hero{
border-radius: 0 !important;
border: none !important;
box-shadow: none !important;
background: transparent !important;
overflow: hidden; /* keep overlays clipped */
}
/* Replace overlay with smoother blend (left-to-right + soft vignette on right/bottom) */
.chel-hero .hero-overlay{
background:
/* soft vignette on the right/bottom to dissolve dark edges into page */
radial-gradient(1200px 520px at 88% 60%,
rgba(246, 248, 251, 0.00) 0%,
rgba(246, 248, 251, 0.00) 38%,
rgba(246, 248, 251, 0.40) 62%,
rgba(246, 248, 251, 0.77) 82%,
rgba(246, 248, 251, 0.83) 100%),
/* main left-to-right readability layer */
linear-gradient(90deg,
rgba(246, 248, 251, 0.83) 0%,
rgba(246, 248, 251, 0.77) 34%,
rgba(246, 248, 251, 0.50) 52%,
rgba(246, 248, 251, 0.13) 66%,
rgba(246, 248, 251, 0.00) 74%,
rgba(246, 248, 251, 0.00) 84%);
}
/* remove any accidental rounded corners on media */
.chel-hero .hero-media{
border-radius: 0 !important;
}
/* === Hero: replace contacts with title logo === */
.hero-topline{
margin-bottom: 14px;
}
.hero-title-logo{
display:block;
width: clamp(260px, 42vw, 520px);
max-width: 100%;
height: auto;
filter: drop-shadow(0 8px 18px rgba(10, 25, 55, .10));
}
/* small screens */
@media (max-width: 680px){
.hero-title-logo{ width: 1040px; }
}
/* Home topbar: logo instead of contacts */
body.home .topbar-inner > div:first-child{
display:flex;
align-items:center;
}
body.home .topbar-title-logo{
height: 32px;
width: auto;
max-width: 380px;
}
@media (max-width: 680px){
body.home .topbar-title-logo{ height: 24px; max-width: 290px; }
}
/* --- Hero logo fine-tune (x1.7) --- */
.hero-logo{
max-width: 470px;
}
@media (max-width: 1200px){
.hero-logo{ max-width: 400px; }
}
@media (max-width: 768px){
.hero-logo{ max-width: 290px; }
}
/* === Fine tune hero logo position === */
.hero-title-logo{
margin-left: -12px; /* slightly to the left */
margin-bottom: 12px; /* tighter spacing to heading */
}
.hero h1,
.hero-title{
margin-top: 0;
}
/* --- Hero spacing + title logo position (apply arrows) --- */
.chel-hero .hero-inner{ padding-top: 28px; padding-bottom: 44px; }
@media (max-width: 980px){
.chel-hero .hero-inner{ padding-top: 18px; padding-bottom: 34px; }
}
.hero-topline{ margin-bottom: 6px; }
.hero-title-logo{
margin-left: -18px; /* move a bit left */
margin-top: -6px; /* move slightly up */
}
.chel-hero h1{ margin-top: 8px; }
/* --- Tweaks: hero title logo position + remove top empty space (2026-01-24) --- */
.hero{padding-top: 10px; padding-bottom: 14px;}
.hero-inner{padding-top: 10px; padding-bottom: 10px;}
.hero-topline{margin-bottom: 6px;}
.hero-title-logo{
transform: translate(-90px, -18px);
transform-origin: left top;
}
@media (max-width: 900px){
.hero-title-logo{transform: translate(-40px, -10px);}
}
@media (max-width: 560px){
.hero{padding-top: 6px;}
.hero-inner{padding-top: 8px;}
.hero-title-logo{transform: translate(-10px, -6px); width: 92%;}
}
/* === Navigation font size increase (confirmed) === */
.side-nav a,
.nav a,
.menu a {
font-size: 21px;
line-height: 1.7;
font-weight: 500;
}
/* Factory products grid (home) */
.factory-grid{
margin-top: 22px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px;
}
.factory-card--wide{grid-column:1 / -1;}
@media (max-width: 1100px){
.factory-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
.factory-grid{ grid-template-columns: 1fr; }
}
.factory-card{
position: relative;
display: flex;
gap: 18px;
align-items: center;
/* убираем внутреннюю рамку: без отступов у карточки, изображение на всю площадь */
padding: 0;
border-radius: 18px;
border: 1px solid rgba(21, 79, 161, .18);
background: #fff;
box-shadow: 0 18px 40px rgba(10, 35, 72, .06);
text-decoration: none;
color: inherit;
overflow: hidden;
transition: transform .18s ease, box-shadow .18s ease;
}
.factory-card:hover{
transform: translateY(-2px);
box-shadow: 0 22px 52px rgba(10, 35, 72, .10);
}
/* decorative corner like in reference */
.factory-card__ribbon{
position: absolute;
left: -60px;
top: -54px;
width: 220px;
height: 110px;
background: radial-gradient(closest-side, rgba(26, 122, 255, .45), rgba(26, 122, 255, .06) 62%, rgba(26, 122, 255, 0) 80%);
transform: rotate(-7deg);
pointer-events: none;
}
.factory-card::before{
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 52px;
background: none;
border-top-left-radius: 18px;
border-top-right-radius: 18px;
pointer-events: none;
}
.factory-card__media{
flex: 0 0 44%;
height: 126px;
border-radius: 12px;
/* убрать "рамку"/подложку как на карточке КСО */
background: transparent;
display: grid;
place-items: center;
overflow: hidden;
}
.factory-card__media img{
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: contain;
display: block;
}
.factory-card__body{
flex: 1 1 auto;
min-width: 0;
}
.factory-card__code{
font-weight: 800;
font-size: 28px;
line-height: 1;
letter-spacing: .02em;
color: #0c2448;
}
.factory-card__desc{
margin-top: 10px;
font-size: 16px;
line-height: 1.35;
color: rgba(12, 36, 72, .82);
}
.factory-card__more{
margin-top: 12px;
font-weight: 500;
font-size: 15px;
color: #144fa1;
}
/* ===== Наша команда (страница "О компании") ===== */
.about-team .team-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:16px;}
.about-team .team-card{display:block;text-decoration:none;color:inherit;border:1px solid #e6eef9;border-radius:18px;background:#fff;overflow:hidden;}
.about-team
.about-team .team-photo--placeholder{position:relative;}
.about-team .team-info{padding:12px 14px;}
.about-team .team-name{font-weight:700;font-size:16px;line-height:1.25;}
.about-team .team-role{margin-top:6px;font-size:13px;color:#5b677a;line-height:1.35;}
@media (max-width:1200px){.about-team .team-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:900px){.about-team .team-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:560px){.about-team .team-grid{grid-template-columns:1fr;}}
/* ===== Наша команда (страница "О компании") ===== */
.about-team .team-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:16px;}
.about-team .team-card{display:block;text-decoration:none;color:inherit;border:1px solid #e6eef9;border-radius:18px;background:#fff;overflow:hidden;}
.about-team
.about-team .team-photo--placeholder{background: none;}
.about-team .team-info{padding:12px 14px;}
.about-team .team-name{font-weight:500;font-size:16px;line-height:1.3;}
.about-team .team-role{margin-top:4px;font-size:12px;color:#667085;}
@media (max-width:1200px){.about-team .team-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:900px){.about-team .team-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:560px){.about-team .team-grid{grid-template-columns:1fr;}}
/* === TEAM CARD PHOTO NATURAL SIZE === */
.team-card {
display: grid;
grid-template-columns: 420px 1fr;
gap: 40px;
max-width: 1200px;
margin: 60px auto;
padding: 0 20px;
align-items: flex-start;
}
.team-card__photo {
border-radius: 12px;
overflow: hidden;
border: 1px solid #e5e5e5;
display: inline-block;
}
.team-card__photo img {
width: 100%;
height: auto;
display: block;
}
@media (max-width: 768px) {
.team-card {
grid-template-columns: 1fr;
}
}
/* === TEAM CARD: EQUAL PHOTO + INFO WINDOWS (NO CROPPING) ===
Applies to employee card page layout. Image is never cropped (contain),
and photo/info blocks have matching "window" styling. */
.team-card {
align-items: stretch; /* make both columns equal height */
}
.team-card__photo,
.team-card__content {
border: 1px solid #e5e5e5;
border-radius: 12px;
background: #fff;
}
.team-card__photo {
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
overflow: visible; /* do NOT cut the image */
}
.team-card__photo img {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: contain; /* never crop */
border-radius: 12px; /* rounded corners without overflow cropping */
display: block;
background: #f7f7f7;
}
/* Ensure the content block keeps its padding even if overridden earlier */
.team-card__content {
padding: 30px;
}
/* === TEAM GRID CARDS 9:16 === */
.team-grid,
.team-cards,
.team-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 24px;
}
.team-card-item,
.team-member,
.team-person {
aspect-ratio: 9 / 16;
overflow: hidden;
border-radius: 14px;
background: #f7f7f7;
display: flex;
flex-direction: column;
}
.team-card-item img,
.team-member img,
.team-person img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* === ABOUT: TEAM CARDS 9:16 (scoped) === */
.about-team .team-grid{
display:grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap:24px;
}
.about-team .team-grid .team-card{
aspect-ratio: 9 / 16;
border-radius: 14px;
overflow: hidden;
background: #f7f7f7;
display:flex;
flex-direction:column;
text-decoration:none;
border:1px solid rgba(0,0,0,.06);
}
.about-team .team-grid
.about-team .team-grid .team-info{
padding:12px 14px;
background: #fff;
}
.about-team .team-grid .team-name{ font-weight:800; }
.about-team .team-grid .team-role{ color: var(--muted); margin-top:4px; }
}
#employeeModal .modal-employee__photo img{ height:auto !important; }
}
/* === EMPLOYEE MODAL (PHOTO 9:16) === */
#employeeModal .modal-employee__grid{
display:grid;
grid-template-columns: 360px 1fr;
gap:18px;
align-items: stretch;
}
#employeeModal .modal-employee__photo{
border:1px solid var(--line);
border-radius:16px;
background:#fff;
padding:12px;
display:flex;
align-items:center;
justify-content:center;
}
#employeeModal .modal-employee__photo::before{
content:"";
display:block;
padding-top:177.77%; /* 9:16 aspect ratio */
}
#employeeModal .modal-employee__photo img{
position:absolute;
width: 100%;
height:100%;
object-fit:cover; /* fill 9:16 area */
border-radius:14px;
}
@media (max-width:780px){
#employeeModal .modal-employee__grid{
grid-template-columns:1fr;
}
}
/* === ABOUT TEAM: PHOTO EQUAL PADDING INSIDE CARD === */
.about-team .team-card{
padding:12px;
}
.about-team .team-photo{
width: 100%;
height:100%;
aspect-ratio: 4 / 5;
border-radius:12px;
object-fit:cover;
display:block;
}
/* === ABOUT TEAM: REDUCE TITLE -> CARDS SPACING === */
.about-team .section-title{
margin-bottom: 24px; /* было больше */
}
/* === EMPLOYEE PAGE: FORCE EQUAL HEIGHT PHOTO & INFO === */
.employee-page .split{
display:grid;
grid-template-columns: 0.5fr 1fr;
align-items: stretch; /* IMPORTANT */
gap:24px;
}
.employee-page .split > .card{
height:100%;
display:flex;
flex-direction:column;
}
.employee-page .employee-photo{
flex:1;
padding:16px;
display:flex;
align-items:center;
justify-content:center;
}
/* === EMPLOYEE PAGE: IMAGE CROP WITH EQUAL INNER OFFSET === */
.employee-page .employee-photo{
padding:16px; /* рамка остаётся прежней */
overflow:hidden; /* обрезаем изображение */
}
.employee-page .employee-photo img{
width: 100%;
height:100%;
object-fit:cover; /* увеличиваем и обрезаем */
object-position:center; /* равномерно со всех сторон */
border-radius:16px; /* совпадает с рамкой */
display:block;
}
/* === ABOUT TEAM: FUTURE-PROOF PHOTO FRAME === */
.about-team .team-photo{
width: 100%;
height:100%;
aspect-ratio: 4 / 5;
object-fit:cover;
border-radius:12px;
background:#eaeaea;
}
.about-team .team-photo[src=""]{
background:#eaeaea;
}
/* === ABOUT TEAM: GRAYSCALE → COLOR HOVER EFFECT === */
.about-team .team-card{
transition: transform .25s ease, box-shadow .25s ease;
}
.about-team .team-photo{
filter: grayscale(100%);
transition: filter .3s ease;
}
.about-team .team-card:hover .team-photo{
filter: grayscale(0%);
}
.about-team .team-card:hover{
transform: translateY(-4px);
box-shadow: 0 12px 30px rgba(0,0,0,.12);
}
/* === ABOUT TEAM: HOVER IMAGE SWAP (layout-safe) === */
/* Card keeps 9:16, photo area stretches, info stays visible */
.about-team .team-card{
display:flex;
flex-direction:column;
}
.about-team .team-photo-wrap{
position: relative;
width: 100%;
flex: 1; /* занимает всё место над блоком info */
min-height: 0;
border-radius: 12px;
overflow: hidden;
background: #eaeaea;
}
/* If a card still has a single ![]()
(no wrap), keep it normal */
.about-team .team-card > .team-photo{
width: 100%;
flex:1;
min-height:0;
border-radius:12px;
object-fit:cover;
display:block;
background:#eaeaea;
filter: grayscale(100%);
transition: filter .3s ease, opacity .25s ease;
}
/* Images inside the wrap are absolutely stacked */
.about-team .team-photo-wrap .team-photo{
position:absolute;
inset:0;
width: 100%;
height:100%;
object-fit: cover;
display:block;
transition: opacity .25s ease, filter .3s ease;
filter: grayscale(100%);
}
.about-team .team-photo-wrap .team-photo--hover{
opacity:0;
}
.about-team .team-card:hover .team-photo,
.about-team .team-card:hover .team-photo-wrap .team-photo{
filter: grayscale(0%);
}
.about-team .team-card:hover .team-photo-wrap .team-photo--hover{
opacity:1;
}
.about-team .team-card:hover .team-photo-wrap .team-photo--base{
opacity:0;
}
/* === NAV LOGO SIZE (MATCH HOME PAGE) === */
/* === NAV LOGO: FORCE SAME SIZE ON ALL PAGES & STATES === */
.sidebar-logo{
display: flex;
align-items: center;
}
.sidebar-logo img{
height: 64px !important;
max-height: 64px !important;
width: auto !important;
transform: none !important;
}
/* === FACTORY CARD POSTER ONLY === */
.factory-card{
padding: 0;
overflow: hidden;
}
.factory-card__poster{
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.hero .hero-inner{
display: grid;
grid-template-columns: 1fr;
}
.hero .hero-title-logo{
margin-left: 0 !important;
padding-left: 0 !important;
align-self: flex-start;
}
.hero .hero-content{
align-items: flex-start;
}
.hero .hero-topline{
/* лёгкий сдвиг вправо, чтобы визуально совпало с левым краем H1 */
padding-left: clamp(10px, 1.2vw, 18px);
}
.hero .hero-title-logo{
margin: 0;
}
/* === HERO LOGO: REAL ALIGN (SAME COLUMN AS TEXT) === */
.hero-left .hero-title-logo{
margin-bottom: 16px;
}
.hero-left .hero-title-logo img{
display: block;
margin-left: clamp(18px, 2.2vw, 32px);
}
@media (max-width: 640px){
.hero-left .hero-title-logo img{
margin-left: 0;
}
}
.hero{
background-position: calc(50% + 120px) center;
}
@media (max-width: 1200px){
.hero{
background-position: calc(50% + 60px) center;
}
}
@media (max-width: 640px){
.hero{
background-position: center center;
}
}
/* === HERO LOGO IMAGE: ALIGN WITH TEXT COLUMN === */
.hero-title-logo{
/* сдвигаем саму картинку вправо (внутри изображения есть пустое поле слева) */
margin-left: clamp(22px, 2.4vw, 42px);
}
@media (max-width: 640px){
.hero-title-logo{
margin-left: 0;
}
}
/* === HERO LOGO (hero-title.png): SHIFT RIGHT TO ALIGN WITH TEXT COLUMN === */
.hero .hero-topline .hero-title-logo{
transform: none !important;
margin-left: clamp(28px, 2.6vw, 48px) !important;
}
@media (max-width: 640px){
.hero .hero-topline .hero-title-logo{
margin-left: 0 !important;
}
}
/* === HERO LOGO: KEEP ORIGINAL SIZE, MOVE A BIT LEFT === */
.hero-title-logo{
margin-left: -50px !important;
}
/* === HERO LOGO FINAL OVERRIDE === */
.hero .hero-topline .hero-title-logo{
margin-left: -20px !important; /* выравниваем букву "Э" по левому краю текста */
transform: none !important;
}
@media (max-width: 640px){
.hero .hero-topline .hero-title-logo{
margin-left: 0 !important;
}
}
/* === PRODUCTS CARDS: REMOVE BLUE OVERLAY === */
.product-card::before,
.products-card::before{
display: none !important;
}
/* Кнопка в карточках "Продукция завода" */
.factory-btn {
position: absolute;
right: 20px;
bottom: 20px;
z-index: 3;
}
.product-card,
.factory-card {
position: relative;
}
/* Buttons on "Продукция завода" cards (home page) */
.factory-card{
position: relative;
display: block;
overflow: hidden;
border-radius: 18px;
}
.factory-card__poster{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.factory-card__btn{
position: absolute;
right: 16px;
bottom: 16px;
z-index: 2;
}
/* Reduce left navigation column width by 30% */
.layout{
grid-template-columns: 70% 1fr;
}
/* NAV LOGO: increase real size and center (no transform) */
aside img,
.nav img,
.sidebar img{
width: 140%;
max-width: none;
height: auto;
display: block;
margin: 12px auto 16px;
}
/* NAV logo (sidebar-logo): force bigger + centered (override inline styles) */
.sidebar-logo{
display:flex;
justify-content:center;
align-items:center;
}
.sidebar-logo img{
display:block;
height:auto;
transform: scale(1.44) !important; /* +44% */
transform-origin: center !important;
margin: 0 auto;
}
/* Targeted primary fill buttons (by explicit texts) */
.btn-primary-fill{
background-color: #001d76 !important;
color: #ffffff !important;
}
/* keep borders untouched */
.btn-primary-fill{
border-color: inherit !important;
}
/* Align hero info block with "Продукция завода" grid: nudge right */
.chel-hero .hero-inner{
padding-left: 48px !important;
padding-right: 0 !important;
}
/* FORCE hero logo scaling (exact element) */
.hero img[src*="logo"],
.hero .hero-logo img,
.hero img.logo{
transform: scale(1.28) !important;
transform-origin: left center !important;
display: block;
}
/* Center hero logo relative to hero text block (without centering the text) */
.hero .hero-topline{
display: flex;
justify-content: flex-start;
}
.hero .hero-title-logo{
display: block;
margin: 0 auto;
transform-origin: center !important; /* keep scaling centered */
}
/* Hover color for active links */
a:hover,
a:focus{
color: #001D76;
}
/* Hover color for navigation links */
nav a:hover,
nav a:focus,
.sidebar a:hover,
.sidebar a:focus{
color: #001D76;
}
/* Navigation dropdown ("Продукция") font adjustment */
nav .dropdown,
nav .submenu,
nav .nav-dropdown{
font-size: 16px;
font-weight: 400;
}
nav .dropdown a,
nav .submenu a,
nav .nav-dropdown a{
font-size: 16px;
font-weight: 400;
}
/* Remove underline on hover for "Подробнее о компании" button */
.hero .btn:hover,
.hero .btn:focus{
text-decoration: none !important;
}
/* Fix: no underline for "Подробнее о компании" button in all states */
a.btn-about,
a.btn-about:hover,
a.btn-about:focus,
a.btn-about:active{
text-decoration: none !important;
}
/* Uniform bold font for all navigation links */
nav a,
.sidebar a,
.navigation a{
font-size: 15px;
font-weight: 700;
}
/* KRU slider (auto 5s) */
.product-slider{
margin-top: 14px;
max-width: 520px;
}
.product-slider-track{
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 16px;
overflow: hidden;
background: rgba(255,255,255,0.55);
}
/* Slider arrows (semi-transparent left/right controls) */
.product-slider-arrow{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 999px;
border: 1px solid rgba(0,0,0,0.15);
background: rgba(255,255,255,0.55);
color: rgba(0,0,0,0.65);
display: grid;
place-items: center;
cursor: pointer;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
z-index: 3;
}
.product-slider-arrow svg{
width: 22px;
height: 22px;
}
.product-slider-arrow.prev{ left: 12px; }
.product-slider-arrow.next{ right: 12px; }
.product-slider-arrow:hover{
background: rgba(255,255,255,0.8);
color: rgba(0,0,0,0.85);
}
.product-slider-arrow:active{
transform: translateY(-50%) scale(0.98);
}
.product-slider-arrow:focus-visible{
outline: 2px solid rgba(0,29,118,0.45);
outline-offset: 2px;
}
.product-slide{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
opacity: 0;
transition: opacity .35s ease;
}
.product-slide.is-active{
opacity: 1;
}
.product-slider-dots{
display: flex;
gap: 10px;
justify-content: center;
align-items: center;
margin-top: 10px;
}
.product-slider-dots .dot{
width: 8px;
height: 8px;
border-radius: 999px;
border: 1px solid rgba(0,0,0,0.25);
background: rgba(255,255,255,0.85);
padding: 0;
cursor: pointer;
}
.product-slider-dots .dot.is-active{
background: #001D76;
border-color: #001D76;
}
/* KRU slider slight scale up */
.kru-slider{
transform: scale(1.005);
transform-origin: center top;
}
/* KRU slider full grid width and frame like 'Назначение' */
.kru-slider{
width: 100%;
max-width: 100%;
margin: 32px 0;
border: 1px solid #d6dbf5;
border-radius: 20px;
background: #ffffff;
padding: 16px;
box-sizing: border-box;
}
/* KRU page: slider should span full content grid width */
.product-slider-frame{
width: 100%;
}
/* Ensure slider uses cardBox paddings nicely */
.product-slider-frame .product-slider{
width: 100%;
margin: 0;
}
/* Left column stack: "Назначение" + "Типовые функции" */
/* KRU: Назначение + Типовые функции / состав in two equal columns */
.kru-purpose-grid{align-items: start;}
@media (max-width: 860px){
.kru-purpose-grid{grid-template-columns: 1fr;}
}
.grid-left-stack{
display: flex;
flex-direction: column;
gap: 16px;
}
/* Lower KRU slider below title */
.product-slider-frame{
margin-top: 24px;
}
/* KRU: make slider frame strictly square (height = width) */
.product-slider-frame{
aspect-ratio: 1 / 1;
position: relative;
overflow: hidden;
}
/* Ensure slider fills the square frame */
.product-slider-frame .product-slider,
.product-slider-frame .slider-container,
.product-slider-frame .slides,
.product-slider-frame .slide{
height: 100%;
}
/* Images fill the square (may crop) */
.product-slider-frame img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Place action buttons under "Ключевые параметры" neatly */
.kru-actions-under-params .hero-actions{
margin-top: 0;
}
/* KRU: remove extra vertical air around the action buttons block */
section.kru-actions-section{
padding: 12px 0;
}
/* KRU slider: uniform margins inside square frame */
.kru-slider{
width: 100%;
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.kru-slider img{
max-width: 90%;
max-height: 90%;
object-fit: contain;
}
/* KRU slider: change frame ratio to 3:2, keep width */
.kru-slider{
aspect-ratio: 3 / 2;
}
/* KRU: make slider frame truly 3:2 and use full available width */
#kruSlider{
width: 100%;
max-width: 100%;
margin-right: auto;
}
#kruSlider .product-slider-track{
width: 100%;
aspect-ratio: 3 / 2;
}
/* Keep image inside with even padding */
#kruSlider .product-slide{
object-fit: contain;
}
/* KRU page: remove forced square frame height so the card hugs the slider */
.kru-page .product-slider-frame{
aspect-ratio: auto;
overflow: visible;
position: relative;
}
.kru-page .product-slider-frame .product-slider,
.kru-page .product-slider-frame .slider-container,
.kru-page .product-slider-frame .slides,
.kru-page .product-slider-frame .slide{
height: auto;
}
.kru-page .product-slider-frame img{
height: auto;
object-fit: contain;
}
/* Product sliders: portrait 9:16 template (KRU/KSO/NKU/KTP/ASU) */
.product-slider-frame{
aspect-ratio: 9 / 16;
max-width: 420px;
margin-right: auto;
}
/* === OVERRIDES: Product photo block alignment + true 9:16 frame & image fill === */
/* Shift the photo block to the left (no centering) and keep a portrait 9:16 ratio */
.kru-page .product-slider-frame,
.kso-page .product-slider-frame,
.nku-page .product-slider-frame,
.ktp-page .product-slider-frame,
.asu-page .product-slider-frame{
max-width: 420px;
aspect-ratio: 9 / 16;
margin-left: 0; /* align left inside .container */
margin-right: auto;
}
/* Ensure the inner slider and track inherit the same 9:16 ratio */
.kru-page .product-slider,
.kso-page .product-slider,
.nku-page .product-slider,
.ktp-page .product-slider,
.asu-page .product-slider{
max-width: 100%;
width: 100%;
margin: 0;
}
.kru-page .product-slider-track,
.kso-page .product-slider-track,
.nku-page .product-slider-track,
.ktp-page .product-slider-track,
.asu-page .product-slider-track{
aspect-ratio: 9 / 16;
}
/* Fill the frame with the image (same ratio), no distortion */
.kru-page .product-slide,
.kso-page .product-slide,
.nku-page .product-slide,
.ktp-page .product-slide,
.asu-page .product-slide{
object-fit: cover;
}
/* Stronger override for KRU legacy rule */
.kru-page .product-slider-frame .product-slide,
.kso-page .product-slider-frame .product-slide,
.nku-page .product-slider-frame .product-slide,
.ktp-page .product-slider-frame .product-slide,
.asu-page .product-slider-frame .product-slide{
object-fit: cover;
height: 100%;
}
/* Keep the card wrapping natural height (dots below shouldn't affect the photo ratio) */
.kru-page .product-slider-frame,
.kso-page .product-slider-frame,
.nku-page .product-slider-frame,
.ktp-page .product-slider-frame,
.asu-page .product-slider-frame{
aspect-ratio: auto;
}
/* =========================================================
WORKING: KRU slider — true 9:16 (entire block) and ~50% width
Requirement: frame+photos in 9:16; block occupies half of the working area.
(These rules are intentionally placed at the very end to win the cascade.)
========================================================= */
/* Desktop/tablet: slider card takes half of the container width */
.kru-page .product-slider-frame{
width: 50% !important;
max-width: 50% !important;
margin-left: 0 !important;
margin-right: auto !important;
/* The whole block (frame) in portrait 9:16 */
aspect-ratio: 9 / 16 !important;
overflow: hidden; /* keep dots/arrows inside the frame */
}
/* Mobile: full width */
@media (max-width: 900px){
.kru-page .product-slider-frame{
width: 100% !important;
max-width: 100% !important;
}
}
/* Make slider fill the frame */
.kru-page .product-slider-frame .product-slider{
position: relative;
width: 100%;
height: 100%;
margin: 0;
max-width: none;
}
.kru-page .product-slider-frame .product-slider-track{
width: 100%;
height: 100%;
aspect-ratio: auto !important;
border-radius: 16px; /* keep existing rounding */
}
/* Photos fill the entire 9:16 frame */
.kru-page .product-slider-frame .product-slide{
width: 100%;
height: 100%;
object-fit: cover !important;
}
/* Dots sit INSIDE the frame so they don't change the 9:16 block size */
.kru-page .product-slider-frame .product-slider-dots{
position: absolute;
left: 0;
right: 0;
bottom: 12px;
margin: 0 !important;
z-index: 4;
}
/* Keep arrows above the image */
.kru-page .product-slider-frame .product-slider-arrow{
z-index: 5;
}
/* =========================================================
KRU: place "Назначение" to the RIGHT of the 9:16 slider
and stretch it to the same height as the slider (as in mockup)
========================================================= */
.kru-page .kru-hero-row{
display: flex;
align-items: stretch; /* make right card match slider height */
gap: 24px;
}
/* Keep the slider as the left half in the row */
.kru-page .kru-hero-row .product-slider-frame{
flex: 0 0 50%;
}
/* Right card takes the remaining half and stretches */
.kru-page .kru-purpose-tall{
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
/* KRU: harden top alignment between slider frame and purpose card
Some browsers may introduce tiny offsets via inherited margins. */
.kru-page .kru-hero-row{
align-items: stretch !important;
}
.kru-page .kru-hero-row .product-slider-frame,
.kru-page .kru-hero-row .kru-purpose-tall{
margin-top: 0 !important;
align-self: stretch;
}
@media (max-width: 900px){
.kru-page .kru-hero-row{
flex-direction: column;
}
.kru-page .kru-hero-row .product-slider-frame{
flex: 0 0 auto;
}
}
/* === KRU page: tighten space under title === */
.kru-page .chel-section:first-of-type{
padding-bottom: 12px;
}
.kru-page .kru-actions-below + .chel-section{
padding-top: 12px;
}
/* KRU: tighten spacing around action buttons (between hero and feature cards) */
.chel-section:first-of-type { padding-bottom: 12px; }
section.kru-actions-section { padding: 8px 0; }
section.kru-actions-section .hero-actions { margin: 0; }
section.kru-actions-section + .chel-section { padding-top: 12px; }
/* === KRU: remove extra air around buttons block (tight join) === */
.kru-page .kru-hero-section{ padding-top: 12px; padding-bottom: 12px; }
.kru-page section.kru-actions-section{ padding-top: 0; padding-bottom: 0; }
.kru-page section.kru-actions-section + .chel-section{ padding-top: 12px; }
/* KRU: make bottom spec cards match hero column widths (slider wider, purpose narrower) */
.kru-spec-grid{
grid-template-columns: 50% 1fr;
column-gap: 24px; /* чуть больше воздуха между "Типовые функции" и "Ключевые параметры" */
}
.kru-spec-grid .grid-left-stack{
width: 100%;
}
.kru-spec-grid .grid-left-stack .cardBox{
width: 100%;
flex: 1;
}
/* ===== Header navigation (eloptkzn-style visual) ===== */
.site-header{
position: sticky;
top: 0;
z-index: 80;
background: transparent;
border-bottom: none;
backdrop-filter: none;
}
/* IMPORTANT: disable legacy "left sidebar" header layout for desktop.
The project previously had a fixed vertical header for >=981px.
We now use a horizontal top header (.site-header). */
@media (min-width: 981px){
header.site-header{
width: 100%;
min-height: auto;
position: sticky;
left: auto;
top: 0;
border-right: none;
overflow: visible;
}
/* restore topbar and normal document flow */
header.site-header .topbar{ display:block; }
main, footer{ margin-left: 0; }
}
.site-header .mainbar{
background: transparent;
/* Center the navigation "pill" by its own width (like the reference site) */
display: flex;
justify-content: flex-start;
}
.site-header .header-inner{
/* Do NOT stretch to full row width — hug the content */
display: inline-flex;
width: fit-content;
max-width: calc(100vw - 32px);
box-sizing: border-box;
align-items:center;
justify-content: center;
gap: 18px;
padding: 12px 16px;
margin: 12px auto 0;
background: #ffffff;
border: 1px solid var(--line);
border-radius: 18px;
box-shadow: 0 18px 50px rgba(10,20,40,.08);
}
.header-logo{
display:flex;
align-items:center;
gap: 12px;
text-decoration:none;
color: var(--text);
min-width: auto;
}
.header-logo img{
width: 44px;
height: 44px;
border-radius: 14px;
object-fit: cover;
border: 1px solid var(--line);
background: rgba(255,255,255,.92);
}
.header-logo__text{
font-weight: 900;
letter-spacing: .02em;
}
.header-nav{ position: relative; }
.header-nav__list{
display:flex;
align-items:center;
gap: 18px;
list-style:none;
margin:0;
padding:0;
}
.header-nav__item{ position: relative; }
.header-nav__link{
display:flex;
align-items:center;
gap: 8px;
padding: 10px 6px;
text-decoration:none;
color: var(--muted);
font-weight: 900;
font-size: 13px;
letter-spacing: .02em;
border-radius: 12px;
}
.header-nav__link:hover{ color: var(--text); background: rgba(27,102,255,.06); }
.header-nav__link.active{ color: var(--accent); background: rgba(27,102,255,.10); }
.header-nav__item.has-dd .caret{
font-size: 12px;
opacity: .8;
}
.header-dropdown{
position:absolute;
top: calc(100% + 6px);
left: 0;
min-width: 260px;
background: rgba(255,255,255,.98);
border: 1px solid var(--line);
border-radius: 16px;
padding: 10px;
box-shadow: 0 18px 40px rgba(10,20,40,.16);
/* smoother + not "insta-close" */
display:block;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-4px);
transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.header-dropdown::before{
/* hover-bridge between link and dropdown (fix fast close) */
content:"";
position:absolute;
left:0; right:0;
top:-14px;
height:14px;
}
.header-dropdown .header-nav__sublink{
display:block;
padding: 10px 12px;
border-radius: 12px;
color: var(--muted);
text-decoration:none;
font-weight: 800;
font-size: 13px;
}
.header-dropdown .header-nav__sublink:hover{ background: rgba(27,102,255,.06); color: var(--text); }
.header-dropdown .header-nav__sublink.active{ background: rgba(27,102,255,.10); color: var(--accent); }
.header-nav__item.open > .header-dropdown,
.header-nav__item.has-dd:hover > .header-dropdown,
.header-nav__item.has-dd:focus-within > .header-dropdown{
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
transition: opacity .18s ease, transform .18s ease, visibility 0s;
}
/* Burger + mobile menu */
.header-burger{
display:none;
width: 44px;
height: 44px;
border-radius: 14px;
border: 1px solid var(--line);
background: rgba(255,255,255,.92);
cursor:pointer;
padding: 10px;
}
.header-burger span{
display:block;
height: 2px;
background: var(--text);
margin: 5px 0;
border-radius: 2px;
}
@media (max-width: 980px){
.header-logo__text{ display:none; }
.header-burger{ display:block; }
.header-nav__list{
position: fixed;
top: 0;
right: -110%;
width: min(360px, 92vw);
height: 100vh;
background: rgba(255,255,255,.98);
border-left: 1px solid var(--line);
box-shadow: -18px 0 40px rgba(10,20,40,.12);
flex-direction: column;
align-items: stretch;
gap: 6px;
padding: 84px 14px 14px;
transition: right .25s ease;
overflow:auto;
z-index: 90;
}
.header-nav__list.is-open{ right: 0; }
.header-nav__link{ padding: 14px 12px; }
.header-dropdown{
position: static;
display:none;
box-shadow:none;
border-radius: 14px;
margin: 0 0 8px;
}
.header-nav__item.open > .header-dropdown{ display:block; }
.header-nav__item.has-dd:hover > .header-dropdown{ display:none; }
}
/* ===== PRODUCTION PAGE: INFO BLOCKS ===== */
.production-info .info-grid{
display:flex;
flex-direction:column;
gap:22px;
}
.production-info .info-card{
border:1px solid var(--line);
background: rgba(255,255,255,.92);
border-radius: 20px;
box-shadow: 0 12px 28px rgba(10,20,40,.08);
padding: 18px 18px 16px;
min-height: 110px;
display:flex;
align-items:flex-start;
}
.production-info .info-card h3{
margin:0;
font-size: 18px;
line-height: 1.2;
font-weight: 900;
color: var(--text);
}
@media (max-width: 1100px){
.production-info .info-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
.production-info .info-grid{ grid-template-columns: 1fr; }
.production-info .info-card{ min-height: auto; }
}
/* ===== PRODUCTION PAGE: FULL WIDTH VERTICAL BLOCKS ===== */
.production-info .info-grid{
display:flex !important;
flex-direction: column !important;
gap: 20px !important;
}
.production-info .info-card{
width: 100% !important;
min-height: 140px;
padding: 28px 28px;
}
/* ===== PRODUCTION PAGE: TITLE ABOVE BLOCK ===== */
.production-info .info-title{
font-size: 20px;
font-weight: 900;
margin: 0 0 10px 0;
color: var(--text);
}
.production-info .info-block{
width: 100%;
}
.production-info .info-card{
min-height:120px;
}
/* ===== FIX: Production section vertical layout ===== */
.production-info .info-card{
column-count: 1 !important;
display: block !important;
}
.production-info .info-card p,
.production-info .info-card ul{
width: 100%;
display: block;
}
.production-info .info-card ul{
margin: 10px 0 15px 20px;
}
/* ===== CONTACTS: YANDEX MAP BLOCKS ===== */
.contacts-maps .info-grid{
display: flex;
flex-direction: column;
gap: 24px;
}
.contacts-maps .info-card--map{
padding: 0 !important;
overflow: hidden;
}
.contacts-maps .y-map{
width: 100%;
height: 360px;
border: 0;
display: block;
}
@media (max-width: 640px){
.contacts-maps .y-map{ height: 300px; }
}
/* ===== CONTACTS: Rounded map frames ===== */
.contacts-maps .info-card--map{
border: 1px solid var(--line);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 12px 28px rgba(10,20,40,.08);
}
.contacts-maps .y-map{
border-radius: 20px;
}
/* ===== CONTACT BUTTONS ===== */
.contact-buttons{
margin-top: 14px;
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.contact-buttons .btn{
display: inline-block;
padding: 10px 18px;
border-radius: 30px;
font-weight: 500;
text-decoration: none;
transition: .2s ease;
}
.btn-primary{
background: var(--accent, #1f3cff);
color: #fff;
}
.btn-primary:hover{
opacity: .9;
}
.btn-outline{
border: 1px solid var(--accent, #1f3cff);
color: var(--accent, #1f3cff);
}
.btn-outline:hover{
background: var(--accent, #1f3cff);
color: #fff;
}
/* ===== NAV LOGO (before Главная) ===== */
.header-nav__item.nav-logo{
display: flex;
align-items: center;
}
.header-nav__link.nav-logo__link{
padding: 0 !important;
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.nav-logo__img{
display: block;
width: auto;
height: auto;
max-width: none;
max-height: none;
}
/* ===== NAV LOGO FIX (inside panel) ===== */
.nav-logo__img{
height: 34px; /* fits nav height */
width: auto; /* keep proportions */
display: block;
}
@media (max-width: 980px){
.nav-logo__img{ height: 28px; }
}
/* ===== HOME: keep hero spacing while hiding logo ===== */
.hero-title-logo--hidden{
visibility: hidden;
pointer-events: none;
}
/* ===== INCREASE TOP SPACE IN HERO (300px, main page only) ===== */
body.home .hero,
.home .hero{
padding-top: 400px;
}
/* ===== HERO: Fade white overlay to 0 from middle to right ===== */
.chel-hero .hero-overlay{
background: linear-gradient(90deg,
rgba(246, 248, 251, 0.86) 0%,
rgba(246, 248, 251, 0.74) 28%,
rgba(246, 248, 251, 0.52) 44%,
rgba(246, 248, 251, 0.28) 54%,
rgba(246, 248, 251, 0.10) 62%,
rgba(246, 248, 251, 0.00) 72%,
rgba(246, 248, 251, 0.00) 100%);
}
/* ===== HOME ONLY: raise hero background to the very top (nav stays above) ===== */
body.home{
--home-hero-shift: 140px; /* tune: amount hero is pulled up */
}
body.home header{
position: relative; /* keep layout */
z-index: 10; /* nav above hero */
}
body.home .hero{
margin-top: calc(-1 * var(--home-hero-shift)) !important;
position: relative;
z-index: 1;
}
/* keep hero content (text/buttons) visually in the same place */
body.home .hero-grid{
padding-top: calc(22px + var(--home-hero-shift)) !important;
}
/* HOME HERO WHITE FADE LEFT 100% */
body.home .hero-overlay {
background: none !important;
}
/* ===== Производство: якоря под фиксированное меню ===== */
#history, #capacity, #products{
scroll-margin-top: 120px;
}
/* Logos (images) */
.logo-pill{
display:flex;
align-items:center;
justify-content:center;
min-height: 74px;
}
.logo-pill img{
max-width: 100%;
max-height: 46px;
width: auto;
height: auto;
object-fit: contain;
display:block;
}
@media (max-width: 980px){
.logos{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 520px){
.logos{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.logo-pill{ min-height: 64px; }
.logo-pill img{ max-height: 38px; }
}
/* Nav logo sizing */
.nav-logo__img{
height: 44px;
width: auto;
}
@media (max-width: 980px){
.nav-logo__img{ height: 40px; }
}
/* History timeline */
.history-timeline{
padding: 26px 28px;
}
.timeline{
position: relative;
padding-left: 56px;
}
.timeline::before{
content: "";
position: absolute;
left: 22px;
top: 8px;
bottom: 8px;
width: 2px;
background: rgba(30, 85, 170, .18);
border-radius: 2px;
}
.timeline-item{
position: relative;
margin: 10px 0 34px;
}
.timeline-item:last-child{
margin-bottom: 8px;
}
.timeline-item::before{
content: "";
position: absolute;
left: -42px; /* aligns with line at 22px */
top: 16px;
width: 12px;
height: 12px;
border-radius: 999px;
background: #2f7fff;
box-shadow: 0 0 0 6px rgba(47,127,255,.12);
}
.timeline-year{
font-weight: 900;
font-size: 44px;
line-height: 1.05;
letter-spacing: .5px;
color: #111827;
margin-bottom: 10px;
}
.timeline-text{
font-size: 18px;
line-height: 1.6;
color: #2b3445;
max-width: 900px;
}
@media (max-width: 820px){
.history-timeline{ padding: 22px 18px; }
.timeline{ padding-left: 46px; }
.timeline::before{ left: 18px; }
.timeline-item::before{ left: -36px; }
.timeline-year{ font-size: 36px; }
.timeline-text{ font-size: 16px; }
}
/* Production page info blocks */
.production-info .info-card ul{
margin: 10px 0 0;
padding-left: 18px;
}
.production-info .info-card li{
margin: 6px 0;
}
/* Nav font thinner (no bold) */
.header-nav__link{
font-weight: 400 !important;
}
.header-nav__link strong{
font-weight: 400 !important;
}
/* Increase FULL hero section height */
.hero {
padding-bottom: 220px !important;
}
.hero-wrap {
min-height: 1000px !important;
}
/* Move hero content lower */
.hero-grid {
min-height: 100%;
display: flex !important;
align-items: flex-end !important;
}
.hero-main {
margin-bottom: 60px;
}
/* Professional footer styling */
.footer-contacts {
text-align: center;
font-size: 14px;
color: var(--muted);
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 6px;
}
.footer-contacts a {
color: var(--text);
text-decoration: none;
transition: opacity .2s ease;
}
.footer-contacts a:hover {
opacity: .7;
}
.footer-copy {
text-align: center;
font-size: 13px;
color: var(--muted);
margin: 0;
}
/* Equal spacing in main navigation */
.header-nav {
display: flex;
align-items: center;
gap: 28px; /* одинаковое расстояние */
}
.header-nav__item {
margin: 0 !important;
}
.mainbar {
display: flex;
align-items: center;
gap: 28px; /* расстояние между логотипом и первым пунктом */
}
/* Move logo slightly right */
.header-logo,
.site-header .logo,
.mainbar img {
margin-right: -5px;
}
/* Dropdown typography should match main navigation */
.header-dropdown,
.header-dropdown a,
.header-nav__sublink {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
letter-spacing: inherit;
color: inherit;
}
.header-nav__sublink {
display: block;
padding: 10px 14px;
}
/* Remove bold from main navigation and dropdown */
.header-nav__link,
.header-nav__sublink {
font-weight: 400 !important;
}
/* Make navigation text black */
.header-nav__link,
.header-nav__sublink,
.header-dropdown a {
color: #000000 !important;
}
/* Reduce factory card height by ~30% */
.factory-card {
padding: 12px 18px 10px !important; /* was 18px 18px 16px */
}
.factory-card__poster {
max-height: 140px !important; /* reduce visual height */
width: auto;
}
.factory-card__btn {
margin-top: 6px !important;
}
/* Adjust factory cards after removing images */
.factory-card {
justify-content: center;
text-align: center;
min-height: 120px;
}
.factory-card__btn {
margin-top: 12px;
}
/* Uniform image styling inside factory cards */
.factory-card__poster {
max-width: 100%;
max-height: 120px;
object-fit: contain;
margin-bottom: 10px;
}
/* Adjust product blocks after image removal */
.product-card,
.products-card,
.card {
text-align: left;
}
.products-grid,
.product-grid {
align-items: start;
}
/* Remove decorative background images from products page blocks */
.products-list .card,
.products-list .product-card,
.products-page .card,
.products-page .product-card {
background-image: none !important;
}
/* Remove decorative panel image on products page cards */
.chel-section .cat-section::before{
content: none !important;
background: none !important;
background-image: none !important;
}
/* Factory cards: full-size background images */
.factory-card{
position: relative;
overflow: hidden;
}
.factory-card__poster--bg{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-height: none !important;
object-fit: cover;
margin: 0 !important;
}
/* Keep card content above the image */
.factory-card > :not(.factory-card__poster--bg){
position: relative;
z-index: 1;
}
/* Optional: improve button readability on light backgrounds */
.factory-card__btn{
background: rgba(255,255,255,.92);
backdrop-filter: blur(6px);
}
/* Factory cards: increase height x2 */
.factory-card{
min-height: 360px !important;
}
@media (max-width: 900px){
.factory-card{
min-height: 300px !important;
}
}
/* Factory cards: enforce 3:2 aspect ratio */
.factory-card{
aspect-ratio: 3 / 2;
min-height: auto !important; /* override previous min-height x2 rules */
}
/* Ensure background-cover image fills the card */
.factory-card__poster--bg{
width: 100%;
height: 100%;
object-fit: cover;
}
/* Factory cards: full-bleed poster like KSO (no inner framed media block) */
.factory-card{
padding: 0 !important;
overflow: hidden;
}
/* Layout sits above the full-bleed poster, keep paddings for button position */
.factory-card__layout{
position: relative;
z-index: 1;
display: flex !important;
flex-direction: column;
justify-content: space-between;
width: 100%;
height: 100%;
padding: 18px 18px 16px;
}
/* Titles/text are baked into the provided poster images, so hide the content column */
.factory-card__content{
display: none !important;
}
/* Make poster occupy the whole card without its own rounded frame */
.factory-card__media{
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
border-radius: 0 !important;
background: transparent !important;
overflow: hidden !important;
}
/* Move "Подробнее" button to bottom right of factory cards */
.factory-card{
position: relative;
}
.factory-card__btn{
position: absolute !important;
bottom: 16px;
right: 16px;
margin: 0 !important;
z-index: 2;
}
/* Center the last "Вся продукция" card as a single item, same size as others */
.factory-card--solo{
grid-column: 1 / -1;
justify-self: center;
width: calc((100% - 22px) / 2); /* same as one column in 2-col grid (gap=22px) */
}
@media (max-width: 640px){
.factory-card--solo{
width: 100%;
}
}
/* FIX: Center "Вся продукция" card and keep SAME size as other cards (not full width) */
.factory-card--solo{
grid-column: 1 / -1;
justify-self: center;
/* One column width in 2-col grid (gap is 22px in .factory-grid) */
width: calc((100% - 22px) / 2) !important;
max-width: calc((100% - 22px) / 2) !important;
}
@media (max-width: 1100px){
/* When grid becomes 2 columns already, keep same logic */
.factory-card--solo{
width: calc((100% - 22px) / 2) !important;
max-width: calc((100% - 22px) / 2) !important;
}
}
@media (max-width: 640px){
.factory-card--solo{
grid-column: auto;
width: 100% !important;
max-width: 100% !important;
justify-self: stretch;
}
}
/* === UNIFY PRODUCT CARDS LIKE KSO === */
/* Remove visual frame from card container */
.card,
.product-card,
.product-item {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
}
/* Keep padding only for inner content if exists */
.card-content,
.product-card__content,
.product-item__content {
padding: 32px !important;
}
/* Image must fill full block */
.card img,
.product-card img,
.product-item img {
display: block;
width: 100%;
height: auto;
}
/* === Производство: отступ кнопки === */
.split .mini-cta {
margin-top: 32px;
}
/* === Home: ensure header behaves like other pages on scroll === */
body.home{
/* reserve space for fixed header so content doesn't jump */
padding-top: 96px;
}
body.home .site-header{
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
}
/* === SHKAFY PAGE FIX: restore title alignment, reduce photo block, equalize card heights === */
.shkafy-page .product-hero{
max-width: none !important;
margin: 0 !important;
}
.shkafy-page .product-hero-left{
max-width: none;
}
.shkafy-page .kru-hero-row{
display: flex;
align-items: stretch !important;
gap: 28px;
}
/* Photo block reduced and kept compact */
.shkafy-page .product-slider-frame{
width: 320px !important;
max-width: 320px !important;
flex: 0 0 320px !important;
aspect-ratio: auto !important;
overflow: visible !important;
margin: 0 !important;
align-self: stretch !important;
}
.shkafy-page .product-slider-frame .product-slider,
.shkafy-page .product-slider-frame .product-slider-track{
width: 100%;
height: auto;
}
.shkafy-page #kruSlider .product-slider-track{
aspect-ratio: 3 / 4 !important;
}
.shkafy-page .product-slider-frame .product-slide{
object-fit: contain !important;
height: 100%;
}
/* Description card matches photo block height */
.shkafy-page .kru-purpose-tall{
flex: 1 1 auto;
width: auto;
min-width: 0;
align-self: stretch !important;
min-height: 0 !important;
height: auto !important;
display: flex;
flex-direction: column;
}
.shkafy-page .kru-purpose-tall .kru-desc{
margin-top: 0;
}
.shkafy-page .kru-purpose-tall .kru-desc,
.shkafy-page .kru-purpose-tall p{
margin-bottom: 0;
}
@media (max-width: 900px){
.shkafy-page .kru-hero-row{
flex-direction: column;
align-items: flex-start !important;
}
.shkafy-page .product-slider-frame{
width: min(100%, 320px) !important;
max-width: min(100%, 320px) !important;
flex-basis: auto !important;
align-self: flex-start !important;
}
.shkafy-page .kru-purpose-tall{
flex-basis: auto;
width: 100%;
align-self: stretch !important;
}
}
/* Detail popup for SHNT */
.detail-backdrop{
align-items:center;
justify-content:center;
background:rgba(20, 28, 44, .52);
backdrop-filter: blur(4px);
padding:28px;
}
.detail-modal-shell{
width:min(1120px, 96vw);
max-height:min(88vh, 980px);
background:#ffffff;
border-radius:28px;
box-shadow:0 24px 70px rgba(15, 23, 42, .24);
overflow:hidden;
display:flex;
flex-direction:column;
}
.detail-modal-header{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:24px;
padding:30px 34px 24px;
border-bottom:1px solid #e4eaf5;
background:#ffffff;
}
.detail-modal-kicker{
font-size:13px;
line-height:1.2;
letter-spacing:.12em;
text-transform:uppercase;
font-weight:800;
color:#64748b;
margin-bottom:10px;
}
.detail-modal-header h2{
margin:0;
font-size:clamp(34px, 3vw, 56px);
line-height:1.06;
}
.detail-modal-subtitle{
margin:12px 0 0;
font-size:16px;
color:#64748b;
}
.detail-modal-close{
flex:0 0 auto;
width:48px;
height:48px;
border-radius:999px;
border:1px solid #cfd8e6;
background:#fff;
color:#334155;
font-size:28px;
line-height:1;
cursor:pointer;
}
.detail-modal-close:hover{background:#f8fbff;}
.detail-modal-body{
flex:1 1 auto;
overflow:auto;
padding:28px 34px;
background:#ffffff;
}
.detail-section{
width: 100%;
background:#ffffff;
border:1px solid #dfe7f2;
border-radius:24px;
padding:26px 28px;
margin-bottom:22px;
}
.detail-section:last-child{margin-bottom:0;}
.detail-section h3{
margin:0 0 18px;
font-size:24px;
line-height:1.2;
}
.detail-copy p{
margin:0 0 16px;
color:#475569;
font-size:16px;
line-height:1.65;
}
.detail-copy p:last-child{margin-bottom:0;}
.detail-figure{
margin:22px 0;
padding:14px;
border:1px solid #e2e8f0;
border-radius:20px;
background:#ffffff;
}
.detail-modal-footer{
padding:22px 34px 30px;
border-top:1px solid #e4eaf5;
background:#ffffff;
display:flex;
justify-content:flex-end;
}
.shkafy-page #kpModal .modal{display:none;}
@media (max-width: 900px){
.detail-backdrop{padding:16px;}
.detail-modal-shell{width: 100%; max-height:92vh; border-radius:22px;}
.detail-modal-header{padding:22px 20px 18px;}
.detail-modal-body{padding:20px;}
.detail-modal-footer{padding:18px 20px 22px;}
.detail-section{padding:20px; border-radius:18px;}
.detail-modal-header h2{font-size:clamp(28px, 7vw, 40px);}
.detail-section h3{font-size:22px;}
}
/* === SHKAFY PAGE: unified 30px spacing rhythm === */
.shkafy-page .kru-hero-row{ gap: 30px !important; }
.shkafy-page .kru-spec-grid{ column-gap: 30px !important; }
.shkafy-page .hero-actions{ gap: 16px; }
.shkafy-page .kru-hero-section{ padding-top: 15px !important; padding-bottom: 15px !important; }
.shkafy-page section.kru-actions-section{ padding-top: 15px !important; padding-bottom: 15px !important; }
.shkafy-page section.kru-actions-section + .chel-section{ padding-top: 15px !important; }
.shkafy-page .chel-section:first-of-type{ padding-bottom: 15px !important; }
/* === SHKAFY PAGE: force exact 30px vertical rhythm between all main sections === */
.shkafy-page > section.section{
padding-top:15px !important;
padding-bottom:15px !important;
}
.shkafy-page .kru-hero-row,
.shkafy-page .kru-spec-grid{
gap:30px !important;
column-gap:30px !important;
}
.shkafy-page .hero-actions{
gap:16px;
margin:0 !important;
}
/* === SHKAFY PAGE: section labels === */
.shkafy-page .shkafy-section-label{
padding-top: 35px !important;
padding-bottom: 15px !important;
}
.shkafy-page .shkafy-section-title{
display: flex;
width: 100%;
box-sizing: border-box;
align-items: center;
justify-content: flex-start;
min-height: 52px;
padding: 12px 22px;
border: 1px solid #d8dee9;
border-radius: 14px;
background: #fff;
color: #10223e;
font-size: clamp(20px, 2vw, 28px);
font-weight: 800;
line-height: 1.2;
letter-spacing: 0.04em;
text-transform: uppercase;
box-shadow: 0 10px 24px rgba(16, 34, 62, 0.06);
}
.shkafy-page .shkafy-section-label .container{
display: block;
}
@media (max-width: 767px){
.shkafy-page .shkafy-section-title{
width: 100%;
text-align: center;
padding: 12px 16px;
font-size: 18px;
}
}
/* About page timeline redesign */
.history-timeline{
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
border: 1px solid #e3e7ef;
border-radius: 28px;
padding: 28px 28px 12px;
box-shadow: 0 10px 30px rgba(15, 31, 63, 0.06);
}
.timeline{
position: relative;
display: grid;
gap: 18px;
padding-left: 32px;
}
.timeline::before{
content: "";
position: absolute;
left: 10px;
top: 6px;
bottom: 6px;
width: 2px;
background: linear-gradient(180deg, #8bbdff 0%, #1946ba 100%);
border-radius: 999px;
}
.timeline-item{
position: relative;
display: grid;
grid-template-columns: 110px minmax(0, 1fr);
gap: 18px;
align-items: start;
background: #fff;
border: 1px solid #e7edf6;
border-radius: 20px;
padding: 18px 20px;
box-shadow: 0 8px 24px rgba(15, 31, 63, 0.04);
}
.timeline-item::before{
content: "";
position: absolute;
left: -28px;
top: 24px;
width: 14px;
height: 14px;
border-radius: 50%;
background: #1946ba;
border: 4px solid #eaf2ff;
box-shadow: 0 0 0 4px rgba(25, 70, 186, 0.12);
}
.timeline-year{
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 8px 14px;
border-radius: 14px;
background: #f1f6ff;
color: #0e2c73;
font-size: 24px;
font-weight: 800;
letter-spacing: .02em;
line-height: 1;
}
.timeline-text{
color: #334a6a;
font-size: 16px;
line-height: 1.6;
padding-top: 4px;
}
.reveal-up{
opacity: 0;
transform: translateY(28px);
transition: opacity .65s ease, transform .65s ease;
}
.reveal-up.is-visible{
opacity: 1;
transform: translateY(0);
}
@media (max-width: 900px){
.history-timeline{
padding: 22px 18px 10px;
border-radius: 22px;
}
.timeline{
padding-left: 24px;
gap: 14px;
}
.timeline::before{
left: 7px;
}
.timeline-item{
grid-template-columns: 1fr;
gap: 12px;
padding: 16px;
border-radius: 18px;
}
.timeline-item::before{
left: -21px;
top: 22px;
width: 12px;
height: 12px;
}
.timeline-year{
width: max-content;
min-height: 42px;
font-size: 22px;
}
.timeline-text{
font-size: 15px;
}
}
/* Make last fact wider like design */
.facts{
display:flex;
gap:16px;
}
.fact{
flex:1;
}
.fact:nth-child(3){
flex:1.4;
}
.fact-txt{
white-space:normal;
}
/* Center text in fact blocks like design */
.fact{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
}
.fact-num{
margin-bottom:10px;
}
.fact-txt{
text-align:center;
}
/* Safe hero text readability fix */
.chel-hero .hero-overlay{
background: rgba(0, 0, 0, 0.28) !important;
}
.chel-hero h1{
color: #ffffff !important;
text-shadow: 0 4px 18px rgba(0, 0, 0, 0.72) !important;
}
.chel-hero .hero-lead{
color: #ffffff !important;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.68) !important;
font-size: 16px !important;
margin-top: 8px !important;
}
/* force one line */
.chel-hero h1{
white-space: nowrap !important;
}
.chel-hero .hero-lead{
white-space: nowrap !important;
}
/* Global background color */
body{
background-color:#F5F5F5 !important;
}
/* Main page: projects section 3x3 */
.projects-grid{
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:32px !important;
align-items:stretch !important;
}
.projects-grid .proj-card{
min-height:180px;
}
@media (max-width: 1024px){
.projects-grid{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
}
@media (max-width: 640px){
.projects-grid{
grid-template-columns:1fr !important;
}
}
.proj-logo{
width: 100%;
max-height:80px;
object-fit:contain;
margin-bottom:10px;
}
/* Logo normalization */
.proj-logo{
width: 100%;
height:80px;
object-fit:contain;
display:block;
margin:0 auto 12px auto;
}
/* visually balance different logos */
.proj-card:nth-child(1) .proj-logo{height:70px;}
.proj-card:nth-child(2) .proj-logo{height:60px;}
.proj-card:nth-child(3) .proj-logo{height:70px;}
.proj-card:nth-child(4) .proj-logo{height:65px;}
.proj-card:nth-child(5) .proj-logo{height:75px;}
.proj-card:nth-child(6) .proj-logo{height:70px;}
.proj-card:nth-child(7) .proj-logo{height:70px;}
.proj-card:nth-child(8) .proj-logo{height:65px;}
.proj-card:nth-child(9) .proj-logo{height:75px;}
/* Improve project cards layout */
.proj-card{
display:flex;
flex-direction:column;
justify-content:flex-start;
align-items:center;
text-align:center;
padding:24px;
}
.proj-title{
font-size:16px;
font-weight:600;
margin-bottom:12px;
}
.proj-logo{
width: 100%;
height:90px;
object-fit:contain;
display:block;
margin:10px auto 16px auto;
}
.proj-text{
font-size:14px;
line-height:1.5;
}
/* Bigger logos except 6th */
.proj-logo{
max-width:85%;
max-height:110px;
}
/* card 6 keep smaller */
.proj-card:nth-child(6) .proj-logo{
max-width:60%;
max-height:80px;
}
/* Production capacity background image */
.production-capacity{
position: relative;
overflow: hidden;
background: #fff;
border-radius: 20px;
padding: 36px;
min-height: 560px;
}
.production-capacity::after{
content: "";
position: absolute;
inset: 0;
background: url("../img/production-bg.jpeg") no-repeat right -10px center;
background-size: 420px auto;
opacity: 0.2;
z-index: 1;
}
.production-text{
position: relative;
z-index: 2;
max-width: 100%;
}
.production-text ul{
margin-top: 15px;
padding-left: 20px;
}
.production-text li{
margin-bottom: 8px;
}
@media (max-width: 1100px){
.production-capacity{
min-height: auto;
padding: 28px;
}
.production-capacity::after{
content: "";
position: absolute;
inset: 0;
background: url("../img/production-bg.jpeg") no-repeat right -10px center;
background-size: 420px auto;
opacity: 0.2;
z-index: 1;
}
.production-text{
position: relative;
z-index: 2;
max-width: 100%;
}
}
@media (max-width: 820px){
.production-capacity::after{
content: "";
position: absolute;
inset: 0;
background: url("../img/production-bg.jpeg") no-repeat right -10px center;
background-size: 420px auto;
opacity: 0.2;
z-index: 1;
}
.production-text{
position: relative;
z-index: 2;
max-width: 100%;
}
}
.product-bg{
position: relative;
overflow: hidden;
}
.product-bg::after{
content: "";
position: absolute;
top: 0;
right: -10px;
width: 100%;
height: 100%;
background: url("../img/production-truck.png") no-repeat right calc(50% - 15px);
background-size: 420px auto;
opacity: 0.2;
pointer-events: none;
z-index: 1;
}
.product-bg > *{
position: relative;
z-index: 2;
}
.competence-bg{
position: relative;
overflow: hidden;
}
.competence-bg::after{
content: "";
position: absolute;
top: 0;
right: -10px;
width: 100%;
height: 100%;
background: url("../img/competence-bg.png") no-repeat right center;
background-size: 300px auto;
opacity: 0.2;
pointer-events: none;
z-index: 1;
}
.competence-bg > *{
position: relative;
z-index: 2;
}
.competence-block {
position: relative;
overflow: hidden;
}
.competence-block::before {
content: "";
position: absolute;
inset: 0;
background: url("../img/competence-bg.jpg") no-repeat right calc(50% + 5px);
background-size: 300px auto;
opacity: 0.2;
z-index: 0;
}
.competence-block > * {
position: relative;
z-index: 1;
}
/* Career block */
.career-block {
position: relative;
overflow: hidden;
}
.career-block::before {
content: "";
position: absolute;
inset: 0;
background: url('../img/career-bg.png') no-repeat right calc(50% + 5px);
background-size: 300px auto;
opacity: 0.2;
z-index: 0;
pointer-events: none;
}
.career-block > * {
position: relative;
z-index: 1;
}
.partnerLogoImg{
max-width:100%;
max-height:72px;
width:auto;
height:auto;
object-fit:contain;
display:block;
margin:0 auto;
}
/* FIX: only modal scheme image */
.detail-modal-body .detail-figure img{
width:100%;
height:auto;
}
/* FIX: lock image sizes in content blocks */
.block img,
.production img,
.products img,
.competencies img,
.career img {
width: 280px;
height: auto;
flex-shrink: 0;
}
/* FINAL FIX: lock image size strictly */
.block img,
.production img,
.products img,
.competencies img,
.career img {
width: 280px !important;
min-width: 280px !important;
max-width: 280px !important;
height: auto !important;
flex-grow: 0 !important;
flex-shrink: 0 !important;
display: block !important;
}
/* Fix: keep background illustrations at fixed size on wide screens */
@media (max-width: 820px){
.production-capacity::after,
.product-bg::after{
background-size: 240px auto;
}
.competence-bg::after,
.competence-block::before,
.career-block::before{
background-size: 180px auto;
}
}
/* FIX: align production capacity block paddings with other info blocks */
.production-info #capacity .info-card.competence-bg{
padding: 28px !important;
}
.production-info #capacity .production-capacity{
padding: 0 !important;
min-height: 0 !important;
background: transparent !important;
border-radius: 0 !important;
}
.production-info #capacity .production-text{
max-width: 100% !important;
}
.production-info #capacity .production-text p{
margin: 0 0 14px 0 !important;
}
.production-info #capacity .production-text ul{
margin: 10px 0 0 20px !important;
padding-left: 0 !important;
}
.production-info #capacity .production-text li{
margin-bottom: 8px !important;
}
/* FIX: reduce transparency on all production page block background images by 30% */
.production-capacity::after,
.product-bg::after,
.competence-bg::after,
.competence-block::before,
.career-block::before {
opacity: 0.5 !important;
}
/* FIX: reduce spacing between history items to 10px */
.history-item,
.timeline-item,
.history-block > div {
margin-bottom: 10px !important;
}
/* FIX: unify all "Подробное описание" popups on shkafy page to kiosk style */
.shkafy-page .detail-backdrop{
align-items:center !important;
justify-content:center !important;
background:rgba(0,0,0,.55) !important;
backdrop-filter:none !important;
padding:24px !important;
}
.shkafy-page .detail-modal-shell{
width:min(1100px, 96vw) !important;
max-height:88vh !important;
overflow:auto !important;
background:#fff !important;
border-radius:16px !important;
box-shadow:0 20px 60px rgba(0,0,0,.25) !important;
display:block !important;
}
.shkafy-page .detail-modal-header{
display:flex !important;
align-items:flex-start !important;
justify-content:space-between !important;
gap:16px !important;
margin:0 !important;
padding:28px 28px 20px !important;
border-bottom:none !important;
background:#fff !important;
}
.shkafy-page .detail-modal-kicker,
.shkafy-page .detail-modal-subtitle,
.shkafy-page .detail-modal-footer{
display:none !important;
}
.shkafy-page .detail-modal-header h2{
margin:0 !important;
font-size:32px !important;
line-height:1.15 !important;
}
.shkafy-page .detail-modal-body{
display:grid !important;
gap:20px !important;
padding:0 28px 28px !important;
overflow:visible !important;
background:#fff !important;
}
.shkafy-page .detail-section{
background:#fff !important;
border:1px solid #d9dde5 !important;
border-radius:12px !important;
padding:20px !important;
margin:0 !important;
}
.shkafy-page .detail-section h3{
margin:0 0 14px 0 !important;
font-size:18px !important;
line-height:1.3 !important;
}
.shkafy-page .detail-figure{
margin:0 0 16px 0 !important;
padding:0 !important;
border:none !important;
border-radius:0 !important;
background:transparent !important;
}
.shkafy-page .detail-copy p{
margin:0 0 12px 0 !important;
}
.shkafy-page .detail-modal-close{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
width:40px !important;
height:40px !important;
border:none !important;
background:#f2f4f7 !important;
border-radius:10px !important;
color:#111 !important;
cursor:pointer !important;
font-size:28px !important;
line-height:1 !important;
}
@media (max-width: 900px){
.shkafy-page .detail-backdrop{
padding:16px !important;
}
.shkafy-page .detail-modal-shell{
width:min(1100px, 100vw) !important;
max-height:92vh !important;
border-radius:16px !important;
}
.shkafy-page .detail-modal-header{
padding:20px 20px 16px !important;
}
.shkafy-page .detail-modal-body{
padding:0 20px 20px !important;
}
.shkafy-page .detail-modal-header h2{
font-size:26px !important;
}
}
/* FIX: keep modals hidden by default, but allow JS inline display:flex to open them */
#kpModal,
#yanModal,
#kioskPopup{
display:none;
}
#kioskPopup.is-open{
display:flex !important;
}
#kpModal[style*="display: flex"],
#yanModal[style*="display: flex"]{
display:flex !important;
}
/* FIX: уменьшение отступов на странице "Шкафы и щиты" в 2 раза */
.shkafy-page section,
.shkafy-page .block,
.shkafy-page .card,
.shkafy-page .content-block {
margin-top: 10px !important;
margin-bottom: 10px !important;
}
.shkafy-page .block,
.shkafy-page .card,
.shkafy-page .content-block {
padding: 12px !important;
}
.shkafy-page .section-title,
.shkafy-page .shkafy-section-label {
margin-bottom: 10px !important;
padding: 10px 16px !important;
}
/* FINAL FIX: correct spacing for real classes on "Шкафы и щиты" */
.shkafy-page > * {
margin-top: 10px !important;
margin-bottom: 10px !important;
}
/* основной блок с картинкой */
.shkafy-page .product-layout {
gap: 10px !important;
}
/* карточки */
.shkafy-page .product-layout > div,
.shkafy-page .grid > div {
margin: 10px !important;
padding: 12px !important;
}
/* нижняя сетка */
.shkafy-page .grid {
gap: 10px !important;
}
/* FINAL HARD FIX: расстояния между ВСЕМИ блоками 5px */
.shkafy-page * {
box-sizing: border-box;
}
.shkafy-page > div,
.shkafy-page > section {
margin: 5px !important;
}
.shkafy-page .product-layout {
margin: 5px !important;
gap: 5px !important;
}
.shkafy-page .product-layout > *,
.shkafy-page .grid > * {
margin: 5px !important;
padding: 10px !important;
}
.shkafy-page .grid {
gap: 5px !important;
}
.shkafy-page h1,
.shkafy-page h2,
.shkafy-page .section-title,
.shkafy-page .shkafy-section-label {
margin: 5px !important;
}
/* REAL FIX: 5px spacing on page "Шкафы и щиты" using actual project classes */
.shkafy-page .section{
padding-top: 5px !important;
padding-bottom: 5px !important;
}
.shkafy-page .chel-section{
padding-top: 5px !important;
padding-bottom: 5px !important;
}
.shkafy-page .shkafy-section-label{
padding-top: 5px !important;
padding-bottom: 5px !important;
}
.shkafy-page .product-hero{
margin-bottom: 5px !important;
}
.shkafy-page .kru-hero-row{
gap: 5px !important;
}
.shkafy-page .grid-2,
.shkafy-page .kru-spec-grid{
gap: 5px !important;
column-gap: 5px !important;
row-gap: 5px !important;
}
.shkafy-page .grid-left-stack{
display: grid !important;
gap: 5px !important;
}
.shkafy-page .cardBox{
margin: 0 !important;
}
.shkafy-page .container > .crumbs,
.shkafy-page .container > .product-hero,
.shkafy-page .container > .shkafy-section-title,
.shkafy-page .container > .kru-hero-row,
.shkafy-page .container > .grid-2,
.shkafy-page .container > .hero-actions{
margin-top: 5px !important;
margin-bottom: 5px !important;
}
.shkafy-page .shkafy-section-title{
padding-top: 10px !important;
padding-bottom: 10px !important;
}
/* FIX: remove remaining two large gaps on "Шкафы и щиты" */
.shkafy-page .shkafy-section-label + .kru-hero-section{
padding-top: 5px !important;
margin-top: 0 !important;
}
.shkafy-page .kru-hero-section + .chel-section{
padding-top: 5px !important;
margin-top: 0 !important;
}
.shkafy-page .shkafy-section-label .container,
.shkafy-page .kru-hero-section .container,
.shkafy-page .chel-section .container{
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.shkafy-page .shkafy-section-title{
margin-bottom: 0 !important;
}
.shkafy-page .kru-hero-row{
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.shkafy-page .kru-spec-grid{
margin-top: 0 !important;
}
/* FORCE FIX: exact first-screen gaps on page "Шкафы и щиты" */
main.shkafy-page > section{
padding-top: 5px !important;
padding-bottom: 5px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
main.shkafy-page > section:nth-of-type(2){
padding-top: 5px !important;
padding-bottom: 0 !important;
}
main.shkafy-page > section:nth-of-type(3){
padding-top: 5px !important;
padding-bottom: 0 !important;
}
main.shkafy-page > section:nth-of-type(4){
padding-top: 5px !important;
padding-bottom: 0 !important;
}
main.shkafy-page > section:nth-of-type(2) .container,
main.shkafy-page > section:nth-of-type(3) .container,
main.shkafy-page > section:nth-of-type(4) .container{
margin-top: 0 !important;
margin-bottom: 0 !important;
}
main.shkafy-page > section:nth-of-type(2) .shkafy-section-title{
margin: 0 !important;
}
main.shkafy-page > section:nth-of-type(3) .kru-hero-row{
margin: 0 !important;
gap: 5px !important;
}
main.shkafy-page > section:nth-of-type(4) .grid-2.kru-spec-grid{
margin: 0 !important;
gap: 5px !important;
column-gap: 5px !important;
row-gap: 5px !important;
}
main.shkafy-page > section:nth-of-type(3) + section{
margin-top: 0 !important;
}
main.shkafy-page .cardBox{
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* GLOBAL FIX: apply the same compact spacing to all sections on page "Шкафы и щиты" */
main.shkafy-page > section{
padding-top: 5px !important;
padding-bottom: 5px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
main.shkafy-page > section .container{
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
main.shkafy-page .shkafy-section-title,
main.shkafy-page .kru-hero-row,
main.shkafy-page .grid-2,
main.shkafy-page .kru-spec-grid,
main.shkafy-page .hero-actions,
main.shkafy-page .product-hero,
main.shkafy-page .crumbs{
margin-top: 5px !important;
margin-bottom: 5px !important;
}
main.shkafy-page .kru-hero-row,
main.shkafy-page .grid-2,
main.shkafy-page .kru-spec-grid,
main.shkafy-page .grid-left-stack{
gap: 5px !important;
column-gap: 5px !important;
row-gap: 5px !important;
}
main.shkafy-page .cardBox{
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* FIX: apply 5px spacing to every repeated section block on "Шкафы и щиты" */
main.shkafy-page > section.shkafy-section-label,
main.shkafy-page > section.chel-section.kru-hero-section,
main.shkafy-page > section.chel-section,
main.shkafy-page > section.kru-actions-section{
padding-top: 5px !important;
padding-bottom: 5px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
main.shkafy-page > section.shkafy-section-label + section.chel-section.kru-hero-section{
padding-top: 5px !important;
}
main.shkafy-page > section.chel-section.kru-hero-section + section.chel-section{
padding-top: 5px !important;
}
main.shkafy-page > section.chel-section + section.kru-actions-section{
padding-top: 5px !important;
}
main.shkafy-page > section.shkafy-section-label .container,
main.shkafy-page > section.chel-section.kru-hero-section .container,
main.shkafy-page > section.chel-section .container,
main.shkafy-page > section.kru-actions-section .container{
padding-top: 0 !important;
padding-bottom: 0 !important;
}
main.shkafy-page > section.shkafy-section-label .shkafy-section-title,
main.shkafy-page > section.chel-section.kru-hero-section .kru-hero-row,
main.shkafy-page > section.chel-section .grid-2.kru-spec-grid,
main.shkafy-page > section.kru-actions-section .hero-actions{
margin-top: 5px !important;
margin-bottom: 5px !important;
}
main.shkafy-page > section.chel-section.kru-hero-section .kru-hero-row,
main.shkafy-page > section.chel-section .grid-2.kru-spec-grid,
main.shkafy-page > section.chel-section .grid-left-stack{
gap: 5px !important;
column-gap: 5px !important;
row-gap: 5px !important;
}
main.shkafy-page > section.chel-section.kru-hero-section .cardBox,
main.shkafy-page > section.chel-section .cardBox{
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* FIX: make the visible gap between repeated sections exactly ~5px */
main.shkafy-page > section.shkafy-section-label{
padding-top: 5px !important;
padding-bottom: 0 !important;
margin: 0 !important;
}
main.shkafy-page > section.shkafy-section-label + section.chel-section.kru-hero-section{
padding-top: 5px !important;
padding-bottom: 0 !important;
margin: 0 !important;
}
main.shkafy-page > section.chel-section.kru-hero-section + section.chel-section{
padding-top: 5px !important;
padding-bottom: 5px !important;
margin: 0 !important;
}
main.shkafy-page > section.kru-actions-section{
padding-top: 5px !important;
padding-bottom: 0 !important;
margin: 0 !important;
}
main.shkafy-page > section.kru-actions-section + section.shkafy-section-label{
padding-top: 5px !important;
}
main.shkafy-page > section.shkafy-section-label .container,
main.shkafy-page > section.chel-section.kru-hero-section .container,
main.shkafy-page > section.chel-section .container,
main.shkafy-page > section.kru-actions-section .container{
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
main.shkafy-page > section.shkafy-section-label .shkafy-section-title,
main.shkafy-page > section.chel-section.kru-hero-section .kru-hero-row,
main.shkafy-page > section.chel-section .grid-2.kru-spec-grid,
main.shkafy-page > section.kru-actions-section .hero-actions{
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Fix SHNT modal empty gap and divider */
#sectionModal1 hr,
#sectionModal1 .detail-figure:empty,
#sectionModal1 .detail-figure img[src=""],
#sectionModal1 .detail-copy hr{
display:none !important;
}
#sectionModal1 .detail-figure{
margin:0 !important;
padding:0 !important;
border:0 !important;
min-height:0 !important;
}
#sectionModal1 .detail-section{
overflow:hidden;
}
/* FIX modal radius */
.modal-content {
border-radius: 16px !important;
overflow: hidden;
}
.modal-dialog {
overflow: visible;
}
/* Strong fix for rounded modal corners on all detail popups */
.detail-backdrop{
overflow: hidden !important;
}
.detail-modal-shell{
border-radius: 28px !important;
overflow: hidden !important;
-webkit-mask-image: -webkit-radial-gradient(white, black) !important;
clip-path: inset(0 round 28px) !important;
background: #fff !important;
}
.detail-modal-header{
border-top-left-radius: 28px !important;
border-top-right-radius: 28px !important;
overflow: hidden !important;
}
.detail-modal-body{
border-bottom-left-radius: 28px !important;
border-bottom-right-radius: 28px !important;
overflow: auto !important;
scrollbar-gutter: stable both-edges !important;
background: #fff !important;
}
.detail-modal-footer{
border-bottom-left-radius: 28px !important;
border-bottom-right-radius: 28px !important;
overflow: hidden !important;
background: #fff !important;
}
/* kiosk popup too */
#kioskPopup .popup-content{
border-radius: 28px !important;
overflow: hidden !important;
clip-path: inset(0 round 28px) !important;
}
/* targeted vertical gap after buttons before next section title */
.kru-actions-under-params,
.kru-actions-section .container,
.kru-actions-section .hero-actions{
margin-bottom: 20px !important;
}
.shkafy-page .kru-actions-section + .shkafy-section-label{
margin-top: 20px !important;
}
.shkafy-page .kru-actions-section + .shkafy-section-label .container{
margin-top: 0 !important;
}
/* hide scrollbar arrows (keep only scrollbar) */
.detail-modal-body::-webkit-scrollbar-button {
display: none !important;
height: 0;
width: 0;
}
.detail-modal-body::-webkit-scrollbar {
width: 8px;
}
.detail-modal-body::-webkit-scrollbar-thumb {
border-radius: 8px;
}
/* STRONG hide scrollbar arrows everywhere */
.detail-modal-body::-webkit-scrollbar-button,
.detail-modal-body::-webkit-scrollbar-button:single-button,
.detail-modal-body::-webkit-scrollbar-button:double-button,
.detail-modal-body::-webkit-scrollbar-button:start,
.detail-modal-body::-webkit-scrollbar-button:end {
display: none !important;
width: 0 !important;
height: 0 !important;
}
/* remove space reserved for arrows */
.detail-modal-body::-webkit-scrollbar-track-piece:start {
margin-top: 0 !important;
}
.detail-modal-body::-webkit-scrollbar-track-piece:end {
margin-bottom: 0 !important;
}
/* ensure clean scrollbar */
.detail-modal-body {
scrollbar-width: thin; /* Firefox */
}
/* BROAD scrollbar arrow removal for all modal scroll containers */
.detail-modal-shell,
.detail-modal-body,
.detail-backdrop,
.section-empty-modal,
.popup-content,
#kioskPopup,
#kioskPopup .popup-content {
scrollbar-width: thin !important; /* Firefox */
scrollbar-color: rgba(16,34,62,.35) transparent !important;
}
/* Chromium / WebKit */
.detail-modal-shell::-webkit-scrollbar,
.detail-modal-body::-webkit-scrollbar,
.detail-backdrop::-webkit-scrollbar,
.section-empty-modal::-webkit-scrollbar,
.popup-content::-webkit-scrollbar,
#kioskPopup::-webkit-scrollbar,
#kioskPopup .popup-content::-webkit-scrollbar {
width: 8px !important;
height: 8px !important;
}
.detail-modal-shell::-webkit-scrollbar-thumb,
.detail-modal-body::-webkit-scrollbar-thumb,
.detail-backdrop::-webkit-scrollbar-thumb,
.section-empty-modal::-webkit-scrollbar-thumb,
.popup-content::-webkit-scrollbar-thumb,
#kioskPopup::-webkit-scrollbar-thumb,
#kioskPopup .popup-content::-webkit-scrollbar-thumb {
border-radius: 999px !important;
background: rgba(16,34,62,.35) !important;
}
.detail-modal-shell::-webkit-scrollbar-track,
.detail-modal-body::-webkit-scrollbar-track,
.detail-backdrop::-webkit-scrollbar-track,
.section-empty-modal::-webkit-scrollbar-track,
.popup-content::-webkit-scrollbar-track,
#kioskPopup::-webkit-scrollbar-track,
#kioskPopup .popup-content::-webkit-scrollbar-track {
background: transparent !important;
}
/* hide every scrollbar button state */
.detail-modal-shell::-webkit-scrollbar-button,
.detail-modal-body::-webkit-scrollbar-button,
.detail-backdrop::-webkit-scrollbar-button,
.section-empty-modal::-webkit-scrollbar-button,
.popup-content::-webkit-scrollbar-button,
#kioskPopup::-webkit-scrollbar-button,
#kioskPopup .popup-content::-webkit-scrollbar-button,
.detail-modal-shell::-webkit-scrollbar-button:single-button,
.detail-modal-body::-webkit-scrollbar-button:single-button,
.detail-backdrop::-webkit-scrollbar-button:single-button,
.section-empty-modal::-webkit-scrollbar-button:single-button,
.popup-content::-webkit-scrollbar-button:single-button,
#kioskPopup::-webkit-scrollbar-button:single-button,
#kioskPopup .popup-content::-webkit-scrollbar-button:single-button,
.detail-modal-shell::-webkit-scrollbar-button:double-button,
.detail-modal-body::-webkit-scrollbar-button:double-button,
.detail-backdrop::-webkit-scrollbar-button:double-button,
.section-empty-modal::-webkit-scrollbar-button:double-button,
.popup-content::-webkit-scrollbar-button:double-button,
#kioskPopup::-webkit-scrollbar-button:double-button,
#kioskPopup .popup-content::-webkit-scrollbar-button:double-button,
.detail-modal-shell::-webkit-scrollbar-button:vertical:start:decrement,
.detail-modal-body::-webkit-scrollbar-button:vertical:start:decrement,
.detail-backdrop::-webkit-scrollbar-button:vertical:start:decrement,
.section-empty-modal::-webkit-scrollbar-button:vertical:start:decrement,
.popup-content::-webkit-scrollbar-button:vertical:start:decrement,
#kioskPopup::-webkit-scrollbar-button:vertical:start:decrement,
#kioskPopup .popup-content::-webkit-scrollbar-button:vertical:start:decrement,
.detail-modal-shell::-webkit-scrollbar-button:vertical:end:increment,
.detail-modal-body::-webkit-scrollbar-button:vertical:end:increment,
.detail-backdrop::-webkit-scrollbar-button:vertical:end:increment,
.section-empty-modal::-webkit-scrollbar-button:vertical:end:increment,
.popup-content::-webkit-scrollbar-button:vertical:end:increment,
#kioskPopup::-webkit-scrollbar-button:vertical:end:increment,
#kioskPopup .popup-content::-webkit-scrollbar-button:vertical:end:increment {
display: none !important;
width: 0 !important;
height: 0 !important;
background: transparent !important;
}
/* remove any reserved button spacing */
.detail-modal-shell::-webkit-scrollbar-track-piece,
.detail-modal-body::-webkit-scrollbar-track-piece,
.detail-backdrop::-webkit-scrollbar-track-piece,
.section-empty-modal::-webkit-scrollbar-track-piece,
.popup-content::-webkit-scrollbar-track-piece,
#kioskPopup::-webkit-scrollbar-track-piece,
#kioskPopup .popup-content::-webkit-scrollbar-track-piece {
margin: 0 !important;
}
/* NCU title in one line */
h1{
white-space: nowrap;
}
/* page layout like shkafy for NKU / ASU / KSO / KTP */
body:has(.kru-spec-grid) .kru-actions-section{
padding-top: 18px !important;
padding-bottom: 0 !important;
margin-bottom: 20px !important;
}
body:has(.kru-spec-grid) .kru-actions-under-params{
margin-bottom: 20px !important;
}
body:has(.kru-spec-grid) .hero-actions{
margin-top: 0 !important;
margin-bottom: 20px !important;
}
body:has(.kru-spec-grid) .kru-spec-grid{
gap: 20px !important;
margin-top: 0 !important;
}
body:has(.kru-spec-grid) .grid-left-stack{
display:flex !important;
flex-direction:column !important;
gap: 20px !important;
}
body:has(.kru-spec-grid) .kru-spec-grid > .cardBox,
body:has(.kru-spec-grid) .kru-spec-grid .grid-left-stack > .cardBox{
margin: 0 !important;
}
/* FIX: equal height trust cards */
.trust-card{
display:flex;
flex-direction:column;
justify-content:space-between;
height:100%;
}
.trust-card p{
min-height:60px;
}
/* FINAL FIX: trust cards alignment */
.trust-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
height: 100%;
padding: 20px;
}
.trust-card p {
margin-top: auto;
min-height: 72px;
display: flex;
align-items: center;
justify-content: center;
}
/* precise baseline alignment for trust cards on home page */
.partners-grid{
align-items: stretch !important;
}
.partners-grid > *{
height: 100% !important;
}
.partners-grid .cardBox{
display: grid !important;
grid-template-rows: auto 92px 1fr !important;
align-items: start !important;
height: 100% !important;
}
.partners-grid .cardBox > *:nth-child(1){
align-self: start !important;
}
.partners-grid .cardBox img,
.partners-grid .cardBox picture,
.partners-grid .cardBox .partner-logo,
.partners-grid .cardBox .logo-wrap{
align-self: center !important;
justify-self: center !important;
max-height: 72px !important;
}
.partners-grid .cardBox p,
.partners-grid .cardBox .muted,
.partners-grid .cardBox .text,
.partners-grid .cardBox .partner-text{
align-self: start !important;
margin: 0 !important;
}
/* exact alignment for project cards on home page */
.projects-grid{
align-items: stretch !important;
}
.projects-grid .proj-card{
display: grid !important;
grid-template-rows: 64px 92px 1fr !important;
align-items: start !important;
height: 100% !important;
}
.projects-grid .proj-title{
margin: 0 !important;
min-height: 64px !important;
display: flex !important;
align-items: flex-start !important;
justify-content: center !important;
text-align: center !important;
}
.projects-grid .proj-logo{
width: auto !important;
max-width: 180px !important;
max-height: 72px !important;
align-self: center !important;
justify-self: center !important;
object-fit: contain !important;
}
.projects-grid .proj-text{
margin: 0 !important;
align-self: start !important;
text-align: center !important;
line-height: 1.5 !important;
}
/* exact alignment for cards on projects page */
.projectsGrid{
align-items: stretch !important;
}
.projectsGrid > *{
height: 100% !important;
}
.projectsGrid .projectCard,
.projectsGrid .proj-card{
display: grid !important;
grid-template-rows: 64px 92px 1fr !important;
align-items: start !important;
height: 100% !important;
}
.projectsGrid .projectTitle,
.projectsGrid .proj-title{
margin: 0 !important;
min-height: 64px !important;
display: flex !important;
align-items: flex-start !important;
justify-content: center !important;
text-align: center !important;
}
.projectsGrid img,
.projectsGrid .proj-logo{
width: auto !important;
max-width: 180px !important;
max-height: 72px !important;
align-self: center !important;
justify-self: center !important;
object-fit: contain !important;
}
.projectsGrid .projectCard p,
.projectsGrid .projectText,
.projectsGrid .proj-text{
margin: 0 !important;
align-self: start !important;
text-align: center !important;
line-height: 1.5 !important;
}
/* increase logos in trust + projects cards */
.projects-grid .proj-logo,
.projectsGrid .proj-logo,
.projectsGrid img{
max-height: 100px !important;
max-width: 220px !important;
}
/* increase logos even more */
.projects-grid .proj-logo,
.projectsGrid .proj-logo,
.projectsGrid img{
max-height: 120px !important;
max-width: 260px !important;
}
/* MAX size logos */
.projects-grid .proj-logo,
.projectsGrid .proj-logo,
.projectsGrid img{
max-height: 140px !important;
max-width: 300px !important;
}
/* unified bottom footer block for product pages */
.footer-simple{
margin-top: 40px;
padding: 28px 0 34px;
border-top: 1px solid #d8dee9;
background: #fff;
}
.footer-simple__inner{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
text-align: center;
}
.footer-simple__contacts{
color: #5b6983;
line-height: 1.6;
font-size: 15px;
}
.footer-simple__copyright{
color: #6b7891;
line-height: 1.5;
font-size: 14px;
}
@media (max-width: 767px){
.footer-simple{
padding: 22px 0 28px;
}
.footer-simple__contacts{
font-size: 14px;
}
.footer-simple__copyright{
font-size: 13px;
}
}
/* gallery page */
.gallery-grid{
display:grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 18px;
}
.gallery-card{
border:1px solid var(--line);
border-radius: 20px;
background:#fff;
overflow:hidden;
min-height: 320px;
}
.gallery-card__img{
display:block;
width:100%;
height:100%;
min-height:320px;
object-fit:cover;
}
@media (max-width: 980px){
.gallery-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
.gallery-grid{ grid-template-columns: 1fr; }
.gallery-card,
.gallery-card__img{ min-height:260px; }
}
/* Gallery cards ratio 5:7 */
.gallery-card{
aspect-ratio: 5 / 7;
overflow: hidden;
}
.gallery-card__img{
width:100%;
height:100%;
object-fit:cover;
}
/* gallery lightbox */
.gallery-card--zoom{
cursor: zoom-in;
}
.gallery-lightbox{
position: fixed;
inset: 0;
z-index: 1200;
display: none;
}
.gallery-lightbox.is-open{
display: block;
}
.gallery-lightbox__backdrop{
position: absolute;
inset: 0;
border: 0;
width: 100%;
height: 100%;
background: rgba(9, 16, 29, .72);
cursor: zoom-out;
}
.gallery-lightbox__dialog{
position: absolute;
inset: 24px;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.gallery-lightbox__img{
max-width: min(92vw, 1400px);
max-height: 90vh;
width: auto;
height: auto;
border-radius: 18px;
box-shadow: 0 24px 60px rgba(0,0,0,.35);
background: #fff;
pointer-events: auto;
}
.gallery-lightbox__close{
position: absolute;
top: 8px;
right: 8px;
width: 48px;
height: 48px;
border: 0;
border-radius: 999px;
background: rgba(255,255,255,.95);
color: #111827;
font-size: 26px;
line-height: 1;
cursor: pointer;
box-shadow: 0 10px 24px rgba(0,0,0,.18);
pointer-events: auto;
}
@media (max-width: 640px){
.gallery-lightbox__dialog{
inset: 12px;
}
.gallery-lightbox__close{
top: 0;
right: 0;
}
}
/* ASU / KSO / KTP: single image instead of slider */
.asu-page .product-slider-arrow,
.asu-page .product-slider-dots,
.asu-page .dot,
.kso-page .product-slider-arrow,
.kso-page .product-slider-dots,
.kso-page .dot,
.ktp-page .product-slider-arrow,
.ktp-page .product-slider-dots,
.ktp-page .dot{
display: none !important;
}
.asu-page .product-slide--single,
.kso-page .product-slide--single,
.ktp-page .product-slide--single{
display: block;
width: 100%;
height: auto;
object-fit: contain;
}
/* NKU: single image instead of slider */
.nku-page .product-slider-arrow,
.nku-page .product-slider-dots,
.nku-page .dot{
display: none !important;
}
.nku-page .product-slide--single{
display: block;
width: 100%;
height: auto;
object-fit: contain;
}
/* Single static product image for NKU / ASU / KSO / KTP */
.product-slider-frame--single{
padding: 16px;
}
.product-single-image{
width: 100%;
border-radius: 18px;
overflow: hidden;
background: #f5f6f8;
display: flex;
justify-content: center;
align-items: center;
}
.product-single-image img{
display: block;
margin: 0 auto;
}
.product-single-image img{
display: block;
width: 100%;
height: auto;
object-fit: contain;
}
.nku-page .product-slider-arrow,
.nku-page .product-slider-dots,
.nku-page .dot,
.asu-page .product-slider-arrow,
.asu-page .product-slider-dots,
.asu-page .dot,
.kso-page .product-slider-arrow,
.kso-page .product-slider-dots,
.kso-page .dot,
.ktp-page .product-slider-arrow,
.ktp-page .product-slider-dots,
.ktp-page .dot{
display: none !important;
}
/* Static product pages (NKU / ASU / KSO / KTP):
do not stretch the left photo card to the height of the right text card */
.nku-page .kru-hero-row,
.asu-page .kru-hero-row,
.kso-page .kru-hero-row,
.ktp-page .kru-hero-row{
align-items: flex-start !important;
}
.nku-page .kru-hero-row .product-slider-frame,
.asu-page .kru-hero-row .product-slider-frame,
.kso-page .kru-hero-row .product-slider-frame,
.ktp-page .kru-hero-row .product-slider-frame{
align-self: flex-start !important;
height: auto !important;
}
.nku-page .product-slider-frame--single,
.asu-page .product-slider-frame--single,
.kso-page .product-slider-frame--single,
.ktp-page .product-slider-frame--single{
height: auto !important;
aspect-ratio: auto !important;
}
@media (max-width: 640px){
.gallery-grid{grid-template-columns:1fr;}
.gallery-card img{height:auto;}
}
/* Gallery grid */
.gallery-grid{
display:grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
gap:24px;
margin-top:28px;
}
.gallery-card{
display:block;
background:#fff;
border:1px solid #d9dee8;
border-radius:20px;
overflow:hidden;
box-shadow:0 4px 16px rgba(16,34,62,.06);
height:100%;
}
.gallery-card img{
display:block;
width:100%;
height:100%;
min-height:320px;
object-fit:cover;
}
@media (max-width: 1024px){
.gallery-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
}
@media (max-width: 640px){
.gallery-grid{grid-template-columns:1fr;}
.gallery-card img{min-height:260px;}
}
/* Gallery lightbox */
body.lightbox-open{
overflow:hidden;
}
.gallery-lightbox{
position:fixed;
inset:0;
display:none;
align-items:center;
justify-content:center;
z-index:9999;
}
.gallery-lightbox.is-open{
display:flex;
}
.gallery-lightbox__backdrop{
position:absolute;
inset:0;
background:rgba(0,0,0,.82);
}
.gallery-lightbox__content{
position:relative;
z-index:1;
width:min(92vw, 1400px);
height:min(88vh, 900px);
display:flex;
align-items:center;
justify-content:center;
padding:20px;
box-sizing:border-box;
}
.gallery-lightbox__image{
max-width:100%;
max-height:100%;
width:auto;
height:auto;
display:block;
border-radius:12px;
box-shadow:0 12px 40px rgba(0,0,0,.35);
}
/* Shkafy page: disable slider UI */
.shkafy-page .product-slider-arrow,
.shkafy-page .product-slider-dots,
.shkafy-page .dot{
display:none !important;
}
.nav-menu{
display:flex;
align-items:center;
gap:32px;
}
.nav-menu a{
margin:0;
white-space:nowrap;
}
/* FIX menu spacing */
.nav-menu{
display:flex;
align-items:center;
gap:28px;
}
/* HERO FINAL FIX */
.hero{
position:relative;
height:100vh;
overflow:hidden;
display:flex;
align-items:center;
}
.hero video{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
z-index:0;
}
.hero .container,
.hero-content{
position:relative;
z-index:2;
}
.hero::after{
content:"";
position:absolute;
inset:0;
background:rgba(0,0,0,0.4);
z-index:1;
}