/* ============================================================ ceny.css — страничные улучшения для «Цены и калькулятор». Всё строго ограничено классом .ceny (на ), чтобы не затрагивать остальные страницы, использующие styles.css. Палитра, шрифты, токены — из styles.css. Без новых зависимостей. ============================================================ */ /* ---- Мягкие entrance-анимации (через individual transform-props, чтобы не конфликтовать с hover transform) ---- */ @keyframes ceRise{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}} @keyframes ceRes{from{opacity:0;translate:0 12px;scale:.985}to{opacity:1;translate:0 0;scale:1}} @keyframes ceNum{0%{opacity:0;scale:.9}60%{scale:1.02}100%{opacity:1;scale:1}} /* ---- Бренд-корректность: убрать «тёплые» (золотые) остатки на синем бренде ---- */ .ceny .seo-hero p{color:#E2E6E9} .ceny .cta__text p{color:#D8DDE1} /* ============ SEO-hero: факт-чипы доверия ============ */ .ceny .seo-hero h1{letter-spacing:-.02em} .ceny-hero__facts{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--space-5)} .ceny-hero__facts li{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.07);border-radius:var(--radius-pill);font-size:var(--fs-small);font-weight:600;color:#EAECEE;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)} .ceny-hero__facts svg{width:16px;height:16px;color:var(--color-accent);flex-shrink:0} /* ============ Калькулятор — «гвоздь» страницы ============ */ .ceny .calc{position:relative;isolation:isolate} .ceny .calc::before{content:"";position:absolute;inset:0;z-index:-1; background-image:radial-gradient(rgba(11,126,88,.07) 1px,transparent 1.4px); background-size:24px 24px; -webkit-mask:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent); mask:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent)} .ceny .calc__card{border-radius:var(--radius-xl);box-shadow:0 18px 50px rgba(30,36,40,.10),0 2px 6px rgba(30,36,40,.05)} .ceny .calc__card::before{content:"";display:block;height:4px;background:linear-gradient(90deg,var(--color-accent),var(--color-primary) 55%,var(--color-primary-deep))} /* Прогресс-степпер */ .ceny .calc__steps{position:relative;--p:0;background:linear-gradient(180deg,#fff,#F7FBFF)} .ceny .calc__steps::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--color-border)} .ceny .calc__steps::after{content:"";position:absolute;left:0;bottom:-1px;height:3px;width:calc(var(--p,0)*100%);background:linear-gradient(90deg,var(--color-accent),var(--color-primary));border-radius:0 3px 3px 0;transition:width .5s var(--ease-soft)} .ceny .calc__tab{transition:color .3s,background .3s,opacity .3s} .ceny .calc__tab[data-state="done"]{color:var(--color-success-text)} .ceny .calc__tab[data-state="active"]{color:var(--color-primary);background:#fff} .ceny .calc__tab[data-state="todo"]{color:var(--color-text-secondary);opacity:.65} .ceny .calc__tab[aria-current="true"]::after{display:none} /* старое подчёркивание заменено прогресс-баром */ /* Вопрос шага */ .ceny .calc__q{font-size:1.18rem;animation:ceRise .4s var(--ease-soft) both} /* Карточки-опции (направление / процедура) */ .ceny .calc__opts{grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:12px} .ceny .calc__opt{align-items:center;gap:14px;padding:15px 16px;border-radius:14px;background:#fff;border:1px solid var(--color-border);box-shadow:0 1px 2px rgba(30,36,40,.04);transition:border-color .22s,box-shadow .22s,transform .22s var(--ease-soft);animation:ceRise .42s var(--ease-soft) both} .ceny .calc__opt:hover{border-color:var(--color-primary);box-shadow:0 12px 28px rgba(30,36,40,.11);transform:translateY(-2px)} .ceny .calc__opt .ico{flex-shrink:0;width:42px;height:42px;border-radius:12px;background:var(--color-accent-soft);color:var(--color-primary);display:flex;align-items:center;justify-content:center;transition:background .22s,color .22s,transform .22s var(--ease-soft)} .ceny .calc__opt .ico svg{width:22px;height:22px} .ceny .calc__opt:hover .ico{background:var(--color-primary);color:#fff;transform:scale(1.06)} .ceny .calc__opt .tx{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;text-align:left} .ceny .calc__opt .tx b{font-family:var(--font-heading);font-weight:700;font-size:.97rem;color:var(--color-primary-deep);line-height:1.2} .ceny .calc__opt .tx small{font-size:var(--fs-micro);color:var(--color-text-secondary);line-height:1.25} .ceny .calc__opt .chev{flex-shrink:0;color:var(--color-primary);opacity:.45;display:flex;transition:opacity .22s,transform .22s var(--ease-soft)} .ceny .calc__opt .chev svg{width:18px;height:18px} .ceny .calc__opt:hover .chev{opacity:1;transform:translateX(3px)} /* лёгкая лесенка появления */ .ceny .calc__opt:nth-child(1){animation-delay:.02s} .ceny .calc__opt:nth-child(2){animation-delay:.06s} .ceny .calc__opt:nth-child(3){animation-delay:.10s} .ceny .calc__opt:nth-child(4){animation-delay:.14s} .ceny .calc__opt:nth-child(5){animation-delay:.18s} .ceny .calc__opt:nth-child(6){animation-delay:.22s} .ceny .calc__opt:nth-child(7){animation-delay:.26s} .ceny .calc__opt:nth-child(8){animation-delay:.30s} .ceny .calc__opt:nth-child(9){animation-delay:.34s} /* Шаг «объём» */ .ceny .calc__qty button{background:var(--color-accent-soft);color:var(--color-primary);transition:background .2s,color .2s,border-color .2s} .ceny .calc__qty button:hover{background:var(--color-primary);color:#fff;border-color:var(--color-primary)} .ceny .calc__qty output{font-size:1.9rem} /* Результат — драматичная подача итога */ .ceny .calc__res{background:radial-gradient(130% 120% at 50% -10%,#F2F9FF,#fff 65%);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6) var(--space-5);position:relative;overflow:hidden;animation:ceRes .5s var(--ease-soft) both} .ceny .calc__res::before{content:"";position:absolute;top:-70px;left:50%;width:300px;height:300px;translate:-50% 0;background:radial-gradient(circle,rgba(11,126,88,.16),transparent 68%);pointer-events:none} .ceny .calc__res>*{position:relative;z-index:1} .ceny .calc__res-lbl{font-size:var(--fs-small);letter-spacing:.01em} .ceny .calc__res-num{font-size:clamp(2rem,5.5vw,2.9rem);background:linear-gradient(180deg,#0E9F6E,#0B7E58 55%,#1E2428);-webkit-background-clip:text;background-clip:text;color:transparent;animation:ceNum .6s .1s var(--ease-soft) both} .ceny .calc__save-pill{box-shadow:0 2px 8px rgba(31,169,113,.18)} /* ============ Прайс-таблицы: легенда курса, групп-хедеры, hover ============ */ .ceny-legend{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 var(--space-5)} .ceny-legend span{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-micro);font-weight:600;color:var(--color-text-secondary);background:var(--color-accent-soft);border:1px solid var(--color-border);padding:6px 13px;border-radius:var(--radius-pill)} .ceny-legend b{color:var(--color-primary-deep);font-family:var(--font-heading);font-weight:700} .ceny-legend svg{width:14px;height:14px;color:var(--color-primary);flex-shrink:0} /* Прайс-лист: ₽ — крупно и первым, валюта клиники — мелкой подписью */ .ceny .plist{max-width:880px;margin:0 auto;display:grid;gap:10px} .ceny .plist--top{margin-bottom:var(--space-6)} .ceny .pitem{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-5);padding:15px 20px;background:#fff;border:1px solid var(--color-border);border-radius:14px;transition:border-color .2s,box-shadow .2s,transform .2s var(--ease-soft)} .ceny .pitem:hover{border-color:#E0E4E7;box-shadow:0 8px 22px rgba(30,36,40,.07);transform:translateY(-1px)} .ceny .pitem__main{min-width:0;flex:1} .ceny .pitem__name{display:block;font-family:var(--font-heading);font-weight:700;color:var(--color-primary-deep);font-size:1rem;line-height:1.25;margin-bottom:3px} .ceny .pitem__name span{font-weight:500;color:var(--color-text-secondary);font-size:var(--fs-micro)} .ceny .pitem__note{font-size:var(--fs-micro);color:var(--color-text-secondary);line-height:1.45;margin:0} .ceny .pitem__price{flex-shrink:0;text-align:right;display:flex;flex-direction:column;gap:1px;align-items:flex-end} .ceny .pitem__rub{font-family:var(--font-heading);font-weight:800;color:var(--color-primary);font-size:1.12rem;line-height:1.15;font-variant-numeric:tabular-nums;white-space:nowrap} .ceny .pitem__src{font-size:var(--fs-micro);color:var(--color-text-secondary);white-space:nowrap} /* Заголовок и подпись детального прайса */ .ceny .plist__h{font-family:var(--font-heading);font-weight:700;color:var(--color-primary-deep);font-size:var(--fs-h4);max-width:880px;margin:var(--space-7) auto var(--space-2)} .ceny .plist__sub{max-width:880px;margin:0 auto var(--space-4);font-size:var(--fs-small);color:var(--color-text-secondary);line-height:1.5} /* Категории-аккордеоны — раскрываются по клику, не грузят сразу всё */ .ceny .plist__grp{border:1px solid var(--color-border);border-radius:16px;background:#fff;box-shadow:var(--shadow-sm);overflow:hidden} .ceny .plist__grp>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:13px;padding:16px 20px} .ceny .plist__grp>summary::-webkit-details-marker{display:none} .ceny .plist__grp>summary:hover{background:#F6FAFE} .ceny .plist__grp-ic{flex-shrink:0;width:38px;height:38px;border-radius:11px;background:var(--color-accent-soft);color:var(--color-primary);display:flex;align-items:center;justify-content:center} .ceny .plist__grp-ic svg{width:20px;height:20px} .ceny .plist__grp-t{flex:1;min-width:0;font-family:var(--font-heading);font-weight:700;color:var(--color-primary-deep);font-size:1.02rem;line-height:1.25} .ceny .plist__grp-c{flex-shrink:0;font-size:var(--fs-micro);font-weight:600;color:var(--color-primary);background:var(--color-accent-soft);padding:3px 11px;border-radius:var(--radius-pill);white-space:nowrap} .ceny .plist__grp-x{flex-shrink:0;color:var(--color-primary);display:flex;transition:transform .25s var(--ease-soft)} .ceny .plist__grp-x svg{width:20px;height:20px} .ceny .plist__grp[open]>summary{border-bottom:1px solid var(--color-border)} .ceny .plist__grp[open] .plist__grp-x{transform:rotate(180deg)} .ceny .plist__items{padding:6px 20px 10px} .ceny .plist__grp[open] .plist__items{animation:ceRise .35s var(--ease-soft) both} /* строки внутри группы — лёгкие, с разделителями вместо рамок */ .ceny .plist__grp .pitem{border:none;border-radius:10px;background:transparent;padding:13px 10px;border-top:1px solid var(--color-border)} .ceny .plist__grp .pitem:first-child{border-top:none} .ceny .plist__grp .pitem:hover{transform:none;box-shadow:none;background:#F6FAFE} @media(max-width:560px){ .ceny .pitem{flex-direction:column;gap:7px;align-items:stretch} .ceny .pitem__price{text-align:left;align-items:baseline;flex-direction:row;gap:10px} .ceny .plist__grp>summary{gap:11px;padding:14px 16px} .ceny .plist__items{padding:4px 14px 8px} }