/* =========================================================== Умнатика — SHELL (только шапка + подвал + мобильное меню) Назначение: переиспользуемый «каркас» бренда для страниц, у которых есть СВОЙ инлайновый :root (движки stolbik/tablitsa). КЛЮЧЕВОЕ РЕШЕНИЕ ПРОТИВ КОНФЛИКТА ПЕРЕМЕННЫХ: конфликтные имена (--ink/--muted/--line у движка иные) объявлены НЕ в глобальном :root, а ЛОКАЛЬНО внутри .site-header / .footer / .mobile-menu — поэтому внутри каркаса они берут бренд-значения, а :root движка снаружи остаётся нетронутым. Глобальный body/* ресет сюда НЕ входит — движок отвечает за свой. =========================================================== */ /* ── Бренд-токены, НЕ конфликтующие с :root движка ── (имён --brand-*, --hero-*, --ink-2, --faint, --r*, --accent-*, --shadow-lift, --maxw, --header-h в :root движка нет) */ :root { --brand-700: #4F32C9; --brand-600: #6A4BE4; --brand-50: #F5F2FF; --gold: #FFB42A; /* для бейджа .nav-badge «СКОРО» */ --hero-from: #6B4DE6; --hero-to: #8B5CF2; --ink-2: #3A3460; --faint: #9C99AE; --r: 18px; --r-xl: 34px; --r-pill: 999px; --header-h: 76px; --shadow-lift: 0 24px 60px -20px rgba(70,45,150,.34); --maxw: 1200px; /* Акцент по умолчанию = бренд (фиолетовый). --accent-soft НАМЕРЕННО опущен, чтобы не перекрыть одноимённую переменную движка. */ --accent-from: var(--hero-from); --accent-to: var(--hero-to); --accent-solid: var(--brand-600); --accent-ink: var(--brand-700); } /* ── Акцент-варианты страницы (ставится data-accent на ) ── Только 4 переменные, которые реально использует шапка. */ :root[data-accent="amber"] { --accent-from:#FF9D4D; --accent-to:#F77E36; --accent-solid:#EE8417; --accent-ink:#A85B08; } :root[data-accent="green"] { --accent-from:#33C09A; --accent-to:#1C9E76; --accent-solid:#1FA079; --accent-ink:#0C6B4F; } :root[data-accent="blue"] { --accent-from:#4D8AFB; --accent-to:#3568DC; --accent-solid:#2F73C9; --accent-ink:#214F8C; } /* Контейнер ширины (общий для шапки и подвала) */ .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } /* ===================================================================== ШАПКА ===================================================================== */ /* Скоупный сброс подчёркивания — ТОЛЬКО ссылки каркаса (без глобального a{}) */ .site-header a, .footer a, .mobile-menu a { text-decoration: none; } .site-header { /* локально перебиваем :root движка ТОЛЬКО внутри шапки */ --ink: #211B45; --muted: #6E6A85; --line: #ECEAF4; position: sticky; top: 0; z-index: 60; transition: box-shadow .25s ease, background .25s ease; } .site-header[data-static="true"] { position: relative; } .hdr-inner { height: var(--header-h); display: flex; align-items: center; gap: 22px; } /* Лого прижат влево (не растёт), меню занимает всё оставшееся место справа и распределяет пункты равными промежутками (space-between) до правого края .wrap — вровень с крайней колонкой подвала. Правый кластер (бургер) на десктопе скрыт (display:none), чтобы пустая зона не съедала ширину; он возвращается на ≤920px. */ .hdr-inner .logo { flex: 0 0 auto; } .hdr-inner .nav { flex: 1 1 auto; min-width: 0; justify-content: space-between; } .hdr-inner .hdr-right { display: none; } /* Логотип */ .logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .logo-mark { width: 46px; height: 46px; border-radius: 13px; background: transparent; display: grid; place-items: center; flex-shrink: 0; } .logo-word { font-family: "Baloo 2", "Nunito", system-ui, sans-serif; font-size: 25px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); } /* Навигация */ .nav { display: flex; align-items: center; gap: 4px; } .nav-link { display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; border-radius: var(--r-pill); font-family: "Nunito", system-ui, -apple-system, sans-serif; font-size: 16px; font-weight: 700; color: var(--ink-2); transition: background .18s ease, color .18s ease, transform .12s ease; white-space: nowrap; } .nav-link:hover { background: var(--brand-50); color: var(--brand-700); transform: translateY(-1px); } .nav-link.is-active { background: var(--accent-solid); color: #fff; box-shadow: 0 8px 18px -10px var(--accent-solid); } /* Бейдж «СКОРО» у пункта меню (перенесено из инлайна index.html; работает и в .nav, и в .mm-links) */ .nav-badge { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: var(--gold); color: #5A3A00; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1.4; vertical-align: middle; } .mm-links .nav-badge { margin-left: 8px; } /* Правый кластер + бургер */ .hdr-right { display: flex; align-items: center; gap: 12px; margin-left: auto; } .burger { display: none; width: 46px; height: 46px; border-radius: 13px; background: var(--brand-50); color: var(--brand-700); place-items: center; } /* ── Вариант шапки: BRAND (залитый фиолетовым) — основной для всех страниц ── */ [data-header="brand"] .site-header { background: linear-gradient(120deg, var(--accent-from), var(--accent-to)); } [data-header="brand"] .site-header.is-stuck { box-shadow: 0 10px 30px -14px rgba(60,30,140,.6); } [data-header="brand"] .logo-mark { background: #fff; box-shadow: 0 6px 14px -8px rgba(0,0,0,.3); } [data-header="brand"] .logo-word { color: #fff; } [data-header="brand"] .nav { margin: 0; } /* центрирование снято: меню растянуто вправо через .hdr-inner .nav */ [data-header="brand"] .nav-link { color: rgba(255,255,255,.86); } [data-header="brand"] .nav-link:hover { background: rgba(255,255,255,.16); color: #fff; } [data-header="brand"] .nav-link.is-active { background: #fff; color: var(--accent-ink); box-shadow: 0 8px 18px -10px rgba(0,0,0,.3); } [data-header="brand"] .burger { background: rgba(255,255,255,.18); color: #fff; } /* ===================================================================== ПОДВАЛ ===================================================================== */ .footer { /* локально перебиваем :root движка ТОЛЬКО внутри подвала */ --ink: #211B45; --muted: #6E6A85; --line: #ECEAF4; margin-top: 56px; padding: 40px 0 44px; border-top: 1px solid var(--line); position: relative; z-index: 1; color: var(--ink); /* добавлено: подвал не наследует body движка */ } /* ── Верхний ряд: 5 колонок (бренд и правый блок шире) ── */ .footer-top { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr 1.85fr; gap: 30px 28px; } .footer-col { min-width: 0; } .footer-col h4 { font-family: "Baloo 2","Nunito",system-ui,sans-serif; font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 14px; } /* Колонка бренда */ .footer-brand-link { display: inline-flex; text-decoration: none; color: inherit; } .footer-brand-link:hover .footer-brand-name { text-decoration: underline; } .footer-brand-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .footer-brand-name { font-family: "Baloo 2","Nunito",system-ui,sans-serif; font-size: 22px; font-weight: 800; color: var(--ink); line-height: 1.05; } .footer-brand-tag { font-size: 13px; font-weight: 700; color: var(--accent-solid); margin-top: 3px; } .footer-desc { font-size: 14px; line-height: 1.55; color: var(--muted); max-width: 30ch; margin: 0 0 16px; } .footer-copy { font-size: 13px; font-weight: 600; color: var(--faint); } /* Списки ссылок (буллеты) */ .footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; } .footer-links a { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--ink-2); transition: color .15s ease; } .footer-links a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-solid); opacity: .5; flex-shrink: 0; transition: opacity .15s ease; } .footer-links a:hover { color: var(--accent-solid); } .footer-links a:hover::before { opacity: 1; } /* Правый блок: студия + карточка идей */ .footer-promo { display: flex; flex-direction: column; gap: 18px; } .studio-credit { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 8px; opacity: .9; transition: opacity .18s ease; } .studio-credit:hover { opacity: 1; } .studio-label { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); } .studio-logo { display: block; height: 56px; width: auto; } .idea-card { display: flex; align-items: center; gap: 13px; padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; transition: border-color .18s ease, box-shadow .18s ease; } .idea-card:hover { border-color: var(--accent-solid); box-shadow: 0 8px 22px -14px var(--accent-solid); } .idea-ic { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; background: var(--brand-50); color: var(--accent-solid); } .idea-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .idea-text b { font-size: 13.5px; font-weight: 800; color: var(--ink); } .idea-text span { font-size: 12px; color: var(--muted); } .idea-go { margin-left: auto; flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-solid); color: #fff; transition: transform .14s ease; } .idea-card:hover .idea-go { transform: translateX(2px); } /* Нижняя полоса: слоган по центру + декор справа */ .footer-bottom { position: relative; margin-top: 38px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: center; min-height: 44px; } .footer-slogan { font-family: "Baloo 2","Nunito",system-ui,sans-serif; font-weight: 700; font-size: 16px; color: var(--ink-2); text-align: center; } .footer-slogan .accent { color: var(--accent-solid); } .footer-decor { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); pointer-events: none; line-height: 0; } /* Адаптив футера: 5 → 2 → 1; декор скрыт на мобиле */ @media (max-width: 920px) { .footer-top { grid-template-columns: 1fr 1fr; } .footer-brand, .footer-promo { grid-column: 1 / -1; } } @media (max-width: 600px) { .footer-top { grid-template-columns: 1fr; gap: 26px; } .footer-decor { display: none; } } /* ===================================================================== МОБИЛЬНОЕ МЕНЮ (отдельное поддерево — сиблинг шапки на уровне body) ===================================================================== */ .mobile-menu { /* локально перебиваем :root движка ТОЛЬКО внутри меню (#mobileMenu не вложен в .site-header, поэтому нужен свой блок) */ --ink: #211B45; --muted: #6E6A85; --line: #ECEAF4; display: none; } .mobile-menu.open { display: block; } .mm-backdrop { position: fixed; inset: 0; background: rgba(33,27,69,.32); z-index: 70; backdrop-filter: blur(2px); animation: fade .2s ease; } .mm-sheet { position: fixed; top: 0; left: 0; right: 0; z-index: 80; background: #fff; border-radius: 0 0 var(--r-xl) var(--r-xl); padding: 18px 20px 26px; box-shadow: var(--shadow-lift); animation: drop .26s cubic-bezier(.2,.9,.3,1.1); } .mm-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .mm-links { display: flex; flex-direction: column; gap: 6px; } .mm-links a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r); font-weight: 800; font-size: 18px; color: var(--ink-2); background: var(--brand-50); } .mm-links a.is-active { background: var(--accent-solid); color: #fff; } .mm-links a .mm-ic { width: 30px; height: 30px; display: grid; place-items: center; } .mm-foot { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); } .close-btn { width: 44px; height: 44px; border-radius: 12px; background: var(--brand-50); color: var(--brand-700); display: grid; place-items: center; } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } @keyframes drop { from { transform: translateY(-16px); opacity: .4; } to { transform: translateY(0); opacity: 1; } } /* Фон страницы для движков — перенос из эталона new_style (палитра grape). Литералы, не var(--bg): кремовый --bg движка остаётся для кнопок/полей/справки. Селектор html body — чтобы перебить инлайновое body{background:var(--bg)} движка. */ html body { background: radial-gradient(1100px 520px at 88% -8%, #F5F2FF, transparent 60%), radial-gradient(900px 460px at -6% 4%, #FFF7EE, transparent 55%), #F6F5FB; } /* Декоративный фон-слой (.bg-decor) — перенос из эталона new_style. Базовые правила; цвета/позиции конкретных пятен заданы инлайн в разметке движка. */ .bg-decor { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .blob { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .5; } .shape { position: absolute; font-weight: 800; opacity: .14; } /* Мобила: приглушаем крупные шары (.blob), чтобы не бликовали; призрачные глифы (.shape) не трогаем */ @media (max-width: 600px) { .blob { opacity: .1; filter: none; } } /* Акцентная обводка/тень карточек движка — в тон шапке (data-accent). Рамка через var(--accent-solid); жёсткая flat-тень перекрашена из бежевой в мягкий янтарь. Селектор html body — чтобы перебить инлайновое .card/.stats-panel движка (3px solid var(--line)). */ html body .card, html body .stats-panel { border-color: var(--accent-solid); box-shadow: 0 9px 0 #FCDCA8; } /* ===================================================================== АДАПТИВ (только то, что касается каркаса) ===================================================================== */ @media (max-width: 920px) { .nav { display: none !important; } .hdr-inner .hdr-right { display: flex; } /* возвращаем правый кластер под бургер (на десктопе скрыт) */ .burger { display: grid; } } @media (max-width: 560px) { .wrap { padding: 0 16px; } } /* ============================================================ ПОДМЕНЮ НАВИГАЦИИ (A4) — «Что нового» под «О проекте». Аддитивный блок: .nav / .nav-link / .mm-links НЕ меняются. Опора на готовые токены :root. ============================================================ */ /* --- Десктоп (>920px): выпадающая панель по hover/focus --- */ /* обёртка пункта — только она даёт контекст позиционирования */ .nav-item { position: relative; display: inline-flex; align-items: center; } /* микро-указатель «раскрывается»: CSS-галочка после текста пункта. currentColor → белая в brand-шапке, accent-ink на активном пункте. При раскрытии переворачивается вверх. */ .nav-item > .nav-link::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; border-radius: 1px; transform: rotate(45deg) translateY(-1px); opacity: .65; transition: transform .18s ease, opacity .18s ease; } .nav-item:hover > .nav-link::after, .nav-item:focus-within > .nav-link::after { transform: rotate(-135deg) translateY(2px); opacity: 1; } .nav-submenu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 196px; display: flex; flex-direction: column; gap: 2px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lift); /* скрыто без display:none — чтобы работали анимация и фокус */ opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s ease, transform .16s ease, visibility .16s; z-index: 90; } /* раскрытие мышью и с клавиатуры (таб внутрь пункта) */ .nav-item:hover > .nav-submenu, .nav-item:focus-within > .nav-submenu { opacity: 1; visibility: visible; transform: translateY(0); } /* невидимый «мостик» поверх зазора 8px — курсор не проваливается */ /* мостик: заходит на пункт и на панель (перекрытие ~4px с каждой стороны), чтобы не было суб-пиксельной мёртвой полосы при уводе курсора в зазор */ .nav-submenu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 16px; } .nav-sublink { display: block; padding: 9px 14px; border-radius: 10px; font-family: "Nunito", system-ui, -apple-system, sans-serif; font-size: 15px; font-weight: 700; color: var(--ink-2); white-space: nowrap; transition: background .16s ease, color .16s ease; } /* в каркасе нет :focus-visible — задаём здесь, иначе клавиатура «слепая» */ .nav-sublink:hover, .nav-sublink:focus-visible { background: var(--brand-50); color: var(--brand-700); outline: none; } .nav-sublink.is-active { background: var(--accent-solid); color: #fff; } /* --- Мобильное меню: вложенный пункт сдвигом, без JS --- */ .mm-links a.mm-sub { margin-left: 30px; /* сдвиг под родителем «О проекте» */ gap: 6px; /* перебиваем .mm-links gap:12px (иконки нет) */ padding: 11px 16px; font-size: 16px; /* мельче родителя (18px) */ background: var(--brand-50); color: var(--accent-ink); } .mm-links a.mm-sub::before { /* ветка-указатель вместо иконки */ content: "\2514"; /* символ └ */ color: var(--faint); font-weight: 700; } .mm-links a.mm-sub.is-active { background: var(--accent-solid); color: #fff; } .mm-links a.mm-sub.is-active::before { color: rgba(255,255,255,.7); }