/* Starbunny OF DM — сайт-одностраничник (планы 038 и 041). Две темы, токены из /DESIGN.md. Дефолт — светлая (решение владельца 2026-07-22, системную не подхватываем); тёмная включается только руками через data-theme на и живёт в localStorage['sb-theme']. */ :root { color-scheme: light; --app: #fafafa; /* фон страницы */ --card: #ffffff; /* карточки, outline-кнопки */ --fg: #09090b; /* основной текст */ --fg-2: #27272a; /* текст мягче */ --muted: #f4f4f5; /* заливка hover, плашки */ /* На светлом --muted-fg и --faint сдвинуты на шаг темнее значений /DESIGN.md: там они для мелких метаданных в плотном UI, здесь — для абзацев на большом фоне. С зиновскими #71717A/#A1A1AA подписи дают 4.8:1 и 2.3:1 — второе не читается. Сдвиг даёт 6.8:1 и 4.8:1, оба проходят AA. */ --muted-fg: #52525b; /* вторичный текст */ --faint: #6b6b75; /* метаданные; на #71717A строка .step-log давала 4.4:1 */ --border: #e7e7ea; /* бордеры */ --border-2: #d4d4d8; /* бордер на hover */ --primary: #00aff0; /* акцент (OF-синий) — заливки, бордеры, точки */ /* Тот же акцент буквами: на белом чистый #00AFF0 даёт 2.4:1 и для подписей не годится. --primary-ink — единственное, чем красим ТЕКСТ акцентом. */ --primary-ink: #00719f; --primary-deep: #0090d4; /* hover акцента — ТЕМНЕЕТ на светлом */ --ring: rgba(0, 175, 240, 0.32); /* мягкое свечение под кнопками */ --ring-focus: rgba(0, 175, 240, 0.9); /* кольцо фокуса: на 0.32 контраст 1.7:1 — глазом не видно */ --green: #22c55e; --green-fg: #15803d; --amber: #f59e0b; --amber-fg: #b45309; --red: #ef4444; --red-fg: #b91c1c; --shadow: 0 1px 2px rgba(9, 9, 11, 0.05); --shadow-md: 0 6px 18px -6px rgba(9, 9, 11, 0.14), 0 2px 6px -2px rgba(9, 9, 11, 0.08); --btn-r: 999px; /* кнопки-пилюли */ --r-card: 16px; /* радиус карточек */ --mono: 'Geist Mono', ui-monospace, SFMono-Regular, monospace; /* какая иконка видна в переключателе: в светлой теме предлагаем луну */ --icon-moon: inline; --icon-sun: none; --shot-light: block; --shot-dark: none; } /* тёмная выбрана руками */ :root[data-theme='dark'] { color-scheme: dark; --app: #0b0b0e; --card: #161619; --fg: #fafafa; --fg-2: #d4d4d8; --muted: #26262a; --muted-fg: #a1a1aa; --faint: #909099; --border: #27272b; --border-2: #3a3a41; --primary: #00aff0; --primary-ink: #00aff0; --primary-deep: color-mix(in srgb, #00aff0 62%, #ffffff); --green: #22c55e; --green-fg: #4ade80; --amber: #f59e0b; --amber-fg: #fbbf24; --red: #f87171; --red-fg: #f87171; --shadow: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 10px 30px -10px rgba(0, 0, 0, 0.7), 0 3px 10px -3px rgba(0, 0, 0, 0.5); --icon-moon: none; --icon-sun: inline; --shot-light: none; --shot-dark: block; } /* ---------- база ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; } section { scroll-margin-top: 84px; } /* якоря не ныряют под липкую шапку */ body { background: var(--app); color: var(--fg); font: 400 15px/1.6 'Geist', 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } .container { max-width: 1080px; margin-inline: auto; padding-inline: 20px; } h1, h2, h3 { letter-spacing: -0.02em; } h2 { font-size: 30px; font-weight: 600; line-height: 1.2; } .section { padding-block: 44px; } .section-head { text-align: center; max-width: 640px; margin-inline: auto; } .section-head p { margin-top: 10px; color: var(--muted-fg); font-size: 15.5px; } :focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring-focus); border-radius: 6px; } /* ---------- кнопки-пилюли ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding-inline: 22px; border-radius: var(--btn-r); border: 1px solid transparent; font: 500 15px/1 'Geist', 'Inter', system-ui, sans-serif; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; cursor: pointer; } .btn svg { flex: none; } .btn-primary { background: var(--primary); color: #ffffff; box-shadow: 0 4px 12px -3px var(--ring); } .btn-primary:hover { background: var(--primary-deep); box-shadow: 0 7px 18px -4px var(--ring); } .btn-primary:focus-visible { border-radius: var(--btn-r); } .btn-secondary { background: var(--card); border-color: var(--border); color: var(--fg); box-shadow: var(--shadow); } .btn-secondary:hover { background: var(--muted); border-color: var(--border-2); } .btn-secondary:focus-visible { border-radius: var(--btn-r); } .btn-sm { height: 38px; padding-inline: 16px; font-size: 14px; } /* ---------- переключатель темы ---------- */ .theme-toggle { flex: none; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--border); background: var(--card); color: var(--muted-fg); box-shadow: var(--shadow); cursor: pointer; } .theme-toggle:hover { background: var(--muted); border-color: var(--border-2); color: var(--fg); } .theme-toggle:focus-visible { border-radius: 50%; } /* какая иконка показана — решают токены темы, а не JS */ .theme-toggle .icon-moon { display: var(--icon-moon); } .theme-toggle .icon-sun { display: var(--icon-sun); } /* ---------- карточка ---------- */ .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow); } /* ---------- шапка (секция 1) ---------- */ .site-header { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--app) 88%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); } .site-header .container { display: flex; align-items: center; gap: 24px; height: 64px; } .brand { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; text-decoration: none; margin-right: auto; } .brand img { width: 32px; height: 32px; border-radius: 50%; } .site-nav { display: flex; align-items: center; gap: 20px; } .site-nav a { font-size: 13.5px; color: var(--muted-fg); text-decoration: none; } .site-nav a:hover { color: var(--fg); } /* ---------- hero (секция 2) ---------- */ .hero { padding-top: 72px; text-align: center; } .hero h1 { font-size: clamp(32px, 5.2vw, 52px); font-weight: 650; line-height: 1.08; max-width: 780px; margin-inline: auto; } .hero-sub { margin: 18px auto 0; max-width: 640px; font-size: 16px; color: var(--muted-fg); } .hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; } .hero-note { margin-top: 14px; font-size: 13px; color: var(--faint); } .shot-light { display: var(--shot-light); } .shot-dark { display: var(--shot-dark); } .shot { margin-top: 44px; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-md); background: var(--card); } /* ---------- карточка-опора ---------- */ .pillar { padding: 22px; } .pillar h3 { font-size: 16px; font-weight: 600; } .pillar p { margin-top: 8px; font-size: 14px; color: var(--muted-fg); } /* ---------- как это работает (секция 4) ---------- */ .step { padding: 18px 16px; display: flex; flex-direction: column; gap: 9px; } .step-num { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary-ink); font-size: 13px; font-weight: 600; } .step h3 { font-size: 15px; font-weight: 600; } .step p { font-size: 13.5px; color: var(--muted-fg); flex: 1; } .step-log { font-family: var(--mono); font-size: 12px; color: var(--faint); background: var(--muted); border-radius: 8px; padding: 6px 10px; } .how-note { margin-top: 30px; text-align: center; font-size: 16px; color: var(--fg-2); } /* ---------- крупная карточка-заявление (секция «База») ---------- */ .lead-card { padding: 40px 32px; text-align: center; } .lead-card h2 { max-width: 620px; margin-inline: auto; } .lead-card p { margin: 14px auto 0; max-width: 620px; font-size: 15.5px; color: var(--muted-fg); } /* ---------- журнал (секция 7) ---------- */ .journal-window { max-width: 680px; margin: 32px auto 0; overflow: hidden; } .journal-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); } .journal-head b { font-size: 14px; font-weight: 600; } .journal-head span { font-size: 12px; color: var(--faint); } .journal-row { display: flex; align-items: center; gap: 10px; padding: 12px 18px; } .journal-row + .journal-row { border-top: 1px solid var(--border); } .journal-row .dot { flex: none; width: 7px; height: 7px; border-radius: 50%; } .dot-primary { background: var(--primary); } .dot-faint { background: var(--faint); } .dot-green { background: var(--green); } .journal-row .txt { flex: 1; font-size: 13.5px; color: var(--fg-2); } .journal-row time { font-family: var(--mono); font-size: 12px; color: var(--faint); } /* ---------- скачать (секция 8) ---------- */ .download-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; } .download-note { margin-top: 14px; text-align: center; font-size: 13px; color: var(--muted-fg); } /* ---------- details (установка + FAQ) ---------- */ details.card { padding: 0; } details.card summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px; font-size: 15px; font-weight: 500; } details.card summary::-webkit-details-marker { display: none; } details.card summary::after { content: ''; flex: none; width: 8px; height: 8px; border-right: 1.5px solid var(--muted-fg); border-bottom: 1.5px solid var(--muted-fg); transform: rotate(45deg); margin-top: -4px; } details.card[open] summary::after { transform: rotate(-135deg); margin-top: 4px; } details.card .details-body { padding: 0 20px 18px; } details.card .details-body p { font-size: 14px; color: var(--muted-fg); } details.card .details-body p + p { margin-top: 10px; } details.card .details-body b { color: var(--fg-2); } .faq-list { max-width: 680px; margin: 32px auto 0; display: flex; flex-direction: column; gap: 10px; } /* ---------- финальный CTA (секция 10) ---------- */ .final-cta { text-align: center; padding-block: 72px; } .final-cta .btn { margin-top: 26px; } .final-cta-note { margin-top: 14px; font-size: 13px; color: var(--faint); } /* ---------- подвал (секция 11) ---------- */ .site-footer { border-top: 1px solid var(--border); padding-block: 28px; } .site-footer .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .footer-brand { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted-fg); } .footer-brand img { width: 24px; height: 24px; border-radius: 50%; } .footer-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .footer-meta a { font-size: 13px; color: var(--muted-fg); text-decoration: none; } .footer-meta a:hover { color: var(--fg); } .footer-meta a[aria-current="true"] { color: var(--fg); font-weight: 600; } .footer-meta span { font-size: 12px; color: var(--faint); } /* ---------- движение (интенсивность ~3/10) ---------- */ @media (prefers-reduced-motion: no-preference) { .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; } .reveal.in { opacity: 1; transform: none; } .btn-primary:hover { transform: translateY(-1px); } .btn { transition: background .15s ease, transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .site-nav a, .footer-meta a { transition: color .14s ease; } .lang-menu .chev { transition: transform .16s ease; } details.card summary::after { transition: transform .16s ease; } .tier { transition: border-color .16s ease, box-shadow .16s ease; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ---------- адаптив ---------- */ @media (max-width: 719px) { .site-nav { display: none; } /* язык живёт в подвале: в шапке телефона он выдавливал «Выбрать тариф» за экран */ .lang-menu { display: none; } h2 { font-size: 26px; } .hero { padding-top: 48px; } .hero-actions .btn { width: 100%; } .section { padding-block: 34px; } .final-cta { padding-block: 56px; } .lead-card { padding: 30px 20px; } } /* ---------- план 041: база, сравнение, шаги, тарифы, покупка ---------- */ /* Mac + Windows — отличие от конкурента, поэтому чип, а не строчка мелким */ .os-badge { display: inline-block; padding: 3px 10px; border-radius: var(--btn-r); background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary-ink); font-size: 12.5px; font-weight: 600; } .shot-note { margin-top: 12px; text-align: center; font-size: 13px; color: var(--faint); } /* сравнение с накруткой */ .compare-wrap { margin-top: 32px; max-width: 800px; margin-inline: auto; overflow-x: auto; /* едет таблица, а не страница */ border: 1px solid var(--border); border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow); } .compare { width: 100%; min-width: 460px; /* ниже этого две колонки нечитаемы — включается скролл */ border-collapse: collapse; text-align: left; } .compare th, .compare td { padding: 13px 18px; font-size: 14px; vertical-align: top; width: 50%; } .compare th { font-size: 13px; font-weight: 600; color: var(--faint); border-bottom: 1px solid var(--border); } .compare thead th:last-child { color: var(--primary-ink); } .compare td { color: var(--muted-fg); } .compare tbody tr + tr td { border-top: 1px solid var(--border); } .compare td:first-child { color: var(--faint); } .compare td:last-child { color: var(--fg-2); } .compare th + th, .compare td + td { border-left: 1px solid var(--border); } .compare-note { margin: 20px auto 0; max-width: 680px; text-align: center; font-size: 15px; color: var(--muted-fg); } /* четыре шага «как это работает» */ .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 32px; } /* безопасность */ .safety-body { max-width: 680px; margin: 32px auto 0; } .safety-h { font-size: 19px; font-weight: 600; } .human-list { margin-top: 14px; padding-left: 20px; display: flex; flex-direction: column; gap: 9px; } .human-list li { font-size: 15px; color: var(--muted-fg); } .human-list li::marker { color: var(--primary-ink); } .safety-callout { margin-top: 22px; } .safety-callout h3 { font-size: 16px; } .safety-details { margin-top: 12px; } /* тарифы — сетка 1/2/4/10, цифры из docs/PRICING.md */ /* без align-items:start — карточки одной высоты, кнопки на одной линии */ .pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 32px; } .tier { padding: 30px 22px; display: flex; flex-direction: column; gap: 2px; } /* наведение подсвечивает карточку акцентом, а не серым */ .tier:hover { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary), var(--shadow-md); } .tier .btn-secondary:hover { background: color-mix(in srgb, var(--primary) 10%, var(--card)); border-color: var(--primary); color: var(--primary-ink); } .tier h3 { font-size: 16px; font-weight: 600; } .tier-price { margin-top: 8px; font-size: 30px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.1; } .tier-price span { font-size: 14px; font-weight: 400; color: var(--faint); letter-spacing: 0; margin-left: 3px; } .tier-price-soon { color: var(--faint); font-size: 24px; } .tier-per { margin-top: 4px; margin-bottom: 26px; font-size: 13px; color: var(--faint); } .tier .btn { width: 100%; margin-top: auto; } .tier-featured { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary), var(--shadow-md); } .tier-badge { align-self: flex-start; margin-bottom: 8px; padding: 3px 9px; border-radius: var(--btn-r); background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary-ink); font-size: 11.5px; font-weight: 500; } /* Тарифы без бейджа держат его место, иначе их заголовки уезжают вверх */ .tier:not(:has(.tier-badge))::before { content: ''; display: block; height: 24px; margin-bottom: 8px; } /* «Выгоднее всего» не должен спорить с выделенным тарифом — тот же размер, тише цветом */ .tier-badge-quiet { background: var(--muted); color: var(--muted-fg); } /* Тариф без цены: карточка живая (кнопка ведёт в чат), но визуально тише */ .tier-soon { opacity: 0.82; } .pricing-pay { margin: 24px auto 0; max-width: 620px; text-align: center; font-size: 14px; color: var(--muted-fg); } /* как купить */ .buy-steps { max-width: 560px; margin: 26px auto 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; } .buy-steps li { font-size: 15px; color: var(--fg-2); } .buy-steps li::marker { color: var(--primary-ink); font-weight: 600; } .buy-note { margin: 18px auto 0; max-width: 620px; text-align: center; font-size: 14px; color: var(--faint); } /* ссылки внутри текстовых сносок */ .download-note a, .faq-more a, .details-body a { color: var(--primary-ink); text-decoration: none; } .download-note a:hover, .faq-more a:hover, .details-body a:hover { text-decoration: underline; } .faq-more { margin: 20px auto 0; text-align: center; font-size: 14px; color: var(--muted-fg); } /* ---------- адаптив плана 041 ---------- */ @media (max-width: 1023px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .pricing-grid { grid-template-columns: repeat(2, 1fr); max-width: 620px; margin-inline: auto; } } @media (max-width: 719px) { .grid-4 { grid-template-columns: 1fr; } .pricing-grid { grid-template-columns: 1fr; max-width: 400px; } .compare th, .compare td { padding: 12px 14px; } .safety-body { margin-top: 26px; } /* в одну колонку выравнивать нечего — резерв под бейдж стал бы дырой сверху */ .tier:not(:has(.tier-badge))::before { display: none; } } /* Имя рядом с логотипом не должно переноситься на вторую строку: сначала запрещаем перенос, и только на совсем узких экранах убираем текст. */ .brand { white-space: nowrap; } @media (max-width: 360px) { .brand-text { display: none; } } /* ---------- переключатель языка (RU/EN/UK) ---------- */ /*
вместо самодельного дропдауна: открытие, закрытие и клавиатура — нативные. JS в theme.js добавляет только закрытие по клику мимо и Esc. Кнопка ростом и формой повторяет тумблер темы, пункты названы на своих языках: англоязычный посетитель ищет «English», а не «EN». */ .lang-menu { position: relative; flex: none; } .lang-menu > summary { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 13px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); box-shadow: var(--shadow); color: var(--muted-fg); font-size: 13px; font-weight: 600; cursor: pointer; user-select: none; list-style: none; /* стрелка-маркер details не нужна — есть свой шеврон */ } .lang-menu > summary::-webkit-details-marker { display: none; } .lang-menu > summary:hover { background: var(--muted); border-color: var(--border-2); color: var(--fg); } .lang-menu[open] > summary { border-color: var(--border-2); color: var(--fg); } .lang-menu[open] .chev { transform: rotate(180deg); } .lang-menu-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 170px; display: flex; flex-direction: column; padding: 5px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-md); } .lang-menu-list a { padding: 8px 10px; border-radius: 9px; font-size: 13.5px; color: var(--muted-fg); text-decoration: none; } .lang-menu-list a:hover { background: var(--muted); color: var(--fg); } .lang-menu-list a[aria-current="true"] { color: var(--fg); font-weight: 600; }