/* ===== PROF AI · слой правок поверх оригинала ===== Каждая правка включается своим атрибутом на , панель в lab.js их переключает. data-lab-fonts шрифты из панели data-lab-icons иконки вместо цветных точек data-lab-shadow аккуратные тени крупного текста data-lab-nav новый индикатор слайдов вместо «листай» и 01—03 в углу data-lab-s3 слайды героя: текст больше не обрезается (слайды 1 и 3) */ /* ---------- 1. Шрифты ---------- */ html[data-lab-fonts] body, html[data-lab-fonts] .club-landing { --font-head: var(--lab-head, "Jost"), system-ui, sans-serif; --font-body: var(--lab-body, "Jost"), system-ui, sans-serif; --font: var(--lab-body, "Jost"), system-ui, sans-serif; } html[data-lab-fonts] body { font-family: var(--font-body); } html[data-lab-fonts] .club-landing :is(h1, h2), html[data-lab-fonts] .club-landing .fd-foot, html[data-lab-fonts] .club-landing .libcard b { font-weight: var(--lab-hw, 300) !important; letter-spacing: var(--lab-ls, .02em) !important; } html[data-lab-fonts] .club-landing h1 { font-size: calc(clamp(30px, 4.6vw, 66px) * var(--lab-scale, 1)) !important; line-height: var(--lab-lh, 1.04) !important; } html[data-lab-fonts] .club-landing #b1 h1 span { font-size: calc(clamp(30px, 4.2vw, 72px) * var(--lab-scale, 1)); } @media (max-width: 760px) { html[data-lab-fonts] .club-landing #b1 h1 span { font-size: calc(clamp(26px, 8vw, 34px) * var(--lab-scale, 1)); } } html[data-lab-fonts] .club-landing h2 { font-size: calc(clamp(30px, 4vw, 68px) * var(--lab-scale, 1)); line-height: var(--lab-lh, 1.04); } html[data-lab-fonts] .club-landing #b1 .stage-2 h2, html[data-lab-fonts] .club-landing #b1 .stage-3 h2 { font-size: calc(34px * var(--lab-scale, 1)) !important; } html[data-lab-fonts] .club-landing h3 { letter-spacing: calc(var(--lab-ls, .02em) * .5) !important; } html[data-lab-fonts] .btn { font-weight: 500; letter-spacing: .08em; } /* ---------- 2. Тени ---------- Строки заголовка обёрнуты в overflow:hidden (анимация появления), поэтому размытие 24px обрезается по краю строки и видно «коробку». Даём узкую тень для контура букв, а читаемость берём затемнением фона под текстом. */ html[data-lab-shadow] .club-landing h1, html[data-lab-shadow] .club-landing #b1 h1 { text-shadow: 0 1px 2px rgb(4 9 20 / .45) !important; } html[data-lab-shadow] .club-landing #b1 .hero-copy .stats, html[data-lab-shadow] .club-landing #b1 .hs-copy h2, html[data-lab-shadow] .club-landing #b1 .hs-copy .lead, html[data-lab-shadow] .club-landing #b1 .num b { text-shadow: 0 1px 2px rgb(4 9 20 / .6) !important; } html[data-lab-shadow] .club-landing #b1 .hs-tag, html[data-lab-shadow] .club-landing .tag { text-shadow: 0 1px 2px rgb(4 9 20 / .8) !important; } html[data-lab-shadow] .club-landing #b5b h2 { text-shadow: 0 0 1px rgb(127 176 255 / .35) !important; } html[data-lab-shadow] .club-landing :is(h1, h2) .holo-t { filter: none !important; } /* затемнение под текстом: справа, где стоит текст слайдов */ html[data-lab-shadow] .club-landing #b1 .hero-stick::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(270deg, rgb(4 9 20 / .62) 0%, rgb(4 9 20 / .34) 30%, rgb(4 9 20 / 0) 58%); } @media (max-width: 980px) { html[data-lab-shadow] .club-landing #b1 .hero-stick::after { background: linear-gradient(0deg, rgb(4 9 20 / .8) 0%, rgb(4 9 20 / .45) 40%, rgb(4 9 20 / 0) 65%); } } /* ---------- 3. Иконки вместо цветных точек ---------- */ html[data-lab-icons] .club-landing .num { display: inline-flex; width: max-content; max-width: 100%; align-self: flex-start; } html[data-lab-icons] .club-landing .num::before { width: 15px; height: 15px; border-radius: 0; background: linear-gradient(135deg, var(--holo1, #7fb0ff), var(--holo2, #ff6a2b)); -webkit-mask: var(--lab-eyebrow-ico, url(/lab/icons/artificial-intelligence.svg)) center / contain no-repeat; mask: var(--lab-eyebrow-ico, url(/lab/icons/artificial-intelligence.svg)) center / contain no-repeat; } html[data-lab-icons] .club-landing #b1 .stage-2 .num { --lab-eyebrow-ico: url(/lab/icons/magic-wands.svg); } html[data-lab-icons] .club-landing #b1 .stage-3 .num { --lab-eyebrow-ico: url(/lab/icons/fingerprint.svg); } html[data-lab-icons] .club-landing .light .num::before { background: linear-gradient(135deg, #3b7dd8, #e0561f); } html[data-lab-icons] .club-landing #b1 .stats { gap: 12px; } html[data-lab-icons] .club-landing #b1 .stats span { gap: 10px; padding: 7px 14px 7px 7px; border-radius: 999px; background: rgb(7 10 20 / .42); border: 1px solid rgb(255 255 255 / .12); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } html[data-lab-icons] .club-landing #b1 .stats i { position: relative; width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, rgb(127 176 255 / .28), rgb(255 255 255 / .04) 70%) !important; box-shadow: inset 0 0 0 1px rgb(127 176 255 / .28) !important; } html[data-lab-icons] .club-landing #b1 .stats i::before { content: ""; position: absolute; inset: 6px; background: linear-gradient(120deg, #cfe0ff 0%, #ffffff 30%, #ffb38f 60%, #cfe0ff 100%); background-size: 250% 100%; -webkit-mask: var(--lab-ico) center / contain no-repeat; mask: var(--lab-ico) center / contain no-repeat; } html[data-lab-icons] .club-landing #b1 .stats .c1 i { --lab-ico: url(/lab/icons/community.svg); } html[data-lab-icons] .club-landing #b1 .stats .c2 i { --lab-ico: url(/lab/icons/video-lesson.svg); } html[data-lab-icons] .club-landing #b1 .stats .c3 i { --lab-ico: url(/lab/icons/calendar.svg); } @media (prefers-reduced-motion: no-preference) { html[data-lab-icons] .club-landing #b1 .stats i::before { animation: lab-sheen 5s ease-in-out infinite; } html[data-lab-icons] .club-landing #b1 .stats .c2 i::before { animation-delay: .6s; } html[data-lab-icons] .club-landing #b1 .stats .c3 i::before { animation-delay: 1.2s; } html[data-lab-icons] .club-landing #b1 .stats span { transition: transform .35s cubic-bezier(.16, 1, .3, 1), border-color .35s; } html[data-lab-icons] .club-landing #b1 .stats span:hover { transform: translateY(-2px); border-color: rgb(127 176 255 / .35); } } @keyframes lab-sheen { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } } /* ---------- 4. Индикатор слайдов ---------- Убираем «листай» и счётчик из правого нижнего угла (он наезжал на подписи). Вместо них тонкая вертикальная шкала по центру правого края. */ html[data-lab-nav] .club-landing #b1 .hero-scrub-hint { display: none !important; } html[data-lab-nav] .club-landing #b1 .hero-progress { top: 50%; bottom: auto; right: 22px; transform: translateY(-50%); flex-direction: column; gap: 12px; font: 500 10.5px/1 var(--font-mono, monospace); letter-spacing: .08em; color: rgb(255 255 255 / .38); } html[data-lab-nav] .club-landing #b1 .hero-progress i { width: 2px; height: 96px; border-radius: 2px; background: rgb(255 255 255 / .14); } html[data-lab-nav] .club-landing #b1 .hero-progress i::after { background: linear-gradient(180deg, var(--holo1, #7fb0ff), var(--holo2, #ff6a2b)); transform: scaleY(var(--p, 0)); transform-origin: 50% 0; } @media (max-width: 980px) { html[data-lab-nav] .club-landing #b1 .hero-progress { display: flex; right: 12px; top: 30%; } html[data-lab-nav] .club-landing #b1 .hero-progress i { height: 64px; } } /* подписи в углах ставим в один ряд с отступом от шкалы */ html[data-lab-nav] .club-landing #b1 .hs-tag.br, html[data-lab-nav] .club-landing #b1 .stage-3 .hs-tag.bl { right: 64px; bottom: 28px; } /* ---------- 5. Слайды 2 и 3: текст не обрезается ---------- В оригинале блок зажат между top:2% и bottom:74% с overflow:hidden, поэтому абзацы третьего слайда срезались. */ @media (min-width: 981px) { /* слайд 1: колонка шире, чтобы «зарабатывающих» не срезалось */ html[data-lab-s3] .club-landing #b1 .hero-copy { left: 50%; } html[data-lab-s3] .club-landing #b1 .stage-3 .hs-copy { top: 14%; bottom: auto; overflow: visible; left: auto; width: min(540px, 40vw); right: var(--pad, 72px); } html[data-lab-s3] .club-landing #b1 .stage-3 .lead { font-size: 15px; line-height: 1.5; max-width: 60ch; } html[data-lab-s3] .club-landing #b1 .stage-3 hr.hs-thin { border: 0; height: 1px; margin: 14px 0 16px; background: linear-gradient(90deg, rgb(255 255 255 / .45), rgb(255 255 255 / 0)); } html[data-lab-s3] .club-landing #b1 .stage-2 .hs-copy { bottom: auto; overflow: visible; } }