/* theme.css — дизайн-слой харнесса.
*
* Выбор темы = одна строка в .
* Пять готовых направлений. Палитры и пары шрифтов взяты из ui-ux-pro-max-skill
* (MIT, Next Level Builder) — это не выдуманные значения, контраст проверен.
*
* Подключение:
*
* плюс на шрифты выбранной темы (см. комментарий у темы).
*
* Что уже сделано за тебя: типографическая шкала, отступы, радиусы, тени,
* фокус с клавиатуры, тач-таргеты 44px, safe-area на iPhone, отключение
* зума на инпутах в iOS, prefers-reduced-motion. Трогать не нужно.
*/
/* ─── ТЕМЫ ─────────────────────────────────────────────────────────────── */
/* trust — синий SaaS. Дефолт: калькуляторы, сервисы, формы, B2B.
Шрифт: Plus Jakarta Sans
*/
:root,
[data-theme="trust"] {
--font-heading: "Plus Jakarta Sans", system-ui, sans-serif;
--font-body: "Plus Jakarta Sans", system-ui, sans-serif;
--primary: #2563eb;
--on-primary: #ffffff;
--accent: #ea580c;
--bg: #f8fafc;
--fg: #1e293b;
--card: #ffffff;
--muted: #e9eff8;
--muted-fg: #475569;
--border: #e2e8f0;
--danger: #dc2626;
--ok: #059669;
}
/* smart — фиолетовый. AI, чат-боты, «умные» ассистенты, генерация.
Шрифты: Space Grotesk + DM Sans
*/
[data-theme="smart"] {
--font-heading: "Space Grotesk", system-ui, sans-serif;
--font-body: "DM Sans", system-ui, sans-serif;
--primary: #7c3aed;
--on-primary: #ffffff;
--accent: #0891b2;
--bg: #faf5ff;
--fg: #1e1b4b;
--card: #ffffff;
--muted: #eceef9;
--muted-fg: #475569;
--border: #ddd6fe;
--danger: #dc2626;
--ok: #059669;
}
/* calm — спокойный голубой с серифом в заголовках.
Запись, бронирование, здоровье, консультации, всё про людей.
Шрифты: Lora + Raleway
*/
[data-theme="calm"] {
--font-heading: "Lora", Georgia, serif;
--font-body: "Raleway", system-ui, sans-serif;
--primary: #0284c7;
--on-primary: #ffffff;
--accent: #059669;
--bg: #f0f9ff;
--fg: #0f172a;
--card: #ffffff;
--muted: #eff7fb;
--muted-fg: #475569;
--border: #e0f0f8;
--danger: #dc2626;
--ok: #059669;
}
/* night — тёмная с оранжевым. Инструменты, дашборды, всё для своих.
Шрифты: JetBrains Mono + IBM Plex Sans
*/
[data-theme="night"] {
--font-heading: "JetBrains Mono", ui-monospace, monospace;
--font-body: "IBM Plex Sans", system-ui, sans-serif;
--primary: #ea580c;
--on-primary: #ffffff;
--accent: #38bdf8;
--bg: #1c1917;
--fg: #fafaf9;
--card: #262321;
--muted: #2c1e16;
--muted-fg: #a8a29e;
--border: #3f3a37;
--danger: #f87171;
--ok: #34d399;
--shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
--shadow-md: 0 4px 16px rgb(0 0 0 / 0.5);
}
/* sharp — почти монохром с синим акцентом. Портфолио, лендинг, заявка.
Когда нужно «дорого и по делу», а не «дружелюбно».
Шрифты: Outfit + Rubik
*/
[data-theme="sharp"] {
--font-heading: "Outfit", system-ui, sans-serif;
--font-body: "Rubik", system-ui, sans-serif;
--primary: #18181b;
--on-primary: #ffffff;
/* Янтарь вместо синего из харнесса: синий — цвет интерфейса Telegram,
рядом с ним знак продукта читается как часть мессенджера. */
--accent: #f59e0b;
--bg: #fafafa;
--fg: #09090b;
--card: #ffffff;
--muted: #e8ecf0;
--muted-fg: #475569;
--border: #e4e4e7;
--danger: #dc2626;
--ok: #16a34a;
}
/* ─── ОБЩИЕ ТОКЕНЫ ─────────────────────────────────────────────────────── */
:root {
/* Типографическая шкала. Плавная: на телефоне мельче, на десктопе крупнее. */
--text-xs: 0.8125rem;
--text-sm: 0.9375rem;
--text-base: 1.0625rem;
--text-lg: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
--text-xl: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);
--text-2xl: clamp(2rem, 1.6rem + 2vw, 2.75rem);
--text-3xl: clamp(2.5rem, 1.9rem + 3vw, 3.75rem);
--leading-tight: 1.15;
--leading-normal: 1.55;
/* Шаг отступов один на весь продукт. Не «на глаз». */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--space-7: 3rem;
--radius-sm: 0.625rem;
--radius: 0.875rem;
--radius-lg: 1.25rem;
--radius-full: 999px;
--shadow-sm: 0 1px 2px rgb(15 23 42 / 0.06), 0 1px 3px rgb(15 23 42 / 0.05);
--shadow-md: 0 8px 24px -8px rgb(15 23 42 / 0.15);
/* Одна длительность на всё. Разнобой в анимациях читается как небрежность. */
--dur: 160ms;
--ease: cubic-bezier(0.2, 0, 0.1, 1);
--tap: 44px; /* минимальный тач-таргет по HIG */
}
/* ─── БАЗА ─────────────────────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
margin: 0;
min-height: 100dvh;
overflow-x: hidden; /* длинное слово или число не растягивает страницу */
background: var(--bg);
color: var(--fg);
font-family: var(--font-body);
font-size: var(--text-base);
line-height: var(--leading-normal);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
/* Safe area: на iPhone контент не залезает под чёлку и полоску жестов. */
padding:
env(safe-area-inset-top) env(safe-area-inset-right)
env(safe-area-inset-bottom) env(safe-area-inset-left);
}
/* Селекторы намеренно с `body`: Tailwind CDN подставляет свой preflight
* во время выполнения, после этого файла, и сбрасывает размер заголовков
* до `inherit`. Специфичность 0,0,2 выигрывает независимо от порядка. */
body h1, body h2, body h3 {
font-family: var(--font-heading);
line-height: var(--leading-tight);
letter-spacing: -0.02em;
text-wrap: balance; /* заголовок не оставляет одно слово на второй строке */
margin: 0;
}
body h1 { font-size: var(--text-2xl); font-weight: 700; }
body h2 { font-size: var(--text-xl); font-weight: 600; }
body h3 { font-size: var(--text-lg); font-weight: 600; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--primary); text-underline-offset: 3px; }
/* Фокус с клавиатуры виден всегда. Убирать outline нельзя. */
:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ─── КОМПОНЕНТЫ ───────────────────────────────────────────────────────── */
.wrap {
width: 100%;
max-width: 30rem;
margin-inline: auto;
padding: var(--space-5) var(--space-4) var(--space-6);
}
.card {
overflow-wrap: anywhere; /* длинный ввод переносится, а не ломает раскладку */
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: var(--space-5);
}
.stack > * + * { margin-top: var(--space-4); }
.stack-sm > * + * { margin-top: var(--space-2); }
.stack-lg > * + * { margin-top: var(--space-6); }
.muted { color: var(--muted-fg); font-size: var(--text-sm); }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: var(--tap);
width: 100%;
padding: var(--space-3) var(--space-5);
border: 1px solid transparent;
border-radius: var(--radius);
background: var(--primary);
color: var(--on-primary);
font-family: var(--font-body);
font-size: var(--text-base);
font-weight: 600;
cursor: pointer;
transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
-webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.985); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-ghost {
background: transparent;
color: var(--fg);
border-color: var(--border);
}
.field { display: block; }
.field > .label {
display: block;
margin-bottom: var(--space-2);
font-size: var(--text-sm);
font-weight: 500;
color: var(--muted-fg);
}
.field > input,
.field > select,
.field > textarea {
width: 100%;
min-height: var(--tap);
padding: var(--space-3);
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--card);
color: var(--fg);
font-family: var(--font-body);
/* 17px, не меньше 16: иначе iOS зумит страницу при фокусе на поле. */
font-size: var(--text-base);
transition: border-color var(--dur) var(--ease);
}
/* Плейсхолдер читаемый: на телефоне в солнце бледный серый исчезает. */
.field > input::placeholder { color: var(--muted-fg); opacity: 0.75; }
.field > input:focus { border-color: var(--primary); }
.error {
color: var(--danger);
font-size: var(--text-sm);
font-weight: 500;
}
.result {
font-family: var(--font-heading);
font-size: var(--text-3xl);
font-weight: 700;
line-height: 1;
letter-spacing: -0.03em;
/* Цифры не «прыгают» при пересчёте. */
font-variant-numeric: tabular-nums;
}
.badge {
display: inline-block;
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-full);
background: var(--muted);
color: var(--muted-fg);
font-size: var(--text-xs);
font-weight: 600;
}
[hidden] { display: none !important; }