/* SHUNGITE — тема «Ательє» (темна студія) * Стримана темна РОЗКІШ: галерейно/музейно, матове скло + брендове золото/латунь. * База (assets/base.css) підключена -ом у — тут лише оверрайд токенів і секцій. * БЕЗ неону: жодного cyan/синього/фіолету — тільки камінь і золото. */ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=Unbounded:wght@400;500;600;700;800;900&display=swap'); /* ============================================================ * ТОКЕНИ — палітра «Ательє» * ============================================================ */ :root { --bg-darker: #0a0a0c; --bg-dark: #101014; --bg-card: rgba(24, 22, 26, 0.6); --bg-card-hover: rgba(30, 27, 32, 0.78); --border-color: rgba(201, 162, 75, 0.14); --border-hover: rgba(201, 162, 75, 0.5); --primary-gradient: linear-gradient(135deg, #e6cd94 0%, #c9a24b 50%, #9a7838 100%); --accent-cyan: #c9a24b; /* акцент = золото */ --accent-blue: #9a7838; /* глибша латунь */ --accent-cyan-glow: rgba(201, 162, 75, 0.28); --accent-blue-glow: rgba(154, 120, 56, 0.22); --text-primary: #efe9df; --text-secondary: #b3aca0; --text-muted: #7c756a; --text-accent: #e6cd94; --card-shadow: 0 18px 50px 0 rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04); --glow-shadow: 0 0 24px rgba(201, 162, 75, 0.22); --glass-blur: blur(18px); } /* ============================================================ * ТИПОГРАФІКА — тонша, елегантніша (менша вага + letter-spacing) * ============================================================ */ h1, h2, h3, h4 { font-weight: 500; letter-spacing: -0.008em; } .hero h1 { font-weight: 500; letter-spacing: -0.01em; line-height: 1.14; } .section-header p { color: var(--text-secondary); line-height: 1.7; } /* Заголовковий градієнт — стримане золото з мʼяким сяянням */ .text-gradient { background: linear-gradient(135deg, #f0dcae, #e6cd94 45%, #c9a24b); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: shineText 8s linear infinite; } @keyframes shineText { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Більше повітря — галерейні відступи */ .section { padding: 128px 0; } .section-header { max-width: 640px; margin: 0 auto 72px; } /* ============================================================ * ФОН — приглушені золоті орби + тонке зерно (без диско, без неону) * ============================================================ */ .background-glow { display: block; } .glow-orb { opacity: 0.1; filter: blur(160px); mix-blend-mode: normal; } .orb-1 { background: radial-gradient(circle, #b8935a 0%, transparent 70%); } .orb-2 { background: radial-gradient(circle, #c9a24b 0%, transparent 70%); } .orb-3, .background-glow .orb-3 { background: radial-gradient(circle, #9a7838 0%, transparent 70%); } .grain-overlay { display: block; opacity: 0.03; } /* ============================================================ * HERO — «експонат ательє»: 2 колонки, ліворуч текст, праворуч * скляна картка з фото g-decor-interior у тонкій золотій рамці. * (розмітка hero має лише .hero-content — візуал додаємо через ::after) * ============================================================ */ .hero { padding: calc(var(--header-height) + 76px) 0 96px; } .hero-grid { position: relative; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center; } .hero-content { position: relative; z-index: 2; } /* Мʼяке золоте світіння за експонатом */ .hero-grid::before { content: ''; position: absolute; z-index: 0; right: -3%; top: 50%; width: 44%; aspect-ratio: 1; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(201, 162, 75, 0.16), transparent 68%); filter: blur(60px); pointer-events: none; } /* Скляна картка-експонат */ .hero-grid::after { content: ''; position: relative; z-index: 1; align-self: center; width: 100%; min-height: clamp(380px, 44vw, 540px); border-radius: 26px; background: linear-gradient(160deg, rgba(230, 205, 148, 0.06), rgba(0, 0, 0, 0) 55%), url('../assets/img/g-decor-interior.webp') center / cover no-repeat; border: 1px solid rgba(201, 162, 75, 0.28); box-shadow: 0 36px 90px rgba(0, 0, 0, 0.62), inset 0 0 0 1px rgba(230, 205, 148, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.05); } /* Tagline — тонкий золотий хайрлайн-бейдж */ .tagline { color: var(--text-accent); background: rgba(201, 162, 75, 0.06); border: 1px solid rgba(201, 162, 75, 0.2); font-weight: 600; letter-spacing: 0.12em; } .tagline-dot { background-color: var(--accent-cyan); box-shadow: 0 0 10px var(--accent-cyan); } .hero-stats { border-top: 1px solid var(--border-color); } .stat-item h3 { color: var(--text-primary); font-weight: 600; } /* ============================================================ * КНОПКИ — тепле золото, delikатний hover * ============================================================ */ .btn { font-weight: 600; letter-spacing: 0.01em; } .btn-primary { color: #201603; box-shadow: 0 6px 18px rgba(154, 120, 56, 0.35), 0 0 0 0.5px rgba(230, 205, 148, 0.25); } .btn-primary::before { background: linear-gradient(135deg, #f0dcae 0%, #c9a24b 100%); } .btn-primary:hover { box-shadow: 0 10px 28px rgba(154, 120, 56, 0.5), 0 0 26px rgba(230, 205, 148, 0.28); } .btn-secondary { background: rgba(255, 255, 255, 0.03); border-color: var(--border-color); } .btn-secondary:hover { background: rgba(201, 162, 75, 0.08); border-color: var(--border-hover); } .btn-accent { background: rgba(201, 162, 75, 0.08); color: var(--text-accent); border: 1px solid rgba(201, 162, 75, 0.25); } .btn-accent:hover { background: rgba(201, 162, 75, 0.16); border-color: var(--accent-cyan); box-shadow: var(--glow-shadow); } /* ============================================================ * СКЛЯНІ КАРТКИ — матове скло + світловий блік * ============================================================ */ .glass-card { position: relative; overflow: hidden; box-shadow: var(--card-shadow); transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.45s ease, box-shadow 0.45s ease; } .glass-card::after { content: ''; position: absolute; top: 0; left: -50%; width: 200%; height: 100%; background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(230, 205, 148, 0.04) 50%, rgba(255, 255, 255, 0) 100%); transform: skewX(-25deg); transition: 0.75s; pointer-events: none; } .glass-card:hover { transform: translateY(-5px); border-color: var(--border-hover); box-shadow: 0 24px 55px rgba(0, 0, 0, 0.6), 0 0 30px rgba(201, 162, 75, 0.12); } .glass-card:hover::after { left: 125%; } /* ============================================================ * ХЕДЕР / МОБ. МЕНЮ — темне скло, золото * ============================================================ */ header.scrolled { background: rgba(10, 10, 12, 0.82); border-bottom: 1px solid var(--border-color); } .mobile-menu { background: rgba(10, 10, 12, 0.96); border-left: 1px solid var(--border-color); } .mobile-menu a:hover { color: var(--accent-cyan); } .header-cart:hover { border-color: var(--border-hover); color: var(--accent-cyan); } /* ============================================================ * TRUST-БАНЕР — стриманий, золоті іконки * ============================================================ */ .trust-banner { padding: 56px 0; background: rgba(20, 18, 22, 0.35); } .trust-icon-wrapper { color: var(--accent-cyan); background: rgba(201, 162, 75, 0.08); border: 1px solid rgba(201, 162, 75, 0.18); } /* ============================================================ * ЖИВА ВОДА — слайдер до/після + кроки (золото) * ============================================================ */ .water-step__num { background: rgba(201, 162, 75, 0.1); color: var(--text-accent); border: 1px solid rgba(201, 162, 75, 0.18); } .before-after-slider { border-radius: 22px; border: 1px solid var(--border-color); box-shadow: 0 24px 55px rgba(0, 0, 0, 0.6); } .slider-handle { box-shadow: 0 0 15px var(--accent-cyan); } .slider-handle-button { background: var(--bg-dark); border: 2px solid var(--accent-cyan); box-shadow: 0 0 20px var(--accent-cyan-glow), var(--card-shadow); color: var(--accent-cyan); } .before-after-slider:hover .slider-handle-button { background: var(--accent-cyan); color: var(--bg-darker); } .slider-label.after { color: var(--accent-cyan); border-color: rgba(201, 162, 75, 0.25); } /* ============================================================ * SHOP-КАРТКИ — матове скло, тонка золота рамка, ціна золотом * ============================================================ */ .shop-card { backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); } .shop-card:hover { border-color: rgba(201, 162, 75, 0.5); transform: translateY(-6px); box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(201, 162, 75, 0.12); } .shop-card__price { color: var(--text-accent); font-weight: 700; } .shop-card__hit { background: var(--primary-gradient); color: #201603; } .shop-card__cat { background: rgba(10, 10, 12, 0.55); border: 1px solid rgba(230, 205, 148, 0.12); } .shop-card__add { border: 1px solid rgba(201, 162, 75, 0.35); color: var(--text-accent); } .shop-card__add:hover { background: var(--accent-cyan); border-color: var(--accent-cyan); color: #201603; box-shadow: var(--glow-shadow); } /* Фільтр-чіпи (каталог) */ .chip:hover { color: var(--text-primary); border-color: var(--border-hover); } .chip.active { background: var(--primary-gradient); border-color: transparent; color: #201603; } /* ============================================================ * ГАЛЕРЕЯ ЕКСПОНАТІВ — cat-tiles + cine-gallery: музейні рамки * ============================================================ */ .cat-tile, .cine-shot { border: 1px solid var(--border-color); box-shadow: inset 0 0 0 1px rgba(230, 205, 148, 0.05); } .cat-tile:hover, .cine-shot:hover { border-color: rgba(201, 162, 75, 0.42); box-shadow: inset 0 0 0 1px rgba(230, 205, 148, 0.14), 0 22px 50px rgba(0, 0, 0, 0.5); } .cat-tile__label h3 { font-weight: 500; letter-spacing: 0.01em; } .cat-tile__label span { letter-spacing: 0.04em; } .cine-shot figcaption { font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.72rem; } /* ============================================================ * FAQ — тонкі золоті хайрлайни * ============================================================ */ .faq-item { background: rgba(24, 22, 26, 0.45); border: 1px solid var(--border-color); } .faq-item:hover { border-color: rgba(201, 162, 75, 0.28); background: rgba(24, 22, 26, 0.6); } .faq-item.active { background: rgba(24, 22, 26, 0.72); border-color: rgba(201, 162, 75, 0.35); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3); } /* ============================================================ * CTA / ФУТЕР — глибокий чорний * ============================================================ */ .cine-cta { border: 1px solid var(--border-hover); } footer { background: #070709; border-top: 1px solid var(--border-color); } .social-btn:hover { background: rgba(201, 162, 75, 0.1); border-color: var(--accent-cyan); color: var(--accent-cyan); } /* ============================================================ * КОШИК — FAB золото, drawer темне матове скло * ============================================================ */ .cart-fab { background: var(--primary-gradient); color: #201603; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), var(--glow-shadow); } .cart-backdrop { background: rgba(6, 6, 9, 0.66); } .cart-drawer { background: rgba(16, 15, 18, 0.85); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-left: 1px solid var(--border-color); } .cart-drawer__foot { background: rgba(10, 10, 12, 0.7); } .cart-drawer__close:hover { border-color: var(--border-hover); color: var(--accent-cyan); } .cart-qty-btn:hover { background: var(--accent-cyan); color: #201603; border-color: var(--accent-cyan); } /* Тост і демо-модалка — прибрати неон, золоті акценти */ .toast { border: 1px solid var(--accent-cyan); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(201, 162, 75, 0.22); } .demo-modal-icon { background: rgba(201, 162, 75, 0.14); color: #9a7838; } .demo-modal-btn { background: linear-gradient(135deg, #c9a24b 0%, #9a7838 100%); box-shadow: 0 8px 20px -6px rgba(154, 120, 56, 0.5); } .demo-modal-btn:hover { box-shadow: 0 12px 26px -6px rgba(154, 120, 56, 0.6); } /* ============================================================ * PAGE-HERO (підсторінки) — тонша типографіка * ============================================================ */ .page-hero h1 { font-weight: 500; } .page-hero::after { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, var(--bg-darker) 100%); } /* Зірковий бадж студії Кузня */ .kuznya-badge { background: rgba(16, 15, 18, 0.85); border-color: rgba(201, 162, 75, 0.35); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); } .kuznya-badge:hover { border-color: var(--accent-cyan); box-shadow: 0 0 20px rgba(201, 162, 75, 0.25); } /* ============================================================ * АДАПТИВ hero-експоната * ============================================================ */ @media (max-width: 1024px) { .hero-grid { grid-template-columns: 1fr; gap: 44px; text-align: center; } .hero-grid::before { display: none; } .hero-grid::after { min-height: 0; aspect-ratio: 16 / 10; max-width: 560px; margin: 4px auto 0; } } @media (max-width: 768px) { .hero-grid::before, .hero-grid::after { display: none; } .section { padding: 88px 0; } } /* ============================================================ * REDUCED MOTION * ============================================================ */ @media (prefers-reduced-motion: reduce) { .text-gradient { animation: none; } .glow-orb { animation: none; } .tagline-dot { animation: none; } .glass-card, .glass-card::after, .shop-card, .cat-tile, .cine-shot { transition: none !important; } }