/* ============================================================================
Capital Kings - Liquid Glass Pill Nav
----------------------------------------------------------------------------
Shared styling for the floating capsule nav across every page.
Inspired by Apple's WWDC 2025 Liquid Glass material.
Required HTML structure (minimum):
Optional mobile chip bar (place RIGHT AFTER ):
The companion nav-pill.js file initializes mega-menu hover and scroll state.
========================================================================== */
/* ── Embedded mode ──────────────────────────────────────────────────────
When this page is loaded inside an iframe (e.g. expense-manager embedded
in portal), hide our own pill - the parent page already has one. The
`lg-embedded` class is added to by nav-pill.js before paint. */
html.lg-embedded nav,
html.lg-embedded .nav-chip-bar,
html.lg-embedded body::before {
display: none !important;
}
/* ── Pill nav container ─────────────────────────────────────────────────── */
nav {
position: fixed;
top: calc(env(safe-area-inset-top, 0px) + 14px);
/* Auto-margin centering (NOT transform). A `transform` on a parent
creates a new stacking context that prevents `backdrop-filter` on
descendants (like .mega-panel) from blurring page content behind. */
left: 14px;
right: 14px;
margin: 0 auto;
z-index: 100;
max-width: 1180px;
display: flex; align-items: center; justify-content: space-between;
gap: 1rem;
padding: 0.7rem 0.7rem 0.7rem 1.6rem;
/* Static top-gloss baked into the bg so ::after is free for the cursor sheen */
background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 35%, transparent 60%), rgba(22, 22, 24, 0.42);
-webkit-backdrop-filter: blur(36px) saturate(190%) brightness(1.04);
backdrop-filter: blur(36px) saturate(190%) brightness(1.04);
border-radius: 999px;
box-shadow:
0 12px 38px rgba(0, 0, 0, 0.48),
0 0 0 0.5px rgba(201, 168, 76, 0.22), /* gold trace ring */
0 0 24px rgba(201, 168, 76, 0.06), /* soft ambient halo */
inset 0 1px 0 rgba(255, 255, 255, 0.16),/* top edge light catch */
inset 0 -0.5px 0 rgba(0, 0, 0, 0.18); /* bottom edge depth */
transition: background 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease;
/* REMOVED: transform: translateZ(0); will-change: backdrop-filter;
contain: layout style;
These were added to fix scroll jank but caused a worse iOS Safari bug:
a fixed-position element with `transform` becomes a containing block
for itself, which can break fixed positioning during momentum scroll.
User reported: "the header actually moved down when scrolling".
Reverted. Mild scroll jank is better than the nav floating away. */
}
/* Animated gold rim - soft bright segment drifts around the perimeter.
20 seconds per lap, softened bright spec (was 0.55 + 0.45 → 0.32 + 0.24)
so on iOS Safari it reads as elegant trace, not a glitchy flashlight. */
@property --rim-angle {
syntax: '';
initial-value: 0deg;
inherits: false;
}
nav::before {
content: '';
position: absolute; inset: 0;
border-radius: 999px;
padding: 1px;
background: conic-gradient(
from var(--rim-angle, 0deg),
rgba(201, 168, 76, 0.18) 0%,
rgba(201, 168, 76, 0.18) 6%,
rgba(218, 184, 96, 0.32) 12%,
rgba(232, 200, 130, 0.24) 16%,
rgba(201, 168, 76, 0.24) 22%,
rgba(201, 168, 76, 0.18) 32%,
rgba(201, 168, 76, 0.18) 100%
);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
/* will-change hints GPU compositing - keeps the rim animation off the
main thread on iOS so scroll stays smooth. */
will-change: background;
animation: nav-rim-travel 20s linear infinite;
}
@keyframes nav-rim-travel { to { --rim-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) {
nav::before { animation: none; }
}
/* iOS Safari: kill the rim entirely on small screens - backdrop-filter +
conic-gradient + animation triples the GPU cost and causes scroll jank.
The frosted pill alone reads elegant; the rim is a desktop nicety. */
@media (max-width: 768px) {
nav::before { animation: none; background: none; }
}
/* Pointer-tracking specular sheen - the glass pill catches light under the
cursor (liquid-glass effect). --mx/--my are set by nav-pill.js on pointermove.
The static top-gloss now lives in the nav background so ::after is free for
this sheen. Mirrors the admin CRM topbar's cursor glass on every Oasys bar. */
nav::after {
content: '';
position: absolute; inset: 0;
border-radius: 999px;
background: radial-gradient(190px circle at var(--mx, 50%) var(--my, -40%),
rgba(255, 255, 255, 0.11),
rgba(255, 255, 255, 0.035) 38%,
transparent 62%);
opacity: 0;
transition: opacity 0.45s ease;
pointer-events: none;
}
nav:hover::after { opacity: 1; }
/* ── Reusable liquid-glass cursor sheen ─────────────────────────────────────
Add the `lg-sheen` class to any ALREADY-POSITIONED glass surface (dropdowns,
menus, panels, the crown menu, the app launcher) to give it the same
cursor-following specular highlight as the Oasys pill. nav-pill.js sets
--mx/--my on whichever .lg-sheen element the pointer is over. The element
must be position:relative/absolute/fixed; ::after inherits its border-radius. */
.lg-sheen::after {
content: '';
position: absolute; inset: 0;
border-radius: inherit;
background: radial-gradient(180px circle at var(--mx, 50%) var(--my, -30%),
rgba(255, 255, 255, 0.10),
rgba(255, 255, 255, 0.03) 40%,
transparent 64%);
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
z-index: 0;
}
.lg-sheen:hover::after { opacity: 1; }
/* Keep the panel's own content above the sheen */
.lg-sheen > * { position: relative; z-index: 1; }
/* Scrolled state: glass thickens, gold trace intensifies */
nav.scrolled {
background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 35%, transparent 60%), rgba(18, 18, 20, 0.62);
-webkit-backdrop-filter: blur(42px) saturate(200%) brightness(1.02);
backdrop-filter: blur(42px) saturate(200%) brightness(1.02);
box-shadow:
0 16px 44px rgba(0, 0, 0, 0.6),
0 0 0 0.5px rgba(201, 168, 76, 0.32),
0 0 28px rgba(201, 168, 76, 0.10),
inset 0 1px 0 rgba(255, 255, 255, 0.18),
inset 0 -0.5px 0 rgba(0, 0, 0, 0.22);
}
/* ── Nav children ───────────────────────────────────────────────────────── */
.nav-logo { text-decoration: none; display: flex; align-items: center; position: relative; z-index: 1; }
/* Default logo image size so pages don't need per-page inline style to constrain it */
.nav-logo img { height: 42px; width: auto; display: block; }
.nav-links { display: flex; gap: 1.8rem; list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; }
.nav-links a { color: var(--muted, #888); text-decoration: none; font-size: 0.8rem; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; transition: color 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.nav-links a:hover { color: var(--gold, #C9A84C); }
.nav-cta { background: var(--gold, #C9A84C); color: #000; padding: 0.55rem 1.4rem; border-radius: 999px; text-decoration: none; font-size: 0.78rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; transition: background 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); box-shadow: 0 0 8px rgba(201,168,76,0.35), 0 0 0 1px rgba(201,168,76,0.15); position: relative; z-index: 1; }
.nav-cta:hover { background: var(--gold-light, #E2C070); box-shadow: 0 0 16px rgba(201,168,76,0.55), 0 0 0 1px rgba(201,168,76,0.3); transform: translateY(-2px); }
.nav-portal-btn { border: 1px solid rgba(255,255,255,0.2); color: #fff; padding: 0.5rem 1.1rem; border-radius: 999px; text-decoration: none; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; white-space: nowrap; background: rgba(255,255,255,0.03); }
.nav-portal-btn:hover { border-color: var(--gold, #C9A84C); color: var(--gold, #C9A84C); background: rgba(201,168,76,0.08); }
.nav-btn-group { display: flex; align-items: center; gap: 0.5rem; position: relative; z-index: 1; }
/* Generic glass back button - for tool pages with no other nav controls */
.nav-back { border: 1px solid rgba(255,255,255,0.18); color: #fff; padding: 0.5rem 1.1rem; border-radius: 999px; text-decoration: none; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; white-space: nowrap; background: rgba(255,255,255,0.03); display: inline-flex; align-items: center; gap: 0.35rem; position: relative; z-index: 1; }
.nav-back:hover { border-color: var(--gold, #C9A84C); color: var(--gold, #C9A84C); background: rgba(201,168,76,0.08); }
/* ── Mega-menu (marketing pages with dropdown nav items) ────────────────── */
.nav-item { position: relative; list-style: none; }
.nav-item > a {
display: flex; align-items: center; gap: 0.3rem;
color: var(--muted, #888); text-decoration: none; font-size: 0.8rem;
font-weight: 500; letter-spacing: 1px; text-transform: uppercase;
transition: color 0.2s; cursor: pointer; background: none; border: none;
font-family: inherit; padding: 0;
}
.nav-item > a:hover, .nav-item.open > a { color: var(--gold, #C9A84C); }
.nav-item > a .caret { font-size: 0.55rem; transition: transform 0.2s; display: inline-block; margin-top: 1px; color: var(--muted, #888); }
.nav-item.open > a .caret { transform: rotate(180deg); color: var(--gold, #C9A84C); }
.mega-panel {
position: absolute; top: calc(100% + 14px); left: 50%;
transform: translateX(-50%) translateY(-4px);
background: rgba(20, 20, 22, 0.68);
-webkit-backdrop-filter: blur(40px) saturate(190%) brightness(1.04);
backdrop-filter: blur(40px) saturate(190%) brightness(1.04);
border-radius: 18px;
box-shadow:
0 24px 64px rgba(0, 0, 0, 0.65),
0 0 0 0.5px rgba(201, 168, 76, 0.22),
0 0 28px rgba(201, 168, 76, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.14),
inset 0 -0.5px 0 rgba(0, 0, 0, 0.20);
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
z-index: 200; min-width: 720px; max-width: calc(100vw - 2rem);
overflow: hidden;
}
.mega-panel::before {
content: ''; position: absolute; top: -6px; left: 50%;
width: 12px; height: 12px;
background: rgba(20, 20, 22, 0.68);
-webkit-backdrop-filter: blur(40px) saturate(190%) brightness(1.04);
backdrop-filter: blur(40px) saturate(190%) brightness(1.04);
transform: translateX(-50%) rotate(45deg);
pointer-events: none;
border-top: 0.5px solid rgba(201, 168, 76, 0.22);
border-left: 0.5px solid rgba(201, 168, 76, 0.22);
}
/* Extended hover bridge - covers gap + 24px buffer past panel edges */
.mega-panel::after {
content: ''; position: absolute; top: -24px;
left: -24px; right: -24px;
height: 24px; background: transparent;
}
/* Panel open state - selector works whether panel is inside .nav-item
(initial render) or portaled to body (after nav-pill.js runs, which
syncs the `.open` class onto the panel directly so backdrop-filter
can blur page content properly) */
.nav-item.open .mega-panel,
.mega-panel.open {
opacity: 1; visibility: visible; pointer-events: all;
transform: translateX(-50%) translateY(0);
}
.mega-inner { display: grid; gap: 0; }
.mega-inner.two-col { grid-template-columns: 1fr 1fr; }
.mega-inner.three-col { grid-template-columns: 1fr 1fr 240px; }
.mega-col { padding: 1.6rem 1.8rem; }
.mega-col + .mega-col { border-left: 1px solid var(--border, #2A2A2A); }
.mega-col-label {
font-size: 0.58rem; font-weight: 700; letter-spacing: 0.2em;
text-transform: uppercase; color: var(--gold, #C9A84C);
padding-bottom: 0.75rem; margin-bottom: 0.75rem;
border-bottom: 1px solid var(--border, #2A2A2A);
}
.mega-link {
display: flex; align-items: flex-start; gap: 0.85rem;
padding: 0.65rem 0.7rem; border-radius: 4px; text-decoration: none;
color: var(--text, #F0F0F0); transition: background 0.15s, color 0.15s;
margin: 0 -0.7rem;
}
.mega-link:hover { background: rgba(201,168,76,0.07); }
.mega-link-icon { font-size: 1.1rem; flex-shrink: 0; width: 28px; text-align: center; margin-top: 1px; }
.mega-link-text { flex: 1; }
.mega-link-title { font-size: 0.83rem; font-weight: 600; color: var(--text, #F0F0F0); margin-bottom: 0.18rem; line-height: 1.3; }
.mega-link:hover .mega-link-title { color: var(--gold, #C9A84C); }
.mega-link-desc { font-size: 0.72rem; color: var(--muted, #888); line-height: 1.45; }
.mega-featured {
background: linear-gradient(135deg, rgba(201,168,76,0.1) 0%, var(--bg3, #1A1A1A) 100%);
border-radius: 0 5px 5px 0; padding: 1.6rem 1.6rem;
display: flex; flex-direction: column; justify-content: space-between;
}
.mega-feat-label { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold, #C9A84C); margin-bottom: 0.75rem; }
.mega-feat-title { font-family: 'Bebas Neue', sans-serif; font-size: 1.4rem; letter-spacing: 0.04em; line-height: 1.1; color: var(--text, #F0F0F0); margin-bottom: 0.6rem; }
.mega-feat-desc { font-size: 0.76rem; color: var(--muted, #888); line-height: 1.55; flex: 1; }
.mega-feat-cta { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1.25rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold, #C9A84C); text-decoration: none; transition: gap 0.18s; }
.mega-feat-cta:hover { gap: 0.7rem; }
/* ── Mobile chip bar (replaces hamburger) ───────────────────────────────── */
.nav-chip-bar {
display: none; /* shown via mobile media query below */
position: fixed;
top: calc(env(safe-area-inset-top, 0px) + 78px);
left: 10px; right: 10px;
transform: none;
max-width: none;
justify-content: flex-start;
align-items: center;
z-index: 99;
gap: 0.35rem;
padding: 0.4rem 0.55rem;
background: rgba(22, 22, 24, 0.42);
-webkit-backdrop-filter: blur(36px) saturate(190%) brightness(1.04);
backdrop-filter: blur(36px) saturate(190%) brightness(1.04);
border-radius: 999px;
overflow-x: auto; overflow-y: hidden;
scrollbar-width: none; -ms-overflow-style: none;
box-shadow:
0 8px 26px rgba(0, 0, 0, 0.42),
0 0 0 0.5px rgba(201, 168, 76, 0.20),
0 0 20px rgba(201, 168, 76, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.14),
inset 0 -0.5px 0 rgba(0, 0, 0, 0.16);
-webkit-overflow-scrolling: touch;
}
.nav-chip-bar::-webkit-scrollbar { display: none; }
.nav-chip {
flex-shrink: 0; display: inline-flex; align-items: center;
min-height: 38px; padding: 0 0.95rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.78);
font-size: 0.7rem; font-weight: 600;
letter-spacing: 0.08em; text-transform: uppercase;
text-decoration: none; white-space: nowrap;
transition: background 0.2s, color 0.2s, border-color 0.2s;
-webkit-tap-highlight-color: transparent;
}
.nav-chip:active, .nav-chip:hover {
background: rgba(201, 168, 76, 0.15);
color: var(--gold, #C9A84C);
border-color: rgba(201, 168, 76, 0.35);
}
/* ── Oasys Deal Chip ──────────────────────────────────────────────────────
Persistent verdict carried across pages after the visitor runs the 70%
Rule Deal Analyzer. Injected into the pill by nav-pill.js. */
.oasys-deal-chip {
display: inline-flex; align-items: center; gap: 0.1rem;
flex-shrink: 0; position: relative; z-index: 1;
border-radius: 999px;
background: rgba(201, 168, 76, 0.10);
border: 1px solid rgba(201, 168, 76, 0.30);
overflow: hidden;
animation: odc-pop 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes odc-pop {
from { opacity: 0; transform: scale(0.85); }
to { opacity: 1; transform: scale(1); }
}
.oasys-deal-chip .odc-link {
display: inline-flex; align-items: center; gap: 0.5rem;
padding: 0.42rem 0.5rem 0.42rem 0.8rem;
text-decoration: none; color: var(--text, #F0F0F0);
font-size: 0.74rem; font-weight: 600; letter-spacing: 0.02em;
white-space: nowrap; transition: background 0.2s;
}
.oasys-deal-chip .odc-link:hover { background: rgba(201, 168, 76, 0.10); }
.oasys-deal-chip .odc-dot {
width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
background: var(--muted, #888);
box-shadow: 0 0 7px currentColor;
}
.oasys-deal-chip[data-tone="green"] .odc-dot { background: #4ade80; color: #4ade80; }
.oasys-deal-chip[data-tone="amber"] .odc-dot { background: #fbbf24; color: #fbbf24; }
.oasys-deal-chip[data-tone="red"] .odc-dot { background: #f87171; color: #f87171; }
.oasys-deal-chip .odc-dismiss {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 28px; padding: 0;
background: none; border: none; cursor: pointer;
color: var(--muted, #888); font-size: 1rem; line-height: 1;
transition: color 0.2s;
-webkit-tap-highlight-color: transparent;
}
.oasys-deal-chip .odc-dismiss:hover { color: var(--gold, #C9A84C); }
/* On mobile the pill is tight - show the verdict dot + text but drop the
chip on the smallest screens where the CTA needs the room. */
@media (max-width: 600px) {
.oasys-deal-chip { display: none; }
}
/* ── Oasys Inline Search ──────────────────────────────────────────────────
A live search input embedded directly in the Oasys pill. Type to filter
actions; results drop down as a connected panel below the input. */
/* The search wrapper sits inside the nav pill */
.oasys-search-wrap {
position: relative; z-index: 2;
flex-shrink: 0;
}
/* The input styled as a pill-within-the-pill */
.oasys-search-wrap input {
display: flex; align-items: center;
height: 38px; width: 196px; padding: 0 0.5rem 0 2.1rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.18);
color: var(--text, #F0F0F0);
font-family: inherit; font-size: 0.84rem; font-weight: 500;
letter-spacing: 0.005em; outline: none;
transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, width 0.25s ease;
-webkit-tap-highlight-color: transparent;
}
.oasys-search-wrap input::placeholder { color: var(--muted, #888); }
.oasys-search-wrap input:focus {
width: 260px;
border-color: var(--gold, #C9A84C);
background: rgba(201, 168, 76, 0.08);
box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.10);
}
/* Search icon pinned inside the input */
.oasys-search-ic {
position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%);
pointer-events: none; color: var(--muted, #888);
transition: color 0.2s;
}
.oasys-search-wrap input:focus ~ .oasys-search-ic { color: var(--gold, #C9A84C); }
.oasys-search-ic svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
/* ⌘K badge */
.oasys-search-kbd {
position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%);
pointer-events: none;
font-size: 0.58rem; font-weight: 700; letter-spacing: 0.06em;
padding: 0.1rem 0.3rem; border-radius: 5px;
border: 1px solid rgba(255, 255, 255, 0.16);
color: var(--muted, #888); line-height: 1;
transition: opacity 0.15s;
}
.oasys-search-wrap input:focus ~ .oasys-search-kbd,
.oasys-search-wrap input:not(:placeholder-shown) ~ .oasys-search-kbd { opacity: 0; }
/* Results dropdown - connected to the input, no full-screen overlay */
.oasys-search-results {
display: none;
position: absolute;
top: calc(100% + 6px);
right: 0;
width: 380px;
max-height: 60vh; overflow-y: auto;
background: rgba(18, 18, 20, 0.97);
-webkit-backdrop-filter: blur(40px) saturate(190%);
backdrop-filter: blur(40px) saturate(190%);
border-radius: 14px;
box-shadow:
0 16px 48px rgba(0, 0, 0, 0.7),
0 0 0 0.5px rgba(201, 168, 76, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
padding: 0.4rem;
animation: osr-drop 0.18s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.oasys-search-results.open { display: block; }
@keyframes osr-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* Click-away layer - invisible, behind the dropdown, catches outside clicks */
.oasys-search-backdrop {
display: none; position: fixed; inset: 0; z-index: 1;
}
.oasys-search-backdrop.open { display: block; }
/* Result items - reuse op-item styles */
.op-list { padding: 0; }
.op-item {
display: flex; align-items: center; gap: 0.85rem;
padding: 0.65rem 0.75rem; border-radius: 10px;
text-decoration: none; color: var(--text, #F0F0F0);
transition: background 0.14s;
}
.op-item-ic {
flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(201, 168, 76, 0.12); color: var(--gold, #C9A84C);
}
.op-item-ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.op-item-text { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.op-item-title { font-size: 0.84rem; font-weight: 600; }
.op-item-sub { font-size: 0.7rem; color: var(--muted, #888); }
.op-item-go {
flex-shrink: 0; color: var(--muted, #888); font-size: 0.8rem;
opacity: 0; transition: opacity 0.15s, color 0.15s;
}
.op-item.active, .op-item:hover { background: rgba(201, 168, 76, 0.12); }
.op-item.active .op-item-go, .op-item:hover .op-item-go { opacity: 1; color: var(--gold, #C9A84C); }
.op-empty { padding: 1.2rem; text-align: center; color: var(--muted, #888); font-size: 0.8rem; }
@media (max-width: 768px) {
.oasys-search-wrap input { width: 44px; padding-right: 0.3rem; font-size: 0; }
.oasys-search-wrap input::placeholder { font-size: 0; }
.oasys-search-wrap input:focus { width: 180px; font-size: 0.84rem; }
.oasys-search-wrap input:focus::placeholder { font-size: 0.84rem; }
.oasys-search-kbd { display: none; }
.oasys-search-ic { left: 0.85rem; }
.oasys-search-results { width: calc(100vw - 28px); right: -8px; }
}
/* ── Hamburger button (auto-injected by nav-pill.js, hidden on desktop) ── */
.lg-hamburger {
display: none; /* shown on mobile via media query */
width: 40px; height: 40px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.18);
cursor: pointer; padding: 0;
flex-direction: column; align-items: center; justify-content: center;
gap: 4px;
flex-shrink: 0;
position: relative; z-index: 1;
transition: border-color 0.2s, background 0.2s;
-webkit-tap-highlight-color: transparent;
}
.lg-hamburger span {
display: block;
width: 18px; height: 2px;
background: var(--gold, #C9A84C);
border-radius: 2px;
transition: transform 0.25s ease, opacity 0.2s ease;
}
.lg-hamburger:hover, .lg-hamburger:active {
border-color: var(--gold, #C9A84C);
background: rgba(201, 168, 76, 0.10);
}
/* When open: turn into an X */
.lg-hamburger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.lg-hamburger.is-open span:nth-child(2) { opacity: 0; }
.lg-hamburger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* ── Hamburger dropdown menu - matches the portal crown menu ───────────────
A compact liquid-glass panel that springs down from the hamburger
(top-right anchor), instead of a full-screen takeover. The page shows
through; only the panel is frosted glass. Mirrors .nav-admin-menu in
portal.html: heavy blur + saturation, hairline light border, top sheen,
spring scale-in. The overlay itself is a transparent full-screen
click-catcher so a tap outside the panel closes it. */
.lg-menu-overlay {
position: fixed; inset: 0;
background: transparent;
z-index: 200;
visibility: hidden;
pointer-events: none;
}
.lg-menu-overlay.open {
visibility: visible;
pointer-events: auto;
/* Background touches don't scroll the page (the JS also pins ). */
touch-action: none;
}
/* While the menu is open the page behind it is locked (JS pins the body). */
html.lg-scroll-lock { overflow: hidden; }
.lg-menu-inner {
/* IMPORTANT: this is a