/* ========================================================================= BRIVOY — Design System v2 Minimalist, mobile-first. Chrome is quiet; content and typography carry the page. Dark "mission control" palette kept, but panels/borders are used sparingly instead of boxing everything. ========================================================================= */ /* Site-wide "min-width-0" utility used throughout the markup (product rows, nav dropdowns, aside cards) to let a flex child shrink/truncate its own text instead of forcing the row to overflow or wrap. Bootstrap 5 does NOT actually ship a min-width-0 utility class (only min-vw-100 / min-vh-100), so every use of class="min-width-0" was previously a silent no-op — this is the real, load-bearing definition. */ .min-width-0 { min-width: 0; } /* ========================================================================= THEME — light mode is the default (:root). Dark mode is the original "mission control" navy palette, applied via [data-theme="dark"] on (set server-side from the user's saved/cookie preference, and flipped instantly client-side by the navbar toggle — see main.js). Every rule below reads these variables, so components don't need a separate light/dark copy. ========================================================================= */ :root { --lb-navy-950: #FFFFFF; --lb-navy-900: #F5F6FA; --lb-navy-800: #E7E9F2; --lb-navy-700: #D6D9E8; --lb-navy-600: #C7CBDF; --lb-mist: #5C6284; --lb-white: #12162E; --lb-lime: #3E8914; --lb-lime-dark: #2F6B0F; --lb-coral: #E14F2A; --lb-coral-dark: #C23D1C; /* RGB triplets (no #, no rgb()) for translucent surfaces like the sticky top bar / bottom nav, which need rgba(var(--x), alpha). */ --lb-navy-950-rgb: 255, 255, 255; --lb-navy-900-rgb: 245, 246, 250; /* Constant dark ink for text/icons drawn ON TOP of the lime accent (buttons, the vote-button "voted" state, the FAB, etc). This does NOT flip with the theme — it needs to stay dark in both modes for contrast against the (always-bright) lime background. */ --lb-ink: #0B0E1F; --lb-font-display: 'Space Grotesk', 'Segoe UI', sans-serif; --lb-font-body: 'Inter', 'Segoe UI', sans-serif; --lb-font-mono: 'JetBrains Mono', 'Courier New', monospace; --lb-space-1: .25rem; --lb-space-2: .5rem; --lb-space-3: .75rem; --lb-space-4: 1rem; --lb-space-5: 1.5rem; --lb-space-6: 2rem; --lb-radius-sm: .5rem; --lb-radius-md: .75rem; --lb-radius-lg: 1.1rem; --lb-topbar-h: 56px; --lb-bottomnav-h: 60px; --bs-body-bg: var(--lb-navy-950); --bs-body-color: var(--lb-white); --bs-body-font-family: var(--lb-font-body); --bs-link-color: var(--lb-lime); --bs-link-hover-color: var(--lb-lime-dark); --bs-border-color: var(--lb-navy-800); /* Award medal palette (gold/silver/bronze) — kept as its own set of theme-aware variables rather than the translucent-on-navy rgba() values used elsewhere, because those were tuned to sit on a dark panel and turn washed-out/illegible once light mode (the default theme) puts them on a white background instead. Light mode gets deeper, more saturated tones for real contrast; dark mode keeps the original soft glow look. */ --lb-gold: #92660A; --lb-gold-bg: #FFF4D6; --lb-gold-border: #E8B930; --lb-silver: #4B5170; --lb-silver-bg: #EEF0F7; --lb-silver-border: #C3C9DE; --lb-bronze: #8A4B1E; --lb-bronze-bg: #FBE7D6; --lb-bronze-border: #D98C4A; /* Editor's Choice award — curatorial pick, kept visually distinct from the gold/silver/bronze votes-ranked medals (purple, matching the homepage "FEATURED" showcase these picks come from). Same light/dark theme-aware treatment as the medal palette above. */ --lb-curated: #6B3FA0; --lb-curated-bg: #F1E9FB; --lb-curated-border: #C9A6EC; } /* ---- Dark mode ("mission control") — original palette ---- */ [data-theme="dark"] { --lb-navy-950: #0B0E1F; --lb-navy-900: #10142B; --lb-navy-800: #171C3A; --lb-navy-700: #232A52; --lb-navy-600: #333c6b; --lb-mist: #9BA3C7; --lb-white: #F6F7FB; --lb-lime: #C7F464; --lb-lime-dark: #9FD53A; --lb-coral: #FF6B4A; --lb-coral-dark: #E5502F; --lb-navy-950-rgb: 11, 14, 31; --lb-navy-900-rgb: 16, 20, 43; --lb-gold: #FFD166; --lb-gold-bg: rgba(255,209,102,0.16); --lb-gold-border: rgba(255,209,102,0.45); --lb-silver: #D8DEE9; --lb-silver-bg: rgba(216,222,233,0.18); --lb-silver-border: rgba(216,222,233,0.4); --lb-bronze: #D98C4A; --lb-bronze-bg: rgba(217,140,74,0.18); --lb-bronze-border: rgba(217,140,74,0.4); --lb-curated: #B98CFF; --lb-curated-bg: rgba(185,140,255,0.18); --lb-curated-border: rgba(185,140,255,0.45); } /* Bootstrap's own utility hardcodes #fff; redirect it to follow the theme instead — every use of .text-white in this app is "primary foreground text on a themed surface", never literal white-on-color. */ .text-white { color: var(--lb-white) !important; } /* overflow-x: clip (not hidden) so full-bleed elements like the mobile hero video can't ever cause a horizontal scrollbar, without creating a new scroll container that would break position:sticky (topbar, aside promo card) the way overflow-x: hidden here would. */ html { overflow-x: clip; } html, body { background: var(--lb-navy-950); color: var(--lb-white); } /* ========================================================================= SKELETON SHIMMER — a lightweight loading placeholder for every image on the site (product logos, thumbnails, galleries, avatars, blog covers, the video poster, etc). Applied generically by initImageSkeletons() in main.js, which runs on every page load and again on any content it injects dynamically afterwards (mobile promo cards, new comments) — see the calls to window.lbInitSkeletons() there. No markup changes needed per-page: the class rides on the element itself, using its own box (already sized by whatever component CSS it belongs to — .lb-logo, .lb-avatar-sm, etc.) so nothing shifts layout when the real image finishes loading and quietly replaces the shimmer sitting behind it. */ @keyframes lb-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } img.lb-skeleton { background-color: var(--lb-navy-800); background-image: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.06) 45%, rgba(255,255,255,.11) 50%, rgba(255,255,255,.06) 55%, transparent 70%); background-size: 200% 100%; animation: lb-shimmer 1.6s ease-in-out infinite; color: transparent; /* hide alt text / broken-image icon while it loads */ } img.lb-skeleton-done { animation: none; background: none; } @media (prefers-reduced-motion: reduce) { img.lb-skeleton { animation: none; background-position: 0 0; } } /* Generic non-image placeholder block, for the odd spot that needs a shimmer before it has real content but isn't an itself — e.g. the dashboard chart while Chart.js is still drawing it. Opt in by hand with class="lb-skeleton-block" where relevant. */ .lb-skeleton-block { position: relative; overflow: hidden; background-color: var(--lb-navy-800); border-radius: var(--lb-radius-sm, 8px); } .lb-skeleton-block::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.06) 45%, rgba(255,255,255,.11) 50%, rgba(255,255,255,.06) 55%, transparent 70%); background-size: 200% 100%; animation: lb-shimmer 1.6s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .lb-skeleton-block::after { animation: none; } } body { font-family: var(--lb-font-body); min-height: 100vh; font-size: .95rem; /* room for the fixed mobile bottom nav */ padding-bottom: calc(var(--lb-bottomnav-h) + env(safe-area-inset-bottom)); /* Same containing-block guard as .lb-docked-outer/-wrap/-main above — is the direct parent of every position:fixed element on the site (offcanvas backdrops, the mobile buttons, the search overlay), so it's the single most important place to guarantee this. */ transform: none !important; filter: none !important; will-change: auto !important; } @media (min-width: 992px) { body { padding-bottom: 0; } } h1, h2, h3, h4, h5, h6, .display-font { font-family: var(--lb-font-display); font-weight: 600; letter-spacing: -0.02em; } .text-mist { color: var(--lb-mist) !important; } .text-lime { color: var(--lb-lime) !important; } .text-coral { color: var(--lb-coral) !important; } .mono { font-family: var(--lb-font-mono); } a { text-decoration: none; } .lb-container { max-width: 1120px; /* Force the SAME horizontal gutter everywhere this class is used — whether it's on a Bootstrap .container (default .75rem gutter) or a .container-fluid with a manual .px-3 (1rem). Equal specificity to both, but declared after bootstrap.min.css in the cascade, so this wins and every section's left/right edge lines up with the top bar's. */ padding-left: 1rem; padding-right: 1rem; } /* ---- Product detail hero section gap ---------------------------------- Sits right under the sticky navbar (.lb-topbar is `position: sticky`, so it takes up its own space in flow — no fixed-nav offset needed here, just this section's own top padding). Desktop: always a 20px gap under the navbar. Mobile: when the product has a hero video right at the top of this section, that video should butt up flush against the navbar with no gap at all; otherwise (no video, so a heading/content starts the section instead) keep the same 20px breathing room as desktop. */ .lb-hero-gap { padding-top: 19px; } @media (max-width: 991.98px) { .lb-hero-gap.lb-hero-gap-video { padding-top: 0; } } @media (min-width: 992px) { /* Extra breathing room under the last bit of content so the floating .lb-product-actionbar (fixed, ~64px tall + its own bottom offset) never permanently sits over real content — it only overlaps the very tail end while scrolling, then hides itself once .lb-footer scrolls into view (see initProductActionbar() in main.js). */ .lb-hero-gap { padding-bottom: 6.5rem !important; } } /* ========================================================================= TOP BAR — mobile: [hamburger][logo] .......... [search][user] desktop: [logo][nav links][search]...........[submit][user] ========================================================================= */ .lb-topbar { height: var(--lb-topbar-h); /* Glassy: mostly-transparent tinted panel + heavy blur/saturation of whatever's scrolling underneath, rather than an almost-opaque bar. A soft inset top highlight and translucent hairline border sell the "pane of glass" edge; the bottom border stays translucent too so it doesn't read as a hard opaque strip against the blur. */ background: rgba(var(--lb-navy-950-rgb), 0.55); backdrop-filter: blur(20px) saturate(1.8); -webkit-backdrop-filter: blur(20px) saturate(1.8); box-shadow: inset 0 -1px 0 rgba(255,255,255,.05); /* Solid, theme-adaptive — same var(--lb-navy-800) used for the left/right panel seams below, so the navbar's bottom edge reads as one continuous border system with them rather than its own fainter translucent line. */ border-bottom: 1px solid var(--lb-navy-800); position: sticky; top: 0; z-index: 1030; } /* Browsers without backdrop-filter support can't fake translucency over moving content, so fall back to the old near-opaque bar there instead of leaving nav text floating over whatever's underneath. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .lb-topbar { background: rgba(var(--lb-navy-950-rgb), 0.97); box-shadow: none; border-bottom: 1px solid var(--lb-navy-800); } } .lb-topbar-inner { min-height: var(--lb-topbar-h); display: flex; align-items: center; gap: .5rem; } .lb-icon-btn { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--lb-radius-sm); color: var(--lb-white); background: transparent; border: none; font-size: 1.15rem; flex-shrink: 0; } .lb-icon-btn:hover, .lb-icon-btn:active { background: var(--lb-navy-800); color: var(--lb-lime); } .lb-brand { font-family: var(--lb-font-display); font-weight: 700; font-size: 1.05rem; color: var(--lb-white); display: flex; align-items: center; gap: .4rem; white-space: nowrap; } .lb-brand .bi { color: var(--lb-lime); font-size: 1.1rem; } .lb-topbar-spacer { flex: 1 1 auto; } .lb-avatar-btn img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: var(--lb-navy-700); } .lb-notif-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 999px; background: var(--lb-coral); color: #fff; font-size: .62rem; font-weight: 700; line-height: 16px; text-align: center; font-family: var(--lb-font-mono); } /* Desktop-only inline nav, hidden on mobile */ .lb-desktop-nav { display: none; } @media (min-width: 992px) { .lb-desktop-nav { display: flex; align-items: center; gap: .25rem; margin-left: .75rem; } .lb-mobile-only { display: none !important; } } @media (max-width: 991.98px) { .lb-desktop-only { display: none !important; } } .lb-nav-link { color: var(--lb-mist); font-weight: 500; font-size: .9rem; padding: .4rem .7rem; border-radius: var(--lb-radius-sm); } .lb-nav-link:hover, .lb-nav-link.active { color: var(--lb-white); background: var(--lb-navy-800); } /* ========================================================================= FULL-SCREEN SEARCH OVERLAY — opened by the single search icon in the top bar (desktop and mobile alike). Covers the whole viewport, dimmed backdrop, with the search field + submit button centered both axes. Context-aware: header.php points the form at either blog.php (blog pages) or search.php (everywhere else) — see $__searchInBlog there. ========================================================================= */ .lb-search-overlay { position: fixed; inset: 0; z-index: 1080; width: 100%; height: 100%; height: 100dvh; background: rgba(var(--lb-navy-950-rgb), 0.97); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; } .lb-search-overlay.is-open { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .18s ease, transform .18s ease, visibility 0s linear 0s; } body.lb-search-open { overflow: hidden; } .lb-search-overlay-close { position: absolute; top: max(16px, env(safe-area-inset-top)); right: 16px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--lb-navy-700); background: var(--lb-navy-900); color: var(--lb-white); font-size: 1.1rem; } .lb-search-overlay-close:hover { border-color: var(--lb-lime); color: var(--lb-lime); } .lb-search-overlay-inner { width: 100%; max-width: 640px; padding: 0 1.25rem; } .lb-search-overlay-form { width: 100%; } .lb-search-overlay-row { display: flex; align-items: center; gap: .5rem; background: var(--lb-navy-900); border: 1px solid var(--lb-navy-700); border-radius: var(--lb-radius-lg, 14px); padding: .4rem .4rem .4rem 1.1rem; } .lb-search-overlay-row:focus-within { border-color: var(--lb-lime); } .lb-search-overlay-icon { color: var(--lb-mist); font-size: 1.2rem; flex-shrink: 0; } .lb-search-overlay-input { flex: 1 1 auto; min-width: 0; background: transparent; border: none; outline: none; color: var(--lb-white); font-size: 1.1rem; padding: .6rem 0; } .lb-search-overlay-input::placeholder { color: var(--lb-mist); } .lb-search-overlay-submit { flex-shrink: 0; padding: .6rem 1.4rem; border-radius: calc(var(--lb-radius-lg, 14px) - 4px); } @media (max-width: 575.98px) { .lb-search-overlay-row { flex-wrap: wrap; padding: .4rem 1rem; } .lb-search-overlay-submit { width: 100%; margin-top: .5rem; } } /* Offcanvas menu (hamburger) */ .offcanvas.lb-offcanvas { background: var(--lb-navy-900); color: var(--lb-white); border-right: 1px solid var(--lb-navy-800); width: 280px; /* Explicit, above the shared .offcanvas-backdrop rule further down (z-index: 1045 !important — bumped up from Bootstrap's own default of 1040 so opening the Other-Links bottom sheet also dims this nav's own backdrop correctly, see that rule's comment). Bootstrap's un-overridden .offcanvas default is ALSO 1045, so that backdrop bump left this menu tied with its own backdrop; with equal z-index, paint order falls back to DOM order, and Bootstrap appends the backdrop as the last child of (after this nav, which lives up in the header) — so the backdrop was winning the tie and rendering on top of the menu it's supposed to sit behind. One step above the backdrop's 1045 guarantees this nav always wins that stack, same as every other offcanvas/modal panel on the site relative to its own backdrop. */ z-index: 1046; } .lb-offcanvas .offcanvas-header { border-bottom: 1px solid var(--lb-navy-800); } .lb-offcanvas .btn-close { opacity: .7; } [data-theme="dark"] .lb-offcanvas .btn-close { filter: invert(1) grayscale(1); } .lb-offcanvas-link { display: flex; align-items: center; gap: .65rem; padding: .6rem .5rem; color: var(--lb-white); font-weight: 500; border-radius: var(--lb-radius-sm); border-left: 2px solid transparent; transition: background .15s ease, color .15s ease, border-color .15s ease; } .lb-offcanvas-link:hover { background: var(--lb-navy-800); color: var(--lb-lime); } .lb-offcanvas-link .bi { width: 20px; color: var(--lb-mist); font-size: 1.05rem; } .lb-offcanvas-link:hover .bi { color: var(--lb-lime); } .lb-offcanvas-link.lb-active-link { background: rgba(199,244,100,.1); color: var(--lb-lime); border-left-color: var(--lb-lime); } .lb-offcanvas-link.lb-active-link .bi { color: var(--lb-lime); } .lb-offcanvas-section-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--lb-mist); padding: .25rem .5rem; margin-top: .5rem; } /* ---- Docked nav (account/admin areas): the SAME offcanvas element becomes a permanent left sidebar at desktop widths instead of a hidden slide-in drawer, so there's exactly one copy of these links, not a duplicate static sidebar. ---- Alignment: .lb-docked-outer is the SAME container-fluid + lb-container + px-3 combo the top bar uses, so the sidebar's left edge lines up under the logo and the content's right edge lines up under the avatar — the whole sidebar+content block sits inside the identical bounding box as the top bar. Every page's own inner "container lb-container" is then neutralized (full width, no re-centering, no extra padding) so it doesn't create a second, misaligned gutter inside that box. */ /* No bottom padding here — it lives on .lb-docked-main instead (below), so the row's true height (and therefore the left/right panels' full height, which track the row via `position: sticky`) includes that breathing room and their borders run all the way down to the very bottom of the shell, connecting with .lb-footer's border-top with zero gap between them, instead of stopping short by that padding. */ .lb-docked-outer { padding-top: 0; padding-bottom: 0; } /* The shell needs more room than the normal 1120px page container once there are up to 3 columns side by side — otherwise the center column gets crushed. Shared by the top bar's own inner container too, so the bar's [logo]...[user] content starts flush above the left panel's edge and ends flush above the right panel's edge — see .lb-shell-bounds. */ .lb-shell-bounds.lb-container { max-width: 1360px; } /* Defensive reset: position:fixed descendants (the mobile visit/more/promo buttons, the search overlay, offcanvas backdrops, etc.) are only truly viewport-fixed if NO ancestor between them and has a transform, filter, perspective, will-change, or contain property set — any one of those silently turns "fixed" into "fixed relative to that ancestor" instead, which looks exactly like the element scrolling with the page. Nothing in this stylesheet sets any of those on these containers, but a third-party stylesheet (Bootstrap/Swiper/GLightbox) reaching them via a utility class could in theory — this guards against that possibility explicitly rather than relying on it never happening. */ .lb-docked-outer, .lb-docked-wrap, .lb-docked-main { transform: none !important; filter: none !important; will-change: auto !important; } .lb-docked-main .container.lb-container, .lb-docked-main > section.lb-container { max-width: none; width: 100%; padding-left: 0 !important; padding-right: 0 !important; } /* Pages that set their own inline max-width on this container (e.g. the centered ~440px login/register card) are deliberately left alone here — no margin override — so Bootstrap's own `.container` margin:auto still centers them inside the column instead of pinning them to its left edge. */ @media (min-width: 992px) { /* No `gap` here on purpose — the offcanvas-to-main and main-to-aside spacing are each created explicitly below (offcanvas's margin-right, main's padding-right) instead of a uniform flex `gap`, specifically so the right-hand seam can be redrawn as a real border on .lb-docked-main without adding a `position: relative` anywhere upstream of it. That matters because .lb-actionbar-fixed (the floating vote/rate/visit bar on product pages) is a DESCENDANT of .lb-docked-main, and its footer-proximity JS temporarily switches it to `position: absolute` with a document-relative `top` — introducing any positioned ancestor between it and would silently change its containing block and throw that math off (this happened once already; don't reintroduce it). Padding/margin/border never affect containing blocks, so this whole approach is safe for that bar. align-items: stretch (not the flex default `flex-start`) is required for .lb-docked-main's border-right (below) to actually reach .lb-footer's border-top on short pages. The left sidebar is `position: sticky` with an explicit `height: calc(100vh - topbar)` (see #lbOffcanvas.lb-offcanvas-docked below), so it's always at least a full viewport tall — taller than .lb-docked-main's own content whenever a page's content is shorter than the viewport. Under flex-start, a flex item's height comes only from its own content, so .lb-docked-main (and its border-right) would stop exactly where its content ends — short of the sidebar's bottom edge and short of the footer — leaving a gap. `stretch` makes every flex item without its own explicit height (.lb-docked-main here) grow to match the row's tallest item instead, so the border always runs the full height of the row, flush into the footer, regardless of how little content the page has. .lb-shell-right opts back out of this via its own `align-self: flex-start` (see below) since it's sticky content with no border of its own — stretching it would just add invisible empty space under its widgets, so it isn't needed there. */ .lb-docked-wrap { display: flex; align-items: stretch; width: 100%; box-sizing: border-box; } .lb-docked-main { flex: 1 1 0%; min-width: 0; padding-bottom: var(--lb-space-6); } /* Right-hand seam + gap — scoped to body.lb-has-right-rail since .lb-docked-main is shared with admin/auth pages that use the docked left nav but have no right panel at all (see $__showRightRail in header.php); unscoped, this would draw a border with nothing next to it on those pages. padding-right stands in for the old flex gap on this side, with the border landing at its outer edge — flush against the right panel, same spot it sat at when it lived on the panel's own border-left. */ body.lb-has-right-rail .lb-docked-main { padding-right: var(--lb-space-6); border-right: 1px solid var(--lb-navy-800); } /* Left-hand gap (offcanvas to main) — recreates what the old uniform flex `gap` did for this pair (margin-right, folded into the existing #lbOffcanvas.lb-offcanvas-docked rule below). Margin rather than a wrap `gap` so it has no effect once the offcanvas switches to `position: fixed` and drops out of flow (992-1199.98 tablet band), matching the original behaviour of main sitting flush at that point. */ #lbOffcanvas.lb-offcanvas-docked { position: sticky !important; top: var(--lb-topbar-h) !important; left: auto !important; transform: none !important; visibility: visible !important; flex: 0 0 260px; width: 260px !important; height: calc(100vh - var(--lb-topbar-h)) !important; max-height: calc(100vh - var(--lb-topbar-h)); margin-right: var(--lb-space-6); border-radius: 0; border: 0; /* Theme-adaptive seam between the left panel and the center column — var(--lb-navy-800) is the site's standard border color, redefined per theme in [data-theme="dark"], so this flips automatically. */ border-right: 1px solid var(--lb-navy-800); background: transparent; box-shadow: none !important; z-index: 10; display: flex !important; flex-direction: column; } #lbOffcanvas.lb-offcanvas-docked .offcanvas-header { display: none; } #lbOffcanvas.lb-offcanvas-docked .offcanvas-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 1.1rem .85rem; /* Flush left edge: the sidebar's own left inset (.85rem above) is what pushed nav items in from .lb-offcanvas-docked's left border, out of line with the topbar's [logo]...[user] row, which starts flush at .lb-shell-bounds' own left edge (see the big alignment comment above this media query). Zeroing it out lines the nav links' left edge up with the logo's left edge instead. */ padding-left: 0; scrollbar-width: thin; scrollbar-color: var(--lb-navy-700) transparent; } #lbOffcanvas.lb-offcanvas-docked .offcanvas-body::-webkit-scrollbar { width: 6px; } #lbOffcanvas.lb-offcanvas-docked .offcanvas-body::-webkit-scrollbar-thumb { background: var(--lb-navy-700); border-radius: 999px; } /* No backdrop / scroll-lock needed once it's a static sidebar, not a modal drawer. */ body.lb-docked-nav .offcanvas-backdrop { display: none !important; } } /* ========================================================================= RIGHT RAIL — third column of the app shell (left nav | center feed | right rail), same idea as the left sidebar above: pinned in the viewport via `position: sticky` at the same top offset. Unlike the left nav, it does NOT get its own independent scrollbar/clipped height — it has no fixed height or overflow, so once its widgets (including the trailing "related products" card) grow taller than the viewport it just keeps scrolling along with the page's own scroll (the html/body), the same way it scrolls back into place once you scroll up again. It's only "sticky" in the sense that it stays pinned near the top of the viewport while its own content still fits, then scrolls off naturally with everything else. Shown starting at the `lg` breakpoint (992px) — this behaves identically whether it's sharing the row with the left nav (xl+) or standing in for it (the "lower desktop / tablet" band immediately below, where it trades places with the left nav instead of both — or neither — being visible). */ .lb-shell-right { flex: 0 0 320px; width: 320px; box-sizing: border-box; padding: 1rem .9rem 1.1rem 1rem; } @media (min-width: 992px) { .lb-shell-right { position: sticky; top: var(--lb-topbar-h); align-self: flex-start; /* Seam between the center column and this panel now lives on .lb-docked-main as a border-right instead (see .lb-docked-main above) — kept off this element on purpose. */ /* Flush right edge: the base rule's right inset (.9rem, above) pushed widget cards in from the panel's true right edge, out of line with the topbar's [logo]...[user] row, which ends flush at .lb-shell-bounds' own right edge. Zeroing it out lines the widgets' right edge up with the avatar's right edge instead. */ padding-right: 0; } } /* ========================================================================= "LOWER DESKTOP" / TABLET BAND (992px–1199.98px) — there's room to dock ONE side panel next to the center column here, not both left nav AND right rail (that needs the full 3-column xl+ width above). Rather than defaulting to the left nav and hiding the right rail (the right rail's Featured/Promoted/trending-category widgets are more relevant to what's in the center feed at this width), we flip it: the right rail shows, and the left nav reverts to its normal slide-in offcanvas drawer, reachable via the hamburger button (shown again at this width — it's otherwise hidden at >=992px by `.lb-mobile-only`). Only kicks in on pages that actually have a right rail to swap in (see body class `.lb-has-right-rail`, set by header.php) — admin/auth pages keep the plain docked-left-nav behaviour at every width >=992px, unaffected. ========================================================================= */ @media (min-width: 992px) and (max-width: 1199.98px) { /* Every property here that the base >=992px docked-sidebar rule (above) sets as `!important` has to be re-declared `!important` here too, or that rule wins regardless of this selector's higher specificity — `!important` is compared before specificity, not after. */ body.lb-has-right-rail #lbOffcanvas.lb-offcanvas-docked { /* Undo the docked-sidebar treatment from the block above and go back to a normal fixed, off-screen-by-default Bootstrap offcanvas drawer — position:fixed (not sticky/in-flow), starts translated fully out of view, and only becomes visible/interactive once Bootstrap's own `.show` class is toggled by the hamburger button below. */ position: fixed !important; top: 0 !important; left: 0 !important; transform: translateX(-100%) !important; visibility: hidden !important; transition: transform .3s ease-in-out, visibility 0s linear .3s; flex: 0 0 auto; width: 260px !important; height: 100vh !important; max-height: 100vh; border-right: 1px solid var(--lb-navy-800); background: var(--lb-navy-900); box-shadow: 0 0 40px rgba(0,0,0,.35) !important; /* MUST beat .offcanvas-backdrop's z-index:1045 !important (see its own comment further down) — matching it exactly, as this rule did before, ties the paint order to DOM order instead, and Bootstrap appends the backdrop as body's last child (after this drawer, which lives up in the header), so the backdrop was winning that tie and rendering on top of the ENTIRE drawer — dimming its own opaque background and text along with the page behind it, not just the page. One step above, `!important` to match, guarantees the drawer always wins — same convention `.offcanvas.lb-offcanvas` already uses for exactly this reason. */ z-index: 1046 !important; } body.lb-has-right-rail #lbOffcanvas.lb-offcanvas-docked.show, body.lb-has-right-rail #lbOffcanvas.lb-offcanvas-docked.showing { transform: none !important; visibility: visible !important; transition: transform .3s ease-in-out; } /* The docked variant hides the offcanvas's own header (close button) — as a real slide-in drawer again at this width it needs it back. */ body.lb-has-right-rail #lbOffcanvas.lb-offcanvas-docked .offcanvas-header { display: flex; border-bottom: 1px solid var(--lb-navy-800); } /* A real drawer needs its usual dimmed backdrop + scroll-lock, both of which the docked-sidebar block above disables globally — restore them just for this band (this rule's extra class beats that one's equal-specificity selector by appearing later in the stylesheet). */ body.lb-has-right-rail .offcanvas-backdrop { display: block !important; } /* Bring the hamburger back — hidden at >=992px by default since the left nav is normally already visible as a docked sidebar there. */ body.lb-has-right-rail .lb-hamburger-btn.lb-mobile-only { display: inline-flex !important; } } /* ========================================================================= BOTTOM NAV — mobile only, fixed, 5 quick actions ========================================================================= */ .lb-bottom-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; height: var(--lb-bottomnav-h); padding-bottom: env(safe-area-inset-bottom); background: rgba(var(--lb-navy-900-rgb), 0.97); backdrop-filter: blur(10px); border-top: 1px solid var(--lb-navy-800); /* Above the mobile visit/more/promo fixed cluster (1032–1034) — the bottom nav is permanent, always-visible chrome and should never be covered by any of those, even though they sit higher up the screen and don't normally overlap it spatially. */ z-index: 1040; } @media (min-width: 992px) { .lb-bottom-nav { display: none; } } .lb-bottom-nav-item { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--lb-mist); font-size: .65rem; font-weight: 500; } .lb-bottom-nav-item .bi { font-size: 1.25rem; line-height: 1; } .lb-bottom-nav-item.active { color: var(--lb-lime); } button.lb-bottom-nav-item { background: transparent; border: none; } .lb-bottom-nav-item.lb-fab-item { position: relative; top: -14px; } .lb-fab { box-sizing: border-box; width: 46px; height: 46px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--lb-lime); color: var(--lb-ink); border-radius: 50%; aspect-ratio: 1 / 1; font-size: 1.4rem; line-height: 1; overflow: hidden; box-shadow: 0 4px 14px rgba(199,244,100,.35); } .lb-fab .bi { line-height: 1; } .lb-bottom-nav-item.lb-fab-item span:last-child { margin-top: 2px; color: var(--lb-mist); } /* ========================================================================= DROPDOWN MENUS (avatar menu, etc.) ========================================================================= */ .dropdown-menu { background: var(--lb-navy-800); border: 1px solid var(--lb-navy-700); box-shadow: 0 8px 24px rgba(0,0,0,.35); } .dropdown-item { color: var(--lb-white); background: transparent; } .dropdown-item:hover, .dropdown-item:focus, .dropdown-item:active { background: var(--lb-navy-700) !important; color: var(--lb-lime) !important; } .dropdown-divider { border-color: var(--lb-navy-700); } /* ========================================================================= BUTTONS ========================================================================= */ .btn-lime { background: var(--lb-lime); border: 1px solid var(--lb-lime); color: var(--lb-ink); font-weight: 600; } .btn-lime:hover { background: var(--lb-lime-dark); border-color: var(--lb-lime-dark); color: var(--lb-ink); } .btn-outline-lime { border: 1px solid var(--lb-navy-600); color: var(--lb-white); background: var(--lb-navy-800); } .btn-outline-lime:hover { border-color: var(--lb-lime); color: var(--lb-lime); background: var(--lb-navy-800); } .btn-coral { background: var(--lb-coral); border: 1px solid var(--lb-coral); color: #fff; font-weight: 600; } .btn-coral:hover { background: var(--lb-coral-dark); border-color: var(--lb-coral-dark); color: #fff; } /* ---- Bootstrap tooltips (site-wide) ---------------------------------------- Every [data-bs-toggle="tooltip"] trigger (see initTooltips() in main.js) gets Bootstrap's real tooltip component instead of the native browser one — but without its default triangular arrow/pointer, which is hidden here by zeroing the arrow's size rather than display:none (Popper still reserves space for an arrow of that size when positioning the tooltip, so a hard display:none can leave a gap; 0×0 keeps positioning correct with nothing visible to draw). */ .tooltip .tooltip-arrow { display: none; } .tooltip { --bs-tooltip-bg: var(--lb-navy-800); --bs-tooltip-color: var(--lb-white); } .tooltip .tooltip-inner { font-size: .8rem; font-weight: 500; padding: .4rem .65rem; box-shadow: 0 4px 14px rgba(0,0,0,.18); } /* ========================================================================= HOMEPAGE SHOWCASE — "Featured items" + "Editor's Choice" cards. Replaces the old full-width "lb-hero" banner. Two short, compact cards in one row: a scrollable Featured list (2 items visible at once — vertical swiper on desktop, horizontal 2-up swiper on mobile) and an Editor's Choice image slide (always horizontal). Deliberately kept short — small fixed heights below — so the pair covers very little vertical space on the page. Mobile-first: base rules below are the mobile layout; the lg breakpoint re-arranges for desktop. ========================================================================= */ .lb-showcase { padding-top: var(--lb-space-3); padding-bottom: var(--lb-space-3); } .lb-showcase-row { align-items: stretch; } /* Mobile order: Editor's Choice first, Featured just below it. */ .lb-show-col-editor { order: -1; } .lb-show-col-featured { order: 1; } @media (min-width: 992px) { /* Desktop: back to natural reading order — Featured (left), Editor's Choice (right) — matching the two cards side by side. */ .lb-show-col-featured { order: 1; } .lb-show-col-editor { order: 2; } } .lb-show-card { height: 100%; border-radius: var(--lb-radius-lg); overflow: hidden; position: relative; } /* Editor's Choice card: every part rounds consistently — the outer card itself (already covered by .lb-show-card above) and the inner shelf (.lb-editor-slide-card), which defines its own bottom radius independently of the outer clip since it's a backdrop-filter element (see the long comment on .lb-editor-slide-card below for why that can't just rely on the ancestor's overflow:hidden). */ .lb-show-card-editor .lb-editor-slide-card { border-radius: 0 0 var(--lb-radius-lg) var(--lb-radius-lg); } /* Small "See all" link to the full Editor's Choice archive (editor-choice.php) — every pick ever made, not just whichever slides are currently active in the swiper below it. Positioned above the swiper (z-index) in the card's top-right corner, over the image, same treatment as a chip/pill overlay rather than living in a header row (this card has no .lb-show-card-head like the Featured card next to it — the slide artwork fills the whole card). */ .lb-editor-see-all { position: absolute; top: 10px; right: 10px; z-index: 3; display: inline-flex; align-items: center; gap: .3rem; background: rgba(11, 14, 31, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); /* Literal white, not var(--lb-white) — that variable flips to a dark navy in the default light theme, but this chip always sits on the same fixed dark translucent backdrop above, in both themes. */ color: #FFFFFF; font-size: .72rem; font-weight: 700; letter-spacing: .01em; padding: .3rem .6rem; border-radius: 1rem; text-decoration: none; border: 1px solid rgba(255,255,255,.14); transition: background-color .15s ease, border-color .15s ease; } .lb-editor-see-all:hover { background: rgba(11, 14, 31, .8); border-color: rgba(255,255,255,.28); color: var(--lb-lime); } .lb-editor-see-all i { font-size: .68rem; } /* Full-width variant of the exact same card (editor-choice.php's hero slider) — everything about the slide itself (.lb-editor-slide and friends) is untouched/identical to the homepage version; this class only says "don't inherit the homepage grid column's height:100% (which assumes a sibling Featured-card row to match), just size naturally" since this page has no Featured card next to it to stretch to. */ .lb-show-card-editor-full { height: auto; } /* ---- Featured items card ------------------------------------------- */ .lb-show-card-featured { padding: var(--lb-space-3) var(--lb-space-3) var(--lb-space-2); } .lb-show-card-head { display: flex; flex-direction: column; gap: .1rem; margin-bottom: .5rem; } .lb-show-card-title { font-size: .95rem; font-weight: 700; margin: 0; } /* Each product row inside the Featured swiper — small and compact by design (short fixed height) so 2 rows + gap stay a small, quiet block instead of a tall banner. */ .lb-feat-row { display: flex; align-items: center; gap: .65rem; height: 100%; padding: .35rem .1rem; text-decoration: none; color: inherit; } .lb-feat-row-logo { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; /* Same "contain" fix as .lb-logo above — avoids cropping wide/non-square logos. */ object-fit: contain; background: #fff; padding: 2px; box-sizing: border-box; } .lb-feat-row-body { flex: 1 1 auto; min-width: 0; } .lb-feat-row-name { font-size: .82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .lb-feat-row-tagline { font-size: .72rem; color: var(--lb-mist); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lb-feat-row-btn { flex-shrink: 0; padding: .28rem .75rem; font-size: .72rem; font-weight: 600; } /* Desktop: vertical swiper, exactly 2 rows visible — fixed height keeps the card short regardless of how many Featured products exist. */ .lb-feat-swiper-v { height: 148px; } .lb-feat-swiper-v .swiper-slide { height: calc(50% - 4px); } /* Right-aside Featured/Promoted cards: PROMOTED and FEATURED render as two separate .lb-panel cards (not merged into one), but every panel in this rail uses the slimmer .lb-aside-panel padding (see below) and a noticeably tighter gap between the 2 visible product rows in each swiper (spaceBetween: 2 in main.js, vs. 8 for the hero's own Featured card) plus slimmer row padding — all so the whole rail's stack of cards fits the viewport without needing its own vertical scrollbar. */ .lb-aside-feat-swiper.lb-feat-swiper-v { height: 104px; } .lb-aside-feat-swiper.lb-feat-swiper-v .swiper-slide { height: calc(50% - 1px); } .lb-aside-feat-swiper .lb-feat-row { padding: .18rem .1rem; } /* Slim, shared padding for every card in the right rail (swaps out Bootstrap's .p-3 utility, which can't be overridden without !important) — noticeably less top/bottom room than the default 1rem so the stack of PROMOTED / FEATURED / Trending / This Week cards is short enough to fit without the rail needing its own scrollbar. */ .lb-aside-panel { padding: .75rem .9rem .6rem; } /* Mobile: horizontal swiper, exactly 2 rows visible side by side. */ .lb-feat-swiper-h .swiper-slide { width: 50%; border-right: 1px solid var(--lb-navy-800); } .lb-feat-swiper-h .swiper-slide:last-child { border-right: none; } /* ---- Editor's Choice card ------------------------------------------- A single, contained rounded card (not full-bleed) — landscape shape, deliberately short at every breakpoint (much shorter than the old full-width hero banner), full-bleed background image with a dark gradient for legibility, headline + subtext, and a compact logo/name/tagline/View "app card" shelf along the bottom. Always slides horizontally (direction:'horizontal' in the JS init — never vertical), one slide at a time. ========================================================================= */ .lb-editor-swiper { width: 100%; height: 100%; } .lb-editor-swiper .swiper-wrapper { align-items: stretch; } .lb-editor-swiper .swiper-slide { width: 100%; height: 100%; } .lb-editor-slide { /* Adaptive tint fallback (navy) — overridden per-slide via JS once each slide's background image has loaded (see applyAdaptiveEditorTint() in main.js), which samples the image's dominant color and writes it here as an "R, G, B" triplet. Every tint-based rule below reads this same variable, so the scrim gradient AND the bottom shelf card recolor together, per image, automatically. */ --lb-editor-tint: 8, 10, 24; position: relative; overflow: hidden; display: flex; align-items: flex-end; height: 100%; min-height: 170px; max-height: 190px; text-decoration: none; color: inherit; cursor: pointer; } @media (min-width: 992px) { .lb-editor-slide { min-height: 148px; max-height: 190px; } } .lb-editor-slide-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; pointer-events: none; z-index: 0; transition: transform .6s ease; } .lb-editor-slide:hover .lb-editor-slide-bg { transform: scale(1.03); } /* Per-image adaptive overlay: reads --lb-editor-tint (see .lb-editor-slide above). Rather than a hard cutoff where the tint starts (which reads as a static rectangle sitting on top of the artwork), the tint fades in gradually across a wide band — near-invisible through the top ~22%, easing in through the middle, then fully covering the bottom of the slide — so the edge itself looks soft/blurred rather than like a flat shape with a visible seam. It still bleeds smoothly from there down to a fully opaque wash at the very bottom, reading as one continuous tinted surface behind the text (.lb-editor-slide-inner) and the shelf below it. This element (not text-shadow) is what makes the text legible. */ .lb-editor-slide-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(var(--lb-editor-tint), 0) 0%, rgba(var(--lb-editor-tint), 0) 22%, rgba(var(--lb-editor-tint), .08) 30%, rgba(var(--lb-editor-tint), .28) 38%, rgba(var(--lb-editor-tint), .55) 46%, rgba(var(--lb-editor-tint), .8) 58%, rgba(var(--lb-editor-tint), 1) 100%); } .lb-editor-slide-inner { position: relative; z-index: 1; width: 100%; /* No bottom padding — the app shelf below sits flush against the very bottom edge of the card (its own inner padding supplies the visual breathing room instead), matching the reference design exactly. */ padding: .7rem .85rem 0; display: flex; flex-direction: column; gap: .15rem; } .lb-editor-slide-inner .lb-eyebrow { font-size: .62rem; font-weight: 700; color: #fff; opacity: .92; } .lb-editor-slide-headline { font-size: clamp(.9rem, 2.7vw, 1.1rem); font-weight: 800; color: #fff; line-height: 1.15; margin: 0; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .lb-editor-slide-subtext { font-size: .74rem; color: rgba(255,255,255,.85); margin: 0; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } /* Bottom "app shelf" — a full-bleed bar tinted with the same adaptive color as the overlay above it. It breaks out of .lb-editor-slide-inner's horizontal padding (negative margins matching that padding exactly) so the tinted/blurred background runs edge-to-edge across the whole slide, while its own matching horizontal padding keeps the icon/name row visually aligned with the headline above it. It gets generous bottom padding so the row breathes above the rounded edge. Its bottom corners are rounded here directly (matching --lb-radius-lg) rather than relying solely on the ancestor .lb-show-card's overflow:hidden to clip them — backdrop-filter elements are notorious for ignoring an ancestor's border-radius clip in some browsers, which is what was leaving the bottom corners visibly square. */ .lb-editor-slide-card { position: relative; z-index: 1; display: flex; align-items: center; gap: .6rem; width: calc(100% + 1.7rem); margin-left: -.85rem; margin-right: -.85rem; box-sizing: border-box; margin-top: .55rem; padding: .6rem .85rem .95rem; background: rgba(var(--lb-editor-tint), .9); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); border-radius: 0 0 var(--lb-radius-lg) var(--lb-radius-lg); } /* .lb-editor-slide-card sits INSIDE .lb-editor-slide-inner (right after the headline/subtext, same padded column) — so right above the card there was a small dead gap (inner's own flex gap + the card's margin-top) where only the plain .lb-editor-slide-scrim gradient showed, with nothing bridging it to the card's tint+blur below. That made the blur/tint switch on abruptly right at the card's own top edge instead of reading as one continuous surface. This pseudo-element extends the SAME tint+blur upward to fill exactly that gap, fading in via mask-image (transparent/no-blur where it meets the subtext, full strength where it meets the card) so it bleeds smoothly up into .lb-editor-slide-inner rather than starting with a hard edge. Purely decorative/absolutely positioned, so it doesn't affect layout or clip the headline/subtext text above it. */ .lb-editor-slide-card::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: .9rem; background: rgba(var(--lb-editor-tint), .9); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 100%); mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 100%); pointer-events: none; } .lb-editor-slide-card .lb-logo { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; background: transparent; } .lb-editor-slide-card, .lb-editor-slide-card * { color: #fff !important; } .lb-editor-slide-card .fw-semibold { font-size: .8rem; } .lb-editor-slide-card .btn.btn-lime { padding: .28rem .75rem; font-size: .7rem; font-weight: 700; border-radius: 999px; flex-shrink: 0; color: var(--lb-ink) !important; } /* Compact badge modifier — used to fit a text badge (e.g. "FEATURED") inline in tight single-line rows like .lb-feat-row without wrapping. */ .lb-badge-xs { font-size: .55rem !important; padding: .08rem .4rem !important; letter-spacing: .03em !important; gap: .15rem !important; } .lb-badge-xs i { font-size: .55rem; } .lb-eyebrow { font-family: var(--lb-font-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--lb-lime); } /* ========================================================================= VOTE BUTTON — compact pill, not a bulky box ========================================================================= */ .lb-vote-btn { display: flex; align-items: center; justify-content: center; gap: .3rem; min-width: 52px; height: 40px; padding: 0 .6rem; border: 1px solid var(--lb-navy-700); border-radius: 999px; background: transparent; color: var(--lb-white); cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; user-select: none; } .lb-vote-btn:hover { border-color: var(--lb-lime); } .lb-vote-btn.voted { background: var(--lb-lime); border-color: var(--lb-lime); color: var(--lb-ink); } .lb-vote-btn .bi { font-size: .95rem; } .lb-vote-btn .count { font-family: var(--lb-font-mono); font-weight: 700; font-size: .85rem; } .lb-vote-btn:disabled { opacity: .5; cursor: not-allowed; } /* Larger vote button used solo on product detail sidebar */ .lb-vote-btn.lb-vote-lg { height: 64px; border-radius: var(--lb-radius-md); flex-direction: column; gap: 0; } .lb-vote-btn.lb-vote-lg .count { font-size: 1.05rem; } /* Product-Hunt-style stat pair on the right of a row: comment count (static) + vote button, both stacked icon-over-number, top-aligned with the row. */ .lb-row-stats { display: flex; align-items: flex-start; gap: .4rem; flex-shrink: 0; } .lb-comment-stat { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 52px; height: 40px; padding: 0 .6rem; border: 1px solid var(--lb-navy-700); border-radius: 999px; color: var(--lb-mist); } .lb-comment-stat .bi { font-size: .9rem; line-height: 1; } .lb-comment-stat .count { font-family: var(--lb-font-mono); font-weight: 700; font-size: .85rem; line-height: 1.3; } /* ========================================================================= PRODUCT ROW — minimal list item, border-bottom instead of boxed card. Top-aligned (rank/logo sit at the top of the row, like Product Hunt), not vertically centered — rows vary in height with tagline/meta length. ========================================================================= */ .lb-product-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .85rem; padding: .85rem .25rem; border-bottom: 1px solid var(--lb-navy-800); position: relative; border-radius: var(--lb-radius-sm); transition: background .15s ease; } .lb-product-row:last-child { border-bottom: none; } /* The name+badges block can outgrow the row (e.g. Verified + Featured + Hero + an award medal chip all stacked next to a long product name) — with the default flex-basis:auto, that content's own preferred width is what the *parent* row uses to decide whether it fits on one line, so on narrower viewports the whole row would wrap and knock .lb-row-stats (comment/vote) down below instead of leaving it pinned top-right like the rest of the site. Forcing flex-basis:0 here (on top of the global .min-width-0 fix above) removes this column's content width from that fit calculation entirely — it still grows to fill the remaining space (flex-grow-1) and can still shrink/wrap its own contents, it just never forces the row itself to wrap. */ .lb-product-row > .flex-grow-1.min-width-0 { flex-basis: 0; } /* Gentle hover feedback on every product row across dashboard, my-products, profile, and aside lists — was previously fully static, giving no affordance that the row (or its stretched-link) is interactive. */ .lb-product-row:hover { background: rgba(199,244,100,.045); } [data-theme="dark"] .lb-product-row:hover { background: rgba(199,244,100,.06); } /* "Yesterday / Last Week / Last Month" round-ups on the homepage — sit directly under the main product list inside the same column, separated by a divider instead of relying on outer section spacing (which used to leave a large empty gap when the sidebar was taller than the list). */ .lb-period-section { border-top: 1px solid var(--lb-navy-800); padding-top: var(--lb-space-5, 2rem); } /* Whole row is clickable via a stretched-link anchor; interactive elements inside (vote button, action buttons) sit above it. .lb-admin-row-actions (admin/products.php) has to be listed here too — without it, every Promote/Hero/Verify/"..." click on that page was being swallowed by the stretched-link overlay instead of reaching the button underneath, since stretched-link's ::after otherwise sits above any content that isn't explicitly raised with position+z-index. */ .lb-product-row .lb-vote-btn, .lb-product-row .lb-row-actions, .lb-product-row .lb-admin-row-actions, .lb-product-row .lb-row-stats, .lb-product-row .lb-maker-stack { position: relative; z-index: 2; } /* Status badges (Verified / Featured / Editor's Choice / award medal) sit right next to the stretched-link product-name anchor inside every .lb-product-row (homepage, editor-choice, search, category, profile, … — see product_badges_html() in functions.php). Without their own position+z-index they were being covered by the stretched-link's ::after overlay just like .lb-vote-btn/.lb-row-actions above, so hovering directly over an icon never reached it — the Bootstrap tooltip's mouseenter listener sat on an element the pointer could never actually land on. Raising them the same way lets the data-bs-toggle="tooltip" title on each badge show on hover/focus. */ .lb-product-row .lb-badge-icon, .lb-product-row .lb-badge-verified, .lb-product-row .lb-badge-hero, .lb-product-row .lb-badge-editor-choice, .lb-product-row .lb-badge-award { position: relative; z-index: 2; } /* Per-product action toolbar (my-products.php) — a wrapped horizontal row of compact buttons instead of a tall single-file column. Sits below the product's own info on every width so the row's height tracks its content instead of whichever is taller of (info column) vs. (5-button stack), and so the primary action (Promote) doesn't get visually buried under three secondary ones above it. */ .lb-row-actions { display: flex; flex: 1 1 100%; flex-wrap: wrap; gap: .45rem; margin-top: .65rem; /* Indent to line up under the product info text, not the logo. */ margin-left: calc(44px + .85rem); } @media (max-width: 575.98px) { .lb-row-actions { margin-left: 0; } } .lb-row-actions .btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; } @media (min-width: 576px) { /* Above phone width, right-align the toolbar under the row so it reads as "actions for this item" rather than a full-bleed button bar. */ .lb-row-actions { justify-content: flex-end; } } /* ========================================================================= ADMIN PRODUCT ROW ACTIONS (admin/products.php) — one horizontal, wrapping toolbar instead of a tall stack of full-width buttons. Frequent status actions stay as plain small buttons; Promote/Hero collapse to a single-line combo (select + button) and become a quiet status chip once active; everything else (Editor's Choice, Verify, Delete) lives behind one "more" menu so the row stays scannable at a glance. ========================================================================= */ .lb-admin-row-actions { display: flex; flex: 1 1 100%; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .65rem; margin-left: calc(44px + .85rem); } @media (max-width: 575.98px) { .lb-admin-row-actions { margin-left: 0; } } .lb-action-group { display: flex; flex-wrap: wrap; gap: .45rem; } .lb-admin-row-actions .btn-sm { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; } /* Select + submit joined into a single flat control, no gap between the two pieces so it reads as one compact unit rather than two controls. */ .lb-combo { display: flex; align-items: stretch; height: 31px; border: 1px solid var(--lb-navy-700); border-radius: var(--lb-radius-sm); overflow: hidden; background: transparent; } .lb-combo-select { border: none; border-right: 1px solid var(--lb-navy-700); background: transparent; color: var(--lb-white); font-size: .8rem; padding: 0 .4rem; outline: none; } .lb-combo-select option { background: var(--lb-navy-800); color: var(--lb-white); } .lb-combo-btn { border: none; background: transparent; color: var(--lb-white); font-size: .8rem; font-weight: 600; padding: 0 .65rem; display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; transition: background .15s ease, color .15s ease; } .lb-combo-btn:hover { background: var(--lb-lime); color: var(--lb-ink); } /* Active-state pill for Promote/Hero — a quiet way to show "this is on" with a single tap to turn it back off, instead of a loud coral button. */ .lb-status-chip { display: inline-flex; align-items: center; gap: .4rem; height: 31px; padding: 0 .35rem 0 .7rem; border: 1px solid var(--lb-navy-700); border-radius: var(--lb-radius-sm); background: rgba(199,244,100,.08); color: var(--lb-lime); font-size: .8rem; font-weight: 600; } .lb-chip-x { border: none; background: transparent; color: var(--lb-mist); display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; transition: background .15s ease, color .15s ease; } .lb-chip-x:hover { background: var(--lb-coral); color: #fff; } .lb-kebab-btn { padding-left: .55rem; padding-right: .55rem; } .dropdown-item.text-coral:hover, .dropdown-item.text-coral:focus { background: var(--lb-coral) !important; color: #fff !important; } .lb-rank { font-family: var(--lb-font-mono); color: var(--lb-mist); font-size: .85rem; width: 22px; text-align: center; flex-shrink: 0; padding-top: .5rem; } /* Top-3 rank slot (see rank_badge_html() in functions.php) — the medal emoji replaces the plain "1"/"2"/"3" mono digit; ranks 4+ keep the plain number as before. */ .lb-rank-medal { font-size: 1.35rem; padding-top: .1rem; position: relative; display: flex; flex-direction: column; align-items: center; gap: .2rem; } .lb-rank-medal-icon { line-height: 1; } /* Still-running cycle: widen the narrow rank column just enough to fit a tiny "Provisional" tag stacked directly under the medal, so the "this rank isn't final yet" status reads as part of the medal itself rather than as a separate pill elsewhere in the row. Cyan/sky blue is deliberately unused by any other badge on the site (VERIFIED is blue, PROMOTED/FEATURED are amber/purple, medals are gold/silver/bronze) so "provisional" always reads as its own distinct status at a glance. */ .lb-rank-live { width: 64px; } .lb-rank-live-tag, .lb-badge-provisional { font-size: .5rem; font-weight: 700; letter-spacing: .01em; text-transform: uppercase; color: #fff; background: #000; border-radius: .6rem; padding: .05rem .35rem; line-height: 1.4; white-space: nowrap; display: inline-flex; align-items: center; gap: .15rem; } .lb-rank-live-tag i { font-size: .9em; } /* #1 spot only: a little "pop" on the gold medal itself each time the looping confetti burst fires (triggered from main.js), so the medal feels like part of the celebration rather than just a backdrop for confetti pieces flying past it. The confetti pieces themselves are rendered via the canvas-confetti library (see footer.php) positioned over this element — no extra DOM needed here for them. */ .lb-rank-1.lb-confetti-pop { animation: lb-medal-pop .6s ease; } @keyframes lb-medal-pop { 0% { transform: scale(1); } 30% { transform: scale(1.35); } 60% { transform: scale(0.92); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .lb-rank-1.lb-confetti-pop { animation: none; } } .lb-logo { width: 44px; height: 44px; border-radius: var(--lb-radius-sm); /* "contain" (not "cover") so a wide/rectangular logo is never cropped — it letterboxes inside the box instead of having its edges cut off. The white backdrop is what makes that letterboxing look intentional (like an app-store icon tile) for logos with transparent PNG/SVG backgrounds, and matches regardless of the page's own dark theme. */ object-fit: contain; background: #fff; padding: 2px; box-sizing: border-box; flex-shrink: 0; } /* Product logos/icons are always real uploaded images (never the empty- state placeholder look), so give the itself the circular treatment rather than the box — see .lb-logo above for sizing. */ img.lb-logo { border-radius: 50%; background: #fff; } .lb-badge-featured { background: rgba(199,244,100,0.14); color: var(--lb-lime); font-size: .65rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .15rem .45rem; border-radius: 1rem; } .lb-badge-verified { background: rgba(88,166,255,0.16); color: #58A6FF; font-size: .65rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .15rem .5rem; border-radius: 1rem; display: inline-flex; align-items: center; gap: .2rem; } .lb-badge-promoted { background: rgba(255,183,77,0.16); color: #FFB74D; font-size: .65rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .15rem .5rem; border-radius: 1rem; } .lb-badge-hero { background: rgba(185,140,255,0.18); color: #B98CFF; font-size: .65rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .15rem .5rem; border-radius: 1rem; display: inline-flex; align-items: center; gap: .2rem; } /* Small inline pill for a permanent Editor's Choice pick — same family as .lb-badge-hero/.lb-badge-verified above, used anywhere a product shows up in a compact list row (see product_badges_html() in functions.php), as opposed to the bigger standalone .lb-award-card-editor-choice used on the product page's AWARDS panel / profile Trophy Case / the dedicated /editor-choice listing page. */ .lb-badge-editor-choice { background: rgba(255, 214, 92, 0.18); color: #FFD65C; font-size: .65rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .15rem .5rem; border-radius: 1rem; display: inline-flex; align-items: center; gap: .2rem; } /* Icon-only variant of the Verified / Featured / Editor's Choice badges — combined with the color classes above (e.g. class="lb-badge-verified lb-badge-icon"). Strips the pill chrome (background/padding/uppercase label) down to just the glyph; the label moves into a native Bootstrap tooltip (data-bs-toggle="tooltip" title="...") shown on hover/focus instead of being written out inline. */ .lb-badge-icon { background: transparent; padding: 0; border-radius: 0; font-size: 1.2rem; line-height: 1; cursor: default; } .lb-badge-icon i { line-height: 1; } /* Gradient fills for the Verified / Featured / Editor's Choice glyphs — applied straight to the icon via background-clip:text so it renders as a gradient-colored icon no matter which variant it's nested inside (the compact icon-only .lb-badge-icon rows used across product cards site-wide, or the labeled pill used in the admin panel). Text labels next to the icon (e.g. admin's "VERIFIED" pill text) are unaffected — only the glyph itself picks up the gradient. */ .lb-badge-verified i, .lb-badge-hero i, .lb-badge-editor-choice i { display: inline-block; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .lb-badge-verified i { background-image: linear-gradient(135deg, #7DD3FC 0%, #3B82F6 50%, #1D4ED8 100%); } .lb-badge-hero i { background-image: linear-gradient(135deg, #86EFAC 0%, #22C55E 50%, #15803D 100%); } .lb-badge-editor-choice i { background-image: linear-gradient(135deg, #1A1A1A 0%, #FFD700 45%, #8A6D00 75%, #1A1A1A 100%); } /* Standalone gradient icon utility classes — same three gradients as the badges above, but usable directly on any glyph that isn't wrapped in a .lb-badge-* pill (page headers, empty states, pricing card headings — see editor-choice.php, verify.php, feature.php). */ .lb-icon-gradient-verified, .lb-icon-gradient-hero, .lb-icon-gradient-editor-choice { display: inline-block; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .lb-icon-gradient-verified { background-image: linear-gradient(135deg, #7DD3FC 0%, #3B82F6 50%, #1D4ED8 100%); } .lb-icon-gradient-hero { background-image: linear-gradient(135deg, #86EFAC 0%, #22C55E 50%, #15803D 100%); } .lb-icon-gradient-editor-choice { background-image: linear-gradient(135deg, #1A1A1A 0%, #FFD700 45%, #8A6D00 75%, #1A1A1A 100%); } /* Same black-and-gold treatment for the bigger standalone Editor's Choice trophy icon used on the product page AWARDS panel / profile Trophy Case (.lb-award-card-editor-choice) — scoped so it never touches the plain gold/silver/bronze rank medals, which share the same .lb-award-card-icon container class but aren't Editor's Choice. */ .lb-award-card-editor-choice .lb-award-card-icon i { display: inline-block; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; background-image: linear-gradient(135deg, #1A1A1A 0%, #FFD700 45%, #8A6D00 75%, #1A1A1A 100%); } /* Award medals: #1/#2/#3 Product of the Day/Week/Month recognition. Colored by RANK (universal gold/silver/bronze), not by period type, so a #1 badge looks the same whether it's a daily, weekly, or monthly win — consistent across Today's launches / Yesterday / Last Week / Last Month. */ .lb-badge-award { font-size: .65rem; font-weight: 700; letter-spacing: .02em; text-transform: none; padding: .15rem .55rem; border-radius: 1rem; display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; } .lb-badge-award-rank-1 { background: var(--lb-gold-bg); color: var(--lb-gold); } /* Gold */ .lb-badge-award-rank-2 { background: var(--lb-silver-bg); color: var(--lb-silver); } /* Silver */ .lb-badge-award-rank-3 { background: var(--lb-bronze-bg); color: var(--lb-bronze); } /* Bronze */ /* Live/in-progress medal (today's standings, not locked in yet) — same pill, just a dashed outline and a small broadcast icon so it visibly reads as provisional rather than an official award. */ .lb-badge-award-live { border: 1px dashed currentColor; } .lb-badge-award-live i { font-size: .85em; } /* Larger medal chip used on trophy cases / awards leaderboard */ .lb-medal-chip { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .85rem; border-radius: var(--lb-radius-md); border: 1px solid var(--lb-navy-800); background: var(--lb-navy-900); font-size: .8rem; font-weight: 600; } .lb-medal-chip .lb-medal-emoji { font-size: 1.1rem; line-height: 1; } .lb-medal-rank-1 { border-color: var(--lb-gold-border); } /* Gold */ .lb-medal-rank-2 { border-color: var(--lb-silver-border); } /* Silver */ .lb-medal-rank-3 { border-color: var(--lb-bronze-border); } /* Bronze */ /* Product-detail-page AWARDS panel: full cards (icon, title, date) rather than compact chips, so every award a product has ever won — or is currently on track to win, see get_all_product_awards_with_live() — is clearly laid out one per card. Colored by rank, same gold/silver/bronze palette as everywhere else. Card base is a plain white panel (same idea as the FAQ accordion's card) with the medal color kept only as a soft gradient wash at the top — rather than the tinted color fading into the navy panel background — so the award itself stays the focal point in both themes; dark mode swaps the white base back to a navy one further down. */ .lb-award-card { border: 1px solid var(--lb-navy-600); border-radius: var(--lb-radius-md); background: #FFFFFF; padding: 1.25rem 1rem; text-align: center; height: 100%; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .lb-award-card:hover { transform: translateY(-2px); } .lb-award-card-icon { font-size: 2.1rem; line-height: 1; margin-bottom: .35rem; filter: drop-shadow(0 2px 6px rgba(0,0,0,.15)); } /* Small rank pill ("#1"/"#2"/"#3") sits between the medal and the award-type recognition text below it, colored to match the medal (gold/silver/bronze). */ .lb-award-card-rank { display: inline-block; font-family: var(--lb-font-mono); font-weight: 700; font-size: .7rem; letter-spacing: .03em; padding: .1rem .5rem; border-radius: 1rem; margin-bottom: .45rem; } /* Award-type recognition text — "Launch of the Day/Week/Month" — the main, most prominent line on the card so the period a product won is legible at a glance, not buried in a compact combined title. */ .lb-award-card-title { font-weight: 700; font-size: .92rem; color: var(--lb-white); margin-bottom: .3rem; line-height: 1.25; } .lb-award-card-date { font-size: .75rem; color: var(--lb-mist); } .lb-award-card-live-tag { display: inline-block; margin-left: .35rem; font-size: .65rem; font-weight: 700; letter-spacing: .02em; padding: .05rem .4rem; border-radius: 1rem; border: 1px dashed currentColor; } .lb-award-card-rank-1 { border-color: var(--lb-gold-border); background: linear-gradient(180deg, var(--lb-gold-bg) 0%, #FFFFFF 70%); } .lb-award-card-rank-1:hover { box-shadow: 0 8px 22px -10px var(--lb-gold-border); } .lb-award-card-rank-1 .lb-award-card-rank { background: var(--lb-gold-bg); color: var(--lb-gold); } .lb-award-card-rank-1 .lb-award-card-live-tag { color: var(--lb-gold); } .lb-award-card-rank-2 { border-color: var(--lb-silver-border); background: linear-gradient(180deg, var(--lb-silver-bg) 0%, #FFFFFF 70%); } .lb-award-card-rank-2:hover { box-shadow: 0 8px 22px -10px var(--lb-silver-border); } .lb-award-card-rank-2 .lb-award-card-rank { background: var(--lb-silver-bg); color: var(--lb-silver); } .lb-award-card-rank-2 .lb-award-card-live-tag { color: var(--lb-silver); } .lb-award-card-rank-3 { border-color: var(--lb-bronze-border); background: linear-gradient(180deg, var(--lb-bronze-bg) 0%, #FFFFFF 70%); } .lb-award-card-rank-3:hover { box-shadow: 0 8px 22px -10px var(--lb-bronze-border); } .lb-award-card-rank-3 .lb-award-card-rank { background: var(--lb-bronze-bg); color: var(--lb-bronze); } .lb-award-card-rank-3 .lb-award-card-live-tag { color: var(--lb-bronze); } /* Editor's Choice — a permanent, curatorial award (see record_editor_choice_award() in functions.php) rather than a votes-ranked #1/#2/#3 medal, so it gets its own purple treatment and a "CURATED" pill instead of a rank number. */ .lb-award-card-editor-choice { border-color: var(--lb-curated-border); background: linear-gradient(180deg, var(--lb-curated-bg) 0%, #FFFFFF 70%); } .lb-award-card-editor-choice:hover { box-shadow: 0 8px 22px -10px var(--lb-curated-border); } .lb-award-card-editor-choice .lb-award-card-rank { background: var(--lb-curated-bg); color: var(--lb-curated); } .lb-award-card-editor-choice .lb-award-card-icon { color: var(--lb-curated); } /* Dark mode: swap the white card base back to the navy panel tone (same swap the FAQ accordion doesn't need, since it never had a white base to begin with) — the gradient wash at the top is unchanged. */ [data-theme="dark"] .lb-award-card { background: var(--lb-navy-800); } [data-theme="dark"] .lb-award-card-rank-1 { background: linear-gradient(180deg, var(--lb-gold-bg) 0%, var(--lb-navy-800) 70%); } [data-theme="dark"] .lb-award-card-rank-2 { background: linear-gradient(180deg, var(--lb-silver-bg) 0%, var(--lb-navy-800) 70%); } [data-theme="dark"] .lb-award-card-rank-3 { background: linear-gradient(180deg, var(--lb-bronze-bg) 0%, var(--lb-navy-800) 70%); } [data-theme="dark"] .lb-award-card-editor-choice { background: linear-gradient(180deg, var(--lb-curated-bg) 0%, var(--lb-navy-800) 70%); } /* Product name/link under the date — only used on the profile Trophy Case tab, where (unlike the single-product AWARDS panel this markup is otherwise shared with) cards can belong to several different products. */ .lb-award-card-product { margin-top: .35rem; padding-top: .35rem; border-top: 1px dashed var(--lb-navy-800); font-size: .72rem; font-weight: 600; color: var(--lb-mist); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } a:hover .lb-award-card-product { color: var(--lb-lime); } /* Awards leaderboard page rows */ .lb-award-row { transition: border-color .15s ease, transform .15s ease; } .lb-award-row:hover { transform: translateY(-1px); } .lb-award-rank-emoji { font-size: 1.8rem; line-height: 1; flex-shrink: 0; width: 2.2rem; text-align: center; } .lb-award-rank-1 { border-color: var(--lb-gold-border); } /* Gold */ /* Rating summary card at the top of the product page's RATING section — mobile-first: the big-number/stars block and the 5→1 star distribution bars stack full-width by default (col-12) and only sit side by side from the sm breakpoint up (see the col-sm-4 / col-sm-8 split in product/view.php), so it reads cleanly on a phone before anything else. */ .lb-rating-summary-score { font-size: 2.75rem; font-weight: 800; color: var(--lb-white); line-height: 1; } .lb-rating-bar-row { display: flex; align-items: center; gap: .6rem; } .lb-rating-bar-row + .lb-rating-bar-row { margin-top: .4rem; } .lb-rating-bar-label { flex-shrink: 0; width: 1.1rem; font-size: .78rem; font-weight: 700; color: var(--lb-mist); text-align: right; } /* "Thin" is the point — a slim 6px track, not a bulky default progress bar. */ .lb-rating-bar-track { flex-grow: 1; height: 6px; border-radius: 999px; background: var(--lb-navy-800); overflow: hidden; } .lb-rating-bar-fill { height: 100%; border-radius: 999px; background: var(--lb-lime); } .lb-rating-bar-count { flex-shrink: 0; width: 2.4rem; font-size: .75rem; color: var(--lb-mist); text-align: right; } .lb-award-rank-2 { border-color: var(--lb-silver-border); } /* Silver */ .lb-award-rank-3 { border-color: var(--lb-bronze-border); } /* Bronze */ /* Dashed border marks it as a paid placement — deliberately no extra horizontal padding beyond the base .lb-product-row's, so the logo, name, and stats all line up in exactly the same columns as every organic row above/below it instead of looking indented/offset. A very light amber gradient (same hue as the PROMOTED badge) gives it a subtle "sponsored" tint without looking like a jarring ad block. */ .lb-promoted-row { border: 1px dashed rgba(255,183,77,0.35); border-radius: var(--lb-radius-sm); background: linear-gradient(135deg, rgba(255,183,77,0.08), rgba(255,183,77,0.02) 60%); } .lb-promoted-row:hover { background: linear-gradient(135deg, rgba(255,183,77,0.12), rgba(255,183,77,0.04) 60%); } /* Empty leading spacer (no rank number — promoted rows aren't organically ranked) so the logo/name/stats columns still line up with the organic rows around it instead of the logo sitting further left than everyone else's. */ .lb-promoted-row .lb-rank { width: 22px; } /* Standalone variant used when a Promoted card is shown on its own inside its own panel (the product detail page's two Promoted placements) rather than woven into a list of other rows. Carries the same flex layout/padding/interactive-layering .lb-product-row normally provides, without the list-row border-bottom divider or grey hover tint that only make sense stacked between other rows in a feed — the dashed border + amber tint above already give it plenty of presence on its own. */ .lb-promoted-row.lb-promoted-standalone { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .85rem; padding: .85rem; position: relative; } .lb-promoted-row.lb-promoted-standalone > .flex-grow-1.min-width-0 { flex-basis: 0; } .lb-promoted-row.lb-promoted-standalone .lb-vote-btn, .lb-promoted-row.lb-promoted-standalone .lb-row-stats, .lb-promoted-row.lb-promoted-standalone .lb-maker-stack { position: relative; z-index: 2; } /* Minimal variant (product detail page's own Promoted placement — see render_promoted_row()'s $minimal param): centers the logo/name/tagline against the "Visit {Name}" button on the cross axis, so the button sits at the vertical middle of the card on the right rather than pinned to the top like the stats column in the full card. */ .lb-promoted-row-minimal { align-items: center; } .lb-promoted-visit-btn { white-space: nowrap; pointer-events: none; /* clicks pass through to the row's data-promo-go handler instead of the button intercepting them */ background: var(--lb-navy-950); /* true white in light mode, true dark in dark mode */ } .lb-tag { background: transparent; border: 1px solid var(--lb-navy-700); color: var(--lb-mist); font-size: .72rem; padding: .12rem .5rem; border-radius: 1rem; display: inline-block; } /* Clickable tags (product page "about" tags -> /tag?slug=…) */ a.lb-tag-link { text-decoration: none; transition: border-color .15s, color .15s; } a.lb-tag-link:hover, a.lb-tag-link:focus-visible { border-color: var(--lb-lime); color: var(--lb-lime); } /* Landing page/section anchor so the sticky topbar never covers the top of the list when jumped/scrolled to (see #today-list + initSortScroll() in main.js). */ #today-list { /* Was topbar-height-only, but the category pill bar (.lb-cat-wrap) also sticks just below the topbar on this page — without accounting for it too, the Today/Top/Upcoming buttons below would scroll the list up underneath the category bar instead of stopping right below it. --lb-cat-h is the bar's real measured height (see main.js), falling back to a reasonable estimate before JS has run/measured it. */ scroll-margin-top: calc(var(--lb-topbar-h) + var(--lb-cat-h, 52px) + .75rem); } /* ---- Next-launch countdown (homepage "Upcoming" button + list panel) ---- */ .lb-countdown-badge { display: inline-block; margin-left: .3rem; padding: .05rem .4rem; border-radius: 1rem; font-family: var(--lb-font-mono); font-size: .68rem; background: rgba(0,0,0,.15); } .btn-outline-lime .lb-countdown-badge { border: 1px solid currentColor; } .btn-lime .lb-countdown-badge { background: rgba(11,14,31,.15); } .lb-countdown-panel { border: 1px dashed var(--lb-navy-700); } .lb-countdown-big { font-size: 1.05rem; font-weight: 700; letter-spacing: .02em; } .lb-countdown-live { color: var(--lb-coral) !important; } /* Category pill nav — quiet, horizontal scroll on mobile */ .lb-category-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .85rem; border-radius: 999px; border: 1px solid var(--lb-navy-800); color: var(--lb-mist); font-size: .82rem; white-space: nowrap; } .lb-category-pill.active, .lb-category-pill:hover { border-color: var(--lb-lime); color: var(--lb-lime); } /* Panels used sparingly now — forms, stat boxes, key surfaces only */ .lb-panel { background: var(--lb-navy-900); border: 1px solid var(--lb-navy-800); border-radius: var(--lb-radius-lg); } /* Makers directory card (see makers.php) — whole card is a stretched-link to that maker's profile, so give it the same subtle hover lift as other clickable panels on the site. */ .lb-maker-card { position: relative; z-index: 1; transition: border-color .15s ease, transform .15s ease; } .lb-maker-card:hover { border-color: var(--lb-lime); transform: translateY(-2px); } /* Every .lb-maker-card sits at the same z-index (1), so with the ":hover" transform above forming its own stacking context, cards still paint in plain DOM order — meaning a card's open "..." dropdown menu (which drops DOWN and overlaps the next card below it) was getting visually covered by that next card, since it comes later in the DOM and therefore paints on top by default. Raising z-index while hovered/focused (the dropdown toggle keeps focus while its menu is open) — or while its menu is actually open, for keyboard/no-hover cases — lifts the whole card above its neighbors so items like ".lb-block-btn" stay visible on hover. */ .lb-maker-card:hover, .lb-maker-card:focus-within, .lb-maker-card:has(.dropdown-menu.show) { z-index: 20; } /* ========================================================================= PRODUCT PAGE QUICK-JUMP SUB-NAV — TOP / LINKS / BUILT WITH / MAKER / RATING / COMMENTS, sticks flush against the bottom of the main topbar (top: 0 relative to it, no gap) once scrolled to (see product/view.php). The sticky positioning lives on the OUTER wrap (.lb-subnav-wrap), not on the scrollable nav pill row itself — putting position:sticky on an element that also has overflow-x:auto is the classic way to end up with a sub-nav that silently refuses to stick in some browsers. The wrap also explicitly gets its own z-index so it forms a stacking context: that's what guarantees the prev/next arrow buttons (z-index 5) always paint above the nav row (z-index: auto) instead of getting tucked underneath its opaque background. ========================================================================= */ .lb-subnav-wrap { position: sticky; /* Stick just below the main navbar, like the original script. The hero section's 20px gap sits BELOW this, not affected by sticky positioning — they're independent. */ top: var(--lb-topbar-h); z-index: 1020; } @media (min-width: 992px) { /* Contained/rounded pill-bar look (below) is the DEFAULT, in-flow appearance. Once actually pinned under the topbar — .is-stuck, toggled by the same watchStickyState() IntersectionObserver helper used for the homepage category bar, watching #lbSubnavSentinel — it switches to the connected, edge-to-edge look: breaks out of `.lb-docked-main` by one shell gap on each side to land flush against the left panel's border-right and (xl+) the right panel's border-left, no radius, bottom border only. Same technique as .lb-cat-wrap.is-stuck in the CATEGORY PILL BAR block below — see the comment there for why this is a fixed-gap breakout and not the mobile block's 100vw viewport trick. */ .lb-subnav-wrap.is-stuck { width: calc(100% + var(--lb-space-6) * 2); margin-left: calc(-1 * var(--lb-space-6)); margin-right: calc(-1 * var(--lb-space-6)); padding-left: var(--lb-space-6); padding-right: var(--lb-space-6); } .lb-subnav-wrap.is-stuck .lb-product-subnav { border-radius: 0; border: 0; border-bottom: 1px solid var(--lb-navy-800); background: rgba(var(--lb-navy-950-rgb), .92); } } @media (max-width: 991.98px) { /* On mobile with a hero video, same behavior — stick at topbar height. */ .lb-hero-gap-video .lb-subnav-wrap { top: var(--lb-topbar-h); } /* Full-bleed on mobile only: break out of the column/container padding so the bar spans the entire viewport edge-to-edge starting at the device's left edge, no matter how deeply nested it is inside centered/padded parents. Desktop keeps the original contained/rounded look below. */ .lb-subnav-wrap { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .lb-product-subnav { border-left: none; border-right: none; border-radius: 0px!important; } } .lb-product-subnav { display: block; width: 100%; background: rgba(var(--lb-navy-950-rgb), .92); backdrop-filter: blur(10px); border: 1px solid var(--lb-navy-800); border-radius: var(--lb-radius-lg); padding: .7rem 1.5rem; overflow: hidden; } /* Extra side padding while the prev/next arrows are actually showing (see updateSubnavArrows() in product/view.php) — the 28px arrow button plus its 6px offset needs more clearance than the row's normal 1.5rem side padding, or it sits on top of the first/last pill link on any screen size, not just mobile. */ .lb-product-subnav.lb-subnav-has-arrows { padding-left: 2.5rem; padding-right: 2.5rem; } .lb-product-subnav .swiper-wrapper { align-items: center; /* No CSS `gap` here on purpose — same as the homepage category pill bar's .lb-category-swiper (see main.js), which has no matching CSS gap rule either. Swiper's own `spaceBetween: 8` JS param (product/view.php) is the ONLY source of spacing between slides. A CSS flex `gap` here "worked" visually but silently desynced Swiper's internal width math from the real rendered row: Swiper computed each slide's total size using ITS OWN spaceBetween value, with no idea the browser was also inserting a wider `gap` between them, so its overflow detection (isLocked/isBeginning/isEnd, driving the prev/next chevrons) measured a virtualSize that was too small to ever equal the real, wider, actually-overflowing row. Net effect: the row visibly overflowed and cut content off the right edge, but the chevrons never appeared to reveal it. Letting spaceBetween be the single source of truth (exactly like lb-cat-inner) keeps Swiper's math and the real layout in sync. */ } .lb-product-subnav .swiper-slide { flex-shrink: 0; } .lb-subnav-link { flex-shrink: 0; color: var(--lb-mist); font-family: var(--lb-font-mono); font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-decoration: none; padding: .3rem .1rem; border-bottom: 2px solid transparent; transition: color .15s ease, border-color .15s ease; } .lb-subnav-link:hover { color: var(--lb-white); } .lb-subnav-link.active { color: var(--lb-white); border-color: var(--lb-lime); } .lb-subnav-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--lb-navy-800); border: 1px solid var(--lb-navy-700); color: var(--lb-white); font-size: .7rem; cursor: pointer; z-index: 5; box-shadow: 0 2px 8px rgba(0,0,0,.35); } .lb-subnav-arrow:hover { background: var(--lb-lime); color: var(--lb-ink); border-color: var(--lb-lime); } .lb-subnav-arrow-prev { left: 6px; } .lb-subnav-arrow-next { right: 6px; } /* Offsets so anchor jumps land below the sticky topbar + sub-nav instead of right underneath them. --lb-subnav-h is the sub-nav's real measured height (see main.js), falling back to the old ~2.5rem estimate before JS has run/measured it. */ #lb-top, #lb-about, #lb-links, #lb-built-with, #lb-pricing, #lb-awards, #lb-maker, #lb-rating, #lb-comments { scroll-margin-top: calc(var(--lb-topbar-h) + var(--lb-subnav-h, 2.5rem) + .5rem); } .lb-stat { font-family: var(--lb-font-mono); font-size: 1.4rem; font-weight: 700; color: var(--lb-white); } /* ========================================================================= HOMEPAGE CATEGORY PILL BAR — sticks flush under the topbar once scrolled to (top: var(--lb-topbar-h), same offset as the product sub-nav above), but only SWITCHES to the connected, edge-to-edge look once it's actually pinned there — the .is-stuck class toggled by an IntersectionObserver watching #lbCatSentinel, the zero-height marker placed immediately before this section in index.php (same "sentinel above a sticky element" technique, just detecting the stuck state instead of scroll position — see the shared watchStickyState() helper in main.js). Before it's stuck, this is just the normal contained/padded section from the reference layout. Once stuck, it breaks out of `.lb-docked-main`'s own bounds by exactly one shell gap (var(--lb-space-6)) on each side — NOT a viewport-relative 100vw trick like the mobile sub-nav uses, since here the two "edges" to reach are the fixed left/right panels a fixed px gap away, not the browser window — landing flush against the left panel's border-right and (at xl+) the right panel's border-left with no radius, just a bottom border, exactly like a single continuous seam. */ .lb-cat-wrap { position: sticky; top: var(--lb-topbar-h); z-index: 1015; transition: background-color .15s ease; } .lb-cat-inner { position: relative; } /* Base (mobile-first) stuck look: a solid/blurred backdrop + hairline once pinned, so page content scrolling underneath doesn't show through it — previously this background was defined ONLY inside the min-width:992px query below, so on phones/tablets the pinned bar stayed fully transparent while stuck. The desktop query now only adds the extra edge-to-edge breakout mechanics on top of this. */ section.lb-cat-wrap.is-stuck { background: rgba(var(--lb-navy-950-rgb), .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--lb-navy-800); } @media (min-width: 992px) { section.lb-cat-wrap.is-stuck { width: calc(100% + var(--lb-space-6) * 2) !important; margin-left: calc(-1 * var(--lb-space-6)) !important; margin-right: calc(-1 * var(--lb-space-6)) !important; padding-left: var(--lb-space-6) !important; padding-right: var(--lb-space-6) !important; border-radius: 0 !important; } } /* Uniform icon + label + number stat card (admin overview, dashboard, etc.) — flex layout keeps the icon, label and number vertically aligned across cards of different content lengths. */ .lb-stat-card { display: flex; align-items: center; gap: .9rem; transition: border-color .15s ease, transform .15s ease; } .lb-stat-card-icon { flex-shrink: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: var(--lb-radius-md); background: rgba(199,244,100,.1); color: var(--lb-lime); font-size: 1.2rem; } .lb-stat-card-body { min-width: 0; } .lb-stat-card-body .lb-stat { line-height: 1.15; } a.lb-stat-card-link { text-decoration: none; display: block; } a.lb-stat-card-link:hover .lb-panel { border-color: var(--lb-lime); transform: translateY(-2px); } a.lb-stat-card-link:hover .lb-stat-card-icon { background: rgba(199,244,100,.18); } .form-label { color: var(--lb-white); opacity: .75; font-weight: 500; font-size: .85rem; } /* ---- Inputs, textareas, selects & buttons — site-wide, theme-aware -------- Applies everywhere (not just the product forms), and reads the same --lb-* variables everything else does, so it automatically matches whichever theme (light/dark — see [data-theme="dark"] above) is active instead of a fixed color. The field itself sits one step lighter than its surrounding panel in both themes so it always reads as an input well rather than blending into the page. */ .form-control, .form-select, textarea.form-control, .lb-tag-input { background-color: var(--lb-navy-800); border: 1px solid var(--lb-navy-600); color: var(--lb-white); } .form-control:focus, .form-select:focus, .lb-tag-input:focus-within { background-color: var(--lb-navy-800); border-color: var(--lb-lime); color: var(--lb-white); box-shadow: 0 0 0 .15rem rgba(199,244,100,.15); } .form-control::placeholder { color: var(--lb-mist); opacity: .7; } .form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--lb-navy-900); color: var(--lb-mist); opacity: .8; } /* Bootstrap's own gray outline/secondary button colors don't come from our theme variables, so left alone they stay a fixed mid-gray that's low-contrast in dark mode and slightly flat in light mode — this re-points them at --lb-mist / --lb-navy so they match the rest of the UI in both themes. */ .btn-outline-secondary { --bs-btn-color: var(--lb-mist); --bs-btn-border-color: var(--lb-navy-600); --bs-btn-hover-bg: var(--lb-navy-800); --bs-btn-hover-border-color: var(--lb-navy-600); --bs-btn-hover-color: var(--lb-white); --bs-btn-active-bg: var(--lb-navy-800); --bs-btn-active-border-color: var(--lb-navy-600); --bs-btn-active-color: var(--lb-white); --bs-btn-disabled-color: var(--lb-mist); --bs-btn-disabled-border-color: var(--lb-navy-700); } .btn-secondary { --bs-btn-bg: var(--lb-navy-800); --bs-btn-border-color: var(--lb-navy-600); --bs-btn-color: var(--lb-white); --bs-btn-hover-bg: var(--lb-navy-700); --bs-btn-hover-border-color: var(--lb-navy-600); --bs-btn-hover-color: var(--lb-white); --bs-btn-active-bg: var(--lb-navy-700); --bs-btn-active-color: var(--lb-white); } /* Bootstrap's .btn-close is a dark glyph baked into the SVG — invisible against a dark background, so it needs inverting in dark mode everywhere (previously only handled for the offcanvas). */ [data-theme="dark"] .btn-close { filter: invert(1) grayscale(1); } /* ---- Image upload dropzones & cards (product submit/edit) ------------------- Same --lb-navy-800/--lb-navy-600 tokens as .form-control, so an empty upload slot reads as the same kind of "field" a text input is, in both themes. */ .lb-upload-dropzone { position: relative; border: 2px dashed var(--lb-navy-600); border-radius: var(--lb-radius-md); background: var(--lb-navy-800); cursor: pointer; transition: border-color .15s ease, background .15s ease; } .lb-upload-dropzone:hover, .lb-upload-dropzone:focus-visible { border-color: var(--lb-lime); } .lb-upload-dropzone.lb-dragover { border-color: var(--lb-lime); background: rgba(199,244,100,.06); } .lb-upload-dropzone-logo { max-width: 220px; } .lb-upload-dropzone-thumbnail { max-width: 400px; } .lb-upload-card { position: relative; aspect-ratio: 1 / 1; border-radius: var(--lb-radius-md); overflow: hidden; background: var(--lb-navy-800); border: 1px solid var(--lb-navy-600); } .lb-upload-card-wide { aspect-ratio: 16 / 9; } .lb-upload-card img { width: 100%; height: 100%; object-fit: cover; display: block; } .lb-upload-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .65rem; } .lb-upload-mini-card { position: relative; aspect-ratio: 1 / 1; border-radius: var(--lb-radius-sm); overflow: hidden; border: 1px solid var(--lb-navy-600); background: var(--lb-navy-800); } .lb-upload-mini-card img { width: 100%; height: 100%; object-fit: cover; display: block; } .lb-upload-remove { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; background: rgba(11,14,31,.85); color: #fff; border: none; display: flex; align-items: center; justify-content: center; font-size: .7rem; z-index: 2; } .lb-upload-remove:hover { background: var(--lb-coral); } /* ---- Inline field validation feedback ---------------------------------------- */ .lb-field-feedback { font-size: .78rem; margin-top: .3rem; min-height: 0; } .lb-field-feedback.lb-field-ok { color: var(--lb-lime); } .lb-field-feedback.lb-field-error { color: var(--lb-coral); } .form-control.lb-input-invalid, .form-select.lb-input-invalid { border-color: var(--lb-coral); } .form-check-input.lb-input-invalid { border-color: var(--lb-coral); box-shadow: 0 0 0 1px var(--lb-coral); } .lb-tag-input.lb-input-invalid { border-color: var(--lb-coral); } /* ---- Shareable stats card preview (Fabric.js) — product/view.php --------- This