which has overflow:hidden at ALL widths. It is an ancestor of #page, so it is the actual element that makes itself the sticky scroll container — #page.bi-host above is necessary but not sufficient. Reset it to visible on the blog index page, desktop only: the wsmenu mobile slide-in menu (≤ ~991px) must keep its overflow:hidden, and below 1100px the filter bar is static anyway. Scoped via the bi-body class the view sets on . */ @media (min-width:1100px){ body.bi-body .wsmenucontainer{ overflow:visible; } } .bi-root{ margin-top:70px; /* clear the fixed header logo/menu */ /* Primary */ --bi-primary:#1680FB; --bi-primary-strong:#0A5FCC; --bi-primary-tint:#E8F2FF; --bi-primary-soft:#C9DFFD; /* Supporting */ --bi-cyan:#00B7E8; --bi-teal:#006772; /* Neutral ramp */ --bi-ink-0:#FFFFFF; --bi-ink-50:#F6F8FB; --bi-ink-100:#EDF1F6; --bi-ink-200:#DCE3ED; --bi-ink-300:#BFC9D6; --bi-ink-400:#8A95A4; --bi-ink-500:#5B6675; --bi-ink-700:#2E3744; --bi-ink-900:#0F1622; /* Semantic */ --bi-success:#1E9E6B; --bi-warning:#E6A23C; --bi-danger:#D64545; /* Radius / shadow / motion */ --bi-r-sm:6px; --bi-r-md:10px; --bi-r-lg:14px; --bi-r-xl:22px; --bi-shadow-sm:0 1px 2px rgba(15,22,34,.06),0 1px 0 rgba(15,22,34,.04); --bi-shadow-md:0 6px 18px -8px rgba(15,22,34,.18),0 2px 6px rgba(15,22,34,.06); --bi-ease:cubic-bezier(.2,.7,.2,1); font-family:Roboto,system-ui,-apple-system,Segoe UI,sans-serif; color:var(--bi-ink-700); background:var(--bi-ink-0); -webkit-font-smoothing:antialiased; } .bi-root *{box-sizing:border-box;} /* Neutralise the marketing theme's bare-element rules inside .bi-root. blue-theme.css applies `section{position:relative!important;z-index:3}` to every bare

(and similar to header/article), which spawns per-section stacking contexts and inherited spacing that fight the sticky filter bar and the featured overlays. Out-specify it (`.bi-root section` + !important) and drop the forced z-index so the page lays out as authored. position:relative is harmless/intended (the featured/cover boxes set their own). */ .bi-root section, .bi-root header, .bi-root article, .bi-root aside{ position:relative!important; z-index:auto!important; margin:0; padding:0; } /* Smooth anchored scrolling, motion-safe only */ @media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth;} } /* ---- Page shell --------------------------------------------------------- */ .bi-root .bi-page{max-width:1240px; margin:0 auto; padding:48px 32px 64px;} /* ---- Eyebrow / mono labels --------------------------------------------- */ .bi-root .bi-eyebrow{ display:flex; align-items:center; gap:12px; font-family:"Roboto Mono",ui-monospace,monospace; font-weight:500; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--bi-primary-strong); margin:0 0 18px; } .bi-root .bi-rule{display:inline-block; width:28px; height:3px; border-radius:2px; background:var(--bi-primary);} /* ---- Index hero (§6.2) -------------------------------------------------- */ .bi-root .ihero{ display:grid; grid-template-columns:1fr 320px; gap:48px; align-items:end; margin:0 0 40px; } .bi-root .ihero--solo{grid-template-columns:1fr;} .bi-root .ihero-title{ font-weight:900; font-size:84px; line-height:.95; letter-spacing:-.035em; color:var(--bi-ink-900); margin:0; text-wrap:balance; } .bi-root .ihero-title em{font-style:normal; color:var(--bi-primary);} .bi-root .ihero-dek{ font-size:20px; line-height:1.45; color:var(--bi-ink-500); margin:20px 0 0; max-width:54ch; text-wrap:pretty; } .bi-root .ihero-side{ display:flex; flex-direction:column; align-items:flex-end; gap:14px; padding-bottom:6px; } .bi-root .ihero-stat{ display:flex; align-items:center; gap:9px; font-family:"Roboto Mono",ui-monospace,monospace; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--bi-ink-400); } .bi-root .ihero-stat b{ color:var(--bi-ink-900); font-family:Roboto,sans-serif; font-weight:700; font-size:15px; letter-spacing:0; } .bi-root .ihero-pip{ width:6px; height:6px; border-radius:50%; background:var(--bi-primary); flex:none; } .bi-root .ihero-feed{ display:flex; gap:10px; font-family:"Roboto Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--bi-ink-400); } .bi-root .ihero-feed span{color:var(--bi-ink-300);} /* ---- Filter bar (§6.3) -------------------------------------------------- */ .bi-root .filterbar{ position:sticky; top:65px; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; padding:18px 0; margin:0 0 40px; border-bottom:1px solid var(--bi-ink-100); background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); } .bi-root .chips{display:flex; flex-wrap:wrap; gap:8px; min-width:0;} .bi-root .chip{ display:inline-flex; align-items:center; gap:7px; max-width:240px; padding:8px 14px; background:#fff; border:1px solid var(--bi-ink-200); border-radius:999px; color:var(--bi-ink-700); font-family:inherit; font-size:13px; font-weight:500; line-height:1; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:border-color .12s var(--bi-ease),color .12s var(--bi-ease), background-color .12s var(--bi-ease); } .bi-root .chip .chip-n{ font-family:"Roboto Mono",ui-monospace,monospace; font-size:11px; color:var(--bi-ink-400); opacity:.85; } .bi-root .chip:hover{border-color:var(--bi-ink-300); color:var(--bi-ink-900);} .bi-root .chip.active{ background:var(--bi-ink-900); border-color:var(--bi-ink-900); color:#fff; } .bi-root .chip.active .chip-n{color:#fff; opacity:.7;} .bi-root .sortwrap{display:flex; align-items:center; gap:10px; flex:none;} .bi-root .sortwrap label{ font-family:"Roboto Mono",ui-monospace,monospace; font-weight:500; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--bi-ink-400); } .bi-root .sortwrap select{ appearance:none; -webkit-appearance:none; padding:8px 34px 8px 14px; background-color:#fff; border:1px solid var(--bi-ink-200); border-radius:var(--bi-r-md); color:var(--bi-ink-700); font-family:inherit; font-size:13px; font-weight:500; cursor:pointer; background-image:url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='8'%20viewBox='0%200%2012%208'%3E%3Cpath%20fill='none'%20stroke='%235B6675'%20stroke-width='1.6'%20d='M1%201.5L6%206.5L11%201.5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; } .bi-root .sortwrap select:hover{border-color:var(--bi-ink-300);} /* ---- Featured (§6.4) ---------------------------------------------------- */ .bi-root .featured{ display:grid; grid-template-columns:1.35fr 1fr; gap:48px; align-items:start; margin:0 0 8px; } .bi-root .feat-cover{ position:relative; display:block; aspect-ratio:5/3; overflow:hidden; border-radius:var(--bi-r-xl); border:1px solid var(--bi-primary-soft); background:linear-gradient(150deg,var(--bi-primary-tint) 0%,#F4F9FF 50%,var(--bi-primary-soft) 100%); } .bi-root .feat-cover img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; } .bi-root .cover-fallback{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:"Roboto Mono",ui-monospace,monospace; font-size:15px; letter-spacing:.28em; text-transform:uppercase; color:var(--bi-primary-strong); background:linear-gradient(135deg,var(--bi-primary-tint),#FFFFFF 50%,var(--bi-primary-soft)); } .bi-root .feat-cap{ position:absolute; left:16px; bottom:16px; padding:7px 12px; border-radius:999px; background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); font-family:"Roboto Mono",ui-monospace,monospace; font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--bi-primary-strong); } .bi-root .feat-badge{ position:absolute; right:16px; top:16px; display:flex; align-items:center; gap:8px; padding:7px 13px; border-radius:999px; background:#fff; box-shadow:var(--bi-shadow-sm); font-family:"Roboto Mono",ui-monospace,monospace; font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--bi-ink-900); } .bi-root .feat-badge .dot{ width:8px; height:8px; border-radius:50%; background:var(--bi-primary); } @media (prefers-reduced-motion: no-preference){ .bi-root .feat-badge .dot{animation:bi-pulse 1.8s var(--bi-ease) infinite;} } @keyframes bi-pulse{ 0%{box-shadow:0 0 0 0 rgba(22,128,251,.45);} 70%{box-shadow:0 0 0 9px rgba(22,128,251,0);} 100%{box-shadow:0 0 0 0 rgba(22,128,251,0);} } .bi-root .feat-body{ display:flex; flex-direction:column; justify-content:center; gap:22px; } .bi-root .feat-crumbs{ display:flex; align-items:center; gap:8px; font-family:"Roboto Mono",ui-monospace,monospace; font-size:12px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--bi-ink-400); } .bi-root .feat-crumbs span{color:var(--bi-ink-300);} .bi-root .feat-title{ margin:0; font-weight:900; font-size:42px; line-height:1.05; letter-spacing:-.025em; text-wrap:balance; } .bi-root .feat-title a{color:var(--bi-ink-900); text-decoration:none; transition:color .15s var(--bi-ease);} .bi-root .feat-title a:hover{color:var(--bi-primary-strong);} .bi-root .feat-dek{ margin:0; font-size:17px; line-height:1.55; color:var(--bi-ink-500); max-width:50ch; text-wrap:pretty; } .bi-root .feat-by{ display:flex; align-items:center; gap:10px; font-family:"Roboto Mono",ui-monospace,monospace; font-size:12px; letter-spacing:.05em; color:var(--bi-ink-500); } .bi-root .feat-avatar{ width:34px; height:34px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-family:Roboto,sans-serif; font-weight:700; font-size:13px; color:#fff; background:linear-gradient(135deg,var(--bi-primary),var(--bi-primary-strong)); } .bi-root .feat-by .feat-author{ font-family:Roboto,sans-serif; font-weight:700; color:var(--bi-ink-900); font-size:14px; } .bi-root .feat-by i{font-style:normal; color:var(--bi-ink-300);} .bi-root .feat-btn{ align-self:flex-start; display:inline-flex; align-items:center; gap:9px; padding:12px 18px; border-radius:999px; background:var(--bi-ink-900); color:#fff; font-weight:700; font-size:14px; text-decoration:none; transition:background-color .15s var(--bi-ease); } .bi-root .feat-btn:hover{background:var(--bi-primary);} /* ---- Section heading (§6.5) -------------------------------------------- */ .bi-root .secthead{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; border-top:1px solid var(--bi-ink-100); padding:48px 0 20px; } .bi-root .secthead-label{ display:flex; align-items:center; gap:12px; font-family:"Roboto Mono",ui-monospace,monospace; font-weight:500; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--bi-primary-strong); } .bi-root .secthead-sum{ font-family:"Roboto Mono",ui-monospace,monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--bi-ink-400); } /* ---- Post grid + card (§6.6) ------------------------------------------- */ .bi-root .pgrid{ display:grid; grid-template-columns:repeat(3,1fr); row-gap:36px; column-gap:32px; margin:0 0 8px; } .bi-root .post{display:flex; flex-direction:column; cursor:pointer;} .bi-root .post[hidden]{display:none;} .bi-root .cover{ position:relative; display:block; aspect-ratio:4/3; overflow:hidden; border-radius:var(--bi-r-lg); border:1px solid var(--bi-ink-200); background:var(--bi-ink-50); transition:transform .22s var(--bi-ease),box-shadow .22s var(--bi-ease); } .bi-root .cover img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;} .bi-root .cover .cover-fallback{font-size:12px; letter-spacing:.24em;} @media (prefers-reduced-motion: no-preference){ .bi-root .post:hover .cover{transform:translateY(-3px); box-shadow:var(--bi-shadow-md);} } .bi-root .tagpill{ position:absolute; left:9px; top:9px; padding:6px 9px; border-radius:5px; background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); font-family:"Roboto Mono",ui-monospace,monospace; font-size:10px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--bi-ink-700); } .bi-root .rtpill{ position:absolute; right:9px; bottom:9px; padding:6px 9px; border-radius:5px; background:rgba(15,22,34,.78); font-family:"Roboto Mono",ui-monospace,monospace; font-size:10px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:#fff; } .bi-root .ptopic{ margin:16px 0 7px; font-family:"Roboto Mono",ui-monospace,monospace; font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--bi-primary-strong); } .bi-root .ptitle{ margin:0 0 9px; font-size:20px; line-height:1.2; font-weight:700; letter-spacing:-.015em; text-wrap:balance; } .bi-root .ptitle a{color:var(--bi-ink-900); text-decoration:none; transition:color .15s var(--bi-ease);} .bi-root .ptitle a:hover{color:var(--bi-primary-strong);} .bi-root .pdek{ margin:0 0 14px; font-size:14.5px; line-height:1.5; color:var(--bi-ink-500); text-wrap:pretty; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; } .bi-root .pmeta{ margin-top:auto; display:flex; align-items:center; gap:8px; font-family:"Roboto Mono",ui-monospace,monospace; font-size:11.5px; letter-spacing:.04em; color:var(--bi-ink-500); } .bi-root .pmeta .pmeta-author{color:var(--bi-ink-700);} .bi-root .pmeta i{font-style:normal; color:var(--bi-ink-300);} /* ---- Empty states (§12) ------------------------------------------------- */ .bi-root .featured--empty{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; border:1px dashed var(--bi-primary-soft); border-radius:var(--bi-r-xl); background:linear-gradient(150deg,var(--bi-primary-tint),#FFFFFF 70%); padding:64px 48px; margin:0 0 8px; } .bi-root .featured--empty h2{ margin:0; font-weight:900; font-size:32px; line-height:1.1; color:var(--bi-ink-900); } .bi-root .featured--empty p{margin:0; font-size:17px; color:var(--bi-ink-500);} .bi-root .featured--empty a{ display:inline-flex; align-items:center; gap:9px; padding:12px 18px; border-radius:999px; background:var(--bi-ink-900); color:#fff; font-weight:700; font-size:14px; text-decoration:none; transition:background-color .15s var(--bi-ease); } .bi-root .featured--empty a:hover{background:var(--bi-primary);} .bi-root .emptycat{ text-align:center; padding:56px 24px; border:1px solid var(--bi-ink-100); border-radius:var(--bi-r-lg); background:var(--bi-ink-50); } .bi-root .emptycat[hidden]{display:none;} .bi-root .emptycat p{margin:0 0 16px; font-size:16px; color:var(--bi-ink-500);} .bi-root .emptycat button{ padding:10px 18px; border:1px solid var(--bi-ink-200); border-radius:999px; background:#fff; color:var(--bi-ink-900); font-family:inherit; font-size:13px; font-weight:500; cursor:pointer; transition:border-color .12s var(--bi-ease),color .12s var(--bi-ease); } .bi-root .emptycat button:hover{ border-color:var(--bi-primary); color:var(--bi-primary-strong); } /* ---- Pagination (§6.7) -------------------------------------------------- */ .bi-root .pager{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; border-top:1px solid var(--bi-ink-100); padding:28px 0 0; margin-top:36px; } .bi-root .pager[hidden]{display:none;} .bi-root .pager-count{ font-family:"Roboto Mono",ui-monospace,monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--bi-ink-400); } .bi-root .pager-nums{display:flex; align-items:center; gap:7px; flex-wrap:wrap;} .bi-root .pager-nums button{ width:36px; height:36px; border:1px solid var(--bi-ink-200); border-radius:var(--bi-r-md); background:#fff; font-family:"Roboto Mono",ui-monospace,monospace; font-size:13px; color:var(--bi-ink-700); cursor:pointer; transition:border-color .12s var(--bi-ease),color .12s var(--bi-ease), background-color .12s var(--bi-ease); } .bi-root .pager-nums button:hover{ border-color:var(--bi-primary); color:var(--bi-primary-strong); } .bi-root .pager-nums button.active{ background:var(--bi-ink-900); border-color:var(--bi-ink-900); color:#fff; } .bi-root .pager-nums .gap{color:var(--bi-ink-300); padding:0 2px;} .bi-root .pager-next{ padding:9px 18px; border:1px solid var(--bi-ink-200); border-radius:999px; background:#fff; font-family:inherit; font-size:13px; font-weight:500; color:var(--bi-ink-900); cursor:pointer; transition:border-color .12s var(--bi-ease),color .12s var(--bi-ease); } .bi-root .pager-next:hover{ border-color:var(--bi-primary); color:var(--bi-primary-strong); } .bi-root .pager-next[hidden]{display:none;} /* ---- Focus states (§9) -------------------------------------------------- */ .bi-root a:focus-visible, .bi-root button:focus-visible, .bi-root select:focus-visible{ outline:0; box-shadow:0 0 0 3px rgba(22,128,251,.25),0 0 0 1px var(--bi-primary) inset; } /* ---- Responsive (§8) ---------------------------------------------------- */ @media (max-width:1100px){ .bi-root .ihero{grid-template-columns:1fr; gap:24px; align-items:start;} .bi-root .ihero-side{align-items:flex-start;} .bi-root .ihero-title{font-size:56px; line-height:1;} .bi-root .filterbar{ position:static; flex-direction:column; align-items:stretch; gap:16px; -webkit-backdrop-filter:none; backdrop-filter:none; background:transparent; } .bi-root .sortwrap{justify-content:flex-start;} .bi-root .featured{grid-template-columns:1fr; gap:24px;} .bi-root .pgrid{grid-template-columns:repeat(2,1fr);} } @media (max-width:680px){ .bi-root .bi-page{padding:28px 20px 48px;} .bi-root .ihero-title{font-size:44px;} .bi-root .feat-title{font-size:32px;} .bi-root .pgrid{grid-template-columns:1fr;} } /* ---- Print (§13) -------------------------------------------------------- */ @media print{ .bi-root .filterbar, .bi-root .sortwrap, .bi-root .pager{display:none !important;} .bi-root .feat-badge .dot{animation:none !important;} .bi-root .pgrid{grid-template-columns:repeat(2,1fr);} }