:root { --color-forest-ink: #1a3300; --color-highlighter-yellow: #ffe95c; --color-cream-paper: #fcfaf5; --color-pencil-gray: #b6b6b6; --color-whisper-gray: #f1f1f1; --color-sticky-note-teal: #a8e5e5; --color-sticky-note-mint: #d5f5c2; --color-sticky-note-blush: #f6d0ff; --color-terracotta: #cb5521; /* Токены вне исходной DESIGN.md-палитры: приглушённый текст (Whisper Gray не проходит WCAG AA как цвет текста, см. DECISIONS.md #1) и статус "ошибка" */ --color-muted-text: #5f5f5f; --color-error-bg: #fde3d3; --color-error-text: #7a2b0a; --font-display: 'Bricolage Grotesque', Archivo Black, ui-sans-serif, system-ui, sans-serif; --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --radius-sm: 3px; --radius-md: 6px; --radius-xl: 12px; --radius-2xl: 16px; --radius-full: 9999px; --shadow-subtle: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px; --shadow-subtle-2: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px; /* Текст на ярких плашках (пастельные стикеры, жёлтый маркер). Отдельный токен нужен потому, что в тёмной теме --color-forest-ink становится светлым, и светлый текст на светло-мятной плашке был бы нечитаем. */ --color-on-accent: #1a3300; --color-on-highlighter: #1a3300; } /* Тёмная тема. Переопределяем только токены — компоненты ниже написаны через них и меняются сами. Атрибут data-theme ставит инлайновый скрипт в ещё до первой отрисовки, поэтому вспышки светлой темы при перезагрузке нет. */ :root[data-theme="dark"] { --color-forest-ink: #e7eede; --color-cream-paper: #151a10; --color-pencil-gray: #3c4634; --color-whisper-gray: #222a1c; --color-muted-text: #9dab93; --color-sticky-note-teal: #1e4a4a; --color-sticky-note-mint: #2e4d20; --color-sticky-note-blush: #47294f; --color-error-bg: #4a1f0c; --color-error-text: #ffbb99; --color-on-accent: #eef4e7; --shadow-subtle: rgba(0, 0, 0, 0.4) 0px 1px 2px 0px; --shadow-subtle-2: rgba(0, 0, 0, 0.5) 0px 2px 6px 0px, rgba(0, 0, 0, 0.4) 0px 1px 2px -1px; } * { box-sizing: border-box; } /* --- Accessibility helpers --- */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 8px; top: -48px; background: var(--color-forest-ink); color: var(--color-cream-paper); padding: 10px 16px; border-radius: var(--radius-md); z-index: 100; text-decoration: none; transition: top 0.15s ease; } .skip-link:focus { top: 8px; } :focus-visible { outline: 3px solid var(--color-terracotta); outline-offset: 2px; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--color-terracotta); outline-offset: 2px; border-radius: var(--radius-sm); } body { margin: 0; font-family: var(--font-body); background: var(--color-cream-paper); color: var(--color-forest-ink); line-height: 1.5; font-size: 16px; /* Без этого Safari на iPhone сам «раздувает» кегль в альбомной ориентации, и вёрстка страниц для чтения расползается. */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } a { color: var(--color-forest-ink); } .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } h1, h2, h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: 0.03em; line-height: 1.1; margin: 0 0 16px; } h1 { font-size: 48px; } h2 { font-size: 32px; } h3 { font-size: 22px; letter-spacing: 0.01em; } .mark { background: var(--color-highlighter-yellow); color: var(--color-on-highlighter); padding: 0 6px; border-radius: 3px; } /* --- Nav --- */ .site-nav-wrap { position: sticky; top: 12px; z-index: 20; padding: 12px 16px 0; } .site-nav { position: relative; max-width: 1200px; margin: 0 auto; background: var(--color-cream-paper); border: 1px solid var(--color-pencil-gray); border-radius: var(--radius-2xl); padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; box-shadow: var(--shadow-subtle); flex-wrap: wrap; } .logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--font-body); font-weight: 700; font-size: 18px; color: var(--color-forest-ink); } .logo-mark { width: 42px; height: 34px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .logo-mark img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.4s ease; } .logo:hover .logo-mark img { transform: scale(1.08) rotate(-3deg); } .hero-heading { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; } .hero-heading h1 { margin: 0; } .hero-mark { display: block; width: auto; height: 60px; flex-shrink: 0; animation: hero-mark-float 4s ease-in-out infinite; } @keyframes hero-mark-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @media (prefers-reduced-motion: reduce) { .logo:hover .logo-mark img, .hero-mark { animation: none; transform: none; } } /* Шапка: три зоны — бренд слева, меню по центру, действия справа. Интерактив (бургер, раскрытие меню, тема) — в /assets/js/ui.js. */ .nav-collapse { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; } .nav-links { display: flex; align-items: center; justify-content: center; flex: 1; gap: 18px; font-weight: 500; font-size: 14px; } .nav-links a { text-decoration: none; } .nav-links a:hover { text-decoration: underline; } .nav-tools { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .theme-toggle, .nav-burger { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; background: none; border: 1px solid var(--color-pencil-gray); border-radius: var(--radius-md); color: var(--color-forest-ink); cursor: pointer; flex-shrink: 0; } .theme-toggle:hover, .nav-burger:hover { background: var(--color-whisper-gray); } /* Показываем ту иконку, которая означает результат нажатия, а не текущее состояние */ .theme-toggle .icon-moon { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: inline-block; } /* Бургер виден только на узких экранах (см. медиазапрос ниже) */ .nav-burger { display: none; } .nav-burger-bars, .nav-burger-bars::before, .nav-burger-bars::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.25s ease, background-color 0.2s ease; } .nav-burger-bars { position: relative; } .nav-burger-bars::before, .nav-burger-bars::after { content: ""; position: absolute; left: 0; } .nav-burger-bars::before { top: -6px; } .nav-burger-bars::after { top: 6px; } .nav-burger.is-open .nav-burger-bars { background: transparent; } .nav-burger.is-open .nav-burger-bars::before { transform: translateY(6px) rotate(45deg); } .nav-burger.is-open .nav-burger-bars::after { transform: translateY(-6px) rotate(-45deg); } .nav-dropdown { position: relative; } .nav-dropdown-toggle { display: inline-flex; align-items: center; gap: 8px; background: none; border: none; padding: 0; font: inherit; color: inherit; cursor: pointer; } .nav-dropdown-toggle:hover { text-decoration: underline; } .nav-dropdown-toggle::after { content: ""; width: 6px; height: 6px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.2s ease; } .nav-dropdown.is-open > .nav-dropdown-toggle::after { transform: translateY(1px) rotate(-135deg); } .nav-dropdown-panel { position: absolute; top: calc(100% + 12px); left: 0; z-index: 30; display: flex; flex-direction: column; min-width: 240px; background: var(--color-cream-paper); border: 1px solid var(--color-pencil-gray); border-radius: var(--radius-xl); padding: 8px; box-shadow: var(--shadow-subtle-2); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; } /* Перекрываем зазор между кнопкой и панелью, иначе курсор «проваливается» между ними и меню закрывается на полпути */ .nav-dropdown-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } .nav-dropdown.is-open > .nav-dropdown-panel { opacity: 1; visibility: visible; transform: none; } .nav-dropdown-panel a { padding: 8px 10px; border-radius: var(--radius-md); text-decoration: none; } .nav-dropdown-panel a:hover { background: var(--color-whisper-gray); text-decoration: none; } /* Панель, прижатая к правому краю (меню пользователя) — иначе уезжает за экран */ .nav-dropdown-panel-right { left: auto; right: 0; } /* «Разделы»: пункты в трёх смысловых колонках. Панель позиционируется по всей ширине .site-nav, а не по кнопке — иначе при средней ширине окна уезжает вправо. */ .nav-dropdown-sections { position: static; } .nav-dropdown-mega { flex-direction: row; gap: 4px; left: 0; right: 0; min-width: 0; } .nav-dropdown-group { display: flex; flex-direction: column; flex: 1; min-width: 0; } .nav-dropdown-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted-text); padding: 6px 10px 4px; } .nav-auth { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .nav-avatar { width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--color-highlighter-yellow); color: var(--color-on-highlighter); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; } .nav-user { font-size: 13px; font-weight: 500; } /* Кнопка «Выйти» внутри панели выглядит как остальные её пункты */ .nav-logout button { width: 100%; text-align: left; background: none; border: none; font: inherit; color: inherit; cursor: pointer; padding: 8px 10px; border-radius: var(--radius-md); } .nav-logout button:hover { background: var(--color-whisper-gray); } /* --- Buttons --- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: var(--radius-md); font-family: var(--font-body); font-weight: 500; font-size: 14px; padding: 10px 18px; text-decoration: none; cursor: pointer; border: 1px solid transparent; box-shadow: var(--shadow-subtle); } .btn-primary { background: var(--color-forest-ink); color: var(--color-cream-paper); } .btn-primary:hover { opacity: 0.9; } .btn-outline { background: transparent; border-color: var(--color-forest-ink); color: var(--color-forest-ink); box-shadow: none; } .btn-outline:hover { background: var(--color-whisper-gray); } .btn-mint { background: var(--color-sticky-note-mint); color: var(--color-on-accent); } .btn-teal { background: var(--color-sticky-note-teal); color: var(--color-on-accent); } .btn-blush { background: var(--color-sticky-note-blush); color: var(--color-on-accent); } .btn-sm { padding: 6px 12px; font-size: 13px; } .btn-danger { background: var(--color-terracotta); color: var(--color-cream-paper); } button.link-button { background: none; border: none; color: var(--color-forest-ink); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; } /* --- Layout / hero --- */ main.container { padding-top: 48px; padding-bottom: 80px; min-height: 60vh; } /* .home-sections — flex-контейнер верхнеуровневых блоков главной (hero / section-grid / how-it-works). Позволяет скину переставлять/скрывать блоки через order/display на тех же селекторах, не меняя разметку (см. SKINS.md). */ .home-sections { display: flex; flex-direction: column; } .hero { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 720px; margin: 0 auto 56px; } .how-it-works { margin-top: 72px; } .hero p { font-size: 18px; line-height: 1.5; } .badge { display: inline-flex; align-items: center; gap: 6px; background: var(--color-highlighter-yellow); color: var(--color-on-highlighter); font-size: 12px; font-weight: 500; padding: 5px 12px; border-radius: var(--radius-full); margin-bottom: 16px; } /* --- Section cards (three big buttons on home) --- */ .section-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } /* Плиточные карточки разделов: без цветной заливки — фон-бумага и бордер, с иконкой, заголовком, коротким описанием и кнопкой «Перейти в раздел». */ .section-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; height: 100%; background: var(--color-cream-paper); border: 1px solid var(--color-pencil-gray); border-radius: var(--radius-2xl); padding: 28px 24px; box-shadow: var(--shadow-subtle); transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } .section-card:hover { border-color: var(--color-forest-ink); box-shadow: var(--shadow-subtle-2); transform: translateY(-2px); } .section-card .icon { display: flex; color: var(--color-forest-ink); } .section-card-title { font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1.15; margin: 0; color: var(--color-forest-ink); } .section-card-desc { margin: 0; flex: 1; color: var(--color-muted-text); font-size: 15px; line-height: 1.55; } .section-card-btn { margin-top: 4px; } @media (prefers-reduced-motion: reduce) { .section-card { transition: none; } .section-card:hover { transform: none; } .event-cover img { transition: none; } .event-card:hover .event-cover img, .event-card:focus-visible .event-cover img { transform: none; } } /* --- How-it-works steps --- */ .steps-list { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 32px; } .steps-list li { display: flex; gap: 16px; align-items: flex-start; } .steps-index { flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--radius-full); background: var(--color-forest-ink); color: var(--color-cream-paper); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 15px; } .steps-list h3 { margin: 4px 0 6px; } .steps-list p { margin: 0; color: var(--color-muted-text); font-size: 15px; } /* --- Search box --- */ .search-box { display: flex; align-items: center; gap: 12px; margin: 20px 0 8px; flex-wrap: wrap; } .search-box input[type="search"] { padding: 10px 14px; border: 1px solid var(--color-pencil-gray); border-radius: var(--radius-md); font-size: 15px; font-family: var(--font-body); background: var(--color-cream-paper); width: 100%; max-width: 320px; } /* --- Card grid for events --- */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; margin-top: 24px; } /* --- Full-width list for news: карточки в один столбец на всю ширину контейнера --- */ .news-list { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; } .event-card { text-decoration: none; color: var(--color-forest-ink); border: 1px solid var(--color-pencil-gray); border-radius: var(--radius-xl); overflow: hidden; background: var(--color-cream-paper); box-shadow: var(--shadow-subtle); display: flex; flex-direction: column; } .event-cover { aspect-ratio: 1 / 1; background: linear-gradient(135deg, var(--color-sticky-note-mint), var(--color-sticky-note-teal)); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 15px; text-align: center; padding: 12px; color: var(--color-forest-ink); position: relative; overflow: hidden; } /* Картинка выведена из потока (position: absolute), и обложка держит квадрат при любой загруженной картинке. Пока картинка была обычным flex-элементом, aspect-ratio не спасал: высокая обложка (на проде была 1808×4000) распирала блок до 564px вместо 268 и тянула за собой по высоте всю строку карточек. */ .event-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s ease; } .event-card:hover .event-cover img, .event-card:focus-visible .event-cover img { transform: scale(1.05); } .event-body { padding: 16px; flex: 1; display: flex; flex-direction: column; gap: 6px; } .event-body h3 { margin: 0; font-size: 16px; } .event-dates { font-size: 13px; color: var(--color-muted-text); font-family: var(--font-mono); } /* --- Карточки экспертов (/experts, /admin/experts/applications/:id) --- */ .expert-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .expert-avatar { width: 72px; height: 72px; border-radius: var(--radius-full); overflow: hidden; background: var(--color-highlighter-yellow); color: var(--color-on-highlighter); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 28px; flex-shrink: 0; } .expert-avatar img { width: 100%; height: 100%; object-fit: cover; } .expert-name { margin: 0; font-size: 17px; } .expert-field { margin: 0; font-size: 14px; color: var(--color-muted-text); } .section-heading { display: flex; align-items: baseline; justify-content: space-between; margin-top: 56px; } /* --- Cards / panels --- */ .card { background: var(--color-cream-paper); border: 1px solid var(--color-pencil-gray); border-radius: var(--radius-xl); padding: 24px; box-shadow: var(--shadow-subtle); } .sticky-card { border-radius: var(--radius-xl); padding: 24px; border: 1px solid var(--color-forest-ink); } .sticky-card { color: var(--color-on-accent); } .sticky-card.mint { background: var(--color-sticky-note-mint); } .sticky-card.teal { background: var(--color-sticky-note-teal); } .sticky-card.blush { background: var(--color-sticky-note-blush); } /* --- Forms --- */ .form { display: flex; flex-direction: column; gap: 16px; } .form-row[hidden] { display: none; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form label { display: flex; flex-direction: column; gap: 6px; font-weight: 500; font-size: 14px; } .form input, .form select, .form textarea { padding: 10px 12px; border: 1px solid var(--color-pencil-gray); border-radius: var(--radius-md); font-size: 15px; font-family: var(--font-body); background: var(--color-cream-paper); } .form textarea { resize: vertical; min-height: 90px; } .form-section-title { font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted-text); margin-top: 8px; } /* --- Редактор текста (rich-editor-source textarea + JS-надстройка, ui.js initRichEditor) --- */ .rich-editor { border: 1px solid var(--color-pencil-gray); border-radius: var(--radius-md); background: var(--color-cream-paper); overflow: hidden; } .rich-editor-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--color-pencil-gray); background: var(--color-sticky-note-mint); } .rich-editor-btn { min-width: 30px; height: 30px; padding: 0 8px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--color-forest-ink); font-size: 13px; font-family: var(--font-body); cursor: pointer; } .rich-editor-btn:hover, .rich-editor-btn:focus-visible { border-color: var(--color-pencil-gray); background: var(--color-cream-paper); } .rich-editor-colors { display: flex; align-items: center; gap: 4px; margin-left: 4px; padding-left: 8px; border-left: 1px solid var(--color-pencil-gray); } .rich-editor-swatch { width: 18px; height: 18px; padding: 0; border: 1px solid var(--color-pencil-gray); border-radius: var(--radius-full); cursor: pointer; } .rich-editor-body { min-height: 160px; padding: 12px 14px; font-size: 15px; font-family: var(--font-body); line-height: 1.6; outline: none; } .rich-editor-body h2, .rich-editor-body h3 { margin: 0.6em 0 0.3em; } .rich-editor-body p { margin: 0 0 0.8em; } .rich-editor-body:focus-visible { box-shadow: inset 0 0 0 2px var(--color-terracotta); } /* --- Редактор позиций полей диплома/сертификата (drag-and-drop, ui.js initDiplomaTemplateEditor) --- */ /* Тарифы доступа к материалу/курсу: витрина на публичной странице (src/Views/pages/_purchase-options.php) и строки редактора в админке. */ .plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 12px; } .plan-card { display: flex; flex-direction: column; gap: 4px; } .plan-card h3 { margin: 0; font-size: 18px; } .plan-prices { margin: 8px 0 12px; } .plan-price { margin: 0; font-family: var(--font-display); font-size: 24px; font-weight: 800; } .plan-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: auto; } .plan-rows { display: flex; flex-direction: column; gap: 12px; } .plan-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 12px; align-items: end; } @media (max-width: 860px) { .plan-row { grid-template-columns: 1fr 1fr; } } /* Выбор ориентации листа над самим редактором позиций. */ .diploma-orientation { display: block; max-width: 460px; margin-bottom: 16px; } .diploma-orientation .hint { display: block; margin-top: 4px; } .diploma-template-editor { display: flex; gap: 20px; align-items: flex-start; } .diploma-template-canvas { position: relative; flex: 1; min-width: 0; border: 1px solid var(--color-pencil-gray); border-radius: var(--radius-md); overflow: hidden; background: var(--color-cream-paper); } .diploma-template-canvas img { display: block; width: 100%; height: auto; } .diploma-template-side { width: 240px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; } .diploma-template-palette { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px dashed var(--color-pencil-gray); border-radius: var(--radius-md); min-height: 120px; } .diploma-field-styler[hidden] { display: none; } .diploma-field-styler { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--color-pencil-gray); border-radius: var(--radius-md); background: var(--color-cream-paper); } .diploma-field-styler label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 500; } .diploma-field-styler input[type="number"] { padding: 6px 8px; border: 1px solid var(--color-pencil-gray); border-radius: var(--radius-sm); font-family: var(--font-body); background: var(--color-cream-paper); color: var(--color-forest-ink); } .diploma-field-styler input[type="color"] { width: 48px; height: 28px; padding: 0; border: 1px solid var(--color-pencil-gray); border-radius: var(--radius-sm); background: none; cursor: pointer; } .diploma-field-chip { padding: 6px 12px; border-radius: var(--radius-full); background: var(--color-highlighter-yellow); color: var(--color-forest-ink); font-size: 13px; font-weight: 600; cursor: grab; user-select: none; touch-action: none; white-space: nowrap; width: fit-content; } /* Размещённое поле — без «пилюли»: показывает реальный размер/цвет/жирность текста (живой предпросмотр), рамка появляется только при наведении/выборе. */ .diploma-field-chip.is-placed { position: absolute; transform: translate(-50%, -50%); background: transparent; padding: 2px 6px; border-radius: var(--radius-sm); border: 1px dashed transparent; } .diploma-field-chip.is-placed:hover, .diploma-field-chip.is-placed.is-selected { border-color: var(--color-terracotta); background: rgba(255, 255, 255, 0.55); } :root[data-theme="dark"] .diploma-field-chip.is-placed:hover, :root[data-theme="dark"] .diploma-field-chip.is-placed.is-selected { background: rgba(0, 0, 0, 0.45); } .diploma-field-chip.is-dragging { cursor: grabbing; opacity: 0.85; z-index: 10; } @media (max-width: 720px) { .diploma-template-editor { flex-direction: column; } .diploma-template-side { width: 100%; } .diploma-template-palette { flex-direction: row; flex-wrap: wrap; } } /* --- Вывод сохранённого rich-text HTML (без htmlspecialchars, см. HtmlSanitizer) --- */ .rich-text-content { font-size: 16px; line-height: 1.75; /* Содержимое пришло от редактора: там встречаются длинные ссылки и слова без пробелов, которые иначе распирают страницу и дают горизонтальную прокрутку. */ overflow-wrap: break-word; } .rich-text-content h2, .rich-text-content h3 { margin: 0.8em 0 0.4em; } .rich-text-content p { margin: 0 0 0.8em; } .rich-text-content a { color: var(--color-terracotta); } .rich-text-content img, .rich-text-content video, .rich-text-content iframe { max-width: 100%; height: auto; } /* Таблицы и блоки кода — единственное в сохранённом HTML, что не ужимается по ширине экрана. Прокручиваем их внутри себя, иначе прокрутку получает вся страница (на телефоне это ломает чтение полностью). */ .rich-text-content table { display: block; width: max-content; max-width: 100%; overflow-x: auto; border-collapse: collapse; } .rich-text-content pre { overflow-x: auto; } /* --- Личный кабинет: левое меню + разделы-вкладки (ui.js initDashboardTabs) --- */ .dashboard-layout { display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: start; } .dashboard-sidebar { background: var(--color-cream-paper); border: 1px solid var(--color-pencil-gray); border-radius: var(--radius-xl); padding: 16px; position: sticky; top: 90px; display: flex; flex-direction: column; gap: 4px; } .dashboard-sidebar a { display: block; padding: 8px 10px; border-radius: var(--radius-md); text-decoration: none; font-size: 14px; font-weight: 500; color: var(--color-forest-ink); } .dashboard-sidebar a:hover, .dashboard-sidebar a.active { background: var(--color-highlighter-yellow); color: var(--color-on-highlighter); } .dashboard-section { display: none; } .dashboard-section.is-active { display: block; } @media (max-width: 860px) { .dashboard-layout { grid-template-columns: 1fr; } .dashboard-sidebar { position: static; flex-direction: row; flex-wrap: wrap; } } .hint { font-size: 12px; color: var(--color-muted-text); font-weight: 400; } /* --- Alerts --- */ .alert { padding: 12px 16px; border-radius: var(--radius-md); margin: 0 0 16px; font-size: 14px; } .alert-error { background: var(--color-error-bg); color: var(--color-error-text); border: 1px solid var(--color-terracotta); } .alert-success { background: var(--color-sticky-note-mint); color: var(--color-on-accent); border: 1px solid var(--color-forest-ink); } /* --- Tables --- */ table.table { width: 100%; border-collapse: collapse; font-size: 14px; } table.table th, table.table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--color-whisper-gray); vertical-align: top; } table.table th { font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-muted-text); border-bottom: 1px solid var(--color-pencil-gray); } .table-wrap { overflow-x: auto; border: 1px solid var(--color-pencil-gray); border-radius: var(--radius-xl); background: var(--color-cream-paper); } .table-wrap table.table { border: none; } .pill { display: inline-block; padding: 3px 10px; border-radius: var(--radius-full); font-size: 12px; font-weight: 500; } .pill-active { background: var(--color-sticky-note-mint); color: var(--color-on-accent); } .pill-completed { background: var(--color-whisper-gray); } .pill-place { background: var(--color-highlighter-yellow); color: var(--color-on-highlighter); font-family: var(--font-mono); } /* --- Admin layout --- */ .admin-layout { display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: start; } .admin-sidebar { background: var(--color-cream-paper); border: 1px solid var(--color-pencil-gray); border-radius: var(--radius-xl); padding: 16px; position: sticky; top: 90px; } .admin-sidebar a { display: block; padding: 8px 10px; border-radius: var(--radius-md); text-decoration: none; font-size: 14px; font-weight: 500; color: var(--color-forest-ink); margin-bottom: 4px; } .admin-sidebar a:hover, .admin-sidebar a.active { background: var(--color-highlighter-yellow); color: var(--color-on-highlighter); } /* min-width: 0 обязателен: у grid-элемента минимальная ширина по умолчанию определяется содержимым, поэтому широкая таблица (заявки, пользователи) растягивала колонку и вместе с ней всю страницу — вместо того чтобы прокручиваться внутри своего .table-wrap. */ .admin-content { min-width: 0; } .admin-content h1 { font-size: 32px; overflow-wrap: break-word; } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 32px; } .stat-card { background: var(--color-cream-paper); border: 1px solid var(--color-pencil-gray); border-radius: var(--radius-xl); padding: 18px; } .stat-card .value { font-family: var(--font-display); font-size: 32px; font-weight: 800; } .stat-card .label { font-size: 13px; color: var(--color-muted-text); } .toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 12px; } .nomination-row { display: flex; gap: 8px; align-items: center; } .checkbox-list { display: flex; flex-wrap: wrap; gap: 10px; } .checkbox-list label { flex-direction: row; align-items: center; gap: 6px; border: 1px solid var(--color-pencil-gray); border-radius: var(--radius-full); padding: 6px 12px; font-weight: 400; font-size: 13px; } /* --- Footer --- */ .site-footer { border-top: 1px solid var(--color-pencil-gray); padding: 48px 0 24px; font-size: 13px; color: var(--color-muted-text); margin-top: 64px; } .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; text-align: left; padding-bottom: 24px; } .footer-grid h3 { font-size: 14px; color: var(--color-forest-ink); margin: 0 0 12px; text-transform: uppercase; letter-spacing: 0.03em; } .footer-grid p, .footer-grid a { display: block; margin: 0 0 6px; color: var(--color-muted-text); text-decoration: none; } .footer-grid a:hover { text-decoration: underline; } .footer-legal { font-size: 12px; line-height: 1.6; } .footer-legal p { margin: 0 0 10px; } .footer-copyright { text-align: center; margin-top: 16px; } /* --- Страницы для чтения: статьи, материалы, правовые документы --- Ширина — как у шапки сайта (просьба пользователя 2026-08-11): раньше карточка была 760px и заметно у́же всего остального на странице. Выравнивание сделано тем же приёмом, что и .hero в скине: отрицательные поля гасят боковой padding .container (24px) до отступа шапки. У шапки .site-nav-wrap padding 16px и .site-nav max-width 1200 — на широком экране это ровно те же 1200px. НЕ использовать 100vw: он считается вместе с шириной вертикального скроллбара и даёт горизонтальную прокрутку. */ .legal-page { max-width: none; margin-left: -24px; margin-right: -24px; } /* Пока контейнер уже 1200px, гасить нужно не весь padding, а до отступа шапки. */ @media (max-width: 1231px) { .legal-page { margin-left: -8px; margin-right: -8px; } } .legal-page h2 { font-size: 20px; margin: 32px 0 12px; } .legal-page p, .legal-page li { font-size: 16px; line-height: 1.7; } .legal-page ul { padding-left: 22px; } .legal-page li { margin-bottom: 6px; } /* Режим чтения на телефоне (iPhone/Android, любой стандартный браузер). На 380–420px два вложенных отступа (контейнер 24 + карточка 24) съедали четверть ширины экрана, и текст шёл колонкой ~280px. Отступы ужимаем, а кегль наоборот увеличиваем: с руки читают крупнее, чем с монитора. */ @media (max-width: 560px) { .legal-page { padding: 18px 16px; } .legal-page h1 { font-size: 26px; } .legal-page h2 { font-size: 19px; margin: 24px 0 10px; } .legal-page p, .legal-page li, .rich-text-content, .library-material-body { font-size: 17px; line-height: 1.75; } /* Дата и счётчик просмотров в строку не помещаются — ставим друг под друга. */ .library-material-meta, .news-meta { flex-direction: column; gap: 6px; } } /* --- Виды свидетельств: карусель (картинка слева, описание справа) --- */ .certificate-carousel { margin-top: 24px; padding: 0; overflow: hidden; } .certificate-carousel-track { position: relative; } .certificate-carousel-slide { display: none; grid-template-columns: minmax(0, 360px) 1fr; gap: 32px; align-items: center; padding: 32px; } .certificate-carousel-slide.is-active { display: grid; } .certificate-carousel-image { display: block; width: 100%; padding: 0; border: none; background: none; cursor: zoom-in; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-subtle-2); } .certificate-carousel-image img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.2s ease; } .certificate-carousel-image:hover img, .certificate-carousel-image:focus-visible img { transform: scale(1.03); } .certificate-carousel-info h2 { margin-top: 0; } .certificate-carousel-info p { font-size: 15px; line-height: 1.7; white-space: pre-line; } .certificate-carousel-controls { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 0 24px 24px; } .certificate-carousel-prev, .certificate-carousel-next { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-full); border: 1px solid var(--color-pencil-gray); background: var(--color-cream-paper); color: var(--color-forest-ink); font-size: 20px; line-height: 1; cursor: pointer; } .certificate-carousel-prev:hover, .certificate-carousel-next:hover { border-color: var(--color-terracotta); color: var(--color-terracotta); } .certificate-carousel-dots { display: flex; gap: 8px; } .certificate-carousel-dot { width: 9px; height: 9px; padding: 0; border: none; border-radius: var(--radius-full); background: var(--color-pencil-gray); cursor: pointer; } .certificate-carousel-dot.is-active { background: var(--color-terracotta); } .lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 32px; background: rgba(0, 0, 0, 0.75); } .lightbox[hidden] { display: none; } .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius-md); box-shadow: var(--shadow-subtle-2); } .lightbox-close { position: absolute; top: 20px; right: 24px; width: 40px; height: 40px; border: none; border-radius: var(--radius-full); background: var(--color-cream-paper); color: var(--color-forest-ink); font-size: 22px; line-height: 1; cursor: pointer; } @media (max-width: 720px) { .certificate-carousel-slide { grid-template-columns: 1fr; padding: 20px; gap: 20px; } } /* --- Виды свидетельств: карточки (картинка сверху, заголовок, описание) --- */ .certificate-type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; margin-top: 24px; } .certificate-type-card { display: flex; flex-direction: column; gap: 16px; } .certificate-type-image { display: block; width: 100%; padding: 0; border: none; background: none; cursor: zoom-in; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-subtle-2); } .certificate-type-image img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.2s ease; } .certificate-type-image:hover img, .certificate-type-image:focus-visible img { transform: scale(1.03); } .certificate-type-info h2 { margin-top: 0; font-size: 18px; } .certificate-type-info p { font-size: 15px; line-height: 1.7; white-space: pre-line; } /* --- Библиотека: подразделы слева, список материалов справа --- */ .library-layout { display: grid; grid-template-columns: 240px 1fr; gap: 32px; align-items: start; margin-top: 24px; } .library-sidebar { display: flex; flex-direction: column; gap: 2px; background: var(--color-cream-paper); border: 1px solid var(--color-pencil-gray); border-radius: var(--radius-xl); padding: 16px; position: sticky; top: 90px; } .library-sidebar a { display: block; padding: 8px 10px; border-radius: var(--radius-md); text-decoration: none; font-size: 14px; font-weight: 500; color: var(--color-forest-ink); } .library-sidebar a:hover, .library-sidebar a.active { background: var(--color-highlighter-yellow); color: var(--color-on-highlighter); } .library-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .library-list-item { padding: 14px 16px; border: 1px solid var(--color-pencil-gray); border-radius: var(--radius-md); background: var(--color-cream-paper); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; } .library-list-item a { font-weight: 600; color: var(--color-forest-ink); } /* --- Маркетплейс «Обучающие материалы» (/learning-materials) --- */ .materials-filters { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin: 24px 0; } .materials-categories { display: flex; flex-wrap: wrap; gap: 8px; } .materials-categories a { text-decoration: none; } .materials-sort select { padding: 8px 12px; border: 1px solid var(--color-pencil-gray); border-radius: var(--radius-md); font-family: var(--font-body); font-size: 14px; background: var(--color-cream-paper); color: var(--color-forest-ink); } .material-card .event-body { gap: 8px; } .material-summary { margin: 0; } .material-meta { margin-top: auto; padding-top: 8px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .material-price { color: var(--color-terracotta); } .material-stats { white-space: nowrap; } .material-purchase-options { display: flex; gap: 24px; flex-wrap: wrap; } .material-purchase-options form, .material-purchase-options > div { flex: 1 1 220px; min-width: 220px; } /* Карточка материала: заголовок, карусель, содержимое и покупка — единая ширина. Была 760px; теперь, как и остальные страницы для чтения, идёт по ширине шапки (см. .legal-page). Отрицательные поля здесь задаёт сама обёртка, а у вложенных карточек они гасятся — иначе они торчали бы за её края. */ .material-page-content { max-width: none; margin-left: -24px; margin-right: -24px; } .material-page-content .legal-page { margin-left: 0; margin-right: 0; } @media (max-width: 1231px) { .material-page-content { margin-left: -8px; margin-right: -8px; } } /* Карусель материала без текстовой колонки (только фото) — картинка на всю ширину блока, высота фиксированная (не растёт с шириной), обрезка через object-fit — полный кадр всё равно доступен через лайтбокс по клику. */ .certificate-carousel-slide.is-image-only { grid-template-columns: 1fr; } .certificate-carousel-slide.is-image-only .certificate-carousel-image img { aspect-ratio: unset; height: 320px; } /* --- Советы психолога: ссылки на статьи слева, карточка (картинка + описание) справа --- */ .psych-tips-layout { display: grid; grid-template-columns: 1fr minmax(240px, 320px); gap: 32px; align-items: start; margin-top: 24px; } .psych-tips-list { display: flex; flex-direction: column; gap: 12px; } .psych-tips-list-item { text-decoration: none; color: inherit; } .psych-tips-card { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 12px; } .psych-tips-card-image { display: block; width: 100%; height: auto; border-radius: var(--radius-xl); } @media (max-width: 900px) { .psych-tips-layout { grid-template-columns: 1fr; } .psych-tips-card { position: static; } } /* --- Сборник: карточка страницы слева, архив выпусков (свёрнутый по годам) справа --- */ .collection-layout { display: grid; grid-template-columns: 1fr minmax(280px, 360px); gap: 32px; align-items: start; margin-top: 24px; } .collection-card { display: flex; flex-direction: column; gap: 12px; } .collection-card-image { display: block; width: 100%; height: auto; border-radius: var(--radius-xl); } .collection-archive { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 8px; } .collection-archive-year { border: 1px solid var(--color-pencil-gray); border-radius: var(--radius-md); padding: 4px 12px; } .collection-archive-year summary { cursor: pointer; padding: 8px 0; font-weight: 600; list-style: revert; } .collection-archive-list { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 12px 4px; margin: 0; list-style: none; } .collection-archive-list a { color: var(--color-forest-ink); text-decoration: underline; } @media (max-width: 900px) { .collection-layout { grid-template-columns: 1fr; } .collection-archive { position: static; } } /* --- Грант: карточка страницы (картинка + текст, как у «Сборника») --- */ .grant-card { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; } .grant-card-image { display: block; width: 100%; max-width: 420px; height: auto; border-radius: var(--radius-xl); } /* --- Публичный профиль (/profile/:id) --- */ .profile-page-card { max-width: 480px; margin-top: 24px; } /* --- Модальное окно подтверждения (native , например «Участвовать» на /grant) --- */ .confirm-dialog { max-width: 440px; width: calc(100% - 48px); border: 1px solid var(--color-pencil-gray); border-radius: var(--radius-xl); padding: 24px; background: var(--color-cream-paper); color: var(--color-forest-ink); box-shadow: var(--shadow-subtle-2); font-family: var(--font-body); } .confirm-dialog::backdrop { background: rgba(0, 0, 0, 0.75); } .confirm-dialog h3 { margin-top: 0; } .confirm-dialog form { margin-top: 16px; } .pagination { display: flex; align-items: center; gap: 16px; margin-top: 24px; } .library-material-meta, .news-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 8px 0 20px; } .library-material-body { font-size: 16px; line-height: 1.75; white-space: pre-line; } /* Заглушка защиты от копирования для неавторизованных (см. постановку пользователя) */ .copy-guard-notice { position: fixed; left: 50%; bottom: 32px; transform: translate(-50%, 12px); background: var(--color-forest-ink); color: var(--color-cream-paper); padding: 12px 20px; border-radius: var(--radius-md); font-size: 14px; font-weight: 600; box-shadow: var(--shadow-subtle-2); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; z-index: 100; } .copy-guard-notice.is-visible { opacity: 1; transform: translate(-50%, 0); } @media (prefers-reduced-motion: reduce) { .copy-guard-notice { transition: none; } .certificate-carousel-image img { transition: none; } .certificate-type-image img { transition: none; } } /* --- Responsive --- */ @media (max-width: 900px) { .section-grid { grid-template-columns: 1fr; } .steps-list { grid-template-columns: 1fr; } .admin-layout { grid-template-columns: 1fr; } .admin-sidebar { position: static; } .library-layout { grid-template-columns: 1fr; } .library-sidebar { position: static; flex-direction: row; flex-wrap: wrap; } .form-row { grid-template-columns: 1fr; } h1 { font-size: 34px; } .hero-mark { height: 42px; } } /* Ниже ~860px верхний ряд перестаёт помещаться — сворачиваем навигацию под бургер. Класс .is-open ставит /assets/js/ui.js. */ @media (max-width: 860px) { .nav-burger { display: inline-flex; } .nav-collapse { display: none; order: 3; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 4px; padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--color-pencil-gray); } .nav-collapse.is-open { display: flex; } .nav-links { flex-direction: column; align-items: stretch; justify-content: flex-start; flex: none; gap: 2px; } .nav-links > a, .nav-dropdown-toggle { padding: 9px 10px; border-radius: var(--radius-md); } .nav-dropdown-toggle { width: 100%; justify-content: space-between; } .nav-auth { gap: 8px; margin-top: 8px; } /* Выпадающие панели раскрываются в потоке, а не поверх содержимого */ .nav-dropdown-panel { position: static; display: none; opacity: 1; visibility: visible; transform: none; box-shadow: none; margin-top: 4px; min-width: 0; border-radius: var(--radius-md); } .nav-dropdown.is-open > .nav-dropdown-panel { display: flex; } .nav-dropdown-panel::before { display: none; } .nav-dropdown-mega { flex-direction: column; min-width: 0; } .nav-dropdown-panel-right { right: auto; } } @media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; gap: 24px; } } /* --- Кошелёк, промокоды, оплата (баллы) --- */ .wallet-card { max-width: 640px; margin: 24px 0 28px; border-left: 4px solid var(--color-terracotta); } .wallet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 12px; } .wallet-label { display: block; font-size: 0.85rem; color: var(--color-muted-text); text-transform: uppercase; letter-spacing: 0.04em; } .wallet-balance { display: block; font-family: var(--font-display); font-size: 2rem; line-height: 1.1; margin-top: 2px; } .wallet-unit { font-size: 1rem; font-weight: 400; color: var(--color-muted-text); } .wallet-redeem { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 4px; } .wallet-redeem input[type="text"] { flex: 1; min-width: 220px; } .wallet-history { margin-top: 12px; } .wallet-history summary { cursor: pointer; font-weight: 600; padding: 6px 0; } .txn-plus { color: #2e7d32; font-weight: 600; } .txn-minus { color: var(--color-terracotta); font-weight: 600; } :root[data-theme="dark"] .txn-plus { color: #86d98a; } /* Чекбокс-строка (настройки, флаги функционала). Селектор с .form нужен, чтобы перебить `.form label { flex-direction: column }` — иначе чекбокс встаёт над подписью, а не слева от неё. */ .checkbox-row, .form .checkbox-row { display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; } .checkbox-row input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--color-terracotta); } /* Строки итогов в оформлении оплаты */ .checkout-line { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 6px 0; border-bottom: 1px dashed var(--color-pencil-gray); margin: 0; } .checkout-total { border-bottom: none; border-top: 2px solid var(--color-forest-ink); margin-top: 8px; padding-top: 12px; font-size: 1.15rem; } .event-fee { background: var(--color-sticky-note-teal); color: var(--color-on-accent); padding: 12px 16px; border-radius: var(--radius-md); margin: 16px 0; } .nav-balance { font-size: 0.9rem; color: var(--color-terracotta) !important; border-bottom: 1px solid var(--color-pencil-gray); margin-bottom: 4px; padding-bottom: 8px; } .nav-balance strong { color: var(--color-forest-ink); } /* --- Вложения новостей --- */ .news-attachments { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--color-pencil-gray); } .news-attachments h2 { font-size: 18px; margin: 0 0 12px; } .attach-download-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .attach-download-list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .attach-download-list a { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; text-decoration: none; color: var(--color-forest-ink); } .attach-download-list a:hover { text-decoration: underline; } .attach-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--radius-full); background: var(--color-sticky-note-mint); color: var(--color-on-accent); font-weight: 700; flex-shrink: 0; } .attach-list .checkbox-row a { color: var(--color-forest-ink); } /* «Разделы»: закреплённая панель во втором ряду шапки — всегда развёрнута и выглядит точно так же, как раскрытое меню: три равные колонки (заголовок группы + вертикальный список ссылок). Внутри липкой .site-nav-wrap, поэтому фиксируется при скролле. Раскладка повторяет .nav-dropdown-mega / .nav-dropdown-group. */ .site-subnav { max-width: 1200px; margin: 8px auto 0; background: var(--color-cream-paper); border: 1px solid var(--color-pencil-gray); border-radius: var(--radius-2xl); padding: 12px 16px; display: flex; gap: 4px; box-shadow: var(--shadow-subtle); font-size: 14px; } .site-subnav-group { display: flex; flex-direction: column; flex: 1; min-width: 0; } .site-subnav-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted-text); padding: 6px 10px 4px; } .site-subnav-links { display: flex; flex-direction: column; } .site-subnav-links a { padding: 8px 10px; border-radius: var(--radius-md); text-decoration: none; } .site-subnav-links a:hover { background: var(--color-whisper-gray); text-decoration: none; } @media (max-width: 860px) { /* LAYOUT-002: на мобильном «Разделы» больше не развёрнуты постоянно — скрыты, пока не открыт бургер (тот же класс .is-open, что ставит /assets/js/ui.js на #nav-collapse, см. initBurger). */ .site-subnav { display: none; flex-direction: column; gap: 8px; } .site-subnav.is-open { display: flex; } } /* --- Админка: скины --- */ .skin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } .skin-card { display: flex; flex-direction: column; gap: 8px; } .skin-card-active { border-color: var(--color-terracotta); box-shadow: var(--shadow-subtle-2); } .skin-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .skin-card-head h2 { margin: 0; font-size: 20px; } .skin-card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; } /* --- Мессенджер --- */ .messenger-list { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--color-pencil-gray); border-radius: var(--radius-xl); overflow: hidden; background: var(--color-cream-paper); } .messenger-list-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: var(--color-forest-ink); text-decoration: none; border-bottom: 1px solid var(--color-whisper-gray); } .messenger-list-item:last-child { border-bottom: none; } .messenger-list-item:hover, .messenger-list-item.is-unread { background: var(--color-whisper-gray); } .messenger-avatar { flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--color-sticky-note-mint); color: var(--color-on-accent); display: flex; align-items: center; justify-content: center; font-weight: 700; overflow: hidden; } .messenger-avatar img { width: 100%; height: 100%; object-fit: cover; } .messenger-list-item-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .messenger-list-item-name { font-weight: 600; } .messenger-list-item-meta { font-size: 12px; color: var(--color-muted-text); } .messenger-unread-badge { background: var(--color-terracotta); color: #fff; } .messenger-thread-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; } .messenger-thread-head h1 { margin: 0; } .messenger-thread { display: flex; flex-direction: column; gap: 16px; height: 60vh; min-height: 360px; } .messenger-messages { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; } .messenger-message { display: flex; flex-direction: column; max-width: 75%; } .messenger-message.is-own { align-self: flex-end; align-items: flex-end; } .messenger-message.is-other { align-self: flex-start; align-items: flex-start; } .messenger-message-bubble { padding: 8px 12px; border-radius: var(--radius-xl); font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; } .messenger-message.is-own .messenger-message-bubble { background: var(--color-sticky-note-mint); color: var(--color-on-accent); } .messenger-message.is-other .messenger-message-bubble { background: var(--color-whisper-gray); } .messenger-message-time { font-size: 11px; color: var(--color-muted-text); margin-top: 2px; } .messenger-message-report { font-size: 11px; margin-top: 2px; } .messenger-message-report summary { color: var(--color-muted-text); cursor: pointer; width: fit-content; } .messenger-message-report form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; max-width: 280px; } .messenger-message-report textarea { padding: 6px 8px; border: 1px solid var(--color-pencil-gray); border-radius: var(--radius-md); font-family: var(--font-body); font-size: 13px; resize: vertical; background: var(--color-cream-paper); color: var(--color-forest-ink); } .messenger-composer { display: flex; gap: 10px; align-items: flex-end; border-top: 1px solid var(--color-pencil-gray); padding-top: 12px; } .messenger-composer-input { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; } .messenger-composer textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--color-pencil-gray); border-radius: var(--radius-md); font-family: var(--font-body); font-size: 14px; resize: vertical; background: var(--color-cream-paper); color: var(--color-forest-ink); } .messenger-attach-label { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--color-pencil-gray); border-radius: var(--radius-full); font-size: 20px; line-height: 1; color: var(--color-forest-ink); cursor: pointer; flex: 0 0 auto; } .messenger-attach-label:hover { background: var(--color-whisper-gray); } .messenger-attachment { margin-top: 6px; } .messenger-attachment-image { max-width: 220px; max-height: 220px; border-radius: var(--radius-md); display: block; } .messenger-attachment-file { display: inline-block; padding: 6px 10px; border-radius: var(--radius-md); background: var(--color-whisper-gray); color: var(--color-forest-ink); font-size: 13px; text-decoration: underline; } .messenger-message-sender { font-size: 12px; font-weight: 600; color: var(--color-muted-text); margin-bottom: 2px; } /* Поиск участников группы (messenger.js initMemberSearch) */ .messenger-search-results { list-style: none; margin: -8px 0 0; padding: 4px; border: 1px solid var(--color-pencil-gray); border-radius: var(--radius-md); background: var(--color-cream-paper); box-shadow: var(--shadow-subtle-2); max-height: 220px; overflow-y: auto; } .messenger-search-results li { padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; } .messenger-search-results li:hover, .messenger-search-results li:focus { background: var(--color-whisper-gray); outline: none; } .messenger-member-chips { display: flex; flex-wrap: wrap; gap: 8px; } .messenger-member-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 12px; border-radius: var(--radius-full); background: var(--color-sticky-note-mint); color: var(--color-on-accent); font-size: 13px; } .messenger-member-chip-remove { border: none; background: transparent; color: inherit; cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 4px; } /* Вебинары: сетка видео-тайлов на странице подключения (src/Views/webinars/join.php) */ .webinar-video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 16px 0; min-height: 60px; } .webinar-tile { width: 100%; max-height: 260px; object-fit: cover; border-radius: var(--radius-md); background: var(--color-forest-ink); box-shadow: var(--shadow-subtle-2); } .webinar-controls { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; } /* PWA: плашка «Установить приложение» (public/assets/js/pwa.js) и переключатель push-уведомлений в личном кабинете. Плашку рисует JS — в разметке её нет. Пока плашка показана, JS выставляет body { --install-banner-space: <высота> }, а body резервирует под неё нижний отступ — иначе на мобильном она перекрывает заголовок/поля формы внизу экрана (LAYOUT-001). */ :root { --install-banner-space: 0px; } body { padding-bottom: var(--install-banner-space); transition: padding-bottom 0.2s ease; } @media (prefers-reduced-motion: reduce) { body { transition: none; } } .install-banner { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; background: var(--color-cream-paper); border: 1px solid var(--color-pencil-gray); border-radius: var(--radius-xl); box-shadow: var(--shadow-subtle-2); } .install-banner-text { margin: 0; flex: 1 1 240px; font-size: 0.95rem; } .install-banner-actions { display: flex; gap: 8px; flex-shrink: 0; } @media (min-width: 861px) { /* На десктопе плашка не должна растягиваться во всю ширину экрана. */ .install-banner { left: auto; max-width: 30rem; } } /* Уведомления — отдельный блок внутри карточки профиля, а не продолжение формы: без разделителя заголовок липнет к кнопке «Сохранить профиль». */ .push-settings-block { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--color-pencil-gray); } .push-settings-block h3 { margin-top: 0; } .push-settings { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .push-settings-status { margin: 0; color: var(--color-muted-text); font-size: 0.9rem; flex: 1 1 220px; } /* Страница «Мобильное приложение» (/app). Общий вертикальный ритм задаётся одним контейнером, а не margin'ами у карточек: тогда расстояние между колонками Android/iOS и между ними и карточкой «Уведомления» одинаковое — и на десктопе, и когда колонки схлопываются в одну на телефоне. */ .app-cards { display: flex; flex-direction: column; gap: 24px; margin: 24px 0; } .app-install-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; } .app-install-actions { display: flex; gap: 8px; flex-wrap: wrap; } .app-steps { margin: 12px 0; padding-left: 22px; } .app-steps li { margin-bottom: 6px; } /* «Виды свидетельств»: кнопка перехода в раздел под описанием карточки. */ .certificate-type-action { margin: 16px 0 0; } /* Вкладки внутри страницы «Настройки» (src/Views/admin/_settings_tabs.php). Всё, что настраивает сам сайт, живёт здесь, а не отдельными пунктами левого меню админки — иначе оно разрасталось до двух десятков строк. */ .admin-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 24px; padding-bottom: 8px; border-bottom: 1px solid var(--color-pencil-gray); } .admin-tabs a { padding: 8px 14px; border-radius: var(--radius-md); color: var(--color-muted-text); text-decoration: none; font-size: 0.95rem; white-space: nowrap; } .admin-tabs a:hover { background: var(--color-whisper-gray); color: var(--color-forest-ink); } .admin-tabs a.active { background: var(--color-highlighter-yellow); color: var(--color-on-highlighter); font-weight: 600; } /* Профиль в личном кабинете: режим просмотра (данные только для чтения) и кнопки формы правки. Правка открывается ссылкой ?edit=profile. */ .profile-view { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 20px; } .profile-avatar { width: 96px; height: 96px; object-fit: cover; border-radius: var(--radius-full); border: 1px solid var(--color-pencil-gray); flex-shrink: 0; } .profile-fields { display: grid; grid-template-columns: minmax(140px, auto) 1fr; gap: 8px 20px; margin: 0; flex: 1 1 320px; } .profile-fields dt { color: var(--color-muted-text); font-size: 0.9rem; } .profile-fields dd { margin: 0; } @media (max-width: 560px) { /* На узком экране двухколоночный список подписей нечитаем — разворачиваем. */ .profile-fields { grid-template-columns: 1fr; gap: 2px; } .profile-fields dd { margin-bottom: 10px; } } .form-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } /* Модерация заявок (src/Views/admin/events/submissions.php): ожидающие решения показаны карточками, а не таблицей — в таблице из десяти колонок кнопки «Принять»/«Отклонить» уезжали за горизонтальную прокрутку. */ .moderation-list { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; } .moderation-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .moderation-card-head h3 { margin: 0 0 4px; font-size: 18px; } .moderation-card-files { display: flex; gap: 8px; flex-wrap: wrap; } .moderation-fields { margin: 16px 0; } .moderation-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; padding-top: 12px; border-top: 1px solid var(--color-pencil-gray); } .moderation-reject { display: flex; gap: 6px; flex: 1 1 320px; } .moderation-reject input { min-width: 0; flex: 1; } /* Кнопки справа от заголовка раздела кабинета (например, «Сообщества» и «Создать группу» в разделе «Сообщения»). */ .section-heading-actions { display: flex; gap: 8px; flex-wrap: wrap; }