/* ═══════════════════════════════════════════════════════════════════════════ ВИТРИНА — токены тем Три темы переключаются атрибутом data-theme на (см. app.js ThemeProvider). Всё остальное в файле обращается только к переменным ниже — ни одного захардкоженного акцентного цвета за пределами этого блока, поэтому переключение темы мгновенно перекрашивает весь интерфейс. ═══════════════════════════════════════════════════════════════════════════ */ :root, [data-theme="emerald"] { --base: #0E1A17; --base-2: #0B1512; --panel: #0F1D19; /* сплошная подложка модалок/шторок */ --surface: 20, 40, 34; /* rgb для rgba() стеклянных панелей */ --accent-1: #D9B563; --accent-2: #B4883A; --accent-solid: #C9A24B; --on-accent: #221A08; --ink: #EAF2EE; --ink-dim: #9FB0AA; --line: rgba(201, 162, 75, 0.16); --mesh-1: rgba(201, 162, 75, 0.16); --mesh-2: rgba(46, 139, 122, 0.16); --danger-1: #E0554A; --danger-2: #B5342A; --success-1: #4FCDAF; --success-2: #1F6E5C; } /* Розовое золото — тёплый тёмный фон + персиково-розовый градиент */ [data-theme="rosegold"] { --base: #1C1210; --base-2: #150E0C; --panel: #221715; --surface: 42, 27, 25; --accent-1: #FFC49B; --accent-2: #E8708C; --accent-solid: #F0947E; --on-accent: #2B120F; --ink: #F8ECE7; --ink-dim: #BC948C; --line: rgba(232, 112, 140, 0.18); --mesh-1: rgba(232, 112, 140, 0.18); --mesh-2: rgba(244, 199, 149, 0.16); --danger-1: #FF6B6B; --danger-2: #C8283C; --success-1: #8FD4A0; --success-2: #3E8F5C; } /* Неон — свежий дерзкий тёмный фон + бирюзово-лаймовый градиент */ [data-theme="neon"] { --base: #0A1614; --base-2: #06110F; --panel: #0C1F1A; --surface: 12, 40, 34; --accent-1: #00E6C3; --accent-2: #B6FF3D; --accent-solid: #17D9B4; --on-accent: #04211B; --ink: #EAFBF6; --ink-dim: #8FB8AE; --line: rgba(0, 230, 195, 0.2); --mesh-1: rgba(0, 230, 195, 0.2); --mesh-2: rgba(182, 255, 61, 0.16); --danger-1: #FF6B6B; --danger-2: #D6294A; --success-1: #6BFAA0; --success-2: #17A868; } html, body { background: var(--base); } ::selection { background: color-mix(in srgb, var(--accent-solid) 35%, transparent); color: var(--base); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent-solid) 25%, transparent); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--accent-solid) 40%, transparent); } /* Смена темы — мягкий кроссфейд цветов на ключевых поверхностях, а не мгновенный «щелчок». Только цветовые свойства, без transform — переключение темы не должно двигать layout. */ body, .glass, .glass-strong, .product-card, .modal-sheet, .cat-pill, .search-input, .btn-ghost, .settings-section, .lang-option, .theme-option, .cart-row, .qty-stepper, .btn-cart-add, .toggle-track, .price-tag, .discount-badge, .cart-in-badge, .btn-accent, .fab-add { transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease; } /* ─── Уважение к prefers-reduced-motion: убираем движение, не эффекты ────── */ @media (prefers-reduced-motion: reduce) { .vitrina-bg::before, .vitrina-bg::after { animation: none !important; } .card-enter, .sheet-enter, .dropdown-pop, .stage-fade, .toast-enter, .toast-leave { animation: none !important; opacity: 1 !important; transform: none !important; } .product-card, .btn-accent, .fab-add, .cat-scroll-btn { transition-property: background-color, border-color, color, box-shadow !important; } .product-card:hover, .btn-accent:hover, .fab-add:hover { transform: none !important; } * { scroll-behavior: auto !important; } } /* ─── Фон: два больших мягких пятна света, зеркально разнесённые по ───────── диагонали (тёплое сверху-слева, холоднее снизу-справа), медленно «дышат» через transform — никакого paint-дорогого background-position. ── */ .vitrina-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: linear-gradient(180deg, var(--base) 0%, var(--base-2) 100%); } .vitrina-bg::before, .vitrina-bg::after { content: ''; position: absolute; width: 130%; height: 130%; border-radius: 50%; filter: blur(70px); will-change: transform; animation: meshDrift 26s ease-in-out infinite alternate; } .vitrina-bg::before { top: -55%; left: -25%; background: radial-gradient(closest-side, var(--mesh-1), transparent 70%); } .vitrina-bg::after { bottom: -55%; right: -25%; background: radial-gradient(closest-side, var(--mesh-2), transparent 70%); animation-delay: -13s; } @keyframes meshDrift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(2.5%, -2%, 0) scale(1.05); } 100% { transform: translate3d(-2%, 2.5%, 0) scale(1); } } /* ─── Стеклянные панели ───────────────────────────────────────────────────── */ .glass { background: rgba(var(--surface), 0.55); border: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .glass-strong { background: rgba(var(--surface), 0.78); border: 1px solid var(--line); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } /* ─── Карточка товара ─────────────────────────────────────────────────────── */ .product-card { position: relative; border-radius: 20px; overflow: visible; background: rgba(var(--surface), 0.55); border: 1px solid var(--line); transition: transform 0.28s cubic-bezier(0.22,1,0.36,1), border-color 0.28s ease, box-shadow 0.28s ease, background-color 0.4s ease; } @media (hover: hover) and (pointer: fine) { .product-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent-solid) 40%, transparent); box-shadow: 0 18px 40px -18px rgba(0,0,0,0.55); } .product-card:hover .product-photo-wrap img { transform: scale(1.06); } } .product-card .cat-accent { position: absolute; top: 0; left: 20px; right: 20px; height: 3px; border-radius: 0 0 3px 3px; background: var(--cat-color, var(--accent-solid)); opacity: 0.85; } .product-photo-wrap { position: relative; border-radius: 16px 16px 0 0; overflow: hidden; aspect-ratio: 1 / 1; background: rgba(255,255,255,0.03); } .product-photo-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.22,1,0.36,1); } .product-photo-empty { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: rgba(159,176,170,0.35); } /* ─── Точки-переключатели фото (если у товара их несколько) ─────────────── */ .photo-dots { position: absolute; bottom: 9px; left: 0; right: 0; display: flex; justify-content: center; gap: 5px; z-index: 4; } .photo-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.4); box-shadow: 0 1px 3px rgba(0,0,0,0.4); cursor: pointer; /* Раздутие в «таблетку» через transform: scaleX, а не через width — тот же визуальный эффект, но без layout-реflow на каждый кадр. */ transition: transform 0.2s cubic-bezier(0.22,1,0.36,1), background-color 0.2s ease, border-radius 0.2s ease; transform-origin: center; } .photo-dot[data-active="true"] { background: #fff; transform: scaleX(2.6); border-radius: 3px; } /* ─── Значок скидки — верхний левый угол фото ────────────────────────────── */ .discount-badge { position: absolute; top: 10px; left: 10px; z-index: 6; padding: 3px 8px; border-radius: 999px; background: linear-gradient(135deg, var(--danger-1), var(--danger-2)); color: #fff; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 11px; letter-spacing: -0.01em; box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--danger-2) 65%, transparent); } /* ─── Фирменный элемент: ценник, приколотый к углу карточки ──────────────── */ .price-tag { position: absolute; top: -12px; right: -10px; z-index: 5; transform: rotate(-7deg); display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 0; padding: 6px 12px 6px 16px; background: linear-gradient(135deg, var(--accent-1), var(--accent-2)); color: var(--on-accent); border-radius: 3px 10px 10px 3px; box-shadow: 0 8px 16px -6px rgba(0,0,0,0.55); clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%); } .price-tag.has-discount { padding-top: 5px; padding-bottom: 5px; } .price-tag::before { content: ''; position: absolute; left: 6px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: var(--base); } .price-tag .old-amount { font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 10px; line-height: 1.2; text-decoration: line-through; opacity: 0.6; white-space: nowrap; } .price-tag .amount { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 13px; line-height: 1.2; letter-spacing: -0.01em; white-space: nowrap; } /* ─── Категория: горизонтальный ряд «полок» ──────────────────────────────── */ .cat-pill { position: relative; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-dim); font-size: 13.5px; font-weight: 600; white-space: nowrap; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s cubic-bezier(0.22,1,0.36,1); background: rgba(var(--surface), 0.4); } .cat-pill:active { transform: scale(0.96); } .cat-pill[data-active="true"] { color: var(--on-accent); background: var(--cat-color, var(--accent-solid)); border-color: transparent; } .cat-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 5px; border-radius: 999px; font-size: 10.5px; font-weight: 700; font-family: 'JetBrains Mono', monospace; background: rgba(255,255,255,0.1); color: var(--ink-dim); vertical-align: middle; } .cat-pill[data-active="true"] .cat-count { background: color-mix(in srgb, var(--on-accent) 22%, transparent); color: var(--on-accent); } /* ─── Поиск ──────────────────────────────────────────────────────────────── */ .search-input { background: rgba(var(--surface), 0.5); border: 1px solid var(--line); color: var(--ink); transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.4s ease; } .search-input::placeholder { color: var(--ink-dim); opacity: 0.65; } .search-input:focus { outline: none; border-color: color-mix(in srgb, var(--accent-solid) 55%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-solid) 14%, transparent); } /* ─── Кнопки ─────────────────────────────────────────────────────────────── */ /* Акцентная кнопка: градиент темы + глянцевая «зеркальная» подсветка сверху и лёгкий блик, который скользит по кнопке при наведении — фирменный «жидко-стеклянный» приём вместо плоской заливки, как у всех. */ .btn-accent { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(135deg, var(--accent-1), var(--accent-2)); color: var(--on-accent); font-weight: 700; transition: transform 0.18s cubic-bezier(0.22,1,0.36,1), box-shadow 0.18s ease, background-color 0.4s ease; } .btn-accent::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 44%, rgba(255,255,255,0) 62%, rgba(0,0,0,0.14) 100%); pointer-events: none; } .btn-accent::after { content: ''; position: absolute; top: 0; left: -70%; width: 45%; height: 100%; background: linear-gradient(115deg, transparent, rgba(255,255,255,0.55), transparent); transform: skewX(-18deg); pointer-events: none; transition: left 0.55s cubic-bezier(0.22,1,0.36,1); } .btn-accent:active { transform: translateY(0) scale(0.98); } @media (hover: hover) and (pointer: fine) { .btn-accent:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--accent-solid) 55%, transparent); } .btn-accent:hover::after { left: 130%; } } .btn-ghost { background: rgba(var(--surface), 0.5); border: 1px solid var(--line); color: var(--ink); transition: border-color 0.18s ease, background-color 0.4s ease, transform 0.15s cubic-bezier(0.22,1,0.36,1); } @media (hover: hover) and (pointer: fine) { .btn-ghost:hover { border-color: color-mix(in srgb, var(--accent-solid) 40%, transparent); } } .btn-ghost:active { transform: scale(0.94); } /* ─── FAB добавления товара (режим admin) ───────────────────────────────── */ .fab-add { position: fixed; right: 22px; bottom: 22px; z-index: 40; width: 56px; height: 56px; border-radius: 999px; display: flex; align-items: center; justify-content: center; overflow: hidden; isolation: isolate; background: linear-gradient(135deg, var(--accent-1), var(--accent-2)); color: var(--on-accent); box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--accent-solid) 55%, transparent); transition: transform 0.2s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease, background-color 0.4s ease; } .fab-add::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 46%, rgba(0,0,0,0.16) 100%); pointer-events: none; } .fab-add:active { transform: scale(0.92); } /* ─── Модальное окно ─────────────────────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; z-index: 50; background: rgba(4, 8, 7, 0.65); backdrop-filter: blur(4px); display: flex; align-items: flex-end; justify-content: center; animation: overlayIn 0.18s ease-out both; } @keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } } @media (min-width: 640px) { .modal-overlay { align-items: center; } } .modal-sheet { width: 100%; max-width: 480px; max-height: 92vh; overflow-y: auto; border-radius: 24px 24px 0 0; background: var(--panel); border: 1px solid var(--line); transition: background-color 0.4s ease, border-color 0.4s ease; } @media (min-width: 640px) { .modal-sheet { border-radius: 24px; } } /* ─── Дропзона для фото ──────────────────────────────────────────────────── */ .photo-drop { border: 1.5px dashed var(--line); border-radius: 16px; background: rgba(255,255,255,0.02); transition: border-color 0.2s ease, background-color 0.2s ease; } .photo-drop[data-hover="true"] { border-color: color-mix(in srgb, var(--accent-solid) 60%, transparent); background: color-mix(in srgb, var(--accent-solid) 6%, transparent); } /* ─── Анимации входа ─────────────────────────────────────────────────────── */ @keyframes cardIn { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .card-enter { animation: cardIn 0.32s cubic-bezier(0.22,1,0.36,1) both; } @keyframes sheetUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .sheet-enter { animation: sheetUp 0.28s cubic-bezier(0.22,1,0.36,1) both; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Часто переключаемый блок (степпер количества на карточке) — короткая, едва заметная анимация: пользователь видит её десятки раз за смену. */ @keyframes stageFadeIn { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } } .stage-fade { animation: stageFadeIn 0.16s cubic-bezier(0.22,1,0.36,1) both; } /* Поповер сортировки — раскрывается из угла триггера, а не «из ниоткуда». */ @keyframes dropdownPop { from { opacity: 0; transform: scale(0.95) translateY(-4px); } to { opacity: 1; transform: scale(1) translateY(0); } } .dropdown-pop { transform-origin: top left; animation: dropdownPop 0.16s cubic-bezier(0.22,1,0.36,1) both; } /* Тост: вход мягче (плывёт вверх), выход быстрее (система просто убирает уведомление) — асимметрия по смыслу, а не одна и та же кривая туда-обратно. */ @keyframes toastIn { from { opacity: 0; transform: translate(-50%, 10px) scale(0.97); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } } @keyframes toastOut { from { opacity: 1; transform: translate(-50%, 0) scale(1); } to { opacity: 0; transform: translate(-50%, 6px) scale(0.97); } } .toast-enter { animation: toastIn 0.22s cubic-bezier(0.22,1,0.36,1) both; } .toast-leave { animation: toastOut 0.16s ease-in both; } /* ─── Значок количества товаров в корзине (иконка в шапке) ───────────────── */ .icon-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: linear-gradient(135deg, var(--danger-1), var(--danger-2)); color: #fff; font-size: 10px; font-weight: 700; font-family: 'JetBrains Mono', monospace; display: flex; align-items: center; justify-content: center; line-height: 1; box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--danger-2) 65%, transparent); } /* ─── Ряд категорий: стрелки прокрутки и затухание по краям ─────────────── */ .cat-fade { position: absolute; top: 0; bottom: 0; width: 36px; z-index: 2; pointer-events: none; } .cat-fade-left { left: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--base) 95%, transparent), transparent); } .cat-fade-right { right: 0; background: linear-gradient(270deg, color-mix(in srgb, var(--base) 95%, transparent), transparent); } .cat-scroll-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 26px; height: 26px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--base) 94%, transparent); border: 1px solid var(--line); color: var(--ink); transition: background-color 0.15s ease, transform 0.12s cubic-bezier(0.22,1,0.36,1); } .cat-scroll-btn:active { transform: translateY(-50%) scale(0.9); } @media (hover: hover) and (pointer: fine) { .cat-scroll-btn:hover { background: color-mix(in srgb, var(--accent-solid) 18%, transparent); } } .cat-scroll-left { left: 2px; } .cat-scroll-right { right: 2px; } .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } /* ─── Кнопка «в корзину» на карточке товара ──────────────────────────────── */ .btn-cart-add { background: color-mix(in srgb, var(--success-1) 14%, transparent); border: 1px solid color-mix(in srgb, var(--success-1) 35%, transparent); color: var(--success-1); font-weight: 600; transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.12s cubic-bezier(0.22,1,0.36,1); } @media (hover: hover) and (pointer: fine) { .btn-cart-add:hover { background: color-mix(in srgb, var(--success-1) 24%, transparent); border-color: color-mix(in srgb, var(--success-1) 55%, transparent); } } .btn-cart-add:active { transform: scale(0.98); } /* ─── Степпер количества (карточка товара и страница корзины) ────────────── */ .qty-stepper { display: flex; align-items: center; justify-content: space-between; gap: 6px; background: color-mix(in srgb, var(--success-1) 12%, transparent); border: 1px solid color-mix(in srgb, var(--success-1) 30%, transparent); border-radius: 10px; padding: 3px; } .qty-btn { width: 28px; height: 28px; flex-shrink: 0; border-radius: 7px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.06); color: var(--ink); transition: background-color 0.15s ease, transform 0.12s cubic-bezier(0.22,1,0.36,1); } @media (hover: hover) and (pointer: fine) { .qty-btn:hover { background: rgba(255,255,255,0.14); } } .qty-btn:active { transform: scale(0.9); } .qty-value { min-width: 20px; text-align: center; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 13px; color: var(--ink); } /* ─── Строка товара на странице корзины ──────────────────────────────────── */ .cart-row { display: flex; align-items: center; gap: 10px; padding: 9px; border-radius: 14px; background: rgba(255,255,255,0.03); border: 1px solid var(--line); transition: border-color 0.4s ease; } .cart-row-photo { width: 46px; height: 46px; flex-shrink: 0; border-radius: 10px; overflow: hidden; background: rgba(255,255,255,0.04); display: flex; align-items: center; justify-content: center; color: rgba(159,176,170,0.4); } .cart-row-photo img { width: 100%; height: 100%; object-fit: cover; } .cart-row-sum { min-width: 66px; text-align: right; font-size: 13px; font-weight: 700; color: var(--ink); flex-shrink: 0; } .cart-row-remove { width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: color-mix(in srgb, var(--danger-1) 85%, transparent); transition: background-color 0.15s ease, transform 0.12s cubic-bezier(0.22,1,0.36,1); } @media (hover: hover) and (pointer: fine) { .cart-row-remove:hover { background: color-mix(in srgb, var(--danger-1) 12%, transparent); } } .cart-row-remove:active { transform: scale(0.9); } /* ─── Индикатор «уже в корзине» на карточке товара ───────────────────────── */ .cart-in-badge { position: absolute; top: 10px; right: 10px; z-index: 6; display: flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: 999px; background: linear-gradient(135deg, var(--success-1), var(--success-2)); color: #fff; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 11px; box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--success-2) 65%, transparent); } /* ─── Строка «степпер + отмена» при выборе количества на карточке ────────── */ .stage-row { display: flex; align-items: center; gap: 6px; } .stage-cancel { width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.05); color: var(--ink-dim); transition: background-color 0.15s ease, color 0.15s ease, transform 0.12s cubic-bezier(0.22,1,0.36,1); } @media (hover: hover) and (pointer: fine) { .stage-cancel:hover { background: color-mix(in srgb, var(--danger-1) 15%, transparent); color: var(--danger-1); } } .stage-cancel:active { transform: scale(0.9); } /* ─── Страница корзины: увеличенные строки товаров ───────────────────────── */ .cart-row-lg { padding: 12px; border-radius: 16px; align-items: flex-start; } .cart-row-photo-lg { width: 64px; height: 64px; border-radius: 12px; } /* ─── Нижняя закреплённая панель «Итого» на странице корзины ─────────────── */ .cart-footer-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: rgba(var(--surface), 0.94); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid var(--line); box-shadow: 0 -10px 30px -10px rgba(0,0,0,0.45); padding-bottom: env(safe-area-inset-bottom, 0); } /* ─── Тумблер вкл/выкл (настройки) ────────────────────────────────────────── */ .toggle-track { width: 44px; height: 24px; border-radius: 999px; position: relative; transition: background-color 0.2s ease; background: rgba(255,255,255,0.1); } .toggle-track[data-on="true"] { background: var(--accent-solid); } .toggle-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--base); transition: transform 0.2s cubic-bezier(0.22,1,0.36,1); } .toggle-track[data-on="true"] .toggle-knob { transform: translateX(20px); } /* ─── Просмотр фото крупным планом ────────────────────────────────────────── */ .lightbox-overlay { position: fixed; inset: 0; z-index: 80; background: rgba(4, 8, 7, 0.92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; animation: fadeIn 0.18s ease-out both; } .lightbox-close { position: absolute; top: 18px; right: 18px; z-index: 5; width: 40px; height: 40px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid var(--line); color: var(--ink); display: flex; align-items: center; justify-content: center; transition: background-color 0.15s ease, transform 0.12s cubic-bezier(0.22,1,0.36,1); } .lightbox-close:active { transform: scale(0.92); } .lightbox-title { color: var(--ink); font-family: 'Fraunces', serif; font-size: 16px; margin-bottom: 14px; text-align: center; padding: 0 56px; } .lightbox-stage { position: relative; max-width: min(90vw, 640px); max-height: 70vh; display: flex; align-items: center; justify-content: center; } .lightbox-img { max-width: 100%; max-height: 70vh; border-radius: 16px; box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6); object-fit: contain; } .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 40px; height: 40px; border-radius: 999px; background: color-mix(in srgb, var(--base) 85%, transparent); border: 1px solid var(--line); color: var(--ink); display: flex; align-items: center; justify-content: center; transition: background-color 0.15s ease, transform 0.12s cubic-bezier(0.22,1,0.36,1); } .lightbox-nav:active { transform: translateY(-50%) scale(0.92); } @media (hover: hover) and (pointer: fine) { .lightbox-nav:hover { background: color-mix(in srgb, var(--accent-solid) 20%, transparent); } } .lightbox-nav-left { left: -8px; } .lightbox-nav-right { right: -8px; } @media (min-width: 640px) { .lightbox-nav-left { left: -52px; } .lightbox-nav-right { right: -52px; } } .lightbox-dots { display: flex; gap: 6px; margin-top: 18px; } .lightbox-dots .photo-dot { position: static; } /* ─── Страница настроек: секции, переключатель языка и тем ──────────────── */ .settings-section { border-radius: 18px; border: 1px solid var(--line); background: rgba(var(--surface), 0.4); padding: 18px; transition: background-color 0.4s ease, border-color 0.4s ease; } .settings-section + .settings-section { margin-top: 14px; } .settings-section-label { display: flex; align-items: center; gap: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--ink-dim); margin-bottom: 12px; } .lang-switch { display: flex; gap: 6px; padding: 4px; border-radius: 13px; background: rgba(255,255,255,0.04); border: 1px solid var(--line); } .lang-option { flex: 1; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 700; color: var(--ink-dim); transition: background-color 0.18s cubic-bezier(0.22,1,0.36,1), color 0.18s ease, box-shadow 0.18s ease; } .lang-option[data-active="true"] { background: linear-gradient(135deg, var(--accent-1), var(--accent-2)); color: var(--on-accent); box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--accent-solid) 55%, transparent); } /* Переключатель тем: три карточки со «свотчем»-градиентом и подписью */ .theme-switch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .theme-option { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 6px; border-radius: 14px; border: 1.5px solid var(--line); background: rgba(255,255,255,0.02); transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.15s cubic-bezier(0.22,1,0.36,1); } .theme-option:active { transform: scale(0.96); } @media (hover: hover) and (pointer: fine) { .theme-option:hover { border-color: var(--line); background: rgba(255,255,255,0.05); } } .theme-option[data-active="true"] { border-color: var(--accent-solid); background: color-mix(in srgb, var(--accent-solid) 10%, transparent); } .theme-swatch { position: relative; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px -4px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.35); } .theme-swatch-check { color: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); } .theme-option-name { font-size: 11.5px; font-weight: 600; color: var(--ink-dim); text-align: center; line-height: 1.2; } .theme-option[data-active="true"] .theme-option-name { color: var(--ink); }