/* =========================== VERRA — Global styles (FULL) Version: 1.0 =========================== */ /* ---------- Цветовые палитры ---------- Установите на classic | cocoa | slate | emerald Тёмная версия — автоматически (prefers-color-scheme: dark) -----------------------------------------*/ /* CLASSIC (по умолчанию) */ :root[data-palette="classic"]{ --ivory:#F8F4EC; /* было #f6f0e8 */ --sand:#ede4da; --brown:#2b2119; --brown-90:rgb(43 33 25 / 90%); --text:#1f1b17; --text-soft:#312a23; --text-white:rgba(255,255,255,.88); --line:#e7dfd5; --card:#ffffff; --gold:#c7a25b; --gold-strong:#b08a46; --gold-dark:#a8894e; --gold-soft:#d8bd86; --gold-600:#c7a25b; --shadow:0 14px 36px rgba(0,0,0,.12); --ring:0 0 0 3px rgba(199,162,91,.25); --wa:#25D366; --wa-hover:#1fb357; --ok:#2ecc71; --no:#e74c3c; /* Z-index слои */ --z-header: 1000; --z-float: 9000; --z-modal: 12000; --z-drawer: 13000; --z-cookie: 14000; /* куки всегда выше модалок и сайдбара */ } @media (prefers-color-scheme: dark){ :root[data-palette="classic"]{ --ivory:#0b0a09; --sand:#141210; --brown:#0f0d0c; --brown-90:rgb(43 33 25 / 90%); --text:#ece7df; --text-soft:#ded7cd; --line:#2b2621; --card:#14110f; --gold:#d7b471; --gold-strong:#caa258; --gold-dark:#a7894c; --gold-soft:#e4cc92; --gold-600:#d7b471; --shadow:0 12px 30px rgba(0,0,0,.35); --ring:0 0 0 3px rgba(215,180,113,.22); } /*.footer{ background:#0b0908; } * ещё чуть темнее в тёмной теме */ } @media (prefers-color-scheme: dark) { .drawer__overlay { background: rgba(0,0,0,.7); } } /* COCOA */ :root[data-palette="cocoa"]{ --ivory:#f6efe6; --sand:#efe5d8; --brown:#3a2b21; --brown-90:rgb(58 43 33 / 92%); --text:#221912; --text-soft:#2f231b; --line:#e7dbcc; --card:#ffffff; --gold:#b98a4a; --gold-strong:#a57639; --gold-dark:#8d642e; --gold-soft:#d2b07d; --gold-600:#b98a4a; --shadow:0 14px 36px rgba(0,0,0,.12); --ring:0 0 0 3px rgba(185,138,74,.25); --wa:#25D366; --wa-hover:#1fb357; --ok:#2ecc71; --no:#e74c3c; } @media (prefers-color-scheme: dark){ :root[data-palette="cocoa"]{ --ivory:#0c0a08; --sand:#14110f; --brown:#140f0c; --brown-90:rgb(20 15 12 / 92%); --text:#efe7dc; --text-soft:#e2d4c4; --line:#30261f; --card:#15110e; --gold:#cea467; --gold-strong:#bf9051; --gold-dark:#9c7740; --gold-soft:#e0c489; --gold-600:#cea467; --shadow:0 12px 30px rgba(0,0,0,.35); --ring:0 0 0 3px rgba(206,164,103,.22); } } /* SLATE */ :root[data-palette="slate"]{ --ivory:#f2f5f7; --sand:#e7ebee; --brown:#26313a; --brown-90:rgb(38 49 58 / 92%); --text:#151c21; --text-soft:#25323b; --line:#d9dee3; --card:#ffffff; --gold:#4f9bd6; --gold-strong:#3c86c2; --gold-dark:#316fa3; --gold-soft:#8bbbe3; --gold-600:#4f9bd6; --shadow:0 14px 36px rgba(0,0,0,.10); --ring:0 0 0 3px rgba(79,155,214,.25); --wa:#25D366; --wa-hover:#1fb357; --ok:#2ecc71; --no:#e74c3c; } @media (prefers-color-scheme: dark){ :root[data-palette="slate"]{ --ivory:#0b0e10; --sand:#101419; --brown:#0e151b; --brown-90:rgb(14 21 27 / 92%); --text:#e7edf2; --text-soft:#d6e0e8; --line:#1f2830; --card:#0f1419; --gold:#63ace0; --gold-strong:#4f9bd6; --gold-dark:#3b78a8; --gold-soft:#9ed0f0; --gold-600:#63ace0; --shadow:0 12px 30px rgba(0,0,0,.35); --ring:0 0 0 3px rgba(99,172,224,.22); } } /* EMERALD */ :root[data-palette="emerald"]{ --ivory:#f3f7f4; --sand:#e6efe9; --brown:#1c2a22; --brown-90:rgb(28 42 34 / 92%); --text:#142019; --text-soft:#1f2f26; --line:#d7e4dc; --card:#ffffff; --gold:#31a37a; --gold-strong:#278c69; --gold-dark:#1f7357; --gold-soft:#6cc2a3; --gold-600:#31a37a; --shadow:0 14px 36px rgba(0,0,0,.10); --ring:0 0 0 3px rgba(49,163,122,.25); --wa:#25D366; --wa-hover:#1fb357; --ok:#2ecc71; --no:#e74c3c; } @media (prefers-color-scheme: dark){ :root[data-palette="emerald"]{ --ivory:#0a0f0d; --sand:#0f1613; --brown:#0b130f; --brown-90:rgb(11 19 15 / 92%); --text:#e4f0ea; --text-soft:#d3e5de; --line:#18231e; --card:#0c1410; --gold:#3dbb8f; --gold-strong:#31a37a; --gold-dark:#277f60; --gold-soft:#80d2b6; --gold-600:#3dbb8f; --shadow:0 12px 30px rgba(0,0,0,.35); --ring:0 0 0 3px rgba(61,187,143,.22); } } /* ---------- База ---------- */ *{box-sizing:border-box} html{scroll-behavior:smooth; overflow-x:hidden} body{ background:var(--ivory); color:var(--text); font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; font-size:14px; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; } .brand-font{font-family:'Playfair Display', Georgia, serif; font-weight:500; letter-spacing:.04em} .brand-font-bold{font-family:'Playfair Display', Georgia, serif; font-weight:600; letter-spacing:.04em} .text-gold{color:var(--gold)} .text-gold-dark { color: var(--gold-dark); transition: color .2s ease; } a.text-gold-dark:hover { color: var(--gold); } .text-brown-90 { color: rgb(43 33 25 / 0.9); } /* Для тёмной темы (чтобы было читаемо на тёмном фоне) */ @media (prefers-color-scheme: dark) { .text-brown-90 { color: rgb(240 233 225 / 0.9); /* светло-бежевый, чуть теплее белого */ } } /* Дополнительно — чтобы при наведении плавно менялся цвет */ .text-brown-90:hover { color: var(--gold, #c6a664); transition: color 0.2s ease-in-out; } /* a { color: var(--gold-dark); text-decoration: none; transition: color .2s ease, text-shadow .2s ease; } a:hover, a:focus { color: var(--gold); text-shadow: 0 0 4px rgba(199,162,91,.4); /* мягкое свечение в цвет золота */ } */ /* Полезные утилиты (для кнопок в вопросе) */ .text-gold-600{color:var(--gold-600)!important} .border-gold-600{border-color:var(--gold-600)!important} .bg-gold-50{background:color-mix(in srgb, var(--gold) 12%, white)!important} .hover\:bg-gold-50:hover{background:color-mix(in srgb, var(--gold) 12%, white)!important} /* Секции */ section{padding-top:4rem; padding-bottom:4rem} @media (min-width:640px){ section{padding-top:5rem; padding-bottom:5rem} } @media (min-width:1024px){ section{padding-top:6rem; padding-bottom:6rem} } .section-light{background:var(--card)} .section-cream{background:var(--ivory)} .section-cream-dark{background:var(--sand)} /*.section-cream{background:var(--sand)}*/ /* ---------- Header ---------- */ .site-header{ position:fixed; top:0; left:0; width:100%; z-index: var(--z-header); --hdr-fg:#fff; --hdr-border:rgba(255,255,255,.12); color:var(--hdr-fg); transition:transform .28s ease, background-color .26s ease, color .26s ease, border-color .26s ease; border-bottom:1px solid transparent; backdrop-filter:saturate(140%) blur(8px); } .header--transparent{background:transparent; border-bottom-color:transparent; --hdr-fg:#fff} .header--glass{background:var(--brown-90); --hdr-fg:#f5efe6; --hdr-border:rgba(255,255,255,.10); border-bottom-color:var(--hdr-border)} .header--white{background:rgba(255,255,255,.92); --hdr-fg:var(--text); --hdr-border:var(--line); border-bottom:1px solid var(--line)} .header--hidden{ transform:translateY(-100%) } .site-offset{padding-top:64px} #home{ margin-top:-64px } .nav-link{color:rgba(255,255,255,.88); transition:color .2s} .header--white .nav-link{ color:var(--text-soft) } .nav-link:hover{color:#fff} .header--white .nav-link:hover{ color:#000 } /* Кнопки */ .btn-gold, .btn-gold:focus, .cta-btn, .cta-btn:focus{ background:linear-gradient(135deg,var(--gold),var(--gold-strong)); color:#fff; font-weight:600; border-radius:10px; padding:10px 18px; transition: filter .25s, transform .2s, box-shadow .2s } .btn-gold:hover,.cta-btn:hover{filter:brightness(1.05); box-shadow:0 6px 20px color-mix(in srgb, var(--gold) 35%, transparent); transform:translateY(-1px)} .btn-ghost{ background:transparent; color:var(--text-white); /* было белым — из-за этого терялось */ border:1px solid color-mix(in srgb, var(--text) 38%, var(--line)); border-radius:10px; padding:10px 18px; transition: background .25s, border-color .25s, box-shadow .2s } .btn-ghost:hover{ border-color: color-mix(in srgb, var(--gold) 45%, var(--text)); box-shadow:var(--ring) } .btn-ghost-cta{ background:transparent; color:var(--gold-dark); /* было белым — из-за этого терялось */ border:1px solid color-mix(in srgb, var(--text) 38%, var(--line)); border-radius:10px; padding:10px 18px; transition: background .25s, border-color .25s, box-shadow .2s } .btn-ghost-cta:hover{ border-color: color-mix(in srgb, var(--gold) 45%, var(--text)); box-shadow:var(--ring) } .header--white .btn-ghost{ color:var(--text); border-color:color-mix(in srgb, var(--text) 28%, var(--line)) } .focus-ring:focus{outline:none; box-shadow:var(--ring)} .btn{display:inline-flex; align-items:center; justify-content:center; border-radius:10px; padding:.6rem .9rem} .btn--ghost{background:transparent; border:1px solid color-mix(in srgb, var(--text) 28%, var(--line)); color:var(--text)} .btn--wa{background:var(--wa); color:#fff} /* Иконки справа в хедере — ТОЛЬКО мобайл */ .icon-link{place-items:center; width:34px; height:34px; font-size:18px; color:#fff; transition:opacity .2s, transform .2s} .icon-link:hover{opacity:.9; transform:translateY(-1px)} .header--white .icon-link{ color:var(--text) } /*@media (max-width:767px){ .icon-link{display:inline-grid} } @media (min-width:768px){ .icon-link{display:none !important} }*/ @media (max-width:1023px){ .icon-link{display:inline-grid} } @media (min-width:1024px){ .icon-link{display:none !important} } .dot{width:8px; height:8px; border-radius:50%; background:var(--ok); display:inline-block} /* ---------- Drawer ---------- */ /* Скрывать дровер и оверлей, если aria-hidden="true" (страховка) */ .drawer[aria-hidden="true"]{ display:none; } /* оверлей ловит клики ТОЛЬКО когда открыт */ .drawer[aria-hidden="true"] .drawer__overlay{ pointer-events:none; } .drawer[aria-hidden="false"] .drawer__overlay{ pointer-events:auto; } .drawer{ position:fixed; inset:0; z-index:var(--z-drawer); overscroll-behavior:contain; } .drawer__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.65); z-index: 1; cursor: pointer; touch-action: auto; } .drawer__panel { position: fixed; top: 0; right: 0; bottom: 0; width: 80%; max-width: 340px; height: 100vh; background: var(--card); color: var(--text); z-index: 2; transform: translateX(100%); transition: transform .28s ease; padding: 20px; box-shadow: -10px 0 30px rgba(0,0,0,.25); overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; } .drawer.show .drawer__panel{ transform:translateX(0) } .drawer.hidden{ display:none } .drawer__link{ padding:.8rem 0; border-bottom:1px solid rgba(0,0,0,.08) } .drawer__link--gold{ color:var(--gold); padding:1rem 0 } .drawer__close{ appearance:none; border:0; background:transparent; font-size:28px; line-height:1; cursor:pointer; color:var(--text); padding:.2rem .4rem; } /* ---------- HERO ---------- */ .hero{position:relative; min-height:100vh; padding:0} .hero-bg{position:absolute; inset:0; background:url('/media/images/hero_bg_pexels-photo-6461200_1920.webp') center/cover no-repeat; filter:grayscale(.05) brightness(.62)} .hero-film{position:absolute; inset:0; background: radial-gradient(1000px 420px at 40% 8%, color-mix(in srgb, var(--gold) 22%, transparent), transparent 60%), linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.30))} .hero-inner{ min-height:100vh; display:grid; place-items:center } /* мобайл — центр */ .hero-box{ text-align:left; max-width:720px } .hero-title{ font-size:clamp(30px,4.8vw,56px); font-weight:600; line-height:1.18; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.55) } .hero-sub{ font-size:clamp(15px,2.2vw,20px); margin-top:.75rem; color:#f0f0f0; text-shadow:0 2px 12px rgba(0,0,0,.55) } .hero-cta{ justify-content:flex-start } @media (min-width:1024px){ .hero-inner{ align-items:center; justify-items:start; } /* вертикальный центр и слева */ .hero-box{ text-align:left; max-width:680px } .hero-cta{ justify-content:flex-start } } @media (max-width:998px){ .hero-tag { border: none; padding: 0; } } /* Подчеркивание */ .underline-gold{position:relative; display:inline-block; padding-bottom:.6rem} .underline-gold::after{content:""; position:absolute; left:0; bottom:0; width:84px; height:3px; border-radius:3px; background:linear-gradient(90deg,var(--gold),var(--gold-soft)); box-shadow:0 2px 10px color-mix(in srgb, var(--gold) 45%, transparent)} /* Подчеркивание для белого текста на тёмных фонах */ .underline-white { position: relative; display: inline-block; padding-bottom: .6rem; } .underline-white::after { content: ""; position: absolute; left: 0; bottom: 0; width: 84px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0.7)); box-shadow: 0 2px 10px rgba(255, 255, 255, 0.3); } h2.underline-gold{margin-bottom:2.25rem} /* безопасный отступ после линии */ /* Карточки и стекло */ .card{ box-shadow:var(--shadow); background:var(--card) !important; border-color:var(--line); display: flex; flex-direction: column; justify-content: flex-start; height: 100%; contain: layout paint; /* у тебя уже стоит — отлично */ isolation: isolate; /* отделит слои карточки от соседей */ } .card .header-card { display: flex; /*align-items: flex-start;*/ align-items: center; gap: 0.75rem; /* = gap-3 */ min-height: 2.5rem; /* высота под 2 строки заголовка */ margin-bottom: 0.25rem; } .card h3 { line-height: 1.3; font-size: 1rem; margin: 0; } .card p { flex-grow: 1; /* чтобы описание не сжималось */ } @media (max-width:768px){ .card .header-card {align-items: center;} } /* Hover — как было */ .hover-raise{ transition: transform .2s ease, box-shadow .2s ease; will-change: transform; } .hover-raise:hover{ transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0,0,0,.12); } /* Reveal — НЕ используем transform, только translate + opacity */ .reveal{ opacity: 0; translate: 0 16px; /* <-- ключевое: не transform */ } .reveal.visible{ animation: reveal-in .6s ease forwards; } @keyframes reveal-in{ from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } } /* Золотой подсвет для карточек услуг при ховере (опция) */ #services .hover-raise:hover{ box-shadow: 0 14px 28px rgba(0,0,0,.12), 0 0 0 2px color-mix(in srgb, var(--gold) 22%, transparent); border-color: color-mix(in srgb, var(--gold) 25%, var(--line)); } /* Уважение системных настроек */ @media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; translate:0 } .reveal.visible{ animation:none } } /*.hover-raise{transition: transform .2s ease, box-shadow .2s ease} .hover-raise:hover{transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0,0,0,.12)}*/ /* .hover-raise:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0,0,0,.12), 0 0 0 2px color-mix(in srgb, var(--gold) 22%, transparent); border-color: color-mix(in srgb, var(--gold) 25%, var(--line)); } */ /*.hover-raise:hover i, .hover-raise:hover h3 { color: var(--gold-strong); transition: color .25s ease; } /* Мягкое золотое дыхание иконок * .card i { transition: color .4s ease, text-shadow .4s ease; } .card:hover i { color: var(--gold-strong); text-shadow: 0 0 8px color-mix(in srgb, var(--gold) 35%, transparent); } */ /* * Reveal * .reveal{opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease;} .reveal.visible{opacity:1; transform:none} .reveal:not(.visible){ will-change: opacity, transform; } */ /* =========================== Hover effects — premium glow =========================== */ /*.hover-raise{ transition: transform .2s ease, box-shadow .2s ease; }* .hover-raise{ position: relative; transition: transform .35s cubic-bezier(.25,.1,.25,1), border-color .35s ease; transition: transform .35s cubic-bezier(.25,.1,.25,1), box-shadow .45s cubic-bezier(.25,.1,.25,1), border-color .35s ease; will-change: transform; } .hover-raise:hover{ transform: translateY(-3px); box-shadow: 0 6px 14px rgba(0,0,0,.08), 0 10px 26px rgba(0,0,0,.12), 0 0 12px color-mix(in srgb, var(--gold) 12%, transparent); border-color: color-mix(in srgb, var(--gold) 30%, var(--line)); }*/ .glassbox{background:rgba(0,0,0,.40); backdrop-filter:blur(6px); padding:1.25rem; border-radius:.75rem} /* Слайды подписи */ .slide-caption{position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); color:#fff} /* ========== Photo Slider Captions ========== */ .slide-caption h3 { font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; margin-bottom: 0.5rem; } .slide-caption span { display: block; font-weight: 500; line-height: 1.4; letter-spacing: 0.15px; margin-bottom: 0.75rem; color: rgba(255, 255, 255, 0.92); } .slide-caption p { font-weight: 400; line-height: 1.6; letter-spacing: 0.1px; color: rgba(255, 255, 255, 0.9); max-width: 38rem; } /* Дополнительная плавность между строками на тёмном фоне */ .slide-caption h3, .slide-caption span, .slide-caption p { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); } /* Адаптив для мобильных */ @media (max-width: 640px) { .slide-caption h3 { font-size: 1.5rem; } .slide-caption span { font-size: 1.125rem; } .slide-caption p { font-size: 1rem; } } .slide-dim{position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.35) 40%, rgba(0,0,0,.10))} .stars{color:#f5c542} /* БАЗОВЫЙ ЦВЕТ СТАТИЧНЫХ ЗВЁЗД (чёткий, видимый) */ .stars-animate i { --fa-secondary-color: #d4a034; /* золото при вспышке */ --fa-primary-color: #e2d7bd; /* спокойный золотистый фон */ --fa-secondary-opacity: 1; /* включаем плотность цвета */ font-size: 1em; animation: sparkle 1.2s infinite; } /* АНИМАЦИЯ ВСПЫШКИ С БОЛЕЕ ЯРКИМ ЗОЛОТОМ */ @keyframes sparkle { 0% { color: #e2d7bd; filter: none; } 20% { color: #d4a034; filter: brightness(1.3); } 40% { color: #e2d7bd; filter: none; } 0% { --fa-primary-color: #e2d7bd; --fa-secondary-color: #e2d7bd; } 20% { --fa-primary-color: #d4a034; --fa-secondary-color: #e2d7bd; } 40% { --fa-primary-color: #e2d7bd; --fa-secondary-color: #e2d7bd; } } /* ПОСЛЕДОВАТЕЛЬНОСТЬ */ .stars-animate i:nth-child(1) { animation-delay: 0s; } .stars-animate i:nth-child(2) { animation-delay: 0.12s; } .stars-animate i:nth-child(3) { animation-delay: 0.24s; } .stars-animate i:nth-child(4) { animation-delay: 0.36s; } .stars-animate i:nth-child(5) { animation-delay: 0.48s; } /* Таблицы цен + аккордеон */ #prices .table-wrap{max-width:none; margin:0} #prices table{width:100%; border-collapse:separate; border-spacing:0 6px} #prices th{text-align:left; font-weight:600; padding:10px 0} #prices td{padding:10px 0; border-bottom:1px dotted var(--line)} /* Убираем тёмный всплеск при тапе на тач-устройствах */ @media (hover: none) and (pointer: coarse){ /* гасим системный tap-highlight */ a, button, summary, [role="button"], .drawer__link, .accordion, .accordion summary { -webkit-tap-highlight-color: rgba(0,0,0,0); } /* у

в мобильных браузерах есть дефолтный :active фон — отключаем */ .accordion summary, .accordion summary:active, .accordion summary:focus { background-color: transparent !important; outline: none; } /* чтобы при свайпе случайно не подсвечивался текст заголовка */ .accordion summary { -webkit-user-select: none; user-select: none; touch-action: manipulation; } } /* Для доступности на десктопе оставляем нормальный фокус */ .accordion summary:focus-visible{ outline: none; box-shadow: var(--ring); border-radius: 10px; } .accordion{margin:.25rem 0 .25rem} .accordion summary{ position:relative; list-style:none; cursor:pointer; padding-right:1.25rem; } .accordion summary::-webkit-details-marker{display:none} .accordion summary::after{ content:""; position:absolute; right:.2rem; top:50%; width:.6rem; height:.6rem; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform: translateY(-50%) rotate(45deg); transition: transform .25s ease, opacity .2s; opacity:.7; } .accordion details[open] > summary::after{ transform: translateY(-50%) rotate(-135deg); opacity:1; } /* Каскад фото */ /* ========================= Каскад фото (десктоп) ========================= */ .cascade { position: relative; min-height: 340px; } /* Базовые параметры фото */ .cascade .ph1, .cascade .ph2 { position: absolute; width: 80%; border-radius: 12px; border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); transition: transform 0.35s ease, box-shadow 0.35s ease, z-index 0.2s ease; cursor: pointer; } /* Позиционирование */ .cascade .ph1 { z-index: 2; left: 0; top: 0; } .cascade .ph2 { z-index: 1; right: 0; bottom: -80px; transform: translateX(10%); } /* Эффект при наведении — активное фото поднимается над другим */ .cascade img:hover { z-index: 3; transform: scale(1.03); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25); } /* ========================= Адаптив (мобильная версия) ========================= */ @media (max-width: 767px) { .cascade { position: relative; min-height: auto; } .cascade .ph1, .cascade .ph2 { position: relative; width: 100%; right: auto; bottom: auto; left: auto; top: auto; transform: none; margin: 0; z-index: auto; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); cursor: default; } .cascade .ph2 { margin-top: 12px; } } /*.cascade{position:relative; min-height:340px} .cascade .ph1{position:relative; z-index:2} .cascade .ph2{position:absolute; right:0; bottom:-80px; z-index:1; transform:translateX(10%)} @media (max-width:767px){ .cascade{min-height:auto} .cascade .ph1,.cascade .ph2{position:relative; right:auto; bottom:auto; transform:none; margin:0} .cascade .ph2{margin-top:12px} }*/ /* Темная секция */ .section-bg{background:#0a0a0a} .section-bg .bg-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.55) saturate(.95)} .section-bg .overlay{background:linear-gradient(180deg,rgba(0,0,0,.40),rgba(0,0,0,.55))} /* Плавающие кнопки */ .float-wrap{position:fixed; right:18px; bottom:18px; z-index: var(--z-float); display:flex; align-items:flex-end; gap:10px} .float-btn{opacity:0; pointer-events:none; transition:opacity .25s, transform .25s} .float-btn.show{ opacity:.97; pointer-events:auto } .btn-top{background:var(--gold-dark)!important; color:#fff!important} .btn-top:hover{background:var(--gold)!important; transform: translateY(-2px); box-shadow:var(--shadow)} .btn-whatsapp{position:relative; background:var(--wa); color:#fff; box-shadow:0 10px 24px color-mix(in srgb, var(--wa) 40%, transparent)} .btn-whatsapp:hover{background:var(--wa-hover)} .btn-whatsapp.pulse::after{ content:""; position:absolute; inset:-6px; border-radius:999px; border:2px solid rgba(37,211,102,.55); transform:scale(.9); opacity:0; animation:waPulse 2.6s ease-out infinite; } @keyframes waPulse{ 0%{transform:scale(.9); opacity:0} 25%{opacity:.75} 60%{opacity:.25} 100%{transform:scale(1.35); opacity:0} } /* Соц-иконки */ .social-icon{ width:40px; height:40px; display:grid; place-items:center; border-radius:999px; border:1px solid #d1b490; color:var(--gold); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease } .social-icon:hover{ transform: translateY(-2px); box-shadow:0 6px 18px color-mix(in srgb, var(--gold) 30%, transparent); border-color: color-mix(in srgb, var(--gold) 55%, #d1b490); } /* Типографика */ h1,h2,h3{color:var(--text-soft); line-height:1.22; margin:0 0 .55em} h1{font-size:clamp(30px,4vw,46px)} h2{font-size:clamp(22px,2.8vw,30px)} h3{font-size:clamp(18px,2vw,24px)} p{margin:0 0 1em} /* Footer — темнее */ .footer{ background:color-mix(in srgb, var(--brown) 80%, #000); /* темнее, чем раньше */ color:#e9e2d6; /*background:#1a140f; * стабильный тёмный оттенок */ } .footer a{color:#e9e2d6} .footer__legal{border-top:1px solid rgba(255,255,255,.10); font-size:.75rem; text-align:center; padding:1.25rem 1rem} .footer__legal a:hover{color:#fff} /* ---------- Модальные окна ---------- */ .modal{ position:fixed; inset:0; z-index:var(--z-modal); display:none; place-items:center; background:rgba(0,0,0,.6); padding:1rem; overflow: hidden; /* фон не скроллится */ overscroll-behavior: contain; } @media (max-width: 640px) { .modal { padding: 0.5rem; } .modal-content { max-height: calc(100vh - 1rem); } } .modal[aria-hidden="false"]{display:grid} .modal-content{ width:100%; max-width:40rem; background:var(--card); color:var(--text); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:1.25rem; max-height: calc(100vh - 2rem); /* оставляем отступы сверху/снизу */ overflow-y: auto; /* вертикальная прокрутка */ overscroll-behavior: contain; /* не "пробивает" фон */ -webkit-overflow-scrolling: touch;/* плавный скролл на iOS */ touch-action: pan-y; } #careerModal .modal-content{ max-width: 760px; } .modal-close{cursor:pointer; color:#666; font-size:1.75rem; line-height:1} .modal-close:hover{color:#111} /* === Тёмная тема: модальные окна === */ @media (prefers-color-scheme: dark) { .modal-content { /* background: color-mix(in srgb, var(--brown-90) 92%, black);*/ border-color: color-mix(in srgb, var(--gold) 25%, var(--line)); box-shadow: 0 0 20px rgba(0,0,0,.7), 0 0 12px color-mix(in srgb, var(--gold) 20%, transparent); } .modal-close { color: color-mix(in srgb, var(--text-soft) 70%, var(--gold) 10%); } .modal-close:hover { color: var(--gold); } } /* Поля ввода (унификация) */ .input{ width:100%; border:1px solid var(--line); border-radius:10px; padding:.7rem .9rem; background:var(--card); color:var(--text); transition:box-shadow .2s, border-color .2s, background .2s; } .input:focus{ box-shadow:var(--ring); border-color: color-mix(in srgb, var(--gold) 45%, var(--line)) } .input::placeholder{opacity:.85} /* ---------- Cookie banner (адаптивный) ---------- */ .cookie{ position:fixed; left:1rem; bottom:1rem; z-index:var(--z-cookie); background:var(--card); border:1px solid var(--line); border-radius:12px; padding:1rem; max-width:31rem; /*width:min(640px, calc(100vw - 2rem)); * шире на десктопе, авто на планшете */ box-shadow:var(--shadow); display:none; } .cookie.show{display:block} .cookie__actions{ display:flex; gap:.5rem; margin-top:.75rem; flex-wrap:wrap; align-items:stretch } .cookie button{white-space:nowrap} .cookie #cookieNecessary.btn-ghost, .cookie #cookieReject.btn-ghost { background:transparent; color:var(--text); border-color:color-mix(in srgb, var(--text) 38%, var(--line)); } #cookieNecessary.btn-ghost:hover, #cookieReject.btn-ghost:hover{ background:rgba(0,0,0,.04)!important; } @media (max-width:640px){ /* .cookie{ left:0; right:0; bottom:0; width:100vw; border-radius:0; padding:1rem .75rem; }*/ #cookieReject { order:2; } #cookieNecessary { order: 3; } #cookieAcceptAll { order: 1; } .cookie{ left:0; right:0; bottom:0; border-radius:0; max-width:none; width:100%; } .cookie__actions{justify-content:stretch} .cookie__actions > *{flex:1 1 auto} /* кнопки сами займут доступную ширину и перенесутся */ } /* Предупреждение под формами */ .form-consent-warning{ margin-top:.5rem; font-size:.85rem; color:#c0392b; } .form-consent-warning .link-cookie{ margin-left:.35rem; text-decoration:underline; color:inherit; background:none; border:0; padding:0; cursor:pointer; } /* ---------- Логотип: светлый/тёмный ---------- */ #logoImgDark{display:none} @media (prefers-color-scheme: dark){ #logoImg{display:none} #logoImgDark{display:inline} } /* ---------- Swiper пагинация для отзывов ---------- */ .reviewsSwiper .swiper-pagination{ position:static; margin-top:10px } .reviewsSwiper .swiper-pagination-bullet{opacity:.4} .reviewsSwiper .swiper-pagination-bullet-active{opacity:1; background:var(--gold)} .display-none {display:none} /* Когда открыт дровер — плавающие кнопки не принимают клики */ body.nav-open .float-wrap{ pointer-events: none; opacity: .25; /* лёгкий визуальный намёк, можно убрать */ } /* ===== Scroll lock (единый, безопасный) ===== */ .body-locked{ position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; /* блокируем прокрутку контента */ /* top задаётся скриптом динамически как -scrollY */ } /* добавьте в ваш style.css * section{ scroll-margin-top: 84px; } @media (min-width:1024px){ section{ scroll-margin-top: 92px; } } */ /* === Выравнивание отзывов в слайдере === */ .reviewsSwiper .swiper-wrapper { align-items: stretch !important; /* заставляет все карточки быть одинаковой высоты */ } .reviewsSwiper .swiper-slide { display: flex !important; height: auto !important; /*margin: 10px 0 10px 0;*/ } .reviewsSwiper .swiper-slide figure { display: flex; flex-direction: column; justify-content: space-between; height: 100%; box-sizing: border-box; } /* Дополнительно — выравнивание текста и иконок */ .reviewsSwiper blockquote { flex-grow: 1; } .reviewsSwiper figcaption { margin-top: auto; } /* Небольшое выравнивание отступов и плавность */ .reviewsSwiper .swiper-slide figure { min-height: 6.5em; /* можешь подкорректировать, если нужно */ transition: transform 0.25s ease, box-shadow 0.25s ease; } /* Отключить выделение текста только в слайдере отзывов */ .reviewsSwiper, .reviewsSwiper * { user-select: none; -webkit-user-select: none; -ms-user-select: none; } /* ===== Reviews truncation ===== */ /* — Отзывы (сокращённые тексты) — */ /* Карточка */ /* === Reviews: базовая карточка === */ .review-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; color: var(--text); box-shadow: 0 4px 14px rgba(0,0,0,.08); transition: box-shadow .25s ease, transform .2s ease, background .25s ease; display: flex; flex-direction: column; justify-content: space-between; } /* Hover — лёгкий подъём и деликатное золото */ .review-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.12), 0 0 10px color-mix(in srgb, var(--gold) 16%, transparent); border-color: color-mix(in srgb, var(--gold) 25%, var(--line)); } /* При развороте сохраняем базовую тень */ .review-card.expanded { box-shadow: 0 4px 14px rgba(0,0,0,.08); } /* Сокращённый текст + белый градиент (БАЗА!) */ .review-text { position: relative; line-height: 1.6; max-height: 6.2em; overflow: hidden; transition: max-height 0.4s ease; } .review-text::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2.3em; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 90%); pointer-events: none; opacity: 1; transition: opacity 0.4s ease; } /* Кнопка “ещё…” */ .review-more{display:inline-flex;align-items:center;gap:.25em;margin:.3em 0;color:var(--gold);font-size:.9rem;font-weight:500;cursor:pointer;border:0;background:none;padding:0;text-align:left;transition:color .25s} .review-more:hover{color:#8a763f} .review-card.expanded .review-text{max-height:600px} .review-card.expanded .review-text::after{opacity:0} .review-card.expanded .review-more::after{content:" ▲";font-size:.8em;opacity:.85;transition:transform .3s} .review-card.expanded .review-more:hover::after{transform:translateY(-1px)} @media (max-width:640px){ .review-text{ max-height: 6.2em; } } /* === Тёмная тема (ПЕРЕОПРЕДЕЛЕНИЯ) === */ @media (prefers-color-scheme: dark) { .review-card { /*background: var(--brown-90);*/ /*border-color: color-mix(in srgb, var(--line) 65%, transparent);*/ box-shadow: 0 6px 20px rgba(0,0,0,.45); color: var(--text-soft); border-color: color-mix(in srgb, var(--gold) 18%, var(--line)) !important; } #reviews .border, .reviewsSwiper .border, .review-card.border { border-color: color-mix(in srgb, var(--gold) 22%, var(--line)); } /* При наведении делаем чуть теплее */ #reviews .border:hover, .reviewsSwiper .border:hover, .review-card.border:hover { border-color: color-mix(in srgb, var(--gold) 35%, var(--line)); } .review-card:hover { box-shadow: 0 10px 26px rgba(0,0,0,.55), 0 0 12px color-mix(in srgb, var(--gold) 22%, transparent); border-color: color-mix(in srgb, var(--gold) 30%, var(--line)); } /* Градиент внизу должен совпасть с тёмным фоном карточки */ .review-card .review-text::after { background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.85) 100%); } } /* Унификация таблиц в секции "Цены" */ /* ===== Prices tables (scoped) ===== */ /* ===== Prices tables (scoped) ===== */ #prices .table-wrap { margin: .5rem 0 1.25rem; } #prices .table-wrap table { width: 100%; border-collapse: collapse; table-layout: fixed; } /* Колонки */ #prices .table-wrap th:first-child, #prices .table-wrap td:first-child { width: 75%; text-align: left; } #prices .table-wrap th:last-child, #prices .table-wrap td:last-child { width: 25%; text-align: left; } /* Заголовок блока */ #prices .table-wrap thead .group-head th { background: var(--gold-dark); color: #fff; font-weight: 600; padding: 0.6rem 0.75rem; text-transform: none; border: none; } /* Строки */ #prices .table-wrap tbody td { padding: 0.45rem 0.75rem; border-bottom: 1px dotted #e2e2e2; font-weight: 400; color: rgba(0, 0, 0, 0.85); } /* Последняя строка — визуальное завершение */ #prices .table-wrap tbody tr:last-child td { /*border-bottom: 2px solid var(--gold-dark);*/ } /* При наведении */ #prices .table-wrap tbody tr:hover td { background: rgba(240, 230, 200, 0.12); transition: background 0.25s ease; } /* Адаптив */ @media (max-width: 520px) { #prices .table-wrap th:first-child, #prices .table-wrap td:first-child { width: 70%; } #prices .table-wrap th:last-child, #prices .table-wrap td:last-child { width: 30%; } } /* =========================== 🌙 Dark theme adaptation =========================== */ @media (prefers-color-scheme: dark) { /* Фон таблицы немного подсвечиваем */ #prices .table-wrap table { /*background: color-mix(in srgb, var(--brown-90) 85%, #000);*/ } /* Заголовок группы — более мягкое золото */ #prices .table-wrap thead .group-head th { background: color-mix(in srgb, var(--gold-dark) 80%, #000); color: #fff; border: none; } /* Строки: читаемый контент */ #prices .table-wrap tbody td { border-bottom: 1px dotted rgba(255,255,255,0.15); color: rgba(255,255,255,0.88); } /* Hover — деликатная подсветка золотом */ #prices .table-wrap tbody tr:hover td { background: color-mix(in srgb, var(--gold) 12%, transparent); } } /* ===== Аккордеоны в 2 колонки и фулл-ширина при раскрытии ===== */ .prices-grid{ display:grid; gap:1.25rem; /* = gap-5 */ } /* На десктопе — две колонки */ @media (min-width: 768px){ .prices-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; /* чтобы высота ячеек не тянула соседей */ } } /* Базово каждый details занимает одну колонку */ .prices-grid > details{ grid-column: auto; } /* Когда открыт — растягиваем на всю ширину (обе колонки) */ @media (min-width: 768px){ .prices-grid > details[open]{ grid-column: 1 / -1; } } /* (Опция) Плавность тени/бордера при раскрытии */ .prices-grid > details{ transition: box-shadow .25s ease, border-color .25s ease, transform .2s ease; } /* Dark mode — бордеры в секции цен (чтобы всё было единообразно) */ @media (prefers-color-scheme: dark){ #prices .prices-grid > details.border{ border-color: color-mix(in srgb, var(--gold) 22%, var(--line)) !important; } #prices .prices-grid > details.border:hover{ border-color: color-mix(in srgb, var(--gold) 35%, var(--line)) !important; } } /* Кнопка "Свернуть" внизу аккордеона */ .details-collapse{ margin-top: 1.5rem !important; display: flex; justify-content: flex-end; } .details-collapse__btn{ appearance: none; border: 0; background: none; display: inline-flex; align-items: center; gap: .45em; font: inherit; font-weight: 600; color: var(--gold); cursor: pointer; padding: .25rem .1rem; border-radius: 8px; transition: color .2s ease, transform .2s ease, background-color .2s ease; } .details-collapse__btn:hover{ color: var(--gold-strong); transform: translateY(-1px); } .details-collapse__btn:focus-visible{ outline: none; box-shadow: var(--ring); } .details-collapse__btn i{ font-size: .95em; } /* На фоне таблиц чуть подложим прозрачный фон, чтобы клик был комфортнее */ .details-collapse__btn:hover{ /*background-color: color-mix(in srgb, var(--gold) 10%, transparent);*/ } .details-collapse__btn span:hover { text-decoration: underline; } /* 🌙 Тёмная — поведение сохраняем, цвета уже тёплые */ @media (prefers-color-scheme: dark){ .details-collapse__btn:hover{ background-color: color-mix(in srgb, var(--gold) 16%, transparent); } } /* ===== Глобальный сброс визуальных выделений (iOS / Safari / Mobile) ===== */ :focus, :focus-visible, :active { outline: none !important; box-shadow: none !important; } /* управляемый фокус * .focus-ring:focus-visible { outline: none; box-shadow: var(--ring); } * Базовая страховка: * a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { box-shadow: var(--ring); outline: none; border-radius: 10px; } */ /* Убираем серую вспышку при тапе */ * { -webkit-tap-highlight-color: transparent; } /* Для ссылок, кнопок и SVG-иконок */ a, button, svg { -webkit-tap-highlight-color: transparent; outline: none; box-shadow: none; } /* ========================= Контакты: выравнивание и QR ========================= */ #contacts .card { display: flex; flex-direction: column; /*justify-content: space-between;*/ gap: 0.5rem; } #contacts .contact-info { display: flex; flex-direction: column; gap: 0.25rem; /* небольшой отступ между строками */ } #contacts .qr-block { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0.5rem 0; } #contacts .qr-block img { max-width: 140px; height: auto; margin-bottom: 0.35rem; border-radius: 0.5rem; border: 1px solid #ddd; box-shadow: 0 2px 4px rgba(0,0,0,.08); } #contacts .qr-block p { font-size: 0.75rem; line-height: 1.1; color: rgba(0,0,0,.7); } /* Кнопка на мобильных — чуть компактнее */ @media (max-width: 767px) { #contacts .btn-gold { font-size: 0.875rem; padding: 0.5rem 0.75rem; border-radius: 8px; } } /* Лёгкое выравнивание иконок соцсетей */ #contacts .social-icon { width: 38px; height: 38px; border: 1px solid #d5b87a; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all .25s ease; } #contacts .social-icon:hover { background-color: #d5b87a; color: #fff; transform: translateY(-2px); } /* #contacts .card { background: #fff; } #contacts img[alt="QR код Ателье VERRA"] { transition: transform 0.3s ease; } #contacts img[alt="QR код Ателье VERRA"]:hover { transform: scale(1.05); } #contacts .btn-gold { background-color: var(--gold); color: #fff; border-radius: 8px; font-weight: 500; } #contacts .btn-gold:hover { background-color: var(--gold-dark); } #contacts .social-icon { display: inline-flex; justify-content: center; align-items: center; width: 38px; height: 38px; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold); transition: all 0.3s ease; } #contacts .social-icon:hover { background-color: var(--gold); color: #fff; } */ /* ========================= Кнопка "Добавить в контакты" на мобильных ========================= */ @media (max-width: 767px) { #contacts .btn-gold { font-size: 0.875rem; padding: 0.45rem 0.9rem; border-radius: 8px; } #contacts .qr-block { align-items: flex-start; text-align: left; } } #messengerDynamic .messengers .fa-brands, #messengerDynamic .messengers .fa-classic.fa-brands, #messengerDynamic .messengers .fab, #messengerDynamic .messengers .fa-light, #messengerDynamic .messengers .fal, #reviewModal .messengers .fa-brands, #reviewModal .messengers .fa-classic.fa-brands, #reviewModal .messengers .fab, #reviewModal .messengers .fa-light, #reviewModal .messengers .fal, #contacts .messengers .fa-brands, #contacts .messengers .fa-classic.fa-brands, #contacts .messengers .fab, #contacts .messengers .fa-light, #contacts .messengers .fal { font-size: 17px; } /* =========================== PROMO — боковой ярлык (внутри .float-wrap только десктоп) =========================== */ #promoTab { position: fixed; /* независим от .float-wrap */ z-index: 9997; top: 20%; /* расположение по вертикали */ right: -130px; /* полностью за экраном */ transform: translateY(-50%); display: flex; align-items: center; gap: 10px; min-width: 165px; padding: 10px 10px; border: none; border-right: none; border-top-left-radius: 999px; border-bottom-left-radius: 999px; text-decoration: none; cursor: pointer; /* золотой градиент */ background: linear-gradient(135deg, var(--gold-soft, #d8bd86) 0%, var(--gold-dark, #c7a25b) 38%, var(--gold-strong,#b08a46) 100% ); color: var(--text-white, #f8f8f8); box-shadow: 0 10px 26px rgba(0,0,0,.18); transition: right .25s ease, box-shadow .2s ease, transform .2s ease, opacity .25s ease, visibility .25s ease; opacity: 0; visibility: hidden; } #promoTab .promo-tab__icon { font-size: 18px; line-height: 1; opacity:.98; filter: drop-shadow(0 1px 0 rgba(0,0,0,.18)); } #promoTab .promo-tab__label { font-weight: 700; white-space: nowrap; letter-spacing: .02em; text-shadow: 0 1px 0 rgba(0,0,0,.18); } /* ——— появляется вместе с другими float-кнопками ——— */ #promoTab.show { opacity: 1; visibility: visible; right: -130px; /* немного торчит из-за края */ } /* ——— при наведении — полностью выезжает ——— */ #promoTab:hover, #promoTab:focus { right: 0; transform: translateY(-50%); box-shadow: 0 14px 34px rgba(0,0,0,.24), 0 0 0 2px rgba(255,255,255,.15) inset; outline: none; } #promoTab:active { transform: translateY(-50%) scale(.995); } #promoTab:focus-visible { box-shadow: 0 0 0 3px rgba(255,255,255,.5), 0 12px 30px rgba(0,0,0,.26); } /* ——— тёмная тема ——— */ @media (prefers-color-scheme: dark) { #promoTab { color: #fff; box-shadow: 0 12px 30px rgba(0,0,0,.5); } } /* ——— скрываем на мобильных ——— */ @media (max-width: 1023.98px) { #promoTab { display: none; } } /* === Внутри модалки === */ #promoModal .modal-content{ max-width:520px; } .promo-code-wrap{ display:flex; align-items:stretch; gap:8px; margin:8px 0 14px; } .promo-code{ display:inline-flex; align-items:center; justify-content:center; padding:10px 14px; font-weight:800; letter-spacing:.06em; border-radius:10px; background: linear-gradient(0deg, rgba(0,0,0,.03), rgba(255,255,255,.85)); border:1px solid var(--line, rgba(0,0,0,.1)); } .promo-copy{ padding:0 12px; border-radius:10px; border:1px solid var(--line, rgba(0,0,0,.1)); background: var(--card, #fff); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; } /* .promo-howto h4{ font-weight:700; font-size:14px; opacity:.9; } .promo-howto ul{ margin:.25rem 0 .5rem 1.1rem; line-height:1.5; } .promo-note{ font-size:13px; opacity:.8; } */ /* Тёмная тема фоллбэк */ @media (prefers-color-scheme: dark){ .promo-tab{ background:#1a1a1a; color:#f3f3f3; border-color:rgba(255,255,255,.08); } .promo-code{ background:linear-gradient(0deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border-color:rgba(255,255,255,.12); } .promo-copy{ background:#1a1a1a; border-color:rgba(255,255,255,.12); } } /* === Мини-тост «Скопировано» === */ .copy-toast{ position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%) translateY(10px); background: rgba(0,0,0,0.85); color: #fff; font-size: 0.9rem; padding: 8px 16px; border-radius: 12px; opacity: 0; pointer-events: none; transition: opacity .3s ease, transform .3s ease; z-index: 99999; } .copy-toast.show{ opacity: 1; transform: translateX(-50%) translateY(0); } /* === Анимация кнопки при копировании === */ .promo-copy{ transition: transform .2s ease, box-shadow .2s ease, background .2s ease; } .promo-copy.copied{ transform: scale(1.15); background: linear-gradient(135deg, var(--gold, #c7a25b) 0%, var(--gold-strong,#b08a46) 100%); box-shadow: 0 0 12px rgba(199,162,91,.8); } /* ========== Utility ========== */ .note{font-size:.92em;opacity:.8} .debug{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9rem;background:#0b1020;color:#d6e1ff;padding:1rem;border-radius:.75rem;white-space:pre-wrap} /* ========================================= Desktop: выпадающее меню "Цены" ========================================= */ .nav-item{position:relative;display:flex;align-items:center} .nav-item--has-dropdown > .nav-link{display:inline-flex;align-items:center;gap:.25rem} .nav-item__caret{font-size:.8em;opacity:.8} .nav-dropdown{ position:absolute;top:100%;left:0; min-width:240px; background:var(--card,#fff); color:var(--text,#1f1b17); border:1px solid var(--line,#e6e6e6); border-radius:.75rem; box-shadow:0 18px 50px rgba(0,0,0,.18); padding:.5rem 0; z-index:50; /* анимация появления */ opacity:0; transform:translateY(6px); pointer-events:none; transition:opacity .16s ease-out, transform .16s ease-out; } .nav-item--has-dropdown:hover .nav-dropdown, .nav-item--has-dropdown:focus-within .nav-dropdown{ opacity:1; transform:translateY(0); pointer-events:auto; } .nav-dropdown__link{ display:block; padding:.55rem 1rem; font-size:.875rem; white-space:nowrap; color:inherit; } .nav-dropdown__link:hover{background:rgba(0,0,0,.04)} /* Тонкая тёмная тема (если фон хедера тёмный) */ @media (prefers-color-scheme: dark){ .header--transparent .nav-dropdown{ background:rgba(20,16,13,.98); color:rgba(255,255,255,.92); border-color:rgba(255,255,255,.08); box-shadow:0 18px 50px rgba(0,0,0,.45); } .header--transparent .nav-dropdown__link:hover{ background:rgba(255,255,255,.06); } } /* ========================================= Mobile drawer: подменю с анимацией ========================================= */ .drawer__link--toggle{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; width: 100%; } .drawer__caret{font-size:.9em; transition:transform .18s ease} .drawer__link--toggle[aria-expanded="true"] .drawer__caret{transform:rotate(180deg)} /* базовое состояние подменю */ .drawer__submenu{ margin:.25rem 0 .5rem 0; padding-left:.75rem; border-left:1px solid rgba(255,255,255,.12); /* анимация высоты/прозрачности */ max-height:0; overflow:hidden; opacity:0; transition:max-height .22s ease, opacity .15s ease; } /* при открытии */ .drawer__submenu.drawer__submenu--open{ max-height:700px; /* запас */ opacity:1; } /* элементы подменю */ .drawer__link--sub{ display:block; font-size:.92rem; opacity:.9; padding:.2rem 0; } /* (не используем display:flex для .drawer__submenu, чтобы не ломать анимацию max-height) */ /* активная ссылка */ .nav-link--active { color: var(--gold, #9b7b4b); font-weight: 600; } .nav-dropdown[hidden] { display: none; } .drawer__submenu[hidden] { display: none; }