/* ПРОнаймер · Найм-машина — токены v3 (направление v2 «дороже и тише») Принципы: · рамок нет: разделение — тон, волосяные линии, свет и тень · три высоты: ЛОТОК (утоплен) → ЛИСТ (поднят) → ЛИСТ РЕШЕНИЯ (выше) · тёмная тема живёт на тайге, линии мятные, точки статусов с ореолом · мята — только действия; латунь — только деньги; кремовое подчёркивание — навигация · шрифт заголовков и чисел Oswald 200 на ПК, 300 на телефоне */ :root { /* ---- Поверхности и слои (свет) ---- */ --bg: radial-gradient(1000px 560px at 12% -10%, rgba(255,255,255,.85), transparent 60%), linear-gradient(180deg, #F4F3EE 0%, #ECEBE4 100%); /* камень → тёплая бумага */ --bg-layer: #EFEEE8; /* плоский цвет фона: обводка бейджей, sticky-полосы */ --header-bg: rgba(244, 243, 238, .9); /* + backdrop-filter: blur(14px) */ --sheet: linear-gradient(180deg, #FFFFFF 0%, #FAF9F5 100%); /* лист — бумага, не чистый белый */ --sheet-hi: linear-gradient(180deg, #FFFFFF 0%, #F6F5EE 100%); /* лист решения */ --tray: #E8E7E0; /* утопленный лоток плиток */ --track: #E2E0D9; /* дорожка полосы заполнения */ --field: #FFFFFF; /* поля ввода */ --ghost: #FBFAF6; /* обычные кнопки, аватары, чипы — тон чуть темнее бумаги */ --bubble-in: #FFFFFF; /* ---- Линии ---- */ --hair: rgba(22, 31, 26, .08); --hair-strong: rgba(22, 31, 26, .16); /* ---- Текст: три ступени ---- */ --text: #161F1A; --muted: #4B5750; --dim: #5F6963; /* ≥ 4.5:1 на любой поверхности, включая лоток */ /* ---- Действие ---- */ --acc: #1F6A4A; --acc-hover: #184F38; --on-acc: #F3F1EA; --acc-text: #1F6A4A; --acc-edge: #C3D8CB; /* ---- Сигналы (только про людей) ---- */ --ok: #1F6A4A; --ok-text: #1F6A4A; --halo-ok: rgba(31, 106, 74, .14); --warn: #C98A1E; --warn-text: #8A5A12; --halo-warn: rgba(201, 138, 30, .16); --alarm: #B8433A; --alarm-text: #8F2F27; --halo-alarm: rgba(184, 67, 58, .14); --alarm-edge: #EBBFB9; --on-alarm: #FFFFFF; /* ---- Деньги ---- */ --brass: #D4A63A; --brass-text: #2A1F06; --money: #7A5E10; /* деньги в списках — текстом; пилюля --brass только в карточке смены и превью поста */ /* ---- Логотип ---- */ --logo-bg: #1F6A4A; --logo-fg: #F3F1EA; /* ---- Тени и свет ---- */ --lift: inset 0 1px 0 #FFFFFF, inset 0 0 0 1px rgba(22,31,26,.05), 0 1px 2px rgba(22,31,26,.05), 0 12px 24px -14px rgba(22,31,26,.2), 0 32px 64px -32px rgba(22,31,26,.3); --lift-hi: inset 0 1px 0 #FFFFFF, inset 0 0 0 1px rgba(22,31,26,.07), 0 1px 2px rgba(22,31,26,.05), 0 18px 36px -18px rgba(22,31,26,.24), 0 44px 88px -40px rgba(22,31,26,.34); --tray-inset: inset 0 1px 2px rgba(22,31,26,.06); --track-inset: inset 0 1px 1px rgba(22,31,26,.08); --field-inset: inset 0 1px 2px rgba(22,31,26,.06); --ghost-shadow: 0 1px 2px rgba(22,31,26,.05), inset 0 0 0 1px rgba(22,31,26,.07); --btn-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 3px 8px -4px rgba(31,106,74,.3); /* без неонового свечения */ --pill-inset: none; --header-shadow: 0 1px 0 rgba(22,31,26,.02); --engrave: none; --focus: 0 0 0 2px var(--acc); /* ---- Форма ---- */ --r-sheet: 20px; --r-sheet-hi: 22px; --r-tray: 18px; --r-inner: 14px; --r-field: 12px; --r-btn: 999px; --r-logo: 6px; /* ---- Размеры ---- */ --h-btn: 44px; --h-btn-sm: 38px; --h-btn-tel: 46px; --h-input: 44px; --h-nav: 68px; --h-nav-tel: 56px; --h-tabbar: 68px; --page-max: 1120px; --pad-tel: 20px; --sheet-pad: 24px 28px; --sheet-pad-tel: 18px; /* ---- Шрифты ---- */ --ui: "Manrope", "Segoe UI", system-ui, sans-serif; --display: "Oswald", "Manrope", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, monospace; /* ---- Шкала ---- */ --t-h1: 200 56px/1 var(--display); /* телефон: 300 44px · шкала Oswald: 56 / 40 / 32 / 22 */ --t-h1-page: 200 56px/1 var(--display); /* заголовок карточки; телефон: 300 38px */ --t-h2: 300 24px/1 var(--display); /* заголовок листа; +letter-spacing .02em */ --t-num-xl: 200 40px/1 var(--display); /* число в лотке; телефон: 300 36px */ --t-day: 200 56px/.9 var(--display); /* число дня в корешке; телефон: 300 44px */ --t-time: 200 32px/1 var(--display); /* время смены; телефон: 300 30px */ --t-count: 300 22px/1 var(--display); /* «2 из 4» в строке, кружочки календаря, h2 */ --t-title: 600 16px/1.25 var(--ui); --t-body: 500 14px/1.45 var(--ui); --t-small: 500 13px/1.4 var(--ui); --t-label: 600 11px/1 var(--ui); /* letter-spacing .12em; uppercase */ --t-btn: 700 14px/1 var(--ui); --t-nav: 600 14px/1 var(--ui); /* активный — 700, подчёркивание 2px цветом --text */ /* ---- Отступы ---- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 28px; --s-8: 32px; --s-9: 40px; --s-10: 48px; /* ---- Telegram Mini App (переопределяется переменными --tg-theme-*) ---- */ --tg-bar: #F7F7F7; --tg-line: #D6D6DA; --tg-link: #3390EC; color-scheme: light; } :root[data-theme="dark"] { --bg: radial-gradient(1200px 620px at 10% -12%, rgba(158,220,187,.14), transparent 60%), radial-gradient(900px 520px at 105% 108%, rgba(217,172,64,.06), transparent 60%), linear-gradient(180deg, #0D2A1D 0%, #0A2017 100%); --bg-layer: #112D21; --header-bg: rgba(11, 34, 24, .86); --sheet: linear-gradient(180deg, #17392B 0%, #112D21 100%); --sheet-hi: linear-gradient(180deg, #1C4634 0%, #153627 100%); --tray: rgba(0, 0, 0, .22); --track: rgba(0, 0, 0, .35); --field: rgba(0, 0, 0, .28); --ghost: rgba(255, 255, 255, .035); --bubble-in: rgba(255, 255, 255, .05); --hair: rgba(158, 220, 187, .10); --hair-strong: rgba(158, 220, 187, .22); --text: #F3F0E6; --muted: #BCC7C0; --dim: #98AB9F; /* ≥ 4.5:1 на листе решения */ --acc: #9EDCBB; --acc-hover: #B9EACF; --on-acc: #0B2519; --acc-text: #A8E3C3; --acc-edge: rgba(158,220,187,.45); --ok: #9EDCBB; --ok-text: #A8E3C3; --halo-ok: rgba(158,220,187,.2); --warn: #E8B84F; --warn-text: #F1CF7A; --halo-warn: rgba(232,184,79,.2); --alarm: #F08674; --alarm-text: #FFB3A3; --halo-alarm: rgba(240,134,116,.2); --alarm-edge: rgba(240,134,116,.45); --on-alarm: #2A0F0A; --brass: #D9AC40; --brass-text: #1A1405; --money: #E0B54A; --logo-bg: #9EDCBB; --logo-fg: #0B2519; --lift: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(158,220,187,.08), inset 0 -1px 0 rgba(0,0,0,.25), 0 14px 28px -16px rgba(0,0,0,.6), 0 44px 90px -40px rgba(0,0,0,.95); --lift-hi: inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(158,220,187,.14), inset 0 -1px 0 rgba(0,0,0,.3), 0 18px 36px -18px rgba(0,0,0,.7), 0 60px 110px -44px rgba(0,0,0,1); --tray-inset: inset 0 1px 3px rgba(0,0,0,.28), 0 1px 0 rgba(255,255,255,.04); --track-inset: inset 0 1px 1px rgba(0,0,0,.3); --field-inset: inset 0 1px 3px rgba(0,0,0,.5), inset 0 0 0 1px rgba(158,220,187,.08); --ghost-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 1px 2px rgba(0,0,0,.3); --btn-shadow: 0 4px 12px -6px rgba(158,220,187,.3), 0 1px 2px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.3); --pill-inset: none; --header-shadow: 0 10px 30px -18px rgba(0,0,0,.8); --engrave: 0 1px 0 rgba(0,0,0,.35), 0 -1px 0 rgba(255,255,255,.05); --focus: 0 0 0 2px var(--acc); --tg-bar: rgba(8, 24, 17, .96); --tg-line: rgba(158,220,187,.12); --tg-link: #9EDCBB; color-scheme: dark; } /* Телефон (≤ 480px): одна тень вместо каскада — быстрее на слабых устройствах. Листы на телефоне используют --lift-tel / --lift-hi-tel вместо --lift / --lift-hi. */ :root { --lift-tel: inset 0 1px 0 #FFFFFF, inset 0 0 0 1px rgba(22,31,26,.05), 0 12px 24px -14px rgba(22,31,26,.24); --lift-hi-tel: inset 0 1px 0 #FFFFFF, inset 0 0 0 1px rgba(22,31,26,.07), 0 16px 32px -16px rgba(22,31,26,.3); --fade: #EFEEE8; /* край горизонтальной прокрутки (календарь, чипы) */ } :root[data-theme="dark"] { --lift-tel: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(158,220,187,.08), 0 16px 32px -16px rgba(0,0,0,.75); --lift-hi-tel: inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(158,220,187,.14), 0 20px 40px -18px rgba(0,0,0,.85); --fade: #0C2619; } /* Календарь-кружочки на экране «Смены» (14 дней) — как карусель дат в ПРОнаймере · полоса сразу под шапкой, липкая: ПК top: 68px, высота 96 (--header-bg + blur); телефон top: 56px · слева «Октябрь · 14 дней · 6 смен», по краям круглые ghost-стрелки ‹ › (неделя назад/вперёд) · ячейка: день недели (label) над кружком 44 px (телефон 42); число Oswald 400 18; на кружке бейдж 18 px — число смен, фон = худший статус дня (--alarm/--warn/--ok), обводка 2 px --bg-layer · выбранный день — залитый кружок --acc/--on-acc с --btn-shadow; день со сменами — --ghost + --ghost-shadow; без смен — прозрачный, число --dim, без бейджа · наведение — кольцо inset 0 0 0 1px --acc-edge; клик — якорь #dDD, scroll-margin-top: 184px (ПК) / 140px (телефон) · на телефоне: горизонтальная прокрутка, последний кружок срезан краем, справа фейд --fade 44px Состояния кнопок и строк: transition background .12s, box-shadow .12s, transform .08s; фокус — 0 0 0 2px --bg-layer, 0 0 0 4px --acc; строка списка: наведение — фон --ghost, нажатие — --tray + --tray-inset; отключено — opacity .38, cursor not-allowed «Сейчас на смене» — ghost-полоса над лотком: точка --ok с ореолом --halo-ok и свечением 0 0 18px --ok, label, число Oswald 300 26, текст --muted, ссылка «Открыть смену →» */ /* Иконки — один набор, одна толщина: stroke 1.75 при 16–22 px, 2 при ≤ 14 px. Стрелки в ссылках — только SVG (никаких → ↗ ↓ текстом). Бейдж в меню — точка --alarm 6 px + число цветом --alarm-text, без заливки. Бейджи на кружочках календаря — 16 px, opacity .88. Подсказки форм — не под полем, а по знаку «?» (title) и в плейсхолдере. В строке состава — одна кнопка «Пришёл» + «⋯» для остального. */ /* Внутри Telegram: фон/поверхности/текст берём у Telegram, бренд — свой */ :root[data-tg] { --bg: var(--tg-theme-secondary-bg-color, var(--bg)); --sheet: var(--tg-theme-bg-color, var(--sheet)); --text: var(--tg-theme-text-color, var(--text)); --dim: var(--tg-theme-hint-color, var(--dim)); --hair: var(--tg-theme-section-separator-color, var(--hair)); }