, reprovado pela auditoria "ARIA attributes"). */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ── Navbar ────────────────────────────────────── */
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 var(--space-2xl);
z-index: var(--z-navbar);
background: transparent;
transition: background var(--duration-slow) var(--ease-out-expo),
border-color var(--duration-slow) var(--ease-out-expo);
border-bottom: 1px solid transparent;
}
.navbar.scrolled {
background: rgba(10, 10, 10, 0.92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: var(--border-subtle);
}
.navbar__logo-slot {
width: 45px;
height: 45px;
flex-shrink: 0;
opacity: 0;
transition: opacity var(--duration-base) var(--ease-out-expo);
}
.navbar.scrolled .navbar__logo-slot {
opacity: 1;
}
.navbar__right {
display: flex;
align-items: center;
gap: var(--space-xl);
}
.navbar__links {
display: flex;
gap: var(--space-xl);
opacity: 0; /* animated in via GSAP */
}
.navbar__cart {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
color: var(--color-text);
opacity: 0; /* animated in via GSAP alongside navbar__links */
transition: color var(--duration-fast);
}
.navbar__cart svg {
width: 22px;
height: 22px;
}
.navbar__cart:hover {
color: var(--color-accent);
}
.navbar__cart-badge {
position: absolute;
top: -2px;
right: -4px;
min-width: 17px;
height: 17px;
padding: 0 4px;
border-radius: var(--radius-full);
background: var(--color-brand-light);
color: var(--color-text);
font-size: 11px;
font-weight: var(--weight-bold);
line-height: 17px;
text-align: center;
transition: transform var(--duration-fast) var(--ease-out-back);
}
.navbar__cart-badge:empty,
.navbar__cart-badge[data-count="0"] {
display: none;
}
.navbar__link {
font-size: var(--text-nav);
font-weight: var(--weight-semibold);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
color: var(--color-text-muted);
transition: color var(--duration-fast);
position: relative;
}
.navbar__link::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 2px;
background: var(--color-brand-light);
transition: width var(--duration-base) var(--ease-out-expo);
}
.navbar__link:hover {
color: var(--color-text);
}
.navbar__link:hover::after {
width: 100%;
}
/* Telas médias/grandes (acima do breakpoint mobile de 768px): o layout
space-between deixa a logo e o menu grudados nas pontas, e em monitores
largos isso vira um vão enorme no meio. Puxa as duas pontas ~10% pro
centro cada (20% de redução na distância total entre elas), sem trocar
pra justify-content:center (que apagaria o vão por completo).
10vw - 65px ≈ 10% do gap real medido (gap = viewport - 650.7px, com o
padding/logo/menu atuais) — cresce com a tela, então a distância
removida acompanha o tamanho do vão em vez de um valor fixo. */
@media (min-width: 769px) {
.navbar__logo-slot {
margin-left: max(0px, calc(10vw - 65px));
}
.navbar__right {
margin-right: max(0px, calc(10vw - 65px));
}
}
/* ── Hero Section ──────────────────────────────── */
.hero {
position: relative;
width: 100%;
min-height: 100vh;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
/* margem lateral generosa: afasta o conteúdo das bordas da página */
padding: 0 clamp(4.5rem, 9vw, 11rem);
background: var(--gradient-hero-bg);
overflow: hidden;
}
.hero__overlay {
position: absolute;
inset: 0;
background: var(--color-bg);
z-index: var(--z-overlay);
pointer-events: none;
}
/* ── Hero Left — SVG Bull + Text ───────────────── */
.hero__left {
position: relative;
z-index: var(--z-content);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--space-xl);
}
/* Wrapper fixo do boi — vive no body, doca na navbar via scroll.
Fica invisível até o JS medir o slot e posicioná-lo (evita o flash de
"logo gigante em top:0/left:0" enquanto GSAP/anime.js ainda carregam do
CDN — visível sobretudo em conexões mobile mais lentas). */
.bull-wrapper {
position: fixed;
top: 0;
left: 0;
width: 350px; /* sobrescrito via JS pela largura do slot */
z-index: var(--z-bull);
pointer-events: none;
transform-origin: top left;
will-change: transform;
opacity: 0;
transition: opacity 0.25s ease-out;
}
.bull-wrapper.is-positioned {
opacity: 1;
}
/* Slot na hero que reserva o lugar do boi no layout */
.hero-bull-slot {
width: 350px;
aspect-ratio: 300 / 380;
}
.hero-bull {
display: block;
width: 100%;
height: auto;
filter: drop-shadow(0 0 30px rgba(139, 26, 26, 0.3));
will-change: transform;
}
.hero-bull path,
.hero-bull line,
.hero-bull polyline,
.hero-bull polygon,
.hero-bull circle {
fill: none;
stroke: var(--color-text);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.hero-bull .bull-star {
fill: none;
stroke: var(--color-accent);
stroke-width: 1.5;
}
.hero-bull .bull-fill-group {
opacity: 0; /* revealed after stroke drawing */
}
/* Halo de luz ao redor do boi, enquanto ele descansa na hero (plano §4.5:
camada separada com blur ESTÁTICO — só opacity/scale animam, sem repaint
por frame). Some assim que o usuário começa a scrollar (js/animations.js). */
.bull-wrapper::before {
content: '';
position: absolute;
inset: -22%;
z-index: -1;
border-radius: 50%;
background: radial-gradient(circle, rgba(178, 34, 34, 0.55) 0%, rgba(178, 34, 34, 0.16) 45%, transparent 72%);
filter: blur(16px);
opacity: 0;
transform: scale(0.9);
pointer-events: none;
}
.bull-wrapper.idle-glow::before {
animation: bull-halo-breathe 4.5s ease-in-out infinite;
}
@keyframes bull-halo-breathe {
0%, 100% { opacity: 0.35; transform: scale(0.92); }
50% { opacity: 0.75; transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
.bull-wrapper.idle-glow::before {
animation: none;
opacity: 0.5;
}
}
.hero__subtitle {
font-family: 'Cormorant Garamond', Georgia, serif;
/* Em telas grandes chega a ~o dobro do tamanho anterior (28px -> ~50-56px);
no mobile permanece no mínimo (1.35rem), inalterado. */
font-size: clamp(1.35rem, 0.3rem + 2.4vw, 3.6rem);
font-weight: 500;
color: var(--color-text-muted);
max-width: clamp(440px, 45vw, 680px);
line-height: 1.4;
}
.hero__subtitle-line {
display: block;
}
.hero__subtitle-line--accent {
font-style: italic;
font-size: 0.82em;
color: var(--color-accent);
margin-top: 0.4em;
}
/* Palavras animadas individualmente (stagger GSAP) */
.hero__subtitle .w {
display: inline-block;
opacity: 0;
transform: translateY(16px);
will-change: transform, opacity;
}
.hero__subtitle .w--brasa {
color: var(--color-accent-hot);
font-style: italic;
font-weight: 600;
}
.hero__cta {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
padding: 14px 36px;
background: var(--gradient-cta);
color: var(--color-text);
font-size: var(--text-cta);
font-weight: var(--weight-semibold);
letter-spacing: 0.05em;
text-transform: uppercase;
border-radius: var(--radius-full);
transition: transform var(--duration-base) var(--ease-out-expo),
box-shadow var(--duration-base) var(--ease-out-expo);
opacity: 0;
transform: scale(0.9);
will-change: transform;
}
.hero__cta:hover {
transform: scale(1.05);
box-shadow: var(--shadow-glow-brand);
}
.hero__cta:active {
transform: scale(0.98);
}
/* ── Hero Right — Dish + Decoratives ───────────── */
.hero__right {
position: relative;
z-index: var(--z-dish);
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.hero__dish-wrapper {
position: relative;
width: clamp(350px, 35vw, 550px);
will-change: transform;
opacity: 0;
transform: scale(1.2);
}
.hero__dish-img {
position: relative;
width: 100%;
height: auto;
display: block;
transition: transform var(--duration-slow) var(--ease-out-expo);
}
/* Alecrins grudados na borda da panela (filhos do wrapper: seguem
entrada, parallax e deslize de scroll da panela automaticamente) */
.hero__garnish {
position: absolute;
pointer-events: none;
filter: brightness(1.1);
}
.hero__garnish--1 {
width: 34%;
top: 4%;
right: 11%;
transform: rotate(18deg);
}
.hero__garnish--2 {
width: 30%;
bottom: 6%;
left: 2%;
transform: rotate(-12deg);
}
.hero__dish-wrapper:hover .hero__dish-img {
transform: scale(1.03);
}
/* ── Sal grosso sob a panela ───────────────────── */
/* Dentro do dish-wrapper: herda entrada, parallax e deslize de scroll da panela.
A rotação no scroll é aplicada via GSAP (sentidos opostos). */
.hero__salt {
position: absolute;
top: 50%;
left: 50%;
max-width: none; /* o reset img{max-width:100%} clamparia o width>100% */
transform: translate(-50%, -50%);
pointer-events: none;
will-change: transform;
}
.hero__salt--a {
width: 155%;
}
.hero__salt--b {
width: 132%;
top: 55%;
opacity: 0.85;
}
/* ── Smoke Effect ──────────────────────────────── */
.hero__smoke {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 300px;
z-index: var(--z-smoke);
pointer-events: none;
opacity: 0;
}
.hero__smoke-layer {
position: absolute;
inset: 0;
border-radius: 50%;
background: radial-gradient(
ellipse at center,
rgba(200, 190, 180, 0.08) 0%,
transparent 70%
);
mix-blend-mode: screen;
}
.hero__smoke-layer--1 {
animation: smoke-rise-1 4s ease-in-out infinite;
}
.hero__smoke-layer--2 {
animation: smoke-rise-2 6s ease-in-out infinite 1s;
}
.hero__smoke-layer--3 {
animation: smoke-rise-3 5s ease-in-out infinite 2s;
}
@keyframes smoke-rise-1 {
0% {
transform: translateY(0) scale(1);
opacity: 0.5;
}
100% {
transform: translateY(-80px) scale(1.5);
opacity: 0;
}
}
@keyframes smoke-rise-2 {
0% {
transform: translateY(0) scale(0.8) translateX(-10px);
opacity: 0.4;
}
100% {
transform: translateY(-100px) scale(1.8) translateX(10px);
opacity: 0;
}
}
@keyframes smoke-rise-3 {
0% {
transform: translateY(0) scale(1.2) translateX(5px);
opacity: 0.3;
}
100% {
transform: translateY(-90px) scale(2.0) translateX(-15px);
opacity: 0;
}
}
/* ── Responsive ────────────────────────────────── */
@media (max-width: 1024px) {
.hero {
padding: 0 var(--space-2xl);
}
.hero-bull-slot {
width: 280px;
}
.hero__dish-wrapper {
width: clamp(280px, 40vw, 420px);
}
}
@media (max-width: 768px) {
.hero {
grid-template-columns: 1fr;
grid-template-rows: auto auto;
padding: 100px var(--space-lg) var(--space-2xl);
min-height: auto;
gap: var(--space-2xl);
}
.hero__left {
align-items: center;
text-align: center;
}
.hero-bull-slot {
width: 220px;
}
.hero__subtitle {
text-align: center;
}
/* Mobile: navbar sólida, sem backdrop-filter (plano §3) */
.navbar.scrolled {
background: rgba(10, 10, 10, 0.95);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.hero__right {
justify-content: center;
}
.hero__dish-wrapper {
width: clamp(250px, 70vw, 380px);
}
.navbar {
padding: 0 var(--space-lg);
/* Mobile: sem espaço reservado pra nav central (não há logo de texto
grande como no desktop) — o space-between do layout base empurrava
o logo pra ponta esquerda e o menu+carrinho pra ponta direita,
deixando um vão enorme no meio. Agrupa os dois mais ao centro. */
justify-content: center;
gap: var(--space-lg);
}
.navbar__logo-slot {
width: 40px;
height: 40px;
}
.navbar__right {
gap: var(--space-md);
}
.navbar__links {
gap: var(--space-md);
}
.navbar__link {
font-size: 0.75rem;
}
.navbar__cart {
width: 34px;
height: 34px;
}
.navbar__cart svg {
width: 20px;
height: 20px;
}
}
@media (max-width: 480px) {
.hero {
padding: 80px var(--space-md) var(--space-xl);
}
.hero-bull-slot {
width: 180px;
}
.hero__dish-wrapper {
width: clamp(200px, 80vw, 300px);
}
.hero__cta {
padding: 12px 28px;
font-size: 0.875rem;
}
.navbar {
padding: 0 14px;
gap: var(--space-md);
}
.navbar__logo-slot {
width: 34px;
height: 34px;
}
.navbar__right {
gap: 6px;
}
.navbar__links {
gap: 6px;
}
.navbar__link {
font-size: 0.6rem;
letter-spacing: 0.02em;
}
.navbar__cart {
width: 30px;
height: 30px;
}
.navbar__cart svg {
width: 18px;
height: 18px;
}
}
/* ============================================================
NELORE STEAK HOUSE — Catálogo de Produtos
============================================================ */
.catalog {
padding: var(--space-4xl) var(--space-2xl) var(--space-4xl);
background: var(--color-bg);
}
.catalog__header {
max-width: 640px;
margin: 0 auto var(--space-2xl);
text-align: center;
/* estado inicial do scroll-reveal (js/animations.js, initScrollReveal) —
mesmo padrão de "opacity:0 na CSS, GSAP anima" usado nos elementos da hero */
opacity: 0;
transform: translateY(24px);
}
.catalog__eyebrow {
display: inline-block;
font-size: 0.75rem;
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: var(--space-sm);
}
.catalog__title {
font-family: var(--font-display);
font-size: clamp(2rem, 4vw, 2.75rem);
font-weight: var(--weight-bold);
color: var(--color-text);
margin-bottom: var(--space-sm);
}
.catalog__subtitle {
font-family: var(--font-body);
font-weight: var(--weight-light);
color: var(--color-text-muted);
}
/* ── Tabs ───────────────────────────────────────── */
.catalog__tabs-wrap {
position: sticky;
top: 64px; /* altura da navbar */
z-index: 20;
display: flex;
align-items: center;
gap: var(--space-xs);
margin-bottom: var(--space-xl);
background: var(--color-bg);
}
.catalog__tabs {
position: relative;
display: flex;
gap: var(--space-sm);
overflow-x: auto;
scroll-behavior: smooth;
scrollbar-width: none;
padding: var(--space-md) 2px;
/* fade nas bordas: sinaliza que há mais categorias fora da vista */
-webkit-mask-image: linear-gradient(
to right,
transparent 0,
#000 24px,
#000 calc(100% - 24px),
transparent 100%
);
mask-image: linear-gradient(
to right,
transparent 0,
#000 24px,
#000 calc(100% - 24px),
transparent 100%
);
}
.catalog__tabs-wrap.at-start .catalog__tabs {
-webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
}
.catalog__tabs-wrap.at-end .catalog__tabs {
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 100%);
mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 100%);
}
.catalog__tabs-wrap.at-start.at-end .catalog__tabs {
-webkit-mask-image: none;
mask-image: none;
}
.catalog__tabs::-webkit-scrollbar {
display: none;
}
/* ── Setas de navegação das tabs ─────────────────── */
.catalog__tabs-nav {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--color-bg-elevated);
border: var(--card-border);
color: var(--color-text-muted);
transition: color var(--duration-fast), background var(--duration-fast), opacity var(--duration-fast);
}
.catalog__tabs-nav svg {
width: 16px;
height: 16px;
}
.catalog__tabs-nav:hover {
color: var(--color-text);
background: var(--color-surface);
}
.catalog__tabs-nav:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
/* escondidas quando não há mais o que rolar naquela direção,
ou quando todas as categorias já cabem na tela */
.catalog__tabs-wrap.at-start .catalog__tabs-nav--prev,
.catalog__tabs-wrap.at-end .catalog__tabs-nav--next,
.catalog__tabs-wrap.no-overflow .catalog__tabs-nav {
opacity: 0;
pointer-events: none;
}
@media (max-width: 640px) {
/* mobile: swipe é o gesto natural, setas só ocupariam espaço */
.catalog__tabs-nav {
display: none;
}
}
/* Pílula que desliza atrás do tab ativo (js/catalog.js posiciona via GSAP) */
.catalog__tab-indicator {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border-radius: var(--radius-full);
background: var(--gradient-cta);
pointer-events: none;
z-index: 0;
}
.catalog__tab {
position: relative;
z-index: 1;
flex-shrink: 0;
padding: 10px 22px;
border-radius: var(--radius-full);
border: var(--card-border);
background: var(--color-bg-elevated);
color: var(--color-text-muted);
font-size: 0.85rem;
font-weight: var(--weight-semibold);
letter-spacing: 0.02em;
transition: color var(--duration-fast), border-color var(--duration-fast);
}
.catalog__tab:hover {
color: var(--color-text);
}
.catalog__tab[aria-selected="true"] {
/* preenchimento vem da pílula deslizante (.catalog__tab-indicator) atrás do tab;
aqui só o texto muda, para não competir com a animação */
background: transparent;
border-color: transparent;
color: var(--color-text);
}
.catalog__tab:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
/* ── Corpo: seções por categoria ────────────────── */
.catalog__body {
display: flex;
flex-direction: column;
gap: var(--space-3xl);
max-width: 1280px;
margin: 0 auto;
}
.catalog__group-title {
font-family: var(--font-display);
font-size: clamp(1.4rem, 2.4vw, 1.85rem);
font-weight: var(--weight-bold);
color: var(--color-text);
padding-bottom: var(--space-sm);
margin-bottom: var(--space-lg);
border-bottom: 1px solid rgba(200, 149, 108, 0.25);
position: relative;
}
.catalog__group-title::after {
content: '';
position: absolute;
left: 0;
bottom: -1px;
width: 56px;
height: 2px;
background: var(--color-accent);
}
/* ── Grid ───────────────────────────────────────── */
.catalog__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
perspective: 1200px;
}
@media (min-width: 480px) {
.catalog__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.catalog__grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1400px) {
.catalog__grid {
grid-template-columns: repeat(4, 1fr);
}
}
.catalog__empty {
text-align: center;
color: var(--color-text-subtle);
padding: var(--space-3xl) 0;
}
/* ── Product Card ───────────────────────────────── */
.product-card {
--tilt-x: 0deg;
--tilt-y: 0deg;
display: flex;
flex-direction: column;
background: var(--card-bg);
border: var(--card-border);
border-radius: var(--card-radius);
overflow: hidden;
transform-style: preserve-3d;
transform: translateY(0) scale(1) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
transition: transform var(--duration-base) var(--ease-out-expo),
box-shadow var(--duration-base) var(--ease-out-expo),
border-color var(--duration-base) var(--ease-out-expo);
}
.product-card:hover {
transform: translateY(-4px) scale(1.01) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
border-color: var(--color-accent);
box-shadow: var(--shadow-elevated), var(--shadow-glow-accent);
}
/* Enquanto o cursor está em movimento sobre o card, a resposta ao tilt
precisa ser mais rápida que a transição padrão de hover/saída. */
.product-card.is-tilting {
transition-duration: 80ms;
}
.product-card__media {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--color-bg-subtle);
}
/* Scrim sutil no rodapé da foto: profundidade + contraste para o badge */
.product-card__media::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.35) 0%, transparent 55%);
pointer-events: none;
}
.product-card__img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transform: scale(1);
transition: opacity var(--duration-slow) ease-out,
transform var(--duration-slow) var(--ease-out-expo);
}
.product-card__img.is-loaded {
opacity: 1;
}
.product-card:hover .product-card__img {
transform: scale(1.06);
}
/* Fallback visual enquanto fotos reais não são adicionadas em assets/produtos/
Não passa pelo ciclo de carregamento assíncrono (não é ), então fica
visível de imediato — só a foto real usa o fade-in de opacity. */
.product-card__img--placeholder {
display: flex;
align-items: center;
justify-content: center;
opacity: 1;
background: linear-gradient(135deg, var(--color-bg-subtle) 0%, var(--color-surface) 100%);
color: var(--color-text-subtle);
font-family: var(--font-display);
font-size: 2.5rem;
font-weight: var(--weight-bold);
}
.product-card__badge {
position: absolute;
top: var(--space-sm);
left: var(--space-sm);
padding: 4px 12px;
border-radius: var(--radius-full);
background: var(--gradient-brand);
color: var(--color-text);
font-size: 0.7rem;
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
overflow: hidden;
z-index: 1;
}
/* Brilho que varre o badge periodicamente — reforça a curadoria do "Destaque" */
.product-card__badge::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
115deg,
transparent 30%,
rgba(255, 255, 255, 0.55) 48%,
transparent 66%
);
transform: translateX(-120%);
animation: badge-shine 4.5s ease-in-out infinite;
animation-delay: 1.2s;
}
@keyframes badge-shine {
0%, 55%, 100% { transform: translateX(-120%); }
75% { transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce) {
.product-card__badge::after {
animation: none;
display: none;
}
}
.product-card__body {
display: flex;
flex-direction: column;
flex: 1;
padding: var(--space-lg);
gap: var(--space-sm);
}
.product-card__name {
font-family: var(--font-display);
font-size: 20px;
/* Playfair só carrega o peso 700 (ver de fontes) — 600 nunca
existiu aqui, o navegador já vinha substituindo por 700 em silêncio. */
font-weight: var(--weight-bold);
color: var(--color-text);
}
.product-card__desc {
font-family: var(--font-body);
font-size: 14px;
font-weight: 300;
color: var(--color-text-muted);
line-height: 1.5;
flex: 1;
}
.product-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
margin-top: var(--space-sm);
}
.product-card__price-wrap {
display: flex;
align-items: baseline;
gap: 4px;
}
.product-card__price {
font-family: var(--font-body);
font-size: 18px;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--color-price);
background-image: linear-gradient(var(--color-accent), var(--color-accent));
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 0% 2px;
transition: background-size var(--duration-base) var(--ease-out-expo);
}
.product-card:hover .product-card__price {
background-size: 100% 2px;
}
.product-card__unit {
font-size: 12px;
color: var(--color-text-subtle);
}
/* ── Ação: botão Adicionar / stepper ────────────── */
.product-card__action {
display: flex;
}
.product-card__add {
position: relative;
overflow: hidden;
padding: 9px 20px;
border-radius: var(--radius-full);
background: var(--color-bg-subtle);
border: 1px solid var(--color-brand-light);
color: var(--color-text);
font-size: 0.8rem;
font-weight: var(--weight-semibold);
transition: background var(--duration-fast), transform var(--duration-fast);
}
.product-card__add:hover {
background: var(--gradient-cta);
}
.product-card__add:active {
transform: scale(0.96);
}
.product-card__add:focus-visible,
.product-card__stepper button:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
/* Ripple dourado a partir do ponto de clique (js/catalog.js) */
.card-ripple {
position: absolute;
border-radius: 50%;
background: rgba(245, 240, 235, 0.55);
transform: scale(0);
opacity: 1;
pointer-events: none;
}
.product-card__stepper {
display: flex;
align-items: center;
gap: var(--space-sm);
background: var(--color-bg-subtle);
border-radius: var(--radius-full);
padding: 4px;
}
.product-card__stepper button {
width: 26px;
height: 26px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text);
background: var(--color-surface);
font-size: 1rem;
line-height: 1;
}
.product-card__stepper button:hover {
background: var(--color-brand-light);
}
.product-card__stepper-qty {
min-width: 18px;
text-align: center;
font-weight: var(--weight-semibold);
font-variant-numeric: tabular-nums;
}
/* ── Responsive ─────────────────────────────────── */
@media (max-width: 768px) {
.catalog {
padding: var(--space-3xl) var(--space-md) var(--space-3xl);
}
}
/* ── prefers-reduced-motion ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
.product-card,
.product-card__img,
.product-card__price {
transition-duration: 0.01ms;
}
.product-card:hover .product-card__img {
transform: none;
}
.catalog__header {
opacity: 1;
transform: none;
}
}
/* ============================================================
NELORE STEAK HOUSE — Carrinho (drawer, badge, toast)
============================================================ */
/* ── Overlay ────────────────────────────────────── */
.cart-overlay {
position: fixed;
inset: 0;
z-index: calc(var(--z-cart-drawer) - 1);
background: var(--color-overlay);
opacity: 0;
transition: opacity var(--duration-base) var(--ease-out-expo);
}
.cart-overlay.is-visible {
opacity: 1;
}
/* ── Drawer ─────────────────────────────────────── */
.cart-drawer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: min(400px, 100vw);
z-index: var(--z-cart-drawer);
display: flex;
flex-direction: column;
background: var(--color-bg-elevated);
border-left: var(--card-border);
box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5);
transform: translateX(100%);
}
.cart-drawer__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-lg);
border-bottom: var(--card-border);
flex-shrink: 0;
}
.cart-drawer__title {
font-family: var(--font-display);
font-size: 1.4rem;
font-weight: var(--weight-bold);
}
.cart-drawer__close {
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-muted);
border-radius: 50%;
transition: color var(--duration-fast), background var(--duration-fast);
}
.cart-drawer__close svg {
width: 18px;
height: 18px;
}
.cart-drawer__close:hover {
color: var(--color-text);
background: var(--color-surface);
}
.cart-drawer__body {
flex: 1;
overflow-y: auto;
padding: var(--space-lg);
}
.cart-drawer__empty {
color: var(--color-text-subtle);
text-align: center;
padding: var(--space-2xl) 0;
}
.cart-drawer__items {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.cart-item {
display: grid;
grid-template-columns: 1fr auto;
gap: 4px var(--space-md);
align-items: center;
padding-bottom: var(--space-md);
border-bottom: var(--card-border);
}
.cart-item__name {
font-family: var(--font-display);
font-size: 1rem;
font-weight: var(--weight-bold); /* Playfair só tem o peso 700 carregado */
color: var(--color-text);
}
.cart-item__unit {
font-size: 12px;
color: var(--color-text-subtle);
}
.cart-item__subtotal {
grid-column: 1;
font-size: 0.85rem;
font-variant-numeric: tabular-nums;
color: var(--color-price);
}
.cart-item__stepper {
grid-row: 1 / 3;
grid-column: 2;
display: flex;
align-items: center;
gap: 8px;
background: var(--color-bg-subtle);
border-radius: var(--radius-full);
padding: 4px;
height: fit-content;
}
.cart-item__stepper button {
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-surface);
color: var(--color-text);
line-height: 1;
}
.cart-item__stepper button:hover {
background: var(--color-brand-light);
}
.cart-item__qty {
min-width: 16px;
text-align: center;
font-weight: var(--weight-semibold);
font-variant-numeric: tabular-nums;
}
.cart-item__remove {
grid-column: 1 / -1;
justify-self: start;
font-size: 0.75rem;
color: var(--color-text-subtle);
text-decoration: underline;
margin-top: 2px;
}
.cart-item__remove:hover {
color: var(--color-brand-light);
}
/* ── Footer (total, campos, checkout) ──────────── */
.cart-drawer__footer {
flex-shrink: 0;
padding: var(--space-lg);
border-top: var(--card-border);
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.cart-drawer__total {
display: flex;
align-items: baseline;
justify-content: space-between;
font-family: var(--font-display);
font-size: 1.2rem;
font-weight: var(--weight-bold);
}
.cart-drawer__total span:last-child {
color: var(--color-price);
font-variant-numeric: tabular-nums;
}
.cart-drawer__field {
display: flex;
flex-direction: column;
gap: 4px;
}
.cart-drawer__field label {
font-size: 0.75rem;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.cart-drawer__field input,
.cart-drawer__field textarea {
width: 100%;
padding: 10px 12px;
background: var(--color-bg-subtle);
border: var(--card-border);
border-radius: var(--radius-md);
color: var(--color-text);
font-family: var(--font-body);
font-size: 0.9rem;
resize: vertical;
}
.cart-drawer__field input:focus-visible,
.cart-drawer__field textarea:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 1px;
}
.cart-drawer__checkout {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
padding: 14px;
border-radius: var(--radius-full);
background: var(--color-whatsapp);
color: #06210f;
font-size: 0.95rem;
font-weight: var(--weight-bold);
transition: transform var(--duration-fast), filter var(--duration-fast);
}
.cart-drawer__checkout svg {
width: 18px;
height: 18px;
}
.cart-drawer__checkout:hover {
filter: brightness(1.08);
}
.cart-drawer__checkout:active {
transform: scale(0.98);
}
.cart-drawer__checkout:disabled {
opacity: 0.5;
filter: none;
pointer-events: none;
}
.cart-drawer__clear {
font-size: 0.8rem;
color: var(--color-text-subtle);
text-align: center;
text-decoration: underline;
padding: 4px;
}
.cart-drawer__clear:hover {
color: var(--color-brand-light);
}
.cart-drawer__checkout:focus-visible,
.cart-drawer__clear:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
/* ── Toast ──────────────────────────────────────── */
.toast {
position: fixed;
left: 50%;
bottom: var(--space-xl);
z-index: var(--z-toast);
transform: translate(-50%, 16px);
display: flex;
align-items: center;
gap: 10px;
padding: 10px 22px;
border-radius: var(--radius-full);
background: var(--color-bg-elevated);
border: var(--card-border);
box-shadow: var(--shadow-elevated);
color: var(--color-text);
font-size: 0.85rem;
font-weight: var(--weight-semibold);
opacity: 0;
pointer-events: none;
transition: opacity var(--duration-base) var(--ease-out-expo),
transform var(--duration-base) var(--ease-out-expo);
}
.toast.is-visible {
opacity: 1;
transform: translate(-50%, 0);
}
.toast--success {
border-color: var(--color-success);
}
.toast__img {
width: 28px;
height: 28px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
/* ── Flying dot / thumbnail (feedback desktop) ──── */
.cart-fly-dot {
position: fixed;
z-index: var(--z-toast);
border-radius: 50%;
background: var(--color-accent);
pointer-events: none;
will-change: transform, left, top, opacity;
}
.cart-fly-dot--thumb {
background-size: cover;
background-position: center;
box-shadow: 0 0 0 2px rgba(245, 240, 235, 0.35), var(--shadow-elevated);
}
/* "+1" fantasma que sobe ao lado do badge no impacto */
.cart-ghost-qty {
position: fixed;
z-index: var(--z-toast);
color: var(--color-accent);
font-family: var(--font-body);
font-size: 0.8rem;
font-weight: var(--weight-bold);
pointer-events: none;
will-change: transform, opacity;
}
/* Ícone do carrinho: sacode + brilha no impacto do item (js/cart.js) */
.navbar__cart.is-hit {
animation: cart-icon-shake 0.5s ease-in-out;
}
.navbar__cart.is-hit svg {
filter: drop-shadow(0 0 8px var(--color-accent));
}
@keyframes cart-icon-shake {
0%, 100% { transform: rotate(0deg); }
20% { transform: rotate(-10deg); }
45% { transform: rotate(8deg); }
70% { transform: rotate(-5deg); }
90% { transform: rotate(2deg); }
}
/* ── Responsive ─────────────────────────────────── */
@media (max-width: 480px) {
.cart-drawer {
width: 100vw;
}
}
/* ── prefers-reduced-motion ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
.cart-overlay,
.toast {
transition-duration: 0.01ms;
}
.navbar__cart.is-hit {
animation: none;
}
.navbar__cart.is-hit svg {
filter: none;
}
}