/* ============================================================ Climatty — info pages (privacy, terms, about, methodology…) Built on the same design tokens as landing-v2.css. Strips out creative/media layers (clouds, gallery, gradients) and uses a reading-optimised single column with sticky TOC on desktop. ============================================================ */ /* Self-host the same Montserrat weight the React landing uses, so RU pages have identical typography without depending on the Google Fonts roundtrip. */ @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/montserrat-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --orange: #FF5A1F; --orange-soft: #FFE9DD; --ink: #0F0F10; --ink-2: #4A4A50; --paper: #FBF7F3; --card: #FFFFFF; --line: #ECE6DF; --muted: #6B6B72; } html { scroll-behavior: smooth; } body { font-family: 'Inter', system-ui, -apple-system, sans-serif; color: var(--ink); background: var(--paper); line-height: 1.65; overflow-x: clip; min-height: 100vh; -webkit-font-smoothing: antialiased; } /* RU pages set [lang="ru"] on — switch to Montserrat. */ html[lang="ru"] body, html[lang="ru"] h1, html[lang="ru"] h2, html[lang="ru"] h3 { font-family: 'Montserrat', 'Inter', sans-serif; } a { color: var(--orange); text-decoration: none; } a:hover { text-decoration: underline; } /* Logo never gets underline — matches landing nav behaviour. */ .logo, .logo:hover, .info-nav .nav-back, .info-nav .nav-back:hover { text-decoration: none; } .serif-it { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; letter-spacing: -0.02em; color: var(--orange); } /* ---- Nav (slim, no centered menu) -------------------------- */ .info-nav { padding: 28px 48px; display: flex; align-items: center; justify-content: space-between; max-width: 1240px; margin: 0 auto; } .info-nav .logo { display: inline-flex; align-items: center; color: #ff9f1a; font-weight: 800; font-size: 25px; letter-spacing: -0.4px; line-height: 0.98; white-space: nowrap; } .info-nav .nav-back { font-size: 14px; color: var(--ink-2); font-weight: 500; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); transition: all 0.18s ease; } .info-nav .nav-back:hover { color: var(--ink); text-decoration: none; border-color: var(--ink); transform: translateY(-1px); } /* ---- Page header (eyebrow + title + lead + updated) -------- */ .info-header { max-width: 1140px; margin: 0 auto; padding: 36px 48px 56px; } .info-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange); margin-bottom: 22px; } .info-eyebrow::before { content: "—"; font-weight: 400; } .info-title { font-size: clamp(40px, 5.5vw, 64px); font-weight: 600; letter-spacing: -0.04em; line-height: 1.02; text-wrap: balance; max-width: 18ch; margin-top: 0; } .info-lead { margin-top: 24px; max-width: 60ch; font-size: 18px; color: var(--ink-2); text-wrap: pretty; } .info-updated { margin-top: 28px; font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; } .info-updated::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); } /* ---- Body: two-column on desktop (TOC + content) ----------- */ .info-body { max-width: 1140px; margin: 0 auto; padding: 0 48px 120px; display: grid; grid-template-columns: 220px 1fr; gap: 80px; align-items: start; } .info-toc { position: sticky; top: 32px; font-size: 13px; } .info-toc-title { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; } .info-toc ol { list-style: none; display: flex; flex-direction: column; gap: 10px; counter-reset: toc; } .info-toc li { counter-increment: toc; } .info-toc a { color: var(--ink-2); font-weight: 500; display: block; padding: 4px 0; line-height: 1.35; border-left: 2px solid transparent; padding-left: 12px; margin-left: -14px; transition: all 0.15s ease; } .info-toc a::before { content: counter(toc, decimal-leading-zero); display: inline-block; width: 28px; font-family: 'Instrument Serif', serif; font-style: italic; color: var(--orange); font-size: 14px; } .info-toc a:hover { color: var(--ink); text-decoration: none; border-left-color: var(--line); } .info-toc a.is-active { color: var(--ink); border-left-color: var(--orange); } /* ---- Content typography ------------------------------------ */ .info-content { max-width: 680px; font-size: 16px; line-height: 1.75; color: var(--ink-2); } .info-content h2 { font-size: 28px; letter-spacing: -0.025em; line-height: 1.2; font-weight: 600; color: var(--ink); margin-top: 64px; margin-bottom: 18px; text-wrap: balance; scroll-margin-top: 24px; } .info-content h2:first-child { margin-top: 0; } .info-content h3 { font-size: 19px; letter-spacing: -0.02em; font-weight: 600; color: var(--ink); margin-top: 36px; margin-bottom: 12px; } .info-content p { margin-bottom: 18px; text-wrap: pretty; } .info-content strong { color: var(--ink); font-weight: 600; } .info-content em { font-family: 'Instrument Serif', serif; font-style: italic; color: var(--orange); font-size: 1.05em; font-weight: 400; } .info-content ul, .info-content ol { margin: 0 0 18px; padding-left: 24px; } .info-content li { margin-bottom: 8px; padding-left: 4px; } .info-content ul li::marker { color: var(--orange); } .info-content ol li::marker { color: var(--orange); font-weight: 600; } .info-content code { background: var(--orange-soft); color: var(--ink); padding: 2px 6px; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.92em; } .info-content blockquote { border-left: 3px solid var(--orange); padding: 12px 0 12px 24px; margin: 24px 0; color: var(--ink-2); font-style: italic; } .info-content table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 14px; } .info-content th, .info-content td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); } .info-content th { color: var(--ink); font-weight: 600; background: var(--card); } /* Inline divider between major content groups */ .info-content hr { border: 0; border-top: 1px solid var(--line); margin: 48px 0; } /* Contact callout at the bottom */ .info-contact { margin-top: 64px; padding: 28px 32px; background: var(--card); border: 1px solid var(--line); border-radius: 20px; display: flex; flex-direction: column; gap: 6px; } .info-contact strong { color: var(--ink); font-weight: 600; } .info-contact a { font-weight: 500; } /* ---- Footer ------------------------------------------------- */ .info-footer { max-width: 1240px; margin: 0 auto; padding: 48px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px; border-top: 1px solid var(--line); } .info-footer .logo { font-size: 19px; } .info-footer .copyright { font-size: 13px; color: var(--muted); } .info-footer-links { display: flex; gap: 24px; font-size: 13px; } .info-footer-links a { color: var(--ink-2); font-weight: 500; } .info-footer-links a:hover { color: var(--ink); text-decoration: none; } /* ---- Mobile ------------------------------------------------- */ @media (max-width: 900px) { .info-nav { padding: 20px 24px; } .info-nav .nav-back { padding: 8px 14px; font-size: 13px; } .info-header { padding: 20px 24px 36px; } .info-title { font-size: clamp(30px, 9vw, 40px); } .info-lead { font-size: 16px; margin-top: 18px; } .info-updated { margin-top: 22px; } .info-body { grid-template-columns: 1fr; gap: 0; padding: 0 24px 64px; } /* TOC бесполезна на узких экранах — скролл и так короткий. */ .info-toc { display: none; } .info-content { font-size: 15px; line-height: 1.7; } .info-content h2 { font-size: 22px; margin-top: 40px; margin-bottom: 14px; } .info-content h3 { font-size: 17px; margin-top: 28px; } .info-content p { margin-bottom: 14px; } .info-content ul, .info-content ol { padding-left: 20px; } .info-contact { padding: 20px 22px; margin-top: 44px; } .info-footer { padding: 28px 24px; flex-direction: column; align-items: flex-start; gap: 14px; } .info-footer-links { flex-wrap: wrap; gap: 16px 18px; } }