/* =============================================================================
Barlin Games — global header + mega menus
-----------------------------------------------------------------------------
Layout follows assets/img/navi/navigation-games-{light,dark}.png. Those files
are reference material; no image from them is used here and no content is
copied from them. Every string in the menu comes from the database.
WHY THIS FILE EXISTS SEPARATELY FROM homepage.css
The header used to be styled inside homepage.css, which meant it only worked
on the homepage — and its palette tokens were declared on `.bh` (the homepage
wrapper), so the same markup on /games or /login rendered unstyled. The
header block moved here and the tokens are re-declared on `.bh-nav` itself,
so the component is portable: any layout can include it by loading this one
stylesheet. homepage.css keeps everything below the header.
Dark theme keys off `body.theme-dark`, the same class the rest of the site
sets from the shared `theme_mode` cookie. Only tokens are redefined — no
component rule is duplicated — so light and dark render the SAME markup and
the same database content.
============================================================================= */
/* ── Tokens ───────────────────────────────────────────────────────────────
Declared on the header and the panels rather than :root, so nothing here can
leak into the admin shell or a legacy page that happens to load this file.
Values match homepage.css exactly, so the homepage is visually unchanged. */
.bh-nav, .bh-nav .bh-mg, .bh-nav .bh-mega, .bh-nav .bh-mnav, .bh-nav .bh-msearch {
--bh-red: #E51B23;
--bh-red-bright: #F32E36;
--bh-red-deep: #C7070F;
--bh-red-grad: linear-gradient(135deg, #EF1B24 0%, #C8080F 100%);
--bh-red-tint: #FEEFEE;
--bh-red-tint-2: #FDE4E4;
--bh-ink: #0A0A0B;
--bh-ink-2: #1F1F23;
--bh-muted: #6B6B75;
--bh-muted-2: #8E8E98;
--bh-page: #FBFAFB;
--bh-card: #FFFFFF;
--bh-line: #EFEFF2;
--bh-line-2: #E6E6EB;
--bh-shadow-sm: 0 1px 2px rgba(16, 16, 24, .04);
--bh-shadow: 0 2px 10px rgba(16, 16, 24, .05), 0 1px 3px rgba(16, 16, 24, .03);
--bh-shadow-md: 0 6px 22px rgba(16, 16, 24, .07), 0 2px 6px rgba(16, 16, 24, .04);
--bh-shadow-lg: 0 24px 70px -12px rgba(16, 16, 24, .22), 0 8px 24px -8px rgba(16, 16, 24, .10);
--bh-shadow-red: 0 10px 24px -8px rgba(229, 27, 35, .45);
--bh-r-sm: 8px;
--bh-r: 12px;
--bh-r-lg: 16px;
--bh-r-xl: 20px;
/* Same ceiling as the homepage, from the same global token, so the
header and the page beneath it stay aligned at every width. */
--bh-max: var(--bg-wrap-page, 1450px);
--bh-pad: 24px;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
body.theme-dark .bh-nav, body.theme-dark .bh-mg, body.theme-dark .bh-mega, body.theme-dark .bh-mnav, body.theme-dark .bh-msearch,
.bh-nav.theme-dark, .bh-nav.theme-dark .bh-mg, .bh-nav.theme-dark .bh-mega, .bh-nav.theme-dark .bh-mnav, .bh-nav.theme-dark .bh-msearch {
--bh-ink: #F4F4F6;
--bh-ink-2: #E4E4E9;
--bh-muted: #A0A0AA;
--bh-muted-2: #85858F;
--bh-page: #0C0C0E;
--bh-card: #141417;
--bh-line: #232329;
--bh-line-2: #2C2C34;
--bh-red-tint: rgba(229, 27, 35, .14);
--bh-red-tint-2: rgba(229, 27, 35, .20);
--bh-shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
--bh-shadow: 0 2px 10px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .4);
--bh-shadow-md: 0 6px 22px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .45);
--bh-shadow-lg: 0 30px 80px -14px rgba(0, 0, 0, .78), 0 10px 28px -10px rgba(0, 0, 0, .6);
--bh-shadow-red: 0 10px 24px -8px rgba(229, 27, 35, .55);
}
/* Same reason as articles.css: the header is dropped into layouts that may
have no border-box reset (layouts/article has none), and `width: 100%` plus
padding then overflows the viewport. */
.bh-nav, .bh-nav *, .bh-nav *::before, .bh-nav *::after { box-sizing: border-box; }
.bh-nav .bh-wrap {
width: 100%;
max-width: var(--bh-max);
margin: 0 auto;
padding: 0 var(--bh-pad);
}
/* =============================================================================
HEADER BAR
============================================================================= */
.bh-nav {
position: sticky;
top: 0;
z-index: 60;
background: var(--bh-card);
border-bottom: 1px solid var(--bh-line);
color: var(--bh-ink);
}
.bh-nav-in {
display: flex;
align-items: center;
gap: 24px;
height: 84px;
}
.bh-nav .bh-brand { display: flex; align-items: center; gap: 11px; flex: none; text-decoration: none; }
/* 60px reads slightly taller than the two-line wordmark beside it (~56px),
which is what makes the mark feel like the brand rather than an icon next
to it. The bar is 84px, so this keeps 12px of air top and bottom — past
about 62px the header needs to grow with it. */
.bh-nav .bh-brand-mark { height: 60px; width: auto; }
.bh-nav .bh-brand-tx { line-height: 1; }
.bh-nav .bh-brand-tx b {
display: block; font-size: 23px; font-weight: 800;
letter-spacing: -.01em; color: var(--bh-ink);
}
.bh-nav .bh-brand-tx i {
display: block; font-style: normal; font-size: 23px; font-weight: 800;
letter-spacing: -.01em; color: var(--bh-red); margin-top: 1px;
}
.bh-nav .bh-brand-tx small {
display: block; font-size: 8px; font-weight: 600;
letter-spacing: .22em; color: var(--bh-muted-2); margin-top: 5px;
}
.bh-nav-nav { margin: 0 auto; }
.bh-nav-links {
display: flex; align-items: center; gap: 30px;
margin: 0; list-style: none; padding: 0;
}
/* STATIC on purpose. The panel is absolutely positioned and centred with
left:50%, so it resolves against the nearest positioned ancestor. If that is
the , a 1360px panel gets centred on a 60px menu item and hangs off the
left of the viewport. Leaving the static lets it resolve against
.bh-nav (which is sticky, and therefore positioned), centring the panel on
the header where the reference puts it. */
.bh-nav-links > li { position: static; display: flex; align-items: center; gap: 2px; }
.bh-nav-links a {
position: relative;
display: inline-flex; align-items: center; gap: 6px;
font-size: 15px; font-weight: 500;
color: var(--bh-ink-2);
text-decoration: none;
padding: 29px 0;
transition: color .16s ease;
}
.bh-nav-links a:hover { color: var(--bh-red); }
.bh-nav-links a.is-active { color: var(--bh-red); font-weight: 600; }
.bh-nav-links a.is-active::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 24px;
height: 2.5px; border-radius: 2px; background: var(--bh-red);
}
/* The disclosure beside a menu item. A real button, so it is reachable and
announced; styled to read as the caret in the reference, not as a control. */
.bh-nav-caret {
display: grid; place-items: center;
width: 22px; height: 22px; padding: 0;
border: 0; background: none; cursor: pointer;
color: var(--bh-muted); border-radius: 6px;
transition: color .16s ease, transform .2s ease, background .16s ease;
}
.bh-nav-caret svg { width: 13px; height: 13px; }
.bh-nav-caret:hover { color: var(--bh-red); background: var(--bh-red-tint); }
.bh-nav-links > li.is-open > a { color: var(--bh-red); font-weight: 600; }
.bh-nav-links > li.is-open .bh-nav-caret { color: var(--bh-red); transform: rotate(180deg); }
/* The open item grows the same red underline the active page has, so "this
menu is open" is visible without relying on the panel alone. */
.bh-nav-links > li.is-open > a::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 24px;
height: 2.5px; border-radius: 2px; background: var(--bh-red);
}
.bh-nav-actions { display: flex; align-items: center; gap: 14px; flex: none; }
.bh-nav .bh-search {
display: flex; align-items: center; gap: 10px;
background: var(--bh-page);
border: 1px solid var(--bh-line);
border-radius: 999px;
height: 48px; padding: 0 18px; width: 300px;
transition: border-color .16s ease, background .16s ease;
}
.bh-nav .bh-search:focus-within { background: var(--bh-card); border-color: var(--bh-line-2); }
.bh-nav .bh-search-ic { width: 18px; height: 18px; color: var(--bh-muted); flex: none; }
.bh-nav .bh-search input {
flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
font: inherit; font-size: 14px; color: var(--bh-ink);
}
.bh-nav .bh-search input::placeholder { color: var(--bh-muted-2); }
.bh-nav .bh-icon-btn {
display: grid; place-items: center;
width: 48px; height: 48px; border-radius: 50%;
background: var(--bh-card); border: 1px solid var(--bh-line-2);
cursor: pointer; color: var(--bh-ink);
transition: border-color .16s ease, transform .16s ease;
}
.bh-nav .bh-icon-btn:hover { border-color: var(--bh-red); transform: translateY(-1px); }
.bh-nav .bh-icon-btn svg { width: 21px; height: 21px; }
.bh-nav .bh-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 11px;
border: 0; cursor: pointer; font-family: inherit; font-weight: 700;
white-space: nowrap; border-radius: var(--bh-r); text-decoration: none;
transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.bh-nav .bh-btn-red { background: var(--bh-red-grad); color: #fff; box-shadow: var(--bh-shadow-red); }
.bh-nav .bh-btn-red:hover { transform: translateY(-2px); color: #fff; }
.bh-nav .bh-login { height: 48px; padding: 0 24px; font-size: 15px; border-radius: 10px; }
.bh-nav .bh-login svg { width: 17px; height: 17px; }
/* =============================================================================
THEME TRANSITION — the circular reveal from the toggle
-----------------------------------------------------------------------------
assets/js/navigation.js flips the theme in place and sets three custom
properties on before it does: --bh-tt-x / --bh-tt-y are the centre of
the sun/moon icon, and --bh-tt-r is the distance from there to the furthest
corner of the viewport. Everything below is the same circle, opening from
that point, drawn two different ways depending on what the browser has.
PATH 1 — View Transitions (Chrome, Edge, Safari 18+, Firefox 144+).
The browser snapshots the page before and after the class swap. The default
behaviour is a cross-fade; these rules replace it with the incoming snapshot
clipped to a growing circle, stacked above the outgoing one. Because both
are real snapshots of the whole page, every element — header, hero, cards,
type — crosses the boundary together, which is what makes it read as light
moving across the page rather than a lot of things recolouring at once.
Scoped to [data-bh-theming], which the script adds for the duration of this
transition and removes after. Unscoped, these would hijack any other view
transition the site ever starts.
PATH 2 — everything else: .bh-theme-veil, a disc of the INCOMING page colour
that expands from the same point, hides the swap, and fades out.
Neither path runs under prefers-reduced-motion; the script swaps the class
and returns before it touches any of this.
============================================================================= */
html[data-bh-theming]::view-transition-old(root),
html[data-bh-theming]::view-transition-new(root) {
animation: none;
/* The UA pairs the two snapshots with a blend by default. Left on, the
outgoing theme shows through the incoming one and the leading edge of
the circle turns muddy instead of crisp. */
mix-blend-mode: normal;
}
html[data-bh-theming]::view-transition-old(root) { z-index: 1; }
html[data-bh-theming]::view-transition-new(root) {
z-index: 2;
animation: bh-theme-wipe .62s cubic-bezier(.32, 0, .24, 1) forwards;
}
@keyframes bh-theme-wipe {
from { clip-path: circle(0 at var(--bh-tt-x, 50%) var(--bh-tt-y, 50%)); }
to { clip-path: circle(var(--bh-tt-r, 150vmax) at var(--bh-tt-x, 50%) var(--bh-tt-y, 50%)); }
}
/* ── Fallback disc ──────────────────────────────────────────────────────── */
.bh-theme-veil {
position: fixed;
inset: 0;
z-index: 2147483000; /* above the sticky header and any open panel */
pointer-events: none;
/* Not quite solid, and it starts fading BEFORE it has finished growing —
the two transitions below overlap on purpose. A disc that expands
opaque, stops, swaps and only then fades is a curtain being drawn; one
that thins out while it is still travelling lets the new theme bleed
through its trailing edge and reads as light spreading from the icon.
This path only runs where View Transitions are missing. */
opacity: .94;
clip-path: circle(0 at var(--bh-tt-x, 50%) var(--bh-tt-y, 50%));
transition: clip-path .52s cubic-bezier(.32, 0, .24, 1),
opacity .34s ease;
}
/* The colour it expands in is the ground of the theme being switched TO, so
the disc looks like the new page arriving rather than a curtain. */
.bh-theme-veil[data-to="theme-dark"] { background: #0C0C0E; }
.bh-theme-veil[data-to="theme-light"] { background: #FBFAFB; }
.bh-theme-veil.is-open { clip-path: circle(var(--bh-tt-r, 150vmax) at var(--bh-tt-x, 50%) var(--bh-tt-y, 50%)); }
.bh-theme-veil.is-gone { opacity: 0; }
/* A press this consequential should feel like one. */
.bh-nav [data-bh-theme]:active { transform: scale(.93); }
.bh-nav .bh-ic-moon, .bh-nav .bh-ic-x { display: none; }
body.theme-dark .bh-nav .bh-ic-sun,
.bh-nav.theme-dark .bh-ic-sun { display: none; }
body.theme-dark .bh-nav .bh-ic-moon,
.bh-nav.theme-dark .bh-ic-moon { display: block; }
.bh-nav .bh-burger[aria-expanded="true"] .bh-ic-bars { display: none; }
.bh-nav .bh-burger[aria-expanded="true"] .bh-ic-x { display: block; }
.bh-nav .bh-burger, .bh-nav .bh-searchbtn { display: none; }
/* Visible focus everywhere. Keyboard users must be able to see where they are. */
.bh-nav a:focus-visible, .bh-nav button:focus-visible, .bh-nav input:focus-visible, .bh-nav .bh-mg a:focus-visible, .bh-nav .bh-mg input:focus-visible, .bh-nav .bh-mega a:focus-visible, .bh-nav .bh-mnav a:focus-visible, .bh-nav .bh-mnav summary:focus-visible {
outline: 2px solid var(--bh-red);
outline-offset: 2px;
border-radius: 6px;
}
/* Text inputs match :focus-visible on plain mouse clicks too — that is per
spec, because typing is the expected next action — so the rule above painted
a red box around the search field the moment it was clicked. Focus still has
to be visible for keyboard users, so it moves to the wrapper's border
instead of an offset ring around the field. */
.bh-nav .bh-search input:focus-visible,
.bh-nav .bh-msearch input:focus-visible { outline: 0; }
.bh-nav .bh-msearch form:focus-within { border-color: var(--bh-red); }
/* =============================================================================
MEGA MENU — shell
Shared by the Games panel, the Articles panel and the generic fallback.
============================================================================= */
.bh-nav .bh-mg, .bh-nav .bh-ma, .bh-nav .bh-mc, .bh-nav .bh-mega {
position: absolute;
top: calc(100% + 1px);
left: 50%;
transform: translateX(-50%) translateY(-6px);
width: min(1360px, calc(100vw - 40px));
z-index: 70;
background: var(--bh-card);
border: 1px solid var(--bh-line);
border-radius: var(--bh-r-xl);
box-shadow: var(--bh-shadow-lg);
color: var(--bh-ink);
opacity: 0;
pointer-events: none;
transition: opacity .18s ease, transform .18s ease;
overflow: hidden;
}
.bh-nav .bh-mg.is-open, .bh-nav .bh-ma.is-open, .bh-nav .bh-mc.is-open, .bh-nav .bh-mega.is-open {
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.bh-nav .bh-mg, .bh-nav .bh-ma, .bh-nav .bh-mc, .bh-nav .bh-mega { transition: none; }
}
/* The restrained red ambient the reference shows behind the panel — one
composited layer, no images. */
.bh-nav .bh-mg::before,
.bh-nav .bh-ma::before,
.bh-nav .bh-mc::before {
content: '';
position: absolute; inset: 0; pointer-events: none; z-index: 0;
background:
radial-gradient(52% 60% at 6% 4%, rgba(229, 27, 35, .055), transparent 62%),
radial-gradient(46% 54% at 96% 8%, rgba(244, 63, 94, .045), transparent 60%),
radial-gradient(60% 50% at 50% 100%, rgba(229, 27, 35, .04), transparent 64%);
}
body.theme-dark .bh-nav .bh-mg::before,
.bh-nav.theme-dark .bh-mg::before,
body.theme-dark .bh-nav .bh-ma::before,
.bh-nav.theme-dark .bh-ma::before,
body.theme-dark .bh-nav .bh-mc::before,
.bh-nav.theme-dark .bh-mc::before {
background:
radial-gradient(52% 60% at 6% 4%, rgba(229, 27, 35, .16), transparent 62%),
radial-gradient(46% 54% at 96% 8%, rgba(244, 63, 94, .12), transparent 60%),
radial-gradient(60% 50% at 50% 100%, rgba(229, 27, 35, .10), transparent 64%);
}
.bh-nav .bh-mg-arrow, .bh-nav .bh-ma-arrow, .bh-nav .bh-mega-arrow { display: none; }
.bh-nav .bh-mg-in {
position: relative; z-index: 1;
display: grid;
grid-template-columns: 300px minmax(0, 1fr) 310px;
gap: 26px;
padding: 26px 26px 20px;
}
.bh-nav .bh-mg-col { min-width: 0; }
/* ── Section headings ─────────────────────────────────────────────────── */
.bh-nav .bh-mg-h {
margin: 0 0 10px;
font-size: 11.5px; font-weight: 800;
letter-spacing: .13em; text-transform: uppercase;
color: var(--bh-muted);
display: flex; align-items: center; gap: 7px;
}
.bh-nav .bh-mg-h-red { color: var(--bh-red); margin-top: 20px; }
.bh-nav .bh-mg-left .bh-mg-h + .bh-mg-tags { margin-bottom: 4px; }
.bh-nav .bh-mg-tilehead {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; margin-bottom: 12px;
}
.bh-nav .bh-mg-tilehead h3 {
margin: 0; font-size: 11.5px; font-weight: 800;
letter-spacing: .13em; text-transform: uppercase; color: var(--bh-muted);
}
.bh-nav .bh-mg-tilehead > a {
display: inline-flex; align-items: center; gap: 5px;
font-size: 12px; font-weight: 700; color: var(--bh-red);
text-decoration: none; white-space: nowrap;
}
.bh-nav .bh-mg-tilehead > a:hover { text-decoration: underline; }
/* ── Column 1: search ─────────────────────────────────────────────────── */
.bh-nav .bh-mg-findbox {
display: flex; align-items: center; gap: 10px;
height: 46px; padding: 0 16px;
border: 1.5px solid var(--bh-red-tint-2);
border-radius: 999px;
background: var(--bh-card);
transition: border-color .16s ease, box-shadow .16s ease;
}
.bh-nav .bh-mg-findbox:focus-within {
border-color: var(--bh-red);
box-shadow: 0 0 0 4px rgba(229, 27, 35, .10);
}
.bh-nav .bh-mg-findic { color: var(--bh-red); flex: none; }
.bh-nav .bh-mg-findbox input {
flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
font: inherit; font-size: 13.5px; color: var(--bh-ink);
}
.bh-nav .bh-mg-findbox input::placeholder { color: var(--bh-muted-2); }
/* ── Column 1: popular searches ───────────────────────────────────────── */
.bh-nav .bh-mg-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 4px; }
.bh-nav .bh-mg-tag {
display: inline-flex; align-items: center;
padding: 7px 13px; border-radius: 999px;
background: var(--bh-page); border: 1px solid var(--bh-line);
font-size: 12.5px; font-weight: 600; color: var(--bh-ink-2);
text-decoration: none;
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.bh-nav .bh-mg-tag:hover {
background: var(--bh-red-tint); border-color: var(--bh-red-tint-2); color: var(--bh-red);
}
/* ── Column 1: discover ───────────────────────────────────────────────── */
.bh-nav .bh-mg-disc { list-style: none; margin: 0 0 14px; padding: 0; }
.bh-nav .bh-mg-disc > li + li { margin-top: 2px; }
.bh-nav .bh-mg-disc a {
display: flex; align-items: center; gap: 11px;
padding: 8px 10px; border-radius: var(--bh-r);
text-decoration: none; color: inherit;
transition: background .15s ease;
}
.bh-nav .bh-mg-disc a:hover { background: var(--bh-red-tint); }
.bh-nav .bh-mg-disc-ic {
display: grid; place-items: center; flex: none;
width: 36px; height: 36px; border-radius: 10px;
background: var(--bh-page); border: 1px solid var(--bh-line);
color: var(--bh-red);
}
.bh-nav .bh-mg-disc a:hover .bh-mg-disc-ic { background: var(--bh-card); border-color: var(--bh-red-tint-2); }
.bh-nav .bh-mg-disc-tx { min-width: 0; }
.bh-nav .bh-mg-disc-tx b { display: block; font-size: 13.5px; font-weight: 700; color: var(--bh-ink); }
.bh-nav .bh-mg-disc-tx small { display: block; font-size: 11.5px; color: var(--bh-muted); margin-top: 1px; }
/* ── Column 1: surprise me ────────────────────────────────────────────── */
.bh-nav .bh-mg-surprise {
display: flex; align-items: center; gap: 12px;
padding: 13px 15px; border-radius: var(--bh-r-lg);
background: var(--bh-red-grad); color: #fff; text-decoration: none;
box-shadow: var(--bh-shadow-red);
transition: transform .18s ease, box-shadow .18s ease;
}
.bh-nav .bh-mg-surprise:hover { transform: translateY(-2px); color: #fff; }
.bh-nav .bh-mg-surprise-ic {
display: grid; place-items: center; flex: none;
width: 38px; height: 38px; border-radius: 11px;
background: rgba(255, 255, 255, .18);
}
.bh-nav .bh-mg-surprise-tx { flex: 1; min-width: 0; }
.bh-nav .bh-mg-surprise-tx b {
display: block; font-size: 12px; font-weight: 800;
letter-spacing: .1em; text-transform: uppercase;
}
.bh-nav .bh-mg-surprise-tx small { display: block; font-size: 11.5px; opacity: .9; margin-top: 2px; }
.bh-nav .bh-mg-surprise-go { flex: none; }
/* ── Column 2: featured game ──────────────────────────────────────────── */
.bh-nav .bh-mg-hero {
position: relative; display: block;
height: 296px; border-radius: var(--bh-r-lg);
overflow: hidden; text-decoration: none; color: #fff;
background: #17171b;
margin-bottom: 20px;
}
.bh-nav .bh-mg-hero-bg {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover;
transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.bh-nav .bh-mg-hero:hover .bh-mg-hero-bg { transform: scale(1.04); }
.bh-nav .bh-mg-hero-veil {
position: absolute; inset: 0;
background: linear-gradient(100deg, rgba(6, 6, 8, .93) 4%, rgba(6, 6, 8, .74) 34%, rgba(6, 6, 8, .18) 66%, rgba(6, 6, 8, .05) 100%);
}
.bh-nav .bh-mg-hero-tx {
position: relative;
display: flex; flex-direction: column; align-items: flex-start;
height: 100%; padding: 24px 26px; max-width: 62%;
justify-content: center; gap: 10px;
}
/* Nothing in the stack may shrink. The title, excerpt and score all come from
the database and vary in length, and flex's default `shrink: 1` was squeezing
the clamped excerpt down until the button sat on top of it. Fixed sizing plus
the 2-line clamp keeps the card the same height whatever game lands here. */
.bh-nav .bh-mg-hero-tx > * { flex: 0 0 auto; }
.bh-nav .bh-mg-kicker {
display: inline-flex; align-items: center; gap: 6px;
font-size: 10.5px; font-weight: 800;
letter-spacing: .16em; text-transform: uppercase; color: var(--bh-red-bright);
}
.bh-nav .bh-mg-hero-t {
font-size: 34px; line-height: 1.05; font-weight: 800;
letter-spacing: -.02em; color: #fff;
}
.bh-nav .bh-mg-hero-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.bh-nav .bh-mg-hero-d {
font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .82);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bh-nav .bh-mg-hero-cta {
display: inline-flex; align-items: center; gap: 9px;
margin-top: 4px; padding: 11px 22px; border-radius: 10px;
background: var(--bh-red-grad); color: #fff;
font-size: 14px; font-weight: 700;
box-shadow: var(--bh-shadow-red);
transition: transform .18s ease;
}
.bh-nav .bh-mg-hero:hover .bh-mg-hero-cta { transform: translateY(-1px); }
.bh-nav .bh-mg-score {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 10px; border-radius: 999px;
background: rgba(255, 199, 0, .16);
border: 1px solid rgba(255, 199, 0, .45);
color: #FFC700; font-size: 12.5px; font-weight: 800;
}
.bh-nav .bh-mg-pill {
display: inline-flex; align-items: center;
padding: 4px 11px; border-radius: 999px;
background: rgba(255, 255, 255, .13);
border: 1px solid rgba(255, 255, 255, .2);
color: #fff; font-size: 12px; font-weight: 600;
}
/* ── Column 2: genre + platform tiles ─────────────────────────────────── */
.bh-nav .bh-mg-tiles {
display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
.bh-nav .bh-mg-tilegrp { min-width: 0; }
.bh-nav .bh-mg-tilegrp + .bh-mg-tilegrp { border-left: 1px solid var(--bh-line); padding-left: 24px; }
/* auto-fit with a floor, not a fixed 4 columns. Genre names come from the
database and can be any length, so the tiles need a minimum width they are
never squeezed below — at four fixed columns "Adventure" was breaking across
lines mid-word. Fewer, wider tiles per row is the better failure mode. */
.bh-nav .bh-mg-tilerow {
display: grid; grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); gap: 8px;
}
.bh-nav .bh-mg-tile {
display: flex; flex-direction: column; align-items: center; gap: 5px;
padding: 13px 6px 11px; border-radius: var(--bh-r);
border: 1px solid var(--bh-line);
background: var(--bh-card);
text-decoration: none; text-align: center;
transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.bh-nav .bh-mg-tile:hover {
border-color: var(--bh-red-tint-2);
transform: translateY(-2px);
box-shadow: var(--bh-shadow);
}
.bh-nav .bh-mg-tile-ic { color: var(--bh-red); line-height: 0; }
.bh-nav .bh-mg-tile b {
font-size: 12.5px; font-weight: 700; color: var(--bh-ink);
line-height: 1.2;
/* break-word, not anywhere: a long name wraps at a sensible point and only
splits mid-word when a single word genuinely cannot fit. */
overflow-wrap: break-word;
}
.bh-nav .bh-mg-tile small { font-size: 10.5px; color: var(--bh-muted); }
/* ── Column 3: trending ───────────────────────────────────────────────── */
.bh-nav .bh-mg-right { border-left: 1px solid var(--bh-line); padding-left: 26px; }
.bh-nav .bh-mg-trend { list-style: none; margin: 0 0 14px; padding: 0; }
.bh-nav .bh-mg-trend > li + li { margin-top: 4px; }
.bh-nav .bh-mg-trend a {
display: flex; align-items: center; gap: 11px;
padding: 7px; border-radius: var(--bh-r);
text-decoration: none; color: inherit;
transition: background .15s ease;
}
.bh-nav .bh-mg-trend a:hover { background: var(--bh-page); }
.bh-nav .bh-mg-trend-img {
flex: none; width: 54px; height: 54px; border-radius: 10px;
overflow: hidden; background: var(--bh-page);
border: 1px solid var(--bh-line);
}
.bh-nav .bh-mg-trend-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bh-nav .bh-mg-trend-tx { flex: 1; min-width: 0; }
.bh-nav .bh-mg-trend-tx b {
display: block; font-size: 13.5px; font-weight: 700; color: var(--bh-ink);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bh-nav .bh-mg-trend-tx small { display: block; font-size: 11.5px; color: var(--bh-muted); margin-top: 2px; }
.bh-nav .bh-mg-score-sm {
flex: none;
background: var(--bh-red-tint); border-color: var(--bh-red-tint-2);
color: var(--bh-red); font-size: 11.5px; padding: 3px 8px;
}
.bh-nav .bh-mg-hot {
display: flex; align-items: center; gap: 11px;
padding: 12px 13px; border-radius: var(--bh-r);
background: var(--bh-red-tint); border: 1px solid var(--bh-red-tint-2);
text-decoration: none; color: var(--bh-red);
transition: transform .16s ease;
}
.bh-nav .bh-mg-hot:hover { transform: translateY(-1px); }
.bh-nav .bh-mg-hot-ic { flex: none; line-height: 0; }
.bh-nav .bh-mg-hot-tx { flex: 1; min-width: 0; }
.bh-nav .bh-mg-hot-tx b { display: block; font-size: 13px; font-weight: 800; }
.bh-nav .bh-mg-hot-tx small { display: block; font-size: 11px; color: var(--bh-muted); margin-top: 1px; }
/* =============================================================================
MEGA MENU — generic panel (Articles)
-----------------------------------------------------------------------------
The Games menu has its own bespoke panel; this styles the generic
rail + feature layout that mega-menu.blade.php emits for Articles.
These rules were previously written against class names the markup does not
use (bh-meg-*, bh-ri-*), which left 31 of its 35 classes with no rule at all
— the panel rendered as a bare bulleted list running down the page. The
names below are the ones the component actually outputs.
============================================================================= */
.bh-nav .bh-mega-in {
position: relative; z-index: 1;
display: flex;
align-items: flex-start;
gap: 24px;
padding: 22px 24px;
}
/* The middle column is always emitted but is empty for menus that define no
grid or secondary block — Articles is one. Collapsing it stops the panel
reserving a wide empty gutter. :has() rather than :empty, because the div
still contains whitespace text nodes. */
.bh-nav .bh-mega-mid:not(:has(*)) { display: none; }
.bh-nav .bh-mega-rail { flex: 0 0 320px; min-width: 0; }
.bh-nav .bh-mega-mid { flex: 1 1 auto; min-width: 0; }
.bh-nav .bh-mega-side {
flex: 0 0 340px; min-width: 0;
border-inline-start: 1px solid var(--bh-line);
padding-inline-start: 24px;
}
.bh-nav .bh-mega-kicker {
margin: 0 0 12px;
font-size: 11.5px; font-weight: 800; letter-spacing: .13em;
text-transform: uppercase; color: var(--bh-muted);
}
.bh-nav .bh-mega-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* ── Rail ─────────────────────────────────────────────────────────────── */
.bh-nav .bh-rail-list { list-style: none; margin: 0 0 14px; padding: 0; }
.bh-nav .bh-rail-list > li + li { margin-top: 2px; }
.bh-nav .bh-rail-item {
display: flex; align-items: center; gap: 12px;
padding: 9px 10px; border-radius: var(--bh-r);
text-decoration: none; color: inherit;
transition: background .15s ease;
}
.bh-nav .bh-rail-item:hover,
.bh-nav .bh-rail-item.is-on { background: var(--bh-red-tint); }
.bh-nav .bh-rail-ic {
display: grid; place-items: center; flex: none;
width: 38px; height: 38px; border-radius: 11px;
background: var(--bh-page); border: 1px solid var(--bh-line);
color: var(--bh-red);
}
.bh-nav .bh-rail-ic svg { width: 19px; height: 19px; }
.bh-nav .bh-rail-item:hover .bh-rail-ic { background: var(--bh-card); border-color: var(--bh-red-tint-2); }
.bh-nav .bh-rail-tx { min-width: 0; }
.bh-nav .bh-rail-tx b { display: block; font-size: 13.5px; font-weight: 700; color: var(--bh-ink); }
.bh-nav .bh-rail-tx i { display: block; font-style: normal; font-size: 11.5px; color: var(--bh-muted); margin-top: 1px; }
/* ── Buttons / view-all ───────────────────────────────────────────────── */
.bh-nav .bh-mega-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 16px; border-radius: var(--bh-r);
background: var(--bh-red-tint); border: 1px solid var(--bh-red-tint-2);
color: var(--bh-red); font-size: 13px; font-weight: 700; text-decoration: none;
transition: transform .16s ease;
}
.bh-nav .bh-mega-btn:hover { transform: translateY(-1px); color: var(--bh-red); }
.bh-nav .bh-mega-btn svg { width: 15px; height: 15px; }
.bh-nav .bh-mega-btn--wide { display: flex; justify-content: center; margin-top: 12px; }
.bh-nav .bh-viewall {
display: inline-flex; align-items: center; gap: 5px;
font-size: 12px; font-weight: 700; color: var(--bh-red);
text-decoration: none; white-space: nowrap;
}
.bh-nav .bh-viewall:hover { text-decoration: underline; color: var(--bh-red); }
/* The view-all inside a chip row carries both classes; it should sit on the
line with the chips rather than break it. */
.bh-nav .bh-mega-chip-link { margin-inline-start: 4px; }
.bh-nav .bh-viewall svg { width: 14px; height: 14px; }
/* ── Card grid + secondary (other menus; kept so they are not unstyled) ── */
.bh-nav .bh-mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
.bh-nav .bh-mega-card {
display: flex; align-items: center; gap: 11px;
padding: 10px; border-radius: var(--bh-r);
border: 1px solid var(--bh-line); background: var(--bh-card);
text-decoration: none; color: inherit;
transition: border-color .16s ease, transform .16s ease;
}
.bh-nav .bh-mega-card:hover { border-color: var(--bh-red-tint-2); transform: translateY(-2px); }
.bh-nav .bh-mega-card-ic {
display: grid; place-items: center; flex: none;
width: 36px; height: 36px; border-radius: 10px;
background: var(--bh-red-tint); color: var(--bh-red);
}
.bh-nav .bh-mega-card-ic svg { width: 18px; height: 18px; }
.bh-nav .bh-mega-card-tx { min-width: 0; }
.bh-nav .bh-mega-card-tx b { display: block; font-size: 13px; font-weight: 700; color: var(--bh-ink); }
.bh-nav .bh-mega-card-tx i { display: block; font-style: normal; font-size: 11.5px; color: var(--bh-muted); }
.bh-nav .bh-mega-sec { margin-top: 4px; }
.bh-nav .bh-mega-chips { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.bh-nav .bh-mega-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 12px; border-radius: 999px;
background: var(--bh-page); border: 1px solid var(--bh-line);
font-size: 12.5px; font-weight: 600; color: var(--bh-ink-2); text-decoration: none;
transition: background .15s ease, color .15s ease;
}
.bh-nav .bh-mega-chip:hover { background: var(--bh-red-tint); color: var(--bh-red); }
.bh-nav .bh-mega-chip svg { width: 15px; height: 15px; }
.bh-nav .bh-mega-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.bh-nav .bh-mega-tile { text-decoration: none; color: inherit; }
.bh-nav .bh-mega-tile-img {
display: block; aspect-ratio: 16/9; border-radius: var(--bh-r);
overflow: hidden; background: var(--bh-page); border: 1px solid var(--bh-line); margin-bottom: 7px;
}
.bh-nav .bh-mega-tile-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bh-nav .bh-mega-tile b { display: block; font-size: 13px; font-weight: 700; color: var(--bh-ink); }
.bh-nav .bh-mega-tile i { display: block; font-style: normal; font-size: 11.5px; color: var(--bh-muted); }
/* ── Feature feed (the Articles "Latest" column) ──────────────────────── */
.bh-nav .bh-mega-feed { list-style: none; margin: 0; padding: 0; }
.bh-nav .bh-mega-feed > li + li { margin-top: 4px; }
.bh-nav .bh-feed-item {
display: flex; align-items: center; gap: 11px;
padding: 7px; border-radius: var(--bh-r);
text-decoration: none; color: inherit;
transition: background .15s ease;
}
.bh-nav .bh-feed-item:hover { background: var(--bh-page); }
.bh-nav .bh-feed-thumb {
flex: none; width: 56px; height: 56px; border-radius: 10px;
overflow: hidden; background: var(--bh-page); border: 1px solid var(--bh-line);
}
.bh-nav .bh-feed-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bh-nav .bh-feed-tx { flex: 1; min-width: 0; }
.bh-nav .bh-feed-tx b {
display: block; font-size: 13.5px; font-weight: 700; color: var(--bh-ink);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bh-nav .bh-feed-tx i { display: block; font-style: normal; font-size: 11.5px; color: var(--bh-muted); margin-top: 2px; }
.bh-nav .bh-feed-rating {
display: inline-flex; align-items: center; gap: 4px; flex: none;
padding: 3px 8px; border-radius: 999px;
background: var(--bh-red-tint); border: 1px solid var(--bh-red-tint-2);
color: var(--bh-red); font-size: 11.5px; font-weight: 800;
}
.bh-nav .bh-feed-rating svg { width: 11px; height: 11px; }
/* ── Promo ────────────────────────────────────────────────────────────── */
.bh-nav .bh-mega-promo {
position: relative; overflow: hidden;
margin-top: 14px; padding: 14px; border-radius: var(--bh-r-lg);
background: var(--bh-red-tint); border: 1px solid var(--bh-red-tint-2);
}
.bh-nav .bh-mega-promo-tx b { display: block; font-size: 14px; font-weight: 800; color: var(--bh-ink); }
.bh-nav .bh-mega-promo-tx p { margin: 4px 0 10px; font-size: 12.5px; color: var(--bh-muted); }
.bh-nav .bh-mega-promo-art { width: 100%; height: auto; border-radius: var(--bh-r); margin-top: 10px; }
/* =============================================================================
MEGA MENU — Articles panel
-----------------------------------------------------------------------------
The Articles menu used to render through the generic rail/feature panel: one
flat column of identical bookmark icons and a two-item feed. It carried none
of the information a reader needs to choose — how much is in a section, what
is worth reading, what the site is currently about.
This panel answers those three, each from a live query: category rows with a
real count, a spotlight, a most-read list ranked by page views, and the tags
that actually have articles behind them. Layout follows the reference under
assets/img/navi/, styled with the same tokens as the Games panel so the two
read as one header.
============================================================================= */
.bh-nav .bh-ma-in {
position: relative; z-index: 1;
display: grid;
grid-template-columns: 300px minmax(0, 1fr) 320px;
gap: 26px;
padding: 26px;
}
.bh-nav .bh-ma-col { min-width: 0; }
.bh-nav .bh-ma-right {
border-inline-start: 1px solid var(--bh-line);
padding-inline-start: 24px;
}
/* The rail is the tallest column — its height is however many categories the
site has. Rather than leave dead space beside it, the spotlight stretches to
meet it, so the panel stays a rectangle at any number of categories. */
.bh-nav .bh-ma-mid { display: flex; flex-direction: column; }
/* ── Headings ─────────────────────────────────────────────────────────── */
.bh-nav .bh-ma-h {
margin: 0 0 12px;
font-size: 11.5px; font-weight: 800;
letter-spacing: .13em; text-transform: uppercase;
color: var(--bh-muted);
}
.bh-nav .bh-ma-head {
display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.bh-nav .bh-ma-head .bh-ma-h { margin-bottom: 12px; }
.bh-nav .bh-ma-head > a {
display: inline-flex; align-items: center; gap: 5px;
font-size: 12px; font-weight: 700; color: var(--bh-red);
text-decoration: none; white-space: nowrap;
}
.bh-nav .bh-ma-head > a:hover { text-decoration: underline; }
/* ── Column 1: category rail ──────────────────────────────────────────── */
.bh-nav .bh-ma-cats { list-style: none; margin: 0 0 14px; padding: 0; }
.bh-nav .bh-ma-cats > li + li { margin-top: 2px; }
.bh-nav .bh-ma-cat {
display: flex; align-items: center; gap: 11px;
padding: 9px 11px; border-radius: var(--bh-r);
text-decoration: none; color: inherit;
border: 1px solid transparent;
transition: background .15s ease, border-color .15s ease;
}
.bh-nav .bh-ma-cat:hover { background: var(--bh-red-tint); border-color: var(--bh-red-tint-2); }
/* "All Articles" leads the rail solid, as the widest choice on offer. */
.bh-nav .bh-ma-cat.is-all { background: var(--bh-red); border-color: var(--bh-red); color: #fff; }
.bh-nav .bh-ma-cat.is-all:hover { background: #C8161D; border-color: #C8161D; }
.bh-nav .bh-ma-cat-ic {
display: grid; place-items: center; flex: none;
width: 34px; height: 34px; border-radius: 10px;
background: var(--bh-page); border: 1px solid var(--bh-line);
color: var(--bh-red);
}
.bh-nav .bh-ma-cat.is-all .bh-ma-cat-ic {
background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .28); color: #fff;
}
.bh-nav .bh-ma-cat-tx { min-width: 0; flex: 1; }
.bh-nav .bh-ma-cat-tx b {
display: block; font-size: 13.5px; font-weight: 700; color: var(--bh-ink);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bh-nav .bh-ma-cat-tx small {
display: block; font-size: 11.5px; color: var(--bh-muted); margin-top: 1px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bh-nav .bh-ma-cat.is-all .bh-ma-cat-tx b { color: #fff; }
.bh-nav .bh-ma-cat.is-all .bh-ma-cat-tx small { color: rgba(255, 255, 255, .82); }
/* The count. Tabular figures so a column of them lines up. */
.bh-nav .bh-ma-cat-n {
flex: none;
min-width: 30px; padding: 3px 8px; border-radius: 999px;
background: var(--bh-page); border: 1px solid var(--bh-line);
font-size: 11.5px; font-weight: 800; color: var(--bh-muted-2);
font-variant-numeric: tabular-nums; text-align: center;
}
.bh-nav .bh-ma-cat:hover .bh-ma-cat-n { background: var(--bh-card); border-color: var(--bh-red-tint-2); color: var(--bh-red); }
.bh-nav .bh-ma-cat.is-all .bh-ma-cat-n {
background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .3); color: #fff;
}
.bh-nav .bh-ma-all {
display: flex; align-items: center; justify-content: center; gap: 8px;
padding: 11px 16px; border-radius: var(--bh-r);
background: var(--bh-red-tint); border: 1px solid var(--bh-red-tint-2);
color: var(--bh-red); font-size: 13px; font-weight: 700; text-decoration: none;
transition: transform .16s ease;
}
.bh-nav .bh-ma-all:hover { transform: translateY(-1px); color: var(--bh-red); }
/* ── Column 2: spotlight ──────────────────────────────────────────────── */
.bh-nav .bh-ma-hero {
position: relative; display: block; overflow: hidden;
flex: 1 1 auto; min-height: 244px; max-height: 430px;
border-radius: var(--bh-r-lg);
background: var(--bh-page);
text-decoration: none; color: #fff;
margin-bottom: 20px;
}
.bh-nav .bh-ma-hero-bg {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover;
transition: transform .5s ease;
}
.bh-nav .bh-ma-hero:hover .bh-ma-hero-bg { transform: scale(1.045); }
/* Dark enough at the foot for white text over any thumbnail. */
.bh-nav .bh-ma-hero-veil {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(9, 10, 12, .12) 0%, rgba(9, 10, 12, .62) 52%, rgba(9, 10, 12, .93) 100%);
}
.bh-nav .bh-ma-hero-tx {
position: absolute; inset: auto 0 0 0;
display: flex; flex-direction: column; align-items: flex-start; gap: 9px;
padding: 18px 20px 18px;
}
.bh-nav .bh-ma-hero-tags { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.bh-nav .bh-ma-kicker {
display: inline-flex; align-items: center;
padding: 4px 10px; border-radius: 999px;
background: var(--bh-red); color: #fff;
font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.bh-nav .bh-ma-pill {
display: inline-flex; align-items: center;
padding: 4px 10px; border-radius: 999px;
background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .26);
color: #fff; font-size: 11px; font-weight: 700;
-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.bh-nav .bh-ma-hero-t {
font-size: 24px; font-weight: 800; line-height: 1.22; letter-spacing: -.02em; color: #fff;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bh-nav .bh-ma-hero-d {
font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .84);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bh-nav .bh-ma-hero-meta {
display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, .8);
}
.bh-nav .bh-ma-hero-meta span { display: inline-flex; align-items: center; gap: 5px; }
.bh-nav .bh-ma-hero-cta {
display: inline-flex; align-items: center; gap: 7px;
margin-top: 3px; padding: 9px 16px; border-radius: 999px;
background: var(--bh-red); color: #fff; font-size: 12.5px; font-weight: 700;
transition: transform .16s ease;
}
.bh-nav .bh-ma-hero:hover .bh-ma-hero-cta { transform: translateX(2px); }
/* ── Column 2: browse by type ─────────────────────────────────────────── */
.bh-nav .bh-ma-browse-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bh-nav .bh-ma-browse-item {
display: flex; align-items: center; gap: 11px;
padding: 11px 12px; border-radius: var(--bh-r);
border: 1px solid var(--bh-line); background: var(--bh-card);
text-decoration: none; color: inherit;
transition: border-color .16s ease, transform .16s ease;
}
.bh-nav .bh-ma-browse-item:hover { border-color: var(--bh-red-tint-2); transform: translateY(-2px); }
.bh-nav .bh-ma-browse-ic {
display: grid; place-items: center; flex: none;
width: 34px; height: 34px; border-radius: 10px;
background: var(--bh-red-tint); color: var(--bh-red);
}
.bh-nav .bh-ma-browse-tx { min-width: 0; flex: 1; }
.bh-nav .bh-ma-browse-tx b { display: block; font-size: 13px; font-weight: 700; color: var(--bh-ink); }
.bh-nav .bh-ma-browse-tx small {
display: block; font-size: 11.5px; color: var(--bh-muted); margin-top: 1px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bh-nav .bh-ma-browse-go { flex: none; color: var(--bh-muted-2); transition: transform .16s ease; }
.bh-nav .bh-ma-browse-item:hover .bh-ma-browse-go { color: var(--bh-red); transform: translateX(2px); }
/* ── Column 3: most read ──────────────────────────────────────────────── */
.bh-nav .bh-ma-pop { list-style: none; margin: 0 0 20px; padding: 0; }
.bh-nav .bh-ma-pop > li + li { margin-top: 3px; }
.bh-nav .bh-ma-pop a {
display: flex; align-items: center; gap: 11px;
padding: 7px; border-radius: var(--bh-r);
text-decoration: none; color: inherit;
transition: background .15s ease;
}
.bh-nav .bh-ma-pop a:hover { background: var(--bh-page); }
.bh-nav .bh-ma-pop-img {
position: relative; flex: none;
width: 58px; height: 52px; border-radius: 10px; overflow: hidden;
background: var(--bh-page); border: 1px solid var(--bh-line);
}
.bh-nav .bh-ma-pop-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Rank, not a decoration: the list is ordered by real page views. */
.bh-nav .bh-ma-pop-rank {
position: absolute; left: 0; bottom: 0;
min-width: 19px; height: 18px; padding: 0 4px;
display: grid; place-items: center;
background: var(--bh-red); color: #fff;
font-size: 10.5px; font-weight: 800; line-height: 1;
border-start-end-radius: 7px;
}
.bh-nav .bh-ma-pop-tx { min-width: 0; flex: 1; }
.bh-nav .bh-ma-pop-tx b {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--bh-ink);
}
.bh-nav .bh-ma-pop-tx small {
display: flex; align-items: center; gap: 9px; margin-top: 3px;
font-size: 11.5px; color: var(--bh-muted);
}
.bh-nav .bh-ma-pop-tx small em {
display: inline-flex; align-items: center; gap: 4px;
font-style: normal; font-weight: 700; color: var(--bh-muted-2);
}
.bh-nav .bh-ma-pop a:hover .bh-ma-pop-tx b { color: var(--bh-red); }
/* ── Column 3: trending tags ──────────────────────────────────────────── */
.bh-nav .bh-ma-tagrow { display: flex; flex-wrap: wrap; gap: 7px; }
.bh-nav .bh-ma-tag {
display: inline-flex; align-items: center; gap: 1px;
padding: 6px 12px; border-radius: 999px;
background: var(--bh-page); border: 1px solid var(--bh-line);
font-size: 12px; font-weight: 600; color: var(--bh-ink-2); text-decoration: none;
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.bh-nav .bh-ma-tag i { font-style: normal; font-weight: 800; color: var(--bh-red); opacity: .75; }
.bh-nav .bh-ma-tag:hover {
background: var(--bh-red-tint); border-color: var(--bh-red-tint-2); color: var(--bh-red);
}
/* =============================================================================
ACCOUNT MENU
-----------------------------------------------------------------------------
The Account button went straight to /profile, which made the profile page the
only thing a signed-in visitor could reach from the header — logging out
meant finding the link on that page first. It is now a disclosure over the
account actions this application actually serves.
Anchored to .bh-acct rather than the header, so it stays under the button at
every width instead of being centred like the mega panels.
============================================================================= */
.bh-nav .bh-acct { position: relative; display: flex; }
.bh-nav .bh-acct-btn { gap: 9px; }
.bh-nav .bh-acct-caret { width: 15px !important; height: 15px !important; opacity: .85; transition: transform .2s ease; }
.bh-nav .bh-acct-btn[aria-expanded="true"] .bh-acct-caret { transform: rotate(180deg); }
.bh-nav .bh-acct-menu {
position: absolute;
top: calc(100% + 10px);
inset-inline-end: 0;
z-index: 75;
width: 272px;
max-width: calc(100vw - 24px);
padding: 8px;
background: var(--bh-card);
border: 1px solid var(--bh-line);
border-radius: var(--bh-r-lg);
box-shadow: var(--bh-shadow-lg);
opacity: 0;
pointer-events: none;
transform: translateY(-6px);
transition: opacity .16s ease, transform .16s ease;
}
.bh-nav .bh-acct-menu.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
.bh-nav .bh-acct-menu, .bh-nav .bh-acct-caret { transition: none; }
}
/* ── Who you are signed in as ─────────────────────────────────────────── */
.bh-nav .bh-acct-who {
display: flex; align-items: center; gap: 11px;
padding: 10px; margin-bottom: 6px;
border-radius: var(--bh-r);
background: var(--bh-page);
text-decoration: none; color: inherit;
transition: background .15s ease;
}
.bh-nav .bh-acct-who:hover { background: var(--bh-red-tint); }
.bh-nav .bh-acct-who img {
flex: none; width: 42px; height: 42px; border-radius: 50%;
object-fit: cover; background: var(--bh-card);
border: 1px solid var(--bh-line);
}
.bh-nav .bh-acct-who span { min-width: 0; }
.bh-nav .bh-acct-who b,
.bh-nav .bh-acct-who small {
display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bh-nav .bh-acct-who b { font-size: 13.5px; font-weight: 700; color: var(--bh-ink); }
.bh-nav .bh-acct-who small { font-size: 11.5px; color: var(--bh-muted); margin-top: 2px; }
/* ── Rows ─────────────────────────────────────────────────────────────── */
.bh-nav .bh-acct-list { list-style: none; margin: 0; padding: 0; }
.bh-nav .bh-acct-list a,
.bh-nav .bh-acct-out {
display: flex; align-items: center; gap: 11px;
padding: 10px 11px; border-radius: var(--bh-r);
font-size: 13.5px; font-weight: 600; color: var(--bh-ink-2);
text-decoration: none;
transition: background .15s ease, color .15s ease;
}
.bh-nav .bh-acct-list a svg,
.bh-nav .bh-acct-out svg { flex: none; color: var(--bh-muted-2); transition: color .15s ease; }
.bh-nav .bh-acct-list a:hover { background: var(--bh-red-tint); color: var(--bh-red); }
.bh-nav .bh-acct-list a:hover svg { color: var(--bh-red); }
/* Verify Email — present only while the address is unverified, and marked so
it reads as something outstanding rather than another destination. */
.bh-nav .bh-acct-list a.is-warn { color: #B45309; }
.bh-nav .bh-acct-list a.is-warn svg { color: #D97706; }
.bh-nav .bh-acct-list a.is-warn:hover { background: rgba(217, 119, 6, .1); color: #92400E; }
/* Log Out sits below a rule: it is the one row here that ends the session. */
.bh-nav .bh-acct-out {
margin-top: 6px; padding-top: 12px;
border-top: 1px solid var(--bh-line);
border-radius: 0 0 var(--bh-r) var(--bh-r);
color: var(--bh-red);
}
.bh-nav .bh-acct-out svg { color: var(--bh-red); }
.bh-nav .bh-acct-out:hover { background: var(--bh-red-tint); color: var(--bh-red); }
.bh-nav .bh-acct-menu a:focus-visible {
outline: 2px solid var(--bh-red); outline-offset: -2px;
}
/* =============================================================================
PHONE SEARCH + MOBILE DRAWER
============================================================================= */
.bh-nav .bh-msearch {
border-top: 1px solid var(--bh-line);
background: var(--bh-card);
padding: 12px 0;
}
.bh-nav .bh-msearch form {
display: flex; align-items: center; gap: 10px;
height: 46px; padding: 0 16px;
border: 1px solid var(--bh-line-2); border-radius: 999px;
background: var(--bh-page);
max-width: var(--bh-max);
}
.bh-nav .bh-msearch svg { width: 18px; height: 18px; color: var(--bh-muted); flex: none; }
.bh-nav .bh-msearch input {
flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
font: inherit; font-size: 14px; color: var(--bh-ink);
}
.bh-nav .bh-mnav {
border-top: 1px solid var(--bh-line);
background: var(--bh-card);
max-height: calc(100vh - 84px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 10px 0 22px;
}
.bh-nav .bh-macc { border-bottom: 1px solid var(--bh-line); }
.bh-nav .bh-macc > summary {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; padding: 15px 4px; cursor: pointer; list-style: none;
font-size: 15.5px; font-weight: 700; color: var(--bh-ink);
}
.bh-nav .bh-macc > summary::-webkit-details-marker { display: none; }
.bh-nav .bh-macc > summary svg { width: 17px; height: 17px; color: var(--bh-muted); transition: transform .2s ease; }
.bh-nav .bh-macc[open] > summary svg { transform: rotate(180deg); }
.bh-nav .bh-macc[open] > summary { color: var(--bh-red); }
.bh-nav .bh-macc ul { list-style: none; margin: 0 0 10px; padding: 0; }
.bh-nav .bh-macc ul a {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 10px 12px; border-radius: 10px;
font-size: 14px; color: var(--bh-ink-2); text-decoration: none;
}
.bh-nav .bh-macc ul a:hover { background: var(--bh-red-tint); color: var(--bh-red); }
.bh-nav .bh-macc ul a em { font-style: normal; font-size: 11.5px; color: var(--bh-muted); }
.bh-nav .bh-macc-h {
margin: 12px 0 6px; padding: 0 4px;
font-size: 10.5px; font-weight: 800; letter-spacing: .13em;
text-transform: uppercase; color: var(--bh-muted);
}
.bh-nav .bh-macc-all {
display: inline-flex; margin: 4px 0 6px; padding: 9px 16px;
border-radius: 999px; background: var(--bh-red-tint);
color: var(--bh-red); font-size: 13px; font-weight: 700; text-decoration: none;
}
/* Tag chips in the drawer — a wrapping row rather than another long list, so
ten tags cost three lines instead of ten. */
.bh-nav .bh-macc-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 12px; padding: 0 2px; }
.bh-nav .bh-macc-tags a {
display: inline-flex; padding: 7px 13px; border-radius: 999px;
background: var(--bh-page); border: 1px solid var(--bh-line);
font-size: 12.5px; font-weight: 600; color: var(--bh-ink-2); text-decoration: none;
}
.bh-nav .bh-macc-tags a:hover { background: var(--bh-red-tint); border-color: var(--bh-red-tint-2); color: var(--bh-red); }
.bh-nav .bh-macc-link {
display: block; padding: 15px 4px;
border-bottom: 1px solid var(--bh-line);
font-size: 15.5px; font-weight: 700; color: var(--bh-ink); text-decoration: none;
}
.bh-nav .bh-macc-link:hover { color: var(--bh-red); }
body.bh-noscroll { overflow: hidden; }
/* =============================================================================
RESPONSIVE
The desktop panel is never squeezed onto a phone — below the mega breakpoint
the triggers and panels are removed from the layout entirely and the drawer
takes over. Nothing overflows sideways at any width.
============================================================================= */
@media (max-width: 1420px) {
.bh-nav .bh-mg, .bh-nav .bh-ma, .bh-nav .bh-mega { width: calc(100vw - 32px); }
}
@media (max-width: 1240px) {
/* Search is hidden from 1366px down, so its width is only meaningful above. */
.bh-nav-links { gap: 24px; }
.bh-nav .bh-mg-in { grid-template-columns: 268px minmax(0, 1fr) 280px; gap: 20px; padding: 20px; }
.bh-nav .bh-mg-hero { height: 262px; }
.bh-nav .bh-mg-hero-t { font-size: 29px; }
.bh-nav .bh-ma-in { grid-template-columns: 268px minmax(0, 1fr) 290px; gap: 20px; padding: 20px; }
.bh-nav .bh-ma-hero { height: 224px; }
.bh-nav .bh-ma-hero-t { font-size: 21px; }
}
@media (max-width: 1080px) {
/* Trending drops under the first two columns rather than being crushed. */
.bh-nav .bh-mg-in { grid-template-columns: 264px minmax(0, 1fr); }
.bh-nav .bh-mg-right {
grid-column: 1 / -1;
border-left: 0; padding-left: 0;
border-top: 1px solid var(--bh-line); padding-top: 18px;
}
/* Same treatment for Articles: most-read and tags go full width under the
rail and the spotlight rather than being squeezed to a thread. */
.bh-nav .bh-ma-in { grid-template-columns: 264px minmax(0, 1fr); }
.bh-nav .bh-ma-right {
grid-column: 1 / -1;
border-inline-start: 0; padding-inline-start: 0;
border-top: 1px solid var(--bh-line); padding-top: 18px;
}
.bh-nav .bh-ma-pop { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin-bottom: 16px; }
.bh-nav .bh-mg-tiles { grid-template-columns: 1fr; gap: 18px; }
.bh-nav .bh-mg-tilegrp + .bh-mg-tilegrp { border-left: 0; padding-left: 0; }
.bh-nav .bh-mega-in { grid-template-columns: 1fr; }
.bh-nav .bh-meg-ri { border-left: 0; padding-left: 0; border-top: 1px solid var(--bh-line); padding-top: 18px; }
}
/* =============================================================================
TOOLS CAPSULE — search + theme + notifications as one control
Built to the Section 1 capsule sheet of 19 August 2026. Three shapes, not one:
desktop rounded rectangle, short hairline dividers between segments
tablet full pill, each icon in its own circular well, no dividers
mobile rounded rectangle again, tighter
Light carries a soft drop shadow; dark swaps it for a red bloom. Every colour
is a --bh-* token, so the whole thing follows the theme with the header.
============================================================================= */
.bh-nav .bh-tools {
display: flex;
align-items: stretch;
height: 48px;
background: var(--bh-card);
border: 0;
border-radius: 16px;
box-shadow: var(--bh-shadow);
overflow: visible; /* the bell panel escapes the capsule */
transition: box-shadow .18s ease;
}
/* The field never appears in the bar now — the magnifier opens the existing
.bh-msearch panel beneath the header instead. */
.bh-nav .bh-tools .bh-search { display: none; }
.bh-nav .bh-tools .bh-searchbtn { display: grid; }
/* Segments carry no chrome of their own; the capsule provides all of it. */
.bh-nav .bh-tools > .bh-icon-btn,
.bh-nav .bh-tools > .bh-bell > .bh-icon-btn {
position: relative;
width: 52px; height: auto;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.bh-nav .bh-tools > .bh-bell { position: relative; display: flex; }
/* Dividers are short centred hairlines rather than full-height borders — a
full-height rule would read as a hard seam and cut the capsule into three
boxes instead of one control. */
.bh-nav .bh-tools > .bh-icon-btn + .bh-icon-btn::before,
.bh-nav .bh-tools > .bh-bell::before {
content: '';
position: absolute;
inset-block: 14px;
inset-inline-start: 0;
width: 1px;
background: var(--bh-line-2);
pointer-events: none;
}
/* Rounded ends so a hover tint cannot paint a square corner over the capsule. */
.bh-nav .bh-tools > .bh-searchbtn { border-radius: 16px 0 0 16px; }
.bh-nav .bh-tools > .bh-bell > .bh-icon-btn { border-radius: 0 16px 16px 0; }
.bh-nav .bh-tools > .bh-icon-btn:hover,
.bh-nav .bh-tools > .bh-bell > .bh-icon-btn:hover { color: var(--bh-red); }
.bh-nav .bh-tools > .bh-icon-btn:focus-visible,
.bh-nav .bh-tools > .bh-bell > .bh-icon-btn:focus-visible {
outline: 2px solid var(--bh-red);
outline-offset: -3px;
border-radius: 12px;
}
.bh-nav .bh-tools .bh-bell-dot {
top: 11px; inset-inline-end: 11px;
width: 9px; height: 9px;
box-shadow: 0 0 0 2px var(--bh-card);
}
/* ── Dark: the shadow becomes a red bloom ──────────────────────────────────
Kept low-alpha and tight. The brief rules out neon and heavy glow, so this
is a bloom that lifts the capsule off a near-black bar, not a light source. */
body.theme-dark .bh-nav .bh-tools,
.bh-nav.theme-dark .bh-tools {
background: #0F0F13;
box-shadow:
0 0 0 1px rgba(255, 255, 255, .06),
0 0 18px -2px rgba(229, 27, 35, .34),
0 6px 20px -6px rgba(0, 0, 0, .7);
}
body.theme-dark .bh-nav .bh-tools > .bh-icon-btn + .bh-icon-btn::before,
body.theme-dark .bh-nav .bh-tools > .bh-bell::before,
.bh-nav.theme-dark .bh-tools > .bh-icon-btn + .bh-icon-btn::before,
.bh-nav.theme-dark .bh-tools > .bh-bell::before { background: rgba(255, 255, 255, .16); }
body.theme-dark .bh-nav .bh-tools .bh-bell-dot,
.bh-nav.theme-dark .bh-tools .bh-bell-dot { box-shadow: 0 0 0 2px #0F0F13; }
/* ── TABLET · 768–1023px — pill with circular wells ───────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
.bh-nav .bh-tools {
border-radius: 999px;
padding: 0 6px;
gap: 4px;
align-items: center;
}
/* Wells replace the dividers as the thing separating the icons. */
.bh-nav .bh-tools > .bh-icon-btn + .bh-icon-btn::before,
.bh-nav .bh-tools > .bh-bell::before { display: none; }
.bh-nav .bh-tools > .bh-icon-btn,
.bh-nav .bh-tools > .bh-bell > .bh-icon-btn {
width: 40px; height: 40px;
border-radius: 50%;
border: 1px solid var(--bh-line);
}
body.theme-dark .bh-nav .bh-tools > .bh-icon-btn,
body.theme-dark .bh-nav .bh-tools > .bh-bell > .bh-icon-btn,
.bh-nav.theme-dark .bh-tools > .bh-icon-btn,
.bh-nav.theme-dark .bh-tools > .bh-bell > .bh-icon-btn {
border-color: rgba(255, 255, 255, .10);
background: rgba(255, 255, 255, .035);
}
.bh-nav .bh-tools .bh-bell-dot { top: 2px; inset-inline-end: 2px; }
}
/* ── MOBILE · ≤767px — rounded rectangle again, tighter ───────────────────── */
@media (max-width: 767px) {
.bh-nav .bh-tools { height: 44px; border-radius: 14px; }
.bh-nav .bh-tools > .bh-icon-btn,
.bh-nav .bh-tools > .bh-bell > .bh-icon-btn { width: 44px; }
.bh-nav .bh-tools > .bh-searchbtn { border-radius: 14px 0 0 14px; }
.bh-nav .bh-tools > .bh-bell > .bh-icon-btn { border-radius: 0 14px 14px 0; }
.bh-nav .bh-tools > .bh-icon-btn + .bh-icon-btn::before,
.bh-nav .bh-tools > .bh-bell::before { inset-block: 12px; }
}
/* =============================================================================
NOTIFICATIONS BELL
Sits between the theme toggle and the account control. Every colour comes
from the --bh-* tokens, so the panel follows the theme with the rest of the
header rather than needing its own dark ruleset.
============================================================================= */
.bh-nav .bh-bell { position: relative; }
.bh-nav .bh-bell-dot {
position: absolute; top: 9px; right: 9px;
width: 8px; height: 8px; border-radius: 999px;
background: var(--bh-red);
box-shadow: 0 0 0 2px var(--bh-card);
}
.bh-nav .bh-bell-menu {
position: absolute; top: calc(100% + 10px); inset-inline-end: 0;
width: 340px; max-width: calc(100vw - 24px);
background: var(--bh-card);
border: 1px solid var(--bh-line);
border-radius: var(--bh-r);
box-shadow: var(--bh-shadow-md);
padding: 6px;
z-index: 60;
max-height: min(420px, calc(100vh - 120px));
overflow-y: auto;
overscroll-behavior: contain;
}
.bh-nav .bh-bell-menu[hidden] { display: none; }
.bh-nav .bh-bell-head {
font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
color: var(--bh-muted); padding: 10px 12px 8px;
}
.bh-nav .bh-bell-item {
display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 11px;
padding: 10px 12px; border-radius: var(--bh-r-sm);
text-decoration: none; color: inherit;
align-items: start;
}
.bh-nav a.bh-bell-item:hover,
.bh-nav a.bh-bell-item:focus-visible { background: var(--bh-red-tint); }
.bh-nav .bh-bell-ic {
width: 34px; height: 34px; border-radius: 9px;
display: grid; place-items: center;
background: var(--bh-red-tint); color: var(--bh-red);
overflow: hidden; flex: none;
}
.bh-nav .bh-bell-ic svg { width: 17px; height: 17px; }
.bh-nav .bh-bell-ic img { width: 100%; height: 100%; object-fit: cover; }
.bh-nav .bh-bell-tx { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bh-nav .bh-bell-tx b {
font-size: 14px; font-weight: 650; color: var(--bh-ink);
line-height: 1.3;
}
.bh-nav .bh-bell-tx span {
font-size: 12.5px; color: var(--bh-muted); line-height: 1.45;
}
.bh-nav .bh-bell-tx time {
font-size: 11.5px; color: var(--bh-muted-2); margin-top: 2px;
}
.bh-nav .bh-bell-empty {
display: flex; flex-direction: column; align-items: center; gap: 6px;
text-align: center; padding: 26px 20px 24px;
}
.bh-nav .bh-bell-empty svg { width: 30px; height: 30px; color: var(--bh-muted-2); margin-bottom: 2px; }
.bh-nav .bh-bell-empty b { font-size: 14px; color: var(--bh-ink); }
.bh-nav .bh-bell-empty span { font-size: 12.5px; color: var(--bh-muted); max-width: 30ch; line-height: 1.5; }
/* On phones the panel spans the header rather than hanging off one control,
which at 340px would otherwise overflow the viewport edge. */
@media (max-width: 767px) {
.bh-nav .bh-bell { position: static; }
.bh-nav .bh-bell-menu {
inset-inline: 12px; width: auto;
top: calc(100% + 6px);
}
}
/* =============================================================================
HEADER RESPONSIVE LADDER
Four distinct states, matching the Section 1 design of 18 August 2026:
>=1367 desktop full wordmark + tagline, 6 nav items, 300px search field
1024-1366 laptop search removed, tighter nav, compact controls
768-1023 tablet nav moves into the drawer, burger appears on the left
<=767 mobile burger left, wordmark centred, controls as circles
The 1024-1366 range is where the header used to overflow horizontally:
.bh-nav-actions is flex:none and held a fixed 300px field, so when the nav
and brand no longer fit, nothing could yield and the account button pushed
past the viewport (scrollWidth 1138 inside clientWidth 1076). Dropping the
field there removes the pressure; min-width:0 on the nav makes that robust
rather than merely lucky.
============================================================================= */
/* ── LAPTOP · 1024–1366px ───────────────────────────────────────────────── */
@media (max-width: 1366px) {
.bh-nav-in { gap: 18px; height: 76px; }
.bh-nav-nav { min-width: 0; }
.bh-nav-links { gap: 22px; }
/* The wide field never existed below this width. The magnifier stays at
every size — at 46px it costs nothing, and it keeps search reachable on
phones, where the original design dropped it entirely. */
.bh-nav .bh-search { display: none; }
.bh-nav .bh-brand-mark { height: 50px; }
.bh-nav .bh-brand-tx b,
.bh-nav .bh-brand-tx i { font-size: 19px; }
.bh-nav .bh-brand-tx small { display: none; }
.bh-nav .bh-icon-btn { width: 44px; height: 44px; }
.bh-nav .bh-login { height: 44px; padding: 0 16px; }
}
/* ── TABLET · 768–1023px ────────────────────────────────────────────────── */
@media (max-width: 1023px) {
/* Inline nav and every mega panel leave the layout; the drawer takes over.
display:none on the panels guarantees no off-screen width can create a
horizontal scrollbar. */
.bh-nav-nav { display: none; }
.bh-nav .bh-mg, .bh-nav .bh-ma, .bh-nav .bh-mega { display: none; }
.bh-nav .bh-burger { display: grid; }
.bh-nav-in { gap: 14px; }
/* .bh-nav-nav carried `margin: 0 auto`, which is what pushed the control
cluster to the right edge. Hiding the nav removes that push, so the
actions have to claim the free space themselves or everything bunches
against the burger. */
.bh-nav-actions { margin-inline-start: auto; }
}
/* ── MOBILE · ≤767px ────────────────────────────────────────────────────── */
@media (max-width: 767px) {
/* Three columns rather than flex, so the wordmark is centred against the
viewport itself — not against whatever space the burger and the control
cluster happen to leave, which would sit it visibly off-centre. */
.bh-nav-in {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
height: 70px;
gap: 10px;
}
.bh-nav .bh-burger { justify-self: start; }
.bh-nav .bh-brand { justify-self: center; }
.bh-nav-actions { justify-self: end; gap: 9px; }
.bh-nav .bh-brand-mark { height: 46px; }
/* The phone bar started with two controls; it now carries four (search,
theme, notifications, account) plus the burger. At 400px the wordmark no
longer fits between them and was running under the capsule, so the mark
stands alone here — still centred, and still unmistakably the brand.
The full lockup returns at 768px where there is room for it. */
.bh-nav .bh-brand-tx { display: none; }
/* Account collapses to a circular icon: the label and the disclosure caret
go, and the pill becomes a circle the same size as the theme toggle. */
.bh-nav .bh-login span,
.bh-nav .bh-acct-caret { display: none; }
.bh-nav .bh-login {
width: 44px; padding: 0;
border-radius: 999px;
justify-content: center;
}
.bh-nav .bh-icon-btn { width: 44px; height: 44px; }
.bh-nav .bh-mnav { max-height: calc(100vh - 70px); }
}
/* ── SMALL PHONES · ≤400px ───────────────────────────────────────────────────
Five things now share the bar: burger, mark, and three capsule segments plus
the account button. At 360px-class devices that overflowed, so everything
steps down one notch rather than the bar scrolling sideways. Tap targets
stay at 40px, which is still above the 24px minimum and comfortable.
---------------------------------------------------------------------------- */
@media (max-width: 400px) {
.bh-nav-in { gap: 6px; }
.bh-nav .bh-brand-mark { height: 40px; }
.bh-nav .bh-tools { height: 40px; }
.bh-nav .bh-tools > .bh-icon-btn,
.bh-nav .bh-tools > .bh-bell > .bh-icon-btn { width: 40px; }
.bh-nav .bh-icon-btn { width: 40px; height: 40px; }
.bh-nav .bh-login { width: 40px; height: 40px; }
}
/* =============================================================================
DARK THEME — only what the tokens cannot express
============================================================================= */
body.theme-dark .bh-nav,
.bh-nav.theme-dark { background: #0E0E11; border-bottom-color: var(--bh-line); }
body.theme-dark .bh-mg, body.theme-dark .bh-ma, body.theme-dark .bh-mega,
.bh-nav.theme-dark .bh-mg, .bh-nav.theme-dark .bh-ma, .bh-nav.theme-dark .bh-mega {
/* Fully opaque. A mega panel floats over arbitrary page content, so any
translucency costs readability for nothing. */
background: #141417;
border-color: var(--bh-line-2);
}
body.theme-dark .bh-nav .bh-mg-tile, body.theme-dark .bh-nav .bh-mg-tag, body.theme-dark .bh-nav .bh-mg-disc-ic, body.theme-dark .bh-nav .bh-ri-i, body.theme-dark .bh-nav .bh-meg-rd-i, body.theme-dark .bh-nav .bh-mg-trend-img, body.theme-dark .bh-nav .bh-meg-tie-img,
.bh-nav.theme-dark .bh-mg-tile, .bh-nav.theme-dark .bh-mg-tag, .bh-nav.theme-dark .bh-mg-disc-ic, .bh-nav.theme-dark .bh-ri-i, .bh-nav.theme-dark .bh-meg-rd-i, .bh-nav.theme-dark .bh-mg-trend-img, .bh-nav.theme-dark .bh-meg-tie-img { background: #17171B; border-color: var(--bh-line-2); }
body.theme-dark .bh-nav .bh-mg-findbox,
.bh-nav.theme-dark .bh-mg-findbox { background: #17171B; border-color: rgba(229, 27, 35, .34); }
body.theme-dark .bh-nav .bh-mg-trend a:hover, body.theme-dark .bh-nav .bh-meg-tie:hover,
.bh-nav.theme-dark .bh-mg-trend a:hover, .bh-nav.theme-dark .bh-meg-tie:hover { background: #17171B; }
body.theme-dark .bh-nav .bh-icon-btn, body.theme-dark .bh-nav .bh-search,
.bh-nav.theme-dark .bh-icon-btn, .bh-nav.theme-dark .bh-search { background: #17171B; border-color: var(--bh-line-2); }
body.theme-dark .bh-nav .bh-search:focus-within,
.bh-nav.theme-dark .bh-search:focus-within { background: #1C1C21; }
body.theme-dark .bh-msearch, body.theme-dark .bh-mnav,
.bh-nav.theme-dark .bh-msearch, .bh-nav.theme-dark .bh-mnav { background: #0E0E11; }
body.theme-dark .bh-nav .bh-msearch form,
.bh-nav.theme-dark .bh-msearch form { background: #17171B; }
/* Articles panel: the surfaces the tokens cannot reach, matching the Games
panel's treatment so both read the same in dark. */
body.theme-dark .bh-nav .bh-ma-cat-ic, body.theme-dark .bh-nav .bh-ma-cat-n,
body.theme-dark .bh-nav .bh-ma-tag, body.theme-dark .bh-nav .bh-ma-pop-img,
body.theme-dark .bh-nav .bh-ma-browse-item, body.theme-dark .bh-nav .bh-ma-hero,
.bh-nav.theme-dark .bh-ma-cat-ic, .bh-nav.theme-dark .bh-ma-cat-n,
.bh-nav.theme-dark .bh-ma-tag, .bh-nav.theme-dark .bh-ma-pop-img,
.bh-nav.theme-dark .bh-ma-browse-item, .bh-nav.theme-dark .bh-ma-hero {
background: #17171B; border-color: var(--bh-line-2);
}
body.theme-dark .bh-nav .bh-ma-pop a:hover,
.bh-nav.theme-dark .bh-ma-pop a:hover { background: #17171B; }
body.theme-dark .bh-nav .bh-ma-cat:hover .bh-ma-cat-n,
.bh-nav.theme-dark .bh-ma-cat:hover .bh-ma-cat-n { background: #1C1C21; }
/* is-all stays solid red in both themes — it is the panel's primary action. */
body.theme-dark .bh-nav .bh-ma-cat.is-all,
.bh-nav.theme-dark .bh-ma-cat.is-all { background: var(--bh-red); border-color: var(--bh-red); }
body.theme-dark .bh-nav .bh-ma-cat.is-all .bh-ma-cat-ic,
.bh-nav.theme-dark .bh-ma-cat.is-all .bh-ma-cat-ic {
background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .28);
}
body.theme-dark .bh-nav .bh-ma-cat.is-all .bh-ma-cat-n,
.bh-nav.theme-dark .bh-ma-cat.is-all .bh-ma-cat-n {
background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .3);
}
body.theme-dark .bh-nav .bh-ma-right,
.bh-nav.theme-dark .bh-ma-right { border-color: var(--bh-line-2); }
/* Account menu: opaque like the mega panels — it floats over page content. */
body.theme-dark .bh-nav .bh-acct-menu,
.bh-nav.theme-dark .bh-acct-menu { background: #141417; border-color: var(--bh-line-2); }
body.theme-dark .bh-nav .bh-acct-who,
.bh-nav.theme-dark .bh-acct-who { background: #17171B; }
body.theme-dark .bh-nav .bh-acct-who img,
.bh-nav.theme-dark .bh-acct-who img { background: #1C1C21; border-color: var(--bh-line-2); }
body.theme-dark .bh-nav .bh-acct-out,
.bh-nav.theme-dark .bh-acct-out { border-top-color: var(--bh-line-2); }
/* Amber reads muddy on a dark surface; the same warning, lifted. */
body.theme-dark .bh-nav .bh-acct-list a.is-warn,
.bh-nav.theme-dark .bh-acct-list a.is-warn { color: #FBBF24; }
body.theme-dark .bh-nav .bh-acct-list a.is-warn svg,
.bh-nav.theme-dark .bh-acct-list a.is-warn svg { color: #FBBF24; }
body.theme-dark .bh-nav .bh-acct-list a.is-warn:hover,
.bh-nav.theme-dark .bh-acct-list a.is-warn:hover { background: rgba(251, 191, 36, .14); color: #FCD34D; }
/* =============================================================================
MEGA MENU — Companies
-----------------------------------------------------------------------------
Layout follows the supplied reference image. The shell (position, open/close
animation, ambient, dark theming) is inherited from the shared block above;
only what is specific to this panel lives here.
ONE CARD IS THE WHOLE POINT. The discovery row and the figures sit on the
panel's own surface, divided from the columns by hairlines rather than by a
gap — no second background, no second radius, no second shadow. A statistics
strip with its own card would read as a separate component that happened to
land underneath the menu, which is exactly what the reference does not do.
============================================================================= */
.bh-nav .bh-mc { width: min(1420px, calc(100vw - 36px)); }
.bh-nav .bh-mc-arrow {
position: absolute; top: -7px; left: 50%; z-index: 2;
width: 13px; height: 13px; margin-left: -6px;
background: var(--bh-card);
border-left: 1px solid var(--bh-line);
border-top: 1px solid var(--bh-line);
transform: rotate(45deg); border-radius: 2px 0 0 0;
}
/* Three columns: the rail, the wide middle, the side list. The middle takes
the slack so the two edges stay the width their content wants. */
.bh-nav .bh-mc-in {
position: relative; z-index: 1;
display: grid;
grid-template-columns: 264px minmax(0, 1fr) 300px;
gap: 0;
}
/* Hairlines between columns, drawn on the columns rather than as separate
elements so they end exactly where the padding does. */
.bh-nav .bh-mc-mid { border-left: 1px solid var(--bh-line); border-right: 1px solid var(--bh-line); }
.bh-nav .bh-mc-rail,
.bh-nav .bh-mc-mid,
.bh-nav .bh-mc-side { padding: 18px 20px 20px; min-width: 0; }
.bh-nav .bh-mc-eyebrow {
margin: 0 0 10px;
font-size: 10.5px; font-weight: 700; letter-spacing: .13em;
text-transform: uppercase; color: var(--bh-muted-2);
}
/* ── Column 1 — categories ───────────────────────────────────────────────── */
.bh-nav .bh-mc-cats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.bh-nav .bh-mc-cat {
display: flex; align-items: center; gap: 10px;
padding: 6px 9px; border-radius: var(--bh-r);
text-decoration: none; color: var(--bh-ink-2);
transition: background .16s ease, color .16s ease;
}
.bh-nav .bh-mc-cat:hover { background: var(--bh-red-tint); color: var(--bh-ink); }
.bh-nav .bh-mc-cat-ic {
flex: none; display: grid; place-items: center;
width: 32px; height: 32px; border-radius: 9px;
background: var(--bh-red-tint); color: var(--bh-red);
transition: background .16s ease, color .16s ease;
}
.bh-nav .bh-mc-cat-b { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.bh-nav .bh-mc-cat-n {
font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3;
/* Wraps rather than clips: the label is a CMS value, and "Developer &
publisher" is a real one that does not fit on a 264px rail. */
overflow-wrap: anywhere;
}
.bh-nav .bh-mc-cat-d { font-size: 11.5px; color: var(--bh-muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bh-nav .bh-mc-cat-c {
flex: none; font-size: 11.5px; font-weight: 700;
padding: 2px 8px; border-radius: 999px;
background: var(--bh-page); color: var(--bh-muted);
}
/* The one prominent row the reference gives the active category. */
.bh-nav .bh-mc-cat.is-on {
background: var(--bh-red-grad); color: #fff;
box-shadow: var(--bh-shadow-red);
}
.bh-nav .bh-mc-cat.is-on .bh-mc-cat-ic { background: rgba(255,255,255,.2); color: #fff; }
.bh-nav .bh-mc-cat.is-on .bh-mc-cat-d { color: rgba(255,255,255,.82); }
.bh-nav .bh-mc-cat.is-on .bh-mc-cat-c { background: rgba(255,255,255,.22); color: #fff; }
.bh-nav .bh-mc-all {
display: flex; align-items: center; justify-content: center; gap: 8px;
margin-top: 11px; padding: 9px 14px;
border: 1px solid var(--bh-red); border-radius: var(--bh-r);
color: var(--bh-red); font-size: 13px; font-weight: 650; text-decoration: none;
transition: background .16s ease, color .16s ease, gap .16s ease;
}
.bh-nav .bh-mc-all svg { width: 15px; height: 15px; }
.bh-nav .bh-mc-all:hover { background: var(--bh-red); color: #fff; gap: 12px; }
/* ── Column 2 — top companies ────────────────────────────────────────────── */
.bh-nav .bh-mc-top {
display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
gap: 7px; margin-bottom: 13px;
}
.bh-nav .bh-mc-co {
display: flex; flex-direction: column; align-items: center; gap: 6px;
padding: 10px 8px 9px; border-radius: var(--bh-r);
border: 1px solid var(--bh-line); background: var(--bh-card);
text-decoration: none; text-align: center;
transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.bh-nav .bh-mc-co:hover {
border-color: rgba(229,27,35,.34);
transform: translateY(-2px);
box-shadow: var(--bh-shadow-md);
}
.bh-nav .bh-mc-co-logo {
display: grid; place-items: center;
width: 38px; height: 38px; border-radius: 10px;
background: #fff; border: 1px solid var(--bh-line); overflow: hidden;
}
.bh-nav .bh-mc-co-logo img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.bh-nav .bh-mc-co-logo b { font-size: 17px; font-weight: 800; color: var(--bh-red); }
.bh-nav .bh-mc-co-n {
display: flex; align-items: center; justify-content: center; gap: 4px;
font-size: 12.5px; font-weight: 650; color: var(--bh-ink); line-height: 1.25;
}
.bh-nav .bh-mc-tick { width: 13px; height: 13px; flex: none; color: #2C7BE5; }
.bh-nav .bh-mc-co-m { font-size: 11px; color: var(--bh-muted-2); }
/* ── Column 2 — the story and the tiles ──────────────────────────────────── */
.bh-nav .bh-mc-split {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 16px;
/* Stretch, not start. The panel's height is set by the taller RIGHT
column, so letting the feature fill the middle costs nothing and closes
the ~190px of empty surface that sat under it. The tiles stay pinned to
the top of their own cell. */
align-items: stretch;
}
.bh-nav .bh-mc-split > .bh-mc-browse { align-self: start; }
.bh-nav .bh-mc-feat {
position: relative; display: block; overflow: hidden;
/* A fixed shape, so the panel's height is decided by the layout rather
than by how long the current headline happens to be. */
/* A floor, then it grows into whatever the row gives it. */
height: 100%; min-height: 262px; border-radius: var(--bh-r-lg);
background: var(--bh-page); text-decoration: none;
}
.bh-nav .bh-mc-feat-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.bh-nav .bh-mc-feat:hover .bh-mc-feat-img { transform: scale(1.045); }
.bh-nav .bh-mc-feat-veil {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(8,8,10,.93) 22%, rgba(8,8,10,.5) 55%, rgba(8,8,10,.12) 100%);
}
.bh-nav .bh-mc-feat-b {
position: absolute; inset: auto 0 0 0;
display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
padding: 16px 17px 17px; color: #fff;
}
.bh-nav .bh-mc-feat-badge {
padding: 4px 10px; border-radius: 6px;
background: var(--bh-red); color: #fff;
font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.bh-nav .bh-mc-feat-t { font-size: 16.5px; font-weight: 750; line-height: 1.28; letter-spacing: -.015em; }
.bh-nav .bh-mc-feat-x { font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,.8); }
.bh-nav .bh-mc-feat-m { display: flex; flex-wrap: wrap; gap: 13px; font-size: 11.5px; color: rgba(255,255,255,.72); }
.bh-nav .bh-mc-feat-m span { display: inline-flex; align-items: center; gap: 5px; }
.bh-nav .bh-mc-feat-m svg { width: 13px; height: 13px; }
.bh-nav .bh-mc-feat-cta {
display: inline-flex; align-items: center; gap: 7px;
margin-top: 3px; padding: 9px 15px; border-radius: 9px;
background: var(--bh-red-grad); color: #fff;
font-size: 12.5px; font-weight: 700;
transition: gap .18s ease;
}
.bh-nav .bh-mc-feat-cta svg { width: 14px; height: 14px; }
.bh-nav .bh-mc-feat:hover .bh-mc-feat-cta { gap: 11px; }
.bh-nav .bh-mc-tiles {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
align-content: start;
}
.bh-nav .bh-mc-tile {
display: flex; align-items: center; gap: 9px;
padding: 9px 10px; border-radius: var(--bh-r);
border: 1px solid var(--bh-line); background: var(--bh-card);
text-decoration: none;
transition: border-color .16s ease, background .16s ease;
}
.bh-nav .bh-mc-tile:hover { border-color: rgba(229,27,35,.3); background: var(--bh-red-tint); }
.bh-nav .bh-mc-tile-ic {
flex: none; display: grid; place-items: center;
width: 30px; height: 30px; border-radius: 9px;
background: var(--bh-red-tint); color: var(--bh-red);
}
.bh-nav .bh-mc-tile-b { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.bh-nav .bh-mc-tile-b b { font-size: 12.5px; font-weight: 650; color: var(--bh-ink); }
.bh-nav .bh-mc-tile-b small { font-size: 11px; color: var(--bh-muted-2); }
.bh-nav .bh-mc-tile-go { width: 15px; height: 15px; flex: none; color: var(--bh-muted-2); transition: transform .16s ease, color .16s ease; }
.bh-nav .bh-mc-tile:hover .bh-mc-tile-go { transform: translateX(3px); color: var(--bh-red); }
/* ── Column 3 — trending and tags ────────────────────────────────────────── */
.bh-nav .bh-mc-sidehead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bh-nav .bh-mc-more {
display: inline-flex; align-items: center; gap: 5px;
margin-bottom: 13px;
font-size: 11.5px; font-weight: 700; color: var(--bh-red); text-decoration: none;
transition: gap .16s ease;
}
.bh-nav .bh-mc-more svg { width: 13px; height: 13px; }
.bh-nav .bh-mc-more:hover { gap: 9px; }
.bh-nav .bh-mc-trend { list-style: none; margin: 0 0 15px; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.bh-nav .bh-mc-trend-i {
display: flex; align-items: center; gap: 10px;
padding: 6px 8px; border-radius: var(--bh-r);
text-decoration: none;
transition: background .16s ease;
}
.bh-nav .bh-mc-trend-i:hover { background: var(--bh-red-tint); }
.bh-nav .bh-mc-rank { flex: none; width: 14px; font-size: 13px; font-weight: 800; color: var(--bh-red); text-align: center; }
.bh-nav .bh-mc-trend-logo {
flex: none; display: grid; place-items: center;
width: 32px; height: 32px; border-radius: 8px;
background: #fff; border: 1px solid var(--bh-line); overflow: hidden;
}
.bh-nav .bh-mc-trend-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.bh-nav .bh-mc-trend-logo b { font-size: 14px; font-weight: 800; color: var(--bh-red); }
.bh-nav .bh-mc-trend-b { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.bh-nav .bh-mc-trend-b b { font-size: 12.5px; font-weight: 650; color: var(--bh-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bh-nav .bh-mc-trend-b small { font-size: 11px; color: var(--bh-muted-2); }
.bh-nav .bh-mc-trend-go { width: 14px; height: 14px; flex: none; color: var(--bh-muted-2); opacity: 0; transition: opacity .16s ease; }
.bh-nav .bh-mc-trend-i:hover .bh-mc-trend-go { opacity: 1; color: var(--bh-red); }
.bh-nav .bh-mc-tagshead { margin-top: 0; }
.bh-nav .bh-mc-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.bh-nav .bh-mc-tag {
padding: 5px 10px; border-radius: 999px;
border: 1px solid var(--bh-line); background: var(--bh-page);
font-size: 11px; font-weight: 600; color: var(--bh-ink-2); text-decoration: none;
transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.bh-nav .bh-mc-tag span { color: var(--bh-red); margin-right: 2px; }
.bh-nav .bh-mc-tag:hover { background: var(--bh-red-tint); border-color: rgba(229,27,35,.3); color: var(--bh-red); }
/* ── The foot — same surface, divided by hairlines ───────────────────────── */
.bh-nav .bh-mc-disc {
position: relative; z-index: 1;
display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 0;
border-top: 1px solid var(--bh-line);
}
.bh-nav .bh-mc-disc-i {
display: flex; align-items: center; gap: 12px;
padding: 12px 17px;
border-left: 1px solid var(--bh-line);
text-decoration: none;
transition: background .16s ease;
}
.bh-nav .bh-mc-disc-i:first-child { border-left: 0; }
.bh-nav .bh-mc-disc-i:hover { background: var(--bh-red-tint); }
.bh-nav .bh-mc-disc-ic {
flex: none; display: grid; place-items: center;
width: 34px; height: 34px; border-radius: 10px;
background: var(--bh-red-tint); color: var(--bh-red);
}
.bh-nav .bh-mc-disc-b { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.bh-nav .bh-mc-disc-b b { font-size: 13px; font-weight: 680; color: var(--bh-ink); }
.bh-nav .bh-mc-disc-b small { font-size: 11.5px; color: var(--bh-muted-2); line-height: 1.4; }
.bh-nav .bh-mc-disc-go { width: 15px; height: 15px; flex: none; color: var(--bh-muted-2); transition: transform .16s ease, color .16s ease; }
.bh-nav .bh-mc-disc-i:hover .bh-mc-disc-go { transform: translateX(3px); color: var(--bh-red); }
.bh-nav .bh-mc-stats {
position: relative; z-index: 1;
display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
gap: 0;
border-top: 1px solid var(--bh-line);
background: var(--bh-page);
}
.bh-nav .bh-mc-stat {
display: flex; align-items: center; gap: 11px;
padding: 11px 17px;
border-left: 1px solid var(--bh-line);
text-decoration: none;
transition: background .16s ease;
}
.bh-nav .bh-mc-stat:first-child { border-left: 0; }
.bh-nav .bh-mc-stat:hover { background: var(--bh-red-tint); }
.bh-nav .bh-mc-stat-ic {
flex: none; display: grid; place-items: center;
width: 32px; height: 32px; border-radius: 10px;
background: var(--bh-red-tint); color: var(--bh-red);
}
.bh-nav .bh-mc-stat-b { display: flex; flex-direction: column; min-width: 0; }
.bh-nav .bh-mc-stat-b b { font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--bh-red); line-height: 1.1; }
.bh-nav .bh-mc-stat-b small { font-size: 11.5px; color: var(--bh-muted); }
/* ── Narrower desktops ───────────────────────────────────────────────────── */
@media (max-width: 1240px) {
.bh-mc-in { grid-template-columns: 232px minmax(0, 1fr); }
/* The side column moves under the middle rather than being squeezed to a
strip too narrow for a company name. */
.bh-mc-side {
grid-column: 1 / -1;
border-top: 1px solid var(--bh-line);
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 22px;
}
.bh-mc-side .bh-mc-sidehead, .bh-mc-side .bh-mc-trend { grid-column: 1; }
.bh-mc-tagshead, .bh-mc-tags { grid-column: 2; }
.bh-mc-mid { border-right: 0; }
}
@media (max-width: 1040px) {
.bh-mc-split { grid-template-columns: minmax(0, 1fr); }
.bh-mc-feat { min-height: 210px; }
}
/* The panel is desktop-only; below the header's own breakpoint the drawer
takes over, so there is no squeezed mega menu on a phone. */
/* The Games mega menu's foot band (.bh-mg-band*) was removed along with its
markup: four boilerplate claims beside a Join Now panel, the only part of
that menu that was not catalogue data. Its rules are deleted rather than
left behind to match nothing. */