/* ================================================================== TGBLAST — акция «бесплатно до 31 декабря 2026». Общий файл для всех страниц сайта. Подключается после landing.css (и guides.css) и живёт на их токенах body.lp: лайм на тёмном, моно-подписи, волосяные линии, плоско. Промо размечено data-promo, обычные версии — data-promo-off hidden. promo.js после 2027-01-01 00:00 МСК прячет первое и показывает второе. Полоса над шапкой — между маркерами , в сгенерированных страницах её пишет build_guides_pages.promo_bar(). ================================================================== */ /* ---------- переключение промо / обычной версии ---------- */ /* hidden обязан побеждать display из классов вёрстки (.nt, .lp-promo-bar…) */ [data-promo][hidden],[data-promo-off][hidden],[data-promo-left][hidden]{display:none !important} /* promo.js ставит класс на ещё в — после конца акции промо не мигает */ html.promo-over [data-promo]{display:none !important} .pr-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ================================================================== 1. Полоса над шапкой — на каждой странице ================================================================== */ .lp .pr-bar{ display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:nowrap; padding:9px 20px;min-height:50px; background:var(--accent);color:var(--accent-ink); border-bottom:1px solid rgba(10,10,11,.2); font-size:14.5px;font-weight:600;line-height:1.3;text-align:left; transition:background .15s ease; } .lp .pr-bar:hover{background:var(--accent-dim);filter:none} .lp .pr-bar:focus-visible{outline:2px solid var(--accent-ink);outline-offset:-5px} .pr-bar-tag{ flex:none;display:inline-flex;align-items:center;gap:6px; padding:6px 10px 6px 8px;border-radius:var(--r-sm); background:var(--accent-ink);color:var(--accent); font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1; } .lp .pr-bar-tag svg{width:14px;height:14px;stroke-width:2.2} .pr-bar-msg{min-width:0} .pr-bar-msg b{font-weight:800} .pr-bar-rest{opacity:.72} .pr-bar-cta{ flex:none;display:inline-flex;align-items:center;gap:7px; padding:8px 13px;border-radius:var(--r-sm); background:var(--accent-ink);color:var(--accent); font-size:13px;font-weight:700;line-height:1;white-space:nowrap; } .lp .pr-bar-cta svg{width:15px;height:15px;stroke-width:2.4;transition:transform .15s ease} .lp .pr-bar:hover .pr-bar-cta svg{transform:translateX(3px)} @media (max-width:900px){ .pr-bar-rest{display:none} } @media (max-width:720px){ /* узко: без «TGBLAST» — остаётся «Бесплатно до 31 декабря 2026» */ .pr-bar-brand{display:none} .pr-bar-msg b{display:inline-block} .pr-bar-msg b::first-letter{text-transform:uppercase} } @media (max-width:560px){ /* на телефоне: «АКЦИЯ · Бесплатно до 31 декабря 2026 · →», без обрезки текста */ .lp .pr-bar{gap:10px;padding:8px 10px 8px 14px;min-height:46px;justify-content:space-between;font-size:13.5px} .pr-bar-msg{flex:1 1 auto} .pr-bar-tag{padding:6px 8px} } @media (max-width:620px){ /* кнопка сжимается до стрелки — вся полоса и так ссылка на регистрацию */ .pr-bar-cta{padding:8px 9px} .pr-bar-cta-t{display:none} } @media (max-width:380px){ .lp .pr-bar{gap:8px;padding-left:12px;font-size:13px} .lp .pr-bar-tag svg{display:none} } /* ================================================================== 2. Главная: блок акции у заголовка героя ================================================================== */ .pr-hero{ display:flex;align-items:center;gap:16px; margin:24px 0 0;padding:16px 20px 16px 16px;max-width:580px; background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 55%,transparent); border-radius:var(--r-lg); } .pr-hero-ico{flex:none;width:52px;height:52px;display:grid;place-items:center;border-radius:var(--r);background:var(--accent);color:var(--accent-ink)} .lp .pr-hero-ico svg{width:26px;height:26px;stroke-width:2} .pr-hero-body{min-width:0} .pr-hero-k{ display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px; font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent); } .pr-hero-t{display:block;margin-top:6px;font-size:clamp(21px,2.5vw,28px);font-weight:800;letter-spacing:-.5px;line-height:1.12;color:var(--ink)} .pr-hero-t em{font-style:normal;color:var(--accent)} .pr-hero-s{display:block;margin-top:6px;font-size:14px;line-height:1.45;color:var(--ink-soft)} .lp-hero .pr-hero.fade{animation-delay:.11s} /* счётчик «осталось N дней» — заполняет promo.js, без него просто не виден */ .pr-left{ display:inline-flex;align-items:center;gap:6px; padding:3px 8px;border-radius:4px; border:1px solid color-mix(in srgb,var(--accent) 35%,transparent); font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:none;color:var(--ink); } .pr-left::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;animation:prBlink 1.4s ease-in-out infinite} @keyframes prBlink{0%,100%{opacity:1}50%{opacity:.25}} /* короткая строка акции под кнопками посадочных страниц */ .pr-line{display:flex;align-items:center;gap:10px;margin:16px 0 0;font-size:14px;font-weight:600;color:var(--ink);line-height:1.4} .pr-line-ico{flex:none;width:28px;height:28px;display:grid;place-items:center;border-radius:var(--r-sm);background:var(--accent);color:var(--accent-ink)} .lp .pr-line-ico svg{width:15px;height:15px;stroke-width:2.2} .pr-line em{font-style:normal;color:var(--accent)} /* ================================================================== 3. Главная: блок цены ================================================================== */ .pr-price-k{ display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-bottom:16px; font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent); } .pr-price-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 16px} .pr-price-row b{font-family:var(--mono);font-size:clamp(56px,8vw,88px);font-weight:600;letter-spacing:-.05em;word-spacing:-.4em;line-height:.9;color:var(--accent)} .pr-price-row span{font-size:clamp(19px,2.3vw,26px);font-weight:800;letter-spacing:-.4px;line-height:1.15;color:var(--ink)} .pr-price-old{margin-top:14px;font-family:var(--mono);font-size:15px;color:var(--ink-faint)} .pr-price-old s{text-decoration-thickness:2px;text-decoration-color:color-mix(in srgb,var(--danger) 75%,transparent)} .pr-price-next{margin:6px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink-soft)} .pr-price-next b{color:var(--ink);font-weight:700} .pay-box.pr-box{border-color:var(--accent);background:var(--accent-soft)} .pay-box.pr-box h3{color:var(--accent)} /* ================================================================== 4. Гайды: плашка акции в разделах про регистрацию и оплату ================================================================== */ .pr-note{ display:flex;align-items:flex-start;gap:14px;margin:0 0 28px;padding:16px 18px; background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 55%,transparent); border-radius:var(--r); } .pr-note-ico{flex:none;width:38px;height:38px;display:grid;place-items:center;border-radius:var(--r-sm);background:var(--accent);color:var(--accent-ink)} .lp .pr-note-ico svg{width:19px;height:19px;stroke-width:2} .pr-note-body{min-width:0} .pr-note-body b{display:block;font-size:15.5px;font-weight:800;letter-spacing:-.15px;line-height:1.3;color:var(--ink)} .pr-note-body p{margin:6px 0 0;font-size:14px;line-height:1.6;color:var(--ink-soft)} .lp a.pr-note-cta{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:13.5px;font-weight:700;color:var(--accent);text-decoration:underline;text-underline-offset:3px} .lp a.pr-note-cta:hover{color:var(--accent-dim)} .lp .pr-note-cta svg{width:15px;height:15px;stroke-width:2.2} /* ---------- адаптив ---------- */ @media (max-width:560px){ .pr-hero{gap:12px;padding:14px} .pr-hero-ico{width:42px;height:42px} .lp .pr-hero-ico svg{width:22px;height:22px} .pr-hero-s{font-size:13.5px} .pr-note{gap:12px;padding:14px} .pr-note-ico{width:34px;height:34px} } @media (prefers-reduced-motion:reduce){ .pr-left::before{animation:none} .lp .pr-bar:hover .pr-bar-cta svg{transform:none} }