/* ============================================================ WBM — PROFESSIONAL VISUAL SYSTEM Переопределяет «игровые» эффекты, устанавливает официальный, доверительный стиль. Подключается ПОСЛЕДНИМ в . ============================================================ */ /* ───────────────────────────────────────────── 1. CSS ПЕРЕМЕННЫЕ — деловая палитра ─────────────────────────────────────────────*/ :root { /* Основные цвета */ --p-black: #0a0a0c; /* фон страницы */ --p-surface: #111114; /* фон секций */ --p-surface2: #18181c; /* фон карточек */ --p-border: rgba(255,255,255,.08); --p-border-mid: rgba(255,255,255,.14); /* Акцент — сдержанный тёмно-красный (бордо) */ --p-accent: #b8303a; /* кнопки, подчёркивания */ --p-accent-hover: #9a2431; --p-accent-light: rgba(184,48,58,.12); /* Вторичный акцент — синий для автосервиса */ --p-blue: #2a6fff; --p-blue-hover: #1d5ce0; --p-blue-light: rgba(42,111,255,.12); /* Текст */ --p-text: #f0f0f1; --p-text-muted: #8a8a94; --p-text-dim: #5a5a64; /* Переходы */ --p-ease: all .22s ease; --p-ease2: all .35s cubic-bezier(.4,0,.2,1); } /* ───────────────────────────────────────────── 2. ОБЩИЙ СБРОС «ИГРОВЫХ» ЭФФЕКТОВ ─────────────────────────────────────────────*/ /* Убираем все neon/glow text-shadow на сайте */ .welcome-text, .welcome-text .letter, .advantage-icon, .section-title, .section-title::after, .green-frame-transparent, .green-frame-large, .steering-title { text-shadow: none !important; filter: none !important; box-shadow: none !important; } /* Убираем float-анимацию на карточках преимуществ */ .advantage-card-inner { animation: none !important; } /* Убираем pulseBorder / glowFrame */ .green-frame-transparent { animation: none !important; display: none !important; /* hero-updates уже скрывает, дублируем */ } /* Убираем мигание кнопки "Связаться" */ .btn-contact, .steering-section .btn-contact { animation: none !important; } /* Убираем frameGlow у steering */ .steering-section .green-frame-large { animation: none !important; } /* Убираем pulseIcon у advantage */ .advantage-icon i { animation: none !important; } /* ───────────────────────────────────────────── 3. BODY & КОНТЕЙНЕР ─────────────────────────────────────────────*/ body { background-color: var(--p-black) !important; color: var(--p-text) !important; } /* ───────────────────────────────────────────── 4. HEADER — строгий, полупрозрачный ─────────────────────────────────────────────*/ .header { background: linear-gradient( to bottom, rgba(10,10,12,.85) 0%, rgba(10,10,12,.60) 75%, rgba(10,10,12,0) 100% ) !important; backdrop-filter: none !important; border-radius: 0 !important; padding: 0 !important; border-bottom: none; } .header.scrolled { background: rgba(10,10,12,.95) !important; border-bottom: 1px solid var(--p-border) !important; backdrop-filter: blur(12px) !important; } .navbar { min-height: 68px !important; } /* ── NAV LINKS ── */ .nav-link { font-size: .9375rem !important; font-weight: 500 !important; color: rgba(240,240,241,.82) !important; padding: 6px 14px !important; border-radius: 0 !important; box-shadow: none !important; letter-spacing: .01em !important; transition: color .2s ease !important; } .nav-link:hover, .nav-link.active { color: #ffffff !important; background-color: transparent !important; box-shadow: none !important; transform: none !important; } /* Тонкое подчёркивание вместо «пилюли» */ .nav-link::after { height: 1px !important; background: var(--p-accent) !important; background: linear-gradient(90deg, var(--p-accent), var(--p-accent)) !important; box-shadow: none !important; border-radius: 0 !important; bottom: 0 !important; left: 14px !important; width: 0 !important; } .nav-link:hover::after, .nav-link.active::after { width: calc(100% - 28px) !important; } /* ── LANGUAGE SWITCHER ── */ .lang-btn { font-size: .8125rem !important; font-weight: 600 !important; padding: 5px 14px !important; min-width: 46px !important; width: 46px !important; border-radius: 2px !important; letter-spacing: .06em !important; color: var(--p-text-muted) !important; border: 1px solid transparent !important; background: transparent !important; transition: var(--p-ease) !important; } .lang-btn:hover { color: var(--p-text) !important; border-color: var(--p-border-mid) !important; transform: none !important; } .lang-btn.active { color: var(--p-text) !important; border-color: var(--p-border-mid) !important; font-weight: 700 !important; background: rgba(255,255,255,.06) !important; } .lang-btn.active:hover { transform: none !important; } /* ── SOCIAL ICONS ── */ .social-icon { font-size: 1.05rem !important; color: var(--p-text-muted) !important; width: 34px !important; height: 34px !important; border-radius: 2px !important; transition: color .2s ease !important; } .social-icon:hover { transform: none !important; } .social-icon:nth-child(1):hover { color: #0088cc !important; } .social-icon:nth-child(2):hover { color: #25d366 !important; } .social-icon:nth-child(3):hover { color: #4c75a3 !important; } .social-icon:nth-child(4):hover { color: #cc0000 !important; } /* ── BURGER ── */ .burger-menu span { background-color: var(--p-text) !important; border-radius: 0 !important; } /* ───────────────────────────────────────────── 5. HERO — деловой первый экран ─────────────────────────────────────────────*/ .hero { background-color: transparent !important; } /* Оверлей поверх видео — тёмный вуаль */ .hero-video-container::after { content: ''; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(10,10,12,.45) 0%, rgba(10,10,12,.25) 55%, rgba(10,10,12,.80) 100% ); pointer-events: none; z-index: 2; } /* Текстовый блок hero — деловой */ .hero-content-pro { position: relative; z-index: 5; text-align: left; max-width: 820px; padding: 0 20px; } .hero-eyebrow { display: inline-block; font-size: .6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--p-accent); margin-bottom: 22px; padding-bottom: 8px; border-bottom: 1px solid var(--p-accent); } .hero-heading { font-size: clamp(2.2rem, 5.5vw, 4rem) !important; font-weight: 700 !important; line-height: 1.08 !important; letter-spacing: -.03em !important; color: #ffffff !important; text-shadow: none !important; margin-bottom: 22px !important; } .hero-heading span { color: var(--p-accent); } .hero-sub { font-size: clamp(.9375rem, 1.8vw, 1.125rem) !important; font-weight: 400 !important; line-height: 1.7 !important; color: rgba(240,240,241,.70) !important; max-width: 540px; margin-bottom: 36px !important; text-shadow: none !important; } .hero-cta-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; } /* Прячем старый WELCOME-оверлей */ .welcome-overlay { display: none !important; } /* ───────────────────────────────────────────── 6. SECTION TITLES — чисто и профессионально ─────────────────────────────────────────────*/ .section-title { font-size: clamp(1.5rem, 3vw, 2.125rem) !important; font-weight: 700 !important; letter-spacing: -.02em !important; color: var(--p-text) !important; margin-bottom: 56px !important; text-shadow: none !important; position: relative !important; } .section-title::after { width: 40px !important; height: 2px !important; background: var(--p-accent) !important; box-shadow: none !important; bottom: -16px !important; border-radius: 0 !important; } /* ───────────────────────────────────────────── 7. КНОПКИ — строгие, профессиональные ─────────────────────────────────────────────*/ .btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 13px 28px !important; font-size: .8125rem !important; font-weight: 600 !important; letter-spacing: .06em !important; text-transform: uppercase !important; border-radius: 2px !important; border: 1px solid transparent !important; cursor: pointer !important; text-decoration: none !important; transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease !important; /* Убираем scale/translateY анимации */ } .btn:hover { transform: none !important; } .btn:active { transform: none !important; } /* Primary — бордо-красный заливка */ .btn-primary { background-color: var(--p-accent) !important; border-color: var(--p-accent) !important; color: #ffffff !important; box-shadow: none !important; backdrop-filter: none !important; } .btn-primary:hover { background-color: var(--p-accent-hover) !important; border-color: var(--p-accent-hover) !important; color: #ffffff !important; box-shadow: 0 4px 16px rgba(184,48,58,.30) !important; } /* Secondary — синий автосервис */ .btn-secondary { background-color: transparent !important; border-color: rgba(42,111,255,.55) !important; color: #aac4ff !important; box-shadow: none !important; backdrop-filter: none !important; border-radius: 2px !important; } .btn-secondary:hover { background-color: var(--p-blue-light) !important; border-color: var(--p-blue) !important; color: #ffffff !important; box-shadow: 0 4px 16px rgba(42,111,255,.20) !important; } /* Contact — белый outline */ .btn-contact { background: transparent !important; border: 1px solid rgba(255,255,255,.30) !important; color: #ffffff !important; box-shadow: none !important; backdrop-filter: none !important; animation: none !important; } .btn-contact:hover { background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.55) !important; box-shadow: none !important; } /* Admin */ .btn-admin { background-color: transparent !important; border: 1px solid var(--p-border-mid) !important; color: var(--p-text-muted) !important; font-size: .75rem !important; padding: 8px 18px !important; box-shadow: none !important; animation: none !important; } .btn-admin:hover { background-color: rgba(255,255,255,.05) !important; color: var(--p-text) !important; transform: none !important; } .btn-admin::before { display: none !important; } /* Service Request */ .btn-service-request { background: var(--p-blue) !important; border: none !important; border-radius: 2px !important; color: #ffffff !important; box-shadow: none !important; animation: none !important; } .btn-service-request:hover { background: var(--p-blue-hover) !important; box-shadow: 0 4px 16px rgba(42,111,255,.30) !important; } .btn-service-request::before { display: none !important; } /* Unified buttons в service-choice */ .unified-btn, .leasing-inside .unified-btn, .service-inside-right .unified-btn { border-radius: 2px !important; backdrop-filter: none !important; box-shadow: none !important; animation: none !important; } .unified-btn:hover, .leasing-inside .unified-btn:hover, .service-inside-right .unified-btn:hover { transform: none !important; box-shadow: 0 4px 14px rgba(0,0,0,.25) !important; } /* ───────────────────────────────────────────── 8. КАРТОЧКИ ПРЕИМУЩЕСТВ ─────────────────────────────────────────────*/ .advantage-card { height: auto !important; min-height: 260px !important; } .advantage-card-inner { background: var(--p-surface2) !important; border: 1px solid var(--p-border) !important; border-radius: 4px !important; padding: 36px 24px !important; transition: border-color .25s ease, box-shadow .25s ease !important; animation: none !important; height: auto !important; min-height: 260px !important; } .advantage-card:hover .advantage-card-inner { border-color: var(--p-border-mid) !important; box-shadow: 0 8px 32px rgba(0,0,0,.30) !important; background: var(--p-surface2) !important; } .advantage-icon { font-size: 2rem !important; color: var(--p-accent) !important; margin: 0 0 20px !important; text-shadow: none !important; filter: none !important; } .advantage-icon i { animation: none !important; } .advantage-title { font-size: 1.0625rem !important; font-weight: 600 !important; letter-spacing: -.01em !important; color: var(--p-text) !important; margin-bottom: 10px !important; } .advantage-description { font-size: .9rem !important; color: var(--p-text-muted) !important; line-height: 1.65 !important; } /* Hover-слайд убираем */ .advantage-hover { display: none !important; } /* ───────────────────────────────────────────── 9. SERVICE-CHOICE СЕКЦИЯ ─────────────────────────────────────────────*/ .or-text { background: var(--p-surface) !important; border-color: var(--p-border-mid) !important; font-size: 1rem !important; font-weight: 700 !important; letter-spacing: .08em !important; box-shadow: none !important; color: var(--p-text-muted) !important; width: 56px !important; height: 56px !important; } .or-wrapper:hover .or-text { transform: none !important; border-color: var(--p-border-mid) !important; box-shadow: none !important; } .unified-image { border-radius: 3px !important; border-color: var(--p-border) !important; box-shadow: none !important; } .unified-image img { filter: none !important; transition: transform .4s ease !important; } .service-inside:hover .unified-image img { transform: scale(1.03) !important; filter: none !important; } .unified-title { font-size: 1.375rem !important; font-weight: 700 !important; letter-spacing: -.015em !important; } .unified-title::after, .leasing-inside .unified-title::after, .service-inside-right .unified-title::after { height: 1px !important; width: 28px !important; transition: width .3s ease !important; } .service-inside:hover .unified-title::after { width: 56px !important; } /* ───────────────────────────────────────────── 10. STEERING / INFO SECTION ─────────────────────────────────────────────*/ .steering-section { border-top: 1px solid var(--p-border); border-bottom: 1px solid var(--p-border); } .green-frame-large { border: none !important; background: none !important; box-shadow: none !important; animation: none !important; padding: 0 !important; margin-bottom: 28px !important; } .steering-title { font-size: clamp(1.5rem, 3vw, 2.125rem) !important; font-weight: 700 !important; letter-spacing: -.02em !important; text-shadow: none !important; margin-bottom: 14px !important; color: var(--p-text) !important; } .steering-description { font-size: 1rem !important; color: var(--p-text-muted) !important; line-height: 1.7 !important; font-weight: 400 !important; } .steering-info { color: var(--p-text-muted) !important; font-size: .9375rem !important; line-height: 1.75 !important; } .steering-info p { color: inherit !important; font-weight: 400 !important; } /* ───────────────────────────────────────────── 11. OWNERS CARDS ─────────────────────────────────────────────*/ .owner-card { background: var(--p-surface2) !important; border: 1px solid var(--p-border) !important; border-radius: 4px !important; text-align: center !important; padding: 32px 24px !important; transition: border-color .25s ease, box-shadow .25s ease !important; opacity: 1 !important; animation: none !important; } .owner-card::before, .owner-card::after { display: none !important; } .owner-card:hover { transform: none !important; border-color: var(--p-border-mid) !important; box-shadow: 0 8px 32px rgba(0,0,0,.30) !important; } .owner-card:hover::before { opacity: 0 !important; } .owner-image img { filter: none !important; transition: none !important; } .owner-card:hover .owner-image img { transform: none !important; animation: none !important; } .owner-name { font-size: 1rem !important; font-weight: 600 !important; letter-spacing: -.01em !important; color: var(--p-text) !important; margin-top: 16px !important; margin-bottom: 4px !important; animation: none !important; } .owner-name::after { display: none !important; } .owner-position { font-size: .8125rem !important; color: var(--p-accent) !important; font-weight: 500 !important; letter-spacing: .04em !important; text-transform: uppercase !important; margin-bottom: 12px !important; } .owner-bio { font-size: .875rem !important; color: var(--p-text-muted) !important; line-height: 1.65 !important; margin-bottom: 16px !important; } .owner-contacts p { font-size: .8125rem !important; color: var(--p-text-dim) !important; margin-bottom: 4px !important; } .owner-contacts i { color: var(--p-accent) !important; margin-right: 6px !important; } /* ───────────────────────────────────────────── 12. LEASING PAGE — car cards ─────────────────────────────────────────────*/ .car-card { background: var(--p-surface2) !important; border: 1px solid var(--p-border) !important; border-radius: 4px !important; overflow: hidden !important; transition: border-color .25s ease, box-shadow .25s ease !important; opacity: 1 !important; animation: none !important; } .car-card:hover { border-color: var(--p-border-mid) !important; box-shadow: 0 8px 32px rgba(0,0,0,.30) !important; transform: none !important; } .car-model { font-size: 1.0625rem !important; font-weight: 700 !important; letter-spacing: -.01em !important; color: var(--p-text) !important; } .car-price { font-size: 1.25rem !important; font-weight: 700 !important; color: var(--p-accent) !important; letter-spacing: -.01em !important; margin-bottom: 8px !important; } .car-description { font-size: .875rem !important; color: var(--p-text-muted) !important; line-height: 1.6 !important; } /* Benefit cards — leasing */ .benefit-card { background: var(--p-surface2) !important; border: 1px solid var(--p-border) !important; border-radius: 4px !important; transition: border-color .25s ease !important; animation: none !important; opacity: 1 !important; } .benefit-card:hover { border-color: var(--p-border-mid) !important; transform: none !important; box-shadow: 0 6px 24px rgba(0,0,0,.25) !important; } .benefit-icon { font-size: 1.75rem !important; color: var(--p-accent) !important; animation: none !important; } .benefit-title { font-size: 1rem !important; font-weight: 600 !important; color: var(--p-text) !important; letter-spacing: -.01em !important; } .benefit-description { font-size: .875rem !important; color: var(--p-text-muted) !important; } /* ───────────────────────────────────────────── 13. SERVICE PAGE — example + type cards ─────────────────────────────────────────────*/ .example-card { background: var(--p-surface2) !important; border: 1px solid var(--p-border) !important; border-radius: 4px !important; overflow: hidden !important; transition: border-color .25s ease, box-shadow .25s ease !important; opacity: 1 !important; animation: none !important; } .example-card:hover { border-color: var(--p-border-mid) !important; box-shadow: 0 8px 32px rgba(0,0,0,.30) !important; transform: none !important; } .example-image img { filter: none !important; transition: transform .4s ease !important; } .example-card:hover .example-image img { transform: scale(1.03) !important; } .example-title { font-size: 1.0625rem !important; font-weight: 600 !important; letter-spacing: -.01em !important; color: var(--p-text) !important; } .example-description { font-size: .875rem !important; color: var(--p-text-muted) !important; } .example-details p { font-size: .8125rem !important; color: var(--p-text-muted) !important; } .example-details strong { color: var(--p-text) !important; font-weight: 600 !important; } .type-card { background: var(--p-surface2) !important; border: 1px solid var(--p-border) !important; border-radius: 4px !important; transition: border-color .25s ease !important; opacity: 1 !important; animation: none !important; } .type-card:hover { border-color: var(--p-border-mid) !important; transform: none !important; box-shadow: 0 6px 24px rgba(0,0,0,.25) !important; } .type-icon { font-size: 1.75rem !important; color: var(--p-blue) !important; animation: none !important; } .type-title { font-size: 1rem !important; font-weight: 600 !important; color: var(--p-text) !important; letter-spacing: -.01em !important; } .type-list li { font-size: .875rem !important; color: var(--p-text-muted) !important; padding-left: 14px !important; position: relative !important; margin-bottom: 6px !important; list-style: none !important; } .type-list li::before { content: '–' !important; position: absolute !important; left: 0 !important; color: var(--p-accent) !important; } /* ───────────────────────────────────────────── 14. LEASING / SERVICE HERO SECTIONS ─────────────────────────────────────────────*/ .leasing-hero, .service-hero { padding: 120px 0 80px !important; border-bottom: 1px solid var(--p-border) !important; } .leasing-title, .service-title { font-size: clamp(1.75rem, 4vw, 3rem) !important; font-weight: 700 !important; letter-spacing: -.03em !important; color: #ffffff !important; text-shadow: none !important; margin-bottom: 14px !important; } .leasing-subtitle, .service-subtitle { font-size: clamp(.9375rem, 1.8vw, 1.125rem) !important; color: rgba(240,240,241,.65) !important; font-weight: 400 !important; text-shadow: none !important; max-width: 520px !important; margin-bottom: 32px !important; } /* ───────────────────────────────────────────── 15. FOOTER — деловой минимализм ─────────────────────────────────────────────*/ .footer { background-color: var(--p-surface) !important; border-top: 1px solid var(--p-border) !important; padding: 64px 0 32px !important; } .footer-title { font-size: .8125rem !important; font-weight: 600 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--p-text-muted) !important; margin-bottom: 18px !important; } .footer-text { font-size: .875rem !important; color: var(--p-text-muted) !important; line-height: 1.7 !important; } .footer-text i { color: var(--p-accent) !important; } .footer-links a { font-size: .875rem !important; color: var(--p-text-muted) !important; transition: color .2s ease !important; } .footer-links a:hover { color: var(--p-text) !important; } .map-link { font-size: .8125rem !important; color: var(--p-accent) !important; text-decoration: none !important; border-bottom: 1px solid transparent !important; transition: border-color .2s ease !important; } .map-link:hover { border-color: var(--p-accent) !important; } .footer-social { gap: 8px !important; margin-top: 16px !important; } .footer-social .social-icon { color: var(--p-text-dim) !important; font-size: .9rem !important; width: 30px !important; height: 30px !important; } .footer-social .social-icon:hover { color: var(--p-text) !important; } .footer-bottom { border-top: 1px solid var(--p-border) !important; padding-top: 24px !important; margin-top: 40px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; flex-wrap: wrap !important; } .copyright { font-size: .8125rem !important; color: var(--p-text-dim) !important; margin: 0 !important; } /* ───────────────────────────────────────────── Ссылка-кнопка Admin в footer-bottom ─────────────────────────────────────────────*/ .footer-bottom .btn-admin { display: inline-block !important; font-size: .6875rem !important; font-weight: 500 !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: var(--p-text-dim) !important; text-decoration: none !important; padding: 5px 12px !important; border: 1px solid var(--p-border) !important; border-radius: 2px !important; background: transparent !important; transition: color .2s ease, border-color .2s ease !important; cursor: pointer !important; animation: none !important; box-shadow: none !important; } .footer-bottom .btn-admin:hover { color: var(--p-text-muted) !important; border-color: var(--p-border-mid) !important; background: transparent !important; transform: none !important; } /* ───────────────────────────────────────────── 16. CAROUSEL — сдержанная навигация ─────────────────────────────────────────────*/ .carousel-btn { background: rgba(255,255,255,.06) !important; border: 1px solid var(--p-border-mid) !important; border-radius: 2px !important; color: var(--p-text-muted) !important; transition: var(--p-ease) !important; box-shadow: none !important; } .carousel-btn:hover { background: rgba(255,255,255,.12) !important; color: var(--p-text) !important; transform: none !important; box-shadow: none !important; } .carousel-indicator { border-radius: 1px !important; background: var(--p-text-dim) !important; box-shadow: none !important; } .carousel-indicator.active { background: var(--p-accent) !important; } /* ───────────────────────────────────────────── 17. МОДАЛЬНЫЕ ОКНА ─────────────────────────────────────────────*/ .privacy-modal, .leasing-modal, .service-modal { background: var(--p-surface2) !important; border: 1px solid var(--p-border) !important; border-radius: 4px !important; box-shadow: 0 24px 80px rgba(0,0,0,.55) !important; backdrop-filter: none !important; } .privacy-modal-title, .leasing-modal-title, .service-modal-title { font-size: 1.25rem !important; font-weight: 700 !important; letter-spacing: -.02em !important; color: var(--p-text) !important; text-shadow: none !important; } /* ───────────────────────────────────────────── 18. СКРОЛЛ-АНИМАЦИИ — только fade-in ─────────────────────────────────────────────*/ /* Убираем typing / gradient text */ @keyframes typingAnimation { from {} to {} } @keyframes gradientText { from {} to {} } @keyframes gradientBorder { from {} to {} } @keyframes particlesMove { from {} to {} } @keyframes pulseIcon { from {} to {} } @keyframes buttonPulse { from {} to {} } @keyframes frameGlow { from {} to {} } @keyframes frameAppear { from {} to {} } @keyframes neonWave { from {} to {} } @keyframes neonPulse { from {} to {} } @keyframes connectorPulse { from {} to {} } @keyframes pulseBorder { from {} to {} } @keyframes glowFrame { from {} to {} } @keyframes photoZoom { from {} to {} } @keyframes float { from {} to {} } /* Оставляем только эти — используются для scroll reveal */ @keyframes wbmFadeInUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } /* Переопределяем все fadeIn* на единую мягкую анимацию */ @keyframes fadeInUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } } @keyframes fadeInLeft { from { opacity:0; transform:translateX(-12px); } to { opacity:1; transform:translateX(0); } } @keyframes fadeInRight { from { opacity:0; transform:translateX(12px); } to { opacity:1; transform:translateX(0); } } /* Карточки owners: убираем opacity:0 + delay анимации */ .owner-card { opacity: 1 !important; } .footer-column:nth-child(1), .footer-column:nth-child(2), .footer-column:nth-child(3), .footer-column:nth-child(4) { opacity: 1 !important; animation: none !important; } /* ───────────────────────────────────────────── 19. MOBILE MENU — чистый стиль ─────────────────────────────────────────────*/ .mobile-menu { background-color: rgba(10,10,12,.97) !important; border-left: 1px solid var(--p-border) !important; box-shadow: -8px 0 40px rgba(0,0,0,.6) !important; } .mobile-nav-link { font-size: .9375rem !important; font-weight: 500 !important; color: var(--p-text-muted) !important; border-bottom: 1px solid var(--p-border) !important; letter-spacing: .01em !important; padding: 16px 0 !important; } .mobile-nav-link:hover, .mobile-nav-link.active { color: var(--p-text) !important; background: transparent !important; } /* ───────────────────────────────────────────── 20. LOGO — без hover-эффекта ─────────────────────────────────────────────*/ .logo-img { height: 52px !important; transition: opacity .2s ease !important; } .logo-img:hover { transform: none !important; opacity: .85 !important; } /* ───────────────────────────────────────────── 21. RESPONSIVE ДОПОЛНЕНИЯ + МОБИЛЬНОЕ МЕНЮ ─────────────────────────────────────────────*/ /* ── Мобильное меню — деловой вид ── */ @media (max-width: 768px) { /* Убираем красную рамку и glow */ .mobile-menu { background: rgba(10,10,12,.97) !important; backdrop-filter: blur(8px) !important; border-top: 1px solid var(--p-border) !important; box-shadow: 0 8px 32px rgba(0,0,0,.55) !important; padding: 24px 20px !important; } .mobile-nav-link { font-size: 1rem !important; font-weight: 500 !important; color: var(--p-text-muted) !important; padding: 14px 0 !important; border-bottom: 1px solid var(--p-border) !important; letter-spacing: .01em !important; transition: color .2s ease !important; } .mobile-nav-link:hover, .mobile-nav-link.active { color: var(--p-text) !important; background: transparent !important; } .mobile-lang-btn { font-size: .8125rem !important; font-weight: 600 !important; letter-spacing: .06em !important; color: var(--p-text-muted) !important; border: 1px solid var(--p-border) !important; border-radius: 2px !important; padding: 8px 18px !important; background: transparent !important; transition: color .2s ease, border-color .2s ease !important; } .mobile-lang-btn:hover, .mobile-lang-btn.active { color: var(--p-text) !important; border-color: var(--p-border-mid) !important; transform: none !important; } .mobile-language-switcher { border-top: 1px solid var(--p-border) !important; border-bottom: 1px solid var(--p-border) !important; } .mobile-social-icons .social-icon { color: var(--p-text-muted) !important; font-size: 1.1rem !important; width: 40px !important; height: 40px !important; border-radius: 2px !important; } /* Hero */ .hero-cta-row { flex-direction: column !important; align-items: flex-start !important; } .section-title { margin-bottom: 40px !important; } .hero-heading { font-size: clamp(1.75rem, 7vw, 2.5rem) !important; } /* Footer-bottom стекируется на мобильных */ .footer-bottom { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; } /* Advantage cards высота auto на планшетах и мобильных */ .advantage-card, .advantage-card-inner { height: auto !important; } } @media (max-width: 480px) { .btn { padding: 12px 22px !important; } .footer { padding: 48px 0 24px !important; } .hero-cta-row .btn { width: 100% !important; max-width: 280px !important; } } /* Сброс некорректных height:300px на advantage-card из responsive.css */ @media (max-width: 1024px) { .advantage-card { height: auto !important; } .advantage-card-inner { height: auto !important; } }