zabudko-ruandClaude Opus 5.5
3489e0b816
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
599 lines
12 KiB
CSS
599 lines
12 KiB
CSS
/*
|
||
* Barev Club — дизайн-токены и базовые компоненты (PRD, раздел 9; макет «Лендинг v2 · плотный»).
|
||
* Подключение: import '@barev/ui/styles.css'. Шрифты Rubik + Onest грузит приложение.
|
||
*/
|
||
:root {
|
||
--bc-bg: #fbf6ee;
|
||
--bc-surface: #ffffff;
|
||
--bc-ink: #1e1b1a;
|
||
--bc-ink-2: #5c5550;
|
||
--bc-ink-3: #8a827c;
|
||
--bc-line: #ece4d8;
|
||
--bc-accent: #b8235a;
|
||
--bc-plum: #4a1028;
|
||
--bc-dark: #1e1b1a;
|
||
--bc-dark-2: #2e2a28;
|
||
--bc-ok: #1f7a52;
|
||
--bc-danger: #b3261e;
|
||
|
||
/* направления: фон / текст на фоне */
|
||
--bc-home: #a8c38a;
|
||
--bc-home-ink: #1f3311;
|
||
--bc-docs: #f9cdb0;
|
||
--bc-docs-ink: #4d200a;
|
||
--bc-learn: #cfc8f5;
|
||
--bc-learn-ink: #2b1f5c;
|
||
--bc-perks: #f7da6e;
|
||
--bc-perks-ink: #4a1028;
|
||
--bc-pink: #f6c3d3;
|
||
--bc-pink-ink: #4a1028;
|
||
--bc-blue: #bcd0f2;
|
||
--bc-blue-ink: #12264d;
|
||
|
||
--bc-r-sm: 20px;
|
||
--bc-r-md: 24px;
|
||
--bc-r-lg: 32px;
|
||
--bc-r-xl: 36px;
|
||
--bc-pill: 999px;
|
||
--bc-tap: 44px;
|
||
|
||
--bc-font-head: 'Rubik', system-ui, sans-serif;
|
||
--bc-font-body: 'Onest', system-ui, sans-serif;
|
||
--bc-shadow: 0 8px 30px rgba(30, 27, 26, 0.08);
|
||
}
|
||
|
||
/* Армянский и китайский: Rubik и Onest их не содержат */
|
||
:root:lang(hy) {
|
||
--bc-font-head: 'Rubik', 'Noto Sans Armenian', system-ui, sans-serif;
|
||
--bc-font-body: 'Onest', 'Noto Sans Armenian', system-ui, sans-serif;
|
||
}
|
||
:root:lang(zh) {
|
||
--bc-font-head: 'Rubik', 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', system-ui, sans-serif;
|
||
--bc-font-body: 'Onest', 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', system-ui, sans-serif;
|
||
}
|
||
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
box-sizing: border-box;
|
||
}
|
||
html {
|
||
-webkit-text-size-adjust: 100%;
|
||
}
|
||
body {
|
||
margin: 0;
|
||
background: var(--bc-bg);
|
||
color: var(--bc-ink);
|
||
font-family: var(--bc-font-body);
|
||
font-size: 15px;
|
||
line-height: 1.45;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
a {
|
||
color: inherit;
|
||
}
|
||
button,
|
||
input,
|
||
select,
|
||
textarea {
|
||
font: inherit;
|
||
color: inherit;
|
||
}
|
||
:focus-visible {
|
||
outline: 3px solid var(--bc-accent);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
/* ───── типографика ───── */
|
||
.bc-h1,
|
||
.bc-h2,
|
||
.bc-h3 {
|
||
font-family: var(--bc-font-head);
|
||
margin: 0;
|
||
color: inherit;
|
||
}
|
||
.bc-h1 {
|
||
font-weight: 800;
|
||
font-size: clamp(32px, 5.4vw, 74px);
|
||
line-height: 0.98;
|
||
letter-spacing: -0.03em;
|
||
}
|
||
.bc-h2 {
|
||
font-weight: 700;
|
||
font-size: 26px;
|
||
line-height: 1.1;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
.bc-h3 {
|
||
font-weight: 700;
|
||
font-size: 18px;
|
||
line-height: 1.2;
|
||
}
|
||
/* приём «жирное + курсив» */
|
||
.bc-italic {
|
||
font-weight: 400;
|
||
font-style: italic;
|
||
}
|
||
.bc-muted {
|
||
color: var(--bc-ink-2);
|
||
}
|
||
.bc-small {
|
||
font-size: 13px;
|
||
}
|
||
.bc-num {
|
||
font-family: var(--bc-font-head);
|
||
font-weight: 800;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
/* ───── кнопки-таблетки ───── */
|
||
.bc-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 10px;
|
||
min-height: var(--bc-tap);
|
||
height: 52px;
|
||
padding: 0 24px;
|
||
border-radius: var(--bc-pill);
|
||
border: 2px solid transparent;
|
||
font-weight: 600;
|
||
font-size: 16px;
|
||
text-decoration: none;
|
||
cursor: pointer;
|
||
transition: transform 0.08s ease, opacity 0.15s ease, background 0.15s ease;
|
||
white-space: nowrap;
|
||
user-select: none;
|
||
}
|
||
.bc-btn:active {
|
||
transform: scale(0.98);
|
||
}
|
||
.bc-btn[disabled] {
|
||
opacity: 0.45;
|
||
cursor: not-allowed;
|
||
transform: none;
|
||
}
|
||
.bc-btn--dark {
|
||
background: var(--bc-dark);
|
||
color: #fff;
|
||
}
|
||
.bc-btn--light {
|
||
background: var(--bc-surface);
|
||
color: var(--bc-ink);
|
||
}
|
||
.bc-btn--outline {
|
||
background: transparent;
|
||
border-color: var(--bc-ink);
|
||
color: var(--bc-ink);
|
||
}
|
||
.bc-btn--accent {
|
||
background: var(--bc-accent);
|
||
color: #fff;
|
||
}
|
||
.bc-btn--ghost {
|
||
background: transparent;
|
||
color: var(--bc-ink);
|
||
padding: 0 12px;
|
||
}
|
||
.bc-btn--danger {
|
||
background: transparent;
|
||
border-color: var(--bc-danger);
|
||
color: var(--bc-danger);
|
||
}
|
||
.bc-btn--sm {
|
||
height: var(--bc-tap);
|
||
padding: 0 16px;
|
||
font-size: 14px;
|
||
}
|
||
.bc-btn--block {
|
||
width: 100%;
|
||
}
|
||
|
||
/* ───── карточки ───── */
|
||
.bc-card {
|
||
background: var(--bc-surface);
|
||
border-radius: var(--bc-r-lg);
|
||
padding: 20px;
|
||
}
|
||
.bc-card--tight {
|
||
border-radius: var(--bc-r-md);
|
||
padding: 14px 16px;
|
||
}
|
||
.bc-tone-home {
|
||
background: var(--bc-home);
|
||
color: var(--bc-home-ink);
|
||
}
|
||
.bc-tone-docs {
|
||
background: var(--bc-docs);
|
||
color: var(--bc-docs-ink);
|
||
}
|
||
.bc-tone-learn {
|
||
background: var(--bc-learn);
|
||
color: var(--bc-learn-ink);
|
||
}
|
||
.bc-tone-perks {
|
||
background: var(--bc-perks);
|
||
color: var(--bc-perks-ink);
|
||
}
|
||
.bc-tone-pink {
|
||
background: var(--bc-pink);
|
||
color: var(--bc-pink-ink);
|
||
}
|
||
.bc-tone-blue {
|
||
background: var(--bc-blue);
|
||
color: var(--bc-blue-ink);
|
||
}
|
||
.bc-tone-dark {
|
||
background: var(--bc-dark);
|
||
color: #fff;
|
||
}
|
||
.bc-tone-white {
|
||
background: var(--bc-surface);
|
||
color: var(--bc-ink);
|
||
}
|
||
|
||
/* ───── бейджи и чипы ───── */
|
||
.bc-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 4px 10px;
|
||
border-radius: var(--bc-pill);
|
||
background: var(--bc-surface);
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
white-space: nowrap;
|
||
}
|
||
.bc-badge--dot::before {
|
||
content: '';
|
||
width: 7px;
|
||
height: 7px;
|
||
border-radius: 50%;
|
||
background: currentColor;
|
||
}
|
||
.bc-chip {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 6px;
|
||
min-height: var(--bc-tap);
|
||
padding: 8px 16px;
|
||
border-radius: var(--bc-pill);
|
||
background: var(--bc-surface);
|
||
border: 2px solid transparent;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
}
|
||
.bc-chip[aria-pressed='true'] {
|
||
background: var(--bc-dark);
|
||
color: #fff;
|
||
}
|
||
.bc-chips {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px;
|
||
}
|
||
|
||
/* строка-таблетка услуги «Клининг … от N ֏» */
|
||
.bc-row-pill {
|
||
min-height: 46px;
|
||
padding: 0 16px;
|
||
border-radius: var(--bc-pill);
|
||
background: var(--bc-surface);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 10px;
|
||
font-size: 15px;
|
||
color: var(--bc-ink);
|
||
text-decoration: none;
|
||
}
|
||
|
||
/* ───── поля ───── */
|
||
.bc-field {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
}
|
||
.bc-label {
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: var(--bc-ink-2);
|
||
}
|
||
.bc-input {
|
||
min-height: 50px;
|
||
width: 100%;
|
||
padding: 12px 16px;
|
||
border-radius: 18px;
|
||
border: 2px solid var(--bc-line);
|
||
background: var(--bc-surface);
|
||
font-size: 16px;
|
||
outline: none;
|
||
}
|
||
.bc-input:focus {
|
||
border-color: var(--bc-ink);
|
||
}
|
||
textarea.bc-input {
|
||
resize: vertical;
|
||
min-height: 90px;
|
||
}
|
||
.bc-error {
|
||
color: var(--bc-danger);
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* степпер −/+ */
|
||
.bc-stepper {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
padding: 4px;
|
||
border-radius: var(--bc-pill);
|
||
background: var(--bc-surface);
|
||
}
|
||
.bc-stepper button {
|
||
width: var(--bc-tap);
|
||
height: var(--bc-tap);
|
||
border-radius: 50%;
|
||
border: none;
|
||
background: var(--bc-bg);
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
cursor: pointer;
|
||
}
|
||
.bc-stepper button[disabled] {
|
||
opacity: 0.35;
|
||
}
|
||
.bc-stepper output {
|
||
min-width: 36px;
|
||
text-align: center;
|
||
font-family: var(--bc-font-head);
|
||
font-weight: 700;
|
||
font-size: 18px;
|
||
}
|
||
|
||
/* сегменты (переключатель тарифов, табы) */
|
||
.bc-segmented {
|
||
display: flex;
|
||
padding: 4px;
|
||
gap: 4px;
|
||
border-radius: var(--bc-pill);
|
||
background: var(--bc-surface);
|
||
}
|
||
.bc-segmented button {
|
||
flex: 1;
|
||
min-height: 40px;
|
||
border-radius: var(--bc-pill);
|
||
border: none;
|
||
background: transparent;
|
||
font-weight: 600;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
}
|
||
.bc-segmented button[aria-pressed='true'] {
|
||
background: var(--bc-dark);
|
||
color: #fff;
|
||
}
|
||
|
||
/* ───── тёмная нижняя навигация-таблетка с белой «+» ───── */
|
||
.bc-bottomnav {
|
||
position: fixed;
|
||
left: 50%;
|
||
bottom: calc(12px + env(safe-area-inset-bottom));
|
||
transform: translateX(-50%);
|
||
width: min(440px, calc(100% - 24px));
|
||
height: 64px;
|
||
padding: 0 8px;
|
||
border-radius: var(--bc-pill);
|
||
background: var(--bc-dark);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-shadow: 0 10px 30px rgba(30, 27, 26, 0.25);
|
||
z-index: 50;
|
||
}
|
||
.bc-bottomnav a,
|
||
.bc-bottomnav button {
|
||
flex: 1;
|
||
height: 52px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 2px;
|
||
color: #cfc8c2;
|
||
text-decoration: none;
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
border: none;
|
||
background: none;
|
||
cursor: pointer;
|
||
border-radius: var(--bc-pill);
|
||
}
|
||
.bc-bottomnav [aria-current='page'] {
|
||
color: #fff;
|
||
}
|
||
.bc-bottomnav .bc-bottomnav__plus {
|
||
flex: none;
|
||
width: 52px;
|
||
height: 52px;
|
||
border-radius: 50%;
|
||
background: #fff;
|
||
color: var(--bc-dark);
|
||
}
|
||
|
||
/* ───── «цветок» (scalloped shape) ───── */
|
||
.bc-flower {
|
||
position: relative;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex: none;
|
||
}
|
||
.bc-flower svg {
|
||
position: absolute;
|
||
inset: 0;
|
||
}
|
||
.bc-flower > span {
|
||
position: relative;
|
||
font-family: var(--bc-font-head);
|
||
font-weight: 800;
|
||
}
|
||
|
||
/* ───── прочее ───── */
|
||
.bc-stack {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
.bc-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
.bc-between {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 10px;
|
||
}
|
||
.bc-divider {
|
||
height: 1px;
|
||
background: var(--bc-line);
|
||
border: none;
|
||
margin: 4px 0;
|
||
}
|
||
.bc-spinner {
|
||
width: 28px;
|
||
height: 28px;
|
||
border-radius: 50%;
|
||
border: 3px solid var(--bc-line);
|
||
border-top-color: var(--bc-accent);
|
||
animation: bc-spin 0.8s linear infinite;
|
||
}
|
||
@keyframes bc-spin {
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
.bc-center {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 40vh;
|
||
}
|
||
.bc-sheet-backdrop {
|
||
position: fixed;
|
||
inset: 0;
|
||
background: rgba(30, 27, 26, 0.45);
|
||
z-index: 80;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: center;
|
||
}
|
||
.bc-sheet {
|
||
width: min(560px, 100%);
|
||
max-height: 88vh;
|
||
overflow: auto;
|
||
background: var(--bc-bg);
|
||
border-radius: var(--bc-r-xl) var(--bc-r-xl) 0 0;
|
||
padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
|
||
}
|
||
@media (min-width: 720px) {
|
||
.bc-sheet-backdrop {
|
||
align-items: center;
|
||
}
|
||
.bc-sheet {
|
||
border-radius: var(--bc-r-xl);
|
||
}
|
||
}
|
||
.bc-toast {
|
||
position: fixed;
|
||
left: 50%;
|
||
top: calc(12px + env(safe-area-inset-top));
|
||
transform: translateX(-50%);
|
||
z-index: 90;
|
||
max-width: calc(100% - 24px);
|
||
padding: 12px 18px;
|
||
border-radius: var(--bc-pill);
|
||
background: var(--bc-dark);
|
||
color: #fff;
|
||
font-weight: 600;
|
||
font-size: 14px;
|
||
box-shadow: var(--bc-shadow);
|
||
}
|
||
.bc-toast--error {
|
||
background: var(--bc-danger);
|
||
}
|
||
|
||
/* шкала прогресса статусов */
|
||
.bc-steps {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0;
|
||
}
|
||
.bc-step {
|
||
display: flex;
|
||
gap: 12px;
|
||
align-items: flex-start;
|
||
min-height: 40px;
|
||
}
|
||
.bc-step__dot {
|
||
width: 22px;
|
||
height: 22px;
|
||
border-radius: 50%;
|
||
border: 2px solid var(--bc-line);
|
||
background: var(--bc-surface);
|
||
flex: none;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: 1px;
|
||
}
|
||
.bc-step--done .bc-step__dot {
|
||
background: var(--bc-ok);
|
||
border-color: var(--bc-ok);
|
||
color: #fff;
|
||
}
|
||
.bc-step--current .bc-step__dot {
|
||
border-color: var(--bc-accent);
|
||
box-shadow: 0 0 0 4px rgba(184, 35, 90, 0.15);
|
||
}
|
||
.bc-step--current .bc-step__label {
|
||
font-weight: 700;
|
||
}
|
||
.bc-step--todo .bc-step__label {
|
||
color: var(--bc-ink-3);
|
||
}
|
||
|
||
/* чекбокс-строка (чек-лист исполнителя) */
|
||
.bc-check {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
min-height: 56px;
|
||
padding: 10px 16px;
|
||
border-radius: var(--bc-r-sm);
|
||
background: var(--bc-surface);
|
||
cursor: pointer;
|
||
border: 2px solid transparent;
|
||
}
|
||
.bc-check input {
|
||
width: 24px;
|
||
height: 24px;
|
||
accent-color: var(--bc-ok);
|
||
flex: none;
|
||
}
|
||
.bc-check--done {
|
||
border-color: var(--bc-ok);
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
* {
|
||
animation: none !important;
|
||
transition: none !important;
|
||
}
|
||
}
|