/* ===================================================================== FOOTER — configuração rápida Componente reutilizável (mesmo footer.css/footer.js de outros projetos). O que muda por projeto fica em footer-theme.css e no HTML. Tudo o que normalmente se mexe está neste bloco. Variáveis em :root (--ft-). ===================================================================== */ :root { /* ---------- LIMITES DE TAMANHO ---------- */ --ft-min-width: 0px; /* limite mínimo do FOOTER (0 = acompanha a tela). Não é aplicado ao body */ --ft-max-width: none; /* limite máximo do FOOTER (ex.: 1920px). "none" = acompanha a tela. Não é aplicado ao body */ --ft-container-max: 1180px; /* largura máxima do conteúdo interno */ --ft-gutter: 1.5rem; /* margem lateral mínima do conteúdo */ --ft-min-height: 320px; /* altura mínima do footer */ --ft-max-height: none; /* altura máxima (ex.: 900px). Com "none" o footer cresce conforme o conteúdo */ --ft-pad-top: clamp(3rem, 8vw, 5rem); /* respiro superior (fluido entre mobile e desktop) */ --ft-pad-bottom: clamp(1.5rem, 4vw, 2rem); /* respiro inferior */ /* ---------- CORES DO TEMA ---------- */ --ft-bg-top: #0d111b; /* topo do degradê de fundo */ --ft-bg-bottom: #07090f; /* base do degradê de fundo */ --ft-ink-rgb: 255 255 255; /* cor de "tinta" p/ bordas e cartões (branco no escuro, preto no claro) */ --ft-text: #e8ecf5; /* títulos e textos fortes */ --ft-muted: #8b93a7; /* textos e links normais */ --ft-hover: #ffffff; /* cor do link no hover */ --ft-accent-rgb: 139 92 246; /* cor de destaque principal (roxo) — 3 números R G B */ --ft-accent-2: #b79bff; /* destaque secundário (mais claro) */ --ft-on-accent: #ffffff; /* texto/ícone sobre a cor de destaque */ --ft-wa-rgb: 37 211 102; /* verde do WhatsApp — 3 números R G B */ --ft-wa-text: #06210f; /* texto do botão do WhatsApp */ /* ---------- FONTES ---------- */ --ft-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --ft-font-head: "Sora", var(--ft-font); } /* Derivadas (normalmente não precisa mexer). Ficam em .kd-footer para recalcular junto com variações como .kd-footer--light */ .kd-footer { --ft-accent: rgb(var(--ft-accent-rgb)); --ft-wa: rgb(var(--ft-wa-rgb)); --ft-surface: rgb(var(--ft-ink-rgb) / .04); --ft-border: rgb(var(--ft-ink-rgb) / .08); --ft-ease: cubic-bezier(.2, .8, .2, 1); } /* Variação de tema claro: adicione class="kd-footer kd-footer--light" */ .kd-footer--light { --ft-bg-top: #f6f5fb; --ft-bg-bottom: #ffffff; --ft-ink-rgb: 15 12 40; --ft-text: #17142b; --ft-muted: #5d6079; --ft-hover: #17142b; --ft-accent-rgb: 109 60 230; --ft-accent-2: #7c4dff; --ft-on-accent: #ffffff; } /* ===================================================================== OBSERVAÇÃO — FOOTER SEMPRE NO FINAL DA PÁGINA (sticky footer) Problema resolvido: em telas estreitas/baixas ou com pouco conteúdo, o footer ficava "subindo" e sobrava espaço vazio embaixo dele. Como funciona: o vira uma coluna com altura mínima da tela inteira e o footer usa margin-top:auto para ser empurrado ao final. Se a página for maior que a tela, o footer fica simplesmente após o conteúdo. O NÃO recebe limite de largura: ele acompanha a tela livremente (limitar o body fazia o site parar de crescer e quebrar). NÃO REMOVA estas regras ao copiar o footer para outras páginas (o "margin-top: auto" está em .kd-footer, logo abaixo). ===================================================================== */ /* Adicione class="kd-page" no (ou no wrapper raiz do app) */ .kd-page { display: flex; flex-direction: column; min-height: 100vh; /* fallback para navegadores antigos */ min-height: 100dvh; /* altura real da tela no mobile (considera a barra do navegador) */ } /* ===================================================================== OBSERVAÇÃO — BARRA DE ROLAGEM (scrollbar) COMBINANDO COM O TEMA ===================================================================== */ :root { --ft-scroll-track: var(--ft-bg-bottom); /* fundo da barra */ --ft-scroll-thumb: rgb(var(--ft-accent-rgb) / .55); /* "pegador" da barra */ } /* Opcional: adicione class="kd-scrollbar" no */ html.kd-scrollbar { scrollbar-width: thin; /* Chrome 121+, Firefox, Safari 18.2+ */ scrollbar-color: var(--ft-scroll-thumb) var(--ft-scroll-track); } /* Fallback para navegadores WebKit mais antigos */ html.kd-scrollbar::-webkit-scrollbar { width: 10px; height: 10px; } html.kd-scrollbar::-webkit-scrollbar-track { background: var(--ft-scroll-track); } html.kd-scrollbar::-webkit-scrollbar-thumb { background: var(--ft-scroll-thumb); border-radius: 999px; border: 2px solid var(--ft-scroll-track); } html.kd-scrollbar::-webkit-scrollbar-thumb:hover { background: rgb(var(--ft-accent-rgb) / .85); } /* ===================================================================== FOOTER — estrutura ===================================================================== */ .kd-footer, .kd-footer *, .kd-footer *::before, .kd-footer *::after { box-sizing: border-box; } .kd-footer { position: relative; overflow: hidden; width: 100%; min-width: var(--ft-min-width); max-width: var(--ft-max-width); min-height: var(--ft-min-height); max-height: var(--ft-max-height); margin-inline: auto; margin-top: auto; /* OBSERVAÇÃO: empurra o footer para o final da página (ver bloco "sticky footer" acima) */ padding: var(--ft-pad-top) 0 var(--ft-pad-bottom); background: linear-gradient(180deg, var(--ft-bg-top), var(--ft-bg-bottom)); color: var(--ft-muted); border-top: 1px solid var(--ft-border); font: 400 .95rem/1.6 var(--ft-font); -webkit-font-smoothing: antialiased; container-type: inline-size; /* RESPONSIVIDADE: os @container abaixo respondem à largura do footer */ } /* linha de destaque no topo */ .kd-footer::before { content: ""; position: absolute; top: 0; left: 50%; width: min(60%, 640px); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--ft-accent), transparent); } .kd-footer__glow { position: absolute; top: -220px; left: 50%; width: min(700px, 100%); height: 380px; transform: translateX(-50%); background: radial-gradient(closest-side, rgb(var(--ft-accent-rgb) / .16), transparent); pointer-events: none; } .kd-footer__container { position: relative; width: min(var(--ft-container-max), 100% - (var(--ft-gutter) * 2)); margin-inline: auto; } .kd-footer a { color: inherit; text-decoration: none; transition: color .25s, background .25s, border-color .25s; } .kd-footer ul { list-style: none; margin: 0; padding: 0; } .kd-footer img, .kd-footer svg { max-width: 100%; } /* ===== CTA ===== */ .kd-footer__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding: clamp(1.25rem, 4vw, 2.25rem) clamp(1rem, 4vw, 2.5rem); margin-bottom: clamp(2.5rem, 6vw, 4rem); border: 1px solid var(--ft-border); border-radius: 24px; background: linear-gradient(135deg, rgb(var(--ft-accent-rgb) / .12), rgb(var(--ft-ink-rgb) / .02) 55%), var(--ft-surface); backdrop-filter: blur(8px); } .kd-footer__cta > div { flex: 1 1 280px; min-width: 0; } .kd-footer__cta h2 { margin: 0 0 .4rem; font: 700 clamp(1.3rem, 2.4vw, 1.75rem)/1.25 var(--ft-font-head); color: var(--ft-text); } .kd-footer__cta p { margin: 0; } .kd-footer .kd-footer__btn { display: inline-flex; align-items: center; gap: .6rem; padding: .95rem 1.6rem; border-radius: 999px; font-weight: 600; white-space: nowrap; transition: transform .4s var(--ft-ease), box-shadow .4s; } .kd-footer .kd-footer__btn svg { width: 20px; height: 20px; fill: currentColor; flex: none; } .kd-footer .kd-footer__btn--wa { background: var(--ft-wa); color: var(--ft-wa-text); box-shadow: 0 10px 30px -10px rgb(var(--ft-wa-rgb) / .6); } .kd-footer .kd-footer__btn--wa:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 16px 34px -10px rgb(var(--ft-wa-rgb) / .8); } /* ===== Grade ===== */ .kd-footer__grid { display: grid; grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); gap: clamp(1.75rem, 4vw, 2.5rem) clamp(1rem, 3vw, 2.5rem); } .kd-footer__grid > * { min-width: 0; } .kd-footer__col a, .kd-footer__brand p { overflow-wrap: anywhere; } /* Marca */ .kd-footer .kd-footer__logo { display: inline-flex; align-items: center; gap: .75rem; color: var(--ft-text); } .kd-footer .kd-footer__logo-mark { width: 46px; height: 42px; display: block; flex: none; filter: drop-shadow(0 6px 16px rgb(var(--ft-accent-rgb) / .45)); } .kd-footer .kd-footer__logo-text { font: 700 clamp(1rem, 4vw, 1.2rem) var(--ft-font-head); } .kd-footer .kd-footer__logo-text span { color: var(--ft-accent-2); } .kd-footer__brand p { margin: 1.1rem 0 1.5rem; max-width: 34ch; } /* Redes sociais */ .kd-footer .kd-footer__social { display: flex; flex-wrap: wrap; gap: .65rem; } .kd-footer .kd-footer__social a { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--ft-border); background: var(--ft-surface); transition: transform .4s var(--ft-ease), box-shadow .4s, background .3s, border-color .3s, color .3s; } .kd-footer .kd-footer__social svg { width: 18px; height: 18px; fill: currentColor; transition: transform .4s var(--ft-ease); } .kd-footer .kd-footer__social a:hover { color: var(--ft-on-accent); background: linear-gradient(135deg, var(--ft-accent-2), var(--ft-accent)); border-color: transparent; transform: translateY(-4px); box-shadow: 0 12px 28px -8px rgb(var(--ft-accent-rgb) / .8), 0 0 0 4px rgb(var(--ft-accent-rgb) / .15); } .kd-footer .kd-footer__social a:hover svg { transform: scale(1.02); } /* Colunas */ .kd-footer__col h3 { margin: 0 0 1.25rem; font: 600 .8rem var(--ft-font-head); letter-spacing: .14em; text-transform: uppercase; color: var(--ft-text); } .kd-footer__col li + li { margin-top: .7rem; } .kd-footer__col a { position: relative; display: inline-flex; align-items: center; flex-wrap: wrap; gap: .25rem .5rem; padding: .1rem 0; transition: color .3s, text-shadow .3s; } /* sublinhado gradiente que "desenha" da esquerda para a direita */ .kd-footer__col a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: linear-gradient(90deg, var(--ft-accent), var(--ft-accent-2), transparent); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ft-ease); } .kd-footer__col a:hover, .kd-footer__col a:focus-visible { color: var(--ft-hover); text-shadow: 0 0 18px rgb(var(--ft-accent-rgb) / .75); } .kd-footer__col a:hover::after, .kd-footer__col a:focus-visible::after { transform: scaleX(1); } .kd-footer .kd-footer__link-strong { color: var(--ft-accent); font-weight: 600; } .kd-footer .kd-footer__tag { font-style: normal; font-size: .62rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: .15rem .5rem; border-radius: 999px; color: var(--ft-wa); background: rgb(var(--ft-wa-rgb) / .1); border: 1px solid rgb(var(--ft-wa-rgb) / .25); } /* ===== Barra inferior ===== */ .kd-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: clamp(2.5rem, 6vw, 3.5rem); padding-top: 1.75rem; border-top: 1px solid var(--ft-border); font-size: .85rem; } .kd-footer__bottom p { margin: 0; } .kd-footer .kd-footer__totop { width: 40px; height: 40px; display: grid; place-items: center; flex: none; border-radius: 50%; border: 1px solid var(--ft-border); background: var(--ft-surface); transition: transform .4s var(--ft-ease), box-shadow .4s, background .3s, color .3s; } .kd-footer .kd-footer__totop svg { width: 16px; height: 16px; fill: currentColor; } .kd-footer .kd-footer__totop:hover { color: var(--ft-on-accent); background: var(--ft-accent); transform: translateY(-4px); box-shadow: 0 12px 26px -8px rgb(var(--ft-accent-rgb) / .8), 0 0 0 4px rgb(var(--ft-accent-rgb) / .15); } /* ===== Acessibilidade ===== */ .kd-footer a:focus-visible { outline: 2px solid var(--ft-accent-2); outline-offset: 3px; border-radius: 6px; } @media (prefers-reduced-motion: reduce) { .kd-footer, .kd-footer * { animation: none !important; transition: none !important; } } /* ===== Responsivo (por largura do próprio footer) ===== OBSERVAÇÃO: usa @container, então o layout reage à largura real do footer e não só à da janela (funciona bem em qualquer página/embed). Breakpoints não aceitam variáveis em CSS; ajuste os números aqui se precisar. */ @container (max-width: 1024px) { .kd-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kd-footer__brand { grid-column: 1 / -1; } } @container (max-width: 640px) { .kd-footer .kd-footer__btn { width: 100%; justify-content: center; white-space: normal; text-align: center; } .kd-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kd-footer__bottom { flex-direction: column; text-align: center; } } @container (max-width: 340px) { .kd-footer__grid { grid-template-columns: minmax(0, 1fr); } .kd-footer__cta { border-radius: 16px; } .kd-footer .kd-footer__logo-mark { width: 38px; height: 35px; } }