/* ════════ Ось «Шаблон/Layout» (4-я, СТРУКТУРНАЯ) ════════════════════════════ .layout- на . Владеет ТОЛЬКО геометрией/компоновкой (порядок, расположение, радиусы, ширины, плотность). НЕ трогает цвет/материал-токены (--surface-*/--brand-*/--text-*/--glass-*) — это оси preset/mode/style. classic = дефолт (без класса) = текущая страница. Складывается слоями с preset×mode×style: все блоки и стекло применяются поверх любого шаблона. Загружается ПОСЛЕ an_styles.css. ПРИНЦИП: сигнатуру шаблона вешаем на ВСЕГДА присутствующие элементы (hero, кнопки, плотность), а не на опциональные блоки — иначе при выключенных блоках разницы не видно. */ /* ── «Спотлайт»: hero-карточка в фокусе, капсульная геометрия, full-width CTA, приз наверх ── */ body.participant-page.layout-spotlight{ --radius-card: 22px; --radius-button: 999px; /* кнопки-пилюли */ } /* верхний отступ: визуально-первый элемент (приз при order:-1, иначе hero) контейнерным * + * не отбивается */ body.participant-page.layout-spotlight .container{ padding-top: 1rem; } /* ВАЖНО: hero НЕ получает подложку — её сознательно убирали ранее (#success>.card прозрачный). Сигнатуру вешаем на не-подложечные, всегда видимые элементы: CTA + капсулы + плотность + приз-наверх. */ /* CTA «Подробнее о розыгрыше» — на всю ширину, капсула (всегда виден; другое расположение/форма кнопки) */ body.participant-page.layout-spotlight #raffle_more{ margin-top: 1.25rem; } body.participant-page.layout-spotlight #raffle_more .btn{ width: 100%; } /* приз поднимается над hero (бонус, когда блок включён; .container = flex-col → CSS order) */ body.participant-page.layout-spotlight #rf-prize{ order: -1; margin-top: 0 !important; margin-bottom: 1.5rem; }