/* The menu cards, shared by any page that shows them (the Food Menu, the
Taproom, the home page and Our Beers). Moved here from
assets/pages/menu.css on 29 Oct 2026 with the same class names; no rule
here is scoped to a page, so a page links this file after site.css and
before its own page CSS, which keeps only what is that page's own.
The look is the Food Menu's as America approved it (28 Oct 2026), drawn
from the Live Music page: the bright yellow band, the big black title over
the logo's two stripes, and one black card per section, the section's name
on the yellow tile across its top, small striped labels as on a Live Music
card, one item to a row with its price on the right of the same line, and
the dashed yellow road line along the bottom. Nothing here moves.
Markup, all optional but the card:
Two prices on one item: 5oz $3 • , 16oz $8. */
/* ---------- The band ---------- */
/* The toolbar's lane. The accessibility toolbar is fixed at the window's
right edge, 44px wide plus its 1px ring, half way down the window. The
cards end at least 8px short of it at every width, so it never sits on a
card, at open or as the page scrolls: the container's right padding is
53px less the margin beside the centred container (100% here is the
band's width, which is the window's), and never less than the gutter. On
a laptop that margin is already wider, so nothing changes there. */
.fm { padding-top: 64px; padding-bottom: 80px; }
/* The cards sit on white so their black and yellow stand out (America, 29 Oct:
"the rest should be white background i think so the black and yellow pop").
The home intro band with the map and the Live Music page keep their yellow. */
.band--yellow.fm { --band-bg: #fff; }
body > main:has(> .band--yellow.fm:last-child) { background: #fff; }
.fm > .container {
padding-right: max(var(--gutter), calc(53px - (100% - min(100%, var(--container))) / 2));
}
@media (max-width: 767px) {
.fm { padding-top: 40px; padding-bottom: 52px; }
.fm > .container { padding-left: 16px; padding-right: 53px; }
}
/* ---------- The title: big black words over the logo's two stripes ---------- */
.fm-title {
--fm-title-fs: calc(var(--fs-h1) * 1.45);
margin: 0 0 56px;
color: #000;
font-size: var(--fm-title-fs);
line-height: .98;
font-weight: 700;
letter-spacing: -.005em;
text-transform: uppercase;
}
.fm-title::after {
content: "";
display: block;
width: 2.4em;
height: .32em;
margin-top: .28em;
background: linear-gradient(#000 0 34%, transparent 34% 66%, #000 66% 100%);
}
/* ---------- The cards ---------- */
/* One card under the next, the same gap between them */
.fm-cards { display: grid; gap: 32px; }
/* One card per section: the yellow tile across the top with the section's
name, then the photos and the list. --fm-pad is the one inset used for
everything inside a card: the tile's name, the photos, the labels, the
rows and the road line all start and end on the same two edges, and the
photos keep the same room above and below them as at their sides. */
.fm-card {
--fm-pad: 1.6em;
--c-focus: var(--c-yellow);
container: fm-card / inline-size;
position: relative;
min-width: 0;
background: #000;
color: #fff;
border: 3px solid #000;
font-variant-numeric: tabular-nums;
}
/* Road line along the bottom of the list, 6px clear of the card's bottom
border: the only dashed line in a card, as on Live Music. Each 50px step
is a 10px gap, a 30px dash and a 10px gap, fitted to the width (round), so
the line holds only whole dashes and both ends are a gap: its box starts
and ends 10px outside the words, so the dashes start and end exactly where
the words do. */
.fm-card::before {
content: "";
position: absolute;
left: calc(var(--fm-pad) - 10px);
right: calc(var(--fm-pad) - 10px);
bottom: 6px;
height: 5px;
background: linear-gradient(90deg, transparent 0 20%, var(--c-yellow) 20% 80%, transparent 80%) 0 0 / 50px 100% round;
pointer-events: none;
}
/* The tile, as a Live Music card's date: black on the logo yellow, the name
on the same left edge as the list under it */
.fm-card .fm-card__tile {
padding: .8em var(--fm-pad) .7em;
background: var(--c-yellow);
color: #000;
}
.fm-card .fm-card__name {
margin: 0;
color: #000;
font-size: calc(var(--fs-h2) * 1.3);
line-height: 1.05;
font-weight: 700;
letter-spacing: .01em;
text-transform: uppercase;
}
/* The same room above the first thing in the body as at its sides; below
the last row the same again plus the road line's 16px (6px clear, 5px of
dash, 5px more) */
.fm-card .fm-card__body {
min-width: 0;
padding: var(--fm-pad) var(--fm-pad) calc(var(--fm-pad) + 16px);
}
/* A wide card (a tablet held either way, a full-width card on a laptop)
sets its photos and rows in two even columns, twice the inset apart: the
browser balances them, so the two columns end within a row of each other
and the card ends level with itself. A photo row, a row and a label's line
to the row under it never split between the columns. Narrower cards
(phones, large text on a tablet, a card in a narrow column) keep one. A
page whose card should never split sets columns: auto on its body. */
@container fm-card (min-width: 36em) {
.fm-card .fm-card__body { columns: 2; column-gap: calc(var(--fm-pad) * 2); }
}
.fm-card .fm-photos,
.fm-card .fm-item { break-inside: avoid; }
.fm-card .fm-group { break-after: avoid; }
/* ---------- Photos inside a card ----------
For a page that puts its photos in a card: on the text column's two
edges, every photo in a row the same height, at 4:3, the same gap between
photos every way, and the same room under them as at their sides.
fm-photos--three sets the first photo across the column and the other two
side by side under it. */
.fm-card .fm-photos {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
gap: 10px;
margin: 0 0 var(--fm-pad);
}
.fm-card .fm-photos--three {
grid-auto-flow: row;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.fm-card .fm-photos--three img:first-child { grid-column: 1 / -1; }
.fm-card .fm-photos img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
}
/* "8-inch" and "...ALSO AVAILABLE (added cost)...": drawn as a Live Music
card's label (the small "LIVE MUSIC" over a band's name): the logo's two
stripes, small, then the words in bold yellow, spaced out. The words keep
their own case, as written. The stripes sit beside the first line when the
words take two. */
.fm-card .fm-group {
display: flex;
align-items: flex-start;
gap: .55em;
margin: 0 0 1em;
color: var(--c-yellow);
font-family: var(--f-head);
font-size: .9em;
line-height: 1.2;
font-weight: 700;
letter-spacing: .1em;
}
.fm-card .fm-group::before {
content: "";
flex: none;
width: 1.7em;
height: .6em;
margin-top: .3em;
background: linear-gradient(currentColor 0 34%, transparent 34% 66%, currentColor 66% 100%);
}
/* where the words take two lines (phones), "balance" breaks them into two
even lines, so "...ALSO AVAILABLE" sits over "(added cost)...", never with
the brackets split; narrower still they simply wrap */
.fm-card .fm-group__words { min-width: 0; text-wrap: balance; }
.fm-card .fm-items + .fm-group { margin-top: 1.8em; }
/* ---------- The rows ----------
A real list, one item to a row: the name on the left in white, a light
dotted leader, the price on the right of the same line in yellow, its
figures all one width; the note under the name in yellow italics, never
under the price. A long name wraps inside its own column and its price
stays on its first line. Every row is the same distance from the next.
Each row is its own container (fm-row), so its leader and its two part
prices follow the row's own width, in one column or two. */
.fm-card .fm-items {
margin: 0;
padding: 0;
list-style: none;
}
.fm-card .fm-item {
container: fm-row / inline-size;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: baseline;
/* the leader is drawn wide and cut to the row's sides (see below). Only the sides: a
row's top and bottom stay open, so a small link's invisible 44px tap area (the home
page's "READ ABOUT Chains Required") keeps its full height past the last line. A
browser without "clip" cuts all four sides. */
overflow: hidden;
overflow: clip visible;
}
.fm-card .fm-item + .fm-item { margin-top: .9em; }
.fm-card .fm-item__name {
grid-column: 1;
grid-row: 1;
min-width: 0;
color: #fff;
font-family: var(--f-head);
font-size: 1.1em;
font-weight: 500;
line-height: 1.25;
overflow-wrap: anywhere;
}
/* The leader: a light dotted line on the price's first line, so on its
baseline, drawn from the price back across the row (cut to the row) and
stopping a little short of the price. The name's words sit on top of it on
the card's black, with the same little room after them, so the dots run
from the end of the name's first line to the price, also when a long name
wraps. Items with no price have none. The words' little room is painted
but takes no space (the negative margin), so it never makes a name wrap
sooner.
The leader always shows at least 24px of dots (six): the price's left
padding is that much more than the two little rooms (.45em each, so .9em
of the price's size), so a name that would come closer wraps instead.
On the narrowest rows (below) the least is 12px, three dots. */
.fm-card .fm-item__words {
position: relative;
z-index: 1;
padding-right: .45em;
margin-right: -.45em;
background: #000;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.fm-card .fm-item__price:not(:has(.fm-price))::before,
.fm-card .fm-price:first-child::before {
content: "";
display: inline-block;
position: relative;
top: -.22em;
width: 100cqw;
margin: 0 .45em 0 calc(-100cqw - .45em);
border-bottom: 2px dotted rgba(250, 216, 25, .45);
}
.fm-card .fm-item__price {
grid-column: 2;
grid-row: 1 / span 2;
padding-left: calc(.9em + 24px);
color: var(--c-yellow);
font-family: var(--f-head);
font-size: 1.1em;
font-weight: 500;
line-height: 1.25;
font-variant-numeric: tabular-nums lining-nums;
text-align: right;
white-space: nowrap;
}
.fm-card .fm-item__desc {
grid-column: 1;
grid-row: 2;
display: block;
min-width: 0;
margin-top: .3em;
color: var(--c-yellow);
font-family: var(--f-body); /* the site's body face (Karla), so the cards and the pages read as one */
font-size: .9em;
font-style: italic;
line-height: 1.35;
overflow-wrap: break-word;
}
/* Two prices on one item ("5oz $4 • 13oz $10", as the home page's On Tap list
writes them): on one line where the row has room, one over the other where
it is narrow (phones, and large text on a small laptop), still on the
right, and the dot goes */
@container fm-row (max-width: 20em) {
.fm-card .fm-price { display: block; }
.fm-card .fm-price__sep { display: none; }
}
/* The narrowest rows (a 320px phone with large text): the names a step
smaller and the prices a step under them, the little rooms either side of
the dots .2em of each (.42em of the price's size together), and the least
leader 12px (three dots), so the longest single words ("Stronger",
"Pepperoni", "Combination") keep whole beside their prices and
"Pepperoni &" keeps to its first line */
@container fm-row (max-width: 11em) {
.fm-card .fm-item__name { font-size: 1em; }
.fm-card .fm-item__words { padding-right: .2em; margin-right: -.2em; }
.fm-card .fm-item__price { font-size: .9em; padding-left: calc(.42em + 12px); }
.fm-card .fm-item__price:not(:has(.fm-price))::before,
.fm-card .fm-price:first-child::before { margin: 0 .2em 0 calc(-100cqw - .2em); }
}
/* ---------- Rows with more under the name (added 29 Oct 2026 for the home
page's On Tap card and the Our Beers tap list) ----------
fm-item__after: one more line under the note, on the name's side (a second
note such as "Additional Flavors Available", or a small link). Give it
fm-item__desc too to draw it as a note.
A row whose price is long (fm-item__price--drop, four pours on one line) or
stacked (fm-item__price--pours) has four rows: the name, the note, the line
after it, and a last row that takes up any height the price has over the
words, so the name, the note and the line after it always sit close under
each other, however tall the price is. */
.fm-card .fm-item__after {
grid-column: 1;
grid-row: 3;
min-width: 0;
margin-top: .3em;
}
.fm-card .fm-item:has(> .fm-item__price--drop),
.fm-card .fm-item:has(> .fm-item__price--pours) { grid-template-rows: auto auto auto 1fr; }
.fm-card .fm-item > .fm-item__price--drop,
.fm-card .fm-item > .fm-item__price--pours { grid-row: 1 / -1; }
/* A long price on one line ("$3 • $8 • $16 • $24", the home page's On Tap
list): on the name's line where the row has room. Where it would leave
the name too little (phones, a narrow column), it moves to a line of its
own under the note, still on the right, the leader gone; any line after
the note then follows it. A two part price here stays on one line. */
@container fm-row (max-width: 21em) {
.fm-card .fm-item > .fm-item__price.fm-item__price--drop {
grid-column: 1 / -1;
grid-row: 3;
margin-top: .3em;
padding-left: 0;
/* on a line of its own it may wrap where the row is narrower still (a
small phone with large text and wider letter spacing): the HTML joins
each pour to its bullet with a no-break space, so it only ever wraps
after a bullet */
white-space: normal;
}
.fm-card .fm-item > .fm-item__price.fm-item__price--drop::before,
.fm-card .fm-item > .fm-item__price--drop .fm-price:first-child::before { content: none; }
.fm-card .fm-item__price--drop .fm-price { display: inline; }
.fm-card .fm-item__price--drop .fm-price__sep { display: inline; }
.fm-card .fm-item:has(> .fm-item__price--drop) > .fm-item__after { grid-row: 4; }
}
/* A beer's pours, one to a line (Our Beers):
5oz $3.00,
...
Where the row has room the group sits on the right like any price, its
first line on the name's line with the leader running to it, the sizes
lined up on the group's left and the amounts on its right. Where the row is
narrow (phones, a narrow column) the group moves under the note and runs
the row's width: each pour a line of its own, the size on the left, a
light dotted leader and the amount on the right, as the card's own rows.
On the right, the two columns are at least as wide as the longest size on
the page ("32oz Growler", 6.4em) and the longest amount ("$28.00", 3.5em),
so every row's sizes start on the same line and its amounts end on the
same line, however short its own pours are. */
.fm-card .fm-item__price--pours {
display: grid;
grid-template-columns: minmax(6.5em, max-content) minmax(3.5em, max-content);
justify-content: end;
column-gap: .5em;
row-gap: .2em;
align-content: start;
}
.fm-card .fm-item__price--pours .fm-price { display: contents; }
.fm-card .fm-item__price--pours .fm-price__size { text-align: left; }
.fm-card .fm-item__price--pours .fm-price__amt { text-align: right; }
/* the group is a grid, so the leader sits on the first size, not its part */
.fm-card .fm-item__price--pours .fm-price:first-child::before { content: none; }
.fm-card .fm-item__price--pours .fm-price:first-child .fm-price__size::before {
content: "";
display: inline-block;
position: relative;
top: -.22em;
width: 100cqw;
margin: 0 .45em 0 calc(-100cqw - .45em);
border-bottom: 2px dotted rgba(250, 216, 25, .45);
}
@container fm-row (max-width: 24em) {
.fm-card .fm-item > .fm-item__price.fm-item__price--pours {
grid-column: 1 / -1;
grid-row: 3;
grid-template-columns: minmax(0, 1fr) auto;
justify-content: stretch;
margin-top: .4em;
padding-left: 0;
}
.fm-card .fm-item:has(> .fm-item__price--pours) > .fm-item__after { grid-row: 4; }
.fm-card .fm-item__price--pours .fm-price:first-child .fm-price__size::before { content: none; }
.fm-card .fm-item__price--pours .fm-price__size {
display: flex;
align-items: baseline;
gap: .45em;
min-width: 0;
}
.fm-card .fm-item__price--pours .fm-price__size::after {
content: "";
flex: 1 1 auto;
min-width: 12px;
border-bottom: 2px dotted rgba(250, 216, 25, .45);
position: relative;
top: -.22em;
}
}
/* ---------- Buttons ----------
A link that leads on from the cards ("See the full menu"), drawn exactly
as the Live Music page's yellow button (lm-btn--yellow), so the site keeps
one button style: black words on the logo yellow, bold, 48px tall (44 is
the floor), white under the pointer. fm-button--black is the same button
for a yellow or pale band, where yellow would not show: black with the
logo yellow words, as Live Music's event cards draw it. fm-actions sets
one or more of them in a centred row with room between; on phones each
runs the column's width. */
.fm-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: .5em 1.1em;
border: 2px solid var(--c-yellow);
background: var(--c-yellow);
color: #000;
font-family: var(--f-head);
font-size: .95em;
font-weight: 700;
line-height: 1.2;
text-align: center;
text-decoration: none;
}
.fm-button:hover { border-color: #fff; background: #fff; color: #000; }
.fm-button--black { border-color: #000; background: #000; color: var(--c-yellow); }
.fm-button--black:hover { border-color: #000; background: #fff; color: #000; }
.fm-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
margin: 40px 0 0;
}
@media (max-width: 767px) {
.fm-actions { flex-direction: column; align-items: stretch; margin-top: 32px; }
.fm-actions .fm-button { display: flex; width: 100%; }
}
/* ---------- Phones ----------
A smaller inset, the same on every side, so the name on the tile, the
photos, the labels, the list and the road line all start and end on the
same two edges. */
@media (max-width: 767px) {
.fm-title { --fm-title-fs: calc(var(--fs-h1) * 1.3); margin-bottom: 40px; }
.fm-cards { gap: 24px; }
.fm-card { --fm-pad: 1.05em; }
.fm-card .fm-card__tile { padding: .75em var(--fm-pad) .65em; }
.fm-card .fm-photos { gap: 6px; }
}
/* Narrow phones with large text: the labels at Live Music's own label size
(.8em), so on a 320px phone "(added cost)..." still keeps to one line and
its brackets never part */
@media (max-width: 419px) {
html.a11y-fontsize .fm-card .fm-group { font-size: .8em; }
}
/* The smallest phones with large text: the inset in pixels the same as with
normal text (.8em of 21px is 16.8px), the same on every side, so a row
keeps room for its longest word, the dots and its price */
@media (max-width: 359px) {
html.a11y-fontsize .fm-card { --fm-pad: .8em; }
}
/* ---------- High contrast mode (toolbar) ----------
site.css paints every box black with white words and white borders; the
title's stripes and the road line are drawn, so they go, as the Live Music
page does. The labels' small stripes follow the words and turn white, and
the leaders turn white. */
html.a11y-contrast .fm-card { border: 2px solid #fff !important; }
html.a11y-contrast .fm-card .fm-card__tile { border-bottom: 2px solid #fff !important; }
html.a11y-contrast .fm-card::before,
html.a11y-contrast .fm-title::after { display: none; }
html.a11y-contrast .fm-card .fm-item__price:not(:has(.fm-price))::before,
html.a11y-contrast .fm-card .fm-price:first-child::before,
html.a11y-contrast .fm-card .fm-item__price--pours .fm-price__size::before,
html.a11y-contrast .fm-card .fm-item__price--pours .fm-price__size::after { border-bottom-color: #fff; }
/* the buttons: the site's rules paint them black with yellow underlined
words and a white edge, so they still read as buttons; the edge heavier */
html.a11y-contrast .fm-button { border-width: 3px !important; }
/* ---------- Print: black words on white paper ----------
Browsers leave backgrounds out when printing, which would leave white
words on white, so the cards print as black outlines with black words,
and the band prints white, so the page reads the same when a visitor
turns on "Background graphics" (Chrome) or "Print backgrounds" (Safari).
Photos have no use on paper. A page prints its own header, footer and
toolbar rules. */
@media print {
.fm { background: #fff; padding-top: 24px; padding-bottom: 24px; }
/* no toolbar on paper, so no lane for it: the same margin both sides */
.fm > .container { padding-left: 16px; padding-right: 16px; }
.fm-title { margin-bottom: 24px; }
.fm-cards { gap: 18px; }
.fm-card { background: #fff; color: #000; border: 2px solid #000; }
.fm-card .fm-card__tile { background: #fff; border-bottom: 2px solid #000; }
.fm-card .fm-item { break-inside: avoid; }
.fm-card .fm-item__name,
.fm-card .fm-item__price,
.fm-card .fm-item__desc,
.fm-card .fm-group { color: #000; }
.fm-card .fm-item__words { background: #fff; }
.fm-card .fm-item__price:not(:has(.fm-price))::before,
.fm-card .fm-price:first-child::before,
.fm-card .fm-item__price--pours .fm-price__size::before,
.fm-card .fm-item__price--pours .fm-price__size::after { border-bottom-color: #000; }
.fm-card::before { display: none; }
/* a button prints as an outlined box with black words */
.fm-button { border-color: #000; background: #fff; color: #000; }
.fm-card .fm-photos { display: none; }
/* the labels' small stripes print in black even with backgrounds off,
so the words never sit after an empty gap */
.fm-card .fm-group::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}