/* ==========================================================================
Brunch & Brew — shared component classes
--------------------------------------------------------------------------
Every declaration here was lifted from an inline style="" in the design
source. Nothing is invented and nothing is "tidied": where the source
authored two near-identical treatments with different numbers, both numbers
survive as separate modifiers.
========================================================================== */
/* --------------------------------------------------------------------------
Buttons — the pill with the 2px ink outline.
Sizes are named for their padding/size pair, not for a scale, because the
source used five distinct pairs and normalising them would move pixels.
-------------------------------------------------------------------------- */
.bb-btn {
display: inline-block;
border: 2px solid #231F20;
border-radius: 999px;
font-family: 'Neutraface Condensed', sans-serif;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
/* Labels centre in the pill. Matters as soon as a label wraps - the
"Live catering coming soon" button was ragged-left inside its pill. */
text-align: center;
}
.bb-btn--orange { background: #E47245; color: #FBF8F1; }
.bb-btn--ink { background: #231F20; color: #FBF8F1; }
/* padding / font-size pairs, exactly as authored */
.bb-btn--nav { padding: 10px 22px; font-size: 14px; } /* header Order Now */
.bb-btn--sm { padding: 12px 26px; font-size: 14px; } /* Get Directions, footer Order Now */
.bb-btn--md { padding: 13px 28px; font-size: 14px; } /* body CTAs */
.bb-btn--lg { padding: 15px 34px; font-size: 16px; } /* loyalty Sign Up Today */
.bb-btn--hero { padding: 15px 34px; font-size: 17px; } /* hero View Menu / Order Online */
/* Anchor colour has to be restated: site.css sets a{color:#E47245} globally. */
.bb-btn--orange:hover,
.bb-btn--orange:link,
.bb-btn--orange:visited { color: #FBF8F1; }
.bb-btn--ink:hover,
.bb-btn--ink:link,
.bb-btn--ink:visited { color: #FBF8F1; }
/* --------------------------------------------------------------------------
Titling label — the wide-tracked uppercase eyebrow used sitewide.
14px is the client's font floor; the Menu page authors two footer labels at
15px and those keep a modifier rather than being flattened to 14px.
-------------------------------------------------------------------------- */
.bb-label {
font-family: 'Neutraface Condensed Titling', sans-serif;
font-size: 14px;
letter-spacing: .22em;
text-transform: uppercase;
color: #231F20;
}
.bb-label--15 { font-size: 15px; }
.bb-label--tight { letter-spacing: .2em; }
/* --------------------------------------------------------------------------
Octagonal polygon — the house container shape (see CLAUDE.md).
Three layers: offset ink shape, ink stroke, content.
--bb-oct-cut outer corner cut
--bb-oct-cut-in inner corner cut
--bb-oct-off offset-shadow translation
NOTE: CLAUDE.md gives inner = outer - 4 + 2*sqrt(2). That holds for the
22px variant (22 -> 20.83, authored 20.8) but NOT for the 18px variant,
which the source authors as 17.2 where the formula gives 16.83. The
authored values are kept; this is a source fidelity choice, not a fix.
-------------------------------------------------------------------------- */
.bb-oct {
position: relative;
--bb-oct-cut: 22px;
--bb-oct-cut-in: 20.8px;
--bb-oct-off: 10px;
}
.bb-oct--18 {
--bb-oct-cut: 18px;
--bb-oct-cut-in: 17.2px;
--bb-oct-off: 8px;
}
.bb-oct__shadow {
position: absolute;
inset: 0;
transform: translate(var(--bb-oct-off), var(--bb-oct-off));
background: #231F20;
clip-path: polygon(
var(--bb-oct-cut) 0,
calc(100% - var(--bb-oct-cut)) 0,
100% var(--bb-oct-cut),
100% calc(100% - var(--bb-oct-cut)),
calc(100% - var(--bb-oct-cut)) 100%,
var(--bb-oct-cut) 100%,
0 calc(100% - var(--bb-oct-cut)),
0 var(--bb-oct-cut)
);
pointer-events: none;
}
.bb-oct__stroke {
position: relative;
background: #231F20;
padding: 2px;
clip-path: polygon(
var(--bb-oct-cut) 0,
calc(100% - var(--bb-oct-cut)) 0,
100% var(--bb-oct-cut),
100% calc(100% - var(--bb-oct-cut)),
calc(100% - var(--bb-oct-cut)) 100%,
var(--bb-oct-cut) 100%,
0 calc(100% - var(--bb-oct-cut)),
0 var(--bb-oct-cut)
);
}
.bb-oct__inner {
clip-path: polygon(
var(--bb-oct-cut-in) 0,
calc(100% - var(--bb-oct-cut-in)) 0,
100% var(--bb-oct-cut-in),
100% calc(100% - var(--bb-oct-cut-in)),
calc(100% - var(--bb-oct-cut-in)) 100%,
var(--bb-oct-cut-in) 100%,
0 calc(100% - var(--bb-oct-cut-in)),
0 var(--bb-oct-cut-in)
);
}
/* --------------------------------------------------------------------------
Inline icons (see inc/icons.php). The source sized each
with an inline style; those sizes are classes now.
-------------------------------------------------------------------------- */
.bb-icon {
width: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
flex: none;
}
.bb-icon--chev { width: 26px; height: 26px; stroke-width: 2.1; }
.bb-icon--18 { width: 18px; height: 18px; }
.bb-icon--22 { width: 22px; height: 22px; }
.bb-icon--24 { width: 24px; height: 24px; }
.bb-icon--26 { width: 26px; height: 26px; }
.bb-icon--28 { width: 28px; height: 28px; }
/* --------------------------------------------------------------------------
Round social / action buttons in the footer.
-------------------------------------------------------------------------- */
.bb-round {
width: 44px;
height: 44px;
background: #E47245;
border: 2px solid #231F20;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
color: #FBF8F1;
}
.bb-round:hover,
.bb-round:link,
.bb-round:visited { color: #FBF8F1; }
/* --------------------------------------------------------------------------
Rich-text wrapper.
ACF WYSIWYG fields emit their own , , etc., which would replace
the source's inline-styled paragraph and lose its type. Every editable
prose block renders inside .bb-rt so the type survives the client's edits.
Page CSS sets the size/measure per section via .bb-rt overrides.
-------------------------------------------------------------------------- */
/* A `ch` measure resolves against the element's OWN font-size. The design put
max-width:NNch on the paragraph (17px); the port moved several of those onto
this wrapper, which inherited 16px and so wrapped ~6% early. Matching the
wrapper to its paragraphs makes every wrapper-level ch measure correct. */
.bb-rt { font-size: 17px; }
.bb-rt > :first-child { margin-top: 0; }
.bb-rt > :last-child { margin-bottom: 0; }
.bb-rt p {
font-size: 17px;
line-height: 1.6;
color: #231F20;
margin: 0 0 16px;
}
.bb-rt a {
color: #E47245;
font-weight: 700;
text-decoration: none;
border-bottom: 2px solid #E47245;
}
.bb-rt a:hover { color: #C4552B; border-bottom-color: #C4552B; }
.bb-rt ul,
.bb-rt ol { font-size: 17px; line-height: 1.6; color: #231F20; margin: 0 0 16px; padding-left: 1.2em; }
.bb-rt li { margin: 0 0 6px; }
.bb-rt strong { font-weight: 700; }
/* --------------------------------------------------------------------------
Form fields — Contact, Careers and Catering.
Markup and styling only; submission is Gravity Forms (see README).
-------------------------------------------------------------------------- */
.bb-field {
width: 100%;
box-sizing: border-box;
background: #E5E3DA;
border: 1.5px solid #231F20;
border-radius: 8px;
padding: 13px 14px;
font-size: 16px;
color: #231F20;
font-family: 'Neutra Text', 'Futura', 'Century Gothic', sans-serif;
}
.bb-field:focus {
outline: none;
border-color: #231F20 !important;
box-shadow: 0 0 0 3px #EEDCCB;
}
/* The custom dropdown arrow applied to every