/* ============================================================ Multiplásticos — Folha de estilos principal ============================================================ Índice: 1. Fonte (Inter via @font-face local) 2. Reset & variáveis CSS 3. Tipografia e base 4. Componentes reutilizáveis (botões) 5. Navegação 6. Hero 7. Faixa de prova social 8. Seções de produtos (estrutura comum) 9. Cards de produto 10. Sobre + Depoimentos 11. CTA final 12. Rodapé 13. Responsivo (≤ 900 px) ============================================================ */ /* ── 1. FONTE ──────────────────────────────────────────────── */ /* Inter carregada via Google Fonts (link no do HTML) */ /* ── 2. RESET & VARIÁVEIS ──────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg-main: #FAFAF7; --bg-alt: #F9F3EC; --blue-primary: #1C3A4A; --blue-secondary: #3D5A6A; --orange-light: #C54A14; --orange-dark: #FF6B1A; --amber: #F0A050; --text-main: #1A1A1A; --text-inv: #FFFFFF; } html { scroll-behavior: smooth; } /* ── 3. TIPOGRAFIA E BASE ──────────────────────────────────── */ body { font-family: 'Inter', sans-serif; background: var(--bg-main); color: var(--text-main); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* ── 4. BOTÕES ─────────────────────────────────────────────── */ /* Botão principal laranja — usado no hero e na seção sobre */ .btn-primary { background: var(--orange-light); color: white; border: none; border-radius: 8px; padding: 10px 16px; font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: filter 150ms; } .btn-primary:hover { filter: brightness(1.1); } /* Botão laranja maior — CTA final */ .btn-primary-dark { background: var(--orange-dark); color: white; border: none; border-radius: 8px; padding: 18px 36px; font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: background 150ms, filter 150ms; } .btn-primary-dark:hover { background: var(--orange-light); filter: brightness(1.05); } /* Botão outline azul — cards de produto */ .btn-ghost { background: transparent; color: var(--blue-primary); border: 1.5px solid var(--blue-primary); border-radius: 6px; padding: 8px 16px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: background 150ms, color 150ms, border-color 150ms; } .btn-ghost:hover { background: var(--blue-primary); color: white; } /* ── 5. NAVEGAÇÃO ──────────────────────────────────────────── */ #nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 64px; background: var(--bg-main); display: flex; align-items: center; justify-content: center; transition: box-shadow 250ms ease, height 250ms ease; } .nav-inner { width: 100%; max-width: 1200px; padding: 0 48px; display: flex; align-items: center; justify-content: space-between; } /* Sombra + blur aparecem ao rolar */ #nav.scrolled { box-shadow: 0 2px 16px rgba(28, 58, 74, 0.10); backdrop-filter: blur(8px); background: rgba(250, 250, 247, 0.92); } .nav-right { display: flex; align-items: center; gap: 12px; } /* Logo responsivo */ .logo-full { display: flex; align-items: center; height: 56px; } .logo-full img { height: 56px; width: auto; } .logo-compact { display: none; } /* Ícones de redes sociais */ .nav-icon { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #ddd; display: flex; align-items: center; justify-content: center; color: var(--blue-primary); text-decoration: none; font-size: 16px; transition: border-color 150ms, background 150ms; } .nav-icon:hover { border-color: var(--blue-secondary); background: #f0ebe2; } /* Botão WhatsApp no nav */ .btn-wa-nav { background: var(--orange-light); color: white; border: none; border-radius: 8px; padding: 10px 18px; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.03em; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: filter 150ms; } .btn-wa-nav:hover { filter: brightness(1.1); } /* ── 6. HERO ───────────────────────────────────────────────── */ #hero { padding-top: 64px; background: var(--bg-main); position: relative; z-index: 0; } .hero-inner { max-width: 1200px; margin: 0 auto; padding: 28px 48px 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: center; } .hero-badge { display: inline-flex; align-items: center; gap: 6px; background: #EDE9E0; color: #555; font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 4px; margin-bottom: 20px; } .hero-h1 { font-size: 38px; font-weight: 800; line-height: 1.1; color: var(--text-main); margin-bottom: 12px; text-wrap: pretty; } .hero-sub { font-size: 16px; color: #555; line-height: 1.6; margin-bottom: 22px; max-width: 480px; } /* Coluna da imagem: fica atrás de tudo com z-index baixo. */ .hero-img-wrap { align-self: stretch; position: relative; z-index: 0; will-change: transform; -webkit-mask-image: linear-gradient(to right, transparent 0%, black 18%); mask-image: linear-gradient(to right, transparent 0%, black 18%); } .hero-product-img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; display: block; } /* ── 7. FAIXA DE PROVA SOCIAL ──────────────────────────────── */ .proof-strip { background: #EDE9E0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; position: relative; z-index: 1; } .proof-inner { max-width: 1200px; margin: 0 auto; padding: 14px 48px; display: flex; gap: 0; justify-content: space-around; align-items: center; } .proof-item { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--blue-primary); } .proof-icon { width: 32px; height: 32px; background: var(--blue-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; } .proof-divider { width: 1px; height: 32px; background: #ccc; } /* ── 8. SEÇÕES DE PRODUTOS (estrutura comum) ───────────────── */ .section-wrap { padding: 30px 0 48px; position: relative; z-index: 1; } .section-inner { max-width: 1200px; margin: 0 auto; padding: 0 48px; } .section-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 28px; } .section-title { font-size: 36px; font-weight: 800; color: var(--text-main); line-height: 1.1; } .section-subtitle { font-size: 15px; color: #666; margin-top: 4px; } /* Botões < > do carrossel */ .slider-nav { display: flex; gap: 8px; flex-shrink: 0; } .slider-btn { width: 40px; height: 40px; border-radius: 8px; border: 1.5px solid #ccc; background: white; cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; color: var(--blue-primary); transition: background 150ms, border-color 150ms, color 150ms; } .slider-btn:hover { background: var(--blue-primary); color: white; border-color: var(--blue-primary); } /* Wrapper do carrossel — esconde a barra de scroll nativa */ .slider-track-wrap { overflow: hidden; } .slider-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 4px; } .slider-track::-webkit-scrollbar { display: none; } /* ── 9. CARDS DE PRODUTO ───────────────────────────────────── */ .product-card { flex: 0 0 calc((100% - 40px) / 3); min-width: 220px; scroll-snap-align: start; background: white; border-radius: 10px; border: 1.5px solid #E8E4DC; overflow: hidden; transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease; cursor: pointer; } .product-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(28, 58, 74, 0.12); border-color: var(--amber); } /* Área de foto do produto */ .card-img { width: 100%; aspect-ratio: 1; background: #EEEBE4; overflow: hidden; } .card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 300ms ease; } .product-card:hover .card-img img { transform: scale(1.04); } .card-body { padding: 16px 16px 18px; } /* Seletores de cor — Cadeira Bistrô */ .color-swatches { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .swatch { width: 28px; height: 28px; border-radius: 50%; border: none; cursor: pointer; padding: 0; box-shadow: 0 0 0 1.5px rgba(0,0,0,0.18); transition: transform 150ms; } .swatch:hover { transform: scale(1.18); } .swatch.active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--blue-primary); } /* Seletores de tamanho */ .size-buttons { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .size-btn { padding: 4px 12px; border-radius: 6px; border: 1.5px solid rgba(0,0,0,0.2); background: #fff; font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: transform 150ms; } .size-btn:hover { transform: scale(1.08); } .size-btn.active { border-color: var(--blue-primary); color: var(--blue-primary); box-shadow: 0 0 0 2px var(--blue-primary); } .card-name { font-size: 16px; font-weight: 700; color: var(--text-main); margin-bottom: 6px; } .card-desc { font-size: 13px; color: #666; line-height: 1.5; margin-bottom: 14px; /* limita a 2 linhas */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ── 10. SOBRE + DEPOIMENTOS ───────────────────────────────── */ .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; } .about-title { font-size: 36px; font-weight: 800; color: var(--text-main); margin-bottom: 20px; line-height: 1.1; } .about-text { font-size: 16px; color: #444; line-height: 1.7; margin-bottom: 16px; } .about-text:last-of-type { margin-bottom: 0; } /* Cabeçalho das avaliações do Facebook */ .fb-reviews-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 10px 14px; background: white; border-radius: 8px; border: 1.5px solid #E0DAD0; } .fb-logo-icon { width: 22px; height: 22px; flex-shrink: 0; } .fb-header-link { display: flex; line-height: 0; opacity: 1; transition: opacity 0.2s; } .fb-header-link:hover { opacity: 0.75; } .fb-reviews-page-name { font-size: 13px; font-weight: 700; color: var(--text-main); flex: 1; text-decoration: none; transition: color 0.2s; } .fb-reviews-page-name:hover { color: #1877F2; } .fb-stars-display { color: #F4A623; font-size: 14px; letter-spacing: 1px; } /* Estrelas individuais nos cards */ .fb-review-stars { color: #F4A623; font-size: 12px; letter-spacing: 0.5px; margin-top: 2px; } /* Ícone FB pequeno no canto do card */ .fb-card-icon { width: 17px; height: 17px; flex-shrink: 0; align-self: flex-start; margin-top: 2px; } /* Link "Ver todas" */ .fb-reviews-link { display: inline-block; margin-top: 14px; font-size: 13px; color: #0B5FCC; text-decoration: none; font-weight: 600; transition: opacity 0.2s; } .fb-reviews-link:hover { opacity: 0.7; } /* Grade 2×2 de depoimentos */ .testimonials-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .testimonial-card { background: white; border-radius: 10px; padding: 20px; border: 1.5px solid #E0DAD0; } .testimonial-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } /* Foto circular do avaliador */ .testimonial-avatar-photo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } /* Círculo com inicial do nome */ .testimonial-avatar { width: 44px; height: 44px; border-radius: 50%; background: #D8D2C8; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; color: white; flex-shrink: 0; } .testimonial-name { font-size: 14px; font-weight: 700; color: var(--text-main); } .testimonial-text { font-size: 14px; color: #555; line-height: 1.6; font-style: italic; } /* ── 11. CTA FINAL ─────────────────────────────────────────── */ #cta-final { background: var(--blue-primary); padding: 80px 48px; text-align: center; } .cta-h2 { font-size: 42px; font-weight: 800; color: white; margin-bottom: 14px; line-height: 1.1; } .cta-sub { font-size: 18px; color: var(--amber); margin-bottom: 36px; max-width: 560px; margin-left: auto; margin-right: auto; } /* ── 12. RODAPÉ ────────────────────────────────────────────── */ footer { background: #1C3A4A; padding: 40px 48px 32px; position: relative; z-index: 1; } /* Newsletter */ .footer-newsletter { max-width: 1200px; margin: 0 auto; padding: 20px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); display: flex; align-items: center; gap: 48px; } .footer-newsletter-title { font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, 0.9); margin-bottom: 4px; } .footer-newsletter-sub { font-size: 13px; color: rgba(255, 255, 255, 0.45); } .footer-newsletter-form { display: flex; gap: 10px; flex: 1; flex-wrap: wrap; } .footer-input { flex: 1; min-width: 140px; height: 42px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; padding: 0 14px; color: white; font-family: 'Inter', sans-serif; font-size: 14px; outline: none; transition: border-color 150ms, background 150ms; } .footer-input::placeholder { color: rgba(255, 255, 255, 0.3); } .footer-input:focus { border-color: var(--orange-light); background: rgba(255, 255, 255, 0.10); } .btn-newsletter { height: 42px; padding: 0 22px; background: var(--orange-light); color: white; border: none; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: filter 150ms; } .btn-newsletter:hover { filter: brightness(1.1); } /* Grade principal do rodapé */ .footer-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; padding: 20px 0 32px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .footer-slogan { font-size: 13px; color: rgba(255, 255, 255, 0.80); line-height: 1.5; } .footer-heading { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); margin-bottom: 14px; } .footer-link { display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.85); text-decoration: none; font-size: 14px; margin-bottom: 10px; transition: color 150ms; } .footer-link:hover { color: white; } .footer-text { font-size: 13px; color: rgba(255, 255, 255, 0.80); margin-bottom: 6px; line-height: 1.5; } .footer-bottom { max-width: 1200px; margin: 24px auto 0; font-size: 12px; color: rgba(255, 255, 255, 0.65); } /* ── 13. RESPONSIVO (≤ 900 px) ─────────────────────────────── */ @media (max-width: 900px) { /* Nav vira coluna */ #nav { height: auto; flex-direction: column; align-items: flex-start; gap: 0; padding: 10px 20px 8px; } .nav-inner { padding: 0; } .nav-right { width: 100%; padding-bottom: 4px; } /* No mobile o botão WhatsApp da nav vira só ícone */ .btn-wa-nav { background: transparent; border: 1.5px solid #ddd; color: var(--blue-primary); padding: 0; width: 36px; height: 36px; border-radius: 8px; justify-content: center; } .btn-wa-nav:hover { background: #f0ebe2; border-color: var(--blue-secondary); filter: none; } .btn-wa-nav span { display: none; } /* Hero */ #hero { padding-top: 90px; } .hero-inner { grid-template-columns: 1fr; padding: 16px 20px 28px; gap: 28px; } .hero-h1 { font-size: 34px; } .hero-img-wrap { order: -1; } /* Faixa de prova */ .proof-inner { padding: 14px 20px; flex-direction: column; align-items: flex-start; gap: 10px; } .proof-divider { display: none; } /* Seções */ .section-inner { padding: 0 20px; } .section-title { font-size: 28px; } /* Cards ocupam ~78% da tela para dar hint de próximo */ .product-card { flex: 0 0 78vw; } /* Sobre */ .about-grid { grid-template-columns: 1fr; gap: 32px; } .testimonials-grid { grid-template-columns: 1fr; } /* CTA final */ #cta-final { padding: 60px 20px; } .cta-h2 { font-size: 32px; } /* Rodapé */ footer { padding: 40px 20px 24px; } .footer-newsletter { flex-direction: column; align-items: flex-start; gap: 16px; } .footer-newsletter-form { width: 100%; } .footer-grid { grid-template-columns: 1fr; gap: 32px; } } /* ── 14. LOGO RESPONSIVO (≤ 768 px) ────────────────────────── */ /* Abaixo de 768px: logo compacto à esquerda, ícones à direita */ @media (max-width: 768px) { .logo-full { display: none; } .logo-compact { display: flex; align-items: center; } .logo-compact img { height: 44px; width: auto; } .nav-right { width: auto; gap: 6px; } .nav-right .nav-icon { width: 28px; height: 28px; } .nav-right .nav-icon svg { width: 13px; height: 13px; } }