/* ================================================================ PADARIA FLOR DO TÂMEGA — style.css PARTE 1: Variáveis CSS · Tipografia · Paleta · Reset · Base ---------------------------------------------------------------- Estrutura deste ficheiro: 1. Google Fonts Import 2. Variáveis CSS (:root) — paleta centralizada 3. Reset e normalização 4. Base global (body, html, scroll) 5. Tipografia (headings, parágrafos, listas) 6. Links e estados de foco (WCAG 2.4.7) 7. Skip Link de acessibilidade (WCAG 2.4.1) 8. Imagens e média 9. Utilitários de layout e espaçamento 10. Animações e transições globais ================================================================ */ /* ================================================================ 1. GOOGLE FONTS — Cinzel + Cormorant Garamond ---------------------------------------------------------------- Cinzel → Títulos, navbar, botões, labels Evoca classicismo e elegância artesanal Cormorant Garamond → Corpo de texto, citações, descrições Refinamento editorial, leitura confortável ================================================================ */ /* Google Fonts já é carregado via no de cada página (mais rápido que @import) */ /* ================================================================ 2. VARIÁVEIS CSS — Paleta Centralizada no :root ---------------------------------------------------------------- COMO USAR: Altera o valor aqui → muda em todo o site. Nunca usa cores hardcoded fora deste bloco. ================================================================ */ :root { /* ── CORES PRINCIPAIS ──────────────────────────────────────── */ /* Vermelho Bordô — cor de identidade, CTAs, destaques */ --cor-primaria: #8B1A1A; /* Bordô mais escuro — hover e estados activos */ --cor-primaria-hover: #6B1212; /* Bordô muito claro — fundos de badges, alertas suaves */ --cor-primaria-claro: #F9EAEA; /* Dourado Trigo — evoca pão artesanal, ornamentos, ícones */ --cor-dourado: #C8A96A; /* Dourado suave — fundos de secções, bordas, separadores */ --cor-dourado-claro: #E8D5A3; /* Dourado muito claro — hover de elementos dourados */ --cor-dourado-hover: #B8924A; /* ── TONS DE FUNDO ─────────────────────────────────────────── */ /* Creme principal — fundo geral da página */ --cor-creme: #FAF6EF; /* Creme escuro — secções alternadas, fundos de cards */ --cor-creme-escuro: #F0E8D8; /* Creme médio — hover em cards, inputs focus */ --cor-creme-medio: #E8DCC8; /* Castanho escuro profundo — footer, secções escuras */ --cor-fundo-escuro: #1A0A05; /* Castanho médio — navbar, fundos intermédios */ --cor-fundo-medio: #3D2B1F; /* Castanho claro — superfícies elevadas sobre fundo escuro */ --cor-fundo-elevado: #5A3D2B; /* ── CORES DE TEXTO ────────────────────────────────────────── */ /* Castanho muito escuro — texto principal sobre fundos claros */ /* Contraste WCAG AAA (≥7:1) sobre --cor-creme */ --cor-texto: #2C1810; /* Castanho médio — texto secundário, legendas, metadados */ /* Contraste WCAG AA (≥4.5:1) sobre --cor-creme */ --cor-texto-suave: #6B5744; /* Castanho claro — placeholder, texto desactivado */ --cor-texto-discreto: #A08878; /* Branco — texto sobre fundos escuros */ --cor-texto-claro: #FFFFFF; /* Branco suavizado — texto secundário sobre fundos escuros */ --cor-texto-claro-suave: rgba(255, 255, 255, 0.72); /* ── BORDAS E SEPARADORES ──────────────────────────────────── */ /* Borda suave sobre fundos claros */ --cor-borda: #DDD0B8; /* Borda sobre fundos escuros */ --cor-borda-escura: rgba(200, 169, 106, 0.28); /* Borda de foco — sempre dourada para consistência visual */ --cor-foco: #C8A96A; /* ── SOMBRAS ───────────────────────────────────────────────── */ /* Sombra suave — cards em repouso */ --sombra-suave: 0 2px 12px rgba(44, 24, 16, 0.07), 0 1px 3px rgba(44, 24, 16, 0.05); /* Sombra média — cards em hover, dropdowns */ --sombra-media: 0 8px 32px rgba(44, 24, 16, 0.14), 0 2px 8px rgba(44, 24, 16, 0.08); /* Sombra forte — modais, elementos sobrepostos */ --sombra-forte: 0 20px 60px rgba(44, 24, 16, 0.22), 0 4px 16px rgba(44, 24, 16, 0.12); /* Sombra de texto — legibilidade sobre imagens */ --sombra-texto: 0 2px 8px rgba(0, 0, 0, 0.5); /* ── TIPOGRAFIA ────────────────────────────────────────────── */ /* Família para títulos, navbar, botões */ --fonte-titulo: 'Cinzel', 'Times New Roman', serif; /* Família para corpo de texto, parágrafos, descrições */ --fonte-corpo: 'Cormorant Garamond', 'Georgia', serif; /* Tamanho base — 18px para leitura confortável (WCAG AA) */ --tamanho-base: 1.125rem; /* Escala tipográfica modular (razão 1.25 — Major Third) */ --tamanho-xs: 0.75rem; /* 12px */ --tamanho-sm: 0.875rem; /* 14px */ --tamanho-md: 1rem; /* 16px */ --tamanho-lg: 1.25rem; /* 20px */ --tamanho-xl: 1.5625rem; /* 25px */ --tamanho-2xl: 1.953rem; /* 31px */ --tamanho-3xl: 2.441rem; /* 39px */ --tamanho-4xl: 3.052rem; /* 49px */ --tamanho-5xl: 3.815rem; /* 61px */ /* Altura de linha */ --altura-linha-titulo: 1.2; --altura-linha-corpo: 1.85; /* ── ESPAÇAMENTOS ──────────────────────────────────────────── */ /* Espaçamento interno padrão de secções */ --secao-padding-v: 5rem; --secao-padding-h: 1.5rem; /* Espaçamento entre secção e título */ --titulo-margem: 3rem; /* Espaçamento de grelha (complementa Bootstrap gutter) */ --gap-sm: 0.75rem; --gap-md: 1.5rem; --gap-lg: 2.5rem; --gap-xl: 4rem; /* ── GEOMETRIA ─────────────────────────────────────────────── */ /* Raio de borda — consistência em toda a UI */ --raio-sm: 2px; --raio-md: 4px; --raio-lg: 8px; --raio-pill: 50px; /* ── TRANSIÇÕES ────────────────────────────────────────────── */ /* Transição padrão — suave, sem ser lenta */ --transicao: all 0.28s ease; /* Transição rápida — hover em links de texto */ --transicao-rapida: all 0.15s ease; /* Transição lenta — animações de entrada */ --transicao-lenta: all 0.55s cubic-bezier(0.16, 1, 0.3, 1); /* ── Z-INDEX (camadas) ─────────────────────────────────────── */ --z-base: 1; --z-elevado: 10; --z-overlay: 100; --z-navbar: 1000; --z-modal: 5000; --z-topo: 9999; } /* ================================================================ 3. RESET E NORMALIZAÇÃO ---------------------------------------------------------------- Complementa o reset do Bootstrap sem conflitar com ele. Garante comportamento previsível em todos os browsers. ================================================================ */ /* Box-sizing universal — inclui padding e border na largura */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Remove margin do body adicionado por browsers por defeito */ body { margin: 0; } /* Imagens e vídeos — nunca ultrapassam o container */ img, video, picture, canvas, svg { display: block; max-width: 100%; } /* Inputs herdam tipografia do pai (Bootstrap já faz, mas garante) */ input, button, textarea, select { font: inherit; } /* Evita overflow de texto em palavras longas — sem hifenização automática (evita cortes feios tipo "ARTESA-NAL") */ p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; hyphens: none; } /* Remove estilos de lista quando usada para navegação */ ul[role='list'], ol[role='list'] { list-style: none; } /* Remove animações para utilizadores que preferem menos movimento */ /* [WCAG 2.3.3] — Respeita preferência do sistema operativo */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ================================================================ 4. BASE GLOBAL — html, body, scroll ================================================================ */ /* Scroll suave — botões âncora internos */ html { scroll-behavior: smooth; /* Compensar navbar fixa ao fazer scroll para âncora */ scroll-padding-top: 80px; /* Tamanho base: 1rem = 16px (padrão browser) */ font-size: 16px; /* Evitar zoom automático em iOS ao focar inputs */ -webkit-text-size-adjust: 100%; } body { /* Cor de fundo global */ background-color: var(--cor-creme); /* Cor de texto global */ color: var(--cor-texto); /* Tipografia base */ font-family: var(--fonte-corpo); font-size: var(--tamanho-base); font-weight: 300; line-height: var(--altura-linha-corpo); /* Renderização de texto — melhor nitidez */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* Evitar barra de scroll horizontal */ overflow-x: hidden; /* Cor de seleção de texto — harmoniosa com a marca */ } /* Cor de seleção de texto */ ::selection { background-color: var(--cor-dourado-claro); color: var(--cor-texto); } /* Scrollbar personalizada — browsers Webkit (Chrome, Safari, Edge) */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--cor-creme-escuro); } ::-webkit-scrollbar-thumb { background: var(--cor-dourado); border-radius: var(--raio-pill); } ::-webkit-scrollbar-thumb:hover { background: var(--cor-dourado-hover); } /* ================================================================ 5. TIPOGRAFIA — Headings, Parágrafos, Listas, Citações ================================================================ */ /* ── Headings — todos usam Cinzel ────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-family: var(--fonte-titulo); font-weight: 600; line-height: var(--altura-linha-titulo); color: var(--cor-texto); letter-spacing: 0.02em; /* Espaçamento inferior padrão */ margin-bottom: 0.75em; } /* H1 — único por página, palavra-chave principal [SEO] */ h1 { font-size: clamp(var(--tamanho-3xl), 6vw, var(--tamanho-5xl)); font-weight: 700; letter-spacing: 0.01em; } /* H2 — título de secção, contém palavra-chave secundária [SEO] */ h2 { font-size: clamp(var(--tamanho-2xl), 4vw, var(--tamanho-4xl)); font-weight: 600; } /* H3 — título de subsecção ou card */ h3 { font-size: clamp(var(--tamanho-xl), 2.5vw, var(--tamanho-2xl)); font-weight: 600; } /* H4 — label de secção, categoria */ h4 { font-size: var(--tamanho-lg); font-weight: 600; letter-spacing: 0.06em; } /* H5 e H6 — raramente usados, mas definidos para consistência */ h5 { font-size: var(--tamanho-md); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } h6 { font-size: var(--tamanho-sm); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } /* ── Parágrafo ───────────────────────────────────────────────── */ p { font-family: var(--fonte-corpo); font-size: var(--tamanho-base); font-weight: 300; line-height: var(--altura-linha-corpo); color: var(--cor-texto-suave); margin-bottom: 1.25rem; } /* Último parágrafo de um bloco — sem margem inferior */ p:last-child { margin-bottom: 0; } /* ── Texto em destaque / lead ────────────────────────────────── */ .texto-lead { font-family: var(--fonte-corpo); font-size: clamp(var(--tamanho-lg), 2vw, var(--tamanho-xl)); font-weight: 300; font-style: italic; color: var(--cor-texto-suave); line-height: 1.7; } /* ── Label de categoria (ex: "Padaria", "Pastelaria") ────────── */ .label-categoria { font-family: var(--fonte-titulo); font-size: var(--tamanho-xs); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cor-primaria); display: block; margin-bottom: 0.4rem; } /* ── Citação (blockquote) ────────────────────────────────────── */ blockquote { font-family: var(--fonte-corpo); font-size: var(--tamanho-xl); font-style: italic; font-weight: 300; color: var(--cor-texto-suave); border-left: 3px solid var(--cor-dourado); padding: 1rem 0 1rem 1.75rem; margin: 1.5rem 0; line-height: 1.7; } /* ── Texto pequeno e metadados ───────────────────────────────── */ small, .texto-pequeno { font-family: var(--fonte-corpo); font-size: var(--tamanho-sm); font-weight: 300; color: var(--cor-texto-discreto); } /* ── Texto em destaque forte ─────────────────────────────────── */ strong, b { font-weight: 600; color: var(--cor-texto); } /* ── Itálico editorial ───────────────────────────────────────── */ em, i { font-style: italic; } /* ── Listas ──────────────────────────────────────────────────── */ ul, ol { font-family: var(--fonte-corpo); font-size: var(--tamanho-base); color: var(--cor-texto-suave); padding-left: 1.5rem; margin-bottom: 1.25rem; } li { margin-bottom: 0.4rem; line-height: var(--altura-linha-corpo); } /* ── Título de secção — componente reutilizável ──────────────── */ /* Wrapper de cabeçalho de secção */ .cabecalho-secao { text-align: center; margin-bottom: var(--titulo-margem); } /* Ornamento decorativo acima do título */ .ornamento { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-bottom: 1.25rem; } .ornamento::before, .ornamento::after { content: ''; display: block; width: 56px; height: 1px; background: linear-gradient( to var(--dir, right), var(--cor-dourado), transparent ); } .ornamento::before { --dir: right; } .ornamento::after { --dir: left; } .ornamento-icone { color: var(--cor-dourado); font-size: var(--tamanho-sm); } /* Título de secção */ .titulo-secao { font-family: var(--fonte-titulo); font-size: clamp(var(--tamanho-2xl), 3.5vw, var(--tamanho-4xl)); font-weight: 700; color: var(--cor-texto); letter-spacing: 0.03em; line-height: 1.2; margin-bottom: 0.5rem; } /* Versão do título para fundos escuros */ .titulo-secao--claro { color: var(--cor-texto-claro); } /* Dourado no título — palavra em destaque */ .titulo-secao .destaque { color: var(--cor-dourado); } /* Subtítulo de secção */ .subtitulo-secao { font-family: var(--fonte-corpo); font-size: clamp(var(--tamanho-md), 2vw, var(--tamanho-lg)); font-style: italic; font-weight: 300; color: var(--cor-texto-suave); line-height: 1.7; max-width: 560px; margin: 0 auto; } .subtitulo-secao--claro { color: var(--cor-texto-claro-suave); } /* ================================================================ 6. LINKS E ESTADOS DE FOCO (WCAG 2.4.7) ---------------------------------------------------------------- Todos os elementos interactivos têm estado :focus-visible visível e consistente. Nunca se remove o outline sem alternativa. ================================================================ */ /* Link base */ a { color: var(--cor-primaria); text-decoration: underline; text-underline-offset: 3px; transition: var(--transicao-rapida); } /* Hover */ a:hover { color: var(--cor-primaria-hover); text-decoration: underline; } /* [WCAG 2.4.7] Foco visível — outline dourado consistente */ /* Aplica-se a TODOS os elementos focáveis via teclado */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--cor-foco); outline-offset: 3px; border-radius: var(--raio-sm); /* Remove outline padrão do browser apenas quando existe o nosso */ outline-color: var(--cor-foco); } /* Remove outline apenas quando NÃO há navegação por teclado */ /* (i.e., clique com rato — :focus mas não :focus-visible) */ a:focus:not(:focus-visible) { outline: none; } /* Link de navegação — sem sublinhado (override para navbar e footer) */ .link-sem-sublinhado, .link-sem-sublinhado:hover { text-decoration: none; } /* ================================================================ 7. SKIP LINK — Acessibilidade por teclado (WCAG 2.4.1) ---------------------------------------------------------------- Primeiro elemento interactivo do . Invisível visualmente até receber foco com tecla Tab. Permite utilizadores de teclado/leitor de ecrã saltar a navbar. ================================================================ */ .skip-link { /* Posicionado fora do viewport — invisível por defeito */ position: absolute; top: -9999px; left: 1rem; z-index: var(--z-topo); /* Estilo visual quando visível */ background: var(--cor-primaria); color: var(--cor-texto-claro); font-family: var(--fonte-titulo); font-size: var(--tamanho-sm); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; padding: 0.75rem 1.5rem; border-radius: var(--raio-md); box-shadow: var(--sombra-media); transition: top 0.2s ease; } /* Aparece quando recebe foco */ .skip-link:focus { top: 1rem; outline: 3px solid var(--cor-dourado); outline-offset: 3px; } /* ================================================================ 8. IMAGENS E MÉDIA ================================================================ */ /* Imagem responsiva base */ img { display: block; max-width: 100%; height: auto; /* Evita shift de layout enquanto carrega */ aspect-ratio: attr(width) / attr(height); } /* Imagem com ratio fixo — para cards de produto */ .img-cover { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Placeholder de imagem — quando a foto real não está disponível */ .img-placeholder { background: linear-gradient( 135deg, var(--cor-creme-escuro) 0%, var(--cor-dourado-claro) 100% ); display: flex; align-items: center; justify-content: center; color: var(--cor-dourado); font-size: 3rem; } /* ================================================================ 9. UTILITÁRIOS DE LAYOUT E ESPAÇAMENTO ================================================================ */ /* Secção padrão — padding vertical generoso */ .secao { padding: var(--secao-padding-v) 0; } /* Versão compacta — para secções mais pequenas */ .secao--compacta { padding: calc(var(--secao-padding-v) * 0.6) 0; } /* Fundos de secção */ .fundo-creme { background-color: var(--cor-creme); } .fundo-creme-escuro { background-color: var(--cor-creme-escuro); } .fundo-escuro { background-color: var(--cor-fundo-escuro); } .fundo-medio { background-color: var(--cor-fundo-medio); } /* Divisor ornamental horizontal */ .divisor { border: none; height: 1px; background: linear-gradient( to right, transparent, var(--cor-borda), transparent ); margin: var(--gap-lg) 0; } /* Divisor dourado — mais impactante */ .divisor--dourado { background: linear-gradient( to right, transparent, var(--cor-dourado), transparent ); height: 1px; border: none; margin: var(--gap-lg) 0; } /* Badge genérico de credencial */ .badge-marca { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(200, 169, 106, 0.1); border: 1px solid var(--cor-borda-escura); color: var(--cor-dourado); font-family: var(--fonte-titulo); font-size: var(--tamanho-xs); letter-spacing: 0.18em; text-transform: uppercase; padding: 0.4rem 1rem; border-radius: var(--raio-pill); } /* Container máximo para texto — legibilidade ideal */ .container-leitura { max-width: 680px; margin-left: auto; margin-right: auto; } /* ================================================================ 10. ANIMAÇÕES E TRANSIÇÕES GLOBAIS ================================================================ */ /* Fade In de baixo para cima — usado com Intersection Observer */ .fade-in-up { opacity: 0; transform: translateY(32px); transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1); } /* Estado activo — quando o elemento entra no viewport */ .fade-in-up.visivel { opacity: 1; transform: translateY(0); } /* Delay sequencial para grupos de cards */ .fade-in-up:nth-child(1) { transition-delay: 0s; } .fade-in-up:nth-child(2) { transition-delay: 0.1s; } .fade-in-up:nth-child(3) { transition-delay: 0.2s; } .fade-in-up:nth-child(4) { transition-delay: 0.3s; } /* Fade simples — para elementos de overlay */ .fade-in { opacity: 0; transition: opacity 0.5s ease; } .fade-in.visivel { opacity: 1; } /* Pulse — animação de destaque para CTA secundário */ @keyframes pulse-suave { 0%, 100% { box-shadow: 0 0 0 0 rgba(200, 169, 106, 0); } 50% { box-shadow: 0 0 0 8px rgba(200, 169, 106, 0.2); } } .pulse { animation: pulse-suave 2.5s ease-in-out infinite; } /* Float — indicador de scroll no hero */ @keyframes flutuar { 0%, 100% { transform: translateY(0); opacity: 0.6; } 50% { transform: translateY(7px); opacity: 1; } } .flutuar { animation: flutuar 2.2s ease-in-out infinite; } /* Linha de carregamento — top do documento (opcional) */ @keyframes carregar { from { width: 0%; } to { width: 100%; } } /* ================================================================ FIM DE style.css Próximo ficheiro: bootstrap-overrides.css (Parte 2) ================================================================ */