/* === css/base/reset.css === */ /* ============================================================================ Modern CSS Reset (2026) ============================================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ============================================================================ font-size: 100% — зафиксирован дефолт 16px на root, но уважаем пользовательские настройки браузера (WCAG 1.4.4). Все --fs-* в rem будут корректно масштабироваться вместе с этим значением. -webkit-text-size-adjust: 100% — защита от автоскейлинга мелкого текста на iOS Safari в landscape; гарантирует, что 14px на экране остаются 14px. ============================================================================ */ html { font-size: 100%; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; /* iOS 16+ поддерживает dynamic-type через автоматический resize, если мы используем rem. Ничего дополнительно не требуется. */ } /* ============================================================================ font-synthesis: none — запрещаем CoreText/DirectWrite синтезировать bold/italic из regular weight, если нужный weight ещё не загрузился. Без этого на iOS Safari во время загрузки шрифта можно увидеть "псевдо-bold" глифы. font-optical-sizing: auto — современные переменные шрифты (где есть 'opsz' axis) автоматически подстраивают форму глифа под размер. Google Sans сейчас не variable, но директива игнорируется безопасно, а когда заменим на variable-fonts — начнёт работать автоматически. font-feature-settings — явно включаем kerning, стандартные лигатуры, contextual alternates. Дефолт браузеров на это для UI-текста иногда отключает kerning (optimization), что ломает читаемость. text-rendering: optimizeLegibility — на body оставлено. Делает kerning + лигатуры обязательными. На больших body проседает производительность, но у нас короткие фрагменты. ============================================================================ */ body { min-height: 100vh; background-color: var(--color-bg); color: var(--color-black); font-family: var(--font-primary); font-size: var(--fs-base); font-weight: var(--fw-regular); line-height: var(--leading-relaxed); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis: none; -webkit-font-synthesis: none; font-optical-sizing: auto; font-feature-settings: var(--ff-text); text-rendering: optimizeLegibility; } body:not(.admin-body) { display: flex; flex-direction: column; gap: 4px; } /* ============================================================================ Media reset ============================================================================ */ img, picture, video, canvas, svg { display: block; max-width: 100%; } /* ============================================================================ Form elements — наследуем типографику от родителя font: inherit критично: без него input/button/textarea используют platform default font и ломают единство оформления. На input/textarea позже (в typography.css) переопределим font-size: 16px чтобы iOS не зумил при фокусе. ============================================================================ */ input, button, textarea, select { font: inherit; color: inherit; border: none; background: none; outline: none; } button { cursor: pointer; /* Убираем lh padding в Firefox/Gecko */ line-height: inherit; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } table { border-collapse: collapse; } /* ============================================================================ Headings — наследуют размер/вес у родителя. Конкретная типографика задаётся в typography.css по классам (.h1/.h2/... или .section-title), чтобы избежать лавинообразного переопределения `h1` во вложенных контекстах. ============================================================================ */ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; line-height: inherit; } /* === css/base/variables.css === */ :root { /* ============================================================================ COLORS ============================================================================ */ --color-bg: #F6F6F6; --color-white: #FFFFFF; --color-black: #000000; --color-gray-light: #F5F5F5; --color-gray-border: #E1E1E1; --color-gray-divider: #F0F0F0; --color-primary: #E41616; --color-red-dot: #FF0000; --color-gold: #DBBF23; --color-green: #54DB23; --color-green-toggle: #59E326; --color-icon: #33363F; --color-dark: #242424; --color-link: #0077FF; --color-overlay: rgba(0, 0, 0, 0.32); --color-overlay-dark: rgba(0, 0, 0, 0.64); --color-inactive: rgba(255, 255, 255, 0.64); /* ============================================================================ TYPOGRAPHY — Font Families Google Sans — брендовый шрифт проекта, основной на всех устройствах. Metrics-matched 'Google Sans Fallback' (см. fonts.css) держит layout стабильным пока TTF грузится; системные fallback'и — подстраховка на случай блокировки CDN / офлайна. ============================================================================ */ --font-primary: 'Google Sans', 'Google Sans Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-badge: var(--font-primary); --font-logo: var(--font-primary); /* ============================================================================ TYPOGRAPHY — Font Weights ============================================================================ */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 900; /* ============================================================================ TYPOGRAPHY — Type Scale (rem-based) Все font-size в rem, чтобы работали iOS Dynamic Type, Android Font Scale и пользовательское "Увеличить шрифт" в Safari/Chrome (WCAG 1.4.4). 1rem = html font-size = 16px (задаётся в reset.css). Имена оставлены совместимыми с историческим кодом (--fs-xs..--fs-2xl). ============================================================================ */ --fs-xs: 0.625rem; /* 10px — мелкие вспомогательные подписи */ --fs-sm: 0.75rem; /* 12px — labels, счётчики, ценовые badges */ --fs-base: 0.875rem; /* 14px — secondary body, кнопки-бейджи */ --fs-md: 1rem; /* 16px — primary body, поля ввода, заголовки карточек */ --fs-lg: 1.25rem; /* 20px — крупные цены, CTA */ --fs-xl: 1.5rem; /* 24px — h2 / section titles */ --fs-2xl: 2rem; /* 32px — h1 / hero */ /* ============================================================================ TYPOGRAPHY — Line Height (unitless) Unitless-значения наследуются предсказуемо (потомок с другим font-size получает пропорциональный leading) и дают одинаковую высоту строки на всех движках рендера шрифтов (Blink/Skia, Gecko, WebKit/CoreText). Золотое правило: line-height >= 1.15 для всего, что содержит буквы с descender'ами. Визуальная компактность для кнопок/бейджей достигается через фиксированный `height` + `display: inline-flex; align-items: center`, а не сжатием line-height ниже естественной высоты глифа. ============================================================================ */ --leading-none: 1; /* только для one-liner UI с height + flex-center */ --leading-tight: 1.15; /* крупные заголовки (h1, h2) */ --leading-snug: 1.25; /* h3-h6, крупные бейджи */ --leading-normal: 1.4; /* кнопки, UI-текст, секционные подписи */ --leading-relaxed: 1.5; /* body text, карточки товаров, абзацы */ --leading-loose: 1.75; /* длинные текстовые блоки, документы */ /* ============================================================================ TYPOGRAPHY — Font Features --ff-text — стандартный набор для текста: kerning + лигатуры + contextual alts. --ff-tnum — для цифр: тот же набор + tabular numerals + lining figures. Применяется к ценам, счётчикам количества, таймерам, чекам. Даёт фиксированную ширину цифр, чтобы числа не "прыгали" при смене количества товара. ============================================================================ */ --ff-text: "kern" 1, "liga" 1, "calt" 1; --ff-tnum: "kern" 1, "liga" 1, "calt" 1, "tnum" 1, "lnum" 1; /* ============================================================================ INTERACTIVE — Touch Target Apple HIG / Material / WCAG 2.5.5 рекомендуют минимум 44x44 для touch. Используется в компонентах кнопок, чипов, табов. ============================================================================ */ --touch-min: 44px; /* ============================================================================ SPACING SCALE ============================================================================ */ --sp-2: 2px; --sp-4: 4px; --sp-5: 5px; --sp-6: 6px; --sp-8: 8px; --sp-10: 10px; --sp-12: 12px; --sp-14: 14px; --sp-16: 16px; --sp-24: 24px; --sp-32: 32px; --sp-48: 48px; /* ============================================================================ BORDER RADII ============================================================================ */ --radius-xs: 6px; --radius-sm: 12px; --radius-md: 16px; --radius-lg: 18px; --radius-xl: 24px; --radius-2xl: 28px; --radius-3xl: 32px; --radius-pill: 100px; /* ============================================================================ SHADOWS ============================================================================ */ --shadow-bottom-bar: 0px -4px 24px 0px rgba(0, 0, 0, 0.12); --shadow-card: 0px 4px 16px 0px rgba(0, 0, 0, 0.08); --shadow-toggle: 4px 0px 16px 0px rgba(0, 0, 0, 0.08); /* ============================================================================ STROKES ============================================================================ */ --border-chip: 1px dashed var(--color-gray-border); --border-chip-active: 1px solid #777777; --border-field: 1px solid var(--color-gray-light); --border-divider: 1px dashed var(--color-black); /* ============================================================================ LAYOUT ============================================================================ */ --max-width-mobile: 440px; --max-width-desktop: 1000px; --panel-left-width: 540px; --panel-right-width: 420px; } /* === css/base/typography.css === */ /* ============================================================================ Typography Базовые типографики задаются в reset.css через body. Здесь только utility- классы и тонкие настройки специфичных элементов (input/textarea/select). ============================================================================ */ /* ============================================================================ Font-size utilities (rem-based) ============================================================================ */ .text-xs { font-size: var(--fs-xs); } .text-sm { font-size: var(--fs-sm); } .text-base { font-size: var(--fs-base); } .text-md { font-size: var(--fs-md); } .text-lg { font-size: var(--fs-lg); } .text-xl { font-size: var(--fs-xl); } .text-2xl { font-size: var(--fs-2xl); } /* ============================================================================ Line-height utilities (unitless) Unitless → наследуется как число, что корректно для multi-level elements (потомок с большим font-size получает пропорционально большую высоту строки). ============================================================================ */ .leading-none { line-height: var(--leading-none); } .leading-tight { line-height: var(--leading-tight); } .leading-snug { line-height: var(--leading-snug); } .leading-normal { line-height: var(--leading-normal); } .leading-relaxed { line-height: var(--leading-relaxed); } .leading-loose { line-height: var(--leading-loose); } /* ============================================================================ Font-weight utilities ============================================================================ */ .font-regular { font-weight: var(--fw-regular); } .font-medium { font-weight: var(--fw-medium); } .font-semibold { font-weight: var(--fw-semibold); } .font-bold { font-weight: var(--fw-bold); } .font-black { font-weight: var(--fw-black); } /* ============================================================================ Colors ============================================================================ */ .text-primary { color: var(--color-primary); } .text-muted { color: var(--color-gray-border); } .text-link { color: var(--color-link); } .text-green { color: var(--color-green); } .text-gold { color: var(--color-gold); } .text-white { color: var(--color-white); } /* ============================================================================ Alignment ============================================================================ */ .text-center { text-align: center; } .text-right { text-align: right; } /* ============================================================================ Font-family utilities ============================================================================ */ .font-logo { font-family: var(--font-logo); } .font-badge { font-family: var(--font-badge); } /* ============================================================================ Tabular Numerals `font-variant-numeric: tabular-nums` делает все цифры одинаковой ширины, чтобы цены, счётчики количества и суммы не "прыгали" при изменении значения. `font-feature-settings: var(--ff-tnum)` гарантирует работу в браузерах, которые ещё не реализовали CSS 4 variant-numeric shorthand. Utility-классы: .tabular-nums / .nums — для явной разметки в шаблонах. Широкий селектор: Все элементы с семантическими именами "__price", "__total", "__currency", "__amount", "__sum" и явные value-классы цен/сумм автоматически получают tabular figures. Это покрывает 95% случаев без ручной правки шаблонов. Лишние матчи (например __price-line — обёртка без цифр) безвредны — правило игнорируется на элементах без цифр. ============================================================================ */ .tabular-nums, .nums, [class*='__price'], [class*='__old-price'], [class*='__total'], [class*='__currency'], [class*='__amount'], [class*='__sum'], .cart-bar__value, .co-total__value, .co-bonus__pill-value, .co-summary__row dd, .pf-detail__value, .pf-detail__total-val, .pf-order__total-val, .qty-selector__value, .pp-row__value, .fitem__value { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: var(--ff-tnum); } /* ============================================================================ Section title — единый стандарт для заголовков блоков ============================================================================ */ .section-title { font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: var(--leading-snug); padding: var(--sp-16); } /* ============================================================================ Form controls — iOS zoom prevention Apple Safari на iOS автоматически зумит страницу при фокусе на input, у которого computed font-size < 16px. Это раздражает и ломает viewport. Решение: на ВСЕ интерактивные поля ставим font-size >= 16px явно. Визуально текст может выглядеть крупнее исходного макета — это ПРАВИЛЬНО для мобильной формы (Apple HIG: minimum legible size on touch input). ============================================================================ */ input, textarea, select { font-size: var(--fs-md); /* 16px — ключевой порог */ line-height: var(--leading-normal); } /* placeholder наследует, но в некоторых браузерах его стиль отдельно */ ::placeholder { color: var(--color-gray-border); opacity: 1; } /* === css/base/utilities.css === */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .hidden { display: none !important; } .flex { display: flex; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .gap-2 { gap: var(--sp-2); } .gap-4 { gap: var(--sp-4); } .gap-6 { gap: var(--sp-6); } .gap-8 { gap: var(--sp-8); } .gap-10 { gap: var(--sp-10); } .gap-12 { gap: var(--sp-12); } .gap-16 { gap: var(--sp-16); } .gap-24 { gap: var(--sp-24); } .p-4 { padding: var(--sp-4); } .p-8 { padding: var(--sp-8); } .p-12 { padding: var(--sp-12); } .p-16 { padding: var(--sp-16); } .px-16 { padding-left: var(--sp-16); padding-right: var(--sp-16); } .py-8 { padding-top: var(--sp-8); padding-bottom: var(--sp-8); } .py-16 { padding-top: var(--sp-16); padding-bottom: var(--sp-16); } .m-auto { margin: auto; } .mt-8 { margin-top: var(--sp-8); } .mt-16 { margin-top: var(--sp-16); } .mt-24 { margin-top: var(--sp-24); } .mb-8 { margin-bottom: var(--sp-8); } .mb-16 { margin-bottom: var(--sp-16); } .w-full { width: 100%; } .rounded-sm { border-radius: var(--radius-sm); } .rounded-md { border-radius: var(--radius-md); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-xl { border-radius: var(--radius-xl); } .rounded-pill { border-radius: var(--radius-pill); } .opacity-0 { opacity: 0; } .opacity-50 { opacity: 0.5; } .opacity-100 { opacity: 1; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .bg-white { background-color: var(--color-white); } .bg-light { background-color: var(--color-gray-light); } .bg-dark { background-color: var(--color-dark); } .bg-primary { background-color: var(--color-primary); } .relative { position: relative; } .absolute { position: absolute; } .sticky { position: sticky; } .fixed { position: fixed; } .overflow-hidden { overflow: hidden; } .overflow-auto { overflow: auto; } .transition { transition: all 0.2s ease; } /* === css/layouts/grid.css === */ .main { display: flex; flex-direction: column; gap: var(--sp-4); width: 100%; max-width: var(--max-width-desktop); margin: 0 auto; } .product-grid { display: grid; grid-template-columns: repeat(2, 1fr); /* row 24, column 8 — соответствует components/product-card.css */ gap: var(--sp-24) var(--sp-8); } .addon-grid { display: flex; gap: var(--sp-8); overflow-x: auto; padding: 0 var(--sp-16); scrollbar-width: none; -ms-overflow-style: none; } .addon-grid::-webkit-scrollbar { display: none; } .rose-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-8); padding: 0 var(--sp-16); } .section-padding { padding: 0 var(--sp-16); } @media (min-width: 769px) { .main--single { display: block; } .panel--sticky { position: sticky; top: 108px; align-self: flex-start; } .product-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-24) var(--sp-8); padding: 0; } .rose-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-12); padding: 0; } } @media (min-width: 1281px) { .product-grid { grid-template-columns: repeat(4, 1fr); } } /* === css/layouts/responsive.css === */ @media (max-width: 900px) { .product-grid { grid-template-columns: repeat(2, 1fr); } .rose-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 769px) { .mobile-only { display: none !important; } } @media (max-width: 768px) { .desktop-only { display: none !important; } } /* === css/components/header.css === */ /* ─── Header Wrapper (sticky block — единый белый блок) ─── */ .header-wrap { position: sticky; top: 0; width: 100%; max-width: var(--max-width-desktop); margin: 0 auto; padding-top: env(safe-area-inset-top, 0px); background: var(--color-white); border-radius: 0 0 var(--radius-xl) var(--radius-xl); overflow: hidden; z-index: 100; box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0); transition: box-shadow 0.3s ease; } .header-wrap--scrolled { box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.12); } /* ─── Main Header ─── */ .header { display: flex; align-items: center; justify-content: space-between; height: 56px; } .header__logo { display: flex; align-items: center; flex-shrink: 1; height: 56px; } .header__logo-img { height: 18px; width: auto; display: block; /* Защита от слишком широких логотипов: не даём перекрыть кнопки */ max-width: 60vw; object-fit: contain; } /* Текстовый fallback логотипа: показывается, когда в SEO-настройках ещё не загружена картинка, но название сайта задано. Высоту привязываем к высоте картинки, чтобы шапка не «прыгала» при загрузке/удалении лого. */ .header__logo-text { display: inline-block; font-family: var(--font-logo); font-size: var(--fs-md); font-weight: var(--fw-bold); line-height: 1; letter-spacing: 0.02em; color: var(--color-primary); white-space: nowrap; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; } .header__btn { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; position: relative; color: var(--color-icon); flex-shrink: 0; background: none; border: none; cursor: pointer; } .header__btn img { width: 32px; height: 32px; } .header__badge { position: absolute; top: 6px; right: 6px; min-width: 20px; height: 20px; background: var(--color-primary); border: 2px solid var(--color-white); border-radius: 50%; font-size: var(--fs-sm); font-weight: var(--fw-black); color: var(--color-white); display: flex; align-items: center; justify-content: center; } /* ─── Separator ─── */ .header__separator { height: 1px; background: var(--color-gray-light); margin: 0 var(--sp-12); } /* ─── Tabs ─── */ .header__tabs { display: flex; align-items: center; justify-content: center; gap: var(--sp-24); height: 48px; } .header__tab { display: flex; align-items: center; gap: 8px; opacity: 0.32; text-decoration: none; transition: opacity 0.2s; } .header__tab--active { opacity: 1; } .header__tab-label { font-size: var(--fs-md); font-weight: var(--fw-bold); line-height: 0.875; color: var(--color-black); pointer-events: none; } .header__tab-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--color-black); flex-shrink: 0; } .header__tab--active .header__tab-dot { background: var(--color-red-dot); } /* ─── Inner Header ─── */ .header--inner { position: sticky; top: 0; z-index: 100; width: 100%; max-width: var(--max-width-desktop); margin: 0 auto; background: var(--color-white); border-radius: 0 0 var(--radius-xl) var(--radius-xl); overflow: hidden; padding-top: env(safe-area-inset-top, 0px); box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0); transition: box-shadow 0.3s ease; } .header--inner--scrolled { box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.12); } .header--inner .header__title { flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--sp-8); } .header__title-icon { flex-shrink: 0; display: block; width: 24px; height: 24px; } .header__title-text { margin-bottom: -3px; font-size: var(--fs-md); font-weight: var(--fw-bold); line-height: 0.938; color: var(--color-black); white-space: nowrap; } .header__btn--action { width: 56px; height: 56px; flex-shrink: 0; } .header__btn-icon { display: block; } .header__spacer { width: 44px; } /* ─── Close Header (variety detail) ─── */ .header--close { position: absolute; top: 0; right: 0; left: 0; z-index: 10; background: transparent; pointer-events: none; } .header--close .header__btn--close { pointer-events: all; width: 36px; height: 36px; background: var(--color-white); border-radius: 50%; box-shadow: var(--shadow-card); } /* ─── Desktop ─── */ @media (min-width: 769px) { .header__logo-img { height: 22px; } .header__logo-text { font-size: var(--fs-lg); } } /* === css/components/buttons.css === */ /* ═══ Button system ═══ Sizes: default (h44), --sm (h32), --lg (h60) Shapes: default (radius-md 16px), --pill (radius-pill 100px) Colors: --primary (red), --secondary (gray), --outline (border), --dark (black) Layout: --full (width 100%) «Большая красная кнопка» = .btn .btn--primary .btn--lg Всегда: h60, border-radius 30px. */ /* ─── Base ─── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8); /* height >= --touch-min (44px) — WCAG 2.5.5 / Apple HIG minimum. */ height: var(--touch-min); padding: 0 var(--sp-24); border: none; border-radius: var(--radius-md); font-family: var(--font-primary); font-size: var(--fs-base); font-weight: var(--fw-semibold); /* line-height: 1 + flex-center → глифы выравниваются геометрически одинаково в Blink/Gecko/CoreText, без зависимости от font vertical metrics. */ line-height: var(--leading-none); white-space: nowrap; cursor: pointer; transition: opacity 0.15s ease, transform 0.1s ease; text-decoration: none; box-sizing: border-box; } .btn:active { transform: scale(0.97); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } /* ─── Sizes ─── */ .btn--sm { height: 32px; padding: 0 var(--sp-16); font-size: var(--fs-sm); } .btn--lg { height: 60px; padding: 0 var(--sp-32); border-radius: 30px; font-size: var(--fs-lg); font-weight: var(--fw-bold); /* line-height наследуется от .btn (var(--leading-none) = 1). Высота line-box = font-size * 1 = 20px, box контейнера = 60px, flex-center выравнивает глифы геометрически по центру. */ } /* ─── Colors ─── */ .btn--primary { background: var(--color-primary); color: var(--color-white); } .btn--primary:hover:not(:disabled) { opacity: 0.9; } .btn--secondary { background: var(--color-gray-light); color: var(--color-black); } .btn--outline { background: transparent; border: 1px solid var(--color-black); color: var(--color-black); } .btn--dark { background: var(--color-black); color: var(--color-white); } /* ─── Shapes ─── */ .btn--pill { border-radius: var(--radius-pill); } /* ─── Layout ─── */ .btn--full { width: 100%; } /* === css/components/skeleton.css === */ /* ─── Skeleton loading (shared) ─── */ .skeleton { position: relative; overflow: hidden; background: #f0f0f0; border-radius: var(--radius-sm); } .skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 25%, #e0e0e0 50%, transparent 75%); animation: skeleton-shimmer 1.5s infinite; will-change: transform; } @keyframes skeleton-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .skeleton--img { width: 100%; aspect-ratio: 1 / 1; } .skeleton--title { height: 20px; width: 70%; margin-bottom: var(--sp-8); } .skeleton--text { height: 14px; width: 100%; margin-bottom: var(--sp-6); } .skeleton--text-short { height: 14px; width: 50%; margin-bottom: var(--sp-6); } .skeleton--tag { height: 28px; width: 64px; border-radius: var(--radius-pill); display: inline-block; } .skeleton--tier { height: 16px; width: 100%; margin-bottom: var(--sp-8); } .skeleton--block { height: 120px; width: 100%; border-radius: var(--radius-md); margin-bottom: var(--sp-16); } .skeleton--btn { height: 56px; width: 56px; border-radius: 50%; } /* === css/components/bottom-sheet.css === */ /* ─── Bottom Sheet ─── */ .bsheet { position: fixed; inset: 0; z-index: 1000; pointer-events: none; visibility: hidden; } .bsheet--open { pointer-events: auto; visibility: visible; } /* Overlay */ .bsheet__overlay { position: absolute; inset: 0; background: var(--color-overlay); opacity: 0; } .bsheet--open .bsheet__overlay { opacity: 1; } .bsheet--animating .bsheet__overlay { transition: opacity 0.35s ease; } /* ─── Panel ─── */ .bsheet__panel { position: absolute; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; background: var(--color-white); border-radius: var(--radius-xl) var(--radius-xl) 0 0; transform: translateY(100%); will-change: transform; overflow: hidden; } .bsheet--animating .bsheet__panel { transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1), top 0.35s cubic-bezier(0.32, 0.72, 0, 1), border-radius 0.25s ease; } /* ─── Fit mode ─── */ .bsheet--fit .bsheet__panel { top: auto !important; max-height: 86vh; max-height: 86dvh; } .bsheet--fit .bsheet__body { overflow-y: auto; } /* ─── Header ─── */ .bsheet__header { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0; flex-shrink: 0; background: var(--color-white); z-index: 5; } .bsheet__header-spacer { width: 48px; flex-shrink: 0; } .bsheet__title { flex: 1; margin-bottom: -3px; text-align: center; font-size: var(--fs-md); font-weight: var(--fw-bold); line-height: 0.938; color: var(--color-black); } .bsheet__close { width: 48px; height: 56px; border: none; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; } .bsheet__close img { pointer-events: none; } /* ─── Body ─── */ .bsheet__body { flex: 1; overflow: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; } /* ─── Footer ─── */ .bsheet__footer { flex-shrink: 0; padding: var(--sp-12) var(--sp-16); padding-bottom: calc(var(--sp-12) + env(safe-area-inset-bottom, 0px)); background: var(--color-white); } .bsheet__footer--popup { border-top: none; border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-bottom-bar); } /* Body scroll lock */ body.sheet-open { overflow: hidden; position: fixed; width: 100%; } /* ─── Mobile: expand to full screen ─── */ @media (max-width: 768px) { .bsheet--expanded .bsheet__panel { border-radius: 0; } .bsheet--expanded .bsheet__header { position: sticky; top: 0; } .bsheet--expanded .bsheet__body { overflow-y: auto; } } /* ─── Desktop: auto-fit with scroll ─── */ @media (min-width: 769px) { .bsheet__panel { max-width: 540px; margin: 0 auto; left: 0; right: 0; max-height: 86vh; max-height: 86dvh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; } .bsheet__header { position: sticky; top: 0; } .bsheet__body { overflow-y: auto; } } /* === css/components/toast.css === */ .toast-container { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; gap: var(--sp-8); padding: var(--sp-12); pointer-events: none; } .toast { max-width: 440px; width: 100%; padding: var(--sp-14) var(--sp-16); border-radius: var(--radius-md); font-family: var(--font-primary); font-size: var(--fs-base); font-weight: var(--fw-medium); line-height: 1.4; color: var(--color-white); text-align: center; pointer-events: auto; opacity: 0; transform: translateY(-20px); transition: opacity 0.3s ease, transform 0.3s ease; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.16); } .toast--visible { opacity: 1; transform: translateY(0); } .toast--info { background: var(--color-dark); } .toast--success { background: var(--color-dark); } .toast--error { background: var(--color-primary); } @media (max-width: 480px) { .toast { max-width: none; } }