/* ============================================================ BÍBLIA ONLINE FIEL — Temas de cor (Auto / Claro / Sépia / Escuro) Só redefine tokens. Sem data-theme = segue o SO (@media). [data-theme="…"] no força um modo (script inline + toggle). ============================================================ */ /* ──────────────────────────────────────────── GENERATEPRESS — superfícies não tokenizadas O GP força #f7f8f9 no e #fff nas "separate-containers". Sem isto o fundo da página e os cards de post/página não acompanham o tema (ficam claros no modo escuro). ──────────────────────────────────────────── */ html, body { background-color: var(--bof-cream) !important; } .inside-article, .separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .comment-respond, .separate-containers .page-header, .separate-containers .paging-navigation, .author-box, .widget-area .widget, .sidebar .widget { background-color: var(--bof-white) !important; color: var(--bof-dark); } /* Texto do GP dentro dos contêineres → tokens do tema */ .comments-area, .comment-body, .comment-content, .comment-content p, .comment-metadata, .author-box { color: var(--bof-dark); } .comment-author .fn, .comments-title, .comment-reply-title { color: var(--bof-heading); } .comment-metadata a, .comment-meta a { color: var(--bof-mid); } /* ── color-scheme: scrollbar e controles nativos acompanham ── */ :root { color-scheme: light; } :root[data-theme="light"], :root[data-theme="sepia"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; } } /* ──────────────────────────────────────────── MODO ESCURO Aplicado por dois seletores (Auto no SO escuro + forçado). CSS não permite compartilhar blocos de tokens; daí a duplicação. ──────────────────────────────────────────── */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bof-cream: #14181f; /* fundo da página */ --bof-cream-rgb: 20,24,31; --bof-cream-d: #2e3742; /* bordas / divisores */ --bof-white: #1c222b; /* cards / superfícies */ --bof-white-rgb: 28,34,43; --bof-heading: #e7ebf2; /* títulos (era navy) */ --bof-dark: #d9dee6; /* texto principal */ --bof-dark-rgb: 217,222,230; --bof-mid: #9ba6b4; /* texto secundário */ --bof-mid-rgb: 155,166,180; --bof-gold: #d0a24a; /* acento — clareado */ --bof-gold-rgb: 208,162,74; --bof-gold-l: #e0b860; --bof-gold-dark: #d8ad57; --bof-link: #d9ae5c; /* links de texto (≈7:1 sobre o fundo) */ --bof-link-hover: #e8c57d; --bof-shadow-sm: 0 1px 3px rgba(0,0,0,0.4); --bof-shadow: 0 2px 12px rgba(0,0,0,0.45); --bof-shadow-md: 0 4px 20px rgba(0,0,0,0.5); --bof-shadow-lg: 0 8px 32px rgba(0,0,0,0.55); --bof-shadow-gold: 0 4px 20px rgba(208,162,74,0.20); } } :root[data-theme="dark"] { --bof-cream: #14181f; --bof-cream-rgb: 20,24,31; --bof-cream-d: #2e3742; --bof-white: #1c222b; --bof-white-rgb: 28,34,43; --bof-heading: #e7ebf2; --bof-dark: #d9dee6; --bof-dark-rgb: 217,222,230; --bof-mid: #9ba6b4; --bof-mid-rgb: 155,166,180; --bof-gold: #d0a24a; --bof-gold-rgb: 208,162,74; --bof-gold-l: #e0b860; --bof-gold-dark: #d8ad57; --bof-link: #d9ae5c; --bof-link-hover: #e8c57d; --bof-shadow-sm: 0 1px 3px rgba(0,0,0,0.4); --bof-shadow: 0 2px 12px rgba(0,0,0,0.45); --bof-shadow-md: 0 4px 20px rgba(0,0,0,0.5); --bof-shadow-lg: 0 8px 32px rgba(0,0,0,0.55); --bof-shadow-gold: 0 4px 20px rgba(208,162,74,0.20); } /* ──────────────────────────────────────────── MODO SÉPIA — papel quente para leitura ──────────────────────────────────────────── */ :root[data-theme="sepia"] { --bof-cream: #f2e8d5; --bof-cream-rgb: 242,232,213; --bof-cream-d: #ddccb0; --bof-white: #f9f2e2; --bof-white-rgb: 249,242,226; --bof-heading: #43341f; --bof-dark: #3a2e20; --bof-dark-rgb: 58,46,32; --bof-mid: #7a6a52; --bof-mid-rgb: 122,106,82; --bof-gold: #a8761f; --bof-gold-rgb: 168,118,31; --bof-gold-l: #c08f30; --bof-gold-dark: #8a5f18; --bof-link: #7e5a1c; --bof-link-hover: #5e4315; --bof-shadow-sm: 0 1px 3px rgba(67,52,31,0.10); --bof-shadow: 0 2px 12px rgba(67,52,31,0.12); --bof-shadow-md: 0 4px 20px rgba(67,52,31,0.14); --bof-shadow-lg: 0 8px 32px rgba(67,52,31,0.16); --bof-shadow-gold: 0 4px 20px rgba(168,118,31,0.18); } /* ──────────────────────────────────────────── MODO CLARO EXPLÍCITO — vence o @media quando o SO é escuro mas o usuário escolheu "Claro". ──────────────────────────────────────────── */ :root[data-theme="light"] { --bof-cream: #F4EFE4; --bof-cream-rgb: 244,239,228; --bof-cream-d: #E4D9C8; --bof-white: #FDFBF7; --bof-white-rgb: 253,251,247; --bof-heading: var(--bof-navy); --bof-dark: #1C1C1E; --bof-dark-rgb: 28,28,30; --bof-mid: #8B7D6B; --bof-mid-rgb: 139,125,107; --bof-gold: #BF8A30; --bof-gold-rgb: 191,138,48; --bof-gold-l: #D4A445; --bof-gold-dark: #9A6E22; --bof-link: #8A6220; --bof-link-hover: #6E4E1A; --bof-shadow-sm: 0 1px 3px rgba(26,46,74,0.06); --bof-shadow: 0 2px 12px rgba(26,46,74,0.08); --bof-shadow-md: 0 4px 20px rgba(26,46,74,0.10); --bof-shadow-lg: 0 8px 32px rgba(26,46,74,0.12); --bof-shadow-gold: 0 4px 20px rgba(191,138,48,0.15); }