/* Общие стили SEO-посадочных Планерум — в фирменном стиле лендинга (liquid glass). Классы совпадают с разметкой страниц; шрифты Onest/Instrument Serif грузятся в страниц. */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Onest', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: oklch(0.18 0.02 150); background: #F5F3EE; background: radial-gradient(at 18% 22%, oklch(0.88 0.08 135 / 0.55), transparent 55%), radial-gradient(at 82% 8%, oklch(0.86 0.10 65 / 0.50), transparent 55%), radial-gradient(at 95% 75%, oklch(0.82 0.09 200 / 0.45), transparent 60%), radial-gradient(at 25% 92%, oklch(0.88 0.06 320 / 0.40), transparent 55%), oklch(0.97 0.012 95); background-attachment: fixed; line-height: 1.6; -webkit-font-smoothing: antialiased; } .wrap { max-width: 920px; margin: 0 auto; padding: 0 24px; } /* Шапка — полупрозрачная, как навбар лендинга */ header { background: oklch(1 0 0 / 0.6); backdrop-filter: blur(10px); border-bottom: 1px solid oklch(1 0 0 / 0.7); padding: 14px 0; position: sticky; top: 0; z-index: 10; } header .wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; } .logo { font-size: 21px; font-weight: 700; color: oklch(0.18 0.02 150); text-decoration: none; letter-spacing: -0.02em; } .logo span { color: oklch(0.42 0.07 135); } nav a { margin-left: 20px; color: oklch(0.4 0.015 150); text-decoration: none; font-size: 14px; font-weight: 500; transition: color .15s; } nav a:hover { color: oklch(0.42 0.07 135); } .crumbs { font-size: 13px; color: oklch(0.55 0.012 150); padding: 18px 0 0; } .crumbs a { color: oklch(0.42 0.07 135); text-decoration: none; } .hero { padding: 72px 0 52px; text-align: center; } h1 { font-size: 46px; line-height: 1.1; margin-bottom: 18px; font-weight: 700; letter-spacing: -0.02em; } h1 em { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; color: oklch(0.42 0.07 135); letter-spacing: 0; } .hero p.lead { font-size: 18px; color: oklch(0.38 0.015 150); max-width: 640px; margin: 0 auto 30px; } /* Кнопка — зелёный градиент как .lg-btn.is-primary */ .cta { display: inline-block; background: linear-gradient(135deg, oklch(0.55 0.11 135), oklch(0.42 0.07 135)); color: #fff; padding: 14px 34px; border-radius: 12px; text-decoration: none; font-weight: 700; font-size: 16px; box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.3), 0 4px 16px -4px oklch(0.42 0.07 135 / 0.5); transition: filter .15s, transform .15s; } .cta:hover { filter: brightness(1.08); transform: translateY(-1px); } .sub { margin-top: 14px; font-size: 13px; color: oklch(0.55 0.012 150); } section { padding: 56px 0; } section + section { border-top: 1px solid oklch(0.2 0.02 150 / 0.08); } h2 { font-size: 31px; margin-bottom: 16px; font-weight: 700; letter-spacing: -0.02em; } h3 { font-size: 18px; margin-bottom: 8px; color: oklch(0.42 0.07 135); font-weight: 600; } p { color: oklch(0.34 0.015 150); margin-bottom: 12px; } ul { padding-left: 20px; color: oklch(0.34 0.015 150); } ul li { margin-bottom: 8px; } strong { color: oklch(0.18 0.02 150); } /* Стеклянные карточки */ .card, .feature { background: oklch(1 0 0 / 0.6); backdrop-filter: blur(8px); border: 1px solid oklch(1 0 0 / 0.7); border-radius: 18px; padding: 26px; box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.8), 0 6px 24px -12px oklch(0.2 0.02 150 / 0.25); } .card { margin-top: 20px; } .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 28px; } .steps { counter-reset: step; margin-top: 24px; } .step { display: flex; gap: 16px; margin-bottom: 22px; } .step-num { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, oklch(0.55 0.11 135), oklch(0.42 0.07 135)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; } .faq dt { font-weight: 700; color: oklch(0.18 0.02 150); margin-top: 18px; font-size: 17px; } .faq dd { color: oklch(0.34 0.015 150); margin: 6px 0 0; } .related { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; } .related a { display: inline-block; background: oklch(0.95 0.035 145); color: oklch(0.40 0.08 140); padding: 9px 18px; border-radius: 100px; text-decoration: none; font-size: 14px; font-weight: 600; border: 1px solid oklch(0.42 0.07 135 / 0.25); transition: background .15s; } .related a:hover { background: oklch(0.92 0.05 145); } footer { background: oklch(0.18 0.02 150); color: oklch(1 0 0 / 0.6); padding: 36px 0; text-align: center; font-size: 13px; margin-top: 8px; } footer a { color: oklch(1 0 0 / 0.6); margin: 0 10px; text-decoration: none; } footer a:hover { color: #2AABEE; } @media (max-width: 600px) { h1 { font-size: 33px; } h2 { font-size: 25px; } .hero { padding: 48px 0 40px; } nav a { margin-left: 14px; font-size: 13px; } }