/* sandwich.shop — Storefront Styles Aesthetic: Classic American deli, modernized. Warm, bold, food-forward. Colors: Deep forest green + cream + mustard gold Typography: Display serif for headers, clean sans for body */ /* Font loading: add this to the of storefront pages only: */ /* ── Design Tokens (scoped to storefront pages) ── */ .storefront-page { --sf-green-900: #1a2f1e; --sf-green-800: #1e3a22; --sf-green-600: #2d5a35; --sf-green-400: #4a8a55; --sf-green-100: #e8f2e9; --sf-mustard: #d4a017; --sf-mustard-light: #f5e6b0; --sf-cream: #faf7f0; --sf-cream-dark: #f0ebe0; --sf-brown: #6b4f35; --sf-text-primary: #1a1a1a; --sf-text-muted: #666; --sf-white: #ffffff; --sf-shadow-sm: 0 2px 8px rgba(0,0,0,0.08); --sf-shadow-md: 0 4px 16px rgba(0,0,0,0.12); --sf-shadow-lg: 0 8px 32px rgba(0,0,0,0.18); --sf-radius: 12px; --sf-radius-sm: 8px; --sf-nav-height: 64px; --sf-font-display: 'Playfair Display', Georgia, serif; --sf-font-body: 'DM Sans', system-ui, sans-serif; } /* ── Base (scoped — no global reset) ─────────────── */ .storefront-page { font-family: var(--sf-font-body); line-height: 1.6; } .storefront-page .container { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; } /* ── Storefront Nav ─────────────────────────────── */ .storefront-nav { position: sticky; top: 0; z-index: 100; background: var(--sf-green-900); height: var(--sf-nav-height); transition: box-shadow 0.2s ease, background 0.2s ease; } .storefront-nav.scrolled { background: var(--sf-green-900); box-shadow: var(--sf-shadow-md); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; gap: 1rem; } .nav-brand { display: flex; align-items: center; text-decoration: none; } .nav-logo { height: 32px; } .nav-categories { display: flex; align-items: center; gap: 0.25rem; flex: 1; justify-content: center; } .nav-cat-link { padding: 0.375rem 0.875rem; border-radius: 20px; color: rgba(255,255,255,0.75); font-size: 0.875rem; font-weight: 500; text-decoration: none; transition: all 0.15s ease; white-space: nowrap; } .nav-cat-link:hover { color: white; background: rgba(255,255,255,0.1); } .nav-cat-link.active { color: var(--sf-green-900); background: var(--sf-mustard); font-weight: 600; } /* ── Cart FAB ───────────────────────────────────── */ .cart-fab { display: flex; align-items: center; gap: 0.5rem; background: var(--sf-mustard); color: var(--sf-green-900); border: none; border-radius: 24px; padding: 0.5rem 1rem; font-family: var(--sf-font-body); font-weight: 700; font-size: 0.875rem; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; min-width: 48px; justify-content: center; } .cart-fab:hover { background: #c49012; transform: scale(1.02); } .cart-fab.has-items { box-shadow: 0 0 0 3px rgba(212,160,23,0.35); } .cart-fab-icon { font-size: 1.1rem; } .cart-fab-count { background: var(--sf-green-900); color: white; border-radius: 10px; padding: 0 6px; font-size: 0.75rem; } .cart-fab-total { font-size: 0.875rem; } /* ── Hero ───────────────────────────────────────── */ .shop-hero { position: relative; min-height: 380px; background-size: cover; background-position: center; background-color: var(--sf-green-800); display: flex; align-items: flex-end; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(26,47,30,0.3) 0%, rgba(26,47,30,0.85) 100% ); } .hero-content { position: relative; z-index: 1; padding: 2rem 1.5rem 2.5rem; width: 100%; max-width: 1100px; margin: 0 auto; } .shop-logo-wrap { margin-bottom: 0.75rem; } .shop-logo { height: 72px; width: auto; object-fit: contain; filter: brightness(0) invert(1); } .shop-name { font-family: var(--sf-font-display); font-size: clamp(2rem, 5vw, 3rem); font-weight: 900; color: white; line-height: 1.1; margin-bottom: 0.25rem; } .shop-tagline { font-size: 1.1rem; color: var(--sf-mustard-light); margin-bottom: 1rem; font-style: italic; } .shop-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; color: rgba(255,255,255,0.85); font-size: 0.9rem; margin-bottom: 0.75rem; } .shop-separator { opacity: 0.4; } .shop-rating { color: white; font-weight: 500; } .shop-status.open { color: #7dffaa; font-weight: 600; } .shop-status.closed { color: #ffaaaa; font-weight: 600; } .shop-hours { display: flex; gap: 1.5rem; flex-wrap: wrap; } .hours-row { color: rgba(255,255,255,0.7); font-size: 0.85rem; } .hours-row strong { color: white; margin-right: 0.35rem; } /* ── About Strip ────────────────────────────────── */ .about-strip { background: var(--sf-green-900); padding: 1.25rem 0; border-bottom: 3px solid var(--sf-mustard); } .about-strip .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .about-text { color: rgba(255,255,255,0.8); font-size: 0.9rem; max-width: 680px; font-style: italic; } .about-phone { color: var(--sf-mustard); font-weight: 600; text-decoration: none; white-space: nowrap; font-size: 0.95rem; } .about-phone:hover { text-decoration: underline; } /* ── Mobile Category Scroll ─────────────────────── */ .mobile-cats { display: none; overflow-x: auto; padding: 0.875rem 1rem; gap: 0.5rem; background: white; border-bottom: 1px solid var(--sf-cream-dark); scrollbar-width: none; -webkit-overflow-scrolling: touch; } .mobile-cats::-webkit-scrollbar { display: none; } .mobile-cat-btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 1rem; border-radius: 20px; border: 1.5px solid var(--sf-cream-dark); background: white; font-family: var(--sf-font-body); font-size: 0.85rem; font-weight: 500; white-space: nowrap; cursor: pointer; transition: all 0.15s ease; color: var(--sf-text-primary); } .mobile-cat-btn.active { background: var(--sf-green-900); color: white; border-color: var(--sf-green-900); } /* ── Menu Main ──────────────────────────────────── */ .storefront-main { padding: 2.5rem 0 4rem; } .menu-section { margin-bottom: 3rem; scroll-margin-top: calc(var(--sf-nav-height) + 16px); } .menu-section-header { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 1.25rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--sf-cream-dark); } .menu-section-icon { font-size: 1.5rem; } .menu-section-title { font-family: var(--sf-font-display); font-size: 1.625rem; font-weight: 700; color: var(--sf-green-900); flex: 1; } .menu-section-count { font-size: 0.8rem; color: var(--sf-text-muted); background: var(--sf-cream-dark); padding: 0.2rem 0.625rem; border-radius: 12px; } /* ── Menu Grid ──────────────────────────────────── */ .menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; } /* ── Menu Item Card ─────────────────────────────── */ .menu-item-card { background: white; border-radius: var(--sf-radius); overflow: hidden; box-shadow: var(--sf-shadow-sm); transition: box-shadow 0.2s ease, transform 0.2s ease; display: flex; flex-direction: column; border: 1.5px solid transparent; } .menu-item-card:hover { box-shadow: var(--sf-shadow-md); transform: translateY(-2px); } .menu-item-card.added { border-color: var(--sf-green-400); } .menu-item-image-wrap { position: relative; aspect-ratio: 16/9; background: var(--sf-cream-dark); overflow: hidden; } .menu-item-image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .menu-item-card:hover .menu-item-image { transform: scale(1.04); } .menu-item-image-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; background: var(--sf-cream-dark); } .menu-item-badge { position: absolute; top: 10px; border-radius: 12px; font-size: 0.72rem; font-weight: 700; padding: 0.2rem 0.6rem; letter-spacing: 0.02em; } .menu-item-badge.popular { left: 10px; background: var(--sf-mustard); color: var(--sf-green-900); } .menu-item-badge.vegetarian { right: 10px; background: #e8f5e9; color: #2e7d32; } .menu-item-body { padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; } .menu-item-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; } .menu-item-name { font-family: var(--sf-font-display); font-size: 1.05rem; font-weight: 700; color: var(--sf-green-900); line-height: 1.2; } .menu-item-price { font-size: 1.05rem; font-weight: 700; color: var(--sf-mustard); white-space: nowrap; } .menu-item-description { font-size: 0.85rem; color: var(--sf-text-muted); line-height: 1.5; flex: 1; } .menu-item-add-btn { margin-top: 0.5rem; width: 100%; } /* ── Cart Drawer ────────────────────────────────── */ .cart-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; animation: fadeIn 0.2s ease; } .cart-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 380px; max-width: 100vw; background: white; z-index: 201; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: var(--sf-shadow-lg); } .cart-drawer.open { transform: translateX(0); } .cart-header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--sf-cream-dark); background: var(--sf-green-900); color: white; } .cart-header h3 { font-family: var(--sf-font-display); font-size: 1.25rem; font-weight: 700; } .cart-close-btn { color: white !important; } .cart-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; gap: 0.5rem; color: var(--sf-text-muted); text-align: center; padding: 2rem; } .cart-empty-icon { font-size: 3rem; } .cart-empty p { font-size: 1rem; font-weight: 500; color: var(--sf-text-primary); } .cart-empty small { font-size: 0.85rem; } .cart-items { flex: 1; overflow-y: auto; padding: 1rem 1.5rem; display: flex; flex-direction: column; gap: 0.875rem; } .cart-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--sf-cream-dark); } .cart-item-info { display: flex; flex-direction: column; gap: 0.2rem; flex: 1; min-width: 0; } .cart-item-name { font-size: 0.9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cart-item-price { font-size: 0.85rem; color: var(--sf-text-muted); } .cart-item-controls { display: flex; align-items: center; gap: 0.5rem; } .cart-item-qty { font-weight: 700; font-size: 1rem; min-width: 1.5rem; text-align: center; } .cart-summary { padding: 1rem 1.5rem; border-top: 1px solid var(--sf-cream-dark); display: flex; flex-direction: column; gap: 0.5rem; } .cart-summary-row { display: flex; justify-content: space-between; font-size: 0.9rem; color: var(--sf-text-muted); } .cart-summary-row.platform-fee { font-size: 0.82rem; } .cart-summary-row.total { font-weight: 700; font-size: 1.05rem; color: var(--sf-text-primary); margin-top: 0.25rem; } .cart-summary + rz-button, .cart-summary + .rz-button { margin: 0 1.5rem 0.75rem; } .cart-disclaimer { font-size: 0.75rem; color: var(--sf-text-muted); text-align: center; padding: 0 1.5rem 1.5rem; } /* ── Footer ─────────────────────────────────────── */ .storefront-footer { background: var(--sf-green-900); color: rgba(255,255,255,0.6); text-align: center; padding: 1.5rem; font-size: 0.85rem; } .storefront-footer a { color: var(--sf-mustard); text-decoration: none; } .storefront-footer a:hover { text-decoration: underline; } .footer-fee { margin-top: 0.25rem; font-size: 0.78rem; opacity: 0.6; } /* ── Responsive ─────────────────────────────────── */ .hide-mobile { display: flex; } .show-mobile { display: none; } @media (max-width: 768px) { .hide-mobile { display: none !important; } .show-mobile { display: flex !important; } .menu-grid { grid-template-columns: 1fr; } .shop-hero { min-height: 300px; } .about-strip .container { flex-direction: column; align-items: flex-start; } .cart-drawer { width: 100vw; } } /* ── Animations ─────────────────────────────────── */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* ── Modifier Dialog ─────────────────────────────── */ .modifier-dialog-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 300; display: flex; align-items: flex-end; justify-content: center; animation: fadeIn 0.15s ease; } @media (min-width: 640px) { .modifier-dialog-backdrop { align-items: center; } } .modifier-dialog-container { background: white; width: 100%; max-width: 560px; max-height: 90vh; border-radius: var(--sf-radius) var(--sf-radius) 0 0; overflow-y: auto; box-shadow: var(--sf-shadow-lg); } @media (min-width: 640px) { .modifier-dialog-container { border-radius: var(--sf-radius); max-height: 85vh; } } .modifier-dialog-image { width: 100%; aspect-ratio: 16/7; overflow: hidden; background: var(--sf-cream-dark); } .modifier-dialog-image img { width: 100%; height: 100%; object-fit: cover; } .modifier-dialog-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1.25rem 1.5rem 0; } .modifier-dialog-title { font-family: var(--sf-font-display); font-size: 1.375rem; font-weight: 700; color: var(--sf-green-900); line-height: 1.2; } .modifier-dialog-description { font-size: 0.875rem; color: var(--sf-text-muted); margin-top: 0.3rem; line-height: 1.5; } .modifier-dialog-base-price { font-size: 1.25rem; font-weight: 700; color: var(--sf-mustard); white-space: nowrap; } /* ── Modifier Groups ────────────────────────────── */ .modifier-groups { padding: 0 1.5rem; display: flex; flex-direction: column; gap: 0; } .modifier-group { padding: 1.125rem 0; border-bottom: 1px solid var(--sf-cream-dark); } .modifier-group.has-error .modifier-group-name { color: #c62828; } .modifier-group-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 0.75rem; gap: 0.5rem; } .modifier-group-name { font-size: 0.95rem; font-weight: 700; color: var(--sf-text-primary); } .modifier-required-badge { display: inline-block; font-size: 0.7rem; font-weight: 600; background: var(--sf-green-100); color: var(--sf-green-600); padding: 0.15rem 0.5rem; border-radius: 10px; margin-left: 0.5rem; vertical-align: middle; } .modifier-hint { font-size: 0.78rem; color: var(--sf-text-muted); margin-left: 0.5rem; } .modifier-error-msg { font-size: 0.78rem; color: #c62828; font-weight: 500; } /* ── Modifier Options ───────────────────────────── */ .modifier-options { display: flex; flex-direction: column; gap: 0.375rem; } .modifier-option { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.875rem; border: 1.5px solid var(--sf-cream-dark); border-radius: var(--sf-radius-sm); background: white; cursor: pointer; text-align: left; font-family: var(--sf-font-body); font-size: 0.9rem; color: var(--sf-text-primary); transition: all 0.12s ease; width: 100%; } .modifier-option:hover { border-color: var(--sf-green-400); background: var(--sf-green-100); } .modifier-option.selected { border-color: var(--sf-green-600); background: var(--sf-green-100); font-weight: 500; } .modifier-option-indicator { flex-shrink: 0; } .radio, .checkbox { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 2px solid #ccc; transition: all 0.12s ease; } .radio { border-radius: 50%; } .checkbox { border-radius: 4px; font-size: 0.7rem; font-weight: 700; } .radio.checked { border-color: var(--sf-green-600); background: var(--sf-green-600); box-shadow: inset 0 0 0 3px white; } .checkbox.checked { border-color: var(--sf-green-600); background: var(--sf-green-600); color: white; } .modifier-option-name { flex: 1; } .modifier-option-price { font-size: 0.82rem; color: var(--sf-mustard); font-weight: 600; } /* ── Special Instructions ───────────────────────── */ .modifier-special-instructions { padding: 1rem 1.5rem; border-top: 1px solid var(--sf-cream-dark); } .modifier-special-instructions label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--sf-text-primary); } .modifier-special-instructions .optional { font-weight: 400; color: var(--sf-text-muted); } /* ── Modifier Footer ────────────────────────────── */ .modifier-footer { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.5rem 1.5rem; border-top: 1px solid var(--sf-cream-dark); background: white; position: sticky; bottom: 0; } .modifier-qty-control { display: flex; align-items: center; gap: 0.5rem; border: 1.5px solid var(--sf-cream-dark); border-radius: var(--sf-radius-sm); padding: 0.25rem; } .modifier-qty { font-size: 1rem; font-weight: 700; min-width: 1.5rem; text-align: center; } /* ── Menu Item Modifier Hint ────────────────────── */ .menu-item-modifier-hint { font-size: 0.75rem; color: var(--sf-text-muted); margin-top: -0.25rem; font-style: italic; }