/* LIQUID GLASS v2.2 — iOS 26-inspired translucent design system. Loaded AFTER style.css + customer.css|admin.css to override legacy. Header files inject before stylesheets so reveal rules render at opacity:0 on first paint (no FOUC). */ :root { /* Motion curves */ --lq-ease: cubic-bezier(0.22, 1, 0.36, 1); --lq-ease-io: cubic-bezier(0.65, 0, 0.35, 1); --lq-spring: cubic-bezier(0.34, 1.4, 0.64, 1); --lq-snap: cubic-bezier(0.32, 0.72, 0, 1); /* Duration scale */ --lq-d-1: 140ms; --lq-d-2: 220ms; --lq-d-3: 340ms; --lq-d-4: 520ms; /* Glass tints */ --lq-tint: rgba(255, 255, 255, 0.62); --lq-tint-strong: rgba(255, 255, 255, 0.78); --lq-tint-weak: rgba(255, 255, 255, 0.40); --lq-tint-dark: rgba(16, 30, 22, 0.54); --lq-tint-matcha: rgba(74, 124, 89, 0.20); /* Blur scale */ --lq-blur-xs: saturate(150%) blur(10px); --lq-blur-sm: saturate(160%) blur(16px); --lq-blur-md: saturate(170%) blur(22px); --lq-blur-lg: saturate(180%) blur(30px); --lq-blur-xl: saturate(180%) blur(44px); /* Shadows */ --lq-sh-1: 0 1px 2px rgba(12, 24, 18, 0.04), 0 6px 18px rgba(12, 24, 18, 0.06); --lq-sh-2: 0 2px 4px rgba(12, 24, 18, 0.06), 0 14px 36px rgba(12, 24, 18, 0.10); --lq-sh-3: 0 4px 10px rgba(12, 24, 18, 0.08), 0 28px 60px rgba(12, 24, 18, 0.16); --lq-sh-inset: inset 0 1px 0 rgba(255,255,255,0.7), inset 0 -1px 0 rgba(0,0,0,0.04); /* Corner radii */ --lq-r-xs: 10px; --lq-r-sm: 14px; --lq-r-md: 20px; --lq-r-lg: 28px; --lq-r-xl: 36px; --lq-r-pill: 9999px; /* Unified framing — shared by navbar, hero, footer */ --lq-gap-x: clamp(0.5rem, 1.8vw, 1.25rem); --lq-gap-y: clamp(0.5rem, 1.2vw, 1rem); --lq-max: 1260px; } /* scroll-behavior lives only here (removed from style.css). */ html { scroll-behavior: smooth; scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } :root { --lq-d-3: 180ms; --lq-d-4: 240ms; } /* Kill reveal hidden-state so anything tagged by JS stays visible */ .lq-reveal { opacity: 1 !important; transform: none !important; transition: none !important; will-change: auto !important; } .hero::before, .hero-float-card { animation: none !important; } } /* 1 · GLOBAL CANVAS background-attachment:fixed removed (broken on iOS Safari). */ body { background: #F6F8F1; min-height: 100vh; min-height: 100dvh; } body, input, select, textarea, button { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } a, button, .btn, input[type="submit"], .filter-btn, .payment-opt, .nav-cart-btn, .nav-hamburger, .qty-btn, .cart-qty-btn { -webkit-tap-highlight-color: transparent; } /* PERFORMANCE — disable backdrop-filter pada elemen yang muncul banyak. Backdrop-filter sangat mahal di GPU. Diaktifkan hanya pada navbar, modal, toast, sidebar admin, hero (elemen yang muncul sedikit / penting). Cards, alerts, btn-secondary tidak pakai blur lagi → solid background. */ .product-card, .feature-card, .team-card, .card, .checkout-section, .cart-summary, .checkout-summary, .order-card, .success-card, .auth-card, .alert, .btn-secondary, .btn-cream, .cart-item { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* PAGE TRANSITIONS — MPA View Transitions (Chrome 126+). Admin-to-admin navigation di-skip via JS (lihat liquid.js) untuk menghindari flash putih saat crossfade. Customer pages pakai default crossfade browser. */ @view-transition { navigation: auto; } /* Navbar customer: pinned during transition agar tidak ikut fade */ .navbar { view-transition-name: km-navbar; } ::view-transition-old(km-navbar), ::view-transition-new(km-navbar) { animation: none; mix-blend-mode: normal; isolation: auto; } /* Backdrop: match admin bg exactly to prevent white flash on customer→admin or vice versa */ ::view-transition { background-color: #f5f7f5; } @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } } /* REVEAL SYSTEM — JS tags below-fold elements with .lq-reveal; above-fold elements paint normally. No blanket :is() selector. */ .lq-reveal { opacity: 0; transform: translateY(12px); transition: opacity .25s cubic-bezier(.32,.72,0,1), transform .25s cubic-bezier(.32,.72,0,1); transition-delay: var(--lq-delay, 0ms); } .lq-reveal.is-revealed { opacity: 1; transform: translateY(0); } /* 2 · NAVBAR — liquid glass effect */ .navbar { position: sticky; top: var(--lq-gap-y); margin: var(--lq-gap-y) auto 0; width: calc(100% - 2 * var(--lq-gap-x)); max-width: var(--lq-max); background: rgba(255, 255, 255, 0.45); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: var(--lq-r-pill); box-shadow: 0 4px 24px rgba(31, 58, 46, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.7); transition: background-color 0.2s ease, box-shadow 0.2s ease; z-index: 1250; overflow: visible; } .navbar::before { display: none; } .navbar.is-scrolled { background: rgba(255, 255, 255, 0.65); box-shadow: 0 8px 32px rgba(31, 58, 46, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8); } .nav-container { padding: 0 clamp(1rem, 2vw, 1.5rem); position: relative; z-index: 1; } .logo-icon-img { border-radius: 12px; transform: rotate(0deg) scale(1); backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform var(--lq-d-2) var(--lq-spring); } .nav-logo:hover .logo-icon-img { transform: rotate(-6deg) scale(1.05); } .nav-links a { transition: background-color .18s cubic-bezier(.32,.72,0,1), color .18s cubic-bezier(.32,.72,0,1), transform .12s cubic-bezier(.32,.72,0,1); } .nav-links a:hover { color: var(--matcha-dark); background: rgba(74, 124, 89, 0.08); } .nav-links a:active { transform: scale(0.93); background: rgba(74, 124, 89, 0.14); transition-duration: .06s; } .nav-links a.active { background: rgba(74, 124, 89, 0.12); color: var(--matcha-dark); box-shadow: inset 0 0 0 1px rgba(74, 124, 89, 0.22); } .nav-cart-btn { background: rgba(255, 255, 255, 0.45); border: 1px solid rgba(255, 255, 255, 0.6); transform: scale(1); backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .12s cubic-bezier(.32,.72,0,1), background-color .15s ease; } .nav-cart-btn:hover { background: rgba(255, 255, 255, 0.75); } .nav-cart-btn:active { transform: scale(0.92); transition-duration: .06s; } .cart-badge { background: #c0392b; box-shadow: 0 2px 6px rgba(192, 57, 43, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35); animation: lq-badge-in 320ms var(--lq-spring); } @keyframes lq-badge-in { from { transform: scale(0); } to { transform: scale(1); } } .nav-hamburger { background: rgba(255, 255, 255, 0.4); border: 1px solid rgba(255, 255, 255, 0.55); transition: background-color var(--lq-d-1) var(--lq-ease), transform var(--lq-d-1) var(--lq-spring); } .nav-hamburger:hover { background: rgba(255, 255, 255, 0.7); } .nav-hamburger:active { transform: scale(0.93); } .preview-sticky-shell { padding: 0; background: transparent; } .admin-preview-bar { background: rgba(30, 61, 40, 0.88); -webkit-backdrop-filter: var(--lq-blur-sm); backdrop-filter: var(--lq-blur-sm); border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .preview-sticky-shell .navbar { position: static; top: auto; margin: var(--lq-gap-y) var(--lq-gap-x) 0; width: auto; max-width: none; } .navbar.navbar-preview-mode { top: calc(var(--admin-preview-height) + var(--lq-gap-y)); } /* 3 · MOBILE NAV */ .nav-mobile { background: rgba(250, 248, 242, 0.85); -webkit-backdrop-filter: var(--lq-blur-xl); backdrop-filter: var(--lq-blur-xl); } .nav-mobile.open { animation: lq-mobile-nav-in var(--lq-d-3) var(--lq-ease); } @keyframes lq-mobile-nav-in { from { opacity: 0; transform: translateY(-12px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .nav-mobile a, .nav-mobile-cart { border-bottom: 1px solid rgba(0, 0, 0, 0.06); padding: 1rem 1.25rem; border-radius: var(--lq-r-md); transition: background-color var(--lq-d-1) var(--lq-ease), transform var(--lq-d-1) var(--lq-spring); } .nav-mobile a:active, .nav-mobile-cart:active { transform: scale(0.97); } /* 4 · BUTTONS — Apple-style: subtle, snappy, GPU-only */ .btn { border-radius: var(--lq-r-pill); transform: translateY(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .15s cubic-bezier(.32,.72,0,1), background-color .18s ease, color .18s ease, border-color .18s ease; } .btn::before { display: none !important; content: none !important; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: scale(0.97); transition-duration: .08s; } .btn-primary { background: var(--matcha); border: 1px solid var(--matcha); box-shadow: 0 2px 8px rgba(74, 124, 89, 0.18); color: #ffffff; } .btn-primary:hover { background: var(--matcha-dark); border-color: var(--matcha-dark); transform: translateY(-1px); } .btn-primary:active { transform: scale(0.97); } .btn-secondary { background: rgba(255, 255, 255, 0.55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(74, 124, 89, 0.45); color: var(--matcha-dark); box-shadow: var(--lq-sh-1); } .btn-secondary:hover { background: rgba(74, 124, 89, 0.1); border-color: var(--matcha); transform: translateY(-1px); } .btn-cream { background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 1px 4px rgba(0,0,0,0.04); } .btn-cream:hover { background: rgba(255, 255, 255, 0.95); transform: translateY(-1px); } .btn-danger { background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(192, 57, 43, 0.4); color: #c0392b; } .btn-danger:hover { background: #c0392b; color: #fff; border-color: #c0392b; transform: translateY(-1px); } .btn-lg { padding: 0.95rem 2rem; font-size: 0.95rem; } /* 5 · CARDS — Apple-style: subtle lift, no heavy shadows */ .card, .feature-card, .product-card, .team-card { background: var(--lq-tint-strong); border: 1px solid rgba(255, 255, 255, 0.55); border-radius: var(--lq-r-lg); box-shadow: var(--lq-sh-1); transform: translateY(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .22s cubic-bezier(.32,.72,0,1); overflow: hidden; position: relative; } .card::before, .feature-card::before, .product-card::before, .team-card::before { display: none; } .card > *, .feature-card > *, .product-card > *, .team-card > * { position: relative; z-index: 1; } .feature-card:hover, .product-card:hover, .team-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); } .product-card:active, .feature-card:active, .team-card:active { transform: scale(0.98); transition-duration: .1s; } .feature-icon { background: rgba(74,124,89,0.08); border-radius: var(--lq-r-md); } .product-card-img img { transform: scale(1); backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .25s cubic-bezier(.32,.72,0,1); } .product-card:hover .product-card-img img { transform: scale(1.02); } .product-badge { background: var(--matcha); box-shadow: 0 2px 6px rgba(74, 124, 89, 0.25); } .btn-add-cart { background: var(--matcha); color: #fff; border-radius: var(--lq-r-pill); transform: translateY(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .15s cubic-bezier(.32,.72,0,1), background-color .18s ease; } .btn-add-cart:hover { background: var(--matcha-dark); color: #fff; transform: translateY(-1px); } .btn-add-cart:active { transform: scale(0.97); transition-duration: .08s; } .menu-detail-btn { background: #FFFFFF; border: 1px solid var(--border); color: var(--text-dark); } .menu-detail-btn:hover { background: var(--matcha-pale); border-color: var(--matcha); color: var(--text-dark); } /* 6 · FORMS */ .form-control { background: rgba(255, 255, 255, 0.65); border: 1.5px solid rgba(0, 0, 0, 0.08); border-radius: var(--lq-r-sm); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7); transition: border-color var(--lq-d-1) var(--lq-ease), box-shadow var(--lq-d-1) var(--lq-ease), background-color var(--lq-d-1) var(--lq-ease); } .form-control:hover { background: rgba(255, 255, 255, 0.82); } .form-control:focus { background: #ffffff; border-color: var(--matcha); box-shadow: 0 0 0 4px rgba(74, 124, 89, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.7); } /* 7 · PAGE HEADER */ .page-header { background: linear-gradient(135deg, rgba(237, 245, 240, 0.6) 0%, rgba(247, 243, 236, 0.45) 100%); border: none; border-bottom: 1px solid rgba(0, 0, 0, 0.04); padding: 3.5rem 0 2.75rem; margin-top: var(--lq-gap-y); } .page-header--compact { padding: 1.25rem 0 1rem; } /* 8 · HERO — override min-height directly (cascade on custom props unreliable). */ .hero { background: radial-gradient(ellipse at 20% 30%, rgba(74, 124, 89, 0.55), transparent 55%), radial-gradient(ellipse at 80% 80%, rgba(122, 171, 138, 0.35), transparent 60%), linear-gradient(135deg, #1e3d28 0%, #2d5c3e 50%, #1e3d28 100%); border-radius: var(--lq-r-xl); margin: var(--lq-gap-y) auto 0; width: calc(100% - 2 * var(--lq-gap-x)); max-width: var(--lq-max); overflow: clip; box-shadow: var(--lq-sh-3); } @supports (height: 100svh) { @media (min-width: 769px) { /* Mobile hero sizing is owned by customer.css (no svh). At ≤768px this layer no longer sets hero height. */ .hero { min-height: calc(100svh - var(--nav-height) - 3 * var(--lq-gap-y)); } } } .hero::before { opacity: 0.5; } .hero-label { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2); } .hero-btn-primary { background: rgba(255, 255, 255, 0.95); border: 1px solid rgba(255, 255, 255, 0.85); color: var(--matcha-deep); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.8); transform: translateY(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform var(--lq-d-2) var(--lq-spring), background-color var(--lq-d-1) var(--lq-ease); } .hero-btn-primary:hover { background: #ffffff; transform: translateY(-2px); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.9); } .hero-btn-primary:active { transform: translateY(0) scale(0.97); } /* No saturate on dark hero — it bleeds green into the button glass. */ .hero-btn-secondary { background: rgba(255, 255, 255, 0.08); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-color: rgba(255, 255, 255, 0.32); color: #ffffff; transform: translateY(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: background-color var(--lq-d-2) var(--lq-ease), transform var(--lq-d-2) var(--lq-spring); } .hero-btn-secondary:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.55); transform: translateY(-1px); } .hero-btn-secondary:active { transform: translateY(0) scale(0.97); } .hero-float-card { background: rgba(255, 255, 255, 0.18); -webkit-backdrop-filter: var(--lq-blur-md); backdrop-filter: var(--lq-blur-md); border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.35); color: #ffffff; animation: lq-float 6s ease-in-out infinite; } .hero-float-card.pos-right { animation-delay: -3s; } @keyframes lq-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .hero-float-card .float-info strong { color: #fff; } .hero-float-card .float-info span { color: rgba(255, 255, 255, 0.65); } .hero-float-card .float-icon { background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.25); color: #fff; } .hero-photo-frame { border-radius: var(--lq-r-xl); box-shadow: 0 40px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.12); } @media (min-width: 769px) { /* Tilt only on tablet/desktop. Mobile uses fixed-height crop without transform (defined in customer.css). */ .hero-photo-frame { transform: rotate(-1.5deg); transition: transform var(--lq-d-4) var(--lq-ease); } .hero-visual:hover .hero-photo-frame { transform: rotate(0); } } .cart-qty-btn, .qty-btn { transition: background-color .15s ease; } .cart-qty-btn:hover, .qty-btn:hover { background: var(--matcha-pale); } .cart-qty-btn:active, .qty-btn:active { background: var(--cream-dark); } /* 10 · CART + CHECKOUT + AUTH + ORDER pages */ .cart-item, .checkout-section, .cart-summary, .checkout-summary, .order-card, .success-card, .auth-card { background: var(--lq-tint-strong); -webkit-backdrop-filter: var(--lq-blur-sm); backdrop-filter: var(--lq-blur-sm); border: 1px solid rgba(255, 255, 255, 0.55); border-radius: var(--lq-r-lg); box-shadow: var(--lq-sh-1), var(--lq-sh-inset); position: relative; isolation: isolate; } .cart-item::before, .checkout-section::before, .cart-summary::before, .checkout-summary::before, .success-card::before, .auth-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,255,255,0) 45%); border-radius: inherit; pointer-events: none; z-index: 0; } .cart-item > *, .checkout-section > *, .cart-summary > *, .checkout-summary > *, .success-card > *, .auth-card > * { position: relative; z-index: 1; } .payment-opt { background: rgba(255, 255, 255, 0.55); border: 1.5px solid rgba(0, 0, 0, 0.08); border-radius: var(--lq-r-md); transform: translateY(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .15s cubic-bezier(.32,.72,0,1), border-color .18s ease, background-color .18s ease; } .payment-opt:hover { background: rgba(255, 255, 255, 0.85); border-color: rgba(74, 124, 89, 0.3); transform: translateY(-1px); } .payment-opt.selected { background: rgba(74, 124, 89, 0.06); border-color: var(--matcha); box-shadow: 0 0 0 2px rgba(74, 124, 89, 0.1); } .payment-opt:active { transform: scale(0.98); transition-duration: .08s; } .step-num { background: linear-gradient(135deg, var(--matcha-light), var(--matcha-dark)); box-shadow: 0 3px 8px rgba(74, 124, 89, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3); } .qris-box { background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(255, 255, 255, 0.5); } .qris-box.show { animation: lq-fade-slide var(--lq-d-3) var(--lq-ease); } @keyframes lq-fade-slide { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* 11 · MENU FILTER PILLS + SEARCH */ .filter-btn { background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: var(--lq-r-pill); box-shadow: 0 1px 2px rgba(0,0,0,0.03); transform: translateY(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .15s cubic-bezier(.32,.72,0,1), background-color .18s ease, color .18s ease, border-color .18s ease; } .filter-btn:hover { background: rgba(74, 124, 89, 0.06); color: var(--matcha-dark); border-color: rgba(74, 124, 89, 0.2); } .filter-btn:active { transform: scale(0.95); transition-duration: .08s; } .filter-btn.active { background: var(--matcha); color: #fff; border-color: var(--matcha); box-shadow: 0 2px 8px rgba(74, 124, 89, 0.2); } .menu-search-input { background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: var(--lq-sh-inset); transition: background-color var(--lq-d-1) var(--lq-ease), border-color var(--lq-d-1) var(--lq-ease), box-shadow var(--lq-d-1) var(--lq-ease); } .menu-search-input:focus { background: #fff; border-color: var(--matcha); box-shadow: 0 0 0 3px rgba(74, 124, 89, 0.18); } /* 12 · ORDERS LIST */ .order-card-head { background: rgba(255, 255, 255, 0.4); border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .order-card-foot { background: rgba(255, 255, 255, 0.4); border-top: 1px solid rgba(0, 0, 0, 0.05); } .order-card { transform: translateY(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform var(--lq-d-2) var(--lq-ease); } .order-card:hover { transform: translateY(-2px); box-shadow: var(--lq-sh-2), var(--lq-sh-inset); } /* 13 · BADGES */ .badge { border: 1px solid rgba(0, 0, 0, 0.04); } .badge-pending { background: rgba(254, 243, 205, 0.9); } .badge-processing { background: rgba(207, 226, 255, 0.9); } .badge-completed { background: rgba(237, 245, 240, 0.9); } .badge-cancelled { background: rgba(253, 232, 230, 0.9); } /* 14 · ALERTS */ .alert { background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(0, 0, 0, 0.05); border-radius: var(--lq-r-md); box-shadow: var(--lq-sh-1), var(--lq-sh-inset); } .alert-success { border-left: 3px solid var(--matcha); } .alert-error { border-left: 3px solid var(--danger-strong); } .alert-info { border-left: 3px solid var(--info); } /* 15 · FOOTER */ .footer { background: radial-gradient(ellipse at 50% 0%, rgba(74, 124, 89, 0.35), transparent 50%), linear-gradient(180deg, #1e3d28 0%, #0e2417 100%); border-radius: var(--lq-r-xl) var(--lq-r-xl) 0 0; margin: 3rem auto 0; width: calc(100% - 2 * var(--lq-gap-x)); max-width: var(--lq-max); overflow: hidden; position: relative; } .footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent); } /* 16 · DETAIL PAGE */ .detail-meta { background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: var(--lq-r-md); } .detail-meta-item { border-right: 1px solid rgba(0, 0, 0, 0.06); } .detail-main-img { border-radius: var(--lq-r-xl); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12); } /* 17 · ADMIN */ .admin-sidebar { background: #1a3524; border-right: 1px solid rgba(255, 255, 255, 0.08); } .admin-topbar { background: #ffffff; border-bottom: 1px solid var(--admin-border, #e2ebe5); box-shadow: var(--lq-sh-1); position: sticky; top: 0; z-index: 100; } .sidebar-link { border-radius: var(--lq-r-sm); transition: background-color var(--lq-d-1) var(--lq-ease), color var(--lq-d-1) var(--lq-ease); } .sidebar-link:hover { background: rgba(255, 255, 255, 0.08); } .sidebar-link.active { background: rgba(74, 124, 89, 0.35); } .sidebar-link:active { opacity: 0.85; } .modal-overlay { background: rgba(0, 0, 0, 0.4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .modal-box, .confirm-box { background: var(--lq-tint-strong); -webkit-backdrop-filter: var(--lq-blur-lg); backdrop-filter: var(--lq-blur-lg); border: 1px solid rgba(255, 255, 255, 0.55); border-radius: var(--lq-r-lg); box-shadow: 0 40px 90px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.6); } /* Admin modals: solid surface — glass effect bikin warna belang/tidak rata */ .admin-body .modal-box, .admin-body .confirm-box { background: #ffffff; -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid var(--admin-border, #e2ebe5); box-shadow: 0 24px 60px rgba(15, 35, 24, 0.18); } /* 18.5 · STAGGER — disabled, View Transitions handles page enter */ /* 19 · TOAST */ .km-toast-host { position: fixed; top: calc(var(--nav-height, 70px) + 1rem); right: 1rem; left: auto; transform: none; z-index: 9999; display: flex; flex-direction: column; align-items: flex-end; gap: 0.55rem; max-width: min(380px, calc(100vw - 2rem)); width: max-content; pointer-events: none; } .km-toast { pointer-events: auto; position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.65rem; padding: 0.7rem 0.9rem 0.7rem 0.85rem; border-radius: 14px !important; border: 1px solid rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.88); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 12px 32px rgba(30, 45, 35, 0.18), 0 2px 6px rgba(30, 45, 35, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6); color: #1e2d23; font-size: 0.82rem; line-height: 1.45; min-height: 40px; min-width: 220px; opacity: 0; transform: translateX(12px) scale(0.96); transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.24s ease; touch-action: pan-y; cursor: grab; overflow: hidden; } .km-toast.is-visible { opacity: 1; transform: translateX(0) scale(1); } .km-toast.is-leaving { opacity: 0 !important; transform: translateX(12px) scale(0.95) !important; transition: opacity 0.22s ease, transform 0.22s ease; } .km-toast.is-dragging { transition: none; cursor: grabbing; } .km-toast-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(74, 124, 89, 0.14); color: #2d5a3d; } .km-toast-msg { min-width: 0; word-wrap: break-word; font-weight: 500; color: #1e2d23; } .km-toast-msg strong { font-weight: 600; } .km-toast-close { flex-shrink: 0; background: transparent; border: none; color: rgba(30, 45, 35, 0.55); cursor: pointer; font-size: 1.3rem; line-height: 1; padding: 0 0.25rem; margin-top: -0.1rem; border-radius: 6px; transition: background-color 0.18s ease, color 0.18s ease; } .km-toast-close:hover, .km-toast-close:focus { background: rgba(30, 45, 35, 0.08); color: #1e2d23; outline: none; } /* Variants */ .km-toast--success .km-toast-icon { background: rgba(74, 124, 89, 0.16); color: #2d5a3d; } .km-toast--error { background: rgba(253, 237, 235, 0.92); border-color: rgba(192, 57, 43, 0.35); color: #6b1d13; } .km-toast--error .km-toast-icon { background: rgba(192, 57, 43, 0.14); color: #9c2a1b; } .km-toast--error .km-toast-msg { color: #6b1d13; } .km-toast--error .km-toast-close { color: rgba(107, 29, 19, 0.6); } .km-toast--error .km-toast-close:hover { background: rgba(192, 57, 43, 0.1); color: #6b1d13; } .km-toast--info { background: rgba(235, 244, 253, 0.92); border-color: rgba(52, 152, 219, 0.35); color: #1e3a55; } .km-toast--info .km-toast-icon { background: rgba(52, 152, 219, 0.14); color: #1e5a8c; } .km-toast--info .km-toast-msg { color: #1e3a55; } /* Rich toast punya konten HTML (multi-line), beri margin atas icon berbeda */ .km-toast--rich .km-toast-msg { font-size: 0.8rem; } .km-toast--rich .km-toast-msg br { content: ""; display: block; margin: 0.1rem 0; } @media (max-width: 640px) { .km-toast-host { top: calc(var(--nav-height, 70px) + 0.5rem); left: 0.75rem; right: 0.75rem; transform: none; align-items: stretch; max-width: none; width: auto; } } /* 19.5 · CUSTOMER CONFIRM DIALOG */ .km-confirm-overlay { position: fixed; inset: 0; background: rgba(15, 35, 24, 0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 1rem; opacity: 0; transition: opacity 0.18s ease; } .km-confirm-overlay.is-open { opacity: 1; } .km-confirm-box { background: #ffffff; border-radius: 16px; width: 100%; max-width: 380px; box-shadow: 0 24px 60px rgba(15, 35, 24, 0.25); overflow: hidden; transform: translateY(8px) scale(0.98); transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1); } .km-confirm-overlay.is-open .km-confirm-box { transform: translateY(0) scale(1); } .km-confirm-head { padding: 1.1rem 1.25rem 0.5rem; } .km-confirm-title { margin: 0; font-size: 1rem; font-weight: 700; color: #1a2e21; letter-spacing: -0.01em; } .km-confirm-body { padding: 0 1.25rem 1.1rem; } .km-confirm-msg { margin: 0; font-size: 0.875rem; color: #5f7367; line-height: 1.5; } .km-confirm-foot { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 0.85rem 1.25rem; background: #f8faf8; border-top: 1px solid #e2ebe5; } .km-confirm-foot .btn { min-width: 88px; } /* 20 · FALLBACKS (no backdrop-filter support) */ @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .navbar, .nav-mobile, .card, .feature-card, .product-card, .team-card, .cart-item, .checkout-section, .cart-summary, .checkout-summary, .order-card, .success-card, .auth-card, .page-header, .admin-sidebar, .admin-topbar, .modal-box, .confirm-box, .filter-btn, .menu-search-input, .payment-opt, .form-control { background: rgba(255, 255, 255, 0.96); } .admin-sidebar { background: #1e3d28; } .hero-float-card { background: rgba(30, 45, 35, 0.9); } .hero-btn-secondary { background: rgba(0, 0, 0, 0.25); } } /* 21 · RESPONSIVE — hover-lift disabled via @media(hover:none) so tablet+mouse still gets hover effects at 768px. */ @media (max-width: 1023px) { .footer { margin-top: 2.5rem; border-radius: var(--lq-r-lg) var(--lq-r-lg) 0 0; } .hero { border-radius: var(--lq-r-lg); } } @media (max-width: 768px) { :root { --lq-gap-x: 0.5rem; --lq-gap-y: 0.5rem; } .navbar { border-radius: var(--lq-r-lg); -webkit-backdrop-filter: var(--lq-blur-sm); backdrop-filter: var(--lq-blur-sm); } .hero { border-radius: var(--lq-r-lg); } .page-header { margin-top: 0.75rem; padding: 2.5rem 0 2rem; } .footer { border-radius: var(--lq-r-lg) var(--lq-r-lg) 0 0; padding: 3rem 0 1.75rem; } .btn { min-height: 44px; } .filter-btn { min-height: 40px; } } @media (max-width: 480px) { .page-header h1 { font-size: clamp(1.5rem, 7vw, 2rem); } /* Hero layout (padding, grid, visual sizing) lives in customer.css. liquid.css only handles visual polish (shadow, glass, gradient, border). */ .product-card, .feature-card, .team-card { border-radius: var(--lq-r-md); } .cart-item { padding: 1rem; gap: 0.75rem; } .checkout-section { padding: 1.25rem; } .auth-card { padding: 1.75rem 1.5rem; } } @media (min-width: 1440px) { :root { --lq-max: 1340px; } .container, .nav-container { max-width: 1340px; } } /* Hero near-full-width on desktop so the right-side gutter doesn't read as an empty strip next to the scrollbar. Keeps rounded corners. */ @media (min-width: 1025px) { .hero { width: calc(100% - 1rem); max-width: none; } } /* Touch devices — disable hover effects regardless of width */ @media (hover: none) { .product-card:hover, .feature-card:hover, .team-card:hover, .order-card:hover { transform: none; box-shadow: var(--lq-sh-1), var(--lq-sh-inset); border-color: rgba(255, 255, 255, 0.55); } /* Hero photo hover disabled on touch — mobile has no rotate transform. On tablet touch (≥769px) the idle tilt stays, just no hover reset. */ .nav-cart-btn:hover { transform: none; } .filter-btn:hover { transform: none; } .btn-add-cart:hover { transform: none; } .btn:hover { transform: none; } }