88 lines
1.9 KiB
CSS
88 lines
1.9 KiB
CSS
/* Базовые стили (сброс, body, общие настройки) */
|
||
/* ===== БАЗОВЫЕ СТИЛИ ===== */
|
||
:root {
|
||
/* Основные шрифты */
|
||
--font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
|
||
--font-display: 'Orbitron', 'Share Tech Mono', 'Segoe UI', sans-serif;
|
||
--font-tech: 'Share Tech Mono', 'Courier New', monospace;
|
||
|
||
/* Размеры */
|
||
--font-size-xs: 10px;
|
||
--font-size-sm: 12px;
|
||
--font-size-base: 14px;
|
||
--font-size-lg: 16px;
|
||
--font-size-xl: 18px;
|
||
--font-size-2xl: 22px;
|
||
--font-size-3xl: 28px;
|
||
|
||
/* Веса */
|
||
--font-weight-normal: 400;
|
||
--font-weight-semibold: 600;
|
||
--font-weight-bold: 700;
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
font-family: var(--font-mono);
|
||
background: #050805;
|
||
color: #00ff88;
|
||
padding: 12px;
|
||
font-size: var(--font-size-base);
|
||
line-height: 1.6;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|
||
|
||
/* ===== ЗАГОЛОВКИ ===== */
|
||
h1, h2, h3, h4, h5, h6 {
|
||
font-family: var(--font-display);
|
||
letter-spacing: 0.05em;
|
||
text-transform: uppercase;
|
||
font-weight: var(--font-weight-bold);
|
||
margin: 0;
|
||
}
|
||
|
||
h1 {
|
||
font-size: var(--font-size-2xl);
|
||
text-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
|
||
}
|
||
|
||
h2 {
|
||
font-size: var(--font-size-xl);
|
||
}
|
||
|
||
h3 {
|
||
font-size: var(--font-size-lg);
|
||
}
|
||
|
||
/* ===== МОНОШИРИННЫЙ ТЕКСТ ===== */
|
||
code, pre, .mono {
|
||
font-family: var(--font-mono);
|
||
font-weight: var(--font-weight-normal);
|
||
}
|
||
|
||
/* ===== ТЕХНИЧЕСКИЙ ТЕКСТ (статусы, значения) ===== */
|
||
.status-text,
|
||
.value-text,
|
||
.signal-text,
|
||
.tech-text {
|
||
font-family: var(--font-tech);
|
||
letter-spacing: 0.02em;
|
||
}
|
||
|
||
/* ===== УЛУЧШЕНИЯ ЧИТАЕМОСТИ ===== */
|
||
.text-muted {
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.text-bold {
|
||
font-weight: var(--font-weight-bold);
|
||
}
|
||
|
||
.text-semibold {
|
||
font-weight: var(--font-weight-semibold);
|
||
} |