/* ========================================================================== PetZone Dark Mode Styles ========================================================================== This file contains enhanced dark mode styles that complement the CSS variables defined in style.css. The dark theme is activated by adding the `data-theme="dark"` attribute to the element. ========================================================================== */ [data-theme="dark"] { /* Override the warm pet palette with darker, eye-friendly tones */ --pz-cream: #1A1614; --pz-cream-dark: #252019; --pz-brown: #C4946D; --pz-brown-dark: #E5C9A8; --pz-brown-light: #D4B896; --pz-tan: #8B6F4E; --pz-warm-white: #2A2520; --pz-text: #E8DDD0; --pz-text-muted: #A89A8A; --pz-border: #3A332C; --pz-accent: #E8854A; --pz-accent-hover: #F0955A; --pz-success: #7AB85C; --pz-warning: #E8B04A; /* Darker shadows for depth in dark mode */ --pz-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --pz-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --pz-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6); --pz-shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.7); } [data-theme="dark"] body { background-color: var(--pz-cream); color: var(--pz-text); } /* Header in dark mode */ [data-theme="dark"] .pz-header { background: rgba(26, 22, 20, 0.92); border-bottom-color: var(--pz-border); } /* Hero section */ [data-theme="dark"] .pz-hero { background: linear-gradient(135deg, #1A1614 0%, #252019 100%); } [data-theme="dark"] .pz-hero-title { color: var(--pz-brown-dark); } [data-theme="dark"] .pz-hero-subtitle { color: var(--pz-text-muted); } /* Cards in dark mode */ [data-theme="dark"] .pz-post-card, [data-theme="dark"] .pz-widget, [data-theme="dark"] .pz-pet-card, [data-theme="dark"] .pz-recipe-card, [data-theme="dark"] .pz-related-card { background: var(--pz-warm-white); border-color: var(--pz-border); } [data-theme="dark"] .pz-post-card-title a, [data-theme="dark"] .pz-pet-name a { color: var(--pz-brown-dark); } [data-theme="dark"] .pz-post-card-title a:hover, [data-theme="dark"] .pz-pet-name a:hover { color: var(--pz-accent); } /* Post card thumbnail placeholder */ [data-theme="dark"] .pz-post-card-thumbnail, [data-theme="dark"] .pz-pet-photo, [data-theme="dark"] .pz-recipe-header { background: var(--pz-cream-dark); } /* Form elements */ [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="url"], [data-theme="dark"] input[type="search"], [data-theme="dark"] input[type="password"], [data-theme="dark"] textarea, [data-theme="dark"] select { background: var(--pz-cream-dark); color: var(--pz-text); border-color: var(--pz-border); } [data-theme="dark"] input:focus, [data-theme="dark"] textarea:focus, [data-theme="dark"] select:focus { border-color: var(--pz-accent); } /* Search modal */ [data-theme="dark"] .pz-search-modal { background: var(--pz-warm-white); } [data-theme="dark"] .pz-search-result:hover, [data-theme="dark"] .pz-search-result:focus { background: var(--pz-cream-dark); } /* Pagination */ [data-theme="dark"] .pz-page-numbers a, [data-theme="dark"] .pz-page-numbers span { background: var(--pz-warm-white); color: var(--pz-text); border-color: var(--pz-border); } [data-theme="dark"] .pz-page-numbers a:hover { background: var(--pz-brown); color: var(--pz-cream); } [data-theme="dark"] .pz-page-numbers .current { background: var(--pz-accent); color: var(--pz-cream); border-color: var(--pz-accent); } /* Recipe meta */ [data-theme="dark"] .pz-recipe-meta { background: var(--pz-cream-dark); } /* Pet attributes */ [data-theme="dark"] .pz-pet-attr-large { background: var(--pz-cream-dark); } /* Blockquote */ [data-theme="dark"] blockquote { background: var(--pz-cream-dark); color: var(--pz-text-muted); } /* Code/pre */ [data-theme="dark"] code, [data-theme="dark"] pre { background: var(--pz-cream-dark); color: var(--pz-text); } /* Breadcrumbs */ [data-theme="dark"] .pz-breadcrumbs a, [data-theme="dark"] .pz-breadcrumbs { color: var(--pz-text-muted); } /* Single post */ [data-theme="dark"] .pz-single-content { color: var(--pz-text); } [data-theme="dark"] .pz-single-content h2, [data-theme="dark"] .pz-single-content h3, [data-theme="dark"] .pz-single-content h4 { color: var(--pz-brown-dark); } /* Author bio */ [data-theme="dark"] .pz-author-bio { background: var(--pz-warm-white); border-color: var(--pz-border); } /* Comment form */ [data-theme="dark"] .pz-comment-form input, [data-theme="dark"] .pz-comment-form textarea { background: var(--pz-cream-dark); color: var(--pz-text); border-color: var(--pz-border); } /* Smooth transition between themes */ body, .pz-header, .pz-post-card, .pz-widget, .pz-pet-card, .pz-recipe-card, .pz-hero, input, textarea, select, blockquote { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } /* Footer always stays dark-ish even in light mode */ [data-theme="dark"] .pz-footer { background: #0F0C0A; } /* Newsletter section in dark mode */ [data-theme="dark"] .pz-newsletter-section { background: linear-gradient(135deg, #6B4423 0%, #E8854A 100%); } /* Tag chips */ [data-theme="dark"] .pz-tag { background: var(--pz-cream-dark); color: var(--pz-brown-light); } [data-theme="dark"] .pz-tag:hover { background: var(--pz-brown); color: var(--pz-cream); } /* Icon buttons */ [data-theme="dark"] .pz-icon-btn { background: var(--pz-cream-dark); color: var(--pz-brown-light); } [data-theme="dark"] .pz-icon-btn:hover { background: var(--pz-brown); color: var(--pz-cream); } /* Logo gradient */ [data-theme="dark"] .pz-logo-text { background: linear-gradient(135deg, var(--pz-brown-light) 0%, var(--pz-accent) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Selection */ [data-theme="dark"] ::selection { background: var(--pz-accent); color: var(--pz-cream); } /* Scrollbar */ [data-theme="dark"] ::-webkit-scrollbar { width: 12px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--pz-cream); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--pz-tan); border-radius: 6px; border: 3px solid var(--pz-cream); } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--pz-brown); }