/* Theme Name: FPW Theme URI: https://figurinhasparawhats.com Author: Figurinhas Para Whats Author URI: https://figurinhasparawhats.com Description: Tema próprio do Figurinhas Para Whats. Templates distintos por tipo de conteúdo (pack, grupo, artigo), busca tipada, tratamento do +18 e áreas de anúncio fora da primeira dobra. Version: 0.1.0 Requires at least: 6.5 Tested up to: 7.1 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: fpw Tags: blog, one-column, two-columns, custom-menu, featured-images, translation-ready */ /* ------------------------------------------------------------------------- * Camada de tokens (M1.2) + base mínima (M1.1). * * DIVISÃO DE RESPONSABILIDADE, e ela é deliberada: * * - Este arquivo detém os **valores** das cores, em claro e escuro. * - O `theme.json` detém os **nomes** semânticos, e aponta para as * variáveis daqui. * * Por quê: o WordPress não tem API de modo escuro. Um `theme.json` só * consegue expressar uma paleta, e ela seria a clara. Como as variáveis CSS * herdam, declarar os valores aqui deixa o modo escuro funcionar sem duplicar * nenhuma regra de componente — tudo que consome * `var(--wp--preset--color--verde)` muda junto, sem saber que existe modo * escuro. * * Preço declarado: os seletores de cor do editor de blocos mostram a variável, * não a amostra da cor. Com o `classic-editor` ativo (ver `D-003`) isso * quase não aparece. * * Tipografia, espaçamento, layout e estilos de bloco: `theme.json`. As fontes * de verdade chegam na M1.3 — até lá, as pilhas de fallback é que respondem. * ---------------------------------------------------------------------- */ :root { /* Neutros com viés verde-frio. Cinza puro lê como não-escolhido. */ --fpw-tinta: #0d1512; --fpw-tinta-2: #3d4a44; --fpw-tinta-3: #6b7a73; --fpw-papel: #f7f9f7; --fpw-superficie: #ffffff; --fpw-cal: #e6ede8; /* Verde: cor de AÇÃO. Não usar para decorar — D-009. */ --fpw-verde: #0ec654; --fpw-verde-escuro: #064e33; --fpw-verde-tenue: #e7f7ee; /* Âmbar: exclusivo de "impulsionado" — D-008 e §14. */ --fpw-ambar: #f2a900; --fpw-ambar-tenue: #fdf3dc; /* Rubro: erro de campo e "não aprovado". Nada mais. */ --fpw-rubro: #b3261e; --fpw-rubro-tenue: #fbe9e7; /* Arte: fundo do placeholder de figurinha — é "aqui vai uma imagem", não ícone. */ --fpw-arte: #d9ece2; --fpw-arte-2: #e3e9f4; --fpw-sombra: 0 1px 2px rgba(13, 21, 18, .06), 0 8px 24px -12px rgba(13, 21, 18, .18); --fpw-sombra-alta: 0 2px 4px rgba(13, 21, 18, .08), 0 18px 44px -20px rgba(13, 21, 18, .35); } /* Sem escolha explícita, quem decide é o sistema operacional. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fpw-tinta: #eaf2ed; --fpw-tinta-2: #a9bcb2; --fpw-tinta-3: #7d9089; --fpw-papel: #0a110e; --fpw-superficie: #121b17; --fpw-cal: #22302a; --fpw-verde: #2ade74; --fpw-verde-escuro: #0b6b46; --fpw-verde-tenue: #0f2a1e; --fpw-ambar: #ffc23d; --fpw-ambar-tenue: #2b2211; --fpw-rubro: #ff7a70; --fpw-rubro-tenue: #3a1613; --fpw-arte: #1a2b23; --fpw-arte-2: #1b2430; --fpw-sombra: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px -12px rgba(0, 0, 0, .7); --fpw-sombra-alta: 0 2px 4px rgba(0, 0, 0, .6), 0 18px 44px -20px rgba(0, 0, 0, .9); } } /* Escolha explícita ganha do sistema, nos dois sentidos. */ :root[data-theme="dark"] { --fpw-tinta: #eaf2ed; --fpw-tinta-2: #a9bcb2; --fpw-tinta-3: #7d9089; --fpw-papel: #0a110e; --fpw-superficie: #121b17; --fpw-cal: #22302a; --fpw-verde: #2ade74; --fpw-verde-escuro: #0b6b46; --fpw-verde-tenue: #0f2a1e; --fpw-ambar: #ffc23d; --fpw-ambar-tenue: #2b2211; --fpw-rubro: #ff7a70; --fpw-rubro-tenue: #3a1613; --fpw-arte: #1a2b23; --fpw-arte-2: #1b2430; --fpw-sombra: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px -12px rgba(0, 0, 0, .7); --fpw-sombra-alta: 0 2px 4px rgba(0, 0, 0, .6), 0 18px 44px -20px rgba(0, 0, 0, .9); } /* Base ------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; } img, video { max-width: 100%; height: auto; } /* Ícones ---------------------------------------------------------------- */ .fpw-icone { width: var(--fpw-icone-tam, 1em); height: var(--fpw-icone-tam, 1em); flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.125em; } /* Classes obrigatórias do WordPress ------------------------------------- */ .alignleft { float: left; margin-right: 1.5em; margin-bottom: 1em; } .alignright { float: right; margin-left: 1.5em; margin-bottom: 1em; } .aligncenter { display: block; margin-left: auto; margin-right: auto; } .wp-caption { max-width: 100%; } .wp-caption-text, .gallery-caption { font-size: 0.875em; } .sticky, .bypostauthor { display: block; } /* Acessibilidade: visível só ao receber foco de teclado ------------------ */ .screen-reader-text { border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; } .screen-reader-text:focus { clip-path: none; height: auto; margin: 0; overflow: visible; padding: 0.75rem 1rem; position: fixed; top: 0.5rem; left: 0.5rem; width: auto; z-index: 100000; } /* Cabeçalho e rodapé (M1.6) --------------------------------------------- * * Os breakpoints estão escritos em pixels porque `@media` não aceita variável * CSS. São os mesmos 3 valores de `settings.custom.quebra` no theme.json — * 640 / 900 / 1200 — e mudar um exige mudar o outro. Está anotado aqui porque * é o tipo de duplicação que sai de sincronia em silêncio. */ .fpw-topo { background: var(--wp--preset--color--verde-escuro); color: #fff; } .fpw-topo__interno, .fpw-rodape__interno { max-width: var(--wp--style--global--content-size, 1080px); margin-inline: auto; padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50); display: flex; align-items: center; gap: var(--wp--preset--spacing--40); flex-wrap: wrap; } .fpw-marca { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: var(--wp--preset--font-size--md); letter-spacing: -0.01em; white-space: nowrap; color: inherit; text-decoration: none; } .fpw-marca b { color: var(--wp--preset--color--verde); } .fpw-marca img { max-height: 2rem; width: auto; } .fpw-busca { flex: 1 1 10rem; min-width: 0; display: flex; align-items: center; gap: var(--wp--preset--spacing--30); background: rgba(255, 255, 255, .13); border-radius: var(--wp--custom--raio); padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40); } .fpw-busca input { flex: 1; min-width: 0; background: none; border: 0; color: inherit; font: inherit; font-size: var(--wp--preset--font-size--sm); } .fpw-busca input::placeholder { color: rgba(255, 255, 255, .7); } .fpw-busca input:focus { outline: none; } .fpw-busca:focus-within { outline: 2px solid var(--wp--preset--color--verde); outline-offset: 2px; } .fpw-nav__lista, .fpw-rodape__lista { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--wp--preset--spacing--50); flex-wrap: wrap; } .fpw-nav__lista a { color: rgba(255, 255, 255, .9); font-size: var(--wp--preset--font-size--sm); white-space: nowrap; text-decoration: none; } .fpw-nav__lista a:hover, .fpw-nav__lista a:focus-visible { color: #fff; text-decoration: underline; } .fpw-topo__acoes { display: flex; gap: var(--wp--preset--spacing--30); margin-left: auto; } .fpw-btn { display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--30); border: 0; border-radius: 9px; padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50); font: inherit; font-size: var(--wp--preset--font-size--sm); font-weight: 700; text-decoration: none; cursor: pointer; background: var(--wp--preset--color--verde); color: #06301c; } .fpw-btn--vazado { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); } .fpw-btn:hover { opacity: .9; } .fpw-topo__alterna { background: none; border: 0; color: inherit; cursor: pointer; padding: var(--wp--preset--spacing--20); font-size: var(--wp--preset--font-size--md); display: none; } /* Abaixo de 640 px a busca ganha a linha inteira, abaixo da marca e das * ações — senão ela encolhe a 4 ch e o botão "Entrar" cai sozinho numa * segunda linha (medido em 390 × 844 na M2). */ @media (max-width: 640px) { .fpw-busca { order: 10; flex-basis: 100%; } .fpw-topo__acoes { margin-left: auto; } } /* Sem JavaScript o botão continua `hidden` e a navegação fica visível. */ @media (max-width: 900px) { .fpw-com-js .fpw-topo__alterna { display: inline-flex; } .fpw-com-js .fpw-nav { display: none; flex-basis: 100%; } .fpw-com-js .fpw-topo__alterna[aria-expanded="true"] + .fpw-marca ~ .fpw-nav { display: block; } .fpw-nav { flex-basis: 100%; } .fpw-nav__lista { flex-direction: column; gap: var(--wp--preset--spacing--40); } } .fpw-conteudo { max-width: var(--wp--style--global--content-size, 1080px); margin-inline: auto; padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50); } /* Áreas de anúncio (M1.5) ------------------------------------------------ * * Sem moldura, sem rótulo visível: quem lê o bloco é o leitor de tela, pelo * `aria-label` do `