/* ========================================================================== Blog hub v2 — marketing-site redesign (Blog Hub.dc.html) Loaded only by _layouts/blog-hub-v2.html on top of v2-core.css. All new classes are bhubv2-* so parallel v2 templates never collide. ========================================================================== */ /* Page header band */ .bhubv2-head { border-bottom: 1px solid #EDEFF4; background: #F6F8FC; } .bhubv2-head__inner { max-width: 1120px; margin: 0 auto; padding: 32px 24px 34px; } .bhubv2-head .tv2-breadcrumb { margin-bottom: 22px; } .bhubv2-eyebrow { margin: 0 0 14px; font: 500 12px/1 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: #5A6478; } .bhubv2-h1 { margin: 0 0 14px; font-size: clamp(28px, 4.4vw, 40px); line-height: 1.1; font-weight: 500; color: #14203A; letter-spacing: -.02em; max-width: 24ch; text-wrap: balance; } .bhubv2-lede { margin: 0; font-size: 18px; line-height: 1.6; color: #414B5E; max-width: 62ch; text-wrap: pretty; } /* Articles section */ .bhubv2-articles { padding: 44px 0 56px; scroll-margin-top: 16px; } .bhubv2-sub { margin: 0 0 24px; font-size: 17px; line-height: 1.6; color: #414B5E; max-width: 66ch; } .bhubv2-toolbar { display: flex; align-items: center; gap: 14px 20px; flex-wrap: wrap; margin: 0 0 28px; padding-bottom: 22px; border-bottom: 1px solid #DFE3EA; } .bhubv2-search { display: flex; align-items: center; gap: 10px; flex: 1 1 320px; max-width: 420px; min-width: 0; border: 1.5px solid #DFE3EA; border-radius: 6px; padding: 10px 14px; background: #fff; } .bhubv2-search:focus-within { border-color: #1257E8; } .bhubv2-search[hidden] { display: none; } .bhubv2-search svg { width: 17px; height: 17px; flex: none; display: block; } .bhubv2-search input { border: 0; outline: 0; padding: 0; min-width: 0; flex: 1 1 auto; font: 400 16px 'Circular', 'Circular Std', 'Helvetica Neue', Arial, sans-serif; color: #14203A; background: transparent; } /* ── Focus ring ─────────────────────────────────────────────────────────────── The WRAPPER carries the focus ring (the border above). The input's own must not draw as well, or the box shows two rings: a rounded blue border and a sharp blue rectangle inside it (Guy, 2026-09-10: "that same annoying double outline"). ⛔ SPECIFICITY, and the reason the 2026-09-04 attempt at this was INERT. The rule being overridden is v2-core.css: .tv2 :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select):focus-visible { outline: 1px solid #1257E8; … } `:is()` takes the specificity of its most specific argument, and that argument is `input` plus THREE attribute selectors inside `:not()`, so the whole selector computes to (0,5,1) — not the (0,2,1) it looks like. The old override `.tv2 .bhubv2-search input:focus` is (0,3,1) and lost every time. `:focus-visible` matches text inputs on mouse click too, so it lost on every focus. The selector below is (0,6,1) and beats it outright rather than by source order. ⛔ If you shorten this selector, re-check it against that rule first. ── */ .tv2 .bhubv2-toolbar .bhubv2-search.bhubv2-search input[type="search"]:focus, .tv2 .bhubv2-toolbar .bhubv2-search.bhubv2-search input[type="search"]:focus-visible { outline: 0; outline-offset: 0; box-shadow: none; border-color: transparent; } /* One cross, ours. WebKit draws its own cancel button inside a type=search input. */ .bhubv2-search input[type="search"]::-webkit-search-cancel-button, .bhubv2-search input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } /* The clear cross. Guy, 2026-09-10: "just a clickable cross in the search bar (right hand side)" — so NO button chrome: no pill, no background, no border, no padding. It is a bare glyph sitting at the right-hand edge of the field, and the input's `flex: 1 1 auto` above is what pushes it there. ⚠️ It is still a