/** * ReviCare Design System — Base CSS * * Component styles that can't be expressed in Tailwind utility classes. * Import BEFORE the compiled rc-tailwind.css: utilities must win equal-specificity * conflicts against rc-* component rules (e.g. .rc-sidebar{position:relative} vs * .fixed — the mobile off-canvas sidebar). Guarded by * agent/tests/test_stylesheet_cascade_order.py. * * Convention: all custom classes prefixed with `rc-` to avoid collisions. */ /* ── Foundations ── */ * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Base typeface for every rc-* page. Tailwind's `font-sans` utility ALSO maps to * Plus Jakarta Sans (tailwind.config.js theme.fontFamily.sans), but that depends * on the Tailwind Play CDN's runtime JIT having generated the utility before the * page paints. Setting the family directly on here makes Jakarta the base * font deterministically — independent of CDN timing — so headings/body never * fall back to the system stack (the "police dégueu" symptom on the onboarding * screens). Headings inherit it; a `font-mono` utility still overrides where set. */ body { font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; } /* ── Patient « Mon suivi » PROM curve tokens (INTENT-22 v2-B, #4122) ── * SVG stroke/fill cannot take Tailwind classes, so the curve colours live here as * CSS variables mapped to the rc-* palette (tailwind.config.js) — no raw hex in the * template (DESIGN_SYSTEM "no raw hex" mandate). The *-soft variants are the area * fills (8%-alpha in light, 12% in dark). Dark-mode variants are defined for when the * portal gains a .dark toggle * (tracked separately) — inert today (the portal shell is light-only). */ :root { /* Light-mode curve colours use the most-contrasty in-ramp variant so the thin SVG * lines + 11px bold value labels clear WCAG AA on white as closely as the palette * allows (ux #4155): teal-600 4.03:1, coral-600 4.46:1, amber-700 5.02:1 — vs the * mock's off-brand 500s (coral 3.17, amber 2.15) which failed badly. The -soft area * fills keep the lighter tint of the same hue (decorative, non-text → 3:1 N/A). */ --rc-curve-teal: #1A8F70; /* rc-teal-600 */ --rc-curve-coral: #d04a33; /* rc-coral-600 */ --rc-curve-amber: #b45309; /* amber-700 (rc-amber has no 600/700 token; AA-passing) */ --rc-curve-teal-soft: rgba(26, 143, 112, 0.08); --rc-curve-coral-soft: rgba(208, 74, 51, 0.08); --rc-curve-amber-soft: rgba(180, 83, 9, 0.08); --rc-curve-grid: #e2e8f0; /* slate-200 — gridlines */ } .dark { --rc-curve-teal: #34d399; /* rc-teal-400 — lifts for dark bg */ --rc-curve-coral: #ff8371; /* rc-coral-400 */ --rc-curve-amber: #fbbf24; /* rc-amber-400 */ --rc-curve-teal-soft: rgba(52, 211, 153, 0.12); --rc-curve-coral-soft: rgba(255, 131, 113, 0.12); --rc-curve-amber-soft: rgba(251, 191, 36, 0.12); --rc-curve-grid: #334155; /* rc-dark-border */ } /* Alpine x-cloak — hide elements gated by x-show until Alpine initialises, so * they don't flash visible on first paint. Defined globally here (loaded by * base.html) so every page + reusable macro (e.g. _macros/patient_picker.html) * gets it for free — previously each page redefined it inline (esign/sign.html, * consultation_replay.html), and pages that forgot it flickered. */ [x-cloak] { display: none !important; } /* Scrollbar */ ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; } .dark ::-webkit-scrollbar-thumb { background: #475569; } /* ── Sidebar ── */ .rc-sidebar { background: linear-gradient(175deg, #03314b 0%, #044a6e 50%, #048BA8 100%); position: relative; box-shadow: 4px 0 24px rgba(3, 49, 75, 0.25), 1px 0 0 rgba(255, 255, 255, 0.04) inset; z-index: 10; } /* Noise texture overlay */ .rc-sidebar::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E"); pointer-events: none; } /* Right edge glow line */ .rc-sidebar::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; background: linear-gradient( 180deg, rgba(154, 196, 248, 0.15) 0%, rgba(4, 139, 168, 0.1) 50%, rgba(34, 201, 147, 0.08) 100% ); pointer-events: none; } /* ── Sidebar repliable ────────────────────────────────────────────── * * L'état vit sur , écrit AVANT le * premier paint par le script de base.html (localStorage `rc-sidebar- * collapsed`) et basculé par `rcToggleSidebar()`. Pas d'Alpine : Alpine * est chargé en `defer`, un binding Alpine ferait clignoter la sidebar * dépliée à chaque navigation. * * Repliée on ne garde que les icônes → 72px (36px de logo + 2×18 de * marge). Les sélecteurs sont volontairement plus spécifiques que les * utilitaires Tailwind du markup (`w-[240px]`, `px-5`, `gap-3`…) : * rc-base.css est chargé AVANT rc-tailwind.css (cf. base.html), donc à * spécificité égale Tailwind gagnerait. `html.x .y` (0,2,0) > `.y` (0,1,0). * * Ne s'applique qu'en >=1024px : en dessous la sidebar est off-canvas * (hamburger topbar) et le bouton de repli est masqué (`hidden lg:flex`). */ .rc-sidebar { transition: width 0.18s ease; } @media (min-width: 1024px) { html.rc-sidebar-collapsed .rc-sidebar { width: 72px; } /* Header : le padding 20px ne laisse pas la place au logo de 36px dans 72px de large — on le resserre à 18px et on centre. */ html.rc-sidebar-collapsed .rc-sidebar-header { padding-left: 18px; padding-right: 18px; } /* Tout ce qui est purement textuel disparaît : libellés, badges de tier, titres de groupe, nom/rôle utilisateur, chevron du menu. */ html.rc-sidebar-collapsed .rc-sidebar-label { display: none; } /* Titre de groupe → filet de séparation, pour que « Quotidien / Préparation / Application » restent visuellement groupés sans texte. */ html.rc-sidebar-collapsed .rc-sidebar-group-title { font-size: 0; line-height: 0; padding: 0; margin: 12px 10px 8px; border-top: 1px solid rgba(255, 255, 255, 0.09); } html.rc-sidebar-collapsed .rc-sidebar-group-title:first-child { margin-top: 4px; border-top: 0; } /* Icônes centrées dans la colonne étroite. */ html.rc-sidebar-collapsed .rc-nav-item, html.rc-sidebar-collapsed .rc-sidebar-user button { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; } /* Le compteur de messages non lus ne doit PAS disparaître avec le texte (c'est de l'information, pas de la décoration) : il se réduit en pastille posée sur le coin de l'icône. */ html.rc-sidebar-collapsed .rc-nav-badge { position: absolute; top: 5px; right: 12px; min-width: 8px; width: 8px; height: 8px; padding: 0; font-size: 0; line-height: 0; } /* Le menu « Se déconnecter » est ancré sur left/right-4 : dans 72px il serait illisible. On le laisse déborder vers la droite. */ html.rc-sidebar-collapsed .rc-sidebar-user-menu { right: auto; min-width: 170px; } /* Chevron du bouton : « replier » (gauche) → « déplier » (droite). */ html.rc-sidebar-collapsed .rc-sidebar-toggle-chevron { transform: rotate(180deg); } } /* ── Navigation items ── */ .rc-nav-item { transition: all 0.15s ease; position: relative; } .rc-nav-item:hover { background: rgba(255, 255, 255, 0.05); } .rc-nav-item.active { background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.95); } .rc-nav-item.active::after { content: ''; position: absolute; right: -3px; top: 8px; bottom: 8px; width: 2px; background: rgba(255, 255, 255, 0.4); border-radius: 1px; } /* ── Badges ── */ .rc-badge { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.01em; padding: 2px 8px; border-radius: 8px; white-space: nowrap; } /* ── Status indicators ── */ .rc-status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } /* ── Progress bar ── */ .rc-progress-track { height: 4px; border-radius: 2px; overflow: hidden; } .rc-progress-fill { height: 100%; border-radius: 2px; transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1); } /* ── Interactive elements ── */ .rc-row-hover { transition: background 0.12s ease; } .rc-card-hover { transition: box-shadow 0.2s ease, transform 0.2s ease; } .rc-card-hover:hover { transform: translateY(-2px); } /* Focus ring — teal glow */ button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(26, 143, 112, 0.15); } /* All interactive elements get smooth transitions */ button, a, input, select { transition: all 0.15s ease; } /* ── Keyboard shortcuts ── */ kbd { font-family: 'JetBrains Mono', monospace; font-size: 0.56rem; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 4px; padding: 2px 6px; color: rgba(255, 255, 255, 0.35); } /* ── Buttons ── (used in dock_chat, assistant_test, future pages) */ .rc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 0.875rem; padding: 0.5rem 1rem; border-radius: 8px; border: 1px solid transparent; cursor: pointer; transition: all 0.15s ease; } .rc-btn:disabled { opacity: 0.5; cursor: not-allowed; } .rc-btn-primary { /* WCAG AA: white on #22c993 = 2.06:1 fails. Use teal-700 (#15735a) for ~5.5:1, hover lifts to teal-600 (#1a8f70) for visual feedback. The "rc-teal" brand signal stays #22c993 elsewhere (icons, accents). */ background: #15735a; color: #ffffff; border-color: #15735a; } .rc-btn-primary:hover:not(:disabled) { background: #1a8f70; border-color: #1a8f70; } .rc-btn-primary:active:not(:disabled) { transform: translateY(1px); } /* ── Meta text ── (timestamps, J-counts, status lines, captions) */ .rc-meta { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: rgb(100, 116, 139); /* slate-500 */ font-weight: 400; } /* Dark mode: fade for muted contrast */ .dark .rc-meta { color: rgb(148, 163, 184); /* slate-400 */ } /* ── T6 — preview pre-paint flicker prevention ── * The Preview card (T5) writes rc-preview-alpha / rc-preview-beta to * localStorage on every toggle. The inline