Spaces:
Sleeping
Sleeping
| /* ───────────────────────────────────────────────────────────────────────── | |
| MediLingua · Clinical Warmth design system | |
| Hardcoded palette + serif/sans/mono pairing. No generic AI aesthetics. | |
| ───────────────────────────────────────────────────────────────────────── */ | |
| @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=DM+Sans:wght@300;400;500&family=JetBrains+Mono:wght@400&display=swap'); | |
| :root { | |
| /* Warm paper-and-clinic palette — every value hardcoded, not derived. */ | |
| --bg-base: #F7F5F0; | |
| --bg-surface: #FFFFFF; | |
| --bg-deep: #EFEDE8; | |
| --ink-1: #1A1814; | |
| --ink-2: #6B6760; | |
| --ink-3: #A8A49F; | |
| --teal: #0A7563; | |
| --teal-hover: #08604F; /* ~8% darker for hover */ | |
| --teal-tint: #E3F2EE; | |
| --amber: #C8760A; | |
| --amber-tint: #FFF8EC; | |
| --red: #B53A2F; | |
| --red-tint: #FEF0EE; | |
| --border: #E2DFD9; | |
| --border-strong: #C8C4BD; | |
| /* Type scale */ | |
| --serif: 'Playfair Display', Georgia, 'Times New Roman', serif; | |
| --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; | |
| --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; | |
| /* Motion */ | |
| --ease: cubic-bezier(0.32, 0.72, 0, 1); | |
| --t-fast: 150ms; | |
| --t-base: 200ms; | |
| --t-slow: 280ms; | |
| } | |
| *, *::before, *::after { box-sizing: border-box; } | |
| html, body, #root { | |
| margin: 0; | |
| padding: 0; | |
| height: 100%; | |
| background: var(--bg-base); | |
| color: var(--ink-1); | |
| } | |
| body { | |
| font-family: var(--sans); | |
| font-weight: 400; | |
| font-size: 15px; | |
| line-height: 1.55; | |
| -webkit-font-smoothing: antialiased; | |
| text-rendering: optimizeLegibility; | |
| } | |
| a { | |
| color: var(--teal); | |
| text-decoration: none; | |
| transition: color var(--t-fast) var(--ease); | |
| } | |
| a:hover { color: var(--teal-hover); text-decoration: underline; text-underline-offset: 3px; } | |
| button { font-family: inherit; } | |
| /* Selection */ | |
| ::selection { background: var(--teal-tint); color: var(--ink-1); } | |
| /* ───────────────────────────── Typography primitives ───────────────────── */ | |
| .h-display { | |
| font-family: var(--serif); | |
| font-weight: 700; | |
| font-size: clamp(40px, 5.5vw, 56px); | |
| line-height: 1.08; | |
| letter-spacing: -0.01em; | |
| color: var(--ink-1); | |
| margin: 0; | |
| } | |
| .h-section { | |
| font-family: var(--serif); | |
| font-weight: 700; | |
| font-size: 36px; | |
| line-height: 1.15; | |
| letter-spacing: -0.005em; | |
| color: var(--ink-1); | |
| margin: 0; | |
| } | |
| .h-card { | |
| font-family: var(--serif); | |
| font-weight: 700; | |
| font-size: 32px; | |
| line-height: 1.2; | |
| color: var(--ink-1); | |
| margin: 0; | |
| } | |
| .subhead { | |
| font-family: var(--sans); | |
| font-weight: 300; | |
| font-size: 18px; | |
| line-height: 1.7; | |
| color: var(--ink-2); | |
| max-width: 460px; | |
| margin: 0; | |
| } | |
| .eyebrow { | |
| font-family: var(--sans); | |
| font-weight: 500; | |
| font-size: 11px; | |
| letter-spacing: 0.12em; | |
| text-transform: uppercase; | |
| color: var(--ink-3); | |
| } | |
| .label { | |
| font-family: var(--sans); | |
| font-weight: 500; | |
| font-size: 12px; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| color: var(--ink-2); | |
| margin-bottom: 8px; | |
| display: block; | |
| } | |
| .helper { | |
| font-size: 12px; | |
| color: var(--ink-3); | |
| line-height: 1.55; | |
| } | |
| /* ───────────────────────────── Buttons ─────────────────────────────────── */ | |
| .btn { | |
| appearance: none; | |
| border: 0; | |
| cursor: pointer; | |
| font-family: var(--sans); | |
| font-weight: 500; | |
| font-size: 15px; | |
| padding: 14px 32px; | |
| border-radius: 6px; | |
| background: var(--teal); | |
| color: #fff; | |
| letter-spacing: 0; | |
| transition: background var(--t-fast) var(--ease); | |
| } | |
| .btn:hover:not(:disabled) { background: var(--teal-hover); } | |
| .btn:disabled { opacity: 0.4; cursor: not-allowed; } | |
| .btn-ghost { | |
| background: transparent; | |
| color: var(--ink-1); | |
| border: 1px solid var(--border); | |
| font-size: 13px; | |
| padding: 8px 16px; | |
| border-radius: 6px; | |
| cursor: pointer; | |
| font-family: var(--sans); | |
| font-weight: 400; | |
| transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); | |
| } | |
| .btn-ghost:hover:not(:disabled) { border-color: var(--border-strong); background: var(--bg-deep); } | |
| .btn-ghost:disabled { opacity: 0.4; cursor: not-allowed; } | |
| .btn-link { | |
| appearance: none; | |
| background: none; | |
| border: 0; | |
| padding: 0; | |
| cursor: pointer; | |
| color: var(--teal); | |
| font: inherit; | |
| font-weight: 500; | |
| } | |
| .btn-link:hover { color: var(--teal-hover); text-decoration: underline; text-underline-offset: 3px; } | |
| /* ───────────────────────────── Form inputs ─────────────────────────────── */ | |
| .field { margin-bottom: 22px; } | |
| .input, | |
| .select-input { | |
| width: 100%; | |
| font-family: var(--sans); | |
| font-weight: 400; | |
| font-size: 15px; | |
| height: 46px; | |
| padding: 12px 16px; | |
| background: var(--bg-surface); | |
| border: 1px solid var(--border); | |
| border-radius: 4px; | |
| color: var(--ink-1); | |
| transition: border-color var(--t-fast) var(--ease); | |
| } | |
| .input:focus, .select-input:focus { | |
| outline: none; | |
| border-color: var(--teal); | |
| } | |
| .input::placeholder { color: var(--ink-3); } | |
| .select-input { | |
| appearance: none; | |
| background-image: | |
| linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), | |
| linear-gradient(135deg, var(--ink-2) 50%, transparent 50%); | |
| background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; | |
| background-size: 5px 5px, 5px 5px; | |
| background-repeat: no-repeat; | |
| padding-right: 36px; | |
| cursor: pointer; | |
| } | |
| .input-with-affix { position: relative; } | |
| .input-with-affix .input { padding-right: 44px; } | |
| .input-affix { | |
| position: absolute; | |
| right: 12px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| background: none; | |
| border: 0; | |
| padding: 6px; | |
| cursor: pointer; | |
| color: var(--ink-2); | |
| transition: color var(--t-fast) var(--ease); | |
| } | |
| .input-affix:hover { color: var(--ink-1); } | |
| .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } | |
| @media (max-width: 540px) { .row-2 { grid-template-columns: 1fr; } } | |
| /* ───────────────────────────── Urgency badges ──────────────────────────── */ | |
| .badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| font-family: var(--sans); | |
| font-weight: 500; | |
| font-size: 12px; | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| padding: 5px 10px; | |
| border-radius: 3px; | |
| } | |
| .badge-routine { background: var(--teal-tint); color: var(--teal); } | |
| .badge-urgent { background: var(--amber); color: #fff; padding: 7px 14px; font-size: 13px; } | |
| .badge-emergency { | |
| background: var(--red); color: #fff; | |
| padding: 12px 18px; | |
| font-size: 14px; | |
| letter-spacing: 0.04em; | |
| width: 100%; | |
| justify-content: flex-start; | |
| border-radius: 4px; | |
| } | |
| /* ───────────────────────────── Page-entry stagger ──────────────────────── */ | |
| @keyframes pageRise { | |
| from { opacity: 0; transform: translateY(8px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .stagger > * { | |
| opacity: 0; | |
| animation: pageRise 520ms var(--ease) forwards; | |
| } | |
| .stagger > *:nth-child(1) { animation-delay: 60ms; } | |
| .stagger > *:nth-child(2) { animation-delay: 140ms; } | |
| .stagger > *:nth-child(3) { animation-delay: 220ms; } | |
| .stagger > *:nth-child(4) { animation-delay: 300ms; } | |
| .stagger > *:nth-child(5) { animation-delay: 380ms; } | |
| .stagger > *:nth-child(6) { animation-delay: 460ms; } | |
| .stagger > *:nth-child(7) { animation-delay: 540ms; } | |
| .stagger > *:nth-child(8) { animation-delay: 620ms; } | |
| @keyframes bubbleIn { | |
| from { opacity: 0; transform: translateY(6px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes typingDot { | |
| 0%, 60%, 100% { opacity: 0.25; } | |
| 30% { opacity: 1; } | |
| } | |
| @keyframes micPulse { | |
| 0%, 100% { box-shadow: 0 0 0 0 rgba(10, 117, 99, 0.35); } | |
| 50% { box-shadow: 0 0 0 10px rgba(10, 117, 99, 0); } | |
| } | |
| @keyframes agentPulse { | |
| 0%, 100% { opacity: 0.45; transform: scale(1); } | |
| 50% { opacity: 1; transform: scale(1.15); } | |
| } | |
| /* ───────────────────────────── Utility ─────────────────────────────────── */ | |
| .sr-only { | |
| position: absolute; width: 1px; height: 1px; | |
| padding: 0; margin: -1px; overflow: hidden; | |
| clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; | |
| } | |
| .divider { height: 1px; background: var(--border); border: 0; margin: 24px 0; } | |
| .divider-tight { height: 1px; background: var(--border); border: 0; margin: 16px 0; } | |
| /* Live interim transcript bubble emitted by VoiceRecorder in hero mode. | |
| Styled here so any screen that uses VoiceRecorder gets it for free. */ | |
| .mic-interim { | |
| margin-top: 4px; | |
| max-width: 460px; | |
| padding: 6px 14px; | |
| font-family: var(--sans); | |
| font-size: 14.5px; | |
| font-style: italic; | |
| color: var(--ink-2); | |
| line-height: 1.5; | |
| text-align: center; | |
| animation: pageRise 240ms var(--ease); | |
| } | |