/* ============================================================================ Flow · Design System — WEB foundation (опора всей сети) Портировано из flow_instagram_ds (css/tokens.css + kit.css), адаптировано под веб. Источник правды для цвета/шрифта/компонентов сайта flowtraining.ru. Тема задаётся на по физическому залу: (default) dark — Владимирская (тёмная база, неон) light — Озёрки (светлая, банджи) cappuccino — Балтийская (тёплые светлые стены) gray — Мурино (прохладный графит, relax) Префикс компонентов: .fl-* (чтобы не конфликтовать со старыми классами при постепенном переходе). Меняешь токен здесь — меняется во всех шаблонах. ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700;800&family=Kodchasan:wght@500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,400;1,500;1,600&display=swap'); :root{ /* ── Палитра брендбука ── */ --gray-primary:#242427; --pink:#FF3CDF; --blue:#0014FF; --blue-light:#08CEE9; /* бирюзовый маркер / CTA-акцент */ --violet:#7B5BFF; --blush:#FF8FD8; --lilac:#C9A8E8; --white:#FFFFFF; /* ── Градиенты ── */ --grad-hero:linear-gradient(105deg,#FF3CDF,#7B5BFF 60%,#0014FF); /* неон pink→violet→blue: заливки/CTA/декор */ --grad-text:linear-gradient(105deg,#FF3CDF,#7B5BFF 58%,#4F7BFF); /* для градиентного текста (синий конец поднят) */ --grad-soft:linear-gradient(145deg,#FF8FD8,#B07BEE); --duo:linear-gradient(150deg,rgba(255,90,205,.34),rgba(95,70,235,.30)); /* дуотон поверх фото */ /* ── Шрифты (две роли) ── */ --font-emotion:'Playfair Display',Georgia,serif; /* заголовки/цитаты — italic */ --font-function:'Jost',system-ui,sans-serif; /* UI, цена, CTA, тело */ --font-alt:'Kodchasan',system-ui,sans-serif; /* доп. дисплей (Озёрки) */ /* ── Семантика темы: ТЁМНАЯ (по умолчанию — Владимирская/хаб/направления) ── */ --bg:#201f25; --bg-2:#17161c; --surface:#26242d; --text:#FFFFFF; --text-muted:#B9B4C4; --hairline:rgba(255,255,255,.13); --accent:var(--pink); --accent-2:var(--violet); --aura-strength:.85; --logo-src:url('../images/flow-logo-white.svg'); /* белые буквы на тёмном */ /* поверх фото — текст всегда светлый (любая тема) */ --on-photo:#FFFFFF; --on-photo-muted:rgba(255,255,255,.88); --on-photo-label:#E9D9F2; --on-photo-accent:#FF8FD8; --scrim-rgb:22,18,26; /* ── Геометрия/ритм (web) ── */ --maxw:1120px; --gutter:22px; --r-sm:12px; --r:18px; --r-lg:26px; --r-pill:100px; --section-y:clamp(56px,8vw,104px); } /* ── Тема: СВЕТЛАЯ — Озёрки ── */ [data-theme="light"]{ --bg:#F4F2F6; --bg-2:#ECEAF0; --surface:#FFFFFF; --text:#242427; --text-muted:#6E6B76; --hairline:rgba(0,0,0,.10); --accent:var(--blue); --accent-2:var(--pink); --aura-strength:.5; --logo-src:url('../images/flow-logo.svg'); /* тёмные буквы на светлом */ --grad-text:var(--grad-hero); /* на светлом тёмно-синий конец читается */ } /* ── Тема: КАПУЧИНО — Балтийская (тёплые светлые стены) ── */ [data-theme="cappuccino"]{ --bg:#F3ECDD; --bg-2:#EAE0CC; --surface:#FBF6EC; --text:#4A3526; --text-muted:#977C64; --hairline:rgba(74,53,38,.14); --lilac:#B58FC4; --blush:#D17FA0; --pink:#C25C7A; /* тёплый бренд-pink (карамельно-розовый) */ --accent:#C25C7A; --accent-2:#B58FC4; --aura-strength:.42; --logo-src:url('../images/flow-logo.svg'); --grad-hero:linear-gradient(105deg,#D38A4E,#D0568F 50%,#7B5BFF); /* карамель→pink→violet */ --grad-text:var(--grad-hero); --on-photo:#FFF6EC; --on-photo-accent:#FFC6A6; --scrim-rgb:30,24,24; } /* ── Тема: GRAY — Мурино (прохладный графит, relax) ── */ [data-theme="gray"]{ --bg:#26282D; --bg-2:#1E2024; --surface:#2E3137; --text:#EEF0F3; --text-muted:#A6ABB4; --hairline:rgba(255,255,255,.11); --accent:var(--blue-light); /* спокойный циан ведёт (relax/свежесть) */ --accent-2:#9FB7E8; --aura-strength:.5; --logo-src:url('../images/flow-logo-white.svg'); --grad-hero:linear-gradient(105deg,#08CEE9,#7B5BFF 60%,#0014FF); /* циан→violet→blue (прохладный) */ /* светлый конец-в-конец, чтобы градиентный ТЕКСТ читался на тёмном графите (без тёмно-синего провала) */ --grad-text:linear-gradient(105deg,#6FE3F2,#8FB8FF 55%,#AEC8FF); --on-photo-accent:#9AE6F2; --scrim-rgb:18,20,24; } /* ============================================================================ База ============================================================================ */ .fl *{box-sizing:border-box} .fl{background:var(--bg);color:var(--text);font-family:var(--font-function); font-weight:400;line-height:1.55;-webkit-font-smoothing:antialiased} .fl-wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)} .fl-section{padding:var(--section-y) 0} .fl-section--tone{background:var(--bg-2)} .fl-hairline{border:0;border-top:1px solid var(--hairline);margin:0} /* ── Вордмарк FLOW: крупно, ALL CAPS, разрядка ── */ .fl-wordmark{font-family:var(--font-function);font-weight:700;text-transform:uppercase; letter-spacing:.14em;font-size:clamp(1.4rem,2.4vw,2rem);line-height:1;color:var(--text); display:inline-block} .fl-wordmark--hero{font-size:clamp(3rem,12vw,7rem);letter-spacing:.06em;font-weight:800} .fl-logo{display:inline-block;height:30px;width:140px; background:var(--logo-src) left center/contain no-repeat} /* ── Типографика: ЭМОЦИЯ (Playfair italic) ── */ .fl-display{font-family:var(--font-emotion);font-style:italic;font-weight:600; line-height:1.02;letter-spacing:-.01em;font-size:clamp(2.2rem,6vw,4.4rem)} .fl-quote{font-family:var(--font-emotion);font-style:italic;font-weight:500; font-size:clamp(1.4rem,3vw,2rem);color:var(--text)} .fl-gt{background:var(--grad-text);-webkit-background-clip:text;background-clip:text; color:transparent} /* ── Типографика: ФУНКЦИЯ (Jost) ── */ .fl-eyebrow{font-weight:500;letter-spacing:.22em;text-transform:uppercase; color:var(--accent-2);font-size:.8rem} .fl-h2{font-family:var(--font-function);font-weight:600;text-transform:uppercase; letter-spacing:.01em;color:var(--text);font-size:clamp(1.6rem,3.4vw,2.5rem);line-height:1.08} .fl-h3{font-family:var(--font-function);font-weight:600;font-size:1.1rem;color:var(--text)} .fl-body{font-weight:300;color:var(--text-muted);font-size:1.02rem;line-height:1.6} .fl-price{font-family:var(--font-function);color:var(--accent);font-weight:400} .fl-marker{color:var(--blue-light)} /* ── Кнопки / CTA ── */ .fl-cta{display:inline-flex;align-items:center;justify-content:center;gap:.55em; font-family:var(--font-function);font-weight:700;font-size:1rem;letter-spacing:.02em; border:0;border-radius:var(--r-pill);padding:15px 34px;cursor:pointer;text-decoration:none; color:#fff;background:var(--grad-hero);box-shadow:0 14px 40px -14px rgba(255,60,223,.5); transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease} .fl-cta:hover{transform:translateY(-2px);box-shadow:0 20px 48px -14px rgba(255,60,223,.62)} .fl-btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:.5em; font-family:var(--font-function);font-weight:600;font-size:.98rem;border-radius:var(--r-pill); padding:14px 30px;text-decoration:none;color:var(--text);background:transparent; border:1px solid var(--hairline);transition:border-color .15s,color .15s} .fl-btn-ghost:hover{border-color:var(--accent);color:var(--accent)} .fl-pill{display:inline-flex;align-items:center;gap:.5em;border:1px solid var(--hairline); color:var(--text-muted);border-radius:var(--r-pill);padding:7px 16px;font-size:.78rem; letter-spacing:.12em;text-transform:uppercase} /* ── Поверхности ── */ .fl-card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r); padding:24px} .fl-badge{display:inline-flex;align-items:center;gap:.5em;font-weight:700;font-size:.85rem; letter-spacing:.04em;color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent); border:1px solid var(--accent);border-radius:var(--r-pill);padding:9px 20px} /* ── Оффер-локап (канон DS: лейбл → цена → дедлайн → CTA) ── */ .fl-offer{display:flex;flex-direction:column;gap:14px;align-items:flex-start} .fl-offer-label{font-weight:500;letter-spacing:.18em;text-transform:uppercase; color:var(--accent-2);font-size:.85rem} .fl-offer-price{font-weight:800;color:var(--text);font-size:clamp(3rem,9vw,5.5rem); line-height:.9;letter-spacing:-.01em} .fl-offer-price small{font-weight:500;font-size:.4em;color:var(--text-muted)} /* ── Аура-фон (когда без фото) ── */ .fl-aura{position:relative} .fl-aura::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; opacity:var(--aura-strength); background:radial-gradient(60% 50% at 20% 0%,rgba(255,143,216,.16),transparent 60%), radial-gradient(50% 45% at 95% 5%,rgba(123,91,255,.14),transparent 58%)} .fl-aura > *{position:relative;z-index:1} /* ── Фото + дуотон + скрим ── */ .fl-photo{position:relative;overflow:hidden} .fl-photo .fl-duo{position:absolute;inset:0;z-index:1;background:var(--duo); mix-blend-mode:soft-light;opacity:.4;pointer-events:none} .fl-photo .fl-scrim{position:absolute;left:0;right:0;bottom:0;z-index:2;height:66%;pointer-events:none; background:linear-gradient(transparent,rgba(var(--scrim-rgb),.58) 40%,rgba(var(--scrim-rgb),.95))} .fl-photo > .fl-on{position:relative;z-index:3;color:var(--on-photo)} @media(prefers-reduced-motion:reduce){ .fl-cta,.fl-btn-ghost{transition:none} }