/* ========================================================================== Crown Office Supplies — top bar restyle (SITE-WIDE since 2026-07-24) Originally scoped to the modern-homepage template while it was under review, which left every other page showing Electro's unstyled bar — plain white, underlined links, no NET 30 pill. Promoted on the user's report that "this was not fixed globally". Promotion was: strip the homepage body-class scoping prefix from all 47 selectors, and enqueue from cos_topbar_enqueue_assets() in functions.php with no conditional. Revert from /root/backups/2026-07-24_topbar-global/. SAFE TO PROMOTE because every selector here sits under `.top-bar`, which contains nothing but Electro's two nav menus — verified by assertion, not by eye. Contrast the FOOTER promotion, which broke on day one: that stylesheet carried `:where()` element resets that collided with WooCommerce product widgets living in the footer on other pages. A stylesheet is only safe to take site-wide if it cannot reach outside its own component. The `cos-topbar` handle deliberately has NO dependency on `cos-home`. It used to depend on it, which was fine when both loaded together — but a dependency on a handle that is not enqueued makes WordPress skip the stylesheet entirely, so on every non-homepage page the bar would have stayed unstyled and nothing would have errored. This file declares its own `--tb-*` tokens for the same reason. The bar is Electro's own markup (electro_top_bar() → two wp_nav_menu calls into the `topbar-left` / `topbar-right` theme locations). Nothing here depends on a specific menu-item ID, so re-ordering the menus in wp-admin cannot break it — the NET 30 pill keys off the `.net30` class that is already on menu item 3233, with a URL-based fallback. NOTE: Electro CAN hide the top bar on handheld (it adds `hidden-lg-down` when has_electro_mobile_header() is true) — but on this site it does NOT: the bar renders at every width. Verified by screenshot at 420px, after assuming otherwise and shipping a row that overflowed and clipped "My account" off-screen. The small-screen rules at the bottom of this file are load-bearing, not defensive. ========================================================================== */ .top-bar { --tb-navy: #2e094e; --tb-navy-deep: #24073d; --tb-yellow: #fed700; --tb-text: #cdbede; background: linear-gradient(180deg, var(--tb-navy) 0%, var(--tb-navy-deep) 100%); border-bottom: 0; padding: 0; font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* The container is Electro's, so the bar stays pixel-aligned with the header and the page content below it. */ .top-bar > .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 46px; } /* Bootstrap 4's .container carries a clearfix ::after (and ::before). Turning * the container into a flex parent promotes those pseudo-elements into real * FLEX ITEMS — so this row had three items, not two, and `space-between` gave * the end slot to the zero-width ::after while the right-hand menu got centred * in the leftover space. That is why "My account" stopped ~208px short of the * header's right edge while the left side looked perfect. * * Removing them is safe here: clearfix exists to contain the .pull-left/ * .pull-right floats, and this rule set already sets `float: none` on both. */ .top-bar > .container::before, .top-bar > .container::after { content: none; } /* Bootstrap floats would fight the flex layout. */ .top-bar .pull-left, .top-bar .pull-right { float: none; } .top-bar .nav-inline { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; } /* -------------------------------------------------------------------------- Base link styling -------------------------------------------------------------------------- */ .top-bar .nav-inline .menu-item > a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 8px; color: var(--tb-text); font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: .01em; text-decoration: none; transition: color .2s ease, background-color .2s ease; } /* The ONLY !important in this file, and it is answering one. * * Header-Footer-Code-Manager snippet #6 — named "ga aw - old", created 2020, * whose Google tag is commented out but which still ships two live CSS rules * site-wide — forces: * .top-bar .nav-inline .menu-item > a { text-decoration: underline !important } * No amount of specificity beats !important, so this has to answer in kind. * * SINCE 2026-07-24 this override is site-wide, so the 2020 snippet's underline * is now answered on every page rather than just the homepage. The snippet * itself is still live and still MUST NOT be deleted — it also sets * `#payframe { height: 550px !important }`, which looks load-bearing for the * payment iframe. Override it, never remove it. */ .top-bar #menu-top-bar-left .menu-item > a, .top-bar #menu-top-bar-right .menu-item > a, .top-bar #menu-top-bar-left .menu-item > a:hover, .top-bar #menu-top-bar-right .menu-item > a:hover, .top-bar #menu-top-bar-left .menu-item > a:focus, .top-bar #menu-top-bar-right .menu-item > a:focus { text-decoration: none !important; } .top-bar .nav-inline .menu-item > a:hover, .top-bar .nav-inline .menu-item > a:focus { color: #fff; background: rgba(255, 255, 255, .08); } /* Hover colour also has to clear ID specificity. */ .top-bar #menu-top-bar-right .menu-item > a:hover, .top-bar #menu-top-bar-right .menu-item > a:focus, .top-bar #menu-top-bar-left .menu-item:not(.net30) > a:hover, .top-bar #menu-top-bar-left .menu-item:not(.net30) > a:focus { color: #fff; } .top-bar .nav-inline .menu-item > a:focus-visible { outline: 2px solid var(--tb-yellow); outline-offset: 2px; } /* Electro's icon font sits slightly high against 13px text. */ .top-bar .nav-inline .menu-item > a > i { font-size: 15px; line-height: 1; color: var(--tb-yellow); transition: color .2s ease; } /* -------------------------------------------------------------------------- The NET 30 call to action — the single highest-value link on the page. Rendered as a solid yellow pill so it reads as a button, not a nav item. -------------------------------------------------------------------------- */ .top-bar .nav-inline .menu-item.net30 > a, .top-bar #menu-top-bar-left .menu-item > a[href*="net30-application"] { position: relative; padding: 7px 15px; background: var(--tb-yellow); color: #2b0a45; font-weight: 700; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset; } .top-bar .nav-inline .menu-item.net30 > a:hover, .top-bar .nav-inline .menu-item.net30 > a:focus, .top-bar #menu-top-bar-left .menu-item > a[href*="net30-application"]:hover, .top-bar #menu-top-bar-left .menu-item > a[href*="net30-application"]:focus { background: #ffe23f; color: #2b0a45; } /* Arrow is decorative, so it is generated rather than added to the DOM. */ .top-bar .nav-inline .menu-item.net30 > a::after { content: "\2192"; font-size: 13px; line-height: 1; transform: translateX(0); transition: transform .25s cubic-bezier(.22, 1, .36, 1); } .top-bar .nav-inline .menu-item.net30 > a:hover::after, .top-bar .nav-inline .menu-item.net30 > a:focus::after { transform: translateX(3px); } /* -------------------------------------------------------------------------- Supporting line beside the CTA. Deliberately CSS-generated: it restates the H1 ("Office supplies now. Pay in 30 days.") a few hundred pixels below, so it is decorative reinforcement rather than unique content, and injecting a non-interactive
  • into a