/* ===================================================================== Dag House — Apple 2026 «Liquid Glass» design layer Глобальный слой поверх Bootstrap: полупрозрачные стеклянные поверхности, непрерывные скругления, вибрантная типографика SF/Inter, мягкая глубина. Подключается ПОСЛЕДНИМ в , поэтому переопределяет базовые стили. ===================================================================== */ :root { /* Палитра — тёмное вибрантное стекло с золотым акцентом бренда */ --lg-bg-0: #0b0b0f; --lg-bg-1: #121218; --lg-ink: #f5f5f7; /* основной текст (Apple ink) */ --lg-ink-dim: rgba(235, 235, 245, 0.60); --lg-ink-faint: rgba(235, 235, 245, 0.30); --lg-gold: #e0aa6a; --lg-gold-soft: #d29e5e; --lg-gold-tint: rgba(224, 170, 106, 0.16); /* Liquid Glass поверхности */ --lg-glass: rgba(28, 28, 34, 0.55); --lg-glass-strong: rgba(30, 30, 38, 0.72); --lg-glass-thin: rgba(255, 255, 255, 0.04); --lg-stroke: rgba(255, 255, 255, 0.10); --lg-stroke-strong: rgba(255, 255, 255, 0.16); --lg-highlight: rgba(255, 255, 255, 0.22); /* блик по верхней кромке */ --lg-blur: 30px; --lg-blur-nav: 40px; /* Непрерывные (concentric) скругления */ --lg-r-sm: 12px; --lg-r-md: 18px; --lg-r-lg: 26px; --lg-r-xl: 34px; --lg-r-pill: 999px; /* Тени-глубина */ --lg-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.30); --lg-shadow-md: 0 12px 40px rgba(0, 0, 0, 0.38); --lg-shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.46); /* Ритм и движение */ --lg-space: clamp(1rem, 0.6rem + 1.6vw, 2rem); --lg-ease: cubic-bezier(0.32, 0.72, 0, 1); /* фирменная «мягкая» Apple-кривая */ --lg-fast: 220ms; --lg-slow: 460ms; --lg-font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", system-ui, sans-serif; } /* ---------- База ---------- */ html.dark-theme, body { background-color: var(--lg-bg-0); color: var(--lg-ink); font-family: var(--lg-font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; letter-spacing: -0.011em; } /* Атмосферный фон: мягкие световые пятна + тонкая зернистость глубины */ body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: radial-gradient(60vw 50vh at 15% -5%, rgba(224, 170, 106, 0.12), transparent 60%), radial-gradient(50vw 45vh at 100% 0%, rgba(120, 90, 200, 0.10), transparent 55%), radial-gradient(70vw 60vh at 50% 110%, rgba(224, 170, 106, 0.08), transparent 60%), var(--lg-bg-0); pointer-events: none; } /* Типографика: заголовки — тот же SF/Inter, крупно и плотно (Apple не про serif) */ h1, h2, h3, h4, h5, h6, .display-1, .display-2, .display-3, .display-4, .section-title, .navbar-brand { font-family: var(--lg-font) !important; font-weight: 700; letter-spacing: -0.022em; color: var(--lg-ink); } h1, .display-1, .display-2 { font-weight: 800; letter-spacing: -0.03em; } p, .lead, .text-muted { color: var(--lg-ink-dim); } a { color: var(--lg-gold); text-decoration: none; } ::selection { background: var(--lg-gold-tint); color: #fff; } /* ---------- Liquid Glass утилита ---------- */ .lg-glass { position: relative; background: var(--lg-glass); -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(180%); backdrop-filter: blur(var(--lg-blur)) saturate(180%); border: 1px solid var(--lg-stroke); border-radius: var(--lg-r-lg); box-shadow: var(--lg-shadow-md), inset 0 1px 0 var(--lg-highlight); } /* ---------- Навигация: плавающая стеклянная панель ---------- */ #mainNavbar.navbar { background: var(--lg-glass-strong) !important; -webkit-backdrop-filter: blur(var(--lg-blur-nav)) saturate(200%); backdrop-filter: blur(var(--lg-blur-nav)) saturate(200%); border-bottom: 1px solid var(--lg-stroke); box-shadow: inset 0 1px 0 var(--lg-highlight), 0 8px 30px rgba(0, 0, 0, 0.30); transition: background var(--lg-fast) var(--lg-ease), box-shadow var(--lg-fast) var(--lg-ease); } /* На больших экранах — boxed-панель по ширине .container */ @media (min-width: 992px) { #mainNavbar.navbar { top: 14px; padding: 0 !important; background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: none !important; box-shadow: none !important; } #mainNavbar.navbar > .container { background: var(--lg-glass-strong); -webkit-backdrop-filter: blur(var(--lg-blur-nav)) saturate(200%); backdrop-filter: blur(var(--lg-blur-nav)) saturate(200%); border: 1px solid var(--lg-stroke); border-radius: var(--lg-r-pill); box-shadow: inset 0 1px 0 var(--lg-highlight), 0 8px 30px rgba(0, 0, 0, 0.30); padding-block: 0.65rem; transition: background var(--lg-fast) var(--lg-ease), box-shadow var(--lg-fast) var(--lg-ease); } #mainNavbar.navbar.scrolled > .container { background: rgba(30, 30, 38, 0.88); box-shadow: inset 0 1px 0 var(--lg-highlight), 0 12px 40px rgba(0, 0, 0, 0.42); padding-block: 0.5rem; } } #mainNavbar .navbar-nav .nav-link { color: var(--lg-ink-dim); font-weight: 550; border-radius: var(--lg-r-pill); padding: 0.5rem 1rem; transition: color var(--lg-fast) var(--lg-ease), background var(--lg-fast) var(--lg-ease); } #mainNavbar .navbar-nav .nav-link:hover, #mainNavbar .navbar-nav .nav-link.active { color: var(--lg-ink); background: var(--lg-glass-thin); } #mainNavbar .navbar-toggler { border: 1px solid var(--lg-stroke); border-radius: var(--lg-r-md); padding: 0.4rem 0.55rem; } #mainNavbar .navbar-toggler:focus { box-shadow: 0 0 0 3px var(--lg-gold-tint); } /* ---------- Кнопки: стеклянные, непрерывные, с бликом ---------- */ .btn { border-radius: var(--lg-r-pill); font-weight: 600; letter-spacing: -0.01em; padding: 0.62rem 1.4rem; border: 1px solid transparent; transition: transform var(--lg-fast) var(--lg-ease), box-shadow var(--lg-fast) var(--lg-ease), background var(--lg-fast) var(--lg-ease), filter var(--lg-fast) var(--lg-ease); will-change: transform; } .btn:active { transform: scale(0.97); } .btn-primary, .btn-gold { background: linear-gradient(180deg, var(--lg-gold) 0%, var(--lg-gold-soft) 100%); color: #1a1206; border-color: rgba(255, 255, 255, 0.18); box-shadow: 0 8px 24px rgba(224, 170, 106, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.45); } .btn-primary:hover, .btn-gold:hover { color: #1a1206; filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 14px 34px rgba(224, 170, 106, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.5); } .btn-outline-primary, .btn-outline-light, .btn-outline-secondary { background: var(--lg-glass); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); color: var(--lg-ink); border: 1px solid var(--lg-stroke-strong); box-shadow: inset 0 1px 0 var(--lg-highlight); } .btn-outline-primary:hover, .btn-outline-light:hover, .btn-outline-secondary:hover { background: var(--lg-glass-strong); color: var(--lg-ink); border-color: var(--lg-gold); transform: translateY(-1px); } /* ---------- Карточки как стеклянные поверхности ---------- */ .card { background: var(--lg-glass); -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(170%); backdrop-filter: blur(var(--lg-blur)) saturate(170%); border: 1px solid var(--lg-stroke); border-radius: var(--lg-r-lg); box-shadow: var(--lg-shadow-md), inset 0 1px 0 var(--lg-highlight); color: var(--lg-ink); overflow: hidden; transition: transform var(--lg-slow) var(--lg-ease), box-shadow var(--lg-slow) var(--lg-ease), border-color var(--lg-slow) var(--lg-ease); } .card:hover { transform: translateY(-4px); border-color: var(--lg-stroke-strong); box-shadow: var(--lg-shadow-lg), inset 0 1px 0 var(--lg-highlight); } .card-title { color: var(--lg-ink); font-weight: 700; } .card-text, .card-body .text-muted { color: var(--lg-ink-dim); } /* ---------- Формы: стеклянные поля ---------- */ .form-control, .form-select, .input-group-text { background: var(--lg-glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--lg-stroke); border-radius: var(--lg-r-md); color: var(--lg-ink); padding: 0.7rem 1rem; transition: border-color var(--lg-fast) var(--lg-ease), box-shadow var(--lg-fast) var(--lg-ease); } .form-control::placeholder { color: var(--lg-ink-faint); } .form-control:focus, .form-select:focus { background: var(--lg-glass-strong); border-color: var(--lg-gold); box-shadow: 0 0 0 4px var(--lg-gold-tint); color: var(--lg-ink); } .form-label { color: var(--lg-ink-dim); font-weight: 550; } /* ---------- Бейджи / пилюли ---------- */ .badge { border-radius: var(--lg-r-pill); font-weight: 600; letter-spacing: 0.01em; padding: 0.4em 0.8em; } .badge.bg-primary, .badge.bg-gold { background: var(--lg-gold-tint) !important; color: var(--lg-gold); } /* ---------- Футер ---------- */ .footer { background: var(--lg-glass-strong); -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(160%); backdrop-filter: blur(var(--lg-blur)) saturate(160%); border-top: 1px solid var(--lg-stroke); box-shadow: inset 0 1px 0 var(--lg-highlight); color: var(--lg-ink-dim); } .footer a { color: var(--lg-ink-dim); transition: color var(--lg-fast) var(--lg-ease); } .footer a:hover { color: var(--lg-gold); } /* ---------- Секции / контейнеры ---------- */ section { position: relative; } .section-title, .section-heading { font-weight: 800; letter-spacing: -0.03em; } /* Мягкая стеклянная «полка» под контентные блоки, если класс задан вручную */ .lg-surface { background: var(--lg-glass); -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(170%); backdrop-filter: blur(var(--lg-blur)) saturate(170%); border: 1px solid var(--lg-stroke); border-radius: var(--lg-r-xl); box-shadow: var(--lg-shadow-md), inset 0 1px 0 var(--lg-highlight); padding: clamp(1.25rem, 0.8rem + 2vw, 2.5rem); } /* ---------- Карточка блюда (меню): фото-форвард ---------- */ .premium-food-card { display: flex; flex-direction: column; height: 100%; background: var(--lg-glass); -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(170%); backdrop-filter: blur(var(--lg-blur)) saturate(170%); border: 1px solid var(--lg-stroke); border-radius: var(--lg-r-lg); overflow: hidden; box-shadow: var(--lg-shadow-md), inset 0 1px 0 var(--lg-highlight); transition: transform var(--lg-slow) var(--lg-ease), box-shadow var(--lg-slow) var(--lg-ease), border-color var(--lg-slow) var(--lg-ease); } .premium-food-card::before { display: none; } /* убираем старый sheen-оверлей */ .premium-food-card:hover { transform: translateY(-4px); border-color: var(--lg-stroke-strong); box-shadow: var(--lg-shadow-lg), inset 0 1px 0 var(--lg-highlight); } /* Фото — во всю ширину карточки, крупный квадрат */ .premium-food-card .food-image-wrapper { position: relative; aspect-ratio: 1 / 1; height: auto; overflow: hidden; } .premium-food-card .food-image-link { display: block; width: 100%; height: 100%; } .premium-food-card .food-image { width: 100%; height: 100%; object-fit: cover; transition: transform var(--lg-slow) var(--lg-ease); } .premium-food-card:hover .food-image { transform: scale(1.06); } .premium-food-card .food-image--empty { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 2.8rem; color: var(--lg-ink-faint); background: var(--lg-glass-strong); } .food-badge { position: absolute; z-index: 2; padding: .3rem .7rem; border-radius: var(--lg-r-pill); font-size: .74rem; font-weight: 600; background: var(--lg-glass-strong); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--lg-stroke); color: var(--lg-ink); } .food-badge--rating { top: .8rem; left: .8rem; color: var(--lg-gold); } .food-badge--cat { top: .8rem; right: .8rem; color: var(--lg-ink-dim); } .premium-food-card .quick-add-btn { position: static; flex-shrink: 0; width: 36px; height: 36px; min-width: 36px; padding: 0; border: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; line-height: 1; color: #1a1206; background: linear-gradient(180deg, var(--lg-gold), var(--lg-gold-soft)); box-shadow: 0 6px 16px rgba(224,170,106,.35), inset 0 1px 0 rgba(255,255,255,.5); transition: transform var(--lg-fast) var(--lg-ease), filter var(--lg-fast) var(--lg-ease); } .premium-food-card .quick-add-btn:hover { transform: scale(1.08); filter: brightness(1.05); } .premium-food-card .quick-add-btn:active { transform: scale(.95); } .premium-food-card__body { padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; flex: 1; } .premium-food-card__title { font-size: 1.1rem; font-weight: 700; margin: 0 0 .4rem; line-height: 1.25; } .premium-food-card__title a { color: var(--lg-ink); } .premium-food-card__title a:hover { color: var(--lg-gold); } .premium-food-card__desc { color: var(--lg-ink-dim); font-size: .88rem; margin: 0 0 1rem; line-height: 1.5; } .premium-food-card__foot { margin-top: auto; display: flex; flex-direction: column; align-items: stretch; gap: .8rem; } .premium-food-card__price-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .premium-food-card__quick { flex-shrink: 0; display: none; align-items: center; justify-content: flex-end; margin-left: auto; } .premium-food-card .food-price { color: var(--lg-gold); font-weight: 700; font-size: 1.4rem; white-space: nowrap; } .premium-food-card__actions { display: flex; gap: .5rem; align-items: center; } .premium-food-card__actions .add-to-cart-btn { flex: 1; padding: .6rem 1rem; white-space: nowrap; } .premium-food-card__actions .favorite-btn { flex: 0 0 auto; width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; } .premium-food-card__quick .quantity-controls-inline { margin-left: 0; gap: .25rem !important; } /* ---------- Скроллбар в стиле Apple ---------- */ ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border: 3px solid transparent; border-radius: var(--lg-r-pill); background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.24); background-clip: content-box; } /* ---------- Мобильная полировка ---------- */ @media (max-width: 991.98px) { /* Восстанавливаем гуттеры Bootstrap, убитые старым CSS: контент не должен прилипать к краям экрана */ .row { --bs-gutter-x: 1.5rem; } .row > * { padding-left: calc(var(--bs-gutter-x) * .5) !important; padding-right: calc(var(--bs-gutter-x) * .5) !important; } .container, .container-fluid { padding-left: 20px !important; padding-right: 20px !important; } /* Типографика: крупные заголовки аккуратно масштабируются */ h1, .display-1, .display-2 { font-size: clamp(1.9rem, 8.5vw, 2.6rem) !important; } h2 { font-size: clamp(1.5rem, 6.5vw, 2rem) !important; } /* Ритм секций */ section { padding-top: clamp(2.5rem, 8vw, 4rem); padding-bottom: clamp(2.5rem, 8vw, 4rem); } /* Кнопки: удобная зона касания, без прилипания */ .btn-lg { padding: 0.7rem 1.6rem; font-size: 1rem; } /* Карточки блюд: чуть меньше радиус и внутренние поля */ .premium-food-card__body { padding: 0.95rem 1rem 1.1rem; } .premium-food-card .food-price { font-size: 1.2rem; } /* Футер: воздух и вертикальный ритм */ .footer { padding-top: 2.5rem; } .footer [class*="col"] { margin-bottom: 1.75rem; } } @media (max-width: 575.98px) { .container, .container-fluid { padding-left: 16px !important; padding-right: 16px !important; } /* Стеклянные поверхности на телефоне — меньше скругление, ближе к краям */ .card, .lg-surface, .premium-food-card { border-radius: var(--lg-r-md); } } /* ---------- Карточки блюд: компактный мобильный вид ---------- */ @media (max-width: 767.98px) { .premium-food-card__body { padding: 0.65rem 0.75rem 0.75rem; } .premium-food-card__title { font-size: 0.85rem !important; margin-bottom: 0.2rem !important; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .premium-food-card__desc, .food-badge--cat { display: none !important; } .premium-food-card__foot { gap: 0; } .premium-food-card .food-price { font-size: 0.95rem !important; } .premium-food-card__actions { display: none !important; } .premium-food-card__quick { display: flex !important; } .premium-food-card .quick-add-btn { width: 34px; height: 34px; min-width: 34px; font-size: 1.15rem; } .premium-food-card__quick .quantity-controls-inline { gap: 0.25rem !important; } .premium-food-card__quick .quantity-controls-inline .qty-decrease, .premium-food-card__quick .quantity-controls-inline .qty-increase { width: 28px !important; height: 28px !important; min-width: 28px; font-size: 0.8rem; padding: 0 !important; border-radius: 50% !important; } .premium-food-card__quick .quantity-controls-inline .qty-input { width: 32px !important; height: 28px !important; padding: 0 !important; border-radius: 8px !important; font-size: 0.8rem; } } @media (min-width: 768px) { .premium-food-card__quick { display: none !important; } } /* ---------- Уважение к reduced-motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }