/* ========================================================================= Turney Insurance Advisors — Onboarding app styles ========================================================================= */ :root { --brand: #1e3a5f; --brand-light: #2f5a8f; --accent: #2563eb; --bg: #f1f5f9; --card: #ffffff; --line: #e2e8f0; --text: #0f172a; --muted: #64748b; --good: #16a34a; --good-bg: #dcfce7; --bad: #dc2626; --bad-bg: #fee2e2; --shadow: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04); /* one motion easing for the whole site (see "MOTION SYSTEM" below) */ --ease: cubic-bezier(.22,.61,.36,1); /* Shared "header band" height: every page reserves this much for its heading area so the gap from the menu bar to the headline is identical site-wide. It's sized to the home page's "Road" widget so that widget can sit inline with the greeting WITHOUT pushing it down — and so the home heading doesn't jump when the widget finishes loading (the space is reserved up front). */ --head-min: 118px; /* --- refined "liquid glass" for cards/tiles/modals -------------------------- A quieter, flatter cousin of the menu bar: frosted translucent white, a hairline light edge, one faint top sheen (not the bar's double-inset 3D), and a soft shadow. The bar stays the centerpiece; everything else matches. */ --glass-bg: rgba(255,255,255,.60); /* cards resting on the light page */ --glass-bg-solid: rgba(255,255,255,.88); /* modals, which sit over a dark scrim */ --glass-border: rgba(255,255,255,.65); --glass-blur: saturate(150%) blur(14px); --glass-shadow: 0 1px 2px rgba(15,23,42,.05), 0 10px 30px -18px rgba(15,23,42,.22), inset 0 1px 0 rgba(255,255,255,.55); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* iOS fills the safe-area zones (notch / home-indicator) with the ROOT background. Because body uses background-attachment:fixed (for the ambient wash), its background doesn't reach those zones — so we paint the base colour on to keep the top/bottom edges seamless (no hard line). */ html { background: var(--bg); } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* A whisper of ambient tint so the frosted cards have something to refract. Two very faint, fixed color washes over the flat base — barely perceptible. */ background: radial-gradient(900px 520px at 8% -10%, rgba(37,99,235,.05), transparent 60%), radial-gradient(820px 520px at 100% 0%, rgba(30,58,95,.045), transparent 55%), var(--bg); background-attachment: fixed; color: var(--text); line-height: 1.5; } a { color: var(--accent); } /* ---- top bar ---- */ /* Floating, rounded "island" menu bar */ .topbar { color: #fff; position: sticky; top: 14px; z-index: 20; margin-top: 14px; padding: 0 16px; background: transparent; transition: top .26s var(--ease); } .topbar-inner { max-width: 1240px; margin: 0 auto; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; /* liquid glass: a soft top sheen over a translucent navy fill */ background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 46%), rgba(30, 58, 95, .66); -webkit-backdrop-filter: blur(26px) saturate(195%); backdrop-filter: blur(26px) saturate(195%); border: 1px solid rgba(255, 255, 255, .12); border-radius: 20px; /* outer lift + a thin specular edge up top and a hint of depth below */ box-shadow: 0 8px 28px -10px rgba(8, 20, 38, .40), inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(8, 20, 38, .16); transition: padding .26s var(--ease), background .26s ease, box-shadow .26s ease, border-radius .26s ease, transform .26s var(--ease); } /* Fallback for browsers without backdrop-filter support */ @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .topbar-inner { background: var(--brand); } /* Without frosting, fall back to solid surfaces so text stays crisp. */ .tile, .mgr-card, .overall, .section, .proc-card, .statement-row { background: #fff; } .modal, .profile-menu, .nav-drawer, .login-card { background: #fff; } } /* condensed state once the page scrolls: tighter, a touch more solid, lifted */ .topbar.scrolled { top: 8px; } .topbar.scrolled .topbar-inner { padding-top: 11px; padding-bottom: 11px; background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 46%), rgba(24, 47, 79, .80); border-radius: 16px; box-shadow: 0 12px 34px -12px rgba(8, 20, 38, .55), inset 0 1px 0 rgba(255, 255, 255, .20), inset 0 -1px 0 rgba(8, 20, 38, .18); } @media (prefers-reduced-motion: reduce) { .topbar, .topbar-inner, .topbar .brand .logo { transition: none; } } .topbar .brand { display:flex; align-items:center; } .topbar .brand .logo { height:48px; width:auto; display:block; transition: height .19s ease; } .topbar.scrolled .brand .logo { height:38px; } /* main page title (entrance handled by the unified MOTION SYSTEM cascade) */ /* page titles match the home greeting (.hub-greeting/.hub-sub) so every screen shares one heading treatment. */ .page-head { margin:0 0 30px; min-height:var(--head-min); display:flex; flex-direction:column; justify-content:center; } .page-title { font-size:32px; font-weight:800; letter-spacing:-.02em; line-height:1.14; margin:0; color:var(--brand); } .page-subtitle { margin:9px 0 0; font-size:15.5px; color:var(--muted); } /* breadcrumb injected under the topbar on every page but Home (js/nav.js). Flat hub, so it's always: Home › . Quiet and Apple-style — the Home crumb is a soft link, the current page is the bold trailing crumb. */ .page-crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin:0 0 20px; font-size:13.5px; line-height:1; } .page-crumb { display:inline-flex; align-items:center; gap:5px; padding:5px 9px; border-radius:8px; font-weight:500; color:var(--muted); text-decoration:none; transition:color .14s var(--ease), background .14s var(--ease); } .page-crumb-home { opacity:.85; } a.page-crumb:hover { color:var(--brand); background:#fff; } a.page-crumb:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } .page-crumb.is-current { color:var(--text); font-weight:600; } .page-crumb-sep { display:inline-flex; align-items:center; color:var(--muted); opacity:.55; } /* =========================================================================== SITE FOOTER — quiet, minimal, Apple-style. Injected by js/nav.js on every signed-in page. In-flow (never sticky), centered, with a hairline divider. =========================================================================== */ .site-footer { margin-top: 64px; padding: 30px 20px 40px; border-top: 1px solid var(--line); } .foot-inner { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; } .foot-meta { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--muted); } .foot-brand { font-weight: 600; color: var(--text); } .foot-dot { color: var(--line); } .foot-help { color: var(--accent); text-decoration: none; font-weight: 500; transition: color .14s var(--ease); } .foot-help:hover { color: var(--brand); } .foot-fine { margin: 0; font-size: 11.5px; color: var(--muted); opacity: .85; letter-spacing: .01em; } @media (max-width: 560px) { .site-footer { margin-top: 44px; padding: 24px 16px 32px; } /* Phone: pull the floating bar up and let it use more width, so it reads as a proper header instead of a small island with wasted space around it. Tighter inner padding nudges the logo left and the profile right. */ .topbar { top: 7px; margin-top: 7px; padding: 0 9px; } .topbar-inner { padding: 13px 14px; border-radius: 16px; } .topbar.scrolled { top: 6px; } .topbar.scrolled .topbar-inner { border-radius: 14px; } .topbar .brand .logo { height: 40px; } .topbar.scrolled .brand .logo { height: 34px; } .topbar .right { gap: 10px; } /* Trim the big top/bottom gaps so content sits closer to the bar and the page fills the screen better. */ .wrap { padding: 24px 18px 56px; } } /* =========================================================================== MOTION SYSTEM — one easing, one entrance, applied site-wide. --------------------------------------------------------------------------- Easing : var(--ease) — used by every transition & animation. Entrance : riseIn = fade + 14px rise, .5s. Cascade : a page's content reveals top-to-bottom, ~80ms between steps. Hero grids / section cards fan their cards in on the same beat. Connective : fades in on load; on an internal navigation shell.js fades the page out and lifts the tapped tile, then loads the next page — so tile -> tool reads as one continuous motion. Opacity-only on keeps the sticky topbar / fixed rail intact. =========================================================================== */ @media (prefers-reduced-motion: no-preference) { body { animation: pageIn .26s var(--ease) backwards; } @keyframes pageIn { from { opacity:0; } } @keyframes riseIn { from { opacity:0; transform:translateY(14px); } } /* page-level cascade: top-level blocks rise in, in document order. list/grid containers are excluded — their cards cascade instead (below). (.home-wrap also carries .wrap, so excluding .tiles here covers home too.) */ .wrap > *:not(#sections):not(#content):not(.tiles) { animation: riseIn .38s var(--ease) backwards; } .wrap > *:nth-child(1) { animation-delay:.03s; } .wrap > *:nth-child(2) { animation-delay:.09s; } .wrap > *:nth-child(3) { animation-delay:.15s; } .wrap > *:nth-child(4) { animation-delay:.21s; } .wrap > *:nth-child(n+5) { animation-delay:.27s; } /* card cascades: hero tiles, onboarding sections, admin panels — same beat */ .tiles > *, #sections > .section:not(.just-opened), #content > *:not(.tiles) { animation: riseIn .38s var(--ease) backwards; } .tiles > *:nth-child(1) { animation-delay:.12s; } .tiles > *:nth-child(2) { animation-delay:.18s; } .tiles > *:nth-child(3) { animation-delay:.24s; } .tiles > *:nth-child(n+4) { animation-delay:.3s; } #content > *:not(.tiles):nth-child(1) { animation-delay:.09s; } #content > *:not(.tiles):nth-child(2) { animation-delay:.15s; } #content > *:not(.tiles):nth-child(3) { animation-delay:.21s; } #content > *:not(.tiles):nth-child(n+4) { animation-delay:.27s; } #sections > .section:nth-child(1) { animation-delay:.21s; } #sections > .section:nth-child(2) { animation-delay:.27s; } #sections > .section:nth-child(3) { animation-delay:.33s; } #sections > .section:nth-child(4) { animation-delay:.39s; } #sections > .section:nth-child(n+5) { animation-delay:.43s; } /* data-driven text (e.g. the onboarding subtitle) settles in with the same entrance whenever it's populated, instead of hard-popping after load */ .sub-reveal { animation: riseIn .34s var(--ease) both; } /* the Agent Arsenal loads async from Google Drive, so it misses the page cascade. Let the populated card rise in on arrival, congruent with tiles. */ .arsenal-section.collapsed { animation: riseIn .38s var(--ease) backwards; } /* standalone Agent Arsenal page: the cards are injected after load, so give them the same staggered rise as the home tiles instead of snapping in. */ .arsenal-grid > * { animation: riseIn .38s var(--ease) backwards; } .arsenal-grid > *:nth-child(1) { animation-delay:.04s; } .arsenal-grid > *:nth-child(2) { animation-delay:.09s; } .arsenal-grid > *:nth-child(3) { animation-delay:.14s; } .arsenal-grid > *:nth-child(4) { animation-delay:.18s; } .arsenal-grid > *:nth-child(5) { animation-delay:.22s; } .arsenal-grid > *:nth-child(6) { animation-delay:.27s; } .arsenal-grid > *:nth-child(7) { animation-delay:.32s; } .arsenal-grid > *:nth-child(8) { animation-delay:.36s; } .arsenal-grid > *:nth-child(n+9) { animation-delay:.41s; } /* Processes page: the table is fetched async from Google Sheets, so its rows would otherwise snap in. Give the freshly-loaded rows the same staggered rise. Gated by .proc-animate (added only on a fresh load, not on search) so filtering as you type doesn't re-animate the whole table. */ .proc-table.proc-animate tbody tr { animation: riseIn .38s var(--ease) backwards; } .proc-table.proc-animate tbody tr:nth-child(1) { animation-delay:.04s; } .proc-table.proc-animate tbody tr:nth-child(2) { animation-delay:.08s; } .proc-table.proc-animate tbody tr:nth-child(3) { animation-delay:.11s; } .proc-table.proc-animate tbody tr:nth-child(4) { animation-delay:.14s; } .proc-table.proc-animate tbody tr:nth-child(5) { animation-delay:.17s; } .proc-table.proc-animate tbody tr:nth-child(6) { animation-delay:.2s; } .proc-table.proc-animate tbody tr:nth-child(7) { animation-delay:.22s; } .proc-table.proc-animate tbody tr:nth-child(8) { animation-delay:.26s; } .proc-table.proc-animate tbody tr:nth-child(9) { animation-delay:.29s; } .proc-table.proc-animate tbody tr:nth-child(10) { animation-delay:.32s; } .proc-table.proc-animate tbody tr:nth-child(n+11) { animation-delay:.35s; } /* Async lists rise in once, gated by a per-container class so filtering / searching (which re-renders the list) doesn't re-fire the cascade. Commissions statement rows — #statements-list.stmt-animate Manager hub user list — .mgr-user-list.mgr-animate Manager hub progress — .admin-table.mgr-animate Manager hub statements — .mgr-stmt-list.mgr-animate Statement rows use :nth-of-type because an empty-state

precedes them. */ #statements-list.stmt-animate > .statement-row, .mgr-user-list.mgr-animate > .mgr-user-row, .admin-table.mgr-animate tbody tr, .mgr-stmt-list.mgr-animate > .mgr-stmt-row { animation: riseIn .38s var(--ease) backwards; } #statements-list.stmt-animate > .statement-row:nth-of-type(1), .mgr-user-list.mgr-animate > .mgr-user-row:nth-child(1), .admin-table.mgr-animate tbody tr:nth-child(1), .mgr-stmt-list.mgr-animate > .mgr-stmt-row:nth-child(1) { animation-delay:.04s; } #statements-list.stmt-animate > .statement-row:nth-of-type(2), .mgr-user-list.mgr-animate > .mgr-user-row:nth-child(2), .admin-table.mgr-animate tbody tr:nth-child(2), .mgr-stmt-list.mgr-animate > .mgr-stmt-row:nth-child(2) { animation-delay:.08s; } #statements-list.stmt-animate > .statement-row:nth-of-type(3), .mgr-user-list.mgr-animate > .mgr-user-row:nth-child(3), .admin-table.mgr-animate tbody tr:nth-child(3), .mgr-stmt-list.mgr-animate > .mgr-stmt-row:nth-child(3) { animation-delay:.11s; } #statements-list.stmt-animate > .statement-row:nth-of-type(4), .mgr-user-list.mgr-animate > .mgr-user-row:nth-child(4), .admin-table.mgr-animate tbody tr:nth-child(4), .mgr-stmt-list.mgr-animate > .mgr-stmt-row:nth-child(4) { animation-delay:.14s; } #statements-list.stmt-animate > .statement-row:nth-of-type(5), .mgr-user-list.mgr-animate > .mgr-user-row:nth-child(5), .admin-table.mgr-animate tbody tr:nth-child(5), .mgr-stmt-list.mgr-animate > .mgr-stmt-row:nth-child(5) { animation-delay:.17s; } #statements-list.stmt-animate > .statement-row:nth-of-type(6), .mgr-user-list.mgr-animate > .mgr-user-row:nth-child(6), .admin-table.mgr-animate tbody tr:nth-child(6), .mgr-stmt-list.mgr-animate > .mgr-stmt-row:nth-child(6) { animation-delay:.2s; } #statements-list.stmt-animate > .statement-row:nth-of-type(7), .mgr-user-list.mgr-animate > .mgr-user-row:nth-child(7), .admin-table.mgr-animate tbody tr:nth-child(7), .mgr-stmt-list.mgr-animate > .mgr-stmt-row:nth-child(7) { animation-delay:.22s; } #statements-list.stmt-animate > .statement-row:nth-of-type(8), .mgr-user-list.mgr-animate > .mgr-user-row:nth-child(8), .admin-table.mgr-animate tbody tr:nth-child(8), .mgr-stmt-list.mgr-animate > .mgr-stmt-row:nth-child(8) { animation-delay:.26s; } #statements-list.stmt-animate > .statement-row:nth-of-type(9), .mgr-user-list.mgr-animate > .mgr-user-row:nth-child(9), .admin-table.mgr-animate tbody tr:nth-child(9), .mgr-stmt-list.mgr-animate > .mgr-stmt-row:nth-child(9) { animation-delay:.29s; } #statements-list.stmt-animate > .statement-row:nth-of-type(10), .mgr-user-list.mgr-animate > .mgr-user-row:nth-child(10), .admin-table.mgr-animate tbody tr:nth-child(10), .mgr-stmt-list.mgr-animate > .mgr-stmt-row:nth-child(10) { animation-delay:.32s; } #statements-list.stmt-animate > .statement-row:nth-of-type(n+11), .mgr-user-list.mgr-animate > .mgr-user-row:nth-child(n+11), .admin-table.mgr-animate tbody tr:nth-child(n+11), .mgr-stmt-list.mgr-animate > .mgr-stmt-row:nth-child(n+11) { animation-delay:.35s; } /* Commission-statements tool: the "Post a statement" card is revealed the instant an agent is picked. Give it the site's standard rise instead of an abrupt display toggle. (Re-triggered in admin.js on each selection.) */ .mgr-cards.mgr-reveal { animation: riseIn .38s var(--ease) backwards; } /* connective tissue: page exit + tapped-tile lift (driven by shell.js) */ body.is-leaving { opacity:0; transition: opacity .14s ease; } .tile.is-activating { transform: translateY(-4px) scale(1.015); box-shadow: 0 20px 40px -14px rgba(15,23,42,.34); transition: transform .14s ease, box-shadow .14s ease; } } .topbar .right { display:flex; align-items:center; gap:14px; font-size:13px; } .topbar a, .topbar button.linkbtn { color:#cfe0f5; background:none; border:none; cursor:pointer; font-size:13px; } .topbar a:hover, .topbar button.linkbtn:hover { color:#fff; } /* back-to-home — a clean capsule that mirrors the profile pill on the right, with a chevron that eases left on hover (Apple-style back affordance) */ .topbar-back { display:inline-flex; align-items:center; gap:5px; line-height:1; padding:6px 13px 6px 9px; border-radius:999px; font-weight:500; color:#dbe8f8; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); transition: background .14s var(--ease), border-color .14s var(--ease), color .14s var(--ease), transform .09s ease; } .topbar-back svg { transition: transform .17s var(--ease); } .topbar-back:hover { color:#fff; background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.34); } .topbar-back:hover svg { transform: translateX(-3px); } .topbar-back:active { transform: scale(.97); } .topbar-back:focus-visible { outline:2px solid #fff; outline-offset:2px; } /* =========================================================================== Hamburger navigation drawer (js/nav.js) — Apple-like slide-in with search =========================================================================== */ /* The hamburger sits at the left of the topbar's right-hand control cluster. */ .nav-toggle { position: relative; flex: 0 0 auto; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); cursor: pointer; -webkit-appearance: none; appearance: none; transition: background .14s var(--ease), border-color .14s var(--ease), transform .09s ease; } .nav-toggle:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.32); } .nav-toggle:active { transform: scale(.94); } .nav-toggle:focus-visible { outline:2px solid #fff; outline-offset:2px; } .nav-toggle-bars { position: relative; width: 18px; height: 13px; } .nav-toggle-bars span { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: #dbe8f8; transition: transform .22s var(--ease), opacity .15s var(--ease), background .14s var(--ease); } .nav-toggle-bars span:nth-child(1) { top: 0; } .nav-toggle-bars span:nth-child(2) { top: 50%; transform: translateY(-50%); } .nav-toggle-bars span:nth-child(3) { bottom: 0; } .nav-toggle:hover .nav-toggle-bars span { background: #fff; } /* morph to an X when open */ .nav-toggle.open .nav-toggle-bars span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); } .nav-toggle.open .nav-toggle-bars span:nth-child(2) { opacity: 0; } .nav-toggle.open .nav-toggle-bars span:nth-child(3) { bottom: 50%; transform: translateY(50%) rotate(-45deg); } /* Dimmed, blurred backdrop behind the drawer. */ .nav-scrim { position: fixed; inset: 0; z-index: 80; background: rgba(15,23,42,.34); opacity: 0; visibility: hidden; -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px); transition: opacity .24s var(--ease), visibility .24s var(--ease), backdrop-filter .24s var(--ease), -webkit-backdrop-filter .24s var(--ease); } .nav-scrim.open { opacity: 1; visibility: visible; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } /* The drawer itself — slides in from the right. */ .nav-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 81; width: 332px; max-width: 86vw; background: var(--glass-bg-solid); -webkit-backdrop-filter: saturate(160%) blur(20px); backdrop-filter: saturate(160%) blur(20px); border-left: 1px solid var(--glass-border); box-shadow: -24px 0 60px -24px rgba(15,23,42,.5), inset 1px 0 0 rgba(255,255,255,.5); padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; transform: translateX(102%); transition: transform .3s var(--ease); overflow: hidden; } .nav-drawer.open { transform: translateX(0); } /* Search field at the top of the drawer. */ .nav-search-wrap { position: relative; flex: 0 0 auto; } .nav-search-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; } .nav-search { width: 100%; box-sizing: border-box; padding: 12px 14px 12px 40px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); font-size: 14.5px; font-family: inherit; -webkit-appearance: none; appearance: none; transition: border-color .14s var(--ease), background .14s var(--ease), box-shadow .14s var(--ease); } .nav-search::placeholder { color: var(--muted); } .nav-search:focus { outline: none; background: var(--card); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,.14); } .nav-search::-webkit-search-cancel-button { -webkit-appearance: none; } /* The list of destinations. */ .nav-list { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; margin: 0 -6px; padding: 2px 6px; } .nav-item { display: flex; align-items: center; gap: 13px; padding: 11px 12px; border-radius: 13px; color: var(--text); text-decoration: none; border: 1px solid transparent; transition: background .12s var(--ease), border-color .12s var(--ease), transform .09s ease; } /* subtle, congruent hover: the row gets a soft brand wash + faint border, and the icon deepens its tint and lifts a touch — same language as the tiles, minus any movement of the row itself. */ .nav-item:hover { background: rgba(30,58,95,.05); border-color: rgba(30,58,95,.10); } .nav-item:hover .nav-item-icon { background: rgba(30,58,95,.13); transform: scale(1.08); } .nav-item:active { transform: scale(.985); } .nav-item.is-current { background: rgba(37,99,235,.08); border-color: rgba(37,99,235,.16); } .nav-item-icon { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg); color: var(--brand); transition: background .12s var(--ease), transform .12s var(--ease); } .nav-item.is-current .nav-item-icon { background: rgba(37,99,235,.13); color: var(--accent); } .nav-item.is-current:hover .nav-item-icon { background: rgba(37,99,235,.20); } .nav-item-icon svg { width: 19px; height: 19px; } .nav-item-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .nav-item-label { font-size: 14.5px; font-weight: 600; line-height: 1.25; } .nav-item-desc { font-size: 12px; color: var(--muted); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-item-dot { flex: 0 0 auto; margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } /* Onboarding completed: green check chip next to the label, muted desc. */ .nav-item-done { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 6px; border-radius: 50%; background: var(--good-bg); color: var(--good); vertical-align: -3px; } .nav-item-done svg { width: 10px; height: 10px; stroke-width: 3; } .nav-item.is-done .nav-item-desc { color: var(--good); } .nav-empty { margin: 6px 4px 0; font-size: 13px; color: var(--muted); text-align: center; } /* Lock background scroll while the drawer is open. */ body.nav-open { overflow: hidden; } /* Subtle staggered entrance for the nav items when the drawer opens. */ @media (prefers-reduced-motion: no-preference) { .nav-drawer.open .nav-search-wrap { animation: riseIn .32s var(--ease) backwards; } .nav-drawer.open .nav-item { animation: riseIn .35s var(--ease) backwards; } .nav-drawer.open .nav-item:nth-child(1) { animation-delay: .04s; } .nav-drawer.open .nav-item:nth-child(2) { animation-delay: .08s; } .nav-drawer.open .nav-item:nth-child(3) { animation-delay: .11s; } .nav-drawer.open .nav-item:nth-child(4) { animation-delay: .15s; } .nav-drawer.open .nav-item:nth-child(5) { animation-delay: .19s; } .nav-drawer.open .nav-item:nth-child(6) { animation-delay: .22s; } .nav-drawer.open .nav-item:nth-child(7) { animation-delay: .26s; } .nav-drawer.open .nav-item:nth-child(8) { animation-delay: .3s; } .nav-drawer.open .nav-item:nth-child(9) { animation-delay: .34s; } } /* ---- profile dropdown ---- */ .profile { position: relative; } .profile-btn { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); padding: 4px 8px 4px 4px; cursor: pointer; display: flex; align-items: center; gap: 6px; border-radius: 999px; transition: background .11s ease, border-color .11s ease, transform .09s ease; } .profile-btn:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.32); } .profile-btn:active { transform: scale(.97); } .profile-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .avatar { width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--brand); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; letter-spacing: .3px; text-transform: uppercase; user-select: none; flex: none; } .profile-caret { color: rgba(255,255,255,.75); flex: none; transition: transform .15s ease, color .11s ease; } .profile-btn:hover .profile-caret { color: #fff; } .profile-btn[aria-expanded="true"] .profile-caret { transform: rotate(180deg); } .avatar.avatar-lg { width: 44px; height: 44px; font-size: 16px; border: none; } .profile-menu { position: absolute; top: calc(100% + 12px); right: 0; min-width: 248px; background: var(--glass-bg-solid); color: var(--text); -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px); border: 1px solid var(--glass-border); border-radius: 14px; box-shadow: 0 12px 32px rgba(15,23,42,.18), inset 0 1px 0 rgba(255,255,255,.5); padding: 8px; z-index: 40; opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: top right; transition: opacity .12s ease, transform .12s ease, visibility .12s ease; } .profile-menu.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .profile-head { display: flex; align-items: center; gap: 12px; padding: 10px 10px 12px; } .profile-head .avatar-lg { background: var(--brand); color: #fff; flex: none; } .profile-id { min-width: 0; } .profile-name { font-weight: 700; font-size: 14px; color: var(--text); line-height: 1.2; } .profile-email { font-size: 12px; color: var(--muted); margin-top: 2px; word-break: break-all; } .profile-divider { height: 1px; background: var(--line); margin: 4px 6px; } .profile-item { display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 10px 12px; border-radius: 8px; font-size: 14px; color: var(--text); text-decoration: none; font-family: inherit; line-height: 1.2; } .profile-item:hover { background: #f1f5f9; } .profile-item.danger { color: var(--bad); } .profile-item.danger:hover { background: #fef2f2; } /* Link items (Manager view, Get help) sit inside .topbar, so its pale-blue link colour bleeds in. Reclaim them as a readable muted slate — quieter than the near-black action items, but no longer washed out. Darken on hover. */ .profile-menu a.profile-item { color: var(--muted); } .profile-menu a.profile-item:hover { color: var(--text); } /* ---- layout ---- */ /* The content column matches the floating menu bar (.topbar-inner, 1240px) so pages no longer look inset/narrow under the bar. Text-heavy / form pages add .wrap-narrow to keep a comfortable reading measure (line length + lone form fields don't stretch on big monitors). */ .wrap { max-width: 1240px; margin: 0 auto; padding: 44px 22px 80px; position: relative; } /* Reading/form pages keep the familiar 880px measure (also what the onboarding progress rail's fixed offset is tuned to). */ .wrap.wrap-narrow { max-width: 880px; } /* ---- left-gutter section progress rail ---- */ .rail { display: none; } @media (min-width: 1260px) { .rail { display: block; position: fixed; top: 132px; left: calc(50% - 632px); width: 172px; z-index: 5; } .rail-list { list-style: none; margin: 0; padding: 0; position: relative; } /* vertical connector line behind the dots */ .rail-list::before { content: ""; position: absolute; left: 8px; top: 10px; bottom: 10px; width: 2px; background: var(--line); border-radius: 2px; } .rail-item { position: relative; display: flex; align-items: center; gap: 11px; padding: 9px 0; cursor: pointer; color: var(--muted); } .rail-dot { position: relative; z-index: 1; flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; transition: background .19s ease, border-color .19s ease, transform .15s ease; } .rail-dot svg { width: 11px; height: 11px; color: #fff; opacity: 0; transform: scale(.6); transition: opacity .15s ease, transform .15s ease; } .rail-label { font-size: 13px; font-weight: 500; line-height: 1.3; transition: color .19s ease; } .rail-item:hover .rail-label { color: var(--text); } /* completed (submitted & locked) */ .rail-item.done .rail-dot { background: var(--brand); border-color: var(--brand); } .rail-item.done .rail-dot svg { opacity: 1; transform: scale(1); } .rail-item.done .rail-label { color: var(--text); } /* currently-viewed section */ .rail-item.active .rail-dot { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(30,58,95,.12); } .rail-item.active .rail-label { color: var(--brand); font-weight: 600; } .rail-item.active.done .rail-dot { box-shadow: 0 0 0 4px rgba(30,58,95,.12); } /* gated / not yet available */ .rail-item.gated { cursor: default; opacity: .5; } .rail-item.gated:hover .rail-label { color: var(--muted); } } @media (prefers-reduced-motion: reduce) { .rail-dot, .rail-dot svg, .rail-label { transition: none; } } /* ---- overall progress ---- */ .overall { background: var(--glass-bg); border:1px solid var(--glass-border); border-radius:14px; -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); padding:18px 22px; box-shadow:var(--glass-shadow); margin-bottom:22px; } .overall-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; } .overall h2 { margin:0; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } .overall .pct { font-size:15px; font-weight:600; color:var(--brand); font-variant-numeric:tabular-nums; } .bar { height:6px; background:#eef2f7; border-radius:999px; overflow:hidden; margin-top:12px; } .bar > span { display:block; height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,var(--accent),var(--brand-light)); transition:width .38s var(--ease); } .overall-count { font-size:12px; color:var(--muted); margin-top:10px; } /* ---- section card ---- */ .section { background: var(--glass-bg); border:1px solid var(--glass-border); border-radius:14px; -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); margin-bottom:18px; box-shadow:var(--glass-shadow); overflow:hidden; } .section > header { padding:16px 20px; cursor:pointer; display:flex; align-items:flex-start; gap:12px; background: linear-gradient(0deg, #fbfdff, #fff); } .section > header:hover { background:#f7fafe; } .section h3 { margin:0; font-size:16px; color:var(--brand); } .section .sub { margin:4px 0 0; font-size:13px; color:var(--muted); } .section .seccount { margin-left:auto; font-size:12px; font-weight:700; color:var(--brand-light); background:#eef4fb; padding:3px 10px; border-radius:999px; white-space:nowrap; } .section .chev { color:var(--muted); transition:transform .15s; margin-top:2px; } .section.collapsed .chev { transform:rotate(-90deg); } .section .body { padding:6px 20px 14px; overflow:hidden; max-height:4000px; transition:max-height .3s var(--ease), opacity .22s ease, padding .3s ease; } .section.collapsed .body { max-height:0; opacity:0; padding-top:0; padding-bottom:0; } @media (prefers-reduced-motion: reduce) { .section .body { transition:none; } } /* completed section — "frosted over" / finished look */ .section.done { background:#f8fafc; box-shadow:none; opacity:.7; transition:opacity .22s ease; } .section.done > header { background:linear-gradient(0deg, #f8fafc, #fbfdff); } .section.done > header:hover { background:#f2f6fb; } .section.done:hover { opacity:.82; } /* lift slightly, but stay frosted */ .section.done .seccount { color:var(--good); background:var(--good-bg); } /* active section — the one to work on now: accent stripe + gentle lift */ .section:not(.done):not(.gated) { box-shadow: inset 4px 0 0 var(--brand-light), 0 6px 18px rgba(30,58,95,.10); border-color: #d3deec; } .section:not(.done):not(.gated) > header { background:linear-gradient(0deg, #f4f8ff, #fff); } .section:not(.done):not(.gated) > header:hover { background:#eef4fc; } .section:not(.done):not(.gated) .seccount { color:#fff; background:var(--brand-light); } /* entrance animation when a section unlocks */ @keyframes sectionReveal { 0% { opacity:0; transform:translateY(14px); box-shadow:0 0 0 0 rgba(37,99,235,.0); } 60% { box-shadow:0 0 0 4px rgba(37,99,235,.18); } 100% { opacity:1; transform:translateY(0); box-shadow:var(--shadow); } } .section.just-opened { animation: sectionReveal .52s var(--ease) both; } /* ---- gated (locked-until-prior-submitted) section — quietly "waiting" ---- */ .section.gated { box-shadow:none; border-style:dashed; border-color:#dde5ef; opacity:.78; } .section.gated > header h3 { color:var(--muted); } .section.gated > header { background:#fafbfd; } .section.gated > header:hover { background:#f4f6fa; } .section.gated .seccount { color:var(--muted); background:#eef1f5; } .gated-note { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:14px; padding:14px 4px; } .gated-note .gated-lock { width:18px; height:18px; flex:none; } /* gated sections show a read-only preview of their schedule */ .section.gated .item, .section.gated .group-head { opacity:.6; } /* ---- items ---- */ .item { border-top:1px solid var(--line); padding:14px 0; } .item:first-child { border-top:none; } .item .row { display:flex; gap:12px; align-items:flex-start; } .item input[type=checkbox] { width:20px; height:20px; margin-top:1px; flex:none; cursor:pointer; accent-color:var(--accent); } .item .label { font-weight:600; } .item .detail { font-size:13px; color:var(--muted); margin-top:2px; } /* clean animated strikethrough when an item is checked off */ .item .label-text { text-decoration:line-through; text-decoration-color:transparent; text-decoration-thickness:1.5px; transition:text-decoration-color .22s ease, color .19s ease; } .item .row.done .label-text { color:var(--muted); text-decoration-color:currentColor; } .item .row.done .detail { color:var(--muted); opacity:.7; } @media (prefers-reduced-motion: reduce) { .item .label-text { transition:none; } } .item .tag { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; padding:2px 7px; border-radius:6px; margin-left:8px; vertical-align:middle; } /* optional scheduled-time chip, rendered ahead of the label */ .item .time { font-size:11px; font-weight:700; letter-spacing:.3px; white-space:nowrap; font-variant-numeric:tabular-nums; padding:2px 7px; border-radius:6px; margin-right:8px; vertical-align:middle; background:#eef4fb; color:var(--brand-light); } .item .row.done .time { opacity:.55; } .tag.video { background:#eef4fb; color:var(--brand-light); } .tag.audio { background:#f3eefb; color:#6d28d9; } .tag.reading { background:#fef9c3; color:#854d0e; } .tag.quiz { background:#dcfce7; color:#15803d; } .tag.locked { background:#e2e8f0; color:#475569; } .lock-badge { display:inline-flex; align-items:center; justify-content:center; margin-left:9px; vertical-align:middle; color:var(--muted); } .lock-badge svg { width:15px; height:15px; } /* ---- in-section groups (Morning / Afternoon / Training to Complete) ---- */ .group-head { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.7px; color:var(--brand-light); margin:16px 0 0; padding-top:14px; border-top:1px solid var(--line); } .group-head:first-child { border-top:none; padding-top:4px; margin-top:2px; } /* the first item under a group header shouldn't draw its own divider on top */ .group-head + .item { border-top:none; } .submit-foot { border-top:2px solid var(--line); margin-top:6px; padding-top:16px; text-align:right; } .submit-foot .btn { font-size:14px; } .submit-hint { font-size:12px; color:var(--muted); margin-top:6px; } .locked-banner { background:var(--good-bg); color:#166534; border:1px solid #86efac; border-radius:10px; padding:12px 14px; font-size:13px; font-weight:600; text-align:left; } .section .item input[type=checkbox]:disabled { cursor:not-allowed; } .media { margin:12px 0 2px 32px; } .media iframe { width:100%; max-width:640px; border:0; border-radius:10px; background:#000; } .media iframe.video { aspect-ratio:16/9; } .linklike { display:inline-block; margin-left:32px; font-size:14px; } .pending-note { margin-left:32px; font-size:12px; color:#b45309; background:#fef3c7; display:inline-block; padding:2px 8px; border-radius:6px; } /* ---- agent arsenal (distinct resource panel, not a module) ---- */ .arsenal-section { border:1px solid #cdddf2; background:linear-gradient(180deg, #eef5ff, #f7fbff); box-shadow:0 1px 3px rgba(30,58,95,.10); position:relative; } .arsenal-section::before { content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:linear-gradient(180deg, var(--accent), var(--brand)); border-radius:14px 0 0 14px; } .arsenal-section > header { background:transparent; align-items:center; padding-left:24px; cursor:pointer; } .arsenal-section > header:hover { background:rgba(30,58,95,.04); } .arsenal-chev { color:var(--brand-light); margin-left:4px; } .arsenal-section.collapsed .arsenal-chev { transform:rotate(-90deg); } .arsenal-section .body { padding-left:24px; } .arsenal-badge { flex:none; width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--brand); color:#fff; } .arsenal-badge svg { width:20px; height:20px; } .arsenal-tag { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.6px; color:var(--accent); background:#dbe9fc; padding:2px 7px; border-radius:6px; margin-left:8px; vertical-align:middle; } .arsenal-count { background:#dbe9fc; color:var(--brand); } .arsenal-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px; padding:6px 0 8px; } .arsenal-card { display:flex; align-items:center; gap:12px; padding:13px 14px; border:1px solid #d4e2f3; border-radius:12px; background:#fff; text-decoration:none; color:inherit; cursor:pointer; transition:border-color .11s ease, box-shadow .11s ease, transform .09s ease; } .arsenal-card:hover { border-color:var(--accent); box-shadow:0 6px 18px -8px rgba(37,99,235,.4); transform:translateY(-1px); } .arsenal-card:active { transform:translateY(0); } .arsenal-icon { flex:none; width:34px; height:34px; border-radius:8px; background:#eef4fb; color:var(--brand-light); display:flex; align-items:center; justify-content:center; } .arsenal-icon svg { width:20px; height:20px; } .arsenal-info { flex:1; min-width:0; } .arsenal-name { font-weight:600; font-size:14px; word-break:break-word; } .arsenal-card:hover .arsenal-name { color:var(--accent); } .arsenal-meta { font-size:12px; color:var(--muted); margin-top:2px; } .arsenal-go { flex:none; width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:#9fb4d0; background:transparent; transition:color .11s ease, background .11s ease, transform .11s ease; } .arsenal-card:hover .arsenal-go { color:var(--accent); background:#eef4fb; transform:translate(2px,-2px); } /* folder & file cards are