- 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)
663 lines
35 KiB
HTML
663 lines
35 KiB
HTML
<!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>
|