@font-face { font-display: swap; font-family: "Inter"; font-style: normal; font-weight: 400; src: url( "../fonts/inter/inter-latin-400-normal.woff2" ) format( "woff2" ); } @font-face { font-display: swap; font-family: "Inter"; font-style: normal; font-weight: 500; src: url( "../fonts/inter/inter-latin-500-normal.woff2" ) format( "woff2" ); } @font-face { font-display: swap; font-family: "Inter"; font-style: normal; font-weight: 600; src: url( "../fonts/inter/inter-latin-600-normal.woff2" ) format( "woff2" ); } @font-face { font-display: swap; font-family: "Inter"; font-style: normal; font-weight: 700; src: url( "../fonts/inter/inter-latin-700-normal.woff2" ) format( "woff2" ); } @font-face { font-display: swap; font-family: "Inter"; font-style: normal; font-weight: 800; src: url( "../fonts/inter/inter-latin-800-normal.woff2" ) format( "woff2" ); } :root { --rtb-black: #111111; --rtb-black-soft: #1b1b1b; --rtb-blue: #2d9cdb; --rtb-blue-soft: rgba( 45, 156, 219, 0.09 ); --rtb-border: rgba( 16, 24, 40, 0.1 ); --rtb-border-strong: #d9d9d2; --rtb-flash: #00b894; --rtb-flash-soft: rgba( 0, 184, 148, 0.12 ); --rtb-gymnastics: #9b6dff; --rtb-gymnastics-soft: rgba( 155, 109, 255, 0.12 ); --rtb-offwhite: #f7f7f5; --rtb-oly: #f4b400; --rtb-oly-soft: rgba( 244, 180, 0, 0.14 ); --rtb-red: #c8202f; --rtb-red-dark: #9f1825; --rtb-red-soft: rgba( 200, 32, 47, 0.07 ); /* Text-only usages (scores, links, active states) point at this instead of --rtb-red directly, so dark mode can soften just the on-surface text without touching solid button/badge fills, which need to stay vivid for contrast against white labels. Equal to --rtb-red in light mode. */ --rtb-red-text: var( --rtb-red ); --rtb-go: #16a34a; --rtb-go-dark: #12813c; --rtb-go-soft: rgba( 22, 163, 74, 0.12 ); --rtb-strength: #ff7a59; --rtb-strength-soft: rgba( 255, 122, 89, 0.12 ); --rtb-white: #ffffff; --rtb-navy: #111827; --rtb-bg: #f3f5f7; --rtb-surface: #ffffff; --rtb-surface-soft: #f8fafc; --rtb-surface-muted: #edf2f7; --rtb-ink: #101828; --rtb-text: #344054; --rtb-muted: #667085; --rtb-shadow: 0 12px 28px rgba( 17, 24, 39, 0.06 ); --rtb-shadow-hover: 0 22px 58px rgba( 16, 24, 40, 0.12 ); --rtb-radius: 18px; --rtb-radius-sm: 10px; --rtb-radius-md: 14px; --rtb-radius-lg: 22px; --rtb-max-width: 1440px; --rtb-pad: clamp( 16px, 2vw, 32px ); --rtb-focus: rgba( 45, 156, 219, 0.14 ); --rtb-focus-border: rgba( 45, 156, 219, 0.58 ); --rtb-topbar-bg: #343947; } * { box-sizing: border-box; } html, body { min-height: 100%; } /* itself is otherwise transparent, painting nothing - so anywhere the WebView's own canvas peeks past (rubber-band bounce at the very top/bottom on iOS, or under the notch/home- indicator safe areas with viewport-fit=cover) shows the WebView's native default, plain white, regardless of theme. Giving the same background var body uses means that gap now shows the correct themed color instead - and since --rtb-bg is redefined on this same element by html[data-theme="dark"] below, this one rule already covers both themes without a separate dark override. */ html { background: var( --rtb-bg, #f3f5f7 ); } body { background: radial-gradient( circle at top left, rgba( 45, 156, 219, 0.08 ), transparent 32rem ), #f3f5f7; color: var( --rtb-ink ); display: flex; flex-direction: column; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 15px; line-height: 1.55; margin: 0; min-height: 100svh; } a { color: inherit; } .d-none { display: none !important; } /* ============================================================ Whiteboard Shell / Header / Nav / Notifications (collapsed from ~9 successive "polish pass" rewrites - this is the final resolved look: slate header, pill nav with per-route accent colors, dark mobile dropdown) ============================================================ */ .whiteboard-impersonation-banner { background: linear-gradient( 135deg, #f59e0b, #ea580c ); color: #ffffff; padding: 10px var( --rtb-pad ); padding-top: calc( 10px + env( safe-area-inset-top ) ); } .whiteboard-impersonation-banner-inner { align-items: center; display: flex; flex-wrap: wrap; gap: 10px 16px; justify-content: space-between; margin: 0 auto; max-width: var( --rtb-max-width ); } .whiteboard-impersonation-banner-inner span { font-size: 0.88rem; font-weight: 700; } .whiteboard-impersonation-banner-inner span i { margin-right: 6px; } .whiteboard-impersonation-banner-button { background: rgba( 255, 255, 255, 0.18 ); border: 1px solid rgba( 255, 255, 255, 0.5 ); border-radius: var( --rtb-radius-sm ); color: #ffffff; cursor: pointer; font-size: 0.82rem; font-weight: 700; padding: 6px 12px; white-space: nowrap; } .whiteboard-impersonation-banner-button:hover, .whiteboard-impersonation-banner-button:focus-visible { background: rgba( 255, 255, 255, 0.3 ); outline: none; } .whiteboard-topbar { background: var( --rtb-topbar-bg ); border-bottom: 1px solid rgba( 255, 255, 255, 0.08 ); box-shadow: 0 12px 30px rgba( 15, 23, 42, 0.16 ); color: #ffffff; padding-top: env( safe-area-inset-top ); position: sticky; top: 0; z-index: 100; } .whiteboard-topbar-inner { align-items: center; display: flex; gap: 18px; justify-content: space-between; margin: 0 auto; max-width: var( --rtb-max-width ); min-height: 72px; padding: 0 var( --rtb-pad ); position: relative; } .whiteboard-topbar-actions { align-items: center; display: flex; gap: 10px; margin-left: auto; } .whiteboard-brand, .whiteboard-brand:hover, .whiteboard-brand:focus { align-items: center; background: transparent; border: 0; color: #ffffff; display: inline-flex; font-size: 0.96rem; font-weight: 900; gap: 10px; letter-spacing: -0.02em; padding: 0; text-decoration: none; } .whiteboard-brand::before { display: none; } .whiteboard-brand-logo { background: transparent; border-radius: 0; display: block; filter: brightness( 0 ) invert( 1 ); height: 38px; max-width: 150px; object-fit: contain; width: auto; } .whiteboard-nav { align-items: center; background: transparent; border: 0; display: flex; gap: 6px; padding: 0; } .whiteboard-nav-link { align-items: center; background: transparent; border: 1px solid transparent; border-radius: 999px; color: rgba( 255, 255, 255, 0.82 ); display: inline-flex; font-size: 0.82rem; font-weight: 800; gap: 7px; letter-spacing: -0.01em; padding: 0.48rem 0.76rem; text-decoration: none; transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease; } .whiteboard-nav-link:hover, .whiteboard-nav-link:focus { background: rgba( 255, 255, 255, 0.1 ); border-color: rgba( 255, 255, 255, 0.08 ); color: #ffffff; outline: none; } .whiteboard-nav-icon { align-items: center; background: transparent; border-radius: 999px; color: currentColor; display: inline-flex; font-size: 0.9rem; justify-content: center; line-height: 1; transition: color 180ms ease; } .whiteboard-nav-link-active, .whiteboard-nav-link-active:hover, .whiteboard-nav-link-active:focus { background: rgba( 255, 255, 255, 0.12 ); border-color: rgba( 255, 255, 255, 0.12 ); color: #ffffff; } .whiteboard-nav-link-logout { color: #fecaca; } /* Per-route accent colours for the active pill + its icon */ .whiteboard-nav-link[href="/today"]:hover .whiteboard-nav-icon, .whiteboard-nav-link[href="/today"]:focus .whiteboard-nav-icon, .whiteboard-nav-link[href="/today"].whiteboard-nav-link-active .whiteboard-nav-icon { color: #d97706; } .whiteboard-nav-link[href="/today"].whiteboard-nav-link-active { background: rgba( 245, 158, 11, 0.14 ); border-color: rgba( 217, 119, 6, 0.22 ); } .whiteboard-nav-link[href="/calendar"]:hover .whiteboard-nav-icon, .whiteboard-nav-link[href="/calendar"]:focus .whiteboard-nav-icon, .whiteboard-nav-link[href="/calendar"].whiteboard-nav-link-active .whiteboard-nav-icon { color: #60a5fa; } .whiteboard-nav-link[href="/calendar"].whiteboard-nav-link-active { background: rgba( 96, 165, 250, 0.16 ); border-color: rgba( 96, 165, 250, 0.22 ); } .whiteboard-nav-link[href="/profile"]:hover .whiteboard-nav-icon, .whiteboard-nav-link[href="/profile"]:focus .whiteboard-nav-icon, .whiteboard-nav-link[href="/profile"].whiteboard-nav-link-active .whiteboard-nav-icon { color: #4ade80; } .whiteboard-nav-link[href="/profile"].whiteboard-nav-link-active { background: rgba( 74, 222, 128, 0.16 ); border-color: rgba( 74, 222, 128, 0.22 ); } .whiteboard-nav-link[href="/admin"]:hover .whiteboard-nav-icon, .whiteboard-nav-link[href="/admin"]:focus .whiteboard-nav-icon, .whiteboard-nav-link[href="/admin"].whiteboard-nav-link-active .whiteboard-nav-icon { color: #a78bfa; } .whiteboard-nav-link[href="/admin"].whiteboard-nav-link-active { background: rgba( 139, 92, 246, 0.18 ); border-color: rgba( 139, 92, 246, 0.3 ); } .whiteboard-nav-link[href="/records"]:hover .whiteboard-nav-icon, .whiteboard-nav-link[href="/records"]:focus .whiteboard-nav-icon, .whiteboard-nav-link[href="/records"].whiteboard-nav-link-active .whiteboard-nav-icon { color: #fbbf24; } .whiteboard-nav-link[href="/records"].whiteboard-nav-link-active { background: rgba( 245, 158, 11, 0.18 ); border-color: rgba( 245, 158, 11, 0.34 ); } .whiteboard-nav-link[href="/community"]:hover .whiteboard-nav-icon, .whiteboard-nav-link[href="/community"]:focus .whiteboard-nav-icon, .whiteboard-nav-link[href="/community"].whiteboard-nav-link-active .whiteboard-nav-icon { color: #0f9f8f; } .whiteboard-nav-link[href="/community"].whiteboard-nav-link-active { background: rgba( 20, 184, 166, 0.13 ); border-color: rgba( 15, 159, 143, 0.24 ); } .whiteboard-notifications { align-items: center; display: flex; position: relative; } .whiteboard-notification-button { align-items: center; background: rgba( 255, 255, 255, 0.08 ); border: 1px solid rgba( 255, 255, 255, 0.14 ); border-radius: 999px; color: #ffffff; cursor: pointer; display: inline-flex; height: 38px; justify-content: center; position: relative; width: 38px; } .whiteboard-notification-button:hover, .whiteboard-notification-button:focus { background: rgba( 255, 255, 255, 0.14 ); outline: none; } .whiteboard-notification-badge { align-items: center; background: var( --rtb-red ); border: 2px solid var( --rtb-navy ); border-radius: 999px; color: #ffffff; display: inline-flex; font-size: 0.65rem; font-weight: 800; height: 18px; justify-content: center; min-width: 18px; padding: 0 4px; position: absolute; right: -5px; top: -5px; } .whiteboard-notification-panel { background: #ffffff; border: 1px solid rgba( 17, 24, 39, 0.1 ); border-radius: 16px; box-shadow: 0 18px 42px rgba( 17, 24, 39, 0.18 ); color: var( --rtb-navy ); position: absolute; right: 0; top: calc( 100% + 12px ); width: min( 340px, calc( 100vw - 32px ) ); z-index: 250; } .whiteboard-notification-panel-header { border-bottom: 1px solid rgba( 17, 24, 39, 0.08 ); padding: 14px 16px; } .whiteboard-notification-list { max-height: 360px; overflow: auto; padding: 8px; } .whiteboard-notification-list p { color: #667085; font-size: 0.88rem; font-weight: 600; margin: 0; padding: 14px 8px; } .whiteboard-notification-panel-footer { border-top: 1px solid rgba( 17, 24, 39, 0.08 ); padding: 8px; } .whiteboard-notification-panel-footer a { align-items: center; border-radius: 10px; color: var( --rtb-blue ); display: flex; font-size: 0.85rem; font-weight: 700; justify-content: center; padding: 10px 12px; text-decoration: none; } .whiteboard-notification-panel-footer a:hover, .whiteboard-notification-panel-footer a:focus-visible { background: #f3f5f7; outline: none; } /* ============================================================ Avatars (photo or initials fallback) + account dropdown menu ============================================================ */ .whiteboard-avatar { align-items: center; border-radius: 999px; display: inline-flex; flex-shrink: 0; font-weight: 800; justify-content: center; object-fit: cover; overflow: hidden; vertical-align: middle; } .whiteboard-avatar-initials { /* Per-user color is set inline (see whiteboardAvatarColorForUser() in includes/avatar.php and avatarColorForUser() in assets/js/utils.js) - this is only the fallback for the rare case that isn't set. */ background: #94a3b8; color: #ffffff; font-weight: 700; line-height: 1; text-align: center; white-space: nowrap; } .whiteboard-avatar-sm { font-size: 0.78rem; height: 38px; width: 38px; } .whiteboard-avatar-sm.whiteboard-avatar-initials { line-height: 38px; } .whiteboard-avatar-md { font-size: 0.95rem; height: 46px; width: 46px; } .whiteboard-avatar-md.whiteboard-avatar-initials { line-height: 46px; } .whiteboard-avatar-lg { font-size: 1.6rem; height: 84px; width: 84px; } .whiteboard-avatar-lg.whiteboard-avatar-initials { line-height: 84px; } /* ============================================================ @ Mentions - highlighted display text + autocomplete dropdown ============================================================ */ .whiteboard-mention { background: rgba( 45, 156, 219, 0.14 ); border-radius: 6px; color: var( --rtb-blue ); font-weight: 800; padding: 0.05em 0.35em; } .whiteboard-mention-dropdown { background: #ffffff; border: 1px solid rgba( 17, 24, 39, 0.1 ); border-radius: 14px; box-shadow: 0 18px 36px rgba( 17, 24, 39, 0.16 ); max-height: 220px; overflow-y: auto; position: fixed; width: 280px; z-index: 600; } .whiteboard-mention-option { align-items: center; background: transparent; border: 0; border-bottom: 1px solid rgba( 17, 24, 39, 0.06 ); cursor: pointer; display: flex; font: inherit; gap: 10px; padding: 8px 12px; text-align: left; width: 100%; } .whiteboard-mention-option:last-child { border-bottom: 0; } .whiteboard-mention-option:hover, .whiteboard-mention-option:focus-visible { background: #f3f5f7; outline: none; } .whiteboard-mention-option span:last-child { color: var( --rtb-ink ); font-size: 0.9rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .whiteboard-autocomplete { position: relative; } .whiteboard-autocomplete-panel { background: #ffffff; border: 1px solid rgba( 17, 24, 39, 0.1 ); border-radius: 14px; box-shadow: 0 18px 36px rgba( 17, 24, 39, 0.16 ); left: 0; max-height: 260px; overflow-y: auto; position: absolute; right: 0; top: calc( 100% + 6px ); z-index: 50; } .whiteboard-autocomplete-group-label { color: var( --rtb-muted ); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; padding: 10px 14px 4px; text-transform: uppercase; } .whiteboard-autocomplete-option { background: transparent; border: 0; cursor: pointer; display: block; font: inherit; font-weight: 700; padding: 9px 14px; text-align: left; width: 100%; } .whiteboard-autocomplete-option:hover, .whiteboard-autocomplete-option-active { background: #f3f5f7; } .whiteboard-autocomplete-empty { color: var( --rtb-muted ); font-size: 0.85rem; font-weight: 600; line-height: 1.4; padding: 12px 14px; } .whiteboard-account-menu { align-items: center; display: flex; position: relative; } .whiteboard-account-trigger { align-items: center; background: transparent; border: 0; border-radius: 999px; box-shadow: inset 0 0 0 2px transparent; cursor: pointer; display: inline-flex; height: 38px; justify-content: center; padding: 0; transition: box-shadow 0.2s ease; width: 38px; } .whiteboard-account-trigger:hover, .whiteboard-account-trigger:focus-visible { box-shadow: inset 0 0 0 2px rgba( 255, 255, 255, 0.4 ); outline: none; } .whiteboard-account-trigger-active { box-shadow: inset 0 0 0 2px var( --rtb-red ); } .whiteboard-account-panel { background: #ffffff; border: 1px solid rgba( 17, 24, 39, 0.1 ); border-radius: 16px; box-shadow: 0 18px 42px rgba( 17, 24, 39, 0.18 ); color: var( --rtb-navy ); overflow: hidden; position: absolute; right: 0; top: calc( 100% + 12px ); width: min( 280px, calc( 100vw - 32px ) ); z-index: 250; } .whiteboard-account-panel-header { align-items: center; border-bottom: 1px solid rgba( 17, 24, 39, 0.08 ); display: flex; gap: 12px; padding: 16px; } .whiteboard-account-panel-header div { min-width: 0; } .whiteboard-account-panel-header strong { color: var( --rtb-ink ); display: block; font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .whiteboard-account-panel-header div span { color: var( --rtb-muted ); display: block; font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .whiteboard-account-panel-links { display: flex; flex-direction: column; padding: 8px; } .whiteboard-account-panel-links a, .whiteboard-account-panel-links button.whiteboard-account-panel-link-button { align-items: center; border-radius: 10px; color: var( --rtb-navy ); display: flex; font-size: 0.9rem; font-weight: 700; gap: 12px; padding: 10px 12px; text-decoration: none; } .whiteboard-account-panel-links a:hover, .whiteboard-account-panel-links a:focus-visible, .whiteboard-account-panel-links button.whiteboard-account-panel-link-button:hover, .whiteboard-account-panel-links button.whiteboard-account-panel-link-button:focus-visible { background: #f3f5f7; outline: none; } .whiteboard-account-panel-links a i, .whiteboard-account-panel-links button.whiteboard-account-panel-link-button i { color: var( --rtb-muted ); width: 18px; } .whiteboard-account-panel-links button.whiteboard-account-panel-link-button { background: none; border: 0; cursor: pointer; font-family: inherit; text-align: left; width: 100%; } .whiteboard-account-panel-links a[href="/records"].whiteboard-account-panel-link-active { background: rgba( 245, 158, 11, 0.12 ); } .whiteboard-account-panel-links a[href="/records"]:hover i, .whiteboard-account-panel-links a[href="/records"]:focus-visible i, .whiteboard-account-panel-links a[href="/records"].whiteboard-account-panel-link-active i { color: #f59e0b; } .whiteboard-account-panel-links a[href="/profile"].whiteboard-account-panel-link-active { background: rgba( 74, 222, 128, 0.14 ); } .whiteboard-account-panel-links a[href="/profile"]:hover i, .whiteboard-account-panel-links a[href="/profile"]:focus-visible i, .whiteboard-account-panel-links a[href="/profile"].whiteboard-account-panel-link-active i { color: #16a34a; } .whiteboard-account-panel-links a[href="/admin"].whiteboard-account-panel-link-active { background: rgba( 139, 92, 246, 0.14 ); } .whiteboard-account-panel-links a[href="/admin"]:hover i, .whiteboard-account-panel-links a[href="/admin"]:focus-visible i, .whiteboard-account-panel-links a[href="/admin"].whiteboard-account-panel-link-active i { color: #7c3aed; } .whiteboard-account-panel-footer { border-top: 1px solid rgba( 17, 24, 39, 0.08 ); padding: 8px; } .whiteboard-account-panel-logout { align-items: center; border-radius: 10px; color: var( --rtb-red-text ); display: flex; font-size: 0.9rem; font-weight: 700; gap: 12px; padding: 10px 12px; text-decoration: none; } .whiteboard-account-panel-logout:hover, .whiteboard-account-panel-logout:focus-visible { background: var( --rtb-red-soft ); outline: none; } .whiteboard-account-panel-logout i { width: 18px; } .whiteboard-notification-item { align-items: flex-start; border-radius: 12px; color: var( --rtb-navy ); display: flex; gap: 10px; padding: 11px; text-decoration: none; } .whiteboard-notification-item:hover, .whiteboard-notification-item:focus { background: #f5f7fa; outline: none; } .whiteboard-notification-item-unread { background: rgba( 200, 32, 47, 0.055 ); } .whiteboard-notification-icon { align-items: center; background: rgba( 200, 32, 47, 0.08 ); border-radius: 999px; color: var( --rtb-red-text ); display: inline-flex; flex: 0 0 auto; height: 28px; justify-content: center; width: 28px; } .whiteboard-notification-icon-comment { background: rgba( 45, 156, 219, 0.12 ); color: var( --rtb-blue ); } .whiteboard-notification-icon-mention { background: rgba( 155, 109, 255, 0.12 ); color: var( --rtb-gymnastics ); } .whiteboard-notification-icon-default { background: rgba( 102, 112, 133, 0.12 ); color: var( --rtb-muted ); } .whiteboard-notification-copy { display: block; min-width: 0; } .whiteboard-notification-item strong, .whiteboard-notification-item em { display: block; } .whiteboard-notification-item strong { font-size: 0.88rem; font-style: normal; font-weight: 800; margin-bottom: 2px; } .whiteboard-notification-item em { color: #667085; font-size: 0.82rem; font-style: normal; font-weight: 500; line-height: 1.35; } .whiteboard-notification-item small { color: #2563eb; display: block; font-size: 0.76rem; font-weight: 800; margin-top: 4px; } /* ============================================================ Notifications page (the full /notifications feed - distinct from the topbar dropdown above, which only shows a handful of recent items). None of this existed before, so the browser was falling back to default inline/underlined link rendering. ============================================================ */ .whiteboard-notifications-page { display: flex; flex-direction: column; gap: 22px; } .whiteboard-notifications-feed { display: flex; flex-direction: column; gap: 22px; } .whiteboard-notifications-skeleton { display: flex; flex-direction: column; gap: 10px; } .whiteboard-notifications-group { display: flex; flex-direction: column; gap: 10px; } .whiteboard-notifications-group h2 { color: var( --rtb-ink ); font-size: 1.05rem; font-weight: 900; letter-spacing: -0.03em; margin: 0; } .whiteboard-notifications-group-items { background: var( --rtb-surface ); border: 1px solid var( --rtb-border ); border-radius: var( --rtb-radius-md ); box-shadow: var( --rtb-shadow ); display: flex; flex-direction: column; overflow: hidden; } .whiteboard-notifications-item { align-items: center; border-bottom: 1px solid var( --rtb-border ); color: inherit; display: flex; gap: 14px; padding: 14px 18px; text-decoration: none; transition: background 0.15s ease; } .whiteboard-notifications-item:last-child { border-bottom: 0; } a.whiteboard-notifications-item:hover, a.whiteboard-notifications-item:focus-visible { background: var( --rtb-surface-soft ); outline: none; } .whiteboard-notifications-item-unread { background: var( --rtb-blue-soft ); } a.whiteboard-notifications-item-unread:hover, a.whiteboard-notifications-item-unread:focus-visible { background: rgba( 45, 156, 219, 0.16 ); } .whiteboard-notifications-item-avatar-wrap { flex-shrink: 0; position: relative; } .whiteboard-notifications-item-icon { align-items: center; border: 2px solid var( --rtb-surface ); border-radius: 999px; bottom: -4px; color: #ffffff; display: flex; font-size: 0.6rem; height: 20px; justify-content: center; position: absolute; right: -4px; width: 20px; } .whiteboard-notifications-item-icon-emoji { font-size: 0.75rem; line-height: 1; } .whiteboard-notifications-icon-hype { background: var( --rtb-red ); } .whiteboard-notifications-icon-comment { background: var( --rtb-blue ); } .whiteboard-notifications-icon-mention { background: var( --rtb-gymnastics ); } .whiteboard-notifications-icon-default { background: var( --rtb-muted ); } .whiteboard-notifications-item-copy { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; } .whiteboard-notifications-item-copy strong { color: var( --rtb-ink ); font-size: 0.92rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .whiteboard-notifications-item-copy span { color: var( --rtb-muted ); font-size: 0.86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .whiteboard-notifications-item-meta { align-items: flex-end; display: flex; flex-direction: column; flex-shrink: 0; gap: 6px; } .whiteboard-notifications-item-meta small { color: var( --rtb-muted ); font-size: 0.76rem; white-space: nowrap; } .whiteboard-notifications-dot { background: var( --rtb-red ); border-radius: 999px; height: 8px; width: 8px; } .whiteboard-notifications-load-more { align-self: center; } @media ( max-width: 640px ) { .whiteboard-notifications-item-copy strong, .whiteboard-notifications-item-copy span { white-space: normal; } } .whiteboard-main { display: flex; flex: 1 0 auto; flex-direction: column; min-height: 0; padding: 32px 0 42px; width: 100%; } body:not( :has( .whiteboard-topbar ) ) .whiteboard-main { align-items: center; display: flex; justify-content: center; } /* ============================================================ Mobile Menu Toggle 3 competing implementations existed (CSS-only two-bar pseudo-element hamburger, a Font Awesome icon-font version, and a 3x animated-X version). Your markup uses the version, so that's the only one kept below. ============================================================ */ .whiteboard-menu-toggle { appearance: none; align-items: center; background: transparent; border: 0; border-radius: 0; box-shadow: none; color: #ffffff; cursor: pointer; display: none; height: 44px; justify-content: center; min-height: 44px; min-width: 44px; padding: 10px; width: 44px; } .whiteboard-menu-toggle:hover, .whiteboard-menu-toggle:focus, .whiteboard-menu-toggle[aria-expanded="true"] { background: transparent; border: 0; box-shadow: none; color: #ffffff; transform: none; } .whiteboard-menu-toggle:focus-visible { outline: 2px solid rgba( 255, 255, 255, 0.75 ); outline-offset: 2px; } .whiteboard-menu-toggle-icon { display: block; height: 20px; position: relative; width: 24px; } .whiteboard-menu-toggle-icon > span { background: #ffffff; border-radius: 999px; display: block; height: 2px; left: 0; position: absolute; transform-origin: center; transition: top 180ms ease, transform 180ms ease, opacity 140ms ease; width: 24px; } .whiteboard-menu-toggle-icon > span:nth-child( 1 ) { top: 2px; } .whiteboard-menu-toggle-icon > span:nth-child( 2 ) { top: 9px; } .whiteboard-menu-toggle-icon > span:nth-child( 3 ) { top: 16px; } .whiteboard-menu-open .whiteboard-menu-toggle-icon > span:nth-child( 1 ) { top: 9px; transform: rotate( 45deg ); } .whiteboard-menu-open .whiteboard-menu-toggle-icon > span:nth-child( 2 ) { opacity: 0; transform: scaleX( 0 ); } .whiteboard-menu-open .whiteboard-menu-toggle-icon > span:nth-child( 3 ) { top: 9px; transform: rotate( -45deg ); } body.whiteboard-menu-open { overflow: hidden; } body.whiteboard-menu-open::before { background: rgba( 5, 11, 22, 0.54 ); backdrop-filter: blur( 5px ); content: ""; inset: 0; position: fixed; z-index: 90; } /* ============================================================ Whiteboard Footer ============================================================ */ .whiteboard-footer { background: var( --rtb-navy ); border-top: 0; color: rgba( 255, 255, 255, 0.78 ); flex-shrink: 0; margin-top: auto; padding: 0; } .whiteboard-footer-inner { align-items: center; display: flex; gap: 18px; justify-content: space-between; margin: 0 auto; max-width: var( --rtb-max-width ); min-height: 72px; padding: 18px var( --rtb-pad ); } /* The whiteboard drawer's collapsed bar is fixed at the bottom of the viewport on every page it appears on (currently just Today) - without this, scrolling to the actual bottom of the page leaves the footer sitting underneath it instead of visible above it. */ body:has( #whiteboard-drawer ) .whiteboard-footer-inner { padding-bottom: 90px; } .whiteboard-footer-brand { align-items: center; display: inline-flex; gap: 10px; } .whiteboard-footer-brand, .whiteboard-footer-brand strong, .whiteboard-footer-meta, .whiteboard-footer-meta span { color: rgba( 255, 255, 255, 0.78 ); } .whiteboard-footer-brand strong { color: #ffffff; font-size: 0.92rem; font-weight: 900; letter-spacing: -0.03em; } .whiteboard-footer-brand span { display: none; } .whiteboard-footer-logo { display: block; filter: brightness( 0 ) invert( 1 ); height: 38px; max-width: 136px; object-fit: contain; width: auto; } .whiteboard-footer-right { align-items: center; display: flex; gap: 18px; } .whiteboard-footer-actions { align-items: center; display: flex; gap: 18px; } .whiteboard-footer-theme-toggle, .whiteboard-footer-help-trigger { align-items: center; background: transparent; border: 1px solid rgba( 255, 255, 255, 0.2 ); border-radius: 999px; color: rgba( 255, 255, 255, 0.78 ); cursor: pointer; display: inline-flex; font: inherit; font-size: 0.8rem; font-weight: 700; gap: 7px; min-height: 36px; padding: 7px 11px; text-decoration: none; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; } .whiteboard-footer-theme-toggle:hover, .whiteboard-footer-theme-toggle:focus-visible, .whiteboard-footer-help-trigger:hover, .whiteboard-footer-help-trigger:focus-visible { background: rgba( 255, 255, 255, 0.08 ); border-color: rgba( 255, 255, 255, 0.42 ); color: #ffffff; } .whiteboard-footer-theme-toggle:focus-visible, .whiteboard-footer-help-trigger:focus-visible { outline: 3px solid rgba( 255, 255, 255, 0.2 ); outline-offset: 3px; } @media ( max-width: 560px ) { .whiteboard-footer-actions { gap: 12px; } .whiteboard-footer-theme-toggle, .whiteboard-footer-help-trigger { border-radius: 50%; height: 38px; justify-content: center; padding: 0; width: 38px; } .whiteboard-footer-theme-toggle .whiteboard-theme-toggle-label, .whiteboard-footer-help-trigger span { display: none; } } .whiteboard-footer-meta { align-items: center; display: flex; gap: 9px; justify-content: flex-end; text-align: right; } .whiteboard-footer-meta span { display: block; font-size: 0.86rem; } .whiteboard-footer-meta-link { color: inherit; text-decoration: none; } .whiteboard-footer-meta-link:hover, .whiteboard-footer-meta-link:focus-visible { color: #ffffff; text-decoration: underline; } .whiteboard-footer-legal { position: relative; } .whiteboard-footer-legal summary { align-items: center; border-radius: 999px; color: rgba( 255, 255, 255, 0.78 ); cursor: pointer; display: inline-flex; font-size: 0.8rem; font-weight: 750; gap: 6px; list-style: none; padding: 5px 8px; transition: background-color 160ms ease, color 160ms ease; } .whiteboard-footer-legal summary::-webkit-details-marker { display: none; } .whiteboard-footer-legal summary:hover, .whiteboard-footer-legal summary:focus-visible, .whiteboard-footer-legal[open] summary { background: rgba( 255, 255, 255, 0.08 ); color: #ffffff; outline: none; } .whiteboard-footer-legal summary:focus-visible { box-shadow: 0 0 0 3px rgba( 255, 255, 255, 0.18 ); } .whiteboard-footer-legal summary i { font-size: 0.62rem; transition: transform 160ms ease; } .whiteboard-footer-legal[open] summary i { transform: rotate( 180deg ); } .whiteboard-footer-legal-menu { background: var( --rtb-surface ); border: 1px solid var( --rtb-border ); border-radius: 12px; bottom: calc( 100% + 9px ); box-shadow: 0 16px 38px rgba( 0, 0, 0, 0.24 ); display: grid; min-width: 210px; padding: 6px; position: absolute; right: 0; text-align: left; z-index: 80; } .whiteboard-footer-legal-menu a { align-items: center; border-radius: 8px; color: var( --rtb-ink ); display: flex; font-size: 0.78rem; font-weight: 750; gap: 9px; padding: 9px 10px; text-decoration: none; } .whiteboard-footer-legal-menu a i { color: var( --rtb-muted ); text-align: center; width: 15px; } .whiteboard-footer-legal-menu a:hover, .whiteboard-footer-legal-menu a:focus-visible { background: var( --rtb-surface-muted ); outline: none; } /* ============================================================ Shared Layout / Typography ============================================================ */ .whiteboard-workout-layout, .whiteboard-history-layout, .whiteboard-calendar-layout, .whiteboard-profile-layout, .whiteboard-records-layout, .whiteboard-notifications-page, .whiteboard-admin-layout, .whiteboard-login-layout, .whiteboard-auth-layout, .admin-card-grid, .dashboard-grid { box-sizing: border-box; margin-left: auto; margin-right: auto; max-width: var( --rtb-max-width ); padding-left: var( --rtb-pad ); padding-right: var( --rtb-pad ); width: 100%; } .page-header, .whiteboard-page-header-compact { background: radial-gradient( 120% 200% at 50% -40%, rgba( 200, 32, 47, 0.35 ), transparent 60% ), linear-gradient( 135deg, #1a2030 0%, #10131c 100% ); box-shadow: 0 18px 30px rgba( 0, 0, 0, 0.16 ); margin-bottom: 22px; overflow: hidden; padding: clamp( 32px, 5vw, 52px ) clamp( 24px, 5vw, 48px ); position: relative; text-align: center; width: 100%; } body.whiteboard-has-topbar .page-header { margin-top: -32px; } .page-header > div { margin-left: auto; margin-right: auto; max-width: 640px; position: relative; z-index: 1; } .whiteboard-page-header-compact { padding: clamp( 24px, 4vw, 34px ) clamp( 24px, 5vw, 48px ); } .eyebrow, .page-header .eyebrow, .page-header .whiteboard-eyebrow, .whiteboard-eyebrow, .admin-card-label { color: var( --rtb-muted ); font-size: 0.78rem; font-weight: 900; letter-spacing: 0.13em; margin: 0 0 10px; text-transform: uppercase; } .page-header .eyebrow, .page-header .whiteboard-eyebrow { background: rgba( 255, 255, 255, 0.14 ); border: 1px solid rgba( 255, 255, 255, 0.22 ); border-radius: 999px; color: #ffffff; display: inline-block; font-size: 0.72rem; margin: 0 0 14px; padding: 6px 16px; } .page-header h1, .whiteboard-login-header h1, .whiteboard-auth-header h1, .whiteboard-profile-window-header h2, .whiteboard-profile-password-header h2 { color: var( --rtb-ink ); font-weight: 900; letter-spacing: -0.045em; margin: 0 0 14px; } .page-header h1 { color: #ffffff; font-size: clamp( 1.85rem, 3vw, 2.65rem ); font-weight: 800; line-height: 1.05; text-wrap: balance; } .page-header h1::after { display: none; } .whiteboard-page-header-compact h1 { font-size: clamp( 1.7rem, 2.5vw, 2.25rem ); margin-bottom: 8px; } .lead, .page-header .lead, .whiteboard-muted { color: var( --rtb-muted ); font-size: 0.98rem; line-height: 1.55; margin: 0; max-width: 680px; } .page-header .lead { color: rgba( 255, 255, 255, 0.72 ); margin-left: auto; margin-right: auto; } .whiteboard-card, .admin-card, .dashboard-card { background: #ffffff; border: 1px solid rgba( 15, 23, 42, 0.08 ); border-radius: var( --rtb-radius ); box-shadow: 0 10px 26px rgba( 17, 24, 39, 0.055 ); padding: 24px; } .whiteboard-card h3 { color: var( --rtb-ink ); font-size: 1.2rem; font-weight: 800; margin: 0 0 8px; } .whiteboard-result-form-header { align-items: center; border-radius: var( --rtb-radius ) var( --rtb-radius ) 0 0; display: flex; gap: 14px; margin: -24px -24px 20px; padding: 20px 24px; } .whiteboard-result-form-header h3 { margin: 0 0 2px; } .whiteboard-result-form-header p { margin: 0; } .whiteboard-result-form-header-icon { align-items: center; border-radius: 12px; display: inline-flex; flex: 0 0 auto; font-size: 1.05rem; height: 42px; justify-content: center; width: 42px; } .whiteboard-result-form-header-strength { background: var( --rtb-strength-soft ); border-bottom: 1px solid rgba( 255, 122, 89, 0.25 ); } .whiteboard-result-form-header-strength .whiteboard-result-form-header-icon { background: rgba( 255, 255, 255, 0.6 ); color: var( --rtb-strength ); } .whiteboard-result-form-header-wod { background: var( --rtb-blue-soft ); border-bottom: 1px solid rgba( 45, 156, 219, 0.22 ); } .whiteboard-result-form-header-wod .whiteboard-result-form-header-icon { background: rgba( 255, 255, 255, 0.7 ); color: var( --rtb-blue ); } .whiteboard-breadcrumbs { align-items: center; color: var( --rtb-muted ); display: flex; font-size: 0.86rem; font-weight: 800; gap: 8px; margin: 0 0 12px; } .whiteboard-breadcrumbs a { color: var( --rtb-red-text ); text-decoration: none; } .whiteboard-breadcrumbs a:hover, .whiteboard-breadcrumbs a:focus { text-decoration: underline; } .whiteboard-breadcrumbs strong { color: var( --rtb-ink ); } /* ============================================================ Shared Forms / Buttons / Alerts (the base button was red, then a later "Submit Button Colour Pass" turned every non-secondary/non-danger button green via a :not() override - folded directly into the base rule here, with secondary/danger kept as explicit variants) ============================================================ */ .whiteboard-button, .whiteboard-button-block { align-items: center; background: var( --rtb-go ); border: 1px solid var( --rtb-go ); border-radius: 12px; box-shadow: 0 10px 22px rgba( 22, 163, 74, 0.16 ); color: #ffffff; cursor: pointer; display: inline-flex; font-size: 0.92rem; font-weight: 700; gap: 8px; justify-content: center; margin-top: 12px; min-height: 44px; padding: 0.72rem 1rem; text-decoration: none; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .whiteboard-button:hover, .whiteboard-button:focus { background: var( --rtb-go-dark ); border-color: var( --rtb-go-dark ); box-shadow: 0 12px 26px rgba( 22, 163, 74, 0.22 ); color: #ffffff; transform: translateY( -1px ); } .whiteboard-button:disabled { background: var( --rtb-go ); border-color: var( --rtb-go ); cursor: not-allowed; opacity: 0.62; } .whiteboard-button-block { width: 100%; } .whiteboard-button-secondary { background: #ffffff; border-color: rgba( 15, 23, 42, 0.14 ); box-shadow: none; color: var( --rtb-navy ); } .whiteboard-button-secondary:hover, .whiteboard-button-secondary:focus { background: #f8fafc; border-color: rgba( 15, 23, 42, 0.24 ); box-shadow: none; color: var( --rtb-navy ); } .whiteboard-button-secondary:disabled { background: #f1f5f9; color: #94a3b8; } .whiteboard-button-danger { background: var( --rtb-red ); border-color: var( --rtb-red ); box-shadow: none; } .whiteboard-button-danger:hover, .whiteboard-button-danger:focus { background: var( --rtb-red-dark ); border-color: var( --rtb-red-dark ); } .whiteboard-button-loading, .whiteboard-button-loading:hover, .whiteboard-button-loading:focus { cursor: wait; gap: 9px; pointer-events: none; } .whiteboard-button-spinner { animation: whiteboard-button-spinner 0.75s linear infinite; border: 2px solid rgba( 255, 255, 255, 0.42 ); border-radius: 999px; border-top-color: #ffffff; display: inline-block; height: 15px; width: 15px; } @keyframes whiteboard-button-spinner { from { transform: rotate( 0deg ); } to { transform: rotate( 360deg ); } } .whiteboard-alert { border-radius: var( --rtb-radius-md ); font-size: 1rem; font-weight: 700; margin: 0 auto 24px; max-width: var( --rtb-max-width ); padding: 16px 18px; } .whiteboard-alert-info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1d4ed8; } .whiteboard-alert-error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; } /* Compact pill next to the workout date for days with more than one workout. One other workout links straight there and uses that workout type's color. Multiple workouts use a neutral purple count and open the list below. */ .whiteboard-workout-badge-row { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; } .whiteboard-workout-date-row { align-items: center; display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; } .whiteboard-other-workouts { position: relative; } .whiteboard-other-workouts-chip, .whiteboard-other-workouts-chip:visited { --rtb-chip-background: rgba( 109, 40, 217, 0.08 ); --rtb-chip-color: #6d28d9; align-items: center; background: var( --rtb-chip-background ); border: 0; border-radius: 999px; color: var( --rtb-chip-color ); cursor: pointer; display: inline-flex; font-family: inherit; font-size: 0.72rem; font-weight: 800; gap: 4px; line-height: 1; min-height: 24px; padding: 4px 7px; text-decoration: none; transition: opacity 160ms ease; white-space: nowrap; } .whiteboard-other-workouts-chip:hover, .whiteboard-other-workouts-chip:focus-visible, .whiteboard-other-workouts-chip:visited:hover, .whiteboard-other-workouts-chip:visited:focus-visible { color: var( --rtb-chip-color ); outline: none; opacity: 0.78; text-decoration: none; } .whiteboard-other-workouts-chip:focus-visible { outline: 2px solid var( --rtb-chip-color ); outline-offset: 2px; } .whiteboard-other-workouts-arrow, .whiteboard-other-workouts-chevron { font-size: 0.58rem; transition: transform 160ms ease; } .whiteboard-other-workouts-chip[aria-expanded="true"] .whiteboard-other-workouts-chevron { transform: rotate( 180deg ); } .whiteboard-other-workouts-chip-bootcamp { --rtb-chip-background: var( --rtb-red-soft ); --rtb-chip-color: var( --rtb-red-text ); } .whiteboard-other-workouts-chip-strength { --rtb-chip-background: var( --rtb-strength-soft ); --rtb-chip-color: var( --rtb-strength ); } .whiteboard-other-workouts-chip-olympic_weightlifting { --rtb-chip-background: var( --rtb-oly-soft ); --rtb-chip-color: #a16207; } .whiteboard-other-workouts-chip-gymnastics { --rtb-chip-background: var( --rtb-gymnastics-soft ); --rtb-chip-color: #7c3aed; } .whiteboard-other-workouts-chip-flash { --rtb-chip-background: var( --rtb-flash-soft ); --rtb-chip-color: #047857; } .whiteboard-other-workouts-menu { background: #ffffff; border: 1px solid var( --rtb-border ); border-radius: 12px; box-shadow: 0 12px 30px rgba( 15, 23, 42, 0.16 ); display: flex; flex-direction: column; left: 0; min-width: 200px; padding: 6px; position: absolute; top: calc( 100% + 6px ); z-index: 20; } .whiteboard-other-workouts-option, .whiteboard-other-workouts-option:visited { --rtb-chip-color: var( --rtb-ink ); border-radius: 8px; color: var( --rtb-chip-color ); font-size: 0.84rem; font-weight: 700; padding: 8px 10px; text-decoration: none; } .whiteboard-other-workouts-option-bootcamp { --rtb-chip-color: var( --rtb-red-text ); } .whiteboard-other-workouts-option-strength { --rtb-chip-color: var( --rtb-strength ); } .whiteboard-other-workouts-option-olympic_weightlifting { --rtb-chip-color: var( --rtb-oly ); } .whiteboard-other-workouts-option-gymnastics { --rtb-chip-color: var( --rtb-gymnastics ); } .whiteboard-other-workouts-option-flash { --rtb-chip-color: var( --rtb-flash ); } .whiteboard-other-workouts-option:hover, .whiteboard-other-workouts-option:focus-visible, .whiteboard-other-workouts-option:visited:hover, .whiteboard-other-workouts-option:visited:focus-visible { background: #f2f4f7; outline: none; } html[data-theme="dark"] .whiteboard-other-workouts-menu { background: var( --rtb-surface ); border-color: var( --rtb-border-strong ); } html[data-theme="dark"] .whiteboard-other-workouts-chip { --rtb-chip-background: rgba( 167, 139, 250, 0.16 ); --rtb-chip-color: #d8b4fe; } html[data-theme="dark"] .whiteboard-other-workouts-chip-bootcamp { --rtb-chip-background: rgba( 239, 125, 134, 0.14 ); --rtb-chip-color: var( --rtb-red-text ); } html[data-theme="dark"] .whiteboard-other-workouts-chip-strength { --rtb-chip-background: rgba( 255, 122, 89, 0.14 ); --rtb-chip-color: #ff9a80; } html[data-theme="dark"] .whiteboard-other-workouts-chip-olympic_weightlifting { --rtb-chip-background: rgba( 244, 180, 0, 0.14 ); --rtb-chip-color: #facc15; } html[data-theme="dark"] .whiteboard-other-workouts-chip-gymnastics { --rtb-chip-background: rgba( 155, 109, 255, 0.15 ); --rtb-chip-color: #c4b5fd; } html[data-theme="dark"] .whiteboard-other-workouts-chip-flash { --rtb-chip-background: rgba( 0, 184, 148, 0.14 ); --rtb-chip-color: #5eead4; } html[data-theme="dark"] .whiteboard-other-workouts-option:hover, html[data-theme="dark"] .whiteboard-other-workouts-option:focus-visible, html[data-theme="dark"] .whiteboard-other-workouts-option:visited:hover, html[data-theme="dark"] .whiteboard-other-workouts-option:visited:focus-visible { background: rgba( 255, 255, 255, 0.08 ); } .whiteboard-form-message:empty { display: none; } .whiteboard-form-message:not(:empty) { font-size: 0.9rem; font-weight: 800; min-height: 22px; padding-top: 4px; } .whiteboard-form-message-success { color: #15803d; } .whiteboard-form-message-error { color: #b91c1c; } .whiteboard-field-help { color: var( --rtb-muted ); font-size: 0.82rem; font-weight: 700; line-height: 1.4; margin: -4px 0 4px; } .whiteboard-result-form, .whiteboard-login-form, .whiteboard-admin-form { display: flex; flex-direction: column; gap: 10px; } .whiteboard-result-form label, .whiteboard-login-form label, .whiteboard-auth-form label, .whiteboard-admin-field label, .whiteboard-history-control-group label, .whiteboard-profile-control-group label, .whiteboard-calendar-control-group label { color: #1f2937; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; } .whiteboard-required-marker, .whiteboard-login-form label .whiteboard-required-marker, .whiteboard-auth-form label .whiteboard-required-marker, .whiteboard-profile-control-group label .whiteboard-required-marker { color: var( --rtb-red-text ); font-weight: 900; margin-left: 3px; } .whiteboard-result-form input, .whiteboard-result-form select, .whiteboard-result-form textarea, .whiteboard-login-form input, .whiteboard-admin-field input, .whiteboard-admin-field select, .whiteboard-history-control-group select, .whiteboard-profile-control-group input, .whiteboard-profile-control-group select, .whiteboard-calendar-control-group select { background: #ffffff; border: 1px solid var( --rtb-border-strong ); border-radius: var( --rtb-radius-sm ); color: var( --rtb-ink ); font-size: 1rem; width: 100%; } .whiteboard-result-form input, .whiteboard-result-form select, .whiteboard-result-form textarea, .whiteboard-login-form input { padding: 13px 14px; } .whiteboard-admin-field input, .whiteboard-admin-field select, .whiteboard-history-control-group select, .whiteboard-profile-control-group input, .whiteboard-profile-control-group select, .whiteboard-calendar-control-group select { min-height: 48px; padding: 14px; } .whiteboard-result-form input:focus, .whiteboard-result-form select:focus, .whiteboard-result-form textarea:focus, .whiteboard-login-form input:focus, .whiteboard-admin-field input:focus, .whiteboard-admin-field select:focus, .whiteboard-history-control-group select:focus, .whiteboard-profile-control-group input:focus, .whiteboard-profile-control-group select:focus, .whiteboard-calendar-control-group select:focus { border-color: var( --rtb-focus-border ); box-shadow: 0 0 0 4px var( --rtb-focus ); outline: none; } /* ============================================================ Badges / Pills ============================================================ */ .whiteboard-pill, .whiteboard-result-type-pill, .whiteboard-result-type-mini, .whiteboard-admin-badge, .whiteboard-result-kind-mini { align-items: center; border-radius: 999px; display: inline-flex; font-weight: 900; line-height: 1; text-transform: uppercase; white-space: nowrap; } .whiteboard-pill { background: rgba( 17, 24, 39, 0.06 ); border: 1px solid rgba( 17, 24, 39, 0.14 ); color: var( --rtb-navy ); font-size: 0.72rem; letter-spacing: 0.08em; padding: 0.5rem 0.75rem; } .whiteboard-result-type-pill, .whiteboard-result-type-mini { background: #ffffff; border: 1px solid rgba( 220, 53, 69, 0.18 ); color: #b42335; font-size: 0.72rem; letter-spacing: 0.06em; padding: 0.5rem 0.75rem; } .whiteboard-result-type-pill { margin-top: 4px; } .whiteboard-admin-badge { background: #ffffff; border: 1px solid var( --rtb-border ); color: #475569; font-size: 0.72rem; letter-spacing: 0.06em; padding: 0.42rem 0.65rem; } .whiteboard-admin-badge-active { background: #dcfce7; border-color: #86efac; color: #166534; } .whiteboard-admin-badge-inactive { background: #fee2e2; border-color: #fecaca; color: #991b1b; } .whiteboard-result-kind-mini { font-size: 0.72rem; letter-spacing: 0.06em; padding: 0.5rem 0.75rem; } .whiteboard-result-kind-wod { background: #eff6ff; border: 1px solid #bfdbfe; color: #1d4ed8; } .whiteboard-result-kind-strength { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; } /* ============================================================ Today / Workout Screen ============================================================ */ .whiteboard-workout-layout { padding-bottom: 110px; } .whiteboard-workout-shell { display: flex; flex-direction: column; gap: 24px; } .whiteboard-workout-main-grid { align-items: start; display: grid; gap: 28px; grid-template-columns: minmax( 0, 1fr ) minmax( 320px, 420px ); } .whiteboard-workout-card { overflow: hidden; padding: 0; } .whiteboard-workout-card-top { align-items: flex-start; background: linear-gradient( 180deg, #ffffff 0%, #fbfbf8 100% ); border-bottom: 1px solid var( --rtb-border ); display: flex; gap: 20px; justify-content: space-between; padding: 24px; } .whiteboard-workout-card-top h2 { color: var( --rtb-ink ); font-size: clamp( 1.8rem, 3vw, 2.6rem ); font-weight: 900; letter-spacing: -0.04em; line-height: 1.05; margin: 12px 0 8px; } .whiteboard-workout-header .lead { display: none; } .whiteboard-workout-sections { display: flex; flex-direction: column; gap: 16px; padding: 24px; } .whiteboard-workout-section { background: var( --rtb-surface-muted ); border: 1px solid var( --rtb-border ); border-radius: 20px; box-shadow: none; overflow: hidden; } .whiteboard-workout-section-heading { align-items: center; background: rgba( 15, 23, 42, 0.04 ); border-bottom: 1px solid var( --rtb-border ); color: var( --rtb-ink ); display: flex; font-size: 0.82rem; font-weight: 900; justify-content: space-between; letter-spacing: 0.08em; margin: 0; padding: 14px 18px; text-transform: uppercase; } .whiteboard-workout-section-content, .whiteboard-workout-wod-body { color: var( --rtb-text ); font-size: 1rem; line-height: 1.65; padding: 16px 18px 18px; } .whiteboard-workout-section-content p, .whiteboard-variant-content p, .whiteboard-workout-format-content p, .whiteboard-stimulus-content p { margin: 0; } .whiteboard-workout-section-content p + p, .whiteboard-variant-content p + p, .whiteboard-workout-format-content p + p, .whiteboard-stimulus-content p + p { margin-top: 0.65rem; } .whiteboard-workout-section-content strong, .whiteboard-variant-content strong, .whiteboard-workout-format-content strong, .whiteboard-stimulus-content strong { color: var( --rtb-ink ); font-weight: 900; } .whiteboard-workout-section-warmup .whiteboard-workout-section-heading { background: var( --rtb-oly-soft ); border-bottom-color: rgba( 244, 180, 0, 0.25 ); color: #8a6400; } .whiteboard-workout-section-strength .whiteboard-workout-section-heading { background: var( --rtb-strength-soft ); border-bottom-color: rgba( 255, 122, 89, 0.24 ); color: #b94928; } .whiteboard-workout-section-wod .whiteboard-workout-section-heading { background: var( --rtb-red-soft ); border-bottom-color: rgba( 214, 31, 38, 0.2 ); color: #b42335; } .whiteboard-workout-section-accessory .whiteboard-workout-section-heading { background: var( --rtb-blue-soft ); border-bottom-color: rgba( 45, 156, 219, 0.22 ); color: #166c9b; } .whiteboard-workout-section-cooldown .whiteboard-workout-section-heading { background: var( --rtb-flash-soft ); border-bottom-color: rgba( 0, 184, 148, 0.22 ); color: #047857; } .whiteboard-workout-format { background: linear-gradient( 180deg, rgba( 45, 156, 219, 0.12 ) 0%, #ffffff 100% ); border: 1px solid rgba( 45, 156, 219, 0.22 ); border-radius: 16px; margin-bottom: 16px; padding: 16px; } .whiteboard-workout-format-label { color: var( --rtb-ink ); font-size: 0.7rem; font-weight: 900; letter-spacing: 0.08em; margin-bottom: 6px; text-transform: uppercase; } .whiteboard-workout-format-content { color: var( --rtb-ink ); font-size: 1rem; font-weight: 800; line-height: 1.45; } .whiteboard-variant-grid { display: grid; gap: 14px; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } /* Restored the original distinct per-variant colours; a later "RTB Red Scale" pass had overridden all four to red-tinted - removed, per your call, so elite/competitive/performance/ lifestyle read as distinct again */ .whiteboard-variant-card { background: #f8f8fc; border: 1px solid #d9ddf6; border-radius: 16px; box-shadow: none; overflow: hidden; } .whiteboard-variant-title { border-bottom: 1px solid var( --rtb-border ); color: var( --rtb-ink ); font-size: 0.95rem; font-weight: 900; padding: 13px 16px; } .whiteboard-variant-content { color: var( --rtb-text ); font-size: 1rem; line-height: 1.6; padding: 14px 16px 16px; } .whiteboard-variant-elite { background: linear-gradient( 180deg, rgba( 155, 109, 255, 0.12 ) 0%, #ffffff 100% ); border-color: rgba( 155, 109, 255, 0.2 ); } .whiteboard-variant-competitive { background: linear-gradient( 180deg, rgba( 214, 31, 38, 0.09 ) 0%, #ffffff 100% ); border-color: rgba( 214, 31, 38, 0.18 ); } .whiteboard-variant-performance { background: linear-gradient( 180deg, rgba( 45, 156, 219, 0.1 ) 0%, #ffffff 100% ); border-color: rgba( 45, 156, 219, 0.18 ); } .whiteboard-variant-lifestyle { background: linear-gradient( 180deg, rgba( 0, 184, 148, 0.1 ) 0%, #ffffff 100% ); border-color: rgba( 0, 184, 148, 0.18 ); } .whiteboard-stimulus { border-top: 1px solid rgba( 15, 23, 42, 0.1 ); margin-top: 16px; padding-top: 16px; } .whiteboard-stimulus-title { color: var( --rtb-muted ); font-size: 0.74rem; font-weight: 900; letter-spacing: 0.08em; margin-bottom: 8px; text-transform: uppercase; } .whiteboard-stimulus-content { color: var( --rtb-text ); font-size: 0.96rem; line-height: 1.6; } .whiteboard-workout-sidebar { display: flex; flex-direction: column; gap: 24px; } .whiteboard-result-form { margin-top: 18px; } .whiteboard-result-form label { margin-top: 8px; } .whiteboard-whiteboard-card { background: linear-gradient( 180deg, #ffffff 0%, #fbfbf8 100% ); border-color: rgba( 17, 17, 17, 0.12 ); box-shadow: 0 22px 60px rgba( 15, 23, 42, 0.1 ); margin: 0 auto; max-width: 640px; overflow: hidden; padding: 24px; width: 100%; } .whiteboard-whiteboard-card-header, .whiteboard-profile-window-header { align-items: center; display: flex; gap: 18px; justify-content: space-between; margin-bottom: 14px; } .whiteboard-whiteboard-card-header h2 { color: var( --rtb-ink ); font-size: clamp( 1.35rem, 2vw, 1.8rem ); font-weight: 900; letter-spacing: -0.04em; line-height: 1; margin: 0 0 4px; } /* ------------------------------------------------------------ Whiteboard drawer: workout + log form is the primary task on this page, so today's results swing open on demand instead of always taking up the top of the page. ------------------------------------------------------------ */ .whiteboard-whiteboard-drawer { background: #ffffff; border-radius: 20px 20px 0 0; bottom: 0; box-shadow: 0 -8px 24px rgba( 17, 24, 39, 0.1 ); display: flex; flex-direction: column; left: 0; margin: 0 auto; max-height: 88vh; max-height: 88dvh; max-width: 640px; overflow: hidden; position: fixed; right: 0; transition: box-shadow 0.3s ease, bottom 0.3s ease; z-index: 120; } /* The app has its own bottom tab bar sitting fixed at the very bottom of the screen (the website doesn't), so the tray needs to stop above it there instead of sliding underneath/over it. */ html.whiteboard-native-app .whiteboard-whiteboard-drawer { bottom: calc( 64px + env( safe-area-inset-bottom ) ); } /* Same reasoning as the drawer above: the backdrop is full-viewport (top:0 to bottom:0) by default, which puts its blur/tint over the native app's own bottom tab bar too. Stop it above the tab bar so the tab bar stays sharp and untinted while the drawer is open. */ html.whiteboard-native-app .whiteboard-whiteboard-panel-backdrop { bottom: calc( 64px + env( safe-area-inset-bottom ) ); } .whiteboard-whiteboard-drawer-open { box-shadow: 0 -20px 60px rgba( 0, 0, 0, 0.35 ); } /* The bar and the dark expanded header occupy the exact same slot, stacked via grid and cross-faded, so opening the drawer reads as the bar itself transforming into the header - not a second surface sliding up to cover it. Only the body below actually changes height. */ .whiteboard-whiteboard-drawer-header { border: 0; display: grid; flex: 0 0 auto; height: 62px; } .whiteboard-whiteboard-drawer-header > * { grid-column: 1; grid-row: 1; height: 100%; } .whiteboard-whiteboard-drawer-bar { align-items: center; background: #ffffff; border: 0; border-bottom: 0; cursor: pointer; display: flex; font: inherit; gap: 12px; justify-content: space-between; padding: 10px 18px; text-align: left; transition: background 0.15s ease, opacity 0.2s ease; width: 100%; } .whiteboard-whiteboard-drawer-open .whiteboard-whiteboard-drawer-bar { opacity: 0; pointer-events: none; } .whiteboard-whiteboard-drawer-bar-icon { align-items: center; background: linear-gradient( 135deg, var( --rtb-red ) 0%, #8f1622 100% ); border-radius: 999px; box-shadow: 0 6px 14px rgba( 200, 32, 47, 0.35 ); color: #ffffff; display: inline-flex; flex: 0 0 auto; font-size: 0.85rem; height: 32px; justify-content: center; width: 32px; } .whiteboard-whiteboard-drawer-bar-text { align-items: baseline; display: flex; flex: 1 1 auto; gap: 8px; min-width: 0; } .whiteboard-whiteboard-drawer-bar h2 { color: var( --rtb-ink ); flex: 0 0 auto; font-size: 1.05rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1; margin: 0; } .whiteboard-whiteboard-drawer-bar:hover, .whiteboard-whiteboard-drawer-bar:focus-visible { background: #f8fafc; outline: none; } .whiteboard-whiteboard-drawer-bar:hover .whiteboard-whiteboard-toggle-icon, .whiteboard-whiteboard-drawer-bar:focus-visible .whiteboard-whiteboard-toggle-icon { background: rgba( 17, 24, 39, 0.1 ); color: var( --rtb-ink ); } .whiteboard-whiteboard-toggle-sub { color: var( --rtb-muted ); font-size: 0.82rem; font-weight: 700; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .whiteboard-whiteboard-toggle-sub::before { content: '\2013'; margin-right: 8px; } .whiteboard-toggle-avatars { align-items: center; display: flex; flex: 0 0 auto; padding-left: 4px; } .whiteboard-toggle-avatar { align-items: center; background: #e2e8f0; border: 2px solid #ffffff; border-radius: 999px; box-shadow: 0 2px 6px rgba( 17, 24, 39, 0.12 ); color: var( --rtb-muted ); display: inline-flex; font-size: 0.62rem; font-weight: 800; height: 26px; justify-content: center; margin-left: -8px; overflow: hidden; width: 26px; } .whiteboard-toggle-avatar:first-child { margin-left: 0; } .whiteboard-toggle-avatar .whiteboard-avatar { height: 100%; width: 100%; } .whiteboard-toggle-avatar-more { background: var( --rtb-ink ); color: #ffffff; } .whiteboard-whiteboard-toggle-icon { align-items: center; background: rgba( 17, 24, 39, 0.05 ); border-radius: 999px; color: var( --rtb-muted ); display: inline-flex; flex: 0 0 auto; height: 30px; justify-content: center; transition: transform 0.3s cubic-bezier( 0.4, 0, 0.2, 1 ); width: 30px; } .whiteboard-whiteboard-drawer-bar[aria-expanded="true"] .whiteboard-whiteboard-toggle-icon { transform: rotate( 180deg ); } .whiteboard-whiteboard-panel-backdrop { background: rgba( 15, 17, 23, 0.5 ); backdrop-filter: blur( 6px ); -webkit-backdrop-filter: blur( 6px ); bottom: 0; left: 0; opacity: 0; pointer-events: none; position: fixed; right: 0; top: 0; transition: opacity 0.35s ease; z-index: 115; } .whiteboard-whiteboard-panel-backdrop-visible { opacity: 1; pointer-events: auto; } .whiteboard-whiteboard-panel-header { align-items: center; background: #f8fafc; display: flex; justify-content: space-between; opacity: 0; padding: 10px 18px; pointer-events: none; position: relative; transition: opacity 0.3s ease; } .whiteboard-whiteboard-drawer-open .whiteboard-whiteboard-panel-header { border: 0; cursor: pointer; opacity: 1; pointer-events: auto; } .whiteboard-whiteboard-panel-header-text { align-items: center; display: flex; gap: 12px; } .whiteboard-whiteboard-panel-header-icon { align-items: center; background: linear-gradient( 135deg, var( --rtb-red ) 0%, #8f1622 100% ); border-radius: 999px; box-shadow: 0 6px 14px rgba( 200, 32, 47, 0.35 ); color: #ffffff; display: inline-flex; flex: 0 0 auto; font-size: 0.85rem; height: 32px; justify-content: center; width: 32px; } .whiteboard-whiteboard-panel-header h2 { color: var( --rtb-ink ); font-size: 1.05rem; font-weight: 900; letter-spacing: -0.03em; margin: 0; } .whiteboard-whiteboard-panel-close { align-items: center; background: rgba( 17, 24, 39, 0.05 ); border: 0; border-radius: 999px; color: var( --rtb-muted ); cursor: pointer; display: inline-flex; flex: 0 0 auto; height: 30px; justify-content: center; transition: background 0.15s ease, color 0.15s ease, transform 0.3s cubic-bezier( 0.4, 0, 0.2, 1 ); width: 30px; } .whiteboard-whiteboard-panel-close:hover, .whiteboard-whiteboard-panel-close:focus-visible { background: rgba( 17, 24, 39, 0.1 ); color: var( --rtb-ink ); outline: none; transform: translateY( 2px ); } .whiteboard-whiteboard-panel-body-wrap { flex: 1 1 auto; max-height: 0; overflow-y: auto; scrollbar-gutter: stable; transition: max-height 0.4s ease; } .whiteboard-whiteboard-drawer-open .whiteboard-whiteboard-panel-body-wrap { max-height: calc( 88vh - 62px ); max-height: calc( 88dvh - 62px ); } .whiteboard-whiteboard-panel-body { background: #f3f5f7; padding: 20px 22px 40px; } .whiteboard-whiteboard-panel-body .whiteboard-whiteboard { margin: 0 auto; max-width: 640px; } body.whiteboard-no-scroll { overflow: hidden; } .whiteboard-whiteboard { display: flex; flex-direction: column; gap: 18px; margin-top: 0; } .whiteboard-whiteboard-row { align-items: flex-start; background: #ffffff; border: 1px solid var( --rtb-border ); border-radius: 16px; box-shadow: 0 8px 18px rgba( 17, 17, 17, 0.04 ); display: grid; gap: 18px; grid-template-columns: minmax( 0, 1fr ) auto; grid-template-rows: auto 1fr; overflow: hidden; padding: 0; position: relative; } .whiteboard-whiteboard-row-compact { align-items: center; grid-template-columns: minmax( 0, 1fr ); } .whiteboard-wod-row { background: #f3f9ff; border-left: 4px solid var( --rtb-blue ); } .whiteboard-strength-row { background: #fffcf8; border-left: 4px solid #f59e0b; } .whiteboard-community-pr-row { background: #fbfaff; border-left: 4px solid #8b5cf6; } .whiteboard-community-pr-row .whiteboard-whiteboard-icon-inline { background: rgba( 139, 92, 246, 0.14 ); color: #6d28d9; } .whiteboard-community-custom-row { background: #fdfffe; border-left: 4px solid #2dd4bf; } .whiteboard-community-custom-row .whiteboard-whiteboard-icon-inline { background: rgba( 45, 212, 191, 0.14 ); color: #0d9488; } .whiteboard-whiteboard-icon-inline { align-items: center; border-radius: 999px; display: inline-flex; flex: 0 0 26px; font-size: 0.72rem; height: 26px; justify-content: center; width: 26px; } .whiteboard-wod-row .whiteboard-whiteboard-icon-inline { background: rgba( 255, 255, 255, 0.85 ); color: #2563eb; } .whiteboard-strength-row .whiteboard-whiteboard-icon-inline { background: #fffbeb; color: #b45309; } .whiteboard-whiteboard-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 2px 22px 22px; } .whiteboard-strength-row .whiteboard-whiteboard-main, .whiteboard-community-pr-row .whiteboard-whiteboard-main { display: grid; gap: 14px; } .whiteboard-whiteboard-name-line { align-items: center; display: flex; gap: 8px; grid-column: 1 / -1; min-width: 0; padding: 14px 22px; } .whiteboard-wod-row .whiteboard-whiteboard-name-line { background: var( --rtb-blue-soft ); border-bottom: 1px solid rgba( 45, 156, 219, 0.22 ); } .whiteboard-strength-row .whiteboard-whiteboard-name-line { background: var( --rtb-strength-soft ); border-bottom: 1px solid rgba( 255, 122, 89, 0.25 ); } .whiteboard-community-pr-row .whiteboard-whiteboard-name-line { background: rgba( 139, 92, 246, 0.1 ); border-bottom: 1px solid rgba( 139, 92, 246, 0.22 ); } .whiteboard-community-custom-row .whiteboard-whiteboard-name-line { background: rgba( 45, 212, 191, 0.1 ); border-bottom: 1px solid rgba( 45, 212, 191, 0.25 ); } .whiteboard-whiteboard-name { align-items: center; color: var( --rtb-ink ); display: inline-flex; font-size: 0.96rem; font-weight: 900; gap: 6px; line-height: 1.2; max-width: 100%; } .whiteboard-whiteboard-name > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .whiteboard-whiteboard-mine-check { align-items: center; background: #16a34a; border-radius: 999px; box-shadow: 0 5px 12px rgba( 22, 163, 74, 0.2 ); color: #ffffff; display: inline-flex; flex: 0 0 auto; font-size: 10px; height: 17px; justify-content: center; line-height: 1; margin-left: auto; width: 17px; } /* When the checkmark directly follows the timestamp (community feed), the timestamp already carries the margin-left:auto push - having both push at once splits the free space between them and opens a gap between the time and the checkmark instead of keeping them together. */ .whiteboard-community-item-time + .whiteboard-whiteboard-mine-check { margin-left: 0; } .whiteboard-whiteboard-score-block { align-items: flex-end; align-self: end; display: flex; flex-direction: column; gap: 3px; min-width: 82px; padding: 2px 22px 22px 0; text-align: right; } .whiteboard-whiteboard-meta { color: #334155; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.08em; line-height: 1; margin-top: 5px; text-transform: uppercase; white-space: nowrap; } .whiteboard-whiteboard-score { color: var( --rtb-red-text ); font-size: clamp( 1.45rem, 2.4vw, 2rem ); font-weight: 800; letter-spacing: -0.05em; line-height: 0.95; white-space: nowrap; } .whiteboard-strength-inline-score { color: #92400e; font-size: clamp( 1.15rem, 1.8vw, 1.65rem ); font-weight: 950; letter-spacing: -0.045em; line-height: 1.1; max-width: 100%; word-break: normal; } .whiteboard-strength-field-grid { display: grid; gap: 12px; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } .whiteboard-strength-field-grid > div { display: flex; flex-direction: column; gap: 10px; } .whiteboard-whiteboard-notes { align-items: flex-start; background: #f7f8fa; border-left: 2px solid rgba( 17, 24, 39, 0.14 ); border-radius: 0 10px 10px 0; color: #475569; display: flex; font-size: 0.82rem; font-weight: 700; gap: 8px; line-height: 1.35; order: 3; padding: 8px 10px; text-transform: none; } .whiteboard-whiteboard-notes i { color: var( --rtb-muted ); flex: 0 0 auto; font-size: 0.9rem; line-height: 1.2; margin-top: 1px; } .whiteboard-whiteboard-notes span { min-width: 0; overflow-wrap: anywhere; } /* Engagement bar (Hype + Comments) - a clear, full-width footer on every result card, shared between Today's whiteboard rows and the Community feed via WhiteboardUtils.renderEngagementBar() */ .whiteboard-engagement-bar { align-items: center; border-top: 1px solid var( --rtb-border ); display: flex; gap: 16px; grid-column: 1 / -1; margin-top: 16px; order: 3; padding: 16px 22px 22px; } .whiteboard-engagement-item-wrap { display: inline-flex; position: relative; } .whiteboard-engagement-item-wrap-right { margin-left: auto; } /* Mirrors .whiteboard-comment-reactions structure exactly: one bordered pill, fused (no gap) - the toggle on the left, and (only once there's at least one hype) a small count chip on the right sharing the same border instead of floating next to it as its own separate control. */ .whiteboard-hype-wrap { align-items: center; background: #ffffff; border: 1px solid rgba( 17, 24, 39, 0.12 ); border-radius: 999px; display: inline-flex; gap: 0; } .whiteboard-hype-button { align-items: center; background: transparent; border: 0; border-radius: 999px; color: var( --rtb-muted ); cursor: pointer; display: inline-flex; font-size: 0.78rem; font-weight: 800; gap: 6px; justify-content: center; min-height: 30px; padding: 4px 10px; transition: background 0.15s ease, color 0.15s ease; } /* Only squares off the inner edge when the count chip actually follows it (:last-child means there's no chip - your own hype but nobody else's - so it keeps the full pill shape instead of a stray flat edge). */ .whiteboard-hype-button:not(:last-child) { border-radius: 999px 0 0 999px; } .whiteboard-hype-button i { font-size: 0.95rem; } .whiteboard-hype-button span { font-size: 0.78rem; font-weight: 800; line-height: 1.2; } /* Small, neutral, and deliberately separate from the hype toggle it sits next to - tapping it only ever opens the "who hyped this" list, it never adds/removes your own hype the way the button beside it does. Sized and fused to match .whiteboard-comment-reaction-count exactly (same small number chip used for "who reacted" on comments), so the two "see who did this" affordances read as the same pattern everywhere. */ .whiteboard-hype-view-button { align-items: center; background: transparent; border: 0; border-left: 1px solid rgba( 17, 24, 39, 0.12 ); border-radius: 0 999px 999px 0; color: var( --rtb-muted ); cursor: pointer; display: inline-flex; flex: 0 0 auto; font-size: 0.76rem; font-weight: 800; justify-content: center; min-height: 30px; min-width: 28px; padding: 4px 8px 4px 7px; } .whiteboard-hype-view-button:hover, .whiteboard-hype-view-button:focus-visible { background: #f8fafc; color: var( --rtb-ink ); outline: none; } .whiteboard-engagement-item { align-items: center; background: transparent; border: 1px solid rgba( 17, 24, 39, 0.12 ); border-radius: 10px; color: var( --rtb-muted ); cursor: pointer; display: inline-flex; font-size: 0.9rem; font-weight: 800; gap: 9px; justify-content: center; padding: 11px 16px; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .whiteboard-engagement-item i { font-size: 0.95rem; } .whiteboard-engagement-item span { font-size: 0.9rem; font-weight: 800; line-height: 1.2; } .whiteboard-engagement-item:hover, .whiteboard-engagement-item:focus-visible { background: #f8fafc; border-color: rgba( 17, 24, 39, 0.2 ); color: var( --rtb-ink ); outline: none; } .whiteboard-engagement-static { cursor: pointer; } .whiteboard-hype-button:hover, .whiteboard-hype-button:focus { background: rgba( 17, 24, 39, 0.05 ); color: var( --rtb-ink ); } .whiteboard-hype-button:disabled { cursor: wait; opacity: 0.7; } /* One consistent hype treatment everywhere the engagement bar appears: the icon is yellow by default (a hype control exists here) and turns red once it's actually happened - either you've hyped it yourself (the real toggle button, .whiteboard-hype-button-active) or someone else has, on your own posts where the static "N Hypes" readout carries the count instead (.whiteboard-hype-count-button-has-hypes). The label text stays neutral grey either way except when hyped, where it goes red too. No more separate amber/purple/teal per row type - red always means "yes, hyped" regardless of what kind of post it is. */ .whiteboard-hype-button i, .whiteboard-engagement-static.whiteboard-hype-count-button i { color: #eab308; } .whiteboard-hype-button-active, .whiteboard-engagement-static.whiteboard-hype-count-button-has-hypes { color: var( --rtb-red-text ); } .whiteboard-hype-button-active i, .whiteboard-engagement-static.whiteboard-hype-count-button-has-hypes i { color: var( --rtb-red-text ); } .whiteboard-comment-toggle-button:hover, .whiteboard-comment-toggle-button:focus-visible { background: #eff6ff; border-color: rgba( 37, 99, 235, 0.28 ); color: #1d4ed8; } /* iOS-style overlay badges for the hype/comment counts - sit on the button's top-right corner rather than as an adjacent oval, and the number is guaranteed centered via flex + line-height:1 regardless of digit count. */ .whiteboard-engagement-badge { align-items: center; border: 2px solid #ffffff; border-radius: 999px; box-shadow: 0 2px 5px rgba( 17, 24, 39, 0.18 ); display: inline-flex; font-size: 0.68rem; font-weight: 900; height: 20px; justify-content: center; line-height: 1; min-width: 20px; padding: 0 4px; position: absolute; right: -8px; top: -8px; } .whiteboard-hype-count-button { cursor: pointer; font-family: inherit; } .whiteboard-hype-count-button:hover, .whiteboard-hype-count-button:focus-visible, .whiteboard-hype-button:hover, .whiteboard-hype-button:focus-visible { filter: brightness( 0.92 ); outline: none; } .whiteboard-hype-count-button::after, .whiteboard-hype-button::after { background: #111827; border-radius: 12px; bottom: calc( 100% + 10px ); box-shadow: 0 14px 30px rgba( 15, 23, 42, 0.18 ); color: #ffffff; content: attr( data-hype-tooltip ); font-size: 0.78rem; font-weight: 800; left: 0; line-height: 1.25; max-width: min( 320px, calc( 100vw - 32px ) ); opacity: 0; padding: 9px 11px; pointer-events: none; position: absolute; text-transform: none; transform: translateY( 4px ); transition: opacity 150ms ease, transform 150ms ease; overflow-wrap: normal; white-space: nowrap; z-index: 20; } .whiteboard-hype-count-button:hover::after, .whiteboard-hype-count-button:focus-visible::after, .whiteboard-hype-button:hover::after, .whiteboard-hype-button:focus-visible::after { opacity: 1; transform: translateY( 0 ); } /* The "N Hypes" readout shown on your own posts - same bordered pill shape/size as the real Hype toggle on everyone else's posts (matching .whiteboard-hype-button exactly), so the two read as the same control everywhere, whether or not there's actually a toggle behind it. Higher specificity than the red/amber/purple/teal .whiteboard-hype-count-button badge rules above so it doesn't inherit their solid fill colors. */ .whiteboard-engagement-item.whiteboard-engagement-static.whiteboard-hype-count-button { background: #ffffff; border: 1px solid rgba( 17, 24, 39, 0.12 ); border-radius: 999px; color: var( --rtb-muted ); cursor: pointer; font-family: inherit; font-size: 0.78rem; font-weight: 800; min-height: 30px; padding: 4px 10px; } .whiteboard-engagement-item.whiteboard-engagement-static.whiteboard-hype-count-button span { font-size: 0.78rem; font-weight: 800; line-height: 1.2; } .whiteboard-engagement-item.whiteboard-engagement-static.whiteboard-hype-count-button-has-hypes { color: var( --rtb-red-text ); } .whiteboard-engagement-item.whiteboard-engagement-static.whiteboard-hype-count-button:hover, .whiteboard-engagement-item.whiteboard-engagement-static.whiteboard-hype-count-button:focus-visible { background: #f8fafc; border-color: rgba( 17, 24, 39, 0.2 ); outline: none; } .whiteboard-comment-toggle-count { background: #2563eb; color: #ffffff; cursor: default; } /* Hype modal */ .whiteboard-hype-modal { align-items: center; display: flex; inset: 0; justify-content: center; padding: 18px; position: fixed; z-index: 500; } .whiteboard-hype-modal.d-none { display: none !important; } .whiteboard-hype-modal-backdrop { backdrop-filter: blur( 8px ); background: rgba( 15, 23, 42, 0.58 ); inset: 0; position: absolute; } .whiteboard-hype-modal-card { background: linear-gradient( 180deg, #ffffff 0%, #f8fafc 100% ); border: 1px solid rgba( 255, 255, 255, 0.7 ); border-radius: 30px; max-width: 480px; overflow: hidden; position: relative; width: min( 100%, 480px ); } .whiteboard-hype-modal-card::before { background: linear-gradient( 90deg, var( --rtb-red ), #f59e0b ); content: ""; height: 5px; inset: 0 0 auto; position: absolute; z-index: 2; } .whiteboard-hype-modal-glow { background: radial-gradient( circle, rgba( 214, 31, 38, 0.18 ) 0%, rgba( 245, 158, 11, 0.1 ) 38%, transparent 70% ); filter: blur( 2px ); height: 180px; position: absolute; right: -74px; top: -94px; width: 180px; } .whiteboard-hype-modal-header { align-items: center; display: flex; gap: 14px; padding: 30px 68px 22px 24px; position: relative; } .whiteboard-hype-modal-icon, .whiteboard-hype-modal-person-icon, .whiteboard-hype-modal-empty-icon { align-items: center; background: linear-gradient( 135deg, var( --rtb-red ), #f59e0b ); color: #ffffff; display: inline-flex; justify-content: center; } .whiteboard-hype-modal-icon { border-radius: 18px; font-size: 1.25rem; height: 54px; width: 54px; } .whiteboard-hype-modal-heading { align-items: center; display: flex; gap: 14px; min-width: 0; } .whiteboard-hype-modal-kicker { color: var( --rtb-red-text ); display: block; font-size: 0.72rem; font-weight: 950; letter-spacing: 0.08em; line-height: 1; margin-bottom: 7px; text-transform: uppercase; } .whiteboard-hype-modal-header h2 { color: #111827; font-size: 1.9rem; font-weight: 950; letter-spacing: -0.06em; line-height: 0.95; margin: 0; } .whiteboard-hype-modal-subtitle { color: #64748b; font-size: 0.9rem; font-weight: 750; line-height: 1.35; margin: 8px 0 0; } .whiteboard-hype-modal-count { align-items: center; background: rgba( 214, 31, 38, 0.08 ); border: 1px solid rgba( 214, 31, 38, 0.16 ); border-radius: 999px; color: var( --rtb-red-text ); display: inline-flex; font-size: 0.82rem; font-weight: 950; gap: 6px; justify-content: center; line-height: 1; padding: 9px 11px; } .whiteboard-hype-modal-close { align-items: center; background: rgba( 255, 255, 255, 0.92 ); border: 1px solid rgba( 15, 23, 42, 0.1 ); border-radius: 999px; color: #334155; cursor: pointer; display: inline-flex; height: 42px; justify-content: center; position: absolute; right: 18px; top: 18px; transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease; width: 42px; z-index: 3; } .whiteboard-hype-modal-close:hover, .whiteboard-hype-modal-close:focus-visible { background: var( --rtb-red ); border-color: var( --rtb-red ); color: #ffffff; outline: none; transform: translateY( -1px ); } .whiteboard-hype-modal-list { display: flex; flex-direction: column; gap: 10px; padding: 0 18px 20px; } .whiteboard-custom-workout-modal-card { max-width: 560px; width: min( 100%, 560px ); } .whiteboard-custom-workout-modal-icon { background: linear-gradient( 135deg, #2dd4bf, #0d9488 ) !important; } .whiteboard-custom-workout-modal-body { padding: 0 22px 24px; } .whiteboard-custom-workout-modal-score { color: var( --rtb-ink ); font-size: 1.5rem; font-weight: 900; letter-spacing: -0.03em; margin: 0 0 14px; } .whiteboard-custom-workout-modal-description { color: var( --rtb-ink ); font-size: 0.98rem; line-height: 1.6; margin: 0; white-space: pre-line; } .whiteboard-custom-workout-modal-empty { color: var( --rtb-muted ); font-size: 0.94rem; font-style: italic; margin: 0; } .whiteboard-hype-modal-person { align-items: center; background: #ffffff; border: 1px solid rgba( 15, 23, 42, 0.08 ); border-radius: 20px; display: flex; gap: 13px; padding: 12px; } .whiteboard-hype-modal-person-icon { border-radius: 15px; flex: 0 0 auto; font-size: 0.95rem; height: 42px; width: 42px; } .whiteboard-hype-modal-person-main { align-items: center; display: flex; flex: 1 1 auto; gap: 12px; min-width: 0; } .whiteboard-hype-modal-person-main div { display: flex; flex: 1 1 auto; flex-direction: column; gap: 4px; min-width: 0; } .whiteboard-hype-modal-person-main em { color: #64748b; font-size: 0.78rem; font-style: normal; font-weight: 850; line-height: 1; } .whiteboard-hype-modal-person-main div span { color: #111827; font-size: 1rem; font-weight: 950; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .whiteboard-hype-modal-person-main small { color: #64748b; font-size: 0.8rem; font-weight: 850; line-height: 1; white-space: nowrap; } .whiteboard-hype-modal-empty { align-items: center; background: #ffffff; border: 1px dashed rgba( 214, 31, 38, 0.28 ); border-radius: 22px; color: #64748b; display: flex; flex-direction: column; gap: 7px; padding: 28px 18px; text-align: center; } .whiteboard-hype-modal-empty-icon { border-radius: 18px; font-size: 1.1rem; height: 50px; margin-bottom: 4px; width: 50px; } .whiteboard-hype-modal-empty strong { color: #111827; font-size: 1.05rem; font-weight: 950; letter-spacing: -0.03em; } .whiteboard-hype-modal-empty span:not( .whiteboard-hype-modal-empty-icon ) { font-size: 0.9rem; font-weight: 750; } /* ============================================================ Workout Calendar Screen ============================================================ */ .whiteboard-calendar-layout { display: grid; gap: 18px; } .whiteboard-calendar-toolbar { align-items: center; display: flex; gap: 18px; justify-content: space-between; } .whiteboard-calendar-toolbar-main { align-items: center; display: flex; gap: 14px; } .whiteboard-calendar-toolbar-main h2 { color: var( --rtb-ink ); font-size: clamp( 1.5rem, 3vw, 2.1rem ); letter-spacing: -0.045em; line-height: 1; margin: 0 0 4px; } .whiteboard-calendar-nav { border-radius: 999px; height: 44px; margin: 0; padding: 0; width: 44px; } .whiteboard-calendar-filters { align-items: end; display: flex; gap: 12px; } .whiteboard-calendar-filters .whiteboard-calendar-control-group { min-width: 230px; } .whiteboard-calendar-control-group { display: flex; flex: 1 1 auto; flex-direction: column; gap: 8px; } .whiteboard-calendar-today { margin: 0; min-height: 48px; } .whiteboard-calendar-card { overflow: hidden; padding: 0; } .whiteboard-calendar-weekdays, .whiteboard-calendar-grid { display: grid; grid-template-columns: repeat( 7, minmax( 0, 1fr ) ); } .whiteboard-calendar-weekdays { background: #111827; color: #ffffff; } .whiteboard-calendar-weekdays span { font-size: 0.74rem; font-weight: 900; letter-spacing: 0.12em; padding: 12px 10px; text-align: center; text-transform: uppercase; } .whiteboard-calendar-day { background: #ffffff; border-right: 1px solid var( --rtb-border ); border-top: 1px solid var( --rtb-border ); min-height: 148px; padding: 10px; } .whiteboard-calendar-day:nth-child( 7n ) { border-right: 0; } .whiteboard-calendar-day-muted { background: #f8fafc; color: #94a3b8; } .whiteboard-calendar-day-today { background: #eff6ff; box-shadow: inset 0 0 0 2px rgba( 45, 156, 219, 0.32 ); } .whiteboard-calendar-day-number { align-items: center; background: #f1f5f9; border-radius: 999px; color: #111827; display: inline-flex; font-size: 0.82rem; font-weight: 900; height: 28px; justify-content: center; margin-bottom: 8px; width: 28px; } .whiteboard-calendar-day-today .whiteboard-calendar-day-number { background: var( --rtb-blue ); color: #ffffff; } .whiteboard-calendar-workouts { display: grid; gap: 7px; } .whiteboard-calendar-workout { background: #f8fafc; border: 1px solid rgba( 15, 23, 42, 0.08 ); border-left: 3px solid var( --rtb-blue ); border-radius: 10px; display: block; padding: 8px 9px; text-decoration: none; transition: background 0.2s ease, transform 0.2s ease; } .whiteboard-calendar-workout:hover, .whiteboard-calendar-workout:focus { background: #ffffff; box-shadow: 0 10px 22px rgba( 15, 23, 42, 0.1 ); outline: none; transform: translateY( -1px ); } .whiteboard-calendar-workout > span { color: var( --rtb-muted ); display: block; font-size: 0.66rem; font-weight: 900; letter-spacing: 0.08em; line-height: 1; text-transform: uppercase; } .whiteboard-calendar-workout strong { color: var( --rtb-ink ); display: block; font-size: 0.82rem; font-weight: 850; line-height: 1.2; } .whiteboard-calendar-workout-bootcamp { border-left-color: var( --rtb-red ); } .whiteboard-calendar-workout-strength { border-left-color: var( --rtb-strength ); } .whiteboard-calendar-workout-olympic_weightlifting { border-left-color: var( --rtb-oly ); } .whiteboard-calendar-workout-gymnastics { border-left-color: var( --rtb-gymnastics ); } .whiteboard-calendar-workout-flash { border-left-color: var( --rtb-flash ); } .whiteboard-calendar-workout-logged { background: #f0fdf4; border-color: rgba( 22, 163, 74, 0.28 ); } .whiteboard-calendar-result-indicator { align-items: center; color: var( --rtb-go ); display: inline-flex; flex-wrap: nowrap; font-size: 0.68rem; font-style: normal; font-weight: 950; gap: 6px; justify-content: space-between; letter-spacing: 0.08em; line-height: 1; margin-top: 7px; text-transform: uppercase; white-space: nowrap; } .whiteboard-calendar-result-indicator span { color: inherit; display: inline; font-size: inherit; font-weight: inherit; letter-spacing: inherit; line-height: 1; margin: 0; text-transform: inherit; } .whiteboard-calendar-result-indicator i, .whiteboard-calendar-logged-check, .whiteboard-calendar-logged-icon { display: inline-flex; font-size: 0.78rem; height: auto; line-height: 1; margin: 0; width: auto; } .whiteboard-calendar-logged-check { color: #16a34a; } .whiteboard-calendar-logged-icon-strength { color: #b45309; } .whiteboard-calendar-logged-icon-wod { color: #2563eb; } .whiteboard-calendar-empty-dot { background: rgba( 15, 23, 42, 0.07 ); border-radius: 999px; height: 5px; margin-top: 8px; width: 5px; } /* ============================================================ Workout History Screen ============================================================ */ .whiteboard-history-layout { padding-bottom: 48px; } .whiteboard-history-controls { align-items: flex-end; display: flex; gap: 16px; margin-bottom: 24px; } .whiteboard-history-control-group { display: flex; flex: 1 1 auto; flex-direction: column; gap: 8px; } .whiteboard-history-button { flex: 0 0 auto; margin-top: 0; min-height: 48px; } .whiteboard-history-list { display: grid; gap: 18px; grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); } .whiteboard-history-card { color: inherit; display: block; padding: 22px; text-decoration: none; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .whiteboard-history-card:hover, .whiteboard-history-card:focus { border-color: rgba( 15, 23, 42, 0.16 ); box-shadow: var( --rtb-shadow-hover ); color: inherit; transform: translateY( -2px ); } .whiteboard-history-card-top { align-items: center; display: flex; gap: 10px; justify-content: space-between; margin-bottom: 18px; } .whiteboard-history-card h2 { color: var( --rtb-ink ); font-size: 1.25rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1.15; margin: 0 0 10px; } .whiteboard-history-card p { color: var( --rtb-muted ); font-size: 0.95rem; font-weight: 700; margin: 0; } .whiteboard-history-empty { color: var( --rtb-muted ); font-size: 1rem; font-weight: 800; grid-column: 1 / -1; text-align: center; } .whiteboard-history-pagination { align-items: center; border-top: 1px solid rgba( 15, 23, 42, 0.08 ); display: flex; justify-content: center; margin-top: 8px; padding: 20px 24px 24px; } .whiteboard-history-pagination .whiteboard-button { margin-top: 0; } /* ============================================================ Profile / My Results Screen ============================================================ */ .whiteboard-profile-layout { box-sizing: border-box; padding-bottom: 48px; } .whiteboard-profile-window-header h2 { align-items: center; display: flex; font-size: clamp( 1.25rem, 2vw, 1.65rem ); gap: 10px; letter-spacing: -0.03em; margin: 0 0 4px; } .whiteboard-profile-results-count { background: rgba( 17, 24, 39, 0.06 ); border-radius: 999px; color: var( --rtb-navy ); font-size: 0.78rem; font-weight: 900; padding: 3px 11px; } .whiteboard-profile-controls { align-items: end; background: #ffffff; border-bottom: 1px solid rgba( 15, 23, 42, 0.08 ); display: grid; gap: 12px; grid-template-columns: minmax( 240px, 1.45fr ) repeat( 3, minmax( 150px, 1fr ) ); padding: 22px 24px; } .whiteboard-profile-window-header, .whiteboard-profile-password-header, .whiteboard-whiteboard-card-header { background: linear-gradient( 135deg, #ffffff 0%, #fff6f6 62%, #f3f8ff 100% ); border-bottom: 1px solid rgba( 15, 23, 42, 0.08 ); color: #101827; padding: 24px 26px; } .whiteboard-whiteboard-card-header { margin: -24px -24px 20px; } .whiteboard-profile-window-header h2, .whiteboard-profile-password-header h2 { color: #101827; } .whiteboard-profile-window-header .whiteboard-muted, .whiteboard-profile-password-header .whiteboard-muted { color: #4b5563; } .whiteboard-profile-results-window, .whiteboard-profile-password-card, .whiteboard-profile-password-details, .whiteboard-profile-import-card { border-radius: 18px; overflow: hidden; padding: 0; } .whiteboard-profile-results-window .whiteboard-alert { margin: 20px 24px; max-width: none; } .whiteboard-profile-results { background: #f8fafc; display: flex; flex-direction: column; gap: 0; padding: 0; } .whiteboard-result-card { align-items: stretch; background: #ffffff; border: 0; border-bottom: 1px solid rgba( 15, 23, 42, 0.08 ); border-radius: 0; box-shadow: none; display: grid; gap: 22px; grid-template-columns: minmax( 0, 1fr ) auto; padding: 24px; position: relative; } .whiteboard-result-card:last-child { border-bottom: 0; } .whiteboard-result-card:hover { background: #fcfcfd; } .whiteboard-result-card-linked { color: inherit; cursor: pointer; text-decoration: none; } .whiteboard-result-card-strength { border-left: 4px solid #f59e0b; } .whiteboard-result-card-wod { border-left: 4px solid var( --rtb-blue ); } .whiteboard-result-card-custom { border-left: 4px solid #2dd4bf; } .whiteboard-result-card-strength .whiteboard-result-card-score span { color: #92400e; font-size: clamp( 1.1rem, 1.6vw, 1.45rem ); line-height: 1.1; max-width: 360px; white-space: normal; } .whiteboard-result-card-main { min-width: 0; } .whiteboard-result-card-top { align-items: center; display: flex; gap: 10px; margin-bottom: 14px; } .whiteboard-result-card h2 { color: var( --rtb-ink ); font-size: 1.25rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1.18; margin: 0 0 8px; } .whiteboard-result-card-meta { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .whiteboard-result-card-meta span { background: #f1f5f9; border: 1px solid var( --rtb-border ); border-radius: 999px; color: #475569; font-size: 0.76rem; font-weight: 900; letter-spacing: 0.05em; padding: 0.4rem 0.65rem; text-transform: uppercase; } .whiteboard-result-notes { background: #ffffff; border: 1px solid var( --rtb-border ); border-radius: var( --rtb-radius-sm ); color: #475569; font-size: 0.95rem; line-height: 1.5; margin: 14px 0 0; padding: 12px 14px; } .whiteboard-result-notes strong { color: var( --rtb-ink ); font-weight: 900; } .whiteboard-result-private-notes { background: #fff7ed; border-color: #fed7aa; color: #9a3412; } .whiteboard-result-card-score { align-items: flex-end; display: flex; flex: none; flex-direction: column; justify-content: center; min-width: 120px; text-align: right; } .whiteboard-result-card-score span { color: var( --rtb-ink ); font-size: 2rem; font-weight: 900; letter-spacing: -0.04em; line-height: 1; } .whiteboard-result-card-score small { color: var( --rtb-muted ); font-size: 0.76rem; font-weight: 900; letter-spacing: 0.08em; margin-top: 6px; text-transform: uppercase; } .whiteboard-result-card-link { align-items: center; background: #ffffff; border: 1px solid rgba( 15, 23, 42, 0.12 ); border-radius: 999px; box-shadow: 0 8px 16px rgba( 15, 23, 42, 0.08 ); color: var( --rtb-black ); cursor: pointer; display: inline-flex; font: inherit; font-size: 0.82rem; font-weight: 900; height: 34px; justify-content: center; margin-top: 14px; padding: 0; text-decoration: none; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; width: 34px; } .whiteboard-result-card-link:hover, .whiteboard-result-card-link:focus { background: var( --rtb-black ); border-color: var( --rtb-black ); color: #ffffff; transform: translateY( -1px ); } .whiteboard-result-kind-custom { background: rgba( 45, 212, 191, 0.14 ); border: 1px solid rgba( 45, 212, 191, 0.3 ); color: #0f766e; } .whiteboard-profile-empty { text-align: center; } .whiteboard-profile-empty h2 { color: var( --rtb-ink ); font-size: 1.6rem; font-weight: 900; margin: 0 0 8px; } .whiteboard-profile-empty p { color: var( --rtb-muted ); font-size: 1rem; margin: 0 0 18px; } /* "My result" card (Today screen sidebar) - final treatment has the delete control as a small absolute circle, buttons stacked full-width beneath */ .whiteboard-my-result { background: #f8fafc; border: 1px solid rgba( 15, 23, 42, 0.08 ); border-radius: 18px; margin-top: 18px; padding: 16px; position: relative; } .whiteboard-my-result span { color: #64748b; display: block; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.08em; margin-bottom: 6px; text-transform: uppercase; } .whiteboard-my-result strong { color: #0f172a; display: block; font-size: 1.35rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1.1; } .whiteboard-my-result p { color: #64748b; font-size: 0.9rem; font-weight: 700; line-height: 1.4; margin: 8px 0 0; } .whiteboard-result-actions { align-items: stretch; display: flex; flex-direction: column; gap: 10px; margin-top: 20px; } .whiteboard-result-actions .whiteboard-button { margin-top: 0; max-width: none; width: 100%; } .whiteboard-delete-result-button { align-items: center; background: transparent; border: 0; box-shadow: none; color: rgba( 198, 40, 50, 0.58 ); cursor: pointer; display: inline-flex; font-size: 0; height: 24px; justify-content: center; line-height: 1; margin: 0; min-height: 0; padding: 3px; position: absolute; right: 12px; top: 12px; width: 24px; } .whiteboard-delete-result-button span { align-items: center; background: transparent; border: 1px solid rgba( 198, 40, 50, 0.18 ); border-radius: 999px; color: inherit; display: inline-flex; font-size: 0.82rem; font-weight: 700; height: 17px; justify-content: center; line-height: 1; width: 17px; } .whiteboard-delete-result-button:hover, .whiteboard-delete-result-button:focus { color: var( --rtb-red-dark ); outline: none; } .whiteboard-delete-result-button:hover span, .whiteboard-delete-result-button:focus span { background: rgba( 198, 40, 50, 0.05 ); border-color: rgba( 198, 40, 50, 0.36 ); } /* ============================================================ Profile Password ============================================================ */ .whiteboard-profile-password-card { margin-bottom: 24px; } .whiteboard-profile-import-card { margin-bottom: 24px; } .whiteboard-profile-import-card > .whiteboard-import-notes { margin: 24px 26px 0; } .whiteboard-profile-import-card > form { margin-top: 20px; } .whiteboard-profile-import-card .whiteboard-profile-control-group { margin: 0 26px; } .whiteboard-profile-import-card > .whiteboard-form-message, .whiteboard-profile-import-card form > .whiteboard-form-message { margin: 12px 26px 0; } .whiteboard-profile-import-card > .whiteboard-import-summary { margin: 20px 26px 26px; } /* Button row styled and positioned like a modal footer: a hairline separator that spans the full card width, with the action right- aligned - rather than sitting inline with the form like a plain field. */ .whiteboard-profile-import-card .whiteboard-form-actions { border-top: 1px solid rgba( 15, 23, 42, 0.08 ); justify-content: flex-end; margin-top: 20px; padding: 16px 26px 26px; } .whiteboard-profile-import-card .whiteboard-form-actions .whiteboard-button { margin-top: 0; } .whiteboard-import-notes { background: #f8fafc; border-radius: 12px; color: var( --rtb-muted ); font-size: 0.88rem; line-height: 1.5; margin: 0; padding: 16px 35px; } .whiteboard-import-notes li { margin-bottom: 6px; } .whiteboard-import-notes li:last-child { margin-bottom: 0; } .whiteboard-import-summary { background: #f8fafc; border-radius: 12px; font-size: 0.9rem; line-height: 1.6; padding: 18px 20px; } .whiteboard-import-summary h3 { color: var( --rtb-ink ); font-size: 1rem; font-weight: 900; margin: 0 0 10px; } .whiteboard-import-summary ul { margin: 0; padding-left: 20px; } .whiteboard-import-summary-errors { color: var( --rtb-muted ); font-size: 0.82rem; margin-top: 12px; max-height: 200px; overflow-y: auto; } #profile-account-tab, #profile-import-tab { align-items: start; display: grid; gap: 32px; grid-template-columns: 1fr 1fr; } #profile-import-tab .whiteboard-profile-import-card { margin-bottom: 0; } #profile-account-tab .whiteboard-profile-password-card { margin-bottom: 0; } #profile-account-tab .whiteboard-profile-avatar-card { order: 2; } #profile-account-tab .whiteboard-profile-password-card:not( .whiteboard-profile-avatar-card ) { order: 1; } /* Photo and Account Details are meant to sit side by side as the grid's only two order:1/order:2 items (Sign Out also matches the order:1 selector above, but it's whiteboard-app-only - display:none on the website - so it never actually occupies a grid cell there). Adding this card without its own rule would've made it a third order:1 item, splitting the Photo+Details pair across two rows instead - explicit grid-column: 1 / -1 keeps it full-width and out of that pairing altogether, and order: 3 keeps it visually below both. */ #profile-account-tab .whiteboard-profile-password-card.whiteboard-profile-notifications-card { grid-column: 1 / -1; order: 3; } #profile-account-tab .whiteboard-profile-password-card.whiteboard-profile-signout-card { grid-column: 1 / -1; order: 4; } #profile-account-tab .whiteboard-profile-password-card.whiteboard-profile-deletion-card { grid-column: 1 / -1; order: 5; } .whiteboard-profile-deletion-card .whiteboard-profile-password-header { background: linear-gradient( 135deg, rgba( 214, 31, 38, 0.1 ) 0%, rgba( 214, 31, 38, 0.03 ) 100% ); } .whiteboard-profile-deletion-card .whiteboard-profile-password-header h2 { color: var( --rtb-red-text ); } .whiteboard-profile-deletion-body { color: var( --rtb-muted ); font-size: 0.9rem; line-height: 1.55; padding: 22px 26px; } .whiteboard-profile-deletion-body p { margin: 0; } .whiteboard-profile-deletion-body p + p { margin-top: 10px; } .whiteboard-profile-deletion-body strong { color: var( --rtb-ink ); } .whiteboard-profile-deletion-body .whiteboard-form-message { margin-top: 14px; } .whiteboard-profile-notifications-form { display: flex; flex-direction: column; gap: 12px; padding: 24px 26px; } .whiteboard-profile-notifications-form .whiteboard-checkbox-row { display: flex; width: 100%; } .whiteboard-profile-notifications-form .whiteboard-form-message { margin: 0; } .whiteboard-native-push-setting { align-items: center; border-top: 1px solid var(--whiteboard-border, #e5e7eb); display: flex; gap: 16px; justify-content: space-between; margin-top: 18px; padding-top: 18px; } .whiteboard-native-push-setting > div { display: grid; gap: 3px; } .whiteboard-native-push-setting .whiteboard-muted { display: block; } .whiteboard-profile-notifications-card > .whiteboard-form-actions { margin-top: 0; } @media ( max-width: 767.98px ) { #profile-account-tab, #profile-import-tab { grid-template-columns: 1fr; } #profile-account-tab .whiteboard-profile-avatar-card, #profile-account-tab .whiteboard-profile-password-card:not( .whiteboard-profile-avatar-card ) { order: initial; } } .whiteboard-profile-avatar-row { align-items: center; display: flex; flex-wrap: wrap; gap: 20px; margin: 20px 26px 26px; } .whiteboard-profile-avatar-preview img, .whiteboard-profile-avatar-preview .whiteboard-avatar { box-shadow: 0 8px 20px rgba( 17, 24, 39, 0.14 ); } .whiteboard-profile-avatar-actions { display: flex; flex-wrap: wrap; gap: 10px; } .whiteboard-profile-avatar-actions label.whiteboard-button { cursor: pointer; margin-top: 0; } .whiteboard-profile-avatar-actions .whiteboard-button { margin-top: 0; } .whiteboard-profile-password-details { background: #ffffff; border: 1px solid rgba( 15, 23, 42, 0.08 ); box-shadow: 0 12px 30px rgba( 15, 23, 42, 0.06 ); margin-bottom: 24px; } .whiteboard-profile-password-details[open] { padding-bottom: 24px; } .whiteboard-profile-password-summary { align-items: center; cursor: pointer; display: flex; gap: 18px; justify-content: space-between; list-style: none; padding: 22px 24px; } .whiteboard-profile-password-summary::-webkit-details-marker { display: none; } .whiteboard-profile-password-header h2, .whiteboard-profile-password-summary h2 { font-size: 1.35rem; font-weight: 900; letter-spacing: -0.03em; margin: 0 0 6px; } .whiteboard-profile-password-toggle-icon { align-items: center; background: #f8fafc; border: 1px solid rgba( 15, 23, 42, 0.1 ); border-radius: 999px; display: inline-flex; flex: 0 0 auto; height: 38px; justify-content: center; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; width: 38px; } .whiteboard-profile-password-summary:hover .whiteboard-profile-password-toggle-icon, .whiteboard-profile-password-summary:focus .whiteboard-profile-password-toggle-icon { background: var( --rtb-black ); border-color: var( --rtb-black ); color: #ffffff; } .whiteboard-profile-password-details[open] .whiteboard-profile-password-toggle-icon { background: var( --rtb-black ); border-color: var( --rtb-black ); color: #ffffff; } .whiteboard-profile-password-toggle-icon i { font-size: 0.9rem; transition: transform 0.2s ease; } .whiteboard-profile-password-details[open] .whiteboard-profile-password-toggle-icon i { transform: rotate( 180deg ); } .whiteboard-profile-password-form { display: flex; flex-direction: column; gap: 16px; margin: 0 26px; padding-bottom: 26px; padding-top: 24px; } /* Action button lives outside the (inset) form as a sibling of the card's header, the same way a modal separates its scrollable body from a fixed, bordered footer - so the footer can span the full card width without fighting the form's own side margins. */ .whiteboard-profile-password-card > .whiteboard-form-actions { border-top: 1px solid rgba( 15, 23, 42, 0.08 ); justify-content: flex-end; padding: 16px 26px 26px; } .whiteboard-profile-password-card > .whiteboard-form-actions .whiteboard-button { margin-top: 0; } /* This border-top is meant to separate the button row from a form's worth of content sitting above it (Account Details, Change Password, etc.) - it assumes something with its own bottom margin/padding sits between the header and this row. The App Settings card (Help & Feedback / Dark Mode / Sign Out on the app) has no such content - its button rows sit directly under the header, so this border-top landed right on top of the header's own border-bottom, ~4px away (the .whiteboard-form-actions base rule's margin-top), reading as a stray doubled hairline instead of one clean divider. Suppressed only where a .whiteboard-form-actions is the header's very next sibling. */ .whiteboard-profile-password-header + .whiteboard-form-actions { border-top: 0; margin-top: 0; padding-top: 20px; } .whiteboard-profile-password-grid { display: grid; gap: 16px; grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); } .whiteboard-profile-account-grid { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } .whiteboard-profile-account-grid .whiteboard-profile-control-group:last-child { grid-column: 1 / -1; } .whiteboard-profile-password-form .whiteboard-button { align-self: flex-start; margin-top: 0; } .whiteboard-profile-password-form .whiteboard-input-wrap { background: #ffffff; border: 1px solid var( --rtb-border-strong ); border-radius: 14px; overflow: hidden; width: 100%; } .whiteboard-profile-password-form .whiteboard-input-wrap:focus-within { border-color: var( --rtb-focus-border ); box-shadow: 0 0 0 4px var( --rtb-focus ); } .whiteboard-profile-password-form .whiteboard-input-wrap input, .whiteboard-profile-password-form .whiteboard-input-wrap input:focus { background: transparent; border: 0; border-radius: 0; box-shadow: none; min-height: 48px; outline: none; padding-right: 58px; } /* ============================================================ Login / Register / Forgot Password (Auth) ============================================================ */ .whiteboard-auth-page .whiteboard-main { justify-content: center; padding: 24px 0; } .whiteboard-auth-layout, .whiteboard-login-layout { align-items: center; display: flex; flex: 1 0 auto; flex-direction: column; gap: clamp( 28px, 5vh, 48px ); justify-content: center; max-width: none; min-height: calc( 100vh - 120px ); padding: clamp( 28px, 5vh, 64px ) 24px 48px; width: 100%; } .whiteboard-auth-logo { display: block; filter: drop-shadow( 0 12px 28px rgba( 0, 0, 0, 0.24 ) ); height: auto; margin: 0 auto 4px; max-width: min( 360px, 70vw ); object-fit: contain; width: auto; } .whiteboard-auth-card, .whiteboard-login-card { border-radius: 18px; max-width: 560px; padding: 38px 34px 0; width: 100%; } .whiteboard-auth-header, .whiteboard-login-header { border-bottom: 1px solid var( --rtb-border ); margin: 0 -34px 28px; padding: 0 34px 28px; text-align: center; } .whiteboard-auth-header h1, .whiteboard-login-header h1 { font-size: clamp( 2.1rem, 4vw, 3rem ); letter-spacing: -0.055em; line-height: 1.05; margin: 0; } .whiteboard-auth-kicker, .whiteboard-auth-header .lead, .whiteboard-login-header .lead { display: none; } .whiteboard-auth-form, .whiteboard-login-form { display: grid; gap: 18px; } .whiteboard-auth-name-grid { display: grid; gap: 16px; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } .whiteboard-field-group { display: grid; gap: 7px; } .whiteboard-input-wrap { align-items: center; background: #f3f6fb; border: 1px solid rgba( 15, 23, 42, 0.11 ); border-radius: 12px; display: flex; min-height: 44px; overflow: hidden; transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } .whiteboard-input-wrap:focus-within { background: #ffffff; border-color: rgba( 45, 156, 219, 0.5 ); box-shadow: 0 0 0 4px rgba( 45, 156, 219, 0.12 ); } .whiteboard-input-icon { align-items: center; color: #667085; display: inline-flex; justify-content: center; padding-left: 14px; width: 36px; } .whiteboard-input-wrap input, .whiteboard-login-form .whiteboard-input-wrap input, .whiteboard-auth-form .whiteboard-input-wrap input { background: transparent; border: 0; box-shadow: none; flex: 1; font-size: 0.92rem; min-height: 42px; padding: 0.62rem 0.82rem; width: 100%; } .whiteboard-input-wrap input:focus, .whiteboard-login-form .whiteboard-input-wrap input:focus, .whiteboard-auth-form .whiteboard-input-wrap input:focus { box-shadow: none; outline: none; } .whiteboard-password-toggle { align-items: center; align-self: stretch; background: rgba( 255, 255, 255, 0.72 ); border: 0; border-left: 1px solid rgba( 15, 23, 42, 0.1 ); color: #344054; cursor: pointer; display: inline-flex; font-size: 0.95rem; justify-content: center; min-width: 46px; padding: 0 14px; transition: background 0.15s ease, color 0.15s ease; } .whiteboard-password-toggle:hover, .whiteboard-password-toggle:focus { background: #ffffff; color: var( --rtb-navy ); outline: none; } .whiteboard-login-form > input, .whiteboard-auth-form > input, .whiteboard-login-form select, .whiteboard-login-form textarea { background: #eef4ff; border: 1px solid rgba( 16, 24, 40, 0.1 ); border-radius: 12px; box-shadow: none; font-size: 0.95rem; min-height: 46px; padding: 0.72rem 0.9rem; } .whiteboard-login-form > input:focus, .whiteboard-auth-form > input:focus, .whiteboard-login-form select:focus, .whiteboard-login-form textarea:focus { background: #ffffff; border-color: var( --rtb-focus-border ); box-shadow: 0 0 0 4px var( --rtb-focus ); outline: none; } .whiteboard-auth-actions { align-items: center; display: flex; justify-content: flex-end; margin-top: 6px; } .whiteboard-auth-actions .whiteboard-button { margin-top: 0; min-width: 148px; } .whiteboard-auth-member-note { align-items: flex-start; background: #fffbeb; border: 1px solid #fde68a; border-radius: 14px; color: #92400e; display: flex; font-size: 0.84rem; font-weight: 750; gap: 10px; line-height: 1.4; padding: 12px 14px; } .whiteboard-auth-member-note i { color: #d97706; flex: 0 0 auto; line-height: 1.4; margin-top: 1px; } .whiteboard-auth-links { align-items: center; background: transparent; border-top: 0; display: flex; gap: 20px; justify-content: center; margin: 18px 0 0; padding: 0 0 26px; } .whiteboard-auth-links-single { justify-content: center; } .whiteboard-auth-links-single a { justify-content: center; } .whiteboard-auth-links a { align-items: center; color: var( --rtb-muted ); display: inline-flex; font-size: 0.78rem; font-weight: 800; gap: 7px; line-height: 1.1; min-height: 32px; padding: 4px 0; text-decoration: none; transition: color 0.2s ease; } .whiteboard-auth-links a i { background: transparent; border: 0; color: currentColor; display: inline-block; font-size: 0.9rem; transition: color 0.2s ease, transform 0.2s ease; } .whiteboard-auth-links a:hover, .whiteboard-auth-links a:focus { color: var( --rtb-go-dark ); } .whiteboard-auth-links a:hover i, .whiteboard-auth-links a:focus i { color: var( --rtb-go-dark ); transform: translateY( -1px ); } .whiteboard-login-error { font-size: 0.9rem; margin: 0 0 18px; max-width: none; } .whiteboard-tabs { -ms-overflow-style: none; background: #eef2f7; border: 1px solid rgba( 15, 23, 42, 0.08 ); border-radius: 999px; display: inline-flex; gap: 4px; margin-bottom: 18px; max-width: 100%; overflow-x: auto; padding: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .whiteboard-tabs::-webkit-scrollbar { display: none; } .whiteboard-tab-button { align-items: center; background: transparent; border: 0; border-radius: 999px; color: #667085; cursor: pointer; display: inline-flex; flex-shrink: 0; font: inherit; font-size: 0.86rem; font-weight: 850; gap: 8px; padding: 0.55rem 0.88rem; transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; white-space: nowrap; } .whiteboard-tab-button:hover, .whiteboard-tab-button:focus { color: var( --rtb-ink ); outline: none; } .whiteboard-tab-button-active, .whiteboard-tab-button-active:hover, .whiteboard-tab-button-active:focus { background: #ffffff; box-shadow: 0 6px 14px rgba( 15, 23, 42, 0.08 ); color: var( --rtb-navy ); } /* ============================================================ Admin Landing ============================================================ */ .admin-card-grid, .dashboard-grid { display: grid; gap: 24px; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); margin-top: 32px; } .admin-card, .dashboard-card { color: inherit; display: block; padding: 28px; text-decoration: none; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } .admin-card:hover, .admin-card:focus, .dashboard-card:hover, .dashboard-card:focus { border-color: rgba( 15, 23, 42, 0.16 ); box-shadow: 0 24px 70px rgba( 15, 23, 42, 0.12 ); color: inherit; transform: translateY( -2px ); } .admin-card h2, .dashboard-card h2 { color: var( --rtb-ink ); font-size: 1.5rem; font-weight: 900; line-height: 1.1; margin: 0 0 10px; } .admin-card p, .dashboard-card p { color: #475569; font-size: 0.95rem; line-height: 1.5; margin: 0; } /* ============================================================ Admin Users ============================================================ */ .whiteboard-admin-layout { display: flex; flex-direction: column; gap: 24px; padding-bottom: 48px; } .whiteboard-admin-user-create h2, .whiteboard-admin-users-card h2 { color: var( --rtb-ink ); font-size: 1.35rem; font-weight: 900; letter-spacing: -0.03em; margin: 0 0 18px; } .whiteboard-admin-form { gap: 16px; } .whiteboard-admin-form-grid { display: grid; gap: 16px; grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); } .whiteboard-admin-field { display: flex; flex-direction: column; gap: 8px; } .whiteboard-admin-users-list { display: flex; flex-direction: column; gap: 12px; } .whiteboard-admin-user-row { background: var( --rtb-surface-soft ); border: 1px solid var( --rtb-border ); border-radius: var( --rtb-radius-md ); overflow: hidden; } .whiteboard-admin-user-row summary { align-items: center; cursor: pointer; display: flex; gap: 16px; justify-content: space-between; list-style: none; padding: 16px 18px; } .whiteboard-admin-user-row summary::-webkit-details-marker { display: none; } .whiteboard-admin-user-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .whiteboard-admin-user-main strong { color: var( --rtb-ink ); font-size: 1rem; font-weight: 900; } .whiteboard-admin-user-main span { color: var( --rtb-muted ); font-size: 0.9rem; font-weight: 700; word-break: break-word; } .whiteboard-admin-user-badges { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; } .whiteboard-admin-user-edit-form { background: #ffffff; border-top: 1px solid var( --rtb-border ); padding: 18px; } .whiteboard-admin-user-meta { color: var( --rtb-muted ); display: flex; flex-wrap: wrap; font-size: 0.85rem; font-weight: 700; gap: 12px; } .whiteboard-admin-impersonate-form { background: #ffffff; border-top: 1px solid var( --rtb-border ); padding: 18px; } /* ============================================================ Admin Debug / API Preview ============================================================ */ .whiteboard-admin-debug-card { overflow: hidden; padding: 0; } .whiteboard-admin-debug-header { align-items: center; background: linear-gradient( 180deg, #ffffff 0%, #f8fafc 100% ); border-bottom: 1px solid rgba( 15, 23, 42, 0.08 ); display: flex; gap: 18px; justify-content: space-between; padding: 24px; } .whiteboard-admin-debug-header h2 { color: #0f172a; font-size: 1.35rem; font-weight: 900; letter-spacing: -0.03em; margin: 0 0 6px; } .whiteboard-admin-debug-header p { color: #64748b; font-size: 0.95rem; font-weight: 700; margin: 0; } .whiteboard-admin-debug-link { background: #0f172a; border-radius: 999px; color: #ffffff; flex: 0 0 auto; font-size: 0.84rem; font-weight: 900; padding: 0.65rem 0.9rem; text-decoration: none; } .whiteboard-admin-debug-link:hover, .whiteboard-admin-debug-link:focus { background: #1e293b; color: #ffffff; } .whiteboard-admin-debug-output { background: #020617; color: #e2e8f0; font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 0.9rem; line-height: 1.6; margin: 0; max-height: 620px; overflow: auto; padding: 24px; white-space: pre-wrap; word-break: break-word; } .whiteboard-admin-debug-alert { margin: 24px; max-width: none; } .whiteboard-admin-auth-grid { display: grid; gap: 16px; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); padding: 24px; } .whiteboard-admin-auth-item { background: #f8fafc; border: 1px solid rgba( 15, 23, 42, 0.08 ); border-radius: 18px; padding: 18px; } .whiteboard-admin-auth-item span { color: #64748b; display: block; font-size: 0.74rem; font-weight: 900; letter-spacing: 0.08em; margin-bottom: 8px; text-transform: uppercase; } .whiteboard-admin-auth-item strong { color: #0f172a; display: block; font-size: 1rem; font-weight: 900; word-break: break-word; } /* ============================================================ Toasts / Confirmation Modal ============================================================ */ .whiteboard-toast-stack { display: flex; flex-direction: column; gap: 10px; position: fixed; right: 22px; top: 82px; width: min( 340px, calc( 100vw - 44px ) ); z-index: 500; } .whiteboard-toast { background: #ffffff; border: 1px solid rgba( 17, 24, 39, 0.1 ); border-radius: 14px; box-shadow: 0 14px 34px rgba( 17, 24, 39, 0.16 ); overflow: hidden; transition: opacity 0.25s ease, transform 0.25s ease; } .whiteboard-toast-body { align-items: flex-start; display: flex; gap: 12px; justify-content: space-between; } .whiteboard-toast-message { color: var( --rtb-navy ); flex: 1 1 auto; font-size: 0.9rem; font-weight: 700; padding: 13px 14px 11px; } .whiteboard-toast-close { align-items: center; background: transparent; border: 0; border-radius: 999px; color: #667085; cursor: pointer; display: inline-flex; flex: 0 0 auto; height: 30px; justify-content: center; margin: 7px 7px 0 0; padding: 0; width: 30px; } .whiteboard-toast-close:hover, .whiteboard-toast-close:focus { background: rgba( 17, 24, 39, 0.06 ); color: var( --rtb-navy ); outline: none; } .whiteboard-toast-progress { animation: whiteboard-toast-progress 3.6s linear forwards; background: var( --rtb-red ); height: 3px; transform-origin: left; } .whiteboard-toast-success .whiteboard-toast-progress { background: var( --rtb-go ); } .whiteboard-toast-error .whiteboard-toast-progress { background: #b42318; } .whiteboard-toast-hiding { opacity: 0; transform: translateX( 18px ); } @keyframes whiteboard-toast-progress { from { transform: scaleX( 1 ); } to { transform: scaleX( 0 ); } } /* Every modal on the site shares this same anatomy now: backdrop > .whiteboard-modal > .whiteboard-modal-header (icon optional, title, subtitle optional, close button) + body content + a single .whiteboard-modal-footer at the end (Cancel + primary action, right-aligned; an optional destructive extra action can anchor to the left via .whiteboard-modal-footer-split). Animation: opening/closing toggles .whiteboard-modal-open on the backdrop (see WhiteboardUtils.openModal/closeModal in utils.js), which both the backdrop and the panel transition against. d-none still handles the fully-closed state (not in the layout or a11y tree at all) - closeModal() waits for the transition to finish before adding it back. */ .whiteboard-modal-backdrop { align-items: center; backdrop-filter: blur( 6px ); -webkit-backdrop-filter: blur( 6px ); background: rgba( 17, 24, 39, 0.52 ); display: flex; inset: 0; justify-content: center; opacity: 0; padding: 20px; position: fixed; transition: opacity 0.16s ease; z-index: 450; } .whiteboard-modal-backdrop.whiteboard-modal-open { opacity: 1; } /* display:flex + flex-direction:column here (rather than just letting the whole card scroll as one block) is what keeps the header - and footer, where a modal has one - always visible: only .whiteboard-modal-body (flex: 1 1 auto below) actually scrolls internally when content runs long, instead of the title and close button scrolling away with it. */ .whiteboard-modal { background: #ffffff; border-radius: 18px; box-shadow: 0 24px 60px rgba( 17, 24, 39, 0.24 ); display: flex; flex-direction: column; max-height: calc( 100vh - 40px ); max-height: calc( 100dvh - 40px ); max-width: 420px; opacity: 0; overflow: hidden; position: relative; transform: translateY( 10px ) scale( 0.97 ); transition: opacity 0.16s ease, transform 0.16s ease; width: 100%; } .whiteboard-modal-backdrop.whiteboard-modal-open .whiteboard-modal { opacity: 1; transform: translateY( 0 ) scale( 1 ); } @media ( prefers-reduced-motion: reduce ) { .whiteboard-modal-backdrop, .whiteboard-modal { transition: none; } } .whiteboard-modal-header { align-items: flex-start; display: flex; flex: 0 0 auto; gap: 14px; padding: 22px 56px 18px 22px; } .whiteboard-modal-header-icon { align-items: center; background: linear-gradient( 135deg, var( --rtb-blue ), #1c7fac ); border-radius: 14px; color: #ffffff; display: inline-flex; flex: 0 0 44px; font-size: 1.05rem; height: 44px; justify-content: center; width: 44px; } .whiteboard-modal-header-text { min-width: 0; padding-top: 2px; } .whiteboard-modal-header h4 { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.25; margin: 0; } .whiteboard-modal-header p { color: #667085; font-size: 0.9rem; line-height: 1.4; margin: 4px 0 0; } .whiteboard-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 22px 22px; } .whiteboard-modal-message { color: #667085; font-size: 0.94rem; line-height: 1.45; margin: 0; } .whiteboard-modal-close { align-items: center; background: #f2f4f7; border: 0; border-radius: 999px; color: #667085; cursor: pointer; display: inline-flex; height: 34px; justify-content: center; position: absolute; right: 18px; top: 18px; transition: background 0.12s ease, color 0.12s ease; width: 34px; } .whiteboard-modal-close:hover, .whiteboard-modal-close:focus-visible { background: #e4e7ec; color: #344054; outline: none; } .whiteboard-modal-footer { align-items: center; border-top: 1px solid rgba( 15, 23, 42, 0.08 ); display: flex; flex: 0 0 auto; gap: 10px; justify-content: flex-end; padding: 16px 22px 22px; } .whiteboard-modal-footer .whiteboard-button { margin-top: 0; } .whiteboard-help-modal-version { color: var( --rtb-muted ); font-size: 0.72rem; margin: 0; padding: 0 22px 18px; text-align: right; } /* Used only where a modal has one extra, less-prominent destructive action alongside its normal Cancel/primary pair (e.g. "Remove All PRs" next to Cancel/Save, or "Delete" next to Cancel/Log Workout) - keeps that outlier action anchored to the left via margin-right: auto rather than justify-content: space-between, since space-between only "works" with exactly two children - when the destructive action is conditionally hidden (d-none), auto-margin correctly collapses away and the remaining Cancel/primary group still lands at the right, instead of snapping to the left the way space-between would. */ .whiteboard-modal-footer-split .whiteboard-pr-delete { margin-right: auto; } .whiteboard-modal-footer-actions { display: flex; gap: 10px; justify-content: flex-end; } .whiteboard-form-actions { align-items: center; display: flex; gap: 12px; margin-top: 4px; } /* App-only Sign Out card on the Profile page (see profile.php) - full-width button reads better than the default side-by-side .whiteboard-form-actions row at the narrow widths this only ever shows up at (it's wrapped in .whiteboard-app-only). Help/Dark Mode used to live in this same card/class; both moved to the footer. */ .whiteboard-profile-app-settings-actions { flex-direction: column; } .whiteboard-profile-app-settings-actions .whiteboard-button { justify-content: flex-start; width: 100%; } .whiteboard-account-deletion-modal { max-width: 590px; } .whiteboard-account-deletion-modal-icon { background: var( --rtb-red-soft ); color: var( --rtb-red-text ); } .whiteboard-account-deletion-form { display: flex; flex-direction: column; gap: 18px; } .whiteboard-account-deletion-warning { background: var( --rtb-red-soft ); border: 1px solid rgba( 214, 31, 38, 0.18 ); border-radius: 14px; color: var( --rtb-ink ); font-size: 0.9rem; line-height: 1.5; padding: 16px 18px; } .whiteboard-account-deletion-warning p { margin: 0; } .whiteboard-account-deletion-warning ul { margin: 10px 0; padding-left: 22px; } .whiteboard-account-deletion-warning li + li { margin-top: 4px; } .whiteboard-account-deletion-form .whiteboard-checkbox-row { align-items: flex-start; margin: 0; } .whiteboard-account-deletion-form .whiteboard-form-message { margin: 0; } .whiteboard-help-form-group { margin-bottom: 16px; } .whiteboard-help-form-group label { display: block; font-size: 0.85rem; font-weight: 700; margin-bottom: 6px; } .whiteboard-help-form-group input, .whiteboard-help-form-group select, .whiteboard-help-form-group textarea { background: #ffffff; border: 1px solid var( --rtb-border-strong ); border-radius: var( --rtb-radius-sm ); color: var( --rtb-ink ); font-family: inherit; font-size: 1rem; padding: 12px 14px; width: 100%; } .whiteboard-help-form-group textarea { min-height: 120px; resize: vertical; } .whiteboard-help-form-hint { color: var( --rtb-muted ); font-size: 0.82rem; margin: -10px 0 16px; } /* ============================================================ PRs / Barbell Lifts ============================================================ */ .whiteboard-prs-page-header { align-items: center; display: flex; flex-direction: column; gap: 18px; justify-content: center; } .whiteboard-prs-summary { align-items: center; background: var( --rtb-red ); border: 1px solid rgba( 255, 255, 255, 0.25 ); border-radius: 18px; box-shadow: 0 10px 24px rgba( 0, 0, 0, 0.28 ); color: var( --rtb-white ); display: flex; flex-direction: column; justify-content: center; min-height: 82px; min-width: 108px; padding: 14px 18px; text-align: center; } .whiteboard-prs-summary span { font-size: 2rem; font-weight: 950; letter-spacing: -0.08em; line-height: 1; } .whiteboard-prs-summary small { font-size: 0.72rem; font-weight: 900; letter-spacing: 0.04em; margin-top: 5px; text-transform: uppercase; } .whiteboard-records-summary-group { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; } .whiteboard-prs-summary-secondary { background: #0e7490; } .whiteboard-prs-shell { overflow: hidden; padding: 0; width: 100%; } .whiteboard-prs-toolbar { align-items: end; border-bottom: 1px solid rgba( 17, 17, 17, 0.07 ); display: grid; gap: 14px; grid-template-columns: minmax( 220px, 1fr ) minmax( 160px, 220px ) auto; padding: 20px; } .whiteboard-prs-add-lift-button { white-space: nowrap; } .whiteboard-prs-search-wrap .whiteboard-input-wrap { align-items: center; display: flex; position: relative; } .whiteboard-prs-search-wrap .whiteboard-input-wrap i { color: var( --rtb-muted ); font-size: 0.9rem; left: 16px; position: absolute; z-index: 1; } .whiteboard-prs-search-wrap input { padding-left: 42px !important; } .whiteboard-prs-list { background: var( --rtb-white ); } .whiteboard-pr-category h2 { background: var( --rtb-surface-muted ); color: rgba( 17, 17, 17, 0.42 ); font-size: 0.82rem; font-weight: 900; letter-spacing: 0.07em; line-height: 1; margin: 0; padding: 18px 20px; text-transform: uppercase; } .whiteboard-pr-category-rows { background: var( --rtb-white ); } .whiteboard-pr-row, .whiteboard-pr-row:hover, .whiteboard-pr-row:focus-visible { text-decoration: none; } .whiteboard-pr-row { align-items: center; background: var( --rtb-white ); border: 0; border-bottom: 1px solid rgba( 17, 17, 17, 0.06 ); color: var( --rtb-ink ); cursor: pointer; display: grid; font: inherit; gap: 16px; grid-template-columns: minmax( 0, 1fr ) auto; isolation: isolate; min-height: 68px; padding: 0 20px; position: relative; text-align: left; transition: background 0.16s ease, color 0.16s ease; width: 100%; } /* Used only where a row needs to send a plain click somewhere different than its "Add" pill (records list: clicking the row opens the movement's detail page, clicking Add should go straight into logging a lift there instead). Absolutely-positioned children are excluded from grid layout entirely, so this doesn't disturb the row's own name/value grid columns - it just sits underneath them as the click target for everywhere that isn't the pill itself. isolation: isolate on the row (above) gives these two elements their own self-contained stacking context, so this z-index comparison is never at the mercy of some unrelated ancestor's stacking elsewhere on the page - it's always exactly these two, compared only against each other. */ .whiteboard-pr-row-stretched-link { inset: 0; position: absolute; z-index: 0; } .whiteboard-pr-row-add { background: none; border: 0; cursor: pointer; font: inherit; position: relative; text-decoration: none; z-index: 1; } .whiteboard-pr-row-delete { align-items: center; background: none; border: 0; color: var( --rtb-muted ); cursor: pointer; display: inline-flex; font-size: 0.92rem; justify-content: center; padding: 6px; position: relative; z-index: 1; } .whiteboard-pr-row-delete:hover, .whiteboard-pr-row-delete:focus-visible { color: var( --rtb-red-text ); outline: none; } .whiteboard-pr-row:hover, .whiteboard-pr-row:focus-visible { background: rgba( 15, 23, 42, 0.035 ); outline: 0; } .whiteboard-pr-row-name { font-size: 1.02rem; font-weight: 750; letter-spacing: -0.03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .whiteboard-pr-row-value { align-items: center; color: var( --rtb-ink ); display: inline-flex; font-size: 1.06rem; font-weight: 900; gap: 10px; justify-content: flex-end; letter-spacing: -0.03em; min-width: 76px; text-align: right; white-space: nowrap; } .whiteboard-pr-row-value em, .whiteboard-pr-row-add { background: var( --rtb-blue-soft ); border: 1px solid rgba( 45, 156, 219, 0.2 ); border-radius: 999px; color: var( --rtb-blue ); font-size: 0.72rem; font-style: normal; font-weight: 900; letter-spacing: 0.05em; padding: 0.28rem 0.58rem; text-transform: uppercase; } .whiteboard-pr-row-has-value .whiteboard-pr-row-name { color: var( --rtb-ink ); } .whiteboard-pr-empty { padding: 40px 20px; text-align: center; } .whiteboard-pr-empty h2 { font-size: 1.3rem; letter-spacing: -0.05em; margin: 0 0 6px; } .whiteboard-pr-empty p { color: var( --rtb-muted ); margin: 0; } .whiteboard-pr-modal { max-width: 520px; position: relative; } .whiteboard-pr-form { display: grid; gap: 16px; } .whiteboard-pr-form-grid { display: grid; gap: 14px; grid-template-columns: 1fr 130px; } /* Unit/Date pairing needs the opposite balance from Weight/Unit or Weight/Reps - a date input gets clipped at 130px, and a unit dropdown doesn't need anywhere near a full 1fr. */ .whiteboard-pr-log-grid-secondary { grid-template-columns: 120px 1fr; } .whiteboard-pr-unit-field { max-width: 160px; } .whiteboard-pr-form textarea { background: var( --rtb-white ); border: 1px solid rgba( 17, 17, 17, 0.12 ); border-radius: 16px; color: var( --rtb-ink ); font: inherit; font-weight: 700; line-height: 1.4; padding: 0.85rem 1rem; resize: vertical; width: 100%; } .whiteboard-pr-form textarea:focus { border-color: var( --rtb-focus-border ); box-shadow: 0 0 0 4px var( --rtb-focus ); outline: 0; } .whiteboard-pr-log-help { background: rgba( 245, 158, 11, 0.1 ); border: 1px solid rgba( 245, 158, 11, 0.18 ); border-radius: 16px; color: #7c2d12; font-size: 0.9rem; font-weight: 750; line-height: 1.4; margin: -2px 0 0; padding: 12px 14px; } .whiteboard-category-hint { background: var( --rtb-blue-soft ); border: 1px solid rgba( 45, 156, 219, 0.2 ); border-radius: 12px; color: #1c5d80; font-size: 0.85rem; font-weight: 700; line-height: 1.4; margin: 8px 0 0; padding: 10px 13px; } .whiteboard-pr-estimated-row { justify-content: flex-start; margin: 0; } .whiteboard-pr-delete { color: var( --rtb-red-text ) !important; } /* ============================================================ Benchmark WODs (Fran, Grace, Murph, etc.) Reuses the PR list/row/modal/form classes above (same visual language), just adds the pieces PRs don't need: a scrollable modal (there's a best-score callout + full history + the log form all in one place), the best-score callout itself, and the history list with a per-entry delete action. ============================================================ */ .whiteboard-benchmark-modal { max-height: calc( 100vh - 48px ); max-height: calc( 100dvh - 48px ); overflow-y: auto; } .whiteboard-benchmark-best { align-items: center; background: var( --rtb-red-soft ); border: 1px solid rgba( 214, 31, 38, 0.16 ); border-radius: 16px; display: flex; flex-direction: column; gap: 2px; margin-top: 18px; padding: 14px 16px; text-align: center; } .whiteboard-benchmark-best span { color: var( --rtb-red-text ); font-size: 0.72rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; } .whiteboard-benchmark-best strong { color: var( --rtb-ink ); font-size: 1.6rem; font-weight: 900; letter-spacing: -0.04em; line-height: 1.15; } .whiteboard-benchmark-best p { color: var( --rtb-muted ); font-size: 0.82rem; font-weight: 700; margin: 0; } .whiteboard-benchmark-history { margin-top: 16px; } .whiteboard-benchmark-history-empty { color: var( --rtb-muted ); font-size: 0.9rem; margin: 0; padding: 10px 2px; text-align: center; } .whiteboard-benchmark-history-list { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; } .whiteboard-benchmark-history-item { align-items: center; border-bottom: 1px solid rgba( 17, 17, 17, 0.06 ); display: grid; gap: 4px 12px; grid-template-columns: auto minmax( 0, 1fr ) auto; padding: 10px 2px; } .whiteboard-benchmark-history-main { align-items: center; display: flex; gap: 8px; } .whiteboard-benchmark-history-score { color: var( --rtb-ink ); font-size: 1rem; font-weight: 900; letter-spacing: -0.03em; white-space: nowrap; } .whiteboard-benchmark-history-scaled { background: var( --rtb-surface-muted ); border-radius: 999px; color: var( --rtb-muted ); font-size: 0.66rem; font-weight: 900; letter-spacing: 0.05em; padding: 0.2rem 0.5rem; text-transform: uppercase; } .whiteboard-benchmark-history-meta { color: var( --rtb-muted ); display: flex; flex-wrap: wrap; font-size: 0.82rem; font-weight: 700; gap: 4px 10px; grid-column: 1 / -1; } .whiteboard-benchmark-history-notes { color: var( --rtb-text ); font-weight: 500; } .whiteboard-benchmark-history-delete { align-items: center; background: transparent; border: 0; border-radius: 999px; color: var( --rtb-muted ); cursor: pointer; display: inline-flex; grid-row: 1; height: 30px; justify-content: center; width: 30px; } .whiteboard-benchmark-history-delete:hover, .whiteboard-benchmark-history-delete:focus-visible { background: var( --rtb-red-soft ); color: var( --rtb-red-text ); outline: 0; } .whiteboard-benchmark-form { border-top: 1px solid rgba( 17, 17, 17, 0.08 ); margin-top: 18px; padding-top: 18px; } /* PR detail page */ .whiteboard-pr-detail { background: transparent; margin: 0 auto; max-width: var( --rtb-max-width ); width: calc( 100% - ( var( --rtb-pad ) * 2 ) ); } .whiteboard-pr-breadcrumbs { margin-bottom: 12px; } .whiteboard-pr-breadcrumbs span { color: var( --rtb-ink ); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .whiteboard-pr-detail-content { background: #ffffff; border: 1px solid rgba( 15, 23, 42, 0.08 ); border-radius: 24px; overflow: hidden; } .whiteboard-pr-detail-maxes { background: #ffffff; display: grid; gap: 14px; grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); padding: 24px; } .whiteboard-pr-max-cell { align-items: center; background: #f8fafc; border: 1px solid rgba( 15, 23, 42, 0.06 ); border-radius: 18px; display: flex; flex-direction: column; gap: 7px; justify-content: center; min-height: 110px; text-align: center; } .whiteboard-pr-max-cell strong { color: #0f172a; font-size: clamp( 1.65rem, 2.8vw, 2.35rem ); font-weight: 950; letter-spacing: -0.06em; line-height: 1; } .whiteboard-pr-max-cell span { color: #64748b; font-size: 0.72rem; font-weight: 850; letter-spacing: 0.07em; line-height: 1.1; text-transform: uppercase; } .whiteboard-pr-max-cell-has-value { background: linear-gradient( 135deg, rgba( 22, 163, 74, 0.11 ), #ffffff ); border-color: rgba( 22, 163, 74, 0.22 ); } .whiteboard-pr-max-cell-has-value strong { color: #15803d; } .whiteboard-pr-max-cell-estimated { background: #ffffff; border-color: rgba( 15, 23, 42, 0.14 ); border-style: dashed; } .whiteboard-pr-max-cell-estimated strong { color: var( --rtb-muted ); font-style: italic; } .whiteboard-pr-detail-edit-wrap { background: #ffffff; padding: 0 24px 24px; } .whiteboard-pr-detail-section h2 { background: #f3f5f7; border-top: 1px solid rgba( 15, 23, 42, 0.06 ); color: #64748b; font-size: 0.76rem; font-weight: 900; letter-spacing: 0.08em; line-height: 1; margin: 0; padding: 18px 24px; text-transform: uppercase; } .whiteboard-pr-percentage-card, .whiteboard-pr-history, .whiteboard-pr-full-history, .whiteboard-pr-instruction { background: #ffffff; } .whiteboard-pr-full-history { overflow-x: auto; padding: 8px 24px 24px; } .whiteboard-pr-full-history-table { border-collapse: collapse; width: 100%; } .whiteboard-pr-full-history-table th { border-bottom: 2px solid rgba( 15, 23, 42, 0.1 ); color: var( --rtb-muted ); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.03em; padding: 10px 14px; text-align: left; text-transform: uppercase; white-space: nowrap; } .whiteboard-pr-full-history-table td { border-bottom: 1px solid rgba( 15, 23, 42, 0.06 ); color: var( --rtb-ink ); font-size: 0.92rem; font-weight: 600; padding: 12px 14px; vertical-align: top; } .whiteboard-pr-full-history-table tr:last-child td { border-bottom: 0; } .whiteboard-pr-full-history-table td:last-child { font-weight: 800; text-align: right; white-space: nowrap; } .whiteboard-pr-full-history-table td em { color: var( --rtb-muted ); font-style: italic; } .whiteboard-pr-full-history-table th:last-child, .whiteboard-pr-full-history-table td.whiteboard-pr-full-history-actions { text-align: right; white-space: nowrap; width: 1%; } .whiteboard-pr-full-history-edit, .whiteboard-pr-full-history-delete { background: none; border: 0; border-radius: 8px; color: var( --rtb-muted ); cursor: pointer; font-size: 0.85rem; padding: 6px 8px; } .whiteboard-pr-full-history-edit:hover, .whiteboard-pr-full-history-edit:focus-visible { background: rgba( 45, 156, 219, 0.12 ); color: var( --rtb-blue ); outline: none; } .whiteboard-pr-full-history-delete:hover, .whiteboard-pr-full-history-delete:focus-visible { background: rgba( 200, 32, 47, 0.1 ); color: var( --rtb-red-text ); outline: none; } .whiteboard-pr-percentage-card { padding: 24px; } .whiteboard-pr-percentage-tabs { background: #eef2f7; border-radius: 14px; display: grid; grid-template-columns: repeat( 4, 1fr ); overflow: hidden; } .whiteboard-pr-percentage-tabs span { align-items: center; color: #0f172a; display: inline-flex; font-size: 0.88rem; font-weight: 900; justify-content: center; min-height: 42px; position: relative; text-transform: uppercase; } .whiteboard-pr-percentage-tabs span + span::before { background: rgba( 15, 23, 42, 0.11 ); content: ""; height: 22px; left: 0; position: absolute; top: 10px; width: 1px; } .whiteboard-pr-percentage-grid { display: grid; gap: 14px; grid-template-columns: repeat( 4, 1fr ); padding-top: 18px; } .whiteboard-pr-percentage-cell { align-items: center; background: #fbfcfd; border: 1px solid rgba( 15, 23, 42, 0.05 ); border-radius: 14px; display: flex; flex-direction: column; gap: 4px; justify-content: center; min-height: 58px; text-align: center; } .whiteboard-pr-percentage-cell strong { color: #0f172a; font-size: 1rem; font-weight: 950; letter-spacing: -0.04em; line-height: 1; } .whiteboard-pr-percentage-cell span { color: #64748b; font-size: 0.74rem; font-weight: 800; line-height: 1; } .whiteboard-pr-history p, .whiteboard-pr-instruction { color: #475569; font-size: 1rem; font-weight: 650; margin: 0; padding: 22px 24px; } .whiteboard-pr-history-row { align-items: center; background: transparent; border: 0; border-bottom: 1px solid rgba( 15, 23, 42, 0.06 ); cursor: pointer; display: grid; font: inherit; gap: 14px; grid-template-columns: minmax( 0, 1fr ) auto auto; min-height: 70px; padding: 14px 24px; text-align: left; width: 100%; } .whiteboard-pr-history-row:hover, .whiteboard-pr-history-row:focus-visible { background: rgba( 15, 23, 42, 0.03 ); outline: none; } .whiteboard-pr-history-chevron { align-items: center; color: #94a3b8; display: inline-flex; justify-content: center; transition: transform 0.2s ease; } .whiteboard-pr-history-row[aria-expanded="true"] .whiteboard-pr-history-chevron { transform: rotate( 180deg ); } .whiteboard-pr-history-detail { border-bottom: 1px solid rgba( 15, 23, 42, 0.06 ); padding: 4px 24px 20px; } .whiteboard-pr-history-detail .whiteboard-whiteboard-notes { margin-bottom: 14px; } .whiteboard-pr-history-no-notes { font-size: 0.85rem; font-weight: 600; margin: 0 0 14px; } .whiteboard-pr-history-detail .whiteboard-engagement-bar { border-top: 0; margin-top: 0; padding-top: 0; } .whiteboard-pr-history-delete { background: transparent; border: 0; color: #94a3b8; cursor: pointer; font-size: 0.82rem; font-weight: 700; margin-top: 14px; padding: 6px 0; transition: color 0.15s ease; } .whiteboard-pr-history-delete:hover, .whiteboard-pr-history-delete:focus-visible { color: var( --rtb-red-text ); outline: none; } .whiteboard-pr-history-row strong { color: #0f172a; display: block; font-size: 1rem; font-weight: 900; letter-spacing: -0.03em; } .whiteboard-pr-history-row strong em { background: rgba( 245, 158, 11, 0.14 ); border-radius: 999px; color: #92400e; font-size: 0.68rem; font-style: normal; font-weight: 900; letter-spacing: 0.06em; margin-left: 6px; padding: 0.18rem 0.42rem; text-transform: uppercase; } .whiteboard-pr-history-row span { color: #64748b; display: block; font-size: 0.82rem; font-weight: 800; margin-top: 3px; } .whiteboard-pr-history-row b { color: #15803d; font-size: 1.08rem; font-weight: 950; letter-spacing: -0.04em; } .whiteboard-pr-rep-grid { display: grid; gap: 12px; grid-template-columns: repeat( 4, 1fr ); } /* ============================================================ RESPONSIVE Every breakpoint below used to be opened 10-15 separate times throughout the file (mostly @media (max-width:767.98px)), each holding a few more overrides than the last. Consolidated here into one block per breakpoint, ordered widest to narrowest, each selector appearing once with its final resolved values. ============================================================ */ @media ( max-width: 1099.98px ) { .whiteboard-workout-main-grid { grid-template-columns: 1fr; } } @media ( max-width: 991.98px ) { .whiteboard-variant-grid, .whiteboard-admin-form-grid, .whiteboard-profile-password-grid { grid-template-columns: 1fr; } .whiteboard-history-list { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } .whiteboard-profile-controls { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } .whiteboard-profile-password-form .whiteboard-button { width: 100%; } } @media ( max-width: 900px ) { .admin-card-grid, .dashboard-grid { grid-template-columns: 1fr; } } /* App-only utility: hidden on the website, shown only when native-bridge.js has tagged as running inside the app. Used for things (like Sign Out on the Profile page) that live somewhere different in the app than on the website. */ .whiteboard-app-only { display: none; } html.whiteboard-native-app .whiteboard-app-only { display: block; } /* App-only topbar: logo on the left (restored - originally hidden in favor of a centered-only title, per user request it's back), page title in the middle, notifications on the right. The title itself is populated by native-bridge.js from the page's own

, so it stays in sync with pages (like the workout page) that change their heading after load. The title used to be absolutely centered via left:50% with a hardcoded "reserve 120px total" max-width, which assumed a roughly symmetric bar (nothing on the left, just notifications on the right). Now that the logo (up to 150px wide) sits on the left again, that symmetry assumption breaks - true centering would run the title into the logo on longer titles/narrower phones. Switched to a flex layout instead: brand/title/actions are ordered as regular flex children (title gets flex:1 1 auto so it fills whatever space is actually left, however that splits between the two sides) rather than trying to precompute a fixed offset. / .whiteboard-topbar-title { display: none; } html.whiteboard-native-app .whiteboard-account-menu { display: none; } html.whiteboard-native-app .whiteboard-brand { order: 1; } / .whiteboard-notifications only becomes a real flex item of .whiteboard-topbar-inner (letting order below actually place it) once .whiteboard-topbar-actions itself collapses via display:contents - normally that only kicks in under the 640px hamburger-nav breakpoint. The app should always behave like that layout regardless of device width, so this forces it unconditionally rather than depending on an unrelated viewport breakpoint staying exactly where it is today. / html.whiteboard-native-app .whiteboard-topbar-actions { display: contents; } html.whiteboard-native-app .whiteboard-notifications { order: 3; } html.whiteboard-native-app .whiteboard-topbar-title { color: #ffffff; display: block; flex: 1 1 auto; font-size: 17px; font-weight: 800; margin: 0; min-width: 0; order: 2; overflow: hidden; pointer-events: none; text-align: center; text-overflow: ellipsis; white-space: nowrap; } / ============================================================ Bottom nav - app only. native-bridge.js adds .whiteboard-native-app to the moment it detects window.Capacitor, which only exists inside the wrapped app, never on the website (mobile or desktop browser). Everything below is keyed off that class, not viewport width, so a phone browser still gets the normal responsive site. ============================================================ / .whiteboard-bottom-nav { display: none; } html.whiteboard-native-app .whiteboard-bottom-nav { align-items: stretch; background: var( --rtb-topbar-bg ); border-top: 1px solid rgba( 255, 255, 255, 0.08 ); bottom: 0; box-shadow: 0 -8px 24px rgba( 15, 23, 42, 0.18 ); display: flex; justify-content: space-around; left: 0; padding: 6px 4px calc( 6px + env( safe-area-inset-bottom ) ); position: fixed; right: 0; width: 100%; z-index: 40; } html.whiteboard-native-app .whiteboard-bottom-nav .whiteboard-nav-link { align-items: center; border-radius: 0; color: rgba( 255, 255, 255, 0.65 ); display: flex; flex: 1 1 0; flex-direction: column; gap: 2px; padding: 6px 2px 4px; text-decoration: none; transform: none; transition: color 0.15s ease; } html.whiteboard-native-app .whiteboard-bottom-nav .whiteboard-bottom-nav-icon { font-size: 20px; line-height: 1; } html.whiteboard-native-app .whiteboard-bottom-nav .whiteboard-bottom-nav-label { font-size: 11px; font-weight: 600; } html.whiteboard-native-app .whiteboard-bottom-nav .whiteboard-nav-link-active { color: #ffffff; } / The app gets its own bottom tab bar, so the top hamburger/dropdown nav and the Records/Profile/Admin links inside the avatar menu would just be duplicate navigation - hide them only in the app, never on the website. Sign Out stays, since it has nowhere else to live. / html.whiteboard-native-app .whiteboard-menu-toggle, html.whiteboard-native-app .whiteboard-nav { display: none; } html.whiteboard-native-app .whiteboard-account-panel-links a[href="/records"], html.whiteboard-native-app .whiteboard-account-panel-links a[href="/profile"], html.whiteboard-native-app .whiteboard-account-panel-links a[href="/admin"] { display: none; } / Clearance for the fixed bottom bar lives on .whiteboard-footer only, not on .whiteboard-main - footer.php is required at the end of every single page (it opens with the closing tag), so the footer always immediately follows main's content, with nothing in between. An earlier version reserved this space on .whiteboard-main as well ("push page content up so the bar never overlaps it"), which made sense back when it was the last thing before the bar - but with the footer now always sitting after it, that became a second, uncovered ~96px gap between the real content and the footer (nothing sits in it, and nothing was there to hide it, unlike the footer's own reserved space which the bar sits directly on top of) - the "empty space below the footer" when scrolling down. Removed; the footer's own reservation below is the only one needed. / html.whiteboard-native-app .whiteboard-footer { padding-bottom: calc( 64px + env( safe-area-inset-bottom ) ); } / ============================================================ Topbar / mobile nav - own breakpoint (640px) Separate from the general 767.98px mobile block below: with Today/Calendar/PRs/Community/Profile/Admin all in the nav now, the full horizontal desktop nav doesn't fit below ~640px, so the hamburger needs to take over earlier than the standard phone breakpoint. ============================================================ / @media ( max-width: 640px ) { .whiteboard-topbar-inner { gap: 10px; min-height: 72px; padding: 10px 16px; position: relative; } .whiteboard-brand-logo { height: 44px; } .whiteboard-topbar-actions { display: contents; } .whiteboard-notification-button { height: 36px; width: 36px; } .whiteboard-notification-panel { border-radius: 20px; left: 16px; right: 16px; top: 88px; width: auto; } .whiteboard-notifications { margin-left: 0; order: 3; position: static; } .whiteboard-account-menu { margin-left: 0; order: 4; position: static; } .whiteboard-account-panel { border-radius: 20px; left: 16px; right: 16px; top: 88px; width: auto; } / Mobile nav dropdown - dark, matches header / .whiteboard-menu-toggle { / Groups the toggle + notifications together at the right edge - without this, .whiteboard-topbar-actions's display:contents above turns brand/toggle/notifications into 3 equal flex items under justify-content:space-between, which centers the middle one (the hamburger) instead of keeping it next to the bell. / margin-left: auto; display: inline-flex; order: 2; } .whiteboard-nav { align-items: stretch; background: var( --rtb-topbar-bg ); border: 0; border-radius: 0; box-shadow: 0 16px 24px rgba( 15, 23, 42, 0.18 ); flex-direction: column; gap: 0; left: 0; max-height: 0; opacity: 0; overflow: hidden; padding: 0; pointer-events: none; position: absolute; top: 100%; transform: translateY( -10px ); transition: max-height 260ms ease, opacity 180ms ease, transform 220ms ease, padding 220ms ease; width: 100%; } .whiteboard-menu-open .whiteboard-nav { max-height: 520px; opacity: 1; padding: 8px 0 16px; pointer-events: auto; transform: translateY( 0 ); } .whiteboard-nav-link { background: transparent; border: 0; border-radius: 0; color: #ffffff; padding: 13px 16px; transform: none; transition: background-color 160ms ease, color 160ms ease; } .whiteboard-nav-link:hover, .whiteboard-nav-link:focus { background: rgba( 255, 255, 255, 0.1 ); color: #ffffff; outline: none; } .whiteboard-nav-link-active, .whiteboard-nav-link-active:hover, .whiteboard-nav-link-active:focus { color: #ffffff; } .whiteboard-nav-link + .whiteboard-nav-link { border-top: 1px solid rgba( 255, 255, 255, 0.08 ); } .whiteboard-nav-link .whiteboard-nav-icon, .whiteboard-nav-link:hover .whiteboard-nav-icon, .whiteboard-nav-link:focus .whiteboard-nav-icon, .whiteboard-nav-link-active .whiteboard-nav-icon { background: transparent; border-color: transparent; color: rgba( 255, 255, 255, 0.82 ); } / /admin keeps its purple accent even on the monochrome mobile menu / .whiteboard-nav-link[href="/admin"] .whiteboard-nav-icon, .whiteboard-nav-link[href="/admin"]:hover .whiteboard-nav-icon, .whiteboard-nav-link[href="/admin"]:focus .whiteboard-nav-icon, .whiteboard-nav-link[href="/admin"].whiteboard-nav-link-active .whiteboard-nav-icon { color: #a78bfa; } .whiteboard-nav-link-logout { color: #fee2e2; } } @media ( max-width: 767.98px ) { .whiteboard-whiteboard-card { padding: 16px; } .whiteboard-whiteboard-card-header { margin: -16px -16px 18px; padding: 18px 16px; } :root { --rtb-pad: 16px; } body { background: radial-gradient( circle at top left, rgba( 45, 156, 219, 0.1 ), transparent 22rem ), linear-gradient( 180deg, #f8fafc 0%, #f3f6f8 100% ); min-width: 320px; overflow-x: hidden; } .whiteboard-main { padding: 22px 0 34px; } body.whiteboard-has-topbar .page-header { margin-top: -22px; } body:not( :has( .whiteboard-topbar ) ) .whiteboard-main { align-items: flex-start; display: block; } / Layout helpers / .page-header h1 { font-size: 2.15rem; line-height: 1.05; } .lead, .page-header .lead { font-size: 1rem; line-height: 1.55; } .whiteboard-card { padding: 16px; } / Same specificity as .whiteboard-card above - without these, the mobile padding:16px wins by source order alone on every card below that intentionally sets its own padding, silently overriding it. / .whiteboard-workout-card { padding: 0; } .whiteboard-calendar-card, .whiteboard-admin-debug-card { padding: 0; } .whiteboard-history-card { padding: 22px; } .whiteboard-profile-import-card { padding: 0; } .whiteboard-auth-card, .whiteboard-login-card { padding: 38px 34px 0; } .whiteboard-prs-shell { padding: 0; } .whiteboard-profile-results-window, .whiteboard-profile-password-card, .whiteboard-profile-password-details { padding: 0; } .admin-card, .dashboard-card { padding: 28px; } / These headers bleed out to the card's edges using a negative margin sized to match .whiteboard-card's padding - hardcoded to the desktop 24px value, so without this override they'd overshoot past the card's edge by 8px on mobile's reduced 16px padding. / .whiteboard-result-form-header, .whiteboard-whiteboard-card-header { margin: -16px -16px 20px; } / Workout / today / .whiteboard-workout-card-top { flex-direction: column; padding: 18px 16px; } .whiteboard-workout-card-top h2 { font-size: 1.75rem; line-height: 1.08; } .whiteboard-workout-sections { gap: 12px; padding: 16px; } .whiteboard-workout-section-heading { font-size: 0.78rem; padding: 12px 13px; } .whiteboard-workout-section-content, .whiteboard-workout-wod-body, .whiteboard-variant-content { font-size: 0.96rem; line-height: 1.55; padding: 13px; } .whiteboard-workout-format { margin-bottom: 12px; padding: 13px; } .whiteboard-whiteboard-row, .whiteboard-whiteboard-row-compact { grid-template-columns: minmax( 0, 1fr ); } .whiteboard-whiteboard-score-block { align-items: flex-end; text-align: right; } .whiteboard-whiteboard-icon-inline { flex-basis: 24px; height: 24px; width: 24px; } .whiteboard-whiteboard-score { font-size: 1.35rem; } .whiteboard-strength-inline-score { font-size: 1.2rem; } .whiteboard-hype-button, .whiteboard-hype-own { font-size: 0.66rem; padding: 0.36rem 0.54rem; } .whiteboard-hype-count-button::after, .whiteboard-hype-button::after { display: none; } .whiteboard-result-form input, .whiteboard-result-form select, .whiteboard-result-form textarea, .whiteboard-login-form input { font-size: 16px; } / Calendar / .whiteboard-calendar-toolbar, .whiteboard-calendar-filters { align-items: stretch; flex-direction: column; } .whiteboard-calendar-toolbar-main { justify-content: space-between; } .whiteboard-calendar-filters .whiteboard-calendar-control-group, .whiteboard-calendar-today { width: 100%; } .whiteboard-calendar-weekdays { display: none; } .whiteboard-calendar-grid { grid-template-columns: 1fr; } .whiteboard-calendar-day, .whiteboard-calendar-day:nth-child( 7n ) { border-right: 0; min-height: auto; } .whiteboard-calendar-day-muted { display: none; } / History / .whiteboard-history-controls { align-items: stretch; flex-direction: column; } .whiteboard-history-list { grid-template-columns: 1fr; } .whiteboard-history-card { padding: 18px; } .whiteboard-history-card h2 { font-size: 1.15rem; } .whiteboard-history-pagination .whiteboard-button { min-height: 44px; } / Profile / .whiteboard-profile-window-header, .whiteboard-profile-password-header, .whiteboard-profile-controls { padding: 18px; } .whiteboard-profile-controls { grid-template-columns: 1fr; } .whiteboard-result-card { grid-template-columns: 1fr; padding: 20px; } .whiteboard-result-card h2 { font-size: 1.15rem; } .whiteboard-result-card-score { align-items: flex-start; min-width: 0; text-align: left; } .whiteboard-result-card-strength .whiteboard-result-card-score span { max-width: none; } .whiteboard-profile-password-summary { align-items: flex-start; padding: 18px; } .whiteboard-profile-password-summary h2 { font-size: 1.25rem; } .whiteboard-profile-password-form { margin: 0 18px; padding-bottom: 18px; padding-top: 18px; } .whiteboard-profile-avatar-row { flex-wrap: wrap; margin: 0 18px 18px; } / Admin / .whiteboard-admin-user-row summary { align-items: flex-start; flex-direction: column; } .whiteboard-admin-user-badges { justify-content: flex-start; } .admin-card, .dashboard-card { padding: 24px; } .whiteboard-admin-form .whiteboard-button { width: 100%; } .whiteboard-admin-debug-header { align-items: flex-start; flex-direction: column; padding: 20px; } .whiteboard-admin-debug-link { text-align: center; width: 100%; } .whiteboard-admin-debug-output { font-size: 0.82rem; padding: 18px; } .whiteboard-admin-auth-grid { grid-template-columns: 1fr; padding: 20px; } / Auth / login / .whiteboard-auth-page .whiteboard-main { justify-content: flex-start; padding: 18px 0 0; } .whiteboard-auth-layout, .whiteboard-login-layout { justify-content: flex-start; padding: 0 16px 28px; } .whiteboard-auth-logo { margin-bottom: 18px; max-width: min( 250px, 58vw ); } .whiteboard-auth-card, .whiteboard-login-card { border-radius: 22px; max-width: none; width: 100%; } .whiteboard-auth-header, .whiteboard-login-header { padding: 24px 20px 20px; } .whiteboard-auth-header h1, .whiteboard-login-header h1 { font-size: clamp( 2.05rem, 9vw, 2.65rem ); } .whiteboard-auth-form, .whiteboard-login-form { padding: 22px 20px 24px; } .whiteboard-auth-name-grid { grid-template-columns: 1fr; } .whiteboard-auth-actions { gap: 16px; } .whiteboard-auth-actions .whiteboard-button { width: 100%; } .whiteboard-auth-links { display: flex; gap: 18px; justify-content: center; margin: 0; padding: 0 20px 22px; } .whiteboard-auth-links a { background: transparent; border: 0; border-radius: 0; justify-content: center; min-height: 32px; padding: 4px 0; width: auto; } .whiteboard-tabs { max-width: 100%; } body:not( :has( .whiteboard-topbar ) ) .whiteboard-footer-inner { align-items: center; gap: 10px; padding: 18px 20px 22px; text-align: center; } / PR pages / .whiteboard-prs-page-header { align-items: center; flex-direction: column; } .whiteboard-prs-summary { align-items: center; flex-direction: row; gap: 8px; min-height: 0; min-width: 0; padding: 12px 14px; width: fit-content; } .whiteboard-prs-summary span { font-size: 1.35rem; } .whiteboard-prs-summary small { margin-top: 0; } .whiteboard-prs-toolbar { grid-template-columns: 1fr; padding: 16px; } .whiteboard-pr-category h2 { font-size: 0.78rem; padding: 18px 16px; } .whiteboard-pr-row { min-height: 72px; padding: 0 16px; } .whiteboard-pr-row-name { font-size: 1.08rem; } .whiteboard-pr-row-value { font-size: 1.1rem; min-width: 64px; } .whiteboard-pr-modal { border-radius: 28px 28px 0 0; bottom: 0; left: 0; max-height: calc( 100svh - 28px ); max-width: none; overflow: auto; position: fixed; right: 0; top: auto; transform: translateY( 100% ); width: 100%; } .whiteboard-modal-backdrop.whiteboard-modal-open .whiteboard-pr-modal { transform: translateY( 0 ); } .whiteboard-pr-form-grid { grid-template-columns: 1fr; } .whiteboard-modal-footer { align-items: stretch; flex-direction: column-reverse; } .whiteboard-modal-footer .whiteboard-button { width: 100%; } .whiteboard-modal-footer-actions { flex-direction: column-reverse; } .whiteboard-modal-footer-actions .whiteboard-button { width: 100%; } .whiteboard-pr-detail-content { border-radius: 18px; } .whiteboard-pr-detail-maxes { gap: 8px; padding: 18px 14px; } .whiteboard-pr-max-cell { background: #ffffff; border-color: transparent; border-radius: 12px; min-height: 82px; } .whiteboard-pr-max-cell strong { font-size: 1.22rem; } .whiteboard-pr-max-cell span { font-size: 0.66rem; } .whiteboard-pr-detail-edit-wrap { padding: 0 24px 22px; } .whiteboard-pr-percentage-tabs span { font-size: 0.82rem; } .whiteboard-pr-percentage-grid { gap: 10px; } .whiteboard-pr-percentage-cell { background: #ffffff; border-color: transparent; } .whiteboard-pr-rep-grid { grid-template-columns: repeat( 2, 1fr ); } / Footer / .whiteboard-footer { margin-top: 0; padding: 0; } .whiteboard-footer-inner { align-items: center; flex-direction: column; gap: 32px; padding-bottom: 36px; padding-top: 32px; text-align: center; } .whiteboard-footer-right { flex-direction: column; gap: 18px; } .whiteboard-footer-actions { gap: 12px; justify-content: center; padding: 10px 0 6px; } .whiteboard-footer-meta { justify-content: center; text-align: center; } } @media ( max-width: 560px ) { .whiteboard-hype-modal { align-items: flex-end; padding: 10px; } .whiteboard-hype-modal-card { border-radius: 26px; width: 100%; } .whiteboard-hype-modal-header { padding: 28px 64px 20px 18px; } .whiteboard-hype-modal-icon { border-radius: 16px; font-size: 1.05rem; height: 46px; width: 46px; } .whiteboard-hype-modal-header h2 { font-size: 1.65rem; } .whiteboard-hype-modal-list { padding-left: 12px; padding-right: 12px; } } @media ( max-width: 520px ) { .whiteboard-auth-layout { padding-left: 16px; padding-right: 16px; } .whiteboard-auth-card, .whiteboard-login-card { padding: 24px; } .whiteboard-auth-header, .whiteboard-login-header { margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px; } .whiteboard-auth-links { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } .whiteboard-auth-links { align-items: center; flex-direction: row; flex-wrap: nowrap; } } / ============================================================ Comments (shared widget - used on Today's whiteboard rows and on the Community feed) ============================================================ / .whiteboard-comments-panel { background: #f8fafc; border: 1px solid var( --rtb-border ); border-radius: 16px; grid-column: 1 / -1; margin-top: 14px; order: 4; padding: 18px 20px 20px; } .whiteboard-comment-panel-header { align-items: center; color: var( --rtb-ink ); display: flex; font-size: 0.82rem; font-weight: 900; gap: 8px; letter-spacing: 0.02em; margin-bottom: 14px; } .whiteboard-comment-panel-header i { color: var( --rtb-muted ); } .whiteboard-comment-list { display: flex; flex-direction: column; gap: 14px; } .whiteboard-comment-empty { align-items: center; background: #ffffff; border: 1px dashed rgba( 17, 24, 39, 0.16 ); border-radius: 12px; color: var( --rtb-muted ); display: flex; flex-direction: column; font-size: 0.88rem; font-weight: 700; gap: 8px; margin: 0; padding: 20px 16px; text-align: center; } .whiteboard-comment-empty i { color: rgba( 17, 24, 39, 0.22 ); font-size: 1.3rem; } .whiteboard-comment-body { background: #ffffff; border: 1px solid var( --rtb-border ); border-radius: 12px; padding: 12px 14px; position: relative; } / Room for the "..." trigger in the corner, own comments only - other people's comments don't get one, so they keep the normal padding. / .whiteboard-comment-own .whiteboard-comment-body { padding-right: 38px; } / The footer below bleeds out to the body's edges with a negative margin sized to match the body's normal 14px padding - own comments have wider right padding (above, for the "..." trigger), so the footer's own negative margin needs to match or it falls short of the actual right edge, leaving a gap instead of spanning the full width. / .whiteboard-comment-own .whiteboard-comment-footer { margin-right: -38px; } .whiteboard-comment-author { color: var( --rtb-ink ); font-size: 0.84rem; font-weight: 900; margin-right: 6px; } .whiteboard-comment-time { color: var( --rtb-muted ); font-size: 0.72rem; font-weight: 700; } .whiteboard-comment-body p { color: var( --rtb-text ); font-size: 0.92rem; line-height: 1.5; margin: 4px 0 0; white-space: pre-wrap; word-break: break-word; } .whiteboard-comment-actions { align-items: center; display: flex; gap: 6px; margin-top: 8px; } .whiteboard-comment-actions button { align-items: center; background: transparent; border: 1px solid rgba( 17, 24, 39, 0.1 ); border-radius: 999px; color: var( --rtb-muted ); cursor: pointer; display: inline-flex; font-size: 0.78rem; height: 28px; justify-content: center; padding: 0; width: 28px; } .whiteboard-comment-actions button:hover, .whiteboard-comment-actions button:focus { outline: none; } .whiteboard-comment-reply-btn:hover, .whiteboard-comment-reply-btn:focus { background: #eff6ff; border-color: rgba( 37, 99, 235, 0.28 ); color: #1d4ed8; } / The "..." menu in the corner of your own comments (replaces the old always-visible trash-can button) - a small icon trigger plus a popover with Edit/Delete, matching the modal-close button's visual weight (same faint gray circle) so it reads as "options for this comment" rather than another action pill competing with Reply down in the footer. / .whiteboard-comment-more-wrap { position: absolute; right: 8px; top: 8px; } .whiteboard-comment-more-btn { align-items: center; background: #f2f4f7; border: 0; border-radius: 999px; color: var( --rtb-muted ); cursor: pointer; display: inline-flex; height: 26px; justify-content: center; transition: background 0.12s ease, color 0.12s ease; width: 26px; } .whiteboard-comment-more-btn:hover, .whiteboard-comment-more-btn:focus-visible { background: #e4e7ec; color: var( --rtb-ink ); outline: none; } .whiteboard-comment-more-menu { background: #ffffff; border: 1px solid var( --rtb-border ); border-radius: 12px; box-shadow: 0 12px 30px rgba( 15, 23, 42, 0.18 ); min-width: 140px; overflow: hidden; padding: 6px; position: absolute; right: 0; top: calc( 100% + 6px ); z-index: 6; } .whiteboard-comment-more-option { align-items: center; background: transparent; border: 0; border-radius: 8px; color: var( --rtb-ink ); cursor: pointer; display: flex; font-size: 0.86rem; font-weight: 700; gap: 10px; padding: 8px 10px; text-align: left; width: 100%; } .whiteboard-comment-more-option i { color: var( --rtb-muted ); font-size: 0.82rem; width: 14px; } .whiteboard-comment-more-option:hover, .whiteboard-comment-more-option:focus-visible { background: #f2f4f7; outline: none; } .whiteboard-comment-more-option-danger { color: var( --rtb-red-text ); } .whiteboard-comment-more-option-danger i { color: var( --rtb-red-text ); } .whiteboard-comment-more-option-danger:hover, .whiteboard-comment-more-option-danger:focus-visible { background: var( --rtb-red-soft ); } / Inline edit form - swaps in for the
body text (and hides the footer/reactions below it while active) rather than opening a modal, so editing stays anchored right where the comment already is. / .whiteboard-comment-edit-form { margin-top: 4px; } .whiteboard-comment-edit-form textarea { background: #ffffff; border: 1px solid var( --rtb-border-strong ); border-radius: 10px; color: var( --rtb-text ); font: inherit; font-size: 0.92rem; line-height: 1.5; max-height: 220px; padding: 8px 10px; resize: none; width: 100%; } .whiteboard-comment-edit-form textarea:focus { border-color: var( --rtb-blue ); outline: none; } .whiteboard-comment-edit-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; } .whiteboard-comment-edit-actions .whiteboard-button { margin-top: 0; min-height: 32px; padding: 6px 14px; } .whiteboard-comment-edit-form .whiteboard-form-message { color: var( --rtb-red-text ); font-size: 0.8rem; min-height: 0; padding-top: 4px; } .whiteboard-comment-replies { border-left: 2px solid var( --rtb-border ); display: flex; flex-direction: column; gap: 10px; margin: 10px 0 0 18px; padding-left: 14px; } .whiteboard-comment-form { border-top: 1px solid var( --rtb-border ); display: flex; flex-direction: column; gap: 10px; margin-top: 18px; padding-top: 18px; } .whiteboard-comment-reply-hint { align-items: center; background: var( --rtb-go-soft ); border-radius: 8px; color: var( --rtb-go-dark ); display: flex; font-size: 0.78rem; font-weight: 800; gap: 8px; justify-content: space-between; padding: 6px 6px 6px 10px; } .whiteboard-comment-reply-hint-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .whiteboard-comment-cancel-reply { align-items: center; background: transparent; border: 0; border-radius: 999px; color: inherit; cursor: pointer; display: flex; flex: 0 0 auto; height: 22px; justify-content: center; padding: 0; width: 22px; } .whiteboard-comment-cancel-reply:hover, .whiteboard-comment-cancel-reply:focus-visible { background: rgba( 0, 0, 0, 0.08 ); outline: none; } .whiteboard-comment-composer { align-items: flex-end; background: #ffffff; border: 1px solid var( --rtb-border-strong ); border-radius: 22px; display: flex; gap: 8px; padding: 6px 6px 6px 16px; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .whiteboard-comment-composer:focus-within { border-color: var( --rtb-focus-border ); box-shadow: 0 0 0 4px var( --rtb-focus ); } .whiteboard-comment-composer textarea { background: transparent; border: 0; color: var( --rtb-ink ); font: inherit; max-height: 120px; min-height: 24px; padding: 8px 0; resize: none; width: 100%; } .whiteboard-comment-composer textarea:focus { outline: none; } .whiteboard-comment-submit { align-items: center; background: var( --rtb-go ); border: 0; border-radius: 999px; color: #ffffff; cursor: pointer; display: inline-flex; flex: 0 0 auto; height: 38px; justify-content: center; transition: background 0.15s ease; width: 38px; } .whiteboard-comment-submit:hover, .whiteboard-comment-submit:focus { background: var( --rtb-go-dark ); outline: none; } .whiteboard-comment-submit:disabled { background: var( --rtb-go ); cursor: wait; opacity: 0.6; } / ============================================================ Community Feed ============================================================ / .whiteboard-community-layout { display: flex; flex-direction: column; gap: 16px; margin: 0 auto; max-width: 640px; padding: 0 var( --rtb-pad ) 48px; width: 100%; } .whiteboard-community-feed { display: flex; flex-direction: column; gap: 22px; } .whiteboard-community-item { display: grid; gap: 10px; padding: 20px; } .whiteboard-community-item-header { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; } .whiteboard-community-type-badge { align-items: center; border-radius: 999px; display: inline-flex; font-size: 0.66rem; font-weight: 900; gap: 5px; letter-spacing: 0.06em; line-height: 1; padding: 0.32rem 0.55rem; text-transform: uppercase; } .whiteboard-community-type-wod { background: #eff6ff; border: 1px solid #bfdbfe; color: #1d4ed8; } .whiteboard-community-type-strength { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; } .whiteboard-community-type-pr { background: var( --rtb-red-soft ); border: 1px solid rgba( 214, 31, 38, 0.2 ); color: var( --rtb-red-text ); } .whiteboard-community-item-user { color: var( --rtb-ink ); font-size: 0.9rem; font-weight: 900; } .whiteboard-community-item-time { color: var( --rtb-muted ); flex: 0 0 auto; font-size: 0.78rem; font-weight: 700; margin-left: auto; } / ------------------------------------------------------------ Feed-style header: real avatar with a small type badge overlapping its corner (like a story ring), replacing the plain colour-coded icon used on Today's Whiteboard. ------------------------------------------------------------ / .whiteboard-feed-avatar-wrap { flex: 0 0 auto; height: 44px; position: relative; width: 44px; } .whiteboard-feed-avatar-wrap .whiteboard-feed-avatar { height: 44px; width: 44px; } .whiteboard-feed-type-badge { align-items: center; background: #2563eb; border: 2px solid #ffffff; border-radius: 999px; bottom: -3px; color: #ffffff; display: inline-flex; font-size: 9px; height: 20px; justify-content: center; position: absolute; right: -3px; width: 20px; } .whiteboard-feed-type-badge-wod { background: #2563eb; } .whiteboard-feed-type-badge-strength { background: #b45309; } .whiteboard-feed-type-badge-pr { background: #7c3aed; } .whiteboard-feed-type-badge-custom { background: #0d9488; } / ------------------------------------------------------------ Softer, single-column feed card - a light divider instead of a heavy bordered box with a colour-coded left edge, since the avatar's type badge now carries that signal instead. ------------------------------------------------------------ / .whiteboard-community-feed .whiteboard-whiteboard-row { border-color: rgba( 17, 24, 39, 0.06 ); border-left: 0; box-shadow: 0 1px 2px rgba( 17, 24, 39, 0.04 ); } .whiteboard-community-feed .whiteboard-wod-row, .whiteboard-community-feed .whiteboard-strength-row, .whiteboard-community-feed .whiteboard-community-pr-row, .whiteboard-community-feed .whiteboard-community-custom-row { border-left: 0; } .whiteboard-community-feed .whiteboard-wod-row .whiteboard-whiteboard-name-line, .whiteboard-community-feed .whiteboard-strength-row .whiteboard-whiteboard-name-line, .whiteboard-community-feed .whiteboard-community-pr-row .whiteboard-whiteboard-name-line, .whiteboard-community-feed .whiteboard-community-custom-row .whiteboard-whiteboard-name-line { background: transparent; padding-bottom: 10px; } / Captions read like a caption, not a quoted callout box. / .whiteboard-community-feed .whiteboard-whiteboard-notes { background: transparent; border: 0; border-radius: 0; color: var( --rtb-muted ); font-weight: 500; padding: 0; } / Icon-first engagement actions - no bordered pill buttons. / .whiteboard-community-feed .whiteboard-engagement-bar { gap: 22px; } .whiteboard-community-feed .whiteboard-engagement-item { background: transparent; border: 0; border-radius: 999px; padding: 6px 10px 6px 6px; } .whiteboard-community-feed .whiteboard-hype-button:hover, .whiteboard-community-feed .whiteboard-hype-button:focus-visible, .whiteboard-community-feed .whiteboard-comment-toggle-button:hover, .whiteboard-community-feed .whiteboard-comment-toggle-button:focus-visible { background: rgba( 17, 24, 39, 0.05 ); border-color: transparent; color: var( --rtb-ink ); } .whiteboard-community-feed .whiteboard-hype-button-active { background: transparent; border-color: transparent; color: var( --rtb-red-text ); } / ------------------------------------------------------------ Same feed treatment as the community page, applied to Today's Whiteboard results (.whiteboard-whiteboard) instead. ------------------------------------------------------------ / .whiteboard-whiteboard .whiteboard-whiteboard-row { border-color: rgba( 17, 24, 39, 0.06 ); border-left: 0; box-shadow: 0 1px 2px rgba( 17, 24, 39, 0.04 ); } .whiteboard-whiteboard .whiteboard-wod-row, .whiteboard-whiteboard .whiteboard-strength-row { border-left: 0; } .whiteboard-whiteboard .whiteboard-wod-row .whiteboard-whiteboard-name-line, .whiteboard-whiteboard .whiteboard-strength-row .whiteboard-whiteboard-name-line { background: transparent; padding-bottom: 10px; } .whiteboard-whiteboard .whiteboard-whiteboard-notes { background: transparent; border: 0; border-radius: 0; color: var( --rtb-muted ); font-weight: 500; padding: 0; } .whiteboard-whiteboard .whiteboard-engagement-bar { gap: 22px; } .whiteboard-whiteboard .whiteboard-engagement-item { background: transparent; border: 0; border-radius: 999px; padding: 6px 10px 6px 6px; } .whiteboard-whiteboard .whiteboard-hype-button:hover, .whiteboard-whiteboard .whiteboard-hype-button:focus-visible, .whiteboard-whiteboard .whiteboard-comment-toggle-button:hover, .whiteboard-whiteboard .whiteboard-comment-toggle-button:focus-visible { background: rgba( 17, 24, 39, 0.05 ); border-color: transparent; color: var( --rtb-ink ); } .whiteboard-whiteboard .whiteboard-hype-button-active { background: transparent; border-color: transparent; color: var( --rtb-red-text ); } .whiteboard-community-item-body { display: grid; gap: 4px; } .whiteboard-community-item-title { color: var( --rtb-ink ); font-size: 1.1rem; font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; text-decoration: none; } .whiteboard-community-item-title:hover, .whiteboard-community-item-title:focus { text-decoration: underline; } .whiteboard-community-custom-title { background: transparent; border: 0; cursor: pointer; display: block; font-family: inherit; padding: 0; text-align: left; } .whiteboard-community-item-score { color: var( --rtb-red-text ); font-size: 1.3rem; font-weight: 900; letter-spacing: -0.03em; } .whiteboard-community-item-variant { color: var( --rtb-muted ); font-size: 0.85rem; font-weight: 700; } .whiteboard-community-item-estimated { background: rgba( 245, 158, 11, 0.14 ); border-radius: 999px; color: #92400e; font-size: 0.66rem; font-weight: 900; letter-spacing: 0.05em; padding: 0.2rem 0.5rem; text-transform: uppercase; } .whiteboard-community-item-notes { color: var( --rtb-text ); font-size: 0.92rem; line-height: 1.5; margin: 2px 0 0; } .whiteboard-community-item-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .whiteboard-community-load-more { align-self: center; margin-top: 4px; } .whiteboard-community-empty { grid-column: 1 / -1; text-align: center; } @media ( max-width: 767.98px ) { .whiteboard-community-item { padding: 16px; } .whiteboard-comment-replies { margin-left: 10px; padding-left: 10px; } } / ============================================================ Skeleton loading placeholders Shown immediately on first paint (Today's whiteboard and the Community feed) instead of a bare "Loading..." message, so there's no jarring jump from empty text to a fully-populated page - the shapes are already roughly where the real content will land. ============================================================ / @keyframes whiteboard-skeleton-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } .whiteboard-skeleton-circle, .whiteboard-skeleton-line, .whiteboard-skeleton-pill, .whiteboard-skeleton-block { background: linear-gradient( 90deg, #eef0f3 25%, #f7f8fa 37%, #eef0f3 63% ); background-size: 400px 100%; animation: whiteboard-skeleton-shimmer 1.4s ease infinite; border-radius: 6px; } .whiteboard-skeleton-card { background: #ffffff; border: 1px solid var( --rtb-border ); border-radius: 16px; padding: 16px; } .whiteboard-skeleton-header { align-items: center; display: flex; gap: 10px; margin-bottom: 14px; } .whiteboard-skeleton-circle { border-radius: 999px; flex: 0 0 30px; height: 30px; width: 30px; } .whiteboard-skeleton-line-name { height: 14px; width: 130px; } .whiteboard-skeleton-line-time { height: 12px; margin-left: auto; width: 54px; } .whiteboard-skeleton-line-title { height: 22px; margin-bottom: 10px; width: 65%; } .whiteboard-skeleton-line-score { height: 16px; margin-bottom: 16px; width: 38%; } .whiteboard-skeleton-footer { border-top: 1px solid var( --rtb-border ); display: flex; gap: 10px; padding-top: 12px; } .whiteboard-skeleton-pill { height: 34px; width: 96px; } .whiteboard-skeleton-pill:last-child { margin-left: auto; width: 110px; } / Community feed variant - a little taller/roomier to match its card size / .whiteboard-community-skeleton .whiteboard-skeleton-line-title { height: 20px; width: 55%; } .whiteboard-community-skeleton .whiteboard-skeleton-line-score { height: 24px; width: 45%; } / ============================================================ Workout page loading skeleton - reuses the same .whiteboard-workout-main-grid / .whiteboard-workout-sidebar layout classes as the real content, so the skeleton occupies roughly the same shape and size. That's what avoids the jump: when the real content swaps in, it's replacing something already close to its own size, not a single line of text. ============================================================ / .whiteboard-workout-skeleton-pill { height: 20px; margin-bottom: 16px; width: 90px; } .whiteboard-workout-skeleton-title { height: 34px; margin-bottom: 10px; width: 65%; } .whiteboard-workout-skeleton-date { height: 14px; margin-bottom: 28px; width: 140px; } .whiteboard-workout-skeleton-section { height: 18px; margin-bottom: 12px; width: 100%; } .whiteboard-workout-skeleton-section:nth-child( 5 ) { width: 88%; } .whiteboard-workout-skeleton-section:nth-child( 6 ) { width: 92%; } .whiteboard-workout-skeleton-section:nth-child( 7 ) { width: 76%; margin-bottom: 0; } .whiteboard-workout-skeleton-sidebar-fill { border-radius: 12px; width: 100%; } .whiteboard-workout-skeleton-sidebar-fill-sm { height: 200px; } .whiteboard-workout-skeleton-sidebar-fill-lg { height: 320px; } @media ( max-width: 1099.98px ) { #workout-loading.whiteboard-workout-main-grid { grid-template-columns: minmax( 0, 1fr ); } } / ============================================================ Calendar loading skeleton ============================================================ / .whiteboard-calendar-skeleton { background: #ffffff; border: 1px solid var( --rtb-border ); border-radius: var( --rtb-radius ); box-shadow: var( --rtb-shadow ); overflow: hidden; } .whiteboard-calendar-skeleton-row { display: grid; grid-template-columns: repeat( 7, minmax( 0, 1fr ) ); } .whiteboard-calendar-skeleton-cell { border-right: 1px solid var( --rtb-border ); border-top: 1px solid var( --rtb-border ); min-height: 110px; padding: 10px; } .whiteboard-calendar-skeleton-cell:nth-child( 7n ) { border-right: 0; } .whiteboard-calendar-skeleton-row:first-child .whiteboard-calendar-skeleton-cell { border-top: 0; } .whiteboard-calendar-skeleton-daynum { height: 22px; margin-bottom: 10px; width: 22px; } .whiteboard-calendar-skeleton-line { height: 10px; width: 80%; } @media ( max-width: 900px ) { .whiteboard-calendar-skeleton-row { grid-template-columns: 1fr; } .whiteboard-calendar-skeleton-cell { border-right: 0; } .whiteboard-calendar-skeleton-row:nth-child( n + 2 ) { display: none; } } / ============================================================ PR Celebration ============================================================ / .whiteboard-pr-celebration { align-items: center; background: radial-gradient( 120% 120% at 50% 0%, rgba( 234, 179, 8, 0.35 ), transparent 55% ), radial-gradient( 100% 150% at 50% 100%, rgba( 200, 32, 47, 0.35 ), transparent 60% ), linear-gradient( 135deg, #1a2030 0%, #10131c 100% ); bottom: 0; display: flex; justify-content: center; left: 0; opacity: 0; overflow: hidden; padding: 24px; position: fixed; right: 0; top: 0; transition: opacity 0.35s ease; z-index: 500; } .whiteboard-pr-celebration-visible { opacity: 1; } .whiteboard-pr-celebration-confetti { bottom: 0; left: 0; overflow: hidden; pointer-events: none; position: absolute; right: 0; top: 0; } .whiteboard-pr-confetti-piece { animation-fill-mode: forwards; animation-name: whiteboard-pr-confetti-fall; animation-timing-function: cubic-bezier( 0.35, 0, 0.65, 1 ); position: absolute; top: -12%; } @keyframes whiteboard-pr-confetti-fall { 0% { opacity: 1; transform: translateY( 0 ) translateX( 0 ) rotate( var( --rotate-start ) ); } 100% { opacity: 0.9; transform: translateY( 124vh ) translateX( var( --drift ) ) rotate( calc( var( --rotate-start ) + 720deg ) ); } } .whiteboard-pr-celebration-card { background: #ffffff; border-radius: 28px; box-shadow: 0 40px 100px rgba( 0, 0, 0, 0.45 ); margin: auto; max-width: 420px; opacity: 0; padding: 44px 32px 36px; position: relative; text-align: center; transform: scale( 0.7 ) translateY( 30px ); transition: opacity 0.4s ease, transform 0.5s cubic-bezier( 0.34, 1.56, 0.64, 1 ); width: 100%; z-index: 1; } .whiteboard-pr-celebration-visible .whiteboard-pr-celebration-card { opacity: 1; transform: scale( 1 ) translateY( 0 ); } .whiteboard-pr-celebration-badge { align-items: center; animation: whiteboard-pr-celebration-pulse 1.8s ease-in-out infinite; background: linear-gradient( 135deg, #eab308 0%, var( --rtb-red ) 100% ); border-radius: 999px; color: #ffffff; display: inline-flex; font-size: 2rem; height: 84px; justify-content: center; margin: 0 auto 18px; width: 84px; } @keyframes whiteboard-pr-celebration-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba( 234, 179, 8, 0.45 ); } 50% { box-shadow: 0 0 0 18px rgba( 234, 179, 8, 0 ); } } .whiteboard-pr-celebration-eyebrow { color: var( --rtb-red-text ); font-size: 0.82rem; font-weight: 900; letter-spacing: 0.08em; margin: 0 0 6px; text-transform: uppercase; } .whiteboard-pr-celebration-title { color: var( --rtb-ink ); font-size: 1.9rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1.05; margin: 0 0 10px; } .whiteboard-pr-celebration-weight { color: var( --rtb-red-text ); font-size: 2.6rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1; margin: 0 0 14px; } .whiteboard-pr-celebration-weight span { color: var( --rtb-muted ); font-size: 1.4rem; font-weight: 800; } .whiteboard-pr-celebration-subtitle { color: var( --rtb-muted ); font-size: 0.95rem; font-weight: 600; line-height: 1.5; margin: 0 0 28px; } .whiteboard-pr-celebration-dismiss { background: linear-gradient( 135deg, var( --rtb-red ) 0%, #8f1622 100% ); border: 0; border-radius: 999px; box-shadow: 0 12px 24px rgba( 200, 32, 47, 0.35 ); color: #ffffff; cursor: pointer; font-size: 1.05rem; font-weight: 900; padding: 14px 36px; transition: transform 0.15s ease; } .whiteboard-pr-celebration-dismiss:hover, .whiteboard-pr-celebration-dismiss:focus-visible { outline: none; transform: translateY( -2px ); } @media ( max-width: 480px ) { .whiteboard-pr-celebration-card { padding: 36px 24px 28px; } .whiteboard-pr-celebration-title { font-size: 1.6rem; } .whiteboard-pr-celebration-weight { font-size: 2.1rem; } } / Thin progress bar shown during SPA-style navigation (see spa-nav.js). Gives a native "something is happening" cue in the moment between a nav tap and the new page's content appearing, instead of the screen just sitting there. / #whiteboard-spa-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var( --rtb-blue ); z-index: 9999; opacity: 0; transition: width 0.4s ease, opacity 0.2s ease; } #whiteboard-spa-progress.whiteboard-spa-progress-active { width: 70%; opacity: 1; } #whiteboard-spa-progress.whiteboard-spa-progress-done { width: 100%; opacity: 0; transition: width 0.2s ease, opacity 0.2s ease 0.1s; } / ============================================================ Dark Theme (first pass) Scope: shared chrome + the pages we've reworked recently - topbar/nav, account + notification panels, generic cards, tabs, modals, alerts, form inputs/buttons, and the Profile (Account/Password/Import) pages. Page-header is already a dark navy panel by design and needs no override. Not yet covered: Today/workout, Calendar, Records, Community, Admin - those have their own bespoke color usage and are a separate pass. Toggle lives in the topbar (#whiteboard-theme-toggle, wired in common.js); the theme itself is applied as data-theme="dark" on , set as early as possible (see the inline script in header.php) so there's no flash of the light theme on load. ============================================================ / html[data-theme="dark"] { / Lightened ~12pts of HSL lightness across the board (was reading as too close to black) - bg/surface/surface-soft/surface-muted and border-strong all bumped up a step; foreground colors were already light enough and are unchanged. / --rtb-border: rgba( 255, 255, 255, 0.1 ); --rtb-border-strong: #565d69; --rtb-bg: #2f333d; --rtb-surface: #373d46; --rtb-surface-soft: #3e434e; --rtb-surface-muted: #454c57; --rtb-ink: #f1f2f4; --rtb-text: #c2c8d1; --rtb-muted: #a1a8b2; / --rtb-red itself stays the vivid brand red for solid buttons/badges, which need the contrast against white labels. Text sitting directly on a dark surface is the harsh part (saturated red vibrating against navy/charcoal), so text-only usages get this lighter, less-saturated coral instead - same hue family, easier on the eyes at reading size. / --rtb-red-text: #ef7d86; --rtb-shadow: 0 12px 28px rgba( 0, 0, 0, 0.4 ); --rtb-shadow-hover: 0 22px 58px rgba( 0, 0, 0, 0.5 ); --rtb-focus: rgba( 45, 156, 219, 0.22 ); --rtb-focus-border: rgba( 45, 156, 219, 0.7 ); } html[data-theme="dark"] body { background: radial-gradient( circle at top left, rgba( 45, 156, 219, 0.07 ), transparent 32rem ), var( --rtb-bg ); } html[data-theme="dark"] .whiteboard-mention-dropdown { background: var( --rtb-surface ); border-color: var( --rtb-border-strong ); box-shadow: 0 18px 40px rgba( 0, 0, 0, 0.48 ); } html[data-theme="dark"] .whiteboard-mention-option { border-bottom-color: var( --rtb-border ); } html[data-theme="dark"] .whiteboard-mention-option:hover, html[data-theme="dark"] .whiteboard-mention-option:focus-visible { background: var( --rtb-surface-muted ); } html[data-theme="dark"] .whiteboard-mention-option span:last-child { color: var( --rtb-ink ); } / One-off collateral fix: this avatar-stack "+N" badge intentionally uses --rtb-ink as a solid dark chip behind white text, not as a text color - now that --rtb-ink is light in dark mode, pin it back to a fixed dark chip so it doesn't invert into white-on-white. / html[data-theme="dark"] .whiteboard-toggle-avatar-more { background: #2a2e35; } / Chip/pill text that leaned on --rtb-navy as "dark ink on a light surface" - flips to the (now light) --rtb-ink instead. Doesn't touch --rtb-navy itself, which stays dark on purpose elsewhere (e.g. .whiteboard-footer's navy background). / html[data-theme="dark"] .whiteboard-account-panel, html[data-theme="dark"] .whiteboard-account-panel-header strong, html[data-theme="dark"] .whiteboard-account-panel-links a, html[data-theme="dark"] .whiteboard-account-panel-links button.whiteboard-account-panel-link-button, html[data-theme="dark"] .whiteboard-notification-item, html[data-theme="dark"] .whiteboard-button-secondary, html[data-theme="dark"] .whiteboard-button-secondary:hover, html[data-theme="dark"] .whiteboard-button-secondary:focus, html[data-theme="dark"] .whiteboard-pill, html[data-theme="dark"] .whiteboard-profile-results-count, html[data-theme="dark"] .whiteboard-password-toggle:hover, html[data-theme="dark"] .whiteboard-password-toggle:focus, html[data-theme="dark"] .whiteboard-tab-button-active, html[data-theme="dark"] .whiteboard-tab-button-active:hover, html[data-theme="dark"] .whiteboard-tab-button-active:focus, html[data-theme="dark"] .whiteboard-toast-message, html[data-theme="dark"] .whiteboard-toast-close:hover, html[data-theme="dark"] .whiteboard-toast-close:focus { color: var( --rtb-ink ); } / .whiteboard-pill and the results-count chip ("309") both use a near-black tint (rgba(17,24,39,0.06)) meant to sit as a faint shade on a white/light background - the shared batch above only flips their text to --rtb-ink, so the fill itself stays basically transparent on a dark page, leaving just a thin outline (the "BOOTCAMP" pill with no visible background). Swapping to a light tint gives them the same faint-chip look dark mode already uses elsewhere. / html[data-theme="dark"] .whiteboard-pill, html[data-theme="dark"] .whiteboard-profile-results-count { background: rgba( 255, 255, 255, 0.08 ); border-color: var( --rtb-border-strong ); } / Profile/Account/Password/Import tab bar. The active tab's text already flips to --rtb-ink via the shared batch above, but the inactive tabs are hardcoded to a mid slate (#667085) tuned for the light pill's #eef2f7 background - against the dark bar it reads as washed-out and hard to pick out from the container itself. / html[data-theme="dark"] .whiteboard-tab-button { color: var( --rtb-muted ); } / Profile result cards (Public/Private notes callout). Hardcoded white box with #475569 body text - never covered by dark theme, so the whole box stayed a bright white card. The "Public notes:" label uses --rtb-ink for contrast against that white box; once the box goes dark that same rule makes it near-white-on-dark and fine, but until the box itself is fixed it's white-on-white and disappears entirely. / html[data-theme="dark"] .whiteboard-result-notes { background: var( --rtb-surface-soft ); border-color: var( --rtb-border ); color: var( --rtb-text ); } html[data-theme="dark"] .whiteboard-result-private-notes { background: rgba( 154, 52, 18, 0.16 ); border-color: rgba( 154, 52, 18, 0.4 ); color: #fdba8c; } / Strength result score ("Shoulder Press 5 x 3 @ 145 lbs") - hardcoded to a dark amber (#92400e) meant to read on a white card; against the dark card it's low-contrast and muddy. Lightened to the same amber family so it still reads as "strength" at a glance. / html[data-theme="dark"] .whiteboard-result-card-strength .whiteboard-result-card-score span { color: #fbbf24; } / Generic cards / html[data-theme="dark"] .whiteboard-card, html[data-theme="dark"] .admin-card, html[data-theme="dark"] .dashboard-card, html[data-theme="dark"] .whiteboard-notification-panel, html[data-theme="dark"] .whiteboard-account-panel, html[data-theme="dark"] .whiteboard-toast { background: var( --rtb-surface ); border-color: var( --rtb-border ); } / Admin landing cards (Users/API Health/Today's Workout API/Auth Test). The heading and eyebrow label already flip correctly (--rtb-ink and --rtb-muted respectively), but the description line under each heading is hardcoded to a mid slate (#475569) with no dark cover - against the dark card it sits at almost the same brightness as the card itself, reading as barely-there text. Hover state's border tint is the same light-mode-only rgba(15,23,42,...) issue as elsewhere, fixed alongside it. / html[data-theme="dark"] .admin-card p, html[data-theme="dark"] .dashboard-card p { color: var( --rtb-text ); } html[data-theme="dark"] .admin-card:hover, html[data-theme="dark"] .admin-card:focus, html[data-theme="dark"] .dashboard-card:hover, html[data-theme="dark"] .dashboard-card:focus { border-color: var( --rtb-border-strong ); box-shadow: var( --rtb-shadow-hover ); } / Skeleton loading placeholders (Today/Workout, Community feed, Calendar, Notifications) - hardcoded white cards with a light-gray shimmer, never covered by dark theme, so every page flashes a white card for a moment before its real (correctly dark) content swaps in. Card background gets the same swap as any other card; the shimmer gradient itself needs its own lighter-on-dark version since its light-gray-on-white bars would otherwise stay put and read as pale smudges once the card behind them goes dark. / html[data-theme="dark"] .whiteboard-skeleton-card, html[data-theme="dark"] .whiteboard-calendar-skeleton { background: var( --rtb-surface ); border-color: var( --rtb-border ); } html[data-theme="dark"] .whiteboard-skeleton-circle, html[data-theme="dark"] .whiteboard-skeleton-line, html[data-theme="dark"] .whiteboard-skeleton-pill, html[data-theme="dark"] .whiteboard-skeleton-block { background: linear-gradient( 90deg, rgba( 255, 255, 255, 0.06 ) 25%, rgba( 255, 255, 255, 0.16 ) 37%, rgba( 255, 255, 255, 0.06 ) 63% ); background-size: 400px 100%; } / Profile result cards' type accent (the colored left edge that marks strength/WOD/custom at a glance). The generic-card rule just above sets border-color as a shorthand, which also resets border-left- color - and its higher specificity (html[data-theme="dark"] + class beats a plain single class) means it wins over the light-mode .whiteboard-result-card-strength/-wod/-custom rules regardless of source order, quietly flattening every card's left edge to the same neutral gray. Re-asserting just the left edge here restores the color coding. / html[data-theme="dark"] .whiteboard-result-card-strength { border-left-color: #f59e0b; } html[data-theme="dark"] .whiteboard-result-card-wod { border-left-color: var( --rtb-blue ); } html[data-theme="dark"] .whiteboard-result-card-custom { border-left-color: #2dd4bf; } html[data-theme="dark"] .whiteboard-notification-panel-header, html[data-theme="dark"] .whiteboard-notification-panel-footer, html[data-theme="dark"] .whiteboard-account-panel-header { border-color: var( --rtb-border ); } / These two float over page content rather than sitting inline like a regular card, so they need real depth to read as "above" the page - the shared card rule above only swapped bg/border-color, leaving the light-mode shadow value (tuned for a white panel on a pale page) in place. At that low an opacity it's nearly invisible on a dark page, so the whole panel loses its edge against the busy content behind it. / html[data-theme="dark"] .whiteboard-notification-panel, html[data-theme="dark"] .whiteboard-account-panel { box-shadow: var( --rtb-shadow-hover ); } html[data-theme="dark"] .whiteboard-account-panel-links a:hover, html[data-theme="dark"] .whiteboard-account-panel-links a:focus-visible, html[data-theme="dark"] .whiteboard-account-panel-links button.whiteboard-account-panel-link-button:hover, html[data-theme="dark"] .whiteboard-account-panel-links button.whiteboard-account-panel-link-button:focus-visible, html[data-theme="dark"] .whiteboard-notification-panel-footer a:hover, html[data-theme="dark"] .whiteboard-notification-panel-footer a:focus-visible { background: rgba( 255, 255, 255, 0.06 ); } / Tabs / html[data-theme="dark"] .whiteboard-tabs { background: rgba( 255, 255, 255, 0.06 ); border-color: var( --rtb-border-strong ); } html[data-theme="dark"] .whiteboard-tab-button-active, html[data-theme="dark"] .whiteboard-tab-button-active:hover, html[data-theme="dark"] .whiteboard-tab-button-active:focus { background: var( --rtb-surface ); box-shadow: 0 6px 14px rgba( 0, 0, 0, 0.3 ); } / Modals / html[data-theme="dark"] .whiteboard-modal { background: var( --rtb-surface ); } html[data-theme="dark"] .whiteboard-modal-header, html[data-theme="dark"] .whiteboard-modal-footer { border-color: var( --rtb-border ); } html[data-theme="dark"] .whiteboard-modal-close { background: rgba( 255, 255, 255, 0.08 ); color: var( --rtb-muted ); } html[data-theme="dark"] .whiteboard-modal-close:hover, html[data-theme="dark"] .whiteboard-modal-close:focus-visible { background: rgba( 255, 255, 255, 0.14 ); color: var( --rtb-ink ); } / Form fields + labels (shared by result/login/admin/calendar/profile forms) / html[data-theme="dark"] .whiteboard-result-form label, html[data-theme="dark"] .whiteboard-login-form label, html[data-theme="dark"] .whiteboard-auth-form label, html[data-theme="dark"] .whiteboard-admin-field label, html[data-theme="dark"] .whiteboard-history-control-group label, html[data-theme="dark"] .whiteboard-profile-control-group label, html[data-theme="dark"] .whiteboard-calendar-control-group label { color: var( --rtb-text ); } html[data-theme="dark"] .whiteboard-result-form input, html[data-theme="dark"] .whiteboard-result-form select, html[data-theme="dark"] .whiteboard-result-form textarea, html[data-theme="dark"] .whiteboard-login-form input, html[data-theme="dark"] .whiteboard-admin-field input, html[data-theme="dark"] .whiteboard-admin-field select, html[data-theme="dark"] .whiteboard-history-control-group select, html[data-theme="dark"] .whiteboard-profile-control-group input, html[data-theme="dark"] .whiteboard-profile-control-group select, html[data-theme="dark"] .whiteboard-calendar-control-group select, html[data-theme="dark"] .whiteboard-import-notes, html[data-theme="dark"] .whiteboard-import-summary { background: var( --rtb-surface-soft ); border-color: var( --rtb-border-strong ); color: var( --rtb-ink ); } / Alerts / html[data-theme="dark"] .whiteboard-alert-info { background: rgba( 59, 130, 246, 0.14 ); border-color: rgba( 59, 130, 246, 0.35 ); color: #93c5fd; } html[data-theme="dark"] .whiteboard-alert-error { background: rgba( 239, 68, 68, 0.14 ); border-color: rgba( 239, 68, 68, 0.35 ); color: #fca5a5; } / Profile: Account / Password / Import gradient headers - the light pink-to-blue gradient becomes a faint version of the same hues against a dark surface, rather than disappearing entirely. / html[data-theme="dark"] .whiteboard-profile-window-header, html[data-theme="dark"] .whiteboard-profile-password-header, html[data-theme="dark"] .whiteboard-whiteboard-card-header { background: linear-gradient( 135deg, rgba( 255, 122, 89, 0.08 ) 0%, rgba( 45, 156, 219, 0.08 ) 100% ); border-bottom-color: var( --rtb-border ); } html[data-theme="dark"] .whiteboard-profile-window-header h2, html[data-theme="dark"] .whiteboard-profile-password-header h2 { color: var( --rtb-ink ); } html[data-theme="dark"] .whiteboard-profile-window-header .whiteboard-muted, html[data-theme="dark"] .whiteboard-profile-password-header .whiteboard-muted { color: var( --rtb-muted ); } html[data-theme="dark"] .whiteboard-profile-deletion-card .whiteboard-profile-password-header { background: linear-gradient( 135deg, rgba( 248, 113, 113, 0.12 ) 0%, rgba( 248, 113, 113, 0.04 ) 100% ); } html[data-theme="dark"] .whiteboard-account-deletion-warning { background: rgba( 239, 68, 68, 0.11 ); border-color: rgba( 248, 113, 113, 0.28 ); } html[data-theme="dark"] .whiteboard-history-pagination { border-top-color: var( --rtb-border ); } / Theme toggle icon swap is handled in JS (common.js); this just makes sure the button matches its sibling notification button, which it already inherits via the shared class. / / ============================================================ Dark Theme (second pass) - Today/Workout, Calendar, and the Whiteboard results drawer. Root cause of every "white on white" report below is the same: these components paint their own hardcoded #ffffff / near-white surfaces instead of using --rtb-surface, while their text still sits on var( --rtb-ink ), which flips to near-white in dark mode. That's invisible text-on-surface, not a missing rule. ============================================================ / / Today's Workout hero card top (date/title). / html[data-theme="dark"] .whiteboard-workout-card-top { background: linear-gradient( 180deg, var( --rtb-surface ) 0%, var( --rtb-surface-soft ) 100% ); border-bottom-color: var( --rtb-border ); } / Workout section headings (GENERAL WARM-UP, STRENGTH, WOD, etc). Light mode pairs a low-opacity tint with dark, saturated text - that only works because the tint composites against a white card. Over the dark .whiteboard-workout-section background it composites into a muddy mid-tone instead, and the dark text sinks into it (this is the "can't read GENERAL WARM-UP" report). Bumping the tint slightly and swapping the text for each accent's bright/base color (instead of its darkened variant) restores the contrast the light-mode version relies on. / html[data-theme="dark"] .whiteboard-workout-section-warmup .whiteboard-workout-section-heading { background: rgba( 244, 180, 0, 0.16 ); border-bottom-color: rgba( 244, 180, 0, 0.32 ); color: var( --rtb-oly ); } html[data-theme="dark"] .whiteboard-workout-section-strength .whiteboard-workout-section-heading { background: rgba( 255, 122, 89, 0.16 ); border-bottom-color: rgba( 255, 122, 89, 0.32 ); color: var( --rtb-strength ); } html[data-theme="dark"] .whiteboard-workout-section-wod .whiteboard-workout-section-heading { background: rgba( 200, 32, 47, 0.16 ); border-bottom-color: rgba( 200, 32, 47, 0.32 ); color: var( --rtb-red-text ); } html[data-theme="dark"] .whiteboard-workout-section-accessory .whiteboard-workout-section-heading { background: rgba( 45, 156, 219, 0.18 ); border-bottom-color: rgba( 45, 156, 219, 0.34 ); color: var( --rtb-blue ); } html[data-theme="dark"] .whiteboard-workout-section-cooldown .whiteboard-workout-section-heading { background: rgba( 0, 184, 148, 0.18 ); border-bottom-color: rgba( 0, 184, 148, 0.34 ); color: var( --rtb-flash ); } / Header -> content -> footer separation. Both the hero banner and the footer are fixed dark navy regardless of theme, so in dark mode they sit at nearly the same brightness as the page background and visually merge with it. Give both a hairline edge so the section boundary reads the same way it does in light mode via color contrast. / html[data-theme="dark"] .page-header, html[data-theme="dark"] .whiteboard-page-header-compact { / The hairline border alone does the job of separating the hero banner from the page. The heavier drop shadow this used to carry read as a big soft smudge bleeding into the content below on a dark background (it's barely visible on light), so it's dropped here rather than just dimmed. / border-bottom: 1px solid rgba( 255, 255, 255, 0.08 ); box-shadow: none; } html[data-theme="dark"] .whiteboard-footer { border-top: 1px solid rgba( 255, 255, 255, 0.08 ); } / Whiteboard results drawer (bottom tray on Today). Collapsed bar, expanded panel header, panel body, and result rows all hardcode light surfaces. / html[data-theme="dark"] .whiteboard-whiteboard-drawer { background: var( --rtb-surface ); box-shadow: 0 -8px 24px rgba( 0, 0, 0, 0.5 ); } html[data-theme="dark"] .whiteboard-whiteboard-drawer-bar, html[data-theme="dark"] .whiteboard-whiteboard-panel-header { background: var( --rtb-surface ); } html[data-theme="dark"] .whiteboard-whiteboard-drawer-bar:hover, html[data-theme="dark"] .whiteboard-whiteboard-drawer-bar:focus-visible { background: var( --rtb-surface-soft ); } html[data-theme="dark"] .whiteboard-whiteboard-drawer-bar h2, html[data-theme="dark"] .whiteboard-whiteboard-panel-header h2 { color: var( --rtb-ink ); } html[data-theme="dark"] .whiteboard-whiteboard-toggle-sub { color: var( --rtb-muted ); } html[data-theme="dark"] .whiteboard-whiteboard-panel-body { background: var( --rtb-bg ); } html[data-theme="dark"] .whiteboard-whiteboard-row { background: var( --rtb-surface ); border-color: var( --rtb-border ); } html[data-theme="dark"] .whiteboard-wod-row { background: rgba( 45, 156, 219, 0.08 ); } html[data-theme="dark"] .whiteboard-strength-row { background: rgba( 255, 122, 89, 0.08 ); } html[data-theme="dark"] .whiteboard-community-pr-row { background: rgba( 139, 92, 246, 0.08 ); } html[data-theme="dark"] .whiteboard-community-custom-row { background: rgba( 45, 212, 191, 0.08 ); } html[data-theme="dark"] .whiteboard-whiteboard-name { color: var( --rtb-ink ); } / Movement/variant label under the score (e.g. "SHOULDER PRESS" beneath a strength result's "5 x 3 @ 105 lbs") - hardcoded to a dark slate that was never covered by a dark-theme rule, so it sat almost invisible against the dark row background ("can't see the workout on the whiteboard"). / html[data-theme="dark"] .whiteboard-whiteboard-meta { color: var( --rtb-muted ); } / Calendar grid - day cells, day-number badge, event pills. / html[data-theme="dark"] .whiteboard-calendar-day { background: var( --rtb-surface ); } html[data-theme="dark"] .whiteboard-calendar-day-muted { background: var( --rtb-surface-soft ); color: var( --rtb-muted ); } html[data-theme="dark"] .whiteboard-calendar-day-today { background: rgba( 45, 156, 219, 0.1 ); } html[data-theme="dark"] .whiteboard-calendar-day-number { background: var( --rtb-surface-muted ); color: var( --rtb-ink ); } html[data-theme="dark"] .whiteboard-calendar-day-today .whiteboard-calendar-day-number { background: var( --rtb-blue ); color: #ffffff; } / NOTE: deliberately setting border-top/right/bottom-color instead of the border-color shorthand - the shorthand also reassigns border-left-color, which would outrank (and blank out) the type-specific accent color set by .whiteboard-calendar-workout-* below via the cascade. / html[data-theme="dark"] .whiteboard-calendar-workout { background: var( --rtb-surface-soft ); border-top-color: var( --rtb-border ); border-right-color: var( --rtb-border ); border-bottom-color: var( --rtb-border ); } html[data-theme="dark"] .whiteboard-calendar-workout:hover, html[data-theme="dark"] .whiteboard-calendar-workout:focus { background: var( --rtb-surface-muted ); box-shadow: 0 10px 22px rgba( 0, 0, 0, 0.4 ); } html[data-theme="dark"] .whiteboard-calendar-workout-logged { background: rgba( 22, 163, 74, 0.14 ); border-top-color: rgba( 22, 163, 74, 0.4 ); border-right-color: rgba( 22, 163, 74, 0.4 ); border-bottom-color: rgba( 22, 163, 74, 0.4 ); } html[data-theme="dark"] .whiteboard-calendar-workout > span { color: var( --rtb-muted ); } html[data-theme="dark"] .whiteboard-calendar-workout strong { color: var( --rtb-ink ); } / Notification panel item - hover/unread states were only tuned for the light theme. The hover background is a hardcoded near-white (#f5f7fa); combined with the heading text being forced light via the shared dark-theme color rule above, hovering any item makes its title (the , e.g. "New hype") disappear - light text on a light hover background. The unread tint (a very faint red wash meant to sit on a white panel) is likewise invisible against a dark panel. / html[data-theme="dark"] .whiteboard-notification-item:hover, html[data-theme="dark"] .whiteboard-notification-item:focus { background: var( --rtb-surface-soft ); } html[data-theme="dark"] .whiteboard-notification-item-unread { background: rgba( 200, 32, 47, 0.16 ); } / Notification item body text. ".whiteboard-notification-item strong" (the "New hype" heading) already goes bright via the shared chip/pill batch above, but the description line below it ("Paulo Lins hyped...") and the relative-time line ("1d") are hardcoded to a mid slate and a mid blue respectively - both tuned for a white row, both low-contrast and hard to read against the dark row they now sit on. / html[data-theme="dark"] .whiteboard-notification-item em { color: var( --rtb-text ); } html[data-theme="dark"] .whiteboard-notification-item small { color: #7bb8f0; } / Icon tint circles (the flame/comment/mention badges) - the light-mode opacity is calibrated to sit faintly on white; on a dark row it's nearly invisible, so the icon reads as floating with no chip behind it. / html[data-theme="dark"] .whiteboard-notification-icon { background: rgba( 200, 32, 47, 0.18 ); } html[data-theme="dark"] .whiteboard-notification-icon-comment { background: rgba( 45, 156, 219, 0.2 ); } html[data-theme="dark"] .whiteboard-notification-icon-mention { background: rgba( 155, 109, 255, 0.2 ); } html[data-theme="dark"] .whiteboard-notification-icon-default { background: rgba( 161, 168, 178, 0.18 ); } / Empty state ("No notifications yet") - same hardcoded mid-slate as the description text above. / html[data-theme="dark"] .whiteboard-notification-list p { color: var( --rtb-muted ); } / Panel title ("Notifications"). It inherits color from .whiteboard-notification-panel, which sets color: var(--rtb-navy) - a fixed-dark value by design (same navy the footer's background uses), never meant to be flipped. That's fine on the panel's own items (each has its own explicit/overridden color), but the header has no color of its own, so it inherits the fixed navy and goes dark-on-dark once the panel background turns dark. The sibling .whiteboard-account-panel-header strong already got this fix; this one was missed. / html[data-theme="dark"] .whiteboard-notification-panel-header strong { color: var( --rtb-ink ); } / Secondary buttons (e.g. "Recalculate PRs"). The shared chip/pill batch above only flips their text color to --rtb-ink; the hardcoded #ffffff background from the light-mode rule was never touched, so the near-white text sits on a still-white pill. Disabled state (shown briefly as "Recalculating...") is a separate light-gray-on-light-gray rule with no dark cover either. / html[data-theme="dark"] .whiteboard-button-secondary { background: var( --rtb-surface-soft ); border-color: var( --rtb-border-strong ); } html[data-theme="dark"] .whiteboard-button-secondary:hover, html[data-theme="dark"] .whiteboard-button-secondary:focus { background: var( --rtb-surface-muted ); } html[data-theme="dark"] .whiteboard-button-secondary:disabled { background: var( --rtb-surface-muted ); color: var( --rtb-muted ); } / Results filter toolbar (Search/Type/Visibility/Sort on Profile > Results). Hardcoded white, sitting as a bright bar between the correctly-dark result cards above and below it. / html[data-theme="dark"] .whiteboard-profile-controls { background: var( --rtb-surface ); border-bottom-color: var( --rtb-border ); } / Login/auth inputs. The itself already gets a dark background from the shared "Form fields" rule further down, but the rounded wrapper it sits inside (icon + input, clipped via overflow:hidden) kept its light #f3f6fb background - producing a two-tone pill where the dark input rectangle shows through a still-light rounded shell. Matching the wrapper to the same dark surface removes the seam. / html[data-theme="dark"] .whiteboard-input-wrap { background: var( --rtb-surface-soft ); border-color: var( --rtb-border-strong ); } html[data-theme="dark"] .whiteboard-input-wrap:focus-within { background: var( --rtb-surface ); } html[data-theme="dark"] .whiteboard-input-icon { color: var( --rtb-muted ); } / Password-visibility toggle: only its :hover/:focus color was covered by the shared chip/pill batch above. The idle state kept a light translucent-white background and fixed dark-navy text, so it read as a plain white square breaking the pill shape. / html[data-theme="dark"] .whiteboard-password-toggle { background: rgba( 255, 255, 255, 0.06 ); color: var( --rtb-muted ); } html[data-theme="dark"] .whiteboard-password-toggle:hover, html[data-theme="dark"] .whiteboard-password-toggle:focus { background: rgba( 255, 255, 255, 0.12 ); } / Sign-in footer strip ("Create account" / "Forgot password?"). The links' text already flips to --rtb-ink (near-white), but the strip itself keeps its light #fbfbf8 background, so the links read as washed-out/disabled instead of simply low-emphasis. / html[data-theme="dark"] .whiteboard-auth-links { background: transparent; } / Comments panel (Today's whiteboard rows + Community feed). This whole widget was never covered by either dark-theme pass - it's a fixed white card sitting inside an already-dark row. The header's ".whiteboard-comment-panel-header" text uses --rtb-ink, which is correct for a dark surface but flips to near-white text on this still-white panel, making "Comments" disappear entirely. Everything else below (empty state, composer, existing comments) has the same hardcoded-white problem, just less noticeable until you scroll a populated thread. / html[data-theme="dark"] .whiteboard-comments-panel { background: var( --rtb-surface-soft ); border-color: var( --rtb-border ); } html[data-theme="dark"] .whiteboard-comment-empty { background: var( --rtb-surface ); border-color: var( --rtb-border-strong ); } html[data-theme="dark"] .whiteboard-comment-empty i { color: var( --rtb-muted ); } html[data-theme="dark"] .whiteboard-comment-body { background: var( --rtb-surface ); border-color: var( --rtb-border ); } html[data-theme="dark"] .whiteboard-comment-footer { background: rgba( 15, 23, 42, 0.72 ); } html[data-theme="dark"] html[data-theme="dark"] .whiteboard-comment-actions button { border-color: var( --rtb-border-strong ); } html[data-theme="dark"] .whiteboard-comment-reply-btn:hover, html[data-theme="dark"] .whiteboard-comment-reply-btn:focus { background: rgba( 45, 156, 219, 0.14 ); border-color: rgba( 45, 156, 219, 0.4 ); color: #7bc3f0; } html[data-theme="dark"] .whiteboard-comment-more-btn { background: rgba( 255, 255, 255, 0.08 ); color: var( --rtb-muted ); } html[data-theme="dark"] .whiteboard-comment-more-btn:hover, html[data-theme="dark"] .whiteboard-comment-more-btn:focus-visible { background: rgba( 255, 255, 255, 0.14 ); color: var( --rtb-ink ); } html[data-theme="dark"] .whiteboard-comment-more-menu { background: var( --rtb-surface ); border-color: var( --rtb-border-strong ); } html[data-theme="dark"] .whiteboard-comment-more-option { color: var( --rtb-ink ); } html[data-theme="dark"] .whiteboard-comment-more-option:hover, html[data-theme="dark"] .whiteboard-comment-more-option:focus-visible { background: rgba( 255, 255, 255, 0.08 ); } html[data-theme="dark"] .whiteboard-comment-more-option-danger:hover, html[data-theme="dark"] .whiteboard-comment-more-option-danger:focus-visible { background: rgba( 200, 32, 47, 0.14 ); } html[data-theme="dark"] .whiteboard-comment-edit-form textarea { background: var( --rtb-surface ); border-color: var( --rtb-border-strong ); color: var( --rtb-ink ); } html[data-theme="dark"] .whiteboard-comment-composer { background: var( --rtb-surface ); border-color: var( --rtb-border-strong ); } / ============================================================ Full-screen mobile navigation ============================================================ / @media ( max-width: 640px ) { body.whiteboard-menu-open::before { display: none; } .whiteboard-brand, .whiteboard-menu-toggle { position: relative; z-index: 3; } .whiteboard-nav { align-items: stretch; backdrop-filter: blur( 14px ); background: rgba( 255, 255, 255, 0.97 ); box-shadow: none; display: flex; gap: 8px; bottom: 0; left: 0; right: 0; top: 72px; justify-content: center !important; max-height: none; opacity: 0; overflow-y: auto; padding: 24px 24px calc( 40px + env( safe-area-inset-bottom ) ); pointer-events: none; position: fixed; transform: translateY( -10px ); transition: opacity 250ms ease, transform 250ms ease; width: auto; z-index: 2; } .whiteboard-menu-open .whiteboard-nav { max-height: none; opacity: 1; padding: 24px 24px calc( 40px + env( safe-area-inset-bottom ) ); pointer-events: auto; transform: translateY( 0 ); } .whiteboard-nav-link { background: transparent; border: 0; border-radius: var( --rtb-radius-md ); color: var( --rtb-ink ); font-size: clamp( 1.55rem, 7vw, 2rem ); font-weight: 900; gap: 12px; justify-content: center; letter-spacing: -0.035em; opacity: 0; padding: 16px 20px; transform: translateY( 16px ); transition: background-color 160ms ease, color 180ms ease, opacity 250ms ease, transform 250ms ease; width: 100%; } .whiteboard-nav-link:hover, .whiteboard-nav-link:focus { background: rgba( 17, 24, 39, 0.06 ); color: var( --rtb-ink ); outline: none; } .whiteboard-nav-link-active, .whiteboard-nav-link-active:hover, .whiteboard-nav-link-active:focus { color: var( --rtb-ink ); } .whiteboard-nav-link + .whiteboard-nav-link { border-top: 0; } .whiteboard-menu-open .whiteboard-nav-link { opacity: 1; transform: translateY( 0 ); } / Values line up with the transition-property order on .whiteboard-nav-link (background-color, color, opacity, transform) - only the entrance properties (opacity/transform) get the stagger delay, so hover/active background-color and color still react instantly instead of waiting on the reveal animation. / .whiteboard-menu-open .whiteboard-nav-link:nth-child( 1 ) { transition-delay: 0s, 0s, 50ms, 50ms; } .whiteboard-menu-open .whiteboard-nav-link:nth-child( 2 ) { transition-delay: 0s, 0s, 100ms, 100ms; } .whiteboard-menu-open .whiteboard-nav-link:nth-child( 3 ) { transition-delay: 0s, 0s, 150ms, 150ms; } .whiteboard-nav-link .whiteboard-nav-icon, .whiteboard-nav-link:hover .whiteboard-nav-icon, .whiteboard-nav-link:focus .whiteboard-nav-icon, .whiteboard-nav-link-active .whiteboard-nav-icon { background: transparent; border: 0; color: currentColor; font-size: 0.9em; } } / ============================================================ Dark mode: workout detail cards and mobile navigation ============================================================ / html[data-theme="dark"] .whiteboard-workout-format { background: linear-gradient( 180deg, rgba( 45, 156, 219, 0.24 ) 0%, rgba( 45, 156, 219, 0.08 ) 100% ); border-color: rgba( 123, 195, 240, 0.34 ); } html[data-theme="dark"] .whiteboard-workout-format-label { color: #d8ecf9; } html[data-theme="dark"] .whiteboard-workout-format-content { color: var( --rtb-ink ); } html[data-theme="dark"] .whiteboard-variant-card { background: var( --rtb-surface-soft ); border-color: var( --rtb-border-strong ); } html[data-theme="dark"] .whiteboard-variant-title { border-bottom-color: rgba( 255, 255, 255, 0.1 ); color: var( --rtb-ink ); } html[data-theme="dark"] .whiteboard-variant-content { color: var( --rtb-text ); } html[data-theme="dark"] .whiteboard-variant-elite { background: linear-gradient( 180deg, rgba( 155, 109, 255, 0.25 ) 0%, rgba( 155, 109, 255, 0.08 ) 100% ); border-color: rgba( 184, 153, 255, 0.34 ); } html[data-theme="dark"] .whiteboard-variant-competitive { background: linear-gradient( 180deg, rgba( 214, 31, 38, 0.23 ) 0%, rgba( 214, 31, 38, 0.07 ) 100% ); border-color: rgba( 240, 101, 108, 0.32 ); } html[data-theme="dark"] .whiteboard-variant-performance { background: linear-gradient( 180deg, rgba( 45, 156, 219, 0.24 ) 0%, rgba( 45, 156, 219, 0.07 ) 100% ); border-color: rgba( 123, 195, 240, 0.32 ); } html[data-theme="dark"] .whiteboard-variant-lifestyle { background: linear-gradient( 180deg, rgba( 0, 184, 148, 0.22 ) 0%, rgba( 0, 184, 148, 0.07 ) 100% ); border-color: rgba( 79, 209, 181, 0.3 ); } @media ( max-width: 640px ) { html[data-theme="dark"] .whiteboard-nav { background: rgba( 22, 28, 42, 0.98 ); border-top: 1px solid rgba( 255, 255, 255, 0.08 ); } html[data-theme="dark"] .whiteboard-nav-link, html[data-theme="dark"] .whiteboard-nav-link:hover, html[data-theme="dark"] .whiteboard-nav-link:focus, html[data-theme="dark"] .whiteboard-nav-link-active, html[data-theme="dark"] .whiteboard-nav-link-active:hover, html[data-theme="dark"] .whiteboard-nav-link-active:focus { color: #f8fafc; } html[data-theme="dark"] .whiteboard-nav-link:hover, html[data-theme="dark"] .whiteboard-nav-link:focus { background: rgba( 255, 255, 255, 0.06 ); } html[data-theme="dark"] .whiteboard-nav-link-active { background: rgba( 255, 255, 255, 0.08 ); } html[data-theme="dark"] .whiteboard-nav-link-today .whiteboard-nav-icon { color: #f4b400; } html[data-theme="dark"] .whiteboard-nav-link-calendar .whiteboard-nav-icon { color: #6fb1ff; } html[data-theme="dark"] .whiteboard-nav-link-community .whiteboard-nav-icon { color: #4fd1b5; } } / ============================================================ Dark mode: Records list ============================================================ / html[data-theme="dark"] .whiteboard-prs-list, html[data-theme="dark"] .whiteboard-pr-category-rows { background: var( --rtb-surface ); } html[data-theme="dark"] .whiteboard-pr-category h2 { background: var( --rtb-surface-muted ); border-bottom: 1px solid var( --rtb-border ); color: var( --rtb-muted ); } html[data-theme="dark"] .whiteboard-pr-row { background: var( --rtb-surface ); border-bottom-color: var( --rtb-border ); color: var( --rtb-ink ); } html[data-theme="dark"] .whiteboard-pr-row:hover, html[data-theme="dark"] .whiteboard-pr-row:focus-visible { background: var( --rtb-surface-soft ); } html[data-theme="dark"] .whiteboard-pr-row-name, html[data-theme="dark"] .whiteboard-pr-row-has-value .whiteboard-pr-row-name, html[data-theme="dark"] .whiteboard-pr-row-value { color: var( --rtb-ink ); } html[data-theme="dark"] .whiteboard-pr-row-add, html[data-theme="dark"] .whiteboard-pr-row-value em { background: rgba( 45, 156, 219, 0.14 ); border-color: rgba( 96, 165, 250, 0.42 ); color: #8cc8ff; } html[data-theme="dark"] .whiteboard-pr-row-add:hover, html[data-theme="dark"] .whiteboard-pr-row-add:focus-visible { background: rgba( 45, 156, 219, 0.24 ); border-color: rgba( 96, 165, 250, 0.68 ); color: #b9dcff; outline: none; } html[data-theme="dark"] .whiteboard-pr-row-delete { color: var( --rtb-muted ); } html[data-theme="dark"] .whiteboard-pr-row-delete:hover, html[data-theme="dark"] .whiteboard-pr-row-delete:focus-visible { color: var( --rtb-red-text ); } / ============================================================ Dark mode: PR detail page and lift modals ============================================================ / html[data-theme="dark"] .whiteboard-pr-detail-content, html[data-theme="dark"] .whiteboard-pr-detail-maxes, html[data-theme="dark"] .whiteboard-pr-detail-edit-wrap, html[data-theme="dark"] .whiteboard-pr-percentage-card, html[data-theme="dark"] .whiteboard-pr-history, html[data-theme="dark"] .whiteboard-pr-full-history, html[data-theme="dark"] .whiteboard-pr-instruction { background: var( --rtb-surface ); border-color: var( --rtb-border ); } html[data-theme="dark"] .whiteboard-pr-max-cell { background: var( --rtb-surface-soft ); border-color: var( --rtb-border ); } html[data-theme="dark"] .whiteboard-pr-max-cell strong, html[data-theme="dark"] .whiteboard-pr-percentage-cell strong, html[data-theme="dark"] .whiteboard-pr-history-row strong { color: var( --rtb-ink ); } html[data-theme="dark"] .whiteboard-pr-max-cell span, html[data-theme="dark"] .whiteboard-pr-percentage-cell span, html[data-theme="dark"] .whiteboard-pr-history-row span, html[data-theme="dark"] .whiteboard-pr-history p, html[data-theme="dark"] .whiteboard-pr-instruction { color: var( --rtb-muted ); } html[data-theme="dark"] .whiteboard-pr-max-cell-has-value { background: linear-gradient( 135deg, rgba( 34, 197, 94, 0.18 ), rgba( 34, 197, 94, 0.05 ) ); border-color: rgba( 74, 222, 128, 0.3 ); } html[data-theme="dark"] .whiteboard-pr-max-cell-has-value strong, html[data-theme="dark"] .whiteboard-pr-history-row b { color: #4ade80; } html[data-theme="dark"] .whiteboard-pr-max-cell-estimated { background: var( --rtb-surface-soft ); border-color: var( --rtb-border-strong ); } html[data-theme="dark"] .whiteboard-pr-detail-section h2 { background: var( --rtb-surface-muted ); border-color: var( --rtb-border ); color: var( --rtb-muted ); } html[data-theme="dark"] .whiteboard-pr-percentage-tabs { background: var( --rtb-surface-soft ); border: 1px solid var( --rtb-border ); } html[data-theme="dark"] .whiteboard-pr-percentage-tabs span { color: var( --rtb-ink ); } html[data-theme="dark"] .whiteboard-pr-percentage-tabs span + span::before { background: var( --rtb-border-strong ); } html[data-theme="dark"] .whiteboard-pr-percentage-cell { background: var( --rtb-surface-soft ); border-color: var( --rtb-border ); } html[data-theme="dark"] .whiteboard-pr-history-row, html[data-theme="dark"] .whiteboard-pr-history-detail, html[data-theme="dark"] .whiteboard-pr-full-history-table th, html[data-theme="dark"] .whiteboard-pr-full-history-table td { border-color: var( --rtb-border ); } html[data-theme="dark"] .whiteboard-pr-history-row:hover, html[data-theme="dark"] .whiteboard-pr-history-row:focus-visible { background: rgba( 255, 255, 255, 0.045 ); } html[data-theme="dark"] .whiteboard-pr-full-history-table td { color: var( --rtb-ink ); } html[data-theme="dark"] .whiteboard-pr-full-history-table th, html[data-theme="dark"] .whiteboard-pr-full-history-table td em { color: var( --rtb-muted ); } html[data-theme="dark"] .whiteboard-pr-form textarea { background: var( --rtb-surface-soft ); border-color: var( --rtb-border-strong ); color: var( --rtb-ink ); } html[data-theme="dark"] .whiteboard-pr-form textarea::placeholder { color: var( --rtb-muted ); opacity: 0.9; } html[data-theme="dark"] .whiteboard-pr-form input[type="date"] { color-scheme: dark; } html[data-theme="dark"] .whiteboard-pr-log-help { background: rgba( 245, 158, 11, 0.12 ); border-color: rgba( 245, 158, 11, 0.3 ); color: #fcd34d; } / ============================================================ Dark mode polish: strength, custom lift, Records header, and Help & Feedback ============================================================ / / The strength icon needs a solid dark-mode surface so the coral dumbbell does not disappear into a pale translucent tile. / html[data-theme="dark"] .whiteboard-result-form-header-strength .whiteboard-result-form-header-icon { background: rgba( 255, 122, 89, 0.16 ); border: 1px solid rgba( 255, 122, 89, 0.34 ); color: #ff8f73; } / Keep modal supporting copy readable and give the form a clearer break below the header text. / html[data-theme="dark"] .whiteboard-modal-header p, html[data-theme="dark"] .whiteboard-modal-header .whiteboard-muted { color: #aeb8ca; } #prs-add-lift-modal-backdrop .whiteboard-modal-body { padding-top: 8px; } / Keep label-to-control spacing consistent throughout every modal. Form groups use a shared vertical rhythm rather than one-off fixes. / .whiteboard-modal-body .whiteboard-profile-control-group, .whiteboard-modal-body .whiteboard-help-form-group, .whiteboard-modal-body .whiteboard-field-group, .whiteboard-modal-body .whiteboard-admin-field { display: flex; flex-direction: column; gap: 9px; } .whiteboard-modal-body .whiteboard-profile-control-group > label, .whiteboard-modal-body .whiteboard-help-form-group > label, .whiteboard-modal-body .whiteboard-field-group > label, .whiteboard-modal-body .whiteboard-admin-field > label, .whiteboard-modal-body .whiteboard-pr-form > label:not( .whiteboard-checkbox-row ) { margin: 0; } / Help & Feedback uses its own field classes, so it needs an explicit dark-theme treatment rather than inheriting the regular form rules. / html[data-theme="dark"] #whiteboard-help-modal .whiteboard-modal-header-text p { color: #aeb8ca; } html[data-theme="dark"] #whiteboard-help-modal .whiteboard-help-form-group label { color: var( --rtb-text ); } html[data-theme="dark"] #whiteboard-help-modal .whiteboard-help-form-group input, html[data-theme="dark"] #whiteboard-help-modal .whiteboard-help-form-group select, html[data-theme="dark"] #whiteboard-help-modal .whiteboard-help-form-group textarea { background: var( --rtb-surface-soft ); border-color: var( --rtb-border-strong ); color: var( --rtb-ink ); color-scheme: dark; } html[data-theme="dark"] #whiteboard-help-modal .whiteboard-help-form-group input:focus, html[data-theme="dark"] #whiteboard-help-modal .whiteboard-help-form-group select:focus, html[data-theme="dark"] #whiteboard-help-modal .whiteboard-help-form-group textarea:focus { border-color: var( --rtb-focus-border ); box-shadow: 0 0 0 4px var( --rtb-focus ); outline: none; } html[data-theme="dark"] #whiteboard-help-modal .whiteboard-help-form-group select option { background: var( --rtb-surface ); color: var( --rtb-ink ); } html[data-theme="dark"] #whiteboard-help-modal .whiteboard-help-form-group input::placeholder, html[data-theme="dark"] #whiteboard-help-modal .whiteboard-help-form-group textarea::placeholder { color: var( --rtb-muted ); opacity: 0.9; } html[data-theme="dark"] #whiteboard-help-modal .whiteboard-help-form-hint { color: #fca5a5; } / Profile result notes belong to the result as a whole, not only the left content column. This keeps every note box the same full width regardless of how wide that result's score happens to be. / .whiteboard-result-card-notes { display: flex; flex-direction: column; gap: 10px; grid-column: 1 / -1; min-width: 0; } .whiteboard-result-card-notes .whiteboard-result-notes { margin-top: 0; width: 100%; } / The browser's native date control needs more than the old 130px column once its calendar button and localized date are rendered. / #custom-workout-form .whiteboard-pr-form-grid { grid-template-columns: minmax( 0, 1fr ) minmax( 190px, 0.58fr ); } #custom-workout-date { min-width: 0; width: 100%; } @media ( max-width: 700px ) { #custom-workout-form .whiteboard-pr-form-grid { grid-template-columns: 1fr; } } / Performance Records / .whiteboard-prs-summary-performance { background: linear-gradient( 135deg, #7c3aed, #5b21b6 ); border-color: rgba( 255, 255, 255, 0.18 ); } .whiteboard-performance-icon { background: #7c3aed; color: #fff; } #records-performance-tab .whiteboard-pr-row-value { color: #6d28d9; } #performance-create-form .whiteboard-profile-control-group, #performance-form .whiteboard-profile-control-group { gap: 0.55rem; } @media ( max-width: 760px ) { .whiteboard-records-summary-group { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); width: 100%; } .whiteboard-records-summary-group .whiteboard-prs-summary { min-width: 0; padding-inline: 0.7rem; } .whiteboard-records-summary-group .whiteboard-prs-summary span { font-size: 1.7rem; } .whiteboard-records-summary-group .whiteboard-prs-summary small { font-size: 0.66rem; } } @media ( max-width: 520px ) { .whiteboard-records-summary-group { grid-template-columns: 1fr; } } html[data-theme="dark"] .whiteboard-prs-summary-performance { background: linear-gradient( 135deg, #6d28d9, #4c1d95 ); } html[data-theme="dark"] #records-performance-tab .whiteboard-pr-row-value { color: #c4b5fd; } html[data-theme="dark"] .whiteboard-performance-icon { background: #6d28d9; border: 1px solid rgba( 196, 181, 253, 0.35 ); } / ============================================================ PR Celebration - Dark mode ============================================================ / html[data-theme="dark"] .whiteboard-pr-celebration-card { background: #252b38; border: 1px solid rgba( 255, 255, 255, 0.1 ); box-shadow: 0 40px 100px rgba( 0, 0, 0, 0.65 ); } html[data-theme="dark"] .whiteboard-pr-celebration-title { color: #ffffff; } html[data-theme="dark"] .whiteboard-pr-celebration-eyebrow { color: #ff7c88; } html[data-theme="dark"] .whiteboard-pr-celebration-weight { color: #ff7c88; } html[data-theme="dark"] .whiteboard-pr-celebration-weight span, html[data-theme="dark"] .whiteboard-pr-celebration-subtitle { color: #b8c1d1; } html[data-theme="dark"] .whiteboard-pr-celebration-dismiss { box-shadow: 0 12px 28px rgba( 200, 32, 47, 0.28 ); } / Records: give native date controls enough room to display the full date. / #benchmark-form .whiteboard-pr-form-grid, #performance-form .whiteboard-pr-form-grid { grid-template-columns: minmax( 0, 1fr ) minmax( 210px, 0.62fr ); } #benchmark-performed-at, #performance-achieved-at { box-sizing: border-box; min-width: 210px; width: 100%; } / Custom record actions are primary creation actions, not secondary controls. / #prs-add-lift-button, #performance-add-button { background: #12b958; border-color: #12b958; color: #fff; } #prs-add-lift-button:hover, #performance-add-button:hover { background: #0fa34d; border-color: #0fa34d; color: #fff; } #prs-add-lift-button:focus-visible, #performance-add-button:focus-visible { box-shadow: 0 0 0 4px rgba( 18, 185, 88, 0.22 ); } html[data-theme="dark"] #prs-add-lift-button, html[data-theme="dark"] #performance-add-button { background: #12b958; border-color: #12b958; color: #fff; } html[data-theme="dark"] #prs-add-lift-button:hover, html[data-theme="dark"] #performance-add-button:hover { background: #18c965; border-color: #18c965; color: #fff; } @media ( max-width: 700px ) { #benchmark-form .whiteboard-pr-form-grid, #performance-form .whiteboard-pr-form-grid { grid-template-columns: 1fr; } #benchmark-performed-at, #performance-achieved-at { min-width: 0; } } / ============================================================ Admin Users — Dark Mode ============================================================ / html[data-theme="dark"] .whiteboard-admin-user-row { background: var( --rtb-surface-soft ); border-color: var( --rtb-border ); } html[data-theme="dark"] .whiteboard-admin-user-row[open] > summary { background: rgba( 255, 255, 255, 0.025 ); border-bottom: 1px solid var( --rtb-border ); } html[data-theme="dark"] .whiteboard-admin-user-edit-form, html[data-theme="dark"] .whiteboard-admin-impersonate-form { background: var( --rtb-surface ); border-top-color: var( --rtb-border ); } html[data-theme="dark"] .whiteboard-admin-user-edit-form .whiteboard-admin-field label, html[data-theme="dark"] .whiteboard-admin-user-edit-form .whiteboard-field-label { color: var( --rtb-text ); } html[data-theme="dark"] .whiteboard-admin-user-edit-form input, html[data-theme="dark"] .whiteboard-admin-user-edit-form select { background: var( --rtb-surface-soft ); border-color: var( --rtb-border-strong ); color: var( --rtb-ink ); } html[data-theme="dark"] .whiteboard-admin-user-edit-form input::placeholder { color: var( --rtb-muted ); opacity: 1; } html[data-theme="dark"] .whiteboard-admin-user-meta { color: var( --rtb-muted ); } html[data-theme="dark"] .whiteboard-admin-impersonate-form { box-shadow: inset 0 1px 0 rgba( 255, 255, 255, 0.02 ); } / ============================================================ Admin Dashboard Polish ============================================================ / .admin-page-header { background: radial-gradient( circle at 20% 15%, rgba( 139, 92, 246, 0.28 ), transparent 34% ), linear-gradient( 135deg, #251229 0%, #171827 52%, #111827 100% ); border-bottom: 1px solid rgba( 167, 139, 250, 0.2 ); min-height: 250px; overflow: hidden; position: relative; } .admin-page-header::after { background: linear-gradient( 90deg, #8b5cf6, #c084fc, #8b5cf6 ); bottom: 0; content: ''; height: 3px; left: 50%; position: absolute; transform: translateX( -50% ); width: min( 180px, 42vw ); } .admin-page-header-inner { margin: 0 auto; max-width: 760px; padding: 28px 24px 34px; text-align: center; } .admin-page-header .admin-page-eyebrow { align-items: center; background: rgba( 139, 92, 246, 0.16 ); border: 1px solid rgba( 196, 181, 253, 0.28 ); border-radius: 999px; color: #ddd6fe; display: inline-flex; font-size: 0.74rem; font-weight: 900; gap: 8px; letter-spacing: 0.12em; margin: 0 0 18px; padding: 8px 14px; text-transform: uppercase; } .admin-page-header h1 { font-size: clamp( 2rem, 4vw, 3rem ); letter-spacing: -0.045em; margin-bottom: 12px; } .admin-page-header-inner > p:last-child { color: #cbd5e1; font-size: 1rem; line-height: 1.6; margin: 0 auto; max-width: 640px; } .admin-card-grid { gap: 22px; margin-bottom: 56px; margin-top: 38px; } .admin-card { align-items: flex-start; background: linear-gradient( 145deg, #ffffff 0%, #fbfbff 100% ); border: 1px solid rgba( 148, 163, 184, 0.24 ); border-radius: 22px; display: grid; gap: 18px; grid-template-columns: auto minmax( 0, 1fr ) auto; min-height: 190px; overflow: hidden; padding: 28px; position: relative; } .admin-card::before { background: var( --admin-card-accent, #8b5cf6 ); content: ''; height: 4px; left: 0; position: absolute; top: 0; width: 100%; } .admin-card-users { --admin-card-accent: #8b5cf6; --admin-card-soft: rgba( 139, 92, 246, 0.13 ); } .admin-card-health { --admin-card-accent: #14b8a6; --admin-card-soft: rgba( 20, 184, 166, 0.13 ); } .admin-card-workout { --admin-card-accent: #f59e0b; --admin-card-soft: rgba( 245, 158, 11, 0.14 ); } .admin-card-auth { --admin-card-accent: #3b82f6; --admin-card-soft: rgba( 59, 130, 246, 0.13 ); } .admin-card-icon { align-items: center; background: var( --admin-card-soft ); border: 1px solid color-mix( in srgb, var( --admin-card-accent ) 28%, transparent ); border-radius: 16px; color: var( --admin-card-accent ); display: inline-flex; font-size: 1.35rem; height: 54px; justify-content: center; transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease; width: 54px; } .admin-card-content { min-width: 0; } .admin-card-label { color: var( --admin-card-accent ); font-size: 0.72rem; font-weight: 900; letter-spacing: 0.13em; margin: 2px 0 8px; text-transform: uppercase; } .admin-card h2 { font-size: 1.65rem; letter-spacing: -0.035em; margin-bottom: 10px; } .admin-card p:not( .admin-card-label ) { font-size: 0.98rem; line-height: 1.6; max-width: 520px; } .admin-card-arrow { align-items: center; border: 1px solid var( --rtb-border ); border-radius: 999px; color: var( --rtb-muted ); display: inline-flex; height: 36px; justify-content: center; margin-top: 7px; transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease; width: 36px; } .admin-card:hover, .admin-card:focus-visible { border-color: color-mix( in srgb, var( --admin-card-accent ) 38%, transparent ); box-shadow: 0 24px 65px rgba( 15, 23, 42, 0.13 ); outline: none; transform: translateY( -4px ); } .admin-card:hover .admin-card-icon, .admin-card:focus-visible .admin-card-icon { background: var( --admin-card-accent ); color: #ffffff; transform: scale( 1.04 ); } .admin-card:hover .admin-card-arrow, .admin-card:focus-visible .admin-card-arrow { background: var( --admin-card-accent ); border-color: var( --admin-card-accent ); color: #ffffff; transform: translateX( 3px ); } html[data-theme="dark"] .admin-page-header { background: radial-gradient( circle at 20% 15%, rgba( 139, 92, 246, 0.2 ), transparent 36% ), linear-gradient( 135deg, #231327 0%, #151827 55%, #101522 100% ); } html[data-theme="dark"] .admin-card { background: linear-gradient( 145deg, var( --rtb-surface ) 0%, #323947 100% ); border-color: var( --rtb-border ); } html[data-theme="dark"] .admin-card p:not( .admin-card-label ) { color: var( --rtb-text ); } html[data-theme="dark"] .admin-card-arrow { background: rgba( 255, 255, 255, 0.025 ); } html[data-theme="dark"] .admin-card:hover, html[data-theme="dark"] .admin-card:focus-visible { border-color: color-mix( in srgb, var( --admin-card-accent ) 50%, transparent ); box-shadow: 0 26px 65px rgba( 0, 0, 0, 0.3 ); } @media ( max-width: 700px ) { .admin-page-header { min-height: 225px; } .admin-page-header-inner { padding-left: 18px; padding-right: 18px; } .admin-card-grid { gap: 16px; margin-top: 24px; } .admin-card { gap: 14px; grid-template-columns: auto minmax( 0, 1fr ); min-height: 0; padding: 22px; } .admin-card-arrow { display: none; } .admin-card h2 { font-size: 1.4rem; } } / Records toolbar: keep search, filter, and primary action visually aligned. / .whiteboard-prs-toolbar .whiteboard-input-wrap, .whiteboard-prs-toolbar select, .whiteboard-prs-toolbar .whiteboard-button { height: 48px; min-height: 48px; } .whiteboard-prs-toolbar .whiteboard-input-wrap input { height: 46px; min-height: 46px; } .whiteboard-prs-toolbar select { padding-bottom: 0; padding-top: 0; } .whiteboard-prs-toolbar .whiteboard-button { margin-top: 0; padding-bottom: 0; padding-top: 0; } / ============================================================ Modal forms: one consistent label-to-control rhythm everywhere ============================================================ / / Wrapped modal fields used across Records, Performance, Benchmarks, workouts, profile tools, support, authentication, and admin forms. / .whiteboard-modal-body .whiteboard-profile-control-group, .whiteboard-modal-body .whiteboard-help-form-group, .whiteboard-modal-body .whiteboard-field-group, .whiteboard-modal-body .whiteboard-admin-field, .whiteboard-modal-body .whiteboard-history-control-group, .whiteboard-modal-body .whiteboard-calendar-control-group, .whiteboard-modal-body .whiteboard-strength-field, .whiteboard-modal-body .whiteboard-result-field, .whiteboard-modal-body .whiteboard-form-group, .whiteboard-modal-body .whiteboard-control-group { display: flex; flex-direction: column; gap: 6px !important; } / Some modal forms are themselves the body element. / .whiteboard-modal.whiteboard-pr-modal > form.whiteboard-modal-body .whiteboard-profile-control-group, .whiteboard-modal.whiteboard-pr-modal > form.whiteboard-modal-body .whiteboard-help-form-group, .whiteboard-modal.whiteboard-pr-modal > form.whiteboard-modal-body .whiteboard-field-group { gap: 6px !important; } / Labels inside wrapped fields should not carry legacy margins that compete with the shared gap above. / .whiteboard-modal-body .whiteboard-profile-control-group > label, .whiteboard-modal-body .whiteboard-help-form-group > label, .whiteboard-modal-body .whiteboard-field-group > label, .whiteboard-modal-body .whiteboard-admin-field > label, .whiteboard-modal-body .whiteboard-history-control-group > label, .whiteboard-modal-body .whiteboard-calendar-control-group > label, .whiteboard-modal-body .whiteboard-strength-field > label, .whiteboard-modal-body .whiteboard-result-field > label, .whiteboard-modal-body .whiteboard-form-group > label, .whiteboard-modal-body .whiteboard-control-group > label { display: block; margin: 0 !important; } / Older forms place labels and controls directly in the form instead of wrapping each field. Give those pairs the same visual separation. / .whiteboard-modal-body form > label:not( .whiteboard-checkbox-row ) + input, .whiteboard-modal-body form > label:not( .whiteboard-checkbox-row ) + select, .whiteboard-modal-body form > label:not( .whiteboard-checkbox-row ) + textarea, .whiteboard-modal-body > label:not( .whiteboard-checkbox-row ) + input, .whiteboard-modal-body > label:not( .whiteboard-checkbox-row ) + select, .whiteboard-modal-body > label:not( .whiteboard-checkbox-row ) + textarea, .whiteboard-result-form > label:not( .whiteboard-checkbox-row ) + input, .whiteboard-result-form > label:not( .whiteboard-checkbox-row ) + select, .whiteboard-result-form > label:not( .whiteboard-checkbox-row ) + textarea { margin-top: 1px; } / Keep supporting copy attached to its control instead of accidentally widening the label gap. / .whiteboard-modal-body .whiteboard-field-help { margin-top: -4px; } / Explicit coverage for the three Records modal families, which have accumulated page-specific rules over time. / #performance-create-form .whiteboard-profile-control-group, #performance-form .whiteboard-profile-control-group, #benchmark-form .whiteboard-profile-control-group, #prs-add-lift-form .whiteboard-profile-control-group, #prs-log-lift-form .whiteboard-profile-control-group, #pr-log-form .whiteboard-profile-control-group, #pr-history-edit-form .whiteboard-profile-control-group, #custom-workout-form .whiteboard-profile-control-group { gap: 6px !important; } / ============================================================ Shared Section Page Headers ============================================================ / body { --whiteboard-page-accent: #d97706; --whiteboard-page-accent-rgb: 217, 119, 6; } body.whiteboard-section-calendar { --whiteboard-page-accent: #60a5fa; --whiteboard-page-accent-rgb: 96, 165, 250; } body.whiteboard-section-community { --whiteboard-page-accent: #14b8a6; --whiteboard-page-accent-rgb: 20, 184, 166; } body.whiteboard-section-records { --whiteboard-page-accent: #facc15; --whiteboard-page-accent-rgb: 250, 204, 21; } body.whiteboard-section-profile { --whiteboard-page-accent: #4ade80; --whiteboard-page-accent-rgb: 74, 222, 128; } body.whiteboard-section-admin { --whiteboard-page-accent: #8b5cf6; --whiteboard-page-accent-rgb: 139, 92, 246; } body.whiteboard-section-notifications { --whiteboard-page-accent: #60a5fa; --whiteboard-page-accent-rgb: 96, 165, 250; } body.whiteboard-has-topbar .page-header { background: radial-gradient( circle at 20% 15%, rgba( var( --whiteboard-page-accent-rgb ), 0.28 ), transparent 35% ), linear-gradient( 135deg, #251723 0%, #171827 52%, #111827 100% ); border-bottom: 1px solid rgba( var( --whiteboard-page-accent-rgb ), 0.22 ); isolation: isolate; overflow: hidden; position: relative; } body.whiteboard-has-topbar .page-header::after { background: linear-gradient( 90deg, transparent 0%, var( --whiteboard-page-accent ) 18%, var( --whiteboard-page-accent ) 82%, transparent 100% ); bottom: 0; content: ''; height: 3px; left: 50%; position: absolute; transform: translateX( -50% ); width: min( 180px, 42vw ); z-index: 2; } body.whiteboard-has-topbar .page-header .eyebrow, body.whiteboard-has-topbar .page-header .whiteboard-eyebrow, body.whiteboard-has-topbar .page-header .admin-page-eyebrow { background: rgba( var( --whiteboard-page-accent-rgb ), 0.14 ); border-color: rgba( var( --whiteboard-page-accent-rgb ), 0.34 ); color: #ffffff; } / Admin landing and every /admin subpage share the same purple identity. / body.whiteboard-section-admin .admin-page-header { background: radial-gradient( circle at 20% 15%, rgba( var( --whiteboard-page-accent-rgb ), 0.28 ), transparent 35% ), linear-gradient( 135deg, #251229 0%, #171827 52%, #111827 100% ); border-bottom-color: rgba( var( --whiteboard-page-accent-rgb ), 0.22 ); } body.whiteboard-section-admin .admin-page-header::after { background: linear-gradient( 90deg, transparent 0%, var( --whiteboard-page-accent ) 18%, var( --whiteboard-page-accent ) 82%, transparent 100% ); } html[data-theme="dark"] body.whiteboard-has-topbar .page-header { background: radial-gradient( circle at 20% 15%, rgba( var( --whiteboard-page-accent-rgb ), 0.2 ), transparent 37% ), linear-gradient( 135deg, #211620 0%, #151827 55%, #101522 100% ); } / ============================================================ Checkboxes ============================================================ / / One checkbox implementation only. The previous file contained three competing checkbox systems and used --rtb-green, which is not a defined design token. This version uses the existing --rtb-go token and draws the checkmark directly on the real, accessible checkbox. / input[type="checkbox"]:not( [role="switch"] ) { -webkit-appearance: none; appearance: none; background-color: var( --rtb-surface ); background-position: center; background-repeat: no-repeat; background-size: 14px 14px; border: 2px solid var( --rtb-border-strong ); border-radius: 7px; box-shadow: 0 1px 2px rgba( 15, 23, 42, 0.08 ); cursor: pointer; display: inline-block; flex: 0 0 22px; height: 22px; margin: 0; min-height: 0; padding: 0; transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease; width: 22px; } input[type="checkbox"]:not( [role="switch"] ):hover { border-color: var( --rtb-go ); box-shadow: 0 0 0 4px rgba( 22, 163, 74, 0.1 ); transform: translateY( -1px ); } input[type="checkbox"]:not( [role="switch"] ):checked { background-color: var( --rtb-go ); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.6' d='M3 8.4 6.4 12 13 4.5'/%3E%3C/svg%3E"); border-color: var( --rtb-go ); box-shadow: 0 1px 2px rgba( 15, 23, 42, 0.08 ), 0 0 0 4px rgba( 22, 163, 74, 0.12 ); } input[type="checkbox"]:not( [role="switch"] ):focus-visible { border-color: var( --rtb-go ); box-shadow: 0 0 0 4px rgba( 22, 163, 74, 0.2 ); outline: none; } input[type="checkbox"]:not( [role="switch"] ):disabled { cursor: not-allowed; opacity: 0.5; transform: none; } .whiteboard-checkbox-row { align-items: center; cursor: pointer; display: inline-flex; gap: 12px; line-height: 1.35; min-height: 32px; } .whiteboard-checkbox-row:hover input[type="checkbox"]:not( [role="switch"] ) { border-color: var( --rtb-go ); } html[data-theme="dark"] input[type="checkbox"]:not( [role="switch"] ) { background-color: var( --rtb-surface-soft ); border-color: rgba( 255, 255, 255, 0.26 ); box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.3 ); } html[data-theme="dark"] input[type="checkbox"]:not( [role="switch"] ):hover, html[data-theme="dark"] input[type="checkbox"]:not( [role="switch"] ):focus-visible { border-color: #4ade80; box-shadow: 0 0 0 4px rgba( 74, 222, 128, 0.14 ); } html[data-theme="dark"] input[type="checkbox"]:not( [role="switch"] ):checked { background-color: var( --rtb-go ); border-color: #4ade80; box-shadow: 0 0 0 4px rgba( 74, 222, 128, 0.14 ); } / ============================================================ Authentication Autofill + Input Clipping ============================================================ / / The wrapper owns the visual shape. Inner controls must remain square so browser autofill cannot expose a second set of rounded corners. / .whiteboard-input-wrap, .whiteboard-login-form .whiteboard-input-wrap, .whiteboard-auth-form .whiteboard-input-wrap { isolation: isolate; overflow: hidden; } .whiteboard-input-wrap input, .whiteboard-login-form .whiteboard-input-wrap input, .whiteboard-auth-form .whiteboard-input-wrap input { border-radius: 0; min-width: 0; } / Chrome/Safari autofill otherwise paints its own pale-blue pill inside the wrapper. Use the same surface as the surrounding field and preserve the application's text colour. / .whiteboard-input-wrap input:-webkit-autofill, .whiteboard-input-wrap input:-webkit-autofill:hover, .whiteboard-input-wrap input:-webkit-autofill:focus, .whiteboard-login-form .whiteboard-input-wrap input:-webkit-autofill, .whiteboard-login-form .whiteboard-input-wrap input:-webkit-autofill:hover, .whiteboard-login-form .whiteboard-input-wrap input:-webkit-autofill:focus, .whiteboard-auth-form .whiteboard-input-wrap input:-webkit-autofill, .whiteboard-auth-form .whiteboard-input-wrap input:-webkit-autofill:hover, .whiteboard-auth-form .whiteboard-input-wrap input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #f3f6fb inset; -webkit-text-fill-color: var( --rtb-ink ); caret-color: var( --rtb-ink ); transition: background-color 9999s ease-out 0s; } .whiteboard-input-wrap:focus-within input:-webkit-autofill, .whiteboard-login-form .whiteboard-input-wrap:focus-within input:-webkit-autofill, .whiteboard-auth-form .whiteboard-input-wrap:focus-within input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #ffffff inset; } html[data-theme="dark"] .whiteboard-input-wrap input:-webkit-autofill, html[data-theme="dark"] .whiteboard-input-wrap input:-webkit-autofill:hover, html[data-theme="dark"] .whiteboard-input-wrap input:-webkit-autofill:focus, html[data-theme="dark"] .whiteboard-login-form .whiteboard-input-wrap input:-webkit-autofill, html[data-theme="dark"] .whiteboard-login-form .whiteboard-input-wrap input:-webkit-autofill:hover, html[data-theme="dark"] .whiteboard-login-form .whiteboard-input-wrap input:-webkit-autofill:focus, html[data-theme="dark"] .whiteboard-auth-form .whiteboard-input-wrap input:-webkit-autofill, html[data-theme="dark"] .whiteboard-auth-form .whiteboard-input-wrap input:-webkit-autofill:hover, html[data-theme="dark"] .whiteboard-auth-form .whiteboard-input-wrap input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var( --rtb-surface-soft ) inset; -webkit-text-fill-color: var( --rtb-ink ); caret-color: var( --rtb-ink ); } / ============================================================ Authentication Card Corner Clipping ============================================================ / / The footer uses a full-width background. Clip it to the card radius so its square bottom corners cannot extend beyond the rounded authentication card. / .whiteboard-login-card, .whiteboard-auth-card { overflow: hidden; } / ============================================================ Authentication Card Footer + Mobile Logo Spacing ============================================================ / .whiteboard-auth-logo { filter: none; } .whiteboard-auth-links { background: transparent; border-top: 1px solid var( --rtb-border ); justify-content: space-between; margin: 18px -34px 0; padding: 14px 34px 16px; } .whiteboard-auth-links a:first-child { justify-content: flex-start; text-align: left; } .whiteboard-auth-links a:last-child { justify-content: flex-end; text-align: right; } .whiteboard-auth-links-single { justify-content: center; } .whiteboard-auth-links-single a:first-child, .whiteboard-auth-links-single a:last-child { justify-content: center; text-align: center; } @media ( max-width: 760px ) { .whiteboard-auth-page .whiteboard-main { padding-top: 46px; } .whiteboard-auth-layout, .whiteboard-login-layout { gap: 34px; padding-top: 10px; } .whiteboard-auth-logo { margin-bottom: 0; } .whiteboard-auth-card, .whiteboard-login-card { padding: 0; } .whiteboard-auth-header, .whiteboard-login-header { margin: 0; padding: 20px 20px 18px; } .whiteboard-auth-header h1, .whiteboard-login-header h1 { font-size: 2.15rem; } .whiteboard-auth-form, .whiteboard-login-form { padding: 24px 20px 26px; } .whiteboard-auth-links { border-top: 1px solid var( --rtb-border ); gap: 16px; justify-content: space-between; margin: 0; padding: 16px 20px 18px; } .whiteboard-auth-links a { flex: 0 1 auto; white-space: nowrap; } } / Authentication branding follows the saved site theme. / .whiteboard-auth-logo-dark { display: none; } html[data-theme="dark"] .whiteboard-auth-logo-default { display: none; } html[data-theme="dark"] .whiteboard-auth-logo-dark { display: block; } / Notification target modal - pops the single result a hype/comment notification pointed at straight onto the screen, instead of opening the whole Whiteboard drawer and scrolling to find it. A bit wider than the default modal so the result card has room to breathe, and the row's own card chrome is stripped since the modal already provides that frame - otherwise it reads as a card nested inside a card. / .whiteboard-notification-target-modal { max-width: 480px; } .whiteboard-notification-target-body .whiteboard-whiteboard-row { border: 0; border-radius: 0; box-shadow: none; padding: 0; } / Notification deep-link target - the row/comment highlight pulses still used by the notification target modal's contents (workout.js and community.js both pop the specific result/post into a modal now rather than scrolling the page to it, so the whole-row marker + scroll-margin this used to need are gone, but the action/comment highlights inside that modal are still used). / .whiteboard-notification-action-target { position: relative; z-index: 3; / box-shadow automatically follows whatever border-radius the hype button/count-chip already has (full pill, or flush-left when a count chip is fused to it) - no need to set one here. / box-shadow: 0 0 0 2px rgba( 37, 99, 235, 0.58 ), 0 6px 18px rgba( 37, 99, 235, 0.22 ); animation: whiteboard-notification-action-pulse 1.15s ease-in-out 4; } / The class lands on .whiteboard-comment (matched via its data-comment-id) but that wrapper has no size of its own - .whiteboard-comment-body is the actual visible bubble, with its own opaque white background and a 12px radius. Styling the wrapper directly just gets fully covered by that bubble except for a sliver at the corners where the two radii don't quite line up, so the highlight needs to target the bubble itself instead. / .whiteboard-notification-comment-target { position: relative; z-index: 3; } / box-shadow here is an outer ring (not inset) on purpose: .whiteboard- comment-footer bleeds out to the body's edges via negative margins and paints its own opaque background over that area, so an inset shadow gets covered wherever the footer overlaps it, cutting the ring off above the footer instead of wrapping the whole card. A shadow drawn outside the box isn't affected by any of that. The footer's own background is tinted separately so it doesn't look cut off from the rest of the highlighted card. / .whiteboard-notification-comment-target .whiteboard-comment-body { border-radius: 12px; box-shadow: 0 0 0 2px rgba( 37, 99, 235, 0.58 ), 0 6px 18px rgba( 37, 99, 235, 0.22 ); animation: whiteboard-notification-comment-pulse 1.15s ease-in-out 4; } .whiteboard-notification-comment-target .whiteboard-comment-body, .whiteboard-notification-comment-target .whiteboard-comment-footer { background: rgba( 37, 99, 235, 0.08 ); } @keyframes whiteboard-notification-action-pulse { 0%, 100% { transform: scale( 1 ); filter: brightness( 1 ); box-shadow: 0 0 0 2px rgba( 37, 99, 235, 0.58 ), 0 6px 18px rgba( 37, 99, 235, 0.22 ); } 45% { transform: scale( 1.1 ); filter: brightness( 1.2 ); box-shadow: 0 0 0 5px rgba( 37, 99, 235, 0.42 ), 0 14px 34px rgba( 37, 99, 235, 0.28 ); } } html[data-theme="dark"] .whiteboard-notification-action-target { box-shadow: 0 0 0 2px rgba( 96, 165, 250, 0.72 ), 0 6px 18px rgba( 96, 165, 250, 0.2 ); animation-name: whiteboard-notification-action-pulse-dark; } @keyframes whiteboard-notification-action-pulse-dark { 0%, 100% { transform: scale( 1 ); filter: brightness( 1 ); box-shadow: 0 0 0 2px rgba( 96, 165, 250, 0.72 ), 0 6px 18px rgba( 96, 165, 250, 0.2 ); } 45% { transform: scale( 1.1 ); filter: brightness( 1.2 ); box-shadow: 0 0 0 5px rgba( 96, 165, 250, 0.55 ), 0 14px 34px rgba( 96, 165, 250, 0.26 ); } } @keyframes whiteboard-notification-comment-pulse { 0%, 100% { box-shadow: 0 0 0 2px rgba( 37, 99, 235, 0.58 ), 0 6px 18px rgba( 37, 99, 235, 0.22 ); } 45% { box-shadow: 0 0 0 5px rgba( 37, 99, 235, 0.42 ), 0 14px 34px rgba( 37, 99, 235, 0.28 ); } } html[data-theme="dark"] .whiteboard-notification-comment-target .whiteboard-comment-body { box-shadow: 0 0 0 2px rgba( 96, 165, 250, 0.72 ), 0 6px 18px rgba( 96, 165, 250, 0.2 ); animation-name: whiteboard-notification-comment-pulse-dark; } @keyframes whiteboard-notification-comment-pulse-dark { 0%, 100% { box-shadow: 0 0 0 2px rgba( 96, 165, 250, 0.72 ), 0 6px 18px rgba( 96, 165, 250, 0.2 ); } 45% { box-shadow: 0 0 0 5px rgba( 96, 165, 250, 0.55 ), 0 14px 34px rgba( 96, 165, 250, 0.26 ); } } html[data-theme="dark"] .whiteboard-notification-comment-target .whiteboard-comment-body, html[data-theme="dark"] .whiteboard-notification-comment-target .whiteboard-comment-footer { background: rgba( 96, 165, 250, 0.14 ); } html[data-theme="dark"] .whiteboard-comment-reactions { background: var( --rtb-surface ); } html[data-theme="dark"] .whiteboard-comment-reaction-count:hover, html[data-theme="dark"] .whiteboard-comment-reaction-count:focus-visible { background: rgba( 255, 255, 255, 0.05 ); } html[data-theme="dark"] .whiteboard-hype-wrap { background: var( --rtb-surface ); } html[data-theme="dark"] .whiteboard-hype-view-button:hover, html[data-theme="dark"] .whiteboard-hype-view-button:focus-visible { background: rgba( 255, 255, 255, 0.05 ); } / Comment reactions / .whiteboard-comment-footer { align-items: center; background: #f8fafc; border-top: 1px solid var( --rtb-border ); display: flex; gap: 10px; justify-content: space-between; margin: 12px -14px -12px; min-height: 44px; padding: 8px 10px 8px 14px; border-radius: 0 0 11px 11px; } .whiteboard-comment-reactions { align-items: center; background: #ffffff; border: 1px solid var( --rtb-border ); border-radius: 999px; display: inline-flex; flex-wrap: nowrap; gap: 0; min-width: 0; position: relative; } .whiteboard-comment-react-wrap { position: relative; } .whiteboard-comment-react-button { position: relative; -webkit-touch-callout: none; -webkit-user-select: none; touch-action: manipulation; user-select: none; } .whiteboard-comment-react-button, .whiteboard-comment-reaction-count { align-items: center; background: transparent; border: 0; color: var( --rtb-muted ); cursor: pointer; display: inline-flex; font-size: 0.76rem; font-weight: 800; min-height: 30px; } .whiteboard-comment-react-button { border-radius: 999px 0 0 999px; font-size: 1rem; justify-content: center; min-width: 34px; padding: 4px 8px; } / The asymmetric radius above only makes sense when a reaction-count chip is fused to its right - when there's no chip (nobody's reacted yet), the react-wrap is the only child left in .whiteboard-comment- reactions, and the button's un-rounded right corners are left exposed square against the pill's own rounded outline, reading as jagged notches on hover. Round it out fully in that case. / .whiteboard-comment-react-wrap:last-child .whiteboard-comment-react-button { border-radius: 999px; } .whiteboard-comment-react-button:hover, .whiteboard-comment-react-button:focus-visible { background: var( --rtb-red-soft ); color: var( --rtb-red-text ); outline: none; } .whiteboard-comment-react-button-active { color: var( --rtb-red-text ); } .whiteboard-comment-react-button i { color: #f59e0b; } .whiteboard-comment-react-button-active i { color: var( --rtb-red ); } .whiteboard-comment-react-button-active::after { align-items: center; background: var( --rtb-go ); border: 2px solid #ffffff; border-radius: 50%; bottom: -2px; color: #ffffff; content: '\f00c'; display: flex; font-family: 'Font Awesome 6 Free'; font-size: 0.42rem; font-weight: 900; height: 12px; justify-content: center; position: absolute; right: -2px; width: 12px; } .whiteboard-comment-reaction-picker { align-items: stretch; background: #ffffff; border: 1px solid var( --rtb-border ); border-radius: 16px; bottom: calc( 100% + 5px ); box-shadow: 0 14px 35px rgba( 15, 23, 42, 0.2 ); display: flex; gap: 0; left: -6px; opacity: 0; padding: 0; pointer-events: none; position: absolute; transform: translateY( 5px ) scale( 0.96 ); transform-origin: left bottom; transition: opacity 0.14s ease, transform 0.14s ease, visibility 0s linear 0.18s; visibility: hidden; white-space: nowrap; z-index: 20; -webkit-touch-callout: none; -webkit-user-select: none; touch-action: manipulation; user-select: none; } / Keep the hover target connected to the trigger so the picker does not * disappear while the pointer crosses the small visual gap. / .whiteboard-comment-reaction-picker::after { background: transparent; bottom: -8px; content: ''; height: 10px; left: 0; position: absolute; right: 0; } .whiteboard-comment-react-wrap:focus-within .whiteboard-comment-reaction-picker, .whiteboard-comment-react-wrap.whiteboard-comment-reaction-picker-open .whiteboard-comment-reaction-picker { opacity: 1; pointer-events: auto; transform: translateY( 0 ) scale( 1 ); transition-delay: 0s; visibility: visible; } .whiteboard-comment-reaction-option { align-items: center; background: transparent; border: 0; border-radius: 0; cursor: pointer; display: flex; flex-direction: column; gap: 2px; justify-content: center; min-width: 50px; padding: 9px 6px; } .whiteboard-comment-reaction-option:first-child { border-radius: 15px 0 0 15px; } .whiteboard-comment-reaction-option:last-child { border-radius: 0 15px 15px 0; } .whiteboard-comment-reaction-option span { align-items: center; display: flex; font-size: 1.35rem; height: 28px; justify-content: center; line-height: 1; transition: transform 0.12s ease; } .whiteboard-comment-reaction-option span i { color: var( --rtb-red ); font-size: 1.25rem; } .whiteboard-comment-reaction-option small { color: var( --rtb-muted ); font-size: 0.58rem; font-weight: 800; } .whiteboard-comment-reaction-option:hover, .whiteboard-comment-reaction-option:focus-visible, .whiteboard-comment-reaction-option-active, .whiteboard-comment-reaction-option-drag-active { background: #f8fafc; outline: none; } .whiteboard-comment-reaction-option:hover span, .whiteboard-comment-reaction-option:focus-visible span, .whiteboard-comment-reaction-option-drag-active span { transform: scale( 1.22 ) translateY( -2px ); } .whiteboard-comment-reaction-count { border-left: 1px solid var( --rtb-border ); border-radius: 0 999px 999px 0; justify-content: center; min-width: 28px; padding: 4px 8px 4px 7px; } / On your own comments there's no react-button to fuse against (you can't react to your own comment), so the count chip is the only real control in the pill - give it the full rounded shape and drop the divider border that only makes sense when a button sits to its left. Targeted by an explicit class rather than :only-child, since the (hidden) reaction-details panel is always a sibling too and would otherwise quietly stop that selector from ever matching. / .whiteboard-comment-reactions-solo .whiteboard-comment-reaction-count { border-left: 0; border-radius: 999px; gap: 6px; padding: 4px 9px; } .whiteboard-comment-reaction-count-icon { font-size: 0.9rem; line-height: 1; } .whiteboard-comment-reaction-count:hover, .whiteboard-comment-reaction-count:focus-visible { background: #f8fafc; color: var( --rtb-ink ); outline: none; } .whiteboard-comment-reaction-details { background: #ffffff; border: 1px solid var( --rtb-border ); border-radius: 12px; box-shadow: 0 12px 30px rgba( 15, 23, 42, 0.16 ); left: 0; min-width: 220px; padding: 8px; position: absolute; top: calc( 100% + 6px ); z-index: 19; } .whiteboard-comment-reaction-details > div { align-items: center; display: grid; gap: 7px; grid-template-columns: 24px 52px minmax( 0, 1fr ); padding: 6px; } / Emoji reactions (Strong, Like, etc.) render in their own native colors regardless of CSS - only the hype icon is a Font Awesome glyph here, which otherwise inherits plain text color instead of matching the red it's drawn in everywhere else it appears (the react button, the picker). / .whiteboard-comment-reaction-details i { color: var( --rtb-red ); } .whiteboard-comment-reaction-details strong { color: var( --rtb-ink ); font-size: 0.72rem; } .whiteboard-comment-reaction-details small { color: var( --rtb-muted ); font-size: 0.7rem; line-height: 1.35; } @media ( max-width: 768px ) { .whiteboard-comment-footer { align-items: center; flex-direction: row; flex-wrap: wrap; } .whiteboard-comment-actions { margin-left: auto; margin-top: 0; } .whiteboard-comment-reaction-picker { left: -2px; max-width: calc( 100vw - 52px ); overflow-x: auto; } } / ============================================================ Admin Notification Email Test ============================================================ / .admin-card-email { --admin-card-accent: #e11d48; --admin-card-soft: rgba( 225, 29, 72, 0.12 ); } .whiteboard-admin-email-test-grid { display: grid; gap: 24px; grid-template-columns: minmax( 0, 1.5fr ) minmax( 300px, 0.8fr ); } .whiteboard-admin-email-test-card, .whiteboard-admin-email-test-details { padding: 28px; } .whiteboard-admin-email-test-header { align-items: flex-start; display: flex; gap: 16px; margin-bottom: 26px; } .whiteboard-admin-email-test-header h2, .whiteboard-admin-email-test-details h2 { color: var( --rtb-ink ); font-size: 1.4rem; font-weight: 900; letter-spacing: -0.03em; margin: 0 0 7px; } .whiteboard-admin-email-test-header p, .whiteboard-admin-email-test-details > p:not( .whiteboard-admin-email-test-eyebrow ) { color: var( --rtb-muted ); line-height: 1.55; margin: 0; } .whiteboard-admin-email-test-icon { align-items: center; background: rgba( 225, 29, 72, 0.1 ); border: 1px solid rgba( 225, 29, 72, 0.2 ); border-radius: 15px; color: #e11d48; display: inline-flex; flex: 0 0 auto; font-size: 1.25rem; height: 52px; justify-content: center; width: 52px; } .whiteboard-admin-email-test-form { display: flex; flex-direction: column; gap: 20px; } .whiteboard-admin-email-recipient { align-items: center; background: var( --rtb-surface-soft ); border: 1px solid var( --rtb-border ); border-radius: var( --rtb-radius-sm ); color: var( --rtb-ink ); display: flex; font-weight: 800; gap: 11px; min-height: 48px; padding: 11px 14px; word-break: break-word; } .whiteboard-admin-email-recipient i { color: #e11d48; } .whiteboard-admin-email-test-button { align-self: flex-start; gap: 9px; margin-top: 2px; } .whiteboard-admin-email-test-details { align-self: start; background: linear-gradient( 145deg, #fff7f9 0%, #ffffff 72% ); border-color: rgba( 225, 29, 72, 0.16 ); } .whiteboard-admin-email-test-eyebrow { color: #e11d48; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.13em; margin: 0 0 9px; text-transform: uppercase; } .whiteboard-admin-email-test-details ul { display: flex; flex-direction: column; gap: 13px; list-style: none; margin: 24px 0; padding: 0; } .whiteboard-admin-email-test-details li { align-items: flex-start; color: var( --rtb-text ); display: flex; font-size: 0.94rem; font-weight: 750; gap: 10px; line-height: 1.45; } .whiteboard-admin-email-test-details li i { align-items: center; background: rgba( 22, 163, 74, 0.12 ); border-radius: 999px; color: #16a34a; display: inline-flex; flex: 0 0 auto; font-size: 0.65rem; height: 21px; justify-content: center; margin-top: 1px; width: 21px; } .whiteboard-admin-email-test-note { align-items: flex-start; background: rgba( 59, 130, 246, 0.08 ); border: 1px solid rgba( 59, 130, 246, 0.14 ); border-radius: 14px; display: flex; gap: 11px; padding: 14px; } .whiteboard-admin-email-test-note > i { color: #2563eb; flex: 0 0 auto; margin-top: 2px; } .whiteboard-admin-email-test-note p { color: var( --rtb-text ); font-size: 0.86rem; line-height: 1.5; margin: 0; } html[data-theme="dark"] .whiteboard-admin-email-test-details { background: linear-gradient( 145deg, rgba( 225, 29, 72, 0.08 ) 0%, var( --rtb-surface ) 72% ); border-color: rgba( 251, 113, 133, 0.22 ); } html[data-theme="dark"] .whiteboard-admin-email-test-icon { background: rgba( 251, 113, 133, 0.1 ); border-color: rgba( 251, 113, 133, 0.2 ); color: #fb7185; } html[data-theme="dark"] .whiteboard-admin-email-recipient { background: rgba( 255, 255, 255, 0.035 ); } html[data-theme="dark"] .whiteboard-admin-email-recipient i, html[data-theme="dark"] .whiteboard-admin-email-test-eyebrow { color: #fb7185; } html[data-theme="dark"] .whiteboard-admin-email-test-note { background: rgba( 59, 130, 246, 0.1 ); border-color: rgba( 96, 165, 250, 0.2 ); } @media ( max-width: 900px ) { .whiteboard-admin-email-test-grid { grid-template-columns: 1fr; } } @media ( max-width: 600px ) { .whiteboard-admin-email-test-card, .whiteboard-admin-email-test-details { padding: 22px; } .whiteboard-admin-email-test-header { gap: 13px; } .whiteboard-admin-email-test-icon { height: 46px; width: 46px; } .whiteboard-admin-email-test-button { justify-content: center; width: 100%; } } / ============================================================ Notification Email Unsubscribe ============================================================ / .whiteboard-unsubscribe-layout { gap: clamp( 24px, 4vh, 38px ); } .whiteboard-unsubscribe-card { padding-bottom: 30px; text-align: center; } .whiteboard-unsubscribe-icon { align-items: center; background: rgba( 37, 99, 235, 0.09 ); border: 1px solid rgba( 37, 99, 235, 0.16 ); border-radius: 50%; color: #2563eb; display: inline-flex; font-size: 1.35rem; height: 58px; justify-content: center; margin: 0 auto 22px; width: 58px; } .whiteboard-unsubscribe-icon-success { background: rgba( 22, 163, 74, 0.1 ); border-color: rgba( 22, 163, 74, 0.2 ); color: var( --rtb-go ); } .whiteboard-unsubscribe-icon-error { background: rgba( 220, 38, 38, 0.09 ); border-color: rgba( 220, 38, 38, 0.18 ); color: #dc2626; } .whiteboard-unsubscribe-header { margin-bottom: 24px; } .whiteboard-unsubscribe-header h1 { font-size: clamp( 1.85rem, 4vw, 2.55rem ); } .whiteboard-unsubscribe-copy { color: var( --rtb-muted ); font-size: 0.98rem; line-height: 1.6; margin: 14px auto 0; max-width: 430px; } .whiteboard-unsubscribe-form { margin-top: 4px; } .whiteboard-unsubscribe-note { align-items: flex-start; background: rgba( 22, 163, 74, 0.07 ); border: 1px solid rgba( 22, 163, 74, 0.15 ); border-radius: 14px; display: flex; gap: 12px; margin-top: 2px; padding: 15px 16px; text-align: left; } .whiteboard-unsubscribe-note i { color: var( --rtb-go ); flex: 0 0 auto; margin-top: 3px; } .whiteboard-unsubscribe-note p { color: var( --rtb-text ); font-size: 0.88rem; line-height: 1.5; margin: 0; } html[data-theme="dark"] .whiteboard-unsubscribe-icon { background: rgba( 96, 165, 250, 0.12 ); border-color: rgba( 96, 165, 250, 0.2 ); color: #60a5fa; } html[data-theme="dark"] .whiteboard-unsubscribe-icon-success { background: rgba( 34, 197, 94, 0.12 ); border-color: rgba( 34, 197, 94, 0.22 ); color: #4ade80; } html[data-theme="dark"] .whiteboard-unsubscribe-icon-error { background: rgba( 248, 113, 113, 0.12 ); border-color: rgba( 248, 113, 113, 0.22 ); color: #f87171; } html[data-theme="dark"] .whiteboard-unsubscribe-note { background: rgba( 34, 197, 94, 0.08 ); border-color: rgba( 74, 222, 128, 0.17 ); } @media ( max-width: 760px ) { .whiteboard-unsubscribe-card { padding: 28px 0 24px; } .whiteboard-unsubscribe-icon { margin-bottom: 0; } .whiteboard-unsubscribe-note { margin: 2px 20px 0; } } / ============================================================ Privacy Policy ============================================================ / .whiteboard-privacy-page { box-sizing: border-box; margin: 0 auto; max-width: 900px; padding: 0 20px; width: 100%; } .whiteboard-privacy-hero { margin-bottom: 24px; text-align: center; } .whiteboard-privacy-logo { display: block; height: auto; margin: 0 auto 26px; max-width: 220px; width: 62%; } html[data-theme="dark"] .whiteboard-privacy-logo { filter: brightness( 0 ) invert( 1 ); } .whiteboard-privacy-eyebrow { color: var( --rtb-red ); font-size: 0.76rem; font-weight: 900; letter-spacing: 0.12em; margin: 0 0 10px; text-transform: uppercase; } .whiteboard-privacy-hero h1 { color: var( --rtb-text ); font-size: clamp( 2rem, 6vw, 3.2rem ); letter-spacing: -0.05em; line-height: 1; margin: 0; } .whiteboard-privacy-intro { color: var( --rtb-muted ); font-size: 1rem; line-height: 1.65; margin: 18px auto 0; max-width: 680px; } .whiteboard-privacy-updated { color: var( --rtb-muted ); font-size: 0.82rem; font-weight: 750; margin: 14px 0 0; } .whiteboard-privacy-card { padding: clamp( 24px, 5vw, 46px ); } .whiteboard-privacy-summary { background: rgba( 37, 99, 235, 0.07 ); border: 1px solid rgba( 37, 99, 235, 0.14 ); border-radius: 16px; color: var( --rtb-text ); line-height: 1.6; margin-bottom: 34px; padding: 17px 19px; } .whiteboard-privacy-summary strong { display: block; margin-bottom: 4px; } .whiteboard-privacy-section + .whiteboard-privacy-section { border-top: 1px solid var( --rtb-border ); margin-top: 32px; padding-top: 32px; } .whiteboard-privacy-section h2 { color: var( --rtb-text ); font-size: 1.28rem; letter-spacing: -0.025em; margin: 0 0 12px; } .whiteboard-privacy-section h3 { color: var( --rtb-text ); font-size: 1rem; margin: 22px 0 8px; } .whiteboard-privacy-section p, .whiteboard-privacy-section li { color: var( --rtb-muted ); font-size: 0.95rem; line-height: 1.68; text-wrap: pretty; } .whiteboard-privacy-section p { margin: 0 0 14px; } .whiteboard-privacy-section p:last-child { margin-bottom: 0; } .whiteboard-privacy-section ul { margin: 0; padding-left: 1.25rem; } .whiteboard-privacy-section li + li { margin-top: 9px; } .whiteboard-privacy-section a, .whiteboard-auth-privacy-note a { color: #2563eb; font-weight: 750; } .whiteboard-privacy-contact { background: var( --rtb-surface-muted ); border-radius: 16px; margin-top: 16px; padding: 18px; } .whiteboard-privacy-contact address { color: var( --rtb-muted ); font-style: normal; line-height: 1.7; } .whiteboard-auth-privacy-note { color: var( --rtb-muted ); font-size: 0.78rem; line-height: 1.5; margin: 12px 0 0; text-align: center; text-wrap: pretty; } .whiteboard-auth-privacy-note a { white-space: nowrap; } html[data-theme="dark"] .whiteboard-privacy-summary { background: rgba( 96, 165, 250, 0.09 ); border-color: rgba( 96, 165, 250, 0.18 ); } html[data-theme="dark"] .whiteboard-privacy-section a, html[data-theme="dark"] .whiteboard-auth-privacy-note a { color: #60a5fa; } @media ( max-width: 600px ) { .whiteboard-privacy-logo { margin-bottom: 20px; max-width: 185px; } .whiteboard-privacy-card { padding: 24px 20px; } } / ============================================================ Public Support ============================================================ / .whiteboard-support-page { box-sizing: border-box; margin: 0 auto; max-width: 1120px; padding: 0 20px; width: 100%; } .whiteboard-support-hero { margin-left: auto; margin-right: auto; max-width: 820px; } .whiteboard-support-grid { align-items: start; display: grid; gap: 22px; grid-template-columns: minmax( 0, 1.45fr ) minmax( 300px, 0.75fr ); } .whiteboard-support-form-card, .whiteboard-support-contact-card, .whiteboard-support-safety-card, .whiteboard-support-quick-card { padding: 26px; } .whiteboard-support-card-header { align-items: flex-start; display: flex; gap: 15px; margin-bottom: 22px; } .whiteboard-support-card-icon { align-items: center; background: rgba( 45, 156, 219, 0.11 ); border: 1px solid rgba( 45, 156, 219, 0.19 ); border-radius: 14px; color: #2385bd; display: inline-flex; flex: 0 0 auto; font-size: 1.1rem; height: 48px; justify-content: center; width: 48px; } .whiteboard-support-card-header h2, .whiteboard-support-sidebar-heading h2, .whiteboard-support-safety-card h2, .whiteboard-support-quick-heading h2 { color: var( --rtb-ink ); font-size: 1.3rem; font-weight: 900; letter-spacing: -0.035em; line-height: 1.2; margin: 0; } .whiteboard-support-card-header > div > p:last-child { color: var( --rtb-muted ); font-size: 0.88rem; line-height: 1.5; margin: 5px 0 0; } .whiteboard-support-card-eyebrow { color: #2385bd; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.11em; margin: 0 0 4px; text-transform: uppercase; } .whiteboard-support-signed-in { align-items: flex-start; background: rgba( 22, 163, 74, 0.07 ); border: 1px solid rgba( 22, 163, 74, 0.15 ); border-radius: 13px; color: var( --rtb-text ); display: flex; font-size: 0.83rem; gap: 9px; line-height: 1.5; margin-bottom: 22px; padding: 11px 13px; } .whiteboard-support-signed-in i { color: var( --rtb-go ); flex: 0 0 auto; margin-top: 3px; } .whiteboard-support-form { display: grid; gap: 18px; } .whiteboard-support-form-row { display: grid; gap: 14px; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } .whiteboard-support-form .whiteboard-help-form-group { margin: 0; } .whiteboard-support-form .whiteboard-help-form-group label { color: var( --rtb-ink ); font-size: 0.76rem; font-weight: 850; letter-spacing: 0.02em; margin-bottom: 7px; } .whiteboard-support-form .whiteboard-help-form-group label span { color: var( --rtb-muted ); float: right; font-size: 0.68rem; font-weight: 700; letter-spacing: 0; } .whiteboard-support-form .whiteboard-help-form-group input, .whiteboard-support-form .whiteboard-help-form-group select, .whiteboard-support-form .whiteboard-help-form-group textarea { background: var( --rtb-surface ); border-color: var( --rtb-border-strong ); border-radius: 12px; } .whiteboard-support-form .whiteboard-help-form-group textarea { line-height: 1.5; min-height: 170px; padding: 14px 15px; } .whiteboard-support-form .whiteboard-help-form-group input:focus, .whiteboard-support-form .whiteboard-help-form-group select:focus, .whiteboard-support-form .whiteboard-help-form-group textarea:focus { border-color: var( --rtb-focus-border ); box-shadow: 0 0 0 4px var( --rtb-focus ); outline: none; } .whiteboard-support-form-note { align-items: center; color: var( --rtb-muted ); display: flex; font-size: 0.76rem; gap: 7px; margin: -3px 0 0; } .whiteboard-support-form-note i { color: var( --rtb-go ); } .whiteboard-support-form .whiteboard-form-message { margin: 0; } .whiteboard-support-submit { justify-self: start; margin: 0; } .whiteboard-support-sidebar { display: grid; gap: 22px; } .whiteboard-support-sidebar-heading { align-items: center; display: flex; gap: 12px; margin-bottom: 18px; } .whiteboard-support-sidebar-heading > span { align-items: center; background: rgba( 139, 92, 246, 0.11 ); border-radius: 12px; color: #7c3aed; display: inline-flex; flex: 0 0 auto; height: 42px; justify-content: center; width: 42px; } .whiteboard-support-sidebar-heading p { color: #7c3aed; font-size: 0.66rem; font-weight: 900; letter-spacing: 0.1em; margin: 0 0 2px; text-transform: uppercase; } .whiteboard-support-sidebar-heading h2 { font-size: 1.08rem; } .whiteboard-support-contact-list { display: grid; font-style: normal; gap: 0; } .whiteboard-support-contact-list > a, .whiteboard-support-contact-list > div { align-items: flex-start; border-top: 1px solid var( --rtb-border ); color: var( --rtb-ink ); display: flex; font-size: 0.82rem; font-weight: 800; gap: 11px; line-height: 1.5; padding: 12px 0; text-decoration: none; } .whiteboard-support-contact-list > :last-child { padding-bottom: 0; } .whiteboard-support-contact-list > a:hover, .whiteboard-support-contact-list > a:focus-visible { color: var( --rtb-red-text ); } .whiteboard-support-contact-list > a > i, .whiteboard-support-contact-list > div > i { color: var( --rtb-muted ); margin-top: 4px; text-align: center; width: 16px; } .whiteboard-support-contact-list span { min-width: 0; overflow-wrap: anywhere; } .whiteboard-support-contact-list small { color: var( --rtb-muted ); display: block; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.07em; margin-bottom: 1px; text-transform: uppercase; } .whiteboard-support-safety-card { background: linear-gradient( 145deg, rgba( 200, 32, 47, 0.06 ), transparent 58% ), var( --rtb-surface ); } .whiteboard-support-safety-heading { align-items: center; display: flex; gap: 12px; margin-bottom: 13px; } .whiteboard-support-safety-icon { align-items: center; background: var( --rtb-red-soft ); border-radius: 12px; color: var( --rtb-red-text ); display: inline-flex; flex: 0 0 auto; height: 42px; justify-content: center; width: 42px; } .whiteboard-support-safety-card h2 { font-size: 1.08rem; margin: 0; } .whiteboard-support-safety-card p { color: var( --rtb-muted ); font-size: 0.82rem; line-height: 1.58; margin: 0 0 13px; text-wrap: pretty; } .whiteboard-support-safety-card a, .whiteboard-support-quick-grid a { align-items: center; color: #2563eb; display: inline-flex; font-size: 0.78rem; font-weight: 850; gap: 7px; text-decoration: none; } .whiteboard-support-safety-card a:hover, .whiteboard-support-safety-card a:focus-visible, .whiteboard-support-quick-grid a:hover, .whiteboard-support-quick-grid a:focus-visible { text-decoration: underline; } .whiteboard-support-quick-card { margin-top: 22px; } .whiteboard-support-quick-heading { margin-bottom: 20px; } .whiteboard-support-quick-grid { display: grid; gap: 0; grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); } .whiteboard-support-quick-grid article { align-content: start; display: grid; gap: 0 13px; grid-template-columns: 38px minmax( 0, 1fr ); padding: 2px 24px; } .whiteboard-support-quick-grid article:first-child { padding-left: 0; } .whiteboard-support-quick-grid article:last-child { padding-right: 0; } .whiteboard-support-quick-grid article + article { border-left: 1px solid var( --rtb-border ); } .whiteboard-support-quick-grid h3 { grid-column: 2; font-size: 0.96rem; margin: 0 0 5px; } .whiteboard-support-quick-grid p { color: var( --rtb-muted ); font-size: 0.79rem; grid-column: 2; line-height: 1.55; margin: 0 0 10px; text-wrap: pretty; } .whiteboard-support-quick-grid a { grid-column: 2; justify-self: start; } .whiteboard-support-quick-icon { align-items: center; background: rgba( 45, 156, 219, 0.1 ); border-radius: 11px; color: #2385bd; display: inline-flex; grid-column: 1; grid-row: 1 / span 3; height: 38px; justify-content: center; width: 38px; } .whiteboard-support-quick-icon-notifications { background: rgba( 245, 158, 11, 0.11 ); color: #b77905; } .whiteboard-support-quick-icon-delete { background: var( --rtb-red-soft ); color: var( --rtb-red-text ); } .whiteboard-inline-more-icon { align-items: center; background: rgba( 17, 24, 39, 0.06 ); border: 1px solid var( --rtb-border ); border-radius: 999px; color: var( --rtb-muted ); display: inline-flex; flex: 0 0 auto; font-size: 0.64rem; height: 22px; justify-content: center; line-height: 1; margin: 0 2px; position: relative; top: -1px; vertical-align: middle; width: 22px; } html[data-theme="dark"] .whiteboard-inline-more-icon { background: rgba( 255, 255, 255, 0.08 ); } html[data-theme="dark"] .whiteboard-support-card-icon { color: #7dd3fc; } html[data-theme="dark"] .whiteboard-support-sidebar-heading > span, html[data-theme="dark"] .whiteboard-support-sidebar-heading p { color: #c4b5fd; } html[data-theme="dark"] .whiteboard-support-signed-in { background: rgba( 34, 197, 94, 0.08 ); border-color: rgba( 74, 222, 128, 0.17 ); } html[data-theme="dark"] .whiteboard-support-form .whiteboard-help-form-group input, html[data-theme="dark"] .whiteboard-support-form .whiteboard-help-form-group select, html[data-theme="dark"] .whiteboard-support-form .whiteboard-help-form-group textarea { background: var( --rtb-surface-soft ); border-color: var( --rtb-border-strong ); color: var( --rtb-ink ); } html[data-theme="dark"] .whiteboard-support-form .whiteboard-help-form-group input::placeholder, html[data-theme="dark"] .whiteboard-support-form .whiteboard-help-form-group textarea::placeholder { color: var( --rtb-muted ); } html[data-theme="dark"] .whiteboard-support-form .whiteboard-help-form-group select option { background: var( --rtb-surface ); color: var( --rtb-ink ); } html[data-theme="dark"] .whiteboard-support-safety-card { background: linear-gradient( 145deg, rgba( 239, 125, 134, 0.06 ), transparent 58% ), var( --rtb-surface ); } html[data-theme="dark"] .whiteboard-support-safety-card a, html[data-theme="dark"] .whiteboard-support-quick-grid a { color: #60a5fa; } @media ( max-width: 860px ) { .whiteboard-support-grid { grid-template-columns: 1fr; } .whiteboard-support-sidebar { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } } @media ( max-width: 700px ) { .whiteboard-support-form-card, .whiteboard-support-contact-card, .whiteboard-support-safety-card, .whiteboard-support-quick-card { padding: 21px; } .whiteboard-support-form-row, .whiteboard-support-sidebar, .whiteboard-support-quick-grid { grid-template-columns: 1fr; } .whiteboard-support-quick-grid article, .whiteboard-support-quick-grid article:first-child, .whiteboard-support-quick-grid article:last-child { padding: 18px 0; } .whiteboard-support-quick-grid article:first-child { padding-top: 0; } .whiteboard-support-quick-grid article:last-child { padding-bottom: 0; } .whiteboard-support-quick-grid article + article { border-left: 0; border-top: 1px solid var( --rtb-border ); } .whiteboard-support-submit { width: 100%; } } / ============================================================ Community Safety / Moderation ============================================================ / .whiteboard-whiteboard-row:has(.whiteboard-card-more-wrap) .whiteboard-whiteboard-name-line { padding-right: 62px; } .whiteboard-card-more-wrap { position: absolute; right: 16px; top: 20px; z-index: 8; } .whiteboard-card-more-button { align-items: center; background: rgba( 17, 24, 39, 0.05 ); border: 0; border-radius: 999px; color: var( --rtb-muted ); cursor: pointer; display: inline-flex; height: 32px; justify-content: center; transition: background 0.15s ease, color 0.15s ease; width: 32px; } .whiteboard-card-more-button:hover, .whiteboard-card-more-button:focus-visible, .whiteboard-card-more-button[aria-expanded="true"] { background: rgba( 17, 24, 39, 0.1 ); color: var( --rtb-ink ); outline: none; } .whiteboard-card-more-menu { background: var( --rtb-surface ); border: 1px solid var( --rtb-border ); border-radius: 12px; box-shadow: 0 12px 30px rgba( 15, 23, 42, 0.18 ); min-width: 142px; overflow: hidden; padding: 6px; position: absolute; right: 0; top: calc( 100% + 6px ); } .whiteboard-card-more-option { align-items: center; background: transparent; border: 0; border-radius: 8px; color: var( --rtb-ink ); cursor: pointer; display: flex; font-family: inherit; font-size: 0.86rem; font-weight: 700; gap: 10px; padding: 9px 10px; text-align: left; width: 100%; } .whiteboard-card-more-option i { color: var( --rtb-muted ); font-size: 0.82rem; text-align: center; width: 14px; } .whiteboard-card-more-option:hover, .whiteboard-card-more-option:focus-visible { background: var( --rtb-surface-muted ); outline: none; } .whiteboard-card-more-option-danger, .whiteboard-card-more-option-danger i { color: var( --rtb-red-text ); } .whiteboard-card-more-option-danger:hover, .whiteboard-card-more-option-danger:focus-visible { background: var( --rtb-red-soft ); } / Every comment now has an options menu: Edit/Delete for its author and Report/Block for everyone else. / .whiteboard-comment-has-menu .whiteboard-comment-body { padding-right: 38px; } .whiteboard-comment-has-menu .whiteboard-comment-footer { margin-right: -38px; } .whiteboard-report-modal { max-width: 560px; } .whiteboard-report-modal-icon { background: var( --rtb-red-soft ); color: var( --rtb-red-text ); } .whiteboard-report-form { display: grid; gap: 20px; } .whiteboard-report-form select { width: 100%; } .whiteboard-report-form textarea { background: var( --rtb-surface ); border: 1px solid var( --rtb-border-strong ); border-radius: 16px; color: var( --rtb-ink ); font: inherit; line-height: 1.45; min-height: 120px; padding: 0.85rem 1rem; resize: vertical; width: 100%; } .whiteboard-report-form textarea:focus { border-color: var( --rtb-focus-border ); box-shadow: 0 0 0 4px var( --rtb-focus ); outline: none; } .whiteboard-report-form textarea::placeholder { color: var( --rtb-muted ); } .whiteboard-report-block-row { align-items: flex-start; margin-top: 2px; } .whiteboard-report-block-row strong { color: var( --rtb-ink ); } .whiteboard-report-block-note { color: var( --rtb-muted ); font-size: 0.8rem; line-height: 1.55; margin: -10px 0 0 30px; } #profile-account-tab .whiteboard-profile-password-card.whiteboard-profile-blocked-card { grid-column: 1 / -1; order: 4; } #profile-account-tab .whiteboard-profile-password-card.whiteboard-profile-signout-card { order: 5; } #profile-account-tab .whiteboard-profile-password-card.whiteboard-profile-deletion-card { order: 6; } .whiteboard-profile-blocked-list { display: grid; padding: 8px 26px; } .whiteboard-profile-blocked-member { align-items: center; border-bottom: 1px solid var( --rtb-border ); display: flex; gap: 16px; justify-content: space-between; padding: 14px 0; } .whiteboard-profile-blocked-member:last-child { border-bottom: 0; } .whiteboard-profile-blocked-identity { align-items: center; display: flex; gap: 12px; min-width: 0; } .whiteboard-profile-blocked-identity strong { color: var( --rtb-ink ); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .whiteboard-profile-blocked-member .whiteboard-button { flex: 0 0 auto; margin: 0; min-height: 36px; padding: 7px 14px; } .whiteboard-profile-blocked-empty { align-items: center; color: var( --rtb-muted ); display: flex; font-size: 0.9rem; gap: 10px; padding: 18px 0; } .whiteboard-profile-blocked-empty i { color: #16a34a; } .whiteboard-profile-blocked-card > .whiteboard-form-message { margin: 0 26px; } .whiteboard-profile-safety-link { border-top: 1px solid var( --rtb-border ); margin: 8px 0 0; padding: 18px 26px 22px; } .whiteboard-profile-safety-link a { align-items: center; color: #2563eb; display: inline-flex; font-size: 0.88rem; font-weight: 800; gap: 8px; text-decoration: none; } .whiteboard-profile-safety-link a:hover, .whiteboard-profile-safety-link a:focus-visible { text-decoration: underline; } .whiteboard-guidelines-summary { background: rgba( 22, 163, 74, 0.07 ); border-color: rgba( 22, 163, 74, 0.16 ); } .admin-card-moderation { --admin-card-accent: #dc2626; --admin-card-soft: rgba( 220, 38, 38, 0.12 ); } .whiteboard-admin-card-count { align-items: center; background: var( --admin-card-accent ); border-radius: 999px; color: #ffffff; display: inline-flex; font-size: 0.75rem; font-weight: 900; justify-content: center; min-height: 24px; min-width: 24px; padding: 2px 7px; vertical-align: middle; } .whiteboard-admin-moderation-layout { box-sizing: border-box; margin: 0 auto; max-width: var( --rtb-max-width ); padding: 14px var( --rtb-pad ) 60px; width: 100%; } .whiteboard-admin-moderation-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; } .whiteboard-admin-moderation-tabs a { align-items: center; background: var( --rtb-surface ); border: 1px solid var( --rtb-border ); border-radius: 999px; color: var( --rtb-muted ); display: inline-flex; font-size: 0.84rem; font-weight: 850; gap: 8px; padding: 8px 14px; text-decoration: none; } .whiteboard-admin-moderation-tabs a span { align-items: center; background: var( --rtb-surface-muted ); border-radius: 999px; display: inline-flex; font-size: 0.72rem; justify-content: center; min-height: 21px; min-width: 21px; padding: 1px 6px; } .whiteboard-admin-moderation-tabs a.active, .whiteboard-admin-moderation-tabs a:hover, .whiteboard-admin-moderation-tabs a:focus-visible { background: #1f2937; border-color: #1f2937; color: #ffffff; outline: none; } .whiteboard-admin-moderation-tabs a.active span { background: rgba( 255, 255, 255, 0.16 ); } .whiteboard-admin-report-list { display: grid; gap: 20px; } .whiteboard-admin-report-card { padding: 0; } .whiteboard-admin-report-header { align-items: flex-start; border-bottom: 1px solid var( --rtb-border ); display: flex; gap: 18px; justify-content: space-between; padding: 22px 24px; } .whiteboard-admin-report-header h2 { font-size: 1.25rem; margin: 5px 0 0; } .whiteboard-admin-report-reason { color: var( --rtb-red-text ); font-size: 0.72rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; } .whiteboard-admin-report-status { border-radius: 999px; font-size: 0.72rem; font-weight: 900; padding: 6px 10px; text-transform: uppercase; } .whiteboard-admin-report-status-pending { background: #fef3c7; color: #92400e; } .whiteboard-admin-report-status-resolved { background: #dcfce7; color: #166534; } .whiteboard-admin-report-status-dismissed { background: var( --rtb-surface-muted ); color: var( --rtb-muted ); } .whiteboard-admin-report-meta { align-items: center; color: var( --rtb-muted ); display: flex; flex-wrap: wrap; font-size: 0.82rem; gap: 8px 22px; padding: 18px 24px 0; } .whiteboard-admin-report-member { align-items: center; display: inline-flex; gap: 9px; } .whiteboard-admin-report-snapshot { background: var( --rtb-surface-muted ); border-left: 3px solid var( --rtb-red ); border-radius: 0 12px 12px 0; color: var( --rtb-text ); font-size: 0.92rem; line-height: 1.55; margin: 18px 24px 0; padding: 14px 16px; white-space: normal; word-break: break-word; } .whiteboard-admin-report-details, .whiteboard-admin-report-resolution { color: var( --rtb-muted ); font-size: 0.88rem; line-height: 1.55; margin: 18px 24px 0; } .whiteboard-admin-report-details p, .whiteboard-admin-report-resolution p { margin: 5px 0 0; } .whiteboard-admin-report-resolution { background: var( --rtb-surface-muted ); border-radius: 12px; margin-bottom: 24px; padding: 14px 16px; } .whiteboard-admin-report-resolution span { display: block; font-size: 0.76rem; margin-top: 2px; } .whiteboard-admin-report-form { border-top: 1px solid var( --rtb-border ); margin-top: 22px; padding: 20px 24px 24px; } .whiteboard-admin-report-form label { color: var( --rtb-ink ); display: block; font-size: 0.82rem; font-weight: 850; margin-bottom: 7px; } .whiteboard-admin-report-form textarea { background: var( --rtb-surface ); border: 1px solid var( --rtb-border-strong ); border-radius: 10px; color: var( --rtb-text ); font: inherit; padding: 10px 12px; resize: vertical; width: 100%; } .whiteboard-admin-report-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; } .whiteboard-admin-report-actions .whiteboard-button { margin: 0; } .whiteboard-admin-moderation-empty { padding: 50px 24px; text-align: center; } .whiteboard-admin-moderation-empty > i { color: #16a34a; font-size: 2.4rem; margin-bottom: 14px; } .whiteboard-admin-moderation-empty h2 { margin-bottom: 7px; } .whiteboard-admin-moderation-empty p { color: var( --rtb-muted ); margin: 0; } html[data-theme="dark"] .whiteboard-report-block-row strong, html[data-theme="dark"] .whiteboard-profile-blocked-identity strong { color: var( --rtb-ink ); } html[data-theme="dark"] .whiteboard-card-more-button { background: rgba( 255, 255, 255, 0.08 ); } html[data-theme="dark"] .whiteboard-card-more-button:hover, html[data-theme="dark"] .whiteboard-card-more-button:focus-visible, html[data-theme="dark"] .whiteboard-card-more-button[aria-expanded="true"] { background: rgba( 255, 255, 255, 0.14 ); } html[data-theme="dark"] .whiteboard-profile-safety-link a { color: #60a5fa; } html[data-theme="dark"] .whiteboard-guidelines-summary { background: rgba( 74, 222, 128, 0.08 ); border-color: rgba( 74, 222, 128, 0.18 ); } html[data-theme="dark"] .whiteboard-admin-report-status-pending { background: rgba( 245, 158, 11, 0.15 ); color: #fcd34d; } html[data-theme="dark"] .whiteboard-admin-report-status-resolved { background: rgba( 34, 197, 94, 0.14 ); color: #86efac; } @media ( max-width: 600px ) { .whiteboard-engagement-bar, .whiteboard-community-feed .whiteboard-engagement-bar, .whiteboard-whiteboard .whiteboard-engagement-bar { gap: 8px; padding-left: 12px; padding-right: 12px; } .whiteboard-engagement-item, .whiteboard-engagement-item span { font-size: 0.8rem; } .whiteboard-profile-blocked-member { gap: 10px; } .whiteboard-profile-blocked-list { padding-left: 20px; padding-right: 20px; } .whiteboard-admin-report-header, .whiteboard-admin-report-meta, .whiteboard-admin-report-form { padding-left: 18px; padding-right: 18px; } .whiteboard-admin-report-snapshot, .whiteboard-admin-report-details, .whiteboard-admin-report-resolution { margin-left: 18px; margin-right: 18px; } .whiteboard-admin-report-actions .whiteboard-button { flex: 1 1 calc( 50% - 9px ); } } / ============================================================ Admin Dashboard Groups ============================================================ / .admin-dashboard-groups { box-sizing: border-box; display: grid; gap: 44px; margin: 38px auto 60px; max-width: var( --rtb-max-width ); padding: 0 var( --rtb-pad ); width: 100%; } .admin-dashboard-group { display: grid; gap: 18px; } .admin-dashboard-group-header { align-items: center; border-bottom: 1px solid var( --rtb-border ); display: flex; gap: 15px; padding: 0 2px 16px; } .admin-dashboard-group-header > div { min-width: 0; } .admin-dashboard-group-icon { align-items: center; border: 1px solid transparent; border-radius: 15px; display: inline-flex; flex: 0 0 auto; font-size: 1.1rem; height: 48px; justify-content: center; width: 48px; } .admin-dashboard-group-icon-manage { background: rgba( 139, 92, 246, 0.11 ); border-color: rgba( 139, 92, 246, 0.2 ); color: #7c3aed; } .admin-dashboard-group-icon-tools { background: rgba( 20, 184, 166, 0.11 ); border-color: rgba( 20, 184, 166, 0.2 ); color: #0f9488; } .admin-dashboard-group-label { color: var( --rtb-muted ); font-size: 0.68rem; font-weight: 900; letter-spacing: 0.12em; margin: 0 0 2px; text-transform: uppercase; } .admin-dashboard-group-header h2 { color: var( --rtb-ink ); font-size: 1.4rem; font-weight: 900; letter-spacing: -0.035em; line-height: 1.15; margin: 0; } .admin-dashboard-group-header div > p:last-child { color: var( --rtb-muted ); font-size: 0.9rem; line-height: 1.45; margin: 4px 0 0; } .admin-dashboard-group .admin-card-grid { margin: 0; max-width: none; padding: 0; } html[data-theme="dark"] .admin-dashboard-group-icon-manage { background: rgba( 167, 139, 250, 0.12 ); border-color: rgba( 167, 139, 250, 0.25 ); color: #c4b5fd; } html[data-theme="dark"] .admin-dashboard-group-icon-tools { background: rgba( 45, 212, 191, 0.1 ); border-color: rgba( 45, 212, 191, 0.22 ); color: #5eead4; } / ============================================================ Admin User Directory ============================================================ */ .whiteboard-admin-users-layout { gap: 20px; padding-bottom: 60px; } .whiteboard-admin-user-stats { display: grid; gap: 14px; grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); } .whiteboard-admin-user-stat { align-items: center; background: var( --rtb-surface ); border: 1px solid var( --rtb-border ); border-radius: 16px; box-shadow: var( --rtb-shadow ); display: flex; gap: 13px; min-width: 0; padding: 17px 18px; } .whiteboard-admin-user-stat-icon { align-items: center; background: rgba( 45, 156, 219, 0.11 ); border-radius: 12px; color: #2385bd; display: inline-flex; flex: 0 0 auto; height: 42px; justify-content: center; width: 42px; } .whiteboard-admin-user-stat-icon-active { background: rgba( 22, 163, 74, 0.11 ); color: #15803d; } .whiteboard-admin-user-stat-icon-admin { background: rgba( 139, 92, 246, 0.11 ); color: #7c3aed; } .whiteboard-admin-user-stat-icon-inactive { background: rgba( 200, 32, 47, 0.09 ); color: var( --rtb-red-text ); } .whiteboard-admin-user-stat div { display: flex; flex-direction: column; min-width: 0; } .whiteboard-admin-user-stat strong { color: var( --rtb-ink ); font-size: 1.35rem; font-weight: 900; letter-spacing: -0.04em; line-height: 1.1; } .whiteboard-admin-user-stat span:last-child { color: var( --rtb-muted ); font-size: 0.77rem; font-weight: 800; margin-top: 3px; } .whiteboard-admin-users-card { overflow: hidden; padding: 0; } .whiteboard-admin-users-card-header { align-items: center; background: linear-gradient( 180deg, var( --rtb-surface ) 0%, var( --rtb-surface-soft ) 100% ); border-bottom: 1px solid var( --rtb-border ); display: flex; gap: 20px; justify-content: space-between; padding: 24px 26px; } .whiteboard-admin-users-card .whiteboard-admin-users-card-header h2 { font-size: 1.45rem; margin: 0 0 4px; } .whiteboard-admin-users-card-header > div > p:last-child { color: var( --rtb-muted ); font-size: 0.9rem; margin: 0; } .whiteboard-admin-users-eyebrow { color: #7c3aed; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.12em; margin: 0 0 3px; text-transform: uppercase; } .whiteboard-admin-user-create-toggle { flex: 0 0 auto; margin: 0; } .whiteboard-admin-user-create-panel { background: var( --rtb-surface-soft ); border-bottom: 1px solid var( --rtb-border ); padding: 24px 26px 26px; } .whiteboard-admin-user-create-heading { align-items: flex-start; display: flex; gap: 16px; justify-content: space-between; margin-bottom: 20px; } .whiteboard-admin-users-card .whiteboard-admin-user-create-heading h3, .whiteboard-admin-users-card .whiteboard-admin-user-detail-heading h3, .whiteboard-admin-users-card .whiteboard-admin-user-account-panel h3 { color: var( --rtb-ink ); font-size: 1.08rem; font-weight: 900; letter-spacing: -0.025em; margin: 0 0 4px; } .whiteboard-admin-user-create-heading p, .whiteboard-admin-user-detail-heading p { color: var( --rtb-muted ); font-size: 0.86rem; margin: 0; } .whiteboard-admin-user-create-close { flex: 0 0 auto; position: static; } .whiteboard-admin-user-form-actions { align-items: center; display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; } .whiteboard-admin-user-form-actions .whiteboard-button { margin: 0; } .whiteboard-admin-users-toolbar { align-items: end; border-bottom: 1px solid var( --rtb-border ); display: grid; gap: 14px; grid-template-columns: minmax( 260px, 1fr ) minmax( 145px, auto ) minmax( 145px, auto ) auto; padding: 18px 26px; } .whiteboard-admin-users-search-field, .whiteboard-admin-users-filter { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .whiteboard-admin-users-search-field label, .whiteboard-admin-users-filter label { color: var( --rtb-muted ); font-size: 0.68rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; } .whiteboard-admin-users-search-input { position: relative; } .whiteboard-admin-users-search-input i { color: var( --rtb-muted ); left: 14px; pointer-events: none; position: absolute; top: 50%; transform: translateY( -50% ); } .whiteboard-admin-users-search-input input, .whiteboard-admin-users-filter select { background: var( --rtb-surface ); border: 1px solid var( --rtb-border-strong ); border-radius: 10px; color: var( --rtb-ink ); font: inherit; height: 44px; width: 100%; } .whiteboard-admin-users-search-input input { padding: 0 14px 0 41px; } .whiteboard-admin-users-filter select { min-width: 145px; padding: 0 34px 0 12px; } .whiteboard-admin-users-search-input input:focus, .whiteboard-admin-users-filter select:focus { border-color: var( --rtb-focus-border ); box-shadow: 0 0 0 4px var( --rtb-focus ); outline: none; } .whiteboard-admin-users-visible-count { color: var( --rtb-muted ); font-size: 0.8rem; font-weight: 850; margin: 0 0 11px; white-space: nowrap; } .whiteboard-admin-users-table-wrap { overflow-x: auto; } .whiteboard-admin-users-table { border-collapse: collapse; min-width: 1080px; width: 100%; } .whiteboard-admin-users-table th { background: var( --rtb-surface-soft ); color: var( --rtb-muted ); font-size: 0.68rem; font-weight: 900; letter-spacing: 0.09em; padding: 11px 16px; text-align: left; text-transform: uppercase; white-space: nowrap; } .whiteboard-admin-users-table th:first-child, .whiteboard-admin-users-table td:first-child { padding-left: 26px; } .whiteboard-admin-users-table th:last-child, .whiteboard-admin-users-table td:last-child { padding-right: 26px; } .whiteboard-admin-user-table-row > td { background: var( --rtb-surface ); border-top: 1px solid var( --rtb-border ); color: var( --rtb-text ); padding: 15px 16px; vertical-align: middle; } .whiteboard-admin-user-table-row:hover > td { background: color-mix( in srgb, var( --rtb-surface-soft ) 72%, var( --rtb-surface ) ); } .whiteboard-admin-user-identity { align-items: center; display: flex; gap: 12px; min-width: 250px; } .whiteboard-admin-user-identity > div { display: flex; flex-direction: column; min-width: 0; } .whiteboard-admin-user-identity strong { color: var( --rtb-ink ); font-size: 0.92rem; font-weight: 900; line-height: 1.35; } .whiteboard-admin-user-identity a { color: var( --rtb-muted ); font-size: 0.78rem; line-height: 1.4; max-width: 270px; overflow: hidden; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; } .whiteboard-admin-user-identity a:hover, .whiteboard-admin-user-identity a:focus-visible { color: var( --rtb-red-text ); text-decoration: underline; } .whiteboard-admin-user-you { background: rgba( 45, 156, 219, 0.12 ); border-radius: 999px; color: #1d74a7; display: inline-block; font-size: 0.6rem; letter-spacing: 0.05em; margin-left: 4px; padding: 2px 6px; text-transform: uppercase; vertical-align: 1px; } .whiteboard-admin-user-badges { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; } .whiteboard-admin-badge-role-member { background: rgba( 45, 156, 219, 0.09 ); border-color: rgba( 45, 156, 219, 0.2 ); color: #1d74a7; } .whiteboard-admin-badge-role-admin { background: rgba( 139, 92, 246, 0.11 ); border-color: rgba( 139, 92, 246, 0.22 ); color: #6d28d9; } .whiteboard-admin-user-table-detail { display: flex; flex-direction: column; min-width: 112px; } .whiteboard-admin-user-table-detail strong { color: var( --rtb-ink ); font-size: 0.8rem; font-weight: 850; white-space: nowrap; } .whiteboard-admin-user-table-detail span { color: var( --rtb-muted ); font-size: 0.72rem; margin-top: 2px; white-space: nowrap; } .whiteboard-admin-users-actions-label { display: block; text-align: right; } .whiteboard-admin-user-action-cell { text-align: right; } .whiteboard-admin-user-row-actions { align-items: center; display: flex; gap: 7px; justify-content: flex-end; } .whiteboard-admin-user-row-impersonate-form { margin: 0; } .whiteboard-admin-user-impersonate-button, .whiteboard-admin-user-manage-button { gap: 7px; margin: 0; min-height: 38px; padding: 8px 12px; white-space: nowrap; } .whiteboard-admin-user-manage-button i { font-size: 0.68rem; transition: transform 0.16s ease; } .whiteboard-admin-user-manage-button[aria-expanded="true"] i { transform: rotate( 180deg ); } .whiteboard-admin-user-detail-row > td { background: var( --rtb-surface-soft ); border-bottom: 1px solid var( --rtb-border ); border-top: 1px solid var( --rtb-border ); padding: 0 26px 24px; } .whiteboard-admin-user-detail-layout { display: grid; gap: 22px; grid-template-columns: minmax( 0, 1.7fr ) minmax( 260px, 0.8fr ); padding-top: 24px; } .whiteboard-admin-user-edit-form { background: transparent; border: 0; padding: 0; } .whiteboard-admin-user-detail-heading { margin-bottom: 4px; } .whiteboard-admin-user-account-panel { background: var( --rtb-surface ); border: 1px solid var( --rtb-border ); border-radius: 14px; padding: 18px; } .whiteboard-admin-user-account-panel dl { display: grid; gap: 0; margin: 14px 0 0; } .whiteboard-admin-user-account-panel dl > div { align-items: baseline; border-top: 1px solid var( --rtb-border ); display: flex; gap: 14px; justify-content: space-between; padding: 9px 0; } .whiteboard-admin-user-account-panel dt { color: var( --rtb-muted ); font-size: 0.72rem; font-weight: 750; } .whiteboard-admin-user-account-panel dd { color: var( --rtb-ink ); font-size: 0.74rem; font-weight: 850; margin: 0; text-align: right; } .whiteboard-admin-user-account-panel .whiteboard-admin-impersonate-form { background: transparent; border-top: 1px solid var( --rtb-border ); margin-top: 12px; padding: 16px 0 0; } .whiteboard-admin-user-account-panel .whiteboard-button { margin: 0; width: 100%; } .whiteboard-admin-users-empty-row td { color: var( --rtb-muted ); padding: 52px 24px; text-align: center; } .whiteboard-admin-users-empty-row i, .whiteboard-admin-users-empty-row strong, .whiteboard-admin-users-empty-row span { display: block; } .whiteboard-admin-users-empty-row i { color: #94a3b8; font-size: 1.8rem; margin-bottom: 10px; } .whiteboard-admin-users-empty-row strong { color: var( --rtb-ink ); font-size: 1rem; } .whiteboard-admin-users-empty-row span { font-size: 0.82rem; margin-top: 3px; } html[data-theme="dark"] .whiteboard-admin-user-stat-icon-active { color: #86efac; } html[data-theme="dark"] .whiteboard-admin-user-stat-icon-admin { color: #c4b5fd; } html[data-theme="dark"] .whiteboard-admin-users-eyebrow { color: #c4b5fd; } html[data-theme="dark"] .whiteboard-admin-badge-role-member { color: #7dd3fc; } html[data-theme="dark"] .whiteboard-admin-badge-role-admin { color: #c4b5fd; } html[data-theme="dark"] .whiteboard-admin-user-you { color: #7dd3fc; } html[data-theme="dark"] .whiteboard-admin-user-table-row:hover > td { background: var( --rtb-surface-soft ); } @media ( max-width: 991.98px ) { .whiteboard-admin-user-stats { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } .whiteboard-admin-users-toolbar { grid-template-columns: minmax( 220px, 1fr ) repeat( 2, minmax( 130px, auto ) ); } .whiteboard-admin-users-visible-count { grid-column: 1 / -1; margin: -4px 0 0; } .whiteboard-admin-users-table { min-width: 780px; } .whiteboard-admin-users-activity-column, .whiteboard-admin-users-session-column { display: none; } .whiteboard-admin-user-detail-layout { grid-template-columns: 1fr; } } @media ( max-width: 700px ) { .admin-dashboard-groups { gap: 34px; margin-bottom: 44px; margin-top: 28px; } .admin-dashboard-group-header { align-items: flex-start; } .admin-dashboard-group-icon { border-radius: 12px; height: 42px; width: 42px; } .admin-dashboard-group-header h2 { font-size: 1.25rem; } .whiteboard-admin-user-stats { gap: 10px; } .whiteboard-admin-user-stat { padding: 14px; } .whiteboard-admin-user-stat-icon { height: 38px; width: 38px; } .whiteboard-admin-users-card { padding: 0; } .whiteboard-admin-users-card-header { align-items: stretch; flex-direction: column; padding: 20px; } .whiteboard-admin-user-create-toggle { width: 100%; } .whiteboard-admin-user-create-panel { padding: 20px; } .whiteboard-admin-user-form-actions { align-items: stretch; flex-direction: column-reverse; } .whiteboard-admin-users-toolbar { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); padding: 16px 20px; } .whiteboard-admin-users-search-field, .whiteboard-admin-users-visible-count { grid-column: 1 / -1; } .whiteboard-admin-users-filter select { min-width: 0; } .whiteboard-admin-users-table { min-width: 540px; } .whiteboard-admin-users-login-column { display: none; } .whiteboard-admin-users-table th:first-child, .whiteboard-admin-users-table td:first-child { padding-left: 20px; } .whiteboard-admin-users-table th:last-child, .whiteboard-admin-users-table td:last-child { padding-right: 20px; } .whiteboard-admin-user-detail-row > td { padding: 0 20px 20px; } } @media ( max-width: 480px ) { .whiteboard-admin-user-stats { grid-template-columns: 1fr; } }