/* Theme Name: Proinstrument Child Template: astra */ /* ====================================================== 1. GLOBAL VARIABLES ====================================================== */ :root { --font-main: 'Exo 2', sans-serif; /* Colors */ --pi-accent: #ff7a00; --pi-accent-hover: #ff922d; --pi-bg-base: #020305; /* Ультра-глубокий черный B2B */ --pi-text-main: #ffffff; --pi-text-muted: rgba(255,255,255,0.75); /* Borders & Glass */ --pi-border: rgba(255,255,255,0.06); --pi-border-hover: rgba(255,122,0,0.35); /* Transitions */ --pi-trans-fast: 0.2s ease; --pi-trans-smooth: 0.35s cubic-bezier(0.16, 1, 0.3, 1); } /* ====================================================== 2. PREMIUM TYPOGRAPHY SYSTEM ====================================================== */ /* Глобально */ body { font-family: var(--font-main); font-weight: 400; line-height: 1.65; letter-spacing: 0.01em; background-color: var(--pi-bg-base); color: var(--pi-text-muted); } /* H1 */ h1 { font-size: clamp(40px, 4vw, 64px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; color: var(--pi-text-main); } /* H2 */ h2 { font-size: clamp(32px, 3vw, 48px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; color: var(--pi-text-main); } /* H3 */ h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--pi-text-main); } /* Текст */ p { font-size: 16px; font-weight: 400; color: var(--pi-text-muted); } /* Акцентный текст */ .text-accent { color: var(--pi-accent); font-weight: 600; } /* ====================================================== 3. ENGINEERING LUXURY GLOBAL BACKGROUND (DEEP 3D VOID) ====================================================== */ /* Принудительно делаем все технические слои Astra прозрачными */ html, body, #page, .site, .site-content { background-color: transparent !important; background-image: none !important; } /* Назначаем базовый цвет на body */ body { background-color: var(--pi-bg-base) !important; } /* 1. БАЗА (3D Студийный фон) */ .pi-global-bg { position: fixed; top: -20vh; left: -20vw; width: 140vw; height: 140vh; z-index: -999; /* Глубокий радиальный градиент: от темно-стального к угольно-черному */ background-color: #020305; background-image: radial-gradient(ellipse 100% 100% at 50% -10%, #0c121a 0%, #020305 80%); overflow: hidden; pointer-events: none; -webkit-transform: translateZ(0); transform: translateZ(0); } /* 2. АМБИЕНТНЫЕ СВЕЧЕНИЯ (Плавающие объемы) */ .pi-global-bg::before, .pi-global-bg::after { content: ""; position: absolute; border-radius: 50%; will-change: transform; } /* Корпоративный Индустриальный Синий (Огромный, слева сверху) */ .pi-global-bg::before { top: 5%; left: 5%; width: 70vw; height: 70vw; background: radial-gradient(circle, rgba(16, 34, 58, 0.4) 0%, transparent 65%); filter: blur(120px); animation: piGlowDrift 30s ease-in-out infinite alternate; } /* Контролируемый Бренд-Оранжевый (Справа снизу) */ .pi-global-bg::after { bottom: 5%; right: 5%; width: 60vw; height: 60vw; background: radial-gradient(circle, rgba(255, 122, 0, 0.08) 0%, transparent 65%); filter: blur(100px); animation: piGlowDriftAlt 25s ease-in-out infinite alternate; } /* 3. ИНЖЕНЕРНАЯ ДВОЙНАЯ СЕТКА (Dual Grid) */ .pi-global-grid { position: absolute; inset: 0; /* Чертежная сетка B2B: Крупный шаг + Мелкий шаг */ background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px), linear-gradient(rgba(255, 255, 255, 0.008) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.008) 1px, transparent 1px); background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px; /* Сетка плавно растворяется вниз и по краям (создает глубину) */ mask-image: radial-gradient(ellipse 130% 100% at 50% 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,0) 75%); -webkit-mask-image: radial-gradient(ellipse 130% 100% at 50% 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,0) 75%); } /* 4. ВЕРХНИЙ СВЕТ (Rim Light от потолка) */ .pi-global-grid::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 35vh; background: linear-gradient(180deg, rgba(255,255,255,0.015) 0%, transparent 100%); pointer-events: none; } /* 5. КИНЕМАТОГРАФИЧЕСКИЙ ШУМ И ВИНЬЕТКА */ .pi-global-noise { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); opacity: 0.05; mix-blend-mode: overlay; } /* Виньетка (затемнение краев экрана для акцента на контенте) */ .pi-global-noise::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, transparent 40%, rgba(1, 2, 3, 0.65) 100%); pointer-events: none; } /* Анимации плавного движения света */ @keyframes piGlowDrift { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(8%, 6%) scale(1.1); } } @keyframes piGlowDriftAlt { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-6%, -8%) scale(1.15); } } /* ОЧИСТКА ЛОКАЛЬНЫХ ФОНОВ */ .home-hero, .home-about, .home-categories, .home-popular-products, .why-final, .trust, .brands-section, .home-cta, .sp-footer { background: transparent !important; } .home-hero__bg, .home-hero__mesh, .home-about__bg, .home-about__mesh, .home-categories__bg, .home-popular-products__bg, .why-final::before, .trust__bg-grid, .trust::before, .brands-section::before, .brands-section::after, .home-cta__bg, .sp-footer__bg { display: none !important; } /* ====================================================== 4. GLOBAL PREMIUM BUTTONS (B2B UI) ====================================================== */ .pi-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 24px; border-radius: 16px; font-family: var(--font-main); font-size: 14px; font-weight: 600; letter-spacing: 0.02em; text-decoration: none; overflow: hidden; cursor: pointer; transition: transform var(--pi-trans-smooth), box-shadow var(--pi-trans-smooth), border-color var(--pi-trans-smooth), background var(--pi-trans-smooth); } .pi-btn span, .pi-btn svg { position: relative; z-index: 2; } .pi-btn svg { width: 18px; height: 18px; transition: transform var(--pi-trans-smooth); } .pi-btn:hover svg { transform: translateX(4px); } .pi-btn::before { content: ""; position: absolute; top: 0; left: -150%; width: 100%; height: 100%; background: linear-gradient( 120deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100% ); transform: skewX(-20deg); transition: left 0.7s cubic-bezier(0.16, 1, 0.3, 1); z-index: 1; } .pi-btn:hover::before { left: 150%; } /* --- PRIMARY BUTTON (Оранжевая) --- */ .pi-btn--primary { color: #ffffff; border: 1px solid rgba(255, 122, 0, 0.3); background: linear-gradient(180deg, rgba(255, 122, 0, 0.2) 0%, rgba(255, 122, 0, 0.08) 100%); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05); } .pi-btn--primary:hover { transform: translateY(-2px); border-color: rgba(255, 122, 0, 0.6); background: linear-gradient(180deg, rgba(255, 122, 0, 0.28) 0%, rgba(255, 122, 0, 0.12) 100%); box-shadow: 0 20px 48px rgba(0, 0, 0, 0.35), 0 0 24px rgba(255, 122, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1); } /* --- SECONDARY BUTTON (Прозрачная / Glass) --- */ .pi-btn--secondary { color: #ffffff; border: 1px solid var(--pi-border); background: rgba(255, 255, 255, 0.02); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.02); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .pi-btn--secondary:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.06); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05); }
Склад г. Казань
Отгрузка В день заказа
Документы ЭДО / НДС 20%
Гарантия Входной контроль