/* ============================================ OFFSEASON WEB APP — App Shell + Views Inherits design tokens from landing.css ============================================ */ /* Global border-box for the app shell so width:100% + padding never overflows. (Landing pages scope this to .bw-landing; the app is not, so set it here.) */ #bw-app, #bw-app *, #bw-app *::before, #bw-app *::after { box-sizing: border-box; } /* Reset for app pages (no landing pitch bg) */ body { margin: 0; padding: 0; font-family: var(--bw-font-body); background: var(--bw-bg); color: var(--bw-text-primary); -webkit-font-smoothing: antialiased; min-height: 100dvh; } /* Visually-hidden but available to screen readers (labels, live regions). */ .bw-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Guarantee a visible keyboard-focus ring on synthetic buttons (role=button divs/rows/spans) and links, so keyboard users can see where they are. */ #bw-app [role="button"]:focus-visible, #bw-app a:focus-visible, #bw-app button:focus-visible { outline: 2px solid var(--bw-gold); outline-offset: 2px; border-radius: 4px; } /* Route changes move focus programmatically onto the view container/heading (tabindex="-1", announceView). Those targets are unreachable by Tab, so a focus ring there is pure noise (the full-page blue border after login). Real keyboard focus rings on links/buttons stay via :focus-visible above. */ [tabindex="-1"]:focus { outline: none; } /* Skip-to-content: off-screen until focused, then pinned top-left. */ .bw-skip-link { position: fixed; top: 0.5rem; left: 0.5rem; z-index: 1000; background: var(--bw-surface); color: var(--bw-text-primary); border: 1px solid var(--bw-border-strong); border-radius: 8px; padding: 0.55rem 0.9rem; font-size: 0.875rem; font-weight: 600; text-decoration: none; transform: translateY(-150%); transition: transform 0.15s ease; } .bw-skip-link:focus { transform: translateY(0); outline: 2px solid var(--bw-gold); outline-offset: 2px; } /* ============================================ APP SHELL LAYOUT ============================================ */ #bw-app { display: grid; grid-template-columns: 260px 1fr; min-height: 100dvh; } /* Sidebar */ .bw-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 260px; background: var(--bw-surface); border-right: 1px solid var(--bw-border-subtle); display: flex; flex-direction: column; z-index: 100; transition: background var(--bw-transition-theme), border var(--bw-transition-theme); } .bw-sidebar-header { display: flex; align-items: center; gap: 0.625rem; padding: 1.25rem 1.25rem 1rem; border-bottom: 1px solid var(--bw-border-subtle); } .bw-sidebar-logo { width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0; } [data-theme="dark"] .bw-sidebar-logo { background: #FAFAFA; padding: 3px; } .bw-sidebar-brand { display: flex; flex-direction: column; line-height: 1.1; } .bw-sidebar-title { font-family: var(--bw-font-display); font-size: 0.9rem; font-weight: 700; letter-spacing: 1.5px; color: var(--bw-text-primary); } .bw-sidebar-subtitle { font-size: 0.6rem; color: var(--bw-text-muted); letter-spacing: 0.5px; } /* Sidebar nav */ .bw-sidebar-nav { flex: 1; padding: 0.75rem 0.75rem; display: flex; flex-direction: column; gap: 0.25rem; } .bw-nav-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.875rem; border-radius: 10px; color: var(--bw-text-secondary); text-decoration: none; font-size: 0.875rem; font-weight: 500; transition: background 0.15s ease, color 0.15s ease; } .bw-nav-item svg { width: 20px; height: 20px; flex-shrink: 0; } .bw-nav-item:hover { background: var(--bw-panel); color: var(--bw-text-primary); } .bw-nav-item.active { background: rgba(245, 156, 156, 0.12); color: var(--bw-nav-active); /* Non-color cue is the weight bump (700 vs 500) + the tinted fill; no single-side inset bar (it clipped against the border-radius). */ font-weight: 700; } .bw-nav-item.active svg { stroke: var(--bw-nav-active); } /* Sidebar footer — when used as a button (popover trigger) it must look like a plain panel, not a