/* ============================================================= */ /* Warm Claymorphism — дизайн-система Leads TabloBablo (см. tgmanager */ /* frontend/DESIGN_SYSTEM.md). Светлая тёплая палитра, мягкие */ /* тени, зелёный акцент, шрифт Nunito. Тема включается классом */ /* .theme-clay на . */ /* ============================================================= */ :root { --cl-bg: #E8E5DE; /* тёплый светло-серый фон */ --cl-card: #F3F1EA; /* поверхность карточек */ --cl-raised: #FBFAF6; /* самый светлый приподнятый слой */ --cl-inset: #ECE9E1; /* вдавленные плитки / инпуты */ --cl-border: #DCD8CD; /* еле заметная обводка */ --cl-text: #2E2B25; /* основной текст (тёплый почти-чёрный) */ --cl-text-2: #6B665C; /* второстепенный */ --cl-text-muted: #9C968A; /* подписи / неактивное */ --cl-accent: #5E9E54; /* зелёный акцент */ --cl-accent-strong: #4F9243; /* фон зелёной кнопки */ --cl-accent-soft: #DDEBD1; /* светло-зелёная заливка */ --cl-accent-soft-ink: #34660F; /* текст на accent-soft */ --cl-warm: #C8755A; /* терракота */ --cl-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 14px 30px -14px rgba(120,114,100,0.5), 0 3px 8px rgba(120,114,100,0.14); --cl-shadow-hover: inset 0 1px 0 rgba(255,255,255,0.6), 0 22px 42px -16px rgba(120,114,100,0.55), 0 4px 10px rgba(120,114,100,0.16); --cl-shadow-sm: inset 0 1px 0 rgba(255,255,255,0.55), 0 6px 16px -8px rgba(120,114,100,0.4); --cl-shadow-btn: inset 0 1px 0 rgba(255,255,255,0.45), 0 6px 14px -6px rgba(120,114,100,0.45); --cl-shadow-modal: 0 30px 70px -24px rgba(60,56,48,0.45), 0 8px 22px -12px rgba(60,56,48,0.3); --cl-shadow-inset: inset 0 2px 5px rgba(120,114,100,0.3), inset 0 1px 0 rgba(255,255,255,0.4); --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); } html { scroll-behavior: smooth; } body { font-family: 'Nunito', sans-serif; } .font-mono { font-family: 'JetBrains Mono', monospace; } .theme-clay { background-color: var(--cl-bg); color: var(--cl-text); } .theme-clay ::selection { background: rgba(94,158,84,0.25); } .theme-clay ::-webkit-scrollbar { width: 10px; height: 10px; } .theme-clay ::-webkit-scrollbar-track { background: var(--cl-bg); } .theme-clay ::-webkit-scrollbar-thumb { background: rgba(94,158,84,0.30); border-radius: 5px; } .theme-clay ::-webkit-scrollbar-thumb:hover { background: rgba(94,158,84,0.5); } /* Кнопочный «спринг»: при нажатии слегка сжимается. */ button, .btn-spring { transition: transform .18s var(--ease-smooth), filter .15s, box-shadow .12s; } /* ---- Компонент-классы (вешаем в нашей разметке) ---- */ .theme-clay .cl-card { background: var(--cl-card); border-radius: 1.5rem; box-shadow: var(--cl-shadow); } .theme-clay .cl-inset { background: var(--cl-inset); border-radius: 1.1rem; box-shadow: var(--cl-shadow-inset); } .theme-clay .cl-modal { background: var(--cl-card); border-radius: 1.5rem; box-shadow: var(--cl-shadow-modal); } .theme-clay .cl-pop { background: var(--cl-raised); border-radius: 1.2rem; box-shadow: inset 0 2px 3px rgba(255,255,255,0.95), inset 0 -3px 5px rgba(120,114,100,0.12), 0 12px 22px -8px rgba(120,114,100,0.5), 0 3px 6px rgba(120,114,100,0.22); transition: box-shadow .17s var(--ease-smooth), transform .17s var(--ease-smooth); } .theme-clay .cl-pop:hover { transform: translateY(-3px); box-shadow: inset 0 2px 3px rgba(255,255,255,0.95), inset 0 -3px 5px rgba(120,114,100,0.12), 0 20px 32px -10px rgba(120,114,100,0.55), 0 5px 10px rgba(120,114,100,0.24); } .theme-clay .cl-card-hoverable { transition: box-shadow .18s var(--ease-smooth), transform .18s var(--ease-smooth); } .theme-clay .cl-card-hoverable:hover { box-shadow: var(--cl-shadow-hover); transform: translateY(-2px); } .theme-clay .cl-input { background: var(--cl-bg); border: none; box-shadow: var(--cl-shadow-inset); border-radius: 0.9rem; color: var(--cl-text); } .theme-clay .cl-input::placeholder { color: var(--cl-text-muted); } .theme-clay .cl-input:focus { outline: none; box-shadow: var(--cl-shadow-inset), 0 0 0 2px rgba(94,158,84,0.4); } .theme-clay .cl-btn { border-radius: 0.9rem; background: var(--cl-raised); color: var(--cl-text); box-shadow: var(--cl-shadow-btn); font-weight: 600; } .theme-clay .cl-btn:hover { filter: brightness(0.985); } .theme-clay .cl-btn:active { box-shadow: var(--cl-shadow-inset); transform: scale(0.98); } .theme-clay .cl-btn-primary { border-radius: 0.9rem; background: var(--cl-accent-strong); color: #fff; box-shadow: var(--cl-shadow-btn); font-weight: 700; } .theme-clay .cl-btn-primary:hover { filter: brightness(1.05); } .theme-clay .cl-btn-primary:active { box-shadow: var(--cl-shadow-inset); transform: scale(0.98); } .theme-clay .cl-btn-danger { border-radius: 0.9rem; background: #F6D9D3; color: #9E2B2B; box-shadow: var(--cl-shadow-btn); font-weight: 700; } /* Чипы статусов: пастель + тёмный текст той же семьи (DESIGN_SYSTEM §9). */ .cl-chip { display: inline-flex; align-items: center; border-radius: 9999px; font-weight: 700; } .cl-chip-green { background: #DDEBD1; color: #34660F; } .cl-chip-amber { background: #F6E6C2; color: #875408; } .cl-chip-red { background: #F6D9D3; color: #9E2B2B; } .cl-chip-muted { background: var(--cl-inset); color: var(--cl-text-2); } /* Индикатор htmx-загрузки */ .htmx-indicator { opacity: 0; transition: opacity .2s; } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }