:root {
--ezsx-accent: #3680ED;
--ezsx-accent-2: #2060C0;
--ezsx-accent-3: #3680ED;
--ezsx-accent-soft: #CFE0FA;
--ezsx-accent-tint: #EAF2FD;
--ezsx-ink: #0f172a;
--ezsx-ink-2: #1e293b;
--ezsx-mute: #64748b;
--ezsx-mute-2: #94a3b8;
--ezsx-line: #e5e7eb;
--ezsx-line-2: #f1f5f9;
--ezsx-bg: #ffffff;
--ezsx-bg-2: #f8fafc;
--ezsx-shadow: 0 40px 100px -20px rgba(15, 23, 42, .45), 0 12px 32px -12px rgba(27, 52, 127, .25), 0 0 0 1px rgba(15, 23, 42, .06);
--ezsx-radius: 28px;
/* §EZSX-PRM (2026-09-14) — the premium pass: one brand gradient, one glow, one
plate tint and one ease, read by every section below. The dark block
swaps the values that need swapping; the gradient is a brand surface
and stays. */
--ezsx-grad: linear-gradient(135deg, #3680ED 0%, #2060C0 100%);
--ezsx-glow: rgba(54, 128, 237, .38);
--ezsx-plate: #F1F4F9;
--ezsx-plate-ink: #5F6B7C;
--ezsx-card: #fff;
--ezsx-card-2: #FBFCFE;
--ezsx-card-line: #E5EAF2;
--ezsx-ease: cubic-bezier(.2, .8, .2, 1);
}
/* ---------- root + backdrop ---------- */
/* CRITICAL: the overlay is mounted on EVERY page so its fixed children
must NOT capture pointer events when closed — otherwise the invisible
backdrop covers the whole viewport and nothing on the site is clickable.
Default state = invisible AND untouchable; .is-open re-enables both. */
.ezsx { position: relative; z-index: 2147483000; }
body.ezsx-open { overflow: hidden !important; }
.ezsx-backdrop {
position: fixed; inset: 0;
background: rgba(7, 11, 22, .52);
-webkit-backdrop-filter: blur(16px) saturate(1.15);
backdrop-filter: blur(16px) saturate(1.15);
opacity: 0;
pointer-events: none; /* off by default → page underneath is clickable */
transition: opacity .22s ease;
z-index: 2147483001;
}
.ezsx.is-open .ezsx-backdrop {
opacity: 1;
pointer-events: auto; /* click-to-close active only while open */
}
/* ---------- shell (modal card) ---------- */
.ezsx-shell {
position: fixed;
top: 50%; left: 50%;
transform: translate(-50%, -46%) scale(.98);
width: min(1200px, 96vw);
max-height: 90vh;
background: var(--ezsx-bg);
border-radius: var(--ezsx-radius);
box-shadow: var(--ezsx-shadow);
display: flex; flex-direction: column;
overflow: hidden;
opacity: 0;
pointer-events: none;
transition: opacity .22s ease, transform .28s cubic-bezier(.2, .8, .2, 1);
z-index: 2147483002;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
color: var(--ezsx-ink);
}
.ezsx.is-open .ezsx-shell {
opacity: 1;
pointer-events: auto;
transform: translate(-50%, -50%) scale(1);
}
/* A soft aurora behind the header — brand blue to the left, a breath of
gold to the right — on a pseudo so it never touches the layout. The
head and the strip sit over it on translucent surfaces. */
.ezsx-shell::before {
content: ""; position: absolute; inset: 0 0 auto 0; height: 240px; z-index: 0; pointer-events: none;
background:
radial-gradient(60% 120% at 6% 0%, rgba(54, 128, 237, .16) 0%, rgba(54, 128, 237, 0) 60%),
radial-gradient(40% 100% at 96% 0%, rgba(245, 179, 1, .10) 0%, rgba(245, 179, 1, 0) 58%);
}
.ezsx-shell::after {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
}
.ezsx-head, .ezsx-tabs, .ezsx-body, .ezsx-foot { position: relative; z-index: 1; }
/* ---------- header ---------- */
.ezsx-head {
display: flex; align-items: center; gap: 16px; flex-shrink: 0;
padding: 20px 24px 16px;
border-bottom: 1px solid var(--ezsx-line-2);
background: linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .85) 100%);
}
/* Sized to the 54px input beside it so the mark reads as a brand tile,
not a favicon. The image is the bundled 192px PNG (BrandAssets swaps
it in for /favicon.ico), so it stays crisp here on 2x and 3x screens. */
.ezsx-brand {
position: relative; overflow: hidden;
width: 54px; height: 54px;
border-radius: 16px;
background: linear-gradient(135deg, var(--ezsx-accent-3) 0%, var(--ezsx-accent-2) 100%);
display: inline-flex; align-items: center; justify-content: center;
box-shadow: 0 10px 24px -6px var(--ezsx-glow), inset 0 1px 0 rgba(255, 255, 255, .28);
flex-shrink: 0;
transition: transform .3s var(--ezsx-ease), box-shadow .3s ease;
}
/* a slow sheen crosses the tile while the popup is open */
.ezsx-brand::after {
content: ""; position: absolute; top: -40%; bottom: -40%; left: -70%; width: 45%; pointer-events: none;
transform: skewX(-20deg);
background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .35) 50%, rgba(255, 255, 255, 0) 100%);
}
.ezsx-brand:hover { transform: translateY(-1px) rotate(-3deg) scale(1.04); box-shadow: 0 14px 30px -8px var(--ezsx-glow), inset 0 1px 0 rgba(255, 255, 255, .28); }
.ezsx-brand svg { width: 28px; height: 28px; color: #fff; }
/* When an admin-editable brand icon is present we switch to a soft white
tile so the colorful logo reads faithfully instead of dying on red. */
.ezsx-brand:has(.ezsx-brand-img) {
background: #fff;
box-shadow: 0 6px 18px rgba(15, 23, 42, .12);
border: 1px solid var(--ezsx-line);
}
.ezsx-brand-img { width: 46px; height: 46px; border-radius: 12px; object-fit: contain; display: block; }
.ezsx-brand-fallback { display: inline-flex; color: #fff; }
/* ---------- the field ----------
One composed row. The WRAP carries the border, background and focus
ring; the inside is bare, so a scope chip, the keycaps, a
clear button and a spinner can all sit in the same row without
absolute positioning fighting the input's padding. */
.ezsx-input-wrap {
position: relative; flex: 1; min-width: 0;
display: flex; align-items: center; gap: 10px;
height: 56px;
padding: 0 10px 0 18px;
border: 1.5px solid var(--ezsx-line);
border-radius: 18px;
background: #fff;
box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(15, 23, 42, .04), 0 10px 30px -22px rgba(27, 52, 127, .4);
transition: border-color .18s ease, background .18s ease, box-shadow .22s ease, transform .22s var(--ezsx-ease);
}
.ezsx-input-wrap:hover { border-color: #cbd5e3; box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(15, 23, 42, .04), 0 14px 34px -22px rgba(27, 52, 127, .5); }
/* Focus: the border becomes a brand → sky → deep-brand gradient (two
background layers, padding-box over border-box) under a soft ring. Both
layers are written out — a `background` shorthand would reset them by
night. No gold in it (owner's call, 2026-09-14): the popup is blue. */
.ezsx-input-wrap:focus-within {
border-color: transparent;
background-image: linear-gradient(#fff, #fff), linear-gradient(120deg, var(--ezsx-accent) 0%, #8CBEFA 55%, var(--ezsx-accent-2) 100%);
background-origin: border-box;
background-clip: padding-box, border-box;
background-repeat: no-repeat;
box-shadow: 0 0 0 4px rgba(54, 128, 237, .12), 0 14px 34px -16px var(--ezsx-glow);
}
.ezsx-input-ico {
width: 20px; height: 20px; flex-shrink: 0;
color: var(--ezsx-mute-2);
transition: color .18s ease;
}
.ezsx-input-wrap:focus-within .ezsx-input-ico { color: var(--ezsx-accent); }
/* Livewire toggles .is-loading on the wrap while a search or a tab
change is in flight (wire:loading.class); the magnifier becomes a
ring for that moment so the field says "searching" by itself. */
.ezsx-input-spin {
display: none; width: 20px; height: 20px; flex-shrink: 0;
border-radius: 50%;
border: 2.5px solid var(--ezsx-accent-soft);
border-top-color: var(--ezsx-accent);
animation: ezsx-spin .7s linear infinite;
}
.ezsx-input-wrap.is-loading .ezsx-input-ico { display: none; }
.ezsx-input-wrap.is-loading .ezsx-input-spin { display: block; }
@keyframes ezsx-spin { to { transform: rotate(360deg); } }
.ezsx-input {
flex: 1; min-width: 0;
height: 100%;
margin: 0; padding: 0;
border: 0; border-radius: 0;
background: transparent;
font-family: inherit; font-size: 17px; font-weight: 500;
color: var(--ezsx-ink);
outline: none; box-shadow: none;
}
.ezsx-input:focus { border: 0; background: transparent; box-shadow: none; outline: none; }
.ezsx-input::placeholder { color: var(--ezsx-mute-2); font-weight: 400; opacity: 1; }
.ezsx-input::-webkit-search-decoration,
.ezsx-input::-webkit-search-cancel-button { display: none; }
/* Scope chip — the active module tab, shown inside the field so the
visitor sees what they are searching without looking up at the
strip. Clicking it goes back to "All". */
.ezsx-scope {
display: inline-flex; align-items: center; gap: 6px;
height: 30px; padding: 0 8px 0 10px;
border: 1px solid var(--ezsx-accent-soft);
border-radius: 999px;
background: var(--ezsx-accent-tint);
color: var(--ezsx-accent-2);
font-family: inherit; font-size: 12.5px; font-weight: 700; line-height: 1;
white-space: nowrap; cursor: pointer; flex-shrink: 0;
transition: background .16s ease, border-color .16s ease;
}
.ezsx-scope:hover { background: var(--ezsx-accent-soft); border-color: var(--ezsx-accent); }
.ezsx-scope svg { width: 14px; height: 14px; stroke: currentColor; }
.ezsx-scope-x { opacity: .55; }
.ezsx-scope:hover .ezsx-scope-x { opacity: 1; }
/* Clear button — takes the keycaps' place once there is text. */
.ezsx-clear {
display: none; align-items: center; justify-content: center;
width: 30px; height: 30px; flex-shrink: 0;
border: 0; border-radius: 50%; padding: 0;
background: var(--ezsx-line-2);
color: var(--ezsx-mute);
cursor: pointer;
transition: background .16s ease, color .16s ease;
}
.ezsx-clear:hover { background: var(--ezsx-accent-tint); color: var(--ezsx-accent-2); }
.ezsx-clear svg { width: 14px; height: 14px; stroke: currentColor; }
.ezsx-input:not(:placeholder-shown) ~ .ezsx-kbd { display: none; }
.ezsx-input:not(:placeholder-shown) ~ .ezsx-clear { display: inline-flex; }
/* ---------- shortcut hint ----------
Two keycaps rather than one boxed label: a 1.5px lip under each key
and a hairline highlight on top make them read as keys you press.
The driver swaps the modifier to ⌘ on Apple hardware. The selectors
carry four classes because custom.*.css styles every on the
site at (0,3,1) and used to win half of this. */
.ezsx-kbd {
display: inline-flex; align-items: center; gap: 4px;
flex-shrink: 0;
pointer-events: none;
}
.ezsx-shell .ezsx-input-wrap .ezsx-kbd .ezsx-key {
display: inline-flex; align-items: center; justify-content: center;
min-width: 26px; height: 24px; padding: 0 7px;
border-radius: 7px;
font-family: inherit; font-size: 11px; font-weight: 700; line-height: 1;
letter-spacing: .04em;
color: var(--ezsx-ink-2);
background: linear-gradient(180deg, #fff 0%, #f4f6fa 100%);
border: 1px solid #dfe4ec;
box-shadow: 0 1.5px 0 #cfd6e0, inset 0 1px 0 #fff;
}
.ezsx-shell .ezsx-input-wrap .ezsx-kbd .ezsx-key.is-mac { font-size: 14px; padding: 0 6px; }
.ezsx-close {
width: 44px; height: 44px;
border: 0; padding: 0; cursor: pointer;
border-radius: 50%;
background: linear-gradient(135deg, var(--ezsx-accent-3) 0%, var(--ezsx-accent-2) 100%);
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
box-shadow: 0 6px 16px rgba(54, 128, 237, .30);
transition: transform .16s ease, box-shadow .16s ease;
flex-shrink: 0;
}
.ezsx-close:hover { transform: rotate(90deg); box-shadow: 0 8px 22px rgba(54, 128, 237, .40); }
.ezsx-close:active { transform: rotate(90deg) scale(.92); }
.ezsx-close:focus-visible { outline: 2px solid var(--ezsx-accent); outline-offset: 3px; }
.ezsx-close svg { width: 18px; height: 18px; }
/* ---------- category strip ---------- */
/* Nineteen module tabs (All + 18). They WRAP — every label stays whole
and on screen — and are cut slightly tighter than the old ten
category chips so the full set lands on two rows at 1200px. Under
640px the strip becomes a one-row sideways scroller instead: seven
rows of chips would push the results off a phone screen. */
.ezsx-tabs {
display: flex; flex-wrap: wrap; gap: 8px;
padding: 14px 24px;
border-bottom: 1px solid var(--ezsx-line-2);
background: linear-gradient(180deg, rgba(248, 250, 253, .6) 0%, rgba(255, 255, 255, .9) 100%);
overflow-x: auto;
scrollbar-width: none;
/* The shell is a column flexbox capped at 90vh and this strip is
an overflow container, so its automatic minimum height is 0:
a tall result list would squeeze it and the second row of tabs
simply vanished behind the overflow. The body is the one part
that scrolls, so it takes the whole deficit. */
flex-shrink: 0;
}
.ezsx-tabs::-webkit-scrollbar { display: none; }
.ezsx-tab {
border: 1px solid var(--ezsx-card-line);
background: #fff;
color: #3D4757;
padding: 8px 13px;
border-radius: 999px;
font-size: 12.5px; font-weight: 650; line-height: 1.2;
cursor: pointer; white-space: nowrap;
display: inline-flex; align-items: center; gap: 6px;
flex-shrink: 0;
box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
transition: transform .22s var(--ezsx-ease), background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .22s ease;
}
.ezsx-tab:hover {
border-color: rgba(54, 128, 237, .45); background: #F3F7FE; color: var(--ezsx-accent-2);
transform: translateY(-1px); box-shadow: 0 8px 18px -12px var(--ezsx-glow);
}
.ezsx-tab:active { transform: translateY(0) scale(.97); }
.ezsx-tab:focus-visible { outline: 2px solid var(--ezsx-accent); outline-offset: 2px; }
.ezsx-tab.is-active {
background: var(--ezsx-grad);
color: #fff;
border-color: transparent;
box-shadow: 0 8px 20px -8px var(--ezsx-glow), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.ezsx-tab.is-active:hover { color: #fff; transform: none; }
.ezsx-tab-ico {
width: 16px; height: 16px;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
line-height: 1;
color: currentColor;
}
.ezsx-tab-ico svg {
width: 16px; height: 16px;
display: block;
stroke: currentColor;
stroke-width: 2;
fill: none;
}
.ezsx-tab.is-active .ezsx-tab-ico svg { stroke: #fff; }
/* ---------- body ---------- */
.ezsx-body {
flex: 1;
overflow-y: auto;
padding: 22px 24px 22px;
}
.ezsx-body::-webkit-scrollbar { width: 8px; }
.ezsx-body::-webkit-scrollbar-thumb { background: var(--ezsx-line); border-radius: 8px; border: 2px solid var(--ezsx-bg); }
.ezsx-body::-webkit-scrollbar-thumb:hover { background: #cbd5e3; }
.ezsx-cols {
display: grid;
grid-template-columns: 1fr 1.35fr 1fr;
gap: 22px;
}
@media (max-width: 960px) {
.ezsx-cols { grid-template-columns: 1fr; }
}
/* Section titles — one voice for the idle columns, the result groups and
the results row: a small tinted plate around the mark, then the label.
The plate is the