/* ===================== основа: токены Glance, обои, общие элементы ===================== Токены – из Glance (start.css, блок «Design system pass»), чтобы сайт, CRM и Glance были одним целым. Обои – те же, что в Glance: превью из localStorage рисуется сразу (скрипт в ), полноразмерные подгружает js/wallpaper.js. */ :root { --bg: #09090b; --text: #f5f5f7; --secondary: rgba(245, 245, 247, 0.68); --tertiary: rgba(245, 245, 247, 0.58); /* контраст мелкого текста не ниже 4,5:1 */ --danger: #ff6961; --ok: #30d158; --r-panel: 26px; --r-control: 16px; --r-inner: 12px; --r-chip: 8px; --r-capsule: 999px; --glass-fill: rgba(72, 72, 82, 0.42); --glass-fill-strong: rgba(40, 40, 46, 0.78); --glass-fill-input: rgba(12, 12, 16, 0.45); --glass-blur: blur(20px) saturate(170%); --glass-hairline: rgba(255, 255, 255, 0.14); --glass-hairline-hover: rgba(255, 255, 255, 0.26); --glass-rim: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.16); --glass-sheen: linear-gradient(165deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06) 42%, rgba(255, 255, 255, 0.03) 70%); --glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.28), 0 18px 48px rgba(0, 0, 0, 0.36); --glass-shadow-raised: 0 2px 4px rgba(0, 0, 0, 0.3), 0 30px 70px rgba(0, 0, 0, 0.44); --focus-ring: 0 0 0 2px rgba(255, 255, 255, 0.28); --fs-caption2: 11px; --fs-caption: 12px; --fs-footnote: 13px; --fs-body: 15px; --fs-headline: 17px; --fs-title: 22px; --who-kostya: #ff9f0a; --who-claude: #bf5af2; --who-team: #64d2ff; /* движение: коротко, ease-out на вход, без ease-in (Emil Kowalski) */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); --press: 120ms var(--ease-out); --wallpaper-dim: 0.52; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html { background: var(--bg); overscroll-behavior: none; color-scheme: dark; -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100dvh; background: transparent; color: var(--text); font: var(--fs-body)/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif; -webkit-font-smoothing: antialiased; overscroll-behavior: none; } button, a, input, textarea, select { font: inherit; color: inherit; touch-action: manipulation; } button { cursor: pointer; transition: transform var(--press); } /* любое нажатие видно сразу; у компонентов могут быть свои значения */ button:active:not(:disabled) { transform: scale(0.97); } /* текст элементов управления не выделяется долгим нажатием; текст контента – выделяется */ button, [role="button"], .tab, .seg a, .home-link, .door, .cal-filter, .wk-day { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } :focus-visible { outline: none; box-shadow: var(--focus-ring); } /* ---------- обои: отдельный фиксированный слой, как в Glance ---------- */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(1000px 560px at 13% -12%, rgba(142, 82, 28, 0.14), transparent 62%), radial-gradient(900px 520px at 90% 3%, rgba(72, 76, 102, 0.10), transparent 64%), var(--bg); } html.has-wallpaper-preview body::before { background: linear-gradient(rgb(5 5 8 / var(--wallpaper-dim)), rgb(5 5 8 / var(--wallpaper-dim))), var(--wallpaper-preview) center / cover no-repeat var(--bg); } html.has-wallpaper body::before { background: linear-gradient(rgb(5 5 8 / var(--wallpaper-dim)), rgb(5 5 8 / var(--wallpaper-dim))), var(--wallpaper-full) center / cover no-repeat var(--bg); } @media (max-width: 760px) { /* края уходят в черный: под панелями Safari не видно обреза */ :root { --edge-fade: linear-gradient(to bottom, #050508 0, rgb(5 5 8 / 0) 180px), linear-gradient(to top, #050508 0, rgb(5 5 8 / 0) 220px), linear-gradient(rgb(5 5 8 / var(--wallpaper-dim)), rgb(5 5 8 / var(--wallpaper-dim))); } html.has-wallpaper-preview body::before { background: var(--edge-fade), var(--wallpaper-preview) center / cover no-repeat #050508; } html.has-wallpaper body::before { background: var(--edge-fade), var(--wallpaper-full) center / cover no-repeat #050508; } html.has-wallpaper-mobile body::before { background: var(--edge-fade), var(--wallpaper-mobile) center / cover no-repeat #050508; } } /* ---------- материал: одно стекло на все панели ---------- */ .glass { background: var(--glass-sheen), var(--glass-fill); box-shadow: var(--glass-rim), var(--glass-shadow); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); } /* ---------- вход ---------- */ body.login { display: grid; place-items: center; padding: 16px; } .login-card { width: min(380px, 100%); padding: 32px; border-radius: var(--r-panel); display: grid; gap: 12px; } .login-card.glass { background: rgb(22 22 26 / 0.84); } .login-card h1 { margin: 0 0 4px; font-size: var(--fs-title); font-weight: 650; letter-spacing: -0.01em; } .login-card input { font-size: 16px; padding: 13px 16px; border-radius: var(--r-control); color: var(--text); border: 1px solid var(--glass-hairline); background: var(--glass-fill-input); outline: none; } .login-card input:focus { border-color: var(--glass-hairline-hover); } .login-card button { font-size: 16px; min-height: 46px; border: 0; border-radius: var(--r-capsule); background: var(--text); color: var(--bg); font-weight: 650; transition: transform var(--press); } .login-card button:active { transform: scale(0.97); } .login-error { margin: 0; color: var(--danger); font-size: var(--fs-footnote); } /* ---------- короткое сообщение внизу ---------- */ #toast { position: fixed; left: 50%; bottom: max(24px, calc(16px + env(safe-area-inset-bottom))); z-index: 80; transform: translate(-50%, 12px); opacity: 0; pointer-events: none; max-width: calc(100vw - 32px); padding: 12px 20px; border-radius: var(--r-capsule); font-size: 15px; background: var(--glass-sheen), var(--glass-fill-strong); box-shadow: var(--glass-rim), var(--glass-shadow); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); } #toast.show { opacity: 1; transform: translate(-50%, 0); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } } @media (prefers-reduced-transparency: reduce) { :root { --glass-fill: rgba(40, 40, 46, 0.94); } }