/* Karuna Jyotish — лендинг. Кремовая тема, Literata / Inter / Bitter. Палитра из приложения: #ede5d0 (фон), #593b3b (текст), #86716c (приглушённый). Тёмная тема — по логике приложения (инверсия), автоматически по системной теме. */ :root{ color-scheme:light; --bg:#f1ead9; /* фон страницы (края градиента) — чуть светлее #ede5d0, контрастнее с текстом #593b3b */ --bg2:#f4efe4; /* фон страницы — светлая середина градиента */ --card:#f9f6ef; /* карточки/поля/карта — в тон стеклянным кнопкам */ /* Карточка ПОВЕРХ поля: на --card её не видно — нужен тон светлее поля, как --card светлее --bg у карточек курса на главной. */ --card-hi:#fffdf8; /* Ещё одна ступень светлее — для чипов (лагна/накшатра) ПОВЕРХ карточки карты, которая уже сама в тоне --card-hi: чипу нужен свой, более светлый тон. */ --card-hi2:#ffffff; /* Активная подвкладка «Джанмы» + поле под ней (см. .cp-subwrap): раньше мешали с --card-hi, который сам почти не отличим от --card — эффекта не было видно совсем. Берём --card напрямую и явно темним. В тёмной теме ниже — обычный --card-hi, без темнения (там просили не трогать). */ --sub-active:color-mix(in srgb, var(--text) 7%, var(--card) 93%); --fill:#e3d8bf; /* заливка вспомогательных плашек */ --text:#593b3b; /* основной текст, заголовки */ --text2:#86716c; /* приглушённый текст */ --text-desc:#6a4f4f; /* текст описания (Обучение/Приложение/Консультация) — темнее text2, чуть светлее заголовка */ --text3:rgba(134,113,108,.55); /* линии карты, номера домов */ --gold2:#593b3b; /* глифы планет в карте */ --av-bindu:#9a6b00; /* бинду аштакаварги на карте транзита (как в приложении) */ --accent:#593b3b; /* акцент (монохромный, из палитры) */ --accent-soft:rgba(89,59,59,.07); --focus-ring:rgba(89,59,59,.16); --err:#a3311f; --ok:#4a7c50; /* галочка валидности (пранапада/кунда) */ --line:rgba(89,59,59,.14); /* светлое стекло (кнопки/чипы) */ --glass-top:rgba(255,255,255,.72); --glass-bot:rgba(255,255,255,.40); --glass-hi:rgba(255,255,255,.75); --shadow:0 1px 2px rgba(89,59,59,.05),0 8px 24px rgba(89,59,59,.07); --shadow-hi:0 6px 14px rgba(89,59,59,.10),0 20px 44px rgba(89,59,59,.15); --maxw:1240px; /* ширина контентной области */ --serif:'Literata',Georgia,'Times New Roman',serif; --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; } /* ── тёмная тема: инверсия как в приложении. Ставится атрибутом data-theme="dark" на (JS следит за системной темой, как в приложении). ── */ :root[data-theme="dark"]{ color-scheme:dark; --bg:#2a2020; /* тёмный тёплый фон (углублённый #593b3b) */ --bg2:#332728; /* светлая середина градиента */ --card:#41393a; /* карточки/поля/карта — в тон стеклянным кнопкам */ --card-hi:#4e4546; /* карточка поверх поля — светлее его, см. светлую тему */ --card-hi2:#5b5152; /* ещё ступень светлее — чип поверх карточки, см. светлую тему */ --sub-active:var(--card-hi); /* тёмная тема — без изменений, чистый --card-hi */ --fill:rgba(255,255,255,.06); --text:#ede5d0; /* светлый кремовый текст */ --text2:#a99a92; /* приглушённый (осветлённый #86716c) */ --text-desc:#e1dcc9; /* текст описания (Обучение/Приложение/Консультация) — темнее заголовка, светлее text2 */ --text3:rgba(237,229,208,.28); --gold2:#e6cdb2; /* глифы планет — светлый тёплый */ --av-bindu:#e0b552; /* бинду аштакаварги — светлее для тёмной темы */ --accent:#d9b9a6; /* тёплый светлый акцент */ --accent-soft:rgba(217,185,166,.10); --focus-ring:rgba(217,185,166,.22); --err:#e6a08c; --ok:#8fbf8f; /* галочка валидности — светлее для тёмной темы */ --line:rgba(237,229,208,.14); --glass-top:rgba(255,255,255,.14); --glass-bot:rgba(255,255,255,.05); --glass-hi:rgba(255,255,255,.20); --shadow:0 1px 2px rgba(0,0,0,.25),0 8px 24px rgba(0,0,0,.32); --shadow-hi:0 6px 14px rgba(0,0,0,.35),0 20px 44px rgba(0,0,0,.45); } *{box-sizing:border-box} [hidden]{display:none!important} /* иначе display из классов перебивает атрибут hidden */ /* overscroll-behavior:none — гасит упругий bounce браузера (macOS-трекпад и т.п.) на страницах короче экрана: без него в крайних положениях скролла вся страница «тянется» за жестом и потом отскакивает — вместе с ней визуально дёргаются шапка/футер, даже будучи position:fixed (сам вьюпорт на секунду смещается браузерным bounce-рендером). none полностью выключает этот эффект, а не просто ослабляет. */ html{scroll-behavior:smooth;background:var(--bg);overscroll-behavior-y:none} /* ── плавный переход между страницами ── Просили именно как было при скролле блоков: старая страница остаётся на месте и гаснет, новая наезжает на неё СВЕРХУ снизу вверх. Показать старую и новую страницу ОДНОВРЕМЕННО при настоящем переходе между документами умеет только браузер — @view-transition (cross-document), без него никак: обычный body-keyframe при загрузке новой страницы никогда не увидит старую, той уже нет в DOM. height:100% на снимках — иначе браузер по умолчанию ИНТЕРПОЛИРУЕТ размер снимка между высотой старого и нового документа (у нас страницы очень разной высоты — index.html короткий, study.html длинный), и кадр визуально «сжимался/растягивался», клипался — тот самый глюк, на который жаловались в первый раз. Дело было не в самом API, а в том, что рядом ЕЩЁ и body сам анимировался своим keyframe — то же самое проигрывалось ДВАЖДЫ (нативным переходом и телом одновременно), отсюда и «клип и подъезд». Теперь только один слой анимации: свои кейфреймы на ::view-transition-old/new(root), никакого отдельного body-keyframe рядом. */ @media (prefers-reduced-motion:no-preference){ @view-transition{navigation:auto} ::view-transition-old(root),::view-transition-new(root){ height:100%;animation-duration:.42s; animation-timing-function:cubic-bezier(.22,.61,.36,1); animation-fill-mode:both; } ::view-transition-old(root){animation-name:kja-vt-out} ::view-transition-new(root){animation-name:kja-vt-in} @keyframes kja-vt-out{from{opacity:1}to{opacity:0}} @keyframes kja-vt-in{ from{opacity:0;transform:translateY(48px)} to{opacity:1;transform:translateY(0)} } } /* запасной вариант — ТОЛЬКО для браузеров без поддержки View Transitions (@supports исключает остальные — иначе тело анимировалось бы ещё раз поверх нативного перехода, см. коммент выше). */ @supports not (view-transition-name: none){ @keyframes kja-page-in{ from{opacity:0;transform:translateY(48px)} to{opacity:1;transform:translateY(0)} } @media (prefers-reduced-motion:no-preference){ body{animation:kja-page-in .42s cubic-bezier(.22,.61,.36,1)} } } /* фон — вертикальный градиент на всю высоту страницы: тёмный край → светлая середина → тёмный край */ body{ margin:0;min-height:100dvh;color:var(--text); background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 50%,var(--bg) 100%) no-repeat; font-family:var(--serif);font-size:17px;line-height:1.6; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; /* шапка и футер — position:fixed (см. .site-head/.site-foot ниже), полностью вне документного потока и не участвуют в скролле вообще — поэтому и не подвержены bounce/дёрганью. padding-top/-bottom компенсируют их реальную высоту (--header-h/--footer-h, меряет js/page-transition.js через ResizeObserver — переносы nav/foot-grid на 2-3 строки в другом языке меняют высоту, поэтому не хардкод) так, чтобы контент не заезжал под них. */ padding-top:var(--header-h, 64px); padding-bottom:var(--footer-h, 64px); } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} em,.i{font-family:'Bitter';font-style:italic} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px} .eyebrow{font-family:var(--sans);font-size:12px; color:var(--accent);font-weight:700;margin:0 0 12px} h1,h2,h3{font-family:var(--serif);line-height:1.15;margin:0;color:var(--text)} h1{font-size:clamp(30px,4.4vw,50px);letter-spacing:-.01em;font-weight:700} /* главный заголовок жирный */ h2{font-size:clamp(24px,3vw,34px);font-weight:600} h3{font-size:20px;font-weight:600} .lead{font-size:19px;color:var(--text);line-height:1.5} .muted{color:var(--text2)} .rule{height:1px;background:var(--line);border:0;margin:0} section{padding:76px 0} /* обучение/консультация — тот же уменьшенный отступ от шапки, что и на главной у .hero (было тоже 76px через общее правило section выше) */ .study,.consult{padding-top:40px} /* ── «жирный при наведении без сдвига»: невидимая жирная копия резервирует ширину ── */ .hb{display:inline-flex;flex-direction:column;align-items:center;transform-origin:center; transition:transform .18s ease,color .18s ease,box-shadow .18s ease} .hb::after{content:attr(data-label);font-weight:700;height:0;overflow:hidden;visibility:hidden; pointer-events:none} /* ── светлая стеклянная кнопка (как в приложении), без обводок ── Покой — компактный; при наведении масштаб доводит до прежнего размера. */ .btn{ font-family:var(--sans);font-size:13px;font-weight:500;cursor:pointer;border:0;border-radius:999px; padding:10px 21px;color:var(--text); background:linear-gradient(180deg,var(--glass-top),var(--glass-bot)); -webkit-backdrop-filter:blur(10px) saturate(1.5);backdrop-filter:blur(10px) saturate(1.5); box-shadow:inset 0 1px 0 var(--glass-hi),0 4px 12px rgba(60,40,30,.12); } .btn:hover{transform:scale(1.2);font-weight:700;box-shadow:inset 0 1px 0 var(--glass-hi),0 8px 20px rgba(60,40,30,.20)} .btn:active{transform:scale(1.16)} .btn[disabled]{opacity:.5;cursor:default;pointer-events:none} .btn-cta{color:var(--accent)} /* смысловой акцент, но всё то же стекло */ /* крупная кнопка («Подать заявку»): в покое — размер обычной наведённой (×1.2), наведение работает как у всех и увеличивает уже от него */ .btn-lg{font-size:15.6px;padding:12px 25px} /* ── шапка: ПОЛНОСТЬЮ непрозрачная и ЖЁСТКО неподвижная ── Раньше была стеклянная (полупрозрачный градиент + блюр, таял книзу за 22px) — под ней просвечивал прокрученный текст, особенно заметно на секции «Приложение», где сразу под шапкой ещё и прилипающий заголовок. Сплошной var(--bg) — тот же цвет, что у страницы, поэтому не выглядит отдельной плашкой, просто гарантированно ничего не видно сквозь неё, ни на одной странице. position:fixed, не sticky — просили жёстко неподвижную шапку. sticky технически тоже «стоит у верха», но остаётся частью документного потока и его скролл-геометрии — при упругом bounce браузера у границы скролла (см. overscroll-behavior у html) sticky-элемент может визуально дёрнуться вместе с этим bounce. fixed привязан только к вьюпорту и не зависит от скролла документа вообще — не шевелится ни при каких обстоятельствах. Компенсация места под неё — padding-top на body (см. --header-h там же, меряет js/page-transition.js). */ .site-head{position:fixed;top:0;left:0;right:0;z-index:50;border:0;background:var(--bg)} /* на всю ширину везде — .wrap здесь без ограничения max-width (общий .wrap центрирует контент страницы 1240px-колонкой; шапке та же логика не нужна: бренд у левого края, нав/вход у правого, как на странице расчётов). */ /* min-height, не height: у фиксированной height контент, которому не хватило 64px (нав перенёсся на 2 строки — длинный текст пункта меню в другом языке/шрифте, другие метрики шрифта в другом браузере), не растягивает блок, а вылезает за его нижний край — и, будучи непрозрачным и с высоким z-index шапки, перекрывает верх контента под собой (карточки карт в hero в т.ч.). min-height вместо этого просто раздвигает шапку по факту — разметка ниже сама сдвигается вниз, наложения нет ни при каком языке/ браузере/ширине экрана. */ .site-head .wrap{position:relative;z-index:1;max-width:none;padding:0 36px; display:flex;align-items:center;justify-content:space-between;min-height:64px} .brand{display:inline-flex;align-items:center;gap:9px; font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:.01em;color:var(--text)} a.brand{cursor:pointer;transition:transform .18s ease,color .18s ease} a.brand:hover{transform:scale(1.06);font-weight:700;color:var(--accent)} /* Пока открыт самый первый экран лендинга (id="calc") — логотип увеличен, тем же приёмом transform:scale, что и hover выше (см. .kja-hero-active в nav-active.js — переключается тем же вызовом, что подсвечивает пункт меню). transform не меняет размер бокса, поэтому высота шапки (64px) не плывёт. Тот же коэффициент, что у .btn:hover — «как кнопка», как просили. Обычный hover (scale 1.06) на этом экране не должен срабатывать вовсе — правило ниже держит то же значение 1.2 и при наведении, поэтому визуально ничего не меняется; на остальных экранах (класса нет) hover работает как обычно. */ body.kja-hero-active .brand{transform:scale(1.2)} body.kja-hero-active a.brand:hover{transform:scale(1.2);font-weight:600;color:var(--text)} /* монограмма перед названием — иконка приложения (сетка с диагоналями по угловым клеткам, «KJ» в центральной), без фона. Пропорции сняты с исходника Icon 512 new.png (мастер без обрезки под safe-zone адаптивной Android-иконки — там буквы мельче и сетка теснее, это не то). */ .brand-ic{flex:none;width:26px;height:26px} .brand-ic-grid{fill:none;stroke:currentColor;stroke-width:1;opacity:.7; stroke-linecap:round;stroke-linejoin:round} .brand-ic text{font-family:var(--sans);font-size:7.3px;font-weight:800;fill:currentColor;stroke:none} .nav{display:flex;gap:30px;font-family:var(--sans);font-size:14px} .nav a{display:inline-flex;align-items:center;gap:7px;color:var(--text2);font-weight:500; transition:transform .18s ease,color .18s ease} .nav a:hover{transform:scale(1.22);font-weight:700;color:var(--accent)} /* +≈3px, жирный, без сдвига */ /* активный пункт (открытая страница/секция) — тот же вид, что при наведении, но постоянно; ставит/снимает js/nav-active.js. Остальные пункты этим не затронуты — у них обычное поведение только по :hover. */ .nav a.is-active{transform:scale(1.22);font-weight:700;color:var(--accent)} @media (prefers-reduced-motion:reduce){ .nav a{transition:none} } /* гамбургер-меню (мобильная версия) — кнопка-триггер; сама видимость и разметка выпадающего списка — у .mobile-menu/.mobile-menu-drop ниже, рядом с .nav-contacts (тот же визуальный язык, единый компонент меню). */ .nav-toggle{display:inline-flex;align-items:center;justify-content:center; border:0;background:none;padding:0;margin:0;cursor:pointer; -webkit-appearance:none;appearance:none;color:var(--text2);transition:color .18s ease} .nav-toggle:hover{color:var(--accent)} .nav-toggle svg{width:22px;height:22px;fill:none;stroke:currentColor; stroke-width:1.8;stroke-linecap:round} @media (prefers-reduced-motion:reduce){ .nav-toggle{transition:none} } /* значок перед каждым пунктом меню — 16px, растёт вместе с текстом (transform уже на всём .nav a / .auth-slot > a). «Расчёты» — не статичный: те же 3 SVG, что в Настройках → Стиль карты (см. kjaSetNavCalcIcon в auth.js), меняется мгновенно при смене стиля там. */ .nav-ic{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6; stroke-linejoin:round;stroke-linecap:round} .nav-ic-fill{fill:currentColor;stroke:none} /* Нав и слот входа/аккаунта — вместе, вторым флекс-элементом рядом с брендом (иначе justify-content:space-between на .wrap растащит их по разным краям). auth-slot — вне .nav, поэтому остаётся видимым и в мобильном разборе, где .nav скрывается целиком. */ .head-right{display:flex;align-items:center;gap:30px} /* слот кнопки «Оформить подписку» — третий флекс-элемент .wrap (между брендом и .head-right), justify-content:space-between уже центрирует его между ними */ .cp-sub-slot{position:relative} /* «Войти» и имя вошедшего — обычная надпись меню, как остальные пункты нав. Капсулой (.btn, см. ниже renderAccountMenu в auth.js) она становится только на самой странице кабинета — как обозначение «вы здесь». */ /* display:flex, не block — иначе вокруг вложенной инлайновой кнопки браузер резервирует «строчную» высоту по ШРИФТУ САМОГО этого div (унаследован от body — 17px), а не по кнопке (14px): выходит на ~5px выше нужного, и .btn внутри центрируется уже в этой раздутой рамке, а не по кнопке впритык. .nav избегает той же ловушки тем же способом — он тоже flex, не block. */ .auth-slot{position:relative;display:flex;align-items:center} /* на мобильной версии «Войти»/имя аккаунта уже есть внутри гамбургера (см. .mobile-menu в auth.js → initMobileMenu) — сам auth-slot в шапке лишний, дублировал бы то же самое рядом с иконкой меню */ @media (max-width:860px){ .auth-slot{display:none} } /* «> a», не «a» — иначе селектор задевает и ссылку «Личный кабинет» ВНУТРИ выпадающего меню (оно физически вложено в .auth-slot): та начинала расти и жирнеть при наведении вместе с пунктом шапки, хотя это разные вещи. */ .auth-slot > a,.acct-trigger{display:inline-flex;align-items:center;gap:6px; font-family:var(--sans);font-size:14px;color:var(--text2);font-weight:500; cursor:pointer;border:0;background:none;padding:0;margin:0;line-height:1.6; -webkit-appearance:none;appearance:none; transition:transform .18s ease,color .18s ease} /* триггер ЛК на самой странице кабинета — капсулой (.btn), значок+текст в ряд тем же приёмом, что «Импорт»/«Мои карты» (см. .cp-icon-btn выше): «жирный без сдвига» — на span.hb ВНУТРИ, не на кнопке целиком. Свой transition обязателен: у .btn его нет, а .hb (который его нёс) теперь только на внутреннем span с текстом, не на самой кнопке. */ .acct-trigger-ico{display:inline-flex;align-items:center;gap:7px; transition:transform .18s ease,box-shadow .18s ease} .auth-slot > a:hover,.acct-trigger:hover{transform:scale(1.22);font-weight:700;color:var(--accent)} @media (prefers-reduced-motion:reduce){ .auth-slot > a,.acct-trigger,.acct-trigger-ico{transition:none} } /* ── переключатель языка: глиф 文 + код (УКР/РУС/ENG), анимированный дропдаун. Фон меню — тот же var(--card), что у .acct-drop/.combo-menu — единый «поповерный» тон сайта. Появление — прозрачность + лёгкий сдвиг вверх (как .acct-drop). ── */ /* в начале правой группы; чуть больший отступ от навигации, чем базовые 30px. ::after — вертикальная разделительная линия сразу после кнопки языка, перед навигацией (просили отделить переключатель языка от остального меню, ровно посередине зазора до неё). .lang-menu (выпадающий список) сам position:absolute, в обычном flex-потоке .lang-switch не участвует — псевдоэлемент встаёт сразу после видимой кнопки, а не после невидимого в закрытом виде меню. margin-left — сдвигает сам переключатель чуть правее от бренда. margin-right отрицательный — компенсирует общий gap:30px у .head-right (тот распределяет то же расстояние И до .nav): без него зазор ДО разделителя (15px, свой margin-left у ::after) и ПОСЛЕ него (тогда были бы все 30px gap) не совпадали бы — с margin-right:-15px после разделителя тоже остаётся ровно 15px (30 gap − 15 компенсация), разделитель встаёт строго посередине между кнопкой языка и «Обучение». */ .lang-switch{position:relative;display:flex;align-items:center; margin-left:10px;margin-right:-15px} /* ярче обычного var(--line) (там opacity .14) — этот разделитель в шапке должен читаться отчётливее тонких служебных линий вроде .rule. */ .lang-switch::after{content:'';display:block;width:1px;height:18px; margin-left:15px;background:color-mix(in srgb, var(--text) 32%, transparent)} .lang-trigger{display:inline-flex;align-items:center;gap:6px;cursor:pointer; border:0;background:none;padding:0;margin:0;font-family:var(--sans);color:var(--text2); -webkit-appearance:none;appearance:none;transition:transform .18s ease,color .18s ease} .lang-trigger:hover{transform:scale(1.14);color:var(--accent)} .lang-glyph{font-size:17px;line-height:1;font-weight:400} .lang-code{font-size:13px;font-weight:600;letter-spacing:.02em} .lang-menu{position:absolute;top:100%;right:0;margin-top:12px;min-width:170px; background:var(--card);border-radius:12px;box-shadow:var(--shadow-hi);overflow:hidden;padding:6px;z-index:60; opacity:0;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease;pointer-events:none} .lang-menu.open{opacity:1;transform:translateY(0);pointer-events:auto} .lang-opt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer; border:0;background:none;border-radius:8px;padding:9px 12px;font-family:var(--sans);color:var(--text); -webkit-appearance:none;appearance:none;transition:background .14s ease} .lang-opt:hover{background:var(--accent-soft)} .lang-opt.active{background:var(--accent-soft);color:var(--accent)} .lang-opt-code{font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--text2);min-width:30px} .lang-opt.active .lang-opt-code{color:var(--accent)} .lang-opt-name{font-size:14px;font-weight:500} /* ── меню аккаунта в шапке: «Личный кабинет» / «Выйти», и «Оформить» в кабинете — общий компонент .acct-drop. Фон — тот же var(--card), что у .combo-menu/.sug (единственный «поповерный» фон, который есть на сайте, — выдумывать новый оттенок не стали). Появление — тем же приёмом, что модалка (.hidden убирается/добавляется JS вокруг перехода прозрачности и лёгкого сдвига, см. renderAccountMenu). */ .acct-menu{position:relative;display:flex;align-items:center} .acct-drop{position:absolute;top:100%;right:0;margin-top:12px;min-width:220px; background:var(--card); border-radius:12px;box-shadow:var(--shadow-hi);overflow:hidden;padding:6px; z-index:30;opacity:0;transform:translateY(-6px) scale(.98);pointer-events:none; transition:opacity .16s ease,transform .16s ease} .acct-drop.open{opacity:1;transform:none;pointer-events:auto} .acct-drop a,.acct-drop button{display:block;width:100%;text-align:left;cursor:pointer; border:0;border-radius:9px;background:none;padding:11px 16px;color:var(--text); font-family:var(--sans);font-size:14.5px} .acct-drop a:hover,.acct-drop button:hover{background:var(--accent-soft)} /* меню аккаунта в шапке — разрастание из точки (правый верхний угол, у самой кнопки), а не общий лёгкий сдвиг+прозрачность остальных .acct-drop. ВАЖНО: масштаб — на ВНУТРЕННЕЙ обёртке (.acct-drop-pop-inner), не на самом .acct-drop. Раньше scale(.05) стоял прямо на .acct-drop — том же элементе, что слушает mouseenter для отмены автозакрытия (см. renderAccountMenu). Пока анимация роста не доиграла, РЕАЛЬНАЯ область наведения элемента (она следует за transform) — крошечная точка у угла, а не то место, куда пришла мышь. Таймер закрытия (200мс после ухода с кнопки) успевал истечь раньше, чем меню дорастало до курсора и «замечало» наведение — попап открывался и тут же гас. У внешнего .acct-drop теперь transform не трогаем вовсе — его хитбокс сразу на полный размер, растёт только визуальная обёртка внутри. Разные кривые на открытие/закрытие: у cubic-bezier(.16,1,.3,1) — резкий старт и долгое замедление, на ЗАКРЫТИЕ (transition берётся из состояния, В КОТОРОЕ уходим, т.е. из этого, «не открытого» правила) она же сжала бы почти всё визуальное движение в первые доли секунды — глаз читал бы это как мгновенное исчезновение. Поэтому здесь — свой, симметричный ease. */ .acct-drop.acct-drop-pop{background:none;box-shadow:none;padding:0;overflow:visible; transform:none;transition:opacity .2s ease} .acct-drop.acct-drop-pop.open{transform:none;transition:opacity .22s ease} .acct-drop-pop-inner{background:var(--card);border-radius:12px;box-shadow:var(--shadow-hi); overflow:hidden;padding:6px;transform-origin:top right;transform:scale(.05); transition:transform .2s ease} .acct-drop.acct-drop-pop.open .acct-drop-pop-inner{transform:scale(1); transition:transform .22s cubic-bezier(.16,1,.3,1)} @media (prefers-reduced-motion:reduce){ .acct-drop{transition:none} /* этому меню — не «резко», а тихое затухание без роста/масштаба (сам эффект разрастания — та движуха, которую reduce-motion просит убрать). */ .acct-drop.acct-drop-pop,.acct-drop.acct-drop-pop.open{transition:opacity .18s ease} .acct-drop-pop-inner,.acct-drop.acct-drop-pop.open .acct-drop-pop-inner{ transform:none;transition:none} } /* ── «Контакты» в шапке: всплывающее меню по наведению ── Вне