/* SOHO Cafe - Dark Theme Styles */ :root {/* Dark theme (default) */ --bg-primary:#0a0a0a;--bg-secondary:#1a1a1a;--bg-card:#242424;--bg-hover:#2d2d2d;--text-primary:#ffffff;--text-secondary:#a0a0a0;--accent-red:#e53935;--accent-red-hover:#c62828;--accent-gold:#ffc107;--border-color:#333333;--shadow:0 4px 20px rgba(0,0,0,0.5);--radius:12px;--radius-sm:8px;} [data-theme="light"] {--bg-primary:#f5f5f5;--bg-secondary:#ffffff;--bg-card:#ffffff;--bg-hover:#f0f0f0;--text-primary:#1a1a1a;--text-secondary:#666666;--border-color:#e0e0e0;--shadow:0 4px 20px rgba(0,0,0,0.1);} * {margin:0;padding:0;box-sizing:border-box;} body {font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,sans-serif;background-color:var(--bg-primary);color:var(--text-primary);min-height:100vh;padding-bottom:140px;transition:background-color 0.3s,color 0.3s;} /* Header */ .header {position:fixed;top:0;left:0;right:0;height:60px;background-color:var(--bg-secondary);display:flex;align-items:center;justify-content:space-between;padding:0 16px;z-index:100;box-shadow:var(--shadow);} .menu-btn {background:none;border:none;cursor:pointer;padding:8px;display:flex;flex-direction:column;gap:5px;} .menu-btn span {display:block;width:24px;height:2px;background-color:var(--text-primary);transition:0.3s;} .logo {font-size:20px;font-weight:800;letter-spacing:2px;} .logo-red {color:var(--accent-red);} .logo-white {color:var(--text-primary);} .theme-toggle {background:none;border:none;font-size:20px;cursor:pointer;padding:8px;} /* Search */ .search-container {position:fixed;top:60px;left:0;right:0;padding:12px 16px;background-color:var(--bg-primary);z-index:99;display:flex;gap:8px;} .search-input {flex:1;padding:12px 16px;border:1px solid var(--border-color);border-radius:var(--radius-sm);background-color:var(--bg-secondary);color:var(--text-primary);font-size:16px;outline:none;} .search-input::placeholder {color:var(--text-secondary);} .search-btn {background-color:var(--accent-red);border:none;color:white;padding:12px 16px;border-radius:var(--radius-sm);cursor:pointer;font-size:16px;} /* Categories Scroll */ .categories-scroll {position:fixed;top:128px;left:0;right:0;display:flex;gap:6px;padding:4px 16px;overflow-x:auto;scrollbar-width:none;background-color:var(--bg-primary);z-index:98;-webkit-overflow-scrolling:touch;} .categories-scroll::-webkit-scrollbar {display:none;} .category-chip {flex-shrink:0;padding:10px 20px;background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:24px;color:var(--text-primary);font-size:14px;font-weight:500;cursor:pointer;white-space:nowrap;transition:all 0.2s;} .category-chip.active {background-color:var(--accent-red);border-color:var(--accent-red);} /* Main Content */ .main-content {margin-top:5px;padding:4px 16px 40px;} .category-section {margin-bottom:16px;} .category-title {font-size:22px;font-weight:700;margin-bottom:16px;padding-bottom:8px;border-bottom:2px solid var(--accent-red);display:inline-block;} .products-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;margin-bottom:40px;} /* Product Card */ .product-card {background-color:var(--bg-card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);cursor:pointer;transition:transform 0.2s;} .product-card:active {transform:scale(0.98);} .product-image {position:relative;width:100%;aspect-ratio:1;overflow:hidden;} .product-image img {width:100%;height:100%;object-fit:cover;} .product-badge {position:absolute;top:8px;left:8px;padding:4px 10px;border-radius:12px;font-size:10px;font-weight:700;text-transform:uppercase;} .badge-new {background-color:var(--accent-gold);color:#000;} .badge-spicy {background-color:#ff5722;color:#fff;} .product-info {padding:12px;} .product-name {font-size:14px;font-weight:600;margin-bottom:4px;line-height:1.3;} .product-weight {font-size:12px;color:var(--text-secondary);} .product-price {margin-top:8px;display:flex;align-items:center;justify-content:space-between;} .price-value {font-size:16px;font-weight:700;color:var(--accent-red);} .add-btn {width:32px;height:32px;border-radius:50%;background-color:var(--accent-red);border:none;color:white;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;} /* Sidebar */ .sidebar {position:fixed;top:0;left:-280px;width:280px;height:100vh;background-color:var(--bg-secondary);z-index:200;transition:left 0.3s ease;box-shadow:var(--shadow);} .sidebar.open {left:0;} .sidebar-header {padding:20px;border-bottom:1px solid var(--border-color);font-size:24px;font-weight:800;} .sidebar-menu {list-style:none;padding:8px 0;} .sidebar-menu li {padding:14px 20px;cursor:pointer;border-left:3px solid transparent;transition:all 0.2s;} .sidebar-menu li:hover,.sidebar-menu li.active {background-color:var(--bg-hover);border-left-color:var(--accent-red);} .overlay {position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.7);z-index:150;opacity:0;visibility:hidden;transition:all 0.3s;} .overlay.active {opacity:1;visibility:visible;} /* Modal */ .modal {position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.9);z-index:300;display:flex;align-items:flex-end;opacity:0;visibility:hidden;transition:all 0.3s;pointer-events:none;} .modal.active {opacity:1;visibility:visible;pointer-events:auto;} .modal-content {width:100%;background-color:var(--bg-secondary);border-radius:var(--radius) var(--radius) 0 0;max-height:90vh;overflow-y:auto;transform:translateY(100%);transition:transform 0.3s;position:relative;z-index:301;pointer-events:auto;} .modal.active .modal-content {transform:translateY(0);} .modal-close {position:absolute;top:16px;right:16px;background:rgba(0,0,0,0.5);border:none;color:white;width:36px;height:36px;border-radius:50%;font-size:18px;cursor:pointer;z-index:10;} .modal-image {width:100%;aspect-ratio:4/3;} .modal-image img {width:100%;height:100%;object-fit:cover;} .modal-info {padding:20px;} .modal-info h2 {font-size:22px;margin-bottom:8px;} .modal-composition {color:var(--text-secondary);font-size:14px;line-height:1.5;margin-bottom:16px;} .modal-variants {display:flex;flex-direction:column;gap:8px;margin-bottom:20px;} .variant-option {padding:12px 16px;border:1px solid var(--border-color);border-radius:var(--radius-sm);cursor:pointer;display:flex;justify-content:space-between;} .variant-option.selected {border-color:var(--accent-red);background-color:rgba(229,57,53,0.1);} .modal-footer {display:flex;align-items:center;gap:16px;padding-top:16px;border-top:1px solid var(--border-color);position:relative;z-index:302;} .quantity-control {display:flex;align-items:center;gap:16px;position:relative;z-index:303;} .qty-btn {width:40px;height:40px;border-radius:50%;border:1px solid var(--border-color);background:var(--bg-card);color:var(--text-primary);font-size:20px;cursor:pointer;position:relative;z-index:304;touch-action:manipulation;} .qty-value {font-size:18px;font-weight:600;min-width:30px;text-align:center;} .add-to-cart {flex:1;padding:14px 24px;background-color:var(--accent-red);border:none;border-radius:var(--radius-sm);color:white;font-size:16px;font-weight:600;cursor:pointer;position:relative;z-index:301;pointer-events:auto;-webkit-tap-highlight-color:transparent;touch-action:manipulation;min-height:48px;} /* Cart */ .cart-container {position:fixed;top:0;right:-100%;width:100%;max-width:400px;height:100vh;background-color:var(--bg-secondary);z-index:250;transition:right 0.3s;display:flex;flex-direction:column;pointer-events:none;}
.cart-container.open {pointer-events:auto;} .cart-container.open {right:0;} .cart-header {padding:20px;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center;} .cart-header h2 {font-size:20px;} .close-cart {background:none;border:none;color:var(--text-primary);font-size:24px;cursor:pointer;} .cart-items {flex:1;overflow-y:auto;padding:16px;} .empty-cart {text-align:center;color:var(--text-secondary);padding:40px 0;} .cart-item {display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--border-color);} .cart-item-image {width:60px;height:60px;border-radius:var(--radius-sm);object-fit:cover;} .cart-item-info {flex:1;} .cart-item-name {font-weight:600;margin-bottom:4px;} .cart-item-variant {font-size:12px;color:var(--text-secondary);} .cart-item-price {color:var(--accent-red);font-weight:600;} .cart-footer {padding:16px;border-top:1px solid var(--border-color);background-color:var(--bg-secondary);position:relative;z-index:252;} .cart-total {display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;font-size:18px;} .total-price {font-weight:700;color:var(--accent-red);font-size:22px;} .checkout-btn {display:block;width:100%;padding:16px;background-color:var(--accent-red);border:none;border-radius:var(--radius-sm);color:white;font-size:16px;font-weight:600;cursor:pointer;text-align:center;text-decoration:none;position:relative;z-index:251;pointer-events:auto;-webkit-tap-highlight-color:transparent;touch-action:manipulation;min-height:48px;} /* Bottom Navigation */ .bottom-nav {position:fixed;bottom:0;left:0;right:0;height:70px;background-color:var(--bg-secondary);display:flex;justify-content:space-around;align-items:center;box-shadow:0 -4px 20px rgba(0,0,0,0.3);z-index:100;} .nav-item {display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;color:var(--text-secondary);font-size:12px;position:relative;} .nav-item.active {color:var(--accent-red);} .nav-icon {font-size:22px;} .cart-badge {position:absolute;top:-4px;right:-4px;background-color:var(--accent-red);color:white;font-size:10px;padding:2px 6px;border-radius:10px;min-width:18px;text-align:center;} /* Loading */ .loading {position:fixed;top:0;left:0;right:0;bottom:0;background-color:var(--bg-primary);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:500;} .spinner {width:50px;height:50px;border:4px solid var(--border-color);border-top-color:var(--accent-red);border-radius:50%;animation:spin 1s linear infinite;} @keyframes spin {to {transform:rotate(360deg);}} .loading p {margin-top:16px;color:var(--text-secondary);} /* Toast */ .toast {position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(100px);background-color:var(--bg-card);color:var(--text-primary);padding:12px 24px;border-radius:var(--radius-sm);box-shadow:var(--shadow);z-index:400;opacity:0;transition:all 0.3s;} .toast.show {transform:translateX(-50%) translateY(0);opacity:1;} /* Search Results */ .search-results {position:fixed;top:60px;left:0;right:0;bottom:0;background-color:var(--bg-primary);z-index:95;overflow-y:auto;padding:16px;} .search-header {display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;} .close-search {background:none;border:none;color:var(--text-primary);font-size:24px;cursor:pointer;} /* Responsive */ @media (min-width:768px) {.products-grid {grid-template-columns:repeat(auto-fill,minmax(200px,1fr));} .main-content {max-width:1200px;margin-left:auto;margin-right:auto;} /* Modal for desktop - centered and limited size */ .modal {align-items:center;justify-content:center;} .modal-content {max-width:600px;max-height:80vh;border-radius:var(--radius);transform:scale(0.9);} .modal.active .modal-content {transform:scale(1);} .modal-image {max-height:300px;}} /* Install Prompt */ .install-prompt {position:fixed;bottom:80px;left:16px;right:16px;background-color:var(--bg-card);padding:16px;border-radius:var(--radius);box-shadow:var(--shadow);z-index:200;display:none;} .install-prompt.show {display:block;} /* Footer */ .main-footer {background-color:var(--bg-secondary);border-top:1px solid var(--border-color);padding:40px 16px 160px;margin-top:40px;} .footer-content {max-width:600px;margin:0 auto;text-align:center;} .footer-logo {font-size:24px;font-weight:900;margin-bottom:24px;} .footer-logo .logo-red {color:var(--accent-red);} .footer-logo .logo-white {color:var(--text-primary);} .footer-links {display:flex;justify-content:center;flex-wrap:wrap;gap:16px;margin-bottom:24px;} .footer-links a {color:var(--text-secondary);text-decoration:none;font-size:14px;transition:color 0.2s;} .footer-links a:hover {color:var(--accent-red);} .footer-legal {padding:20px;background-color:var(--bg-card);border-radius:var(--radius);margin-bottom:20px;} .footer-legal p {font-size:13px;color:var(--text-secondary);line-height:1.6;margin-bottom:4px;} .footer-legal p:last-child {margin-bottom:0;} .footer-bottom {font-size:12px;color:var(--text-secondary);} /* Favorite Button */ .favorite-btn {position:absolute;top:8px;right:8px;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,0.5);backdrop-filter:blur(4px);border:none;font-size:18px;cursor:pointer;z-index:10;display:flex;align-items:center;justify-content:center;transition:all 0.2s;color:white;} .favorite-btn:hover {background:rgba(0,0,0,0.7);transform:scale(1.1);} .favorite-btn.active {background:rgba(233,69,96,0.9);} /* Phone Button */ .phone-btn {position:fixed;bottom:90px;right:16px;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#4caf50,#45a049);display:flex;align-items:center;justify-content:center;font-size:28px;box-shadow:0 4px 15px rgba(76,175,80,0.4);z-index:90;text-decoration:none;transition:transform 0.2s;animation:phone-pulse 2s infinite;} .phone-btn:active {transform:scale(0.95);} @keyframes phone-pulse {0%,100% {box-shadow:0 4px 15px rgba(76,175,80,0.4);} 50% {box-shadow:0 4px 25px rgba(76,175,80,0.6);}} /* Product Card */ .product-card {position:relative;}