/* ============================================================================ base.css — порядок слоёв, сброс, токены, типографика по умолчанию Слои объявлены здесь один раз: дальше порядок файлов в уже не важен. ========================================================================== */ @layer reset, tokens, base, layout, components, sections, utils; /* --- сброс ---------------------------------------------------------------- */ @layer reset { *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; tab-size: 4; } body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; } ul[class], ol[class] { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4 { font-size: inherit; font-weight: inherit; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } /* Нативный маркер убираем — рисуем свой */ summary { list-style: none; cursor: pointer; } summary::-webkit-details-marker { display: none; } summary::marker { content: ""; } [hidden] { display: none !important; } } /* --- токены --------------------------------------------------------------- */ @layer tokens { :root { /* Цвет. Раскладка по площади ~70% светлое / 20% чёрное / 10% лайм. #CBFB55 — только заливка; как цвет текста допустим лишь на чёрном. */ --ink: #0a0a0a; --ink-2: #141414; --ink-body: #3a3a3a; --ink-muted: #5e5e5e; --ink-faint: #767676; --accent-deep: #5f8226; /* линии и иконки на светлом */ --accent: #cbfb55; /* главный акцент, только заливка */ --accent-soft: #e4f6b8; --accent-softer: #edf6db; --bg: #f4f4f4; --card: #ffffff; --sky: #cfe4f3; /* подложка под видео до загрузки */ /* Текст поверх видеофонов — темнее нейтрального, чтобы держать контраст */ --ink-on-sky: #2f3a44; --ink-on-sky-muted: #3f4a54; --line: rgb(0 0 0 / 0.08); --line-strong: rgb(0 0 0 / 0.12); --line-on-dark: rgb(255 255 255 / 0.14); --glass: rgb(255 255 255 / 0.86); --glass-border: rgb(255 255 255 / 0.75); --glass-nav: rgb(255 255 255 / 0.62); /* Шрифты */ --font-display: "Playfair Display", Georgia, "Times New Roman", serif; --font-script: "Marck Script", "Segoe Script", cursive; --font-sans: Geist, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Размеры. Насыщеннее Geist Regular в макете ничего нет: акцент делается размером, цветом или лаймовой подложкой, но не жирностью. */ --fs-h1: min(8.8vw, 10.2vh, 80px); --fs-h2: clamp(34px, 4.6vw, 68px); --fs-script: min(7vw, 9vh, 96px); --fs-h3: clamp(21px, 1.9vw, 27px); --fs-h4: clamp(18px, 1.5vw, 21px); --fs-lead: clamp(15px, 1.3vw, 17px); --fs-body: 15px; --fs-caption: 13px; --fs-small: 12px; --fs-label: 11px; --fs-metric: clamp(40px, 3.8vw, 58px); /* Сетка и ритм */ --container: 1280px; --gutter: clamp(20px, 4vw, 48px); --section-gap: clamp(72px, 9vw, 150px); /* Внутренние страницы дышат плотнее лендинга */ --block-gap: clamp(64px, 8vw, 130px); --frame: clamp(10px, 1vw, 18px); /* поля вокруг скруглённой рамки первого экрана */ /* Радиусы */ --r-xs: 8px; --r-sm: 12px; --r-md: 18px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px; --r-hero: clamp(30px, 3.4vw, 52px); /* Тени */ --shadow-card: 0 1px 3px rgb(0 0 0 / 0.05); --shadow-card-hover: 0 16px 38px rgb(0 0 0 / 0.1); --shadow-glass: 0 18px 48px rgb(20 40 20 / 0.14); --shadow-hero: 0 30px 80px rgb(20 45 65 / 0.2); --shadow-float: 0 14px 34px rgb(0 0 0 / 0.28); /* Движение */ --ease: cubic-bezier(0.2, 0.7, 0.3, 1); --dur-fast: 0.18s; --dur: 0.32s; --dur-slow: 0.7s; /* Слои */ --z-grid: -1; --z-header: 90; --z-float: 112; --z-menu: 125; --z-progress: 130; --z-modal: 140; } /* Переключатель анимаций: один флаг, который читают все секции. JS его не трогает — достаточно медиазапроса. */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0.01ms; --dur: 0.01ms; --dur-slow: 0.01ms; } } } /* --- база ----------------------------------------------------------------- */ @layer base { html { /* Плавный скролл только тем, кто не просил его отключить */ scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { background: var(--bg); color: var(--ink); font: 400 var(--fs-body) / 1.55 var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-wrap: pretty; /* overflow-x: clip вместо hidden — не создаёт скролл-контейнер и не ломает position: sticky у шапки и секции «Что получите» */ overflow-x: clip; } a { color: inherit; text-decoration: none; } a:hover { color: var(--accent-deep); } h1, h2, h3, h4 { text-wrap: balance; } p { text-wrap: pretty; } em { font-style: italic; } ::selection { background: var(--accent); color: var(--ink); } :focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; border-radius: 6px; } /* Фокус на тёмном фоне лаймом — на чёрном он читается, зелёный нет */ .section--dark :focus-visible, .site-footer :focus-visible { outline-color: var(--accent); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } }