/* ========================================================================== Haras Lucchese — site público (MVP) Estilo rural sofisticado, institucional. Mobile-first. Sem dependências externas (fontes do sistema). ========================================================================== */ /* -------------------------------------------------------------------------- Tokens de cor (paleta azul-marinho + dourado). Tema "light" é o padrão; "dark" fica disponível caso um toggle defina . -------------------------------------------------------------------------- */ :root, :root[data-theme="light"] { color-scheme: light; --text-50: #e9f1fb; --text-100: #d3e2f8; --text-200: #a8c6f0; --text-300: #7ca9e9; --text-400: #518de1; --text-500: #2570da; --text-600: #1e5aae; --text-700: #164383; --text-800: #0f2d57; --text-900: #07162c; --text-950: #040b16; --background-50: #eef3f6; --background-100: #dde7ee; --background-200: #bbcedd; --background-300: #99b6cc; --background-400: #779dbb; --background-500: #5585aa; --background-600: #446a88; --background-700: #335066; --background-800: #223544; --background-900: #111b22; --background-950: #090d11; --primary-50: #eef2f7; --primary-100: #dde5ee; --primary-200: #bacade; --primary-300: #98b0cd; --primary-400: #7595bd; --primary-500: #537bac; --primary-600: #42628a; --primary-700: #324a67; --primary-800: #213145; --primary-900: #111922; --primary-950: #080c11; --secondary-50: #fbf6ea; --secondary-100: #f6edd5; --secondary-200: #eedcaa; --secondary-300: #e5ca80; --secondary-400: #dcb856; --secondary-500: #d4a72b; --secondary-600: #a98523; --secondary-700: #7f641a; --secondary-800: #554311; --secondary-900: #2a2109; --secondary-950: #151104; --accent-50: #edf2f7; --accent-100: #dce5ef; --accent-200: #b8cae0; --accent-300: #95b0d0; --accent-400: #7195c1; --accent-500: #4e7bb1; --accent-600: #3e628e; --accent-700: #2f4a6a; --accent-800: #1f3147; --accent-900: #101923; --accent-950: #080c12; } :root[data-theme="dark"] { color-scheme: dark; --text-50: #040b16; --text-100: #07162c; --text-200: #0f2d57; --text-300: #164383; --text-400: #1e5aae; --text-500: #2570da; --text-600: #518de1; --text-700: #7ca9e9; --text-800: #a8c6f0; --text-900: #d3e2f8; --text-950: #e9f1fb; --background-50: #090d11; --background-100: #111b22; --background-200: #223544; --background-300: #335066; --background-400: #446a88; --background-500: #5585aa; --background-600: #779dbb; --background-700: #99b6cc; --background-800: #bbcedd; --background-900: #dde7ee; --background-950: #eef3f6; --primary-50: #080d11; --primary-100: #111922; --primary-200: #223244; --primary-300: #324c67; --primary-400: #436589; --primary-500: #547eab; --primary-600: #7698bc; --primary-700: #98b2cd; --primary-800: #bbcbdd; --primary-900: #dde5ee; --primary-950: #eef2f7; --secondary-50: #151104; --secondary-100: #2a2109; --secondary-200: #554311; --secondary-300: #7f641a; --secondary-400: #a98523; --secondary-500: #d4a72b; --secondary-600: #dcb856; --secondary-700: #e5ca80; --secondary-800: #eedcaa; --secondary-900: #f6edd5; --secondary-950: #fbf6ea; --accent-50: #080c12; --accent-100: #101923; --accent-200: #1f3147; --accent-300: #2f4a6a; --accent-400: #3e628e; --accent-500: #4e7bb1; --accent-600: #7195c1; --accent-700: #95b0d0; --accent-800: #b8cae0; --accent-900: #dce5ef; --accent-950: #edf2f7; } :root { /* Paleta da marca Haras Lucchese azul escuro #1a283d · azul claro #00306d · dourado escuro #c59416 · dourado claro #dda83c */ --verde-escuro: #1a283d; /* azul mais escuro: headings, seções escuras, rodapé */ --verde: #00306d; /* azul mais claro: botões, links, preços (hover -> escuro) */ --verde-claro: #00306d; /* azul de apoio */ --creme: #f8f5f0; /* fundo da página */ --creme-escuro: #ece4d6; /* fundo alternado / bordas */ --dourado: #c59416; /* dourado mais escuro: sobre fundo claro */ --dourado-claro: #dda83c; /* dourado mais claro: sobre fundo escuro */ --texto: #1a1a1a; /* texto */ --texto-suave: #5b6470; /* texto secundário */ --branco: #ffffff; --preto-suave: #1a1a1a; /* Tipografia (sem fontes externas) */ --serif: "Libre Caslon Text", Georgia, "Times New Roman", serif; --sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Layout */ --container: 1140px; --raio: 6px; --sombra: 0 6px 24px rgba(7, 22, 44, 0.14); --sombra-suave: 0 2px 10px rgba(7, 22, 44, 0.10); --transicao: 0.25s ease; } /* Fontes auto-hospedadas (sem dependência externa) --------------------------*/ /* Títulos: Libre Caslon Text · Corpo/labels: Hanken Grotesk. Subset latino (acentos PT). */ @font-face { font-family: "Libre Caslon Text"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/LibreCaslonText-400.woff2") format("woff2"); } @font-face { font-family: "Libre Caslon Text"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/LibreCaslonText-700.woff2") format("woff2"); } @font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 300; font-display: swap; src: url("/assets/fonts/HankenGrotesk-300.woff2") format("woff2"); } @font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/HankenGrotesk-400.woff2") format("woff2"); } @font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/HankenGrotesk-500.woff2") format("woff2"); } @font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/HankenGrotesk-600.woff2") format("woff2"); } @font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/HankenGrotesk-700.woff2") format("woff2"); } /* Reset leve ----------------------------------------------------------------*/ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--sans); color: var(--texto); background: var(--creme); line-height: 1.65; font-size: 17px; } img { max-width: 100%; height: auto; display: block; } a { color: var(--verde); text-decoration: none; } a:hover { color: var(--dourado); } h1, h2, h3, h4 { font-family: var(--serif); line-height: 1.18; color: var(--verde-escuro); font-weight: 400; letter-spacing: 0; } h1 { font-size: 2.75rem; margin: 0 0 .4em; } h2 { font-size: 2.2rem; margin: 0 0 .45em; } h3 { font-size: 1.5rem; margin: 0 0 .3em; } p { margin: 0 0 1em; } /* Utilitários ---------------------------------------------------------------*/ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; } /* Ritmo vertical mobile-first: no celular o respiro é menor (menos rolagem); tablet/desktop recuperam a folga generosa nas media queries abaixo. */ .section { padding: 52px 0; } /* Seção com respiro maior — usada nos blocos institucionais/CTA */ .section--lg { padding: 64px 0; } .section--alt { background: var(--creme-escuro); } .section--dark { background: var(--verde-escuro); color: var(--creme); } .section--dark h2, .section--dark h3 { color: var(--branco); } .text-center { text-align: center; } .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; } .eyebrow { display: inline-block; font-family: var(--sans); text-transform: uppercase; letter-spacing: .18em; font-size: .72rem; font-weight: 700; color: var(--dourado); margin-bottom: .6em; } .lead { font-size: 1.15rem; color: var(--texto-suave); max-width: 62ch; } .section .lead.text-center { margin-left: auto; margin-right: auto; } /* Botões --------------------------------------------------------------------*/ .btn { display: inline-flex; align-items: center; gap: .5em; font-family: var(--sans); font-weight: 600; font-size: .98rem; padding: 13px 26px; border-radius: var(--raio); border: 2px solid transparent; cursor: pointer; transition: var(--transicao); line-height: 1.1; } /* WhatsApp na paleta da marca: o ícone identifica o canal, não a cor. (Verde #25d366 é a cor do WhatsApp, não do Haras.) */ .btn--wa { background: var(--verde-escuro); color: #fff; } .btn--wa:hover { background: var(--dourado); color: var(--verde-escuro); } .btn--primary { background: var(--verde); color: #fff; } .btn--primary:hover { background: var(--verde-escuro); color: #fff; } .btn--ghost { background: transparent; color: var(--verde); border-color: var(--verde); } .btn--ghost:hover { background: var(--verde); color: #fff; } .btn--light { background: var(--creme); color: var(--verde-escuro); } .btn--light:hover { background: var(--branco); } .btn--block { width: 100%; justify-content: center; } .btn svg { width: 1.1em; height: 1.1em; fill: currentColor; } /* Cabeçalho -----------------------------------------------------------------*/ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(26, 40, 61, 0.97); backdrop-filter: saturate(140%) blur(6px); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 78px; } .brand { display: inline-flex; align-items: center; transition: var(--transicao); } .brand:hover { opacity: .85; } .brand-logo { height: 52px; width: auto; display: block; } .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 10px; background: transparent; border: 0; cursor: pointer; } .nav-toggle span { display: block; height: 2px; background: var(--branco); transition: var(--transicao); } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .site-nav { display: none; } .site-nav a { display: block; font-family: var(--sans); font-weight: 300; letter-spacing: .01em; color: var(--branco); padding: 12px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .site-nav a:hover, .site-nav a.active { color: var(--dourado-claro); } .site-nav.is-open { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--verde-escuro); padding: 8px 20px 16px; box-shadow: var(--sombra-suave); } /* Botão de contato no menu — contorno dourado */ .site-nav a.nav-cta { color: var(--dourado-claro); background: transparent; border: 1px solid var(--dourado-claro); border-radius: 4px; text-align: center; font-weight: 400; } .site-nav a.nav-cta:hover, .site-nav a.nav-cta.active { color: var(--verde-escuro); background: var(--dourado-claro); border-color: var(--dourado-claro); } /* Hero limpo (imagem full-bleed) -------------------------------------------*/ .hero { position: relative; height: 82vh; /* fallback p/ navegadores sem dvh */ height: 82dvh; /* mobile: acompanha a barra do navegador que aparece/some */ min-height: 440px; max-height: 880px; background: var(--creme-escuro); overflow: hidden; } .hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* gradiente inferior sutil, só para legibilidade da seta de scroll */ /* Véu inferior: garante leitura do slogan e da seta sobre fotos claras (céu/grama). Usa o navy da marca, não um preto genérico. */ .hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 230px; background: linear-gradient(to top, rgba(26,40,61,.78), rgba(26,40,61,0)); pointer-events: none; z-index: 1; } /* Vídeo de fundo (injetado por JS quando HARAS.heroVideo estiver ativo). Sobrepõe a foto, que permanece como poster/fallback. */ .hero__video { z-index: 1; } /* Slogan discreto no canto — a marca fala sem competir com a foto */ .hero__slogan { position: absolute; left: 0; right: 0; bottom: 76px; z-index: 2; text-align: center; font-family: var(--sans); font-weight: 700; text-transform: uppercase; letter-spacing: .28em; font-size: .78rem; color: var(--dourado-claro); text-shadow: 0 1px 12px rgba(26, 40, 61, .55); } .hero__scroll { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 2; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: #fff; animation: heroBounce 2.2s ease-in-out infinite; } .hero__scroll svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; } .hero__scroll:hover { color: var(--dourado-claro); } @keyframes heroBounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 7px); } } /* Cards genéricos -----------------------------------------------------------*/ .grid { display: grid; gap: 24px; } .grid--2 { grid-template-columns: 1fr; } .grid--3 { grid-template-columns: 1fr; } /* Fileira de 4 (garanhões da home): 1 col -> 2 (720px) -> 4 (980px) */ .grid--4 { grid-template-columns: 1fr; } /* Em colunas de ~1/4 o nome do animal precisa de um corpo menor ("Mussolini da Pedra Verde" quebraria em 3 linhas no 1.5rem padrão) */ .grid--4 .card h3 { font-size: 1.3rem; } .card { background: transparent; border: 0; border-radius: 0; box-shadow: none; display: flex; flex-direction: column; transition: var(--transicao); } /* Card editorial: sem moldura, sem sombra, sem "levantar" no hover. A foto do animal é a protagonista; o texto respira embaixo dela. */ .card:hover { transform: none; box-shadow: none; } .card__media { aspect-ratio: 4 / 3; background: var(--creme-escuro); overflow: hidden; } .card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .card:hover .card__media img { transform: scale(1.03); } /* Animal ainda sem foto: a marca do haras segura o lugar sobre o creme. Sem zoom no hover — é um símbolo, não uma fotografia. */ .card__media--marca img { object-fit: contain; padding: 27%; opacity: .9; } .card:hover .card__media--marca img { transform: none; } .card__body { padding: 18px 0 0; display: flex; flex-direction: column; flex: 1; } .card__body h3 { margin-bottom: .15em; } /* Filiação (pai × mãe) — exibida abaixo do nome do animal */ .card__filiacao { font-size: .92rem; line-height: 1.4; color: var(--texto-suave); margin: 0 0 1.1em; padding-bottom: .9em; border-bottom: 1px solid var(--dourado); } .card__filiacao .x { color: var(--dourado); margin: 0 .3em; font-weight: 600; } /* Quando o card também mostra registro/ano (doadoras), o fio dourado desce para a linha do registro — o modificador tira o fio da filiação. */ .card__filiacao--sem-fio { border-bottom: 0; padding-bottom: 0; margin-bottom: .3em; } .card__registro { font-size: .8rem; color: var(--texto-suave); letter-spacing: .02em; margin: 0 0 1.1em; padding-bottom: .9em; border-bottom: 1px solid var(--dourado); } /* O site NÃO exibe preços: valores de cobertura sempre sob consulta pelo WhatsApp. (Os estilos .card__precos/.preco-* saíram junto com os preços — recupere no histórico do git se um dia voltarem.) */ .card .btn { margin-top: auto; } /* Time de Pista: nomes longos ("Habilidoso Atalum do Lucchese") ocupam 2 linhas e desalinham os fios dourados entre os cards da fileira. Reservar 2 linhas no título alinha filiação, fio e botão. Só em grade multi-coluna (>=720px). */ @media (min-width: 720px) { .grid--pista .card__body h3 { min-height: 2.36em; } } /* Galeria -------------------------------------------------------------------*/ .galeria-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .galeria-grid figure { margin: 0; background: transparent; } .galeria-grid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; transition: filter .4s ease; } .galeria-grid figure:hover img { filter: brightness(1.06) saturate(1.05); } .galeria-grid figure:hover figcaption { color: var(--dourado); } /* Item de vídeo: ocupa a largura toda da grade, 16:9 */ .galeria-grid .galeria-video { grid-column: 1 / -1; aspect-ratio: 16 / 9; background: #000; } .galeria-grid .galeria-video video { width: 100%; height: 100%; object-fit: cover; display: block; } .galeria-grid figcaption { font-size: .82rem; color: var(--texto-suave); padding: 10px 2px 0; background: transparent; letter-spacing: .02em; } /* Vídeos do Instagram (link-out) -------------------------------------------- Sem embed/tracking: cada card é um link que abre o reel no Instagram. Como não dá para puxar a capa do reel (API exige token), a capa é a marca do haras sobre o navy, com um botão de play. */ .reels-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 20px; margin-top: 32px; } .reel-card { display: block; text-decoration: none; color: var(--verde); } .reel-card__cover { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5; background: var(--verde-escuro); border-radius: var(--raio); overflow: hidden; } .reel-card__mark { width: 44%; height: auto; opacity: .92; transition: transform .4s ease; } .reel-card:hover .reel-card__mark { transform: scale(1.05); } /* botão de play — no canto, como indicador de vídeo */ .reel-card__play { position: absolute; right: 12px; bottom: 12px; width: 46px; height: 46px; border-radius: 50%; background: rgba(248, 245, 240, .94); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(7, 22, 44, .3); transition: var(--transicao); } .reel-card:hover .reel-card__play { background: var(--dourado-claro); } .reel-card__play svg { width: 18px; height: 18px; fill: var(--verde-escuro); margin-left: 3px; } .reel-card__meta { display: flex; align-items: center; gap: 7px; justify-content: center; margin-top: 12px; font-family: var(--sans); font-weight: 600; font-size: .95rem; } .reel-card:hover .reel-card__meta { color: var(--dourado); } .reel-card__ig { width: 17px; height: 17px; fill: currentColor; flex: none; } /* Vídeo em destaque (home) — mesma mecânica de link-out da galeria (LGPD: nada de embed/tracking), mas com FOTO real do animal como capa. */ .reel-card__cover--foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .reel-card:hover .reel-card__cover--foto img { transform: scale(1.03); } .destaque-video__grid { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); align-items: center; } .destaque-video__texto { max-width: 52ch; margin: 0 0 1em; } .destaque-video__nota { font-size: .84rem; color: var(--texto-suave); margin: 0; } .destaque-video .reel-card--destaque { max-width: 340px; } @media (min-width: 720px) { .destaque-video__grid { grid-template-columns: 55fr 45fr; gap: 56px; } .destaque-video .reel-card--destaque { justify-self: center; width: 100%; } } /* Blocos institucionais -----------------------------------------------------*/ /* "Nossa história" — bloco editorial: texto à esquerda, foto à direita. Hierarquia pretendida: título > texto > marco de 2025 > texto > assinatura > CTA. Mobile-first: coluna única, texto antes da foto (mesma ordem do HTML). */ .historia__grid { display: grid; gap: 28px; /* mobile: coluna única, texto e foto próximos (64px no desktop) */ grid-template-columns: minmax(0, 1fr); } .historia__conteudo { min-width: 0; } /* Mais respiro entre o microtítulo e o título (padrão do .eyebrow é menor) */ .historia__conteudo .eyebrow { margin-bottom: 1.1em; } .historia__titulo { font-size: 1.85rem; /* ~10% menor que antes: protagoniza sem dominar a foto */ line-height: 1.15; margin: 0 0 .7em; overflow-wrap: break-word; text-wrap: balance; /* evita palavra órfã na última linha; ignorado em navegador antigo */ } /* Linha confortável de leitura (medido via Range API): ~58-68 caracteres. */ .historia__texto { max-width: 58ch; margin: 0 0 1.15em; } /* Assinatura institucional — sem linha, sem aspas, sem itálico, sem caixa. Só a serifada em azul-marinho, discreta, fechando o texto. */ .historia__assinatura { font-family: var(--serif); font-size: 1.12rem; line-height: 1.4; color: var(--verde-escuro); margin: 1.5em 0 0; } /* CTA do plantel: sólido azul-marinho (era contorno, mas passava despercebido — o plantel completo é o principal destino a partir da home). */ .historia__cta { margin-top: 26px; padding: 14px 30px; /* um pouco maior que o CTA de contorno original */ border-radius: 4px; background: var(--verde-escuro); color: var(--creme); border-color: var(--verde-escuro); } .historia__cta:hover { background: var(--dourado); border-color: var(--dourado); color: var(--verde-escuro); } .historia__cta:focus-visible { outline: 2px solid var(--dourado); outline-offset: 3px; } .historia__cta-seta { margin-left: .1em; transition: transform var(--transicao); } .historia__cta:hover .historia__cta-seta { transform: translateX(3px); } /* Marco de 2025 — nota editorial no fluxo do texto. SEM card: sem fundo, sem borda-caixa, sem divisória vertical, sem sombra. Apenas um fio dourado curto (única aparição de dourado "estrutural" na coluna) marca o destaque. */ .marco { margin: 2.4em 0 2.1em; } .marco::before { content: ""; display: block; width: 40px; height: 2px; background: var(--dourado); margin-bottom: 18px; } .marco__ano { font-family: var(--serif); font-size: 1.5rem; line-height: 1; color: var(--dourado); margin: 0 0 .3em; } .marco__titulo { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; line-height: 1.28; color: var(--verde-escuro); margin: 0 0 .35em; text-wrap: balance; } .marco__detalhe { font-family: var(--sans); font-size: .98rem; line-height: 1.5; margin: 0; } .marco__animal { font-weight: 600; color: var(--verde-escuro); } .marco__prova { color: var(--texto-suave); white-space: nowrap; } /* Foto institucional — sem moldura, sem sombra, raio ≤ 4px, proporção preservada. Contida na coluna (não sangra) para leitura editorial, não de banner. */ .historia__media { margin: 0; } .historia__foto { width: 100%; aspect-ratio: 3 / 2; /* mesma proporção do arquivo: não distorce nem corta */ object-fit: cover; object-position: center; border-radius: 4px; } /* Legenda logo abaixo da foto — sem fio dourado, sem caixa. */ .historia__legenda { font-size: .84rem; line-height: 1.5; color: var(--texto-suave); margin: 12px 0 0; } /* Slot da composição futura: foto menor (Kamikaze em pista) sobreposta à institucional. Fica 100% dentro dos limites da foto — não estoura a tela. O correspondente está comentado no index.html. */ .historia__foto-secundaria { position: absolute; right: 16px; bottom: 16px; width: 38%; max-width: 190px; aspect-ratio: 3 / 4; object-fit: cover; border: 5px solid var(--creme); /* respiro contra a foto de baixo, sem sombra */ border-radius: 4px; } .cta-band { text-align: center; } .cta-band h2 { color: #fff; } /* Na faixa navy o botão padrão (também navy) sumiria — versão clara aqui */ .cta-band .btn--wa { background: var(--creme); color: var(--verde-escuro); } .cta-band .btn--wa:hover { background: var(--dourado-claro); color: var(--verde-escuro); } .cta-band p { color: rgba(255,255,255,.9); max-width: 56ch; margin-left: auto; margin-right: auto; } .cta-band .btn { margin-top: 1em; } /* Contato -------------------------------------------------------------------*/ .contato-grid { display: grid; gap: 20px; grid-template-columns: 1fr; } .contato-card { background: var(--branco); border: 1px solid var(--creme-escuro); border-radius: var(--raio); padding: 24px; box-shadow: var(--sombra-suave); } .contato-card h3 { margin-bottom: .3em; } .contato-card a { font-weight: 600; } /* Botão flutuante WhatsApp --------------------------------------------------*/ .wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 60; width: 58px; height: 58px; border-radius: 50%; background: var(--verde-escuro); color: var(--dourado-claro); border: 1px solid var(--dourado); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(26, 40, 61, .32); transition: var(--transicao); } .wa-float:hover { background: var(--dourado); color: var(--verde-escuro); transform: scale(1.06); } .wa-float svg { width: 30px; height: 30px; fill: #fff; } /* Rodapé --------------------------------------------------------------------*/ .site-footer { background: var(--verde-escuro); color: rgba(255,255,255,.85); padding: 44px 0 28px; } .footer-grid { display: grid; gap: 28px; grid-template-columns: 1fr; } /* Logo institucional completa (empilhada) — brilha aqui, onde há espaço vertical. É a versão OURO, pensada para fundo escuro (o navy dos "vazios" some no rodapé). */ .footer-logo { width: 160px; max-width: 62%; height: auto; margin: 0 0 18px; display: block; } .site-footer h4 { color: #fff; font-family: var(--serif); font-size: 1.05rem; margin: 0 0 .6em; } .site-footer a { color: var(--dourado-claro); } .site-footer a:hover { color: #fff; } .footer-nav a { display: block; padding: 3px 0; } .footer-bottom { border-top: 1px solid rgba(255,255,255,.14); margin-top: 28px; padding-top: 18px; font-size: .85rem; color: rgba(255,255,255,.6); display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; } /* 404 -----------------------------------------------------------------------*/ .erro-404 { text-align: center; padding: 90px 0; } /* o .lead tem max-width; fora de .section ele precisa centralizar por conta própria */ .erro-404 .lead { margin-left: auto; margin-right: auto; } .erro-404 .codigo { font-family: var(--sans); font-weight: 700; font-size: 5rem; color: var(--dourado); line-height: 1; margin: 0; } /* Skip link (acessibilidade) ------------------------------------------------*/ .skip-link { position: absolute; left: -999px; top: 0; background: var(--verde-escuro); color: #fff; padding: 10px 16px; z-index: 100; } .skip-link:focus { left: 0; color: #fff; } /* ========================================================================== Responsivo (tablet / desktop) ========================================================================== */ @media (min-width: 720px) { body { font-size: 18px; } h1 { font-size: 3.3rem; } h2 { font-size: 2.55rem; } /* Restaura o respiro vertical generoso a partir do tablet */ .section { padding: 72px 0; } .section--lg { padding: 104px 0; } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(2, 1fr); } .grid--4 { grid-template-columns: repeat(2, 1fr); } .galeria-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; } .contato-grid { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 2fr 1fr 1fr; } /* Ainda em coluna única aqui; título cresce um pouco (~10% menor que o antigo) */ .historia__titulo { font-size: 2.15rem; } } @media (min-width: 980px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } .contato-grid { grid-template-columns: repeat(3, 1fr); } .historia { padding: 100px 0; } .historia__titulo { font-size: 2.5rem; } /* ~10% menor que os 2.8rem antigos */ .site-header { position: sticky; } /* Header quase full-width (teto 1500px p/ não escancarar o vão em telas ultralargas): a logo encosta mais à esquerda e o menu se espalha até a direita — sem a sensação de dois blocos flutuando num container central. */ .site-header .container { max-width: 1500px; margin: 0 auto; padding-left: 32px; padding-right: 24px; } .nav-toggle { display: none; } /* Itens mais espaçados: o menu fica largo e "puxa" para perto da logo, reduzindo o vão vazio no meio. */ .site-nav { display: flex; gap: 22px; align-items: center; } .site-nav a { border-bottom: 0; padding: 8px 0; } .site-nav a.nav-cta { padding: 9px 20px; margin-left: 8px; } .site-nav.is-open { position: static; box-shadow: none; padding: 0; background: transparent; display: flex; } } /* Seção "Nossa história": duas colunas só a partir de 1140px — abaixo disso a coluna de texto (47%) ficaria estreita demais. Entre 980 e 1140 fica em coluna única com o texto limitado a 58ch (leitura confortável, ~64 car.). */ @media (min-width: 1140px) { .historia__grid { grid-template-columns: 47fr 53fr; /* fr divide o espaço já sem o gap: ratio exato */ gap: 56px; align-items: start; /* foto e legenda no topo, junto do título */ } /* Foto contida (não sangra) e alinhada à região do título; legenda logo abaixo dela. Sem banner: fotografia editorial com respiro em volta. */ .historia__media { margin-top: 44px; } } @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }