/* ============================================================ ШРИФТЫ ============================================================ */ @font-face { font-family: 'Stem'; src: url('../fonts/Stem-Light.ttf') format('truetype'); font-weight: 300; font-display: swap; } @font-face { font-family: 'Stem'; src: url('../fonts/Stem-SemiLight.ttf') format('truetype'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Stem'; src: url('../fonts/Stem-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; } @font-face { font-family: 'Stem'; src: url('../fonts/Stem-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; } @font-face { font-family: 'Floripa'; src: url('../fonts/Floripa.ttf') format('truetype'); font-weight: normal; font-display: swap; } /* ============================================================ ПЕРЕМЕННЫЕ ============================================================ */ :root { /* Красные */ --primary-red: #8B0000; --secondary-red: #B22222; --accent-red: #DC143C; --bright-red: #FF4444; --dark-red: #5C0000; --deep-red: #3A0509; --red-soft: #FDECEF; --gradient-red: linear-gradient(135deg, #8B0000 0%, #DC143C 50%, #FF6B6B 100%); --gradient-red-dark: linear-gradient(135deg, #3A0509 0%, #5C0000 45%, #8B0000 100%); --gradient-red-soft: linear-gradient(135deg, #B22222 0%, #DC143C 100%); /* Нейтральные */ --white: #ffffff; --light-grey: #EDEBEC; --text-dark: #14090B; --text-light: #4A3B3D; --text-muted: #857577; --background-light: #ffffff; --background-soft: #FBF6F6; --card-soft: #FFF7F7; --card-border: #F0DADA; --border-light: #EFE7E7; /* Шрифты */ --display: 'Stem', Arial, sans-serif; --display-accent: 'Floripa', 'Stem', sans-serif; } /* ============================================================ СБРОС И БАЗА ============================================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } html { overflow-x: hidden; width: 100%; max-width: 100%; } /* | Фон замирает, пока открыто модальное окно или мобильное меню. | | padding-right компенсирует исчезнувшую полосу прокрутки: без него | страница в момент открытия дёргалась вбок на её ширину. Саму ширину | замеряет base.js и кладёт в --sbw. Шапке отступ нужен отдельно — | она fixed и живёт по краю окна, а не внутри html. */ /* Ширину полосы прокрутки компенсирует ширина — её задаёт lockScroll() в js/base.js, потому что body при заморозке становится position: fixed и от отступа на уже не зависит. */ html.no-scroll { overflow: hidden; } html.no-scroll .header { padding-right: var(--sbw, 0px); } body { overflow-x: hidden; width: 100%; max-width: 100%; position: relative; font-family: var(--display); background: var(--background-light); color: var(--text-dark); line-height: 1.6; display: flex; flex-direction: column; min-height: 100vh; } .page-wrapper { flex: 1 0 auto; display: flex; flex-direction: column; width: 100%; } .container { max-width: 1400px; margin: 0 auto; padding: 0 40px; width: 100%; } img, video { max-width: 100%; height: auto; } ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--light-grey); } ::-webkit-scrollbar-thumb { background: var(--primary-red); } ::-webkit-scrollbar-thumb:hover { background: var(--accent-red); } /* ============================================================ СЕКЦИИ И ЗАГОЛОВКИ (шрифт Stem) ============================================================ */ .section { padding: 84px 0; position: relative; overflow: hidden; } .section.soft { background: var(--background-soft); } .section-header { margin-bottom: 50px; max-width: 800px; } /* Надзаголовок — мелкий красный капс */ .eyebrow { display: block; font-size: 13px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--accent-red); margin-bottom: 10px; } /* Лейбл-пилюля (используется точечно) */ .section-label { display: inline-block; padding: 8px 18px; background: var(--gradient-red-soft); color: var(--white); border-radius: 20px; font-size: 11px; font-weight: 700; margin-bottom: 18px; text-transform: uppercase; letter-spacing: 2px; } .section-title { font-size: 40px; font-weight: 700; color: var(--text-dark); line-height: 1; text-transform: uppercase; letter-spacing: -0.8px; } .section-title span { color: var(--accent-red); } .title-rule { display: block; width: 48px; height: 3px; background: var(--accent-red); margin-top: 12px; } /* Заголовок блока внутри секции */ .block-title { font-size: 24px; font-weight: 700; margin-bottom: 26px; } .section-desc { font-size: 17px; color: var(--text-light); line-height: 1.8; margin-top: 16px; } .deco-dots { position: absolute; width: 90px; height: 110px; background-image: radial-gradient(rgba(139, 0, 0, 0.26) 1.5px, transparent 1.7px); background-size: 15px 15px; pointer-events: none; z-index: 0; } .deco-dots.light { background-image: radial-gradient(rgba(255, 255, 255, 0.35) 1.5px, transparent 1.7px); } .deco-dots.lg { width: 140px; height: 150px; } /* Полупрозрачный круг-контур */ .deco-ring { position: absolute; border-radius: 50%; border: 1.5px dashed rgba(220, 20, 60, 0.22); pointer-events: none; z-index: 0; } /* Мягкое красное свечение под секцией */ .deco-glow { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(220, 20, 60, 0.13), transparent 68%); pointer-events: none; z-index: 0; } .container { position: relative; z-index: 1; } @media (max-width: 900px) { .deco-dots, .deco-ring, .deco-glow { display: none; } } @media (max-width: 992px) { .container { padding: 0 20px; } } @media (max-width: 768px) { .section { padding: 60px 0; } .section-header { margin-bottom: 36px; } .section-title { font-size: 28px; } } /* ============================================================ КНОПКИ ============================================================ */ .btn { position: relative; overflow: hidden; padding: 16px 30px; border-radius: 12px; text-decoration: none; font-family: inherit; font-weight: 700; font-size: 14px; letter-spacing: 0.8px; text-transform: uppercase; transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease; display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; border: none; line-height: 1.2; } .btn > * { position: relative; z-index: 1; } .btn::before { content: ''; position: absolute; top: 0; left: -140%; width: 65%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.42), transparent); transform: skewX(-20deg); transition: left 0.6s ease; z-index: 0; } .btn:hover::before { left: 150%; } .btn-primary { background: var(--gradient-red); color: var(--white); box-shadow: 0 10px 30px -8px rgba(220, 20, 60, 0.55); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 40px -6px rgba(220, 20, 60, 0.65); } .btn-white { background: var(--white); color: var(--primary-red); box-shadow: 0 14px 34px -16px rgba(0, 0, 0, 0.6); } .btn-white:hover { transform: translateY(-2px); } .btn-secondary { background: transparent; color: var(--white); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5); } .btn-secondary:hover { box-shadow: inset 0 0 0 2px var(--white); background: rgba(255, 255, 255, 0.12); transform: translateY(-2px); } .btn-ghost { background: var(--white); color: var(--primary-red); box-shadow: inset 0 0 0 2px rgba(139, 0, 0, 0.25); } .btn-ghost:hover { box-shadow: inset 0 0 0 2px var(--primary-red); transform: translateY(-2px); } .btn-vk { background: #0077FF; color: var(--white); box-shadow: 0 10px 30px -8px rgba(0, 119, 255, 0.5); } .btn-vk:hover { transform: translateY(-2px); } .btn-tg { background: #29A0DA; color: var(--white); box-shadow: 0 10px 30px -8px rgba(41, 160, 218, 0.5); } .btn-tg:hover { transform: translateY(-2px); } .btn[disabled], .btn.is-soon { opacity: 0.55; cursor: not-allowed; pointer-events: none; } .btn-sm { padding: 11px 18px; font-size: 12px; border-radius: 10px; } /* ============================================================ АНИМАЦИЯ ПОЯВЛЕНИЯ ============================================================ */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.animated { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } .header { position: fixed; top: -90px; left: 0; right: 0; z-index: 1000; height: 90px; display: flex; align-items: center; width: 100%; background: var(--white); box-shadow: 0 4px 24px rgba(90, 0, 0, 0.12); border-bottom: 1px solid var(--border-light); transition: top 0.3s ease, background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; } .header.visible { top: 0; } .header.transparent { background: transparent; box-shadow: none; border-bottom-color: transparent; top: 0; } .header-content { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 90px; width: 100%; } .logo-container { display: flex; align-items: center; gap: 6px; flex-shrink: 0; text-decoration: none; color: inherit; } /* Красная пилюля «СХО» шрифтом Stem */ .logo-mark { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 9px 17px; border-radius: 999px; background: var(--gradient-red); color: var(--white); font-family: var(--display); font-weight: 500; font-size: 18px; letter-spacing: 1.2px; line-height: 1; text-transform: uppercase; transition: transform 0.3s ease, box-shadow 0.3s ease; } .logo-container:hover .logo-mark { transform: translateY(-2px); } .brand__title { font-size: 22px; font-weight: 500; line-height: 1; text-transform: uppercase; transition: color 0.35s ease; padding-top: 0; } .header.transparent .brand__title { color: var(--white); } /* Навигация */ .nav-menu { display: flex; list-style: none; gap: 22px; align-items: center; } .nav-menu a { text-decoration: none; color: var(--text-dark); font-weight: 600; font-size: 14px; letter-spacing: 0.6px; text-transform: uppercase; transition: color 0.25s ease; position: relative; padding: 6px 0; white-space: nowrap; } .header.transparent .nav-menu a { color: rgba(255, 255, 255, 0.85); } .nav-menu a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 3px; background: var(--accent-red); transition: width 0.3s ease; } .nav-menu a:hover { color: var(--accent-red); } .header.transparent .nav-menu a:hover { color: var(--white); } .nav-menu a:hover::after { width: 100%; } .nav-menu a.active { color: var(--accent-red); } .nav-menu a.active::after { width: 100%; } .header.transparent .nav-menu a.active { color: var(--white); } .header.transparent .nav-menu a.active::after { background: var(--white); } /* Правая часть */ .header-right { display: flex; gap: 12px; align-items: center; flex-shrink: 0; } .social-header { display: flex; gap: 6px; align-items: center; } .social-header a { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.3s ease; } .social-header a img { width: 24px; height: 24px; display: block; filter: brightness(0); opacity: 0.72; transition: opacity 0.25s ease, filter 0.25s ease; } .header.transparent .social-header a img { filter: brightness(0) invert(1); opacity: 0.95; } .social-header a:hover { transform: translateY(-2px); } .social-header a:hover img { opacity: 1; } .header-cta { position: relative; overflow: hidden; text-decoration: none; display: inline-flex; align-items: center; gap: 9px; padding: 12px 24px; border-radius: 12px; font-family: inherit; font-weight: 700; font-size: 13px; letter-spacing: 0.4px; text-transform: uppercase; color: var(--white); background: var(--gradient-red); border: none; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; } .header-cta > * { position: relative; z-index: 1; } .header-cta::before { content: ''; position: absolute; top: 0; left: -140%; width: 60%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.45), transparent); transform: skewX(-20deg); transition: left 0.6s ease; z-index: 0; } .header-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -8px rgba(220, 20, 60, 0.55); } .header-cta:hover::before { left: 150%; } /* На прозрачной шапке кнопка остаётся красной — как и на белой */ /* Бургер */ .burger-menu { display: none; cursor: pointer; z-index: 1002; width: 44px; height: 44px; align-items: center; justify-content: center; } .burger-menu i { font-size: 24px; color: var(--text-dark); transition: color 0.3s ease; } .header.transparent .burger-menu i { color: var(--white); } .burger-menu:hover i { color: var(--accent-red); } @media (max-width: 1200px) { .nav-menu, .header-right { display: none; } .burger-menu { display: flex; } } /* ============================================================ МОБИЛЬНОЕ МЕНЮ ============================================================ */ .mobile-menu { position: fixed; inset: 0; width: 100%; height: 100vh; background: var(--white); z-index: 1001; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; display: flex; flex-direction: column; overflow-y: auto; } .mobile-menu.active { opacity: 1; visibility: visible; } .mobile-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; border-bottom: 1px solid var(--border-light); height: 90px; } .mobile-logo { display: flex; align-items: center; gap: 14px; } .mobile-menu .burger-menu { display: flex; } .mobile-nav { list-style: none; flex: 1; padding: 24px 20px; display: flex; flex-direction: column; gap: 24px; } .mobile-nav a { text-decoration: none; color: var(--text-dark); font-weight: 600; font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; position: relative; display: inline-block; } .mobile-nav a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 3px; background: var(--accent-red); transition: width 0.3s ease; } .mobile-nav a:hover::after, .mobile-nav a.active::after { width: 100%; } .mobile-nav a.active { color: var(--accent-red); } .mobile-footer { padding: 26px 20px 30px; border-top: 1px solid var(--border-light); display: flex; flex-direction: column; gap: 22px; } .mobile-social { display: flex; gap: 15px; align-items: center; } .mobile-social a { display: inline-flex; transition: transform 0.3s ease; } .mobile-social a img { width: 28px; height: 28px; filter: brightness(0); opacity: 0.8; } .mobile-social a:hover { transform: scale(1.12); } .mobile-contact-btn { display: block; width: 100%; padding: 16px 28px; border: none; border-radius: 12px; text-decoration: none; font-family: inherit; font-weight: 700; font-size: 14px; letter-spacing: 0.5px; text-transform: uppercase; text-align: center; background: var(--gradient-red); color: var(--white); cursor: pointer; transition: all 0.3s ease; } .mobile-contact-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(139, 0, 0, 0.3); } /* ============================================================ ШАПКА ПОДСТРАНИЦЫ ============================================================ */ .page-hero { position: relative; overflow: hidden; padding: 130px 0 55px; color: var(--white); background: radial-gradient(110% 90% at 80% 20%, rgba(220, 20, 60, 0.42) 0%, transparent 55%), var(--gradient-red-dark); } .page-hero__crumbs { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); margin-bottom: 20px; } .page-hero__crumbs a { color: rgba(255, 255, 255, 0.8); text-decoration: none; transition: color 0.25s ease; } .page-hero__crumbs a:hover { color: var(--white); } .page-hero__crumbs i { font-size: 9px; color: var(--bright-red); } .page-hero .section-title { color: var(--white); } .page-hero .section-title span { color: var(--bright-red); } .page-hero .eyebrow { color: var(--bright-red); } .page-hero .title-rule { background: var(--bright-red); } .page-hero .section-desc { color: rgba(255, 255, 255, 0.8); max-width: 640px; } .page-hero__crumbs { flex-wrap: wrap; row-gap: 6px; } @media (max-width: 768px) { .page-hero { padding: 128px 0 46px; } .page-hero__crumbs .crumbs__current, .page-hero__crumbs .crumbs__last-sep { display: none; } .page-hero__crumbs { font-size: 11px; letter-spacing: 1px; margin-bottom: 16px; } .page-hero .section-desc { font-size: 15px; } } /* ============================================================ ФУТЕР ============================================================ */ .footer { background: var(--gradient-red-dark); border-top: 1px solid rgba(255, 255, 255, 0.10); color: var(--white); padding: 64px 0 26px; position: relative; } .footer__main { display: grid; grid-template-columns: 400px 1fr; gap: 48px; align-items: center; margin-bottom: 44px; } .footer__logo-wrap { display: block; flex-shrink: 0; } .footer__uni-logo { width: auto; max-width: min(420px, 100%); object-fit: contain; opacity: 0.95; display: block; } .footer__card { background: var(--white); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 22px; padding: 32px 36px; display: grid; grid-template-columns: 1fr auto; gap: 28px 40px; align-items: start; box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.55); } .footer__card-left { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } /* Красная черта снизу — как в подвалах НОЦ и ССК */ .footer__email { font-weight: 700; font-size: clamp(17px, 1.7vw, 20px); color: var(--text-dark); text-decoration: none; display: inline-block; border-bottom: 2px solid var(--accent-red); padding-bottom: 2px; /* anywhere, а не break-all: длинный адрес переносится ЦЕЛИКОМ по границе, если не влезает, а не рубится по буквам («sho.kr / gmu@m / ail.ru»). */ overflow-wrap: anywhere; transition: color 0.25s ease; } .footer__email:hover { color: var(--accent-red); } .footer__addr { color: var(--text-muted); font-size: 14.5px; line-height: 1.6; margin-top: 13px; } /* Ссылки справа */ .footer__card-links { display: flex; flex-direction: column; gap: 2px; min-width: 250px; } /* | Приведено к виду подвала ССК. Отличие одно — цвет: в ССК там var(--muted) | (#b6b6c2, светло-серый под тёмную карточку), а здесь карточка БЕЛАЯ, и | такой серый на ней почти не читался бы. Берём свой токен той же роли. */ .footer__card-links a { font-family: var(--display); font-weight: 600; font-size: 13px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-muted); text-decoration: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; transition: color 0.25s; } .footer__card-links a + a { border-top: 1px solid var(--border-light); } .footer__card-links a i { color: var(--accent-red); font-size: 12px; transition: transform 0.3s ease; } /* Только цвет: сдвиг padding-left остался бы без перехода (в transition выше заявлен один color) и дёргал бы ссылку рывком. Движение отдано стрелке. */ .footer__card-links a:hover { color: var(--accent-red); } .footer__card-links a:hover i { transform: translate(2px, -2px); } /* | Подвал на планшете и телефоне — одна колонка. | | minmax(0, 1fr), а не 1fr: обычный 1fr — это minmax(auto, 1fr), и колонка | отказывается сжиматься уже своего содержимого. Длинная почта или ссылка | растянули бы её шире экрана. */ @media (max-width: 900px) { .footer__main { grid-template-columns: minmax(0, 1fr); gap: 30px; justify-items: center; text-align: center; } .footer__card { grid-template-columns: minmax(0, 1fr); padding: 26px 24px; text-align: left; width: 100%; } .footer__card-left { min-width: 0; } .footer__card-links { min-width: 0; align-items: stretch; } } .footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 22px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13px; color: rgba(255, 255, 255, 0.55); } .footer__bottom i { color: var(--bright-red); } .footer__policy { color: rgba(255, 255, 255, 0.62); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.25); padding-bottom: 2px; transition: color 0.25s ease, border-color 0.25s ease; } .footer__policy:hover { color: var(--white); border-color: var(--bright-red); } .footer__social { display: flex; gap: 10px; } .icon-btn { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.3s ease; } .icon-btn img { width: 28px; height: 28px; display: block; filter: brightness(0) invert(1); } .icon-btn:hover { transform: translateY(-2px); } @media (max-width: 600px) { .footer { padding: 48px 0 22px; } .footer__bottom { flex-direction: column; align-items: flex-start; } } /* ============================================================ КНОПКА «НАВЕРХ» ============================================================ */ .to-top { position: fixed; right: 26px; bottom: 26px; width: 48px; height: 48px; background: var(--gradient-red); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 18px; z-index: 900; opacity: 0; visibility: hidden; transform: translateY(12px); transition: all 0.3s ease; text-decoration: none; border-radius: 12px; box-shadow: 0 10px 26px -8px rgba(220, 20, 60, 0.5); } .to-top.show { opacity: 1; visibility: visible; transform: none; } /* ============================================================ МОДАЛКИ ============================================================ */ /* | Прокручивается САМА подложка, а не содержимое окна. Раньше коробка была | ограничена 88vh и внутри неё жила своя полоса прокрутки: у высокого окна | (например, с видеоуроком) получались две прокрутки сразу, и колесо мыши | работало через раз. Фон при этом замирает — html.no-scroll. */ .modal { position: fixed; inset: 0; z-index: 1100; display: none; align-items: flex-start; justify-content: center; padding: 24px 20px; background: rgba(30, 4, 8, 0.72); backdrop-filter: blur(4px); overflow-y: auto; -webkit-overflow-scrolling: touch; /* прокрутка не «протекает» на страницу под подложкой */ overscroll-behavior: contain; } .modal.active { display: flex; animation: modalIn 0.22s ease; } @keyframes modalIn { from { opacity: 0; } to { opacity: 1; } } .modal__box { position: relative; background: var(--white); border-radius: 22px; width: min(560px, 100%); /* auto по вертикали: невысокое окно стоит по центру, высокое — от верхнего края, и его видно целиком при прокрутке подложки */ margin: auto; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.55); } .modal__box--wide { width: min(680px, 100%); } .modal__head { background: var(--gradient-red); color: var(--white); padding: 26px 30px 22px; position: relative; flex-shrink: 0; } .modal__head h3 { font-size: 24px; font-weight: 700; line-height: 1.2; } .modal__head p { font-size: 14px; color: rgba(255, 255, 255, 0.8); margin-top: 4px; } .modal__close { position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.2); color: var(--white); font-size: 14px; cursor: pointer; transition: background 0.25s ease; } .modal__close:hover { background: rgba(255, 255, 255, 0.36); } /* Своей прокрутки у тела окна нет — прокручивается подложка */ .modal__body { padding: 26px 30px 30px; } /* Шаги формы */ .modal__steps { display: flex; align-items: center; gap: 12px; margin-top: 18px; } .step-dot { display: flex; align-items: center; gap: 9px; font-size: 13px; color: rgba(255, 255, 255, 0.68); } .step-dot b { width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, 0.24); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; } .step-dot.is-active { color: var(--white); font-weight: 700; } .step-dot.is-active b { background: var(--white); color: var(--accent-red); } .step-line { flex: 1; height: 1px; background: rgba(255, 255, 255, 0.3); max-width: 46px; } /* Поля */ .field { display: grid; gap: 7px; margin-bottom: 16px; } .field label { font-size: 14px; font-weight: 600; color: var(--text-dark); } .field label .req { color: var(--accent-red); } .field input, .field textarea, .field select { font-family: inherit; font-size: 15px; color: var(--text-dark); padding: 13px 15px; border-radius: 12px; border: 1px solid var(--card-border); background: var(--white); outline: none; width: 100%; transition: border-color 0.25s ease, box-shadow 0.25s ease; } .field textarea { min-height: 96px; resize: vertical; } .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent-red); box-shadow: 0 0 0 3px rgba(220, 20, 60, 0.12); } .field input::placeholder, .field textarea::placeholder { color: #C6B6B8; } .check { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; color: var(--text-muted); line-height: 1.6; margin-bottom: 22px; padding: 14px 16px; border-radius: 14px; background: var(--card-soft); border: 1px solid var(--card-border); cursor: pointer; } .check input { width: 18px; height: 18px; accent-color: var(--accent-red); flex-shrink: 0; margin-top: 1px; } .check a { color: var(--accent-red); } .check .req { color: var(--accent-red); } .modal__actions { display: flex; gap: 12px; } .modal__actions .btn { flex: 1; } .modal__actions .btn-ghost { flex: 0 0 auto; padding-left: 22px; padding-right: 22px; } /* Кнопки соцсетей с иконками-картинками */ .btn-soc { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; border-radius: 11px; font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; text-decoration: none; color: var(--white); transition: transform 0.25s ease, filter 0.25s ease; } .btn-soc img { width: 17px; height: 17px; filter: brightness(0) invert(1); } .btn-soc.vk { background: #0077FF; } .btn-soc.tg { background: #29A0DA; } .btn-soc.max { background: #6E4BF0; } .btn-soc:hover { transform: translateY(-2px); } .btn-soc.is-soon { opacity: 0.5; pointer-events: none; } .modal__ok { text-align: center; padding: 12px 0 6px; } .modal__ok i { font-size: 48px; color: var(--accent-red); display: block; margin-bottom: 16px; } .modal__ok h3 { font-size: 22px; font-weight: 700; margin-bottom: 10px; } .modal__ok p { color: var(--text-muted); line-height: 1.7; margin-bottom: 20px; } @media (max-width: 560px) { .modal__head { padding: 22px 20px 18px; } .modal__body { padding: 22px 20px 26px; } } /* ============================================================ SELECT2 — светлая тема сайта ============================================================ */ .select2-container { width: 100% !important; } .select2-container--default .select2-selection--single { height: auto; padding: 12px 15px; border: 1px solid var(--card-border); border-radius: 12px; background: var(--white); transition: border-color 0.25s ease, box-shadow 0.25s ease; } .select2-container--default.select2-container--focus .select2-selection--single, .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--accent-red); box-shadow: 0 0 0 3px rgba(220, 20, 60, 0.12); } .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--text-dark); font-family: var(--display); font-size: 15px; line-height: 1.4; padding: 0; } .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #C6B6B8; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; right: 12px; } .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--text-muted) transparent transparent transparent; } .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent var(--accent-red) transparent; } /* select2 рисует список в — поднимаем над модалкой */ .select2-container--open { z-index: 1200; } .select2-dropdown { border: 1px solid var(--card-border); border-radius: 14px; overflow: hidden; box-shadow: 0 24px 48px -22px rgba(0, 0, 0, 0.35); padding: 6px; background: var(--white); } .select2-results { padding: 0; } .select2-container--default .select2-results > .select2-results__options { max-height: 220px; scrollbar-width: thin; scrollbar-color: var(--card-border) transparent; } .select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar { width: 5px; } .select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar-thumb { background: var(--card-border); border-radius: 4px; } .select2-container--default .select2-results__option { font-family: var(--display); font-size: 15px; color: var(--text-light); padding: 11px 14px; border-radius: 10px; transition: background 0.18s ease, color 0.18s ease; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--card-soft); color: var(--accent-red); } .select2-container--default .select2-results__option[aria-selected=true] { background: var(--red-soft); color: var(--accent-red); font-weight: 700; } .select2-search--dropdown .select2-search__field { font-family: var(--display); border: 1px solid var(--card-border); border-radius: 10px; padding: 9px 11px; outline: none; } .select2-search--dropdown .select2-search__field:focus { border-color: var(--accent-red); } /* Внешняя ссылка с иконкой справа */ .ext-link { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-red); text-decoration: none; border-bottom: 1px solid rgba(220, 20, 60, 0.35); transition: border-color 0.25s ease; } .ext-link i { font-size: 11px; } .ext-link:hover { border-color: var(--accent-red); } /* Иконка соцсети — без подложки, только знак (контакты, капитан, футер) */ .soc-ico, .org-soc-ico { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: transform 0.25s ease; } /* на светлом фоне — фирменным красным */ .soc-ico img, .org-soc-ico img { width: 23px; height: 23px; filter: brightness(0) saturate(100%) invert(17%) sepia(88%) saturate(4661%) hue-rotate(340deg) brightness(93%) contrast(96%); transition: filter 0.25s ease; } .soc-ico:hover, .org-soc-ico:hover { transform: translateY(-3px); } .soc-ico:hover img, .org-soc-ico:hover img { filter: brightness(0) saturate(100%) invert(45%) sepia(72%) saturate(3000%) hue-rotate(335deg) brightness(103%) contrast(101%); } .soc-ico.is-soon, .org-soc-ico.is-soon { opacity: 0.45; pointer-events: none; } /* На тёмном фоне (карточка капитана) — белым */ .captain-row__links .soc-ico img { filter: brightness(0) invert(1); } .captain-row__links .soc-ico:hover img { filter: brightness(0) invert(1); }