Spaces:
Running
Running
| /* ═══════════════════════════════════════════════ | |
| BREATHE — Main Stylesheet | |
| ═══════════════════════════════════════════════ */ | |
| :root { | |
| --bg: #0e1117; | |
| --surface: #161b27; | |
| --surface2: #1e2535; | |
| --border: #2a3348; | |
| --accent: #4f8ef7; | |
| --accent2: #7c5cfc; | |
| --text: #e2e8f0; | |
| --text-muted: #7a8aa0; | |
| --success: #4ade80; | |
| --warning: #fbbf24; | |
| --danger: #f87171; | |
| /* Stress level colours */ | |
| --minimal: #4ade80; | |
| --mild: #86efac; | |
| --moderate: #fbbf24; | |
| --severe: #fb923c; | |
| --critical: #f87171; | |
| --radius: 14px; | |
| --radius-sm: 8px; | |
| --shadow: 0 4px 24px rgba(0,0,0,.4); | |
| --transition: 0.2s ease; | |
| } | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| html { scroll-behavior: smooth; } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background: var(--bg); | |
| color: var(--text); | |
| font-size: 15px; | |
| line-height: 1.6; | |
| min-height: 100vh; | |
| } | |
| /* ── Utilities ───────────────────────────────── */ | |
| .hidden { display: none ; } | |
| .mt-sm { margin-top: 12px; } | |
| .full-width { width: 100%; } | |
| /* ── Screens ─────────────────────────────────── */ | |
| .screen { display: none; } | |
| .screen.active { display: block; } | |
| /* ══════════════════════════════════════════════ | |
| AUTH | |
| ══════════════════════════════════════════════ */ | |
| .auth-bg { | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: | |
| radial-gradient(ellipse at 20% 30%, rgba(79,142,247,.15) 0%, transparent 60%), | |
| radial-gradient(ellipse at 80% 70%, rgba(124,92,252,.15) 0%, transparent 60%), | |
| var(--bg); | |
| } | |
| .auth-card { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 40px 36px; | |
| width: 100%; | |
| max-width: 420px; | |
| box-shadow: var(--shadow); | |
| } | |
| .brand { | |
| text-align: center; | |
| margin-bottom: 28px; | |
| } | |
| .brand-icon { font-size: 2.8rem; display: block; margin-bottom: 6px; } | |
| .brand-name { font-size: 2rem; font-weight: 700; letter-spacing: .06em; color: var(--accent); } | |
| .brand-tagline { color: var(--text-muted); font-size: .85rem; margin-top: 4px; } | |
| /* Tabs */ | |
| .tab-bar { | |
| display: flex; | |
| background: var(--bg); | |
| border-radius: var(--radius-sm); | |
| padding: 4px; | |
| margin-bottom: 24px; | |
| } | |
| .tab { | |
| flex: 1; | |
| padding: 8px; | |
| border: none; | |
| border-radius: 6px; | |
| background: transparent; | |
| color: var(--text-muted); | |
| font-size: .9rem; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .tab.active { | |
| background: var(--surface2); | |
| color: var(--text); | |
| box-shadow: 0 2px 8px rgba(0,0,0,.3); | |
| } | |
| /* Auth forms */ | |
| .auth-form { display: none; } | |
| .auth-form.active { display: block; } | |
| .field { margin-bottom: 16px; } | |
| .field label { | |
| display: block; | |
| font-size: .82rem; | |
| font-weight: 500; | |
| color: var(--text-muted); | |
| margin-bottom: 6px; | |
| letter-spacing: .03em; | |
| text-transform: uppercase; | |
| } | |
| .field label small { text-transform: none; font-weight: 400; } | |
| input[type="text"], | |
| input[type="email"], | |
| input[type="password"], | |
| input[type="number"], | |
| select, | |
| textarea { | |
| width: 100%; | |
| padding: 10px 14px; | |
| background: var(--bg); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| color: var(--text); | |
| font-size: .92rem; | |
| font-family: inherit; | |
| outline: none; | |
| transition: border-color var(--transition); | |
| } | |
| input:focus, select:focus, textarea:focus { | |
| border-color: var(--accent); | |
| } | |
| select option { background: var(--surface); } | |
| textarea { resize: vertical; } | |
| .form-error { | |
| background: rgba(248,113,113,.12); | |
| border: 1px solid rgba(248,113,113,.4); | |
| border-radius: var(--radius-sm); | |
| color: var(--danger); | |
| padding: 10px 14px; | |
| font-size: .88rem; | |
| margin-bottom: 14px; | |
| } | |
| /* Buttons */ | |
| .btn-primary { | |
| padding: 11px 22px; | |
| background: linear-gradient(135deg, var(--accent), var(--accent2)); | |
| border: none; | |
| border-radius: var(--radius-sm); | |
| color: #fff; | |
| font-size: .95rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: opacity var(--transition), transform var(--transition); | |
| } | |
| .btn-primary:hover { opacity: .9; transform: translateY(-1px); } | |
| .btn-primary:active { opacity: 1; transform: none; } | |
| .btn-secondary { | |
| padding: 10px 20px; | |
| background: transparent; | |
| border: 1px solid var(--accent); | |
| border-radius: var(--radius-sm); | |
| color: var(--accent); | |
| font-size: .9rem; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| display: inline-block; | |
| } | |
| .btn-secondary:hover { background: rgba(79,142,247,.1); } | |
| .btn-ghost { | |
| background: transparent; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .btn-ghost:hover { color: var(--text); border-color: var(--text-muted); } | |
| .btn-ghost.small { padding: 6px 12px; font-size: .82rem; } | |
| /* ══════════════════════════════════════════════ | |
| APP LAYOUT | |
| ══════════════════════════════════════════════ */ | |
| #app-screen { display: flex; min-height: 100vh; } | |
| /* Sidebar */ | |
| .sidebar { | |
| width: 230px; | |
| background: var(--surface); | |
| border-right: 1px solid var(--border); | |
| display: flex; | |
| flex-direction: column; | |
| padding: 20px 0; | |
| position: sticky; | |
| top: 0; | |
| height: 100vh; | |
| flex-shrink: 0; | |
| } | |
| .sidebar-brand { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 0 20px 20px; | |
| border-bottom: 1px solid var(--border); | |
| margin-bottom: 16px; | |
| } | |
| .brand-icon { font-size: 1.5rem; } | |
| .brand-name-sm { font-size: 1.1rem; font-weight: 700; color: var(--accent); letter-spacing: .04em; } | |
| .sidebar-nav { flex: 1; padding: 0 12px; } | |
| .nav-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| width: 100%; | |
| padding: 10px 12px; | |
| border: none; | |
| border-radius: var(--radius-sm); | |
| background: transparent; | |
| color: var(--text-muted); | |
| font-size: .9rem; | |
| font-weight: 500; | |
| cursor: pointer; | |
| margin-bottom: 4px; | |
| transition: var(--transition); | |
| text-align: left; | |
| } | |
| .nav-item:hover { background: var(--surface2); color: var(--text); } | |
| .nav-item.active { background: var(--surface2); color: var(--accent); } | |
| .nav-icon { font-size: 1rem; } | |
| .sidebar-footer { | |
| padding: 16px 20px 0; | |
| border-top: 1px solid var(--border); | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .user-info { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .user-avatar { font-size: 1.2rem; } | |
| .user-name { font-size: .88rem; font-weight: 500; color: var(--text); } | |
| /* Main content */ | |
| .main-content { | |
| flex: 1; | |
| padding: 32px 36px; | |
| overflow-y: auto; | |
| max-width: 1100px; | |
| } | |
| .view { display: none; } | |
| .view.active { display: block; } | |
| /* Page header */ | |
| .page-header { margin-bottom: 28px; } | |
| .page-header h2 { | |
| font-size: 1.6rem; | |
| font-weight: 700; | |
| background: linear-gradient(90deg, var(--text), var(--text-muted)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .page-sub { color: var(--text-muted); margin-top: 4px; font-size: .9rem; } | |
| /* ══════════════════════════════════════════════ | |
| CARDS | |
| ══════════════════════════════════════════════ */ | |
| .card { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 24px; | |
| margin-bottom: 20px; | |
| box-shadow: var(--shadow); | |
| } | |
| .card h3 { | |
| font-size: 1rem; | |
| font-weight: 600; | |
| color: var(--text-muted); | |
| margin-bottom: 16px; | |
| text-transform: uppercase; | |
| letter-spacing: .06em; | |
| font-size: .8rem; | |
| } | |
| /* Stats row */ | |
| .stats-row { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); | |
| gap: 16px; | |
| margin-bottom: 20px; | |
| } | |
| .stat-card { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 20px 22px; | |
| transition: var(--transition); | |
| } | |
| .stat-card:hover { border-color: var(--accent); } | |
| .stat-value { | |
| font-size: 1.8rem; | |
| font-weight: 700; | |
| color: var(--accent); | |
| line-height: 1; | |
| margin-bottom: 6px; | |
| } | |
| .stat-label { | |
| font-size: .78rem; | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: .05em; | |
| } | |
| /* Charts */ | |
| .chart-card { } | |
| .chart-wrap { position: relative; height: 250px; } | |
| .donut-wrap { max-width: 300px; height: 280px; margin: 0 auto; } | |
| /* ══════════════════════════════════════════════ | |
| ASSESSMENT FORM | |
| ══════════════════════════════════════════════ */ | |
| .section-card { margin-bottom: 20px; } | |
| .section-title { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| margin-bottom: 6px; | |
| } | |
| .section-title h3 { | |
| font-size: 1rem; | |
| font-weight: 600; | |
| color: var(--text); | |
| text-transform: none; | |
| letter-spacing: 0; | |
| margin: 0; | |
| } | |
| .section-icon { font-size: 1.2rem; } | |
| .section-badge { | |
| font-size: .72rem; | |
| padding: 2px 8px; | |
| border-radius: 20px; | |
| font-weight: 500; | |
| } | |
| .section-badge.optional { | |
| background: rgba(122,138,160,.15); | |
| color: var(--text-muted); | |
| border: 1px solid rgba(122,138,160,.3); | |
| } | |
| .section-desc { color: var(--text-muted); font-size: .86rem; margin-bottom: 18px; } | |
| .form-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); | |
| gap: 14px; | |
| } | |
| /* ══════════════════════════════════════════════ | |
| RESULT CARD | |
| ══════════════════════════════════════════════ */ | |
| .result-card { } | |
| .result-gauge-wrap { | |
| display: flex; | |
| justify-content: center; | |
| margin: 12px 0 20px; | |
| } | |
| .gauge-circle { | |
| position: relative; | |
| width: 160px; | |
| height: 160px; | |
| } | |
| .gauge-circle svg { | |
| width: 100%; | |
| height: 100%; | |
| transform: rotate(-90deg); | |
| } | |
| .gauge-bg { fill: none; stroke: var(--surface2); stroke-width: 12; } | |
| .gauge-arc { | |
| fill: none; | |
| stroke: var(--accent); | |
| stroke-width: 12; | |
| stroke-linecap: round; | |
| transition: stroke-dasharray 1s ease, stroke 0.5s ease; | |
| } | |
| .gauge-center { | |
| position: absolute; | |
| inset: 0; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .gauge-score { font-size: 1.8rem; font-weight: 700; color: var(--text); } | |
| .gauge-label { font-size: .78rem; color: var(--text-muted); } | |
| .result-details { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; } | |
| .result-item { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 10px 14px; | |
| background: var(--surface2); | |
| border-radius: var(--radius-sm); | |
| } | |
| .result-key { font-size: .85rem; color: var(--text-muted); } | |
| .result-val { font-size: .9rem; font-weight: 600; } | |
| .result-advice { | |
| padding: 14px 16px; | |
| border-radius: var(--radius-sm); | |
| font-size: .9rem; | |
| line-height: 1.6; | |
| margin-top: 8px; | |
| border-left: 4px solid var(--accent); | |
| background: rgba(79,142,247,.07); | |
| color: var(--text); | |
| } | |
| /* Stress level colour helpers */ | |
| .level-minimal { color: var(--minimal); } | |
| .level-mild { color: var(--mild); } | |
| .level-moderate { color: var(--warning); } | |
| .level-severe { color: var(--severe); } | |
| .level-critical { color: var(--critical); } | |
| /* ══════════════════════════════════════════════ | |
| ASSESSMENT LIST / HISTORY | |
| ══════════════════════════════════════════════ */ | |
| .assessment-list.full { max-height: none; } | |
| .empty-state { color: var(--text-muted); text-align: center; padding: 32px 0; font-size: .92rem; } | |
| .assessment-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| padding: 14px 16px; | |
| background: var(--surface2); | |
| border-radius: var(--radius-sm); | |
| margin-bottom: 10px; | |
| cursor: pointer; | |
| border: 1px solid transparent; | |
| transition: var(--transition); | |
| } | |
| .assessment-item:hover { border-color: var(--accent); } | |
| .assess-badge { | |
| min-width: 90px; | |
| text-align: center; | |
| padding: 4px 12px; | |
| border-radius: 20px; | |
| font-size: .78rem; | |
| font-weight: 600; | |
| } | |
| .assess-date { font-size: .82rem; color: var(--text-muted); flex: 1; } | |
| .assess-score { | |
| font-size: .88rem; | |
| font-weight: 600; | |
| color: var(--text-muted); | |
| } | |
| .assess-modality { | |
| font-size: .75rem; | |
| color: var(--text-muted); | |
| background: var(--bg); | |
| padding: 2px 8px; | |
| border-radius: 10px; | |
| } | |
| .level-bg-minimal { background: rgba(74,222,128,.15); color: var(--minimal); } | |
| .level-bg-mild { background: rgba(134,239,172,.15); color: var(--mild); } | |
| .level-bg-moderate { background: rgba(251,191,36,.15); color: var(--warning); } | |
| .level-bg-severe { background: rgba(251,146,60,.15); color: var(--severe); } | |
| .level-bg-critical { background: rgba(248,113,113,.15); color: var(--critical); } | |
| /* ── Pagination ──────────────────────────────── */ | |
| .pagination { | |
| display: flex; | |
| justify-content: center; | |
| gap: 8px; | |
| margin-top: 16px; | |
| } | |
| .page-btn { | |
| padding: 6px 14px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| background: var(--surface); | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| font-size: .85rem; | |
| transition: var(--transition); | |
| } | |
| .page-btn:hover, .page-btn.active { | |
| border-color: var(--accent); | |
| color: var(--accent); | |
| } | |
| /* ══════════════════════════════════════════════ | |
| MODAL | |
| ══════════════════════════════════════════════ */ | |
| .modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; } | |
| .modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); } | |
| .modal-box { | |
| position: relative; | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 28px 32px; | |
| width: 90%; | |
| max-width: 540px; | |
| max-height: 80vh; | |
| overflow-y: auto; | |
| box-shadow: var(--shadow); | |
| z-index: 1; | |
| } | |
| .modal-box h3 { font-size: 1.1rem; margin-bottom: 16px; } | |
| .modal-close { | |
| position: absolute; | |
| top: 14px; | |
| right: 16px; | |
| background: none; | |
| border: none; | |
| color: var(--text-muted); | |
| font-size: 1.1rem; | |
| cursor: pointer; | |
| } | |
| .modal-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } | |
| .modal-kv-item { background: var(--surface2); padding: 10px 14px; border-radius: var(--radius-sm); } | |
| .modal-kv-key { font-size: .75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing:.04em; } | |
| .modal-kv-val { font-size: .95rem; font-weight: 600; margin-top: 2px; } | |
| /* ══════════════════════════════════════════════ | |
| RESPONSIVE | |
| ══════════════════════════════════════════════ */ | |
| @media (max-width: 768px) { | |
| .sidebar { display: none; } | |
| .main-content { padding: 20px 16px; } | |
| .stats-row { grid-template-columns: repeat(2, 1fr); } | |
| .form-grid { grid-template-columns: 1fr; } | |
| } | |