/* * ============================================================ * ENCANTO DA JUREMA — Folha de estilo personalizada * Baseada nas cores da Cia Paulista de Velas (logo anexado): * Amarelo dourado : #E8A800 / #F5C518 * Vermelho tijolo : #C0392B / #A93226 * Preto : #1A1A1A * Fundo : #FFFFFF (obrigatório) * * INSTRUÇÕES DE USO: * 1. Salve este arquivo como encanto-jurema.css * 2. Adicione no do seu tema (functions.php ou via * Aparência › Personalizar › CSS adicional no WordPress): * * 3. Para uso no WordPress, pode também colar o conteúdo * inteiro em Aparência › Personalizar › CSS adicional. * NÃO altera nenhuma estrutura HTML. * ============================================================ */ /* ============================================================ VARIÁVEIS GLOBAIS Extraídas do logo: amarelo, vermelho, preto, branco ============================================================ */ :root { --cj-yellow: #E8A800; --cj-yellow-light:#F5C518; --cj-yellow-pale: #FFF8E1; --cj-red: #C0392B; --cj-red-dark: #962d22; --cj-black: #1A1A1A; --cj-charcoal: #2C2C2C; --cj-gray: #6B6B6B; --cj-gray-light: #F2F2F2; --cj-border: #E0E0E0; --cj-white: #FFFFFF; --cj-font-display: 'Georgia', 'Times New Roman', serif; --cj-font-body: system-ui, -apple-system, 'Segoe UI', sans-serif; --cj-radius: 6px; --cj-radius-lg: 12px; --cj-shadow: 0 2px 12px rgba(0,0,0,0.08); --cj-shadow-hover: 0 6px 24px rgba(0,0,0,0.14); --cj-transition: 0.25s ease; } /* ============================================================ BASE — corpo, links, tipografia global ============================================================ */ body { font-family: var(--cj-font-body) !important; background-color: var(--cj-white) !important; color: var(--cj-charcoal) !important; font-size: 15px !important; line-height: 1.7 !important; -webkit-font-smoothing: antialiased; } a { color: var(--cj-red) !important; text-decoration: none !important; transition: color var(--cj-transition) !important; } a:hover, a:focus { color: var(--cj-yellow) !important; text-decoration: none !important; } h1, h2, h3, h4, h5, h6 { font-family: var(--cj-font-display) !important; color: var(--cj-black) !important; line-height: 1.25 !important; font-weight: 700 !important; } p { color: var(--cj-charcoal) !important; } /* ============================================================ BARRA DE ADMIN WORDPRESS — mantém funcional, apenas limpa ============================================================ */ #wpadminbar { background: var(--cj-black) !important; border-bottom: 2px solid var(--cj-yellow) !important; } #wpadminbar a, #wpadminbar .ab-item { color: #eee !important; } #wpadminbar .ab-item:hover, #wpadminbar a:hover { background: var(--cj-red) !important; color: var(--cj-white) !important; } /* Badge "Ao vivo" — cor da marca */ #wp-admin-bar-woocommerce-site-visibility-badge a.ab-item, #wp-admin-bar-woocommerce-site-visibility-badge.woocommerce-site-status-badge-live a.ab-item { background: var(--cj-yellow) !important; color: var(--cj-black) !important; border-radius: 3px !important; } /* ============================================================ LAYOUT PRINCIPAL — skip link e blocos ============================================================ */ .wp-site-blocks { background: var(--cj-white) !important; } /* ============================================================ HEADER / CABEÇALHO ============================================================ */ .wp-block-template-part:first-of-type, header.wp-block-template-part { background: var(--cj-white) !important; border-bottom: 3px solid var(--cj-yellow) !important; position: sticky !important; top: 0 !important; z-index: 100 !important; box-shadow: 0 2px 16px rgba(0,0,0,0.09) !important; } /* ============================================================ LOGO — substitui o texto "CIA PAULISTA DE VELAS" pela imagem do logo usando CSS puro (sem alterar HTML). Ajuste o caminho em url() para o endereço real do logo no seu servidor WordPress, por exemplo: url('/wp-content/uploads/2025/logo-cia-paulista.png') ============================================================ */ .wp-block-site-title, p.wp-block-site-title, h2.wp-block-site-title { /* Esconde o container de texto */ font-size: 0 !important; line-height: 0 !important; color: transparent !important; } p.wp-block-site-title { min-height: 110px; } .wp-block-site-title a, p.wp-block-site-title a, h2.wp-block-site-title a { /* Oculta o texto mantendo o link clicável */ font-size: 0 !important; color: transparent !important; text-decoration: none !important; /* Exibe o logo como imagem de fundo */ display: inline-block !important; background-image: url('https://www.ciapaulistadevelas.com.br/wp-content/uploads/2026/05/logo-cia-de-velas-1.png') !important; /* ↑ SUBSTITUA pela URL real do logo, ex: url('/wp-content/uploads/2025/logo-cia-paulista.png') O logo do arquivo é circular (fundo amarelo, chama vermelha). Recomenda-se versão retangular/horizontal ou PNG com fundo transparente. */ background-repeat: no-repeat !important; background-size: contain !important; background-position: left center !important; min-width: 160px !important; /* ajuste conforme tamanho real do logo */ min-height: 100px !important; /* ajuste conforme tamanho real do logo */ vertical-align: middle !important; transition: opacity 0.2s ease !important; color: transparent !important; font-size: 0 !important; } .wp-block-site-title a:hover, p.wp-block-site-title a:hover, h2.wp-block-site-title a:hover { opacity: 0.85 !important; color: transparent !important; } /* ============================================================ NAVEGAÇÃO PRINCIPAL ============================================================ */ .wp-block-navigation, .wp-block-navigation-item__content, .wp-block-pages-list__item__link, .wp-block-navigation-item__label { font-family: var(--cj-font-body) !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: var(--cj-charcoal) !important; } .wp-block-navigation-item__content:hover, .wp-block-pages-list__item__link:hover { color: var(--cj-red) !important; } /* Menu mobile overlay */ .wp-block-navigation__responsive-container { background: var(--cj-black) !important; } .wp-block-navigation__responsive-container .wp-block-navigation-item__content, .wp-block-navigation__responsive-container .wp-block-pages-list__item__link { color: var(--cj-white) !important; } .wp-block-navigation__responsive-container .wp-block-navigation-item__content:hover, .wp-block-navigation__responsive-container .wp-block-pages-list__item__link:hover { color: var(--cj-yellow) !important; } /* Botão hamburguer */ .wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close { color: var(--cj-charcoal) !important; background: transparent !important; border: none !important; } .wp-block-navigation__responsive-container-open:hover svg path, .wp-block-navigation__responsive-container-close:hover svg path { fill: var(--cj-red) !important; } /* Ícones de conta e carrinho */ .wc-block-customer-account__account-icon, .wc-block-mini-cart__icon { color: var(--cj-charcoal) !important; transition: color var(--cj-transition) !important; } .wp-block-woocommerce-customer-account a:hover .wc-block-customer-account__account-icon, .wc-block-mini-cart__button:hover .wc-block-mini-cart__icon { color: var(--cj-red) !important; } /* Badge do mini-cart */ .wc-block-mini-cart__badge { background: var(--cj-red) !important; color: var(--cj-white) !important; font-size: 10px !important; font-weight: 700 !important; border-radius: 50% !important; min-width: 18px !important; height: 18px !important; line-height: 18px !important; } /* ============================================================ BREADCRUMB ============================================================ */ .woocommerce-breadcrumb, .wc-block-breadcrumbs { font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0.04em !important; color: var(--cj-gray) !important; padding: 10px 0 !important; } .woocommerce-breadcrumb a, .wc-block-breadcrumbs a { color: var(--cj-gray) !important; } .woocommerce-breadcrumb a:hover, .wc-block-breadcrumbs a:hover { color: var(--cj-red) !important; } /* ============================================================ PÁGINA DE PRODUTO — layout principal ============================================================ */ .wp-block-columns.alignwide { background: var(--cj-white) !important; } /* Galeria de imagens */ .woocommerce-product-gallery { background: var(--cj-gray-light) !important; border-radius: var(--cj-radius-lg) !important; overflow: hidden !important; border: 1px solid var(--cj-border) !important; } .woocommerce-product-gallery__wrapper img { border-radius: var(--cj-radius) !important; transition: transform 0.4s ease !important; } .woocommerce-product-gallery__trigger { background: var(--cj-white) !important; border: 1px solid var(--cj-border) !important; border-radius: 50% !important; padding: 6px !important; box-shadow: var(--cj-shadow) !important; transition: background var(--cj-transition) !important; } .woocommerce-product-gallery__trigger:hover { background: var(--cj-yellow-pale) !important; border-color: var(--cj-yellow) !important; } /* Thumbnails da galeria */ .flex-control-thumbs li img { border-radius: var(--cj-radius) !important; border: 2px solid transparent !important; transition: border-color var(--cj-transition) !important; opacity: 0.7 !important; } .flex-control-thumbs li img:hover, .flex-control-thumbs li img.flex-active { border-color: var(--cj-yellow) !important; opacity: 1 !important; } /* ============================================================ INFORMAÇÕES DO PRODUTO — título, preço, descrição ============================================================ */ /* H1 do produto */ .wp-block-post-title { font-family: var(--cj-font-display) !important; font-size: clamp(22px, 3vw, 32px) !important; font-weight: 800 !important; color: var(--cj-black) !important; line-height: 1.2 !important; margin-bottom: 12px !important; padding: 0 !important; } /* Preço */ .wc-block-components-product-price, .woocommerce-Price-amount, .wp-block-woocommerce-product-price .woocommerce-Price-amount { font-size: 28px !important; font-weight: 800 !important; color: var(--cj-red) !important; letter-spacing: -0.02em !important; } .woocommerce-Price-amount bdi { color: var(--cj-red) !important; } .woocommerce-Price-currencySymbol { font-size: 0.65em !important; vertical-align: super !important; color: var(--cj-red) !important; } /* Preço riscado (preço original em promoção) */ del .woocommerce-Price-amount, del .woocommerce-Price-amount bdi { color: var(--cj-gray) !important; font-size: 0.75em !important; opacity: 0.7 !important; } /* Resumo / excerpt do produto */ .wp-block-post-excerpt, .wp-block-post-excerpt__excerpt, .woocommerce-product-details__short-description, .woocommerce-product-details__short-description p { font-size: 14.5px !important; color: var(--cj-gray) !important; line-height: 1.7 !important; border-left: 3px solid var(--cj-yellow) !important; padding-left: 14px !important; margin: 12px 0 18px !important; } /* Metadados (categoria) */ .wp-block-woocommerce-product-meta, .taxonomy-product_cat { font-size: 12px !important; color: var(--cj-gray) !important; letter-spacing: 0.04em !important; } .taxonomy-product_cat .wp-block-post-terms__prefix { color: var(--cj-gray) !important; font-weight: 400 !important; } .taxonomy-product_cat a { background: var(--cj-yellow-pale) !important; color: var(--cj-red) !important; padding: 2px 10px !important; border-radius: 20px !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; border: 1px solid rgba(232,168,0,0.3) !important; } .taxonomy-product_cat a:hover { background: var(--cj-yellow) !important; color: var(--cj-black) !important; } /* ============================================================ FORMULÁRIO — ADICIONAR AO CARRINHO ============================================================ */ /* Input de quantidade */ .quantity, .wc-block-components-quantity-selector { border: 1.5px solid var(--cj-border) !important; border-radius: var(--cj-radius) !important; background: var(--cj-white) !important; overflow: hidden !important; } .quantity input.qty, .wc-block-components-quantity-selector input { font-size: 15px !important; font-weight: 700 !important; color: var(--cj-black) !important; background: transparent !important; border: none !important; text-align: center !important; padding: 10px 8px !important; min-width: 48px !important; } .quantity input.qty:focus, .wc-block-components-quantity-selector input:focus { outline: none !important; box-shadow: inset 0 0 0 2px var(--cj-yellow) !important; } /* Botões +/- do stepper */ .wc-block-components-quantity-selector__button { color: var(--cj-charcoal) !important; font-size: 18px !important; font-weight: 700 !important; opacity: 1 !important; padding: 0 12px !important; transition: background var(--cj-transition), color var(--cj-transition) !important; } .wc-block-components-quantity-selector__button:hover { background: var(--cj-yellow-pale) !important; color: var(--cj-red) !important; opacity: 1 !important; } /* ============================================================ BOTÃO PRINCIPAL — "Adicionar ao carrinho" ============================================================ */ .single_add_to_cart_button, button.single_add_to_cart_button, .wp-element-button.single_add_to_cart_button, .wc-block-add-to-cart-form .single_add_to_cart_button, input[type="submit"].single_add_to_cart_button { background: var(--cj-red) !important; color: var(--cj-white) !important; font-family: var(--cj-font-body) !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; padding: 13px 28px !important; border: 2px solid var(--cj-red) !important; border-radius: var(--cj-radius) !important; cursor: pointer !important; transition: background var(--cj-transition), border-color var(--cj-transition), transform 0.15s !important; box-shadow: 0 3px 10px rgba(192,57,43,0.25) !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; } .single_add_to_cart_button:hover, .single_add_to_cart_button:focus, button.single_add_to_cart_button:hover { background: var(--cj-red-dark) !important; border-color: var(--cj-red-dark) !important; color: var(--cj-white) !important; transform: translateY(-1px) !important; box-shadow: 0 5px 16px rgba(192,57,43,0.35) !important; } .single_add_to_cart_button:active { transform: translateY(0) !important; } /* Botão loading */ .single_add_to_cart_button.loading { opacity: 0.8 !important; background: var(--cj-yellow) !important; border-color: var(--cj-yellow) !important; color: var(--cj-black) !important; } /* ============================================================ ABAS — Descrição / Avaliações ============================================================ */ .woocommerce-tabs, .wc-tabs-wrapper { margin-top: 32px !important; border-top: 2px solid var(--cj-border) !important; padding-top: 0 !important; } ul.tabs.wc-tabs { display: flex !important; gap: 0 !important; border-bottom: 2px solid var(--cj-border) !important; padding: 0 !important; margin-bottom: 28px !important; list-style: none !important; } ul.tabs.wc-tabs li { border: none !important; background: transparent !important; border-radius: 0 !important; margin: 0 !important; } ul.tabs.wc-tabs li a { display: block !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: var(--cj-gray) !important; padding: 12px 24px !important; border-bottom: 3px solid transparent !important; margin-bottom: -2px !important; transition: color var(--cj-transition), border-color var(--cj-transition) !important; } ul.tabs.wc-tabs li.active a, ul.tabs.wc-tabs li a:hover { color: var(--cj-red) !important; border-bottom-color: var(--cj-red) !important; } /* Conteúdo das abas */ .woocommerce-Tabs-panel, .wc-tab { background: var(--cj-white) !important; padding: 0 !important; } .woocommerce-Tabs-panel h2 { font-size: 18px !important; color: var(--cj-black) !important; margin-bottom: 16px !important; padding-bottom: 10px !important; border-bottom: 1px solid var(--cj-border) !important; } .woocommerce-Tabs-panel p { font-size: 14.5px !important; line-height: 1.8 !important; color: var(--cj-charcoal) !important; } /* ============================================================ SEÇÃO DE AVALIAÇÕES ============================================================ */ .woocommerce-Reviews-title { font-size: 18px !important; color: var(--cj-black) !important; } .woocommerce-noreviews { color: var(--cj-gray) !important; font-style: italic !important; } /* Estrelas */ .stars a { color: var(--cj-yellow) !important; font-size: 20px !important; } .stars a:hover, .stars a.active { color: var(--cj-yellow) !important; } /* Formulário de avaliação */ #respond, .comment-respond { background: var(--cj-gray-light) !important; padding: 24px !important; border-radius: var(--cj-radius-lg) !important; border: 1px solid var(--cj-border) !important; } .comment-reply-title { font-size: 16px !important; font-weight: 700 !important; color: var(--cj-black) !important; } .comment-form label { font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: var(--cj-gray) !important; } .comment-form input[type="text"], .comment-form input[type="email"], .comment-form textarea, #comment { width: 100% !important; border: 1.5px solid var(--cj-border) !important; border-radius: var(--cj-radius) !important; padding: 10px 14px !important; font-family: var(--cj-font-body) !important; font-size: 14px !important; color: var(--cj-black) !important; background: var(--cj-white) !important; transition: border-color var(--cj-transition) !important; } .comment-form input:focus, .comment-form textarea:focus { border-color: var(--cj-yellow) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(232,168,0,0.15) !important; } /* Botão enviar avaliação */ .form-submit .submit, #submit, .wp-block-button__link.submit, .wp-element-button.submit { background: var(--cj-yellow) !important; color: var(--cj-black) !important; font-weight: 700 !important; font-size: 13px !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; border: none !important; border-radius: var(--cj-radius) !important; padding: 12px 28px !important; cursor: pointer !important; transition: background var(--cj-transition), transform 0.15s !important; } .form-submit .submit:hover, #submit:hover { background: var(--cj-yellow-light) !important; transform: translateY(-1px) !important; } /* ============================================================ BOTÕES GENÉRICOS WooCommerce / WordPress ============================================================ */ .wp-element-button, .wc-block-components-button, .button:not(.single_add_to_cart_button):not(.submit) { background: var(--cj-yellow) !important; color: var(--cj-black) !important; font-family: var(--cj-font-body) !important; font-weight: 700 !important; font-size: 13px !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; border: none !important; border-radius: var(--cj-radius) !important; padding: 11px 22px !important; cursor: pointer !important; transition: background var(--cj-transition), color var(--cj-transition) !important; } .wp-element-button:hover, .wc-block-components-button:hover, .button:not(.single_add_to_cart_button):not(.submit):hover { background: var(--cj-yellow-light) !important; color: var(--cj-black) !important; } /* Botão secundário / outline */ .wc-block-components-button--secondary { background: transparent !important; border: 2px solid var(--cj-yellow) !important; color: var(--cj-black) !important; } .wc-block-components-button--secondary:hover { background: var(--cj-yellow-pale) !important; } /* ============================================================ MINI CART / DRAWER ============================================================ */ .wc-block-mini-cart__drawer, .wc-block-components-drawer { background: var(--cj-white) !important; border-left: 3px solid var(--cj-yellow) !important; } .wc-block-mini-cart__title { font-family: var(--cj-font-display) !important; font-size: 18px !important; font-weight: 700 !important; color: var(--cj-black) !important; } .wc-block-mini-cart__footer { border-top: 2px solid var(--cj-border) !important; } /* ============================================================ FOOTER / RODAPÉ ============================================================ */ footer.wp-block-template-part, .wp-block-template-part:last-of-type { background: var(--cj-black) !important; border-top: 4px solid var(--cj-yellow) !important; /*margin-top: 48px !important;*/ } footer.wp-block-template-part *, .wp-block-template-part:last-of-type * { color: rgba(255,255,255,0.75) !important; } /* Footer: restaura o texto do nome da loja (sem imagem de fundo) */ footer .wp-block-site-title, footer p.wp-block-site-title, footer h2.wp-block-site-title { font-size: 1.2rem !important; line-height: 1.4 !important; color: var(--cj-yellow) !important; } footer .wp-block-site-title a, footer h2.wp-block-site-title a, footer p.wp-block-site-title a { background-image: none !important; width: auto !important; height: auto !important; font-family: var(--cj-font-display) !important; font-size: 1.2rem !important; font-weight: 800 !important; color: var(--cj-yellow) !important; text-transform: uppercase !important; display: inline !important; } footer .wp-block-site-title a:hover, footer h2.wp-block-site-title a:hover { color: var(--cj-yellow-light) !important; opacity: 1 !important; } footer .wp-block-navigation-item__content, footer .wp-block-navigation-item__label, footer .wp-block-navigation a { color: rgba(255,255,255,0.6) !important; font-size: 13px !important; font-weight: 400 !important; transition: color var(--cj-transition) !important; } footer .wp-block-navigation-item__content:hover, footer .wp-block-navigation a:hover { color: var(--cj-yellow) !important; } /* Linha de rodapé (Twenty Twenty-Five / WordPress) */ footer .has-small-font-size { font-size: 11px !important; color: rgba(255,255,255,0.35) !important; } footer .has-small-font-size a { color: var(--cj-yellow) !important; } footer .has-small-font-size a:hover { color: var(--cj-yellow-light) !important; } /* ============================================================ NOTICES — avisos WooCommerce ============================================================ */ .woocommerce-message, .wc-block-components-notice-banner--success { border-left: 4px solid var(--cj-yellow) !important; background: var(--cj-yellow-pale) !important; color: var(--cj-black) !important; border-radius: var(--cj-radius) !important; padding: 14px 18px !important; } .woocommerce-error, .wc-block-components-notice-banner--error { border-left: 4px solid var(--cj-red) !important; background: #fff5f5 !important; color: var(--cj-red-dark) !important; border-radius: var(--cj-radius) !important; } .woocommerce-info, .wc-block-components-notice-banner--info { border-left: 4px solid var(--cj-yellow) !important; background: var(--cj-yellow-pale) !important; border-radius: var(--cj-radius) !important; } /* ============================================================ SEPARADORES / DIVISORES ============================================================ */ hr, .wp-block-separator { border-color: var(--cj-border) !important; border-width: 1px !important; } /* ============================================================ RESPONSIVIDADE — ajustes mobile ============================================================ */ @media (max-width: 768px) { .wp-block-post-title { font-size: 22px !important; } .wp-block-site-title p { color: transparent !important; font-size: 0 !important; } .woocommerce-Price-amount, .wc-block-components-product-price { font-size: 22px !important; } .single_add_to_cart_button, button.single_add_to_cart_button { width: 100% !important; justify-content: center !important; padding: 15px 20px !important; font-size: 15px !important; } ul.tabs.wc-tabs li a { padding: 10px 14px !important; font-size: 11px !important; } #respond { padding: 16px !important; } } @media (max-width: 480px) { .wp-block-site-title, .wp-block-site-title a, p.wp-block-site-title a { font-size: 0 !important; } } /* ============================================================ ACESSIBILIDADE — foco visível ============================================================ */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--cj-yellow) !important; outline-offset: 2px !important; border-radius: 3px !important; } /* ============================================================ DETALHES EXTRAS — polimento visual ============================================================ */ /* Linhas zebradas suaves no conteúdo de listas */ .woocommerce-Tabs-panel ul li { padding: 4px 0 4px 20px !important; position: relative !important; color: var(--cj-charcoal) !important; } .woocommerce-Tabs-panel ul li::before { content: '' !important; position: absolute !important; left: 0 !important; top: 50% !important; transform: translateY(-50%) !important; width: 6px !important; height: 6px !important; background: var(--cj-yellow) !important; border-radius: 50% !important; } /* Animação sutil no hover da imagem do produto */ .woocommerce-product-gallery__image:hover img { transform: scale(1.02) !important; transition: transform 0.4s ease !important; } /* Selo de preço em destaque — contorno dourado sutil */ .wc-block-components-product-price { display: inline-flex !important; align-items: baseline !important; gap: 4px !important; background: var(--cj-yellow-pale) !important; border: 1.5px solid rgba(232,168,0,0.35) !important; border-radius: var(--cj-radius) !important; padding: 6px 14px !important; margin-bottom: 4px !important; } /* Suaviza transições de scroll */ html { scroll-behavior: smooth !important; } /* Skip link acessível */ #wp-skip-link { background: var(--cj-yellow) !important; color: var(--cj-black) !important; font-weight: 700 !important; padding: 8px 16px !important; }