/* alkonorm.ru — общий CSS для статей и хаб-страниц */
/* Подключение: */
/* Шрифты подключить отдельно в :
*/
/* ─── Reset & Root ─────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
--accent-cyan: #4dd4ff;
--accent-pink: #ff6b9d;
--accent-orange: #ff9f4d;
--accent-green: #4dffb0;
--glass-border: rgba(255,255,255,0.13);
--text-primary: #ffffff;
--text-secondary: rgba(255,255,255,0.75);
}
body {
font-family: 'Jost', sans-serif;
background: #090a0f;
color: var(--text-primary);
overflow-x: hidden;
line-height: 1.7;
}
/* ─── Starfield ────────────────────────────────────────────── */
.starfield {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
z-index: 0;
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
pointer-events: none;
}
.stars {
position: absolute; width: 100%; height: 100%;
background-image:
radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.6) 0%, transparent 100%),
radial-gradient(1px 1px at 25% 40%, rgba(255,255,255,0.5) 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 40% 10%, rgba(255,255,255,0.7) 0%, transparent 100%),
radial-gradient(1px 1px at 55% 60%, rgba(255,255,255,0.4) 0%, transparent 100%),
radial-gradient(1px 1px at 70% 25%, rgba(255,255,255,0.6) 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 82% 70%, rgba(255,255,255,0.5) 0%, transparent 100%),
radial-gradient(1px 1px at 90% 45%, rgba(255,255,255,0.7) 0%, transparent 100%),
radial-gradient(1px 1px at 15% 75%, rgba(255,255,255,0.4) 0%, transparent 100%),
radial-gradient(1px 1px at 35% 88%, rgba(255,255,255,0.5) 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 60% 80%, rgba(255,255,255,0.6) 0%, transparent 100%),
radial-gradient(1px 1px at 75% 90%, rgba(255,255,255,0.3) 0%, transparent 100%),
radial-gradient(1px 1px at 5% 50%, rgba(255,255,255,0.5) 0%, transparent 100%),
radial-gradient(1px 1px at 48% 35%, rgba(255,255,255,0.4) 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 92% 20%, rgba(255,255,255,0.6) 0%, transparent 100%),
radial-gradient(1px 1px at 20% 95%, rgba(255,255,255,0.5) 0%, transparent 100%);
animation: twinkle 8s ease-in-out infinite alternate;
}
.stars2 {
position: absolute; width: 100%; height: 100%;
background-image:
radial-gradient(1px 1px at 30% 20%, rgba(255,255,255,0.4) 0%, transparent 100%),
radial-gradient(1px 1px at 65% 45%, rgba(255,255,255,0.5) 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 80% 15%, rgba(255,255,255,0.6) 0%, transparent 100%),
radial-gradient(1px 1px at 45% 70%, rgba(255,255,255,0.3) 0%, transparent 100%),
radial-gradient(1px 1px at 10% 85%, rgba(255,255,255,0.5) 0%, transparent 100%),
radial-gradient(1px 1px at 95% 60%, rgba(255,255,255,0.4) 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 55% 5%, rgba(255,255,255,0.7) 0%, transparent 100%);
animation: twinkle 12s ease-in-out infinite alternate-reverse;
}
@keyframes twinkle {
0% { opacity: 0.6; }
50% { opacity: 1; }
100% { opacity: 0.7; }
}
/* ─── Header ───────────────────────────────────────────────── */
.header {
position: sticky; top: 0; z-index: 90;
background: rgba(5,13,26,0.92);
backdrop-filter: blur(16px);
border-bottom: 1px solid var(--glass-border);
}
.header-inner {
max-width: 1200px; margin: 0 auto;
padding: 16px 24px;
display: flex; align-items: center; gap: 32px;
}
.logo {
font-family: 'Montserrat', sans-serif;
font-weight: 700; font-size: 24px;
color: var(--accent-cyan); text-decoration: none; flex-shrink: 0;
display: inline-flex; align-items: center; gap: 10px;
}
.nav { display: flex; gap: 24px; flex: 1; flex-wrap: wrap; }
.nav a {
color: var(--text-secondary); text-decoration: none;
font-size: 14px; font-weight: 500; transition: color 0.2s;
}
.nav a:hover, .nav a.active { color: var(--accent-cyan); }
/* ─── Breadcrumbs ──────────────────────────────────────────── */
.breadcrumbs {
padding: 20px 0 0;
font-size: 13px;
color: rgba(255,255,255,0.45);
}
.breadcrumbs a {
color: rgba(255,255,255,0.45); text-decoration: none; transition: color 0.2s;
}
.breadcrumbs a:hover { color: var(--accent-cyan); }
.breadcrumbs span { margin: 0 6px; }
/* ─── Layout: статья (article + sidebar) ──────────────────── */
.page-wrap {
position: relative; z-index: 10;
max-width: 1200px; margin: 0 auto;
padding: 0 24px 80px;
display: grid;
grid-template-columns: 1fr 280px;
gap: 60px;
align-items: start;
}
/* breadcrumbs внутри page-wrap тянутся на всю ширину */
.page-wrap > .breadcrumbs { grid-column: 1 / -1; }
/* ─── Layout: хаб-страница (без sidebar) ──────────────────── */
.page-content {
position: relative; z-index: 10;
max-width: 1200px; margin: 0 auto;
padding: 0 24px 80px;
}
/* ─── Article ──────────────────────────────────────────────── */
article { min-width: 0; }
h1 {
font-family: 'Montserrat', sans-serif;
font-size: 40px; font-weight: 700;
line-height: 1.15; margin-bottom: 20px;
background: linear-gradient(135deg, #fff 40%, var(--accent-cyan));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.article-lead {
font-size: 16px;
color: rgba(255,255,255,0.7);
line-height: 1.85;
margin-bottom: 28px;
border-left: 3px solid rgba(77,212,255,0.4);
padding-left: 18px;
}
/* ─── Quick answer ─────────────────────────────────────────── */
.quick-answer {
background: rgba(77,212,255,0.06);
border: 1px solid rgba(77,212,255,0.22);
border-radius: 14px;
padding: 22px 26px;
margin-bottom: 44px;
}
.quick-answer-title {
font-family: 'Montserrat', sans-serif;
font-size: 11px; font-weight: 700;
letter-spacing: 1px; text-transform: uppercase;
color: var(--accent-cyan);
margin-bottom: 14px;
}
.quick-answer ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.quick-answer li {
font-size: 14px; color: var(--text-secondary);
display: flex; gap: 10px; align-items: baseline;
}
.quick-answer li::before { content: '—'; color: var(--accent-cyan); flex-shrink: 0; }
.quick-answer strong { color: var(--text-primary); }
/* ─── Article body ─────────────────────────────────────────── */
.article-body { font-size: 15px; color: rgba(255,255,255,0.72); line-height: 1.9; }
.article-body h2 {
font-family: 'Montserrat', sans-serif;
font-size: 21px; font-weight: 700;
color: var(--text-primary);
margin: 44px 0 14px;
padding-top: 8px;
scroll-margin-top: 80px;
}
.article-body h2:first-child { margin-top: 0; }
.article-body h3 {
font-family: 'Montserrat', sans-serif;
font-size: 15px; font-weight: 600;
color: var(--text-secondary);
margin: 24px 0 8px;
}
.article-body p { margin-bottom: 14px; }
.article-body ul, .article-body ol {
margin: 0 0 16px 0; padding-left: 0; list-style: none;
}
.article-body ul li, .article-body ol li {
padding: 5px 0 5px 22px; position: relative;
color: rgba(255,255,255,0.7);
}
.article-body ul li::before {
content: '·'; position: absolute; left: 6px;
color: var(--accent-cyan); font-size: 18px; line-height: 1.4;
}
.article-body ol { counter-reset: li; }
.article-body ol li::before {
counter-increment: li;
content: counter(li) '.';
position: absolute; left: 0;
color: var(--accent-cyan); font-size: 13px; font-weight: 600;
}
.article-lead a, .article-body a, .quick-answer a, .faq-answer a {
color: var(--accent-cyan); text-decoration: none;
}
.article-lead a:hover, .article-body a:hover,
.quick-answer a:hover, .faq-answer a:hover { text-decoration: underline; }
.divider { height: 1px; background: rgba(255,255,255,0.07); margin: 44px 0; }
/* ─── Tables ───────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 20px 0 28px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th {
font-family: 'Montserrat', sans-serif;
font-size: 11px; font-weight: 600;
letter-spacing: 0.8px; text-transform: uppercase;
color: var(--accent-cyan);
padding: 10px 14px;
border-bottom: 1px solid rgba(77,212,255,0.25);
text-align: left; white-space: nowrap;
}
tbody td {
padding: 10px 14px;
border-bottom: 1px solid rgba(255,255,255,0.07);
color: rgba(255,255,255,0.72);
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: rgba(77,212,255,0.04); }
td.hl { color: var(--text-primary); font-weight: 500; }
td.dim { color: rgba(255,255,255,0.45); font-size: 13px; }
.table-note {
font-size: 12px; color: rgba(255,255,255,0.35);
margin-top: -20px; margin-bottom: 28px;
}
.table-name {
font-family: 'Montserrat', sans-serif;
font-size: 13px; font-weight: 600;
color: rgba(255,255,255,0.55);
margin: 0 0 8px;
}
/* ─── FAQ ──────────────────────────────────────────────────── */
.faq-section { margin-top: 44px; }
.faq-title {
font-family: 'Montserrat', sans-serif;
font-size: 18px; font-weight: 700;
margin-bottom: 16px;
}
.faq-list { display: flex; flex-direction: column; gap: 2px; }
details {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 12px; overflow: hidden;
transition: border-color 0.2s;
}
details[open] { border-color: rgba(77,212,255,0.3); }
summary {
padding: 17px 20px;
font-family: 'Montserrat', sans-serif;
font-size: 14px; font-weight: 600;
cursor: pointer; list-style: none;
display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
summary::-webkit-details-marker { display: none; }
summary::after {
content: '+'; font-size: 20px;
color: var(--accent-cyan); flex-shrink: 0; transition: transform 0.2s;
}
details[open] summary::after { transform: rotate(45deg); }
.faq-answer {
padding: 0 20px 16px;
font-size: 14px; color: rgba(255,255,255,0.65); line-height: 1.8;
}
/* ─── CTA forum block ───────────────────────────────────────── */
.cta-box {
background: linear-gradient(135deg, rgba(77,212,255,0.15), rgba(255,107,157,0.15));
border: 2px solid var(--accent-cyan);
border-radius: 20px;
padding: 40px;
margin: 60px 0 40px;
text-align: center;
}
.cta-box h2 {
margin: 0 0 15px;
padding: 0;
font-size: 26px;
}
.cta-box h2::before { display: none; }
.cta-box p { font-size: 16px; margin-bottom: 25px; }
.btn-primary {
display: inline-block;
background: linear-gradient(135deg, var(--accent-cyan), #0fa8d8);
color: #000;
font-weight: 700;
font-size: 16px;
padding: 14px 36px;
border-radius: 50px;
text-decoration: none;
transition: all 0.3s ease;
font-family: 'Montserrat', sans-serif;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(77,212,255,0.4);
}
/* ─── Related articles ─────────────────────────────────────── */
.related-section { margin-top: 44px; }
.related-title {
font-family: 'Montserrat', sans-serif;
font-size: 11px; font-weight: 700;
letter-spacing: 1px; text-transform: uppercase;
color: rgba(255,255,255,0.4);
margin-bottom: 14px;
}
.related-list { list-style: none; }
.related-list li {
display: grid;
grid-template-columns: 1fr auto;
gap: 12px; align-items: baseline;
padding: 10px 0;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.related-list li:last-child { border-bottom: none; }
.related-list a {
font-size: 14px; font-weight: 500;
color: var(--accent-cyan); text-decoration: none; transition: opacity 0.2s;
}
.related-list a:hover { opacity: 0.75; text-decoration: underline; }
.related-list span { font-size: 12px; color: rgba(255,255,255,0.3); white-space: nowrap; }
.r-soon { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.28); }
/* ─── Sources ──────────────────────────────────────────────── */
.sources-section { margin-top: 44px; }
.sources-title {
font-family: 'Montserrat', sans-serif;
font-size: 11px; font-weight: 700;
letter-spacing: 1px; text-transform: uppercase;
color: rgba(255,255,255,0.4);
margin-bottom: 12px;
}
.sources-list {
list-style: none;
display: flex; flex-direction: column; gap: 6px;
}
.sources-list li {
font-size: 12px; color: rgba(255,255,255,0.28);
line-height: 1.5;
padding-left: 12px;
border-left: 2px solid rgba(255,255,255,0.08);
}
.sources-list em { font-style: italic; }
/* ─── Sidebar (только в статьях) ──────────────────────────── */
.sidebar { position: sticky; top: 80px; }
.sidebar-toc {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.09);
border-radius: 14px;
padding: 20px; margin-bottom: 20px;
}
.sidebar-toc-title {
font-family: 'Montserrat', sans-serif;
font-size: 11px; font-weight: 700;
letter-spacing: 1px; text-transform: uppercase;
color: rgba(255,255,255,0.4); margin-bottom: 14px;
}
.toc-list { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.toc-list a {
font-size: 13px; color: rgba(255,255,255,0.5);
text-decoration: none; display: block;
padding: 5px 8px; border-radius: 8px;
transition: background 0.2s, color 0.2s; line-height: 1.45;
}
.toc-list a:hover { background: rgba(77,212,255,0.08); color: var(--accent-cyan); }
.sidebar-hub {
background: rgba(77,212,255,0.05);
border: 1px solid rgba(77,212,255,0.18);
border-radius: 14px; padding: 20px;
}
.sidebar-hub-label {
font-family: 'Montserrat', sans-serif;
font-size: 11px; font-weight: 700;
letter-spacing: 1px; text-transform: uppercase;
color: var(--accent-cyan); margin-bottom: 10px;
}
.sidebar-hub a {
font-size: 14px; font-weight: 600;
color: var(--text-primary); text-decoration: none;
display: block; margin-bottom: 6px;
}
.sidebar-hub a:hover { color: var(--accent-cyan); }
.sidebar-hub p { font-size: 12px; color: rgba(255,255,255,0.4); line-height: 1.5; }
/* ─── Хаб: hero ────────────────────────────────────────────── */
.hero { padding: 40px 0 48px; max-width: 780px; }
.hero h1 {
font-size: 48px;
background: none;
-webkit-text-fill-color: #ffffff;
color: #ffffff;
margin-bottom: 14px;
}
.hero-sub {
font-size: 19px; color: var(--text-secondary);
margin-bottom: 20px; font-weight: 500; line-height: 1.5;
}
.hero-intro {
font-size: 15px; color: rgba(255,255,255,0.65);
line-height: 1.85; margin-bottom: 28px;
}
/* ─── Хаб: anchor menu ─────────────────────────────────────── */
.anchor-menu { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 56px; }
.anchor-menu a {
background: rgba(77,212,255,0.07);
border: 1px solid rgba(77,212,255,0.22);
color: var(--accent-cyan); border-radius: 20px;
padding: 6px 16px; font-size: 13px;
text-decoration: none; transition: background 0.2s, border-color 0.2s;
}
.anchor-menu a:hover { background: rgba(77,212,255,0.15); border-color: rgba(77,212,255,0.5); }
/* ─── Хаб: секции ──────────────────────────────────────────── */
.content-section { margin-bottom: 64px; scroll-margin-top: 80px; }
.section-header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
h2.section-title {
font-family: 'Montserrat', sans-serif;
font-size: 20px; font-weight: 700; margin: 0;
color: rgba(77,212,255,0.9);
}
.section-count { font-size: 12px; color: rgba(255,255,255,0.35); }
.section-line { height: 1px; background: rgba(77,212,255,0.2); margin-bottom: 12px; }
.cluster-desc {
font-size: 14px; color: rgba(77,212,255,0.75);
margin-bottom: 20px; max-width: 680px; line-height: 1.6;
}
/* ─── Хаб: список статей ───────────────────────────────────── */
.article-list { list-style: none; }
.article-list li {
display: grid;
grid-template-columns: 1fr auto auto;
align-items: baseline; gap: 16px;
padding: 11px 0;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.article-list li:last-child { border-bottom: none; }
.al-link {
font-size: 14px; font-weight: 500;
color: #ffffff; text-decoration: none; line-height: 1.5; transition: opacity 0.2s;
}
.al-link:hover { opacity: 0.75; text-decoration: underline; }
.al-soon { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.3); line-height: 1.5; }
.al-desc {
font-size: 12px; color: rgba(255,255,255,0.35);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px;
}
.badge-ready {
font-size: 10px; font-family: 'Montserrat', sans-serif;
font-weight: 600; letter-spacing: 0.5px;
color: var(--accent-cyan); background: rgba(77,212,255,0.1);
border: 1px solid rgba(77,212,255,0.3);
padding: 2px 8px; border-radius: 10px; white-space: nowrap;
}
.badge-soon {
font-size: 10px; font-family: 'Montserrat', sans-serif;
font-weight: 600; letter-spacing: 0.5px;
color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
padding: 2px 8px; border-radius: 10px; white-space: nowrap;
}
/* ─── Хаб: другие разделы ──────────────────────────────────── */
.other-hubs-title {
font-family: 'Montserrat', sans-serif;
font-weight: 700; margin-bottom: 16px;
color: rgba(255,255,255,0.5); text-transform: uppercase;
letter-spacing: 0.8px; font-size: 11px;
}
.hubs-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.hub-card {
background: rgba(255,255,255,0.04); border-radius: 14px;
padding: 22px; text-decoration: none; color: inherit;
transition: transform 0.2s; display: block;
border: 1px solid rgba(255,255,255,0.08);
}
.hub-card:hover { transform: translateY(-3px); }
.hub-card.orange { border-color: rgba(255,159,77,0.2); }
.hub-card.orange:hover { border-color: rgba(255,159,77,0.45); box-shadow: 0 6px 20px rgba(255,159,77,0.12); }
.hub-card.pink { border-color: rgba(255,107,157,0.2); }
.hub-card.pink:hover { border-color: rgba(255,107,157,0.45); box-shadow: 0 6px 20px rgba(255,107,157,0.12); }
.hub-card.green { border-color: rgba(77,255,176,0.2); }
.hub-card.green:hover { border-color: rgba(77,255,176,0.45); box-shadow: 0 6px 20px rgba(77,255,176,0.12); }
.hub-card-name { font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.hub-card.orange .hub-card-name { color: var(--accent-orange); }
.hub-card.pink .hub-card-name { color: var(--accent-pink); }
.hub-card.green .hub-card-name { color: var(--accent-green); }
.hub-card-desc { font-size: 12px; color: rgba(255,255,255,0.5); line-height: 1.5; }
/* ─── Footer ───────────────────────────────────────────────── */
.footer {
position: relative; z-index: 10;
border-top: 1px solid var(--glass-border);
background: rgba(5,13,26,0.8);
}
.footer-inner {
max-width: 1200px; margin: 0 auto;
padding: 28px 24px;
display: flex; flex-wrap: wrap; gap: 16px;
justify-content: space-between; align-items: center;
}
.footer-copy { font-size: 12px; color: rgba(255,255,255,0.3); }
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-links a {
font-size: 12px; color: rgba(255,255,255,0.4);
text-decoration: none; transition: color 0.2s;
}
.footer-links a:hover { color: var(--accent-cyan); }
/* ─── Info & Warn blocks ───────────────────────────────────── */
.info-block {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 12px;
padding: 18px 22px;
margin: 20px 0;
}
.info-block p { font-size: 14px; color: rgba(255,255,255,0.6); margin-bottom: 0; line-height: 1.7; }
.warn-block {
background: rgba(255,159,77,0.07);
border: 1px solid rgba(255,159,77,0.25);
border-radius: 12px;
padding: 18px 22px;
margin: 20px 0;
}
.warn-block p { font-size: 14px; color: rgba(255,255,255,0.65); margin-bottom: 0; line-height: 1.7; }
/* ─── Sources block ────────────────────────────────────────── */
.sources-block {
margin: 40px 0 0;
padding: 20px 24px;
background: rgba(255,255,255,0.04);
border-left: 3px solid rgba(255,255,255,0.15);
border-radius: 0 8px 8px 0;
}
.sources-title {
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(255,255,255,0.45);
margin: 0 0 12px;
}
.sources-list {
margin: 0;
padding-left: 20px;
}
.sources-list li {
font-size: 13px;
color: rgba(255,255,255,0.5);
line-height: 1.6;
margin-bottom: 8px;
}
.sources-list li:last-child { margin-bottom: 0; }
.sources-list em { font-style: italic; color: rgba(255,255,255,0.6); }
/* ─── Sources list (нумерованный, в article-body) ─────────── */
.article-body ol.sources-list {
padding-left: 1.5em;
font-size: 0.9em;
color: var(--text-secondary, #666);
line-height: 1.7;
list-style: decimal;
}
.article-body ol.sources-list li {
margin-bottom: 0.5em;
padding-left: 0;
border-left: none;
font-size: inherit;
color: inherit;
}
.article-body ol.sources-list li::before { display: none; }
.article-body ol.sources-list a {
color: inherit;
text-decoration: underline;
text-underline-offset: 2px;
}
/* ─── Mobile ───────────────────────────────────────────────── */
@media (max-width: 900px) {
.page-wrap { grid-template-columns: 1fr; gap: 0; }
.sidebar { display: none; }
}
@media (max-width: 768px) {
h1 { font-size: 28px; }
.hero h1 { font-size: 32px; }
.hero-sub { font-size: 16px; }
.nav { display: none; }
.hubs-grid { grid-template-columns: 1fr; }
.article-list li { grid-template-columns: 1fr auto; grid-template-rows: auto auto; }
.al-desc { display: none; }
.related-list li { grid-template-columns: 1fr; }
.related-list span { display: none; }
}