) ---- */
.stay-faq-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-8); }
@media (min-width: 900px) {
.stay-faq-layout { grid-template-columns: 0.85fr 1.3fr; gap: var(--space-10); align-items: start; }
.stay-faq-intro { position: sticky; top: 120px; }
}
.stay-faq-intro .lede { margin-top: var(--space-4); }
.stay-faq-list { display: flex; flex-direction: column; }
.stay-faq-item { border-bottom: 1px solid var(--color-ink-15); padding-block: var(--space-5); }
.stay-faq-item:first-child { padding-top: 0; }
.stay-faq-item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
cursor: pointer;
list-style: none;
font-family: var(--font-heading);
font-weight: 700;
font-size: var(--text-lg);
}
.stay-faq-item summary::-webkit-details-marker { display: none; }
.stay-faq-toggle {
flex-shrink: 0;
width: 32px; height: 32px;
border-radius: 50%;
background: var(--color-gold-tint);
color: var(--color-gold-dark);
display: flex; align-items: center; justify-content: center;
font-size: 1.25rem;
line-height: 1;
transition: transform 0.2s var(--ease-standard);
}
.stay-faq-item[open] .stay-faq-toggle { transform: rotate(45deg); }
.stay-faq-answer p { color: var(--text-muted); margin-top: var(--space-3); max-width: 60ch; }
/* ---- Stay "Our Story" numbered blocks ----
01: text paired with a photo (text left, photo right), then a plain
4-photo strip below. 02: one large feature photo paired with text
(photo left, text right), plus 2 small photos under the text column. */
.story-sections { display: flex; flex-direction: column; gap: var(--space-11); }
.story-number {
display: block;
font-family: var(--font-heading);
font-weight: 800;
font-size: clamp(2.5rem, 4vw, 3.5rem);
color: var(--color-gold);
line-height: 1;
}
.story-intro { font-weight: 700; margin-top: var(--space-4); }
.story-photo-strip {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-4);
}
@media (min-width: 900px) { .story-photo-strip { grid-template-columns: repeat(4, 1fr); } }
.story-strip-tile { aspect-ratio: 3 / 4; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-sand-dark); }
.story-strip-tile .img-placeholder, .story-strip-tile img { width: 100%; height: 100%; object-fit: cover; }
.story-block {
display: flex;
flex-direction: column;
gap: var(--space-8);
}
@media (min-width: 900px) {
.story-block { flex-direction: row; align-items: center; gap: var(--space-9); }
}
.story-photo-feature { flex: 1 1 0; min-width: 0; width: 100%; }
/* Flat — no card, no rounded corners, no shadow, no fill color. The
photo itself (its own cream watercolor border baked in at export)
sits directly on the page's #F5EFE4 background so the two blend
into one continuous surface instead of reading as a boxed image. */
.story-photo-large { aspect-ratio: 4 / 5; }
.story-photo-large .img-placeholder, .story-photo-large img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-block-text { flex: 1 1 0; min-width: 0; }
.story-block-text h3 { margin-top: var(--space-2); }
.story-block-text p + p { margin-top: var(--space-4); color: var(--text-muted); }
.story-photo-duo { display: flex; gap: var(--space-4); margin-top: var(--space-6); }
.story-photo-duo .story-strip-tile { flex: 1 1 0; aspect-ratio: 1 / 1; }
/* ---- Job card ---- */
.job-card {
background: var(--surface-raised);
border-radius: var(--radius-md);
padding: var(--space-6);
box-shadow: var(--shadow-sm);
display:flex; flex-direction:column; gap: var(--space-3);
}
.job-card .job-meta { display:flex; gap:var(--space-3); flex-wrap:wrap; }
.job-card .job-title { font-size: var(--text-lg); }
.job-card p { font-size: var(--text-sm); color: var(--text-muted); }
.job-card .btn { align-self:flex-start; margin-top: var(--space-2); }
/* ---- Empty state ---- */
.empty-state {
border: 1.5px dashed var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-9) var(--space-6);
text-align: center;
display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
color: var(--text-muted);
background: rgba(255,255,255,0.4);
}
.empty-state svg { width: 32px; height: 32px; color: var(--color-gold); opacity: 0.8; }
.empty-state h3 { color: var(--text-primary); }
.empty-state p { max-width: 42ch; font-size: var(--text-sm); }
/* ---------------------------------------------------------------------- */
/* TIMELINE */
/* ---------------------------------------------------------------------- */
.timeline { position: relative; }
.timeline::before {
content: '';
position: absolute;
left: 27px; top: 0; bottom: 0;
width: 2px;
background: var(--color-border);
}
@media (min-width: 768px) { .timeline::before { left: 50%; transform: translateX(-1px); } }
.timeline-item {
position: relative;
display: flex;
gap: var(--space-5);
padding-block: var(--space-5);
}
@media (min-width: 768px) {
.timeline-item { justify-content: center; gap: var(--space-8); }
.timeline-item:nth-child(even) { flex-direction: row-reverse; }
}
.timeline-dot {
flex-shrink: 0;
width: 56px; height: 56px;
border-radius: 50%;
background: var(--surface-raised);
border: 2px solid var(--color-gold);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-heading);
font-weight: 800;
font-size: var(--text-xs);
color: var(--color-brown);
z-index: 1;
}
.timeline-item.is-now .timeline-dot { background: var(--color-gold); color: var(--color-white); box-shadow: 0 0 0 6px var(--color-gold-tint); }
.timeline-content {
background: var(--surface-raised);
border-radius: var(--radius-md);
padding: var(--space-5);
box-shadow: var(--shadow-sm);
flex: 1;
max-width: 420px;
}
@media (min-width: 768px) {
.timeline-item:nth-child(odd) .timeline-content { text-align: right; }
}
.timeline-content .event-name { font-family: var(--font-heading); font-weight: 700; }
.timeline-content .event-venue { font-size: var(--text-sm); color: var(--color-gold-dark); font-weight: 600; }
.timeline-content p { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-1); }
.timeline-item.is-now .badge { margin-bottom: var(--space-2); }
/* Linear variant — single left-hand column instead of the zigzag, so a
short list (1-4 items, as a daily program usually is) still reads as a
full, intentional block instead of a sparse zigzag with big empty gaps. */
.timeline-linear { max-width: var(--container-narrow); margin-inline: auto; }
.timeline-linear::before { left: 27px !important; transform: none !important; }
/* Gold progress line — drawn on top of the base gray line, grows downward
as --tl-progress (set by JS from scroll position) goes 0 -> 1. */
.timeline-linear::after {
content: '';
position: absolute;
left: 27px; top: 0; width: 2px; height: 100%;
background: var(--color-gold);
transform: scaleY(var(--tl-progress, 0));
transform-origin: top;
}
.timeline-linear .timeline-dot { position: relative; z-index: 1; }
.timeline-linear .timeline-item,
.timeline-linear .timeline-item:nth-child(even) {
flex-direction: row;
justify-content: flex-start;
}
.timeline-linear .timeline-dot { width: 64px; height: 64px; font-size: var(--text-sm); }
.timeline-linear .timeline-content,
.timeline-linear .timeline-item:nth-child(odd) .timeline-content {
text-align: left;
max-width: none;
width: 100%;
}
.timeline-linear .timeline-item.is-now .timeline-content { box-shadow: 0 0 0 2px var(--color-gold), var(--shadow-md); }
/* ---------------------------------------------------------------------- */
/* LIFESTYLE COLLAGE */
/* ---------------------------------------------------------------------- */
.collage-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: 90px;
gap: var(--space-3);
}
.collage-grid .media-frame { border-radius: var(--radius-md); }
.collage-grid .c1 { grid-column: 1 / 5; grid-row: 1 / 5; }
.collage-grid .c2 { grid-column: 5 / 7; grid-row: 1 / 3; }
.collage-grid .c3 { grid-column: 5 / 7; grid-row: 3 / 5; }
.collage-grid .c4 { grid-column: 1 / 3; grid-row: 5 / 8; }
.collage-grid .c5 { grid-column: 3 / 5; grid-row: 5 / 7; }
.collage-grid .c6 { grid-column: 5 / 7; grid-row: 5 / 8; }
@media (max-width: 767px) {
.collage-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; }
.collage-grid .c1 { grid-column: 1/3; grid-row: 1/3; }
.collage-grid .c2 { grid-column: 1/2; grid-row: 3/4; }
.collage-grid .c3 { grid-column: 2/3; grid-row: 3/4; }
.collage-grid .c4 { grid-column: 1/2; grid-row: 4/6; }
.collage-grid .c5 { grid-column: 2/3; grid-row: 4/5; }
.collage-grid .c6 { grid-column: 2/3; grid-row: 5/6; }
}
/* ---------------------------------------------------------------------- */
/* GRIDS */
/* ---------------------------------------------------------------------- */
.grid { display: grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1180px) { .grid-6 { grid-template-columns: repeat(6, 1fr); } }
/* Simple photo-only card grids (Featured Dishes) read fine at 2-up even on
narrow phones. Experience Cards (#experiences) carry a title + short
description and are shown 1-per-row on mobile instead. */
[aria-labelledby^="hb-menu-"] .grid-4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) {
[aria-labelledby^="hb-menu-"] .grid-4 { grid-template-columns: repeat(4, 1fr); }
}
/* Business card grids (e.g. Eat page "Where to Eat") — the cards carry
too much content (photo, tagline, tags, button) for a 2-up mobile
layout, so these stack one per row until there's real room. */
.business-grid { grid-template-columns: 1fr; }
@media (min-width: 640px) { .business-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .business-grid.grid-3 { grid-template-columns: repeat(3, 1fr); } }
/* Membership teaser — photo fills the full container width on mobile
(same as every other section photo, no wider), then settles into a
2/3 photo · 1/3 text split from laptop width up. */
.membership-grid { grid-template-columns: 1fr; }
@media (min-width: 900px) { .membership-grid { grid-template-columns: 1fr 2fr; } }
.membership-photo { border-radius: var(--radius-lg); }
.horizontal-scroll {
display: flex;
gap: var(--space-5);
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: var(--space-4);
margin: 0 calc(var(--space-5) * -1);
padding-inline: var(--space-5);
scrollbar-width: thin;
}
.horizontal-scroll > * { scroll-snap-align: start; flex: 0 0 280px; }
@media (min-width: 768px) { .horizontal-scroll > * { flex-basis: 320px; } }
/* ---------------------------------------------------------------------- */
/* HERO */
/* ---------------------------------------------------------------------- */
.hero {
position: relative;
min-height: min(92vh, 780px);
display: flex;
align-items: flex-end;
color: var(--color-bg);
overflow: hidden;
isolation: isolate;
}
/* On narrow phones a 92vh box is far taller/narrower than any 16:9-ish
source photo, forcing object-fit:cover to crop most of the width away.
Cap the height so the visible crop stays reasonable, and scale the
whole hero down (height, type, spacing) to match how compact the rest
of the mobile layout is — a shrunk-down version of the desktop hero,
not a full-screen block of its own. */
@media (max-width: 640px) {
.hero { min-height: min(48vh, 380px); }
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
/* Placeholder hint stays clear of the headline: hero text is bottom-anchored
and can wrap to several lines, so centering the "upload photo" hint in the
full hero area (the default .img-placeholder behavior) risks landing it
right in the gap between headline lines. Pin it as a compact top-right
badge instead — clear of the left-aligned text column at any width this
headline can wrap to. Real photos (once uploaded) replace this
placeholder entirely, so this only affects the pre-content preview state. */
.hero-media .img-placeholder {
align-items: flex-end;
justify-content: flex-start;
text-align: right;
padding: var(--space-8) var(--space-6) 0 0;
}
.hero-media .img-placeholder span { max-width: 220px; }
/* Below this width the headline column and the badge column no longer have
guaranteed clearance (a long headline can wrap to 3 lines wide enough to
reach the badge) — keep just the icon there rather than risk the two
colliding; the descriptive hint is a dev/admin aid, not end-user content. */
@media (max-width: 1500px) {
.hero-media .img-placeholder span { display: none; }
}
.hero::after {
content: '';
position: absolute; inset: 0;
background: var(--color-overlay-hero);
z-index: -1;
}
.hero-content { padding-block: var(--space-10) var(--space-11); }
.hero .eyebrow { color: var(--color-gold-light); }
.hero .eyebrow::before { background: var(--color-gold-light); }
.hero h1 { color: var(--color-bg); margin-top: var(--space-3); max-width: 1100px; font-size: clamp(2.25rem, 4vw + 1rem, 3.75rem); }
.hero p.lede { color: rgba(245,239,228,0.85); margin-top: var(--space-4); max-width: 56ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-6); }
@media (max-width: 640px) {
.hero h1 { max-width: 100%; font-size: 1.5rem; margin-top: var(--space-2); }
.hero-content { padding-block: var(--space-6) var(--space-7); }
.hero p.lede { margin-top: var(--space-2); font-size: var(--text-sm); }
.hero p.lede + p.lede { margin-top: var(--space-1); }
.hero-ctas { gap: var(--space-3); margin-top: var(--space-4); }
.hero-ctas .btn { min-height: 42px; padding: 0 var(--space-5); font-size: 0.75rem; }
}
.hero-sub {
min-height: min(92vh, 780px);
}
@media (max-width: 640px) {
.hero-sub { min-height: min(48vh, 380px); }
}
.hero-sub .hero-content { padding-block: var(--space-9); }
@media (max-width: 640px) {
.hero-sub .hero-content { padding-block: var(--space-5) var(--space-6); }
}
/* ---------------------------------------------------------------------- */
/* BRAND TICKER — thin scrolling strip under the homepage hero, cycling */
/* through the 8 Happy Bear Group businesses (right-to-left, continuous). */
/* Reuses the shared hb-marquee keyframes (see reviews-marquee-track). */
/* Full-bleed (no .container): the reference look is edge-to-edge with */
/* items simply clipped at the viewport edge, no fade mask. */
/* ---------------------------------------------------------------------- */
.brand-ticker {
background: var(--color-green);
overflow: hidden;
}
.brand-ticker-track {
display: flex;
align-items: center;
width: max-content;
animation: hb-marquee 42s linear infinite;
}
.brand-ticker:hover .brand-ticker-track { animation-play-state: paused; }
.brand-ticker-item {
flex: 0 0 auto;
padding: var(--space-4) 0;
color: var(--color-bg);
font-family: var(--font-heading);
font-weight: 700;
font-size: var(--text-md);
white-space: nowrap;
}
.brand-ticker-sep {
flex: 0 0 auto;
margin: 0 var(--space-6);
color: var(--color-gold-light);
font-size: var(--text-sm);
}
@media (max-width: 640px) {
.brand-ticker-item { font-size: var(--text-sm); }
.brand-ticker-sep { margin: 0 var(--space-4); }
}
@media (prefers-reduced-motion: reduce) {
.brand-ticker-track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; }
}
/* ---------------------------------------------------------------------- */
/* CTA (dark) SECTION */
/* ---------------------------------------------------------------------- */
.cta-dark {
position: relative;
isolation: isolate;
border-radius: var(--radius-xl);
padding: var(--space-7) var(--space-6);
text-align: center;
display: flex; flex-direction: column; align-items: center; gap: var(--space-5);
}
@media (min-width: 768px) { .cta-dark { padding: var(--space-9) var(--space-9); } }
.cta-dark .cta-ctas { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; }
/* Optional background photo (Customizer → Happy Bear Settings → Homepage
— Final CTA) in place of the plain --color-brown-darker bg-dark —
same object-fit:cover + overlay-gradient treatment as the page heroes,
reusing --color-overlay-hero so text stays legible over any photo.
Falls back to the solid color untouched when no photo is set. */
.cta-dark-media { position: absolute; inset: 0; z-index: -2; border-radius: inherit; overflow: hidden; }
.cta-dark-media img { width: 100%; height: 100%; object-fit: cover; }
/* Noticeably darker than the shared --color-overlay-hero heroes use —
client asked for extra contrast here specifically so the white text
stays punchy over a busier photo (a lit dinner table at sunset). */
.cta-dark-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,14,10,0.72) 0%, rgba(20,14,10,0.8) 55%, rgba(20,14,10,0.9) 100%); }
.cta-dark.has-photo { min-height: 420px; justify-content: center; }
@media (max-width: 640px) { .cta-dark.has-photo { min-height: 320px; } }
/* ---------------------------------------------------------------------- */
/* FOOTER */
/* ---------------------------------------------------------------------- */
.site-footer { background: var(--color-brown-darker); color: var(--text-on-dark); padding-block: var(--space-10) var(--space-6); }
.footer-grid {
display: grid;
gap: var(--space-6);
grid-template-columns: 1fr;
padding-bottom: var(--space-5);
align-items: start;
}
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* 5 columns (brand+contact, Explore, Businesses, Company, Subscribe).
First and last get the most room (contact rows with icons; the
bordered subscribe card), Businesses stays wide enough that its
longest entry ("Happy Bear Live Music Bar & Bistro") never wraps,
and the two plain-link columns (Explore/Company) need the least. */
@media (min-width: 1280px) { .footer-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr) minmax(0, 1.5fr) minmax(0, 0.65fr) minmax(0, 1.5fr); } }
.footer-col { min-width: 0; }
.footer-col h4 {
color: var(--color-bg);
font-size: var(--text-xs);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
margin-bottom: var(--space-4);
}
.footer-col p { color: var(--text-on-dark-muted); font-size: var(--text-sm); }
.footer-col ul { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-col a { color: var(--text-on-dark-muted); font-size: var(--text-sm); transition: color var(--duration-fast) var(--ease-out); }
.footer-col a:hover { color: var(--color-gold-light); }
.footer-brand { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.footer-contact-list { margin-top: var(--space-5); }
.footer-contact-list li,
.footer-contact-list a { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-on-dark-muted); }
/* Icon is a fixed-size flex item; the text sits in its own flex:1 span so
long content (e.g. the full street address) wraps as normal inline text
inside that span instead of the icon+text row itself breaking onto 2
flex lines (which put the icon above the text — client: "icon và text
phải cùng hàng"). Also gives every row the same --text-sm size the
plain-link columns use, instead of bare li text (like the address)
inheriting the larger base font size (client: "chữ to hơn bình
thường"). */
.contact-row-text { flex: 1 1 auto; min-width: 0; }
/* Keeps a phone number from breaking mid-digits (client: "số dt K thể
xuống hàng 3 số cuối được" — the last 3 digits were wrapping onto their
own line) — the "Call & WhatsApp:" label around it can still wrap
normally, just never inside the number itself. */
.no-wrap { white-space: nowrap; }
.contact-row-icon { flex-shrink: 0; display: flex; margin-top: 0.15em; color: var(--color-gold-light); }
.contact-row-icon svg { width: 16px; height: 16px; }
/* Solid dark circular badges (brand-mark style), matching the client's
reference — swapped from the previous plain-outline treatment. */
.footer-social { display: flex; gap: var(--space-3); margin-top: var(--space-5); }
.footer-social a {
width: 40px; height: 40px;
border-radius: 50%;
background: var(--color-ink);
color: var(--color-bg);
display: flex; align-items: center; justify-content: center;
transition: background var(--duration-fast) var(--ease-out);
}
.footer-social a:hover { background: var(--color-gold); color: var(--color-ink); }
.footer-social svg { width: 18px; height: 18px; }
/* Bordered "Stay Updated" card, matching the client's reference —
heading + subtext + stacked email field + full-width button. Used to
have a deliberately smaller top padding than the other 3 sides (to
line the heading up with the plain h4s beside it), but the client
flagged that as sitting too close to the top border ("hiện top sát
với border quá") — now uniform padding on all sides like any other
bordered card. */
.footer-newsletter-card {
border: 1.5px solid var(--color-border-dark);
border-radius: var(--radius-lg);
padding: var(--space-6);
}
.footer-newsletter-card h4 { font-size: var(--text-md); margin-bottom: var(--space-3); }
.footer-newsletter-card > p { margin: 0; }
.newsletter-form { margin-top: var(--space-4); }
.newsletter-form-stacked { display: flex; flex-direction: column; gap: var(--space-3); }
.newsletter-form input {
min-height: 46px;
padding-inline: var(--space-4);
border-radius: var(--radius-pill);
border: 1.5px solid var(--color-border-dark);
background: rgba(245,239,228,0.06);
color: var(--color-bg);
}
.newsletter-form input::placeholder { color: var(--text-on-dark-muted); }
.newsletter-form-stacked .btn { width: 100%; }
/* Big brand wordmark straddling the footer's divider line, modeled on the
Waveyu Webflow template's footer treatment (client reference) — the
line itself now belongs here (::before), not .footer-grid, so the text
sits directly on top of it. clamp() (rather than Waveyu's raw vw-per-
letter sizing, tuned for their much shorter 6-letter word) keeps our
longer "Happy Bear Group" on one line at every width from mobile up,
per the client's "nằm đúng 1 hàng" requirement. Sits close under the
column grid above it ("sát lên trên với các block") — small top
padding, more room below before the copyright row. */
.footer-brand-watermark {
position: relative;
padding: var(--space-3) 0 var(--space-6);
text-align: center;
}
.footer-brand-watermark::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
border-top: 1px solid var(--color-border-dark);
transform: translateY(-50%);
}
.brand-watermark-word {
position: relative;
display: inline-block;
font-family: var(--font-heading);
font-weight: 800;
text-transform: uppercase;
letter-spacing: -0.01em;
line-height: 1;
white-space: nowrap;
font-size: clamp(1.5rem, 7vw, 6rem);
background: var(--color-brown-darker);
padding-inline: var(--space-4);
}
/* Per-letter hover — each character lights up on its own as the cursor
passes over it (client: "hiệu ứng từng chữ cái"), rather than the whole
word switching color together. Faint warm off-white by default ("trắng
mờ mờ vàng vàng"), brightens to the site's luxury gold on hover ("sáng
màu vàng nâu Luxury") — color inherits from .brand-watermark-word so
only the hovered letter's own rule needs to override it. */
.brand-watermark-word { color: rgba(245, 239, 228, 0.16); }
.brand-letter {
display: inline-block;
cursor: default;
transition: color var(--duration-base) var(--ease-out);
}
.brand-letter:hover { color: var(--color-gold); }
.footer-bottom {
display: flex; flex-wrap: wrap; gap: var(--space-4);
justify-content: space-between; align-items: center;
padding-top: var(--space-6);
font-size: var(--text-xs);
color: var(--text-on-dark-muted);
}
.footer-bottom ul { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.footer-bottom a:hover { color: var(--color-gold-light); }
/* ---------------------------------------------------------------------- */
/* STICKY LIVE-CHAT BUTTON */
/* ---------------------------------------------------------------------- */
/* Sits a third of the viewport height up from the bottom edge — client
asked to measure from the bottom rather than the top. bottom:33vh on
a position:fixed element resolves against the viewport, so this holds
that position regardless of scroll or page length. */
.sticky-chat {
position: fixed;
right: var(--space-6);
bottom: 33vh;
z-index: var(--z-sticky-cta);
transition: bottom var(--duration-base) var(--ease-out);
}
/* Client: the chat button must always stay floating (position:fixed) —
never dock into the footer's normal document flow — but must not sit
on top of the footer's brand-wordmark divider line either. main.js
adds this class (via the same IntersectionObserver technique used
elsewhere) once that line has scrolled up to the button's 33vh-from-
bottom line, hopping the button to a fixed pixel offset that clears
above the wordmark (comfortably more than the line's own distance from
the very bottom of the page, so it never overlaps at any screen size),
while remaining position:fixed throughout. */
.sticky-chat.is-above-watermark { bottom: 260px; }
@media (max-width: 767px) {
.sticky-chat { right: var(--space-4); }
}
.sticky-chat-btn {
display: flex;
align-items: center;
gap: var(--space-2);
background: var(--color-green); /* Was the generic WhatsApp brand green
(#25D366), deliberately outside the site
palette — client asked for it to match the
site's own green instead (same shade as the
home page's brand ticker banner right below
the hero, and the Aroma "By Day" circles'
hover glow), per the standing "only this
site's color tokens" rule. */
color: #fff;
padding: var(--space-3) var(--space-5);
border-radius: var(--radius-pill);
box-shadow: var(--shadow-gold);
font-weight: 700;
font-size: var(--text-sm);
transition: transform var(--duration-fast) var(--ease-out);
}
.sticky-chat-btn:hover { transform: scale(1.06); }
.sticky-chat-btn svg { width: 22px; height: 22px; flex-shrink: 0; }
/* Icon-only circular button on narrow screens — same collapse pattern
as other icon+label buttons on the site once space is tight. */
@media (max-width: 640px) {
.sticky-chat-label { display: none; }
.sticky-chat-btn { padding: var(--space-3); border-radius: 50%; }
}
.booking-panel {
position: fixed;
inset: 0;
z-index: var(--z-modal);
display: none;
align-items: flex-end;
justify-content: center;
}
.booking-panel.is-open { display: flex; }
@media (min-width: 640px) { .booking-panel { align-items: center; } }
.booking-panel-backdrop {
position: absolute; inset: 0;
background: rgba(20,14,10,0.55);
backdrop-filter: blur(2px);
}
.booking-panel-sheet {
position: relative;
background: var(--surface-raised);
width: 100%;
max-width: 440px;
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
padding: var(--space-6) var(--space-6) var(--space-8);
max-height: 85vh;
overflow-y: auto;
animation: sheet-in var(--duration-base) var(--ease-out);
}
@media (min-width: 640px) { .booking-panel-sheet { border-radius: var(--radius-xl); margin-inline: var(--space-5); } }
@keyframes sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.booking-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-5); }
.booking-panel-close {
width: 40px; height: 40px;
border-radius: 50%;
background: var(--color-sand);
display: flex; align-items: center; justify-content: center;
}
.booking-options { display: flex; flex-direction: column; gap: var(--space-3); }
.booking-option {
display: flex; align-items: center; gap: var(--space-4);
padding: var(--space-4);
border-radius: var(--radius-md);
border: 1.5px solid var(--color-border);
transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.booking-option:hover { border-color: var(--color-gold); background: var(--color-gold-tint); }
.booking-option .opt-icon {
width: 44px; height: 44px; border-radius: 50%;
background: var(--color-sand);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; color: var(--color-brown);
}
.booking-option .opt-title { font-family: var(--font-heading); font-weight: 700; font-size: var(--text-sm); }
.booking-option .opt-desc { font-size: var(--text-xs); color: var(--text-muted); }
.booking-option .opt-arrow { margin-left: auto; color: var(--color-gold-dark); }
/* ---------------------------------------------------------------------- */
/* FORMS */
/* ---------------------------------------------------------------------- */
.form-field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.form-field label { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 600; }
.form-field .req { color: var(--color-error); margin-left: 2px; }
.form-field input, .form-field textarea, .form-field select {
min-height: 48px;
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-md);
border: 1.5px solid var(--color-border);
background: var(--surface-raised);
font-size: var(--text-base);
}
.form-field textarea { min-height: 120px; resize: vertical; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
border-color: var(--color-gold);
}
.form-field .helper { font-size: var(--text-xs); color: var(--text-faint); }
.form-field.has-error input, .form-field.has-error textarea { border-color: var(--color-error); }
.form-field .error-msg { font-size: var(--text-xs); color: var(--color-error); display: none; }
.form-field.has-error .error-msg { display: block; }
.form-row { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .form-row.cols-2 { grid-template-columns: 1fr 1fr; } }
fieldset { border: none; padding: 0; margin-bottom: var(--space-6); }
legend { font-family: var(--font-heading); font-weight: 700; font-size: var(--text-md); margin-bottom: var(--space-4); padding: 0; }
.form-success {
display: flex; align-items: center; gap: var(--space-3);
padding: var(--space-4) var(--space-5);
background: rgba(78,122,81,0.1);
color: var(--color-success);
border-radius: var(--radius-md);
font-weight: 600;
}
/* ---------------------------------------------------------------------- */
/* FILTER CHIPS */
/* ---------------------------------------------------------------------- */
.filter-chips { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.filter-chip {
min-height: 40px;
padding: 0 var(--space-5);
border-radius: var(--radius-pill);
border: 1.5px solid var(--color-border);
background: var(--surface-raised);
font-family: var(--font-heading);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--text-muted);
transition: all var(--duration-fast) var(--ease-out);
}
.filter-chip[aria-pressed="true"] { background: var(--color-ink); color: var(--color-bg); border-color: var(--color-ink); }
.filter-chip:hover:not([aria-pressed="true"]) { border-color: var(--color-gold); color: var(--color-gold-dark); }
/* ---------------------------------------------------------------------- */
/* BREADCRUMBS */
/* ---------------------------------------------------------------------- */
.breadcrumbs { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--text-faint); flex-wrap: wrap; }
.breadcrumbs a:hover { color: var(--color-gold-dark); }
.breadcrumbs .sep { color: var(--color-border); }
.breadcrumbs [aria-current="page"] { color: var(--text-primary); font-weight: 600; }
/* ---------------------------------------------------------------------- */
/* MAP EMBED FRAME */
/* ---------------------------------------------------------------------- */
.map-frame {
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 16/10;
border: 1px solid var(--color-border);
}
.map-frame iframe { width: 100%; height: 100%; border: 0; }
/* ---------------------------------------------------------------------- */
/* SCROLL REVEAL (JS-driven, respects reduced-motion via tokens) */
/* ---------------------------------------------------------------------- */
[data-reveal] {
opacity: 0;
transform: translateY(14px);
transition: opacity var(--duration-reveal) var(--ease-standard), transform var(--duration-reveal) var(--ease-standard);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
[data-reveal-group] > * { transition-delay: calc(var(--reveal-index, 0) * 60ms); }
/* Image reveal: a quiet clip-path unveil for hero/editorial imagery — used sparingly, not on every card */
[data-reveal-image] { clip-path: inset(0 0 0 0); }
[data-reveal-image] img {
transform: scale(1.08);
transition: transform 1100ms var(--ease-standard);
}
[data-reveal-image].is-visible img { transform: scale(1); }
/* ---------------------------------------------------------------------- */
/* SCROLL-LINKED CINEMATIC REVEAL — brief §6/§15 "ScrollRevealImage": */
/* panel starts narrower + zoomed, widens/zooms-out/rounds continuously */
/* as it crosses the viewport. main.js writes --rp (0→1 progress) and */
/* --rr (0→28 radius, only in the back half of the scroll) per frame. */
/* Use on 3–6 important sections only — never on every image (§15). */
/* ---------------------------------------------------------------------- */
.scroll-reveal {
position: relative;
width: calc(66% + 34% * var(--rp, 1));
max-width: 100%;
margin-inline: auto;
height: min(70vh, 600px);
overflow: hidden;
border-radius: calc(var(--rr, 28) * 1px);
will-change: width, border-radius;
}
.scroll-reveal-inner {
position: absolute;
inset: 0;
transform: scale(calc(1.32 - 0.32 * var(--rp, 1)));
will-change: transform;
}
.scroll-reveal-inner img,
.scroll-reveal-inner .img-placeholder { width: 100%; height: 100%; }
/* No-JS / reduced-motion fallback: show the finished, settled state */
.scroll-reveal.no-motion { width: 100%; border-radius: var(--radius-lg); }
.scroll-reveal.no-motion .scroll-reveal-inner { transform: none; }
@media (max-width: 640px) {
.scroll-reveal { width: calc(84% + 16% * var(--rp, 1)); height: min(48vh, 420px); }
.scroll-reveal-inner { transform: scale(calc(1.16 - 0.16 * var(--rp, 1))); }
}
/* ---- Offers mosaic (1 large + 2 stacked small photo tiles) ----
Desktop target: large tile 760x640, small tiles 400x308 each — see the
.mosaic-tile aspect-ratio rules below, which drive those exact
proportions regardless of the container's actual rendered width. */
.offers-mosaic {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-5);
}
@media (min-width: 900px) {
.offers-mosaic {
grid-template-columns: 19fr 10fr;
align-items: stretch;
}
}
.mosaic-col-small {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-5);
}
.mosaic-tile {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 5 / 4;
}
.mosaic-tile-large { aspect-ratio: 19 / 16; }
.mosaic-tile-small { aspect-ratio: 400 / 308; }
.mosaic-tile img,
.mosaic-tile .img-placeholder { width: 100%; height: 100%; object-fit: cover; }
.mosaic-caption {
position: absolute;
inset-inline: 0;
bottom: 0;
background: linear-gradient(180deg, rgba(20,14,10,0) 0%, rgba(20,14,10,0.22) 45%, rgba(20,14,10,0.85) 100%);
color: var(--color-bg);
padding: var(--space-10) var(--space-5) var(--space-5);
}
.mosaic-caption-title {
font-family: var(--font-heading);
font-weight: 700;
font-size: var(--text-md);
line-height: var(--leading-snug);
}
.mosaic-caption-link {
display: inline-block;
margin-top: var(--space-2);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--color-gold-light);
text-decoration: underline;
text-underline-offset: 3px;
}
.mosaic-caption-link:hover { color: var(--color-bg); }
@media (max-width: 640px) {
.mosaic-caption { padding: var(--space-8) var(--space-4) var(--space-4); }
}
/* ---------------------------------------------------------------------- */
/* HAPPY BEAR LIVE MUSIC BAR & BISTRO — Intro section */
/* Centered heading/subtitle, a full-width photo with an optional rotated */
/* "Since " diamond badge overlapping its bottom-left corner, then a */
/* second centered eyebrow/heading — modeled on the Taor Webflow */
/* template's "Seeking adventure..." / "Taor is a..." block. Reuses the */
/* sitewide .section-head.center + .eyebrow classes for both text blocks */
/* so typography stays consistent with every other section. See */
/* [hb_bistro_intro]. */
.bistro-intro-photo {
position: relative;
margin-top: var(--space-9);
}
.bistro-intro-photo-frame {
aspect-ratio: 1920 / 1246;
border-radius: var(--radius-lg);
overflow: hidden;
perspective: 800px;
}
.bistro-intro-photo-frame img,
.bistro-intro-photo-frame .img-placeholder { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s cubic-bezier(0.2, 1, 0.3, 1); }
.bistro-since-badge {
position: absolute;
left: var(--space-6);
bottom: 0;
width: clamp(96px, 8vw + 56px, 152px);
height: clamp(96px, 8vw + 56px, 152px);
transform: translateY(45%);
}
.bistro-since-diamond {
position: absolute;
inset: 0;
background: var(--color-bg);
border-radius: var(--radius-sm);
transform: rotate(45deg);
box-shadow: 0 12px 28px rgba(20,14,10,0.18);
}
.bistro-since-text {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: var(--space-1);
}
.bistro-since-label { font-family: var(--font-heading); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-muted); }
.bistro-since-year { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700; color: var(--color-ink); }
@media (max-width: 640px) {
.bistro-since-badge { left: var(--space-4); }
}
/* ---- Bistro intro — "About the Bistro" / "Cuisine" photo+story pairs ----
Two stacked blocks, each one tall photo with a SMALL SQUARE-ish text
card overlapping one of its corners (not a side-by-side pair of
equal-height blocks) — matches the real proportions measured live on
the Taor reference (a ~692x907px photo next to a ~658x627px card,
inset from the photo's top and overlapping its side by ~140px, i.e.
the card is clearly smaller than the photo and floats inset on top of
it). Item 1's card sits over its photo's right side; item 2's mirrors
it on the left. A visible gap separates the two stacked groups. Card
colors reuse existing sitewide tokens (brown-light / brown-dark).
Below 700px the card drops out of absolute position and sits centered,
overlapping just the photo's bottom edge, so it never gets cramped. */
.bistro-story-grid {
display: flex;
flex-direction: column;
gap: var(--space-11);
margin-top: var(--space-10);
}
/* Whole pair (photo + overlapping card) scaled to 49% width — first
shrunk to 70%, then shrunk another 30% on top of that per the client's
follow-up feedback (70% x 70% = 49%) — everything inside is sized in %
of the item, so shrinking the item shrinks both proportionally without
needing to recalculate each value separately. Item 1 stays
left-anchored, item 2 mirrors to the right, preserving the zigzag; both
center on narrow screens where left/right no longer reads as
intentional (see the max-width:700px override below). */
.bistro-story-item { position: relative; width: 49%; }
/* A definite `width` (not max-width) so the percentage-sized photo/card
inside always has something real to resolve against — pairing an auto
cross-axis margin with an *indefinite* width (max-width + stretch) is
what collapsed this to 0 during testing. Pulled up to overlap item 1's
own vertical span (a real staggered tier, not just two blocks stacked
with a gap) — negative margin instead of shrinking .bistro-story-grid's
gap so item 1 and item 2 can overlap by more than the gap itself. */
.bistro-story-item-2 { margin-left: auto; margin-top: -18%; }
.bistro-story-photo {
position: relative;
width: 68%;
aspect-ratio: 3 / 4;
border-radius: var(--radius-lg);
overflow: hidden;
perspective: 800px;
}
.bistro-story-item-2 .bistro-story-photo { margin-left: auto; }
.bistro-story-photo img,
.bistro-story-photo .img-placeholder { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s cubic-bezier(0.2, 1, 0.3, 1); }
.bistro-story-card {
position: absolute;
top: 16%;
width: 44%;
height: 60%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border-radius: var(--radius-md);
color: var(--color-bg);
padding: var(--space-5);
box-shadow: 0 20px 40px rgba(20,14,10,0.16);
}
.bistro-story-item-1 .bistro-story-card { right: 0; }
.bistro-story-item-2 .bistro-story-card { left: 0; }
.bistro-story-card-inner { max-width: 24ch; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.bistro-story-card-1 { background: var(--color-brown-light); }
.bistro-story-card-2 { background: var(--color-brown-dark); }
.bistro-story-card .eyebrow,
.bistro-story-card .eyebrow::before { color: rgba(245,239,228,0.75); }
.bistro-story-card-icon { color: rgba(245,239,228,0.6); }
.bistro-story-card p { color: rgba(245,239,228,0.9); font-size: var(--text-sm); }
.bistro-story-link,
.bistro-story-link-plain {
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: var(--color-bg);
font-family: var(--font-heading);
font-weight: 600;
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
}
.bistro-story-link-icon { position: relative; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bistro-story-link-diamond { position: absolute; inset: 0; background: var(--color-bg); border-radius: var(--radius-sm); transform: rotate(45deg); }
.bistro-story-link-icon svg { position: relative; width: 12px; height: 12px; color: var(--color-ink); }
.bistro-story-link-plain svg { transition: transform 0.25s ease; }
.bistro-story-link-plain:hover svg { transform: translateX(4px); }
@media (max-width: 700px) {
.bistro-story-grid { gap: var(--space-9); margin-top: var(--space-8); }
.bistro-story-item,
.bistro-story-item-2 { width: 70%; margin-inline: auto; margin-top: 0; }
.bistro-story-photo,
.bistro-story-item-2 .bistro-story-photo { width: 100%; margin-left: 0; }
/* Same compound selectors as the desktop .bistro-story-item-1/-2
right:0 / left:0 rules above (not just .bistro-story-card alone) —
otherwise those higher-specificity rules keep winning here even
though this media query comes later in the file, leaving `right`/
`left` pinned non-auto. No forced aspect-ratio here (unlike the
"Since" badge's diamond) — this card's real eyebrow+paragraph+link
copy doesn't fit a true square at mobile width without overflowing,
so height stays auto/content-driven and the card is simply centered,
overlapping the photo's bottom edge by a fixed amount. */
.bistro-story-item-1 .bistro-story-card,
.bistro-story-item-2 .bistro-story-card {
position: absolute;
top: auto;
bottom: -8%;
left: 50%;
right: auto;
transform: translateX(-50%);
width: 82%;
height: auto;
}
}
/* ---- Bistro cuisine — category strip that pans with the cursor ----
[hb_bistro_cuisine]. On hover-capable devices the track's transform is
driven entirely by main.js's [data-cursor-scroll] (cursor X position
0..1 across the strip maps to scroll position 0..1) so overflow stays
hidden and there's no native scrollbar; touch devices get a plain
horizontal swipe scroller instead (JS skips them, see the
`(hover: hover)` gate in main.js). Each item used to be a link to
/eat/#menu — removed per client feedback ("bỏ link nha, chỉ hiệu ứng
xem ảnh là dc rồi"): plain
s now, decorative only, no click-
through, no "go to menu" arrow icon. */
.bistro-cuisine-strip { margin-top: var(--space-8); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.bistro-cuisine-strip::-webkit-scrollbar { display: none; }
@media (hover: hover) {
.bistro-cuisine-strip { overflow: hidden; }
}
.bistro-cuisine-track { display: flex; gap: var(--space-6); width: max-content; transition: transform 0.2s ease-out; }
.bistro-cuisine-item { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); width: 220px; flex-shrink: 0; }
.bistro-cuisine-photo { width: 100%; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; perspective: 800px; }
.bistro-cuisine-photo img,
.bistro-cuisine-photo .img-placeholder { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s cubic-bezier(0.2, 1, 0.3, 1); }
.bistro-cuisine-label { display: inline-flex; align-items: center; font-family: var(--font-heading); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: var(--text-sm); }
@media (max-width: 640px) {
.bistro-cuisine-item { width: 168px; }
}
.bistro-cuisine-tagline { margin-top: var(--space-11); margin-bottom: 0; }
/* ---- Bistro events — scroll-stacked event list, no card chrome ----
[hb_bistro_events]. Full container width, single column. Each
.bistro-event-card is `position: sticky` at the SAME `top` offset,
stacked with zero gap in normal flow — this is the entire "scroll
reveals each one" mechanism, no JS at all (confirmed by inspecting the
Lyria Webflow reference's live DOM: same-height sticky siblings,
nothing more). A later card is later in the DOM, so it naturally
paints over the one still stuck above it as its own scroll slot
arrives — the opaque background (matching the section's own, not a
distinct card color) is what sells the "covering" look without
looking like a boxed card. Also per the reference's own computed
styles (no background different from the page, no radius, no shadow —
just a 1px top/bottom divider): every card gets a top divider, and only
the last one also gets a bottom divider, so adjacent cards don't double
up their shared line. */
.bistro-events-stack { display: flex; flex-direction: column; margin-top: var(--space-9); }
/* Photo column is a fixed, modest width (not a 1fr/1fr split of the full
container) with a landscape-ish aspect-ratio matching the Lyria
reference's own real photo proportions (measured live: ~609x490px,
i.e. close to 5:4 — the earlier 4:5 *portrait* ratio at full container
width was what made these read as oversized "hero" blocks rather than
the reference's fairly compact rows; this combination lands each card
at roughly a third of that previous height). */
.bistro-event-card {
position: sticky;
top: calc(var(--header-height-scrolled) + var(--space-6));
background: var(--color-bg);
padding: var(--space-5) 0;
border-top: 2px solid var(--color-ink-15);
display: grid;
grid-template-columns: minmax(0, 320px) 1fr;
gap: var(--space-6);
align-items: center;
}
.bistro-events-stack .bistro-event-card:last-child { border-bottom: 2px solid var(--color-ink-15); }
.bistro-event-viewmore {
position: absolute;
top: var(--space-5);
right: 0;
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-family: var(--font-heading);
font-weight: 600;
font-size: var(--text-sm);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
color: var(--color-gold-dark);
}
.bistro-event-viewmore svg { transition: transform 0.25s ease; }
.bistro-event-viewmore:hover svg { transform: translateX(4px); }
.bistro-event-photo {
aspect-ratio: 5 / 4;
border-radius: var(--radius-md);
overflow: hidden;
perspective: 800px;
}
.bistro-event-photo img,
.bistro-event-photo .img-placeholder { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s cubic-bezier(0.2, 1, 0.3, 1); }
.bistro-event-content { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.bistro-event-meta { font-family: var(--font-heading); font-size: var(--text-sm); color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.bistro-event-content p:not(.bistro-event-meta) { color: var(--text-muted); }
@media (max-width: 900px) {
.bistro-event-card { position: relative; grid-template-columns: 1fr; gap: var(--space-4); padding-top: var(--space-9); }
.bistro-event-viewmore { top: var(--space-5); }
.bistro-event-photo { aspect-ratio: 3 / 4; max-width: 220px; }
}
/* ---- Bistro gallery — 5-photo hover-accordion strip ----
[hb_bistro_gallery], right below the events list. Replaces the
scrolling-name marquee that used to occupy this slot — after three
rounds of text-effect tweaks the client decided the text idea itself
wasn't the right call and asked for a plain photo gallery instead,
modeled on https://homesalon-tnc.webflow.io/'s "Hair Styling / Nails
/ Makeup / Facials" strip: 5 photos in a row, all equal width by
default, and hovering one expands it while the rest shrink evenly.
That reference drives it with Webflow's own JS (measured live:
hovered panel 25%→45%, others settle ~18.3% each); the same result is
done here in pure CSS via `flex-grow` on `:hover` instead — no JS,
nothing to keep in sync with main.js. No captions/text on the photos
at all, per the client's explicit request — pure gallery, not a
services menu like the reference. Originally full-bleed to match the
reference's own edge-to-edge look; the client then asked for it to
run within the site's width instead (`.bistro-gallery-container`, a
`.container`) — same request already applied earlier to the marquee
this replaced, just re-stated for the new gallery. Since it's
contained now (not edge-to-edge), it gets the same rounded-corner
treatment as other full-width contained photo blocks on this page
(e.g. `.bistro-intro-photo-frame`) instead of sharp edges. Height was
trimmed down (client: "size hiện tại to quá") and a bottom margin was
added — without it the strip sat flush against the footer, unlike
every other page. Each non-hovered photo gets a strong dark overlay
(0.62 alpha — bumped up from an initial 0.32 per client feedback that
the expanded photo needed to pop more) via a
`::after` pseudo-element rather than a filter on the ![]()
itself, so
the overlay fades independently of whatever photo is underneath. */
.bistro-events { padding-bottom: var(--space-8); }
.bistro-gallery-strip {
display: flex;
height: clamp(240px, 26vw, 380px);
overflow: hidden;
border-radius: var(--radius-lg);
margin-bottom: var(--space-10);
}
.bistro-gallery-item {
position: relative;
flex: 1 1 0%;
overflow: hidden;
transition: flex-grow 0.5s cubic-bezier(0.2, 1, 0.3, 1);
}
.bistro-gallery-item::after {
content: '';
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.62);
transition: opacity 0.5s ease;
pointer-events: none;
}
.bistro-gallery-item:hover { flex-grow: 2.25; }
.bistro-gallery-item:hover::after { opacity: 0; }
.bistro-gallery-item img,
.bistro-gallery-item .img-placeholder {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
@media (max-width: 900px) {
.bistro-gallery-strip { flex-direction: column; height: auto; }
.bistro-gallery-item { flex: none; width: 100%; height: 220px; }
.bistro-gallery-item::after { content: none; }
.bistro-gallery-item:hover { flex-grow: 0; }
}
@media (prefers-reduced-motion: reduce) {
.bistro-gallery-item { transition: none; }
}
/* ---- Bistro perks — 3 cards, hover reveals a photo beside the card ----
[hb_bistro_perks]. Pure CSS, no JS, no `:has()` — each card is
immediately followed in the DOM by its OWN collapsed photo slot
(0 width/opacity), and `.bistro-perks-item:hover + .bistro-perks-photo`
expands just that one. Because the photo already sits right after its
card in markup, "appears beside the hovered card" falls out for free
from plain flex/DOM order — no `order` juggling, no swapping between
stacked frames. (A fancier version shared one photo element relocated
via `:has()` + flex `order` — dropped after confirming a real,
reproducible invalidation bug: `:has()` detected the hover and `order`
updated, but the opacity swap between stacked frames sometimes never
repainted. Adjacent-sibling `:hover` has been reliably supported and
correctly invalidated forever, so this version doesn't have that
risk.) Touch devices have no real hover, so the hover-reveal mechanic
itself can't run below 900px — but each photo stays visible (always
shown, full width, stacked under its own card) rather than being
hidden outright, after client feedback that mobile visitors should
see the same real photos desktop visitors do (see the mobile media
query below). */
.bistro-perks-row { display: flex; align-items: stretch; gap: var(--space-3); margin-top: var(--space-9); }
.bistro-perks-item {
flex: 1 1 0;
background: var(--color-bg);
border-radius: var(--radius-lg);
padding: var(--space-6);
display: flex;
flex-direction: column;
align-items: flex-start;
box-shadow: 0 8px 28px rgba(20,14,10,0.08);
}
.bistro-perks-icon {
width: 40px;
height: 40px;
flex-shrink: 0;
border-radius: var(--radius-sm);
background: var(--color-gold);
color: var(--color-bg);
display: flex;
align-items: center;
justify-content: center;
}
.bistro-perks-item h3 { margin-top: var(--space-5); }
.bistro-perks-item p { margin-top: var(--space-2); color: var(--text-muted); }
.bistro-perks-photo {
flex: 0 0 0px;
width: 0;
opacity: 0;
overflow: hidden;
border-radius: var(--radius-lg);
transition: flex-basis 0.4s ease, width 0.4s ease, opacity 0.3s ease;
}
.bistro-perks-photo img,
.bistro-perks-photo .img-placeholder { width: 280px; height: 100%; object-fit: cover; display: block; }
.bistro-perks-item:hover + .bistro-perks-photo { flex-basis: 280px; width: 280px; opacity: 1; }
/* Touch devices have no real hover, so the hover-reveal mechanic itself
can't apply below 900px — but hiding the photo entirely (the original
approach) meant mobile visitors never saw it at all, even after real
client photos were uploaded to these exact 3 slots. Fixed: on mobile
each photo is simply always visible, full width, stacked right under
its own card (already right where it sits in the DOM) — same content
as desktop, just without the hover trigger that doesn't exist here. */
@media (max-width: 900px) {
.bistro-perks-row { flex-direction: column; gap: var(--space-6); }
.bistro-perks-photo {
flex: none;
width: 100%;
height: 220px;
opacity: 1;
margin-top: calc(-1 * var(--space-4));
}
.bistro-perks-photo img,
.bistro-perks-photo .img-placeholder { width: 100%; }
}
/* ---------------------------------------------------------------------- */
/* PAPA BEAR PIZZA PHU QUOC */
/* Sections alternate the site's two standard tones (cream / .bg-sand) */
/* like every other business page — the client asked for this explicitly, */
/* after an earlier proposal introduced its own background colors. */
/* Buttons, eyebrows/headings, and the wood-fired seal badge all went */
/* back to the sitewide standard gold — an earlier pass had these red */
/* (sampled from the real storefront signage) and the client flagged it */
/* as wrong every time it showed up; no red survives anywhere on this */
/* page now, only the sitewide gold accent like every other business. */
/* ---------------------------------------------------------------------- */
/* ---- Pizza wall — spinning stamp + tilted "pinned photo" grid ----
[hb_pizza_wall]. Two new effects for this site: a small circular badge
that spins continuously and slowly (pure CSS, respects
prefers-reduced-motion), and 6 photos pinned at fixed, varied tilt
angles rather than the neatly-aligned grids used everywhere else on
the site — hovering one straightens it upright, scales it up slightly
and lifts it above its neighbors, like picking a snapshot off a
corkboard. The badge is a small decorative "wood-fired seal" — not a
link or a fact claim (no year/date on it), just a recurring visual
motif. It's absolutely positioned in the section's own corner rather
than stacked in normal flow, so it adds no extra height above the
heading — client feedback was that the hero-to-heading gap read too
large compared to every other business page, which used the same
standard `.section` padding as this one; the badge's own margin was
what pushed it past that, not the section padding itself. */
.pizza-wall .container { position: relative; }
.pizza-stamp {
width: 108px;
height: 108px;
border-radius: 50%;
background: #FFF6EA;
border: 3px solid var(--color-gold);
color: var(--color-gold-dark);
box-shadow: var(--shadow-gold);
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
right: 0;
}
.pizza-stamp-ring { position: absolute; inset: 5px; animation: hb-pizza-spin 16s linear infinite; }
@keyframes hb-pizza-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.pizza-stamp-ring { animation: none; }
}
@media (max-width: 640px) {
.pizza-stamp { position: static; margin: 0 auto var(--space-5); }
}
.pizza-wall-grid { display: flex; flex-wrap: wrap; gap: var(--space-7); margin-top: var(--space-9); justify-content: center; }
.pizza-wall-item {
width: 260px;
height: 260px;
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: 0 10px 20px rgba(41,20,15,0.14);
transition: transform 0.35s cubic-bezier(0.2,1,0.3,1), box-shadow 0.35s;
position: relative;
}
.pizza-wall-item img,
.pizza-wall-item .img-placeholder { width: 100%; height: 100%; object-fit: cover; display: block; }
.pizza-wall-item-1 { transform: rotate(-5deg); }
.pizza-wall-item-2 { transform: rotate(4deg); width: 210px; margin-top: 26px; }
.pizza-wall-item-3 { transform: rotate(-3deg); height: 210px; align-self: flex-end; }
.pizza-wall-item-4 { transform: rotate(6deg); margin-top: 14px; }
.pizza-wall-item-5 { transform: rotate(-4deg); width: 210px; }
.pizza-wall-item-6 { transform: rotate(3deg); margin-top: 22px; }
.pizza-wall-item:hover {
transform: rotate(0deg) scale(1.06) translateY(-8px) !important;
box-shadow: 0 24px 40px rgba(41,20,15,0.26);
z-index: 3;
}
@media (prefers-reduced-motion: reduce) {
.pizza-wall-item { transition: none; }
}
@media (max-width: 720px) {
.pizza-wall-item, .pizza-wall-item-2, .pizza-wall-item-5 { width: 46vw; height: 46vw; margin-top: 0; }
.pizza-wall-item-3 { height: 46vw; }
}
/* ---- Pizza menu — 4 signature-slice cards, bounce on hover ---- */
.pizza-menu-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); margin-top: var(--space-9); }
@media (max-width: 900px) { .pizza-menu-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .pizza-menu-grid { grid-template-columns: 1fr; } }
.pizza-menu-photo { aspect-ratio: 1 / 1; border-radius: var(--radius-md); overflow: hidden; transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s; }
.pizza-menu-photo img,
.pizza-menu-photo .img-placeholder { width: 100%; height: 100%; object-fit: cover; display: block; }
.pizza-menu-card:hover .pizza-menu-photo { transform: translateY(-8px); box-shadow: 0 18px 30px rgba(41,20,15,0.2); }
.pizza-menu-title { font-family: var(--font-heading); font-weight: 700; margin-top: var(--space-4); }
.pizza-menu-price { font-size: var(--text-sm); color: var(--text-muted); margin-top: 2px; }
.pizza-menu-cta { text-align: center; margin-top: var(--space-8); }
/* ---- Pizza promo — full-width scattered-photo CTA ----
[hb_pizza_story]. Rebuilt to match the client's reference directly
(Feastria's "TURN UP THE FLAVOR" CTA — feastria.webflow.io, client:
"làm y chang mẫu giúp mình"). Earlier rounds put the promo in a 1/3
(story text) · 2/3 (promo) split on a dark banner — client then asked
to drop the leftover story column entirely ("bỏ nội dung bên trái
luôn, full section chỉ tập trung cho promotion") and drop the dark
background ("bỏ màu nền nâu đậm"). Re-inspecting the live reference's
DOM (not just the earlier screenshots) confirmed its CTA section
actually has NO special background — plain page background, normal
dark heading text — with 5 photos absolutely positioned in a halo
AROUND a centered text block, not beside it. This section now matches
that: no split, no colored box, `.container` sits directly on the
section's own plain alternating background like every other section.
Photo halo offsets/rotation and the text's fade+rise are driven by one
--progress (0–1) custom property set on .pizza-promo-collage by
[data-collage-reveal] in main.js (0 = clustered/hidden at center, 1 =
fully scattered/shown) — reversible on scroll up/down, per the
client's request. var(--progress, 1) is the fallback on every rule
below, so with JS disabled the collage just shows fully open instead
of hiding the real offer content. */
.pizza-promo-collage {
/* No padding of its own — `.section`'s padding-block + `.container`'s
padding-inline are the ONLY spacing, same as every other section on
the site (client: "chỉnh luôn top và bottom chuẩn khoảng cách như
những section trước" — this used to add its own extra space-9 on
top of the section's padding, making the gap bigger than everywhere
else). */
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
min-height: 920px;
}
.pizza-promo-collage-empty { min-height: 0; }
.pizza-promo-collage-empty .pizza-promo-text { --progress: 1; }
.pizza-promo-collage-photos { position: absolute; inset: 0; pointer-events: none; }
.pizza-promo-collage-photo {
position: absolute;
top: 50%;
left: 50%;
border-radius: var(--radius-md);
overflow: hidden;
border: 4px solid var(--color-white);
box-shadow: 0 16px 32px rgba(41,20,15,0.28);
--tx: 0px;
--ty: 0px;
--rot: 0deg;
transform:
translate(-50%, -50%)
translate(calc(var(--tx) * var(--progress, 1)), calc(var(--ty) * var(--progress, 1)))
rotate(calc(var(--rot) * var(--progress, 1)))
scale(calc(0.4 + 0.6 * var(--progress, 1)));
opacity: calc(0.2 + 0.8 * var(--progress, 1));
}
.pizza-promo-collage-photo img,
.pizza-promo-collage-photo .img-placeholder { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Reworked to match the client's reference screenshot more closely: 2
photos flank ABOVE the text, 3 flank BELOW it — the same "photos
above, CTA text in the gap, more photos below" composition the
reference uses — instead of the earlier left/right-only flanking.
Every photo's y-range sits entirely above or entirely below
.pizza-promo-text's own y-range (with a real margin, not just a
hairline), and every photo's own box is checked pairwise against
every other photo's box — client: "các hình K có đè nhau" (the
photos must not overlap each other) — so this is zero overlap by
construction on both counts, not just by eye; re-verified via
getBoundingClientRect() after implementing. */
.pizza-promo-collage-photo.is-photo1 { width: 230px; height: 280px; --tx: -260px; --ty: -310px; --rot: -4deg; z-index: 5; }
.pizza-promo-collage-photo.is-photo2 { width: 190px; height: 220px; --tx: 280px; --ty: -280px; --rot: 8deg; z-index: 4; }
.pizza-promo-collage-photo.is-photo3 { width: 170px; height: 200px; --tx: -350px; --ty: 290px; --rot: -10deg; z-index: 3; }
.pizza-promo-collage-photo.is-photo4 { width: 160px; height: 190px; --tx: 0px; --ty: 320px; --rot: 5deg; z-index: 2; }
.pizza-promo-collage-photo.is-photo5 { width: 170px; height: 200px; --tx: 350px; --ty: 290px; --rot: 9deg; z-index: 1; }
.pizza-promo-ribbon {
position: absolute;
top: 16px;
right: -30px;
z-index: 2;
background: var(--color-gold);
color: var(--color-white);
font-family: var(--font-heading);
font-weight: 800;
font-size: 11px;
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
padding: var(--space-1) var(--space-7);
transform: rotate(8deg);
box-shadow: 0 6px 12px rgba(0,0,0,0.25);
}
.pizza-promo-text {
position: relative;
z-index: 2;
max-width: 620px;
opacity: var(--progress, 1);
transform: translateY(calc(20px * (1 - var(--progress, 1))));
}
.pizza-promo-kicker { margin: 0; }
.pizza-promo-heading { font-size: var(--text-2xl); margin-top: var(--space-3); }
.pizza-promo-body { color: var(--text-muted); margin-top: var(--space-3); }
.pizza-promo-btn { margin-top: var(--space-6); }
@media (max-width: 900px) {
/* The desktop halo needs a lot of horizontal room to clear the
centered text without covering it (see the note above the
is-photoN rules) — a narrow phone viewport doesn't have that room,
so mobile switches from "photos absolutely overlaid across the
whole section" to "a photo cluster block stacked in normal flow
above the text": .pizza-promo-collage-photos gets a real height and
stays in the document flow, .pizza-promo-text simply follows it, so
there is no absolute-positioning overlap to worry about at all,
regardless of any individual photo's offset. */
.pizza-promo-collage { flex-direction: column; min-height: 0; }
.pizza-promo-collage-photos { position: relative; inset: auto; width: 100%; height: 280px; margin-bottom: var(--space-6); }
.pizza-promo-collage-photo.is-photo1 { width: 170px; height: 210px; --tx: -30px; --ty: -10px; }
.pizza-promo-collage-photo.is-photo2 { width: 122px; height: 148px; --tx: 130px; --ty: -80px; }
.pizza-promo-collage-photo.is-photo3 { width: 114px; height: 138px; --tx: -135px; --ty: -85px; }
.pizza-promo-collage-photo.is-photo4 { width: 122px; height: 148px; --tx: 125px; --ty: 85px; }
.pizza-promo-collage-photo.is-photo5 { width: 114px; height: 138px; --tx: -130px; --ty: 90px; }
}
/* ---- Pizza testimonials — closing "Loved by Locals & Tourists" ----
[hb_pizza_testimonials]. Rebuilt to match the client's reference
directly (Feastria's "Bites Worth Talking About" slider —
feastria.webflow.io, client: "làm y chang mẫu"; card should be "to bề
ngang và đặt xiên" — wide/landscape and slanted, not the narrow
upright card the first pass used). Measured the live reference's real
card: ~1.9:1 landscape (710×377px at its own viewport), 40px padding,
12px radius, LEFT-aligned content (star row, then quote, then an
avatar+name row) — not centered. Both side "peek" cards use the exact
same -5deg tilt (not mirrored ±5deg — confirmed via DOM, left and
right peeks rotate the same direction on the reference). The active
(center) card sits on the reference's accent color with light text;
that accent is red on Feastria, which isn't this site's color, so the
active card uses the site's gold instead, with peek cards on plain
cream/white and gold accents (stars/name) instead of the reference's
red. Reuses the site's existing generic [data-carousel] JS (Drink
page's category carousel), with is-prev/is-next added for the two
peek cards — see main.js. */
.pizza-testimonials-carousel {
position: relative;
overflow: hidden;
margin-top: var(--space-9);
padding: var(--space-8) var(--space-3) var(--space-5);
}
.pizza-testimonial-slide { display: none; justify-content: center; }
.pizza-testimonial-slide.is-active { display: flex; position: relative; z-index: 3; }
.pizza-testimonial-slide.is-prev,
.pizza-testimonial-slide.is-next {
display: flex;
position: absolute;
top: var(--space-8);
left: 0;
right: 0;
z-index: 1;
pointer-events: none;
opacity: 0.7;
}
.pizza-testimonial-slide.is-prev { transform: translateX(-56%) scale(0.88) rotate(-5deg); }
.pizza-testimonial-slide.is-next { transform: translateX(56%) scale(0.88) rotate(-5deg); }
.pizza-testimonial-card {
width: 100%;
max-width: 660px;
aspect-ratio: 16 / 8.5;
background: var(--color-white);
border-radius: var(--radius-lg);
padding: var(--space-8);
box-shadow: var(--shadow-md);
text-align: left;
display: flex;
flex-direction: column;
justify-content: center;
}
.pizza-testimonial-slide.is-active .pizza-testimonial-card { background: var(--color-gold); }
.pizza-testimonial-stars { display: flex; gap: 3px; color: var(--color-gold); }
.pizza-testimonial-slide.is-active .pizza-testimonial-stars { color: var(--color-white); }
.pizza-testimonial-quote { font-family: var(--font-heading); font-size: var(--text-md); line-height: var(--leading-snug); color: var(--color-ink); margin-top: var(--space-4); }
.pizza-testimonial-slide.is-active .pizza-testimonial-quote { color: var(--color-white); }
.pizza-testimonial-client { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-5); }
.pizza-testimonial-avatar {
width: 40px;
height: 40px;
flex: 0 0 auto;
border-radius: 50%;
overflow: hidden;
background: var(--color-sand);
color: var(--color-brown);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-heading);
font-weight: 700;
font-size: var(--text-sm);
}
.pizza-testimonial-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pizza-testimonial-name { font-size: var(--text-sm); font-weight: 600; color: var(--color-gold-dark); }
.pizza-testimonial-slide.is-active .pizza-testimonial-name { color: var(--color-white); }
.pizza-testimonial-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--surface-page);
color: var(--text-primary);
box-shadow: var(--shadow-md);
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 4;
transition: transform var(--duration-fast) var(--ease-out);
}
.pizza-testimonial-arrow:hover { transform: translateY(-50%) scale(1.06); }
.pizza-testimonial-prev { left: var(--space-2); }
.pizza-testimonial-next { right: var(--space-2); }
.pizza-testimonial-dots { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-7); position: relative; z-index: 3; }
.pizza-testimonial-dots button { width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0; cursor: pointer; background: var(--color-ink-15); }
.pizza-testimonial-dots button.is-active { background: var(--color-gold); }
@media (max-width: 780px) {
.pizza-testimonial-slide.is-prev { transform: translateX(-32%) scale(0.82) rotate(-4deg); }
.pizza-testimonial-slide.is-next { transform: translateX(32%) scale(0.82) rotate(-4deg); }
.pizza-testimonial-card { aspect-ratio: auto; min-height: 260px; padding: var(--space-6); }
.pizza-testimonial-arrow { display: none; }
}
/* ---- Contact page — "Get in Touch with the Happy Bear Family" carousel
[hb_contact_family_carousel]. Same shared [data-carousel] JS/markup as
the Pizza testimonials above: one large centered photo, the immediate
two neighbors peeking smaller at each side, autoplay every 4s (pauses
on hover/focus). Client tried a hover-to-recenter version first but it
felt too fast/twitchy ("chạy nhanh như tàu điện") — arrows give
deliberate, click-driven control instead. A peek photo is still a real
link straight to that business, so hovering/clicking it early works
too, just without recentering it first. */
.family-carousel { margin-top: var(--space-8); }
.family-carousel-track {
position: relative;
overflow: hidden;
height: 300px;
}
.family-carousel-slide { display: none; flex-direction: column; align-items: center; gap: var(--space-3); }
.family-carousel-slide.is-active,
.family-carousel-slide.is-prev,
.family-carousel-slide.is-next {
display: flex;
position: absolute;
top: 50%;
left: 50%;
transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out);
}
.family-carousel-slide.is-active { transform: translate(-50%, -50%); z-index: 3; }
.family-carousel-slide.is-prev { transform: translate(calc(-50% - 230px), -50%) scale(0.7); z-index: 1; opacity: 0.65; }
.family-carousel-slide.is-next { transform: translate(calc(-50% + 230px), -50%) scale(0.7); z-index: 1; opacity: 0.65; }
.family-carousel-photo {
display: block;
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
background: var(--color-sand);
border: 4px solid var(--surface-page);
box-shadow: var(--shadow-md);
transition: border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.family-carousel-photo img,
.family-carousel-photo .img-placeholder { width: 100%; height: 100%; object-fit: cover; }
.family-carousel-slide.is-active .family-carousel-photo { border-color: var(--color-gold); box-shadow: var(--shadow-gold); }
.family-carousel-name {
font-family: var(--font-heading);
font-weight: 700;
font-size: var(--text-sm);
color: var(--text-primary);
text-align: center;
max-width: 160px;
}
.family-carousel-slide.is-prev .family-carousel-name,
.family-carousel-slide.is-next .family-carousel-name { opacity: 0.75; }
.family-carousel-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--surface-page);
color: var(--text-primary);
box-shadow: var(--shadow-md);
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 4;
transition: transform var(--duration-fast) var(--ease-out);
}
.family-carousel-arrow:hover { transform: translateY(-50%) scale(1.06); }
.family-carousel-prev { left: var(--space-2); }
.family-carousel-next { right: var(--space-2); }
.family-carousel-dots { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.family-carousel-dots button { width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0; cursor: pointer; background: var(--color-ink-15); }
.family-carousel-dots button.is-active { background: var(--color-gold); }
@media (max-width: 640px) {
.family-carousel-track { height: 220px; }
.family-carousel-photo { width: 140px; height: 140px; border-width: 3px; }
.family-carousel-slide.is-prev { transform: translate(calc(-50% - 130px), -50%) scale(0.65); }
.family-carousel-slide.is-next { transform: translate(calc(-50% + 130px), -50%) scale(0.65); }
.family-carousel-name { display: none; }
.family-carousel-arrow { display: none; }
}
/* ---- Contact page — form + Phu Quoc Centre map, side by side
[hb_contact_form_map]. Equal-width columns, stretched to match height
— client flagged the two sides looking lopsided when the map was just
a short fixed-ratio box next to a much taller form. The map column is
a flex column with the map itself set to flex:1, so it grows to fill
whatever height the form column ends up needing, and the contact
details sit underneath it rather than above the form. */
.contact-form-map-grid { display: grid; gap: var(--space-8); align-items: stretch; }
@media (min-width: 900px) { .contact-form-map-grid { grid-template-columns: 1fr 1fr; } }
.contact-form-col,
.contact-map-col { display: flex; flex-direction: column; }
.contact-map-col .map-frame { aspect-ratio: auto; flex: 1; min-height: 420px; }
.contact-inline-details { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-6); }
.contact-inline-details li { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--text-primary); }
.contact-inline-details .info-icon {
display: flex; align-items: center; justify-content: center;
width: 36px; height: 36px; flex-shrink: 0;
border-radius: 50%;
background: var(--color-sand);
color: var(--color-gold-dark);
}
/* ---- Pizza find us — closing "Come Say Hi" section (light bg) ----
[hb_pizza_find_us]. Client asked for one more closing section with a
light background — plain `.section` (cream), same split photo+content
layout pattern as .pizza-story-inner but with location/hours/
directions content instead of the mascot story. */
.pizza-find-us-inner { display: flex; align-items: center; gap: var(--space-10); }
.pizza-find-us-photo { width: 380px; flex: 0 0 auto; aspect-ratio: 4/3; border-radius: var(--radius-lg); overflow: hidden; }
.pizza-find-us-photo img,
.pizza-find-us-photo .img-placeholder { width: 100%; height: 100%; object-fit: cover; display: block; }
.pizza-find-us-content h2 { font-size: var(--text-2xl); margin-top: var(--space-3); }
.pizza-find-us-row { display: flex; align-items: center; gap: var(--space-2); color: var(--text-muted); margin-top: var(--space-3); }
.pizza-find-us-content .btn-primary { margin-top: var(--space-6); }
@media (max-width: 780px) {
.pizza-find-us-inner { flex-direction: column; text-align: center; }
.pizza-find-us-photo { width: 100%; max-width: 380px; }
.pizza-find-us-row { justify-content: center; }
}
/* ---------------------------------------------------------------------- */
/* AROMA CAFÉ BISTRO BAR — "specialty coffee by day, cocktails by night" */
/* Built from the client-approved mockup. Section backgrounds are the */
/* site's normal cream/plain + .bg-sand alternation throughout — an */
/* earlier draft morphed the whole background color, client asked for */
/* that dropped. The day/night idea instead lives in: different accent */
/* colors + hover glow per Day/Night section, and the one real animated */
/* effect on .cafe-sunmoon inside [hb_cafe_timeline] (see below) — */
/* everything else here is plain content on the section's own normal bg. */
/* ---------------------------------------------------------------------- */
.cafe-eyebrow-day { color: var(--color-green); }
.cafe-eyebrow-day::before { background: var(--color-green); }
.cafe-eyebrow-night { color: var(--color-gold-dark); }
.cafe-eyebrow-night::before { background: var(--color-gold-dark); }
.cafe-day h2,
.cafe-night h2 { font-size: var(--text-2xl); margin-top: var(--space-3); }
/* ---- Day/Night circular product picker — modeled directly on
Feastria's "Battle of the Burgers" (feastria.webflow.io): a row of
large circular photos (diameter = column width, not a fixed px size)
with a bold label underneath, and a colored circle that slides up
from behind the photo on hover — see hb_render_cafe_circles() in
page-shortcodes.php for the exact reference measurements this is
built from. Reference's reveal color is red; this uses green (Day)
/ gold (Night) instead, matching the eyebrow accent already used on
each section. */
.cafe-circle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-7); margin-top: var(--space-9); }
.cafe-circle-item { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: inherit; }
.cafe-circle-photo-wrap {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 50%;
overflow: hidden;
background: var(--color-white);
box-shadow: var(--shadow-sm);
}
.cafe-circle-photo,
.cafe-circle-placeholder { position: absolute; inset: 12%; border-radius: 50%; }
.cafe-circle-photo { width: 76%; height: 76%; object-fit: cover; display: block; z-index: 2; transition: transform 0.35s cubic-bezier(0.2,1,0.3,1); }
.cafe-circle-placeholder { width: 76%; height: 76%; display: flex; align-items: center; justify-content: center; z-index: 2; }
.cafe-circle-glow { position: absolute; inset: 0; border-radius: 50%; transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.2,1,0.3,1); z-index: 1; }
.cafe-circle-glow-day { background: var(--color-green); }
.cafe-circle-glow-night { background: var(--color-gold); }
.cafe-circle-item:hover .cafe-circle-glow { transform: translateY(0); }
.cafe-circle-item:hover .cafe-circle-photo { transform: scale(1.06); }
.cafe-circle-label { font-family: var(--font-heading); font-weight: 700; font-size: var(--text-md); margin-top: var(--space-4); text-align: center; }
@media (max-width: 640px) {
.cafe-circle-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.cafe-circle-label { font-size: var(--text-sm); }
}
/* ---- "What Makes Aroma Different?" — arrow-callout + center photo,
replacing the earlier plain "Our Story" section (see
hb_shortcode_cafe_different() docblock for the exact reference this
is modeled on). 1:2:1 width split (callouts : photo : callouts), 2
callouts stacked per side pointing an arrow at the center photo. ---- */
.cafe-different-wrap { display: flex; align-items: stretch; gap: var(--space-6); margin-top: var(--space-9); }
.cafe-different-col { flex: 1 1 25%; display: flex; flex-direction: column; justify-content: space-evenly; }
.cafe-different-callout { display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--color-gold-dark); }
.cafe-different-col.is-right .cafe-different-callout { color: var(--color-ink); }
.cafe-different-arrow-icon { width: 56px; height: 34px; opacity: 0.6; }
.cafe-different-col.is-left .cafe-different-arrow-icon { transform: scaleX(1); }
.cafe-different-col.is-right .cafe-different-arrow-icon { transform: scaleX(-1); }
.cafe-different-text { font-family: var(--font-heading); font-weight: 800; font-size: var(--text-xl); line-height: 1.15; margin-top: var(--space-2); }
.cafe-different-photo { flex: 1 1 50%; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; }
.cafe-different-photo img,
.cafe-different-photo .img-placeholder { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) {
.cafe-different-wrap { flex-direction: column; }
.cafe-different-col { flex-direction: row; gap: var(--space-6); }
.cafe-different-callout { flex: 1; }
.cafe-different-col.is-left .cafe-different-arrow-icon,
.cafe-different-col.is-right .cafe-different-arrow-icon { display: none; }
.cafe-different-photo { aspect-ratio: 4 / 3; }
}
/* ---- Visit — big-photo banner closing section ---- */
.cafe-visit-inner { display: flex; align-items: center; gap: var(--space-10); }
.cafe-visit-photo { flex: 1 1 58%; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; }
.cafe-visit-photo img,
.cafe-visit-photo .img-placeholder { width: 100%; height: 100%; object-fit: cover; display: block; }
.cafe-visit-content { flex: 1 1 42%; }
.cafe-visit-content h2 { font-size: var(--text-2xl); margin-top: var(--space-3); }
.cafe-visit-body { color: var(--text-muted); margin-top: var(--space-3); }
.cafe-visit-row { display: flex; align-items: center; gap: var(--space-2); color: var(--text-muted); margin-top: var(--space-3); }
.cafe-visit-content .btn-primary { margin-top: var(--space-6); }
@media (max-width: 780px) {
.cafe-visit-inner { flex-direction: column; text-align: center; }
.cafe-visit-photo { width: 100%; aspect-ratio: 4/3; }
.cafe-visit-row { justify-content: center; }
}
/* ---- Timeline — "A Day at Aroma" 4-stop line, sunrise to last call ---- */
.cafe-timeline { position: relative; margin-top: var(--space-9); display: flex; justify-content: space-between; gap: var(--space-4); }
.cafe-timeline::before {
content: '';
position: absolute;
top: 12px;
left: 22px;
right: 22px;
height: 2px;
background: linear-gradient(90deg, var(--color-green) 0%, var(--color-gold) 45%, var(--color-gold-dark) 70%, var(--color-brown-dark) 100%);
}
.cafe-timeline-stop { position: relative; flex: 1; text-align: center; }
.cafe-timeline-dot { width: 24px; height: 24px; border-radius: 50%; background: var(--surface-page); border: 3px solid var(--dot-color, var(--color-gold)); margin: 0 auto; position: relative; z-index: 2; }
.cafe-timeline-stop:nth-child(2) .cafe-timeline-dot { --dot-color: var(--color-green); }
.cafe-timeline-stop:nth-child(3) .cafe-timeline-dot { --dot-color: var(--color-gold); }
.cafe-timeline-stop:nth-child(4) .cafe-timeline-dot { --dot-color: var(--color-gold-dark); }
.cafe-timeline-stop:nth-child(5) .cafe-timeline-dot { --dot-color: var(--color-brown-dark); }
.cafe-timeline-time { font-family: var(--font-heading); font-weight: 700; font-size: var(--text-sm); letter-spacing: var(--tracking-wide); margin-top: var(--space-4); }
.cafe-timeline-label { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-1); max-width: 150px; margin-inline: auto; }
/* The one genuinely animated day/night effect: a sun that travels the
timeline's own line and crossfades into a moon as the section scrolls
into view — driven by --tl-progress, the SAME custom property the
site's existing [data-timeline-draw] mechanism already sets (reused
verbatim here, see main.js and hb_shortcode_cafe_timeline()'s
docblock) — 0 = sun at "7:00 AM", 1 = moon at "10:00 PM". The circle's
own backdrop crossfades gold→ink via two stacked ::before/::after
layers so no color is ever animated directly (broadly compatible,
no @property registration needed). The section's own background never
changes — only this one small badge does. */
.cafe-sunmoon-track { position: absolute; top: 13px; left: 22px; right: 22px; height: 0; pointer-events: none; }
.cafe-sunmoon {
position: absolute;
top: 0;
left: calc(var(--tl-progress, 1) * 100%);
transform: translate(-50%, -50%);
width: 34px;
height: 34px;
border-radius: 50%;
z-index: 3;
box-shadow: 0 4px 12px rgba(41,35,30,0.3);
}
.cafe-sunmoon::before,
.cafe-sunmoon::after { content: ''; position: absolute; inset: 0; border-radius: 50%; }
.cafe-sunmoon::before { background: var(--color-gold-light); opacity: calc(1 - var(--tl-progress, 1)); }
.cafe-sunmoon::after { background: var(--color-brown-dark); opacity: var(--tl-progress, 1); }
.cafe-sun-icon,
.cafe-moon-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; }
.cafe-sun-icon { color: var(--color-gold-dark); opacity: calc(1 - var(--tl-progress, 1)); }
.cafe-moon-icon { color: var(--color-bg); opacity: var(--tl-progress, 1); }
@media (max-width: 720px) {
.cafe-timeline { flex-direction: column; align-items: flex-start; gap: var(--space-7); padding-left: var(--space-3); }
.cafe-timeline::before { top: 0; bottom: 0; left: 11px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--color-green) 0%, var(--color-gold) 45%, var(--color-gold-dark) 70%, var(--color-brown-dark) 100%); }
.cafe-timeline-stop { display: flex; align-items: flex-start; gap: var(--space-4); text-align: left; }
.cafe-timeline-dot { margin: 2px 0 0; }
.cafe-timeline-label { margin-inline: 0; }
.cafe-sunmoon-track { top: 0; bottom: 0; left: 11px; right: auto; width: 0; height: auto; }
.cafe-sunmoon { top: calc(var(--tl-progress, 1) * 100%); left: 0; }
}
/* ---------------------------------------------------------------------- */
/* BEAR CLUB & LOUNGE — "About Us" section */
/* Asymmetric photo collage (left: headline + 2-photo mosaic + stat */
/* badge; right: tall photo + body copy). See [hb_business_about]. */
/* No background class here on purpose: every page (Home, Eat, Tours...) */
/* alternates only the site's 2 standard section backgrounds — plain */
/* (cream, the default) and .bg-sand — never a dark/black section, so */
/* this (the first section after the hero) stays plain/cream and inherits */
/* the normal ink text colors, same as everywhere else. .eyebrow, h2 and */
/* p all use their ordinary default colors — no overrides needed. */
/* ---------------------------------------------------------------------- */
.club-about-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-8);
}
@media (min-width: 900px) {
.club-about-grid { grid-template-columns: 1.6fr 1fr; align-items: start; }
}
.club-about-left h2 {
margin-top: var(--space-4);
font-size: clamp(2rem, 1.2rem + 3.2vw, 3.5rem);
line-height: 1.05;
letter-spacing: var(--tracking-tight);
max-width: 16ch;
}
.club-about-mosaic {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-5);
margin-top: var(--space-8);
}
@media (min-width: 900px) {
.club-about-mosaic-col-offset { margin-top: var(--space-9); }
}
.club-about-photo {
border-radius: var(--radius-md);
overflow: hidden;
}
.club-about-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.club-about-photo-1 { aspect-ratio: 1 / 1.05; }
.club-about-photo-2 { aspect-ratio: 3 / 4; }
.club-about-photo-3 { aspect-ratio: 3 / 4; margin-bottom: var(--space-6); }
.club-about-badge {
margin-top: var(--space-4);
background: var(--color-brown);
color: var(--color-bg);
font-family: var(--font-heading);
font-weight: 800;
font-size: var(--text-xl);
text-align: center;
border-radius: var(--radius-md);
padding: var(--space-3) 0;
}
.club-about-right { display: flex; flex-direction: column; min-width: 0; }
.club-about-right p {
font-size: var(--text-md);
line-height: var(--leading-relaxed);
max-width: 42ch;
}
@media (max-width: 640px) {
.club-about-left h2 { max-width: 100%; }
.club-about-badge { font-size: var(--text-lg); padding: var(--space-2) 0; }
}
/* ---------------------------------------------------------------------- */
/* BEAR CLUB & LOUNGE — Events list (hover-to-reveal-photo rows) */
/* Plain title/performer/time rows; hovering a row fades in that event's */
/* own photo as its background with a dark scrim, flipping the row's text */
/* to light. See [hb_club_events]. */
/* ---------------------------------------------------------------------- */
.club-events-list { list-style: none; margin: 0; padding: 0; }
.club-events-row {
position: relative;
overflow: hidden;
border-top: 1px solid var(--color-border);
}
.club-events-row:last-child { border-bottom: 1px solid var(--color-border); }
.club-events-row-media { position: absolute; inset: 0; z-index: 0; }
.club-events-row-media img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transform: scale(1.06);
transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}
.club-events-row-media::after {
content: '';
position: absolute;
inset: 0;
background: rgba(20, 14, 10, 0.6);
opacity: 0;
transition: opacity var(--duration-slow) var(--ease-out);
}
.club-events-row:hover .club-events-row-media img,
.club-events-row:hover .club-events-row-media::after { opacity: 1; }
.club-events-row:hover .club-events-row-media img { transform: scale(1); }
.club-events-row-link {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-3) var(--space-6);
padding: var(--space-8) var(--space-2);
text-decoration: none;
color: var(--text-primary);
transition: color var(--duration-base) var(--ease-out);
}
.club-events-row:hover .club-events-row-link { color: var(--color-bg); }
.club-events-title {
font-family: var(--font-heading);
font-weight: 800;
font-size: clamp(1.375rem, 1rem + 1.6vw, 2.25rem);
text-transform: uppercase;
letter-spacing: var(--tracking-tight);
}
.club-events-meta {
display: flex;
align-items: center;
gap: var(--space-6);
font-size: var(--text-sm);
font-weight: 700;
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
white-space: nowrap;
}
.club-events-time { font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
.club-events-row-link { padding: var(--space-6) var(--space-1); }
.club-events-meta { gap: var(--space-4); font-size: var(--text-xs); }
}
/* ---------------------------------------------------------------------- */
/* BEAR CLUB & LOUNGE — Services bento grid */
/* 1 large feature tile + 2 small tiles + 1 wide tile (not a plain 4-up */
/* row). Each tile is a full-bleed photo; title sits low in the frame, */
/* dark bottom gradient always present for baseline legibility. On hover */
/* the gradient strengthens and a subtext line grows in below the title, */
/* which visually pushes the title upward — pure flow/max-height, no */
/* transform math needed. See [hb_club_services]. */
/* ---------------------------------------------------------------------- */
.club-services-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-5);
}
@media (min-width: 900px) {
.club-services-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-auto-rows: minmax(200px, 1fr);
}
.club-services-card-feature { grid-column: 1 / 3; grid-row: 1 / 3; }
.club-services-card-wide { grid-column: 3 / 5; grid-row: 2; }
}
.club-services-card {
position: relative;
min-height: 280px;
border-radius: var(--radius-lg);
overflow: hidden;
isolation: isolate;
}
.club-services-media { position: absolute; inset: 0; }
.club-services-media img,
.club-services-media .img-placeholder { width: 100%; height: 100%; object-fit: cover; display: block; }
.club-services-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(20,14,10,0) 40%, rgba(20,14,10,0.32) 72%, rgba(20,14,10,0.78) 100%);
transition: background var(--duration-slow) var(--ease-out);
}
.club-services-card:hover .club-services-overlay {
background: linear-gradient(180deg, rgba(20,14,10,0.1) 0%, rgba(20,14,10,0.55) 45%, rgba(20,14,10,0.9) 100%);
}
.club-services-content {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: var(--space-6);
}
.club-services-content h3 {
color: var(--color-bg);
font-size: var(--text-lg);
margin: 0;
}
.club-services-content p {
color: rgba(245, 239, 228, 0.85);
font-size: var(--text-sm);
line-height: var(--leading-normal);
max-width: 34ch;
margin-top: 0;
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height var(--duration-slow) var(--ease-out), opacity var(--duration-slow) var(--ease-out), margin-top var(--duration-slow) var(--ease-out);
}
.club-services-card:hover .club-services-content p {
max-height: 160px;
opacity: 1;
margin-top: var(--space-2);
}
.club-services-card-feature .club-services-content h3 { font-size: var(--text-xl); }
/* ---------------------------------------------------------------------- */
/* BEAR CLUB & LOUNGE — 2 stacked scrolling banners */
/* Same technique as the homepage .brand-ticker (shared hb-marquee */
/* keyframes), inset inside the normal .container (not full-bleed like */
/* the homepage one) — 2 strips with zero gap between them, rounded as */
/* one unit — banner 1 scrolls right-to-left, banner 2 runs the identical */
/* animation in reverse (left-to-right) so both move at the exact same */
/* speed/easing. See [hb_club_banners]. */
/* ---------------------------------------------------------------------- */
/* Pulled up tight under the Services photo cards above (client wants it
read as one cluster with them, not a separate section) — the Services
section's own bottom padding is trimmed to match, so the combined gap
between the last photo card and the first banner stays small; the
banners' own bottom keeps the normal gap before Book a Table. */
.club-services-section { padding-bottom: var(--space-2); }
.club-banners-section { padding-top: var(--space-2); }
.club-banners { display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; }
.club-banner-strip { overflow: hidden; }
.club-banner-strip-1 { background: var(--color-brown); }
.club-banner-strip-2 { background: var(--color-brown-light); }
.club-banner-track {
display: flex;
align-items: center;
width: max-content;
animation: hb-marquee 42s linear infinite;
}
.club-banner-strip-2 .club-banner-track { animation-direction: reverse; }
.club-banner-strip:hover .club-banner-track { animation-play-state: paused; }
.club-banner-item {
flex: 0 0 auto;
padding: var(--space-7) 0;
color: var(--color-bg);
font-family: var(--font-heading);
font-weight: 800;
font-size: clamp(1.75rem, 1rem + 2.6vw, 3.25rem);
text-transform: uppercase;
letter-spacing: var(--tracking-tight);
white-space: nowrap;
}
.club-banner-photo {
position: relative;
flex: 0 0 auto;
width: clamp(56px, 4vw + 32px, 96px);
height: clamp(56px, 4vw + 32px, 96px);
margin: 0 var(--space-6);
border-radius: var(--radius-md);
overflow: hidden;
}
.club-banner-photo img,
.club-banner-photo .img-placeholder { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Dark overlay so the photo reads as muted/dimmed rather than competing
with the banner text next to it. */
.club-banner-photo::after {
content: '';
position: absolute;
inset: 0;
background: rgba(20, 14, 10, 0.45);
}
@media (max-width: 640px) {
.club-banner-item { font-size: clamp(1.375rem, 1rem + 4vw, 2rem); padding: var(--space-5) 0; }
.club-banner-photo { width: 48px; height: 48px; margin: 0 var(--space-4); }
}
@media (prefers-reduced-motion: reduce) {
.club-banner-track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; }
}
/* ---------------------------------------------------------------------- */
/* BEAR CLUB & LOUNGE — "Book a Table" (sticky form beside a scrolling */
/* editorial column) */
/* The form column pins via position:sticky; the right column is just */
/* normal document flow — photo, its own caption directly under it (no */
/* card box, no rounded corners, no gap between a photo and its caption), */
/* then a gap before the next photo — so scrolling it feels like reading */
/* one continuous page, not swiping through separate cards. Once this */
/* column runs out the form un-pins on its own via the same sticky-sidebar */
/* mechanic used by [hb_business_about] and [hb_shortcode_events_month]'s */
/* other sticky panels. No JS. See [hb_club_book_table]. */
/* ---------------------------------------------------------------------- */
.book-table-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-8);
}
@media (min-width: 900px) {
.book-table-grid { grid-template-columns: 1fr 1fr; align-items: start; }
.book-table-form-col {
position: sticky;
top: calc(var(--header-height-scrolled) + var(--space-6));
}
}
.book-table-photos-col { display: flex; flex-direction: column; }
.book-table-photo-block { margin-bottom: var(--space-11); }
.book-table-photo-block:last-child { margin-bottom: 0; }
.book-table-photo { aspect-ratio: 4 / 5; overflow: hidden; }
.book-table-photo img,
.book-table-photo .img-placeholder { width: 100%; height: 100%; object-fit: cover; display: block; }
.book-table-caption { text-align: center; padding: var(--space-6) var(--space-4) 0; }
.book-table-caption .eyebrow { justify-content: center; }
.book-table-caption p {
margin-top: var(--space-3);
max-width: 42ch;
margin-inline: auto;
color: var(--text-muted);
}
.book-table-caption .btn-ghost { margin-top: var(--space-3); }
/* .reservation-form/.reservation-row (see events-reservation-banner above)
was built for a dark photo-overlay background — its labels/input text
default to var(--color-bg) (cream), which is invisible on this section's
plain light background. Re-theme it for light here instead of forking
a second copy of the form markup. */
.book-table-section .reservation-row {
background: rgba(41, 35, 30, 0.04);
border-color: var(--color-border);
}
.book-table-section .reservation-row label,
.book-table-section .reservation-input input,
.book-table-section .reservation-input select {
color: var(--text-primary);
}
.book-table-section .reservation-input input::-webkit-calendar-picker-indicator { filter: none; }
/* ---------------------------------------------------------------------- */
/* BEAR CLUB & LOUNGE — "Got Questions?" FAQ + closing photo banner */
/* Left column (photo + intro text + Contact Us) sits beside the same */
/* accordion component as [hb_stay_faq]/[hb_centre_faq] (.stay-faq-* */
/* classes reused as-is; .club-faq-* only adds the photo/CTA left column */
/* and widens the heading). Closes with a full-bleed photo + dark overlay */
/* banner — the only dark-looking element in this plain light section, */
/* same "photo card carries its own overlay" pattern as every other photo */
/* on this page. See [hb_club_faq]. */
/* ---------------------------------------------------------------------- */
.club-faq-section .section-head { max-width: none; }
.club-faq-section .section-head h2 { max-width: 22ch; }
.club-faq-intro-photo {
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 4 / 5;
max-width: 320px;
margin-bottom: var(--space-5);
}
.club-faq-intro-photo img,
.club-faq-intro-photo .img-placeholder { width: 100%; height: 100%; object-fit: cover; display: block; }
.club-faq-intro p { max-width: 34ch; }
.club-faq-intro .btn { margin-top: var(--space-5); }
.club-faq-closing {
position: relative;
margin-top: var(--space-10);
min-height: 460px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.club-faq-closing-media { position: absolute; inset: 0; }
.club-faq-closing-media img,
.club-faq-closing-media .img-placeholder { width: 100%; height: 100%; object-fit: cover; display: block; }
.club-faq-closing-overlay { position: absolute; inset: 0; background: rgba(20, 14, 10, 0.55); }
.club-faq-closing-content {
position: relative;
z-index: 1;
text-align: center;
padding: var(--space-6);
}
.club-faq-closing-content .eyebrow { justify-content: center; color: var(--color-bg); }
.club-faq-closing-content .eyebrow::before { background: var(--color-bg); }
.club-faq-closing-content h2 {
margin-top: var(--space-4);
color: var(--color-bg);
font-size: clamp(2rem, 1.2rem + 3.6vw, 4rem);
line-height: 1.05;
text-transform: uppercase;
letter-spacing: var(--tracking-tight);
max-width: 16ch;
margin-inline: auto;
}
@media (max-width: 640px) {
.club-faq-closing { min-height: 360px; }
}