* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary: #2563eb;
--primary-dark: #1d4ed8;
--primary-light: #3b82f6;
--primary-extra-light: #dbeafe;
--secondary: #06b6d4;
--secondary-dark: #0891b2;
--accent: #10b981;
--text: #374151;
--text-light: #6b7280;
--text-lighter: #9ca3af;
--bg-light: #f8fafc;
--bg-white: #ffffff;
--border: #e5e7eb;
--shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
--shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.08);
--shadow-hover: 0 15px 40px rgba(0, 0, 0, 0.12);
--radius: 8px;
--radius-lg: 12px;
--transition: all 0.3s ease;
--font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-main);
font-size: 16px;
line-height: 1.6;
color: var(--text);
background-color: var(--bg-white);
overflow-x: hidden;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* ===== HEADER STYLES ===== */
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border);
z-index: 1000;
transition: var(--transition);
}
.header.scrolled {
background: rgba(255, 255, 255, 0.98);
box-shadow: var(--shadow);
}
.header-content {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 0;
position: relative;
}
/* Logo */
.logo-link {
display: flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
transition: var(--transition);
}
.logo-link:hover {
transform: translateY(-1px);
}
.logo-icon {
font-size: 2rem;
background: linear-gradient(135deg, var(--primary), var(--secondary));
border-radius: 8px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.logo-text {
display: flex;
flex-direction: column;
}
.logo-title {
font-size: 1.1rem;
font-weight: 700;
color: var(--primary-dark);
line-height: 1.2;
}
.logo-subtitle {
font-size: 0.8rem;
color: var(--text-light);
line-height: 1.2;
}
/* Navigation */
.nav-list {
display: flex;
list-style: none;
gap: 2rem;
margin: 0;
padding: 0;
}
.nav-link {
text-decoration: none;
color: var(--text);
font-weight: 500;
padding: 0.5rem 0;
position: relative;
transition: var(--transition);
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--primary);
transition: var(--transition);
}
.nav-link:hover {
color: var(--primary);
}
.nav-link:hover::after,
.nav-link.active::after {
width: 100%;
}
.nav-link.active {
color: var(--primary);
font-weight: 600;
}
/* Header Contacts */
.header-contacts {
display: flex;
align-items: center;
gap: 1.5rem;
}
.header-phone {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.phone-link {
font-size: 1.1rem;
font-weight: 700;
color: var(--primary);
text-decoration: none;
transition: var(--transition);
}
.phone-link:hover {
color: var(--primary-dark);
}
.phone-note {
font-size: 0.75rem;
color: var(--text-light);
margin-top: 0.1rem;
}
.header-callback {
padding: 0.6rem 1.2rem;
font-size: 0.9rem;
}
/* Mobile Menu Button */
.mobile-menu-btn {
display: none;
flex-direction: column;
background: none;
border: none;
cursor: pointer;
padding: 0.5rem;
gap: 0.25rem;
}
.mobile-menu-btn span {
width: 20px;
height: 2px;
background: var(--primary);
transition: var(--transition);
}
/* Mobile Menu */
.mobile-menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 2000;
opacity: 0;
visibility: hidden;
transition: var(--transition);
}
.mobile-menu.active {
opacity: 1;
visibility: visible;
}
.mobile-menu-content {
position: absolute;
top: 0;
right: 0;
width: 300px;
height: 100%;
background: white;
transform: translateX(100%);
transition: transform 0.3s ease;
display: flex;
flex-direction: column;
}
.mobile-menu.active .mobile-menu-content {
transform: translateX(0);
}
.mobile-menu-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.5rem;
border-bottom: 1px solid var(--border);
}
.mobile-menu-close {
background: none;
border: none;
font-size: 2rem;
color: var(--text-light);
cursor: pointer;
transition: var(--transition);
}
.mobile-menu-close:hover {
color: var(--primary);
}
.mobile-nav {
flex: 1;
padding: 1.5rem 0;
}
.mobile-nav-list {
list-style: none;
margin: 0;
padding: 0;
}
.mobile-nav-item {
border-bottom: 1px solid var(--border);
}
.mobile-nav-link {
display: block;
padding: 1rem 1.5rem;
text-decoration: none;
color: var(--text);
font-weight: 500;
transition: var(--transition);
}
.mobile-nav-link:hover,
.mobile-nav-link.active {
background: var(--primary-extra-light);
color: var(--primary);
}
.mobile-contacts {
padding: 1.5rem;
border-top: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: 1rem;
}
.mobile-phone {
display: flex;
flex-direction: column;
}
.mobile-phone-link {
font-size: 1.1rem;
font-weight: 700;
color: var(--primary);
text-decoration: none;
}
.mobile-phone-note {
font-size: 0.8rem;
color: var(--text-light);
margin-top: 0.2rem;
}
.mobile-callback {
width: 100%;
}
/* Responsive Design for Header */
@media (max-width: 992px) {
.nav {
display: none;
}
.header-contacts {
display: none;
}
.mobile-menu-btn {
display: flex;
}
.header-content {
padding: 0.8rem 0;
}
}
@media (max-width: 576px) {
.logo-title {
font-size: 1rem;
}
.logo-subtitle {
font-size: 0.7rem;
}
.logo-icon {
font-size: 1.5rem;
width: 35px;
height: 35px;
}
.mobile-menu-content {
width: 280px;
}
}
/* Add padding to body to account for fixed header */
body {
padding-top: 80px;
}
@media (max-width: 768px) {
body {
padding-top: 70px;
}
}
/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
line-height: 1.2;
margin-bottom: 1rem;
color: var(--primary-dark);
}
h1 {
font-size: 3rem;
margin-bottom: 1.5rem;
}
h2 {
font-size: 2.5rem;
margin-bottom: 1.5rem;
}
h3 {
font-size: 1.75rem;
}
h4 {
font-size: 1.5rem;
}
p {
margin-bottom: 1rem;
color: var(--text);
}
a {
color: var(--primary);
text-decoration: none;
transition: var(--transition);
}
a:hover {
color: var(--primary-dark);
}
/* ===== BUTTONS ===== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 24px;
border: none;
border-radius: var(--radius);
font-size: 1rem;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: var(--transition);
gap: 8px;
min-height: 48px;
position: relative;
overflow: hidden;
}
.btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.5s;
}
.btn:hover::before {
left: 100%;
}
.btn-primary {
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
color: white;
box-shadow: var(--shadow);
}
.btn-primary:hover {
background: linear-gradient(135deg, var(--primary-dark), var(--primary));
transform: translateY(-2px);
box-shadow: var(--shadow-hover);
color: white;
}
.btn-secondary {
background: transparent;
color: var(--primary);
border: 2px solid var(--primary);
}
.btn-secondary:hover {
background: var(--primary);
color: white;
transform: translateY(-2px);
box-shadow: var(--shadow);
}
/* ===== HERO SECTION ===== */
.hero {
background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #60a5fa 100%);
color: white;
padding: 40px 0;
position: relative;
overflow: hidden;
}
/* Убрал анимированный фон - оставил только статичный */
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
background-size: cover;
}
.hero .hero-content {
position: relative;
z-index: 2;
gap: 40px;
display: grid;
grid-template-columns: 1fr 400px;
align-items: center;
}
/* Заголовок */
.hero .hero-title-block {
margin-bottom: 1.5rem;
}
.hero .hero-title-block h1 {
color: white;
font-size: 2.8rem;
font-weight: 800;
line-height: 1.1;
margin-bottom: 0.75rem;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.hero .title-sub {
color: rgba(255, 255, 255, 0.9);
font-size: 1.1rem;
font-weight: 400;
line-height: 1.5;
max-width: 600px;
text-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}
.hero .title-accent-line {
width: 60px;
height: 3px;
background: #f59e0b;
border-radius: 2px;
margin-bottom: 1rem;
box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}
/* Основной стеклянный контейнер */
.hero .description-frame {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 16px;
padding: 2rem;
margin-bottom: 0;
}
.hero .description-frame p {
color: rgba(255, 255, 255, 0.95);
font-size: 1rem;
line-height: 1.6;
margin-bottom: 1.5rem;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
/* Бенефиты - КРУТЫЕ АНИМАЦИИ */
.hero .benefits-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.2rem;
}
.hero .benefit-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1.2rem;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.12) 0%,
rgba(255, 255, 255, 0.08) 100%);
backdrop-filter: blur(25px) saturate(200%);
-webkit-backdrop-filter: blur(25px) saturate(200%);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 20px;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
box-shadow:
0 8px 25px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.2),
inset 0 -1px 0 rgba(0, 0, 0, 0.1);
animation: float 6s ease-in-out infinite;
}
.hero .benefit-item:nth-child(1) { animation-delay: 0s; }
.hero .benefit-item:nth-child(2) { animation-delay: 1.5s; }
.hero .benefit-item:nth-child(3) { animation-delay: 3s; }
.hero .benefit-item:nth-child(4) { animation-delay: 4.5s; }
@keyframes float {
0%, 100% { transform: translateY(0px) scale(1); }
50% { transform: translateY(-8px) scale(1.03); }
}
.hero .benefit-item::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(255, 255, 255, 0.15),
transparent);
transition: left 0.8s ease;
}
.hero .benefit-item:hover {
transform: translateY(-12px) scale(1.08);
box-shadow:
0 25px 50px rgba(255, 255, 255, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.3),
0 0 40px rgba(59, 130, 246, 0.5);
border-color: rgba(255, 255, 255, 0.5);
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.2) 0%,
rgba(255, 255, 255, 0.12) 100%);
}
.hero .benefit-item:hover::before {
left: 100%;
}
/* Иконки - стеклянные пузырьки с крутой анимацией */
.hero .benefit-icon {
width: 52px;
height: 52px;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.3) 0%,
rgba(255, 255, 255, 0.15) 100%);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1.5px solid rgba(255, 255, 255, 0.4);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
flex-shrink: 0;
box-shadow:
0 8px 20px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.3),
inset 0 -1px 0 rgba(0, 0, 0, 0.1);
animation: bubble 4s ease-in-out infinite;
}
.hero .benefit-item:nth-child(1) .benefit-icon { animation-delay: 0.2s; }
.hero .benefit-item:nth-child(2) .benefit-icon { animation-delay: 0.4s; }
.hero .benefit-item:nth-child(3) .benefit-icon { animation-delay: 0.6s; }
.hero .benefit-item:nth-child(4) .benefit-icon { animation-delay: 0.8s; }
@keyframes bubble {
0%, 100% {
transform: scale(1) rotate(0deg);
box-shadow:
0 8px 20px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
50% {
transform: scale(1.15) rotate(8deg);
box-shadow:
0 15px 35px rgba(255, 255, 255, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
}
.hero .benefit-item:hover .benefit-icon {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.4) 0%,
rgba(255, 255, 255, 0.25) 100%);
transform: scale(1.2) rotate(12deg);
border-color: rgba(255, 255, 255, 0.6);
box-shadow:
0 20px 45px rgba(255, 255, 255, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.6),
inset 0 -1px 0 rgba(255, 255, 255, 0.2);
}
.hero .benefit-text {
flex: 1;
min-width: 0;
}
.hero .benefit-title {
color: white;
font-size: 0.95rem;
font-weight: 700;
margin-bottom: 0.2rem;
display: block;
line-height: 1.2;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.hero .benefit-desc {
color: rgba(255, 255, 255, 0.85);
font-size: 0.8rem;
display: block;
line-height: 1.2;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
/* CTA блок - ТЕПЕРЬ ТАКОЙ ЖЕ ПРОЗРАЧНЫЙ КАК DESCRIPTION-FRAME */
/* CTA блок - ТОЧНО ТАКОЙ ЖЕ КАК DESCRIPTION-FRAME С АНИМАЦИЯМИ */
.hero .hero-cta-block {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 16px;
padding: 2rem;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
position: relative;
overflow: visible;
animation: ctaMagicFloat 6s ease-in-out infinite;
}
@keyframes ctaMagicFloat {
0%, 100% {
transform: translateY(0px) rotate(0deg);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
25% {
transform: translateY(-4px) rotate(0.2deg);
box-shadow:
0 12px 40px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
50% {
transform: translateY(2px) rotate(-0.1deg);
box-shadow:
0 10px 35px rgba(0, 0, 0, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
75% {
transform: translateY(-2px) rotate(0.1deg);
box-shadow:
0 11px 38px rgba(0, 0, 0, 0.13),
inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
}
/* Эффект легкого сияния */
.hero .hero-cta-block::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 16px;
background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
animation: gentleGlow 8s ease-in-out infinite;
pointer-events: none;
}
@keyframes gentleGlow {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.6; }
}
.hero .cta-header {
text-align: center;
margin-bottom: 1.5rem;
position: relative;
z-index: 10;
}
.hero .cta-header h2 {
color: white;
font-size: 1.5rem;
margin-bottom: 0.25rem;
font-weight: 700;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
animation: titlePulse 4s ease-in-out infinite;
}
@keyframes titlePulse {
0%, 100% {
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
50% {
text-shadow:
0 2px 6px rgba(0, 0, 0, 0.4),
0 0 15px rgba(255, 255, 255, 0.2);
}
}
.hero .cta-header p {
color: rgba(255, 255, 255, 0.9);
margin: 0;
font-size: 0.85rem;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
animation: subtitleFloat 5s ease-in-out infinite;
}
@keyframes subtitleFloat {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-1px); }
}
/* Цена с анимацией */
.hero .price-highlight {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.2) 0%,
rgba(255, 255, 255, 0.1) 100%);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 12px;
padding: 1.2rem;
margin-bottom: 1.2rem;
text-align: center;
position: relative;
box-shadow:
0 4px 20px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
z-index: 10;
animation: priceBounce 5s ease-in-out infinite;
}
@keyframes priceBounce {
0%, 100% { transform: scale(1); }
25% { transform: scale(1.02); }
50% { transform: scale(0.99); }
75% { transform: scale(1.01); }
}
.hero .price-new {
font-size: 1.8rem;
font-weight: 800;
color: white;
margin-bottom: 0.2rem;
display: block;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
animation: priceShine 3s ease-in-out infinite;
}
@keyframes priceShine {
0%, 100% {
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
50% {
text-shadow:
0 2px 6px rgba(0, 0, 0, 0.4),
0 0 10px rgba(255, 255, 255, 0.3);
}
}
.hero .price-note {
color: rgba(255, 255, 255, 0.9);
font-weight: 500;
font-size: 0.85rem;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
/* Телефоны с анимацией */
.hero .phone-block {
text-align: center;
padding: 1rem;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.15) 0%,
rgba(255, 255, 255, 0.08) 100%);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
margin-bottom: 0.8rem;
transition: all 0.3s ease;
box-shadow:
0 2px 12px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
position: relative;
z-index: 10;
animation: phoneFloat 7s ease-in-out infinite;
}
.hero .phone-block:nth-child(1) { animation-delay: 0s; }
.hero .phone-block:nth-child(2) { animation-delay: 1s; }
@keyframes phoneFloat {
0%, 100% { transform: translateY(0px); }
33% { transform: translateY(-2px); }
66% { transform: translateY(1px); }
}
.hero .phone-block:hover {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.25) 0%,
rgba(255, 255, 255, 0.15) 100%);
transform: translateY(-3px);
border-color: rgba(255, 255, 255, 0.3);
box-shadow:
0 6px 20px rgba(255, 255, 255, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
animation: none; /* Отключаем основную анимацию при hover */
}
.hero .hero-phone {
font-size: 1.1rem;
font-weight: 800;
color: white;
text-decoration: none;
display: block;
margin-bottom: 0.1rem;
transition: all 0.3s ease;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
position: relative;
z-index: 11;
}
.hero .hero-phone:hover {
color: #fef3c7;
transform: scale(1.05);
}
.hero .phone-block span {
color: rgba(255, 255, 255, 0.85);
font-size: 0.75rem;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
position: relative;
z-index: 11;
}
/* Мессенджеры с анимацией */
.hero .messenger-buttons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.8rem;
margin: 1.2rem 0;
position: relative;
z-index: 10;
}
.hero .messenger-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.8rem 0.6rem;
border: 1.5px solid;
border-radius: 12px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
font-size: 0.8rem;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow:
0 2px 10px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
position: relative;
z-index: 11;
animation: messengerPulse 4s ease-in-out infinite;
}
.hero .messenger-btn.telegram { animation-delay: 0s; }
.hero .messenger-btn.whatsapp { animation-delay: 0.5s; }
@keyframes messengerPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.03); }
}
.hero .messenger-btn.telegram {
color: white;
background: linear-gradient(135deg, #0088cc, #0077b5);
border-color: #0088cc;
}
.hero .messenger-btn.whatsapp {
color: white;
background: linear-gradient(135deg, #25D366, #128C7E);
border-color: #25D366;
}
.hero .messenger-btn:hover {
transform: translateY(-2px) scale(1.05);
box-shadow:
0 6px 20px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
animation: none; /* Отключаем основную анимацию при hover */
}
/* Кнопки с анимацией */
.hero .cta-buttons {
display: flex;
flex-direction: column;
gap: 0.8rem;
margin-top: 1.2rem;
position: relative;
z-index: 10;
}
.hero .cta-buttons .btn {
border-radius: 12px;
font-weight: 600;
padding: 1rem 1.2rem;
transition: all 0.3s ease;
font-size: 0.9rem;
text-align: center;
border: none;
cursor: pointer;
min-height: 52px;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow:
0 4px 15px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
position: relative;
z-index: 11;
animation: btnMagicFloat 6s ease-in-out infinite;
}
.hero .cta-buttons .btn:nth-child(1) { animation-delay: 0s; }
.hero .cta-buttons .btn:nth-child(2) { animation-delay: 2s; }
@keyframes btnMagicFloat {
0%, 100% { transform: translateY(0px); }
25% { transform: translateY(-2px); }
50% { transform: translateY(1px); }
75% { transform: translateY(-1px); }
}
.hero .cta-buttons .btn-primary {
background: linear-gradient(135deg, #3b82f6, #1e40af);
box-shadow:
0 4px 20px rgba(59, 130, 246, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
color: white;
}
.hero .cta-buttons .btn-primary:hover {
transform: translateY(-3px) scale(1.02);
box-shadow:
0 8px 30px rgba(59, 130, 246, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
animation: none;
}
.hero .cta-buttons .btn-secondary {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.2) 0%,
rgba(255, 255, 255, 0.1) 100%);
border: 1.5px solid rgba(255, 255, 255, 0.3);
color: white;
}
.hero .cta-buttons .btn-secondary:hover {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.3) 0%,
rgba(255, 255, 255, 0.2) 100%);
transform: translateY(-3px) scale(1.02);
box-shadow:
0 6px 25px rgba(255, 255, 255, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
animation: none;
}
/* Адаптивность */
@media (max-width: 768px) {
.hero {
padding: 30px 0;
}
.hero .hero-content {
grid-template-columns: 1fr;
gap: 30px;
}
.hero .hero-title-block h1 {
font-size: 2.2rem;
}
.hero .title-sub {
font-size: 1rem;
}
.hero .description-frame {
padding: 2rem;
}
.hero .benefits-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.hero .benefit-item {
padding: 1rem;
}
.hero .benefit-icon {
width: 44px;
height: 44px;
font-size: 1.2rem;
}
.hero .hero-cta-block {
padding: 1.8rem;
}
.hero .messenger-buttons {
grid-template-columns: 1fr;
}
.hero .price-new {
font-size: 1.6rem;
}
}
@media (max-width: 480px) {
.hero .hero-title-block h1 {
font-size: 1.8rem;
}
.hero .description-frame {
padding: 1.5rem;
}
.hero .benefit-item {
flex-direction: row;
text-align: left;
}
.hero .cta-buttons .btn {
padding: 0.9rem 1rem;
}
.hero .hero-cta-block {
padding: 1.5rem;
}
}
/* ===== SECTIONS COMMON STYLES ===== */
section {
padding: 40px 0;
}
.section-title {
text-align: center;
margin-bottom: 4rem;
}
.section-title h2 {
position: relative;
display: inline-block;
margin-bottom: 1rem;
}
.section-title h2::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: var(--secondary);
border-radius: 2px;
}
.section-title p {
font-size: 1.2rem;
color: var(--text-light);
max-width: 600px;
margin: 0 auto;
}
/* ===== FEATURES SECTION ===== */
.features {
background: var(--bg-light);
padding: 10px 0; /* Уменьшили отступ сверху и снизу */
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.feature-card {
background: white;
padding: 2rem 2rem;
border-radius: var(--radius-lg);
text-align: center;
box-shadow: var(--shadow);
transition: var(--transition);
position: relative;
overflow: hidden;
border: 1px solid var(--border);
}
.feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--primary), var(--secondary));
}
.feature-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-hover);
border-color: var(--primary-light);
}
/* ФИКС: Увеличиваем размер иконок в features */
.features .feature-card .feature-icon {
font-size: 2.5rem !important;
margin-bottom: 1.5rem;
display: block !important;
line-height: 1;
min-height: 80px;
display: flex !important;
align-items: center;
justify-content: center;
}
.feature-card h3 {
margin-bottom: 1rem;
color: var(--primary-dark);
font-size: 1.5rem;
}
.feature-card p {
color: var(--text-light);
line-height: 1.6;
font-size: 1rem;
}
/* Убедимся, что другие feature-icon не переопределяют наши стили */
.coverage-feature .feature-icon {
font-size: 1.2rem !important;
}
.installation-requirements {
margin: 2rem 0;
}
.requirement-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
}
.requirement-item {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1.5rem;
background: var(--bg-light);
border-radius: var(--radius);
border: 1px solid var(--border);
transition: var(--transition);
}
.requirement-item:hover {
background: var(--primary-extra-light);
transform: translateY(-2px);
box-shadow: var(--shadow);
}
.req-icon {
font-size: 1.5rem;
flex-shrink: 0;
}
.req-content h4 {
margin: 0 0 0.5rem 0;
color: var(--primary-dark);
font-size: 1.1rem;
}
.req-content p {
margin: 0;
color: var(--text-light);
font-size: 0.9rem;
line-height: 1.5;
}
/* FIX: Восстанавливаем иконки в features */
.features .feature-icon {
display: block !important;
}
/* ===== KITS SECTION ===== */
/* ===== KITS SECTION STYLES ===== */
.kits {
padding: 80px 0;
background: var(--bg-white);
}
.kits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}
.kit-card {
background: white;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow);
transition: var(--transition);
position: relative;
border: 1px solid var(--border);
}
.kit-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-hover);
border-color: var(--primary-light);
}
.kit-badge {
position: absolute;
top: 1rem;
right: 1rem;
background: linear-gradient(135deg, var(--secondary), var(--secondary-dark));
color: white;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
z-index: 2;
box-shadow: var(--shadow);
}
.kit-img {
height: 200px;
background: linear-gradient(135deg, var(--bg-light), var(--primary-extra-light));
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 1rem;
}
.tricolor-logo {
position: absolute;
top: 1rem;
left: 1rem;
background: var(--primary);
color: white;
padding: 0.5rem 1rem;
border-radius: 6px;
font-weight: 600;
font-size: 0.9rem;
box-shadow: var(--shadow);
}
.kit-img img {
max-width: 80%;
max-height: 80%;
object-fit: contain;
border-radius: var(--radius);
}
.kit-content {
padding: 2rem;
}
.kit-content h3 {
margin-bottom: 1rem;
color: var(--primary-dark);
font-size: 1.5rem;
line-height: 1.3;
}
.kit-description {
background: var(--primary-extra-light);
padding: 1.5rem;
border-radius: var(--radius);
margin-bottom: 1.5rem;
border-left: 4px solid var(--primary);
}
.kit-description p {
margin: 0;
color: var(--text);
line-height: 1.6;
font-size: 0.95rem;
}
.kit-complectation {
margin: 2rem 0;
}
.kit-complectation h4 {
color: var(--primary-dark);
margin-bottom: 1rem;
font-size: 1.2rem;
font-weight: 600;
}
.complectation-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}
.complectation-group {
background: var(--bg-light);
padding: 1.5rem;
border-radius: var(--radius);
border: 1px solid var(--border);
transition: var(--transition);
}
.complectation-group:hover {
background: var(--primary-extra-light);
transform: translateY(-2px);
box-shadow: var(--shadow);
}
.complectation-group h5 {
color: var(--primary);
margin-bottom: 0.75rem;
font-size: 1rem;
font-weight: 600;
}
.complectation-group ul {
list-style: none;
margin: 0;
padding: 0;
}
.complectation-group li {
padding: 0.4rem 0;
color: var(--text);
position: relative;
padding-left: 1.2rem;
font-size: 0.9rem;
line-height: 1.4;
}
.complectation-group li::before {
content: '•';
position: absolute;
left: 0;
color: var(--accent);
font-weight: bold;
font-size: 1.2rem;
}
.kit-specs {
background: var(--bg-light);
padding: 1.5rem;
border-radius: var(--radius);
margin: 2rem 0;
border: 1px solid var(--border);
}
.kit-specs h4 {
color: var(--primary-dark);
margin-bottom: 1rem;
font-size: 1.1rem;
font-weight: 600;
}
.spec-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 0;
border-bottom: 1px solid var(--border);
}
.spec-item:last-child {
border-bottom: none;
}
.spec-name {
color: var(--text-light);
font-weight: 500;
}
.spec-value {
color: var(--text);
font-weight: 600;
}
.kit-price {
font-size: 2rem;
font-weight: 700;
color: var(--primary);
margin: 2rem 0 1rem;
display: flex;
align-items: center;
gap: 1rem;
}
.kit-old-price {
font-size: 1.2rem;
color: var(--text-lighter);
text-decoration: line-through;
}
.kit-card .btn {
width: 100%;
margin-bottom: 1rem;
padding: 1rem 2rem;
font-size: 1.1rem;
font-weight: 600;
}
.kit-note {
text-align: center;
color: var(--text-light);
font-size: 0.85rem;
line-height: 1.4;
margin-top: 1rem;
}
/* Purchase Options Styles */
.purchase-options {
background: var(--bg-light);
padding: 60px 0;
border-top: 1px solid var(--border);
margin-top: 2rem;
}
.purchase-options-content {
max-width: 1000px;
margin: 0 auto;
}
.purchase-options-content h3 {
text-align: center;
margin-bottom: 1rem;
color: var(--primary-dark);
font-size: 2rem;
}
.options-subtitle {
text-align: center;
color: var(--text-light);
margin-bottom: 3rem;
font-size: 1.1rem;
line-height: 1.5;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.options-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}
.option {
display: flex;
align-items: center;
gap: 1.5rem;
padding: 2rem;
background: white;
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
border: 1px solid var(--border);
transition: var(--transition);
text-decoration: none;
color: inherit;
}
.option:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-hover);
border-color: var(--primary-light);
text-decoration: none;
color: inherit;
}
.option-icon {
font-size: 3rem;
flex-shrink: 0;
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary-extra-light), var(--bg-light));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.option-text {
display: flex;
flex-direction: column;
gap: 0.5rem;
flex: 1;
}
.option-text strong {
color: var(--primary-dark);
font-size: 1.3rem;
font-weight: 700;
}
.option-text span {
color: var(--text-light);
font-size: 1rem;
line-height: 1.5;
}
.consultation-note {
background: linear-gradient(135deg, var(--primary-extra-light), var(--bg-light));
border: 2px solid var(--primary-light);
border-radius: var(--radius-lg);
padding: 2.5rem;
text-align: center;
position: relative;
overflow: hidden;
}
.consultation-note::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,');
background-size: cover;
}
.consultation-note p {
margin-bottom: 2rem;
color: var(--text);
line-height: 1.6;
font-size: 1.1rem;
position: relative;
z-index: 2;
}
.consultation-note .btn {
min-width: 220px;
position: relative;
z-index: 2;
}
/* Responsive Design */
@media (max-width: 768px) {
.kits {
padding: 60px 0;
}
.kits-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.kit-content {
padding: 1.5rem;
}
.complectation-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.complectation-group {
padding: 1.25rem;
}
.kit-price {
font-size: 1.75rem;
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.purchase-options {
padding: 40px 0;
}
.options-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.option {
padding: 1.5rem;
flex-direction: column;
text-align: center;
gap: 1rem;
}
.option-icon {
width: 60px;
height: 60px;
font-size: 2rem;
}
.consultation-note {
padding: 2rem 1.5rem;
}
.consultation-note .btn {
width: 100%;
min-width: auto;
}
}
@media (max-width: 480px) {
.kits-grid {
grid-template-columns: 1fr;
}
.kit-img {
height: 150px;
}
.kit-content {
padding: 1.25rem;
}
.kit-description {
padding: 1.25rem;
}
.complectation-group {
padding: 1rem;
}
.kit-specs {
padding: 1.25rem;
}
.spec-item {
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
}
.purchase-options-content h3 {
font-size: 1.75rem;
}
.options-subtitle {
font-size: 1rem;
margin-bottom: 2rem;
}
}
/* Animation for kit cards */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.kit-card {
animation: fadeInUp 0.6s ease-out;
}
/* Hover effects for interactive elements */
.kit-card .btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-hover);
}
.option:hover .option-icon {
transform: scale(1.1);
transition: transform 0.3s ease;
}
/* Focus styles for accessibility */
.kit-card:focus-within {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
.option:focus {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
/* ===== SERVICES SECTION ===== */
.services {
background: var(--bg-light);
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.service-card {
background: white;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow);
transition: var(--transition);
display: flex;
flex-direction: column;
border: 1px solid var(--border);
}
.service-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-hover);
border-color: var(--primary-light);
}
.service-img {
height: 120px;
background: linear-gradient(135deg, var(--primary-light), var(--primary));
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
color: white;
}
.service-content {
padding: 2rem;
flex: 1;
display: flex;
flex-direction: column;
}
.service-content h3 {
margin-bottom: 1rem;
color: var(--primary-dark);
}
.service-content p {
color: var(--text-light);
flex: 1;
margin-bottom: 1.5rem;
}
.service-price {
font-size: 1.25rem;
font-weight: 700;
color: var(--primary);
margin-bottom: 1.5rem;
}
/* ===== TARIFFS TABLE SECTION ===== */
.tariffs {
background: var(--bg-light);
padding: 80px 0;
}
.tariffs-container {
width: 100%;
margin-bottom: 2rem;
}
.tariffs-table {
width: 100%;
border-collapse: collapse;
background: white;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow);
border: 1px solid var(--border);
}
.tariffs-table thead {
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}
.tariffs-table th {
padding: 1.5rem 1rem;
text-align: left;
color: white;
font-weight: 600;
font-size: 1.1rem;
border-bottom: 2px solid var(--primary-dark);
}
.tariffs-table th:first-child {
border-radius: var(--radius-lg) 0 0 0;
}
.tariffs-table th:last-child {
border-radius: 0 var(--radius-lg) 0 0;
}
.tariffs-table tbody tr {
transition: var(--transition);
border-bottom: 1px solid var(--border);
}
.tariffs-table tbody tr:hover {
background: var(--primary-extra-light);
}
.tariffs-table tbody tr:last-child {
border-bottom: none;
}
.tariffs-table td {
padding: 1.5rem 1rem;
color: var(--text);
vertical-align: middle;
}
.tariff-name {
font-weight: 700;
color: var(--primary-dark);
font-size: 1.1rem;
}
.tariff-price {
font-weight: 700;
color: var(--primary);
font-size: 1.2rem;
}
.tariffs-table .btn {
white-space: nowrap;
min-width: 140px;
}
/* Стили для примечания под таблицей */
.tariffs-note {
background: var(--primary-extra-light);
border: 1px solid var(--primary-light);
border-radius: var(--radius-lg);
padding: 2rem;
margin-top: 2rem;
}
.tariffs-note p {
margin-bottom: 1rem;
color: var(--text);
line-height: 1.6;
}
.tariffs-note p:last-child {
margin-bottom: 0;
}
.operators-links {
display: flex;
gap: 1rem;
margin: 1.5rem 0;
flex-wrap: wrap;
}
.operator-link {
display: inline-flex;
align-items: center;
padding: 12px 20px;
background: white;
border: 2px solid var(--primary);
border-radius: var(--radius);
color: var(--primary);
text-decoration: none;
font-weight: 600;
transition: var(--transition);
}
.operator-link:hover {
background: var(--primary);
color: white;
transform: translateY(-2px);
box-shadow: var(--shadow);
}
/* Адаптивность для таблицы */
@media (max-width: 992px) {
.tariffs-table {
font-size: 0.9rem;
}
.tariffs-table th,
.tariffs-table td {
padding: 1.25rem 0.75rem;
}
}
@media (max-width: 768px) {
.tariffs-container {
overflow-x: auto;
margin: 0 -15px;
padding: 0 15px;
}
.tariffs-table {
min-width: 700px;
font-size: 0.85rem;
}
.tariffs-table th,
.tariffs-table td {
padding: 1rem 0.5rem;
}
.tariff-name {
font-size: 1rem;
}
.tariff-price {
font-size: 1.1rem;
}
.tariffs-table .btn {
min-width: 120px;
padding: 10px 16px;
font-size: 0.8rem;
}
.operators-links {
flex-direction: column;
}
.operator-link {
justify-content: center;
text-align: center;
}
}
@media (max-width: 480px) {
.tariffs {
padding: 60px 0;
}
.tariffs-table {
min-width: 650px;
font-size: 0.8rem;
}
.tariffs-table th,
.tariffs-table td {
padding: 0.75rem 0.5rem;
}
.tariffs-note {
padding: 1.5rem;
}
.tariffs-note p {
font-size: 0.9rem;
}
}
/* Предотвращаем скролл всего сайта при скролле таблицы */
.tariffs-container::-webkit-scrollbar {
height: 8px;
}
.tariffs-container::-webkit-scrollbar-track {
background: var(--bg-light);
border-radius: 4px;
}
.tariffs-container::-webkit-scrollbar-thumb {
background: var(--primary-light);
border-radius: 4px;
}
.tariffs-container::-webkit-scrollbar-thumb:hover {
background: var(--primary);
}
/* Для Firefox */
.tariffs-container {
scrollbar-width: thin;
scrollbar-color: var(--primary-light) var(--bg-light);
}
/* ===== TARIFFS SECTION ===== */
/* ===== TARIFFS SECTION FIX ===== */
.tariffs {
background: var(--bg-light);
padding: 80px 0;
}
/* Скрываем мобильную версию по умолчанию */
.tariffs-mobile {
display: none;
}
/* Показываем десктопную версию по умолчанию */
.tariffs-desktop {
display: block;
}
.tariffs-content {
display: grid;
grid-template-columns: 400px 1fr;
gap: 3rem;
align-items: start;
}
.tariff-cards {
display: flex;
flex-direction: column;
gap: 1rem;
}
.tariff-card {
background: white;
border: 2px solid var(--border);
border-radius: 20px;
padding: 1.5rem;
cursor: pointer;
position: relative;
transition: all 0.3s ease;
}
.tariff-card.active {
border-color: var(--primary);
background: var(--primary-extra-light);
}
.tariff-badge {
position: absolute;
top: 1rem;
right: 1rem;
background: var(--secondary);
color: white;
padding: 4px 12px;
border-radius: 12px;
font-size: 0.8rem;
font-weight: 600;
}
.tariff-header h3 {
margin: 0 0 0.5rem 0;
color: var(--primary-dark);
font-size: 1.25rem;
}
.tariff-price {
font-size: 1.5rem;
font-weight: 700;
color: var(--primary);
}
.tariff-details {
position: relative;
min-height: 500px;
}
.tariff-detail {
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
transform: translateY(20px);
transition: all 0.4s ease;
pointer-events: none;
}
.tariff-detail.active {
opacity: 1;
transform: translateY(0);
pointer-events: all;
}
.detail-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 2px solid var(--border);
}
.detail-header h3 {
margin: 0;
color: var(--primary-dark);
font-size: 1.75rem;
}
.detail-price {
text-align: right;
}
.price-main {
font-size: 2.5rem;
font-weight: 700;
color: var(--primary);
display: block;
}
.price-period {
color: var(--text-light);
font-size: 0.9rem;
}
.detail-features {
margin: 2rem 0;
}
.features-title {
font-weight: 600;
color: var(--text);
margin-bottom: 1.5rem;
font-size: 1.1rem;
}
.features-simple {
display: flex;
flex-direction: column;
gap: 1rem;
}
.feature-simple {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 0;
border-bottom: 1px solid var(--border);
}
.feature-simple-name {
color: var(--text);
font-weight: 500;
font-size: 1rem;
}
.feature-simple-value {
color: var(--primary);
font-weight: 600;
font-size: 1.1rem;
}
.detail-actions {
text-align: center;
margin: 2rem 0;
}
.btn-large {
padding: 16px 32px;
font-size: 1.1rem;
min-width: 200px;
}
.action-note {
margin-top: 1rem;
color: var(--text-light);
font-size: 0.9rem;
}
.detail-info {
background: var(--primary-extra-light);
padding: 2rem;
border-radius: 16px;
border-left: 4px solid var(--primary);
margin-top: 2rem;
}
.detail-info h4 {
margin-bottom: 1rem;
color: var(--primary-dark);
font-size: 1.25rem;
}
.conditions-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.condition-item {
padding: 0.75rem 0;
color: var(--text);
line-height: 1.5;
border-bottom: 1px solid rgba(0,0,0,0.1);
font-size: 0.95rem;
}
.condition-item:last-child {
border-bottom: none;
}
.tariff-note {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(0,0,0,0.1);
}
.tariff-note p {
margin: 0;
color: var(--text);
font-size: 0.9rem;
line-height: 1.5;
}
/* Мобильная версия */
@media (max-width: 768px) {
.tariffs-desktop {
display: none;
}
.tariffs-mobile {
display: block;
}
.tariff-accordion {
display: flex;
flex-direction: column;
gap: 1rem;
}
.tariff-accordion-item {
background: white;
border-radius: 16px;
box-shadow: var(--shadow);
border: 1px solid var(--border);
overflow: hidden;
}
.tariff-accordion-header {
padding: 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
background: var(--bg-light);
}
.tariff-accordion-item.active .tariff-accordion-header {
background: var(--primary);
color: white;
}
.tariff-header-mobile {
display: flex;
flex-direction: column;
}
.tariff-header-mobile h3 {
margin: 0 0 0.25rem 0;
font-size: 1.1rem;
color: inherit;
}
.tariff-accordion-item.active .tariff-header-mobile h3 {
color: white;
}
.tariff-price-mobile {
font-size: 1.2rem;
font-weight: 700;
color: var(--primary);
}
.tariff-accordion-item.active .tariff-price-mobile {
color: white;
}
.tariff-badge-mobile {
background: var(--secondary);
color: white;
padding: 4px 8px;
border-radius: 8px;
font-size: 0.7rem;
font-weight: 600;
margin-bottom: 0.5rem;
align-self: flex-start;
}
.accordion-arrow {
transition: transform 0.3s ease;
font-size: 0.8rem;
}
.tariff-accordion-item.active .accordion-arrow {
transform: rotate(180deg);
color: white;
}
.tariff-accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
background: white;
}
.tariff-accordion-item.active .tariff-accordion-content {
max-height: 2000px;
padding: 1.5rem;
}
.tariff-features-mobile {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 1.5rem;
}
.feature-mobile {
display: flex;
justify-content: space-between;
padding: 0.75rem 0;
border-bottom: 1px solid var(--border);
}
.feature-mobile span:first-child {
color: var(--text);
}
.feature-mobile span:last-child {
color: var(--primary);
font-weight: 600;
}
.tariff-description-mobile {
margin-bottom: 1.5rem;
color: var(--text);
}
.tariff-conditions {
margin-bottom: 1.5rem;
}
.tariff-conditions h4 {
color: var(--primary-dark);
margin: 1rem 0 0.5rem 0;
font-size: 1.1rem;
}
.tariff-conditions ul {
list-style: none;
margin: 0;
padding: 0;
}
.tariff-conditions li {
padding: 0.5rem 0;
border-bottom: 1px solid var(--border);
color: var(--text);
font-size: 0.9rem;
line-height: 1.4;
}
.tariff-conditions li:last-child {
border-bottom: none;
}
.btn-full {
width: 100%;
margin-bottom: 1rem;
}
}
@media (max-width: 992px) {
.tariffs-content {
grid-template-columns: 1fr;
gap: 2rem;
}
.tariff-cards {
flex-direction: row;
overflow-x: auto;
padding-bottom: 1rem;
}
.tariff-card {
min-width: 250px;
flex-shrink: 0;
}
}
/* ===== ADVANTAGES SECTION ===== */
.advantages {
background: var(--bg-light);
}
.advantages-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.advantage-card {
background: white;
padding: 2.5rem 2rem;
border-radius: var(--radius-lg);
text-align: center;
box-shadow: var(--shadow);
transition: var(--transition);
border: 1px solid var(--border);
}
.advantage-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-hover);
border-color: var(--primary-light);
}
.advantage-icon {
font-size: 3rem;
margin-bottom: 1.5rem;
}
.advantage-card h3 {
margin-bottom: 1rem;
color: var(--primary-dark);
}
.advantage-card p {
color: var(--text-light);
}
/* ===== HOW IT WORKS SECTION ===== */
.how-it-works {
background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
color: white;
margin-top: 60px;
}
.how-it-works .section-title h2,
.how-it-works .section-title p {
color: white;
}
.how-it-works .section-title h2::after {
background: var(--secondary);
}
.steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
counter-reset: step;
}
.step {
text-align: center;
position: relative;
padding: 2rem 1rem;
}
.step::before {
counter-increment: step;
content: counter(step);
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 60px;
background: var(--secondary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: 700;
color: white;
box-shadow: var(--shadow);
}
.step h3 {
color: white;
margin-top: 2rem;
margin-bottom: 1rem;
}
.step p {
color: rgba(255, 255, 255, 0.9);
}
/* ===== COVERAGE SECTION ===== */
.coverage-map {
background: white;
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
overflow: hidden;
padding: 2rem;
border: 1px solid var(--border);
}
.map-container {
position: relative;
height: 500px;
background: var(--bg-light);
border-radius: var(--radius);
overflow: hidden;
}
.krasnodar-map {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.map-point {
position: absolute;
width: 20px;
height: 20px;
background: var(--secondary);
border-radius: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
transition: var(--transition);
}
.map-point::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 30px;
height: 30px;
background: var(--secondary);
border-radius: 50%;
opacity: 0.3;
animation: pulse 2s infinite;
}
.map-point:hover {
transform: translate(-50%, -50%) scale(1.2);
}
.map-point:hover .map-tooltip {
opacity: 1;
visibility: visible;
transform: translate(-50%, -100%) scale(1);
}
.map-tooltip {
position: absolute;
top: -10px;
left: 50%;
transform: translate(-50%, -100%) scale(0.9);
background: var(--primary-dark);
color: white;
padding: 0.5rem 1rem;
border-radius: var(--radius);
font-size: 0.9rem;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: var(--transition);
pointer-events: none;
}
.map-tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: var(--primary-dark);
}
.point-1 { top: 30%; left: 40%; }
.point-2 { top: 50%; left: 60%; }
.point-3 { top: 70%; left: 45%; }
.point-4 { top: 60%; left: 35%; }
.point-5 { top: 25%; left: 55%; }
@keyframes pulse {
0% {
transform: translate(-50%, -50%) scale(1);
opacity: 0.3;
}
50% {
transform: translate(-50%, -50%) scale(2);
opacity: 0;
}
100% {
transform: translate(-50%, -50%) scale(1);
opacity: 0;
}
}
/* ===== FAQ SECTION ===== */
.faq {
background: var(--bg-light);
margin-top: 40px;
}
.accordion {
max-width: 800px;
margin: 0 auto;
}
.accordion-item {
background: white;
border-radius: var(--radius);
margin-bottom: 1rem;
box-shadow: var(--shadow);
overflow: hidden;
border: 1px solid var(--border);
}
.accordion-header {
padding: 1.5rem 2rem;
background: white;
cursor: pointer;
font-weight: 600;
color: var(--primary-dark);
position: relative;
transition: var(--transition);
user-select: none;
}
.accordion-header::after {
content: '+';
position: absolute;
right: 2rem;
top: 50%;
transform: translateY(-50%);
font-size: 1.5rem;
color: var(--primary);
transition: var(--transition);
}
.accordion-header.active::after {
content: '-';
color: var(--secondary);
}
.accordion-header:hover {
background: var(--primary-extra-light);
}
.accordion-header.active {
background: var(--primary);
color: white;
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
background: white;
}
.accordion-content.active {
max-height: 500px;
}
.accordion-content p {
padding: 0 2rem 1.5rem;
margin: 0;
color: var(--text-light);
}
/* ===== REVIEWS SECTION ===== */
.reviews-slider {
max-width: 800px;
margin: 0 auto;
}
.review-card {
background: white;
border-radius: var(--radius-lg);
padding: 2.5rem;
box-shadow: var(--shadow);
position: relative;
border: 1px solid var(--border);
}
.review-card::before {
content: '"';
position: absolute;
top: 1rem;
left: 2rem;
font-size: 4rem;
color: var(--primary-light);
opacity: 0.2;
font-family: serif;
}
.review-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.review-avatar {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--primary), var(--secondary));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 1.2rem;
}
.review-info h3 {
margin-bottom: 0.5rem;
color: var(--primary-dark);
}
.review-rating {
color: #fbbf24;
font-size: 1.2rem;
}
.review-text {
color: var(--text-light);
font-style: italic;
line-height: 1.7;
}
/* ===== SEO CONTENT SECTION ===== */
.seo-content {
background: var(--bg-light);
}
.seo-container {
max-width: 1200px;
}
.seo-section {
background: white;
border-radius: var(--radius-lg);
padding: 3rem;
box-shadow: var(--shadow);
border: 1px solid var(--border);
}
.seo-section h2 {
color: var(--primary-dark);
margin-bottom: 1.5rem;
font-size: 2rem;
}
.seo-section h3 {
color: var(--primary);
margin: 2rem 0 1rem;
font-size: 1.5rem;
}
.seo-section p {
color: var(--text-light);
margin-bottom: 1.5rem;
line-height: 1.7;
}
.seo-list {
list-style: none;
margin: 1.5rem 0;
}
.seo-list li {
padding: 0.75rem 0;
border-bottom: 1px solid var(--border);
position: relative;
padding-left: 2rem;
color: var(--text-light);
}
.seo-list li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--accent);
font-weight: bold;
font-size: 1.2rem;
}
.seo-list li:last-child {
border-bottom: none;
}
.highlight {
background: var(--primary-extra-light);
border-left: 4px solid var(--primary);
padding: 1.5rem 2rem;
margin: 2rem 0;
border-radius: 0 var(--radius) var(--radius) 0;
}
.highlight p {
margin: 0;
color: var(--text);
font-weight: 500;
}
/* ===== CONTACT SECTION ===== */
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: start;
}
.contact-info h3 {
margin-bottom: 2rem;
color: var(--primary-dark);
}
.contact-details {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.contact-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
background: var(--bg-light);
border-radius: var(--radius);
transition: var(--transition);
border: 1px solid var(--border);
}
.contact-item:hover {
background: var(--primary-extra-light);
transform: translateX(5px);
border-color: var(--primary-light);
}
.contact-icon {
font-size: 1.5rem;
width: 40px;
height: 40px;
background: var(--primary);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.contact-form {
background: white;
padding: 2.5rem;
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
border: 1px solid var(--border);
}
.contact-form h3 {
margin-bottom: 2rem;
color: var(--primary-dark);
text-align: center;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
color: var(--text);
}
.form-control {
width: 100%;
padding: 12px 16px;
border: 2px solid var(--border);
border-radius: var(--radius);
font-size: 1rem;
transition: var(--transition);
background: var(--bg-white);
color: var(--text);
}
.form-control:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
textarea.form-control {
min-height: 120px;
resize: vertical;
}
.submit-btn {
width: 100%;
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
color: white;
border: none;
padding: 16px;
border-radius: var(--radius);
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
}
.submit-btn:hover {
background: linear-gradient(135deg, var(--primary-dark), var(--primary));
transform: translateY(-2px);
box-shadow: var(--shadow);
}
/* ===== FOOTER STYLES ===== */
footer {
background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%);
color: white;
padding: 60px 0 20px;
position: relative;
overflow: hidden;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(6, 182, 212, 0.1) 0%, transparent 50%);
pointer-events: none;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1.2fr 1.5fr;
gap: 3rem;
margin-bottom: 2rem;
position: relative;
z-index: 2;
}
/* Исправления для колонок */
.footer-col {
display: flex;
flex-direction: column;
}
/* Brand Section */
.footer-brand {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.footer-logo {
display: flex;
align-items: center;
gap: 1rem;
}
.footer-logo .logo-icon {
font-size: 2.5rem;
background: linear-gradient(135deg, #06b6d4, #3b82f6);
border-radius: 12px;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 20px rgba(6, 182, 212, 0.3);
}
.footer-logo .logo-text {
display: flex;
flex-direction: column;
}
.footer-logo .logo-title {
font-size: 1rem;
font-weight: 700;
color: white;
line-height: 1.2;
}
.footer-logo .logo-subtitle {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.8);
line-height: 1.2;
}
/* Стили для заголовков навигации как h4 */
.footer-nav-heading {
color: white;
margin-bottom: 1rem;
font-size: 1.5rem;
font-weight: 600;
position: relative;
margin-top: 0;
}
.footer-nav-heading::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 40px;
height: 3px;
background: linear-gradient(90deg, #06b6d4, #3b82f6);
border-radius: 2px;
}
/* Стиль для описательного текста */
.footer-description {
color: rgba(255, 255, 255, 0.85);
margin-bottom: 1.2rem;
font-size: 0.85rem;
line-height: 1.4;
margin-top: 0;
font-weight: 400;
}
/* Social Links */
.social-links {
display: flex;
gap: 1rem;
margin-top: 1rem;
}
.social-link {
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
background: rgba(255, 255, 255, 0.08);
border-radius: 12px;
color: white;
text-decoration: none;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.social-link:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-2px);
}
/* Navigation Links */
.footer-links {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.8rem;
}
.footer-links li {
margin: 0;
}
.footer-links a {
color: rgba(255, 255, 255, 0.85);
text-decoration: none;
transition: all 0.3s ease;
display: block;
padding: 6px 0;
border-radius: 6px;
}
.footer-links a:hover {
color: white;
transform: translateX(5px);
}
/* Contact Items - ИСПРАВЛЕНО */
.footer-contact-list {
display: flex;
flex-direction: column;
gap: 1.2rem;
}
.footer-contact-item {
display: flex;
align-items: flex-start;
gap: 0.8rem;
}
.contact-icon-wrapper {
width: 36px;
height: 36px;
background: rgba(255, 255, 255, 0.1);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 2px;
}
.footer-contact-icon {
font-size: 1.1rem;
}
.contact-content {
flex: 1;
min-width: 0;
}
/* Исправления для телефона */
.footer-phone {
font-size: 1.1rem;
font-weight: 600;
color: white;
text-decoration: none;
transition: all 0.3s ease;
display: block;
margin-bottom: 0.2rem;
white-space: nowrap;
}
.footer-phone:hover {
color: #06b6d4;
}
.phone-note {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.7);
line-height: 1.3;
}
.contact-content a:not(.footer-phone) {
color: rgba(255, 255, 255, 0.9);
text-decoration: none;
transition: all 0.3s ease;
font-size: 0.9rem;
}
.contact-content a:not(.footer-phone):hover {
color: white;
text-decoration: underline;
}
.contact-content span {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.9);
line-height: 1.4;
}
/* Messenger Buttons */
.footer-actions p {
color: rgba(255, 255, 255, 0.85);
margin-bottom: 1.2rem;
font-size: 0.85rem;
line-height: 1.4;
margin-top: 0;
}
.footer-messengers {
display: flex;
flex-direction: column;
gap: 0.8rem;
}
.messenger-btn {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 12px 16px;
border-radius: 10px;
font-weight: 500;
text-decoration: none;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.15);
background: rgba(255, 255, 255, 0.08);
color: white;
font-size: 0.9rem;
}
.messenger-btn:hover {
transform: translateY(-2px);
}
.messenger-btn.telegram:hover {
background: #0088cc;
border-color: #0088cc;
}
.messenger-btn.whatsapp:hover {
background: #25D366;
border-color: #25D366;
}
.messenger-icon {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
}
/* Footer Bottom */
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.15);
padding-top: 1.5rem;
position: relative;
z-index: 2;
}
.copyright {
text-align: center;
color: rgba(255, 255, 255, 0.7);
font-size: 0.85rem;
}
.copyright p {
margin: 0;
}
/* Адаптивность для мобильных */
@media (max-width: 1024px) {
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
}
@media (max-width: 768px) {
.footer-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
footer {
padding: 40px 0 20px;
}
.container {
padding: 0 15px;
}
}
/* ===== CTA SECTION ===== */
.cta-section {
background: var(--bg-light);
padding: 80px 0;
position: relative;
}
.cta-content {
text-align: center;
max-width: 800px;
margin: 0 auto;
}
.cta-content h2 {
font-size: 2.5rem;
margin-bottom: 1.5rem;
color: var(--primary-dark);
}
.cta-content p {
font-size: 1.2rem;
margin-bottom: 3rem;
color: var(--text-light);
line-height: 1.6;
}
.cta-buttons {
display: flex;
gap: 1.5rem;
justify-content: center;
flex-wrap: wrap;
}
.cta-section .btn {
padding: 16px 32px;
font-size: 1.1rem;
font-weight: 600;
border-radius: var(--radius);
min-width: 180px;
transition: var(--transition);
}
.cta-section .btn-primary {
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
color: white;
border: 2px solid white; /* Белая обводка */
box-shadow: var(--shadow);
}
.cta-section .btn-primary:hover {
background: linear-gradient(135deg, var(--primary-dark), var(--primary));
transform: translateY(-2px);
box-shadow: var(--shadow-hover);
border-color: white; /* Сохраняем белую обводку при наведении */
}
.cta-section .btn-secondary {
background: white;
color: var(--primary);
border: 2px solid var(--border);
box-shadow: var(--shadow);
}
.cta-section .btn-secondary:hover {
background: var(--primary-extra-light);
border-color: var(--primary-light);
transform: translateY(-2px);
box-shadow: var(--shadow-hover);
}
/* Адаптивность для CTA */
@media (max-width: 768px) {
.cta-section {
padding: 60px 0;
}
.cta-content h2 {
font-size: 2rem;
}
.cta-content p {
font-size: 1.1rem;
margin-bottom: 2.5rem;
}
.cta-buttons {
flex-direction: column;
align-items: center;
gap: 1rem;
}
.cta-section .btn {
width: 100%;
max-width: 280px;
}
}
@media (max-width: 480px) {
.cta-content h2 {
font-size: 1.75rem;
}
.cta-content p {
font-size: 1rem;
}
}
/* ===== MODAL STYLES ===== */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
display: none;
align-items: center;
justify-content: center;
z-index: 10000;
backdrop-filter: blur(8px);
}
.modal-content {
background: white;
border-radius: 20px;
width: 90%;
max-width: 420px;
overflow: hidden;
box-shadow: var(--shadow-hover);
animation: slideUp 0.4s ease;
position: relative;
border: 1px solid var(--border);
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(50px) scale(0.9);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.close-btn {
position: absolute;
top: 15px;
right: 15px;
background: rgba(0, 0, 0, 0.1);
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
color: var(--text-light);
font-size: 20px;
transition: var(--transition);
z-index: 2;
}
.close-btn:hover {
background: #ef4444;
color: white;
transform: rotate(90deg);
}
.modal-header {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color: white;
padding: 40px 20px 30px;
text-align: center;
position: relative;
}
.modal-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
background-size: cover;
}
.modal-icon {
font-size: 44px;
margin-bottom: 10px;
position: relative;
z-index: 1;
}
.modal-header h2 {
color: white;
margin-bottom: 0.5rem;
position: relative;
z-index: 1;
}
.modal-header p {
color: rgba(255, 255, 255, 0.9);
margin: 0;
position: relative;
z-index: 1;
}
.callback-form {
padding: 30px 25px;
}
.input-with-icon {
position: relative;
}
.input-with-icon i {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: var(--text-lighter);
font-size: 16px;
}
.input-with-icon input {
width: 100%;
padding: 14px 15px 14px 45px;
border: 2px solid var(--border);
border-radius: 12px;
font-size: 16px;
background: var(--bg-light);
transition: var(--transition);
color: var(--text);
}
.input-with-icon input:focus {
border-color: var(--primary);
background: white;
outline: none;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.modal-footer {
padding: 15px 25px 25px;
text-align: center;
font-size: 13px;
color: var(--text-light);
}
.guarantee {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
/* ===== FIX FOR FADE-IN ELEMENTS ===== */
/* Убираем анимацию появления, делаем все элементы сразу видимыми */
.feature-card,
.kit-card,
.service-card,
.advantage-card,
.review-card {
opacity: 1 !important;
transform: translateY(0) !important;
}
/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1200px) {
.container {
max-width: 992px;
}
.hero-content {
grid-template-columns: 1fr 350px;
gap: 40px;
}
h1 {
font-size: 2.8rem;
}
h2 {
font-size: 2.2rem;
}
}
@media (max-width: 992px) {
.container {
max-width: 768px;
}
.hero-content {
grid-template-columns: 1fr;
gap: 40px;
}
.hero-sidebar {
max-width: 500px;
margin: 0 auto;
}
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
.contact-grid {
grid-template-columns: 1fr;
gap: 3rem;
}
section {
padding: 60px 0;
}
}
@media (max-width: 768px) {
.container {
max-width: 576px;
padding: 0 15px;
}
h1 {
font-size: 2.4rem;
}
h2 {
font-size: 2rem;
}
.benefits-grid {
grid-template-columns: 1fr;
}
.features-grid,
.kits-grid,
.services-grid,
.advantages-grid {
grid-template-columns: 1fr;
}
.steps {
grid-template-columns: 1fr;
}
.footer-grid {
grid-template-columns: 1fr;
}
.hero {
padding: 60px 0;
}
.hero h1 {
font-size: 2.2rem;
}
.description-frame {
padding: 1.5rem;
}
.hero-cta-block {
padding: 2rem;
}
.tariffs-table {
display: block;
overflow-x: auto;
}
.request-btn {
bottom: 1rem;
right: 1rem;
padding: 12px 20px;
font-size: 0.9rem;
}
}
@media (max-width: 576px) {
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.75rem;
}
.section-title {
margin-bottom: 3rem;
}
.section-title p {
font-size: 1rem;
}
.feature-card,
.service-card,
.advantage-card {
padding: 2rem 1.5rem;
}
.kit-content,
.contact-form,
.seo-section {
padding: 1.5rem;
}
.review-card {
padding: 2rem 1.5rem;
}
.modal-content {
width: 95%;
}
.callback-form {
padding: 20px 15px;
}
.messenger-buttons {
grid-template-columns: 1fr;
}
}
/* ===== PRINT STYLES ===== */
@media print {
.request-btn,
.modal-overlay,
.hero-cta-block,
.cta-buttons {
display: none !important;
}
body {
background: white;
color: var(--text);
font-size: 12pt;
}
.hero {
background: white !important;
color: var(--text);
padding: 20px 0;
}
.hero h1,
.hero .title-sub {
color: var(--text);
}
.description-frame {
background: white;
border: 1px solid var(--border);
}
.btn {
display: none;
}
a {
color: var(--primary);
text-decoration: underline;
}
}
/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Focus styles for keyboard navigation */
button:focus,
a:focus,
input:focus,
textarea:focus {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
/* Selection styles */
::selection {
background: rgba(37, 99, 235, 0.2);
color: inherit;
}
::-moz-selection {
background: rgba(37, 99, 235, 0.2);
color: inherit;
}
/* ===== CITIES SECTION ===== */
.cities-section {
background: var(--bg-light);
padding: 80px 0;
position: relative;
}
.cities-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--border), transparent);
}
/* Search */
.search-container {
max-width: 500px;
margin: 0 auto 3rem auto;
position: relative;
}
.search-box {
position: relative;
width: 100%;
}
.search-input {
width: 100%;
padding: 16px 50px 16px 20px;
border: 2px solid var(--border);
border-radius: 25px;
font-size: 1rem;
background: white;
transition: all 0.3s ease;
box-shadow: var(--shadow);
}
.search-input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.search-icon {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
color: var(--text-light);
font-size: 1.2rem;
}
/* Filters */
.filters {
display: flex;
justify-content: center;
gap: 1rem;
margin-bottom: 3rem;
flex-wrap: wrap;
}
.filter-btn {
padding: 12px 24px;
background: white;
border: 2px solid var(--border);
border-radius: 25px;
font-weight: 600;
color: var(--text-light);
cursor: pointer;
transition: all 0.3s ease;
}
.filter-btn:hover {
border-color: var(--primary-light);
color: var(--primary);
transform: translateY(-2px);
}
.filter-btn.active {
background: var(--primary);
border-color: var(--primary);
color: white;
box-shadow: var(--shadow);
}
/* Cities Grid */
.cities-grid {
display: flex;
flex-direction: column;
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
/* Region Card */
.region-card {
background: white;
border-radius: 20px;
box-shadow: var(--shadow);
border: 1px solid var(--border);
overflow: hidden;
transition: all 0.3s ease;
}
.region-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-hover);
}
.region-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 2rem;
background: linear-gradient(135deg, #f8fafc, white);
border-bottom: 1px solid var(--border);
}
.region-title h3 {
margin: 0 0 0.5rem 0;
color: var(--primary-dark);
font-size: 1.5rem;
}
.region-count {
color: var(--text-light);
font-size: 0.9rem;
font-weight: 500;
}
.region-domain {
background: var(--primary);
color: white;
padding: 8px 16px;
border-radius: 12px;
font-size: 0.8rem;
font-weight: 600;
}
.region-content {
padding: 2rem;
}
/* Cities Groups */
.cities-group {
margin-bottom: 2.5rem;
}
.cities-group h4 {
color: var(--text-light);
font-size: 1.1rem;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--border);
font-weight: 600;
}
.cities-row {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 1rem;
margin-bottom: 1rem;
}
/* City Cards */
.city-card {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background: white;
border: 1px solid var(--border);
border-radius: 12px;
text-decoration: none;
color: var(--text);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.city-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.05), transparent);
transition: left 0.5s;
}
.city-card:hover::before {
left: 100%;
}
.city-card:hover {
border-color: var(--primary);
transform: translateY(-2px);
box-shadow: var(--shadow);
color: var(--primary-dark);
}
.city-name {
font-weight: 500;
flex: 1;
}
.city-badge {
background: var(--secondary);
color: white;
padding: 2px 8px;
border-radius: 8px;
font-size: 0.7rem;
font-weight: 600;
margin-left: 0.5rem;
}
/* City Types */
.city-card.main-city {
border-left: 4px solid var(--primary);
background: linear-gradient(135deg, var(--primary-extra-light), white);
}
.city-card.village {
border-left: 4px solid var(--accent);
background: var(--bg-light);
}
.city-card.village .city-name {
font-size: 0.9rem;
}
/* Districts */
.districts {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.district {
background: var(--bg-light);
border: 1px solid var(--border);
border-radius: 16px;
overflow: hidden;
transition: all 0.3s ease;
}
.district:hover {
border-color: var(--primary-light);
box-shadow: var(--shadow);
}
.district-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.5rem;
cursor: pointer;
transition: all 0.3s ease;
}
.district-header:hover {
background: var(--primary-extra-light);
}
.district-header h5 {
margin: 0;
color: var(--primary-dark);
font-size: 1.1rem;
font-weight: 600;
}
.toggle-btn {
display: flex;
align-items: center;
gap: 0.75rem;
background: none;
border: none;
cursor: pointer;
color: var(--text-light);
font-size: 0.9rem;
transition: all 0.3s ease;
padding: 8px 12px;
border-radius: 8px;
}
.toggle-btn:hover {
background: rgba(37, 99, 235, 0.1);
color: var(--primary);
}
.toggle-icon {
font-size: 1.1rem;
font-weight: 300;
transition: transform 0.3s ease;
}
.toggle-text {
font-weight: 500;
}
.district.active .toggle-icon {
transform: rotate(45deg);
}
/* District Content */
.district-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
background: white;
}
.district.active .district-content {
max-height: 1000px;
}
.district-content .cities-row {
padding: 0 1.5rem 1.5rem;
margin: 0;
}
/* More Cities */
.more-cities {
display: none;
padding: 0 1.5rem;
margin-bottom: 1rem;
}
.more-cities.show {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 1rem;
animation: fadeIn 0.3s ease;
}
.show-more-btn {
width: calc(100% - 3rem);
margin: 0 1.5rem 1.5rem;
padding: 12px;
background: var(--primary-extra-light);
border: 1px solid var(--primary-light);
border-radius: 12px;
color: var(--primary);
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.show-more-btn:hover {
background: var(--primary);
color: white;
transform: translateY(-2px);
}
.plus-icon {
font-size: 1.1rem;
font-weight: 300;
transition: transform 0.3s ease;
}
.show-more-btn.active .plus-icon {
transform: rotate(45deg);
}
/* Animations */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Search Results Highlight */
.city-card.highlight {
background: linear-gradient(135deg, #fff3cd, #fff);
border-color: #ffc107;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% {
box-shadow: 0 0 0 rgba(255, 193, 7, 0.4);
}
50% {
box-shadow: 0 0 20px rgba(255, 193, 7, 0.8);
}
}
/* No Results */
.no-results {
text-align: center;
color: var(--text-light);
padding: 3rem;
font-style: italic;
font-size: 1.1rem;
}
/* Responsive */
@media (max-width: 768px) {
.cities-section {
padding: 60px 0;
}
.region-header {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
padding: 1.5rem;
}
.region-content {
padding: 1.5rem;
}
.cities-row {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 0.75rem;
}
.district-header {
padding: 1.25rem;
}
.district-content .cities-row {
padding: 0 1.25rem 1.25rem;
}
.filters {
gap: 0.5rem;
}
.filter-btn {
padding: 10px 16px;
font-size: 0.9rem;
}
.search-container {
margin-bottom: 2rem;
}
}
@media (max-width: 576px) {
.cities-row {
grid-template-columns: 1fr;
}
.district-header {
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
}
.toggle-btn {
align-self: flex-end;
}
.region-domain {
align-self: flex-start;
}
}
.btn-check-connection {
background: #ff6b00;
border: 2px solid #ff6b00;
color: white;
padding: 12px 24px;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
width: 100%;
margin-top: 15px;
}
.btn-check-connection:hover {
background: #e55c00;
border-color: #e55c00;
}
.coverage {
padding: 80px 0;
background: var(--bg-light);
}
.coverage-image-container {
display: flex;
justify-content: center;
margin: 3rem 0;
}
.coverage-centered-image {
width: 100%;
max-width: 900px;
height: auto;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
display: block;
}
.coverage-content {
max-width: 800px;
margin: 0 auto;
}
.coverage-info h3 {
font-size: 2rem;
color: var(--primary-dark);
margin-bottom: 1.5rem;
text-align: center;
}
.coverage-info p {
font-size: 1.1rem;
line-height: 1.6;
color: var(--text);
margin-bottom: 2rem;
text-align: center;
}
.coverage-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
max-width: 800px;
margin: 0 auto;
}
.coverage-feature {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem;
background: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
transition: transform 0.2s ease;
}
.coverage-feature:hover {
transform: translateY(-2px);
}
.feature-icon {
font-size: 1.2rem;
}
.feature-text {
font-weight: 500;
color: var(--text);
}
/* Адаптивность */
@media (max-width: 768px) {
.coverage {
padding: 60px 0;
}
.coverage-image-container {
margin: 2rem 0;
}
.coverage-centered-image {
border-radius: 15px;
}
.coverage-features {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 0.75rem;
}
.coverage-info h3 {
font-size: 1.75rem;
}
.coverage-feature {
padding: 0.75rem;
}
}
@media (max-width: 480px) {
.coverage-features {
grid-template-columns: 1fr 1fr;
}
}
.operator-tariffs-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}
.operator-tariff-card {
background: white;
border-radius: 20px;
padding: 2rem;
box-shadow: var(--shadow);
border: 1px solid var(--border);
transition: var(--transition);
text-align: center;
position: relative;
overflow: hidden;
}
.operator-tariff-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--primary), var(--secondary));
}
.operator-tariff-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-hover);
border-color: var(--primary-light);
}
.operator-tariff-header {
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 2px solid var(--border);
}
.operator-tariff-header h3 {
color: var(--primary-dark);
margin-bottom: 0.5rem;
font-size: 1.5rem;
}
.operator-price-range {
font-size: 1.5rem;
font-weight: 700;
color: var(--primary);
}
.operator-tariff-features {
margin-bottom: 2rem;
}
.operator-feature {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 0;
border-bottom: 1px solid var(--border);
}
.operator-feature:last-child {
border-bottom: none;
}
.operator-feature-name {
color: var(--text-light);
font-weight: 500;
}
.operator-feature-value {
color: var(--text);
font-weight: 600;
}
.operator-feature-value.operator-price-highlight {
color: var(--primary);
font-weight: 700;
font-size: 1.1rem;
}
.operator-tariff-btn {
width: 100%;
margin-top: 1rem;
}
@media (max-width: 768px) {
.operator-tariffs-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.operator-tariff-card {
padding: 1.5rem;
}
.operator-tariff-header h3 {
font-size: 1.3rem;
}
.operator-price-range {
font-size: 1.3rem;
}
}
/* ===== INSTALLATION PROCESS SECTION ===== */
.installation {
padding: 80px 0;
background: var(--bg-white);
position: relative;
}
.installation::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--border), transparent);
}
.installation .steps {
display: flex;
flex-direction: column;
gap: 2rem;
max-width: 800px;
margin: 0 auto;
position: relative;
counter-reset: installation-step 0; /* Уникальное имя счетчика */
}
.installation .steps::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 30px;
width: 2px;
background: linear-gradient(to bottom, var(--primary-light), var(--secondary));
border-radius: 1px;
}
.installation .step {
display: flex;
align-items: flex-start;
gap: 2rem;
position: relative;
padding: 2rem;
background: white;
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
border: 1px solid var(--border);
transition: var(--transition);
counter-increment: installation-step; /* Используем уникальное имя */
}
.installation .step:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-hover);
border-color: var(--primary-light);
}
.installation .step::before {
content: counter(installation-step); /* Используем уникальное имя */
position: absolute;
left: -15px;
top: 50%;
transform: translateY(-50%);
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: 700;
color: white;
box-shadow: var(--shadow);
z-index: 2;
border: 4px solid var(--bg-white);
}
.installation .step-content {
flex: 1;
margin-left: 3rem;
}
.installation .step-content h3 {
color: var(--primary-dark);
margin-bottom: 1rem;
font-size: 1.5rem;
font-weight: 600;
position: relative;
}
.installation .step-content h3::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 40px;
height: 3px;
background: var(--secondary);
border-radius: 2px;
}
.installation .step-content p {
color: var(--text-light);
line-height: 1.7;
margin: 0;
font-size: 1.05rem;
}
/* Alternating step styles for visual interest */
.installation .step:nth-child(even) {
margin-left: 2rem;
background: linear-gradient(135deg, var(--bg-light), white);
}
.installation .step:nth-child(even)::before {
background: linear-gradient(135deg, var(--secondary), var(--secondary-dark));
}
.installation .step:nth-child(odd) {
margin-right: 2rem;
}
/* Step icons using pseudo-elements */
.installation .step:nth-child(1)::after {
content: '👨💼';
position: absolute;
right: 2rem;
top: 2rem;
font-size: 2rem;
opacity: 0.1;
}
.installation .step:nth-child(2)::after {
content: '📡';
position: absolute;
right: 2rem;
top: 2rem;
font-size: 2rem;
opacity: 0.1;
}
.installation .step:nth-child(3)::after {
content: '🔌';
position: absolute;
right: 2rem;
top: 2rem;
font-size: 2rem;
opacity: 0.1;
}
.installation .step:nth-child(4)::after {
content: '🖥️';
position: absolute;
right: 2rem;
top: 2rem;
font-size: 2rem;
opacity: 0.1;
}
.installation .step:nth-child(5)::after {
content: '📋';
position: absolute;
right: 2rem;
top: 2rem;
font-size: 2rem;
opacity: 0.1;
}
/* Responsive Design */
@media (max-width: 768px) {
.installation {
padding: 60px 0;
}
.installation .steps::before {
left: 20px;
}
.installation .step {
padding: 1.5rem;
gap: 1rem;
margin: 0 !important;
}
.installation .step::before {
width: 50px;
height: 50px;
left: -10px;
font-size: 1.2rem;
}
.installation .step-content {
margin-left: 2rem;
}
.installation .step-content h3 {
font-size: 1.3rem;
}
.installation .step-content p {
font-size: 1rem;
}
.installation .step::after {
display: none;
}
}
@media (max-width: 480px) {
.installation .step {
padding: 1.25rem;
}
.installation .step::before {
width: 40px;
height: 40px;
left: -5px;
font-size: 1rem;
}
.installation .step-content {
margin-left: 1.5rem;
}
.installation .step-content h3 {
font-size: 1.2rem;
}
}
/* Animation for steps */
@keyframes slideInStep {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.installation .step {
animation: slideInStep 0.6s ease-out;
}
.installation .step:nth-child(1) { animation-delay: 0.1s; }
.installation .step:nth-child(2) { animation-delay: 0.2s; }
.installation .step:nth-child(3) { animation-delay: 0.3s; }
.installation .step:nth-child(4) { animation-delay: 0.4s; }
.installation .step:nth-child(5) { animation-delay: 0.5s; }
/* Hover effects */
.installation .step:hover::before {
transform: translateY(-50%) scale(1.1);
box-shadow: var(--shadow-hover);
}
.installation .step:hover::after {
opacity: 0.2;
transform: scale(1.2);
}
/* Focus styles for accessibility */
.installation .step:focus-within {
outline: 2px solid var(--primary);
outline-offset: 2px;
}