145 lines
7.9 KiB
CSS
145 lines
7.9 KiB
CSS
/* ============================================================
|
||
* KT AI Page — примитивы СТРАНИЦЫ (лендинг, вход, ошибка, документация).
|
||
* Требует kt-ai-tokens.css. Подключать ДОПОЛНИТЕЛЬНО к kt-ai-components.css.
|
||
*
|
||
* Зачем отдельный файл: kt-ai-components.css покрывает продуктовые экраны
|
||
* внутри приложения (таблицы, формы, drawer). Всё, что «до входа» — лендинг,
|
||
* страница входа, 404, публичная документация — приходилось верстать руками,
|
||
* и каждый делал это по-своему. Здесь только каркас: ритм, контейнер, сетка.
|
||
* Ничего брендового — цвет и вордмарк живут в слое продукта.
|
||
*
|
||
* app-shell этот файл НЕ подключает: внутри приложения он не нужен.
|
||
* ============================================================ */
|
||
|
||
@layer kt-page {
|
||
|
||
/* ---------- База страницы ----------
|
||
Подключение этого файла означает «страницу целиком строю на ДС», поэтому
|
||
здесь можно задать основу. kt-ai-components.css этого НЕ делает намеренно:
|
||
его вендорят в чужое приложение, и перекрашивать чужой body нельзя.
|
||
Без этой базы страница уезжала в браузерный serif — базовый шрифт задавался
|
||
только в HTML app-shell (тот же перекос, что был с box-sizing). */
|
||
html { scrollbar-gutter: stable; } /* место под скроллбар зарезервировано всегда: контент не прыгает вбок, когда модал прячет скроллбар */
|
||
body {
|
||
margin: 0;
|
||
background: var(--kt-ai-bg);
|
||
color: var(--kt-ai-fg);
|
||
font-family: var(--kt-ai-font-sans);
|
||
font-size: var(--kt-ai-text-md);
|
||
line-height: var(--kt-ai-leading-normal);
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
::selection { background: var(--kt-ai-selection); }
|
||
|
||
/* ---------- Контейнер и ритм ---------- */
|
||
.kt-ai-wrap { width: min(1080px, 92vw); margin-inline: auto; }
|
||
.kt-ai-wrap[data-width="narrow"] { width: min(720px, 92vw); }
|
||
.kt-ai-wrap[data-width="wide"] { width: min(1200px, 94vw); }
|
||
|
||
/* Вертикальный ритм секций: одна переменная вместо margin вручную у каждой. */
|
||
.kt-ai-section { padding-block: clamp(48px, 8vh, 88px); }
|
||
.kt-ai-section[data-divider="true"] { border-top: 1px solid var(--kt-ai-divider); }
|
||
.kt-ai-section-head { max-width: 640px; }
|
||
.kt-ai-section-head h2 {
|
||
margin: 0; font-size: var(--kt-ai-text-2xl); font-weight: var(--kt-ai-weight-semibold);
|
||
letter-spacing: -0.02em; color: var(--kt-ai-fg);
|
||
}
|
||
.kt-ai-section-head p {
|
||
margin: var(--kt-ai-space-5) 0 0; color: var(--kt-ai-fg-muted);
|
||
font-size: var(--kt-ai-text-lg); line-height: var(--kt-ai-leading-normal);
|
||
}
|
||
.kt-ai-section-head .kt-ai-tagline {
|
||
display: block; margin-top: var(--kt-ai-space-3);
|
||
color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-md);
|
||
}
|
||
|
||
/* ---------- Шапка страницы (тонкая, контент важнее хрома) ---------- */
|
||
.kt-ai-pagehead {
|
||
position: sticky; top: 0; z-index: var(--kt-ai-z-sticky);
|
||
border-bottom: 1px solid var(--kt-ai-border);
|
||
background: var(--kt-ai-bg-glass);
|
||
-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
|
||
}
|
||
.kt-ai-pagehead-in { display: flex; align-items: center; gap: var(--kt-ai-space-6); height: 56px; }
|
||
.kt-ai-pagehead-in > .kt-ai-spacer { margin-left: auto; }
|
||
@media (prefers-reduced-transparency: reduce) {
|
||
.kt-ai-pagehead { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--kt-ai-bg-elevated); }
|
||
}
|
||
|
||
/* ---------- Hero ---------- */
|
||
.kt-ai-hero { padding-block: clamp(56px, 11vh, 104px) clamp(40px, 7vh, 72px); }
|
||
.kt-ai-hero[data-align="center"] { text-align: center; }
|
||
.kt-ai-hero h1 {
|
||
margin: 0; font-size: clamp(32px, 5.5vw, 52px); font-weight: var(--kt-ai-weight-semibold);
|
||
letter-spacing: -0.035em; line-height: 1.05; color: var(--kt-ai-fg);
|
||
}
|
||
.kt-ai-hero-sub {
|
||
margin: var(--kt-ai-space-6) 0 0; max-width: 620px;
|
||
color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-lg);
|
||
line-height: var(--kt-ai-leading-normal);
|
||
}
|
||
.kt-ai-hero[data-align="center"] .kt-ai-hero-sub { margin-inline: auto; }
|
||
.kt-ai-hero-actions { display: flex; gap: var(--kt-ai-space-4); margin-top: var(--kt-ai-space-8); flex-wrap: wrap; }
|
||
.kt-ai-hero[data-align="center"] .kt-ai-hero-actions { justify-content: center; }
|
||
|
||
/* ---------- Сетка возможностей (bento) ----------
|
||
Плитки группируются границей, а не тенью — как карточки в приложении.
|
||
data-span управляет шириной: следи, чтобы сумма давала целые ряды,
|
||
иначе в сетке появится дыра (это «гигантская пустота» из красных флагов). */
|
||
.kt-ai-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--kt-ai-space-6); }
|
||
.kt-ai-grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
|
||
.kt-ai-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
|
||
.kt-ai-tile {
|
||
border: 1px solid var(--kt-ai-card-border); border-radius: var(--kt-ai-radius-3xl);
|
||
background: var(--kt-ai-card-bg); padding: var(--kt-ai-space-8);
|
||
transition: border-color var(--kt-ai-dur-base) var(--kt-ai-ease-standard);
|
||
}
|
||
.kt-ai-tile:hover { border-color: var(--kt-ai-card-border-hover); }
|
||
.kt-ai-tile[data-span="2"] { grid-column: span 2; }
|
||
.kt-ai-tile[data-span="full"] { grid-column: 1 / -1; }
|
||
.kt-ai-tile h3 {
|
||
margin: 0; font-size: var(--kt-ai-text-lg); font-weight: var(--kt-ai-weight-semibold);
|
||
letter-spacing: -0.01em; color: var(--kt-ai-fg);
|
||
}
|
||
.kt-ai-tile p {
|
||
margin: var(--kt-ai-space-4) 0 0; color: var(--kt-ai-fg-muted);
|
||
font-size: var(--kt-ai-text-md); line-height: var(--kt-ai-leading-normal);
|
||
}
|
||
.kt-ai-tile-icon { display: inline-flex; margin-bottom: var(--kt-ai-space-5); color: var(--kt-ai-fg-muted); }
|
||
.kt-ai-tile-icon svg { width: 18px; height: 18px; }
|
||
|
||
/* ---------- Призыв к действию ---------- */
|
||
.kt-ai-cta { text-align: center; padding-block: clamp(64px, 11vh, 108px); }
|
||
.kt-ai-cta h2 {
|
||
margin: 0; font-size: var(--kt-ai-text-2xl); font-weight: var(--kt-ai-weight-semibold);
|
||
letter-spacing: -0.02em; color: var(--kt-ai-fg);
|
||
}
|
||
.kt-ai-cta p { margin: var(--kt-ai-space-4) 0 var(--kt-ai-space-8); color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-lg); }
|
||
|
||
/* ---------- Подвал ---------- */
|
||
.kt-ai-pagefoot {
|
||
border-top: 1px solid var(--kt-ai-divider); padding-block: var(--kt-ai-space-8);
|
||
display: flex; align-items: center; gap: var(--kt-ai-space-6);
|
||
color: var(--kt-ai-fg-faint); font-size: var(--kt-ai-text-sm); flex-wrap: wrap;
|
||
}
|
||
.kt-ai-pagefoot > .kt-ai-spacer { margin-left: auto; }
|
||
|
||
/* ---------- Центрированная карточка (вход, 404) ---------- */
|
||
.kt-ai-centered {
|
||
min-height: 100dvh; display: grid; place-items: center; padding: var(--kt-ai-space-8);
|
||
}
|
||
.kt-ai-centered > * { width: min(400px, 100%); }
|
||
|
||
/* ---------- Адаптив ---------- */
|
||
@media (max-width: 900px) {
|
||
.kt-ai-grid, .kt-ai-grid[data-cols="4"] { grid-template-columns: repeat(2, 1fr); }
|
||
.kt-ai-tile[data-span="2"] { grid-column: span 2; }
|
||
}
|
||
@media (max-width: 620px) {
|
||
.kt-ai-grid, .kt-ai-grid[data-cols="2"], .kt-ai-grid[data-cols="4"] { grid-template-columns: 1fr; }
|
||
.kt-ai-tile[data-span="2"], .kt-ai-tile[data-span="full"] { grid-column: span 1; }
|
||
.kt-ai-pagehead-in { height: 52px; gap: var(--kt-ai-space-4); }
|
||
}
|
||
|
||
}
|