/* Дизайн-токени з ansty-design-spec.md. Розміри тексту НЕ масштабуються лінійно між брейкпоінтами (fixed per breakpoint, не vw/clamp) — див. спек. Tablet-фреймів у Figma немає: значення в діапазоні 768–1023px інтерпольовані вручну, звірити після синку з Figma. */ :root { /* Colors */ --color-bg: #101010; --color-placeholder: #d9d9d9; --color-text-inactive: #bebebe; --color-text-accent: #ffffff; --color-form-placeholder: rgba(255, 255, 255, 0.5); --color-form-border: rgba(255, 255, 255, 0.7); --color-overlay-backdrop: rgba(8, 8, 8, 0.5); --color-tooltip-bg: rgba(0, 0, 0, 0.21); --color-pill-border: rgba(255, 255, 255, 0.32); --color-pill-hover-bg: rgba(255, 255, 255, 0.24); --color-pill-hover-border: rgba(255, 255, 255, 0.1); --color-close-opacity: 0.47; --color-error: #ff6b6b; /* Blur */ --overlay-blur-desktop: 25px; --overlay-blur-mobile: 6px; --tooltip-blur: 14.65px; /* Fonts — Akzidenz-Grotesk Pro немає ліцензії, замінено на Archivo (Google Fonts, вантажиться в кожного HTML). Відповідність накреслень: Akzidenz Regular → Archivo 400, Light → 300, Bold → 700. */ --font-primary: "Archivo", "Helvetica Neue", Arial, sans-serif; --font-label: "Inter", "Helvetica Neue", Arial, sans-serif; /* Sauro / Muller Next Wide Trial (сторінка Noosphere) — комерційні, ліцензії немає, лишаються на system fallback. */ --font-display: "Sauro", "Muller Next Wide Trial", var(--font-primary); /* Radius */ --radius-input: 4px; --radius-pill: 4px; --radius-submit: 50px; /* Layout — mobile default (Figma: 390px container, 20px side padding) */ --container-width: 390px; --container-padding: 20px; --header-top: 49px; --hero-text-top: 130px; --hero-gap: 28px; --card-gap: 16px; /* Type scale — mobile */ --fs-hero: 18.4px; --fs-nav: 13px; --fs-pill: 12.8px; --fs-form-label: 11px; --fs-bio: 11px; --fs-services: 19px; --fs-noosphere-title: 20px; --fs-noosphere-body: 14px; } /* Tablet — interpolated, немає окремого Figma-фрейму */ @media (min-width: 768px) and (max-width: 1023px) { :root { --container-width: 700px; --container-padding: 32px; --header-top: 40px; --hero-text-top: 130px; --hero-gap: 32px; --card-gap: 18px; --fs-hero: 22px; --fs-nav: 13px; --fs-pill: 18px; --fs-form-label: 16px; --fs-bio: 15px; --fs-services: 25px; --fs-noosphere-title: 25px; --fs-noosphere-body: 16px; } } /* Desktop — Figma: 1440px container, header top 45px, картки 466×617 gap 21px */ @media (min-width: 1024px) { :root { --container-width: 1440px; --container-padding: 60px; --header-top: 45px; --hero-text-top: 120px; --hero-gap: 32px; --card-gap: 21px; --fs-hero: 28px; --fs-nav: 18px; --fs-pill: 24px; --fs-form-label: 24px; --fs-bio: 20px; --fs-services: 32px; --fs-noosphere-title: 30px; --fs-noosphere-body: 18px; } }