@layer brand{ /* ============================================================ КАРКАС CMS · тема «Каркас» (id: karkas) ЗДЕСЬ ТОЛЬКО СВОИ ТОКЕНЫ БРЕНДА (--brand-*). Движковые (--c-*) задаёт движок из настроек носителя — их владелец крутит в админке «Темы и цвета», и тема обязана их ПОТРЕБЛЯТЬ, а не задавать (правило И2). Значения бренда для них лежат в сиде носителя (karkas-site-seed.ts): фон, текст, акцент, линии, «мягкий» текст абзацев, статусы. Что уехало в движок и почему: --c-body → --c-ink-soft роль «текст абзаца мягче заголовка» есть у движка; --c-ok*, --c-warn*, --c-bad* → статусы движка: они нужны ЛЮБОМУ носителю независимо от бренда, и движок сам считает контрастный текст и подложку (#230). Что осталось брендом: фирменные тёмные поверхности, второй и третий акцент, линии и вся инверсная палитра — на носителе без этого бренда они бессмысленны. ============================================================ */ :root {/* ---- фирменные поверхности (тёмные блоки: герой, «чертёж», футер) ---- */ --brand-surface-deep: #0e1422;--brand-surface-deeper: #141b29;/* ---- приглушённый текст и линии ---- */ /* #237 Пометка «на #hex» рядом с токеном — объявленная ПОВЕРХНОСТЬ: по ней линт пакета считает контраст. Бренд-токены не проходят автокоррекцию движка (#187), поднимать значение должен пакет, а не движок — иначе фирменный цвет молча меняется. Семь помеченных ниже не проходят норму;значения оставлены как на бою (правило визуальной нейтральности), правка — отдельным дизайнерским проходом. */ --brand-ink-faint: #9aa1b1;/* заливки и рамки, на #F4F7FB */ --brand-ink-faint-text: #6d768d;/* он же текстом: #197, на #F4F7FB */ --brand-line-soft: #eef1f6;--brand-line-dark: #1e2636;/* ---- второй и третий акцент (у движка один --c-accent) ---- */ --brand-accent-deep: #0b87a0;/* заливки и рамки */ --brand-accent-deep-ink: #0b8199;/* он же текстом, на #F4F7FB */ --brand-accent-bright: #3cc8dc;/* акцент на тёмных поверхностях */ --brand-accent-bright-ink: #197b8a;/* ---- инверсная палитра: текст на тёмных блоках ---- */ --brand-ink-inv: #ffffff;--brand-ink-inv-soft: #c2c8d4;--brand-ink-inv-faint: #687794;/* на #141b29 */ --brand-ink-inv-muted: #6e768a;/* на #0e1422 */ --brand-ink-inv-dim: #5c6472;/* на #0e1422 */ /* ---- роли, найденные линтом при миграции (#228): раньше литералы по месту ---- */ --brand-ink-inv-label: #6376a4;/* мелкая подпись, на #0e1422 */ --brand-ink-code: #dce3f0;/* моноширинный текст в тёмном блоке кода */ --brand-surface-sketch: #26304a;/* блоки-заглушки в макете «чертёж» */ --brand-line-dim: #3a4457;/* размерные линии чертежа */ --brand-accent-mint: #7bdcb0;/* акцент штампа заявки */ /* ---- шрифты (самохостинг, см. fonts.css) ---- */ /* Шрифты берутся из настроек носителя (движок эмитит --font / --font-head / --head-w). Здесь только моноширинный: у движка такой роли нет. */ --brand-font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', 'Menlo', monospace;/* ---- геометрия ---- */ /* --radius и --r-lg задаёт движок из настроек носителя;здесь только третий радиус. */ --brand-radius-xl: 24px;--shadow: 0 10px 30px color-mix(in srgb, var(--c-shadow) 7%, transparent);/* ---- плотность (множитель вертикального ритма) ---- */ --density: 1} /* ============================================================ КАРКАС CMS · BASE_CSS (слой движка) Базовая вёрстка шаблонов и блоков-шорткодов. Цвет/шрифт/радиус — ТОЛЬКО через токены темы (tokens.css). Хардкода цветов здесь нет — не ищите его и в шаблонах. ============================================================ */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{font-family:var(--font);color:var(--c-text);background:var(--c-bg);line-height:1.55;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} img,svg{max-width:100%} img{display:block} h1,h2,h3,h4{font-family:var(--font-head);font-weight:var(--head-w);letter-spacing:-.02em;line-height:1.08;text-wrap:balance} p{text-wrap:pretty} .wrap{max-width:1180px;margin:0 auto;padding:0 28px} ::selection{background:color-mix(in srgb,var(--c-accent) 25%,transparent)} :focus-visible{outline:2px solid var(--c-accent);outline-offset:2px} /* ---------- кнопки ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font);font-weight:700;font-size:15px;height:48px;padding:0 24px;border-radius:var(--radius);border:0;cursor:pointer;transition:background .15s,color .15s,border-color .15s,transform .12s;white-space:nowrap} .btn:active{transform:translateY(1px)} .btn-primary{background:var(--c-accent);color:var(--c-on-accent)} .btn-primary:hover{background:var(--brand-accent-deep)} .btn-dark{background:var(--c-text);color:var(--brand-ink-inv)} .btn-outline{background:transparent;color:var(--c-text);border:1px solid var(--c-line)} .btn-outline:hover{border-color:var(--c-accent);color:var(--c-accent)} .btn-outline-inv{background:transparent;color:var(--brand-ink-inv);border:1px solid color-mix(in srgb, var(--brand-ink-inv) 25%, transparent)} .btn-outline-inv:hover{border-color:var(--brand-accent-bright);color:var(--brand-accent-bright-ink)} .btn-sm{height:40px;padding:0 18px;font-size:13.5px} .btn:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px} /* ---------- поля форм ---------- */ .field{width:100%;font-family:var(--font);font-size:15px;color:var(--c-text);background:var(--c-bg-elev);border:1px solid var(--c-line);border-radius:var(--radius);padding:13px 16px;transition:border-color .15s} .field::placeholder{color:var(--brand-ink-faint-text)} .field:focus{outline:none;border-color:var(--c-accent)} .field[aria-invalid="true"]{border-color:var(--c-bad)} textarea.field{resize:vertical;min-height:110px} label.lb{display:block;font-size:13px;font-weight:700;margin-bottom:7px} .fine{font-size:12px;color:var(--brand-ink-faint-text);line-height:1.5} /* ---------- пилюли-статусы ---------- */ .pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--brand-font-mono);font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:calc(var(--radius) * .6)} .pill-ok{background:var(--c-ok-soft);color:var(--c-ok-ink)} .pill-brand{background:color-mix(in srgb,var(--c-accent) 10%,transparent);color:var(--brand-accent-deep-ink)} .pill-soft{background:var(--brand-line-soft);color:var(--c-muted)} .pill-wip{background:var(--c-warn-soft);color:var(--c-warn-ink)} .tag{display:inline-block;font-family:var(--brand-font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--c-muted);border:1px solid var(--c-line);border-radius:calc(var(--radius) * .6);padding:5px 10px;background:var(--c-bg-elev)} /* ---------- секции ---------- */ .sec{padding:calc(88px * var(--density)) 0} .sec-tight{padding-top:0} .sec-head{max-width:680px;margin-bottom:calc(44px * var(--density))} .sec-head h2{font-size:clamp(28px,3.4vw,42px)} .sec-head p{margin-top:14px;font-size:17px;color:var(--c-ink-soft)} .sec-elev{background:var(--c-bg-elev);border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line)} /* ---------- карточки ---------- */ .card{background:var(--c-bg-elev);border:1px solid var(--c-line);border-radius:var(--r-lg);padding:26px} .card-ink{background:var(--brand-surface-deep);border:1px solid var(--brand-line-dark);border-radius:var(--r-lg);padding:26px;color:var(--brand-ink-inv)} /* ---------- шапка (шаблон layout · слот: header) ---------- */ .hdr{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--c-bg) 85%,transparent);backdrop-filter:blur(12px) saturate(150%);border-bottom:1px solid var(--c-line)} .hdr-in{display:flex;align-items:center;justify-content:space-between;height:66px;gap:20px} .logo{display:flex;align-items:center;gap:10px} .logo svg{height:26px;width:auto;flex:none} .logo b{font-weight:800;font-size:17px;letter-spacing:.05em} .nav{display:flex;gap:26px;align-items:center} .nav a{font-size:14px;font-weight:600;color:var(--c-muted);transition:color .15s} .nav a:hover,.nav a.on{color:var(--c-text)} .hdr-cta{display:flex;gap:10px;align-items:center} .burger{display:none;border:1px solid var(--c-line);background:var(--c-bg-elev);border-radius:calc(var(--radius) * .8);width:42px;height:42px;cursor:pointer;place-items:center} .burger svg{stroke:var(--c-text)} /* ---------- подвал (шаблон layout · слот: footer) ---------- */ footer{background:var(--c-bg-warm);color:var(--brand-ink-inv-muted);padding:calc(56px * var(--density)) 0 34px;font-size:14px} .ft{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding-bottom:38px;border-bottom:1px solid var(--brand-line-dark)} .ft h4{color:var(--brand-ink-inv);font-size:13px;font-weight:700;margin-bottom:14px;letter-spacing:.02em} .ft a{display:block;padding:5px 0;color:var(--brand-ink-inv-muted);transition:color .15s} .ft a:hover{color:var(--brand-ink-inv)} .ft-note{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:22px;font-family:var(--brand-font-mono);font-size:11px;letter-spacing:.08em;color:var(--brand-ink-inv-dim)} /* ============================================================ БЛОКИ-ШОРТКОДЫ (renderShortcodes → эта разметка) ============================================================ */ /* [steps] Шаг :: текст | … — нумерованные шаги */ .sc-steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:44px;list-style:none;counter-reset:step} .sc-steps::before{content:"";position:absolute;top:23px;left:8%;right:8%;height:1px;background:repeating-linear-gradient(90deg,var(--c-accent) 0,var(--c-accent) 8px,transparent 8px,transparent 15px);opacity:.6} .sc-steps li{position:relative;padding-top:64px;counter-increment:step} .sc-steps li::before{content:"0" counter(step);position:absolute;top:0;left:0;width:46px;height:46px;background:var(--c-bg-elev);border:1.5px solid var(--c-accent);display:grid;place-items:center;font-family:var(--brand-font-mono);font-size:13px;font-weight:600;color:var(--brand-accent-deep-ink);border-radius:calc(var(--radius) * .3)} .sc-steps li::after{content:"";position:absolute;top:4px;left:4px;width:38px;height:38px;border:1px dashed color-mix(in srgb,var(--c-accent) 40%,transparent);pointer-events:none} .sc-steps h3{font-size:19px;margin-bottom:8px} .sc-steps p{font-size:14.5px;color:var(--c-ink-soft);line-height:1.6;max-width:300px} .sc-steps .note{display:block;font-family:var(--brand-font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-ink-faint-text);margin-top:12px} /* [features] Заголовок :: текст | … — бенто-сетка фич */ .sc-features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .sc-features article{background:var(--c-bg-elev);border:1px solid var(--c-line);border-radius:var(--r-lg);padding:26px;transition:border-color .2s,box-shadow .2s} .sc-features article:hover{border-color:color-mix(in srgb,var(--c-accent) 50%,transparent);box-shadow:var(--shadow)} .sc-features h3{font-size:18px;margin-bottom:8px;display:flex;align-items:center;gap:10px} .sc-features p{font-size:14px;color:var(--c-ink-soft);line-height:1.6} .sc-features .mono{display:block;margin-bottom:12px;color:var(--c-accent)} .sc-features article.span2{grid-column:span 2} /* тёмная карточка внутри сетки фич (секция «платформа») */ .sc-features article.card-ink{background:var(--brand-surface-deep);border-color:var(--brand-line-dark);color:var(--brand-ink-inv)} .sc-features article.card-ink:hover{border-color:color-mix(in srgb,var(--brand-accent-bright) 55%,transparent);box-shadow:0 10px 30px color-mix(in srgb, var(--c-shadow) 35%, transparent)} .sc-features article.card-ink h3{color:var(--brand-ink-inv)} .sc-features article.card-ink p{color:var(--brand-ink-inv-faint)} .sc-features article.card-ink .mono{color:var(--brand-accent-bright-ink)} /* модификатор: 4 колонки на десктопе */ .sc-features.cols4{grid-template-columns:repeat(4,1fr)} /* [quote author="…"] — пул-цитата */ .sc-quote{border-left:3px solid var(--c-accent);padding:6px 0 6px 26px;margin:34px 0} .sc-quote blockquote{font-family:var(--font-head);font-weight:600;font-size:22px;line-height:1.4;letter-spacing:-.01em} .sc-quote figcaption{margin-top:12px;font-family:var(--brand-font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--c-muted)} /* [ticker] A | B | C — бегущая строка */ .sc-ticker{overflow:hidden;border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line);background:var(--c-bg-elev);padding:13px 0;white-space:nowrap} .sc-ticker .track{display:inline-flex;gap:0} .sc-ticker span{font-family:var(--brand-font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-muted);padding:0 22px;position:relative} .sc-ticker span::after{content:"·";position:absolute;right:-4px;color:var(--c-accent)} html[data-motion="on"] .sc-ticker .track{animation:sc-ticker 28s linear infinite} @keyframes sc-ticker{to{transform:translateX(-50%)}} /* [form:slug] — серверный HTML формы */ .sc-form{display:flex;flex-direction:column;gap:14px} /* FAQ-блок шаблона (schema FAQPage генерит движок) */ .faq{max-width:840px} .faq details{background:var(--c-bg-elev);border:1px solid var(--c-line);margin-bottom:-1px;overflow:hidden} .faq details:first-of-type{border-radius:var(--radius) var(--radius) 0 0} .faq details:last-of-type{border-radius:0 0 var(--radius) var(--radius)} .faq summary{list-style:none;cursor:pointer;display:flex;gap:18px;align-items:baseline;padding:19px 24px;font-weight:700;font-size:16px} .faq summary::-webkit-details-marker{display:none} .faq summary .qn{font-family:var(--brand-font-mono);font-size:10.5px;color:var(--brand-accent-deep-ink);letter-spacing:.1em;flex:none} .faq summary .pl{margin-left:auto;flex:none;color:var(--c-accent);font-weight:700;font-size:18px;line-height:1;transition:transform .2s} .faq details[open] summary .pl{transform:rotate(45deg)} .faq details[open]{border-left:3px solid var(--c-accent)} .faq .a{padding:0 24px 20px 66px;font-size:15px;color:var(--c-ink-soft);line-height:1.65;max-width:700px} .faq .a a{color:var(--brand-accent-deep-ink);text-decoration:underline} /* слот картинки (image-slot): медиа добавится позже */ .img-slot{position:relative;border:1px dashed var(--c-line);border-radius:var(--r-lg);background:repeating-linear-gradient(45deg,var(--c-bg) 0,var(--c-bg) 12px,var(--brand-line-soft) 12px,var(--brand-line-soft) 13px);display:grid;place-items:center;min-height:220px;overflow:hidden} .img-slot span{font-family:var(--brand-font-mono);font-size:11px;letter-spacing:.08em;color:var(--c-muted);background:var(--c-bg-elev);border:1px solid var(--c-line);padding:8px 14px;text-align:center;line-height:1.6;border-radius:calc(var(--radius) * .6)} /* ---------- адаптив ---------- */ @media (max-width:960px){ .ft{grid-template-columns:1fr 1fr} .sec{padding:calc(64px * var(--density)) 0} .sc-features,.sc-features.cols4{grid-template-columns:1fr 1fr} } /* с шестым пунктом меню навигация не влезает до ~1000px — бургер раньше */ @media (max-width:1000px){ .nav{display:none;position:absolute;top:66px;left:0;right:0;background:var(--c-bg-elev);border-bottom:1px solid var(--c-line);flex-direction:column;align-items:stretch;padding:10px 28px 18px;gap:2px} .nav.open{display:flex} .nav a{padding:11px 0;font-size:16px} .burger{display:grid} } @media (max-width:820px){ .hdr-cta .btn-outline{display:none} .sc-steps{grid-template-columns:1fr;gap:28px} .sc-steps::before{display:none} .sc-steps li{padding-top:0;padding-left:64px} .sc-features article.span2{grid-column:auto} } @media (max-width:600px){ .wrap{padding:0 18px} .ft{grid-template-columns:1fr} .sc-features,.sc-features.cols4{grid-template-columns:1fr} } /* #252 На 320 px строка шапки не помещалась в свой контейнер: логотип 85 + промежуток 20 + группа кнопок 201 = 306 при доступных 284, и правые 4 px уходили за экран — боковая прокрутка на КАЖДОЙ странице сайта. «Демо» к этой ширине уже скрыт (правило выше). Недостающие 22 px добираются ИНТЕРВАЛАМИ, а не текстом: подпись кнопки — контент, и менять её по ширине значило бы дублировать текст в разметке всех страниц и развести формулировку призыва с остальным сайтом. Прятать саму кнопку тоже нельзя: на самой узкой ширине заявку оставляют чаще всего, и это единственное целевое действие в шапке. Всё ограничено шапкой и диапазоном ниже 380 px — на 390 и шире вид не меняется. */ @media (max-width:380px){ .hdr .wrap{padding:0 14px} .hdr-in{gap:12px} .hdr-cta{gap:8px} .hdr-cta .btn-sm{padding:0 12px} } /* Запас на случай, когда фирменный шрифт не приехал (медленная сеть, блокировка): у запасного шрифта метрики шире, подпись кнопки распухает, и точно подогнанная строка шапки снова выталкивала бы страницу вбок. У кнопки стоит white-space:nowrap, а у флекс-элемента min-width по умолчанию auto — вдвоём они запрещают сжатие, и лишнее уходит за экран. Разрешаем сжиматься и группе, и самой кнопке: при фирменном шрифте правило не проявляется вовсе (места хватает), при запасном кнопка укоротится на пару пикселей вместо боковой прокрутки. Без backtick — генератор на них падает. */ .hdr-cta{min-width:0} .hdr-cta .btn{min-width:0;overflow:hidden;text-overflow:ellipsis} /* Вторая ступень — только 340 px и уже (iPhone SE и подобные). На 320 сжатие из правила выше срабатывало не как аварийный запас, а как штатный режим: логотипу не хватало 7 px, кнопке 5, бургер терял 3 — то есть подпись «Оставить заявку» реально усекалась многоточием. Недостающие 15 px добираются теми же интервалами, ещё на шаг: гуттер 14 → 10, промежутки 12 → 8, 8 → 6, 10 → 8. На 360 и шире ничего не меняется — там строка помещается с запасом и эти правила не применяются вовсе. */ @media (max-width:340px){ .hdr .wrap{padding:0 10px} .hdr-in{gap:8px} .hdr-cta{gap:6px} .logo{gap:8px} } /* ============================================================ Тема «Каркас» · слой характера «Живой чертёж» Оформление поверх BASE_CSS. Только токены — хардкода нет. ============================================================ */ /* технический голос темы */ .mono{font-family:var(--brand-font-mono);font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase} .mono-c{color:var(--c-accent)} /* заголовки-«листы» */ .sheet-head{display:flex;align-items:baseline;gap:18px;margin-bottom:8px} .sheet-head .num{font-family:var(--brand-font-mono);font-size:12px;color:var(--brand-accent-deep-ink);letter-spacing:.16em;white-space:nowrap} .sheet-head .ln{flex:1;height:1px;background:var(--c-line);position:relative;top:-4px} .sheet-head .rev{font-family:var(--brand-font-mono);font-size:10px;color:var(--c-muted);letter-spacing:.1em;white-space:nowrap} @media (max-width:640px){.sheet-head .rev{display:none}} /* уголки-кронштейны (фирменный приём) */ .frame2{position:relative} .frame2::before{content:"";position:absolute;top:10px;left:10px;width:18px;height:18px;border-top:2.5px solid var(--c-accent);border-left:2.5px solid var(--c-accent);pointer-events:none} .frame2::after{content:"";position:absolute;bottom:10px;right:10px;width:18px;height:18px;border-bottom:2.5px solid var(--c-accent);border-right:2.5px solid var(--c-accent);pointer-events:none} .frame4{position:relative} .frame4::before{content:"";position:absolute;top:12px;left:12px;width:18px;height:18px;border-top:2.5px solid var(--brand-accent-bright);border-left:2.5px solid var(--brand-accent-bright);pointer-events:none} .frame4::after{content:"";position:absolute;bottom:12px;right:12px;width:18px;height:18px;border-bottom:2.5px solid var(--brand-accent-bright);border-right:2.5px solid var(--brand-accent-bright);pointer-events:none} .frame4 .fx{position:absolute;width:18px;height:18px;pointer-events:none} .frame4 .fx.tr{top:12px;right:12px;border-top:2.5px solid var(--brand-accent-bright);border-right:2.5px solid var(--brand-accent-bright)} .frame4 .fx.bl{bottom:12px;left:12px;border-bottom:2.5px solid var(--brand-accent-bright);border-left:2.5px solid var(--brand-accent-bright)} /* чертёжная сетка на тёмном и светлом */ .gridded{position:relative} .gridded::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(color-mix(in srgb, var(--brand-ink-inv) 3.5%, transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb, var(--brand-ink-inv) 3.5%, transparent) 1px,transparent 1px);background-size:40px 40px} .gridded>*{position:relative} .gridded-light{position:relative} .gridded-light::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(color-mix(in srgb,var(--c-accent) 6%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--c-accent) 6%,transparent) 1px,transparent 1px);background-size:40px 40px;-webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 20%,#000 30%,transparent 100%);mask-image:radial-gradient(ellipse 70% 80% at 50% 20%,#000 30%,transparent 100%)} .gridded-light>*{position:relative} /* тёмные секции */ .sec-ink{background:var(--c-bg-warm);color:var(--brand-ink-inv)} .sec-ink .sec-head h2{color:var(--brand-ink-inv)} .sec-ink .sec-head p{color:var(--brand-ink-inv-faint)} .sec-ink .mono{color:var(--brand-accent-bright-ink)} /* hero страниц (шаблон page.html · hero-пресет photo/center) */ .page-hero{background:var(--c-bg-warm);color:var(--brand-ink-inv);padding:calc(64px * var(--density)) 0 calc(56px * var(--density))} .page-hero h1{font-size:clamp(32px,4vw,48px);color:var(--brand-ink-inv);margin-top:16px} .page-hero p{margin-top:14px;font-size:17px;color:var(--brand-ink-inv-faint);max-width:620px;line-height:1.6} .page-hero .mono{color:var(--brand-ink-inv-muted)} /* ГОСТ-штамп в подвале — подпись темы */ .gost{border:1.5px solid var(--brand-line-dark);font-family:var(--brand-font-mono);font-size:10px;letter-spacing:.08em;color:var(--brand-ink-inv-muted);display:grid;grid-template-columns:1.3fr .8fr .8fr 1.1fr;margin-bottom:40px} .gost div{padding:9px 14px;border-right:1px solid var(--brand-line-dark);border-bottom:1px solid var(--brand-line-dark)} .gost div:nth-child(4n){border-right:0} .gost div:nth-last-child(-n+4){border-bottom:0} .gost b{display:block;color:var(--brand-ink-inv-label);font-weight:600;font-size:11px;margin-top:2px;letter-spacing:.04em} .gost .wide{grid-column:span 2} @media (max-width:700px){ .gost{grid-template-columns:1fr 1fr} .gost div:nth-child(4n){border-right:1px solid var(--brand-line-dark)} .gost div:nth-child(2n){border-right:0} .gost div:nth-last-child(-n+4){border-bottom:1px solid var(--brand-line-dark)} .gost div:nth-last-child(-n+2){border-bottom:0} } /* раскос — маркер списков */ .who li::before,.cta-list div::before{content:"";flex:none;width:14px;height:2.5px;border-radius:2px;transform:skewX(-30deg);margin-top:9px;background:var(--c-accent)} /* ============================================================ Тема «Каркас» · оформление секций шаблонов (page.html / list.html / article.html / notfound.html) Только токены. Сетка/структура — из шаблонов движка. ============================================================ */ /* ============ HERO главной (hero-пресет: split) ============ */ .hero{background:var(--c-bg-warm);color:var(--brand-ink-inv);padding:calc(72px * var(--density)) 0 calc(84px * var(--density));overflow:hidden;position:relative} .hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:60px;align-items:center} .hero h1{font-size:clamp(36px,4.8vw,62px);color:var(--brand-ink-inv);margin:24px 0 20px} .hero h1 em{font-style:normal;color:var(--brand-accent-bright-ink)} .hero .lead{font-size:18px;line-height:1.6;color:var(--brand-ink-inv-faint);max-width:500px} .hero .lead b{color:var(--brand-ink-inv);font-weight:700} .hero-cta{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap} .hero-tags{display:flex;gap:10px;margin-top:38px;flex-wrap:wrap} .hero-tags span{font-family:var(--brand-font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-ink-faint-text);border:1px solid var(--brand-line-dark);padding:7px 12px;border-radius:calc(var(--radius) * .6);white-space:nowrap} .hero-tags span b{color:var(--brand-accent-bright-ink);font-weight:600} .doc-line{display:inline-flex;align-items:center;font-family:var(--brand-font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--brand-line-dark)} .doc-line span{padding:7px 12px;color:var(--brand-ink-inv-muted)} .doc-line span+span{border-left:1px solid var(--brand-line-dark)} .doc-line .hl{color:var(--brand-accent-bright-ink)} /* сборочный чертёж (иллюстрация hero-пресета, CSS-only) */ .asm{position:relative;aspect-ratio:10/11;max-width:520px;justify-self:end;width:100%} .asm .paper{position:absolute;inset:0;border:1px solid var(--brand-line-dark);background:var(--brand-surface-deep);background-image:linear-gradient(color-mix(in srgb, var(--brand-ink-inv) 4%, transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb, var(--brand-ink-inv) 4%, transparent) 1px,transparent 1px);background-size:26px 26px} .blk{position:absolute;border:1px solid color-mix(in srgb,var(--brand-accent-bright) 55%,transparent);background:color-mix(in srgb,var(--brand-surface-deeper) 65%,transparent)} .blk .lbl{position:absolute;top:8px;left:10px;font-family:var(--brand-font-mono);font-size:9px;letter-spacing:.12em;color:var(--brand-ink-inv-muted);text-transform:uppercase} .blk .st{position:absolute;bottom:8px;right:10px;font-family:var(--brand-font-mono);font-size:9px;letter-spacing:.08em;color:var(--c-ok-ink)} .blk .ck{position:absolute;width:12px;height:12px;border-color:var(--brand-accent-bright);border-style:solid;border-width:0} .blk .ck.a{top:-1px;left:-1px;border-top-width:2px;border-left-width:2px} .blk .ck.b{bottom:-1px;right:-1px;border-bottom-width:2px;border-right-width:2px} .sk{position:absolute;background:var(--brand-surface-sketch);border-radius:2px} .sk.c{background:var(--c-accent);opacity:.85} .asm .status{position:absolute;left:12px;bottom:10px;font-family:var(--brand-font-mono);font-size:9.5px;letter-spacing:.14em;color:var(--brand-ink-inv-dim);text-transform:uppercase} .asm .status b{color:var(--c-ok-ink);font-weight:600} /* анимация сборки — гейт data-motion (тумблер в Tweaks) */ html[data-motion="on"] .blk{opacity:0;transform:translateY(-26px);animation:blk-drop .55s cubic-bezier(.2,.9,.3,1.2) forwards} html[data-motion="on"] .blk:nth-child(4){animation-delay:.15s} html[data-motion="on"] .blk:nth-child(5){animation-delay:.4s} html[data-motion="on"] .blk:nth-child(6){animation-delay:.65s} html[data-motion="on"] .blk:nth-child(7){animation-delay:.9s} html[data-motion="on"] .blk:nth-child(8){animation-delay:1.15s} html[data-motion="on"] .blk:nth-child(9){animation-delay:1.4s} html[data-motion="on"] .sk.c{background:linear-gradient(90deg,var(--c-accent) 0%,var(--brand-accent-bright) 50%,var(--c-accent) 100%);background-size:200% 100%;animation:sk-shine 3s linear infinite} @keyframes sk-shine{to{background-position:-200% 0}} @keyframes blk-drop{from{opacity:0;transform:translateY(-26px)}to{opacity:1;transform:translateY(0)}} /* ============ дефектная ведомость (2 карточки) ============ */ .defect{display:grid;grid-template-columns:1fr 1fr;gap:18px} .dcard{background:var(--c-bg-elev);border:1px solid var(--c-line);border-radius:var(--r-lg);overflow:hidden} .dcard .hd{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid var(--brand-line-soft);font-family:var(--brand-font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--c-muted)} .dcard .hd b{color:var(--c-bad-ink);font-weight:600} .dcard .bd{padding:24px} .dcard h3{font-size:20px;margin-bottom:10px} .dcard p{font-size:14.5px;color:var(--c-ink-soft);line-height:1.6} .dcard .fix{margin-top:18px;border:1px solid color-mix(in srgb,var(--c-accent) 35%,transparent);background:color-mix(in srgb,var(--c-accent) 5%,transparent);padding:14px 16px;position:relative;font-size:14.5px;line-height:1.55} .dcard .fix::before{content:"РЕШЕНИЕ";position:absolute;top:-8px;left:12px;background:var(--c-bg-elev);font-family:var(--brand-font-mono);font-size:9px;letter-spacing:.16em;color:var(--brand-accent-deep-ink);padding:0 8px} /* ============ спецификация (ведомость элементов) ============ */ .spec{background:var(--c-bg-elev);border:1px solid var(--c-line);border-radius:var(--r-lg);overflow:hidden} .spec-hd{display:grid;grid-template-columns:110px 1.05fr 1.6fr 170px;gap:24px;padding:12px 28px;background:var(--c-bg);border-bottom:1px solid var(--c-line);font-family:var(--brand-font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-ink-faint-text)} .spec-hd span:last-child{justify-self:end} .spec-row{display:grid;grid-template-columns:110px 1.05fr 1.6fr 170px;gap:24px;align-items:center;padding:calc(22px * var(--density)) 28px;border-bottom:1px solid var(--brand-line-soft);transition:background .15s;position:relative} .spec-row:last-child{border-bottom:0} .spec-row:hover{background:var(--c-bg)} .spec-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--c-accent);transition:width .18s} .spec-row:hover::before{width:3px} .spec-row .pos-n{font-family:var(--brand-font-mono);font-size:11px;color:var(--brand-ink-faint-text);letter-spacing:.1em} .spec-row h3{font-size:17px} .spec-row p{font-size:14px;color:var(--c-ink-soft);line-height:1.55} .spec-row .stx{justify-self:end} .spec-row.lead-row{background:var(--c-bg-warm);color:var(--brand-ink-inv)} .spec-row.lead-row p{color:var(--brand-ink-inv-faint)} .spec-row.lead-row .pos-n{color:var(--brand-accent-bright-ink)} .spec-row.lead-row::before{width:3px;background:var(--brand-accent-bright)} /* ============ редакции (этажи-модули) ============ */ .ed-switch{display:inline-flex;background:var(--c-bg-elev);border:1px solid var(--c-line);border-radius:999px;padding:4px;gap:2px} .ed-switch button{font-family:var(--font);font-weight:700;font-size:14px;color:var(--c-muted);border:0;background:transparent;border-radius:999px;padding:10px 22px;cursor:pointer;transition:.15s} .ed-switch button.on{background:var(--c-text);color:var(--brand-ink-inv)} .ed-note{font-family:var(--brand-font-mono);font-size:11px;letter-spacing:.08em;color:var(--c-muted);margin-left:14px} .ed-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:30px} .ed{background:var(--c-bg-elev);border:1px solid var(--c-line);border-radius:var(--r-lg);padding:24px 22px;display:flex;flex-direction:column;position:relative;transition:border-color .2s,box-shadow .2s} .ed:hover{border-color:color-mix(in srgb,var(--c-accent) 50%,transparent);box-shadow:var(--shadow)} .ed .mono{display:block;font-size:10px;color:var(--brand-ink-faint-text);margin-bottom:12px} .floors{display:flex;flex-direction:column-reverse;gap:4px;margin-bottom:18px;height:92px;justify-content:flex-start} .floors i{display:block;height:17px;border:1px solid var(--c-line);border-radius:3px;background:var(--c-bg);font-style:normal;position:relative;overflow:hidden} .floors i.on{border-color:var(--c-accent);background:color-mix(in srgb,var(--c-accent) 10%,transparent)} .floors i.on::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c-accent)} .floors i span{position:absolute;right:6px;top:50%;transform:translateY(-50%);font-family:var(--brand-font-mono);font-size:8px;letter-spacing:.1em;color:var(--brand-ink-faint-text);text-transform:uppercase} .floors i.on span{color:var(--brand-accent-deep-ink)} .ed h3{font-size:20px} .ed .for{font-size:13px;color:var(--c-muted);margin-top:5px;min-height:40px;line-height:1.5} .ed .price{margin:16px 0 2px;font-weight:800;font-size:28px;letter-spacing:-.02em} .ed .price small{font-size:13px;font-weight:600;color:var(--c-muted);letter-spacing:0} .ed .price-note{font-family:var(--brand-font-mono);font-size:10px;color:var(--brand-ink-faint-text);letter-spacing:.06em;min-height:16px;margin-bottom:16px} .ed .btn{width:100%;margin-top:auto} .ed.top-pick{background:var(--c-bg-warm);border-color:var(--c-bg-warm);color:var(--brand-ink-inv)} .ed.top-pick .for{color:var(--brand-ink-inv-faint)} .ed.top-pick .mono{color:var(--brand-accent-bright-ink)} .ed.top-pick .price-note{color:var(--brand-ink-inv-muted)} .ed.top-pick .floors i{background:var(--brand-surface-deeper);border-color:var(--brand-line-dark)} .ed.top-pick .floors i.on{border-color:var(--brand-accent-bright);background:color-mix(in srgb,var(--brand-accent-bright) 12%,transparent)} .ed.top-pick .floors i.on::after{background:var(--brand-accent-bright)} .ed.top-pick .floors i.on span{color:var(--brand-accent-bright-ink)} /* ============ таблицы: протокол испытаний / матрица ============ */ .cmp-scroll,.mx-scroll{overflow-x:auto} .cmp,.mx{width:100%;border-collapse:separate;border-spacing:0;background:var(--c-bg-elev);border:1px solid var(--c-line);border-radius:var(--r-lg);overflow:hidden;font-size:14.5px} .cmp th,.cmp td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--brand-line-soft);vertical-align:top} .cmp tr:last-child td,.mx tr:last-child td{border-bottom:0} .cmp thead th{font-family:var(--brand-font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:var(--brand-ink-faint-text);background:var(--c-bg)} .cmp .us-col{background:var(--c-bg-warm);color:var(--brand-ink-inv)} .cmp thead th.us-col{color:var(--brand-ink-inv)} .cmp thead th.us-col .lg{display:flex;align-items:center;gap:8px;font-family:var(--font-head);font-weight:800;font-size:14px;letter-spacing:.04em;text-transform:none} .cmp td.us-col{font-family:var(--brand-font-mono);font-size:12.5px;color:var(--brand-accent-bright-ink)} .cmp td.us-col.ok{color:var(--c-ok-ink)} .cmp td:first-child{font-weight:700} .cmp td .sub,.mx td .sub{display:block;font-weight:400;font-size:12.5px;color:var(--c-muted);margin-top:3px} .mx{min-width:820px;font-size:14px} .mx th,.mx td{padding:13px 18px;border-bottom:1px solid var(--brand-line-soft);text-align:center} .mx td:first-child,.mx th:first-child{text-align:left} .mx thead th{background:var(--c-bg);vertical-align:bottom;padding-top:20px} .mx thead .nm{font-weight:800;font-size:17px;letter-spacing:-.01em} .mx thead .pr{display:block;font-family:var(--brand-font-mono);font-size:11px;color:var(--c-muted);font-weight:500;margin-top:5px} .mx thead th.pick{background:var(--c-bg-warm);color:var(--brand-ink-inv)} .mx thead th.pick .pr{color:var(--brand-accent-bright-ink)} .mx td.pick{background:color-mix(in srgb,var(--c-text) 3%,transparent)} .mx .grp td{background:var(--c-bg);font-family:var(--brand-font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--c-muted);text-align:left;padding:9px 18px} /* вместо галочек — фирменный укос (UI-kit) */ .mx .yes{font-size:0;line-height:0} .mx .yes::before{content:"";display:inline-block;width:18px;height:3px;background:var(--c-accent);border-radius:2px;transform:skewX(-30deg)} .mx .no{color:var(--c-line)} .mx .txt{font-size:12.5px;color:var(--c-ink-soft)} .mx .wip{display:inline-block;font-family:var(--brand-font-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;background:var(--c-warn-soft);color:var(--c-warn-ink);border-radius:5px;padding:3px 7px} .mx td:first-child{font-weight:600;color:var(--c-text)} /* ============ для кого ============ */ .who-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px} .who{border-radius:var(--r-lg);padding:34px} .who.biz{background:var(--c-bg-elev);border:1px solid var(--c-line)} .who.studio{background:var(--c-bg-warm);color:var(--brand-ink-inv)} .who .mono{display:block;margin-bottom:16px} .who.biz .mono{color:var(--c-accent)} .who.studio .mono{color:var(--brand-accent-bright-ink)} .who h3{font-size:22px;margin-bottom:10px} .who>p{font-size:15px;line-height:1.6;color:var(--c-ink-soft)} .who.studio>p{color:var(--brand-ink-inv-faint)} .who ul{list-style:none;margin-top:20px;display:flex;flex-direction:column;gap:11px} .who li{display:flex;gap:10px;font-size:14.5px;align-items:flex-start} .who.studio li{color:var(--brand-ink-inv-faint)} .who.studio li::before{background:var(--brand-accent-bright)} /* ============ CTA-блок с формой ============ */ .cta-box{background:var(--c-bg-warm);border-radius:var(--brand-radius-xl);padding:56px;color:var(--brand-ink-inv);display:grid;grid-template-columns:1fr 1fr;gap:48px;overflow:hidden;position:relative} .cta-box h2{font-size:clamp(26px,3vw,38px);color:var(--brand-ink-inv)} .cta-box .side p{margin-top:14px;font-size:16px;color:var(--brand-ink-inv-faint);line-height:1.6} .cta-box .side .mono{display:block;color:var(--brand-accent-bright-ink);margin-bottom:14px} .cta-list{margin-top:24px;display:flex;flex-direction:column;gap:12px} .cta-list div{display:flex;gap:10px;font-size:14.5px;color:var(--brand-ink-inv-faint);align-items:flex-start} .cta-list div::before{background:var(--brand-accent-bright)} .cta-form{background:var(--brand-surface-deep);border:1px solid var(--brand-line-dark);border-radius:var(--r-lg);padding:28px;position:relative} .cta-form .field{background:var(--brand-surface-deeper);border-color:var(--brand-line-dark);color:var(--brand-ink-inv)} .cta-form .field::placeholder{color:var(--brand-ink-inv-dim)} .cta-form .field:focus{border-color:var(--brand-accent-bright)} .cta-form .fine{color:var(--brand-ink-inv-dim)} .cta-form label.lb{color:var(--brand-ink-inv-label)} .cta-strip{background:var(--c-bg-warm);border-radius:var(--brand-radius-xl);padding:44px 48px;color:var(--brand-ink-inv);display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap} .cta-strip h2{font-size:clamp(24px,2.6vw,32px);color:var(--brand-ink-inv);max-width:520px} .cta-strip p{color:var(--brand-ink-inv-faint);margin-top:8px;font-size:15px} /* штамп «ПРИНЯТО» (остров форм) */ .stamp{position:absolute;inset:0;display:none;place-items:center;background:color-mix(in srgb,var(--brand-surface-deep) 82%,transparent);border-radius:var(--r-lg);z-index:2} .stamp .in{border:3px solid var(--c-ok);color:var(--c-ok-ink);font-family:var(--brand-font-mono);font-weight:600;font-size:20px;letter-spacing:.22em;text-transform:uppercase;padding:18px 30px;transform:rotate(-8deg);position:relative} .stamp .in::after{content:"заявка · " attr(data-num);position:absolute;left:0;right:0;bottom:-26px;text-align:center;font-size:10px;letter-spacing:.16em;color:var(--brand-accent-mint)} .stamp.show{display:grid} @media (prefers-reduced-motion: no-preference){.stamp.show .in{animation:stamp-slam .35s cubic-bezier(.2,1.6,.4,1) both}} @keyframes stamp-slam{from{transform:rotate(-8deg) scale(2.2);opacity:0}to{transform:rotate(-8deg) scale(1);opacity:1}} /* ============ кейсы (шаблон list.html) ============ */ .case{display:grid;grid-template-columns:1fr 1.1fr;gap:34px;background:var(--c-bg-elev);border:1px solid var(--c-line);border-radius:var(--r-lg);padding:30px;margin-bottom:18px;align-items:center} .case.alt{grid-template-columns:1.1fr 1fr} .case.alt .shot{order:2} .case .shot .img-slot{min-height:260px;height:100%} .case .meta{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap} .case h2{font-size:24px} .case .url{font-family:var(--brand-font-mono);font-size:11px;letter-spacing:.06em;color:var(--brand-accent-deep-ink);margin:6px 0 12px} .case p{font-size:14.5px;color:var(--c-ink-soft);line-height:1.65} .case .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px} .case .facts div{border:1px solid var(--c-line);border-radius:var(--radius);padding:10px 12px} .case .facts b{display:block;font-size:13.5px} .case .facts span{font-family:var(--brand-font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-ink-faint-text)} /* ============ контакты ============ */ .ct-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:44px;align-items:start} .ct-card{display:flex;gap:16px;background:var(--c-bg-elev);border:1px solid var(--c-line);border-radius:var(--r-lg);padding:22px 24px;margin-bottom:14px} .ct-card .ic{flex:none;width:44px;height:44px;border:1.5px solid var(--c-accent);display:grid;place-items:center;border-radius:calc(var(--radius) * .6)} .ct-card .ic svg{width:20px;height:20px;stroke:var(--brand-accent-deep);fill:none;stroke-width:1.8} .ct-card b{display:block;font-size:15px} .ct-card a{display:inline-block;font-family:var(--brand-font-mono);font-size:12.5px;color:var(--brand-accent-deep-ink);margin:4px 0 6px} .ct-card p{font-size:13.5px;color:var(--c-ink-soft);line-height:1.55} .ct-form{background:var(--c-bg-elev);border:1px solid var(--c-line);border-radius:var(--r-lg);padding:30px;position:relative} .ct-form h2{font-size:22px;margin-bottom:18px} /* ============ статья (шаблон article.html) ============ */ .art{max-width:760px;margin:0 auto} .art-head{padding:calc(64px * var(--density)) 0 calc(40px * var(--density))} .art-head .meta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:20px} .art-head h1{font-size:clamp(30px,4vw,46px)} .art-head .lead{margin-top:16px;font-size:18px;color:var(--c-ink-soft);line-height:1.6} .art-body{padding-bottom:calc(40px * var(--density))} .art-body p{font-size:16.5px;line-height:1.75;color:var(--c-ink-soft);margin:0 0 22px} .art-body h2{font-size:26px;margin:44px 0 16px} .art-body h3{font-size:19px;margin:30px 0 12px} .art-body ul{margin:0 0 22px 22px} .art-body li{font-size:16px;line-height:1.7;color:var(--c-ink-soft);margin-bottom:6px} /* ---- страница «Обновления» (журнал выпусков) ---------------------------- */ /* Разметку страницы собирает генератор, поэтому оформление живёт ЗДЕСЬ, а не инлайном в его шаблоне и не блоком