Files
root a0dda98b83 i18n: build-time ru/en localization + EN homepage & cookie-policy
- build-pages.mjs: per-locale page/partial overrides (*.en.html), i18n token
  resolution with ru fallback, <html lang> + assetPrefix per locale
- UI dictionaries src/i18n/{ru,en}.json; lang-switch partial
- headers/footer/partials converted to {{i18n:…}} tokens
- root-absolute static asset refs so /en/ subpath loads css/js/vendor
- EN content: homepage (index.en.html + partials) and cookie-policy.en.html
  (cookie-policy body translated via apinex.bond /v1/tools/translator)
2026-09-15 22:27:51 +02:00

663 lines
35 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="ru" data-theme="dark" data-radius="medium" data-font="geologica">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="noindex, nofollow" />
<title>Стенд: neu-card</title>
<link rel="stylesheet" href="/css/main.css" />
<link rel="stylesheet" href="/_lab/lab.css" />
</head>
<body>
<div class="page-mesh-bg" aria-hidden="true"></div>
<main class="lab">
<header class="lab__head">
<h1 class="lab__h1">neu-card</h1>
<p class="lab__sub">
Стенд для настройки вида. Сборка не нужна: правим <code>public/css/main.css</code> →
страница перезагружается сама (live-reload). Переключатель темы в правом нижнем углу.
</p>
<nav class="lab__nav" aria-label="Разделы стенда">
<a href="#sec-final">Финал</a>
<a href="#sec-mp">mp-card</a>
<a href="#sec-tokens">Токены</a>
<a href="#sec-bg">Фоны</a>
<a href="#sec-states">Состояния</a>
<a href="#sec-content">Содержимое</a>
<a href="#sec-size">Размеры</a>
<a href="#sec-grid">Сетка</a>
<a href="#sec-nested">Вложенность</a>
<a href="#sec-light">Светлая тема</a>
<a href="#sec-contact">Контакты</a>
<a href="#sec-shader-grid">Матрица</a>
<a href="#sec-all-shaders">Mesh</a>
</nav>
</header>
<!-- ────────────────────────────────────────────────────────── -->
<section class="lab__sec" id="sec-final">
<h2 class="lab__h2">Финальный вид</h2>
<p class="lab__note">
Принятые значения: сила объёма <code>0.5</code>, блик <code>0.2</code>, без текстуры.
Обычная неуморфная карточка на нейтральном фоне.
</p>
<div class="lab__row lab__row--wrap lab__depth">
<article class="neu-card neu-card--static">
<span class="neu-card__eyebrow">Проект</span>
<span class="neu-card__title">Neutral card</span>
<span class="neu-card__meta">Нейтральный фон, выпуклая</span>
</article>
<article class="neu-card neu-card--accent">
<span class="neu-card__title">Accent</span>
<span class="neu-card__meta">--accent</span>
</article>
<button type="button" class="neu-card">
<span class="neu-card__title">Кнопка</span>
<span class="neu-card__meta">Нажми — выпуклость сохраняется</span>
</button>
</div>
</section>
<!-- ────────────────────────────────────────────────────────── -->
<section class="lab__sec" id="sec-mp">
<h2 class="lab__h2">Обычная карточка · mp-card</h2>
<p class="lab__note">
Твоя базовая карточка с сайта — для сравнения с неуморфной рядом. Разметка и стили
взяты из <code>public/css/main.css</code> без изменений.
</p>
<div class="lab__row lab__row--wrap">
<a class="mp-card mp-card--link mp-card--stack" href="#" aria-label="Проект · ссылка">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
src="/assets/shared/placeholder.webp"
alt=""
width="560"
height="315"
loading="lazy"
decoding="async"
/>
</div>
<div class="mp-card__body">
<h3 class="mp-card__title">
Проект
<span class="mp-card__ext" aria-hidden="true"></span>
</h3>
<ul class="mp-card__tags" aria-label="Тип проекта">
<li class="mp-card__tag">веб-сайт</li>
</ul>
<p class="mp-card__desc">Базовая карточка проекта с обложкой.</p>
</div>
</a>
<div class="mp-card mp-card--stack">
<div class="mp-card__body">
<h3 class="mp-card__title">Текстовая</h3>
<ul class="mp-card__tags" aria-label="Тип проекта">
<li class="mp-card__tag">исследование</li>
</ul>
<p class="mp-card__desc">Карточка без обложки — только текст.</p>
</div>
</div>
<a class="mp-card mp-card--link mp-card--compact" href="#" aria-label="Compact · ссылка">
<div class="mp-card__body">
<h3 class="mp-card__title">
Compact
<span class="mp-card__ext" aria-hidden="true"></span>
</h3>
<ul class="mp-card__tags" aria-label="Тип проекта">
<li class="mp-card__tag">дизайн-система</li>
</ul>
<p class="mp-card__desc">Узкая колонка со ссылкой.</p>
</div>
</a>
</div>
</section>
<!-- ────────────────────────────────────────────────────────── -->
<section class="lab__sec" id="sec-tokens">
<h2 class="lab__h2">Токены</h2>
<p class="lab__note">Числа, которыми управляется вид. Значение по умолчанию — в скобках.</p>
<div class="lab__tokens">
<dl class="lab__token">
<dt><code>--neu-bg</code> <span>--bg-elevated</span></dt>
<dd>
Нейтральная заливка: в тёмной теме тёмная, в светлой — светлая. Отличается от
<code>--bg</code> на 3%, поэтому объём читается тенями, а не контрастом.
</dd>
</dl>
<dl class="lab__token">
<dt><code>--neu-spread</code> <span>0.5</span></dt>
<dd>Сила объёма. Масштабирует все семь теней разом. <code>0</code> — плоская карточка.</dd>
</dl>
<dl class="lab__token">
<dt><code>--neu-hover-spread</code> <span>1.5</span></dt>
<dd>Множитель объёма при наведении.</dd>
</dl>
<dl class="lab__token">
<dt><code>--neu-glow-a</code> <span>0.2</span></dt>
<dd>Сила блика из левого верхнего угла. <code>0</code> — выключен.</dd>
</dl>
<dl class="lab__token">
<dt><code>--neu-in-light-mult</code> <span>0.55 / 0.4</span></dt>
<dd>
Сила внутреннего блика (тёмная / светлая тема). На светлом фоне белый блик «горит»,
поэтому там он слабее.
</dd>
</dl>
<dl class="lab__token">
<dt><code>--neu-in-dark-mult</code> <span>0.75 / 0.5</span></dt>
<dd>Сила внутренней тени (тёмная / светлая тема).</dd>
</dl>
<dl class="lab__token">
<dt><code>--neu-press</code> <span>1px</span></dt>
<dd>Смещение вниз при нажатии.</dd>
</dl>
<dl class="lab__token">
<dt><code>--neu-press-fade</code> <span>0.5</span></dt>
<dd>
Во сколько слабеют внутренние блики при нажатии. Блики НЕ инвертируются — карточка
остаётся выпуклой.
</dd>
</dl>
<dl class="lab__token">
<dt><code>--neu-lift</code> <span>-3px</span></dt>
<dd>Подъём при наведении.</dd>
</dl>
<dl class="lab__token">
<dt><code>--neu-radius</code> <span>--radius-card</span></dt>
<dd>Скругление. По умолчанию следует настройке темы.</dd>
</dl>
<dl class="lab__token">
<dt><code>--neu-pad</code> <span>1.25rem</span></dt>
<dd>Внутренние отступы.</dd>
</dl>
</div>
</section>
<!-- ────────────────────────────────────────────────────────── -->
<section class="lab__sec" id="sec-bg">
<h2 class="lab__h2">Фоны</h2>
<p class="lab__note">
Неуморфизм читается только в паре с подложкой. Карточка построена от <code>--bg</code>,
поэтому на каждом фоне ведёт себя по-разному.
</p>
<div class="lab__bg-grid">
<div class="lab__bg-cell" data-bg="page">
<div class="lab__row">
<article class="neu-card">
<span class="neu-card__title">Neutral</span>
<span class="neu-card__meta">--surface</span>
</article>
<article class="neu-card neu-card--accent">
<span class="neu-card__title">Accent</span>
<span class="neu-card__meta">--accent</span>
</article>
</div>
<p class="lab__caption">Страница · <code>--bg</code></p>
</div>
<div class="lab__bg-cell" data-bg="elevated">
<div class="lab__row">
<article class="neu-card">
<span class="neu-card__title">Neutral</span>
<span class="neu-card__meta">--surface</span>
</article>
<article class="neu-card neu-card--accent">
<span class="neu-card__title">Accent</span>
<span class="neu-card__meta">--accent</span>
</article>
</div>
<p class="lab__caption">Поверхность · <code>--bg-elevated</code></p>
</div>
<div class="lab__bg-cell" data-bg="surface">
<div class="lab__row">
<article class="neu-card">
<span class="neu-card__title">Neutral</span>
<span class="neu-card__meta">--surface</span>
</article>
<article class="neu-card neu-card--accent">
<span class="neu-card__title">Accent</span>
<span class="neu-card__meta">--accent</span>
</article>
</div>
<p class="lab__caption">Карточка на карточке · <code>--surface</code> — худший случай</p>
</div>
<div class="lab__bg-cell" data-bg="accent">
<div class="lab__row">
<article class="neu-card">
<span class="neu-card__title">Neutral</span>
<span class="neu-card__meta">--surface</span>
</article>
<article class="neu-card neu-card--accent">
<span class="neu-card__title">Accent</span>
<span class="neu-card__meta">--accent</span>
</article>
</div>
<p class="lab__caption">Акцентная подложка · <code>--accent</code></p>
</div>
</div>
</section>
<!-- ────────────────────────────────────────────────────────── -->
<section class="lab__sec" id="sec-states">
<h2 class="lab__h2">Состояния</h2>
<p class="lab__note">
Наведи курсор и нажми — остальное показано принудительно, чтобы видеть их одновременно.
</p>
<div class="lab__row lab__row--wrap">
<div class="lab__state">
<article class="neu-card">
<span class="neu-card__title">Rest</span>
<span class="neu-card__meta">Покой</span>
</article>
<p class="lab__caption">rest</p>
</div>
<div class="lab__state">
<article class="neu-card">
<span class="neu-card__title">Hover</span>
<span class="neu-card__meta">Наведи курсор</span>
</article>
<p class="lab__caption">:hover</p>
</div>
<div class="lab__state">
<article class="neu-card is-pressed">
<span class="neu-card__title">Pressed</span>
<span class="neu-card__meta">Вдавлена</span>
</article>
<p class="lab__caption">:active / .is-pressed</p>
</div>
<div class="lab__state">
<a class="neu-card" href="#sec-states">
<span class="neu-card__title">Focus</span>
<span class="neu-card__meta">Tab или клик</span>
</a>
<p class="lab__caption">:focus-visible</p>
</div>
<div class="lab__state">
<article class="neu-card is-disabled">
<span class="neu-card__title">Disabled</span>
<span class="neu-card__meta">Недоступна</span>
</article>
<p class="lab__caption">.is-disabled</p>
</div>
<div class="lab__state">
<article class="neu-card neu-card--flat">
<span class="neu-card__title">Flat</span>
<span class="neu-card__meta">Без объёма</span>
</article>
<p class="lab__caption">.neu-card--flat</p>
</div>
</div>
</section>
<!-- ────────────────────────────────────────────────────────── -->
<section class="lab__sec" id="sec-content">
<h2 class="lab__h2">Содержимое</h2>
<p class="lab__note">Проверка наполнения: от пустой до переполненной.</p>
<div class="lab__row lab__row--wrap">
<article class="neu-card">
<span class="neu-card__meta">Только мета</span>
</article>
<article class="neu-card">
<span class="neu-card__title">Только заголовок</span>
</article>
<article class="neu-card">
<span class="neu-card__eyebrow">Eyebrow</span>
<span class="neu-card__title">Полный набор</span>
<span class="neu-card__meta">Подпись под заголовком</span>
</article>
<article class="neu-card">
<span class="neu-card__title">Длинный заголовок в несколько строк</span>
<span class="neu-card__meta">
И подпись тоже длинная, чтобы проверить, как карточка растёт по высоте
</span>
</article>
<article class="neu-card neu-card--with-icon">
<span class="neu-card__icon" aria-hidden="true"></span>
<span class="neu-card__title">С иконкой</span>
<span class="neu-card__meta">Иконка сверху</span>
</article>
<article class="neu-card neu-card--with-media">
<img
class="neu-card__media"
src="/assets/template-elements-demo/small-image-1.webp"
alt=""
loading="lazy"
decoding="async"
/>
<span class="neu-card__title">С обложкой</span>
<span class="neu-card__meta">Картинка на всю ширину</span>
</article>
<article class="neu-card neu-card--accent">
<span class="neu-card__title">Акцентная</span>
<span class="neu-card__meta">--accent</span>
</article>
</div>
</section>
<!-- ────────────────────────────────────────────────────────── -->
<section class="lab__sec" id="sec-size">
<h2 class="lab__h2">Размеры</h2>
<p class="lab__note">
Базовый размер задаётся <code>--neu-min-w</code> / <code>--neu-min-h</code>, дальше
карточка растёт от содержимого. В сетке — <code>.neu-card--fluid</code>.
</p>
<div class="lab__row lab__row--wrap">
<article class="neu-card" style="--neu-min-w: 160px; --neu-min-h: 96px">
<span class="neu-card__title">Компактная</span>
<span class="neu-card__meta">160 × 96</span>
</article>
<article class="neu-card">
<span class="neu-card__title">Базовая</span>
<span class="neu-card__meta">200 × 128</span>
</article>
<article class="neu-card" style="--neu-min-w: 280px; --neu-min-h: 180px">
<span class="neu-card__title">Крупная</span>
<span class="neu-card__meta">280 × 180</span>
</article>
<article class="neu-card" style="--neu-pad: 2rem">
<span class="neu-card__title">Широкие поля</span>
<span class="neu-card__meta">--neu-pad: 2rem</span>
</article>
<article class="neu-card" style="--neu-radius: 28px">
<span class="neu-card__title">Сильное скругление</span>
<span class="neu-card__meta">--neu-radius: 28px</span>
</article>
</div>
</section>
<!-- ────────────────────────────────────────────────────────── -->
<section class="lab__sec" id="sec-grid">
<h2 class="lab__h2">Сетка</h2>
<p class="lab__note">
Рядом друг с другом тени соседних карточек накладываются. Здесь видно, не слипаются ли.
</p>
<h3 class="lab__h3">Три в ряд, gap 1rem</h3>
<div class="lab__grid lab__grid--3">
<article class="neu-card neu-card--fluid">
<span class="neu-card__title">Проект один</span>
<span class="neu-card__meta">Продуктовый дизайн</span>
</article>
<article class="neu-card neu-card--fluid">
<span class="neu-card__title">Проект два</span>
<span class="neu-card__meta">Исследование</span>
</article>
<article class="neu-card neu-card--fluid">
<span class="neu-card__title">Проект три</span>
<span class="neu-card__meta">Дизайн-система</span>
</article>
</div>
<h3 class="lab__h3">Смешанный рост</h3>
<p class="lab__note">Разная высота содержимого — проверка на растяжение по сетке.</p>
<div class="lab__grid lab__grid--3">
<article class="neu-card neu-card--fluid">
<span class="neu-card__title">Короткая</span>
</article>
<article class="neu-card neu-card--fluid">
<span class="neu-card__title">Средняя по объёму</span>
<span class="neu-card__meta">
Здесь подпись занимает две строки, и карточка должна потянуться выше соседней
</span>
</article>
<article class="neu-card neu-card--fluid">
<span class="neu-card__title">С обложкой</span>
<span class="neu-card__meta">Ещё выше</span>
</article>
</div>
</section>
<!-- ────────────────────────────────────────────────────────── -->
<section class="lab__sec" id="sec-nested">
<h2 class="lab__h2">Карточка в карточке</h2>
<p class="lab__note">
Нижняя карточка больше и включает в себя верхние. Оценка того, как объём читается, когда
карточка лежит <em>поверх той же самой</em> поверхности, а не на фоне страницы. Это худший
случай для неуморфизма: обе поверхности одинаковые по цвету.
</p>
<div class="lab__nest">
<article class="neu-card neu-card--nest">
<span class="neu-card__eyebrow">Внешняя</span>
<span class="neu-card__title">Карточка-контейнер</span>
<span class="neu-card__meta">Поверхность второго уровня, вложенные карточки внутри</span>
<div class="neu-card__nest-grid">
<article class="neu-card neu-card--fluid">
<span class="neu-card__title">Вложенная</span>
<span class="neu-card__meta">Тот же --neu-bg</span>
</article>
<article class="neu-card neu-card--fluid">
<span class="neu-card__title">Вложенная</span>
<span class="neu-card__meta">Тот же --neu-bg</span>
</article>
<article class="neu-card neu-card--fluid">
<span class="neu-card__title">Вложенная</span>
<span class="neu-card__meta">Тот же --neu-bg</span>
</article>
</div>
<div class="neu-card__nest-row">
<button type="button" class="neu-card">
<span class="neu-card__title">Кнопка</span>
<span class="neu-card__meta">Нажми — не должна проваливаться</span>
</button>
<button type="button" class="neu-card">
<span class="neu-card__title">Кнопка</span>
<span class="neu-card__meta">Выпуклость сохраняется</span>
</button>
</div>
</article>
</div>
<h3 class="lab__h3">То же в светлой теме</h3>
<p class="lab__note">
Внутренние блики настроены раздельно для тёмной и светлой темы — здесь видна разница.
</p>
</section>
<!-- ────────────────────────────────────────────────────────── -->
<section class="lab__sec" id="sec-light" data-theme="light">
<h2 class="lab__h2">Светлая тема · тень</h2>
<p class="lab__note">
На светлом фоне чистый чёрный 0.25 выглядит грязно. Варианты: цвет тени смещён в
холодный тёмно-серый, альфа внешних теней снижена через <code>--neu-drop-mult</code>.
Эта секция принудительно светлая.
</p>
<div class="lab__row lab__row--wrap lab__depth">
<div class="lab__state">
<article class="neu-card" style="--neu-shadow-color: 47, 53, 75; --neu-drop-mult: 0.5; --neu-in-dark-mult: 0.5">
<span class="neu-card__title">Текущий</span>
<span class="neu-card__meta">47,53,75 · drop 0.5</span>
</article>
<p class="lab__caption">как в main.css</p>
</div>
<div class="lab__state">
<article class="neu-card" style="--neu-shadow-color: 70, 75, 95; --neu-drop-mult: 0.4; --neu-in-dark-mult: 0.4">
<span class="neu-card__title">Мягче</span>
<span class="neu-card__meta">70,75,95 · drop 0.4</span>
</article>
<p class="lab__caption">светлее тень</p>
</div>
<div class="lab__state">
<article class="neu-card" style="--neu-shadow-color: 30, 35, 55; --neu-drop-mult: 0.35; --neu-in-dark-mult: 0.35">
<span class="neu-card__title">Глубже</span>
<span class="neu-card__meta">30,35,55 · drop 0.35</span>
</article>
<p class="lab__caption">темнее, но меньше альфа</p>
</div>
<div class="lab__state">
<article class="neu-card" style="--neu-shadow-color: 0, 0, 0; --neu-drop-mult: 0.5; --neu-in-dark-mult: 0.5">
<span class="neu-card__title">Чёрный</span>
<span class="neu-card__meta">0,0,0 · drop 0.5</span>
</article>
<p class="lab__caption">было грязно</p>
</div>
</div>
</section>
<!-- ────────────────────────────────────────────────────────── -->
<section class="lab__sec" id="sec-contact">
<h2 class="lab__h2">Контактные карточки</h2>
<p class="lab__note">
Оригинальная <code>.contact-card</code> с сайта, теперь с неуморфной основой
(объём как у <code>.neu-card</code>). Бренд-цвета через модификаторы
<code>--brand-tg / --brand-vk / --brand-ya / --brand-email</code>.
Цветное наложение — радиальный градиент <code>::before</code> из <code>--contact-brand</code>.
</p>
<div class="lab__row lab__row--wrap lab__depth contact-grid">
<li>
<a class="contact-card contact-card--link contact-card--brand-tg" href="https://t.me/mamadaevv" rel="noopener noreferrer">
<span class="contact-card__corner" aria-hidden="true"></span>
<span class="contact-card__icon" aria-hidden="true"><img src="/assets/shared/icons/tg.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span>
<span class="contact-card__body"><span class="contact-card__name">Telegram</span><span class="contact-card__hint">Отвечу сегодня</span></span>
</a>
</li>
<li>
<a class="contact-card contact-card--link contact-card--brand-vk" href="https://vk.com/mamadaevv" rel="noopener noreferrer">
<span class="contact-card__corner" aria-hidden="true"></span>
<span class="contact-card__icon" aria-hidden="true"><img src="/assets/shared/icons/vk.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span>
<span class="contact-card__body"><span class="contact-card__name">ВКонтакте</span><span class="contact-card__hint">Стабильный коннект</span></span>
</a>
</li>
<li>
<a class="contact-card contact-card--link contact-card--brand-ya" href="https://ya.ru" rel="noopener noreferrer">
<span class="contact-card__corner" aria-hidden="true"></span>
<span class="contact-card__icon" aria-hidden="true"><img src="/assets/shared/icons/yandex_telemost.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span>
<span class="contact-card__body"><span class="contact-card__name">Яндекс Телемост</span><span class="contact-card__hint">Видеозвонок</span></span>
</a>
</li>
<li>
<button type="button" class="contact-card contact-card--action contact-card--brand-email">
<span class="contact-card__corner contact-card__corner--copy" aria-hidden="true"></span>
<span class="contact-card__icon contact-card__icon--accent" aria-hidden="true"></span>
<span class="contact-card__body"><span class="contact-card__name">Email</span><span class="contact-card__hint">nik@mamadaevv.site</span></span>
</button>
</li>
</div>
</section>
<!-- ────────────────────────────────────────────────────────── -->
<section class="lab__sec" id="sec-shader-grid">
<h2 class="lab__h2">Матрица · neu-card + шейдер под бликом</h2>
<p class="lab__note">
Обычная неуморфная карточка (тени снаружи, блик из угла) с живым шейдером
<strong>внутри</strong>, под бликом. Слева — чистая neu-card для сравнения,
справа — та же карточка с анимированным mesh-слоем. Объём и блик сохранены,
шейдер только подсвечивает поверхность.
</p>
<h3 class="lab__h3">Сетка 3 × 2</h3>
<div class="lab__grid lab__grid--3 lab__matrix">
<!-- чистая neu-card (ряд 1 — образец без шейдера) -->
<article class="neu-card neu-card--fluid">
<span class="neu-card__eyebrow">Проект</span>
<span class="neu-card__title">Обычная</span>
<span class="neu-card__meta">только тени и блик</span>
</article>
<article class="neu-card neu-card--fluid neu-card--shader">
<span class="card-shader" data-shader="demo" aria-hidden="true"></span>
<span class="neu-card__eyebrow">Проект</span>
<span class="neu-card__title">Шейдер · demo</span>
<span class="neu-card__meta">mesh под бликом</span>
</article>
<article class="neu-card neu-card--fluid neu-card--shader">
<span class="card-shader" data-shader="email" aria-hidden="true"></span>
<span class="neu-card__eyebrow">Проект</span>
<span class="neu-card__title">Шейдер · email</span>
<span class="neu-card__meta">mesh под бликом</span>
</article>
<!-- ряд 2 — разные бренды -->
<article class="neu-card neu-card--fluid neu-card--shader">
<span class="card-shader" data-shader="tg" aria-hidden="true"></span>
<span class="neu-card__eyebrow">Проект</span>
<span class="neu-card__title">Шейдер · tg</span>
<span class="neu-card__meta">mesh под бликом</span>
</article>
<article class="neu-card neu-card--fluid neu-card--shader">
<span class="card-shader" data-shader="vk" aria-hidden="true"></span>
<span class="neu-card__eyebrow">Проект</span>
<span class="neu-card__title">Шейдер · vk</span>
<span class="neu-card__meta">mesh под бликом</span>
</article>
<article class="neu-card neu-card--fluid neu-card--shader">
<span class="card-shader" data-shader="ya" aria-hidden="true"></span>
<span class="neu-card__eyebrow">Проект</span>
<span class="neu-card__title">Шейдер · ya</span>
<span class="neu-card__meta">mesh под бликом</span>
</article>
</div>
<h3 class="lab__h3">Одиночная крупная</h3>
<div class="lab__row lab__row--wrap lab__depth">
<article class="neu-card neu-card--shader" style="--neu-min-w: 280px; --neu-min-h: 180px">
<span class="card-shader" data-shader="demo" aria-hidden="true"></span>
<span class="neu-card__eyebrow">Кейс</span>
<span class="neu-card__title">Neu + shader</span>
<span class="neu-card__meta">объём снаружи, анимация внутри</span>
</article>
<article class="neu-card neu-card--static neu-card--shader" style="--neu-min-w: 280px; --neu-min-h: 180px">
<span class="card-shader" data-shader="email" aria-hidden="true"></span>
<span class="neu-card__eyebrow">Кейс</span>
<span class="neu-card__title">Static + shader</span>
<span class="neu-card__meta">блик и анимация, без hover-отклика</span>
</article>
</div>
</section>
<!-- ────────────────────────────────────────────────────────── -->
<section class="lab__sec" id="sec-all-shaders">
<h2 class="lab__h2">Mesh gradient</h2>
<p class="lab__note">
Единственный используемый шейдер — анимированный mesh gradient (цветные пятна
плавно перетекают). Ниже — карточка-пример только с ним. Контактные и матричные
карточки выше используют тот же шейдер с брендовыми цветами.
</p>
<h3 class="lab__h3">Пример · mesh gradient</h3>
<div class="lab__row lab__depth">
<article class="shader-demo-card shader-demo-card--wide" data-shader-cell="demo">
<span class="card-shader" data-shader="demo" aria-hidden="true"></span>
<span class="shader-demo-card__label">mesh gradient</span>
</article>
</div>
</section>
</main>
<div class="lab-switch" role="group" aria-label="Настройки стенда">
<button type="button" class="lab-switch__btn" data-lab-theme="light">Светлая</button>
<button type="button" class="lab-switch__btn" data-lab-theme="dark">Тёмная</button>
<span class="lab-switch__sep" aria-hidden="true"></span>
<button type="button" class="lab-switch__btn" data-lab-radius="soft">R·</button>
<button type="button" class="lab-switch__btn" data-lab-radius="medium">R·</button>
<button type="button" class="lab-switch__btn" data-lab-radius="strong">R·</button>
</div>
<script type="module" src="/_lab/lab.js"></script>
<script type="module" src="/_lab/shader-demo.js"></script>
<script type="module" src="/_lab/live-reload.js"></script>
</body>
</html>