/* Theme Name: PROEMI Builder Theme URI: Author: proemistudio.com Description: O PROEMI Builder foi projetado para entregar mais performance e segurança em projetos desenvolvidos com WordPress. O Pb é um tema exclusivo da PROEMI studio, desenvolvido para uso exclusivamente interno. Version: 1.0.0 Text Domain: proemi-builder */ /* ============================================================ COCAL NOTÍCIAS — style.css Tokens da aba ⟶ Dev do Figma. BEM = classes diretas dos layers. Fontes 100% locais (assets/fonts/) — sem Google Fonts. ============================================================ */ /* ── Fontes locais (@font-face) ── */ @font-face { font-family: 'Sora'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/sora-400.woff2') format('woff2'); } @font-face { font-family: 'Sora'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/sora-500.woff2') format('woff2'); } @font-face { font-family: 'Sora'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/sora-700.woff2') format('woff2'); } @font-face { font-family: 'Lora'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/lora-700.woff2') format('woff2'); } :root { /* Cores */ --primary: #C0143C; --primary-dark: #A01030; --teal: #0A7779; /* escurecido p/ contraste AA: texto branco no botão E teal como texto sobre fundo claro */ --teal-dark: #08696B; --ink: #0D0D14; --navy: #3A3A50; --muted: #6C6C83; /* escurecido p/ contraste AA (labels, placeholders) */ --contact: #787878; --line: rgba(13, 13, 20, 0.09); --bg: #F4F3F8; --surface: #FFFFFF; --search-bg: #F4F3F8; /* Tipografia */ --font-ui: 'Sora', system-ui, -apple-system, sans-serif; --font-serif: 'Lora', Georgia, 'Times New Roman', serif; /* Layout */ --maxw: 1008px; /* largura útil das seções (Figma: x216 → 1008) */ --header-maxw: 1360px; --gap-section: 60px; /* espaçamento vertical entre seções (Figma ≈ 59) */ } /* ── Scroll customizado (template scroll-selecao) ── */ :root { --sbw: 8px; --sbc: #C0143C; } html, body { scrollbar-width: none; -ms-overflow-style: none; } html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; } #sb { position: fixed; top: 0; right: 2px; width: var(--sbw); height: 100vh; pointer-events: none; z-index: 99999; } #sb i { position: absolute; right: 0; width: 100%; border-radius: 999px; background: var(--sbc); opacity: 0; transition: opacity .35s ease; } html.scrolling #sb i { opacity: 1; } @media (max-width: 1024px) { #sb { display: none; } } /* Seleção de texto */ ::selection { color: #fff; background-color: #C0143C; } ::-moz-selection { color: #fff; background-color: #C0143C; } /* ============================================================ BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-ui); background-color: var(--bg); color: var(--navy); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* Sticky footer: corpo em coluna ocupando ao menos a altura da tela, assim o rodapé fica sempre colado embaixo mesmo com pouco conteúdo. */ display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; } /* main.page (NÃO body.page — o WP põe a classe "page" no das Páginas): cresce para empurrar o rodapé p/ baixo. Escopar evita padding fantasma no body. */ main.page { flex: 1 0 auto; padding-bottom: 80px; } /* Âncoras (#edicao-da-semana etc.): para abaixo do header fixo (~91px), senão o título da seção fica escondido sob o cabeçalho. */ #edicao-da-semana, #outras-edicoes, #arquivo, #busca, #contato { scroll-margin-top: 110px; } /* ============================================================ HEADER (bloco: header) ============================================================ */ .header { background: var(--surface); position: sticky; top: 0; z-index: 900; } .header__inner { max-width: var(--header-maxw); margin-inline: auto; min-height: 91px; padding: 16px 40px; display: flex; align-items: center; gap: 24px; } .header__logo { flex-shrink: 0; } .header__logo img { height: 33px; width: auto; } /* navegação desktop */ .header__nav { display: flex; align-items: center; gap: 4px; margin-left: clamp(16px, 4vw, 90px); } .header__link { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; font-size: 13px; font-weight: 500; letter-spacing: 0.374px; text-transform: uppercase; color: var(--navy); border-bottom: 2px solid transparent; transition: color .2s ease, border-color .2s ease; white-space: nowrap; } .header__icon { width: 13px; height: 13px; flex-shrink: 0; opacity: 0.5; color: var(--navy); } .header__icon svg { width: 100%; height: 100%; } .header__link:hover { color: var(--ink); } .header__link:hover .header__icon { opacity: 0.8; } .header__link.is-active { color: var(--primary); } .header__link.is-active .header__icon { color: var(--primary); opacity: 1; } /* busca desktop */ .header__search { position: relative; display: flex; align-items: center; width: 279px; margin-left: auto; flex-shrink: 0; } .header__search-input { width: 100%; height: 44px; border: none; border-radius: 50px; background: var(--search-bg); padding: 0 44px 0 24px; font-family: var(--font-ui); font-size: 13px; color: var(--navy); } .header__search-input::placeholder { color: var(--muted); } .header__search-input:focus { outline: 2px solid rgba(192, 20, 60, .25); } .header__search-icon { position: absolute; right: 20px; width: 13px; height: 13px; color: var(--muted); display: grid; place-items: center; cursor: pointer; transition: color .2s ease; } .header__search-icon:hover { color: var(--navy); } /* ações mobile (busca + hambúrguer) — escondidas no desktop */ .header__mobile-actions { display: none; align-items: center; gap: 15px; margin-left: auto; } .header__search-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--search-bg); display: grid; place-items: center; color: #4B4B5D; } .header__search-btn svg { width: 17px; height: 17px; } .header__toggle { width: 30px; height: 24px; display: flex; flex-direction: column; justify-content: center; gap: 6px; flex-shrink: 0; } .header__bar { height: 3px; width: 100%; background: #323244; border-radius: 2px; transition: transform .25s ease, opacity .2s ease; transform-origin: center; } /* Hambúrguer → X: as MESMAS barras viram o X (tamanho e peso idênticos) */ .header__toggle.is-active .header__bar:nth-child(1) { transform: translateY(9px) rotate(45deg); } .header__toggle.is-active .header__bar:nth-child(2) { opacity: 0; } .header__toggle.is-active .header__bar:nth-child(3) { transform: translateY(-9px) rotate(-45deg); } /* ============================================================ MENU MOBILE (bloco: menu-open) ============================================================ */ /* Dropdown ancorado ao .header (sticky) — abre logo ABAIXO do header, sem header duplicado: logo, lupa e botão do header nunca se movem. */ .menu-open { position: absolute; top: 100%; left: 0; right: 0; z-index: 1000; background: var(--surface); padding: 2px 20px 20px; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .22s ease, transform .22s ease, visibility .22s; box-shadow: 0 16px 28px rgba(13, 13, 20, 0.10); border-top: 1px solid var(--line); } .menu-open.is-open { opacity: 1; visibility: visible; transform: translateY(0); } .menu-open__nav { display: flex; flex-direction: column; align-items: stretch; } .menu-open__nav-link { padding: 16px 0; font-size: 14px; font-weight: 500; letter-spacing: 0.374px; text-transform: uppercase; color: var(--navy); border-bottom: 1px solid var(--line); transition: color .2s ease; } .menu-open__nav-link:last-child { border-bottom: none; } .menu-open__nav-link:hover { color: var(--ink); } .menu-open__nav-link.is-active { color: var(--primary); } @media (min-width: 901px) { .menu-open { display: none; } } /* só mobile */ /* ============================================================ HOME · BANNER (bloco: home__banner) — slots de anúncio ============================================================ */ .home__banner { margin-top: var(--gap-section); } .home__banner-row { display: flex; gap: 20px; } .home__banner-card { flex: 1 1 0; min-height: 260px; background: var(--surface); border-radius: 14px; padding: 40px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; overflow: hidden; text-align: center; } .home__banner-card-icon { width: 36px; height: 36px; opacity: 0.2; /* faithful: Figma usa stroke branco a 20% (marca d'água) */ color: #fff; } .home__banner-card-contact { font-size: 11.5px; font-weight: 500; letter-spacing: 0.922px; line-height: 1.7; text-transform: uppercase; color: var(--contact); opacity: 0.6; max-width: 100%; overflow-wrap: anywhere; } /* ============================================================ HOME · EDIÇÃO EM DESTAQUE (bloco: home__featured) ============================================================ */ .home__featured { margin-top: var(--gap-section); } .home__featured-header { display: flex; align-items: center; gap: 8px; margin-bottom: 32px; } .home__featured-title { font-size: 28px; font-weight: 500; line-height: 38px; color: var(--ink); } .home__featured-badge { display: inline-flex; align-items: center; height: 21px; padding: 0 10px; border-radius: 50px; background: var(--primary); color: #fff; font-size: 10.4px; font-weight: 700; letter-spacing: 1.04px; text-transform: uppercase; white-space: nowrap; } .home__featured-body { background: var(--surface); border-radius: 15px; padding: 20px 40px 27px 29px; } .home__featured-content { display: flex; align-items: center; gap: 28px; } .home__featured-cover { flex-shrink: 0; width: 338px; overflow: hidden; } .home__featured-cover img { width: 100%; height: auto; } .home__featured-details { display: flex; flex-direction: column; gap: 33px; flex: 1; min-width: 0; } .home__featured-info { display: flex; flex-direction: column; } .home__featured-date { font-size: 11.5px; font-weight: 700; letter-spacing: 0.922px; text-transform: uppercase; color: var(--primary); margin-bottom: 18px; } .home__featured-headline { font-family: var(--font-serif); font-size: 30px; font-weight: 700; line-height: 38px; letter-spacing: -0.592px; color: var(--ink); margin-bottom: 28px; } .home__featured-highlights-title { font-size: 10.9px; font-weight: 700; letter-spacing: 1.306px; text-transform: uppercase; color: var(--muted); margin-bottom: 20px; } .home__featured-highlights { display: flex; flex-direction: column; } .home__featured-highlight { font-size: 15px; font-weight: 400; line-height: 25px; color: var(--navy); padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid var(--line); } .home__featured-highlight:last-child { margin-bottom: 0; } .home__featured-actions { display: flex; flex-wrap: wrap; gap: 10px; } .home__featured-action { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 22px; border-radius: 50px; font-size: 12.8px; font-weight: 700; letter-spacing: 0.256px; transition: background .2s ease, border-color .2s ease, opacity .2s ease; } .home__featured-action-icon { width: 15px; height: 15px; flex-shrink: 0; } .home__featured-action-icon svg { width: 100%; height: 100%; } .home__featured-action--view { background: var(--teal); color: #fff; } .home__featured-action--view:hover { background: var(--teal-dark); } .home__featured-action--download { background: var(--primary); color: #fff; } .home__featured-action--download:hover { background: var(--primary-dark); } .home__featured-action--share { border: 1px solid var(--line); color: var(--navy); } .home__featured-action--share:hover { border-color: var(--navy); } /* ============================================================ HOME · OUTRAS EDIÇÕES (bloco: home__archive) ============================================================ */ .home__archive { margin-top: var(--gap-section); display: flex; flex-direction: column; gap: 36px; } .home__archive-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .home__archive-heading { display: flex; align-items: center; gap: 7px; } .home__archive-title { font-size: 28px; font-weight: 500; line-height: 38px; color: var(--ink); } .home__archive-badge { display: inline-flex; align-items: center; height: 21px; padding: 0 14px; border-radius: 50px; background: var(--surface); color: #2c4343; font-size: 12px; font-weight: 500; text-transform: uppercase; white-space: nowrap; } .home__archive-link { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 500; color: var(--teal); transition: gap .2s ease; } .home__archive-link:hover { gap: 9px; } .home__archive-link-icon { width: 14px; height: 14px; flex-shrink: 0; } .home__archive-link-icon svg { width: 100%; height: 100%; } .home__archive-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 17px; } .home__archive-card { background: var(--surface); border-radius: 15px; overflow: hidden; display: flex; flex-direction: column; } .home__archive-card-media { height: 177px; background: #eae9ee; display: flex; align-items: center; justify-content: center; } .home__archive-card-thumbnail { width: 166px; height: 152px; overflow: hidden; } .home__archive-card-thumbnail img { width: 100%; height: 100%; object-fit: cover; object-position: top; } .home__archive-card-content { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px 27px 24px; } .home__archive-card-date { font-size: 16px; color: #5d5d6c; text-align: center; } .home__archive-card-action { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 38px; border-radius: 50px; font-size: 15px; font-weight: 500; transition: background .2s ease, border-color .2s ease; } .home__archive-card-action-icon { flex-shrink: 0; } .home__archive-card-action-icon svg { display: block; width: 100%; height: 100%; } .home__archive-card-action--view { background: var(--teal); color: #fff; } .home__archive-card-action--view:hover { background: var(--teal-dark); } .home__archive-card-action--view .home__archive-card-action-icon { width: 15px; height: 15px; } .home__archive-card-action--download { border: 1px solid var(--line); color: var(--navy); } .home__archive-card-action--download:hover { border-color: var(--navy); } .home__archive-card-action--download .home__archive-card-action-icon { width: 13px; height: 13px; } /* "Ver todas" em pílula — só no mobile */ .home__archive-footer { display: none; align-items: center; justify-content: center; padding: 20px; border: 1px solid #c9c7d2; border-radius: 30px; } .home__archive-footer .home__archive-link { color: var(--navy); } /* ============================================================ HOME · ANUNCIE (bloco: home__advertise) — slots de anúncio ============================================================ */ .home__advertise { margin-top: var(--gap-section); display: flex; flex-direction: column; gap: 28px; } .home__advertise-title { font-size: 18.4px; font-weight: 500; letter-spacing: -0.368px; color: var(--ink); } .home__advertise-row { display: flex; gap: 20px; } .home__advertise-card { flex: 1 1 0; min-height: 260px; background: var(--surface); border-radius: 14px; padding: 40px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; overflow: hidden; text-align: center; } .home__advertise-card-icon { width: 36px; height: 36px; opacity: 0.2; /* faithful: stroke branco a 20% (marca d'água) */ color: #fff; } .home__advertise-card-contact { font-size: 11.5px; font-weight: 500; letter-spacing: 0.922px; line-height: 1.7; text-transform: uppercase; color: var(--contact); opacity: 0.6; max-width: 100%; overflow-wrap: anywhere; } /* Link de WhatsApp dentro dos cards de anúncio */ .card-contact-link { color: inherit; transition: color .2s ease; } .card-contact-link:hover { color: var(--primary); } /* ============================================================ BANNERS DE PUBLICIDADE (Post Type `banner`) ============================================================ */ .banner-area { margin-top: var(--gap-section); } .banner-area--anuncie { display: flex; flex-direction: column; gap: 28px; } .banner-area__title { font-size: 18.4px; font-weight: 500; letter-spacing: -0.368px; color: var(--ink); } .banner-grid { display: grid; grid-template-columns: repeat(2, 1fr); /* sempre 2 banners lado a lado */ gap: 20px; } .banner-grid--single { grid-template-columns: 1fr; } /* 1 banner ocupa a linha */ .banner-rotator { position: relative; } .banner-item { display: block; border-radius: 14px; overflow: hidden; background: var(--surface); } .banner-item img { width: 100%; height: auto; display: block; } /* Rodízio com fade: dentro de um rotator os itens se sobrepõem e a opacidade controla qual está visível. O 1º item fica no fluxo e define a altura do slot; os demais sobrepõem absolutamente. (Use banners do mesmo tamanho.) */ .banner-rotator .banner-item { opacity: 0; transition: opacity .8s ease; } .banner-rotator .banner-item:not(:first-child) { position: absolute; inset: 0; } .banner-rotator .banner-item.is-active { opacity: 1; } .banner-rotator .banner-item:not(.is-active) { pointer-events: none; } /* Mobile: empilha em 1 coluna (2 lado a lado ficaria pequeno demais) */ @media (max-width: 768px) { .banner-grid { grid-template-columns: 1fr; } } /* ============================================================ FOOTER (bloco: footer) ============================================================ */ .footer { background: #0d0d14; border-top: 4px solid var(--primary); color: #fff; padding: 49px 24px 31px; } .footer__inner { max-width: 1145px; margin-inline: auto; display: flex; flex-direction: column; gap: 78px; } .footer__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; } .footer__brand { display: flex; flex-direction: column; gap: 30px; max-width: 303px; } .footer__logo img { height: 37px; width: auto; } .footer__tagline { font-size: 14px; line-height: 22px; color: rgba(255, 255, 255, 0.5); } .footer__cols { display: flex; gap: 107px; } .footer__col { display: flex; flex-direction: column; } .footer__col-title { font-size: 16px; font-weight: 700; letter-spacing: 1.523px; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); margin-bottom: 16px; } .footer__links { display: flex; flex-direction: column; gap: 8px; } .footer__link { font-size: 14px; color: rgba(255, 255, 255, 0.6); transition: color .2s ease; } .footer__link:hover { color: #fff; } .footer__col--contact .footer__col-title { margin-bottom: 30px; } .footer__contact { display: flex; flex-direction: column; gap: 34px; } .footer__address { font-style: normal; font-size: 14px; line-height: 26px; color: rgba(255, 255, 255, 0.6); } .footer__contact-info { display: flex; flex-direction: column; font-size: 13.1px; line-height: 26px; } .footer__contact-info a { color: rgba(255, 255, 255, 0.6); transition: color .2s ease; width: fit-content; } .footer__contact-info a:hover { color: #fff; } .footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 30px; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 14px; color: rgba(255, 255, 255, 0.5); /* 0.3 → 0.5 p/ contraste AA no rodapé */ } .footer__legal a { color: inherit; transition: color .2s ease; } .footer__legal a:hover { color: rgba(255, 255, 255, 0.7); } /* ============================================================ PÁGINA · OUTRAS EDIÇÕES / ARQUIVO (bloco: arquivo) ============================================================ */ .arquivo { margin-top: var(--gap-section); } .arquivo__header { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; } .arquivo__title { font-size: 28px; font-weight: 500; line-height: 38px; color: var(--ink); } .arquivo__filters { display: flex; align-items: center; gap: 12px; } .arquivo__search { border: none; background: transparent; font-family: var(--font-ui); font-size: 13px; color: var(--navy); width: 150px; height: 48px; padding: 0 8px; } .arquivo__search::placeholder { color: var(--muted); } .arquivo__search:focus { outline: none; } .arquivo__select { position: relative; display: inline-flex; } .arquivo__select select { appearance: none; -webkit-appearance: none; min-width: 137px; height: 48px; border: none; border-radius: 50px; background: var(--surface); padding: 0 40px 0 24px; font-family: var(--font-ui); font-size: 11.5px; font-weight: 500; letter-spacing: 0.922px; text-transform: uppercase; color: rgba(58, 58, 80, 0.7); cursor: pointer; } .arquivo__select select:focus { outline: 2px solid rgba(192, 20, 60, 0.2); } .arquivo__select-icon { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 10px; height: 6px; color: var(--navy); pointer-events: none; } .arquivo__select-icon svg { width: 100%; height: 100%; display: block; } .arquivo__list { display: flex; flex-direction: column; gap: 15px; } .arquivo__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 80px; background: var(--surface); border-radius: 15px; padding: 14px 22px 14px 29px; transition: box-shadow .2s ease; } .arquivo__row:hover { box-shadow: 0 8px 20px rgba(13, 13, 20, 0.06); } .arquivo__date { font-size: 18px; font-weight: 500; color: #32323a; } .arquivo__actions { display: flex; gap: 19px; } .arquivo__action { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 175px; height: 38px; border-radius: 50px; background: var(--search-bg); color: var(--navy); font-size: 15px; font-weight: 500; transition: background .2s ease; } .arquivo__action:hover { background: #e8e6f0; } .arquivo__action-icon { flex-shrink: 0; } .arquivo__action-icon svg { display: block; width: 100%; height: 100%; } .arquivo__action--view .arquivo__action-icon { width: 15px; height: 15px; } .arquivo__action--download .arquivo__action-icon { width: 13px; height: 13px; } /* ============================================================ PÁGINA · BUSCA (bloco: busca) — caixa de pesquisa + resultados ============================================================ */ .busca__form { position: relative; display: flex; align-items: center; width: 320px; max-width: 100%; flex-shrink: 0; } .busca__input { width: 100%; height: 48px; border: none; border-radius: 50px; background: var(--surface); padding: 0 48px 0 24px; font-family: var(--font-ui); font-size: 14px; color: var(--navy); } .busca__input::placeholder { color: var(--muted); } .busca__input:focus { outline: 2px solid rgba(192, 20, 60, 0.2); } .busca__submit { position: absolute; right: 18px; width: 16px; height: 16px; display: grid; place-items: center; color: var(--muted); cursor: pointer; transition: color .2s ease; } .busca__submit:hover { color: var(--navy); } .busca__submit svg { width: 100%; height: 100%; } .busca__meta { font-size: 14px; color: var(--muted); margin-bottom: 22px; } @media (max-width: 768px) { .busca__form { width: 100%; } } /* ============================================================ PÁGINAS DE TEXTO · SOBRE / CONTATO (bloco: pagina) ============================================================ */ .pagina { max-width: 640px; margin-inline: auto; padding: 60px 24px 96px; } .pagina__kicker { font-size: 14px; font-weight: 500; letter-spacing: 0.922px; text-transform: uppercase; color: var(--primary); margin-bottom: 16px; } .pagina__title { font-family: var(--font-serif); font-weight: 700; font-size: 30px; line-height: 38px; color: var(--ink); margin-bottom: 40px; } .pagina__body p { font-size: 15px; line-height: 25px; color: var(--navy); } .pagina__body p + p { margin-top: 25px; } .pagina__contact { font-size: 18px; line-height: 48px; color: var(--navy); margin-bottom: 10px; } .pagina__contact a { color: inherit; transition: color .2s ease; } .pagina__contact a:hover { color: var(--primary); } .pagina__address { font-style: normal; font-size: 16px; line-height: 26px; color: var(--navy); } /* ============================================================ RESPONSIVO ============================================================ */ /* —— Header vira mobile (logo + busca + hambúrguer) ≤ 900px —— */ @media (max-width: 900px) { .header__nav, .header__search { display: none; } .header__mobile-actions { display: flex; } .header__inner { padding: 16px 20px; min-height: 82px; } } /* —— Tablet / Mobile ≤ 768px —— */ @media (max-width: 768px) { :root { --gap-section: 40px; } .container { padding-inline: 18px; } /* Banner: cards empilhados */ .home__banner-row { flex-direction: column; gap: 20px; } .home__banner-card { min-height: 150px; padding: 36px 24px; border-radius: 14px; } /* Featured: cabeçalho centralizado, badge acima do título */ .home__featured-header { flex-direction: column-reverse; align-items: center; text-align: center; gap: 15px; } .home__featured-title { font-size: 26px; } /* Featured: corpo empilhado (capa em cima, detalhes embaixo) */ .home__featured-body { padding: 18px; } .home__featured-content { flex-direction: column; align-items: stretch; gap: 22px; } .home__featured-cover { width: 100%; } .home__featured-cover img { width: 100%; } .home__featured-details { gap: 26px; } .home__featured-headline { font-size: 22px; line-height: 30px; } /* Ações: Visualizar + Baixar lado a lado, Compartilhar full-width */ .home__featured-actions { gap: 8px; } .home__featured-action { flex: 1 1 auto; justify-content: center; padding: 0 16px; } .home__featured-action--share { flex-basis: 100%; } } /* —— Mobile pequeno ≤ 600px —— */ @media (max-width: 600px) { .home__featured-headline { font-size: 21px; } } /* —— Mobile menor ≤ 480px —— */ @media (max-width: 480px) { .header__inner { padding: 14px 18px; } .menu-open { padding-left: 18px; padding-right: 18px; } /* dropdown alinhado ao logo ≤480 */ .home__featured-title { font-size: 23px; } .home__featured-headline { font-size: 20px; line-height: 28px; } .home__featured-action { font-size: 12px; padding: 0 12px; } } /* —— Outras Edições / Anuncie —— */ @media (max-width: 900px) { .home__archive-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .home__archive { gap: 24px; } .home__archive-header { justify-content: center; } .home__archive-heading { flex-direction: column-reverse; align-items: center; gap: 18px; text-align: center; } .home__archive-header .home__archive-link { display: none; } /* "Ver todas" vira pílula embaixo */ .home__archive-grid { grid-template-columns: 1fr; gap: 16px; } .home__archive-card:nth-child(4) { display: none; } /* mobile mostra 3 cards */ .home__archive-card-media { display: none; } /* sem miniatura no mobile */ .home__archive-card-content { padding: 22px; flex-direction: row; /* data em cima, botões em linha */ flex-wrap: wrap; } .home__archive-card-date { flex-basis: 100%; font-size: 18px; color: #32323a; } .home__archive-card-action { width: auto; flex: 1 1 0; min-width: 0; } /* Visualizar | Baixar lado a lado */ .home__archive-card-action--download { border-color: transparent; background: var(--search-bg); } .home__archive-footer { display: flex; } .home__advertise-row { flex-direction: column; gap: 20px; } .home__advertise-card { min-height: 150px; padding: 36px 24px; } } /* —— Footer mobile ≤ 680px (breakpoint do spec) —— */ @media (max-width: 680px) { .footer { padding: 50px 20px; } .footer__inner { gap: 50px; } .footer__top { flex-direction: column; gap: 70px; } .footer__cols { flex-direction: column; gap: 50px; } .footer__col-title { margin-bottom: 18px; } .footer__col--contact .footer__col-title { margin-bottom: 28px; } .footer__link { font-size: 15px; } .footer__bottom { flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 50px; } } /* —— Rodapé em telas estreitas: reduz a fonte p/ copyright e créditos caberem em 1 linha cada (sem palavra órfã) até ~360px —— */ @media (max-width: 480px) { .footer { padding-left: 16px; padding-right: 16px; } .footer__bottom { font-size: 12px; } } /* ============================================================ HOVER FLOAT — cards de anúncio, edição em destaque e arquivo ============================================================ */ .home__banner-card, .home__advertise-card, .home__featured-body, .home__archive-card { transition: transform .3s ease, box-shadow .3s ease; } @media (hover: hover) { .home__banner-card:hover, .home__advertise-card:hover, .home__featured-body:hover, .home__archive-card:hover { transform: translateY(-6px); box-shadow: 0 14px 30px rgba(13, 13, 20, 0.12); } } /* —— Páginas de texto (Sobre / Contato) —— */ @media (max-width: 768px) { .pagina { padding: 40px 18px 64px; } .pagina__title { font-size: 26px; line-height: 34px; margin-bottom: 28px; } .pagina__contact { font-size: 17px; line-height: 40px; } } @media (max-width: 480px) { .pagina__title { font-size: 23px; line-height: 30px; } } /* —— Outras Edições / Arquivo —— */ @media (max-width: 768px) { .arquivo__header { flex-direction: column; align-items: stretch; gap: 16px; } .arquivo__filters { flex-wrap: wrap; gap: 10px; } .arquivo__search { order: -1; width: 100%; height: 44px; background: var(--surface); border-radius: 50px; padding: 0 20px; } .arquivo__select { flex: 1; } .arquivo__select select { width: 100%; min-width: 0; } .arquivo__row { flex-direction: column; align-items: stretch; gap: 14px; padding: 18px; } .arquivo__date { text-align: center; } .arquivo__actions { gap: 10px; } .arquivo__action { flex: 1; min-width: 0; } }