/* Theme Name: Baal Gyan Bharat Theme URI: https://example.com/baal-gyan-bharat Author: Antigravity AI Author URI: https://example.com Description: A premium WordPress theme for Indian mythology stories and bhajans. Version: 1.0.0 Text Domain: baal-gyan-bharat License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html */ /* ════════════════════════════════════════════════════════════ PROBLEM 1 FIXED: @layer base and @apply DO NOT WORK in a WordPress style.css. This file is served as plain CSS — it is never processed by Tailwind's compiler. Every @apply line was silently ignored by the browser, meaning your body background, pagination, and prose styles were doing nothing. Replaced with real, valid CSS below. PROBLEM 2 FIXED: --accent was never defined as a CSS variable anywhere, so bg-accent / text-accent / border-accent had no value. Defined properly in :root now. PROBLEM 3 FIXED: body had bg/text set here AND Tailwind utility classes on the tag in header.php. Two competing sources of truth. CSS variables + explicit body rules here now win cleanly. PROBLEM 4 FIXED: .prose blockquote used text-white and font-medium via @apply — these were never applied, so blockquotes looked unstyled. Real CSS now. ════════════════════════════════════════════════════════════ */ /* ── CSS VARIABLES (define once, use everywhere) ────────── */ :root { --accent: #FF6B1A; --accent-gold: #FFB800; --accent-rose: #FF6B9D; --accent-violet: #9B59D0; --bg-base: #0a0a0a; --bg-card: rgba(255, 255, 255, 0.05); --border-subtle: rgba(255, 255, 255, 0.10); --text-primary: #ffffff; --text-muted: rgba(255, 255, 255, 0.60); --radius-lg: 32px; --radius-xl: 48px; } /* ── BASE RESET ─────────────────────────────────────────── */ html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; } body { background-color: var(--bg-base); color: var(--text-primary); min-height: 100vh; /* Selection highlight */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ::selection { background-color: var(--accent); color: #000000; } ::-moz-selection { background-color: var(--accent); color: #000000; } /* ── LUCIDE ICON ALIGNMENT ──────────────────────────────── */ .lucide { display: inline-block; vertical-align: middle; } /* ── CUSTOM PAGINATION ──────────────────────────────────── */ .pagination-wrapper { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; } .pagination-wrapper .page-numbers { display: inline-flex; align-items: center; justify-content: center; padding: 16px 24px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 16px; font-size: 18px; font-weight: 700; color: var(--text-primary); text-decoration: none; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .pagination-wrapper .page-numbers:hover { background: var(--accent); color: #000000; border-color: var(--accent); } .pagination-wrapper .page-numbers.current { background: var(--accent); color: #000000; border-color: var(--accent); } .pagination-wrapper .prev, .pagination-wrapper .next { display: inline-flex; align-items: center; justify-content: center; } /* ── PROSE / POST CONTENT TYPOGRAPHY ───────────────────── */ .prose pre { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: var(--radius-lg); padding: 32px; overflow-x: auto; } .prose blockquote { border-left: 4px solid var(--accent); background: rgba(255, 107, 26, 0.05); padding: 32px; border-radius: 0 var(--radius-lg) var(--radius-lg) 0; font-style: italic; color: var(--text-primary); font-weight: 500; margin: 0; } .prose hr { border: none; border-top: 1px solid rgba(255, 255, 255, 0.10); margin: 64px 0; } /* ── GLOBAL UTILITY CLASSES ─────────────────────────────── */ /* These replace the Tailwind classes your templates rely on without needing a build pipeline. */ .text-accent { color: var(--accent) !important; } .bg-accent { background-color: var(--accent) !important; } .border-accent { border-color: var(--accent) !important; } .text-accent-gold { color: var(--accent-gold); } .text-accent-rose { color: var(--accent-rose); } .text-accent-violet { color: var(--accent-violet); } /* ── SCROLLBAR STYLING ──────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bg-base); } ::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 99px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent-gold); } /* ── FOCUS VISIBLE ──────────────────────────────────────── */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* ── SMOOTH IMAGE LOADING ───────────────────────────────── */ img { max-width: 100%; height: auto; }