/* ========================================================================== OSCAR CLINIC — Liquid Glass (iOS 26‑style) Все стили ограничены .oc-app, чтобы не задевать тему, Elementor и формы. ========================================================================== */ #oc-app{ --oc-gold: #C7AF72; --oc-gold-d: #A88E4E; --oc-gold-l: #E9DDBC; --oc-ink: #0F172A; --oc-ink-2: #334155; --oc-muted: #64748B; --oc-bg: #F7F5F0; --oc-line: rgba(15, 23, 42, .08); --oc-wa: #25D366; --oc-r-xl: 22px; --oc-r-lg: 17px; --oc-r-md: 13px; --oc-r-sm: 8px; --oc-glass-bg: linear-gradient(135deg, rgba(255,255,255,.62), rgba(255,255,255,.28)); --oc-glass-blur: 22px; --oc-shadow: 0 1px 1px rgba(15,23,42,.04), 0 12px 32px -12px rgba(15,23,42,.18); --oc-shadow-lg: 0 2px 4px rgba(15,23,42,.05), 0 24px 60px -20px rgba(15,23,42,.30); --oc-ease: cubic-bezier(.32,.72,0,1); --oc-spring: cubic-bezier(.34,1.56,.64,1); --oc-wrap: 1200px; --oc-gutter: 16px; --oc-header-h: 64px; position: relative; isolation: isolate; font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 16px; line-height: 1.55; color: var(--oc-ink); background: var(--oc-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; padding-bottom: 1px; } @media (min-width: 768px) { #oc-app{ --oc-gutter: 24px; --oc-header-h: 72px; } } #oc-app *, #oc-app *::before, #oc-app *::after{ box-sizing: border-box; } #oc-app :where(img){ max-width: 100%; height: auto; display: block; border: 0; } #oc-app :where(a){ color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; } #oc-app :where(button){ font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; margin: 0; -webkit-tap-highlight-color: transparent; text-transform: none; letter-spacing: inherit; line-height: inherit; box-shadow: none; border-radius: 0; } #oc-app :where(button:hover, button:focus){ background-color: transparent; color: inherit; } #oc-app :where(h1, h2, h3, h4, p, ul, figure){ margin: 0; padding: 0; font-family: inherit; color: inherit; } #oc-app :where(ul){ list-style: none; } #oc-app :focus-visible{ outline: 3px solid color-mix(in srgb, var(--oc-gold) 70%, white); outline-offset: 3px; border-radius: 10px; } #oc-app [hidden]{ display: none !important; } #oc-app .oc-defs{ position: absolute; width: 0; height: 0; overflow: hidden; } #oc-app .oc-i{ flex: none; } /* ---------- Фон: мягкие «капли» цвета, чтобы стеклу было что преломлять ---------- */ #oc-app .oc-bg{ position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } #oc-app .oc-bg i{ position: absolute; border-radius: 50%; opacity: .5; } #oc-app .oc-bg i:nth-child(1){ width: 60vmax; height: 60vmax; left: -20vmax; top: 30vh; background: radial-gradient(circle, rgba(199,175,114,.55), transparent 65%); } #oc-app .oc-bg i:nth-child(2){ width: 50vmax; height: 50vmax; right: -18vmax; top: 120vh; background: radial-gradient(circle, rgba(125,170,220,.45), transparent 65%); } #oc-app .oc-bg i:nth-child(3){ width: 55vmax; height: 55vmax; left: 10vw; top: 260vh; background: radial-gradient(circle, rgba(199,175,114,.40), transparent 65%); } /* ---------- Жидкое стекло ---------- */ #oc-app .oc-glass{ position: relative; background: var(--oc-glass-bg); -webkit-backdrop-filter: blur(var(--oc-glass-blur)) saturate(180%); backdrop-filter: blur(var(--oc-glass-blur)) saturate(180%); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.25), inset 0 0 0 .5px rgba(255,255,255,.55), var(--oc-shadow); border-radius: var(--oc-r-lg); } /* Блик по контуру (specular rim) */ #oc-app .oc-glass::before{ content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(145deg, rgba(255,255,255,.95), rgba(255,255,255,.08) 38%, rgba(255,255,255,0) 60%, rgba(255,255,255,.55)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; z-index: 1; } /* Подсветка, следующая за пальцем/курсором */ @media (hover: hover) and (pointer: fine) { #oc-app .oc-glass::after{ content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(240px circle at var(--mx, 30%) var(--my, -20%), rgba(255,255,255,.35), transparent 60%); opacity: 0; transition: opacity .4s var(--oc-ease); pointer-events: none; z-index: 0; } #oc-app .oc-glass:hover::after{ opacity: var(--glow, 0); } } #oc-app .oc-glass > *{ position: relative; z-index: 2; } #oc-app .oc-glass--dark{ --oc-glass-bg: linear-gradient(135deg, rgba(15,23,42,.52), rgba(15,23,42,.28)); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 .5px rgba(255,255,255,.18), 0 20px 50px -20px rgba(0,0,0,.5); } #oc-app .oc-glass--dark::before{ background: linear-gradient(145deg, rgba(255,255,255,.6), rgba(255,255,255,.04) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,.3)); } #oc-app .oc-glass--strong{ --oc-glass-bg: linear-gradient(160deg, rgba(255,255,255,.86), rgba(255,255,255,.7)); --oc-glass-blur: 30px; } /* Преломление (Chromium): SVG displacement map, как в liquid‑glass‑js, без WebGL и скриншотов страницы */ #oc-app.oc-lg-on .oc-glass--refract{ -webkit-backdrop-filter: blur(3px) saturate(190%) brightness(1.04); backdrop-filter: url(#oc-lg) blur(3px) saturate(190%) brightness(1.04); } @media (prefers-reduced-transparency: reduce) { #oc-app .oc-glass, #oc-app.oc-lg-on .oc-glass--refract{ --oc-glass-bg: rgba(255,255,255,.96); backdrop-filter: none; -webkit-backdrop-filter: none; } #oc-app .oc-glass--dark{ --oc-glass-bg: rgba(15,23,42,.92); } } /* ---------- Кнопки ---------- */ #oc-app .oc-btn{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; font-weight: 600; font-size: 15px; letter-spacing: -.01em; line-height: 1.1; text-align: center; transition: transform .35s var(--oc-spring), box-shadow .3s var(--oc-ease), background-color .3s var(--oc-ease), filter .3s; white-space: nowrap; position: relative; user-select: none; } #oc-app .oc-btn:active{ transform: scale(.96); } #oc-app .oc-btn--sm{ min-height: 40px; padding: 0 16px; font-size: 14px; } #oc-app .oc-btn--block{ width: 100%; } #oc-app .oc-btn--gold{ color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--oc-gold) 85%, white), var(--oc-gold) 55%, var(--oc-gold-d)); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.08), 0 8px 22px -8px color-mix(in srgb, var(--oc-gold) 80%, transparent); text-shadow: 0 1px 1px rgba(0,0,0,.12); } #oc-app .oc-btn--gold:hover{ filter: brightness(1.05); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 12px 28px -8px color-mix(in srgb, var(--oc-gold) 90%, transparent); } #oc-app .oc-btn--glass{ background: linear-gradient(135deg, rgba(255,255,255,.7), rgba(255,255,255,.35)); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 .5px rgba(255,255,255,.6), var(--oc-shadow); color: var(--oc-ink); } #oc-app .oc-btn--ghost{ color: #fff; background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } #oc-app .oc-btn--wa{ color: var(--oc-gold-d); background: linear-gradient(135deg, rgba(255,255,255,.8), rgba(255,255,255,.45)); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--oc-gold) 70%, transparent), var(--oc-shadow); } #oc-app .oc-link{ font-weight: 600; color: var(--oc-gold-d); } #oc-app .oc-round{ width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; transition: transform .3s var(--oc-spring); } #oc-app .oc-round:active{ transform: scale(.9); } /* ---------- Сегментированный переключатель (город/язык) ---------- */ #oc-app .oc-seg{ display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: rgba(15,23,42,.06); box-shadow: inset 0 1px 2px rgba(15,23,42,.06); } #oc-app .oc-seg__opt{ padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--oc-ink-2); transition: background-color .3s var(--oc-ease), color .3s, box-shadow .3s, transform .3s var(--oc-spring); white-space: nowrap; } #oc-app .oc-seg__opt:hover{ color: var(--oc-gold-d); } #oc-app .oc-seg__opt.is-on{ background: #fff; color: var(--oc-ink); box-shadow: 0 1px 1px rgba(15,23,42,.06), 0 4px 12px -4px rgba(15,23,42,.2); } #oc-app .oc-seg--wide{ display: flex; width: 100%; } #oc-app .oc-seg--wide .oc-seg__opt{ flex: 1; text-align: center; padding: 10px 12px; font-size: 15px; } /* ---------- Шапка ---------- */ #oc-app .oc-header{ position: fixed; z-index: 1000; top: max(10px, env(safe-area-inset-top)); left: 0; right: 0; padding: 0 10px; pointer-events: none; transition: transform .5s var(--oc-ease); } .admin-bar .oc-header { top: calc(46px + 10px); } @media (min-width: 783px) { .admin-bar .oc-header { top: calc(32px + 10px); } } #oc-app .oc-header.is-scrolled .oc-header__bar{ box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 14px 34px -14px rgba(15,23,42,.28); } #oc-app .oc-header__bar{ pointer-events: auto; max-width: 1260px; margin: 0 auto; height: var(--oc-header-h); display: flex; align-items: center; gap: 12px; padding: 0 10px 0 18px; border-radius: 999px; --oc-glass-bg: linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.4)); } #oc-app .oc-logo{ display: flex; align-items: center; flex: none; height: 100%; } /* Логотип: только пропорциональное масштабирование, без обрезки */ #oc-app .oc-logo img{ height: 30px; width: auto; max-width: none; object-fit: contain; } @media (min-width: 768px) { #oc-app .oc-logo img{ height: 36px; } } #oc-app .oc-nav{ display: none; gap: 2px; margin: 0 auto; } #oc-app .oc-nav a{ white-space: nowrap; padding: 8px 11px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--oc-ink-2); transition: background-color .25s, color .25s; } #oc-app .oc-nav a:hover, #oc-app .oc-nav a.is-active, #oc-app .oc-nav__dd:hover > a, #oc-app .oc-nav__dd:focus-within > a{ background: rgba(255,255,255,.75); color: var(--oc-gold-d); box-shadow: 0 1px 2px rgba(15,23,42,.06); } #oc-app .oc-header__tools{ display: flex; align-items: center; gap: 8px; margin-left: auto; } #oc-app .oc-header__tools .oc-seg{ display: none; } #oc-app .oc-header__phone{ display: none; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; padding: 8px 10px; border-radius: 999px; white-space: nowrap; } #oc-app .oc-header__phone:hover{ background: rgba(255,255,255,.6); } #oc-app .oc-burger{ width: 44px; height: 44px; border-radius: 50%; display: grid; place-content: center; gap: 4px; background: color-mix(in srgb, var(--oc-gold) 14%, white); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--oc-gold) 30%, transparent); } #oc-app .oc-burger span{ display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--oc-gold-d); transition: transform .35s var(--oc-spring), opacity .2s; } #oc-app .oc-burger[aria-expanded="true"] span:first-child{ transform: translateY(6px) rotate(45deg); } #oc-app .oc-burger[aria-expanded="true"] span:nth-child(2){ opacity: 0; } #oc-app .oc-burger[aria-expanded="true"] span:last-child{ transform: translateY(-6px) rotate(-45deg); } @media (min-width: 720px) { #oc-app .oc-header__tools .oc-seg:not(.oc-seg--lang){ display: inline-flex; } } @media (min-width: 900px) { #oc-app .oc-header__tools .oc-seg--lang{ display: inline-flex; } } @media (min-width: 1280px) { #oc-app .oc-nav{ display: flex; } #oc-app .oc-header__phone{ display: inline-flex; } #oc-app .oc-burger{ display: none; } } @media (max-width: 1599px) { #oc-app .oc-header__phone span{ display: none; } #oc-app .oc-header__phone{ width: 40px; height: 40px; justify-content: center; padding: 0; background: rgba(15,23,42,.06); } } @media (max-width: 380px) { #oc-app .oc-header [data-book].oc-btn{ display: none; } } /* Мобильное меню */ #oc-app .oc-menu{ position: fixed; z-index: 999; inset: 0; padding: calc(var(--oc-header-h) + 22px) 10px 10px; background: rgba(247,245,240,.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: oc-fade .3s var(--oc-ease); } #oc-app .oc-menu__panel{ max-width: 520px; margin: 0 auto; padding: 18px; border-radius: var(--oc-r-xl); --oc-glass-bg: linear-gradient(160deg, rgba(255,255,255,.9), rgba(255,255,255,.72)); animation: oc-drop .45s var(--oc-spring); max-height: calc(100dvh - var(--oc-header-h) - 40px); overflow: auto; } #oc-app .oc-menu__row{ display: grid; gap: 8px; margin-bottom: 14px; } #oc-app .oc-menu__label{ font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--oc-muted); } #oc-app .oc-menu__nav{ display: grid; margin: 4px 0 16px; } #oc-app .oc-menu__nav > a, #oc-app .oc-menu__group > summary{ display: flex; justify-content: space-between; align-items: center; padding: 14px 4px; font-size: 18px; font-weight: 600; border-bottom: 1px solid var(--oc-line); color: var(--oc-ink-2); transition: color .25s; cursor: pointer; list-style: none; } #oc-app .oc-menu__group > summary::-webkit-details-marker{ display: none; } #oc-app .oc-menu__nav > a:hover, #oc-app .oc-menu__group > summary:hover, #oc-app .oc-menu__nav .is-active{ color: var(--oc-gold-d); } #oc-app .oc-menu__group[open] > summary .oc-i{ transform: rotate(180deg); } #oc-app .oc-menu__group > summary .oc-i{ transition: transform .35s var(--oc-spring); } #oc-app .oc-menu__sub{ display: grid; padding: 4px 0 8px 12px; border-bottom: 1px solid var(--oc-line); } #oc-app .oc-menu__sub a{ padding: 10px 4px; font-size: 16px; font-weight: 500; color: var(--oc-ink-2); transition: color .25s; } #oc-app .oc-menu__sub a:hover, #oc-app .oc-menu__sub a.is-active{ color: var(--oc-gold-d); } #oc-app .oc-menu__nav a .oc-i{ color: var(--oc-muted); } #oc-app .oc-menu__cta{ display: grid; gap: 10px; } /* ---------- Общая сетка ---------- */ #oc-app .oc-main{ padding-top: calc(var(--oc-header-h) + 38px); } #oc-app .oc-wrap{ max-width: calc(var(--oc-wrap) + var(--oc-gutter) * 2); margin: 0 auto; padding: 0 var(--oc-gutter); } #oc-app .oc-wrap--narrow{ max-width: calc(860px + var(--oc-gutter) * 2); } #oc-app .oc-section{ padding-top: 56px; padding-bottom: 8px; scroll-margin-top: calc(var(--oc-header-h) + 20px); } @media (min-width: 900px) { #oc-app .oc-section{ padding-top: 88px; } } #oc-app .oc-head{ margin-bottom: 24px; max-width: 760px; } #oc-app .oc-head--row{ display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; } #oc-app .oc-wrap.oc-head--row{ max-width: calc(var(--oc-wrap) + var(--oc-gutter) * 2); } #oc-app .oc-eyebrow{ font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--oc-gold-d); margin-bottom: 10px; } #oc-app .oc-h2{ font-size: clamp(28px, 4.2vw, 46px); line-height: 1.08; font-weight: 700; letter-spacing: -.03em; text-wrap: balance; } #oc-app .oc-sub{ margin-top: 10px; color: var(--oc-muted); font-size: 16px; text-wrap: pretty; } #oc-app .oc-center{ text-align: center; margin-top: 24px; } #oc-app .oc-row{ display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } #oc-app .oc-prose{ color: var(--oc-ink-2); } #oc-app .oc-prose p{ margin: 0 0 12px; } #oc-app .oc-prose h4{ font-size: 18px; font-weight: 700; color: var(--oc-ink); margin: 22px 0 10px; letter-spacing: -.01em; } #oc-app .oc-prose ul{ display: grid; gap: 8px; margin: 0 0 12px; } #oc-app .oc-prose li{ position: relative; padding-left: 26px; } #oc-app .oc-prose li::before{ content: ""; position: absolute; left: 4px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--oc-gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--oc-gold) 22%, transparent); } #oc-app .oc-badge{ display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: #7A5F1F; background: linear-gradient(135deg, #F6EBCB, #E9D8A6); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); } #oc-app .oc-badge--sm{ font-size: 11px; padding: 3px 8px; } #oc-app .oc-pill{ display: inline-flex; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: rgba(15,23,42,.06); color: var(--oc-ink-2); } #oc-app .oc-pill--gold{ background: color-mix(in srgb, var(--oc-gold) 20%, white); color: #7A5F1F; } /* ---------- Герой ---------- */ #oc-app .oc-hero{ position: relative; margin: 0 10px; border-radius: var(--oc-r-xl); overflow: hidden; background: #0b1220; box-shadow: var(--oc-shadow-lg); } @media (min-width: 768px) { #oc-app .oc-hero{ margin: 0 16px; } } #oc-app .oc-hero__track{ display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; } #oc-app .oc-hero__track::-webkit-scrollbar{ display: none; } #oc-app .oc-slide{ position: relative; flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; height: clamp(420px, 60svh, 560px); overflow: hidden; } @media (min-width: 768px) { #oc-app .oc-slide{ height: clamp(480px, 74svh, 760px); } } #oc-app .oc-slide__img{ position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; } #oc-app .oc-slide:not(.oc-slide--image)::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,18,32,0) 35%, rgba(11,18,32,.55)); pointer-events: none; } #oc-app .oc-slide--image .oc-slide__img{ object-fit: contain; transform: none; } #oc-app .oc-slide__card{ position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 88px; padding: 20px 22px; border-radius: var(--oc-r-lg); max-width: 600px; color: #fff; background-color: rgba(15,23,42,.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 0 0 1px rgba(255,255,255,.12); text-shadow: 0 1px 12px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.35); } @media (min-width: 768px) { #oc-app .oc-slide__card{ left: 40px; bottom: 100px; padding: 28px 30px; } } #oc-app .oc-slide__title{ font-size: clamp(24px, 4vw, 44px); line-height: 1.1; font-weight: 700; letter-spacing: -.03em; text-wrap: balance; color: #fff; } #oc-app .oc-slide__sub{ margin-top: 10px; font-size: clamp(16px, 2vw, 20px); font-weight: 600; color: var(--oc-gold-l); } #oc-app .oc-slide__actions{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } #oc-app .oc-slide__solo{ position: absolute; z-index: 2; left: 16px; bottom: 64px; } @media (min-width: 768px) { #oc-app .oc-slide__solo{ left: auto; right: 40px; bottom: 64px; } } #oc-app .oc-hero__dots{ position: absolute; z-index: 3; left: 50%; bottom: 46px; transform: translateX(-50%); display: flex; gap: 6px; padding: 8px 10px; border-radius: 999px; background: rgba(15,23,42,.22); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } #oc-app .oc-hero__dots button{ width: 7px; height: 7px; border-radius: 99px; background: rgba(255,255,255,.55); transition: width .45s var(--oc-spring), background-color .3s; } #oc-app .oc-hero__dots button[aria-selected="true"]{ width: 24px; background: var(--oc-gold); } /* Быстрые действия */ #oc-app .oc-quick{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: -32px; position: relative; z-index: 4; max-width: 760px; } #oc-app .oc-quick__item{ display: grid; justify-items: center; gap: 6px; padding: 12px 4px 10px; border-radius: var(--oc-r-md); font-size: 12px; font-weight: 600; text-align: center; transition: transform .35s var(--oc-spring); --oc-glass-bg: linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,255,255,.55)); } #oc-app .oc-quick__item:active{ transform: scale(.95); } #oc-app .oc-quick__ic{ width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: rgba(15,23,42,.05); color: var(--oc-ink-2); transition: color .25s; } #oc-app .oc-quick__item:hover .oc-quick__ic{ color: var(--oc-gold-d); } @media (min-width: 768px) { #oc-app .oc-quick{ margin-left: 40px; } #oc-app .oc-quick__item{ font-size: 13px; padding: 14px 6px 12px; } } /* ---------- О клинике ---------- */ #oc-app .oc-about{ display: grid; gap: 28px; align-items: center; } @media (min-width: 960px) { #oc-app .oc-about{ grid-template-columns: 1.05fr .95fr; gap: 56px; } } #oc-app .oc-about__text .oc-prose{ margin-top: 16px; font-size: 17px; } #oc-app .oc-about__media{ border-radius: var(--oc-r-xl); overflow: hidden; box-shadow: var(--oc-shadow-lg); aspect-ratio: 4/3; } #oc-app .oc-about__media img{ width: 100%; height: 100% !important; object-fit: cover; } #oc-app .oc-stats{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 24px; } #oc-app .oc-stat{ padding: 16px 14px; border-radius: var(--oc-r-md); } #oc-app .oc-stat b{ display: block; font-size: clamp(22px, 3vw, 30px); font-weight: 800; letter-spacing: -.03em; color: var(--oc-gold-d); line-height: 1.1; } #oc-app .oc-stat span{ display: block; margin-top: 4px; font-size: 12.5px; color: var(--oc-muted); line-height: 1.3; } #oc-app .oc-adv{ display: grid; gap: 12px; margin-top: 28px; } @media (min-width: 768px) { #oc-app .oc-adv{ grid-template-columns: repeat(3, 1fr); } } #oc-app .oc-adv__item{ padding: 22px; border-radius: var(--oc-r-lg); } #oc-app .oc-adv__n{ display: inline-block; font-size: 13px; font-weight: 800; color: var(--oc-gold-d); margin-bottom: 10px; letter-spacing: .06em; } #oc-app .oc-adv__item p{ color: var(--oc-ink-2); font-weight: 500; } /* ---------- Карусели ---------- */ #oc-app .oc-rail{ display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px max(var(--oc-gutter), calc((100% - var(--oc-wrap)) / 2)) 24px; scroll-padding-inline: max(var(--oc-gutter), calc((100% - var(--oc-wrap)) / 2)); overscroll-behavior-x: contain; } #oc-app .oc-rail::-webkit-scrollbar{ display: none; } #oc-app .oc-wrap .oc-rail{ padding-inline: 0; scroll-padding-inline: 0; margin: 0 calc(var(--oc-gutter) * -1); padding: 6px var(--oc-gutter) 24px; scroll-padding-inline: var(--oc-gutter); } #oc-app .oc-rail > *{ scroll-snap-align: start; flex: none; } #oc-app .oc-rail-nav{ display: none; gap: 8px; } #oc-app .oc-rail-nav button:first-child .oc-i{ transform: rotate(180deg); } @media (min-width: 900px) { #oc-app .oc-rail-nav{ display: flex; } } /* Акции */ #oc-app .oc-promo{ width: min(84vw, 400px); border-radius: var(--oc-r-lg); overflow: hidden; display: flex; flex-direction: column; } #oc-app .oc-promo__img{ width: 100%; aspect-ratio: 3/2; object-fit: cover; } #oc-app .oc-promo__body{ padding: 18px 20px 20px; display: grid; gap: 10px; align-content: start; } #oc-app .oc-promo__body h3{ font-size: 19px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; } #oc-app .oc-promo__body p{ color: var(--oc-muted); font-size: 14.5px; } #oc-app .oc-promo .oc-badge{ justify-self: start; } /* ---------- Услуги ---------- */ #oc-app .oc-grid{ display: grid; gap: 12px; } #oc-app .oc-grid--services{ grid-template-columns: 1fr; } @media (min-width: 640px) { #oc-app .oc-grid--services{ grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { #oc-app .oc-grid--services{ grid-template-columns: repeat(4, 1fr); gap: 16px; } } #oc-app .oc-svc{ display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: var(--oc-r-lg); min-height: 220px; transition: transform .45s var(--oc-spring), box-shadow .3s var(--oc-ease); } #oc-app .oc-svc:hover{ transform: none; box-shadow: inset 0 1px 0 #fff, var(--oc-shadow-lg); } #oc-app .oc-svc:active{ transform: scale(.98); } #oc-app .oc-svc__ic{ width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: var(--oc-gold-d); background: linear-gradient(145deg, #fff, color-mix(in srgb, var(--oc-gold) 18%, white)); box-shadow: inset 0 1px 0 #fff, 0 6px 16px -8px color-mix(in srgb, var(--oc-gold) 90%, transparent); } #oc-app .oc-svc h3{ font-size: 18px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; margin-top: 6px; } #oc-app .oc-svc p{ color: var(--oc-muted); font-size: 14.5px; line-height: 1.5; flex: 1; } #oc-app .oc-svc__more{ display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: 14px; color: var(--oc-gold-d); } /* ---------- Врачи ---------- */ #oc-app .oc-rail--doctors .oc-doc{ width: min(70vw, 270px); } #oc-app .oc-doc{ position: relative; display: block; border-radius: var(--oc-r-xl); overflow: hidden; transition: transform .45s var(--oc-spring); } #oc-app .oc-doc:active{ transform: scale(.97); } #oc-app .oc-doc__photo, #oc-app .oc-docsheet__photo{ position: relative; display: block; aspect-ratio: 3/4; overflow: hidden; background: radial-gradient(120% 80% at 50% 0%, #fff, #E9EDF3); } #oc-app .oc-doc__photo img, #oc-app .oc-docsheet__photo img{ width: 100%; height: 100% !important; object-fit: cover; object-position: 50% 15%; transition: transform .8s var(--oc-ease); } #oc-app .oc-doc__photo.no-img::after, #oc-app .oc-docsheet__photo.no-img::after{ content: attr(data-initials); position: absolute; inset: 0; display: grid; place-items: center; font-size: 56px; font-weight: 700; letter-spacing: -.02em; color: var(--oc-gold-d); } #oc-app .oc-doc__info{ position: absolute; left: 8px; right: 8px; bottom: 8px; display: grid; gap: 4px; padding: 12px 14px 14px; border-radius: 15px; --oc-glass-bg: linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,.5)); } #oc-app .oc-doc__info .oc-pill{ justify-self: start; background: color-mix(in srgb, var(--oc-gold) 22%, white); color: #7A5F1F; } #oc-app .oc-doc__info strong{ font-size: 15.5px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; } #oc-app .oc-doc__info small{ font-size: 12.5px; color: var(--oc-muted); line-height: 1.3; } #oc-app .oc-docsheet{ display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: center; margin-bottom: 18px; } #oc-app .oc-docsheet__photo{ border-radius: 15px; } #oc-app .oc-docsheet__photo.no-img::after{ font-size: 32px; } #oc-app .oc-docsheet__role{ font-weight: 600; margin-bottom: 8px; color: var(--oc-ink-2); } #oc-app .oc-timeline{ display: grid; gap: 0; border-left: 2px solid color-mix(in srgb, var(--oc-gold) 35%, transparent); margin-left: 6px; } #oc-app .oc-timeline li{ position: relative; padding: 0 0 14px 20px; color: var(--oc-ink-2); font-size: 15px; } #oc-app .oc-timeline li::before{ content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 3px var(--oc-gold); } /* ---------- Цены ---------- */ #oc-app .oc-tabs{ position: relative; display: flex; gap: 2px; padding: 4px; border-radius: 999px; overflow-x: auto; scrollbar-width: none; margin-bottom: 14px; width: max-content; max-width: 100%; } #oc-app .oc-tabs::-webkit-scrollbar{ display: none; } #oc-app .oc-tabs button{ position: relative; z-index: 3; padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--oc-ink-2); white-space: nowrap; transition: color .3s; } #oc-app .oc-tabs button[aria-selected="true"]{ color: var(--oc-ink); } #oc-app .oc-tabs__thumb{ position: absolute !important; z-index: 2 !important; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 6px 16px -6px rgba(15,23,42,.25); transition: transform .5s var(--oc-spring), width .5s var(--oc-spring); } #oc-app .oc-plist{ border-radius: var(--oc-r-lg); padding: 6px 18px; animation: oc-fade .35s var(--oc-ease); } #oc-app .oc-plist--mini{ padding: 0; background: none; box-shadow: none; } #oc-app .oc-prow{ display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--oc-line); } #oc-app .oc-prow:last-child{ border-bottom: 0; } #oc-app .oc-prow__name span{ font-weight: 600; letter-spacing: -.01em; } #oc-app .oc-prow__name small{ display: block; color: var(--oc-muted); font-size: 13px; margin-top: 2px; } #oc-app .oc-prow__unit{ display: inline-block; margin-top: 4px; font-style: normal; font-size: 12px; color: var(--oc-muted); background: rgba(15,23,42,.05); padding: 2px 8px; border-radius: 999px; } #oc-app .oc-prow__price{ display: grid; justify-items: end; text-align: right; gap: 2px; } #oc-app .oc-prow__price b{ font-size: 17px; font-weight: 700; white-space: nowrap; letter-spacing: -.01em; } #oc-app .oc-prow__price s{ font-size: 13px; color: var(--oc-muted); } #oc-app .oc-prow__promo{ color: var(--oc-gold-d); } @media (max-width: 520px) { #oc-app .oc-prow{ grid-template-columns: 1fr; } #oc-app .oc-prow__price{ justify-items: start; text-align: left; grid-auto-flow: column; align-items: baseline; justify-content: start; gap: 8px; } } /* ---------- Оборудование ---------- */ #oc-app .oc-rail--eq .oc-eq{ width: min(78vw, 300px); } #oc-app .oc-eq{ border-radius: var(--oc-r-lg); padding: 10px 10px 18px; display: flex; flex-direction: column; gap: 8px; } #oc-app .oc-eq__img{ aspect-ratio: 4/3; border-radius: 18px; background: #fff; display: grid; place-items: center; overflow: hidden; margin-bottom: 4px; } #oc-app .oc-eq__img img{ width: 100%; height: 100% !important; object-fit: contain; padding: 10px; } #oc-app .oc-eq__kind{ padding: 0 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--oc-gold-d); } #oc-app .oc-eq h3{ padding: 0 8px; font-size: 17px; font-weight: 700; letter-spacing: -.01em; } #oc-app .oc-eq p{ padding: 0 8px; font-size: 14px; color: var(--oc-muted); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } /* ---------- Отзывы ---------- */ #oc-app .oc-grid--reviews{ grid-template-columns: 1fr; } @media (min-width: 640px) { #oc-app .oc-grid--reviews{ grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { #oc-app .oc-grid--reviews{ grid-template-columns: repeat(3, 1fr); gap: 16px; } } #oc-app .oc-video{ position: relative; display: block; width: 100%; aspect-ratio: 16/9; border-radius: var(--oc-r-lg); overflow: hidden; background: #0b1220; box-shadow: var(--oc-shadow); transition: transform .45s var(--oc-spring); } #oc-app .oc-video img{ width: 100%; height: 100% !important; object-fit: cover; opacity: .92; } #oc-app .oc-video__play{ position: absolute !important; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; color: #fff; --oc-glass-bg: rgba(255,255,255,.22); } #oc-app .oc-video__title{ position: absolute; left: 12px; bottom: 10px; right: 12px; color: #fff; font-weight: 600; font-size: 14px; text-shadow: 0 1px 4px rgba(0,0,0,.5); text-align: left; } #oc-app .oc-video iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ---------- FAQ ---------- */ #oc-app .oc-faq{ display: grid; gap: 10px; } #oc-app .oc-faq__item{ border-radius: var(--oc-r-md); } #oc-app .oc-faq__item summary{ list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 18px 20px; font-weight: 600; font-size: 16px; cursor: pointer; } #oc-app .oc-faq__item summary::-webkit-details-marker{ display: none; } #oc-app .oc-faq__item summary .oc-i{ transition: transform .4s var(--oc-spring); color: var(--oc-muted); } #oc-app .oc-faq__item[open] summary .oc-i{ transform: rotate(180deg); } #oc-app .oc-faq__a{ padding: 0 20px 18px; color: var(--oc-ink-2); } #oc-app .oc-faq__a ul{ display: grid; gap: 6px; } #oc-app .oc-faq__a li{ padding-left: 18px; position: relative; } #oc-app .oc-faq__a li::before{ content: ""; position: absolute; left: 2px; top: .65em; width: 6px; height: 6px; border-radius: 50%; background: var(--oc-gold); } /* ---------- Контакты ---------- */ #oc-app .oc-contacts{ display: grid; gap: 14px; } @media (min-width: 960px) { #oc-app .oc-contacts{ grid-template-columns: 1fr 1fr; gap: 20px; } } #oc-app .oc-ccard, #oc-app .oc-formcard{ border-radius: var(--oc-r-xl); padding: 22px; } @media (min-width: 768px) { #oc-app .oc-ccard, #oc-app .oc-formcard{ padding: 30px; } } #oc-app .oc-ccard__row{ display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--oc-line); } #oc-app .oc-ccard__row small{ display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--oc-muted); margin-bottom: 2px; } #oc-app .oc-ccard__row a{ display: block; font-weight: 600; } #oc-app .oc-ccard__ic{ width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--oc-gold) 16%, white); color: var(--oc-gold-d); } #oc-app .oc-ccard__btns{ display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; } #oc-app .oc-map{ aspect-ratio: 16/10; border-radius: var(--oc-r-lg); overflow: hidden; background: #E8ECF1; } #oc-app .oc-map iframe{ width: 100%; height: 100%; border: 0; display: block; } #oc-app .oc-formcard h3{ font-size: 24px; font-weight: 700; letter-spacing: -.02em; } /* ---------- Форма (WPForms / CF7 / Fluent) в стиле стекла — разметку и отправку не трогаем ---------- */ #oc-app .oc-form{ margin-top: 18px; } #oc-app :is(.oc-form, .oc-form-slot) .wpforms-container{ margin: 0 !important; } #oc-app :is(.oc-form, .oc-form-slot) .wpforms-field{ padding: 0 0 14px !important; } #oc-app :is(.oc-form, .oc-form-slot) .wpforms-field-label, #oc-app :is(.oc-form, .oc-form-slot) label{ font-size: 13px !important; font-weight: 600 !important; color: var(--oc-ink-2) !important; margin-bottom: 6px !important; } #oc-app :is(.oc-form, .oc-form-slot) input[type="text"], #oc-app :is(.oc-form, .oc-form-slot) input[type="tel"], #oc-app :is(.oc-form, .oc-form-slot) input[type="number"], #oc-app :is(.oc-form, .oc-form-slot) input[type="email"], #oc-app :is(.oc-form, .oc-form-slot) textarea, #oc-app :is(.oc-form, .oc-form-slot) select{ width: 100% !important; max-width: 100% !important; min-height: 52px; padding: 14px 16px !important; font: inherit !important; font-size: 16px !important; color: var(--oc-ink) !important; background: rgba(255,255,255,.75) !important; border: 1px solid rgba(15,23,42,.10) !important; border-radius: 16px !important; box-shadow: inset 0 1px 2px rgba(15,23,42,.05) !important; transition: border-color .2s, box-shadow .2s, background-color .2s; -moz-appearance: textfield; } #oc-app :is(.oc-form, .oc-form-slot) textarea{ min-height: 96px; resize: vertical; } #oc-app :is(.oc-form, .oc-form-slot) input:focus, #oc-app :is(.oc-form, .oc-form-slot) textarea:focus{ outline: none !important; background: #fff !important; border-color: var(--oc-gold) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--oc-gold) 25%, transparent) !important; } #oc-app :is(.oc-form, .oc-form-slot) input::-webkit-outer-spin-button, #oc-app :is(.oc-form, .oc-form-slot) input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; } #oc-app :is(.oc-form, .oc-form-slot) button[type="submit"], #oc-app :is(.oc-form, .oc-form-slot) input[type="submit"], #oc-app :is(.oc-form, .oc-form-slot) .wpforms-submit{ width: 100% !important; min-height: 54px !important; padding: 0 24px !important; border: 0 !important; border-radius: 999px !important; font: inherit !important; font-weight: 700 !important; font-size: 16px !important; color: #fff !important; background: linear-gradient(180deg, color-mix(in srgb, var(--oc-gold) 85%, white), var(--oc-gold) 55%, var(--oc-gold-d)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 10px 24px -10px color-mix(in srgb, var(--oc-gold) 90%, transparent) !important; cursor: pointer; transition: transform .35s var(--oc-spring), filter .2s; } #oc-app :is(.oc-form, .oc-form-slot) button[type="submit"]:active{ transform: scale(.97); } #oc-app :is(.oc-form, .oc-form-slot) .wpforms-confirmation-container-full, #oc-app :is(.oc-form, .oc-form-slot) .wpforms-confirmation-container{ background: color-mix(in srgb, var(--oc-wa) 12%, white) !important; border: 0 !important; border-radius: 18px !important; padding: 18px !important; color: var(--oc-ink) !important; } #oc-app :is(.oc-form, .oc-form-slot) label.wpforms-error, #oc-app :is(.oc-form, .oc-form-slot) em.wpforms-error{ color: #C2410C !important; font-size: 13px !important; } #oc-app :is(.oc-form, .oc-form-slot) .wpforms-field-hp, #oc-app :is(.oc-form, .oc-form-slot) [class*="-hp"]:not(input){ display: none !important; } #oc-app :is(.oc-form, .oc-form-slot) .wpforms-field-label, #oc-app :is(.oc-form, .oc-form-slot) .wpforms-field > label{ display: block !important; } #oc-app :is(.oc-form, .oc-form-slot) .wpforms-field-container, #oc-app :is(.oc-form, .oc-form-slot) .wpforms-submit-container{ display: block !important; padding: 0 !important; } #oc-app .oc-form-slot{ margin-top: 14px; } #oc-app .oc-form:empty::before{ content: "Форма не подключена — укажите шорткод формы в приложении (Города)."; color: var(--oc-muted); font-size: 14px; } #oc-app .oc-book-alt{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; } #oc-app .oc-book-alt .oc-btn{ flex: 1; } /* ---------- Подвал ---------- */ #oc-app .oc-footer{ margin-top: 80px; background: var(--oc-ink); color: rgba(255,255,255,.72); padding: 56px 0 calc(110px + env(safe-area-inset-bottom)); border-radius: 25px 25px 0 0; } @media (min-width: 1024px) { #oc-app .oc-footer{ padding-bottom: 40px; } } #oc-app .oc-footer__in{ display: grid; gap: 28px; } @media (min-width: 900px) { #oc-app .oc-footer__in{ grid-template-columns: 1.4fr 1fr 1fr 1fr; } } #oc-app .oc-footer__brand img{ height: 40px; width: auto; max-width: none; object-fit: contain; } #oc-app .oc-footer__brand p{ margin-top: 14px; font-size: 13px; max-width: 320px; } #oc-app .oc-footer h4{ color: #fff; font-size: 15px; font-weight: 700; margin-bottom: 10px; } #oc-app .oc-footer__col{ display: grid; gap: 6px; align-content: start; font-size: 14px; } #oc-app .oc-footer a:hover{ color: var(--oc-gold); } #oc-app .oc-footer__bottom{ margin-top: 36px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); font-size: 13px; } /* ---------- Нижняя панель вкладок (моб.) ---------- */ #oc-app .oc-tabbar{ position: fixed; z-index: 990; left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); height: 66px; max-width: 520px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; padding: 0 6px; border-radius: 999px; --oc-glass-bg: linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.42)); transition: transform .5s var(--oc-ease); } #oc-app .oc-tabbar a{ display: grid; justify-items: center; gap: 2px; padding: 8px 0; border-radius: 999px; font-size: 10.5px; font-weight: 600; color: var(--oc-muted); transition: color .25s, background-color .3s, transform .35s var(--oc-spring); } #oc-app .oc-tabbar a:active{ transform: scale(.9); } #oc-app .oc-tabbar a.is-active{ color: var(--oc-gold-d); background: rgba(255,255,255,.7); box-shadow: 0 1px 2px rgba(15,23,42,.06); } #oc-app .oc-tabbar a span{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } @media (min-width: 1024px) { #oc-app .oc-tabbar{ display: none; } } #oc-app.is-sheet .oc-tabbar{ transform: translateY(140%); } /* ---------- Плавающие кнопки ---------- */ #oc-app .oc-fabs{ position: fixed; z-index: 995; right: 14px; bottom: calc(max(10px, env(safe-area-inset-bottom)) + 78px); display: grid; gap: 10px; justify-items: end; } @media (min-width: 1024px) { #oc-app .oc-fabs{ bottom: 24px; right: 24px; } } #oc-app .oc-fab{ display: inline-flex; align-items: center; gap: 8px; height: 56px; min-width: 56px; padding: 0 15px; border-radius: 999px; justify-content: center; font-weight: 700; font-size: 14px; transition: transform .4s var(--oc-spring), box-shadow .3s; } #oc-app .oc-fab:active{ transform: scale(.92); } #oc-app .oc-fab--wa{ padding: 0 20px 0 16px; letter-spacing: .01em; color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--oc-gold) 82%, white), var(--oc-gold) 55%, var(--oc-gold-d)); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 12px 26px -10px color-mix(in srgb, var(--oc-gold) 90%, transparent); text-shadow: 0 1px 1px rgba(0,0,0,.12); } #oc-app .oc-fab--ai{ display: none; color: #fff; background: linear-gradient(180deg, #1f2937, var(--oc-ink)); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 12px 28px -10px rgba(15,23,42,.6); } #oc-app .oc-fab--ai .oc-i{ color: var(--oc-gold); } #oc-app .oc-fab--ai span{ display: inline; } @media (min-width: 1024px) { #oc-app .oc-fab--ai{ display: inline-flex; padding: 0 20px 0 16px; } } #oc-app.is-sheet .oc-fabs{ opacity: 0; pointer-events: none; transform: translateY(20px); } #oc-app .oc-fabs{ transition: opacity .3s, transform .4s var(--oc-ease); } /* ---------- Нижний лист (sheet) ---------- */ #oc-app .oc-sheet{ position: fixed; z-index: 100000; inset: 0; display: grid; align-items: end; } @media (min-width: 768px) { #oc-app .oc-sheet{ align-items: center; justify-items: center; padding: 24px; } } #oc-app .oc-sheet__scrim{ position: absolute; inset: 0; background: rgba(15,23,42,.32); -webkit-backdrop-filter: blur(6px) saturate(120%); backdrop-filter: blur(6px) saturate(120%); animation: oc-fade .35s var(--oc-ease); } #oc-app .oc-sheet__panel{ position: relative; width: 100%; max-height: 92dvh; display: flex; flex-direction: column; border-radius: 21px 21px 0 0; background: linear-gradient(170deg, rgba(255,255,255,.94), rgba(250,248,243,.9)); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); box-shadow: inset 0 1px 0 #fff, 0 -20px 60px -20px rgba(15,23,42,.35); animation: oc-up .5s var(--oc-ease); padding-bottom: env(safe-area-inset-bottom); will-change: transform; } @media (min-width: 768px) { #oc-app .oc-sheet__panel{ max-width: 680px; max-height: 88vh; border-radius: 22px; animation: oc-pop .45s var(--oc-spring); } } #oc-app .oc-sheet.is-closing .oc-sheet__scrim{ animation: oc-fade .3s reverse forwards; } #oc-app .oc-sheet.is-closing .oc-sheet__panel{ animation: oc-down .32s var(--oc-ease) forwards; } @media (min-width: 768px) { #oc-app .oc-sheet.is-closing .oc-sheet__panel{ animation: oc-fade .25s reverse forwards; } } #oc-app .oc-sheet__grab{ width: 40px; height: 5px; border-radius: 9px; background: rgba(15,23,42,.18); margin: 8px auto 0; flex: none; touch-action: none; } @media (min-width: 768px) { #oc-app .oc-sheet__grab{ display: none; } } #oc-app .oc-sheet__head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px 10px 22px; flex: none; touch-action: none; } #oc-app .oc-sheet__head h3{ font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; } #oc-app .oc-sheet__head .oc-round{ flex: none; --oc-glass-bg: rgba(15,23,42,.06); box-shadow: none; } #oc-app .oc-sheet__head .oc-round::before, #oc-app .oc-sheet__head .oc-round::after{ display: none; } #oc-app .oc-sheet__body{ overflow-y: auto; overscroll-behavior: contain; padding: 4px 22px 24px; -webkit-overflow-scrolling: touch; } #oc-app .oc-sheet__body > .oc-sub:first-child{ margin-top: 0; } #oc-app .oc-sheet__hero{ width: 100%; border-radius: 20px; margin-bottom: 16px; aspect-ratio: 16/9; object-fit: cover; } #oc-app .oc-sheet__cta{ position: sticky; bottom: -24px; margin: 18px -22px -24px; padding: 14px 22px 22px; background: linear-gradient(180deg, rgba(250,248,243,0), rgba(250,248,243,.96) 30%); } #oc-app .oc-sheet__body h4{ font-size: 18px; font-weight: 700; margin: 22px 0 6px; } @media (max-width: 639px) { } @media (min-width: 640px) { } /* ---------- Анимации ---------- */ @keyframes oc-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes oc-up { from { transform: translateY(100%); } to { transform: none; } } @keyframes oc-down { to { transform: translateY(105%); } } @keyframes oc-pop { from { opacity: 0; transform: scale(.92) translateY(16px); } to { opacity: 1; transform: none; } } @keyframes oc-drop { from { opacity: 0; transform: translateY(-14px) scale(.97); } to { opacity: 1; transform: none; } } @keyframes oc-msg { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } } @keyframes oc-dot { 0%, 80%, 100% { transform: scale(.6); opacity: .4; } 40% { transform: scale(1); opacity: 1; } } #oc-app .oc-reveal{ opacity: 1; } #oc-app .oc-reveal.is-in{ opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { #oc-app *, #oc-app *::before, #oc-app *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } #oc-app .oc-reveal{ opacity: 1; transform: none; } } /* Блокировка прокрутки при открытом листе */ html.oc-lock, html.oc-lock body { overflow: hidden !important; } /* ======================= v1.2: страницы, меню, отзывы ======================= */ /* Выпадающие меню (компьютер) */ #oc-app .oc-nav{ align-items: center; } #oc-app .oc-nav a{ display: inline-flex; align-items: center; gap: 4px; transition: background-color .25s, color .25s; } #oc-app .oc-nav a .oc-i{ opacity: .6; transition: transform .35s var(--oc-spring); } #oc-app .oc-nav__dd{ position: relative; } #oc-app .oc-nav__dd:hover > a .oc-i, #oc-app .oc-nav__dd:focus-within > a .oc-i{ transform: rotate(180deg); } #oc-app .oc-nav__panel{ position: absolute !important; top: calc(100% + 10px); left: 50%; z-index: 5 !important; min-width: 250px; padding: 8px; border-radius: 15px; display: grid; gap: 2px; opacity: 0; visibility: hidden; transform: translate(-50%, -6px) scale(.98); transition: opacity .25s var(--oc-ease), transform .35s var(--oc-spring), visibility .25s; } #oc-app .oc-nav__dd::after{ content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; } #oc-app .oc-nav__dd:hover .oc-nav__panel, #oc-app .oc-nav__dd:focus-within .oc-nav__panel{ opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); } #oc-app .oc-nav__panel a{ display: block; padding: 10px 14px; border-radius: 14px; font-size: 14.5px; font-weight: 500; color: var(--oc-ink-2); white-space: nowrap; } #oc-app .oc-nav__panel a:hover, #oc-app .oc-nav__panel a.is-active{ background: color-mix(in srgb, var(--oc-gold) 12%, white); color: var(--oc-gold-d); box-shadow: none; } /* Заголовок отдельной страницы */ #oc-app .oc-pagehead{ padding-top: 26px; } @media (min-width: 900px) { #oc-app .oc-pagehead{ padding-top: 40px; } } #oc-app .oc-crumbs{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--oc-muted); margin-bottom: 14px; } #oc-app .oc-crumbs a{ color: var(--oc-muted); transition: color .25s; } #oc-app .oc-crumbs a:hover{ color: var(--oc-gold-d); } #oc-app .oc-crumbs b{ font-weight: 600; color: var(--oc-ink-2); } #oc-app .oc-pagehead__row{ display: flex; align-items: center; gap: 18px; } #oc-app .oc-pagehead__ic{ flex: none; width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; color: var(--oc-gold-d); background: linear-gradient(145deg, #fff, color-mix(in srgb, var(--oc-gold) 18%, white)); box-shadow: inset 0 1px 0 #fff, 0 10px 24px -12px color-mix(in srgb, var(--oc-gold) 90%, transparent); } #oc-app .oc-h1{ font-size: clamp(30px, 5vw, 54px); line-height: 1.05; font-weight: 700; letter-spacing: -.035em; text-wrap: balance; } #oc-app .oc-section--first{ padding-top: 28px; } #oc-app .oc-more{ margin-top: 18px; } /* Страница услуги */ #oc-app .oc-svcpage{ display: grid; gap: 16px; align-items: start; } @media (min-width: 1000px) { #oc-app .oc-svcpage{ grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; } } #oc-app .oc-svcpage__body{ border-radius: var(--oc-r-xl); padding: 24px; font-size: 16.5px; } @media (min-width: 768px) { #oc-app .oc-svcpage__body{ padding: 36px 40px; } } #oc-app .oc-svcpage__body .oc-prose h4:first-child{ margin-top: 0; } #oc-app .oc-svcpage__side{ position: sticky; top: calc(var(--oc-header-h) + 24px); } #oc-app .oc-svcpage__card{ border-radius: var(--oc-r-xl); padding: 22px; display: grid; gap: 10px; } #oc-app .oc-svcpage__card h3{ font-size: 18px; font-weight: 700; } #oc-app .oc-svcpage__card .oc-plist{ margin-bottom: 6px; } /* Сетки на отдельных страницах */ #oc-app .oc-grid--doctors{ display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 760px) { #oc-app .oc-grid--doctors{ grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1100px) { #oc-app .oc-grid--doctors{ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } } #oc-app .oc-grid--doctors .oc-doc__info{ left: 6px; right: 6px; bottom: 6px; padding: 10px 12px; } @media (max-width: 520px) { #oc-app .oc-grid--doctors .oc-doc__info strong{ font-size: 13.5px; } #oc-app .oc-grid--doctors .oc-doc__info small{ display: none; } } #oc-app .oc-grid--eq{ display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } #oc-app .oc-grid--eq .oc-eq p{ -webkit-line-clamp: unset; display: block; } #oc-app .oc-grid--promos{ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; } #oc-app .oc-grid--promos .oc-promo{ width: auto; } /* Отзывы: горизонтальная лента + полоски (активная длинная и золотая) */ #oc-app .oc-rail--reviews .oc-video{ width: min(86vw, 560px); flex: none; } #oc-app .oc-bars{ display: flex; justify-content: center; gap: 6px; margin-top: 2px; padding: 0 var(--oc-gutter); } #oc-app .oc-bars button{ width: 16px; height: 4px; border-radius: 4px; background: rgba(15,23,42,.14); transition: width .5s var(--oc-spring), background-color .3s; } #oc-app .oc-bars button[aria-selected="true"]{ width: 44px; background: linear-gradient(90deg, color-mix(in srgb, var(--oc-gold) 80%, white), var(--oc-gold-d)); } #oc-app .oc-bars button:hover{ background: color-mix(in srgb, var(--oc-gold) 55%, transparent); } /* Нижняя панель: ИИ по центру */ #oc-app .oc-tabbar__ai{ display: grid; justify-items: center; gap: 2px; font-size: 10.5px; font-weight: 700; color: var(--oc-gold-d); } #oc-app .oc-tabbar__orb{ width: 46px; height: 46px; margin-top: -22px; border-radius: 50%; display: grid; place-items: center; color: var(--oc-gold); background: linear-gradient(180deg, #1f2937, var(--oc-ink)); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 10px 22px -8px rgba(15,23,42,.6), 0 0 0 4px rgba(255,255,255,.85); transition: transform .35s var(--oc-spring); } #oc-app .oc-tabbar__ai:active .oc-tabbar__orb{ transform: scale(.9); } #oc-app .oc-tabbar a:hover{ color: var(--oc-gold-d); } #oc-app .oc-tabbar{ overflow: visible; } /* v1.2 правки: читаемое выпадающее меню, отступы на баннере, компактная кнопка WhatsApp на телефоне */ #oc-app .oc-nav__panel{ --oc-glass-bg: linear-gradient(160deg, rgba(255,255,255,.97), rgba(250,248,243,.95)); box-shadow: inset 0 1px 0 #fff, 0 24px 50px -18px rgba(15,23,42,.35); } #oc-app .oc-slide__solo{ bottom: 96px; } @media (min-width: 768px) { #oc-app .oc-slide__solo{ bottom: 64px; } } @media (max-width: 1023px) { #oc-app .oc-fab{ height: 48px; font-size: 13.5px; } #oc-app .oc-fab--wa{ padding: 0 16px 0 13px; } } /* ======================= v1.3: скорость, баннер, кнопки ======================= */ /* Телефоны/планшеты: стекло без «живого» размытия у карточек внутри страницы (размытие — только у шапки, панели и кнопок) */ @media (max-width: 1023px), (hover: none) { #oc-app .oc-main .oc-glass, #oc-app .oc-footer .oc-glass{ -webkit-backdrop-filter: none !important; backdrop-filter: none !important; --oc-glass-bg: linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.76)); } #oc-app .oc-header__bar, #oc-app .oc-tabbar{ -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%); } #oc-app .oc-sheet__scrim{ -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(15,23,42,.4); } #oc-app .oc-menu{ -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(247,245,240,.6); } } #oc-app .oc-hero__track{ contain: paint; } #oc-app .oc-slide{ contain: layout paint; } #oc-app .oc-slide__img{ will-change: auto; } #oc-app .oc-slide--image{ background: radial-gradient(120% 120% at 30% 40%, #3b4a6b, #0b1220); } /* Баннер: текст плавно исчезает через 3,5 с, остаются кнопки — картинку (например, машину) видно целиком */ #oc-app .oc-slide__text{ transition: opacity .9s var(--oc-ease), transform .9s var(--oc-ease); } #oc-app .oc-slide__card{ transition: background-color .9s var(--oc-ease), box-shadow .9s var(--oc-ease); } #oc-app .oc-slide.is-quiet .oc-slide__text{ opacity: 0; transform: translateY(6px); pointer-events: none; } #oc-app .oc-slide.is-quiet .oc-slide__card{ background-color: rgba(15,23,42,0); box-shadow: none; } /* Кнопки — всегда в один ряд */ #oc-app .oc-slide__actions{ flex-wrap: nowrap; margin-top: 14px; } #oc-app .oc-slide__actions .oc-btn{ flex: 0 1 auto; } #oc-app .oc-slide__solo{ display: flex; gap: 10px; } #oc-app .oc-row--nowrap{ flex-wrap: nowrap; } #oc-app .oc-sheet__cta.oc-row{ display: flex; gap: 10px; } #oc-app .oc-sheet__cta.oc-row .oc-btn{ flex: 1; } @media (max-width: 380px) { #oc-app .oc-slide__actions .oc-btn{ padding: 0 12px; font-size: 13px; } } #oc-app .oc-btn--gold, #oc-app .oc-btn--gold:hover, #oc-app .oc-btn--gold:focus, #oc-app .oc-btn--gold:active, #oc-app .oc-btn--gold:visited, #oc-app .oc-btn--ghost, #oc-app .oc-btn--ghost:hover, #oc-app .oc-btn--ghost:focus, #oc-app .oc-btn--ghost:active, #oc-app .oc-fab--wa, #oc-app .oc-fab--wa:hover, #oc-app .oc-fab--wa:focus, #oc-app .oc-fab--wa:active, #oc-app .oc-fab--ai, #oc-app .oc-fab--ai:hover, #oc-app .oc-fab--ai:focus, #oc-app .oc-fab--ai:active{ color: #fff !important; } #oc-app .oc-btn--glass, #oc-app .oc-btn--glass:hover, #oc-app .oc-btn--glass:focus, #oc-app .oc-btn--glass:active{ color: var(--oc-ink) !important; } #oc-app .oc-btn--wa, #oc-app .oc-btn--wa:hover, #oc-app .oc-btn--wa:focus, #oc-app .oc-btn--wa:active{ color: var(--oc-gold-d) !important; } #oc-app .oc-btn:hover, #oc-app .oc-btn:focus, #oc-app .oc-btn:active{ text-decoration: none !important; border-color: transparent; outline-color: color-mix(in srgb, var(--oc-gold) 70%, white); } #oc-app .oc-btn--gold:hover, #oc-app .oc-btn--gold:focus{ background-color: var(--oc-gold) !important; } #oc-app .oc-btn--ghost:hover, #oc-app .oc-btn--ghost:focus{ background-color: rgba(255,255,255,.2) !important; } /* Плавающие кнопки ровно, одинаковой ширины, по краю нижней панели */ #oc-app .oc-fabs{ right: 10px; justify-items: stretch; } @media (min-width: 1024px) { #oc-app .oc-fabs{ right: 24px; } #oc-app .oc-fab{ width: 220px; height: 54px; justify-content: center; } } #oc-app .oc-fab{ justify-content: center; } /* Подпись разработчика в подвале */ #oc-app .oc-footer__bottom{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; } #oc-app .oc-dev{ color: rgba(255,255,255,.55); transition: color .25s; } #oc-app .oc-dev b{ color: var(--oc-gold); font-weight: 700; } #oc-app .oc-dev:hover{ color: #fff; } /* v1.3: жёсткий сброс стилей темы (Astra/Elementor) для элементов внутри сайта */ #oc-app :where(button){ padding: 0; margin: 0; border: 0; background: none; background-color: transparent; color: inherit; font: inherit; line-height: inherit; text-transform: none; letter-spacing: inherit; border-radius: 0; box-shadow: none; min-height: 0; width: auto; text-shadow: none; outline-offset: 2px; } #oc-app :where(button:hover, button:focus, button:active){ background-color: transparent; color: inherit; border: 0; box-shadow: none; } #oc-app :where(a:hover, a:focus){ color: inherit; text-decoration: none; } #oc-app :where(h1, h2, h3, h4){ line-height: 1.2; font-weight: 700; } @media (min-width: 640px) { } @media (min-width: 640px) { } @keyframes oc-caret { 50% { opacity: 0; } } /* Кнопки WhatsApp и ИИ: иконки и надписи стоят по одной линии */ #oc-app .oc-fabs { justify-items: stretch; } #oc-app .oc-fab { justify-content: flex-start; gap: 10px; padding: 0 18px; white-space: nowrap; } #oc-app .oc-fab .oc-i { flex: none; width: 22px; height: 22px; } #oc-app .oc-fab span { line-height: 1; } @media (min-width: 1024px) { #oc-app .oc-fab { width: 230px; padding: 0 22px; } } @media (max-width: 1023px) { #oc-app .oc-fab--wa { padding: 0 16px; } } #oc-app .oc-fab--wa { transition: width .45s var(--oc-spring), padding .45s var(--oc-spring), opacity .3s; overflow: hidden; } #oc-app .oc-fab--wa.is-compact { width: 52px; min-width: 52px; height: 52px; padding: 0; justify-content: center; justify-self: end; } #oc-app .oc-fab--wa.is-compact span { display: none; } @media (min-width: 1024px) { #oc-app .oc-fab--wa.is-compact { width: 54px; height: 54px; } } /* ======================= v1.6 ======================= */ /* Врачи: одинаковый белый блок у всех — стаж, ФИО (2 строки), должность, кратко из описания */ #oc-app .oc-doc__info { height: 150px; grid-template-rows: auto 2.5em 1.3em 2.6em; align-content: start; gap: 4px; overflow: hidden; } #oc-app .oc-doc__info strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; } #oc-app .oc-doc__info small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; } #oc-app .oc-doc__bio { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-style: normal; font-size: 11.5px; line-height: 1.3; color: var(--oc-muted); } #oc-app .oc-doc__info .oc-pill:only-child, #oc-app .oc-doc__info > :empty { min-height: 0; } @media (max-width: 520px) { #oc-app .oc-grid--doctors .oc-doc__info { height: 132px; grid-template-rows: auto 2.5em 1.3em; } #oc-app .oc-grid--doctors .oc-doc__bio { display: none; } #oc-app .oc-grid--doctors .oc-doc__info small { display: block; } } /* Баннер: при исчезновении текста кнопки не «прыгают» — их вид не зависит от фона */ #oc-app .oc-slide__actions .oc-btn--ghost { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: rgba(15,23,42,.38); box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); } #oc-app .oc-slide__actions .oc-btn { transition: transform .35s var(--oc-spring); text-shadow: none; } #oc-app .oc-slide__text { transition: opacity 1.1s var(--oc-ease); transform: none !important; } #oc-app .oc-slide__card { transition: background-color 1.1s var(--oc-ease), box-shadow 1.1s var(--oc-ease); } /* Частые вопросы на компьютере — в два столбца */ @media (min-width: 1024px) { #oc-app #faq .oc-faq { grid-template-columns: 1fr 1fr; align-items: start; gap: 12px 16px; } #oc-app #faq .oc-head { max-width: none; } } /* Видео‑отзывы — вертикальные, как Shorts */ #oc-app .oc-rail--reviews .oc-video { width: min(46vw, 230px); aspect-ratio: 9 / 16; border-radius: var(--oc-r-lg); } #oc-app .oc-rail--reviews .oc-video img { object-fit: cover; object-position: center; transform: scale(1.34); } #oc-app .oc-rail--reviews .oc-video__play { width: 56px; height: 56px; } /* Индикатор под отзывами — точно как у баннера */ #oc-app .oc-bars { width: max-content; margin: 4px auto 0; display: flex; gap: 6px; padding: 8px 10px; border-radius: 999px; background: rgba(15,23,42,.22); } #oc-app .oc-bars button { width: 7px; height: 7px; border-radius: 99px; background: rgba(255,255,255,.75); transition: width .45s var(--oc-spring), background-color .3s; } #oc-app .oc-bars button[aria-selected="true"] { width: 24px; background: var(--oc-gold); } /* ======================= v1.7 ======================= */ /* Без выделения текста и меню долгого нажатия (кроме полей ввода) */ #oc-app { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: pan-x pan-y; } #oc-app :is(input, textarea, select, .oc-form, .oc-form-slot, .oc-form *, .oc-form-slot *) { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; } #oc-app img { -webkit-user-drag: none; } /* Блики на кнопке ИИ: светлая линия слева сверху, потусклее — справа снизу */ #oc-app .oc-tabbar__orb, #oc-app .oc-fab--ai { position: relative; overflow: hidden; } #oc-app .oc-tabbar__orb::before, #oc-app .oc-fab--ai::before, #oc-app .oc-tabbar__orb::after, #oc-app .oc-fab--ai::after { content: ""; position: absolute; inset: 2px; border-radius: inherit; pointer-events: none; border: 1.5px solid transparent; } #oc-app .oc-tabbar__orb::before, #oc-app .oc-fab--ai::before { border-top-color: rgba(255,255,255,.6); border-left-color: rgba(255,255,255,.6); -webkit-mask: linear-gradient(135deg, #000 0%, #000 28%, transparent 46%); mask: linear-gradient(135deg, #000 0%, #000 28%, transparent 46%); } #oc-app .oc-tabbar__orb::after, #oc-app .oc-fab--ai::after { border-bottom-color: rgba(255,255,255,.28); border-right-color: rgba(255,255,255,.28); -webkit-mask: linear-gradient(135deg, transparent 66%, #000 82%); mask: linear-gradient(135deg, transparent 66%, #000 82%); } /* WhatsApp: плавное сворачивание/разворачивание */ #oc-app .oc-fab--wa span { display: inline-block; max-width: 140px; opacity: 1; overflow: hidden; white-space: nowrap; transition: max-width .55s var(--oc-ease), opacity .35s var(--oc-ease), margin .55s var(--oc-ease); } #oc-app .oc-fab--wa { transition: width .55s var(--oc-ease), padding .55s var(--oc-ease), gap .55s var(--oc-ease), box-shadow .3s; } #oc-app .oc-fab--wa.is-compact span { display: inline-block; max-width: 0; opacity: 0; margin: 0; } #oc-app .oc-fab--wa.is-compact { gap: 0; padding: 0 15px; width: auto; min-width: 0; } @media (min-width: 1024px) { #oc-app .oc-fab--wa.is-compact { width: 54px; padding: 0 16px; } } /* Нижнее меню: выделение-«ползунок» */ #oc-app .oc-tabbar { position: fixed; } #oc-app .oc-tabbar a.is-active { background: transparent; box-shadow: none; } #oc-app .oc-tabbar__ind { position: absolute !important; z-index: 1 !important; left: 0; top: 8px; bottom: 8px; width: 0; border-radius: 999px; background: rgba(255,255,255,.85); box-shadow: 0 1px 2px rgba(15,23,42,.08); opacity: 0; transition: transform .28s var(--oc-ease), width .28s var(--oc-ease), opacity .2s; pointer-events: none; } #oc-app .oc-tabbar > a, #oc-app .oc-tabbar > button { position: relative; z-index: 2; transition: color .25s; } /* Загрузка страницы: вращающиеся дуги и «моргающий» зрачок из логотипа */ #oc-app .oc-loader { position: fixed; z-index: 100002; inset: 0; display: grid; place-items: center; background: rgba(247,245,240,.72); color: var(--oc-gold); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; } #oc-app .oc-loader.is-on { opacity: 1; visibility: visible; } #oc-app .oc-loader__ring { transform-origin: 24px 24px; animation: oc-spin 1.1s cubic-bezier(.5,.1,.5,.9) infinite; } #oc-app .oc-loader__dot { transform-origin: 24px 24px; animation: oc-blink 1.1s ease-in-out infinite; } @keyframes oc-spin { to { transform: rotate(360deg); } } @keyframes oc-blink { 0%, 100% { transform: scale(1); } 50% { transform: scale(.55); } } /* Плавная смена страниц в современных браузерах (шапка и нижнее меню остаются на месте) */ @view-transition { navigation: auto; } #oc-app .oc-tabbar { view-transition-name: oc-tabbar; } #oc-app .oc-header { view-transition-name: oc-header; } /* v1.8.1: шапка и нижнее меню — одинаковое матовое стекло (без преломления) */ #oc-app .oc-header__bar.oc-glass, #oc-app .oc-tabbar.oc-glass { --oc-glass-bg: linear-gradient(135deg, rgba(250,249,246,.9), rgba(246,244,239,.84)) !important; background: var(--oc-glass-bg) !important; -webkit-backdrop-filter: blur(24px) saturate(160%) !important; backdrop-filter: blur(24px) saturate(160%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 .5px rgba(255,255,255,.5), 0 10px 30px -12px rgba(15,23,42,.22) !important; } #oc-app .oc-header__bar.oc-glass::after, #oc-app .oc-tabbar.oc-glass::after { display: none; } /* ================= v1.10 ================= */ /* Слайд: нажатие на картинку прячет текст */ #oc-app .oc-slide{ cursor: pointer; } #oc-app .oc-slide__text{ transition: opacity .45s var(--oc-ease), transform .45s var(--oc-ease); } /* WhatsApp уходит за край экрана */ #oc-app .oc-wa-edge{ all: unset; box-sizing: border-box; position: fixed; z-index: 996; right: 0; top: 50%; width: 26px; height: 60px; margin-top: -30px; cursor: pointer; -webkit-tap-highlight-color: transparent; opacity: 0; pointer-events: none; transform: translateX(10px); transition: opacity .4s var(--oc-ease) .25s, transform .5s var(--oc-ease) .25s; } #oc-app .oc-wa-edge::after{ content: ""; position: absolute; right: 0; top: 8px; bottom: 8px; width: 5px; border-radius: 5px 0 0 5px; background: linear-gradient(180deg, color-mix(in srgb, var(--oc-gold) 70%, white), var(--oc-gold) 50%, var(--oc-gold-d)); box-shadow: 0 0 10px color-mix(in srgb, var(--oc-gold) 70%, transparent); transition: width .3s var(--oc-ease); } #oc-app .oc-wa-edge.is-on{ opacity: 1; pointer-events: auto; transform: none; } #oc-app .oc-wa-edge:hover::after{ width: 8px; } #oc-app.is-sheet .oc-wa-edge{ opacity: 0; pointer-events: none; } /* Переключатели города/языка: белая подложка переезжает, как во вкладках цен */ #oc-app .oc-seg.has-thumb{ position: relative; } #oc-app .oc-seg__thumb{ position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0; width: 0; opacity: 0; border-radius: 999px; background: #fff; pointer-events: none; box-shadow: 0 1px 1px rgba(15,23,42,.06), 0 4px 12px -4px rgba(15,23,42,.2); transition: transform .5s var(--oc-spring), width .5s var(--oc-spring); } #oc-app .oc-seg.has-thumb .oc-seg__opt{ position: relative; z-index: 1; } #oc-app .oc-seg.has-thumb .oc-seg__opt.is-on{ background: transparent; box-shadow: none; } /* Подсказки при первом визите — светлое матовое стекло */ #oc-app .oc-tip{ position: fixed; inset: 0; z-index: 1200; pointer-events: none; } #oc-app .oc-tip[hidden]{ display: none; } #oc-app .oc-tip__bubble{ position: fixed; box-sizing: border-box; padding: 14px 16px 12px; border-radius: 18px; color: var(--oc-ink); font-size: 14.5px; line-height: 1.45; font-weight: 500; background: rgba(248,248,250,.72); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6); border: 1px solid rgba(255,255,255,.85); box-shadow: 0 18px 40px -16px rgba(15,23,42,.35), 0 0 0 1px color-mix(in srgb, var(--oc-gold) 25%, transparent), inset 0 1px 0 rgba(255,255,255,.9); opacity: 0; transform: translateY(8px) scale(.96); transition: opacity .35s var(--oc-ease), transform .45s var(--oc-spring); } #oc-app .oc-tip.is-down .oc-tip__bubble{ transform: translateY(-8px) scale(.96); } #oc-app .oc-tip.is-on .oc-tip__bubble{ opacity: 1; transform: none; } #oc-app .oc-tip__bubble::after{ content: ""; position: absolute; left: var(--ax, 50%); width: 14px; height: 14px; margin-left: -7px; background: rgb(246,246,248); transform: rotate(45deg); border: 1px solid rgba(255,255,255,.85); } #oc-app .oc-tip.is-up .oc-tip__bubble::after{ bottom: -8px; border-top: 0; border-left: 0; box-shadow: 3px 3px 6px -3px rgba(15,23,42,.18); } #oc-app .oc-tip.is-down .oc-tip__bubble::after{ top: -8px; border-bottom: 0; border-right: 0; } #oc-app .oc-tip__tap{ display: block; margin-top: 8px; font-size: 12px; font-weight: 500; color: rgba(15,23,42,.5); } #oc-app .oc-tip__demo{ margin-top: 10px; } #oc-app .oc-tip__demo[hidden]{ display: none; } #oc-app .oc-tip__seg{ position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 999px; background: rgba(15,23,42,.07); box-shadow: inset 0 1px 2px rgba(15,23,42,.06); } #oc-app .oc-tip__seg b{ position: relative; z-index: 1; padding: 6px 16px; font-size: 13px; font-weight: 600; text-align: center; animation: oc-tip-txt 3s var(--oc-ease) infinite; } #oc-app .oc-tip__seg b + b{ animation-name: oc-tip-txt2; } #oc-app .oc-tip__seg i{ position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px; background: #fff; box-shadow: 0 1px 1px rgba(15,23,42,.06), 0 4px 12px -4px rgba(15,23,42,.25); animation: oc-tip-thumb 3s var(--oc-spring) infinite; } @keyframes oc-tip-thumb{ 0%, 30%{ transform: translateX(0); } 45%, 80%{ transform: translateX(100%); } 95%, 100%{ transform: translateX(0); } } @keyframes oc-tip-txt{ 0%, 30%{ color: var(--oc-ink); } 45%, 80%{ color: rgba(15,23,42,.45); } 95%, 100%{ color: var(--oc-ink); } } @keyframes oc-tip-txt2{ 0%, 30%{ color: rgba(15,23,42,.45); } 45%, 80%{ color: var(--oc-gold-d); } 95%, 100%{ color: rgba(15,23,42,.45); } } #oc-app .is-tip-target{ animation: oc-tip-pulse 1.6s var(--oc-ease) infinite; border-radius: 999px; } @keyframes oc-tip-pulse{ 0%{ box-shadow: 0 0 0 0 color-mix(in srgb, var(--oc-gold) 70%, transparent); } 100%{ box-shadow: 0 0 0 14px color-mix(in srgb, var(--oc-gold) 0%, transparent); } } @media (prefers-reduced-motion: reduce) { #oc-app .oc-tip__seg i, #oc-app .oc-tip__seg b, #oc-app .is-tip-target{ animation: none; } } /* ================= v1.10.2 ================= */ /* Шапка и нижнее меню — одинаковое плотное матовое стекло, без тени */ #oc-app .oc-header__bar.oc-glass, #oc-app .oc-tabbar.oc-glass, #oc-app .oc-header.is-scrolled .oc-header__bar.oc-glass { --oc-glass-bg: linear-gradient(135deg, rgba(248,247,244,.82), rgba(244,242,237,.76)) !important; background: var(--oc-glass-bg) !important; -webkit-backdrop-filter: blur(30px) saturate(180%) !important; backdrop-filter: blur(30px) saturate(180%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.55), 0 0 0 .5px rgba(15,23,42,.06) !important; } #oc-app .oc-header__bar.oc-glass::before, #oc-app .oc-tabbar.oc-glass::before, #oc-app .oc-header__bar.oc-glass::after, #oc-app .oc-tabbar.oc-glass::after { display: none !important; } #oc-app .oc-header__bar canvas, #oc-app .oc-tabbar canvas { display: none !important; } /* WhatsApp плавно уезжает и превращается в золотую линию */ #oc-app .oc-fab--wa{ transition: transform .9s cubic-bezier(.65,0,.35,1), opacity .35s ease .65s, box-shadow .3s !important; } #oc-app .oc-fab--wa.is-tucked{ transform: translateX(calc(100% + 30px)); opacity: 0; pointer-events: none; } #oc-app .oc-wa-edge{ opacity: 1 !important; transform: none !important; transition: none !important; pointer-events: none; } #oc-app .oc-wa-edge::after{ transform: scaleY(0); opacity: 0; transform-origin: 50% 50%; transition: transform .25s cubic-bezier(.65,0,.35,1), opacity .2s, width .3s var(--oc-ease); } #oc-app .oc-wa-edge.is-on{ pointer-events: auto; } #oc-app .oc-wa-edge.is-on::after{ transform: scaleY(1); opacity: 1; transition: transform .5s cubic-bezier(.34,1.3,.64,1) .6s, opacity .3s ease .6s, width .3s var(--oc-ease); } #oc-app.is-sheet .oc-wa-edge::after{ opacity: 0; } /* Переключение языка/города: меню остаётся открытым, пока новая страница не загрузится */ #oc-app .oc-menu.is-instant, #oc-app .oc-menu.is-instant .oc-menu__panel{ animation: none !important; } #oc-app .oc-menu.is-leaving{ animation: none; opacity: 0; transition: opacity .4s var(--oc-ease); } #oc-app .oc-menu.is-leaving .oc-menu__panel{ animation: none; transform: translateY(-8px) scale(.98); transition: transform .4s var(--oc-ease); } /* Размытие шапки: «view-transition-name» на обёртке отключал матовость — переносим на саму плашку */ #oc-app .oc-header { view-transition-name: none; } #oc-app .oc-header__bar { view-transition-name: oc-header; } /* v1.10.3 — компьютер: кнопки WhatsApp и «Оскар» по размеру текста, WhatsApp не прячется */ @media (min-width: 1024px) { #oc-app .oc-fabs{ justify-items: end; } #oc-app .oc-fab, #oc-app .oc-fab--wa, #oc-app .oc-fab--ai{ width: auto !important; min-width: 0; height: 46px; padding: 0 18px 0 15px !important; gap: 8px; font-size: 14px; justify-content: flex-start; justify-self: end; } #oc-app .oc-fab--wa.is-tucked{ transform: none; opacity: 1; pointer-events: auto; } #oc-app .oc-wa-edge{ display: none !important; } } /* v1.10.4 — компьютер: обе кнопки одной ширины (по самой длинной — WhatsApp), текст слева */ @media (min-width: 1024px) { #oc-app .oc-fabs{ justify-items: stretch; width: max-content; } #oc-app .oc-fab, #oc-app .oc-fab--wa, #oc-app .oc-fab--ai{ justify-self: stretch; justify-content: flex-start; text-align: left; } } /* ================= v1.10.5 ================= */ /* Анимированные иконки услуг */ #oc-app .oc-si *{ transform-box: fill-box; transform-origin: center; } #oc-app .oc-si .si-blink{ animation: si-blink 4.2s ease-in-out infinite; } #oc-app .oc-si .si-look{ animation: si-look 4.2s ease-in-out infinite; } @keyframes si-blink{ 0%, 44%, 52%, 100%{ transform: scaleY(1); } 48%{ transform: scaleY(.08); } } @keyframes si-look{ 0%, 15%{ transform: translateX(0); } 22%, 35%{ transform: translateX(-1.6px); } 60%, 75%{ transform: translateX(1.6px); } 85%, 100%{ transform: translateX(0); } } #oc-app .oc-si .si-beam{ stroke-dasharray: 9; animation: si-beam 2.2s cubic-bezier(.5,0,.3,1) infinite; } #oc-app .oc-si .si-flash{ opacity: 0; animation: si-flash 2.2s ease-out infinite; } @keyframes si-beam{ 0%{ stroke-dashoffset: 9; opacity: 1; } 30%{ stroke-dashoffset: 0; opacity: 1; } 55%{ stroke-dashoffset: -9; opacity: 1; } 56%, 100%{ stroke-dashoffset: 9; opacity: 0; } } @keyframes si-flash{ 0%, 28%{ opacity: 0; transform: scale(.4); } 34%{ opacity: 1; transform: scale(1.5); } 60%{ opacity: 0; transform: scale(2.4); } 100%{ opacity: 0; } } #oc-app .oc-si .si-scalpel{ transform-origin: 90% 10%; animation: si-scalpel 3.2s ease-in-out infinite; } #oc-app .oc-si .si-cut{ stroke-dasharray: 8; stroke-dashoffset: 8; animation: si-cut 3.2s ease-in-out infinite; } @keyframes si-scalpel{ 0%, 100%{ transform: translate(1.6px,-1.6px); } 25%{ transform: translate(0,0); } 55%{ transform: translate(-3.4px,.2px); } 75%{ transform: translate(1.6px,-1.6px); } } @keyframes si-cut{ 0%, 25%{ stroke-dashoffset: 8; opacity: 1; } 55%{ stroke-dashoffset: 0; opacity: 1; } 85%{ stroke-dashoffset: 0; opacity: 0; } 100%{ stroke-dashoffset: 8; opacity: 0; } } #oc-app .oc-si .si-cloud{ animation: si-cloud 3.6s ease-in-out infinite; } #oc-app .oc-si .si-shine{ opacity: 0; animation: si-shine 3.6s ease-in-out infinite; } @keyframes si-cloud{ 0%, 15%{ opacity: .5; } 50%, 75%{ opacity: .04; } 100%{ opacity: .5; } } @keyframes si-shine{ 0%, 40%{ opacity: 0; transform: scale(.3) rotate(0); } 55%{ opacity: 1; transform: scale(1.15) rotate(45deg); } 75%{ opacity: 0; transform: scale(.6) rotate(90deg); } 100%{ opacity: 0; } } #oc-app .oc-si .si-dot{ opacity: 0; animation: si-dot 3.2s ease-out infinite; } #oc-app .oc-si .si-dot:nth-child(2){ animation-delay: .35s; } #oc-app .oc-si .si-dot:nth-child(3){ animation-delay: .7s; } #oc-app .oc-si .si-dot:nth-child(4){ animation-delay: 1.05s; } @keyframes si-dot{ 0%{ opacity: 0; transform: scale(0); } 6%{ opacity: 1; transform: scale(1.6); } 14%{ opacity: 1; transform: scale(1); } 70%{ opacity: .9; } 85%, 100%{ opacity: 0; transform: scale(.8); } } #oc-app .oc-si .si-wing{ transform-origin: 0% 50%; animation: si-wing 3.6s ease-in-out infinite; } #oc-app .oc-si--shield .si-shine{ animation-duration: 3.6s; } @keyframes si-wing{ 0%, 20%{ transform: scaleX(1); opacity: 1; } 45%, 75%{ transform: scaleX(0); opacity: 0; } 100%{ transform: scaleX(1); opacity: 1; } } #oc-app .oc-si .si-moon{ animation: si-moon 5s ease-in-out infinite; } #oc-app .oc-si .si-star{ animation: si-star 2.4s ease-in-out infinite; } #oc-app .oc-si .si-star--2{ animation-delay: 1.2s; } @keyframes si-moon{ 0%, 100%{ transform: rotate(-6deg); } 50%{ transform: rotate(6deg); } } @keyframes si-star{ 0%, 100%{ opacity: .25; transform: scale(.6); } 50%{ opacity: 1; transform: scale(1.1); } } #oc-app .oc-si .si-ray{ animation: si-ray 2s ease-in infinite; } #oc-app .oc-si .si-ray--2{ animation-delay: .25s; } #oc-app .oc-si .si-ray--3{ animation-delay: .5s; } #oc-app .oc-si .si-x{ animation: si-x 2s ease-in-out infinite; } @keyframes si-ray{ 0%{ opacity: 0; transform: translateY(-2px); } 30%{ opacity: 1; } 70%{ opacity: 1; transform: translateY(1.5px); } 100%{ opacity: 0; transform: translateY(2.5px); } } @keyframes si-x{ 0%, 30%{ opacity: .2; } 60%, 80%{ opacity: 1; } 100%{ opacity: .2; } } /* Иконка «Оскара»: мерцающие звёзды + раз в 10 с оборот и блик */ #oc-app .oc-ai-i *{ transform-box: fill-box; transform-origin: center; } #oc-app .oc-ai-i .ai-spin{ transform-box: view-box; transform-origin: 50% 50%; animation: ai-spin 10s cubic-bezier(.6,0,.2,1) infinite; } #oc-app .oc-ai-i .ai-s1{ animation: ai-pulse 2.6s ease-in-out infinite; } #oc-app .oc-ai-i .ai-s2{ animation: ai-twinkle 1.8s ease-in-out infinite; } #oc-app .oc-ai-i .ai-s3{ animation: ai-twinkle 1.8s ease-in-out infinite .9s; } @keyframes ai-spin{ 0%, 88%{ transform: rotate(0) scale(1); } 94%{ transform: rotate(200deg) scale(1.18); } 100%{ transform: rotate(360deg) scale(1); } } @keyframes ai-pulse{ 0%, 100%{ transform: scale(1); fill-opacity: .18; } 50%{ transform: scale(1.1); fill-opacity: .45; } } @keyframes ai-twinkle{ 0%, 100%{ opacity: .3; transform: scale(.55); } 50%{ opacity: 1; transform: scale(1.15); } } #oc-app .oc-tabbar__orb{ animation: ai-glow 10s ease-in-out infinite; } @keyframes ai-glow{ 0%, 86%, 100%{ box-shadow: 0 8px 22px -8px rgba(15,23,42,.55), 0 0 0 0 color-mix(in srgb, var(--oc-gold) 0%, transparent); } 93%{ box-shadow: 0 8px 22px -8px rgba(15,23,42,.55), 0 0 0 8px color-mix(in srgb, var(--oc-gold) 35%, transparent); } } @media (prefers-reduced-motion: reduce) { #oc-app .oc-si *, #oc-app .oc-ai-i *, #oc-app .oc-tabbar__orb{ animation: none !important; } #oc-app .oc-si .si-flash, #oc-app .oc-si .si-dot{ opacity: 1; } } /* Врачи: понятная кнопка «Читать полностью» */ #oc-app .oc-doc__info{ height: 182px; grid-template-rows: auto 2.5em 1.3em 2.6em auto; } #oc-app .oc-doc__more{ justify-self: start; display: inline-flex; align-items: center; gap: 3px; margin-top: 4px; padding: 5px 10px 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--oc-gold) 85%, white), var(--oc-gold-d)); box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--oc-gold) 90%, transparent); transition: transform .3s var(--oc-spring); } #oc-app .oc-doc__more .oc-i{ width: 13px; height: 13px; } @media (max-width: 520px) { #oc-app .oc-grid--doctors .oc-doc__info{ height: 160px; grid-template-rows: auto 2.5em 1.3em auto; } #oc-app .oc-grid--doctors .oc-doc__more{ font-size: 11px; padding: 4px 8px 4px 10px; } } #oc-app .oc-doc__info, #oc-app .oc-grid--doctors .oc-doc__info{ height: auto; padding-bottom: 12px; } /* ================= v1.10.6 ================= */ /* Никаких тёмных «квадратов» при нажатии (подсветка нажатия в мобильных браузерах) */ #oc-app, #oc-app *{ -webkit-tap-highlight-color: transparent; } #oc-app summary:focus{ outline: none; } #oc-app summary:focus-visible{ outline: 2px solid color-mix(in srgb, var(--oc-gold) 60%, transparent); outline-offset: 2px; border-radius: inherit; } #oc-app .oc-faq__a{ overflow: hidden; } #oc-app .oc-faq__item summary{ transition: color .25s; } #oc-app .oc-faq__item[open]:not(.is-closing) summary{ color: var(--oc-gold-d); } #oc-app .oc-faq__item.is-closing summary .oc-i{ transform: none; } /* Окно врача/услуги открывается плавно, без рывков: страница не сдвигается, на телефоне без тяжёлого размытия */ html.oc-lock body{ padding-right: var(--oc-sbw, 0px) !important; } /* шапка не меняет размер: сдвигаем её правый край ровно на ширину исчезнувшей полосы прокрутки (на телефоне — 0) */ html.oc-lock #oc-app .oc-header{ right: var(--oc-sbw, 0px); } @media (max-width: 1023px), (hover: none) { #oc-app .oc-sheet__panel{ -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(170deg, #fff, #FAF8F3); animation-duration: .42s; } #oc-app .oc-sheet__scrim{ -webkit-backdrop-filter: none; backdrop-filter: none; } } #oc-app .oc-sheet__panel{ backface-visibility: hidden; contain: layout paint; } /* Страница «Врачи»: на телефоне по одному врачу в строке, крупно */ @media (max-width: 759px) { #oc-app .oc-grid--doctors{ grid-template-columns: minmax(0, 1fr); gap: 18px; max-width: 460px; margin-inline: auto; } #oc-app .oc-grid--doctors .oc-doc__photo{ aspect-ratio: 4/5; } #oc-app .oc-grid--doctors .oc-doc__info{ left: 10px; right: 10px; bottom: 10px; padding: 16px 18px 16px; grid-template-rows: auto auto auto auto auto; } #oc-app .oc-grid--doctors .oc-doc__info strong{ font-size: 19px; -webkit-line-clamp: 2; } #oc-app .oc-grid--doctors .oc-doc__info small{ display: block; font-size: 14px; white-space: normal; } #oc-app .oc-grid--doctors .oc-doc__bio{ display: -webkit-box; font-size: 13px; } #oc-app .oc-grid--doctors .oc-doc__more{ font-size: 13px; padding: 7px 14px 7px 16px; } } /* Смена языка/города: меню непрозрачное, за ним не видно загрузку */ #oc-app .oc-menu.is-instant, #oc-app .oc-menu.is-switch{ background: #F4F2EE !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } #oc-app .oc-menu.is-leaving{ transition: opacity .45s var(--oc-ease); } /* Кнопка «Оскара»: влетает крупной и пружинит на место */ #oc-app .oc-ai-pre{ transform: scale(0) !important; opacity: 0; transition: none !important; } #oc-app .oc-ai-enter{ animation: oc-ai-enter 1.6s linear both !important; } @keyframes oc-ai-enter{ 0%{ transform: scale(0); opacity: 0; } 18%{ transform: scale(1.7); opacity: 1; } 32%{ transform: scale(.82); } 45%{ transform: scale(1.28); } 57%{ transform: scale(.92); } 69%{ transform: scale(1.1); } 80%{ transform: scale(.97); } 90%{ transform: scale(1.03); } 100%{ transform: scale(1); opacity: 1; } } #oc-app .oc-fab--ai.oc-ai-enter{ transform-origin: 100% 50%; } /* Подсказка: затемнение вокруг кнопки — её невозможно не заметить */ #oc-app .oc-tip__spot{ position: fixed; display: block; border-radius: 999px; pointer-events: none; opacity: 0; box-shadow: 0 0 0 200vmax rgba(15,23,42,.42), 0 0 0 3px color-mix(in srgb, var(--oc-gold) 80%, transparent); transition: opacity .4s var(--oc-ease), left .45s var(--oc-ease), top .45s var(--oc-ease), width .45s var(--oc-ease), height .45s var(--oc-ease); } #oc-app .oc-tip.is-on .oc-tip__spot{ opacity: 1; } #oc-app .oc-tip.is-on .oc-tip__spot::after{ content: ""; position: absolute; inset: -3px; border-radius: inherit; border: 2px solid var(--oc-gold); animation: oc-spot-ring 1.6s ease-out infinite; } @keyframes oc-spot-ring{ 0%{ transform: scale(1); opacity: .9; } 100%{ transform: scale(1.45); opacity: 0; } } #oc-app .oc-tip__bubble{ font-size: 15.5px; } #oc-app .oc-tip.is-on .oc-tip__bubble{ animation: oc-tip-pop .55s var(--oc-spring); } @keyframes oc-tip-pop{ 0%{ transform: translateY(10px) scale(.9); } 100%{ transform: none; } } /* ================= v1.10.7 ================= */ /* Врачи: без анимаций при наведении, только лёгкое нажатие */ #oc-app .oc-doc{ transition: transform .25s var(--oc-ease); } #oc-app .oc-doc:active{ transform: scale(.985); } #oc-app .oc-doc__photo img{ transition: none; } #oc-app .oc-doc__more{ transition: none; } /* Слайдер и фон не меняют размер при прокрутке (высота фиксируется один раз при загрузке) */ #oc-app .oc-slide{ height: var(--oc-hero-h, clamp(420px, 60svh, 560px)); } @media (min-width: 768px) { #oc-app .oc-slide{ height: var(--oc-hero-h, clamp(480px, 74svh, 760px)); } } #oc-app .oc-bg i:nth-child(1){ top: calc(var(--oc-vh, 1vh) * 30); } #oc-app .oc-bg i:nth-child(2){ top: calc(var(--oc-vh, 1vh) * 120); } #oc-app .oc-bg i:nth-child(3){ top: calc(var(--oc-vh, 1vh) * 260); }