/* NiVa · блоки страниц вместо картинок-вставок Цвет раздела — --tone (заливки, полосы) и --tone-ink (текст, ссылки). Разделы: модели — свои цвета, цены — бирюза, вопросы — терракота, память — роза, новости — лайм, сравнение — сланец. Анимации включает figures.js (класс .fx на ); без скрипта всё видно сразу и целиком. Раскладка блока зависит от его собственной ширины (container fig), а не от окна: в колонке текста и во всю ширину один и тот же блок складывается по-разному. */ :root { --tone: var(--accent); --tone-ink: var(--accent); } /* Палитра тем (26.09, светлая «туманная»). У сайта акцент «розовое дерево» (--accent): ссылки и акцентные слова; кнопки — графит. У каждой темы свой приглушённый цвет из одной палитры — одна светлота, разный тон: --cv-ink — фигуры, подписи и ссылки (на фоне страницы не слабее 4,5:1), --cv-bg — светлая подложка обложки, --cv-deep — самый тёмный тон (заголовок обложки, точки). Этим цветом красятся обложка темы и украшения её страницы (крошки, полоса чтения, черта над разделом, рамки блоков). Модели — в своих цветах: Anima синяя, Levia зелёная, Lux янтарная. */ .cvp-anima, .tone-anima { --cv-ink: #9c4f4a; --cv-bg: #efe3e0; --cv-deep: #4a2320; } .cvp-levia, .tone-levia { --cv-ink: #92635d; --cv-bg: #ece4e2; --cv-deep: #43302d; } .cvp-lux, .tone-lux { --cv-ink: #7b6c68; --cv-bg: #e9e5e4; --cv-deep: #3a3230; } .cvp-memory, .tone-memory { --cv-ink: #9c4f4a; --cv-bg: #efe3e0; --cv-deep: #4a2320; --cv-moon: #fbf4df; } .cvp-prices, .tone-prices, .tone-social { --cv-ink: #9c4f4a; --cv-bg: #efe3e0; --cv-deep: #4a2320; } .cvp-faq, .tone-faq { --cv-ink: #9c4f4a; --cv-bg: #efe3e0; --cv-deep: #4a2320; } .cvp-updates, .tone-updates { --cv-ink: #9c4f4a; --cv-bg: #efe3e0; --cv-deep: #4a2320; } .cvp-compare { --cv-ink: #9c4f4a; --cv-bg: #efe3e0; --cv-deep: #4a2320; } /* Страница темы — украшения в её цвете (сравнение — фирменным синим). */ .tone-anima, .tone-levia, .tone-lux, .tone-memory, .tone-prices, .tone-social, .tone-faq, .tone-updates { --tone: var(--cv-ink); --tone-ink: var(--cv-ink); } /* Страница в цвете раздела: ссылки, фокус, выделение, шапка статьи. */ /* Выделение текста — везде одного цвета, акцентом (site.css), 01.10. */ /* Только сама статья (main > article): карточки тарифов и мозаики — тоже
, им свечение раздела не нужно. */ body[class*="tone-"] main > article { position: relative; isolation: isolate; } body[class*="tone-"] main > article::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: -68px; height: 720px; pointer-events: none; background: radial-gradient(46% 60% at 88% 0%, color-mix(in srgb, var(--tone) 16%, transparent), transparent 72%), radial-gradient(30% 40% at 4% 18%, color-mix(in srgb, var(--tone) 7%, transparent), transparent 70%); } body[class*="tone-"] .crumbs > span:last-child { color: var(--tone-ink); display: inline-flex; align-items: center; gap: 8px; } body[class*="tone-"] .crumbs > span:last-child::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tone); } body[class*="tone-"] .toc a.on { color: var(--tone-ink); border-left-color: var(--tone); } body[class*="tone-"] .prose blockquote { border-left-color: var(--tone); } body[class*="tone-"] .prose li::marker { color: var(--tone); } body[class*="tone-"] .prose h2::before { content: ""; display: block; width: 28px; height: 2px; margin-bottom: 18px; background: var(--tone); border-radius: 2px; } body[class*="tone-"] .qa[open] summary { color: var(--tone-ink); } /* Полоса чтения — на движке прокрутки, где он есть. */ .read-progress { display: none; } @supports (animation-timeline: scroll()) { .read-progress { display: block; position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: 2px; background: var(--tone); transform-origin: 0 50%; transform: scaleX(0); animation: read-grow linear both; animation-timeline: scroll(root); } @keyframes read-grow { to { transform: scaleX(1); } } } /* ── Каркас блока ─────────────────────────────────────────────────────── */ .fig { --c: var(--tone); container: fig / inline-size; position: relative; isolation: isolate; overflow: hidden; margin: 44px 0; padding: clamp(20px, 3.4vw, 36px); border: 1px solid color-mix(in srgb, var(--tone) 22%, var(--line)); border-radius: var(--r-lg); background: var(--surface); color: var(--ink-2); font-size: 16px; line-height: 1.5; font-variant-numeric: tabular-nums; } .fig::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(70% 60% at 100% 0%, color-mix(in srgb, var(--tone) 9%, transparent), transparent 70%); } .fig p, .fig ul, .fig ol { margin: 0; padding: 0; } .fig li { margin: 0; padding: 0; list-style: none; } .fig code { font: 500 15px/1 var(--mono); background: none; padding: 0; border-radius: 0; } .fig h3 { margin: 0; font: 300 clamp(18px, 2vw, 23px)/1.15 var(--serif); letter-spacing: -0.025em; color: var(--ink); text-wrap: balance; } .fig figcaption { margin: 24px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.5; color: var(--ink-2); text-align: left; } .fig .fg-k { margin: 0 0 10px; font: 500 12.5px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .fig .fg-k.tone { color: color-mix(in srgb, var(--tone-ink) 85%, var(--ink)); } /* 4,5:1 и на подложке блока */ .fig .fg-head { margin-bottom: 26px; } .fig .fg-sub { margin-top: 8px; font-size: 15px; color: var(--muted); max-width: 37.2em; } .fig .fg-note { margin-top: 18px; font-size: 15px; color: var(--ink-2); } .fig .fg-note b { font-weight: 600; } .fig .fg-mini-note { margin-top: 4px; font-size: 13px; color: var(--muted); } .fig .fg-pct { font: 500 20px/1 var(--sans); color: var(--ink); } .cnt { font-variant-numeric: tabular-nums; } .article-fig { margin: 0 0 72px; } .article-fig .fig { margin: 0; padding: clamp(24px, 4.6vw, 56px); } /* Полоса-величина: ширина — --v от 0 до 1, цвет — --c. */ .fbar { display: block; height: 10px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 7%, transparent); overflow: hidden; } .fbar i { display: block; height: 100%; border-radius: inherit; background: var(--c); clip-path: inset(0 calc((1 - var(--v)) * 100%) 0 0 round 99px); transition: clip-path 1.2s var(--ease) calc(var(--d, 0) * 110ms + 150ms); } /* ── Цифры и полосы ───────────────────────────────────────────────────── */ .fg-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; } .fg-stat { display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--line); } .fg-stat .cnt { font: 300 clamp(32px, 3.8vw, 44px)/1 var(--serif); letter-spacing: -0.025em; color: var(--ink); } /* Какая модель — точкой её цвета перед подписью, а не цветом крупной цифры. */ .fg-stat:not(.wide) > span::before, .fg-big > span::before, .fg-list > div > span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--c); vertical-align: 0.1em; } .fg-stat > span { font-size: 14.5px; color: var(--muted); } .fg-stat.wide { grid-column: span 2; background: var(--paper); border-color: var(--line); justify-content: flex-end; } .fg-stat.wide .fg-k { margin: 0; } @container fig (max-width: 520px) { .fg-stat.wide { grid-column: auto; } } .fg-bars { display: grid; gap: 14px; margin-top: 8px; } .fg-barrow { display: grid; grid-template-columns: 84px minmax(0, 1fr) 76px; align-items: center; gap: 16px; font-size: 15px; } .fg-barrow > span { font-weight: 500; } .fg-barrow > b { font: 500 15px/1 var(--mono); text-align: right; color: var(--ink); } .fg-bars.mini { gap: 8px; margin-top: 0; } .fg-bars.mini .fg-barrow { grid-template-columns: 52px minmax(0, 1fr) 64px; gap: 10px; font-size: 13px; color: var(--muted); } .fg-bars.mini .fg-barrow > b { font: 500 13px/1 var(--mono); color: var(--muted); } .fg-bars.mini .fg-barrow.on > b { color: var(--ink); } .fg-bars.mini .fbar { height: 6px; } .fg-bars.mini .fg-barrow.on > span { color: var(--ink); font-weight: 600; } /* ── Тарифы ───────────────────────────────────────────────────────────── */ .fg-cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .fg-cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } @container fig (max-width: 560px) { .fg-cols3, .fg-cols2 { grid-template-columns: 1fr; } } .fg-plan, .fg-pay { display: flex; flex-direction: column; gap: 12px; padding: 20px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); transition: transform .5s var(--ease), border-color .3s ease; } .fg-plan:hover, .fg-pay:hover { border-color: var(--line-2); } .fg-pay.hot { border-color: color-mix(in srgb, var(--tone) 45%, var(--line)); } /* Тариф-рекомендация — заливкой и плашкой, а не одной тонкой обводкой. */ .fg-plan.hot { position: relative; border-color: color-mix(in srgb, var(--tone) 60%, var(--line)); background: color-mix(in srgb, var(--tone) 11%, var(--paper)); } .fg-plan.hot:hover { border-color: var(--tone); } /* На подложке рекомендованного тарифа мелкие подписи темнее: --muted там ровно на границе 4,5:1. */ .fg-plan.hot :is(.fg-price small, .fg-per, .fg-big span, .fg-chip) { color: var(--ink-2); } .fg-badge { align-self: flex-start; margin: -4px 0 -2px; padding: 5px 10px; border-radius: 999px; background: var(--tone); color: var(--paper); font: 600 12px/1 var(--sans); letter-spacing: .01em; } .fig .fg-plan h3, .fig .fg-pay h3 { font-size: 26px; } .fig .fg-pay p { font-size: 14.5px; color: var(--muted); } .fig .fg-price { font: 500 21px/1.1 var(--sans); color: var(--ink); } .fg-price small { font-weight: 400; font-size: 13px; color: var(--muted); } .fig .fg-models { display: flex; flex-wrap: wrap; gap: 6px; } /* Модели тарифа — текстом через запятую, без «пузырей» и точек (30.09). */ .fg-models span { display: inline-flex; align-items: center; font-size: 14px; color: var(--ink-2); } .fg-models span:not(:last-child)::after { content: ","; } .fg-models i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); } .fg-big { display: flex; flex-direction: column; gap: 4px; padding-top: 12px; border-top: 1px solid var(--line); } .fg-big .cnt { font: 300 33px/1 var(--serif); letter-spacing: -0.025em; color: var(--ink); } .fg-big span { font-size: 13.5px; color: var(--muted); } .fig .fg-per { font: 400 13px/1.3 var(--mono); color: var(--muted); } .fg-per b { font-weight: 500; color: var(--ink); } /* «много общения» — обычной строкой, как .plan-who на «Ценах», без плашки (30.09). */ .fg-chip { align-self: flex-start; margin-top: auto; font-size: 14px; color: var(--muted); } /* ── Без подписки: $1 и график ────────────────────────────────────────── */ .fg-split { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 36px; align-items: start; } .fg-split.narrow { grid-template-columns: auto minmax(0, 1fr); align-items: center; } @container fig (max-width: 600px) { .fg-split, .fg-split.narrow { grid-template-columns: 1fr; gap: 24px; } } .fg-payg { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px 48px; align-items: end; } .fg-payg .fg-list { margin-top: 0; } .fig .fg-chart-k { margin-top: 36px; margin-bottom: 14px; } @container fig (max-width: 480px) { .fg-payg { grid-template-columns: 1fr; } } .fig .fg-usd { margin-top: 4px; font: 300 clamp(55px, 6.8vw, 79px)/0.9 var(--serif); letter-spacing: -0.025em; color: var(--tone-ink); } .fg-list { display: grid; gap: 12px; margin-top: 22px; } .fg-list > div { display: flex; align-items: baseline; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); } .fg-list .cnt { min-width: 64px; font: 300 23px/1 var(--serif); letter-spacing: -0.02em; color: var(--ink); } .fg-list span { font-size: 14.5px; color: var(--muted); } .fg-chart { display: block; width: 100%; height: auto; overflow: visible; } .fg-chart .axis { stroke: var(--line-2); stroke-width: 1; } .fg-chart .guide { stroke: var(--ink); stroke-dasharray: 3 4; opacity: .35; } .fg-chart .tick { fill: var(--faint); font: 400 13px var(--mono); text-anchor: middle; } .fg-chart .end { text-anchor: end; } .fg-chart .ln-bal, .fg-chart .ln-pro { fill: none; stroke-width: 3; stroke-linecap: round; } .fg-chart .ln-bal { stroke: var(--tone); } .fg-chart .ln-pro { stroke: color-mix(in srgb, var(--ink) 50%, transparent); } .fg-chart .pt { fill: var(--ink); stroke: var(--surface); stroke-width: 3; cursor: grab; } .fg-chart .pt:focus-visible { outline: none; stroke: var(--accent); } .fg-chart .pt-be { fill: var(--muted); } .fg-chart[data-payg] { touch-action: pan-y; cursor: pointer; user-select: none; -webkit-user-select: none; } .fg-chart.drag, .fg-chart.drag .pt { cursor: grabbing; } .fg-chart .lb { fill: var(--ink-2); font: 500 13px var(--sans); } .fg-chart .lb.bal { fill: var(--tone-ink); } .fg-chart .lb.pro { fill: var(--ink-2); } .fg-chart .lb.big { fill: var(--ink); font: 300 15px var(--serif); letter-spacing: -0.02em; } .fg-chart .lb.dim { fill: var(--muted); font-weight: 400; } /* Подписи поверх линий графика — с подложкой цвета карточки (30.09): после перетаскивания «87 ответов в день» перечёркивала линия. */ .fg-chart .lb, .fg-chart .tick { paint-order: stroke; stroke: var(--surface); stroke-width: 5px; stroke-linejoin: round; } /* Невидимый круг вокруг точки — цель для пальца; двигается вместе с ней (figures.js). */ .fg-chart .pt-hit { fill: transparent; cursor: grab; } /* Итог под графиком — только на узком блоке (там подписи у точки не влезают). */ .fg-readout { display: none; } /* ── Таблицы ──────────────────────────────────────────────────────────── */ .fg-tablewrap { overflow-x: auto; overflow-y: hidden; margin: 0 -4px; padding: 0 4px; } .fg-table { width: 100%; min-width: 520px; border-collapse: separate; border-spacing: 0; font-size: 15px; } .fg-table th, .fg-table td { padding: 13px 12px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; } .fg-table thead th { padding-top: 4px; font: 300 14px/1.2 var(--serif); letter-spacing: -0.02em; } .fg-table thead th:first-child { text-align: left; font: 500 11.5px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .fg-table thead th span { display: block; margin-top: 4px; font: 400 12px/1.35 var(--sans); color: var(--muted); } .fg-table tbody th { text-align: left; font-weight: 400; } .fg-table tbody th b { display: block; font-weight: 500; color: var(--ink); } .fg-table tbody th span { display: block; font-size: 13px; color: var(--muted); } .fg-table td b { display: block; font-weight: 500; font-size: 16px; color: var(--ink); } .fg-table td span { display: block; font-size: 13.5px; color: var(--muted); } .fg-table tbody tr:last-child > * { border-bottom: 0; } .fg-bench .feat { background: color-mix(in srgb, var(--anima) 6%, transparent); } .fg-bench td.best b { color: var(--ink); } .fg-bench td.best { background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 10px; } .fg-rp td.win { background: color-mix(in srgb, var(--accent) calc(var(--w) * 17%), transparent); } .fg-rp td.win b { color: var(--ink); } .fg-rp td.lose b { color: var(--muted); } .fig .fg-tells { margin-top: 26px; font-size: 14px; } .fg-tells thead th { font: 500 12px/1.3 var(--mono) !important; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .fg-tells td { color: var(--ink-2); } /* Точка «есть / коротко / нет». */ .fdot { display: inline-block; width: 18px; height: 18px; border-radius: 50%; vertical-align: middle; } .fdot.full { background: var(--c); } .fdot.half { border: 2px solid var(--c); background: linear-gradient(90deg, var(--c) 50%, transparent 50%); } .fdot.none { border: 1.5px dashed color-mix(in srgb, var(--muted) 55%, transparent); } /* Кто кого: полоса Anima против Levia. */ .fg-h2h { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 20px; align-items: center; margin-top: 28px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); } .fg-h2h > div > b { display: block; font-weight: 600; color: var(--ink); } .fg-h2h > div > span { display: block; font-size: 13.5px; color: var(--muted); } .fig .fg-h2h .fg-pct { font: 300 23px/1 var(--serif); letter-spacing: -0.02em; } .fg-duel { position: relative; height: 12px; border-radius: 99px; background: var(--levia); overflow: hidden; } .fg-duel i { position: absolute; inset: 0; background: var(--anima); clip-path: inset(0 calc((1 - var(--v)) * 100%) 0 0); transition: clip-path 1.4s var(--ease) .3s; } .fg-duel::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--surface); } @container fig (max-width: 560px) { .fg-h2h { grid-template-columns: 1fr auto; } .fg-h2h > div:first-child { grid-column: 1 / -1; } } /* ── Шаги и команды ───────────────────────────────────────────────────── */ .fig .fg-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } .fg-steps li { position: relative; display: flex; flex-direction: column; gap: 6px; } .fg-steps li > b { font-weight: 600; color: var(--ink); } .fg-steps li > span:not(.fg-n) { font-size: 14.5px; color: var(--muted); } .fg-n { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 8px; border-radius: 50%; font: 500 15px/1 var(--mono); background: var(--tone-ink); color: var(--surface); } .fg-steps .farrow { position: absolute; top: 10px; right: -27px; width: 26px; height: 16px; } .farrow { fill: none; stroke: color-mix(in srgb, var(--tone) 60%, var(--line-2)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } @container fig (max-width: 560px) { .fig .fg-steps { grid-template-columns: 1fr; gap: 18px; } .fg-steps .farrow { display: none; } } .fg-cmds { display: flex; flex-wrap: wrap; gap: 10px; max-width: 250px; } .fig .fg-cmds code { padding: 10px 14px; border-radius: 10px; font-size: 16px; color: color-mix(in srgb, var(--c) 82%, var(--ink)); background: color-mix(in srgb, var(--c) 9%, transparent); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); } .fg-split.narrow .fg-sub + .fg-sub { margin-top: 4px; } .fg-dash { padding: 30px 24px; border: 1.5px dashed color-mix(in srgb, var(--tone) 50%, var(--line)); border-radius: var(--r); text-align: center; } .fig .fg-dash .fg-sub { margin: 10px auto 18px; } .fig .fg-dash .fg-k { margin: 0; } /* ── Паспорт модели ────────────────────────────────────────────────────── Имя с меткой и фраза о характере, под ними четыре показателя в ряд. Цвет модели — только точка в метке. */ .fm-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 20px 48px; align-items: stretch; } .fig .fg-name { font: 300 clamp(40px, 6.8cqi, 73px)/0.92 var(--serif); letter-spacing: -0.025em; color: var(--ink); } .fg-name span { font-style: normal; color: var(--tone-ink); } .fig .fg-mbadge { display: inline-flex; align-items: center; margin-bottom: 16px; padding: 6px 12px 6px 10px; border-radius: 999px; border: 1px solid var(--line-2); font: 500 13px/1 var(--sans); color: var(--ink-2); } .fg-mbadge .mdot { margin-right: 8px; } .fig .fg-tag { margin-top: 16px; font-size: 18px; line-height: 1.5; color: var(--ink-2); max-width: 24.8em; } .fm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 0.8fr)) minmax(0, 1.2fr); gap: 0; margin-top: 36px; border-top: 1px solid var(--line); } .fm-cell { display: flex; flex-direction: column; gap: 6px; padding: 20px 24px 4px 0; } .fm-cell + .fm-cell { padding-left: 24px; border-left: 1px solid var(--line); } .fig .fm-cell .fg-k { margin: 0 0 4px; } .fm-cell > b { font: 300 23px/1.1 var(--serif); letter-spacing: -0.025em; color: var(--ink); } .fm-cell > span { font-size: 14px; line-height: 1.4; color: var(--muted); } .fm-cost .fg-bars { margin-top: 10px; } .fm-cost .fg-bars.mini .fg-barrow { grid-template-columns: 52px minmax(0, 1fr); } @container fig (max-width: 860px) { .fm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fm-cell { padding: 18px 18px 18px 0; } .fm-cell + .fm-cell { padding-left: 0; border-left: 0; } .fm-cell:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--line); } .fm-cell:nth-child(n+3) { border-top: 1px solid var(--line); } } @container fig (max-width: 560px) { .fm-head { grid-template-columns: 1fr; gap: 14px; } .fm-grid { grid-template-columns: 1fr; margin-top: 24px; } .fm-cell, .fm-cell:nth-child(even) { padding: 16px 0; border-left: 0; } .fm-cell + .fm-cell { border-top: 1px solid var(--line); } .fm-cell > b { font-size: 26px; } } /* Умеет / не умеет. */ .fg-cc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } /* «Что она умеет»: один список, у каждой модели свои отметки (30.09). */ .fig .fg-can ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(6, auto); grid-auto-flow: column; gap: 12px 32px; } @container fig (max-width: 560px) { .fig .fg-can ul { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; } } .fig .fg-can li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.35; color: var(--ink); } .fig .fg-can li.no { color: var(--muted); } .fig .fg-can li small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--muted); } .fg-can svg { flex: none; width: 24px; height: 24px; padding: 3px; border-radius: 50%; fill: none; stroke-linecap: round; stroke-linejoin: round; } @container fig (max-width: 480px) { .fg-cc { grid-template-columns: 1fr; } } .fig .fg-cc ul { display: grid; gap: 12px; } .fig .fg-cc li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; color: var(--ink); } .fig .fg-cc .no li { color: var(--muted); } .fg-cc svg { flex: none; width: 24px; height: 24px; padding: 3px; border-radius: 50%; fill: none; stroke-linecap: round; stroke-linejoin: round; } .ick { stroke: var(--tone-ink); stroke-width: 2.6; background: color-mix(in srgb, var(--tone) 14%, transparent); } .icx { stroke: var(--faint); stroke-width: 2; border: 1px dashed var(--line-2); } /* Глубина памяти Levia. */ .fg-drow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 0.8fr); gap: 20px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); } .fg-drow:first-child { padding-top: 0; } .fg-drow b { display: block; font-weight: 600; color: var(--ink); } .fg-drow span { display: block; font-size: 14px; color: var(--muted); } /* ── Память ───────────────────────────────────────────────────────────── */ .fg-layers { display: grid; grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1fr); gap: 12px; align-items: center; } .fg-box { padding: 24px; border-radius: var(--r); background: color-mix(in srgb, var(--tone) 7%, var(--paper)); border: 1px solid color-mix(in srgb, var(--tone) 22%, var(--line)); } .fig .fg-box h3 { font-size: 30px; } .fig .fg-box p { margin-top: 8px; font-size: 15px; } .fig .fg-box p.fg-k { margin-top: 16px; margin-bottom: 0; font-size: 11.5px; } .fg-mid { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; font: 500 12px/1.2 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .fg-mid .farrow { width: 96px; height: 20px; } .fg-flow { position: absolute; left: 8px; bottom: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--tone); opacity: 0; } .fig.on .fg-flow { animation: fg-flow 2.6s var(--ease) infinite 1.2s; } @keyframes fg-flow { 0% { opacity: 0; transform: translateX(0); } 15% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; transform: translateX(78px); } } @container fig (max-width: 560px) { .fg-layers { grid-template-columns: 1fr; } .fg-mid { flex-direction: row; justify-content: center; } .fg-mid .farrow { transform: rotate(90deg); width: 40px; } .fg-flow { display: none; } } /* Ночь: фирменная тёмная панель в обеих темах. */ .fig.fig-mem-night { background: var(--night); color: var(--night-ink); border-color: var(--night-line); --moon: #efe4c4; } .fig.fig-mem-night::before { background: radial-gradient(1.4px 1.4px at 12% 22%, rgba(236, 234, 228, .8), transparent), radial-gradient(1.2px 1.2px at 28% 64%, rgba(236, 234, 228, .5), transparent), radial-gradient(1.6px 1.6px at 46% 14%, rgba(236, 234, 228, .7), transparent), radial-gradient(1.2px 1.2px at 58% 42%, rgba(236, 234, 228, .45), transparent), radial-gradient(1.4px 1.4px at 71% 76%, rgba(236, 234, 228, .6), transparent), radial-gradient(1.2px 1.2px at 92% 58%, rgba(236, 234, 228, .5), transparent), radial-gradient(60% 70% at 90% 0%, color-mix(in srgb, var(--tone) 18%, transparent), transparent 70%); animation: fg-twinkle 4.5s ease-in-out infinite alternate; animation-play-state: paused; } .fig.fig-mem-night.on::before { animation-play-state: running; } @keyframes fg-twinkle { from { opacity: .55; } to { opacity: 1; } } .fg-night { position: relative; } .fg-moon { position: absolute; top: -4px; right: 6px; width: 54px; height: 54px; border-radius: 50%; box-shadow: -13px 9px 0 0 var(--moon); filter: drop-shadow(0 0 18px rgba(239, 228, 196, .35)); } .fig.on .fg-moon { animation: fg-float 7s ease-in-out infinite alternate; } @keyframes fg-float { to { transform: translateY(8px) rotate(-6deg); } } .fig .fg-night ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-top: 64px; } .fg-night li { display: flex; flex-direction: column; gap: 6px; } .fg-night li > b { font-weight: 600; color: var(--night-ink); } .fg-night li > span:not(.fg-n) { font-size: 14.5px; color: var(--night-muted); } .fg-night .fg-n { background: color-mix(in srgb, var(--tone) 55%, #fff); color: var(--night); } .fig.fig-mem-night .fg-note, .fig.fig-mem-night figcaption { color: var(--night-muted); border-color: var(--night-line); } @container fig (max-width: 560px) { .fig .fg-night ol { grid-template-columns: 1fr; gap: 18px; } } /* ── Новости и соцсети ────────────────────────────────────────────────── */ .fig .fg-upd h3 { font-size: clamp(28px, 3.4vw, 40px); } .fg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; } .fg-chips span { padding: 8px 14px; border-radius: 99px; font-size: 14.5px; color: var(--ink); background: color-mix(in srgb, var(--tone) 11%, transparent); border: 1px solid color-mix(in srgb, var(--tone) 26%, transparent); } .fg-soc { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); } .fig .fg-soc .fg-k { margin: 0; } .fg-soc b { font: 500 16px/1.3 var(--mono); color: var(--tone-ink); } .fg-soc span { font-size: 14px; color: var(--muted); } /* ── Анимации: только когда скрипт на месте ───────────────────────────── */ .fx .fig:not(.in) .fbar i { clip-path: inset(0 100% 0 0 round 99px); } .fx .fig:not(.in) .fg-duel i { clip-path: inset(0 100% 0 0); } .fig .draw { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--ease) .25s; } .fx .fig:not(.in) .draw { stroke-dashoffset: 1; } .fig .fg-cc li .draw { transition-delay: calc(var(--d, 0) * 110ms + 300ms); } .fg-table tbody tr, .fg-plan, .fg-pay, .fg-stat, .fg-steps li, .fg-night li, .fg-chips span, .fg-cmds code, .fg-soc, .fm-cell, .fg-box, .fg-list > div, .fg-cc li { transition: transform .8s var(--ease) calc(var(--d, 0) * 80ms + 80ms), opacity .8s ease calc(var(--d, 0) * 80ms + 80ms); } .fx .fig:not(.in) :is(.fg-table tbody tr, .fg-plan, .fg-pay, .fg-stat, .fg-steps li, .fg-night li, .fg-chips span, .fg-cmds code, .fg-soc, .fm-cell, .fg-box, .fg-list > div, .fg-cc li) { opacity: .2; transform: translateY(10px); } .fdot { transition: transform .6s var(--ease) calc(var(--d, 0) * 70ms + 250ms); } .fx .fig:not(.in) .fdot { transform: scale(.25); } .fig .fg-name { transition: transform 1.2s var(--ease), letter-spacing 1.2s var(--ease); } .fx .fig:not(.in) .fg-name { transform: translateY(14px); letter-spacing: -0.01em; } /* ── Узкий блок (телефон): таблица моделей — строками ─────────────────── Подпись строки сверху, под ней значения трёх моделей с их названием. Раньше таблица была не уже 520 px и уезжала вбок: две колонки из трёх на телефоне было видно только краем. */ @container fig (max-width: 560px) { .fg-table.fg-stack { min-width: 0; } .fg-stack, .fg-stack thead, .fg-stack tbody { display: block; } .fg-stack thead tr { display: block; } .fg-stack thead th:not(:first-child) { display: none; } .fg-stack thead th:first-child { display: block; padding: 0 0 6px; border: 0; } .fg-stack thead th:first-child:empty { display: none; } .fg-stack tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 14px 0; border-bottom: 1px solid var(--line); } .fg-stack.fg-stack2 tbody tr { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fg-stack tbody tr:last-child { border-bottom: 0; } .fg-stack tbody th { grid-column: 1 / -1; padding: 0 0 4px; border: 0; } .fg-stack td { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 9px 4px; border: 0; border-radius: 10px; background: color-mix(in srgb, var(--ink) 4%, transparent); } .fg-stack td::before { content: attr(data-m); margin-bottom: 3px; font: 500 11.5px/1.2 var(--sans); color: var(--muted); white-space: nowrap; } .fg-stack td b { font-size: 15px; } .fg-stack td span { font-size: 12.5px; } .fg-bench .feat { background: color-mix(in srgb, var(--anima) 9%, transparent); } .fg-bench tbody tr > * { border-bottom: 0; } } /* Паспорт модели на телефоне: строки «подпись — значение», а не столбик карточек. */ @container fig (max-width: 560px) { /* Подпись — по своей ширине и в одну строку, значение — в остаток и при нехватке места на вторую строку (30.09: на 360 «текущий разговор» наезжал на «ПАМЯТЬ»). */ .fm-cell, .fm-cell:nth-child(even) { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: baseline; padding: 13px 0; } .fig .fm-cell .fg-k { grid-column: 1; margin: 0; white-space: nowrap; letter-spacing: 0.04em; } .fm-cell > b { grid-column: 2; grid-row: 1; min-width: 0; font-size: 19px; line-height: 1.2; text-align: right; overflow-wrap: break-word; } .fm-cell > span { grid-column: 1 / -1; font-size: 13.5px; } .fm-cost .fg-bars { grid-column: 1 / -1; } .fig .fg-tag { font-size: 16.5px; } } /* Тарифы и прочие карточки внутри блока — без двойных полей. */ @container fig (max-width: 560px) { .fg-plan, .fg-pay, .fg-stat { padding: 16px; } .fg-big .cnt { font-size: 38px; } } /* Паспорт модели без картинки и плашки (владелец 29.09): одна колонка, ниже. */ .fm-head { grid-template-columns: 1fr; } .fig .fm-kind { margin: 0 0 10px; } .fig .fg-name { font-size: clamp(36px, 5.4cqi, 58px); } .fig .fg-tag { margin-top: 10px; } .fm-grid { margin-top: 24px; } /* Компактная таблица «тариф — модели». */ .fg-kv { width: 100%; max-width: 560px; border-collapse: collapse; font-size: 15.5px; } .fg-kv caption { text-align: left; padding-bottom: 10px; font: 500 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .fg-kv th, .fg-kv td { padding: 9px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; } .fg-kv tr:last-child th, .fg-kv tr:last-child td { border-bottom: 1px solid var(--line); } .fg-kv th { width: 34%; font-weight: 600; color: var(--ink); padding-right: 16px; } .fg-kv td { color: var(--ink-2); } /* Память на моделях — словами. */ .fg-table td.w-0 { color: var(--muted); } /* --faint на карточке тёмной темы — 4,0:1 */ .fg-kv th { white-space: nowrap; } /* ── Узкий блок (телефон), 30.09 ──────────────────────────────────────── */ @container fig (max-width: 560px) { /* График «с баланса и Pro»: viewBox 580 сжат до ~316 px (×0,54) — подписи крупнее в единицах графика (~12 px на экране), точка крупнее; подписи у точки не влезают — итог строками под графиком (.fg-readout). */ .fg-chart .tick, .fg-chart .lb { font-size: 22px; } .fg-chart .lb, .fg-chart .tick { stroke-width: 8px; } .fg-chart .t-a, .fg-chart .t-b, .fg-chart .t-c { display: none; } .fg-chart .pt { r: 12px; stroke-width: 4px; } .fg-chart .pt-hit { r: 44px; } .fg-readout { display: grid; gap: 2px; margin-top: 12px; font-size: 15px; color: var(--muted); } .fg-readout b { font: 300 21px/1.2 var(--serif); letter-spacing: -0.02em; color: var(--ink); } /* Новости: пункты выпуска — обычным списком, а не плашками, похожими на кнопки. */ .fg-chips { display: block; margin-top: 14px; } .fg-chips span { display: inline; padding: 0; border: 0; border-radius: 0; background: none; font-size: 15px; color: var(--ink-2); } .fg-chips span:not(:last-child)::after { content: ", "; } /* Замеры строками: у Anima 3 та же подложка, что у всех (голубая читалась как ещё одна подсветка); подсвечено только лучшее. В «Характере» — только лучшая из двух в строке, а не почти все ячейки. */ .fg-bench .feat { background: color-mix(in srgb, var(--ink) 4%, transparent); } .fg-rp td.win { background: color-mix(in srgb, var(--ink) 4%, transparent); } .fg-rp td.win.top { background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); } .fg-stack td span { font-size: 13px; } .fg-bench td.best span, .fg-rp td.win span { color: var(--ink-2); } }