/* Barbassi — monochrome ordering app design system (Phase 1) */ /* Applied while the drawer/checkout/product modal is open, to stop the background from scrolling — mobile browsers visibly lag position:fixed overlays during page scroll otherwise. app.js also pins to position:fixed with a stored scroll offset (plain overflow:hidden isn't reliably enough on iOS Safari on its own); this class is a light backup for browsers where that isn't needed. */ html.barbassi-no-scroll { overflow: hidden; } /* Some other stylesheet on the page (parent theme / Elementor / a plugin) carries a button/element rule that ties or beats the browser's built-in [hidden]{display:none} in specificity, so plain [hidden] isn't reliably respected here. Force it so app.js's `.hidden = true/false` toggles always work regardless of what else is loaded on the page. */ /* Doubled attribute selector is a deliberate specificity boost (0,0,2,0) so this always beats the button-centering rule below, which also uses !important — without this, both rules tie on specificity and whichever comes later in the file wins, which previously left hidden buttons (e.g. "Add" after it should've swapped to the stepper) visible. */ [hidden][hidden] { display: none !important; } /* Same root cause as above: something else on the page (parent theme / Elementor / a plugin) has a button rule with enough weight to push our icon/text off-center vertically, even on buttons that already declare flex centering. Force it here so it can't be beaten. */ .cart-icon-fab, .add-btn, .stepper button, .drawer-close, .checkout-btn, .co-back, .express-btn, .co-place, .back-to-shop-btn, .pm-close { display: inline-flex !important; align-items: center !important; justify-content: center !important; } :root { --black: #0a0a0a; --white: #ffffff; --paper: #faf9f6; --line: #e5e3de; --mid: #8a877f; --dark-mid: #3a3a38; } .barbassi-shop, .client-banner, .cart-bar, .drawer, .checkout-view, .scrim { font-family: 'Space Grotesk', sans-serif; color: var(--black); box-sizing: border-box; } .barbassi-shop *, .client-banner *, .cart-bar *, .drawer *, .checkout-view *, .scrim * { box-sizing: border-box; } /* ---- client banner (Phase 2) ---- */ .client-banner { margin: 0 0 16px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--white); } .cb-image { height: 100px; background: linear-gradient(120deg, #1c1c1a, #0a0a0a); background-size: cover; background-position: center; } @media (min-width: 768px) { .cb-image { height: 150px; } } @media (min-width: 1024px) { .cb-image { height: 200px; } } .cb-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; } .cb-logo { width: 56px; height: 56px; border-radius: 50%; flex: none; } .cb-logo-fallback { background: var(--black); color: var(--white); display: flex; align-items: center; justify-content: center; font-family: 'Fraunces', serif; font-style: italic; font-size: 24px; } .cb-logo-img { object-fit: cover; background: var(--white); border: 1px solid var(--line); } .cb-text { min-width: 0; } .cb-name { font-weight: 600; font-size: 13.5px; } .cb-window { font-size: 11px; color: var(--mid); margin-top: 1px; } /* ---- category chips ---- */ .chips { display: flex; gap: 8px; padding: 4px 0 12px; overflow-x: auto; scrollbar-width: none; } .chips::-webkit-scrollbar { display: none; } /* Break the chip row out of the Elementor container's side padding on mobile so it scrolls edge-to-edge, independent of whatever inset the surrounding section uses. */ @media (max-width: 767px) { .chips { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; padding-left: 20px; padding-right: 20px; } } .chip { flex: none; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; padding: 8px 16px; border: 1px solid var(--black); border-radius: 999px; background: var(--white); cursor: pointer; white-space: nowrap; user-select: none; } .chip.active { background: var(--black); color: var(--white); } /* ---- product grid ---- */ .grid { display: flex; flex-direction: column; } .card { display: flex; gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--line); cursor: pointer; } .card .card-cta { cursor: auto; } .card[hidden] { display: none; } .card-thumb { width: 88px; height: 88px; flex: none; border-radius: 10px; background: linear-gradient(155deg, #2b2b29, #0a0a0a); position: relative; overflow: hidden; } .card-thumb::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 10px); } /* Real product photo present: solid black fill, no placeholder texture — the photo is fit inside (not cropped), any leftover space in the square reads as black rather than showing the placeholder gradient/stripes. */ .card-thumb.has-image { background: var(--black); } .card-thumb.has-image::after { content: none; } .card-thumb-img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; display: block; } .card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; } .eyebrow { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mid); margin-bottom: 4px; } .card-title { font-family: 'Fraunces', serif; font-weight: 500; font-size: 18px; line-height: 1.15; margin-bottom: 4px; } .card-desc { font-size: 12.5px; color: var(--dark-mid); line-height: 1.4; margin-bottom: 10px; } .card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; } .price { font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; } .stepper { display: flex; align-items: center; gap: 0; border: 1px solid var(--black); border-radius: 999px; height: 32px; overflow: hidden; } .stepper[hidden] { display: none; } .stepper button { width: 32px; height: 32px; border: none; background: var(--white); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; color: var(--black); padding: 0; } .stepper button:active { background: var(--black); color: var(--white); } .stepper .qty { width: 26px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; font-size: 13px; } .add-btn { height: 32px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--black); background: var(--black); color: var(--white); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; font-weight: 600; cursor: pointer; font-family: inherit; } .add-btn[hidden] { display: none; } .barbassi-empty { padding: 40px 0; text-align: center; color: var(--mid); font-size: 13px; } /* ---- add-to-cart toast ---- */ .toast { position: fixed; left: 50%; bottom: 92px; z-index: 910; max-width: calc(100vw - 40px); background: var(--black); color: var(--white); padding: 12px 20px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 12px 30px rgba(0, 0, 0, .3); opacity: 0; pointer-events: none; transform: translate(-50%, 10px); transition: opacity .25s, transform .25s; } .toast.show { opacity: 1; transform: translate(-50%, 0); } /* ---- persistent cart icon (bottom-left) ---- */ .cart-icon-fab { position: fixed; left: 16px; bottom: 16px; z-index: 905; width: 52px; height: 52px; border-radius: 50%; border: none; background: var(--black); color: var(--white); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 12px 30px rgba(0, 0, 0, .3); padding: 0; } .cart-icon-fab svg { width: 20px; height: 20px; } .cart-icon-badge { position: absolute; top: -4px; right: -4px; background: var(--white); color: var(--black); border: 1px solid var(--black); font-size: 11px; font-weight: 700; min-width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0 4px; } .cart-icon-badge[hidden] { display: none; } /* ---- sticky cart bar ---- */ .cart-bar { position: fixed; left: 84px; right: 12px; bottom: 16px; z-index: 900; max-width: 456px; margin: 0 auto; background: var(--black); color: var(--white); border-radius: 16px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; transform: translateY(140%); transition: transform .32s cubic-bezier(.2, .8, .2, 1); box-shadow: 0 12px 30px rgba(0, 0, 0, .35); } .cart-bar.show { transform: translateY(0); } .cart-bar .left { display: flex; flex-direction: column; gap: 2px; } .cart-bar .count { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #c9c9c9; } .cart-bar .total { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; } .cart-bar .cta { display: flex; align-items: center; gap: 6px; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; font-weight: 600; } .cart-bar .cta svg { width: 12px; height: 12px; } /* ---- scrim ---- */ .scrim { position: fixed; inset: 0; background: rgba(10, 10, 10, .4); opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 940; } .scrim.show { opacity: 1; pointer-events: auto; } /* ---- drawer ---- */ .drawer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 950; background: var(--white); border-radius: 20px 20px 0 0; overflow: hidden; transform: translateY(100%); transition: transform .38s cubic-bezier(.2, .8, .2, 1); max-height: 80vh; display: flex; flex-direction: column; max-width: 480px; margin: 0 auto; box-shadow: 0 -10px 40px rgba(0, 0, 0, .2); } .drawer.show { transform: translateY(0); } .drawer-perf { height: 14px; background-image: radial-gradient(circle 4px at 12px 0, transparent 4px, var(--white) 4.5px); background-size: 24px 14px; background-repeat: repeat-x; background-position: bottom; position: relative; top: 1px; flex: none; } .drawer-head { padding: 6px 20px 14px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); flex: none; } .drawer-head h3 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 20px; margin: 0; } .drawer-close { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; } .drawer-close svg { width: 12px; height: 12px; } /* ---- kitchen closed notice (Phase 2) ---- */ .kitchen-notice { margin: 0 0 16px; padding: 12px 14px; background: var(--black); color: var(--white); font-size: 12.5px; font-weight: 600; border-radius: 10px; } .drawer .kitchen-notice, .checkout-view .kitchen-notice { margin: 14px 20px 0; flex: none; } .checkout-btn:disabled, .co-place:disabled { opacity: .4; cursor: not-allowed; } /* ---- client delivery schedule (Phase 2) ---- */ .delivery-schedule { padding: 14px 20px; border-bottom: 1px solid var(--line); flex: none; } .delivery-schedule-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--dark-mid); } .schedule-list { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); } .schedule-row { font-size: 12px; color: var(--dark-mid); padding: 4px 0; } .ship-wrap { padding: 14px 20px 4px; flex: none; } .ship-label { font-size: 11.5px; color: var(--dark-mid); margin-bottom: 8px; } .ship-label b { color: var(--black); } .ship-track { height: 4px; background: var(--line); border-radius: 99px; overflow: hidden; } .ship-fill { height: 100%; background: var(--black); width: 0; transition: width .4s; } .drawer-items { padding: 6px 20px; overflow-y: auto; flex: 1; } .line-item { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); } .line-item:last-child { border-bottom: none; } .li-body { flex: 1; min-width: 0; } .li-name { font-size: 13.5px; font-weight: 600; } .li-sub { font-size: 11px; color: var(--mid); } .li-stepper { transform: scale(.85); transform-origin: right center; } .drawer-empty { padding: 40px 0 20px; text-align: center; color: var(--mid); font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 16px; } .back-to-shop-btn { padding: 12px 24px; border-radius: 999px; border: 1px solid var(--black); background: var(--white); color: var(--black); font-family: 'Space Grotesk', sans-serif; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; font-weight: 600; cursor: pointer; } .drawer-summary { padding: 14px 20px 6px; border-top: 1px solid var(--line); flex: none; } .sum-row { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--dark-mid); padding: 3px 0; } .sum-row.total { color: var(--black); font-weight: 700; font-size: 15px; padding-top: 8px; border-top: 1px dashed var(--line); margin-top: 6px; } .payable-row { display: flex; justify-content: space-between; align-items: baseline; } .payable-label { font-weight: 700; font-size: 14.5px; } .payable-amount { font-weight: 700; font-size: 14.5px; font-variant-numeric: tabular-nums; } .payable-sub { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; font-size: 11.5px; color: var(--mid); } .breakdown-toggle { display: inline !important; background: none !important; border: none !important; padding: 0 !important; color: var(--black) !important; text-decoration: underline !important; font-size: 11.5px !important; font-family: 'Space Grotesk', sans-serif; cursor: pointer; opacity: 1 !important; visibility: visible !important; } .breakdown { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); } .checkout-btn { margin: 14px 20px 20px; padding: 16px; border: none; border-radius: 14px; background: var(--black); color: var(--white); font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; cursor: pointer; flex: none; } /* ---- product detail modal ---- */ .product-modal { position: fixed; inset: 0; z-index: 970; visibility: hidden; font-family: 'Space Grotesk', sans-serif; color: var(--black); } .product-modal * { box-sizing: border-box; } .product-modal.show { visibility: visible; } .pm-scrim { position: absolute; inset: 0; background: rgba(10, 10, 10, .4); opacity: 0; transition: opacity .3s; } .product-modal.show .pm-scrim { opacity: 1; } .pm-panel { position: absolute; left: 0; right: 0; bottom: 0; background: var(--white); border-radius: 20px 20px 0 0; overflow: hidden; transform: translateY(100%); transition: transform .38s cubic-bezier(.2, .8, .2, 1); max-height: 85vh; display: flex; flex-direction: column; max-width: 480px; margin: 0 auto; box-shadow: 0 -10px 40px rgba(0, 0, 0, .2); } .product-modal.show .pm-panel { transform: translateY(0); } .pm-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); padding: 0; } .pm-close svg { width: 12px; height: 12px; } .pm-image { width: 100%; aspect-ratio: 4 / 3; background: var(--black); flex: none; } .pm-image img { width: 100%; height: 100%; object-fit: contain; display: block; } .pm-body { padding: 18px 20px 24px; overflow-y: auto; } .pm-eyebrow { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mid); margin-bottom: 6px; } .pm-name { font-family: 'Fraunces', serif; font-weight: 500; font-size: 22px; line-height: 1.2; margin-bottom: 6px; } .pm-price { font-weight: 600; font-size: 16px; font-variant-numeric: tabular-nums; margin-bottom: 16px; } .pm-desc { font-size: 13.5px; color: var(--dark-mid); line-height: 1.55; margin-bottom: 20px; } .pm-desc p { margin: 0 0 10px; } .pm-desc p:last-child { margin-bottom: 0; } .pm-section-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mid); margin-bottom: 8px; } .pm-ingredients { font-size: 13px; color: var(--dark-mid); line-height: 1.55; } .pm-ingredients p { margin: 0 0 8px; } .pm-ingredients p:last-child { margin-bottom: 0; } /* ---- checkout view ---- */ .checkout-view { position: fixed; top: 0; right: 0; bottom: 0; width: 100%; background: var(--paper); z-index: 960; transform: translateX(100%); transition: transform .35s cubic-bezier(.2, .8, .2, 1); display: flex; flex-direction: column; max-width: 480px; box-shadow: -10px 0 40px rgba(0, 0, 0, .2); } .checkout-view.show { transform: translateX(0); } .co-head { display: flex; align-items: center; gap: 12px; padding: 22px 20px 14px; border-bottom: 1px solid var(--line); flex: none; } .co-back { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--black); background: var(--white); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; } .co-back svg { width: 14px; height: 14px; } .co-title { font-family: 'Fraunces', serif; font-size: 20px; font-weight: 500; } .co-body { padding: 18px 20px; overflow-y: auto; flex: 1; } .co-section-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mid); margin: 18px 0 10px; } .co-section-label:first-child { margin-top: 0; } .express-row { display: flex; gap: 10px; } .express-btn { flex: 1; height: 46px; border-radius: 12px; border: 1px solid var(--black); background: var(--black); color: var(--white); display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 600; font-size: 13px; cursor: pointer; font-family: inherit; } .express-btn.outline { background: var(--white); color: var(--black); } .express-btn:disabled { opacity: .4; cursor: not-allowed; } .divider-or { display: flex; align-items: center; gap: 10px; margin: 16px 0; color: var(--mid); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; } .divider-or::before, .divider-or::after { content: ""; flex: 1; height: 1px; background: var(--line); } .field { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 13px 14px; font-size: 13.5px; margin-bottom: 10px; background: var(--white); font-family: 'Space Grotesk', sans-serif; color: var(--black); display: block; } .field::placeholder { color: var(--mid); } .field:disabled { opacity: .5; cursor: not-allowed; } .field-static { display: flex; justify-content: space-between; align-items: center; color: var(--dark-mid); font-size: 13px; } .field-row { display: flex; gap: 10px; } .field-row .field { flex: 1; } .co-summary-card { border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: var(--white); } .co-place { margin: 10px 20px 22px; padding: 16px; border: none; border-radius: 14px; background: var(--black); color: var(--white); font-weight: 600; font-size: 14px; letter-spacing: .03em; text-transform: uppercase; cursor: pointer; flex: none; font-family: 'Space Grotesk', sans-serif; } /* ---- responsive: give the grid room on larger screens ---- */ @media (min-width: 700px) { .card { gap: 18px; } .card-thumb { width: 108px; height: 108px; } }