/* ========================================================================== Elena Naumova Studio — newsiteV2 Палітра, шрифт і фото — ті самі, що на чинному сайті. Оновлено лише подачу: сітки, ритм, типографіка, стани, рух. ========================================================================== */ /* ---------- 1. Токени ---------- */ :root { /* Колір — узято з чинного style.css */ --purple: #7a4db3; --purple-hover: #6a3fa2; --purple-light: #8055b6; --purple-tint: #f4f0fa; --purple-tint-2: #ece4f6; --ink: #2d2d2d; --ink-deep: #222225; --body: #6d6d6d; --muted: #999999; --bg: #ffffff; --bg-alt: #f7f7f7; --on-purple: #ffffff; /* текст поверх фіолетової заливки */ --surface: #ffffff; /* картки, поля, спливні панелі */ --surface-glass: rgba(255,255,255,.86); /* «скло» прилиплої шапки */ --line: #e7e7e7; --line-soft: #f0f0f0; /* Типографіка — Montserrat, вага не вище 600 */ --font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --w-light: 300; --w-reg: 400; --w-med: 500; --w-semi: 600; --fs-display: clamp(2.6rem, 7.5vw, 6.2rem); --fs-h2: clamp(1.75rem, 3.6vw, 3rem); --fs-h3: clamp(1.15rem, 1.6vw, 1.4rem); --fs-lead: clamp(1.02rem, 1.25vw, 1.2rem); --fs-body: 1rem; --fs-sm: 0.875rem; --fs-label: 0.72rem; /* Ритм 8pt */ --sp-1: 0.5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2rem; --sp-5: 3rem; --sp-6: 4rem; --sp-7: 6rem; --sp-8: 8rem; --section-y: clamp(4.5rem, 9vw, 8.5rem); --r-sm: 10px; --r: 18px; --r-lg: 28px; --r-pill: 999px; --shadow-sm: 0 2px 8px rgba(34, 34, 37, .05); --shadow: 0 12px 32px rgba(34, 34, 37, .08); --shadow-lg: 0 26px 60px rgba(34, 34, 37, .13); /* Контентна колонка — 1140px, як на чинному сайті (там Bootstrap-контейнер 1170 з полями 15). 1220 − 2×40 дає рівно ті самі 1140: зовнішня коробка ширша, поля більші, а сам текст стоїть точно там, де звик клієнт. */ --container: 1220px; --gutter: clamp(1.25rem, 4vw, 2.5rem); --ease: cubic-bezier(.22, .61, .36, 1); --dur: .32s; --nav-h: 76px; } /* ---------- 1b. Темна тема ---------- Той самий фіолетовий, але освітлений: #7a4db3 на темному тлі дає лише ~2.6:1, тому для тексту й акцентів беремо світліший відтінок тієї ж барви. Тема вмикається атрибутом data-theme на ; за замовчуванням успадковується системна (див. блок prefers-color-scheme нижче). */ [data-theme="dark"] { --on-purple: #1a1024; /* фіолетовий тут світлий, тож напис — темний */ --purple: #a77fd8; --purple-hover: #b894e3; --purple-light: #b18ce0; --purple-tint: #241c30; --purple-tint-2: #2c2340; --ink: #f2f0f5; --ink-deep: #0f0b16; --body: #b3adbd; --muted: #8a8494; --bg: #14101c; --bg-alt: #1b1626; --line: #2e2740; --line-soft: #241f33; --surface: #1e1829; --surface-glass: rgba(24, 19, 34, .86); --shadow-sm: 0 2px 8px rgba(0, 0, 0, .35); --shadow: 0 12px 32px rgba(0, 0, 0, .45); --shadow-lg: 0 26px 60px rgba(0, 0, 0, .55); color-scheme: dark; /* щоб скролбари й системні контроли теж потемніли */ } /* ---------- 2. Основа ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); font-size: var(--fs-body); font-weight: var(--w-reg); line-height: 1.75; color: var(--body); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; } body.is-locked { overflow: hidden; } img, svg { max-width: 100%; display: block; } img { height: auto; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: var(--w-semi); line-height: 1.12; letter-spacing: -0.015em; } p { margin: 0 0 var(--sp-2); } ul, ol, dl, dd { margin: 0; padding: 0; } li { list-style: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } input, select, textarea { font: inherit; } ::selection { background: var(--purple); color: var(--on-purple); } :focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; border-radius: 4px; } .skip-link { position: absolute; top: -100px; left: var(--sp-2); z-index: 200; padding: .75rem 1.25rem; background: var(--purple); color: var(--on-purple); border-radius: var(--r-pill); font-size: var(--fs-sm); transition: top var(--dur) var(--ease); } .skip-link:focus { top: var(--sp-2); } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .muted { color: var(--body); } /* реальний текст, тому не світліше за 4.5:1 */ /* ---------- 3. Типографічні примітиви ---------- */ .eyebrow { margin: 0 0 var(--sp-2); font-size: var(--fs-label); font-weight: var(--w-med); letter-spacing: .18em; text-transform: uppercase; color: var(--purple); } .eyebrow--light { color: rgba(255, 255, 255, .82); } .h2 { font-size: var(--fs-h2); } .h2--light { color: #fff; } .lead { font-size: var(--fs-lead); font-weight: var(--w-light); line-height: 1.65; color: var(--ink); } .section { padding-block: var(--section-y); } .section--alt { background: var(--bg-alt); } .section__head { max-width: 640px; margin-bottom: clamp(2.5rem, 5vw, 4rem); } .section__sub { margin-top: var(--sp-2); max-width: 52ch; } /* ---------- 4. Кнопки ---------- */ .btn { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: currentColor; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .85rem 2rem; border: 1px solid var(--btn-bd); border-radius: var(--r-pill); background: var(--btn-bg); color: var(--btn-fg); font-size: var(--fs-label); font-weight: var(--w-med); letter-spacing: .12em; text-transform: uppercase; text-align: center; cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn--primary { --btn-bg: var(--purple); --btn-fg: var(--on-purple); --btn-bd: var(--purple); } .btn--primary:hover { --btn-bg: var(--purple-hover); --btn-bd: var(--purple-hover); box-shadow: 0 10px 24px rgba(122, 77, 179, .3); } .btn--outline { --btn-fg: var(--purple); --btn-bd: var(--purple); } .btn--outline:hover { --btn-bg: var(--purple); --btn-fg: var(--on-purple); } .btn--ghost { --btn-fg: #fff; --btn-bd: rgba(255,255,255,.55); } .btn--ghost:hover { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: #fff; } .btn--light { --btn-bg: #fff; --btn-fg: var(--purple); --btn-bd: #fff; } .btn--light:hover { --btn-bg: transparent; --btn-fg: #fff; } .btn--sm { min-height: 42px; padding: .6rem 1.4rem; } .btn--block { display: flex; width: 100%; } /* ---------- 5. Навігація ---------- */ /* Поверх hero шапка прозора й світла; щойно сторінка зрушила — стає щільною, а логотип і посилання темніють. */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 100; background: transparent; border-bottom: 1px solid transparent; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), backdrop-filter var(--dur) var(--ease); } /* Підкладка під прозорою шапкою. Без неї білі пункти меню на світлій правій частині hero-фото дають лише ~3.1:1 замість потрібних 4.5:1. Щойно шапка стає щільною — підкладка зникає. */ .nav::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 160px; pointer-events: none; background: linear-gradient(to bottom, rgba(20, 12, 30, .5) 0%, rgba(20, 12, 30, .44) 60%, rgba(20, 12, 30, 0) 100%); transition: opacity var(--dur) var(--ease); } .nav.is-stuck::before, .nav.is-open::before { opacity: 0; } .nav.is-stuck { background: var(--surface-glass); backdrop-filter: saturate(120%) blur(14px); -webkit-backdrop-filter: saturate(120%) blur(14px); border-bottom-color: var(--line); box-shadow: 0 4px 24px rgba(34, 34, 37, .05); } /* Мобільне меню відкрите — потрібне непрозоре тло навіть угорі */ .nav.is-open { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; } .nav__inner { position: relative; /* щоб вміст лишався над підкладкою .nav::before */ z-index: 1; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); min-height: var(--nav-h); display: flex; align-items: center; gap: var(--sp-3); } /* 114px — рівно стільки, скільки логотип має на чинному сайті. */ .nav__logo { position: relative; flex: 0 0 auto; display: block; width: 114px; } .nav__logo img { width: 114px; height: auto; transition: opacity var(--dur) var(--ease); } .nav__logo-light { position: absolute; inset: 0; } /* Угорі (поверх фото) — світлий логотип, після скролу — темний */ .nav .nav__logo-dark { opacity: 0; } .nav .nav__logo-light { opacity: 1; } .nav.is-stuck .nav__logo-dark, .nav.is-open .nav__logo-dark { opacity: 1; } .nav.is-stuck .nav__logo-light, .nav.is-open .nav__logo-light { opacity: 0; } .nav__menu { display: none; margin-left: auto; gap: clamp(1rem, 2vw, 2rem); } .nav__menu a { position: relative; white-space: nowrap; /* після збільшення іконок «Про нас» ламалося на два рядки */ padding: .5rem 0; font-size: var(--fs-label); font-weight: var(--w-med); letter-spacing: .12em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 12px rgba(20, 12, 30, .45); transition: color var(--dur) var(--ease), text-shadow var(--dur) var(--ease); } .nav.is-stuck .nav__menu a, .nav.is-open .nav__menu a { color: var(--ink); text-shadow: none; } .nav__menu a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--dur) var(--ease); } .nav__menu a:hover::after, .nav__menu a.is-current::after { transform: scaleX(1); transform-origin: left; } /* Активний і наведений стан підсвічуємо фіолетовим лише на світлій шапці — поверх фото фіолетовий по фото читався б гірше за білий. */ .nav.is-stuck .nav__menu a:hover, .nav.is-stuck .nav__menu a.is-current, .nav.is-open .nav__menu a:hover { color: var(--purple); } .nav__actions { margin-left: auto; display: flex; align-items: center; gap: .35rem; } .nav__actions .nav__cta { display: none; margin-left: .4rem; } /* Кругові іконки: телефон, Instagram, перемикач теми. Успадковують колір від шапки — світлі поверх hero, темні після скролу. */ .nav__icon { width: 48px; height: 48px; flex: 0 0 auto; display: grid; place-content: center; border-radius: 50%; color: #fff; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .nav__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 6px rgba(20, 12, 30, .45)); } /* Телефон і Instagram — оригінальні гліфи з чинного сайту (Font Awesome та hodyicons). Вони суцільні, тож малюємо заливкою. Розмір знято з прода: там Instagram — 24px, телефон малюється ~23×26. У мене вони були 30 і 29 і через це «важчили» весь рядок. */ .nav__icon .ico { width: 24px; height: 24px; fill: currentColor; stroke: none; } .nav__icon .ico--phone { width: 25px; height: 25px; } @media (hover: hover) { .nav__icon:hover { background: rgba(255, 255, 255, .18); } } .nav.is-stuck .nav__icon, .nav.is-open .nav__icon { color: var(--ink); } .nav.is-stuck .nav__icon svg, .nav.is-open .nav__icon svg { filter: none; } @media (hover: hover) { .nav.is-stuck .nav__icon:hover, .nav.is-open .nav__icon:hover { background: var(--purple-tint); color: var(--purple); } } /* Перемикач теми: показуємо ту іконку, на яку перемкне натискання */ .nav__theme { position: relative; } /* Обидві іконки лежать в ОДНІЙ комірці grid — інакше absolute без inset притискав місяць до кута кнопки замість центру. */ .nav__theme svg { grid-area: 1 / 1; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); } .nav__theme-sun { opacity: 0; transform: rotate(-90deg) scale(.6); } .nav__theme-moon { opacity: 1; transform: none; } [data-theme="dark"] .nav__theme-sun { opacity: 1; transform: none; } [data-theme="dark"] .nav__theme-moon { opacity: 0; transform: rotate(90deg) scale(.6); } .nav__burger { width: 48px; height: 48px; display: grid; place-content: center; gap: 6px; border-radius: var(--r-sm); } .nav__burger span { display: block; width: 30px; height: 2px; background: #fff; border-radius: 2px; box-shadow: 0 0 6px rgba(20, 12, 30, .35); transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .nav.is-stuck .nav__burger span, .nav.is-open .nav__burger span { background: var(--ink); box-shadow: none; } .nav.is-open .nav__burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .nav.is-open .nav__burger span:nth-child(2) { opacity: 0; } .nav.is-open .nav__burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } .nav__progress { height: 2px; background: var(--purple); transform: scaleX(0); transform-origin: left; will-change: transform; } @media (min-width: 992px) { .nav__menu { display: flex; } .nav__inner { gap: var(--sp-2); } } @media (min-width: 992px) and (max-width: 1199.98px) { .nav__menu { gap: 1rem; } .nav__icon { width: 46px; height: 46px; } } @media (min-width: 992px) { .nav__actions { margin-left: 0; } .nav__actions .nav__cta { display: inline-flex; } .nav__burger { display: none; } } /* Після переходу на компактні гліфи всі три іконки вміщуються поруч із логотипом навіть на 390px, тож ховаємо Instagram лише на найвужчих екранах, де рядок справді переповнюється. */ /* Окремого мобільного розміру для гліфів більше немає: після того як десктопні зменшилися з 30/29 до 24/25, він збігся з мобільним. */ @media (max-width: 479.98px) { .nav__logo, .nav__logo img { width: 112px; } .nav__actions { gap: .2rem; } } @media (max-width: 359.98px) { /* На найвужчих екранах трохи тиснемо іконки, але жодної не ховаємо */ .nav__icon { width: 46px; height: 46px; } .nav__icon .ico { width: 22px; height: 22px; } .nav__icon .ico--phone { width: 21px; height: 21px; } .nav__burger { width: 46px; height: 46px; } } /* Мобільне меню */ @media (max-width: 991.98px) { .nav__menu { position: fixed; inset: var(--nav-h) 0 auto 0; display: flex; flex-direction: column; gap: 0; margin: 0; padding: var(--sp-2) var(--gutter) var(--sp-4); background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); transform: translateY(-12px); opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur); } .nav.is-open .nav__menu { opacity: 1; transform: none; visibility: visible; } .nav__menu a { padding: 1rem 0; border-bottom: 1px solid var(--line-soft); font-size: .8rem; } .nav__menu a::after { display: none; } } /* ---------- 6. Hero ---------- */ .hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; padding-block: calc(var(--nav-h) + 3rem) clamp(2rem, 6vw, 7rem); overflow: hidden; isolation: isolate; } .hero__media { position: absolute; inset: -6% 0; z-index: -2; } .hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; object-position: 42% 24%; } /* Два накладені градієнти: вертикальний тримає контраст під заголовком і під прозорою шапкою, горизонтальний — під текстовим блоком зліва. Разом дають ≥4.5:1 для білого тексту навіть на світлих ділянках фото. */ .hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(20, 12, 30, .72) 0%, rgba(20, 12, 30, .5) 34%, rgba(20, 12, 30, .12) 62%, rgba(20, 12, 30, 0) 100%), linear-gradient(to top, rgba(20, 12, 30, .78) 0%, rgba(20, 12, 30, .34) 46%, rgba(20, 12, 30, .06) 74%, rgba(20, 12, 30, .42) 100%); } .hero__content { position: relative; color: #fff; } .hero__title { margin: 0 0 var(--sp-3); font-size: var(--fs-display); font-weight: var(--w-light); line-height: 1.02; letter-spacing: -0.03em; color: #fff; max-width: 16ch; } .hero__title .line { display: block; overflow: hidden; } .hero__title em { font-style: normal; font-weight: var(--w-semi); color: #c7a8f0; } .hero__lead { max-width: 46ch; font-size: var(--fs-lead); font-weight: var(--w-light); line-height: 1.65; color: rgba(255, 255, 255, .88); } .hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); } .hero__scroll { position: absolute; right: var(--gutter); bottom: clamp(4rem, 10vw, 7rem); display: none; align-items: center; gap: .75rem; font-size: var(--fs-label); letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .75); writing-mode: vertical-rl; } .hero__scroll-line { width: 1px; height: 56px; background: linear-gradient(to bottom, rgba(255,255,255,.7), transparent); } @media (min-width: 992px) { .hero__scroll { display: flex; } } /* ---------- 7. Біжучий рядок ---------- */ .marquee { padding-block: 1.25rem; background: var(--ink-deep); overflow: hidden; white-space: nowrap; } .marquee__track { display: inline-flex; align-items: center; gap: 1.75rem; will-change: transform; } .marquee__track span { font-size: clamp(.95rem, 1.6vw, 1.2rem); font-weight: var(--w-light); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .9); } .marquee__track i { color: var(--purple-light); font-style: normal; } /* ---------- 8. Про нас ---------- */ /* Секція закінчується рядком лічильників — під ним стандартний відступ секції (72px на телефоні) виглядав порожнім, тим паче що знизу до нього додається верхній відступ наступної секції. Зменшуємо вдвічі. */ .about { padding-bottom: clamp(2.5rem, 5vw, 5rem); } .about__grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } @media (min-width: 900px) { .about__grid { grid-template-columns: 1.05fr 1fr; } } .about__media { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 3.2; box-shadow: var(--shadow); } .about__media img { width: 100%; height: 112%; object-fit: cover; will-change: transform; } .about__body > * + * { margin-top: var(--sp-2); } .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); margin-top: var(--sp-4) !important; padding-top: var(--sp-3); border-top: 1px solid var(--line); } .stat__num { display: block; font-size: clamp(1.9rem, 3.4vw, 2.75rem); font-weight: var(--w-semi); line-height: 1; color: var(--purple); font-variant-numeric: tabular-nums; } .stat__label { display: block; margin-top: .35rem; font-size: var(--fs-label); line-height: 1.35; letter-spacing: .1em; text-transform: uppercase; color: var(--body); } /* На вузьких екранах підписи різної довжини («рік заснування» проти «тренери») ламали ритм: числа стояли на різній висоті, а колонки «пливли». Центруємо, розділяємо лініями і резервуємо два рядки під підпис. */ @media (max-width: 640px) { .stats { text-align: center; gap: 0; } .stat { padding-inline: .4rem; } .stat + .stat { border-left: 1px solid var(--line); } .stat__num { font-size: clamp(1.6rem, 7vw, 2.1rem); } .stat__label { min-height: 2.7em; letter-spacing: .06em; } } /* ---------- Цитата засновниці ---------- */ .quote { position: relative; margin: var(--sp-3) 0 0; padding-left: var(--sp-3); border-left: 2px solid var(--purple); } .quote > p:last-of-type { margin-bottom: 0; } .quote__by { display: flex; align-items: center; gap: .85rem; margin-top: var(--sp-3); } .quote__avatar { width: 52px; height: 52px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; filter: grayscale(1); } .quote__cite { font-style: normal; line-height: 1.4; } .quote__cite b { display: block; font-size: var(--fs-sm); font-weight: var(--w-semi); letter-spacing: .08em; text-transform: uppercase; color: var(--purple); } .quote__cite span { display: block; margin-top: .15rem; font-size: var(--fs-label); letter-spacing: .06em; color: var(--body); } /* Лічильники йдуть уже після цитати, тож відділяємо їх зверху */ .stats { margin-top: var(--sp-4) !important; } /* ---------- 9. Напрямки ---------- */ .cards { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); } .card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } .card:hover { transform: translateY(-6px); border-color: transparent; box-shadow: var(--shadow-lg); } /* Фото напрямків — вертикальні (800×1200). Ландшафтна рамка 4:3 різала тренерок по голову, тож рамка близька до пропорцій самих знімків. */ .card__media { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--purple-tint); } .card__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; /* тримає голову й корпус у кадрі */ transition: transform .6s var(--ease); } .card:hover .card__media img { transform: scale(1.05); } /* Там, де немає доречного знімка, стоїть фірмова заглушка з логотипом — як на чинному сайті. Її не обрізаємо, а вписуємо у власний фон. */ .card__media--placeholder { background: #2a3b3e; } .card__media--placeholder img { object-fit: contain; object-position: center; } .card:hover .card__media--placeholder img { transform: scale(1.03); } .card__body { padding: var(--sp-3); display: flex; flex-direction: column; flex: 1; } /* Специфічність: нижче є `.card__body p` (0-1-1), тож просто `.card__tag` (0-1-0) програвав і кикер лишався 14px. Додаємо клас картки. */ .card .card__tag { display: flex; align-items: center; gap: .5rem; margin: 0 0 .45rem; font-size: .65rem; /* дрібніше за заголовок, як на чинному сайті */ font-weight: var(--w-reg); letter-spacing: .16em; line-height: 1.4; text-transform: uppercase; color: var(--body); } /* Маркер перед кикером */ .card__tag::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--purple); } /* Назва напрямку — головне в картці: більша, брендового кольору, у верхньому регістрі (18px/700 на чинному сайті). */ .card__title { margin-bottom: .7rem; font-size: clamp(1.2rem, 1.5vw, 1.4rem); font-weight: var(--w-semi); letter-spacing: .015em; text-transform: uppercase; color: var(--purple); } .card__title a { color: inherit; } .card { position: relative; } .card__title a { transition: opacity var(--dur) var(--ease); } @media (hover: hover) { .card:hover .card__title a { opacity: .75; } } .card__body p { font-size: var(--fs-sm); line-height: 1.7; } /* Підвал картки: «дізнатися більше» + запис. Кнопки в один ряд, а на вузьких екранах — стовпчиком на всю ширину. */ .card__actions { margin-top: auto; padding-top: var(--sp-3); display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; } .card__book { flex: 0 0 auto; min-height: 46px; } .card__link { min-height: 44px; /* тач-ціль */ display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-label); font-weight: var(--w-med); letter-spacing: .12em; text-transform: uppercase; color: var(--purple); } .card__link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur) var(--ease); } .card:hover .card__link svg { transform: translateX(5px); } /* На телефоні ховаємо окремий рядок «дізнатися більше» — картка стає нижчою, а перехід на сторінку напрямку лишається на самій назві. Щоб було зрозуміло, що назва клікабельна, додаємо до неї стрілку. */ @media (max-width: 767.98px) { .card__link { display: none; } .card__actions { padding-top: var(--sp-2); flex-direction: column; align-items: stretch; /* «дізнатися більше» сховано, тож кнопка сама */ } .card__actions .card__book { width: 100%; } .card__title a { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; /* тач-ціль замість прихованого посилання */ } .card__title a::after { content: ""; width: 15px; height: 15px; flex: 0 0 auto; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; } } @media (max-width: 400px) { .card__body { padding: var(--sp-2) var(--sp-3) var(--sp-3); } } /* ---------- 10. Онлайн ---------- */ .online { background: linear-gradient(135deg, var(--purple) 0%, #5f3a90 100%); color: rgba(255, 255, 255, .9); } .online__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; } @media (min-width: 900px) { .online__grid { grid-template-columns: 1fr 1fr; } } .online__lead { max-width: 46ch; margin-bottom: var(--sp-3); font-size: var(--fs-lead); font-weight: var(--w-light); color: rgba(255, 255, 255, .88); } /* Список онлайн-програми. Раніше числа різної ширини (24 проти 3) зсували підписи, і все зливалося в суцільну масу. Тепер число — у білому кружку фіксованого розміру: колонка вирівняна, а цифра стала акцентом. */ .online__list { display: grid; gap: .6rem; } @media (min-width: 560px) { .online__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .online__list li { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: .9rem; min-height: 88px; padding: var(--sp-2); background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--r); backdrop-filter: blur(6px); } .online__list strong { width: 52px; height: 52px; display: grid; place-content: center; border-radius: 50%; background: #fff; color: #6a3fa2; /* фіксовано: кружок білий в обох темах */ font-size: 1.3rem; font-weight: var(--w-semi); line-height: 1; font-variant-numeric: tabular-nums; } .online__list span { font-size: .9rem; line-height: 1.35; color: #fff; padding-right: .4rem; } @media (max-width: 400px) { .online__list li { grid-template-columns: 46px 1fr; gap: .75rem; min-height: 78px; } .online__list strong { width: 46px; height: 46px; font-size: 1.15rem; } .online__list span { font-size: .85rem; } } /* ---------- 11. Команда ---------- Свідомо інакше, ніж на чинному сайті: там центровані кола, тут — портрет прямокутником і текст по лівому краю, як у картках напрямків. Ім'я — найпомітніше в блоці. */ .team { display: grid; gap: clamp(.75rem, 2.5vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); } .member { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } @media (hover: hover) { .member:hover { transform: translateY(-6px); border-color: transparent; box-shadow: var(--shadow-lg); } } .member__photo { aspect-ratio: 1; /* усі знімки квадратні — показуємо без розтягування */ overflow: hidden; background: var(--purple-tint); } .member__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: grayscale(1); transition: filter .5s var(--ease), transform .6s var(--ease); } @media (hover: hover) { .member:hover .member__photo img { filter: grayscale(0); transform: scale(1.04); } } /* Одна колонка, як і було. Щоб картка не була завеликою, на телефоні знімок показуємо ширшим за висотою кадром — висота падає приблизно вдвічі, а обличчя лишається в кадрі за рахунок зсуву по вертикалі. */ @media (max-width: 620px) { .member__photo { aspect-ratio: 3 / 2; } .member__photo img { object-position: 50% 26%; } } .member__body { padding: var(--sp-3); display: flex; flex-direction: column; flex: 1; } /* Посада — дрібний кикер над іменем, як у картках напрямків */ .member__role { display: flex; align-items: flex-start; /* посада може займати два рядки */ gap: .5rem; margin: 0 0 .3rem; font-size: .65rem; letter-spacing: .16em; line-height: 1.4; text-transform: uppercase; color: var(--body); } .member__role::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; margin-top: .42em; /* тримає крапку на рівні першого рядка */ border-radius: 50%; background: var(--purple); } /* Ім'я — головний акцент блоку */ .member__name { margin-bottom: .55rem; font-size: clamp(1.15rem, 1.5vw, 1.35rem); font-weight: var(--w-semi); letter-spacing: .01em; line-height: 1.2; color: var(--purple); } .member__bio { font-size: var(--fs-sm); line-height: 1.65; margin-bottom: var(--sp-2); } .member__social { display: flex; gap: .5rem; margin-top: auto; } .member__social a { width: 44px; height: 44px; display: grid; place-content: center; border: 1px solid var(--line); border-radius: 50%; color: var(--body); transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease); } @media (hover: hover) { .member__social a:hover { color: var(--on-purple); background: var(--purple); border-color: var(--purple); } } .member__social svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; } /* ---------- 12. Розклад ---------- */ /* Шість днів мають поміщатися в екран. На широких — звичайний ряд «пігулок», на вузьких — сітка 6 рівних колонок зі скороченнями (Пн, Вт, …). */ .tabs__nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--sp-4); } .tabs__short { display: none; } .tabs__btn { flex: 0 0 auto; min-height: 46px; padding: .7rem 1.4rem; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); font-size: var(--fs-label); font-weight: var(--w-med); letter-spacing: .1em; text-transform: uppercase; color: var(--body); white-space: nowrap; transition: all var(--dur) var(--ease); } .tabs__btn:hover { color: var(--purple); border-color: var(--purple); } .tabs__btn.is-active { background: var(--purple); border-color: var(--purple); color: var(--on-purple); } @media (max-width: 767.98px) { .tabs__nav { display: grid; grid-template-columns: repeat(6, 1fr); gap: .35rem; } .tabs__btn { min-width: 0; padding: .7rem .25rem; letter-spacing: .06em; } .tabs__full { display: none; } .tabs__short { display: inline; } } .tabs__panel[hidden] { display: none; } .tabs__panel:focus-visible { outline-offset: 8px; } /* Заняття згруповані за часом: одна плитка = один час, усередині — усі класи, що йдуть у цю годину. Так список коротший і читабельніший. */ .slots { display: grid; gap: .5rem; } .slot { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; padding: .8rem .95rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } @media (hover: hover) { .slot:hover { border-color: var(--purple); box-shadow: var(--shadow-sm); } } /* Час — окремий значок із діапазоном «від / до», як на чинному сайті. Двома рядками, щоб не з'їдати ширину у вузькій колонці. */ .slot__time { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 56px; padding: .26rem .4rem; border-radius: 7px; background: var(--purple); color: var(--on-purple); font-variant-numeric: tabular-nums; line-height: 1.2; } .slot__from { font-size: .8rem; font-weight: var(--w-semi); } .slot__to { margin-top: .08rem; padding-top: .08rem; font-size: .64rem; font-weight: var(--w-reg); opacity: .85; border-top: 1px solid currentColor; align-self: stretch; text-align: center; } .slot__list { display: grid; } .slot__item + .slot__item { margin-top: .5rem; padding-top: .5rem; border-top: 1px dashed var(--line); } .slot__name { display: block; font-size: .95rem; font-weight: var(--w-med); line-height: 1.3; color: var(--ink); } .slot__who { display: block; margin-top: .15rem; font-size: .84rem; /* тренер трохи крупніше, ніж було */ line-height: 1.35; color: var(--body); } @media (max-width: 420px) { .slot { gap: .65rem; padding: .7rem .8rem; } .slot__time { min-width: 52px; } .slot__from { font-size: .76rem; } .slot__to { font-size: .62rem; } /* Назва заняття у вузькій колонці — як на чинному сайті: капітель брендового кольору. Колір беремо токеном, а не літералом #7a4db3: у темній темі він дав би ~2.9:1 на темній підкладці, а var(--purple) там світлішає до #a77fd8 і тримає 5.5:1. */ .slot__name { font-size: .85rem; text-transform: uppercase; letter-spacing: .02em; color: var(--purple); } } /* ---------- 13. Ціни ---------- */ .prices { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr)); align-items: start; } .price { display: flex; flex-direction: column; height: 100%; padding: var(--sp-4) var(--sp-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } .price:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: transparent; } .price--feature { background: linear-gradient(170deg, var(--purple-tint) 0%, #fff 55%); border-color: var(--purple); box-shadow: 0 18px 44px rgba(122, 77, 179, .12); } .price__badge { align-self: flex-start; margin: 0 0 var(--sp-2); padding: .35rem 1rem; background: var(--purple); border-radius: var(--r-pill); font-size: var(--fs-label); font-weight: var(--w-med); letter-spacing: .12em; text-transform: uppercase; color: var(--on-purple); } .price__title { margin-bottom: var(--sp-3); font-size: 1.05rem; font-weight: var(--w-semi); line-height: 1.35; letter-spacing: .02em; text-transform: uppercase; color: var(--purple); } .price__title span { display: block; font-weight: var(--w-reg); color: var(--body); letter-spacing: .06em; } .price__list { margin-bottom: var(--sp-3); } .price__list li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); padding: .7rem 0; border-bottom: 1px solid var(--line-soft); font-size: var(--fs-sm); } .price__list li:last-child { border-bottom: 0; } .price__list b { flex: 0 0 auto; font-weight: var(--w-semi); color: var(--ink); font-variant-numeric: tabular-nums; } .price__note { margin-bottom: var(--sp-3); font-size: var(--fs-label); line-height: 1.6; color: var(--body); } .price .btn { margin-top: auto; } /* ---------- 14. Галерея ---------- */ .gallery { display: grid; gap: 6px; grid-template-columns: repeat(2, 1fr); padding-inline: 6px; } @media (min-width: 700px) { .gallery { grid-template-columns: repeat(4, 1fr); } } .gallery__item { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--r-sm); background: var(--purple-tint); } .gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .gallery__item::after { content: ""; position: absolute; inset: 0; background: rgba(122, 77, 179, 0); transition: background var(--dur) var(--ease); } .gallery__item:hover img { transform: scale(1.06); } .gallery__item:hover::after { background: rgba(122, 77, 179, .28); } /* Лайтбокс */ .lightbox { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: var(--sp-3); background: rgba(18, 12, 26, .93); opacity: 0; transition: opacity var(--dur) var(--ease); } .lightbox.is-open { opacity: 1; } .lightbox img { max-width: min(1100px, 92vw); max-height: 86vh; width: auto; border-radius: var(--r-sm); box-shadow: var(--shadow-lg); } .lightbox__btn { position: absolute; width: 52px; height: 52px; display: grid; place-content: center; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; color: #fff; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); } .lightbox__btn:hover { background: rgba(255,255,255,.14); border-color: #fff; } .lightbox__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .lightbox__close { top: var(--sp-3); right: var(--sp-3); } .lightbox__prev { left: var(--sp-2); top: 50%; transform: translateY(-50%); } .lightbox__next { right: var(--sp-2); top: 50%; transform: translateY(-50%); } /* ---------- 15. Контакти ---------- */ .contact__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; } @media (min-width: 900px) { .contact__grid { grid-template-columns: 1fr 1fr; } } .contact__list { margin: var(--sp-3) 0; display: grid; gap: var(--sp-3); } .contact__list dt { margin-bottom: .4rem; font-size: var(--fs-label); font-weight: var(--w-med); letter-spacing: .16em; text-transform: uppercase; color: var(--purple); } .contact__list dd { font-size: var(--fs-body); line-height: 1.75; } .contact__list a { display: inline-block; padding-block: .55rem; /* доводить тач-ціль до ~44px, не ламаючи рядок */ border-bottom: 1px solid var(--line); transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .contact__list a:hover { color: var(--purple); border-color: var(--purple); } .contact__cta { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .contact__aside { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--shadow); } .contact__aside img { width: 100%; height: 100%; object-fit: cover; } /* ---------- 16. Підвал ---------- */ .footer { padding-block: var(--sp-6) var(--sp-3); background: var(--ink-deep); color: rgba(255,255,255,.6); } .footer__grid { display: grid; gap: var(--sp-4); padding-bottom: var(--sp-4); border-bottom: 1px solid rgba(255,255,255,.1); } @media (min-width: 800px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } } .footer__logo { width: 150px; height: auto; } .footer__tag { margin-top: var(--sp-2); font-size: var(--fs-sm); max-width: 30ch; } .footer__nav { display: grid; gap: .15rem; align-content: start; } .footer__nav a { display: inline-flex; align-items: center; min-height: 44px; /* тач-ціль: сам текст лише ~20px заввишки */ font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; transition: color var(--dur) var(--ease); } .footer__nav a:hover { color: #fff; } .footer__label { margin: 0 0 .75rem; font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.62); } .footer__social { display: flex; gap: .5rem; margin-bottom: var(--sp-3); } .footer__social a { width: 44px; height: 44px; display: grid; place-content: center; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); } .footer__social a:hover { background: var(--purple); border-color: var(--purple); color: var(--on-purple); } .footer__social svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; } .footer__lang { display: flex; gap: .75rem; } .footer__lang a { display: inline-flex; align-items: center; min-height: 44px; padding: .4rem 1.1rem; border: 1px solid rgba(255,255,255,.18); border-radius: var(--r-pill); font-size: var(--fs-label); letter-spacing: .12em; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .footer__lang a:hover { background: #fff; color: var(--ink); } .footer__bottom { padding-top: var(--sp-3); font-size: var(--fs-label); letter-spacing: .06em; } .footer__bottom p { margin: 0; } /* ---------- 16b. Підписка на новини ---------- Класи `newsletter-form`, `form-control`, `btn newsletter-btn` та id `newsletterForm` / `newsletterMessage` збережені з чинного сайту НАВМИСНЕ: на них налаштований тригер у Google Tag Manager. Змінювати не можна — разом із класом зникне й подія в аналітиці. */ .newsletter-form { margin-top: var(--sp-3); max-width: 34ch; } .newsletter-form .footer__label { margin-bottom: .6rem; } .newsletter-form .input-group { display: flex; flex-wrap: wrap; gap: .5rem; } .newsletter-form .form-control { flex: 1 1 12ch; min-width: 0; min-height: 48px; padding: .6rem 1.1rem; border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--r-pill); background: rgba(255, 255, 255, .06); color: #fff; font-size: var(--fs-sm); } .newsletter-form .form-control::placeholder { color: rgba(255, 255, 255, .5); } .newsletter-form .form-control:focus { outline: 2px solid var(--purple-light); outline-offset: 2px; background: rgba(255, 255, 255, .1); } .newsletter-form .newsletter-btn { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: #fff; flex: 0 0 auto; min-height: 48px; padding: .6rem 1.4rem; } @media (hover: hover) { .newsletter-form .newsletter-btn:hover { --btn-bg: var(--purple); --btn-fg: var(--on-purple); --btn-bd: var(--purple); } } .newsletter-msg { margin: .6rem 0 0; min-height: 1.2em; /* місце під відповідь зарезервоване — без стрибка */ font-size: var(--fs-label); line-height: 1.5; color: rgba(255, 255, 255, .82); } /* ---------- 17. Модалка ---------- */ .modal { position: fixed; inset: 0; z-index: 160; display: grid; place-items: center; padding: var(--sp-2); } .modal[hidden] { display: none; } .modal__backdrop { position: absolute; inset: 0; background: rgba(18, 12, 26, .6); backdrop-filter: blur(4px); } .modal__box { position: relative; width: min(460px, 100%); max-height: 92vh; overflow-y: auto; padding: clamp(1.75rem, 4vw, 2.75rem); background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow-lg); } .modal__close { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; display: grid; place-content: center; border-radius: 50%; color: var(--body); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .modal__close:hover { background: var(--bg-alt); color: var(--ink); } .modal__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; } .modal__title { font-size: 1.4rem; margin-bottom: .5rem; } .modal__sub { font-size: var(--fs-sm); margin-bottom: var(--sp-3); } /* ---------- 18. Форма ---------- */ .field { margin-bottom: var(--sp-2); } .field label { display: block; margin-bottom: .45rem; font-size: var(--fs-label); font-weight: var(--w-med); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); } .field label span { color: var(--purple); } .field input, .field select { width: 100%; min-height: 48px; padding: .75rem 1rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .field input::placeholder { color: #c4c4c4; } .field input:focus, .field select:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px rgba(122, 77, 179, .14); } .field.has-error input { border-color: #d64545; } .field.has-error input:focus { box-shadow: 0 0 0 3px rgba(214, 69, 69, .14); } .field__error { margin: .4rem 0 0; font-size: var(--fs-label); color: #d64545; } .form__status { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); text-align: center; } .form__status.is-ok { color: #2b8a4b; } .form__status.is-bad { color: #d64545; } button[disabled], .btn[disabled] { opacity: .5; cursor: not-allowed; transform: none !important; } /* ---------- 19. Плаваючі кнопки ---------- */ /* Розкладка як на чинному сайті: Telegram зліва, віджет alteg.io справа. Кнопку «нагору» піднімаємо, щоб вона не налазила на віджет. */ .tg-fab { position: fixed; left: clamp(1rem, 3vw, 1.5rem); bottom: clamp(1rem, 3vw, 1.5rem); z-index: 95; width: 78px; height: 78px; display: grid; place-content: center; padding: .6rem; border-radius: 50%; background: #fed125; color: #17111e; font-size: .63rem; font-weight: var(--w-semi); letter-spacing: .03em; line-height: 1.3; text-align: center; text-transform: uppercase; box-shadow: 0 12px 26px rgba(69, 69, 69, .28); opacity: 0; visibility: hidden; transform: translateY(14px) scale(.9); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur), background var(--dur) var(--ease), color var(--dur) var(--ease); } .tg-fab.is-visible { opacity: 1; visibility: visible; transform: none; } .tg-fab:hover { background: var(--purple); color: var(--on-purple); } .go-top { position: fixed; /* Віджет alteg.io ставить свою кнопку 100×100 з відступом 30px від краю, тобто вона займає 30–130px від низу. Стаємо над нею тією ж вертикаллю. */ right: 30px; bottom: 124px; z-index: 94; width: 48px; height: 48px; display: grid; place-content: center; border-radius: 50%; background: var(--ink-deep); color: #fff; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur), background var(--dur) var(--ease); } .go-top.is-visible { opacity: 1; visibility: visible; transform: none; } .go-top:hover { background: var(--purple); color: var(--on-purple); } .go-top svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 575.98px) { .tg-fab { width: 66px; height: 66px; font-size: .56rem; padding: .45rem; } /* На телефоні праворуч унизу тісно: там сидить віджет alteg.io разом зі своїм кільцем. Тому «нагору» переїжджає ліворуч — рівно над Telegram, по центру його кола. Виходить охайний стовпчик замість тисняви. */ .go-top { width: 44px; height: 44px; right: auto; left: calc(clamp(1rem, 3vw, 1.5rem) + 11px); bottom: calc(clamp(1rem, 3vw, 1.5rem) + 78px); } } /* Віджет онлайн-запису alteg.io приходить фіксованим 100x100 і виглядав помітно більшим за Telegram-кнопку. Масштабуємо його цілком (разом із анімованим кільцем), не втручаючись у внутрішню розмітку. */ .yButton.bottom.right { transform: scale(.78) !important; transform-origin: bottom right !important; /* Віджет приходить із bottom/right 30px, а Telegram-кнопка стоїть на clamp(1rem,3vw,1.5rem). Через це вони були на різній висоті — зрівнюємо відступи. transform-origin знизу праворуч, тож видима нижня межа збігається зі значенням bottom. */ bottom: clamp(1rem, 3vw, 1.5rem) !important; right: clamp(1rem, 3vw, 1.5rem) !important; } @media (max-width: 575.98px) { .yButton.bottom.right { transform: scale(.66) !important; } } /* ---------- 19b. Карта в контактах ---------- */ .contact__aside iframe { display: block; width: 100%; height: 100%; min-height: 340px; border: 0; } /* ---------- 20. Стани появи (керує GSAP; це запасний варіант) ---------- */ [data-reveal], [data-stagger] > * { opacity: 1; } .js [data-reveal], .js [data-stagger] > * { opacity: 0; } /* ---------- 21. Зменшений рух ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .js [data-reveal], .js [data-stagger] > * { opacity: 1 !important; transform: none !important; } .marquee__track { transform: none !important; } .btn:hover, .card:hover, .price:hover, .slots li:hover, .member:hover .member__photo { transform: none; } } /* ---------- 21b. Темна тема: точкові правки ---------- Тут лише те, що не вирішується токенами: місця з фіксованим світлим тлом або з розрахунком на світлу підкладку. */ /* Підвал у світлій темі вже темний — у темній робимо його ще глибшим, щоб він не зливався з тілом сторінки. */ [data-theme="dark"] .footer { background: var(--ink-deep); } /* Виділена картка ціни: світлий градієнт замінюємо на темний того ж тону */ [data-theme="dark"] .price--feature { background: linear-gradient(170deg, var(--purple-tint) 0%, var(--surface) 55%); box-shadow: 0 18px 44px rgba(0, 0, 0, .45); } /* Кнопки поверх фіолетової секції «Онлайн» лишаються світлими — секція має власний насичений фон в обох темах. */ [data-theme="dark"] .online { background: linear-gradient(135deg, #5b3a86 0%, #3d2559 100%); } [data-theme="dark"] .btn--light { --btn-bg: #f2f0f5; --btn-fg: #2a1c40; --btn-bd: #f2f0f5; } [data-theme="dark"] .btn--light:hover { --btn-bg: transparent; --btn-fg: #fff; } /* Портрети тренерів: у темряві повний ч/б виглядає надто глухо */ [data-theme="dark"] .member__photo img { filter: grayscale(.75); } /* Карта Google світла за замовчуванням — трохи гасимо, щоб не сліпила */ [data-theme="dark"] .contact__aside iframe { filter: brightness(.82) contrast(1.05); } /* Заглушка з логотипом уже темна — лишаємо як є, лише пом'якшуємо межу */ [data-theme="dark"] .card__media--placeholder { background: #223033; } /* Плаваюча кнопка «нагору» на темному тлі має бути світлішою за фон */ [data-theme="dark"] .go-top { background: var(--surface); color: var(--ink); border: 1px solid var(--line); /* інакше кнопка зливається з тлом сторінки */ } [data-theme="dark"] .go-top:hover { background: var(--purple); color: var(--on-purple); } /* Логотип у шапці: у темній темі світлий варіант доречний завжди */ [data-theme="dark"] .nav.is-stuck .nav__logo-dark, [data-theme="dark"] .nav.is-open .nav__logo-dark { opacity: 0; } [data-theme="dark"] .nav.is-stuck .nav__logo-light, [data-theme="dark"] .nav.is-open .nav__logo-light { opacity: 1; } [data-theme="dark"] .nav.is-stuck .nav__menu a, [data-theme="dark"] .nav.is-open .nav__menu a, [data-theme="dark"] .nav.is-stuck .nav__icon, [data-theme="dark"] .nav.is-open .nav__icon { color: var(--ink); } [data-theme="dark"] .nav.is-stuck .nav__burger span, [data-theme="dark"] .nav.is-open .nav__burger span { background: var(--ink); } /* ========================================================================== 23. Сторінка напрямку (stretching.html та інші лендінги) Ті самі токени й ритм, що на головній; нового тут лише блоки, яких на головній немає. ========================================================================== */ /* Спільне: текстове посилання всередині абзацу */ .link { color: var(--purple); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; } @media (hover: hover) { .link:hover { color: var(--purple-hover); } } /* ---------- 23.1 Компактний hero ---------- На головній hero на всю висоту екрана; тут сторінка інформаційна, тож блок нижчий — контент має починатися одразу. */ .hero--page { /* Ролик 16:9. Що нижчий блок, то більше з кадру зрізає `cover`, тому робимо hero трохи вищим, ніж потрібно самому тексту. */ min-height: min(74svh, 700px); align-items: center; } /* У hero крутиться відео, і крізь кадр проїжджають яскраві вікна студії. На нерухомому фото вистачало самої вуалі, тут — ні: у найсвітліших кадрах білий текст падав до 2.2:1. Тому спершу гасимо саме зображення (діє й на постер, бо це той самий кадр), а вже потім кладемо вуаль. */ .hero--page .hero__media img, .hero--page .hero__media video { filter: brightness(.7); } .hero--page .hero__scrim { background: linear-gradient(100deg, rgba(20, 12, 30, .68) 0%, rgba(20, 12, 30, .56) 40%, rgba(20, 12, 30, .26) 70%, rgba(20, 12, 30, .06) 100%), linear-gradient(to top, rgba(20, 12, 30, .52) 0%, rgba(20, 12, 30, .22) 45%, rgba(20, 12, 30, .16) 75%, rgba(20, 12, 30, .48) 100%); } .hero--page .hero__media img, .hero--page .hero__media video { object-position: 50% 34%; } /* Постер і відео мають однакове кадрування, тож підміни не видно. Коли постер зникає (браузер не дав автоплей) — лишається сам постер. */ .hero__video { background: #171420; } .hero__title--page { max-width: none; margin-bottom: var(--sp-2); font-size: clamp(2.6rem, 7vw, 5rem); } /* Хлібні крихти */ .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: var(--sp-2); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .72); } .crumbs a { color: rgba(255, 255, 255, .86); } @media (hover: hover) { .crumbs a:hover { color: #fff; text-decoration: underline; } } .crumbs [aria-current] { color: #fff; } /* На сенсорних екранах рядок крихт заввишки 20px — замало для пальця. Додаємо вертикальні поля до 44px і забираємо їх із відступу знизу, щоб висота блоку не поїхала. */ @media (pointer: coarse) { .crumbs { margin-bottom: 0; } .crumbs a, .crumbs [aria-current] { display: inline-block; padding-block: .75rem; } } /* Мітки під заголовком: тривалість, формат, рівень */ .chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: var(--sp-2) 0 0; } .chip { padding: .4rem 1rem; border: 1px solid rgba(255, 255, 255, .42); border-radius: var(--r-pill); background: rgba(255, 255, 255, .1); backdrop-filter: blur(4px); font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; color: #fff; } /* ---------- 23.2 Переваги ---------- */ .benefit-grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); } .benefit { padding: var(--sp-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } @media (hover: hover) { .benefit:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; } } .benefit__icon { width: 68px; height: 68px; margin-bottom: var(--sp-2); } .benefit__title { margin-bottom: .6rem; font-size: 1.02rem; font-weight: var(--w-semi); letter-spacing: .01em; color: var(--purple); } .benefit p { margin: 0; font-size: var(--fs-sm); line-height: 1.65; } /* ---------- 23.3 Текст + фото ---------- */ .split { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; } @media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } /* Порядок у розмітці однаковий (спочатку фото) — для читача з екранною читалкою це логічно; візуально в другому блоці фото переїжджає праворуч. */ .split--rev .split__media { order: 2; } } .split__media { overflow: hidden; border-radius: var(--r-lg); box-shadow: var(--shadow); aspect-ratio: 4 / 3; } .split__media img { width: 100%; height: 100%; object-fit: cover; } .split__body .lead { margin-bottom: var(--sp-2); } .split__body p:last-child { margin-bottom: 0; } /* ---------- 23.3b Застереження ---------- Окремий блок під текстом: на Fly Stretching чинний сайт окремо попереджає гіпертоніків, і це не можна ховати в загальному абзаці. */ .notice { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2); align-items: start; max-width: 62ch; margin-top: clamp(1.75rem, 4vw, 3rem); padding: var(--sp-3); background: var(--purple-tint); border: 1px solid var(--purple); border-radius: var(--r); } .notice svg { width: 26px; height: 26px; flex: 0 0 26px; fill: none; stroke: var(--purple); stroke-width: 1.6; stroke-linecap: round; } .notice__title { margin-bottom: .3rem; font-size: var(--fs-label); font-weight: var(--w-med); letter-spacing: .16em; text-transform: uppercase; color: var(--purple); } .notice p { margin: 0; font-size: var(--fs-sm); line-height: 1.65; color: var(--ink); } /* ---------- 23.6b Розклад: напрямку немає в сітці ---------- «Шпагат плюс» зараз не стоїть у груповому розкладі, тож замість порожньої таблиці — пряма відповідь і кнопка запису. */ .sched-empty__more { margin-bottom: var(--sp-3); font-size: var(--fs-sm); } .sched-empty { max-width: 56ch; margin-bottom: var(--sp-1); font-size: var(--fs-lead); font-weight: var(--w-light); line-height: 1.65; color: var(--ink); } /* ---------- 23.4 Структура заняття ---------- */ .steps { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); counter-reset: step; } @media (min-width: 760px) { .steps { grid-template-columns: repeat(2, 1fr); } } .step { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: var(--sp-3); padding: var(--sp-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); } .step__time { display: grid; place-content: center; width: 76px; height: 76px; border-radius: 50%; background: var(--purple); color: var(--on-purple); font-size: 1.05rem; font-weight: var(--w-semi); line-height: 1; letter-spacing: .01em; font-variant-numeric: tabular-nums; } .step__title { margin-bottom: .5rem; font-size: var(--fs-h3); font-weight: var(--w-semi); color: var(--ink); } .step__body p { margin: 0; font-size: var(--fs-sm); line-height: 1.7; } @media (max-width: 420px) { .step { gap: var(--sp-2); padding: var(--sp-2); } .step__time { width: 62px; height: 62px; font-size: .95rem; } } /* ---------- 23.5 Тренери напрямку ---------- Знімки тренерів маленькі (250×250), тож рамка теж невелика — так вони лишаються різкими. */ .coaches { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); /* auto-FILL, а не auto-fit: на напрямках, де тренер один, auto-fit розтягував єдину картку на всю ширину і знімок 250×250 перетворювався на розмиту вивіску. Порожні доріжки лишаються — картка тримає розмір. */ grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); } .coach { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); } .coach__photo { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 22%; border-radius: var(--r-sm); filter: grayscale(1); transition: filter var(--dur) var(--ease); } @media (hover: hover) { .coach:hover .coach__photo { filter: grayscale(0); } } [data-theme="dark"] .coach__photo { filter: grayscale(.75); } .coach__role { margin: 0 0 .25rem; font-size: .65rem; font-weight: var(--w-med); letter-spacing: .16em; text-transform: uppercase; color: var(--body); } .coach__name { font-size: 1.05rem; font-weight: var(--w-med); letter-spacing: .01em; color: var(--ink); } /* Вузькі екрани: фото збоку, картка стає рядком — інакше чотири квадрати розтягують сторінку на чотири екрани. */ @media (max-width: 620px) { .coaches { grid-template-columns: 1fr; gap: .6rem; } .coach { flex-direction: row; align-items: center; } .coach__photo { width: 84px; flex: 0 0 84px; } } /* ---------- 23.6 Тижневий розклад напрямку ---------- Занять одного напрямку небагато, тож вкладки зайві: показуємо весь тиждень сіткою. */ .week { display: grid; gap: clamp(.75rem, 2vw, 1.25rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); } /* Кількість колонок = кількість днів у цього напрямку (`--week-cols` ставить генератор). Раніше тут було жорстко `repeat(6, 1fr)` заради стретчингу — і на пілатесі з трьома днями колонки лишалися по ~170px: прізвище ламалося на два рядки, значок «стретчинг + пілатес» — теж. Обмеження max-width не дає карткам роздутися, коли днів мало. */ @media (min-width: 1000px) { .week { grid-template-columns: repeat(var(--week-cols, 6), minmax(0, 1fr)); max-width: calc(var(--week-cols, 6) * 250px); } } /* Днів з різною кількістю занять не розтягуємо на висоту найдовшого */ .week { align-items: start; } .week__day { display: flex; flex-direction: column; padding: var(--sp-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); } .week__name { margin-bottom: .75rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line-soft); font-size: .68rem; font-weight: var(--w-med); letter-spacing: .16em; text-transform: uppercase; color: var(--purple); } .week__list { display: grid; gap: .5rem; } .week__slot { display: grid; gap: .15rem; padding: .7rem .85rem; background: var(--bg-alt); border-radius: var(--r-sm); } /* На світлій темі секція вже сіра — картка біла, а плитка всередині має бути ще на тон іншою, інакше межі не видно. */ .section--alt .week__slot { background: var(--purple-tint); } .week__time { font-size: var(--fs-label); font-weight: var(--w-med); letter-spacing: .06em; color: var(--purple); font-variant-numeric: tabular-nums; } .week__who { font-size: .95rem; font-weight: var(--w-med); line-height: 1.35; color: var(--ink); text-wrap: balance; /* якщо вже переноситься — то рівними рядками */ } .week__badge { justify-self: start; margin-top: .35rem; padding: .15rem .6rem; border-radius: var(--r-pill); background: var(--purple); color: var(--on-purple); font-size: .6rem; font-weight: var(--w-med); letter-spacing: .12em; text-transform: uppercase; } /* На телефоні — одна колонка на всю ширину. Дві колонки по ~185px різали довгі прізвища на два рядки й давали різновисокі картки. У повній ширині час і тренер стають в один рядок, тож день лишається компактним. */ @media (max-width: 767.98px) { .week { grid-template-columns: 1fr; gap: .6rem; } .week__slot { grid-template-columns: auto 1fr; align-items: baseline; column-gap: .75rem; row-gap: .15rem; padding: .6rem .8rem; } .week__time { grid-column: 1; } .week__who { grid-column: 2; } /* Значок «online» — під іменем, у тій самій колонці */ .week__badge { grid-column: 2; margin-top: .1rem; } } /* ---------- 23.7 Ціни ---------- На лендінгу карток рівно чотири. auto-fit(310px) розкладав їх 3 + 1, тож на широких екранах задаємо чотири колонки явно. */ @media (min-width: 1080px) { .prices--land { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ---------- 23.7 Ціни: посилання на повний прайс ---------- */ .prices__more { margin: var(--sp-3) 0 0; max-width: 60ch; font-size: var(--fs-sm); } /* ---------- 23.8 Заклик наприкінці ---------- */ .cta-band { padding-block: clamp(3rem, 6vw, 5rem); background: linear-gradient(135deg, var(--purple) 0%, #5f3a90 100%); color: rgba(255, 255, 255, .9); } [data-theme="dark"] .cta-band { background: linear-gradient(135deg, #5b3a86 0%, #3d2559 100%); } .cta-band__inner { display: grid; gap: var(--sp-3); align-items: center; } @media (min-width: 900px) { .cta-band__inner { grid-template-columns: 1fr auto; gap: var(--sp-5); } } .cta-band__lead { max-width: 46ch; margin: var(--sp-2) 0 0; font-size: var(--fs-lead); font-weight: var(--w-light); color: rgba(255, 255, 255, .88); } .cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); } @media (max-width: 575.98px) { .cta-band__actions .btn { width: 100%; } } /* ---------- 23.9 Інші напрямки ---------- */ .related { display: grid; gap: clamp(.75rem, 2vw, 1.25rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } .related__item { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: 72px; padding: var(--sp-2) var(--sp-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); font-size: 1.05rem; font-weight: var(--w-med); color: var(--ink); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); } .related__item svg { width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: var(--purple); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur) var(--ease); } @media (hover: hover) { .related__item:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: transparent; color: var(--purple); } .related__item:hover svg { transform: translateX(4px); } } /* ---------- 23.10 Темна тема: точкові правки лендінгу ---------- Іконки wicon-*.svg залиті фіксованим #8258B8 — на темному тлі це лише ~2.8:1. Файли спільні з чинним сайтом, тож не чіпаємо їх, а освітлюємо зображення фільтром. */ [data-theme="dark"] .benefit__icon { filter: brightness(1.45) saturate(.85); } /* Зменшений рух — те саме правило, що й для решти інтерактивних блоків */ @media (prefers-reduced-motion: reduce) { .benefit:hover, .related__item:hover { transform: none; } } /* ---------- 22. Друк ---------- */ @media print { .nav, .tg-fab, .go-top, .hero__scroll, .marquee, .modal, .lightbox { display: none !important; } body { color: #000; } .js [data-reveal], .js [data-stagger] > * { opacity: 1 !important; transform: none !important; } }