/* ============================================================ QWEN — Tool Shell (.qshell-*) · premium navy + gold sidebar Self-contained. Injected into an arbitrary tool's document. Window-scroll layout (sidebar fixed, body padding) so the tool's own position:sticky / position:fixed panels keep working. No overflow / transform / filter on body|html. ============================================================ */ /* ---- the ONLY bare-element rules permitted (layout offset) ---- */ html{ -webkit-text-size-adjust:100%; } body{ padding-left:248px !important; transition:padding-left .26s cubic-bezier(.32,.72,0,1); } /* collapsed desktop icon-rail offset (JS adds .qshell-collapsed to ) */ body.qshell-collapsed{ padding-left:76px !important; } /* ---- scoped box-sizing / typography (no inheritance leak) ---- */ .qshell-topbar, .qshell-nav, .qshell-scrim, .qshell-footer{ box-sizing:border-box; font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } .qshell-topbar *, .qshell-nav *, .qshell-footer *{ box-sizing:border-box; } /* ============================================================ SIDEBAR (fixed — never scrolls; tool sticky stays alive) ============================================================ */ .qshell-nav{ position:fixed; top:0; left:0; bottom:0; width:248px; z-index:9000; display:flex; flex-direction:column; padding:0; color:#e9edf6; background:linear-gradient(176deg,#0a1530 0%,#0c1a3a 48%,#091126 100%); border-right:1px solid rgba(201,169,97,.16); box-shadow:1px 0 0 rgba(255,255,255,.02), 18px 0 40px -28px rgba(3,8,20,.9); overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:rgba(201,169,97,.28) transparent; transition:width .24s cubic-bezier(.32,.72,0,1); } .qshell-nav::-webkit-scrollbar{ width:8px; } .qshell-nav::-webkit-scrollbar-thumb{ background:rgba(201,169,97,.22); border-radius:999px; border:2px solid transparent; background-clip:content-box; } .qshell-nav::-webkit-scrollbar-thumb:hover{ background:rgba(201,169,97,.4); background-clip:content-box; } /* warm gold glow behind the brand — the "expensive" light source */ .qshell-nav::before{ content:""; position:absolute; top:-90px; left:50%; width:280px; height:200px; transform:translateX(-50%); background:radial-gradient(closest-side,rgba(201,169,97,.18),transparent 72%); pointer-events:none; z-index:0; } /* ---- brand row ---- */ .qshell-brand-row{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:10px; height:72px; padding:0 18px; margin-bottom:6px; border-bottom:1px solid rgba(255,255,255,.06); } .qshell-brand{ display:inline-flex; align-items:center; gap:11px; min-width:0; font-family:'Outfit','Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif; font-weight:800; font-size:1.24rem; letter-spacing:-.02em; color:#fff; text-decoration:none; border-radius:10px; padding:6px 8px; margin:-6px -8px; outline:none; transition:color .18s cubic-bezier(.23,1,.32,1); } .qshell-brandtext{ line-height:1; white-space:nowrap; transition:opacity .18s ease; } /* hexagon logo chip — gold gradient, brand anchor. Holds a real (gold hexagon). Soft navy plinth + gold rim makes it read as a machined emblem at any size. */ .qshell-logo{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; flex:0 0 34px; border-radius:10px; color:#0a1530; background: radial-gradient(120% 120% at 30% 22%,rgba(226,197,119,.20),transparent 60%), linear-gradient(150deg,#13234c 0%,#0c1834 100%); box-shadow:0 4px 14px rgba(3,8,20,.5), inset 0 0 0 1px rgba(201,169,97,.5), inset 0 1px 0 rgba(255,255,255,.08); transition:transform .35s cubic-bezier(.23,1,.32,1), box-shadow .35s cubic-bezier(.23,1,.32,1); } .qshell-logo svg{ width:19px; height:19px; display:block; } .qshell-logo img{ width:21px; height:21px; display:block; object-fit:contain; filter:drop-shadow(0 1px 2px rgba(3,8,20,.45)); } .qshell-brand:hover .qshell-logo{ transform:rotate(-6deg) scale(1.05); box-shadow:0 6px 20px rgba(3,8,20,.55), inset 0 0 0 1px rgba(201,169,97,.7), inset 0 1px 0 rgba(255,255,255,.12); } .qshell-brand:active .qshell-logo{ transform:rotate(-3deg) scale(.97); } /* ---- desktop collapse toggle (chevron) ---- */ .qshell-collapse{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; flex:0 0 30px; border:0; border-radius:9px; color:#9aa5bf; background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); cursor:pointer; outline:none; -webkit-tap-highlight-color:transparent; transition:background-color .18s ease,color .18s ease, box-shadow .18s ease,transform .3s cubic-bezier(.23,1,.32,1); } .qshell-collapse svg{ width:17px; height:17px; display:block; } @media (hover:hover) and (pointer:fine){ .qshell-collapse:hover{ color:#e2c577; background-color:rgba(201,169,97,.12); box-shadow:inset 0 0 0 1px rgba(201,169,97,.32); } } .qshell-collapse:active{ transform:scale(.9); } /* close (mobile drawer control — hidden on desktop) */ .qshell-close{ display:none; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px; color:#aeb8cc; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background-color .18s ease,color .18s ease, transform .12s cubic-bezier(.23,1,.32,1); } .qshell-close svg{ width:20px; height:20px; display:block; } .qshell-close:hover{ background-color:rgba(255,255,255,.07); color:#fff; } .qshell-close:active{ transform:scale(.92); } /* ============================================================ MENU ============================================================ */ .qshell-menu{ position:relative; z-index:1; flex:1 1 auto; display:flex; flex-direction:column; gap:2px; padding:14px 12px 10px; min-height:0; } .qshell-sec{ font-family:'Outfit','Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:.7rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:#9aa6c2; /* ~5.6:1 on navy — readable eyebrow */ padding:14px 12px 7px; white-space:nowrap; overflow:hidden; transition:opacity .18s ease; } .qshell-sec:first-child{ padding-top:4px; } /* ---- link ---- */ .qshell-link{ position:relative; display:flex; align-items:center; gap:12px; min-height:44px; /* touch target */ padding:9px 12px; border-radius:10px; color:#c2cbdd; /* ~9.4:1 on navy */ text-decoration:none; font-size:.925rem; font-weight:500; letter-spacing:-.005em; outline:none; transition:color .18s cubic-bezier(.23,1,.32,1), background-color .18s cubic-bezier(.23,1,.32,1); } .qshell-label{ flex:1 1 auto; min-width:0; line-height:1.15; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:opacity .18s ease; } /* gold left-rail indicator — anchored inside the menu padding, collapsed by default, grows on state (3px pseudo, no reflow) */ .qshell-link::before{ content:""; position:absolute; left:6px; top:50%; width:3px; height:0; transform:translateY(-50%); border-radius:3px; background:linear-gradient(180deg,#e2c577,#c9a961); transition:height .22s cubic-bezier(.23,1,.32,1); } /* icon */ .qshell-ico{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; flex:0 0 24px; color:#8b96b1; transition:color .18s cubic-bezier(.23,1,.32,1), transform .18s cubic-bezier(.23,1,.32,1); } .qshell-ico svg{ width:19px; height:19px; display:block; stroke-width:1.75; } /* hover (fine pointers only — taps never false-hover) — cool navy wash, deliberately DIFFERENT from the gold active state */ @media (hover:hover) and (pointer:fine){ .qshell-link:hover{ color:#fff; background-color:rgba(36,63,122,.42); /* navy-500 wash */ } .qshell-link:hover .qshell-ico{ color:#e2c577; transform:translateX(1px); } .qshell-link:hover::before{ height:18px; } } /* press feedback — the UI "hears" the tap */ .qshell-link:active{ transform:scale(.985); } /* keyboard focus ring (visible, gold, offset) */ .qshell-link:focus-visible, .qshell-brand:focus-visible, .qshell-account:focus-visible, .qshell-collapse:focus-visible, .qshell-close:focus-visible, .qshell-user:focus-visible, .qshell-drop-link:focus-visible, .qshell-burger:focus-visible, .qshell-topbrand:focus-visible{ outline:2px solid #e2c577; outline-offset:2px; } /* drawer toggle is a visually-hidden checkbox; surface its focus on the burger */ #qshell-toggle:focus-visible ~ .qshell-topbar .qshell-burger{ outline:2px solid #e2c577; outline-offset:2px; } /* ---- ACTIVE: machined gold pill + edge rail + bright text. Hover-independent so it always reads as current location. ---- */ .qshell-link.is-active{ color:#fff; font-weight:600; background:linear-gradient(90deg, rgba(201,169,97,.22) 0%, rgba(201,169,97,.10) 60%, rgba(201,169,97,.04) 100%); box-shadow:inset 0 0 0 1px rgba(201,169,97,.22), inset 0 1px 0 rgba(255,255,255,.08); } .qshell-link.is-active::before{ height:22px; } .qshell-link.is-active .qshell-ico{ color:#e2c577; } @media (hover:hover) and (pointer:fine){ .qshell-link.is-active:hover{ background:linear-gradient(90deg, rgba(201,169,97,.28) 0%, rgba(201,169,97,.13) 60%, rgba(201,169,97,.05) 100%); } .qshell-link.is-active:hover .qshell-ico{ transform:none; } } /* ============================================================ FOOTER SLOT (account) inside the sidebar ============================================================ */ .qshell-foot{ position:relative; z-index:1; margin-top:auto; padding:10px 12px 14px; border-top:1px solid rgba(255,255,255,.06); } /* logged-out single CTA */ .qshell-account{ display:flex; align-items:center; gap:12px; min-height:46px; padding:9px 12px; border-radius:11px; color:#d4dbea; text-decoration:none; font-size:.9rem; font-weight:600; outline:none; background:rgba(255,255,255,.035); box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); transition:color .18s cubic-bezier(.23,1,.32,1), background-color .18s cubic-bezier(.23,1,.32,1), box-shadow .18s cubic-bezier(.23,1,.32,1), transform .12s cubic-bezier(.23,1,.32,1); } .qshell-account .qshell-ico{ color:#9aa5bf; width:22px; height:22px; flex:0 0 22px; } .qshell-account .qshell-ico svg{ width:19px; height:19px; } @media (hover:hover) and (pointer:fine){ .qshell-account:hover{ color:#fff; background-color:rgba(201,169,97,.12); box-shadow:inset 0 0 0 1px rgba(201,169,97,.3); } .qshell-account:hover .qshell-ico{ color:#e2c577; } } .qshell-account:active{ transform:scale(.985); } /* ============================================================ USER MENU (logged in) — button + upward popover dropdown ============================================================ */ .qshell-user-wrap{ position:relative; } /* the trigger button: avatar · name · subtext · chevron */ .qshell-user{ display:flex; align-items:center; gap:11px; width:100%; min-height:54px; padding:8px 10px; border:0; border-radius:13px; text-align:left; color:#e6ebf6; cursor:pointer; outline:none; -webkit-tap-highlight-color:transparent; background: linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), inset 0 1px 0 rgba(255,255,255,.05); transition:background-color .2s cubic-bezier(.23,1,.32,1), box-shadow .2s cubic-bezier(.23,1,.32,1), transform .12s cubic-bezier(.23,1,.32,1); } @media (hover:hover) and (pointer:fine){ .qshell-user:hover{ box-shadow:inset 0 0 0 1px rgba(201,169,97,.34), inset 0 1px 0 rgba(255,255,255,.06); background:linear-gradient(180deg,rgba(201,169,97,.13),rgba(201,169,97,.05)); } .qshell-user:hover .qshell-user-name{ color:#fff; } .qshell-user:hover .qshell-user-chev{ color:#e2c577; } } .qshell-user:active{ transform:scale(.99); } .qshell-user-wrap.is-open .qshell-user{ box-shadow:inset 0 0 0 1px rgba(201,169,97,.4), inset 0 1px 0 rgba(255,255,255,.06); background:linear-gradient(180deg,rgba(201,169,97,.16),rgba(201,169,97,.06)); } /* avatar */ .qshell-avatar{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; flex:0 0 34px; border-radius:50%; overflow:hidden; color:#0a1530; font-family:'Outfit','Plus Jakarta Sans',system-ui,sans-serif; font-weight:800; font-size:.92rem; background:linear-gradient(135deg,#e2c577 0%,#c9a961 54%,#a08438 100%); box-shadow:0 2px 8px rgba(3,8,20,.4), inset 0 0 0 1px rgba(255,255,255,.22); } .qshell-avatar img{ width:100%; height:100%; display:block; object-fit:cover; } /* name + subtext stack */ .qshell-user-meta{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px; transition:opacity .18s ease; } .qshell-user-name{ font-size:.9rem; font-weight:700; line-height:1.2; letter-spacing:-.01em; color:#eef2fa; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color .18s ease; } .qshell-user-sub{ font-size:.74rem; font-weight:500; line-height:1.2; color:#94a0bd; /* ~5.2:1 on navy */ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .qshell-user-chev{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; flex:0 0 22px; color:#8b96b1; transition:color .18s ease,transform .28s cubic-bezier(.23,1,.32,1); } .qshell-user-chev svg{ width:16px; height:16px; display:block; } .qshell-user-wrap.is-open .qshell-user-chev{ transform:rotate(180deg); color:#e2c577; } /* ---- dropdown popover (opens UPWARD — anchored to bottom) ---- */ .qshell-dropdown{ position:absolute; left:0; right:0; bottom:calc(100% + 9px); z-index:20; padding:7px; border-radius:14px; background:linear-gradient(180deg,#0e1c3e 0%,#0b1530 100%); box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 0 0 1px rgba(201,169,97,.18), 0 26px 50px -18px rgba(3,8,20,.86), 0 8px 18px -10px rgba(3,8,20,.7); /* never exceed the viewport; scroll internally if the menu is tall */ max-height:calc(100vh - 96px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:rgba(201,169,97,.28) transparent; opacity:0; transform:translateY(8px) scale(.985); transform-origin:bottom center; pointer-events:none; transition:opacity .2s cubic-bezier(.23,1,.32,1), transform .26s cubic-bezier(.23,1,.32,1); } .qshell-user-wrap.is-open .qshell-dropdown{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; } /* little gold hairline divider above the danger row, drawn by margin gap */ .qshell-drop-link{ display:flex; align-items:center; gap:11px; min-height:42px; padding:8px 11px; border-radius:9px; color:#c8d1e3; text-decoration:none; font-size:.88rem; font-weight:600; letter-spacing:-.005em; outline:none; transition:color .16s ease,background-color .16s ease; } .qshell-drop-link .qshell-ico{ width:20px; height:20px; flex:0 0 20px; color:#8b96b1; transition:color .16s ease; } .qshell-drop-link .qshell-ico svg{ width:18px; height:18px; } @media (hover:hover) and (pointer:fine){ .qshell-drop-link:hover{ color:#fff; background-color:rgba(201,169,97,.14); } .qshell-drop-link:hover .qshell-ico{ color:#e2c577; } } .qshell-drop-link:active{ background-color:rgba(201,169,97,.2); } /* logout — warm-red affordance, still legible on navy */ .qshell-drop-danger{ margin-top:5px; color:#f0a6a0; box-shadow:0 -1px 0 rgba(255,255,255,.05); padding-top:11px; border-radius:9px; } .qshell-drop-danger .qshell-ico{ color:#e08a83; } @media (hover:hover) and (pointer:fine){ .qshell-drop-danger:hover{ color:#fff; background-color:rgba(214,96,88,.26); } .qshell-drop-danger:hover .qshell-ico{ color:#ffb3ac; } } .qshell-drop-danger:active{ background-color:rgba(214,96,88,.34); } /* ============================================================ COLLAPSED ICON-RAIL (desktop only) — width 76, labels fade out ============================================================ */ .qshell-nav.is-collapsed{ width:76px; } /* hide every text run; keep the iconography centered */ .qshell-nav.is-collapsed .qshell-brandtext, .qshell-nav.is-collapsed .qshell-label, .qshell-nav.is-collapsed .qshell-sec, .qshell-nav.is-collapsed .qshell-user-meta, .qshell-nav.is-collapsed .qshell-user-chev{ opacity:0; width:0; flex:0 0 0; margin:0; padding:0; pointer-events:none; } /* collapse the section eyebrow's vertical space too */ .qshell-nav.is-collapsed .qshell-sec{ height:8px; padding:4px 0 0; } /* center the brand emblem in the rail */ .qshell-nav.is-collapsed .qshell-brand-row{ justify-content:center; padding:0 10px; gap:0; } .qshell-nav.is-collapsed .qshell-brand{ gap:0; margin:0; padding:0; } /* keep the collapse chevron reachable — float it under the emblem, pinned to the rail's right edge so it never overlaps the logo */ .qshell-nav.is-collapsed .qshell-collapse{ position:absolute; top:21px; right:8px; width:24px; height:24px; flex:0 0 24px; } .qshell-nav.is-collapsed .qshell-collapse svg{ width:15px; height:15px; } /* links: center the icon, preserve the 44px target */ .qshell-nav.is-collapsed .qshell-link{ justify-content:center; gap:0; padding:9px 0; } .qshell-nav.is-collapsed .qshell-link::before{ left:4px; } /* footer: user button shrinks to just the avatar */ .qshell-nav.is-collapsed .qshell-foot{ padding:10px 8px 14px; } .qshell-nav.is-collapsed .qshell-user, .qshell-nav.is-collapsed .qshell-account{ justify-content:center; gap:0; padding:8px 0; } /* chevron flips when collapsed (« look) */ .qshell-nav.is-collapsed .qshell-collapse{ transform:rotate(180deg); } .qshell-nav.is-collapsed .qshell-collapse:active{ transform:rotate(180deg) scale(.9); } /* ---- collapsed: dropdown flies out to the RIGHT, not upward ---- */ .qshell-nav.is-collapsed .qshell-dropdown{ left:calc(100% + 12px); right:auto; bottom:0; width:218px; transform-origin:left bottom; transform:translateX(-8px) scale(.985); } .qshell-nav.is-collapsed .qshell-user-wrap.is-open .qshell-dropdown{ transform:translateX(0) scale(1); } /* ---- collapsed: tooltip on hover (fine pointer) ---- */ .qshell-nav.is-collapsed .qshell-link, .qshell-nav.is-collapsed .qshell-user, .qshell-nav.is-collapsed .qshell-account{ position:relative; } @media (hover:hover) and (pointer:fine){ /* base (resting) tooltip — present but hidden, so it can ANIMATE in. Faster than the menu transitions: a tooltip should feel instant. */ .qshell-nav.is-collapsed .qshell-link::after, .qshell-nav.is-collapsed .qshell-account::after, .qshell-nav.is-collapsed .qshell-user::after{ content:attr(data-label); position:absolute; left:calc(100% + 14px); top:50%; /* never appear from nothing: start nudged-left + barely-deflated */ transform:translateY(-50%) translateX(-4px) scale(.96); transform-origin:left center; z-index:30; padding:7px 11px; border-radius:9px; font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-size:.82rem; font-weight:600; letter-spacing:-.005em; white-space:nowrap; color:#eef2fa; background:linear-gradient(180deg,#0f1f44,#0b1530); box-shadow:0 0 0 1px rgba(201,169,97,.28), 0 14px 28px -12px rgba(3,8,20,.85); opacity:0; pointer-events:none; transition:opacity .13s cubic-bezier(.23,1,.32,1), transform .13s cubic-bezier(.23,1,.32,1); } .qshell-nav.is-collapsed .qshell-link:hover::after, .qshell-nav.is-collapsed .qshell-account:hover::after, .qshell-nav.is-collapsed .qshell-user:hover::after{ opacity:1; transform:translateY(-50%) translateX(0) scale(1); } /* active item's tooltip carries the gold cue */ .qshell-nav.is-collapsed .qshell-link.is-active::after{ box-shadow:0 0 0 1px rgba(201,169,97,.55), 0 14px 28px -12px rgba(3,8,20,.85); } /* don't show the tooltip on the user button while its dropdown is open */ .qshell-nav.is-collapsed .qshell-user-wrap.is-open .qshell-user::after{ content:none; } } /* ============================================================ MOBILE TOP BAR (hidden on desktop) ============================================================ */ .qshell-topbar{ display:none; position:fixed; top:0; left:0; right:0; height:56px; z-index:9000; align-items:center; gap:6px; padding:0 8px 0 6px; color:#fff; background:linear-gradient(180deg,#0a1530,#0b1734); border-bottom:1px solid rgba(201,169,97,.18); box-shadow:0 6px 22px -16px rgba(3,8,20,.9); } .qshell-burger{ display:inline-flex; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; padding:0 11px; border-radius:10px; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background-color .18s ease; } .qshell-burger span{ display:block; height:2px; width:100%; border-radius:2px; background:#e2c577; transition:transform .4s cubic-bezier(.32,.72,0,1), opacity .25s cubic-bezier(.32,.72,0,1); } .qshell-burger:hover{ background-color:rgba(255,255,255,.06); } .qshell-topbrand{ display:inline-flex; align-items:center; gap:9px; font-family:'Outfit','Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif; font-weight:800; font-size:1.12rem; letter-spacing:-.02em; color:#fff; text-decoration:none; padding:4px 6px; border-radius:9px; } .qshell-topbrand .qshell-logo{ width:30px; height:30px; flex:0 0 30px; border-radius:9px; } .qshell-topbrand .qshell-logo svg{ width:17px; height:17px; } .qshell-topbrand .qshell-logo img{ width:18px; height:18px; } /* ============================================================ SCRIM (mobile drawer backdrop) ============================================================ */ .qshell-scrim{ display:none; position:fixed; inset:0; z-index:8900; background:rgba(4,9,20,.55); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); opacity:0; pointer-events:none; cursor:pointer; transition:opacity .26s cubic-bezier(.32,.72,0,1); } /* ============================================================ STATE TOGGLE (CSS-only, no JS) + burger → X morph ============================================================ */ #qshell-toggle:checked ~ .qshell-nav{ transform:none; } #qshell-toggle:checked ~ .qshell-scrim{ opacity:1; pointer-events:auto; } #qshell-toggle:checked ~ .qshell-topbar .qshell-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); } #qshell-toggle:checked ~ .qshell-topbar .qshell-burger span:nth-child(2){ opacity:0; } #qshell-toggle:checked ~ .qshell-topbar .qshell-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } /* ============================================================ FOOTER (page bottom, lives in the content column) ============================================================ */ .qshell-footer{ margin-top:48px; padding:22px 24px; text-align:center; font-size:.82rem; color:#555566; background:#faf7f2; border-top:1px solid #e1e1e8; } .qshell-footer a{ color:#a08438; font-weight:600; text-decoration:none; border-bottom:1px solid transparent; transition:border-color .18s ease,color .18s ease; } .qshell-footer a:focus-visible{ outline:2px solid #a08438; outline-offset:2px; border-radius:3px; } @media (hover:hover) and (pointer:fine){ .qshell-footer a:hover{ color:#0f1f44; border-bottom-color:rgba(160,132,56,.5); } } /* ============================================================ RESPONSIVE — off-canvas drawer (collapse rail is desktop-only) ============================================================ */ @media (max-width:900px){ body{ padding-left:0 !important; padding-top:56px !important; /* clear the fixed top bar */ } /* a stale collapsed body class must not zero-out the mobile offset */ body.qshell-collapsed{ padding-left:0 !important; } .qshell-topbar{ display:flex; } .qshell-scrim{ display:block; } .qshell-close{ display:inline-flex; } .qshell-collapse{ display:none; } /* collapse rail is desktop-only */ .qshell-nav{ width:286px; max-width:86vw; transform:translateX(-100%); box-shadow:24px 0 60px -22px rgba(3,8,20,.85); transition:transform .34s cubic-bezier(.32,.72,0,1); /* iOS-like glide */ will-change:transform; } /* a desktop collapse state must never leak into the mobile drawer: force full labels + comfortable density inside the off-canvas panel */ .qshell-nav.is-collapsed{ width:286px; max-width:86vw; } .qshell-nav.is-collapsed .qshell-brandtext, .qshell-nav.is-collapsed .qshell-label, .qshell-nav.is-collapsed .qshell-sec, .qshell-nav.is-collapsed .qshell-user-meta, .qshell-nav.is-collapsed .qshell-user-chev{ opacity:1; width:auto; flex:1 1 auto; pointer-events:auto; } .qshell-nav.is-collapsed .qshell-user-chev, .qshell-nav.is-collapsed .qshell-user-meta{ flex:0 0 auto; } .qshell-nav.is-collapsed .qshell-user-meta{ flex:1 1 auto; } .qshell-nav.is-collapsed .qshell-sec{ height:auto; padding:14px 12px 8px; } .qshell-nav.is-collapsed .qshell-brand-row{ justify-content:space-between; padding:0 18px; gap:10px; } .qshell-nav.is-collapsed .qshell-brand{ gap:11px; } .qshell-nav.is-collapsed .qshell-link{ justify-content:flex-start; gap:12px; padding:12px 12px; } .qshell-nav.is-collapsed .qshell-user, .qshell-nav.is-collapsed .qshell-account{ justify-content:flex-start; gap:12px; padding:12px; } .qshell-nav.is-collapsed .qshell-dropdown{ left:0; right:0; bottom:calc(100% + 9px); width:auto; transform:translateY(8px) scale(.985); } .qshell-nav.is-collapsed .qshell-user-wrap.is-open .qshell-dropdown{ transform:translateY(0) scale(1); } /* keep comfortable touch density in the drawer */ .qshell-link{ padding:12px 12px; } .qshell-account{ padding:12px; } .qshell-sec{ padding:14px 12px 8px; } } /* ============================================================ REDUCED MOTION — strip movement, keep instant clarity ============================================================ */ @media (prefers-reduced-motion:reduce){ body, .qshell-nav, .qshell-scrim, .qshell-link, .qshell-link::before, .qshell-ico, .qshell-logo, .qshell-account, .qshell-user, .qshell-user-chev, .qshell-dropdown, .qshell-drop-link, .qshell-collapse, .qshell-close, .qshell-burger, .qshell-burger span, .qshell-brand, .qshell-brandtext, .qshell-label, .qshell-sec, .qshell-user-meta, .qshell-footer a{ transition-duration:.001ms !important; } .qshell-link:active, .qshell-account:active, .qshell-user:active, .qshell-collapse:active, .qshell-close:active, .qshell-brand:hover .qshell-logo, .qshell-brand:active .qshell-logo{ transform:none !important; } .qshell-collapse:active{ transform:none !important; } .qshell-nav.is-collapsed .qshell-collapse, .qshell-nav.is-collapsed .qshell-collapse:active{ transform:rotate(180deg) !important; } .qshell-user-wrap.is-open .qshell-user-chev{ transform:rotate(180deg) !important; } /* dropdown + tooltip: keep the opacity reveal (aids comprehension), drop all positional movement */ .qshell-dropdown, .qshell-user-wrap.is-open .qshell-dropdown, .qshell-nav.is-collapsed .qshell-dropdown, .qshell-nav.is-collapsed .qshell-user-wrap.is-open .qshell-dropdown{ transition-duration:.001ms !important; transform:none !important; } .qshell-nav.is-collapsed .qshell-link::after, .qshell-nav.is-collapsed .qshell-account::after, .qshell-nav.is-collapsed .qshell-user::after{ transition-duration:.001ms !important; transform:translateY(-50%) !important; } #qshell-toggle:checked ~ .qshell-topbar .qshell-burger span:nth-child(1), #qshell-toggle:checked ~ .qshell-topbar .qshell-burger span:nth-child(3){ transform:none !important; } .qshell-nav{ will-change:auto; } }