/* =========================================================== Site público — Confeitaria As cores vêm das variáveis definidas no (config.php) =========================================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { --max: 1140px; --radius: 18px; --shadow: 0 10px 30px rgba(122, 74, 58, .12); } html { scroll-behavior: smooth; } body { font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color: #4a3a33; background: var(--cor-creme); line-height: 1.65; } h1, h2, h3, .logo { font-family: 'Playfair Display', Georgia, serif; } .container { max-width: var(--max); margin: 0 auto; padding: 0 24px; } a { color: inherit; text-decoration: none; } /* ---------- Botões ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border-radius: 50px; font-weight: 600; border: 2px solid transparent; cursor: pointer; transition: .25s; font-size: 15px; } .btn-primary { background: var(--cor-primaria); color: #fff; } .btn-primary:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: var(--shadow); } .btn-outline { background: transparent; border-color: var(--cor-primaria); color: var(--cor-primaria); } .btn-outline:hover { background: var(--cor-primaria); color: #fff; } .btn-whats { background: #25D366; color: #fff; } .btn-whats:hover { filter: brightness(1.05); transform: translateY(-2px); } /* ---------- Header ---------- */ header { position: sticky; top: 0; z-index: 50; background: rgba(255, 246, 239, .92); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(122,74,58,.08); } .nav { display: flex; align-items: center; justify-content: space-between; height: 74px; } .logo { font-size: 26px; font-weight: 700; color: var(--cor-secundaria); display:flex; align-items:center; gap:10px; } .logo span { color: var(--cor-primaria); } .nav-links { display: flex; gap: 28px; align-items: center; } .nav-links a { font-weight: 500; transition: color .2s; } .nav-links a:hover { color: var(--cor-primaria); } .nav-actions { display: flex; gap: 12px; align-items: center; } .btn-login { padding: 9px 20px; font-size: 14px; } .menu-toggle { display: none; font-size: 26px; background: none; border: none; cursor: pointer; color: var(--cor-secundaria); } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--cor-creme) 0%, var(--cor-destaque) 130%); padding: 70px 0 90px; } .hero .container { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; } .hero-text .badge { display: inline-block; background: #fff; color: var(--cor-primaria); padding: 6px 16px; border-radius: 50px; font-size: 13px; font-weight: 600; box-shadow: var(--shadow); margin-bottom: 18px; } .hero-text h1 { font-size: clamp(34px, 5vw, 54px); line-height: 1.1; color: var(--cor-secundaria); margin-bottom: 18px; } .hero-text h1 em { color: var(--cor-primaria); font-style: normal; } .hero-text p { font-size: 18px; max-width: 480px; margin-bottom: 28px; } .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; } /* Mascote (bonequinha) em destaque no hero */ .hero-mascote { position: relative; text-align: center; } .hero-mascote .blob { position: absolute; inset: 0; margin: auto; width: 360px; height: 360px; background: radial-gradient(circle, var(--cor-destaque), transparent 70%); border-radius: 50%; filter: blur(8px); z-index: 0; } .hero-mascote img { position: relative; z-index: 1; max-width: 100%; width: 340px; filter: drop-shadow(0 18px 24px rgba(122,74,58,.25)); animation: float 4s ease-in-out infinite; } @keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } /* placeholder enquanto não há imagem da bonequinha */ .mascote-ph { width: 300px; height: 320px; margin: 0 auto; border-radius: var(--radius); background: repeating-linear-gradient(45deg, #fff, #fff 14px, var(--cor-creme) 14px, var(--cor-creme) 28px); border: 3px dashed var(--cor-primaria); display: flex; align-items: center; justify-content: center; text-align: center; color: var(--cor-secundaria); padding: 24px; font-weight: 600; } /* ---------- Seções ---------- */ section { padding: 80px 0; } .section-title { text-align: center; margin-bottom: 50px; } .section-title small { color: var(--cor-primaria); font-weight: 600; letter-spacing: 2px; text-transform: uppercase; font-size: 13px; } .section-title h2 { font-size: clamp(28px, 4vw, 42px); color: var(--cor-secundaria); margin-top: 8px; } /* Sobre + bonequinha */ .sobre { background: #fff; } .sobre .container { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .sobre-img { text-align: center; } .sobre-img img { max-width: 320px; filter: drop-shadow(0 12px 20px rgba(122,74,58,.2)); } .sobre-card { margin-top: 22px; background: var(--cor-creme); border-radius: var(--radius); padding: 18px 22px; box-shadow: var(--shadow); } .sobre-card b { color: var(--cor-primaria); } /* Produtos */ .produtos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 26px; } .produto-card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform .25s; display: flex; flex-direction: column; } .produto-card:hover { transform: translateY(-6px); } .produto-thumb { height: 170px; background: linear-gradient(135deg, var(--cor-destaque), var(--cor-creme)); display:flex; align-items:center; justify-content:center; font-size: 54px; } .produto-body { padding: 20px; flex: 1; display: flex; flex-direction: column; } .produto-body .cat { font-size: 12px; color: var(--cor-primaria); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; } .produto-body h3 { font-size: 20px; margin: 4px 0 8px; color: var(--cor-secundaria); } .produto-body p { font-size: 14px; color: #7a6a62; flex: 1; } .produto-preco { margin-top: 14px; font-size: 20px; font-weight: 700; color: var(--cor-primaria); } .produto-preco small { font-size: 13px; color: #999; font-weight: 400; } /* Galeria */ .galeria { background: #fff; } .galeria-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; } .galeria-item { aspect-ratio: 1; border-radius: 14px; background: linear-gradient(135deg, var(--cor-destaque), var(--cor-creme)); display:flex; align-items:center; justify-content:center; font-size: 40px; overflow:hidden; } .galeria-item img { width: 100%; height: 100%; object-fit: cover; } /* CTA faixa */ .cta-faixa { background: var(--cor-primaria); color: #fff; text-align: center; } .cta-faixa h2 { color: #fff; font-size: clamp(26px, 4vw, 38px); } .cta-faixa p { max-width: 560px; margin: 14px auto 28px; opacity: .95; } .cta-faixa .btn-primary { background: #fff; color: var(--cor-primaria); } /* Contato */ .contato-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 24px; } .contato-card { background: #fff; border-radius: var(--radius); padding: 28px; text-align: center; box-shadow: var(--shadow); } .contato-card .ico { font-size: 34px; margin-bottom: 10px; } .contato-card h3 { color: var(--cor-secundaria); margin-bottom: 6px; } /* Footer */ footer { background: var(--cor-secundaria); color: #f3e7df; padding: 50px 0 24px; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 30px; margin-bottom: 30px; } .footer-grid h4 { color: #fff; margin-bottom: 14px; } .footer-grid a, .footer-grid p { color: #e7d6cc; display: block; margin-bottom: 8px; font-size: 15px; } .footer-grid a:hover { color: var(--cor-destaque); } .social { display: flex; gap: 12px; margin-top: 10px; } .social a { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; font-size:18px; transition:.2s; } .social a:hover { background: var(--cor-primaria); transform: translateY(-3px); } .footer-bottom { text-align: center; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.15); font-size: 14px; opacity: .8; } /* WhatsApp flutuante */ .whats-float { position: fixed; right: 22px; bottom: 22px; z-index: 60; width: 58px; height: 58px; border-radius: 50%; background: #25D366; color:#fff; display:flex; align-items:center; justify-content:center; font-size: 28px; box-shadow: 0 8px 20px rgba(0,0,0,.25); transition:.2s; } .whats-float:hover { transform: scale(1.08); } /* ---------- Logo com subtítulo ---------- */ .logo { flex-wrap: wrap; } .logo em { flex-basis: 100%; font-family: 'Poppins', sans-serif; font-style: normal; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--cor-primaria); font-weight: 500; margin-top: -2px; } /* ---------- Cardápio por categoria ---------- */ .cat-titulo { font-family: 'Playfair Display', serif; font-size: 24px; color: var(--cor-secundaria); margin: 36px 0 18px; padding-bottom: 8px; border-bottom: 2px solid var(--cor-destaque); } .produto-card.mini .produto-body { padding: 18px 20px; } .produto-card.mini h3 { font-size: 18px; } /* ---------- Sabores ---------- */ .sabores { background: #fff; } .sabores-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; } .sabor-card { background: var(--cor-creme); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); } .sabor-card h3 { color: var(--cor-primaria); margin-bottom: 14px; font-size: 20px; } .sabor-card ul { list-style: none; } .sabor-card li { padding: 7px 0; border-bottom: 1px dashed rgba(122,74,58,.12); color: #6a5a52; } .sabor-card .mini-nota { margin-top: 12px; font-size: 13px; color: #9a8a82; line-height: 1.6; } /* ---------- Responsivo ---------- */ @media (max-width: 880px) { .hero .container, .sobre .container { grid-template-columns: 1fr; text-align: center; } .hero-cta { justify-content: center; } .hero-text p { margin-left: auto; margin-right: auto; } .footer-grid { grid-template-columns: 1fr; } .nav-links { display: none; position: absolute; top: 74px; left: 0; right: 0; background: var(--cor-creme); flex-direction: column; padding: 16px 24px; box-shadow: var(--shadow); } .nav-links.open { display: flex; } .menu-toggle { display: block; } }