/* ============================================================ StomTime — публичная онлайн-запись. Минимализм, светлая/тёмная. Тема управляется через [data-theme] на (+ системная по умолчанию). ============================================================ */ :root { --brand: #1B66FF; --brand-ink: #ffffff; --tint: #EAF1FF; --ink: #11151C; --ink-2: #59616E; --ink-3: #9098A4; --paper: #FFFFFF; --bg: #F6F7F9; --line: #ECEEF2; --line-2: #E1E4EA; --ok: #1FA651; --ok-tint: #E8F6EE; --danger: #D8453A; --danger-tint: #FBEAE9; --r: 16px; --r-sm: 12px; --r-pill: 999px; --sh: 0 1px 2px rgba(17,21,28,.04); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } html[data-theme="dark"] { --brand: #4D86FF; --brand-ink: #0B1220; --tint: #18253F; --ink: #EDEFF2; --ink-2: #A2AAB6; --ink-3: #6B7480; --paper: #161A20; --bg: #0D0F14; --line: #232932; --line-2: #2C333D; --ok: #34C76A; --ok-tint: #14271C; --danger: #F0635A; --danger-tint: #2A1715; --sh: 0 1px 2px rgba(0,0,0,.3); } * { box-sizing: border-box; margin: 0; padding: 0; } html { background: var(--bg); } body { font-family: var(--font); background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; line-height: 1.45; transition: background .2s ease, color .2s ease; } button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; } input { font: inherit; color: inherit; } .bk { max-width: 480px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; } /* ---------- hero (минималистичный, без цветной заливки) ---------- */ .bk-hero { position: relative; } .bk-hero__bg { display: none; } .bk-hero__in { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: calc(env(safe-area-inset-top) + 30px) 20px 22px; } .bk-ava { width: 76px; height: 76px; flex: none; border-radius: 24px; background: var(--brand); color: var(--brand-ink); display: grid; place-items: center; font-size: 28px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 10px; } .bk-hero__clinic { font-size: 13px; font-weight: 600; color: var(--ink-3); } .bk-hero__doc { font-size: 23px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; } .bk-hero__spec { font-size: 13px; color: var(--ink-2); margin-top: 1px; } .bk-hero__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 12px; } .bk-chip { font-size: 12px; font-weight: 600; color: var(--ink-2); padding: 5px 11px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-pill); } /* переключатель темы — в правом верхнем углу */ .bk-theme { position: absolute; top: calc(env(safe-area-inset-top) + 14px); right: 14px; width: 40px; height: 40px; border-radius: var(--r-pill); background: var(--paper); border: 1px solid var(--line); color: var(--ink-2); display: grid; place-items: center; } .bk-theme svg { width: 19px; height: 19px; } .bk-theme .ic-sun { display: none; } .bk-theme .ic-moon { display: block; } html[data-theme="dark"] .bk-theme .ic-sun { display: block; } html[data-theme="dark"] .bk-theme .ic-moon { display: none; } /* ---------- индикатор шагов ---------- */ .bk-steps { display: flex; gap: 6px; padding: 8px 20px 4px; } .bk-steps__i { flex: 1; height: 3px; border-radius: 3px; background: var(--line-2); transition: background .25s; } .bk-steps__i.on { background: var(--brand); } /* ---------- поток ---------- */ .bk-flow { flex: 1; padding: 12px 16px 28px; } .bk-sec__t { font-size: 17px; font-weight: 750; letter-spacing: -.02em; margin: 14px 2px 3px; } .bk-sec__t:first-child { margin-top: 4px; } .bk-sec__s { font-size: 13px; color: var(--ink-2); margin: 0 2px 14px; } .bk-back { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); font-size: 13.5px; font-weight: 600; padding: 6px 2px 12px; } .bk-back:active { color: var(--brand); } /* услуги */ .bk-serv { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; background: var(--paper); box-shadow: var(--sh); border: 1px solid var(--line); border-radius: var(--r); padding: 13px 14px; margin-bottom: 9px; transition: border-color .15s, transform .1s; } .bk-serv:active { transform: scale(.99); } .bk-serv:hover { border-color: var(--line-2); } .bk-serv__ic { width: 44px; height: 44px; flex: none; border-radius: 13px; background: var(--tint); display: grid; place-items: center; font-size: 21px; } .bk-serv__m { flex: 1; min-width: 0; } .bk-serv__n { font-size: 15px; font-weight: 700; } .bk-serv__d { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; } .bk-serv__p { text-align: right; flex: none; } .bk-serv__price { font-size: 14px; font-weight: 800; color: var(--brand); } .bk-serv__from { font-size: 10.5px; color: var(--ink-3); } .bk-serv__go { color: var(--ink-3); font-size: 20px; margin-left: 2px; } /* выбранная услуга — сводка */ .bk-pick { display: flex; align-items: center; gap: 12px; background: var(--tint); border-radius: var(--r); padding: 12px 14px; margin-bottom: 18px; } .bk-pick__ic { font-size: 22px; } .bk-pick__n { font-weight: 700; font-size: 14.5px; } .bk-pick__d { font-size: 12px; color: var(--ink-2); } .bk-pick__edit { margin-left: auto; color: var(--brand); font-weight: 700; font-size: 13px; } /* даты */ .bk-dates { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 12px; scrollbar-width: none; } .bk-dates::-webkit-scrollbar { display: none; } .bk-date { flex: none; width: 62px; background: var(--paper); border: 1.5px solid var(--line); border-radius: 14px; padding: 10px 0; text-align: center; transition: border-color .15s, background .15s; } .bk-date__wd { font-size: 11px; color: var(--ink-3); font-weight: 600; text-transform: capitalize; } .bk-date__d { font-size: 19px; font-weight: 800; margin: 2px 0; } .bk-date__mo { font-size: 10.5px; color: var(--ink-3); } .bk-date__free { font-size: 10px; font-weight: 700; color: var(--ok); margin-top: 3px; } .bk-date.on { border-color: var(--brand); background: var(--tint); } .bk-date.closed { opacity: .42; } .bk-date.closed .bk-date__free { color: var(--ink-3); } /* слоты времени */ .bk-times { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .bk-time { background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 12px 0; text-align: center; font-size: 15px; font-weight: 700; transition: .12s; } .bk-time:hover { border-color: var(--line-2); } .bk-time.on { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); } .bk-time[disabled] { opacity: .3; text-decoration: line-through; background: transparent; border-style: dashed; } .bk-lunch { grid-column: 1 / -1; text-align: center; font-size: 12px; color: var(--ink-3); padding: 6px; } .bk-empty { text-align: center; color: var(--ink-3); font-size: 13.5px; padding: 28px; } /* форма */ .bk-field { margin-bottom: 14px; } .bk-field label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; } .bk-input { width: 100%; min-height: 52px; padding: 13px 15px; font-size: 16px; background: var(--paper); color: var(--ink); border: 1.5px solid var(--line-2); border-radius: var(--r-sm); transition: border-color .15s; } .bk-input::placeholder { color: var(--ink-3); } .bk-input:focus { outline: none; border-color: var(--brand); } .bk-summary { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 6px 16px; margin-bottom: 18px; } .bk-summary__row { display: flex; justify-content: space-between; gap: 10px; padding: 11px 0; font-size: 14px; border-bottom: 1px solid var(--line); } .bk-summary__row:last-child { border-bottom: 0; } .bk-summary__k { color: var(--ink-3); } .bk-summary__v { font-weight: 700; text-align: right; } .bk-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 54px; border-radius: var(--r); background: var(--brand); color: var(--brand-ink); font-size: 16px; font-weight: 700; transition: transform .1s, filter .15s; } .bk-btn:active { transform: scale(.985); filter: brightness(.95); } .bk-btn[disabled] { opacity: .5; pointer-events: none; } .bk-btn--ghost { background: var(--paper); color: var(--ink); border: 1px solid var(--line-2); } .bk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .bk-err { background: var(--danger-tint); color: var(--danger); font-size: 13px; font-weight: 600; padding: 11px 14px; border-radius: var(--r-sm); margin-bottom: 12px; } /* успех */ .bk-done { text-align: center; padding: 36px 16px; } .bk-done__ic { width: 84px; height: 84px; margin: 0 auto 18px; border-radius: 50%; background: var(--ok-tint); color: var(--ok); display: grid; place-items: center; font-size: 42px; animation: pop .4s cubic-bezier(.2,.9,.3,1.4); } @keyframes pop { from { transform: scale(.4); opacity: 0; } } .bk-done__t { font-size: 22px; font-weight: 800; letter-spacing: -.02em; } .bk-done__s { font-size: 14px; color: var(--ink-2); margin: 8px 0 20px; line-height: 1.55; } /* footer */ .bk-foot { text-align: center; padding: 20px; color: var(--ink-3); font-size: 11.5px; display: flex; flex-direction: column; gap: 3px; border-top: 1px solid var(--line); margin-top: 8px; } .bk-foot__brand { font-weight: 800; letter-spacing: .04em; color: var(--ink-2); font-size: 12.5px; } @media (min-width: 540px) { .bk-flow { padding: 12px 20px 28px; } }