/* ═══════════════════════════════════════════════════════════════════════════
css/premium-polish.css — v2.5.0
Capital da Boa Mesa — Premium Editorial UX polish layer
───────────────────────────────────────────────────────────────────────────
ADDITIVE polish layer on top of v2.4.0 (Unified Theme). All rules in this
file are gated under `html[data-polish="v25"]` so the entire layer can be
disabled by:
a) removing `data-polish="v25"` from (js/premium-polish.js sets it),
b) removing the — proper poster/playback styling
9. Reduced-motion respect — every transition opts out cleanly
═══════════════════════════════════════════════════════════════════════════ */
/* ═════════════════════════════════════════════════════════════════════════
0. Activation gate
─────────────────────────────────────────────────────────────────────────
Every rule in this file is nested under this attribute selector. If the
attribute is missing (loader didn't run, was deleted, or rollback Level
A removed it) the cascade is identical to v2.4.1.
═════════════════════════════════════════════════════════════════════════ */
html[data-polish="v25"] {
/* Local polish-layer tokens. Derived from existing --app-* / legacy tokens
so admin theme changes still flow through. Defined on the html scope so
they're inherited everywhere. */
--pp-radius-chip: 999px;
--pp-radius-card: var(--card-radius, 14px);
--pp-radius-tile: 18px;
--pp-gap-tight: 6px;
--pp-gap-snug: 10px;
--pp-gap-cozy: 14px;
--pp-gap-roomy: 20px;
--pp-shadow-rest: 0 1px 2px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.06);
--pp-shadow-hover: 0 4px 10px rgba(0,0,0,0.08), 0 12px 28px rgba(0,0,0,0.10);
--pp-shadow-press: 0 1px 2px rgba(0,0,0,0.06);
--pp-ring: inset 0 0 0 1px var(--app-border, var(--border, rgba(255,255,255,0.10)));
--pp-ring-strong: inset 0 0 0 1px var(--app-border, var(--border, rgba(255,255,255,0.18)));
--pp-ease: cubic-bezier(0.4, 0, 0.2, 1);
--pp-duration-fast: 160ms;
--pp-duration-base: 220ms;
--pp-duration-slow: 320ms;
}
/* Dark-theme: deepen shadows so they remain perceptible on near-black. */
html[data-polish="v25"][data-theme="dark"],
html[data-polish="v25"]:not([data-theme]) {
--pp-shadow-rest: 0 1px 2px rgba(0,0,0,0.40), 0 2px 8px rgba(0,0,0,0.30);
--pp-shadow-hover: 0 4px 10px rgba(0,0,0,0.45), 0 12px 28px rgba(0,0,0,0.35);
--pp-shadow-press: 0 1px 2px rgba(0,0,0,0.45);
}
/* ═════════════════════════════════════════════════════════════════════════
1. Restaurant differentials (Brief §7D — "Differentials / Features")
─────────────────────────────────────────────────────────────────────────
The base markup is a of rendered by js/restaurant.js:354-358.
BUG IN v2.4.1: no CSS exists for these classes, so they render as a
browser-default vertical bullet list (the "shows only one item" complaint
in the brief is the result of long labels wrapping and the bullet column
eating the row).
FIX: turn into a responsive 2-column chip grid with premium iconography.
js/premium-polish.js separately upgrades the icon on each row so it matches
the differential's meaning (wine glass, music notes, paw print, etc.).
═════════════════════════════════════════════════════════════════════════ */
html[data-polish="v25"] .rd-diferenciais {
list-style: none;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--pp-gap-snug);
margin: 4px 0 18px;
padding: 0;
}
@media (min-width: 720px) {
html[data-polish="v25"] .rd-diferenciais {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--pp-gap-cozy);
}
}
html[data-polish="v25"] .rd-diferencial-item {
list-style: none;
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 44px;
padding: 10px 14px;
background: var(--app-surface, var(--surface));
color: var(--app-text, var(--text));
border-radius: var(--pp-radius-card);
box-shadow: var(--pp-ring), var(--pp-shadow-rest);
font-family: var(--font-body, 'Inter', sans-serif);
font-size: 0.86rem;
font-weight: 500;
line-height: 1.25;
letter-spacing: -0.005em;
transition: transform var(--pp-duration-base) var(--pp-ease),
box-shadow var(--pp-duration-base) var(--pp-ease);
}
html[data-polish="v25"] .rd-diferencial-item:hover {
transform: translateY(-1px);
box-shadow: var(--pp-ring-strong), var(--pp-shadow-hover);
}
html[data-polish="v25"] .rd-diferencial-item i,
html[data-polish="v25"] .rd-diferencial-item svg {
flex-shrink: 0;
font-size: 1.05rem;
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--app-accent, var(--accent));
/* The default ph-check-circle inherited from main markup is replaced by
js/premium-polish.js with a category-specific icon. The styling here
applies to whichever ends up in the DOM. */
}
/* ═════════════════════════════════════════════════════════════════════════
2. Home experience chip rail (Brief §4 — "Home Page Refinement")
─────────────────────────────────────────────────────────────────────────
js/premium-polish.js injects a single horizontal-scroll rail above the
banner with experience-based chips (Japonês, Hambúrguer, Café, Família,
Romântico, Barzinho, Vegano, Delivery, Música ao Vivo). Each chip wires
to Search.query(term) + Nav.go('search'). The chips are intentionally
editorial — icon + label, no images, no badges — so they read like a
Michelin section header rather than an ad rail.
═════════════════════════════════════════════════════════════════════════ */
html[data-polish="v25"] .bm-experience-rail {
position: relative;
margin: 12px 0 4px;
padding: 4px 0 8px;
background: transparent;
}
html[data-polish="v25"] .bm-experience-rail-eyebrow {
display: flex;
align-items: center;
gap: 8px;
padding: 0 16px;
margin-bottom: 8px;
font-family: var(--font-body, 'Inter', sans-serif);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--app-muted-text, var(--text-muted));
}
html[data-polish="v25"] .bm-experience-rail-eyebrow::before {
content: "";
display: inline-block;
width: 16px;
height: 1px;
background: var(--app-accent, var(--accent));
opacity: 0.6;
}
html[data-polish="v25"] .bm-experience-scroll {
display: flex;
gap: 8px;
padding: 4px 16px 6px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
scrollbar-width: none;
}
html[data-polish="v25"] .bm-experience-scroll::-webkit-scrollbar { display: none; }
html[data-polish="v25"] .bm-experience-chip {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 8px;
height: 38px;
padding: 0 16px;
background: var(--app-surface, var(--surface));
color: var(--app-text, var(--text));
border: 1px solid var(--app-border, var(--border, rgba(255,255,255,0.08)));
border-radius: var(--pp-radius-chip);
font-family: var(--font-body, 'Inter', sans-serif);
font-size: 0.83rem;
font-weight: 500;
letter-spacing: -0.005em;
white-space: nowrap;
cursor: pointer;
scroll-snap-align: start;
transition: transform var(--pp-duration-fast) var(--pp-ease),
background var(--pp-duration-fast) var(--pp-ease),
border-color var(--pp-duration-fast) var(--pp-ease),
color var(--pp-duration-fast) var(--pp-ease);
}
html[data-polish="v25"] .bm-experience-chip i {
font-size: 1.05rem;
color: var(--app-accent, var(--accent));
transition: color var(--pp-duration-fast) var(--pp-ease);
}
html[data-polish="v25"] .bm-experience-chip:hover {
background: var(--app-surface-alt, var(--surface-2));
border-color: var(--app-accent, var(--accent));
transform: translateY(-1px);
}
html[data-polish="v25"] .bm-experience-chip:active {
transform: translateY(0);
background: var(--app-primary, var(--primary));
border-color: var(--app-primary, var(--primary));
color: var(--app-button-text, #fff);
}
html[data-polish="v25"] .bm-experience-chip:active i {
color: var(--app-button-text, #fff);
}
/* Desktop: wider gutter, slightly taller chips for editorial feel */
@media (min-width: 1024px) {
html[data-polish="v25"] .bm-experience-scroll {
padding: 4px 24px 8px;
gap: 10px;
}
html[data-polish="v25"] .bm-experience-chip {
height: 42px;
padding: 0 20px;
font-size: 0.88rem;
}
}
/* ═════════════════════════════════════════════════════════════════════════
3. Invite banner — solid, no gradient (Brief §4)
─────────────────────────────────────────────────────────────────────────
css/main.css:668 still uses linear-gradient(135deg, var(--primary-dark) →
var(--primary)). The brief is explicit: solid branding colors only. The
newer .home-share-banner already complies (v1.9.5). Mirror the same rule
for the legacy .invite-banner so wherever it appears (admin previews,
legacy code paths) the gradient is gone.
═════════════════════════════════════════════════════════════════════════ */
html[data-polish="v25"] .invite-banner {
background: var(--app-primary, var(--primary));
border: 1px solid var(--app-border, var(--border));
box-shadow: var(--pp-shadow-rest);
}
html[data-polish="v25"] .invite-banner .invite-cta {
background: var(--app-accent, var(--accent));
color: var(--app-button-text, var(--primary-dark));
box-shadow: var(--pp-shadow-rest);
transition: transform var(--pp-duration-fast) var(--pp-ease),
box-shadow var(--pp-duration-fast) var(--pp-ease);
}
html[data-polish="v25"] .invite-banner .invite-cta:hover {
transform: translateY(-1px);
box-shadow: var(--pp-shadow-hover);
}
/* ═════════════════════════════════════════════════════════════════════════
4. Filter chips — tighter, more editorial (Brief §5)
─────────────────────────────────────────────────────────────────────────
The base .filter-chip already exists (css/main.css:858). This refines
spacing, transitions, and active state without changing markup.
═════════════════════════════════════════════════════════════════════════ */
html[data-polish="v25"] .filter-chip {
height: 36px;
padding: 0 14px;
font-size: 0.82rem;
font-weight: 500;
letter-spacing: -0.005em;
border: 1px solid var(--app-border, var(--border, rgba(255,255,255,0.08)));
background: var(--app-surface, transparent);
color: var(--app-text, var(--text));
transition: background var(--pp-duration-fast) var(--pp-ease),
border-color var(--pp-duration-fast) var(--pp-ease),
color var(--pp-duration-fast) var(--pp-ease),
transform var(--pp-duration-fast) var(--pp-ease);
}
html[data-polish="v25"] .filter-chip:hover {
border-color: var(--app-accent, var(--accent));
}
html[data-polish="v25"] .filter-chip:active {
transform: scale(0.97);
}
html[data-polish="v25"] .filter-chip.active {
background: var(--app-primary, var(--primary));
border-color: var(--app-primary, var(--primary));
color: var(--app-button-text, #fff);
}
/* Day chips inherit the same vocabulary so they look like siblings, not
distant cousins. */
html[data-polish="v25"] .day-chip {
transition: background var(--pp-duration-fast) var(--pp-ease),
border-color var(--pp-duration-fast) var(--pp-ease),
color var(--pp-duration-fast) var(--pp-ease),
transform var(--pp-duration-fast) var(--pp-ease);
}
html[data-polish="v25"] .day-chip:active { transform: scale(0.97); }
/* ═════════════════════════════════════════════════════════════════════════
5. Card shadows / spacing — Michelin-style refinement (Brief §1, §4)
─────────────────────────────────────────────────────────────────────────
We layer over existing card classes WITHOUT changing their structure.
The base shadow vocabulary already supports light/dark via media-aware
--shadow-* tokens (main.css). Here we refine the resting/hover/press
shadow on the cards that most carry the editorial weight: restaurant
cards in horizontal rails, event cards, chef post cards, collection
cards. Press state is shared.
═════════════════════════════════════════════════════════════════════════ */
html[data-polish="v25"] .restaurant-card,
html[data-polish="v25"] .event-card-v2,
html[data-polish="v25"] .chef-post-card,
html[data-polish="v25"] .collection-card,
html[data-polish="v25"] .search-card {
box-shadow: var(--pp-shadow-rest);
transition: transform var(--pp-duration-base) var(--pp-ease),
box-shadow var(--pp-duration-base) var(--pp-ease);
}
html[data-polish="v25"] .restaurant-card:hover,
html[data-polish="v25"] .event-card-v2:hover,
html[data-polish="v25"] .chef-post-card:hover,
html[data-polish="v25"] .collection-card:hover,
html[data-polish="v25"] .search-card:hover {
transform: translateY(-2px);
box-shadow: var(--pp-shadow-hover);
}
html[data-polish="v25"] .restaurant-card:active,
html[data-polish="v25"] .event-card-v2:active,
html[data-polish="v25"] .chef-post-card:active,
html[data-polish="v25"] .collection-card:active,
html[data-polish="v25"] .search-card:active {
transform: scale(0.985) translateY(0);
box-shadow: var(--pp-shadow-press);
transition-duration: var(--pp-duration-fast);
}
/* ═════════════════════════════════════════════════════════════════════════
6. Hours panel — typographic polish (Brief §7B)
─────────────────────────────────────────────────────────────────────────
Hours.renderPanelHTML produces .hours-panel (collapsible). The css/
premium.css layer already handles structure; this is purely tightening
the state-label/today-value typography for editorial calm.
═════════════════════════════════════════════════════════════════════════ */
html[data-polish="v25"] .hours-panel-state-label,
html[data-polish="v25"] .rd-hours-state-label {
font-family: var(--font-body, 'Inter', sans-serif);
font-weight: 600;
letter-spacing: -0.005em;
}
html[data-polish="v25"] .hours-panel-today-val,
html[data-polish="v25"] .rd-hours-panel-today-val {
font-family: var(--font-body, 'Inter', sans-serif);
font-variant-numeric: tabular-nums;
font-weight: 500;
letter-spacing: 0.005em;
}
html[data-polish="v25"] .hours-panel-toggle {
transition: color var(--pp-duration-fast) var(--pp-ease),
opacity var(--pp-duration-fast) var(--pp-ease);
}
html[data-polish="v25"] .hours-panel-toggle:hover {
color: var(--app-accent, var(--accent));
}
/* ═════════════════════════════════════════════════════════════════════════
7. Action row icons — clearer hover/active (Brief §7F)
─────────────────────────────────────────────────────────────────────────
The action row (WhatsApp / Instagram / iFood / Hours / Evaluate / Share)
is already styled in main.css. This refines the interactive feedback
without changing icon sizes or layout.
═════════════════════════════════════════════════════════════════════════ */
html[data-polish="v25"] .rd-action-btn {
transition: transform var(--pp-duration-fast) var(--pp-ease),
box-shadow var(--pp-duration-fast) var(--pp-ease),
background var(--pp-duration-fast) var(--pp-ease);
}
html[data-polish="v25"] .rd-action-btn:hover {
transform: translateY(-1px);
box-shadow: var(--pp-shadow-rest);
}
html[data-polish="v25"] .rd-action-btn:active {
transform: translateY(0) scale(0.96);
box-shadow: var(--pp-shadow-press);
}
/* ═════════════════════════════════════════════════════════════════════════
8. Gallery support — Brief §7A
─────────────────────────────────────────────────────────────────────────
The premium-polish.js loader rewrites elements. These rules keep the
visually identical to the is untouched.
═════════════════════════════════════════════════════════════════════════ */
html[data-polish="v25"] .rd-slides video {
flex: 0 0 100%;
width: 100%;
height: 100%;
object-fit: cover;
scroll-snap-align: start;
background: var(--app-bg-alt, var(--bg-2));
display: block;
}
/* ═════════════════════════════════════════════════════════════════════════
9. Share banner — reinforce no-gradient rule (Brief §4)
─────────────────────────────────────────────────────────────────────────
.home-share-banner already uses solid var(--primary) (main.css:3141 — see
v1.9.5 comment). Reinforced here so it picks up the unified --app-primary
when the unified theme system is active, even if the legacy bridge has
re-mapped --primary elsewhere.
═════════════════════════════════════════════════════════════════════════ */
html[data-polish="v25"] .home-share-banner {
background: var(--app-primary, var(--primary));
box-shadow: var(--pp-shadow-rest);
}
html[data-polish="v25"] .share-btn {
transition: background var(--pp-duration-fast) var(--pp-ease),
transform var(--pp-duration-fast) var(--pp-ease);
}
html[data-polish="v25"] .share-btn:active {
transform: scale(0.97);
}
/* ═════════════════════════════════════════════════════════════════════════
10. Topbar polish — softer chrome (Brief §1, §10)
─────────────────────────────────────────────────────────────────────────
Tightens the topbar so it reads as editorial chrome, not utility bar.
═════════════════════════════════════════════════════════════════════════ */
html[data-polish="v25"] .topbar {
border-bottom: 1px solid var(--app-divider, var(--border-subtle));
}
html[data-polish="v25"] .topbar-nav-btn,
html[data-polish="v25"] .topbar-plus-btn {
transition: transform var(--pp-duration-fast) var(--pp-ease),
background var(--pp-duration-fast) var(--pp-ease);
}
html[data-polish="v25"] .topbar-nav-btn:active,
html[data-polish="v25"] .topbar-plus-btn:active {
transform: scale(0.92);
}
/* ═════════════════════════════════════════════════════════════════════════
11. Bottom nav polish — touch targets + editorial tightness
─────────────────────────────────────────────────────────────────────────
Existing .nav-btn already meets the 44px target floor on mobile. This
refines the active/icon transition timing so the bottom nav feels
immediate without being jittery.
═════════════════════════════════════════════════════════════════════════ */
html[data-polish="v25"] .nav-btn {
transition: color var(--pp-duration-fast) var(--pp-ease);
}
html[data-polish="v25"] .nav-btn i {
transition: transform var(--pp-duration-fast) var(--pp-ease);
}
html[data-polish="v25"] .nav-btn.active i {
transform: translateY(-1px) scale(1.05);
}
/* ═════════════════════════════════════════════════════════════════════════
12. Desktop portal cards — match mobile editorial identity (Brief §18A)
─────────────────────────────────────────────────────────────────────────
The desktop portal uses .dp-card / .dp-grid-card. We refine resting and
hover shadow so desktop cards feel like the same family as mobile cards.
═════════════════════════════════════════════════════════════════════════ */
html[data-polish="v25"] .dp-card,
html[data-polish="v25"] .dp-grid-card,
html[data-polish="v25"] .dp-event-card {
box-shadow: var(--pp-shadow-rest);
transition: transform var(--pp-duration-base) var(--pp-ease),
box-shadow var(--pp-duration-base) var(--pp-ease);
}
html[data-polish="v25"] .dp-card:hover,
html[data-polish="v25"] .dp-grid-card:hover,
html[data-polish="v25"] .dp-event-card:hover {
transform: translateY(-2px);
box-shadow: var(--pp-shadow-hover);
}
/* ═════════════════════════════════════════════════════════════════════════
13. Reduced-motion accessibility
─────────────────────────────────────────────────────────────────────────
Respect prefers-reduced-motion: skip every transform/transition we added.
The visual result stays correct; only the animation goes away.
═════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
html[data-polish="v25"] *,
html[data-polish="v25"] *::before,
html[data-polish="v25"] *::after {
transition-duration: 0.001ms !important;
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
}
html[data-polish="v25"] .restaurant-card:hover,
html[data-polish="v25"] .event-card-v2:hover,
html[data-polish="v25"] .chef-post-card:hover,
html[data-polish="v25"] .collection-card:hover,
html[data-polish="v25"] .search-card:hover,
html[data-polish="v25"] .dp-card:hover,
html[data-polish="v25"] .dp-grid-card:hover,
html[data-polish="v25"] .dp-event-card:hover,
html[data-polish="v25"] .rd-action-btn:hover,
html[data-polish="v25"] .bm-experience-chip:hover,
html[data-polish="v25"] .rd-diferencial-item:hover {
transform: none;
}
}
/* ═════════════════════════════════════════════════════════════════════════
14. Safety net — text legibility on cards in low-contrast themes
─────────────────────────────────────────────────────────────────────────
The v2.4.1 font-visibility-fix raised contrast on dark surfaces. We
reinforce the same baseline on the chips/diferenciais we added, so a
third-party theme override can't push them below the AA contrast floor.
═════════════════════════════════════════════════════════════════════════ */
html[data-polish="v25"] .bm-experience-chip,
html[data-polish="v25"] .rd-diferencial-item {
/* If any future theme sets --app-text to a near-surface color, force a
readable fallback rather than vanishing. */
color: var(--app-text, #1A1714);
}
html[data-polish="v25"][data-theme="dark"] .bm-experience-chip,
html[data-polish="v25"][data-theme="dark"] .rd-diferencial-item,
html[data-polish="v25"]:not([data-theme]) .bm-experience-chip,
html[data-polish="v25"]:not([data-theme]) .rd-diferencial-item {
color: var(--app-text, #F5F0E8);
}
/* ═══════════════════════════════════════════════════════════════════════════
End — css/premium-polish.css v2.5.0
═══════════════════════════════════════════════════════════════════════════ */