/* === СБРОС И ИЗОЛЯЦИЯ ОТ TILDA === */
#nn-app,
#nn-app *,
#nn-app *::before,
#nn-app *::after {
all: unset;
display: revert;
box-sizing: border-box;
}
#nn-app {
--app-bg: #F8FAFC;
--app-bg-rgb: 248, 250, 252;
--app-card: #FFFFFF;
--app-card-hover: #F3F4F6;
--app-border: #E2E8F0;
--app-text: #0F172A;
--app-text-muted: #4B5563;
--app-text-light: #6B7280;
--app-primary: #055397;
--app-primary-dark: #044070;
--app-primary-light: #E8F0F7;
--app-primary-lighter: #F0F5FA;
--app-deadline: #B57F00;
--app-deadline-bg: #FFF9E6;
--app-radius: 8px;
--app-shadow: 0 1px 3px rgba(0,0,0,0.08);
--app-transition: all 0.2s ease;
--forum-blue: #5BA3D0;
--decade-blue: #6495ED;
display: block;
max-width: 1200px;
margin: 0 auto !important;
padding: 0 24px !important;
font-family: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
color: var(--app-text);
background: var(--app-bg);
line-height: 1.5;
font-weight: 500;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@media (prefers-color-scheme: dark) {
#nn-app {
--app-bg: #0B1120;
--app-bg-rgb: 11, 17, 32;
--app-card: #1E293B;
--app-card-hover: #334155;
--app-border: #334155;
--app-text: #F8FAFC;
--app-text-muted: #94A3B8;
--app-primary: #5BA3D0;
--app-primary-dark: #4A8FB8;
--app-primary-light: #1E3A4D;
}
}
#nn-app a {
color: var(--app-primary);
text-decoration: none;
cursor: pointer;
}
#nn-app a:hover {
text-decoration: underline;
}
#nn-app button {
cursor: pointer;
}
#nn-app .ext-link {
font-size: 10px;
opacity: 0.7;
margin-left: 2px;
}
/* ========== ХЕДЕР ========== */
#nn-app .nn-sticky-header { position: relative; width: 100%; z-index: 1000; }
#nn-app .nn-header-top {
background: linear-gradient(135deg, var(--app-primary) 0%, var(--app-primary-dark) 100%);
color: #fff;
padding: 12px 24px;
border-radius: 20px 20px 0 0;
}
#nn-app .nn-header-top-inner {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
gap: 14px;
}
#nn-app .nn-header-title {
font-size: 18px;
font-weight: 800;
letter-spacing: -0.5px;
white-space: nowrap;
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
color: #fff;
}
#nn-app .nn-logo-nn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: #fff;
border-radius: 6px;
font-weight: 800;
font-size: 16px;
color: var(--app-primary);
}
#nn-app .nn-header-text {
font-size: 18px;
font-weight: 800;
color: #fff;
letter-spacing: -0.3px;
}
#nn-app .nn-header-year {
color: #fff;
font-size: 18px;
font-weight: 800;
}
#nn-app .nn-metrics {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
margin-left: auto;
}
#nn-app .nn-metric {
display: flex;
align-items: center;
gap: 4px;
font-size: 11px;
cursor: default;
opacity: 0.95;
transition: var(--app-transition);
white-space: nowrap;
background: rgba(255,255,255,0.15);
padding: 4px 8px;
border-radius: 6px;
color: #fff;
}
#nn-app .nn-metric-icon { font-size: 12px; }
#nn-app .nn-metric-num { font-weight: 700; }
#nn-app .nn-metric-label { color: rgba(255,255,255,0.9); }
/* ========== НАВИГАЦИЯ (STICKY) ========== */
#nn-app .nn-header-bottom {
position: sticky;
top: 0;
width: 100%;
background: rgba(var(--app-bg-rgb), 0.9);
border-bottom: 1px solid var(--app-border);
padding: 8px 0;
z-index: 999;
border-radius: 0 0 20px 20px;
transition: box-shadow 0.2s, background 0.2s;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
#nn-app .nn-header-bottom.fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
background: rgba(var(--app-bg-rgb), 0.95);
border-radius: 0;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
z-index: 1001;
max-width: 100%;
margin: 0 auto;
}
#nn-app .nn-header-bottom.fixed .nn-header-bottom-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
#nn-app .nn-header-bottom-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
display: flex;
gap: 8px;
flex-wrap: nowrap;
justify-content: center;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
#nn-app .nn-header-bottom-inner::-webkit-scrollbar { display: none; }
#nn-app .nn-toc-link {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 18px;
background: transparent;
color: var(--app-text-muted) !important;
border-radius: 40px;
font-size: 13px;
font-weight: 600;
text-decoration: none !important;
transition: all 0.2s;
white-space: nowrap;
border: 1px solid transparent;
cursor: pointer;
}
#nn-app .nn-toc-link:hover {
background: var(--app-primary);
color: #ffffff !important;
border-color: var(--app-primary-dark);
}
#nn-app .nn-toc-link.active {
background: var(--app-primary);
color: #ffffff !important;
box-shadow: 0 4px 8px rgba(5,83,151,0.15);
}
#nn-app .nn-toc-link .nn-nav-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
font-size: 14px;
}
/* ========== ПАНЕЛЬ ПОИСКА ========== */
#nn-app .nn-controls-sticky {
position: relative;
z-index: 900;
background: rgba(255,255,255,0.85);
padding: 12px 0;
margin: 0 0 16px;
border-bottom: 1px solid var(--app-border);
}
@media (prefers-color-scheme: dark) {
#nn-app .nn-controls-sticky { background: rgba(var(--app-bg-rgb), 0.85); }
}
#nn-app .nn-search-controls-row {
display: flex;
flex-direction: row;
align-items: center;
gap: 12px;
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
#nn-app .nn-search-box {
flex: 1;
min-width: 200px;
position: relative;
background: var(--app-card);
border: 1px solid var(--app-border);
border-radius: 40px;
padding: 8px 16px;
display: flex;
align-items: center;
gap: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.03);
transition: var(--app-transition);
}
#nn-app .nn-search-box:focus-within {
border-color: var(--app-primary);
box-shadow: 0 4px 12px rgba(5,83,151,0.1);
}
#nn-app .nn-search-box input {
flex: 1;
border: none;
background: transparent;
outline: none;
font-size: 14px;
color: var(--app-text);
padding-right: 8px;
}
#nn-app .nn-search-box input::placeholder { color: var(--app-text-light); }
#nn-app .nn-controls-group {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
}
#nn-app .nn-reset-btn {
padding: 8px 16px;
background: var(--app-card);
border: 1px solid var(--app-border);
border-radius: 40px;
font-size: 13px;
color: var(--app-text-muted);
font-weight: 500;
cursor: pointer;
white-space: nowrap;
transition: var(--app-transition);
}
#nn-app .nn-reset-btn:hover {
background: var(--app-primary);
color: #fff;
border-color: var(--app-primary);
}
#nn-app .nn-mode-toggle {
display: flex;
gap: 2px;
background: var(--app-primary-lighter);
padding: 3px;
border-radius: 40px;
border: 1px solid var(--app-border);
}
#nn-app .nn-mode-btn {
flex: 1;
padding: 6px 16px;
border-radius: 40px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
border: none;
background: transparent;
color: var(--app-text);
transition: var(--app-transition);
white-space: nowrap;
}
#nn-app .nn-mode-btn.active {
background: var(--app-card);
color: var(--app-primary);
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
font-weight: 600;
}
#nn-app .nn-filter-open-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
background: var(--app-primary);
color: white;
border: none;
border-radius: 40px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
box-shadow: 0 2px 6px rgba(5,83,151,0.15);
}
#nn-app .nn-filter-open-btn span { font-size: 16px; }
/* ========== ПОПАП ФИЛЬТРОВ (ИСПРАВЛЕНО) ========== */
#nn-app .nn-filter-popup-overlay {
display: none;
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0,0,0,0.5);
backdrop-filter: blur(4px);
z-index: 10000;
opacity: 0;
transition: opacity 0.3s;
visibility: hidden;
pointer-events: none;
}
#nn-app .nn-filter-popup-overlay.visible {
opacity: 1;
display: block;
visibility: visible;
pointer-events: auto;
}
#nn-app .nn-filter-popup {
display: none;
position: fixed;
top: 10vh; left: 50%;
transform: translateX(-50%) translateY(20px);
width: 90%; max-width: 500px;
max-height: 80vh;
background: var(--app-card);
border-radius: 24px;
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
z-index: 10001;
opacity: 0;
transition: all 0.3s cubic-bezier(0.2,0.9,0.1,1);
overflow: hidden;
display: flex;
flex-direction: column;
visibility: hidden;
pointer-events: none;
}
#nn-app .nn-filter-popup.visible {
opacity: 1;
transform: translateX(-50%) translateY(0);
display: flex;
visibility: visible;
pointer-events: auto;
}
@media (max-width: 768px) {
#nn-app .nn-filter-popup {
top: auto; bottom: 0; left: 0; transform: translateY(100%);
width: 100%; max-width: 100%; border-radius: 24px 24px 0 0;
}
#nn-app .nn-filter-popup.visible { transform: translateY(0); }
}
#nn-app .nn-filter-popup-header {
display: flex; justify-content: space-between; align-items: center;
padding: 1.2rem 1.5rem; border-bottom: 1px solid var(--app-border);
}
#nn-app .nn-filter-popup-header h3 {
margin: 0;
font-size: 1.3rem;
font-weight: 700;
color: var(--app-primary);
}
#nn-app .nn-filter-popup-close {
width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--app-border);
background: transparent; font-size: 1.2rem; cursor: pointer;
display: flex; align-items: center; justify-content: center; color: var(--app-text);
}
#nn-app .nn-filter-popup-body { flex: 1; overflow-y: auto; padding: 1rem 1.5rem; }
#nn-app .nn-filter-section { margin-bottom: 1.5rem; }
#nn-app .nn-filter-section-title {
font-size: 1rem; font-weight: 700; color: var(--app-primary);
margin-bottom: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px;
}
#nn-app .nn-filter-options { display: flex; flex-wrap: wrap; gap: 0.5rem; }
#nn-app .nn-filter-option-btn {
background: var(--app-primary-lighter); border: 1px solid var(--app-border);
border-radius: 40px; padding: 0.5rem 1rem; font-size: 0.85rem; font-weight: 500;
color: var(--app-text); cursor: pointer; transition: 0.2s; white-space: nowrap;
}
#nn-app .nn-filter-option-btn.active {
background: var(--app-primary); color: white; border-color: var(--app-primary);
}
#nn-app .nn-filter-popup-actions {
display: flex; gap: 1rem; padding: 1rem 1.5rem; border-top: 1px solid var(--app-border);
}
#nn-app .nn-filter-popup-btn {
flex: 1; padding: 0.8rem; border-radius: 40px; font-weight: 600; font-size: 1rem;
cursor: pointer; border: none; transition: 0.2s;
}
#nn-app .nn-filter-popup-btn.primary { background: var(--app-primary); color: white; }
#nn-app .nn-filter-popup-btn.secondary {
background: transparent; border: 1px solid var(--app-border); color: var(--app-text-muted);
}
/* ========== ОБЩИЕ СТИЛИ РАЗДЕЛОВ ========== */
#nn-app .nn-section { margin: 2rem 0; }
#nn-app .nn-section-title {
font-size: 1.8rem; font-weight: 800; color: var(--app-primary);
background: var(--app-card); border: 1px solid var(--app-border);
padding: 0.6rem 1.2rem; border-radius: 60px; display: inline-flex;
align-items: center; gap: 0.6rem; margin: 2rem 0 1.5rem; cursor: default;
box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}
#nn-app .nn-section-logo {
width: 36px; height: 36px; background: var(--app-primary-light);
border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
font-size: 1.4rem; color: var(--app-primary);
}
/* ========== ФОНОВЫЕ ГРАДИЕНТЫ ========== */
#nn-app .nn-section-path {
background: linear-gradient(135deg, rgba(91,163,208,0.05) 0%, rgba(100,149,237,0.02) 100%);
border-radius: 2rem; padding: 0.5rem 1rem 1rem; margin-bottom: 1.5rem; overflow: visible;
}
#nn-app .nn-section-events {
background: linear-gradient(135deg, rgba(5,83,151,0.03) 0%, rgba(91,163,208,0.06) 100%);
border-radius: 2rem; padding: 1rem; margin: 1.5rem 0;
}
#nn-app .nn-section-coorg {
background: linear-gradient(135deg, rgba(100,149,237,0.05) 0%, rgba(91,163,208,0.02) 100%);
border-radius: 2rem; padding: 1rem; margin: 1.5rem 0;
}
#nn-app .nn-section-docs {
background: linear-gradient(135deg, rgba(5,83,151,0.02) 0%, rgba(91,163,208,0.04) 100%);
border-radius: 2rem; padding: 0.5rem 1rem 1rem; margin: 1.5rem 0;
}
#nn-app .nn-section-faq {
background: linear-gradient(135deg, rgba(91,163,208,0.03) 0%, rgba(100,149,237,0.05) 100%);
border-radius: 2rem; padding: 0.5rem 1rem 1rem; margin: 1.5rem 0;
}
/* ========== ТАЙМЛАЙН ========== */
#nn-app .nn-timeline-wrapper {
position: relative; margin-bottom: 2rem; overflow-x: auto;
-webkit-overflow-scrolling: touch; padding-bottom: 20px;
background: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.02) 2%, transparent 5%),
linear-gradient(to left, transparent 0%, rgba(0,0,0,0.02) 2%, transparent 5%);
background-repeat: no-repeat; background-size: 20px 100%, 20px 100%;
background-position: 0 0, 100% 0; background-attachment: local, local;
}
#nn-app .nn-timeline {
display: flex; flex-wrap: nowrap; gap: 1.2rem; padding: 8px 4px 20px 4px;
}
@media (min-width: 769px) { #nn-app .nn-timeline { flex-wrap: wrap; justify-content: flex-start; } }
#nn-app .nn-timeline-item {
background: var(--app-card); border-radius: 2rem; padding: 1.5rem 1.2rem;
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
border: 1px solid var(--app-border); box-shadow: 0 6px 14px rgba(0,0,0,0.05);
display: flex; flex-direction: column; gap: 0.6rem; cursor: pointer;
flex: 0 0 auto; width: fit-content; min-width: 200px; max-width: 320px;
}
#nn-app .nn-timeline-item:first-child { min-width: 180px; max-width: 280px; }
@media (min-width: 769px) {
#nn-app .nn-timeline-item { flex: 0 1 auto; min-width: 220px; max-width: 380px; }
#nn-app .nn-timeline-item:first-child { max-width: 300px; }
}
#nn-app .nn-timeline-item:hover {
transform: translateY(-5px); box-shadow: 0 20px 30px rgba(0,0,0,0.12);
border-color: var(--app-primary);
}
#nn-app .nn-timeline-number {
width: 44px; height: 44px; background: var(--app-primary); color: white;
border-radius: 60px; display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 1.4rem; margin-bottom: 0.2rem;
}
#nn-app .nn-timeline-item.forum .nn-timeline-number { background: var(--forum-blue); }
#nn-app .nn-timeline-item.congress {
--congress-gradient: linear-gradient(135deg, #055397 0%, #5BA3D0 50%, #6495ED 100%);
--congress-bg: linear-gradient(180deg, #FFFFFF 0%, #F0F5FA 100%);
--congress-shadow: 0 8px 24px rgba(5, 83, 151, 0.15);
--congress-shadow-hover: 0 16px 40px rgba(5, 83, 151, 0.25);
--congress-border: 2px solid rgba(5, 83, 151, 0.2);
background: var(--congress-bg); border: var(--congress-border);
box-shadow: var(--congress-shadow); position: relative; overflow: hidden;
padding: 1.5rem 1.2rem;
}
#nn-app .nn-timeline-item.congress::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
background: var(--congress-gradient);
}
#nn-app .nn-timeline-item.congress::after {
content: ''; position: absolute; top: -50%; right: -20%; width: 200px; height: 200px;
background: radial-gradient(circle, rgba(91, 163, 208, 0.08) 0%, transparent 70%);
pointer-events: none;
}
#nn-app .nn-timeline-item.congress:hover {
transform: translateY(-6px); box-shadow: var(--congress-shadow-hover);
border-color: rgba(5, 83, 151, 0.4);
}
#nn-app .nn-timeline-item.congress .nn-timeline-number {
background: var(--congress-gradient); color: #fff; width: 44px; height: 44px;
font-size: 1.4rem; box-shadow: 0 4px 12px rgba(5, 83, 151, 0.3);
}
#nn-app .nn-timeline-item.congress .nn-timeline-date {
background: linear-gradient(135deg, rgba(5, 83, 151, 0.1) 0%, rgba(91, 163, 208, 0.1) 100%);
color: #055397; border: 1px solid rgba(5, 83, 151, 0.2);
}
#nn-app .nn-timeline-item.congress .nn-timeline-title-link {
background: var(--congress-gradient); color: #fff !important;
box-shadow: 0 4px 12px rgba(5, 83, 151, 0.25);
}
#nn-app .nn-timeline-item.congress .nn-timeline-title-link:hover {
transform: translateY(-2px) scale(1.02); box-shadow: 0 6px 16px rgba(5, 83, 151, 0.35);
}
#nn-app .nn-timeline-item.congress .nn-timeline-desc,
#nn-app .nn-timeline-item.congress .nn-timeline-location { color: var(--app-text-muted); }
#nn-app .nn-timeline-date-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
#nn-app .nn-timeline-date {
font-size: 0.75rem; font-weight: 700; color: var(--app-primary);
background: var(--app-primary-light); padding: 0.3rem 0.9rem; border-radius: 2rem;
}
#nn-app .nn-planned-pill {
font-size: 0.7rem; background: var(--app-border); padding: 0.2rem 0.6rem;
border-radius: 2rem; color: var(--app-text-muted);
}
#nn-app .nn-timeline-title-link,
#nn-app .nn-timeline-title-inactive {
font-size: 0.9rem; font-weight: 700; display: inline-block; padding: 0.4rem 1rem;
border-radius: 2.5rem; text-align: left; transition: 0.2s; margin: 0.25rem 0;
width: fit-content; max-width: 100%; white-space: normal; word-break: break-word;
line-height: 1.3;
}
#nn-app .nn-timeline-title-link {
background: var(--app-primary);
color: white !important;
text-decoration: none;
}
#nn-app .nn-timeline-title-link:hover {
background: var(--app-primary-dark);
transform: translateY(-2px);
}
#nn-app .nn-timeline-title-inactive {
background: var(--app-text-light);
color: var(--app-bg);
cursor: not-allowed;
}
#nn-app .nn-timeline-desc { font-size: 0.85rem; color: var(--app-text-muted); line-height: 1.4; }
#nn-app .nn-timeline-location {
font-size: 0.8rem; color: var(--app-text-muted);
display: flex; align-items: center; gap: 0.25rem;
margin-top: auto; align-self: flex-start;
}
/* ========== МЕРОПРИЯТИЯ ========== */
#nn-app .nn-events-container { position: relative; }
#nn-app .nn-event-list {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-bottom: 2rem;
}
@media (max-width: 768px) { #nn-app .nn-event-list { grid-template-columns: 1fr; } }
#nn-app .nn-event-card {
background: var(--app-card); border-radius: 1.5rem; padding: 1.2rem;
transition: all 0.25s; border: 1px solid var(--app-border);
box-shadow: 0 4px 12px rgba(0,0,0,0.05); display: flex; flex-direction: column;
gap: 0.6rem; border-left: 4px solid var(--app-primary); cursor: pointer;
}
#nn-app .nn-event-card:hover {
transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.1);
border-color: var(--app-primary);
}
#nn-app .nn-event-row-1 { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
#nn-app .nn-event-date-badge {
background: var(--app-primary); color: white; padding: 0.2rem 0.7rem;
border-radius: 2rem; font-size: 0.7rem; font-weight: 600;
}
#nn-app .nn-event-deadline {
background: var(--app-deadline-bg); color: var(--app-deadline);
padding: 0.2rem 0.6rem; border-radius: 2rem; font-size: 0.65rem; font-weight: 600;
}
#nn-app .nn-event-meta-row {
font-size: 0.75rem; color: var(--app-text-muted); display: flex; flex-wrap: wrap;
align-items: center; gap: 0.3rem 0.6rem;
}
@media (min-width: 769px) {
#nn-app .nn-event-meta-row { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; }
}
#nn-app .nn-event-format { font-weight: 600; color: var(--app-primary); }
#nn-app .nn-event-sep { color: var(--app-border); }
#nn-app .nn-event-title {
font-size: 1.1rem; font-weight: 800;
background: linear-gradient(135deg, var(--app-primary), var(--app-primary-dark));
background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; margin: 0;
}
#nn-app .nn-event-cats { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.25rem 0; }
#nn-app .nn-cat-badge {
background: var(--app-primary-light); color: var(--app-primary);
padding: 0.2rem 0.6rem; border-radius: 2rem; font-size: 0.7rem; font-weight: 600;
}
#nn-app .nn-event-row-6 { display: flex; gap: 0.5rem; margin-top: auto; padding-top: 0.5rem; }
#nn-app .nn-card-btn {
flex: 1; background: var(--app-primary-lighter); border: 1px solid var(--app-border);
border-radius: 2rem; padding: 0.4rem; font-size: 0.7rem; font-weight: 600;
text-align: center; cursor: pointer; transition: 0.2s; color: var(--app-text-muted);
}
#nn-app .nn-card-btn:hover {
background: var(--app-primary); color: white; border-color: var(--app-primary);
}
#nn-app .nn-card-btn.disabled {
background: var(--app-border); color: var(--app-text-muted); cursor: not-allowed;
}
#nn-app .nn-card-btn.disabled:hover {
background: var(--app-border); color: var(--app-text-muted);
}
#nn-app .nn-show-more-container {
display: flex; justify-content: center; gap: 1rem; margin-top: 1.5rem;
}
#nn-app .nn-show-more-btn {
background: var(--app-primary); color: white; border: none; border-radius: 2rem;
padding: 0.6rem 1.5rem; font-weight: 600; cursor: pointer; transition: 0.2s;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
#nn-app .nn-show-more-btn:hover {
background: var(--app-primary-dark); transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
#nn-app .nn-back-to-top {
background: transparent; border: none; color: var(--app-primary);
font-size: 0.8rem; cursor: pointer; padding: 0.6rem 1.2rem; border-radius: 2rem;
transition: 0.2s;
}
#nn-app .nn-back-to-top:hover { background: var(--app-primary-light); }
/* ========== СООРГАНИЗАТОРЫ ========== */
#nn-app .nn-coorg-topic {
background: var(--app-card); border-radius: 1.5rem; padding: 1.2rem 1.5rem;
margin-bottom: 2rem; border: 1px solid var(--app-border);
}
#nn-app .nn-coorg-topic-title {
font-size: 1.3rem; font-weight: 700; color: var(--app-primary);
margin-bottom: 0.8rem;
}
#nn-app .nn-coorg-topic-list { list-style: none; padding-left: 0; }
#nn-app .nn-coorg-topic-list li { margin-bottom: 0.8rem; }
#nn-app .nn-coorg-topic-list a { font-weight: 600; }
#nn-app .doc-details {
display: block; font-size: 0.75rem; color: var(--app-text-muted);
margin-top: 0.2rem;
}
#nn-app .nn-coorg-grid-2col {
display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2rem;
}
#nn-app .nn-coorg-card {
background: var(--app-card); border-radius: 1.5rem; padding: 1.2rem;
border: 1px solid var(--app-border); transition: 0.2s;
}
#nn-app .nn-coorg-card:hover {
transform: translateY(-3px); border-color: var(--app-primary);
box-shadow: 0 8px 16px rgba(0,0,0,0.05);
}
#nn-app .nn-coorg-card-icon { font-size: 2rem; margin-bottom: 0.5rem; }
#nn-app .nn-coorg-card-title {
font-weight: 700; color: var(--app-primary); margin-bottom: 0.8rem;
font-size: 1.2rem;
}
#nn-app .nn-coorg-card-list { list-style: none; padding-left: 0; }
#nn-app .nn-coorg-card-list li {
margin-bottom: 0.5rem; padding-left: 1.2rem; position: relative;
}
#nn-app .nn-coorg-card-list li::before {
content: '•'; color: var(--app-primary); position: absolute; left: 0; font-weight: bold;
}
#nn-app .nn-coorg-steps { margin: 2rem 0; }
#nn-app .nn-coorg-steps-title {
font-size: 1.4rem; font-weight: 700; color: var(--app-primary);
margin-bottom: 1.2rem; display: flex; align-items: center; gap: 0.5rem;
}
#nn-app .nn-steps-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;
}
#nn-app .nn-step-item {
background: var(--app-card); border-radius: 1.5rem; padding: 1rem;
display: flex; align-items: center; gap: 1rem; border: 1px solid var(--app-border);
transition: 0.2s;
}
#nn-app .nn-step-item:hover {
transform: translateY(-2px); border-color: var(--app-primary);
background: var(--app-primary-lighter);
}
#nn-app .nn-step-num {
width: 40px; height: 40px; background: var(--app-primary); color: white;
border-radius: 60px; display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 1.2rem;
}
#nn-app .nn-step-text { font-size: 0.9rem; }
#nn-app .nn-coorg-phases { margin: 2rem 0; }
#nn-app .nn-coorg-phases-title {
font-size: 1.4rem; font-weight: 700; color: var(--app-primary);
margin-bottom: 1.2rem; display: flex; align-items: center; gap: 0.5rem;
}
#nn-app .nn-phases-list { display: flex; flex-direction: column; gap: 0.8rem; }
#nn-app .nn-phase-item {
background: var(--app-bg); border-radius: 1.5rem; padding: 1rem 1.2rem;
border-left: 6px solid var(--app-border); transition: all 0.2s;
display: flex; flex-direction: column; gap: 0.25rem;
}
#nn-app .nn-phase-item:hover {
transform: translateX(6px); border-left-color: var(--app-primary);
background: var(--app-primary-lighter);
}
#nn-app .nn-phase-item.highlight {
background: rgba(91,163,208,0.1); border-left-color: var(--forum-blue);
}
#nn-app .nn-phase-date { font-weight: 700; color: var(--app-primary); font-size: 0.9rem; }
#nn-app .nn-phase-title { font-size: 0.9rem; color: var(--app-text); }
#nn-app .nn-cta-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1.5rem;
}
#nn-app .nn-cta-card {
background: var(--app-card); border-radius: 1.5rem; padding: 1.2rem;
border: 1px solid var(--app-border); transition: 0.2s; display: flex;
flex-direction: column; height: 100%;
}
#nn-app .nn-cta-card:hover {
transform: translateY(-3px); border-color: var(--app-primary);
box-shadow: 0 8px 16px rgba(0,0,0,0.05);
}
#nn-app .nn-cta-card h3 {
font-size: 1.2rem; font-weight: 700; color: var(--app-primary);
margin: 0 0 0.5rem;
}
#nn-app .nn-cta-card p {
font-size: 0.85rem; color: var(--app-text-muted); margin: 0 0 1.2rem; flex: 1;
}
#nn-app .nn-cta-btn {
background: var(--app-primary); color: white !important; border: none;
border-radius: 2rem; padding: 0.5rem 1.2rem; font-size: 0.85rem; font-weight: 600;
cursor: pointer; transition: 0.2s; display: inline-block; align-self: flex-start;
margin-top: auto;
}
#nn-app .nn-cta-btn:hover {
background: var(--app-primary-dark); transform: translateY(-2px);
}
#nn-app .nn-cta-btn.inactive {
background: var(--app-border); color: var(--app-text-muted);
cursor: not-allowed; transform: none;
}
/* ========== ДОКУМЕНТЫ ========== */
#nn-app .nn-docs-grid {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; margin: 1rem 0;
}
#nn-app .nn-doc-card {
background: var(--app-card); border: 1px solid var(--app-border); border-radius: 1.5rem;
padding: 1rem 1.2rem; display: flex; align-items: center; justify-content: space-between;
transition: 0.2s;
}
#nn-app .nn-doc-card:hover {
border-color: var(--app-primary); transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0,0,0,0.05);
}
/* ========== ПОПАП МЕРОПРИЯТИЯ ========== */
#nn-app .nn-popup-overlay {
display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); z-index: 10002;
opacity: 0; transition: opacity 0.3s;
}
#nn-app .nn-popup-overlay.visible { opacity: 1; display: block; }
@media (max-width: 768px) {
#nn-app .nn-popup-overlay.visible::after {
content: "НН 2026"; position: absolute; top: 20px; left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, var(--app-primary) 0%, var(--app-primary-dark) 100%);
color: white; padding: 6px 16px; border-radius: 40px; font-weight: 800;
font-size: 14px; letter-spacing: 1px; border: none; box-shadow: 0 4px 12px rgba(0,0,0,0.2);
z-index: 10003; white-space: nowrap;
}
}
#nn-app .nn-popup {
display: none; position: fixed; top: 0; right: 0; width: 100%; max-width: 600px;
height: 100%; background: var(--app-card); box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
z-index: 10003; transform: translateX(100%);
transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.1, 1);
overflow-y: auto; border-radius: 0; display: flex; flex-direction: column;
}
#nn-app .nn-popup.visible { transform: translateX(0); display: flex; }
#nn-app .nn-popup.fullscreen { max-width: 100%; width: 100%; height: 100%; border-radius: 0; transform: translateX(0); }
@media (max-width: 768px) {
#nn-app .nn-popup {
max-width: 100%; border-radius: 24px 24px 0 0; transform: translateY(100%);
top: 10vh; bottom: 0; height: auto; max-height: none;
box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.2);
}
#nn-app .nn-popup.visible { transform: translateY(0); }
#nn-app .nn-popup.fullscreen { max-height: 100vh; height: 100vh; border-radius: 0; transform: translateY(0); top: 0; }
}
#nn-app .nn-popup-close {
position: absolute; top: 16px; right: 16px; width: 40px; height: 40px;
background: var(--app-card); border: 1px solid var(--app-border); border-radius: 40px;
font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
transition: 0.2s; z-index: 10005; box-shadow: 0 2px 8px rgba(0,0,0,0.1);
color: var(--app-text);
}
#nn-app .nn-popup-close:hover {
background: var(--app-primary); color: white; border-color: var(--app-primary);
}
#nn-app .nn-popup-body {
padding: 2rem 1.8rem 1.5rem; flex: 1; display: flex; flex-direction: column;
}
#nn-app .nn-popup-header { margin-bottom: 1.5rem; padding-right: 40px; }
#nn-app .nn-popup-event-title {
font-size: 1.8rem; font-weight: 800; color: var(--app-primary);
line-height: 1.2; margin: 0; letter-spacing: -0.02em;
}
#nn-app .nn-popup-nav {
display: flex; gap: 0.8rem; border-bottom: 2px solid var(--app-border);
padding-bottom: 0.8rem; margin-bottom: 2rem;
}
#nn-app .nn-popup-nav-item {
flex: 0 1 auto; background: transparent; border: none; padding: 0.6rem 1.2rem;
font-size: 1rem; font-weight: 600; color: var(--app-text-muted); border-radius: 40px;
cursor: pointer; transition: 0.2s; text-align: center; position: relative;
}
#nn-app .nn-popup-nav-item:hover {
background: var(--app-primary-light); color: var(--app-primary);
}
#nn-app .nn-popup-nav-item.active {
background: var(--app-primary); color: white;
}
#nn-app .nn-popup-nav-item.active::after {
content: ''; position: absolute; bottom: -10px; left: 20%; width: 60%;
height: 3px; background: var(--app-primary); border-radius: 3px;
}
#nn-app .nn-popup-tab-content { display: none; }
#nn-app .nn-popup-tab-content.active { display: block; }
#nn-app .nn-popup-section { margin-bottom: 2rem; }
#nn-app .nn-popup-section:last-child { margin-bottom: 0; }
#nn-app .nn-popup-section-title {
font-size: 1.1rem; font-weight: 700; color: var(--app-primary);
margin-bottom: 1.2rem; display: flex; align-items: center; gap: 0.5rem;
text-transform: uppercase; letter-spacing: 0.5px;
border-left: 4px solid var(--app-primary); padding-left: 1rem;
}
#nn-app .nn-popup-meta-grid { display: flex; flex-direction: column; gap: 1rem; }
#nn-app .nn-popup-meta-item {
display: flex; align-items: flex-start; gap: 1rem; font-size: 0.95rem;
padding: 0.5rem 0; border-bottom: 1px dashed var(--app-border);
}
#nn-app .nn-popup-meta-item:last-child { border-bottom: none; }
#nn-app .nn-popup-meta-item .icon {
width: 2rem; text-align: center; flex-shrink: 0; font-size: 1.2rem;
color: var(--app-primary);
}
#nn-app .nn-popup-meta-item strong {
font-weight: 600; min-width: 6rem; color: var(--app-text);
}
#nn-app .nn-popup-categories { display: block; margin-top: 0.5rem; }
#nn-app .nn-popup-cat-badge {
background: var(--app-primary-light); color: var(--app-primary); padding: 0.5rem 1.2rem;
border-radius: 40px; font-size: 0.9rem; font-weight: 600; border: 1px solid transparent;
transition: 0.2s; line-height: 1.5; display: inline-block; width: fit-content;
max-width: 100%; margin-bottom: 0.8rem; margin-right: 0.8rem;
}
#nn-app .nn-popup-cat-badge:last-child { margin-bottom: 0; }
#nn-app .nn-popup-cat-badge:hover {
background: var(--app-primary); color: white; border-color: var(--app-primary);
}
#nn-app .nn-popup-description {
font-size: 0.95rem; line-height: 1.6; color: var(--app-text); margin-bottom: 1.5rem;
}
#nn-app .nn-popup-contacts { display: flex; flex-direction: column; gap: 1rem; }
#nn-app .nn-popup-contact {
display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 0.8rem 0;
border-bottom: 1px solid var(--app-border);
}
#nn-app .nn-popup-contact:last-child { border-bottom: none; }
#nn-app .nn-popup-contact .icon {
font-size: 1.3rem; color: var(--app-primary); width: 2rem; text-align: center;
}
#nn-app .nn-popup-contact .contact-value {
font-size: 0.9rem; color: var(--app-text); word-break: break-all; flex: 1;
}
#nn-app .nn-popup-copy-btn,
#nn-app .nn-popup-phone-btn {
background: transparent; border: 1px solid var(--app-border); border-radius: 40px;
padding: 0.3rem 1rem; font-size: 0.75rem; font-weight: 500; cursor: pointer;
transition: 0.2s; color: var(--app-primary); margin-left: auto;
}
#nn-app .nn-popup-copy-btn:hover,
#nn-app .nn-popup-phone-btn:hover {
background: var(--app-primary); color: white; border-color: var(--app-primary);
}
#nn-app .nn-popup-actions {
position: sticky; bottom: 0; background: var(--app-card); padding: 1rem 0 1.2rem;
margin-top: 2rem; border-top: 1px solid var(--app-border); display: flex; gap: 0.8rem;
justify-content: space-between; align-items: center;
}
#nn-app .nn-popup-nav-buttons { display: flex; gap: 0.5rem; }
#nn-app .nn-popup-nav-btn {
background: transparent; border: 1px solid var(--app-border); border-radius: 40px;
padding: 0.5rem 1rem; font-size: 0.8rem; font-weight: 600; cursor: pointer;
color: var(--app-primary);
}
#nn-app .nn-popup-nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }
#nn-app .nn-popup-action-group { display: flex; gap: 0.5rem; }
#nn-app .nn-popup-btn {
background: var(--app-primary); color: white; border: none; border-radius: 40px;
padding: 0.5rem 1.2rem; font-weight: 600; font-size: 0.85rem; cursor: pointer;
transition: 0.2s; box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
#nn-app .nn-popup-btn:hover {
background: var(--app-primary-dark); transform: translateY(-2px);
}
#nn-app .nn-popup-btn.secondary {
background: transparent; border: 1px solid var(--app-primary); color: var(--app-primary);
box-shadow: none;
}
#nn-app .nn-popup-btn.secondary:hover {
background: var(--app-primary); color: white;
}
#nn-app .nn-popup-btn.disabled {
background: var(--app-border); color: var(--app-text-muted); cursor: not-allowed;
transform: none; box-shadow: none;
}
/* ========== FAQ ========== */
#nn-app .nn-faq-tabs { display: none; }
@media (min-width: 769px) {
#nn-app .nn-faq-content { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}
@media (max-width: 768px) {
#nn-app .nn-faq-tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
#nn-app .nn-faq-tab {
flex: 1; background: var(--app-primary-lighter); border: none; border-radius: 2rem;
padding: 0.5rem; font-weight: 600; cursor: pointer;
}
#nn-app .nn-faq-tab.active { background: var(--app-primary); color: white; }
#nn-app .nn-faq-block { display: none; }
#nn-app .nn-faq-block.active { display: block; }
}
#nn-app .nn-faq-block {
background: var(--app-card); border-radius: 1.5rem; border: 1px solid var(--app-border);
overflow: hidden;
}
#nn-app .nn-faq-block-title {
background: var(--app-primary-lighter); padding: 0.8rem 1.2rem; font-weight: 700;
display: flex; align-items: center; gap: 0.5rem; border-bottom: 1px solid var(--app-border);
font-size: 1.1rem;
}
#nn-app .nn-faq-item { border-bottom: 1px solid var(--app-border); }
#nn-app .nn-faq-question {
padding: 1rem 1.2rem; cursor: pointer; display: flex; justify-content: space-between;
align-items: center; font-weight: 600; transition: 0.2s;
}
#nn-app .nn-faq-question:hover {
background: var(--app-primary-lighter); color: var(--app-primary);
}
#nn-app .nn-faq-answer {
padding: 0 1.2rem; max-height: 0; overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
background: var(--app-bg); font-size: 0.9rem; color: var(--app-text-muted);
}
#nn-app .nn-faq-answer.open {
padding: 0.8rem 1.2rem 1.2rem; max-height: 300px;
}
/* ========== ОТСТУПЫ ДЛЯ ЯКОРЕЙ ========== */
#nn-app #path, #nn-app #events, #nn-app #coorganizers,
#nn-app #documents, #nn-app #faq {
scroll-margin-top: 80px;
}
/* ========== АДАПТИВ ========== */
@media (max-width: 768px) {
#nn-app { padding: 0 16px !important; }
#nn-app .nn-header-top { padding: 12px 16px; }
#nn-app .nn-header-top-inner { flex-direction: row; flex-wrap: wrap; justify-content: space-between; }
#nn-app .nn-header-title { flex: 1 1 auto; font-size: 18px; }
#nn-app .nn-logo-nn { width: 36px; height: 36px; font-size: 18px; }
#nn-app .nn-header-text { display: inline; font-size: 14px; }
#nn-app .nn-header-year { font-size: 14px; margin-left: 4px; }
#nn-app .nn-metrics { flex: 1 1 100%; justify-content: flex-start; margin-top: 8px; }
#nn-app .nn-metric { font-size: 10px; padding: 4px 8px; }
#nn-app .nn-header-bottom-inner { justify-content: flex-start; overflow-x: auto; padding: 0 12px; }
#nn-app .nn-toc-link { padding: 6px 14px; font-size: 12px; }
#nn-app .nn-search-controls-row { flex-wrap: wrap; }
#nn-app .nn-search-box { width: 100%; order: 1; }
#nn-app .nn-controls-group { width: 100%; order: 2; justify-content: space-between; }
#nn-app .nn-filter-open-btn { display: flex; }
#nn-app .nn-timeline-wrapper { overflow-x: auto; }
#nn-app .nn-timeline { flex-wrap: nowrap; }
#nn-app .nn-timeline-item { width: auto; min-width: 220px; max-width: 85vw; }
#nn-app .nn-timeline-item:first-child { max-width: 240px; }
#nn-app .nn-event-list { grid-template-columns: 1fr; }
#nn-app .nn-docs-grid { grid-template-columns: 1fr; }
#nn-app .nn-coorg-grid-2col { grid-template-columns: 1fr; }
#nn-app .nn-cta-grid { grid-template-columns: 1fr; }
#nn-app .nn-phase-item { flex-direction: column; }
#nn-app .nn-section-path, #nn-app .nn-section-events, #nn-app .nn-section-coorg,
#nn-app .nn-section-docs, #nn-app .nn-section-faq { padding: 0.5rem; }
#nn-app .nn-show-more-container { flex-direction: column; align-items: center; }
#nn-app .nn-back-to-top { width: auto; margin: 0 auto; }
#nn-app .nn-popup-nav-item { font-size: 0.9rem; padding: 0.5rem 1rem; }
#nn-app .nn-popup-cat-badge { white-space: normal; }
#nn-app .nn-timeline-title-inactive { white-space: nowrap !important; font-size: 0.8rem; padding: 0.3rem 0.8rem; }
#nn-app .nn-popup-actions { flex-wrap: wrap; }
#nn-app .nn-popup-nav-buttons { width: 100%; justify-content: center; }
#nn-app .nn-popup-action-group { width: 100%; justify-content: center; }
}