/* Menu App Styles */ /* Ariana Pro loaded via Adobe Fonts (Typekit) — see in each HTML file */ @import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css'); /* ── Force light mode ────────────────────────────────────────────────────────── Hisense Hi Browser Night Mode injects a CSS filter (invert + hue-rotate) on the element. The three rules below counter all known mechanisms: 1. color-scheme: light — tells the browser this page is light-only, prevents prefers-color-scheme:dark from matching 2. filter / -webkit-filter: none — neutralises the injected invert filter 3. Explicit background + color — overrides any forced-color UA stylesheet ──────────────────────────────────────────────────────────────────────────── */ :root { color-scheme: light; } html { -webkit-filter: none !important; filter: none !important; background-color: #ffffff !important; color: #363335 !important; font-family: ariana-pro, sans-serif !important; } body { background-color: #ffffff !important; color: #363335 !important; font-family: ariana-pro, sans-serif !important; } /* Override if browser somehow still applies dark-mode media query */ @media (prefers-color-scheme: dark) { html { -webkit-filter: none !important; filter: none !important; background-color: #ffffff !important; color: #363335 !important; } body { background-color: #ffffff !important; color: #363335 !important; } } body, html { width: 100vw; height: 100vh; margin: 0; padding: 0; box-sizing: border-box; } /* Hide scrollbars for all elements */ * { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } /* Hide scrollbars for WebKit browsers (Chrome, Safari, Opera) */ *::-webkit-scrollbar { display: none; } /* Override for admin page — allow full-page scroll */ body.admin-page, html.admin-page { width: 100% !important; height: auto !important; min-height: 100vh !important; max-width: 100vw !important; overflow-y: auto !important; } .primary-color { color: #E15EA2 !important; } .secondary-color { color: #6DCEEF !important; } .container-fluid { width: 100%; height: 100vh; padding: 20px; /* gap between screen edge and dotted border */ margin: 0; } .menu-header { color: #E15EA2 !important; margin-bottom: 0; } .menu-header h1 { font-size: 3rem; font-weight: 600; } /* Custom styles for the menu display */ .menu-container { background-color: #fff; border: 10px dotted #6DCEEF; /* padding matches the outer gap so the space between the dotted border and the flavour text equals the space between the screen edge and the border */ padding: 20px; width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden; } #menu-column-1 { padding-left: 0; padding-right: 25px; display: flex; flex-direction: column; } #menu-column-2 { padding-left: 25px; padding-right: 0; display: flex; flex-direction: column; } /* Flex child of .menu-container — fills all remaining height after the header */ .menu-item-container { padding: 0; flex: 1; min-height: 0; } /* Middle column styles */ #menu-column-middle { display: flex; flex-direction: column; justify-content: space-between; padding: 0; border: 5px dotted #6DCEEF; border-top: none; border-bottom: none; margin: 0; } .middle-item { padding: 10px; margin-bottom: 0; display: flex; justify-content: center; align-items: center; } .image-container { height: auto; min-height: 83px; display: flex; justify-content: center; align-items: center; } .featured-image { max-width: 100%; max-height: 83px; object-fit: contain; border-radius: 8px; } .price-container { height: auto; min-height: 60px; display: flex; justify-content: center; align-items: center; } .featured-price { font-size: 1.75rem; color: #E15EA2; font-weight: 600; text-align: center; } /* Menu item styles */ .menu-item { flex: 1; /* each item takes an equal share of the column height */ display: flex; align-items: center; /* content is vertically centred within that equal share */ padding: 0 5px 0 0; position: relative; margin-bottom: 0; } /* Add the centred dividing line between menu items */ .menu-item:not(:last-child) { position: relative; margin-bottom: 0; } /* Create the centered line with pseudo-element for perfect centering */ .menu-item:not(:last-child)::after { content: ''; position: absolute; bottom: 0; /* Position exactly halfway between items for perfect centering */ left: 0; width: 100%; height: 2px; background-color: #dee2e6; } /* Remove the border from the last item in each column */ #menu-column-1 .menu-item:last-child, #menu-column-2 .menu-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .menu-item .row { margin: 0; width: 100%; position: relative; } .menu-item h3 { font-size: 2.2rem !important; font-weight: 600; line-height: 1.6; letter-spacing: 0.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0rem; padding-right: 0.5rem; /* Add some padding on the right */ } /* Make the price adjustment more specific and visible */ .menu-item h3 .price-adjustment, .menu-item .price-adjustment, h3 .price-adjustment, .price-adjustment { font-size: 2.2rem !important; color: #6DCEEF !important; font-weight: 600 !important; margin-left: 0.5rem !important; display: inline !important; visibility: visible !important; } .menu-item .menu-type { font-size: 1.25rem; color: #E15EA2; font-weight: 500; white-space: nowrap; align-self: flex-end; margin-bottom: 14px; } .menu-item .menu-price { font-size: 2rem; color: #E15EA2; font-weight: 600; position: absolute; right: 15px; bottom: 0; margin-bottom: 0; } .menu-item .menu-description { display: none; font-size: 0.9rem; color: #6c757d; margin-bottom: 0.5rem; } .menu-item .allergen-column { display: none; /* Hide any existing allergen columns */ } .menu-item:first-child { box-shadow: none !important; padding-top: 0 !important; } /* Styles specific to otherItems.html */ body.other-items-page { background-color: #fff; color: #363335; } body.other-items-page .menu-item h3.category-header { font-size: 2rem; color: #6DCEEF; font-weight: 600; margin-bottom: 0rem; } body.other-items-page .menu-item h3.sub-item { font-size: 1.6rem; color: #363335; font-weight: 600; margin-bottom: 7px; } body.other-items-page .menu-item { display: flex; align-items: center; } body.other-items-page .menu-item .row { display: flex; align-items: center; margin: 0; width: 100%; } body.other-items-page .menu-item .col-8 { height: 100%; display: flex; flex-direction: column; justify-content: center; } body.other-items-page .menu-item .col-4 { height: 100%; display: flex; align-items: center; } body.other-items-page .menu-price { color: #E15EA2; font-size: 2rem; font-weight: 600; /* position is static so price stays inline in the d-flex row in the HTML */ position: static; right: auto; bottom: auto; margin-bottom: 0; } body.other-items-page .menu-price .menu-price-variable { font-size: 1.6rem; color: #363335; } /* Admin page styles */ .search-results { max-height: 400px; overflow-y: auto; } #selected-items { max-height: 600px; overflow-y: auto; }