/* Books nav dropdown. * * Loaded AFTER the three Webflow stylesheets, because it has to override two * rules in webflow.css that would otherwise leave the keyboard path invisible: * .w-dropdown-toggle:focus { outline: 0 } * .w-dropdown-link:focus { outline: 0 } * The focus rules below carry one extra ancestor class so they win on * specificity, not merely on load order. * * The dropdown opens three different ways on purpose, so the feature never * depends on any single mechanism: * .w--open Webflow's own component (data-hover="true"), via webflow.js * .is-open js/nav-books.js — tap-to-open on coarse pointers * :hover / :focus-within pure CSS, still works with JavaScript disabled */ .books-dropdown { display: inline-block; position: relative; } .books-dropdown-toggle { color: #681414; padding: 1rem; display: inline-block; position: relative; cursor: pointer; text-decoration: none; } .books-dropdown-toggle.w--current { font-weight: 500; } /* the base .w-dropdown-toggle reserves 40px on the right for Webflow's caret sprite; we draw our own, so reclaim that space */ .books-dropdown .books-dropdown-toggle.w-dropdown-toggle { padding-right: 1rem; } /* A border chevron, not an SVG: a box showing only its right and bottom edges. * For that shape -45deg points right, 45deg points down, 225deg points up. * Closed points RIGHT and open points DOWN, matching the "Read more" chevrons * on combined-preview, which are a right-facing SVG rotated 90deg when open. */ .books-dropdown-caret { display: inline-block; width: .45em; height: .45em; margin-left: .45em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-.15em) rotate(-45deg); transition: transform .18s ease; } .books-dropdown-list { min-width: 16rem; padding: .4rem; margin-top: .1rem; background: #FDFBF3; border: 1px solid rgba(122, 31, 31, .28); border-radius: .6rem; box-shadow: 0 10px 28px rgba(26, 26, 26, .14); z-index: 950; } .books-dropdown-link { display: block; padding: .62rem .8rem; border-radius: .4rem; color: #681414; text-decoration: none; font-size: .95rem; line-height: 1.3; } .books-dropdown-link:hover { background: rgba(122, 31, 31, .07); } /* ---- open states ---- */ .books-dropdown-list.w--open, .books-dropdown.is-open > .books-dropdown-list, .books-dropdown:focus-within > .books-dropdown-list { display: block; } /* Open: chevron turns down. Every open path needs its own caret rule, or the arrow disagrees with the menu depending on which mechanism fired. */ .books-dropdown.is-open > .books-dropdown-toggle .books-dropdown-caret, .books-dropdown:focus-within > .books-dropdown-toggle .books-dropdown-caret { transform: translateY(-.15em) rotate(45deg); } /* Webflow puts .w--open on the LIST, not on the container, and CSS has no backwards sibling combinator — :has() is the only way back up to the caret. Kept as its own rule on purpose: an engine without :has() support drops just this block, whereas folding it into the selector list above would invalidate that list too and cost us the .is-open and :focus-within arrows as well. */ .books-dropdown:has(> .books-dropdown-list.w--open) > .books-dropdown-toggle .books-dropdown-caret { transform: translateY(-.15em) rotate(45deg); } /* Hover opens it. * * NO MEDIA QUERY, AND NO LATER RULE THAT TURNS THIS BACK OFF. Three capability * tests have been tried in this spot and a real machine — a touchscreen laptop * with a mouse plugged in — answered every one of them wrong: * * (hover: hover) and (pointer: fine) describes only the PRIMARY * input, so the digitiser wins * and the rule stops applying * (any-hover: hover) and (any-pointer: fine) still a capability question; * remote sessions, VMs and a * device toolbar left on all * answer "no" with a mouse in * plain sight * (any-pointer: coarse) and (any-hover: none) the same test moved into a * cancel block below, where it * reported TRUE on that laptop * and hid the list while the * caret went on rotating — the * cancel reset one of the two * rules and not the other * * The guard is now .ccr-touch on , set by js/nav-books.js from the * pointerType of the pointer actually in use. That is an observation rather * than a prediction, and it clears the moment a mouse moves, which is what * lets a hybrid device work with either input. * * The guard sits on the OPEN rule, via :not(), rather than in a later reset. * A reset has to out-specify every open path, and one of them — * .books-dropdown-list.w--open, at (0,2,0) — could never beat a (0,3,0) reset * while the pointer was over the tab. That is what made the menu flash into * view on mouse-out: the reset stopped applying a frame before Webflow removed * .w--open. With no reset rule there is nothing left to out-specify. * * These two selectors must stay gated together. The caret rotating while the * list stayed shut is the exact bug this replaced. */ html:not(.ccr-touch) .books-dropdown:hover > .books-dropdown-list { display: block; } html:not(.ccr-touch) .books-dropdown:hover > .books-dropdown-toggle .books-dropdown-caret { transform: translateY(-.15em) rotate(45deg); } /* On a touch screen hover is either absent or faked by the first tap, so it must not open the menu. js/nav-books.js turns that first tap into "open" and lets the second one follow the link to /books. That is handled entirely by the .ccr-touch guard above. There is no @media block here any more, and NO rule anywhere in this file sets the list back to display:none. The three open paths — .w--open, .is-open and :focus-within — are asserted once near the top of the file and nothing competes with them, which is the property that went missing when the cancel block existed. */ /* ---- focus ring, restored ---- */ .navbar .books-dropdown-toggle:focus-visible, .navbar .books-dropdown-link:focus-visible, .navbar .nav-menu-link.books-sub:focus-visible { outline: 2px solid #681414; outline-offset: 2px; border-radius: .25rem; } /* fallback for engines without :focus-visible, withdrawn where it is supported so a mouse click does not leave a ring behind */ .navbar .books-dropdown-toggle:focus, .navbar .books-dropdown-link:focus { outline: 2px solid #681414; outline-offset: 2px; } .navbar .books-dropdown-toggle:focus:not(:focus-visible), .navbar .books-dropdown-link:focus:not(:focus-visible) { outline: none; } /* ---- mobile ---- The hamburger list has no hover, so the four books are plain nested links rather than a dropdown. */ .nav-menu-link.books-sub { padding-left: 1.1rem; font-size: .95em; opacity: .92; }