/* S3-LIGHT-DEFAULT: тёмная тема включается ТОЛЬКО явным выбором ([data-theme="dark"]). Медиа-запрос prefers-color-scheme убран: первый заход обязан быть светлым независимо от системной темы. Блоков снято: 1. */ /* ------------------------------------------------------------------ SIION - фаза 2: темы страниц и подача уровня презентации. Тема ставится атрибутом data-theme на и переопределяет ТОЛЬКО набор переменных: акцент, мягкий тон, линия, подложка, фоновый кадр. Дублирования правил нет - блоки ниже написаны один раз и читают переменные темы. Приёмы взяты из боевых колод SIION (siion-hub/preza*): экран-сцена с воздухом, крупный заголовок с цветным словом, подчёркивание заголовка полосой акцента, список с кружками, вывод в мягкой плашке, образы крупно в карточках с подписью. ------------------------------------------------------------------- */ :root { --t-accent: var(--green-deep); --t-accent-2: var(--green); --t-soft: var(--green-soft); --t-line: var(--line); --t-tint: var(--surface-2); --t-veil: 255, 255, 255; --t-shadow: 0 18px 46px rgba(22, 33, 27, .13); /* живая серебряная сетка с утверждённого кадра банки, не вектор */ --mesh: url("../brand/mesh-tile.webp"); --mesh-size: 420px; --mesh-alpha: .18; /* фактура бренда, а не обои */ --stage-pad: clamp(3rem, 7vw, 6rem); } /* ── жидкое: роса, свежая холодная зелень ───────────────────────── */ [data-theme-page="liquid"] { /* 0d7f86 давал на своей плашке 4.23:1 - ниже порога 4.5, замер гейта */ --t-accent: #0a666c; --t-accent-2: #0d8890; --t-soft: #e2f5f4; --t-line: #cfe8e6; --t-tint: #f2fafa; } /* ── гранулы: тёплая минеральная фактура ────────────────────────── */ [data-theme-page="granule"] { --t-accent: #7a6320; --t-accent-2: #a8862b; --t-soft: #f6efdc; --t-line: #e6dcc0; --t-tint: #fbf7ee; } /* ── грунт: живая земля, тёмная богатая гамма ───────────────────── */ [data-theme-page="humus"] { --t-accent: #5b4326; --t-accent-2: #7d5f36; --t-soft: #f0e9df; --t-line: #e0d5c6; --t-tint: #faf6f1; } /* ── кристалл: минерал на просвет, лабораторная чистота ─────────── */ [data-theme-page="crystal"] { --t-accent: #2a5d97; --t-accent-2: #3f7fbe; --t-soft: #e6eff8; --t-line: #d3e1ef; --t-tint: #f4f8fc; } /* data-theme стоит на , data-theme-page - на : селектор обязан быть ПОТОМКОМ. Слитная запись [data-theme][data-theme-page] не срабатывала, и в тёмной теме подставлялись светлые тона - светлая плашка со светлым текстом дала контраст 1.13:1 на таблицах норм. */ [data-theme="dark"] [data-theme-page="liquid"] { --t-accent: #57d0cb; --t-accent-2: #7fe0da; --t-soft: #0e2b2c66; --t-line: #244042; --t-tint: #141d1e; } [data-theme="dark"] [data-theme-page="granule"] { --t-accent: #d9b45c; --t-accent-2: #e6c87e; --t-soft: #2a220f66; --t-line: #3a3323; --t-tint: #1b1913; } [data-theme="dark"] [data-theme-page="humus"] { --t-accent: #cfa878; --t-accent-2: #dfc09a; --t-soft: #2a201566; --t-line: #3a3025; --t-tint: #1a1713; } [data-theme="dark"] [data-theme-page="crystal"] { --t-accent: #7db2e8; --t-accent-2: #9cc7f2; --t-soft: #14243566; --t-line: #27394c; --t-tint: #131920; } [data-theme="dark"] { --t-veil: 18, 23, 20; --mesh-alpha: .12; } /* ── сцена: секция с воздухом, как экран колоды ─────────────────── */ .stage { position: relative; padding-block: var(--stage-pad); border-top: 1px solid var(--t-line); overflow: hidden; } .stage:first-of-type { border-top: 0; } .stage--tint { background: var(--t-tint); } .stage--wide { padding-block: calc(var(--stage-pad) * 1.15); } /* фоновый кадр темы под вуалью: читаемость текста важнее картинки */ .stage__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .stage__bg img { width: 100%; height: 100%; object-fit: cover; } .stage__bg::after { content: ""; position: absolute; inset: 0; /* слева плотно - под текстом, справа кадр обязан читаться: при равномерной вуали фон выцветал в белое и сцена снова становилась пустой, ради чего вся фаза и затевалась */ background: linear-gradient(90deg, rgba(var(--t-veil), .95) 0%, rgba(var(--t-veil), .86) 46%, rgba(var(--t-veil), .42) 100%); } .stage > .wrap { position: relative; z-index: 1; } /* ── заголовки сцены ────────────────────────────────────────────── */ .stage h2, .stage__h { font-size: clamp(1.65rem, 3.6vw, 2.9rem); font-weight: 800; line-height: 1.14; letter-spacing: -.015em; margin: 0 0 var(--space-5); padding-bottom: var(--space-4); position: relative; max-width: 22ch; } .stage h2::after, .stage__h::after { content: ""; position: absolute; left: 0; bottom: 0; width: 4rem; height: 4px; border-radius: 2px; background: var(--t-accent); } .g { color: var(--t-accent); } .stage .lead { font-size: clamp(1rem, 1.35vw, 1.1875rem); color: var(--muted); line-height: 1.6; max-width: 52ch; } /* ── герой страницы ─────────────────────────────────────────────── */ .phero { position: relative; overflow: hidden; border-bottom: 1px solid var(--t-line); } .phero__bg { position: absolute; inset: 0; z-index: 0; } .phero__bg img { width: 100%; height: 100%; object-fit: cover; } .phero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(92deg, rgba(var(--t-veil), .96) 0%, rgba(var(--t-veil), .88) 44%, rgba(var(--t-veil), .34) 100%); } .phero__in { position: relative; z-index: 1; display: grid; gap: var(--space-8); padding-block: clamp(2.5rem, 6vw, 5rem); align-items: center; } @media (min-width: 60em) { .phero__in { grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: var(--space-12); } } .phero h1 { /* Roboto Condensed узкая: при прежнем кегле заголовок терял массу против колод. Добрано примерно 15 %. */ font-size: clamp(2.15rem, 5vw, 3.75rem); font-weight: 800; line-height: 1.08; letter-spacing: -.02em; max-width: 18ch; } .phero__lead { margin-top: var(--space-5); font-size: clamp(1.0625rem, 1.5vw, 1.25rem); color: var(--ink-2); max-width: 46ch; } .badge { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--t-soft); color: var(--t-accent); border-radius: var(--radius-full); padding: var(--space-2) var(--space-4); font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: var(--space-4); } /* образ продукта: карточка со слоями, как на слайде */ .figure { position: relative; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--t-shadow); background: var(--surface); border: 1px solid var(--t-line); } .figure img { width: 100%; display: block; aspect-ratio: 4 / 3; object-fit: cover; } .figure--tall img { aspect-ratio: 1 / 1; } .figure__cap { padding: var(--space-3) var(--space-4); font-size: var(--text-xs); color: var(--muted); border-top: 1px solid var(--t-line); background: var(--surface); } /* «Белую рамку видно»: у образа в герое карточка спорила с фоном белым кантом и подложкой. Вариант --bare: скругление и мягкая тень остаются, рамки и белого поля нет, подпись лежит на полупрозрачной плашке прямо на кадре. */ .figure--bare { border: 0; background: none; box-shadow: 0 26px 44px -18px rgba(22, 33, 27, .45); } .figure--bare .figure__cap { position: absolute; left: 0; right: 0; bottom: 0; border-top: 0; background: linear-gradient(to top, rgba(var(--t-veil), .92) 40%, rgba(var(--t-veil), 0)); color: var(--ink-2); padding-top: var(--space-8); } .figure--float { transform: rotate(-1.1deg); } .figure--float + .figure--float { transform: rotate(1deg); } /* ── список с кружками, как в колоде ────────────────────────────── */ .blist { list-style: none; margin: 0; padding: 0; } .blist li { position: relative; padding: var(--space-3) 0 var(--space-3) 2.25rem; border-bottom: 1px solid var(--t-line); line-height: 1.55; } .blist li:last-child { border-bottom: 0; } .blist li::before { content: ""; position: absolute; left: 0; top: 1.15rem; width: 1.05rem; height: 1.05rem; border-radius: 50%; border: 2px solid var(--t-accent); background: transparent; } .blist li b, .blist li strong { color: var(--t-accent); font-weight: 700; } /* ── вывод в мягкой плашке ──────────────────────────────────────── */ .conclusion { background: var(--t-soft); border-left: 4px solid var(--t-accent); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: var(--space-4) var(--space-5); margin-top: var(--space-6); font-size: var(--text-md); line-height: 1.55; max-width: 52ch; } .conclusion b { color: var(--t-accent); } /* ── числовая полоса: три-четыре факта крупно ───────────────────── */ .facts { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); } .fact__n { display: block; font-size: clamp(1.75rem, 3.4vw, 2.75rem); font-weight: 800; letter-spacing: -.02em; color: var(--t-accent); line-height: 1.05; } .fact__t { display: block; margin-top: var(--space-2); color: var(--muted); font-size: var(--text-sm); } /* ── две колонки сцены ──────────────────────────────────────────── */ .duo { display: grid; gap: var(--space-8); align-items: center; } @media (min-width: 60em) { .duo { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--space-12); } .duo--rev > :first-child { order: 2; } } .duo__stack > * + * { margin-top: var(--space-4); } /* тема красит и общие блоки портала */ [data-theme-page] .card__more, [data-theme-page] .eyebrow { color: var(--t-accent); } [data-theme-page] a.card:hover { border-color: var(--t-accent); } [data-theme-page] .btn--primary { background: var(--t-accent); } [data-theme-page] .btn--primary:hover { background: var(--t-accent-2); } [data-theme-page] .btn--ghost:hover { border-color: var(--t-accent); color: var(--t-accent); } [data-theme-page] .tbl thead th { background: var(--t-tint); } [data-theme-page] .links a:hover { background: var(--t-soft); } [data-theme-page] .qa summary:hover { background: var(--t-tint); } [data-theme-page] .tag { border-color: var(--t-line); background: var(--t-tint); } [data-theme-page] .specs { border-color: var(--t-line); } [data-theme-page] .specs div + div { border-color: var(--t-line); } @media (prefers-reduced-motion: reduce) { .figure--float, .figure--float + .figure--float { transform: none; } } /* ── фирменный слой: серебряная сетка ───────────────────────────── */ /* Сетка идёт отдельным слоем поверх подложки и под текстом. Плотность держим низкой: это фактура бренда, а не обои. */ .mesh { position: relative; } .mesh::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--mesh); background-size: var(--mesh-size); background-repeat: repeat; opacity: var(--mesh-alpha); mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); } /* фоновые слои из этого правила исключены: получив position:relative, .stage__bg вставал В ПОТОК и растягивал секцию на лишнюю тысячу пикселей пустого фона */ .mesh > *:not(.stage__bg):not(.phero__bg) { position: relative; z-index: 1; } .phero__bg::before { content: ""; position: absolute; inset: 0; background-image: var(--mesh); background-size: var(--mesh-size); opacity: calc(var(--mesh-alpha) * .8); z-index: 1; } /* цельный баннер: никакого декоративного слоя поверх кадра, только вуаль под текстовой колонкой - снимок должен читаться как снимок */ .phero--solid .phero__bg::before { display: none; } /* кадр 16:9 режется по высоте героя, и банка уезжала к центру - в текстовую колонку. Фокус смещаем вправо: слева остаются доски и поле */ .phero--solid .phero__bg img { object-position: 50% 50%; } @media (max-width: 59.99em) { .phero--solid .phero__bg img { object-position: 62% 50%; } } .phero--solid .phero__bg::after { background: linear-gradient(97deg, rgba(var(--t-veil), .95) 0%, rgba(var(--t-veil), .88) 34%, rgba(var(--t-veil), .38) 58%, rgba(var(--t-veil), .10) 100%); } @media (min-width: 60em) { .phero--solid .phero__in { grid-template-columns: minmax(0, .62fr) minmax(0, 1fr); } .phero--solid .phero__in > div:first-child { padding-block: var(--space-6); } } .phero--solid { min-height: clamp(22rem, 42vw, 34rem); display: flex; align-items: center; } /* S3-FAZA25: у нового кадра банка крупнее, и при прежней высоте героя 16:9 обрезался так, что нижняя полоса этикетки уезжала за край. Высота идёт за шириной (доля видимой части кадра держится), а точка фокуса опущена - обрезается крышка сверху, а не этикетка снизу. */ @media (min-width: 60em) { .phero--solid { min-height: clamp(26rem, 38vw, 44rem); } .phero--solid .phero__bg img { object-position: 50% 70%; } } /* Очень широкий экран. Растянуть 16:9 на всю ширину - значит увеличить банку до нелепого размера: в короб 2560x704 кадр влезает только крупным планом, и от сцены остаётся половина банки. Поэтому с 1440 px кадр НЕ растягивается: он стоит по правому краю в свою величину, а левым краем растворяется в полотне страницы. Слева тогда не белизна и не обрезок кадра, а фактура полотна - ровно то, чего просил заказчик. Порог взят замером, а не на глаз: короб героя выше 1440 px становится шире кадра 16:9, и «cover» начинает резать кадр ПО ВЫСОТЕ - первой уходит нижняя полоса этикетки, ради которой кадр и перегенерён. */ @media (min-width: 90em) { .phero--solid .phero__bg { display: flex; justify-content: flex-end; } .phero--solid .phero__bg img { width: auto; max-width: none; height: 100%; /* без этого кадр как гибкий элемент ужимался по ширине короба, и object-fit докручивал обрезку - ровно тот срез, от которого уходили */ flex: none; -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 12%, #000 26%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 12%, #000 26%); } } .phero--solid .phero__in { width: 100%; } .phero__bg::after { z-index: 2; } .card.mesh::before { --mesh-alpha: .18; } /* ── фирменный слой: баннер с корнями из колоды ─────────────────── */ .rootband { position: relative; overflow: hidden; border-block: 1px solid var(--t-line); } .rootband__bg { position: absolute; inset: 0; z-index: 0; } .rootband__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 78%; } .rootband__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--t-veil), .93) 0%, rgba(var(--t-veil), .80) 42%, rgba(var(--t-veil), .30) 100%); } .rootband__in { position: relative; z-index: 1; padding-block: clamp(3rem, 6vw, 5rem) clamp(7rem, 15vw, 12rem); max-width: 46ch; } .rootband__in h2 { margin-bottom: var(--space-4); } /* Персонаж в оформлении страниц (фаза 2.1) откачен по вердикту заказчика: перс остаётся ТОЛЬКО виджетом в углу. Классы charscene, charside, charinline, charnav и charpoint удалены целиком, чтобы мёртвая разметка не всплыла при следующей правке. */ /* ── фаза 2.4: сквозное полотно страницы ────────────────────────── */ /* Претензия: «всё белым-бело». Под всей страницей лежит полотно своей темы, поверх - вуаль и фирменная сетка. Белых провалов между секциями больше нет: там, где раньше был голый фон, просвечивает подложка. Слои живут в ОДНОМ свойстве background у body, а не в псевдоэлементах: body::before с отрицательным z-index под фоном канвы не рисуется - в первой версии полотно грузилось, назначалось и оставалось невидимым (замер пикселя секции давал 253,252,251). */ body { background-image: linear-gradient(180deg, rgba(var(--t-veil), .72) 0%, rgba(var(--t-veil), .64) 45%, rgba(var(--t-veil), .76) 100%), var(--mesh), var(--canvas, none); background-size: auto, var(--mesh-size), cover; background-position: center, top left, center; background-attachment: fixed, fixed, fixed; background-repeat: no-repeat, repeat, no-repeat; } /* полотно на тему */ [data-theme-page="neutral"], body:not([data-theme-page]) { --canvas: url("../bg/canvas-neutral-1600.webp"); } [data-theme-page="liquid"] { --canvas: url("../bg/canvas-liquid-1600.webp"); } [data-theme-page="granule"] { --canvas: url("../bg/canvas-granule-1600.webp"); } [data-theme-page="humus"] { --canvas: url("../bg/canvas-humus-1600.webp"); } [data-theme-page="crystal"] { --canvas: url("../bg/canvas-crystal-1600.webp"); } [data-theme="dark"] body { background-image: linear-gradient(180deg, rgba(var(--t-veil), .92) 0%, rgba(var(--t-veil), .87) 45%, rgba(var(--t-veil), .94) 100%), var(--mesh), var(--canvas, none); } /* ── технологичность: стекло вместо плоских заливок ─────────────── */ /* Сплошные плашки и жирные линии читаются как вёрстка прошлого века. Поверхности стали слоями стекла: полупрозрачный фон, размытие того, что под ними, тонкая световая кромка сверху. */ /* плотность подобрана замером: при .58 лид на полотне давал 4.47:1 */ .stage { background: rgba(var(--t-veil), .70); backdrop-filter: blur(2px); } .stage--tint { background: rgba(var(--t-veil), .82); } .stage { border-top: 0; } .stage + .stage::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--t-accent) 42%, transparent) 22%, color-mix(in srgb, var(--t-accent) 42%, transparent) 78%, transparent); z-index: 2; } .card, .qa, .specs, .tablewrap, .figure { background: rgba(var(--t-veil), .78); backdrop-filter: blur(8px); border-color: color-mix(in srgb, var(--t-line) 70%, transparent); } .card { position: relative; box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset, var(--shadow-sm); } /* световая линия по верхней кромке карточки - тонкая, не декор-плашка */ .card::after { content: ""; position: absolute; left: 12%; right: 12%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--t-accent) 55%, transparent), transparent); opacity: .8; } a.card:hover { background: rgba(var(--t-veil), .9); } .conclusion { background: color-mix(in srgb, var(--t-soft) 82%, transparent); backdrop-filter: blur(6px); } .badge { background: color-mix(in srgb, var(--t-soft) 88%, transparent); backdrop-filter: blur(6px); box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset; } .tbl thead th { background: rgba(var(--t-veil), .72); } .tbl tbody tr:hover { background: rgba(var(--t-veil), .55); } /* разделитель списка - затухающая линия, а не сплошная черта */ .blist li { border-bottom: 0; } .blist li + li::before { content: ""; position: absolute; left: 2.25rem; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--t-line) 90%, transparent), transparent 82%); } .blist li::after { content: ""; position: absolute; left: .26rem; top: 1.4rem; width: .5rem; height: .5rem; border-radius: 50%; background: var(--t-accent); opacity: .55; } /* шапка и футер - тоже стекло, чтобы полотно шло насквозь */ .hdr { background: rgba(var(--veil), .72); backdrop-filter: blur(14px); } .ftr { background: rgba(var(--t-veil), .78); backdrop-filter: blur(10px); } @media (prefers-reduced-motion: reduce) { .card, .qa, .specs, .tablewrap, .figure, .hdr, .ftr { backdrop-filter: none; } } /* ── S3-FAZA25: вуаль под текстом, а не белая колонна ────────────── Претензия заказчика по скрину широкого экрана: слева от текста до кромки шла сплошная вуаль .95 - «прибитая белая колонна», и чем шире экран, тем она шире (на 2560 это 716 px чистого белого, замер). Кадр при этом гаснет как раз там, где он и должен работать. Лечится не ослаблением общей вуали (тогда текст сядет на фото), а переносом плотной вуали ПОД ТЕКСТОВУЮ КОЛОНКУ: размытый прямоугольник привязан к самой колонке, поэтому на любой ширине он остаётся под текстом и не растёт вместе с полями. Общая вуаль остаётся лёгкой - она только сводит кадр с полотном страницы. МОБИЛУ НЕ ТРОГАЕМ: там раскладка принята заказчиком, и все правила этого блока живут строго от 60em. */ @media (min-width: 60em) { .phero__bg::after, .phero--solid .phero__bg::after { background: linear-gradient(180deg, rgba(var(--t-veil), .10) 0%, rgba(var(--t-veil), 0) 32%, rgba(var(--t-veil), .06) 74%, rgba(var(--t-veil), .30) 100%), linear-gradient(92deg, rgba(var(--t-veil), .26) 0%, rgba(var(--t-veil), .12) 34%, rgba(var(--t-veil), 0) 62%); } .phero__in > div:first-child { position: relative; } /* Мягкое перо даёт размытие самой плашки: у радиального градиента ядро пришлось бы делать плоским до 60 %, иначе край текста уже сидит на спаде и контраст проваливается. */ .phero__in > div:first-child::before { content: ""; position: absolute; inset: -2.25rem -5.5rem; z-index: -1; background: rgba(var(--t-veil), .90); border-radius: 42% 58% 50% 50% / 50%; filter: blur(34px); } /* тёмная тема: подложка тёмная, «белизны» в ней нет, но плотность нужна та же */ [data-theme="dark"] .phero__in > div:first-child::before { background: rgba(var(--t-veil), .82); } } /* Мобила. Раскладку не трогаем - она принята заказчиком: сетка, кегли, высота героя и общий градиент вуали остаются прежними, гейт MOBILE_KEEP сверяет это с отпечатком, снятым до правки. Добавляется ТОЛЬКО плашка под текстом: замер на 390 дал 3.74:1 на заголовке в той его части, что заезжает на банку (по скрину заказчика - «текст слился»), порог 4.5. */ @media (max-width: 59.99em) { .phero__in > div:first-child { position: relative; } .phero__in > div:first-child::before { content: ""; position: absolute; /* по горизонтали плашка не должна вылезать за поля страницы: при -1.5rem она торчала на 4 px за вьюпорт, и гейт CLIP это поймал */ inset: -1rem -0.75rem; z-index: -1; /* плотность подобрана замером: .82 гасила кадр почти целиком, .70 держит 4.5:1 на всех точках и оставляет банку видимой */ background: rgba(var(--t-veil), .70); border-radius: 1.5rem; filter: blur(22px); } [data-theme="dark"] .phero__in > div:first-child::before { background: rgba(var(--t-veil), .78); } } /* ── S3-FAZA26: продукт стоит в сцене, а не в карточке ───────────── Слово заказчика: «на /products/ тоже банка на фоне травы как было». Реальный кадр продукта остаётся - этикетка на нём это информация, - но паспарту вокруг него снимается: ни белой карточки, ни белой подписи-полосы поверх кадра. Кадр садится на полотно темы мягким краем, под ним контактная тень, сверху лёгкий рефлекс. */ .figure--scene { position: relative; background: none; border: 0; border-radius: var(--radius-xl); box-shadow: none; overflow: visible; } .figure--scene img { border-radius: var(--radius-xl); /* мягкий край вместо рубленого прямоугольника: кадр не «наклеен», а растворяется в полотне раздела */ -webkit-mask-image: radial-gradient(125% 125% at 50% 45%, #000 62%, rgba(0, 0, 0, .86) 78%, rgba(0, 0, 0, .35) 92%, transparent 100%); mask-image: radial-gradient(125% 125% at 50% 45%, #000 62%, rgba(0, 0, 0, .86) 78%, rgba(0, 0, 0, .35) 92%, transparent 100%); } /* контактная тень: кадр стоит на полотне, а не висит над ним */ .figure--scene::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: -1.15rem; height: 2rem; z-index: -1; background: radial-gradient(50% 50% at 50% 50%, rgba(18, 26, 21, .40) 0%, rgba(18, 26, 21, .18) 55%, transparent 78%); filter: blur(9px); } /* рефлекс: подсветка со стороны света, в цвет темы */ .figure--scene::before { content: ""; position: absolute; inset: -6% -6% 20% -6%; z-index: -1; background: radial-gradient(60% 60% at 32% 22%, rgba(var(--t-glow, 255, 255, 255), .30) 0%, transparent 72%); filter: blur(16px); } /* Подпись уходит ПОД кадр обычным текстом: белая полоса поверх снимка и была тем самым паспарту. Читаемость держит та же локальная плашка, что и текст героя, - замер на пёстром полотне давал 2.4:1. */ .figure--scene .figure__cap { position: relative; background: none; border-top: 0; padding: var(--space-3) var(--space-2) 0; color: var(--ink-2); font-size: var(--text-sm); } .figure--scene .figure__cap::before { content: ""; position: absolute; inset: .35rem -.6rem -.35rem -.6rem; z-index: -1; /* .78 давала 4,46:1 на самом пёстром полотне (биогумус) - меньше порога; .86 держит запас и кадр не гасит: плашка узкая, только под строкой подписи */ background: rgba(var(--t-veil), .86); border-radius: .75rem; filter: blur(12px); }