/* ============================================================ «Сотри Границы» — общая дизайн-система (erase.school) Подключать на каждой странице: Разметку шапки и подвала генерирует internal/build-erase-layout.py. Требует шрифты Google Fonts: Manrope (400..800) и Unbounded (600..800) — линки на шрифты подключаются в страницы. ============================================================ */ :root{ /* Тёмные поверхности */ --c-ink:#0F1A24; /* основной тёмный фон (hero, тёмные секции) */ --c-ink-2:#0B141C; /* ещё темнее (футер, полоса сфер) */ --c-panel:#13202E; /* панель выпадающего меню */ --c-card-dark:#1C2B3D; /* градиентные тёмные карточки */ /* Светлые поверхности */ --c-bg:#F4F7FA; /* светлый фон секций */ --c-line:#E2E9F0; /* границы светлых карточек */ /* Акценты */ --c-primary:#5B63E6; --c-primary-h:#4951d6; --c-indigo:#818cf8; --c-violet:#8B5CF6; --c-pink:#EC4899; --c-blue:#3B82F6; --c-green:#10B981; --c-amber:#F59E0B; --c-red:#EF4444; /* Текст */ --c-text:#46586B; /* основной текст на светлом */ --c-text-hd:#f0f6fc; /* заголовки на тёмном */ --c-text-lt:#a8c8e0; /* текст на тёмном */ --c-text-mut:#6e90a8; /* приглушённый на тёмном */ --c-text-mut2:#8aa9c0; /* описания в меню */ --c-text-grey:#8499AB; /* мета-строки на светлом */ /* Шрифты */ --font-main:'Manrope',sans-serif; --font-head:'Unbounded',sans-serif; } /* ---------- База ---------- */ *{ margin:0; padding:0; box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ font-family:var(--font-main); background:var(--c-ink); -webkit-font-smoothing:antialiased; } a{ color:var(--c-primary); } a:hover{ color:var(--c-primary-h); } img{ max-width:100%; } /* ---------- Доступность ---------- */ /* Skip-link: невидим, пока не получит фокус с клавиатуры; по Tab всплывает поверх шапки и ведёт к якорю id="main" (его гарантирует internal/build-erase-layout.py на каждой странице). */ .skip-link{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--c-primary); color:#fff; font-size:14px; font-weight:700; padding:12px 20px; border-radius:0 0 12px 0; text-decoration:none; } .skip-link:focus{ left:0; } /* ---------- Контейнер ---------- */ .container{ width:100%; max-width:1180px; margin:0 auto; padding:0 28px; } /* ---------- Кнопки ---------- */ .btn{ display:inline-flex; align-items:center; gap:9px; font-size:15px; font-weight:700; padding:14px 26px; border-radius:9999px; border:none; cursor:pointer; font-family:inherit; text-decoration:none; transition:background .2s, transform .25s cubic-bezier(.22,1.5,.36,1); } .btn svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .btn-primary{ background:var(--c-primary); color:#fff; box-shadow:0 14px 34px -10px rgba(129,140,248,.6); } .btn-primary:hover{ background:var(--c-primary-h); color:#fff; transform:translateY(-2px); } .btn-ghost{ background:rgba(255,255,255,.06); color:#fff; border:1px solid rgba(255,255,255,.16); } .btn-ghost:hover{ background:rgba(255,255,255,.12); color:#fff; transform:translateY(-2px); } /* ============================================================ Навигация (разметка — internal/build-erase-layout.py) ============================================================ */ .site-nav{ position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(15,26,36,.85); backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%); border-bottom:1px solid rgba(255,255,255,.08); } /* position:relative — чтобы .nav-more крепился к контейнеру, а не к .site-nav во всю ширину окна */ .nav-inner{ position:relative; width:100%; max-width:1180px; margin:0 auto; padding:0 28px; height:72px; display:flex; align-items:center; justify-content:space-between; } .nav-logo{ display:flex; align-items:center; gap:11px; text-decoration:none; } .nav-logo img{ height:42px; width:auto; display:block; } .nav-logo span{ color:#fff; font-weight:800; font-size:16px; font-family:var(--font-head); } /* display/flex-wrap/min-width строке меню задаёт общая механика сворачивания (internal/build-nav-mech.py) — здесь только внешний вид. */ .nav-desktop{ align-items:center; justify-content:flex-end; gap:2px; } .nav-item{ position:relative; } .nav-item > a{ display:inline-flex; align-items:center; gap:5px; color:var(--c-text-lt); font-size:14px; font-weight:600; text-decoration:none; padding:10px 11px; border-radius:10px; transition:color .2s; } .nav-item > a:hover{ color:#fff; } .nav-item > a svg{ width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; } .nav-drop{ display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%); padding-top:6px; z-index:120; } .nav-item:hover .nav-drop, .nav-item.open .nav-drop{ display:block; } .nav-drop-panel{ min-width:284px; background:var(--c-panel); border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:8px; box-shadow:0 24px 60px -12px rgba(0,0,0,.55); display:flex; flex-direction:column; gap:2px; } .nav-drop-panel a{ display:block; padding:10px 12px; border-radius:11px; text-decoration:none; transition:background .15s; } .nav-drop-panel a:hover{ background:rgba(255,255,255,.07); } .nav-drop-panel a .t{ display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:700; color:var(--c-text-hd); } .nav-drop-panel a .t svg{ width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .nav-drop-panel a .d{ display:block; font-size:12.5px; line-height:1.45; color:var(--c-text-mut2); margin-top:2px; } .nav-plat{ display:inline-flex; align-items:center; gap:8px; background:var(--c-primary); color:#fff; font-size:14px; font-weight:700; padding:9px 20px; border-radius:9999px; border:none; cursor:pointer; box-shadow:0 10px 24px -8px rgba(129,140,248,.5); font-family:inherit; margin-left:14px; text-decoration:none; transition:background .2s, transform .25s cubic-bezier(.22,1.5,.36,1); } .nav-plat:hover{ background:var(--c-primary-h); color:#fff; transform:translateY(-2px); } .nav-plat svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } /* Показывает кнопку общая механика — здесь только вид */ .nav-burger{ place-items:center; width:44px; height:44px; border-radius:12px; border:1px solid rgba(255,255,255,.16); background:transparent; color:#fff; cursor:pointer; } .nav-burger svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; } .site-nav .ic-close{ display:none; } .site-nav.is-open .ic-close{ display:block; } .site-nav.is-open .ic-burger{ display:none; } /* Меню, куда уезжают не влезшие пункты. Те же .nav-item, что и в строке, поэтому выпадающую панель разворачиваем на месте, а не по наведению. */ .nav-more{ position:absolute; top:calc(100% + 8px); right:28px; left:auto; width:max-content; max-width:calc(100vw - 56px); max-height:calc(100vh - 96px); overflow:auto; background:var(--c-panel); border:1px solid rgba(255,255,255,.1); border-radius:16px; box-shadow:0 24px 60px -12px rgba(0,0,0,.55); padding:8px; gap:2px; } .nav-more .nav-item{ padding:6px 0 2px; } .nav-more .nav-item > a{ display:flex; justify-content:space-between; padding:12px 8px; font-size:15px; font-weight:700; color:var(--c-text-hd); } .nav-more .nav-drop{ display:block; position:static; transform:none; padding-top:0; } .nav-more .nav-drop-panel{ min-width:0; background:transparent; border:none; box-shadow:none; padding:0 0 0 10px; } .nav-more .nav-plat{ margin:12px 8px 0; justify-content:center; } /* Прогресс-бар прокрутки под шапкой */ .nav-progress{ height:3px; background:transparent; overflow:hidden; } .nav-progress-bar{ height:3px; width:100%; background:linear-gradient(90deg,#5B63E6,#818cf8); transform:scaleX(0); transform-origin:left; } /* Текущий раздел: класс active расставляет internal/build-layout-erase.py */ .nav-item > a.active{ color:#fff; } .nav-drop-panel a.active{ background:rgba(255,255,255,.07); } /* Порогов ширины у навигации нет: что не влезло в строку, уезжает в бургер — internal/build-nav-mech.py. Логотип при этом не сжимаем. */ .nav-logo{ flex:0 0 auto; } /* Футер общий для девяти площадок: разметка и стили в internal/build-footer.py, файл sgft.css кладёт туда же генератор. */ /* Двухколоночная читалка (оглавление + текст). У элементов grid по умолчанию min-width:auto, поэтому колонка не сжимается ниже ширины своего содержимого — на промежуточных ширинах экрана сетка выходила за вьюпорт и вся страница ехала вбок. */ .rgrid > *{ min-width:0; } /* Широкое содержимое (схемы, таблицы) прокручивается внутри своего блока, а не растягивает страницу. */ .twrap{ overflow-x:auto; }