/* --------------------------------------------------------------------------- Menu page (local/menus) Loaded AFTER the theme settings' custom_css block in _partials/head.blade.php, because that block is a stale copy of style.css and carries !important on the rules this file has to correct (the header gradient, the order-type toggle). Anything here that fights those rules needs !important too — matching specificity is not enough when the loser is declared later. Scoped to .page-menus (set from the page's bodyClass) wherever a rule would otherwise leak onto checkout, cart or the home page. --------------------------------------------------------------------------- */ :root { --menu-brown: #583000; --menu-brown-deep: #2a1800; --menu-accent: #ffbe33; --menu-ink: #241a10; --menu-muted: #6f6255; --menu-line: #ece4d9; --menu-cream: #fffaf0; --menu-card-shadow: 0 1px 2px rgba(36, 26, 16, .05), 0 10px 28px rgba(36, 26, 16, .07); } /* --------------------------------------------------------------------------- Header custom_css paints .bg-box `to right, #fff, #623701bd`, which puts the white brand mark and the white nav on a white left edge — the logo was effectively invisible until roughly the midpoint of the bar. Sub-pages get a solid dark brown ramp instead; the home page keeps its photographic hero. --------------------------------------------------------------------------- */ body.sub_page .hero_area .bg-box { background: linear-gradient(90deg, var(--menu-brown-deep) 0%, var(--menu-brown) 100%) !important; } body.sub_page .hero_area { box-shadow: 0 2px 10px rgba(36, 26, 16, .18); } body.sub_page .custom_nav-container .navbar-nav .nav-item .nav-link { box-shadow: none !important; border: 1px solid rgba(255, 255, 255, .28); letter-spacing: .02em; } body.sub_page .custom_nav-container .navbar-nav .nav-item .nav-link:hover, body.sub_page .custom_nav-container .navbar-nav .nav-item.active .nav-link { background: rgba(255, 255, 255, .12); border-color: var(--menu-accent); color: var(--menu-accent) !important; } /* --------------------------------------------------------------------------- Page frame --------------------------------------------------------------------------- */ .page-menus #page-wrapper { padding-bottom: 2.5rem; } /* The tint goes on , not #page-wrapper: main carries 50px of leading whitespace above the wrapper, which showed as a white band under the header when only the wrapper was painted. */ body.page-menus { background: #faf7f2; } .page-menus #page-wrapper .row.py-4 { padding-top: 1.75rem !important; } .page-menus .allergen-bar { margin-bottom: 1.25rem; } /* Cards: one radius, one border, one shadow for every box on the page. */ .page-menus .panel, .page-menus .categories.affix-categories, .page-menus .panel-cart { background: #fff; border: 1px solid var(--menu-line); border-radius: 14px; box-shadow: var(--menu-card-shadow) !important; overflow: hidden; } /* --------------------------------------------------------------------------- Category rails Desktop is the vertical list in the left column, mobile the horizontal scroller inside the menu card. Same pill, same active brown. --------------------------------------------------------------------------- */ .page-menus .nav-categories .nav-link { display: block; padding: .6rem .9rem; border-radius: 9px; color: var(--menu-ink); font-weight: 500; text-decoration: none; transition: background .15s ease, color .15s ease; } .page-menus ul.nav.flex-column.nav-categories { padding: .5rem; } .page-menus .nav-categories .nav-link:hover { background: var(--menu-cream) !important; color: var(--menu-brown) !important; } .page-menus ul.nav-categories li.nav-item a.nav-link.active, .page-menus ul.nav.flex-column.nav-categories li.nav-item a.active { background: var(--menu-brown) !important; color: #fff !important; font-weight: 700; } /* Mobile rail: the strip scrolls, so hide the scrollbar and keep the pills on one line rather than letting them wrap into a two-row block. */ .page-menus .nav-categories.nav-inline { gap: .4rem; } .page-menus .layout-scrollable { scrollbar-width: none; } .page-menus .layout-scrollable::-webkit-scrollbar { display: none; } .page-menus .panel > .bg-white.border-bottom { border-bottom: 1px solid var(--menu-line) !important; background: #fff !important; } /* --------------------------------------------------------------------------- Search --------------------------------------------------------------------------- */ .page-menus .menu-search .py-3 { border-top: 0 !important; border-bottom: 1px solid var(--menu-line) !important; } .page-menus .menu-search .input-group-text { background: #fff; border: 1px solid var(--menu-line); border-right: 0; border-radius: 999px 0 0 999px; padding-left: 1rem; color: var(--menu-muted); } .page-menus .menu-search .form-control { border: 1px solid var(--menu-line); border-left: 0; border-radius: 0 999px 999px 0; padding: .65rem 1rem .65rem 0; box-shadow: none; } .page-menus .menu-search .form-control:focus { border-color: var(--menu-accent); box-shadow: none; } .page-menus .menu-search .input-group:focus-within .input-group-text { border-color: var(--menu-accent); color: var(--menu-brown); } /* --------------------------------------------------------------------------- Category headings The heading is an accordion toggle for the group *below* it. Left brown rule plus a cream ground so it cannot be misread as a footer for the group above, which is what the bare bold h4 looked like. --------------------------------------------------------------------------- */ .page-menus .menu-list .category-title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0; padding: 1rem 1.25rem; background: var(--menu-cream); border-top: 1px solid var(--menu-line); border-left: 4px solid var(--menu-brown); font-size: 1.05rem; font-weight: 700; letter-spacing: .01em; color: var(--menu-brown); text-transform: capitalize; } .page-menus .menu-list .category-title:hover { background: #fdf3e3; } /* .pull-right is Bootstrap 3 and does nothing here; the flex row above already pushes the chevron to the end. This only handles the open/closed state. */ .page-menus .menu-list .category-title .fa-chevron-down { flex: 0 0 auto; font-size: .8rem; color: var(--menu-brown); transition: transform .2s ease; transform: rotate(180deg); } .page-menus .menu-list .category-title.collapsed .fa-chevron-down { transform: rotate(0deg); } .page-menus .menu-category { padding: 0 1.25rem; color: var(--menu-muted); } .page-menus .menu-category:empty { display: none; } /* --------------------------------------------------------------------------- Menu items --------------------------------------------------------------------------- */ /* app.css puts 16px of side padding on .menu-group-item and 20px on top of .menu-list, which stacks with the row padding below and leaves the category bands floating short of the card edge. Rows and bands own their own inset here so they can run edge to edge. */ .page-menus .menu-list { padding-top: 0 !important; } .page-menus .menu-list .menu-group-item { padding-left: 0 !important; padding-right: 0 !important; } .page-menus .menu-item { padding: 1rem 1.25rem; border-top: 1px solid var(--menu-line); transition: background .15s ease; } .page-menus .menu-group-item:first-child .menu-items .menu-item:first-child { border-top: 0; } .page-menus .menu-item:hover { background: #fdfaf5; } .page-menus .menu-item-image { border-radius: 10px; flex: 0 0 auto; } .page-menus .menu-name { margin: 0 0 .2rem; font-size: 1rem; font-weight: 700; line-height: 1.35; color: var(--menu-ink); } .page-menus .menu-desc { font-size: .875rem; line-height: 1.5; color: var(--menu-muted) !important; max-width: 60ch; } /* The description paragraph is always emitted, empty or not — without this an item with no description carries a blank line's worth of margin. */ .page-menus .menu-desc:empty { display: none; } .page-menus .menu-detail { align-items: center; gap: .25rem; flex: 0 0 auto; width: auto !important; } .page-menus .menu-price { font-size: .95rem; color: var(--menu-ink); white-space: nowrap; } .page-menus .menu-price s { display: block; font-size: .8rem; color: var(--menu-muted); } .page-menus .menu-item .btn.btn-cart { width: 38px; height: 38px; min-width: 38px; min-height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: var(--menu-brown) !important; color: #fff !important; box-shadow: 0 2px 6px rgba(88, 48, 0, .28); transition: transform .12s ease, background .15s ease; } .page-menus .menu-item .btn.btn-cart:hover { background: var(--menu-brown-deep) !important; transform: scale(1.06); } .page-menus .menu-item .allergens:empty { display: none; } .page-menus .pagination-bar .links:empty { display: none; } /* --------------------------------------------------------------------------- Order panel The active order type was white text on a transparent ground: Bootstrap's `.btn-check:checked + .btn-light` won the background while custom_css's `.btn.btn-light.active` won the colour, so the selected option — the one piece of state on the panel — rendered blank. Not .page-menus-scoped: the same panel and the same bug appear on every page the local layout serves (menus, info, cart). Checkout is excluded because responsive.css already dresses .checkout-page .panel-cart in full. --------------------------------------------------------------------------- */ body.sub_page:not(.checkout-page) .panel-cart .panel-body { padding: 1.25rem; } body.sub_page:not(.checkout-page) .local-control .btn-group { border-radius: 10px; overflow: hidden; border: 1px solid var(--menu-line); } body.sub_page:not(.checkout-page) .local-control .btn-group .btn.btn-light { background: #fff !important; color: var(--menu-ink) !important; border: 0 !important; border-radius: 0 !important; padding: .6rem .5rem; line-height: 1.25; } body.sub_page:not(.checkout-page) .local-control .btn-group .btn-check:checked + .btn.btn-light, body.sub_page:not(.checkout-page) .local-control .btn-group .btn.btn-light.active { background: var(--menu-brown) !important; color: #fff !important; } body.sub_page:not(.checkout-page) .local-control .btn-group .btn.btn-light .small { display: block; font-size: .75rem; opacity: .8; } body.sub_page:not(.checkout-page) .local-timeslot .btn, body.sub_page:not(.checkout-page) .local-timeslot .btn-timepicker { border-radius: 10px !important; border: 1px solid var(--menu-line) !important; background: #fff !important; color: var(--menu-ink) !important; padding: .65rem .75rem; font-weight: 600; } body.sub_page:not(.checkout-page) .local-timeslot .btn-timepicker .far { color: var(--menu-brown); } .page-menus #cart-box { margin-top: 1rem; } .page-menus #cart-buttons .btn { border-radius: 10px; padding: .8rem 1rem; font-weight: 700; letter-spacing: .02em; } /* --------------------------------------------------------------------------- Mobile --------------------------------------------------------------------------- */ @media (max-width: 991.98px) { /* The order panel is the only place to pick delivery/pick-up and a time, so it moves above the menu instead of trailing it. Its cart contents stay hidden: the fixed MY ORDER bar already links to the full cart, and the "Add menu items to your cart" placeholder plus a second Checkout button below the list was the dead band between the menu and the footer. */ .page-menus #page-wrapper .row.py-4 { display: flex; flex-direction: column; padding-top: 1rem !important; } .page-menus #page-wrapper .row.py-4 > .col-lg-4 { order: -1; margin-bottom: 1rem; } .page-menus .affix-cart #cart-box { display: none; } .page-menus .panel-cart .panel-body { padding: 1rem; } .page-menus .menu-item { padding: .875rem 1rem; } .page-menus .menu-list .category-title { padding: .875rem 1rem; font-size: 1rem; } .page-menus #page-wrapper { padding-bottom: 1.5rem; } /* Clear the fixed cart bar so the last item is not trapped underneath it. */ body.page-menus.has-fixed-cart-button #page-wrapper { padding-bottom: 5rem; } }