/* ============================================================
WDA UI KIT — KIT STYLES
Documentation chrome + reusable component library.
============================================================ */
/* Fonts are now loaded via + a direct stylesheet
in each page (see the font block injected before tokens.css). The old
CSS @import was removed because it forces a render-blocking request chain
(kit.css must download & parse before the font request is even discovered),
which delays LCP. Same families/weights/display=swap — no visual change. */
*, *::before, *::after { box-sizing: border-box; }
/* ---------------- Skip link (accessibility) ----------------
First focusable element on every page. Visually offscreen until
focused, then slides into view. Targets the page's . */
.skip-link {
position: absolute; left: 16px; top: -60px; z-index: var(--z-toast);
background: var(--color-ink); color: #fff; padding: 10px 18px;
border-radius: var(--radius-md); font-weight: var(--fw-semibold);
font-size: var(--fs-body-sm); text-decoration: none;
transition: top var(--motion-duration-fast) var(--motion-easing-standard);
}
.skip-link:focus { top: 16px; outline: none; box-shadow: var(--shadow-focus); }
/* main receives focus when skipped to, without a persistent outline ring. */
main:focus { outline: none; }
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }
html { scroll-behavior: smooth; scroll-padding-top: 32px; }
body {
margin: 0;
font-family: var(--font-sans);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--color-text-primary);
background: var(--color-bg-surface);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
/* ---------------- Doc layout shell ---------------- */
.kit { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.kit-nav {
position: sticky; top: 0; align-self: start;
height: 100vh; overflow-y: auto;
background: var(--color-ink);
color: var(--color-text-inverse);
padding: 28px 20px 40px;
z-index: var(--z-header);
}
.kit-nav__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.kit-nav__brand svg { height: 30px; width: auto; }
.kit-nav__tag {
font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
color: var(--color-text-on-dark-muted); margin: 0 0 26px 2px;
}
.kit-nav ol { list-style: none; margin: 0; padding: 0; counter-reset: nav; }
.kit-nav li { margin: 1px 0; }
.kit-nav a {
display: flex; gap: 12px; align-items: baseline;
padding: 9px 12px; border-radius: var(--radius-sm);
font-size: 14px; font-weight: var(--fw-medium); text-decoration: none;
color: #C7CDDA; transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.kit-nav a .num {
font-family: var(--font-display); font-size: 11px; font-weight: 600;
color: var(--color-brand-primary); min-width: 20px;
}
.kit-nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.kit-nav a.is-active { background: var(--color-brand-primary); color: var(--color-text-on-brand); }
.kit-nav a.is-active .num { color: var(--color-text-on-brand); }
.kit-main { min-width: 0; background: var(--color-bg-page); }
/* ---------------- Section scaffolding ---------------- */
.section { padding: 88px var(--page-margin-tablet); border-bottom: 1px solid var(--color-border-default); scroll-margin-top: 24px; }
.section--tint { background: var(--color-bg-surface); }
.section--ink { background: var(--color-ink); color: #fff; }
.section__inner { max-width: 1080px; margin: 0 auto; }
.section__index {
font-family: var(--font-display); font-weight: 600; font-size: 13px;
letter-spacing: .1em; color: var(--color-brand-primary); margin: 0 0 10px;
}
.section__title { font-size: 38px; line-height: 1.1; font-weight: var(--fw-extra); margin: 0 0 14px; letter-spacing: -.02em; }
.section--ink .section__title { color: #fff; }
.section__lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--color-text-secondary); max-width: 760px; margin: 0 0 40px; }
.section--ink .section__lead { color: var(--color-text-on-dark-muted); }
.block-label {
display: inline-flex; align-items: center; gap: 8px;
font-size: 12px; font-weight: var(--fw-bold); letter-spacing: .12em; text-transform: uppercase;
color: var(--color-text-muted); margin: 44px 0 18px;
}
.block-label::before { content:''; width: 18px; height: 2px; background: var(--color-brand-primary); }
.section--ink .block-label { color: var(--color-text-on-dark-muted); }
.muted { color: var(--color-text-muted); }
.mono { font-family: var(--font-display); }
/* ---------------- Spec / demo wrappers ---------------- */
.specgrid { display: grid; gap: 16px; }
.cols-2 { grid-template-columns: repeat(2,1fr); }
.cols-3 { grid-template-columns: repeat(3,1fr); }
.cols-4 { grid-template-columns: repeat(4,1fr); }
.demo {
background: var(--color-bg-page); border: 1px solid var(--color-border-default);
border-radius: var(--radius-lg); padding: 28px;
}
.demo--pad-lg { padding: 40px; }
.demo--surface { background: var(--color-bg-surface); }
.demo--ink { background: var(--color-ink); border-color: var(--color-ink-border); }
.demo__row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.demo__cap { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 14px; }
.demo__col { display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
/* spec card (token rows) */
.spec { background: var(--color-bg-page); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); overflow: hidden; }
.spec__row { display: grid; grid-template-columns: 1.1fr 1fr auto; gap: 16px; align-items: center; padding: 13px 18px; border-top: 1px solid var(--color-border-default); }
.spec__row:first-child { border-top: 0; }
.spec__name { font-family: var(--font-display); font-size: 13px; font-weight: 600; }
.spec__val { font-size: 13px; color: var(--color-text-muted); font-family: var(--font-display); }
/* ============================================================
WDA BUTTON & CTA SYSTEM (v1.2 — unified)
THE single button system for the whole site. The earlier simple
`.btn` base was folded into this richer family — there is now one
`.btn` only. `@keyframes btnspin` lives further down with the
loading state. Compatibility helpers (`.btn--block`, `.btn--icon`,
bare-svg sizing) are defined AFTER the base so the cascade resolves
correctly. WhatsApp uses the `.btn--wa` variant (no separate class).
Architecture
base ........ .btn
size ........ --sm --md(default) --lg
width ....... --auto(default) --full --full-mobile
variant ..... --primary --secondary --dark --light
--outline --ghost --glass (+ --wa channel)
interaction . --fill-sweep --icon-slide --icon-expand
--shine --lift --magnetic-lite
Composition rule of thumb: one variant + at most two
interaction modifiers. Markup:
Получить аудит
============================================================ */
.btn {
--bt-h: var(--control-md);
--bt-pad: var(--btn-pad-md);
--bt-ic: var(--btn-icon-md);
--bt-sweep: var(--color-ink); /* overlay colour for --fill-sweep */
position: relative; isolation: isolate; overflow: hidden;
display: inline-flex; align-items: center; justify-content: center; gap: 12px;
height: var(--bt-h); padding: 0 var(--bt-pad);
border-radius: var(--btn-radius);
font-family: var(--font-sans); font-size: var(--fs-body); font-weight: var(--fw-semibold);
line-height: 1; letter-spacing: -.01em; white-space: nowrap;
border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
color: var(--color-text-primary); background: transparent;
-webkit-tap-highlight-color: transparent;
transition: background var(--motion-base) var(--ease-standard),
color var(--motion-base) var(--ease-standard),
border-color var(--motion-base) var(--ease-standard),
box-shadow var(--motion-base) var(--ease-standard),
transform var(--motion-fast) var(--ease-standard);
}
.btn__label { position: relative; z-index: 2; }
.btn__icon {
position: relative; z-index: 2; flex: none;
display: inline-grid; place-items: center;
width: var(--bt-ic); height: var(--bt-ic); border-radius: 50%;
transition: background var(--motion-base) var(--ease-standard),
color var(--motion-base) var(--ease-standard),
transform var(--motion-fast) var(--ease-standard);
}
.btn__icon svg { width: 52%; height: 52%; display: block;
transition: transform var(--motion-fast) var(--ease-standard); }
/* a trailing icon-circle gets a touch less right padding for optical balance */
.btn:has(.btn__icon:last-child) { padding-right: calc(var(--bt-pad) - 10px); }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
/* ---- sizes ---- */
.btn--sm { --bt-h: var(--control-sm); --bt-pad: var(--btn-pad-sm); --bt-ic: var(--btn-icon-sm); font-size: var(--fs-body-sm); gap: 9px; }
.btn--md { /* default */ }
.btn--lg { --bt-h: var(--control-lg); --bt-pad: var(--btn-pad-lg); --bt-ic: var(--btn-icon-lg); font-size: var(--fs-body-lg); gap: 14px; }
.btn--xl, .btn--hero { /* hero CTA tier */
--bt-h: var(--btn-height-xl); --bt-pad: var(--btn-pad-xl); --bt-ic: var(--btn-icon-xl);
min-height: var(--btn-height-xl);
font-size: var(--btn-font-size-xl); gap: var(--btn-gap-xl); line-height: var(--btn-lh-xl);
}
/* hero keeps generous trailing space next to the icon-circle (only -4px optical trim) */
.btn--xl:has(.btn__icon:last-child), .btn--hero:has(.btn__icon:last-child) { padding-right: calc(var(--bt-pad) - 4px); }
/* ---- width ---- */
.btn--auto { width: auto; }
.btn--full { display: flex; width: 100%; }
@media (max-width: 576px) { .btn--full-mobile { display: flex; width: 100%; } }
/* ---- variants ---- */
.btn--primary { background: var(--color-brand-primary); color: var(--color-text-on-brand); }
.btn--primary .btn__icon { background: var(--color-ink); color: var(--color-text-on-brand); }
.btn--primary:hover { background: var(--color-brand-primary-hover); }
.btn--primary:active { background: var(--color-brand-primary-press); }
.btn--secondary, .btn--dark { background: var(--color-ink); color: #fff; }
.btn--secondary .btn__icon, .btn--dark .btn__icon { background: var(--color-brand-primary); color: var(--color-text-on-brand); }
.btn--secondary:hover, .btn--dark:hover { background: var(--color-ink-elevated); }
.btn--secondary:active, .btn--dark:active { background: #000; }
.btn--light { background: #fff; color: var(--color-ink); border-color: transparent; }
.btn--light .btn__icon { background: var(--color-ink); color: #fff; }
.btn--light:hover { background: #fff; }
.btn--outline { background: transparent; color: var(--color-text-primary); border-color: var(--color-border-strong); }
.btn--outline .btn__icon { background: transparent; color: currentColor; box-shadow: inset 0 0 0 1.5px var(--color-border-strong); }
.btn--outline:hover { border-color: var(--color-ink); background: var(--color-bg-surface); }
.btn--outline:hover .btn__icon { box-shadow: inset 0 0 0 1.5px var(--color-ink); }
.btn--outline:active { background: var(--color-bg-surface-2); }
/* outline on dark surfaces (ink heroes / sections) — mirror of the .btn rule */
.section--ink .btn--outline, .demo--ink .btn--outline, .chero--ink .btn--outline,
.cta-final .btn--outline { color: #fff; border-color: var(--color-ink-border-strong); }
.section--ink .btn--outline .btn__icon, .demo--ink .btn--outline .btn__icon,
.chero--ink .btn--outline .btn__icon, .cta-final .btn--outline .btn__icon { box-shadow: inset 0 0 0 1.5px var(--color-ink-border-strong); }
.section--ink .btn--outline:hover, .demo--ink .btn--outline:hover, .chero--ink .btn--outline:hover,
.cta-final .btn--outline:hover { background: rgba(255,255,255,.08); border-color: #fff; }
.section--ink .btn--outline:hover .btn__icon, .chero--ink .btn--outline:hover .btn__icon { box-shadow: inset 0 0 0 1.5px #fff; }
/* ---- HERO CTA NORMALIZATION ----
Every conversion hero CTA group lands on the xl (hero) tier, whichever button
system the markup uses, so heroes read consistently across the whole site.
Legal “jump to document” heroes (.xhero--legal) intentionally stay at lg. */
.thero__cta .btn, .chero__cta .btn, .ahero__cta .btn, .cs-hero__cta .btn,
.xhero--cases .xhero__cta .btn {
--bt-h: var(--btn-height-xl); --bt-pad: var(--btn-pad-xl); --bt-ic: var(--btn-icon-xl);
min-height: var(--btn-height-xl);
font-size: var(--btn-font-size-xl); gap: var(--btn-gap-xl); line-height: var(--btn-lh-xl);
}
.thero__cta .btn:has(.btn__icon:last-child), .chero__cta .btn:has(.btn__icon:last-child),
.ahero__cta .btn:has(.btn__icon:last-child), .cs-hero__cta .btn:has(.btn__icon:last-child),
.xhero--cases .xhero__cta .btn:has(.btn__icon:last-child) { padding-right: calc(var(--bt-pad) - 4px); }
.thero__cta .btn, .chero__cta .btn, .ahero__cta .btn, .cs-hero__cta .btn,
.xhero--cases .xhero__cta .btn {
--bh: var(--btn-height-xl); min-height: var(--btn-height-xl); padding: 0 var(--btn-pad-xl); font-size: var(--btn-font-size-xl);
}
.btn--ghost { background: transparent; color: var(--color-text-primary); }
.btn--ghost .btn__icon { background: var(--color-bg-surface); color: currentColor; }
.btn--ghost:hover { background: var(--color-bg-surface); }
.btn--ghost:active { background: var(--color-bg-surface-2); }
.btn--glass {
background: var(--btn-glass-bg); color: #fff; border-color: var(--btn-glass-border);
-webkit-backdrop-filter: blur(11px) saturate(150%); backdrop-filter: blur(11px) saturate(150%);
}
.btn--glass .btn__icon { background: rgba(255,255,255,.16); color: #fff; }
.btn--glass:hover { background: var(--btn-glass-bg-strong); border-color: var(--btn-glass-border-hov); }
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
.btn--glass { background: var(--btn-glass-fallback); border-color: rgba(255,255,255,.22); }
.btn--glass:hover { background: rgba(18,24,43,.84); }
}
/* WhatsApp channel — shares family geometry / motion */
.btn--wa { background: #25D366; color: #fff; --bt-sweep: #128C45; }
.btn--wa .btn__icon { background: rgba(255,255,255,.22); color: #fff; }
.btn--wa:hover { background: #1EBE5A; }
/* ---- interaction · FILL-SWEEP (overlay wipes across, label stays readable) ---- */
.btn--fill-sweep::before {
content: ""; position: absolute; inset: 0; z-index: 1;
background: var(--bt-sweep); transform: translateX(-101%);
transition: transform var(--motion-slow) var(--ease-emphasized);
}
.btn--fill-sweep:hover::before, .btn--fill-sweep:focus-visible::before { transform: translateX(0); }
/* contrast flips as the overlay lands */
.btn--primary.btn--fill-sweep:hover, .btn--primary.btn--fill-sweep:focus-visible { color: #fff; }
.btn--primary.btn--fill-sweep:hover .btn__icon { background: var(--color-brand-primary); color: var(--color-text-on-brand); }
.btn--secondary.btn--fill-sweep, .btn--dark.btn--fill-sweep { --bt-sweep: var(--color-brand-primary); }
.btn--secondary.btn--fill-sweep:hover, .btn--dark.btn--fill-sweep:hover { color: var(--color-text-on-brand); }
.btn--secondary.btn--fill-sweep:hover .btn__icon, .btn--dark.btn--fill-sweep:hover .btn__icon { background: var(--color-ink); color: var(--color-brand-primary); }
.btn--light.btn--fill-sweep { --bt-sweep: var(--color-ink); }
.btn--light.btn--fill-sweep:hover, .btn--light.btn--fill-sweep:focus-visible { color: #fff; }
.btn--light.btn--fill-sweep:hover .btn__icon { background: var(--color-brand-primary); color: var(--color-text-on-brand); }
.btn--outline.btn--fill-sweep { --bt-sweep: var(--color-ink); }
.btn--outline.btn--fill-sweep:hover, .btn--outline.btn--fill-sweep:focus-visible { color: #fff; border-color: var(--color-ink); }
.btn--outline.btn--fill-sweep:hover .btn__icon { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5); }
.btn--wa.btn--fill-sweep:hover .btn__icon { background: rgba(255,255,255,.28); }
/* ---- interaction · ICON-SLIDE (arrow eases forward) ---- */
.btn--icon-slide:hover .btn__icon, .btn--icon-slide:focus-visible .btn__icon { transform: translateX(var(--btn-icon-shift)); }
.btn--icon-slide:hover > svg:last-child, .btn--icon-slide:focus-visible > svg:last-child { transform: translateX(var(--btn-icon-shift)); }
/* ---- interaction · ICON-EXPAND (circle grows + arrow nudges) ---- */
.btn--icon-expand:hover .btn__icon, .btn--icon-expand:focus-visible .btn__icon { transform: scale(var(--btn-overlay-scale)); }
.btn--icon-expand:hover .btn__icon svg, .btn--icon-expand:focus-visible .btn__icon svg { transform: translateX(2px); }
/* ---- interaction · SHINE (gloss passes once — glass / hero) ---- */
.btn--shine::after {
content: ""; position: absolute; top: 0; bottom: 0; left: -65%; width: 42%; z-index: 1;
background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent);
transform: skewX(-18deg); opacity: 0; pointer-events: none;
}
.btn--shine:hover::after, .btn--shine:focus-visible::after { animation: btnt2Shine var(--motion-slow) var(--ease-out-soft); }
@keyframes btnt2Shine { 0% { left: -65%; opacity: 0; } 18% { opacity: 1; } 100% { left: 120%; opacity: 0; } }
/* ---- interaction · LIFT (≤2px rise + shadow, no layout shift) ---- */
.btn--lift:hover { transform: translateY(var(--btn-hover-lift)); box-shadow: var(--shadow-lg); }
.btn--lift:active { transform: translateY(0); }
/* ---- interaction · MAGNETIC-LITE (JS-driven, desktop only) ---- */
.btn--magnetic-lite { transition: background var(--motion-base) var(--ease-standard), color var(--motion-base) var(--ease-standard), border-color var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-out-soft); will-change: transform; }
/* ---- states ---- */
.btn:disabled, .btn.is-disabled {
background: var(--color-disabled-bg); color: var(--color-disabled-text);
border-color: transparent; cursor: not-allowed; box-shadow: none; transform: none;
}
.btn:disabled::before, .btn.is-disabled::before,
.btn:disabled::after, .btn.is-disabled::after { display: none; }
.btn:disabled .btn__icon, .btn.is-disabled .btn__icon { background: transparent; color: var(--color-disabled-text); box-shadow: inset 0 0 0 1.5px var(--color-border-default); }
.btn--outline:disabled, .btn--outline.is-disabled { background: transparent; border-color: var(--color-border-default); }
.btn.is-loading { color: transparent; pointer-events: none; }
.btn.is-loading .btn__label, .btn.is-loading .btn__icon { opacity: 0; }
.btn.is-loading::after {
content: ""; position: absolute; z-index: 3; width: 18px; height: 18px; border-radius: 50%;
border: 2px solid currentColor; border-top-color: transparent; opacity: .9;
animation: btnspin .7s linear infinite;
}
.btn--primary.is-loading::after { border-color: rgba(255,255,255,.55); border-top-color: transparent; }
.btn--light.is-loading::after { border-color: rgba(11,16,32,.45); border-top-color: transparent; }
.btn--secondary.is-loading::after, .btn--dark.is-loading::after, .btn--glass.is-loading::after, .btn--wa.is-loading::after { border-color: rgba(255,255,255,.55); border-top-color: transparent; }
@keyframes btnspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn.is-loading::after { animation: none; } }
/* ---- compatibility helpers (defined after the base so they win the cascade) ---- */
/* Bare