/* ========================================================================== Сторінка «Про нас» (/about/) — пурпурна тема. Палітра: --all-color-on-page (#952DF4) + --all-color-on-page-rgba (#d5abfb) + --all-color-on-page-text (#fff), задаються на у header.php для color-purple сторінок. Темний пурпур #542E91 — додатковий акцент. Шрифти: Geometria-Medium(500) / Bold(700) / ExtraBold(800). ========================================================================== */ .about-page { background: #ffffff; } /* Секції, на які ведуть підпункти меню «Про нас» (#story, #mission…). Шапка sticky і після прокрутки накриває верх секції — відступ дорівнює її висоті. */ .about-page > section[id] { scroll-margin-top: 120px; } @media screen and (max-width: 1000px) { .about-page > section[id] { scroll-margin-top: 80px; } } /* Заголовок спільної форми внизу (.wf_main_form__title) не чіпаємо — він фіолетовий і ExtraBold, як на решті сторінок (wf_style.css). :where() не додає специфічності, тож правила блоків, що перебивають це, працюють як були. */ .about-page h2:where(:not(.wf_main_form__title)), .about-page h3:where(:not(.wf_main_form__title)) { font-family: "Geometria", "Geometria-Bold", sans-serif; font-weight: 700; color: #1f1d2a; line-height: 1.15; text-wrap: balance; } /* Заголовки секцій — у стилі решти сайту: білий текст на «рваній» плашці кольору сторінки, як .forWhat__title на нульовому класі (preparation.css). Саме clip-path, а не SVG-мазок .routine__title: плашка підлаштовується під будь-яку довжину заголовка з адмінки, у тому числі в кілька рядків. Шкала розміру — 48px ExtraBold, як глобальний h3 у common.css і .middle-h2; 32px до 768px і 26px до 480px (див. «Адаптивність» внизу). Задається тут, а не в класах блоків, щоб усі H2 сторінки змінювались разом. */ .about-page h2 { font-family: "Geometria-ExtraBold", sans-serif; font-weight: 800; font-size: 48px; line-height: 1.2; width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; padding: 17px 20px; text-align: center; color: var(--all-color-on-page-text, #ffffff); background-color: var(--all-color-on-page); clip-path: polygon(96% 2%, 100% 23%, 100% 72%, 97% 95%, 83% 100%, 26% 100%, 4% 99%, 1% 79%, 0% 35%, 3% 0); } /* ---------- 1. Hero ------------------------------------------------------- */ .about-hero { position: relative; background: var(--all-color-on-page); color: var(--all-color-on-page-text); padding: 64px 0 110px; overflow: hidden; } .about-hero__inner { max-width: 820px; } .about-hero__title { font-family: "Geometria", "Geometria-ExtraBold", sans-serif; font-weight: 800; font-size: 46px; line-height: 1.1; margin: 0 0 18px; color: #ffffff; } .about-hero__subtitle { font-size: 19px; line-height: 1.55; margin: 0; color: rgba(255, 255, 255, 0.92); max-width: 720px; } .about-hero__wave { position: absolute; left: 0; bottom: -1px; width: 100%; height: 70px; display: block; /* Шлях SVG намальований «дном вгору»: білий заповнює верхню частину, фіолетові зубці стирчать униз. Дзеркалимо по вертикалі відносно центру коробки SVG (transform-origin за замовч. 50% 50%) — коробка лишається на місці, контент перевертається: білий опиняється внизу й піднімається плавною хвилею у фіолетовий hero, знизу — чистий білий стик з наступною секцією. НЕ використовуємо transform-origin: bottom — воно зміщує SVG нижче hero й обрізається overflow:hidden. */ transform: scaleY(-1); } /* ---------- 2. Story + counters ------------------------------------------ */ .about-story { padding: 80px 0 90px; background: #ffffff; } .about-story__inner { max-width: 1100px; margin: 0 auto; text-align: center; } .about-story__title { margin: 0 0 32px; } .about-story__text { font-size: 18px; line-height: 1.6; color: #3a3845; margin: 0 auto 50px; max-width: 760px; } .about-counters__row { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; } .about-counters__item { display: flex; flex-direction: column; align-items: center; min-width: 180px; } .about-counters__num { font-family: "Geometria", "Geometria-ExtraBold", sans-serif; font-weight: 800; font-size: 64px; line-height: 1; color: var(--all-color-on-page); font-variant-numeric: tabular-nums; } .about-counters__label { margin-top: 12px; font-size: 17px; color: #3a3845; text-transform: lowercase; } /* ---------- 3. Leaders ---------------------------------------------------- */ /* Композиція в мові сайту замість тонкої рамки: вирізане фото засновників стоїть на «рваній» плашці кольору сторінки (та сама форма, що в H2) і головами виходить за її верх; позаду бузкова плашка зі зсувом, поруч зірки з images/icons. Цитата — з великими жовтими лапками (#FEE100 — жовтий бренду, ним же намальована «K» у блоці команди на головній). */ .about-leaders { padding: 80px 0; background: #ffffff; overflow: hidden; } .about-leaders__title { margin: 0 0 56px; text-align: center; } .about-leaders__grid { display: flex; gap: 80px; align-items: center; max-width: 1100px; margin: 0 auto; } .about-leaders__photo { position: relative; flex: 0 0 460px; max-width: 460px; } .about-leaders__shape { position: absolute; left: 0; right: 0; bottom: 0; height: 70%; background-color: var(--all-color-on-page); clip-path: polygon(96% 2%, 100% 23%, 100% 72%, 97% 95%, 83% 100%, 26% 100%, 4% 99%, 1% 79%, 0% 35%, 3% 0); } .about-leaders__shape--back { background-color: var(--all-color-on-page-rgba); transform: translate(26px, -22px) rotate(-4deg); } /* Люди на фото займають 18–78% ширини по нижньому краю — там, де нижня кромка плашки рівна, тож обрізані ноги не вилазять за форму. */ .about-leaders__img { position: relative; z-index: 2; display: block; width: 100%; height: auto; } .about-leaders__star { position: absolute; display: block; pointer-events: none; } .about-leaders__star--big { z-index: 1; top: 4%; right: -4%; width: 84px; height: 84px; } .about-leaders__star--small { z-index: 3; top: 22%; left: -2%; width: 38px; height: 38px; } .about-leaders__quote { flex: 1; position: relative; } .about-leaders__quote-mark { display: block; width: 76px; height: 58px; margin-bottom: 22px; color: #FEE100; } .about-leaders__quote-text { margin: 0 0 34px; font-family: "Geometria-Medium", sans-serif; font-size: 26px; line-height: 1.45; color: #1f1d2a; font-weight: 500; } .about-leaders__signature-name { font-family: "Geometria-ExtraBold", sans-serif; font-weight: 800; font-size: 22px; line-height: 1.3; color: #1f1d2a; margin: 0 0 8px; } .about-leaders__signature-role { font-size: 16px; color: #6b6877; margin: 0; } /* ---------- 4. Video ------------------------------------------------------ */ .about-video { padding: 80px 0; background: #ffffff; } .about-video__inner { max-width: 900px; margin: 0 auto; text-align: center; } .about-video__title { margin: 0 0 28px; } .about-video__subtitle { font-size: 17px; color: #6b6877; margin: 0 0 36px; } .about-video__frame { position: relative; width: 100%; padding-bottom: 56.25%; border-radius: 16px; overflow: hidden; background: #000; } .about-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ---------- 5. Missions ------------------------------------------------- */ /* Візуально як блок «Наша місія» на /shkoly/ (constructor_module_school_our_mission, school.css), заміри 1366px звідти: рвана плашка 320×211 з білим заголовком 48px ExtraBold у два рядки, поруч великий текст кольору сторінки 40px, відстань 40px. Класи .mission не перевикористовуємо — там вшиті відступи й фонове фото саме тієї сторінки. Шаховий порядок: парний пункт (візія) дзеркальний. */ .about-missions { padding: 80px 0; background: #ffffff; } .about-missions__list { max-width: 1140px; margin: 0 auto; display: flex; flex-direction: column; gap: 70px; } /* Текст центрується по висоті плашки. */ .about-mission { display: flex; gap: 40px; align-items: center; } .about-mission--alt { flex-direction: row-reverse; justify-content: space-between; } /* Дзеркальний пункт (візія) на десктопі відсунутий від сусідів далі за базовий gap списку: 70 + 40 = 110px зверху і знизу. На ≤768px блоки стовпчиком, там лишається рівний gap. */ @media screen and (min-width: 769px) { .about-mission--alt { margin: 40px 0; } } .about-mission__plate { position: relative; flex: 0 0 320px; display: flex; align-items: center; justify-content: center; min-height: 211px; } .about-mission__plate-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* CSS fill перебиває SVG presentation-attribute, тож плашка бере актуальний колір сторінки, а не хардкод з inline-атрибута. */ .about-mission__plate-svg path { fill: var(--all-color-on-page); } .about-mission__plate .about-mission__title { position: relative; z-index: 1; max-width: 320px; margin: 0; padding: 14px 30px; font-family: "Geometria-ExtraBold", sans-serif; font-weight: 800; font-size: 48px; line-height: 1.1; text-align: center; color: #ffffff; } .about-mission__body { flex: 1; max-width: 760px; } /* Шрифт як у тексті місії на /shkoly/: Geometria-Medium з жирним начертанням. */ .about-mission__text { margin: 0; font-family: "Geometria-Medium", sans-serif; font-weight: 700; font-size: 40px; line-height: 1.2; color: var(--all-color-on-page); } .about-mission__image { margin-top: 20px; border-radius: 14px; max-width: 100%; height: auto; } /* ---------- 6. Locations -------------------------------------------------- */ /* Еталон I5: секція на фіолетовому фоні, білі картки без рамок/тінів, плоскі прямі границі зверху та знизу (без хвилі), білий заголовок. */ .about-locations { padding: 80px 0; background: var(--all-color-on-page); } .about-locations__title { margin: 0 0 40px; } /* Секція сама кольору сторінки — заголовок тут без плашки, просто білий текст. Вища специфічність (0,2,0) перебиває .about-page h2 (0,1,1). */ .about-locations .about-locations__title { color: #ffffff; background-color: transparent; clip-path: none; padding: 0; } .about-locations__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } .about-location { display: flex; flex-direction: column; border-radius: 16px; background: #fff; transition: box-shadow 0.2s ease; } /* Hover-підсвічування картки з відео-вставкою (еталон /sadochky/: .home-location__videos-item:hover a { box-shadow: 0 0 15px 7px #a1a1a1 }). :has() обмежує тільки картки із video-link, щоб фото-only локації не світились. overflow:hidden прибрано з картки — інакше тень обрізалась би; фото скруглюємо зверху окремо. */ .about-location:has(.about-location__video-link):hover { box-shadow: 0 0 15px 7px rgba(161, 161, 161, 0.7); } .about-location__photo { position: relative; aspect-ratio: 4 / 3; background: #f3eefc; overflow: hidden; border-radius: 16px 16px 0 0; } .about-location__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Відео-вставка (еталон /sadochky/ home-location__videos): фото локації + кнопка play, клік відкриває Fancybox. */ .about-location__video-link { display: block; width: 100%; height: 100%; position: relative; } .about-location__play { position: absolute; top: 50%; left: 50%; width: 64px; height: 64px; transform: translate(-50%, -50%); transition: transform 0.25s ease; pointer-events: none; } .about-location__video-link:hover .about-location__play { transform: translate(-50%, -50%) scale(1.1); } .about-location__body { padding: 20px 20px 24px; display: flex; flex-direction: column; flex: 1; } .about-location__name { font-size: 18px; margin: 0 0 6px; color: #1f1d2a; } .about-location__map-link { display: inline-flex; align-items: center; gap: 8px; color: var(--all-color-on-page); font-size: 15px; font-weight: 700; text-decoration: none; } /* Роздільник між назвою локації та кнопкою «Переглянути на карті». margin-top:auto притискає його (і кнопку під ним) до низу body. */ .about-location__divider { margin: 0 0 16px; margin-top: auto; border: 0; border-top: 1px solid var(--all-color-on-page-rgba); } .about-location__map-link svg { width: 14px; height: 12px; } .about-location__map-link:hover { text-decoration: underline; } /* ---------- 7. Team ------------------------------------------------------- */ /* За мотивами mriydiy.in.ua/team у кольорах сторінки: фільтр-пігулки, секції категорій, картка «ім'я — жовта риска — посада — фото в арці із зіркою». Картка з «Про себе» —