/* ============================================================ WBL Shell v1 — shared chrome for every Water Bear Labs app Canonical home: Website Builds/wbl-shell/ (change here first, then fan out a copy to each app — see BUILD-SPEC.md). Ships: theme tokens, top bar, bottom-left user panel, avatar, app icon, dashboard category tabs + tiles. Everything is namespaced (--wbl-* / .wbl-*) so it never collides with a lab's own internal styles. Requires the fonts the apps already load: Fraunces (display) + Inter (UI) from Google Fonts. ============================================================ */ :root { /* ---- WBM Shell v1 palette (extracted from dashboard/post/copy) ---- */ --wbl-bg: #F4F4FD; --wbl-paper: #ECEBFA; --wbl-panel: #ffffff; --wbl-ink: #1B2C5E; --wbl-muted: #5C6C99; --wbl-line: #DCDDF2; --wbl-volt: #2D5BD1; --wbl-volt-soft: #E3EDFC; --wbl-lav: #7B6FE0; --wbl-lav-soft: #EFECFC; --wbl-lav-mut: #8B84C7; --wbl-pass: #12805c; --wbl-warn: #b7791f; --wbl-fail: #d43d2a; /* ---- gradient treatments (defined once, per spec §7) ---- */ --wbl-grad-flair: linear-gradient(135deg, #2D5BD1, #7B6FE0); --wbl-grad-page: linear-gradient(135deg, #19A7CE, #2D5BD1); --wbl-grad-copy: linear-gradient(135deg, #3D53D8, #7B6FE0); --wbl-grad-builder: linear-gradient(135deg, #1F9D77, #19A7CE); --wbl-grad-post: linear-gradient(135deg, #7BA7F5, #B79CFF); --wbl-grad-ping: linear-gradient(135deg, #12A5C4, #5EE0C2); --wbl-grad-meet: linear-gradient(135deg, #3E8FD8, #19A7CE); --wbl-grad-skills:linear-gradient(135deg, #8F5FD6, #B79CFF); --wbl-grad-knb: linear-gradient(135deg, #4356E0, #8B84C7); --wbl-grad-dash: linear-gradient(135deg, #1B2C5E, #2D5BD1); /* ---- type, radius, shadow, spacing ---- */ --wbl-sans: "Inter", system-ui, sans-serif; --wbl-display: "Fraunces", Georgia, serif; --wbl-radius: 10px; --wbl-radius-lg: 16px; --wbl-shadow-ambient: 0 8px 24px rgba(27, 44, 94, .06); --wbl-topbar-h: 56px; } /* ============================================================ Dark theme (manual toggle, default light — Cody 2026-08-15). Same purple/blue accents & gradients as light; only the SURFACES darken. Applied via data-wbl-theme="dark" on . NOTE: shell tokens only (--wbl-*). Each app also darkens its own local palette in its copy during fan-out — see BUILD-SPEC. PALETTE = Option C "Charcoal Slate" (Cody's pick, 2026-08-15): neutral charcoal surfaces so the purple/blue accents pop hardest. ============================================================ */ :root[data-wbl-theme="dark"] { --wbl-bg: #121319; --wbl-paper: #1A1C24; --wbl-panel: #1F212B; --wbl-ink: #E9EBF2; --wbl-muted: #9AA0B2; --wbl-line: #2A2D38; --wbl-volt: #4F7BEA; --wbl-volt-soft: rgba(79, 123, 234, .16); --wbl-lav: #8E7DF0; --wbl-lav-soft: rgba(142, 125, 240, .16); --wbl-lav-mut: #7A7F96; --wbl-shadow-ambient: 0 10px 30px rgba(0, 0, 0, .55); } :root[data-wbl-theme="dark"] { color-scheme: dark; } /* Gentle cross-fade when the theme flips (shell surfaces only). */ .wbl-topbar, .wbl-user-panel, .wbl-up-icon, .wbl-app-icon, .wbl-tabs, .wbl-tab, .wbl-tile, .wbl-tile-body, .wbl-tiles-empty { transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease; } /* ============================================================ Top bar (§3) — back arrow + app icon + app name ============================================================ */ .wbl-topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 12px; height: var(--wbl-topbar-h); padding: 0 18px; background: var(--wbl-panel); border-bottom: 1px solid var(--wbl-line); } .wbl-topbar::before { /* thin brand accent along the very top */ content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--wbl-grad-flair); } .wbl-topbar-back { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 9px; color: var(--wbl-ink); text-decoration: none; border: 1px solid transparent; transition: background .12s ease, border-color .12s ease; } .wbl-topbar-back:hover { background: var(--wbl-lav-soft); border-color: var(--wbl-line); } .wbl-topbar-back svg { width: 18px; height: 18px; display: block; } .wbl-topbar-name { font-family: var(--wbl-display); font-weight: 600; font-size: 18px; letter-spacing: -0.3px; color: var(--wbl-ink); line-height: 1; } .wbl-topbar-brand { display: flex; flex-direction: column; gap: 3px; } .wbl-topbar-brand .wbl-topbar-name { font-weight: 700; } .wbl-topbar-sub { font-family: var(--wbl-sans); font-size: 9px; font-weight: 600; letter-spacing: 2.4px; text-transform: uppercase; color: var(--wbl-lav-mut); line-height: 1; } .wbl-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; } /* Hamburger — hidden on desktop, shown on mobile by the drawer media query */ .wbl-hamburger { display: none; flex: none; width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--wbl-line); background: var(--wbl-panel); color: var(--wbl-ink); cursor: pointer; place-items: center; font: inherit; padding: 0; margin: 0; box-sizing: border-box; /* immune to a lab's global button padding */ } .wbl-hamburger:hover { transform: none; box-shadow: none; filter: none; } .wbl-hamburger svg { width: 20px; height: 20px; display: block; } .wbl-hamburger:hover { background: var(--wbl-lav-soft); border-color: var(--wbl-lav-mut); } /* In-drawer "Back to Dashboard" link — mobile only (desktop keeps the top-bar arrow) */ .wbl-drawer-back { display: none; } /* ============================================================ Universal mobile navigation (§ Cody 2026-08-15): the lab's menu collapses into a slide-in drawer + scrim; user panel rides along at its foot. Any element tagged .wbl-drawer-host becomes the drawer. Breakpoint 820px — each lab aligns its own layout to match. ============================================================ */ .wbl-scrim { position: fixed; inset: 0; z-index: 999; background: rgba(27, 44, 94, .34); opacity: 0; pointer-events: none; transition: opacity .18s ease; } body.wbl-menu-open .wbl-scrim { opacity: 1; pointer-events: auto; } @media (max-width: 820px) { .wbl-hamburger { display: grid; } .wbl-topbar-back { display: none; } /* replaced by hamburger + in-drawer back link */ .wbl-drawer-host { position: fixed !important; top: 0 !important; left: 0 !important; bottom: 0 !important; height: 100% !important; width: min(86vw, 300px) !important; max-width: 300px; margin: 0 !important; transform: translateX(-100%) !important; transition: transform .28s ease; z-index: 1000 !important; /* must beat each lab's own sidebar z-index */ overflow-y: auto; } body.wbl-menu-open .wbl-drawer-host { transform: translateX(0) !important; box-shadow: 4px 0 28px rgba(27, 44, 94, .20); } .wbl-drawer-back { display: flex; align-items: center; gap: 10px; margin: 2px 10px; padding: 10px; border-radius: 9px; color: var(--wbl-muted); font-family: var(--wbl-sans); font-weight: 500; font-size: 13.5px; text-decoration: none; cursor: pointer; } .wbl-drawer-back svg { width: 17px; height: 17px; flex: none; } .wbl-drawer-back:hover { background: var(--wbl-lav-soft); color: var(--wbl-lav); } } /* ============================================================ App icon (§7) — one component, three placements ============================================================ */ .wbl-app-icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--wbl-panel); border: 1px solid var(--wbl-line); } .wbl-app-icon img { width: 72%; height: 72%; object-fit: contain; display: block; } .wbl-app-icon--grad { border: none; } .wbl-app-icon--grad img { filter: brightness(0) invert(1); } /* white glyph on gradient */ .wbl-app-icon--lg { width: 64px; height: 64px; border-radius: 16px; } .wbl-app-icon--sm { width: 24px; height: 24px; border-radius: 7px; } /* ============================================================ User avatar (§6) — initials on the user's assigned color ============================================================ */ .wbl-avatar { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--wbl-grad-flair); /* fallback; JS sets the user's color */ color: #fff; font-family: var(--wbl-sans); font-weight: 700; font-size: 13px; letter-spacing: .3px; user-select: none; } .wbl-avatar--sm { width: 26px; height: 26px; font-size: 10px; } .wbl-avatar--lg { width: 52px; height: 52px; font-size: 18px; } /* ============================================================ Bottom-left user panel (§4) — identity + Settings + Sign out ============================================================ */ /* Compact, Claude-pattern: one row — [avatar] [name/email] [theme][gear][sign out]. Sign out only renders when the app passes onSignOut/signOutHref (Dashboard only). */ .wbl-user-panel { width: 236px; background: var(--wbl-panel); border: 1px solid var(--wbl-line); border-radius: var(--wbl-radius-lg); box-shadow: var(--wbl-shadow-ambient); padding: 8px 9px; font-family: var(--wbl-sans); display: flex; align-items: center; gap: 9px; } .wbl-user-panel--fixed { position: fixed; left: 16px; bottom: 16px; z-index: 45; } .wbl-user-panel .wbl-up-id { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; } .wbl-user-panel .wbl-up-who { min-width: 0; } .wbl-user-panel .wbl-up-name { font-weight: 600; font-size: 12.5px; color: var(--wbl-ink); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wbl-user-panel .wbl-up-email { font-size: 11px; color: var(--wbl-muted); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; } .wbl-user-panel .wbl-up-actions { display: flex; align-items: center; gap: 4px; flex: none; } .wbl-up-icon { width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center; cursor: pointer; background: var(--wbl-panel); color: var(--wbl-muted); border: 1px solid var(--wbl-line); text-decoration: none; transition: background .12s ease, border-color .12s ease, color .12s ease; padding: 0; margin: 0; box-sizing: border-box; font: inherit; /* immune to labs' global button styles */ } .wbl-up-icon:hover { transform: none; box-shadow: none; filter: none; } .wbl-up-icon svg { width: 15px; height: 15px; flex: none; } .wbl-up-icon:hover { background: var(--wbl-lav-soft); border-color: var(--wbl-lav-mut); color: var(--wbl-ink); } .wbl-up-icon--signout:hover { background: #FBE9E6; border-color: #F2C7C0; color: var(--wbl-fail); } /* Gear menu — anchored popover above the panel (footer spec §2) */ .wbl-user-panel { position: relative; } .wbl-user-panel--fixed { position: fixed; } .wbl-menu { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); background: var(--wbl-panel); border: 1px solid var(--wbl-line); border-radius: 12px; box-shadow: 0 12px 32px rgba(27, 44, 94, .16); padding: 6px; z-index: 70; display: none; flex-direction: column; gap: 2px; font-family: var(--wbl-sans); } .wbl-menu--open { display: flex; } .wbl-menu-item { display: block; width: 100%; text-align: left; box-sizing: border-box; padding: 9px 11px; border-radius: 8px; border: 0; background: none; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--wbl-ink); text-decoration: none; transition: background .12s ease, color .12s ease; } .wbl-menu-item:hover { background: var(--wbl-lav-soft); color: var(--wbl-lav); transform: none; box-shadow: none; filter: none; } .wbl-menu-item--danger { color: var(--wbl-fail); } .wbl-menu-item--danger:hover { background: rgba(212, 61, 42, .10); color: var(--wbl-fail); } .wbl-menu-div { height: 1px; background: var(--wbl-line); margin: 4px 2px; } /* ============================================================ Dashboard category tabs + app tiles (§2) ============================================================ */ .wbl-tabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 4px; border-radius: 12px; background: var(--wbl-paper); width: max-content; max-width: 100%; font-family: var(--wbl-sans); } .wbl-tab { border: 0; background: transparent; cursor: pointer; padding: 8px 16px; border-radius: 9px; font-family: var(--wbl-sans); font-weight: 600; font-size: 13.5px; color: var(--wbl-muted); transition: background .12s ease, color .12s ease, box-shadow .12s ease; } .wbl-tab:hover { color: var(--wbl-ink); } .wbl-tab[aria-selected="true"] { background: var(--wbl-panel); color: var(--wbl-ink); box-shadow: 0 1px 4px rgba(27, 44, 94, .10); } .wbl-tiles { display: grid; gap: 16px; margin-top: 18px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .wbl-tile { background: var(--wbl-panel); border: 1px solid var(--wbl-line); border-radius: var(--wbl-radius-lg); overflow: hidden; cursor: pointer; box-shadow: none; transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; font-family: var(--wbl-sans); } .wbl-tile:hover { transform: translateY(-3px); box-shadow: var(--wbl-shadow-ambient); border-color: transparent; } .wbl-tile .wbl-tile-art { height: 116px; display: grid; place-items: center; background: var(--wbl-grad-flair); /* JS overrides per app */ } .wbl-tile .wbl-tile-art img { width: 56px; height: 56px; object-fit: contain; filter: brightness(0) invert(1); } .wbl-tile .wbl-tile-body { padding: 14px 16px 13px; } .wbl-tile .wbl-tile-name { font-family: var(--wbl-display); font-weight: 600; font-size: 19px; letter-spacing: -0.3px; color: var(--wbl-ink); } .wbl-tile .wbl-tile-desc { font-size: 13px; color: var(--wbl-muted); margin-top: 2px; line-height: 1.45; } .wbl-tile .wbl-tile-foot { display: flex; margin-top: 12px; } .wbl-tile .wbl-tile-open { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--wbl-volt); background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--wbl-sans); } .wbl-tile:hover .wbl-tile-open { text-decoration: underline; } .wbl-tiles-empty { grid-column: 1 / -1; padding: 44px 20px; text-align: center; color: var(--wbl-muted); font-size: 14px; background: var(--wbl-paper); border-radius: var(--wbl-radius-lg); border: 1px dashed var(--wbl-line); }