/* «Гарна постава» — в языке FEMIN (Мінковська), ДВА ВАРИАНТА из одного исходника [Nick 14.09]. Вариант задаёт атрибут (по умолчанию — olive). Локально: ?v=olive | ?v=sea. В сборке (_mf-bundle.py) вариант вшивается намертво. ═══ ТОКЕНЫ ПАЛИТРЫ — модули в _lab/ опираются только на них ═══ --c-milk светлый фон (бело-молочный, не крем) --c-white белый: FAQ, карточки, плашки --c-soft второй светлый фон (olive — бледно-оливковый, sea — морской голубой #C1DBE8) --c-ink текст на светлом --c-muted второстепенный текст на светлом (подписи, примечания) --c-deep тёмные главы (olive — глубокий оливковый, sea — тёмно-коричневый #43302E) --c-deep-2 самый тёмный: подвал, подложка фото, затемнения --c-accent кнопка на светлом, акцент --c-on-deep текст на тёмном и на кнопке-акценте --c-on-deep-muted второстепенный текст на тёмном --milk-rgb / --ink-rgb / --shade-rgb те же цвета тройкой — для полупрозрачных линий и затемнений --s-why / --s-course / --s-change / --s-reviews / --s-price / --s-faq / --s-foot — заливка глав Контраст WCAG 2.x (посчитан 14.09, норма: текст 4.5, крупный 3): olive sea ink на milk #1F2419/#F5F4EF 14.40 #43302E/#F7F6F2 11.42 ink на white 15.85 12.35 ink на soft #E8EADF 13.03 #C1DBE8 8.56 muted на milk/white/soft #4F5845 6.78/7.46/6.14 #6A5552 6.40/6.92/4.80 on-deep на deep #F5F4EF/#3B4631 9.05 #F7F6F2/#43302E 11.42 on-deep на deep-2 #2C3425 11.73 #352523 13.48 on-deep-muted на deep / deep-2 #C9CDBE 6.15/7.98 #D5CBC6 7.75/9.16 on-deep на accent (кнопка) 9.05 11.42 accent на milk/white/soft (кнопка и значки) 9.05/9.97/8.20 11.42/12.35/8.56 ШКАЛА РАЗМЕРОВ — ступени, других размеров нет: display · h2 · script (у olive = h2) · h3 · body · label · num-xl (цена больше не использует) */ :root, :root[data-variant="olive"] { /* [Nick 15.09] олива отменена («полувоенный») → палитра FEMIN: крем #EFEDE0, тёмный #201B14, белый */ --c-milk: #EFEDE0; --c-white: #FFFFFF; --c-soft: #E4DFCF; --c-ink: #201B14; --c-muted: #5A5247; --c-deep: #201B14; --c-deep-2: #16120D; --c-accent: #201B14; --c-on-deep: #EFEDE0; --c-on-deep-muted: #CFC9B8; --milk-rgb: 239 237 224; --ink-rgb: 32 27 20; --shade-rgb: 32 27 20; --s-why: var(--c-deep); --s-course: var(--c-soft); --s-change: var(--c-deep); --s-reviews: var(--c-milk); --s-price: var(--c-deep); --s-faq: var(--c-white); --s-foot: var(--c-deep); /* [15.09 ночь] = цвет, в который тень финала уводит низ фото; с --c-deep-2 на стыке финал→подвал была ступенька (кадр r3/12) */ --s-demo: var(--c-white); --hdr-light: #FFFFFF; --hdr-dark: #12150E; /* темнее --c-ink: у имени без подложки фон любой */ --f-accent: "Forum", Georgia, serif; /* у FEMIN рукописного нет — акцент тем же Forum */ } :root[data-variant="sea"] { --c-milk: #F7F6F2; --c-white: #FFFFFF; --c-soft: #C1DBE8; /* палитра Майи, work/Marina Yoga/БРЕНД.md */ --c-ink: #43302E; /* палитра Майи */ --c-muted: #6A5552; --c-deep: #43302E; --c-deep-2: #352523; --c-accent: #43302E; --c-on-deep: #F7F6F2; --c-on-deep-muted: #D5CBC6; --milk-rgb: 247 246 242; --ink-rgb: 67 48 46; --shade-rgb: 53 37 35; --s-why: var(--c-deep); --s-course: var(--c-soft); --s-change: var(--c-milk); --s-reviews: var(--c-soft); --s-price: var(--c-deep); --s-faq: var(--c-white); --s-foot: var(--c-deep); /* [15.09 ночь] = цвет, в который тень финала уводит низ фото; с --c-deep-2 на стыке финал→подвал была ступенька (кадр r3/12) */ --s-demo: var(--c-white); --hdr-light: #FFFFFF; --hdr-dark: #1E1413; --f-accent: "Bad Script", "Forum", cursive; /* OFL, полная украинская кириллица — выбор 14.09 */ --fs-script: clamp(34px, 9.2vw, 64px); /* у Bad Script мелкий глаз — на ступень крупнее h2 */ } :root { /* старые имена — на них опираются CSS блока 3 и уроков (зоны других модулей), не удалять */ --cream: var(--c-milk); --cream-2: var(--c-soft); --ink: var(--c-ink); --ink-2: var(--c-deep-2); --white: var(--c-white); --line-l: rgb(var(--milk-rgb) / .30); --line-d: rgb(var(--ink-rgb) / .55); --glass: rgb(var(--shade-rgb) / .56); --glass-line: rgb(var(--milk-rgb) / .20); --f-display: "Forum", Georgia, "Times New Roman", serif; --f-body: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif; --f-num: "Aboreto", "Forum", Georgia, serif; --f-script: "Bad Script", "Forum", cursive; /* [Nick 15.09] вернуть прописной (рукописный), но тоньше прежнего Marck Script */ --fs-display: clamp(46px, 12.6vw, 104px); --fs-h2: clamp(31px, 8.4vw, 60px); --fs-h3: clamp(19px, 5.1vw, 26px); --fs-body: clamp(16px, 4.2vw, 18px); --fs-label: 13.5px; --fs-num-xl: clamp(96px, 26vw, 168px); --pad: 20px; --radius: 22px; --ease: cubic-bezier(.22, .61, .36, 1); } :root { --fs-script: clamp(27px, 7.4vw, 46px); } :root:not([data-variant="sea"]) { --s-demo: #E4DFCF; } /* [Nick 15.09] блок 3 чуть темнее крема FEMIN: кремовая капсула на нём видна */ /* [Nick 15.09] вернуть тексты первого экрана из v7 (снесены 14.09 по моему ошибочному правилу «≤4 текста») */ .hero__sub { margin-bottom: 4px; } /* [Nick 15.09 вечер] первый экран: весь текст чисто белый (был сероватый: тонкий 300 + тень), кнопка белая на коричневом градиенте */ .hero__inner { text-shadow: 0 1px 10px rgb(var(--shade-rgb) / .28); } .hero .t-body, .hero .t-label, .hero .cta__note, .hero__title, .hero__title .t-script { color: var(--c-white); } .hero .t-body { font-weight: 400; } .hero .btn--fill { background: var(--c-white); color: var(--c-ink); } .hero__proof { margin-top: 14px; letter-spacing: .12em; } .hero .cta__note { margin-top: 12px; color: rgb(255 255 255 / .88); } /* [Nick 15.09] блок 3 на светлой оливе: на белом терялся между экранами */ /* элементы только одного варианта */ :root:not([data-variant="sea"]) .v-sea { display: none !important; } :root[data-variant="sea"] .v-olive { display: none !important; } /* ═══ ЕЩЁ ДВА ВАРИАНТА [Nick 15.09: «пару вариантов цветов поинтереснее — акценты, тёмные и насыщенные, оранжевый мелким акцентом; прописной покрасивее»]. Локально ?v=wine | ?v=night; сборка _mf-bundle.py wine night → marina-femin-public/v2.html, v3.html. · фото-фоны общие с olive: bg2.js и сборка для {variant} берут кадры olive; · рукопись — Great Vibes (fonts-script2.css), у olive остаётся Bad Script; · wine/night показывают разметку .v-olive (кириллица в шапке, гарантия отдельной плашкой). Новые токены. По умолчанию (olive, sea) = currentColor или не заданы → вид прежний (сверено дампом вычисленных стилей 15.09): --c-head заголовки h2 на светлых главах --c-spark оранжевый на светлом: цифры 01–05, точки списка, щит гарантии --c-spark-hi оранжевый на тёмном: штрихи списка «Що зміниться» --c-script-hero рукописная строка первого экрана --c-sign подпись в подвале --c-dot-on активная точка стопки уроков --demo-line полоска блока 3 (модуль demo-line.css) --fs-sign имя в шапке (у Great Vibes мелкий глаз) Контраст WCAG 2.x (посчитан 15.09; норма: текст 4.5, крупный и не-текст 3): wine (бордо) night (ночь) ink на milk / white / demo #2A1418 15.35 / 17.33 / 13.41 #131B2C 15.37 / 17.20 / 13.60 muted на milk / white / demo #6B5357 6.20 / 7.00 / 5.42 #4D5568 6.66 / 7.46 / 5.90 head(h2) на milk / white / demo #7A1F30 9.00 / 10.16 / 7.87 #1F3A86 9.34 / 10.46 / 8.27 on-deep на deep / price / deep-2 #F6F0EC 11.64 / 15.43 / 16.68 #F3F2EF 9.34 / 15.27 / 16.72 on-deep-muted на них же #E3CFD1 8.83 / 11.71 / 12.66 #C9D1E3 6.83 / 11.16 / 12.23 on-deep на accent (кнопка) 9.00 9.34 spark на demo / white / milk #A33A0A 5.13 / 6.63 / 5.87 #A33D08 5.14 / 6.50 / 5.81 spark-hi на deep / price / deep-2 #F59A5E 6.05 / 8.02 / 8.67 #FF9447 4.77 / 7.80 / 8.54 (milk — светлый фон, demo — фон блока 3, deep — «Що зміниться», price — глава цены, deep-2 — подвал) */ :root { --c-head: currentColor; --c-spark: currentColor; --c-spark-hi: currentColor; } :root[data-variant="wine"] { --c-milk: #F6F0EC; /* фарфор, чуть розовый — не песок */ --c-white: #FFFFFF; --c-soft: #ECE0DB; --c-ink: #2A1418; --c-muted: #6B5357; --c-deep: #5C1626; /* бордо — насыщенная глава */ --c-deep-2: #1E0C0F; --c-accent: #7A1F30; --c-on-deep: #F6F0EC; --c-on-deep-muted: #E3CFD1; --milk-rgb: 246 240 236; --ink-rgb: 42 20 24; --shade-rgb: 30 12 15; --s-why: var(--c-deep); --s-course: var(--c-soft); --s-change: var(--c-deep); --s-reviews: var(--c-milk); --s-price: #2C1216; --s-faq: var(--c-white); --s-foot: var(--c-deep); /* [15.09 ночь] = цвет, в который тень финала уводит низ фото; с --c-deep-2 на стыке финал→подвал была ступенька (кадр r3/12) */ --s-demo: var(--c-soft); --hdr-light: #FFFFFF; --hdr-dark: #1E0C0F; --c-head: #7A1F30; --c-spark: #A33A0A; --c-spark-hi: #F59A5E; --c-script-hero: #F6F0EC; /* 15.09: оранжевая тонкая рукопись на светлом фото не читалась → светлая; оранжевый остаётся в деталях */ /* wine: оранжевая рукописная строка на первом экране, подпись в подвале светлая */ --c-dot-on: #F59A5E; --demo-line: #A33A0A; --f-script: "Great Vibes", "Bad Script", cursive; --fs-script: clamp(40px, 11.4vw, 70px); --fs-sign: clamp(27px, 7.2vw, 34px); } :root[data-variant="night"] { --c-milk: #F3F2EF; /* нейтральная бумага */ --c-white: #FFFFFF; --c-soft: #E1E5EB; --c-ink: #131B2C; --c-muted: #4D5568; --c-deep: #1F3A86; /* кобальт — насыщенная глава */ --c-deep-2: #0B1220; --c-accent: #1F3A86; --c-on-deep: #F3F2EF; --c-on-deep-muted: #C9D1E3; --milk-rgb: 243 242 239; --ink-rgb: 19 27 44; --shade-rgb: 11 18 32; --s-why: var(--c-deep); --s-course: var(--c-soft); --s-change: var(--c-deep); --s-reviews: var(--c-milk); --s-price: #111B33; --s-faq: var(--c-white); --s-foot: var(--c-deep); /* [15.09 ночь] = цвет, в который тень финала уводит низ фото; с --c-deep-2 на стыке финал→подвал была ступенька (кадр r3/12) */ --s-demo: var(--c-soft); --hdr-light: #FFFFFF; --hdr-dark: #0B1220; --c-head: #1F3A86; --c-spark: #A33D08; --c-spark-hi: #FF9447; --c-sign: #FF9447; /* night: рукописная строка первого экрана белая, подпись в подвале оранжевая */ --c-dot-on: #FF9447; --demo-line: #A33D08; --f-script: "Great Vibes", "Bad Script", cursive; --fs-script: clamp(40px, 11.4vw, 70px); --fs-sign: clamp(27px, 7.2vw, 34px); } /* точки приложения акцентов: у olive токены = currentColor / не заданы → те же цвета, что без этих правил */ .chapter.is-light > .wrap > .t-h2, .dl .dl__title, .faq .t-h2, .card .t-h2 { color: var(--c-head); } .dl .dl__num { color: var(--c-spark); } .glass .needs li::before { background: var(--c-spark); } .card .ticks li::before { background: var(--c-spark); } #change .ticks li::before { background: var(--c-spark-hi); opacity: .9; } :root:not([data-variant="wine"]):not([data-variant="night"]) #change .ticks li::before { opacity: .7; } .guarantee__head .shield { stroke: var(--c-spark); } .hero__title .t-script { color: var(--c-script-hero, currentColor); } .foot .foot__sign { color: var(--c-sign, currentColor); } .hdr .hdr__sign { font-size: var(--fs-sign, var(--fs-h3)); } .ls .ls__dot[aria-current="step"]::before { background: var(--c-dot-on, var(--ls-ink)); } /* тёмная тема стопки в модуле держит цвета FEMIN числами — у olive они совпадают с токенами, у wine/night берутся токены */ :root:not([data-variant="sea"]) section.ls[data-theme="dark"] { --ls-fog: var(--c-deep); --ls-bonus-bg: var(--c-milk); --ls-bonus-ink: var(--c-ink); } *, *::before, *::after { box-sizing: border-box; } * { font-synthesis: none; } /* её курсив синтетический — не повторяем */ html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; } html.lenis, html.lenis body { height: auto; } body { margin: 0; background: var(--c-deep-2); color: var(--c-on-deep); font-family: var(--f-body); font-weight: 300; font-size: var(--fs-body); line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, video, canvas { display: block; max-width: 100%; } a { color: inherit; } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } h1, h2, h3 { margin: 0; font-weight: 400; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } .wrap { width: 100%; max-width: 600px; margin: 0 auto; padding: 0 var(--pad); } .center { text-align: center; } /* ---------- роли шрифта ---------- */ .t-display { display: block; font-family: var(--f-display); font-size: var(--fs-display); line-height: .96; text-transform: uppercase; letter-spacing: .005em; } .t-h2 { font-family: var(--f-display); font-size: var(--fs-h2); line-height: 1.04; text-transform: uppercase; letter-spacing: .01em; text-wrap: balance; } /* акцентная строка: olive — Forum строчными той же ступени h2, sea — рукописный Bad Script */ .t-script { display: block; font-family: var(--f-script); font-size: var(--fs-script); line-height: 1.08; text-transform: none; letter-spacing: .005em; } .t-script { letter-spacing: 0; line-height: 1.12; } .t-h3, .t-q { font-family: var(--f-display); font-size: var(--fs-h3); line-height: 1.2; text-transform: uppercase; letter-spacing: .015em; text-wrap: balance; } .t-body { font-family: var(--f-body); font-weight: 300; font-size: var(--fs-body); line-height: 1.5; text-wrap: pretty; } .t-accent { font-weight: 500; } .t-label, .cta__note, .btn, .pill { font-family: var(--f-body); font-size: var(--fs-label); line-height: 1.35; } .t-label { font-weight: 400; text-transform: uppercase; letter-spacing: .14em; } .t-num { font-family: var(--f-num); font-size: var(--fs-label); letter-spacing: .06em; line-height: 1; } .t-num--xl { font-size: var(--fs-num-xl); letter-spacing: -.04em; } /* ---------- кнопки — капсулы, как пилюля «Курс «Гарна постава»» ---------- */ .btn { display: flex; align-items: center; justify-content: center; min-height: 60px; width: 100%; max-width: 360px; margin: 0 auto; padding: 0 30px; border-radius: 999px; text-decoration: none; text-transform: uppercase; letter-spacing: .14em; font-weight: 500; text-align: center; transition: transform .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease); } .btn:active { transform: scale(.98); } @media (hover: hover) { .btn:hover { transform: translateY(-1px); } } /* на фото и тёмных главах — белая капсула */ .btn--fill { background: var(--c-white); color: var(--c-ink); box-shadow: 0 10px 28px rgb(0 0 0 / .16); } /* на светлом — капсула цвета акцента */ .btn--dark, .btn--accent, .chapter.is-light .btn--fill { background: var(--c-accent); color: var(--c-on-deep); box-shadow: 0 10px 26px rgb(var(--shade-rgb) / .20); } .btn--line-dark { border: 1px solid var(--line-d); color: var(--c-ink); } .cta { display: grid; gap: 12px; margin-top: 34px; } .cta__note { text-align: center; } .pill { display: inline-flex; align-items: center; min-height: 34px; padding: 0 16px; border-radius: 999px; font-weight: 300; } .pill--light { border: 1px solid rgb(255 255 255 / .62); color: var(--c-white); background: rgb(var(--shade-rgb) / .30); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 0 8px; } .glass { position: relative; margin-top: 24px; padding: 28px 22px; border-radius: var(--radius); background: var(--glass); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(18px) saturate(1.05); backdrop-filter: blur(18px) saturate(1.05); } .glass > * + * { margin-top: 14px; } .glass .t-h3 { margin-top: 22px; } .glass .t-label + ul, .glass .t-label + ol { margin-top: 16px; } /* ---------- липкий фон всей страницы ---------- */ .stage { position: fixed; inset: 0; z-index: 0; pointer-events: none; } .stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .stage__fallback { position: absolute; inset: 0; background: var(--c-deep-2) center/cover no-repeat; opacity: 0; } .no-webgl .stage__fallback { opacity: 1; } .stage__grain { position: absolute; inset: -50%; opacity: .035; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } main, .foot { position: relative; z-index: 1; } /* ---------- шапка: только имя, без подложки; цвет — по теме секции под ней ---------- */ .hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; height: 60px; padding: 0 18px; padding-top: env(safe-area-inset-top); color: var(--c-on-deep); pointer-events: none; } .hdr__sign { pointer-events: auto; min-height: 44px; display: flex; align-items: center; text-decoration: none; font-family: var(--f-display); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .2em; font-weight: 400; } .hdr__sign { font-family: var(--f-script); font-size: var(--fs-h3); text-transform: none; letter-spacing: 0; } .hdr__sign { transition: opacity .3s var(--ease), transform .3s var(--ease); } /* [Nick 15.09 ночь] шапка закреплена: имя и плашка курса не прячутся на прокрутке, чуть прозрачные. is-muted — под именем фото/видео или пёстрый фон (app.js меряет пиксели): имя белое с тенью, а не исчезает */ .hdr__sign { opacity: .92; } .hdr.is-muted .hdr__sign { color: var(--hdr-light); text-shadow: 0 1px 12px rgb(0 0 0 / .5); } .hdr__course { margin: 0 0 0 auto; white-space: nowrap; text-shadow: none; background: rgb(var(--shade-rgb) / .68); } /* .68 + blur: белый текст ≥4.5 даже над молочным фоном */ .hdr[data-theme="dark"] { color: var(--hdr-light); } .hdr[data-theme="light"] { color: var(--hdr-dark); } /* ---------- 1 · первый экран: фон + вырезанная Марина поверх затемнения ---------- */ /* кадр (фон, затемнение, вырезанная Марина) рисует сцена; секция выше экрана на --sand-lead — фронт песка стартует ниже первого экрана */ .hero { position: relative; min-height: calc(100svh + var(--sand-lead, 8svh)); background: var(--c-deep-2); } /* [Nick 15.09 ночь] кадр — картинкой в разметке, высота 100svh (не меняется, когда прячется панель браузера → фото не «растягивается»); ниже кадра — сплошной --c-deep сцены, низ кадра запечён в тот же цвет */ .hero__media { position: absolute; top: 0; left: 0; right: 0; height: 100svh; overflow: hidden; } .hero__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 58% 22%; } /* [Nick 15.09 ночь] Марина левее — по центру экрана (было 50%) */ .hero__img--wide { display: none; } .hero__inner { position: relative; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 88px var(--pad) calc(70px + env(safe-area-inset-bottom)); text-align: center; color: var(--c-white); /* [Nick 15.09 ночь] текст выше (было 34px); тень в кадре поднята на столько же */ text-shadow: 0 1px 16px rgb(var(--shade-rgb) / .35); } .nw { white-space: nowrap; } /* подпись «5000+ учениць · 16 років практики» переносится только по «·» */ .hero__label { margin-bottom: 16px; white-space: nowrap; text-shadow: none; } .hero .pill--light { background: rgb(var(--shade-rgb) / .52); } /* .30 давало 3.7 над светлым фоном кадра (аудит 14.09 вечер) */ .hero__title { margin-bottom: 14px; } .hero__title .t-script { margin-top: 6px; } :root[data-variant="sea"] .hero__title { margin-bottom: 22px; } /* хвосты рукописных «у з д» не касаются строки ниже */ .hero__lead { max-width: 22em; } .hero .cta { width: 100%; margin-top: 26px; } .hero .btn { text-shadow: none; } /* ---------- главы поверх сцены ---------- */ .chapter { position: relative; padding: 16vh 0; } .chapter .t-h2 { margin-bottom: 8px; } /* светлый фон: класс ставит bg.js по замеру яркости кадра или цвета */ .chapter.is-light { color: var(--c-ink); } .chapter.is-light .glass { background: rgb(255 255 255 / .42); border-color: rgb(255 255 255 / .7); -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1); } /* [Nick 15.09] плашки снова стеклянные, полупрозрачные */ /* без матового стекла (правило №2) */ .chapter.is-light .scan, .chapter.is-light .scan li, .chapter.is-light .rule, .chapter.is-light .quote { border-color: var(--line-d); } /* мелкие подписи на светлом фоне сцены — на своей подложке, фон под ними непредсказуем */ /* поля как у пилюль (min-height 34): 8 + 13.5·1.35 + 8 ≈ 34 px (контроль 14.09: при 5 px текст лип к краям) */ .chapter.is-light .cta__note, .ls .cta__note { width: fit-content; margin-left: auto; margin-right: auto; padding: 8px 18px; border-radius: 999px; background: var(--c-milk); opacity: 1; } /* однотонные главы: заливка токеном, текст лежит на фоне (без стекла) */ #change { background: var(--s-change); } /* [Nick 15.09 вечер] блок 2 на тёмно-коричневом: текст светлый, плашка — тёмное полупрозрачное стекло */ :root { --s-pain: var(--c-deep); } #pain { color: var(--c-white); } #pain .glass { background: rgb(var(--shade-rgb) / .62); border-color: rgb(255 255 255 / .16); } /* плашка не растворяется и заезжает на светлую стену блока 3 — тёмное стекло, белый текст читается на обоих фонах */ /* блок 3 на стене из сцены: белая заливка сцены модуля не закрывает фон */ #demo { --demo-section-bg: transparent; } #price { background: var(--s-price); } .chapter--solid { color: var(--c-on-deep); --rule: rgb(var(--milk-rgb) / .26); } .chapter--solid.is-light { color: var(--c-ink); --rule: rgb(var(--ink-rgb) / .16); } .chapter--solid .glass { background: none; border: 0; border-top: 1px solid var(--rule); border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; margin-top: 34px; padding: 28px 0 0; } .chapter--solid .cta__note { background: none; padding: 0; } /* текст на фото комнаты [Nick 14.09: фото без дымки, исходный цвет] — читаемость локально: молочные плашки под текстом */ /* контроль 14.09: полупрозрачные плашки на фото читались как матовое стекло (правило №2) → ровная молочная заливка без размытия */ /* 15.09 [Nick]: фото комнаты убрано, фон молочный → плашки белые карточки с тонкой линией и мягкой тенью, чтобы читались на светлом */ .chapter--solid.on-room .glass { background: rgb(255 255 255 / .42); border: 1px solid rgb(255 255 255 / .7); border-radius: var(--radius); box-shadow: 0 14px 34px -22px rgb(var(--ink-rgb) / .22); -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1); margin-top: 16px; padding: 24px 22px 26px; } .on-room > .wrap > .t-h2 { margin-left: auto; margin-right: auto; } .on-room .cta__note { background: var(--c-white); padding: 8px 18px; } .on-room .arrow { background: var(--c-white); border-color: rgb(var(--ink-rgb) / .3); color: var(--c-ink); } /* «Що всередині» на глиняной стене (тёмная тема): плашки — тёмное полупрозрачное стекло, текст светлый [Nick 15.09] */ section.ls[data-lessons-stack] { --ls-plate: rgb(var(--shade-rgb) / .46); --ls-plate-line: rgb(255 255 255 / .16); } section.ls[data-lessons-stack] .ls__intro, section.ls[data-lessons-stack] .ls-card__text { -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); } /* карточка урока — светлая панель, подпись на ней тёмная (тема секции тёмная, иначе текст светлый на светлом) */ section.ls[data-lessons-stack] .ls-card { --ls-ink: var(--c-ink); color: var(--c-ink); } section.ls[data-lessons-stack] .ls-card .ls-card__text { -webkit-backdrop-filter: none; backdrop-filter: none; } /* строка «7 днів на повернення» под кнопкой на тёмной секции уроков: была кремовый текст на кремовой плашке (невидимо) */ section.ls[data-lessons-stack] .cta__note { background: rgb(var(--shade-rgb) / .46); color: var(--c-on-deep); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } /* плашка «Сім практик» ближе к карточкам уроков */ section.ls[data-lessons-stack] .ls__head { position: relative; z-index: 4; } /* подпись под видео — бежевая панель; стекло пробовали 15.09 (сквозь него видны карточки позади) — Nick: не делать */ /* «Щоб постава трималась» [Nick 15.09]: обычный текст, без буквиц и капса */ #why .t-h3 { font-family: var(--f-body); font-weight: 500; font-size: calc(var(--fs-body) * 1.12); line-height: 1.4; text-transform: none; letter-spacing: 0; } /* ---------- 2 · впізнаєш себе ---------- */ .scan { margin-top: 30px; } .scan li { position: relative; padding: 15px 2px; font-size: var(--fs-body); } .scan li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; opacity: .22; transform-origin: 0 50%; transform: scaleX(var(--ln, 1)); } .js .scan li { opacity: 0; transform: translateY(14px); --ln: 0; } /* ---------- 4 · чому не вийде ---------- */ .needs { display: grid; gap: 14px; } /* приём FEMIN «F it · E at · M ind», адаптирован под кириллицу: крупная буквица Forum ВНУТРИ слова */ .needs li { position: relative; padding-left: 18px; font-family: var(--f-body); font-size: var(--fs-body); font-weight: 400; line-height: 1.45; text-transform: none; letter-spacing: 0; } .needs li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: currentColor; } .t-lead { font-family: var(--f-body); font-weight: 500; font-size: var(--fs-body); line-height: 1.4; } .t-cite { display: block; margin-top: 10px; font-style: normal; font-size: var(--fs-label); letter-spacing: .02em; } .ticks { display: grid; gap: 10px; } .ticks li { position: relative; padding-left: 24px; } .ticks li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 12px; height: 1px; background: currentColor; opacity: .7; } .chapter > .wrap > .t-h3 { margin-top: 40px; } #why { padding-top: 8vh; padding-bottom: 6vh; } /* [Nick 15.09 ночь] блок 4 выше (было 16vh сверху) */ /* [15.09 ночь] блок 4 теперь на глиняной стене: светлое стекло над солнечным пятном давало белый текст на светлом (кадр r2/04) — стекло тёмное, как плашка «Сім практик»: .62 над самым светлым местом стены ≈6:1 */ #why .glass { background: rgb(var(--shade-rgb) / .62); border-color: rgb(255 255 255 / .22); } /* дальше та же комната — «Що всередині» без перехода, пустое поле между ними не нужно */ /* ---------- 3 · раскадровка ---------- */ /* модуль demo-line.css; фон секции рисует сцена (--s-demo) — свой фон модуля прозрачный, иначе он режет песок ровной линией */ .dl { --demo-section-bg: transparent; } .dl-after .cta { margin-top: 18px; } .arrow { width: 52px; height: 52px; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; transition: opacity .2s var(--ease), transform .2s var(--ease); } .arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; } .arrow:disabled { opacity: .3; cursor: default; } .arrow:not(:disabled):active { transform: scale(.94); } .gift { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linejoin: round; opacity: .9; } /* ---------- 5 · уроки: стопка — lessons-stack.css; здесь заголовок на комнате и кнопка после стопки ---------- */ .ls__head .t-h2 { margin-left: auto; margin-right: auto; } /* [Nick 15.09] без плашки: фон — глиняная стена с пальмой, текст светлый */ /* над ковриком 2.04 (аудит 14.09 вечер); ровная молочная, без полупрозрачности (контроль 14.09) */ .ls__after { padding-bottom: 12vh; } .ls__after .cta { margin-top: 0; } /* ---------- 7а · отзывы: лента вбок, бесконечная по кругу ---------- */ .ribbon { position: relative; margin: 22px 0 0; } .ribbon__view { position: relative; height: 320px; max-width: 1180px; margin: 0 auto; overflow: hidden; touch-action: pan-y; -webkit-user-select: none; user-select: none; cursor: grab; } .ribbon__view:active { cursor: grabbing; } .ribbon__track { position: absolute; inset: 0; } .shot { position: absolute; left: 0; top: 0; margin: 0; width: 300px; height: 300px; padding: 12px; /* ширина и высота — из app.js: высота по скрину, без пустого поля */ display: grid; place-items: center; border-radius: 22px; background: var(--c-white); box-shadow: 0 18px 44px rgb(var(--shade-rgb) / .14), 0 1px 2px rgb(var(--shade-rgb) / .08); will-change: transform; } .shot img { width: auto; height: auto; max-width: 100%; max-height: 100%; border-radius: 12px; pointer-events: none; } .no-js-ribbon .ribbon__view { height: auto; overflow-x: auto; } /* стрелки по бокам ленты на постоянной высоте (середина самой низкой карточки): лента меняет высоту под карточку, стрелки из-под пальца не уезжают, кнопка стоит сразу под карточкой */ .ribbon__nav { position: absolute; top: 0; left: 50%; width: min(100%, 1180px); height: 0; transform: translateX(-50%); z-index: 20; pointer-events: none; } .ribbon__nav .arrow { position: absolute; top: calc(var(--ribbon-arrow-y, 60px) - 22px); width: 44px; height: 44px; pointer-events: auto; } .ribbon__nav .arrow[data-dir="-1"] { left: 2px; } .ribbon__nav .arrow[data-dir="1"] { right: 2px; } .reviews .cta { margin-top: 6px; } .reviews { padding-bottom: 12vh; } /* ---------- 7б · хто веде ---------- */ .author { position: relative; background: var(--c-deep-2); color: var(--c-white); } /* портрет и затемнение рисует сцена (data-bg-shade="2"); свой слой затемнения — только без WebGL */ .author__shade { display: none; } .no-webgl .author__shade { display: block; position: sticky; top: 0; height: 100svh; margin-bottom: -100svh; /* лицо (верхняя треть) без затемнения; под именем и пилюлями — ровный спуск в тень (аудит 14.09: белое имя на светлом топе давало 1.31) */ background: linear-gradient(180deg, rgb(var(--shade-rgb) / 0) 0%, rgb(var(--shade-rgb) / 0) 32%, rgb(var(--shade-rgb) / .5) 46%, rgb(var(--shade-rgb) / .76) 60%, rgb(var(--shade-rgb) / .9) 100%); } .author .pill--light { background: rgb(var(--shade-rgb) / .62); } /* портрет в сцене: .48 давало 4.09 над светлым топом (аудит 14.09 вечер) */ .author__inner { position: relative; padding-top: 48svh; padding-bottom: 14vh; } /* [Nick 15.09 ночь] имя на линии груди (38svh — на лице/подбородке) */ /* [Nick 15.09 вечер] имя чуть выше груди (было 62svh — на уровне живота) */ /* имя ниже светлого топа — на плотной тени (аудит 14.09: 2.22 при -46svh) */ .author .glass { margin-top: 26px; background: rgb(var(--shade-rgb) / .40); } /* [Nick 15.09] стекло полупрозрачное, не глухая плашка */ /* .62 → .70: имя в шапке над стеклом 4.11 (контроль 14.09) */ /* имя на портрете: фон в сцене неподвижен, заголовок проезжает и светлый верх кадра — мягкая тёмная плашка, как у пилюль (аудит 14.09 вечер: 2.3–2.5) */ .author .t-h2 { margin-left: auto; margin-right: auto; font-family: var(--f-script); font-size: var(--fs-script); text-transform: none; letter-spacing: 0; line-height: 1.12; text-shadow: 0 1px 2px rgb(var(--shade-rgb) / .55), 0 2px 22px rgb(var(--shade-rgb) / .6); } /* [Nick 15.09] рукописным, без плашки и без градиента на фото */ .quote { margin: 26px 0 8px; padding: 20px 0; border-top: 1px solid var(--line-l); border-bottom: 1px solid var(--line-l); } .quote cite { display: block; margin-top: 10px; font-style: normal; } /* ---------- 8 · цена: на карточке три размера — h2 · body · label ---------- */ .card { position: relative; background: var(--c-milk); color: var(--c-ink); border-radius: 26px; padding: 34px 22px 28px; box-shadow: 0 30px 60px rgb(0 0 0 / .16); } .card > * + * { margin-top: 14px; } .card .rule { border: 0; border-top: 1px solid rgb(var(--ink-rgb) / .14); margin-top: 24px; } .price { display: flex; align-items: baseline; justify-content: center; gap: .28em; margin-top: 22px; line-height: 1; } .price__num { font-family: var(--f-num); font-size: var(--fs-h2); letter-spacing: -.02em; } .price__cur { font-family: var(--f-display); font-size: var(--fs-h2); text-transform: uppercase; } .price + .t-body { margin-top: 8px; } .card__label { margin-top: 28px; } .card .ticks { margin-top: 14px; } .card .cta { margin-top: 28px; } .card .cta__note { color: var(--c-muted); } .guarantee__head { display: flex; align-items: center; gap: 8px; font-weight: 500; } .guarantee__head.center { justify-content: center; } .shield { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } /* Море: внутри карточки, выделена цветной подложкой */ .guarantee--in { margin-top: 26px; padding: 18px 18px 20px; border-radius: 18px; background: var(--c-soft); } .guarantee--in .t-body { margin-top: 8px; } /* Олива: отдельная белая плашка сразу после карточки */ /* [Nick 15.09 вечер] карточка цены — полупрозрачное стекло, как все плашки; текст светлый, кнопка белая */ .card--price { background: rgb(255 255 255 / .07); color: var(--c-white); border: 1px solid rgb(255 255 255 / .16); box-shadow: none; -webkit-backdrop-filter: blur(18px) saturate(1.05); backdrop-filter: blur(18px) saturate(1.05); } .card--price .t-h2 { color: var(--c-white); } .card--price .rule { border-top-color: rgb(255 255 255 / .18); } .card--price .cta__note { color: var(--c-on-deep-muted); } .card--price .btn--accent { background: var(--c-white); color: var(--c-ink); } .plate { margin-top: 14px; padding: 22px 22px 24px; border-radius: 22px; background: var(--c-white); color: var(--c-ink); } .plate .t-body { margin-top: 10px; } /* ---------- 9 · FAQ ---------- */ /* [16.09] стек ценности длиннее: строки в карточке цены выравниваются по длине — без висячего «на масаж.» */ .card--price .t-body { text-wrap: balance; } .faq { position: relative; background: var(--s-faq); color: var(--c-ink); padding: 15vh 0 7vh; } /* [Nick 15.09 ночь] финал ближе к «Напиши мені» */ .faq__list { display: grid; gap: 12px; margin-top: 34px; } .qa { border: 1px solid rgb(var(--ink-rgb) / .30); border-radius: 16px; } .qa summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 34px; align-items: center; gap: 14px; min-height: 64px; padding: 14px 14px 14px 18px; } .qa summary::-webkit-details-marker { display: none; } .plus { position: relative; width: 32px; height: 32px; border: 1px solid var(--c-ink); border-radius: 50%; transition: transform .3s var(--ease); } .plus::before, .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1px; background: var(--c-ink); transform: translate(-50%, -50%); } .plus::after { transform: translate(-50%, -50%) rotate(90deg); transition: opacity .3s var(--ease); } .qa[open] .plus { transform: rotate(180deg); } .qa[open] .plus::after { opacity: 0; } .qa .t-body { padding: 0 18px 20px; } /* [Nick 15.09 вечер] «Залишились питання» — не тем же шрифтом, что вопросы: вопрос текстом + ссылка-капсула со значком Telegram */ .contact { margin-top: 56px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; } .contact__q { font-family: var(--f-body); font-weight: 500; font-size: calc(var(--fs-body) * 1.12); line-height: 1.35; } .contact__tg { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid rgb(var(--ink-rgb) / .35); font-family: var(--f-body); font-weight: 500; font-size: var(--fs-body); color: var(--c-ink); text-decoration: none; } .contact__tg .ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; } /* ---------- финал: одна гарнитура в заголовке, затемнение только под текстом ---------- */ .final { position: relative; min-height: 76svh; overflow: hidden; /* [Nick 15.09 ночь] подвал вдвое ближе: от подписи под кнопкой до имени в подвале 415 → ≈210 px (было 100svh) */ background: var(--c-deep-2); color: var(--c-white); } .final__media { position: absolute; inset: 0; } .final__media img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 18%; } .final__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(var(--shade-rgb) / 0) 0%, rgb(var(--shade-rgb) / 0) 26%, rgb(var(--shade-rgb) / .72) 46%, rgb(var(--shade-rgb) / .92) 66%, rgb(var(--shade-rgb)) 100%); } /* фото и затемнение финала рисует сцена; свои слои — только без WebGL */ .final__media { display: none; } .final__shade { display: none; } .no-webgl .final__shade { display: block; } .final__inner { position: relative; min-height: 76svh; display: flex; flex-direction: column; justify-content: flex-start; gap: 18px; padding-top: 22svh; padding-bottom: 40px; } /* [Nick 15.09 ночь] расстояние от «Напиши мені в Telegram» до текста — вдвое меньше (было 44svh) */ /* [Nick 15.09 вечер] текст выше — едет поверх Марины, без пустого фото над ним */ .final__accent { display: block; } /* [Nick 14.09] в финале меньше игры шрифтов: «Просто зараз.» в обоих вариантах тем же Forum, что заголовок (рукописный у Моря снят, контроль 14.09) */ /* ---------- подвал ---------- */ .foot { background: var(--s-foot); color: var(--c-on-deep); padding: 64px 0 calc(40px + env(safe-area-inset-bottom)); text-align: center; } .foot__sign { font-family: var(--f-script); font-size: var(--fs-script); text-transform: none; letter-spacing: 0; line-height: 1.1; } :root[data-variant="sea"] .foot__sign { font-family: var(--f-script); font-size: var(--fs-script); text-transform: none; letter-spacing: 0; line-height: 1.1; } .foot__course { margin-top: 12px; } .foot__links { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 24px; margin-top: 14px; } .foot__social { margin-top: 26px; } .foot__links a { font-size: var(--fs-label); min-height: 44px; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; } .ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; } .ico__dot { fill: currentColor; stroke: none; } .foot__legal { margin-top: 10px; font-size: var(--fs-label); color: var(--c-on-deep-muted); line-height: 1.5; } /* ---------- появление ---------- */ .js .reveal { opacity: 0; transform: translateY(26px) scale(.985); } .js .reveal-list > li { opacity: 0; transform: translateY(16px); } /* ---------- десктоп ---------- */ @media (min-width: 900px) { :root { --pad: 32px; } .wrap { max-width: 760px; } .hdr { padding: 0 32px; } .hero__inner { align-items: flex-start; text-align: left; padding: 120px 7vw 8vh; } .hero .cta { max-width: 360px; margin-left: 0; } .hero .btn { margin: 0; } .hero__img--tall { display: none; } .hero__img--wide { display: block; object-position: 62% 30%; } /* кадр справа (как в финале), слева ровное тёмное поле под текст — заголовок не ложится на руку Марины (аудит 14.09: 1.49) */ .hero { background: rgb(var(--shade-rgb)); } .scan { columns: 2; column-gap: 48px; } .scan li { break-inside: avoid; } /* финал на десктопе: вертикальный кадр справа, текст слева */ .final__media { left: 40%; } .final__media img { object-position: 50% 30%; } .final__shade { background: linear-gradient(90deg, rgb(var(--shade-rgb)) 0%, rgb(var(--shade-rgb)) 38%, rgb(var(--shade-rgb) / .55) 50%, rgb(var(--shade-rgb) / 0) 66%), linear-gradient(180deg, rgb(var(--shade-rgb) / 0) 72%, rgb(var(--shade-rgb)) 100%); } .final, .final__inner { min-height: 100svh; } /* на широком экране текст финала по центру высоты — как было */ .final__inner { max-width: none; margin: 0; padding: 0 0 0 7vw; width: 40%; min-width: 440px; justify-content: center; align-items: flex-start; } .final__inner .center { text-align: left; } .final .cta { max-width: 360px; width: 100%; } .final .btn { margin: 0; } .card, .plate { max-width: 560px; margin-left: auto; margin-right: auto; } .card { padding: 44px 48px 36px; } /* лента на широком экране растворяется к краям, а не обрывается */ .ribbon__view { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); } } @media (prefers-reduced-motion: reduce) { .js .reveal, .js .reveal-list > li { opacity: 1; transform: none; } .js .scan li { opacity: 1; transform: none; --ln: 1; } } /* ═══ [16.09] ТИПОГРАФИКА — единая система по аудиту дизайнера (shots/marina-femin/typo-audit/, specimen2.png) [Nick: «делай как считаешь нужным; в вопросах и цитате — строчными, капс не нужен»] 3 гарнитуры: Forum — заголовки, фразы, цифры · Onest — текст 400, акцент/вывод/кнопки 500 · Bad Script — имя и строка первого экрана. Курсива нет (не вшит). Капс — только h2, главный заголовок, названия карточек, подписи, кнопки. ═══ */ :root { --fs-display: clamp(46px, 12.6vw, 96px); /* было до 104px на широком */ --fs-phrase: clamp(22px, 5.6vw, 28px); /* Forum строчными: вопросы FAQ, цитата, итоговая фраза */ --f-num: var(--f-display); /* цифры Forum — рядом «ГРН» тем же шрифтом (Aboreto не нужен) */ } body, .t-body, .pill, .dl__title-tail, .guarantee__head { font-weight: 400; } /* 300 истончался на фото и стекле */ .t-display, .t-h2, .t-h3, .t-q, .t-script, .hdr__sign, .foot__sign, .price__cur { font-weight: 400; } /* у Forum и Bad Script вшит только 400 */ #why .t-h3, .contact__q { font-size: var(--fs-body); line-height: 1.4; } /* «вывод» — одна ступень, без 18.5px */ .t-q, .quote .t-h3, #change > .wrap > .t-h3 { font-size: var(--fs-phrase); line-height: 1.22; text-transform: none; letter-spacing: 0; } .dl__num { font-size: 15px; } .price { font-size: var(--fs-h2); gap: .22em; } /* зазор «699 ГРН» считается от размера цифр, а не абзаца */ .price__num { letter-spacing: -.01em; } @media (min-width: 900px) { .hero .cta__note { text-align: left; } }