/* ЧИСТО·ПРО — тема «Темне кіно» * Темна драматична кінематографічна тема: full-bleed фото-фони, теплий бурштиновий * прожектор-акцент, летербокс-градієнти, кіноплівкове зерно та вінʼєтка. * Імпортує базу й перевизначає токени, hero та секції під максимальний кіно-ефект. */ @import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;500;600;700;800;900&family=Manrope:wght@300;400;500;600;700&display=swap'); /* base.css лінкується напряму в кожної сторінки (v=5) */ :root { --bg-darker: #06080d; --bg-dark: #0a0d15; --bg-card: rgba(16, 18, 26, 0.62); --bg-card-hover: rgba(26, 22, 20, 0.78); --border-color: rgba(255, 255, 255, 0.07); --border-hover: rgba(230, 169, 78, 0.55); /* Брендове золото/латунь SHUNGITE замість холодного cyan */ --primary-gradient: linear-gradient(135deg, #d8b57e 0%, #c9a24b 45%, #9a7838 100%); --accent-cyan: #c9a24b; /* база всюди тягне цю змінну — перефарбовуємо в золото */ --accent-blue: #9a7838; --accent-cyan-glow: rgba(201, 162, 75, 0.32); --accent-blue-glow: rgba(154, 120, 56, 0.25); --text-primary: #f6f1ea; --text-secondary: #b6ab9c; --text-muted: #7d7469; --text-accent: #f2c07a; --card-shadow: 0 18px 50px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.04); --glow-shadow: 0 0 28px rgba(230, 169, 78, 0.3); --glass-blur: blur(14px); } /* Кіноплівкове зерно — трохи помітніше */ .grain-overlay { display: block; opacity: 0.05; } /* Вимикаємо кольорові неон-орбі — кіно тримається на фото, не на світінні */ .background-glow { display: none; } /* Глобальна вінʼєтка — стягує кадр до центру, кіно-відчуття */ body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(120% 90% at 50% 42%, transparent 55%, rgba(0, 0, 0, 0.55) 100%); } /* Золотий «shine» заголовок */ .text-gradient { background: linear-gradient(120deg, #f7cd8e, #e6a94e 55%, #b9741f); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: shineGold 7s linear infinite; } @keyframes shineGold { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } h1, h2, h3, h4 { font-weight: 800; letter-spacing: -0.02em; } /* Кінематографічний kicker-tagline */ .tagline { background: rgba(230, 169, 78, 0.09); color: var(--text-accent); border: 1px solid rgba(230, 169, 78, 0.22); letter-spacing: 0.16em; } .tagline-dot { background: var(--accent-cyan); box-shadow: 0 0 10px var(--accent-cyan); } /* ============ HERO — full-bleed кінокадр ============ */ .hero { position: relative; min-height: 100vh; overflow: hidden; align-items: flex-end; padding-bottom: 9vh; } .hero-grid { display: block; width: 100%; } .hero-visual { display: none; } /* прибираємо праву скляну картку — фото на весь екран */ .hero::before { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(6, 8, 13, 0.94) 0%, rgba(6, 8, 13, 0.72) 38%, rgba(6, 8, 13, 0.25) 70%, rgba(6, 8, 13, 0.15) 100%), linear-gradient(0deg, #06080d 2%, rgba(6, 8, 13, 0.15) 42%, rgba(6, 8, 13, 0.55) 100%), url('../assets/img/g-hero-sphere.webp') right center / cover no-repeat; transform: scale(1.02); animation: heroDrift 26s ease-in-out infinite alternate; } @keyframes heroDrift { from { transform: scale(1.02) translateY(0); } to { transform: scale(1.09) translateY(-1.5%); } } .hero-content { position: relative; z-index: 2; max-width: 640px; text-align: left; } .hero h1 { font-size: clamp(2.8rem, 7vw, 5.2rem); line-height: 1.02; text-shadow: 0 4px 40px rgba(0, 0, 0, 0.5); } .hero-desc { color: #cec4b6; max-width: 500px; } .hero-stats { border-top-color: rgba(255, 255, 255, 0.12); } .stat-item h3 { color: var(--text-accent); } /* ============ СЕКЦІЇ З ФОТО-ФОНАМИ ============ */ /* Trust banner — кінематографічна темна смуга поверх фото */ .trust-banner { position: relative; background: linear-gradient(rgba(6, 8, 13, 0.9), rgba(6, 8, 13, 0.94)), url('../assets/img/bg-stone.webp') center / cover no-repeat; border-color: rgba(255, 255, 255, 0.06); } .trust-icon-wrapper { background: rgba(230, 169, 78, 0.1); color: var(--accent-cyan); border-color: rgba(230, 169, 78, 0.2); } /* Послуги — глибокий кіно-градієнт */ #services { background: radial-gradient(90% 60% at 50% 0%, rgba(200, 128, 43, 0.06), transparent 70%), #08090f !important; border-color: rgba(255, 255, 255, 0.06) !important; } .service-badge { background: rgba(230, 169, 78, 0.12); color: var(--text-accent); } /* Кінематографічний градієнт-overlay на кожній картці-фото */ .service-card-image { position: relative; } .service-card-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6, 8, 13, 0.55) 0%, transparent 45%); pointer-events: none; } .service-price-tag { color: var(--text-accent); } /* Процес — фото-фон із летербокс-скримом */ #process { position: relative; background: linear-gradient(rgba(6, 8, 13, 0.86), rgba(6, 8, 13, 0.92)), url('../assets/img/bg-stone.webp') center / cover no-repeat !important; border-color: rgba(255, 255, 255, 0.06) !important; } .process-step { background: rgba(14, 16, 24, 0.6); border: 1px solid var(--border-color); padding: 30px; border-radius: 18px; backdrop-filter: blur(6px); transition: all 0.35s ease; } .process-step:hover { border-color: rgba(230, 169, 78, 0.4); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4), 0 0 24px rgba(230, 169, 78, 0.1); transform: translateY(-4px); } .step-num { font-family: var(--font-display); font-weight: 900; font-size: 2.4rem; line-height: 1; margin-bottom: 12px; background: linear-gradient(135deg, #f2c07a, #c8802b); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Before/After — кіно-рамка */ .before-after-slider { border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 26px 60px rgba(0, 0, 0, 0.65); } .slider-handle-button { background: #0a0d15; border: 2px solid var(--accent-cyan); color: var(--accent-cyan); box-shadow: 0 0 22px var(--accent-cyan-glow); } .slider-handle-button:hover { background: var(--accent-cyan); color: #06080d; box-shadow: 0 0 30px var(--accent-cyan); } .slider-label.after { color: var(--accent-cyan); border-color: rgba(230, 169, 78, 0.28); } /* Преміум-картки зі скляним «блиском» */ .glass-card { position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .glass-card::after { content: ''; position: absolute; top: 0; left: -60%; width: 200%; height: 100%; background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.04) 50%, transparent 100%); transform: skewX(-22deg); transition: 0.8s; pointer-events: none; } .glass-card:hover { transform: translateY(-5px); border-color: var(--border-hover); } .glass-card:hover::after { left: 120%; } /* Калькулятор */ .counter-btn:hover { background: var(--accent-cyan); border-color: var(--accent-cyan); color: #06080d; } .custom-range::-webkit-slider-thumb { background: var(--accent-cyan); box-shadow: 0 0 10px var(--accent-cyan); } .segment-btn.active { box-shadow: 0 4px 14px rgba(230, 169, 78, 0.28); } /* CTA-блок — фінальний кінокадр */ .cta-block { position: relative; overflow: hidden; border-radius: 26px; background: #0a0d15 !important; border-color: rgba(230, 169, 78, 0.25) !important; } .cta-block::before { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(rgba(6, 8, 13, 0.62), rgba(6, 8, 13, 0.82)), url('../assets/img/bg-stone.webp') center / cover no-repeat; } /* FAQ */ .faq-item.active { border-color: rgba(230, 169, 78, 0.35); background: rgba(20, 18, 16, 0.6); } /* Бадж студії Кузня — теплий акцент */ .kuznya-badge { --o: #e6a94e; --og: rgba(230, 169, 78, 0.45); background: rgba(12, 12, 18, 0.7); border-color: rgba(230, 169, 78, 0.3); } /* Мобільна адаптація hero */ @media (max-width: 600px) { .hero { min-height: 92vh; padding-bottom: 7vh; } .hero h1 { font-size: clamp(1.4rem, 6vw, 2rem); letter-spacing: -0.03em; overflow-wrap: break-word; } .hero::before { background: linear-gradient(0deg, #06080d 3%, rgba(6, 8, 13, 0.35) 45%, rgba(6, 8, 13, 0.6) 100%), url('../assets/img/g-hero-sphere.webp') center 30% / cover no-repeat; animation: none; } }