/* ═══════════════════════════════════════════════════════════════════
whoareyou.io · DESIGN TOKENS (global)
───────────────────────────────────────────────────────────────────
Підключається ПЕРШИМ у , до wstart_2.css:
Що цей файл робить:
• Override --font-display: Spectral → Geist (sans everywhere, no засічок)
• Override --font-mono: system → Geist Mono (Berkeley Mono-like)
• font-feature-settings для Geist (cv11, ss01 — Linear-style alternates)
• Додає Linear-style ваги (510 / 590 / 680) — для нових компонент
• Додає severity палітру з risk-analyzer.php (low/mod/high/crit)
• Додає radius scale 6/8/12/16/24
Що файл НЕ робить:
• Не зачіпає колір/фон/decor — існуюча світла палітра лишається
• Не зачіпає існуючі h1-h4/p правила (вони автоматично переключаться
на Geist через override --font-display)
• Не зламає dark hero на головній (там окремі CSS overrides)
═══════════════════════════════════════════════════════════════════ */
/* ─── FONTS ───────────────────────────────────────────────────────── */
/* Підвантажуємо Geist Variable (wght 100-900) + Geist Mono.
Старий на Spectral у header-new.php можна залишити (Spectral
просто перестане використовуватись), або видалити для меншого download. */
/* ─── TOKEN OVERRIDES ─────────────────────────────────────────────── */
:root {
/* ── Typography: override Spectral → Geist для headings ── */
--font-display: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-body: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
/* ── Linear-style weights ──
Variable шрифт дозволяє нестандартні значення. Якщо хочеш стримніший
вигляд (Linear) — використовуй ці замість round 500/600/700 в нових
правилах. Старі правила залишаються round, вони працюють. */
--fw-light: 300;
--fw-normal: 400;
--fw-medium: 510; /* замість 500 */
--fw-semibold: 590; /* замість 600 */
--fw-bold: 680; /* замість 700 */
/* ── Radius scale ── */
--radius-4: 4px;
--radius-6: 6px;
--radius-8: 8px;
--radius-12: 12px;
--radius-16: 16px;
--radius-24: 24px;
/* ── Severity palette (точно з risk-analyzer.php) ──
Використовується в hero preview, scoring, factors, records.
Для light theme: hex тони муті + бордер-tinted bg.
Для dark theme (head dark hero) — ті ж самі hex (вони працюють на обох). */
--sev-low: #007680;
--sev-low-bg: rgba(0,118,128,0.14);
--sev-low-line: rgba(0,118,128,0.45);
--sev-mod: #C4A24E;
--sev-mod-bg: rgba(196,162,78,0.16);
--sev-mod-line: rgba(196,162,78,0.50);
--sev-high: #C47D3E;
--sev-high-bg: rgba(196,125,62,0.16);
--sev-high-line: rgba(196,125,62,0.50);
--sev-crit: #C44E4E;
--sev-crit-bg: rgba(196,78,78,0.15);
--sev-crit-line: rgba(196,78,78,0.50);
--sev-extreme: #943232;
--sev-extreme-bg: rgba(148,50,50,0.16);
/* ── Risk-bar gradient (5-stop, з реального коду) ── */
--risk-gradient: linear-gradient(90deg,
#007680 0%, #007680 14%,
#C4A24E 32%,
#C47D3E 55%,
#C44E4E 80%,
#7A1F1F 100%);
/* ── Translucent borders (Linear-style тонкі лінії) ──
На світлому фоні залиш існуючий --border, ці — для overlays/dark blocks */
--line-faint: rgba(0,0,0,0.04);
--line-soft: rgba(0,0,0,0.06);
--line-medium: rgba(0,0,0,0.10);
/* ── Z-index scale (consistency для popovers/modals) ── */
--z-header: 100;
--z-overlay: 500;
--z-popover: 600;
--z-modal: 700;
--z-toast: 800;
--z-tooltip: 1100;
}
/* ─── BASE TYPOGRAPHY ─────────────────────────────────────────────── */
/* Geist features — стилістичні альтернати Linear використовує globally.
cv11 — альтернативна одинарна "1" (без верхньої засічки)
ss01 — geometric альтернати для деяких символів */
body {
font-feature-settings: 'cv11', 'ss01';
font-variation-settings: 'opsz' auto;
}
/* Mono utility — для технічних елементів (дати, score, ID, числа) */
.text-mono {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
letter-spacing: 0.01em;
}
/* Tabular numbers utility — для всіх числових колонок (метрики, scoring) */
.tabular {
font-variant-numeric: tabular-nums;
}
/* Meta text utility — для timestamps, sub-labels, footnotes */
.text-meta {
font-family: var(--font-mono);
font-size: 11px;
font-weight: var(--fw-normal);
color: var(--text-secondary);
letter-spacing: 0.01em;
text-transform: uppercase;
}
/* ─── OPTIONAL: tighter letter-spacing for headings (Linear feel) ─── */
/* Розкоментуй ці правила якщо хочеш точно Linear ритм headings.
Поки що — закоментовано, бо існуючі rules в wstart_2.css вже мають
адекватний letter-spacing (-0.04em для h1, -0.025em для h2). */
/*
h1 { letter-spacing: -0.032em; font-weight: var(--fw-semibold); }
h2 { letter-spacing: -0.028em; font-weight: var(--fw-medium); }
h3 { letter-spacing: -0.02em; font-weight: var(--fw-medium); }
*/
/* ═══════════════════════════════════════════════════════════════════
FOOTER REFINEMENT (global — застосовується на всіх сторінках)
Минималізм Linear-style: mono headings, тонкі links, без декоративних кнопок
═══════════════════════════════════════════════════════════════════ */
footer {
padding: 64px 0 28px !important;
}
.footer-content {
max-width: 1200px;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
gap: 56px 48px !important;
padding: 0 32px !important;
}
/* Section headings — mono caps, teal-300, тонкі */
.footer-section h3 {
font-family: var(--font-mono) !important;
font-size: 11px !important;
font-weight: var(--fw-medium) !important;
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
color: #4DB8BF !important;
margin-bottom: 16px !important;
}
/* Links — clean, full opacity, тонкий hover */
.footer-links li {
margin-bottom: 9px !important;
}
.footer-links a {
color: rgba(236, 254, 255, 0.72) !important;
font-size: 13.5px !important;
font-weight: var(--fw-normal) !important;
opacity: 1 !important;
letter-spacing: -0.005em !important;
transition: color .15s !important;
}
.footer-links a:hover {
color: #4DB8BF !important;
}
/* Social icons — стримані */
.social-links {
gap: 10px !important;
margin-top: 4px !important;
}
.social-icon {
width: 34px !important;
height: 34px !important;
border-radius: 8px !important;
border: 1px solid rgba(255, 255, 255, 0.06) !important;
background: rgba(255, 255, 255, 0.02) !important;
color: rgba(236, 254, 255, 0.6) !important;
transition: all .15s !important;
}
.social-icon:hover {
border-color: rgba(77, 184, 191, 0.4) !important;
background: rgba(77, 184, 191, 0.06) !important;
color: #4DB8BF !important;
transform: none !important;
}
.social-icon svg {
width: 15px !important;
height: 15px !important;
}
/* Прибираємо платформ-specific colored hovers (вони з old design) */
.social-icon.linkedin:hover,
.social-icon.facebook:hover,
.social-icon.instagram:hover,
.social-icon.telegram:hover {
background: rgba(77, 184, 191, 0.06) !important;
color: #4DB8BF !important;
}
/* Support buttons — компактніші, мінімалистичні */
.footer-support-btn {
padding: 9px 12px !important;
background: rgba(255, 255, 255, 0.025) !important;
border: 1px solid rgba(255, 255, 255, 0.06) !important;
border-radius: 8px !important;
font-size: 12.5px !important;
}
.footer-support-btn:hover {
background: rgba(77, 184, 191, 0.06) !important;
border-color: rgba(77, 184, 191, 0.3) !important;
transform: none !important;
}
.footer-support-btn-title {
color: #4DB8BF !important;
font-size: 12.5px !important;
font-weight: var(--fw-semibold) !important;
}
.footer-support-btn-sub {
font-size: 10.5px !important;
color: rgba(236, 254, 255, 0.5) !important;
}
.footer-support-btn svg,
.footer-support-btn .fs-icon {
width: 15px !important;
height: 15px !important;
}
/* Bottom bar — тонкий separator, mono copyright */
.footer-bottom {
font-family: var(--font-mono) !important;
font-size: 11px !important;
color: rgba(236, 254, 255, 0.4) !important;
letter-spacing: 0.01em !important;
border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
padding: 20px 32px 0 !important;
margin-top: 36px !important;
font-weight: var(--fw-normal) !important;
}
/* Mobile footer — лівий align (override wstart_2.css center) */
@media (max-width: 768px) {
footer {
text-align: left !important;
}
.footer-content {
padding: 0 20px !important;
gap: 36px !important;
}
.social-links,
.footer-samples {
justify-content: flex-start !important;
}
.footer-bottom {
text-align: left !important;
padding: 20px 20px 0 !important;
}
}
/* ═══════════════════════════════════════════════════════════════════
v3 ADDENDUM (260611) — spacing · surfaces · shadows · focus · motion
Принцип: фон світлий, контраст у ЗМІСТІ — ink-текст, виразні бордери,
насичені акценти. Не пастель.
═══════════════════════════════════════════════════════════════════ */
:root {
/* ── Spacing scale (4px grid) ── */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
--sp-12: 48px; --sp-16: 64px;
/* ── Surfaces (рішення 260611: фон майже білий) ── */
--surface-page: #FCFCFC;
--surface-card: #FFFFFF;
--surface-sunken: #F1F5F6;
--surface-hover: rgba(0,118,128,0.05);
/* ── Text: ink-контраст (теплий, НЕ slate) ── */
--tx-primary: #0c1f28;
--tx-secondary: #4A5B66;
--tx-tertiary: #7E8C96;
/* ── Accent ── */
--accent: #007680;
--accent-strong: #005F66;
--accent-soft: rgba(0,118,128,0.09);
/* ── Borders: виразні, бо фон майже білий ── */
--bd-soft: rgba(12,31,40,0.08);
--bd-medium: rgba(12,31,40,0.12);
--bd-strong: rgba(12,31,40,0.18);
/* ── Shadow scale (відчутні, з teal-підтоном) ── */
--shadow-xs: 0 1px 2px rgba(12,31,40,0.05);
--shadow-sm: 0 2px 8px rgba(12,31,40,0.07);
--shadow-md: 0 8px 24px rgba(0,118,128,0.10);
--shadow-lg: 0 16px 40px rgba(12,31,40,0.13);
/* ── Focus ring ── */
--ring: 0 0 0 3px rgba(0,118,128,0.25);
/* ── Motion ── */
--ease: cubic-bezier(.2,.7,.3,1);
--t-fast: 120ms;
--t-base: 180ms;
}
/* Глобальний focus-visible */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
outline: none;
box-shadow: var(--ring);
}
/* Inputs всередині рамки-обгортки: ring малює обгортка (:focus-within), не інпут */
.rw-input-wrap input:focus-visible { box-shadow: none; }