/* ── Ландшафт технологий 1С — Swiss Grid ────────────────────────── Строгий типографский стиль: сетка, рамки, чёрно-белая база. Имена классов и CSS-переменных сохранены — на них завязан app.js (и editor.css переиспользует эти же переменные). */ :root { --paper: #f7f5f0; /* фон страницы */ --paper-2: #e8e4dc; /* светлый фон / разделитель */ --card: #ffffff; /* белый: сайдбар, шапки, модалка */ --ink: #1a1a1a; /* текст и жирные рамки */ --ink-soft: #666666; /* приглушённый текст */ --line: #e8e4dc; /* тонкие разделители */ --line-strong: #1a1a1a; --card-line: #d4cfc7; /* граница карточек */ --edge: #c8c3bb; /* усиленные края: сайдбар, гост-бейджи */ --num: #e0dbd0; /* декоративные крупные цифры */ --hover: #faf8f3; /* фон при наведении (карточки, чипы) */ --sidebar: #f7f5f0; /* фон сайдбара */ /* акцент в Swiss-стиле не нужен — иерархия через вес и размер. Переменные сохранены для совместимости с editor.css. */ --accent: #1a1a1a; --accent-deep: #1a1a1a; --accent-soft: #e8e4dc; /* зрелость — только цвет текста/рамки бейджа */ --m-base: #2d6e22; /* базовое */ --m-adv: #1a4f8a; /* продвинутое */ --m-niche: #a83e18; /* нишевое */ /* фирменный акцент (точка знака, «выбрано», «освоено»). Сейчас совпадает с «нишевым», но красим через --brand — развести можно одной строкой */ --brand: var(--m-niche); --display: "Unbounded", sans-serif; --body: "Inter", sans-serif; --mono: "Inter", sans-serif; /* Единый «рамочный» отступ страницы графа: вокруг холста со всех сторон (бок, низ) одинаковый. Меняем в одном месте — едет везде. */ --frame-gap: clamp(16px, 3vw, 24px); } /* ── Тёмная тема (data-theme="dark" на ) ──── */ :root[data-theme="dark"] { --paper: #1c1917; /* фон страницы */ --paper-2: #322a26; /* светлый фон / разделитель */ --card: #28211e; /* карточки, шапки категорий, модалка */ --sidebar: #211c19; /* фон сайдбара */ --ink: #dcd0bc; /* основной текст — молочный, не бело-белый */ --ink-soft: #8a7f76; /* приглушённый текст */ --line: #3a312c; /* тонкие разделители */ --line-strong: #c8b89a; /* сильные границы (тёплый светлый) */ --card-line: #3a312c; /* границы карточек */ --edge: #3a312c; /* края сайдбара, гост-бейджи */ --num: #2e2520; /* декоративная цифра «63» */ --hover: #322a26; /* фон при наведении */ --m-base: #5aaa40; /* базовое */ --m-adv: #4a8acc; /* продвинутое */ --m-niche: #e06030; /* нишевое */ } * { box-sizing: border-box; } body { margin: 0; font-family: var(--body); color: var(--ink); background: var(--paper); line-height: 1.5; -webkit-font-smoothing: antialiased; padding-bottom: 48px; /* место под фиксированный подвал */ } a { color: var(--ink); text-underline-offset: 3px; } /* ── Хедер ───────────────────────────────── */ .masthead { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; padding: 20px clamp(20px, 4vw, 40px) 28px; border-bottom: 2px solid var(--ink); background: var(--paper); } /* ── Кнопка меню (бургер) ─────────────────── */ .menu-toggle { /* по вертикали — на строке кикера (надзаголовка): паддинг шапки 20px + центр кикера */ position: absolute; top: 10px; right: clamp(20px, 4vw, 40px); /* крайний справа */ width: 34px; height: 34px; display: grid; place-items: center; padding: 0; background: transparent; border: none; border-radius: 0; color: var(--ink); cursor: pointer; transition: color 0.12s ease; } .menu-toggle:hover { color: var(--ink-soft); } .menu-toggle svg { width: 22px; height: 22px; display: block; } /* ── Свёрнутая верхняя строка (появляется при прокрутке) ── */ .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 30; height: 52px; display: flex; align-items: center; gap: 16px; padding: 0 clamp(20px, 4vw, 40px); background: var(--paper); border-bottom: 2px solid var(--ink); transform: translateY(-100%); transition: transform 0.18s ease; } .topbar.is-visible { transform: translateY(0); } .topbar__brand { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: -1px; font-size: 18px; flex: none; cursor: pointer; user-select: none; } /* ── Знак проекта (вставляет nav.js) ────── */ .logo-mark { color: var(--ink); flex: none; cursor: pointer; } .logo-mark__acc { fill: var(--brand); } .topbar__brand .logo-mark { width: 18px; height: 18px; vertical-align: -2px; margin-right: 9px; } /* В большой шапке знак — колонкой слева от надписи, во всю ее высоту */ .masthead.has-mark { grid-template-columns: auto 1fr auto; } /* Высота знака = кикер (12px + отступ 14px) + заголовок; от верха кикера до низа заголовка. stretch нельзя: ширина auto зацикливает грид-раскладку */ .logo-mark--mast { align-self: start; height: calc(clamp(22px, 4.6vw, 52px) + 26px); width: auto; } /* В мобильной прилепленной шапке знаку не хватает места */ @media (max-width: 720px) { .topbar .logo-mark { display: none; } } .topbar__search { flex: 1; min-width: 0; } .topbar__search input { width: min(420px, 100%); font-family: var(--body); font-size: 13px; padding: 7px 12px; background: transparent; border: 1.5px solid var(--ink); border-radius: 0; color: var(--ink); } .topbar__search input:focus { outline: none; } .topbar .menu-toggle { position: static; flex: none; } /* ── Меню-бургер ──────────────────────────── */ .menu { position: fixed; top: 54px; right: clamp(12px, 4vw, 40px); z-index: 40; display: none; } .menu.is-open { display: block; } .menu__panel { min-width: 232px; padding: 8px; background: var(--card); border: 1.5px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); display: flex; flex-direction: column; gap: 1px; } /* строки меню — ссылки, поле темы и пункты списка темы выглядят одинаково */ .menu__panel a, .menu__theme-head, .menu__theme-list button { font-family: var(--body); font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; text-align: left; padding: 9px 12px; background: transparent; border: none; cursor: pointer; width: 100%; } .menu__panel a:hover, .menu__theme-head:hover, .menu__theme-list button:hover { background: var(--hover); } .menu__sep { height: 1px; background: var(--line); margin: 6px 4px; } /* Поле выбора темы — раскрывается списком из 3 вариантов */ .menu__theme-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .menu__theme-cur { margin-left: auto; color: var(--ink-soft); font-weight: 500; font-size: 13px; } .menu__theme-head::after { content: "▾"; font-size: 11px; color: var(--ink-soft); transition: transform 0.15s ease; } .menu__theme-head[aria-expanded="true"]::after { transform: rotate(180deg); } .menu__theme-list { display: flex; flex-direction: column; } .menu__theme-list[hidden] { display: none; } .menu__theme-list button { font-size: 13px; color: var(--ink-soft); padding-left: 24px; } .menu__theme-list button[aria-pressed="true"] { color: var(--ink); } .menu__theme-list button[aria-pressed="true"]::after { content: " ✓"; } .masthead__main { min-width: 0; } .kicker { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: #999; margin: 0 0 14px; } .title { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: -1px; white-space: nowrap; font-size: clamp(22px, 4.6vw, 52px); line-height: 1; margin: 0; color: var(--ink); } /* Поиск живет в строке над доской (рядом со счетчиком «191 из 191»); на мобильном скрыт — там поиск в прилепленной шапке. Отрицательный отступ слева — на внутренний паддинг и рамку поля, чтобы текст в поле стоял в одну линию с текстом доски под ним. */ .content__bar .search { flex: 1; margin-left: -13.5px; } .content__bar .search input { width: min(460px, 100%); padding: 7px 12px; } @media (max-width: 720px) { .content__bar .search { display: none; } } /* В узких окнах «технологий» не влезает (знак + счетчик справа) — заголовок сокращается до «Ландшафт 1С». */ @media (max-width: 1280px) { .title__mid { display: none; } } .search input { width: min(420px, 100%); font-family: var(--body); font-size: 13px; padding: 10px 14px; background: transparent; border: 1.5px solid var(--ink); border-radius: 0; color: var(--ink); transition: box-shadow 0.12s ease, transform 0.12s ease; } .search input:focus { outline: none; box-shadow: 4px 4px 0 var(--ink); transform: translate(-2px, -2px); } .masthead__num { font-family: var(--display); font-weight: 900; font-size: clamp(56px, 9vw, 96px); line-height: 0.8; color: var(--num); align-self: end; user-select: none; } @media (max-width: 560px) { .masthead { grid-template-columns: 1fr; } .masthead__num { display: none; } } /* ── Тело: сайдбар + контент ─────────────── */ .body { display: flex; align-items: stretch; } .filters { width: 180px; flex: none; background: var(--sidebar); border-right: 1.5px solid var(--edge); position: sticky; top: 52px; /* под свёрнутой верхней строкой */ align-self: flex-start; max-height: calc(100vh - 52px); overflow-y: auto; } @media (max-width: 720px) { .body { flex-direction: column; } .filters { width: 100%; border-right: none; border-bottom: 1.5px solid var(--ink); position: static; max-height: none; overflow: visible; } } /* ── Сайдбар: фильтры строками ────────────── */ .fgroup { padding: 14px 0; border-bottom: 1px solid var(--line); } .fgroup:last-child { border-bottom: none; } .fgroup__head { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: #999; margin: 0 0 8px; padding: 0 16px; } .chips { display: block; } .chip { position: relative; display: block; width: 100%; text-align: left; font-family: var(--body); font-size: 12px; font-weight: 500; padding: 6px 16px 6px 16px; background: none; border: none; color: var(--ink); cursor: pointer; transition: background 0.1s ease; } .chip:hover { background: var(--hover); } .chip[aria-pressed="true"] { font-weight: 700; padding-right: 30px; } /* индикатор выбранного: вертикальная черта фирменным терракотом (как скобка аналогов на «Пути») + крестик-сброс справа */ .chip[aria-pressed="true"]::before { content: ""; position: absolute; left: 7px; top: 5px; bottom: 5px; width: 2px; background: var(--brand); } .chip[aria-pressed="true"]::after { content: "✕"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 10px; line-height: 1; color: var(--ink-soft); } .chip[aria-pressed="true"]:hover::after { color: var(--ink); } /* ── Онбординг: цепочка тултипов при первом визите (onboarding.js) ── */ /* Затемнение с «дыркой» над целью: box-shadow закрывает всё, кроме прямоугольника. pointer-events:none — цель под дыркой остается кликабельной (карточка, подвал). */ .onb-hole { position: fixed; z-index: 58; pointer-events: none; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.62); } /* Swiss Grid бабл: без скруглений и рамок. Светлый в светлой теме, темный — в темной. */ .onb { --onb-bg: #f7f5f0; --onb-fg: #1a1a1a; --onb-muted: #7a7065; --onb-count: #999; --onb-btn-bg: #1a1a1a; --onb-btn-fg: #f7f5f0; --onb-opt-border: #d6cfc2; position: fixed; z-index: 60; width: 320px; max-width: calc(100vw - 24px); padding: 18px 20px; background: var(--onb-bg); color: var(--onb-fg); border: none; border-radius: 0; box-shadow: 0 16px 44px rgba(0, 0, 0, 0.45); } :root[data-theme="dark"] .onb { --onb-bg: #38322b; /* заметно светлее фона — не сливается с затемнением */ --onb-fg: #f7f5f0; --onb-muted: #b3a594; --onb-count: #8a7f76; --onb-btn-bg: #f7f5f0; --onb-btn-fg: #1a1a1a; --onb-opt-border: #5c5349; } /* Широкий бабл для шагов с кнопками — чтобы значения встали в один ряд */ .onb.is-wide { width: 480px; } /* Стрелка-указатель — треугольник цвета бабла */ .onb::after { content: ""; position: absolute; width: 0; height: 0; border: 8px solid transparent; } .onb.is-left::after { left: -8px; top: 24px; border-left-width: 0; border-right-color: var(--onb-bg); } .onb.is-up::after { top: -8px; left: 26px; border-top-width: 0; border-bottom-color: var(--onb-bg); } .onb.is-down::after { bottom: -8px; left: 50%; margin-left: -8px; border-bottom-width: 0; border-top-color: var(--onb-bg); } .onb__q { margin: 0 0 8px; font-family: var(--display); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; line-height: 1.3; color: var(--onb-fg); } .onb__text { margin: 0 0 14px; font-family: var(--body); font-size: 11px; line-height: 1.5; color: var(--onb-muted); } .onb__opts { display: flex; flex-wrap: nowrap; gap: 6px; margin-bottom: 14px; } .onb__opt { padding: 5px 11px; font-family: var(--body); font-size: 11px; white-space: nowrap; background: transparent; border: 1px solid var(--onb-opt-border); border-radius: 0; color: var(--onb-fg); cursor: pointer; } .onb__opt:hover { border-color: var(--onb-fg); } .onb__opt[aria-pressed="true"] { background: var(--onb-fg); color: var(--onb-bg); border-color: var(--onb-fg); font-weight: 700; } .onb__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .onb__foot-r { display: flex; align-items: center; gap: 12px; } .onb__count { font-family: var(--body); font-size: 10px; letter-spacing: 1px; color: var(--onb-count); } .onb__skip { padding: 0; background: none; border: none; font-family: var(--body); font-size: 10px; color: var(--onb-count); cursor: pointer; } .onb__skip:hover { color: var(--onb-muted); } .onb__next { padding: 6px 14px; background: var(--onb-btn-bg); color: var(--onb-btn-fg); border: none; border-radius: 0; font-family: var(--body); font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; } .onb__next:hover { opacity: 0.85; } /* На узком экране сайдбар уезжает наверх — фильтры горизонтально, чипы тегами. Метка оси встаёт в одну строку с чипами. */ @media (max-width: 720px) { .fgroup { display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; padding: 9px clamp(16px, 3vw, 24px); } .fgroup__head { display: none; } .chips { flex: 1 1 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; } .chip { display: inline-block; width: auto; padding: 5px 11px; border: 1px solid var(--line-strong); border-left: 1px solid var(--line-strong); border-radius: 0; } .chip:hover { background: var(--paper-2); } .chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); font-weight: 600; padding: 5px 11px; /* перебить десктопный отступ под крестик */ } .chip[aria-pressed="true"]::before, .chip[aria-pressed="true"]::after { content: none; } /* на мобильном — закрашенный тег без черты/крестика */ } /* ── Контент ─────────────────────────────── */ .content { flex: 1; min-width: 0; background: var(--paper); } .content__bar { display: flex; align-items: center; gap: 16px; padding: 13px clamp(16px, 3vw, 24px); min-height: 46px; border-bottom: 1px solid var(--line); } /* Строка-пояснение над доской (показ результатов без отборов) */ .note { margin: 0; padding: 12px clamp(16px, 3vw, 24px) 0; font-size: 13px; color: var(--ink-soft); } .note[hidden] { display: none; } .count { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #999; } .reset { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; background: none; border: none; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; padding: 0; } /* Счётчик и сброс, продублированные в прилипающей верхней строке */ .topbar .count, .topbar .reset { flex: none; white-space: nowrap; } .topbar .count { letter-spacing: 0.5px; } @media (max-width: 600px) { .topbar .count, .topbar .reset { display: none; } } /* на мобильном дубль не показываем */ /* ── Блоки (группы категорий) ────────────── */ .block__head { padding: 34px clamp(16px, 3vw, 24px) 10px; } .board > .block__head:first-child { padding-top: 6px; } .block__name { font-family: var(--display); font-weight: 900; font-size: clamp(20px, 2.6vw, 28px); letter-spacing: 0.5px; color: var(--ink); } /* ── Категории ───────────────────────────── */ .board { counter-reset: cat; } .cat { counter-increment: cat; } .cat:not(:last-child) { margin-bottom: 14px; } /* отступ между разделами (фон сетки) */ .cat__head { display: flex; align-items: center; gap: 16px; padding: 14px clamp(16px, 3vw, 24px); background: var(--card); border-bottom: 2px solid var(--ink); /* категория читается как блок */ position: sticky; top: 52px; z-index: 3; /* под свёрнутой верхней строкой */ } .cat__head::before { content: counter(cat, decimal-leading-zero); font-family: var(--display); font-weight: 900; font-size: 32px; color: #888; line-height: 1; flex: none; /* как текст описания — виден в обеих темах */ } .cat__title { display: flex; flex-direction: column; gap: 3px; } .cat__block { /* блок — виден в залипшей шапке при прокрутке */ font-family: var(--display); font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; color: #999; line-height: 1; } .cat__name { font-family: var(--display); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 2px; margin: 0; } .cat__num { margin-left: auto; font-size: 11px; color: #999; } /* ── Подкатегория: нумерованный подзаголовок 01.1 / 01.2 ── */ .subcat__head { margin: 0; /* у

есть браузерный отступ — он и давал зазоры */ padding: 8px clamp(16px, 3vw, 24px); background: var(--card); border-top: 1px solid var(--card-line); border-bottom: 1px solid var(--card-line); font-family: var(--display); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: #777; /* липнет вплотную под шапкой категории; ее высота плавает (имя в 1-2 строки), поэтому офсет меряет app.js и кладет в --subtop на .cat */ position: sticky; top: var(--subtop, 114px); z-index: 2; } /* первый подзаголовок — сразу под чёрной линией категории, своя верхняя не нужна */ .cat__head + .subcat__head { border-top: none; } /* после сетки — совмещаем верхнюю линию с нижней рамкой карточек (не двоим) */ .cards + .subcat__head { margin-top: -1px; } /* ── Сетка карточек: 3 колонки ───────────── */ .cards { display: grid; grid-template-columns: repeat(3, 1fr); } .card { display: flex; align-items: flex-start; gap: 16px; text-align: left; font-family: var(--body); color: var(--ink); background: var(--card); cursor: pointer; /* белая карточка на тёплом фоне сетки */ border: none; border-right: 1px solid var(--card-line); border-bottom: 1px solid var(--card-line); padding: 18px; transition: background 0.12s ease; } .card:nth-child(3n) { border-right: none; } .card:hover { background: var(--hover); } /* левая колонка — крупный логотип без подложки */ .card__media { flex: none; } .card__logo { width: 48px; height: 48px; display: grid; place-items: center; } .card__logo img { max-width: 100%; max-height: 100%; object-fit: contain; } /* монохромные (чёрные) лого: в тёмной теме инвертируем по флагу logoInvert в data.js */ :root[data-theme="dark"] img.is-invert { filter: invert(1); } .card__logo--ph { width: 48px; height: 48px; border-radius: 2px; border: 1px solid var(--line); font-size: 14px; font-weight: 700; color: #bbb; } /* правая колонка — название, описание, бейджи */ .card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; } .card__name { font-family: var(--body); font-weight: 700; font-size: 13px; line-height: 1.25; min-width: 0; overflow-wrap: break-word; } .card__desc { font-size: 11px; color: #888; line-height: 1.5; } .card__meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; } @media (max-width: 1040px) { .cards { grid-template-columns: repeat(2, 1fr); } .card:nth-child(3n) { border-right: 1px solid var(--card-line); } .card:nth-child(2n) { border-right: none; } } @media (max-width: 560px) { .cards { grid-template-columns: 1fr; } .card, .card:nth-child(3n), .card:nth-child(2n) { border-right: none; } } /* ── Бейджи: только рамка ────────────────── */ .badge { display: inline-block; font-family: var(--body); font-size: 9px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; padding: 2px 6px; border-radius: 2px; border: 1px solid transparent; } .badge:empty { display: none; } .badge--mat { /* зрелость — рамка с цветом, без заливки */ background: transparent; color: var(--mat, var(--ink)); border-color: var(--mat, var(--ink)); } .badge--ghost { /* происхождение/лицензия/роли/контекст — только рамка */ background: transparent; color: #888; border-color: var(--edge); } [data-mat="базовое"] { --mat: var(--m-base); } [data-mat="продвинутое"] { --mat: var(--m-adv); } [data-mat="нишевое"] { --mat: var(--m-niche); } .empty { padding: 48px clamp(16px, 3vw, 24px); max-width: 560px; } .empty__title { font-family: var(--display); font-weight: 700; font-size: 18px; margin: 0 0 8px; color: var(--ink); } .empty__text { font-size: 13px; color: var(--ink-soft); line-height: 1.55; margin: 0 0 18px; } .empty__btn { display: inline-block; font-family: var(--body); font-weight: 600; font-size: 12px; letter-spacing: 0.5px; padding: 9px 16px; border: 1.5px solid var(--ink); border-radius: 0; color: var(--ink); text-decoration: none; transition: background 0.12s ease, color 0.12s ease; } .empty__btn:hover { background: var(--ink); color: var(--paper); } .empty__actions { display: flex; gap: 10px; flex-wrap: wrap; } /* Запасной путь (письмо) — приглушенная рамка */ .empty__btn--ghost { border-color: var(--edge); color: var(--ink-soft); } /* ── Модалка карточки ────────────────────── */ .detail { border: 1.5px solid var(--ink); border-radius: 0; padding: 0; max-width: 720px; width: calc(100% - 32px); max-height: calc(100dvh - 32px); overflow: hidden; /* высота ограничена — скроллит внутренний контент */ background: var(--card); color: var(--ink); box-shadow: 8px 8px 0 var(--ink); /* фирменная жёсткая тень, как у поиска/бургера */ } /* плавное появление модалки и затемнения */ .detail[open] { animation: detail-in 0.16s ease both; } .detail[open]::backdrop { animation: backdrop-in 0.16s ease both; } @keyframes detail-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } } @keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } } .detail::backdrop { background: rgba(26, 26, 22, 0.4); } /* Колонка: шапка и подвал зафиксированы, середина прокручивается */ .detail__body { position: relative; display: flex; flex-direction: column; max-height: calc(100dvh - 32px); } /* Шапка — закреплена сверху; при скролле схлопывается (класс is-compact) */ .detail__head { position: relative; flex: none; display: flex; align-items: center; gap: 16px; padding: 26px clamp(20px, 4vw, 32px) 20px; border-bottom: 1px solid var(--line); transition: padding 0.15s ease; } .detail__logo { width: 52px; height: 52px; flex: none; display: grid; place-items: center; transition: width 0.15s ease, height 0.15s ease; } .detail__logo img { max-width: 100%; max-height: 100%; object-fit: contain; } .detail__logo--ph { width: 52px; height: 52px; border-radius: 2px; border: 1px solid var(--line); font-size: 15px; font-weight: 700; color: #bbb; } .detail__headtext { min-width: 0; } .detail__title { font-family: var(--display); font-weight: 900; font-size: 19px; text-transform: uppercase; letter-spacing: -0.5px; margin: 0 0 4px; line-height: 1.05; overflow-wrap: break-word; } .detail__sub { font-size: 11px; color: #999; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 10px; } .detail__badges { display: flex; flex-wrap: wrap; gap: 6px; } /* Узкая закрепленная шапка при прокрутке: мелкое лого, без подзаголовка, чипсы остаются */ .detail__head.is-compact { padding-top: 13px; padding-bottom: 12px; } .detail__head.is-compact .detail__logo, .detail__head.is-compact .detail__logo--ph { width: 34px; height: 34px; } .detail__head.is-compact .detail__logo--ph { font-size: 12px; } .detail__head.is-compact .detail__sub, .detail__head.is-compact .detail__badges { display: none; } .detail__head.is-compact .detail__title { font-size: 16px; margin-bottom: 0; } /* Прокручиваемая середина: контент + подвал (шапка остается закрепленной) */ .detail__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; } .detail__content { padding: 22px clamp(20px, 4vw, 32px); } .detail__row { margin: 0 0 18px; } .detail__row:last-child { margin-bottom: 0; } .detail__row h3 { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: #999; margin: 0 0 7px; } .detail__row p { margin: 0; font-size: 14px; line-height: 1.55; } .detail__list { margin: 0; padding-left: 18px; } .detail__list li { margin-bottom: 6px; font-size: 13.5px; } .detail__tags { display: flex; flex-wrap: wrap; gap: 6px; } /* Связанные карточки — квадратные кнопки с лого */ .detail__rels { display: flex; flex-wrap: wrap; gap: 7px; } .detail__rel { display: inline-flex; align-items: center; gap: 7px; font-family: var(--body); font-size: 12px; font-weight: 600; padding: 6px 11px; border: 1px solid var(--card-line); border-radius: 0; background: #f0ede8; color: var(--ink); cursor: pointer; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; } .detail__rel-logo { width: 18px; height: 18px; flex: none; object-fit: contain; /* лого — на самом img, сохраняем пропорции */ display: grid; place-items: center; } .detail__rel-logo--ph { font-size: 8px; font-weight: 700; color: #bbb; } .detail__rel::after { content: "\2197\FE0E"; opacity: 0.5; } .detail__rel:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } :root[data-theme="dark"] .detail__rel { background: #2e2520; border-color: var(--edge); } :root[data-theme="dark"] .detail__rel:hover { background: #3a2f28; color: #fff; border-color: var(--edge); } /* Подвал — ссылки */ .detail__foot { display: flex; gap: 18px; flex-wrap: wrap; padding: 18px clamp(20px, 4vw, 32px); border-top: 1px solid var(--line); font-size: 13px; } /* «Заметили неточность?» — приглушенно, прижата вправо */ .detail__report { margin-left: auto; color: var(--ink-soft); } /* Крестик */ .detail__close { position: absolute; top: 14px; right: 16px; font-size: 18px; line-height: 1; cursor: pointer; z-index: 1; background: none; border: none; color: #bbb; /* вторичный — не основной элемент */ transition: color 0.12s ease; } /* Иконка «Поделиться» в шапке модалки — под крестиком, у нижней линии; копирует ссылку */ .detail__share { position: absolute; right: 16px; bottom: 12px; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: none; border: none; color: #bbb; /* как крестик — вторичный элемент */ cursor: pointer; transition: color 0.12s ease; } .detail__share svg { width: 17px; height: 17px; display: block; } .detail__share:hover { color: var(--ink); } .detail__share.is-done { color: var(--brand); } .detail__close:hover { color: var(--ink); } .detail__close:focus { outline: none; } /* не подсвечивать при авто-фокусе на открытии */ /* ── Подвал (фиксирован тонкой полосой внизу) ── */ .foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; border-top: 2px solid var(--ink); background: var(--paper); padding: 8px clamp(20px, 4vw, 40px); display: flex; justify-content: center; font-size: 10px; color: #999; letter-spacing: 0.5px; text-transform: uppercase; transition: font-size 0.15s ease, padding 0.15s ease; } .foot a { color: var(--ink); text-decoration: none; } .foot__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; } /* долистали до конца — раскрываем: подчёркивание и чуть крупнее */ .foot.is-full { font-size: 12px; padding: 12px clamp(20px, 4vw, 40px); } .foot.is-full a { text-decoration: underline; text-underline-offset: 3px; } /* На телефоне подвал не фиксируем: на узком экране ссылки переносятся в 2 строки, полосой внизу это выглядит плохо — пусть просто стоит в конце страницы. */ @media (max-width: 600px) { .foot { position: static; } } /* ── Отдельные страницы (Методология, Экспертный совет) ── */ .kicker .back { color: #999; text-decoration: none; } .kicker .back:hover { color: var(--ink-soft); } .page { max-width: 860px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); } .doc { padding-block: 36px 64px; } .doc .lead { font-size: clamp(15px, 1.7vw, 19px); line-height: 1.55; margin: 0 0 32px; max-width: 64ch; } .doc h2 { font-family: var(--display); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 2px; /* при прокрутке подзаголовок секции закрепляется под верхней строкой (topbar 52px) */ position: sticky; top: 52px; z-index: 5; background: var(--paper); margin: 36px 0 0; padding: 20px 0 12px; border-top: 1px solid var(--line); /* линия под заголовком появляется только когда он залипает (класс is-stuck ставит nav.js) — отделяет его от уезжающего вниз текста; в обычном потоке прозрачна, чтобы не было сдвига на 1px */ border-bottom: 1px solid transparent; } .doc h2.is-stuck { border-bottom-color: var(--line); } .doc section:first-child h2 { border-top: none; padding-top: 0; margin-top: 0; } .doc p { margin: 0 0 12px; max-width: 64ch; } .doc ul { margin: 0 0 14px; padding-left: 20px; max-width: 64ch; } .doc li { margin: 0 0 7px; } .doc strong { font-weight: 600; } /* Метки осей — те же бейджи, что и в ландшафте; бейдж играет роль маркера */ .axis { display: grid; grid-template-columns: max-content 1fr; gap: 11px 14px; align-items: baseline; margin: 0 0 8px; max-width: 64ch; } .axis .badge { justify-self: start; } /* на странице методологии метки читаемые — черные (зрелость остается цветной) */ .axis .badge--ghost { color: var(--ink); border-color: var(--ink); } .axis__desc { color: var(--ink); } /* Экспертный совет — карточки кураторов */ /* Совет шире текстовых страниц (860) — чтобы 2 колонки были просторными. */ .council { max-width: 1080px; padding-block: 30px 72px; } /* Вводный текст — элемент сетки во всю ширину: левый/правый край ровно по карточкам */ .council .lead { grid-column: 1 / -1; font-size: clamp(15px, 1.7vw, 19px); line-height: 1.55; margin: 0 0 20px; max-width: none; } /* Кураторы — сетка в 2 колонки; автор (.exp--lead) во всю ширину под ними. На узком экране — одна колонка. */ .exp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 34px; counter-reset: expert; } @media (max-width: 720px) { .exp-grid { grid-template-columns: 1fr; } .page.council { padding-inline: 10px; } } .exp { margin: 0; /* у

браузерный отступ 1em 40px */ display: flex; flex-direction: column; background: var(--card); border: 1.5px solid var(--ink); counter-increment: expert; transition: transform 0.12s ease, box-shadow 0.12s ease; } @media (hover: hover) { .exp:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); } } .exp__photo { aspect-ratio: 1; overflow: hidden; background: var(--paper-2); border-bottom: 1.5px solid var(--ink); } .exp__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter 0.25s ease, transform 0.25s ease; } /* Слегка приглушаем в тон теплой палитре — фото из разных съемок собираются в серию; наведение оживляет. Только на устройствах с курсором: на таче ховера нет, фото сразу цветные */ @media (hover: hover) { .exp__photo img { filter: sepia(0.18) saturate(0.8); } } @media (hover: hover) { .exp:hover .exp__photo img { filter: none; transform: scale(1.03); } } .exp__body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: clamp(18px, 2.4vw, 26px); position: relative; } .exp__body::after { content: counter(expert, decimal-leading-zero); position: absolute; top: 14px; right: 16px; font-family: var(--display); font-weight: 900; font-size: 30px; line-height: 1; color: var(--num); user-select: none; } .exp--lead .exp__body::after { content: none; /* автор без номера */ } .exp__tag { font-family: var(--display); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 5px 10px; border: 1px solid var(--card-line); border-left: 3px solid var(--area, var(--ink)); } /* Цвета областей = цвета блоков ландшафта на графе (BLOCK_COLORS в graph.js) */ .exp__tag--design { --area: #3a7ca5; /* Проектирование */ } .exp__tag--dev { --area: #2d7d3a; /* Разработка */ } .exp__tag--qa { --area: #b5471f; /* Качество */ } .exp__tag--infra { --area: #c08a1e; /* Инфраструктура и эксплуатация */ } .exp__tag--author { --area: var(--brand); } .exp__name { font-family: var(--display); font-weight: 700; font-size: clamp(19px, 2.3vw, 26px); letter-spacing: -0.5px; line-height: 1.05; color: var(--ink); margin: 0; overflow-wrap: break-word; } .exp__bio { font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin: 0; } .exp__link { margin-top: auto; display: inline-flex; align-items: baseline; gap: 6px; font-weight: 600; font-size: 13px; color: var(--ink); text-decoration: none; border-bottom: 1.5px solid var(--ink); padding-bottom: 1px; } .exp__link:hover { color: var(--ink-soft); border-color: var(--ink-soft); } .exp__link span { font-size: 11px; } /* Автор проекта — акцентная карточка во всю ширину, фото сбоку */ .exp--lead { grid-column: 1 / -1; } @media (min-width: 721px) { .exp--lead { flex-direction: row; } .exp--lead .exp__photo { flex: none; width: clamp(280px, 50%, 440px); border-bottom: none; border-right: 1.5px solid var(--ink); } .exp--lead .exp__body { justify-content: center; gap: 14px; } .exp--lead .exp__name { font-size: clamp(24px, 3vw, 32px); } .exp--lead .exp__bio { font-size: 15px; max-width: 46ch; } } /* ── Граф связей ──────────────────────────── */ .graph-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin: 16px var(--frame-gap) 0; } .graph-fgroup { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .graph-flabel { font-family: var(--display); font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; color: #999; } .graph-filters .chips { display: flex; flex-wrap: wrap; gap: 6px; } .graph-filters .chip { display: inline-block; width: auto; text-align: center; padding: 5px 11px; border: 1px solid var(--edge); border-left: 1px solid var(--edge); border-radius: 2px; font-size: 12px; } .graph-filters .chip:hover { background: var(--hover); } .graph-filters .chip[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); font-weight: 700; box-shadow: inset 3px 0 0 var(--brand); } /* Черта и крестик сайдбарного списка в квадратных чипах графа/схемы лишние: выбранность показывают заливка и терракотовая полоса, снятие — повторный клик */ .graph-filters .chip[aria-pressed="true"]::before, .graph-filters .chip[aria-pressed="true"]::after, .scheme-toggles .chip[aria-pressed="true"]::before, .scheme-toggles .chip[aria-pressed="true"]::after { content: none; } /* Сброс отборов в графе — вид как у веб-сброса, видна только при выбранных чипах */ .graph-reset { display: none; align-self: center; } .graph-filters:has(.chip[aria-pressed="true"]) .graph-reset { display: inline-block; } /* Кнопка отборов в верхней строке (видна в компактном/полноэкранном режиме) */ .graph-ftrigger { display: none; align-items: center; gap: 5px; flex: none; padding: 4px 6px; background: transparent; border: none; cursor: pointer; font-family: var(--body); font-size: 12px; color: #999; } .graph-ftrigger::after { content: "▾"; font-size: 10px; transition: transform 0.15s ease; } .graph-ftrigger[aria-expanded="true"] { color: var(--ink); } .graph-ftrigger[aria-expanded="true"]::after { transform: rotate(180deg); } /* Кнопка «развернуть/свернуть» — правый верхний угол графа, чтобы не перекрывать подсказку (она в правом нижнем) (десктоп) */ .graph__expand { position: absolute; right: 12px; top: 12px; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; background: var(--card); border: 1px solid var(--card-line); color: var(--ink); cursor: pointer; } .graph__expand:hover { background: var(--hover); } .graph__expand svg { width: 16px; height: 16px; display: block; } .graph__expand .i-collapse { display: none; } .is-immersive .graph__expand .i-expand { display: none; } .is-immersive .graph__expand .i-collapse { display: block; } /* Десктоп: страница графа — флекс-колонка во весь экран, подвал в потоке снизу. Граф растягивается (flex:1), снизу остаётся такой же отступ, как по бокам. */ .page-graph { display: flex; flex-direction: column; height: 100vh; padding-bottom: 0; } .page-graph .foot { position: static; } .graph { position: relative; overflow: hidden; flex: 1 1 auto; min-height: 0; /* сжимается под вьюпорт, чтобы подвал был виден без скролла */ margin: 14px var(--frame-gap) var(--frame-gap); /* верх 14, бока и низ — равный отступ */ border: 2px solid var(--ink); background: var(--paper); } .graph canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; } .graph__legend { position: absolute; top: 12px; left: 12px; background: var(--card); border: 1px solid var(--card-line); padding: 9px 12px; font-size: 11px; } .graph__legend-title { margin: 0 0 6px; font-family: var(--display); font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; color: #999; } .graph__legend ul { list-style: none; margin: 0; padding: 0; } .graph__legend li { display: flex; align-items: center; gap: 8px; margin: 4px 0; color: var(--ink); } .graph__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; } .graph__hint { position: absolute; bottom: 12px; right: 14px; font-size: 11px; color: var(--ink-soft); letter-spacing: 0.3px; text-transform: uppercase; pointer-events: none; } .graph__zoom { position: absolute; left: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 6px; } .graph__zoom button { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; background: var(--card); border: 1px solid var(--card-line); color: var(--ink); cursor: pointer; } .graph__zoom button:hover { background: var(--hover); } .graph__zoom svg { width: 16px; height: 16px; display: block; } /* Граф на узких экранах: компактная верхняя строка вместо большой шапки, подвал без навигации, отборы — аккордеон. Холст занимает максимум места. */ @media (max-width: 600px) { .page-graph .masthead { display: none; } /* большую шапку прячем */ .page-graph .topbar { transform: none; } /* «слипшаяся» строка видна сразу */ .page-graph .foot { display: none; } /* без навигации в подвале */ /* Без рамки и отступов: сразу под линией шапки, во всю ширину и до низа */ .graph { flex: none; /* на мобильном высота фиксированная, не тянем */ height: calc(100dvh - 52px); min-height: 320px; margin: 52px 0 0; /* под фиксированную верхнюю строку */ border: none; } /* кнопка отборов в строке на мобильном не нужна — пункт в бургере */ .graph__expand { display: none; } /* на мобильном всегда полноэкранно */ /* Отборы — шторкой из-под шапки, как на главной и схеме */ .graph-filters { position: fixed; left: 0; right: 0; top: 52px; z-index: 25; /* ниже шапки: выезжает из-под нее */ flex-direction: column; align-items: stretch; gap: 14px; margin: 0; padding: 14px; max-height: calc(100vh - 52px - 48px); overflow: auto; background: var(--card); border-bottom: 2px solid var(--ink); box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.35); animation: sheet-down 0.2s ease; display: none; } .graph-filters.is-open { display: flex; } .graph-fgroup { flex-direction: column; align-items: flex-start; gap: 7px; } .graph-flabel { display: block; } /* подписи «Роль»/«Зрелость» в списке нужны */ .graph__legend { display: none; } /* легенду блоков на мобильном не показываем */ .graph__hint { display: none; } .graph__zoom { display: none; } /* на тач-экране зум пинчем, кнопки не нужны */ } /* Полноэкранный режим графа на десктопе (кнопка «развернуть») — тот же компактный заголовок, отборы в выпадашке, без подвала; легенда и зум остаются */ .page-graph.is-immersive .masthead { display: none; } .page-graph.is-immersive .topbar { transform: none; } .page-graph.is-immersive .foot { display: none; } .page-graph.is-immersive .graph { position: fixed; inset: 52px 0 0; z-index: 20; height: auto; min-height: 0; margin: 0; border: none; } /* В распахнутом режиме «Отборы» доступны из бургера (как на мобильном) */ .page-graph.is-immersive .menu__page-actions { display: contents; } .page-graph.is-immersive .graph-filters { position: fixed; top: 52px; right: 12px; z-index: 35; flex-direction: column; align-items: stretch; gap: 6px; margin: 0; padding: 10px; min-width: 210px; background: var(--card); border: 1.5px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); display: none; } .page-graph.is-immersive .graph-filters.is-open { display: flex; } .page-graph.is-immersive .graph-fgroup { flex-direction: column; align-items: flex-start; gap: 7px; } .page-graph.is-immersive .graph-flabel { display: block; } /* ── Страница «Схема» ─────────────────────── */ /* Подвал — фиксированный снизу, как на других страницах (body{padding-bottom}). */ .scheme-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin: 16px var(--frame-gap) 0; } .scheme-toggles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; } /* Квадратные чипы отбора — как в графе (.graph-filters .chip) */ .scheme-toggles .chip { display: inline-block; width: auto; text-align: center; padding: 5px 11px; border: 1px solid var(--edge); border-radius: 2px; font-size: 12px; } .scheme-toggles .chip:hover { background: var(--hover); } .scheme-toggles .chip[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); box-shadow: inset 3px 0 0 var(--brand); color: var(--paper); font-weight: 700; padding-right: 11px; } /* без крестика-сброса и вертикальной черты базового чипа */ .scheme-toggles .chip[aria-pressed="true"]::before, .scheme-toggles .chip[aria-pressed="true"]::after { content: none; } /* Выпадающий список «Блоки» */ .scheme-dd { position: relative; display: inline-flex; align-items: center; } /* стрелочка ▾ только у «Блоки», у «Скачать» — нет (давала лишний отступ) */ .chip.scheme-dd__btn::after { content: "▾"; margin-left: 5px; font-size: 9px; } .scheme-dd__panel { position: absolute; top: 100%; left: 0; margin-top: 5px; z-index: 40; min-width: 220px; background: var(--card); border: 1.5px solid var(--ink); padding: 8px; box-shadow: 4px 4px 0 var(--ink); /* фирменная жёсткая тень, как у бургера */ } /* Меню «Скачать»: выравнивание по правому краю кнопки + опции */ .scheme-dl__panel { left: auto; right: 0; min-width: 168px; } /* Бар-«Скачать» — покрупнее (примерно как «Сбросить») */ .scheme-btn.scheme-dl-btn { font-size: 14px; } .scheme-dl-btn .i-share { display: none; } /* иконка «Поделиться» — только на мобильном в заголовке */ /* Раскрытие по наведению (бар, только указательные устройства); разрыв убран, чтобы hover не терялся */ .scheme-dd--hover .scheme-dl__panel { margin-top: 0; } @media (hover: hover) { .scheme-dd--hover:hover .scheme-dl__panel { display: block; } } .scheme-dl__opt { display: block; width: 100%; text-align: left; background: none; border: none; padding: 9px 12px; font-family: var(--body); font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; white-space: nowrap; } .scheme-dl__opt:hover { background: var(--hover); } .scheme-dd__panel label { display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 12px; color: var(--ink); cursor: pointer; white-space: nowrap; } .scheme-dd__panel label:hover { background: var(--hover); } .scheme-dd__panel input { accent-color: var(--ink); cursor: pointer; } .scheme-reset { margin-left: 2px; } .scheme-actions { display: flex; gap: 8px; } .scheme-btn { font-family: var(--body); font-size: 12px; font-weight: 600; padding: 6px 14px; border: 1px solid var(--ink); background: none; color: var(--ink); cursor: pointer; transition: background 0.12s ease, color 0.12s ease; } .scheme-btn:hover { background: var(--ink); color: var(--paper); } .scheme-wrap { margin: 14px var(--frame-gap) var(--frame-gap); border: 2px solid var(--ink); background: var(--paper); overflow: auto; } .scheme-wrap svg { display: block; width: 100%; height: auto; } .scheme-wrap__empty { padding: 60px 20px; text-align: center; color: var(--ink-soft); font-size: 13px; } /* Схема рисуется сразу со структурой; на местах еще не загруженных логотипов — пульсирующий плейсхолдер (кружок в SVG), который заполняется иконкой позже */ .sch-logo-skel { animation: sch-skel-pulse 1.2s ease-in-out infinite; } @keyframes sch-skel-pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.85; } } @media (prefers-reduced-motion: reduce) { .sch-logo-skel { animation: none; opacity: 0.5; } } .scheme-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } /* ── Отборы как попап (как в графе): на мобильном всегда, на десктопе — при видимой шапке во время прокрутки. Открытие — кнопкой «Отборы». ── */ .scheme-toggles.is-open { position: fixed; top: 52px; right: 12px; z-index: 35; display: flex; flex-direction: column; align-items: stretch; gap: 14px; margin: 0; padding: 14px; min-width: 240px; max-width: calc(100vw - 24px); max-height: calc(100vh - 64px); overflow: auto; background: var(--card); border: 1.5px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); } .scheme-toggles.is-open .graph-fgroup { flex-direction: column; align-items: flex-start; gap: 7px; } /* «Блоки» в попапе — без кнопки-триггера, список чекбоксов сразу */ .scheme-toggles.is-open .scheme-dd__btn:not(.scheme-dl-btn) { display: none; } .scheme-toggles.is-open .scheme-dd__panel { position: static; display: block; min-width: 0; margin: 0; padding: 0; border: none; box-shadow: none; background: none; } /* ── Схема на мобильном ── */ @media (max-width: 720px) { /* инлайн-фильтры в баре не показываем — только попап из шапки */ .scheme-toggles { display: none; } /* заголовок: «Скачать» → иконка «Поделиться»; «Сбросить» прячем (есть в попапе) */ #topbar-dl .scheme-dl-text { display: none; } #topbar-dl .i-share { display: block; width: 20px; height: 20px; } #topbar-dl .scheme-dl-btn { display: inline-flex; /* перебить скрытие .topbar .reset на узких экранах */ text-decoration: none; padding: 4px 2px; color: var(--ink); } .topbar #reset2 { display: none; } /* Контентные страницы (схема/методология/совет): сразу компактный прилепленный заголовок вместо большого masthead */ .page-doc .masthead { display: none; } .page-doc { padding-top: 52px; /* под фиксированный топбар */ } .page-doc .topbar { transform: none; /* всегда видим */ gap: 10px; /* плотнее, чтобы всё влезло */ } /* Схема: бар не показываем; «Отборы» — в бургере, «Скачать» — в топбаре */ .page-doc .scheme-bar { margin: 0; } .page-doc .scheme-actions { display: none; } /* id нужен: правило показа .topbar.is-visible #topbar-ftrigger сильнее классов */ .page-doc .topbar #topbar-ftrigger { display: none; } /* Отборы — шторкой из-под шапки, как на главной */ .scheme-toggles.is-open { left: 0; right: 0; top: 52px; min-width: 0; max-width: none; max-height: calc(100vh - 52px - 48px); border: none; border-bottom: 2px solid var(--ink); box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.35); z-index: 25; /* ниже шапки: выезжает из-под нее */ animation: sheet-down 0.2s ease; } /* Постер без рамки и отступов — сразу под линией шапки, во всю ширину */ .page-doc .scheme-wrap { margin: 0; border: none; } /* Контентные страницы: подвал на мобильном не показываем */ .page-doc .foot { display: none; } .page-doc { padding-bottom: 0; } } /* Доп. пункты бургера (Отборы/Скачать) — только на мобильном; --all (схема) — и на десктопе */ .menu__page-actions { display: none; } .menu__page-actions--all { display: contents; } .menu__pa-item { font-family: var(--body); font-size: 14px; font-weight: 600; color: var(--ink); text-align: left; padding: 9px 12px; background: transparent; border: none; cursor: pointer; width: 100%; } .menu__pa-item:hover { background: var(--hover); } .menu__pa-head { display: flex; align-items: center; justify-content: space-between; } .menu__pa-sub { padding-left: 24px; font-weight: 500; } .menu__pa-list[hidden] { display: none; } @media (max-width: 720px) { .menu__page-actions { display: contents; } } /* ── Главная на мобильном: компактная шапка + фильтры в попап «Отборы» ── */ @media (max-width: 720px) { .page-main .masthead { display: none; } .page-main { padding-top: 52px; /* под фиксированный топбар */ } .page-main .topbar { transform: none; /* шапка видна сразу */ gap: 10px; } /* фильтры уезжают в попап из бургера; инлайн-сайдбар не показываем */ .page-main .filters { display: none; } .page-main .filters.is-open { /* шторка из-под шапки (кнопка «Отборы» вверху — идем сверху вниз): оси вертикальным списком, как в десктопном сайдбаре */ display: block; position: fixed; left: 0; right: 0; top: 52px; bottom: auto; z-index: 25; /* ниже шапки (30): выезжает из-под нее, не поверх */ max-height: calc(100vh - 52px - 48px); overflow: auto; margin: 0; padding: 2px 6px 10px; background: var(--card); border-bottom: 2px solid var(--ink); /* вторая тень затемняет страницу под шторкой */ box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.35); animation: sheet-down 0.2s ease; } @keyframes sheet-down { from { transform: translateY(-100%); } } .page-main .filters.is-open .fgroup { display: block; padding: 11px 0; } .page-main .filters.is-open .fgroup__head { display: block; margin: 0 0 4px; } /* возвращаем строкам сайдбарный вид вместо мобильных тегов */ .page-main .filters.is-open .chips { display: block; } .page-main .filters.is-open .chip { display: block; width: 100%; text-align: left; border: none; border-radius: 0; padding: 8px 16px; } .page-main .filters.is-open .chip[aria-pressed="true"] { background: none; color: var(--ink); font-weight: 700; padding-right: 30px; } .page-main .filters.is-open .chip[aria-pressed="true"]::before { content: ""; /* мобильные теги гасят черту/крестик через content: none */ } .page-main .filters.is-open .chip[aria-pressed="true"]::after { content: "✕"; } /* кнопка-итог прилипает к низу шторки */ .page-main .filters.is-open .filters__apply { display: block; position: sticky; bottom: 0; width: 100%; margin: 8px 0 0; padding: 13px; background: var(--ink); color: var(--paper); border: none; font-family: var(--body); font-weight: 700; font-size: 14px; cursor: pointer; } /* вид как у веб-сброса (.reset), видна только когда есть выбранные чипы */ .page-main .filters.is-open:has(.chip[aria-pressed="true"]) .filters__reset { display: block; width: 100%; text-align: center; margin: 6px 0 2px; padding: 8px 0; } /* подвал на мобильном не показываем (как на контентных страницах) */ .page-main .foot { display: none; } .page-main { padding-bottom: 0; } /* Шрифт <16px заставляет iOS приближать страницу при фокусе на поле (и обратно не отдаляет) — держим у полей поиска ровно 16px */ .topbar__search input, .search input { font-size: 16px; } } /* по умолчанию (десктоп-сайдбар) кнопки сброса и «Показать» не нужны */ .filters__reset, .filters__apply { display: none; } /* Сводка активных отборов над доской — только мобильная главная */ .active-chips { display: none; } @media (max-width: 720px) { .active-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px clamp(16px, 3vw, 24px); border-bottom: 1px solid var(--line); } .active-chips[hidden] { display: none; } .active-chip { font-family: var(--body); font-size: 12px; font-weight: 600; padding: 4px 10px; background: var(--ink); color: var(--paper); border: none; box-shadow: inset 3px 0 0 var(--brand); cursor: pointer; } .active-chip span { opacity: 0.7; font-size: 10px; } } /* ── Путь (path.html) ─────────────────────── */ /* На пути карточки идут в одну колонку — это список-маршрут, не доска */ .path-page .cards { grid-template-columns: 1fr; } .path-page .card { border-right: none; } #path-stages { counter-reset: cat; /* ступени нумеруются как категории главной (01…) */ } /* Блок выбора роли — как группа отборов: мелкий заголовок + чипы */ .path-role { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 26px 0 24px; } /* Заголовок слева от чипов — как .graph-flabel в графе и схеме */ .path-role__head { font-family: var(--display); font-weight: 700; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: #999; margin: 0; } .path-tabs { display: flex; gap: 6px; flex-wrap: wrap; } /* Чипы роли — как в графе и схеме (.graph-filters .chip): мельче шрифт, на активном — фирменная черта слева */ .path-tab { font-family: var(--body); font-size: 12px; padding: 5px 11px; background: none; border: 1px solid var(--edge); border-radius: 2px; color: var(--ink-soft); cursor: pointer; } .path-tab:hover { background: var(--hover); } .path-tab[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 700; box-shadow: inset 3px 0 0 var(--brand); } .path-sum { font-size: 13px; color: var(--ink-soft); margin: 0 0 6px; } .path-sum b { color: var(--ink); } .path-sum button { margin-left: 10px; padding: 0; background: none; border: none; font-family: var(--body); font-size: 12px; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .path-sum button:hover { color: var(--ink); } .path-bar { height: 7px; border: 1.5px solid var(--ink); margin-bottom: 30px; } .path-bar i { display: block; height: 100%; background: var(--brand); /* освоено — тем же цветом, что отметки */ transition: width 0.2s ease; } /* Выбранная роль в прилепленной шапке — напоминание текстом, как «Путь» */ .path-role2 { flex: none; font-size: 13px; color: #999; } @media (max-width: 720px) { .path-role2 { display: none; /* чипы ролей и так в начале страницы */ } } /* Компактный дубль прогресса в прилепленной шапке */ .path-bar--top { flex: none; width: clamp(80px, 22vw, 220px); height: 6px; margin-bottom: 0; } /* На мобильном полоса прогресса в тексте не нужна — она всегда в шапке, а маршрут (ступени с карточками) идет от края до края, как доска главной. Чипы ролей — тумблером в одну строку, без заголовка «Роль» */ @media (max-width: 720px) { .path-page .path-bar { display: none; } .page.path-page { padding: 0; } .path-role, .path-sum { padding: 0 clamp(16px, 3vw, 24px); } .path-role { display: block; /* на мобильном — как было: тумблер во всю ширину */ margin: 16px 0 18px; } .path-role__head { display: none; } .path-tabs { flex-wrap: nowrap; gap: 0; } .path-tab { /* ширина по тексту + равная доля остатка: «администратор» не режется */ flex: 1 1 auto; padding: 7px 2px; font-size: clamp(10px, 3vw, 12px); white-space: nowrap; text-align: center; border-radius: 0; /* мобильный — сплошной тумблер, без скруглений */ } .path-tab:not(:first-child) { border-left: none; /* смежные рамки тумблера не двоим */ } .path-tab[aria-pressed="true"] { box-shadow: none; /* и без фирменной черты — тут это тумблер */ } } /* Строка-описание ступени — под липкой шапкой, не липнет */ .path-stage__desc { margin: 0; padding: 8px clamp(16px, 3vw, 24px); background: var(--card); border-bottom: 1px solid var(--card-line); font-size: 12px; color: var(--ink-soft); } .path-stage__desc + .subcat__head { margin-top: -1px; } /* Группа аналогов: «скобка» — левая линейка охватывает строку «На выбор» и все карточки группы; закрытый слот подкрашивается терракотом */ .path-choicegrp { border-left: 3px solid var(--edge); } .path-choicegrp.is-done { border-left-color: var(--brand); } .path-choice { margin: 0; padding: 6px clamp(16px, 3vw, 24px); background: var(--card); border-top: 1px solid var(--card-line); border-bottom: 1px solid var(--card-line); font-family: var(--display); font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: 2px; color: #999; } .cards + .path-choicegrp, .subcat__head + .path-choicegrp, .path-choicegrp + .cards { margin-top: -1px; } .path-choicegrp.is-done .path-choice::after { content: " — есть ✓"; color: var(--brand); } /* Чекбокс «знаю» — в углу карточки; отметка — терракотом (цвет знака) */ .path-card { position: relative; } .path-check { /* зона-«квадрат» во всю высоту правого края карточки — нажимать легко */ position: absolute; top: 0; right: 0; bottom: 0; width: 52px; display: grid; place-items: center; cursor: pointer; border-left: 1px solid var(--card-line); z-index: 1; } .path-check:hover { background: var(--hover); } .path-check input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .path-check__box { display: block; width: 18px; height: 18px; border: 1.5px solid var(--edge); background: var(--card); } .path-check:hover .path-check__box { border-color: var(--ink); } .path-check input:checked + .path-check__box { background: var(--brand); border-color: var(--brand); box-shadow: inset 0 0 0 3px var(--card); } .path-card .card__body { padding-right: 48px; /* текст не заезжает под зону чекбокса справа */ } /* Освоенное — приглушаем, чекбокс остается ярким */ .card.is-known .card__name, .card.is-known .card__desc { color: var(--ink-soft); } .card.is-known .card__media { filter: grayscale(1); opacity: 0.6; }