/* */ :root{--wfb-midnight:#0a0a0f;--wfb-obsidian:#12121a;--wfb-obsidian-light:#1a1a24;--wfb-amethyst:#8b5cf6;--wfb-amethyst-glow:rgba(139,92,246,0.3);--wfb-gold:#d4af37;--wfb-gold-glow:rgba(212,175,55,0.3);--wfb-moonlight:#f4f4f5;--wfb-silver:#a1a1aa;--wfb-mist:rgba(244,244,245,0.6);--wfb-gradient-hero:linear-gradient(135deg,#0a0a0f 0%,#1a0d2e 35%,#2d1b4e 50%,#1a0d2e 65%,#0a0a0f 100%);--wfb-gradient-card:linear-gradient(180deg,#12121a 0%,#0f0f15 100%);--wfb-gradient-accent:linear-gradient(135deg,#8b5cf6 0%,#6366f1 100%);--wfb-font-body:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--wfb-font-heading:'Cinzel',Georgia,'Times New Roman',serif;--wfb-space-xs:0.25rem;--wfb-space-sm:0.5rem;--wfb-space-md:1rem;--wfb-space-lg:1.5rem;--wfb-space-xl:2rem;--wfb-space-2xl:3rem;--wfb-space-3xl:4rem;--wfb-border-subtle:1px solid rgba(139,92,246,0.15);--wfb-border-hover:1px solid rgba(139,92,246,0.4);--wfb-radius-sm:6px;--wfb-radius-md:8px;--wfb-radius-lg:12px;--wfb-shadow-card:0 4px 20px rgba(0,0,0,0.3);--wfb-shadow-glow:0 0 30px var(--wfb-amethyst-glow);--wfb-max-width:1200px;--wfb-sidebar-width:300px;--wfb-header-height:70px;--wfb-header-height-mobile:60px;}*,*::before,*::after{box-sizing:border-box;}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}body{margin:0;font-family:var(--wfb-font-body);font-size:1rem;line-height:1.7;background-color:var(--wfb-midnight);color:var(--wfb-moonlight);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;}body::before,body::after{display:none !important;content:none !important;}h1,h2,h3,h4,h5,h6,.entry-title,.page-title,.widget-title,.ct-module-title{font-family:var(--wfb-font-heading);color:var(--wfb-gold);font-weight:400;line-height:1.2;margin-top:0;letter-spacing:0.02em;}h1,.entry-title{font-size:clamp(2rem,5vw,3rem);}h2{font-size:clamp(1.5rem,4vw,2.25rem);}h3{font-size:clamp(1.25rem,3vw,1.75rem);}h4{font-size:clamp(1.125rem,2.5vw,1.5rem);}p{margin-top:0;margin-bottom:var(--wfb-space-md);}a{color:var(--wfb-amethyst);text-decoration:none;transition:color 0.2s ease;}a:hover,a:focus{color:var(--wfb-gold);}.container,.ct-container,.alignwide{max-width:var(--wfb-max-width);margin-left:auto;margin-right:auto;padding-left:var(--wfb-space-md);padding-right:var(--wfb-space-md);}.site-content,main,.main-content{contain:layout style;}.content-area{display:grid;grid-template-columns:1fr var(--wfb-sidebar-width);gap:var(--wfb-space-xl);align-items:start;}@media (max-width:991px){.content-area{grid-template-columns:1fr;}}.ct-header,.site-header,header[data-id]{position:sticky;top:0;z-index:100;background:rgba(10,10,15,0.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:var(--wfb-border-subtle);height:var(--wfb-header-height);contain:layout style;}.ct-header .site-title,.site-branding .site-title{font-family:var(--wfb-font-heading);color:var(--wfb-gold);font-size:1.5rem;margin:0;}.ct-header nav a,.main-navigation a,.menu-item a{color:var(--wfb-moonlight);font-size:0.9rem;font-weight:500;padding:var(--wfb-space-sm) var(--wfb-space-md);transition:color 0.2s ease;}.ct-header nav a:hover,.menu-item a:hover,.current-menu-item a{color:var(--wfb-amethyst);}@media (max-width:767px){.ct-header,.site-header{height:var(--wfb-header-height-mobile);}}.ct-hero-section,.hero-section,.ct-custom-hero,.page-header,.archive-header{min-height:60vh;background:var(--wfb-gradient-hero);display:flex;align-items:center;justify-content:center;text-align:center;padding:var(--wfb-space-3xl) var(--wfb-space-md);position:relative;contain:layout;}.ct-hero-section::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(139,92,246,0.08) 0%,transparent 50%),radial-gradient(circle at 70% 70%,rgba(212,175,55,0.05) 0%,transparent 50%);pointer-events:none;}.hero-content,.ct-hero-section .container{position:relative;z-index:2;max-width:800px;}.hero-title,.ct-hero-section h1,.page-title{font-size:clamp(2.5rem,6vw,4rem);color:var(--wfb-moonlight);text-shadow:0 4px 20px rgba(0,0,0,0.5);margin-bottom:var(--wfb-space-lg);}.hero-tagline,.ct-hero-section .tagline,.archive-description{font-size:clamp(1rem,2vw,1.25rem);color:var(--wfb-silver);max-width:600px;margin:0 auto var(--wfb-space-xl);}.hero-cta,.ct-button,.wp-block-button__link,button[type="submit"]{display:inline-block;background:var(--wfb-gradient-accent);color:var(--wfb-moonlight);font-family:var(--wfb-font-body);font-weight:600;font-size:1rem;padding:var(--wfb-space-md) var(--wfb-space-xl);border:none;border-radius:var(--wfb-radius-md);cursor:pointer;box-shadow:var(--wfb-shadow-glow);transition:transform 0.2s ease,box-shadow 0.2s ease;}.hero-cta:hover,.ct-button:hover,.wp-block-button__link:hover{transform:translateY(-2px);box-shadow:0 0 40px var(--wfb-amethyst-glow);color:var(--wfb-moonlight);}@media (max-width:767px){.ct-hero-section,.hero-section{min-height:50vh;padding:var(--wfb-space-xl) var(--wfb-space-md);}}.post-grid,.ct-posts-grid,.wp-block-post-template,.entries{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--wfb-space-xl);margin-bottom:var(--wfb-space-2xl);}.post-card,.ct-posts-grid article,.wp-block-post,article.post,article.page{background:var(--wfb-gradient-card);border:var(--wfb-border-subtle);border-radius:var(--wfb-radius-lg);overflow:hidden;contain:layout style;transition:border-color 0.2s ease,box-shadow 0.2s ease;}.post-card:hover,.ct-posts-grid article:hover,article.post:hover{border-color:rgba(139,92,246,0.4);box-shadow:var(--wfb-shadow-glow);}.post-card-image,.ct-posts-grid .ct-image-container,.wp-block-post-featured-image,.post-thumbnail{aspect-ratio:16 / 9;width:100%;overflow:hidden;background:var(--wfb-obsidian);}.post-card-image img,.ct-posts-grid img,.post-thumbnail img,.wp-post-image{width:100%;height:100%;object-fit:cover;transition:transform 0.3s ease;}.post-card:hover img,article:hover .post-thumbnail img{transform:scale(1.03);}.post-card-content,.ct-posts-grid .entry-card-content,.entry-content-wrapper{padding:var(--wfb-space-lg);}.post-card-title,.ct-posts-grid .entry-title,.entry-title a{font-family:var(--wfb-font-heading);font-size:1.25rem;color:var(--wfb-amethyst);margin-bottom:var(--wfb-space-sm);line-height:1.3;}.post-card-title a:hover,.entry-title a:hover{color:var(--wfb-gold);}.post-card-excerpt,.ct-posts-grid .entry-excerpt,.entry-summary{color:var(--wfb-silver);font-size:0.95rem;line-height:1.6;margin-bottom:var(--wfb-space-md);}.post-card-meta,.entry-meta{font-size:0.8rem;color:var(--wfb-mist);}.post-card-meta a,.entry-meta a{color:var(--wfb-gold);}.read-more,.ct-posts-grid .entry-button,.more-link{display:inline-flex;align-items:center;gap:var(--wfb-space-xs);color:var(--wfb-amethyst);font-weight:500;font-size:0.9rem;margin-top:var(--wfb-space-sm);}.read-more:hover,.more-link:hover{color:var(--wfb-gold);}.sidebar,.widget-area,aside[data-id]{contain:layout style;}.widget,.sidebar-widget,.ct-widget{background:var(--wfb-obsidian);border:var(--wfb-border-subtle);border-radius:var(--wfb-radius-md);padding:var(--wfb-space-lg);margin-bottom:var(--wfb-space-xl);}.widget-title,.ct-widget .widget-title{font-family:var(--wfb-font-heading);font-size:1.125rem;color:var(--wfb-amethyst);margin-bottom:var(--wfb-space-md);padding-bottom:var(--wfb-space-sm);border-bottom:var(--wfb-border-subtle);}.widget ul,.widget ol{list-style:none;margin:0;padding:0;}.widget li{padding:var(--wfb-space-sm) 0;border-bottom:1px solid rgba(139,92,246,0.08);}.widget li:last-child{border-bottom:none;}.widget a{color:var(--wfb-moonlight);opacity:0.85;}.widget a:hover{color:var(--wfb-amethyst);opacity:1;}.ad-sidebar,.sidebar [class*="ezoic"],.widget-area [class*="ezoic"],.sidebar [id*="ezoic"]{min-width:300px;min-height:600px;background:var(--wfb-obsidian);border:var(--wfb-border-subtle);border-radius:var(--wfb-radius-md);margin-bottom:var(--wfb-space-xl);contain:layout size style;content-visibility:auto;contain-intrinsic-size:300px 600px;}.ad-content,.entry-content [class*="ezoic"],article [class*="ezoic"],.post-content [class*="ezoic"]{max-width:336px;min-height:280px;background:var(--wfb-obsidian);border:var(--wfb-border-subtle);border-radius:var(--wfb-radius-md);margin:var(--wfb-space-xl) auto;contain:layout size style;content-visibility:auto;contain-intrinsic-size:336px 280px;}@media (max-width:767px){.ad-sidebar,.sidebar [class*="ezoic"],[class*="ezoic"]{min-width:300px;min-height:250px;contain-intrinsic-size:300px 250px;}.ad-content,.entry-content [class*="ezoic"]{max-width:100%;min-height:250px;contain-intrinsic-size:300px 250px;}}header [class*="ezoic"],footer [class*="ezoic"],.site-header [class*="ezoic"],.site-footer [class*="ezoic"]{min-height:90px;width:100%;max-width:728px;margin:0 auto;contain:layout size style;contain-intrinsic-size:728px 90px;}[class*="ezoic"],[id*="ezoic"],.ezoic-ad,div[data-ez-name]{contain:layout size style !important;content-visibility:auto !important;}.single-post .entry-content,.page .entry-content,.post-content{font-size:1.05rem;line-height:1.8;color:var(--wfb-moonlight);}.entry-content h2,.entry-content h3,.entry-content h4{color:var(--wfb-amethyst);margin-top:var(--wfb-space-2xl);margin-bottom:var(--wfb-space-md);}.entry-content p,.entry-content ul,.entry-content ol{margin-bottom:var(--wfb-space-lg);}.entry-content ul,.entry-content ol{padding-left:var(--wfb-space-xl);}.entry-content li{margin-bottom:var(--wfb-space-sm);}.entry-content blockquote{border-left:4px solid var(--wfb-amethyst);background:var(--wfb-obsidian);padding:var(--wfb-space-lg);margin:var(--wfb-space-xl) 0;font-style:italic;color:var(--wfb-silver);}.entry-content img{max-width:100%;height:auto;border-radius:var(--wfb-radius-md);}.single-post .post-thumbnail,.single-post .ct-featured-image{aspect-ratio:21 / 9;width:100%;margin-bottom:var(--wfb-space-xl);border-radius:var(--wfb-radius-lg);overflow:hidden;}.site-footer,footer.ct-footer,.ct-footer{background:var(--wfb-obsidian);border-top:var(--wfb-border-subtle);padding:var(--wfb-space-3xl) 0 var(--wfb-space-xl);margin-top:var(--wfb-space-3xl);contain:layout style;}.footer-widgets,.ct-footer-widgets{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--wfb-space-xl);margin-bottom:var(--wfb-space-2xl);}.footer-bottom,.ct-footer-bottom{text-align:center;padding-top:var(--wfb-space-xl);border-top:var(--wfb-border-subtle);color:var(--wfb-mist);font-size:0.875rem;}.footer-bottom a{color:var(--wfb-amethyst);}.wcaf-product-box,.wcaf-product-container,[class*="affiliate-product"],[class*="product-box"]{min-height:350px;background:var(--wfb-obsidian);border:var(--wfb-border-subtle);border-radius:var(--wfb-radius-md);padding:var(--wfb-space-lg);contain:layout style;}.wcaf-comparison-table,[class*="comparison-table"]{min-height:500px;contain:layout style;}input[type="text"],input[type="email"],input[type="search"],input[type="url"],textarea,select{width:100%;padding:var(--wfb-space-md);background:var(--wfb-obsidian);border:var(--wfb-border-subtle);border-radius:var(--wfb-radius-sm);color:var(--wfb-moonlight);font-family:var(--wfb-font-body);font-size:1rem;transition:border-color 0.2s ease;}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--wfb-amethyst);}.pagination,.ct-pagination,.nav-links{display:flex;justify-content:center;gap:var(--wfb-space-sm);margin:var(--wfb-space-2xl) 0;}.pagination a,.page-numbers{display:flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:var(--wfb-space-sm) var(--wfb-space-md);background:var(--wfb-obsidian);border:var(--wfb-border-subtle);border-radius:var(--wfb-radius-sm);color:var(--wfb-moonlight);font-weight:500;}.pagination a:hover,.page-numbers:hover{border-color:var(--wfb-amethyst);color:var(--wfb-amethyst);}.pagination .current,.page-numbers.current{background:var(--wfb-gradient-accent);border-color:var(--wfb-amethyst);}.cmplz-cookiebanner,.ct-cookie-consent,#cookie-notice,.cookie-notice,#cmplz-cookiebanner-container{position:fixed !important;bottom:0 !important;left:0 !important;right:0 !important;min-height:100px !important;background:var(--wfb-obsidian) !important;border-top:var(--wfb-border-subtle) !important;z-index:9999 !important;contain:layout style !important;}:focus-visible{outline:2px solid var(--wfb-amethyst);outline-offset:2px;}.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;}}.text-center{text-align:center;}.text-left{text-align:left;}.text-right{text-align:right;}.text-purple{color:var(--wfb-amethyst);}.text-gold{color:var(--wfb-gold);}.text-muted{color:var(--wfb-silver);}.bg-dark{background:var(--wfb-midnight);}.bg-card{background:var(--wfb-obsidian);}.hidden{display:none !important;}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}@media print{body{background:white;color:black;}.site-header,.site-footer,.sidebar,.ad-sidebar,.ad-content,[class*="ezoic"]{display:none !important;}} /* */ /* ===== CSS CUSTOM PROPERTIES (Brand Colors) ===== */ :root { /* Primary Brand Colors */ --wfb-midnight-purple: #2D1B4E; --wfb-mystic-violet: #6B4D8C; --wfb-moonlight-silver: #E8E4EF; --wfb-candlelight-gold: #C9A227; --wfb-deep-amethyst: #4A2C6A; /* Elemental Colors */ --wfb-earth: #8B7355; --wfb-air: #B8D4E3; --wfb-fire: #D4572A; --wfb-water: #4A90A4; --wfb-spirit: #9B7ED9; /* Semantic Colors */ --wfb-bg-dark: #0a0a0f; --wfb-bg-card: #12121a; --wfb-bg-elevated: #1a1025; --wfb-text-primary: #f5f3fa; --wfb-text-secondary: #e8e4f0; --wfb-text-muted: #9d8ec7; /* Typography */ --wfb-font-heading: 'Cinzel', serif; --wfb-font-body: 'Lora', serif; --wfb-font-accent: 'Cormorant Garamond', serif; /* Spacing */ --wfb-space-xs: 0.5rem; --wfb-space-sm: 0.75rem; --wfb-space-md: 1rem; --wfb-space-lg: 1.5rem; --wfb-space-xl: 2rem; --wfb-space-2xl: 3rem; /* Border Radius */ --wfb-radius-sm: 4px; --wfb-radius-md: 8px; --wfb-radius-lg: 12px; --wfb-radius-xl: 16px; --wfb-radius-round: 50%; /* Shadows */ --wfb-shadow-glow-gold: 0 0 20px rgba(201, 162, 39, 0.3); --wfb-shadow-glow-purple: 0 0 20px rgba(107, 77, 140, 0.3); --wfb-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.3); --wfb-shadow-elevated: 0 8px 30px rgba(0, 0, 0, 0.4); } /* ===== GLOBAL TYPOGRAPHY ===== */ body { font-family: var(--wfb-font-body); color: var(--wfb-text-secondary); line-height: 1.7; } h1, h2, h3, h4, h5, h6, .wp-block-heading { font-family: var(--wfb-font-heading); color: var(--wfb-candlelight-gold); letter-spacing: 0.02em; line-height: 1.3; } /* Entry titles */ .entry-title, .post-title, article h1.wp-block-heading, .wp-block-post-title { font-family: var(--wfb-font-heading); color: var(--wfb-candlelight-gold); text-shadow: 0 2px 10px rgba(201, 162, 39, 0.2); } /* Accent text - spells, quotes, magical phrases */ blockquote, .spell-text, .magical-quote, .wp-block-quote p { font-family: var(--wfb-font-accent); font-style: italic; font-size: 1.15em; color: var(--wfb-spirit); } blockquote { border-left: 3px solid var(--wfb-candlelight-gold); padding-left: var(--wfb-space-lg); margin: var(--wfb-space-xl) 0; background: linear-gradient(90deg, rgba(45, 27, 78, 0.3), transparent); padding: var(--wfb-space-lg); border-radius: 0 var(--wfb-radius-md) var(--wfb-radius-md) 0; } /* ===== LINKS ===== */ a { color: var(--wfb-deep-amethyst); text-decoration: none; transition: color 0.2s ease; } a:hover { color: var(--wfb-spirit); } article a, .entry-content a { color: var(--wfb-spirit); border-bottom: 1px solid rgba(155, 126, 217, 0.3); } article a:hover, .entry-content a:hover { color: var(--wfb-candlelight-gold); border-bottom-color: var(--wfb-candlelight-gold); } /* ===== BUTTONS ===== */ .wp-block-button__link, .wfb-btn, button[type="submit"] { font-family: var(--wfb-font-heading); background: linear-gradient(135deg, var(--wfb-mystic-violet), var(--wfb-deep-amethyst)); color: var(--wfb-text-primary); padding: var(--wfb-space-sm) var(--wfb-space-lg); border-radius: var(--wfb-radius-md); border: none; cursor: pointer; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; } .wp-block-button__link:hover, .wfb-btn:hover, button[type="submit"]:hover { background: linear-gradient(135deg, var(--wfb-spirit), var(--wfb-mystic-violet)); transform: translateY(-2px); box-shadow: var(--wfb-shadow-glow-purple); } /* Gold CTA buttons */ .wp-block-button.is-style-fill .wp-block-button__link[style*="background-color:#C9A227"], .wp-block-button.is-style-fill .wp-block-button__link[style*="background-color:#c9a227"], .wfb-btn-gold { background: linear-gradient(135deg, var(--wfb-candlelight-gold), #a88520); color: var(--wfb-midnight-purple); } .wp-block-button.is-style-fill .wp-block-button__link[style*="background-color:#C9A227"]:hover, .wp-block-button.is-style-fill .wp-block-button__link[style*="background-color:#c9a227"]:hover, .wfb-btn-gold:hover { background: linear-gradient(135deg, #e0b82e, var(--wfb-candlelight-gold)); box-shadow: var(--wfb-shadow-glow-gold); } /* ===== CARDS & CONTAINERS ===== */ .wp-block-group.has-background, .wfb-card { border-radius: var(--wfb-radius-lg); transition: transform 0.3s ease, box-shadow 0.3s ease; } .wp-block-group.has-background:hover, .wfb-card:hover { transform: translateY(-3px); box-shadow: var(--wfb-shadow-elevated); } /* ===== FORM INPUTS ===== */ input[type="text"], input[type="email"], input[type="search"], textarea, select { font-family: var(--wfb-font-body); background: var(--wfb-bg-card); border: 1px solid var(--wfb-mystic-violet); color: var(--wfb-text-primary); padding: var(--wfb-space-sm) var(--wfb-space-md); border-radius: var(--wfb-radius-md); transition: border-color 0.2s ease, box-shadow 0.2s ease; } input[type="text"]:focus, input[type="email"]:focus, input[type="search"]:focus, textarea:focus, select:focus { outline: none; border-color: var(--wfb-candlelight-gold); box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.2); } /* ===== SELECTION ===== */ ::selection { background: var(--wfb-mystic-violet); color: var(--wfb-text-primary); } /* ===== SCROLLBAR (Webkit) ===== */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--wfb-bg-dark); } ::-webkit-scrollbar-thumb { background: var(--wfb-mystic-violet); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: var(--wfb-deep-amethyst); } /* ===== HR / SEPARATORS ===== */ hr, .wp-block-separator { border: none; height: 1px; background: linear-gradient(90deg, transparent, var(--wfb-mystic-violet), transparent); margin: var(--wfb-space-xl) 0; } .wp-block-separator.is-style-dots::before { content: '✦ ✧ ✦'; color: var(--wfb-candlelight-gold); letter-spacing: 0.5rem; } /* ===== LISTS ===== */ article ul li::marker, article ol li::marker { color: var(--wfb-candlelight-gold); } /* ===== IMAGES ===== */ article img, .wp-block-image img { border-radius: var(--wfb-radius-md); } .wp-block-image.is-style-rounded img { border-radius: var(--wfb-radius-round); } /* ===== TABLES ===== */ table { border-collapse: collapse; width: 100%; } th { font-family: var(--wfb-font-heading); background: var(--wfb-midnight-purple); color: var(--wfb-candlelight-gold); padding: var(--wfb-space-sm) var(--wfb-space-md); text-align: left; } td { padding: var(--wfb-space-sm) var(--wfb-space-md); border-bottom: 1px solid rgba(107, 77, 140, 0.3); } tr:hover td { background: rgba(107, 77, 140, 0.1); } /* ===== CODE BLOCKS ===== */ code, pre { font-family: 'Fira Code', monospace; background: var(--wfb-bg-card); border-radius: var(--wfb-radius-sm); } code { padding: 0.2em 0.4em; color: var(--wfb-spirit); } pre { padding: var(--wfb-space-md); overflow-x: auto; border: 1px solid var(--wfb-mystic-violet); } /* */ /* === MASTER TABLE COLOR FIXES === */ /* Force readable text on ALL table cells - ultra high specificity */ body table td, body table th, body table tr td, body table tr th, body table tbody td, body table tbody th, body table thead td, body table thead th, body .wp-block-table td, body .wp-block-table th, body .wp-block-table tr td, body .wp-block-table tr th, body figure.wp-block-table td, body figure.wp-block-table th, body article table td, body article table th, body .entry-content table td, body .entry-content table th { color: #e8e4f0 !important; background-color: #1a1025 !important; } /* Table header cells - gold text */ body table th, body table thead th, body table thead td, body .wp-block-table th, body .wp-block-table thead th, body figure.wp-block-table th { color: #d4af37 !important; background: rgba(45, 27, 78, 0.9) !important; font-weight: 600 !important; } /* Even rows - ALWAYS readable text */ body table tr:nth-child(even) td, body table tbody tr:nth-child(even) td, body .wp-block-table tr:nth-child(even) td, body figure.wp-block-table tr:nth-child(even) td, body .entry-content table tr:nth-child(even) td { background: rgba(107, 77, 140, 0.2) !important; color: #e8e4f0 !important; } /* Odd rows - ensure readable text */ body table tr:nth-child(odd) td, body table tbody tr:nth-child(odd) td, body .wp-block-table tr:nth-child(odd) td, body figure.wp-block-table tr:nth-child(odd) td, body .entry-content table tr:nth-child(odd) td { background: rgba(26, 16, 37, 0.8) !important; color: #e8e4f0 !important; } /* Table row hover state */ body table tr:hover td, body table tbody tr:hover td, body .wp-block-table tr:hover td { background: rgba(107, 77, 140, 0.35) !important; color: #f5f3fa !important; } /* Spans and other inline elements inside tables */ body table span, body table strong, body table em, body table b, body table i, body td span, body td strong, body td em, body th span, body th strong { color: inherit !important; } /* === COOKIE CONSENT / PRIVACY MODAL FIXES === */ body .cookie-notice, body .cookie-consent, body .cookie-banner, body .privacy-notice, body .gdpr-notice, body .cc-banner, body .cc-window, body .cc-revoke, body [class*="cookie-notice"], body [class*="cookie-consent"], body [class*="cookie-banner"], body [class*="gdpr"], body [class*="privacy-notice"], body [id*="cookie"], body [id*="consent"], body #moove_gdpr_cookie_info_bar, body .moove-gdpr-info-bar, body .cky-consent-container, body .cky-consent-bar, body .complianz-categories, body .cmplz-cookiebanner, body [class*="cmplz"] { background: linear-gradient(135deg, rgba(26, 16, 37, 0.98) 0%, rgba(45, 27, 78, 0.98) 100%) !important; border: 1px solid rgba(107, 77, 140, 0.4) !important; color: #e8e4f0 !important; } /* Cookie consent text */ body .cookie-notice p, body .cookie-notice span, body .cookie-consent p, body .cookie-banner p, body .cc-message, body .cc-window p, body [class*="cookie"] p, body [class*="cookie"] span, body [class*="consent"] p, body [class*="gdpr"] p, body [class*="cmplz"] p, body [class*="cmplz"] span, body .cky-notice-des, body .cky-title, body .complianz-categories * { color: #e8e4f0 !important; } /* Cookie consent links */ body .cookie-notice a, body .cookie-consent a, body .cc-link, body .cc-window a, body [class*="cookie"] a, body [class*="consent"] a, body [class*="cmplz"] a { color: #d4af37 !important; } /* Cookie consent buttons */ body .cookie-notice button, body .cookie-consent button, body .cc-btn, body .cc-dismiss, body .cc-allow, body .cc-deny, body [class*="cookie"] button, body [class*="consent"] button, body [class*="cmplz"] button, body .cky-btn { background: linear-gradient(135deg, #2d1b4e 0%, #4a2c6a 100%) !important; border: 1px solid rgba(107, 77, 140, 0.5) !important; color: #f5f3fa !important; } body [class*="cookie"] button:hover, body [class*="consent"] button:hover, body [class*="cmplz"] button:hover, body .cc-btn:hover { background: linear-gradient(135deg, #d4af37 0%, #ffd700 100%) !important; color: #0a0a12 !important; } /* === MODAL & OVERLAY FIXES === */ body .modal, body .popup, body [role="dialog"], body [class*="modal"], body [class*="popup"], body .mfp-content, body .fancybox-content { background: linear-gradient(145deg, rgba(26, 16, 37, 0.98) 0%, rgba(45, 27, 78, 0.95) 100%) !important; border: 1px solid rgba(107, 77, 140, 0.4) !important; color: #e8e4f0 !important; } body .modal h1, body .modal h2, body .modal h3, body .popup h1, body .popup h2, body .popup h3, body [role="dialog"] h1, body [role="dialog"] h2, body [role="dialog"] h3, body [class*="modal"] h1, body [class*="modal"] h2, body [class*="modal"] h3 { color: #9d8ec7 !important; } body .modal p, body .modal li, body .modal span, body .popup p, body .popup li, body .popup span, body [role="dialog"] p, body [role="dialog"] li, body [class*="modal"] p, body [class*="modal"] li { color: #e8e4f0 !important; } /* === FOOTER FIXES === */ body footer, body footer *, body .site-footer, body .site-footer *, body #colophon, body #colophon *, body [class*="footer"] *:not(svg):not(path) { color: #9d8ec7 !important; } body footer h1, body footer h2, body footer h3, body footer h4, body footer h5, body footer h6, body .site-footer h1, body .site-footer h2, body .site-footer h3, body .site-footer h4, body #colophon h1, body #colophon h2, body #colophon h3, body #colophon h4 { color: #d4af37 !important; } body footer a, body .site-footer a, body #colophon a, body [class*="footer"] a { color: #9d8ec7 !important; } body footer a:hover, body .site-footer a:hover, body #colophon a:hover, body [class*="footer"] a:hover { color: #d4af37 !important; } /* Copyright/site info */ body .site-info, body .site-info *, body .copyright, body .copyright *, body [class*="copyright"] * { color: #9d8ec7 !important; } /* === PRO TIP / INFO BOXES === */ body .pro-tip, body .tip-box, body .tip, body .note, body .info-box, body .info, body .warning, body .alert, body .callout, body .notice, body .highlight-box, body .wp-block-group.has-background, body [class*="tip"], body [class*="note"]:not([class*="cookie"]), body [class*="callout"], body [class*="info-box"], body [class*="alert"]:not([class*="cookie"]) { background: #1a1025 !important; color: #e8e4f0 !important; border-left: 4px solid #6b4d8c !important; padding: 1rem 1.25rem !important; margin: 1.5rem 0 !important; border-radius: 0 8px 8px 0 !important; } body .pro-tip *, body .tip-box *, body .tip *, body .note *, body .info-box *, body .info *, body .callout *, body .notice * { color: #e8e4f0 !important; } body .pro-tip strong, body .tip-box strong, body .callout strong { color: #d4af37 !important; } /* === BLOCKQUOTE & PULLQUOTE === */ body blockquote, body .wp-block-quote, body .wp-block-pullquote { background: rgba(26, 16, 37, 0.8) !important; color: #9d8ec7 !important; border-left: 4px solid #d4af37 !important; padding: 1.25rem !important; margin: 1.5rem 0 !important; font-style: italic; } body blockquote p, body .wp-block-quote p, body .wp-block-pullquote p { color: #9d8ec7 !important; } body blockquote cite, body .wp-block-quote cite { color: #d4af37 !important; font-style: normal; } /* === FIGURE CAPTIONS === */ body figcaption, body .wp-caption-text, body .wp-element-caption, body figure figcaption { color: #9d8ec7 !important; font-size: 0.9rem !important; font-style: italic; } /* === LISTS IN TABLES === */ body table ul li, body table ol li, body td ul li, body td ol li, body .wp-block-table ul li, body .wp-block-table ol li { color: #e8e4f0 !important; } /* === CODE BLOCKS === */ body code, body pre, body .wp-block-code { background: rgba(10, 10, 18, 0.9) !important; color: #9d8ec7 !important; padding: 0.25rem 0.5rem; border-radius: 4px; font-family: monospace; } body pre { padding: 1rem !important; overflow-x: auto; } /* === DEFINITION LISTS === */ body dl, body dt, body dd { color: #e8e4f0 !important; } body dt { color: #d4af37 !important; font-weight: 600; } /* === FORM LABELS === */ body label { color: #e8e4f0 !important; } /* === AFFILIATE DISCLOSURE === */ body .aff-disclosure, body [class*="disclosure"], body .amazon-affiliate { background: rgba(26, 16, 37, 0.8) !important; color: #9d8ec7 !important; border: 1px solid rgba(107, 77, 140, 0.2) !important; padding: 1rem !important; border-radius: 8px !important; font-size: 0.9rem !important; } /* */ /* ===== SINGLE POST LAYOUT ===== */ .single article, .single .entry-content { max-width: 800px; margin: 0 auto; } .single .entry-header { text-align: center; margin-bottom: var(--wfb-space-2xl, 3rem); padding-bottom: var(--wfb-space-xl, 2rem); border-bottom: 1px solid rgba(107, 77, 140, 0.3); } .single .entry-title { font-size: clamp(1.75rem, 4vw, 2.5rem); margin-bottom: var(--wfb-space-md, 1rem); line-height: 1.2; } /* Featured Image */ .single .post-thumbnail, .single .wp-post-image { width: 100%; max-height: 400px; object-fit: cover; border-radius: var(--wfb-radius-lg, 12px); margin-bottom: var(--wfb-space-xl, 2rem); box-shadow: var(--wfb-shadow-card, 0 4px 20px rgba(0, 0, 0, 0.3)); } /* Post Meta */ .single .entry-meta, .single .post-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--wfb-space-md, 1rem); color: var(--wfb-text-muted, #9d8ec7); font-size: 0.9rem; } .single .entry-meta a, .single .post-meta a { color: var(--wfb-spirit, #9B7ED9); } /* Category/Tag badges */ .single .cat-links a, .single .tags-links a, .tag-cloud-link { display: inline-block; background: var(--wfb-bg-elevated, #1a1025); color: var(--wfb-text-secondary, #e8e4f0); padding: 0.25rem 0.75rem; border-radius: var(--wfb-radius-sm, 4px); font-size: 0.85rem; border: 1px solid var(--wfb-mystic-violet, #6B4D8C); transition: all 0.2s ease; } .single .cat-links a:hover, .single .tags-links a:hover, .tag-cloud-link:hover { background: var(--wfb-mystic-violet, #6B4D8C); color: var(--wfb-text-primary, #f5f3fa); border-color: var(--wfb-candlelight-gold, #C9A227); } /* ===== CONTENT STYLING ===== */ .entry-content { font-size: 1.1rem; line-height: 1.8; } .entry-content p { margin-bottom: var(--wfb-space-lg, 1.5rem); } .entry-content h2 { font-size: 1.75rem; margin-top: var(--wfb-space-2xl, 3rem); margin-bottom: var(--wfb-space-lg, 1.5rem); padding-bottom: var(--wfb-space-sm, 0.75rem); border-bottom: 2px solid var(--wfb-candlelight-gold, #C9A227); } .entry-content h3 { font-size: 1.35rem; margin-top: var(--wfb-space-xl, 2rem); margin-bottom: var(--wfb-space-md, 1rem); color: var(--wfb-spirit, #9B7ED9); } .entry-content h4 { font-size: 1.15rem; margin-top: var(--wfb-space-lg, 1.5rem); margin-bottom: var(--wfb-space-sm, 0.75rem); color: var(--wfb-moonlight-silver, #E8E4EF); } /* Lists in content */ .entry-content ul, .entry-content ol { margin-bottom: var(--wfb-space-lg, 1.5rem); padding-left: var(--wfb-space-xl, 2rem); } .entry-content li { margin-bottom: var(--wfb-space-sm, 0.75rem); } /* Nested lists */ .entry-content ul ul, .entry-content ol ol { margin-top: var(--wfb-space-sm, 0.75rem); margin-bottom: 0; } /* ===== SPECIAL CONTENT BOXES ===== */ /* Tip/Note boxes */ .entry-content .wp-block-group[class*="tip"], .entry-content .wfb-tip { background: linear-gradient(135deg, rgba(201, 162, 39, 0.1), rgba(45, 27, 78, 0.2)); border-left: 4px solid var(--wfb-candlelight-gold, #C9A227); padding: var(--wfb-space-lg, 1.5rem); border-radius: 0 var(--wfb-radius-md, 8px) var(--wfb-radius-md, 8px) 0; margin: var(--wfb-space-xl, 2rem) 0; } /* Warning boxes */ .entry-content .wp-block-group[class*="warning"], .entry-content .wfb-warning { background: linear-gradient(135deg, rgba(213, 87, 42, 0.1), rgba(45, 27, 78, 0.2)); border-left: 4px solid var(--wfb-fire, #D4572A); padding: var(--wfb-space-lg, 1.5rem); border-radius: 0 var(--wfb-radius-md, 8px) var(--wfb-radius-md, 8px) 0; margin: var(--wfb-space-xl, 2rem) 0; } /* Ingredient/Supply list boxes */ .entry-content .wp-block-group[class*="ingredients"], .entry-content .wfb-ingredients { background: var(--wfb-bg-card, #12121a); border: 1px solid var(--wfb-mystic-violet, #6B4D8C); padding: var(--wfb-space-lg, 1.5rem); border-radius: var(--wfb-radius-lg, 12px); margin: var(--wfb-space-xl, 2rem) 0; } .entry-content .wp-block-group[class*="ingredients"] h3::before, .entry-content .wfb-ingredients h3::before { content: '\2728 '; } /* ===== ARCHIVE/LISTING PAGES ===== */ .archive article, .blog article, .search-results article { background: var(--wfb-bg-card, #12121a); border-radius: var(--wfb-radius-lg, 12px); overflow: hidden; margin-bottom: var(--wfb-space-xl, 2rem); border: 1px solid rgba(107, 77, 140, 0.2); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .archive article:hover, .blog article:hover, .search-results article:hover { transform: translateY(-5px); box-shadow: var(--wfb-shadow-elevated, 0 8px 30px rgba(0, 0, 0, 0.4)); border-color: var(--wfb-mystic-violet, #6B4D8C); } .archive .entry-header, .blog .entry-header { padding: var(--wfb-space-lg, 1.5rem); } .archive .entry-title, .blog .entry-title { font-size: 1.35rem; margin-bottom: var(--wfb-space-sm, 0.75rem); } .archive .entry-title a, .blog .entry-title a { color: var(--wfb-candlelight-gold, #C9A227); transition: color 0.2s ease; } .archive .entry-title a:hover, .blog .entry-title a:hover { color: var(--wfb-spirit, #9B7ED9); } /* Archive thumbnails */ .archive .post-thumbnail img, .blog .post-thumbnail img { width: 100%; height: 200px; object-fit: cover; } /* Excerpt */ .archive .entry-summary, .blog .entry-summary { padding: 0 var(--wfb-space-lg, 1.5rem) var(--wfb-space-lg, 1.5rem); color: var(--wfb-text-muted, #9d8ec7); } /* Read more link */ .archive .more-link, .blog .more-link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--wfb-spirit, #9B7ED9); font-weight: 500; } .archive .more-link:hover, .blog .more-link:hover { color: var(--wfb-candlelight-gold, #C9A227); } .archive .more-link::after, .blog .more-link::after { content: '\2192'; transition: transform 0.2s ease; } .archive .more-link:hover::after, .blog .more-link:hover::after { transform: translateX(4px); } /* ===== PAGINATION ===== */ .pagination, .nav-links { display: flex; justify-content: center; gap: var(--wfb-space-sm, 0.75rem); margin-top: var(--wfb-space-2xl, 3rem); flex-wrap: wrap; } .pagination .page-numbers, .nav-links .page-numbers { display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 var(--wfb-space-sm, 0.75rem); background: var(--wfb-bg-card, #12121a); color: var(--wfb-text-secondary, #e8e4f0); border-radius: var(--wfb-radius-md, 8px); border: 1px solid var(--wfb-mystic-violet, #6B4D8C); transition: all 0.2s ease; } .pagination .page-numbers:hover, .nav-links .page-numbers:hover { background: var(--wfb-mystic-violet, #6B4D8C); color: var(--wfb-text-primary, #f5f3fa); } .pagination .page-numbers.current, .nav-links .page-numbers.current { background: var(--wfb-candlelight-gold, #C9A227); color: var(--wfb-midnight-purple, #2D1B4E); border-color: var(--wfb-candlelight-gold, #C9A227); } /* ===== POST NAVIGATION (Prev/Next) ===== */ .post-navigation { margin-top: var(--wfb-space-2xl, 3rem); padding: var(--wfb-space-xl, 2rem) 0; border-top: 1px solid rgba(107, 77, 140, 0.3); } .post-navigation .nav-links { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wfb-space-lg, 1.5rem); } .post-navigation .nav-previous, .post-navigation .nav-next { background: var(--wfb-bg-card, #12121a); padding: var(--wfb-space-lg, 1.5rem); border-radius: var(--wfb-radius-lg, 12px); border: 1px solid rgba(107, 77, 140, 0.2); transition: all 0.3s ease; } .post-navigation .nav-previous:hover, .post-navigation .nav-next:hover { border-color: var(--wfb-mystic-violet, #6B4D8C); transform: translateY(-2px); } .post-navigation .nav-next { text-align: right; } .post-navigation a { color: var(--wfb-spirit, #9B7ED9); } .post-navigation a:hover { color: var(--wfb-candlelight-gold, #C9A227); } /* ===== COMMENTS ===== */ .comments-area { margin-top: var(--wfb-space-2xl, 3rem); padding-top: var(--wfb-space-xl, 2rem); border-top: 1px solid rgba(107, 77, 140, 0.3); } .comments-title { font-family: var(--wfb-font-heading, 'Cinzel', serif); color: var(--wfb-candlelight-gold, #C9A227); margin-bottom: var(--wfb-space-xl, 2rem); } .comment { background: var(--wfb-bg-card, #12121a); padding: var(--wfb-space-lg, 1.5rem); border-radius: var(--wfb-radius-lg, 12px); margin-bottom: var(--wfb-space-lg, 1.5rem); border: 1px solid rgba(107, 77, 140, 0.2); } .comment-author { font-family: var(--wfb-font-heading, 'Cinzel', serif); color: var(--wfb-spirit, #9B7ED9); font-weight: 500; } .comment-metadata { color: var(--wfb-text-muted, #9d8ec7); font-size: 0.85rem; } .reply .comment-reply-link { color: var(--wfb-candlelight-gold, #C9A227); font-size: 0.9rem; } /* Comment form */ .comment-form label { display: block; margin-bottom: var(--wfb-space-xs, 0.5rem); color: var(--wfb-text-secondary, #e8e4f0); } .comment-form textarea, .comment-form input[type="text"], .comment-form input[type="email"] { width: 100%; margin-bottom: var(--wfb-space-md, 1rem); } /* */ /* === DROPDOWN MENU STYLING === */ .ct-header nav .sub-menu, .main-navigation .sub-menu, .menu-item .sub-menu { background: #12121a !important; border: 1px solid rgba(139, 92, 246, 0.2) !important; border-radius: 8px !important; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important; padding: 0.5rem 0 !important; min-width: 220px !important; } .ct-header nav .sub-menu a, .main-navigation .sub-menu a, .menu-item .sub-menu a { color: #f4f4f5 !important; padding: 0.75rem 1.25rem !important; display: block !important; transition: background 0.2s ease, color 0.2s ease !important; } .ct-header nav .sub-menu a:hover, .main-navigation .sub-menu a:hover { background: rgba(139, 92, 246, 0.1) !important; color: #8b5cf6 !important; } .ct-header nav .sub-menu li, .main-navigation .sub-menu li { border-bottom: 1px solid rgba(139, 92, 246, 0.08) !important; } .ct-header nav .sub-menu li:last-child, .main-navigation .sub-menu li:last-child { border-bottom: none !important; } /* Dropdown arrow indicator */ .menu-item-has-children > a::after { content: " ▾" !important; font-size: 0.7em !important; opacity: 0.7 !important; } /* === FOOTER STYLING === */ .site-footer, .ct-footer, footer { background: #0a0a0f !important; border-top: 1px solid rgba(139, 92, 246, 0.15) !important; padding: 3rem 0 1.5rem !important; } .site-footer .widget, .ct-footer .widget { background: transparent !important; border: none !important; } .site-footer .widget-title, .ct-footer .widget-title { color: #d4af37 !important; font-size: 1.1rem !important; margin-bottom: 1rem !important; } /* Footer Menu Links */ .site-footer nav, .ct-footer nav, .footer-navigation { display: flex !important; flex-wrap: wrap !important; gap: 0.5rem 1.5rem !important; justify-content: center !important; } .site-footer nav a, .ct-footer nav a, .footer-navigation a, .site-footer .menu a { color: #a1a1aa !important; font-size: 0.9rem !important; transition: color 0.2s ease !important; } .site-footer nav a:hover, .ct-footer nav a:hover, .footer-navigation a:hover { color: #8b5cf6 !important; } /* Footer Bottom / Copyright */ .ct-footer-bottom, .footer-bottom, .site-info { text-align: center !important; padding-top: 1.5rem !important; margin-top: 2rem !important; border-top: 1px solid rgba(139, 92, 246, 0.1) !important; color: rgba(244, 244, 245, 0.5) !important; font-size: 0.85rem !important; } .ct-footer-bottom a, .footer-bottom a, .site-info a { color: #8b5cf6 !important; } /* Footer Widgets Grid */ .ct-footer-widgets, .footer-widgets { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important; gap: 2rem !important; margin-bottom: 2rem !important; } /* Social Links in Footer */ .site-footer .social-links a, .ct-footer .social-links a { color: #a1a1aa !important; font-size: 1.25rem !important; margin: 0 0.5rem !important; } .site-footer .social-links a:hover { color: #8b5cf6 !important; } /* Mobile Menu */ @media (max-width: 991px) { .ct-header nav .sub-menu { position: relative !important; box-shadow: none !important; border: none !important; padding-left: 1rem !important; background: rgba(18, 18, 26, 0.5) !important; } .footer-navigation { flex-direction: column !important; align-items: center !important; gap: 0.75rem !important; } } /* */ /* ===== MOBILE-FIRST BASE ===== */ /* Fluid typography */ html { font-size: clamp(15px, 2.5vw, 18px); } /* Container padding */ .site-content, .entry-content, .container { padding-left: max(1rem, 4vw); padding-right: max(1rem, 4vw); } /* ===== SMALL SCREENS (< 480px) ===== */ @media (max-width: 480px) { /* Stack everything */ .wp-block-columns { flex-direction: column !important; } .wp-block-column { flex-basis: 100% !important; margin-left: 0 !important; } /* Smaller headings */ h1, .entry-title { font-size: 1.5rem !important; } h2 { font-size: 1.3rem !important; } h3 { font-size: 1.15rem !important; } /* Full-width buttons */ .wp-block-button { width: 100%; } .wp-block-button__link { width: 100%; text-align: center; justify-content: center; } /* Reduce spacing */ .entry-content { font-size: 1rem; line-height: 1.7; } .entry-content p { margin-bottom: 1rem; } /* Tables scroll horizontally */ .wp-block-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Hide decorative elements */ .wp-block-spacer::after { display: none; } /* Adjust author box */ .wfb-author-box > div { flex-direction: column !important; text-align: center; } .wfb-author-box > div > div:first-child { margin: 0 auto 1rem !important; } /* Hub links stack */ .wfb-hub-links > div:last-child { flex-direction: column !important; } .wfb-hub-links a { width: 100% !important; justify-content: center !important; } /* Article meta wrap */ .wfb-article-meta > span { flex-direction: column !important; gap: 0.5rem !important; } /* Trust bar smaller */ .wfb-trust-bar .trust-items { flex-direction: column !important; gap: 0.75rem !important; } /* Post navigation stack */ .post-navigation .nav-links { grid-template-columns: 1fr !important; } .post-navigation .nav-next { text-align: left !important; } /* Pagination wrap */ .pagination, .nav-links { gap: 0.5rem; } .pagination .page-numbers, .nav-links .page-numbers { min-width: 36px; height: 36px; font-size: 0.9rem; } /* Tarot specific */ #tarot-reading-area { padding: 1rem !important; } .tarot-card { width: 100px !important; height: 160px !important; } /* Horoscope zodiac grid */ #zodiac-selector { grid-template-columns: repeat(2, 1fr) !important; gap: 0.5rem !important; } .zodiac-btn { padding: 0.75rem 0.5rem !important; font-size: 0.85rem !important; } } /* ===== TABLETS (481px - 768px) ===== */ @media (min-width: 481px) and (max-width: 768px) { /* Two-column layouts */ .wp-block-columns:not(.is-not-stacked-on-mobile) { flex-wrap: wrap; } .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { flex-basis: calc(50% - 1rem) !important; } /* Headings */ h1, .entry-title { font-size: 1.75rem; } h2 { font-size: 1.5rem; } /* Horoscope zodiac grid */ #zodiac-selector { grid-template-columns: repeat(3, 1fr) !important; } /* Tarot cards */ .tarot-spread { gap: 1rem !important; } .tarot-card { width: 120px !important; height: 190px !important; } } /* ===== MEDIUM SCREENS (769px - 1024px) ===== */ @media (min-width: 769px) and (max-width: 1024px) { /* Container width */ .single article, .single .entry-content { max-width: 700px; } /* Horoscope zodiac grid */ #zodiac-selector { grid-template-columns: repeat(4, 1fr) !important; } } /* ===== LARGE SCREENS (1025px+) ===== */ @media (min-width: 1025px) { /* Content max width */ .single article, .single .entry-content { max-width: 800px; } /* Horoscope zodiac grid */ #zodiac-selector { grid-template-columns: repeat(6, 1fr) !important; } /* Hover effects only on desktop */ .archive article:hover, .blog article:hover { transform: translateY(-5px); } .wp-block-button__link:hover { transform: translateY(-2px); } } /* ===== TOUCH DEVICE OPTIMIZATIONS ===== */ @media (hover: none) and (pointer: coarse) { /* Larger touch targets */ .wp-block-button__link, button, a { min-height: 44px; min-width: 44px; } /* Disable hover transforms on touch */ .archive article:hover, .blog article:hover, .wp-block-button__link:hover, .wfb-card:hover { transform: none; } /* Larger form inputs */ input[type="text"], input[type="email"], input[type="search"], textarea, select { font-size: 16px; /* Prevents iOS zoom */ min-height: 44px; } } /* ===== LANDSCAPE PHONE ===== */ @media (max-height: 500px) and (orientation: landscape) { /* Reduce vertical spacing */ .wp-block-cover { min-height: 60vh !important; } .entry-header { padding: 1rem 0; } } /* ===== DARK MODE MEDIA QUERY ===== */ @media (prefers-color-scheme: dark) { /* Already dark theme - this ensures consistency */ :root { color-scheme: dark; } } /* ===== REDUCED MOTION ===== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .wp-block-cover::before { animation: none; } } /* ===== HIGH CONTRAST MODE ===== */ @media (prefers-contrast: high) { :root { --wfb-text-primary: #ffffff; --wfb-text-secondary: #ffffff; --wfb-candlelight-gold: #ffd700; } a { text-decoration: underline; } .wp-block-button__link { border: 2px solid currentColor; } } /* ===== PRINT STYLES ===== */ @media print { /* Hide interactive elements */ .wfb-hub-links, .wfb-trust-bar, #tarot-reading-area, #zodiac-selector, .pagination, .post-navigation, .comments-area { display: none !important; } /* Readable colors */ body, .entry-content { color: #000 !important; background: #fff !important; } h1, h2, h3, h4, h5, h6 { color: #000 !important; } a { color: #000 !important; text-decoration: underline; } /* Show URLs after links */ a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; } } /* */ /* ===== SUBTLE ANIMATIONS ===== */ /* Fade in on load */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } article, .entry-content > * { animation: fadeInUp 0.5s ease-out; } .entry-content > *:nth-child(1) { animation-delay: 0.1s; } .entry-content > *:nth-child(2) { animation-delay: 0.15s; } .entry-content > *:nth-child(3) { animation-delay: 0.2s; } /* ===== GLOWING EFFECTS ===== */ /* Gold text glow */ .entry-title, h1.has-text-color[style*="#C9A227"], h1.has-text-color[style*="#c9a227"] { text-shadow: 0 0 10px rgba(201, 162, 39, 0.3), 0 0 30px rgba(201, 162, 39, 0.15), 0 0 50px rgba(201, 162, 39, 0.1); } /* Purple text glow */ h2.has-text-color[style*="#9B7ED9"], h2.has-text-color[style*="#9b7ed9"] { text-shadow: 0 0 10px rgba(155, 126, 217, 0.3), 0 0 20px rgba(155, 126, 217, 0.15); } /* ===== MYSTICAL SPARKLE EFFECT ===== */ @keyframes sparkle { 0%, 100% { opacity: 0; transform: scale(0); } 50% { opacity: 1; transform: scale(1); } } /* ===== HOVER LINK UNDERLINE ===== */ .entry-content a { position: relative; border-bottom: none !important; } .entry-content a::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: linear-gradient(90deg, var(--wfb-candlelight-gold, #C9A227), var(--wfb-spirit, #9B7ED9)); transition: width 0.3s ease; } .entry-content a:hover::after { width: 100%; } /* ===== BUTTON SHINE EFFECT ===== */ .wp-block-button__link { position: relative; overflow: hidden; } .wp-block-button__link::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.2), transparent ); transition: left 0.5s ease; } .wp-block-button__link:hover::before { left: 100%; } /* ===== CARD BORDER GLOW ===== */ .wp-block-group.has-border-color { position: relative; } .wp-block-group.has-border-color::before { content: ''; position: absolute; inset: -1px; background: linear-gradient( 135deg, var(--wfb-candlelight-gold, #C9A227), var(--wfb-mystic-violet, #6B4D8C), var(--wfb-spirit, #9B7ED9), var(--wfb-candlelight-gold, #C9A227) ); background-size: 300% 300%; border-radius: inherit; z-index: -1; opacity: 0; transition: opacity 0.3s ease; } .wp-block-group.has-border-color:hover::before { opacity: 1; animation: gradientShift 3s ease infinite; } @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* ===== IMAGE HOVER EFFECTS ===== */ .wp-block-image img, .post-thumbnail img { transition: transform 0.3s ease, filter 0.3s ease; } .wp-block-image:hover img, .post-thumbnail:hover img { transform: scale(1.02); } /* ===== MAGICAL DIVIDERS ===== */ .wp-block-separator { position: relative; border: none; height: 2px; background: transparent; } .wp-block-separator::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 60%; height: 1px; background: linear-gradient( 90deg, transparent, var(--wfb-mystic-violet, #6B4D8C), var(--wfb-candlelight-gold, #C9A227), var(--wfb-mystic-violet, #6B4D8C), transparent ); } .wp-block-separator::after { content: '\2726'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--wfb-candlelight-gold, #C9A227); font-size: 1.25rem; background: var(--wfb-bg-dark, #0a0a0f); padding: 0 0.5rem; } /* ===== BLOCKQUOTE STYLING ===== */ blockquote, .wp-block-quote { position: relative; overflow: visible; } blockquote::before, .wp-block-quote::before { content: '\201C'; position: absolute; top: -20px; left: -10px; font-size: 4rem; color: var(--wfb-candlelight-gold, #C9A227); opacity: 0.3; font-family: Georgia, serif; line-height: 1; } /* ===== FOCUS STATES ===== */ a:focus, button:focus, input:focus, textarea:focus, select:focus, .wp-block-button__link:focus { outline: 2px solid var(--wfb-candlelight-gold, #C9A227); outline-offset: 2px; } /* ===== SKIP LINK ===== */ .skip-link { position: absolute; top: -100%; left: 0; padding: 0.5rem 1rem; background: var(--wfb-candlelight-gold, #C9A227); color: var(--wfb-midnight-purple, #2D1B4E); z-index: 9999; transition: top 0.3s ease; } .skip-link:focus { top: 0; } /* ===== ICON ANIMATIONS ===== */ @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } .wfb-author-box > div > div:first-child, .trust-icon { animation: float 3s ease-in-out infinite; } /* ===== LOADING SHIMMER ===== */ @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .loading, .skeleton { background: linear-gradient( 90deg, var(--wfb-bg-card, #12121a) 25%, var(--wfb-bg-elevated, #1a1025) 50%, var(--wfb-bg-card, #12121a) 75% ); background-size: 200% 100%; animation: shimmer 1.5s infinite; } /* ===== SMOOTH PAGE TRANSITIONS ===== */ .site-content { animation: fadeInUp 0.3s ease-out; } /* ===== MYSTICAL CURSOR (Optional - commented out) ===== */ /* body { cursor: url('data:image/svg+xml,...'), auto; } */ /* ===== SELECTION ENHANCEMENT ===== */ ::selection { background: rgba(155, 126, 217, 0.4); color: var(--wfb-text-primary, #f5f3fa); } ::-moz-selection { background: rgba(155, 126, 217, 0.4); color: var(--wfb-text-primary, #f5f3fa); } /* ===== SMOOTH SCROLL ===== */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ===== STICKY HEADER SHADOW ===== */ .site-header.is-sticky, header.sticky { box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5); backdrop-filter: blur(10px); } /* ===== FOOTER ENHANCEMENT ===== */ .site-footer, footer { border-top: 1px solid var(--wfb-mystic-violet, #6B4D8C); background: linear-gradient( 180deg, var(--wfb-bg-card, #12121a), var(--wfb-bg-dark, #0a0a0f) ); } /* ===== WIDGET AREAS ===== */ .widget { background: var(--wfb-bg-card, #12121a); padding: var(--wfb-space-lg, 1.5rem); border-radius: var(--wfb-radius-lg, 12px); border: 1px solid rgba(107, 77, 140, 0.2); margin-bottom: var(--wfb-space-lg, 1.5rem); } .widget-title { font-family: var(--wfb-font-heading, 'Cinzel', serif); color: var(--wfb-candlelight-gold, #C9A227); font-size: 1.1rem; margin-bottom: var(--wfb-space-md, 1rem); padding-bottom: var(--wfb-space-sm, 0.75rem); border-bottom: 1px solid var(--wfb-mystic-violet, #6B4D8C); } .widget ul { list-style: none; padding: 0; margin: 0; } .widget li { padding: var(--wfb-space-xs, 0.5rem) 0; border-bottom: 1px solid rgba(107, 77, 140, 0.1); } .widget li:last-child { border-bottom: none; } .widget a { color: var(--wfb-text-secondary, #e8e4f0); transition: color 0.2s ease, padding-left 0.2s ease; } .widget a:hover { color: var(--wfb-spirit, #9B7ED9); padding-left: 0.5rem; } /* */ /* === EZOIC AD CONTAINER CLS FIXES === */ /* Based on actual Ezoic ad dimensions analysis */ /* Base styles for all Ezoic containers */ [id^="ezoic-pub-ad-placeholder"], [class*="ezoic"], [id*="ezoic"], div[data-ez-name], .ezoic-ad { contain: layout style paint; content-visibility: auto; box-sizing: border-box; } /* === DESKTOP AD SIZES === */ @media (min-width: 768px) { /* Sidebar ads - 300x600 skyscraper (most common) */ .sidebar [class*="ezoic"], .sidebar [id*="ezoic"], .widget-area [class*="ezoic"], aside [class*="ezoic"] { min-width: 300px; min-height: 600px; contain-intrinsic-size: 300px 600px; } /* In-content ads - 336x280 rectangle */ .entry-content [class*="ezoic"], .entry-content [id*="ezoic"], article [class*="ezoic"], .post-content [class*="ezoic"] { min-height: 280px; max-width: 336px; contain-intrinsic-size: 336px 280px; margin: 1.5em auto; } /* Header/footer leaderboard - 728x90 */ header [class*="ezoic"], footer [class*="ezoic"], .site-header [class*="ezoic"], .site-footer [class*="ezoic"] { min-height: 90px; max-width: 728px; contain-intrinsic-size: 728px 90px; margin: 0 auto; } } /* === MOBILE AD SIZES (CRITICAL FOR FIELD CLS) === */ @media (max-width: 767px) { /* Mobile banner - 320x100 */ [class*="ezoic"], [id*="ezoic"] { min-height: 100px; max-width: 100%; contain-intrinsic-size: 320px 100px; } /* Mobile in-content - 300x250 */ .entry-content [class*="ezoic"], article [class*="ezoic"] { min-height: 250px; contain-intrinsic-size: 300px 250px; margin: 1em auto; } /* Mobile sidebar (usually hidden or 300x250) */ .sidebar [class*="ezoic"], aside [class*="ezoic"] { min-height: 250px; contain-intrinsic-size: 300px 250px; } /* Mobile header/footer - 320x50 */ header [class*="ezoic"], footer [class*="ezoic"] { min-height: 50px; contain-intrinsic-size: 320px 50px; } } /* === IMAGE CLS FIXES === */ img { max-width: 100%; height: auto; } img[width][height] { aspect-ratio: attr(width) / attr(height); } article img, .entry-content img, .post-content img { aspect-ratio: 16/9; object-fit: cover; height: auto; } .wp-post-image, .featured-image img, .post-thumbnail img { aspect-ratio: 16/9; object-fit: cover; width: 100%; height: auto; } /* === COOKIE BANNER CLS FIX === */ #cookie-space-placeholder, .cmplz-cookiebanner, .cookie-notice { min-height: 80px; contain: layout style; } /* === FONT CLS FIX === */ body { font-display: swap; } /* === DYNAMIC CONTENT STABILITY === */ main, .site-content, .content-area { contain: layout style; } /* Hide empty ad containers to prevent flash */ [class*="ezoic"]:empty::before { content: ""; display: block; } /* */ /* Mobile-First Enhancements */ @media (max-width: 768px) { .zodiac-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 0.75rem !important; } .zodiac-btn { padding: 0.75rem !important; font-size: 0.9rem !important; min-height: 44px; } .zodiac-symbol { font-size: 1.5rem !important; } .tarot-cards-container { flex-wrap: wrap !important; gap: 1rem !important; } .tarot-card { width: calc(50% - 0.5rem) !important; min-height: 120px !important; } #tarot-interpretation, #horoscope-content { padding: 1rem !important; font-size: 1rem !important; } } @media (max-width: 480px) { .zodiac-grid { grid-template-columns: repeat(2, 1fr) !important; } .tarot-card { width: 100% !important; } .wp-block-columns { flex-direction: column !important; } .wp-block-column { flex-basis: 100% !important; margin-bottom: 1rem; } } /* Touch-friendly interactions */ .zodiac-btn, .tarot-card, .wp-block-button__link { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* Safe area padding for notched phones */ @supports (padding: env(safe-area-inset-bottom)) { .site-footer { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); } } /* Email capture form styles */ .wfb-email-capture { background: linear-gradient(135deg, #2d1b4e 0%, #1a1025 100%); border: 1px solid #6b4d8c; border-radius: 16px; padding: 2rem; margin: 2rem 0; text-align: center; } .wfb-email-capture h3 { color: #d4af37; font-family: 'Cinzel', serif; margin-bottom: 0.5rem; } .wfb-email-capture p { color: #e8e4f0; margin-bottom: 1.5rem; } .wfb-email-form { display: flex; gap: 0.5rem; max-width: 500px; margin: 0 auto; } @media (max-width: 600px) { .wfb-email-form { flex-direction: column; } } .wfb-email-input { flex: 1; padding: 0.875rem 1rem; border: 1px solid #6b4d8c; border-radius: 8px; background: rgba(10, 10, 15, 0.8); color: #e8e4f0; font-size: 1rem; } .wfb-email-input:focus { outline: none; border-color: #d4af37; } .wfb-email-submit { padding: 0.875rem 1.5rem; background: linear-gradient(135deg, #d4af37, #c9a227); color: #0a0a12; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; } .wfb-email-submit:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3); } .wfb-email-message { margin-top: 1rem; padding: 0.75rem; border-radius: 8px; } .wfb-email-message.success { background: rgba(39, 174, 96, 0.2); color: #27ae60; } .wfb-email-message.error { background: rgba(231, 76, 60, 0.2); color: #e74c3c; } /* */ .bg-sky-blue { background: #ebf5ff !important; border: 1px solid #007bff !important; }.text-color , ::-webkit-input-placeholder { color: #000000 !important; }.vedicastro_tab_button a.active { background: #007bff !important; color: #ebf5ff !important; border: 1px solid #007bff !important; }.vedicastro_button { color: #ffffff !important; background: #007bff !important; border: 1px solid #007bff !important; } /*# sourceURL=vedic-astro-api-inline-css */ /* */ /* ── Dark Mode Toggle Button ── */ #empire-dark-toggle { position: fixed; bottom: 80px; right: 24px; width: 44px; height: 44px; border-radius: 50%; background: #f1f5f9; border: 1px solid #e2e8f0; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 998; transition: background 0.3s, border-color 0.3s; box-shadow: 0 2px 8px rgba(0,0,0,0.08); color: #475569; } #empire-dark-toggle:hover { background: #e2e8f0; } /* ── Transition for smooth switch ── */ html.empire-dark *, html.empire-dark *::before, html.empire-dark *::after { transition: background-color 0.3s ease, color 0.2s ease, border-color 0.3s ease, box-shadow 0.3s ease; } /* ── Dark Mode Variables ── */ html.empire-dark { --empire-bg: #0f172a; --empire-bg-card: #1e293b; --empire-bg-hover: #334155; --empire-text: #e2e8f0; --empire-text-muted: #94a3b8; --empire-border: #334155; } /* ── Core Dark Mode Overrides ── */ html.empire-dark body { background-color: #0f172a !important; color: #e2e8f0 !important; } html.empire-dark #empire-dark-toggle { background: #1e293b; border-color: #334155; color: #f59e0b; } /* Header / Navigation */ html.empire-dark header, html.empire-dark .site-header, html.empire-dark nav, html.empire-dark .main-navigation { background-color: #0f172a !important; border-color: #1e293b !important; } /* Main content area */ html.empire-dark main, html.empire-dark .site-content, html.empire-dark article, html.empire-dark .entry-content, html.empire-dark .post-content { background-color: transparent !important; color: #cbd5e1 !important; } html.empire-dark .entry-content h1, html.empire-dark .entry-content h2, html.empire-dark .entry-content h3, html.empire-dark .entry-content h4, html.empire-dark .post-content h1, html.empire-dark .post-content h2, html.empire-dark .post-content h3, html.empire-dark .post-content h4, html.empire-dark article h1, html.empire-dark .entry-title { color: #f1f5f9 !important; } html.empire-dark .entry-content h2, html.empire-dark .post-content h2 { border-bottom-color: #334155 !important; } html.empire-dark a { color: #60a5fa !important; } html.empire-dark a:hover { color: #93bbfd !important; } /* Cards, sidebars, widgets */ html.empire-dark .widget, html.empire-dark aside, html.empire-dark .sidebar, html.empire-dark .card { background-color: #1e293b !important; border-color: #334155 !important; color: #cbd5e1 !important; } /* Footer */ html.empire-dark footer, html.empire-dark .site-footer { background-color: #020617 !important; color: #94a3b8 !important; border-color: #1e293b !important; } /* ── Empire Enhancer Dark Overrides ── */ html.empire-dark .empire-toc { background: linear-gradient(135deg, #1e293b 0%, #1a2332 100%) !important; border-color: #334155 !important; } html.empire-dark .empire-toc-title { color: #f1f5f9 !important; } html.empire-dark .empire-toc-list a { color: #94a3b8 !important; } html.empire-dark .empire-toc-list a:hover { color: #60a5fa !important; } html.empire-dark .empire-read-time { background: #1e293b !important; color: #94a3b8 !important; border-left-color: var(--empire-accent, #3b82f6) !important; } html.empire-dark .empire-author-card { background: #1e293b !important; border-color: #334155 !important; } html.empire-dark .empire-author-name { color: #f1f5f9 !important; } html.empire-dark .empire-author-bio { color: #94a3b8 !important; } html.empire-dark .empire-callout-takeaway { background: #0d2818 !important; } html.empire-dark .empire-callout-tip { background: #0c1929 !important; } html.empire-dark .empire-callout-warning { background: #2a1f06 !important; } html.empire-dark .empire-callout-note { background: #1a0d2e !important; } html.empire-dark .empire-proscons.empire-pros { background: #0d2818 !important; border-color: #166534 !important; } html.empire-dark .empire-proscons.empire-cons { background: #2a0d0d !important; border-color: #991b1b !important; } html.empire-dark .empire-score-box { background: #1e293b !important; border-color: #334155 !important; } html.empire-dark .empire-table th { background: #1e293b !important; color: #f1f5f9 !important; } html.empire-dark .empire-table td { border-color: #1e293b !important; } html.empire-dark .empire-table tr:hover td { background: #1a2332 !important; } html.empire-dark .empire-table-wrap { border-color: #334155 !important; } html.empire-dark .empire-summary { background: linear-gradient(135deg, #0c1929 0%, #0e1a2e 100%) !important; border-color: #1e3a5f !important; } html.empire-dark .empire-summary p { color: #93bbfd !important; } html.empire-dark .empire-disclosure { background: #2a1f06 !important; border-color: #854d0e !important; color: #fcd34d !important; } html.empire-dark .empire-newsletter-cta { background: linear-gradient(135deg, #1e293b, #0f172a) !important; border: 1px solid #334155; } html.empire-dark .empire-faq { background: #1e293b !important; border-color: #334155 !important; } html.empire-dark blockquote { background: #1e293b !important; border-left-color: var(--empire-accent, #3b82f6) !important; color: #cbd5e1 !important; } html.empire-dark code, html.empire-dark pre { background: #1e293b !important; color: #e2e8f0 !important; } html.empire-dark .empire-copy-btn { background: #0f172a !important; border-color: #334155 !important; } html.empire-dark img { opacity: 0.92; } html.empire-dark .empire-inline-cta { background: linear-gradient(135deg, #1e293b, #1a2332) !important; } html.empire-dark .empire-freshness { color: #94a3b8 !important; } /* ── Share bar dark ── */ @media (max-width: 1100px) { html.empire-dark #empire-share-bar { background: #0f172a !important; border-color: #1e293b !important; } } /* ── Back to top button dark ── */ html.empire-dark #empire-back-top { background: #334155 !important; } /* ── Forms ── */ html.empire-dark input, html.empire-dark textarea, html.empire-dark select { background-color: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important; } /* ── Comments ── */ html.empire-dark .comment, html.empire-dark .comment-body, html.empire-dark #comments { background-color: transparent !important; color: #cbd5e1 !important; } /* ── WP Block overrides ── */ html.empire-dark .wp-block-group, html.empire-dark .wp-block-column { background-color: transparent !important; } /* */ .empire-ann-bar { position: relative; width: 100%; z-index: 99999; padding: 11px 52px 11px 20px; font-size: 14px; line-height: 1.4; } .empire-ann-inner { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; max-width: 960px; margin: 0 auto; } .empire-ann-text { margin: 0; font-size: inherit; } .empire-ann-cta { display: inline-block; font-weight: 700; border: 1.5px solid; padding: 5px 16px; border-radius: 99px; text-decoration: none !important; white-space: nowrap; font-size: 13px; transition: opacity 0.2s; flex-shrink: 0; } .empire-ann-cta:hover { opacity: 0.75; } .empire-ann-close { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); background: none; border: none; color: inherit; font-size: 22px; line-height: 1; cursor: pointer; opacity: 0.55; padding: 4px 6px; transition: opacity 0.2s; } .empire-ann-close:hover { opacity: 1; } @media (max-width: 640px) { .empire-ann-bar { font-size: 12px; padding: 9px 44px 9px 14px; } .empire-ann-inner { gap: 10px; } } /* */ .empire-cat-badge { display: inline-block; background: var(--ebadge-color, #64748b); color: #fff !important; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; padding: 3px 10px; border-radius: 4px; text-decoration: none !important; margin-bottom: 7px; transition: opacity 0.2s; font-family: inherit; } .empire-cat-badge:hover { opacity: 0.8; } /* */ /* ============================================================================ WITCHCRAFT DRAMATIC VISUAL ENHANCEMENTS ============================================================================ These are HIGHLY VISIBLE changes that cannot be missed ============================================================================ */ /* ============================================================================ 1. ANIMATED GLOWING SITE BORDER - Very visible! ============================================================================ */ body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 9998; border: 2px solid transparent; background: linear-gradient(var(--wfb-midnight, #0a0a0f), var(--wfb-midnight, #0a0a0f)) padding-box, linear-gradient(45deg, #8b5cf6, #d4af37, #8b5cf6) border-box; animation: borderGlow 4s ease-in-out infinite; } @keyframes borderGlow { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.7; } } /* ============================================================================ 2. HERO SECTION - Dramatic animated background ============================================================================ */ .ct-hero-section, .hero-section, .wp-block-cover, .page-header, [class*="hero"] { position: relative !important; overflow: hidden !important; } .ct-hero-section::before, .hero-section::before, .wp-block-cover::before { content: '' !important; position: absolute !important; top: -50% !important; left: -50% !important; width: 200% !important; height: 200% !important; background: radial-gradient(circle at 20% 80%, rgba(139, 92, 246, 0.15) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(212, 175, 55, 0.1) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.05) 0%, transparent 70%) !important; animation: heroShift 20s ease-in-out infinite !important; pointer-events: none !important; z-index: 0 !important; } @keyframes heroShift { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(-5%, 5%) rotate(2deg); } 50% { transform: translate(0, -5%) rotate(0deg); } 75% { transform: translate(5%, 5%) rotate(-2deg); } } /* ============================================================================ 3. NAVIGATION - Glowing underline animation ============================================================================ */ .ct-header nav a, .main-navigation a, .ct-menu > li > a, .menu-item > a { position: relative !important; } .ct-header nav a::after, .ct-menu > li > a::after { content: '' !important; position: absolute !important; bottom: -2px !important; left: 0 !important; width: 0 !important; height: 2px !important; background: linear-gradient(90deg, #8b5cf6, #d4af37) !important; transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important; box-shadow: 0 0 10px rgba(139, 92, 246, 0.5) !important; } .ct-header nav a:hover::after, .ct-menu > li > a:hover::after, .current-menu-item > a::after { width: 100% !important; } /* ============================================================================ 4. CARDS - Dramatic lift and glow on hover ============================================================================ */ article.post, .ct-posts-grid article, .wp-block-post, .post-card, [class*="entry-card"] { transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important; position: relative !important; } article.post:hover, .ct-posts-grid article:hover, .wp-block-post:hover, .post-card:hover { transform: translateY(-12px) scale(1.02) !important; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(139, 92, 246, 0.3), 0 0 60px rgba(139, 92, 246, 0.1) !important; z-index: 10 !important; } /* Card gradient border on hover */ article.post::before, .ct-posts-grid article::before { content: '' !important; position: absolute !important; inset: -2px !important; border-radius: 14px !important; background: linear-gradient(135deg, #8b5cf6, #d4af37, #8b5cf6) !important; z-index: -1 !important; opacity: 0 !important; transition: opacity 0.4s ease !important; } article.post:hover::before, .ct-posts-grid article:hover::before { opacity: 1 !important; } /* ============================================================================ 5. BUTTONS - Magnetic glow effect ============================================================================ */ .ct-button, .wp-block-button__link, button[type="submit"], .hero-cta, a.button, .btn { position: relative !important; overflow: hidden !important; transition: all 0.3s ease !important; } .ct-button:hover, .wp-block-button__link:hover, button[type="submit"]:hover { transform: translateY(-3px) !important; box-shadow: 0 10px 30px rgba(139, 92, 246, 0.4), 0 0 40px rgba(212, 175, 55, 0.3) !important; } /* Shine sweep animation */ .ct-button::before, .wp-block-button__link::before { content: '' !important; position: absolute !important; top: 0 !important; left: -100% !important; width: 100% !important; height: 100% !important; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.2), transparent ) !important; transition: left 0.5s ease !important; } .ct-button:hover::before, .wp-block-button__link:hover::before { left: 100% !important; } /* ============================================================================ 6. HEADER - Enhanced glassmorphism with glow ============================================================================ */ .ct-header, .site-header, header[data-id] { background: rgba(10, 10, 15, 0.85) !important; backdrop-filter: blur(20px) saturate(180%) !important; -webkit-backdrop-filter: blur(20px) saturate(180%) !important; border-bottom: 1px solid rgba(139, 92, 246, 0.2) !important; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3) !important; } /* ============================================================================ 7. FOOTER - Visible gradient and glow ============================================================================ */ .ct-footer, .site-footer, footer[data-id] { background: linear-gradient(180deg, #12121a 0%, #0a0a0f 100%) !important; border-top: 1px solid rgba(139, 92, 246, 0.3) !important; position: relative !important; } .ct-footer::before, .site-footer::before { content: '' !important; position: absolute !important; top: 0 !important; left: 10% !important; right: 10% !important; height: 1px !important; background: linear-gradient(90deg, transparent, #d4af37, transparent) !important; } /* ============================================================================ 8. SIDEBAR WIDGETS - Glass effect with glow ============================================================================ */ .widget, .sidebar-widget, .ct-widget, aside .widget { background: rgba(18, 18, 26, 0.8) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; border: 1px solid rgba(139, 92, 246, 0.15) !important; border-radius: 12px !important; transition: all 0.3s ease !important; } .widget:hover { border-color: rgba(139, 92, 246, 0.4) !important; box-shadow: 0 8px 32px rgba(139, 92, 246, 0.15) !important; } /* ============================================================================ 9. HEADINGS - Gold glow effect ============================================================================ */ h1, h2, h3, .entry-title, .widget-title { text-shadow: 0 0 30px rgba(212, 175, 55, 0.15) !important; } /* ============================================================================ 10. SCROLL PROGRESS BAR - Top of page ============================================================================ */ .reading-progress-bar { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, #8b5cf6, #d4af37); z-index: 99999; transition: width 0.1s linear; box-shadow: 0 0 10px rgba(139, 92, 246, 0.5); } /* ============================================================================ 11. BLOCKQUOTES - Mystical styling ============================================================================ */ blockquote, .wp-block-quote { border-left: 3px solid #d4af37 !important; background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(18, 18, 26, 0.8)) !important; padding: 1.5rem 2rem !important; border-radius: 0 12px 12px 0 !important; position: relative !important; } blockquote::before { content: '"' !important; position: absolute !important; top: -10px !important; left: 20px !important; font-size: 4rem !important; color: rgba(212, 175, 55, 0.3) !important; font-family: Georgia, serif !important; } /* ============================================================================ 12. LINKS - Glow on hover ============================================================================ */ .entry-content a:not(.wp-block-button__link), .post-content a:not(.wp-block-button__link) { transition: all 0.2s ease !important; } .entry-content a:not(.wp-block-button__link):hover { text-shadow: 0 0 15px rgba(139, 92, 246, 0.5) !important; } /* ============================================================================ 13. IMAGES - Hover zoom and glow ============================================================================ */ article img, .post-thumbnail img, .wp-post-image { transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) !important; } article:hover img, .post-thumbnail:hover img { transform: scale(1.05) !important; } /* ============================================================================ 14. FLOATING PARTICLES (Decorative) ============================================================================ */ body::after { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; background-image: radial-gradient(2px 2px at 20% 30%, rgba(212, 175, 55, 0.15) 50%, transparent 50%), radial-gradient(2px 2px at 40% 70%, rgba(139, 92, 246, 0.1) 50%, transparent 50%), radial-gradient(1px 1px at 60% 20%, rgba(212, 175, 55, 0.1) 50%, transparent 50%), radial-gradient(2px 2px at 80% 50%, rgba(139, 92, 246, 0.08) 50%, transparent 50%); animation: particleFloat 30s linear infinite; } @keyframes particleFloat { 0% { transform: translateY(0); } 100% { transform: translateY(-100vh); } } /* ============================================================================ 15. ACCESSIBILITY - Reduced motion ============================================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; } } /* Ensure popups display above dramatic effects */ [class*="systeme"], [id*="systeme"], iframe[src*="systeme"], .sio-popup, .sio-modal { z-index: 999999 !important; } body::before, body::after { z-index: 1 !important; } /* */ body,.entry-content,.site-content,.ct-container{color:#DDD5E8}.hero-section h1,.ct-hero h1,.page-title,h1.entry-title,.hero-section .ct-heading{color:#FFFFFF !important;text-shadow:0 2px 8px rgba(0,0,0,0.5)}h2,h3,.section-title,.ct-heading{color:#E8C547;text-shadow:0 1px 4px rgba(0,0,0,0.3)}.entry-content p,.ct-container p,article p,.page-content p,.wp-block-paragraph{color:#DDD5E8}.ct-breadcrumbs,.ct-breadcrumbs a,.ct-breadcrumbs span{color:#C4B0DC !important}.ct-card-content p,.wp-block-column p{color:#DDD5E8}input::placeholder,textarea::placeholder,.wp-block-search__input::placeholder{color:#9B8BB8 !important;opacity:1}.amazon-disclaimer,.affiliate-disclosure,.entry-content small,small{color:#B8A8D0 !important}a,.entry-content a,.widget a{color:#C4A6E8}a:visited{color:#B89FD4}blockquote,.wp-block-quote,.wp-block-pullquote,blockquote p,cite{color:#D4C6E8}footer a,.ct-footer a,.site-footer a,.footer-menu a{color:#C4B0DC}.ct-footer,.site-footer,footer{color:#C4B0DC}.ct-footer [class*="moon"],footer [class*="moon"]{color:#DDD5E8}.ct-footer .copyright,.ct-footer .site-info,footer .copyright,footer small,footer .site-info a{color:#B8A8D0}.wp-block-button__link,.ct-button,button[type="submit"],input[type="submit"],.wp-element-button,a.ct-button{background-color:#6B3FA0 !important;color:#FFFFFF !important}.is-style-outline .wp-block-button__link,.wp-block-button.is-style-outline .wp-block-button__link{background-color:transparent !important;color:#E8C547 !important}a:hover{color:#E8C547}.ct-breadcrumbs a:hover{color:#E8C547 !important}footer a:hover,.ct-footer a:hover{color:#E8C547}.wp-block-button__link:hover,.ct-button:hover,button[type="submit"]:hover,input[type="submit"]:hover,.wp-element-button:hover,a.ct-button:hover{background-color:#7E52B3 !important}.ct-menu > li > a:hover,nav a:hover,.main-navigation a:hover{color:#E8C547}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid #E8C547;outline-offset:3px}.entry-content input:focus,.wp-block-search__input:focus{box-shadow:0 0 0 3px rgba(232,197,71,0.2);outline:none}.ct-header a,.site-header a{color:#DDD5E8}.current-menu-item > a,.current_page_item > a{color:#E8C547 !important}.entry-content input[type="email"],.entry-content input[type="text"],.wp-block-search__input{background-color:rgba(255,255,255,0.1);color:#FFFFFF}.cmplz-btn.cmplz-accept{background-color:#6B3FA0 !important;color:#FFFFFF !important}.cmplz-btn.cmplz-deny{background-color:transparent !important;color:#DDD5E8 !important}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html{scroll-behavior:smooth;scroll-padding-top:80px}::selection{background:rgba(74,28,111,0.4);color:#FFFFFF}@media print{body{color:#000 !important;background:#fff !important}a{color:#000 !important}nav,footer{display:none !important}} /* */ /* =========================================== Empire Witchcraft Theme Tokens Palette: earthy =========================================== */ :root { --empire-accent: #51355A; --empire-accent-hover: #6b2d8b; --empire-gold: #d18c03; --empire-cream: #F5F1ED; --empire-dark: #291c1d; --empire-sidebar-bg: #2d1b4e; } /* Override theme primary button */ .wp-block-button__link, .wp-element-button, button[type="submit"], input[type="submit"], .btn-primary, .woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt { background-color: var(--empire-accent) !important; border-color: var(--empire-accent) !important; border-radius: 9999px !important; transition: background-color 0.2s !important; } .wp-block-button__link:hover, .wp-element-button:hover { background-color: var(--empire-accent-hover) !important; border-color: var(--empire-accent-hover) !important; } /* Links */ a { color: var(--empire-accent); } a:hover { color: var(--empire-accent-hover); } /* Category badges — use gold for witch niche */ .empire-cat-badge { background: var(--empire-gold) !important; color: var(--empire-dark) !important; } /* Product box left border */ .empire-product-box { border-left-color: var(--empire-accent) !important; } /* TOC border */ .empire-toc { background: rgba(81,53,90,0.07) !important; border-color: rgba(81,53,90,0.25) !important; border-left-color: var(--empire-accent) !important; } .emtoc-header { color: var(--empire-dark) !important; } .emtoc-list a { color: var(--empire-accent) !important; } .emtoc-toggle { border-color: rgba(81,53,90,0.4) !important; color: var(--empire-accent) !important; } .emtoc-toggle:hover { background: rgba(81,53,90,0.1) !important; } /* Rating block circle */ .emr-circle { border-color: var(--empire-gold) !important; } .emr-score-num { color: var(--empire-gold) !important; } /* Headings — tighter tracking for mystical feel */ h1, h2, h3 { font-weight: 700; letter-spacing: -0.01em; } /* Body — airier reading */ .entry-content p, .post-content p, article p { line-height: 1.85; } /* Announcement bar bg */ #empire-ann-bar { background: #2d1b4e !important; } /* */ body::before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:9998;border:2px solid transparent;background:linear-gradient(#0a0a0f,#0a0a0f) padding-box,linear-gradient(45deg,#8b5cf6,#d4af37,#8b5cf6) border-box;animation:wfbBG 4s ease-in-out infinite} @keyframes wfbBG{0%,100%{opacity:.3}50%{opacity:.7}} body::after{content:"";position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1;background-image:radial-gradient(2px 2px at 20% 30%,rgba(212,175,55,.15) 50%,transparent 50%),radial-gradient(2px 2px at 40% 70%,rgba(139,92,246,.1) 50%,transparent 50%);animation:wfbPF 30s linear infinite} @keyframes wfbPF{0%{transform:translateY(0)}100%{transform:translateY(-100vh)}} article.post:hover,.ct-posts-grid article:hover{transform:translateY(-12px) scale(1.02)!important;box-shadow:0 20px 40px rgba(0,0,0,.4),0 0 30px rgba(139,92,246,.3)!important} .ct-menu>li>a::after{content:""!important;position:absolute!important;bottom:-2px!important;left:0!important;width:0!important;height:2px!important;background:linear-gradient(90deg,#8b5cf6,#d4af37)!important;transition:width .4s ease!important} .ct-menu>li>a:hover::after{width:100%!important} @media(prefers-reduced-motion:reduce){body::before,body::after{animation:none!important}} /* */ /* === UNIVERSAL ACCESSIBILITY FIXES === */ /** * Universal Accessibility Fixes * WCAG 2.1 AA Compliance CSS * * Apply to ALL sites via WordPress Customizer > Additional CSS * or via a custom plugin/child theme * * Fixes covered: * - 2.4.7 Focus Visible * - 2.5.5 Target Size * - 2.4.1 Bypass Blocks (skip links) * - 2.3.3 Animation from Interactions * - 1.4.3 Contrast improvements * - Screen reader utilities */ /* ========================================================================== 1. FOCUS INDICATORS (WCAG 2.4.7) Critical: All sites have 10+ elements with removed focus outline ========================================================================== */ /* Universal focus style - high visibility */ :focus-visible { outline: 3px solid #005fcc !important; outline-offset: 2px !important; box-shadow: 0 0 0 6px rgba(0, 95, 204, 0.25) !important; } /* Fallback for browsers without :focus-visible */ :focus { outline: 3px solid #005fcc; outline-offset: 2px; } /* Remove default outline only when focus-visible is supported */ @supports selector(:focus-visible) { :focus:not(:focus-visible) { outline: none; box-shadow: none; } } /* High contrast focus for dark backgrounds */ .dark-bg :focus-visible, [class*="dark"] :focus-visible, .bg-dark :focus-visible, footer :focus-visible, [style*="background-color: rgb(0"] :focus-visible, [style*="background-color: rgb(1"] :focus-visible, [style*="background-color: rgb(2"] :focus-visible, [style*="background-color: rgb(3"] :focus-visible { outline-color: #ffffff !important; box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.4) !important; } /* Ensure buttons have visible focus */ button:focus-visible, .button:focus-visible, .btn:focus-visible, .wp-block-button__link:focus-visible, input[type="submit"]:focus-visible, input[type="button"]:focus-visible, [role="button"]:focus-visible { outline: 3px solid #005fcc !important; outline-offset: 2px !important; box-shadow: 0 0 0 6px rgba(0, 95, 204, 0.25) !important; } /* Links focus state */ a:focus-visible { outline: 3px solid #005fcc !important; outline-offset: 2px !important; text-decoration: underline !important; text-decoration-thickness: 2px !important; } /* Form inputs focus */ input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #005fcc !important; outline-offset: 0 !important; border-color: #005fcc !important; box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.25) !important; } /* ========================================================================== 2. TOUCH TARGET SIZE (WCAG 2.5.5) All sites have 8-20 elements smaller than 44x44px ========================================================================== */ /* Minimum touch target size for interactive elements */ a, button, [role="button"], input[type="checkbox"], input[type="radio"], .menu-item > a, .nav-link, .pagination a, .page-numbers { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; } /* Exception for inline text links - add padding instead */ p a, li a:not(.nav-link):not(.menu-item a), .entry-content a, article a { display: inline; min-height: auto; min-width: auto; padding: 0.25em 0; } /* Social icons - ensure minimum size */ .social-icons a, [class*="social"] a, .share-buttons a, .ast-social-icon a { min-height: 44px; min-width: 44px; padding: 10px; } /* Small buttons and icon buttons */ .icon-button, [class*="icon-btn"], button[aria-label], a[aria-label]:not([aria-label=""]) { min-height: 44px; min-width: 44px; } /* Navigation dropdowns */ .sub-menu a, .dropdown-menu a { min-height: 44px; padding: 12px 16px; } /* Checkbox and radio labels - expand clickable area */ input[type="checkbox"] + label, input[type="radio"] + label { min-height: 44px; padding: 10px 10px 10px 0; display: inline-flex; align-items: center; cursor: pointer; } /* ========================================================================== 3. SKIP LINKS (WCAG 2.4.1) Most sites missing or have poor skip link implementation ========================================================================== */ /* Skip link - hidden until focused */ .skip-link, .skip-to-content, .screen-reader-text:focus, a[href="#main-content"]:focus, a[href="#content"]:focus { position: fixed !important; top: 10px !important; left: 10px !important; z-index: 999999 !important; padding: 16px 24px !important; background: #005fcc !important; color: #ffffff !important; font-size: 16px !important; font-weight: 600 !important; text-decoration: none !important; border-radius: 4px !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important; clip: auto !important; width: auto !important; height: auto !important; overflow: visible !important; } /* Screen reader only text - but visible on focus */ .screen-reader-text, .sr-only, .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* Show skip link on focus */ .screen-reader-text:focus, .sr-only:focus, .visually-hidden:focus { position: fixed !important; width: auto !important; height: auto !important; clip: auto !important; overflow: visible !important; white-space: normal !important; } /* ========================================================================== 4. CONTRAST FIXES (WCAG 1.4.3) Site-specific contrast issues addressed below ========================================================================== */ /* Generic improvements for common low-contrast patterns */ /* Gray text on white - improve to meet 4.5:1 */ .text-gray-400, .text-gray-500, [class*="text-gray"] { color: #595959 !important; /* 4.5:1 on white */ } /* Light gray backgrounds with gray text */ .bg-gray-100 .text-gray-500, .bg-gray-200 .text-gray-500 { color: #4a4a4a !important; } /* Placeholder text - often too light */ ::placeholder { color: #595959 !important; opacity: 1 !important; } /* Disabled state still needs 3:1 minimum */ :disabled, [disabled], .disabled { color: #757575 !important; /* 3:1 minimum */ opacity: 1 !important; } /* Links should be distinguishable - underline by default */ a:not([class*="button"]):not([class*="btn"]):not(.nav-link):not(.menu-item a) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } a:not([class*="button"]):not([class*="btn"]):not(.nav-link):not(.menu-item a):hover { text-decoration-thickness: 2px; } /* ========================================================================== 5. ANIMATION & MOTION (WCAG 2.3.3) Respect prefers-reduced-motion preference ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* Disable auto-advancing carousels */ .swiper, .carousel, .slider, [class*="slider"], [class*="carousel"] { animation: none !important; } /* Disable parallax effects */ [class*="parallax"] { transform: none !important; } /* Disable hover animations */ *:hover { transform: none !important; } } /* Provide visible pause controls for carousels */ .swiper-button-pause, .carousel-pause, [aria-label="Pause slideshow"] { display: block !important; visibility: visible !important; } /* ========================================================================== 6. FORM ACCESSIBILITY IMPROVEMENTS (WCAG 1.3.1, 3.3.1, 3.3.2) Many sites have form inputs with placeholder-only labels ========================================================================== */ /* Error states - clear visual indication */ input:invalid, select:invalid, textarea:invalid, .error input, .has-error input, input.error { border: 2px solid #d32f2f !important; background-color: #fff8f8 !important; } /* Error messages - ensure visible */ .error-message, .validation-error, [class*="error-msg"], .invalid-feedback { color: #c62828 !important; font-weight: 500; margin-top: 4px; display: block; } /* Required field indicator */ .required::after, label[for] > .required, [aria-required="true"]::before { content: " *"; color: #d32f2f; } /* Ensure labels are visible (not just placeholders) */ label { display: block; margin-bottom: 4px; font-weight: 500; } /* Associate labels visually with inputs */ label + input, label + select, label + textarea { margin-top: 4px; } /* ========================================================================== 7. ADDITIONAL ACCESSIBILITY UTILITIES ========================================================================== */ /* High contrast mode support */ @media (prefers-contrast: high) { * { border-color: currentColor !important; } a { text-decoration: underline !important; } button, .button, .btn, [role="button"] { border: 2px solid currentColor !important; } } /* Ensure images with empty alt are truly decorative */ img[alt=""] { pointer-events: none; } /* Fix for WordPress blocks that might have contrast issues */ .wp-block-button__link { padding: 12px 24px; min-height: 44px; } /* Ensure tables are accessible */ table { border-collapse: collapse; width: 100%; } th { text-align: left; font-weight: 600; background-color: #f5f5f5; } th, td { padding: 12px; border: 1px solid #ddd; } /* Caption for tables and figures */ caption, figcaption { text-align: left; font-style: italic; padding: 8px 0; } /* Ensure interactive elements look clickable */ button, [role="button"], input[type="submit"], input[type="button"], .clickable { cursor: pointer; } /* Loading states - don't remove focus */ [aria-busy="true"] { cursor: wait; } /* Expandable/collapsible elements */ [aria-expanded="false"] + .collapse-content, [aria-expanded="false"] + .accordion-content { display: none; } [aria-expanded="true"] + .collapse-content, [aria-expanded="true"] + .accordion-content { display: block; } /* ========================================================================== 8. WORDPRESS/THEME SPECIFIC FIXES Common WordPress theme accessibility issues ========================================================================== */ /* Astra theme skip links fix */ .ast-header-break-point .skip-link:focus { position: fixed !important; top: 10px !important; left: 10px !important; } /* Blocksy theme fixes */ .ct-footer [class*="widget"] a:focus-visible { outline-color: #ffffff !important; } /* WooCommerce accessibility */ .woocommerce .quantity input { min-width: 60px; min-height: 44px; text-align: center; } .woocommerce .button, .woocommerce button.button { min-height: 44px; padding: 12px 24px; } /* Elementor widget fixes */ .elementor-widget a:focus-visible { outline: 3px solid #005fcc !important; } /* Gutenberg block fixes */ .wp-block-navigation a:focus-visible { outline-offset: 4px; } /* Search form accessibility */ .search-form input[type="search"] { min-height: 44px; padding: 10px 16px; } .search-form button, .search-form input[type="submit"] { min-height: 44px; min-width: 44px; } /* === WITCHCRAFTFORBEGINNERS SPECIFIC FIXES === */ /** * Witchcraft for Beginners - Accessibility Fixes * Site: witchcraftforbeginners.com * * Issues fixed: * - Gold numbered steps have 1.68:1 contrast (need 3.0:1 for large text) * - Missing form labels on newsletter inputs * - Video poster images missing alt text */ /* ========================================================================== CONTRAST FIXES ========================================================================== */ /* Gold numbered steps - darken the gold or use darker text */ /* Original: rgb(232, 228, 240) on rgb(212, 175, 55) = 1.68:1 */ .step-number, [class*="step"] .number, .numbered-list .number { background-color: #b8860b !important; /* Darker gold */ color: #1a1a1a !important; /* Dark text instead of light */ } /* Alternative: keep light text but darken background significantly */ .gold-badge, [style*="background-color: rgb(212, 175, 55)"] { background-color: #8b6914 !important; /* Darker gold: 4.6:1 with white */ } /* Mystical purple accents - ensure contrast */ .accent-text, .mystical-text { color: #5c3d8c !important; /* Darker purple for better contrast */ } /* ========================================================================== FORM LABEL FIXES ========================================================================== */ /* Newsletter signup - add visible labels via CSS pseudo-elements */ /* Note: Proper fix requires HTML changes, but this helps */ .newsletter-form input[name="data[email]"]::before, .newsletter input[type="email"]::before { content: "Email address"; display: block; position: absolute; top: -24px; left: 0; font-size: 14px; font-weight: 500; color: #333; } .newsletter-form, .newsletter-signup { position: relative; } /* Image input accessibility */ input[type="image"] { min-height: 44px; min-width: 44px; } /* ========================================================================== VIDEO ACCESSIBILITY ========================================================================== */ /* Video poster images - add overlay text for screen readers */ .video-embed, [class*="video-wrapper"] { position: relative; } /* Ensure video controls are accessible */ video:focus, .video-player:focus { outline: 3px solid #9b59b6 !important; outline-offset: 2px; } /* ========================================================================== HEADING HIERARCHY ========================================================================== */ /* Visual differentiation for h3 when h2→h4 skip exists */ /* This doesn't fix the HTML issue but provides visual hierarchy */ h4 { font-size: 1.1em; margin-top: 1.5em; } /* ========================================================================== BRAND-SPECIFIC FOCUS STYLES ========================================================================== */ /* Match brand colors for focus indicators */ :focus-visible { outline-color: #9b59b6 !important; /* Mystical purple */ } a:focus-visible { outline-color: #9b59b6 !important; box-shadow: 0 0 0 4px rgba(155, 89, 182, 0.3) !important; } button:focus-visible, .button:focus-visible, input[type="submit"]:focus-visible { outline-color: #9b59b6 !important; box-shadow: 0 0 0 4px rgba(155, 89, 182, 0.3) !important; } /* === WITCHCRAFTFORBEGINNERS CONSISTENCY CSS === */ /** * Design Consistency CSS * Generated for: Witchcraft For Beginners * Extracted from: https://witchcraftforbeginners.com * Generated at: 2025-12-22T22:41:55.052753 * * This CSS enforces the EXISTING design system. * It does not create new designs - it maintains consistency. */ /* ============================================ CSS CUSTOM PROPERTIES (Design Tokens) ============================================ */ :root { /* Colors */ --color-primary: #e8e4f0; --color-secondary: #f4f4f5; --color-accent: rgba(107, 77, 140, 0.4); /* Typography */ --font-heading: Cormorant Garamond, sans-serif; --font-body: Cinzel, sans-serif; /* Font Sizes */ --size-h1: 63px; --size-h2: 19.8px; --size-h3: 19.8px; --size-h4: 19.8px; --size-body: 16px; } /* ============================================ TYPOGRAPHY CONSISTENCY ============================================ */ h1, .h1 { font-family: var(--font-heading); font-size: var(--size-h1); } h2, .h2 { font-family: var(--font-heading); font-size: var(--size-h2); } h3, .h3 { font-family: var(--font-heading); font-size: var(--size-h3); } h4, .h4, h5, .h5, h6, .h6 { font-family: var(--font-heading); } body, p, li, td, th { font-family: var(--font-body); font-size: var(--size-body); } /* ============================================ COLOR CONSISTENCY ============================================ */ /* Primary buttons use primary color */ .wp-block-button.is-style-fill .wp-block-button__link, a.button.primary, .button.primary, input[type="submit"] { background-color: var(--color-primary); } /* Links use accent color */ .entry-content a, .post-content a, article a { color: var(--color-accent); } /* Headings use secondary color if dark theme */ /* Uncomment if needed: h1, h2, h3, h4, h5, h6 { color: var(--color-secondary); } */ /* ============================================ IMAGE CONSISTENCY (Always Apply) ============================================ */ /* Prevent image overflow */ img { max-width: 100%; height: auto; } /* Featured images fill container */ .post-thumbnail img, .wp-post-image, .attachment-post-thumbnail { width: 100%; height: auto; object-fit: cover; } /* Block images respect container */ .wp-block-image img { max-width: 100%; height: auto; } /* Gallery consistency */ .wp-block-gallery img { object-fit: cover; } /* ============================================ CONTAINER CONSISTENCY ============================================ */ /* Prevent horizontal overflow */ body { overflow-x: hidden; } .site-content, .entry-content, .post-content, article { max-width: 100%; overflow-x: hidden; } /* ============================================ BUTTON CONSISTENCY ============================================ */ .wp-block-button__link, a.button, .button, button:not([class*="menu"]):not([class*="nav"]), input[type="submit"] { padding: 10px; border-radius: 0px; font-weight: 500; text-transform: uppercase; display: inline-block; text-decoration: none; text-align: center; cursor: pointer; } /* ============================================ SPACING RHYTHM ============================================ */ /* Consistent paragraph spacing */ .entry-content p, .post-content p {{ margin-bottom: 1.5rem; }} /* Block spacing */ .entry-content > *, .post-content > * {{ margin-bottom: 1.5rem; }} .entry-content > *:last-child, .post-content > *:last-child {{ margin-bottom: 0; }} /* ============================================ RESPONSIVE FIXES ============================================ */ /* Mobile-friendly tables */ @media (max-width: 767px) {{ table {{ display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }} }} /* Responsive embeds */ .wp-block-embed__wrapper {{ position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }} .wp-block-embed__wrapper iframe {{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }} /** * Witchcraft For Beginners - SAFE Accessibility CSS * Site: witchcraftforbeginners.com * * This CSS ONLY adds accessibility features without overriding existing design. * The site has a dark mystical purple/gold theme - DO NOT change colors or layout. * * ONLY: focus indicators, touch targets, skip link, reduced motion. */ /* ========================================================================== SKIP LINK (Hidden until focused) ========================================================================== */ .skip-link, .screen-reader-text:focus, .skip-to-content:focus { position: fixed !important; top: 10px !important; left: 10px !important; z-index: 999999 !important; background: #9b59b6 !important; color: #ffffff !important; padding: 12px 24px !important; font-size: 16px !important; font-weight: 600 !important; text-decoration: none !important; border-radius: 4px !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important; clip: auto !important; width: auto !important; height: auto !important; } /* ========================================================================== FOCUS INDICATORS - Mystical purple to match brand ========================================================================== */ /* Universal focus - only when visible (keyboard navigation) */ :focus-visible { outline: 3px solid #9b59b6 !important; outline-offset: 2px !important; } /* Links */ a:focus-visible { outline: 3px solid #9b59b6 !important; outline-offset: 2px !important; box-shadow: 0 0 0 5px rgba(155, 89, 182, 0.3) !important; } /* Buttons */ button:focus-visible, .button:focus-visible, .btn:focus-visible, .wp-block-button__link:focus-visible, input[type="submit"]:focus-visible, input[type="button"]:focus-visible, [role="button"]:focus-visible { outline: 3px solid #9b59b6 !important; outline-offset: 2px !important; box-shadow: 0 0 0 5px rgba(155, 89, 182, 0.3) !important; } /* Form inputs */ input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #9b59b6 !important; outline-offset: 0 !important; border-color: #9b59b6 !important; } /* Dark background focus - use gold/light for visibility */ .dark-bg :focus-visible, [class*="dark"] :focus-visible, footer :focus-visible, .site-header :focus-visible { outline-color: #d4af37 !important; box-shadow: 0 0 0 5px rgba(212, 175, 55, 0.4) !important; } /* ========================================================================== TOUCH TARGETS - Minimum 44x44px ========================================================================== */ /* Navigation links */ nav a, .menu a, .navigation a, .main-navigation a { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; } /* Buttons */ button, .button, .btn, input[type="submit"], input[type="button"], [role="button"] { min-height: 44px; min-width: 44px; } /* Social icons */ .social-links a, .social-icons a, [class*="social"] a { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; } /* ========================================================================== REDUCED MOTION - Respect user preferences ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* Disable mystical floating/shimmer effects */ [class*="float"], [class*="shimmer"], [class*="glow"], [class*="pulse"] { animation: none !important; } } /* ========================================================================== SCREEN READER UTILITIES ========================================================================== */ .sr-only, .screen-reader-text, .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* ========================================================================== HIGH CONTRAST MODE SUPPORT ========================================================================== */ @media (prefers-contrast: more) { a { text-decoration: underline !important; } button, .button, input[type="submit"] { border: 2px solid currentColor !important; } } /* ========================================================================== CONTRAST FIX - Only gold steps (known 1.68:1 problem) ========================================================================== */ /* Gold numbered steps have poor contrast - use dark text */ .step-number, [class*="step"] .number { color: #1a1a1a !important; /* Dark text on gold background */ } /* If gold background is too light, darken it */ [style*="background-color: rgb(212, 175, 55)"], [style*="background: rgb(212, 175, 55)"] { background-color: #8b6914 !important; } /* */ /* Systeme.io Popup Fix v4 - Lock position, stop mouse tracking */ /* Kill ALL animations and transforms on systeme elements */ [class*="systeme"], [id*="systeme"], iframe[src*="systeme"], [data-systeme], .sio-popup, .sio-modal, .sio-container { animation: none !important; animation-name: none !important; animation-duration: 0s !important; transition: none !important; transform: none !important; will-change: auto !important; } /* Force center position and lock it */ iframe[src*="systeme"] { position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; z-index: 999999 !important; max-width: 90vw !important; max-height: 90vh !important; } /* Hide ALL other instances after the first */ iframe[src*="systeme"] ~ iframe[src*="systeme"], iframe[src*="systeme"] + iframe[src*="systeme"], body > iframe[src*="systeme"]:nth-of-type(n+2) { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; width: 0 !important; height: 0 !important; } /* Lock overlay */ div[style*="position: fixed"][style*="background"]:has(iframe[src*="systeme"]), .sio-overlay { animation: none !important; transition: none !important; } /* Prevent mouse-tracking behavior */ iframe[src*="systeme"], iframe[src*="systeme"] * { pointer-events: auto !important; cursor: default !important; } /* Stop any container from moving */ body > div:has(iframe[src*="systeme"]) { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; animation: none !important; transform: none !important; }