/* ───────────────────────────────────────────────────────────── VINIRDENT — внутренний портал администрации Две темы через data-theme на . Вся вёрстка построена на паре «поверхность / инверсия», поэтому светлая тема — это переворот тех же переменных, а не отдельный набор правил. ───────────────────────────────────────────────────────────── */ :root { /* Размеры и тайминги — общие для обеих тем */ --r-sm: 12px; --r-md: 18px; --r-lg: 26px; --r-xl: 36px; --r-full: 999px; --ease: cubic-bezier(.22, 1, .36, 1); /* Мягкий «отскок» при отпускании кнопки */ --ease-soft: cubic-bezier(.34, 1.56, .64, 1); /* Длинный «дорогой» разгон-торможение для крупных движений */ --ease-glide: cubic-bezier(.16, 1, .3, 1); --shell: 1180px; --danger: #ff5a5a; } /* ── Тёмная тема (по умолчанию) ───────────────────────────── */ :root, [data-theme='dark'] { /* Поверхности с чуть холодным отливом: чистый серый на больших площадях выглядит грязновато, лёгкий синий подтон даёт глубину. */ --bg: #08080b; --surface: #101015; --surface-2: #16161c; --surface-3: #1f1f27; --line: #2c2c36; --line-soft: #1e1e26; --text: #f5f5f8; --text-dim: #a9a9b6; --text-mute: #74747f; --text-faint: #4d4d58; /* Панель-акцент: в тёмной теме она белая */ --invert-bg: #ffffff; --invert-text: #0a0a0b; --invert-dim: #55555d; --invert-mute: #8a8a93; --invert-line: #e4e4e8; /* Тени в два слоя: узкая даёт «прижатость» к фону, широкая — объём */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5), 0 3px 14px rgba(0, 0, 0, .34); --shadow-md: 0 2px 6px rgba(0, 0, 0, .45), 0 16px 42px rgba(0, 0, 0, .48); --shadow-lg: 0 4px 12px rgba(0, 0, 0, .5), 0 40px 90px rgba(0, 0, 0, .62); /* Стекло, блики и нажатия */ --glass-fill: rgba(255, 255, 255, .06); --glass-stroke: rgba(255, 255, 255, .10); --glass-hover: rgba(255, 255, 255, .11); --sheen: rgba(255, 255, 255, .16); --press-inset: rgba(0, 0, 0, .35); --ring: rgba(255, 255, 255, .10); --tint: rgba(255, 255, 255, .10); --veil: rgba(0, 0, 0, .70); --header-bg: rgba(10, 10, 11, .72); --mark-bg: rgba(255, 255, 255, .18); --scroll-thumb: #34343c; --glow: rgba(255, 255, 255, .16); /* Полупрозрачные слои ВНУТРИ панели-акцента (она контрастна фону) */ --invert-tint: rgba(10, 10, 11, .05); --invert-fill: rgba(10, 10, 11, .04); --invert-stroke: rgba(10, 10, 11, .07); --invert-hover: rgba(10, 10, 11, .07); --invert-sheen: rgba(255, 255, 255, .55); --invert-press: rgba(10, 10, 11, .22); /* Фоновые световые пятна и зерно */ --aurora-a: rgba(120, 132, 255, .10); --aurora-b: rgba(255, 255, 255, .055); --grain-opacity: .035; /* Выходной день в календаре */ --dayoff-bg: rgba(255, 90, 90, .18); --dayoff-text: #ff8a8a; --dayoff-border: rgba(255, 90, 90, .55); } /* ── Светлая тема ─────────────────────────────────────────── */ [data-theme='light'] { --bg: #f2f2f4; --surface: #ffffff; --surface-2: #f6f6f8; --surface-3: #eaeaee; --line: #d8d8de; --line-soft: #e6e6ea; --text: #0d0d0f; --text-dim: #55555f; --text-mute: #7d7d88; --text-faint: #a8a8b2; /* Панель-акцент: в светлой теме она чёрная */ --invert-bg: #0a0a0b; --invert-text: #ffffff; --invert-dim: rgba(255, 255, 255, .70); --invert-mute: rgba(255, 255, 255, .52); --invert-line: rgba(255, 255, 255, .22); --shadow-sm: 0 1px 2px rgba(16, 16, 24, .06), 0 3px 12px rgba(16, 16, 24, .06); --shadow-md: 0 2px 6px rgba(16, 16, 24, .07), 0 16px 38px rgba(16, 16, 24, .10); --shadow-lg: 0 4px 14px rgba(16, 16, 24, .08), 0 36px 80px rgba(16, 16, 24, .15); --glass-fill: rgba(255, 255, 255, .60); --glass-stroke: rgba(16, 16, 24, .09); --glass-hover: rgba(255, 255, 255, .85); --sheen: rgba(255, 255, 255, .85); --press-inset: rgba(16, 16, 24, .16); --ring: rgba(16, 16, 24, .10); --tint: rgba(10, 10, 11, .05); --veil: rgba(16, 16, 24, .45); --header-bg: rgba(242, 242, 244, .72); --mark-bg: rgba(10, 10, 11, .12); --scroll-thumb: #c9c9d2; --glow: rgba(16, 16, 24, .26); --invert-tint: rgba(255, 255, 255, .10); --invert-fill: rgba(255, 255, 255, .07); --invert-stroke: rgba(255, 255, 255, .13); --invert-hover: rgba(255, 255, 255, .13); --invert-sheen: rgba(255, 255, 255, .18); --invert-press: rgba(0, 0, 0, .38); --aurora-a: rgba(90, 105, 235, .09); --aurora-b: rgba(10, 10, 11, .045); --grain-opacity: .022; --dayoff-bg: rgba(211, 47, 47, .13); --dayoff-text: #c62828; --dayoff-border: rgba(211, 47, 47, .42); } /* На миг смены темы гасим все переходы. Иначе десятки элементов перекрашиваются каждый со своей скоростью и переключение выглядит как рябь, а не как смена оформления. */ html.theme-switching, html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after { transition: none !important; animation-duration: .001ms !important; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { margin: 0; line-height: 1.12; letter-spacing: -.02em; font-weight: 700; } p { margin: 0; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } button, input, textarea, select { font: inherit; color: inherit; } ::selection { background: var(--invert-bg); color: var(--invert-text); } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 8px; border: 3px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb); } .shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 24px; } /* ── Типографика ──────────────────────────────────────────── */ .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--text-mute); } .eyebrow::before { content: ''; width: 26px; height: 1px; background: currentColor; } /* Внутри белых панелей */ .eyebrow--invert { color: var(--invert-mute); } .display { font-size: clamp(2.3rem, 5.6vw, 4.1rem); letter-spacing: -.035em; } .h2 { font-size: clamp(1.7rem, 3.4vw, 2.7rem); } .lead { font-size: clamp(1rem, 1.4vw, 1.12rem); color: var(--text-dim); } .muted { color: var(--text-mute); } /* ── Кнопки ─────────────────────────────────────────────────── Стекло + мягкое «проваливание»: при нажатии кнопка слегка уходит вниз и внутрь (inset-тень), а отпускается с отскоком. */ .btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 28px; border: 1px solid transparent; border-radius: var(--r-full); font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; backdrop-filter: blur(12px) saturate(150%); transition: transform .42s var(--ease-soft), background .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease); } /* Блик по верхней кромке — то, что делает кнопку «стеклянной» */ .btn::before { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(180deg, var(--sheen), transparent 52%); opacity: .5; transition: opacity .28s var(--ease); } .btn:hover::before { opacity: .8; } .btn > * { position: relative; z-index: 1; } .btn:hover:not(:disabled) { transform: translateY(-2px); } .btn:active:not(:disabled) { transform: translateY(1px) scale(.972); box-shadow: inset 0 3px 10px var(--press-inset), 0 1px 2px transparent; /* Вниз — мгновенно, наверх — с отскоком: так нажатие ощущается «живым» */ transition-duration: .09s; } .btn:active:not(:disabled)::before { opacity: .25; } .btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ring); } .btn:disabled { opacity: .4; cursor: not-allowed; transform: none; } /* Основная — цвет панели-акцента */ .btn--primary { background: var(--invert-bg); color: var(--invert-text); box-shadow: var(--shadow-sm); } .btn--primary::before { background: linear-gradient(180deg, var(--invert-sheen), transparent 55%); opacity: .35; } .btn--primary:hover:not(:disabled) { box-shadow: 0 12px 32px var(--glow); } .btn--primary:active:not(:disabled) { box-shadow: inset 0 3px 10px var(--invert-press); } /* Обратная — для использования ВНУТРИ панели-акцента */ .btn--dark { background: var(--invert-text); color: var(--invert-bg); box-shadow: var(--shadow-sm); } .btn--dark:hover:not(:disabled) { box-shadow: 0 12px 30px var(--invert-press); } /* Стеклянная контурная на обычном фоне */ .btn--ghost { background: var(--glass-fill); color: var(--text); border-color: var(--glass-stroke); } .btn--ghost:hover:not(:disabled) { border-color: var(--line); background: var(--glass-hover); } /* Стеклянная контурная внутри панели-акцента */ .btn--ghost-invert { background: var(--invert-fill); color: var(--invert-text); border-color: var(--invert-stroke); } .btn--ghost-invert::before { background: linear-gradient(180deg, var(--invert-sheen), transparent 55%); opacity: .3; } .btn--ghost-invert:hover:not(:disabled) { border-color: var(--invert-line); background: var(--invert-hover); } .btn--ghost-invert:active:not(:disabled) { box-shadow: inset 0 3px 10px var(--invert-press); } .btn--block { width: 100%; } .btn--sm { padding: 9px 18px; font-size: 13px; } .btn__spinner { width: 16px; height: 16px; flex: none; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; display: none; } .btn.is-loading .btn__spinner { display: block; } .btn.is-loading .btn__label { opacity: .6; } @keyframes spin { to { transform: rotate(360deg); } } /* ── Шапка ────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 60; padding: 14px 0; background: var(--header-bg); backdrop-filter: blur(16px); border-bottom: 1px solid transparent; transition: border-color .3s var(--ease); } .site-header.is-stuck { border-bottom-color: var(--line-soft); } /* Три колонки: логотип слева, меню строго по центру, кнопки справа. При flex меню смещалось влево, потому что колонки по краям разной ширины. */ .site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; } /* Колонки задаём номером, а не порядком в разметке: на главной меню нет, и без этого блок с кнопками уезжал в середину. */ .site-header__inner > .logo { grid-column: 1; justify-self: start; } .site-header__inner > .site-nav { grid-column: 2; justify-self: center; } .site-header__inner > .header-right { grid-column: 3; justify-self: end; } /* Переключатель темы стоит вплотную к кнопке входа или чипу с логином */ .header-right { display: flex; align-items: center; gap: 10px; } .logo { display: flex; align-items: center; gap: 12px; } .logo__mark { width: 42px; height: 42px; flex: none; display: grid; place-items: center; background: var(--invert-bg); color: var(--invert-text); border-radius: 14px; } .logo__name { font-size: 16px; font-weight: 700; letter-spacing: .24em; } .logo__sub { font-size: 9px; letter-spacing: .26em; color: var(--text-mute); text-transform: uppercase; } /* Навигация внутри портала (главная / панель / профиль) */ .site-nav { display: flex; gap: 28px; } .site-nav a { position: relative; font-size: 14px; font-weight: 500; color: var(--text-dim); transition: color .2s var(--ease); } .site-nav a::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 100%; height: 1.5px; background: var(--text); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); } .site-nav a:hover { color: var(--text); } .site-nav a:hover::after { transform: scaleX(1); transform-origin: left; } .header-actions { display: flex; align-items: center; gap: 10px; } /* ── Переключатель темы ───────────────────────────────────── */ .theme-toggle { position: relative; overflow: hidden; width: 42px; height: 42px; flex: none; display: grid; place-items: center; background: var(--glass-fill); border: 1px solid var(--glass-stroke); border-radius: 14px; color: var(--text-dim); cursor: pointer; -webkit-tap-highlight-color: transparent; backdrop-filter: blur(12px) saturate(150%); transition: transform .42s var(--ease-soft), color .28s var(--ease), background .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease); } .theme-toggle::before { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(180deg, var(--sheen), transparent 55%); opacity: .5; transition: opacity .28s var(--ease); } .theme-toggle:hover { transform: translateY(-2px); color: var(--text); background: var(--glass-hover); border-color: var(--line); } .theme-toggle:hover::before { opacity: .85; } .theme-toggle:active { transform: translateY(1px) scale(.94); box-shadow: inset 0 3px 10px var(--press-inset); transition-duration: .09s; } .theme-toggle:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ring); } /* Иконки солнца и луны меняются местами вместе с темой */ .theme-toggle svg { position: absolute; transition: opacity .3s var(--ease), transform .45s var(--ease); } .theme-toggle .icon-sun { opacity: 0; transform: rotate(-70deg) scale(.5); } .theme-toggle .icon-moon { opacity: 1; transform: none; } [data-theme='light'] .theme-toggle .icon-sun { opacity: 1; transform: none; } [data-theme='light'] .theme-toggle .icon-moon { opacity: 0; transform: rotate(70deg) scale(.5); } /* На страницах входа шапки нет — кнопка висит в углу */ .theme-toggle--floating { position: fixed; top: 22px; right: 22px; z-index: 80; } /* Чип с логином справа сверху */ .user-chip { display: inline-flex; align-items: center; gap: 11px; padding: 6px 18px 6px 6px; background: var(--invert-bg); color: var(--invert-text); border: none; border-radius: var(--r-full); cursor: pointer; -webkit-tap-highlight-color: transparent; box-shadow: var(--shadow-sm); transition: transform .42s var(--ease-soft), box-shadow .28s var(--ease); animation: chip-in .5s var(--ease) both; } .user-chip:hover { transform: translateY(-2px); box-shadow: 0 10px 28px var(--glow); } .user-chip:active { transform: translateY(1px) scale(.965); box-shadow: inset 0 3px 9px var(--invert-press); transition-duration: .09s; } .user-chip__avatar { width: 32px; height: 32px; flex: none; display: grid; place-items: center; background: var(--invert-text); color: var(--invert-bg); border-radius: 50%; font-size: 13px; font-weight: 700; } .user-chip__login { font-size: 14px; font-weight: 600; max-width: 150px; overflow: hidden; text-overflow: ellipsis; } @keyframes chip-in { from { opacity: 0; transform: translateY(-8px) scale(.94); } to { opacity: 1; transform: none; } } /* ── Первый экран ─────────────────────────────────────────── */ .hero { padding: 22px 0 0; } /* Белая панель-акцент на чёрном фоне */ .hero__panel { position: relative; overflow: hidden; background: var(--invert-bg); color: var(--invert-text); border-radius: var(--r-xl); padding: clamp(40px, 6vw, 80px); box-shadow: var(--shadow-lg); } .hero__panel::before, .hero__panel::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; } .hero__panel::before { width: 620px; height: 620px; right: -200px; top: -270px; background: radial-gradient(circle, var(--invert-tint), transparent 66%); } .hero__panel::after { width: 420px; height: 420px; left: -170px; bottom: -240px; background: radial-gradient(circle, var(--invert-tint), transparent 68%); } .hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.12fr .88fr; gap: 56px; align-items: center; } .hero__title { margin: 22px 0 20px; color: var(--invert-text); } .hero__title em { font-style: normal; color: var(--invert-mute); } .hero__text { max-width: 450px; color: var(--invert-dim); font-size: 1.05rem; } .hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; } .hero__side { display: grid; gap: 14px; } .hero__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } /* Карточки-показатели внутри белой панели */ .stat-card { background: var(--invert-fill); border: 1px solid var(--invert-stroke); border-radius: var(--r-lg); padding: 24px 26px; transition: transform .4s var(--ease), background .4s var(--ease); } .stat-card:hover { transform: translateY(-4px); background: var(--invert-hover); } .stat-card__value { font-size: 2.3rem; font-weight: 700; letter-spacing: -.03em; } .stat-card__label { font-size: 13px; color: var(--invert-mute); margin-top: 4px; } /* ── Секции ───────────────────────────────────────────────── */ .section { padding: clamp(56px, 7vw, 92px) 0; } .section__head { max-width: 640px; margin-bottom: 44px; } .section__head .h2 { margin: 18px 0 16px; } .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .tile { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 32px 30px 28px; transition: transform .45s var(--ease), border-color .45s var(--ease), background .45s var(--ease); } .tile:hover { transform: translateY(-6px); border-color: var(--line); background: var(--surface-2); } .tile__num { position: absolute; top: 22px; right: 28px; font-size: 12px; font-weight: 600; color: var(--text-faint); letter-spacing: .1em; } .tile__icon { width: 52px; height: 52px; display: grid; place-items: center; background: var(--surface-3); color: var(--text); border-radius: var(--r-md); margin-bottom: 22px; transition: background .45s var(--ease), color .45s var(--ease); } .tile:hover .tile__icon { background: var(--invert-bg); color: var(--invert-text); } .tile h3 { font-size: 1.15rem; margin-bottom: 10px; } .tile p { font-size: 14.5px; color: var(--text-dim); } /* Подвал */ .site-footer { padding: 40px 0 44px; border-top: 1px solid var(--line-soft); } .site-footer__inner { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; } .site-footer p { font-size: 13.5px; color: var(--text-mute); } /* ── Появление при скролле ────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } } /* ───────────────────────────────────────────────────────────── Вход и регистрация ───────────────────────────────────────────────────────────── */ .auth-page { min-height: 100vh; display: grid; grid-template-columns: 1.02fr .98fr; background: var(--bg); } /* Левая белая панель */ .auth-aside { position: relative; overflow: hidden; background: var(--invert-bg); color: var(--invert-text); margin: 16px 0 16px 16px; border-radius: var(--r-xl); padding: 46px 52px; display: flex; flex-direction: column; justify-content: space-between; } .auth-aside::before { content: ''; position: absolute; width: 560px; height: 560px; right: -230px; bottom: -270px; border-radius: 50%; background: radial-gradient(circle, var(--invert-tint), transparent 66%); } .auth-aside > * { position: relative; z-index: 1; } .auth-aside__title { font-size: clamp(1.8rem, 2.9vw, 2.5rem); margin: 20px 0 18px; } .auth-aside__text { color: var(--invert-dim); max-width: 400px; } .auth-aside__foot { color: var(--invert-mute); font-size: 13px; } .auth-points { display: grid; gap: 14px; margin-top: 36px; } .auth-point { display: flex; align-items: flex-start; gap: 14px; font-size: 14.5px; color: var(--invert-dim); } .auth-point__dot { width: 26px; height: 26px; flex: none; margin-top: 1px; display: grid; place-items: center; border: 1px solid var(--invert-line); border-radius: 50%; } .auth-main { display: flex; align-items: center; justify-content: center; padding: 40px 32px; } .auth-box { width: 100%; max-width: 430px; } /* Индикатор шага */ .steps-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; } .steps-bar__dot { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-size: 12px; font-weight: 700; color: var(--text-mute); background: var(--surface); transition: all .4s var(--ease); } .steps-bar__dot.is-active, .steps-bar__dot.is-done { background: var(--invert-bg); border-color: var(--invert-bg); color: var(--invert-text); } .steps-bar__line { flex: 1; height: 1.5px; background: var(--line); position: relative; overflow: hidden; } .steps-bar__line::after { content: ''; position: absolute; inset: 0; background: var(--invert-bg); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease); } .steps-bar__line.is-filled::after { transform: scaleX(1); } /* Панель шага + анимация переключения */ .step-panel { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-xl); padding: 38px 36px 34px; box-shadow: var(--shadow-md); } .step-panel[hidden] { display: none; } .step-panel.slide-in { animation: slide-in .55s var(--ease) both; } .step-panel.slide-out { animation: slide-out .32s var(--ease) both; } .step-panel.slide-in-back { animation: slide-in-back .55s var(--ease) both; } @keyframes slide-in { from { opacity: 0; transform: translateX(46px) scale(.97); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } } @keyframes slide-in-back { from { opacity: 0; transform: translateX(-46px) scale(.97); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } } @keyframes slide-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-46px) scale(.97); filter: blur(5px); } } .step-panel__title { font-size: 1.65rem; margin: 14px 0 10px; } .step-panel__text { font-size: 14.5px; color: var(--text-dim); margin-bottom: 26px; } .step-panel__text b { color: var(--text); } /* Поля ввода */ .field { margin-bottom: 18px; } .field__label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); } .field__control { position: relative; display: flex; align-items: center; } .field__input { width: 100%; padding: 15px 18px; background: var(--surface-2); border: 1.5px solid var(--line-soft); border-radius: var(--r-md); color: var(--text); outline: none; transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease); } .field__input::placeholder { color: var(--text-faint); } .field__input:focus { background: var(--surface-3); border-color: var(--text-dim); box-shadow: 0 0 0 4px var(--ring); } .field__input:disabled { opacity: .6; } .field.has-error .field__input { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, transparent); } .field__error { display: block; min-height: 17px; margin-top: 6px; font-size: 12.5px; color: var(--danger); opacity: 0; transform: translateY(-3px); transition: opacity .25s var(--ease), transform .25s var(--ease); } .field.has-error .field__error { opacity: 1; transform: none; } /* Выпадающий список: тёмный фон и в закрытом, и в открытом виде */ select.field__input { appearance: none; cursor: pointer; padding-right: 44px; } select.field__input option { background: var(--surface-2); color: var(--text); } .select-wrap { position: relative; } .select-wrap::after { content: ''; position: absolute; right: 20px; top: 50%; pointer-events: none; width: 8px; height: 8px; margin-top: -6px; border-right: 1.6px solid var(--text-mute); border-bottom: 1.6px solid var(--text-mute); transform: rotate(45deg); } .field__toggle { position: absolute; right: 8px; background: none; border: none; cursor: pointer; padding: 8px; border-radius: 10px; color: var(--text-mute); display: grid; place-items: center; transition: color .2s var(--ease), background .2s var(--ease); } .field__toggle:hover { color: var(--text); background: var(--surface-3); } .field__hint { font-size: 12.5px; color: var(--text-mute); margin-top: 6px; } /* Иконка календаря у datetime-local по умолчанию чёрная — на тёмном фоне не видна. */ .field__input::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .45; cursor: pointer; transition: opacity .2s var(--ease); } .field__input::-webkit-calendar-picker-indicator:hover { opacity: 1; } textarea.field__input { resize: vertical; min-height: 90px; } /* Индикатор надёжности пароля */ .strength { display: flex; gap: 5px; margin-top: 9px; } .strength__bar { height: 3px; flex: 1; background: var(--line); border-radius: 3px; transition: background .35s var(--ease); } .strength__bar.is-on { background: var(--invert-bg); } /* Ввод кода из письма */ .code-inputs { display: flex; gap: 10px; justify-content: space-between; margin: 6px 0 8px; } .code-inputs input { width: 100%; height: 64px; text-align: center; font-size: 26px; font-weight: 700; background: var(--surface-2); color: var(--text); border: 1.5px solid var(--line-soft); border-radius: var(--r-md); outline: none; transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); } .code-inputs input:focus { background: var(--surface-3); border-color: var(--text-dim); transform: translateY(-2px); box-shadow: 0 0 0 4px var(--ring); } .code-inputs input.is-filled { background: var(--invert-bg); color: var(--invert-text); border-color: var(--invert-bg); } .code-inputs.is-wrong { animation: shake .45s var(--ease); } @keyframes shake { 0%, 100% { transform: translateX(0); } 18% { transform: translateX(-9px); } 38% { transform: translateX(8px); } 58% { transform: translateX(-5px); } 78% { transform: translateX(3px); } } .mail-badge { display: inline-flex; align-items: center; gap: 12px; padding: 10px 20px 10px 10px; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--r-full); font-size: 14px; font-weight: 600; margin-bottom: 6px; } .mail-badge__icon { width: 32px; height: 32px; flex: none; display: grid; place-items: center; background: var(--invert-bg); color: var(--invert-text); border-radius: 50%; } .resend-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; font-size: 13.5px; color: var(--text-mute); } .link-btn { background: none; border: none; padding: 0; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--text); border-bottom: 1px solid var(--line); transition: border-color .2s var(--ease); } .link-btn:hover:not(:disabled) { border-color: var(--text); } .link-btn:disabled { color: var(--text-faint); cursor: not-allowed; border-color: transparent; } .dev-code { margin-top: 16px; padding: 13px 18px; background: var(--surface-2); border: 1px dashed var(--line); border-radius: var(--r-md); font-size: 13px; color: var(--text-dim); } .dev-code b { font-size: 17px; color: var(--text); letter-spacing: .18em; } /* Успешное завершение */ .success-mark { width: 78px; height: 78px; margin: 0 auto 26px; display: grid; place-items: center; background: var(--invert-bg); color: var(--invert-text); border-radius: 50%; animation: pop .6s var(--ease) both; } @keyframes pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } } .form-foot { margin-top: 22px; text-align: center; font-size: 14px; color: var(--text-dim); } .form-foot a { font-weight: 600; color: var(--text); border-bottom: 1px solid var(--line); } .form-foot a:hover { border-color: var(--text); } .back-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--text-mute); transition: color .2s var(--ease); } .back-link:hover { color: var(--text); } /* ───────────────────────────────────────────────────────────── Профиль ───────────────────────────────────────────────────────────── */ .profile-hero { background: var(--invert-bg); color: var(--invert-text); border-radius: var(--r-xl); padding: clamp(32px, 4.2vw, 52px); margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 26px; position: relative; overflow: hidden; } .profile-hero::before { content: ''; position: absolute; width: 480px; height: 480px; right: -190px; top: -240px; border-radius: 50%; background: radial-gradient(circle, var(--invert-tint), transparent 66%); } .profile-hero > * { position: relative; z-index: 1; } .profile-avatar { width: 92px; height: 92px; flex: none; display: grid; place-items: center; background: var(--invert-text); color: var(--invert-bg); border-radius: 30px; font-size: 32px; font-weight: 700; } .profile-hero__name { font-size: clamp(1.6rem, 2.9vw, 2.3rem); } .profile-hero__meta { color: var(--invert-mute); font-size: 14.5px; margin-top: 8px; } .profile-hero__actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: 12px; } .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; } .info-card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 30px 28px; } .info-card__title { font-size: 1.12rem; margin-bottom: 4px; } .info-card__sub { font-size: 13.5px; color: var(--text-mute); margin-bottom: 22px; } .info-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--line-soft); } .info-row:last-child { border-bottom: none; } .info-row__label { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); } .info-row__value { font-size: 15px; font-weight: 600; text-align: right; word-break: break-word; } .info-row__value.is-empty { color: var(--text-faint); font-weight: 500; } .secret { display: inline-flex; align-items: center; gap: 10px; } .secret__dots { letter-spacing: .28em; font-size: 17px; } /* Кнопка-баннер «Рабочая панель задач» */ .workboard-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; margin: 18px 0 40px; background: var(--invert-bg); color: var(--invert-text); border-radius: var(--r-xl); padding: clamp(28px, 3.6vw, 44px); position: relative; overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s var(--ease); } .workboard-cta:hover { transform: translateY(-4px); box-shadow: 0 24px 60px var(--glow); } .workboard-cta::before { content: ''; position: absolute; width: 420px; height: 420px; right: -150px; bottom: -240px; border-radius: 50%; background: radial-gradient(circle, var(--invert-tint), transparent 66%); } .workboard-cta > * { position: relative; z-index: 1; } .workboard-cta h3 { font-size: clamp(1.35rem, 2.2vw, 1.8rem); margin-top: 16px; margin-bottom: 8px; } .workboard-cta p { color: var(--invert-mute); font-size: 14.5px; max-width: 460px; } .workboard-cta .btn { margin-left: auto; } /* ───────────────────────────────────────────────────────────── Рабочая панель задач ───────────────────────────────────────────────────────────── */ .board-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 26px 0; } .board-head h1 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin-top: 12px; } .stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; } .stat { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 20px 24px; } .stat--accent { background: var(--invert-bg); color: var(--invert-text); border-color: var(--invert-bg); } .stat__value { font-size: 1.9rem; font-weight: 700; letter-spacing: -.03em; } .stat__label { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); margin-top: 4px; } .stat--accent .stat__label { color: var(--invert-mute); } .board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; padding-bottom: 60px; } .column { background: var(--surface); border: 1.5px dashed transparent; border-radius: var(--r-lg); padding: 16px; min-height: 240px; transition: background .25s var(--ease), border-color .25s var(--ease); } .column.is-drop { background: var(--surface-2); border-color: var(--text-dim); } .column__head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 0 4px; } .column__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--invert-bg); } .column__dot--progress { background: var(--text-mute); } .column__dot--done { background: var(--text-faint); } .column__title { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .column__count { margin-left: auto; min-width: 24px; height: 24px; padding: 0 8px; display: grid; place-items: center; background: var(--surface-3); border-radius: var(--r-full); font-size: 12px; font-weight: 700; } .column__list { display: grid; gap: 12px; min-height: 60px; } .task-card { background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 17px 17px 15px; cursor: grab; animation: card-in .4s var(--ease) backwards; transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease), opacity .25s var(--ease); } .task-card:hover { transform: translateY(-3px); border-color: var(--line); box-shadow: var(--shadow-md); } .task-card.is-dragging { opacity: .35; cursor: grabbing; } .task-card.is-removing { animation: card-out .3s var(--ease) both; } @keyframes card-in { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } } @keyframes card-out { to { opacity: 0; transform: scale(.94); } } .task-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .task-card__patient { font-size: 15.5px; font-weight: 700; } .task-card__procedure { font-size: 13.5px; color: var(--text-dim); margin-top: 3px; } .task-card__notes { font-size: 13px; color: var(--text-dim); margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft); white-space: pre-wrap; word-break: break-word; } .task-card__meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; } .tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; background: var(--surface-3); border-radius: var(--r-full); font-size: 12px; font-weight: 600; color: var(--text-dim); } .tag--accent { background: var(--invert-bg); color: var(--invert-text); } .icon-btn { width: 30px; height: 30px; flex: none; display: grid; place-items: center; background: none; border: none; border-radius: 9px; color: var(--text-faint); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color .2s var(--ease), background .2s var(--ease), transform .38s var(--ease-soft), box-shadow .2s var(--ease); } .icon-btn:hover { color: var(--text); background: var(--surface-3); } .icon-btn:active:not(:disabled) { transform: scale(.88); box-shadow: inset 0 2px 7px var(--press-inset); transition-duration: .08s; } .icon-btn--danger:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); } .card-actions { display: flex; gap: 2px; } .empty-col { padding: 26px 14px; text-align: center; font-size: 13px; color: var(--text-mute); border: 1.5px dashed var(--line); border-radius: var(--r-md); } /* ───────────────────────────────────────────────────────────── Рабочая панель: вкладки ───────────────────────────────────────────────────────────── */ .tabs-head { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 26px 0 22px; } .tabs { display: inline-flex; gap: 4px; padding: 5px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-full); } .tab { display: inline-flex; align-items: center; gap: 9px; padding: 10px 22px; background: none; border: none; border-radius: var(--r-full); color: var(--text-mute); font-size: 14.5px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color .25s var(--ease), background .25s var(--ease), transform .42s var(--ease-soft), box-shadow .25s var(--ease); } .tab:hover { color: var(--text); background: var(--glass-fill); } .tab:active { transform: scale(.955); box-shadow: inset 0 2px 8px var(--press-inset); transition-duration: .09s; } .tab.is-active { background: var(--invert-bg); color: var(--invert-text); box-shadow: var(--shadow-sm); } .tab.is-active:active { box-shadow: inset 0 2px 8px var(--invert-press); } .tabs-head__slot { display: flex; align-items: center; gap: 12px; margin-left: auto; } .tab-panel[hidden] { display: none; } /* Поиск в шапке вкладки */ .search { position: relative; display: flex; align-items: center; width: min(320px, 60vw); } .search svg { position: absolute; left: 16px; color: var(--text-mute); pointer-events: none; } .search input { width: 100%; padding: 12px 16px 12px 44px; background: var(--surface); color: var(--text); border: 1.5px solid var(--line-soft); border-radius: var(--r-full); outline: none; transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease); } .search input::placeholder { color: var(--text-faint); } .search input:focus { background: var(--surface-2); border-color: var(--text-dim); box-shadow: 0 0 0 4px var(--ring); } .search__clear { position: absolute; right: 8px; background: none; border: none; cursor: pointer; padding: 7px; border-radius: 50%; color: var(--text-mute); display: grid; place-items: center; } .search__clear:hover { color: var(--text); background: var(--surface-3); } /* ── Записи: блокнот + календарь ──────────────────────────── */ .records-grid { display: grid; grid-template-columns: 1fr 380px; gap: 18px; align-items: start; } .notepad { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 26px 26px 20px; min-height: 540px; } .notepad__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .notepad__title { font-size: 1.2rem; } .notepad__sub { font-size: 13.5px; color: var(--text-mute); margin-top: 3px; } .save-state { font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--text-mute); white-space: nowrap; padding: 6px 13px; border-radius: var(--r-full); background: var(--surface-2); transition: color .3s var(--ease), background .3s var(--ease); } .save-state.is-dirty { color: #e0b341; background: rgba(224, 179, 65, .12); } .save-state.is-saved { color: #63c08a; background: rgba(99, 192, 138, .12); } .notepad__area { flex: 1; width: 100%; padding: 20px 22px; background: var(--surface-2); border: 1.5px solid var(--line-soft); border-radius: var(--r-md); color: var(--text); font-size: 15px; line-height: 1.75; resize: none; outline: none; transition: border-color .25s var(--ease), box-shadow .25s var(--ease); } .notepad__area::placeholder { color: var(--text-faint); } .notepad__area:focus { border-color: var(--text-dim); box-shadow: 0 0 0 4px var(--ring); } .notepad__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; } .notepad__hint { font-size: 12.5px; color: var(--text-faint); } /* ── Календарь ────────────────────────────────────────────── */ .calendar { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 22px; } .clock { background: var(--invert-bg); color: var(--invert-text); border-radius: var(--r-md); padding: 20px 22px; margin-bottom: 20px; text-align: center; } .clock__time { font-size: 2.35rem; font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; line-height: 1.1; } .clock__zone { font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--invert-mute); margin-top: 6px; } .clock__date { font-size: 13.5px; color: var(--invert-dim); margin-top: 10px; } .calendar__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .calendar__month { font-size: 15px; font-weight: 700; text-transform: capitalize; } .calendar__nav { width: 32px; height: 32px; flex: none; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 10px; color: var(--text-dim); cursor: pointer; transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease); } .calendar__nav:hover { color: var(--text); background: var(--surface-3); border-color: var(--line); } .calendar__nav:active { transform: scale(.9); box-shadow: inset 0 2px 7px var(--press-inset); transition-duration: .08s; } .calendar__weekdays, .calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .calendar__weekdays { margin-bottom: 6px; } .calendar__weekdays span { text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); padding: 6px 0; } .calendar__weekdays .is-weekend { color: var(--text-mute); } /* Клик по дню отмечает его выходным */ .day { position: relative; aspect-ratio: 1; display: grid; place-items: center; background: none; border: 1.5px solid transparent; border-radius: 12px; color: var(--text-dim); font-size: 13.5px; font-weight: 600; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .38s var(--ease-soft), box-shadow .2s var(--ease); } .day:hover { background: var(--surface-3); color: var(--text); transform: translateY(-2px); } .day:active { transform: translateY(0) scale(.9); box-shadow: inset 0 2px 7px var(--press-inset); transition-duration: .08s; } .day:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); } .day--muted { color: var(--text-faint); opacity: .5; } .day--weekend { color: var(--text-mute); } .day--today { background: var(--invert-bg); color: var(--invert-text); border-color: var(--invert-bg); } .day--today:hover { background: var(--invert-bg); color: var(--invert-text); } /* Отмеченный выходной перебивает и «сегодня», и наведение */ .day--off, .day--off:hover, .day--today.day--off { background: var(--dayoff-bg); color: var(--dayoff-text); border-color: var(--dayoff-border); opacity: 1; } /* Сегодняшний выходной — чуть заметнее рамкой */ .day--today.day--off { border-width: 2px; } .calendar__hint { display: flex; align-items: center; gap: 9px; margin-top: 16px; font-size: 12.5px; color: var(--text-mute); } .calendar__swatch { width: 14px; height: 14px; flex: none; border-radius: 5px; background: var(--dayoff-bg); border: 1.5px solid var(--dayoff-border); } /* ── Списки пациентов и контактов ─────────────────────────── */ .list-card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg); overflow: hidden; } .list-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 26px 20px; border-bottom: 1px solid var(--line-soft); } /* Поиск и кнопка действия — в шапке карточки, справа от заголовка */ .list-card__actions { display: flex; align-items: center; gap: 12px; margin-left: auto; } .list-card__title { font-size: 1.15rem; } .list-card__sub { font-size: 13.5px; color: var(--text-mute); margin-top: 3px; } .entry { display: grid; grid-template-columns: auto minmax(0, 1.3fr) minmax(0, 1fr) auto; align-items: flex-start; gap: 18px; padding: 20px 26px; border-bottom: 1px solid var(--line-soft); transition: background .2s var(--ease); animation: card-in .4s var(--ease) backwards; } .entry:last-child { border-bottom: none; } .entry:hover { background: var(--surface-2); } .entry.is-removing { animation: card-out .3s var(--ease) both; } .entry__avatar { width: 44px; height: 44px; flex: none; display: grid; place-items: center; background: var(--surface-3); color: var(--text); border-radius: 14px; font-size: 14px; font-weight: 700; } .entry__name { font-size: 15.5px; font-weight: 700; } .entry__phone { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--text-dim); margin-top: 4px; font-variant-numeric: tabular-nums; } .entry__phone a { border-bottom: 1px solid transparent; transition: border-color .2s var(--ease); } .entry__phone a:hover { border-color: var(--text-dim); } .entry__description { font-size: 13.5px; color: var(--text-dim); line-height: 1.6; white-space: pre-wrap; word-break: break-word; } .entry__meta { font-size: 12px; color: var(--text-faint); margin-top: 8px; } /* Контакт — только имя и телефон, поэтому третья колонка узкая и справа */ .entry--compact { grid-template-columns: auto minmax(0, 1fr) auto auto; } .entry--compact .entry__meta { margin-top: 0; text-align: right; white-space: nowrap; } .entry__empty { color: var(--text-faint); font-size: 13.5px; } mark { background: var(--mark-bg); color: var(--text); border-radius: 4px; padding: 0 2px; } /* ── Заметки: карточка с раскрывающимся описанием ─────────── */ .memo { border-bottom: 1px solid var(--line-soft); animation: card-in .4s var(--ease) backwards; transition: background .2s var(--ease); } .memo:last-child { border-bottom: none; } .memo:hover { background: var(--surface-2); } .memo.is-removing { animation: card-out .3s var(--ease) both; } .memo__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 20px 26px; } /* Стрелка слева — раскрывает описание */ .memo__toggle { width: 34px; height: 34px; flex: none; display: grid; place-items: center; background: var(--surface-3); border: 1px solid var(--line-soft); border-radius: 11px; color: var(--text-dim); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color .2s var(--ease), background .2s var(--ease), transform .38s var(--ease-soft), box-shadow .2s var(--ease); } .memo__toggle:hover { color: var(--text); background: var(--line); } .memo__toggle:active { transform: scale(.9); box-shadow: inset 0 2px 7px var(--press-inset); transition-duration: .08s; } .memo__toggle svg { transition: transform .35s var(--ease); } .memo.is-open .memo__toggle svg { transform: rotate(90deg); } .memo.is-open .memo__toggle { background: var(--invert-bg); color: var(--invert-text); border-color: var(--invert-bg); } .memo__title { font-size: 16px; font-weight: 700; word-break: break-word; } .memo__meta { font-size: 12px; color: var(--text-faint); margin-top: 3px; } .memo__body { padding: 0 26px 22px 76px; animation: memo-open .35s var(--ease) both; } .memo__body[hidden] { display: none; } @keyframes memo-open { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } .memo__area { width: 100%; min-height: 190px; padding: 18px 20px; background: var(--surface-2); border: 1.5px solid var(--line-soft); border-radius: var(--r-md); color: var(--text); font-size: 15px; line-height: 1.7; resize: vertical; outline: none; transition: border-color .25s var(--ease), box-shadow .25s var(--ease); } .memo__area::placeholder { color: var(--text-faint); } .memo__area:focus { border-color: var(--text-dim); box-shadow: 0 0 0 4px var(--ring); } .memo__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; } /* ───────────────────────────────────────────────────────────── Рабочая панель заметно крупнее остального сайта: с этими списками и формами работают каждый день, мелкие цели неудобны. ───────────────────────────────────────────────────────────── */ .panel-page .btn { padding: 17px 34px; font-size: 18px; } .panel-page .btn--sm { padding: 12px 23px; font-size: 16px; } .panel-page .tab { padding: 13px 28px; font-size: 17.5px; gap: 10px; } .panel-page .tab svg { width: 19px; height: 19px; } .panel-page .icon-btn { width: 38px; height: 38px; border-radius: 12px; } .panel-page .icon-btn svg { width: 18px; height: 18px; } .panel-page .board-head h1 { font-size: clamp(2rem, 3.6vw, 2.8rem); } .panel-page .field__label { font-size: 14px; } .panel-page .field__input { padding: 18px 23px; font-size: 19px; border-radius: 22px; } .panel-page textarea.field__input { min-height: 120px; } .panel-page .search { width: min(380px, 62vw); } .panel-page .search input { padding: 17px 21px 17px 52px; font-size: 18px; } .panel-page .search svg { left: 20px; width: 19px; height: 19px; } .panel-page .modal__box { max-width: 655px; padding: 40px 40px 36px; } .panel-page .modal__title { font-size: 1.68rem; } .panel-page .modal__sub { font-size: 16px; } .panel-page .modal__foot { margin-top: 28px; } .panel-page .list-card__head { padding: 30px 32px 25px; } .panel-page .list-card__title { font-size: 1.43rem; } .panel-page .list-card__sub { font-size: 16.5px; } .panel-page .entry { padding: 25px 32px; gap: 23px; } .panel-page .entry__avatar { width: 55px; height: 55px; font-size: 17px; border-radius: 17px; } .panel-page .entry__name { font-size: 19px; } .panel-page .entry__phone { font-size: 16.5px; } .panel-page .entry__phone svg { width: 15px; height: 15px; } .panel-page .entry__description { font-size: 16.5px; } .panel-page .entry__meta { font-size: 13.5px; } .panel-page .memo__head { padding: 25px 32px; } .panel-page .memo__body { padding: 0 32px 28px 92px; } .panel-page .memo__title { font-size: 19.5px; } .panel-page .memo__meta { font-size: 13.5px; } .panel-page .memo__area { font-size: 18px; min-height: 236px; padding: 23px 25px; } .panel-page .memo__toggle { width: 43px; height: 43px; border-radius: 13px; } .panel-page .memo__toggle svg { width: 17px; height: 17px; } .panel-page .notepad { padding: 32px 32px 25px; } .panel-page .notepad__area { padding: 25px 28px; font-size: 18px; } .panel-page .notepad__title { font-size: 1.5rem; } .panel-page .notepad__sub { font-size: 15.5px; } .panel-page .notepad__hint { font-size: 14px; } .panel-page .save-state { font-size: 13.5px; padding: 7px 15px; } /* Блокнот занимает всю высоту экрана — он основной рабочий инструмент. Календарь прижат к верху и отодвинут вправо увеличенным зазором. */ .panel-page .records-grid { grid-template-columns: 1fr 460px; gap: 32px; align-items: stretch; } /* Блокнот тянется во всю высоту строки — вровень с календарём, но не ниже экрана, если календарь вдруг окажется коротким. */ .panel-page .notepad { min-height: calc(100vh - 250px); } .panel-page .calendar { align-self: start; position: sticky; top: 96px; } .panel-page .calendar { padding: 28px; } .panel-page .clock { padding: 23px 25px; } .panel-page .clock__time { font-size: 2.93rem; } .panel-page .clock__zone { font-size: 12px; } .panel-page .clock__date { font-size: 15.5px; } .panel-page .calendar__month { font-size: 17px; } .panel-page .calendar__nav { width: 37px; height: 37px; } .panel-page .calendar__weekdays span { font-size: 12.5px; } .panel-page .day { font-size: 16.5px; border-radius: 14px; } .panel-page .empty-state { font-size: 17px; padding: 74px 28px; } @media (max-width: 1100px) { .panel-page .records-grid { grid-template-columns: 1fr; } } /* ── Скользящий бегунок под активной вкладкой ─────────────── */ .tabs { position: relative; } .tabs__glider { position: absolute; top: 0; left: 0; z-index: 0; /* Ширину, высоту и сдвиг проставляет JS по активной вкладке */ border-radius: var(--r-full); background: var(--invert-bg); box-shadow: var(--shadow-sm); opacity: 0; /* Долгий мягкий выезд — именно он читается как «дорого» */ transition: transform .55s var(--ease-glide), width .55s var(--ease-glide), height .55s var(--ease-glide), background .3s var(--ease); pointer-events: none; } .tab { position: relative; z-index: 1; } /* Фон активной вкладки рисует бегунок, поэтому у самой вкладки его нет */ .tab.is-active { background: none; box-shadow: none; color: var(--invert-text); } .tab.is-active:hover { background: none; } .tab.is-active:active { box-shadow: none; } /* ── Появление содержимого вкладки ────────────────────────── */ .tab-panel { animation: none; } .tab-panel.is-entering { animation: panel-in .5s var(--ease-glide) both; } @keyframes panel-in { from { opacity: 0; transform: translateY(14px) scale(.995); } to { opacity: 1; transform: none; } } /* ── Закрытие модальных окон ──────────────────────────────── */ .modal.is-closing { animation: fade-out .26s var(--ease) both; } .modal.is-closing .modal__box { animation: modal-out .26s var(--ease) both; } @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes modal-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(14px) scale(.975); } } .modal__box { animation: modal-in .48s var(--ease-glide) both; } /* ── Списки: строки въезжают по очереди ───────────────────── */ .entry, .memo, .user-row { animation: row-in .48s var(--ease-glide) backwards; } .entry:nth-child(1), .memo:nth-child(1), .user-row:nth-child(1) { animation-delay: .02s; } .entry:nth-child(2), .memo:nth-child(2), .user-row:nth-child(2) { animation-delay: .06s; } .entry:nth-child(3), .memo:nth-child(3), .user-row:nth-child(3) { animation-delay: .10s; } .entry:nth-child(4), .memo:nth-child(4), .user-row:nth-child(4) { animation-delay: .14s; } .entry:nth-child(5), .memo:nth-child(5), .user-row:nth-child(5) { animation-delay: .18s; } .entry:nth-child(6), .memo:nth-child(6), .user-row:nth-child(6) { animation-delay: .21s; } .entry:nth-child(n+7), .memo:nth-child(n+7), .user-row:nth-child(n+7) { animation-delay: .24s; } @keyframes row-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* ── Услуги ───────────────────────────────────────────────── */ .entry--service { grid-template-columns: auto minmax(0, 1fr) auto auto; } .entry__avatar--service { background: var(--surface-3); color: var(--text-dim); transition: background .35s var(--ease), color .35s var(--ease), transform .45s var(--ease-soft); } .entry--service:hover .entry__avatar--service { background: var(--invert-bg); color: var(--invert-text); transform: rotate(-6deg) scale(1.05); } .service__price { font-size: 18px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: -.01em; } /* Поле цены со знаком рубля внутри */ .field__input--price { padding-right: 46px; } .field__suffix { position: absolute; right: 20px; font-size: 17px; font-weight: 600; color: var(--text-mute); pointer-events: none; } /* Строка поиска под шапкой карточки */ .list-card__search { padding: 18px 26px; border-bottom: 1px solid var(--line-soft); } .list-card__search .search { width: 100%; } /* ── Общая плавность ──────────────────────────────────────── */ .tile, .stat, .info-card, .list-card, .notepad, .calendar, .admin-cta, .workboard-cta { transition: transform .5s var(--ease-glide), box-shadow .5s var(--ease-glide), border-color .4s var(--ease), background-color .4s var(--ease); } .entry:hover, .memo:hover, .user-row:hover { transition-duration: .35s; } .field__input, .search input, .notepad__area, .memo__area { transition: border-color .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease); } /* Иконки внутри кнопок слегка подаются вперёд при наведении */ .btn svg { transition: transform .45s var(--ease-soft); } .btn:hover:not(:disabled) svg { transform: translateX(2px); } .btn--block:hover:not(:disabled) svg, .btn--primary[data-open-patient]:hover svg, .btn--primary[data-open-contact]:hover svg, .btn--primary[data-open-memo]:hover svg, .btn--primary[data-open-service]:hover svg { transform: rotate(90deg); } /* Уважаем системную настройку «меньше движения» */ @media (prefers-reduced-motion: reduce) { .tabs__glider { transition: none; } .tab-panel.is-entering, .entry, .memo, .user-row, .modal__box { animation: none; } } /* ───────────────────────────────────────────────────────────── Панель администратора: список аккаунтов ───────────────────────────────────────────────────────────── */ .user-table { display: flex; flex-direction: column; } .user-row { display: grid; grid-template-columns: auto minmax(180px, 1.4fr) minmax(140px, 1.2fr) auto auto auto; align-items: center; gap: 18px; padding: 18px 26px; border-bottom: 1px solid var(--line-soft); transition: background .2s var(--ease); animation: card-in .4s var(--ease) backwards; } .user-row:last-child { border-bottom: none; } .user-row:hover { background: var(--surface-2); } .user-row.is-removing { animation: card-out .3s var(--ease) both; } .user-row__avatar { width: 42px; height: 42px; flex: none; display: grid; place-items: center; background: var(--surface-3); color: var(--text); border-radius: 14px; font-size: 14px; font-weight: 700; } .user-row__avatar--admin { background: var(--invert-bg); color: var(--invert-text); } .user-row__login { font-size: 15px; font-weight: 700; } .user-row__email { font-size: 13px; color: var(--text-mute); margin-top: 2px; word-break: break-all; } .user-row__name { font-size: 14px; } .user-row__position { font-size: 12.5px; color: var(--text-mute); margin-top: 2px; } .user-row__dim { color: var(--text-faint); } .role-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: var(--r-full); font-size: 12px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; } .role-badge--admin { background: var(--invert-bg); color: var(--invert-text); } .role-badge--staff { background: var(--surface-3); color: var(--text-dim); } .user-row__tasks { font-size: 12.5px; color: var(--text-mute); white-space: nowrap; text-align: right; } .user-row__tasks b { color: var(--text); font-size: 14px; } .you-mark { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--text-faint); text-transform: uppercase; } .empty-state { padding: 60px 24px; text-align: center; color: var(--text-mute); font-size: 14px; } /* Переключатель «права администратора» */ .switch-row { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; margin-top: 6px; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--r-md); cursor: pointer; transition: border-color .2s var(--ease); } .switch-row:hover { border-color: var(--line); } .switch-row input { position: absolute; opacity: 0; pointer-events: none; } .switch-row b { display: block; font-size: 14px; } .switch-row__hint { display: block; font-size: 12.5px; color: var(--text-mute); margin-top: 3px; } .switch { position: relative; flex: none; width: 42px; height: 24px; margin-top: 1px; background: var(--surface-3); border-radius: var(--r-full); transition: background .25s var(--ease); } .switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-mute); transition: transform .25s var(--ease), background .25s var(--ease); } .switch-row input:checked + .switch { background: var(--invert-bg); } .switch-row input:checked + .switch::after { transform: translateX(18px); background: var(--invert-text); } .switch-row input:focus-visible + .switch { box-shadow: 0 0 0 4px var(--ring); } /* Кнопка админки в профиле */ .admin-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(26px, 3.4vw, 40px); transition: transform .4s var(--ease), border-color .4s var(--ease); } .admin-cta:hover { transform: translateY(-4px); border-color: var(--text-faint); } .admin-cta h3 { font-size: clamp(1.3rem, 2.1vw, 1.7rem); margin: 16px 0 8px; } .admin-cta p { color: var(--text-dim); font-size: 14.5px; max-width: 460px; } .admin-cta .btn { margin-left: auto; } /* ── Модальное окно ───────────────────────────────────────── */ .modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; background: var(--veil); backdrop-filter: blur(5px); animation: fade-in .25s var(--ease) both; } .modal[hidden] { display: none; } .modal__box { width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 32px 32px 28px; box-shadow: var(--shadow-lg); animation: modal-in .4s var(--ease) both; } .modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; } .modal__title { font-size: 1.35rem; } .modal__sub { font-size: 13.5px; color: var(--text-mute); margin-top: 4px; } .modal__foot { display: flex; gap: 12px; margin-top: 24px; } .modal__foot .btn { flex: 1; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes modal-in { from { opacity: 0; transform: translateY(22px) scale(.97); } to { opacity: 1; transform: none; } } .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } /* ── Уведомления ──────────────────────────────────────────── */ .toasts { position: fixed; right: 22px; bottom: 22px; z-index: 300; display: grid; gap: 10px; max-width: min(360px, calc(100vw - 44px)); } .toast { display: flex; align-items: center; gap: 12px; padding: 14px 20px; background: var(--invert-bg); color: var(--invert-text); border-radius: var(--r-md); font-size: 14px; font-weight: 600; box-shadow: var(--shadow-lg); animation: toast-in .4s var(--ease) both; } .toast.is-out { animation: toast-out .3s var(--ease) both; } .toast--error { background: var(--danger); color: #fff; } @keyframes toast-in { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } } @keyframes toast-out { to { opacity: 0; transform: translateX(28px); } } /* ── Заглушка загрузки ────────────────────────────────────── */ .page-loader { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: var(--bg); transition: opacity .4s var(--ease), visibility .4s var(--ease); } .page-loader.is-hidden { opacity: 0; visibility: hidden; } .page-loader__spinner { width: 34px; height: 34px; border: 2px solid var(--line); border-top-color: var(--text); border-radius: 50%; animation: spin .8s linear infinite; } /* ── Адаптив ──────────────────────────────────────────────── */ @media (max-width: 1000px) { .hero__grid { grid-template-columns: 1fr; gap: 40px; } .cards, .stat-row, .board { grid-template-columns: 1fr 1fr; } .records-grid { grid-template-columns: 1fr; } .entry { grid-template-columns: auto minmax(0, 1fr) auto; } .entry__description { grid-column: 2 / -1; } .info-grid { grid-template-columns: 1fr; } .auth-page { grid-template-columns: 1fr; } .auth-aside { display: none; } .site-nav { display: none; } .site-header__inner { grid-template-columns: 1fr auto; } } @media (max-width: 640px) { .shell { padding: 0 16px; } .cards, .stat-row, .board, .row-2, .hero__row { grid-template-columns: 1fr; } .step-panel { padding: 30px 22px 26px; } .code-inputs { gap: 7px; } .code-inputs input { height: 54px; font-size: 21px; } .logo__sub { display: none; } /* На узком экране шапка не помещалась в строку и давала прокрутку вбок: сокращаем логотип и оставляем от чипа только аватар с инициалами. */ .site-header__inner { gap: 12px; } .logo__name { font-size: 14px; letter-spacing: .16em; } .user-chip { padding: 5px; gap: 0; } .user-chip__login { display: none; } .profile-hero__actions { margin-left: 0; width: 100%; } .workboard-cta .btn, .admin-cta .btn { margin-left: 0; width: 100%; } .user-row { grid-template-columns: auto 1fr auto; row-gap: 10px; padding: 16px 18px; } .user-row__name-cell, .user-row__tasks { grid-column: 2 / -1; text-align: left; } .tabs { width: 100%; justify-content: space-between; flex-wrap: wrap; } .tab { flex: 1 1 45%; justify-content: center; padding: 10px 8px; font-size: 13px; } .tab svg { display: none; } .tabs-head__slot { margin-left: 0; width: 100%; } .search { width: 100%; } .entry { padding: 16px 18px; } .list-card__head { padding: 20px 18px 16px; } /* На узком экране поиск и кнопка не влезали в строку с заголовком и обрезались рамкой карточки — раскладываем их в столбик. */ .list-card__actions { width: 100%; margin-left: 0; flex-wrap: wrap; } .list-card__actions .search, .list-card__actions .btn { width: 100%; } .panel-page .list-card__actions .search { width: 100%; } .toasts { right: 12px; left: 12px; bottom: 12px; max-width: none; } } /* ── Опасная кнопка ───────────────────────────────────────── */ .btn--danger { background: var(--danger); color: #fff; box-shadow: var(--shadow-sm); } .btn--danger::before { background: linear-gradient(180deg, rgba(255,255,255,.3), transparent 55%); opacity: .4; } .btn--danger:hover:not(:disabled) { box-shadow: 0 12px 32px color-mix(in srgb, var(--danger) 40%, transparent); } .btn--danger:active:not(:disabled) { box-shadow: inset 0 3px 10px rgba(0, 0, 0, .35); } /* ── Окно подтверждения ───────────────────────────────────── */ .modal--confirm .modal__box { max-width: 440px; text-align: center; padding: 38px 34px 30px; } .confirm__icon { width: 62px; height: 62px; margin: 0 auto 20px; display: grid; place-items: center; background: var(--surface-3); color: var(--text-dim); border-radius: 22px; animation: confirm-pop .5s var(--ease-soft) both .06s; } .confirm__icon--danger { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); } @keyframes confirm-pop { from { opacity: 0; transform: scale(.6) rotate(-12deg); } to { opacity: 1; transform: none; } } .confirm__title { font-size: 1.35rem; margin-bottom: 10px; } .confirm__text { font-size: 14.5px; line-height: 1.6; color: var(--text-dim); } .confirm__text b { color: var(--text); } .confirm__foot { display: flex; gap: 12px; margin-top: 28px; } .confirm__foot .btn { flex: 1; } /* ── Окно расчёта: выбор услуг ────────────────────────────── */ .modal__box--wide { max-width: 620px; } .modal__foot--end { justify-content: flex-end; } .modal__foot--end .btn { flex: 0 0 auto; } .picker { display: grid; gap: 8px; max-height: min(46vh, 380px); overflow-y: auto; padding: 4px 4px 4px 0; margin-bottom: 20px; } .pick { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 14px; user-select: none; padding: 15px 18px; background: var(--surface-2); border: 1.5px solid var(--line-soft); border-radius: var(--r-md); cursor: pointer; transition: border-color .3s var(--ease), background .3s var(--ease), transform .4s var(--ease-glide); } .pick:hover { border-color: var(--line); transform: translateX(3px); } .pick.is-picked { border-color: var(--text-dim); background: var(--surface-3); } .pick:focus-visible { outline: none; border-color: var(--text-dim); box-shadow: 0 0 0 3px var(--ring); } .pick__mark { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border: 1.6px solid var(--line); border-radius: 8px; color: transparent; transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .4s var(--ease-soft); } .pick.is-picked .pick__mark { background: var(--invert-bg); border-color: var(--invert-bg); color: var(--invert-text); transform: scale(1.08); } .pick__title { font-size: 15.5px; font-weight: 600; } .pick__price { font-size: 15px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text-dim); } .pick.is-picked .pick__price { color: var(--text); } /* Что выбрали */ .picker-summary { padding: 18px 20px; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--r-md); } .picker-summary__label { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 12px; } .picker-summary__chips { display: flex; flex-wrap: wrap; gap: 8px; } .picker-summary__empty { font-size: 14px; color: var(--text-faint); } .chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 8px 7px 14px; background: var(--invert-bg); color: var(--invert-text); border-radius: var(--r-full); font-size: 13.5px; font-weight: 600; animation: chip-pop .35s var(--ease-soft) both; } @keyframes chip-pop { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } } .chip__x { width: 20px; height: 20px; flex: none; display: grid; place-items: center; background: color-mix(in srgb, var(--invert-text) 12%, transparent); border: none; border-radius: 50%; color: inherit; cursor: pointer; transition: background .25s var(--ease), transform .35s var(--ease-soft); } .chip__x:hover { background: color-mix(in srgb, var(--invert-text) 26%, transparent); } .chip__x:active { transform: scale(.85); } /* Счётчик количества у выбранной услуги */ .qty { display: inline-flex; align-items: center; gap: 2px; padding: 3px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-full); transition: opacity .3s var(--ease), transform .4s var(--ease-soft); } .qty.is-off { opacity: .25; pointer-events: none; transform: scale(.94); } .qty__btn { width: 30px; height: 30px; flex: none; display: grid; place-items: center; background: none; border: none; border-radius: 50%; color: var(--text-dim); font-size: 17px; line-height: 1; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .25s var(--ease), color .25s var(--ease), transform .35s var(--ease-soft); } .qty__btn:hover { background: var(--surface-3); color: var(--text); } .qty__btn:active { transform: scale(.85); } .qty__num { min-width: 26px; text-align: center; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; } /* Итог прямо в блоке выбранного */ .picker-summary__total { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; } .picker-summary__total:empty { display: none; } .chip__qty { font-weight: 800; opacity: .75; } /* ── Окно результата ──────────────────────────────────────── */ .result { text-align: center; padding-top: 6px; } .result__close { position: absolute; top: 20px; right: 20px; } .result__label { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--text-mute); } .result__total { font-size: clamp(2.6rem, 7vw, 3.6rem); font-weight: 700; letter-spacing: -.04em; margin: 10px 0 6px; font-variant-numeric: tabular-nums; animation: total-in .7s var(--ease-glide) both .1s; } .result__count { font-size: 14px; color: var(--text-dim); margin-bottom: 26px; } @keyframes total-in { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } } .result__list { display: grid; gap: 2px; text-align: left; max-height: min(40vh, 320px); overflow-y: auto; border-top: 1px solid var(--line-soft); padding-top: 14px; } .result__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 13px 6px; border-bottom: 1px solid var(--line-soft); animation: row-in .5s var(--ease-glide) backwards; animation-delay: calc(.16s + var(--i, 0) * .05s); } .result__row:last-child { border-bottom: none; } .result__num { font-size: 11.5px; font-weight: 700; color: var(--text-faint); font-variant-numeric: tabular-nums; } .result__name { font-size: 15px; font-weight: 600; display: block; } .result__calc { display: block; margin-top: 3px; font-size: 12.5px; color: var(--text-mute); font-variant-numeric: tabular-nums; } .result__price { font-size: 15px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text-dim); } /* ── Перетаскивание услуг ─────────────────────────────────── */ .service__grip { cursor: grab; touch-action: none; transition: background .35s var(--ease), color .35s var(--ease), transform .4s var(--ease-soft); } .service__grip:hover { transform: scale(1.06); } .service__grip:active { cursor: grabbing; } /* Пока тащим — соседи едут плавно, а текст не выделяется. Анимацию появления гасим: с fill-mode она перехватывает transform и строка отказывается двигаться за курсором. */ .is-sorting { user-select: none; } .is-sorting .entry--service { animation: none; transition: transform .22s var(--ease-glide); } /* Строка в руке: приподнята, с тенью, поверх остальных */ .entry--service.is-lifted { position: relative; z-index: 5; background: var(--surface-2); border-radius: var(--r-md); box-shadow: var(--shadow-lg); transition: box-shadow .2s var(--ease), background .2s var(--ease); cursor: grabbing; } .entry--service.is-lifted .service__grip { cursor: grabbing; } .is-sorting .entry--service.is-lifted { transition: none; } @media (max-width: 640px) { .modal--confirm .modal__box { padding: 32px 22px 26px; } .confirm__foot { flex-direction: column-reverse; } .pick { grid-template-columns: auto minmax(0, 1fr); row-gap: 10px; } .pick__price { grid-column: 2; } .qty { grid-column: 2; justify-self: start; } .modal__foot--end { flex-direction: column; } .modal__foot--end .btn { width: 100%; } } /* ═════════════════════════════════════════════════════════════ ОФОРМЛЕНИЕ САЙТА Всё в этом блоке намеренно исключает `.panel-page` — рабочая панель остаётся такой, какой была, её оформление не трогаем. ═════════════════════════════════════════════════════════════ */ /* ── Живой фон: два медленно дышащих световых пятна ───────── */ body:not(.panel-page) { position: relative; isolation: isolate; } body:not(.panel-page)::before { content: ''; position: fixed; inset: -20vmax; z-index: -2; pointer-events: none; background: radial-gradient(38vmax 38vmax at 18% 12%, var(--aurora-a), transparent 62%), radial-gradient(32vmax 32vmax at 84% 78%, var(--aurora-b), transparent 60%); animation: aurora 26s var(--ease) infinite alternate; } @keyframes aurora { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(2vmax, -2vmax, 0) scale(1.06); } 100% { transform: translate3d(-2vmax, 2vmax, 0) scale(1.02); } } /* Тонкое зерно — убирает «пластиковость» больших заливок */ body:not(.panel-page)::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--grain-opacity); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); } /* ── Появление страницы ───────────────────────────────────── */ body:not(.panel-page) .site-header { animation: drop-in .7s var(--ease-glide) both; } body:not(.panel-page) main { animation: rise-in .8s var(--ease-glide) both .06s; } body:not(.panel-page) .site-footer { animation: rise-in .8s var(--ease-glide) both .16s; } @keyframes drop-in { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } } @keyframes rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } /* ── Появление при прокрутке: мягче и со сдвигом по очереди ── */ body:not(.panel-page) .reveal { opacity: 0; transform: translateY(30px) scale(.985); filter: blur(6px); transition: opacity .9s var(--ease-glide), transform .9s var(--ease-glide), filter .9s var(--ease-glide); transition-delay: calc(var(--i, 0) * 90ms); } body:not(.panel-page) .reveal.is-visible { opacity: 1; transform: none; filter: none; } /* ── Шапка ────────────────────────────────────────────────── */ body:not(.panel-page) .site-header { background: var(--header-bg); backdrop-filter: blur(20px) saturate(160%); } body:not(.panel-page) .site-header.is-stuck { box-shadow: 0 1px 0 var(--line-soft), 0 12px 30px rgba(0, 0, 0, .18); } .logo__mark { transition: transform .55s var(--ease-soft), box-shadow .45s var(--ease); } .logo:hover .logo__mark { transform: rotate(-8deg) scale(1.06); box-shadow: 0 10px 26px var(--glow); } .logo__name { transition: letter-spacing .5s var(--ease-glide); } .logo:hover .logo__name { letter-spacing: .3em; } /* ── Первый экран ─────────────────────────────────────────── */ .hero { padding: 30px 0 0; } .hero__panel { padding: clamp(44px, 6.5vw, 92px); box-shadow: var(--shadow-lg); animation: hero-in 1s var(--ease-glide) both; } @keyframes hero-in { from { opacity: 0; transform: translateY(26px) scale(.99); } to { opacity: 1; transform: none; } } /* Блик, медленно скользящий по панели */ .hero__panel::after { width: 150%; height: 150%; left: -25%; bottom: auto; top: -25%; background: conic-gradient(from 210deg at 50% 50%, transparent 0deg, var(--invert-tint) 60deg, transparent 140deg); animation: sheen-spin 22s linear infinite; } @keyframes sheen-spin { to { transform: rotate(360deg); } } /* Заголовок выезжает построчно */ .hero__title .line { display: block; overflow: hidden; } .hero__title .line > span { display: block; animation: line-up .95s var(--ease-glide) both; } .hero__title .line:nth-child(1) > span { animation-delay: .12s; } .hero__title .line:nth-child(2) > span { animation-delay: .22s; } @keyframes line-up { from { transform: translateY(105%); } to { transform: none; } } .hero__title em { font-style: normal; background: linear-gradient(100deg, var(--invert-text) 10%, var(--invert-mute) 55%, var(--invert-text) 90%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradient-slide 7s var(--ease) infinite; } @keyframes gradient-slide { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .hero__text { animation: fade-up .9s var(--ease-glide) both .34s; } .hero__cta { animation: fade-up .9s var(--ease-glide) both .44s; } .hero__side { animation: fade-up .9s var(--ease-glide) both .5s; } @keyframes fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } /* Карточки-показатели: стекло с бликом по краю */ .stat-card { position: relative; overflow: hidden; padding: 26px 28px; backdrop-filter: blur(8px); transition: transform .55s var(--ease-glide), background .45s var(--ease), border-color .45s var(--ease), box-shadow .55s var(--ease-glide); } .stat-card::before { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(160deg, var(--invert-sheen), transparent 45%); opacity: .35; transition: opacity .45s var(--ease); } .stat-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px var(--invert-press); } .stat-card:hover::before { opacity: .7; } .stat-card__value { letter-spacing: -.035em; } /* ── Плитки «внутри портала» ──────────────────────────────── */ .tile { position: relative; padding: 36px 32px 32px; overflow: hidden; transition: transform .55s var(--ease-glide), border-color .45s var(--ease), background .45s var(--ease), box-shadow .55s var(--ease-glide); } /* Мягкое свечение, проявляющееся при наведении */ .tile::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(60% 60% at 50% 0%, var(--tint), transparent 70%); opacity: 0; transition: opacity .55s var(--ease); } .tile:hover { transform: translateY(-8px); border-color: var(--line); box-shadow: var(--shadow-md); } .tile:hover::after { opacity: 1; } .tile__num { font-size: 11px; letter-spacing: .2em; transition: color .45s var(--ease); } .tile:hover .tile__num { color: var(--text-dim); } .tile__icon { transition: background .5s var(--ease), color .5s var(--ease), transform .6s var(--ease-soft), box-shadow .5s var(--ease); } .tile:hover .tile__icon { transform: translateY(-3px) rotate(-7deg) scale(1.07); box-shadow: 0 12px 26px var(--glow); } .tile h3 { transition: transform .5s var(--ease-glide); } .tile:hover h3 { transform: translateX(3px); } /* ── Подвал ───────────────────────────────────────────────── */ .site-footer { margin-top: 20px; } .site-footer__inner { align-items: flex-end; } /* ── Страницы входа ───────────────────────────────────────── */ .auth-aside { animation: slide-from-left .9s var(--ease-glide) both; overflow: hidden; } .auth-aside::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: conic-gradient(from 140deg at 30% 20%, transparent 0deg, var(--invert-tint) 70deg, transparent 150deg); animation: sheen-spin 26s linear infinite; } .auth-box { animation: slide-from-right .9s var(--ease-glide) both .08s; } @keyframes slide-from-left { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } } @keyframes slide-from-right { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } } .auth-point { animation: fade-up .8s var(--ease-glide) both; } .auth-point:nth-child(1) { animation-delay: .3s; } .auth-point:nth-child(2) { animation-delay: .4s; } .auth-point:nth-child(3) { animation-delay: .5s; } .auth-point__dot { transition: transform .5s var(--ease-soft), background .4s var(--ease); } .auth-point:hover .auth-point__dot { transform: scale(1.15); } .step-panel { box-shadow: var(--shadow-lg); } /* ── Профиль и админка ────────────────────────────────────── */ body:not(.panel-page) .profile-hero { overflow: hidden; animation: rise-in .85s var(--ease-glide) both .05s; } body:not(.panel-page) .profile-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: conic-gradient(from 200deg at 70% 30%, transparent 0deg, var(--invert-tint) 65deg, transparent 145deg); animation: sheen-spin 24s linear infinite; } .profile-avatar { transition: transform .6s var(--ease-soft), box-shadow .5s var(--ease); } .profile-hero:hover .profile-avatar { transform: rotate(-5deg) scale(1.04); box-shadow: 0 16px 34px var(--invert-press); } body:not(.panel-page) .info-card { animation: rise-in .8s var(--ease-glide) both; transition: transform .5s var(--ease-glide), border-color .4s var(--ease), box-shadow .5s var(--ease-glide); } body:not(.panel-page) .info-grid > .info-card:nth-child(1) { animation-delay: .12s; } body:not(.panel-page) .info-grid > .info-card:nth-child(2) { animation-delay: .2s; } body:not(.panel-page) .info-card:hover { transform: translateY(-4px); border-color: var(--line); box-shadow: var(--shadow-md); } .info-row { transition: padding-left .45s var(--ease-glide); } .info-row:hover { padding-left: 6px; } body:not(.panel-page) .admin-cta { animation: rise-in .8s var(--ease-glide) both .28s; } body:not(.panel-page) .workboard-cta { animation: rise-in .8s var(--ease-glide) both .34s; } body:not(.panel-page) .stat { animation: rise-in .75s var(--ease-glide) both; transition: transform .5s var(--ease-glide), box-shadow .5s var(--ease-glide), border-color .4s var(--ease); } body:not(.panel-page) .stat-row > .stat:nth-child(1) { animation-delay: .1s; } body:not(.panel-page) .stat-row > .stat:nth-child(2) { animation-delay: .16s; } body:not(.panel-page) .stat-row > .stat:nth-child(3) { animation-delay: .22s; } body:not(.panel-page) .stat-row > .stat:nth-child(4) { animation-delay: .28s; } body:not(.panel-page) .stat:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); } /* ── Наклон карточки за курсором ──────────────────────────── */ [data-tilt] { transform-style: preserve-3d; transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform .5s var(--ease-glide), box-shadow .55s var(--ease-glide), border-color .45s var(--ease), background .45s var(--ease); } /* При наведении наклон складывается с обычным подъёмом карточки */ .tile[data-tilt]:hover { transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-8px); } .stat-card[data-tilt]:hover { transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-6px); } /* Пятно света идёт за курсором по плитке */ .tile[data-tilt]::after { background: radial-gradient(50% 60% at var(--spot-x, 50%) var(--spot-y, 0%), var(--tint), transparent 72%); } /* ── Плавные переходы между страницами ────────────────────── */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: vt-out .32s var(--ease) both; } ::view-transition-new(root) { animation: vt-in .45s var(--ease-glide) both; } @keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } } @keyframes vt-in { from { opacity: 0; transform: translateY(12px); } } /* ── Уважаем «уменьшить движение» ─────────────────────────── */ @media (prefers-reduced-motion: reduce) { body:not(.panel-page)::before { animation: none; } .hero__panel::after, .auth-aside::after, .profile-hero::after { animation: none; } .hero__title em { animation: none; } body:not(.panel-page) .site-header, body:not(.panel-page) main, body:not(.panel-page) .site-footer, .hero__panel, .hero__text, .hero__cta, .hero__side, .hero__title .line > span, .auth-aside, .auth-box, .auth-point, body:not(.panel-page) .profile-hero, body:not(.panel-page) .info-card, body:not(.panel-page) .stat, body:not(.panel-page) .admin-cta, body:not(.panel-page) .workboard-cta { animation: none; } }