/* ============================================================ SEÇÃO 1: VARIÁVEIS (Custom Properties / Design Tokens) ============================================================ Por quê? Centralizar cores e fontes em variáveis CSS facilita a manutenção. Se quisermos mudar uma cor, alteramos em UM lugar e toda a página reflete a mudança automaticamente. Como funciona? O :root é o elemento raiz do HTML (). Variáveis definidas aqui ficam disponíveis em TODO o CSS usando var(--nome-da-variavel). ============================================================ */ :root { /* Paleta refinada em HSL — tons quentes e acolhedores HSL (Hue, Saturation, Lightness) facilita ajustes finos: - Hue: 30-35° = tons dourados/caramelo (identidade da marca) - Saturation: controla a vivacidade da cor - Lightness: controla claro/escuro */ --color-primary: hsl(30, 25%, 44%); /* Marrom quente — cor principal */ --color-primary-dark: hsl( 30, 30%, 32% ); /* Versão escura para hover/profundidade */ --color-primary-light: hsl( 30, 25%, 55% ); /* Versão clara para destaques sutis */ --color-secondary: hsl(33, 55%, 65%); /* Dourado caramelo — cor de destaque */ --color-secondary-light: hsl( 33, 60%, 78% ); /* Dourado claro para bordas/decorações */ --color-accent: hsl(28, 70%, 55%); /* Laranja quente — CTA e preços */ --color-background: hsl(35, 33%, 97%); /* Bege claro — fundo da página */ --color-surface: hsl(0, 0%, 100%); /* Branco — superfície dos cards */ --color-text: hsl(15, 25%, 18%); /* Marrom escuro — texto principal */ --color-text-secondary: hsl( 15, 20%, 35% ); /* Marrom médio — texto secundário */ /* Gradientes premium — direção 135° para dinamismo visual */ --gradient-brand: linear-gradient( 135deg, var(--color-primary) 0%, var(--color-secondary) 100% ); --gradient-brand-hover: linear-gradient( 135deg, var(--color-primary-dark) 0%, var(--color-primary-light) 100% ); /* Sombras em camadas (layered shadows) — criam profundidade realista Múltiplas sombras com diferentes intensidades simulam luz natural */ --shadow-sm: 0 1px 3px hsla(30, 25%, 20%, 0.08), 0 1px 2px hsla(30, 25%, 20%, 0.06); --shadow-md: 0 4px 6px hsla(30, 25%, 20%, 0.07), 0 2px 4px hsla(30, 25%, 20%, 0.06); --shadow-lg: 0 10px 25px hsla(30, 25%, 20%, 0.1), 0 4px 10px hsla(30, 25%, 20%, 0.05); --shadow-xl: 0 20px 40px hsla(30, 25%, 20%, 0.12), 0 8px 16px hsla(30, 25%, 20%, 0.06); /* Glassmorphism — efeito vidro fosco para cards de produto backdrop-filter: blur desfoca o fundo atrás do elemento background semi-transparente cria o efeito de vidro */ --glass-background: hsla(35, 40%, 97%, 0.7); --glass-border: 1px solid hsla(35, 50%, 95%, 0.5); /* Fontes premium do Google Fonts (carregadas no index.html) Playfair Display: serifa elegante para títulos Inter: sans-serif moderna e legível para texto corrido Fallbacks: fontes do sistema para exibição imediata (Flash of Unstyled Text) */ --font-heading: "Playfair Display", Georgia, "Times New Roman", serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Escala tipográfica modular (ratio 1.25 — "Major Third") Cada nível é 1.25× maior que o anterior, criando uma hierarquia visual harmoniosa e profissional. Base: 1rem (16px) */ --text-xs: 0.8rem; /* 12.8px — labels, captions */ --text-sm: 0.9rem; /* 14.4px — texto secundário */ --text-base: 1rem; /* 16px — corpo do texto */ --text-md: 1.1rem; /* 17.6px — texto de destaque */ --text-lg: 1.25rem; /* 20px — subtítulos */ --text-xl: 1.563rem; /* 25px — títulos de seção (h3) */ --text-2xl: 1.953rem; /* 31.2px — títulos principais (h2) */ --text-3xl: 2.441rem; /* 39px — título hero (h1) */ } /* ============================================================ SEÇÃO 2: RESET & BASE ============================================================ Por quê? Cada navegador aplica seus próprios estilos padrão (margens, paddings, tamanhos de fonte). O reset garante que nosso site tenha a MESMA aparência em todos os navegadores. O que faz? Remove margens e paddings padrão e define box-sizing: border-box para que padding e border sejam incluídos no tamanho total do elemento (mais intuitivo). ============================================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-body); /* Gradiente de fundo sutil para ressaltar o efeito vidro dos cards */ background: linear-gradient( 160deg, hsl(35, 25%, 92%) 0%, hsl(30, 30%, 80%) 30%, hsl(28, 25%, 75%) 55%, hsl(33, 30%, 82%) 80%, hsl(35, 25%, 90%) 100% ); min-height: 100vh; color: var(--color-text); line-height: 1.6; } /* Classe utilitária: esconde visualmente mas mantém acessível para leitores de tela (screen readers). Usado em headings que existem apenas para hierarquia semântica. */ .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; } /* Foco visível: garante que usuários de teclado vejam qual elemento está selecionado (WCAG 2.1 - nível AA) */ a:focus-visible { outline: 3px solid var(--color-secondary); outline-offset: 2px; border-radius: 4px; } /* ============================================================ SEÇÃO 3: LAYOUT (Header, Container, Footer) ============================================================ Por quê? Estas regras definem a estrutura geral da página — como o conteúdo é organizado em grandes blocos visuais. .header → Barra superior com título e subtítulo .container → Limita a largura do conteúdo e centraliza .footer → Rodapé com créditos ============================================================ */ /* --- Header: Agora com vídeo de fundo e logo (TODO-FEAT-04) --- A estrutura usa position: relative para permitir que o vídeo e o overlay fiquem por baixo do conteúdo textual. */ .header { position: relative; background: var(--color-primary-dark); /* Fallback case video fails */ color: white; text-align: center; padding: 80px 16px; /* Aumentado para dar mais ar ao logo */ overflow: hidden; box-shadow: var(--shadow-lg); min-height: 60vh; /* Usa altura baseada na tela para mostrar mais do vídeo */ display: flex; align-items: center; justify-content: center; } .header-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; object-fit: cover; object-position: center; /* Garante que o centro do vídeo seja o foco */ } /* Overlay sutil para garantir contraste do texto e do logo sobre o vídeo */ .header-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient( to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(139, 115, 85, 0.6) 100% ); z-index: 2; } .header-content { position: relative; z-index: 3; width: 100%; max-width: 800px; } .header-logo { width: 100%; max-width: 360px; /* Aumentado para dar mais destaque */ aspect-ratio: 3 / 4; /* Proporção mais vertical para incluir o texto inferior */ object-fit: cover; object-position: center 40%; /* Ajustado para enquadrar desde o topo do arco até o texto inferior */ height: auto; margin-bottom: 24px; filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.3)); transition: transform 0.5s ease; } .header-logo:hover { transform: scale(1.05); } .header p { font-size: var(--text-lg); font-weight: 600; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); letter-spacing: 0.5px; opacity: 1; margin: 0 auto; } /* --- Container: centraliza o conteúdo com largura máxima --- */ .container { max-width: 1200px; margin: 0 auto; padding: 24px 16px; } /* --- Footer: texto centralizado e discreto --- */ .footer { text-align: center; padding: 32px 20px; color: var(--color-text-secondary); font-size: var(--text-sm); } /* ============================================================ SEÇÃO 4: COMPONENTES (Intro, Product Cards, CTA, WhatsApp) ============================================================ Por quê? Componentes são blocos reutilizáveis de interface. Separar seus estilos facilita encontrar e modificar cada parte da página de forma independente. ============================================================ */ /* --- Intro: bloco de apresentação no topo --- */ .intro { background: var(--color-surface); padding: 24px; border-radius: 12px; margin-bottom: 32px; box-shadow: var(--shadow-sm); text-align: center; } .intro p { font-size: var(--text-md); color: var(--color-text-secondary); line-height: 1.7; } /* Destaque visual para palavras-chave no texto de introdução */ .intro .highlight { color: var(--color-accent); font-weight: 600; } /* --- Product Cards: seções de produto com foto e texto --- Usam flexbox para colocar imagem e texto lado a lado. A classe .reverse inverte a ordem (texto-esquerda, foto-direita). */ .product-section { display: flex; flex-direction: column; align-items: center; gap: 24px; margin-bottom: 40px; /* Glassmorphism: fundo semi-transparente com blur */ background: var(--glass-background); border: var(--glass-border); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 16px; padding: 24px; box-shadow: var(--shadow-md); transition: box-shadow 0.3s ease, transform 0.3s ease; } .product-section.reverse { flex-direction: column; } /* Imagem do produto: ocupa 45% da largura do card */ .product-image { flex: none; max-width: 100%; } /* object-fit: cover garante que a imagem preencha o espaço sem distorcer, cortando o excesso se necessário. A tag agora atua como wrapper para a . */ .product-image picture, .product-image img { display: block; width: 100%; height: 250px; object-fit: cover; border-radius: 12px; box-shadow: var(--shadow-md); } /* Conteúdo textual do produto: flex: 1 ocupa o espaço restante */ .product-content { flex: 1; } .product-title { font-family: var(--font-heading); font-size: var(--text-xl); color: var(--color-primary); margin-bottom: 12px; font-weight: 400; } .product-description { font-size: var(--text-base); color: var(--color-text-secondary); margin-bottom: 20px; line-height: 1.7; } .product-price { font-size: var(--text-xl); color: var(--color-accent); font-weight: 700; margin-bottom: 16px; } /* ============================================================ SEÇÃO 6: RESPONSIVIDADE (Media Queries) ============================================================ Por quê? Garante que o site funcione bem em telas menores (celulares e tablets). Usamos @media para aplicar regras CSS SOMENTE quando a largura da tela é menor que 768px. O que muda no mobile? - Título menor - Cards empilhados (flex-direction: column) - Imagens ocupam 100% da largura - Preços e subtítulos com fontes menores ============================================================ */ @media (min-width: 768px) { .header { padding: 48px 20px 40px; } .header h1 { font-size: var(--text-3xl); letter-spacing: 3px; margin-bottom: 12px; } .container { padding: 40px 20px; } .intro { padding: 32px; margin-bottom: 40px; } .product-section { flex-direction: row; gap: 40px; padding: 32px; margin-bottom: 60px; } .product-section.reverse { flex-direction: row-reverse; } .product-image { flex: 0 0 45%; max-width: 45%; } .product-image picture, .product-image img { height: 350px; } .product-title { font-size: var(--text-2xl); margin-bottom: 16px; } .product-price { font-size: 1.8rem; margin-bottom: 20px; } } /* ============================================================ SEÇÃO 7: ACESSIBILIDADE — Movimento Reduzido ============================================================ Por quê? Alguns usuários sofrem de enjoo ou desconforto com animações (vestibular disorders). A media query prefers-reduced-motion respeita a preferência do sistema operacional do usuário e desativa todas as animações. Isso é requisito WCAG 2.1 nível AAA (critério 2.3.3). ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }