/* ============================================================ PokeTime Redesign — дизайн-система из макета Claude Design. Применяется только к страницам нового дизайна (Главная, Заказ). Старый app.css не трогаем — это отдельная оболочка. ============================================================ */ /* Светлая тема (по умолчанию) */ :root { --rd-cream: #FBF8F1; /* canvas — фон страницы */ --rd-surface: #FFFFFF; /* карточки */ --rd-surface-raised: #FFFFFF; /* модалки, шапка, поднятые элементы */ --rd-flip-back: #FFFFFF; /* оборот карты лояльности — светлый в светлой теме */ --rd-flip-fg: #15211E; /* текст на обороте */ --rd-flip-line: #F1ECE0; /* разделители на обороте */ --rd-pill-bg: #15211E; /* тёмная «пилюля» (кнопка корзины, тег) */ --rd-pill-fg: #FFFFFF; --rd-ink: #15211E; /* заголовки */ --rd-muted: #5C6B66; /* основной текст */ --rd-muted-2: #7A847F; --rd-faint: #9aa39f; --rd-faint-2: #A7AFAA; --rd-meta: #8A938E; --rd-text-2: #3E4844; --rd-teal: #0FA0A0; /* бренд */ --rd-teal-deep: #0A6E6E; --rd-teal-tint: #E7F4F1; --rd-accent: #ff6b6b; /* фирменный красный */ --rd-accent-sh: rgba(255,107,107,.34); --rd-success: #1F9E5A; --rd-warning: #F2A019; --rd-border: #ECE6D9; --rd-border-2: #E4DDCD; --rd-line: #F1ECE0; --rd-soft: #F4EFE4; --rd-track: #EFE9DC; --rd-white: #FFFFFF; --rd-nav-bg: rgba(251,248,241,.86); --rd-overlay: rgba(8,18,17,.55); --rd-scroll: #d7d0c0; --rd-hero-grad: linear-gradient(135deg,#16ADA3 0%,#0C8480 55%,#0A6E6E 100%); --rd-card-sh: 0 8px 24px rgba(21,33,30,.05); --rd-card-sh-sm: 0 6px 18px rgba(21,33,30,.04); } /* Тёмная тема — переопределяем те же токены (механизм: data-theme="dark" на ). Принципы: нет чистого чёрного; слои светлеют (canvas→surface→raised); акценты осветлены и чуть менее насыщены; текст — тёплый off-white; тени темнее. */ [data-theme="dark"] { --rd-cream: #0C1413; --rd-surface: #152120; --rd-surface-raised: #1B2B29; --rd-flip-back: #1B2B29; --rd-flip-fg: #F2EFE8; --rd-flip-line: rgba(255,255,255,.1); --rd-pill-bg: #2DC4BE; --rd-pill-fg: #0C1413; --rd-ink: #F2EFE8; --rd-muted: #C2CBC7; --rd-muted-2: #9DAAA5; --rd-faint: #7E8B86; --rd-faint-2: #6E7B77; --rd-meta: #8A968F; --rd-text-2: #C2CBC7; --rd-teal: #2DC4BE; --rd-teal-deep: #5FD6CF; --rd-teal-tint: rgba(45,196,190,0.14); --rd-accent: #ff7b7b; --rd-accent-sh: rgba(255,123,123,.30); --rd-success: #3FBF73; --rd-warning: #F2B03A; --rd-border: #243634; --rd-border-2: #2C403D; --rd-line: #1F2E2C; --rd-soft: #20302D; --rd-track: #20302D; --rd-white: #152120; --rd-nav-bg: rgba(12,20,19,.85); --rd-overlay: rgba(0,0,0,.6); --rd-scroll: #2C403D; --rd-hero-grad: linear-gradient(135deg,#13807B 0%,#0C605C 55%,#0A5654 100%); --rd-card-sh: 0 8px 24px rgba(0,0,0,.4); --rd-card-sh-sm: 0 6px 18px rgba(0,0,0,.35); } /* ---- сброс/база для тела нового дизайна ---- */ body.rd { margin: 0; background: var(--rd-cream); color: var(--rd-ink); font-family: 'Onest', system-ui, sans-serif; -webkit-font-smoothing: antialiased; } body.rd * { box-sizing: border-box; } body.rd ::-webkit-scrollbar { width: 10px; height: 10px; } body.rd ::-webkit-scrollbar-thumb { background: var(--rd-scroll); border-radius: 8px; } body.rd ::-webkit-scrollbar-track { background: transparent; } body.rd input::placeholder { color: var(--rd-faint); } .rd-h { font-family: 'Unbounded', sans-serif; letter-spacing: -.5px; } /* Плавный переход темы на основных контейнерах */ body.rd, body.rd .rd-topbar, body.rd .rd-appbar, body.rd .rd-botnav, body.rd .rd-card, body.rd .rd-summary, body.rd .rd-pcard, body.rd .rd-modal, body.rd .rd-input, body.rd .rd-promo input, body.rd .rd-cart-line, body.rd .rd-stamp, body.rd .rd-qr, body.rd .rd-coupon, body.rd .rd-ing-card, body.rd .rd-build-card, body.rd .rd-auth-card, body.rd .rd-chip, body.rd .rd-step-btn, body.rd .rd-stepper-sm, body.rd .rd-prow, body.rd .rd-comp-row { transition: background-color .2s ease, color .2s ease, border-color .2s ease; } /* Тёмная тема: на осветлённом teal активного чипа белый текст слишком ярок — ставим тёмный текст для контраста. */ [data-theme="dark"] .rd-chip.is-active { color: #0C1413; } /* Кнопка переключения темы */ .rd-theme-btn { width: 40px; height: 40px; border-radius: 13px; flex: 0 0 auto; border: 1px solid var(--rd-border); background: var(--rd-surface); color: var(--rd-ink); cursor: pointer; display: flex; align-items: center; justify-content: center; } .rd-theme-btn svg { width: 18px; height: 18px; } .rd-theme-btn .rd-ic-sun { display: none; } [data-theme="dark"] .rd-theme-btn .rd-ic-moon { display: none; } [data-theme="dark"] .rd-theme-btn .rd-ic-sun { display: block; } /* ============================================================ НАВИГАЦИЯ ============================================================ */ /* desktop top bar */ .rd-topbar { position: sticky; top: 0; z-index: 40; background: var(--rd-nav-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--rd-border); transition: box-shadow .22s ease, border-color .22s ease; } .rd-topbar.is-scrolled { box-shadow: 0 6px 22px rgba(21,33,30,.06); } [data-theme="dark"] .rd-topbar.is-scrolled { box-shadow: 0 6px 22px rgba(0,0,0,.4); } .rd-topbar-inner { max-width: 1200px; margin: 0 auto; padding: 16px 32px; display: flex; align-items: center; gap: 36px; } .rd-logo { font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 22px; letter-spacing: -.5px; color: var(--rd-ink); text-decoration: none; display: inline-flex; align-items: center; } .rd-logo span { color: var(--rd-teal); } /* фирменная марка-чип (поке-боул) перед словом */ .rd-logo .rd-logo-mark, .rd-appbar-brand .rd-logo-mark { flex: 0 0 auto; width: 30px; height: 30px; margin-right: 9px; border-radius: 9px; color: #fff; background: linear-gradient(135deg, var(--rd-teal), var(--rd-teal-deep)); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(15,160,160,.35); } .rd-logo .rd-logo-mark svg, .rd-appbar-brand .rd-logo-mark svg { width: 18px; height: 18px; } .rd-appbar-brand .rd-logo-mark { width: 36px; height: 36px; margin-right: 0; border-radius: 11px; } .rd-appbar-brand .rd-logo-mark svg { width: 21px; height: 21px; } .rd-nav-links { display: flex; align-items: center; gap: 26px; margin-left: 8px; } .rd-nav-link { font-family: 'Onest', sans-serif; font-size: 15px; font-weight: 600; color: var(--rd-muted); text-decoration: none; background: none; border: 0; cursor: pointer; padding: 0; } .rd-nav-link:hover { color: var(--rd-ink); } .rd-nav-link.is-active { color: var(--rd-teal); font-weight: 700; } .rd-nav-link.is-inert { color: var(--rd-faint-2); cursor: default; } .rd-cart-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; background: var(--rd-pill-bg); color: var(--rd-pill-fg); border: none; padding: 11px 18px; border-radius: 14px; font-family: 'Onest', sans-serif; font-weight: 700; font-size: 15px; cursor: pointer; text-decoration: none; } .rd-cart-btn svg { width: 18px; height: 18px; } .rd-count-badge { background: var(--rd-accent); color: #fff; font-size: 12px; font-weight: 700; min-width: 20px; height: 20px; border-radius: 10px; display: none; align-items: center; justify-content: center; padding: 0 5px; } .rd-count-badge.visible { display: flex; } /* mobile app bar */ .rd-appbar { position: sticky; top: 0; z-index: 40; background: var(--rd-nav-bg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); padding: 14px 16px; display: flex; align-items: center; padding-top: calc(14px + env(safe-area-inset-top)); transition: box-shadow .22s ease, border-color .22s ease; border-bottom: 1px solid transparent; } .rd-appbar.is-scrolled { box-shadow: 0 4px 18px rgba(21,33,30,.07); border-bottom-color: var(--rd-border); } [data-theme="dark"] .rd-appbar.is-scrolled { box-shadow: 0 4px 18px rgba(0,0,0,.45); } /* брендовый блок: марка + две строки */ .rd-appbar-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; min-width: 0; } .rd-appbar-brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.12; } .rd-appbar-brand-name { font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 19px; letter-spacing: -.5px; color: var(--rd-ink); } .rd-appbar-brand-name span { color: var(--rd-teal); } .rd-appbar-brand-sub { font-family: 'Onest', sans-serif; font-weight: 600; font-size: 11.5px; color: var(--rd-muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* круглые app-иконки справа */ .rd-appbar-actions { margin-left: auto; display: flex; align-items: center; gap: 9px; flex: 0 0 auto; } .rd-appbar-ic { position: relative; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: var(--rd-surface); border: 1px solid var(--rd-border); color: var(--rd-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; transition: transform .1s ease; } .rd-appbar-ic:active { transform: scale(.92); } .rd-appbar-ic svg { width: 18px; height: 18px; } .rd-appbar-cart { background: var(--rd-pill-bg); color: var(--rd-pill-fg); border-color: transparent; } /* видимость иконок темы (универсально, вне зависимости от обёртки) */ .rd-ic-sun { display: none; } [data-theme="dark"] .rd-ic-moon { display: none; } [data-theme="dark"] .rd-ic-sun { display: block; } .rd-count-badge-mob { position: absolute; top: -5px; right: -5px; background: var(--rd-accent); color: #fff; font-size: 11px; font-weight: 700; min-width: 19px; height: 19px; border-radius: 10px; display: none; align-items: center; justify-content: center; padding: 0 5px; border: 2px solid var(--rd-cream); } .rd-count-badge-mob.visible { display: flex; } /* mobile bottom nav */ .rd-botnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--rd-nav-bg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--rd-border); display: flex; padding: 8px 6px calc(10px + env(safe-area-inset-bottom)); } .rd-botnav-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: none; cursor: pointer; padding: 6px 0; color: var(--rd-faint-2); text-decoration: none; } .rd-botnav-item span { font-size: 11px; font-family: 'Onest', sans-serif; font-weight: 600; white-space: nowrap; } .rd-botnav-item svg { width: 22px; height: 22px; } .rd-botnav-item.is-active { color: var(--rd-teal); } .rd-botnav-badge { position: absolute; top: 2px; right: 50%; transform: translateX(18px); background: var(--rd-accent); color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: none; align-items: center; justify-content: center; padding: 0 4px; } .rd-botnav-badge.visible { display: flex; } /* show/hide by viewport */ .rd-desktop-only { display: block; } .rd-mobile-only { display: none; } @media (max-width: 759px) { .rd-desktop-only { display: none; } .rd-mobile-only { display: flex; } } /* ============================================================ ЛЕЙАУТ КОНТЕНТА ============================================================ */ .rd-content { padding-top: 26px; padding-bottom: 28px; } .rd-container { max-width: 1200px; margin: 0 auto; padding: 0 32px; } @media (max-width: 759px) { .rd-content { padding-top: 12px; padding-bottom: 20px; } .rd-container { padding: 0 16px; } } /* ============================================================ ГЕРОЙ ============================================================ */ .rd-hero { background: var(--rd-hero-grad); border-radius: 28px; padding: 40px 44px; color: #fff; position: relative; overflow: hidden; } .rd-hero::before, .rd-hero::after { content: ""; position: absolute; border-radius: 50%; } .rd-hero::before { right: -70px; top: -70px; width: 260px; height: 260px; background: rgba(255,255,255,.08); } .rd-hero::after { left: -50px; bottom: -80px; width: 200px; height: 200px; background: rgba(255,255,255,.05); } /* десктоп: текст слева, фото/эмблема справа (две колонки) */ .rd-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; position: relative; z-index: 2; } .rd-hero--noimg .rd-hero-grid { grid-template-columns: 1fr auto; } .rd-hero-main { min-width: 0; } .rd-hero-badge { display: inline-flex; align-items: center; font-family: 'Onest', sans-serif; font-weight: 700; font-size: 11.5px; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(255,255,255,.9); background: rgba(255,255,255,.16); padding: 7px 13px; border-radius: 999px; } .rd-hero-h1 { font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 44px; line-height: 1.08; margin: 16px 0 12px; letter-spacing: -.5px; } .rd-hero-sub { font-family: 'Onest', sans-serif; font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.9); max-width: 440px; margin: 0; } .rd-hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } .rd-hero-btn { display: inline-flex; align-items: center; justify-content: center; font-family: 'Onest', sans-serif; font-weight: 700; font-size: 15px; text-decoration: none; padding: 13px 22px; border-radius: 14px; cursor: pointer; transition: transform .1s ease, background .15s ease; } .rd-hero-btn:active { transform: scale(.97); } .rd-hero-btn--primary { background: #fff; color: var(--rd-teal-deep); border: 2px solid var(--rd-accent); } .rd-hero-btn--primary:hover { background: rgba(255,255,255,.9); } .rd-hero-btn--ghost { background: rgba(255,255,255,.12); color: #fff; border: 2px solid var(--rd-accent); } .rd-hero-btn--ghost:hover { background: rgba(255,255,255,.2); } .rd-hero-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; } .rd-hero-chip { display: inline-flex; align-items: center; gap: 6px; font-family: 'Onest', sans-serif; font-weight: 600; font-size: 13px; color: #fff; background: rgba(255,255,255,.14); padding: 7px 12px; border-radius: 999px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .rd-hero-chip svg { width: 14px; height: 14px; flex: 0 0 auto; opacity: .95; } /* фото в правой колонке */ .rd-hero-art { position: relative; width: 100%; height: 320px; z-index: 2; border-radius: 22px; overflow: hidden; background: rgba(255,255,255,.08); } .rd-hero-art img { width: 100%; height: 100%; object-fit: cover; display: block; } /* декоративная эмблема вместо пустого плейсхолдера, если фото не задано */ .rd-hero-art--emblem { height: 190px; width: 190px; border-radius: 50%; overflow: visible; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; margin: 0; } .rd-hero-art--emblem svg { width: 94px; height: 94px; color: rgba(255,255,255,.92); } @media (max-width: 759px) { .rd-hero { border-radius: 22px; padding: 26px 22px; } /* мобильный: одна колонка, текст по центру блока */ .rd-hero-grid, .rd-hero--noimg .rd-hero-grid { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; grid-template-columns: none; } .rd-hero-cta, .rd-hero-stats { justify-content: center; } .rd-hero-h1 { font-size: 27px; margin: 12px 0 10px; } .rd-hero-sub { font-size: 14.5px; margin-left: auto; margin-right: auto; } .rd-hero-art { order: -1; width: 100%; max-width: 320px; height: 170px; margin: 0 auto 18px; } .rd-hero--noimg .rd-hero-art { display: none; } } /* ============================================================ КНОПКИ ============================================================ */ .rd-btn-primary { background: var(--rd-accent); color: #fff; border: none; padding: 14px 24px; border-radius: 16px; font-family: 'Onest', sans-serif; font-weight: 700; font-size: 16px; cursor: pointer; box-shadow: 0 12px 26px var(--rd-accent-sh); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; } .rd-btn-primary:hover { filter: brightness(1.03); } .rd-btn-ghost { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.35); padding: 14px 22px; border-radius: 16px; font-family: 'Onest', sans-serif; font-weight: 700; font-size: 16px; cursor: pointer; text-decoration: none; } /* ============================================================ СЕКЦИЯ МЕНЮ ============================================================ */ .rd-section { margin-top: 38px; } .rd-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .rd-h2 { font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 32px; color: var(--rd-ink); margin: 0; letter-spacing: -.5px; } .rd-section-sub { font-family: 'Onest', sans-serif; font-size: 15px; color: var(--rd-muted); margin-top: 4px; } @media (max-width: 759px) { .rd-h2 { font-size: 24px; } } .rd-chips { display: flex; gap: 10px; margin: 20px 0 16px; overflow-x: auto; } /* прячем полосу прокрутки — она перекрывала чипы (chips свайпаются/скроллятся колесом) */ .rd-chips, .rd-subchips { scrollbar-width: none; -ms-overflow-style: none; } .rd-chips::-webkit-scrollbar, .rd-subchips::-webkit-scrollbar { width: 0; height: 0; display: none; } .rd-chip { font-family: 'Onest', sans-serif; font-weight: 600; font-size: 14px; padding: 9px 17px; border-radius: 999px; cursor: pointer; white-space: nowrap; flex: 0 0 auto; transition: all .15s; background: var(--rd-surface); color: var(--rd-ink); border: 1px solid var(--rd-border-2); } .rd-chip.is-active { background: var(--chip, var(--rd-teal)); color: #fff; border-color: var(--chip, var(--rd-teal)); } /* Цвет категории виден и у невыбранного чипа: цветная точка + мягкая рамка — подсказка, что у категории есть свой цвет. */ .rd-chip.has-color, .rd-subchip.has-color { display: inline-flex; align-items: center; gap: 8px; } .rd-chip.has-color:not(.is-active) { border-color: color-mix(in srgb, var(--chip) 50%, var(--rd-border-2)); } .rd-subchip.has-color:not(.is-active) { border-color: color-mix(in srgb, var(--chip) 50%, var(--rd-border)); color: var(--rd-ink); } .rd-chip.has-color::before, .rd-subchip.has-color::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--chip); } .rd-chip.is-active.has-color::before, .rd-subchip.is-active.has-color::before { background: #fff; } /* Подкатегории — вторая строка, компактнее */ .rd-subchips { display: flex; gap: 8px; margin: 0 0 18px; overflow-x: auto; } .rd-subchip { font-family: 'Onest', sans-serif; font-weight: 600; font-size: 13px; padding: 6px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap; flex: 0 0 auto; transition: all .15s; background: transparent; color: var(--rd-muted); border: 1px solid var(--rd-border); } .rd-subchip.is-active { background: var(--chip, var(--rd-teal)); color: #fff; border-color: var(--chip, var(--rd-teal)); } .rd-menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 20px; } @media (max-width: 759px) { .rd-menu-grid:not(.rd-menu-grid--hscroll) { grid-template-columns: 1fr; gap: 14px; } } /* Эксперимент: горизонтальная лента меню (свайп вбок, как в мобильных приложениях) */ .rd-menu-grid--hscroll { display: flex; grid-template-columns: none; overflow-x: auto; overflow-y: hidden; gap: 14px; padding: 2px 0 12px; scroll-snap-type: x mandatory; /* каждая карточка примагничивается по центру */ -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; /* не тянуть страницу при свайпе ленты */ scrollbar-width: thin; scrollbar-color: var(--rd-border) transparent; } .rd-menu-grid--hscroll::-webkit-scrollbar { height: 7px; } .rd-menu-grid--hscroll::-webkit-scrollbar-thumb { background: var(--rd-border); border-radius: 4px; } .rd-menu-grid--hscroll > .rd-card { flex: 0 0 auto; width: 264px; scroll-snap-align: center; scroll-snap-stop: always; /* один свайп = максимум одна карточка, без разгона */ } @media (max-width: 759px) { .rd-menu-grid--hscroll { gap: 12px; } .rd-menu-grid--hscroll > .rd-card { width: min(80vw, 320px); } } /* Стрелки прокрутки ленты — только на десктопе (на мобиле свайп) */ .rd-menu-strip { position: relative; } .rd-strip-arrow { display: none; } @media (min-width: 760px) { .rd-strip-arrow { display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: var(--rd-surface-raised, #fff); color: var(--rd-ink); border: 1px solid var(--rd-border); box-shadow: 0 6px 20px rgba(0,0,0,.18); cursor: pointer; z-index: 5; transition: opacity .15s, transform .15s, background .15s; } .rd-strip-arrow--prev { left: -8px; } .rd-strip-arrow--next { right: -8px; } .rd-strip-arrow:hover { background: var(--rd-teal); color: #fff; border-color: transparent; transform: translateY(-50%) scale(1.06); } .rd-strip-arrow.is-hidden { opacity: 0; pointer-events: none; } } .rd-card { background: var(--rd-surface); border: 1px solid var(--rd-border); border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--rd-card-sh); cursor: pointer; transition: box-shadow .15s, transform .15s; } .rd-card:hover { box-shadow: 0 12px 30px rgba(21,33,30,.10); transform: translateY(-2px); } .rd-card-img { height: 185px; position: relative; background: var(--rd-teal-tint); } .rd-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .rd-card-img-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--rd-teal-deep); opacity: .5; font-family: 'Onest', sans-serif; font-weight: 600; font-size: 14px; } @media (max-width: 759px) { .rd-card-img { height: 170px; } } .rd-card-tag { position: absolute; top: 12px; left: 12px; font-family: 'Onest', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .3px; text-transform: uppercase; color: var(--rd-pill-fg); padding: 5px 10px; border-radius: 8px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); background: var(--rd-pill-bg); } .rd-card-tag.tag-spicy { background: var(--rd-accent); } .rd-card-tag.tag-veg { background: var(--rd-success); } .rd-card-body { padding: 16px 16px 18px; display: flex; flex-direction: column; flex: 1; } /* Верхний блок (название+описание) забирает лишнюю высоту, поэтому КБЖУ, размеры и цена прижаты к низу карточки и цены выровнены между карточками. */ .rd-card-top { flex: 1 1 auto; } .rd-card-open { cursor: pointer; } .rd-card-name { font-family: 'Onest', sans-serif; font-weight: 700; font-size: 18px; color: var(--rd-ink); } .rd-card-desc { font-family: 'Onest', sans-serif; font-size: 13.5px; color: var(--rd-muted-2); margin-top: 4px; line-height: 1.4; } .rd-card-kbju { margin-top: 12px; display: inline-flex; align-self: flex-start; font-family: 'Onest', sans-serif; font-size: 12px; font-weight: 600; color: var(--rd-teal-deep); background: var(--rd-teal-tint); padding: 6px 11px; border-radius: 9px; } .rd-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rd-line); } .rd-card-price { font-family: 'Onest', sans-serif; font-weight: 800; font-size: 20px; color: var(--rd-ink); } .rd-add-btn { width: 42px; height: 42px; border-radius: 14px; border: none; background: var(--rd-accent); color: #fff; font-size: 24px; font-weight: 400; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; box-shadow: 0 6px 16px var(--rd-accent-sh); } .rd-stepper { display: flex; align-items: center; gap: 4px; background: var(--rd-teal-tint); border-radius: 13px; padding: 4px; } .rd-step-btn { width: 30px; height: 30px; border-radius: 9px; border: none; background: var(--rd-surface-raised); color: var(--rd-teal-deep); font-size: 18px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; box-shadow: 0 1px 3px rgba(0,0,0,.06); } .rd-step-val { min-width: 22px; text-align: center; font-family: 'Onest', sans-serif; font-weight: 700; font-size: 16px; color: var(--rd-ink); } /* ============================================================ МОДАЛКА ТОВАРА ============================================================ */ .rd-overlay { position: fixed; inset: 0; z-index: 80; background: rgba(8,18,17,.55); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); display: flex; align-items: center; justify-content: center; padding: 24px; } .rd-overlay[hidden] { display: none; } .rd-modal { background: var(--rd-surface-raised); border-radius: 26px; width: 100%; max-width: 460px; max-height: 90vh; overflow: auto; box-shadow: 0 30px 80px rgba(0,0,0,.4); display: flex; flex-direction: column; } .rd-modal-img { position: relative; height: 280px; background: var(--rd-teal-tint); flex: 0 0 auto; overflow: hidden; } /* Обёртка [data-modal-img] должна занимать всю высоту, иначе height:100% у считается от auto-высоты и картинка растягивается на натуральный размер, вылезая вниз и перекрывая описание/состав. */ .rd-modal-img > [data-modal-img] { width: 100%; height: 100%; } .rd-modal-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .rd-modal-close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(255,255,255,.92); color: #15211e; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; box-shadow: 0 2px 8px rgba(0,0,0,.22); } .rd-modal-pad { padding: 22px 22px 0; } .rd-modal-name { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 23px; color: var(--rd-ink); letter-spacing: -.4px; } .rd-modal-desc { font-family: 'Onest', sans-serif; font-size: 14.5px; color: var(--rd-muted-2); margin-top: 6px; line-height: 1.45; } /* Группы выбора внутри позиции (напр. суп в ланче) */ .rd-optgroups { margin-top: 16px; display: flex; flex-direction: column; gap: 14px; } .rd-optgroup-title { font-family: 'Onest', sans-serif; font-weight: 700; font-size: 14px; margin-bottom: 8px; } .rd-optgroup-title .rd-req { color: var(--rd-accent); margin-left: 3px; } .rd-optlist { display: flex; flex-direction: column; gap: 7px; } .rd-opt { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border: 1.5px solid var(--rd-line); border-radius: 13px; cursor: pointer; transition: border-color .15s, background .15s; } .rd-opt:hover { border-color: var(--rd-teal); } .rd-opt.is-on { border-color: var(--rd-teal); background: var(--rd-teal-tint); } .rd-opt-radio { width: 19px; height: 19px; border-radius: 50%; border: 2px solid var(--rd-line); flex: 0 0 auto; position: relative; } .rd-opt.is-on .rd-opt-radio { border-color: var(--rd-teal); } .rd-opt.is-on .rd-opt-radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--rd-teal); } .rd-opt-name { font-family: 'Onest', sans-serif; font-size: 14px; flex: 1; } .rd-opt-delta { font-family: 'Onest', sans-serif; font-size: 13px; color: var(--rd-muted-2); font-weight: 600; } .rd-stats { display: flex; gap: 8px; margin-top: 18px; } .rd-stat { flex: 1; background: var(--rd-teal-tint); border-radius: 14px; padding: 12px 8px; text-align: center; } .rd-stat-v { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 17px; color: var(--rd-teal-deep); } .rd-stat-l { font-family: 'Onest', sans-serif; font-size: 10.5px; font-weight: 600; color: var(--rd-muted); margin-top: 3px; text-transform: uppercase; letter-spacing: .5px; } .rd-modal-label { font-family: 'Onest', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--rd-faint-2); margin-top: 20px; } .rd-modal-ing { font-family: 'Onest', sans-serif; font-size: 14.5px; color: var(--rd-text-2); line-height: 1.5; margin-top: 7px; } .rd-modal-foot { position: sticky; bottom: 0; background: var(--rd-surface-raised); padding: 18px 22px 22px; margin-top: 18px; border-top: 1px solid var(--rd-line); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .rd-modal-price { font-family: 'Onest', sans-serif; font-weight: 800; font-size: 24px; color: var(--rd-ink); } .rd-modal-grams { font-family: 'Onest', sans-serif; font-size: 12.5px; color: var(--rd-faint); margin-top: 1px; } .rd-modal-actions { display: flex; align-items: center; gap: 10px; } @media (max-width: 759px) { .rd-overlay { align-items: center; padding: 16px; } .rd-modal { border-radius: 24px; max-width: 100%; max-height: 90vh; } .rd-modal-img { height: 200px; } } /* ============================================================ КОРЗИНА ============================================================ */ .rd-cart-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; } .rd-cart-lines { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .rd-cart-line { background: var(--rd-surface); border: 1px solid var(--rd-border); border-radius: 18px; padding: 14px; display: flex; align-items: center; gap: 14px; box-shadow: var(--rd-card-sh-sm); max-width: 100%; } /* Компактные контролы справа (счётчик + удалить) — всегда в одну строку с текстом. */ .rd-cart-ctrls { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } @media (max-width: 759px) { .rd-cart-grid { display: flex; flex-direction: column; gap: 16px; align-items: stretch; } .rd-cart-line { gap: 8px; padding: 12px; } .rd-cart-thumb { width: 40px; height: 40px; font-size: 17px; } .rd-cart-sum { min-width: 0; } .rd-cart-name, .rd-cart-meta { overflow-wrap: anywhere; } .rd-cart-line .rd-step-btn { width: 28px; height: 28px; } } .rd-cart-thumb { width: 48px; height: 48px; border-radius: 14px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 20px; background: var(--rd-teal-tint); color: var(--rd-teal-deep); overflow: hidden; } .rd-cart-thumb--img { background: var(--rd-soft); cursor: zoom-in; } .rd-cart-thumb--img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; } /* Лайтбокс для фото поке */ .rd-lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); padding: 24px; cursor: zoom-out; } .rd-lightbox[hidden] { display: none; } .rd-lightbox img { max-width: min(92vw, 560px); max-height: 82vh; width: auto; height: auto; border-radius: 18px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); object-fit: contain; } .rd-lightbox-close { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; border-radius: 50%; border: none; background: rgba(255, 255, 255, .16); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } /* Баннер «подтвердите email» */ .rd-verify-banner { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 12px 16px; border-radius: 14px; background: color-mix(in srgb, var(--rd-warning, #E8A33D) 16%, transparent); border: 1px solid color-mix(in srgb, var(--rd-warning, #E8A33D) 40%, transparent); color: var(--rd-ink); font-family: 'Onest', sans-serif; } .rd-verify-banner > svg { width: 20px; height: 20px; color: var(--rd-warning, #E8A33D); } .rd-verify-text { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.4; } .rd-verify-resend { border: none; background: var(--rd-warning, #E8A33D); color: #fff; cursor: pointer; font-family: 'Onest', sans-serif; font-weight: 700; font-size: 13px; white-space: nowrap; padding: 8px 14px; border-radius: 10px; -webkit-tap-highlight-color: transparent; } .rd-verify-resend:hover { filter: brightness(1.05); } @media (max-width: 560px) { .rd-verify-banner { flex-wrap: wrap; } .rd-verify-text { flex: 1 1 100%; order: 2; } } /* Показать/скрыть пароль (глаз внутри поля) */ .rd-pw-wrap { position: relative; } .rd-pw-input { padding-right: 46px; } .rd-pw-eye { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: none; background: none; padding: 0; cursor: pointer; color: var(--rd-faint-2); -webkit-tap-highlight-color: transparent; } .rd-pw-eye:hover { color: var(--rd-teal); } .rd-pw-eye .ic-off { display: none; } .rd-pw-eye.is-on .ic-on { display: none; } .rd-pw-eye.is-on .ic-off { display: block; } /* Плавающий трекер статуса заказа */ /* Контейнер-стопка (фиксирован); плашки заказов складываются внутри снизу вверх */ #rd-order-tracker { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(74px + env(safe-area-inset-bottom)); z-index: 60; width: min(440px, calc(100vw - 20px)); display: flex; flex-direction: column-reverse; gap: 8px; pointer-events: none; } #rd-order-tracker[hidden] { display: none; } #rd-order-tracker > .rd-ordertrack { pointer-events: auto; } @media (min-width: 760px) { #rd-order-tracker { left: auto; right: 20px; transform: none; bottom: 20px; } } .rd-ordertrack { background: var(--rd-surface-raised, #fff); border: 1px solid var(--rd-border); border-radius: 16px; box-shadow: 0 10px 34px rgba(0,0,0,.24); overflow: hidden; font-family: 'Onest', sans-serif; } .rd-ot-head { display: flex; align-items: center; gap: 11px; padding: 11px 13px; cursor: pointer; -webkit-tap-highlight-color: transparent; } .rd-ot-ic { width: 36px; height: 36px; border-radius: 11px; background: var(--rd-teal-tint); display: flex; align-items: center; justify-content: center; font-size: 19px; flex: 0 0 auto; } .rd-ot-main { flex: 1; min-width: 0; } .rd-ot-status { font-weight: 800; font-size: 14.5px; color: var(--rd-ink); display: flex; align-items: center; gap: 7px; } .rd-ot-sub { font-size: 12px; color: var(--rd-muted-2); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rd-ot-live { width: 8px; height: 8px; border-radius: 50%; background: var(--rd-teal); box-shadow: 0 0 0 0 rgba(15,160,160,.5); animation: rdOtLive 1.5s infinite; } @keyframes rdOtLive { 0% { box-shadow: 0 0 0 0 rgba(15,160,160,.5); } 70% { box-shadow: 0 0 0 7px rgba(15,160,160,0); } 100% { box-shadow: 0 0 0 0 rgba(15,160,160,0); } } .rd-ot-chev { color: var(--rd-faint); transition: transform .2s; flex: 0 0 auto; } .rd-ordertrack.is-open .rd-ot-chev { transform: rotate(180deg); } .rd-ot-x { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; border: none; background: var(--rd-soft); color: var(--rd-faint); font-size: 18px; cursor: pointer; line-height: 1; } .rd-ot-body { display: none; padding: 2px 14px 14px; } .rd-ordertrack.is-open .rd-ot-body { display: block; } .rd-ot-steps { display: flex; gap: 6px; } .rd-ot-step { flex: 1; text-align: center; } .rd-ot-dot { width: 100%; height: 5px; border-radius: 3px; background: var(--rd-soft); } .rd-ot-step.done .rd-ot-dot { background: var(--rd-teal); } .rd-ot-step.cur .rd-ot-dot { background: var(--rd-teal); animation: rdOtBar 1.4s ease-in-out infinite; } @keyframes rdOtBar { 0%,100% { opacity: 1; } 50% { opacity: .45; } } .rd-ot-step-l { font-size: 10.5px; color: var(--rd-muted-2); margin-top: 5px; } .rd-ot-step.cur .rd-ot-step-l { color: var(--rd-teal-deep); font-weight: 700; } .rd-ot-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 12.5px; color: var(--rd-muted-2); } .rd-ot-foot b { color: var(--rd-ink); } .rd-ot-link { color: var(--rd-teal); text-decoration: none; font-weight: 700; } .rd-ot-cancel { font-size: 13px; color: var(--rd-muted-2); line-height: 1.4; } /* Яркая «шапка» плашки, чтобы бросалась в глаза (фирменный коралл). */ .rd-ot--active .rd-ot-head { background: var(--rd-accent); } .rd-ot--cancelled .rd-ot-head { background: #E5484D; } .rd-ot--done .rd-ot-head { background: var(--rd-teal); } .rd-ot--active, .rd-ot--cancelled, .rd-ot--done { border-color: transparent; box-shadow: 0 10px 34px rgba(0,0,0,.30); } .rd-ot--active .rd-ot-status, .rd-ot--cancelled .rd-ot-status, .rd-ot--done .rd-ot-status { color: #fff; } .rd-ot--active .rd-ot-sub, .rd-ot--cancelled .rd-ot-sub, .rd-ot--done .rd-ot-sub { color: rgba(255,255,255,.9); } .rd-ot--active .rd-ot-ic, .rd-ot--cancelled .rd-ot-ic, .rd-ot--done .rd-ot-ic { background: rgba(255,255,255,.22); } .rd-ot--active .rd-ot-chev, .rd-ot--cancelled .rd-ot-chev, .rd-ot--done .rd-ot-chev { color: #fff; } .rd-ot--active .rd-ot-x, .rd-ot--cancelled .rd-ot-x, .rd-ot--done .rd-ot-x { background: rgba(255,255,255,.22); color: #fff; } .rd-ot--active .rd-ot-live { background: #fff; animation: rdOtLiveW 1.5s infinite; } @keyframes rdOtLiveW { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.6); } 70% { box-shadow: 0 0 0 7px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } } /* Сводная плашка на несколько заказов — коралловая шапка + счётчик */ .rd-ot--multi { border-color: transparent; box-shadow: 0 10px 34px rgba(0,0,0,.30); } .rd-ot--multi .rd-ot-head { background: var(--rd-accent); } .rd-ot--multi .rd-ot-status { color: #fff; } .rd-ot--multi .rd-ot-sub { color: rgba(255,255,255,.9); } .rd-ot--multi .rd-ot-ic { background: rgba(255,255,255,.22); position: relative; overflow: visible; } .rd-ot--multi .rd-ot-chev { color: #fff; } .rd-ot--multi .rd-ot-live { background: #fff; animation: rdOtLiveW 1.5s infinite; } .rd-ot-count { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #fff; color: var(--rd-accent); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; line-height: 1; } .rd-ot-list { max-height: min(46vh, 320px); overflow-y: auto; margin-top: 4px; -webkit-overflow-scrolling: touch; } .rd-ot-row { display: flex; align-items: center; gap: 11px; padding: 9px 6px; margin: 0 -4px; border-bottom: 1px solid var(--rd-line); border-radius: 9px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .12s; } .rd-ot-row:last-child { border-bottom: none; } .rd-ot-row:hover, .rd-ot-row:focus-visible { background: var(--rd-soft); outline: none; } .rd-ot-row::after { content: '›'; color: var(--rd-faint); font-size: 18px; font-weight: 700; margin-left: 2px; } /* У завершённых строк вместо шеврона — крестик «скрыть» */ .rd-ot-row--done::after, .rd-ot-row--cancelled::after { display: none; } .rd-ot-rowx { flex: 0 0 auto; width: 26px; height: 26px; margin-left: 2px; border: none; border-radius: 7px; background: var(--rd-soft); color: var(--rd-faint); font-size: 17px; line-height: 1; cursor: pointer; padding: 0; } .rd-ot-rowx:hover { background: var(--rd-line); color: var(--rd-ink); } .rd-ot-rowic { width: 30px; height: 30px; border-radius: 9px; background: var(--rd-soft); display: flex; align-items: center; justify-content: center; font-size: 15px; flex: 0 0 auto; } .rd-ot-row--active .rd-ot-rowic { background: rgba(255,107,107,.16); } .rd-ot-row--done .rd-ot-rowic { background: var(--rd-teal-tint); } .rd-ot-row--cancelled .rd-ot-rowic { background: rgba(229,72,77,.14); } .rd-ot-rowmain { flex: 1; min-width: 0; display: flex; flex-direction: column; } .rd-ot-rowstatus { font-weight: 700; font-size: 13.5px; color: var(--rd-ink); } .rd-ot-rowsub { font-size: 11.5px; color: var(--rd-muted-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rd-ot-rowsum { font-weight: 700; font-size: 13px; color: var(--rd-ink); white-space: nowrap; } /* Модалка деталей заказа из трекера */ .rd-otm-card { background: var(--rd-surface-raised, #fff); border-radius: 20px; width: min(460px, 100%); max-height: 84vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.32); font-family: 'Onest', sans-serif; } .rd-otm-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 18px 12px; border-bottom: 1px solid var(--rd-line); } .rd-otm-title { font-weight: 800; font-size: 17px; color: var(--rd-ink); } .rd-otm-meta { font-size: 12.5px; color: var(--rd-muted-2); margin-top: 3px; } .rd-otm-close { margin-left: auto; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; border: none; background: var(--rd-soft); color: #15211e; font-size: 21px; line-height: 1; cursor: pointer; } .rd-otm-body { padding: 6px 18px; overflow-y: auto; -webkit-overflow-scrolling: touch; } .rd-otm-item { padding: 11px 0; border-bottom: 1px solid var(--rd-line); } .rd-otm-item:last-child { border-bottom: none; } .rd-otm-item-top { display: flex; justify-content: space-between; gap: 12px; font-weight: 700; font-size: 14px; color: var(--rd-ink); } .rd-otm-item-sub { font-size: 12.5px; color: var(--rd-muted-2); margin-top: 3px; } .rd-otm-empty { color: var(--rd-muted-2); padding: 16px 0; text-align: center; } .rd-otm-foot { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-top: 1px solid var(--rd-line); font-size: 13.5px; color: var(--rd-muted-2); } .rd-otm-foot b { color: var(--rd-ink); font-size: 15px; } /* Онбординг-тур (маскот-авокадо) */ .rd-ob-root { position: fixed; inset: 0; z-index: 1000; } .rd-ob-root--dim { background: rgba(6,15,14,.62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .rd-ob-card--center { left: 50%; top: 50%; transform: translate(-50%, -50%); } .rd-ob-ring { position: fixed; z-index: 1001; border-radius: 14px; border: 3px solid var(--rd-teal); box-shadow: 0 0 0 4px rgba(15,160,160,.30), 0 0 0 9999px rgba(6,15,14,.62); pointer-events: none; animation: rdObPulse 1.7s ease-out infinite; } @keyframes rdObPulse { 0% { box-shadow: 0 0 0 0 rgba(15,160,160,.55), 0 0 0 9999px rgba(6,15,14,.62); } 70% { box-shadow: 0 0 0 12px rgba(15,160,160,0), 0 0 0 9999px rgba(6,15,14,.62); } 100% { box-shadow: 0 0 0 0 rgba(15,160,160,0), 0 0 0 9999px rgba(6,15,14,.62); } } .rd-ob-card { position: fixed; z-index: 1002; width: min(300px, 86vw); background: var(--rd-surface-raised, #fff); border-radius: 18px; padding: 14px 16px 14px; box-shadow: 0 18px 50px rgba(0,0,0,.35); display: flex; flex-direction: column; align-items: center; text-align: center; } .rd-ob-avatar { width: 118px; height: auto; margin-top: -62px; pointer-events: none; filter: drop-shadow(0 6px 12px rgba(0,0,0,.28)); transform-origin: 50% 100%; animation: rdObBob 2.2s ease-in-out infinite; } .rd-ob-card--center .rd-ob-avatar { width: 138px; margin-top: -74px; } /* Радостное покачивание маскота */ @keyframes rdObBob { 0% { transform: translateY(0) rotate(-2.5deg); } 50% { transform: translateY(-9px) rotate(2.5deg); } 100% { transform: translateY(0) rotate(-2.5deg); } } @media (prefers-reduced-motion: reduce) { .rd-ob-avatar { animation: none; } } .rd-ob-title { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 16px; color: var(--rd-ink); margin-top: 6px; } .rd-ob-text { font-family: 'Onest', sans-serif; font-size: 14px; line-height: 1.45; color: var(--rd-muted-2); margin-top: 6px; } .rd-ob-btn { margin-top: 14px; border: none; background: var(--rd-teal); color: #fff; font-family: 'Onest', sans-serif; font-weight: 700; font-size: 14px; padding: 10px 22px; border-radius: 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; } .rd-ob-btn:hover { filter: brightness(1.05); } .rd-ob-skip { display: block; margin: 8px auto 0; border: none; background: none; color: var(--rd-muted-2); font-family: 'Onest', sans-serif; font-size: 13px; cursor: pointer; text-decoration: underline; -webkit-tap-highlight-color: transparent; } .rd-ob-skip:hover { color: var(--rd-ink); } .rd-ob-arrow { position: fixed; z-index: 1002; width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; } .rd-ob-arrow--up { border-bottom: 9px solid var(--rd-surface-raised, #fff); } .rd-ob-arrow--down { border-top: 9px solid var(--rd-surface-raised, #fff); } .rd-cart-info { flex: 1 1 auto; min-width: 0; } .rd-cart-name { font-family: 'Onest', sans-serif; font-weight: 700; font-size: 16px; color: var(--rd-ink); overflow-wrap: anywhere; } .rd-cart-meta { font-family: 'Onest', sans-serif; font-size: 12.5px; color: var(--rd-meta); margin-top: 2px; overflow-wrap: anywhere; /* Длинный состав кастом-поке не раздувает карточку — обрезаем до 4 строк. */ display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .rd-cart-sum { font-family: 'Onest', sans-serif; font-weight: 800; font-size: 16px; color: var(--rd-ink); margin-top: 6px; } .rd-cart-del { width: 30px; height: 30px; border-radius: 9px; border: none; background: var(--rd-soft); color: var(--rd-faint); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; } .rd-summary { background: var(--rd-surface); border: 1px solid var(--rd-border); border-radius: 22px; padding: 22px; box-shadow: var(--rd-card-sh); } .rd-summary-title { font-family: 'Onest', sans-serif; font-weight: 800; font-size: 18px; color: var(--rd-ink); margin-bottom: 16px; } .rd-summary-row { display: flex; justify-content: space-between; font-family: 'Onest', sans-serif; font-size: 15px; color: var(--rd-muted); margin-bottom: 10px; } .rd-summary-row span:last-child { color: var(--rd-ink); font-weight: 600; } .rd-nudge { background: var(--rd-teal-tint); border-radius: 12px; padding: 10px 13px; font-family: 'Onest', sans-serif; font-size: 12.5px; color: var(--rd-teal-deep); font-weight: 600; margin-bottom: 14px; } .rd-summary-sep { height: 1px; background: var(--rd-line); margin: 4px 0 14px; } .rd-summary-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; } .rd-summary-total .lbl { font-family: 'Onest', sans-serif; font-weight: 700; font-size: 17px; color: var(--rd-ink); } .rd-summary-total .val { font-family: 'Onest', sans-serif; font-weight: 800; font-size: 24px; color: var(--rd-ink); } .rd-summary-note { font-family: 'Onest', sans-serif; font-size: 12px; color: var(--rd-muted-2); margin: 0 0 16px; line-height: 1.35; } .rd-btn-block { width: 100%; justify-content: center; } .rd-free { color: var(--rd-success); font-weight: 600; } /* Разбивка «заказ / доставка / итог» в липком подвале модалки оформления */ .rd-checkout-foot { flex-direction: column; align-items: stretch; gap: 12px; } .rd-co-breakdown { display: flex; flex-direction: column; gap: 7px; padding-bottom: 12px; border-bottom: 1px solid var(--rd-line); } .rd-co-row { display: flex; justify-content: space-between; font-family: 'Onest', sans-serif; font-size: 14px; color: var(--rd-muted-2); } .rd-co-row span:last-child { font-weight: 700; color: var(--rd-ink); } .rd-co-row span.rd-free { color: var(--rd-success); } .rd-co-total-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } /* Контекстный запрос на уведомления в модалке успеха */ .rd-notif-prompt { margin-top: 18px; padding: 14px; border: 1px solid var(--rd-line); border-radius: 14px; background: var(--rd-teal-tint); text-align: left; } .rd-notif-ic { font-size: 22px; line-height: 1; margin-bottom: 6px; } .rd-notif-title { font-family: 'Onest', sans-serif; font-weight: 700; font-size: 14.5px; color: var(--rd-ink); } .rd-notif-sub { font-family: 'Onest', sans-serif; font-size: 12.5px; color: var(--rd-muted-2); margin-top: 3px; line-height: 1.4; } .rd-notif-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; } .rd-notif-actions .rd-btn-primary { padding: 9px 18px; } .rd-notif-later { background: none; border: none; color: var(--rd-muted-2); font-family: 'Onest', sans-serif; font-size: 13.5px; font-weight: 600; cursor: pointer; padding: 8px; } /* Мои промокоды в профиле (билетики) */ .rd-promo-head { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 15px; color: var(--rd-ink); margin: 8px 2px 10px; } .rd-promo-ticket { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--rd-teal-tint); border: 1.5px dashed var(--rd-teal); border-radius: 16px; padding: 14px 16px; margin-bottom: 10px; } .rd-promo-disc { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 20px; color: var(--rd-teal-deep); } .rd-promo-cond { font-family: 'Onest', sans-serif; font-size: 12px; color: var(--rd-muted-2); margin-top: 2px; } .rd-promo-right { text-align: right; } .rd-promo-code { font-family: 'Onest', sans-serif; font-weight: 800; font-size: 16px; letter-spacing: 1px; color: var(--rd-ink); } .rd-promo-copy { margin-top: 4px; background: none; border: none; color: var(--rd-teal-deep); font-family: 'Onest', sans-serif; font-weight: 700; font-size: 12.5px; cursor: pointer; padding: 2px; } /* Поле промокода в оформлении */ .rd-promo-row { display: flex; gap: 8px; } .rd-promo-row .rd-input { flex: 1; } .rd-promo-btn { flex: 0 0 auto; padding: 0 16px; border-radius: 12px; border: 1.5px solid var(--rd-teal); background: transparent; color: var(--rd-teal-deep); font-family: 'Onest', sans-serif; font-weight: 700; font-size: 14px; cursor: pointer; transition: background .15s, color .15s; } .rd-promo-btn:hover { background: var(--rd-teal); color: #fff; } .rd-promo-btn:disabled { opacity: .5; cursor: default; } /* Выпадашка подсказок адреса (Яндекс SuggestView) в тёмной теме — версия-независимо */ [data-theme="dark"] ymaps[class*="search__suggest"], [data-theme="dark"] ymaps[class*="suggest"][class*="popup"] { background: var(--rd-surface-raised) !important; border: 1px solid var(--rd-border) !important; box-shadow: 0 12px 34px rgba(0,0,0,.5) !important; color: var(--rd-ink) !important; } [data-theme="dark"] ymaps[class*="suggest-item"] { background: transparent !important; color: var(--rd-ink) !important; border-color: var(--rd-line) !important; } [data-theme="dark"] ymaps[class*="suggest-item"] * { color: var(--rd-ink) !important; } [data-theme="dark"] ymaps[class*="suggest-item"][class*="_selected"], [data-theme="dark"] ymaps[class*="suggest-item"]:hover { background: var(--rd-soft) !important; } /* Яркое уведомление «заказ на завтра» в окне оформления */ .rd-nextday-alert { display: flex; align-items: center; gap: 12px; background: var(--rd-accent); color: #fff; border-radius: 14px; padding: 12px 14px; margin: 0 0 14px; box-shadow: 0 8px 22px rgba(255,107,107,.4); animation: rdNextdayPulse 1.8s ease-in-out infinite; } .rd-nextday-alert[hidden] { display: none; } .rd-nextday-ic { font-size: 24px; line-height: 1; flex: 0 0 auto; } .rd-nextday-txt { display: flex; flex-direction: column; font-family: 'Onest', sans-serif; } .rd-nextday-txt b { font-size: 14.5px; font-weight: 800; letter-spacing: .3px; } .rd-nextday-txt span { font-size: 12.5px; color: rgba(255,255,255,.92); margin-top: 2px; line-height: 1.35; } @keyframes rdNextdayPulse { 0%, 100% { box-shadow: 0 8px 22px rgba(255,107,107,.4); } 50% { box-shadow: 0 8px 30px rgba(255,107,107,.7); } } @media (prefers-reduced-motion: reduce) { .rd-nextday-alert { animation: none; } } /* Крутилка в кнопках (напр. «Оформляем…») */ .rd-spin { display: inline-block; width: 15px; height: 15px; vertical-align: -2px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: rdSpin .6s linear infinite; } @keyframes rdSpin { to { transform: rotate(360deg); } } .rd-empty { background: var(--rd-surface); border: 1px solid var(--rd-border); border-radius: 24px; padding: 56px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; box-shadow: var(--rd-card-sh); margin-top: 6px; } .rd-empty-ic { width: 72px; height: 72px; border-radius: 50%; background: var(--rd-teal-tint); color: var(--rd-teal); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; } .rd-empty-title { font-family: 'Onest', sans-serif; font-weight: 800; font-size: 20px; color: var(--rd-ink); } .rd-empty-sub { font-family: 'Onest', sans-serif; font-size: 15px; color: var(--rd-muted-2); margin-top: 6px; margin-bottom: 22px; } /* промокод */ .rd-promo { display: flex; gap: 8px; margin-bottom: 14px; } .rd-promo input { flex: 1; min-width: 0; border: 1px solid var(--rd-border-2); border-radius: 12px; padding: 11px 13px; font-family: 'Onest', sans-serif; font-size: 14px; color: var(--rd-ink); outline: none; background: var(--rd-cream); } .rd-promo button { background: var(--rd-teal-tint); color: var(--rd-teal-deep); border: none; border-radius: 12px; padding: 0 16px; font-family: 'Onest', sans-serif; font-weight: 700; font-size: 14px; cursor: pointer; } .rd-clear-btn { width: 100%; margin-top: 10px; background: transparent; border: none; color: var(--rd-faint); font-family: 'Onest', sans-serif; font-weight: 600; font-size: 14px; cursor: pointer; padding: 8px; } /* ============================================================ ФОРМЫ / МОДАЛКА ОФОРМЛЕНИЯ ============================================================ */ .rd-field { margin-bottom: 14px; } .rd-label { display: block; font-family: 'Onest', sans-serif; font-weight: 600; font-size: 13px; color: var(--rd-muted); margin-bottom: 6px; } .rd-input { width: 100%; border: 1px solid var(--rd-border-2); border-radius: 13px; padding: 12px 14px; font-family: 'Onest', sans-serif; font-size: 15px; color: var(--rd-ink); outline: none; background: var(--rd-surface); } .rd-input:focus { border-color: var(--rd-teal); } textarea.rd-input { resize: none; min-height: 64px; max-height: 200px; overflow-y: hidden; } .rd-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* Кастомный выпадающий список — единый вид и поведение на всех устройствах */ .rd-select { position: relative; flex: 1; min-width: 0; } .rd-select > select { display: none; } .rd-select-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; text-align: left; } .rd-select-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rd-select-chev { width: 16px; height: 16px; flex: 0 0 auto; color: var(--rd-faint); transition: transform .15s; } .rd-select.open .rd-select-chev { transform: rotate(180deg); } .rd-select-panel { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); background: var(--rd-surface-raised); border: 1px solid var(--rd-border); border-radius: 14px; box-shadow: var(--rd-card-sh); max-height: 220px; overflow-y: auto; padding: 6px; } .rd-select-panel[hidden] { display: none; } .rd-select.rd-up .rd-select-panel { top: auto; bottom: calc(100% + 6px); } .rd-select-opt { display: block; width: 100%; text-align: left; border: none; background: none; padding: 9px 12px; border-radius: 10px; font-family: 'Onest', sans-serif; font-size: 15px; color: var(--rd-ink); cursor: pointer; } .rd-select-opt:hover { background: var(--rd-teal-tint); } .rd-select-opt.is-sel { background: var(--rd-teal-tint); color: var(--rd-teal-deep); font-weight: 700; } .rd-modal-title { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 22px; color: var(--rd-ink); letter-spacing: -.4px; margin: 0 0 4px; } /* success */ .rd-success-ic { width: 76px; height: 76px; border-radius: 50%; background: var(--rd-teal-tint); color: var(--rd-success); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; } /* ============================================================ БИЛДЕР (КБЖУ / собери боул) ============================================================ */ .rd-build-layout { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; } .rd-build-summary { position: sticky; top: 88px; } @media (max-width: 759px) { .rd-build-layout { display: flex; flex-direction: column; gap: 18px; align-items: stretch; } .rd-build-picker { order: 2; } .rd-build-summary { order: 1; position: static; } } .rd-build-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; } .rd-build-role { margin-bottom: 22px; } .rd-build-role-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .rd-build-role-title { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 17px; color: var(--rd-ink); letter-spacing: -.3px; } .rd-build-req { color: var(--rd-accent); } .rd-build-role-counter { font-family: 'Onest', sans-serif; font-size: 12.5px; color: var(--rd-muted-2); white-space: nowrap; } @media (max-width: 759px) { .rd-build-grid { grid-template-columns: 1fr 1fr; gap: 10px; } } .rd-ing-card { background: var(--rd-surface); border: 1px solid var(--rd-border); border-radius: 16px; padding: 13px 14px; cursor: pointer; } .rd-ing-card.is-sel { background: var(--rd-teal-tint); border: 1.5px solid var(--rd-teal); } .rd-ing-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .rd-ing-name { font-family: 'Onest', sans-serif; font-weight: 700; font-size: 14.5px; color: var(--rd-ink); line-height: 1.25; } .rd-ing-meta { font-family: 'Onest', sans-serif; font-size: 12px; color: var(--rd-muted-2); margin-top: 5px; } .rd-ing-price { font-family: 'Onest', sans-serif; font-weight: 700; font-size: 12.5px; color: var(--rd-teal-deep); margin-top: 3px; } .rd-ing-add { width: 34px; height: 34px; border-radius: 11px; border: none; background: var(--rd-teal); color: #fff; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; flex: 0 0 auto; } .rd-stepper-sm { display: flex; align-items: center; gap: 3px; background: var(--rd-surface-raised); border-radius: 11px; padding: 3px; flex: 0 0 auto; } .rd-build-card { background: var(--rd-surface); border: 1px solid var(--rd-border); border-radius: 22px; padding: 20px; box-shadow: var(--rd-card-sh); } .rd-build-grams-lbl { font-family: 'Onest', sans-serif; font-size: 13px; color: var(--rd-muted-2); font-weight: 600; } .rd-build-grams { font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 28px; color: var(--rd-ink); line-height: 1.1; margin-top: 2px; } .rd-portion-seg { display: flex; gap: 2px; background: var(--rd-line); border-radius: 12px; padding: 3px; } .rd-portion-seg button { font-family: 'Onest', sans-serif; font-weight: 700; font-size: 13px; padding: 7px 15px; border-radius: 10px; border: none; cursor: pointer; background: transparent; color: var(--rd-muted); } .rd-portion-seg button.is-on { background: var(--rd-teal); color: #fff; } .rd-track { height: 8px; background: var(--rd-track); border-radius: 999px; margin: 14px 0 8px; overflow: hidden; } .rd-track-fill { height: 100%; background: var(--rd-teal); border-radius: 999px; transition: width .25s; } .rd-portion-hint { font-family: 'Onest', sans-serif; font-size: 12.5px; color: var(--rd-muted-2); } .rd-kcal-row { display: flex; align-items: baseline; gap: 8px; margin-top: 18px; } .rd-kcal-big { font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 30px; color: var(--rd-teal-deep); } .rd-kcal-lbl { font-family: 'Onest', sans-serif; font-size: 14px; color: var(--rd-muted-2); font-weight: 600; } .rd-macros { display: flex; flex-direction: column; gap: 11px; margin-top: 14px; } .rd-macro-head { display: flex; justify-content: space-between; font-family: 'Onest', sans-serif; font-size: 13px; margin-bottom: 5px; } .rd-macro-head .l { color: var(--rd-muted); font-weight: 600; } .rd-macro-head .v { color: var(--rd-ink); font-weight: 700; } .rd-macro-track { height: 7px; background: var(--rd-line); border-radius: 999px; overflow: hidden; } .rd-macro-fill { height: 100%; border-radius: 999px; transition: width .25s; } .rd-build-sep { height: 1px; background: var(--rd-line); margin: 18px 0 14px; } .rd-build-comp { display: flex; flex-direction: column; gap: 10px; max-height: 230px; overflow-y: auto; } .rd-comp-row { display: flex; align-items: center; gap: 10px; } .rd-comp-name { font-family: 'Onest', sans-serif; font-weight: 600; font-size: 14px; color: var(--rd-ink); } .rd-comp-grams { font-family: 'Onest', sans-serif; font-size: 12px; color: var(--rd-faint); } .rd-build-empty { font-family: 'Onest', sans-serif; font-size: 13.5px; color: var(--rd-faint); padding: 4px 0; line-height: 1.45; } .rd-build-price { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .rd-build-price .l { font-family: 'Onest', sans-serif; font-weight: 700; font-size: 15px; color: var(--rd-ink); } .rd-build-price .v { font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 22px; color: var(--rd-ink); } .rd-btn-soft { width: 100%; margin-top: 10px; background: var(--rd-teal-tint); color: var(--rd-teal-deep); border: none; border-radius: 14px; padding: 13px; font-family: 'Onest', sans-serif; font-weight: 700; font-size: 15px; cursor: pointer; } /* ============================================================ РЕДАКТИРОВАНИЕ ПОЗИЦИИ В КОРЗИНЕ (состав/допники) ============================================================ */ .rd-cart-edit { background: none; border: none; cursor: pointer; padding: 0; margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; font-family: 'Onest', sans-serif; font-weight: 600; font-size: 12.5px; color: var(--rd-teal-deep); } .rd-cz-section { margin-bottom: 18px; } .rd-cz-title { font-family: 'Onest', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .5px; text-transform: uppercase; color: var(--rd-faint-2); margin: 0 0 10px; } .rd-cz-sub { font-family: 'Onest', sans-serif; font-size: 12.5px; color: var(--rd-muted-2); margin: 12px 0 8px; } .rd-chip-list { display: flex; flex-wrap: wrap; gap: 8px; } .rd-ingr-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--rd-teal-tint); color: var(--rd-ink); font-family: 'Onest', sans-serif; font-weight: 600; font-size: 13px; padding: 7px 10px; border-radius: 10px; } .rd-ingr-chip.is-removed { background: var(--rd-soft); color: var(--rd-faint); text-decoration: line-through; } .rd-ingr-toggle { width: 20px; height: 20px; border: none; border-radius: 6px; background: rgba(0,0,0,.06); color: inherit; cursor: pointer; font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center; } .rd-extra-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--rd-line); } .rd-extra-name { font-family: 'Onest', sans-serif; font-weight: 600; font-size: 14px; color: var(--rd-ink); margin: 0; } .rd-extra-price { font-family: 'Onest', sans-serif; font-size: 12.5px; color: var(--rd-teal-deep); margin: 2px 0 0; } .rd-picker { display: flex; flex-wrap: wrap; gap: 8px; } .rd-picker-opt { display: inline-flex; align-items: center; gap: 8px; background: var(--rd-surface); border: 1px solid var(--rd-border-2); border-radius: 11px; padding: 8px 12px; cursor: pointer; font-family: 'Onest', sans-serif; } .rd-picker-opt.is-added { border-color: var(--rd-teal); background: var(--rd-teal-tint); } .rd-picker-opt .nm { font-weight: 600; font-size: 13px; color: var(--rd-ink); } .rd-picker-opt .pr { font-weight: 700; font-size: 12.5px; color: var(--rd-teal-deep); } .rd-cz-reset { background: none; border: none; color: var(--rd-faint); font-family: 'Onest', sans-serif; font-weight: 600; font-size: 13px; cursor: pointer; padding: 0; margin-bottom: 14px; } /* ============================================================ ПРОФИЛЬ ============================================================ */ .rd-prof { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; } .rd-prof-hero { background: var(--rd-hero-grad); border-radius: 24px; padding: 22px; color: #fff; display: flex; align-items: center; gap: 16px; } .rd-prof-avatar { width: 60px; height: 60px; border-radius: 50%; flex: 0 0 auto; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 22px; color: #fff; } .rd-prof-info { flex: 1; min-width: 0; } .rd-prof-name { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 20px; letter-spacing: -.3px; margin: 0; overflow-wrap: anywhere; } .rd-prof-email { font-family: 'Onest', sans-serif; font-size: 14px; color: rgba(255,255,255,.85); margin: 4px 0 0; overflow-wrap: anywhere; } .rd-prof-logout { flex: 0 0 auto; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); color: #fff; border-radius: 13px; padding: 9px 12px; cursor: pointer; font-family: 'Onest', sans-serif; font-weight: 700; font-size: 14px; } .rd-pcard { background: var(--rd-surface); border: 1px solid var(--rd-border); border-radius: 22px; padding: 20px; box-shadow: var(--rd-card-sh); } .rd-pcard-title { display: flex; align-items: center; gap: 10px; font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 17px; color: var(--rd-ink); letter-spacing: -.3px; margin: 0 0 16px; } .rd-pcard-title .cnt { margin-left: auto; font-family: 'Onest', sans-serif; font-weight: 700; font-size: 13px; color: var(--rd-teal-deep); background: var(--rd-teal-tint); border-radius: 999px; padding: 2px 10px; } .rd-bonus-card { display: flex; align-items: center; gap: 14px; text-decoration: none; } .rd-bonus-ic { width: 46px; height: 46px; border-radius: 14px; background: var(--rd-teal-tint); color: var(--rd-teal-deep); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } .rd-bonus-body { flex: 1; min-width: 0; } .rd-bonus-lbl { font-family: 'Onest', sans-serif; font-weight: 700; font-size: 15px; color: var(--rd-ink); margin: 0; } .rd-bonus-val { font-family: 'Onest', sans-serif; font-size: 13px; color: var(--rd-muted-2); margin: 2px 0 0; } .rd-prow { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rd-line); } .rd-prow:last-child { border-bottom: none; } .rd-prow-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--rd-teal-tint); color: var(--rd-teal-deep); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; font-size: 18px; } .rd-prow-body { flex: 1; min-width: 0; } .rd-prow-title { font-family: 'Onest', sans-serif; font-weight: 700; font-size: 15px; color: var(--rd-ink); margin: 0; overflow-wrap: anywhere; } .rd-prow-meta { font-family: 'Onest', sans-serif; font-size: 12.5px; color: var(--rd-muted-2); margin: 2px 0 0; overflow-wrap: anywhere; } .rd-prow-right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: 0 0 auto; } .rd-prow-price { font-family: 'Onest', sans-serif; font-weight: 800; font-size: 15px; color: var(--rd-ink); } .rd-status { font-family: 'Onest', sans-serif; font-weight: 700; font-size: 11px; padding: 3px 9px; border-radius: 8px; background: var(--rd-teal-tint); color: var(--rd-teal-deep); white-space: nowrap; } .rd-prow-actions { display: flex; gap: 6px; flex: 0 0 auto; } .rd-icon-btn { width: 34px; height: 34px; border-radius: 10px; border: none; background: var(--rd-teal-tint); color: var(--rd-teal-deep); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 15px; } .rd-icon-btn.danger { background: #F9E7E4; color: #E5484D; } .rd-pempty { font-family: 'Onest', sans-serif; font-size: 14px; color: var(--rd-faint); padding: 8px 0; } .rd-purchase-row { cursor: pointer; } .rd-purchase-row:hover { background: var(--rd-teal-tint); border-radius: 12px; } .rd-pi-row { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--rd-line); font-family: 'Onest', sans-serif; font-size: 14px; } .rd-pi-row:last-child { border-bottom: none; } .rd-pi-name { flex: 1; min-width: 0; color: var(--rd-ink); } .rd-pi-qty { color: var(--rd-faint); font-size: 13px; white-space: nowrap; } .rd-pi-sum { font-weight: 700; color: var(--rd-ink); white-space: nowrap; } .rd-pm-total { display: flex; align-items: baseline; justify-content: space-between; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rd-line); font-family: 'Onest', sans-serif; } .rd-pm-total span:first-child { font-weight: 700; font-size: 15px; color: var(--rd-ink); } .rd-pm-total span:last-child { font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 20px; color: var(--rd-ink); } /* ============================================================ ВХОД / РЕГИСТРАЦИЯ ============================================================ */ .rd-auth { max-width: 420px; margin: 24px auto 0; } .rd-auth-logo { text-align: center; font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 28px; letter-spacing: -.5px; color: var(--rd-ink); margin-bottom: 6px; } .rd-auth-logo span { color: var(--rd-teal); } .rd-auth-card { background: var(--rd-surface); border: 1px solid var(--rd-border); border-radius: 24px; padding: 28px 24px; box-shadow: var(--rd-card-sh); } .rd-auth-title { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 22px; color: var(--rd-ink); letter-spacing: -.3px; margin: 0 0 4px; } .rd-auth-sub { font-family: 'Onest', sans-serif; font-size: 14px; color: var(--rd-muted-2); margin: 0 0 20px; } .rd-auth-foot { text-align: center; font-family: 'Onest', sans-serif; font-size: 14px; color: var(--rd-muted); margin-top: 18px; } .rd-auth-foot a { color: var(--rd-teal-deep); font-weight: 700; text-decoration: none; } /* ============================================================ БОНУСЫ ============================================================ */ .rd-bonus-wrap { max-width: 460px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; } /* flip-карта */ .rd-flip-wrap { perspective: 1400px; } .rd-flip { position: relative; width: 100%; min-height: 218px; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2,.7,.2,1); cursor: pointer; } .rd-flip.flipped { transform: rotateY(180deg); } /* После анимации переворота «расплющиваем» карту (убираем 3D) — иначе внутри повёрнутого на 180° элемента ломается тач-скролл списка истории. Визуально не меняется (оборот и так был виден ровно), зато список нормально листается. */ .rd-flip.flat { transform: none; transition: none; transform-style: flat; perspective: none; } .rd-flip.flat .rd-flip-front { display: none; } .rd-flip.flat .rd-flip-back { transform: none; backface-visibility: visible; -webkit-backface-visibility: visible; } /* Разовое «подмигивание» при загрузке — намёк, что у карты есть оборот */ @keyframes rdFlipPeek { 0% { transform: rotateY(0); } 40% { transform: rotateY(-34deg); } 62% { transform: rotateY(10deg); } 80% { transform: rotateY(-4deg); } 100% { transform: rotateY(0); } } .rd-flip.rd-flip--peek:not(.flipped) { animation: rdFlipPeek 1.4s cubic-bezier(.2,.7,.2,1) .45s 1; } @media (prefers-reduced-motion: reduce) { .rd-flip.rd-flip--peek { animation: none; } } /* Переворачивающаяся карта печатей (лицо — печати, оборот — как это работает) */ .rd-stampflip-wrap { perspective: 1400px; } .rd-stampflip { position: relative; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2,.7,.2,1); cursor: pointer; } .rd-stampflip.flipped { transform: rotateY(180deg); } .rd-stampflip-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; } .rd-stampflip-front { position: relative; } .rd-stampflip-back { position: absolute; inset: 0; transform: rotateY(180deg); display: flex; flex-direction: column; } /* «Подмигивание» при первом показе — тем же кадром, что у карты лояльности */ .rd-stampflip.rd-flip--peek:not(.flipped) { animation: rdFlipPeek 1.4s cubic-bezier(.2,.7,.2,1) .9s 1; } @media (prefers-reduced-motion: reduce) { .rd-stampflip.rd-flip--peek { animation: none; } } .rd-stamp-rules { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .rd-stamp-rules li { font-family: 'Onest', sans-serif; font-size: 13.5px; color: var(--rd-ink); line-height: 1.4; } .rd-stampflip-back .rd-stamp-foot { margin-top: 12px; } .rd-flip-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 24px; padding: 24px; box-shadow: 0 14px 36px rgba(10,110,110,.22); overflow: hidden; } .rd-flip-front { background: var(--rd-hero-grad); color: #fff; } .rd-flip-front::after { content:""; position:absolute; right:-50px; top:-50px; width:180px; height:180px; border-radius:50%; background:rgba(255,255,255,.08); } .rd-flip-back { transform: rotateY(180deg); background: var(--rd-flip-back); color: var(--rd-flip-fg); display: flex; flex-direction: column; } /* Значок «перевернуть» на светлом обороте — тёмный, а не белый */ .rd-flip-back .rd-flip-badge { background: color-mix(in srgb, var(--rd-flip-fg) 13%, transparent); color: var(--rd-flip-fg); } .rd-loy-brand { font-family: 'Onest', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.8); margin: 0; position: relative; z-index: 1; } .rd-loy-balance { font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 46px; line-height: 1; margin: 14px 0 2px; position: relative; z-index: 1; } .rd-loy-unit { font-family: 'Onest', sans-serif; font-size: 14px; color: rgba(255,255,255,.85); margin: 0; position: relative; z-index: 1; } .rd-loy-stats { display: flex; gap: 14px; margin-top: 20px; position: relative; z-index: 1; } .rd-loy-stats > div { flex: 1; } .rd-loy-stat-lbl { font-family: 'Onest', sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: rgba(255,255,255,.7); margin: 0 0 3px; } .rd-loy-stat-val { font-family: 'Onest', sans-serif; font-weight: 700; font-size: 15px; margin: 0; line-height: 1.2; } .rd-loy-back-title { font-family: 'Onest', sans-serif; font-weight: 700; font-size: 14px; margin: 0 0 12px; color: var(--rd-flip-fg); opacity: .82; } .rd-loy-back-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; cursor: default; } .rd-loy-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--rd-flip-line); font-family: 'Onest', sans-serif; font-size: 14px; } .rd-loy-row .lb-desc { color: var(--rd-flip-fg); opacity: .85; } .rd-loy-row .lb-amount { font-weight: 700; } .rd-loy-row .lb-amount.plus { color: var(--rd-success); } .rd-loy-row .lb-amount.minus { color: var(--rd-accent); } .rd-flip-hint { text-align: center; font-family: 'Onest', sans-serif; font-size: 12.5px; color: var(--rd-muted-2); margin: 12px 0 0; } /* Значок «карту можно перевернуть» в углу */ .rd-flip-badge { position: absolute; top: 14px; right: 14px; z-index: 3; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.18); color: #fff; pointer-events: none; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: rdBadgePulse 2.6s ease-in-out infinite; } .rd-flip-badge svg { width: 16px; height: 16px; } @keyframes rdBadgePulse { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-18deg); } } @media (prefers-reduced-motion: reduce) { .rd-flip-badge { animation: none; } } /* На светлой карте печатей — бирюзовый значок вместо белого */ .rd-stampflip .rd-flip-badge { background: var(--rd-teal-tint); color: var(--rd-teal-deep); } /* Отогнутый уголок снизу-справа — намёк, что карта «как страница», её можно перевернуть */ .rd-corner-peel { position: absolute; right: 0; bottom: 0; z-index: 1; pointer-events: none; width: 26px; height: 26px; clip-path: polygon(100% 0, 100% 100%, 0 100%); background: var(--peel-under, #fff); border-bottom-right-radius: 20px; filter: drop-shadow(-2px -2px 3px rgba(0,0,0,.28)); } /* Золотой отогнутый уголок на обеих картах */ .rd-corner-peel { --peel-under: #E8B84B; background: linear-gradient(135deg, #F6D67A, #D69B27); } /* Чтобы значок не налезал на счётчик печатей «0/5» */ .rd-stampflip-front .rd-stamp-head { padding-right: 34px; } /* печати */ .rd-stamp { background: var(--rd-surface); border: 1px solid var(--rd-border); border-radius: 22px; padding: 20px; box-shadow: var(--rd-card-sh); } .rd-stamp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 16px; } .rd-stamp-title { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 16px; color: var(--rd-ink); margin: 0; } .rd-stamp-sub { font-family: 'Onest', sans-serif; font-size: 13px; color: var(--rd-muted-2); margin: 4px 0 0; } .rd-stamp-progress { font-family: 'Onest', sans-serif; font-weight: 700; font-size: 14px; color: var(--rd-teal-deep); background: var(--rd-teal-tint); border-radius: 999px; padding: 4px 12px; white-space: nowrap; } .rd-stamp-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; } .rd-stamp-slot { aspect-ratio: 1; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 24px; } .rd-stamp-slot.empty { background: var(--rd-cream); border: 1.5px dashed var(--rd-border-2); } .rd-stamp-slot.filled { background: var(--rd-teal-tint); border: 1.5px solid var(--rd-teal); } .rd-stamp-bar { height: 8px; background: var(--rd-track); border-radius: 999px; overflow: hidden; margin: 16px 0 12px; } .rd-stamp-bar-fill { height: 100%; background: var(--rd-teal); border-radius: 999px; transition: width .3s; } .rd-stamp-foot { font-family: 'Onest', sans-serif; font-size: 13px; color: var(--rd-muted-2); display: flex; align-items: center; gap: 6px; } .rd-stamp.completed { border-color: var(--rd-teal); } /* купоны */ .rd-coupon-section { display: flex; flex-direction: column; gap: 14px; } .rd-coupon { background: var(--rd-surface); border: 1px solid var(--rd-border); border-radius: 22px; padding: 20px; box-shadow: var(--rd-card-sh); } .rd-coupon-eyebrow { font-family: 'Onest', sans-serif; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--rd-accent); margin: 0; display: flex; align-items: center; gap: 5px; } .rd-coupon-title { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 19px; color: var(--rd-ink); margin: 6px 0 2px; } .rd-coupon-sub { font-family: 'Onest', sans-serif; font-size: 13px; color: var(--rd-muted-2); margin: 0 0 14px; } .rd-coupon-body { display: flex; align-items: center; gap: 16px; } .rd-coupon-qr img { width: 96px; height: 96px; border-radius: 12px; display: block; } .rd-coupon-meta { font-family: 'Onest', sans-serif; font-size: 14px; color: var(--rd-ink); } .rd-coupon-meta-exp { font-size: 12.5px; color: var(--rd-muted-2); margin-top: 4px; } /* QR */ .rd-qr { background: var(--rd-surface); border: 1px solid var(--rd-border); border-radius: 22px; padding: 24px; box-shadow: var(--rd-card-sh); text-align: center; } .rd-qr-lead { font-family: 'Onest', sans-serif; font-size: 13px; color: var(--rd-muted-2); margin: 0 0 14px; } .rd-qr-pid { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 20px; letter-spacing: 3px; color: var(--rd-ink); margin: 0 0 14px; } .rd-qr-frame { width: 212px; height: 212px; margin: 0 auto; background: var(--rd-surface); border: 1px solid var(--rd-border); border-radius: 16px; padding: 6px; } .rd-qr-frame img { width: 100%; height: 100%; border-radius: 10px; display: block; } .rd-qr-timer { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 22px; color: var(--rd-teal-deep); margin: 14px 0 4px; } .rd-qr-timer.expired { color: var(--rd-accent); } .rd-qr-hint { font-family: 'Onest', sans-serif; font-size: 12.5px; color: var(--rd-muted-2); margin: 0 0 14px; line-height: 1.5; } .rd-qr-ok { width: 64px; height: 64px; margin: 4px auto 14px; border-radius: 50%; background: var(--rd-success); color: #fff; display: flex; align-items: center; justify-content: center; } /* ── Сворачивание списков в профиле (свёрнуто, но не до конца) ── */ .rd-pcollapse { position: relative; overflow: hidden; transition: max-height .32s ease; } .rd-pcollapse.is-collapsed::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--rd-surface)); pointer-events: none; } .rd-pcard-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 9px 16px; font-family: 'Onest', sans-serif; font-weight: 700; font-size: 13.5px; color: var(--rd-teal-deep); background: var(--rd-teal-tint); border: 0; border-radius: 999px; cursor: pointer; transition: filter .15s, transform .1s; } .rd-pcard-more:hover { filter: brightness(.97); } .rd-pcard-more:active { transform: scale(.96); } /* ── Пагинация списков в профиле ── */ .rd-ppager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; } .rd-ppager-btn { width: 36px; height: 36px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; border: 1px solid var(--rd-border); background: var(--rd-surface); color: var(--rd-ink); cursor: pointer; transition: background .15s, opacity .15s, transform .1s; } .rd-ppager-btn:hover:not(:disabled) { background: var(--rd-surface-raised); } .rd-ppager-btn:active:not(:disabled) { transform: scale(.94); } .rd-ppager-btn:disabled { opacity: .38; cursor: default; } .rd-ppager-info { font-family: 'Onest', sans-serif; font-weight: 700; font-size: 14px; color: var(--rd-muted); min-width: 56px; text-align: center; font-variant-numeric: tabular-nums; } /* ── Страница медалей-ачивок ── */ .rd-ach-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; } .rd-ach-back { width: 40px; height: 40px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 13px; background: var(--rd-surface); border: 1px solid var(--rd-border); color: var(--rd-ink); transition: background .15s; } .rd-ach-back:hover { background: var(--rd-surface-raised); } .rd-ach-count { margin-left: auto; flex: 0 0 auto; font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 15px; color: var(--rd-teal-deep); background: var(--rd-teal-tint); border-radius: 999px; padding: 6px 14px; } .rd-ach-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .rd-ach { background: var(--rd-surface); border: 1px solid var(--rd-border); border-radius: 20px; padding: 18px 16px; text-align: center; box-shadow: var(--rd-card-sh); } .rd-ach-medal { position: relative; width: 72px; height: 72px; margin: 0 auto 12px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; /* серое состояние по умолчанию */ background: var(--rd-surface-raised); color: var(--rd-faint); filter: grayscale(1); } .rd-ach.is-on .rd-ach-medal { background: color-mix(in srgb, var(--ach) 16%, transparent); color: var(--ach); filter: none; box-shadow: 0 6px 18px color-mix(in srgb, var(--ach) 28%, transparent); } .rd-ach-check { position: absolute; right: -2px; bottom: -2px; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--ach); color: #fff; border: 3px solid var(--rd-surface); } .rd-ach-title { font-family: 'Onest', sans-serif; font-weight: 700; font-size: 14.5px; color: var(--rd-ink); line-height: 1.25; } .rd-ach:not(.is-on) .rd-ach-title { color: var(--rd-muted); } .rd-ach-desc { font-family: 'Onest', sans-serif; font-size: 12px; color: var(--rd-muted-2); margin-top: 4px; line-height: 1.3; } .rd-ach-got { margin-top: 12px; font-family: 'Onest', sans-serif; font-weight: 700; font-size: 12px; color: var(--rd-teal-deep); } .rd-ach-bar { margin-top: 12px; height: 7px; border-radius: 20px; background: var(--rd-surface-raised); overflow: hidden; } .rd-ach-bar-fill { height: 100%; border-radius: 20px; background: var(--rd-muted); transition: width .4s ease; } .rd-ach-prog { margin-top: 6px; font-family: 'Onest', sans-serif; font-weight: 600; font-size: 12px; color: var(--rd-faint); font-variant-numeric: tabular-nums; } /* ── Плашка (бейдж) позиции: «ХИТ» и т.п. ── */ .rd-card-img { position: relative; } .rd-card-badge { position: absolute; top: 10px; left: 10px; z-index: 2; font-family: 'Onest', sans-serif; font-weight: 800; font-size: 11px; letter-spacing: .4px; text-transform: uppercase; line-height: 1; color: #fff; background: var(--rd-badge, #E5484D); padding: 5px 9px; border-radius: 8px; /* Пульсирующее свечение цветом самой плашки — чтобы не терялась на фото */ box-shadow: 0 2px 8px rgba(0, 0, 0, .3), 0 0 14px color-mix(in srgb, var(--rd-badge, #E5484D) 70%, transparent); animation: rd-badge-glow 1.6s ease-in-out infinite; } /* атрибут hidden должен реально прятать плашку (иначе в модалке вылезает пустая) */ .rd-card-badge[hidden] { display: none; } @keyframes rd-badge-glow { 0%, 100% { box-shadow: 0 2px 8px rgba(0, 0, 0, .3), 0 0 10px color-mix(in srgb, var(--rd-badge, #E5484D) 60%, transparent); } 50% { box-shadow: 0 2px 8px rgba(0, 0, 0, .3), 0 0 22px color-mix(in srgb, var(--rd-badge, #E5484D) 100%, transparent), 0 0 40px color-mix(in srgb, var(--rd-badge, #E5484D) 65%, transparent); } } @media (prefers-reduced-motion: reduce) { .rd-card-badge { animation: none; box-shadow: 0 2px 8px rgba(0, 0, 0, .3), 0 0 18px color-mix(in srgb, var(--rd-badge, #E5484D) 80%, transparent); } } .rd-modal-badge { /* лежит на фото в модалке (top/left/position — от .rd-card-badge) */ top: 12px; left: 12px; font-size: 12px; padding: 5px 11px; } /* ── Размеры/веса позиции (варианты) ── */ .rd-sizes { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; } .rd-size { font-family: 'Onest', sans-serif; font-weight: 600; font-size: 12.5px; padding: 5px 11px; border-radius: 999px; cursor: pointer; white-space: nowrap; background: var(--rd-surface); color: var(--rd-muted); border: 1px solid var(--rd-border); transition: all .15s; } .rd-size:hover { color: var(--rd-ink); } .rd-size.is-on { background: var(--rd-teal); color: #fff; border-color: var(--rd-teal); } .rd-modal-sizes { margin: 12px 0 4px; } .rd-modal-sizes .rd-size { font-size: 13.5px; padding: 7px 14px; } /* размеры в строке корзины */ .rd-cart-sizes { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 2px; } .rd-cart-sizes .rd-size { font-size: 11.5px; padding: 4px 9px; } /* вес рядом с ценой на карточке/в модалке */ .rd-card-weight { font-size: 12.5px; font-weight: 600; color: var(--rd-muted); } /* Убираем синюю/серую тап-подсветку на мобильных на ВСех элементах редизайна (кликабельны не только a/button, но и div-строки — заказы, покупки и т.п.). Обратная связь на тап даётся через :active/hover, а не дефолтную вспышку. */ body.rd, body.rd * { -webkit-tap-highlight-color: transparent; } /* Метка «только самовывоз» + заблокированная доставка в чекауте */ .rd-pickup-tag { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-family: 'Onest', sans-serif; font-weight: 700; font-size: 11.5px; color: var(--rd-accent); background: var(--rd-accent-tint, rgba(251,73,94,.1)); padding: 3px 9px; border-radius: 999px; } .rd-portion-seg button.is-disabled, .rd-portion-seg button:disabled { opacity: .4; cursor: not-allowed; } /* ── Пагинация меню ── */ .rd-menu-pager { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 26px 0 4px; flex-wrap: wrap; } .rd-pg { min-width: 38px; height: 38px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; font-family: 'Onest', sans-serif; font-weight: 700; font-size: 14px; border-radius: 11px; border: 1px solid var(--rd-border); background: var(--rd-surface); color: var(--rd-ink); cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .rd-pg:hover:not(:disabled):not(.is-on) { border-color: var(--rd-teal); color: var(--rd-teal-deep); } .rd-pg.is-on { background: var(--rd-teal); color: #fff; border-color: var(--rd-teal); } .rd-pg:disabled { opacity: .4; cursor: default; } .rd-pg-gap { color: var(--rd-muted); padding: 0 2px; } /* ── Инфо-подсказка ингредиента в конструкторе ── */ .rd-ing-name-row { display: flex; align-items: center; gap: 6px; } .rd-ing-info { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: var(--rd-teal-tint); color: var(--rd-teal); cursor: pointer; opacity: 1; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--rd-teal) 22%, transparent); transition: transform .1s, box-shadow .15s, background .15s; } .rd-ing-info svg { width: 14px; height: 14px; } .rd-ing-info:hover { transform: scale(1.1); background: color-mix(in srgb, var(--rd-teal) 22%, transparent); } .rd-ing-info:active { transform: scale(.94); } /* На телефоне значок крупнее и с большей зоной нажатия — чтобы точно заметили. */ @media (max-width: 640px) { .rd-ing-info { width: 25px; height: 25px; } .rd-ing-info svg { width: 16px; height: 16px; } } /* Постоянная мягкая «пульсация» — привлекает внимание к описанию ингредиента. */ .rd-ing-info { animation: rdInfoPulse 2.2s ease-out infinite; } @keyframes rdInfoPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--rd-teal) 45%, transparent); } 70% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--rd-teal) 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--rd-teal) 0%, transparent); } } @media (prefers-reduced-motion: reduce) { .rd-ing-info { animation: none; } } /* ── Подвал ── */ .rd-footer { margin-top: 44px; border-top: 1px solid var(--rd-border); background: var(--rd-surface); } .rd-footer-inner { max-width: 1200px; margin: 0 auto; padding: 28px 32px 32px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; } .rd-footer-brand { display: inline-flex; align-items: center; text-decoration: none; font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 20px; letter-spacing: -.5px; color: var(--rd-ink); } .rd-footer-brand span { color: var(--rd-teal); } .rd-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; } .rd-footer-links a { font-family: 'Onest', sans-serif; font-weight: 600; font-size: 14px; color: var(--rd-muted); text-decoration: none; } .rd-footer-links a:hover { color: var(--rd-teal); } .rd-footer-contacts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; } .rd-footer-contact { display: inline-flex; align-items: center; gap: 6px; font-family: 'Onest', sans-serif; font-weight: 600; font-size: 13px; color: var(--rd-muted); text-decoration: none; } .rd-footer-contact svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--rd-teal); } a.rd-footer-contact:hover { color: var(--rd-teal); } .rd-footer-legal { font-family: 'Onest', sans-serif; font-size: 12px; line-height: 1.55; color: var(--rd-faint-2); } .rd-footer-name { font-weight: 600; color: var(--rd-muted); margin-bottom: 1px; } .rd-footer-req { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; } .rd-footer-addr { margin-top: 2px; } .rd-footer-copy { font-family: 'Onest', sans-serif; font-size: 12px; color: var(--rd-faint-2); } @media (max-width: 759px) { .rd-footer-inner { padding: 24px 20px calc(96px + env(safe-area-inset-bottom)); } }