/* Корпоративный шрифт Skillbox — Graphik LC TT. Источник: cdn.skillbox.pro
(тот же CDN, что используется на skillbox.ru/courses/profession-cybersecurity).
Веса: 400 Regular / 500 Medium / 600 Semibold / 700 Bold.
font-display: swap — пока шрифт грузится, рендерится system-fallback из
tailwind.config.cjs sans-стека (предотвращает FOIT). */
@font-face {
font-family: 'Graphik LC TT';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('https://cdn.skillbox.pro/wbd-front/skillbox-static/general/fonts/GraphikLCTT-VA-Regular.woff2') format('woff2');
}
@font-face {
font-family: 'Graphik LC TT';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('https://cdn.skillbox.pro/wbd-front/skillbox-static/general/fonts/GraphikLCTT-VA-Medium.woff2') format('woff2');
}
@font-face {
font-family: 'Graphik LC TT';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('https://cdn.skillbox.pro/wbd-front/skillbox-static/general/fonts/GraphikLCTT-VA-Semibold.woff2') format('woff2');
}
@font-face {
font-family: 'Graphik LC TT';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('https://cdn.skillbox.pro/wbd-front/skillbox-static/general/fonts/GraphikLCTT-VA-Bold.woff2') format('woff2');
}
html {
color-scheme: dark;
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
/* Базовый тон #292929 (sb.bg) — взят с лендинга skillbox.ru/profession-
cybersecurity. Лайм-сетка и сканлайны — отдельным глобальным overlay
(sb-hexgrid + sb-scanlines в index.html), чтобы паттерн был ОДИН и тот
же снаружи и внутри центральной колонки (был баг: body 32×32 + hexgrid
24×24 — две разные сетки одновременно). */
/* Тёмная база #141414 как на hero — на ней лайм #D8FF28 играет сочно
(на прежнем светлом #292929 лайм блёк). Атмосфера (лайм-glow, hex-сетка,
сканлайны, частицы) остаётся видимой на внутренних экранах → цвет и
глубина, экран не «пустой». На hero атмосфера скрыта (landing-active). */
background-color: #141414;
}
/* На висит tailwind-класс .bg-brand-bg (#292929) — он по специфичности
перебивал правило body{} выше. Этот селектор (element+class) его побеждает
и делает базу страницы тёмной #141414, как на hero, чтобы лайм #D8FF28
играл сочно, а не блёк на сером. Остальные .bg-brand-bg-элементы (кружки,
плашки) остаются #292929 — они «светлые» акценты на тёмной странице. */
body.bg-brand-bg { background-color: #141414; }
/* Убираем подпрыгивание при ресайзе */
* {
-webkit-tap-highlight-color: transparent;
}
/* ===== Переход между экранами: мягкий слайд-вход.
Каждый шаг воронки (x-if) при появлении плавно «въезжает» снизу —
создаёт ощущение, что экран двигается от шага к шагу. Hero исключён
(у него своя композиция). Тряска/«всё хорошо» на ответах идут через
Web Animations API в app.js и этому правилу не мешают. ===== */
@keyframes fx-fade {
from { opacity: 0; }
to { opacity: 1; }
}
/* Вход секции — ТОЛЬКО прозрачность, без transform и БЕЗ fill (both/forwards).
Причина: 1) transform на секции делает её containing block для
position:fixed и роняет позицию прилипшей CTA; 2) даже opacity-анимация
с fill:both держит секцию в «filling»-состоянии → сохраняется stacking
context, и кнопка (z-100) проваливается ПОД фон-фейд (z-40). Без fill
после входа секция полностью возвращается к базовому состоянию —
ни containing block, ни stacking context не остаётся, CTA прилипает
ко дну и рисуется поверх фейда. */
.sb-funnel-root > section:not(#hero-static) {
animation: fx-fade 0.32s cubic-bezier(.22, 1, .36, 1);
}
@media (prefers-reduced-motion: reduce) {
.sb-funnel-root > section:not(#hero-static) { animation: none; }
}
/* Типографика заголовков под hero: чуть поджатый трекинг (hero h1 = -.03em).
Семейство (Graphik LC TT) уже единое — выравниваем только межбуквенный
интервал, вес заголовков не трогаем. */
.sb-funnel-root > section:not(#hero-static) h2 {
letter-spacing: -0.02em;
}
/* Pulse для мини-игры */
@keyframes pulse-glitch {
0%, 100% {
box-shadow: 0 0 0 0 rgba(255, 85, 85, 0.6);
background-color: rgba(255, 85, 85, 0.08);
}
50% {
box-shadow: 0 0 0 6px rgba(255, 85, 85, 0);
background-color: rgba(255, 85, 85, 0.20);
}
}
.animate-pulse-glitch {
animation: pulse-glitch 1.6s ease-in-out infinite;
}
/* Disable animation on prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
.animate-pulse-glitch {
animation: none;
background-color: rgba(255, 85, 85, 0.15);
}
.animate-float-rock {
animation: none;
transform: none;
}
}
/* Плавающие пиксель-частицы на всех экранах */
@keyframes drift-1 {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
50% { transform: translate(-18px, -30px) rotate(45deg); }
}
@keyframes drift-2 {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(20px, -22px); }
}
@keyframes drift-3 {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-25px); }
}
.particle {
position: fixed;
pointer-events: none;
z-index: 0;
will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
.particle {
animation: none !important;
}
}
/* Пиксельные фейерверки на экране разблокировки результата */
@keyframes pixel-firework-burst {
0% {
transform: translate(0, 0) scale(1);
opacity: 0;
}
10% { opacity: 1; }
100% {
transform: translate(var(--dx, 0), var(--dy, 0)) scale(0.4);
opacity: 0;
}
}
.firework {
position: absolute;
pointer-events: none;
width: 0;
height: 0;
z-index: 0;
}
.firework-pixel {
position: absolute;
width: 5px;
height: 5px;
margin-left: -2.5px;
margin-top: -2.5px;
background: var(--firework-color, #D8FF28);
animation: pixel-firework-burst 1.8s ease-out infinite;
animation-delay: var(--delay, 0s);
will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
.firework-pixel {
animation: none;
opacity: 0;
}
}
/* Покачивание ID-карты на экране профиля */
@keyframes float-rock {
0%, 100% { transform: rotate(-1.8deg); }
50% { transform: rotate(1.8deg); }
}
.animate-float-rock {
animation: float-rock 5s ease-in-out infinite;
transform-origin: center;
will-change: transform;
}
/* Найденный маркер фишинга — лаймовая подсветка */
.spot-found {
background: rgba(216, 255, 40, 0.18) !important;
outline: 1.5px solid #D8FF28;
outline-offset: 2px;
border-radius: 4px;
color: #D8FF28 !important;
transition: all 0.25s ease;
}
/* Подсказка после 2 промахов — красное пульсирование вокруг признака */
@keyframes spot-hint-pulse {
0%, 100% {
box-shadow: 0 0 0 0 rgba(255, 85, 85, 0);
background-color: transparent;
}
50% {
box-shadow: 0 0 0 6px rgba(255, 85, 85, 0.22);
background-color: rgba(255, 85, 85, 0.10);
}
}
.spot-hint {
animation: spot-hint-pulse 1.4s ease-in-out infinite;
border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
.spot-hint {
animation: none;
background-color: rgba(255, 85, 85, 0.14);
}
}
/* Select styling */
select {
-webkit-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 32px;
}
/* Inputs placeholder */
input::placeholder {
color: #6A6A6A;
}
/* ============================================================
ДИЗАЙН-СИСТЕМА «CYBER-SOC» — визуальные примитивы
Используются на hero-экране (и далее переиспользуются на других).
Каждый класс — атомарный визуальный элемент, без зависимостей от
конкретного контента. Идея: вместо «плоского текста» собираем
страницу из визуальных кирпичей.
============================================================ */
/* ---- 1. PANEL: карточка с угловыми брекетами (стилистика SOC-консоли) ----
Использование:
Брекеты рисуются псевдоэлементами через четыре corner-маски, чтобы
не перебивать содержимое. Цвет можно переопределить через --bracket. */
.sb-panel {
--bracket: rgba(216, 255, 40, 0.45);
position: relative;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0) 100%), #1A1A1A;
border: 1px solid #3A3A3A;
border-radius: 14px;
transition: border-color 0.2s ease, transform 0.2s ease;
}
.sb-panel:hover {
border-color: rgba(216, 255, 40, 0.5);
}
.sb-panel::before,
.sb-panel::after,
.sb-panel > .sb-bracket-bl,
.sb-panel > .sb-bracket-br {
content: '';
position: absolute;
width: 14px;
height: 14px;
border: 1.5px solid var(--bracket);
pointer-events: none;
transition: border-color 0.2s ease;
}
.sb-panel::before {
top: -1px;
left: -1px;
border-right: none;
border-bottom: none;
}
.sb-panel::after {
top: -1px;
right: -1px;
border-left: none;
border-bottom: none;
}
.sb-panel > .sb-bracket-bl {
bottom: -1px;
left: -1px;
border-right: none;
border-top: none;
}
.sb-panel > .sb-bracket-br {
bottom: -1px;
right: -1px;
border-left: none;
border-top: none;
}
.sb-panel:hover::before,
.sb-panel:hover::after,
.sb-panel:hover > .sb-bracket-bl,
.sb-panel:hover > .sb-bracket-br {
border-color: #D8FF28;
}
/* ---- 2. SCANLINES: тонкие горизонтальные полосы (CRT-эффект) ----
Применяется как .sb-scanlines (overlay-ребёнок) или
::before на контейнере. */
.sb-scanlines {
position: absolute;
inset: 0;
pointer-events: none;
background-image: repeating-linear-gradient(
0deg,
rgba(216, 255, 40, 0.025) 0px,
rgba(216, 255, 40, 0.025) 1px,
transparent 1px,
transparent 3px
);
mix-blend-mode: screen;
opacity: 0.7;
}
/* ---- 3. HEX-GRID OVERLAY ----
Атмосферный фон-сетка вместо плоского #292929. */
.sb-hexgrid {
position: absolute;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(216, 255, 40, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(216, 255, 40, 0.04) 1px, transparent 1px);
background-size: 24px 24px;
background-position: -1px -1px;
mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 70%, transparent 100%);
-webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 70%, transparent 100%);
}
/* ---- 4. TYPING CURSOR: моргающий курсор у заголовка ---- */
@keyframes sb-blink {
0%, 49% { opacity: 1; }
50%, 100% { opacity: 0; }
}
.sb-cursor {
display: inline-block;
width: 3px;
height: 1em;
background: #D8FF28;
margin-left: 6px;
vertical-align: -0.12em;
animation: sb-blink 1s steps(1) infinite;
}
/* ---- 5. STATUS-DOT: пульсирующая точка живого статуса ---- */
@keyframes sb-pulse-ring {
0% { box-shadow: 0 0 0 0 rgba(216, 255, 40, 0.6); }
70% { box-shadow: 0 0 0 6px rgba(216, 255, 40, 0); }
100% { box-shadow: 0 0 0 0 rgba(216, 255, 40, 0); }
}
.sb-dot {
display: inline-block;
width: 8px;
height: 8px;
background: #D8FF28;
border-radius: 50%;
animation: sb-pulse-ring 1.6s ease-out infinite;
}
/* ---- 5b. CTA-PULSE: мягкое «дыхание» брендового свечения вокруг кнопки.
Альтернатива стрелке — указывает интерактивность без агрессивного motion.
Цикл 2.4s, ease-out — медленнее dot-pulse, не отвлекает от чтения. */
@keyframes sb-cta-pulse {
0%, 100% {
box-shadow:
0 0 0 0 rgba(61, 59, 255, 0.45),
0 8px 28px -8px rgba(61, 59, 255, 0.45);
}
50% {
box-shadow:
0 0 0 10px rgba(61, 59, 255, 0),
0 8px 28px -8px rgba(61, 59, 255, 0.45);
}
}
.sb-cta-pulse {
animation: sb-cta-pulse 2.4s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.sb-cta-pulse {
animation: none;
box-shadow: 0 8px 28px -8px rgba(61, 59, 255, 0.45);
}
}
/* ---- 6. SOC-CONSOLE: моноширинный код-блок с номерами строк ---- */
.sb-console {
font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
font-size: 11px;
line-height: 1.7;
background: #171717;
border: 1px solid #3A3A3A;
border-radius: 12px;
overflow: hidden;
position: relative;
}
.sb-console__head {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-bottom: 1px solid #2A2A2A;
background: #1A1A1A;
}
.sb-console__head::before {
content: '';
width: 8px;
height: 8px;
background: #FF5555;
border-radius: 50%;
box-shadow: 14px 0 0 #FFB347, 28px 0 0 #D8FF28;
}
.sb-console__title {
margin-left: 32px;
color: #B8B8B8;
letter-spacing: 0.06em;
font-size: 10px;
text-transform: uppercase;
}
.sb-console__body {
padding: 10px 12px;
display: grid;
grid-template-columns: auto 1fr;
column-gap: 12px;
}
.sb-console__lineno {
color: #555;
text-align: right;
user-select: none;
white-space: pre;
}
.sb-console__code {
white-space: pre;
color: #E0E0E0;
}
.sb-token-key { color: #D8FF28; }
.sb-token-warn { color: #FFB347; }
.sb-token-alert { color: #FF5555; font-weight: 600; }
.sb-token-mute { color: #6A6A6A; }
/* ---- 7b. HERO-IMG: композитная картинка в hero.
PNG со своим alpha-каналом — скруглённые углы и тень уже зашиты
в файл как прозрачные пиксели. Никаких CSS-mask, border-radius
или clip-path — картинка сама по себе имеет нужную форму.
- aspect-ratio 1321/1191 на frame — соотношение исходного PNG,
стабильный sizing на любых ширинах, без layout shift.
- object-contain на img — сохраняет alpha-края без обрезки.
- translateY(8%) — только на lg+ (картинка справа от текста). */
.sb-hero-img {
position: relative;
}
.sb-hero-img__frame {
position: relative;
aspect-ratio: 1309 / 1179;
overflow: hidden;
border-radius: 28px;
z-index: 1;
/* iOS Safari fallback: overflow:hidden + border-radius + mix-blend-mode
scan-line + transform-анимация — связка протекает в WebKit.
clip-path клипит надёжно, isolation:isolate форсит свой composit-
контекст, и mix-blend-mode дочернего scan-line больше не ломает clip. */
clip-path: inset(0 round 28px);
isolation: isolate;
}
.sb-hero-img__pic {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
position: relative;
z-index: 1;
}
/* translateY убран: создавал асимметрию низов между картинкой
и текст-блоком слева. Низы теперь выровнены по сетке. */
/* === HERO OVERLAYS (landing «жизнь» поверх статичного hero-фото) ===
Цель: с первого взгляда юзеру читалось, что внутри — живая игровая
симуляция, а не статический лендинг. Три слоя:
1. halo — пульсирующее лаймовое свечение позади картинки;
2. scan — вертикальная полоса-«радар», бежит по картинке;
3. live — корнер-бейдж «SOC · Онлайн» с пульсирующей точкой;
4. ticker — cycling-чип с тремя alert-сообщениями, показывает превью
задач (фишинг → аномалия → пароль), стаггер на 6s-цикле.
Всё pure-CSS, без новых ассетов и без JS. */
.sb-hero-img__halo {
position: absolute;
/* inset снизу увеличен с 8% до 18% — halo glow раньше тоже немного
просвечивал ниже нижней границы фрейма (особенно при scale(1.08)
на пике пульса). Теперь свечение визуально удерживается в зоне
фото и не «течёт» к UTP-пилам. Боковой bleed -6% сохранён —
glow аккуратно расширяется по бокам, читается как «halo». */
inset: 8% -6% 18% -6%;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(216, 255, 40, 0.22), rgba(216, 255, 40, 0) 70%);
filter: blur(32px);
pointer-events: none;
z-index: 0;
/* Статичное мягкое свечение вместо пульса — премиально, без «мигания». */
opacity: 0.8;
}
.sb-hero-img__scan {
/* Бегущая «радар»-полоса убрана — это было то самое старое зелёное
мигание. Композиция спокойнее и премиальнее. */
display: none;
position: absolute;
/* inset 0 0 8% 0 — оставляем 8% gap снизу как hard-стопор: даже если
clip-path внезапно отрубится, bright-stripe gradient'а физически
не доезжает до нижней границы фрейма. */
inset: 0 0 8% 0;
pointer-events: none;
z-index: 2;
background: linear-gradient(
180deg,
transparent 0%,
rgba(216, 255, 40, 0) 78%,
rgba(216, 255, 40, 0.22) 92%,
rgba(216, 255, 40, 0.55) 100%
);
mix-blend-mode: screen;
animation: sb-hero-scan 3.4s linear infinite;
}
@keyframes sb-hero-scan {
/* Кап translateY на -20% (вместо 0%) — bright-полоса доезжает до ~80%
высоты фрейма (нижняя зона фото — стол, ноги) и тихо растворяется,
не подходя к самому краю. Плюс fade начинается раньше (75%) для
визуального запаса перед клипом. */
0% { transform: translateY(-100%); opacity: 0; }
10% { opacity: 1; }
75% { opacity: 1; }
100% { transform: translateY(-20%); opacity: 0; }
}
.sb-hero-img__live {
position: absolute;
top: 10px;
left: 10px;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 999px;
background: rgba(15, 15, 15, 0.78);
border: 1px solid rgba(216, 255, 40, 0.45);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
font-size: 9.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 700;
color: #D8FF28;
}
@media (min-width: 640px) {
.sb-hero-img__live { font-size: 10.5px; padding: 5px 11px; }
}
.sb-hero-img__live-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: #D8FF28;
box-shadow: 0 0 7px rgba(216, 255, 40, 0.9);
}
/* Ticker: контейнер для трёх quest-chip'ов. Лежит НА самой картинке
(опаковая зона), не в дарк-полосе под фото, чтобы не вставать в один
зрительный ряд с UTP-пилами снизу. Каждый чип — название реальной
задачи из игры + пульс-точка (live-маркер). Без счётчика 1/5: юзер
не воспринимает их как «шаги воронки», а как «вот что внутри прилетит». */
.sb-hero-img__ticker {
position: absolute;
left: 10px;
right: 10px;
bottom: 22%;
height: 32px;
z-index: 3;
pointer-events: none;
}
.sb-hero-img__quest {
position: absolute;
left: 50%;
bottom: 0;
display: inline-flex;
align-items: center;
gap: 9px;
padding: 7px 13px 7px 11px;
border-radius: 6px;
background: rgba(12, 12, 12, 0.94);
border-left: 3px solid #D8FF28;
box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.8);
white-space: nowrap;
opacity: 0;
transform: translate(-50%, 14px);
animation: sb-alert-cycle 10s ease-in-out infinite;
}
.sb-hero-img__quest-icon {
width: 14px;
height: 14px;
color: #D8FF28;
flex-shrink: 0;
/* Subtle live-pulse — глаз чувствует «alive», но не дёргается.
Хайлайт + drop-shadow создают лайм-свечение без отдельного дота. */
filter: drop-shadow(0 0 4px rgba(216, 255, 40, 0.55));
animation: sb-quest-icon-pulse 1.6s ease-in-out infinite;
}
@keyframes sb-quest-icon-pulse {
0%, 100% { opacity: 0.85; }
50% { opacity: 1; }
}
.sb-hero-img__quest-name {
font-size: 11.5px;
font-weight: 600;
color: #FFFFFF;
letter-spacing: 0.01em;
}
@media (min-width: 640px) {
.sb-hero-img__quest-icon { width: 15px; height: 15px; }
.sb-hero-img__quest-name { font-size: 12.5px; }
}
.sb-hero-img__alert--1 { animation-delay: 0s; }
.sb-hero-img__alert--2 { animation-delay: 2s; }
.sb-hero-img__alert--3 { animation-delay: 4s; }
.sb-hero-img__alert--4 { animation-delay: 6s; }
.sb-hero-img__alert--5 { animation-delay: 8s; }
@keyframes sb-alert-cycle {
0% { opacity: 0; transform: translate(-50%, 14px); }
5% { opacity: 1; transform: translate(-50%, 0); }
28% { opacity: 1; transform: translate(-50%, 0); }
33% { opacity: 0; transform: translate(-50%, -8px); }
100% { opacity: 0; transform: translate(-50%, -8px); }
}
/* reduced motion: всё затихает, halo и scan останавливаются, quest-чипы
остаются видны статично (последний из трёх — «5/5 · Карьерный итог»,
позитивный финал). */
@media (prefers-reduced-motion: reduce) {
.sb-hero-img__halo,
.sb-hero-img__scan,
.sb-hero-img__live-dot,
.sb-hero-img__quest-icon { animation: none; }
.sb-hero-img__scan { display: none; }
.sb-hero-img__quest { animation: none; opacity: 0; }
.sb-hero-img__quest.sb-hero-img__alert--3 { opacity: 1; transform: translate(-50%, 0); }
}
/* ---- 7. SPARKLINE: микро-график у статов ---- */
.sb-sparkline {
display: inline-block;
vertical-align: -3px;
width: 56px;
height: 18px;
margin-left: 6px;
opacity: 0.85;
}
.sb-sparkline path {
fill: none;
stroke: #D8FF28;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Source citations — subtle, secondary, link-on-hover */
.source-link {
display: inline-block;
margin-top: 12px;
font-size: 12px;
line-height: 1.4;
color: #7A7A7A;
text-decoration: none;
border-bottom: 1px dotted rgba(154, 154, 154, 0.35);
padding-bottom: 1px;
transition: color 0.15s ease, border-color 0.15s ease;
}
.source-link:hover {
color: #B8B8B8;
border-bottom-color: rgba(184, 184, 184, 0.6);
}
.source-link::after {
content: '↗';
margin-left: 4px;
font-size: 10px;
opacity: 0.6;
}
/* Glossary footnote — расшифровка SOC/ИБ для тех, кто не знает аббревиатуру.
Применяется на мотивационных экранах (Q4-other, Q5, Q6-late), socdoc, phishing case.
Не применяется на слайде архетипа/направлений развития: там профильная аудитория
уже знакома с терминами, а сноски засоряли бы плотный карьерный список. */
.glossary-note {
display: block;
margin-top: 12px;
font-size: 12px;
line-height: 1.45;
color: #7A7A7A;
font-style: italic;
}
.glossary-note::before {
content: '* ';
opacity: 0.7;
}
/* Тап-feedback на любой sb-cta-sticky: моментальная визуальная реакция
даже до того, как Alpine забиндился. На медленной мобильной сети
юзер тапает, ждёт ~1с до загрузки JS, не видит отклика и тапает ещё
раз. Этот CSS работает на pure :active — без JS вообще. */
.sb-cta-sticky:active {
transform: scale(0.97);
filter: brightness(0.9);
transition-duration: 0ms;
}
/* ============================================================
MOBILE FIXED CTA — primary-кнопка «Дальше» ВСЕГДА видна
на телефоне, прикреплена ко дну вьюпорта (position: fixed).
На десктопе кнопка остаётся в обычном flex-потоке.
Sticky не подходит, потому что начинает «прилипать» только
когда натуральная позиция кнопки уже доскроллена до низа
вьюпорта — а на длинном hero она изначально лежит ниже
первого экрана и юзер вообще не видит CTA до скролла.
Решение: на mobile CTA принимает width = w-full контейнера
максимум 840px, центрируется через left/right 20px, прижата
к bottom 12px (safe-area-inset для iPhone notch учтён).
Псевдо-фон под кнопкой (через box-shadow со спредом) даёт
мягкий фейд скроллящегося контента над кнопкой.
pb-24 на главной обёртке (.sb-funnel-root) на мобайле
резервирует место под фиксированную кнопку, чтобы последний
контент не уезжал под неё.
============================================================ */
@media (max-width: 767px) {
/* Тройной класс + !important — защита от Tailwind preflight и
inline-style утечек.
iOS Safari fix: -webkit-appearance: none + appearance: none.
Tailwind preflight ставит -webkit-appearance: button на ВСЕ button-
элементы (особенно type=submit) — это форсит native iOS-стиль,
который в Safari 16+ перекрывает кастомный background-color, и
юзер видит только тень. Сбрасываем appearance и заодно явно красим
bg + color (страховка от Safari-кэша native styling).
Width через left/right + auto — на iOS Safari 17 пробовали
translateX-центрирование, помогло хуже. Возвращаемся к классике. */
.sb-cta-sticky.sb-cta-sticky.sb-cta-sticky {
position: fixed !important;
/* 20px (вместо 14px) + safe-area: жёстко поднимаем над bottom-toolbar'ом
iOS Safari. На прошлом значении (14px+34px ≈ 48px) кнопка на
некоторых iPhone попадала под полупрозрачную toolbar-плашку и юзер
видел только тень. */
bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
left: 16px !important;
right: 16px !important;
width: auto !important;
max-width: none !important;
/* translateZ(0) — форсим отдельный compositing-слой на iOS Safari.
Без него position:fixed + z-index могли «пропадать» под градиент-
фейдом (::after) из-за порядка paint'а у вложенных stacking-
контекстов. С transform:translateZ кнопка точно в верхнем слое. */
transform: translateZ(0) !important;
-webkit-transform: translateZ(0) !important;
z-index: 100 !important;
/* Явная видимость — защита от inherit visibility:hidden / opacity:0
от ancestor'ов (на phone-blur экран обёрнут x-transition'ами). */
visibility: visible !important;
opacity: 1 !important;
-webkit-appearance: none !important;
appearance: none !important;
background-color: rgb(61, 59, 255) !important;
color: #fff !important;
border: 0 !important;
box-shadow: 0 12px 32px -10px rgba(61, 59, 255, 0.65);
}
.sb-cta-sticky.sb-cta-sticky.sb-cta-sticky:hover {
background-color: rgb(89, 87, 255) !important;
}
}
/* Desktop sticky variant — для CTA, которые должны быть sticky на всех
viewport (например phone-gate). На мобайле modifier ничего не меняет,
на десктопе — fixed bottom centered, ограничен по ширине wrapper'а. */
@media (min-width: 768px) {
.sb-cta-sticky--desktop.sb-cta-sticky--desktop {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
width: calc(100% - 40px);
max-width: 560px;
z-index: 100;
box-shadow: 0 12px 32px -10px rgba(61, 59, 255, 0.65);
}
}
@media (max-width: 767px) {
/* Резерв снизу под зафиксированную кнопку (button ~52px + 20px gap +
safe-area + воздух = ~108px). Чуть увеличили после поднятия bottom
самой кнопки до 20px (см. .sb-cta-sticky выше) — синхрон, чтобы
последний контент не уезжал под кнопку. */
.sb-funnel-root {
padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px)) !important;
}
/* Градиентный фейд под фикс-CTA. Содержимое, скроллящееся под кнопкой,
мягко растворяется в фоне sb.bg (#292929). Использует position:fixed
на корне funnel — фейд показывается на всех шагах, не зависит от шаблона. */
.sb-funnel-root::after {
content: '';
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: calc(108px + env(safe-area-inset-bottom, 0px));
background: linear-gradient(
to top,
#141414 0%,
#141414 38%,
rgba(20, 20, 20, 0.85) 65%,
rgba(20, 20, 20, 0.4) 85%,
rgba(20, 20, 20, 0) 100%
);
pointer-events: none;
z-index: 40;
}
/* На шагах БЕЗ sticky-CTA (choice / sim-offer / avatar-choice — выбор
ответа происходит кликом по самим карточкам-вариантам) фикс-кнопки
внизу нет, но псевдо-фейд продолжал «висеть» поверх последних
карточек-ответов: визуально это читалось как чёрный sticky-баннер,
перекрывающий клик. Убираем фейд и сбрасываем pb-резерв под
несуществующую кнопку — варианты ответов остаются полностью видимы. */
.sb-funnel-root--no-cta::after {
display: none;
}
.sb-funnel-root--no-cta.sb-funnel-root {
padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
}
}
/* ============================================================
MOBILE HERO TAGS — компактные chip-теги в inline-потоке.
На мобайле — flex-wrap по контенту (тег = размер слова, не 50%
ширины), маленький текст, лёгкий padding — выглядят как «теги
статьи», не доминируют над заголовком и картинкой.
На md+ возвращаемся к крупным пиллам, как на десктопе.
============================================================ */
.sb-hero-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
@media (min-width: 768px) {
.sb-hero-tags {
gap: 8px;
}
}
.sb-hero-tags__pill {
display: inline-flex;
align-items: center;
white-space: nowrap;
}
/* ============================================================================
ЛЕНДИНГ «С НУЛЯ» — Skillbox-айдентика в тёмной теме.
Фирменные приёмы из identity guide: крупный display-заголовок,
лайм-маркер на слове, градиентные блобы (свечение), eyebrow-лейбл,
слим-ряд ценности вместо SaaS-сетки карточек.
Всё на обычном CSS (не arbitrary-классы Tailwind) → применяется
гарантированно, без зависимости от собранного tailwind.built.css.
Скоуп #hero-static — на остальные (тёмные) шаги воронки не влияет.
============================================================================ */
/* Крупный display-заголовок: clamp даёт надёжный отклик без Tailwind-сборки. */
.sb-hero-h1 {
font-size: clamp(34px, 8.5vw, 64px);
line-height: 1.02;
font-weight: 700;
letter-spacing: -0.015em;
}
/* Лайм-маркер «выделение словом» — фирменный приём Skillbox. */
.sb-mark {
background: #D8FF28;
color: #0A0A0A;
padding: 0.02em 0.18em;
border-radius: 0.12em;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
/* Eyebrow-лейбл над заголовком (лайм-плашка-капс). */
.sb-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #D8FF28;
background: rgba(216, 255, 40, 0.08);
border: 1px solid rgba(216, 255, 40, 0.30);
border-radius: 999px;
padding: 6px 12px;
}
.sb-eyebrow__dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #D8FF28;
}
/* Слим-ряд ценности — одной строкой, лайм-иконки, без карточек-сетки. */
.sb-valrow {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 18px;
}
.sb-valrow__item {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 500;
color: #D6D6D6;
}
.sb-valrow__item svg {
width: 17px;
height: 17px;
color: #D8FF28;
flex-shrink: 0;
}
.sb-valrow__sep {
width: 4px;
height: 4px;
border-radius: 50%;
background: #4A4A4A;
}
/* ============================================================================
Кастомный курсор для draw-spot задачи. Узнаваемый карандаш как в редакторах:
лайм-корпус + белое острие + светло-серый торец. На тёмном фоне страницы
(#292929) и email-плашки (#171717) все три элемента читаются: лайм яркий,
белое острие — максимальный контраст (там же hotspot), светлый торец видим.
Рисуется горизонтально и поворачивается на 45° через rotate.
Hotspot (6,6) — на острие после поворота. Fallback — crosshair.
============================================================================ */
.sb-cursor-brush {
cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%3E%3Cg%20transform='rotate(45%2016%2016)'%20stroke='%230A0A0A'%20stroke-width='1.4'%20stroke-linejoin='round'%3E%3Crect%20x='8'%20y='13'%20width='14'%20height='6'%20fill='%23D8FF28'/%3E%3Cpolygon%20points='2,16%208,13%208,19'%20fill='%23FFFFFF'/%3E%3Crect%20x='22'%20y='13'%20width='4'%20height='6'%20fill='%23E8E8E8'/%3E%3C/g%3E%3C/svg%3E") 6 6, crosshair;
}
/* ============================================================================
REDESIGN HERO (первый экран) — перенос из redesign-hero.html.
Самодостаточный блок: все токены и стили скоупятся под .hero-rd / .fact,
чтобы не влиять на остальные экраны воронки. Шрифт — корпоративный
Graphik LC TT (уже подключён), лайм-акцент #D8FF28 как в финале макета.
keyframes переименованы (rd-*) — чтобы НЕ перебить tailwind-овский `pulse`.
============================================================================ */
.hero-rd, .fact {
--zone: #292929; /* hero-фрейм — светлее фона #141414 */
--card: #1A1A1A; /* карточки-панели внутри фрейма */
--primary: #3D3BFF;
--lime: #D8FF28;
--r-sm: 12px; --r-md: 18px; --r-lg: 26px; --r-pill: 999px;
--s-xs: 8px; --s-sm: 12px; --s-md: 16px; --s-lg: 24px; --s-xl: 32px; --s-2xl: 48px;
--ease: cubic-bezier(.22,1,.36,1);
--hf: 'Graphik LC TT','Graphik','Segoe UI',sans-serif;
--mono: ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
}
/* На лендинге (hero) — чистый плоский тёмный фон #141414 + скрытая атмосфера.
На остальных экранах атмосфера (лайм-glow, частицы, hex-сетка, сканлайны)
ВИДНА — она даёт фирменный цвет/глубину (лайм уже унифицирован на #D8FF28). */
html.landing-active body { background-color: #141414; }
html.landing-active .sb-atmo,
html.landing-active .sb-atmo > * { display: none !important; }
html.landing-active .sb-funnel-root { max-width: 1160px; }
/* На лендинге зазор логотип→фрейм короче, как в макете (header mb-8/10 общий
для всех шагов воронки — здесь скоупим только лендинг). */
html.landing-active header { margin-bottom: 16px; }
.hero-rd { font-family: var(--hf); }
.hero-rd .hero-zone { background: var(--zone); border-radius: var(--r-lg); padding: clamp(28px,3.6vw,48px); }
.hero-rd .hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px,3vw,40px); align-items: center; }
@media (max-width: 860px) { .hero-rd .hero { grid-template-columns: 1fr; gap: var(--s-lg); } }
.hero-rd .intro { padding-left: 14px; }
@media (max-width: 860px) { .hero-rd .intro { padding-left: 0; } }
.hero-rd .eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600;
letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.hero-rd .eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); }
.hero-rd h1 { margin-top: 16px; font-size: clamp(32px,4.2vw,46px); line-height: 1.05; font-weight: 600; letter-spacing: -.03em; color: #fff; }
.hero-rd .sub { margin-top: 18px; max-width: 34ch; font-size: clamp(15px,1.5vw,17px); font-weight: 400; color: #fff; text-wrap: balance; }
.hero-rd .sub strong { font-weight: 600; color: #fff; }
.hero-rd .cta { display: flex; width: 100%; align-items: center; justify-content: center; gap: 10px; margin-top: var(--s-lg);
background: var(--primary); color: #fff; border: 0; cursor: pointer; font-family: var(--hf);
font-weight: 600; font-size: clamp(17px,1.7vw,19px); padding: 19px 28px; border-radius: var(--r-pill);
-webkit-appearance: none; appearance: none; text-decoration: none; box-shadow: 0 8px 24px rgba(61,59,255,.30);
transition: box-shadow var(--ease) 220ms, transform var(--ease) 160ms; }
.hero-rd .cta:hover { transform: translateY(-1px); box-shadow: 0 0 36px rgba(61,59,255,.65), 0 12px 32px rgba(61,59,255,.5); }
.hero-rd .cta:active { transform: translateY(0); }
.hero-rd .cta-note { margin-top: 12px; display: flex; justify-content: center; align-items: center; gap: 8px 14px; flex-wrap: wrap;
font-size: 13px; color: rgba(255,255,255,.7); }
.hero-rd .cta-note .gift { display: inline-flex; align-items: center; gap: 6px; color: #fff; }
.hero-rd .cta-note .gift svg { width: 15px; height: 15px; flex: none; color: var(--lime); }
.hero-rd .cta-note .sep { opacity: .35; }
.hero-rd .proof { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.hero-rd .avatars { display: flex; }
.hero-rd .avatars span { width: 28px; height: 28px; border-radius: 50%; background: #000 center/cover no-repeat;
border: 2px solid var(--zone); margin-left: -9px; }
.hero-rd .avatars span:first-child { margin-left: 0; }
.hero-rd .proof p { font-size: 13px; color: #fff; }
.hero-rd .proof b { font-weight: 700; }
.hero-rd .rating { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; color: rgba(255,255,255,.75); }
.hero-rd .rating .star { color: var(--lime); }
.hero-rd .rating b { font-weight: 700; color: #fff; }
.hero-rd .visual { position: relative; border-radius: var(--r-md);
/* clip-path вместо overflow:hidden — в iOS Safari связка
border-radius + mix-blend-mode + transform-анимация протекает за
скругление; clip-path клипит надёжно, isolation форсит свой
composite-контекст (рецепт с прод-hero). */
clip-path: inset(0 round var(--r-md)); isolation: isolate; }
.hero-rd .visual img { display: block; width: 100%; height: auto; border-radius: var(--r-md); }
/* ── Сканирующий «лазер» по hero-фото (перенос с прод-hero) ─────────────────
Лаймовая полоса-градиент бежит сверху вниз и растворяется, не доезжая
до нижнего края (низ фото — стол, не «сканируем» мебель). */
.hero-rd .visual .scan { position: absolute; inset: 0 0 8% 0; pointer-events: none; z-index: 2;
background: linear-gradient(180deg,
transparent 0%,
rgba(216,255,40,0) 78%,
rgba(216,255,40,.20) 92%,
rgba(216,255,40,.5) 100%);
mix-blend-mode: screen;
animation: rd-scan 3.4s linear infinite; }
@keyframes rd-scan {
0% { transform: translateY(-100%); opacity: 0; }
10% { opacity: 1; }
75% { opacity: 1; }
100% { transform: translateY(-20%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .hero-rd .visual .scan { display: none; } }
.hero-rd .hero-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s-sm); margin-top: var(--s-lg); }
@media (max-width: 760px) { .hero-rd .hero-cards { grid-template-columns: 1fr; } }
.hero-rd .zcard { background: var(--card); color: #fff; border-radius: var(--r-md); padding: 13px 14px; display: flex; flex-direction: column; gap: 6px; }
.hero-rd .zcard .ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: #fff; }
.hero-rd .zcard .ico img { width: 18px; height: 18px; display: block; }
.hero-rd .zcard .ico svg { width: 18px; height: 18px; display: block; }
.hero-rd .zcard .ft { font-size: 14px; font-weight: 600; line-height: 1.2; }
.hero-rd .zcard .fs { font-size: 12px; font-weight: 400; line-height: 1.3; color: rgba(255,255,255,.7); }
.hero-rd .zcard.result { background: var(--lime); color: #000; }
.hero-rd .zcard.result .fs { color: rgba(0,0,0,.72); }
/* Мобайл: карточка горизонтальная — иконка слева, текст справа (как на
лендингах Skillbox). Вертикальная раскладка (иконка над текстом) на полной
ширине экрана давала высокую карточку с пустым правым краем.
Блок стоит ПОСЛЕ базовых .zcard-правил — иначе проигрывает по каскаду. */
@media (max-width: 760px) {
.hero-rd .zcard { display: grid; grid-template-columns: auto 1fr;
column-gap: 13px; row-gap: 3px; align-items: center; padding: 14px 16px; }
.hero-rd .zcard .ico { grid-row: 1 / 3; width: 34px; height: 34px; border-radius: 10px; }
.hero-rd .zcard .ico img, .hero-rd .zcard .ico svg { width: 20px; height: 20px; }
}
/* ── Плавающий факт-виджет (виден только на лендинге) ───────────────────────── */
.fact { position: fixed; right: clamp(14px,2vw,26px); bottom: clamp(14px,2vw,26px); width: 308px;
max-width: calc(100vw - 28px); background: #1C1C1F; border: 1px solid rgba(255,255,255,.12);
border-radius: 18px; padding: 16px 16px 14px; color: #fff; z-index: 60;
font-family: var(--hf); box-shadow: 0 18px 48px rgba(0,0,0,.5);
display: none; animation: rd-factIn .55s var(--ease) .9s both; }
html.landing-active .fact { display: block; }
.fact.fact--closed { display: none !important; }
@keyframes rd-factIn { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
.fact__close { position: absolute; top: 12px; right: 12px; width: 24px; height: 24px; border: 0; border-radius: 50%;
background: rgba(255,255,255,.08); color: rgba(255,255,255,.7); font-size: 16px; line-height: 1; cursor: pointer; display: grid; place-items: center;
transition: background var(--ease) 160ms; }
.fact__close:hover { background: rgba(255,255,255,.16); }
.fact__head { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600;
letter-spacing: .02em; color: #fff; margin-bottom: 12px; }
.fact__ic { width: 23px; height: 23px; border-radius: 7px; background: var(--lime); color: #0E0E10; display: grid; place-items: center; flex: none; }
.fact__ic svg { width: 14px; height: 14px; }
.fact__claim { font-size: 14px; font-weight: 600; line-height: 1.32; letter-spacing: -.01em; margin-bottom: 12px; }
.fact__stats { display: flex; gap: 18px; }
.fact__stats .k { display: block; font-size: 11px; color: rgba(255,255,255,.6); }
.fact__stats .v { display: block; margin-top: 2px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.fact__stats .v.hl { color: var(--lime); }
.fact__src { margin-top: 11px; font-size: 10.5px; color: rgba(255,255,255,.42); }
@media (prefers-reduced-motion: reduce) { .fact { animation: none; } }
/* Мобайл: fixed-виджет на реальных телефонах ВСЕГДА конфликтует со sticky
CTA (перекрыт кнопкой или ест пол-экрана). Решение: на мобайле виджет
не плавает — встаёт в поток страницы после hero-фрейма и скроллится
вместе с контентом, виден целиком. Типографика ужата до чипа. */
@media (max-width: 767px) {
.fact { position: static; width: auto; max-width: none; margin-top: 12px;
padding: 12px 14px 11px; border-radius: 16px;
animation: rd-factIn .55s var(--ease) .3s both; }
.fact__head { font-size: 11px; margin-bottom: 7px; }
.fact__ic { width: 20px; height: 20px; border-radius: 6px; }
.fact__ic svg { width: 12px; height: 12px; }
.fact__claim { font-size: 13px; margin-bottom: 8px; }
.fact__stats { gap: 16px; }
.fact__stats .k { font-size: 10px; }
.fact__stats .v { font-size: 13.5px; }
.fact__src { margin-top: 7px; font-size: 9.5px; }
.fact__close { top: 9px; right: 9px; width: 22px; height: 22px; }
}