/* NUFF.WORK — новая главная. * * Два правила, из которых растёт весь файл: * 1. Выше сгиба нет ни одной картинки. Самый крупный элемент первого экрана — * текст и окно браузера, собранное из div-ов. Старая главная тянула 4 МБ * и рисовалась 4 секунды; здесь скорость обеспечена устройством страницы, * а не аккуратностью при выкладке. * 2. Девять цветов режимов не подобраны руками, а взяты с одной шкалы. Ручной * подбор всегда даёт один-два выпадающих оттенка; производная палитра * негармоничной быть не может, а десятый режим встанет в тон сам. */ /* ───────────────────────────── токены ───────────────────────────── */ @property --mode-hue { syntax: ''; inherits: true; initial-value: 288; } @property --glow { syntax: ''; inherits: false; initial-value: 0; } :root { /* Палитра взята из самого расширения (extension/popup/popup.css), а не подобрана заново: сайт и продукт должны выглядеть одним изделием. --bg-primary #0a0a0f почти чёрный --bg-secondary #0e1413 тёмно-зелёный графит --accent #417771 бархатный зелёный --text-secondary #629791 Яркий #1BD2B3 — из фавикона; это единственный звонкий цвет, он держит кнопки. */ --ink: #0a0a0f; --ink-2: #0e1413; --ink-3: #14201e; --paper: #ffffff; --muted: #629791; --dim: rgba(255, 255, 255, 0.42); --line: rgba(255, 255, 255, 0.10); --line-2: rgba(255, 255, 255, 0.18); --glass: rgba(255, 255, 255, 0.05); --accent: #1BD2B3; --accent-ink: #05201c; --velvet: #417771; --velvet-2: #2d5550; /* Режимы держатся одной семьёй, а не радугой: тон гуляет только в зелёно-синем секторе вокруг фирменного #417771. Так девять состояний различимы, но ни одно не выбивается из палитры расширения. */ --font-display: 'Zalando Expanded', system-ui, sans-serif; --font-body: 'Zalando Text', system-ui, sans-serif; --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace; --pad: clamp(20px, 4vw, 64px); --maxw: 1320px; --r: 18px; --r-lg: 26px; --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* ⚠️ Эти три переменные ОБЯЗАНЫ объявляться на «*», а не в :root. Внутри :root подстановка var(--mode-hue) выполняется прямо там — то есть со значением по умолчанию 288 (фиолетовый), и дочерние элементы наследуют уже готовый цвет. Классы .m-* ниже по дереву меняли бы тон впустую. */ * { --mode: oklch(62% 0.075 var(--mode-hue)); --mode-deep: oklch(34% 0.055 var(--mode-hue)); --mode-wash: color-mix(in oklch, var(--mode) 16%, transparent); } /* двенадцать режимов — двенадцать точек на круге тона. Шаг был шесть градусов на девяти режимах; с добавлением помодоро, ночного света и дыхания он стал пять, чтобы дуга осталась той же и соседние режимы по-прежнему различались на глаз. */ .m-zen { --mode-hue: 150; } .m-tasks { --mode-hue: 155; } .m-track { --mode-hue: 160; } .m-focus { --mode-hue: 165; } .m-pomodoro { --mode-hue: 170; } .m-block { --mode-hue: 175; } .m-eyes { --mode-hue: 180; } .m-breathing { --mode-hue: 185; } .m-shift { --mode-hue: 190; } .m-sleep { --mode-hue: 195; } .m-light { --mode-hue: 200; } .m-dark { --mode-hue: 205; } /* ───────────────────────────── сброс ───────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { /* ⚠️ overflow-x на одном body не держит: абсолютные псевдоэлементы считаются от документа. Запрещаем прокрутку вбок здесь. */ overflow-x: clip; color-scheme: dark; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } body { font-family: var(--font-body); font-size: clamp(15px, 1.05vw, 17px); line-height: 1.55; color: var(--paper); background: var(--ink); /* страница ДОЛЖНА прокручиваться: на старой главной стоял body{overflow:hidden}, из-за чего не работал ни скролл, ни индексация ниже первого экрана */ overflow-x: clip; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } img, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--accent); color: var(--accent-ink); } /* ───────────────────────────── типографика ───────────────────────────── */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 760; line-height: 0.94; letter-spacing: -0.035em; text-wrap: balance; } h1 { font-size: clamp(2.5rem, 4.6vw, 4.3rem); line-height: 1.0; letter-spacing: -0.045em; } .hero h1 { max-width: none; } h2 { font-size: clamp(1.9rem, 3.4vw, 3.1rem); font-weight: 800; } h3 { font-size: clamp(1.15rem, 1.7vw, 1.5rem); letter-spacing: -0.02em; line-height: 1.1; } p { text-wrap: pretty; } .lede { font-size: clamp(0.98rem, 1.15vw, 1.12rem); color: var(--muted); max-width: 44ch; } .eyebrow { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); } .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); } /* ───────────────────────────── шапка ───────────────────────────── Не полоса во всю ширину, а парящая капсула: стекло, отступ от края, номера пунктов и живой счётчик. Прибор начинается с первого пикселя. */ .top { position: sticky; top: 0; z-index: 60; padding-block: 10px; } .top-in { display: flex; align-items: center; gap: 6px; min-height: 58px; padding: 7px 8px 7px 18px; border-radius: 18px; border: 1px solid var(--line); background: color-mix(in oklch, #0a0e0e 74%, transparent); backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 12px 44px -20px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.07); transition: background 0.3s, border-color 0.3s, box-shadow 0.3s; } .top.is-stuck .top-in { background: color-mix(in oklch, #0a0e0e 88%, transparent); border-color: var(--line-2); box-shadow: 0 16px 50px -18px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .logo { display: flex; align-items: center; flex: none; } .logo img { height: 26px; width: auto; } .nav { display: flex; gap: 2px; margin-inline: auto; } .nav a { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border-radius: 11px; font-size: 0.92rem; color: var(--muted); transition: color 0.2s, background 0.25s; } .nav a i { font-style: normal; font-family: var(--font-mono); font-size: 0.6rem; color: var(--accent); opacity: 0.75; } .nav a:hover { color: var(--paper); background: rgba(255, 255, 255, 0.06); } @media (max-width: 900px) { .nav { display: none; } } /* счётчик времени на странице — тот же, что в приборной строке героя */ .top-clock { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; margin-inline-end: 4px; border: 1px dashed var(--line); border-radius: 11px; font-family: var(--font-mono); font-size: 0.78rem; font-variant-numeric: tabular-nums; color: var(--muted); } .top-clock b { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: tick 2.4s ease-in-out infinite; } @media (max-width: 900px) { .top-clock { display: none; } } /* ───────────────────────────── кнопки ───────────────────────────── */ /* Кнопка со скруглением 16px — как на старом сайте. Рамка в один пиксель у призрачной, заливка у основной. */ .btn { position: relative; display: inline-flex; align-items: center; gap: 11px; padding: 14px 26px; border-radius: 16px; font-weight: 650; font-size: 0.92rem; letter-spacing: -0.01em; white-space: nowrap; transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.25s var(--ease); } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); } .btn-primary:hover { background: color-mix(in oklch, var(--accent) 88%, white); } .btn-ghost { background: rgba(0, 0, 0, 0.24); color: var(--paper); border: 1px solid var(--line-2); } .btn-ghost:hover { background: rgba(0, 0, 0, 0.38); border-color: var(--paper); } .btn-sm { padding: 11px 20px; font-size: 0.87rem; border-radius: 14px; } /* ───────────────────────────── первый экран ───────────────────────────── */ .hero { position: relative; padding-block: clamp(30px, 4vw, 56px) clamp(48px, 6vw, 84px); } /* мягкое свечение вместо фоновой картинки: ноль байт, рисуется мгновенно */ .hero::before { content: ''; position: absolute; inset: -20% 0 auto; height: 720px; z-index: -1; /* ⚠️ Без filter: blur(). Он размывал полотно во всю ширину экрана высотой 720px — и эту размытую поверхность приходилось держать и пересобирать вместе со стеклом, которое лежит поверх. Радиальный градиент и так мягкий: растягиваем края чуть дальше и получаем ту же картинку даром. */ background: radial-gradient(62% 62% at 20% 28%, rgba(65, 119, 113, 0.40), transparent 76%), radial-gradient(56% 59% at 80% 16%, rgba(27, 210, 179, 0.16), transparent 78%); } .hero-grid { display: grid; gap: clamp(36px, 5vw, 64px); grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); align-items: center; } @media (max-width: 1040px) { .hero-grid { grid-template-columns: 1fr; } } /* ⚠️ Колонка сетки по умолчанию не уже своего содержимого (min-width: auto). Из-за этого макет окна браузера тянул за собой ВЕСЬ первый экран: на 366px заголовок и кнопки уезжали на 11px вправо и обрезались. Разрешаем сжиматься. */ .hero-grid > * { min-width: 0; } .hero h1 { margin-block: 14px 18px; } .hero h1 em { font-style: normal; color: var(--accent); } .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-block: 24px 26px; } /* приборная строка: три проверяемых числа вместо обещаний */ .gauges { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; border-top: 1px solid var(--line); } .gauge { padding: 15px 20px 13px 0; margin-inline-end: 20px; border-inline-end: 1px solid var(--line); } .gauge:last-child { border-inline-end: 0; margin-inline-end: 0; } .gauge b { display: block; font-family: var(--font-mono); font-size: 1.32rem; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .gauge span { display: block; font-size: 0.73rem; color: var(--dim); max-width: 15ch; line-height: 1.3; } .gauge.live b { color: var(--accent); } /* ───────────────────────────── окно браузера ───────────────────────────── * Собрано из элементов, а не картинкой: чёткое на любом экране, весит ноль, * содержимое внутри — настоящий текст, который читает поисковик. */ .browser { --chrome-bg: #101817; position: relative; border-radius: var(--r-lg); background: var(--chrome-bg); border: 1px solid var(--line-2); box-shadow: 0 2px 4px oklch(0% 0 0 / 0.4), 0 24px 60px -20px oklch(0% 0 0 / 0.7), 0 60px 140px -60px oklch(0% 0 0 / 0.9), inset 0 1px 0 color-mix(in oklch, var(--paper) 10%, transparent); overflow: hidden; transition: box-shadow 0.6s var(--ease); } /* панель вкладок */ .br-tabs { display: flex; align-items: flex-end; gap: 4px; padding: 10px 12px 0; } .br-dots { display: flex; gap: 7px; padding: 0 12px 12px 4px; } .br-dots i { width: 11px; height: 11px; border-radius: 50%; background: color-mix(in oklch, var(--paper) 18%, transparent); } .br-tab { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px 10px 0 0; font-size: 0.78rem; color: var(--dim); max-width: 190px; white-space: nowrap; overflow: hidden; /* вкладка сжимается как настоящая, а не распирает окно: без min-width: 0 flex-элемент не уступает ни пикселя ниже ширины своей подписи */ min-width: 0; transition: background 0.25s, color 0.25s; } .br-tab span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .br-tab i { width: 13px; height: 13px; border-radius: 3px; background: color-mix(in oklch, var(--paper) 22%, transparent); flex: none; } .br-tab[aria-selected='true'] { background: var(--ink-2); color: var(--paper); } .br-tab[aria-selected='true'] i { background: var(--mode); } /* адресная строка и панель расширений */ .br-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--ink-2); } .br-nav { display: flex; gap: 14px; color: var(--dim); flex: none; } .br-nav svg { width: 16px; height: 16px; } .br-url { flex: 1; display: flex; align-items: center; gap: 9px; padding: 8px 14px; border-radius: 999px; background: color-mix(in oklch, var(--ink) 70%, transparent); font-family: var(--font-mono); font-size: 0.76rem; color: var(--muted); border: 1px solid transparent; transition: border-color 0.3s, color 0.3s; } .br-url svg { width: 12px; height: 12px; flex: none; opacity: 0.7; } /* иконка расширения — из неё выпадает попап, как в настоящем браузере */ .br-ext { position: relative; flex: none; } .br-ext-btn { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--mode-wash); border: 1px solid color-mix(in oklch, var(--mode) 40%, transparent); transition: background 0.3s, border-color 0.3s, transform 0.3s var(--ease); } .br-ext-btn:hover { transform: translateY(-1px); } .br-ext-btn img { width: 20px; height: 20px; border-radius: 5px; } /* точка активности — как настоящий бейдж расширения */ .br-ext-btn::after { content: ''; position: absolute; top: -2px; right: -2px; width: 9px; height: 9px; border-radius: 50%; background: var(--mode); border: 2px solid var(--ink-2); } /* содержимое вкладки */ .br-view { position: relative; min-height: clamp(300px, 30vw, 400px); background: var(--ink); border-top: 1px solid var(--line); overflow: hidden; } /* макет страницы под попапом — намеренно условный, это фон, а не контент */ .page-skeleton { padding: 30px 34px; display: grid; gap: 13px; transition: filter 0.6s var(--ease), opacity 0.6s; } .page-skeleton i { display: block; height: 11px; border-radius: 6px; background: color-mix(in oklch, var(--paper) 8%, transparent); } .page-skeleton i:nth-child(1) { width: 42%; height: 26px; background: color-mix(in oklch, var(--paper) 13%, transparent); } .page-skeleton i:nth-child(2) { width: 88%; } .page-skeleton i:nth-child(3) { width: 74%; } .page-skeleton i:nth-child(4) { width: 81%; } .page-skeleton .row { display: flex; gap: 13px; margin-top: 8px; } .page-skeleton .row i { height: 84px; flex: 1; border-radius: 12px; } /* попап расширения */ .popup { position: absolute; top: 12px; right: 16px; z-index: 5; width: min(270px, 56%); border-radius: 16px; /* ⚠️ Без backdrop-filter: панель и так почти непрозрачная (94%), разница на глаз нулевая, а браузер ради неё пересобирал фон под ней каждый кадр. */ background: color-mix(in oklch, var(--ink-2) 97%, transparent); border: 1px solid var(--line-2); box-shadow: 0 20px 50px -16px oklch(0% 0 0 / 0.8); padding: 14px; /* выпадает из иконки расширения, а не появляется ниоткуда */ transform-origin: top right; animation: popIn 0.5s var(--ease) both; } @keyframes popIn { from { opacity: 0; transform: translateY(-8px) scale(0.94); } to { opacity: 1; transform: none; } } .popup-head { display: flex; align-items: center; gap: 9px; padding: 2px 4px 13px; } .popup-head b { font-family: var(--font-display); font-size: 0.86rem; letter-spacing: -0.02em; } .popup-head span { margin-inline-start: auto; font-family: var(--font-mono); font-size: 0.66rem; color: var(--dim); } .modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; } .mode-cell { position: relative; display: grid; place-items: center; gap: 7px; padding: 13px 6px 11px; border-radius: 12px; background: color-mix(in oklch, var(--paper) 4%, transparent); border: 1px solid transparent; font-size: 0.66rem; color: var(--muted); transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.25s var(--ease); } .mode-cell svg { width: 19px; height: 19px; } .mode-cell:hover { background: var(--mode-wash); color: var(--paper); transform: translateY(-2px); } .mode-cell[aria-pressed='true'] { background: var(--mode-wash); border-color: color-mix(in oklch, var(--mode) 55%, transparent); color: var(--paper); } .mode-cell[aria-pressed='true'] svg { color: var(--mode); } /* индикатор включённого режима */ .mode-cell[aria-pressed='true']::after { content: ''; position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--mode); box-shadow: 0 0 0 3px var(--mode-wash); } /* ── что режим делает со страницей: сцены поверх макета ── */ .scene { position: absolute; inset: 0; z-index: 3; display: grid; align-content: center; justify-items: start; gap: 12px; text-align: left; padding: 26px clamp(120px, 34%, 300px) 26px 30px; opacity: 0; visibility: hidden; transition: opacity 0.5s var(--ease), visibility 0.5s; } .scene[data-on='true'] { opacity: 1; visibility: visible; } .scene h4 { font-family: var(--font-display); font-size: clamp(1.2rem, 2vw, 1.7rem); letter-spacing: -0.03em; } .scene p { font-size: 0.84rem; color: var(--muted); max-width: 26ch; } .scene .clock { font-family: var(--font-mono); font-size: clamp(2rem, 4.4vw, 3.4rem); font-variant-numeric: tabular-nums; letter-spacing: -0.04em; } /* блокировка: страница за оверлеем выцветает, а не просто темнеет — приём подсмотрен у one sec, читается как «поставили на паузу», а не как баннер */ .br-view[data-mode='block'] .page-skeleton { filter: grayscale(1) blur(1.5px); opacity: 0.35; } .br-view[data-mode='focus'] .page-skeleton { filter: grayscale(0.7) blur(1px); opacity: 0.4; } .br-view[data-mode='sleep'] .page-skeleton { filter: brightness(0.45) sepia(0.3); opacity: 0.5; } .br-view[data-mode='zen'] .page-skeleton { filter: saturate(1.2) blur(0.5px); opacity: 0.6; } .br-view[data-mode='dark'] .page-skeleton { filter: invert(1) hue-rotate(180deg); opacity: 0.8; } /* ⚠️ Ночной свет показываем цветовой матрицей, а не sepia: сепия белое не греет — она даёт (255,255,239) там, где нужен тёплый тон. Здесь это лишь демонстрация, но врать про то, что делает фильтр, ей нельзя. */ .br-view[data-mode='light'] .page-skeleton { filter: sepia(0.55) saturate(1.5) hue-rotate(-14deg) brightness(0.95); opacity: 0.75; } .br-view[data-mode='pomodoro'] .page-skeleton { filter: grayscale(0.7) blur(1px); opacity: 0.4; } .br-view[data-mode='breathing'] .page-skeleton { filter: blur(2px) brightness(0.6); opacity: 0.35; } .br-view::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(80% 70% at 70% 0%, var(--mode-wash), transparent 70%); opacity: 0; transition: opacity 0.6s; } .br-view[data-mode]:not([data-mode='off'])::after { opacity: 1; } /* подпись под окном */ .br-note { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 0.8rem; color: var(--dim); } .br-note kbd { font-family: var(--font-mono); font-size: 0.72rem; padding: 3px 7px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--glass); } /* ───────────────────────────── секции ───────────────────────────── */ section { padding-block: clamp(64px, 9vw, 130px); } .sec-head { max-width: 68ch; margin-bottom: clamp(32px, 4vw, 54px); } .sec-head h2 { margin-block: 14px 18px; } .sec-head .lede { max-width: 62ch; } /* ═════════════════════════════ секции ниже первого экрана ═════════════════════════════ */ .sec-head .eyebrow { display: block; margin-bottom: 12px; } /* ── доказательство приватности ── */ .proof { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } @media (max-width: 940px) { .proof { grid-template-columns: 1fr; } } /* панель сети, в которой пусто — доказательство вместо обещания */ .netpanel { border: 1px solid var(--line); border-radius: var(--r); background: var(--ink-2); overflow: hidden; font-family: var(--font-mono); font-size: 0.78rem; } .netpanel-bar { display: flex; align-items: center; gap: 8px; padding: 11px 15px; border-bottom: 1px solid var(--line); color: var(--dim); } .netpanel-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } .netpanel-rows { padding: 15px; display: grid; gap: 9px; color: var(--dim); } .netpanel-rows div { display: flex; justify-content: space-between; gap: 20px; } .netpanel-empty { padding: 42px 20px; text-align: center; color: var(--muted); } .netpanel-empty b { display: block; font-family: var(--font-display); font-size: 1.5rem; color: var(--accent); margin-bottom: 6px; } .claims { display: grid; gap: 2px; margin-top: 26px; } .claim { display: flex; gap: 13px; align-items: flex-start; padding: 15px 0; border-top: 1px solid var(--line); } .claim svg { width: 17px; height: 17px; color: var(--accent); flex: none; margin-top: 3px; } .claim b { display: block; font-weight: 650; margin-bottom: 3px; } .claim span { font-size: 0.87rem; color: var(--muted); } /* ── сетка девяти режимов: строго три на три ── */ .modes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (max-width: 1000px) { .modes-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .modes-grid { grid-template-columns: 1fr; } } .mode-card { position: relative; display: flex; flex-direction: column; /* ⚠️ Высоту задаёт содержимое: с жёсткой min-height описание обрезалось снизу уже на планшете, а на телефоне пропадала треть текста. */ min-height: 200px; padding: 22px 22px 20px; border-radius: 18px; /* ⚠️ подложка ТЁМНАЯ: фон страницы светлый, и полупрозрачное белое растворялось в нём — текст на карточках было не прочесть */ background: radial-gradient(120% 90% at 50% 118%, var(--mode-wash), transparent 62%), rgba(4, 8, 8, 0.66); border: 1px solid var(--line); transition: transform 0.35s var(--ease), border-color 0.3s, background 0.3s; } /* цветное свечение режима — из-под нижнего края, а не заливкой поверх */ /* ⚠️ Раньше свечение лежало отдельным слоем снизу и на светлом фоне давало кривые пятна по углам. Теперь это ровный градиент в самой подложке — засветов нет, а глубина осталась. */ .mode-card::before { display: none; } .mode-card:hover { transform: translateY(-4px); border-color: color-mix(in oklch, var(--mode) 55%, transparent); background: radial-gradient(120% 90% at 50% 118%, color-mix(in oklch, var(--mode) 26%, transparent), transparent 62%), rgba(4, 8, 8, 0.74); } .mode-card > * { position: relative; } .mode-card svg.ico { width: 30px; height: 30px; color: var(--mode); margin-bottom: auto; transition: transform 0.35s var(--ease); } .mode-card:hover svg.ico { transform: scale(1.12) rotate(-4deg); } .mode-card h3 { margin: 18px 0 7px; font-size: clamp(1.15rem, 1.7vw, 1.4rem); } .mode-card p { font-size: 0.87rem; color: var(--muted); } .mode-card .go { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; font-size: 0.82rem; font-weight: 620; color: var(--mode); opacity: 0; transform: translateY(6px); transition: opacity 0.3s, transform 0.3s var(--ease); } .mode-card:hover .go { opacity: 1; transform: none; } .mode-card .go svg { width: 13px; height: 13px; } /* на сенсорном экране наведения нет — ссылка видна сразу */ @media (hover: none) { .mode-card .go { opacity: 1; transform: none; } } .mode-card .free { position: absolute; top: 20px; right: 20px; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mode); padding: 3px 8px; border-radius: 6px; background: color-mix(in oklch, var(--mode) 16%, transparent); } /* ── что заменяет ── */ .replaces { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; } .replace-row { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; } .replace-row b { font-weight: 650; font-size: 0.92rem; } .replace-row s { display: block; font-size: 0.8rem; color: var(--dim); text-decoration: none; } .replace-row s::before { content: 'вместо '; } .replace-row .mark { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 7px; background: var(--mode-wash); color: var(--mode); } .replace-row .mark svg { width: 15px; height: 15px; } /* ── цены ── */ .plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; max-width: 830px; } .plan { padding: 30px 28px; border: 1px solid var(--line); border-radius: var(--r-lg); } .plan.pro { border-color: color-mix(in oklch, var(--accent) 42%, transparent); background: linear-gradient(165deg, rgba(27,210,179,0.07), transparent 60%); } .plan h3 { margin-bottom: 4px; } .plan .price { font-family: var(--font-mono); font-size: 2.1rem; letter-spacing: -0.03em; margin: 14px 0 4px; } .plan .price small { font-size: 0.82rem; color: var(--dim); letter-spacing: 0; } .plan ul { list-style: none; display: grid; gap: 10px; margin: 22px 0 26px; } .plan li { display: flex; gap: 10px; font-size: 0.88rem; color: var(--muted); } .plan li svg { width: 15px; height: 15px; color: var(--accent); flex: none; margin-top: 3px; } /* ── вопросы ── Заголовок слева и липкий, список справа в такой же рамке, что и таблица: иначе секция занимала половину экрана, а справа зияла пустота. */ .faq-layout { display: grid; gap: clamp(28px, 4vw, 60px); grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); align-items: start; } .faq-aside { position: sticky; top: 100px; margin-bottom: 0; } .faq-aside-note { margin-top: 18px; font-size: .87rem; color: var(--muted); } .faq-aside-note a { color: var(--accent); } /* ⚠️ Этот блок обязан идти ПОСЛЕ .faq-aside: специфичность у них одинаковая, и решает порядок. Стоя выше, он молча перекрывался, и на телефоне заголовок продолжал липнуть, а список наезжал на него. */ @media (max-width: 940px) { .faq-layout { grid-template-columns: 1fr; } .faq-aside { position: static; margin-bottom: 26px; } } .faq { display: grid; gap: 0; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: rgba(8, 12, 12, 0.34); } .faq details { border-top: 1px solid var(--line); } .faq details:first-child { border-top: 0; } .faq details[open] { background: rgba(0, 0, 0, 0.16); } .faq details[open] summary { color: var(--accent); } .faq summary { display: flex; align-items: center; gap: 14px; padding: 19px 24px; cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 650; font-size: clamp(.98rem, 1.25vw, 1.08rem); letter-spacing: -0.02em; transition: color 0.25s, background 0.25s; } .faq summary:hover { background: rgba(255, 255, 255, 0.04); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ''; width: 10px; height: 10px; margin-inline-start: auto; flex: none; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translate(-3px, -3px); transition: transform 0.3s var(--ease); } .faq details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); } .faq p { padding: 0 24px 22px; color: var(--muted); max-width: 68ch; font-size: .9rem; } /* ── подвал ── */ .foot { border-top: 1px solid var(--line); padding-block: 54px 40px; } .foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; } @media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } } .foot h4 { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); font-weight: 400; margin-bottom: 14px; } .foot ul { list-style: none; display: grid; gap: 9px; font-size: 0.87rem; color: var(--muted); } .foot a:hover { color: var(--paper); } .foot-note { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 0.8rem; color: var(--dim); display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; } /* большой призыв перед подвалом */ .cta-band { text-align: center; padding-block: clamp(56px, 8vw, 100px); border-top: 1px solid var(--line); } .cta-band h2 { margin-bottom: 16px; } .cta-band p { color: var(--muted); max-width: 48ch; margin: 0 auto 28px; } /* ── таблица сравнения ── */ /* Таблица оформлена как окно: рамка со всех сторон и скругление, а не просто набор горизонтальных линий. */ .cmp { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: rgba(8, 12, 12, 0.34); } .cmp-row { display: grid; grid-template-columns: minmax(180px, 0.9fr) minmax(0, 2.4fr) minmax(110px, 0.35fr); gap: 24px; padding: 15px 26px; border-bottom: 1px solid var(--line); align-items: baseline; } .cmp-row:last-child { border-bottom: 0; } .cmp-head { background: rgba(0,0,0,.18); font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); padding: 10px 24px; } .cmp-row b { font-weight: 650; } .cmp-row s { display: block; font-size: .76rem; color: var(--dim); text-decoration: none; margin-top: 1px; } .cmp-row em { display: block; font-style: normal; font-size: .79rem; color: var(--dim); margin-top: 3px; line-height: 1.4; } .cmp-row .num { font-family: var(--font-mono); font-size: .85rem; color: var(--muted); text-align: right; } .cmp-row.us { background: linear-gradient(90deg, rgba(27,210,179,.10), transparent 72%); padding-block: 19px; } .cmp-row.us b { color: var(--accent); } .ok, .bad { display: inline-block; font-size: .9rem; } .ok { color: var(--accent); } .bad { color: #e8836b; } .cmp-note { margin-top: 22px; font-size: .78rem; color: var(--dim); max-width: 78ch; line-height: 1.6; } @media (max-width: 760px) { .cmp-row { grid-template-columns: 1fr; gap: 8px; padding: 15px 18px; } .cmp-head { display: none; } .cmp-row .num { text-align: left; } } /* ═════════ появление на прокрутке ═════════ Чистый CSS, без библиотек и без наблюдателей: аудитория расширения для Chrome поголовно в Chrome, значит scroll-driven анимации доступны без оговорок. Кто просил меньше движения — получит статику, правило ниже. */ @supports (animation-timeline: view()) { .reveal { animation: rise linear both; animation-timeline: view(); /* ⚠️ Диапазон обязан заканчиваться в пределах ВХОДА элемента в экран. Было «cover 26%» — элемент дочитывал анимацию только пройдя четверть экрана, поэтому карточки в нижней половине оставались полупрозрачными и текст на них не читался. */ animation-range: entry 0% entry 85%; } @keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } } @media (prefers-reduced-motion: reduce) { .reveal { animation: none !important; opacity: 1 !important; transform: none !important; } } /* ── «вместо шести расширений» ── */ .swap { display: grid; gap: 10px; max-width: 900px; } .swap-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 18px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--line); } .swap-row .old { color: var(--dim); font-size: .93rem; } .swap-row .old b { display: block; color: var(--muted); font-weight: 650; } .swap-row .arrow { color: var(--accent); font-family: var(--font-mono); font-size: .8rem; } .swap-row .new { font-size: .93rem; } .swap-row .new b { display: block; font-weight: 650; } .swap-row .new s { text-decoration: none; color: var(--dim); font-size: .82rem; } @media (max-width: 700px) { .swap-row { grid-template-columns: 1fr; gap: 6px; } .swap-row .arrow { display: none; } } /* ── цены со срезом ── */ .plan { border-radius: 0; border: 0; outline: 1px solid var(--line); outline-offset: -1px; border-radius: 18px; } .plan.pro { outline-color: color-mix(in oklch, var(--accent) 42%, transparent); } .plan .tagline { font-size: .86rem; color: var(--dim); } /* ── полоса призыва ── */ .cta-band { position: relative; overflow: hidden; } .cta-band::before { content: ''; position: absolute; inset: auto 0 -60% 0; height: 320px; z-index: -1; background: radial-gradient(50% 60% at 50% 100%, rgba(27,210,179,.16), transparent 70%); } /* ── настоящий фон режима внутри окна ── Тот же файл, что расширение покажет на экране после установки. Лежит НАД макетом страницы, но ПОД текстом сцены, поэтому читаемость не страдает. */ .scene-bg { position: absolute; inset: 0; z-index: 2; background-size: cover; background-position: center; opacity: 0; visibility: hidden; transition: opacity 0.6s var(--ease), visibility 0.6s, transform 0.9s var(--ease); transform: scale(1.06); } .scene-bg[data-on='true'] { opacity: 1; visibility: visible; transform: none; } /* затемняющий слой: без него белый текст сцены тонет в светлых кадрах */ .scene-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(6,10,10,.88) 0%, rgba(6,10,10,.55) 48%, rgba(6,10,10,.25) 100%); } .scene { z-index: 4; } .price-year { margin: -2px 0 4px; font-size: .84rem; color: var(--muted); } .price-year b { color: var(--accent); font-weight: 650; } /* ── переключатель периода оплаты ── */ .billing { display: inline-flex; gap: 3px; padding: 3px; margin-bottom: 26px; border-radius: 16px; background: rgba(255,255,255,.05); outline: 1px solid var(--line); outline-offset: -1px; border-radius: 16px; } .bill-opt { border-radius: 13px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; font-size: .87rem; font-weight: 620; color: var(--muted); border-radius: 18px; transition: background .3s, color .3s; } .bill-opt:hover { color: var(--paper); } .bill-opt[aria-pressed='true'] { background: var(--accent); color: var(--accent-ink); } .bill-opt .save { font-family: var(--font-mono); font-size: .68rem; padding: 2px 6px; background: rgba(0,0,0,.22); border-radius: 3px; } .bill-opt[aria-pressed='false'] .save { background: var(--mode-wash); color: var(--accent); } .trial-note { margin-top: 12px; font-size: .76rem; color: var(--dim); } /* ── сколько это экономит ── */ .save-band { display: flex; flex-wrap: wrap; gap: 26px; align-items: center; justify-content: space-between; margin-top: 28px; padding: 26px 28px; background: linear-gradient(120deg, rgba(27,210,179,.10), transparent 70%); outline: 1px solid color-mix(in oklch, var(--accent) 34%, transparent); outline-offset: -1px; border-radius: 16px; } .save-sum { font-family: var(--font-mono); font-size: clamp(1.5rem,3vw,2.3rem); letter-spacing: -.03em; margin-top: 6px; } .save-sum s { color: var(--dim); text-decoration-thickness: 2px; margin-right: 10px; } .save-sum b { color: var(--accent); } .save-sum small { font-size: .8rem; color: var(--muted); font-family: var(--font-body); letter-spacing: 0; } .save-note { max-width: 42ch; font-size: .86rem; color: var(--muted); } .save-note b { color: var(--paper); font-weight: 650; } /* ═════════ живой фон, перенятый со старого сайта ═════════ * Там это был горизонтальный градиент #2C2436 → #6D647F, который плавно * перетекал при смене слайда. Приём забираем, цвета — из расширения: * фиолетовый спорил бы с бирюзовым акцентом. * * Градиент анимируется только потому, что --bg-1/--bg-2 объявлены через * @property с типом . Обычные переменные в градиенте не интерполируются — * переход шёл бы рывком. */ @property --bg-1 { syntax: ''; inherits: true; initial-value: #263A38; } @property --bg-2 { syntax: ''; inherits: true; initial-value: #557875; } body { background: linear-gradient(100deg, var(--bg-1) 0%, var(--bg-2) 100%); background-attachment: fixed; transition: --bg-1 0.9s var(--ease), --bg-2 0.9s var(--ease); } /* Пары взяты из старого сайта: там у каждого слайда был свой градиент, приглушённый и «бархатный». Здесь роль слайдов играют секции. */ body.at-top { --bg-1: #263A38; --bg-2: #557875; } body.at-privacy { --bg-1: #1B3036; --bg-2: #59737B; } body.at-compare { --bg-1: #1E2B32; --bg-2: #3C515A; } body.at-modes { --bg-1: #23342B; --bg-2: #55785D; } body.at-replaces { --bg-1: #2D3C42; --bg-2: #68767A; } body.at-pricing { --bg-1: #304341; --bg-2: #557875; } body.at-faq { --bg-1: #1C2329; --bg-2: #3E4853; } /* ⚠️ Фон стал светлее почти чёрного, поэтому поверхности, которые раньше осветляли подложку, теперь наоборот её притемняют — иначе карточки растворяются в фоне, а не выступают из него. */ /* ⚠️ Без backdrop-filter: за окном лежит ровный градиент секции, а не текст — размывать нечего, а стоит это пересъёмки фона каждый кадр. Стекло оставлено только в шапке, где под ней реально проезжает содержимое. */ .browser { --chrome-bg: rgba(10, 14, 14, 0.86); } .br-bar, .br-view { background: rgba(8, 12, 12, 0.72); } .popup { background: rgba(10, 16, 15, 0.86); } .mode-cell { background: rgba(0, 0, 0, 0.24); } .card, .feat, .case, .step, .plan, .netpanel { background: rgba(8, 12, 12, 0.42); } .btn-ghost { background: rgba(0, 0, 0, 0.28); } .btn-ghost:hover { background: rgba(0, 0, 0, 0.42); } .billing { background: rgba(0, 0, 0, 0.26); } .plan-opt-in { background: rgba(0, 0, 0, 0.24); } .cmp-row.us { background: linear-gradient(90deg, rgba(27,210,179,.16), transparent 72%); } .netpanel-bar { background: rgba(0, 0, 0, 0.22); } :root { --line: rgba(255,255,255,0.16); --line-2: rgba(255,255,255,0.26); } /* на странице режима фон берёт тон этого режима */ body[class*='m-'] .mode-hero { --bg-2: color-mix(in oklch, var(--mode) 14%, #0e1413); } /* Иконки из расширения приходят с разными viewBox и разной заливкой. Размер задаём здесь, чтобы залитые и контурные смотрелись одинаково. */ .mode-cell svg, .chip svg, .mode-badge svg { width: 20px; height: 20px; } .mode-card svg.ico { width: 30px; height: 30px; } .br-ext-btn img { width: 20px; height: 20px; } /* Вход в шапке: тише кнопки установки, но заметнее пунктов меню. ⚠️ Отступы, кегль и рамка обязаны совпадать с .btn-sm — иначе кнопки стоят рядом разной высоты, и это первое, что бросается в глаза. */ .nav-login { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 14px; font-size: .87rem; font-weight: 650; line-height: 1.55; color: var(--paper); background: rgba(0, 0, 0, 0.22); border: 1px solid var(--line); transition: background .25s, border-color .25s, color .25s; } .nav-login svg { width: 16px; height: 16px; opacity: .8; } .nav-login:hover { background: rgba(0, 0, 0, 0.34); border-color: var(--paper); } @media (max-width: 560px) { .nav-login span, .nav-login { font-size: 0; padding: 10px; gap: 0; } .nav-login svg { font-size: 1rem; } } /* ═════════════════ телефон ═════════════════ * У старого сайта мобильная версия была убита слайдером; здесь она * не менее важна десктопа, поэтому правила явные, а не «как получится». */ @media (max-width: 768px) { /* ⚠️ Палец требует не меньше 44 пикселей по высоте — иначе в кнопку не попасть. В шапке было 38 и 34. */ .btn-sm, .nav-login { padding-block: 13px; min-height: 44px; } .btn { min-height: 44px; } .pro-banner .btn { min-height: 44px; } } @media (max-width: 640px) { /* кнопки в столбик и во всю ширину: рядом они не помещаются и вторая обрезалась по правому краю */ .hero-cta, .cta-band .btn, .card-actions { flex-direction: column; align-items: stretch; } .hero-cta .btn, .cta-band .btn { justify-content: center; width: 100%; } /* приборные числа: три в ряд не читаются, ставим два */ .gauges { grid-template-columns: repeat(2, 1fr); } .gauge { border-inline-end: 0; margin-inline-end: 0; padding-inline-end: 12px; } .gauge span { max-width: none; } /* окно браузера ужимаем под экран целиком, а не обрезаем */ .browser { font-size: 0.82rem; } .br-tab { max-width: 130px; padding: 7px 10px; } .br-view { min-height: 260px; } .popup { width: min(200px, 62%); top: 8px; right: 8px; padding: 10px; } .popup .modes { gap: 5px; } .mode-cell { padding: 9px 3px 8px; font-size: 0.58rem; } .mode-cell svg { width: 15px; height: 15px; } .scene { padding: 18px 42% 18px 16px; } .scene h4 { font-size: 1.05rem; } .scene p { font-size: 0.76rem; } .scene .clock { font-size: 1.7rem; } /* ⚠️ фон сцены — единственное, что вылезало за экран: он растянут с запасом по краям, чтобы свечение уходило за границы окна */ .scene-bg { inset: 0; } /* заголовки и текст */ .hero h1 { max-width: none; } .sec-head .lede, .lede { max-width: none; } .br-note { font-size: 0.74rem; } } @media (max-width: 420px) { .popup { width: min(170px, 58%); } .mode-cell { font-size: 0.53rem; } .scene { padding-inline-end: 46%; } } /* ═════════════════════════════════════════════════════════════════ СЛОЙ ОТДЕЛКИ — то, что отличает награду от каталога. Всё на чистом CSS: аудитория расширения сидит в Chrome, можно не оглядываться на другие браузеры. ═════════════════════════════════════════════════════════════════ */ /* ── зерно плёнки поверх всего ── Ровный градиент выглядит пластиком; шум в 4% непрозрачности даёт поверхности материал. SVG-шум весит меньше килобайта и лежит прямо в стилях — ни одного запроса. */ /* ⚠️ БЕЗ mix-blend-mode. Это полотно во весь экран, и режим смешивания заставлял браузер пересобирать композицию ВСЕЙ страницы каждый кадр — отсюда и «пк напрягает»: 44 кадра вместо 60 в полном простое, на всех страницах сразу. Заодно он умножал стоимость всего, что под ним: стекла в шапке, бегущей строки, макета браузера. На пяти процентах прозрачности разницы на глаз нет, а зерно остаётся. */ body::after { content: ''; position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; opacity: 0.055; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ── заголовок первого экрана: контраст начертаний ── Переменный шрифт уже загружен (ось 200–900) — тонкая строка против чёрной не стоит ни байта, а делает половину работы. */ .hero h1 .t-thin { font-weight: 300; letter-spacing: -0.03em; color: color-mix(in oklch, var(--paper) 88%, transparent); } .hero h1 .t-bold { font-weight: 850; } .hero h1 em { position: relative; white-space: nowrap; } .hero h1 em::after { content: ''; position: absolute; left: 0.02em; right: 0.02em; bottom: 0.05em; height: 0.09em; border-radius: 3px; background: var(--accent); opacity: 0.32; transform-origin: left; animation: underlineIn 0.9s var(--ease) 0.5s both; } @keyframes underlineIn { from { transform: scaleX(0); } } /* ── бегущая лента режимов ── */ .marquee { overflow: clip; padding-block: 15px; border-block: 1px solid var(--line); background: rgba(4, 8, 8, 0.25); } /* will-change поднимает ленту на отдельный слой: тогда 4000 пикселей текста не перерисовываются, а просто сдвигаются композитором. */ .marquee-track { display: flex; width: max-content; animation: mq 32s linear infinite; will-change: transform; } .marquee span { display: flex; align-items: center; gap: 44px; padding-inline-end: 44px; font-family: var(--font-display); font-weight: 750; font-size: clamp(0.95rem, 1.5vw, 1.3rem); letter-spacing: 0.05em; white-space: nowrap; text-transform: uppercase; color: color-mix(in oklch, var(--paper) 46%, transparent); } .marquee i { font-style: normal; font-size: 0.6em; color: var(--accent); } @keyframes mq { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } } /* ── призрачные номера секций ── Считаются сами: разметку трогать не надо, и на страницах режимов нумерация тоже появляется. */ main { counter-reset: sec; } main section .sec-head { counter-increment: sec; position: relative; } main section .sec-head::before { content: counter(sec, decimal-leading-zero); position: absolute; top: -0.42em; left: -0.05em; z-index: -1; font-family: var(--font-display); font-weight: 850; line-height: 1; font-size: clamp(4.6rem, 10vw, 8.4rem); letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.10); pointer-events: none; user-select: none; } .sec-head .eyebrow::before { content: ''; display: inline-block; width: 26px; height: 1px; background: var(--accent); margin-right: 11px; vertical-align: middle; } /* ── свечение карточек под курсором ── Позицию пишет короткий скрипт в --mx/--my; на касании и без наведения слой просто не включается. */ .mode-card, .feat, .case, .plan, .card, .step, .quick-item { position: relative; } .mode-card::after, .feat::after, .case::after, .plan::after, .card::after, .step::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(230px circle at var(--mx, 50%) var(--my, 50%), rgba(27, 210, 179, 0.10), transparent 65%); transition: opacity 0.35s; } .mode-card:hover::after, .feat:hover::after, .case:hover::after, .plan:hover::after, .card:hover::after, .step:hover::after { opacity: 1; } /* ── окно браузера: глубина и живой наклон ── */ .browser { transition: transform 0.16s ease-out, box-shadow 0.6s var(--ease); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), 0 34px 90px -28px rgba(0, 0, 0, 0.8), 0 0 90px -34px rgba(27, 210, 179, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.10); } /* ── кнопка: бегущий блик по основной ── */ .btn-primary { position: relative; overflow: hidden; } .btn-primary::after { content: ''; position: absolute; top: 0; bottom: 0; width: 42%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent); transform: translateX(-190%) skewX(-18deg); transition: transform 0.65s var(--ease); } .btn-primary:hover::after { transform: translateX(330%) skewX(-18deg); } /* ── приборные метки над числами ── */ .gauge { position: relative; } .gauge::before { content: ''; position: absolute; top: -1px; left: 0; width: 30px; height: 2px; background: var(--line-2); } .gauge.live::before { background: var(--accent); animation: tick 2.4s ease-in-out infinite; } @keyframes tick { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } /* ── строки сравнения дышат ── */ .cmp-row { transition: background 0.25s; } .cmp-row:not(.cmp-head):not(.us):hover { background: rgba(255, 255, 255, 0.03); } /* ── гигантский вордмарк в подвале ── */ .foot-mark { margin-top: clamp(34px, 5vw, 64px); font-family: var(--font-display); font-weight: 870; font-size: clamp(3.2rem, 12.4vw, 11.5rem); line-height: 0.82; letter-spacing: -0.045em; text-align: center; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.10); user-select: none; pointer-events: none; mask-image: linear-gradient(180deg, #000 45%, transparent 96%); } /* ── фирменная полоса прокрутки ── */ ::-webkit-scrollbar { width: 11px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: color-mix(in oklch, var(--paper) 20%, transparent); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background-color: var(--accent); } /* ── вращающаяся рамка тарифа PRO ── Кольцо света обегает карточку по периметру. Один @property и маска — ни кадра JS. При reduced-motion рамка статичная. */ .plan.pro, .acc .card.is-pro { position: relative; border-color: transparent !important; } .plan.pro::before, .acc .card.is-pro::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; background: conic-gradient( color-mix(in oklch, var(--accent) 22%, transparent) 0%, var(--accent) 10%, color-mix(in oklch, var(--accent) 22%, transparent) 22%, color-mix(in oklch, var(--accent) 22%, transparent) 50%, var(--accent) 60%, color-mix(in oklch, var(--accent) 22%, transparent) 72%, color-mix(in oklch, var(--accent) 22%, transparent) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } /* ⚠️ Кромка НЕ крутится, и это осознанно. Сначала здесь анимировался угол conic-градиента через переменную --ang: браузер перерисовывал градиент каждый кадр на главном потоке, всегда, даже когда карточка далеко за экраном. Попытка заменить это поворотом самого элемента вышла хуже — элемент прямоугольный, и рамка поехала поверх карточки. Статичная кромка выглядит ровно так же дорого и стоит ноль. */ /* ── панель сети ── Радарный луч отсюда убран по решению Дениса 2026-08-21: крутящийся conic-градиент на пол-экрана съедал кадры, а смысла не нёс — цифра «0» говорит всё сама. */ .netpanel-empty { position: relative; overflow: hidden; } .netpanel-empty > * { position: relative; } /* ── строка «это мы» в сравнении: акцентная кромка ── */ .cmp-row.us { position: relative; } .cmp-row.us::before { content: ''; position: absolute; left: 0; top: 12%; bottom: 12%; width: 3px; border-radius: 2px; background: var(--accent); } /* ═══════════ переходы между страницами ═══════════ Нативный View Transitions: PHP-многостраничник начинает вести себя как приложение — страница не моргает белым, а перетекает. Одна директива, ни одной библиотеки, ни одного роутера. Аудитория расширения для Chrome — поддержка полная. */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: vtOut 0.22s cubic-bezier(0.4, 0, 1, 1) both; } ::view-transition-new(root) { animation: vtIn 0.32s cubic-bezier(0, 0, 0.2, 1) both; } @keyframes vtOut { to { opacity: 0; transform: translateY(-6px); } } @keyframes vtIn { from { opacity: 0; transform: translateY(10px); } } /* шапка при переходе остаётся на месте — она общая для всех страниц */ .top { view-transition-name: site-header; } ::view-transition-old(site-header), ::view-transition-new(site-header) { animation: none; mix-blend-mode: normal; } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } /* ═══════════ индикатор прочитанного ═══════════ Полоса под шапкой растёт по мере прокрутки. Считает сам браузер через scroll-timeline — ни одного обработчика прокрутки. */ /* ⚠️ Полоса идёт по самому верху экрана, а не по низу шапки: шапка — капсула с отступом от края, и линия под ней читалась как её подчёркивание, а не как индикатор страницы. */ body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; z-index: 2147483001; height: 3px; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--accent), color-mix(in oklch, var(--accent) 55%, transparent)); box-shadow: 0 0 12px -2px var(--accent); pointer-events: none; /* ⚠️ Свой слой обязателен. Без него полоса перерисовывалась каждый кадр вместе со свечением, задевала полосу под шапкой — и стекло шапки пересобиралось заново. Вдвоём они срезали треть кадров: 44 вместо 60. На своём слое масштаб живёт на композиторе и ничего не пачкает. */ will-change: transform; } @supports (animation-timeline: scroll()) { body::before { animation: readProgress linear both; animation-timeline: scroll(root block); } @keyframes readProgress { to { transform: scaleX(1); } } } @media (prefers-reduced-motion: reduce) { body::before { display: none; } } /* ═══════════ таблица сравнения: живее ═══════════ */ .cmp { position: relative; } /* ⚠️ Липкой шапке здесь не место: у таблицы стоит обрезка по скруглению, и sticky внутри неё цепляется за контейнер, а не за экран — заголовок наезжал на первую строку. */ .cmp-head { background: rgba(0, 0, 0, .22); } .cmp-row .bad { position: relative; padding-left: 20px; } .cmp-row .bad::before { content: ''; position: absolute; left: 0; top: 0.42em; width: 9px; height: 9px; border-radius: 50%; background: #e8836b; box-shadow: 0 0 0 4px rgba(232, 131, 107, 0.14); } .cmp-row .ok { position: relative; padding-left: 20px; } .cmp-row .ok::before { content: ''; position: absolute; left: 0; top: 0.42em; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(27, 210, 179, 0.16); } /* число пользователей у конкурентов — приборным шрифтом покрупнее */ .cmp-row .num { font-size: 0.95rem; color: var(--paper); opacity: 0.75; } .cmp-row.us .num { color: var(--accent); opacity: 1; } /* ═══════════ телефон: гамбургер вместо трёх элементов ═══════════ */ .burger { display: none; } @media (max-width: 900px) { /* Порядок в капсуле: логотип — установка — меню. Меню крайнее справа, под большой палец. */ .burger { display: grid; place-content: center; gap: 5px; order: 3; width: 44px; height: 44px; flex: none; border-radius: 12px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.24); } .burger span { display: block; width: 17px; height: 1.5px; border-radius: 2px; background: var(--paper); transition: transform 0.28s var(--ease), opacity 0.2s; } .burger[aria-expanded='true'] span:first-child { transform: translateY(3.2px) rotate(45deg); } .burger[aria-expanded='true'] span:last-child { transform: translateY(-3.2px) rotate(-45deg); } .nav-login { display: none; } /* ⚠️ Кнопка остаётся кнопкой со словом: голая стрелка вниз читается как «скачать файл», а не «поставить расширение». Просто короче подпись. */ .top-in > .btn-primary { order: 2; margin-inline-start: auto; margin-inline-end: 8px; padding: 0 16px; height: 44px; min-height: 44px; font-size: 0.88rem; border-radius: 12px; /* тот же радиус, что у меню */ } /* Значок установки рядом со словом. Выровнен по оптической середине: у стрелки центр тяжести ниже геометрического, поэтому она поднята на пиксель — иначе кажется, что она проваливается под текст. */ .top-in > .btn-primary { gap: 8px; } .top-in > .btn-primary::before { content: ''; width: 16px; height: 16px; flex: none; margin-top: -1px; align-self: center; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11'/%3E%3Cpath d='M7.5 10.5L12 15l4.5-4.5'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11'/%3E%3Cpath d='M7.5 10.5L12 15l4.5-4.5'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E") center / contain no-repeat; } .top-in > .btn-primary::after { display: none; } /* ⚠️ Панель НЕ в потоке. Раньше она стояла обычным блоком внутри шапки, шапка от этого вырастала и сдвигала вниз всю страницу — открываешь меню, а первый экран уезжает. Теперь висит под капсулой поверх содержимого. */ .top .wrap { position: relative; } .mobile-nav { position: absolute; z-index: 5; inset-inline: var(--pad); top: 100%; margin-top: 8px; display: grid; gap: 2px; padding: 10px; border-radius: 18px; border: 1px solid var(--line); background: color-mix(in oklch, #0a0e0e 97%, transparent); backdrop-filter: blur(22px) saturate(1.4); box-shadow: 0 18px 50px -20px rgba(0, 0, 0, 0.8); animation: navDrop 0.26s var(--ease) both; } .mobile-nav[hidden] { display: none; } @keyframes navDrop { from { opacity: 0; transform: translateY(-8px); } } .mobile-nav > a { display: flex; align-items: center; gap: 10px; padding: 14px 14px; border-radius: 12px; font-family: var(--font-display); font-weight: 650; font-size: 1.05rem; transition: background 0.2s; } .mobile-nav > a:active { background: rgba(255, 255, 255, 0.06); } .mobile-nav > a i { font-style: normal; font-family: var(--font-mono); font-size: 0.66rem; color: var(--accent); opacity: 0.8; } .mobile-nav-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; padding: 12px 4px 4px; border-top: 1px solid var(--line); } .mobile-nav-foot .btn { flex: 1; justify-content: center; } .mobile-nav-clock { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 0.74rem; color: var(--dim); } .mobile-nav-clock b { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: tick 2.4s ease-in-out infinite; } } /* ⚠️ На узком телефоне слово в кнопке уже не помещается рядом с меню — там оставляем только значок, но с подписью для скринридера. */ /* ⚠️ Значок вместо слова — только когда места правда нет. На 390 подпись помещается, и «Add» понятнее голой стрелки: она читается как «скачать файл». Форма ровно как у кнопки меню, иначе они спорят друг с другом. */ @media (max-width: 359px) { .top-in > .btn-primary { padding: 0 12px; font-size: 0.84rem; } } /* подпись кнопки установки: полная на десктопе, короткая на телефоне */ .cta-short { display: none; } @media (max-width: 900px) { .cta-full { display: none; } .cta-short { display: inline; } } /* ── форма поддержки ───────────────────────────────────────────────────── Живёт на /support. Полей на сайте до неё не было ни одного, поэтому стили заводятся здесь — но ТОЛЬКО на существующих токенах, без новых цветов: рамки берут --line-2, фон --glass, кнопка — общий .btn-primary. */ .support-form { background: var(--glass); border: 1px solid var(--line); border-radius: 20px; padding: 26px; display: grid; gap: 16px; } .support-form label { display: grid; gap: 7px; font-size: 0.86rem; color: var(--muted); } .support-form label span { color: var(--dim); } /* ⚠️ Подпись и пометка «optional» — ОДНОЙ строкой. Сам label здесь grid, и любой прямой потомок становится отдельной строкой: пометка уезжала под название поля и читалась как второе поле. */ .support-form .support-cap { color: var(--muted); } .support-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .support-form input[type="text"], .support-form input[type="email"], .support-form select, .support-form textarea { width: 100%; padding: 12px 14px; border-radius: 13px; border: 1px solid var(--line-2); background: rgba(0, 0, 0, 0.24); color: var(--paper); font: inherit; font-size: 0.95rem; } .support-form textarea { resize: vertical; min-height: 132px; } /* ── свой выпадающий список ── ⚠️ Раскрытый список нативного