/* ============================================= SteefMade — Typography ============================================= */ /* --- Шрифты подключаются через в каждой страницы --- */ /* --- Base --- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); } body { font-family: 'Golos Text', system-ui, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.6; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; } /* Ultra-subtle neutral film grain — texture, not glow */ body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9000; opacity: 0.018; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); background-size: 180px 180px; } /* --- Типографическая шкала --- */ .t-hero { font-family: 'Golos Text', sans-serif; font-size: clamp(52px, 8.5vw, 132px); font-weight: 900; line-height: 0.92; letter-spacing: -0.035em; } .t-display { font-family: 'Golos Text', sans-serif; font-size: clamp(36px, 5vw, 72px); font-weight: 900; line-height: 1.0; letter-spacing: -0.02em; } .t-h1 { font-family: 'Golos Text', sans-serif; font-size: clamp(28px, 3.5vw, 52px); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; } .t-h2 { font-family: 'Golos Text', sans-serif; font-size: clamp(22px, 2.5vw, 36px); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; } .t-h3 { font-family: 'Golos Text', sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; } .t-body { font-family: 'Golos Text', sans-serif; font-size: 16px; font-weight: 400; line-height: 1.6; } .t-small { font-family: 'Golos Text', sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; } .t-label { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; } .t-mono { font-family: 'JetBrains Mono', monospace; } /* --- Фирменный приём: em = оливковый курсив --- */ em, .em-olive { font-style: italic; color: var(--olive-bright); } /* --- Цветовые утилиты --- */ .text-dim { color: var(--text-dim); } .text-muted { color: var(--text-muted); } .text-olive { color: var(--olive-bright); } .text-white { color: var(--text); } /* --- Prose (длинный текст) --- */ .prose { max-width: 65ch; } .prose p + p { margin-top: 1em; } .prose ul, .prose ol { padding-left: 1.5em; margin: 0.75em 0; } .prose li + li { margin-top: 0.4em; } /* --- Утилиты --- */ .text-wrap-pretty { text-wrap: pretty; } a { color: inherit; text-decoration: none; } /* --- Prefers reduced motion --- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }