/* ============================================================================ MINGLEE FITNESS COACH — Design tokens (single source of truth) ---------------------------------------------------------------------------- Every color, font, size, space, radius and shadow lives here as a custom property. No other stylesheet hardcodes a design value; they only reference these tokens. The --wp--preset--* names mirror exactly what the WordPress block theme's theme.json will generate, so this layer ports with no changes. theme.json mapping: settings.color.palette -> --wp--preset--color--{slug} settings.typography.fontFamilies -> --wp--preset--font-family--{slug} settings.typography.fontSizes -> --wp--preset--font-size--{slug} settings.spacing.spacingSizes -> --wp--preset--spacing--{slug} ============================================================================ */ :root { /* ---- Brand palette (from BRANDBOOK) ---------------------------------- */ --wp--preset--color--ink: #001a16; /* Ink Green — deepest text, footer */ --wp--preset--color--graphite: #131c1d; /* Graphite — headings, dark cards */ --wp--preset--color--sky: #3fa0e4; /* Sky Blue — secondary accent */ --wp--preset--color--aqua: #23c1b4; /* Aqua — primary brand */ --wp--preset--color--turquoise: #66e0d1; /* Turquoise — highlight surface */ --wp--preset--color--lime: #c0d72b; /* Lime — CTA / energy */ --wp--preset--color--off-white: #f1f3f2; /* Off White — page background */ --wp--preset--color--stone: #d2d6d3; /* Stone — muted surface */ --wp--preset--color--white: #ffffff; /* ---- Derived support tints (still theme.json palette entries) -------- */ --wp--preset--color--ink-soft: #1d2a27; /* body text on light (12:1) */ --wp--preset--color--ink-muted: #46524f; /* secondary body text on light (7:1) */ --wp--preset--color--surface-alt: #e7edea;/* faint panel on the off-white bg */ --wp--preset--color--line: #dfe5e2; /* hairline divider */ --wp--preset--color--aqua-deep: #0d6f66; /* aqua dark enough to read on light */ --wp--preset--color--graphite-90: #0c1314;/* footer / deepest panel */ /* ---- Semantic colour roles (dark visual world) ---------------------- */ /* Brand preset values above stay intact; semantic roles remap the page to the dark scene established by the hero. */ --surface-dark-0: #05090c; --surface-dark-1: #0e1619; --surface-dark-2: #172126; --surface-dark-3: #263438; /* Light card ramp: muted enough to sit inside the dark system without becoming a competing white block. */ --surface-light-0: #d5e1dc; --surface-light-1: #eef4f1; --surface-light-2: #f5f7f6; --color-bg: var(--surface-dark-0); --color-section-alt: var(--surface-dark-1); --color-surface: var(--surface-dark-2); --color-surface-alt: var(--surface-dark-3); --color-card-light: var(--surface-light-0); --color-card-light-strong: var(--surface-light-1); --color-card-light-text: var(--wp--preset--color--ink); --color-card-light-muted: #41514d; --color-line-light: rgba(0, 26, 22, 0.20); /* Подложка ячеек «Форматов работы». Ступень между полом страницы (#05090c) и поверхностью тарифных карточек (#172126) — своя, но из той же лестницы. На наведении ячейка поднимается на следующую ступень: это и есть материальный отклик, помимо рамки. */ --service-card-bg: var(--surface-dark-1); --service-card-bg-hover: var(--surface-dark-2); /* Фиксированная высота ряда форматов на десктопе: без неё перераспределение полос под курсором меняет число строк в абзацах, ряд скачет и дёргает всю страницу ниже секции. Замеренный максимум по всей траектории перехода на 1081–1920px — 286px. Берём с запасом в 26px. Значение упало с 400px после двух правок: иконки ушли, а кадр перестал задавать высоту собственной пропорцией — теперь её определяет только текст. */ --service-row-height: 19.5rem; /* Аккордеон форматов (ниже 1081px). Шапка — единственная цель тапа, поэтому её высота задана явно и не зависит от длины названия в две строки. */ --service-head-min-height: 76px; --service-head-pad-x: clamp(1.1rem, 4.6vw, 1.5rem); --service-head-pad-y: 1.15rem; --service-head-gap: clamp(0.9rem, 3.6vw, 1.25rem); --service-index-size: 1.5rem; --service-index-width: 2.1ch; --service-index-idle: var(--color-on-dark-soft); --service-index-open: var(--color-aqua); --service-caret-size: 22px; --service-media-ratio: 16 / 11; --service-panel-pad: clamp(1.1rem, 4.6vw, 1.5rem); --service-card-bg-open: var(--surface-dark-2); --color-ink: var(--wp--preset--color--ink); --color-heading: var(--color-on-dark); --color-text: #dbe5e1; --color-text-soft: var(--color-on-dark-soft); --color-primary: var(--wp--preset--color--aqua); --color-primary-deep: var(--wp--preset--color--turquoise); --color-accent: var(--wp--preset--color--lime); --color-aqua: var(--wp--preset--color--aqua); --color-turquoise: var(--wp--preset--color--turquoise); --color-lime: var(--wp--preset--color--lime); --color-sky: var(--wp--preset--color--sky); --color-stone: var(--surface-dark-3); --color-danger: #d8503c; --color-line: rgba(255, 255, 255, 0.14); --color-dark: var(--surface-dark-1); --color-dark-deep: var(--surface-dark-0); --color-on-dark: #eef4f1; --color-on-dark-soft: #9fb2ad; --color-on-dark-line: rgba(255,255,255,.12); --footer-bg: #020608; /* ---- Results component tokens -------------------------------------- */ --results-bg: #05090b; --results-card-bg: #0a0f12; --results-card-line: rgba(238, 244, 241, 0.16); --results-card-muted: #93a19d; --results-card-copy: #d6e0dd; --results-accent: var(--wp--preset--color--turquoise); --results-gap: clamp(1.25rem, 2.2vw, 2rem); --results-card-radius: 15px; --results-card-height: clamp(560px, 41vw, 680px); /* ---- Type families -------------------------------------------------- */ /* One display voice across the page: Ampero Regular keeps headings clear; the Hero adds its athletic slant as a layout gesture. */ --wp--preset--font-family--display: 'Ampero'; --wp--preset--font-family--accent: 'Ampero'; --wp--preset--font-family--body: 'Manrope'; --font-display: var(--wp--preset--font-family--display); --font-accent: var(--wp--preset--font-family--accent); --font-body: var(--wp--preset--font-family--body); --font-hero: 'Ampero'; --section-title-size: clamp(2.55rem, 3.7vw, 4.4rem); /* --services-title-size удалён вместе с заголовком «Форматов работы»: секция открывается сразу раскладкой, отдельного кегля ей больше не надо. */ /* ---- Fluid type scale (>=1.25 ratio) -------------------------------- */ --wp--preset--font-size--2xs: 0.6875rem; /* 11px tiny CTA / utility */ --wp--preset--font-size--xs: 0.75rem; /* 12px micro labels */ --wp--preset--font-size--sm: 0.8125rem; /* 13px eyebrows / labels */ --wp--preset--font-size--small: 0.8375rem; /* 15px small body */ --wp--preset--font-size--medium: 1.0625rem; /* 17px base body */ --wp--preset--font-size--large: 1.1875rem; /* 19px lead body */ --wp--preset--font-size--x-large: clamp(1.25rem, 1.05rem + 0.65vw, 1.6rem); --wp--preset--font-size--xx-large: clamp(1.45rem, 1rem + 1.55vw, 2.2rem); /* card titles */ --wp--preset--font-size--huge: var(--section-title-size); /* section H2 */ --wp--preset--font-size--display: clamp(2.4rem, 1.1rem + 5.4vw, 6rem); /* hero H1 */ /* ---- Line-height & tracking ----------------------------------------- */ --lh-display: 0.94; --lh-tight: 1.04; --lh-snug: 1.18; --lh-body: 1.62; --track-display: -0.02em; --track-label: 0.16em; /* ---- Spacing scale (theme.json spacingSizes) ------------------------ */ --wp--preset--spacing--20: 0.5rem; --wp--preset--spacing--30: 0.75rem; --wp--preset--spacing--40: 1rem; --wp--preset--spacing--50: 1.5rem; --wp--preset--spacing--60: 2rem; --wp--preset--spacing--70: 3rem; --wp--preset--spacing--80: clamp(4rem, 2rem + 6vw, 6.5rem); /* ---- Layout --------------------------------------------------------- */ --container: 1280px; /* Wide track — header + hero only, so the H1 starts on the logo's axis. */ --container-wide: 1500px; --container-pad: clamp(1.25rem, 4vw, 3rem); --section-py: clamp(3.5rem, 2rem + 6vw, 6.75rem); --gutter: clamp(1rem, 2.2vw, 2rem); /* ---- Button shape and outline (one set of values everywhere) --------- */ /* Прямоугольник без скругления, рамка в один пиксель, фиксированная высота, подпись 11px с широким треком. Роли отличаются только заливкой, а стрелка живёт в правой ячейке за вертикальной линией. Ноль здесь только у кнопок: карточки, поля и плитки иконок сохранили свои радиусы из --radius-*. */ --btn-radius: 0px; --btn-border-width: 1px; --btn-height: 50px; --btn-height-lg: 56px; --btn-height-sm: 42px; --btn-pad-x: 1.65rem; --btn-font-size: 0.6875rem; /* 11px */ --btn-track: 0.17em; --btn-arrow-cell: 48px; /* Порог цели под палец. Ниже него не опускается ни одна интерактивная область, выше — не растёт без причины: лишняя высота кнопки отнимается у заголовка, а не добавляется к удобству. */ --tap-target-min: 44px; --btn-outline-ink: color-mix(in srgb, var(--color-heading) 55%, transparent); --btn-outline-light: rgba(255, 255, 255, 0.45); /* ---- Radius --------------------------------------------------------- */ --radius-xs: 8px; --radius-sm: 12px; --radius: 16px; --radius-lg: 24px; --radius-xl: 32px; --radius-pill: 999px; /* ---- Elevation ------------------------------------------------------ */ --shadow-sm: 0 1px 2px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.22); --shadow-md: 0 12px 30px -16px rgba(0,0,0,.42); --shadow-card: 0 20px 50px -26px rgba(0,0,0,.56); --shadow-lift: 0 30px 64px -28px rgba(0,0,0,.68); /* ---- Header component tokens --------------------------------------- */ /* Dark hero header: one full-bleed band keeps the navigation legible while allowing the photo to remain visible below it. */ --header-cta-border: color-mix(in srgb, var(--color-lime) 78%, transparent); --header-plate-radius: 20px; --header-plate-inset: 0px; /* --wide-track-gap удалён: он давал широкому треку собственный боковой отступ и ниже 1280px делал его уже обычного контейнера, из-за чего обещанная общая ось логотипа, H1 и футера ломалась. Оба трека теперь живут на одном --container-pad. */ --header-plate-bg: rgba(5, 9, 12, 0.94); --header-plate-border: rgba(255, 255, 255, 0.14); --header-plate-shadow: 0 16px 34px -20px rgba(0, 0, 0, 0.54); --header-logo-filter: brightness(0) invert(1); /* ---- Hero component tokens ----------------------------------------- */ /* Ampero Regular uses its own fluid Hero scale to preserve the established headline footprint without synthetic or fallback faces. */ --hero-title-size: clamp(2.5rem, 1.2rem + 5.5vw, 6rem); /* 0.94 давало отрицательный оптический просвет: у Ampero акцент над Й поднимается на 0.97em, а Д/Ц/Щ опускаются на 0.135em — при кегле 96px строки перекрывались на 15.8px. Заголовок редактируется в WP, поэтому запас нужен структурный, а не «повезло с буквами». */ --hero-title-lh: 1.02; --hero-title-track: -0.01em; /* Hero rhythm follows the existing 8-point spacing scale: the title and lead read as one message group, while actions get a full step of separation and keep a 16px relationship between the two CTAs. */ --hero-content-pad-block: clamp(3rem, 7vh, 5rem); --hero-title-lead-gap: var(--wp--preset--spacing--50); --hero-lead-actions-gap: var(--wp--preset--spacing--60); --hero-actions-gap: var(--wp--preset--spacing--40); --hero-content-pad-block-mobile: clamp(3rem, 8vh, 4rem); --hero-title-lead-gap-mobile: var(--wp--preset--spacing--40); --hero-lead-actions-gap-mobile: var(--wp--preset--spacing--50); --hero-actions-gap-mobile: var(--wp--preset--spacing--20); /* Headline leans forward; the payoff line carries the lime gradient. */ --hero-title-skew: -7deg; /* The lime gradient follows the brand chevrons in the supplied backdrop. */ /* Аква, а не лайм: лайм закреплён за действием, и когда он ещё и на заголовке, единственный сигнал приоритета в герое размывается. */ --hero-title-grad-from: var(--color-aqua); --hero-title-grad-to: #66e0d1; /* Soft light halo so the line lifts off the concrete instead of sinking into it. Must be a filter, not a text-shadow: with background-clip:text a text-shadow paints over the gradient and washes the letters out. */ --hero-title-glow: drop-shadow(0 0 18px rgba(35, 193, 180, 0.26)); --hero-lead-size: 1.125rem; /* 18px */ --hero-lead-lh: 1.45; --hero-lead-measure: 480px; --about-meta-size: clamp(0.95rem, 0.86rem + 0.15vw, 1.05rem); /* Grade the supplied photograph before the dark scrim establishes the copy zone on the left and keeps the chevrons readable on the right. */ --hero-bg-grade: contrast(1.08) saturate(1.06) brightness(0.68); /* The runner is a separate cut-out on top of that photo. Half-strength, so he keeps up with the graded plate behind him instead of going flat. */ --hero-man-grade: contrast(1.05) saturate(1.09); --hero-scrim: linear-gradient(96deg, rgba(5,9,12,.995) 0%, rgba(5,9,12,.93) 27%, rgba(5,9,12,.60) 49%, rgba(5,9,12,.14) 72%, rgba(5,9,12,.20) 100%), linear-gradient(to top, rgba(2,6,8,.84), rgba(2,6,8,.05) 42%, rgba(2,6,8,.48) 100%); /* На телефоне бегун стоит справа и заходит под кнопки, поэтому вертикального затемнения мало: первый слой уводит левую колонку в почти чёрный и отпускает правую треть, где читается фигура, второй держит низ под полосой принципов. */ --hero-scrim-mobile: linear-gradient(100deg, rgba(5,9,12,.97) 0%, rgba(5,9,12,.92) 42%, rgba(5,9,12,.60) 66%, rgba(5,9,12,.18) 100%), linear-gradient(180deg, rgba(5,9,12,.88) 0%, rgba(5,9,12,.30) 34%, rgba(5,9,12,.34) 62%, rgba(5,9,12,.92) 100%); --hero-man-shadow: drop-shadow(-14px 20px 28px rgba(12,19,20,.24)) drop-shadow(10px 0 20px rgba(18,152,176,.08)); /* Вторичная стоит на фотографии: контурной рамки мало, поэтому под ней остаётся тонкая матовая подложка. */ --hero-ghost-btn-bg: rgba(5, 10, 12, 0.44); --hero-ghost-btn-blur: saturate(130%) blur(8px); --hero-badge-bg: rgba(241, 243, 242, 0.96); --hero-badge-border: rgba(8, 28, 31, 0.12); --hero-badge-shadow: 0 18px 42px rgba(0, 0, 0, 0.32); --hero-badge-ring-size: 12.5px; --hero-badge-logo-shadow: drop-shadow(0 1px 0 rgba(255,255,255,.45)); /* ---- Hero: мобильная композиция ------------------------------------- */ /* Фигура возвращается на телефон и уходит за правый край: обрезанный кадр читается как движение из полосы, а не как наклейка по центру. Ширина в процентах от героя, а не от вьюпорта — так она не скачет от полосы прокрутки. */ --hero-man-width-mobile: 112%; --hero-man-offset-mobile: -34%; --hero-man-bottom-mobile: clamp(6px, 1.6vh, 20px); --hero-cta-min-width: 10.5rem; --hero-cta-pad-x: 1.15rem; /* Собственный кегль телефона: общий clamp упирается в свой минимум 2.5rem, а столбик по слову требует заметно крупнее. */ --hero-title-size-mobile: clamp(2.9rem, 13.8vw, 3.8rem); /* ---- Pricing component tokens -------------------------------------- */ --price-card-shadow: 0 10px 24px rgba(12, 19, 20, 0.04); --price-card-featured-shadow: 0 18px 38px rgba(12, 19, 20, 0.10); --price-card-hover-shadow: 0 18px 38px rgba(12, 19, 20, 0.08), 0 0 0 1px color-mix(in srgb, var(--color-aqua) 24%, transparent) inset; --price-card-featured-hover-shadow: 0 18px 38px rgba(12, 19, 20, 0.08); --price-card-hover-border: color-mix(in srgb, var(--color-primary-deep) 24%, var(--color-line)); --price-card-featured-border: color-mix(in srgb, var(--color-primary-deep) 14%, transparent); --price-card-featured-hover-border: var(--color-ink); --price-card-badge-padding: 0.4rem 1.05rem; --price-card-badge-font-size: 0.7rem; --price-card-badge-hover-bg: color-mix(in srgb, var(--color-lime) 82%, white); --price-card-meta-font-size: 0.85rem; --price-card-currency-font-size: 1.4rem; --price-card-list-font-size: 0.95rem; /* ---- Z-index scale -------------------------------------------------- */ --z-base: 1; --z-raised: 10; --z-sticky: 100; --z-nav: 200; --z-backdrop: 900; --z-modal: 1000; --z-toast: 1100; /* ---- Motion --------------------------------------------------------- Одна кривая на весь проект. В GSAP она ставится через gsap.defaults, иначе CSS и JS расходятся: было easeOutQuint против easeOutQuart. Четыре ступени длительности с непересекающимися ролями — раньше их было шесть, и 360 с 400 обслуживали одно и то же. */ --motion-ease-standard: cubic-bezier(.22, 1, .36, 1); --motion-duration-micro: 140ms; /* отклик на курсор и нажатие */ --motion-duration-state: 220ms; /* смена состояния элемента */ --motion-duration-component: 400ms; /* перестроение блока */ --motion-duration-section: 700ms; /* появление сцены, один раз */ --motion-stagger-tight: 80ms; /* то, что читается как одна вещь */ --motion-stagger-loose: 90ms; /* самостоятельные элементы */ --motion-distance-hover: 4px; --motion-distance-enter: 16px; /* было 8px — вектор не читался */ }