/* ================================================================ BLOCO 1.6 – TRADIÇÃO NO DELIVERY (imagem de fundo + logo + texto + botão) Arquivo: style-tradicao-delivery.css ATENÇÃO: o stylemb.css já possui um bloco chamado #tradicao com as classes .tradicao-bg e .tradicao-conteudo (BLOCO 3 do site original). Para não colidir com essas classes já existentes, este arquivo usa o prefixo "delivery-" em todas as classes novas. Importar após style-unidades.css no do index.html: ================================================================ */ #tradicao-delivery { position: relative; width: 100%; min-height: 70vh; display: flex; align-items: center; justify-content: center; overflow: hidden; } /* ── Imagem de fundo ───────────────────────────────────────── */ .delivery-bg { position: absolute; inset: 0; background-image: url('imagens/produto-emporium.jpg'); background-size: cover; background-position: center; } /* ── Layer (overlay) escura para dar leitura ao texto ───────── */ .delivery-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); } /* ── Conteúdo central ──────────────────────────────────────── */ .delivery-conteudo { position: relative; z-index: 2; width: 100%; max-width: 760px; padding: 90px 6%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 28px; } /* ── Logo redondo (Emporium) ──────────────────────────────── */ .delivery-logo { width: 350px; height: 350px; } .delivery-logo img { width: 100%; height: 100%; object-fit: contain; display: block; } /* ── Texto ────────────────────────────────────────────────── */ .delivery-conteudo p { font-family: var(--fonte-trad); font-weight: 700; font-size: clamp(1.2rem, 2.4vw, 1.7rem); line-height: 1.5; color: var(--cor-texto-claro); } /* ── Botão (mesmo padrão .btn já existente) ──────────────────*/ .delivery-conteudo .btn { margin-top: 4px; } /* ================================================================ RESPONSIVIDADE ================================================================ */ @media (max-width: 600px) { #tradicao-delivery { min-height: 60vh; } .delivery-conteudo { padding: 60px 8%; gap: 22px; } .delivery-logo { width: 220px; height: 220px; } .delivery-conteudo p { font-size: 1.05rem; } }