/* ========================================================= JOHNNIE GRILL — seções prova · manifesto · cardápio · a casa · diferenciais · galeria · avaliações · como pedir · faq · local · footer estética: preto/brasa, vermelho Johnnie, pôster de hamburgueria ========================================================= */ /* ---------- padrões de seção ---------- */ .section{ padding:clamp(64px,9vw,120px) 0; position:relative; } .section--alt{ background:var(--ink-2); } .tag{ display:inline-flex; align-items:center; gap:.7em; font-size:.72rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin-bottom:1.1rem; } .tag-rule{ width:34px; height:2px; background:var(--red); display:inline-block; } .section-title{ font-family:var(--font-display); font-weight:400; font-size:clamp(2rem,5.2vw,3.6rem); line-height:.98; text-transform:uppercase; letter-spacing:.005em; color:#fff; } .section-title em{ font-style:normal; color:var(--red); } .section-intro{ margin-top:1.1rem; max-width:60ch; color:var(--smoke); font-size:clamp(1rem,1.4vw,1.12rem); } .section-head{ margin-bottom:clamp(2rem,4vw,3.4rem); } .section-head--center{ text-align:center; } .section-head--center .tag{ justify-content:center; } .section-head--center .section-intro{ margin-inline:auto; } /* reveal on scroll — só esconde quando o JS está ativo (.js no ); sem JS / se algo falhar, o conteúdo aparece normalmente */ .js [data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); } .js [data-reveal].is-visible{ opacity:1; transform:none; } @media (prefers-reduced-motion:reduce){ .js [data-reveal]{ opacity:1 !important; transform:none !important; } } /* ===================== PROVA / STATS ===================== */ .proof{ background:var(--ink-2); border-block:1px solid var(--line); padding:clamp(40px,6vw,64px) 0; } .proof-intro{ text-align:center; max-width:62ch; margin:0 auto clamp(1.8rem,3vw,2.6rem); font-family:var(--font-accent); font-style:italic; font-size:clamp(1.1rem,2.2vw,1.5rem); color:#fff; } .proof-intro b{ color:var(--gold); font-style:normal; font-weight:700; } .proof-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2.5vw,2.4rem); } .proof-item{ text-align:center; position:relative; } .proof-item:not(:last-child)::after{ content:""; position:absolute; right:calc(clamp(1rem,2.5vw,2.4rem)/-2); top:10%; bottom:10%; width:1px; background:var(--line); } .proof-num{ display:block; font-family:var(--font-display); font-size:clamp(1.7rem,4vw,2.7rem); color:var(--red); line-height:1; } .proof-label{ display:block; margin-top:.6rem; font-size:.82rem; color:var(--smoke); letter-spacing:.02em; } @media (max-width:680px){ .proof-grid{ grid-template-columns:repeat(2,1fr); gap:1.8rem 1rem; } .proof-item:nth-child(2)::after{ display:none; } } /* ===================== MANIFESTO ===================== */ .manifesto{ text-align:center; } .manifesto-mark{ font-size:.78rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); font-weight:700; } .manifesto-title{ font-family:var(--font-display); font-weight:400; font-size:clamp(1.9rem,5.6vw,4rem); line-height:1; text-transform:uppercase; color:#fff; margin:1.2rem auto; max-width:18ch; } .manifesto-title em{ font-style:normal; color:var(--red); } .manifesto-text{ max-width:60ch; margin:0 auto; color:var(--smoke); font-size:clamp(1.02rem,1.5vw,1.2rem); } .manifesto-text b{ color:#fff; } /* ===================== CARDÁPIO ===================== */ .menu-filters{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:clamp(1.8rem,3vw,2.6rem); } .menu-filter{ display:inline-flex; align-items:center; gap:.5em; font-size:.84rem; font-weight:600; letter-spacing:.04em; color:var(--smoke); padding:.62em 1.1em; border:1px solid var(--line); border-radius:999px; background:transparent; transition:all .25s var(--ease); } .menu-filter span{ font-size:.72rem; opacity:.6; } .menu-filter:hover{ border-color:var(--red); color:#fff; } .menu-filter.is-active{ background:var(--red); border-color:var(--red); color:#fff; } .menu-filter.is-active span{ opacity:.85; } .menu-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:clamp(1rem,2vw,1.6rem); } .dish.is-hidden{ display:none; } .dish-card{ display:flex; flex-direction:column; height:100%; background:#120606; border:1px solid var(--line); border-radius:16px; overflow:hidden; transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); } .dish-card:hover{ transform:translateY(-4px); border-color:rgba(225,20,20,.5); box-shadow:0 18px 40px -18px rgba(225,20,20,.5); } .dish-media{ position:relative; aspect-ratio:1/1; overflow:hidden; background:#1c0c0c; } .dish-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); } .dish-card:hover .dish-media img{ transform:scale(1.06); } .dish-badge{ position:absolute; top:10px; left:10px; z-index:2; background:#1c7a3a; color:#fff; font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:.4em .7em; border-radius:999px; } .dish-body{ display:flex; flex-direction:column; flex:1; padding:1.1rem 1.1rem 1.2rem; } .dish-name{ font-size:1.02rem; font-weight:700; color:#fff; letter-spacing:.01em; } .dish-desc{ margin-top:.5rem; font-size:.86rem; line-height:1.5; color:var(--smoke); flex:1; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; } .dish-foot{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin-top:1rem; } .dish-price{ font-family:var(--font-display); font-size:1.3rem; color:var(--gold); line-height:1; } .dish-price--var{ font-family:var(--font-body); font-size:.9rem; font-weight:600; color:var(--smoke); } .dish-order{ display:inline-flex; align-items:center; gap:.45em; font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:var(--red); padding:.6em 1em; border-radius:999px; transition:background .25s var(--ease), transform .2s var(--ease); } .dish-order svg{ width:16px; height:8px; } .dish-order:hover{ background:var(--red-deep); transform:translateX(2px); } .menu-empty{ text-align:center; color:var(--smoke); padding:3rem 0; display:none; } .menu-empty.is-shown{ display:block; } .menu-foot{ text-align:center; margin-top:clamp(2rem,4vw,3rem); color:var(--smoke); } .menu-foot a{ color:var(--gold); text-decoration:underline; text-underline-offset:3px; } .menu-foot a:hover{ color:#fff; } /* ===================== A CASA / HISTÓRIA ===================== */ .story-inner{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; } .story-portrait{ position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--line); } .story-portrait img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; } .story-plaque{ position:absolute; left:14px; bottom:14px; right:14px; background:rgba(8,3,3,.82); backdrop-filter:blur(8px); border:1px solid var(--line); border-radius:12px; padding:.8rem 1rem; } .story-plaque-name{ display:block; font-family:var(--font-display); color:var(--red); font-size:1.1rem; } .story-plaque-role{ display:block; font-size:.78rem; color:var(--smoke); margin-top:.1rem; } .story-text{ margin-top:1.2rem; display:flex; flex-direction:column; gap:.9rem; color:var(--smoke); } .story-text b{ color:#fff; } .story-text em{ color:var(--gold); font-style:normal; } .story-points{ margin-top:1.6rem; display:flex; flex-wrap:wrap; gap:.6rem; } .story-point{ display:inline-flex; align-items:center; gap:.5em; font-size:.82rem; color:#fff; padding:.55em .9em; border:1px solid var(--line); border-radius:999px; } .story-point::before{ content:"🔥"; font-size:.9em; } @media (max-width:820px){ .story-inner{ grid-template-columns:1fr; } .story-portrait{ max-width:440px; } } /* ===================== DIFERENCIAIS ===================== */ .exp-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2vw,1.6rem); } .exp-item{ padding:1.6rem 1.4rem; border:1px solid var(--line); border-radius:16px; background:#120606; transition:border-color .3s var(--ease); } .exp-item:hover{ border-color:rgba(225,20,20,.5); } .exp-num{ font-family:var(--font-display); font-size:1.6rem; color:var(--red); } .exp-name{ margin-top:.7rem; font-size:1.1rem; font-weight:700; color:#fff; } .exp-desc{ margin-top:.5rem; font-size:.9rem; color:var(--smoke); line-height:1.55; } @media (max-width:900px){ .exp-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:520px){ .exp-grid{ grid-template-columns:1fr; } } /* ===================== GALERIA ===================== */ .gal-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.6rem,1.4vw,1rem); } .gal-tile{ position:relative; border-radius:14px; overflow:hidden; aspect-ratio:1/1; border:1px solid var(--line); } .gal-tile img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); } .gal-tile:hover img{ transform:scale(1.07); } .gal-cap{ position:absolute; left:0; right:0; bottom:0; padding:1.4rem .9rem .7rem; font-size:.82rem; font-weight:600; color:#fff; background:linear-gradient(to top, rgba(0,0,0,.78), transparent); } @media (max-width:620px){ .gal-grid{ grid-template-columns:repeat(2,1fr); } } /* ===================== AVALIAÇÕES ===================== */ .reviews-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.6rem); } .review{ display:flex; flex-direction:column; padding:1.6rem 1.5rem; border:1px solid var(--line); border-radius:16px; background:#120606; position:relative; } .review-quote-mark{ font-family:var(--font-display); font-size:3rem; line-height:.6; color:var(--red); opacity:.5; } .review-stars{ color:var(--gold); letter-spacing:.1em; margin:.3rem 0 .8rem; font-size:.95rem; } .review-quote{ color:#fff; font-size:.98rem; line-height:1.55; flex:1; } .review-author{ display:flex; align-items:center; gap:.7rem; margin-top:1.2rem; } .review-author-dot{ width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--red),var(--amber)); flex:0 0 auto; } .review-author-name{ display:block; font-weight:700; color:#fff; font-size:.92rem; } .review-author-meta{ display:block; font-size:.76rem; color:var(--smoke); } .reviews-note{ text-align:center; margin-top:1.8rem; font-size:.84rem; color:var(--smoke); } @media (max-width:860px){ .reviews-grid{ grid-template-columns:1fr; max-width:560px; margin-inline:auto; } } /* ===================== COMO PEDIR ===================== */ .steps-list{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2vw,1.6rem); counter-reset:step; } .step{ position:relative; padding-top:.4rem; } .step-num{ font-family:var(--font-display); font-size:2.4rem; color:var(--red); line-height:1; } .step-name{ margin-top:.6rem; font-size:1.06rem; font-weight:700; color:#fff; } .step-desc{ margin-top:.5rem; font-size:.9rem; color:var(--smoke); line-height:1.55; } @media (max-width:900px){ .steps-list{ grid-template-columns:repeat(2,1fr); gap:1.8rem 1.4rem; } } @media (max-width:480px){ .steps-list{ grid-template-columns:1fr; } } /* ===================== FAQ ===================== */ .faq-list{ max-width:760px; margin-inline:auto; } .faq-item{ border-bottom:1px solid var(--line); } .faq-question{ width:100%; display:flex; align-items:center; gap:1rem; text-align:left; padding:1.3rem 0; color:#fff; font-size:1.05rem; font-weight:600; } .faq-q-text{ flex:1; } .faq-toggle{ position:relative; width:18px; height:18px; flex:0 0 auto; } .faq-toggle::before,.faq-toggle::after{ content:""; position:absolute; background:var(--red); transition:transform .3s var(--ease); } .faq-toggle::before{ left:0; right:0; top:8px; height:2px; } .faq-toggle::after{ top:0; bottom:0; left:8px; width:2px; } .faq-item.is-open .faq-toggle::after{ transform:scaleY(0); } .faq-answer{ overflow:hidden; max-height:0; transition:max-height .35s var(--ease); } .faq-answer-inner{ padding:0 0 1.3rem; color:var(--smoke); line-height:1.6; } .faq-answer-inner b{ color:#fff; } /* ===================== LOCAL / CONTATO ===================== */ .local-inner{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.6rem,3vw,3rem); align-items:stretch; } .local-info{ display:flex; flex-direction:column; gap:1.4rem; } .local-row{ display:flex; gap:.9rem; align-items:flex-start; } .local-row svg{ width:22px; height:22px; color:var(--red); flex:0 0 auto; margin-top:2px; } .local-row h3{ font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:.25rem; } .local-row p{ color:#fff; font-size:1rem; line-height:1.5; } .local-row p span{ color:var(--smoke); } .local-actions{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:.4rem; } .btn{ display:inline-flex; align-items:center; gap:.55em; font-weight:700; font-size:.9rem; letter-spacing:.03em; text-transform:uppercase; padding:.85em 1.5em; border-radius:999px; transition:all .25s var(--ease); } .btn svg{ width:18px; height:18px; } .btn--red{ background:var(--red); color:#fff; box-shadow:0 10px 26px -10px rgba(225,20,20,.6); } .btn--red:hover{ background:var(--red-deep); transform:translateY(-2px); } .btn--ghost{ border:1px solid var(--line); color:#fff; } .btn--ghost:hover{ border-color:var(--gold); color:var(--gold); } .local-map{ border-radius:18px; overflow:hidden; border:1px solid var(--line); min-height:340px; } .local-map iframe{ width:100%; height:100%; min-height:340px; border:0; filter:grayscale(.3) contrast(1.05); } @media (max-width:820px){ .local-inner{ grid-template-columns:1fr; } } /* ===================== FOOTER ===================== */ .footer{ background:#070202; border-top:1px solid var(--line); padding:clamp(3rem,6vw,4.5rem) 0 2rem; } .footer-top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:2rem; } .footer-brand{ display:flex; align-items:center; gap:.7rem; } .footer-brand img{ width:52px; height:52px; } .footer-brand-name{ font-family:var(--font-display); font-size:1.5rem; text-transform:uppercase; color:#fff; } .footer-brand-tag{ font-family:var(--font-accent); font-style:italic; color:var(--gold); font-size:.95rem; } .footer-links{ display:flex; flex-direction:column; gap:.7rem; } .footer-link{ display:inline-flex; align-items:center; gap:.6em; color:var(--smoke); font-size:.92rem; transition:color .25s var(--ease); } .footer-link svg{ width:18px; height:18px; } .footer-link:hover{ color:#fff; } .footer-region{ color:var(--smoke); font-size:.9rem; line-height:1.7; max-width:34ch; } .footer-region b{ color:#fff; } .footer-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem; margin-top:2.6rem; padding-top:1.4rem; border-top:1px solid var(--line); color:var(--smoke); font-size:.8rem; } /* ===================== WHATSAPP FLUTUANTE ===================== */ .wa-float{ position:fixed; right:18px; bottom:18px; z-index:60; width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#25d366; color:#fff; box-shadow:0 10px 30px rgba(0,0,0,.4); transition:transform .25s var(--ease); } .wa-float:hover{ transform:scale(1.08); } .wa-float svg{ width:30px; height:30px; } /* ========================================================= MOVIMENTO / INTERATIVIDADE ========================================================= */ /* ---- barra de progresso de scroll ---- */ .scroll-progress{ position:fixed; top:0; left:0; z-index:70; height:3px; width:0%; background:linear-gradient(90deg, var(--amber), var(--red)); box-shadow:0 0 12px rgba(225,20,20,.6); pointer-events:none; } /* ---- faixa marquee ---- */ .marquee{ overflow:hidden; white-space:nowrap; border-block:1px solid var(--line); background:var(--red); padding:.7rem 0; } .marquee-track{ display:inline-flex; align-items:center; gap:1.4rem; padding-left:1.4rem; animation:marquee 26s linear infinite; will-change:transform; } .marquee-track span{ font-family:var(--font-display); font-size:1.15rem; letter-spacing:.06em; text-transform:uppercase; color:#fff; } .marquee-track .dot{ color:rgba(255,255,255,.55); } .marquee:hover .marquee-track{ animation-play-state:paused; } @keyframes marquee{ to{ transform:translateX(-50%); } } /* ---- faíscas de fundo (geradas via JS) ---- */ .has-sparks{ position:relative; overflow:hidden; } .has-sparks > .wrap{ position:relative; z-index:1; } .sparks{ position:absolute; inset:0; z-index:0; pointer-events:none; } .spark{ position:absolute; bottom:-12px; width:3px; height:3px; border-radius:50%; background:var(--amber); box-shadow:0 0 6px 1px rgba(255,122,24,.8); opacity:0; animation:spark-rise linear infinite; } @keyframes spark-rise{ 0%{ transform:translateY(0) scale(1); opacity:0; } 10%{ opacity:.9; } 100%{ transform:translateY(-105vh) scale(.4); opacity:0; } } /* ---- linha do "como pedir" ---- */ .steps-list{ position:relative; } .steps-line{ position:absolute; top:22px; left:6%; right:6%; height:2px; z-index:0; background:linear-gradient(90deg, var(--red), var(--amber)); transform:scaleX(0); transform-origin:left center; } .step{ position:relative; z-index:1; } .step-num{ position:relative; display:inline-block; background:var(--ink); padding-right:.4rem; } .section--alt .step-num{ background:var(--ink-2); } @media (max-width:900px){ .steps-line{ display:none; } } /* ---- tilt 3D nos cards ---- */ .menu-grid{ perspective:1000px; } .dish-card{ transform-style:preserve-3d; will-change:transform; } /* ---- estado inicial p/ stagger (só com JS+GSAP) ---- */ .gsap .dish{ opacity:0; } /* ---- títulos palavra por palavra ---- */ .word{ display:inline-block; overflow:hidden; vertical-align:top; padding:.14em 0; margin:-.14em 0; } .word-i{ display:inline-block; } .word.is-em .word-i{ color:var(--red); font-style:normal; } /* respeita reduzir movimento */ @media (prefers-reduced-motion:reduce){ .marquee-track{ animation:none; } .spark{ display:none; } .steps-line{ transform:scaleX(1); } .gsap .dish{ opacity:1; } }