/* * Pickup-Point UI — design tokens. * Перенесено из maxweb/src/assets/scss/common/_var.scss (Next.js партнёрский кабинет). * При обновлении палитры в maxweb — синхронизировать сюда. * * Все custom-переменные с префиксом --pp- чтобы не конфликтовать с Bootstrap 4 * (Bootstrap использует свои --bs-*, но всё равно безопаснее иметь свой namespace). */ /* Шрифт: используем system stack чтобы не блокироваться на Google Fonts. * Если нужен Rubik — подключить отдельным non-blocking в layouts. */ /* PointSoftBlack — фирменный шрифт для бренд-надписей (использован в legacy * partners-модуле для слова "партнёры"). Файл живёт в /partners_module/fonts/. */ @font-face { font-family: 'PointSoftBlack'; src: url('/partners_module/fonts/PointSoftBlack.ttf') format('truetype'); font-display: swap; } :root { /* === Brand === */ --pp-brand: #112b66; --pp-brand-light: #0e3ead; --pp-brand-dark: #0a1f4a; --pp-accent: #991a4e; --pp-light-blue: #0c54a1; /* === Backgrounds === */ --pp-bg: #f6f8fb; /* page background */ --pp-bg-card: #ffffff; /* card surface */ --pp-bg-muted: #f8f9fa; /* secondary surface */ --pp-bg-subtle: #ecf0f5; /* hover/active subtle */ --pp-bg-divider: #eef0f3; /* dividers, table borders */ --pp-bg-input: #ffffff; --pp-bg-input-disabled: #f2f2f2; /* === Text === */ --pp-fg: #212529; --pp-fg-muted: #595959; --pp-fg-subtle: #707070; --pp-fg-disabled: #999999; --pp-fg-inverse: #ffffff; --pp-fg-brand: #112b66; --pp-fg-link: #0c54a1; /* === Borders === */ --pp-border: #e6e6ea; --pp-border-strong: #d9d9d9; --pp-border-focus: #112b66; /* === Status semantic === */ --pp-success: #28a745; --pp-success-fg: #15803d; --pp-warning: #ff9009; --pp-warning-fg: #b45309; --pp-danger: #dc3545; --pp-danger-fg: #b91c1c; --pp-info: #0ea5e9; --pp-info-fg: #0369a1; /* === Status badges (заказы/локации) === */ /* Из maxweb _var.scss --st-N-bg/fg, transparent через alpha */ --pp-st-pending-bg: rgba(102, 77, 3, 0.12); --pp-st-pending-fg: #664d03; --pp-st-active-bg: rgba(21, 128, 61, 0.12); --pp-st-active-fg: #15803d; --pp-st-info-bg: rgba(14, 165, 233, 0.13); --pp-st-info-fg: #0ea5e9; --pp-st-success-bg: rgba(34, 197, 94, 0.13); --pp-st-success-fg: #15803d; --pp-st-danger-bg: rgba(185, 28, 28, 0.12); --pp-st-danger-fg: #b91c1c; --pp-st-warn-bg: rgba(180, 83, 9, 0.12); --pp-st-warn-fg: #b45309; --pp-st-neutral-bg: rgba(73, 80, 87, 0.10); --pp-st-neutral-fg: #495057; /* === Typography === */ /* Rubik подключается из /partners_module/css/fonts.css (локальные .woff/.ttf файлы). * System stack как fallback пока Rubik грузится / если файлы недоступны. */ --pp-font-sans: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --pp-fs-xs: 11px; --pp-fs-sm: 13px; --pp-fs-base: 14px; --pp-fs-md: 15px; --pp-fs-lg: 16px; --pp-fs-xl: 18px; --pp-fs-2xl: 22px; --pp-fs-3xl: 28px; --pp-lh-tight: 1.25; --pp-lh-base: 1.5; --pp-lh-loose: 1.65; /* === Spacing scale === */ --pp-sp-1: 4px; --pp-sp-2: 8px; --pp-sp-3: 12px; --pp-sp-4: 16px; --pp-sp-5: 20px; --pp-sp-6: 24px; --pp-sp-8: 32px; --pp-sp-10: 40px; --pp-sp-12: 48px; /* === Radius === */ --pp-radius-sm: 6px; --pp-radius: 10px; --pp-radius-md: 13px; --pp-radius-lg: 16px; --pp-radius-pill: 999px; /* === Shadows === */ --pp-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05); --pp-shadow: 0 2px 8px rgba(15, 23, 42, 0.06); --pp-shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08); --pp-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12); /* === Layout dimensions === */ --pp-header-h: 64px; --pp-mobile-bar-h: 64px; --pp-container-max: 1280px; --pp-content-pad-x: 24px; --pp-content-pad-y: 32px; /* === Transitions === */ --pp-transition: 0.2s ease; --pp-transition-slow: 0.35s ease; /* === Z-index === */ --pp-z-dropdown: 100; --pp-z-sticky: 200; --pp-z-header: 300; --pp-z-mobile-bar: 350; --pp-z-modal-backdrop: 400; --pp-z-modal: 500; --pp-z-toast: 700; } /* Mobile: меньше padding для контента */ @media (max-width: 767.98px) { :root { --pp-content-pad-x: 16px; --pp-content-pad-y: 20px; } } /* Базовые reset для нашей зоны (ограничен .pp-app чтобы не залезать на остальной сайт) */ .pp-app { font-family: var(--pp-font-sans); font-size: var(--pp-fs-base); line-height: var(--pp-lh-base); color: var(--pp-fg); background: var(--pp-bg); min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .pp-app *, .pp-app *::before, .pp-app *::after { box-sizing: border-box; } /* :where() обнуляет специфичность селектора `a` — иначе он бы перебивал * цвета у .pp-btn--primary / .pp-nav-item__link / .pp-header__logo и пр. * Теперь синий цвет только у "обычных" ссылок без наших классов. */ .pp-app :where(a) { color: var(--pp-fg-link); text-decoration: none; transition: color var(--pp-transition); } .pp-app :where(a):hover, .pp-app :where(a):focus { color: var(--pp-brand); text-decoration: none; } .pp-app h1, .pp-app h2, .pp-app h3, .pp-app h4, .pp-app h5, .pp-app h6 { font-family: var(--pp-font-sans); color: var(--pp-fg); font-weight: 500; line-height: var(--pp-lh-tight); margin: 0 0 var(--pp-sp-3); } .pp-app h1 { font-size: var(--pp-fs-3xl); } .pp-app h2 { font-size: var(--pp-fs-2xl); } .pp-app h3 { font-size: var(--pp-fs-xl); } .pp-app h4 { font-size: var(--pp-fs-lg); } .pp-app h5 { font-size: var(--pp-fs-md); } .pp-app h6 { font-size: var(--pp-fs-base); } .pp-app p { margin: 0 0 var(--pp-sp-3); } .pp-app p:last-child { margin-bottom: 0; } /* Утилитарные классы для частых случаев. Ограничены — не делаем Tailwind. */ .pp-text-muted { color: var(--pp-fg-muted); } .pp-text-subtle { color: var(--pp-fg-subtle); } .pp-text-brand { color: var(--pp-brand); } .pp-text-success { color: var(--pp-success-fg); } .pp-text-danger { color: var(--pp-danger-fg); } .pp-text-warning { color: var(--pp-warning-fg); } .pp-text-sm { font-size: var(--pp-fs-sm); } .pp-text-lg { font-size: var(--pp-fs-lg); } .pp-text-xl { font-size: var(--pp-fs-xl); } .pp-fw-medium { font-weight: 500; } .pp-fw-semibold { font-weight: 600; } .pp-fw-bold { font-weight: 700; }