/* * Sun Clinic — App Shell (режим установленного приложения / PWA). * * Активен ТОЛЬКО когда на висит класс .pwa-app (его ставит app-shell.js * при display-mode: standalone или в превью-режиме). В обычном браузере файл * инертен — ни одного правила не применяется. * * Задача: спрятать «сайтовую» обвязку (шапка/меню/футер/куки) и показать * аккуратную оболочку-приложение: верхняя шапка (профиль + пациенты) и нижние * вкладки (Главная/Прайс/Врачи/Запись/ЛК). */ :root.pwa-app { --app-accent: #F25C19; --app-accent-soft: rgba(242, 92, 25, 0.12); --app-bg: #f5f4f1; --app-surface: #ffffff; --app-text: #1d1d1f; /* #5a6b73 на белом ≈ 5.2:1 — проходит WCAG AA для мелкого текста (было #7c8a93 ≈ 3.4:1). */ --app-muted: #5a6b73; --app-line: #ece9e3; --app-header-h: 54px; --app-tabbar-h: 60px; --app-safe-top: env(safe-area-inset-top, 0px); --app-safe-bottom: env(safe-area-inset-bottom, 0px); } /* ── Прячем сайтовую обвязку ─────────────────────────────────────────────── */ :root.pwa-app .vc-header, :root.pwa-app footer.lidbox-footer, :root.pwa-app .cookie-alert, :root.pwa-app .footer-botton-nav, :root.pwa-app .js-open-modal[data-name="callbackModal"], :root.pwa-app .vc-page-title-wrapper, :root.pwa-app .vc-page-head, /* Плавающие маркетинговые виджеты сайта (появляются при загрузке, часто зелёные): «Записаться/Позвонить» и всплывашка подписки на канал МАКС. В приложении лишние. */ :root.pwa-app .cli-connect, :root.pwa-app .v10-max-floating-popup { display: none !important; } /* Освобождаем место под фикс-бары. Учитываем «чёлку» и home-indicator iPhone. */ :root.pwa-app body.vc-body, :root.pwa-app body { padding-top: calc(var(--app-header-h) + var(--app-safe-top)) !important; padding-bottom: calc(var(--app-tabbar-h) + var(--app-safe-bottom)) !important; background: var(--app-bg); } /* SPA записи/ЛК держат СВОЙ прилипший нижний бар (кнопка «Продолжить»). * Наши вкладки его перекрывали — поднимаем его ровно над вкладками, а место * под ним добавляем к прокрутке SPA, чтобы контент не уходил под бар. */ :root.pwa-app .mobile-flow__cta-bar { bottom: calc(var(--app-tabbar-h) + var(--app-safe-bottom)) !important; } :root.pwa-app .mobile-flow, :root.pwa-app .mobile-flow__body { padding-bottom: calc(var(--app-tabbar-h) + var(--app-safe-bottom)) !important; } /* ── Верхняя шапка приложения ────────────────────────────────────────────── */ .sun-app-header { position: fixed; top: 0; left: 0; right: 0; height: calc(var(--app-header-h) + var(--app-safe-top)); padding: var(--app-safe-top) 12px 0; box-sizing: border-box; display: flex; align-items: center; gap: 10px; background: var(--app-surface); border-bottom: 1px solid var(--app-line); z-index: 2147482000; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; } .sun-app-header__brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.92rem; color: var(--app-text); white-space: nowrap; min-width: 0; } .sun-app-header__brand img { width: 26px; height: 26px; border-radius: 7px; flex: 0 0 auto; } .sun-app-header__brand span { overflow: hidden; text-overflow: ellipsis; } .sun-app-header__spacer { flex: 1; min-width: 8px; } /* Профиль-чип (кнопка, открывает выпадашку пациентов) */ .sun-app-profile { display: flex; align-items: center; gap: 8px; max-width: 58vw; padding: 6px 10px; border: 1px solid var(--app-line); border-radius: 999px; background: var(--app-surface); font: inherit; cursor: pointer; color: var(--app-text); } .sun-app-profile__avatar { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; display: grid; place-items: center; background: var(--app-accent-soft); color: var(--app-accent); font-weight: 700; font-size: 0.8rem; } .sun-app-profile__meta { min-width: 0; display: grid; text-align: left; line-height: 1.1; } .sun-app-profile__name { font-size: 0.84rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sun-app-profile__hint { font-size: 0.68rem; color: var(--app-muted); } .sun-app-profile__chevron { flex: 0 0 auto; color: var(--app-muted); } /* Гость — яркая кнопка-призыв «Войти» (была еле заметной серой плашкой). */ .sun-app-profile--guest { background: var(--app-accent); border-color: transparent; color: #fff; gap: 7px; padding: 9px 16px; box-shadow: 0 3px 12px rgba(242, 92, 25, 0.38); } .sun-app-profile--guest:active { filter: brightness(0.96); } .sun-app-profile__login { flex: 0 0 auto; } .sun-app-profile__cta { font-size: 0.94rem; font-weight: 700; white-space: nowrap; } /* Выпадашка выбора пациента (семейный доступ) */ .sun-app-switcher { position: fixed; top: calc(var(--app-header-h) + var(--app-safe-top) + 6px); right: 10px; width: min(320px, calc(100vw - 20px)); background: var(--app-surface); border: 1px solid var(--app-line); border-radius: 14px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18); z-index: 2147482050; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; } .sun-app-switcher[hidden] { display: none; } .sun-app-switcher__title { padding: 12px 14px 6px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--app-muted); } .sun-app-switcher__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; border: 0; border-top: 1px solid var(--app-line); background: var(--app-surface); font: inherit; text-align: left; color: var(--app-text); cursor: pointer; } .sun-app-switcher__item:hover { background: #faf9f7; } .sun-app-switcher__item.is-current { background: var(--app-accent-soft); } .sun-app-switcher__ava { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; display: grid; place-items: center; background: #eef1f3; color: #46545c; font-weight: 700; font-size: 0.8rem; } .sun-app-switcher__meta { min-width: 0; display: grid; line-height: 1.2; } .sun-app-switcher__name { font-size: 0.9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sun-app-switcher__sub { font-size: 0.74rem; color: var(--app-muted); } .sun-app-switcher__check { margin-left: auto; color: var(--app-accent); } /* Затемнение под выпадашкой */ .sun-app-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.12); z-index: 2147482040; } .sun-app-scrim[hidden] { display: none; } /* ── Нижние вкладки ──────────────────────────────────────────────────────── */ .sun-app-tabbar { position: fixed; bottom: 0; left: 0; right: 0; height: calc(var(--app-tabbar-h) + var(--app-safe-bottom)); padding-bottom: var(--app-safe-bottom); display: flex; background: var(--app-surface); border-top: 1px solid var(--app-line); z-index: 2147482000; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; } .sun-app-tab { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none; color: var(--app-muted); font-size: 0.7rem; font-weight: 600; -webkit-tap-highlight-color: transparent; } .sun-app-tab svg { width: 24px; height: 24px; display: block; } .sun-app-tab span { line-height: 1; } .sun-app-tab.is-active { color: var(--app-accent); } .sun-app-tab:active { background: #faf9f7; } /* ── Куратор «Главная» (рисуется app-shell.js) ───────────────────────────── */ .sun-app-home { max-width: 640px; margin: 0 auto; padding: 14px 14px 8px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: var(--app-text); } .sun-app-home__card { background: var(--app-surface); border: 1px solid var(--app-line); border-radius: 16px; padding: 14px 16px; margin-bottom: 12px; } .sun-app-home__card h2 { margin: 0 0 10px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--app-muted); } .sun-app-contact { display: flex; align-items: center; gap: 12px; padding: 9px 0; color: var(--app-text); text-decoration: none; border-top: 1px solid var(--app-line); } .sun-app-home__card .sun-app-contact:first-of-type { border-top: 0; } .sun-app-contact__ico { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; display: grid; place-items: center; background: var(--app-accent-soft); color: var(--app-accent); } .sun-app-contact__meta { min-width: 0; display: grid; line-height: 1.25; } .sun-app-contact__label { font-size: 0.76rem; color: var(--app-muted); } .sun-app-contact__value { font-size: 0.95rem; font-weight: 600; } .sun-app-home__director { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box; min-height: 46px; margin-top: 4px; border: 0; border-radius: 12px; background: var(--app-accent); color: #fff; font: inherit; font-weight: 600; font-size: 0.92rem; text-decoration: none; cursor: pointer; } /* Промо-слайдер «Главной» — как на сайте: полноширинные слайды (один на экран), * заголовок + текст поверх картинки, свайп, точки-пагинация. */ .sun-app-promos { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin: 0 -14px 10px; /* в край экрана (у .sun-app-home паддинг 14px) */ scrollbar-width: none; } .sun-app-promos::-webkit-scrollbar { display: none; } .sun-app-promo { position: relative; flex: 0 0 100%; scroll-snap-align: center; background: var(--app-surface); text-decoration: none; } /* Пропорция ровно как у мобильных слайдов сайта (780×1200) — картинка целиком. */ .sun-app-promo img { width: 100%; aspect-ratio: 780 / 1200; height: auto; object-fit: cover; display: block; } /* Заголовок + описание поверх светлого верха картинки (как на сайте). */ .sun-app-promo__cap { position: absolute; top: 0; left: 0; right: 0; padding: 18px 20px 40px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.78) 52%, rgba(255, 255, 255, 0) 100%); } .sun-app-promo__cap h3 { margin: 0 0 5px; font-size: 1.34rem; font-weight: 800; line-height: 1.12; color: var(--app-text); } .sun-app-promo__cap p { margin: 0; font-size: 0.9rem; line-height: 1.3; color: #46545c; } /* Точки-пагинация */ .sun-app-dots { display: flex; justify-content: center; gap: 6px; margin: 0 0 16px; } .sun-app-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: #c2bcb1; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: width 0.2s ease, background 0.2s ease, border-radius 0.2s ease; } .sun-app-dot.is-active { background: var(--app-accent); width: 22px; border-radius: 4px; } /* Появление шапки/вкладок */ @media (prefers-reduced-motion: no-preference) { .sun-app-header, .sun-app-tabbar { animation: sunAppFade 0.2s ease both; } } @keyframes sunAppFade { from { opacity: 0; } to { opacity: 1; } }