/* SHUNGITE — тема «Жива вода» (СВІТЛА) * Чиста преміальна тепла палітра: кремове тло, глибоке золото як акцент, * делікатний водяний бірюзовий штрих. Serif-дисплей Cormorant Garamond. * Каскад: ../assets/base.css (лінкується напряму в ) → ця тема. * @import base.css НАВМИСНО прибрано, щоб уникнути подвійного завантаження. */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Manrope:wght@300;400;500;600;700&display=swap'); /* ============================================================ * 1. ТОКЕНИ — світла преміальна палітра * ============================================================ */ :root { --bg-darker: #f5f1e9; /* тепла кремова сторінка */ --bg-dark: #efe8db; /* трохи темніший крем для alt-секцій */ --bg-card: #ffffff; --bg-card-hover: #fbf7ef; --text-primary: #1d1a14; /* майже чорний теплий */ --text-secondary: #5b544a; --text-muted: #8b8478; --text-accent: #8a6a24; --border-color: rgba(30, 26, 18, .10); --border-hover: rgba(168, 132, 47, .5); --accent-cyan: #a8842f; /* глибоке золото — головний акцент */ --accent-blue: #8a6a24; --accent-cyan-glow: rgba(168, 132, 47, .18); --accent-blue-glow: rgba(168, 132, 47, .12); --primary-gradient: linear-gradient(135deg, #c8a24b 0%, #a8842f 100%); /* водяний акцент — дозовано */ --water: #2f8f84; /* Шрифти */ --font-display: 'Cormorant Garamond', Georgia, serif; --font-body: 'Manrope', system-ui, -apple-system, sans-serif; --card-shadow: 0 16px 44px rgba(60, 50, 25, .10); --glow-shadow: 0 10px 26px -10px rgba(168, 132, 47, .45); --glass-blur: blur(0px); } /* Прибираємо темні футуристичні декорації бази */ .background-glow, .grain-overlay { display: none !important; } html { background-color: var(--bg-darker); color: var(--text-primary); } body { color: var(--text-primary); } ::selection { background: var(--accent-cyan); color: #fff; } ::-webkit-scrollbar-track { background: var(--bg-darker); } ::-webkit-scrollbar-thumb { background: #d8ccb4; border: 2px solid var(--bg-darker); } ::-webkit-scrollbar-thumb:hover { background: var(--accent-cyan); } /* ============================================================ * 2. Типографіка — serif-дисплей * ============================================================ */ h1, h2, h3, h4 { font-family: var(--font-display) !important; font-weight: 500 !important; letter-spacing: -0.01em !important; color: var(--text-primary); } h1 { font-size: clamp(2.6rem, 5vw, 4.2rem) !important; line-height: 1.05 !important; } h2 { font-size: clamp(2rem, 4vw, 3rem) !important; line-height: 1.15 !important; } h3 { font-size: clamp(1.4rem, 2.5vw, 1.8rem) !important; } /* Золотий градієнт-акцент у заголовках (глибший — щоб читалось на кремі) */ .text-gradient { background: linear-gradient(120deg, #b8901f 0%, #8a6a24 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } p { color: var(--text-secondary); } /* ============================================================ * 3. Кнопки — преміальний темний CTA, золото як акцент * ============================================================ */ .btn { border-radius: 12px; font-weight: 600; letter-spacing: 0.01em; } .btn-primary { background: #201b14; color: #ffffff; box-shadow: 0 14px 30px -12px rgba(32, 27, 20, .5); } .btn-primary::before { content: none !important; display: none !important; } .btn-primary:hover { background: #2e261c; box-shadow: 0 18px 38px -12px rgba(32, 27, 20, .6); transform: translateY(-2px); } .btn-secondary { background: #ffffff; border: 1px solid var(--border-color); color: var(--text-primary); backdrop-filter: none; -webkit-backdrop-filter: none; } .btn-secondary:hover { background: var(--bg-card-hover); border-color: var(--accent-cyan); color: var(--accent-cyan); transform: translateY(-2px); } /* ============================================================ * 4. Хедер + мобільне меню — світле скло * ============================================================ */ header.scrolled { background: rgba(250, 247, 240, .9); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--border-color); } header .logo { color: var(--text-primary); } header .logo span { color: var(--accent-cyan); } .nav-links a { color: var(--text-secondary); } .nav-links a:hover, .nav-links a.active { color: var(--text-primary); } .burger span { background-color: var(--text-primary); } .header-cart { color: var(--text-primary); border-color: var(--border-color); } .header-cart:hover { border-color: var(--border-hover); color: var(--accent-cyan); } .mobile-menu { background: rgba(250, 247, 240, .97); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-left: 1px solid var(--border-color); } .mobile-menu a { color: var(--text-primary); } .mobile-menu a:hover { color: var(--accent-cyan); } /* ============================================================ * 5. HERO — світла секція: текст зліва, світле фото у рамці справа * ============================================================ */ .hero { position: relative; overflow: hidden; min-height: 86vh; padding: calc(var(--header-height) + 64px) 0 90px; background: var(--bg-darker); } .hero-grid { display: block; width: 100%; } .hero-content { position: relative; z-index: 3; max-width: 560px; } .hero h1 { color: var(--text-primary); } .hero-desc { color: var(--text-secondary); } /* Фото-картка праворуч (десктоп) */ .hero::after { content: ''; position: absolute; top: 50%; right: clamp(20px, 5vw, calc((100vw - var(--container-width)) / 2 + 24px)); transform: translateY(-50%); width: min(42vw, 500px); aspect-ratio: 4 / 5; z-index: 1; border-radius: 28px; background: url('../assets/img/hero-catalog.webp') center / cover no-repeat; box-shadow: 0 34px 70px -24px rgba(60, 50, 25, .32), 0 0 0 1px rgba(30, 26, 18, .05); } /* Легкий кремовий градієнт для ліва — щоб фото не тиснуло на текст */ .hero::before { content: ''; position: absolute; inset: 0; z-index: 0; display: none; /* вмикається лише на планшеті/мобілці */ background: linear-gradient(rgba(245, 241, 233, .9), rgba(245, 241, 233, .82)), url('../assets/img/hero-catalog.webp') center / cover no-repeat; } .tagline { background: rgba(168, 132, 47, .09); color: var(--accent-cyan); border: 1px solid rgba(168, 132, 47, .2); border-radius: 8px; } .tagline-dot { background: var(--water); /* водяний штрих «жива вода» */ box-shadow: 0 0 8px rgba(47, 143, 132, .55); } .hero-stats { border-top: 1px solid var(--border-color); } .stat-item h3 { color: var(--text-primary); } .stat-item p { color: var(--text-muted); } /* ============================================================ * 6. Секції-довіра / банери * ============================================================ */ .trust-banner { background: #ffffff; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); } .trust-icon-wrapper { background: rgba(168, 132, 47, .08); color: var(--accent-cyan); border: 1px solid rgba(168, 132, 47, .16); } .trust-text p { color: var(--text-secondary); } .section-header p { color: var(--text-secondary); } /* ============================================================ * 7. Жива вода — кроки + before/after * ============================================================ */ .water-split__media { box-shadow: var(--card-shadow); } .water-step__num { background: var(--accent-cyan-glow); color: var(--accent-cyan); } .before-after-slider { border-radius: 26px; box-shadow: 0 18px 50px -16px rgba(60, 50, 25, .18); border: 1px solid var(--border-color); } .slider-handle-button { background: #ffffff; border: 2px solid var(--accent-cyan); color: var(--accent-cyan); box-shadow: 0 8px 20px rgba(60, 50, 25, .15); } .before-after-slider:hover .slider-handle-button { background-color: #fff; } /* «Звичайна» лишаємо стриманим сірим, «З шунгітом» — водяний акцент */ .slider-label { background: rgba(255, 255, 255, .82); border: 1px solid var(--border-color); backdrop-filter: blur(8px); } .slider-label.before { color: #a06a5a; border-color: rgba(160, 106, 90, .3); } .slider-label.after { color: var(--water); border-color: rgba(47, 143, 132, .35); } .before-after-desc { color: var(--text-secondary); } /* ============================================================ * 8. Картки товарів * ============================================================ */ .shop-card { background: var(--bg-card); border: 1px solid var(--border-color); box-shadow: 0 10px 30px -18px rgba(60, 50, 25, .22); backdrop-filter: none; -webkit-backdrop-filter: none; } .shop-card:hover { border-color: var(--border-hover); box-shadow: 0 22px 50px -20px rgba(60, 50, 25, .3); } .shop-card__media { background: var(--bg-dark); } .shop-card__name { color: var(--text-primary); } .shop-card__price { color: var(--accent-cyan); } .shop-card__add { border: 1px solid var(--border-hover); color: var(--accent-cyan); background: transparent; } .shop-card__add:hover { background: var(--accent-cyan); border-color: var(--accent-cyan); color: #fff; box-shadow: var(--glow-shadow); } .shop-card__hit { background: var(--primary-gradient); color: #fff; } .shop-card__cat { background: rgba(29, 26, 20, .55); color: #fff; } /* Фільтр-чіпи */ .chip { background: #ffffff; border: 1px solid var(--border-color); color: var(--text-secondary); } .chip:hover { color: var(--text-primary); border-color: var(--border-hover); } .chip.active { background: #201b14; border-color: transparent; color: #fff; box-shadow: 0 8px 20px -8px rgba(32, 27, 20, .5); } /* ============================================================ * 9. Категорії / кіно-галерея (фото з темними скримами — ок) * ============================================================ */ .cat-tile { border: 1px solid var(--border-color); } .cat-tile:hover { border-color: var(--border-hover); } .cine-shot { border: 1px solid var(--border-color); } /* ============================================================ * 10. Page hero (каталог/підсторінки) — світлий * ============================================================ */ .page-hero { border-bottom: 1px solid var(--border-color); background: var(--bg-darker); } .page-hero__img { opacity: .2; } .page-hero::after { background: linear-gradient(to bottom, rgba(245, 241, 233, .72) 0%, var(--bg-darker) 100%); } .page-hero h1 { color: var(--text-primary); } .page-hero p { color: var(--text-secondary); } /* ============================================================ * 11. FAQ * ============================================================ */ .faq-item { background: var(--bg-card); border: 1px solid var(--border-color); } .faq-question { color: var(--text-primary); } .faq-question svg { color: var(--accent-cyan); } .faq-answer { color: var(--text-secondary); } .faq-item.active { border-color: rgba(168, 132, 47, .35); background: rgba(168, 132, 47, .05); } /* ============================================================ * 12. Кіно-CTA — світле водяне фото + білий скрим, темний текст * ============================================================ */ .cine-cta { border: 1px solid var(--border-hover); background: linear-gradient(rgba(255, 255, 255, .8), rgba(255, 255, 255, .88)), url('../assets/img/voda-after.webp') center / cover no-repeat; box-shadow: 0 24px 60px -30px rgba(60, 50, 25, .3); } .cine-cta img { display: none; } /* прибираємо темне g-cta-stones */ .cine-cta::after { content: none; display: none; } .cine-cta h2 { color: var(--text-primary); } .cine-cta p { color: var(--text-secondary); } /* ============================================================ * 13. Футер — глибокий графіт як преміальний контрастний акорд * ============================================================ */ footer { background: #201b14; border-top: 1px solid rgba(168, 132, 47, .2); color: rgba(245, 241, 233, .72); } footer .logo { color: #f5f1e9; } footer .logo span { color: var(--accent-cyan); } footer h4 { color: #f5f1e9; } footer .footer-brand p { color: rgba(245, 241, 233, .6); } .footer-links a, .footer-contact p { color: rgba(245, 241, 233, .7); } .footer-links a:hover { color: var(--accent-cyan); } .footer-contact p svg { color: var(--accent-cyan); } .social-btn { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); color: #f5f1e9; } .social-btn:hover { background: rgba(168, 132, 47, .18); border-color: var(--accent-cyan); color: var(--accent-cyan); } .footer-bottom { border-top-color: rgba(255, 255, 255, .1); color: rgba(245, 241, 233, .5); } .footer-bottom-links a { color: rgba(245, 241, 233, .5); } .footer-bottom-links a:hover { color: #f5f1e9; } /* ============================================================ * 14. Кошик — світлий кремовий, темний текст * ============================================================ */ .cart-fab { background: var(--primary-gradient); color: #fff; box-shadow: 0 14px 32px -10px rgba(168, 132, 47, .5); } .cart-count { background: var(--accent-cyan); color: #fff; border-color: var(--bg-darker); } .cart-backdrop { background: rgba(29, 26, 20, .45); } .cart-drawer { background: #faf7f1; border-left: 1px solid var(--border-color); box-shadow: -24px 0 60px -20px rgba(60, 50, 25, .3); } .cart-drawer__head { border-bottom: 1px solid var(--border-color); } .cart-drawer__head h3 { color: var(--text-primary); } .cart-drawer__close { border: 1px solid var(--border-color); color: var(--text-primary); } .cart-drawer__close:hover { border-color: var(--border-hover); color: var(--accent-cyan); } .cart-item { border-bottom: 1px solid var(--border-color); } .cart-item__img { background: var(--bg-dark); border: 1px solid var(--border-color); } .cart-item__name { color: var(--text-primary); } .cart-item__price { color: var(--text-muted); } .cart-item__sum { color: var(--accent-cyan); } .cart-qty-btn { background: var(--bg-dark); border: 1px solid var(--border-color); color: var(--text-primary); } .cart-qty-btn:hover { background: var(--accent-cyan); border-color: var(--accent-cyan); color: #fff; } .cart-item__remove:hover { color: #c0392b; } .cart-empty p { color: var(--text-secondary); } .cart-empty span { color: var(--text-muted); } .cart-drawer__foot { background: #ffffff; border-top: 1px solid var(--border-color); } .cart-drawer__total b { color: var(--accent-cyan); } /* ============================================================ * 15. Бейдж студії «Кузня» — світле скло на світлій темі * ============================================================ */ .kuznya-badge { background: rgba(255, 255, 255, .82); border: 1px solid var(--border-color); color: var(--text-primary); box-shadow: 0 10px 28px -12px rgba(60, 50, 25, .35); } .kuznya-badge__label { color: var(--text-muted); } .kuznya-badge__brand { color: var(--text-primary); } .kuznya-badge__arrow { color: var(--text-muted); } .kuznya-badge:hover { border-color: var(--accent-cyan); background: rgba(255, 255, 255, .95); } /* ============================================================ * 16. Focus-visible (доступність) * ============================================================ */ a:focus-visible, .btn:focus-visible, .faq-question:focus-visible, .nav-links a:focus-visible, .mobile-menu a:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; border-radius: 6px; } /* ============================================================ * 17. Адаптив * ============================================================ */ @media (max-width: 1024px) { /* Немає окремого .hero-visual у розмітці — на вузьких екранах фото стає легким тлом зі світлим скримом, текст центрується (base). */ .hero { min-height: auto; padding: calc(var(--header-height) + 40px) 0 64px; } .hero::after { display: none; } .hero::before { display: block; } .hero-content { max-width: 620px; margin: 0 auto; } } @media (max-width: 600px) { .hero h1 { font-size: clamp(2rem, 9vw, 2.7rem) !important; } .hero::before { background: linear-gradient(180deg, rgba(245, 241, 233, .95) 0%, rgba(245, 241, 233, .88) 60%, rgba(245, 241, 233, .82) 100%), url('../assets/img/hero-catalog.webp') center / cover no-repeat; } } /* ============================================================ * 18. Reduced motion * ============================================================ */ @media (prefers-reduced-motion: reduce) { .tagline-dot { animation: none !important; } .btn:hover, .shop-card:hover, .cat-tile:hover { transform: none !important; } }