/* ───────────────────────────────────────────────────────── Анастасия Бессмертная — психологическое консультирование Jost (основа) · Inter (интерфейс) · Sloop Script Pro Medium (скрипт подключён, но пока не используется — ждёт решения) ───────────────────────────────────────────────────────── */ :root{ /* палитра */ --rasp:#33181C; --cocoa:#6F5F4D; --cream:#EAECE4; --beige:#DDD9C9; --rule:rgba(111,95,77,.26); --rule-strong:rgba(51,24,28,.32); /* шрифты */ --jost:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --inter:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; /* шкала (5 уровней) */ --t-display:clamp(46px,5.6vw,88px); --t-section:clamp(34px,4.2vw,60px); --t-lead:clamp(26px,2.7vw,36px); --t-body-lg:clamp(18px,1.5vw,21px); --t-body:clamp(16px,1.2vw,18px); --t-meta:12px; /* сетка и ритм (8px) */ --m:clamp(24px,5vw,72px); --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px; --s9:160px; --maxw:1560px; } /* Sloop Script Pro Medium отключён — сайт использует только Jost + Inter. Файл сохранён в fonts/ на случай возврата к решению. @font-face{ font-family:'SloopScriptPro'; src:url('fonts/sloop-script-pro-medium.woff2') format('woff2'); font-weight:500;font-style:normal;font-display:swap; } */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important} } body{ background:var(--cream); color:var(--rasp); font-family:var(--jost); font-weight:400; font-size:var(--t-body); line-height:1.65; overflow-x:hidden; } img{display:block;max-width:100%} a{color:inherit} ::selection{background:var(--rasp);color:var(--cream)} :focus-visible{outline:2px solid var(--rasp);outline-offset:3px} /* ── типографические роли ───────────────────────────── */ .u-display{font-family:var(--jost);font-weight:300;font-size:var(--t-display); line-height:1.06;letter-spacing:-.02em} .u-section{font-family:var(--jost);font-weight:300;font-size:var(--t-section); line-height:1.1;letter-spacing:-.018em} .u-lead{font-family:var(--jost);font-weight:300;font-size:var(--t-lead); line-height:1.32;letter-spacing:-.01em} .u-body-lg{font-size:var(--t-body-lg);line-height:1.6} .u-meta{font-family:var(--inter);font-size:var(--t-meta);font-weight:500; letter-spacing:.2em;text-transform:uppercase;color:var(--cocoa)} .u-quiet{color:var(--cocoa)} .u-measure{max-width:64ch} .u-measure-sm{max-width:52ch} hr.rule{height:1px;border:0;background:var(--rule)} /* ── обёртки ────────────────────────────────────────── */ .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--m)} .section{padding-block:clamp(72px,10vw,var(--s8))} .section--tight{padding-block:clamp(64px,8vw,var(--s7))} .section--beige{background:var(--beige)} /* ── ссылка-кнопка ──────────────────────────────────── */ .link{font-family:var(--inter);font-size:13px;font-weight:500;letter-spacing:.14em; text-transform:uppercase;text-decoration:none;display:inline-block; color:inherit;background:none;cursor:pointer; border:0;border-bottom:1px solid currentColor; padding:0 0 var(--s1); transition:opacity .25s ease} .link:hover{opacity:.55} /* ── Pearl-кнопка — единственное закрывающее действие сайта ─ Депth собрана только из локальной палитры: лёгкое высветление верхней кромки (14% cream в rasp), тонкая cream-обводка сверху, мягкая внешняя тень на rasp (никакого чёрного), скользящий блик на hover — все эффекты приглушены сильнее референса по просьбе. */ .btn{ position:relative; isolation:isolate; overflow:hidden; display:inline-block; font-family:var(--inter);font-size:13px;font-weight:500;letter-spacing:.14em; text-transform:uppercase;text-decoration:none; color:var(--cream); padding:16px 30px; border-radius:4px; background: linear-gradient(180deg, #4D3638 0%, var(--rasp) 42%, var(--rasp) 100%); box-shadow: inset 0 1px 0 rgba(234,236,228,.16), /* мягкий верхний блик */ inset 0 -1px 0 rgba(51,24,28,.4), /* сдержанная внутренняя тень снизу */ 0 1px 2px rgba(51,24,28,.14), /* тесная тень контакта с поверхностью */ 0 10px 22px rgba(51,24,28,.16); /* мягкая внешняя тень */ transition:transform .25s ease, box-shadow .25s ease, background .25s ease; } /* скользящий блик — единственное движение по поверхности, не мигание */ .btn::before{ content:''; position:absolute; inset:0; background:linear-gradient(115deg, transparent 42%, rgba(234,236,228,.14) 50%, transparent 58%); transform:translateX(-130%); transition:transform .7s ease; pointer-events:none; } .btn:hover{ transform:translateY(-1.5px); background:linear-gradient(180deg, #584244 0%, var(--rasp) 46%, var(--rasp) 100%); box-shadow: inset 0 1px 0 rgba(234,236,228,.22), inset 0 -1px 0 rgba(51,24,28,.4), 0 2px 4px rgba(51,24,28,.16), 0 14px 28px rgba(51,24,28,.2); } .btn:hover::before{transform:translateX(130%)} .btn:active{ transform:translateY(0); background:linear-gradient(180deg, var(--rasp) 0%, var(--rasp) 60%, #2c1417 100%); box-shadow: inset 0 1px 2px rgba(51,24,28,.45), inset 0 1px 0 rgba(234,236,228,.08), 0 1px 2px rgba(51,24,28,.14); transition:transform .08s ease, box-shadow .08s ease, background .08s ease; } /* на тёмной заливке обводка тем же rasp невидима — здесь нужен светлый контур, а не общий .rasp-on-cream фокус-стиль сайта */ .btn:focus-visible{ outline:2px solid var(--cream); outline-offset:3px; } /* ── шапка ──────────────────────────────────────────── */ .nav{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4)} .nav__mark{font-family:var(--jost);font-weight:500;font-size:17px;letter-spacing:.01em; text-decoration:none;white-space:nowrap} .nav__list{display:flex;flex-wrap:wrap;row-gap:var(--s2);column-gap:clamp(20px,2.4vw,40px); list-style:none;align-items:baseline} .nav__list a{font-family:var(--inter);font-size:12px;font-weight:500;letter-spacing:.16em; text-transform:uppercase;color:var(--cocoa);text-decoration:none;white-space:nowrap; transition:color .25s ease} .nav__list a:hover{color:var(--rasp)} .nav__toggle{display:none;background:none;border:0;cursor:pointer; font-family:var(--inter);font-size:12px;font-weight:500;letter-spacing:.16em; text-transform:uppercase;color:var(--rasp);padding:var(--s1) 0} /* ── 1. ГЕРОЙ ───────────────────────────────────────── */ /* minmax(0,1fr): без него трек 1 наследует min-content шапки — на 900–1750px это шире 58% колонки и портрет обрезается overflow:hidden. flex-wrap на .nav__list (выше) — второй слой той же защиты: если тексту навигации всё же не хватает высоты строки, он переносится, а не толкает сетку. */ .hero{display:grid;grid-template-columns:minmax(0,1fr) 42%;grid-template-rows:auto 1fr; min-height:92vh} .hero__nav{grid-column:1;grid-row:1; padding:var(--s4) clamp(32px,5vw,72px) 0 var(--m)} .hero__col{grid-column:1;grid-row:2;display:flex;flex-direction:column; justify-content:center; padding:var(--s5) clamp(32px,5vw,72px) clamp(48px,7vw,72px) var(--m)} .hero__img{grid-column:2;grid-row:1 / -1} .hero__body{max-width:760px} .hero__eyebrow{display:block;margin-bottom:var(--s5)} /* украинская строка — вторичная: тише за счёт кегля и начертания, а не прозрачности: любое приглушение цвета уводит контраст ниже AA */ .hero__eyebrow-alt{display:block;margin-top:var(--s1); font-size:11px;font-weight:400;letter-spacing:.18em;color:var(--cocoa)} .hero__title{margin-bottom:var(--s5)} .hero__rule{width:80px;margin-bottom:var(--s4)} .hero__link{margin-top:var(--s5)} .hero__img{position:relative;overflow:hidden;background:var(--beige)} .hero__img img{width:100%;height:100%;object-fit:cover;object-position:54% 20%} /* ── 2. ОБО МНЕ ─────────────────────────────────────── */ /* «Обо мне» — отдельная бежевая глава: собственный, более щедрый вход, чтобы смена фона читалась как начало главы, а не просто другой оттенок той же секции */ #about{padding-block:clamp(96px,12vw,var(--s9))} .about__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(40px,6vw,var(--s7))} .about__lead{align-self:start} /* короткая волосяная метка перед эйбрау — та же лексика, что и rule в остальных секциях (hero__rule, contacts__rule), здесь означает «начинается глава», не декоративный элемент */ .about__mark{display:block;width:32px;height:1px;background:var(--rasp); margin-bottom:var(--s3)} /* #about .u-meta специфичнее .section--beige .u-meta (id+class против class+class) — иначе общее правило приглушило бы ровно тот заголовок, которому по этой правке нужно, наоборот, больше веса */ #about .u-meta{display:block;margin-bottom:var(--s5); font-size:13px;font-weight:600;color:var(--rasp);opacity:1} /* «Обо мне» — единственная секция без крупного заголовка: эйбрау стоял один на всю секцию (12px против 59px в остальных). Ведущая фраза — самое личное предложение на странице — получает вес, сравнимый с заголовком секции, вместо веса цитаты; ни копия, ни структура сетки не меняются */ .about__lead .u-lead{font-size:clamp(32px,3.6vw,48px);line-height:1.22; letter-spacing:-.015em;max-width:15ch} .about__copy{max-width:54ch} /* первый абзац — «что я предлагаю» — получает вес чуть выше обычного текста и увеличенный отступ снизу: сканирующий взгляд считывает его как продолжение лида, а три следующих — как факультативное чтение */ .about__copy > p:first-child{font-size:var(--t-body-lg);line-height:1.6; margin-bottom:var(--s5)} .about__copy > p + p{margin-top:var(--s4)} /* ── 3. С ЧЕМ ОБРАЩАЮТСЯ — редакционный индекс ──────── */ /* смена оси относительно «Обо мне»: заголовок у левого поля, список сдвинут вправо — пустая левая колонка и есть пауза */ .topics{padding-block:clamp(80px,11vw,var(--s9)) clamp(72px,10vw,var(--s8))} .topics__title{margin-bottom:clamp(56px,7vw,var(--s7))} .topics__grid{display:grid;grid-template-columns:32% minmax(0,1fr)} .topics__list{grid-column:2} .topics__coda{grid-column:2} /* без линеек и маркеров между темами — воздух вместо сетки, чтобы список читался как открытый перечень, а не как сетка ячеек */ /* было clamp(48,5vw,80) — на десктоке доходило до 80px и секция растягивалась на 2.3 экрана, из-за чего единовременно попадало в кадр не больше 3-4 тем */ .topic + .topic{margin-top:clamp(40px,4vw,56px)} /* без max-width: на десктопе каждая тема укладывается в одну строку, поэтому колонку тем можно просканировать сверху вниз одним взглядом */ .topic__title{font-family:var(--jost);font-weight:300; font-size:clamp(29px,2.9vw,40px);line-height:1.14;letter-spacing:-.018em; color:var(--rasp);text-wrap:balance} .topic__desc{font-size:var(--t-body);line-height:1.62;color:var(--cocoa); max-width:50ch;margin-top:var(--s3)} /* кода: продолжает список, а не подводит под ним черту */ .topics__coda{margin-top:clamp(72px,8vw,140px); font-family:var(--jost);font-weight:300; font-size:clamp(21px,1.9vw,27px);line-height:1.36;letter-spacing:-.01em; color:var(--cocoa);max-width:42ch} /* ── 4. КАК ПРОХОДИТ РАБОТА ─────────────────────────── */ .process{display:grid;grid-template-columns:55% 1fr;align-items:stretch} .process__img{overflow:hidden;background:var(--beige)} .process__img img{width:100%;height:100%;object-fit:cover;object-position:50% 42%; min-height:clamp(360px,52vw,760px)} .process__col{display:flex;flex-direction:column;justify-content:center; padding:clamp(48px,6vw,var(--s7)) var(--m) clamp(48px,6vw,var(--s7)) clamp(32px,5vw,72px)} .process__col .u-meta{display:block;margin-bottom:var(--s4)} .process__title{margin-bottom:var(--s6)} .process__steps{list-style:none;counter-reset:step} .process__steps li{counter-increment:step;padding-block:var(--s4); border-top:1px solid var(--rule);display:grid; grid-template-columns:52px minmax(0,1fr);gap:var(--s2)} .process__steps li::before{content:counter(step,decimal-leading-zero); font-family:var(--inter);font-size:11px;font-weight:600;letter-spacing:.16em; color:var(--cocoa);padding-top:.55em} .process__steps p{color:var(--cocoa);max-width:46ch} /* ── 5. ПРИНЦИПЫ — колофон ──────────────────────────── */ .tenets__head{margin-bottom:var(--s6);display:flex;justify-content:space-between; align-items:baseline;gap:var(--s5);flex-wrap:wrap} .tenets__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(24px,3vw,var(--s5))} .tenets__item{border-top:1px solid var(--rule-strong);padding-top:var(--s3)} /* min-height резервирует высоту двух строк (2×1.3em) для любого заголовка: у «Профессиональная ответственность» их и правда две, у остальных — одна, но без резерва её абзац стартовал на 28px выше по общей направляющей */ .tenets__item h3{font-family:var(--jost);font-weight:400;font-size:var(--t-body-lg); line-height:1.3;min-height:2.6em;margin-bottom:var(--s2);letter-spacing:-.005em} .tenets__item p{font-size:var(--t-body);line-height:1.6;color:var(--cocoa)} /* доступность: на бежевом фоне какао даёт 4.34:1 (ниже AA), поэтому вторичный текст там — тёмная малина; иерархия удерживается размером, начертанием и трекингом, а не цветом */ .section--beige .u-quiet, .section--beige .tenets__item p, .section--beige .faq__a p{color:var(--rasp)} /* .closing тоже стоит на var(--beige), но задаёт его напрямую, минуя класс .section--beige — из-за чего мимо проходило и это правило: какао/12px на бежевом даёт 4.34:1, ниже AA (см. комментарий выше) */ .section--beige .u-meta, .closing .u-meta{color:var(--rasp);opacity:.7} /* ── 6. МОЙ ПОДХОД — страта ─────────────────────────── */ .approach__grid{display:grid;grid-template-columns:33% minmax(0,1fr); gap:clamp(40px,5vw,0px)} .approach__lead{padding-right:clamp(24px,4vw,64px)} .approach__lead .u-meta{display:block;margin-bottom:var(--s5)} .approach__lead p{color:var(--cocoa);max-width:40ch} .approach__lead p + p{margin-top:var(--s5)} .approach__stack{border-left:1px solid var(--rule)} .approach__crown{padding:0 0 var(--s6) clamp(24px,4vw,56px)} .stratum{border-top:1px solid var(--rule);padding-block:var(--s4) var(--s5)} .stratum .stratum__label{font-family:var(--inter);font-size:11px;font-weight:500; line-height:1.4;letter-spacing:.2em;text-transform:uppercase;color:var(--cocoa); margin-bottom:var(--s3)} .stratum p{font-family:var(--jost);font-weight:300;line-height:1.24;letter-spacing:-.01em} .stratum p + p{margin-top:10px} .stratum--tools{margin-left:clamp(24px,14vw,200px);padding-left:clamp(16px,3vw,56px)} .stratum--tools p{font-size:clamp(18px,1.6vw,21px)} .stratum--comp{margin-left:clamp(12px,7vw,104px);padding-left:clamp(16px,3vw,56px)} .stratum--comp p{font-size:clamp(21px,2vw,27px)} .stratum--base{padding-left:clamp(24px,4vw,56px)} .stratum--base p{font-size:clamp(27px,2.9vw,39px)} .stratum__note{font-family:var(--jost)!important;font-weight:400!important; font-size:var(--t-body)!important;line-height:1.65!important;letter-spacing:0!important; color:var(--cocoa);max-width:58ch;margin-top:var(--s3)!important} /* ── 7. ОБРАЗОВАНИЕ ─────────────────────────────────── */ .edu__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(40px,6vw,var(--s7));align-items:start} .edu__degree{font-family:var(--jost);font-weight:300;font-size:var(--t-lead); line-height:1.3;letter-spacing:-.01em;max-width:25ch} .edu__head .u-meta{display:block;margin-bottom:var(--s5);font-weight:500} .edu__list{list-style:none;border-top:1px solid var(--rule)} .edu__list li{padding-block:var(--s3);border-bottom:1px solid var(--rule); font-size:var(--t-body-lg);font-weight:400} .edu__certs{margin-top:var(--s5)} /* ── 8. СТОИМОСТЬ ───────────────────────────────────── */ .rate{display:grid;grid-template-columns:42% minmax(0,1fr);align-items:stretch} .rate__img{overflow:hidden;background:var(--beige)} .rate__img img{width:100%;height:100%;object-fit:cover;object-position:44% 50%; min-height:clamp(320px,48vw,720px)} .rate__col{display:flex;flex-direction:column;justify-content:center; padding:clamp(48px,6vw,var(--s7)) var(--m) clamp(48px,6vw,var(--s7)) clamp(32px,5vw,72px)} .rate__col .u-meta{display:block;margin-bottom:var(--s4)} .rate__title{margin-bottom:var(--s4);max-width:18ch} .rate__intro{color:var(--cocoa);max-width:48ch;margin-bottom:var(--s6)} .rate__specs{border-top:1px solid var(--rule);margin-bottom:var(--s5)} .rate__spec{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr); gap:var(--s3);padding-block:var(--s3);border-bottom:1px solid var(--rule); align-items:baseline} .rate__spec dt{font-family:var(--inter);font-size:11px;font-weight:500; letter-spacing:.16em;text-transform:uppercase;color:var(--cocoa)} .rate__spec dd{font-size:var(--t-body-lg)} .rate__price{display:flex;align-items:baseline;gap:var(--s2); padding-block:var(--s3) var(--s5)} .rate__price .val{font-family:var(--jost);font-weight:300; font-size:clamp(34px,3.4vw,46px);line-height:1;letter-spacing:-.02em} .rate__price .cur{font-family:var(--inter);font-size:13px;font-weight:500; letter-spacing:.16em;text-transform:uppercase;color:var(--cocoa)} /* ── 9. FAQ ─────────────────────────────────────────── */ .faq__grid{display:grid;grid-template-columns:33% minmax(0,1fr); gap:clamp(40px,5vw,var(--s7));align-items:start} .faq__head{position:sticky;top:var(--s6)} .faq__head .u-meta{display:block;margin-bottom:var(--s4)} .faq__list{border-top:1px solid var(--rule-strong)} .faq__item{border-bottom:1px solid var(--rule-strong)} .faq__q{list-style:none;width:100%;background:none;border:0;cursor:pointer;text-align:left; font-family:var(--jost);font-weight:400;font-size:var(--t-body-lg); line-height:1.4;color:var(--rasp);padding:var(--s4) var(--s5) var(--s4) 0; position:relative;display:block;letter-spacing:-.005em} .faq__q::-webkit-details-marker{display:none} .faq__q::marker{content:''} .faq__q::after{content:'';position:absolute;right:6px;top:50%;width:11px;height:1px; background:var(--rasp);transform:translateY(-50%)} .faq__q::before{content:'';position:absolute;right:11px;top:50%;width:1px;height:11px; background:var(--rasp);transform:translateY(-50%);transition:opacity .25s ease} .faq__item[open] .faq__q::before{opacity:0} /* было: каждый

нёс padding-bottom:48px, и второй абзац получал ещё и margin-top:24px поверх — расстояние внутри одного ответа (72px) выходило больше, чем расстояние до следующего вопроса (48px), обратная близость. Теперь единый нижний отступ — на контейнере, между абзацами — свой, меньший */ .faq__a{overflow:hidden;padding-bottom:var(--s5)} .faq__a p{color:var(--cocoa);max-width:64ch;padding-right:var(--s5)} .faq__a p + p{margin-top:var(--s2)} /* ── 10. МАТЕРИАЛЫ — шлюз к отдельному разделу ──────── */ /* средний вес: заголовок секционного масштаба, но без фото и без сплошной кнопки — чтобы не спорить с финалом */ .materials{padding-block:clamp(80px,10vw,var(--s8))} .materials__grid{display:grid;grid-template-columns:32% minmax(0,1fr); gap:clamp(24px,4vw,0px);align-items:start} .materials__body{grid-column:2} .materials__body .u-lead{max-width:30ch} .materials__link{margin-top:var(--s5)} /* статус раздела: подпись, а не «выключено» — сама ссылка остаётся обычной активной ссылкой */ .materials__head .status{font-family:var(--inter);font-size:11px;font-weight:500; letter-spacing:.16em;text-transform:uppercase;color:var(--cocoa); margin-top:var(--s2)} /* ── 11. КОНТАКТЫ — практическая информация ─────────── */ /* самый тихий блок концовки: компактная высота, мелкая метка, простые текстовые ссылки — ни карточек, ни иконок */ .contacts{padding-bottom:clamp(72px,9vw,var(--s7))} .contacts__rule{margin-bottom:clamp(40px,5vw,var(--s6))} .contacts__grid{display:grid;grid-template-columns:32% minmax(0,1fr); gap:clamp(24px,4vw,0px);align-items:start} .contacts__body{grid-column:2} .contacts__list{list-style:none;display:flex;flex-direction:column; align-items:flex-start;gap:var(--s2)} .contacts__list a{font-family:var(--jost);font-weight:300; font-size:clamp(19px,1.7vw,24px);line-height:1.3;letter-spacing:-.008em; color:var(--rasp);text-decoration:none; border-bottom:1px solid transparent;padding-bottom:2px; transition:border-color .25s ease} .contacts__list a:hover{border-bottom-color:var(--rasp)} /* ── страница «Материалы» ───────────────────────────── */ .page-head{padding-block:clamp(40px,5vw,var(--s6)) clamp(64px,8vw,var(--s7))} .page-head__grid{display:grid;grid-template-columns:32% minmax(0,1fr); gap:clamp(24px,4vw,0px);align-items:end} .page-head__body{grid-column:2} .page-head__body .u-lead{max-width:32ch} .page-nav{padding-block:var(--s4) 0} .shelf{border-top:1px solid var(--rule);padding-block:clamp(40px,5vw,var(--s6))} .shelf__grid{display:grid;grid-template-columns:32% minmax(0,1fr); gap:clamp(16px,4vw,0px);align-items:start} .shelf__body{grid-column:2} .shelf h2{font-family:var(--jost);font-weight:300; font-size:clamp(26px,2.6vw,36px);line-height:1.14;letter-spacing:-.018em} .shelf__body p{color:var(--cocoa);max-width:48ch} /* сюда добавляются реальные материалы: .shelf__body > ul.shelf__items */ /* ── 10. ФИНАЛ ──────────────────────────────────────── */ .closing{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 40%; align-items:stretch;background:var(--beige)} .closing__col{display:flex;flex-direction:column;justify-content:center; padding:clamp(72px,9vw,var(--s8)) clamp(32px,5vw,72px) clamp(72px,9vw,var(--s8)) var(--m)} .closing__col .u-meta{display:block;margin-bottom:var(--s5)} .closing__title{margin-bottom:var(--s6); font-size:clamp(40px,5vw,76px);line-height:1.06} .closing__img{overflow:hidden} .closing__img img{width:100%;height:100%;object-fit:cover;object-position:50% 50%; min-height:clamp(320px,44vw,700px)} /* ── подвал ─────────────────────────────────────────── */ .footer{padding-block:var(--s5) var(--s6);border-top:1px solid var(--rule)} .footer__row{display:flex;justify-content:space-between;align-items:baseline; gap:var(--s4);flex-wrap:wrap} .footer a{font-family:var(--inter);font-size:12px;font-weight:500;letter-spacing:.16em; text-transform:uppercase;color:var(--cocoa);text-decoration:none} .footer a:hover{color:var(--rasp)} .footer__note{font-family:var(--inter);font-size:11px;letter-spacing:.06em; color:var(--cocoa);text-transform:none;font-weight:400} /* ── галерея сертификатов ───────────────────────────── */ .certs{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s2)} .certs button{display:block;width:100%;background:none;border:0;padding:0;cursor:pointer} .certs img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 20%; background:var(--beige);transition:opacity .25s ease} .certs button:hover img{opacity:.72} .certs figcaption{font-family:var(--inter);font-size:10px;font-weight:500; letter-spacing:.12em;text-transform:uppercase;color:rgba(234,236,228,.72); margin-top:var(--s1);text-align:left;line-height:1.5} .modal{position:fixed;inset:0;z-index:100; width:100%;height:100%;max-width:100%;max-height:100%; border:0;margin:0;padding:var(--m); background:rgba(51,24,28,.92);color:var(--cream); display:none;place-items:center;overflow:auto} .modal[open]{display:grid} .modal::backdrop{background:rgba(51,24,28,.88)} .modal__inner{max-width:1040px;width:100%;display:flex; flex-direction:column;gap:var(--s3)} .modal__img{width:100%;max-height:74vh;object-fit:contain;background:var(--cream)} .modal__bar{display:flex;justify-content:space-between;align-items:center; gap:var(--s3);color:var(--cream)} .modal__cap{font-family:var(--inter);font-size:12px;letter-spacing:.12em; text-transform:uppercase} .modal__acts{display:flex;gap:var(--s3);align-items:center} .modal__acts a,.modal__close{font-family:var(--inter);font-size:12px;font-weight:500; white-space:nowrap; letter-spacing:.14em;text-transform:uppercase;color:var(--cream); background:none;border:0;cursor:pointer;text-decoration:none; border-bottom:1px solid rgba(234,236,228,.5);padding-bottom:4px} /* ── мобильное меню ─────────────────────────────────── */ /* overflow-y:auto — на iPhone SE/mini список из 9 пунктов не помещался в высоту экрана (список заканчивался на 796px из 812), а прокрутки не было, и «Записаться» становился недостижим */ .menu{position:fixed;inset:0;z-index:90;background:var(--cream); padding:var(--s4) var(--m) var(--s6);display:none;flex-direction:column; overflow-y:auto;-webkit-overflow-scrolling:touch} .menu[data-open="true"]{display:flex} .menu__top{display:flex;justify-content:space-between;align-items:baseline; margin-bottom:var(--s7)} .menu__list{list-style:none;display:flex;flex-direction:column;gap:var(--s3); margin-bottom:auto} .menu__list a,.menu__cta{font-family:var(--jost);font-weight:300;font-size:30px; letter-spacing:-.015em;text-decoration:none;color:var(--rasp)} /* пункт «Записаться» — теперь