/* * Оформление публичных страниц Yoobi (оферта, условия, политика, тарифы, партнёрам). * * ⚠️ ОДИН ФАЙЛ НА ВСЕ СТРАНИЦЫ. Их несколько и будет больше; своя копия стилей в каждой * разъехалась бы на первой же смене фирменного стиля, а человек попадает на них из * приложения и обязан узнать Yoobi. * * ЛЕЖИТ В client/ НЕ СЛУЧАЙНО: каталог landing/ раздаётся nginx только точными адресами, * а /client/ — целиком, и уже служит общим складом. Значит правка nginx не нужна. * * ⚠️ ТЕМА — ТА ЖЕ, ЧТО НА САЙТЕ, И ТЕМ ЖЕ СПОСОБОМ: светлая по умолчанию, тёмная по * атрибуту data-theme="dark", который ставит общий переключатель Yoobi (ключ yoobi_theme). * prefers-color-scheme здесь НЕ используется: с ним документ жил своей жизнью — человек * выбирал на сайте светлую тему, открывал условия и получал чёрную страницу, потому что * у него в системе ночной режим. */ :root{ --brand:#ffc907; --brand-d:#f0b400; --brand-soft:#fff7da; --ink:#161616; --muted:#6a6a6a; --card:#fff; --bg:#faf9f7; --line:#ececec; --red:#d92d20; --red-soft:#fff1f0; --green:#12805c; --r:18px; --shadow:0 1px 2px rgba(22,22,22,.04), 0 8px 24px rgba(22,22,22,.06); } /* ⚠️ ТЕМА — ТА ЖЕ, ЧТО НА САЙТЕ, И ТЕМ ЖЕ СПОСОБОМ. Светлая по умолчанию; тёмная включается атрибутом data-theme="dark" на , который ставит общий переключатель Yoobi (client/app.js, ключ yoobi_theme в localStorage). Раньше здесь стоял prefers-color-scheme — и документ жил своей жизнью: человек включал на сайте светлую тему, открывал условия из приложения и получал чёрную страницу, потому что у него в системе ночной режим. Один сайт обязан выглядеть одним сайтом. */ :root[data-theme="dark"]{ --ink:#f4f3f1; --muted:#a3a09b; --card:#1c1b1a; --bg:#131211; --line:#2c2a28; --brand-soft:#2a2308; --red:#ff6b5e; --red-soft:#2a1513; --green:#4ade9f; --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35); } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--bg);color:var(--ink); font:16px/1.6 "Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-feature-settings:"ss01";overflow-x:hidden} .u{font-family:"Unbounded",sans-serif;letter-spacing:-.4px} /* ── шапка ── */ .top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)} .top-in{max-width:820px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:12px} .logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit} .logo img{width:32px;height:32px;border-radius:9px} .logo b{font-family:"Unbounded",sans-serif;font-weight:800;font-size:20px;letter-spacing:-.5px} .langs{margin-left:auto;display:flex;gap:6px;background:var(--line);padding:3px;border-radius:999px} .langs a{padding:6px 14px;border-radius:999px;text-decoration:none;color:var(--muted); font-size:14px;font-weight:600;transition:.15s} .langs a.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)} /* ── обложка ── */ .wrap{max-width:820px;margin:0 auto;padding:0 20px 80px} .hero{padding:40px 0 10px} .chip{display:inline-flex;align-items:center;gap:7px;background:var(--brand);color:#161616; font-size:13px;font-weight:700;padding:7px 14px;border-radius:999px;margin-bottom:18px} h1{font-family:"Unbounded",sans-serif;font-weight:800;font-size:clamp(26px,5vw,40px); line-height:1.12;letter-spacing:-1px;margin:0 0 12px} .sub{color:var(--muted);font-size:15px;margin:0} /* ── карточки ── */ .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r); padding:22px 24px;margin:16px 0;box-shadow:var(--shadow)} .card.accent{background:var(--brand-soft);border-color:transparent} .card.danger{background:var(--red-soft);border-color:transparent} .card h2{font-family:"Unbounded",sans-serif;font-weight:700;font-size:19px;letter-spacing:-.4px; margin:0 0 12px;display:flex;align-items:center;gap:11px;scroll-margin-top:80px} .num{flex:0 0 auto;width:28px;height:28px;border-radius:9px;background:var(--brand);color:#161616; font:700 14px/28px "Inter",sans-serif;text-align:center;font-family:"Inter",sans-serif;letter-spacing:0} .card.danger .num{background:var(--red);color:#fff} p{margin:0 0 11px} p:last-child{margin-bottom:0} .card p b{font-weight:600} .lead{font-size:17px;line-height:1.55} /* ── оглавление ── */ .toc{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;margin:6px 0 4px} .toc a{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:12px; text-decoration:none;color:inherit;font-size:14.5px;font-weight:500; background:var(--bg);border:1px solid var(--line);transition:.15s} .toc a:hover{border-color:var(--brand);transform:translateY(-1px)} .toc i{font-style:normal;font-weight:700;color:var(--muted);font-size:13px;min-width:14px} /* ── список запретов ── */ .bans{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:9px} .bans li{display:flex;align-items:flex-start;gap:11px;font-size:15px;line-height:1.5} .bans li::before{content:"✕";flex:0 0 auto;width:22px;height:22px;border-radius:7px; background:var(--red);color:#fff;font-size:12px;font-weight:700; display:grid;place-items:center;margin-top:1px} ul.plain{margin:6px 0 0;padding-left:20px} ul.plain li{margin-bottom:7px} .fill{display:inline-block;background:var(--red-soft);color:var(--red);border:1px dashed var(--red); border-radius:9px;padding:3px 9px;font-size:14px;font-weight:600} .kv{display:grid;gap:10px;margin-top:6px} .kv div{display:flex;gap:10px;font-size:15px;flex-wrap:wrap} .kv span{color:var(--muted);min-width:120px} footer{margin-top:32px;padding-top:22px;border-top:1px solid var(--line); color:var(--muted);font-size:14px;text-align:center} footer a{color:var(--ink);font-weight:600} a{color:inherit} [hidden]{display:none!important} @media (max-width:520px){ .card{padding:18px 17px} .top-in,.wrap{padding-left:16px;padding-right:16px} }