/* ============================================
ЧАСТЬ 1: BASE STYLES + ANIMATIONS
Автор рефакторинга: Claude
============================================ */
/* ============================================
SCROLL & TARGET
============================================ */
html {
scroll-behavior: smooth;
}
:target {
scroll-margin-top: 80px;
animation: target-fade 1s ease;
}
/* ============================================
KEYFRAMES — каждый объявлен ОДИН раз
============================================ */
@keyframes target-fade {
from { background-color: rgba(52, 152, 219, 0.1); }
to { background-color: transparent; }
}
@keyframes shimmer {
0% { transform: translateX(-100%) scale(0.8); opacity: 0; }
50% { transform: translateX(0) scale(1.2); opacity: 1; box-shadow: 0 0 20px rgba(255,255,255,0.8); }
100% { transform: translateX(100%) scale(0.8); opacity: 0; }
}
@keyframes sparkle {
0%, 100% { opacity: 0; transform: scale(0); }
50% { opacity: 1; transform: scale(1); }
}
@keyframes glow {
0%, 100% { box-shadow: 0 0 5px rgba(96,165,250,0.3); }
50% { box-shadow: 0 0 20px rgba(96,165,250,0.8), 0 0 30px rgba(96,165,250,0.4); }
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(96,165,250,0.4); }
70% { box-shadow: 0 0 0 10px rgba(96,165,250,0); }
100% { box-shadow: 0 0 0 0 rgba(96,165,250,0); }
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
from { opacity: 0; transform: translateY(-20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes slideDown {
from { opacity: 0; transform: translateY(-10px) scale(0.95); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes luxurySlideDown {
0% { opacity: 0; transform: translateY(15px) scale(0.9) rotateX(10deg); filter: blur(5px); }
50% { opacity: 0.8; transform: translateY(5px) scale(1.02) rotateX(2deg); filter: blur(1px); }
100% { opacity: 1; transform: translateY(0) scale(1) rotateX(0deg); filter: blur(0); }
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-15px); }
}
/* ============================================
RESET
============================================ */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* ============================================
BODY
============================================ */
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
font-size: 16px;
line-height: 1.6;
color: #2d3748;
overflow-x: hidden;
}
body.menu-open {
overflow: hidden;
}
/* ============================================
ТИПОГРАФИЧЕСКАЯ ШКАЛА
============================================ */
h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.2; font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.3; font-weight: 700; }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.4rem); line-height: 1.35; font-weight: 600; }
h4 { font-size: clamp(1rem, 2vw, 1.2rem); line-height: 1.4; font-weight: 600; }
p { line-height: 1.6; margin-bottom: 1rem; }
a {
color: #4299e1;
text-decoration: none;
transition: color 0.3s ease;
}
a:hover { color: #3182ce; }
ul, ol { list-style: none; padding: 0; margin: 0; }
img {
max-width: 100%;
height: auto;
display: block;
}
/* ============================================
ОБЩИЕ КОНТЕЙНЕРЫ
============================================ */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
position: relative;
z-index: 2;
}
.section-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.resource-container,
.main-container,
.tl-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* ============================================
SECTION TITLE — единый стиль для всех секций
============================================ */
.section-title {
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 700;
color: #1a202c;
text-align: center;
margin-bottom: 48px;
line-height: 1.3;
position: relative;
padding-bottom: 16px;
animation: fadeInDown 0.8s ease-out forwards;
}
.section-title::after {
content: '';
display: block;
width: 80px;
height: 4px;
background: linear-gradient(to right, #4299e1, #7f9cf5);
margin: 12px auto 0;
border-radius: 2px;
transition: width 0.3s ease;
}
.section-title:hover::after {
width: 120px;
}
.section-description {
text-align: center;
font-size: 1rem;
color: #718096;
line-height: 1.6;
margin-bottom: 2.5rem;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
/* ============================================
ДОСТУПНОСТЬ
============================================ */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ============================================
ЧАСТЬ 2: HEADER + NAV + MENU + HAMBURGER
============================================ */
/* ============================================
HEADER
============================================ */
header {
background: #0f172a;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
position: sticky;
top: 0;
z-index: 1000;
height: 70px;
padding: 0 16px;
display: flex;
align-items: center;
transition: all 0.3s ease;
}
/* ============================================
NAV
============================================ */
nav {
max-width: 1440px;
margin: 0 auto;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
/* ============================================
LOGO
============================================ */
.logo a {
font-size: 2rem;
font-weight: 800;
color: #fff;
text-decoration: none;
white-space: nowrap;
text-shadow:
2px 2px 0px #3498db,
4px 4px 0px rgba(59, 130, 246, 0.4);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.logo:hover a {
transform: translateY(-4px) rotateX(15deg) rotateZ(-1deg);
text-shadow:
4px 4px 0px #3498db,
8px 8px 0px rgba(59, 130, 246, 0.4);
}
/* ============================================
MENU — Desktop
============================================ */
.menu,
.menu ul,
.menu li,
.submenu,
.submenu ul,
.submenu li {
list-style: none !important;
padding-left: 0;
margin-left: 0;
}
.menu {
display: flex;
gap: 1.5rem;
align-items: center;
transition: all 0.3s ease;
}
.menu > li {
position: relative;
padding: 1rem 0;
}
/* ============================================
MENU LINKS — Desktop
============================================ */
.menu a {
color: #cbd5e1;
text-decoration: none;
font-size: 0.95rem;
font-weight: 500;
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
position: relative;
overflow: hidden;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.05) 0%,
rgba(255, 255, 255, 0.02) 100%
);
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Shimmer effect */
.menu a::before {
content: '';
position: absolute;
top: -2px;
left: -100%;
width: 100%;
height: calc(100% + 4px);
background: linear-gradient(
110deg,
transparent 20%,
rgba(255, 255, 255, 0.1) 30%,
rgba(255, 255, 255, 0.8) 50%,
rgba(96, 165, 250, 0.4) 60%,
rgba(255, 255, 255, 0.1) 70%,
transparent 80%
);
transition: left 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: 1;
border-radius: inherit;
}
.menu a::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: radial-gradient(
ellipse at center,
rgba(255, 255, 255, 0.6) 0%,
rgba(96, 165, 250, 0.3) 30%,
transparent 70%
);
transition: left 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s;
z-index: 2;
border-radius: inherit;
}
.menu a:hover::before { left: 100%; animation: shimmer 1.5s ease-in-out infinite; }
.menu a:hover::after { left: 100%; }
.menu a:hover {
color: #ffffff;
background: linear-gradient(
135deg,
rgba(96, 165, 250, 0.3) 0%,
rgba(59, 130, 246, 0.4) 100%
);
border: 1px solid rgba(96, 165, 250, 0.6);
box-shadow:
0 15px 35px rgba(96, 165, 250, 0.25),
0 5px 15px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.3),
0 0 0 1px rgba(96, 165, 250, 0.3);
transform: translateY(-3px) scale(1.02);
animation: glow 2s ease-in-out infinite;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}
.menu a:focus {
outline: none;
box-shadow:
0 0 0 2px rgba(96, 165, 250, 0.5),
0 0 10px rgba(96, 165, 250, 0.3);
}
/* ============================================
SUBMENU — Desktop
============================================ */
.submenu {
position: absolute;
top: 100%;
left: 0;
min-width: 240px;
padding: 0.7rem;
z-index: 1000;
pointer-events: none;
background: linear-gradient(
135deg,
rgba(30, 41, 59, 0.98) 0%,
rgba(15, 23, 42, 0.99) 50%,
rgba(30, 41, 59, 0.98) 100%
);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 1.2rem;
backdrop-filter: blur(25px) saturate(1.2);
box-shadow:
0 30px 60px rgba(0, 0, 0, 0.4),
0 15px 30px rgba(0, 0, 0, 0.3),
0 5px 15px rgba(0, 0, 0, 0.2),
0 0 0 1px rgba(96, 165, 250, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
overflow: hidden;
opacity: 0;
visibility: hidden;
transform: translateY(15px) scale(0.9) rotateX(10deg);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Треугольник-стрелка */
.submenu::before {
content: '';
position: absolute;
top: -10px;
left: 25px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid rgba(30, 41, 59, 0.98);
filter: drop-shadow(0 -3px 6px rgba(0, 0, 0, 0.2));
}
/* Блик при появлении */
.submenu::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
120deg,
transparent 30%,
rgba(96, 165, 250, 0.1) 50%,
transparent 70%
);
transition: left 0.6s ease;
z-index: 1;
}
/* Desktop-only: hover открывает подменю (не срабатывает на мобильных) */
@media (min-width: 1025px) {
.menu > li:hover .submenu {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1) rotateX(0deg);
pointer-events: auto;
animation: luxurySlideDown 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.menu > li:hover .submenu::after {
left: 100%;
}
}
/* Разделители между пунктами */
.submenu li:not(:last-child)::after {
content: '';
position: absolute;
bottom: -0.175rem;
left: 1rem;
right: 1rem;
height: 1px;
background: linear-gradient(
90deg,
transparent 0%,
rgba(96, 165, 250, 0.3) 20%,
rgba(96, 165, 250, 0.1) 50%,
rgba(96, 165, 250, 0.3) 80%,
transparent 100%
);
opacity: 0.5;
}
/* Анимация пунктов подменю */
.submenu li {
margin: 0.2rem 0;
opacity: 0;
animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.submenu li:nth-child(1) { animation-delay: 0.1s; }
.submenu li:nth-child(2) { animation-delay: 0.2s; }
.submenu li:nth-child(3) { animation-delay: 0.3s; }
.submenu li:nth-child(4) { animation-delay: 0.4s; }
.submenu li:nth-child(5) { animation-delay: 0.5s; }
/* ============================================
SUBMENU LINKS — Desktop
============================================ */
.submenu a {
display: flex;
align-items: center;
padding: 0.6rem 1.4rem 0.6rem 2rem !important;
margin: 0;
border-radius: 0.5rem;
font-size: 0.875rem;
font-weight: 500;
color: #e2e8f0;
position: relative;
overflow: hidden;
z-index: 2;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.05) 0%,
rgba(255, 255, 255, 0.02) 50%,
rgba(96, 165, 250, 0.03) 100%
);
border: 1px solid rgba(255, 255, 255, 0.08);
backdrop-filter: blur(5px);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Shimmer */
.submenu a::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
120deg,
transparent 25%,
rgba(255, 255, 255, 0.1) 35%,
rgba(96, 165, 250, 0.3) 50%,
rgba(255, 255, 255, 0.1) 65%,
transparent 75%
);
transition: left 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: 1;
}
/* Стрелка-индикатор */
.submenu a::after {
content: '?';
position: absolute;
left: 0.8rem;
top: 50%;
transform: translateY(-50%) scale(0);
color: rgba(96, 165, 250, 0.6);
font-size: 0.65rem;
transition: all 0.3s ease;
z-index: 4;
}
.submenu a:hover::before { left: 100%; }
.submenu a:hover::after {
transform: translateY(-50%) scale(1);
color: rgba(96, 165, 250, 1);
text-shadow: 0 0 8px rgba(96, 165, 250, 0.8);
}
.submenu a:hover {
color: #ffffff;
background: linear-gradient(
135deg,
rgba(96, 165, 250, 0.2) 0%,
rgba(59, 130, 246, 0.3) 50%,
rgba(96, 165, 250, 0.2) 100%
);
border: 1px solid rgba(96, 165, 250, 0.4);
box-shadow:
0 8px 25px rgba(96, 165, 250, 0.2),
0 3px 10px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.2),
0 0 0 1px rgba(96, 165, 250, 0.3);
transform: translateX(8px) scale(1.02);
text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}
.submenu a:focus {
outline: none;
box-shadow:
0 0 0 2px rgba(96, 165, 250, 0.5),
0 0 10px rgba(96, 165, 250, 0.3);
}
/* Индикатор подменю (стрелка в nav-item) */
.submenu-arrow {
font-size: 0.75rem;
color: #94a3b8;
margin-left: auto;
transition: all 0.3s ease;
}
.menu a.active .submenu-arrow {
transform: rotate(180deg);
color: #60a5fa;
}
/* ============================================
HAMBURGER BUTTON
============================================ */
.hamburger {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 6px;
width: 44px;
height: 44px;
padding: 10px;
cursor: pointer;
z-index: 1001;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.15) 0%,
rgba(255, 255, 255, 0.08) 100%
);
box-shadow:
0 4px 15px rgba(0, 0, 0, 0.2),
0 2px 8px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
position: relative;
overflow: hidden;
backdrop-filter: blur(10px);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Shimmer на hamburger */
.hamburger::before {
content: '';
position: absolute;
top: -2px;
left: -100%;
width: 100%;
height: calc(100% + 4px);
background: linear-gradient(
120deg,
transparent 20%,
rgba(255, 255, 255, 0.3) 40%,
rgba(96, 165, 250, 0.6) 50%,
rgba(255, 255, 255, 0.3) 60%,
transparent 80%
);
transition: left 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: 1;
border-radius: inherit;
}
/* Ripple при нажатии */
.hamburger::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
transform: translate(-50%, -50%) scale(0);
border-radius: 50%;
opacity: 0;
pointer-events: none;
transition: transform 0.4s ease, opacity 0.4s ease;
z-index: 2;
}
.hamburger:hover::before { left: 100%; animation: shimmer 1.5s ease-in-out infinite; }
.hamburger:active::after { transform: translate(-50%, -50%) scale(2); opacity: 1; transition: transform 0.2s ease, opacity 0.1s ease; }
.hamburger:hover {
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.25) 0%,
rgba(255, 255, 255, 0.15) 100%
);
transform: translateY(-2px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow:
0 8px 25px rgba(0, 0, 0, 0.25),
0 4px 12px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.hamburger:active {
transform: translateY(1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.hamburger:focus {
outline: none;
box-shadow:
0 0 0 2px rgba(96, 165, 250, 0.5),
0 0 10px rgba(96, 165, 250, 0.3);
}
/* Полоски */
.hamburger span {
display: block;
width: 24px;
height: 2.5px;
background: #fff;
border-radius: 3px;
position: relative;
z-index: 3;
transform-origin: center;
box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.2);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Активное состояние — крестик */
.hamburger.active {
background: linear-gradient(
135deg,
rgba(96, 165, 250, 0.3) 0%,
rgba(59, 130, 246, 0.4) 100%
);
border: 1px solid rgba(96, 165, 250, 0.4);
box-shadow:
0 4px 15px rgba(96, 165, 250, 0.3),
0 2px 8px rgba(59, 130, 246, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
animation: pulse 2s infinite;
}
.hamburger.active span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; transform: translateX(-10px); }
.hamburger.active span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }
/* ============================================
MOBILE MENU — общий контейнер
============================================ */
@media (max-width: 1024px) {
.hamburger {
display: flex;
}
.menu {
position: fixed;
top: 0;
right: -100%;
width: min(320px, 100%);
height: 100dvh;
flex-direction: column;
gap: 0;
padding: 88px 0 2rem;
z-index: 999;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background: linear-gradient(
135deg,
rgba(15, 23, 42, 0.97) 0%,
rgba(30, 41, 59, 0.98) 100%
);
backdrop-filter: blur(20px);
border-left: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: -8px 0 25px rgba(0, 0, 0, 0.3);
transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.menu.show {
right: 0;
}
.menu > li {
width: 100%;
padding: 0 0.75rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.menu a {
width: 100%;
padding: 0.85rem 1rem;
font-size: 0.95rem;
border-radius: 0.5rem;
margin: 0.2rem 0;
justify-content: space-between;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.05) 0%,
rgba(255, 255, 255, 0.02) 100%
);
border: 1px solid rgba(255, 255, 255, 0.08);
transition: all 0.25s ease;
}
.menu a:hover {
background: linear-gradient(
135deg,
rgba(96, 165, 250, 0.15) 0%,
rgba(59, 130, 246, 0.22) 100%
);
border: 1px solid rgba(96, 165, 250, 0.3);
transform: translateX(5px);
animation: none;
text-shadow: none;
box-shadow: 0 4px 12px rgba(96, 165, 250, 0.1);
}
/* Подменю в мобильном меню */
.submenu {
position: static;
opacity: 1;
visibility: visible;
transform: none;
animation: none;
background: rgba(0, 0, 0, 0.25);
border-radius: 0.5rem;
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: none;
backdrop-filter: blur(10px);
max-height: 0;
overflow: hidden;
padding: 0 !important;
pointer-events: none;
margin: 0.4rem 0;
transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.submenu::before { display: none; }
.submenu::after { display: none; }
.submenu.active {
max-height: 600px;
padding: 0.5rem 0 !important;
pointer-events: auto;
}
.submenu li {
opacity: 1;
animation: none;
margin: 0.2rem 0;
padding: 0;
}
.submenu li::after { display: none; }
.submenu a {
padding: 0.75rem 1rem 0.75rem 2.25rem !important;
font-size: 0.9rem;
margin: 0 0.5rem;
border-radius: 0.5rem;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.04) 0%,
rgba(255, 255, 255, 0.02) 100%
);
border: 1px solid rgba(255, 255, 255, 0.05);
transition: all 0.2s ease;
}
.submenu a:hover {
background: linear-gradient(
135deg,
rgba(96, 165, 250, 0.12) 0%,
rgba(59, 130, 246, 0.18) 100%
);
border: 1px solid rgba(96, 165, 250, 0.25);
transform: translateX(4px);
box-shadow: none;
text-shadow: none;
animation: none;
}
}
/* ============================================
MOBILE 768px — полноэкранное меню
============================================ */
@media (max-width: 768px) {
header {
height: 60px;
padding: 0 1rem;
}
.menu {
width: 100%;
padding: 76px 0 2rem;
padding-bottom: env(safe-area-inset-bottom, 2rem);
background: #0f172a;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
right: auto;
transform: translateX(100%);
}
.menu.show {
transform: translateX(0);
box-shadow: -5px 0 20px rgba(0, 0, 0, 0.3);
}
.menu > li {
padding: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.menu a {
padding: 1rem 1.5rem;
border-radius: 0;
border: none;
border-bottom: none;
background: transparent;
margin: 0;
}
.menu a:hover {
background: rgba(96, 165, 250, 0.08);
transform: none;
border: none;
}
.submenu {
border-radius: 0;
margin: 0;
border: none;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.submenu a {
padding: 0.85rem 1rem 0.85rem 2.5rem !important;
border-radius: 0;
margin: 0;
border: none;
}
}
/* ============================================
MOBILE 480px
============================================ */
@media (max-width: 480px) {
header {
height: 54px;
padding: 0 0.75rem;
}
.logo a {
font-size: 1.5rem;
text-shadow:
1px 1px 0px #3498db,
2px 2px 0px rgba(59, 130, 246, 0.4);
}
.menu {
padding-top: 70px;
}
.hamburger {
width: 40px;
height: 40px;
}
.hamburger span {
width: 22px;
}
}
/* ============================================
MOBILE 360px
============================================ */
@media (max-width: 360px) {
header {
height: 48px;
padding: 0 0.6rem;
}
.logo a {
font-size: 1.3rem;
}
.hamburger {
width: 36px;
height: 36px;
padding: 8px;
}
.hamburger span {
width: 18px;
}
.menu {
padding-top: 64px;
}
}
/* ============================================
TOUCH-УСТРОЙСТВА — убираем hover
============================================ */
@media (hover: none) {
.menu a:hover,
.submenu a:hover {
transform: none !important;
animation: none !important;
text-shadow: none !important;
}
.domain-search-form:hover {
transform: none;
}
}
/* ============================================
ЧАСТЬ 3: HERO SECTION
============================================ */
/* ============================================
СЕКЦИЯ
============================================ */
.hero-section {
padding: 80px 0 100px;
background-color: #ffffff;
position: relative;
overflow: hidden;
}
/* ============================================
КОНТЕЙНЕР — двухколоночная сетка
============================================ */
.hero-container {
max-width: 1100px;
margin: 0 auto;
padding: 0 24px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
/* ============================================
КОНТЕНТ (левая колонка)
============================================ */
.hero-content {
animation: fadeIn 0.8s ease-out forwards;
}
.hero-title {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 800;
color: #2d3748;
margin-bottom: 1.25rem;
line-height: 1.2;
}
.hero-description {
font-size: 1rem;
color: #718096;
line-height: 1.6;
margin-bottom: 2rem;
}
/* ============================================
ФИЧИ
============================================ */
.hero-features {
display: flex;
flex-direction: column;
gap: 0.875rem;
margin-bottom: 2.5rem;
}
.hero-feature {
display: flex;
align-items: center;
gap: 0.875rem;
}
.feature-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
flex: 0 0 40px;
background-color: #ebf8ff;
border-radius: 8px;
color: #4299e1;
margin: 0;
}
.feature-text {
font-size: 1rem;
font-weight: 500;
color: #4a5568;
line-height: 1.5;
text-align: left;
}
/* ============================================
КНОПКИ
============================================ */
.hero-actions {
display: flex;
align-items: center;
gap: 1.5rem;
flex-wrap: wrap;
}
.hero-button {
display: inline-block;
background-color: #4299e1;
color: #ffffff;
padding: 12px 32px;
font-size: 1rem;
font-weight: 600;
line-height: 1.5;
border-radius: 8px;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 4px 6px rgba(66, 153, 225, 0.2);
white-space: nowrap;
}
.hero-button:hover {
background-color: #3182ce;
color: #ffffff;
transform: translateY(-3px);
box-shadow: 0 7px 14px rgba(66, 153, 225, 0.3);
}
.hero-link {
color: #4299e1;
font-size: 1rem;
font-weight: 600;
text-decoration: none;
display: flex;
align-items: center;
gap: 0.4rem;
transition: all 0.3s ease;
white-space: nowrap;
}
.hero-link:hover {
color: #3182ce;
}
.arrow {
display: inline-block;
transition: transform 0.3s ease;
}
.hero-link:hover .arrow {
transform: translateX(5px);
}
/* ============================================
ИЗОБРАЖЕНИЕ (правая колонка)
============================================ */
.hero-image {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.server-illustration {
display: flex;
justify-content: center;
width: 100%;
margin: 0 auto;
padding: 10px;
position: relative;
z-index: 2;
transition: all 0.3s ease;
}
.server-image {
max-width: 100%;
height: auto;
transform: scale(1.05);
transition: transform 0.3s ease;
}
/* ============================================
BLOB-ФИГУРЫ
============================================ */
.blob-shape {
position: absolute;
border-radius: 50%;
opacity: 0.1;
z-index: 1;
pointer-events: none;
}
.blob-1 {
width: 300px;
height: 300px;
background-color: #4299e1;
top: -50px;
right: -30px;
animation: float 6s ease-in-out infinite alternate;
}
.blob-2 {
width: 200px;
height: 200px;
background-color: #3182ce;
bottom: -30px;
left: 50px;
animation: float 8s 1s ease-in-out infinite alternate;
}
/* ============================================
АДАПТИВ — 992px (планшет, две колонки)
============================================ */
@media (max-width: 992px) {
.hero-section {
padding: 64px 0 80px;
}
.hero-container {
gap: 40px;
padding: 0 24px;
}
.hero-title {
font-size: clamp(1.5rem, 3.5vw, 2rem);
}
.feature-icon {
width: 36px;
height: 36px;
flex: 0 0 36px;
}
.server-illustration {
max-width: 340px;
justify-content: flex-end;
}
.server-image {
transform: scale(1);
}
.blob-1 {
width: 240px;
height: 240px;
opacity: 0.08;
}
.blob-2 {
width: 170px;
height: 170px;
opacity: 0.08;
}
}
/* ============================================
АДАПТИВ — 768px (одна колонка, центр)
============================================ */
@media (max-width: 768px) {
.hero-section {
padding: 56px 0 72px;
}
.hero-container {
grid-template-columns: 1fr;
gap: 32px;
text-align: center;
padding: 0 20px;
}
.hero-content {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
z-index: 2;
}
.hero-title {
font-size: clamp(1.5rem, 5vw, 1.875rem);
text-align: center;
}
.hero-description {
text-align: center;
}
/* Блок с фичами — выровнен по левому краю внутри центрированного блока */
.hero-features {
align-items: flex-start;
width: max-content;
max-width: 90%;
margin: 0 auto 2rem;
gap: 12px;
}
.hero-feature {
display: grid;
grid-template-columns: 32px 1fr;
align-items: center;
gap: 12px;
}
.feature-icon {
width: 32px;
height: 32px;
flex: 0 0 32px;
}
.feature-text {
text-align: left;
white-space: nowrap;
}
/* Кнопки — вертикально, на всю ширину */
.hero-actions {
flex-direction: column;
width: 100%;
align-items: center;
gap: 12px;
margin-top: 8px;
}
.hero-button {
width: 100%;
max-width: 280px;
text-align: center;
}
.hero-link {
width: 100%;
max-width: 280px;
justify-content: center;
padding: 8px 0;
}
/* Картинка скрывается на мобильных */
.server-illustration {
display: none;
}
/* Blob-фигуры остаются */
.blob-1 {
width: 200px;
height: 200px;
top: 5%;
right: -60px;
}
.blob-2 {
width: 160px;
height: 160px;
bottom: 10%;
left: -50px;
}
}
/* ============================================
АДАПТИВ — 480px
============================================ */
@media (max-width: 480px) {
.hero-section {
padding: 48px 0 64px;
}
.hero-container {
padding: 0 16px;
}
.hero-title {
font-size: clamp(1.35rem, 6vw, 1.6rem);
}
.hero-description {
font-size: 0.9375rem;
}
.hero-features {
gap: 10px;
margin-bottom: 1.5rem;
}
.hero-feature {
grid-template-columns: 28px 1fr;
gap: 10px;
}
.feature-icon {
width: 28px;
height: 28px;
flex: 0 0 28px;
}
.feature-text {
font-size: 0.9rem;
white-space: normal;
}
.blob-1 {
width: 160px;
height: 160px;
right: -40px;
}
.blob-2 {
width: 120px;
height: 120px;
left: -30px;
}
}
/* ============================================
АДАПТИВ — 360px
============================================ */
@media (max-width: 360px) {
.hero-section {
padding: 40px 0 56px;
}
.hero-container {
padding: 0 14px;
}
.hero-title {
font-size: 1.35rem;
margin-bottom: 1rem;
}
.hero-description {
font-size: 0.875rem;
margin-bottom: 1.25rem;
}
.hero-features {
gap: 8px;
margin-bottom: 1.25rem;
}
.hero-feature {
grid-template-columns: 24px 1fr;
gap: 8px;
}
.feature-icon {
width: 24px;
height: 24px;
flex: 0 0 24px;
}
.feature-icon svg {
width: 14px;
height: 14px;
}
.feature-text {
font-size: 0.85rem;
}
.hero-button {
padding: 10px 24px;
font-size: 0.9rem;
}
.hero-link {
font-size: 0.9rem;
}
.blob-1 {
width: 130px;
height: 130px;
}
.blob-2 {
width: 100px;
height: 100px;
}
}
/* ============================================
ЧАСТЬ 4: VDS PRICING + FEATURES
============================================ */
/* ============================================
СЕКЦИЯ
============================================ */
.vds-pricing-section {
padding: 80px 0;
background-color: #f9fafb;
}
/* ============================================
СЕТКА ТАРИФОВ
============================================ */
.vds-pricing-plans {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
max-width: 1100px;
margin: 0 auto 64px;
padding: 0 24px;
}
/* ============================================
КАРТОЧКА ТАРИФА
============================================ */
.vds-plan {
background-color: #ffffff;
border-radius: 12px;
border: 1px solid #e2e8f0;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
overflow: hidden;
display: flex;
flex-direction: column;
position: relative;
width: 100%;
transition: transform 0.3s ease, box-shadow 0.3s ease;
animation: fadeInUp 0.5s ease-out both;
}
.vds-plan:nth-child(1) { animation-delay: 0.1s; }
.vds-plan:nth-child(2) { animation-delay: 0.2s; }
.vds-plan:nth-child(3) { animation-delay: 0.3s; }
.vds-plan:hover {
transform: translateY(-8px);
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1);
}
/* Популярный тариф */
.vds-plan-popular {
border: 2px solid #4299e1;
box-shadow: 0 8px 25px rgba(66, 153, 225, 0.15);
z-index: 1;
}
.vds-plan-popular:hover {
transform: translateY(-12px);
box-shadow: 0 20px 40px rgba(66, 153, 225, 0.2);
}
/* Бейдж "Популярный" */
.vds-plan-badge {
position: absolute;
top: 0;
right: 0;
background-color: #4299e1;
color: #ffffff;
padding: 0.3rem 1.25rem;
font-size: 0.8rem;
font-weight: 600;
border-radius: 0 0 0 10px;
box-shadow: 0 4px 6px rgba(66, 153, 225, 0.3);
}
/* ============================================
ШАПКА КАРТОЧКИ
============================================ */
.vds-plan-header {
padding: 1.75rem;
text-align: center;
border-bottom: 1px solid #e2e8f0;
background: linear-gradient(to right, #f7fafc, #edf2f7);
flex-shrink: 0;
}
.vds-plan-title {
font-size: 1.25rem;
font-weight: 700;
color: #2d3748;
margin-bottom: 1.25rem;
line-height: 1.3;
}
.vds-plan-price {
display: flex;
justify-content: center;
align-items: baseline;
gap: 0.2rem;
flex-wrap: wrap;
line-height: 1.2;
}
.vds-plan-amount {
font-size: clamp(2rem, 4vw, 2.5rem);
font-weight: 800;
color: #2d3748;
line-height: 1;
}
.vds-plan-currency {
font-size: clamp(1.3rem, 2.5vw, 1.7rem);
font-weight: 700;
color: #2d3748;
}
.vds-plan-period {
font-size: clamp(0.85rem, 1.5vw, 1rem);
color: #718096;
margin-left: 0.2rem;
}
/* ============================================
ХАРАКТЕРИСТИКИ ТАРИФА
============================================ */
.vds-plan-features {
padding: 1.75rem;
flex-grow: 1;
}
.vds-plan-features ul {
list-style: none;
padding: 0;
margin: 0;
}
.vds-plan-features li {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid #edf2f7;
font-size: 0.9375rem;
}
.vds-plan-features li:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
/* Иконки характеристик */
.feature-icon {
width: 24px;
height: 24px;
color: #4299e1;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
flex-shrink: 0;
}
.cpu-icon { background-image: url('data:image/svg+xml;utf8,'); }
.ram-icon { background-image: url('data:image/svg+xml;utf8,'); }
.disk-icon { background-image: url('data:image/svg+xml;utf8,'); }
.bandwidth-icon { background-image: url('data:image/svg+xml;utf8,'); }
.ip-icon { background-image: url('data:image/svg+xml;utf8,'); }
.feature-name {
flex: 1;
font-weight: 500;
color: #4a5568;
font-size: 0.9375rem;
min-width: 0;
overflow-wrap: break-word;
}
.feature-value {
font-weight: 700;
color: #2d3748;
font-size: 0.875rem;
padding: 0.2rem 0.5rem;
background-color: rgba(66, 153, 225, 0.1);
border-radius: 4px;
white-space: nowrap;
flex-shrink: 0;
transition: background-color 0.3s ease;
}
.vds-plan:hover .feature-value {
background-color: rgba(66, 153, 225, 0.18);
}
/* ============================================
ФУТЕР КАРТОЧКИ
============================================ */
.vds-plan-footer {
padding: 1.75rem;
text-align: center;
background-color: #f7fafc;
border-top: 1px solid #e2e8f0;
flex-shrink: 0;
}
.vds-plan-button {
display: inline-block;
width: 100%;
max-width: 260px;
padding: 0.875rem 2rem;
background-color: #4299e1;
color: #ffffff;
border-radius: 50px;
font-size: 0.9375rem;
font-weight: 600;
text-decoration: none;
text-align: center;
border: none;
cursor: pointer;
box-sizing: border-box;
box-shadow: 0 4px 6px rgba(66, 153, 225, 0.3);
transition: all 0.3s ease;
}
.vds-plan-button:hover {
background-color: #3182ce;
color: #ffffff;
transform: translateY(-3px);
box-shadow: 0 8px 16px rgba(66, 153, 225, 0.4);
}
.vds-plan-button:active {
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(66, 153, 225, 0.3);
}
.vds-plan-button:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.3);
}
/* ============================================
VDS FEATURES — дополнительные преимущества
============================================ */
.vds-features {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
max-width: 1100px;
margin: 0 auto;
padding: 0 24px;
}
.vds-feature {
text-align: center;
padding: 2rem;
background-color: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.vds-feature:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}
.vds-feature-icon {
width: 60px;
height: 60px;
margin: 0 auto 1.25rem;
display: flex;
align-items: center;
justify-content: center;
background-color: #ebf8ff;
color: #4299e1;
border-radius: 50%;
font-size: 1.75rem;
transition: all 0.3s ease;
}
.vds-feature:hover .vds-feature-icon {
background-color: #bee3f8;
transform: scale(1.1);
}
.vds-feature-title {
font-size: 1.1rem;
font-weight: 600;
color: #2d3748;
margin-bottom: 0.75rem;
}
.vds-feature-text {
font-size: 0.9375rem;
color: #718096;
line-height: 1.6;
}
/* ============================================
АДАПТИВ — 1024px (2 колонки)
============================================ */
@media (max-width: 1024px) {
.vds-pricing-plans {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
max-width: 720px;
padding: 0 20px;
}
/* Третья карточка на всю ширину */
.vds-plan:nth-child(3) {
grid-column: 1 / -1;
max-width: 380px;
margin: 0 auto;
}
.vds-features {
grid-template-columns: repeat(2, 1fr);
padding: 0 20px;
}
/* Третий блок преимуществ */
.vds-feature:nth-child(3) {
grid-column: 1 / -1;
max-width: 400px;
margin: 0 auto;
}
}
/* ============================================
АДАПТИВ — 768px (1 колонка)
============================================ */
@media (max-width: 768px) {
.vds-pricing-section {
padding: 56px 0;
}
.vds-pricing-plans {
grid-template-columns: 1fr;
gap: 20px;
max-width: 480px;
padding: 0 16px;
margin-bottom: 48px;
}
/* Убираем смещение третьей карточки */
.vds-plan:nth-child(3) {
grid-column: auto;
max-width: 100%;
margin: 0;
}
/* Популярный — первым */
.vds-plan-popular {
order: -1;
}
.vds-plan:hover {
transform: translateY(-4px);
}
.vds-plan-popular:hover {
transform: translateY(-4px);
}
.vds-features {
grid-template-columns: 1fr;
padding: 0 16px;
gap: 16px;
}
.vds-feature:nth-child(3) {
grid-column: auto;
max-width: 100%;
margin: 0;
}
.vds-feature {
padding: 1.5rem;
}
}
/* ============================================
АДАПТИВ — 480px
============================================ */
@media (max-width: 480px) {
.vds-pricing-section {
padding: 48px 0;
}
.vds-pricing-plans {
padding: 0 12px;
gap: 16px;
margin-bottom: 40px;
}
.vds-plan-header {
padding: 1.5rem 1.25rem;
}
.vds-plan-title {
font-size: 1.125rem;
margin-bottom: 1rem;
}
.vds-plan-features {
padding: 1.5rem 1.25rem;
}
.vds-plan-features li {
font-size: 0.875rem;
gap: 0.6rem;
margin-bottom: 0.875rem;
padding-bottom: 0.875rem;
}
.feature-name { font-size: 0.875rem; }
.feature-value { font-size: 0.8125rem; }
.vds-plan-footer {
padding: 1.5rem 1.25rem;
}
.vds-plan-button {
padding: 0.875rem 1.75rem;
font-size: 0.9rem;
}
.vds-feature-icon {
width: 52px;
height: 52px;
font-size: 1.5rem;
}
.vds-feature-title { font-size: 1rem; }
.vds-feature-text { font-size: 0.875rem; }
}
/* ============================================
АДАПТИВ — 360px
============================================ */
@media (max-width: 360px) {
.vds-pricing-plans {
padding: 0 8px;
gap: 14px;
margin-bottom: 32px;
}
.vds-plan {
border-radius: 10px;
}
.vds-plan-popular {
transform: scale(1);
}
.vds-plan-header {
padding: 1.25rem 1rem;
}
.vds-plan-title {
font-size: 1rem;
margin-bottom: 0.875rem;
}
.vds-plan-amount { font-size: 2rem; }
.vds-plan-currency { font-size: 1.25rem; }
.vds-plan-period { font-size: 0.8rem; }
.vds-plan-features {
padding: 1.25rem 1rem;
}
.vds-plan-features li {
font-size: 0.8125rem;
margin-bottom: 0.75rem;
padding-bottom: 0.75rem;
gap: 0.5rem;
}
.feature-icon { width: 18px; height: 18px; }
.feature-name { font-size: 0.8rem; }
.feature-value { font-size: 0.75rem; padding: 0.15rem 0.4rem; }
.vds-plan-footer {
padding: 1.25rem 1rem;
}
.vds-plan-button {
padding: 0.75rem 1.5rem;
font-size: 0.875rem;
width: 100%;
border-radius: 30px;
}
.vds-plan-badge {
font-size: 0.7rem;
padding: 0.25rem 0.875rem;
}
.vds-features {
padding: 0 8px;
gap: 12px;
}
.vds-feature {
padding: 1.25rem 1rem;
border-radius: 10px;
}
.vds-feature-icon { width: 44px; height: 44px; font-size: 1.25rem; }
.vds-feature-title { font-size: 0.9375rem; margin-bottom: 0.5rem; }
.vds-feature-text { font-size: 0.8125rem; }
}
/* ============================================
TOUCH — отключаем hover
============================================ */
@media (hover: none) {
.vds-plan:hover,
.vds-plan-popular:hover {
transform: none;
}
.vds-plan-button:hover {
transform: none;
}
}
/* ============================================
PRINT
============================================ */
@media print {
.vds-pricing-plans {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.vds-plan {
page-break-inside: avoid;
box-shadow: none;
border: 1px solid #ddd;
flex: 1 0 45%;
}
.vds-plan-button {
background-color: transparent;
color: #4299e1;
border: 1px solid currentColor;
box-shadow: none;
}
.vds-feature-icon {
border: 1px solid #4299e1;
background-color: transparent;
}
.vds-features {
display: flex;
flex-wrap: wrap;
}
.vds-feature {
flex: 1 0 45%;
page-break-inside: avoid;
box-shadow: none;
border: 1px solid #ddd;
}
}
/* ============================================
POINTER: COARSE (touch — увеличиваем кнопки)
============================================ */
@media (pointer: coarse) {
.vds-plan-button {
min-height: 48px;
padding: 1rem 2rem;
}
}
/* ============================================
ЧАСТЬ 5: ADVANTAGES + FEATURES + OS + TABLES
============================================ */
/* ============================================
ADVANTAGES SECTION
============================================ */
.advantages {
padding: 80px 0;
background: linear-gradient(135deg, #ffffff 0%, #edf2f7 100%);
position: relative;
overflow: hidden;
}
/* Декоративные blob-круги */
.advantages::after {
content: '';
position: absolute;
width: 280px;
height: 280px;
background: radial-gradient(circle, rgba(66, 153, 225, 0.08) 0%, transparent 70%);
border-radius: 50%;
bottom: -140px;
right: -140px;
z-index: 1;
pointer-events: none;
}
/* ============================================
ADVANTAGE GRID
============================================ */
.advantage-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 32px;
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
position: relative;
z-index: 2;
}
/* ============================================
ADVANTAGE ITEM
============================================ */
.advantage-item {
background: #ffffff;
border-radius: 16px;
padding: 32px;
box-shadow: 0 8px 24px rgba(0, 32, 71, 0.06);
position: relative;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.advantage-item::before {
content: '';
position: absolute;
inset: -1px;
border: 2px solid rgba(52, 144, 220, 0.08);
border-radius: 16px;
z-index: 1;
pointer-events: none;
}
.advantage-item:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 32, 71, 0.1);
}
.advantage-item i {
font-size: 2.5rem;
color: #2c87f0;
margin-bottom: 20px;
display: block;
position: relative;
z-index: 2;
}
.advantage-item h3 {
font-size: 1.25rem;
font-weight: 700;
color: #1a365d;
margin-bottom: 12px;
position: relative;
z-index: 2;
}
.advantage-item p {
font-size: 0.9375rem;
color: #4a5568;
line-height: 1.6;
margin-bottom: 0;
position: relative;
z-index: 2;
}
/* ============================================
FEATURES SECTION
============================================ */
.features-section {
padding: 80px 0;
background-color: #f8fafc;
position: relative;
overflow: hidden;
}
.features-section::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
135deg,
rgba(66, 153, 225, 0.03) 0%,
rgba(49, 130, 206, 0.05) 100%
);
z-index: 0;
pointer-events: none;
}
.features-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
position: relative;
z-index: 1;
}
.features-heading {
text-align: center;
font-size: clamp(1.5rem, 3vw, 2.25rem);
font-weight: 700;
color: #2d3748;
margin-bottom: 56px;
position: relative;
}
.features-heading::after {
content: '';
position: absolute;
bottom: -14px;
left: 50%;
transform: translateX(-50%);
width: 72px;
height: 4px;
background: linear-gradient(90deg, #4299e1, #3182ce);
border-radius: 2px;
}
/* ============================================
FEATURES GRID
============================================ */
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 28px;
}
/* ============================================
FEATURE BOX
============================================ */
.feature-box {
background-color: #ffffff;
border-radius: 12px;
padding: 28px;
display: flex;
flex-direction: column;
align-items: flex-start;
position: relative;
overflow: hidden;
border: 1px solid rgba(226, 232, 240, 0.8);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
opacity: 0;
transform: translateY(24px);
transition: all 0.3s ease;
}
/* Анимированная полоса сверху */
.feature-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, #4299e1, #3182ce);
opacity: 0;
transition: opacity 0.3s ease;
}
.feature-box:hover {
transform: translateY(-5px);
box-shadow: 0 16px 36px rgba(49, 130, 206, 0.1);
}
.feature-box:hover::before {
opacity: 1;
}
/* Видимое состояние (добавляется через JS) */
.feature-box.animated {
animation: fadeInUp 0.6s ease forwards;
}
/* Задержки */
.feature-box:nth-child(1) { animation-delay: 0.05s; }
.feature-box:nth-child(2) { animation-delay: 0.1s; }
.feature-box:nth-child(3) { animation-delay: 0.15s; }
.feature-box:nth-child(4) { animation-delay: 0.2s; }
.feature-box:nth-child(5) { animation-delay: 0.25s; }
.feature-box:nth-child(6) { animation-delay: 0.3s; }
.feature-box:nth-child(7) { animation-delay: 0.35s; }
.feature-box:nth-child(8) { animation-delay: 0.4s; }
.feature-box:nth-child(9) { animation-delay: 0.45s; }
.feature-box:nth-child(10) { animation-delay: 0.5s; }
.feature-icon-wrapper {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
background: linear-gradient(135deg, #ebf8ff 0%, #bee3f8 100%);
border-radius: 12px;
margin-bottom: 20px;
color: #3182ce;
font-size: 1.375rem;
box-shadow: 0 4px 12px rgba(66, 153, 225, 0.15);
flex-shrink: 0;
}
.feature-title {
font-size: 1.125rem;
font-weight: 600;
color: #2d3748;
margin-bottom: 10px;
}
.feature-description {
font-size: 0.9375rem;
color: #718096;
line-height: 1.6;
margin: 0;
}
/* ============================================
ADDITIONAL / CONTROL PANELS / OS — общие секции
============================================ */
.additional-resources-section,
.control-panels-section,
.os-section {
padding: 72px 0;
background-color: #f8fafc;
}
.additional-resources-section:nth-child(even),
.control-panels-section:nth-child(even),
.os-section:nth-child(even) {
background-color: #ffffff;
}
/* ============================================
OS GRID
============================================ */
.os-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px;
margin-top: 40px;
}
.os-logo {
display: flex;
justify-content: center;
align-items: center;
background-color: #ffffff;
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
position: relative;
overflow: hidden;
opacity: 0;
animation: fadeInUp 0.5s ease forwards;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* Градиентная рамка при hover */
.os-logo::before {
content: '';
position: absolute;
inset: -2px;
background: linear-gradient(135deg, #4299e1, #7f9cf5);
border-radius: 12px;
z-index: -1;
opacity: 0;
transition: opacity 0.3s ease;
}
.os-logo:hover::before { opacity: 0.3; }
.os-logo:hover {
transform: translateY(-8px) scale(1.03);
box-shadow: 0 12px 28px rgba(66, 153, 225, 0.15);
}
.os-logo img {
max-width: 72px;
max-height: 72px;
object-fit: contain;
transition: transform 0.3s ease;
}
.os-logo:hover img {
transform: scale(1.1);
}
/* Задержки анимации */
.os-logo:nth-child(1) { animation-delay: 0.05s; }
.os-logo:nth-child(2) { animation-delay: 0.1s; }
.os-logo:nth-child(3) { animation-delay: 0.15s; }
.os-logo:nth-child(4) { animation-delay: 0.2s; }
.os-logo:nth-child(5) { animation-delay: 0.25s; }
.os-logo:nth-child(6) { animation-delay: 0.3s; }
.os-logo:nth-child(7) { animation-delay: 0.35s; }
.os-logo:nth-child(8) { animation-delay: 0.4s; }
.os-logo:nth-child(9) { animation-delay: 0.45s; }
.os-logo:nth-child(10) { animation-delay: 0.5s; }
/* ============================================
PANEL LOGO
============================================ */
.panel-logo-container {
display: flex;
align-items: center;
gap: 12px;
transition: all 0.3s ease;
}
.panel-logo {
width: 30px;
height: 30px;
object-fit: contain;
transition: transform 0.3s ease;
}
.resources-table tr:hover .panel-logo {
transform: scale(1.1);
}
.panels-table tr {
transition: all 0.3s ease;
}
.panels-table tr:hover {
background-color: rgba(66, 153, 225, 0.05);
}
/* ============================================
TABLES — базовые стили
============================================ */
.table-responsive {
overflow-x: auto;
border-radius: 10px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
margin-bottom: 24px;
background: #ffffff;
transition: box-shadow 0.3s ease;
animation: fadeIn 0.6s ease-out forwards;
}
.table-responsive:hover {
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}
.resources-table {
width: 100%;
border-collapse: collapse;
background-color: #ffffff;
border-radius: 10px;
overflow: hidden;
}
.resources-table thead {
background: linear-gradient(135deg, #4299e1, #7f9cf5);
color: #ffffff;
}
.resources-table th {
padding: 14px 20px;
font-size: 0.9375rem;
font-weight: 600;
text-align: left;
border: none;
vertical-align: middle;
white-space: nowrap;
}
.resources-table td {
padding: 14px 20px;
font-size: 0.9375rem;
border-bottom: 1px solid #e2e8f0;
color: #4a5568;
vertical-align: middle;
line-height: 1.5;
transition: background-color 0.2s ease;
}
.resources-table tbody tr:last-child td {
border-bottom: none;
}
.resources-table tbody tr:hover td {
background-color: rgba(66, 153, 225, 0.04);
}
/* ============================================
ВАРИАНТ 1 — Таблица оплаты (2 колонки)
============================================ */
.resources-table th:nth-child(2) {
text-align: center;
width: 140px;
min-width: 100px;
}
.resources-table td:nth-child(2) {
text-align: left;
padding-left: 40px;
width: 140px;
min-width: 100px;
font-weight: 500;
white-space: nowrap;
}
/* ============================================
ВАРИАНТ 2 — Вакансии (.table-vacancy)
============================================ */
.resources-table.table-vacancy th:nth-child(2),
.resources-table.table-vacancy td:nth-child(2) {
width: auto;
min-width: 150px;
white-space: normal;
text-align: left;
}
.resources-table.table-vacancy th:nth-child(2) {
text-align: center;
}
.resources-table.table-vacancy td:nth-child(2) {
white-space: nowrap;
}
.resources-table.table-vacancy td:first-child {
line-height: 1.6;
}
.resources-table.table-vacancy ul {
margin: 8px 0;
padding-left: 20px;
list-style: disc;
}
.resources-table.table-vacancy li {
margin-bottom: 4px;
}
/* ============================================
ВАРИАНТ 3 — Реквизиты (.table-details)
============================================ */
.resources-table.table-details th:nth-child(2),
.resources-table.table-details td:nth-child(2) {
width: 70%;
text-align: left;
white-space: normal;
word-break: break-word;
}
.resources-table.table-details td {
border-bottom: 1px solid #edf2f7;
padding: 12px 20px;
}
/* ============================================
ВАРИАНТ 4 — 3 колонки (.table-3col)
============================================ */
.resources-table.table-3col th:nth-child(1),
.resources-table.table-3col td:nth-child(1) {
width: 30%;
text-align: left;
white-space: nowrap;
}
.resources-table.table-3col th:nth-child(2),
.resources-table.table-3col td:nth-child(2) {
width: 40%;
text-align: left;
white-space: normal;
word-break: break-word;
}
.resources-table.table-3col th:nth-child(3),
.resources-table.table-3col td:nth-child(3) {
width: 30%;
text-align: center;
white-space: nowrap;
}
/* Ссылки в 3-й колонке */
.resources-table.table-3col td:nth-child(3) a {
display: inline-block;
padding: 6px 14px;
background: linear-gradient(135deg, #4299e1, #7f9cf5);
color: #ffffff;
border-radius: 6px;
font-size: 0.875rem;
font-weight: 500;
text-decoration: none;
transition: all 0.2s ease;
}
.resources-table.table-3col td:nth-child(3) a:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(66, 153, 225, 0.4);
}
/* Бейджи статусов */
.resources-table.table-3col .badge {
display: inline-block;
padding: 4px 12px;
border-radius: 20px;
font-size: 0.8125rem;
font-weight: 600;
}
.badge-success { background-color: #c6f6d5; color: #22543d; }
.badge-warning { background-color: #fefcbf; color: #744210; }
.badge-danger { background-color: #fed7d7; color: #822727; }
/* ============================================
АДАПТИВ ТАБЛИЦ — 768px
============================================ */
@media (max-width: 768px) {
.additional-resources-section,
.control-panels-section,
.os-section {
padding: 52px 0;
}
.resources-table th,
.resources-table td {
padding: 12px 16px;
font-size: 0.9rem;
}
/* Реквизиты — вертикальный вид */
.resources-table.table-details {
display: block;
}
.resources-table.table-details thead {
display: none;
}
.resources-table.table-details tbody,
.resources-table.table-details tr,
.resources-table.table-details td {
display: block;
width: 100% !important;
}
.resources-table.table-details td:first-child {
background-color: #f7fafc;
font-weight: 600;
border-bottom: none;
padding-bottom: 4px;
}
.resources-table.table-details td:nth-child(2) {
border-bottom: 1px solid #e2e8f0;
padding-top: 4px;
margin-bottom: 8px;
}
/* 3 колонки */
.resources-table.table-3col th,
.resources-table.table-3col td {
padding: 10px 12px;
font-size: 0.875rem;
}
.resources-table.vps-comparison-table {
min-width: 720px;
table-layout: fixed;
border: none;
-webkit-overflow-scrolling: touch;
}
.resources-table.vps-comparison-table th,
.resources-table.vps-comparison-table td {
text-align: left;
white-space: normal;
word-break: normal;
overflow-wrap: break-word;
}
.resources-table.vps-comparison-table th:first-child,
.resources-table.vps-comparison-table td:first-child {
width: 24%;
white-space: nowrap;
}
.resources-table.vps-comparison-table th:nth-child(2),
.resources-table.vps-comparison-table td:nth-child(2),
.resources-table.vps-comparison-table th:nth-child(3),
.resources-table.vps-comparison-table td:nth-child(3) {
width: 38%;
min-width: 0;
padding-left: 20px;
white-space: normal;
overflow-wrap: anywhere;
word-break: normal;
}
.about-content .resources-table.vps-comparison-table th {
background: transparent;
color: #ffffff;
}
/* OS GRID */
.os-grid {
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.os-logo img {
max-width: 56px;
max-height: 56px;
}
.os-logo {
padding: 16px;
}
/* Advantages */
.advantages {
padding: 56px 0;
}
.advantage-grid {
gap: 20px;
padding: 0 16px;
}
.advantage-item {
padding: 24px;
}
/* Features */
.features-section {
padding: 56px 0;
}
.features-container {
padding: 0 16px;
}
.features-heading {
font-size: clamp(1.375rem, 4vw, 1.75rem);
margin-bottom: 40px;
}
.feature-box {
padding: 22px 20px;
}
/* Panel logos */
.panel-logo-container {
gap: 8px;
}
}
/* ============================================
АДАПТИВ ТАБЛИЦ — 576px
============================================ */
@media (max-width: 576px) {
.os-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.os-logo {
padding: 14px;
}
.os-logo img {
max-width: 48px;
max-height: 48px;
}
.panel-logo-container {
flex-direction: column;
gap: 6px;
align-items: flex-start;
}
.resources-table th,
.resources-table td {
padding: 10px 12px;
font-size: 0.875rem;
}
}
/* ============================================
АДАПТИВ — 480px
============================================ */
@media (max-width: 480px) {
.advantages {
padding: 48px 0;
}
.advantage-grid {
padding: 0 14px;
gap: 16px;
}
.advantage-item {
padding: 20px;
border-radius: 12px;
}
.advantage-item i {
font-size: 2rem;
margin-bottom: 14px;
}
.advantage-item h3 {
font-size: 1.1rem;
margin-bottom: 8px;
}
.advantage-item p {
font-size: 0.875rem;
}
.features-section {
padding: 48px 0;
}
.features-grid {
gap: 16px;
}
.feature-box {
padding: 20px 18px;
}
.feature-icon-wrapper {
width: 48px;
height: 48px;
font-size: 1.25rem;
margin-bottom: 16px;
}
.feature-title {
font-size: 1rem;
}
.feature-description {
font-size: 0.875rem;
}
}
/* ============================================
TOUCH — отключаем hover
============================================ */
@media (hover: none) {
.os-logo:hover,
.advantage-item:hover,
.feature-box:hover {
transform: none !important;
box-shadow: inherit;
}
.os-logo:hover img {
transform: none;
}
}
/* ============================================
POINTER: COARSE
============================================ */
@media (pointer: coarse) {
.os-logo {
padding: 20px;
}
.resources-table td,
.resources-table th {
padding: 14px 16px;
}
}
/* ============================================
ЧАСТЬ 6: FAQ + DOMAIN + TARIFF LIMITS + LOCATIONS
============================================ */
/* ============================================
FAQ SECTION
============================================ */
.faq-section {
padding: 80px 0;
background-color: #ffffff;
}
.faq-container {
max-width: 900px;
margin: 0 auto;
padding: 0 24px;
}
.faq-grid {
margin-top: 48px;
}
/* ============================================
FAQ ACCORDION
============================================ */
.faq-item {
margin-bottom: 16px;
border: 1px solid #e2e8f0;
border-radius: 10px;
overflow: hidden;
transition: box-shadow 0.3s ease;
}
.faq-item:hover {
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}
.faq-question {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 24px;
background-color: #f8fafc;
cursor: pointer;
gap: 16px;
transition: background-color 0.2s ease;
}
.faq-question:hover {
background-color: #edf2f7;
}
.faq-question h3 {
margin: 0;
font-size: 1.0625rem;
font-weight: 600;
color: #2d3748;
line-height: 1.4;
flex: 1;
}
.faq-icon {
font-size: 1.375rem;
color: #4299e1;
flex-shrink: 0;
transition: transform 0.3s ease;
line-height: 1;
}
.faq-item.active .faq-icon {
transform: rotate(45deg);
}
.faq-answer {
padding: 0 24px;
max-height: 0;
overflow: hidden;
transition: all 0.3s ease;
background-color: #ffffff;
}
.faq-item.active .faq-answer {
padding: 20px 24px;
max-height: 600px;
}
.faq-answer p {
margin: 0;
color: #718096;
font-size: 0.9375rem;
line-height: 1.6;
}
/* ============================================
FAQ LIST (страница FAQ)
============================================ */
.faq-list {
list-style: none;
counter-reset: faq-counter;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.faq-list li {
counter-increment: faq-counter;
}
.faq-list li a {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 20px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 12px;
text-decoration: none;
color: #1e293b;
font-size: 0.9375rem;
font-weight: 500;
line-height: 1.4;
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.05);
position: relative;
overflow: hidden;
transition: all 0.25s ease;
}
/* Левая синяя полоса */
.faq-list li a::before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 4px;
background: #3b82f6;
border-radius: 4px 0 0 4px;
opacity: 0;
transition: opacity 0.25s ease;
}
.faq-list li a:hover::before {
opacity: 1;
}
/* Номер */
.faq-list li a::after {
content: counter(faq-counter, decimal-leading-zero);
position: absolute;
right: 48px;
font-size: 0.7rem;
font-weight: 700;
color: #cbd5e1;
letter-spacing: 0.5px;
transition: color 0.25s ease;
}
.faq-list li a:hover {
border-color: #bfdbfe;
background: #f0f7ff;
box-shadow: 0 6px 20px rgba(59, 130, 246, 0.1);
transform: translateX(5px);
color: #2563eb;
}
.faq-list li a:hover::after {
color: #93c5fd;
}
/* Иконка */
.faq-list .faq-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
min-width: 40px;
background: #eff6ff;
border-radius: 10px;
color: #3b82f6;
font-size: inherit;
transition: all 0.25s ease;
transform: none;
}
.faq-list li a:hover .faq-icon {
background: #3b82f6;
color: #ffffff;
transform: scale(1.08);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
/* Стрелка */
.faq-arrow {
margin-left: auto;
font-size: 1rem;
color: #94a3b8;
flex-shrink: 0;
transition: all 0.25s ease;
}
.faq-list li a:hover .faq-arrow {
color: #3b82f6;
transform: translateX(4px);
}
.faq-list li a span {
flex: 1;
text-align: left;
line-height: 1.4;
}
/* ============================================
DOMAIN SECTION
============================================ */
.domain-section {
padding: 80px 0 100px;
background-color: #f8fafc;
position: relative;
overflow: hidden;
}
.domain-container {
max-width: 1100px;
margin: 0 auto;
padding: 0 24px;
}
.domain-title {
text-align: center;
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 800;
color: #2d3748;
margin-bottom: 1.25rem;
line-height: 1.2;
}
.domain-description {
text-align: center;
font-size: 1rem;
color: #718096;
line-height: 1.6;
margin-bottom: 2.5rem;
max-width: 780px;
margin-left: auto;
margin-right: auto;
}
/* ============================================
DOMAIN SEARCH
============================================ */
.domain-search-form {
max-width: 680px;
margin: 0 auto 48px;
display: flex;
background-color: #ffffff;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
overflow: hidden;
border: 1px solid #e2e8f0;
transition: all 0.3s ease;
}
.domain-search-form:hover,
.domain-search-form:focus-within {
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
transform: translateY(-3px);
border-color: #bee3f8;
}
.domain-search-input {
flex: 1;
padding: 16px 24px;
border: none;
font-size: 1rem;
color: #4a5568;
outline: none;
background: transparent;
min-width: 0;
height: 56px;
box-sizing: border-box;
}
.domain-search-input::placeholder {
color: #a0aec0;
font-size: 0.9375rem;
}
.domain-search-button {
background-color: #4299e1;
color: #ffffff;
border: none;
padding: 0 28px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
height: 56px;
white-space: nowrap;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: background-color 0.2s ease;
flex-shrink: 0;
}
.domain-search-button:hover {
background-color: #3182ce;
}
.domain-search-button:active {
transform: scale(0.98);
}
/* ============================================
DOMAIN TABLES
============================================ */
.domain-tables-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
margin-bottom: 56px;
}
.domain-table-wrapper {
background-color: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
overflow: hidden;
transition: all 0.3s ease;
}
.domain-table-wrapper:hover {
box-shadow: 0 10px 32px rgba(0, 0, 0, 0.1);
transform: translateY(-4px);
}
.domain-table-title {
padding: 18px 20px;
background-color: #4299e1;
color: #ffffff;
font-size: 1.125rem;
font-weight: 600;
text-align: center;
}
.domain-table {
width: 100%;
border-collapse: collapse;
}
.domain-table th {
background-color: #f7fafc;
color: #4a5568;
padding: 14px 16px;
text-align: left;
font-size: 0.9375rem;
font-weight: 600;
border-bottom: 1px solid #e2e8f0;
}
.domain-table td {
padding: 14px 16px;
border-bottom: 1px solid #e2e8f0;
color: #4a5568;
font-size: 0.9375rem;
line-height: 1.5;
}
.domain-table tr:last-child td {
border-bottom: none;
}
.domain-table tr:hover td {
background-color: rgba(66, 153, 225, 0.04);
}
.domain-price {
font-weight: 700;
color: #2d3748;
}
/* ============================================
DOMAIN FEATURES
============================================ */
.domain-features {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 48px;
}
.domain-feature {
background-color: #ffffff;
border-radius: 12px;
padding: 28px 24px;
text-align: center;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
border: 1px solid #e2e8f0;
transition: all 0.3s ease;
}
.domain-feature:hover {
transform: translateY(-8px);
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1);
}
.domain-feature-icon {
width: 68px;
height: 68px;
background-color: #ebf8ff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
color: #4299e1;
font-size: 1.625rem;
transition: all 0.3s ease;
}
.domain-feature:hover .domain-feature-icon {
background-color: #bee3f8;
transform: scale(1.1);
}
.domain-feature-title {
font-size: 1.125rem;
font-weight: 600;
color: #2d3748;
margin-bottom: 12px;
}
.domain-feature-text {
font-size: 0.9375rem;
color: #718096;
line-height: 1.6;
}
/* ============================================
DOMAIN CTA
============================================ */
.domain-cta {
margin-top: 48px;
width: 100%;
text-align: center;
padding: 32px 24px;
background-color: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
box-sizing: border-box;
}
.domain-cta-title {
font-size: 1.375rem;
font-weight: 700;
color: #2d3748;
margin-bottom: 16px;
}
.domain-cta-text {
font-size: 0.9375rem;
color: #718096;
line-height: 1.6;
margin-bottom: 28px;
max-width: 680px;
margin-left: auto;
margin-right: auto;
}
.domain-cta-button {
display: inline-block;
background-color: #4299e1;
color: #ffffff;
padding: 12px 32px;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
}
.domain-cta-button:hover {
background-color: #3182ce;
color: #ffffff;
transform: translateY(-3px);
box-shadow: 0 8px 16px rgba(66, 153, 225, 0.3);
}
/* ============================================
WHOIS WRAPPER
============================================ */
.whois-wrapper {
max-width: 640px;
margin: 0 auto;
padding: 0 20px;
width: 100%;
box-sizing: border-box;
}
.whois-result-container {
margin-top: 24px;
width: 100%;
animation: slideUp 0.4s ease-out;
}
.whois-result-container h2 {
text-align: center;
margin: 0 0 16px;
font-size: 1.25rem;
font-weight: 600;
color: #2d3748;
}
.whois-result-box {
background: #ffffff;
border-radius: 12px;
padding: 24px;
border: 1px solid #e2e8f0;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
overflow-x: auto;
}
.whois-result-box pre {
margin: 0;
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
font-size: 0.8125rem;
line-height: 1.7;
color: #4a5568;
white-space: pre;
overflow-wrap: break-word;
word-wrap: break-word;
}
.whois-result-box pre b {
color: #2d3748;
font-weight: 600;
display: block;
margin-bottom: 12px;
font-size: 0.875rem;
}
/* ============================================
TARIFF LIMITS
============================================ */
.tariff-limits {
padding: 80px 0;
background-color: #f8fafc;
}
.tl-title {
font-size: clamp(1.5rem, 3vw, 2.125rem);
font-weight: 700;
text-align: center;
margin-bottom: 48px;
color: #2d3748;
line-height: 1.3;
}
.tl-title .tl-highlight {
color: #4299e1;
}
.tl-content {
display: flex;
justify-content: center;
}
.tl-card {
background-color: #ffffff;
border-radius: 12px;
box-shadow:
0 10px 15px -3px rgba(0, 0, 0, 0.08),
0 4px 6px -2px rgba(0, 0, 0, 0.04);
padding: 32px;
width: 100%;
max-width: 800px;
transition: box-shadow 0.3s ease;
}
.tl-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 1px solid #e2e8f0;
}
.tl-icon {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background-color: #ebf8ff;
border-radius: 50%;
color: #3182ce;
flex-shrink: 0;
}
.tl-icon svg {
width: 24px;
height: 24px;
}
.tl-heading {
font-size: 1.25rem;
font-weight: 600;
color: #2d3748;
margin: 0;
}
.tl-list {
list-style: none;
padding: 0;
margin: 0 0 32px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 14px;
}
.tl-item {
position: relative;
padding-left: 28px;
color: #4a5568;
font-size: 0.9375rem;
line-height: 1.5;
}
.tl-item::before {
content: '';
position: absolute;
left: 0;
top: 5px;
width: 18px;
height: 18px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e53e3e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='15' y1='9' x2='9' y2='15'%3E%3C/line%3E%3Cline x1='9' y1='9' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
}
.tl-footer {
display: flex;
justify-content: center;
}
.tl-button {
display: inline-block;
padding: 12px 28px;
font-size: 1rem;
font-weight: 600;
text-align: center;
text-decoration: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
}
.tl-button-primary {
background-color: #4299e1;
color: #ffffff;
border: none;
}
.tl-button-primary:hover {
background-color: #3182ce;
color: #ffffff;
transform: translateY(-2px);
box-shadow:
0 10px 15px -3px rgba(66, 153, 225, 0.3),
0 4px 6px -2px rgba(66, 153, 225, 0.2);
}
/* ============================================
VDS SERVER LOCATIONS
============================================ */
.vds-server-locations {
padding: 64px 0;
background-color: #f9fafb;
}
.vds-locations-title {
text-align: center;
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 700;
color: #2d3748;
margin-bottom: 12px;
line-height: 1.3;
}
.vds-locations-description {
text-align: center;
max-width: 780px;
margin: 0 auto 32px;
color: #718096;
font-size: 1rem;
line-height: 1.6;
}
.vds-flags-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 20px;
margin-top: 40px;
padding: 0 24px;
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}
.vds-flag-box {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
transition: transform 0.3s ease;
}
.vds-flag-box:hover {
transform: translateY(-5px);
}
.vds-flag-wrapper {
width: 96px;
height: 58px;
overflow: hidden;
border-radius: 6px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.vds-flag-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.vds-flag-country {
font-size: 0.875rem;
font-weight: 500;
color: #4a5568;
text-align: center;
line-height: 1.3;
}
/* VDS Locations блок (старый) */
.vds-locations {
max-width: 800px;
margin: 2rem auto;
padding: 1.25rem;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
text-align: center;
}
.vds-locations h2 {
text-align: center;
margin-bottom: 1rem;
color: #3498db;
font-size: 1.75rem;
font-weight: 700;
}
.vds-locations .locations-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 20px;
}
.vds-locations .location-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.vds-locations .location-item img {
max-width: 48px;
height: auto;
}
.vds-locations .location-item p {
margin: 0;
font-size: 0.9375rem;
color: #4a5568;
}
/* ============================================
АДАПТИВ — 992px
============================================ */
@media (max-width: 992px) {
.domain-tables-container {
grid-template-columns: 1fr;
gap: 20px;
}
.domain-features {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
}
/* ============================================
АДАПТИВ — 768px
============================================ */
@media (max-width: 768px) {
/* FAQ */
.faq-section {
padding: 56px 0;
}
.faq-container {
padding: 0 16px;
}
.faq-question {
padding: 16px 20px;
}
.faq-question h3 {
font-size: 1rem;
}
.faq-item.active .faq-answer {
padding: 16px 20px;
}
/* Domain */
.domain-section {
padding: 56px 0 72px;
}
.domain-container {
padding: 0 16px;
}
/* Форма поиска домена — строка на всех разрешениях */
.domain-search-form {
flex-direction: row;
align-items: stretch;
border-radius: 14px;
overflow: hidden;
border: 1.5px solid #e2e8f0;
box-shadow: 0 4px 18px rgba(66, 153, 225, 0.10);
transition: border-color 0.25s ease, box-shadow 0.25s ease;
background: #fff;
}
.domain-search-form:hover,
.domain-search-form:focus-within {
transform: none;
border-color: #4299e1;
box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.15), 0 4px 18px rgba(66, 153, 225, 0.12);
}
.domain-search-input {
flex: 1;
min-width: 0;
height: 52px;
padding: 0 12px 0 16px;
font-size: 16px;
text-align: left;
color: #2d3748;
background: transparent;
border: none;
box-sizing: border-box;
-webkit-appearance: none;
appearance: none;
border-radius: 0;
}
.domain-search-input::placeholder {
color: #a0aec0;
font-size: 0.875rem;
}
.domain-search-button {
width: auto;
height: 52px;
padding: 0 18px;
border-radius: 0;
font-size: 0.9rem;
font-weight: 700;
white-space: nowrap;
flex-shrink: 0;
background: linear-gradient(90deg, #3b82f6 0%, #4299e1 100%);
-webkit-tap-highlight-color: transparent;
transition: filter 0.2s ease;
}
.domain-search-button:active {
filter: brightness(0.92);
transform: none;
}
.domain-features {
grid-template-columns: 1fr;
gap: 16px;
}
.domain-cta {
padding: 24px 20px;
}
/* Whois */
.whois-wrapper {
padding: 0 16px;
}
.whois-result-box {
padding: 20px;
}
/* Tariff Limits */
.tariff-limits {
padding: 56px 0;
}
.tl-card {
padding: 24px 20px;
}
.tl-list {
grid-template-columns: 1fr;
gap: 12px;
}
.tl-heading {
font-size: 1.125rem;
}
/* Locations */
.vds-server-locations {
padding: 48px 0;
}
.vds-flags-container {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 16px;
padding: 0 16px;
}
.vds-flag-wrapper {
width: 80px;
height: 48px;
}
.article-note {
margin-top: 32px;
overflow: hidden;
border: 1px solid #e2e8f0;
border-radius: 12px;
background-color: #ffffff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.article-note-header {
padding: 18px 24px;
background-color: #f7fafc;
border-bottom: 1px solid #edf2f7;
}
.article-note-header h3 {
margin: 0;
color: #2d3748;
font-size: 1.0625rem;
font-weight: 700;
}
.article-note-body {
padding: 18px 24px 20px;
}
.article-note-body p {
margin: 0;
color: #718096;
line-height: 1.6;
}
/* FAQ List */
.faq-list li a {
padding: 14px 16px;
gap: 12px;
}
.faq-list .faq-icon {
width: 36px;
height: 36px;
min-width: 36px;
}
.faq-list li a::after {
display: none;
}
}
/* ============================================
АДАПТИВ — 480px
============================================ */
@media (max-width: 480px) {
/* FAQ */
.faq-section {
padding: 48px 0;
}
.faq-question h3 {
font-size: 0.9375rem;
}
/* Domain */
.domain-section {
padding: 48px 0 64px;
}
.domain-title {
font-size: clamp(1.5rem, 6vw, 1.875rem);
}
.domain-description {
font-size: 0.9375rem;
}
.domain-table th,
.domain-table td {
padding: 10px 12px;
font-size: 0.875rem;
}
.domain-feature {
padding: 22px 18px;
}
.domain-feature-icon {
width: 60px;
height: 60px;
font-size: 1.5rem;
}
/* Tariff Limits */
.tariff-limits {
padding: 40px 0;
}
.tl-button {
width: 100%;
text-align: center;
}
/* Whois */
.whois-wrapper {
padding: 0 12px;
}
.whois-result-box {
padding: 16px;
border-radius: 8px;
}
.whois-result-box pre {
font-size: 0.75rem;
}
/* Locations */
.vds-flags-container {
grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
gap: 12px;
padding: 0 12px;
}
.vds-flag-wrapper {
width: 72px;
height: 44px;
}
.vds-flag-country {
font-size: 0.8125rem;
}
.vds-locations .location-item img {
max-width: 40px;
}
}
/* ============================================
АДАПТИВ — 360px
============================================ */
@media (max-width: 360px) {
.domain-section {
padding: 40px 0 56px;
}
.domain-container {
padding: 0 12px;
}
.whois-wrapper {
padding: 0 10px;
}
.whois-result-box {
padding: 12px;
}
.domain-search-input {
font-size: 16px; /* предотвращаем zoom на iOS */
}
.tariff-limits {
padding: 36px 0;
}
.tl-card {
padding: 20px 16px;
}
}
/* ============================================
ЧАСТЬ 7: FOOTER
============================================ */
/* ============================================
FOOTER — базовые стили
============================================ */
footer {
background: #0f172a;
color: #cbd5e1;
padding: 4rem 1.5rem 0;
position: relative;
z-index: 100;
border-top: 1px solid rgba(255, 255, 255, 0.05);
box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1);
}
/* ============================================
FOOTER CONTENT — сетка колонок
============================================ */
.footer-content {
max-width: 1440px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2.5rem;
padding-bottom: 3rem;
align-items: start;
}
/* ============================================
FOOTER SECTION
============================================ */
.footer-section {
position: relative;
padding: 1rem;
min-width: 0;
}
/* Вертикальный разделитель между колонками */
.footer-section:not(:last-child)::after {
content: '';
position: absolute;
right: -1.25rem;
top: 15%;
height: 70%;
width: 1px;
background: rgba(255, 255, 255, 0.08);
}
/* ============================================
FOOTER ЗАГОЛОВКИ
============================================ */
.footer-section h3 {
color: #ffffff;
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 1.5rem;
padding-bottom: 0.75rem;
position: relative;
line-height: 1.3;
}
.footer-section h3::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 36px;
height: 2px;
background: #60a5fa;
border-radius: 2px;
}
/* ============================================
FOOTER LINKS
============================================ */
.footer-section ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.footer-section li {
line-height: 1.5;
transition: transform 0.3s ease;
}
.footer-section li:hover {
transform: translateX(5px);
}
.footer-section a {
color: #cbd5e1;
text-decoration: none;
font-size: 0.9375rem;
display: flex;
align-items: center;
gap: 0.6rem;
word-break: break-word;
transition: color 0.3s ease;
line-height: 1.5;
}
/* Стрелка перед ссылкой */
.footer-section a::before {
content: '\203A';
color: #60a5fa;
font-weight: 700;
font-size: 1rem;
flex-shrink: 0;
transition: transform 0.3s ease;
line-height: 1;
}
.footer-section a:hover {
color: #60a5fa;
text-shadow: 0 0 8px rgba(96, 165, 250, 0.2);
}
.footer-section a:hover::before {
transform: translateX(3px);
}
/* ============================================
FOOTER BOTTOM
============================================ */
.footer-bottom {
background: #0f172a;
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding: 2rem 1.5rem;
margin-top: 0;
}
.footer-bottom-content {
max-width: 1440px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
text-align: center;
}
/* ============================================
COPYRIGHT
============================================ */
.footer-copyright {
color: #94a3b8;
font-size: 0.9rem;
line-height: 1.6;
}
.footer-copyright a {
color: #60a5fa;
text-decoration: none;
position: relative;
padding: 0 0.15rem;
transition: color 0.3s ease;
}
.footer-copyright a::before {
display: none; /* убираем стрелку у ссылок в копирайте */
}
.footer-copyright a::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 1px;
background: #3b82f6;
transform: scaleX(0);
transition: transform 0.3s ease;
}
.footer-copyright a:hover {
color: #3b82f6;
text-shadow: none;
}
.footer-copyright a:hover::after {
transform: scaleX(1);
}
/* ============================================
DIVIDER
============================================ */
.footer-divider {
display: inline-block;
width: 1px;
height: 1em;
background: rgba(255, 255, 255, 0.2);
margin: 0 0.875rem;
vertical-align: middle;
}
/* ============================================
LEGAL LINKS
============================================ */
.footer-legal {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.25rem;
}
.footer-legal a {
color: #94a3b8;
text-decoration: none;
font-size: 0.875rem;
white-space: nowrap;
position: relative;
transition: color 0.3s ease;
}
/* Убираем стрелку у legal ссылок */
.footer-legal a::before {
display: none;
}
.footer-legal a::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 1px;
background: #60a5fa;
transform: scaleX(0);
transition: transform 0.3s ease;
}
.footer-legal a:hover {
color: #60a5fa;
text-shadow: none;
}
.footer-legal a:hover::after {
transform: scaleX(1);
}
/* ============================================
PAYMENT LOGO
============================================ */
.payment-logo {
width: 44px;
height: 44px;
object-fit: contain;
border-radius: 8px;
vertical-align: middle;
margin-right: 10px;
border: 1px solid #e2e8f0;
padding: 4px;
background: #ffffff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
/* ============================================
АДАПТИВ — 1024px (планшет, 3 колонки компактно)
============================================ */
@media (max-width: 1024px) and (min-width: 769px) {
.footer-content {
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
padding: 2.5rem 1.25rem 2rem;
}
.footer-section {
padding: 0.5rem;
}
.footer-section::after {
right: -0.75rem;
}
.footer-section h3 {
font-size: 1.1rem;
}
}
/* ============================================
АДАПТИВ — 768px (2 колонки, газетная сетка)
============================================ */
@media (max-width: 768px) {
footer {
padding: 2.5rem 1rem 0;
}
.footer-content {
max-width: 100%;
grid-template-columns: 1.6fr 1fr;
grid-template-rows: auto auto;
gap: 1.5rem 1.25rem;
align-items: start;
padding-bottom: 2rem;
}
/* Убираем разделители */
.footer-section::after {
display: none !important;
}
/* Услуги — левая колонка на 2 ряда */
.footer-section:nth-child(1) {
grid-column: 1;
grid-row: 1 / span 2;
}
/* Клиентам — правая верхняя */
.footer-section:nth-child(2) {
grid-column: 2;
grid-row: 1;
align-self: start;
}
/* О нас — правая нижняя */
.footer-section:nth-child(3) {
grid-column: 2;
grid-row: 2;
align-self: start;
}
.footer-section h3 {
font-size: 1.05rem;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
}
.footer-section h3::after {
width: 28px;
}
.footer-section a {
font-size: 0.875rem;
gap: 0.4rem;
}
.footer-section ul {
gap: 0.5rem;
}
.footer-bottom {
margin-top: 0;
padding: 1.5rem 1rem;
}
.footer-legal {
gap: 1rem;
}
.footer-copyright {
font-size: 0.875rem;
}
}
/* ============================================
АДАПТИВ — 640px (2 колонки, компактнее)
============================================ */
@media (max-width: 640px) {
.footer-content {
gap: 1rem 0.75rem;
padding: 2rem 0.75rem 1.5rem;
}
.footer-section h3 {
font-size: 0.9375rem;
letter-spacing: -0.01em;
}
.footer-section a {
font-size: 0.8125rem;
line-height: 1.4;
}
.footer-section a::before {
font-size: 0.875em;
}
}
/* ============================================
АДАПТИВ — 480px (2 колонки, максимум компактности)
============================================ */
@media (max-width: 480px) {
.footer-bottom-content {
gap: 0.875rem;
}
.footer-copyright {
font-size: 0.75rem;
line-height: 1.8;
text-align: center;
}
.footer-copyright__brand,
.footer-copyright__rights {
display: block;
}
.footer-divider {
display: none;
}
.footer-legal {
flex-direction: column;
align-items: center;
gap: 0.55rem;
}
.footer-legal a {
font-size: 0.75rem;
white-space: normal;
text-align: center;
line-height: 1.4;
}
.payment-logo {
width: 36px;
height: 36px;
margin-right: 8px;
}
}
@media (max-width: 340px) {
footer {
min-width: 0;
overflow-x: hidden;
}
.footer-content {
grid-template-columns: 1fr;
gap: 1.25rem;
padding: 1.25rem 0.75rem;
}
.footer-section:not(:last-child)::after {
display: none;
}
.footer-section h3 {
font-size: 0.875rem;
}
.footer-section a {
font-size: 0.8rem;
}
.footer-bottom {
padding: 0.875rem 0.75rem;
}
.footer-legal {
gap: 0.5rem;
}
.footer-legal a {
font-size: 0.75rem;
}
.footer-copyright {
font-size: 0.75rem;
}
}
/* ============================================
ЧАСТЬ 8: PARTNER PAGE + WIKI + MODAL
============================================ */
/* ============================================
PARTNER PAGE — обёртка
============================================ */
.partner-page {
position: relative;
padding: 56px 20px 80px;
background: #f4f7fb;
overflow: hidden;
color: #1f2a44;
}
.partner-page__container {
position: relative;
z-index: 2;
width: 100%;
max-width: 980px;
margin: 0 auto;
}
/* Декоративные blob */
.partner-page__blob {
position: absolute;
border-radius: 50%;
background: #dbe7f3;
opacity: 0.75;
z-index: 1;
pointer-events: none;
}
.partner-page__blob--1 {
width: 200px;
height: 200px;
top: 0;
right: -60px;
}
.partner-page__blob--2 {
width: 110px;
height: 110px;
left: -30px;
bottom: 80px;
}
/* ============================================
PARTNER PAGE — заголовки
============================================ */
.partner-page__header {
text-align: center;
margin-bottom: 36px;
}
.partner-page__title {
margin: 0 0 10px;
font-size: clamp(1.6rem, 4vw, 2.2rem);
font-weight: 800;
line-height: 1.2;
color: #1f2a44;
}
.partner-page__subtitle {
margin: 0;
color: #607089;
font-size: 0.9375rem;
line-height: 1.7;
}
.partner-page__section-title {
margin: 40px 0 14px;
font-size: clamp(1.25rem, 3vw, 1.75rem);
line-height: 1.25;
font-weight: 800;
color: #1f2a44;
}
.partner-page__subsection-title {
margin: 24px 0 10px;
font-size: clamp(1rem, 2.2vw, 1.2rem);
line-height: 1.35;
font-weight: 700;
color: #24324a;
}
/* ============================================
PARTNER PAGE — текст
============================================ */
.partner-page__text {
color: #5d6c84;
font-size: 0.9375rem;
line-height: 1.7;
margin: 0 0 14px;
}
.partner-page__text strong {
color: #24324a;
}
.partner-page strong {
color: #24324a;
}
.partner-page__formula {
display: inline-block;
margin-top: 4px;
font-weight: 700;
color: #24324a;
}
/* ============================================
PARTNER PAGE — изображения
============================================ */
.partner-page__image,
.partner-page__img {
display: block;
width: 100%;
max-width: 760px;
height: auto;
margin: 18px auto;
border-radius: 12px;
border: 1px solid #d9e3ef;
background: #ffffff;
box-shadow: 0 4px 14px rgba(80, 120, 180, 0.06);
object-fit: contain;
}
.partner-page__step-image .partner-page__img {
max-height: 340px;
}
.partner-page__two-col-right .partner-page__img {
max-height: 340px;
}
.partner-page__muted {
margin-top: 8px;
color: #7d8aa2;
font-size: 0.8125rem;
line-height: 1.6;
}
.partner-page__muted--center {
text-align: center;
}
/* ============================================
PARTNER PAGE — intro блок
============================================ */
.pp-intro {
font-size: clamp(0.875rem, 2vw, 1rem);
color: #4a5568;
line-height: 1.7;
margin: 0 0 40px;
padding: 20px 24px;
background: #ffffff;
border-left: 4px solid #3182ce;
border-radius: 0 10px 10px 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
/* ============================================
PARTNER PAGE — шаги
============================================ */
.partner-page__steps {
display: grid;
gap: 14px;
margin: 20px 0;
}
.partner-page__step {
display: grid;
grid-template-columns: 52px 1fr;
gap: 16px;
align-items: start;
padding: 18px;
background: #ffffff;
border: 1px solid #cfdceb;
border-radius: 14px;
box-shadow: 0 3px 10px rgba(80, 120, 180, 0.04);
transition: box-shadow 0.25s ease;
}
.partner-page__step:hover {
box-shadow: 0 6px 20px rgba(80, 120, 180, 0.1);
}
.partner-page__step-num {
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: linear-gradient(180deg, #5898f2 0%, #4a90f2 100%);
color: #ffffff;
font-size: 1rem;
font-weight: 800;
line-height: 1;
box-shadow: 0 6px 14px rgba(74, 144, 242, 0.14);
flex-shrink: 0;
}
.partner-page__step-title {
margin: 2px 0 8px;
font-size: 1rem;
line-height: 1.4;
font-weight: 700;
color: #22324d;
}
.partner-page__step-text {
color: #5d6c84;
font-size: 0.9rem;
line-height: 1.7;
margin: 0;
}
.partner-page__step-actions {
margin-top: 12px;
}
/* ============================================
PARTNER PAGE — кнопка
============================================ */
.partner-page__btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 0 18px;
border-radius: 8px;
background: linear-gradient(180deg, #5a99f2 0%, #4a90f2 100%);
color: #ffffff;
text-decoration: none;
font-size: 0.9rem;
font-weight: 700;
box-shadow: 0 4px 12px rgba(74, 144, 242, 0.14);
transition: all 0.2s ease;
border: none;
cursor: pointer;
}
.partner-page__btn:hover {
color: #ffffff;
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(74, 144, 242, 0.25);
}
/* ============================================
PARTNER PAGE — карточки
============================================ */
.partner-page__features {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin: 20px 0;
}
.partner-page__feature-card {
padding: 20px 18px;
background: #ffffff;
border: 1px solid #d9e3ef;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(80, 120, 180, 0.04);
transition: box-shadow 0.25s ease, transform 0.25s ease;
height: 100%;
}
.partner-page__feature-card:hover {
box-shadow: 0 8px 24px rgba(80, 120, 180, 0.1);
transform: translateY(-2px);
}
.partner-page__feature-card-title {
margin: 0 0 8px;
font-size: 1rem;
font-weight: 700;
line-height: 1.4;
color: #24324a;
}
.partner-page__feature-card-text {
margin: 0;
color: #5d6c84;
font-size: 0.9rem;
line-height: 1.7;
}
/* ============================================
PARTNER PAGE — две колонки
============================================ */
.partner-page__two-col {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 20px;
margin: 20px 0;
align-items: start;
}
/* ============================================
PARTNER PAGE — списки
============================================ */
.partner-page__list {
margin: 10px 0 0;
padding-left: 18px;
color: #5d6c84;
list-style: disc;
}
.partner-page__list li {
margin-bottom: 7px;
line-height: 1.7;
font-size: 0.9375rem;
}
/* ============================================
PARTNER PAGE — инфоблоки
============================================ */
.partner-page__note,
.partner-page__ok {
padding: 14px 16px;
border-radius: 10px;
margin: 14px 0;
font-size: 0.9rem;
line-height: 1.7;
background: #f4f8fd;
border: 1px solid #dce8f5;
color: #556983;
}
.partner-page__warn {
padding: 14px 16px;
border-radius: 10px;
margin: 14px 0;
font-size: 0.9rem;
line-height: 1.7;
background: #fff8e8;
border: 1px solid #f2dfab;
color: #8b6a15;
}
/* ============================================
PARTNER PAGE — код
============================================ */
.partner-page__code {
margin: 14px 0;
padding: 14px 18px;
border-radius: 10px;
background: #101827;
color: #e5edf8;
overflow-x: auto;
font-size: 0.875rem;
line-height: 1.7;
}
.partner-page__code code {
background: transparent;
color: inherit;
padding: 0;
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}
.partner-page code {
padding: 2px 6px;
border-radius: 5px;
background: #edf5ff;
color: #327bdc;
font-size: 0.875em;
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}
/* ============================================
PARTNER PAGE — таблицы
============================================ */
.partner-page__table-wrap {
margin: 16px 0 24px;
overflow-x: auto;
border-radius: 12px;
background: #ffffff;
box-shadow: 0 3px 12px rgba(80, 120, 180, 0.04);
border: 1px solid #d8e3ef;
-webkit-overflow-scrolling: touch;
}
.partner-page__table {
width: 100%;
min-width: 680px;
border-collapse: collapse;
}
.partner-page__table thead th {
padding: 13px 16px;
text-align: left;
font-size: 0.9rem;
font-weight: 700;
color: #ffffff;
background: linear-gradient(90deg, #4a90f2 0%, #6a95f3 100%);
white-space: nowrap;
}
.partner-page__table tbody td {
padding: 12px 16px;
color: #54637b;
font-size: 0.9rem;
line-height: 1.6;
border-bottom: 1px solid #e8eef5;
vertical-align: top;
}
.partner-page__table tbody tr:nth-child(even) {
background: #f8fbff;
}
.partner-page__table tbody tr:last-child td {
border-bottom: none;
}
.partner-page__table tbody tr:hover td {
background: #f0f6ff;
}
/* ============================================
PP SECTION (партнёрская программа)
============================================ */
.pp-section {
position: relative;
overflow: hidden;
padding: 60px 24px 80px;
background: #f8fafc;
}
.pp-section *,
.pp-section *::before,
.pp-section *::after {
box-sizing: border-box;
}
/* Blob декорации */
.pp-blob {
position: absolute;
border-radius: 50%;
filter: blur(70px);
opacity: 0.12;
pointer-events: none;
z-index: 0;
}
.pp-blob--1 {
width: clamp(140px, 24vw, 300px);
height: clamp(140px, 24vw, 300px);
background: #3182ce;
bottom: -80px;
left: -80px;
}
.pp-blob--2 {
width: clamp(120px, 20vw, 260px);
height: clamp(120px, 20vw, 260px);
background: #63b3ed;
top: -60px;
right: -60px;
}
.pp-container {
position: relative;
z-index: 1;
max-width: 1060px;
margin: 0 auto;
}
/* Заголовок */
.pp-header {
text-align: center;
margin-bottom: 48px;
}
.pp-header__title {
font-size: clamp(1.5rem, 4vw, 2.5rem);
font-weight: 700;
color: #1a202c;
margin: 0 0 12px;
line-height: 1.2;
}
.pp-header__subtitle {
font-size: clamp(0.875rem, 2vw, 1.0625rem);
color: #718096;
margin: 0;
line-height: 1.6;
}
/* Текстовые блоки */
.pp-h2 {
font-size: clamp(1.1rem, 2.8vw, 1.625rem);
font-weight: 700;
color: #2b6cb0;
margin: 48px 0 8px;
padding-bottom: 10px;
border-bottom: 2px solid #bee3f8;
line-height: 1.3;
}
.pp-h3 {
font-size: clamp(0.9375rem, 2.2vw, 1.125rem);
font-weight: 600;
color: #2d3748;
margin: 22px 0 8px;
line-height: 1.4;
}
.pp-text {
font-size: clamp(0.875rem, 1.9vw, 0.9375rem);
color: #4a5568;
line-height: 1.7;
margin: 0 0 14px;
}
.pp-text strong {
color: #2d3748;
}
.pp-formula {
display: inline-block;
background: #ebf8ff;
border: 1px solid #bee3f8;
border-radius: 8px;
padding: 8px 16px;
font-size: clamp(0.875rem, 1.9vw, 0.9375rem);
font-weight: 600;
color: #2b6cb0;
margin: 6px 0 14px;
}
.pp-note {
font-size: clamp(0.8rem, 1.7vw, 0.875rem);
color: #a0aec0;
font-style: italic;
margin: 6px 0 24px;
line-height: 1.6;
}
.pp-table-note {
font-size: 0.8rem;
color: #a0aec0;
margin: 6px 0 0;
font-style: italic;
line-height: 1.5;
}
/* Изображение */
.pp-image {
display: block;
width: 100%;
max-width: 540px;
height: auto;
max-height: 300px;
object-fit: contain;
margin: 32px auto;
border-radius: 12px;
}
/* ============================================
PP — карточки преимуществ
============================================ */
.pp-features {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin: 20px 0 28px;
}
.pp-feature-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 20px 16px;
transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.pp-feature-card:hover {
box-shadow: 0 6px 20px rgba(49, 130, 206, 0.12);
transform: translateY(-2px);
}
.pp-feature-card__icon {
margin-bottom: 12px;
line-height: 0;
}
.pp-feature-card__title {
font-size: clamp(0.875rem, 1.9vw, 1rem);
font-weight: 600;
color: #2d3748;
margin: 0 0 8px;
line-height: 1.4;
}
.pp-feature-card__text {
font-size: clamp(0.8rem, 1.7vw, 0.875rem);
color: #718096;
line-height: 1.6;
margin: 0;
}
/* ============================================
PP — таблица
============================================ */
.pp-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 14px 0 24px;
border-radius: 10px;
border: 1px solid #e2e8f0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.pp-table {
width: 100%;
border-collapse: collapse;
min-width: 360px;
}
.pp-table th {
background: #ebf8ff;
color: #2b6cb0;
font-weight: 600;
font-size: clamp(0.8rem, 1.8vw, 0.9rem);
padding: 12px 16px;
text-align: left;
white-space: nowrap;
}
.pp-table td {
font-size: clamp(0.8rem, 1.7vw, 0.9rem);
color: #4a5568;
padding: 10px 16px;
border-top: 1px solid #e2e8f0;
line-height: 1.5;
}
.pp-table tbody tr:hover {
background: #f7fafc;
}
.pp-table td strong {
color: #2d3748;
}
/* ============================================
PP — тарифные планы
============================================ */
.pp-plans {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 18px;
margin: 20px 0 28px;
}
.pp-plan {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 20px 16px;
position: relative;
transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.pp-plan:hover {
box-shadow: 0 6px 20px rgba(49, 130, 206, 0.12);
transform: translateY(-2px);
}
.pp-plan--popular {
border-color: #3182ce;
background: #ebf8ff;
}
.pp-plan__badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: #3182ce;
color: #ffffff;
font-size: 0.7rem;
font-weight: 700;
padding: 3px 12px;
border-radius: 20px;
white-space: nowrap;
letter-spacing: 0.03em;
}
.pp-plan__title {
font-size: clamp(0.875rem, 1.9vw, 1rem);
font-weight: 700;
color: #2d3748;
margin: 0 0 14px;
line-height: 1.3;
}
.pp-plan__list {
list-style: none;
padding: 0;
margin: 0;
}
.pp-plan__list li {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 8px;
padding: 6px 0;
border-bottom: 1px solid #e2e8f0;
font-size: clamp(0.775rem, 1.7vw, 0.875rem);
}
.pp-plan--popular .pp-plan__list li {
border-bottom-color: #bee3f8;
}
.pp-plan__list li:last-child {
border-bottom: none;
}
.pp-plan__list-name {
color: #718096;
flex: 1;
line-height: 1.4;
}
.pp-plan__list-val {
font-weight: 700;
color: #2d3748;
white-space: nowrap;
font-size: clamp(0.775rem, 1.7vw, 0.875rem);
}
.pp-plan__text {
font-size: clamp(0.8125rem, 1.7vw, 0.9375rem);
color: #4a5568;
line-height: 1.7;
margin: 0;
}
/* PP — варианты */
.pp-variants {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
margin: 18px 0 10px;
}
/* PP — шаги */
.pp-steps {
display: flex;
flex-direction: column;
gap: 12px;
margin: 18px 0 36px;
}
.pp-step {
display: flex;
align-items: flex-start;
gap: 16px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 18px 20px;
transition: box-shadow 0.25s ease;
}
.pp-step:hover {
box-shadow: 0 4px 16px rgba(49, 130, 206, 0.1);
}
.pp-step__num {
flex-shrink: 0;
width: 40px;
height: 40px;
background: #3182ce;
color: #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1rem;
line-height: 1;
}
.pp-step__body {
flex: 1;
min-width: 0;
}
.pp-step__title {
font-weight: 700;
font-size: clamp(0.9rem, 2vw, 1.0625rem);
color: #2d3748;
margin-bottom: 4px;
line-height: 1.3;
}
.pp-step__text {
font-size: clamp(0.8rem, 1.7vw, 0.9375rem);
color: #718096;
line-height: 1.6;
margin: 0;
}
/* ============================================
WIKI — список статей
============================================ */
.wiki-list {
display: flex;
flex-direction: column;
gap: 0.875rem;
margin-bottom: 2rem;
}
.wiki-list-item {
background-color: #ffffff;
border-radius: 8px;
padding: 1.125rem 1.25rem;
display: flex;
border-left: 4px solid #4299e1;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
text-decoration: none;
color: inherit;
transition: all 0.3s ease;
}
.wiki-list-item:hover {
transform: translateX(5px);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}
.wiki-list-content {
flex: 1;
min-width: 0;
}
.wiki-list-title {
font-size: 1.0625rem;
font-weight: 600;
color: #2d3748;
margin-bottom: 0.4rem;
line-height: 1.4;
transition: color 0.2s ease;
}
.wiki-list-item:hover .wiki-list-title {
color: #4299e1;
}
.wiki-list-description {
color: #718096;
font-size: 0.9rem;
line-height: 1.5;
margin-bottom: 0.75rem;
}
.wiki-list-meta {
display: flex;
gap: 1rem;
margin-top: 0.4rem;
font-size: 0.8rem;
color: #a0aec0;
flex-wrap: wrap;
}
/* ============================================
WIKI — поиск
============================================ */
.wiki-search {
margin-bottom: 2rem;
width: 100%;
}
.wiki-search-form {
display: flex;
gap: 10px;
width: 100%;
max-width: 780px;
margin: 0 auto;
}
.wiki-search-input {
flex: 1;
padding: 12px 16px;
border: 2px solid #e2e8f0;
border-radius: 8px;
font-size: 1rem;
color: #4a5568;
background: #ffffff;
outline: none;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
min-width: 0;
}
.wiki-search-input:focus {
border-color: #4299e1;
box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.18);
}
.wiki-search-input::placeholder {
color: #a0aec0;
}
.wiki-search-button {
background-color: #4299e1;
color: #ffffff;
border: none;
border-radius: 8px;
padding: 0 22px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
height: 48px;
white-space: nowrap;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
flex-shrink: 0;
}
.wiki-search-button:hover {
background-color: #3182ce;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.wiki-search-button:active {
transform: translateY(0);
}
.no-results {
text-align: center;
padding: 2rem;
color: #718096;
font-style: italic;
font-size: 0.9375rem;
}
/* ============================================
CONTACT SECTION
============================================ */
.contact-header-section {
background: linear-gradient(135deg, #ffffff 0%, #edf2f7 100%);
padding: 60px 0;
position: relative;
overflow: hidden;
}
.contact-header-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 6px;
background: linear-gradient(to right, #4299e1, #63b3ed, #90cdf4);
z-index: 2;
}
.page-title-wrapper {
text-align: center;
position: relative;
z-index: 2;
padding: 0 20px;
}
.page-title-wrapper h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
color: #2d3748;
margin-bottom: 1rem;
line-height: 1.2;
}
.page-title-wrapper p {
font-size: 1rem;
color: #718096;
max-width: 580px;
margin: 0 auto;
line-height: 1.6;
}
.contact-content-section {
padding: 60px 0;
background-color: #ffffff;
}
.department-title {
font-size: 1.375rem;
font-weight: 600;
color: #2d3748;
margin-bottom: 0.875rem;
margin-top: 2rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid rgba(66, 153, 225, 0.18);
line-height: 1.3;
}
.department-info {
color: #4a5568;
font-size: 0.9375rem;
line-height: 1.6;
margin-bottom: 1.5rem;
}
.contact-line {
display: inline-flex;
align-items: center;
gap: 8px;
position: relative;
margin-bottom: 6px;
}
.contact-line::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
background-color: #4299e1;
border-radius: 50%;
flex-shrink: 0;
}
/* Карта */
.map-wrapper {
margin-top: 2rem;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
width: 100%;
aspect-ratio: 5 / 4;
transition: all 0.3s ease;
}
.map-wrapper iframe {
width: 100%;
height: 100%;
display: block;
border: none;
}
.map-wrapper:hover {
transform: translateY(-4px);
box-shadow: 0 14px 32px rgba(0, 0, 0, 0.1);
}
/* ============================================
ABOUT / WIKI / ARTICLE / POLICY PAGES
============================================ */
/* -- Обёртка контента -- */
.about-content,
.partnership-content {
max-width: 820px;
margin: 0 auto;
color: #374151;
font-size: 0.9375rem;
line-height: 1.75;
}
/* -- Заголовки H2 -- */
.about-content h2,
.partnership-content h2 {
font-size: clamp(1.125rem, 2.5vw, 1.5rem);
font-weight: 700;
color: #1a202c;
margin: 40px 0 14px;
padding-bottom: 10px;
border-bottom: 2px solid #ebf4ff;
line-height: 1.3;
position: relative;
}
.about-content h2::before,
.partnership-content h2::before {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 40px;
height: 2px;
background: linear-gradient(to right, #4299e1, #7f9cf5);
border-radius: 2px;
}
/* -- Заголовки H3 -- */
.about-content h3,
.partnership-content h3 {
font-size: 1.0625rem;
font-weight: 700;
color: #2d3748;
margin: 28px 0 10px;
}
/* -- Параграфы -- */
.about-content p,
.partnership-content p {
margin-bottom: 18px;
color: #4a5568;
}
.about-content p:last-child,
.partnership-content p:last-child {
margin-bottom: 0;
}
/* -- Ненумерованные списки -- */
.about-content ul,
.partnership-content ul {
list-style: none;
padding: 0;
margin: 0 0 24px;
}
.about-content ul li,
.partnership-content ul li {
position: relative;
padding: 8px 8px 8px 28px;
margin-bottom: 6px;
color: #4a5568;
line-height: 1.65;
border-radius: 8px;
transition: background 0.15s ease;
}
.about-content ul li::before,
.partnership-content ul li::before {
content: '';
position: absolute;
left: 10px;
top: 16px;
width: 7px;
height: 7px;
border-radius: 50%;
background: linear-gradient(135deg, #4299e1, #7f9cf5);
flex-shrink: 0;
}
.about-content ul li:hover,
.partnership-content ul li:hover {
background: #f7faff;
}
/* -- Нумерованные списки -- */
.about-content ol,
.partnership-content ol {
padding-left: 24px;
margin: 0 0 24px;
counter-reset: item;
list-style: none;
}
.about-content ol li,
.partnership-content ol li {
position: relative;
padding: 6px 8px 6px 14px;
margin-bottom: 8px;
color: #4a5568;
line-height: 1.65;
counter-increment: item;
}
.about-content ol li::before,
.partnership-content ol li::before {
content: counter(item) ".";
position: absolute;
left: -16px;
top: 7px;
font-size: 0.875rem;
font-weight: 700;
color: #4299e1;
}
/* -- Таблица сравнения -- */
.about-content table {
width: 100%;
border-collapse: collapse;
border-radius: 12px;
overflow: hidden;
margin: 28px 0;
font-size: 0.9rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
border: 1px solid #e2e8f0;
}
.about-content table th {
background: linear-gradient(135deg, #2b6cb0 0%, #4299e1 100%);
color: #fff;
font-weight: 700;
padding: 14px 16px;
text-align: left;
font-size: 0.875rem;
letter-spacing: 0.03em;
border: none;
}
.about-content table td {
padding: 12px 16px;
border-bottom: 1px solid #edf2f7;
color: #4a5568;
vertical-align: top;
line-height: 1.6;
}
.about-content table tr:last-child td {
border-bottom: none;
}
.about-content table tr:nth-child(even) td {
background: #f8fafc;
}
.about-content table tr:hover td {
background: #ebf8ff;
}
.about-content table td:first-child {
font-weight: 600;
color: #2d3748;
white-space: nowrap;
}
/* -- Изображения -- */
.about-content img {
display: block;
max-width: 100%;
height: auto;
border-radius: 12px;
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.09);
margin: 28px auto;
}
/* -- Жирный текст -- */
.about-content b,
.about-content strong,
.partnership-content b,
.partnership-content strong {
color: #2d3748;
font-weight: 700;
}
/* -- Горизонтальные разделители -- */
.about-content hr,
.partnership-content hr {
border: none;
height: 1px;
background: linear-gradient(to right, transparent, #e2e8f0, transparent);
margin: 32px 0;
}
/* -- Цитаты / врезки -- */
.about-content blockquote {
margin: 24px 0;
padding: 16px 20px;
background: #f0f7ff;
border-left: 4px solid #4299e1;
border-radius: 0 10px 10px 0;
color: #2b6cb0;
font-style: italic;
line-height: 1.65;
}
/* -- Старые классы — оставляем совместимость -- */
.advantages-list,
.services-list {
margin-bottom: 28px;
}
.advantages-list p,
.services-list p {
margin-bottom: 14px;
padding-left: 14px;
border-left: 3px solid #4299e1;
font-size: 0.9375rem;
line-height: 1.6;
}
.partnership-content ol {
margin-left: 20px;
margin-bottom: 18px;
}
/* -- Адаптив 768px -- */
@media (max-width: 768px) {
.about-content table {
font-size: 0.8125rem;
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
}
.about-content ul li,
.partnership-content ul li {
padding: 6px 8px 6px 24px;
}
.about-content h2,
.partnership-content h2 {
margin-top: 28px;
}
}
/* ============================================
TARIFF NOTICE MODAL
============================================ */
#tariffNoticeModal {
display: none;
position: fixed;
inset: 0;
z-index: 999999;
}
#tariffNoticeModal.is-open {
display: block;
}
/* Затемнение */
#tariffNoticeModal .np-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 20, 60, 0.55);
backdrop-filter: blur(4px);
}
/* Диалог */
#tariffNoticeModal .np-modal__dialog {
position: relative;
width: min(520px, calc(100% - 24px));
margin: 10vh auto 0;
background: #ffffff;
border-radius: 18px;
padding: 28px 28px 24px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
border: 1px solid rgba(37, 99, 235, 0.12);
}
/* Крестик */
#tariffNoticeModal .np-modal__close {
position: absolute;
top: 12px;
right: 12px;
width: 34px;
height: 34px;
border: none;
border-radius: 8px;
background: rgba(0, 0, 0, 0.05);
color: #555;
font-size: 1.25rem;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
cursor: pointer;
transition: background 0.2s ease;
}
#tariffNoticeModal .np-modal__close:hover {
background: rgba(0, 0, 0, 0.1);
}
/* Заголовок */
#tariffNoticeModal .np-modal__title {
margin: 0 44px 12px 0;
font-weight: 800;
color: #1e3a8a;
font-size: clamp(1.25rem, 3vw, 1.5rem);
line-height: 1.3;
}
/* Контент */
#tariffNoticeModal .np-modal__content p {
margin: 0 0 10px;
color: #1f2937;
font-size: 0.9375rem;
line-height: 1.6;
}
#tariffNoticeModal .np-modal__content ul {
margin: 0;
padding-left: 20px;
list-style: disc;
}
#tariffNoticeModal .np-modal__content li {
margin: 6px 0;
color: #374151;
font-size: 0.9rem;
line-height: 1.5;
}
/* Кнопки */
#tariffNoticeModal .np-modal__actions {
display: flex;
gap: 12px;
justify-content: center;
margin-top: 20px;
flex-wrap: wrap;
}
#tariffNoticeModal .np-modal__btn {
min-width: 160px;
padding: 11px 18px;
border-radius: 10px;
font-size: 0.9375rem;
font-weight: 600;
cursor: pointer;
transition: all 0.25s ease;
border: none;
text-align: center;
}
#tariffNoticeModal .np-modal__btn--primary {
background: linear-gradient(135deg, #2563eb, #1e40af);
color: #ffffff;
box-shadow: 0 6px 16px rgba(37, 99, 235, 0.3);
}
#tariffNoticeModal .np-modal__btn--primary:hover {
box-shadow: 0 8px 22px rgba(37, 99, 235, 0.42);
transform: translateY(-1px);
}
#tariffNoticeModal .np-modal__btn--secondary {
background: #f8fafc;
color: #1e3a8a;
border: 1px solid rgba(37, 99, 235, 0.3);
}
#tariffNoticeModal .np-modal__btn--secondary:hover {
background: #eef2ff;
}
/* Скрытые тарифы */
.tariffs-more {
display: none;
}
.tariffs-more.is-open {
display: flex;
flex-wrap: wrap;
}
/* ============================================
АДАПТИВ — 992px
============================================ */
@media (max-width: 992px) {
.partner-page__features {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pp-features {
grid-template-columns: repeat(2, 1fr);
}
.pp-plans {
grid-template-columns: repeat(2, 1fr);
}
}
/* ============================================
АДАПТИВ — 768px
============================================ */
@media (max-width: 768px) {
/* Partner page */
.partner-page {
padding: 40px 14px 56px;
}
.partner-page__title {
font-size: clamp(1.5rem, 5vw, 1.875rem);
}
.partner-page__section-title {
font-size: clamp(1.2rem, 4vw, 1.5rem);
margin-top: 28px;
}
.partner-page__features,
.partner-page__two-col {
grid-template-columns: 1fr !important;
}
.partner-page__step {
grid-template-columns: 44px 1fr;
gap: 12px;
padding: 14px;
}
.partner-page__step-num {
width: 44px;
height: 44px;
border-radius: 10px;
font-size: 0.9rem;
}
.partner-page__step-image .partner-page__img,
.partner-page__two-col-right .partner-page__img {
max-height: 240px;
}
.partner-page__table {
min-width: 540px;
}
/* PP */
.pp-section {
padding: 40px 16px 56px;
}
.pp-header {
margin-bottom: 32px;
}
.pp-h2 {
margin-top: 36px;
}
.pp-features {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.pp-feature-card {
padding: 16px 14px;
}
.pp-plans {
grid-template-columns: 1fr;
gap: 14px;
}
.pp-variants {
grid-template-columns: 1fr;
}
.pp-step {
padding: 14px 16px;
gap: 12px;
}
.pp-step__num {
width: 36px;
height: 36px;
font-size: 0.9rem;
}
.pp-table th,
.pp-table td {
padding: 10px 12px;
}
/* Wiki */
.wiki-list-item {
flex-direction: column;
padding: 1rem;
}
.wiki-list-meta {
gap: 0.75rem;
}
.wiki-search-form {
flex-direction: column;
gap: 10px;
}
.wiki-search-button {
width: 100%;
padding: 12px;
height: 48px;
}
/* Contact */
.contact-header-section {
padding: 40px 0;
}
.contact-content-section {
padding: 40px 0;
}
.department-title {
font-size: 1.25rem;
}
/* Modal */
#tariffNoticeModal .np-modal__dialog {
margin: 8vh auto 0;
padding: 20px 16px 18px;
}
#tariffNoticeModal .np-modal__actions {
justify-content: stretch;
}
#tariffNoticeModal .np-modal__btn {
width: 100%;
min-width: 0;
}
}
/* ============================================
АДАПТИВ — 480px
============================================ */
@media (max-width: 480px) {
/* Partner page */
.partner-page {
padding: 32px 12px 48px;
}
.partner-page__step {
grid-template-columns: 38px 1fr;
gap: 10px;
padding: 12px;
}
.partner-page__step-num {
width: 38px;
height: 38px;
border-radius: 9px;
font-size: 0.875rem;
}
.partner-page__table {
min-width: 480px;
}
/* PP */
.pp-section {
padding: 28px 14px 44px;
}
.pp-features {
grid-template-columns: 1fr;
gap: 10px;
}
.pp-feature-card {
padding: 14px 12px;
border-radius: 10px;
}
.pp-feature-card__icon svg {
width: 24px;
height: 24px;
}
.pp-plan {
padding: 16px 14px;
border-radius: 10px;
}
.pp-plan__list li {
flex-direction: column;
gap: 2px;
align-items: flex-start;
}
.pp-step {
padding: 12px 14px;
gap: 10px;
}
.pp-step__num {
width: 34px;
height: 34px;
font-size: 0.875rem;
}
.pp-table {
min-width: 300px;
}
.pp-table th,
.pp-table td {
padding: 9px 10px;
font-size: 0.8125rem;
}
.pp-image {
max-height: 200px;
margin: 20px auto;
}
.pp-formula {
font-size: 0.8125rem;
padding: 7px 12px;
display: block;
text-align: center;
}
/* Wiki */
.wiki-list-title {
font-size: 1rem;
}
.wiki-list-description {
font-size: 0.875rem;
}
.wiki-list-meta {
font-size: 0.75rem;
}
/* Contact */
.page-title-wrapper h1 {
font-size: clamp(1.5rem, 6vw, 1.875rem);
}
.department-info {
font-size: 0.9rem;
}
.map-wrapper {
margin-top: 1.25rem;
}
}
/* ============================================
АДАПТИВ — 360px
============================================ */
@media (max-width: 360px) {
/* PP */
.pp-section {
padding: 22px 10px 36px;
}
.pp-header__title {
font-size: 1.25rem;
}
.pp-header__subtitle {
font-size: 0.8rem;
}
.pp-h2 {
font-size: 1rem;
margin-top: 28px;
padding-bottom: 8px;
}
.pp-h3 {
font-size: 0.9rem;
}
.pp-text {
font-size: 0.8125rem;
}
.pp-feature-card {
padding: 12px 10px;
border-radius: 8px;
}
.pp-feature-card__icon svg {
width: 20px;
height: 20px;
}
.pp-plan {
padding: 14px 10px;
border-radius: 8px;
}
.pp-plan__badge {
font-size: 0.65rem;
padding: 3px 10px;
top: -11px;
}
.pp-step {
padding: 12px 10px;
gap: 10px;
border-radius: 10px;
}
.pp-step__num {
width: 28px;
height: 28px;
font-size: 0.8rem;
}
.pp-step__title {
font-size: 0.875rem;
}
.pp-step__text {
font-size: 0.8rem;
}
.pp-image {
max-height: 160px;
margin: 16px auto;
border-radius: 8px;
}
.pp-formula {
font-size: 0.775rem;
padding: 6px 10px;
}
.pp-note {
font-size: 0.75rem;
}
.pp-blob--1,
.pp-blob--2 {
width: 90px;
height: 90px;
filter: blur(36px);
}
.pp-table {
min-width: 260px;
}
.pp-table th,
.pp-table td {
padding: 8px;
font-size: 0.775rem;
}
/* Partner page */
.partner-page__step {
grid-template-columns: 34px 1fr;
gap: 8px;
padding: 10px;
}
.partner-page__step-num {
width: 34px;
height: 34px;
border-radius: 8px;
font-size: 0.8rem;
}
}
/* ============================================
ЧАСТЬ 9: CSS-ПЕРЕМЕННЫЕ + УТИЛИТЫ + ФИНАЛЬНЫЕ ФИКСЫ
============================================ */
/* ============================================
СЕКЦИЯ
============================================ */
.jobs-section {
padding: 80px 0px 100px;
background: linear-gradient(160deg, rgb(240, 247, 255) 0%, rgb(248, 250, 252) 60%, rgb(237, 242, 247) 100%);
position: relative;
overflow: hidden;
}
.jobs-section::before {
content: "";
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 5px;
background: linear-gradient(to right, rgb(66, 153, 225), rgb(127, 156, 245), rgb(99, 179, 237));
z-index: 2;
}
.jobs-section::after {
content: "";
position: absolute;
width: 420px;
height: 420px;
background: radial-gradient(circle, rgba(66, 153, 225, 0.07) 0%, transparent 70%);
border-radius: 50%;
bottom: -120px;
right: -120px;
pointer-events: none;
z-index: 0;
}
.jobs-container {
max-width: 900px;
margin: 0px auto;
padding: 0px 24px;
position: relative;
z-index: 1;
}
.jobs-intro {
text-align: center;
margin-bottom: 56px;
}
.jobs-title {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 800;
color: rgb(26, 32, 44);
margin-bottom: 12px;
line-height: 1.2;
position: relative;
display: inline-block;
}
.jobs-title::after {
content: "";
display: block;
width: 64px;
height: 4px;
background: linear-gradient(to right, rgb(66, 153, 225), rgb(127, 156, 245));
border-radius: 2px;
margin: 14px auto 0px;
}
.jobs-subtitle {
font-size: 1rem;
color: rgb(113, 128, 150);
line-height: 1.6;
margin-top: 20px;
}
.jobs-count {
display: inline-flex;
align-items: center;
gap: 6px;
background-color: rgb(235, 248, 255);
color: rgb(43, 108, 176);
font-size: 0.875rem;
font-weight: 600;
padding: 6px 16px;
border-radius: 20px;
border: 1px solid rgb(190, 227, 248);
margin-top: 16px;
}
.jobs-count::before {
content: "";
width: 8px;
height: 8px;
background-color: rgb(72, 187, 120);
border-radius: 50%;
flex-shrink: 0;
box-shadow: rgba(72, 187, 120, 0.2) 0px 0px 0px 3px;
}
.jobs-grid {
display: flex;
flex-direction: column;
gap: 20px;
}
.job-card {
background: rgb(255, 255, 255);
border-radius: 16px;
border: 1px solid rgb(226, 232, 240);
box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 16px;
overflow: hidden;
transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
animation: 0.5s ease-out 0s 1 normal both running fadeInUp;
}
.job-card:nth-child(1) {
animation-delay: 0.1s;
}
.job-card:nth-child(2) {
animation-delay: 0.2s;
}
.job-card:nth-child(3) {
animation-delay: 0.3s;
}
.job-card:nth-child(4) {
animation-delay: 0.4s;
}
.job-card:hover {
transform: translateY(-4px);
box-shadow: rgba(66, 153, 225, 0.12) 0px 12px 32px;
border-color: rgb(190, 227, 248);
}
.job-card__panel {
padding: 24px 28px;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
background: linear-gradient(135deg, rgb(247, 250, 252) 0%, rgb(255, 255, 255) 100%);
border-bottom: 1px solid rgb(237, 242, 247);
cursor: pointer;
user-select: none;
transition: background 0.25s;
}
.job-card:hover .job-card__panel {
background: linear-gradient(135deg, rgb(235, 248, 255) 0%, rgb(247, 250, 252) 100%);
}
.job-card__panel-left {
display: flex;
align-items: flex-start;
gap: 16px;
flex: 1 1 0%;
min-width: 0px;
}
.job-card__icon {
width: 48px;
height: 48px;
flex-shrink: 0;
border-radius: 12px;
background: linear-gradient(135deg, rgb(235, 248, 255) 0%, rgb(190, 227, 248) 100%);
display: flex;
align-items: center;
justify-content: center;
color: rgb(49, 130, 206);
transition: transform 0.3s, background 0.3s;
}
.job-card:hover .job-card__icon {
transform: scale(1.08);
background: linear-gradient(135deg, rgb(190, 227, 248) 0%, rgb(144, 205, 244) 100%);
}
.job-card__icon svg {
width: 24px;
height: 24px;
flex-shrink: 0;
}
.job-card__title-wrap {
flex: 1 1 0%;
min-width: 0px;
}
.job-card__title {
font-size: 1.125rem;
font-weight: 700;
color: rgb(26, 32, 44);
line-height: 1.3;
margin-bottom: 6px;
transition: color 0.2s;
}
.job-card:hover .job-card__title {
color: rgb(43, 108, 176);
}
.job-card__tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.job-tag {
display: inline-block;
font-size: 0.75rem;
font-weight: 500;
padding: 3px 10px;
border-radius: 20px;
white-space: nowrap;
}
.job-tag--type {
background-color: rgb(235, 248, 255);
color: rgb(43, 108, 176);
border: 1px solid rgb(190, 227, 248);
}
.job-tag--location {
background-color: rgb(240, 255, 244);
color: rgb(39, 103, 73);
border: 1px solid rgb(154, 230, 180);
}
.job-card__panel-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 10px;
flex-shrink: 0;
}
.job-card__salary {
display: inline-flex;
align-items: center;
gap: 6px;
background: linear-gradient(135deg, rgb(66, 153, 225), rgb(49, 130, 206));
color: rgb(255, 255, 255);
font-size: 0.8125rem;
font-weight: 700;
padding: 6px 14px;
border-radius: 20px;
white-space: nowrap;
box-shadow: rgba(66, 153, 225, 0.25) 0px 4px 10px;
}
.job-card__salary svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}
.job-card__toggle {
width: 32px;
height: 32px;
border-radius: 50%;
background-color: rgb(237, 242, 247);
display: flex;
align-items: center;
justify-content: center;
color: rgb(113, 128, 150);
transition: 0.3s;
flex-shrink: 0;
}
.job-card__toggle svg {
width: 16px;
height: 16px;
transition: transform 0.3s;
}
.job-card.is-open .job-card__toggle {
background-color: rgb(66, 153, 225);
color: rgb(255, 255, 255);
}
.job-card.is-open .job-card__toggle svg {
transform: rotate(180deg);
}
.job-card__body {
max-height: 0px;
overflow: hidden;
transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.job-card.is-open .job-card__body {
max-height: 800px;
}
.job-card__body-inner {
padding: 24px 28px 28px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.job-block {
background: rgb(248, 250, 252);
border-radius: 12px;
padding: 20px;
border: 1px solid rgb(237, 242, 247);
}
.job-block__label {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgb(160, 174, 192);
margin-bottom: 14px;
}
.job-block__label svg {
width: 14px;
height: 14px;
color: rgb(66, 153, 225);
flex-shrink: 0;
}
.job-block__list {
list-style: none;
padding: 0px;
margin: 0px;
display: flex;
flex-direction: column;
gap: 10px;
}
.job-block__list li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 0.9rem;
color: rgb(74, 85, 104);
line-height: 1.55;
}
.job-block__list li::before {
content: "";
width: 18px;
height: 18px;
flex-shrink: 0;
margin-top: 1px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%234299e1'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
}
.job-card__body-inner--single {
grid-template-columns: 1fr;
}
.job-card__actions {
padding: 16px 28px;
background: rgb(247, 250, 252);
border-top: 1px solid rgb(237, 242, 247);
display: flex;
align-items: center;
justify-content: flex-end;
}
.job-card__apply {
display: inline-flex;
align-items: center;
gap: 8px;
background-color: rgb(66, 153, 225);
color: rgb(255, 255, 255);
font-size: 0.9rem;
font-weight: 600;
padding: 10px 22px;
border-radius: 8px;
text-decoration: none;
transition: 0.3s;
box-shadow: rgba(66, 153, 225, 0.25) 0px 4px 10px;
}
.job-card__apply:hover {
background-color: rgb(49, 130, 206);
color: rgb(255, 255, 255);
transform: translateY(-2px);
box-shadow: rgba(66, 153, 225, 0.35) 0px 8px 18px;
}
.job-card__apply svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.jobs-contact {
margin-top: 40px;
text-align: center;
padding: 24px 32px;
background: rgb(255, 255, 255);
border: 1px solid rgb(226, 232, 240);
border-radius: 14px;
box-shadow: rgba(0, 0, 0, 0.04) 0px 4px 16px;
}
.jobs-contact__text {
font-size: 0.9375rem;
color: rgb(113, 128, 150);
line-height: 1.6;
margin-bottom: 10px;
}
.jobs-contact__email {
display: inline-flex;
align-items: center;
gap: 8px;
color: rgb(66, 153, 225);
font-weight: 600;
font-size: 1rem;
text-decoration: none;
transition: color 0.2s;
}
.jobs-contact__email:hover {
color: rgb(49, 130, 206);
}
.jobs-contact__email svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
@media (max-width: 768px) {
.jobs-section {
padding: 56px 0px 72px;
}
.jobs-container {
padding: 0px 16px;
}
.jobs-intro {
margin-bottom: 40px;
}
.job-card__panel {
padding: 18px 20px;
flex-wrap: wrap;
gap: 12px;
}
.job-card__panel-right {
flex-direction: row;
align-items: center;
width: 100%;
justify-content: space-between;
}
.job-card__body-inner {
grid-template-columns: 1fr;
gap: 16px;
padding: 20px;
}
.job-card__actions {
padding: 14px 20px;
}
.job-card__title {
font-size: 1rem;
}
.job-card__icon {
width: 42px;
height: 42px;
}
}
@media (max-width: 480px) {
.jobs-section {
padding: 48px 0px 64px;
}
.jobs-container {
padding: 0px 12px;
}
.job-card {
border-radius: 12px;
}
.job-card__panel {
padding: 16px;
gap: 10px;
}
.job-card__panel-left {
gap: 12px;
}
.job-card__icon {
width: 38px;
height: 38px;
border-radius: 10px;
}
.job-card__icon svg {
width: 20px;
height: 20px;
}
.job-card__title {
font-size: 0.9375rem;
}
.job-card__body-inner {
padding: 16px;
gap: 12px;
}
.job-block {
padding: 16px;
}
.job-block__list li {
font-size: 0.875rem;
}
.job-card__actions {
padding: 12px 16px;
}
.job-card__apply {
width: 100%;
justify-content: center;
padding: 10px 16px;
}
.jobs-contact {
padding: 20px 16px;
margin-top: 28px;
}
}
@media (hover: none) {
.job-card:hover {
transform: none;
box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 16px;
border-color: rgb(226, 232, 240);
}
.job-card__apply:hover {
transform: none;
}
}
/* ============================================
TOUCH — убираем hover
============================================ */
@media (hover: none) {
.job-card:hover {
transform: none;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
border-color: #e2e8f0;
}
.job-card__apply:hover {
transform: none;
}
}
/* ============================================
ЧАСТЬ 11: REQUISITES SECTION — реквизиты
============================================ */
/* ============================================
СЕКЦИЯ
============================================ */
.req-section {
padding: 80px 0 100px;
background: linear-gradient(160deg, #f7faff 0%, #f8fafc 55%, #edf2f7 100%);
position: relative;
overflow: hidden;
}
.req-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: linear-gradient(to right, #4299e1, #7f9cf5, #63b3ed);
z-index: 2;
}
.req-section::after {
content: '';
position: absolute;
width: 360px;
height: 360px;
background: radial-gradient(circle, rgba(66, 153, 225, 0.07) 0%, transparent 70%);
border-radius: 50%;
bottom: -100px;
right: -80px;
pointer-events: none;
z-index: 0;
}
/* ============================================
КОНТЕЙНЕР
============================================ */
.req-container {
max-width: 820px;
margin: 0 auto;
padding: 0 24px;
position: relative;
z-index: 1;
}
/* ============================================
ШАПКА
============================================ */
.req-header {
text-align: center;
margin-bottom: 48px;
}
.req-title {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 800;
color: #1a202c;
line-height: 1.2;
display: inline-block;
position: relative;
}
.req-title::after {
content: '';
display: block;
width: 64px;
height: 4px;
background: linear-gradient(to right, #4299e1, #7f9cf5);
border-radius: 2px;
margin: 14px auto 0;
}
.req-subtitle {
font-size: 1rem;
color: #718096;
line-height: 1.6;
margin-top: 18px;
}
/* ============================================
КАРТОЧКА С РЕКВИЗИТАМИ
============================================ */
.req-card {
background: #ffffff;
border-radius: 18px;
border: 1px solid #e2e8f0;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);
overflow: hidden;
animation: fadeInUp 0.5s ease-out both;
}
/* ============================================
БЛОКИ ВНУТРИ КАРТОЧКИ
============================================ */
.req-group {
padding: 28px 32px;
border-bottom: 1px solid #edf2f7;
}
.req-group:last-child {
border-bottom: none;
}
.req-group__label {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: #a0aec0;
margin-bottom: 16px;
}
.req-group__label svg {
width: 14px;
height: 14px;
color: #4299e1;
flex-shrink: 0;
}
/* ============================================
СТРОКИ РЕКВИЗИТОВ
============================================ */
.req-rows {
display: flex;
flex-direction: column;
gap: 0;
}
.req-row {
display: grid;
grid-template-columns: 200px 1fr;
gap: 16px;
padding: 12px 0;
border-bottom: 1px solid #f0f4f8;
align-items: start;
transition: background-color 0.2s ease;
}
.req-row:last-child {
border-bottom: none;
padding-bottom: 0;
}
.req-row:first-child {
padding-top: 0;
}
.req-row:hover {
background-color: rgba(66, 153, 225, 0.03);
border-radius: 6px;
margin: 0 -8px;
padding: 12px 8px;
}
.req-row__key {
font-size: 0.875rem;
color: #718096;
font-weight: 500;
line-height: 1.5;
flex-shrink: 0;
}
.req-row__val {
font-size: 0.9375rem;
color: #1a202c;
font-weight: 600;
line-height: 1.5;
word-break: break-word;
}
/* Выделенное значение (название компании) */
.req-row__val--highlight {
color: #2b6cb0;
font-size: 1rem;
}
/* Числовые значения (ИНН, КПП и т.д.) */
.req-row__val--mono {
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
font-size: 0.9375rem;
background: #f7faff;
padding: 2px 8px;
border-radius: 5px;
border: 1px solid #e2e8f0;
display: inline-block;
letter-spacing: 0.03em;
color: #2d3748;
}
/* ============================================
COPY BADGE — кнопка копирования
============================================ */
.req-row__val-wrap {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.req-copy-btn {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.75rem;
font-weight: 600;
color: #a0aec0;
background: #f7fafc;
border: 1px solid #e2e8f0;
border-radius: 6px;
padding: 3px 8px;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
flex-shrink: 0;
}
.req-copy-btn svg {
width: 12px;
height: 12px;
}
.req-copy-btn:hover {
color: #4299e1;
background: #ebf8ff;
border-color: #bee3f8;
}
.req-copy-btn.copied {
color: #38a169;
background: #f0fff4;
border-color: #9ae6b4;
}
/* ============================================
АДАПТИВ — 640px
============================================ */
@media (max-width: 640px) {
.req-section {
padding: 56px 0 72px;
}
.req-container {
padding: 0 16px;
}
.req-group {
padding: 20px;
}
.req-row {
grid-template-columns: 1fr;
gap: 4px;
padding: 10px 0;
}
.req-row:hover {
margin: 0 -4px;
padding: 10px 4px;
}
.req-row__key {
font-size: 0.8125rem;
color: #a0aec0;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 0.7rem;
}
.req-row__val {
font-size: 0.875rem;
}
}
/* ============================================
АДАПТИВ — 480px
============================================ */
@media (max-width: 480px) {
.req-section {
padding: 48px 0 64px;
}
.req-container {
padding: 0 12px;
}
.req-card {
border-radius: 14px;
}
.req-group {
padding: 16px;
}
.req-row__val--mono {
font-size: 0.875rem;
}
}
/* ============================================
TOUCH — убираем hover
============================================ */
@media (hover: none) {
.req-row:hover {
background-color: transparent;
margin: 0;
padding: 12px 0;
}
}
/* ============================================
CSS-ПЕРЕМЕННЫЕ — единая система
============================================ */
:root {
--color-primary: #4299e1;
--color-primary-hover: #3182ce;
--color-primary-light: #ebf8ff;
--color-primary-dark: #2b6cb0;
--color-text: #2d3748;
--color-text-secondary: #718096;
--color-text-muted: #a0aec0;
--color-heading: #1a202c;
--color-bg: #ffffff;
--color-bg-alt: #f8fafc;
--color-bg-section: #f9fafb;
--color-border: #e2e8f0;
--color-border-light: #edf2f7;
--color-header-bg: #0f172a;
--color-header-text: #cbd5e1;
--color-success: #48bb78;
--color-warning: #ed8936;
--color-error: #f56565;
--font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, sans-serif;
/* Типографическая шкала */
--font-size-xs: 0.75rem; /* 12px */
--font-size-sm: 0.8125rem; /* 13px — monospace/code */
--font-size-sm2: 0.875rem; /* 14px — мелкие подписи */
--font-size-card: 0.9375rem; /* 15px — текст в карточках */
--font-size-base: 1rem; /* 16px — базовый */
--font-size-md: 1.125rem; /* 18px */
--font-size-lg: 1.25rem; /* 20px */
--font-size-xl: 1.375rem; /* 22px — иконки */
/* Межстрочные интервалы */
--lh-tight: 1.2; /* заголовки */
--lh-snug: 1.35; /* подзаголовки */
--lh-normal: 1.5; /* UI-элементы */
--lh-text: 1.6; /* основной текст */
--lh-article: 1.7; /* длинные статейные блоки */
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 16px;
--spacing-lg: 24px;
--spacing-xl: 32px;
--spacing-2xl: 48px;
--spacing-3xl: 64px;
--spacing-4xl: 80px;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-full: 50px;
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.12);
--transition-fast: 0.2s ease;
--transition-normal: 0.3s ease;
--transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
--container-max: 1200px;
--container-narrow: 720px;
--container-wide: 1440px;
}
/* ============================================
УТИЛИТЫ
============================================ */
.sr-only,
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
/* ============================================
ФИНАЛЬНЫЕ ФИКСЫ
============================================ */
/* Предотвращение зума на iOS для полей ввода */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="password"],
input[type="number"],
textarea,
select {
font-size: 16px;
}
/* Safe-area для iPhone X+ */
@supports (padding: env(safe-area-inset-bottom)) {
.menu {
padding-bottom: env(safe-area-inset-bottom, 2rem);
}
footer {
padding-bottom: env(safe-area-inset-bottom, 0px);
}
}
/* Стилизация выделения текста */
::selection {
background-color: rgba(66, 153, 225, 0.2);
color: inherit;
}
/* Доступный фокус */
:focus-visible {
outline: 2px solid #4299e1;
outline-offset: 2px;
}
/* Печать */
@media print {
header,
.hamburger,
footer {
display: none;
}
body {
color: #000;
background: #fff;
}
a {
color: #000;
text-decoration: underline;
}
* {
box-shadow: none;
text-shadow: none;
}
}