/* Шрифты подключаются через в каждой страницы (preconnect + stylesheet) — быстрее, чем @import */
/* SSF Breakthrough — акцентный шрифт. Используется только Bold (700) в
.font-breakthrough; остальные начертания были мёртвыми и удалены. */
@font-face {
font-family: 'SSF Breakthrough';
src: url('/fonts/SSFBreakthrough-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
.font-breakthrough {
font-family: 'SSF Breakthrough', 'Fredoka One Cyrillic', 'Playfair Display', serif !important;
font-weight: 700;
}
/* Fredoka One Cyrillic — основной шрифт заголовков */
@font-face {
font-family: 'Fredoka One Cyrillic';
src: url('/fonts/FredokaOneCyrillic-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* Nautilus Pompilius — локальный шрифт (резервный вариант заголовка) */
@font-face {
font-family: 'Nautilus Pompilius';
/* woff2/woff в репозитории битые (174 байта) — используем otf/ttf */
src: url('/fonts/NautilusPompilius-Regular.otf') format('opentype'),
url('/fonts/NautilusPompilius-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* Sweet Mavka Script — локальный шрифт для заголовка hero */
@font-face {
font-family: 'Sweet Mavka Script';
/* woff2/woff в репозитории битые (174 байта) — используем otf/ttf */
src: url('/fonts/SweetMavkaScript-Regular.otf') format('opentype'),
url('/fonts/SweetMavkaScript-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* TM Vinograd — обычное (контурное) начертание */
@font-face {
font-family: 'TM Vinograd';
src: url('/fonts/TMVinograd-Regular.otf') format('opentype'),
url('/fonts/TMVinograd-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
:root {
--red: #D32027;
--red-dark: #B01A20;
--red-light: #F5E6E7;
--gold: #C9A24B;
--gold-light: #F5E9D0;
--beige: #F7F1E6;
--dark: #1C1C1C;
--gray: #5F6571; /* a11y: 5.2:1 на бежевом, 5.9:1 на белом (было #6B7280 = 4.3 на бежевом) */
--gray-light: #F3F4F6;
--white: #FFFFFF;
/* Шкала z-index — единый источник порядка наложения слоёв (значения сохранены) */
--z-header: 100;
--z-mobile-menu: 150;
--z-cart-overlay: 200;
--z-cart-drawer: 201;
--z-modal: 300;
--z-toast: 400;
--z-quickview: 2000;
}
* { box-sizing: border-box; }
body {
font-family: 'Inter', sans-serif;
color: var(--dark);
background: var(--white);
margin: 0;
-webkit-font-smoothing: antialiased;
overscroll-behavior-y: contain;
overflow-x: hidden;
}
/* Убираем 300ms задержку кликов на мобильных */
a, button, [role="button"], label, input, select, textarea {
touch-action: manipulation;
}
/* ===== ACCESSIBILITY: Focus states ===== */
:focus-visible {
outline: 2px solid var(--red);
outline-offset: 3px;
border-radius: 4px;
}
a:focus-visible, button:focus-visible {
outline: 2px solid var(--red);
outline-offset: 3px;
}
/* ===== ACCESSIBILITY: Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation: none !important;
transition: none !important;
}
.fade-in { opacity: 1 !important; transform: none !important; }
}
/* ===== МИКРОАНИМАЦИИ: кнопки ===== */
.btn-primary:active, .btn-gold:active, .btn-secondary:active, .btn-sm:active {
transform: translateY(1px) scale(0.98) !important;
transition-duration: 0.08s !important;
}
/* ===== CART BADGE POP ===== */
@keyframes badge-pop {
0% { transform: scale(1); }
40% { transform: scale(1.45); }
70% { transform: scale(0.9); }
100% { transform: scale(1); }
}
.cart-badge--pop {
animation: badge-pop 0.32s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
/* ===== SOLDOUT card ===== */
.product-card--soldout {
opacity: 0.85;
}
.product-card--soldout:hover {
transform: none;
box-shadow: 0 2px 16px rgba(0,0,0,0.06);
cursor: default;
}
/* ===== HEADER: compact on scroll ===== */
.site-header.scrolled .header-main {
padding: 6px 0;
transition: padding 0.3s ease;
}
.site-header .header-main {
transition: padding 0.3s ease;
}
.site-header.scrolled .site-logo-img {
transform: scale(0.82);
}
h1, h2, h3, h4 {
font-family: 'Fredoka One Cyrillic', 'Playfair Display', serif;
line-height: 1.25;
}
/* ===== HEADER ===== */
.site-header {
position: sticky;
top: 0;
z-index: var(--z-header);
background: var(--white);
border-bottom: 1px solid #F0E8D8;
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.header-top {
display: none;
background: var(--white);
color: var(--dark);
font-size: 0.78rem;
padding: 6px 0;
border-bottom: 1px solid #F0E8D8;
}
.header-top a { color: var(--dark) !important; }
.header-top span { color: var(--gray) !important; }
.header-top svg { stroke: var(--dark) !important; }
/* Контакты в основной шапке (телефон + часы, справа у кнопки «Заявка») */
.header-contact {
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
line-height: 1.2;
margin-right: 4px;
}
.header-phone {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--dark);
text-decoration: none;
font-weight: 700;
font-size: 0.95rem;
white-space: nowrap;
transition: color 0.2s;
}
.header-phone:hover { color: var(--red); }
.header-phone svg {
width: 15px;
height: 15px;
fill: none;
stroke: var(--red);
stroke-width: 1.8;
flex-shrink: 0;
}
.header-hours {
font-size: 0.72rem;
color: var(--gray);
white-space: nowrap;
}
.header-main {
padding: 10px 0;
}
/* ===== LOGO ===== */
.logo {
font-family: 'Playfair Display', serif;
font-size: 1.25rem;
font-weight: 400;
color: var(--dark);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0;
letter-spacing: 0.2px;
line-height: 1;
}
.logo::before { display: none; }
.logo-mark {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-right: 10px;
}
.logo-mark img { display: block; }
.logo span {
font-weight: 700;
color: var(--red);
font-style: normal;
text-transform: uppercase;
letter-spacing: 3px;
font-size: 0.9rem;
margin-left: 7px;
}
.footer-logo {
font-family: 'Playfair Display', serif;
font-size: 1.25rem;
font-weight: 400;
color: var(--white);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0;
margin-bottom: 14px;
letter-spacing: 0.2px;
line-height: 1;
}
.footer-logo::before { display: none; }
.footer-logo-mark {
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-right: 10px;
}
/* Full logo image in header */
.site-logo-img {
height: 64px;
width: auto;
display: block;
max-width: 280px;
object-fit: contain;
transition: transform 0.3s ease;
transform-origin: left center;
}
/* Footer logo */
.footer-logo-img {
width: 140px;
height: auto;
display: block;
object-fit: contain;
}
.footer-logo span {
font-weight: 700;
color: var(--gold);
font-style: normal;
text-transform: uppercase;
letter-spacing: 3px;
font-size: 0.9rem;
margin-left: 7px;
}
.nav-link {
color: var(--dark);
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
transition: color 0.2s;
}
.nav-link:hover { color: var(--red); }
.nav-link.active { color: var(--red); }
/* ===== BUTTONS ===== */
.btn-primary {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--red);
color: var(--white);
padding: 12px 28px;
border-radius: 8px;
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
border: none;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
}
.btn-primary:hover {
background: var(--red-dark);
transform: translateY(-1px);
}
/* Кнопка hero — пилюля, шрифт Nautilus Pompilius */
.btn-hero {
border-radius: 999px;
font-family: 'Nautilus Pompilius', 'Playfair Display', serif;
letter-spacing: 0.5px;
}
.btn-secondary {
display: inline-flex;
align-items: center;
gap: 8px;
background: transparent;
color: var(--red);
padding: 11px 28px;
border-radius: 8px;
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
border: 2px solid var(--red);
cursor: pointer;
transition: all 0.2s;
}
.btn-secondary:hover {
background: var(--red);
color: var(--white);
}
.btn-gold {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--gold);
color: var(--white);
padding: 12px 28px;
border-radius: 8px;
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
border: none;
cursor: pointer;
transition: all 0.2s;
}
.btn-gold:hover {
background: #b88d3a;
box-shadow: 0 0 22px rgba(201,162,75,0.55);
transform: scale(1.03);
}
/* ===== CART BADGE ===== */
.cart-btn {
position: relative;
background: var(--red);
color: var(--white);
border: none;
border-radius: 8px;
padding: 10px 18px;
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: background 0.2s;
text-decoration: none;
}
.cart-btn:hover { background: var(--red-dark); }
.cart-badge {
background: var(--gold);
color: var(--white);
border-radius: 50%;
width: 20px;
height: 20px;
font-size: 0.7rem;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
}
/* ===== HERO ===== */
.hero {
background: linear-gradient(135deg, #1C1C1C 0%, #2d1a1a 50%, #3a1a1a 100%);
color: var(--white);
min-height: 85vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
/* Фоновое видео */
.hero-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
pointer-events: none;
}
/* Тёмный оверлей поверх видео — читаемость текста */
.hero::before {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(90deg, rgba(28,28,28,0.72) 0%, rgba(28,28,28,0.42) 45%, rgba(28,28,28,0.15) 100%),
linear-gradient(180deg, rgba(28,28,28,0.12) 0%, rgba(28,28,28,0.00) 30%, rgba(28,28,28,0.40) 100%);
pointer-events: none;
}
/* Контент поверх видео и оверлея */
/* Герой: текст прижат к левому краю, а не центрируется в контейнере 1200px
(иначе на широких мониторах блок уезжает к центру). Полная ширина + левый
отступ, который плавно растёт с шириной экрана. */
.hero .container {
position: relative;
z-index: 2;
max-width: none;
margin: 0;
padding-left: clamp(20px, 5vw, 80px);
padding-right: 20px;
}
.hero-subtitle {
color: var(--gold);
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 16px;
}
.hero h1 {
font-family: 'TM Vinograd', 'Playfair Display', serif;
font-size: clamp(2.2rem, 5vw, 3.8rem);
line-height: 1.15;
margin-bottom: 24px;
color: var(--gold);
}
.hero h1 em {
color: var(--gold);
font-style: normal;
}
.hero-desc {
font-size: 1.1rem;
color: rgba(255,255,255,0.8);
max-width: 520px;
line-height: 1.7;
margin-bottom: 36px;
}
/* Чеклист преимуществ в hero */
.hero-checklist {
list-style: none;
margin: 0 0 36px;
padding: 0;
display: flex;
flex-direction: column;
gap: 16px;
max-width: 560px;
}
.hero-checklist li {
display: flex;
align-items: center;
gap: 14px;
font-family: 'Sweet Mavka Script', 'Playfair Display', serif;
font-size: 1.5rem;
line-height: 1.4;
color: rgba(255,255,255,0.92);
}
.hero-checklist strong {
color: var(--white);
font-weight: 700;
}
.hero-ico {
flex-shrink: 0;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.hero-ico svg {
width: 26px;
height: 26px;
fill: none;
stroke: var(--gold);
stroke-width: 1.7;
}
.hero-stats {
display: flex;
gap: 32px;
margin-top: 48px;
padding-top: 32px;
border-top: 1px solid rgba(255,255,255,0.1);
}
.hero-stat-num {
font-family: 'Playfair Display', serif;
font-size: 2rem;
font-weight: 700;
color: var(--gold);
}
.hero-stat-label {
font-size: 0.8rem;
color: rgba(255,255,255,0.6);
margin-top: 2px;
}
/* ===== SECTIONS ===== */
.section { padding: 80px 0; }
.section-beige { background: var(--beige); }
.section-red { background: var(--red); }
.section-tag {
display: inline-block;
background: var(--gold-light);
color: var(--gold);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 6px 14px;
border-radius: 20px;
margin-bottom: 12px;
}
.section-title {
font-size: clamp(1.8rem, 3.5vw, 2.6rem);
margin-bottom: 16px;
}
.section-desc {
color: var(--gray);
font-size: 1rem;
max-width: 560px;
line-height: 1.7;
}
/* ===== PRODUCT CARDS ===== */
.product-card {
background: var(--white);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 2px 16px rgba(0,0,0,0.06);
transition: transform 0.2s ease, box-shadow 0.2s ease;
display: flex;
flex-direction: column;
cursor: pointer;
}
.product-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
.product-card-img {
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
background: var(--beige);
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
}
.product-card-body {
padding: 20px;
flex: 1;
display: flex;
flex-direction: column;
}
.product-card-cat {
font-size: 0.75rem;
color: var(--gray);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 6px;
}
.product-card-title {
font-family: 'Fredoka One Cyrillic', 'Playfair Display', serif;
font-size: 1.15rem;
font-weight: 400;
line-height: 1.25;
margin-bottom: 8px;
color: var(--dark);
/* Фиксируем высоту под 3 строки, чтобы карточки не «ходили ходуном»
и длинные названия не обрезались */
min-height: 4.3rem;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.product-card-weight {
font-size: 0.85rem;
color: var(--gray);
margin-bottom: 8px;
min-height: 1.2rem;
}
.product-card-price {
font-size: 0.85rem;
color: var(--gold);
font-weight: 600;
margin-bottom: 14px;
min-height: 1.4rem;
display: flex;
align-items: center;
}
.product-card-actions {
display: flex;
gap: 8px;
margin-top: auto;
}
.btn-sm {
padding: 8px 14px;
font-size: 0.82rem;
border-radius: 7px;
font-weight: 600;
}
/* ===== ADVANTAGES ===== */
.advantage-card {
text-align: center;
padding: 32px 24px;
background: var(--white);
border-radius: 16px;
box-shadow: 0 2px 16px rgba(0,0,0,0.05);
transition: transform 0.2s ease, box-shadow 0.2s ease;
border: 1.5px solid transparent;
}
.advantage-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 32px rgba(0,0,0,0.10);
border-color: var(--gold-light);
}
.advantage-icon {
margin-bottom: 16px;
display: flex;
justify-content: center;
}
.advantage-icon svg {
width: 48px;
height: 48px;
}
.advantage-title {
font-family: 'Fredoka One Cyrillic', 'Playfair Display', serif;
font-size: 1.1rem;
font-weight: 400;
margin-bottom: 8px;
}
.advantage-text {
font-size: 0.88rem;
color: var(--gray);
line-height: 1.6;
}
/* ===== STEPS ===== */
.step {
display: flex;
gap: 20px;
align-items: flex-start;
}
.step-num {
width: 48px;
height: 48px;
min-width: 48px;
background: var(--red);
color: var(--white);
font-family: 'Playfair Display', serif;
font-size: 1.3rem;
font-weight: 700;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.step-title {
font-family: 'Playfair Display', serif;
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 4px;
}
.step-text { font-size: 0.88rem; color: var(--gray); line-height: 1.6; }
/* ===== STEP CARDS (redesigned) ===== */
.step-card {
background: white;
border-radius: 20px;
padding: 32px 24px 28px;
text-align: center;
box-shadow: 0 4px 24px rgba(0,0,0,0.07);
position: relative;
border: 1.5px solid #F0E8D8;
transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.step-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 36px rgba(0,0,0,0.13);
border-color: var(--gold-light);
}
.step-arrow {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
z-index: 2;
pointer-events: none;
line-height: 0;
}
.step-arrow svg {
width: 26px;
height: 26px;
fill: none;
stroke: var(--red);
stroke-width: 2;
display: block;
}
.step-num-badge {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
width: 30px;
height: 30px;
background: var(--red);
color: white;
border-radius: 50%;
font-size: 0.88rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Playfair Display', serif;
border: 3px solid var(--beige);
box-shadow: 0 2px 8px rgba(211,32,39,0.3);
}
.step-icon-bg {
width: 60px;
height: 60px;
background: var(--red-light);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 16px auto 16px;
}
.step-card-title {
font-family: 'Fredoka One Cyrillic', 'Playfair Display', serif;
font-size: 1.15rem;
font-weight: 400;
margin-bottom: 10px;
color: var(--dark);
}
.step-card-text {
font-size: 0.88rem;
color: var(--gray);
line-height: 1.65;
margin: 0;
}
/* ===== HERO TWO-COLUMN ===== */
.hero-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 60px;
width: 100%;
position: relative;
z-index: 1;
}
.hero-content { max-width: 720px; flex: 1; }
.hero-visual {
flex-shrink: 0;
width: 340px;
position: relative;
}
.hero-card {
background: rgba(255,255,255,0.07);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 24px;
padding: 28px;
animation: hero-float 4s ease-in-out infinite;
}
.hero-card-label {
color: var(--gold);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 6px;
}
.hero-card-title {
color: white;
font-family: 'Playfair Display', serif;
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 6px;
}
.hero-card-sub {
color: rgba(255,255,255,0.55);
font-size: 0.8rem;
margin-bottom: 16px;
}
.hero-badge {
position: absolute;
top: -18px;
right: -10px;
background: var(--gold);
border-radius: 14px;
padding: 12px 16px;
box-shadow: 0 6px 20px rgba(201,162,75,0.45);
}
.hero-badge-num {
color: white;
font-size: 1.5rem;
font-weight: 700;
font-family: 'Playfair Display', serif;
line-height: 1;
}
.hero-badge-label {
color: rgba(255,255,255,0.85);
font-size: 0.65rem;
margin-top: 2px;
}
.hero-candy {
display: flex;
gap: 8px;
margin-top: 16px;
}
.hero-candy-item {
flex: 1;
background: rgba(255,255,255,0.06);
border-radius: 10px;
padding: 10px 6px;
text-align: center;
}
.hero-candy-dot {
width: 32px;
height: 32px;
border-radius: 50%;
margin: 0 auto 6px;
}
.hero-candy-name {
color: rgba(255,255,255,0.5);
font-size: 0.62rem;
line-height: 1.3;
}
.hero-mini-stat {
position: absolute;
bottom: -16px;
left: -12px;
background: white;
border-radius: 12px;
padding: 10px 14px;
box-shadow: 0 6px 24px rgba(0,0,0,0.18);
display: flex;
align-items: center;
gap: 10px;
}
.hero-mini-stat-icon {
width: 32px;
height: 32px;
background: var(--red-light);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
}
.hero-mini-stat-num {
font-family: 'Playfair Display', serif;
font-size: 1.1rem;
font-weight: 700;
color: var(--dark);
line-height: 1;
}
.hero-mini-stat-label {
font-size: 0.7rem;
color: var(--gray);
}
@keyframes hero-float {
0%,100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
/* Hero balloons */
.hero-balloon {
position: absolute;
pointer-events: none;
z-index: 0;
animation: balloonSway ease-in-out infinite alternate;
}
@keyframes balloonSway {
0% { transform: translateY(0) rotate(-4deg); }
100% { transform: translateY(-14px) rotate(4deg); }
}
@media (max-width: 1024px) {
.hero-visual { display: none; }
.site-logo-img { height: 56px; max-width: 240px; }
.header-contact { display: none; }
}
@media (max-width: 640px) {
.site-logo-img { height: 48px; max-width: 200px; }
.header-main { padding: 8px 0; }
}
/* ===== CTA REDESIGN ===== */
.cta-section {
background: var(--red);
padding: 80px 0;
position: relative;
overflow: hidden;
}
.cta-section::before {
content: '';
position: absolute;
inset: 0;
background: url('data:image/svg+xml,') repeat;
background-size: 60px 60px;
}
.cta-inner {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 60px;
position: relative;
z-index: 1;
}
.cta-btns {
display: flex;
flex-direction: column;
gap: 12px;
min-width: 220px;
}
.btn-call {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: rgba(255,255,255,0.12);
color: white;
padding: 12px 28px;
border-radius: 8px;
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
border: 1.5px solid rgba(255,255,255,0.3);
cursor: pointer;
transition: all 0.2s;
font-family: 'Inter', sans-serif;
}
.btn-call:hover {
background: rgba(255,255,255,0.22);
border-color: rgba(255,255,255,0.5);
}
.cta-phone-popup {
position: absolute;
bottom: calc(100% + 10px);
left: 0;
background: white;
border-radius: 14px;
padding: 18px 20px;
box-shadow: 0 12px 40px rgba(0,0,0,0.2);
min-width: 240px;
display: none;
z-index: 10;
}
.cta-phone-popup.open { display: block; }
.cta-phone-popup::after {
content: '';
position: absolute;
top: 100%;
left: 28px;
border: 6px solid transparent;
border-top-color: white;
}
@media (max-width: 768px) {
.cta-inner { grid-template-columns: 1fr; gap: 32px; }
.cta-btns { flex-direction: row; flex-wrap: wrap; }
}
/* ===== COMPOSITION GRID ===== */
.composition-item {
background: var(--beige);
border-radius: 12px;
padding: 16px;
text-align: center;
}
.composition-img {
width: 72px;
height: 72px;
object-fit: cover;
border-radius: 50%;
background: var(--gold-light);
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
margin: 0 auto 10px;
}
.composition-qty {
display: inline-block;
background: var(--red);
color: var(--white);
font-size: 0.75rem;
font-weight: 700;
padding: 2px 8px;
border-radius: 20px;
margin-bottom: 6px;
}
.composition-name {
font-size: 0.8rem;
color: var(--dark);
font-weight: 500;
}
/* ===== CART PANEL ===== */
.cart-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.5);
z-index: var(--z-cart-overlay);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
}
.cart-overlay.open {
opacity: 1;
pointer-events: all;
}
.cart-drawer {
position: fixed;
top: 0;
right: 0;
height: 100vh;
width: min(420px, 100vw);
background: var(--white);
z-index: var(--z-cart-drawer);
transform: translateX(100%);
transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
display: flex;
flex-direction: column;
box-shadow: -8px 0 40px rgba(0,0,0,0.15);
}
.cart-drawer.open { transform: translateX(0); }
.cart-header {
padding: 24px;
border-bottom: 1px solid #F0E8D8;
display: flex;
align-items: center;
justify-content: space-between;
}
.cart-header h3 {
font-size: 1.3rem;
margin: 0;
}
.cart-close {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: var(--gray);
/* a11y: touch-target-size — минимум 44×44px */
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
.cart-items { flex: 1; overflow-y: auto; padding: 20px 24px; }
.cart-item {
display: flex;
gap: 14px;
align-items: center;
padding: 14px 0;
border-bottom: 1px solid #F0E8D8;
}
.cart-item-emoji {
font-size: 2.2rem;
min-width: 52px;
height: 52px;
background: var(--beige);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.cart-item-name { font-weight: 600; font-size: 0.9rem; margin-bottom: 4px; }
.cart-item-weight { font-size: 0.78rem; color: var(--gray); }
.qty-control {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
min-width: fit-content;
}
.qty-btn {
position: relative;
width: 28px;
height: 28px;
border-radius: 50%;
border: 1px solid #ddd;
background: var(--white);
font-size: 1rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: border-color 0.2s;
}
/* Невидимая зона нажатия 44×44px (a11y: touch-target-size) — визуал не меняется */
.qty-btn::after {
content: '';
position: absolute;
inset: -8px;
}
.qty-btn:hover { border-color: var(--red); color: var(--red); }
.qty-num {
font-weight: 600;
width: 44px;
text-align: center;
border: 1px solid #e0d8ce;
border-radius: 6px;
background: white;
font-size: 0.9rem;
font-family: inherit;
color: var(--dark);
padding: 3px 2px;
outline: none;
-moz-appearance: textfield;
}
.qty-num::-webkit-inner-spin-button,
.qty-num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.qty-num:focus { border-color: var(--red); }
.cart-remove {
background: none;
border: none;
color: #ccc;
cursor: pointer;
font-size: 1rem;
padding: 4px;
transition: color 0.2s;
}
.cart-remove:hover { color: var(--red); }
.cart-empty {
text-align: center;
padding: 60px 20px;
color: var(--gray);
}
.cart-empty-icon { font-size: 4rem; display: flex; justify-content: center; margin-bottom: 16px; }
.cart-footer {
padding: 24px;
border-top: 1px solid #F0E8D8;
background: var(--beige);
}
.cart-note {
font-size: 0.8rem;
color: var(--gray);
margin-bottom: 16px;
text-align: center;
}
/* ===== MODAL ===== */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
z-index: var(--z-modal);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.modal-overlay.open {
opacity: 1;
pointer-events: all;
}
.modal {
background: var(--white);
border-radius: 20px;
padding: 40px;
max-width: 520px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
transform: scale(0.95);
transition: transform 0.3s;
}
.modal-overlay.open .modal { transform: scale(1); }
.modal h2 { font-size: 1.6rem; margin-bottom: 8px; }
.modal-subtitle { color: var(--gray); margin-bottom: 28px; font-size: 0.9rem; }
/* ===== FORMS ===== */
.form-group { margin-bottom: 18px; }
.form-label {
display: block;
font-size: 0.85rem;
font-weight: 600;
color: var(--dark);
margin-bottom: 6px;
}
.form-required { color: var(--red); }
.form-input, .form-textarea {
width: 100%;
padding: 12px 16px;
border: 1.5px solid #E5DDD0;
border-radius: 8px;
font-family: 'Inter', sans-serif;
font-size: 0.95rem;
color: var(--dark);
background: var(--white);
transition: border-color 0.2s;
outline: none;
}
.form-input:focus, .form-textarea:focus {
border-color: var(--red);
}
.form-textarea { resize: vertical; min-height: 100px; }
.form-success {
text-align: center;
padding: 40px 20px;
}
.form-success-icon { font-size: 4rem; display: block; margin-bottom: 16px; }
/* ===== FOOTER ===== */
.site-footer {
background: var(--dark);
color: rgba(255,255,255,0.7);
padding: 0;
}
.footer-main-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
padding: 36px 0;
flex-wrap: wrap;
}
.footer-logo {
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
font-weight: 700;
color: var(--white);
text-decoration: none;
flex-shrink: 0;
}
.footer-logo span { color: var(--gold); }
.footer-nav-row {
display: flex;
align-items: center;
gap: 28px;
flex-wrap: wrap;
}
.footer-contacts-row {
display: flex;
align-items: center;
gap: 14px;
flex-shrink: 0;
}
.footer-phone-inline {
color: rgba(255,255,255,0.7);
text-decoration: none;
font-size: 0.9rem;
transition: color 0.2s;
white-space: nowrap;
}
.footer-phone-inline:hover { color: var(--gold); }
.footer-hours {
color: rgba(255,255,255,0.7);
font-size: 0.9rem;
white-space: nowrap;
}
.footer-link {
display: inline;
color: rgba(255,255,255,0.6);
text-decoration: none;
font-size: 0.88rem;
transition: color 0.2s;
}
.footer-link:hover { color: var(--gold); }
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.1);
padding: 20px 0;
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: space-between;
font-size: 0.8rem;
}
/* ===== FILTER TABS ===== */
.filter-tabs {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.filter-tab {
padding: 8px 20px;
border-radius: 24px;
border: 1.5px solid #E5DDD0;
background: var(--white);
font-size: 0.88rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
font-family: 'Inter', sans-serif;
color: var(--dark);
}
.filter-tab:hover { border-color: var(--red); color: var(--red); }
.filter-tab.active { background: var(--red); color: var(--white); border-color: var(--red); }
/* Contact card hover */
.contact-card:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}
/* cursor-pointer для всех кликабельных элементов */
a, button, [role="button"], .product-card, .filter-tab, details summary, .cart-btn {
cursor: pointer;
}
/* Hover-карточки клиентов и партнёров (вместо inline onmouseover) */
.hover-gold:hover { background: var(--gold) !important; }
.footer-social {
width: 40px;
height: 40px;
background: rgba(255,255,255,0.1);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-size: 1.1rem;
transition: background 0.2s ease;
}
.footer-social:hover { background: var(--gold); }
/* ===== FAQ ACCORDION ===== */
.faq-list {
max-width: 800px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 8px;
}
.faq-item {
background: white;
border-radius: 14px;
border: 1.5px solid #F0E8D8;
overflow: hidden;
transition: border-color 0.2s, box-shadow 0.2s;
}
.faq-item:has(.faq-q[aria-expanded="true"]) {
border-color: var(--gold);
box-shadow: 0 4px 20px rgba(201,162,75,0.12);
}
.faq-q {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 20px 24px;
background: none;
border: none;
cursor: pointer;
font-family: 'Inter', sans-serif;
font-size: 1rem;
font-weight: 600;
color: var(--dark);
text-align: left;
transition: color 0.2s;
}
.faq-q:hover { color: var(--red); }
.faq-q[aria-expanded="true"] { color: var(--red); }
.faq-chevron {
flex-shrink: 0;
transition: transform 0.3s ease;
color: var(--gray);
}
.faq-q[aria-expanded="true"] .faq-chevron {
transform: rotate(180deg);
color: var(--gold);
}
.faq-a {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.faq-a-inner {
padding: 4px 24px 20px;
}
.faq-a p {
color: var(--gray);
font-size: 0.92rem;
line-height: 1.75;
margin: 0;
}
/* ===== BREADCRUMB ===== */
.breadcrumb {
display: flex;
gap: 8px;
align-items: center;
font-size: 0.85rem;
color: var(--gray);
margin-bottom: 24px;
}
.breadcrumb a { color: var(--gray); text-decoration: none; }
.breadcrumb a:hover { color: var(--red); }
.breadcrumb-sep { color: #ccc; }
/* ===== SKELETON LOADER ===== */
@keyframes skeleton-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.skeleton {
background: #e8e0d5;
border-radius: 8px;
animation: skeleton-pulse 1.5s ease-in-out infinite;
}
.skeleton-card {
background: var(--white);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}
.skeleton-img {
width: 100%;
aspect-ratio: 4/3;
background: #e8e0d5;
animation: skeleton-pulse 1.5s ease-in-out infinite;
}
.skeleton-body { padding: 20px; }
.skeleton-line {
height: 12px;
border-radius: 6px;
background: #e8e0d5;
animation: skeleton-pulse 1.5s ease-in-out infinite;
margin-bottom: 10px;
}
/* ===== SVG ICON ===== */
.icon {
width: 24px;
height: 24px;
display: inline-block;
flex-shrink: 0;
}
.icon-lg { width: 40px; height: 40px; }
.icon-xl { width: 56px; height: 56px; }
/* ===== TOAST ===== */
.toast {
position: fixed;
bottom: 24px;
right: 24px;
background: var(--dark);
color: var(--white);
padding: 14px 22px;
border-radius: 10px;
font-size: 0.9rem;
font-weight: 500;
box-shadow: 0 8px 32px rgba(0,0,0,0.2);
z-index: var(--z-toast);
transform: translateY(100px);
opacity: 0;
transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
display: flex;
align-items: center;
gap: 10px;
}
.toast.show {
transform: translateY(0);
opacity: 1;
}
.toast-icon { font-size: 1.2rem; }
/* ===== MOBILE MENU ===== */
.mobile-menu {
display: none;
position: fixed;
inset: 0;
background: var(--white);
z-index: var(--z-mobile-menu);
flex-direction: column;
padding: 80px 32px 32px;
gap: 8px;
}
.mobile-menu.open { display: flex; }
.mobile-menu-link {
font-family: 'Playfair Display', serif;
font-size: 1.6rem;
font-weight: 600;
color: var(--dark);
text-decoration: none;
padding: 12px 0;
border-bottom: 1px solid #F0E8D8;
transition: color 0.2s;
}
.mobile-menu-link:hover { color: var(--red); }
/* Десктоп-навигация: display вынесен из инлайна в класс, чтобы медиазапрос
(max-width:768px → display:none) мог его перебить и показать бургер */
.desktop-nav {
display: flex;
gap: 28px;
align-items: center;
}
.burger {
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
background: none;
border: none;
cursor: pointer;
/* a11y: touch-target-size — минимум 44×44px */
min-width: 44px;
min-height: 44px;
}
/* Кнопка закрытия мобильного меню — touch-target ≥44px (a11y) */
#mobileMenuClose {
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
.burger span {
display: block;
width: 24px;
height: 2px;
background: var(--dark);
border-radius: 2px;
transition: all 0.3s;
}
/* ===== CONTAINER ===== */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* ===== TESTIMONIALS GRID ===== */
.testimonials-grid {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 24px;
align-items: start;
}
/* ===== GRID ===== */
.grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}
/* Сетка страницы товара (фото | инфо). display/колонки вынесены из инлайна,
чтобы мобильный медиазапрос мог схлопнуть их в одну колонку */
.product-top-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: stretch;
}
/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
.grid-4 { grid-template-columns: repeat(2, 1fr); }
.steps-grid { grid-template-columns: repeat(2, 1fr) !important; }
.steps-grid > [aria-hidden] { display: none; }
}
@media (max-width: 600px) {
.steps-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 768px) {
.section { padding: 56px 0; }
.grid-4 { grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grid-3 { grid-template-columns: repeat(1, 1fr); }
.grid-2 { grid-template-columns: 1fr; }
.testimonials-grid { grid-template-columns: 1fr; }
.hero { min-height: 100svh; }
.hero h1 { font-size: 2rem; }
.hero-stats { gap: 20px; flex-wrap: wrap; }
.desktop-nav { display: none; }
.burger { display: flex; }
.hero-desc { font-size: 1rem; } /* a11y: body-текст ≥16px на мобильном (было 0.95rem ≈15px) */
/* a11y: тач-таргеты ≥44px на мобильном (фильтры и кнопки были 33–39px) */
.filter-tab { min-height: 44px; }
.btn-primary, .btn-secondary, .btn-gold { min-height: 44px; }
/* Страница товара: фото над информацией, одна колонка (было 2 → фото сжималось) */
.product-top-grid { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 480px) {
.grid-4 { grid-template-columns: 1fr; }
.modal { padding: 28px 20px; }
.cart-drawer { width: 100vw; }
/* Секции */
.section { padding: 40px 0; }
/* Предотвращаем авто-зум iOS при фокусе на полях ввода */
.form-input,
.form-textarea,
input, textarea, select {
font-size: 1rem !important;
}
/* Поле поиска в каталоге */
#catalogSearch { font-size: 1rem !important; }
/* Hero stats — убираем широкий gap из inline-стиля */
.hero-stats { gap: 16px !important; flex-wrap: wrap; }
/* Шапка сайта: скрываем верхнюю информационную полосу на узких экранах */
.header-top { display: none; }
/* Кнопка корзины — компактнее, но touch-target ≥44px (a11y) */
.cart-btn { padding: 8px 12px; font-size: 0.82rem; min-height: 44px; }
/* CTA-кнопки в два ряда */
.cta-btns { flex-direction: column !important; }
/* Toast — не уезжает за край на узком экране */
.toast { right: 12px; left: 12px; bottom: 80px; } /* выше cookie-баннера */
/* Уменьшаем горизонтальный padding контейнера */
.container { padding: 0 16px; }
/* Footer: все колонки в одну */
.grid-4 { grid-template-columns: 1fr !important; }
.grid-4 > [style*="grid-column:span 2"],
.grid-4 > [style*="grid-column: span 2"] { grid-column: span 1 !important; }
/* Кнопки в hero-секции: полная ширина */
.hero-content > div[style*="display:flex"][style*="gap:16px"] {
flex-direction: column;
}
.hero-content > div[style*="display:flex"][style*="gap:16px"] > * {
width: 100%;
justify-content: center;
}
/* Фильтр-табы в каталоге */
.filter-tab { font-size: 0.8rem; padding: 7px 14px; }
}
@media (max-width: 375px) {
/* Самые узкие телефоны: дополнительные поправки */
.btn-primary, .btn-secondary, .btn-gold { font-size: 0.88rem; padding: 11px 20px; }
.hero h1 { font-size: 1.75rem; }
}
/* Скрываем hover-трансформы на тач-устройствах (нет поддержки hover) */
@media (hover: none) {
.product-card:hover { transform: none; box-shadow: 0 2px 16px rgba(0,0,0,0.06); }
.advantage-card:hover { transform: none; box-shadow: 0 2px 16px rgba(0,0,0,0.05); }
.step-card:hover { transform: none; box-shadow: 0 4px 24px rgba(0,0,0,0.07); }
}
/* Только на мобильных */
.mobile-only { display: none !important; }
@media (max-width: 767px) { .mobile-only { display: inline-flex !important; } }
/* ─── Quick View ──────────────────────────────────────────────────────────── */
.product-card { position: relative; }
.qv-trigger-wrap { position: relative; }
.qv-btn {
position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
background: white; border: none; border-radius: 20px;
padding: 7px 16px; font-size: 0.78rem; font-weight: 600; color: var(--dark);
cursor: pointer; white-space: nowrap; box-shadow: 0 2px 10px rgba(0,0,0,0.18);
opacity: 0; pointer-events: none;
transition: opacity 0.18s, transform 0.18s;
z-index: 5; display: flex; align-items: center; gap: 6px;
}
.qv-trigger-wrap:hover .qv-btn,
.qv-trigger-wrap:focus-within .qv-btn { opacity: 1; pointer-events: all; transform: translateX(-50%) translateY(-2px); }
#qvOverlay {
position: fixed; inset: 0; background: rgba(0,0,0,0.5);
z-index: var(--z-quickview); display: flex; align-items: center; justify-content: center;
padding: 20px; opacity: 0; pointer-events: none;
transition: opacity 0.25s;
}
#qvOverlay.qv-open { opacity: 1; pointer-events: all; }
#qvModal {
background: white; border-radius: 20px; max-width: 820px; width: 100%;
max-height: 88vh; overflow-y: auto; position: relative;
transform: translateY(24px) scale(0.98);
transition: transform 0.25s;
}
#qvOverlay.qv-open #qvModal { transform: translateY(0) scale(1); }
.qv-close {
position: sticky; top: 0; float: right; margin: 14px 14px 0 0;
background: var(--gray-light); border: none; border-radius: 50%;
min-width: 44px; min-height: 44px; font-size: 1.2rem; cursor: pointer;
display: flex; align-items: center; justify-content: center; z-index: 10;
transition: background 0.15s;
}
.qv-close:hover { background: #e5e7eb; }
.qv-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0; clear: both; }
.qv-photo {
aspect-ratio: 1; background: var(--beige);
display: flex; align-items: center; justify-content: center;
font-size: 6rem; border-radius: 20px 0 0 20px; overflow: hidden;
}
.qv-photo img { width: 100%; height: 100%; object-fit: cover; }
.qv-info { padding: 32px; overflow-y: auto; }
.qv-cat { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--gray); margin-bottom: 8px; }
.qv-title { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 700; line-height: 1.25; margin-bottom: 12px; }
.qv-desc { font-size: 0.88rem; color: var(--gray); line-height: 1.6; margin-bottom: 16px; }
.qv-meta { display: flex; gap: 16px; font-size: 0.82rem; margin-bottom: 20px; }
.qv-meta span { display: flex; align-items: center; gap: 5px; color: var(--gray); }
.qv-comp-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--gray); margin-bottom: 10px; }
.qv-comp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; margin-bottom: 24px; }
.qv-comp-item { text-align: center; }
.qv-comp-img { width: 52px; height: 52px; border-radius: 10px; background: var(--beige); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; margin: 0 auto 4px; overflow: hidden; }
.qv-comp-img img { width: 100%; height: 100%; object-fit: cover; }
.qv-comp-name { font-size: 0.65rem; line-height: 1.3; color: var(--dark); }
.qv-comp-qty { font-size: 0.62rem; color: var(--gray); }
.qv-actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 640px) {
#qvOverlay { align-items: flex-end; padding: 0; }
#qvModal {
border-radius: 20px 20px 0 0; max-height: 88vh;
transform: translateY(100%);
}
#qvOverlay.qv-open #qvModal { transform: translateY(0); }
.qv-body { grid-template-columns: 1fr; }
.qv-photo { border-radius: 20px 20px 0 0; aspect-ratio: 16/9; font-size: 4rem; max-height: 220px; }
.qv-info { padding: 20px; }
.qv-title { font-size: 1.2rem; }
.qv-btn { display: none; }
}
@keyframes star-pop {
0% { transform: scale(0) rotate(-30deg); opacity: 0; }
60% { transform: scale(1.3) rotate(5deg); opacity: 1; }
100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.review-star {
display: inline-block;
animation: star-pop 0.45s cubic-bezier(.36,.07,.19,.97) both;
animation-play-state: paused;
}
.stars-visible .review-star {
animation-play-state: running;
}