/* blogs-mobile.css — compact mobile reading layout for the /blogs hub. * * DESKTOP IS UNCHANGED. Two independent gates guarantee it: * - the layout rules are scoped to `.tcm-on`, a class that js/blogs-mobile.js * adds to ONLY when the page loaded at <=768px; * - the remaining rules sit inside @media (max-width: 768px). * The intentionally carries NO media attribute: a phone that loads in * portrait (<=768px, so .tcm-on is set and the card art is deleted) can rotate * to landscape and exceed 768px — a width-gated sheet would strip the compact * layout off cards that no longer have any art. Verified 2026-08-14: a 1280px * desktop load sets tcm-on=false, injects 0 tiles, keeps all 1257 art nodes and * all 37,145 DOM nodes, and leaves cards at display:flex in a 3-column grid. * * Why this file exists (audit 2026-08-14): * The hub ships 922 lesson cards, each carrying a baked 1200x630 inline SVG * hero (~37,000 DOM nodes total). On a phone that means a full-width hero per * card -> roughly ONE card per screen, plus a DOM heavy enough to stall the * renderer. On mobile we trade the decorative hero for a small vendor tile * and a compact row, so a reader sees ~4-5 lessons per screen. * * Companion: /js/blogs-mobile.js (removes the art nodes + sets --tcm-top). * Everything here is scoped to .tcm-on, a class the JS puts on only when * the mobile layout is actually active. */ @media (max-width: 768px) { /* --------------------------------------------------------------------- 1. Sticky search bar — self-positioning. blogs.html hardcodes `top:56px`, but the real top chrome is .tc-banner (fixed, ~38px) + nav.navbar (fixed, ~64px). The bar was sliding under the header. --tcm-top is measured at runtime by the JS; the 104px fallback keeps it usable if JS never runs. --------------------------------------------------------------------- */ .blog-search-bar { top: var(--tcm-top, 104px) !important; background: rgba(8, 8, 14, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* Anchor jumps (chips -> results) must clear the header + sticky bar. */ #guides, #blogGuidesGrid, .bv2-section { scroll-margin-top: calc(var(--tcm-top, 104px) + 96px); } /* Result count is announced politely; give it room to be read. */ .bsb-count { font-variant-numeric: tabular-nums; } /* Chips: guarantee a 44px touch target (WCAG 2.5.8) without changing the existing horizontal-scroll behaviour already defined in blogs.html. */ .bsb-chips button, .bsb-chip { min-height: 44px !important; display: inline-flex !important; align-items: center; } /* Edge-to-edge scroll strip should not clip the first/last chip. */ .bsb-chips { scroll-padding-inline: 10px; } } /* end @media — card rules below are keyed on .tcm-on instead of width */ /* ------------------------------------------------------------------------- 2. Compact lesson cards. Deliberately NOT inside a width media query. `.tcm-on` is added by the JS only when the page LOADED at <=768px, and the JS has by then already deleted the card art nodes. If these rules were width-gated, widening the window past 768px would drop back to the desktop card design on cards that no longer have any art -- i.e. visibly broken empty cards. Keying on .tcm-on keeps the compact layout coherent at any width once it is active. A true desktop load (>768px) never sets .tcm-on, so none of this applies there and the desktop design is untouched. ------------------------------------------------------------------------- */ .tcm-on .bv2-grid { gap: 10px !important; } /* The decorative hero is dropped on phones. The JS removes the node outright; this rule is the no-JS / mid-load fallback. */ .tcm-on .bv2-card-art, .tcm-on .bv2-card-art-placeholder { display: none !important; } /* NOTE: `display` must NOT be !important here. blog-filter-troubleshooting-f5.js paginates by setting an INLINE `display:none` on out-of-window cards, and a stylesheet !important would outrank that inline value -- which un-paginates the hub and makes it ~230 screens tall. The (0,2,0) specificity of `.tcm-on .bv2-card` is already enough to beat the base `.bv2-card` rules, while still letting the filter's inline none win. */ .tcm-on .bv2-card { display: grid; grid-template-columns: 46px minmax(0, 1fr); grid-template-areas: "tile body"; gap: 12px; align-items: start; padding: 13px 14px !important; border-radius: 14px !important; /* Skip rendering work for off-screen cards while keeping them in the DOM for search/filter. The size hint prevents scrollbar jumping. */ content-visibility: auto; contain-intrinsic-size: auto 132px; } .tcm-on .bv2-card-body { grid-area: body; min-width: 0; /* lets the 1fr track actually shrink so text can ellipsize */ padding: 0 !important; } /* Vendor tile — built by the JS from the card's own eyebrow text. Keeps brand identity at a size that is still legible, unlike a 72px thumbnail of a 1200x630 poster (which reads as mush). */ .tcm-on .tcm-vtile { grid-area: tile; width: 46px; height: 46px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font: 800 13px/1 "Inter", system-ui, sans-serif; letter-spacing: 0.02em; color: #fff; text-transform: uppercase; background: linear-gradient(150deg, var(--tcm-v1, #3f3f52), var(--tcm-v2, #23232f)); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); flex: none; user-select: none; } /* Two-character marks (PA, FG, F5) need slightly more room than three. */ .tcm-on .tcm-vtile[data-len="3"] { font-size: 11px; } .tcm-on .tcm-vtile[data-len="4"] { font-size: 9.5px; } .tcm-on .bv2-card-title { font-size: 0.95rem !important; line-height: 1.32 !important; margin: 2px 0 4px !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* The eyebrow (`F5 · BIG-IP LTM · Cheatsheet`) is the strongest scanning signal on a small screen — keep it, but one line only. */ .tcm-on .tcm-eyebrow { font-size: 11px !important; line-height: 1.3 !important; margin: 0 !important; letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tcm-on .bv2-card-excerpt:not(.tcm-eyebrow) { font-size: 0.82rem !important; line-height: 1.45 !important; margin: 0 !important; -webkit-line-clamp: 2 !important; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .tcm-on .bv2-card-foot { margin-top: 8px !important; padding-top: 8px !important; gap: 8px; font-size: 11px; } .tcm-on .bv2-card-foot-cta { white-space: nowrap; } /* Hover lift is meaningless on touch and costs a repaint on every tap. */ .tcm-on .bv2-card { transition: none !important; transform: none !important; } .tcm-on .bv2-card:active { background: rgba(255, 255, 255, 0.05); } /* --------------------------------------------------------------------- 3. "Show more" control — full-width and thumb-reachable. --------------------------------------------------------------------- */ .tcm-on #bsbLoadMoreWrap { padding: 4px 14px 8px; } .tcm-on #bsbLoadMore { width: 100%; min-height: 48px; } /* Visible keyboard/AT focus, which the inline button styles drop. */ .tcm-on #bsbLoadMore:focus-visible, .tcm-on .bv2-card:focus-visible { outline: 2px solid #ff9d3c; outline-offset: 2px; } /* Users who ask for less motion get none of the card transitions either. */ @media (prefers-reduced-motion: reduce) { .tcm-on .bv2-card, .tcm-on .bv2-rise { animation: none !important; transition: none !important; } }