html {
font-size: 14px;
}
@media (min-width: 768px) {
html {
font-size: 16px;
}
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
}
.j-cart-badge {
border-radius: 3px !important;
}
/* The restaurant roles' badges (SiteRoles.BadgeClass). Plum, because each
other colour already names a role, and Bootstrap has no purple badge. */
.badge-restaurant {
color: #fff;
background-color: var(--bs-purple, #6f42c1);
}
.badge-restaurant-staff {
color: #432874;
background-color: #e2d9f3;
}
/* Toast theme helpers for older Bootstrap builds */
.text-bg-danger {
color: #fff !important;
background-color: #dc3545 !important;
}
.text-bg-warning {
color: #212529 !important;
background-color: #ffc107 !important;
}
.text-bg-success {
color: #fff !important;
background-color: #198754 !important;
}
.text-bg-info {
color: #fff !important;
background-color: #0dcaf0 !important;
}
/* Image alignment helpers for TinyMCE content */
img.alignleft {
float: left;
margin: 0 1rem 0.5rem 0;
}
img.alignright {
float: right;
margin: 0 0 0.5rem 1rem;
}
img.aligncenter {
display: block;
margin: 0 auto 0.5rem;
}
img.alignnone {
display: block;
margin: 0 0 0.5rem;
}
/* Confirm and alert dialogs ----------------------------------------------
These can open from inside another modal - deleting an image from the
image editor, for one - so they sit above anything else on the page. The
content editor pins .modal-backdrop with !important, which defeats the
stacking Bootstrap would otherwise do on its own, so dialogs.js lifts this
dialog's own backdrop to match.
Two classes here too: the public layout loads a Bootswatch theme after this
file, and its single-class .modal rule put the dialog back at 1055, under
its own backdrop, where no click could reach it. */
.modal.app-dialog {
z-index: 1090;
}
/* Two classes, so this wins against the single-class !important the content
editor pins every backdrop with. */
.modal-backdrop.app-dialog-backdrop {
z-index: 1085 !important;
}
/* Anchor targets ----------------------------------------------------------
A section jumped to from the menu would otherwise land with its heading
under a sticky navigation bar. This keeps it clear of one. */
[id] {
scroll-margin-top: calc(var(--site-header-height, 5rem) + 1rem);
}
/* The current page in the header menu. Marked with aria-current rather than
the active class, which scrollspy owns and clears from every link whenever
it highlights a section. */
.navbar .nav-link[aria-current="page"] {
color: var(--bs-navbar-active-color);
}
/* The page band, set under Settings, Page Settings. Container and Wide are
Bootstrap classes; full bleed is the absence of a container rather than a
wider one. No 100vw, which adds a scrollbar width and scrolls sideways, and
no negative margins. A component that needs a readable measure puts its own
container inside itself, the way the rich text one does. */
.page-full {
width: 100%;
}
/* The band a component keeps when the page runs edge to edge. Bootstrap's
widest container, so a banded component lines up with a contained one.
Each component stylesheet decides for itself whether it bands: a photograph
or a colored band should bleed, a paragraph or a row of cards should not. */
:root {
--cms-band: 1320px;
}
/* For a component with no stylesheet of its own to put the rule in. */
.page-full .cms-band {
max-width: var(--cms-band);
margin-inline: auto;
padding-inline: 0.75rem;
}
/* The header logo, when a scope has chosen one under Settings, Page Settings.
Height only, so any shape of mark keeps its proportions. */
.site-logo {
height: 2.25rem;
width: auto;
}
/* The preview beside a picture setting: big enough to recognise the picture,
small enough that the control stays one row. */
.setting-media__preview {
max-height: 3.5rem;
max-width: 12rem;
}
/* Toasts sit below the header rather than over it.
One offset for both layouts, measured rather than guessed: the admin's bar is
58px and the public header 63px, so 4rem clears the taller of the two. The
container's own p-3 adds 16px on top of this, which is where the gap under
the header comes from - changing one means looking at the other.
The public header is sticky on some sites, depending on a setting, and this
clears it either way. */
.app-toast-container {
top: var(--app-toast-top, 4rem);
right: 0;
}
/* On the admin pages and the register they sit at the bottom left instead,
out of the way of the headings, totals and buttons people are working with
(the owner, 2026-11-04); the newest is nearest the corner. A handheld keeps
them at the top: its Send, Pay and tabs are at the bottom of the phone. */
.app-admin .app-toast-container,
.pos-body:not(:has(.pos-handheld)) .app-toast-container {
top: auto;
right: auto;
bottom: 0;
left: 0;
}
/* A message form-checks.js puts under a field, a group of choices or an input
group: shown whether or not it is the field's own sibling. The plugin hides
it with an inline style once the field is right. */
.invalid-feedback.app-check-error {
display: block;
}
/* The toast's cross. Bootstrap ships no small variant, and its own sizing is
all in em, so one font-size takes the box, the icon and the padding down
together. */
.app-toast-close {
font-size: 0.7rem;
flex-shrink: 0;
}
/* Bluesky (M6's social platforms). Bootstrap Icons 1.11.3 has no bi-bluesky,
so the mark is drawn here as a mask in the text colour, the way the font's
own glyphs take it; then works wherever the
other platforms' marks do. */
.bi-bluesky::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -.125em;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z'/%3E%3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z'/%3E%3C/svg%3E") no-repeat center / contain;
}
/*
* Some Bootswatch themes (Lux) put their shadow on .modal-dialog, which a
* centred dialog stretches to the window's height: a grey column behind the
* box. The shadow belongs on the box itself.
*/
.modal-dialog {
box-shadow: none;
}
.modal-content {
box-shadow: var(--bs-box-shadow);
}