/* Theme Name: Wildcat Child - Flynet Template: wildcat Version: 2.5 Description: Camada de design do shop.flynet.travel sobre o tema Wildcat. Nao altera URLs, conteudo nem estrutura de dados - so aparencia. */ /* ============================================================ FASE 1 - paleta, superficies e tipografia do shop. Os valores abaixo sao os tokens REAIS do shop.flynet.travel, extraidos de app/globals.css e tailwind.config.js. Cada um esta documentado em design-tokens.md. Esta folha depende do tema pai TER SIDO desligado: o functions.php deste tema filho remove a funcao progression_customize_css(), que injetava no um bloco com as cores antigas (#16252c, #5d92a3, #68b95a) e alta especificidade. Sem aquela remocao, metade daqui nao se aplica. As poucas regras uteis que vinham de la (largura do logo, espacamento do menu, ocultar comentarios) estao reproduzidas no fim deste arquivo. ============================================================ */ :root{ /* superficies */ --fx-page: #F9FAFB; /* grayscale-100 - fundo do body no shop */ --fx-surface: #FFFFFF; /* cards, header, footer */ --fx-strip: #E6E8EB; /* faixa fina de contato no topo */ --fx-line: #E2E8F0; /* --border do shop */ --fx-line-soft: #F3F4F6; /* gray-100, bordas de card */ /* marca */ --fx-blue: #0080F0; /* info-900 - azul de acao */ --fx-blue-hover: #0088FF; /* info-800 */ --fx-blue-active: #0056B3; /* info-1050 */ --fx-navy: #00254D; /* info-1100 */ --fx-green: #45A557; /* success-800 - acao de carrinho */ --fx-green-active: #3D994F; /* success-900 */ --fx-danger: #CE2C31; /* error-1000 */ /* texto */ --fx-heading: #11181C; /* grayscale-1100 */ --fx-body: #697177; /* grayscale-1000 */ --fx-muted: #7D868C; /* grayscale-900 */ --fx-on-dark: #FFFFFF; /* tipografia */ --fx-font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif; /* forma */ --fx-radius: 6px; /* botoes, campos - calc(0.5rem - 2px) */ --fx-radius-lg: 8px; /* cards - --radius */ --fx-shadow-2: 0 1px 4px 0 rgba(126,134,140,.30); --fx-shadow-4: 0 1px 8px 0 rgba(126,134,140,.30); --fx-shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1); --fx-transition: .2s ease; /* gradiente de marca do shop */ --fx-gradient: linear-gradient(224deg,#006adc .73%,#00254d 80.85%,#00254d 100.57%); } /* ============================================================ 0. FONTE (corrigido na 2.3) O style.css do tema pai declara `Roboto Condensed` diretamente em #header-top, .width-container e #menu-principal. Como essa fonte deixou de ser carregada (trocada por Montserrat), esses trechos caiam na fonte padrao do navegador - a "fonte estranha" no topo e no menu. Herdar de body nao resolve: as regras do pai sao mais especificas. Por isso a lista explicita abaixo. Note que NAO aparece em lugar nenhum dela, de proposito: os icones do Font Awesome (.fa) dependem da propria font-family e quebrariam em letras soltas se fossem atingidos. ============================================================ */ body, .width-container, #header-top, #header-top div, #header-top p, #header-top span, #header-top a, #menu-principal, #menu-principal li, #menu-principal a, .sf-menu, .sf-menu li, .sf-menu a, .sub-menu, .sub-menu li, .sub-menu a, #main, #main p, #main li, #main td, #main th, #main label, #single-product-pro, #single-product-pro p, #single-product-pro span, #single-product-pro li, #sidebar, #sidebar li, #sidebar a, #widget-area, #widget-area div, #widget-area p, #widget-area span, #widget-area li, #widget-area a, #widget-area h5, footer, footer div, footer p, footer span, footer a{ font-family: var(--fx-font); } /* ============================================================ 1. BASE ============================================================ */ body{ background-color: var(--fx-page); color: var(--fx-body); font-family: var(--fx-font); font-size: 16px; line-height: 1.5; } body p{ color: var(--fx-body); } a{ color: var(--fx-blue); transition: color var(--fx-transition); } a:hover{ color: var(--fx-blue-hover); } /* Container: o shop trava em 1128px, e 1280px acima de 1536px. */ .width-container{ max-width: 1128px; padding-left: 16px; padding-right: 16px; margin-left: auto; margin-right: auto; width: auto; } @media (min-width: 640px){ .width-container{ padding-left: 32px; padding-right: 32px; } } @media (min-width: 1536px){ .width-container{ max-width: 1280px; padding-left: 16px; padding-right: 16px; } } /* ============================================================ 2. TIPOGRAFIA - escala por papel, igual a do shop ============================================================ */ h1,h2,h3,h4,h5,h6, h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{ font-family: var(--fx-font); color: var(--fx-heading); font-weight: 700; } body h1{ font-size: 36px; line-height: 40px; } @media (min-width: 640px){ body h1{ font-size: 48px; line-height: 1; } } body h2, body #main h2{ font-size: 30px; line-height: 36px; } body h3, body #main h3{ font-size: 24px; line-height: 32px; } body h4{ font-size: 20px; line-height: 28px; } body h5{ font-size: 18px; line-height: 28px; } body h6{ font-size: 16px; line-height: 24px; } /* ============================================================ 3. HEADER Faixa de contato clara + barra branca do logo e do menu. ============================================================ */ #header-top{ background-color: var(--fx-strip) !important; border-bottom: 0 !important; padding-top: 12px; padding-bottom: 12px; font-size: 14px; line-height: 20px; } #header-top, #header-top a, #header-top #information-top-left{ color: var(--fx-body) !important; } #header-top a:hover{ color: var(--fx-blue) !important; } header, #logo-container{ background-color: var(--fx-surface) !important; } /* ------------------------------------------------------------------ LOGO (corrigido na 2.3) O style.css do tema pai posiciona o logo com `header h1#logo { float: left; margin: 36px; }`. Como o header.php deste tema filho troca a tag de

para
- para liberar o

da pagina para o conteudo - esse seletor deixou de casar e o logo PERDEU o float. Resultado: logo e menu em linhas separadas e a barra branca com 146px de altura. Aqui o float e reposto por #logo (sem depender da tag) e as margens caem para 16px, dando uma barra de ~72px - a mesma proporcao da navbar do shop, que usa py-4. ------------------------------------------------------------------ */ header #logo, body #logo{ float: left; margin: 16px 0; padding: 0; line-height: 1; } body #logo img{ width: 150px; height: auto; display: block; } /* O