/* * blog-base.css * Базовые стили — токены и типографика блога. Подключается в страниц блога * (/ru/blog, /ru/blog/[pillar], /ru/blog/[pillar]/[slug]) — не используется на лендинге * и других страницах (см. /styles/karine-base.css для них). */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #FBFAF8; --bg2: #EDEAE4; --text: #1C1815; --text-muted: #7A7570; --text-faint: #8A8580; --accent: #6B5B8E; --accent-light: #EBE6F5; --accent-dark: #4A3D6A; --warm: #C9A87C; --radius: 20px; --font-serif-display: 'Playfair Display', serif; --font-serif-body: 'Source Serif 4', serif; --font-sans: 'Manrope', sans-serif; } html { scroll-behavior: smooth; } body { font-family: var(--font-sans); background: var(--bg); color: var(--text); overflow-x: hidden; } h1, h2, h3 { font-family: var(--font-serif-display); letter-spacing: -0.5px; line-height: 1.2; } a { color: var(--accent); } a:hover { color: var(--accent-dark); } /* ─── Reading progress ─── */ .reading-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: rgba(107,91,142,0.12); z-index: 101; } .reading-progress__bar { height: 100%; background: var(--accent); width: 0%; transition: width 0.1s linear; } /* ─── NAV ─── */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 14px 24px; display: flex; justify-content: space-between; align-items: center; background: transparent; transition: background 0.25s, border-color 0.25s; border-bottom: 1px solid transparent; } nav.scrolled { background: rgba(251,250,248,0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--bg2); } .logo { font-family: var(--font-serif-display); font-size: 17px; font-weight: 700; color: var(--text); text-decoration: none; letter-spacing: -0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; flex-shrink: 1; } .nav-cta { font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; padding: 7px 16px; border-radius: 50px; border: 1px solid var(--accent); white-space: nowrap; flex-shrink: 0; transition: background 0.2s, color 0.2s; } .nav-cta:hover { background: var(--accent); color: #fff; } @media (max-width: 399px) { .logo { font-size: 15px; max-width: 38%; } .nav-cta { font-size: 11px; padding: 7px 10px; } } /* ─── Section shared ─── */ .section-inner { max-width: 1100px; margin: 0 auto; } .section-label { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; font-family: var(--font-sans); } /* ─── Footer ─── */ footer { padding: 32px 24px; text-align: center; font-size: 12px; color: var(--text-faint); line-height: 1.6; } footer a { color: var(--text-faint); text-decoration: none; } footer a:hover { color: var(--accent); } .footer-disclaimer { max-width: 600px; margin: 0 auto 12px; font-size: 12px; } /* ─── Accordion (FAQ / sources / related-in-page use plain rows) ─── */ details > summary { list-style: none; cursor: pointer; } details > summary::-webkit-details-marker { display: none; }