/* * karine-base.css * Базовые стили — токены и типографика из лендинга. * Подключается в всех страниц блога. * Лендинг (public/index.html) использует эти же переменные инлайн — * при желании можно вынести их сюда и заменить в лендинге на import. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #F5F3EF; --bg2: #EDEAE4; --text: #1C1815; --text-muted: #7A7570; --accent: #6B5B8E; --accent-light: #EBE6F5; --accent-dark: #4A3D6A; --warm: #C9A87C; --radius: 20px; } html { scroll-behavior: smooth; } body { font-family: 'Manrope', sans-serif; background: var(--bg); color: var(--text); overflow-x: hidden; } /* ─── Типографика (одинакова с лендингом) ─── */ h1, h2, h3 { font-family: 'Playfair Display', serif; letter-spacing: -0.5px; line-height: 1.2; } a { color: var(--accent); } a:hover { color: var(--accent-dark); } /* ─── NAV (та же логика что на лендинге) ─── */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 20px 40px; display: flex; justify-content: space-between; align-items: center; background: transparent; transition: background 0.3s, border-color 0.3s, padding 0.3s, box-shadow 0.3s; border-bottom: 1px solid transparent; } nav.scrolled { background: rgba(245,243,239,0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(0,0,0,0.07); padding: 14px 40px; box-shadow: 0 2px 16px rgba(0,0,0,0.06); } .logo { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; color: var(--text); text-decoration: none; } .nav-links { display: flex; align-items: center; gap: 8px; } .nav-link { font-size: 14px; font-weight: 500; color: var(--text-muted); text-decoration: none; padding: 8px 14px; border-radius: 50px; transition: color 0.2s, background 0.2s; } .nav-link:hover, .nav-link.active { color: var(--accent); background: var(--accent-light); } .nav-cta { background: var(--accent); color: #fff; border: none; border-radius: 50px; padding: 10px 24px; font-family: 'Manrope', sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: background 0.2s; } .nav-cta:hover { background: var(--accent-dark); color: #fff; } /* ─── Section shared ─── */ .section-inner { max-width: 1100px; margin: 0 auto; } .section-label { font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; font-family: 'Manrope', sans-serif; } .section-title { font-family: 'Playfair Display', serif; font-size: clamp(28px, 3vw, 42px); line-height: 1.2; letter-spacing: -0.5px; margin-bottom: 16px; } /* ─── Footer ─── */ footer { padding: 40px; text-align: center; border-top: 1px solid var(--bg2); font-size: 13px; color: var(--text-muted); line-height: 1.7; } footer a { color: var(--text-muted); } footer a:hover { color: var(--accent); } .footer-disclaimer { max-width: 600px; margin: 0 auto 12px; font-size: 12px; opacity: 0.7; } /* ─── Mobile ─── */ @media (max-width: 640px) { nav { padding: 16px 20px; } nav.scrolled { padding: 12px 20px; } .nav-link { display: none; } }