/* ============================================================ RSK23 MODERN UI KIT — v1.0 Все компоненты подключаются через class на : body.rsk-segment — сегментация body.rsk-sticky — sticky-навигация body.rsk-hero — full-screen hero body.rsk-animate — scroll-анимации body.rsk-pills — pill-кнопки body.rsk-cards — карточки услуг body.rsk-widget — плавающий виджет body.rsk-typo — типографика body.rsk-icons — иконки-ярлыки body.rsk-all — всё сразу ============================================================ */ /* ── ПЕРЕМЕННЫЕ RSK23 ───────────────────────────────────────── */ :root { --rsk-primary: #E8501A; --rsk-primary-dark: #c94015; --rsk-primary-glow: rgba(232, 80, 26, 0.35); --rsk-bg: #ffffff; --rsk-bg-light: #FFF7F4; --rsk-bg-dark: #1a1a2e; --rsk-text: #1a1a1a; --rsk-text-muted: #6b7280; --rsk-border: rgba(0,0,0,0.08); --rsk-radius-sm: 8px; --rsk-radius-md: 16px; --rsk-radius-lg: 24px; --rsk-radius-pill: 50px; --rsk-shadow-sm: 0 2px 12px rgba(0,0,0,0.06); --rsk-shadow-md: 0 4px 24px rgba(0,0,0,0.08); --rsk-shadow-lg: 0 16px 48px rgba(232, 80, 26, 0.12); --rsk-transition: 0.3s ease; --rsk-font: 'Inter', 'Segoe UI', Arial, sans-serif; } /* ── 1. СЕГМЕНТАЦИЯ АУДИТОРИИ ───────────────────────────────── */ body.rsk-segment .rsk-segment-bar, body.rsk-all .rsk-segment-bar { display: flex; align-items: center; gap: 4px; background: rgba(255,255,255,0.12); border-radius: var(--rsk-radius-pill); padding: 4px; backdrop-filter: blur(8px); } body.rsk-segment .rsk-segment-link, body.rsk-all .rsk-segment-link { padding: 9px 22px; border-radius: var(--rsk-radius-pill); color: rgba(255,255,255,0.75); font-size: 14px; font-weight: 500; text-decoration: none; transition: background var(--rsk-transition), color var(--rsk-transition); white-space: nowrap; cursor: pointer; border: none; background: transparent; } body.rsk-segment .rsk-segment-link.active, body.rsk-all .rsk-segment-link.active, body.rsk-segment .rsk-segment-link:hover, body.rsk-all .rsk-segment-link:hover { background: var(--rsk-primary); color: #fff; } .rsk-segment-section { display: none; } .rsk-segment-section.visible { display: block; } /* ── 2. STICKY-НАВИГАЦИЯ ────────────────────────────────────── */ body.rsk-sticky .rsk-nav, body.rsk-all .rsk-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; transition: background var(--rsk-transition), box-shadow var(--rsk-transition), padding var(--rsk-transition); padding: 18px 40px; background: transparent; } body.rsk-sticky .rsk-nav.is-scrolled, body.rsk-all .rsk-nav.is-scrolled { background: rgba(10,18,24,0.97); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 2px 24px rgba(0,0,0,0.35); padding: 10px 40px; } body.rsk-sticky .rsk-nav.is-scrolled .rsk-nav-link, body.rsk-all .rsk-nav.is-scrolled .rsk-nav-link { color: rgba(255,255,255,0.9); } body.rsk-sticky .rsk-nav.is-scrolled .rsk-nav-logo, body.rsk-all .rsk-nav.is-scrolled .rsk-nav-logo { filter: none; } .rsk-nav { display: flex; align-items: center; gap: 32px; } .rsk-nav-logo { height: 40px; } .rsk-nav-links { display: flex; gap: 24px; margin: 0 auto; } .rsk-nav-link { color: rgba(255,255,255,0.9); font-size: 15px; font-weight: 500; text-decoration: none; transition: color var(--rsk-transition); } .rsk-nav-link:hover { color: var(--rsk-primary); } /* ── 3. FULL-SCREEN HERO ────────────────────────────────────── */ body.rsk-hero .rsk-hero, body.rsk-all .rsk-hero { position: relative; height: 100vh; min-height: 620px; display: flex; align-items: center; overflow: hidden; background: linear-gradient(135deg, #1a1a2e 0%, #2d1b0e 55%, #3d1f0a 100%); } .rsk-hero__bg { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 70% at 75% 50%, rgba(232,80,26,0.18) 0%, transparent 70%); pointer-events: none; } .rsk-hero__content { position: relative; z-index: 2; max-width: 720px; padding: 0 60px; color: #fff; } .rsk-hero__eyebrow { font-size: 14px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--rsk-primary); margin-bottom: 16px; } .rsk-hero__title { font-size: clamp(44px, 7vw, 88px); font-weight: 800; line-height: 1.05; margin-bottom: 20px; letter-spacing: -1px; } .rsk-hero__sub { font-size: clamp(16px, 2vw, 20px); color: rgba(255,255,255,0.65); margin-bottom: 36px; line-height: 1.5; } .rsk-hero__actions { display: flex; gap: 16px; flex-wrap: wrap; } /* Точки-индикаторы (как у Сбера) */ .rsk-hero__dots { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 3; } .rsk-dot { width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.3); cursor: pointer; transition: all 0.4s ease; } .rsk-dot.active { height: 28px; background: var(--rsk-primary); } /* ── 4. SCROLL-АНИМАЦИИ ─────────────────────────────────────── */ body.rsk-animate [data-animate], body.rsk-all [data-animate] { opacity: 0; transition: opacity 0.7s ease, transform 0.7s ease; } body.rsk-animate [data-animate="fade-up"], body.rsk-all [data-animate="fade-up"] { transform: translateY(44px); } body.rsk-animate [data-animate="fade-right"], body.rsk-all [data-animate="fade-right"] { transform: translateX(-44px); } body.rsk-animate [data-animate="fade-left"], body.rsk-all [data-animate="fade-left"] { transform: translateX(44px); } body.rsk-animate [data-animate="zoom"], body.rsk-all [data-animate="zoom"] { transform: scale(0.88); } body.rsk-animate [data-animate].is-visible, body.rsk-all [data-animate].is-visible { opacity: 1; transform: none; } /* ── 5. PILL-КНОПКИ ─────────────────────────────────────────── */ body.rsk-pills .rsk-btn, body.rsk-all .rsk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 32px; border-radius: var(--rsk-radius-pill); font-family: var(--rsk-font); font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; border: 2px solid transparent; outline: none; transition: all var(--rsk-transition); white-space: nowrap; letter-spacing: 0.2px; } /* Основная — оранжевая */ .rsk-btn--primary { background: var(--rsk-primary); color: #fff; box-shadow: 0 8px 32px var(--rsk-primary-glow); } .rsk-btn--primary:hover { background: var(--rsk-primary-dark); box-shadow: 0 14px 44px rgba(232,80,26,0.5); transform: translateY(-3px); color: #fff; text-decoration: none; } /* Ghost — прозрачная */ .rsk-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); } .rsk-btn--ghost:hover { background: rgba(255,255,255,0.12); border-color: #fff; transform: translateY(-3px); color: #fff; text-decoration: none; } /* Тёмная */ .rsk-btn--dark { background: var(--rsk-text); color: #fff; box-shadow: var(--rsk-shadow-md); } .rsk-btn--dark:hover { background: #333; transform: translateY(-3px); color: #fff; text-decoration: none; } /* Светлая (на тёмном фоне) */ .rsk-btn--light { background: #fff; color: var(--rsk-primary); box-shadow: var(--rsk-shadow-md); } .rsk-btn--light:hover { background: var(--rsk-bg-light); transform: translateY(-3px); color: var(--rsk-primary-dark); text-decoration: none; } /* Размеры */ .rsk-btn--sm { padding: 10px 22px; font-size: 13px; } .rsk-btn--lg { padding: 18px 44px; font-size: 17px; } /* ── 6. КАРТОЧКИ УСЛУГ ──────────────────────────────────────── */ body.rsk-cards .rsk-grid, body.rsk-all .rsk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; padding: 16px 0; } body.rsk-cards .rsk-card, body.rsk-all .rsk-card { background: var(--rsk-bg); border-radius: var(--rsk-radius-lg); padding: 32px; box-shadow: var(--rsk-shadow-md); display: flex; flex-direction: column; gap: 14px; transition: transform var(--rsk-transition), box-shadow var(--rsk-transition); border: 1px solid var(--rsk-border); position: relative; overflow: hidden; } body.rsk-cards .rsk-card::before, body.rsk-all .rsk-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--rsk-primary); transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease; } body.rsk-cards .rsk-card:hover::before, body.rsk-all .rsk-card:hover::before { transform: scaleX(1); } body.rsk-cards .rsk-card:hover, body.rsk-all .rsk-card:hover { transform: translateY(-6px); box-shadow: var(--rsk-shadow-lg); } .rsk-card__icon { width: 68px; height: 68px; border-radius: 20px; background: var(--rsk-bg-light); display: flex; align-items: center; justify-content: center; font-size: 32px; flex-shrink: 0; transition: background var(--rsk-transition); } .rsk-card:hover .rsk-card__icon { background: var(--rsk-primary); } .rsk-card__title { font-size: 19px; font-weight: 700; color: var(--rsk-text); line-height: 1.3; } .rsk-card__text { font-size: 14px; color: var(--rsk-text-muted); line-height: 1.6; flex: 1; } .rsk-card__price { font-size: 18px; font-weight: 700; color: var(--rsk-primary); padding-top: 8px; border-top: 1px solid var(--rsk-border); } /* ── 7. ПЛАВАЮЩИЙ ВИДЖЕТ ────────────────────────────────────── */ body.rsk-widget .rsk-float, body.rsk-all .rsk-float { position: fixed; bottom: 28px; right: 28px; z-index: 9999; display: flex; flex-direction: column-reverse; align-items: center; gap: 10px; } .rsk-float__toggle { width: 58px; height: 58px; border-radius: 50%; background: var(--rsk-primary); border: none; cursor: pointer; box-shadow: 0 8px 32px var(--rsk-primary-glow); font-size: 22px; display: flex; align-items: center; justify-content: center; transition: all var(--rsk-transition); color: #fff; z-index: 1; } .rsk-float__toggle:hover { transform: scale(1.1) rotate(15deg); box-shadow: 0 12px 44px rgba(232,80,26,0.55); } .rsk-float__toggle.is-open { transform: rotate(45deg); background: var(--rsk-primary-dark); } .rsk-float__menu { display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; } .rsk-float-btn { width: 48px; height: 48px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); text-decoration: none; opacity: 0; transform: scale(0.5) translateY(16px); transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.2s; pointer-events: none; } .rsk-float__menu.is-open .rsk-float-btn { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; } .rsk-float__menu.is-open .rsk-float-btn:nth-child(1) { transition-delay: 0ms; } .rsk-float__menu.is-open .rsk-float-btn:nth-child(2) { transition-delay: 55ms; } .rsk-float__menu.is-open .rsk-float-btn:nth-child(3) { transition-delay: 110ms; } .rsk-float-btn:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.22); transform: scale(1.12); } /* Тултип при наведении */ .rsk-float-btn[title]:hover::after { content: attr(title); position: absolute; right: 60px; background: #1a1a1a; color: #fff; font-size: 12px; font-weight: 500; padding: 5px 12px; border-radius: 8px; white-space: nowrap; } /* ── 8. ТИПОГРАФИКА ─────────────────────────────────────────── */ body.rsk-typo, body.rsk-all { font-family: var(--rsk-font); font-size: clamp(15px, 1.6vw, 17px); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: var(--rsk-text); line-height: 1.6; } body.rsk-typo h1, body.rsk-all h1 { font-size: clamp(40px, 7vw, 88px); font-weight: 800; line-height: 1.05; letter-spacing: -1.5px; } body.rsk-typo h2, body.rsk-all h2 { font-size: clamp(28px, 4vw, 52px); font-weight: 700; line-height: 1.15; letter-spacing: -0.5px; } body.rsk-typo h3, body.rsk-all h3 { font-size: clamp(20px, 2.5vw, 30px); font-weight: 600; line-height: 1.25; } .rsk-section-title { font-size: clamp(28px, 4vw, 52px); font-weight: 700; margin-bottom: 12px; letter-spacing: -0.5px; } .rsk-section-sub { font-size: clamp(16px, 2vw, 19px); color: var(--rsk-text-muted); max-width: 600px; line-height: 1.6; } /* ── 9. ИКОНКИ-ЯРЛЫКИ ───────────────────────────────────────── */ body.rsk-icons .rsk-quick, body.rsk-all .rsk-quick { display: flex; gap: 12px; overflow-x: auto; padding: 20px 0 24px; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } body.rsk-icons .rsk-quick::-webkit-scrollbar, body.rsk-all .rsk-quick::-webkit-scrollbar { display: none; } .rsk-quick-item { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 0 0 auto; width: 78px; text-decoration: none; color: var(--rsk-text); transition: transform var(--rsk-transition); } .rsk-quick-item:hover { transform: translateY(-5px); text-decoration: none; color: var(--rsk-primary); } .rsk-quick-item__icon { width: 62px; height: 62px; border-radius: 18px; background: var(--rsk-bg-light); display: flex; align-items: center; justify-content: center; font-size: 26px; transition: background var(--rsk-transition), box-shadow var(--rsk-transition); } .rsk-quick-item:hover .rsk-quick-item__icon { background: var(--rsk-primary); box-shadow: 0 8px 24px var(--rsk-primary-glow); } .rsk-quick-item span { font-size: 11px; font-weight: 600; text-align: center; line-height: 1.3; color: inherit; } /* ── СЕКЦИИ — ОБЩИЕ СТИЛИ ───────────────────────────────────── */ .rsk-section { padding: 80px 0; } .rsk-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } /* ── АДАПТИВ ────────────────────────────────────────────────── */ @media (max-width: 768px) { .rsk-hero__content { padding: 0 24px; } .rsk-nav { padding: 14px 20px !important; } .rsk-nav-links { display: none; } .rsk-hero__dots { display: none; } .rsk-float { bottom: 16px; right: 16px; } .rsk-grid { grid-template-columns: 1fr !important; } .rsk-segment-bar { overflow-x: auto; scrollbar-width: none; } } /* ── ФИКС: убрать градиент за фото Алика ─────────────────────── */ .about-silhouette { background: none !important; background-image: none !important; } /* ── HERO: скрыть старый trust-блок с точками из hero-content ─── */ .hero-trust { display: none !important; } /* hero-trust-bot убран — используем нативный .hero-pills в HTML */ .hero-trust-bot { display: none !important; } /* ── ПУЛЬС: кнопка "Рассчитать стоимость" в шапке ────────────── */ /* Оранжевый неон-фон на 0.75 сек каждые 14 сек */ @keyframes rsk-cta-pulse { 0%, 89.5%, 100% { box-shadow: none; background: transparent; color: inherit; border-color: inherit; } 91%, 96.4% { box-shadow: 0 0 20px rgba(232,135,58,1), 0 0 48px rgba(232,135,58,0.55), inset 0 0 14px rgba(232,135,58,0.15); background: rgba(232,135,58,0.88); color: #fff !important; border-color: #E8873A !important; } } .hdr-cta { animation: rsk-cta-pulse 14s ease-in-out infinite; transition: background 0.15s, color 0.15s, border-color 0.15s; } /* ── HERO BTNS: все кнопки в одну строку ──────────────────────── */ .hero-btns { flex-wrap: nowrap !important; gap: 8px !important; } .btn-hero-wa, .btn-hero-tg, .btn-hero-max, .btn-hero-calc { padding: 10px 12px !important; font-size: 13px !important; white-space: nowrap; } /* ── HERO BODY: симметричный отступ верх/низ ────────────────────── */ .hero-body { padding-top: 143px !important; padding-bottom: 0 !important; align-items: flex-start !important; } /* ── HERO: высота секции ────────────────────────────────────────── */ #hero { min-height: 697px !important; } /* ── HERO BOT: pills выровнены по левому краю контента ─────────── */ .hero-bot-in { padding-left: 48px !important; padding-right: 48px !important; } /* ── HERO H1: три строки ────────────────────────────────────────── */ .hero-h1 { display: flex !important; flex-direction: column !important; gap: 0 !important; line-height: 1 !important; } .rh1-static { display: block; font-size: clamp(58px, 8vw, 110px); font-weight: 900; color: rgb(138, 190, 200); font-style: italic; letter-spacing: 1px; } .rh1-obj { display: block; font-size: clamp(58px, 8vw, 110px); font-weight: 700; font-style: normal; color: rgb(232, 226, 217); letter-spacing: 1px; transition: opacity 0.4s; } .rh1-type { display: block; font-size: clamp(32px, 4.5vw, 64px); font-weight: 500; font-style: normal; color: rgba(255, 255, 255, 0.9); letter-spacing: 1px; margin-top: 4px; white-space: nowrap; transition: opacity 0.4s; } /* ── HERO PILLS: одна строка без переноса ─────────────────────── */ .hero-pills { flex-wrap: nowrap !important; gap: 8px; } /* ── FOOTER SOCIAL: равная ширина всех кнопок ─────────────────── */ .foot-soc { width: 155px; } .fsoc { width: 100%; justify-content: center; box-sizing: border-box; } /* ── PRICE TABS: текст лунно-белый ─────────────────────────────── */ .ptab { color: #E8E2D9 !important; } .ptab.on { color: #fff !important; } /* ── OWNER PHOTO: убрать фон контейнера ─────────────────────────── */ .about-photo-side { background: transparent !important; }