/* Три скина на одном каркасе. Часть дня приходит с сервера и вешается классом на : всё различие между утром, днём и вечером живёт в переменных ниже, а разметка и координаты общие. */ * { box-sizing: border-box; } html, body { margin: 0; height: 100%; } body { background: var(--bg); color: var(--ink); font-family: var(--font-ui), system-ui, sans-serif; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; /* Кадр фиксированный: прокручивать нечего, а протяжка вниз в Telegram закрывает мини-апп — веер как раз внизу, и промах стоил бы ответа. */ overflow: hidden; } button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; margin: 0; text-align: left; } /* ---------- утро ---------- */ html.skin-morning { --bg: #FFF1E6; --bg-image: none; --ink: #33231B; --ink-2: #9C8073; --ink-3: #B79A8A; --accent: #B15A6B; --accent-soft: rgba(177, 90, 107, .14); --on-accent: #FFFFFF; --font-display: 'Nunito'; --font-ui: 'Nunito'; --font-fallback: system-ui, sans-serif; --q-size: 50px; --q-line: 1.02; --q-weight: 600; --q-track: -.02em; --label-size: 12px; --label-track: .1em; --label-weight: 600; --hint-size: 17px; --hint-weight: 400; --tile: #FFFFFF; --tile-border: transparent; --tile-shadow: 0 6px 22px rgba(120, 70, 50, .10); --tile-radius: 32px; --dot-bg: #FFFFFF; --dot-border: transparent; --dot-shadow: 0 4px 16px rgba(120, 70, 50, .14); --dot-radius: 21px; --dot-weight: 600; --dot-picked-weight: 700; --dot-picked-shadow: 0 0 0 8px var(--accent-soft), 0 10px 24px rgba(177, 90, 107, .32); --arc: #B15A6B; --arc-1: .60; --arc-2: .48; --arc-3: .38; } /* ---------- день ---------- */ html.skin-day { --bg: #FDF7EC; --bg-image: linear-gradient(172deg, #FDF7EC 0%, #F5EADB 100%); --ink: #2A211C; --ink-2: #9C8874; --ink-3: #A08A76; --accent: #B4552F; --accent-soft: rgba(180, 85, 47, .14); --on-accent: #FDF7EC; --font-display: 'Literata'; --font-ui: 'Onest'; --font-fallback: Georgia, serif; --q-size: 62px; --q-line: 0.98; --q-weight: 400; --q-track: -.02em; --label-size: 12px; --label-track: .16em; --label-weight: 500; --hint-size: 14px; --hint-weight: 400; --tile: rgba(42, 33, 28, .05); --tile-border: rgba(42, 33, 28, .12); --tile-shadow: none; --tile-radius: 24px; --dot-bg: rgba(42, 33, 28, .05); --dot-border: rgba(42, 33, 28, .14); --dot-shadow: none; --dot-radius: 50%; --dot-weight: 500; --dot-picked-weight: 500; --dot-picked-shadow: 0 0 0 8px var(--accent-soft), 0 8px 20px rgba(180, 85, 47, .32); --arc: #2A211C; --arc-1: .42; --arc-2: .32; --arc-3: .24; } /* ---------- вечер ---------- */ html.skin-evening { --bg: #15100D; --bg-image: radial-gradient(120% 80% at 100% 100%, #2A1F16 0%, #15100D 62%); --ink: #F2E7DA; --ink-2: #8E7E70; --ink-3: #6F6157; --accent: #E8A33D; --accent-soft: rgba(232, 163, 61, .16); --on-accent: #17110C; --font-display: 'Rubik'; --font-ui: 'Onest'; --font-fallback: system-ui, sans-serif; --q-size: 60px; --q-line: 0.94; --q-weight: 700; --q-track: -.035em; --label-size: 12px; --label-track: .16em; --label-weight: 500; --hint-size: 15px; --hint-weight: 300; --tile: rgba(242, 231, 218, .09); --tile-border: transparent; --tile-shadow: none; --tile-radius: 32px; --dot-bg: rgba(242, 231, 218, .09); --dot-border: transparent; --dot-shadow: none; --dot-radius: 50%; --dot-weight: 400; --dot-picked-weight: 700; --dot-picked-shadow: 0 0 0 8px var(--accent-soft), 0 0 38px rgba(232, 163, 61, .4); --arc: #E8A33D; --arc-1: .62; --arc-2: .48; --arc-3: .36; } /* ---------- кадр ---------- */ .frame { --safe-bottom: env(safe-area-inset-bottom, 0px); position: relative; width: 100%; max-width: 480px; margin: 0 auto; height: 100dvh; height: var(--vh, 100dvh); overflow: hidden; background: var(--bg); background-image: var(--bg-image); color: var(--ink); } /* Утренняя подложка. Привязана к низу кадра, а не к верху: на экранах ниже макетных она должна оставаться за веером, а не уезжать в блок вопроса. */ .blob { display: none; } .skin-morning .blob { display: block; position: absolute; left: -70px; bottom: -243px; width: 600px; height: 600px; border-radius: 50%; background: #FFE6D4; } /* ---------- прогресс ---------- */ .topbar { position: absolute; left: 28px; right: 28px; top: 28px; height: 22px; display: flex; align-items: center; gap: 12px; } .skin-day .topbar { left: 30px; right: 30px; gap: 14px; } .skin-evening .topbar { gap: 14px; } .progress { flex: 1; display: flex; align-items: center; gap: 4px; } .skin-day .progress { gap: 3px; } .seg { flex: 1; height: 6px; border-radius: 999px; background: rgba(177, 90, 107, .22); } .seg.on { background: var(--accent); } .skin-day .seg { height: 2px; border-radius: 0; background: rgba(42, 33, 28, .16); } /* Вечером — одна полоса с заливкой вместо отдельных штрихов. */ .track { flex: 1; height: 3px; border-radius: 999px; background: rgba(242, 231, 218, .14); overflow: hidden; } .track > i { display: block; height: 3px; border-radius: 999px; background: var(--accent); } .part-label { font-family: var(--font-ui), system-ui, sans-serif; font-size: var(--label-size); font-weight: var(--label-weight); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--ink-3); white-space: nowrap; } .skin-morning .part-label { font-family: var(--font-display), system-ui, sans-serif; } /* ---------- блок вопроса ---------- */ .ask { position: absolute; left: 26px; right: 26px; top: 104px; height: 220px; display: flex; flex-direction: column; justify-content: flex-end; } .skin-morning .ask { justify-content: space-between; padding: 26px 28px 28px; border-radius: 32px; background: #fff; box-shadow: 0 12px 32px rgba(120, 70, 50, .10); } .skin-day .ask { left: 30px; right: 34px; gap: 18px; } .skin-evening .ask { left: 30px; right: 36px; } .meta { display: none; font: 600 13px/1.2 var(--font-display), system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); } .skin-morning .meta { display: block; } .question { margin: 0; font-family: var(--font-display), var(--font-fallback); font-size: var(--q-size); line-height: var(--q-line); font-weight: var(--q-weight); letter-spacing: var(--q-track); text-wrap: balance; } .question.done { font-size: 40px; line-height: 1.1; } .rule { display: none; height: 1px; background: rgba(42, 33, 28, .14); flex: none; } .skin-day .rule { display: block; } /* ---------- подсказка ---------- */ .hint { position: absolute; left: 30px; right: 34px; top: 344px; height: 24px; display: flex; align-items: center; gap: 10px; font-size: var(--hint-size); font-weight: var(--hint-weight); color: var(--ink-2); } .skin-day .hint { justify-content: space-between; letter-spacing: .02em; } .skin-evening .hint { left: 30px; right: 36px; } /* Утром подсказка живёт внутри белой карточки — туда её и кладёт app.js, поэтому здесь она перестаёт быть абсолютной. */ .skin-morning .hint { position: static; height: auto; gap: 8px; font-family: var(--font-display), system-ui, sans-serif; } .hint-sep { flex: none; } .skin-morning .hint-sep::after { content: '\00B7'; color: var(--ink-3); } .skin-day .hint-sep { display: none; } .skin-evening .hint-sep { width: 4px; height: 4px; border-radius: 50%; background: #4A3D33; } .hint-sep:last-child { display: none; } /* ---------- веер шкалы ---------- */ .fan { position: absolute; inset: 0; pointer-events: none; } .arcs { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .arc { fill: none; stroke: var(--arc); stroke-width: 2; stroke-dasharray: 3 8; stroke-linecap: round; } .arc-0 { stroke-opacity: var(--arc-1); } .arc-1 { stroke-opacity: var(--arc-2); } .arc-2 { stroke-opacity: var(--arc-3); } .dot { position: absolute; pointer-events: auto; display: flex; align-items: center; justify-content: center; border-radius: var(--dot-radius); border: 1px solid var(--dot-border); background: var(--dot-bg); box-shadow: var(--dot-shadow); font-family: var(--font-display), system-ui, sans-serif; font-weight: var(--dot-weight); transition: transform .06s ease; } .skin-day .dot { font-family: var(--font-ui), system-ui, sans-serif; } .dot:active { transform: scale(.94); } /* Размер выбранного не растёт: соседние тап-зоны иначе схлопываются. */ .dot[aria-pressed="true"] { background: var(--accent); border-color: transparent; color: var(--on-accent); box-shadow: var(--dot-picked-shadow); font-weight: var(--dot-picked-weight); } /* ---------- зона ответа ---------- */ .answer { position: absolute; left: 26px; right: 26px; bottom: 96px; display: flex; flex-direction: column; gap: 12px; } .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .tile { height: 168px; border-radius: var(--tile-radius); border: 1px solid var(--tile-border); background: var(--tile); box-shadow: var(--tile-shadow); display: flex; align-items: flex-end; padding: 24px; font-family: var(--font-display), system-ui, sans-serif; font-size: 32px; font-weight: 600; transition: transform .06s ease; } .tile:active { transform: scale(.98); } .tile[aria-pressed="true"] { background: var(--accent); border-color: transparent; color: var(--on-accent); font-weight: 700; box-shadow: 0 12px 28px rgba(177, 90, 107, .32); } .skin-day .tile[aria-pressed="true"], .skin-evening .tile[aria-pressed="true"] { box-shadow: none; } /* Вечером — две полосы, скруглённые к левому краю и прижатые к правому: палец приходит с той стороны, там же стоит и веер. */ .skin-evening .pair { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; } .skin-evening .tile { height: 100px; width: 78%; margin-right: -26px; border-radius: 999px 0 0 999px; padding: 0 0 0 38px; align-items: center; } .pills { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; } .pill { height: 62px; border-radius: 999px; border: 1px solid var(--tile-border); background: var(--tile); display: flex; align-items: center; padding: 0 26px; font-size: 20px; font-weight: 400; transition: transform .06s ease; } .pill:active { transform: scale(.96); } .pill[aria-pressed="true"] { background: var(--accent); border-color: transparent; color: var(--on-accent); font-weight: 500; } .med { min-height: 86px; border-radius: 26px; border: 1px solid var(--tile-border); background: var(--tile); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 28px; transition: transform .06s ease; } .skin-day .med { border-radius: 24px; } .med:active { transform: scale(.98); } .med-name { font-family: var(--font-display), system-ui, sans-serif; font-size: 26px; font-weight: 400; } .med-dose { font-size: 16px; font-weight: 500; color: var(--ink-3); white-space: nowrap; } .med[aria-pressed="true"] { background: var(--accent); border-color: transparent; color: var(--on-accent); } .med[aria-pressed="true"] .med-dose { color: inherit; opacity: .85; } textarea { width: 100%; min-height: 150px; padding: 20px 22px; border-radius: 24px; border: 1px solid var(--tile-border); background: var(--tile); color: var(--ink); font: inherit; font-size: 19px; resize: none; } textarea::placeholder { color: var(--ink-3); } textarea:focus { outline: 2px solid var(--accent-soft); outline-offset: 2px; } /* ---------- нижняя строка ---------- */ .footer { position: absolute; left: 30px; right: 30px; bottom: calc(34px + env(safe-area-inset-bottom)); height: 22px; display: flex; align-items: center; justify-content: space-between; } .foot { font-size: 15px; line-height: 22px; } .foot-left { font-weight: 500; color: var(--ink-3); } .foot-right { margin-left: auto; font-weight: 500; color: var(--accent); } .foot[hidden] { display: none; } .status { position: absolute; left: 30px; right: 30px; bottom: calc(64px + env(safe-area-inset-bottom)); font-size: 13px; color: var(--ink-3); text-align: right; } .status:not(:empty) { width: fit-content; margin-left: auto; padding: 4px 12px; border-radius: 999px; background: var(--bg); } .status.err { color: var(--accent); } /* ---------- смена карточки ---------- */ /* Кросс-фейд только содержимого. Каркас, фон и нижняя строка стоят — иначе при каждом ответе дёргается весь экран. */ #ask, #hint, #fan, #answer { transition: opacity .14s ease-out; } .frame.swapping #ask, .frame.swapping #hint, .frame.swapping #fan, .frame.swapping #answer { opacity: 0; } @media (prefers-reduced-motion: reduce) { #ask, #hint, #fan, #answer { transition: none; } .dot, .tile, .pill, .med { transition: none; } }