/* ============================================================ tokens.css — single source of truth Custom properties mirror the target CMS presets (--wp--preset--*), with semantic role aliases layered on top. ============================================================ */ :root { /* --- Color presets (theme.json color slugs) --- Бумага, поверхность и волосяная линия сдвинуты в теплый (hue ~39°) под пергаментную текстуру: нейтрально-серая палитра поверх теплого волокна читалась как грязь на бумаге, а не как сама бумага. Чернила и красный не трогаем — они и должны оставаться холоднее подложки, иначе пропадает контраст сигнала. */ --wp--preset--color--signal-red: #E01614; --wp--preset--color--red-deep: #B8110F; --wp--preset--color--roast-emerald:#10924D; --wp--preset--color--emerald-deep: #0C6E3A; --wp--preset--color--ink: #141414; --wp--preset--color--paper: #F2ECE1; --wp--preset--color--surface: #FBF7EF; --wp--preset--color--hairline: #DFD7C7; --wp--preset--color--ink-muted: #534E44; --wp--preset--color--caption: #5C574C; --wp--preset--color--white: #FFFFFF; /* --- Semantic role aliases --- */ --color-bg: var(--wp--preset--color--paper); --color-surface: var(--wp--preset--color--surface); --color-ink: var(--wp--preset--color--ink); --color-heading: var(--wp--preset--color--ink); --color-text: #2A2822; --color-text-soft: var(--wp--preset--color--ink-muted); --color-caption: var(--wp--preset--color--caption); --color-primary: var(--wp--preset--color--signal-red); --color-primary-deep: var(--wp--preset--color--red-deep); --color-accent: var(--wp--preset--color--roast-emerald); --color-accent-deep: var(--wp--preset--color--emerald-deep); --color-line: var(--wp--preset--color--hairline); --color-on-dark: #EDEBE6; --color-dark-surface: var(--wp--preset--color--ink); --color-dark-field: #1E1E1D; --color-dark-line: #35342F; --color-dark-muted: #8C8B87; /* --- Font families --- */ --wp--preset--font-family--display: 'Mon Trappist', 'Arial Black', 'Arial Narrow', system-ui, sans-serif; --wp--preset--font-family--body: 'Golos Text', 'Helvetica Neue', Arial, system-ui, sans-serif; --font-display: var(--wp--preset--font-family--display); --font-body: var(--wp--preset--font-family--body); /* --- Readable type scale --- */ --wp--preset--font-size--display: clamp(2.75rem, 1.1rem + 6.6vw, 7rem); --wp--preset--font-size--h1: clamp(2.4rem, 1.3rem + 4.4vw, 5rem); --wp--preset--font-size--h2: clamp(2rem, 1.25rem + 3vw, 3.5rem); --wp--preset--font-size--h3: clamp(1.35rem, 1.05rem + 1.2vw, 1.9rem); --wp--preset--font-size--stat: clamp(2.1rem, 1.3rem + 2.4vw, 3.25rem); --wp--preset--font-size--lg: 1.25rem; --wp--preset--font-size--base: 1.0625rem; --wp--preset--font-size--sm: 1rem; --wp--preset--font-size--xs: 0.875rem; --wp--preset--font-size--2xs: 0.75rem; /* Semantic text roles: prose never drops below 16px; labels remain compact but readable, while 12px is reserved for technical metadata. */ --type-prose: var(--wp--preset--font-size--base); --type-prose-compact: var(--wp--preset--font-size--sm); --type-label: var(--wp--preset--font-size--xs); --type-meta: var(--wp--preset--font-size--2xs); /* --- Spacing: strict 8-point grid -------------------------------- --space-N == N * 8px. Nothing off-grid is allowed in layout. --space-half (4px) is the single sanctioned exception and is reserved for optical nudges *inside* a component (icon baseline, caption under a label) — never for rhythm between blocks. ------------------------------------------------------------- */ --wp--preset--spacing--10: 8px; --wp--preset--spacing--20: 16px; --wp--preset--spacing--30: 24px; --wp--preset--spacing--40: 32px; --wp--preset--spacing--50: 40px; --wp--preset--spacing--60: 48px; --wp--preset--spacing--70: 64px; --wp--preset--spacing--80: 80px; --wp--preset--spacing--90: 96px; --wp--preset--spacing--100: 120px; --space-half: 4px; --space-1: var(--wp--preset--spacing--10); /* 8 */ --space-2: var(--wp--preset--spacing--20); /* 16 */ --space-3: var(--wp--preset--spacing--30); /* 24 */ --space-4: var(--wp--preset--spacing--40); /* 32 */ --space-5: var(--wp--preset--spacing--50); /* 40 */ --space-6: var(--wp--preset--spacing--60); /* 48 */ --space-7: 56px; --space-8: var(--wp--preset--spacing--70); /* 64 */ --space-9: 72px; --space-10: var(--wp--preset--spacing--80); /* 80 */ --space-11: 88px; --space-12: var(--wp--preset--spacing--90); /* 96 */ --space-14: 112px; --space-15: var(--wp--preset--spacing--100); /* 120 */ /* Semantic aliases (kept for readability; all land on the grid) */ --space-xs: var(--space-1); /* 8 */ --space-sm: var(--space-2); /* 16 */ --space-md: var(--space-3); /* 24 */ --space-lg: var(--space-5); /* 40 */ --space-xl: var(--space-10); /* 80 */ --space-section: var(--space-15); /* 120 */ /* --- Vertical rhythm ---------------------------------------------- Relationship-based spacing. The gap encodes how tightly two elements belong together, so every section reads with the same cadence. Values follow the common editorial guideline of ~0.5x / 1x / 1.5x / 2x a 16px base, snapped to the 8pt grid. These are re-declared per breakpoint at the bottom of this file. --------------------------------------------------------------- */ --flow-eyebrow: var(--space-2); /* 16 — kicker → heading (tight pair) */ --flow-title: var(--space-3); /* 24 — heading → body text */ --flow-text: var(--space-4); /* 32 — body → button / link row */ --flow-cta: var(--space-2); /* 16 — between adjacent buttons */ --flow-item: var(--space-3); /* 24 — between cards in a grid */ --flow-block: var(--space-6); /* 48 — between blocks inside a section */ --flow-head: var(--space-8); /* 64 — section header → section body */ --flow-group: var(--space-10); /* 80 — between major sub-blocks */ --section-y: var(--space-15); /* 120 — section top/bottom padding */ /* --- Layout (gutter min/max also sit on the grid) --- */ --content-width: 1600px; --gutter: clamp(16px, 3.5vw, 56px); /* Full-bleed backgrounds share a centered 1600px content field. */ --page-x: max(clamp(20px, 4.5vw, 78px), calc((100vw - var(--content-width)) / 2)); --type-case-section: clamp(3rem, 5vw, 5.5rem); --type-why-mobile: clamp(2.5rem, 11.8vw, 4rem); --type-proof-mobile: clamp(2rem, 9vw, 3rem); --type-product-name: clamp(1.125rem, 1.65vw, 1.625rem); --product-image-height: clamp(176px, 14.5vw, 224px); --product-image-height-mobile: clamp(136px, 38vw, 208px); --product-hover-scale: 1.045; --product-surface: color-mix(in srgb, var(--color-surface) 45%, transparent); --product-surface-hover: color-mix(in srgb, var(--color-surface) 80%, transparent); --type-region-title: clamp(2.75rem, 4.3vw, 4.75rem); --type-cta-title: clamp(3rem, 6.4cqw, 6rem); --type-cta-mobile: clamp(2.5rem, 11.8vw, 4rem); --why-mobile-object: 360px; --why-mobile-proof: 288px; --region-map-opacity: 0.95; --region-map-bleed: 5%; --region-map-mask: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent), linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent); --region-rail-item: 176px; --cta-button-width: 280px; --cta-mobile-width: 480px; --header-h: 96px; /* --- Radius: ZERO by doctrine (only stamps are circular) --- --radius-card — санкционированное исключение для контентных карточек и фотографий: товар, отзыв и регион смягчены на 12px. --- */ --radius: 0px; --radius-card: 12px; --radius-full: 9999px; /* --- Borders --- */ --border-hair: 1px solid var(--color-line); /* --- Пергамент --------------------------------------------------- Два слоя, разведенные по частоте, а не один общий тайл: шум почти не сжимается, и одним тайлом пришлось бы платить ~60 КБ вместо 7. grain — волокно и зерно, тайл 128px: на такой частоте повтор глазом не читается; mottle — неравномерность проклейки, тайл 256px растянут до 1400: гладкое поле жмется почти в ноль и снимает ощущение сетки от первого слоя. Оба бесшовные (шум построен через FFT, а он периодичен сам по себе). Плотность 2% в среднем, ~10% на пиках — фон должен чувствоваться, а не читаться. */ --paper-texture: url(../img/paper-grain.webp), url(../img/paper-mottle.webp); --paper-texture-size: 128px 128px, 1400px 1400px; --border-ink: 1px solid var(--color-ink); /* --- Motion --- */ --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 150ms; --dur: 280ms; --dur-slow: 620ms; /* --- Z-index scale --- */ --z-base: 1; --z-header: 100; --z-dropdown: 200; --z-overlay: 900; --z-modal: 1000; --z-toast: 1100; /* --- Elevation (flat UI; used only to reground floating cutouts) --- */ --shadow-product: 0 40px 70px -30px rgba(20, 20, 20, 0.40); /* Отдельный токен для filter: drop-shadow() не понимает spread, и --shadow-product (это box-shadow, с -30px) внутри фильтра делал всю декларацию невалидной — тени у вырезок продукта не было вообще. Здесь только offset/blur/color. */ --shadow-product-filter: 0 26px 30px rgba(20, 20, 20, 0.26); --shadow-product-sm: 0 24px 40px -22px rgba(20, 20, 20, 0.35); } /* ============================================================ Responsive rhythm — the *only* place spacing scales down. Sections never hard-code a breakpoint value of their own. ============================================================ */ @media (max-width: 1200px) { :root { --flow-head: var(--space-6); /* 48 */ --flow-group: var(--space-9); /* 72 */ --section-y: var(--space-12); /* 96 */ } } @media (max-width: 900px) { :root { --header-h: 72px; --flow-eyebrow: var(--space-1); /* 8 */ --flow-title: var(--space-2); /* 16 */ --flow-text: var(--space-3); /* 24 */ --flow-cta: var(--space-2); /* 16 */ --flow-item: var(--space-2); /* 16 */ --flow-block: var(--space-5); /* 40 */ --flow-head: var(--space-5); /* 40 */ --flow-group: var(--space-8); /* 64 */ --section-y: var(--space-8); /* 64 */ } } @media (max-width: 560px) { :root { --flow-block: var(--space-4); /* 32 */ --flow-head: var(--space-4); /* 32 */ --flow-group: var(--space-6); /* 48 */ --section-y: var(--space-7); /* 56 */ } }