/** * CSS do site — Gibiteca * ====================== * * ÍNDICE * 1. Tokens (aliases das Global Colors/Fonts do Elementor) * 2. Fontes (Google Fonts + fallback local) * 3. Utilitários de HQ (retícula, painel, balão, rabisco) * 4. Chip de placeholder (indicadores/dados pendentes) * * COMO USAR * As classes daqui são para o campo "Classes CSS" (aba Avançado) de um * Container ou Widget no Elementor — não crie novas classes soltas no * editor para o que já existe abaixo. * * FONTE DA VERDADE DAS CORES * As cores em si (#FFC727 etc.) NUNCA são definidas aqui. Elas vivem só * em Elementor → Sistema de Design → Cores Globais. Este arquivo apenas * lê as variáveis que o Elementor já gera a partir de lá * (--e-global-color-*) e dá a elas um apelido mais legível * (--color-primary etc., como pedido no briefing). Trocar a paleta * depois da nova logo = editar só as Cores Globais; nada aqui muda. */ /* ----------------------------------------------------------------------- 1. Tokens ----------------------------------------------------------------------- */ :root { --color-primary: var(--e-global-color-primary); /* Amarelo gibi */ --color-secondary: var(--e-global-color-secondary); /* Ciano */ --color-accent: var(--e-global-color-accent); /* Magenta */ --color-dark: var(--e-global-color-text); /* Azul-noite (texto) */ --color-blue: var(--e-global-color-gbt_blue); /* Azul tinta (links) */ --color-background: var(--e-global-color-gbt_background); /* Papel */ --color-light: var(--e-global-color-gbt_light); /* Branco */ --color-muted: var(--e-global-color-gbt_muted); /* Grafite (texto secundário) */ /* Espaçamentos — usar como var(--space-24) em CSS customizado; no Elementor, os controles de padding/margin já aceitam esses mesmos valores diretamente. */ --space-8: 8px; --space-16: 16px; --space-24: 24px; --space-32: 32px; --space-48: 48px; --space-72: 72px; --space-96: 96px; /* Raios — o raio de botão "pílula" já está em Sistema de Design → Botões; os dois abaixo são para os elementos que o Kit não cobre (tags/chips e cards). */ --radius-tag: 6px; --radius-card: 12px; } /* ----------------------------------------------------------------------- 2. Fontes ----------------------------------------------------------------------- */ /* Carregadas aqui (e não só via Elementor) para acelerar o carregamento: o navegador começa a buscar a fonte assim que lê o , sem esperar o CSS do Kit terminar de processar. Os nomes têm que bater exatamente com os cadastrados em Sistema de Design → Fontes Globais. */ @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,800&family=Figtree:ital,wght@0,400;0,600;0,700;1,400&display=swap'); /* ----------------------------------------------------------------------- 3. Utilitários de HQ ----------------------------------------------------------------------- */ /** * .gbt-halftone — retícula pontilhada, em CSS puro (sem imagem). * Aplicar num Container como plano de fundo decorativo (hero, CTA final). * A cor do ponto usa --color-dark com opacidade baixa por padrão; para * usar sobre fundo escuro, adicione também a classe .gbt-halftone--light. */ .gbt-halftone { position: relative; } .gbt-halftone::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(color-mix(in srgb, var(--color-dark) 13%, transparent) 2px, transparent 2.5px); background-size: 12px 12px; pointer-events: none; } .gbt-halftone--light::before { background-image: radial-gradient(color-mix(in srgb, var(--color-light) 25%, transparent) 2px, transparent 2.5px); } /** * .gbt-panel — moldura de "quadro de HQ", levemente girada. Usar em * imagens de destaque (hero, Quem Somos), nunca em toda foto do site. */ .gbt-panel { border: 3px solid var(--color-dark); border-radius: 4px; transform: rotate(-1.2deg); overflow: hidden; } .gbt-panel img { display: block; width: 100%; height: 100%; object-fit: cover; } /** * .gbt-balloon — rótulo em formato de balão de fala. Usar no "eyebrow" * (rótulo curto acima dos títulos de seção), nunca em blocos de texto. */ .gbt-balloon { position: relative; display: inline-block; background: var(--color-light); border: 2px solid var(--color-dark); border-radius: 18px; padding: 0.5em 0.9em; font-weight: 700; } .gbt-balloon::after { content: ""; position: absolute; left: 22px; bottom: -10px; width: 16px; height: 16px; background: var(--color-light); border-right: 2px solid var(--color-dark); border-bottom: 2px solid var(--color-dark); transform: skewX(-30deg) rotate(45deg); } /** * .gbt-scribble > span — sublinhado desenhado à mão em SVG, para destacar * UMA palavra dentro de um título. Não usar a frase inteira. * Ex.:

Histórias que formam leitores

*/ .gbt-scribble { background: no-repeat 0 100% / 100% 10px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M2 7 C 40 2, 80 9, 120 4 S 180 6, 198 3' fill='none' stroke='%23D6186F' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); padding-bottom: 0.15em; } /* ----------------------------------------------------------------------- 4. Placeholder de dado pendente ----------------------------------------------------------------------- */ /** * .gbt-is-placeholder — marca visível de que um número/indicador ainda * não é oficial (ver Fase 3: "não inventar números"). Aplicar junto do * campo ACF "destaque_home"/"resultados" enquanto o dado real não chega. * NUNCA remover o estado hidden em produção sem um valor real por trás. */ .gbt-is-placeholder { position: relative; opacity: 0.55; } .gbt-is-placeholder::after { content: "Aguardando dado oficial"; position: absolute; inset: auto 0 -1.6em 0; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-accent); text-align: center; }