/* ============================================================ ГосДвижок — публичная дизайн-система. Стиль: светлая «бенто»-эстетика (тёмный режим — по выбору в админке), коралловый акцент, скруглённые плитки (вдохновлено travelbag.rustravelforum.com). Переменные темы задаются на и через --acc (акцент сайта, задаётся в админке). ============================================================ */ :root { --acc: #ed6a17; --acc-ink: #fff; --radius: 18px; --font-display: 'Unbounded', system-ui, sans-serif; --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --maxw: none; --page-pad: clamp(16px, 4vw, 56px); --ease: cubic-bezier(.4, 0, .2, 1); } html[data-mode="dark"] { --bg: #0b0b0e; --surf: #16161b; --surf2: #1d1d24; --surf3: #23232b; --ink: #f5f5f7; --mute: #9a9aa3; --line: #27272f; --line2: #34343d; --ink-theme: #f5f5f7; --mute-theme: #9a9aa3; --glass: rgba(11, 11, 14, .72); --shadow: 0 12px 32px rgba(0, 0, 0, .45); } html[data-mode="light"] { --bg: #f1f1f4; --surf: #ffffff; --surf2: #f7f7fa; --surf3: #ececf0; --ink: #161616; --mute: #636363; --line: #dedede; --line2: #d4d4d9; --ink-theme: #161616; --mute-theme: #636363; --glass: rgba(241, 241, 244, .78); --shadow: 0 12px 32px rgba(15, 15, 20, .10); } html[data-font="system"] { --font-display: system-ui, sans-serif; } html[data-font="mono"] { --font-display: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; } /* ---------- скин «pixel» (шаблон «Школа 21»): глубокий чёрный, острые углы ---------- Палитра задаётся здесь; правила оформления элементов — в конце файла. */ html[data-mode="dark"] .tt-sun { display: block; } html[data-mode="dark"] .tt-moon { display: none; } html[data-mode="light"] .tt-sun { display: none; } html[data-mode="light"] .tt-moon { display: block; } html[data-skin="pixel"] { --pill: 4px; --acc-text: var(--acc); } html[data-skin="pixel"][data-mode="dark"] { --bg: #000; --surf: #0d0d0d; --surf2: #161616; --surf3: #1f1f1f; --ink: #f2f2f2; --mute: #9b9b9b; --line: #262626; --line2: #383838; --ink-theme: #f2f2f2; --mute-theme: #9b9b9b; --glass: rgba(0, 0, 0, .82); --shadow: 6px 6px 0 rgba(0, 0, 0, .6); } /* светлый вариант — под фон-переливы (белый + фиолетовый/голубой/мятный): поверхности полупрозрачно-белые (сквозь них виден фон), текст чёрный, электрический зелёный — только заливкой (кнопки, полоски, маркер), а для текста и ссылок — тёмно-фиолетовый --acc-text (зелёный на белом нечитаем). */ html[data-skin="pixel"][data-mode="light"] { --bg: #fff; --surf: rgba(255, 255, 255, .66); --surf2: rgba(255, 255, 255, .5); --surf3: rgba(255, 255, 255, .8); --ink: #0a0a0f; --mute: #4f4f5c; --line: rgba(10, 10, 15, .1); --line2: rgba(10, 10, 15, .18); --ink-theme: #0a0a0f; --mute-theme: #4f4f5c; --glass: rgba(255, 255, 255, .62); --shadow: 6px 6px 0 rgba(30, 10, 70, .12); --acc-text: color-mix(in srgb, var(--acc2, #8b5cf6) 72%, #000); } * { box-sizing: border-box; } [hidden] { display: none !important; } html { scroll-behavior: smooth; overflow-x: clip; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background .3s var(--ease), color .3s var(--ease); overflow-x: clip; min-width: 0; } body.nav-open { overflow: hidden; } img, video, iframe { max-width: 100%; } img { display: block; height: auto; } a { color: var(--acc); text-decoration: none; } a:hover { opacity: .85; } .page { width: 100%; max-width: none; margin: 0 auto; min-height: 60vh; min-width: 0; padding: 0 max(var(--page-pad), env(safe-area-inset-left)) 0 max(var(--page-pad), env(safe-area-inset-right)); } /* ---------- шапка ---------- */ .hdr { position: sticky; top: 0; z-index: 50; width: 100%; background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top); } .hdr-in { width: 100%; max-width: none; margin: 0 auto; padding: 10px max(var(--page-pad), env(safe-area-inset-right)) 10px max(var(--page-pad), env(safe-area-inset-left)); display: flex; align-items: center; gap: 16px; min-width: 0; } .brand { display: flex; align-items: center; gap: 12px; color: var(--ink); min-width: 0; } .brand-t { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .brand-t b { font-family: var(--font-display); font-size: 14px; font-weight: 600; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .brand-t i { font-style: normal; font-size: 12px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .logo-mono { width: 42px; height: 42px; border-radius: calc(var(--radius) * 0.78); flex: none; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--acc-ink, #fff); background: linear-gradient(135deg, var(--lg-accent, var(--acc)), color-mix(in srgb, var(--lg-accent, var(--acc)) 55%, #000)); box-shadow: 0 4px 14px color-mix(in srgb, var(--lg-accent, var(--acc)) 35%, transparent); } .logo-img { width: 42px; height: 42px; object-fit: contain; border-radius: calc(var(--radius) * 0.67); } .nav { display: flex; gap: 4px; margin-left: auto; overflow-x: auto; scrollbar-width: none; } .nav::-webkit-scrollbar { display: none; } .nav-a { padding: 8px 14px; border-radius: calc(var(--radius) * 55.5); color: var(--mute); font-size: 14px; font-weight: 500; white-space: nowrap; transition: all .2s var(--ease); } .nav-a:hover { color: var(--ink); background: var(--surf2); opacity: 1; } .nav-on { color: var(--acc); background: color-mix(in srgb, var(--acc) 14%, transparent); } .hdr-tools { display: flex; gap: 8px; flex: none; } .icon-btn { width: 44px; height: 44px; border-radius: calc(var(--radius) * 0.67); border: 1px solid var(--line); background: var(--surf); color: var(--ink); cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; transition: all .2s var(--ease); touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .icon-btn:hover { border-color: var(--acc); } .burger { display: none; } .mobile-nav { display: none; } .tabbar { display: none; } .mnav-tools { display: none; } @media (hover: none) { .btn:hover, .ecard:hover, .ncard:hover, .col-card:hover { transform: none; } .ecard:hover .ecard-cover img, .ncard:hover .ncard-cover img, .gal-i:hover img { transform: none; } } /* ---------- блоки: обёртки ---------- */ /* ---------- секция с колонками (контейнер) ---------- */ .row-grid { display: grid; grid-template-columns: var(--row-tpl, 1fr 1fr); gap: 24px; align-items: start; } .row-gap-none { gap: 0; } .row-gap-sm { gap: 12px; } .row-gap-md { gap: 24px; } .row-gap-lg { gap: 40px; } .row-v-top { align-items: start; } .row-v-center { align-items: center; } .row-v-bottom { align-items: end; } .row-v-stretch { align-items: stretch; } .row-col { min-width: 0; display: flex; flex-direction: column; gap: 16px; } .row-v-stretch .row-col > .blk { flex: 1 1 auto; } .row-col > .blk { animation: none; } .row-col-empty { border: 1px dashed var(--line); border-radius: calc(var(--radius) * .78); padding: 28px 12px; text-align: center; color: var(--mute); font-size: 13px; min-height: 80px; } @media (max-width: 900px) { .row-stack-tablet .row-grid, .row-grid.row-stack-tablet { grid-template-columns: 1fr; } } @media (max-width: 600px) { .row-grid.row-stack-phone { grid-template-columns: 1fr; } } .blk { position: relative; } .blk-surf { background: var(--surf); } .blk-card { background: var(--surf); border: 1px solid var(--line); box-shadow: var(--shadow); } .blk-grad { background: radial-gradient(900px 420px at 85% -10%, color-mix(in srgb, var(--acc) 26%, transparent), transparent 60%), radial-gradient(700px 380px at -10% 110%, color-mix(in srgb, var(--acc) 14%, transparent), transparent 55%), var(--surf); border: 1px solid var(--line); } .blk-pad-sm { padding: 24px 0; } .blk-pad-md { padding: 48px 0; } .blk-pad-lg { padding: 84px 0; } .blk-center { text-align: center; } .blk-center .hero-btns, .blk-center .seeall { justify-content: center; } .blk-max-narrow { max-width: 720px; margin-left: auto; margin-right: auto; } .blk-max-mid { max-width: 980px; margin-left: auto; margin-right: auto; } .blk-r-md { border-radius: calc(var(--radius) * 0.78); } .blk-r-lg { border-radius: calc(var(--radius) * 1.22); } .blk-r-xl { border-radius: calc(var(--radius) * 1.56); } .blk-heading { font-family: var(--font-display); font-weight: 600; font-size: clamp(20px, 2.6vw, 30px); line-height: 1.25; letter-spacing: -.01em; margin: 0 0 24px; } /* шапка ленты: заголовок слева, «Все … →» справа, одной строкой над плитками */ .blk-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin: 0 0 22px; } .blk-head .blk-heading { margin: 0; } .seeall { font-size: 14px; font-weight: 600; white-space: nowrap; color: var(--acc); } .seeall:hover { text-decoration: underline; text-underline-offset: 3px; } .blk-center .blk-head { justify-content: center; text-align: center; } .blk-center .blk-head .blk-heading { flex-basis: 100%; } /* свои цвета блока (задаются в конструкторе): --blk-bg / --ink / --acc на секции */ .blk-custom { background: var(--blk-bg); } .blk-custom, .blk-ink { color: var(--ink); } /* карточки внутри блока со своим цветом текста остаются на фоне темы — возвращаем им цвета темы */ .blk-ink .ecard, .blk-ink .ncard, .blk-ink .col-card, .blk-ink .stat, .blk-ink .form-card, .blk-ink .c-card, .blk-ink .acc, .blk-ink .doc-item, .blk-ink .meta-card, .blk-ink .search-hit { --ink: var(--ink-theme); --mute: var(--mute-theme); color: var(--ink); } .blk-custom.blk-pad-sm, .blk-custom.blk-pad-md, .blk-custom.blk-pad-lg { padding-left: 24px; padding-right: 24px; } .blk-custom:not([class*="blk-pad-"]) { padding: 24px; } /* ---------- расширенное оформление блока (панель «Оформление») ---------- Значения приходят CSS-переменными на
; см. wrap() в shared.js. */ .blk-pad-x { padding-top: var(--blk-pt, 0); padding-bottom: var(--blk-pb, 0); } .blk-pad-x.blk-pad-sm, .blk-pad-x.blk-pad-md, .blk-pad-x.blk-pad-lg { padding-top: var(--blk-pt, 48px); padding-bottom: var(--blk-pb, 48px); } .blk-pad-x[style*="--blk-px"] { padding-left: var(--blk-px); padding-right: var(--blk-px); } .blk-margin-x { margin-top: var(--blk-mt, 0); margin-bottom: var(--blk-mb, 0); } .blk-max-x { max-width: var(--blk-mw); margin-left: auto; margin-right: auto; } .blk[style*="--blk-mh"] { min-height: var(--blk-mh); display: flex; flex-direction: column; justify-content: center; } .blk[style*="--blk-op"] { opacity: var(--blk-op); } /* типографика — заголовки блока и «крупный» текст */ .blk-hs .blk-heading, .blk-hs .hero-title, .blk-hs .cta-t, .blk-hs .quote-t, .blk-hs .rich h2, .blk-hs .form-card h2, .blk-hs .page-title { font-size: var(--blk-hs); } .blk-hs .rich h3 { font-size: calc(var(--blk-hs) * .8); } .blk-hw .blk-heading, .blk-hw .hero-title, .blk-hw .cta-t, .blk-hw .quote-t, .blk-hw .rich h2, .blk-hw .rich h3, .blk-hw .col-t, .blk-hw .bn-t, .blk-hw .stat-v { font-weight: var(--blk-hw); } .blk-hc .blk-heading, .blk-hc .hero-title, .blk-hc .cta-t, .blk-hc .quote-t, .blk-hc .rich h2, .blk-hc .rich h3, .blk-hc .col-t, .blk-hc .bn-t { color: var(--blk-hc); } .blk-hf-body .blk-heading, .blk-hf-body .hero-title, .blk-hf-body .cta-t, .blk-hf-body .quote-t, .blk-hf-body .rich h2, .blk-hf-body .rich h3, .blk-hf-body .col-t { font-family: var(--font-body); } .blk-hf-serif .blk-heading, .blk-hf-serif .hero-title, .blk-hf-serif .cta-t, .blk-hf-serif .quote-t, .blk-hf-serif .rich h2, .blk-hf-serif .rich h3, .blk-hf-serif .col-t { font-family: Georgia, 'Times New Roman', serif; } .blk-hf-mono .blk-heading, .blk-hf-mono .hero-title, .blk-hf-mono .cta-t, .blk-hf-mono .quote-t, .blk-hf-mono .rich h2, .blk-hf-mono .rich h3, .blk-hf-mono .col-t { font-family: ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace; } .blk-ts { font-size: var(--blk-ts); } .blk-ts .rich, .blk-ts .hero-sub, .blk-ts .cta-x, .blk-ts .bn-x, .blk-ts .col-x, .blk-ts .stat-l, .blk-ts .quote-a, .blk-ts .acc summary, .blk-ts .acc-body, .blk-ts .c-v { font-size: var(--blk-ts); } .blk-lh, .blk-lh .rich, .blk-lh .hero-sub, .blk-lh .cta-x { line-height: var(--blk-lh); } .blk-tt-uppercase .blk-heading, .blk-tt-uppercase .hero-title, .blk-tt-uppercase .cta-t, .blk-tt-uppercase .col-t, .blk-tt-uppercase .bn-t { text-transform: uppercase; letter-spacing: .04em; } .blk-tt-none .blk-heading, .blk-tt-none .hero-title, .blk-tt-none .cta-t, .blk-tt-none .col-t, .blk-tt-none .bn-t { text-transform: none; letter-spacing: 0; } /* фон-картинка + затемнение */ .blk-bgimg { position: relative; background-image: var(--blk-bgimg); background-position: var(--blk-bgpos, center); background-size: cover; background-repeat: no-repeat; isolation: isolate; } .blk-bgimg-contain { background-size: contain; } .blk-bgimg-repeat { background-size: auto; background-repeat: repeat; } .blk-bgimg-fixed { background-attachment: fixed; } .blk-bgimg[style*="--blk-ov"]::before { content: ""; position: absolute; inset: 0; background: var(--blk-ovc, #000); opacity: var(--blk-ov); border-radius: inherit; z-index: -1; pointer-events: none; } .blk-bgimg:not([class*="blk-pad-"]):not(.blk-pad-x) { padding: 24px; } .blk-bgimg.blk-pad-sm, .blk-bgimg.blk-pad-md, .blk-bgimg.blk-pad-lg { padding-left: 24px; padding-right: 24px; } /* рамка, скругление, тень */ .blk-border { border: var(--blk-bw) var(--blk-bs, solid) var(--blk-bc, var(--line)); } .blk-br { border-radius: var(--blk-br) !important; } .blk-sh-none { box-shadow: none !important; } .blk-sh-sm { box-shadow: 0 2px 8px rgba(0,0,0,.08); } .blk-sh-md { box-shadow: 0 10px 30px rgba(0,0,0,.14); } .blk-sh-lg { box-shadow: 0 24px 60px rgba(0,0,0,.22); } .blk-sh-glow { box-shadow: 0 0 0 1px color-mix(in srgb, var(--acc) 40%, transparent), 0 12px 40px color-mix(in srgb, var(--acc) 30%, transparent); } /* анимация появления */ @keyframes blkFade { from { opacity: 0; } to { opacity: 1; } } @keyframes blkUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } @keyframes blkLeft { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: none; } } @keyframes blkRight { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } } @keyframes blkZoom { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } } .blk-an-none { animation: none !important; } .blk-an-fade { animation: blkFade .7s var(--ease) both; animation-delay: var(--blk-ad, 0ms) !important; } .blk-an-up { animation: blkUp .7s var(--ease) both; animation-delay: var(--blk-ad, 0ms) !important; } .blk-an-left { animation: blkLeft .7s var(--ease) both; animation-delay: var(--blk-ad, 0ms) !important; } .blk-an-right { animation: blkRight .7s var(--ease) both; animation-delay: var(--blk-ad, 0ms) !important; } .blk-an-zoom { animation: blkZoom .7s var(--ease) both; animation-delay: var(--blk-ad, 0ms) !important; } /* видимость по устройствам */ @media (min-width: 841px) { .blk-hide-desk { display: none !important; } } @media (max-width: 840px) { .blk-hide-mob { display: none !important; } } /* в конструкторе скрытые блоки показываем полупрозрачными, чтобы их можно было выбрать */ html[data-canvas] .blk-hide-desk, html[data-canvas] .blk-hide-mob { display: block !important; opacity: .45; outline: 2px dotted var(--mute); } /* на холсте конструктора вкладки не переключаются кликом (клик = выбор блока) — показываем все панели подряд с подписью */ html[data-canvas] .tab-p { display: block !important; position: relative; padding-top: 6px; } html[data-canvas] .tab-p + .tab-p { margin-top: 18px; border-top: 1px dashed var(--line2); padding-top: 18px; } html[data-canvas] .tab-p::before { content: attr(aria-labelledby); display: none; } /* ---------- hero ---------- */ .hero { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; } .hero-tall { min-height: calc(100vh - 120px); } .hero-in { max-width: 72rem; width: 100%; padding: 30px 0; position: relative; z-index: 2; } .hero-left { justify-content: flex-start; text-align: left; } .pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: calc(var(--radius) * 55.5); background: color-mix(in srgb, var(--acc) 14%, transparent); color: var(--acc); font-size: 13px; font-weight: 600; letter-spacing: .03em; border: 1px solid color-mix(in srgb, var(--acc) 30%, transparent); } .hero-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 5.4vw, 56px); line-height: 1.12; letter-spacing: -.02em; margin: 22px 0 18px; text-wrap: balance; } .hero-title em { font-style: normal; color: var(--acc); } .hero-sub { font-size: clamp(15px, 1.8vw, 19px); color: var(--mute); max-width: 640px; margin: 0 auto 28px; } .hero-left .hero-sub { margin-left: 0; } .hero-btns { display: flex; gap: 12px; flex-wrap: wrap; } .hero-left .hero-btns { justify-content: flex-start; } /* ---------- кнопки ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 24px; border-radius: calc(var(--radius) * 0.78); border: none; cursor: pointer; font-family: var(--font-body); font-size: 15px; font-weight: 600; line-height: 1.2; min-height: 44px; transition: transform .15s var(--ease), box-shadow .2s var(--ease), background .2s; text-decoration: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .btn:hover { opacity: 1; transform: translateY(-1px); } .btn-accent { background: var(--acc); color: var(--acc-ink, #fff); box-shadow: 0 6px 20px color-mix(in srgb, var(--acc) 38%, transparent); } .btn-ghost { background: var(--surf2); color: var(--ink); border: 1px solid var(--line2); } .btn-lg { padding: 16px 30px; font-size: 16px; } .btn-sm { padding: 9px 16px; font-size: 13px; border-radius: calc(var(--radius) * 0.67); } .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; } /* ---------- чипы ---------- */ .chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: calc(var(--radius) * 55.5); background: var(--surf2); border: 1px solid var(--line); color: var(--mute); font-size: 12px; font-weight: 600; white-space: nowrap; } .chip-hot { background: color-mix(in srgb, var(--acc) 16%, transparent); color: var(--acc); border-color: color-mix(in srgb, var(--acc) 35%, transparent); } .chip-now { background: color-mix(in srgb, #2aa834 16%, transparent); color: #2aa834; border-color: color-mix(in srgb, #2aa834 35%, transparent); } .chip-past { background: color-mix(in srgb, #bf0c21 12%, transparent); color: color-mix(in srgb, #ff6b7d 80%, #fff); border-color: color-mix(in srgb, #bf0c21 30%, transparent); } .chip-cat { color: var(--ink); } .chip-on { background: var(--acc); color: var(--acc-ink, #fff); border-color: var(--acc); } .cat-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 26px; } .chips-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } /* ---------- карточки мероприятий ---------- */ .ecards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; } .ecards-list { grid-template-columns: 1fr; } /* ленты «по рядам» (data-fit-rows): лишние карточки прячет /js/fit-rows.js; до его запуска не показываем больше 6, чтобы страница не «прыгала» */ .ecards > [hidden], .ncards > [hidden] { display: none !important; } [data-fit-rows]:not([data-fit-ready]) > :nth-child(n+7) { display: none; } .ecard { background: var(--surf); border: 1px solid var(--line); border-radius: calc(var(--radius) * 1.22); overflow: hidden; color: var(--ink); display: flex; flex-direction: column; transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; } .ecard:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--acc) 40%, var(--line)); opacity: 1; } .ecard-cover { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--surf3); } .ecard-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); } .ecard:hover .ecard-cover img { transform: scale(1.04); } .ecard-ph { width: 100%; height: 100%; background: linear-gradient(135deg, var(--surf3), color-mix(in srgb, var(--acc) 12%, var(--surf3))); } .ecard-chips { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; flex-wrap: wrap; } .ecard-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .ecard-when { font-size: 13px; color: var(--acc); font-weight: 600; } .ecard-title { font-family: var(--font-display); font-size: 16px; font-weight: 600; line-height: 1.35; } .ecard-place { font-size: 13.5px; color: var(--mute); } .ecard-past { opacity: .62; } .ecards-list .ecard { flex-direction: row; } .ecards-list .ecard-cover { width: 260px; aspect-ratio: auto; flex: none; min-height: 150px; } /* ---------- карточки новостей ---------- */ .ncards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; } .ncard { background: var(--surf); border: 1px solid var(--line); border-radius: calc(var(--radius) * 1.22); overflow: hidden; color: var(--ink); display: flex; flex-direction: column; transition: transform .2s var(--ease), box-shadow .2s, border-color .2s; } .ncard:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--acc) 40%, var(--line)); opacity: 1; } .ncard-cover { aspect-ratio: 16/8.5; overflow: hidden; background: var(--surf3); } .ncard-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); } .ncard:hover .ncard-cover img { transform: scale(1.04); } .ncard-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .ncard-date { font-size: 12.5px; color: var(--mute); font-weight: 600; } .ncard-title { font-family: var(--font-display); font-size: 15px; font-weight: 600; line-height: 1.4; } .ncard-ex { font-size: 13.5px; color: var(--mute); } /* ---------- текст, rich ---------- */ .rich { max-width: 780px; } .blk-center .rich { margin-left: auto; margin-right: auto; } .rich p { margin: 0 0 16px; } .rich h2, .rich h3 { font-family: var(--font-display); letter-spacing: -.01em; margin: 32px 0 14px; } .rich h2 { font-size: 24px; } .rich h3 { font-size: 19px; } .rich ul, .rich ol { padding-left: 22px; margin: 0 0 16px; } .rich li { margin-bottom: 6px; } .rich code { background: var(--surf2); border: 1px solid var(--line); border-radius: calc(var(--radius) * 0.33); padding: 2px 7px; font-size: .9em; } .rich a { text-decoration: underline; text-underline-offset: 3px; } .rich blockquote { margin: 20px 0; padding: 16px 22px; border-left: 3px solid var(--acc); background: var(--surf2); border-radius: 0 calc(var(--radius) * .78) calc(var(--radius) * .78) 0; color: var(--ink); } /* контент визуального редактора: выравнивание, картинки с обтеканием, таблицы */ .rich h4 { font-family: var(--font-display); font-size: 16.5px; margin: 24px 0 10px; } .rich .ta-center { text-align: center; } .rich .ta-right { text-align: right; } .rich .ta-left { text-align: left; } .rich .ta-justify { text-align: justify; } .rich .lead { font-size: 1.2em; line-height: 1.55; } .rich .small { font-size: .88em; color: var(--mute); } .rich mark { background: color-mix(in srgb, var(--acc) 28%, transparent); color: inherit; padding: 0 3px; border-radius: 3px; } .rich hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; } .rich pre { background: var(--surf2); border: 1px solid var(--line); border-radius: calc(var(--radius) * 0.6); padding: 14px 18px; overflow: auto; font-size: .9em; white-space: pre-wrap; } .rich pre code { background: none; border: 0; padding: 0; } .rich img { max-width: 100%; height: auto; border-radius: calc(var(--radius) * 0.78); } .rich figure { margin: 20px 0; } .rich figure img { width: 100%; display: block; } .rich figcaption { margin-top: 8px; font-size: 13.5px; color: var(--mute); text-align: center; } .rich .ri-l { float: left; margin: 6px 26px 14px 0; } .rich .ri-r { float: right; margin: 6px 0 14px 26px; } .rich .ri-c { margin-left: auto; margin-right: auto; } .rich .ri-f { width: 100%; } .rich .ri-s { width: 33%; } .rich .ri-m { width: 50%; } .rich::after { content: ''; display: table; clear: both; } .rich table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: .95em; display: block; overflow-x: auto; } .rich th, .rich td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; vertical-align: top; } .rich th { background: var(--surf2); font-weight: 600; } .rich tr:nth-child(even) td { background: color-mix(in srgb, var(--surf2) 50%, transparent); } @media (max-width: 600px) { .rich .ri-l, .rich .ri-r { float: none; margin: 16px 0; } .rich .ri-s, .rich .ri-m { width: 100%; } } /* ---------- изображение, галерея ---------- */ .img-fig { margin: 0; } .img-w-narrow { max-width: 620px; } .img-w-mid { max-width: 820px; } .img-w-wide { max-width: 100%; } .img-fig img { width: 100%; } .img-r-none { border-radius: 0; } .img-r-md { border-radius: calc(var(--radius) * 0.78); } .img-r-lg { border-radius: calc(var(--radius) * 1.22); } .img-r-xl { border-radius: calc(var(--radius) * 1.56); } .img-shadow { box-shadow: var(--shadow); } .img-fig figcaption { margin-top: 10px; font-size: 13.5px; color: var(--mute); text-align: center; } .img-empty { border: 2px dashed var(--line2); border-radius: calc(var(--radius) * 0.89); padding: 40px; text-align: center; color: var(--mute); font-size: 14px; background: var(--surf); } .gal { display: grid; } .gal-i { overflow: hidden; aspect-ratio: 1; background: var(--surf3); } .gal-i img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); } .gal-i:hover img { transform: scale(1.05); } .gal-r-none { border-radius: 0; } .gal-r-md { border-radius: calc(var(--radius) * 0.67); } .gal-r-lg { border-radius: var(--radius); } .gal-r-xl { border-radius: calc(var(--radius) * 1.33); } /* ---------- колонки ---------- */ .cols { display: grid; gap: 16px; } .cols-2 { grid-template-columns: repeat(2, 1fr); } .cols-3 { grid-template-columns: repeat(3, 1fr); } .cols-4 { grid-template-columns: repeat(4, 1fr); } .col-card { background: var(--surf); border: 1px solid var(--line); border-radius: calc(var(--radius) * 1.11); padding: 24px; display: flex; flex-direction: column; gap: 10px; transition: transform .2s var(--ease), box-shadow .2s, border-color .2s; } .col-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--acc) 35%, var(--line)); } .col-ic { font-size: 30px; line-height: 1; } .col-t { font-family: var(--font-display); font-size: 15px; font-weight: 600; } .col-x { font-size: 14px; color: var(--mute); flex: 1; } .col-a { font-size: 14px; font-weight: 600; } /* ---------- вкладки ---------- */ .tabs { } .tab-h { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; } .tab-b { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 12px 16px; font: inherit; font-weight: 600; font-size: 14.5px; color: var(--mute); cursor: pointer; transition: color .15s, border-color .15s; } .tab-b:hover { color: var(--ink); } .tab-b.on { color: var(--acc); border-bottom-color: var(--acc); } .tab-p { display: none; } .tab-p.on { display: block; } .tabs-pills .tab-h { border: 0; gap: 8px; } .tabs-pills .tab-b { border: 1px solid var(--line); border-radius: 999px; padding: 9px 18px; margin: 0; background: var(--surf); } .tabs-pills .tab-b.on { background: var(--acc); border-color: var(--acc); color: #fff; } .tabs-cards .tab-h { border: 0; gap: 8px; margin-bottom: 0; } .tabs-cards .tab-b { border: 1px solid var(--line); border-bottom: 0; border-radius: calc(var(--radius) * .7) calc(var(--radius) * .7) 0 0; padding: 12px 18px; margin: 0; background: var(--surf2); } .tabs-cards .tab-b.on { background: var(--surf); color: var(--ink); } .tabs-cards .tab-p { background: var(--surf); border: 1px solid var(--line); border-radius: 0 var(--radius) var(--radius) var(--radius); padding: 24px; } /* ---------- таймлайн ---------- */ .tl { list-style: none; margin: 0; padding: 0; position: relative; } .tl-left { padding-left: 34px; } .tl-left::before { content: ''; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: var(--line2); } .tl-i { position: relative; padding-bottom: 26px; } .tl-i:last-child { padding-bottom: 0; } .tl-dot { position: absolute; left: -34px; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--surf); border: 3px solid var(--acc); box-sizing: border-box; } .tl-when { font-size: 13px; font-weight: 600; color: var(--acc); letter-spacing: .02em; margin-bottom: 4px; } .tl-t { font-family: var(--font-display); font-weight: 600; font-size: 17px; } .tl-x { color: var(--mute); margin-top: 4px; font-size: 14.5px; } .tl-alt { padding: 0; } .tl-alt::before { content: ''; position: absolute; left: 50%; top: 6px; bottom: 6px; width: 2px; background: var(--line2); transform: translateX(-50%); } .tl-alt .tl-i { width: 50%; padding-right: 40px; padding-left: 0; text-align: right; } .tl-alt .tl-i:nth-child(even) { margin-left: 50%; padding-left: 40px; padding-right: 0; text-align: left; } .tl-alt .tl-dot { left: auto; right: -10px; } .tl-alt .tl-i:nth-child(even) .tl-dot { right: auto; left: -10px; } .tl-row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 16px; padding-top: 30px; } .tl-row::before { content: ''; position: absolute; left: 10px; right: 10px; top: 9px; height: 2px; background: var(--line2); } .tl-row .tl-i { padding: 0; } .tl-row .tl-dot { left: 0; top: -30px; } @media (max-width: 700px) { .tl-alt { padding-left: 34px; } .tl-alt::before { left: 9px; transform: none; } .tl-alt .tl-i, .tl-alt .tl-i:nth-child(even) { width: auto; margin-left: 0; padding: 0 0 26px; text-align: left; } .tl-alt .tl-dot, .tl-alt .tl-i:nth-child(even) .tl-dot { left: -34px; right: auto; } .tl-row { grid-auto-flow: row; padding-top: 0; padding-left: 34px; } .tl-row::before { left: 9px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; } .tl-row .tl-i { padding-bottom: 20px; } .tl-row .tl-dot { left: -34px; top: 4px; } } /* ---------- команда ---------- */ .team { display: grid; gap: 22px; } .team-2 { grid-template-columns: repeat(2, 1fr); } .team-3 { grid-template-columns: repeat(3, 1fr); } .team-4 { grid-template-columns: repeat(4, 1fr); } .team-5 { grid-template-columns: repeat(5, 1fr); } .tm { text-align: center; } .tm-ph { width: 120px; height: 120px; margin: 0 auto 14px; border-radius: 50%; overflow: hidden; background: color-mix(in srgb, var(--acc) 14%, var(--surf2)); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 32px; color: var(--acc); } .tm-ph img { width: 100%; height: 100%; object-fit: cover; display: block; } .team-square .tm-ph { border-radius: calc(var(--radius) * .78); width: 140px; height: 140px; } .team-tall .tm-ph { border-radius: calc(var(--radius) * .78); width: 100%; height: auto; aspect-ratio: 3 / 4; max-width: 260px; } .tm-n { font-family: var(--font-display); font-weight: 600; font-size: 16px; } .tm-r { color: var(--acc); font-size: 13.5px; margin-top: 3px; } .tm-x { color: var(--mute); font-size: 13.5px; margin-top: 8px; } .tm-c { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; font-size: 13.5px; } @media (max-width: 840px) { .team-4, .team-5 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 600px) { .team-3, .team-4, .team-5 { grid-template-columns: repeat(2, 1fr); } .tm-ph { width: 96px; height: 96px; } } /* ---------- карточки услуг ---------- */ .svcs { display: grid; gap: 18px; } .svcs-1 { grid-template-columns: 1fr; } .svcs-2 { grid-template-columns: repeat(2, 1fr); } .svcs-3 { grid-template-columns: repeat(3, 1fr); } .svcs-4 { grid-template-columns: repeat(4, 1fr); } .svc { display: flex; flex-direction: column; background: var(--surf); border: 1px solid var(--line); border-radius: calc(var(--radius) * 1.11); overflow: hidden; color: var(--ink); transition: transform .2s var(--ease), box-shadow .2s, border-color .2s; } a.svc:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--acc) 35%, var(--line)); } .svc-media { position: relative; aspect-ratio: 16 / 9; background: color-mix(in srgb, var(--acc) 10%, var(--surf2)); display: flex; align-items: center; justify-content: center; } .svc-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .svc-ic { font-size: 44px; line-height: 1; } .svc-tag { position: absolute; top: 12px; left: 12px; background: var(--acc); color: #fff; font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; } .svc-b { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .svc-t { font-family: var(--font-display); font-weight: 600; font-size: 16.5px; } .svc-x { color: var(--mute); font-size: 14px; flex: 1; } .svc-a { color: var(--acc); font-weight: 600; font-size: 14px; } .svcs-1 .svc { flex-direction: row; } .svcs-1 .svc-media { width: 32%; aspect-ratio: auto; min-height: 160px; } @media (max-width: 840px) { .svcs-3, .svcs-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .svcs-2, .svcs-3, .svcs-4 { grid-template-columns: 1fr; } .svcs-1 .svc { flex-direction: column; } .svcs-1 .svc-media { width: auto; aspect-ratio: 16 / 9; } } /* ---------- слайдер ---------- */ .slider { position: relative; border-radius: calc(var(--radius) * 1.11); overflow: hidden; background: var(--surf2); border: 1px solid var(--line); } .sl-track { position: relative; } .sl-h-sm .sl-track { aspect-ratio: 3 / 1; } .sl-h-md .sl-track { aspect-ratio: 2 / 1; } .sl-h-lg .sl-track { aspect-ratio: 16 / 9; } .sl-s { position: absolute; inset: 0; opacity: 0; transition: opacity .5s var(--ease); pointer-events: none; } .sl-s.on { opacity: 1; pointer-events: auto; } .sl-s img { width: 100%; height: 100%; object-fit: cover; display: block; } .sl-ph { width: 100%; height: 100%; background: linear-gradient(135deg, color-mix(in srgb, var(--acc) 30%, transparent), color-mix(in srgb, var(--acc) 5%, transparent)); } .sl-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 32px; background: linear-gradient(transparent, rgba(0,0,0,.65)); color: #fff; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .sl-t { font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 2.6vw, 28px); } .sl-x { font-size: 15px; opacity: .9; max-width: 640px; } .sl-cap .btn { margin-top: 8px; } .sl-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255,255,255,.85); color: #111; font-size: 26px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s; z-index: 2; } .sl-prev { left: 14px; } .sl-next { right: 14px; } .slider:hover .sl-nav, .slider:focus-within .sl-nav { opacity: 1; } .sl-dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 6px; z-index: 2; } .sl-d { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: rgba(255,255,255,.5); cursor: pointer; transition: transform .2s, background .2s; } .sl-d.on { background: #fff; transform: scale(1.3); } @media (max-width: 600px) { .sl-h-sm .sl-track, .sl-h-md .sl-track { aspect-ratio: 4 / 3; } .sl-cap { padding: 18px 16px 26px; } .sl-nav { opacity: 1; width: 34px; height: 34px; } } @media (hover: none) { .sl-nav { opacity: 1; } } /* ---------- документы (лента в конструкторе) ---------- */ .doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } .doc-grid .doc-item { display: flex; flex-direction: column; } .doc-grid .doc-x { flex: 1; } .doc-list-c .doc-item { padding: 14px 18px; } .doc-list-c .doc-t, .doc-grid .doc-t { font-size: 16px; } /* ---------- ряд кнопок ---------- */ .btnrow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .btnrow-center { justify-content: center; } .btnrow-right { justify-content: flex-end; } .btnrow-stretch .btn { flex: 1 1 160px; justify-content: center; } .btn-soft { background: color-mix(in srgb, var(--acc) 12%, transparent); color: var(--acc); border: 1px solid transparent; } .btn-soft:hover { background: color-mix(in srgb, var(--acc) 20%, transparent); } .btn-link { color: var(--acc); font-weight: 600; padding: 10px 6px; display: inline-flex; align-items: center; gap: 6px; } .btn-ic { margin-right: 6px; } /* ---------- иконка + текст ---------- */ .il { display: grid; gap: 18px 24px; } .il-1 { grid-template-columns: 1fr; } .il-2 { grid-template-columns: repeat(2, 1fr); } .il-3 { grid-template-columns: repeat(3, 1fr); } .il-4 { grid-template-columns: repeat(4, 1fr); } .il-i { display: flex; gap: 14px; align-items: flex-start; } .il-ic { flex: 0 0 46px; width: 46px; height: 46px; border-radius: calc(var(--radius) * .6); background: color-mix(in srgb, var(--acc) 12%, transparent); display: flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1; } .il-t { font-family: var(--font-display); font-weight: 600; font-size: 15.5px; margin-bottom: 4px; } .il-x { color: var(--mute); font-size: 14px; } .il-cards .il-i { background: var(--surf); border: 1px solid var(--line); border-radius: calc(var(--radius) * .89); padding: 18px; } .il-numbered .il-ic { background: var(--acc); color: #fff; border-radius: 50%; font-family: var(--font-display); font-weight: 700; font-size: 18px; } @media (max-width: 840px) { .il-3, .il-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .il-2, .il-3, .il-4 { grid-template-columns: 1fr; } .tab-b { padding: 10px 12px; font-size: 13.5px; } } /* ---------- аккордеон ---------- */ .accs { display: flex; flex-direction: column; gap: 10px; } .acc { background: var(--surf); border: 1px solid var(--line); border-radius: calc(var(--radius) * 0.89); overflow: hidden; } .acc summary { cursor: pointer; padding: 16px 20px; font-weight: 600; font-size: 15px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .acc summary::-webkit-details-marker { display: none; } .acc summary::after { content: '+'; font-size: 22px; color: var(--acc); transition: transform .2s var(--ease); line-height: 1; } .acc[open] summary::after { transform: rotate(45deg); } .acc-b { padding: 0 20px 16px; color: var(--mute); font-size: 14.5px; } /* ---------- видео ---------- */ .vid { margin: 0; } .vid-frame { aspect-ratio: 16/9; border-radius: calc(var(--radius) * 1.11); overflow: hidden; border: 1px solid var(--line); background: #000; } .vid-frame iframe { width: 100%; height: 100%; border: 0; } .vid figcaption { margin-top: 10px; font-size: 13.5px; color: var(--mute); text-align: center; } /* ---------- статистика ---------- */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; } .stat { background: var(--surf); border: 1px solid var(--line); border-radius: calc(var(--radius) * 1.11); padding: 22px 18px; text-align: center; } .stat-v { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 3vw, 32px); color: var(--acc); line-height: 1.15; } .stat-l { font-size: 13.5px; color: var(--mute); margin-top: 6px; } /* ---------- баннеры ---------- */ .banner { display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; border-radius: var(--radius); border: 1px solid transparent; } .banner-accent { background: color-mix(in srgb, var(--acc) 14%, var(--surf)); border-color: color-mix(in srgb, var(--acc) 35%, transparent); } .banner-mint { background: #0e2e14; border-color: #2aa83455; color: #c8ecca; } .banner-rose { background: #3a1014; border-color: #bf0c2155; color: #f7ccd1; } .banner-sky { background: #0e2e30; border-color: #1bb4bb55; color: #d2eff0; } .banner-plum { background: #241f3a; border-color: #9991c655; color: #e7e4f3; } .banner-amber { background: #3a3210; border-color: #fed10155; color: #fff0a8; } html[data-mode="light"] .banner-mint { background: #eaf9ec; color: #0e2e14; } html[data-mode="light"] .banner-rose { background: #fbeaec; color: #6d0a17; } html[data-mode="light"] .banner-sky { background: #e6f6f6; color: #0e2e30; } html[data-mode="light"] .banner-plum { background: #f0eefa; color: #241f3a; } html[data-mode="light"] .banner-amber { background: #fff8da; color: #3a3210; } .bn-t { font-family: var(--font-display); font-size: 15px; font-weight: 600; } .bn-x { font-size: 14px; opacity: .85; margin-top: 4px; } .bn-a { display: inline-block; margin-top: 10px; font-weight: 600; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; } .banner-mint .bn-a, .banner-mint a { color: #7bf1a8; } .banner-rose .bn-a, .banner-rose a { color: #ffa3a3; } .banner-sky .bn-a, .banner-sky a { color: #7fe3e8; } .banner-plum .bn-a, .banner-plum a { color: #c9c2e8; } .banner-amber .bn-a, .banner-amber a { color: #fed101; } /* ---------- CTA ---------- */ .cta { background: linear-gradient(135deg, var(--acc), color-mix(in srgb, var(--acc) 55%, #000)); border-radius: calc(var(--radius) * 1.33); padding: clamp(30px, 5vw, 56px); text-align: center; color: var(--acc-ink, #fff); position: relative; overflow: hidden; } .cta::before { content: ''; position: absolute; inset: 0; opacity: .18; background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 22px 22px; } .cta-t { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 3.2vw, 32px); position: relative; } .cta-x { font-size: 15.5px; opacity: .92; margin: 12px auto 22px; max-width: 560px; position: relative; } .cta .btn-accent { background: var(--acc-ink, #fff); color: var(--acc); box-shadow: none; position: relative; } html[data-mode="dark"] .cta .btn-accent { color: #161616; } /* ---------- цитата ---------- */ .quote { margin: 0; padding: 8px 0; } .quote-t { font-family: var(--font-display); font-size: clamp(17px, 2.4vw, 23px); font-weight: 500; line-height: 1.45; text-wrap: balance; } .quote-a { margin-top: 14px; color: var(--mute); font-size: 14.5px; } /* ---------- контакты ---------- */ .c-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 20px; } .c-card { background: var(--surf); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; } .c-ic { font-size: 24px; line-height: 1; margin-bottom: 10px; } .c-l { font-size: 12.5px; color: var(--mute); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; } .c-v { font-size: 15px; word-break: break-word; } .c-line { display: block; color: var(--ink); } .c-line:hover { color: var(--acc); opacity: 1; } /* ---------- формы ---------- */ .form-card { background: var(--surf); border: 1px solid var(--line); border-radius: calc(var(--radius) * 1.22); padding: clamp(22px, 3.5vw, 36px); max-width: 760px; width: 100%; } .form-card-reg { max-width: 760px; } .form-x { color: var(--mute); margin: -10px 0 20px; } .gform { display: flex; flex-direction: column; gap: 14px; } .f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .gform label { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 600; } .gform input, .gform textarea { background: var(--surf2); border: 1px solid var(--line2); border-radius: calc(var(--radius) * 0.67); color: var(--ink); padding: 12px 14px; font-family: var(--font-body); font-size: 15px; outline: none; transition: border-color .2s; } .gform input:focus, .gform textarea:focus { border-color: var(--acc); } .gform textarea { resize: vertical; } .gform .btn { align-self: flex-start; } .f-msg { padding: 12px 16px; border-radius: calc(var(--radius) * 0.67); font-size: 14px; font-weight: 600; } .f-msg.ok { background: color-mix(in srgb, #2aa834 14%, transparent); color: #2aa834; } .f-msg.err { background: color-mix(in srgb, #bf0c21 14%, transparent); color: #ff6b7d; } /* ---------- карта ---------- */ .map-card { display: flex; align-items: center; gap: 18px; padding: 22px 26px; background: var(--surf); border: 1px solid var(--line); border-radius: calc(var(--radius) * 1.11); flex-wrap: wrap; } .map-ic { width: 52px; height: 52px; border-radius: calc(var(--radius) * 0.89); display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--acc) 16%, transparent); color: var(--acc); font-size: 26px; font-weight: 700; } .map-t { font-family: var(--font-display); font-weight: 600; font-size: 15px; flex: 1; min-width: 200px; } /* ---------- разделители ---------- */ .hr { border: 0; height: 1px; background: var(--line); margin: 0; } .dots { display: flex; justify-content: center; gap: 8px; } .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--acc); opacity: .5; } /* ---------- страницы модулей ---------- */ .page-head { padding: 40px 0 26px; } .page-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 4vw, 40px); line-height: 1.2; margin: 0 0 8px; letter-spacing: -.01em; } .page-sub { color: var(--mute); margin: 0; font-size: 16px; } .meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 6px 0 30px; } .meta-card { background: var(--surf); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; } .event-cover { margin: 0 0 26px; overflow: hidden; } .event-cover img { width: 100%; max-height: 420px; object-fit: cover; } .event-desc { max-width: 820px; margin: 10px 0 30px; } .back-btn { margin-top: 30px; } .nf { text-align: center; padding: 90px 0; } .nf-code { font-family: var(--font-display); font-weight: 700; font-size: clamp(60px, 10vw, 110px); color: var(--acc); line-height: 1; opacity: .9; } .nf-t { font-family: var(--font-display); font-size: 24px; margin: 16px 0 8px; } .nf-x { color: var(--mute); margin: 0 0 24px; } .empty-note { color: var(--mute); padding: 30px; text-align: center; border: 1px dashed var(--line2); border-radius: var(--radius); } /* ---------- подвал ---------- */ .ftr { margin-top: 70px; border-top: 1px solid var(--line); background: var(--surf); width: 100%; } .ftr-in { width: 100%; max-width: none; margin: 0 auto; padding: 44px max(var(--page-pad), env(safe-area-inset-right)) 20px max(var(--page-pad), env(safe-area-inset-left)); display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; } .ftr-in-2 { grid-template-columns: 2fr 1fr; } .ftr-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .ftr-name { font-family: var(--font-display); font-weight: 600; font-size: 15px; } .ftr-x { color: var(--mute); font-size: 13.5px; max-width: 340px; } .ftr-h { font-family: var(--font-display); font-size: 13px; font-weight: 600; margin-bottom: 12px; letter-spacing: .02em; } .ftr-line { display: block; color: var(--mute); font-size: 14px; margin-bottom: 9px; } .ftr-line:hover { color: var(--ink); opacity: 1; } .ftr-bottom { width: 100%; max-width: none; margin: 0 auto; padding: 18px max(var(--page-pad), env(safe-area-inset-right)) max(26px, env(safe-area-inset-bottom)) max(var(--page-pad), env(safe-area-inset-left)); border-top: 1px solid var(--line); color: var(--mute); font-size: 13px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .ftr-gov { color: var(--mute); border-bottom: 1px dashed var(--line2); } .ftr-gov:hover { color: var(--acc); } /* ---------- cookie ---------- */ .cookie { position: fixed; left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 90; max-width: 560px; margin: 0 auto; background: var(--surf2); border: 1px solid var(--line2); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; } .cookie-t { font-family: var(--font-display); font-size: 14px; font-weight: 600; } .cookie-x { font-size: 13px; color: var(--mute); } .cookie .btn { align-self: flex-start; } /* ---------- анимации ---------- */ @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .blk { animation: fadeUp .5s var(--ease) both; } .blk:nth-child(2) { animation-delay: .05s; } .blk:nth-child(3) { animation-delay: .1s; } .blk:nth-child(4) { animation-delay: .15s; } .blk:nth-child(5) { animation-delay: .2s; } /* ---------- адаптив ---------- */ @media (max-width: 900px) { .ftr-in, .ftr-in-2 { grid-template-columns: 1fr 1fr; } .cols-3, .cols-4 { grid-template-columns: repeat(2, 1fr); } } /* ---------- поиск, документы, пагинация ---------- */ .skip-link { position: absolute; left: -999px; top: 8px; z-index: 200; background: var(--acc); color: #fff; padding: 8px 14px; border-radius: calc(var(--radius) * 0.56); } .skip-link:focus { left: 12px; } .search-form { display: flex; gap: 10px; align-items: flex-end; margin: 0 0 24px; flex-wrap: wrap; } .search-form label { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 13px; } .search-form input { background: var(--surf); border: 1px solid var(--line2); border-radius: calc(var(--radius) * 0.67); color: var(--ink); padding: 12px 14px; font: inherit; } .search-hit { display: block; background: var(--surf); border: 1px solid var(--line); border-radius: calc(var(--radius) * 0.89); padding: 16px 18px; margin-bottom: 10px; color: var(--ink); } .search-hit:hover { border-color: var(--acc); opacity: 1; } .search-hit b { display: block; font-family: var(--font-display); margin-bottom: 6px; } .search-hit span { color: var(--mute); font-size: 14px; } .doc-list { display: flex; flex-direction: column; gap: 12px; } .doc-item { background: var(--surf); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; } .doc-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .doc-t { font-family: var(--font-display); font-size: 18px; margin: 0 0 8px; } .doc-t a { color: var(--ink); } .doc-x { color: var(--mute); margin: 0 0 10px; } .pager { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 28px 0 8px; } .pager-a { display: inline-flex; min-width: 36px; height: 36px; align-items: center; justify-content: center; padding: 0 10px; border-radius: calc(var(--radius) * 0.56); border: 1px solid var(--line); background: var(--surf); color: var(--ink); font-weight: 600; font-size: 13px; } .pager-a:hover { border-color: var(--acc); opacity: 1; } .pager-on { background: var(--acc); color: #fff; border-color: var(--acc); } .pager-gap { color: var(--mute); padding: 8px 4px; } .f-consent { font-weight: 400; font-size: 13.5px; color: var(--mute); display: flex; gap: 8px; align-items: flex-start; } .f-consent input { width: auto; margin-top: 3px; } .map-ul { list-style: none; padding: 0; margin: 8px 0 0; } .map-ul li { margin: 0 0 8px; } @media (max-width: 840px) { :root { --page-pad: 16px; --tabbar-h: 56px; } .nav { display: none; } .hdr-desk { display: none !important; } .burger { display: flex; } .brand { flex: 1; } .brand-t i { display: none; } .hdr-in { gap: 10px; padding-top: 8px; padding-bottom: 8px; } .hdr-tools { gap: 6px; } .mobile-nav { position: fixed; inset: 0; z-index: 70; background: var(--bg); padding: calc(64px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom) + var(--tabbar-h)) max(16px, env(safe-area-inset-left)); overflow-y: auto; overscroll-behavior: contain; } .mobile-nav.open { display: flex; flex-direction: column; } .mnav-close { position: absolute; top: calc(10px + env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); } .mnav { display: flex; flex-direction: column; gap: 8px; flex: 1; } .mnav .nav-a { font-size: 18px; padding: 16px 18px; min-height: 52px; border-radius: calc(var(--radius) * 0.89); background: var(--surf2); color: var(--ink); } .mnav .nav-on { color: var(--acc); background: color-mix(in srgb, var(--acc) 14%, var(--surf2)); } .mnav-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); } .mnav-tool { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 72px; padding: 12px 8px; border-radius: calc(var(--radius) * 0.89); border: 1px solid var(--line); background: var(--surf); color: var(--ink); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; text-align: center; touch-action: manipulation; } .mnav-tool span { font-size: 11px; color: var(--mute); font-weight: 500; } .tabbar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 65; background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); min-height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); } .tabbar-a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: var(--tabbar-h); padding: 8px 4px 6px; color: var(--mute); font-size: 11px; font-weight: 600; line-height: 1.2; background: none; border: 0; cursor: pointer; font-family: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .tabbar-ic { font-size: 18px; line-height: 1; } .tabbar-a.tab-on, .tabbar-a:hover { color: var(--acc); opacity: 1; } body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); } .cookie { bottom: calc(12px + var(--tabbar-h) + env(safe-area-inset-bottom)); } .ecards { grid-template-columns: 1fr; gap: 12px; } .ncards { grid-template-columns: 1fr; gap: 12px; } .ecards-list .ecard { flex-direction: column; } .ecards-list .ecard-cover { width: 100%; aspect-ratio: 16/9; min-height: 0; } .ecard, .ncard { border-radius: var(--radius); } .f-row { grid-template-columns: 1fr; } .blk-pad-sm { padding: 20px 0; } .blk-pad-md { padding: 32px 0; } .blk-pad-lg { padding: 40px 0; } .ftr { margin-top: 40px; } .ftr-in { grid-template-columns: 1fr; gap: 22px; padding-top: 28px; } .hero { text-align: left; justify-content: flex-start; } .hero-in { padding: 12px 0 8px; } .hero-tall { min-height: 0; } .hero-title { font-size: clamp(26px, 8.5vw, 38px); margin: 14px 0 12px; } .hero-sub { margin: 0 0 20px; font-size: 15px; } .hero-btns { width: 100%; } .hero-btns .btn { flex: 1 1 100%; } .blk-head { margin-bottom: 14px; } .page-head { padding: 22px 0 14px; } .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } .stats { grid-template-columns: repeat(2, 1fr); gap: 10px; } .gform input, .gform textarea, .search-form input { font-size: 16px; min-height: 48px; } .gform .btn, .search-form .btn, .cta .btn { width: 100%; } .search-form { flex-direction: column; align-items: stretch; } .search-form label { min-width: 0; } .map-card { flex-direction: column; align-items: flex-start; } .banner { flex-direction: column; } .cat-chips, .chips-row { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-left: calc(-1 * var(--page-pad)); margin-right: calc(-1 * var(--page-pad)); padding: 0 var(--page-pad) 10px; gap: 8px; } .cat-chips::-webkit-scrollbar, .chips-row::-webkit-scrollbar { display: none; } .event-cover img { max-height: 220px; } .form-card { padding: 18px 16px; border-radius: calc(var(--radius) * 0.89); } .pager-a { min-width: 44px; height: 44px; } } @media (max-width: 480px) { .stats { grid-template-columns: 1fr; } .c-grid { grid-template-columns: 1fr; } .gal { grid-template-columns: 1fr !important; } .logo-mono, .logo-img { width: 36px; height: 36px; } .icon-btn { width: 42px; height: 42px; } } /* ============================================================ Скин «pixel» — оформление элементов (шаблон «Школа 21»). Второй цвет темы — --acc2 (фиолетовый), текст на акценте — --acc-ink. ============================================================ */ html[data-skin="pixel"] ::selection { background: var(--acc); color: var(--acc-ink, #000); } html[data-skin="pixel"] .hero-title, html[data-skin="pixel"] .blk-heading, html[data-skin="pixel"] .page-title, html[data-skin="pixel"] .cta-t, html[data-skin="pixel"] .brand-t b, html[data-skin="pixel"] .ftr-h { text-transform: uppercase; letter-spacing: .02em; } html[data-skin="pixel"] .hero-title { font-weight: 700; line-height: 1.08; } html[data-skin="pixel"] .hero-title em { color: var(--acc); text-shadow: 4px 4px 0 color-mix(in srgb, var(--acc2, var(--acc)) 70%, transparent); } /* светлый: акцентное слово — «маркером» (зелёная плашка, чёрный текст, фиолетовая тень) */ html[data-skin="pixel"][data-mode="light"] .hero-title em { color: #000; text-shadow: none; background: var(--acc); padding: 0 .14em; box-decoration-break: clone; -webkit-box-decoration-break: clone; box-shadow: 5px 5px 0 var(--acc2, #8b5cf6); } /* пиксельная «сетка» в правом верхнем углу обложки */ html[data-skin="pixel"] .hero::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: min(46vw, 520px); z-index: 1; pointer-events: none; background: repeating-conic-gradient(color-mix(in srgb, var(--acc) 26%, transparent) 0 25%, transparent 0 50%) 0 0 / 28px 28px; -webkit-mask-image: radial-gradient(closest-side at 78% 32%, #000 20%, transparent 100%); mask-image: radial-gradient(closest-side at 78% 32%, #000 20%, transparent 100%); } html[data-skin="pixel"] .blk-grad { background: radial-gradient(760px 420px at 100% 0%, color-mix(in srgb, var(--acc2, var(--acc)) 42%, transparent), transparent 62%), radial-gradient(600px 360px at 0% 100%, color-mix(in srgb, var(--acc) 12%, transparent), transparent 58%), var(--surf); border-color: var(--line2); } html[data-skin="pixel"][data-mode="light"] .blk-grad { background: radial-gradient(700px 400px at 100% 0%, color-mix(in srgb, var(--acc2, #8b5cf6) 22%, transparent), transparent 62%), radial-gradient(520px 320px at 0% 100%, color-mix(in srgb, var(--acc) 18%, transparent), transparent 58%), rgba(255, 255, 255, .5); border: 1px solid rgba(255, 255, 255, .7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* «стекло»: карточки и поверхности пропускают фон-переливы */ html[data-skin="pixel"][data-mode="light"] .ecard, html[data-skin="pixel"][data-mode="light"] .ncard, html[data-skin="pixel"][data-mode="light"] .col-card, html[data-skin="pixel"][data-mode="light"] .stat, html[data-skin="pixel"][data-mode="light"] .acc, html[data-skin="pixel"][data-mode="light"] .c-card, html[data-skin="pixel"][data-mode="light"] .form-card, html[data-skin="pixel"][data-mode="light"] .doc-item, html[data-skin="pixel"][data-mode="light"] .meta-card, html[data-skin="pixel"][data-mode="light"] .search-hit, html[data-skin="pixel"][data-mode="light"] .banner, html[data-skin="pixel"][data-mode="light"] .blk-surf, html[data-skin="pixel"][data-mode="light"] .blk-card, html[data-skin="pixel"][data-mode="light"] .ftr, html[data-skin="pixel"][data-mode="light"] .cookie { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } html[data-skin="pixel"][data-mode="light"] .hdr { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom-color: rgba(10, 10, 15, .1); } /* текстовые употребления акцента → --acc-text (в тёмном = зелёный, в светлом = тёмно-фиолетовый) */ html[data-skin="pixel"] .rich a, html[data-skin="pixel"] .seeall, html[data-skin="pixel"] .col-a, html[data-skin="pixel"] .bn-a, html[data-skin="pixel"] .ecard-when, html[data-skin="pixel"] .stat-v, html[data-skin="pixel"] .acc summary::after, html[data-skin="pixel"] .ftr-gov:hover, html[data-skin="pixel"] .chip-hot, html[data-skin="pixel"] .tabbar-a.tab-on { color: var(--acc-text); } html[data-skin="pixel"] .btn-accent, html[data-skin="pixel"] .nav-on, html[data-skin="pixel"] .chip-on { color: var(--acc-ink, #000); } html[data-skin="pixel"] .chip-hot { background: color-mix(in srgb, var(--acc-text) 12%, transparent); border-color: color-mix(in srgb, var(--acc-text) 35%, transparent); } html[data-skin="pixel"] .pill { border-radius: 0; text-transform: uppercase; letter-spacing: .08em; font-size: 11.5px; font-family: var(--font-display); background: transparent; border: 1px solid var(--acc); color: var(--acc); padding: 6px 12px; } /* светлый: бейдж как «тег кода» — чёрная плашка, зелёный текст */ html[data-skin="pixel"][data-mode="light"] .pill { background: #000; border-color: #000; color: var(--acc); } html[data-skin="pixel"][data-mode="light"] .pill::before { content: '> '; opacity: .7; } html[data-skin="pixel"] .btn { border-radius: 0; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em; font-size: 13.5px; font-weight: 600; } html[data-skin="pixel"] .btn-accent { box-shadow: 4px 4px 0 var(--acc2, #000); } html[data-skin="pixel"] .btn-accent:hover { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--acc2, #000); } html[data-skin="pixel"] .btn-ghost { background: transparent; border: 1px solid var(--ink); color: var(--ink); } html[data-skin="pixel"] .btn-ghost:hover { background: var(--ink); color: var(--bg); } html[data-skin="pixel"][data-mode="light"] .btn-ghost { background: rgba(255, 255, 255, .5); } html[data-skin="pixel"][data-mode="light"] .btn-ghost:hover { background: #000; color: #fff; } html[data-skin="pixel"] .logo-mono { border-radius: 0; background: var(--acc); color: var(--acc-ink, #000); box-shadow: 3px 3px 0 var(--acc2, transparent); font-size: 17px; } html[data-skin="pixel"] .nav-a { font-family: var(--font-display); font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; } html[data-skin="pixel"] .nav-on { background: var(--acc); color: var(--acc-ink, #000); } html[data-skin="pixel"] .icon-btn { border-radius: 0; } html[data-skin="pixel"] .hdr { border-bottom-color: var(--line2); } html[data-skin="pixel"] .seeall, html[data-skin="pixel"] .col-a, html[data-skin="pixel"] .bn-a { font-family: var(--font-display); text-transform: uppercase; font-size: 12px; letter-spacing: .06em; } html[data-skin="pixel"] .ecard, html[data-skin="pixel"] .ncard, html[data-skin="pixel"] .col-card, html[data-skin="pixel"] .stat, html[data-skin="pixel"] .acc, html[data-skin="pixel"] .c-card, html[data-skin="pixel"] .form-card, html[data-skin="pixel"] .doc-item, html[data-skin="pixel"] .meta-card, html[data-skin="pixel"] .search-hit, html[data-skin="pixel"] .banner { border-color: var(--line2); } html[data-skin="pixel"] .ecard:hover, html[data-skin="pixel"] .ncard:hover, html[data-skin="pixel"] .col-card:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--acc); border-color: var(--acc); } html[data-skin="pixel"] .col-card { position: relative; padding-top: 28px; } html[data-skin="pixel"] .col-card::before { content: ''; position: absolute; top: 0; left: 0; width: 28px; height: 4px; background: var(--acc); } html[data-skin="pixel"] .col-ic { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--acc); } html[data-skin="pixel"] .col-t { text-transform: uppercase; letter-spacing: .03em; font-size: 14px; } html[data-skin="pixel"] .stat { text-align: left; border-left: 4px solid var(--acc); } html[data-skin="pixel"] .stat-v { font-size: clamp(30px, 4.2vw, 52px); font-weight: 700; letter-spacing: -.02em; } html[data-skin="pixel"] .stat-l { text-transform: uppercase; letter-spacing: .06em; font-size: 12px; } html[data-skin="pixel"] .banner-accent { background: var(--surf); border-left: 4px solid var(--acc); } html[data-skin="pixel"] .bn-t { text-transform: uppercase; letter-spacing: .03em; } html[data-skin="pixel"] .acc summary { font-family: var(--font-display); font-size: 14px; } html[data-skin="pixel"] .acc summary::after { font-family: var(--font-display); } html[data-skin="pixel"] .cta { background: var(--acc); color: var(--acc-ink, #000); border-radius: 0; box-shadow: 8px 8px 0 var(--acc2, #000); } html[data-skin="pixel"] .cta .cta-x { opacity: .8; } html[data-skin="pixel"] .cta::before { opacity: .1; background-image: repeating-conic-gradient(#000 0 25%, transparent 0 50%); background-size: 20px 20px; } html[data-skin="pixel"] .cta .btn-accent { background: #000; color: var(--acc); box-shadow: 4px 4px 0 var(--acc2, #000); } html[data-skin="pixel"] .chip { border-radius: 0; text-transform: uppercase; letter-spacing: .05em; font-size: 11px; } html[data-skin="pixel"] .rich h2, html[data-skin="pixel"] .rich h3 { text-transform: uppercase; letter-spacing: .02em; } html[data-skin="pixel"] .svc, html[data-skin="pixel"] .il-cards .il-i, html[data-skin="pixel"] .slider, html[data-skin="pixel"] .tabs-cards .tab-p, html[data-skin="pixel"] .tabs-cards .tab-b, html[data-skin="pixel"] .il-ic, html[data-skin="pixel"] .tm-ph, html[data-skin="pixel"] .svc-tag { border-radius: 0; } html[data-skin="pixel"] .team-round .tm-ph { border-radius: 0; } html[data-skin="pixel"] a.svc:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--acc); border-color: var(--acc); } html[data-skin="pixel"] .tl-dot { border-radius: 0; } html[data-skin="pixel"] .tabs-pills .tab-b { border-radius: 0; } html[data-skin="pixel"] .tab-b, html[data-skin="pixel"] .svc-t, html[data-skin="pixel"] .tl-t, html[data-skin="pixel"] .il-t, html[data-skin="pixel"] .tm-n { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .03em; font-size: 13.5px; } html[data-skin="pixel"] .ftr { border-top: 2px solid var(--acc); margin-top: 90px; } html[data-skin="pixel"][data-mode="light"] .ftr { background: rgba(255, 255, 255, .55); border-top-color: #000; } html[data-skin="pixel"][data-mode="light"] .ftr::before { content: ''; display: block; height: 4px; background: linear-gradient(90deg, var(--acc) 0 33%, var(--acc2, #8b5cf6) 0 66%, #000 0); } html[data-skin="pixel"][data-mode="light"] .logo-mono { box-shadow: 3px 3px 0 #000; } html[data-skin="pixel"][data-mode="light"] .stat { border-left-color: var(--acc2, #8b5cf6); } html[data-skin="pixel"][data-mode="light"] .stat-v { color: #000; } html[data-skin="pixel"][data-mode="light"] .col-ic { color: var(--acc-text); } html[data-skin="pixel"][data-mode="light"] .banner-accent { border-left-color: var(--acc2, #8b5cf6); } html[data-skin="pixel"][data-mode="light"] .ecard:hover, html[data-skin="pixel"][data-mode="light"] .ncard:hover, html[data-skin="pixel"][data-mode="light"] .col-card:hover { box-shadow: 6px 6px 0 var(--acc2, #8b5cf6); border-color: var(--acc2, #8b5cf6); } html[data-skin="pixel"][data-mode="light"] .hero::after { background-image: repeating-conic-gradient(color-mix(in srgb, var(--acc2, #8b5cf6) 22%, transparent) 0 25%, transparent 0 50%); } html[data-skin="pixel"] .cookie { border-radius: 0; border-color: var(--acc); } @media (max-width: 840px) { html[data-skin="pixel"] .hero::after { width: 100%; opacity: .45; } } /* ============================================================ Версия для слабовидящих (кнопка «Аа» включается в теме: a11yToggle). В конце файла и с [data-mode] в селекторе — сильнее палитр режима и скина. ============================================================ */ .a11y-toggle[aria-pressed="true"] { border-color: var(--acc); color: var(--acc); } html[data-a11y="1"], html[data-a11y="1"][data-mode], html[data-a11y="1"][data-skin][data-mode] { --bg: #fff; --surf: #fff; --surf2: #f4f4f4; --surf3: #ececec; --ink: #000; --mute: #222; --line: #000; --line2: #333; --acc: #000; --acc-text: #000; --glass: #fff; --shadow: none; font-size: 20px; } html[data-a11y="1"] body { letter-spacing: .02em; line-height: 1.7; background: var(--bg); } html[data-a11y="1"] body::before { display: none; } html[data-a11y="1"] * { animation: none !important; transition: none !important; box-shadow: none !important; text-shadow: none !important; backdrop-filter: none !important; } html[data-a11y="1"] a { text-decoration: underline; text-underline-offset: 3px; } html[data-a11y="1"] .hdr { position: static; } html[data-a11y="1"] .hero-title, html[data-a11y="1"] .blk-heading, html[data-a11y="1"] .page-title, html[data-a11y="1"] .cta-t, html[data-a11y="1"] .col-t, html[data-a11y="1"] .stat-l, html[data-a11y="1"] .btn, html[data-a11y="1"] .nav-a { text-transform: none; letter-spacing: 0; } html[data-a11y="1"] .hero::after { display: none; } html[data-a11y="1"] .hero-title em { background: none; color: #000; } @media (prefers-reduced-motion: reduce) { .blk, .blk-an-fade, .blk-an-up, .blk-an-left, .blk-an-right, .blk-an-zoom { animation: none !important; } }