/* ============================================================================ * kaliber-shop-nav.css — THE SHOP TAB STRIP'S LOOK. ONE DECLARATION, TWO HALVES. * ============================================================================ * * Owner, 2026-08-09, on /shop/build-a-buddy and /shop/flea-market: the "K" logo * "and tabs". * * THE TAB *LIST* WAS ALREADY FIXED AND THIS IS THE OTHER HALF OF IT. * `_shop_nav_items.html` made the five destinations one record read by both * renderers, and both halves now emit the same five labels in the same order * with the same current-tab. What it could not fix is that ONE LIST WAS BEING * DRAWN BY TWO COMPONENTS WITH TWO SKINS: * * /shop, /shop/kc-coins, /shop/items-pals, /shop/kits (Apache -> Shop.php) * .hq-tabs-center > .hq-tab-box, styled inline in Shop.php * 10px 18px, .95rem, teal border, cyan glow, text-shadow, blur(5px), * hot-pink active gradient, HIDDEN below 768px * * /shop/build-a-buddy, /shop/flea-market (Apache -> Flask) * .shop-tab-strip > .shop-tab, styled inline in _shop_nav.html * 9px 16px, .92rem, teal border, softer glow, no text-shadow, no blur, * violet->pink active gradient, HORIZONTALLY SCROLLED below 780px * * Same data, same page family, two different-looking bars — which is exactly * what "an inconsistent tab bar" describes. `_shop_nav.html`'s own note said * where this belonged: "These rules are inline rather than in `static/css/` * because that tree is owned by another agent in this pass. When the strip's CSS * moves there, delete this block — do not leave both." This is that move. * * ONE RULESET, TWO SELECTOR SETS, AND WHY THAT IS THE POINT * --------------------------------------------------------- * Every rule below names BOTH components. Not "the Flask one was restyled to * look like the PHP one" — that would be a second copy of the answer that * happens to agree today, which is the whole failure mode this file exists to * end. A property is declared ONCE and both halves receive it, so the next * change to the strip's look is one edit and cannot land on one half only. * * The two halves keep different ELEMENT names because they are genuinely * different controls and must stay so: the first three PHP tabs switch an * in-page view (`loadShopView`) while every Flask tab is a real navigation. * Only the LOOK is shared. Positioning is not shared either — Shop.php centres * its strip absolutely inside its top bar and the Flask strip sits in the * content column — because that is layout, it lives with each page's own * chrome, and moving it blind on a live storefront is not a CSS change. * * WHICH SKIN WON, AND WHY * ----------------------- * Shop.php's GEOMETRY (10px 18px, .95rem, 15px gap, uppercase pill) because * /shop is the page the owner is comparing against and four of the six URLs * render it; a change there would be a regression, not a fix. * * The COLOURS resolve through `kaliber-site-theme.css` tokens rather than the * cyan/hot-pink literals Shop.php restated inline. That stylesheet is linked by * both halves already and is the site palette by the same owner instruction * that produced this file ("make sure css is centralized and shared"); a * component that RESTATES a palette value cannot be re-pointed from there, which * is the bug the token pass existed to remove. Fallbacks are supplied on every * `var()` so this file is still correct if it is ever loaded without the theme. * * The Flask half's two ACCESSIBILITY behaviours won outright and now apply to * both: * * NO `pointer-events: none` on the current tab. Shop.php used it to stop a * re-click; it also takes the tab out of the keyboard's reach, and * `aria-current="page"` already tells everyone which one they are on. * `tests/test_shop_nav_manifest.py` asserts this file declares no * `pointer-events`. * * A real `:focus-visible` ring. Half these controls are `
` * with `tabindex="0"`; a focusable control with no visible focus state is * unusable by keyboard, and the PHP half had none. * * BELOW 768px THE STRIP NOW SCROLLS ON BOTH HALVES INSTEAD OF VANISHING ON ONE. * Shop.php's media query was `display: none` — on a phone, four of the six shop * URLs simply had no way to reach the other four. Hiding a navigation is not a * responsive strategy, it is a dead end, and the Flask half had already solved * it by scrolling sideways. That behaviour is now shared. * * CACHE BUSTING. This file is NEW, so it has no existing `?v=` in the wild and * no object to fork: both references were added at `?v=20260809.1` in the same * change. If you edit this file you MUST bump BOTH of them together — * `_shop_nav.html` and `/Shop.php` — because Cloudflare keys on the * full URL and two versions of one file is how `kaliber-site-nav.css` ended up * serving two different objects. `grep -rn 'kaliber-shop-nav.css?v='` over both * trees finds every reference; there are exactly two. * ============================================================================ */ /* --------------------------------------------------------------------------- * The strip itself. * * Only the properties that are the same on both halves are here. The PHP half's * `position: absolute; left: 50%; transform: translateX(-50%)` stays in * Shop.php: it positions the strip inside that page's top bar, which the Flask * pages do not have. * --------------------------------------------------------------------------- */ .shop-tab-strip, .hq-tabs-center { display: flex; align-items: stretch; gap: 15px; } .shop-tab-strip { flex-wrap: wrap; justify-content: center; width: 100%; margin: 0 0 18px; padding: 0; list-style: none; } /* --------------------------------------------------------------------------- * A tab. * --------------------------------------------------------------------------- */ .shop-tab-strip .shop-tab, .hq-tabs-center .hq-tab-box { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 6px; border: 1px solid var(--kaliber-teal, #20d6c7); background: rgba(26, 26, 26, .85); color: var(--kaliber-ink, #f8f6ff); font-family: 'Eurostile', 'Orbitron', ui-sans-serif, system-ui, sans-serif; font-size: .95rem; line-height: 1.2; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: 0 0 10px rgba(32, 214, 199, .45), inset 0 0 5px rgba(32, 214, 199, .2); text-shadow: 0 0 5px var(--kaliber-teal, #20d6c7); backdrop-filter: blur(5px); transition: background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease; } /* The current tab and the hovered tab share a state deliberately: the strip is * five items wide and the filled pill is the only thing that says "you are * here", so it has to be unmistakable. `.active-tab` is Shop.php's class name * for it and `.is-current` is the Flask half's; both are listed rather than * renamed, because the PHP name is referenced by `loadShopView()` and by * `shopSlugMap` in that page's own JavaScript. */ .shop-tab-strip .shop-tab:hover, .shop-tab-strip .shop-tab.is-current, .hq-tabs-center .hq-tab-box:hover, .hq-tabs-center .hq-tab-box.active-tab { background: linear-gradient(135deg, var(--kaliber-violet, #8b5cf6), var(--kaliber-pink, #ec4899)); border-color: var(--kaliber-pink, #ec4899); color: #fff; box-shadow: 0 0 20px rgba(236, 72, 153, .6), inset 0 0 10px rgba(236, 72, 153, .35); text-shadow: 0 0 5px #fff; } /* Half of these controls are `
`, which browsers * give no focus ring of their own. Without this rule the PHP strip could be * tabbed through completely invisibly. */ .shop-tab-strip .shop-tab:focus-visible, .hq-tabs-center .hq-tab-box:focus-visible { outline: 2px solid var(--kaliber-teal, #20d6c7); outline-offset: 2px; } /* --------------------------------------------------------------------------- * Narrow screens: scroll, never hide. * * 780px rather than the 768px Shop.php used, matching the Flask half's existing * breakpoint: it is the shell's own header breakpoint, and having the strip * change at a different width from the chrome around it is the kind of 12px * disagreement nobody can see in review and everybody sees on a phone. * --------------------------------------------------------------------------- */ @media (max-width: 780px) { .shop-tab-strip, .hq-tabs-center { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; gap: 10px; } .shop-tab-strip { margin-bottom: 14px; padding-bottom: 2px; } .shop-tab-strip::-webkit-scrollbar, .hq-tabs-center::-webkit-scrollbar { display: none; } .shop-tab-strip .shop-tab, .hq-tabs-center .hq-tab-box { padding: 8px 12px; font-size: .82rem; flex: 0 0 auto; } }