/*! * Nigerian Waves -- sitewide Light/Dark appearance system. * * Architecture: * - `data-theme="light"|"dark"` on , set by js/theme-toggle.js and persisted * to localStorage (key "mvp-theme"). A blocking inline script in header.php * applies the saved value before first paint to avoid a flash of the wrong mode. * - Header/footer/fly-menu colors are driven by CSS custom properties (the * --nw-header-... and --nw-footer-... tokens below), defined once in :root * for light mode and redefined once under [data-theme="dark"] -- this is the single, * centralized place that controls both states; nothing else in the codebase * should hardcode a header/footer color. Neutral by design for now (white in * light, black in dark) -- brand green is used only for small accent/hover * touches, not backgrounds, pending the dedicated branding phase. * - These tokens are the *authoritative* source for header/footer color, * including in light mode. The theme's own admin-configurable options * (mvp_top_nav_bg, mvp_top_nav_text, mvp_bot_nav_*) still exist, still have a * working UI in the theme options panel, and this phase kept their "std" * defaults in admin/options.php in sync with the tokens below -- but they are * no longer the deciding factor for the rendered color. This is a deliberate * choice, not an oversight: Phase 1A found several of these specific stored * option values reverting to old defaults intermittently for a cause that * could not be root-caused in this environment (cron/caching/page-load side * effects were all ruled out), and the option system has no concept of a * "dark" variant at all. A single reliable source of truth was judged safer * than a customization path that -- evidence showed -- doesn't reliably hold * its value. See the Phase 1A and color-adjustment regression reports. * - Everything else (the whole #mvp-main-body-wrap content area: homepage, cards, * category/tag/search/single/author/404, widgets, forms, buttons, pagination) * is re-themed by inverting that single container's lightness in dark mode and * re-inverting media (img/video/iframe/svg/etc.) back to normal. This is * intentionally NOT converted to the token system yet -- see the CSS-variable * architecture investigation in the color-adjustment report for why, and the * recommended timing for that larger conversion. */ :root { --nw-header-bg: #FFFFFF; --nw-header-text: #1A1A1A; --nw-header-text-muted: #6B7280; --nw-header-icon-bg: rgba(0,0,0,.06); --nw-header-accent: #008751; --nw-footer-bg: #FFFFFF; --nw-footer-text: #1A1A1A; --nw-footer-text-muted: #6B7280; --nw-footer-icon-bg: rgba(0,0,0,.06); --nw-footer-accent: #008751; --nw-footer-top-overlay: rgba(0,0,0,.035); --mvp-toggle-track: rgba(0,0,0,.08); --mvp-toggle-icon: #1A1A1A; } [data-theme="dark"] { --nw-header-bg: #000000; --nw-header-text: #F2F2F2; --nw-header-text-muted: #A3A3A3; --nw-header-icon-bg: rgba(255,255,255,.12); --nw-header-accent: #21C55D; --nw-footer-bg: #000000; --nw-footer-text: #F2F2F2; --nw-footer-text-muted: #A3A3A3; --nw-footer-icon-bg: rgba(255,255,255,.12); --nw-footer-accent: #21C55D; --nw-footer-top-overlay: rgba(255,255,255,.05); --mvp-toggle-track: rgba(255,255,255,.14); --mvp-toggle-icon: #F2F2F2; } /* -------------------------------------------------- */ /* Toggle button */ /* -------------------------------------------------- */ .mvp-theme-toggle { background: var(--mvp-toggle-track); border: 0; border-radius: 50%; color: var(--mvp-toggle-icon); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; float: left; width: 42px; height: 42px; margin: 0 18px 0 0; padding: 0; transition: background .2s ease, transform .15s ease; } .mvp-theme-toggle:hover { background: var(--nw-header-icon-bg); } .mvp-theme-toggle:active { transform: scale(0.92); } .mvp-theme-toggle:focus-visible { outline: 2px solid var(--nw-header-accent); outline-offset: 2px; } .mvp-theme-toggle-icon { display: block; } /* The icon shown communicates the mode a click switches TO, not the current mode: light mode shows the moon (click to go dark), dark mode shows the sun (click to go light). */ .mvp-theme-toggle-sun { display: none; } [data-theme="dark"] .mvp-theme-toggle-moon { display: none; } [data-theme="dark"] .mvp-theme-toggle-sun { display: block; } /* Placement: sits in the same right-hand rail as the existing search icon, in both nav layouts, so it lands in the header's top-right corner regardless of which mvp_nav_layout option is active. Sizing/alignment for the .mvp-nav-top-right rail itself is now handled by the grid layout below (see "Top row structural layout"), which applies at every breakpoint -- no separate <=1003px override is needed any more. */ #mvp-nav-small-right .mvp-theme-toggle, .mvp-nav-top-right .mvp-theme-toggle { margin: 0; } #mvp-nav-small-right .mvp-theme-toggle { width: 30px; height: 30px; margin-right: 12px; } #mvp-nav-small-right .mvp-theme-toggle-icon { width: 16px; height: 16px; } /* The main nav layout (mvp_nav_layout != "1") has TWO hamburger/fly-menu triggers in the markup: one in the always-visible top row (next to the logo -- this is the one mobile/tablet actually relies on, left alone), and a second, redundant one inside #mvp-main-nav-bot, the row that only ever renders at >=1004px (it's display:none below that in every media-queries.css breakpoint block -- confirmed, not assumed). That second one is what shows up immediately before "BREAKING NEWS" on desktop. Since its parent row is already mobile-hidden by the theme's own responsive CSS, hiding it here needs no media query of its own -- it was only ever reachable at desktop widths in the first place. The underlying WordPress menu and fly-out functionality are untouched. */ #mvp-nav-bot-wrap .mvp-fly-but-wrap { display: none; } /* Phase 2A: the theme shipped two search triggers -- one in this top utility row (beside where the toggle now lives) and a duplicate at the far right of the main menu row. The top-row one was display:none by default; the menu-row duplicate has been removed from header.php. This un-hides the remaining trigger and gives it the same 42px circular button treatment as the toggle (Phase 2B) so the two read as a deliberately matched pair instead of a large button next to a small glyph. Layout order (toggle before search) is set by DOM order plus the grid rail below, not by float. */ .mvp-nav-top-right .mvp-nav-search-but { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; font-size: 20px; border-radius: 50%; color: var(--nw-header-text); transition: background .2s ease; margin: 0; padding: 0; } .mvp-nav-top-right .mvp-nav-search-but:hover { background: var(--nw-header-icon-bg); } /* -------------------------------------------------- */ /* Top row structural layout (Phase 2B) */ /* The theme's original 3-column layout (social | logo | */ /* toggle+search) used a float + negative-margin technique*/ /* whose centering only ever worked once position:fixed */ /* cancelled the outer float -- at rest the "centered" */ /* logo was measurably ~120px off-center at 1440px (and */ /* off by a different, inconsistent amount at every other */ /* breakpoint), because floated elements ignore */ /* margin:auto. Replaced with CSS Grid (1fr auto 1fr): */ /* the middle column is mathematically centered between */ /* the two 1fr side columns regardless of how much content */ /* those columns hold, in the resting state and the fixed */ /* state alike, at every viewport width, with no per- */ /* breakpoint pixel math. The legacy wrapper divs that only */ /* existed to implement the old negative-margin trick are */ /* collapsed with display:contents so their children (the */ /* actual social/logo/toggle+search blocks) become direct */ /* grid items -- nothing inside those three blocks needed to */ /* change, only how the three of them are placed relative to */ /* each other. */ #mvp-nav-top-wrap { display: grid; /* minmax(0, 1fr), not plain 1fr: a bare 1fr track still expands to fit its content's own minimum size first, so the two side columns can end up unequal (and the middle column off-center) if one holds more content than the other -- e.g. the mobile hamburger that only shows up in the left column below 1004px. minmax(0, ...) removes that content-driven minimum so both side columns are always forced to the same width, keeping the logo centered regardless of what's in either column. */ grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; float: none; width: 100%; } .mvp-nav-top-right-out, .mvp-nav-top-right-in, .mvp-nav-top-cont, .mvp-nav-top-left-out, .mvp-nav-top-left-in { display: contents; } .mvp-nav-top-left { grid-column: 1; grid-row: 1; position: relative; float: none; width: auto; height: 100%; min-height: 42px; } .mvp-nav-top-mid { grid-column: 2; grid-row: 1; position: relative; float: none; width: auto; text-align: center; } .mvp-nav-top-right { grid-column: 3; grid-row: 1; justify-self: end; position: relative; float: none; width: auto; height: auto; display: flex; align-items: center; gap: 12px; } /* Nudge the social icons in from the header's own edge rather than sitting flush against it (item 7) -- the icon group's own width no longer plays any part in centering the logo, so this is a pure spacing choice, not a compensating offset. */ .mvp-nav-soc-wrap { left: 20px; } /* At narrow mobile widths the logo alone (185px for the configured small-nav logo asset) plus the left column's own offset leaves less room than a 42px toggle + 42px search comfortably fit in without touching the logo -- confirmed by measurement, not assumed (16px of overlap at 390px with both at 42px). Sized down for this range only, the same way the toggle already had a smaller variant for the (currently inactive) compact nav layout; this is an intentional, modest mobile sizing choice, not a value chosen to paper over a centering bug. */ @media screen and (max-width: 479px) { .mvp-nav-top-right { gap: 8px; } .mvp-nav-top-right .mvp-theme-toggle, .mvp-nav-top-right .mvp-nav-search-but { width: 34px; height: 34px; } .mvp-nav-top-right .mvp-theme-toggle-icon { width: 18px; height: 18px; } .mvp-nav-top-right .mvp-nav-search-but { font-size: 16px; } } /* -------------------------------------------------- */ /* Header / footer / fly-menu -- driven by the tokens */ /* above. This is the single place these are set. */ /* -------------------------------------------------- */ #mvp-main-nav-top, #mvp-fly-wrap, .mvp-soc-mob-right, #mvp-main-nav-small-cont, #mvp-main-nav-bot-cont { background: var(--nw-header-bg); } /* The page background shows in the gutters flanking the now-contained header (see the "Sticky header width" block below) and must track light/dark like everything else the header/footer tokens already drive. */ body { background: var(--nw-header-bg); } /* -------------------------------------------------- */ /* ONE unified sticky header container (Phase 2C) */ /* Previously #mvp-main-nav-top and #mvp-main-nav-bot */ /* each became position:fixed independently (via classes */ /* the theme's existing scroll handler in functions.php */ /* already toggles: .mvp-fixed / .mvp-nav-small on the top */ /* row, .mvp-fixed1 / .mvp-fixed2 on the bottom row) -- two */ /* separate sticky elements that happened to end up visually */ /* aligned, not one sticky component. That JS is untouched; */ /* what changes is WHICH element the fixed positioning and */ /* width containment actually belong to: their shared parent, */ /* #mvp-main-nav-wrap, keyed off the .mvp-fixed class the JS */ /* already adds to the top row. The two rows become simple in- */ /* flow children stacked inside that one positioning context. */ /* Width/centering also now lives on the parent alone (previously */ /* duplicated on both rows), so there's one container, one */ /* background, one box-shadow, one sticky context -- not two */ /* rows that move in sync. */ #mvp-main-nav-wrap { max-width: 1200px; width: 96%; margin-left: auto; margin-right: auto; /* See the Phase 2B note this replaced: float:left (from the theme's base class="left relative") defeats margin:auto centering entirely; this is what makes it actually center. */ float: none; display: block; } #mvp-main-nav-top, #mvp-main-nav-bot { max-width: none; width: 100%; margin-left: 0; margin-right: 0; float: none; display: block; } #mvp-main-nav-wrap:has(#mvp-main-nav-top.mvp-fixed) { position: fixed; top: 0; left: 0; right: 0; z-index: 99999; background: var(--nw-header-bg); box-shadow: 0 1px 16px 0 rgba(0,0,0,.15); } /* Once the parent is the one doing the fixing, the rows stop positioning themselves -- they're just stacked flow content inside it now, not two independently-fixed elements that happen to line up. (.mvp-fixed2's own scroll-direction reveal transform is also cancelled: that differential animation only made sense when the two rows moved independently; the unified block shows/hides as one.) */ #mvp-main-nav-wrap:has(#mvp-main-nav-top.mvp-fixed) #mvp-main-nav-top, #mvp-main-nav-wrap:has(#mvp-main-nav-top.mvp-fixed) #mvp-main-nav-bot { position: relative !important; top: 0 !important; transform: none !important; box-shadow: none !important; margin-top: 0 !important; } /* -------------------------------------------------- */ /* One unified header on single-post pages too (Phase */ /* 2B). The theme had a separate, desktop-only single- */ /* post sticky treatment: past a scroll threshold it */ /* swapped the centered logo for a left-aligned logo + */ /* running article title (.mvp-drop-nav-title), and at a */ /* second threshold hid the social icons and the entire */ /* toggle+search rail outright. None of that is wanted -- */ /* the sticky header must look and behave identically on */ /* every page type. The article title stays in the article */ /* content only. */ .mvp-drop-nav-title { display: none !important; } .single .mvp-fixed .mvp-nav-top-right, .single .mvp-nav-small .mvp-nav-top-left { display: flex !important; } .single .mvp-nav-small .mvp-nav-top-mid a { left: auto !important; } /* .mvp-fixed-post (added to .mvp-nav-top-mid on every page once the header is scroll-fixed, not just single-post pages) left-aligned the logo and floated its image left -- both were only ever needed to make room for the drop-in title above, which is now permanently hidden. The grid layout above already centers .mvp-nav-top-mid; this just stops the old rule from fighting it. */ .mvp-fixed-post { text-align: center; } .mvp-fixed-post img { float: none !important; } /* -------------------------------------------------- */ /* 1024px (and other desktop-width) nav-menu wrapping */ /* (Phase 2B). #mvp-nav-bot-left held a hamburger that's */ /* unconditionally hidden site-wide (see the fly-but-wrap */ /* rule above -- this row never renders below 1004px in the */ /* first place, so that hamburger was always redundant here). */ /* #mvp-nav-bot-right held the second search icon removed in */ /* Phase 2A and has been empty since. Both still reserved 50px */ /* of width apiece via the theme's negative-margin technique, */ /* on top of which this phase's max-width box removed further */ /* space -- together enough to push the 9-item menu onto a second */ /* line at 1024px. Both slots are genuinely unused now, so their */ /* reserved space is reclaimed for the menu instead. */ .mvp-nav-bot-left, .mvp-nav-bot-right { display: none; } .mvp-nav-bot-left-out, .mvp-nav-bot-left-in { margin-left: 0 !important; } .mvp-nav-bot-right-out, .mvp-nav-bot-right-in { margin-right: 0 !important; } /* Even with that dead space reclaimed, the 9-item menu's own padding (12px each side per item, from style.css) needs ~1078px unwrapped and only has ~944-1016px between roughly 1004px and 1199px-wide viewports (above 1199px the box reaches its full 1200px and there's enough room). This is a pre-existing gap, not something introduced by the max-width box -- reclaiming the dead icon-slot space alone isn't enough to close it. Tightening the horizontal padding per item in just this range keeps every item on one line without hiding or removing any of them. */ @media screen and (min-width: 1004px) and (max-width: 1199px) { .mvp-nav-menu ul li a { padding-left: 3px; padding-right: 3px; } } #mvp-main-nav-small .mvp-fly-but-wrap span, #mvp-main-nav-small .mvp-search-but-wrap span, .mvp-nav-top-left .mvp-fly-but-wrap span, #mvp-fly-wrap .mvp-fly-but-wrap span, #mvp-nav-bot-wrap .mvp-fly-but-wrap span, #mvp-nav-bot-wrap .mvp-search-but-wrap span { background: var(--nw-header-text); } .mvp-nav-top-right .mvp-nav-search-but, span.mvp-fly-soc-head, .mvp-soc-mob-right i, #mvp-main-nav-small span.mvp-nav-search-but, #mvp-main-nav-small .mvp-nav-menu ul li a, #mvp-nav-bot-wrap span.mvp-nav-search-but, #mvp-nav-bot-wrap .mvp-nav-menu ul li a, nav.mvp-fly-nav-menu ul li a, .mvp-drop-nav-title h4 { color: var(--nw-header-text); } #mvp-main-nav-small .mvp-nav-menu ul li.menu-item-has-children a:after, #mvp-nav-bot-wrap .mvp-nav-menu ul li.menu-item-has-children a:after { border-color: var(--nw-header-text) transparent transparent transparent; } #mvp-nav-top-wrap span.mvp-nav-search-but:hover, #mvp-main-nav-small span.mvp-nav-search-but:hover, #mvp-nav-bot-wrap span.mvp-nav-search-but:hover { color: var(--nw-header-accent); } #mvp-nav-top-wrap .mvp-fly-but-wrap:hover span, #mvp-main-nav-small .mvp-fly-but-wrap:hover span, #mvp-nav-bot-wrap .mvp-fly-but-wrap:hover span { background: var(--nw-header-accent); } span.mvp-woo-cart-num:hover { background: var(--nw-header-accent); } .mvp-nav-menu ul li:hover a { background: transparent; border-bottom: 5px solid var(--nw-header-accent); } span.mvp-nav-soc-but, ul.mvp-fly-soc-list li a, span.mvp-woo-cart-num { background: var(--nw-header-icon-bg); color: var(--nw-header-text); } span.mvp-woo-cart-icon { color: var(--nw-header-text); } #mvp-foot-wrap { background: var(--nw-footer-bg); border-bottom: 1px solid var(--nw-footer-icon-bg); /* Subtle body/footer separation (Phase 2D): a thin, theme-aware line at the very top edge of the footer, distinct from the bolder accent/copyright-bar colors below it. */ border-top: 1px solid var(--nw-header-icon-bg); } /* Main footer area gets its own very light tint layered over --nw-footer-bg (which otherwise exactly matches the page background, so there's currently no separation at all) -- rgba, not a flat color, so it reads as a tint rather than a hardcoded block in either theme: a soft black wash on the white footer, a soft white wash on the black one. #mvp-foot-bot (the green copyright bar) is a separate element and is deliberately not touched here. */ #mvp-foot-top { background: var(--nw-footer-top-overlay); } /* Copyright bar: a fixed NigerianWaves green background (not the theme-swapping --nw-footer-accent token -- explicitly the same #006d14 in both light and dark mode), with white copy text/links for contrast against it. */ #mvp-foot-bot { background: #006d14; border-top: none; } ul.mvp-foot-soc-list li a { background: var(--nw-footer-icon-bg); color: var(--nw-footer-text) !important; } #mvp-foot-menu ul li a { color: var(--nw-footer-text-muted); } #mvp-foot-menu ul li a:hover { color: var(--nw-footer-accent) !important; } #mvp-foot-copy p { color: #FFFFFF; } #mvp-foot-copy a { color: #FFFFFF; text-decoration: underline; } /* Footer logo (item 9): noticeably smaller than the header's, still clearly legible and branded. The configured logo asset renders at its natural size by default (431x70 for the currently configured image); this caps its height and lets width follow proportionally. */ #mvp-foot-logo img { height: 40px; width: auto; max-width: 100%; } /* -------------------------------------------------- */ /* Sitewide dark mode: invert the main content region */ /* -------------------------------------------------- */ [data-theme="dark"] #mvp-main-body-wrap { background: #ffffff; filter: invert(1) hue-rotate(180deg); } [data-theme="dark"] #mvp-main-body-wrap img, [data-theme="dark"] #mvp-main-body-wrap video, [data-theme="dark"] #mvp-main-body-wrap iframe, [data-theme="dark"] #mvp-main-body-wrap svg, [data-theme="dark"] #mvp-main-body-wrap picture, [data-theme="dark"] #mvp-main-body-wrap embed, [data-theme="dark"] #mvp-main-body-wrap canvas, [data-theme="dark"] #mvp-main-body-wrap ins { filter: invert(1) hue-rotate(180deg); } /* The leaderboard ad slot sits just above #mvp-main-body-wrap (outside it) -- give it the same treatment so an ad iframe/creative isn't left on a stray white card between a dark header and dark content area. */ [data-theme="dark"] #mvp-leader-wrap { background: #ffffff; filter: invert(1) hue-rotate(180deg); } [data-theme="dark"] #mvp-leader-wrap img, [data-theme="dark"] #mvp-leader-wrap iframe, [data-theme="dark"] #mvp-leader-wrap ins { filter: invert(1) hue-rotate(180deg); } /* Text-legibility gradient scrims: several Feature widgets overlay their headline/category/meta text directly on top of the hero image, and that text is authored white (to read against the dark scrim) regardless of site theme. The gradient itself lives on a ::before pseudo-element of the text wrapper (moved there from the wrapper's own background-image). Applying the counter-invert filter to the WRAPPER (not just the ::before) is deliberate: CSS `filter` composites an element's entire subtree as one unit before the ancestor's filter ever sees it, so a single filter here correctly restores *both* the ::before gradient and the real white text children in one step (double-inversion cancels for both, same mechanism already used for photos). Filtering only the ::before would fix the scrim but leave the text at a single inversion from the ancestor -- i.e. still flipped to black and illegible. */ [data-theme="dark"] #mvp-main-body-wrap .mvp-feat1-feat-text, [data-theme="dark"] #mvp-main-body-wrap .mvp-feat1-sub-text, [data-theme="dark"] #mvp-main-body-wrap .mvp-feat3-main-text, [data-theme="dark"] #mvp-main-body-wrap .mvp-feat3-sub-text, [data-theme="dark"] #mvp-main-body-wrap .mvp-feat2-top-text-wrap, [data-theme="dark"] #mvp-main-body-wrap .mvp-feat5-text, [data-theme="dark"] #mvp-main-body-wrap .mvp-widget-feat1-top-text, [data-theme="dark"] #mvp-main-body-wrap .mvp-widget-dark-feat-text, [data-theme="dark"] #mvp-main-body-wrap .mvp-widget-feat2-left-text, [data-theme="dark"] #mvp-main-body-wrap .mvp-cont-read-but-wrap { filter: invert(1) hue-rotate(180deg); } [data-theme="dark"] #mvp-main-body-wrap #mvp-feat6-img:after, [data-theme="dark"] #mvp-main-body-wrap .mvp-post-add-link:before { filter: invert(1) hue-rotate(180deg); } /* #mvp-feat6-wrap (the category/featured-post hero: solid black backdrop + photo + gradient scrim + overlaid white headline) is missing from the exclusions above -- its own black background and its #mvp-feat6-text h2/p white text get the ancestor's single inversion with nothing to cancel it, flipping black->white and white->black, i.e. exactly the "white area under the featured image" bug. Pre-compensating the authored values (rather than adding another filter-cancel, which would double up with the img/:after cancels already on this same subtree and un-invert those) makes the *result* of that one inversion land on the correct final black-bg/white-text colors. */ [data-theme="dark"] #mvp-main-body-wrap #mvp-feat6-wrap { background: #ffffff; } [data-theme="dark"] #mvp-main-body-wrap #mvp-feat6-text h2, [data-theme="dark"] #mvp-main-body-wrap #mvp-feat6-text p { color: #000000; } /* -------------------------------------------------- */ /* Compact header-adjacent search panel (Phase 2C) */ /* Previously #mvp-search-wrap was a fixed, 100vw x */ /* 100vh, near-opaque black backdrop with the search */ /* form centered in the middle of the whole viewport -- */ /* a full-page overlay. It's now a small panel anchored */ /* directly under the unified header, sharing its own */ /* max-width/centering so the two read as one connected */ /* component, with the rest of the page still fully visible */ /* around and below it. The show/hide mechanism (JS toggles */ /* the .mvp-search-toggle class on click; the same trigger */ /* class opens and closes it) is untouched -- only the panel's */ /* own size/position/appearance changed. */ #mvp-search-wrap { background: var(--nw-header-bg); opacity: 0; visibility: hidden; pointer-events: none; position: fixed; /* Resting-header height at desktop (1440/1024px): both rows at their normal, uncompacted size. */ top: 135px; left: 0; right: 0; max-width: 1200px; width: 96%; margin-left: auto; margin-right: auto; height: auto; transform: translate3d(0,-10px,0); transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 999998; border-radius: 0 0 14px 14px; box-shadow: 0 16px 32px rgba(0,0,0,.18); border-top: 1px solid var(--nw-header-icon-bg); } /* Once the header is scroll-fixed it's shorter (the top row compacts via the theme's own existing .mvp-nav-small rule) -- follow it so the panel still sits flush against the header's actual bottom edge instead of leaving a gap or overlapping it. */ body:has(#mvp-main-nav-top.mvp-fixed) #mvp-search-wrap { top: 100px; } @media screen and (max-width: 1003px) { /* #mvp-main-nav-bot doesn't render below 1004px (mobile/tablet use the fly-menu instead), so the header is just the single utility row here, same height resting or fixed. */ #mvp-search-wrap, body:has(#mvp-main-nav-top.mvp-fixed) #mvp-search-wrap { top: 50px; } } #mvp-search-wrap.mvp-search-toggle { opacity: 1; visibility: visible; pointer-events: auto; transform: translate3d(0,0,0); } /* The close ("x") trigger inside the panel reused the full-screen overlay's own dark-backdrop styling (a large white x in a fixed corner position sized for a 100vh backdrop); given it up for a small icon-button matching the header's own icon treatment. */ #mvp-search-wrap .mvp-search-but-wrap { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; } #mvp-search-wrap .mvp-search-but-wrap span { background: var(--nw-header-text); top: 15px; } #mvp-search-box { position: static; margin: 0; width: 100%; box-sizing: border-box; padding: 22px 56px 22px 24px; } #mvp-search-wrap #searchform { display: flex; align-items: center; gap: 12px; } #mvp-search-wrap #searchform input#s { background: none; border: 0; border-bottom: 2px solid var(--nw-header-icon-bg); color: var(--nw-header-text); float: none; font-size: 18px; font-weight: 400; text-transform: none; padding: 8px 2px; height: auto; width: 100%; } #mvp-search-wrap #searchform input#s:focus { border-bottom-color: var(--nw-header-accent); } #mvp-search-wrap #searchform #searchsubmit { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--nw-header-icon-bg); color: var(--nw-header-text); font-size: 15px; cursor: pointer; float: none; transition: background .2s ease; } #mvp-search-wrap #searchform #searchsubmit:hover { background: var(--nw-header-accent); color: #fff; } /* -------------------------------------------------- */ /* NigerianWaves homepage widget-header design (2C, */ /* second revision) */ /* Scoped to .mvp-widget-home (the "homepage-widget" */ /* sidebar's own before_widget wrapper) specifically so */ /* the same before_title/after_title markup used by the */ /* post/page and default sidebars elsewhere on the site is */ /* untouched -- this is a homepage-only visual language, not */ /* a global widget-title restyle. */ /* */ /* The divider is a genuine (subtle, low-amplitude) sine-wave */ /* line -- an inline SVG tile repeated horizontally -- in */ /* NigerianWaves green, not a straight grey rule, spanning the */ /* h4's full width. The title sits on top as a solid green badge */ /* with white text (its own opacity hides the wave segment directly */ /* behind it, so it still visually "breaks" the line) and an */ /* asymmetric corner radius instead of a plain rectangle -- a small, */ /* restrained nod to "unusual shape" without literal wave clip-paths */ /* that risk looking cartoonish at small sizes. Two color variants of */ /* the SVG (light/dark accent green) are swapped via [data-theme="dark"]. */ /* Consistency pass: these classes are the theme's one shared "section header" component -- registered as the before_title/after_title markup for every widget area (functions.php: homepage, homepage sidebar, default sidebar, post/page sidebar) and reused directly in templates for Related Posts (#mvp-related-posts), Trending (#mvp-post-more-wrap), "More News"/"More Videos"/"Stories By" etc. Originally scoped to `.mvp-widget-home` (the homepage widget wrapper only); dropping that ancestor requirement here is what actually unifies the look everywhere else these exact classes already render, with no template changes needed. */ .mvp-widget-home-head { margin-bottom: 20px; } h4.mvp-widget-home-title { text-align: center; margin: 0; width: 100%; display: block; position: relative; } h4.mvp-widget-home-title:before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 2px; transform: translateY(-50%); /* The theme's own stock rule (style.css) sets background:#555 on this same pseudo-element -- a background-color, which a background-image alone doesn't clear. Explicit transparent removes that leftover grey fill. A tiny thin rod (2px) with a fine diagonal green stripe repeating every 4px reads as a woven/wrapped thread rather than a wave or a plain line -- pure CSS, no image asset. */ background-color: transparent; background-image: repeating-linear-gradient( 55deg, #008751 0, #008751 1px, rgba(0,135,81,.22) 1px, rgba(0,135,81,.22) 4px ); z-index: 0; } [data-theme="dark"] h4.mvp-widget-home-title:before { background-image: repeating-linear-gradient( 55deg, #21C55D 0, #21C55D 1px, rgba(33,197,93,.3) 1px, rgba(33,197,93,.3) 4px ); } span.mvp-widget-home-title { background: var(--nw-header-accent); color: #fff; display: inline-block; font-family: 'Libre Franklin', sans-serif; font-size: .72rem; font-weight: 800; letter-spacing: .09em; line-height: 1; padding: 6px 16px; margin: 0; border-radius: 2px 10px 2px 10px; text-transform: uppercase; transform: none; position: relative; z-index: 1; } /* Guarantee green bg + white text in both themes. #mvp-main-body-wrap's sitewide dark-mode filter (invert+hue-rotate) repaints every descendant pixel, including this badge's own already-theme-correct var(--nw-header-accent) background and its authored white text -- for a saturated color the round trip coincidentally lands close to the original hue, which is why the badge background reads as "still green enough" today, but for pure white (no hue for hue-rotate to act on) invert(1) alone lands on solid black, which is the title-goes-black bug. Applying the same filter directly to the badge composites its own subtree first and cancels the ancestor's filter exactly (2x the same filter = identity), so both colors render as truly authored in dark mode instead of approximately so -- same double-invert-cancel technique used for photos and the comment-submit button elsewhere in this file. */ [data-theme="dark"] #mvp-main-body-wrap span.mvp-widget-home-title { filter: invert(1) hue-rotate(180deg); } @media screen and (max-width: 479px) { span.mvp-widget-home-title { font-size: .66rem; letter-spacing: .07em; padding: 5px 12px; border-radius: 2px 8px 2px 8px; } } /* The sidebar column (~320px) is much narrower than the homepage's full-width widget rows or the full-width Related/Trending sections below the article body; the badge already fits either context, but tighten the vertical rhythm and shrink the badge slightly so it doesn't read oversized specifically in that narrow column. */ .mvp-side-widget .mvp-widget-home-head { margin-bottom: 16px; } .mvp-side-widget span.mvp-widget-home-title { font-size: .66rem; letter-spacing: .07em; padding: 5px 12px; border-radius: 2px 8px 2px 8px; } /* Category-name badge (category archive hero, and the same "Latest"/ category-label eyebrow in featured.php/featured-latest.php widgets) -- the theme's other green/$secondcolor badge besides the widget title (functions.php shares the same background color across span.mvp-widget-home-title, span.mvp-post-cat and span.mvp-feat1-pop-head). Bringing it into the same badge shape/type language as the widget title unifies it visually. It keeps its own left/center alignment behavior per context (the #mvp-feat6-text override below still left-aligns it and drops the rule when it's sitting over a hero photo, where a full-width divider wouldn't make sense) -- this is deliberately NOT the same class as span.mvp-post-cat (the single-post category flag above the H1), which gets its own, separately-scoped treatment below (same badge language, but left-aligned with a trailing rod rather than centered, to match sitting directly above a left-aligned H1). */ h3.mvp-feat1-pop-head, h1.mvp-feat1-pop-head { margin-bottom: 15px; } h3.mvp-feat1-pop-head:before, h1.mvp-feat1-pop-head:before { background-color: transparent; background-image: repeating-linear-gradient( 55deg, #008751 0, #008751 1px, rgba(0,135,81,.22) 1px, rgba(0,135,81,.22) 4px ); } [data-theme="dark"] h3.mvp-feat1-pop-head:before, [data-theme="dark"] h1.mvp-feat1-pop-head:before { background-image: repeating-linear-gradient( 55deg, #21C55D 0, #21C55D 1px, rgba(33,197,93,.3) 1px, rgba(33,197,93,.3) 4px ); } span.mvp-feat1-pop-head { border-radius: 2px 10px 2px 10px; font-family: 'Libre Franklin', sans-serif; font-size: .72rem; font-weight: 800; letter-spacing: .09em; padding: 6px 16px; transform: none; } [data-theme="dark"] #mvp-main-body-wrap span.mvp-feat1-pop-head { filter: invert(1) hue-rotate(180deg); } /* Single-post category label above the H1 (parts/post-single.php). Kept left-aligned rather than centered -- it sits directly above a left-aligned article title, and centering it would visually clash with that title's own alignment. The woven rod still applies here, just trailing from the badge's right edge instead of extending from both sides of a centered badge, since h3.mvp-post-cat is already width:100% in style.css. Deliberately smaller than the homepage widget badge (.68rem vs .72rem) -- this sits directly against a large H1, not as a standalone section header. */ h3.mvp-post-cat { margin: 0 0 14px; position: relative; } h3.mvp-post-cat:before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 2px; transform: translateY(-50%); background-color: transparent; background-image: repeating-linear-gradient( 55deg, #008751 0, #008751 1px, rgba(0,135,81,.22) 1px, rgba(0,135,81,.22) 4px ); z-index: 0; } [data-theme="dark"] h3.mvp-post-cat:before { background-image: repeating-linear-gradient( 55deg, #21C55D 0, #21C55D 1px, rgba(33,197,93,.3) 1px, rgba(33,197,93,.3) 4px ); } span.mvp-post-cat { background: var(--nw-header-accent); border-radius: 2px 10px 2px 10px; font-family: 'Libre Franklin', sans-serif; font-size: .68rem; font-weight: 800; letter-spacing: .08em; padding: 5px 14px; position: relative; transform: none; z-index: 1; } [data-theme="dark"] #mvp-main-body-wrap span.mvp-post-cat { filter: invert(1) hue-rotate(180deg); } /* Sidebar "Latest/Recent" tabber (widgets/widget-tabber.php, also used by the homepage's featured.php/featured-latest.php widgets). Only the ACTIVE tab gets the green badge -- giving every tab a badge would erase the active/inactive distinction the JS (scripts.js, li.active toggling) depends on, and the instruction is explicit about not turning each tab into its own widget header. Inactive tabs stay plain text (just uncovering the theme's own stock skew instead of leaving it), so the green badge alone communicates "this is the active tab" the same way it already did before this change, just in the new shape language. A thin woven rod under the whole tab row ties it into the same visual family without competing with the tabs themselves. */ .mvp-feat1-list-head-wrap { position: relative; } .mvp-feat1-list-head-wrap:before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background-color: transparent; background-image: repeating-linear-gradient( 55deg, #008751 0, #008751 1px, rgba(0,135,81,.22) 1px, rgba(0,135,81,.22) 4px ); z-index: 0; } [data-theme="dark"] .mvp-feat1-list-head-wrap:before { background-image: repeating-linear-gradient( 55deg, #21C55D 0, #21C55D 1px, rgba(33,197,93,.3) 1px, rgba(33,197,93,.3) 4px ); } ul.mvp-feat1-list-buts { position: relative; z-index: 1; } span.mvp-feat1-list-but { transform: none; } ul.mvp-feat1-list-buts li.active span.mvp-feat1-list-but { background: var(--nw-header-accent); border-radius: 2px 8px 2px 8px; font-family: 'Libre Franklin', sans-serif; font-size: .66rem; font-weight: 800; letter-spacing: .07em; padding: 5px 12px; } [data-theme="dark"] #mvp-main-body-wrap ul.mvp-feat1-list-buts li.active span.mvp-feat1-list-but { filter: invert(1) hue-rotate(180deg); } /* "More [Title]" link (widgets/widget-home-feat2.php, homepage sidebar feature widgets). The link/destination is untouched -- this only restyles the existing span.mvp-widget-feat2-side-more + its sibling fa-long-arrow-right icon, both already inside the theme's own #mvp-widget-... markup and the same as before. Was plain uppercase text in the customizer's accent color (functions.php sets `.mvp-widget-feat2-side-more-but { color: $secondcolor !important }` on the wrapper, inherited by both children); giving the span and icon their own explicit color here overrides that inherited value without needing !important, since a directly-set color always wins over an inherited one regardless of the ancestor's own specificity. The two elements are styled as one seamless pill (matching corner radii, zero gap, same background) rather than literally merged, since the template keeps them as separate siblings. White text on a *pale* green wash would be low-contrast, so this uses the solid brand green as the high-contrast text/icon color against a soft, translucent tint of that same green for the background -- "light and subtle", per the brief, without sacrificing legibility. */ .mvp-widget-feat2-side-more-but { align-items: center; display: flex; float: none; justify-content: center; width: 100%; } span.mvp-widget-feat2-side-more { background: rgba(0, 135, 81, .12); border-radius: 999px 0 0 999px; color: #008751; display: inline-flex; align-items: center; font-family: 'Libre Franklin', sans-serif; font-size: .72rem; font-weight: 800; letter-spacing: .06em; line-height: 1; padding: 9px 4px 9px 16px; text-transform: uppercase; transition: background-color .18s ease, color .18s ease; } .mvp-widget-feat2-side-more-but i { align-items: center; background: rgba(0, 135, 81, .12); border-radius: 0 999px 999px 0; color: #008751; display: inline-flex; font-size: .72rem; line-height: 1; margin-left: 0; padding: 9px 16px 9px 4px; top: 0; transition: background-color .18s ease, color .18s ease; } /* The theme's Font Awesome asset is a hand-picked subset (Phase 3I, 29 glyphs) and fa-long-arrow-right isn't in it, so the icon tag was silently rendering nothing -- not something introduced by this change, just never visible/caught before this button had a background to reveal the gap against. Rather than growing the font subset for one glyph, render a plain arrow character instead (matching the requested "More →" directly), overriding the icon font's own family so the fallback isn't left to chance. */ .mvp-widget-feat2-side-more-but i:before { content: '\2192'; font-family: 'Libre Franklin', sans-serif; font-weight: 800; } .mvp-widget-feat2-side-more-but:hover span.mvp-widget-feat2-side-more, .mvp-widget-feat2-side-more-but:hover i { background: rgba(0, 135, 81, .2); } [data-theme="dark"] span.mvp-widget-feat2-side-more, [data-theme="dark"] .mvp-widget-feat2-side-more-but i { background: rgba(33, 197, 93, .16); color: #21C55D; } [data-theme="dark"] .mvp-widget-feat2-side-more-but:hover span.mvp-widget-feat2-side-more, [data-theme="dark"] .mvp-widget-feat2-side-more-but:hover i { background: rgba(33, 197, 93, .26); } /* Same double-invert-cancel technique used for the other green badges in this file: composites the pill's own subtree (both halves) as one unit and cancels the sitewide dark-mode filter on #mvp-main-body-wrap, so the dark-mode colors set directly above render exactly as authored instead of an approximation of them. */ [data-theme="dark"] #mvp-main-body-wrap .mvp-widget-feat2-side-more-but { filter: invert(1) hue-rotate(180deg); } @media screen and (max-width: 479px) { span.mvp-widget-feat2-side-more { font-size: .66rem; letter-spacing: .05em; padding: 8px 3px 8px 13px; } .mvp-widget-feat2-side-more-but i { font-size: .66rem; padding: 8px 13px 8px 3px; } } /* -------------------------------------------------- */ /* Post/page sidebar layout fix (Phase 2D) */ /* The theme's own negative-margin float technique */ /* (margin-right:-380px outer / +380px inner, both columns */ /* floated) turned out to still wrap #mvp-side-wrap onto its own */ /* line even with the two real HTML bugs elsewhere on the page */ /* fixed (a missing quote in parts/post-single.php and an unclosed */ /* div in the bundled mvp-social-buttons plugin -- both genuine */ /* bugs, fixed independently of this). Root cause: a float's width */ /* is shrink-to-fit, bounded below by the largest min-content width */ /* of ANY descendant. A wide, non-shrinkable descendant inside the */ /* post body (an oEmbed iframe, a fixed-width image, a table, etc.) */ /* forces that minimum above the space actually available once the */ /* sidebar's column is reserved, so the browser pushes the whole float */ /* -- and with it the sidebar right after it in the DOM -- onto a new row. */ /* Flexbox does not have this failure mode: flex-basis/flex-grow size the */ /* row directly instead of deriving it from content, and min-width:0 lets */ /* the content column shrink below its children's intrinsic width (any */ /* overflow-causing child then simply overflows/scrolls within its own */ /* box instead of forcing the whole column wider). This is the same grid/flex */ /* approach already used for the header in Phase 2B/2C, not an "arbitrary */ /* positioning" hack -- it fixes the underlying layout mechanism itself. */ /* Used by both parts/post-single.php (single posts) and page.php (standard */ /* pages). .mvp-main-blog-out/.mvp-main-blog-in are the exact same technique */ /* under different class names, used by category.php, archive.php, author.php, */ /* search.php, index.php and page-latest.php -- same negative-margin float base */ /* in style.css, same missing-float bug, same fix. (page-home.php uses these classes */ /* too for its own get_sidebar('home') call, so this also reaches that page template; */ /* the actual homepage's widget-driven layout doesn't use this wrapper at all and stays */ /* untouched.) */ .mvp-post-main-out, .mvp-main-blog-out { display: flex; flex-direction: column; margin-right: 0; } .mvp-post-main-in, .mvp-main-blog-in { float: none; margin-right: 0; min-width: 0; } #mvp-side-wrap { float: none; } /* Side-by-side from 768px up (matches the explicit 1440/1024/768 validation breakpoints); below that the sidebar naturally stacks below the content, in its existing DOM order. */ @media screen and (min-width: 768px) { .mvp-post-main-out, .mvp-main-blog-out { flex-direction: row; align-items: flex-start; } .mvp-post-main-in, .mvp-main-blog-in { flex: 1 1 auto; } #mvp-side-wrap { flex: 0 0 320px; /* The theme's own 899-768px tier gives #mvp-side-wrap a 20px margin-top (media-queries.css); harmless under the old float layout but reads as a stray top-misalignment now that the two columns are flex siblings, so it's neutralized here for a clean shared top edge. */ margin-top: 0; } } /* -------------------------------------------------- */ /* Comments section overhaul (Phase 2D) */ /* This markup lives inside #mvp-main-body-wrap, so it */ /* already gets dark mode "for free" from that container's */ /* own sitewide invert filter -- ordinary text/border colors */ /* just need to be legible neutrals in light mode and they'll */ /* correctly become light-on-dark once inverted. The one place */ /* that needs the same double-invert-cancels exclusion already */ /* used for images/gradients elsewhere is the submit button: it's */ /* meant to be actual NigerianWaves green in both themes, not */ /* whatever hue the sitewide filter would otherwise rotate it to. */ .mvp-comments-head { margin-bottom: 24px; } .mvp-comments-heading { font-family: 'Libre Franklin', sans-serif; font-size: 1.3rem; font-weight: 800; letter-spacing: .01em; margin: 0 0 8px; text-transform: none; } .mvp-comments-policy { color: #6B7280; font-size: .92rem; line-height: 1.5; margin: 0 0 4px; } .mvp-comments-policy a { color: #0F7A4F; text-decoration: underline; } #respond { margin-top: 8px; } #respond label { color: inherit; display: block; font-family: 'Libre Franklin', sans-serif; font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 8px; width: auto; } .mvp-required { color: #0F7A4F; } #commentform.mvp-comment-form { display: flex; flex-direction: column; max-width: 620px; } /* Visual order only (Comment first, then Name/Email) -- the theme's own comment_form() output keeps its normal DOM/submission order (author/email fields before the comment textarea); reordering here is presentation, not a change to what WordPress actually processes. */ .mvp-comment-form .comment-form-comment { order: 1; } .mvp-comment-form .comment-form-author, .mvp-comment-form .comment-form-email { order: 2; } /* comment_form() also outputs a notes paragraph, a cookies-consent checkbox, and the submit button -- all with no order set here previously, so they defaulted to order:0 and floated above the reordered fields. Push them after Name/Email, submit last. */ .mvp-comment-form .comment-notes { order: 3; } .mvp-comment-form .comment-form-cookies-consent { order: 4; } .mvp-comment-form .form-submit { order: 5; margin-top: 4px; } .mvp-comment-form .comment-notes { color: #6B7280; font-size: .8rem; margin: 0 0 16px; } .mvp-comment-form .comment-form-cookies-consent { align-items: center; color: #6B7280; display: flex; font-size: .8rem; gap: 8px; margin: 0 0 16px; } .mvp-comment-form .mvp-comment-field { margin: 0 0 20px; } #respond input[type="text"], #respond input[type="email"], #respond textarea { background: none; border: none; border-bottom: 1px solid #D1D5DB; box-shadow: none; color: inherit; display: block; font-size: 1rem; padding: 8px 2px; width: 100%; max-width: 100%; margin: 0; transition: border-color .2s ease; } #respond textarea { border: 1px solid #D1D5DB; border-radius: 4px; padding: 12px; resize: vertical; } #respond input[type="text"]:focus, #respond input[type="email"]:focus, #respond textarea:focus { border-color: #0F7A4F; outline: none; } #respond #submit, .mvp-comment-form input#submit { background: #008751; border: 0; border-radius: 4px; box-shadow: none; color: #fff; cursor: pointer; font-family: 'Libre Franklin', sans-serif; font-size: .85rem; font-weight: 700; letter-spacing: .04em; line-height: 1; margin-top: 4px; padding: 12px 28px; text-transform: uppercase; align-self: flex-start; } #respond #submit:hover, .mvp-comment-form input#submit:hover { background: #0F7A4F; } [data-theme="dark"] #mvp-main-body-wrap #respond #submit, [data-theme="dark"] #mvp-main-body-wrap .mvp-comment-form input#submit { filter: invert(1) hue-rotate(180deg); } /* Smooth light/dark toggle (visual-consistency pass). Only paint properties (background/text/border/fill/filter) are listed -- never layout ones (width/height/position/transform/top/left) -- so this can't touch the sticky-header mechanics (:has()-driven position:fixed + transform in the "Compact header-adjacent search panel" rules above) or cause any element to visibly move. It's also why the wildcard descendant selectors below are safe: a transition on a property that never changes for a given element is simply inert. The header/footer/fly-menu use real per-theme token values (--nw-* custom properties) that flip discretely at the moment [data-theme] changes, so covering every descendant (not just the wrapper) is what makes nav text, icons, borders etc. fade together with their containers instead of snapping. Content-area colors mostly come from #mvp-main-body-wrap's own filter transition already animating the whole subtree as one composited unit, but several elements in this file deliberately counter that filter directly (the widget/category badges, the comment-submit button, feature-text scrims) -- their own filter flips discretely too without an explicit transition, so covering `#mvp-main-body-wrap *` closes that gap as well. No transition runs on first paint: the blocking inline script in header.php sets [data-theme] before the page ever paints, so there is no "previous" state for these rules to animate from -- they only activate on an actual, later toggle-click style change. */ @media (prefers-reduced-motion: no-preference) { #mvp-main-body-wrap, #mvp-main-body-wrap *, #mvp-main-nav-wrap, #mvp-main-nav-wrap *, #mvp-fly-wrap, #mvp-fly-wrap *, #mvp-foot-wrap, #mvp-foot-wrap * { transition: background-color .18s ease, color .18s ease, border-color .18s ease, fill .18s ease, filter .18s ease; } }