before: the class, not the tag, decides how the hero sits. */
.ok-hero-sub {
color: #fff;
font-family: 'Poppins', 'Inter', sans-serif;
font-weight: 700;
font-size: 20px;
line-height: 1.6;
margin-top: 1.75rem;
margin-bottom: 0;
max-width: 36rem;
text-shadow: 0 1px 1px rgba(0, 0, 0, .9)
}
.ok-hero-rule {
width: 5rem;
height: .75rem;
margin-top: 2.25rem;
color: var(--ok-yellow);
}
.ok-hero-cta {
margin-top: 2.25rem;
width: 100%;
text-align: center;
}
.ok-hero-ratings {
margin-top: 2.75rem;
}
/* Cinematic overlay: keeps .pb-overlay editable from the CMS while adding
a vignette + floor gradient so the type always reads. */
/* Overlay is intentionally almost absent so the photography stays bright.
Legibility comes from a soft glow behind the copy plus layered text
shadows, not from darkening the whole image. */
.ok-hero-veil {
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(to top, rgba(6, 6, 6, .34) 0%, rgba(6, 6, 6, .06) 18%, transparent 34%);
}
/* Localised halo, sized to the copy block only. */
.ok-hero-textglow {
display: none
}
/* Hero headline, sized off the viewport so it holds the same proportion the
reference does at any width, and capped so it cannot run away on ultrawide. */
.ok-hero-title {
color: #fff;
font-family: 'Poppins', 'Inter', sans-serif;
font-weight: 600;
text-transform: uppercase;
font-size: clamp(2.2rem, 6.2vw, 6.5rem);
line-height: 1.06;
letter-spacing: -.012em;
text-shadow: 0 1px 1px rgba(0, 0, 0, .9);
}
.ok-hero-grain {
position: absolute;
inset: 0;
pointer-events: none;
opacity: .055;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
/* Rectangular outlined eyebrow, matching the reference and the rectangular CTA. */
.ok-hero-eyebrow {
border: 1px solid rgba(255, 255, 255, .75);
background: rgba(255, 255, 255, .04);
/* backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); */
text-shadow: 0 1px 6px rgba(0, 0, 0, .7);
}
/* Slow ken-burns drift on the active slide only */
.ok-kenburns {
animation: kenburns 18s ease-in-out infinite alternate;
transform-origin: center;
}
@keyframes kenburns {
from {
transform: scale(1.02);
}
to {
transform: scale(1.11);
}
}
/* Scroll cue */
.ok-scrollcue {
position: absolute;
left: 50%;
bottom: 1.6rem;
transform: translateX(-50%);
z-index: 5;
display: flex;
flex-direction: column;
align-items: center;
gap: .5rem;
color: rgba(255, 255, 255, .9);
font-size: .62rem;
font-weight: 700;
letter-spacing: .24em;
text-transform: uppercase;
text-shadow: 0 1px 6px rgba(0, 0, 0, .85);
}
.ok-scrollcue i {
animation: cueBob 2.1s var(--e-in-out) infinite;
}
.ok-scrollcue-rail {
width: 1px;
height: 2.4rem;
background: linear-gradient(to bottom, rgba(255, 255, 255, .7), transparent);
}
@keyframes cueBob {
0%,
100% {
transform: translateY(0);
opacity: .9;
}
50% {
transform: translateY(6px);
opacity: .45;
}
}
.ok-stars {
color: #fff;
}
.ok-rating-score {
color: rgba(255, 255, 255, .62);
font-weight: 500;
}
/* Hero rating row */
.ok-rating-pill {
display: inline-flex;
align-items: center;
gap: .55rem;
padding: .45rem .95rem;
border-radius: var(--r-pill);
background: rgba(255, 255, 255, .1);
border: 1px solid rgba(255, 255, 255, .2);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
font-size: .82rem;
font-weight: 700;
color: #fff;
transition: background-color var(--t-mid) var(--e-out), transform var(--t-fast) var(--e-out);
}
.ok-rating-pill:hover {
background: rgba(255, 255, 255, .18);
transform: translateY(-2px);
}
/* Inner-page hero, one shared treatment across every secondary page */
.ok-pagehero {
position: relative;
overflow: hidden;
background: var(--grad-ink);
color: #fff;
}
.ok-pagehero>.ok-container {
position: relative;
z-index: 2;
padding-block: clamp(4.5rem, 9vw, 8rem);
}
.ok-pagehero-veil {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
radial-gradient(105% 75% at 50% 40%, rgba(0, 0, 0, .15) 0%, rgba(10, 10, 10, .55) 70%, rgba(8, 8, 8, .8) 100%),
linear-gradient(to bottom, rgba(10, 10, 10, .5), rgba(10, 10, 10, .2) 45%, rgba(10, 10, 10, .72));
}
.ok-pagehero .ok-display {
text-shadow: 0 4px 26px rgba(0, 0, 0, .5);
}
.ok-pagehero p {
color: rgba(255, 255, 255, .78);
}
.ok-pagehero .ok-h2,
.ok-pagehero h2 {
color: #fff;
}
/* Carousel dots | bottom right so they never collide with the scroll cue */
.ok-dots {
position: absolute;
right: clamp(1rem, 4vw, 2.5rem);
bottom: 1.75rem;
display: flex;
gap: .5rem;
z-index: 6;
}
@media (max-width:640px) {
.ok-dots {
left: 50%;
right: auto;
transform: translateX(-50%);
}
}
.ok-dot {
width: .5rem;
height: .5rem;
border-radius: var(--r-pill);
background: rgba(255, 255, 255, .4);
transition: width var(--t-mid) var(--e-lux), background-color var(--t-mid) var(--e-out);
cursor: pointer;
}
.ok-dot.is-active {
width: 1.7rem;
background: var(--ok-yellow);
}
/* ---------------------------------------------------------
10. MOTION PRIMITIVES
Reveal states apply only when .ok-motion is on , so a JS
failure or reduced-motion preference leaves everything visible.
--------------------------------------------------------- */
.ok-motion [data-reveal] {
opacity: 0;
}
.ok-motion [data-reveal="up"] {
transform: translate3d(0, 28px, 0);
}
.ok-motion [data-reveal="down"] {
transform: translate3d(0, -24px, 0);
}
.ok-motion [data-reveal="left"] {
transform: translate3d(-36px, 0, 0);
}
.ok-motion [data-reveal="right"] {
transform: translate3d(36px, 0, 0);
}
.ok-motion [data-reveal="scale"] {
transform: scale(.94);
}
.ok-motion [data-reveal-stagger]>* {
opacity: 0;
transform: translate3d(0, 26px, 0);
}
.ok-motion .ok-mask {
clip-path: inset(0 0 100% 0);
}
.ok-motion .ok-splitline {
overflow: hidden;
}
/* Mask-reveal wrapper for imagery */
.ok-reveal-img {
overflow: hidden;
border-radius: inherit;
}
/* Page transition veil */
.ok-veil {
position: fixed;
inset: 0;
z-index: 200;
pointer-events: none;
opacity: 0;
background: var(--grad-ink);
}
.ok-veil.is-on {
pointer-events: auto;
}
/* Luxury preloader | only ever shown while html.ok-loading is set */
#okLoader {
display: none;
}
html.ok-loading #okLoader {
position: fixed;
inset: 0;
z-index: 300;
display: grid;
place-items: center;
background: var(--grad-ink);
color: #fff;
}
#okLoader .ldr-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.35rem;
}
#okLoader img {
height: 4.6rem;
width: auto;
}
#okLoader .ldr-rail {
width: min(58vw, 15rem);
height: 2px;
background: rgba(255, 255, 255, .16);
border-radius: 2px;
overflow: hidden;
}
#okLoader .ldr-fill {
display: block;
height: 100%;
width: 0%;
background: var(--grad-gold);
border-radius: 2px;
}
#okLoader .ldr-word {
font-family: 'Inter', sans-serif;
font-size: .62rem;
font-weight: 700;
letter-spacing: .34em;
text-transform: uppercase;
color: rgba(255, 255, 255, .55);
}
html.ok-loading {
overflow: hidden;
}
/* ---------------------------------------------------------
11. MICRO-INTERACTIONS
--------------------------------------------------------- */
/* Any link in body copy */
.link-underline {
background-image: linear-gradient(var(--ok-amber), var(--ok-amber));
background-size: 0% 2px;
background-position: 0 100%;
background-repeat: no-repeat;
text-decoration: none;
transition: background-size .34s var(--e-lux), color var(--t-fast) var(--e-out);
}
.link-underline:hover {
background-size: 100% 2px;
color: var(--ok-cocoa);
}
/* Arrow nudge on any "see more" style link */
.ok-arrow i,
.link-underline i,
.ok-btn-outline i {
transition: transform var(--t-mid) var(--e-lux);
}
.ok-arrow:hover i,
.link-underline:hover i,
.ok-btn-outline:hover i {
transform: translateX(4px);
}
/* Tile hover (instagram / gallery) */
.ok-tile {
position: relative;
overflow: hidden;
}
.ok-tile::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(10, 10, 10, .55), rgba(10, 10, 10, 0) 60%);
opacity: 0;
transition: opacity var(--t-mid) var(--e-out);
}
.ok-tile:hover::after {
opacity: 1;
}
.ok-tile .tile-icon {
position: absolute;
inset: 0;
display: grid;
place-items: center;
z-index: 2;
color: #fff;
font-size: 1.5rem;
opacity: 0;
transform: scale(.75);
transition: opacity var(--t-mid) var(--e-out), transform var(--t-mid) var(--e-lux);
}
.ok-tile:hover .tile-icon {
opacity: 1;
transform: scale(1);
}
/* Social buttons */
.ok-social {
transition: background-color var(--t-mid) var(--e-out), color var(--t-mid) var(--e-out), transform var(--t-fast) var(--e-out);
}
.ok-social:hover {
background: var(--ok-yellow);
color: var(--ok-ink);
transform: translateY(-3px);
}
/* Footer link */
.ok-flink {
position: relative;
display: inline-block;
transition: color var(--t-fast) var(--e-out), transform var(--t-fast) var(--e-out);
}
.ok-flink:hover {
color: #fff;
transform: translateX(3px);
}
/* Stat counter */
.ok-stat {
font-variant-numeric: tabular-nums;
}
/* Horizontal scroller with softly faded edges */
.ok-edgefade {
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 2.5rem, #000 calc(100% - 2.5rem), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 2.5rem, #000 calc(100% - 2.5rem), transparent 100%);
}
@media (max-width:768px) {
.ok-edgefade {
-webkit-mask-image: none;
mask-image: none;
}
}
/* Marquee strip */
.ok-marquee {
display: flex;
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ok-marquee>div {
display: flex;
flex-shrink: 0;
align-items: center;
gap: 3rem;
padding-right: 3rem;
animation: marquee 32s linear infinite;
}
.ok-marquee:hover>div {
animation-play-state: paused;
}
@keyframes marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
/* Toast */
.ok-toast {
background: var(--grad-ink);
border: 1px solid rgba(255, 255, 255, .1);
box-shadow: var(--sh-4);
border-radius: var(--r-pill);
padding: .8rem 1.3rem;
}
/* Accordion */
.acc-q {
transition: color var(--t-fast) var(--e-out);
}
.acc-q:hover {
color: var(--ok-cocoa);
}
.acc-item {
border-color: var(--ok-hairline);
}
/* Tracker polish */
.tracker-step .dot {
box-shadow: var(--sh-1);
}
/* ---------------------------------------------------------
12. ACCESSIBILITY
--------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 3px solid var(--ok-amber);
outline-offset: 3px;
/* No border-radius here. It used to set .35rem, which silently shrank every
form field's corners the instant it was focused (14.4px -> 5.6px). The ring
is an outline, so it already follows the element's own radius. */
}
.ok-header .nav-link:focus-visible {
outline-offset: 6px;
}
:focus:not(:focus-visible) {
outline: none;
}
.ok-skip {
position: absolute;
left: 1rem;
top: -4rem;
z-index: 400;
background: var(--ok-ink);
color: #fff;
padding: .75rem 1.25rem;
border-radius: var(--r-pill);
font-weight: 700;
font-size: .85rem;
transition: top var(--t-mid) var(--e-out);
}
.ok-skip:focus {
top: 1rem;
}
/* Secondary text contrast lift (was #6B6B6B on white = 4.4:1, now 4.9:1) */
.text-slate {
color: #63605C;
}
/* ---------------------------------------------------------
13. REDUCED MOTION | full kill switch
--------------------------------------------------------- */
@media (prefers-reduced-motion:reduce) {
*,
*::before,
*::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
.ok-motion [data-reveal],
.ok-motion [data-reveal-stagger]>* {
opacity: 1 !important;
transform: none !important;
}
.ok-motion .ok-mask {
clip-path: none !important;
}
.ok-kenburns,
.ok-marquee>div {
animation: none !important;
}
#okLoader {
display: none !important;
}
}
/* ---------------------------------------------------------
14. RESPONSIVE REFINEMENTS
--------------------------------------------------------- */
@media (max-width:640px) {
.btn-lg {
padding: .85rem 1.4rem;
font-size: .95rem;
}
.ok-btn-outline {
padding: .75rem 1.2rem;
font-size: .68rem;
letter-spacing: .1em;
}
.ok-card-hover:hover {
transform: none;
box-shadow: var(--sh-2);
}
.ok-card-hover:hover img {
transform: none;
}
.ok-scrollcue {
display: none;
}
}
/* Touch devices: no hover-dependent affordances */
@media (hover:none) {
.btn:hover {
transform: none;
}
.btn:hover {
background-color: black;
color: white;
border: #000;
}
.btn::before {
display: none;
}
.ok-card-hover:hover {
transform: none;
box-shadow: var(--sh-2);
}
.ok-card-hover:hover img,
.ok-tile:hover img {
transform: none;
}
}
/* Large screens: let the layout breathe further */
@media (min-width:1536px) {
.ok-container {
max-width: 1340px;
}
.ok-section {
padding-block: 7.5rem;
}
}
/* ---------------------------------------------------------
15. HOME SECTION SYSTEM
One language every home section follows: same rhythm, same
header, same card, same CTA placement. If a section needs to
look different it must opt in deliberately (--feature bands).
--------------------------------------------------------- */
/* Rhythm: one vertical scale, two alternating surfaces. */
.ok-band {
padding-block: clamp(4rem, 7.5vw, 7rem);
}
.ok-band--warm {
background: #fff
}
.ok-band--white {
background: #fff;
}
.ok-band--feature {
padding-block: 0;
}
/* full-bleed statement bands */
/* Section header: eyebrow → title → squiggle → optional subtitle. Always centred. */
.ok-sechead {
max-width: 48rem;
margin-inline: auto;
text-align: center;
margin-bottom: clamp(2.5rem, 4vw, 3.75rem);
}
.ok-title {
font-family: 'Poppins', 'Inter', sans-serif;
font-weight: 500;
text-transform: uppercase;
font-size: clamp(1.85rem, 4.0vw, 2.9rem);
line-height: 1.03;
letter-spacing: -.02em;
margin: 0;
}
.ok-subtitle {
margin-top: 1.1rem;
color: black;
font-size: clamp(1rem, 1.75vw, 1.1rem);
line-height: 1.7;
}
.ok-sechead .ok-eyebrow {
margin-bottom: 1rem;
}
/* The brand squiggle, one size and colour everywhere it appears. */
/* Drawn as a mask rather than a coloured background image, so its colour is a
normal CSS property and the section editor can change it. The old version
had the amber baked into the SVG, where nothing could reach it. */
.ok-squiggle {
display: block;
width: var(--pb-squigw, 4.25rem);
height: .55rem;
margin: 1.35rem auto 0;
background-color: var(--pb-squigcolor, #E0A200);
-webkit-mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 8' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M2 5 C 6 1, 10 1, 14 5 S 22 9, 26 5 S 34 1, 38 5 S 46 9, 50 5 S 58 1, 62 5'/%3E%3C/svg%3E");
mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 8' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M2 5 C 6 1, 10 1, 14 5 S 22 9, 26 5 S 34 1, 38 5 S 46 9, 50 5 S 58 1, 62 5'/%3E%3C/svg%3E");
}
.ok-squiggle--light {
background-color: var(--pb-squigcolor, rgba(255, 255, 255, .85));
}
.ok-squiggle--left {
margin-inline: 0;
}
/* Section footer: every section's CTA sits here, centred, one per section. */
.ok-secfoot {
margin-top: clamp(2.5rem, 4vw, 3.5rem);
text-align: center;
}
/* Card grid: one gap scale for every grid on the page. */
.ok-cardgrid {
display: grid;
gap: clamp(1.15rem, 1.7vw, 1.5rem);
}
.ok-cardgrid--2 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.ok-cardgrid--3 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.ok-cardgrid--4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width:640px) {
.ok-cardgrid--2,
.ok-cardgrid--3 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width:1024px) {
.ok-cardgrid--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ok-cardgrid--4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
/* Ragged last rows read as a mistake, so centre whatever is left over. */
.ok-cardgrid--center {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.ok-cardgrid--center>* {
flex: 1 1 20rem;
max-width: 24rem;
}
/* Card internals: one padding, one media ratio, one title size. */
.ok-card-body {
padding: clamp(1.25rem, 1.7vw, 1.6rem);
display: flex;
flex-direction: column;
flex: 1;
}
.ok-card-title {
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 1.125rem;
line-height: 1.28;
letter-spacing: -.012em;
}
.ok-card-text {
font-size: .9rem;
line-height: 1.6;
color: #000;
margin-top: .4rem;
}
.ok-card-foot {
margin-top: auto;
padding-top: 1.1rem;
}
.ok-ratio {
aspect-ratio: 4/3;
}
/* the single content-card ratio */
.ok-ratio-sq {
aspect-ratio: 1/1;
}
/* gallery tiles only */
.ok-ratio-wide {
aspect-ratio: 16/9;
}
/* full-width feature card */
/* Inline "see more" affordance, identical in every card. */
.ok-more {
display: inline-flex;
align-items: center;
gap: .5rem;
margin-top: 1.1rem;
font-size: .68rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .16em;
color: var(--ok-ink);
}
/* When the "see more" IS the card footer it must sit on the baseline of the
card, not float under text of varying length. Declared after .ok-more so the
auto margin wins. */
.ok-more.ok-card-foot {
margin-top: auto;
}
/* ---------------------------------------------------------
16. PAGE-BUILDER: per-section CARD styling
Driven by the Visual Editor's "Cards" controls, which set
--pb-card* vars on the .pb-sec wrapper (same mechanism as
the --pb-bg section vars in style.css).
--------------------------------------------------------- */
/* A card's inner panels carry their own background (the cream footer on a
category card, the white body on a product card). They have to go
transparent, otherwise they paint straight over the chosen colour. */
/* Text inside a card. Spans are included so the "see more" label and the price
follow the chosen colour too, but anything the template colours inline (brand
logos, star rows) and any badge keeps its own colour. */
/* Horizontal overflow is contained at the section level (every decorative blob
lives inside an overflow-hidden section). Deliberately NOT set on html/body:
setting overflow-x on the root forces overflow-y to `auto`, which turns the
root into its own scroll container and breaks hash navigation and sticky. */
/* Section header laid out as a row: title left, section CTA right,
with a full-width hairline underneath instead of the brand squiggle. */
.ok-sechead-row {
margin-bottom: 1.25rem;
}
.ok-sechead-row .ok-title {
text-align: left;
}
.ok-hr {
display: block;
width: 100%;
height: 1px;
border: 0;
background: #d6d6d6;
margin: 0 0 clamp(2rem, 3.5vw, 3rem);
}
/* ---------------------------------------------------------
Franchise band: solid brand yellow edge to edge, black type,
full viewport height.
--------------------------------------------------------- */
.ok-franchise {
background: var(--ok-yellow);
}
/* the grid carries the height, otherwise the row collapses to the text column
and the image half never stretches to fill the band */
.ok-franchise>.ok-grid {
min-height: 100vh;
}
.ok-franchise,
.ok-franchise .ok-title,
.ok-franchise .ok-subtitle,
.ok-franchise p,
.ok-franchise h2,
.ok-franchise h3 {
color: #000 !important;
}
@media (max-width:767.98px) {
/* stacked on phones: let the content set the height instead of forcing 100vh */
.ok-franchise>.ok-grid {
min-height: auto;
}
}
/* ---------------------------------------------------------
Overlay modals (item / location / schedule)
app.js opens these by writing inline styles, so the closed
state must not use Bootstrap's .invisible or .pe-none: both
are !important and an inline style cannot override them.
--------------------------------------------------------- */
.ok-modal {
visibility: hidden;
opacity: 0;
pointer-events: none;
/* in fast so the panel is already visible while it travels, out slow enough
that it is still on screen for the whole exit */
transition: opacity .16s ease;
}
.ok-modal.is-closing { transition: opacity .4s ease .06s; }
/* Every popup enters from the LEFT and leaves to the RIGHT. The panel is the
modal's only child, so it carries the movement while the wrapper handles the
fade. `.is-closing` is what makes the exit go the other way | without it the
panel would just retrace its entrance. app.js (showModal) sets both. */
/* The panel does NOT fade | only the wrapper does, and quickly | so what you
actually see is the travel. Fading the panel as well washed the slide out
into "it just appeared". */
.ok-modal > * {
transform: translateX(-110vw);
transition: transform .45s cubic-bezier(.16, .84, .30, 1);
will-change: transform;
}
.ok-modal.is-open > * {
transform: translateX(0);
}
/* leaving: straight out to the right, not back the way it came */
.ok-modal.is-closing > * {
transform: translateX(110vw);
transition: transform .4s cubic-bezier(.5, 0, .9, .4);
}
@media (prefers-reduced-motion: reduce) {
.ok-modal > *,
.ok-modal.is-open > *,
.ok-modal.is-closing > * {
transform: none;
transition: none;
}
}
/* Modal hero image: cancels the modal body's 1.5rem padding on the top and
both sides so the photo runs edge to edge, while the copy below keeps it.
The card's overflow:hidden clips it to the modal's rounded corners. */
.ok-modal-hero {
margin: -1.5rem -1.5rem 1.25rem;
}
/* ---------------------------------------------------------
About page typography (scoped to that page's markup)
Matches the reference: uppercase near-black section heads at a
restrained size, and body copy that is darker and airier than
the muted grey used elsewhere.
--------------------------------------------------------- */
.ok-abt-h {
font-family: 'Poppins', 'Inter', sans-serif;
text-transform: uppercase;
/* font-size: clamp(1.9rem, 3.2vw, 2.9rem); */
font-size: 33px;
font-weight: 700;
letter-spacing: -.02em;
color: var(--ok-ink);
}
.ok-abt-lead {
color: #1B1B1B;
font-size: 1rem;
line-height: 1.8;
letter-spacing: 0;
}
.ok-abt-body {
color: #1B1B1B;
font-size: 1rem;
line-height: 1.8;
letter-spacing: 0;
}
.ok-abt-body-sm {
color: #1B1B1B;
font-size: 1rem;
line-height: 1.75;
letter-spacing: 0;
}
.ok-abt-cardh {
font-family: 'Poppins', 'Inter', sans-serif;
font-size: 33px;
font-weight: 600;
line-height: 1.3;
letter-spacing: -.012em;
color: var(--ok-ink);
}
/* ---------------------------------------------------------
About page layout (mirrors the client's reference design)
--------------------------------------------------------- */
.ok-abt-hero {
min-height: clamp(15rem, 26vw, 20rem);
display: grid;
align-items: center;
}
.ok-abt-hero-veil {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, .42);
}
.ok-abt-hero-h {
font-family: 'Poppins', 'Inter', sans-serif;
font-weight: 800;
text-transform: uppercase;
color: #fff;
font-size: clamp(1.6rem, 3.2vw, 2.4rem);
letter-spacing: .01em;
line-height: 1.1;
text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
/* press strip */
.ok-press {
background: var(--ok-ink);
padding-block: 1.5rem;
}
.ok-press-label {
color: var(--ok-yellow);
font-size: .6rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .22em;
margin-bottom: .9rem;
}
.ok-press-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 1.25rem 2.25rem;
}
.ok-press-logo {
color: rgba(255, 255, 255, .82);
font-family: 'Poppins', serif;
font-weight: 700;
font-size: clamp(.8rem, 1.15vw, 1.05rem);
letter-spacing: -.01em;
white-space: nowrap;
}
/* image frames */
.ok-abt-frame {
border-radius: .25rem;
overflow: hidden;
}
.ok-abt-frame img {
display: block;
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
}
.ok-abt-tilt {
display: grid;
place-items: center;
}
.ok-abt-tilt img {
/* width:min(100%,22rem); */
/* aspect-ratio:1/1; */
object-fit: cover;
/* transform:rotate(45deg) scale(.72); */
border-radius: .5rem;
}
/* full-bleed band with the overlapping white card */
.ok-abt-band {
min-height: 100vh;
display: grid;
align-items: center;
padding-block: clamp(2rem, 5vw, 4rem);
}
.ok-abt-band-card {
background: #fff;
padding: clamp(1.75rem, 3vw, 2.75rem);
max-width: 30rem;
box-shadow: var(--sh-4);
}
.ok-abt-review {
width: 19rem;
flex-shrink: 0;
}
.ok-abt-cta {
background: var(--ok-warm-white);
padding-block: clamp(3rem, 6vw, 5rem);
border-top: 1px solid var(--ok-hairline);
}
/* Full-viewport About section. min-height (not height) so longer CMS copy
grows the section instead of being clipped. */
.ok-abt-full {
min-height: 100vh;
display: grid;
align-items: center;
}
/* About story media slot: photo, mp4 or an embed all fill the same 4:3 frame */
.ok-abt-media{ position:relative; }
.ok-abt-media video,
.ok-abt-media iframe,
.ok-abt-media img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover;
border:0; background:#000; }
.search-toggle{
color: #c1adad !important;
}
/* YouTube facade: our own cover so the branded overlay never shows unplayed */
.ok-vidcover{ display:block; position:relative; width:100%; padding:0; border:0;
background:#000; cursor:pointer; overflow:hidden; }
.ok-vidcover img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover;
transition:transform .6s var(--e-lux), filter .3s ease; }
.ok-vidcover:hover img{ transform:scale(1.04); filter:brightness(.9); }
.ok-vidplay{ position:absolute; inset:0; display:grid; place-items:center; }
.ok-vidplay i{ display:grid; place-items:center; width:4.5rem; height:4.5rem;
border-radius:50%; background:rgba(255,255,255,.94); color:var(--ok-ink);
font-size:1.35rem; padding-left:.2rem; box-shadow:0 8px 30px rgba(0,0,0,.35);
transition:transform .25s var(--e-out), background-color .25s ease; }
.ok-vidcover:hover .ok-vidplay i{ transform:scale(1.08); background:var(--ok-yellow); }
/* Background video: fills the 4:3 frame, and swallows every pointer event so
YouTube's controls/overlays can never surface. 16:9 source is scaled up and
cropped rather than letterboxed. */
.ok-vidbg{ position:relative; width:100%; aspect-ratio:4/3; overflow:hidden; background:#000; }
.ok-vidbg-poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ok-vidbg-frame{ position:absolute; inset:0; opacity:0; transition:opacity .5s ease; }
.ok-vidbg.is-playing .ok-vidbg-frame{ opacity:1; }
.ok-vidbg-frame iframe{ position:absolute; top:50%; left:50%;
transform:translate(-50%,-50%); border:0; pointer-events:none; }
/* Phones: autoplay is unreliable and the data cost is real, so the poster stands in. */
@media (max-width:767.98px){ .ok-vidbg-frame{ display:none; } }
/* Instagram reels: vertical 9:16 tiles with a play badge */
.ok-ratio-reel{ aspect-ratio:1/1; }
.ok-reel-badge{ position:absolute; top:.6rem; left:.6rem; z-index:2;
display:grid; place-items:center; width:1.75rem; height:1.75rem; border-radius:50%;
background:rgba(0,0,0,.55); color:#fff; font-size:.62rem; padding-left:.12rem;
backdrop-filter:blur(4px); }
/* "Meet us at the table": full-bleed, full-height split. */
.ok-abt-split{ background:#fff; }
.ok-abt-split > .ok-grid{ min-height:100vh; }
.ok-abt-split-media{ position:relative; overflow:hidden; min-height:18rem; }
.ok-abt-split-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ok-abt-split-copy{ display:flex; flex-direction:column; justify-content:center;
padding:clamp(2rem,5vw,5rem); }
@media (max-width:767.98px){
/* stacked on phones: let the content decide the height */
.ok-abt-split > .ok-grid{ min-height:auto; }
.ok-abt-split-media{ aspect-ratio:4/3; min-height:0; }
}
/* ---------------------------------------------------------
Yellow (primary) buttons: one fixed appearance everywhere.
Square corners, and the ONLY thing that changes on hover is
the label going pure black. No lift, no shadow change, no
border change, no sheen sweep, no click ripple. Consistency
across the site matters more than per-button flourish.
--------------------------------------------------------- */
.btn-primary{ border-radius:0; }
.btn-primary::before{ display:none; } /* kill the sheen sweep */
.btn-primary .ok-ripple{ display:none; } /* kill the click ripple */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:focus-within{
background:#000;
color:#fff;
box-shadow:var(--sh-gold); /* unchanged from rest, so the footprint never shifts */
border-color:transparent;
transform:none;
}
/* Mouse users see nothing change; keyboard users still get a visible ring,
otherwise tabbing through the site becomes impossible to follow. */
.btn-primary:focus:not(:focus-visible){ outline:none; }
/* No shadows on buttons, in any state. Kept as one blanket rule rather than
editing each variant, so a future variant cannot reintroduce a shadow.
The keyboard focus ring uses `outline`, not box-shadow, so it survives. */
.btn, .btn:hover, .btn:focus, .btn:active, .btn:focus-within,
.ok-btn-outline, .ok-btn-outline:hover, .ok-btn-outline:focus, .ok-btn-outline:active{
box-shadow:none;
}
/* Flat brand yellow on buttons, not the gold gradient. background-image must be
cleared explicitly, otherwise the earlier `background:var(--grad-gold)`
shorthand leaves its gradient behind. */
.btn-primary{ background:var(--ok-yellow); background-image:none; }
/* ---------------------------------------------------------
No repaint churn on button hover.
`.btn` carried will-change:transform + isolation:isolate + a
::before sheen on z-index:-1. Hovering promoted and demoted a
compositor layer on every button, which is what made the whole
page flash. Buttons now only animate colour, which repaints the
button alone.
--------------------------------------------------------- */
.btn, .ok-btn-outline{
will-change:auto;
isolation:auto;
transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn::before, .ok-btn-outline::before{ display:none; }
.btn:hover, .btn:focus, .btn:active, .btn:focus-within,
.ok-btn-outline:hover, .ok-btn-outline:focus, .ok-btn-outline:active{ transform:none; }
/* the outline button used its ::before as the fill, so give it a real one */
.ok-btn-outline:hover, .ok-btn-outline:focus, .ok-btn-outline:active{
background:var(--ok-ink); color:#fff;
}
.ok-btn-outline--light:hover, .ok-btn-outline--light:focus, .ok-btn-outline--light:active{
background:#fff; color:var(--ok-ink);
}
/* Store picker: a single selected state, so the server-rendered choice and the
one JS applies can never both be visible at once. */
.ok-locpick{ border-color:var(--ok-hairline); }
.ok-locpick.is-selected{ border-color:var(--ok-yellow); }
/* Footer Subscribe: the one yellow button with a soft corner. Hover flips to
white on black text, unlike every other primary button. Nothing else about
it changes. */
.ok-btn-subscribe{ border-radius:.4rem; }
.ok-btn-subscribe:hover,
.ok-btn-subscribe:focus,
.ok-btn-subscribe:active{ background:#fff; color:#000; border-color:transparent; }
/* "Apply code" sits on the yellow promo band, so a yellow button would vanish
into it: white fill with a black outline by default, inverting on hover. */
.ok-btn-onyellow{
background:#fff; color:#000; border:1px solid #000; border-radius:0;
transition:background-color .18s ease, color .18s ease;
}
.ok-btn-onyellow:hover,
.ok-btn-onyellow:focus,
.ok-btn-onyellow:active{ background:#000; color:#fff; border-color:#000; }
/* ---------------------------------------------------------
FORM FIELDS | site-wide, no yellow anywhere.
Neutral 1px border at rest; hover, focus and active all give
the same black 1px border and nothing else. The gold glow ring
and the gold floating label are gone.
--------------------------------------------------------- */
.ok-input, .ok-select, .ok-textarea,
.form-control, .form-select{ border-width:1px; }
.ok-input:hover, .ok-select:hover, .ok-textarea:hover,
.ok-input:focus, .ok-select:focus, .ok-textarea:focus,
.ok-input:active, .ok-select:active, .ok-textarea:active,
.ok-input:focus-visible, .ok-select:focus-visible, .ok-textarea:focus-visible,
.form-control:hover, .form-control:focus, .form-control:active,
.form-select:hover, .form-select:focus, .form-select:active{
border-color:#000;
border-width:1px;
box-shadow:none;
outline:none;
}
/* floating labels: neutral, never gold */
.ok-float > label{ color:#6B6B6B; }
.ok-float > .ok-input:focus + label,
.ok-float > .ok-input:not(:placeholder-shown) + label,
.ok-float > .ok-textarea:focus + label,
.ok-float > .ok-textarea:not(:placeholder-shown) + label,
.ok-float > .ok-select:focus + label,
.ok-float > .ok-select + label{ color:#000; }
/* ticks and choice cards follow the same rule */
input[type="checkbox"], input[type="radio"]{ accent-color:#000; }
.form-check-input:checked{ background-color:#000; border-color:#000; }
.ok-checkable:has(:checked){ border-color:#000 !important; background-color:#fff !important; }
/* the collapsible search fields sit inside a bordered pill, keep them clean too */
.hdr-search .search-panel > div,
.hdr-search .search-panel > form,
.menu-search-panel > div{ border-color:#000; }
/* ---------------------------------------------------------
ONE HERO TREATMENT FOR EVERY PAGE
The home hero is the reference: full-strength photo, a light
flat scrim plus a bottom fade, big uppercase white type and a
1px text shadow. Page heroes and the About hero had three
different overlays and three different type scales; they now
all resolve to the same thing.
--------------------------------------------------------- */
/* stop washing the photo out (page heroes had it at 30% opacity) */
.ok-pagehero > .ok-opacity-30,
.ok-pagehero > .ok-opacity-35,
.ok-pagehero > .ok-opacity-15{ opacity:1; }
/* same two-layer overlay the home hero uses, and nothing heavier */
.ok-pagehero-veil,
.ok-abt-hero-veil{
position:absolute; inset:0; z-index:1; pointer-events:none;
background:
linear-gradient(to top, rgba(6,6,6,.34) 0%, rgba(6,6,6,.06) 18%, transparent 34%),
rgba(0,0,0,.18);
}
/* headline: identical to .ok-hero-title */
.ok-pagehero .ok-display,
.ok-abt-hero-h{
color:#fff;
font-family:'Poppins','Inter',sans-serif;
font-weight:600;
text-transform:uppercase;
font-size:clamp(2.2rem,6.2vw,6.5rem);
line-height:1.06;
letter-spacing:-.012em;
text-shadow:0 1px 1px rgba(0,0,0,.9);
}
/* supporting copy: identical to .ok-hero-sub */
.ok-pagehero p{
color:#fff;
font-family:'Poppins','Inter',sans-serif;
font-weight:700;
font-size:20px;
line-height:1.6;
text-shadow:0 1px 1px rgba(0,0,0,.9);
}
.ok-pagehero .ok-eyebrow{ text-shadow:0 1px 1px rgba(0,0,0,.9); }
/* the bigger type needs room to breathe */
.ok-pagehero > .ok-container{ padding-block:clamp(5rem,11vw,9rem); }
.ok-abt-hero{ min-height:clamp(20rem,40vw,30rem); }
/* One radius for every form field, in every state. Pinned so no focus/hover
rule anywhere can change the geometry again. */
.ok-input, .ok-select, .ok-textarea, .form-control, .form-select,
.ok-input:hover, .ok-select:hover, .ok-textarea:hover,
.ok-input:focus, .ok-select:focus, .ok-textarea:focus,
.ok-input:active, .ok-select:active, .ok-textarea:active,
.ok-input:focus-visible, .ok-select:focus-visible, .ok-textarea:focus-visible,
.form-control:hover, .form-control:focus, .form-control:active,
.form-select:hover, .form-select:focus, .form-select:active{
border-radius:.9rem;
}
/* One radius for every form field, in every state. Pinned so no future
focus/hover rule can change the geometry again. */
.ok-input, .ok-select, .ok-textarea, .form-control, .form-select,
.ok-input:hover, .ok-select:hover, .ok-textarea:hover,
.ok-input:focus, .ok-select:focus, .ok-textarea:focus,
.ok-input:active, .ok-select:active, .ok-textarea:active,
.ok-input:focus-visible, .ok-select:focus-visible, .ok-textarea:focus-visible,
.form-control:hover, .form-control:focus, .form-control:active,
.form-select:hover, .form-select:focus, .form-select:active{
border-radius:.9rem;
}
/* ---------------------------------------------------------
HERO TEXT | one colour, readable on any photo.
Some heroes used text-white/55, /60, /80 utilities, which carry
!important and left the copy washed out. Every heading and
paragraph in a hero is now pure white with a four-sided 1px
shadow, so the type stays legible over bright imagery without
darkening the photo behind it.
--------------------------------------------------------- */
.ok-pagehero h1, .ok-pagehero h2, .ok-pagehero h3, .ok-pagehero h4,
.ok-pagehero p, .ok-pagehero .ok-display, .ok-pagehero .ok-eyebrow,
.ok-abt-hero-h,
.ok-hero-title, .ok-hero-sub, .ok-hero-kicker{
color:#fff !important;
/* Layer order matters: shadows paint front-to-back, so the tight dark halo
is listed first and sits directly against the glyph (that is what buys the
contrast), and the white glow spreads out behind it. The result reads as
lit type rather than flat white pasted on a photo. */
text-shadow:
/* 1. tight dark contact on all four sides | the contrast workhorse, and
what keeps the type readable over a bright bun as well as a dark room */
0 1px 2px rgba(0,0,0,.78),
0 -1px 2px rgba(0,0,0,.66),
1px 0 2px rgba(0,0,0,.66),
-1px 0 2px rgba(0,0,0,.66),
/* 2. the shine: a narrow white bloom just outside that dark edge */
0 0 9px rgba(255,255,255,.30),
/* 3. broad dark ambient so busy photography recedes behind the words */
0 5px 22px rgba(0,0,0,.55),
/* 4. wide, faint halo that makes the whole block glow rather than sit flat */
0 0 42px rgba(255,255,255,.16);
}
/* ...but not inside a light card that happens to sit in the hero. The rewards
points card is white, so the hero's white-text rule made its copy invisible. */
.ok-pagehero .ok-card,
.ok-pagehero .ok-card h1, .ok-pagehero .ok-card h2,
.ok-pagehero .ok-card h3, .ok-pagehero .ok-card h4,
.ok-pagehero .ok-card p, .ok-pagehero .ok-card span, .ok-pagehero .ok-card div{
color:var(--ok-ink) !important;
text-shadow:none !important;
}
/* the card's own coloured accents keep their colour */
.ok-pagehero .ok-card .text-muted-warm{ color:var(--ok-slate) !important; }
.ok-pagehero .ok-card .text-gold{ color:var(--ok-amber) !important; }
.ok-pagehero .ok-card .text-ok-green{ color:var(--ok-green) !important; }
.ok-pagehero .ok-card .text-white{ color:#fff !important; }
/* "Meet us at the table": the section keeps its full screen height, but the
photo is a contained 4:3 block centred inside it instead of bleeding the
whole height. It was running edge to edge top and bottom, so it visually
collided with the section underneath. */
.ok-abt-split > .ok-grid{
min-height:100vh;
align-items:center;
padding-block:clamp(2.5rem,6vw,5rem);
}
.ok-abt-split-media{
position:relative; overflow:hidden;
aspect-ratio:4/3;
max-height:calc(100vh - 10rem);
min-height:0;
}
.ok-abt-split-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media (max-width:767.98px){
.ok-abt-split > .ok-grid{ min-height:auto; padding-block:2.5rem; }
.ok-abt-split-media{ max-height:none; }
}
/* ---------------------------------------------------------
EVERY CTA: square corners and the yellow CTA's label style.
The outline button was the odd one out with tiny uppercase
tracked text; it now matches .btn exactly, so the only thing
separating the variants is colour.
--------------------------------------------------------- */
.btn, .btn-sm, .btn-lg, .btn-rect,
.ok-btn-outline, .ok-btn-subscribe, .ok-btn-onyellow{
border-radius:0;
}
.ok-btn-outline{
font-size:1rem;
font-weight:700;
text-transform:none;
letter-spacing:.005em;
padding:.82rem 1.6rem;
}
/* Search panels (header + menu bar): an even shadow on all four sides so the
panel reads as floating above the page. The old one only cast downwards, so
the top and side edges disappeared into the content behind them. */
.hdr-search .search-panel > div,
.hdr-search .search-panel > form,
.menu-search-panel > div{
box-shadow:0 0 0 1px rgba(20,20,20,.06), 0 6px 26px rgba(20,20,20,.18) !important;
}
/* ---------------------------------------------------------
Icon tiles: the pale cream behind an icon was barely visible
on a white card, so the icon looked like it floated. Darker
yellow, still soft enough for black icons to read on it.
--------------------------------------------------------- */
.bg-cream{ background-color:#FFE08A !important; }
/* Segmented tabs (Earn / Redeem / History). The buttons carry Bootstrap's
.bg-transparent, which is !important and was cancelling the active chip's
dark fill, leaving white text on a pale pill. Active tab is solid black. */
[data-tab-group] .chip.is-active{
background-color:#000 !important;
color:#fff !important;
border-color:#000 !important;
}
[data-tab-group] .chip{ color:var(--ok-ink); }
/* Integrations + webhooks tab bars: wrap instead of clipping the last pill. */
.ok-integ-tabbar{
row-gap:.5rem;
max-width:100%;
}
.ok-integ-tabbar .chip{
flex:0 0 auto;
max-width:100%;
white-space:nowrap;
}
/* Rewards page: every CTA inverts to white-on-black text instead of the
site-wide black fill. Scoped to this page only. */
.ok-page-rewards .btn:hover, .ok-page-rewards .btn:focus,
.ok-page-rewards .btn:active, .ok-page-rewards .btn:focus-within,
.ok-page-rewards .ok-btn-outline:hover, .ok-page-rewards .ok-btn-outline:focus,
.ok-page-rewards .ok-btn-outline:active{
background:#fff !important;
color:#000 !important;
border-color:#000 !important;
}
/* Referral code box sits on the dark card: the !bg-white/10 and !border-white/20
utilities it relied on were never generated, so it fell back to .ok-input's
white fill and the white code text became invisible. */
.ok-refcode{
background-color:rgba(255,255,255,.1) !important;
border-color:rgba(255,255,255,.2) !important;
color:#fff !important;
cursor:pointer;
}
.ok-refcode span:last-child{ color:rgba(255,255,255,.45) !important; }
/* "Redeem points" keeps the brand yellow and inverts to black on hover,
unlike the rest of this page's CTAs. */
.ok-page-rewards a[href="#redeem"].btn-primary{ background:var(--ok-yellow) !important; color:#000 !important; }
.ok-page-rewards a[href="#redeem"].btn-primary:hover,
.ok-page-rewards a[href="#redeem"].btn-primary:focus,
.ok-page-rewards a[href="#redeem"].btn-primary:active{
background:#000 !important; color:#fff !important; border-color:#000 !important;
}
/* Inverted CTA: white fill with black text on every interactive state,
instead of the site-wide black fill. Reusable, currently on the catering
hero's "Request a quote". */
.ok-btn-invert:hover, .ok-btn-invert:focus,
.ok-btn-invert:active, .ok-btn-invert:focus-within{
background:#fff !important;
color:#000 !important;
border-color:#000 !important;
}
/* Carousel arrows sit centred via `-translate-y-1/2`. The generic .ok-iconbtn
hover/active transform REPLACED that translate, so the button dropped half
its height out from under the cursor, un-hovered, snapped back, re-hovered:
a flicker loop. Keep the centring transform in every state; the background
tint still gives the hover feedback. */
.ok-iconbtn.-translate-y-1\/2,
.ok-iconbtn.-translate-y-1\/2:hover,
.ok-iconbtn.-translate-y-1\/2:focus,
.ok-iconbtn.-translate-y-1\/2:focus-visible,
.ok-iconbtn.-translate-y-1\/2:active{
transform: translateY(-50%);
transition: background-color var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}
/* ---------------------------------------------------------
MENU CATEGORY BAR
--------------------------------------------------------- */
/* Sticks under the header: 4rem tall on mobile, 5rem from md up.
(The old markup used Tailwind's `top-16`, which was never generated during
the Bootstrap migration, so on phones the bar had no `top` at all and
position:sticky did nothing.) */
.ok-menu-stick{ top: 4rem; }
@media (min-width: 768px){ .ok-menu-stick{ top: 5rem; } }
/* Uniform 1px outline on every side, in every state. The hover shadow used to
sit under the pill and read as a heavier bottom edge instead of a border. */
.menu-catbar .chip,
.menu-catbar .chip:hover,
.menu-catbar .chip:focus,
.menu-catbar .chip:active,
.menu-catbar .chip.is-active{
border-width: 1px;
box-shadow: none;
}
.menu-catbar .chip:hover{ border-color: var(--ok-ink); }
/* Category photo in place of the icon */
.chip-cat{ padding-left: .3rem; gap: .5rem; }
.chip-thumb{
width: 1.65rem;
height: 1.65rem;
border-radius: 50%;
object-fit: cover;
flex: 0 0 auto;
background: var(--ok-hairline);
}
/* Delivery / Pickup segmented toggle.
On phones the labels used to be hidden (`d-none d-sm-inline`), leaving two
bare icons. Both labels now always show and the group spans the full width
so it fits the phone screen; from lg up it goes back to its natural width. */
[data-ordertype-group]{
width: 100%;
align-self: stretch;
}
[data-ordertype-group] [data-ordertype]{
flex: 1 1 0;
justify-content: center;
white-space: nowrap;
}
@media (min-width: 992px){
[data-ordertype-group]{ width: auto; align-self: auto; }
[data-ordertype-group] [data-ordertype]{ flex: 0 0 auto; }
}
/* Home-page-only sticky order bar, phone layout only. */
.ok-mobile-order{
position: fixed;
left: .5rem; /* inset from both edges instead of inner padding */
right: .5rem;
/* the same gap it has at the sides, plus the iPhone home-indicator strip so
the bar never sits under it */
bottom: calc(.5rem + env(safe-area-inset-bottom, 0px));
z-index: 40; /* under the header (50) and every overlay */
width: auto;
height: 40px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
background: var(--ok-yellow);
color: #000;
font-weight: 700;
font-size: 1rem; /* same label style as the other CTAs */
line-height: 1;
text-decoration: none;
transition: background-color .18s ease, color .18s ease;
}
.ok-mobile-order:hover,
.ok-mobile-order:focus,
.ok-mobile-order:focus-visible,
.ok-mobile-order:active{
background: #000;
color: #fff;
}
/* The fixed bar would otherwise sit on top of the end of the footer | the
height plus the gap it now stands off the bottom. */
@media (max-width: 991.98px){
body:has(.ok-mobile-order){
padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px));
}
}
/* Menu chips: the hover lift pushed the pill's top edge outside the
`overflow-x:auto` scroller, which clips vertically too, so the black top
border was sliced off on hover. No lift, no clipping. */
.menu-catbar .chip:hover,
.menu-catbar .chip:focus,
.menu-catbar .chip:active{ transform: none; }
/* ---------------------------------------------------------
HEADER SEARCH ON PHONES
The toggle used to be hidden below md and the drawer carried a dead
duplicate field. It now lives in the header at every width; on phones the
panel expands across the header bar instead of hanging off the toggle.
--------------------------------------------------------- */
@media (max-width: 767.98px){
.hdr-search .search-panel{
position: fixed;
/* takes over the whole 4rem header row. An inset panel is not enough: the
pill's rounded left end leaves a transparent notch that the logo shows
through, so the panel carries its own opaque bar. */
top: 0;
left: 0;
right: 0;
height: 4rem;
display: flex;
align-items: center;
padding-inline: .75rem;
background: #fff;
transform: none;
/* wipe open from the right, out of the magnifier that was just tapped;
clip-path keeps the label and icons undistorted, unlike scaleX */
clip-path: inset(0 0 0 100%);
transition: clip-path .3s cubic-bezier(.4, 0, .2, 1), opacity .2s ease;
}
.hdr-search.is-open .search-panel{
transform: none;
clip-path: inset(0 0 0 0);
}
/* the desktop panel is a clamp()-ed fixed width; on phones it fills the bar */
.hdr-search .search-panel > div,
.hdr-search .search-panel > form{ width: 100%; height: 2.75rem; }
}
/* The About hero's veil (z-index:1) was painting OVER its heading, because the
content wrapper had position:relative but no z-index of its own | so "About
Us" was being viewed through the scrim and read grey instead of white. Page
heroes already lift their container to z-index:2; match that here. */
.ok-abt-hero > .ok-container{ position: relative; z-index: 2; }
/* ---------------------------------------------------------
HERO TEXT SHINE
A gloss highlight travelling across the type. The fill is a wide
gradient clipped to the glyphs, and only its position animates, so
nothing reflows and the four-layer shadow underneath still carries
the contrast. The base tone sits a touch below pure white | white
is the ceiling, so a brighter band is only visible if the rest of
the letter is slightly under it.
--------------------------------------------------------- */
/* Stay inside 0%–100%. Background percentages position the image *within* the
element, so anything outside that range slides a `no-repeat` 300%-wide
gradient clean off the box | the fill then resolves to transparent and the
dark text-shadow shows straight through the glyphs. */
@keyframes okHeroShine{
0% { background-position: 100% 0; }
100% { background-position: 0% 0; }
}
.ok-pagehero h1, .ok-pagehero h2, .ok-pagehero h3, .ok-pagehero h4,
.ok-pagehero p, .ok-pagehero .ok-display, .ok-pagehero .ok-eyebrow,
.ok-abt-hero-h,
.ok-hero-title, .ok-hero-sub, .ok-hero-kicker{
background-image: linear-gradient(100deg,
#dfe7f1 0%,
#dfe7f1 40%,
#ffffff 47%,
#ffffff 53%,
#dfe7f1 60%,
#dfe7f1 100%);
background-size: 300% 100%;
background-repeat: no-repeat;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: okHeroShine 4.5s linear infinite;
/* A background-clip:text fill lives in the BACKGROUND layer, which paints
below text-shadow | so the dark halo covered the gloss and the glyphs
came out black. drop-shadow filters the composited result instead, so the
shine stays on top and still sits on its dark halo. */
text-shadow: none;
filter:
drop-shadow(0 1px 1.5px rgba(0,0,0,.9))
drop-shadow(0 3px 14px rgba(0,0,0,.55));
}
/* stagger the sweep so a headline and its supporting line do not flash
in lockstep | it reads as light moving across the block */
.ok-pagehero p,
.ok-hero-sub{ animation-delay: -1.6s; }
.ok-pagehero .ok-eyebrow,
.ok-hero-kicker{ animation-delay: -2.8s; }
/* light cards that sit inside a hero keep flat ink text */
.ok-pagehero .ok-card,
.ok-pagehero .ok-card h1, .ok-pagehero .ok-card h2,
.ok-pagehero .ok-card h3, .ok-pagehero .ok-card h4,
.ok-pagehero .ok-card p, .ok-pagehero .ok-card span, .ok-pagehero .ok-card div{
background-image: none !important;
-webkit-text-fill-color: currentColor !important;
animation: none !important;
filter: none !important;
}
@media (prefers-reduced-motion: reduce){
.ok-pagehero h1, .ok-pagehero h2, .ok-pagehero h3, .ok-pagehero h4,
.ok-pagehero p, .ok-pagehero .ok-display, .ok-pagehero .ok-eyebrow,
.ok-abt-hero-h,
.ok-hero-title, .ok-hero-sub, .ok-hero-kicker{
background-image: none;
-webkit-text-fill-color: #fff;
animation: none;
}
}
/* Hero overlays, one notch darker across every page. The flat layer does the
work (it darkens the whole frame evenly); the bottom gradient stays there to
seat the copy block. The home hero's CMS-controlled .pb-overlay still stacks
on top of this, so the admin can keep dialling it from the panel. */
.ok-pagehero-veil,
.ok-abt-hero-veil{
background:
linear-gradient(to top, rgba(6,6,6,.46) 0%, rgba(6,6,6,.14) 20%, transparent 38%),
rgba(0,0,0,.30);
}
.ok-hero-veil{
background:
linear-gradient(to top, rgba(6,6,6,.46) 0%, rgba(6,6,6,.14) 20%, transparent 38%),
rgba(0,0,0,.12);
}
/* ---------------------------------------------------------
FOOTER TEXT | full white
Every string in the footer was a faded white (.45 / .55 / .60 alpha),
so the column links, the blurb and the copyright line all read as grey
on the dark panel. They are pure white now; the utilities themselves are
left alone because other dark sections still want the muted version.
--------------------------------------------------------- */
.ok-footer,
.ok-footer p,
.ok-footer a,
.ok-footer li,
.ok-footer h3,
.ok-footer h4,
.ok-footer span,
.ok-footer .text-w-45,
.ok-footer .text-w-55,
.ok-footer .text-w-60,
.ok-footer .ok-flink{
color: #fff !important;
}
/* Subscribe stays black-on-yellow, and black-on-white when hovered.
The blanket white-text rule above had turned the label white in the hover
state | and .ok-btn-subscribe's hover background is white, so the word
disappeared completely. Black in every state. */
.ok-footer .btn-primary,
.ok-footer .btn-primary span,
.ok-footer .btn-primary:hover,
.ok-footer .btn-primary:focus,
.ok-footer .btn-primary:focus-within,
.ok-footer .btn-primary:active{ color: #000 !important; }
.ok-footer svg text{ color: initial !important; }
.ok-footer .text-ink,
.ok-footer .text-ink i{ color: var(--ok-ink) !important; }
.ok-footer input{ color: var(--ok-ink) !important; }
.ok-footer input::placeholder{ color: var(--ok-slate) !important; }
/* the dividers were white at 10% too | lift them so the sections read */
.ok-footer .border-w-10{ border-color: rgba(255,255,255,.22) !important; }
/* ---------------------------------------------------------
ONE RADIUS: 8px, everywhere, in every state
Buttons had been squared off (0) and fields were on .9rem
(14.4px), so the two halves of a form never lined up. Both are
8px now. Pinned across hover / focus / active so nothing can
change the geometry mid-interaction.
--------------------------------------------------------- */
:root{ --r-control: 8px; }
/* form fields */
.ok-input, .ok-select, .ok-textarea, .form-control, .form-select,
.ok-input:hover, .ok-select:hover, .ok-textarea:hover,
.ok-input:focus, .ok-select:focus, .ok-textarea:focus,
.ok-input:active, .ok-select:active, .ok-textarea:active,
.ok-input:focus-visible, .ok-select:focus-visible, .ok-textarea:focus-visible,
.form-control:hover, .form-control:focus, .form-control:active,
.form-select:hover, .form-select:focus, .form-select:active,
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="date"], input[type="datetime-local"], input[type="number"],
input[type="password"], input[type="search"], textarea, select{
border-radius: var(--r-control);
}
/* buttons and CTAs */
.btn, .btn-sm, .btn-lg, .btn-rect, .btn-block,
.btn-primary, .btn-secondary, .btn-dark,
.ok-btn-outline, .ok-btn-subscribe, .ok-btn-onyellow, .ok-btn-invert,
.btn:hover, .btn:focus, .btn:active, .btn:focus-within,
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.ok-btn-outline:hover, .ok-btn-outline:focus, .ok-btn-outline:active,
.ok-btn-subscribe:hover, .ok-btn-subscribe:focus, .ok-btn-subscribe:active,
.ok-btn-onyellow:hover, .ok-btn-onyellow:focus, .ok-btn-onyellow:active{
border-radius: var(--r-control);
}
/* pills stay pills | chips, avatars and icon buttons are meant to be round */
.chip, .badge, .rounded-pill, .ok-iconbtn, .chip-thumb{ border-radius: 9999px; }
/* ---------------------------------------------------------
ONE TYPE SYSTEM | the home page is the reference
Four competing sets had grown up: the home sections
(.ok-title / .ok-subtitle / .ok-card-title / .ok-card-text),
the inner pages (.ok-h2 + "font-display fw-bold ok-fs-lg"),
the About page (.ok-abt-*), and a scatter of raw size
utilities. Everything resolves to the home's scale now.
Aliased in CSS rather than rewritten across ~40 templates:
one place to read, one place to change.
--------------------------------------------------------- */
/* ── section heading = .ok-title ───────────────────────────── */
.ok-h2,
.ok-abt-h,
.ok-sechead h2,
.ok-section > .ok-container > .text-center > h2{
font-family: 'Poppins', 'Inter', sans-serif;
font-weight: 500;
text-transform: uppercase;
font-size: clamp(1.85rem, 4vw, 2.9rem);
line-height: 1.03;
letter-spacing: -.02em;
color: var(--ok-ink);
}
/* ── supporting paragraph under a heading = .ok-subtitle ───── */
.ok-abt-body,
.ok-abt-body-sm,
.ok-sechead p,
.ok-h2 + p,
.ok-abt-h + p{
font-size: clamp(1rem, 1.75vw, 1.1rem);
line-height: 1.7;
letter-spacing: 0;
}
/* ── card heading = .ok-card-title ─────────────────────────── */
.ok-card h3,
.ok-abt-cardh,
article.ok-card > h3,
.ok-card .font-display.fw-bold{
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 1.125rem;
line-height: 1.28;
letter-spacing: -.012em;
}
/* ── card body copy = .ok-card-text ────────────────────────── */
.ok-card > p,
.ok-card h3 + p,
.ok-abt-cardh + p{
font-size: .9rem;
line-height: 1.6;
}
/* The menu card is deliberately outside this: its title is a small
uppercase label sized to sit beside a photo, and the item modal was
matched to it on purpose. */
.ok-card h3.text-uppercase,
.menu-catbar .chip{
font-family: inherit;
font-size: inherit;
font-weight: inherit;
letter-spacing: inherit;
text-transform: inherit;
}
/* .ok-btn-invert wraps its label in a on checkout; the colour has to
reach the span too or the text stays black-on-black. */
.ok-btn-invert:hover span, .ok-btn-invert:focus span,
.ok-btn-invert:active span, .ok-btn-invert:focus-within span{
color: #000 !important;
}
/* On phones the magnifier stays where it belongs | in the icon group on the
right. It is only the OPEN field that centres itself across the bar. */
@media (max-width: 767.98px){
.hdr-search .search-panel > div,
.hdr-search .search-panel > form{
justify-content: center;
}
/* the input carries Bootstrap's .w-100, which is !important | without
matching that it keeps filling the row and nothing can centre. */
.hdr-search .search-panel input[data-search-input]{
width: auto !important;
flex: 0 1 14rem;
text-align: center;
}
}
/* ---------------------------------------------------------
SECTION HEADINGS | one step down
The shared scale peaked at 2.9rem (46px), which read as a page
title rather than a section label. Down to 2.2rem (35px) max.
Applied to .ok-title as well, not just the aliases: shrinking
only the inner pages would put the home out of step again, and
these are all meant to be the same size now.
--------------------------------------------------------- */
.ok-title,
.ok-h2,
.ok-abt-h,
.ok-sechead h2,
.ok-section > .ok-container > .text-center > h2{
font-size: clamp(1.45rem, 3vw, 2.2rem);
line-height: 1.08;
}
/* ---------------------------------------------------------
POPUPS
--------------------------------------------------------- */
/* A scroll gesture that reaches the end of a modal's own scroller used to
carry on and move the page behind it. Contain it at the panel. */
.modal-scroll,
.ok-modal .overflow-y-auto,
.drawer,
#okDrawer{
overscroll-behavior: contain;
}
/* the location modal's search row sits above the list it filters */
.ok-locsearch{
/* the panel has its own padding; pull the sticky bar out to the edges so
nothing shows through beside it while the list scrolls past */
margin-inline: -1rem;
padding-inline: 1rem;
padding-top: .25rem;
box-shadow: 0 1px 0 var(--ok-hairline);
}
/* ---------------------------------------------------------
NO BLUE ON TAP / CLICK
Mobile browsers paint a translucent blue box behind whatever
was tapped, and Bootstrap's own focus ring is blue too. Both
are off-palette; focus is shown with the brand outline instead.
--------------------------------------------------------- */
html{ -webkit-tap-highlight-color: transparent; }
a, button, [role="button"], input, select, textarea, label, summary,
.btn, .chip, .ok-iconbtn, .ok-card-hover{
-webkit-tap-highlight-color: transparent;
}
.btn:focus, .btn:focus-visible, .btn:active,
.chip:focus, .chip:focus-visible,
.ok-iconbtn:focus, .ok-iconbtn:focus-visible,
a:focus, a:focus-visible,
button:focus, button:focus-visible,
.form-control:focus, .form-select:focus,
.ok-input:focus, .ok-select:focus, .ok-textarea:focus{
outline-color: var(--ok-ink);
box-shadow: none;
--bs-btn-focus-box-shadow: none;
--bs-focus-ring-color: transparent;
}
::selection{ background: var(--ok-yellow); color: #000; }
/* ---------------------------------------------------------
CHECKOUT CHOICE TILES
Delivery/Pickup stacked their icon above the label, which made
them ~90px tall next to a 48px address field, and ASAP sat in a
short box beside a taller Schedule box. One shell for all four,
sized off the form fields they sit with.
--------------------------------------------------------- */
.ok-choice{
border: 2px solid var(--ok-hairline);
border-radius: var(--r-control);
padding: .7rem 1rem;
min-height: 3rem; /* the height of an .ok-input */
transition: border-color var(--t-fast) var(--e-out),
background-color var(--t-fast) var(--e-out);
}
/* the timing pair carries a second line (and a date field), so it grows ,
but both halves of the row grow together */
.ok-choice--stack{
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
gap: .25rem;
padding: .85rem 1rem;
}
.ok-choice--stack > span{ display: block; }
/* grid children already stretch; this makes the shorter card centre its
content instead of pinning it to the top of the taller neighbour */
.ok-grid-sm-2 > .ok-choice--stack{ height: 100%; }
/* the ASAP sub-line lines up under its title, not under the radio */
.ok-asap-note{ padding-left: 2.05rem; }
/* ---------------------------------------------------------
NO BLUE ON CLICK
Bootstrap paints :active from --bs-btn-active-bg, and its
selectors (.btn:first-child:active, :not(.btn-check)+.btn:active)
are specificity 0,3,0 - they outrank our own 0,2,0 :active rules,
so a click flashed Bootstrap blue (#0a58ca on primary, #565e64 on
secondary, #4d5154 on dark) before settling back.
Fixing the variables kills it at the source, for every path
Bootstrap uses (:active, .active, .show, .btn-check:checked).
Click now looks exactly like hover.
--------------------------------------------------------- */
.btn{
--bs-btn-active-bg: var(--ok-ink);
--bs-btn-active-color: #fff;
--bs-btn-active-border-color: var(--ok-ink);
--bs-btn-focus-box-shadow: none;
--bs-btn-active-shadow: none;
}
.btn-primary{ /* hover = black on white text */
--bs-btn-active-bg: #000;
--bs-btn-active-color: #fff;
--bs-btn-active-border-color: #000;
}
.btn-secondary{ /* hover = ink fill */
--bs-btn-active-bg: var(--ok-ink);
--bs-btn-active-color: #fff;
--bs-btn-active-border-color: var(--ok-ink);
}
.btn-dark{ /* hover keeps the dark fill, yellow label */
--bs-btn-active-bg: var(--ok-ink);
--bs-btn-active-color: var(--ok-yellow);
--bs-btn-active-border-color: var(--ok-ink);
}
/* these two invert on hover, so they invert on click too */
.ok-btn-invert, .ok-btn-subscribe{
--bs-btn-active-bg: #fff;
--bs-btn-active-color: #000;
--bs-btn-active-border-color: #000;
}
/* Item-modal size options stay on one line. They used to wrap, which on a
phone put two chips up and one orphaned underneath. If they cannot all fit
the row scrolls sideways rather than breaking. */
.ok-optrow{
flex-wrap: nowrap;
overflow-x: auto;
overscroll-behavior-inline: contain;
scrollbar-width: none;
padding-block: 2px; /* room for the chip border, which the
overflow container would otherwise clip */
}
.ok-optrow::-webkit-scrollbar{ display: none; }
.ok-optrow > .chip{ flex: 0 0 auto; }
/* Referral share links: two per row on a phone so the four buttons form a
tidy 2×2 block instead of a ragged 2 + 1 + 1 wrap. Untouched from sm up. */
@media (max-width: 575.98px){
.ok-sharerow{
display: grid;
grid-template-columns: 1fr 1fr;
gap: .5rem;
}
.ok-sharerow > .btn{ width: 100%; }
}
/* the share row is laid out here, not by utilities | see the note in
rewards.html: Bootstrap's d-flex is !important and blocked the grid */
.ok-sharerow{
display: flex;
flex-wrap: wrap;
gap: .5rem;
}
@media (max-width: 575.98px){
.ok-sharerow{
display: grid;
grid-template-columns: 1fr 1fr;
}
.ok-sharerow > .btn{ width: 100%; }
}
/* ---------------------------------------------------------
REVIEWS
--------------------------------------------------------- */
/* Carousel arrows were desktop-only (d-none d-md-grid), which is backwards ,
a phone is exactly where people need a hint that the row scrolls. They sit
inside the track on small screens so they never hang off the viewport. */
.ok-carobtn{
top: 50%;
transform: translateY(-50%);
z-index: 10;
width: 2.75rem;
height: 2.75rem;
background: #fff;
border: 1px solid var(--ok-hairline);
box-shadow: 0 6px 20px rgba(20,20,20,.14);
}
.ok-caro-prev{ left: -1.25rem; }
.ok-caro-next{ right: -1.25rem; }
/* Keep the arrows clear of the cards at EVERY width. Nudging the buttons
further out only works on a wide screen, so the row reserves the space
instead | the first card can then never sit under the previous button. */
.ok-caro--gutter > [id]{
padding-inline: 2.5rem;
scroll-padding-inline: 2.5rem;
}
@media (max-width: 767.98px){
.ok-caro--gutter > [id]{ padding-inline: 1.75rem; scroll-padding-inline: 1.75rem; }
}
@media (max-width: 767.98px){
.ok-carobtn{ width: 2.25rem; height: 2.25rem; }
.ok-caro-prev{ left: -.25rem; }
.ok-caro-next{ right: -.25rem; }
}
/* star picker: laid out reversed so "hover a star, fill it and everything to
its left" is a pure-CSS sibling selector, no JS */
.ok-stars-pick label{
cursor: pointer;
font-size: 1.5rem;
color: var(--ok-hairline);
transition: color .12s ease;
}
.ok-stars-pick label:hover,
.ok-stars-pick label:hover ~ label,
.ok-stars-pick input:checked ~ label{ color: var(--ok-yellow); }
.ok-stars-pick input:focus-visible + label{ outline: 2px solid var(--ok-ink); outline-offset: 2px; }
/* Initials avatar | the fallback when a customer has not uploaded a photo.
Previously a random stock face was pulled in, which put a stranger's
portrait next to somebody's real name. */
.ok-avatar{
display: inline-grid;
place-items: center;
border-radius: 9999px;
background: var(--grad-gold);
color: var(--ok-ink);
font-family: 'Poppins', sans-serif;
font-weight: 800;
font-size: .95rem;
letter-spacing: .01em;
user-select: none;
}
.ok-avatar--lg{ font-size: 1.35rem; }
/* ---------------------------------------------------------
ICONS
Lucide SVGs sized off the surrounding font-size, exactly the
way the Font Awesome glyphs they replaced were, so nothing in
the layout has to change.
--------------------------------------------------------- */
.ok-i{
width: 1em;
height: 1em;
display: inline-block;
vertical-align: -.125em;
flex-shrink: 0;
stroke-width: 2;
}
.ok-i.icon-lg{ width: 1.15em; height: 1.15em; }
.ok-i.icon-xl{ width: 1.3em; height: 1.3em; }
/* stroke icons read lighter than filled ones at large sizes */
.ok-fs-2xl > .ok-i, .ok-fs-3xl > .ok-i, .ok-fs-4xl > .ok-i{ stroke-width: 1.75; }
/* Catering package price.
It was one 3xl string, so "$14 / person" put "/ person" at headline size
and "Custom quote" became the loudest thing in the section | three cards
that are meant to read as equals did not. */
.ok-cater-price{
font-family: 'Poppins', sans-serif;
line-height: 1.1;
}
.ok-cater-amount{
font-weight: 800;
font-size: clamp(1.6rem, 3vw, 2rem);
}
.ok-cater-unit{
font-family: 'Quicksand', sans-serif;
font-weight: 600;
font-size: .95rem;
color: var(--ok-slate);
}
/* a phrase, not a figure | sized so it sits level with the numbers */
.ok-cater-words{
font-weight: 800;
font-size: clamp(1.2rem, 2vw, 1.4rem);
white-space: nowrap;
}
/* Price matched to the package title above it (both 1.125rem). The amount
keeps the heavier weight so it still reads as the figure, and the unit
stays a size down and muted. */
.ok-cater-amount,
.ok-cater-words{
font-size: 1.125rem;
font-weight: 800;
}
.ok-cater-unit{ font-size: .85rem; }
/* Store status line: the status word carries the warning, the rest is detail.
Both were one colour before, so "Closed now" did not stand out from the
opening hours sitting next to it. */
.ok-status-closed{ color: var(--ok-red, #C62828) !important; }
.ok-status-rest{ color: var(--ok-yellow) !important; }
/* =========================================================
LOCATION CARD (home "Locations near you")
Map on top, detail rows split by hairlines, one full-bleed
dark action bar. Its own component rather than .ok-card so
the site-wide card hover flood does not wash over the bar.
========================================================= */
.ok-loccard{
display:flex; flex-direction:column;
background:#fff;
border:1px solid var(--ok-line);
border-radius:1rem;
overflow:hidden;
box-shadow:0 4px 20px rgba(20,20,20,.06);
transition:transform var(--t-mid,.18s) var(--e-out,ease),
box-shadow var(--t-mid,.18s) var(--e-out,ease);
}
.ok-loccard:hover{ transform:translateY(-6px); box-shadow:var(--sh-4,0 18px 40px rgba(20,20,20,.14)); }
.ok-loccard-map{
position:relative;
aspect-ratio:4/3;
background:var(--ok-beige,#f6f2ea);
}
.ok-loccard-map iframe{ width:100%; height:100%; border:0; display:block; }
.ok-loccard-badge{
position:absolute; top:.85rem; left:.85rem; z-index:2;
display:inline-flex; align-items:center; gap:.4rem;
background:#fff; color:var(--ok-green);
font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
padding:.34rem .7rem; border-radius:9999px;
box-shadow:0 2px 10px rgba(20,20,20,.18);
}
.ok-loccard-badge .status-dot{ background:var(--ok-green); }
.ok-loccard-body{ padding:1.4rem 1.5rem .25rem; flex:1 1 auto; }
.ok-loccard-title{
font-family:'Poppins',sans-serif; font-weight:600;
font-size:1.3rem; line-height:1.2; letter-spacing:-.015em;
color:var(--ok-jet); margin:0 0 .35rem;
}
/* one hairline BETWEEN rows, never above the first or below the last */
.ok-loccard-rows{ list-style:none; margin:0; padding:0; }
.ok-loccard-rows li{
display:flex; align-items:flex-start; gap:.85rem;
padding:.95rem 0;
font-size:.95rem; line-height:1.45;
color:var(--ok-jet);
}
.ok-loccard-rows li + li{ border-top:1px solid var(--ok-line); }
.ok-loccard-rows i{
width:1.1rem; flex-shrink:0; margin-top:.15rem;
text-align:center; color:var(--ok-jet); font-size:1rem;
}
.ok-loccard-rows a{ color:inherit; }
.ok-loccard-rows a:hover{ color:var(--ok-amber); }
.ok-loccard-cta{
margin-top:auto;
display:flex; align-items:center; justify-content:center; gap:.6rem;
background:var(--ok-jet); color:#fff;
font-weight:800; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase;
padding:1.05rem 1rem;
transition:background var(--t-fast,.15s) var(--e-out,ease), color var(--t-fast,.15s) var(--e-out,ease);
}
.ok-loccard-cta:hover{ background:var(--ok-yellow); color:var(--ok-jet); }
.ok-loccard-cta i{ transition:transform var(--t-fast,.15s) var(--e-out,ease); }
.ok-loccard-cta:hover i{ transform:translateX(4px); }
@media (max-width:575px){
.ok-loccard-body{ padding:1.15rem 1.15rem .25rem; }
.ok-loccard-title{ font-size:1.15rem; }
}
/* =========================================================
GOOGLE-STYLE REVIEW CARD (home "What locals have to say")
Deliberately NOT the brand card: this is meant to read as a
Google reviews widget, so it keeps Google's own palette,
Roboto/Arial type and grey surface rather than ours.
========================================================= */
.ok-gcard{
--g-blue:#1a73e8;
--g-grey:#70757a;
--g-ink:#202124;
--g-star:#fb8c00;
--g-star-off:#dadce0;
width:21.25rem; flex:0 0 21.25rem;
background:#f8f8f8;
border-radius:4px;
padding:1.25rem 1.15rem 1.35rem;
font-family:Roboto,Arial,Helvetica,sans-serif;
display:flex; flex-direction:column;
}
.ok-gcard-head{ display:flex; align-items:flex-start; gap:.85rem; }
.ok-gcard-avatar{
position:relative; width:3rem; height:3rem; flex-shrink:0;
border-radius:9999px; display:grid; place-items:center;
color:#fff; font-weight:500; font-size:1.35rem; line-height:1;
background:#5f6cb4; overflow:visible;
}
.ok-gcard-avatar img{ width:100%; height:100%; border-radius:9999px; object-fit:cover; display:block; }
/* the little orange "local guide" pip Google stamps on the avatar */
.ok-gcard-avatar::after{
content:"\f005"; /* fa-star */
font-family:"Font Awesome 6 Free"; font-weight:900;
position:absolute; right:-1px; bottom:-1px;
width:1.1rem; height:1.1rem; border-radius:9999px;
background:#f57c00; color:#fff;
font-size:.5rem; display:grid; place-items:center;
border:2px solid #f8f8f8;
}
.ok-gcard-who{ min-width:0; flex:1 1 auto; padding-top:.1rem; }
.ok-gcard-name{
color:var(--g-blue); font-weight:700; font-size:.95rem; line-height:1.3;
margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ok-gcard-when{ color:var(--g-grey); font-size:.875rem; line-height:1.4; margin-top:.15rem; }
.ok-gcard-g{ flex-shrink:0; width:1.35rem; height:1.35rem; margin-top:.1rem; }
.ok-gcard-stars{ display:flex; gap:1px; margin:.9rem 0 .55rem; font-size:1.1rem; line-height:1; }
.ok-gcard-stars .on{ color:var(--g-star); }
.ok-gcard-stars .off{ color:var(--g-star-off); }
/* fixed height + its own scrollbar, exactly like the widget */
.ok-gcard-text{
color:var(--g-ink); font-size:1rem; line-height:1.55;
margin:0; max-height:7.5rem; overflow-y:auto; padding-right:.7rem;
scrollbar-width:thin; scrollbar-color:#bdbdbd #efefef;
}
.ok-gcard-text::-webkit-scrollbar{ width:7px; }
.ok-gcard-text::-webkit-scrollbar-track{ background:#efefef; }
.ok-gcard-text::-webkit-scrollbar-thumb{ background:#bdbdbd; }
@media (max-width:575px){
.ok-gcard{ width:17.5rem; flex-basis:17.5rem; }
}
/* =========================================================
CLIENT REFERENCE TWEAKS (2026-08-06)
Kept together and last so they are easy to review or drop.
========================================================= */
/* Hero CTAs (home hero AND the inner-page heroes): white on hover, black
label. Scoped to the heroes so the site-wide .btn-primary hover
(black on white) is untouched. */
.ok-hero-cta .btn.btn-primary:hover,
.ok-hero-cta .btn.btn-primary:focus,
.ok-hero-cta .btn.btn-primary:focus-visible,
.ok-hero-cta .btn.btn-primary:active,
.ok-pagehero .btn.btn-primary:hover,
.ok-pagehero .btn.btn-primary:focus,
.ok-pagehero .btn.btn-primary:focus-visible,
.ok-pagehero .btn.btn-primary:active,
.ok-hero .btn.btn-primary:hover,
.ok-hero .btn.btn-primary:focus,
.ok-hero .btn.btn-primary:focus-visible,
.ok-hero .btn.btn-primary:active{
background:#fff !important;
background-color:#fff !important;
color:var(--ok-jet) !important;
border-color:#fff !important;
}
/* Google / Yelp ratings: the pill chrome goes, the label and stars stay.
Only the background, border and blur are removed | spacing is kept so the
two still read as two separate ratings. */
.ok-rating-pill,
.ok-rating-pill:hover{
background:none !important;
border:0 !important;
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
padding-inline:0 !important;
transform:none !important;
}
.ok-hero-ratings{ gap:1.75rem !important; }
/* Deals cards: body copy reads black, and the green "no code needed" line
goes black on hover | the hover fill is yellow, so white was unreadable. */
.ok-dealcard .ok-fs-sm,
.ok-dealcard .ok-fs-xs,
.ok-dealcard p,
.ok-dealcard h3{ color:#000 !important; }
.ok-dealcard .ok-deal-nocode{ color:var(--ok-green) !important; }
.ok-dealcard:hover .ok-deal-nocode,
.ok-dealcard:hover .ok-deal-nocode i{ color:#000 !important; }
/* ---------------------------------------------------------
ALL TEXT IS BLACK (client, 2026-08-06)
Done through the COLOUR TOKENS, not a blanket element sweep.
The sweep version had to repaint every h/p/span/label and then
undo itself on the hero, the ink bands, the footer, dark cards
and every active pill | and each new exception broke an older
one. Recolouring the two greys instead means white-on-dark
markup (.text-white, .text-w-*, .bg-ink pills) is never touched
and needs no exception at all.
--------------------------------------------------------- */
:root{
--ok-jet:#000; /* was #141414 - headings, body, ink surfaces */
--ok-ink:#000; /* was #0E0E0E - the premium heading colour */
--ok-slate:#000; /* was #6B6B6B - muted copy */
--ok-lux-gray:#000; /* was #8A8480 - premium muted copy */
}
/* the few classes that hard-code a grey instead of using a token */
.text-muted-warm, .text-muted, .text-secondary, .text-body-secondary,
.text-muted-warm-40, .text-muted-warm-50, .text-muted-warm-60, .text-muted-warm-70,
.text-ink-70, .text-ink-75, .text-ink-80,
.ok-hint, .ok-lead, .ok-card-text, .ok-abt-body, .ok-abt-body-sm{
color:#000 !important;
}
/* Icons follow the text on a light surface. On a dark one they keep the brand
accent, which is the only thing that reads there. */
.ok-card i.text-gold, .ok-card i.text-yellow,
.ok-card .ok-i.text-gold, .ok-card .ok-i.text-yellow,
label i.text-gold, label i.text-yellow,
.ok-band--white i.text-gold, .ok-band--warm i.text-gold,
.ok-band--white i.text-yellow, .ok-band--warm i.text-yellow{
color:#000 !important;
}
.bg-ink i, .bg-jet i, .ok-pagehero i, .ok-hero i, .ok-footer i,
.bg-ink .ok-i, .bg-jet .ok-i, .ok-pagehero .ok-i, .ok-hero .ok-i, .ok-footer .ok-i{
color:inherit !important;
}
/* Deals cards: the green "no code needed" line goes black on hover, matching
the rest of the copy over the card's yellow hover fill. */
.ok-deal-nocode{ color:var(--ok-green) !important; }
.ok-dealcard:hover .ok-deal-nocode,
.ok-dealcard:hover .ok-deal-nocode i,
.ok-dealcard:focus-within .ok-deal-nocode,
.ok-dealcard:focus-within .ok-deal-nocode i{ color:#000 !important; }
/* A selected chip is a dark pill; style.css already gives it white text, this
just guarantees the icon inside comes along. */
.chip.is-active *, .chip:has(input:checked) *{ color:#fff !important; }
/* A heading inside a box the markup already marked `.text-white` must inherit
that white. `.ok-h2` and friends set an explicit colour, which now resolves
to #000 and beat the inherited white on the dark rewards/gift-card panels. */
.text-white :is(h1,h2,h3,h4,h5,h6),
.text-white :is(.ok-display,.ok-h1,.ok-h2,.ok-h3,.ok-title,.ok-card-title){
color:inherit !important;
}
/* Deals cards: the CTA is outlined, not filled | white with a black border and
black label, inverting to black-on-white text on hover. Scoped to the deal
card so the brand's yellow .btn-primary is untouched everywhere else. */
.ok-dealcard .btn.btn-primary{
background:#fff !important;
background-color:#fff !important;
color:#000 !important;
border:1.5px solid #000 !important;
box-shadow:none !important;
}
.ok-dealcard .btn.btn-primary:hover,
.ok-dealcard .btn.btn-primary:focus,
.ok-dealcard .btn.btn-primary:focus-visible,
.ok-dealcard .btn.btn-primary:active{
background:#000 !important;
background-color:#000 !important;
color:#fff !important;
border-color:#000 !important;
}
/* =========================================================
LOCATIONS PAGE ROW
No card hover (no yellow fill / shadow). Link underline only.
========================================================= */
.ok-loclink{
background:none !important;
border:0 !important;
padding:0 !important;
box-shadow:none !important;
border-radius:0 !important;
font-weight:700;
font-size:.95rem;
color:#000 !important;
display:inline-flex;
align-items:center;
gap:.4rem;
text-decoration:none;
cursor:pointer;
transition:none;
}
.ok-loclink:hover,
.ok-loclink:focus-visible{
text-decoration:underline;
text-underline-offset:3px;
background:none !important;
transform:none !important;
}
/* Store status line: the WORD carries the warning (red), the detail beside it
is just detail. It was brand yellow, which is unreadable on the white store
cards in the location picker | black keeps the two apart and stays legible.
On the locations page the row's yellow hover fill already blacks everything
in that column, so this holds there too. */
.ok-status-rest{ color:#000 !important; }
/* ---------------------------------------------------------
PHONE SEARCH BAR | magnifier hard left, close hard right
Both icons were sitting in the middle of the pill with the
input squeezed between them, so neither read as a control.
They anchor to the two ends now and the field takes what is
left. Same on the menu page's own search.
--------------------------------------------------------- */
@media (max-width: 767.98px){
.hdr-search .search-panel > form,
.hdr-search .search-panel > div,
.menu-search-panel > div{
display: flex;
align-items: center;
gap: 0;
padding-inline: .25rem; /* the icons carry their own tap area */
}
/* the magnifier: first item, pinned to the left end */
.hdr-search .search-panel [type="submit"],
.hdr-search .search-panel > form > span:first-child,
.hdr-search .search-panel > div > span:first-child,
.menu-search-panel > div > span:first-child{
order: -1;
flex: 0 0 auto;
width: 2.5rem;
display: grid;
place-items: center;
color: var(--ok-ink);
}
/* the field fills everything between them */
.hdr-search .search-panel input[type="search"],
.menu-search-panel input[type="search"]{
flex: 1 1 auto;
min-width: 0;
padding-inline: .25rem;
}
/* the close button: last item, pinned to the right end */
.hdr-search .search-panel [data-search-close],
.menu-search-panel [data-msearch-close]{
order: 99;
flex: 0 0 auto;
width: 2.5rem;
height: 2.5rem;
display: grid;
place-items: center;
color: var(--ok-ink);
}
}
/* ---------------------------------------------------------
DATE / TIME FIELDS ON iOS
Safari gives date, time and datetime-local inputs a large
intrinsic width and ignores the parent's width, so the field
ran off the side of the phone. These three declarations are
what actually contain it: appearance:none drops the native
sizing, min-width:0 lets it shrink inside a flex/grid parent,
and the explicit width pins it to the container.
--------------------------------------------------------- */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"]{
-webkit-appearance: none;
appearance: none;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
/* iOS vertically mis-centres the text once appearance is dropped */
min-height: 2.75rem;
line-height: 1.2;
}
/* the native calendar/clock button needs to stay inside the box */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator{
margin-inline-start: auto;
flex-shrink: 0;
}
/* iOS renders the value in its own inline box that can still overflow */
input[type="datetime-local"]::-webkit-date-and-time-value{
text-align: left;
min-width: 0;
margin: 0;
}
/* a date field inside a flex row must be allowed to shrink too */
.ok-input[type="date"],
.ok-input[type="time"],
.ok-input[type="datetime-local"]{ flex: 1 1 auto; }
/* the admin's fixed-width time boxes stay fixed on desktop, fluid on phones */
@media (max-width: 575.98px){
.ok-w-32[type="time"], .ok-w-32[type="date"]{ width: 100% !important; }
}
/* ---------------------------------------------------------
CARD FLAG ("Popular" / "Sold out")
Sits astride the card's top edge | half above the border,
half below | instead of floating inside the photo. White
fill and black text so it reads on any image behind it.
--------------------------------------------------------- */
.ok-cardflag{
position: absolute;
top: 0;
/* the card is text-left / photo-right, so centre the flag over the photo
rather than over the whole card */
right: 3.5rem;
transform: translateY(-50%); /* exactly half in, half out */
z-index: 12;
background: #fff;
color: #000;
border: 1px solid var(--ok-hairline);
border-radius: 9999px;
padding: .3rem .7rem;
font-size: .62rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
white-space: nowrap;
box-shadow: 0 1px 4px rgba(20, 20, 20, .12);
}
.badge-red.ok-cardflag{
background: var(--ok-red);
color: #fff;
border-color: var(--ok-red);
}
.ok-cardflag i{ color: var(--ok-yellow); }
/* ---------------------------------------------------------
NO NATIVE BLUE ON A TAPPED BUTTON
The palette rules were already correct | hover, focus and
active all resolve to black. The blue was the browser's own
painting: iOS Safari gives