/* ============================================================ BREATHWORK — Shoelace + Open Props Design System Calm, intentional, premium wellness brand Theme: auto light/dark via [data-theme] on Palette: warm neutrals + teal primary + indigo secondary ============================================================ */ /* ──────────────────────────────────────────────────────────── 0. MINIMAL RESET (replaces Open Props normalize) ──────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; } html { -webkit-text-size-adjust: 100%; } img, svg, video { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; } /* Focus — visible ring for keyboard navigation */ :focus-visible { outline: var(--focus-ring); outline-offset: 2px; } /* ──────────────────────────────────────────────────────────── 1. THEME TOKENS — light (default) & dark ──────────────────────────────────────────────────────────── */ :root, [data-theme="light"] { /* Shoelace primary → brand blue-teal */ --sl-color-primary-50: var(--brand-0); --sl-color-primary-100: var(--brand-1); --sl-color-primary-200: var(--brand-2); --sl-color-primary-300: var(--brand-3); --sl-color-primary-400: var(--brand-4); --sl-color-primary-500: var(--brand-5); --sl-color-primary-600: var(--brand-primary); --sl-color-primary-700: var(--brand-8); --sl-color-primary-800: var(--brand-9); --sl-color-primary-900: #042a33; /* Shoelace neutral → warm stone (light: 0=lightest, 1000=darkest) */ --sl-color-neutral-0: #ffffff; --sl-color-neutral-50: #faf9f7; --sl-color-neutral-100: var(--stone-1); --sl-color-neutral-200: var(--stone-2); --sl-color-neutral-300: var(--stone-3); --sl-color-neutral-400: var(--stone-4); --sl-color-neutral-500: var(--stone-5); --sl-color-neutral-600: var(--stone-6); --sl-color-neutral-700: var(--stone-7); --sl-color-neutral-800: var(--stone-8); --sl-color-neutral-900: var(--stone-9); --sl-color-neutral-950: var(--stone-9); --sl-color-neutral-1000: #1a1918; /* Shoelace surface / panel overrides */ --sl-panel-background-color: var(--surface-raised); --sl-panel-border-color: var(--line); --sl-input-background-color: var(--surface-raised); --sl-input-border-color: var(--line); --sl-overlay-background-color: rgb(0 0 0 / 0.4); --sl-border-radius-small: var(--radius-2); --sl-border-radius-medium: var(--radius-3); --sl-border-radius-large: var(--radius-4); --sl-transition-fast: 200ms; --sl-transition-medium: 400ms; --sl-transition-slow: 600ms; /* ── Brand palette (source of truth) ── */ --brand-primary: #127B92; --brand-secondary: #33A2B2; --brand-structure: #3A768F; --brand-soft: #72A5BB; --brand-mist: #A1BDD6; --brand-warm: #FFFBEE; /* Brand scale (light → dark, derived from brand-primary) */ --brand-0: #eaf5f8; --brand-1: #c8e5ec; --brand-2: #9dd0dc; --brand-3: #72b8c9; --brand-4: #4a9fb2; --brand-5: #33A2B2; /* = brand-secondary */ --brand-6: #1f8d9f; --brand-7: #127B92; /* = brand-primary */ --brand-8: #0d5f71; --brand-9: #083f4d; /* ── Typography tokens ── */ --font-ui: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-body: "Raleway", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --text-xs: var(--font-size-00); --text-sm: var(--font-size-0); --text-md: var(--font-size-1); --text-lg: var(--font-size-3); --text-xl: var(--font-size-5); --weight-regular: var(--font-weight-4); --weight-medium: var(--font-weight-5); --weight-bold: var(--font-weight-7); --letter-spacing-caps: 0.08em; --sl-font-sans: var(--font-ui); /* ── Semantic tokens: LIGHT ── */ --ink: var(--stone-9); --ink-soft: var(--stone-6); --ink-muted: var(--stone-5); --surface-page: #f2f1ee; --surface-raised: #ffffff; --surface-warm: #f5f3f0; --surface-cool: var(--brand-0); --line: var(--stone-3); --line-subtle: var(--stone-2); --table-head-bg: var(--stone-2); --table-row-bg: #ffffff; --table-hover-bg: var(--stone-1); --card-shadow: 0 1px 3px rgb(0 0 0 / 0.06), 0 1px 2px rgb(0 0 0 / 0.04); --panel-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 8px 24px rgb(0 0 0 / 0.06); --ok-color: var(--green-7); --warn-color: var(--orange-7); --err-color: var(--red-7); /* accent colors — brand-derived */ --teal-accent: var(--brand-primary); --indigo-accent: var(--brand-structure); --green-accent: var(--brand-soft); --orange-accent: var(--brand-mist); /* backgrounds for tags / pills */ --ok-bg: var(--green-0); --ok-border: var(--green-3); --warn-bg: var(--orange-0); --warn-border: var(--orange-3); --err-bg: var(--red-0); --err-border: var(--red-3); /* risk pills */ --risk-high-bg: var(--red-1); --risk-high-fg: var(--red-9); --risk-high-bd: var(--red-3); --risk-elev-bg: var(--orange-1); --risk-elev-fg: var(--orange-9); --risk-elev-bd: var(--orange-3); --risk-mon-bg: var(--yellow-1); --risk-mon-fg: var(--yellow-9); --risk-mon-bd: var(--yellow-3); /* Primary actions */ --primary: var(--brand-primary); --primary-hover: #0e6577; --primary-active: #0a515f; --on-primary: #ffffff; /* Secondary actions */ --secondary: var(--brand-structure); --secondary-hover: #2e6176; --on-secondary: #ffffff; /* Links */ --link: var(--brand-primary); --link-hover: var(--brand-secondary); /* Additional ink */ --ink-subtle: var(--stone-5); --ink-inverse: #ffffff; /* Additional surfaces */ --surface: var(--surface-page); --surface-sunken: #ece9e4; --surface-overlay: #ffffff; /* Divider */ --divider: var(--line-subtle); /* Focus */ --focus-ring: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 35%, transparent); /* Shadows */ --shadow-1: var(--card-shadow); --shadow-2: var(--panel-shadow); /* Table border */ --table-border: var(--line); /* Status (calm variants) */ --success: var(--green-7); --warning: var(--orange-7); --danger: var(--red-7); --info: var(--brand-primary); /* hero / page gradients */ --page-bg: radial-gradient(1200px 500px at 80% -5%, color-mix(in srgb, var(--brand-2) 40%, transparent) 0%, transparent 65%), radial-gradient(800px 400px at 15% 20%, color-mix(in srgb, var(--brand-mist) 25%, transparent) 0%, transparent 60%), linear-gradient(175deg, var(--stone-1) 0%, var(--surface-page) 40%, #f2f1ee 100%); --hero-bg: radial-gradient(100% 140% at 90% -10%, color-mix(in srgb, var(--brand-3) 40%, transparent) 0%, transparent 65%), radial-gradient(60% 100% at 10% 80%, color-mix(in srgb, var(--brand-mist) 20%, transparent) 0%, transparent 60%), linear-gradient(135deg, var(--brand-0) 0%, var(--surface-warm) 100%); --member-hero-bg: radial-gradient(110% 140% at 85% -15%, color-mix(in srgb, var(--brand-3) 30%, transparent) 0%, transparent 60%), radial-gradient(60% 80% at 5% 90%, color-mix(in srgb, var(--brand-mist) 15%, transparent) 0%, transparent 55%), linear-gradient(145deg, var(--surface-raised) 0%, var(--surface-warm) 100%); } /* ── DARK MODE — deep ocean at night ── */ [data-theme="dark"] { /* Shoelace neutral → deep ocean (dark: 0=darkest, 1000=lightest) */ --sl-color-neutral-0: #141e23; --sl-color-neutral-50: #1a262d; --sl-color-neutral-100: #213039; --sl-color-neutral-200: #2a3b45; --sl-color-neutral-300: var(--stone-7); --sl-color-neutral-400: var(--stone-6); --sl-color-neutral-500: var(--stone-5); --sl-color-neutral-600: var(--stone-4); --sl-color-neutral-700: var(--stone-3); --sl-color-neutral-800: var(--stone-2); --sl-color-neutral-900: var(--stone-1); --sl-color-neutral-950: var(--stone-0); --sl-color-neutral-1000: #ffffff; --sl-panel-background-color: var(--surface-raised); --sl-panel-border-color: var(--line); --sl-input-background-color: var(--surface-raised); --sl-input-border-color: var(--line); --sl-overlay-background-color: rgb(0 0 0 / 0.6); /* Ink — soft off-white, never pure white */ --ink: #e2e8ec; --ink-soft: #8fa3ad; --ink-muted: #6b8590; --ink-subtle: #6b8590; --ink-inverse: #0c1316; /* Surfaces — deep desaturated ocean */ --surface-page: #0c1316; --surface-raised: #141e23; --surface-warm: #1a262d; --surface-cool: color-mix(in srgb, var(--brand-9) 40%, #141e23); --surface: var(--surface-page); --surface-sunken: #0a1013; --surface-overlay: #1a262d; /* Lines — ocean borders */ --line: #233038; --line-subtle: #1c272e; --divider: #1c272e; /* Tables */ --table-head-bg: #1a252b; --table-row-bg: #141e23; --table-hover-bg: #1c272e; --table-border: var(--line); /* Elevation */ --card-shadow: 0 1px 4px rgb(0 0 0 / 0.5), 0 0 1px rgb(0 0 0 / 0.3); --panel-shadow: 0 2px 4px rgb(0 0 0 / 0.4), 0 8px 24px rgb(0 0 0 / 0.3); --shadow-1: var(--card-shadow); --shadow-2: var(--panel-shadow); /* Status text */ --ok-color: var(--green-3); --warn-color: var(--orange-3); --err-color: var(--red-3); /* Accents — lightened brand tones for dark backgrounds */ --teal-accent: #3dbace; --indigo-accent: #5a9ab0; --green-accent: #8fc0d4; --orange-accent: #b8d2e5; /* Primary actions */ --primary: #1a8da5; --primary-hover: #21a0ba; --primary-active: var(--brand-primary); --on-primary: #ffffff; /* Secondary actions */ --secondary: #4a8da0; --secondary-hover: #5a9db0; --on-secondary: #ffffff; /* Links */ --link: #3dbace; --link-hover: #5ecade; /* Focus */ --focus-ring: 0 0 0 3px color-mix(in srgb, #3dbace 30%, transparent); /* Status (calm) */ --success: var(--green-3); --warning: var(--orange-3); --danger: var(--red-3); --info: #3dbace; /* Status backgrounds — ocean-mixed */ --ok-bg: color-mix(in srgb, var(--green-9) 50%, #141e23); --ok-border: var(--green-8); --warn-bg: color-mix(in srgb, var(--orange-9) 50%, #141e23); --warn-border: var(--orange-8); --err-bg: color-mix(in srgb, var(--red-9) 50%, #141e23); --err-border: var(--red-8); /* Risk pills — ocean-mixed */ --risk-high-bg: color-mix(in srgb, var(--red-9) 60%, #141e23); --risk-high-fg: var(--red-2); --risk-high-bd: var(--red-8); --risk-elev-bg: color-mix(in srgb, var(--orange-9) 60%, #141e23); --risk-elev-fg: var(--orange-2); --risk-elev-bd: var(--orange-8); --risk-mon-bg: color-mix(in srgb, var(--yellow-9) 60%, #141e23); --risk-mon-fg: var(--yellow-2); --risk-mon-bd: var(--yellow-8); /* Gradients — deep ocean with brand teal glow */ --page-bg: radial-gradient(1200px 500px at 80% -5%, color-mix(in srgb, var(--brand-9) 50%, transparent) 0%, transparent 65%), radial-gradient(800px 400px at 15% 20%, color-mix(in srgb, var(--brand-structure) 25%, transparent) 0%, transparent 60%), #0c1316; --hero-bg: radial-gradient(100% 140% at 90% -10%, color-mix(in srgb, var(--brand-9) 55%, transparent) 0%, transparent 65%), linear-gradient(135deg, #141e23 0%, #1a262d 100%); --member-hero-bg: radial-gradient(110% 140% at 85% -15%, color-mix(in srgb, var(--brand-9) 45%, transparent) 0%, transparent 60%), linear-gradient(145deg, #141e23 0%, #1a262d 100%); color-scheme: dark; } /* ──────────────────────────────────────────────────────────── 2. BASE / BODY ──────────────────────────────────────────────────────────── */ body { min-height: 100vh; font-family: var(--font-body); color: var(--ink); background: var(--page-bg); background-color: var(--surface-page); line-height: var(--font-lineheight-3); } .app-root { width: min(1020px, 93vw); margin-inline: auto; padding-block: var(--size-7) var(--size-9); } /* ──────────────────────────────────────────────────────────── 3. TYPOGRAPHY ──────────────────────────────────────────────────────────── */ h1, h2, h3, h4 { font-family: var(--font-ui); } h1 { margin-block: var(--size-2) var(--size-3); font-size: clamp(var(--font-size-5), 4vw, var(--font-size-7)); line-height: var(--font-lineheight-1); font-weight: var(--weight-bold); color: var(--ink); } h2 { margin-block: 0 var(--size-2); font-size: var(--font-size-3); font-weight: var(--font-weight-6); color: var(--ink); } h3 { margin-block: 0 var(--size-2); font-size: var(--font-size-2); font-weight: var(--font-weight-6); color: var(--ink); } h4 { margin-block: 0 var(--size-1); font-size: var(--font-size-1); font-weight: var(--font-weight-6); } p { margin-block: 0 var(--size-2); } p:last-child { margin-bottom: 0; } a { color: var(--link); } a:hover { color: var(--link-hover); } .eyebrow { font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--letter-spacing-caps); text-transform: uppercase; color: var(--teal-accent); font-weight: var(--weight-medium); } .hero-copy { color: var(--ink-soft); font-size: var(--font-size-1); line-height: var(--font-lineheight-4); max-width: 50ch; } .muted { color: var(--ink-soft); font-size: var(--font-size-0); line-height: var(--font-lineheight-4); } code { font-size: 0.9em; padding: 0.1em 0.4em; border-radius: var(--radius-2); background: var(--surface-warm); color: var(--ink-soft); } /* ──────────────────────────────────────────────────────────── 4. LAYOUT PRIMITIVES ──────────────────────────────────────────────────────────── */ .shell { display: grid; gap: var(--size-5); } .stack { display: grid; gap: var(--size-5); } .panel { border: var(--border-size-1) solid var(--line); border-radius: var(--radius-4); background: var(--surface-raised); padding: var(--size-5); box-shadow: var(--panel-shadow); } /* Theme toggle */ .theme-toggle-row { display: flex; justify-content: flex-end; } .theme-toggle { font-size: var(--font-size-3); color: var(--ink-soft); transition: color 0.2s var(--ease-2); } .theme-toggle:hover { color: var(--ink); } .hero { padding-block: var(--size-3) var(--size-2); } .section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--size-3); margin-bottom: var(--size-4); } .section-link-row { display: flex; flex-wrap: wrap; gap: var(--size-3); margin-top: var(--size-4); margin-bottom: 0; } /* ──────────────────────────────────────────────────────────── 5. TABLES — explicit light/dark backgrounds, always readable ──────────────────────────────────────────────────────────── */ .table-wrap { overflow-x: auto; border-radius: var(--radius-3); border: var(--border-size-1) solid var(--line); background: var(--table-row-bg); } table { width: 100%; border-collapse: collapse; font-size: var(--font-size-0); color: var(--ink); background: var(--table-row-bg); } thead { background: var(--table-head-bg); } thead th { padding: var(--size-3); text-align: left; font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--letter-spacing-caps); text-transform: uppercase; color: var(--ink-soft); background: var(--table-head-bg); border-bottom: var(--border-size-1) solid var(--line); } tbody { background: var(--table-row-bg); } tbody tr { background: var(--table-row-bg); border-bottom: var(--border-size-1) solid var(--line-subtle); transition: background 0.15s var(--ease-2); } tbody tr:last-child { border-bottom: none; } tbody tr:hover { background: var(--table-hover-bg); } tbody td { padding: var(--size-3); color: var(--ink); background: transparent; vertical-align: middle; } td.empty { color: var(--ink-muted); text-align: center; padding: var(--size-6); font-style: italic; } td a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; transition: color 0.15s; } td a:hover { color: var(--ink); } /* ──────────────────────────────────────────────────────────── 6. CARDS ──────────────────────────────────────────────────────────── */ .card { background: var(--surface-raised); border: var(--border-size-1) solid var(--line); border-radius: var(--radius-3); padding: var(--size-5); box-shadow: var(--card-shadow); transition: box-shadow 0.3s var(--ease-3); } .card.spotlight { border-color: var(--line); background: var(--surface-raised); } .login-footer { text-align: center; padding: var(--size-3) 0; font-size: var(--font-size-0); color: var(--ink-muted); } .login-footer a { color: var(--link); text-decoration: none; } .login-footer a:hover { color: var(--link-hover); text-decoration: underline; } .login-footer .dot { margin-inline: var(--size-2); } /* In light mode give spotlight a subtle gradient */ [data-theme="light"] .card.spotlight { background: linear-gradient(135deg, var(--surface-raised) 0%, var(--brand-0) 50%, color-mix(in srgb, var(--brand-mist) 25%, var(--brand-0)) 100%); border-color: var(--brand-3); } /* In dark mode give spotlight a rich tinted gradient */ [data-theme="dark"] .card.spotlight { background: linear-gradient(135deg, var(--surface-raised) 0%, color-mix(in srgb, var(--brand-9) 25%, #141e23) 50%, color-mix(in srgb, var(--brand-structure) 15%, #141e23) 100%); border-color: var(--brand-8); } /* ──────────────────────────────────────────────────────────── 7. FEEDBACK / ALERT ──────────────────────────────────────────────────────────── */ .feedback { min-height: var(--size-4); font-weight: var(--font-weight-6); margin-bottom: var(--size-3); font-size: var(--font-size-0); } .feedback.success { color: var(--ok-color); } .feedback.error { color: var(--err-color); } .feedback.warning { color: var(--warn-color); } sl-alert { margin-bottom: var(--size-3); } /* ──────────────────────────────────────────────────────────── 8. STATUS / TAG PILLS ──────────────────────────────────────────────────────────── */ .status-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--size-2); margin-top: var(--size-3); } .risk-pill { display: inline-flex; align-items: center; padding: var(--size-1) var(--size-3); border-radius: var(--radius-round); font-size: var(--font-size-00); font-weight: var(--font-weight-6); text-transform: capitalize; } .risk-pill.high { background: var(--risk-high-bg); color: var(--risk-high-fg); border: var(--border-size-1) solid var(--risk-high-bd); } .risk-pill.elevated { background: var(--risk-elev-bg); color: var(--risk-elev-fg); border: var(--border-size-1) solid var(--risk-elev-bd); } .risk-pill.monitor { background: var(--risk-mon-bg); color: var(--risk-mon-fg); border: var(--border-size-1) solid var(--risk-mon-bd); } .section-link { color: var(--link); font-size: var(--font-size-0); font-weight: var(--weight-medium); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent); transition: color 0.2s var(--ease-2), text-decoration-color 0.2s; } .section-link:hover { color: var(--link-hover); text-decoration-color: var(--link); } /* Meta grid (org detail) */ .meta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--size-3); margin-top: var(--size-4); font-size: var(--font-size-0); } .meta-grid > div { padding: var(--size-3); background: var(--surface-warm); border-radius: var(--radius-2); border: var(--border-size-1) solid var(--line-subtle); } .meta-grid span { color: var(--ink-muted); font-size: var(--font-size-00); font-weight: var(--font-weight-5); display: block; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.05em; } /* ============================================================ 9. ADMIN VIEWS ============================================================ */ .admin-shell { gap: var(--size-5); } .admin-hero { position: relative; border: var(--border-size-1) solid var(--line); border-radius: var(--radius-4); background: var(--hero-bg); padding: var(--size-6); overflow: hidden; } .admin-hero::after { content: ""; position: absolute; inset: auto -25% -100px auto; width: 300px; height: 300px; border-radius: var(--radius-round); background: radial-gradient(circle, color-mix(in srgb, var(--teal-accent) 8%, transparent) 0%, transparent 70%); pointer-events: none; } .admin-brand { display: flex; align-items: center; gap: var(--size-5); } .admin-wave-mark { width: min(260px, 32vw); min-width: 160px; height: auto; flex-shrink: 0; } .admin-wave-mark path { fill: none; stroke-linecap: round; stroke-width: 12; } .admin-wave-mark path:nth-child(1) { stroke: var(--brand-4); } .admin-wave-mark path:nth-child(2) { stroke: var(--brand-primary); } .admin-wave-mark path:nth-child(3) { stroke: var(--brand-mist); } .admin-mode-toggle { margin-top: var(--size-3); } .panel.admin-panel { border-color: var(--line); background: var(--surface-raised); } /* Admin KPIs — each with distinct accent */ .admin-kpis { display: grid; gap: var(--size-4); grid-template-columns: repeat(4, minmax(0, 1fr)); } .card.admin-kpi { text-align: center; padding: var(--size-5) var(--size-4); position: relative; overflow: hidden; } .card.admin-kpi:nth-child(1) { border-top: 3px solid var(--brand-secondary); } .card.admin-kpi:nth-child(2) { border-top: 3px solid var(--brand-structure); } .card.admin-kpi:nth-child(3) { border-top: 3px solid var(--brand-soft); } .card.admin-kpi:nth-child(4) { border-top: 3px solid var(--brand-mist); } .metric-label { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--ink-muted); text-transform: uppercase; letter-spacing: var(--letter-spacing-caps); margin-bottom: var(--size-2); display: block; } .metric-value { font-family: var(--font-ui); font-size: var(--font-size-7); font-weight: var(--font-weight-8); line-height: 1; margin: 0; } .card.admin-kpi:nth-child(1) .metric-value { color: var(--teal-accent); } .card.admin-kpi:nth-child(2) .metric-value { color: var(--indigo-accent); } .card.admin-kpi:nth-child(3) .metric-value { color: var(--green-accent); } .card.admin-kpi:nth-child(4) .metric-value { color: var(--orange-accent); } /* Admin grid layouts */ .admin-grid { display: grid; gap: var(--size-5); grid-template-columns: 1.2fr 1fr; } .admin-grid-secondary { grid-template-columns: 1fr 1fr; } .admin-section { padding: var(--size-5); } /* Org summary */ .org-summary-card { border-left: 4px solid var(--brand-secondary); } .summary-metric-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--size-3); margin-block: var(--size-5); } .summary-metric { text-align: center; padding: var(--size-3); border-radius: var(--radius-3); background: var(--surface-warm); border: var(--border-size-1) solid var(--line-subtle); } .summary-metric span { display: block; font-size: var(--font-size-00); color: var(--ink-muted); margin-bottom: var(--size-1); text-transform: uppercase; letter-spacing: 0.04em; } .summary-metric strong { display: block; font-size: var(--font-size-4); color: var(--teal-accent); font-weight: var(--font-weight-7); } .summary-metric-domain { grid-column: span 2; } .summary-metric-domain strong { font-size: var(--font-size-2); color: var(--ink-soft); } .summary-health-grid { display: grid; gap: var(--size-4); } .summary-health-item { display: grid; gap: var(--size-2); } .summary-health-head { display: flex; justify-content: space-between; align-items: center; font-size: var(--font-size-0); } .summary-health-head strong { color: var(--teal-accent); font-weight: var(--font-weight-6); } .summary-footnote { margin-top: var(--size-4); font-size: var(--font-size-0); } /* ============================================================ 10. MEMBER DASHBOARD ============================================================ */ .m-dash { display: grid; gap: var(--size-6); } .m-header { position: relative; border: var(--border-size-1) solid var(--line); border-radius: var(--radius-4); background: var(--member-hero-bg); padding: var(--size-7); overflow: hidden; } .m-header::before { content: ""; position: absolute; right: -50px; top: -50px; width: 260px; height: 260px; border-radius: var(--radius-round); background: radial-gradient(circle, color-mix(in srgb, var(--teal-accent) 10%, transparent) 0%, transparent 70%); pointer-events: none; } .m-header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--size-6); } .m-greeting { flex: 1; } .m-overline { font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--letter-spacing-caps); text-transform: uppercase; color: var(--teal-accent); font-weight: var(--weight-medium); margin: 0 0 var(--size-2); } .m-title { font-family: var(--font-ui); font-size: clamp(var(--font-size-5), 3.5vw, var(--font-size-7)); font-weight: var(--font-weight-8); line-height: var(--font-lineheight-1); margin: 0 0 var(--size-2); color: var(--ink); } .m-lead { color: var(--ink-soft); font-size: var(--font-size-1); margin: 0; max-width: 36ch; } /* Next meeting card */ .m-reset-card { flex-shrink: 0; min-width: 220px; max-width: 280px; background: var(--surface-raised); border: var(--border-size-1) solid var(--line); border-radius: var(--radius-3); padding: var(--size-5); box-shadow: var(--panel-shadow); } .m-reset-label { font-family: var(--font-ui); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--letter-spacing-caps); color: var(--teal-accent); font-weight: var(--weight-medium); margin: 0 0 var(--size-1); } .m-reset-title { font-size: var(--font-size-2); font-weight: var(--font-weight-6); margin: 0 0 var(--size-1); color: var(--ink); line-height: var(--font-lineheight-3); } .m-reset-time { font-size: var(--font-size-0); color: var(--ink-soft); margin: 0 0 var(--size-4); } .m-reset-btn { display: block; text-align: center; padding: var(--size-2) var(--size-4); background: linear-gradient(135deg, var(--brand-6), var(--brand-primary)); color: white; border-radius: var(--radius-3); font-size: var(--font-size-0); font-weight: var(--font-weight-6); text-decoration: none; transition: all 0.35s var(--ease-3); box-shadow: 0 2px 8px color-mix(in srgb, var(--brand-primary) 30%, transparent); } .m-reset-btn:hover { background: linear-gradient(135deg, var(--brand-primary), var(--brand-8)); box-shadow: 0 4px 16px color-mix(in srgb, var(--brand-primary) 40%, transparent); transform: translateY(-1px); } /* Meta row */ .m-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--size-3); margin-top: var(--size-5); padding-top: var(--size-4); border-top: var(--border-size-1) solid var(--line-subtle); flex-wrap: wrap; } .m-pills { display: flex; flex-wrap: wrap; gap: var(--size-2); } .m-switch-form { display: flex; } /* Feedback */ .m-feedback { padding: var(--size-3) var(--size-4); border-radius: var(--radius-3); font-size: var(--font-size-0); font-weight: var(--font-weight-5); border: var(--border-size-1) solid transparent; } .m-feedback--success { background: var(--ok-bg); color: var(--ok-color); border-color: var(--ok-border); } .m-feedback--error { background: var(--err-bg); color: var(--err-color); border-color: var(--err-border); } .m-feedback--notice { background: var(--surface-cool); color: var(--teal-accent); border-color: var(--line); } /* KPI strip */ .m-kpis { display: grid; gap: var(--size-4); grid-template-columns: repeat(4, minmax(0, 1fr)); animation: member-rise 380ms var(--ease-4) both; } .m-kpi-card { background: var(--surface-raised); border: var(--border-size-1) solid var(--line); border-radius: var(--radius-3); padding: var(--size-5) var(--size-4); display: grid; gap: var(--size-1); box-shadow: var(--card-shadow); transition: box-shadow 0.3s var(--ease-3), transform 0.3s var(--ease-3); animation: m-fade-up 350ms var(--ease-4) both; } .m-kpi-card:nth-child(1) { animation-delay: 55ms; border-top: 3px solid var(--brand-secondary); } .m-kpi-card:nth-child(2) { animation-delay: 95ms; border-top: 3px solid var(--brand-structure); } .m-kpi-card:nth-child(3) { animation-delay: 135ms; border-top: 3px solid var(--brand-soft); } .m-kpi-card:nth-child(4) { animation-delay: 175ms; border-top: 3px solid var(--brand-mist); } .m-kpi-card:hover { box-shadow: 0 4px 16px rgb(0 0 0 / 0.08); transform: translateY(-2px); } [data-theme="dark"] .m-kpi-card:hover { box-shadow: 0 4px 20px rgb(0 0 0 / 0.5); } .m-kpi-label { font-family: var(--font-ui); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--letter-spacing-caps); color: var(--ink-muted); font-weight: var(--weight-medium); } .m-kpi-number { font-family: var(--font-ui); font-size: var(--font-size-7); font-weight: var(--font-weight-8); line-height: 1; } .m-kpi-card:nth-child(1) .m-kpi-number { color: var(--teal-accent); } .m-kpi-card:nth-child(2) .m-kpi-number { color: var(--indigo-accent); } .m-kpi-card:nth-child(3) .m-kpi-number { color: var(--green-accent); } .m-kpi-card:nth-child(4) .m-kpi-number { color: var(--orange-accent); } .m-kpi-number small { font-size: var(--font-size-2); font-weight: var(--font-weight-5); color: var(--ink-muted); } .m-kpi-sub { font-size: var(--font-size-0); color: var(--ink-soft); } /* Main 2-col layout */ .m-layout { display: grid; gap: var(--size-5); grid-template-columns: 1.15fr 1fr; align-items: start; } .m-primary, .m-secondary { display: grid; gap: var(--size-5); } /* Member cards */ .m-card { background: var(--surface-raised); border: var(--border-size-1) solid var(--line); border-radius: var(--radius-3); box-shadow: var(--card-shadow); overflow: hidden; } .m-card--tight { padding: 0; } .m-card--dev { padding: var(--size-5); border-color: var(--warn-border); background: var(--warn-bg); border-left: 4px solid var(--orange-5); } .m-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--size-3); padding: var(--size-4) var(--size-5); border-bottom: var(--border-size-1) solid var(--line-subtle); } .m-card-head h2 { font-size: var(--font-size-2); font-weight: var(--font-weight-6); margin: 0; } .m-card-head--padded { padding: var(--size-4) var(--size-5); } /* Meetings */ .m-meeting-summary { display: flex; gap: var(--size-5); padding: var(--size-3) var(--size-5); border-bottom: var(--border-size-1) solid var(--line-subtle); background: var(--surface-warm); font-size: var(--font-size-0); color: var(--ink-soft); } .m-meetings-list { padding: var(--size-2) 0; } .m-meeting { display: grid; grid-template-columns: auto 1fr; gap: var(--size-4); padding: var(--size-3) var(--size-5); border-bottom: var(--border-size-1) solid var(--line-subtle); transition: background 0.2s var(--ease-2); } .m-meeting:last-child { border-bottom: none; } .m-meeting:hover { background: var(--table-hover-bg); } .m-meeting--external { border-left: 3px solid var(--brand-structure); padding-left: calc(var(--size-5) - 3px); } .m-meeting-time { display: flex; flex-direction: column; align-items: center; min-width: 48px; padding-top: 2px; } .m-meeting-start { font-size: var(--font-size-1); font-weight: var(--font-weight-6); color: var(--ink); } .m-meeting-end { font-size: var(--font-size-00); color: var(--ink-muted); } .m-meeting-info h3 { font-size: var(--font-size-1); font-weight: var(--font-weight-5); margin: 0 0 var(--size-1); color: var(--ink); } .m-attendees { display: flex; flex-wrap: wrap; gap: var(--size-1); margin-bottom: var(--size-1); } .m-attendee { font-size: var(--font-size-00); color: var(--ink-soft); background: var(--surface-warm); border: var(--border-size-1) solid var(--line-subtle); border-radius: var(--radius-round); padding: 1px var(--size-2); } .m-attendee--more { background: var(--surface-cool); color: var(--teal-accent); font-weight: var(--font-weight-5); } .m-attendee--empty { font-style: italic; } .m-meeting-meta { font-size: var(--font-size-00); color: var(--ink-muted); margin: 0; } .m-meetings-empty { padding: var(--size-7) var(--size-5); text-align: center; } .m-meetings-empty h3 { color: var(--ink-soft); font-weight: var(--font-weight-5); margin-bottom: var(--size-2); } .m-meetings-empty p { color: var(--ink-muted); font-size: var(--font-size-0); margin: 0; } /* Workflow pulse */ .m-completion { padding: var(--size-4) var(--size-5); border-bottom: var(--border-size-1) solid var(--line-subtle); } .m-completion-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--size-2); font-size: var(--font-size-0); } .m-completion-head strong { color: var(--teal-accent); font-weight: var(--font-weight-6); } .m-status-grid { display: flex; flex-wrap: wrap; gap: var(--size-2); padding: var(--size-4) var(--size-5); } /* Quick start */ .m-quick-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0; } .m-quick-link { display: flex; flex-direction: column; gap: var(--size-1); padding: var(--size-6) var(--size-5); text-decoration: none; transition: all 0.4s var(--ease-3); border-top: var(--border-size-1) solid var(--line-subtle); } .m-quick-link:first-child { border-right: var(--border-size-1) solid var(--line-subtle); } .m-quick-link--breath { background: var(--surface-cool); } .m-quick-link--meditate { background: color-mix(in srgb, var(--brand-mist) 20%, var(--surface-raised)); } [data-theme="dark"] .m-quick-link--breath { background: color-mix(in srgb, var(--brand-9) 30%, #141e23); } [data-theme="dark"] .m-quick-link--meditate { background: color-mix(in srgb, var(--brand-structure) 20%, #141e23); } .m-quick-link:hover { filter: brightness(0.97); transform: translateY(-1px); } [data-theme="dark"] .m-quick-link:hover { filter: brightness(1.1); } .m-quick-svg { width: 40px; height: 40px; stroke: var(--brand-secondary); stroke-width: 2.5; stroke-linecap: round; fill: none; margin-bottom: var(--size-2); } .m-quick-link--meditate .m-quick-svg { stroke: var(--brand-structure); } .m-quick-name { font-family: var(--font-ui); font-size: var(--font-size-1); font-weight: var(--font-weight-6); color: var(--ink); } .m-quick-desc { font-size: var(--font-size-0); color: var(--ink-soft); } .m-quick-action { font-size: var(--font-size-0); color: var(--teal-accent); font-weight: var(--font-weight-5); margin-top: var(--size-2); } .m-quick-link--meditate .m-quick-action { color: var(--indigo-accent); } /* Reminder rules */ .m-rules-list { display: grid; gap: var(--size-3); padding: var(--size-4) var(--size-5) var(--size-5); } .m-rule { padding: var(--size-3) var(--size-4); border-radius: var(--radius-2); background: var(--surface-warm); border: var(--border-size-1) solid var(--line-subtle); border-left: 3px solid var(--brand-4); } .m-rule--empty { background: var(--surface-warm); border-left: 3px solid var(--line); text-align: center; } .m-rule-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--size-1); } .m-rule-type { font-family: var(--font-ui); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--letter-spacing-caps); color: var(--teal-accent); font-weight: var(--weight-medium); } .m-rule strong { font-size: var(--font-size-0); color: var(--ink); display: block; } .m-rule p { font-size: var(--font-size-00); color: var(--ink-soft); margin: 0; } .m-rule small { color: var(--ink-muted); } .m-muted { color: var(--ink-soft); font-size: var(--font-size-0); padding: 0 var(--size-5); display: block; } /* Account / connections */ .m-conn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--size-3); padding: var(--size-4) var(--size-5); } .m-conn-item { display: flex; flex-direction: column; gap: 3px; padding: var(--size-3); border-radius: var(--radius-2); background: var(--surface-warm); border: var(--border-size-1) solid var(--line-subtle); } .m-conn-item span { font-size: var(--font-size-00); color: var(--ink-muted); } .m-conn-item strong { font-size: var(--font-size-0); } .m-conn--ok { color: var(--ok-color); } .m-conn--warn { color: var(--warn-color); } .m-conn-actions { display: flex; flex-wrap: wrap; gap: var(--size-3); padding: var(--size-4) var(--size-5) var(--size-5); border-top: var(--border-size-1) solid var(--line-subtle); } .m-warn-msg { font-size: var(--font-size-0); color: var(--warn-color); padding: var(--size-1) 0; } /* Footer */ .m-footer { display: flex; justify-content: flex-end; padding-top: var(--size-4); border-top: var(--border-size-1) solid var(--line-subtle); } /* ============================================================ 11. RULE MODAL ============================================================ */ sl-dialog::part(body) { padding: 0; } sl-dialog::part(panel) { max-width: min(900px, 96vw); } .rule-form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--size-4); padding: var(--size-5); } .rule-form-card { display: flex; flex-direction: column; gap: var(--size-3); padding: var(--size-4); border: var(--border-size-1) solid var(--line); border-radius: var(--radius-3); background: var(--surface-warm); } .rule-form-card h4 { font-size: var(--font-size-0); font-weight: var(--font-weight-6); color: var(--ink); margin: 0; line-height: var(--font-lineheight-3); } .rule-form-inline { display: grid; grid-template-columns: 1fr 1fr; gap: var(--size-3); } .rule-list-wrap { padding: var(--size-5); border-top: var(--border-size-1) solid var(--line-subtle); } .rule-list-wrap h4 { font-size: var(--font-size-1); font-weight: var(--font-weight-6); margin-bottom: var(--size-3); color: var(--ink); } .rule-pill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--size-3); } .rule-pill { padding: var(--size-3) var(--size-4); border-radius: var(--radius-2); background: var(--surface-raised); border: var(--border-size-1) solid var(--line-subtle); border-left: 3px solid var(--brand-4); } .rule-pill strong { display: block; font-size: var(--font-size-0); color: var(--ink); margin-bottom: var(--size-1); } .rule-pill p { font-size: var(--font-size-00); color: var(--ink-soft); margin: 0 0 var(--size-1); } .rule-pill small { font-size: var(--font-size-00); color: var(--ink-muted); } /* ============================================================ 12. SYSTEM ADMIN ============================================================ */ .stats-grid { display: grid; gap: var(--size-4); grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: var(--size-6); } .stat-card { background: var(--surface-raised); border: var(--border-size-1) solid var(--line); border-radius: var(--radius-3); padding: var(--size-6) var(--size-5); text-align: center; box-shadow: var(--card-shadow); } .stat-card:nth-child(1) { border-top: 3px solid var(--brand-secondary); } .stat-card:nth-child(2) { border-top: 3px solid var(--brand-structure); } .stat-card:nth-child(3) { border-top: 3px solid var(--brand-soft); } .stat-card:nth-child(4) { border-top: 3px solid var(--brand-mist); } .stat-card h2 { font-family: var(--font-ui); font-size: var(--font-size-7); font-weight: var(--font-weight-8); margin-bottom: var(--size-2); } .stat-card:nth-child(1) h2 { color: var(--teal-accent); } .stat-card:nth-child(2) h2 { color: var(--indigo-accent); } .stat-card:nth-child(3) h2 { color: var(--green-accent); } .stat-card:nth-child(4) h2 { color: var(--orange-accent); } .stat-card p { font-size: var(--font-size-0); color: var(--ink-soft); margin: 0; } /* ============================================================ 13. ONBOARDING (app.js rendered) ============================================================ */ .seat-pill { display: inline-flex; align-items: center; padding: var(--size-2) var(--size-3); border-radius: var(--radius-round); font-size: var(--font-size-0); font-weight: var(--font-weight-5); background: var(--surface-cool); color: var(--teal-accent); border: var(--border-size-1) solid var(--line); margin-bottom: var(--size-3); } .org-line { font-size: var(--font-size-1); margin-bottom: var(--size-2); } .warning { padding: var(--size-3) var(--size-4); border-radius: var(--radius-2); background: var(--warn-bg); color: var(--warn-color); border: var(--border-size-1) solid var(--warn-border); font-size: var(--font-size-0); } .step-list { padding-left: var(--size-5); font-size: var(--font-size-0); color: var(--ink-soft); line-height: var(--font-lineheight-4); } .button-row { display: flex; flex-wrap: wrap; gap: var(--size-3); margin-top: var(--size-3); } .inline-form { display: flex; flex-wrap: wrap; gap: var(--size-3); align-items: flex-end; margin-top: var(--size-3); } .form-grid { display: grid; gap: var(--size-3); margin-top: var(--size-3); } .form-grid label, .inline-form label { display: grid; gap: var(--size-1); font-size: var(--font-size-0); font-weight: var(--font-weight-5); color: var(--ink); } .button-link { display: inline-flex; align-items: center; padding: var(--size-2) var(--size-4); border: var(--border-size-1) solid var(--line); border-radius: var(--radius-2); color: var(--teal-accent); font-size: var(--font-size-0); font-weight: var(--font-weight-5); text-decoration: none; transition: all 0.2s var(--ease-2); } .button-link:hover { background: var(--surface-cool); } /* ============================================================ 14. MEMBER ONBOARDING WIZARD ============================================================ */ .ob-shell { max-width: 640px; margin-inline: auto; padding-block: var(--size-7) var(--size-9); } .ob-header { margin-bottom: var(--size-5); } .ob-overline { font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--letter-spacing-caps); text-transform: uppercase; color: var(--teal-accent); font-weight: var(--weight-medium); margin: 0 0 var(--size-2); } .ob-title { font-family: var(--font-ui); font-size: clamp(var(--font-size-5), 4vw, var(--font-size-7)); font-weight: var(--font-weight-8); line-height: var(--font-lineheight-1); margin: 0 0 var(--size-2); color: var(--ink); } .ob-lead { color: var(--ink-soft); font-size: var(--font-size-1); margin: 0; } /* Progress bar */ .ob-progress { height: 6px; border-radius: var(--radius-round); background: var(--line); overflow: hidden; margin-bottom: var(--size-2); } .ob-progress-bar { height: 100%; background: linear-gradient(90deg, var(--brand-secondary), var(--brand-primary)); border-radius: var(--radius-round); transition: width 0.35s var(--ease-3); } .ob-step-label { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--ink-muted); text-transform: uppercase; letter-spacing: var(--letter-spacing-caps); margin: 0 0 var(--size-5); } /* Steps */ .ob-step { animation: m-fade-up 250ms var(--ease-4) both; } .ob-step h2 { font-size: var(--font-size-3); font-weight: var(--font-weight-7); margin: 0 0 var(--size-2); color: var(--ink); } .ob-hint { color: var(--ink-soft); font-size: var(--font-size-0); margin: 0 0 var(--size-5); } /* Options */ .ob-option-group { display: grid; gap: var(--size-4); } .ob-option { padding: var(--size-4); border: var(--border-size-1) solid var(--line); border-radius: var(--radius-3); background: var(--surface-raised); } .ob-time-range { display: grid; grid-template-columns: 1fr 1fr; gap: var(--size-3); margin-top: var(--size-3); } /* Radio groups */ .ob-step sl-radio-group { margin-bottom: var(--size-5); } /* Slack status */ .ob-slack-status { margin-bottom: var(--size-5); } /* Actions */ .ob-actions { display: flex; gap: var(--size-3); margin-top: var(--size-5); } /* Skip link */ .ob-skip { display: block; text-align: center; margin-top: var(--size-5); font-size: var(--font-size-0); color: var(--ink-muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--ink-muted) 40%, transparent); transition: color 0.2s var(--ease-2); } .ob-skip:hover { color: var(--ink-soft); } /* ============================================================ 15. ANIMATIONS ============================================================ */ @keyframes member-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes m-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================ 16. RESPONSIVE ============================================================ */ @media (max-width: 980px) { .m-header-inner { flex-direction: column; align-items: flex-start; } .m-reset-card { max-width: 100%; min-width: 0; width: 100%; } .m-layout { grid-template-columns: 1fr; } .admin-grid { grid-template-columns: 1fr; } .admin-grid-secondary { grid-template-columns: 1fr; } .summary-metric-grid { grid-template-columns: repeat(3, 1fr); } .summary-metric-domain { grid-column: span 1; } } @media (max-width: 680px) { .m-kpis { grid-template-columns: repeat(2, 1fr); } .admin-kpis { grid-template-columns: repeat(2, 1fr); } .stats-grid { grid-template-columns: repeat(2, 1fr); } .rule-form-grid { grid-template-columns: 1fr; } .m-conn-grid { grid-template-columns: 1fr; } .m-quick-row { grid-template-columns: 1fr; } .m-quick-link:first-child { border-right: none; border-bottom: var(--border-size-1) solid var(--line-subtle); } .summary-metric-grid { grid-template-columns: repeat(2, 1fr); } sl-button[size="medium"] { width: 100%; } .button-row { flex-direction: column; } } /* ============================================================ 17. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .m-kpi-card, .m-kpis, .m-reset-btn, .m-quick-link, tbody tr { animation: none; transition: none; } }