/* ============================================================ VINOACCS · Design System v6 · Design Tokens Plum B (дымчатый фиолет) · DM Sans · OKLCH Один источник правды для всех страниц. ============================================================ */ :root{ /* ───────────────────────────────────────────── 1. SURFACES — фоны, поверхности ───────────────────────────────────────────── */ --bg: #faf9f7; /* основной фон, cream */ --bg-warm: #f4f1ec; /* тинтованный фон секций */ --bg-tile: #f1ede6; /* подложка плиток */ --bg-dark: #23201c; /* warm dark, тёмные секции и футер */ --surface: #fdfcfa; /* фон карточек */ --surface-card: #fdfcfa; /* ───────────────────────────────────────────── 2. TEXT — иерархия (НЕТ #000) ───────────────────────────────────────────── */ --text: oklch(0.34 0.018 55); /* ≈ #4f4842 — основной */ --text-2: oklch(0.48 0.014 55); /* ≈ #716b62 — вторичный, описания */ --text-3: oklch(0.60 0.010 55); /* ≈ #908a80 — meta, eyebrow */ --text-4: oklch(0.78 0.008 55); /* ≈ #b8b4ac — плейсхолдеры */ /* ───────────────────────────────────────────── 3. BORDERS ───────────────────────────────────────────── */ --border: #e7e4de; --border-2: #d6d1ca; --border-3: #cbc6bd; /* ───────────────────────────────────────────── 4. ACCENT — Plum B (дымчатый фиолет) ───────────────────────────────────────────── */ --accent: oklch(0.51 0.040 305); /* ≈ #7e6c89 — primary */ --accent-hover: oklch(0.41 0.045 305); /* ≈ #5f4f6a */ --accent-active: oklch(0.32 0.040 305); /* ≈ #463b50 — deep plum */ --accent-soft: oklch(0.51 0.040 305 / 0.12); --accent-tint: oklch(0.94 0.013 305); /* ≈ #ece6ee */ --accent-2: oklch(0.50 0.045 250); /* ≈ #5d6e85 — secondary, eyebrow */ --accent-2-tint: oklch(0.93 0.014 250); /* ───────────────────────────────────────────── 5. AMBIENT — тёплое контрастное звено ───────────────────────────────────────────── */ --ambient: oklch(0.82 0.050 65); /* ≈ #e9cdac warm peach */ --ambient-soft: oklch(0.92 0.030 65); --ambient-tint: oklch(0.95 0.025 65); --ambient-text: oklch(0.32 0.065 50); /* ≈ #6b4d2b */ /* ───────────────────────────────────────────── 6. CTA — idle = primary темы, hover = deep plum ───────────────────────────────────────────── */ --cta: var(--accent); --cta-hover: var(--accent-active); --on-cta: #fefdfb; /* ───────────────────────────────────────────── 7. SYSTEM (warm, без агрессии) ⚠️ зелёного success НЕТ — используем --accent ───────────────────────────────────────────── */ --danger: oklch(0.62 0.135 30); /* ≈ #cb7261 burnt coral */ --danger-soft: oklch(0.93 0.030 30); --warn: oklch(0.62 0.090 38); /* ≈ #b07863 приглушённый rust */ --warn-soft: oklch(0.94 0.030 38); --info: oklch(0.50 0.060 250); /* ≈ #4e6a85 */ --info-soft: oklch(0.93 0.016 250); /* ───────────────────────────────────────────── 8. SHADOWS — Aesop-style soft ───────────────────────────────────────────── */ --float-1: 0 1px 2px rgba(40,35,30,0.04), 0 2px 8px rgba(40,35,30,0.035); --float-2: 0 2px 4px rgba(40,35,30,0.05), 0 6px 18px rgba(40,35,30,0.06); --float-3: 0 4px 8px rgba(40,35,30,0.07), 0 12px 32px rgba(40,35,30,0.08); /* ───────────────────────────────────────────── 9. RADII ───────────────────────────────────────────── */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 22px; --r-pill: 999px; /* ───────────────────────────────────────────── 10. EASING & DURATION ───────────────────────────────────────────── */ --ease-soft: cubic-bezier(.2, .8, .2, 1); --ease-apple: cubic-bezier(.32, .72, 0, 1); --dur-xs: .2s; --dur-sm: .35s; --dur-md: .6s; /* hover карточек */ --dur-lg: 1.1s; /* fade-in scroll */ /* ───────────────────────────────────────────── 11. LAYOUT ───────────────────────────────────────────── */ --max: 1240px; --side: 48px; /* ───────────────────────────────────────────── 12. TYPE — DM Sans ───────────────────────────────────────────── */ --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; --font-cn-mark: "Long Cang", "Noto Serif SC", "ZCOOL XiaoWei", "Ma Shan Zheng", cursive; /* Декоративный шрифт для watermark на About / cart */ /* размеры */ --t-h1: clamp(36px, 4.2vw, 46px); --t-h2: clamp(28px, 3vw, 34px); --t-h3: 24px; --t-h4: 16px; --t-body-lg: 17px; --t-body: 16px; --t-card: 14px; --t-meta: 12px; /* line-height */ --lh-tight: 1.15; --lh-snug: 1.3; --lh-body: 1.65; --lh-loose: 1.75; /* letter-spacing */ --ls-tight: -0.02em; --ls-body: -0.005em; --ls-eyebrow: 0.20em; --ls-logo: 0.28em; /* ───────────────────────────────────────────── 13. BUTTON — единый размер/радиус ───────────────────────────────────────────── */ --btn-h: 44px; --btn-radius: var(--r-pill); /* меняй здесь для скругления всех кнопок */ --btn-padding-x: 24px; --btn-font-size: 13.5px; --btn-gap: 12px; --btn-gap-hover: 14px; --btn-shadow-hover: 0 10px 28px -12px rgba(126,108,137,0.55); /* FORM INPUT — стандарт полей формы (input/textarea) */ --form-input-padding: 13px 22px; --form-input-font-size: 14.5px; --form-textarea-padding: 18px 22px; --form-textarea-min-h: 120px; --form-fields-gap: 18px; /* gap между группами полей в .form-fields / .form-row-2 */ /* LEAD — стандарт lead-параграфа (описание под заголовком секции) */ --lead-font-size: 15.5px; --lead-line-height: 1.6; /* BODY-LIST — стандарт текста в списках (например пункты «Вы получаете»). Мельче body, тоньше — для перечислений / value props. */ --body-list-size: 16px; --body-list-weight: 300; --body-list-line-h: 1.55; /* FORM AGREE — стандарт текста чек-бокса согласия Отступ ДО agree унифицирован через --form-fields-gap (18/12/8 — равно ритму между полями). Отступ ПОСЛЕ agree (до submit) — отдельный токен --form-agree-margin-bottom. */ --form-agree-font-size: 13px; --form-agree-margin-bottom: 16px; /* desktop — отступ от agree до кнопки submit */ --form-submit-margin: 8px; /* desktop — доп. отступ submit-wrap */ /* SECTION TITLE — стандарт заголовка h2 секции */ --section-title-size: 34px; /* desktop default */ --section-title-weight: 300; --section-title-line-h: 1.15; --section-title-mb: 14px; /* единый отступ заголовок→контент */ /* EYEBROW — стандарт mono-метки над заголовком (КТО МЫ, КЛИЕНТЫ и т.п.) */ --eyebrow-size: 11px; --eyebrow-weight: 500; --eyebrow-letter-spacing: 0.20em; --eyebrow-mb: 24px; /* RADII (семантические alias на радиусы выше) */ --r-island: var(--r-xl); /* большие острова (about, cta) — 22px */ --r-tile: var(--r-md); /* плитки (cat, samples) — 14px */ /* M-HEADER (мобильная шапка) */ --m-tap-target: 40px; /* touch-target для иконок/бургера */ --m-logo-size: 18px; --m-header-padding: 12px 18px; /* inner padding */ --m-header-min-h: 56px; /* min-height строки шапки */ --m-icon-svg-size: 20px; /* размер SVG внутри иконки */ /* FOOTER — стандарт тёмного острова + bottom-bar */ --footer-inner-padding: 60px 56px 64px; /* desktop default */ --footer-inner-gap: 48px; --footer-inner-radius: 24px; --footer-h-size: 11px; --footer-h-mb: 22px; --footer-list-gap: 13px; --footer-list-size: 14px; --footer-bottom-size: 12px; /* ───────────────────────────────────────────── 14. TEXT ON DARK — для тёмных островов/футера ───────────────────────────────────────────── */ --text-ivory: #efe4d4; /* основной текст на тёмном (warm ivory) */ --text-cream: #cdbfae; /* secondary текст на тёмном */ --text-pure-ivory: #fdfbf6; /* самый светлый — заголовки на тёмном */ /* ───────────────────────────────────────────── 15. SURFACE ELEVATIONS — поверхности островков ───────────────────────────────────────────── */ --bg-elev: #f7f5f0; /* островки на cream (CTA, etc.) — между bg и bg-warm */ --bg-tile-2: #f4f2ee; /* «Кто мы» островок */ /* ───────────────────────────────────────────── 16. ISLAND SHADOWS — мягкие тени для парящих островков ───────────────────────────────────────────── */ --shadow-island: 0 1px 2px rgba(40,35,30,0.03), 0 8px 20px -10px rgba(40,35,30,0.06), 0 20px 48px -24px rgba(126,108,137,0.10); --shadow-island-dark: 0 1px 2px rgba(40,35,30,0.06), 0 18px 48px -16px rgba(40,35,30,0.20), 0 32px 80px -32px rgba(70,59,84,0.30); /* ───────────────────────────────────────────── 17. SPACING SCALE — единая шкала отступов (8px-grid) Используется для margin, padding, gap в primitives и страницах. Между секциями: --space-2xl (desktop) / --space-xl (mobile). Внутри островков: --space-xl / --space-lg. Внутри карточек: --space-md / --space-sm. ───────────────────────────────────────────── */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --space-4xl: 96px; /* ───────────────────────────────────────────── SECTION PADDING — стандарт вертикальных отступов секций. Меняй здесь — меняется на всех секциях разом. Standard (64) + Standard (64) = gap 128 между длинными секциями Compact (48) + Compact (48) = gap 96 между короткими Standard (64) + Compact (48) = gap 112 между смежными ───────────────────────────────────────────── */ --section-pad-std: 64px; /* длинные содержательные секции */ --section-pad-compact: 48px; /* короткие band-секции */ /* ───────────────────────────────────────────── 18. BREAKPOINTS — документация (CSS @media использует px напрямую) Mobile: ≤ 768px — основная мобильная вёрстка Mobile-S:≤ 540px — компактный мобайл (узкие телефоны) Tablet: ≤ 1024px — планшеты, узкие ноутбуки Desktop: ≥ 1025px — базовая (desktop-first где задано без media) Side padding: Desktop: --side (48px) Mobile: --side-mobile (16px) ───────────────────────────────────────────── */ --side-mobile: 16px; } /* ============================================================ TABLET (768–1024px) — переопределения переменных для планшета. Все остальное наследуется от desktop (через clamp / max-width). ============================================================ */ @media (min-width: 768px) and (max-width: 1024px) { :root { --side: 24px; /* desktop 48 → tablet 24 */ --section-title-size: 30px; /* desktop 34 → tablet 30 (единый h2) */ --lead-font-size: 14px; /* desktop 15.5 → tablet 14 */ --lead-line-height: 1.5; /* desktop 1.6 → tablet 1.5 */ --section-pad-std: 56px; /* desktop 64 → tablet 56 → gap Std-Std 112 */ --section-pad-compact: 40px; /* desktop 48 → tablet 40 → gap Compact-Compact 80 */ --btn-h: 36px; /* desktop 44 → tablet 36 (как mobile) */ --btn-padding-x: 18px; /* desktop 24 → tablet 18 */ --btn-font-size: 13px; /* desktop 13.5 → tablet 13 */ --form-input-padding: 10px 20px; /* desktop 13 22 → tablet 10 20 */ --form-input-font-size: 14px; /* desktop 14.5 → tablet 14 */ --form-textarea-padding: 14px 20px; /* desktop 18 22 → tablet 14 20 */ --form-textarea-min-h: 100px; /* desktop 120 → tablet 100 */ --form-fields-gap: 12px; /* desktop 18 → tablet 12 → mobile 8 (плавный переход) */ --form-agree-margin-bottom: 12px; /* desktop 16 → tablet 12 — отступ от agree до submit */ --form-submit-margin: 6px; /* desktop 8 → tablet 6 */ /* Footer — компактнее на tablet */ --footer-inner-padding: 40px 32px 44px; /* desktop 60 56 64 → tablet 40 32 44 */ --footer-inner-gap: 28px; /* desktop 48 → tablet 28 */ --footer-inner-radius: 20px; /* desktop 24 → tablet 20 */ --footer-h-size: 10.5px; /* desktop 11 → tablet 10.5 */ --footer-h-mb: 16px; /* desktop 22 → tablet 16 */ --footer-list-gap: 11px; /* desktop 13 → tablet 11 */ --footer-list-size: 13.5px; /* desktop 14 → tablet 13.5 */ --footer-bottom-size: 11.5px; /* desktop 12 → tablet 11.5 */ } } /* ============================================================ MOBILE (≤767px) — единый источник всех мобильных значений. Меняешь здесь — меняется на всей странице (и на всех страницах сайта). ============================================================ */ @media (max-width: 767px) { :root { /* Боковые отступы секций */ --side: 16px; /* desktop 48 → tablet 24 → mobile 16 */ /* Section padding (минимум gap = 64px между секциями) */ --section-pad-std: 40px; /* desktop 64 → mobile 40 → gap Std-Std 80 */ --section-pad-compact: 32px; /* desktop 48 → mobile 32 → gap Compact-Compact 64 */ /* Кнопки — компактнее */ --btn-h: 36px; /* desktop 44 → mobile 36 */ --btn-padding-x: 18px; /* desktop 24 → mobile 18 */ --btn-font-size: 13px; /* desktop 13.5 → mobile 13 */ /* Form input — компактнее, font 14px (по запросу владельца). Mobile уплотнён: высота input ≈ 32px, gap 8px. ⚠ font-size 14px — iOS Safari будет зумить при focus (известный trade-off, осознанный выбор владельца). */ --form-input-padding: 7px 16px; /* было 10px 18px — высота input ≈32px (с 14px шрифтом) */ --form-input-font-size: 14px; /* было 16px (anti-zoom) → 14px по запросу — iOS зумит при focus */ --form-textarea-padding: 11px 16px; /* было 14px 18px — пропорционально input */ --form-textarea-min-h: 100px; /* desktop 120 → mobile 100 — НЕ менять (пространство для сообщения) */ --form-fields-gap: 8px; /* было 14px → 10px → 8px — единый gap между всеми полями форм на mobile */ /* Lead-параграф — чуть мельче */ --lead-font-size: 14px; /* desktop 15.5 → mobile 14 */ /* Body-list — чуть мельче (текст пунктов «Вы получаете» и подобные) */ --body-list-size: 15px; /* desktop 16 → mobile 15 */ /* Form-agree — текст в одну строку на 375px */ --form-agree-font-size: 10px; /* desktop 13 → mobile 10 */ --form-agree-margin-bottom: 12px; /* mobile — отступ от agree до submit (= tablet) */ --form-submit-margin: 4px; /* desktop 8 → tablet 6 → mobile 4 */ /* Section title — мельче на mobile */ --section-title-size: 24px; /* desktop 34 → mobile 24 */ --section-title-line-h: 1.2; --section-title-mb: 14px; /* Footer — компактный на mobile */ --footer-inner-padding: 32px 22px 28px; /* desktop 60 56 64 → mobile 32 22 28 */ --footer-inner-gap: 22px; /* desktop 48 → mobile 22 (для 2-кол) */ --footer-inner-radius: 18px; /* desktop 24 → mobile 18 */ --footer-h-size: 10.5px; --footer-h-mb: 14px; --footer-list-gap: 10px; --footer-list-size: 13.5px; --footer-bottom-size: 11px; } } /* ============================================================ GLOBAL RESETS — баззируется на DS ============================================================ */ *{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; } body{ font-family: var(--font-sans); background: var(--bg); color: var(--text); font-size: var(--t-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a{ color:inherit; text-decoration:none; } img{ display:block; max-width:100%; } button{ font-family:inherit; }