/* * ReaderX site-wide visual theme -- header, navigation, search/browse * buttons, and homepage section panel backgrounds. * * Approved color system (locked): * Main background: #17181D | Section panels: #242424 * Primary accent: #EC4899 | Hover accent: #F472B6 * Primary text: #FFFFFF | Secondary text: #CFCFCF | Muted text: #9CA3AF * * Loaded site-wide (via footer.php, same pattern already used for * footer.css) since the header and footer appear on every page, not just * the homepage. Desktop-focused; no responsive/mobile changes in this * pass, per the approved scope. * * Does not touch: the Top 100 ranking page's own card/layout, any PHP * template structure, AJAX, or the parent's existing selectors beyond * color/border/shadow refinement. */ body { background-color: #17181D; } .site-logo { color: #FFFFFF; } /* * NAVIGATION POLISH (this revision): desktop (.ya-menu) and mobile * (.ya-bottom-nav) both restyled to match the ReaderX design system -- * same pink accent (#EC4899 / hover #F472B6), same premium dark surface * treatment, same muted-white default text (rgba(255,255,255,0.65)) and * subtle border (rgba(255,255,255,0.12)) used elsewhere in this system. * Scoped strictly to .ya-menu / .ya-bottom-nav and their direct link/item * children -- no broad selectors that could reach other menus. Navigation * URLs, item count, and PHP logic are all untouched; this is CSS only. * * The parent's own .ya-bottom-nav rules are scattered across several * duplicated blocks in style_new.css, some using !important for * background/border-top. This file loads via a placed in * footer.php (near the end of ), so at equal specificity it already * wins the cascade by document order -- !important is added here only on * the specific properties (background, border-top, box-shadow) known to * be !important in at least one of those parent blocks, to guarantee the * override actually applies regardless of which duplicate is "active" at * a given breakpoint. Desktop .ya-menu rules need no !important, since * the parent's own desktop nav rule was already confirmed to have none. */ .ya-menu a { color: rgba(255, 255, 255, 0.65); transition: color 0.15s ease, background-color 0.15s ease; padding: 6px 14px; border-radius: 999px; border-bottom: 2px solid transparent; } .ya-menu a:hover { color: #F472B6; background-color: rgba(236, 72, 153, 0.08); border-bottom-color: transparent; } .ya-menu a.active { color: #EC4899; background-color: transparent; border-bottom-color: #EC4899; } .ya-bottom-nav { background: #242424 !important; border-top: 1px solid rgba(255, 255, 255, 0.12) !important; box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.25) !important; } .ya-bottom-nav a, .ya-bottom-nav li a { color: rgba(255, 255, 255, 0.65) !important; transition: color 0.15s ease, background-color 0.15s ease; } .ya-bottom-nav a:hover, .ya-bottom-nav li a:hover, .ya-bottom-nav a:active, .ya-bottom-nav li a:active { color: #F472B6 !important; background-color: rgba(236, 72, 153, 0.06); } .ya-bottom-nav a.active, .ya-bottom-nav li a.active { color: #EC4899 !important; background-color: transparent; border-radius: 0; box-shadow: inset 0 2px 0 0 #EC4899; } .ya-bottom-nav li a i { font-size: 20px !important; } .search-icon-btn, .search-modal-filter { border: 1px solid #EC4899; color: #EC4899; border-radius: 8px; transition: background-color 0.15s ease, color 0.15s ease; } .search-icon-btn:hover, .search-modal-filter:hover { background-color: #EC4899; color: #FFFFFF; } /* Homepage section panels (Popular, Recently Added) -- soft dark panel background behind each section, matching the approved mockup. Scoped to the specific section wrapper classes already in use, not a generic ".ya-section" rule, so unrelated homepage sections are unaffected. */ .readerx-popular-section, .recently-added-section { background: #242424; border: 1px solid #333333; border-radius: 14px; padding: 24px; } .readerx-popular-section .section-header h2, .recently-added-section .section-header h2 { color: #FFFFFF; }