/* From partials/header.dj.html, where it was inline on every page (2026-11-01). */
/* The quick search under the header box: works, then people under */
/* a heading that stays at the top of the list while they scroll. */
/* The results scroll inside themselves once they are taller than the */
/* screen below the header, at any width; the phone rule further down */
/* (max-width: 991.98px) still sets its own, shorter, height. */
.float-search #saerch-ajaxresult { max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); overflow-y: auto; overscroll-behavior: contain; }
.float-search ul li.quick-search-heading { position: sticky; top: 0; z-index: 1; margin: .25rem 0 .5rem; padding: .45rem .25rem; border-bottom: 1px solid rgba(150, 242, 7, .35); background: rgba(16, 18, 20, .94); color: var(--bs-primary, #96F207); font-size: 13px; font-weight: 700; }
/* People photos are 2:3; the box is 60x80, so they are cropped near the top. */
.float-search .quick-search-more { display: flex; justify-content: center; gap: 1.5rem; margin: .5rem 0 .25rem; }
.float-search ul li .cover-person img { display: block; width: 60px; height: 80px; object-fit: cover; object-position: center top 15%; background: #1d1f24; }
.header-user-menu { position: relative; padding-bottom: 8px; margin-bottom: -8px; }
.header-user-menu .dropdown-toggle { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; line-height: 1.4; vertical-align: middle; }
.header-user-menu .dropdown-menu { display: none !important; position: absolute; top: calc(100% - 1px); inset-inline-end: 0; min-width: 190px; margin-top: 0; background: var(--bg-card, #1f1f1f); border: 1px solid rgba(255, 255, 255, 0.08); }
/* The trimmed bootstrap has no .dropdown-menu rules at all, so the */
/* keeps the browser's own bullets, indent and margin. */
.header-user-menu .dropdown-menu, .header-user-menu .dropdown-menu li { list-style: none; }
.header-user-menu .dropdown-menu { margin: 0; padding: 6px 0; }
.header-user-menu .dropdown-menu li { margin: 0; padding: 0; }
.header-user-menu .dropdown-item, .header-user-menu .dropdown-header { color: var(--text-body, #fff); text-align: right; }
.header-user-menu .dropdown-item:hover { background: rgba(150, 242, 7, 0.12); color: #96F207; }
.header-user-menu:hover .dropdown-menu { display: block !important; }
/* The menu opens on hover; focus-within is what makes it reachable */
/* from the keyboard, which hover alone never is. */
.header-user-menu:focus-within .dropdown-menu { display: block !important; }
/* Name and icon on one line in the button, icon and label on one */
/* line in each item - a bare svg would otherwise sit on the text baseline. */
.header-user-menu .dropdown-toggle { gap: 6px; }
.header-user-menu .dropdown-toggle svg { flex: 0 0 auto; }
.header-user-name { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The trimmed bootstrap has no .dropdown-divider rule either, so an */
/*
in the menu kept the browser's default margins and inset */
/* border and sat in the list like a dropped line. */
.header-user-menu .dropdown-divider { height: 0; margin: 6px 0; padding: 0; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.08); opacity: 1; }
/* Signed out the server's button is final - script.js does not */
/* touch it - so it needs the same icon-and-label alignment the */
/* signed-in toggle gets, or the icon sits on the text baseline. */
.header-user-login { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; }
.header-user-login svg { flex: 0 0 auto; }
/* Both of these carry .btn inside #siteHead, where the theme sets */
/* `line-height: 50px` from `#siteHead .btn`. That selector is */
/* (1,1,0) and a two-class selector is only (0,2,0), so every */
/* line-height stated above lost to it and the label kept a 50px */
/* line box on 13px text. Centring then came from half-leading */
/* inside that box rather than from align-items, and half-leading */
/* splits the *font's* em square evenly - which for the Persian */
/* metrics in YekanBakh, with its deep descenders, does not put the */
/* glyphs on the optical centre. The name sat low. */
/* Prefixed with #siteHead here so these actually win, and the line */
/* box is collapsed to the text so the flex centring is what places */
/* it. The 50px height the theme gives the button is left alone - */
/* only where the text sits inside it changes. */
/* .btn.header-user-login rather than plain .header-user-login: on */
/* its own that selector only ties with #siteHead .btn and would be */
/* winning on source order alone, which the next person to move this */
/* block would break without touching it. */
#siteHead .header-user-menu .dropdown-toggle,
#siteHead .btn.header-user-login { line-height: 1.4; }
/* The same 42px box the three icon buttons have. The theme */
/* gives every .btn in the header a height of 50px, so the */
/* account button - signed in or out - stood taller than the */
/* search and bell beside it. Both selectors are two classes */
/* deep behind the id, which outranks #siteHead .btn. */
#siteHead .header-user-menu .dropdown-toggle,
#siteHead .btn.header-user-login {
height: 42px;
min-height: 42px;
}
#siteHead .header-user-menu .dropdown-toggle > span,
#siteHead .btn.header-user-login > span { line-height: 1; }
.header-user-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 14px; background: none; border: 0; font: inherit; cursor: pointer; }
.header-user-item svg { flex: 0 0 auto; }
.header-user-heading { padding: 8px 14px 4px; color: var(--text-muted, #9a9a9a); font-size: 12px; }
/* The menu is three items: lists, profile, sign out. The lists */
/* themselves hang off the first one as a flyout, so the menu stays */
/* the same size however many lists an account has. */
.header-user-sub { position: relative; }
.header-user-sub > .header-user-item { justify-content: space-between; }
.header-user-arrow { margin-inline-start: auto; color: var(--text-muted, #9a9a9a); font-size: 16px; line-height: 1; }
/* Opens to the side, overlapping the parent's edge by a pixel so */
/* the pointer can cross into it without falling through the gap. */
/* inset-inline-end maps to `left` in this RTL page, which opens */
/* the flyout inward - the user menu sits at the left end of the */
/* header, so the other side would put it off the screen. */
.header-user-submenu { display: none; position: absolute; top: -6px; inset-inline-end: calc(100% - 1px);
min-width: 200px; max-height: min(60vh, 340px); overflow-y: auto; margin: 0; padding: 6px 0;
list-style: none; background: var(--bg-card, #1f1f1f); border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 12px 28px rgba(0, 0, 0, .45); }
.header-user-sub:hover > .header-user-submenu,
.header-user-sub:focus-within > .header-user-submenu { display: block; }
.header-user-submenu li { margin: 0; padding: 0; }
/* A long list name is cut rather than allowed to widen the flyout. */
.header-user-submenu .header-user-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* "همهٔ فهرستها" sits under a rule at the foot of the flyout. */
.header-user-submenu-all .header-user-item { border-top: 1px solid rgba(255, 255, 255, 0.08); }
/* The item after the lists starts the ordinary part of the menu. */
.header-user-sub + li .header-user-item { border-top: 1px solid rgba(255, 255, 255, 0.08); }
/* ==================================================================
Mobile chrome: the bottom bar, the revealing header, the search sheet.
Everything here is under 992px, where .appnav exists (d-lg-none) and
the header carries no menu of its own.
================================================================== */
@media (max-width: 991.98px) {
/* ---- The bottom bar, compact on the way down ------------------
Full width and square while the reader is at rest or coming back
up; on the way down it draws in from the edges, rounds off, lifts
and drops its labels, so it takes less of a small screen without
going away. Every property here is transitioned, and the transform
keeps --vv-shift in it so the viewport correction from the
script still applies in both states. */
/* The resting state and the transition live in the one .appnav rule
further down this block - a second copy of the selector here was
overridden by it and its transition list was silently dropped. */
.appnav.is-compact {
inset-inline: .7rem;
width: auto !important;
min-height: 48px;
padding-block: .2rem;
padding-bottom: calc(.2rem + env(safe-area-inset-bottom, 0px));
border-radius: 999px;
transform: translate3d(0, -.55rem, 0);
/* Thinner than the resting bar - it is a pill floating over the
page now rather than the floor of it - with a heavier blur to
carry the legibility the colour gives up. The border runs the
whole way round, since every edge of a pill is an edge, and the
inset highlight along the top is what reads as glass rather than
as a flat tint. */
background-color: rgba(10, 11, 12, .2);
-webkit-backdrop-filter: blur(26px) saturate(180%);
backdrop-filter: blur(26px) saturate(180%);
border: 1px solid rgba(255, 255, 255, .24);
box-shadow: 0 12px 30px rgba(0, 0, 0, .45),
inset 0 1px 0 rgba(255, 255, 255, .09);
}
/* The labels are bare text nodes inside each tab, so there is nothing
to select and hide - the type is collapsed instead. The icons carry
width and height attributes and are unaffected by it. */
.appnav.is-compact > a {
font-size: 0;
gap: 0;
}
/* ---- The categories sheet ------------------------------------
Opened by the bottom bar's categories tab. It is built and filled by
the script in scripts_common.dj.html; with no script the tab falls
back to the drawer, which is what it opened before.
------------------------------------------------------------- */
.f2m-cat-sheet {
position: fixed;
inset: 0;
/* The scrim has to cover the strip the retracted toolbar leaves */
/* below the layout viewport as well, or the page shows through */
/* underneath the panel. */
bottom: calc(0px - var(--vv-shift, 0px));
z-index: 2100;
}
.f2m-cat-sheet[hidden] { display: none; }
.f2m-cat-scrim {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, .62);
opacity: 0;
transition: opacity .2s ease;
}
.f2m-cat-sheet.is-open .f2m-cat-scrim { opacity: 1; }
.f2m-cat-panel {
position: absolute;
inset-inline: 0;
bottom: 0;
display: flex;
flex-direction: column;
/* Capped against the visible height rather than the layout one, */
/* so the head and the load-more button are both reachable while */
/* the browser's toolbar is on screen. */
max-height: min(86vh, calc(var(--vv-height, 86vh) - 3.5rem));
background-color: rgba(16, 18, 20, .72);
-webkit-backdrop-filter: blur(22px) saturate(160%);
backdrop-filter: blur(22px) saturate(160%);
border-top: 1px solid rgba(255, 255, 255, .12);
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
box-shadow: 0 -12px 34px rgba(0, 0, 0, .5);
transform: translate3d(0, 100%, 0);
transition: transform .24s ease-out;
}
/* No --vv-shift in this one, on purpose: the panel hangs off the */
/* sheet, and the sheet already reaches past the layout viewport by */
/* that much, so its bottom: 0 is on the real edge already. Carrying */
/* the shift here as well moved it down twice - measured at 876 */
/* against the bar's 828 with a 48px toolbar. */
.f2m-cat-sheet.is-open .f2m-cat-panel { transform: none; }
.f2m-cat-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
padding: .9rem 1rem;
border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.f2m-cat-head h2 {
margin: 0;
font-size: 15px;
font-weight: 900;
}
/* The same button the search sheet closes with - Bootstrap's
.btn-close, which is an X drawn as a mask in currentColor, so the
two sheets close the same way. bootstrap.css pins .btn-close to a
corner with position: absolute; here it is one cell of the header
row, and the padding is what gives it a thumb-sized target. */
.f2m-cat-head .btn-close {
position: relative;
width: .5rem;
height: .5rem;
padding: .25em;
margin: 0;
font-size: 14px;
border-radius: 10px;
background-color: currentColor;
color: inherit;
cursor: pointer;
}
/* The glyph is the search sheet's, to the pixel - 8px in 3.5px of
padding. What a thumb can hit does not have to be: this stretches
the target to 37px square without touching how large the X looks. */
.f2m-cat-head .btn-close::after {
content: '';
position: absolute;
inset: -11px;
}
/* The scrolling part is the body, so the header and the close button
stay put while the list moves. */
.f2m-cat-body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
padding: 1rem;
padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}
/* Two to a row, as asked. */
.f2m-cat-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .8rem;
}
.f2m-cat-card {
display: block;
padding: .6rem;
border: 1px solid rgba(255, 255, 255, .08);
border-radius: .7rem;
background: rgba(255, 255, 255, .04);
color: inherit;
text-decoration: none;
}
/* Three posters fanned over each other. The stack is a fixed height so
every card in the grid lines up whether a category returned three
works or one.
display: block is load-bearing, and leaving it out is why no poster
appeared: the stack is a , height does not apply to an inline
box, so it collapsed to nothing and the images - which hang off it
absolutely - had no box to hang from. They were laid over the name
in a card that had reserved no room for them. */
.f2m-cat-stack {
display: block;
position: relative;
height: 124px;
margin-bottom: .55rem;
}
/* The three are sized off the stack rather than in pixels, so the fan
spans the whole tile however wide the screen makes it: 58% each,
the last starting at 42%, which puts the far edge of the third
exactly on the far edge of the box. */
.f2m-cat-stack img {
display: block;
position: absolute;
top: 0;
width: 58%;
height: 100%;
object-fit: cover;
border-radius: .45rem;
border: 1px solid rgba(255, 255, 255, .14);
box-shadow: 0 4px 12px rgba(0, 0, 0, .45);
background: #000;
}
/* Right-to-left, so the first poster sits at the start edge and the
others tuck in behind it. */
.f2m-cat-stack img:nth-child(1) { inset-inline-start: 0; z-index: 3; }
.f2m-cat-stack img:nth-child(2) { inset-inline-start: 21%; z-index: 2; }
.f2m-cat-stack img:nth-child(3) { inset-inline-start: 42%; z-index: 1; }
/* A category that came back with one or two works still fills its
tile - nothing is tucked behind anything. */
.f2m-cat-stack img:first-child:nth-last-child(1) { width: 100%; }
.f2m-cat-stack img:first-child:nth-last-child(2),
.f2m-cat-stack img:first-child:nth-last-child(2) ~ img { width: 68%; }
.f2m-cat-stack img:first-child:nth-last-child(2) ~ img { inset-inline-start: 32%; }
.f2m-cat-name {
display: block;
overflow: hidden;
font-size: 13px;
font-weight: 700;
line-height: 1.6;
text-overflow: ellipsis;
white-space: nowrap;
}
.f2m-cat-count {
display: block;
color: var(--text-muted, #9aa08e);
font-size: 11px;
}
.f2m-cat-more {
display: block;
width: 100%;
min-height: 44px;
margin-top: .9rem;
border: 1px solid rgba(150, 242, 7, .35);
border-radius: .6rem;
background: rgba(150, 242, 7, .1);
color: var(--primary-color, #96F207);
font: inherit;
font-size: 13px;
font-weight: 700;
cursor: pointer;
}
.f2m-cat-more[hidden] { display: none; }
.f2m-cat-status {
margin: 0;
padding: 1.5rem 0;
color: var(--text-muted, #9aa08e);
font-size: 13px;
text-align: center;
}
.f2m-cat-status[hidden] { display: none; }
/* The spinner is a class rather than part of .f2m-cat-status, which
also carries the empty and the failed message - neither of those is
waiting for anything. */
.f2m-cat-status.is-busy::before {
content: '';
display: block;
width: 26px;
height: 26px;
margin: 0 auto .7rem;
border: 2px solid rgba(255, 255, 255, .16);
border-top-color: var(--primary-color, #96F207);
border-radius: 50%;
animation: f2mCatSpin .7s linear infinite;
}
.f2m-cat-more.is-loading {
position: relative;
color: transparent;
pointer-events: none;
}
.f2m-cat-more.is-loading::after {
content: '';
position: absolute;
inset: 0;
width: 20px;
height: 20px;
margin: auto;
border: 2px solid rgba(150, 242, 7, .25);
border-top-color: var(--primary-color, #96F207);
border-radius: 50%;
animation: f2mCatSpin .7s linear infinite;
}
@keyframes f2mCatSpin { to { transform: rotate(360deg); } }
/* Still and legible for a reader who asked for no motion. */
@media (prefers-reduced-motion: reduce) {
.f2m-cat-status.is-busy::before,
.f2m-cat-more.is-loading::after { animation: none; }
.f2m-cat-more.is-loading { color: inherit; }
.f2m-cat-more.is-loading::after { display: none; }
}
/* ---- The bottom bar ------------------------------------------
It is `position: fixed; bottom: 0`, which is the layout viewport -
not the visual one. While a phone browser still shows its own
bottom toolbar those two differ, so the bar sat a toolbar's height
up the screen and left a strip of page showing beneath it; and it
stayed there as the toolbar collapsed on scroll.
Two parts to the fix. The bar pads itself into the safe area
instead of floating above it, so on a device with a home indicator
it reaches the real edge. And --vv-shift, written by the script
below from visualViewport, slides it down as the browser chrome
retracts. With no script and no visualViewport the custom property
stays 0 and the bar behaves exactly as before.
------------------------------------------------------------- */
.appnav {
height: auto !important;
min-height: 60px;
padding-block: .35rem;
padding-bottom: calc(.35rem + env(safe-area-inset-bottom, 0px));
will-change: transform;
/* The viewport correction rides on translate, which is a property
of its own - not part of the `transform` shorthand, and not in
the transition list below.
A phone's toolbar does not appear and disappear: it slides, and
visualViewport reports every frame of that slide. Carried on the
transform, each frame restarted a .18s ease that was still
running, and the bar crawled after the toolbar in lurches.
Carried on `bottom` instead, it tracked the toolbar exactly -
by laying the fixed bar out again on every frame of the slide,
which is the shiver at the two ends of a page, where the
toolbar is always in motion. `translate` is neither: the
compositor moves the bar, nothing eases it, and the compact
lift keeps the transform to itself. */
translate: 0 var(--vv-shift, 0px);
transform: translate3d(0, 0, 0);
/* The resting half of the compact state: square, edge to edge, and
width: auto so that only left and right move when it draws in.
With the theme's own width: 100% left in place the two inset
edges and the width would fight and the bar would simply jump -
auto cannot be interpolated, a length can. */
inset-inline: 0;
width: auto !important;
border-radius: 0;
transition: translate .12s linear, transform .18s ease-out, min-height .2s ease-out,
left .2s ease-out, right .2s ease-out,
border-radius .2s ease-out, box-shadow .2s ease-out,
border-color .2s ease-out, border-width .2s ease-out,
background-color .2s ease-out;
/* Glass. The theme paints the bar in var(--bg-body), which is
opaque - an opaque colour under a blur defeats the blur, so the
colour is replaced rather than layered over. */
background-color: rgba(10, 11, 12, .34);
-webkit-backdrop-filter: blur(22px) saturate(170%);
backdrop-filter: blur(22px) saturate(170%);
/* Zero width, but a declared style and colour on all four sides.
A border-style of none has no width to animate from - it snaps to
1px the instant the compact state lands, and the whole bar jumps
by a pixel on each edge. Declared solid at 0, the width is a
length at both ends and the transition has something to cross. */
border: 0 solid transparent;
}
/* Before `translate` became a property of its own - Safari under
14.1, Chrome under 104 - the correction goes back on `bottom`,
which is where it was. */
@supports not (translate: 0 1px) {
.appnav {
bottom: calc(0px - var(--vv-shift, 0px));
}
}
/* The blur is what keeps the labels legible over artwork. Where it is
not supported the colour goes back to something solid enough to
read against on its own. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
.appnav {
background-color: rgba(10, 11, 12, .92);
}
.appnav.is-compact {
background-color: rgba(10, 11, 12, .88);
}
}
/* The labels sit in the tabs, so their type has to be transitioned
where it is declared and not on the bar. */
.appnav > a {
transition: font-size .18s ease-out, gap .18s ease-out;
}
/* ---- The header, revealed on the way up ----------------------
A megabyte-long page with a fixed bar at the bottom and nothing at
the top means the search, the menu and the logo are one long scroll
away. The header comes back as soon as the reader scrolls up, and
gets out of the way going down.
.is-pinned is set by the script; without it nothing here applies
and the header keeps its static place in the page.
------------------------------------------------------------- */
/* !important on position, and it is load-bearing: the index and the */
/* work page put .position-absolute on the header, which Bootstrap */
/* writes as `position: absolute !important`. Without this the header */
/* never became fixed on the two pages that matter most and the reveal */
/* did nothing there - which is why this looked unimplemented. */
#siteHead.is-pinned {
position: fixed !important;
top: 0;
inset-inline: 0;
z-index: 1030;
/* Opaque rather than transparent: it now sits over artwork and text
rather than at the top of the document. */
background: rgba(12, 13, 14, .92);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(255, 255, 255, .1);
box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
transform: translate3d(0, -100%, 0);
transition: transform .22s ease-out;
}
#siteHead.is-pinned.is-revealed {
transform: none;
}
.light-mode #siteHead.is-pinned {
background: rgba(255, 255, 255, .94);
border-bottom-color: rgba(0, 0, 0, .1);
}
/* The header is out of flow while pinned, so the page would jump by
its height at the moment it is pinned. The script measures it into
--pinned-head-height and the spacer takes up exactly that much. */
.f2m-head-spacer {
display: block;
height: var(--pinned-head-height, 0px);
}
/* ---- The search box, as a sheet -----------------------------
It was a dropdown sized in percentages of the button that opens it
- `width: 700%; left: -125%` - so its width tracked that button's
width and its position hung off the button's edge. The button is
42px on a phone, which put a 294px panel at -52px: most of it off
the side of a small screen, which is why the search tab appeared to
do nothing anywhere the filter sheet is absent.
A fixed panel under the header instead, the width of the screen and
independent of whatever opens it. jQuery's slideToggle animates
`display`, so the panel must not be `display: none` here - the
toggle sets that itself. */
.float-search,
.float-search.bg-card.border.fsz-13 {
position: fixed !important;
top: auto;
inset-inline: .5rem !important;
width: auto !important;
max-width: none;
padding: .6rem !important;
border-radius: var(--border-radius, .6rem);
box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
z-index: 1031;
}
/* Under the header when the header is pinned, under the top of the
page when it is not. Both are set by the script as one value. */
.float-search {
top: var(--search-sheet-top, 64px) !important;
}
.float-search #saerch-ajaxresult {
max-height: min(60vh, 420px);
overflow-y: auto;
}
/* ---- The search sheet, on its way up ------------------------
The theme opens it with jQuery's slideToggle, which animates the
element's height: every frame reflows the whole form inside it and
it arrives with a jolt. A transform the compositor can carry
instead, with the script adding .opened one tick after display -
that tick is what gives the transition a frame to start from.
The translate carries --vv-shift as well, so the sheet's foot is on
the screen's real bottom edge and not on the layout viewport's,
which is higher up whenever the browser's toolbar has retracted.
------------------------------------------------------------- */
#filter-results {
transform: translate3d(0, calc(100% + var(--vv-shift, 0px)), 0);
opacity: 0;
transition: transform .28s cubic-bezier(.22, .61, .36, 1),
opacity .18s ease-out;
will-change: transform;
max-height: min(84vh, calc(var(--vv-height, 84vh) - 4rem));
overflow-y: auto;
overscroll-behavior: contain;
}
#filter-results.opened {
transform: translate3d(0, var(--vv-shift, 0px), 0);
opacity: 1;
}
/* ---- Glass on the search surfaces ---------------------------
The advanced search sheet that the bottom bar opens, and the
header's own search panel. Both carry .bg-card, which bootstrap.css
writes as background-color: var(--bg-card) !important - so the
colour here has to be !important too or nothing changes. The id
would be specific enough on its own; the !important is not. */
#filter-results {
background-color: rgba(16, 18, 20, .74) !important;
-webkit-backdrop-filter: blur(22px) saturate(160%);
backdrop-filter: blur(22px) saturate(160%);
border-top: 1px solid rgba(255, 255, 255, .12);
}
.float-search,
.float-search.bg-card.border.fsz-13 {
background-color: rgba(16, 18, 20, .78) !important;
-webkit-backdrop-filter: blur(20px) saturate(160%);
backdrop-filter: blur(20px) saturate(160%);
border-color: rgba(255, 255, 255, .14) !important;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
#filter-results { background-color: rgba(16, 18, 20, .96) !important; }
.float-search,
.float-search.bg-card.border.fsz-13 { background-color: rgba(16, 18, 20, .97) !important; }
.f2m-cat-panel { background-color: rgba(16, 18, 20, .96); }
}
/* ---- The drawer's second-level folds ------------------------- */
.f2m-nav-fold-sub > summary {
min-height: 44px;
padding-inline: 26px 16px;
font-size: 14px;
font-weight: 500;
color: var(--text-muted, #9aa08e);
}
.f2m-nav-fold-sub[open] > summary {
color: var(--primary-color, #96F207);
}
.f2m-nav-fold-sub > .f2m-nav-sub > li > a,
.f2m-nav-fold-sub > .f2m-nav-sub > li > .menu-leaf-untargeted {
padding-inline: 38px 16px;
}
}