/* Tavana — стили мини-аппа каталога. Светлые фоны «дым/пар», 5 вариантов: тема задаётся атрибутом data-theme на (см. THEMES в app.js). Цвета темы Telegram здесь не используются: на светлом дыме текст должен оставаться тёмным и в тёмной теме Telegram. */ :root { --text: #1d1a26; --hint: #6a6580; --line: rgba(29, 22, 52, .09); --card: rgba(255, 255, 255, .78); --card-strong: rgba(255, 255, 255, .93); --glass-edge: rgba(255, 255, 255, .8); --sheet: #fbfaff; --danger: #c81e1e; --radius: 16px; --safe-b: env(safe-area-inset-bottom, 0px); /* по теме: цвет под картинкой (им же красится шапка Telegram), акцент и мягкая подложка акцента. Белый текст на каждом акценте — не ниже 5:1. */ --base: #ede4fb; --accent: #7c3aed; --accent-soft: rgba(124, 58, 237, .12); } html[data-theme="fog"] { --base: #e8ebf0; --accent: #3f3f46; --accent-soft: rgba(63, 63, 70, .10); } html[data-theme="lavender"] { --base: #ede4fb; --accent: #7c3aed; --accent-soft: rgba(124, 58, 237, .12); } html[data-theme="mint"] { --base: #dcf2ec; --accent: #0f766e; --accent-soft: rgba(15, 118, 110, .12); } html[data-theme="peach"] { --base: #fbe6dc; --accent: #c2410c; --accent-soft: rgba(194, 65, 12, .11); } html[data-theme="sky"] { --base: #e0ebfb; --accent: #1d4ed8; --accent-soft: rgba(29, 78, 216, .11); } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } /* Обязательно выше остальных правил: у .age-gate и .sheet-backdrop задан свой display, и без !important он перебивает браузерное [hidden]. */ [hidden] { display: none !important; } body { margin: 0; background: var(--base); color: var(--text); font: 15px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; padding-bottom: calc(24px + var(--safe-b)); overscroll-behavior-y: contain; } /* вне Telegram нижняя кнопка своя и занимает место */ body.no-tg { padding-bottom: calc(92px + var(--safe-b)); } h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.02em; } button { font: inherit; cursor: pointer; border: 0; color: inherit; } /* ------------------------------------------------------------------ фон */ /* Картинка лежит на отдельном слое с запасом по краям и медленно дрейфует через transform — без перерисовки страницы. Кто включил «уменьшить движение», дрейфа не видит. */ .bg-layer { position: fixed; top: -8%; right: -8%; bottom: -8%; left: -8%; z-index: -1; background: var(--base) center / cover no-repeat; animation: drift 70s ease-in-out infinite alternate; will-change: transform; } html[data-theme="fog"] .bg-layer { background-image: url(/bg/fog.jpg); } html[data-theme="lavender"] .bg-layer { background-image: url(/bg/lavender.jpg); } html[data-theme="mint"] .bg-layer { background-image: url(/bg/mint.jpg); } html[data-theme="peach"] .bg-layer { background-image: url(/bg/peach.jpg); } html[data-theme="sky"] .bg-layer { background-image: url(/bg/sky.jpg); } @keyframes drift { from { transform: translate3d(-3%, 2%, 0) scale(1.02); } to { transform: translate3d(3%, -2%, 0) scale(1.08); } } @media (prefers-reduced-motion: reduce) { .bg-layer { animation: none; } } .view { padding: 0 14px; animation: fade .2s ease; } @keyframes fade { from { opacity: 0; transform: translateY(6px); } } /* ---------------------------------------------------------------- шапка */ .hero { position: relative; padding: 22px 4px 14px; } .hero.has-theme-btn h1, .hero.has-theme-btn .tagline { padding-right: 96px; } .hero h1 { font-size: 26px; color: var(--accent); } .tagline { margin: 4px 0 0; color: var(--hint); font-size: 13px; } .tagline:empty { display: none; } .theme-btn { position: absolute; top: 20px; right: 4px; z-index: 2; padding: 8px 13px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--card-strong); border: 1px solid var(--glass-edge); box-shadow: 0 4px 16px rgba(40, 30, 80, .12); transition: transform .12s ease; } .theme-btn:active { transform: scale(.95); } .chips-info { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; } .chip-info { background: var(--card); border: 1px solid var(--glass-edge); border-radius: 999px; padding: 6px 11px; font-size: 12px; color: var(--text); } /* ------------------------------------------------------------ категории */ /* Одна «стеклянная» полоса во всю ширину — размывает дым под собой при прокрутке. */ .cats { display: flex; gap: 8px; overflow-x: auto; margin: 0 -14px; padding: 10px 14px 12px; position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .38); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); scrollbar-width: none; } .cats::-webkit-scrollbar { display: none; } .cat { flex: 0 0 auto; padding: 9px 15px; border-radius: 999px; background: var(--card); border: 1px solid var(--glass-edge); font-size: 13px; font-weight: 500; white-space: nowrap; transition: transform .12s ease; } .cat:active { transform: scale(.95); } .cat.active { background: var(--accent); border-color: transparent; color: #fff; } /* --------------------------------------------------------------- товары */ .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 12px; } .card { background: var(--card); border: 1px solid var(--glass-edge); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 6px 20px rgba(40, 30, 80, .06); transition: transform .12s ease; cursor: pointer; } .card:active { transform: scale(.97); } .card.out { opacity: .6; } /* .thumb/.sheet-thumb: фото лежит поверх абсолютно, высоту задаёт сам контейнер. Не aspect-ratio + img height:100%: в Telegram на iPhone (WebKit) такие проценты не срабатывали — фото вылезало из квадрата и закрывало название товара. */ .thumb { position: relative; overflow: hidden; background: rgba(255, 255, 255, .55); } /* распорка: padding-top в процентах считается от ширины — ровно квадрат в любом браузере */ .thumb::before { content: ""; display: block; padding-top: 100%; } /* Фото целиком (contain), а не обрезком: у части фото пропорции 2:3, cover срезал бы треть. */ .thumb img, .sheet-thumb img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: contain; display: block; } /* заглушка, если фото нет: инициалы на мягкой подложке цвета темы */ .ph { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent-soft), rgba(255, 255, 255, .6)); font-size: 34px; font-weight: 700; color: var(--accent); } .badge { position: absolute; top: 8px; left: 8px; z-index: 1; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; } .badge.out { background: #52525b; } .card-body { padding: 10px 11px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .card-name { font-size: 13.5px; font-weight: 600; line-height: 1.25; } .card-meta { font-size: 11px; color: var(--hint); } .card-bottom { margin-top: auto; } .price { font-size: 15px; font-weight: 700; } .price s { color: var(--hint); font-size: 11px; font-weight: 400; margin-left: 4px; } .empty { grid-column: 1 / -1; text-align: center; color: var(--hint); padding: 44px 16px; background: var(--card); border-radius: var(--radius); } /* ---------------------------------------------- шторки: товар и выбор фона */ .sheet-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 60; background: rgba(20, 16, 34, .35); display: flex; align-items: flex-end; animation: fade .18s ease; } .sheet { width: 100%; max-height: 88vh; overflow-y: auto; background: var(--sheet); border-radius: 22px 22px 0 0; padding: 8px 16px calc(24px + var(--safe-b)); box-shadow: 0 -10px 40px rgba(20, 16, 34, .15); animation: rise .24s cubic-bezier(.2, .8, .3, 1); } body.no-tg .sheet { padding-bottom: calc(92px + var(--safe-b)); } @keyframes rise { from { transform: translateY(100%); } } .sheet-handle { width: 38px; height: 4px; border-radius: 4px; background: rgba(29, 22, 52, .15); margin: 4px auto 14px; } /* В карточке товара фото крупно и целиком; высота задана явно, так что проценты у img надёжны. */ .sheet-thumb { position: relative; overflow: hidden; height: min(60vh, 460px); border-radius: var(--radius); margin-bottom: 14px; background: rgba(29, 22, 52, .04); } .sheet-thumb .ph { font-size: 44px; } .sheet h3 { margin: 0 0 4px; font-size: 19px; } .sheet-price { font-size: 20px; font-weight: 700; margin: 0 0 10px; } .sheet-price s { color: var(--hint); font-size: 13px; font-weight: 400; margin-left: 6px; } .sheet .desc { color: var(--hint); font-size: 13.5px; margin: 0 0 14px; } .stock-note { background: rgba(200, 30, 30, .08); color: var(--danger); border-radius: 12px; padding: 10px 12px; font-size: 13px; margin: 0 0 14px; } .opt-title { font-size: 13px; font-weight: 600; margin: 0 0 2px; } .opt-hint { font-size: 11.5px; color: var(--hint); margin: 0 0 9px; } .opts { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0 6px; } .opt { padding: 8px 13px; border-radius: 11px; font-size: 13px; background: #fff; border: 1px solid var(--line); } .opt.active { border-color: var(--accent); background: var(--accent-soft); } .opt:disabled { opacity: .35; text-decoration: line-through; cursor: default; } /* выбор фона: превью во весь рост, выбранное — рамкой цвета темы и галочкой */ .theme-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 12px 0 8px; } @media (max-width: 340px) { .theme-grid { grid-template-columns: repeat(3, 1fr); } } .theme-opt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; background: none; font-size: 12px; } .theme-opt .sw { position: relative; display: block; width: 100%; border-radius: 12px; overflow: hidden; background: center / cover no-repeat; border: 2px solid rgba(29, 22, 52, .08); } .theme-opt .sw::before { content: ""; display: block; padding-top: 170%; } .theme-opt.active .sw { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .theme-opt.active .sw::after { content: "✓"; position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; line-height: 20px; text-align: center; } .theme-opt.active > span:last-child { font-weight: 700; color: var(--accent); } /* --------------------------------------------------------------- кнопки */ .btn { padding: 13px 18px; border-radius: 13px; font-size: 14px; font-weight: 600; } .btn-primary { background: var(--accent); color: #fff; } .btn-ghost { background: var(--card); border: 1px solid var(--glass-edge); } .btn:active { opacity: .85; } /* нижняя кнопка «Написать менеджеру» вне Telegram (в Telegram — нативная MainButton) */ .action-bar { position: fixed; left: 14px; right: 14px; z-index: 70; bottom: calc(14px + var(--safe-b)); box-shadow: 0 10px 30px rgba(20, 16, 34, .25); } .foot { margin: 26px 0 10px; display: flex; flex-direction: column; gap: 9px; } .note-box { background: var(--card); border: 1px solid var(--glass-edge); border-radius: var(--radius); padding: 11px 14px; font-size: 13px; } .note-box p { margin: 3px 0; } .legal { color: var(--hint); font-size: 11px; text-align: center; margin: 12px 0 0; line-height: 1.5; } /* -------------------------------------------------------- 18+ и тосты */ .age-gate { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 90; display: grid; place-items: center; padding: 22px; background: rgba(255, 255, 255, .45); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } .age-card { text-align: center; max-width: 320px; padding: 26px 22px; background: var(--card-strong); border-radius: 22px; box-shadow: 0 20px 50px rgba(20, 16, 34, .15); } .age-emoji { font-size: 54px; margin-bottom: 10px; } .age-card h2 { font-size: 21px; margin-bottom: 8px; } .age-card p { color: var(--hint); font-size: 13.5px; margin: 0 0 22px; } .age-actions { display: flex; flex-direction: column; gap: 9px; } .toast { position: fixed; left: 50%; bottom: calc(84px + var(--safe-b)); transform: translateX(-50%); background: rgba(29, 26, 38, .92); color: #fff; padding: 11px 18px; border-radius: 999px; font-size: 13px; z-index: 80; animation: fade .18s ease; box-shadow: 0 8px 26px rgba(20, 16, 34, .25); } .skeleton { height: 190px; border-radius: var(--radius); background: var(--card); animation: pulse 1.3s ease-in-out infinite; } @keyframes pulse { 50% { opacity: .5; } }