/* Brew42 Premium UI - Public Ordering */ /* Fonts */ /* Fonts loaded via in for performance */ :root{ --font-sans: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; --font-serif: "Playfair Display", Georgia, "Times New Roman", serif; --bg: #0b0f14; --surface: rgba(255,255,255,0.86); --surface-strong: rgba(255,255,255,0.96); --text: #0b1220; --muted: rgba(11,18,32,0.62); --border: rgba(11,18,32,0.10); --shadow: 0 14px 34px rgba(0,0,0,0.16); /* “5-star” accent: champagne gold + emerald */ --gold: #b08d57; --gold-2: #d6bd7a; --emerald: #16a34a; --emerald-ink: #052e16; --soft: rgba(176, 141, 87, 0.10); --radius: 22px; --radius-sm: 16px; --focus: 0 0 0 4px rgba(176,141,87,0.22); } *{ box-sizing:border-box; } html, body{ height:100%; } body{ margin:0; font-family: var(--font-sans); color: var(--text); background: #0b0f14; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Page wrapper gets the photo background through inline style in index.php */ .page{ max-width: 1040px; margin: 0 auto; padding: 18px 16px 150px; } /* Glass cards */ header, .hero, header{ display:flex; flex-wrap:wrap; justify-content:space-between; gap: 14px; margin-bottom: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 16px; box-shadow: var(--shadow); align-items:center; position: relative; overflow:hidden; } header::before{ content:""; position:absolute; inset:-2px; background: radial-gradient(900px 220px at 10% 0%, rgba(214,189,122,0.28), transparent 60%), radial-gradient(900px 260px at 90% 10%, rgba(22,163,74,0.14), transparent 55%), radial-gradient(700px 260px at 50% 110%, rgba(176,141,87,0.18), transparent 60%); pointer-events:none; } header > *{ position: relative; } .brandWrap{ display:flex; gap:14px; align-items:center; min-width:0; } .logo{ width:auto; height:48px; max-width:110px; object-fit:contain; filter: drop-shadow(0 10px 18px rgba(0,0,0,0.16)); } .brand{ font-family: var(--font-serif); font-weight: 800; letter-spacing: 0.10em; font-size: 1.55rem; text-transform: uppercase; line-height: 1; } .subtitle{ margin-top: 8px; color: var(--muted); font-size: 0.92rem; line-height: 1.45; } .info{ text-align:right; color: var(--muted); font-size: 0.86rem; line-height: 1.55; } .info a{ text-decoration: underline; text-underline-offset: 3px; text-decoration-style: dotted; } @media (max-width: 640px){ .info{ text-align:left; width:100%; } .logo{ height:44px; } } .hero{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); display:flex; flex-wrap:wrap; justify-content:space-between; gap: 12px; align-items:center; margin-bottom: 12px; position: relative; overflow:hidden; } .hero::after{ content:""; position:absolute; inset:-1px; background: linear-gradient(135deg, rgba(176,141,87,0.16), transparent 35%), linear-gradient(315deg, rgba(22,163,74,0.10), transparent 40%); pointer-events:none; } .hero > *{ position: relative; } .hero h2{ margin:0 0 6px 0; font-size: 1.1rem; font-weight: 950; letter-spacing: 0.01em; } .hero p{ margin:0; color: var(--muted); font-size: 0.92rem; line-height: 1.55; max-width: 620px; } .btn{ border:none; border-radius: 999px; padding: 11px 18px; font-weight: 900; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap: 8px; white-space:nowrap; transition: transform .12s ease, box-shadow .18s ease, opacity .18s ease; } .btn:active{ transform: translateY(1px) scale(0.99); } .btn:focus{ outline:none; box-shadow: var(--focus); } .btn-primary{ background: linear-gradient(135deg, var(--gold), var(--gold-2)); color: #1b1206; box-shadow: 0 18px 40px rgba(176, 141, 87, 0.35); } .btn-primary:hover{ box-shadow: 0 26px 56px rgba(176, 141, 87, 0.42); } .btn-ghost{ background: rgba(255,255,255,0.42); border: 1px solid rgba(11,18,32,0.14); color: var(--text); } .category-strip-wrapper{ position: sticky; top: 0; z-index: 10; padding: 10px 0 10px; background: linear-gradient(to bottom, rgba(11,15,20,0.55), rgba(11,15,20,0.20), rgba(11,15,20,0)); } .category-strip{ display:flex; gap: 10px; overflow-x:auto; padding: 6px 0; scrollbar-width:none; } .category-strip::-webkit-scrollbar{ display:none; } .cat-pill{ flex-shrink:0; background: rgba(255,255,255,0.70); border: 1px solid rgba(11,18,32,0.14); color: rgba(11,18,32,0.70); padding: 9px 13px; border-radius: 999px; cursor:pointer; font-size: 0.86rem; display:inline-flex; align-items:center; gap: 8px; transition: transform .12s ease, background .18s ease, border-color .18s ease; } .cat-pill:hover{ transform: translateY(-1px); border-color: rgba(176,141,87,0.45); } .cat-pill small{ opacity:0.75; } .cat-pill.active{ color: var(--text); border-color: rgba(176,141,87,0.55); background: rgba(176,141,87,0.14); } .section{ margin: 14px 0 20px; } .section-header{ display:flex; justify-content:space-between; align-items:baseline; gap: 10px; margin: 0 2px 10px; background: rgba(255,255,255,0.70); border: 1px solid rgba(11,18,32,0.10); border-radius: var(--radius-sm); padding: 11px 12px; } .section-title{ font-size: 1.02rem; font-weight: 950; } .section-code{ font-size: 0.76rem; color: rgba(11,18,32,0.65); letter-spacing: 0.10em; text-transform: uppercase; } .section-body{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 12px 6px; box-shadow: var(--shadow); } .menu-item{ display:grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; padding: 12px 8px; border-bottom: 1px solid rgba(11,18,32,0.07); } .menu-item:last-child{ border-bottom:none; padding-bottom: 4px; } .item-name{ font-weight: 900; font-size: 0.95rem; letter-spacing: 0.01em; } .item-desc{ color: var(--muted); font-size: 0.84rem; margin-top: 4px; line-height: 1.45; } .item-right{ display:flex; flex-direction:column; align-items:flex-end; gap: 8px; } .item-price{ font-weight: 950; font-size: 0.92rem; } .btn-add{ border-radius: 999px; padding: 7px 12px; font-size: 0.82rem; cursor:pointer; background: rgba(255,255,255,0.55); border: 1px solid rgba(11,18,32,0.16); color: var(--text); display:inline-flex; align-items:center; gap: 6px; transition: transform .12s ease, background .18s ease, border-color .18s ease; } .btn-add:hover{ transform: translateY(-1px); border-color: rgba(176,141,87,0.55); background: rgba(176,141,87,0.14); } .order-bar{ position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); width: min(620px, calc(100% - 24px)); display: none; z-index: 30; } .order-bar-inner{ background: rgba(255,255,255,0.92); border: 1px solid rgba(11,18,32,0.14); border-radius: 999px; padding: 10px 14px; display:flex; align-items:center; justify-content:space-between; gap: 10px; box-shadow: var(--shadow); cursor:pointer; } .order-count-pill{ background: rgba(176,141,87,0.16); color: #1b1206; border-radius: 999px; padding: 7px 12px; font-size: 0.82rem; font-weight: 950; white-space:nowrap; } .backdrop{ position: fixed; inset: 0; background: rgba(0,0,0,0.58); display:none; align-items:center; justify-content:center; padding: 16px; z-index: 40; } .modal{ width: 100%; max-width: 620px; background: rgba(255,255,255,0.97); border: 1px solid rgba(11,18,32,0.14); border-radius: 24px; padding: 16px 16px 18px; box-shadow: var(--shadow); } .modal-header{ display:flex; justify-content:space-between; align-items:center; gap: 10px; margin-bottom: 10px; } .modal-title{ font-family: var(--font-serif); font-weight: 800; font-size: 1.05rem; letter-spacing: 0.02em; } .modal-close{ border:none; background:transparent; cursor:pointer; font-size: 1.4rem; color: rgba(11,18,32,0.55); } .order-list{ max-height: 320px; overflow:auto; padding-right: 4px; margin: 10px 0 12px; } .order-item{ display:flex; justify-content:space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(11,18,32,0.07); font-size: 0.92rem; align-items:flex-start; } .order-item:last-child{ border-bottom:none; } .order-item-name{ font-weight: 950; } .order-item-sub{ color: var(--muted); font-size: 0.82rem; margin-top: 4px; line-height: 1.35; } .qty-btn{ width: 30px; height: 30px; border-radius: 999px; border: 1px solid rgba(11,18,32,0.16); background: rgba(255,255,255,0.55); cursor:pointer; font-weight: 950; } .qty-btn:focus{ outline:none; box-shadow: var(--focus); } .qty{ min-width: 18px; text-align:center; font-weight: 950; } .line-total{ font-weight: 950; min-width: 78px; text-align:right; } .total-row{ display:flex; justify-content:space-between; align-items:center; font-size: 0.98rem; margin-top: 10px; } .note{ color: var(--muted); font-size: 0.84rem; line-height: 1.5; margin: 8px 0 12px; } .btn-full{ width: 100%; } input, select, textarea{ width:100%; padding: 11px 12px; border: 1px solid rgba(11,18,32,0.16); border-radius: 14px; background: rgba(255,255,255,0.75); font-family: var(--font-sans); font-weight: 600; } textarea{ min-height: 80px; resize: vertical; } input:focus, select:focus, textarea:focus{ outline:none; box-shadow: var(--focus); border-color: rgba(176,141,87,0.55); } .addon-list{ display:flex; flex-direction:column; gap: 10px; margin-top: 10px; } .addon-option{ border: 1px solid rgba(11,18,32,0.14); border-radius: 16px; padding: 12px 12px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; gap: 10px; background: rgba(255,255,255,0.70); transition: transform .12s ease, border-color .18s ease, background .18s ease; } .addon-option:hover{ transform: translateY(-1px); border-color: rgba(176,141,87,0.55); background: rgba(176,141,87,0.10); } .footer{ margin-top: 16px; color: rgba(255,255,255,0.72); font-size: 0.78rem; text-align:right; padding: 10px 2px; } @media (max-width: 640px){ .footer{ text-align:left; } } @media (prefers-reduced-motion: reduce){ *{ transition:none !important; scroll-behavior:auto !important; } } /* Performance optimizations */ .section{ content-visibility: auto; contain-intrinsic-size: 900px; contain: layout paint style; } .section-body, .section-header, .footer{ background: rgba(255,255,255,0.92); } @media (prefers-reduced-motion: reduce){ *{ transition: none !important; animation: none !important; scroll-behavior: auto !important; } } @media (max-width: 520px){ .page{ padding: 12px 10px 96px; } header{ padding: 14px 12px; } .brand{ font-size: 1.25rem; } .subtitle{ font-size: 0.92rem; line-height: 1.25rem; } .hero{ padding: 14px 12px; gap: 10px; } .btn{ min-height: 46px; } .menu-item{ padding: 14px 6px; grid-template-columns: minmax(0,1fr) auto; } .btn-add{ padding: 10px 12px; } .category-strip-wrapper{ position: sticky; top: 10px; z-index: 20; } .category-strip{ overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; } .cat-pill{ scroll-snap-align: start; } .order-bar{ bottom: 10px; } .order-bar-inner{ padding: 12px 12px; } }