/* pages.css — MyNUC.ru shared stylesheet for sub-pages
*
* ВАЖНО: с v=14 (2026-05-17) дизайн-система вынесена в общий файл
* /css/mynuc-shared.css. Он подключается ПЕРВЫМ через @import — оттуда
* приходят:
* • CSS-токены палитры (:root + [data-theme="dark"])
* • Класс .island и его потомки (.island-title, .island-input, …)
* • Mobile responsive правила (768/640/480)
* • Touch-friendly адаптация (hover отключён на тач-устройствах)
*
* pages.css наследует токены и добавляет sub-page-specific стили
* (топбар, шапка, page-foot, register-формы и т.п.). При коллизии —
* правила pages.css перекрывают shared, потому что подключены позже.
*
* map-portal и admin-panel подключают тот же mynuc-shared.css через
* в app/layout.tsx — единый источник правды без дублирования.
*/
/* Относительный путь — работает и через HTTP (продакшен) и через file:// (локальный
просмотр). Раньше был абсолютный '/css/...' — на file:// уходил в корень диска,
файл не загружался, все правки shared.css были невидимы. Юзер 2026-06-01:
«на разных браузерах вообще без изменений». */
@import url('css/mynuc-shared.css?v=86');
/* ── Magistral C — основной шрифт экосистемы (взят из Mega).
Юзер 2026-06-01: «меняем все шрифты как на меге». 4 веса (400 Regular,
500 Medium, 700 Bold, 900 Black). Файлы локально в /fonts/. */
@font-face {
font-family: 'Magistral C';
src: url('/fonts/MagistralC-Regular.ttf') format('truetype');
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Magistral C';
src: url('/fonts/MagistralC-Medium.ttf') format('truetype');
font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Magistral C';
src: url('/fonts/MagistralC-Bold.ttf') format('truetype');
font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Magistral C';
src: url('/fonts/MagistralC-Black.ttf') format('truetype');
font-weight: 900; font-style: normal; font-display: swap;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Глобальный шрифт всего сайта — Magistral C (как в Mega). Fallback
на системный Segoe UI (Windows) → system-ui → sans-serif.
Letter-spacing 0.03em — юзер 2026-06-01: «текст сливается, как в логотипе
увеличиваем меж-буквенное расстояние с 0 до 0,3». Magistral C имеет
плотные глифы — небольшое разрежение даёт читаемость. */
html, body, input, button, select, textarea {
font-family: 'Magistral C', 'Segoe UI', system-ui, sans-serif;
letter-spacing: 0.04em;
}
:root {
--a: #0b4a8f;
--bg: #f8fafc;
--sur: #ffffff;
--t1: #0a0d14;
--t2: #5c6474;
--t3: #9399a6;
--brd: #e2e8f0;
--brdm: rgba(0,0,0,.12);
--shadow-card: 0 1px 3px rgba(0,0,0,.05);
--tint-weak: rgba(0,0,0,.018);
--tint-blue: rgba(11,74,143,.04);
--tint-blue2: rgba(11,74,143,.03);
--tint-blue3: rgba(11,74,143,.025);
--brd-blue: rgba(11,74,143,.12);
--brd-blue2: rgba(11,74,143,.1);
--tt-bg: rgba(8,10,20,.82);
}
/* ── ТЁМНАЯ ТЕМА ── */
[data-theme="dark"] {
/* Юзер 2026-06-04: «опять серый» — старая dark-палитра (#c4d4ed/#8ea4c5)
нечитаема. Переходим на Mega-палитру + читаемые тексты. Это ГЛОБАЛЬНО
чинит все var(--t2)/var(--t3) элементы разом (philosophy, principle,
module-desc и т.д.). pages.css загружается ПОСЛЕ shared.css (@import),
поэтому именно здесь источник правды для dark-переменных. */
--bg: #0b1f42; /* Mega --c-bg (был #0d1117 — почти чёрный) */
--sur: #11274f; /* Mega --c-surface (был #161b22 — серый) */
--t1: #f5f9ff; /* ярко-белый Mega --c-ink (был #e6edf3) */
--t2: #c4d4ed; /* светло-голубой Mega --c-ink-2 (был #c4d4ed серый) */
--t3: #8ea4c5; /* читаемый Mega --c-ink-3 (был #8ea4c5 невидим) */
--brd: #264471; /* navy-tint (был #21262d — почти-чёрный на navy) */
--brdm: rgba(63, 138, 255, .22); /* navy-tint бордер инпутов (был белёсый) */
--shadow-card: 0 1px 3px rgba(0,0,0,.35);
--tint-weak: rgba(255,255,255,.03);
--tint-blue: rgba(11,74,143,.10);
--tint-blue2: rgba(11,74,143,.08);
--tint-blue3: rgba(11,74,143,.07);
--brd-blue: rgba(11,74,143,.22);
--brd-blue2: rgba(11,74,143,.18);
--tt-bg: rgba(230,237,243,.9);
}
html, body {
min-height: 100%;
font-family: 'Magistral C', 'Segoe UI', system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
color: var(--t1);
transition: background-color .25s ease, color .2s ease;
}
/* Фирменная клетка-сетка УДАЛЕНА (юзер 2026-06-04): фирменный стиль теперь —
СИНЯЯ ПОДЛОЖКА + анимированные кольца (body::after в mynuc-shared.css).
html bg + прозрачный body оставлены — кольца рисуются поверх, без сетки. */
html { background-color: var(--bg); }
body { background-color: transparent; }
/* ── TOPBAR (LOCKED — единый стиль шапки всей экосистемы) ──
Backdrop-blur + СИНЯЯ ОКАНТОВКА border-bottom (LOCKED по фидбеку юзера:
«бар без окантовки смотреться некрасиво»). Цвет окантовки — наш
фирменный #0b4a8f с opacity .18 — заметная но не криклявая.
z-index: 100 — над контентом и ниже модалок. Sticky top.
Высота 54px зафиксирована во ВСЕЙ экосистеме (CLAUDE.md LOCKED). */
.topbar {
background: rgba(248, 250, 252, 0.78);
-webkit-backdrop-filter: blur(14px) saturate(1.3);
backdrop-filter: blur(14px) saturate(1.3);
border-bottom: 1px solid rgba(11, 74, 143, .18);
box-shadow: 0 1px 0 0 rgba(11, 74, 143, .04); /* лёгкий accent-glow под border */
height: 54px;
padding: 0 24px;
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
top: 0;
z-index: 100;
transition: background .25s ease, border-color .25s ease;
}
[data-theme="dark"] .topbar {
background: rgba(11, 31, 66, 0.78);
border-bottom-color: rgba(11, 74, 143, .25);
box-shadow: 0 1px 0 0 rgba(11, 74, 143, .08);
}
/* Logo */
.logo-link {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
transition: filter .25s ease;
}
.logo-link:hover {
filter: drop-shadow(0 0 4px rgba(11,74,143,.65)) drop-shadow(0 0 12px rgba(11,74,143,.3));
}
.logo-text {
font-size: 15px;
font-weight: 400;
color: var(--t1);
letter-spacing: -.01em;
}
.logo-text b { font-weight: 600; color: var(--t1); }
.logo-text span { color: var(--a); }
/* ── Brand logo classes (shared with webmail) — LOCKED ── */
.c-word { font-size: 40px; font-weight: 200; letter-spacing: 0; line-height: 1; font-family: 'Magistral C', 'Segoe UI', system-ui, sans-serif; } /* Magistral C — буквы шире Inter, letter-spacing убрали в 0 (раньше было -0.048em — буквы налезали) */
.c-word b { font-weight: 700; }
.sh {
/* Юзер 2026-06-05: вернуть переливание словознака как в бэкапе 31.05 — яркий
9-стоп #0035cc→#0057ff→#0095ff→#00d0ff→#c8eeff (cyan-пик, «переливается на 100%»).
2026-06-02 был приглушён до #08376b…#3f8aff (боялись слияния на белом) — юзер отменил. */
background: linear-gradient(90deg, #0035cc 0%, #0057ff 16%, #0095ff 32%, #00d0ff 46%, #c8eeff 51%, #00d0ff 56%, #0095ff 68%, #0057ff 84%, #0035cc 100%);
background-size: 260% 100%;
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
animation: shimmer 12s linear infinite;
}
@keyframes shimmer { 0% { background-position: 160% center; } 100% { background-position: -160% center; } }
/* Dark-тема: словознак на тёмном navy — СВЕТЛЫЕ переливающиеся тона (тёмные края
#0035cc сливались). Юзер 2026-06-05: «в тёмной теме хрень полная». Те же стопы, светлее. */
[data-theme="dark"] .sh,
[data-theme="dark"] .lux-ru,
[data-theme="dark"] .lux-word {
background: linear-gradient(90deg, #1a6fff 0%, #3f8aff 16%, #5ab0ff 32%, #8fd4ff 46%, #c8eeff 51%, #8fd4ff 56%, #5ab0ff 68%, #3f8aff 84%, #1a6fff 100%);
background-size: 260% 100%;
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
/* ═══════════════════════════════════════════════════════════════════════
BRAND .ru АНИМАЦИЯ — крутится + разбрасывает цифровые коды на hover.
Юзер 2026-06-04: «как в Аксель-К и Меге». Структура (JS-обёртка):
MyNUC.ru
10…
═══════════════════════════════════════════════════════════════════════ */
.lux-ru {
display: inline-block;
position: relative;
transform-origin: 50% 55%;
transition: transform 1.0s cubic-bezier(.4, 0, .2, 1); /* вращение .ru, плавно без отскока */
/* ВАЖНО: .lux-ru — inline-block → теряет background-clip: text родителя
.sh и наследует text-fill-color: transparent (.ru становится невидим).
Даём СВОЙ shimmer-gradient идентичный .sh чтобы .ru снова виден. */
background: linear-gradient(90deg, #0035cc 0%, #0057ff 16%, #0095ff 32%, #00d0ff 46%, #c8eeff 51%, #00d0ff 56%, #0095ff 68%, #0057ff 84%, #0035cc 100%);
background-size: 260% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: shimmer 12s linear infinite;
}
/* Hover на логотип → .ru крутится на 360° */
.sh:hover .lux-ru,
.c-word:hover .lux-ru,
.logo-link:hover .lux-ru,
a:hover > .sh .lux-ru {
transform: rotate(360deg);
}
/* Цифровые коды (0/1) — контейнер в центре .ru, разлетаются на hover */
.lux-ru-codes {
position: absolute;
left: 50%; top: 50%;
width: 0; height: 0;
pointer-events: none;
}
.lux-ru-codes i {
position: absolute;
left: 0; top: 0;
width: 13px; height: 13px;
color: #1565d8; /* SVG stroke = currentColor — насыщенный фирменный синий */
opacity: 0;
transform: translate(-50%, -50%);
filter: drop-shadow(0 0 4px rgba(21, 101, 216, .5));
}
.lux-ru-codes i svg { display: block; width: 100%; height: 100%; }
[data-theme="dark"] .lux-ru-codes i {
color: #6cb4ff; /* ярче и чище на тёмном фоне */
filter: drop-shadow(0 0 5px rgba(108, 180, 255, .8));
}
/* 8 кодов — разные направления разлёта */
.lux-ru-codes i:nth-child(1) { --dx: 18px; --dy: -16px; }
.lux-ru-codes i:nth-child(2) { --dx: 24px; --dy: -2px; }
.lux-ru-codes i:nth-child(3) { --dx: 19px; --dy: 15px; }
.lux-ru-codes i:nth-child(4) { --dx: 4px; --dy: 22px; }
.lux-ru-codes i:nth-child(5) { --dx: -14px; --dy: 17px; }
.lux-ru-codes i:nth-child(6) { --dx: -20px; --dy: 2px; }
.lux-ru-codes i:nth-child(7) { --dx: -12px; --dy: -18px; }
.lux-ru-codes i:nth-child(8) { --dx: 6px; --dy: -24px; }
.sh:hover .lux-ru-codes i,
.c-word:hover .lux-ru-codes i,
.logo-link:hover .lux-ru-codes i,
a:hover > .sh .lux-ru-codes i {
animation: luxRuBurst 1.6s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes luxRuBurst {
0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
25% { opacity: 1; transform: translate(calc(-50% + var(--dx) * .5), calc(-50% + var(--dy) * .5)) scale(1.1); }
100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.7); }
}
/* Hover на логотип → лёгкий подъём + свечение wordmark (движение) */
.logo-link, .lw {
transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
}
.logo-link:hover, .lw:hover {
transform: translateY(-3px);
}
.sh:hover, .c-word:hover {
text-shadow: 0 0 16px rgba(26, 111, 255, .4);
}
/* «MyNUC» текст двигается (hop+grow) + бейдж-hex двигается (scale+наклон) — как домик/«Мега» в Mege */
.lux-word {
display: inline-block;
transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); /* быстрый заметный hop */
/* inline-block теряет background-clip родителя .sh → даём свой shimmer, иначе «MyNUC» прозрачный */
background: linear-gradient(90deg, #0035cc 0%, #0057ff 16%, #0095ff 32%, #00d0ff 46%, #c8eeff 51%, #00d0ff 56%, #0095ff 68%, #0057ff 84%, #0035cc 100%);
background-size: 260% 100%;
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
animation: shimmer 12s linear infinite;
}
.sh:hover .lux-word, .c-word:hover .lux-word, .logo-link:hover .lux-word, a:hover > .sh .lux-word { transform: translateY(-5px) scale(1.08); }
.logo-link svg, .lw svg { transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); transform-origin: 50% 55%; }
/* бейдж: hover по тексту .sh тоже срабатывает — .sh внутри .logo-link → .logo-link:hover истинно */
.logo-link:hover svg, .lw:hover svg { transform: scale(1.18) rotate(-5deg); }
@media (prefers-reduced-motion: reduce) {
.lux-ru, .lux-ru-codes i, .lux-word, .logo-link svg { animation: none !important; transition: none !important; }
.sh:hover .lux-ru, .c-word:hover .lux-ru, .sh:hover .lux-word, .c-word:hover .lux-word, .logo-link:hover .lux-word, .logo-link:hover svg { transform: none; }
}
@keyframes neonBreathe {
0%,100% { filter: drop-shadow(0 0 5px rgba(0,87,255,.55)) drop-shadow(0 0 16px rgba(0,87,255,.28)); }
50% { filter: drop-shadow(0 0 11px rgba(0,100,255,.82)) drop-shadow(0 0 32px rgba(0,87,255,.5)) drop-shadow(0 0 70px rgba(0,160,255,.2)); }
}
/* Section suffix: "MyNUC.ru · 2FA", "· О проекте", "· Документация" …
* Kills the shimmer gradient (`.sh`) specifically on this span so the
* suffix stays a solid dark label (not an animated blue blob).
*
* Colour: --t1 (dark on light, light on dark) → "Mail" / "2FA" reads
* as confident near-black. The bullet `::before` is muted --t3 so it
* acts as a quiet separator. Font-weight inherits from .c-word's 200
* — same lightness the original "Mail" label had. */
/* Brand-suffix — типографика приведена к стилю .ib (Войти/Регистрация).
Юзер 2026-05-20: «сделать таким же симпатичным как Войти». Это даёт
единый язык в шапке: и бренд-suffix, и кнопки используют Inter 500/13px,
нормальный letter-spacing. Отличие от .sh-логотипа MyNUC.ru намеренное —
suffix это «текущий раздел», visually отделён от бренд-имени. */
.sh .brand-suffix,
.sh .brand-suffix::before {
/* Жёсткий сброс shimmer-gradient наследуемого от родителя .sh —
иначе синий gradient «прозрачно» просвечивает через текст suffix
и создаёт визуальный «синий ореол» на буквах. Юзер 2026-05-20:
«убери эти баги». Все 4 свойства с !important чтобы перебить
inline-style на .sh (background, animation) и cascade от parent. */
background: none !important;
background-image: none !important;
background-color: transparent !important;
-webkit-background-clip: border-box !important;
background-clip: border-box !important;
animation: none !important;
text-shadow: none !important;
filter: none !important;
}
.sh .brand-suffix {
/* Серый var(--t2) #5c6474 — приглушённый, не доминирует над логотипом.
Тонкий regular-вес (400) и 12px. Юзер 2026-05-20: «исправь на наш
серый» — не чёрный (var(--t1) был слишком тёмный). */
-webkit-text-fill-color: var(--t2) !important;
color: var(--t2) !important;
margin-left: 8px;
font-family: 'Magistral C', 'Segoe UI', system-ui, sans-serif !important;
font-size: 12px !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
line-height: 1 !important;
}
.sh .brand-suffix::before {
content: '· ';
/* Точка-разделитель — в цвет с текстом suffix (var(--t2) серый).
Юзер 2026-05-20: «точка должна быть тоже в цвет». */
-webkit-text-fill-color: var(--t2) !important;
color: var(--t2) !important;
opacity: 1 !important;
margin-right: 2px !important;
font-weight: 400 !important;
}
/* Topbar right group */
.topbar-right { display: flex; align-items: center; gap: 6px; }
/* Header tools — общий контейнер для группы иконок-утилит в шапке.
Используется как на главной (.hdr-tools), так и на sub-страницах
(повторяет ту же геометрию). Единый источник правды — здесь. */
.hdr-tools {
display: flex;
align-items: center;
gap: 4px;
margin-left: auto;
}
/* Вертикальный разделитель между группами (утилиты | действия). */
.hdr-sep {
width: 1px;
height: 20px;
background: var(--brdm);
margin: 0 4px;
flex-shrink: 0;
}
/* ═══════════════════════════════════════════════════════
ICON BUTTONS — shared across landing + sub-pages + webmail
─────────────────────────────────────────────────────────
Single source of truth for the header action icons:
shield, music, theme, mail, back-button.
Design (revised Apr 2026 based on feedback):
• Rectangle 34×34 (accessibility-friendly tap target)
• border-radius 8px — the same radius as message cards,
search field, action toolbar. Feels part of the family.
• transparent background by default — icon sits visually
on the header, not in a blue bubble. On hover fills
with subtle accent tint + icon deepens to accent blue.
• stroke-width 1.8 — Linear/Raycast/Arc modern weight.
• Rich per-icon hover cues (.k-shield pulses, .k-mail
dips, .k-theme rotates) for a little personality.
═══════════════════════════════════════════════════════ */
.icon-btn {
height: 34px;
min-width: 34px;
padding: 0 8px;
border: 1px solid transparent; /* placeholder под hover-border 1px — изящная толщина */
border-radius: 8px;
background: transparent;
color: var(--t2);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
cursor: pointer;
text-decoration: none;
font-family: inherit;
font-size: 13px;
font-weight: 500;
white-space: nowrap;
transition: background .18s ease, color .18s ease, border-color .18s ease, transform .2s ease;
flex-shrink: 0;
}
/* HOVER ЭТАЛОН шапки — компактный outlined-стиль для маленьких 34px
кнопок (.icon-btn / .ib / .theme-btn / .pg-snd). Юзер 2026-05-20:
«цвет окантовки как у Войти в систему — rgba(11,74,143,.38), это
изящный полупрозрачный синий который на белом блендится светлее,
на тёмном слегка ярче». Применяется ко всем кнопкам всего проекта
(для крупных hero — .btn-primary тоже использует .38 в idle).
Без box-shadow (не выходит за рамки на 34px кнопке). */
.icon-btn:hover {
background: rgba(11, 74, 143, .06);
color: #0b4a8f;
border-color: rgba(11, 74, 143, .38);
transform: translateY(-1px);
}
.icon-btn:active { transform: translateY(0) scale(.98); }
.icon-btn svg {
width: 16px;
height: 16px;
stroke-width: 1.8;
transition: transform .3s ease;
flex-shrink: 0;
}
/* Shield — постоянная «дышащая» анимация (не только hover). По аналогии
с замком на странице восстановления пароля. Каждые 4 с svg увеличивается
на 6% и обрастает мягким синим glow-ом — сигнал «защита активна».
Это ЕДИНСТВЕННАЯ оставленная индивидуальная анимация (семантический
индикатор статуса 2FA). Остальные иконки правого бара (mail, theme,
music) приведены к единому эталону без собственных «жизней». */
.icon-btn.k-shield svg { animation: shield-breathe 4s ease-in-out infinite; }
@keyframes shield-breathe {
0%, 100% {
transform: scale(1);
filter: drop-shadow(0 0 0 rgba(11,74,143,0));
}
50% {
transform: scale(1.06);
filter: drop-shadow(0 0 4px rgba(11,74,143,.55))
drop-shadow(0 0 10px rgba(11,74,143,.25));
}
}
/* ── Видимость shield-иконки в шапке (LOCKED 2026-05-21 v2) ────────
Юзер: «пока мы не в системе под учётной записи он присутствует на
страницах, а как вошли под учётной записью он скрывается». Гость
видит shield на ВСЕХ страницах. Authed скрывает — статус 2FA уже
отображается в UserDropdown (pill «В системе · 2FA активна» +
пункт «Профиль и 2FA»).
header.js добавляет `body.ds-authed` при успешной авторизации. */
body.ds-authed .icon-btn.k-shield {
display: none !important;
}
/* ── Touch-устройства: подавляем :hover-эффекты (LOCKED 2026-05-21) ──
Юзер: «на мобильной версии при тапе на кнопку выполняется действие
и кнопка не зависает». На touch-устройствах :hover остаётся
активным после tap (нет mouseout) → кнопка «застревает» в hover-
состоянии: видна окантовка + tooltip. Не нужно — на touch есть
:active (мгновенный feedback) который и без того срабатывает.
`@media (hover: none)` — устройства БЕЗ hover (touch screens).
`@media (hover: hover)` (mouse/trackpad) — наоборот, оставляем hover.
Применяется ко всем интерактивным элементам шапки + hero CTA
+ dropdown options + tooltips на ВСЕХ страницах проекта. */
@media (hover: none) {
.icon-btn:hover,
.ib:hover,
.theme-btn:hover,
.pg-snd:hover,
.back-btn:hover,
.reg-opt:hover,
.btn-primary:hover,
.btn-ghost:hover,
.user-dd-trigger:hover,
.user-dd-link:hover,
.user-dd-logout:hover {
background: transparent !important;
background-color: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
transform: none !important;
}
/* color сохраняем idle — без принудительного transparent */
.icon-btn:hover,
.theme-btn:hover,
.pg-snd:hover,
.back-btn:hover {
color: var(--t2) !important;
}
.ib:hover {
color: var(--t2) !important;
}
/* Tooltips на touch — никогда не показываем (тап = «hover» = tooltip
которая «застряла» — для touch юзер не понимает зачем она) */
[data-tip]:hover::after,
[data-tip]::after {
opacity: 0 !important;
display: none !important;
pointer-events: none !important;
}
/* SVG-вращения внутри кнопок — сброс на touch */
.theme-btn:hover svg,
.icon-btn:hover svg,
.pg-snd:hover svg {
transform: none !important;
animation: none;
}
/* .reg-opt — на touch без translateX лифта */
.reg-opt:hover .reg-opt-icon {
background: rgba(11, 74, 143, .08) !important;
}
}
/* ── Native