/* ============================================================ A.L.E.X. — МЕТАЛЛ-КАНОН ВИТРИНЫ (задача 1204, блоки A и B). Решение владельца 27.08.2026: «весь сайт металлический» при читаемости + крупный приглушённый хром-знак «A» в хиро каждой страницы. ------------------------------------------------------------ ЧТО ИЗМЕНИЛОСЬ ПРОТИВ КАНОНА 24.08. До этого круга металл жил ТОЛЬКО в хиро (блок «2. Металл» в hub.css) — на 34 страницах из 64, на остальных фон был ровный. Владелец 27.08 расширил канон: металл — подложка ВСЕГО сайта, но под текстом, формами и подвалом он приглушён до едва заметного, а в хиро идёт в полную силу. Прежний блок из hub.css перенесён СЮДА целиком, чтобы у металла был ровно один дом: два файла, красящих один и тот же псевдоэлемент, расходятся при первой же правке. ТРИ СЛОЯ, ИЗ КОТОРЫХ СОБРАН ЭФФЕКТ: 1. подложка — на : градиенты металла во всю высоту документа (низ страницы, §2); 2. вуаль — на : полупрозрачный слой цвета фона темы. Он и есть «приглушение до едва заметной»: текст, карточки, формы и подвал стоят на нём и читаются как на ровном фоне (§3); 3. хиро — вуаль прорезана: полная текстура + шлифовка кисти и знак-гигант (§4, §5). ПОЧЕМУ ОТДЕЛЬНЫЙ ФАЙЛ (урок #894). Витрина держит два слоя: новый style2.css (54 страницы сборщика) и старый style.css (10 страниц: документы, «спасибо», реквизиты, зеркала legal). Самостоятельный модуль со своими токенами и запасными значениями var(--x, …) работает на обоих и ни с кем не спорит. Селекторы вида `html body` (0,0,2) сильнее `body` (0,0,1) — поэтому порядок подключения файлов ничего не решает. ПРАВИЛО ФАЙЛА — как у style2.css и hub.css: ЦВЕТА ТОЛЬКО ТОКЕНАМИ, значения живут ровно в трёх блоках §1 (светлая тема, тёмная тема, ветка «без JS»). Хардкод цвета ниже — стоп-фактор приёмки. Вес: ни одной картинки и ни одного шрифта; знак-гигант — маска по общему alex-znak-a.svg (0,4 КБ), остальное считает браузер. ============================================================ */ /* ---------- 1. Токены ---------- */ :root { /* Металл подложки: базовый тон, светлый край, тень кисти. Тона взяты у эталона приёма — хиро /pakety/rost/ (hub.css). */ --mtl-1: #F3F2ED; --mtl-2: #FCFBF8; --mtl-3: #E6E4DB; /* Блик — латунь витрины с низкой непрозрачностью (декор, не текст). */ --mtl-shine: rgba(184, 134, 11, .12); /* Полоса кисти — тон основного текста с низкой непрозрачностью. */ --mtl-brush: rgba(22, 24, 28, .045); /* Плотность вуали над подложкой: сколько процентов фона темы остаётся непрозрачным под текстом. Меньше — металл виднее и хуже читаемость; замер контраста в протоколе круга сделан на этом значении. */ --mtl-veil: 88%; /* Хром знака-гиганта: три тона одной кисти + сила проявки. */ --mtl-znak-1: rgba(22, 24, 28, .16); --mtl-znak-2: rgba(184, 134, 11, .20); --mtl-znak-3: rgba(22, 24, 28, .06); } [data-theme="dark"] { --mtl-1: #171C24; --mtl-2: #0B0D10; --mtl-3: #202834; --mtl-shine: rgba(212, 175, 55, .16); --mtl-brush: rgba(236, 239, 243, .045); --mtl-veil: 86%; --mtl-znak-1: rgba(236, 239, 243, .13); --mtl-znak-2: rgba(212, 175, 55, .20); --mtl-znak-3: rgba(236, 239, 243, .05); } /* Браузер без JS (инлайн-скрипт темы не отработал): тёмная — базовая. Страницы старого слоя тему не переключают вовсе и несут data-theme="dark" в разметке — им достаётся блок выше. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --mtl-1: #171C24; --mtl-2: #0B0D10; --mtl-3: #202834; --mtl-shine: rgba(212, 175, 55, .16); --mtl-brush: rgba(236, 239, 243, .045); --mtl-veil: 86%; --mtl-znak-1: rgba(236, 239, 243, .13); --mtl-znak-2: rgba(212, 175, 55, .20); --mtl-znak-3: rgba(236, 239, 243, .05); } } /* Фон темы: на новом слое это --bg, на старом --c-deep. Запасное значение — графит канона, чтобы вуаль не стала прозрачной, если ни одного из токенов на странице нет. */ :root { --mtl-fon: var(--bg, var(--c-deep, #0B0D10)); } /* ---------- 2. Подложка: металл во всю высоту страницы ---------- Фон корневого элемента браузер отдаёт холсту — значит он кроет документ целиком, включая низ длинных страниц и «дотяжку» под короткими. Ни картинок, ни видео: три градиента и полоса кисти. */ html { background-color: var(--mtl-2); background-image: repeating-linear-gradient(100deg, var(--mtl-brush) 0px, var(--mtl-brush) 1px, transparent 1px, transparent 7px), radial-gradient(120% 60% at 8% 0%, var(--mtl-2) 0%, transparent 62%), radial-gradient(90% 50% at 96% 4%, var(--mtl-shine) 0%, transparent 52%), linear-gradient(168deg, var(--mtl-3) 0%, var(--mtl-1) 46%, var(--mtl-2) 100%); } /* ---------- 3. Вуаль: читаемость текста, форм и подвала ---------- Слой цвета темы поверх подложки. Прозрачность даёт «едва заметную» фактуру под текстом; всё, что должно быть плотным (карточки .card, поверхности .section--surface, шапка), несёт свой фон и кроет металл само. Первая строка — запасная для браузеров без color-mix: там вуаль станет сплошной, металл спрячется, читаемость останется. */ html body { background-color: var(--mtl-fon); background-color: color-mix(in srgb, var(--mtl-fon) var(--mtl-veil), transparent); } /* ---------- 4. Хиро: полная текстура ---------- Перенесено из hub.css (задача 1094, блок «2. Металл»), объём расширен с .hero--metal на ЛЮБОЕ хиро обоих слоёв. Сцена главной (.hero--scene) исключена намеренно: она стоит на фотографическом кадре хром-героя, и класть под него градиенты металла — значит ломать сцену, что круг 1204 делать не вправе (границы задачи). Знак-гигант ей тоже не нужен: он у неё в кадре и есть. */ .hero:not(.hero--scene), .page-hero { position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--line, transparent); } .hero:not(.hero--scene)::before, .page-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(120% 130% at 8% -10%, var(--mtl-2) 0%, transparent 58%), radial-gradient(90% 120% at 96% 8%, var(--mtl-shine) 0%, transparent 48%), linear-gradient(168deg, var(--mtl-3) 0%, var(--mtl-1) 46%, var(--mtl-2) 100%); } /* Полоса кисти: тонкая шлифовка металла. Шаг крупный — на глаз читается как фактура, а не как рябь (и не мешает тексту). */ .hero:not(.hero--scene)::after, .page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient( 100deg, var(--mtl-brush) 0px, var(--mtl-brush) 1px, transparent 1px, transparent 7px); opacity: .9; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .hero:not(.hero--scene)::after, .page-hero::after { opacity: .5; } } /* ---------- 5. Знак-гигант в хиро ---------- Разметку не трогаем ни на одной странице: знак живёт на псевдоэлементе контейнера хиро, который есть в обоих слоях. Так он появляется и на страницах, которых сборщик не касается (документы, «спасибо», реквизиты) — ровно та слепая зона, на которой спотыкались подвал (#1171) и шапка (#1174). Цвет — градиент по маске знака: маска даёт нам форму, градиент — хром, токены — тему. Без поддержки маски знака просто нет: иначе на месте буквы «A» лёг бы прямоугольник градиента. */ @supports ((-webkit-mask-image: url("/assets/img/alex-znak-a.svg")) or (mask-image: url("/assets/img/alex-znak-a.svg"))) { .hero:not(.hero--scene) > .container, .page-hero > .container { position: relative; } .hero:not(.hero--scene) > .container::before, .page-hero > .container::before { content: ""; position: absolute; z-index: -1; top: 50%; left: calc(var(--pad-x, 20px) * -1.6); width: clamp(190px, 36vw, 460px); aspect-ratio: 1 / 1; transform: translateY(-50%); pointer-events: none; background: linear-gradient(155deg, var(--mtl-znak-1) 0%, var(--mtl-znak-2) 42%, var(--mtl-znak-3) 100%); -webkit-mask: url("/assets/img/alex-znak-a.svg") no-repeat center / contain; mask: url("/assets/img/alex-znak-a.svg") no-repeat center / contain; } /* ПОЧЕМУ СЛЕВА, А НЕ СПРАВА. Первый замер ставил знак у правого края — и он целиком спрятался за панелью хиро («что в наборе», .hub-panel), которая на 34 страницах занимает как раз правую половину и рисуется непрозрачной. Знака не было видно ни на одном скрине, а CSS при этом был исправен: 430×430, маска загружена. Левый край свободен на обоих типах хиро — и с панелью, и без неё. Знак стоит ПОД заголовком: это и имел в виду владелец («контраст текста поверх — физика приёмки»). Замер контраста h1 поверх знака — в протоколе круга. */ /* Мобайл: колонка на всю ширину, знак уходит выше и левее — под заголовком первого экрана он остаётся, но не спорит с подзаголовком и кнопками. */ @media (max-width: 640px) { .hero:not(.hero--scene) > .container::before, .page-hero > .container::before { top: 0; left: -22%; width: clamp(180px, 66vw, 320px); transform: none; } } } /* Печать: ни подложки, ни знака — экономим тонер и не мешаем читать распечатку договора или оферты. */ @media print { html { background: #FFFFFF; } html body { background: #FFFFFF; } .hero:not(.hero--scene)::before, .page-hero::before, .hero:not(.hero--scene)::after, .page-hero::after, .hero:not(.hero--scene) > .container::before, .page-hero > .container::before { display: none; } }