/* ========================================================================== Florismar Júnior 35222 — complementos da campanha 1. Mini player flutuante do jingle 2. Seção "Materiais da campanha" (flyers para download) CSS próprio (prefixo .fj-) para não depender de utilitárias do Tailwind que possam não existir no build compilado. Reaproveita as variáveis de marca já definidas pelo tema do site, com fallback nos hexadecimais. ========================================================================== */ /* ========================================================================== 0. APELIDOS A PALETA em si está embutida no do index.html, para a página já nascer verde sem depender do carregamento deste arquivo. Aqui ficam só os apelidos curtos usados pelos componentes abaixo. ========================================================================== */ :root { --fj-royal: var(--color-verde, #12813a); --fj-profundo: var(--color-verde-escuro, #0b4a25); --fj-medio: var(--color-verde-medio, #2fa34b); --fj-claro: var(--color-verde-claro, #c2eacc); --fj-nevoa: var(--color-verde-nevoa, #e9f6ec); --fj-amarelo: var(--color-amarelo, #f7b32b); --fj-sombra: 0 8px 32px #0b4a251a; --fj-sombra-alta: 0 16px 44px #0b4a2529; --fj-transicao: cubic-bezier(.22, 1, .36, 1); } /* --- Pontos onde o azul estava cravado e não acompanha variável --- */ /* Gradiente do topo: o segundo ponto era um azul fixo (#7aaeea). */ .fundo-gradiente { background-image: linear-gradient(225deg, var(--color-verde) 0%, #4fbf63 14%, var(--color-verde-nevoa) 48%, var(--color-verde-nevoa) 68%, var(--color-amarelo-suave) 88%, var(--color-verde-limao) 100%); } /* Fundo névoa: a versão para navegadores sem color-mix trazia dois azuis fixos. A versão moderna já segue as variáveis. */ .fundo-nevoa { background-image: linear-gradient(225deg, #bce3c6 0%, var(--color-verde-nevoa) 42%, var(--color-verde-nevoa) 74%, #e2eecd 100%); } /* Brilho radial da seção do convite: aqui a cor está dentro do próprio nome da classe (valor arbitrário do Tailwind). É o único ponto do site que não tem como seguir variável nenhuma. */ .bg-\[radial-gradient\(closest-side\,rgba\(46\,113\,216\,0\.45\)\,rgba\(46\,113\,216\,0\)\)\] { background-image: radial-gradient(closest-side, rgba(47, 163, 75, .45), rgba(47, 163, 75, 0)); } /* Sombras: o tom base ficou preso como fallback de var(). */ .shadow-card { --tw-shadow: 0 8px 32px var(--tw-shadow-color, #0b4a251a); } .shadow-card-alta { --tw-shadow: 0 16px 44px var(--tw-shadow-color, #0b4a2529); } /* Os selos circulares e as estrelas trazem a cor como atributo do SVG. Atributo de apresentação perde para CSS, então basta mirar o valor antigo. */ svg [fill="#2E71D8"] { fill: var(--color-verde); } svg [fill="#1C3F7C"] { fill: var(--color-verde-escuro); } svg [stroke="#A9CCF2"] { stroke: var(--color-verde-claro); } /* Amarelo nas faixas decorativas — é o que dá a leitura verde-e-amarelo das artes. Restrito à faixa: a mesma classe de fundo é usada nos cards da seção "No que acredita", que devem continuar claros. */ .faixa-tiles .bg-azul-nevoa { background-color: var(--fj-amarelo); color: var(--color-verde-escuro); } /* ========================================================================== 1. MINI PLAYER FLUTUANTE Fica no canto inferior ESQUERDO — o botão do WhatsApp ocupa o direito. ========================================================================== */ .fj-player { position: fixed; left: 1.25rem; bottom: 1.25rem; z-index: 50; box-sizing: border-box; display: flex; align-items: center; gap: .5rem; padding: .5rem; border-radius: 1rem; background: var(--fj-royal); color: #fff; box-shadow: var(--fj-sombra-alta); font-family: var(--font-sans, system-ui, sans-serif); transition: border-radius .3s var(--fj-transicao), background-color .2s ease; } .fj-player[hidden] { display: none !important; } /* Recolhido: vira um círculo, só com o botão de ação. */ .fj-player[data-estado="recolhido"] { gap: 0; padding: 0; border-radius: 999px; } /* Entra em cena depois do hero, igual ao botão flutuante do WhatsApp. (a keyframe "fab-entra" já existe no CSS do site) */ @supports (animation-timeline: scroll()) { .fj-player { animation: fab-entra linear both; animation-timeline: scroll(root); animation-range: 55vh 85vh; } /* Enquanto estiver tocando ou aberto, permanece sempre visível — inclusive se a pessoa voltar ao topo da página. */ .fj-player.fj-fixo { animation: none; opacity: 1; visibility: visible; scale: 1; } } /* --- Botão redondo de ação (play / pause) --- */ .fj-player__acao { flex: 0 0 auto; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin: 0; padding: 0; border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; transition: background-color .2s ease; } .fj-player[data-estado="aberto"] .fj-player__acao { width: 2.75rem; height: 2.75rem; background: rgba(255, 255, 255, .16); } .fj-player__acao:hover { background: rgba(255, 255, 255, .26); } .fj-player__acao svg { width: 1.5rem; height: 1.5rem; fill: currentColor; pointer-events: none; } .fj-player[data-estado="aberto"] .fj-player__acao svg { width: 1.15rem; height: 1.15rem; } /* Alterna os ícones conforme o estado */ .fj-player__icone-pause, .fj-player[data-tocando="sim"] .fj-player__icone-play { display: none; } .fj-player[data-tocando="sim"] .fj-player__icone-pause { display: block; } /* Recolhido + tocando: mostra o equalizador no lugar do ícone */ .fj-player[data-estado="recolhido"][data-tocando="sim"] .fj-player__icone-pause { display: none; } .fj-player__barras { display: none; align-items: flex-end; gap: 3px; height: 1.15rem; pointer-events: none; } .fj-player[data-estado="recolhido"][data-tocando="sim"] .fj-player__barras { display: flex; } .fj-player__barras i { display: block; width: 3px; height: 100%; border-radius: 999px; background: currentColor; transform-origin: bottom; } @media (prefers-reduced-motion: no-preference) { .fj-player__barras i { animation: fj-equalizador .9s ease-in-out infinite; } .fj-player__barras i:nth-child(2) { animation-delay: .18s; } .fj-player__barras i:nth-child(3) { animation-delay: .36s; } } @keyframes fj-equalizador { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } } /* --- Corpo expansível (título + barra de progresso) --- */ .fj-player__corpo { display: grid; grid-template-columns: 0fr; opacity: 0; overflow: hidden; transition: grid-template-columns .3s var(--fj-transicao), opacity .2s ease; } .fj-player[data-estado="aberto"] .fj-player__corpo { grid-template-columns: 1fr; opacity: 1; } .fj-player__interno { min-width: 0; width: 13rem; overflow: hidden; padding-right: .25rem; } .fj-player__titulo { margin: 0; font-family: var(--font-display, sans-serif); font-weight: 700; font-size: .82rem; line-height: 1.2; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fj-player__sub { margin: .1rem 0 0; font-size: .68rem; line-height: 1.2; color: rgba(255, 255, 255, .72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fj-player__linha { display: flex; align-items: center; gap: .5rem; margin-top: .4rem; } .fj-player__tempo { flex: 0 0 auto; font-size: .65rem; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .78); } /* --- Barra de progresso (input range, acessível por teclado) --- */ .fj-player__seek { flex: 1 1 auto; min-width: 0; height: 1rem; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; } .fj-player__seek::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .3); } .fj-player__seek::-moz-range-track { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .3); } .fj-player__seek::-moz-range-progress { height: 4px; border-radius: 999px; background: #fff; } .fj-player__seek::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 11px; height: 11px; margin-top: -3.5px; border: 0; border-radius: 999px; background: #fff; } .fj-player__seek::-moz-range-thumb { width: 11px; height: 11px; border: 0; border-radius: 999px; background: #fff; } /* --- Controles pequenos: baixar e minimizar --- */ .fj-player__minimizar, .fj-player__baixar { flex: 0 0 auto; display: none; place-items: center; width: 1.75rem; height: 1.75rem; padding: 0; border: 0; border-radius: 999px; background: transparent; color: rgba(255, 255, 255, .7); text-decoration: none; cursor: pointer; -webkit-appearance: none; appearance: none; transition: background-color .2s ease, color .2s ease; } /* Só aparecem com o player aberto. */ .fj-player[data-estado="aberto"] .fj-player__minimizar, .fj-player[data-estado="aberto"] .fj-player__baixar { display: grid; } .fj-player__minimizar:hover, .fj-player__baixar:hover { background: rgba(255, 255, 255, .16); color: #fff; } .fj-player__minimizar svg, .fj-player__baixar svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; } .fj-player__minimizar svg { width: .85rem; height: .85rem; } .fj-player__baixar svg { width: .95rem; height: .95rem; stroke-width: 2; } /* Foco visível no mesmo padrão do site */ .fj-player__acao:focus-visible, .fj-player__minimizar:focus-visible, .fj-player__baixar:focus-visible, .fj-player__seek:focus-visible, .fj-btn:focus-visible { outline: 3px solid var(--fj-profundo); outline-offset: 3px; } /* Transição do deslocamento vertical do botão do WhatsApp. O shorthand repete as cores porque a utilitária "transition-colors" do Tailwind seria sobrescrita por completo. */ .fab-apos-hero { transition: bottom .3s var(--fj-transicao), background-color .2s ease, color .2s ease; } /* No mobile o player aberto ocupa quase toda a largura da tela e passaria por baixo do botão do WhatsApp. Quem sai da linha de baixo é o WhatsApp: o player permanece ancorado no rodapé. */ @media (max-width: 639px) { .fj-player-aberto .fab-apos-hero { bottom: 5.75rem; } .fj-player__interno { width: min(13rem, calc(100vw - 11rem)); } } /* ========================================================================== 2. SEÇÃO "MATERIAIS DA CAMPANHA" ========================================================================== */ .fj-materiais__grade { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 3rem; /* Cada card tem a altura da sua própria arte e encosta no rodapé da linha. Sem isto o grid estica todos até a altura do mais alto (align-items: stretch). */ align-items: center; } @media (min-width: 640px) { .fj-materiais__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } } @media (min-width: 1024px) { .fj-materiais__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 4rem; } } /* Banners panorâmicos ocupam duas colunas para não ficarem ilegíveis. */ @media (min-width: 640px) { .fj-flyer--largo { grid-column: span 2; } } .fj-flyer { display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; background: var(--fj-nevoa); box-shadow: var(--fj-sombra); transition: transform .3s ease, box-shadow .3s ease; } @media (hover: hover) { .fj-flyer:hover { transform: translateY(-4px); box-shadow: var(--fj-sombra-alta); } } /* Sem altura fixa: o card tem exatamente a altura da sua arte. A imagem ocupa toda a largura e a altura vem da proporção original, então nada é recortado nem ganha sobra. Cards de formatos diferentes ficam com alturas diferentes — é o comportamento desejado. */ .fj-flyer__capa { position: relative; overflow: hidden; /* Sem fundo: o gradiente verde vive no placeholder, logo abaixo. Aqui ele só conseguiria aparecer como uma faixa sob a imagem, por arredondamento de pixel na altura calculada. */ line-height: 0; } .fj-flyer__capa img { display: block; width: 100%; height: auto; transition: transform .5s ease; } @media (hover: hover) { .fj-flyer:hover .fj-flyer__capa img { transform: scale(1.05); } } /* Placeholder de marca exibido quando a imagem do flyer não carrega. Fica no fluxo normal e leva a proporção, dando altura à capa vazia. */ .fj-flyer__vazio { aspect-ratio: 4 / 5; display: grid; place-content: center; place-items: center; gap: .5rem; background: linear-gradient(135deg, var(--fj-royal), var(--fj-medio)); color: #fff; line-height: normal; text-align: center; } .fj-flyer__vazio span { font-family: var(--font-display, sans-serif); font-weight: 900; letter-spacing: -.045em; font-size: 2.25rem; line-height: .92; } .fj-flyer__vazio small { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .8); } .fj-flyer__conteudo { display: flex; flex: 1 1 auto; flex-direction: column; padding: 1.5rem; line-height: normal; } @media (min-width: 640px) { .fj-flyer__conteudo { padding: 1.75rem; } } .fj-flyer__titulo { margin: 0; font-family: var(--font-display, sans-serif); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; font-size: 1.25rem; color: var(--fj-profundo); } .fj-flyer__descricao { margin: .5rem 0 0; font-size: .95rem; line-height: 1.5; color: rgba(11, 74, 37, .72); } .fj-flyer__acoes { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: 1.5rem; } /* Card sem título nem descrição: os botões não precisam do respiro de cima. */ .fj-flyer__acoes:first-child { padding-top: 0; } /* --- Botões (mesmo desenho dos CTAs do site) --- */ .fj-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.75rem; padding: .75rem 1.25rem; border: 0; border-radius: .75rem; font-family: var(--font-display, sans-serif); font-weight: 700; font-size: .875rem; line-height: 1.25; letter-spacing: -.01em; text-align: center; text-decoration: none; cursor: pointer; box-shadow: var(--fj-sombra); transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease; } .fj-btn svg { flex: 0 0 auto; width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .fj-btn--principal { flex: 1 1 auto; background: var(--fj-royal); color: #fff; } .fj-btn--secundario { background: #fff; color: var(--fj-profundo); } @media (hover: hover) { .fj-btn--principal:hover { background: var(--fj-profundo); transform: translateY(-2px); box-shadow: var(--fj-sombra-alta); } .fj-btn--secundario:hover { background: var(--fj-claro); transform: translateY(-2px); box-shadow: var(--fj-sombra-alta); } } /* ========================================================================== 3. ENQUADRAMENTO DO MOSAICO "NAS RUAS E NAS ESTRADAS" As duas faixas baixas do mosaico ocupam 2 colunas por 1 linha de 11rem. Num container de 72rem isso dá uma caixa de ~3,2:1, enquanto as fotos são 1,6:1 — o object-fit: cover mostra só cerca de metade da altura. Com o padrão "center" essa metade sai do meio da foto e decepa as cabeças. Puxando o recorte para 6% do topo, a faixa visível passa a ir de ~3% a ~52% da imagem: pega os rostos e ainda alcança as camisas da campanha. Não há efeito no mobile: lá as figuras têm altura fixa de 13rem e a caixa fica em ~1,5:1, praticamente a proporção da foto, então não sobra altura para deslocar. O mesmo recurso já é usado pelo próprio site (object-[center_26%] e object-[center_35%] nas outras duas fotos da seção). Estas duas eram as únicas sem ajuste. ========================================================================== */ img[src="/fotos/aliancas.webp"], img[src="/fotos/caminhoneiros-camisa-2.webp"] { object-position: center 6% !important; }