/* nav.css - v0.7.1 - BDO Category Nav Desktop accordion category sidebar. Values are lifted from the approved design handoff (option 1a) - colours, sizes, weights, letter-spacing and paddings match it. ON ALL THE !important IN HERE v0.1.0 shipped these rules "clean" and the theme won almost every one of them: every leaf link came out THEME BLUE, and hovering a group header painted a full-width solid CRIMSON block. This sidebar is dropped into an Elementor template on a WooCommerce archive, so it sits underneath the theme's link styling, Elementor's widget styling and WooCommerce's own - three sources with high-specificity selectors that this cannot outrank by nesting alone. Colour, background and border are therefore forced. The same reasoning as the standing no-border-radius rule: state it so nothing upstream can quietly repaint it. Everything is scoped under .bdo-cn, so none of it can leak out of this sidebar. */ /* DESKTOP ONLY. Below the breakpoint this renders nothing at all, because phones already have [bdo_subcat_nav] on these pages. Two navigations at once would be worse than either. display:none rather than a media query around every rule: one place to change, and no chance of a stray rule leaking onto mobile. */ .bdo-cn { display: none; } @media (min-width: 900px) { .bdo-cn { display: block; } /* NO PANEL BOX. Brian's call after seeing it live: no border, no background card. The hairlines between groups carry the structure on their own, and the box was fighting the product grid beside it for attention. padding:0 and margin:0 are what TOP-ALIGN the first item with the category H1 - the panel's old 22px top padding pushed the whole tree down the page so it read as starting below the heading rather than beside it. */ /* ======================================================================== PINNING THE SIDEBAR WHILE THE PRODUCT GRID SCROLLS The sticky is applied to the ELEMENTOR COLUMN that holds this sidebar, found with :has(.bdo-cn) rather than by its element id, so an Elementor edit that renumbers the column cannot quietly unstick it. WHY THE COLUMN AND NOT THE PANEL: a sticky element travels inside its own containing block and no further. Every box between the panel and the column shrink-wraps to the panel's own height, so a sticky panel had nowhere to go. The column is a flex item of the row that also holds the product grid - roughly 6800px tall on a full category page - so pinning it there gives the whole grid's worth of travel. align-self:flex-start is REQUIRED, not cosmetic. A stretched flex item is as tall as the row, which again leaves zero room to travel. JetElements already sets this on the column; it is repeated here so the rule stands on its own if Jet's sticky is ever switched off. WHY THE WRAPPER IS FULLY NEUTRALISED: this column has Crocoblock's JetElements "Sticky Column" turned on, and its JavaScript pins by writing FOUR inline properties onto the widget wrap inside the column - measured live, they are: position: fixed; top: 50px; left: 207px; width: 261px; Measured live, that JS sticky was the actual bug Brian reported first: the sidebar drifted ~190px, snapped back 22px when Jet caught up, held, and then RELEASED near the end of the grid and scrolled off the screen. Native CSS sticky does the same job with no snap, no scroll listener and no release, so Jet's version is switched off here. ALL FOUR have to be answered, which cost a round trip to learn. Forcing only `position` and `top` left Jet's `left: 207px` in play, and on a relatively-positioned box that is a 207px shove to the RIGHT - the sidebar slid out of its own column and the product grid painted straight over it. Brian caught that in a screenshot within minutes. `left`, `right`, `bottom` and `width` are therefore all reset too: neutralise the whole set, not the properties that happen to be causing today's symptom. Jet's setting can also just be unchecked in Elementor; this rule means it does not have to be, and that a future template copy that brings the setting along still behaves. WHY position IS !important: Elementor forces `position: relative` on every column with its own !important, so the unforced version of this rule lost - and because the wrapper rule below had already switched Jet's JS pinning off, the sidebar ended up sticking to nothing at all. `top` and `align-self` had applied fine, which is what made it look like the rule was working when only two thirds of it was. */ .elementor-top-column:has(.bdo-cn) { position: sticky !important; /* The offset is a CUSTOM PROPERTY so nav.js can set it without fighting the !important this rule needs - a custom property is substituted before the cascade decides, so an inline --bdo-cn-top wins where an inline `top` would lose. 24px is the fallback if the script never runs: the sidebar still pins, just near the top of the window. */ top: var(--bdo-cn-top, 24px) !important; align-self: flex-start !important; } .elementor-top-column:has(.bdo-cn) > .elementor-widget-wrap { position: relative !important; top: 0 !important; left: auto !important; right: auto !important; bottom: auto !important; width: auto !important; } /* THE STICKY LIVES ON THE ELEMENTOR COLUMN, NOT ON THIS PANEL. See the block above. position:static here is deliberate: it was `sticky` and it never once worked, because a sticky element can only travel inside its own containing block and this panel's parent (nav.bdo-cn) is exactly as tall as the panel. Zero room to move, so it scrolled away with the page and looked like the feature had simply not been built. */ .bdo-cn-panel { position: static; /* NO max-height AND NO INNER SCROLL, deliberately, after trying it. Adding two links made the list tall enough to outgrow a short window with a group open, so the panel was given max-height + overflow-y. That produced a scrollbar Brian disliked on sight, hiding the scrollbar needed two more rules, and the overflow box clipped the eyebrow's negative margin so that had to move as well - three rules of repair for a problem this sidebar did not have before. All of it is gone. If an open group runs past the bottom of a short window, collapsing it brings the rest back, which is how it behaved before any of this and is nobody's real complaint. */ background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; /* The -10px cancels the padding-top the Elementor column wrapper puts above this widget. If the top alignment ever looks wrong after a template edit, that wrapper padding is the thing to check first - this number exists only to cancel it. */ margin: -10px 0 0 !important; /* Inherit the theme's font rather than loading Poppins again - the site already serves it, and a second copy would be pure weight. */ font-family: inherit; } /* line-height:1 so the box hugs the capitals. At the inherited line-height the eyebrow carried several px of leading ABOVE the text, which read as the sidebar starting lower than the category heading even when the boxes were level. */ .bdo-cn-eyebrow { font-size: 11px; line-height: 1; letter-spacing: 0.16em; text-transform: uppercase; color: #9A9A94 !important; font-weight: 600; padding-bottom: 14px; /* The wrapper-padding compensation lives on .bdo-cn-panel - see the note there. */ margin-top: 0; } .bdo-cn-groups { display: flex; flex-direction: column; } /* The line between categories - the structure, now that the box is gone. */ .bdo-cn-group { border-top: 1px solid #EDEBE7; } /* Group header. Reset the button back to looking like text - it is a button for keyboard and screen-reader reasons, not for looks. background is forced at every state because the theme paints buttons on hover. */ .bdo-cn .bdo-cn-head { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 13px 0; margin: 0; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; cursor: pointer; user-select: none; text-align: left; font: inherit; color: #1A1A1A !important; } .bdo-cn .bdo-cn-head:hover, .bdo-cn .bdo-cn-head:focus, .bdo-cn .bdo-cn-head:active { background: none !important; color: #1A1A1A !important; box-shadow: none !important; } .bdo-cn .bdo-cn-head-label { font-size: 14.5px; font-weight: 500; color: #1A1A1A !important; } /* Viewing the group's own page: the label carries the weight, but no division is marked active, because none of them is where the shopper is. */ .bdo-cn .bdo-cn-head-label.is-current { font-weight: 600; } /* CATEGORY EMOJI - the same characters the mobile hamburger menu uses. FIXED WIDTH, not a plain margin. The emoji are not all the same width (the graduation cap is visibly narrower than the football), so spacing them with margin alone would leave every category label starting at a slightly different x. A fixed box means the labels line up in a column no matter which character sits beside them - and a category with NO icon still starts at the left edge rather than in a hanging indent, because the span is not rendered at all in that case. font-size is a touch under the mobile menu's 1.2em: this sits at 14.5px in a quiet sidebar rather than in a full-screen menu, and at 1.2em the icons out-shouted the words they label. */ .bdo-cn .bdo-cn-emoji { display: inline-block; /* 1.45em first time out. Brian asked for more air between the icon and the word - the wider characters (football, basketball) were nearly touching their label. */ width: 1.8em; font-size: 1.05em; line-height: 1; /* Emoji sit high on the text baseline; this drops them back level with the label. */ vertical-align: -0.05em; /* Never let the theme's link colour tint a colour emoji. */ text-decoration: none !important; } .bdo-cn .bdo-cn-sign { font-size: 14px; color: #B0AFA9 !important; line-height: 1; padding-left: 12px; } .bdo-cn-list { display: flex; flex-direction: column; padding-bottom: 12px; } /* [hidden] needs help: the flex rule above would otherwise win and keep it visible. */ .bdo-cn-list[hidden] { display: none; } /* Division links. Colour forced at every state - these came out theme blue without it. */ .bdo-cn .bdo-cn-link { font-size: 13.5px; padding: 8px 0 8px 16px; /* The resting rail is the header bar's light grey, #FAFAFA - Brian's call, so the sidebar and the header agree on what "quiet grey" is. It was #EDEBE7, a warm tone from the handoff, and noticeably darker. IT IS ALMOST INVISIBLE ON WHITE, and that is the point rather than an accident: the rail should be felt, not read, so the only bars that announce themselves are the one you are pointing at and the one you are on - and those are now the sport's colour. The value is written out because there is nothing to read it from: it lives in the header plugin's own --bdo-sh-bar, which this stylesheet cannot see. If that ever changes, this is the line to change with it. */ border-left: 2px solid #FAFAFA; color: #6E6E68 !important; background: none !important; font-weight: 400; text-decoration: none !important; transition: color .15s ease, border-color .15s ease; } /* Hover takes the sport's colour too, so the bar you are pointing at and the bar marking where you are speak the same language. Brian asked for it the moment he saw the active one coloured and the hover one still going black. Same fallback for the same reason. */ .bdo-cn .bdo-cn-link:hover, .bdo-cn .bdo-cn-link:focus-visible { color: #1A1A1A !important; background: none !important; border-left-color: var(--bdo-cn-accent, #1A1A1A); /* 4px, the same as the active bar - Brian's call. Hover is a preview of landing there, so the two should not be different weights. The padding drops by the same 2px the border gains, or the label would jog right under the pointer. */ border-left-width: 4px; padding-left: 14px; } /* "All {category}" - the entry point to the parent term, first in every open list. Slightly darker and a touch heavier than the divisions below it, so it reads as the whole category rather than as one more division in the list. Deliberately subtle: it should be findable, not louder than the thing the shopper is actually looking for. */ .bdo-cn .bdo-cn-link--all { color: #55554F !important; font-weight: 500; } /* The current division. The left rule is what carries "you are here" down the list. THE BAR IS THE SPORT'S OWN COLOUR. Brian: *"id like to color match it to the category grid similar to how we did for the mobile menu... match the HEX code exactly"*. So baseball is #74a167 here because that is what the category tile and the header accent are - the value is read from bdo-category-grid's config at render time and printed onto the group as --bdo-cn-accent, never copied into this file. #1A1A1A stays as the fallback, which is what this bar has always been. A category the grid has no colour for keeps the old near-black rather than losing its "you are here" marker. */ .bdo-cn .bdo-cn-link.is-active { color: #1A1A1A !important; font-weight: 600; /* 4px, double the resting rail - Brian's call. Now that the rail itself is nearly invisible, weight is doing as much of the "you are here" work as colour is. */ border-left: 4px solid var(--bdo-cn-accent, #1A1A1A); /* 16 - 2. The border grows OUTWARD from the text, so without this the active row's label would sit 2px right of every other row and the list would look bent. */ padding-left: 14px; } /* Top-level term with no children - a plain link at group weight, no toggle. */ .bdo-cn .bdo-cn-leaf { display: block; font-size: 14.5px; font-weight: 500; padding: 13px 0; color: #1A1A1A !important; background: none !important; text-decoration: none !important; transition: color .15s ease; } .bdo-cn .bdo-cn-leaf:hover, .bdo-cn .bdo-cn-leaf:focus-visible { color: #1A1A1A !important; background: none !important; } .bdo-cn .bdo-cn-leaf.is-active { font-weight: 600; } /* A visible focus ring, and never outline:none without a replacement. Keyboard users get the same information the mouse gives everyone else. */ .bdo-cn .bdo-cn-head:focus-visible, .bdo-cn .bdo-cn-link:focus-visible, .bdo-cn .bdo-cn-leaf:focus-visible { outline: 2px solid #1A1A1A; outline-offset: 2px; } } /* end min-width: 900px */