/* ============================================================ MEA Design System Mental health companion for Mea -- DBT & anxiety support Production CSS | v1.0 | 2026-04-04 ============================================================ */ /* ---------------------------------------------------------- 1. CUSTOM PROPERTIES ---------------------------------------------------------- */ :root { /* Typography */ --font: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Backgrounds */ --bg-calm: #f5f0e8; /* warm beige -- default state */ --bg-stress: #f2ede4; /* slightly muted beige */ --bg-crisis: #0b1610; /* forest dark -- crisis state */ --bg-dark: #0e1a13; /* dark-mode body */ /* Brand palette */ --teal: #187a6c; --teal-light: #2eb8a8; --teal-dark: #0e5248; --amber: #e8c870; /* Text */ --text: #2d2419; --text-light: #7a7060; --text-dark-mode: #d4cfc6; /* Cards */ --card-bg: #ffffff; --card-bg-dark: #1a2a1e; --shadow: 0 2px 12px rgba(24,122,108,.08); /* Radii */ --r: 16px; /* card radius */ --rs: 10px; /* small radius */ /* Motion */ --transition: .3s cubic-bezier(.32,0,.15,1); } /* ---------------------------------------------------------- 2. BASE & RESET ---------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; overflow-x: hidden; -webkit-text-size-adjust: 100%; } body { font-family: var(--font); background: var(--bg-calm); color: var(--text); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0); overflow-x: hidden; min-height: 100vh; min-height: 100dvh; } button, input, textarea, select { font: inherit; } a, button, input, textarea, select, [role="button"] { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } img, svg { display: block; max-width: 100%; } /* ---------------------------------------------------------- 3. STATE SYSTEM (data-state on ) calm | stress | crisis ---------------------------------------------------------- */ /* --- Calm (default) --- */ [data-state="calm"] body, body { background: radial-gradient(ellipse at 20% 0%, rgba(24,122,108,.06) 0%, transparent 60%), radial-gradient(ellipse at 80% 100%, rgba(232,200,112,.05) 0%, transparent 60%), var(--bg-calm); } /* --- Stress --- */ [data-state="stress"] body { background: var(--bg-stress); filter: saturate(.72); } [data-state="stress"] .stress-hide { display: none !important; } /* --- Crisis --- */ [data-state="crisis"] body { background: var(--bg-crisis); color: var(--text-dark-mode); } [data-state="crisis"] .crisis-hide { display: none !important; } [data-state="crisis"] .mea-botnav { display: none !important; } /* ---------------------------------------------------------- 4. TYPOGRAPHY ---------------------------------------------------------- */ h1 { font-size: 22px; font-weight: 900; line-height: 1.25; } h2 { font-size: 18px; font-weight: 800; line-height: 1.3; } h3 { font-size: 15px; font-weight: 700; line-height: 1.35; } .text-sm { font-size: 12px; } .text-xs { font-size: 11px; } .text-muted { color: var(--text-light); } /* ---------------------------------------------------------- 5. CARD COMPONENT ---------------------------------------------------------- */ .mea-card { background: var(--card-bg); border-radius: var(--r); padding: 18px; box-shadow: var(--shadow); margin-bottom: 12px; } .mea-card-hdr { font-size: 14px; font-weight: 800; color: var(--teal-dark); margin-bottom: 10px; } /* ---------------------------------------------------------- 6. BUTTON COMPONENTS ---------------------------------------------------------- */ .mea-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 22px; border: none; border-radius: var(--r); background: var(--teal); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; touch-action: manipulation; transition: var(--transition); } .mea-btn:active { transform: scale(.96); } .mea-btn-secondary { background: transparent; color: var(--teal); border: 2px solid var(--teal); } .mea-btn-danger { background: #c0392b; color: #fff; } .mea-btn-danger:active { background: #a93226; } .mea-btn-ghost { background: transparent; color: var(--teal); border: none; } .mea-btn:disabled { opacity: .45; pointer-events: none; } /* Toggle chip */ .mea-chip { display: inline-flex; align-items: center; padding: 6px 14px; border: 2px solid #e8e0d6; border-radius: 20px; background: #fff; color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; transition: var(--transition); } .mea-chip.selected, .mea-chip.active { border-color: var(--teal); background: rgba(24,122,108,.10); color: var(--teal-dark); } /* ---------------------------------------------------------- 7. EMOJI SCALE ---------------------------------------------------------- */ .emoji-scale { display: flex; gap: 6px; justify-content: center; } .emoji-scale button { flex: 1; padding: 12px 4px; border-radius: var(--rs); border: 2px solid #e8e0d6; background: #fff; font-size: 26px; cursor: pointer; transition: var(--transition); } .emoji-scale button.active { border-color: var(--teal); background: rgba(24,122,108,.08); transform: scale(1.08); } .emoji-scale .scale-label { font-size: 10px; display: block; margin-top: 2px; color: var(--text-light); } /* ---------------------------------------------------------- 8. HEADER COMPONENT ---------------------------------------------------------- */ .mea-hdr { padding: 20px 18px 16px; border-radius: 0 0 24px 24px; color: #fff; position: relative; } .mea-hdr.morning { background: linear-gradient(135deg, #e67e22, #f39c12); } .mea-hdr.day { background: linear-gradient(135deg, #8b1a6b, #c2457a); } .mea-hdr.evening { background: linear-gradient(135deg, #1a5276, #2980b9); } .mea-hdr.default { background: linear-gradient(135deg, #1a5276, #187a6c); } /* ---------------------------------------------------------- 9. BOTTOM NAVIGATION ---------------------------------------------------------- */ .mea-botnav { position: fixed; bottom: 0; left: 0; right: 0; display: flex; background: #fff; border-top: 1px solid #e8e0d6; padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0)); z-index: 100; } .mea-nav { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; color: var(--text-light); border: none; background: none; padding: 6px 0; cursor: pointer; transition: color .2s; } .mea-nav.active { color: var(--teal); font-weight: 700; } .mea-nav span:first-child { font-size: 20px; } /* ---------------------------------------------------------- 10. TOAST NOTIFICATION ---------------------------------------------------------- */ .mea-toast { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); background: var(--teal-dark); color: #fff; padding: 10px 22px; border-radius: 24px; font-size: 13px; font-weight: 700; box-shadow: 0 4px 20px rgba(0,0,0,.25); z-index: 999; opacity: 0; transition: opacity .3s; pointer-events: none; white-space: nowrap; } .mea-toast.show { opacity: 1; pointer-events: auto; } /* ---------------------------------------------------------- 11. MODAL / BOTTOM SHEET ---------------------------------------------------------- */ .mea-modal { position: fixed; inset: 0; z-index: 500; background: rgba(0,0,0,.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: none; align-items: flex-end; justify-content: center; } .mea-modal.show { display: flex; } .mea-modal-sheet { background: var(--card-bg); width: 100%; max-width: 500px; border-radius: 20px 20px 0 0; padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0)); max-height: 85vh; overflow-y: auto; animation: slideUp .35s var(--transition); } .mea-modal-handle { width: 36px; height: 4px; background: #d4cfc6; border-radius: 2px; margin: 0 auto 16px; } @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } /* ---------------------------------------------------------- 12. FORM INPUTS ---------------------------------------------------------- */ .mea-input, .mea-textarea, .mea-select { width: 100%; padding: 12px 14px; border: 2px solid #e8e0d6; border-radius: var(--rs); background: #fff; font-size: 14px; color: var(--text); transition: border-color .2s; outline: none; } .mea-input:focus, .mea-textarea:focus, .mea-select:focus { border-color: var(--teal); } .mea-textarea { min-height: 80px; resize: vertical; } .mea-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a7060' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; } /* Range slider */ .mea-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: #e8e0d6; border-radius: 3px; outline: none; } .mea-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; background: var(--teal); border-radius: 50%; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2); cursor: pointer; } /* ---------------------------------------------------------- 13. ANIMATIONS ---------------------------------------------------------- */ @keyframes pop { 0% { transform: scale(0); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } } @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } } @keyframes spin { to { transform: rotate(360deg); } } .mea-pop { animation: pop .4s ease; } .mea-fade { animation: fadeIn .3s ease; } /* Prefers reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ---------------------------------------------------------- 14. UTILITY CLASSES ---------------------------------------------------------- */ .flex { display: flex; } .flex-col { display: flex; flex-direction: column; } .flex-center { display: flex; align-items: center; justify-content: center; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .flex-wrap { flex-wrap: wrap; } .gap-sm { gap: 6px; } .gap-md { gap: 12px; } .mt-sm { margin-top: 6px; } .mt-md { margin-top: 12px; } .mb-sm { margin-bottom: 6px; } .mb-md { margin-bottom: 12px; } .hidden { display: none !important; } .crisis-hide { /* toggled by [data-state="crisis"] rule above */ } .stress-hide { /* toggled by [data-state="stress"] rule above */ } .text-center { text-align: center; } .text-right { text-align: right; } .w-full { width: 100%; } /* ---------------------------------------------------------- 15. DARK MODE ---------------------------------------------------------- */ [data-dark="true"] { --card-bg: #1a2a1e; --text: #d4cfc6; --shadow: 0 2px 12px rgba(0,0,0,.3); } [data-dark="true"] body { background: var(--bg-dark); } [data-dark="true"] .mea-botnav { background: #0e1a13; border-color: #2a3a2e; } [data-dark="true"] .mea-card { background: var(--card-bg); } [data-dark="true"] .mea-input, [data-dark="true"] .mea-textarea, [data-dark="true"] .mea-select { background: #1a2a1e; border-color: #2a3a2e; color: var(--text-dark-mode); } [data-dark="true"] .mea-chip { background: #1a2a1e; border-color: #2a3a2e; } [data-dark="true"] .emoji-scale button { background: #1a2a1e; border-color: #2a3a2e; } /* ---------------------------------------------------------- 16. SPINNER ---------------------------------------------------------- */ .mea-spinner { width: 24px; height: 24px; border: 3px solid #e8e0d6; border-top-color: var(--teal); border-radius: 50%; animation: spin .6s linear infinite; } /* ---------------------------------------------------------- 17. SUCCESS SCREEN ---------------------------------------------------------- */ .mea-success { position: fixed; inset: 0; z-index: 600; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bg-calm); text-align: center; padding: 24px; } .mea-success-emoji { font-size: 72px; animation: pop .5s ease; } .mea-success-title { font-size: 20px; font-weight: 900; margin-top: 16px; } .mea-success-sub { font-size: 14px; color: var(--text-light); margin-top: 6px; } /* ---------------------------------------------------------- 18. PIN LOCK SCREEN ---------------------------------------------------------- */ .mea-pin-overlay { position: fixed; inset: 0; z-index: 9000; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bg-calm); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .mea-pin-dots { display: flex; gap: 14px; margin-bottom: 32px; } .mea-pin-dot { width: 14px; height: 14px; border: 2px solid var(--teal); border-radius: 50%; transition: var(--transition); } .mea-pin-dot.filled { background: var(--teal); } .mea-pin-dot.error { border-color: #c0392b; background: #c0392b; animation: pop .3s ease; } .mea-pin-grid { display: grid; grid-template-columns: repeat(3, 72px); gap: 12px; } .mea-pin-key { width: 72px; height: 72px; border: none; border-radius: 50%; background: var(--card-bg); box-shadow: var(--shadow); font-size: 24px; font-weight: 700; color: var(--text); cursor: pointer; transition: var(--transition); } .mea-pin-key:active { transform: scale(.92); background: #ede8de; } .mea-pin-key.empty { visibility: hidden; } /* ---------------------------------------------------------- END OF MEA DESIGN SYSTEM ---------------------------------------------------------- */