/* * Celino Leite — ajustes específicos do WordPress. * O grosso do visual vem de tailwind-compiled.css (exportado do site original). * Aqui só entra o que é específico de WP/plugins: WooCommerce, Contact Form 7, * comentários nativos e tipografia do conteúdo do editor (the_content). */ /* ---------- Esquema de cores: Claro ---------- */ /* * Ativado via Personalizar > Configurações do Site > Aparência (Cores). * O tema aplica a classe "theme-light" ou "theme-dark" na tag * (ver header.php); como todo o design usa variáveis CSS (--background, * --foreground, --accent, etc.), basta redefinir os valores aqui — nenhum * template precisa ser tocado. */ html.theme-light { --background: oklch(98.5% .004 75); --foreground: oklch(22% .02 50); --card: oklch(95.5% .006 75); --card-foreground: oklch(22% .02 50); --popover: oklch(95.5% .006 75); --popover-foreground: oklch(22% .02 50); --primary: oklch(22% .02 50); --primary-foreground: oklch(98.5% .004 75); --secondary: oklch(92% .008 75); --secondary-foreground: oklch(22% .02 50); --muted: oklch(93% .008 75); --muted-foreground: oklch(42% .02 50); --accent: oklch(52% .13 45); --accent-foreground: oklch(99% 0 0); --destructive: oklch(55% .2 27); --destructive-foreground: oklch(98% 0 0); --border: oklch(88% .01 75); --input: oklch(88% .01 75); --ring: oklch(52% .13 45); --sidebar: oklch(95.5% .006 75); --sidebar-foreground: oklch(22% .02 50); --sidebar-primary: oklch(52% .13 45); --sidebar-primary-foreground: oklch(99% 0 0); --sidebar-accent: oklch(92% .008 75); --sidebar-accent-foreground: oklch(22% .02 50); --sidebar-border: oklch(88% .01 75); --sidebar-ring: oklch(52% .13 45); } /* Imagens: no dark original elas ficam com leve grayscale para combinar com o fundo escuro; no claro, mantém a cor mais fiel (menos grayscale) para não ficar "lavado" contra o fundo branco. */ html.theme-light img.grayscale, html.theme-light [class*="grayscale-"] { filter: grayscale(35%); } .cl-post-content h2, .cl-post-content h3, .cl-post-content h4 { font-family: 'Cormorant Garamond', serif; color: var(--foreground); line-height: 1.15; margin-top: 2em; margin-bottom: 0.6em; } .cl-post-content h2 { font-size: 2rem; } .cl-post-content h3 { font-size: 1.5rem; } .cl-post-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .cl-post-content img { border: 1px solid var(--border); margin: 2em 0; } .cl-post-content blockquote { border-left: 2px solid var(--accent); padding-left: 1.5rem; font-style: italic; font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; color: var(--muted-foreground); margin: 2em 0; } .cl-post-content ul, .cl-post-content ol { padding-left: 1.5rem; } .cl-post-content ul { list-style: disc; } .cl-post-content ol { list-style: decimal; } /* ---------- Comentários nativos (usados em páginas/posts, se ativados) ---------- */ .cl-comments .comment-list { list-style: none; margin: 0; padding: 0; } .cl-comments .comment-list li { border-top: 1px solid var(--border); padding: 1.5rem 0; } .cl-comments .comment-form input[type="text"], .cl-comments .comment-form input[type="email"], .cl-comments .comment-form input[type="url"], .cl-comments .comment-form textarea { width: 100%; background: transparent; border: 1px solid var(--border); padding: 0.75rem 1rem; color: var(--foreground); font-size: 0.875rem; margin-bottom: 1rem; } .cl-comments .comment-form input:focus, .cl-comments .comment-form textarea:focus { outline: none; border-color: var(--accent); } .cl-comments .comment-form .submit, .cl-comments .comment-form button { background: var(--foreground); color: var(--background); padding: 0.75rem 1.5rem; font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; border: none; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .cl-comments .comment-form .submit:hover, .cl-comments .comment-form button:hover { background: var(--accent); color: var(--accent-foreground); } /* ---------- Contact Form 7 (Newsletter) ---------- */ .cl-newsletter-form .wpcf7-form { display: flex; flex-direction: column; gap: 0.75rem; } @media ( min-width: 640px ) { .cl-newsletter-form .wpcf7-form-control-wrap:not(.wpcf7-form-control-wrap-submit) { flex: 1; } .cl-newsletter-form .wpcf7 form.wpcf7-form p { display: flex; flex-direction: row; gap: 0.75rem; } } .cl-newsletter-form input[type="email"], .cl-newsletter-form input[type="text"] { width: 100%; background: transparent; border: 1px solid var(--border); padding: 0.75rem 1rem; color: var(--foreground); font-size: 0.875rem; } .cl-newsletter-form input[type="email"]:focus, .cl-newsletter-form input[type="text"]:focus { outline: none; border-color: var(--accent); } .cl-newsletter-form input[type="submit"] { background: var(--foreground); color: var(--background); padding: 0.75rem 1.5rem; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; border: none; cursor: pointer; white-space: nowrap; transition: background-color 0.2s ease, color 0.2s ease; } .cl-newsletter-form input[type="submit"]:hover { background: var(--accent); color: var(--accent-foreground); } .cl-newsletter-form .wpcf7-not-valid-tip { color: #e08585; font-size: 0.75rem; margin-top: 0.25rem; text-align: left; } .cl-newsletter-form .wpcf7-response-output { margin-top: 1rem; border: 1px solid var(--border); padding: 0.75rem 1rem; font-size: 0.8rem; color: var(--muted-foreground); } /* ---------- WooCommerce: reskin geral (dark + serif + accent) ---------- */ .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { background: color-mix( in oklab, var(--card) 40%, transparent ); border: 1px solid var(--border); padding: 1.5rem; } .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce-page ul.products li.product .woocommerce-loop-product__title { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; color: var(--foreground); } .woocommerce ul.products li.product .price, .woocommerce-page ul.products li.product .price, .woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--accent); font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; } .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce-page a.button, .woocommerce-page button.button { background: var(--foreground) !important; color: var(--background) !important; border-radius: 0 !important; padding: 0.65rem 1.5rem !important; font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; border: none !important; transition: background-color 0.2s ease, color 0.2s ease; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce-page a.button:hover { background: var(--accent) !important; color: var(--accent-foreground) !important; } .woocommerce div.product .woocommerce-product-gallery, .woocommerce table.shop_table, .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce-checkout select, .woocommerce-cart table.cart img { border-color: var(--border) !important; } .woocommerce table.shop_table { border: 1px solid var(--border); } .woocommerce table.shop_table th, .woocommerce table.shop_table td { border-color: var(--border) !important; color: var(--foreground); } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce-checkout select, .woocommerce-checkout input[type="text"], .woocommerce-checkout input[type="email"], .woocommerce-checkout input[type="tel"] { background: transparent; color: var(--foreground); padding: 0.6rem 0.85rem; } .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews, .woocommerce-notice { border-top-color: var(--accent) !important; background: color-mix( in oklab, var(--card) 60%, transparent ); color: var(--foreground); } .woocommerce span.onsale { background: var(--accent); color: var(--accent-foreground); border-radius: 0; } .woocommerce nav.woocommerce-pagination ul { border-color: var(--border) !important; } .woocommerce nav.woocommerce-pagination ul li { border-right-color: var(--border) !important; } .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { color: var(--muted-foreground); } .woocommerce nav.woocommerce-pagination ul li a:hover, .woocommerce nav.woocommerce-pagination ul li span.current { background: var(--accent) !important; color: var(--accent-foreground) !important; } /* ---------- Botão flutuante de WhatsApp: pequeno respiro pra não colidir com o rodapé do WooCommerce (barra fixa de carrinho, se algum plugin adicionar) ---------- */ @media ( max-width: 640px ) { .woocommerce-checkout .fixed.bottom-6.right-6 { display: none; } }