/* ========================================================================== FOOTER — Noord Theme ========================================================================== */ /* -------------------------------------------------------------------------- Variáveis locais (sobrescritas pelo Customizer via inline style) -------------------------------------------------------------------------- */ .site-footer { --footer-newsletter-bg: var(--footer-newsletter-bg-custom, var(--color-bg-alt)); --footer-newsletter-btn-bg: var(--footer-newsletter-btn-bg-custom, var(--color-accent)); --footer-newsletter-btn-txt: var(--footer-newsletter-btn-txt-custom, var(--color-accent-text)); /* Tamanhos de fonte independentes por área */ --footer-nl-heading-size: 18px; --footer-nl-text-size: 13px; --footer-col-title-size: 11px; --footer-col-link-size: 13px; --footer-bottom-size: 11px; } /* -------------------------------------------------------------------------- O col-full dentro do footer já dá o max-width. Zeramos seu padding lateral para as seções controlarem o próprio. -------------------------------------------------------------------------- */ .site-footer .col-full { padding-left: 0; padding-right: 0; } /* -------------------------------------------------------------------------- Modo full-width: remove o max-width do col-full, seções ficam 100% Classe adicionada no via PHP quando a opção está ativa. -------------------------------------------------------------------------- */ .footer-is-fullwidth .site-footer .col-full { max-width: none; } /* -------------------------------------------------------------------------- Wrapper interno -------------------------------------------------------------------------- */ .footer-inner { width: 100%; max-width: var(--container-max-width, 1400px); margin: 0 auto; } /* ========================================================================== NEWSLETTER ========================================================================== */ .footer-newsletter { background-color: var(--footer-newsletter-bg, transparent); padding: 36px var(--container-padding) 20px; border-bottom: 1px solid var(--color-border); } .footer-newsletter__container { display: flex; align-items: center; gap: 48px; flex-wrap: wrap; max-width: var(--container-max-width, 1400px); margin: 0 auto; } .footer-newsletter__text { flex: 0 0 auto; max-width: 320px; } .footer-newsletter__heading { display: block; font-family: var(--font-heading); font-size: var(--footer-nl-heading-size); font-weight: 600; letter-spacing: 0.01em; color: var(--footer-nl-heading-color, var(--color-text)); margin-bottom: 6px; } .footer-newsletter__desc { font-size: var(--footer-nl-text-size); color: var(--footer-nl-text-color, var(--color-text-muted)); line-height: 1.55; margin: 0; } .footer-newsletter__form { display: flex; align-items: stretch; gap: 10px; flex: 1 1 auto; flex-wrap: wrap; } .footer-newsletter__field { flex: 1 1 180px; min-width: 0; height: 48px; padding: 0 16px; border: 1px solid var(--color-border); border-radius: var(--input-radius); background: var(--color-surface); color: var(--color-text); font-family: var(--font-body); font-size: var(--footer-nl-text-size); outline: none; transition: border-color var(--transition-fast); } .footer-newsletter__field::placeholder { color: var(--color-text-light); } .footer-newsletter__field:focus { border-color: var(--color-text); } .footer-newsletter__btn { flex: 0 0 auto; height: 48px; padding: 0 28px; background-color: var(--footer-newsletter-btn-bg, var(--color-accent, #111111)); color: var(--footer-newsletter-btn-txt, var(--color-accent-text, #ffffff)); border: none; border-radius: var(--btn-radius); font-family: var(--font-heading); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: opacity var(--transition-fast); } .footer-newsletter__btn:hover { opacity: 0.85; } .footer-newsletter__btn:disabled { opacity: 0.5; cursor: not-allowed; } .footer-newsletter__legal { font-size: var(--footer-nl-text-size); color: var(--color-text-light); line-height: 1.6; margin: 16px 0 0; } .footer-newsletter__message { width: 100%; font-size: var(--footer-nl-text-size); margin-top: 8px; padding: 10px 14px; border-radius: var(--input-radius); line-height: 1.5; } .footer-newsletter__message.is-success { background-color: #f0faf4; color: #2d6a4f; border: 1px solid #b7dfc8; } .footer-newsletter__message.is-error { background-color: #fff5f5; color: #9b2335; border: 1px solid #f5c6c6; } /* ========================================================================== MAIN — COLUNAS + SOCIAL ========================================================================== */ .footer-main { display: flex; gap: 40px; padding: 48px var(--container-padding); border-bottom: 1px solid var(--color-border); align-items: flex-start; } /* Colunas de navegação */ .footer-cols { display: flex; flex: 1 1 auto; gap: 32px; flex-wrap: wrap; } .footer-col { flex: 1 1 120px; min-width: 0; } .footer-col__title { font-family: var(--font-heading); font-size: var(--footer-col-title-size); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text); margin: 0 0 16px; } .footer-col__list { list-style: none; margin: 0; padding: 0; } .footer-col__list li { margin-bottom: 10px; } .footer-col__list li a { font-size: var(--footer-col-link-size); color: var(--color-text-muted); text-decoration: none; line-height: 1.4; transition: color var(--transition-fast); } .footer-col__list li a:hover { color: var(--color-text); } /* Área de redes sociais */ .footer-social-wrap { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 24px; } .footer-social { display: flex; flex-wrap: wrap; gap: 20px; justify-content: flex-end; } .footer-social__link { display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); text-decoration: none; transition: color var(--transition-fast); line-height: 1; } .footer-social__link:hover { color: var(--color-text); } .footer-social__link svg { display: block; } /* ========================================================================== BOTTOM BAR ========================================================================== */ .footer-bottom { padding: 20px var(--container-padding); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; max-width: var(--container-max-width, 1400px); margin-left: auto; margin-right: auto; } .footer-bottom__copyright, .footer-bottom__info { margin: 0; font-size: var(--footer-bottom-size); color: var(--color-text-light); line-height: 1.6; } .footer-bottom__info { text-align: right; } /* ========================================================================== MOBILE ========================================================================== */ @media screen and (max-width: 768px) { .footer-newsletter { padding: 28px var(--container-padding-mobile) 20px; } .footer-newsletter__container { flex-direction: column; gap: 20px; align-items: flex-start; } .footer-newsletter__text { max-width: 100%; } .footer-newsletter__form { width: 100%; flex-direction: column; } .footer-newsletter__field { flex: 1 1 auto; width: 100%; } .footer-newsletter__btn { width: 100%; justify-content: center; } .footer-main { flex-direction: column; padding: 36px var(--container-padding-mobile); gap: 32px; } .footer-cols { width: 100%; gap: 28px; } .footer-col { flex: 0 0 calc(50% - 14px); } .footer-social-wrap { align-items: flex-start; width: 100%; } .footer-social { justify-content: flex-start; } .footer-bottom { padding: 16px var(--container-padding-mobile); flex-direction: column; align-items: flex-start; gap: 6px; } .footer-bottom__info { text-align: left; } } @media screen and (max-width: 480px) { .footer-col { flex: 0 0 100%; } } /* ========================================================================== FOOTER STORE / CONTACT BLOCK (bloco de loja física) ========================================================================== */ .footer-store__list { list-style: none; margin: 0; padding: 0; } .footer-store__item { font-size: var(--footer-col-link-size); color: var(--color-text-muted); line-height: 1.5; margin-bottom: 10px; } .footer-store__item a { color: var(--color-text-muted); text-decoration: none; transition: color var(--transition-fast); } .footer-store__item a:hover { color: var(--color-text); } /* ========================================================================== FOOTER BRAND (logo + frase) ========================================================================== */ .footer-brand { flex: 0 0 auto; max-width: 220px; margin-right: 8px; } .footer-brand__logo { display: inline-block; line-height: 0; } .footer-brand__logo img { max-width: 160px; width: auto; height: auto; display: block; } .footer-brand__tagline { margin: 14px 0 0; font-size: var(--footer-col-link-size); color: var(--color-text-muted); line-height: 1.5; } @media screen and (max-width: 768px) { .footer-brand { max-width: 100%; margin-right: 0; } .footer-brand__logo img { max-width: 140px; } }