/* ==================== BenzoHelp App-Specific Styles ==================== */ /* Beer CSS handles: cards, buttons, forms, toggles/switches, navigation, */ /* grids, typography, badges, chips, tables, dialogs, toasts, tabs */ [hidden] { display: none !important; } /* ==================== Theme & Colors ==================== */ :root { /* Mood colors */ --mood-1: #c62828; --mood-2: #d84315; --mood-3: #ef6c00; --mood-4: #f9a825; --mood-5: #fdd835; --mood-6: #c0ca33; --mood-7: #7cb342; --mood-8: #43a047; --mood-9: #2e7d32; --mood-10: #1b5e20; /* Severity colors */ --sev-mild: #a5d6a7; --sev-moderate: #fff176; --sev-significant: #ffb74d; --sev-severe: #ef5350; /* App-specific — warm forest green theme matching landing page */ --primary: #2d6a4f; --primary-fg: #ffffff; --primary-light: #d8f3dc; --destructive: #c62828; --warning: #f57f17; --success: #2e7d32; --muted-fg: #5a7a6a; --text: #1b4332; --text-secondary: #52796f; --card: #ffffff; --card-fg: #1b4332; --bg: #f0f9f4; --border: #b7e4c7; --input: #b7e4c7; --accent: #d8f3dc; --accent-fg: #1b4332; --surface-variant: #eaf5ee; --shadow: 0 1px 3px rgba(0,50,30,0.06), 0 1px 2px rgba(0,50,30,0.04); --shadow-md: 0 4px 6px -1px rgba(0,50,30,0.08), 0 2px 4px -2px rgba(0,50,30,0.04); --shadow-lg: 0 10px 15px -3px rgba(0,50,30,0.1), 0 4px 6px -4px rgba(0,50,30,0.05); --radius: 0.75rem; --nav-height: 80px; --topbar-height: 64px; --wip-height: 56px; /* Aliases — historical naturals/landing CSS uses --fg / --surface; keep them in sync with the theme system so dark mode reads them correctly. */ --fg: var(--text); --surface: var(--card); --ff-display: 'Fraunces', Georgia, serif; --ff-body: system-ui, -apple-system, 'Segoe UI', sans-serif; } [data-theme="dark"] { --fg: var(--text); --surface: var(--card); } [data-theme="dark"] { --primary: #95d5b2; --primary-fg: #081c15; --primary-light: rgba(45,106,79,0.2); --destructive: #ef5350; --muted-fg: #7a947a; --text: #d8f3dc; --text-secondary: #95d5b2; --card: #1b2e1b; --card-fg: #d8f3dc; --bg: #0b1f0b; --border: rgba(45,106,79,0.3); --input: rgba(45,106,79,0.35); --accent: rgba(45,106,79,0.2); --accent-fg: #b7e4c7; --surface-variant: #1b2e1b; --shadow: 0 1px 3px rgba(0,0,0,0.3); --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.4); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.5); } /* Sync data-theme="dark" on to Beer CSS dark mode on */ html[data-theme="dark"] body { color-scheme: dark; } /* Lucide SVG icons — inherit currentColor + size from parent like Material Symbols did, so we don't have to revisit every existing icon styling. */ i[data-lucide], i[data-lucide] svg, .lucide { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; color: inherit; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* When Lucide replaces , it injects an as the only child. Keep the wrapper sized correctly. */ i[data-lucide] { line-height: 1; } /* Filled-star variant for the favorite button on breathing cards */ i[data-lucide][fill="currentColor"] svg, i[data-lucide][fill="currentColor"] { fill: currentColor; } /* ==================== Accessibility ==================== */ .skip-link { position: absolute; top: -100%; left: 16px; z-index: 9999; padding: 8px 16px; background: var(--primary); color: var(--primary-fg); border-radius: 0 0 8px 8px; font-size: 14px; text-decoration: none; } .skip-link:focus { top: 0; } *:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* Ensure sufficient contrast for dark theme muted text */ [data-theme="dark"] .small-text, [data-theme="dark"] .resource-desc { color: #9ab89a; } /* ==================== Layout & Body ==================== */ body { padding-top: var(--wip-height); padding-bottom: calc(var(--nav-height) + 16px + env(safe-area-inset-bottom)); background: var(--bg); color: var(--text); overflow-x: hidden; } /* Bottom nav stays pinned to the viewport bottom — Beer CSS sometimes ships this as sticky which fails inside scrolling containers. Force fixed + safe-area padding for iPhone home indicator. */ body.benzo-ready > nav.bottom { position: fixed !important; bottom: 0; left: 0; right: 0; z-index: 100; padding-bottom: env(safe-area-inset-bottom); height: calc(var(--nav-height) + env(safe-area-inset-bottom)); } /* Reserve space at the bottom when the cookie banner is visible so its fixed bar doesn't cover the landing CTAs or the bottom-nav on mobile. */ body.has-cookie-banner { padding-bottom: 140px; } @media (min-width: 768px) { body.has-cookie-banner { padding-bottom: 80px; } } /* ==================== Work-in-progress banner ==================== */ .wip-banner { position: fixed; top: 0; left: 0; right: 0; min-height: var(--wip-height); z-index: 200; display: flex; align-items: center; gap: 12px; padding: 10px 16px; /* Solid orange — explicit fallback colour first so the gradient can never reveal the page underneath if a renderer skips it. */ background-color: #c46514; background-image: linear-gradient(90deg, #b45309 0%, #d97706 100%); color: #fff7ed; font-size: 12.5px; line-height: 1.35; box-shadow: 0 2px 8px rgba(0,0,0,.22); /* Avoid blending with whatever sits behind in case CSS is overridden later */ isolation: isolate; backdrop-filter: none; } .wip-banner[hidden] { display: none; } /* Dark-mode tints for fixed banners and modal backdrop. The cookie banner uses inline styles, so dark overrides need !important to win specificity. */ [data-theme="dark"] .wip-banner { background-color: #3a2a14; background-image: linear-gradient(90deg, #4a3418 0%, #5a3f1c 100%); color: #f0d9b5; box-shadow: 0 2px 8px rgba(0,0,0,.45); } [data-theme="dark"] .wip-banner .wip-text strong { color: #ffe0b8; } [data-theme="dark"] .wip-banner .wip-cta { background: rgba(255,255,255,0.08); color: #ffe0b8; } [data-theme="dark"] .wip-banner .wip-close { background: rgba(255,255,255,0.06); color: #f0d9b5; } [data-theme="dark"] #cookie-banner { background: #1b2e1b !important; color: #d8f3dc !important; box-shadow: 0 -2px 12px rgba(0,0,0,.5) !important; } [data-theme="dark"] #cookie-refuse { color: #95d5b2 !important; border-color: #52b788 !important; } [data-theme="dark"] .bp-modal-backdrop { background: rgba(0, 0, 0, 0.75); } .wip-banner .wip-icon { font-size: 22px; flex-shrink: 0; } .wip-banner .wip-text { flex: 1; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .wip-banner .wip-text strong { color: #fff; font-weight: 700; } .wip-banner .wip-cta { flex-shrink: 0; background: #fff7ed; color: #7c2d12; border: none; border-radius: 9999px; padding: 7px 14px; font-size: 12px; font-weight: 700; cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform .12s, box-shadow .12s; } .wip-banner .wip-cta:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,.2); } .wip-banner .wip-close { flex-shrink: 0; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.15); color: #fff7ed; border: none; border-radius: 50%; font-size: 16px; line-height: 1; cursor: pointer; padding: 0; transition: background .15s; } .wip-banner .wip-close:hover { background: rgba(255,255,255,0.3); } .wip-banner .wip-close:focus-visible { outline: 2px solid #fff7ed; outline-offset: 2px; } /* Compact layout on small screens — banner grows with content, no overflow */ @media (max-width: 767px) { :root { --wip-height: 76px; } .wip-banner { padding: 10px 12px; gap: 8px; font-size: 11.5px; } .wip-banner .wip-icon { font-size: 18px; } .wip-banner .wip-cta { padding: 6px 10px; font-size: 11px; } .wip-banner .wip-close { width: 28px; height: 28px; font-size: 14px; } } /* Push everything fixed below the WIP banner */ body > header.fixed, body > header { top: var(--wip-height) !important; } .offline-bar { top: calc(var(--topbar-height) + var(--wip-height)) !important; } @media (max-width: 767px) { .mobile-forum-banner { top: calc(var(--topbar-height) + var(--wip-height)) !important; } } @media (min-width: 768px) { .desktop-nav { top: calc(var(--topbar-height) + var(--wip-height)) !important; /* Height is auto so the sidebar grows to fit its content and scrolls with the page rather than having an internal scrollbar. */ } } @media (min-width: 1200px) { .app-sidebar { padding-top: calc(var(--topbar-height) + var(--wip-height) + 16px) !important; max-height: calc(100vh - var(--wip-height)) !important; } } body.breathe-overlay-open { overflow: hidden; } /* Warm header matching landing page forest theme */ body.benzo-ready > header { background: linear-gradient(135deg, #1b4332 0%, #2d6a4f 100%) !important; color: #d8f3dc !important; } body.benzo-ready > header h6, body.benzo-ready > header span, body.benzo-ready > header i { color: #d8f3dc !important; } body.benzo-ready > header button:hover { background: rgba(255,255,255,0.1) !important; } /* Brand block — always visible on the left of the topbar, links back to the dashboard. Sits BEFORE the page-title H6 so users can always see what app they're in even when the title says "Aides naturelles" etc. */ .app-topbar-brand { display: inline-flex; align-items: center; gap: 8px; color: #d8f3dc; text-decoration: none; font-weight: 700; font-size: 14px; padding: 4px 10px 4px 6px; border-radius: 999px; background: rgba(255,255,255,0.08); transition: background .15s, transform .15s; flex-shrink: 0; } .app-topbar-brand:hover { background: rgba(255,255,255,0.16); transform: translateY(-1px); } .app-topbar-brand img { width: 24px; height: 24px; border-radius: 6px; display: block; } @media (max-width: 599px) { /* On tight screens, keep just the logo so the page title has room */ .app-topbar-brand span { display: none; } .app-topbar-brand { padding: 4px; } } /* Page title — slightly subdued so the brand still reads as primary, then truncates with ellipsis on narrow viewports. */ body.benzo-ready > header h6, .app-topbar-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.4; letter-spacing: 0.01em; font-weight: 500; opacity: 0.92; margin-left: 4px; } /* Empty H6 (dashboard) — no separator dot or visual artifact */ body.benzo-ready > header h6:empty { display: none; } /* User email pill — show local part only on tighter screens, full address in the title attribute (set in JS) for hover. Hide entirely on mobile to free header space for the action icons. */ .app-topbar-email { font-size: 12.5px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0.85; padding: 4px 10px; border-radius: 12px; background: rgba(255,255,255,0.08); } @media (max-width: 767px) { .app-topbar-email { display: none; } } /* Warm bottom nav */ body.benzo-ready > nav.bottom { background: #ffffff; border-top: 1px solid var(--border); } [data-theme="dark"] body.benzo-ready > nav.bottom { background: var(--card); border-top: 1px solid var(--border); } /* Cards should feel warm */ body.benzo-ready article.round { border: 1px solid var(--border); background: var(--card); } /* Welcome section gentle gradient */ #view-dashboard > h5 { background: linear-gradient(135deg, #d8f3dc 0%, #b7e4c7 100%); padding: 20px; border-radius: 16px; margin-bottom: 16px; color: #1b4332; font-weight: 400; } [data-theme="dark"] #view-dashboard > h5 { background: linear-gradient(135deg, rgba(45,106,79,0.3) 0%, rgba(45,106,79,0.15) 100%); color: var(--text); } /* Success text color utility (not in Beer CSS) */ .success-text { color: var(--success); } /* ==================== App Layout — 3-column desktop ==================== */ .app-layout { display: flex; max-width: 1440px; margin: 0 auto; } .app-layout > main { flex: 1; min-width: 0; min-height: calc(100vh - var(--topbar-height)); } /* Desktop left nav rail — hidden on mobile */ .desktop-nav { display: none; } @media (min-width: 768px) { .desktop-nav { display: flex; flex-direction: column; width: 220px; flex-shrink: 0; /* Sticky sidebar that scrolls with the page — no internal scrollbar. align-self: start prevents the flex parent from stretching it to full container height; the sidebar is only as tall as its content. */ position: sticky; top: var(--topbar-height); align-self: flex-start; height: auto; max-height: none; overflow: visible; padding: 16px 10px; margin: 12px 0 12px 12px; background: var(--card); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); z-index: 10; } .desktop-nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--radius); color: var(--text-secondary); text-decoration: none; font-size: 14px; font-weight: 500; transition: background 0.15s, color 0.15s; cursor: pointer; border: none; background: none; } .desktop-nav-item:hover { background: var(--accent); color: var(--text); } .desktop-nav-item.active { background: var(--primary-light); color: var(--primary); font-weight: 600; } .desktop-nav-item i { font-size: 20px; width: 24px; text-align: center; } .desktop-nav-spacer { flex: 1; } .desktop-nav-forum { background: linear-gradient(135deg, #1b4332, #2d6a4f) !important; color: #d8f3dc !important; margin: 8px 0 4px; padding: 12px 14px !important; border-radius: var(--radius); box-shadow: 0 2px 6px rgba(0,0,0,0.12); font-weight: 700 !important; position: relative; } .desktop-nav-forum::before { content: ""; position: absolute; top: -6px; left: 6px; right: 6px; height: 1px; background: var(--border); } .desktop-nav-forum:hover { background: linear-gradient(135deg, #2d6a4f, #40916c) !important; transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,0.18); } /* Hide bottom nav + remove body bottom padding */ nav.bottom { display: none !important; } body { padding-bottom: 16px; } /* Crisis FAB: reposition without bottom nav */ .crisis-fab { bottom: max(16px, env(safe-area-inset-bottom)) !important; } } /* ==================== Right sidebar — collapsible drawer ==================== */ /* Pulled out of the flex flow so it can slide in/out as an overlay drawer. A persistent "Urgences" tab on the right edge opens it. Closed by default. */ .app-sidebar { position: fixed; top: var(--topbar-height); right: 0; width: 320px; max-width: 92vw; height: calc(100vh - var(--topbar-height)); overflow-y: auto; background: var(--bg); border-left: 1px solid var(--border); box-shadow: -8px 0 24px rgba(16, 60, 40, 0.10); /* Top padding leaves room for the close button anchored at top:12 left:12 */ padding: 60px 16px 24px; z-index: 90; transform: translateX(100%); transition: transform .25s ease; } body.app-sidebar-open .app-sidebar { transform: translateX(0); } /* "Urgences" tab — always visible on the right edge while the sidebar is closed */ .app-sidebar-tab { position: fixed; top: calc(var(--topbar-height) + 80px); right: 0; margin: 0; width: 40px; min-height: 184px; padding: 12px 0; background: linear-gradient(180deg, #c62828 0%, #b71c1c 100%); color: #ffffff; border: none; border-radius: 12px 0 0 12px; box-shadow: -2px 4px 12px rgba(176, 0, 32, 0.32); cursor: pointer; z-index: 95; display: flex; flex-direction: column; align-items: center; gap: 8px; transition: transform .15s, background .15s, opacity .25s ease, visibility 0s linear .25s; } .app-sidebar-tab:hover { transform: translateX(-2px); } .app-sidebar-tab:focus-visible { outline: 2px solid #ffffff; outline-offset: -4px; } .app-sidebar-tab i { font-size: 22px; } .app-sidebar-tab-label { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } body.app-sidebar-open .app-sidebar-tab { opacity: 0; visibility: hidden; transition: opacity .15s ease, visibility 0s linear .15s; } /* Hide the tab on mobile — bottom nav and crisis FAB cover that need; the tab makes sense only when there's no bottom nav (>=768 px). */ @media (max-width: 767px) { .app-sidebar-tab { display: none; } } /* Backdrop dims the page when the drawer is open (desktop + mobile) */ .app-sidebar-backdrop { position: fixed; inset: 0; background: rgba(11, 51, 32, 0.45); backdrop-filter: blur(2px); z-index: 85; opacity: 0; transition: opacity .25s ease; pointer-events: none; } body.app-sidebar-open .app-sidebar-backdrop { opacity: 1; pointer-events: auto; } /* Close button inside the right sidebar — anchored to the LEFT edge so the chevron-right "pushes" the panel out to the right. Mirror of the left menu's chevron-left close in the top-right of its column. */ .app-sidebar-close { position: absolute; top: 12px; left: 12px; width: 36px; height: 36px; border-radius: 50%; border: none; background: rgba(45, 106, 79, 0.10); color: var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; z-index: 2; } .app-sidebar-close:hover { background: rgba(45, 106, 79, 0.18); } /* Desktop-nav collapse toggle — now an edge tab on the LEFT mirroring the right "Urgences" tab. Lives outside the topbar, never overlaps the title. */ .desktop-nav-toggle { display: none; margin: 0; padding: 0; border: none; background: transparent; cursor: pointer; } @media (min-width: 768px) { .desktop-nav-toggle { display: inline-flex; } } /* Shared edge-tab pattern — left and right vertical tabs on viewport edges */ .app-edge-tab { position: fixed; top: calc(var(--topbar-height) + 80px); width: 40px; min-height: 132px; padding: 12px 0; color: #ffffff; border: none; cursor: pointer; z-index: 95; display: flex; flex-direction: column; align-items: center; gap: 8px; transition: transform .15s, background .15s, opacity .25s ease, visibility 0s linear .25s; } .app-edge-tab i { font-size: 22px; } .app-edge-tab .app-edge-tab-label { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } /* Left tab — Menu toggle (forest green to match the topbar) */ .app-edge-tab--left { left: 0; border-radius: 0 12px 12px 0; background: linear-gradient(180deg, #1b4332 0%, #2d6a4f 100%); box-shadow: 2px 4px 12px rgba(11, 51, 32, 0.32); } .app-edge-tab--left:hover { transform: translateX(2px); } .app-edge-tab--left:focus-visible { outline: 2px solid #ffffff; outline-offset: -4px; } /* Mirror the right-sidebar pattern: - Menu OPEN (default) → hide the edge tab (the in-menu X close button takes over) - Menu COLLAPSED → show the edge tab so the user can re-open This avoids the tab sitting visually behind the menu column. */ body:not(.desktop-nav-collapsed) .app-edge-tab--left { opacity: 0; visibility: hidden; transition: opacity .15s ease, visibility 0s linear .15s; pointer-events: none; } /* When the desktop-nav is collapsed, hide it and reclaim the space */ body.desktop-nav-collapsed .desktop-nav { display: none; } /* In-menu close button — same shape & affordance as the right-sidebar X */ .desktop-nav-close { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border-radius: 50%; border: none; background: rgba(45, 106, 79, 0.10); color: var(--text); cursor: pointer; display: none; /* shown only on desktop where the nav is rendered */ align-items: center; justify-content: center; z-index: 2; } .desktop-nav-close:hover { background: rgba(45, 106, 79, 0.18); } .desktop-nav-close:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .desktop-nav-close i { font-size: 18px; } @media (min-width: 768px) { /* Reserve space at the top of the nav for the X button — sticky positioning still creates a containing block for absolute children, so the X stays anchored to the nav's top-right. */ .desktop-nav { padding-top: 44px !important; } .desktop-nav-close { display: inline-flex; } } /* Mobile forum banner */ .mobile-forum-banner { display: none; } @media (max-width: 767px) { .mobile-forum-banner { display: block; position: fixed; top: var(--topbar-height); left: 0; right: 0; z-index: 98; background: linear-gradient(135deg, #1b4332 0%, #2d6a4f 60%, #40916c 100%); box-shadow: 0 2px 6px rgba(0,0,0,.18); } .mobile-forum-banner a { display: flex; align-items: center; gap: 10px; padding: 8px 14px; color: #fff; text-decoration: none; font-size: 13px; font-weight: 600; min-height: 40px; } /* "Vous êtes dans l'app →" preamble is noisy on small screens — the pill on its own already conveys the action. Hide on viewports < 480px. */ .mobile-forum-banner .mfb-leading, .mobile-forum-banner .mfb-arrow { color: rgba(255,255,255,0.7); font-size: 12px; font-weight: 500; flex-shrink: 0; } @media (max-width: 479px) { .mobile-forum-banner .mfb-leading, .mobile-forum-banner .mfb-arrow { display: none; } .mobile-forum-banner .mfb-target { margin-left: 0; } } .mobile-forum-banner .mfb-target { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.18); padding: 5px 12px; border-radius: 9999px; font-weight: 700; margin-left: auto; white-space: nowrap; } .mobile-forum-banner .mfb-target i { font-size: 18px; } .mobile-forum-banner .mfb-ext { font-size: 14px; opacity: 0.8; } .mobile-forum-banner a:active .mfb-target { background: rgba(255,255,255,0.3); } } .sidebar-section { background: var(--card); border-radius: 16px; padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow); } .sidebar-title { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 14px; color: var(--primary); } .sidebar-title i { font-size: 18px; } .sidebar-posts { display: flex; flex-direction: column; gap: 8px; } .sidebar-post { padding: 10px 12px; background: var(--accent); border-radius: 12px; cursor: pointer; transition: background 0.15s; } .sidebar-post:hover { background: var(--primary-light); } .sidebar-post-text { font-size: 13px; color: var(--text); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sidebar-post-meta { font-size: 11px; color: var(--muted-fg); margin-top: 4px; display: flex; gap: 8px; } /* Sidebar crisis hotlines */ .sidebar-crisis { border-left: 3px solid var(--destructive); } .sidebar-hotline { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--accent); color: var(--text); text-decoration: none; margin-bottom: 6px; transition: background 0.15s; } .sidebar-hotline:hover { background: var(--primary-light); } .sidebar-hotline i { font-size: 20px; color: var(--destructive); } .sidebar-hotline strong { font-size: 13px; display: block; } .sidebar-hotline small { font-size: 11px; color: var(--muted-fg); display: block; } /* Sidebar external links */ .sidebar-link { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--accent); color: var(--text); text-decoration: none; margin-bottom: 6px; transition: background 0.15s; } .sidebar-link:hover { background: var(--primary-light); } .sidebar-link > i:first-child { font-size: 20px; color: var(--primary); flex-shrink: 0; } .sidebar-link > div { flex: 1; min-width: 0; } .sidebar-link strong { font-size: 13px; display: block; } .sidebar-link small { font-size: 11px; color: var(--muted-fg); display: block; } .sidebar-link-arrow { font-size: 14px !important; color: var(--muted-fg) !important; flex-shrink: 0; } /* ==================== Views (show/hide logic) ==================== */ .view { display: none; margin: 0 auto; padding: calc(var(--topbar-height) + 16px) 24px 16px; animation: fadeIn 0.15s ease; } .view.active { display: block; } /* Mobile: constrain width + account for forum banner. Narrow side padding to keep cards readable on 360 px screens. */ @media (max-width: 767px) { .view { max-width: 800px; padding-top: calc(var(--topbar-height) + 40px + 16px); padding-left: 12px; padding-right: 12px; } } @media (max-width: 480px) { body.benzo-ready article.round { padding: 14px; } } /* Desktop side-by-side layouts */ @media (min-width: 768px) { .desktop-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } .desktop-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; align-items: start; } .desktop-span-full { grid-column: 1 / -1; } } @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* ==================== Mood Scale ==================== */ .mood-scale { display: flex; gap: 4px; justify-content: space-between; margin: 12px 0; flex-wrap: nowrap; width: 100%; } .mood-btn { flex: 1 1 0; min-width: 0; height: 44px; padding: 0; border: 2px solid var(--border); border-radius: var(--radius); background: var(--bg); font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.15s; display: flex; align-items: center; justify-content: center; color: var(--text); } .mood-btn:hover { border-color: var(--primary); } .mood-btn.active { border-color: var(--primary); background: var(--primary); color: var(--primary-fg); } .mood-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted-fg); margin-top: -4px; } /* Window/Wave toggle */ .type-toggle { display: flex; gap: 0; margin: 12px 0; } .type-btn { flex: 1; padding: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text-secondary); font-size: 13px; font-weight: 500; font-family: inherit; cursor: pointer; transition: all 0.15s; } .type-btn:first-child { border-radius: var(--radius) 0 0 var(--radius); } .type-btn:last-child { border-radius: 0 var(--radius) var(--radius) 0; } .type-btn:not(:first-child) { border-left: none; } .type-btn.active { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); } /* ==================== Breathing Exercises (Mindful Breath style) ==================== */ /* Exercise selection grid */ .breathe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px; margin-top: 8px; } .breathe-card { position: relative; /* Reset Beer-CSS button defaults that break grid layout */ box-sizing: border-box; width: 100%; height: auto; margin: 0; background: var(--accent); border: 2px solid transparent; border-radius: 16px; padding: 18px 14px 14px; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; text-align: center; min-height: 168px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; } /* Favorite/pin star — sits in top-right corner, doesn't trigger card click */ .breathe-card-fav { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border: none; background: transparent; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--muted-fg); font-size: 18px; padding: 0; margin: 0; transition: background .15s, color .15s, transform .15s; } .breathe-card-fav:hover { background: rgba(0,0,0,0.06); transform: scale(1.1); } .breathe-card-fav.is-fav { color: #f59e0b; } [data-theme="dark"] .breathe-card-fav:hover { background: rgba(255,255,255,0.08); } .breathe-card.is-fav { border-color: #f59e0b66; background: linear-gradient(180deg, var(--accent) 0%, rgba(245, 158, 11, 0.06) 100%); } .breathe-card:hover, .breathe-card:focus-visible { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-md); } .breathe-card i { font-size: 28px; color: var(--primary); flex: 0 0 auto; } .breathe-card .breathe-card-name { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.25; word-break: break-word; } .breathe-card .breathe-card-timing { font-size: 11.5px; color: var(--muted-fg); font-weight: 500; line-height: 1.35; word-break: break-word; /* Cap descriptions at 4 lines so all cards keep an even rhythm */ display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } /* Fullscreen immersive overlay — Mindful-app style. Page is fully hidden; the entire viewport becomes a calm, gradient stage tinted by --breathe-color (set per exercise in JS). */ .breathe-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 24px; /* Layered radial gradient: warm bloom of the exercise color, fading to deep near-black at the edges. Slow-pulses to feel alive. */ background: radial-gradient(ellipse at center, var(--breathe-glow, #2d6a4f33) 0%, transparent 60%), radial-gradient(ellipse at 30% 20%, var(--breathe-glow-soft, #2d6a4f22) 0%, transparent 50%), radial-gradient(ellipse at 70% 80%, var(--breathe-glow-faint, #2d6a4f14) 0%, transparent 55%), linear-gradient(180deg, #0a1612 0%, #050b08 100%); animation: breatheBackdropIn 0.5s ease, breatheBackdropPulse 12s ease-in-out infinite; } .breathe-overlay[hidden] { display: none; } @keyframes breatheBackdropIn { from { opacity: 0; } to { opacity: 1; } } @keyframes breatheBackdropPulse { 0%, 100% { background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%; } 50% { background-size: 130% 130%, 110% 110%, 120% 120%, 100% 100%; } } .breathe-close { position: absolute; top: 18px; right: 18px; z-index: 10; background: rgba(255,255,255,0.08); border: none; border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: rgba(255,255,255,0.75); font-size: 22px; transition: background 0.15s, transform 0.15s, color 0.15s; } .breathe-close:hover { background: rgba(255,255,255,0.18); color: #fff; transform: scale(1.05); } .breathe-close:focus-visible { outline: 2px solid rgba(255,255,255,0.6); outline-offset: 3px; } /* Centered content stack — no card chrome, the gradient itself is the canvas */ .breathe-content { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; width: 100%; max-width: 520px; padding: 24px; animation: breatheDialogIn 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.05); } @keyframes breatheDialogIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .breathe-exercise-name { font-size: 20px; font-weight: 300; color: rgba(255,255,255,0.9); letter-spacing: 0.5px; text-align: center; } /* Countdown */ .breathe-countdown { display: flex; flex-direction: column; align-items: center; gap: 12px; } .breathe-countdown-num { font-size: 72px; font-weight: 200; color: #fff; animation: countPulse 1s ease-in-out; } .breathe-countdown-label { font-size: 16px; color: rgba(255,255,255,0.6); } @keyframes countPulse { 0% { transform: scale(0.5); opacity: 0; } 50% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } /* Main breathing circle — large for the immersive fullscreen */ .breathe-ring-wrap { position: relative; width: 280px; height: 280px; } @media (min-width: 480px) { .breathe-ring-wrap { width: 340px; height: 340px; } } @media (min-width: 768px) { .breathe-ring-wrap { width: 400px; height: 400px; } } .breathe-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .breathe-ring-bg { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 4; } .breathe-ring-progress { fill: none; stroke: rgba(255,255,255,0.5); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 565.48; stroke-dashoffset: 565.48; transition: stroke-dashoffset 0.1s linear; } .breathe-circle { position: absolute; inset: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; /* Long, eased transition — JS sets per-phase duration via inline style */ transition: transform 0.6s cubic-bezier(0.4, 0, 0.6, 1), box-shadow 0.6s ease, background 0.6s ease; background: radial-gradient(circle at 30% 30%, var(--breathe-color, #4ade80)44 0%, transparent 60%); will-change: transform; } .breathe-circle-inner { display: flex; flex-direction: column; align-items: center; gap: 4px; } .breathe-phase { font-size: 22px; font-weight: 300; color: #fff; letter-spacing: 1px; text-transform: uppercase; opacity: 0.95; } .breathe-timer { font-size: 40px; font-weight: 200; color: #fff; } .breathe-cycle-info { font-size: 14px; color: rgba(255,255,255,0.5); margin-top: 8px; } /* Completion */ .breathe-complete { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; animation: fadeInUp 0.6s ease; } .breathe-complete-icon { font-size: 64px; } .breathe-complete-title { font-size: 28px; font-weight: 300; color: #fff; } .breathe-complete-msg { font-size: 15px; color: rgba(255,255,255,0.7); line-height: 1.6; max-width: 280px; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Controls */ .breathe-controls { display: flex; gap: 14px; margin-top: 8px; padding-top: 4px; } .breathe-controls button { border-color: rgba(255,255,255,0.3) !important; color: #fff !important; padding: 12px 24px !important; font-weight: 600 !important; } .breathe-controls button:not(.border) { background: rgba(255,255,255,0.18) !important; } .breathe-controls button:not(.border):hover { background: rgba(255,255,255,0.28) !important; } /* Options row — duration + sound checkbox sit side by side under controls */ .breathe-options { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; margin-top: 8px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.08); width: 100%; max-width: 360px; } .breathe-duration { display: flex; align-items: center; gap: 10px; } .breathe-duration label { font-size: 13px; color: rgba(255,255,255,0.7); } .breathe-duration select { background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.18); padding: 6px 14px; border-radius: 20px; font-size: 13px; cursor: pointer; } .breathe-duration select:hover { background: rgba(255,255,255,0.14); } .breathe-sound-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,0.85); cursor: pointer; user-select: none; } .breathe-sound-toggle input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--breathe-color, #4ade80); cursor: pointer; } /* Legacy compat — old breathing circle selectors used by coping startBreathing */ .breathing-timer { display: none; } .breathing-circle { display: none; } /* ===== ZenBreath cross-promo card ===== */ .zenbreath-promo { display: flex; align-items: flex-start; gap: 14px; margin-top: 18px; padding: 16px 18px; border-radius: 14px; background: linear-gradient(135deg, rgba(74, 222, 128, 0.08) 0%, rgba(99, 102, 241, 0.08) 100%); border: 1px solid rgba(99, 102, 241, 0.18); text-decoration: none; color: var(--text); transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .zenbreath-promo:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(99, 102, 241, 0.18); border-color: rgba(99, 102, 241, 0.4); } .zenbreath-promo__icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); color: #fff; font-size: 24px; } .zenbreath-promo__body { flex: 1; min-width: 0; } .zenbreath-promo__title { font-size: 14px; color: var(--muted-fg); margin-bottom: 4px; } .zenbreath-promo__title strong { color: var(--text); font-size: 16px; font-weight: 700; } .zenbreath-promo__desc { margin: 0 0 10px 0; font-size: 13.5px; line-height: 1.45; color: var(--text-secondary, var(--text)); } .zenbreath-promo__meta { display: flex; flex-wrap: wrap; gap: 6px; } .zenbreath-promo__chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px 3px 8px; border-radius: 999px; background: rgba(99, 102, 241, 0.12); color: #4f46e5; font-size: 11.5px; font-weight: 600; } .zenbreath-promo__chip i { font-size: 14px; } .zenbreath-promo__arrow { flex: 0 0 auto; color: var(--muted-fg); font-size: 18px; align-self: center; } [data-theme="dark"] .zenbreath-promo { background: linear-gradient(135deg, rgba(74, 222, 128, 0.06) 0%, rgba(99, 102, 241, 0.10) 100%); border-color: rgba(139, 92, 246, 0.25); } [data-theme="dark"] .zenbreath-promo__chip { background: rgba(139, 92, 246, 0.18); color: #a5b4fc; } /* In-overlay completion link to ZenBreath */ .breathe-complete-zen { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 12px 18px; border-radius: 999px; background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.95); text-decoration: none; font-size: 13.5px; line-height: 1.35; border: 1px solid rgba(255,255,255,0.15); transition: background 0.15s, transform 0.15s; max-width: 360px; } .breathe-complete-zen:hover { background: rgba(255,255,255,0.18); transform: translateY(-1px); } .breathe-complete-zen i { font-size: 22px; opacity: 0.9; } .breathe-complete-zen strong { font-weight: 700; } /* ==================== Chart Container ==================== uPlot draws into a container we own — no fixed canvas size needed. Min-height keeps the layout stable while uPlot mounts. */ .chart-container { position: relative; min-height: 240px; margin: 12px 0; width: 100%; overflow: hidden; } .chart-container canvas { display: block; } /* uPlot legend — pull-quote-style row under the chart */ .chart-container .u-legend { margin-top: 8px; font-size: 12px; color: var(--muted-fg); } .chart-container .u-legend th { font-weight: 600; } [data-theme="dark"] .chart-container .u-axis, [data-theme="dark"] .chart-container .u-legend { color: var(--muted-fg); } /* ==================== CIWA Score Display ==================== */ .ciwa-score-display { text-align: center; padding: 24px; margin: 16px 0; } .ciwa-score-number { font-size: 48px; font-weight: 700; color: var(--primary); } .ciwa-severity { font-size: 18px; font-weight: 600; margin-top: 4px; } .ciwa-severity.mild { color: var(--success); } .ciwa-severity.moderate { color: var(--warning); } .ciwa-severity.significant { color: #e65100; } .ciwa-severity.severe { color: var(--destructive); } .ciwa-guidance { font-size: 14px; color: var(--text-secondary); margin-top: 8px; line-height: 1.5; } /* ==================== Equivalency Result ==================== */ .equiv-result { text-align: center; padding: 24px; background: var(--primary-light); border-radius: var(--radius); margin: 16px 0; } .equiv-result-dose { font-size: 36px; font-weight: 700; color: var(--primary); } .equiv-result-label { font-size: 13px; color: var(--text-secondary); margin-top: 4px; } /* ==================== Calendar Dots ==================== */ .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 12px 0; } .cal-header { font-size: 12px; font-weight: 700; text-align: center; color: var(--muted-fg); padding: 8px 4px; text-transform: uppercase; letter-spacing: 0.05em; } .cal-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 14px; border-radius: 12px; cursor: pointer; transition: background 0.15s, transform 0.1s, box-shadow 0.15s; position: relative; border: 1px solid var(--border); background: var(--card); } .cal-day:hover { background: var(--accent); transform: scale(1.05); box-shadow: var(--shadow-sm, 0 2px 6px rgba(0,0,0,0.08)); } .cal-day.today { font-weight: 800; border-color: var(--primary); color: var(--primary); } .cal-day.has-data::after { content: ''; position: absolute; bottom: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); } .cal-day.empty { pointer-events: none; } /* Empty Beer-CSS .badge spans render as a phantom dot — hide them when there's nothing to badge (e.g. dashboard taper badge with no plan). */ .badge:empty { display: none !important; } /* Calendar navigation */ .cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .cal-nav-title { font-size: 14px; font-weight: 600; } .cal-nav button { background: none; border: none; cursor: pointer; color: var(--primary); font-size: 20px; padding: 4px 8px; border-radius: 50%; transition: background 0.15s; font-family: inherit; } .cal-nav button:hover { background: var(--accent); } /* Mood-colored dot override */ .cal-day.mood-1::after { background: var(--mood-1); } .cal-day.mood-2::after { background: var(--mood-2); } .cal-day.mood-3::after { background: var(--mood-3); } .cal-day.mood-4::after { background: var(--mood-4); } .cal-day.mood-5::after { background: var(--mood-5); } .cal-day.mood-6::after { background: var(--mood-6); } .cal-day.mood-7::after { background: var(--mood-7); } .cal-day.mood-8::after { background: var(--mood-8); } .cal-day.mood-9::after { background: var(--mood-9); } .cal-day.mood-10::after { background: var(--mood-10); } /* Mood calendar tooltip */ .cal-tooltip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; font-size: 11px; font-weight: 600; white-space: nowrap; z-index: 10; box-shadow: var(--shadow-md); pointer-events: none; } /* ==================== Form fields — label-above pattern ==================== Beer-CSS' floating-label inside .field.round.border falls back to a label-below layout in our context, which is hard to scan. Stack the label visually above the control with a comfortable gap and bottom margin between consecutive fields. */ .field.round.border { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; padding: 0; background: transparent; border: none; } .field.round.border > label { order: -1; position: static; inset: auto; transform: none; font-size: 13px; font-weight: 600; color: var(--muted-fg); padding: 0 4px; line-height: 1.3; text-align: left; align-self: flex-start; } .field.round.border > input, .field.round.border > select, .field.round.border > textarea { width: 100%; box-sizing: border-box; padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); color: var(--text); font-size: 15px; transition: border-color .15s, box-shadow .15s; margin: 0; } .field.round.border > input:focus, .field.round.border > select:focus, .field.round.border > textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.15); } .field.round.border > textarea { min-height: 96px; resize: vertical; } [data-theme="dark"] .field.round.border > input, [data-theme="dark"] .field.round.border > select, [data-theme="dark"] .field.round.border > textarea { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); } /* Group of two fields side-by-side using Beer's .grid > .s6 — make sure the wrapping fields keep the same bottom margin. */ .grid .field.round.border { margin-bottom: 16px; } /* ==================== Symptom Items ==================== */ .symptom-item { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(160px, 2fr) auto; align-items: center; gap: 16px; padding: 14px 4px; border-bottom: 1px solid var(--border); } .symptom-item:last-child { border-bottom: none; } .symptom-name { font-size: 14px; line-height: 1.3; color: var(--text); } .symptom-slider { width: 100%; min-width: 0; } /* Override Beer-CSS .badge absolute positioning so the value chip sits inline with the slider — locked at the end of the row. */ .symptom-value.badge { position: static; inset: auto; min-width: 36px; height: 30px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; border-radius: 15px; padding: 0 10px; color: var(--text); } /* Mobile: stack name on top, slider + value chip on the row below */ @media (max-width: 599px) { .symptom-item { grid-template-columns: 1fr auto; grid-template-areas: "name name" "slider value"; gap: 8px 12px; padding: 14px 2px; } .symptom-name { grid-area: name; font-weight: 600; } .symptom-slider { grid-area: slider; } .symptom-value.badge { grid-area: value; } } /* Range slider (used in symptom/CIWA scales) */ .range-slider { width: 100%; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 3px; background: var(--border); outline: none; } .range-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--primary); cursor: pointer; border: 2px solid var(--primary-fg); box-shadow: var(--shadow); } .range-slider::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--primary); cursor: pointer; border: 2px solid var(--primary-fg); } .range-value { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 28px; background: var(--primary); color: var(--primary-fg); border-radius: 14px; font-size: 13px; font-weight: 600; } /* ==================== Taper Step Rows ==================== */ tr.step-done { opacity: 0.6; } tr.step-done td:first-child { text-decoration: line-through; } tr.step-current { background: var(--primary-light); font-weight: 600; } /* ==================== Crisis Call Button ==================== */ .crisis-call-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 56px; background: var(--destructive); color: #fff; border: none; border-radius: var(--radius); font-size: 18px; font-weight: 700; font-family: inherit; cursor: pointer; box-shadow: var(--shadow-md); margin-bottom: 16px; transition: opacity 0.15s; text-decoration: none; } .crisis-call-btn:hover { opacity: 0.9; } /* ==================== Crisis FAB ==================== */ .crisis-fab { position: fixed !important; bottom: calc(var(--nav-height) + 16px + env(safe-area-inset-bottom)); right: 16px; z-index: 99; box-shadow: 0 4px 14px rgba(176, 0, 32, 0.35); } .crisis-fab:hover { transform: scale(1.05); } /* Hide the FAB when the crisis view is active — redundant with the view itself */ body:has(#view-crisis.active) .crisis-fab { display: none; } /* Smaller FAB on phones so it doesn't overlap content-right chips / sliders */ @media (max-width: 767px) { .crisis-fab { width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; } .crisis-fab i { font-size: 22px; } } /* ==================== Resource Cards (JS-created) ==================== */ .resource-card { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 8px; transition: box-shadow 0.15s; } .resource-card:hover { box-shadow: var(--shadow-md); } .resource-info { flex: 1; } .resource-name { font-size: 14px; font-weight: 600; } .resource-desc { font-size: 12px; color: var(--text-secondary); } .resource-phone { font-size: 13px; color: var(--primary); font-weight: 600; } .resource-action { flex-shrink: 0; } .resource-action a, .resource-action button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 6px 12px; border-radius: calc(var(--radius) - 2px); background: var(--primary); color: var(--primary-fg); text-decoration: none; font-size: 12px; font-weight: 600; font-family: inherit; border: none; cursor: pointer; } /* ==================== Diary Entries (JS-created) ==================== */ .diary-entry { padding: 12px 16px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.15s; } .diary-entry:hover { background: var(--accent); } .diary-entry-title { font-size: 14px; font-weight: 600; } .diary-entry-preview { font-size: 13px; color: var(--text-secondary); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .diary-entry-meta { font-size: 11px; color: var(--muted-fg); margin-top: 4px; display: flex; gap: 8px; } /* ==================== Offline Bar ==================== */ .offline-bar { position: fixed; top: var(--topbar-height); left: 0; right: 0; background: var(--warning); color: #000; text-align: center; padding: 4px; font-size: 12px; font-weight: 600; z-index: 99; display: none; } .offline-bar.show { display: block; } /* ==================== Disclaimer Banner ==================== */ .disclaimer-banner { background: var(--card); color: var(--text-secondary); border-bottom: 1px solid var(--border); border-left: 3px solid var(--primary); padding: 10px 16px; font-size: 12.5px; line-height: 1.5; display: flex; align-items: center; gap: 12px; max-width: 900px; margin: 0 auto; } .disclaimer-banner i { font-size: 18px; color: var(--primary); flex-shrink: 0; } .disclaimer-banner span { flex: 1; } .disclaimer-banner button { flex-shrink: 0; background: transparent; color: var(--primary); border: 1px solid var(--primary); border-radius: 999px; padding: 5px 14px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; } .disclaimer-banner button:hover { background: var(--primary); color: var(--primary-fg); } @media (max-width: 600px) { .disclaimer-banner { flex-wrap: wrap; text-align: left; } .disclaimer-banner span { min-width: 100%; } .disclaimer-banner button { margin-left: auto; } } /* ==================== Toast (JS shows/hides) ==================== */ .toast { position: fixed; top: calc(var(--topbar-height) + 8px); right: 16px; left: 16px; max-width: 400px; margin: 0 auto; background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 20px; font-size: 14px; font-weight: 500; box-shadow: var(--shadow-lg); z-index: 1000; opacity: 0; transform: translateY(-8px); transition: transform 0.2s ease, opacity 0.2s ease; pointer-events: none; text-align: center; } .toast.show { transform: translateY(0); opacity: 1; } .toast.toast-success { border-left: 4px solid var(--success); } .toast.toast-error { border-left: 4px solid var(--destructive); } .toast.toast-warning { border-left: 4px solid var(--warning); } /* ==================== Quick Action Cards ==================== */ .quick-action { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 18px 14px; min-height: 96px; cursor: pointer; text-align: center; transition: transform .15s ease, box-shadow .15s ease; } .quick-action:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .quick-action i { font-size: 32px; color: var(--primary); } .quick-action span { font-size: 14px; font-weight: 600; line-height: 1.25; } /* ==================== Coping Strategy Cards (JS-created) ==================== */ .strategy-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: box-shadow 0.15s; margin-bottom: 8px; } .strategy-card:hover { box-shadow: var(--shadow-md); } .strategy-header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; } .strategy-header i { font-size: 22px; color: var(--primary); } .strategy-header h3 { flex: 1; font-size: 14px; font-weight: 600; } .strategy-header .chevron { font-size: 20px; color: var(--muted-fg); transition: transform 0.2s; } .strategy-card.open .chevron { transform: rotate(180deg); } .strategy-body { display: none; padding: 0 16px 14px; font-size: 13px; color: var(--text-secondary); line-height: 1.6; } .strategy-card.open .strategy-body { display: block; } .strategy-body p { margin-bottom: 8px; } .strategy-body strong { color: var(--text); } /* ==================== Natural Aids ==================== */ .naturals-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; padding: 10px 12px; background: var(--surface-variant); border: 1px solid var(--border); border-radius: var(--radius); font-size: 12px; } .nat-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 9999px; font-size: 11px; font-weight: 600; white-space: nowrap; } .nat-badge i { font-size: 14px !important; color: inherit !important; } .nat-safe { background: rgba(46, 160, 67, 0.15); color: #1e7a35; } .nat-caution { background: rgba(220, 150, 30, 0.18); color: #8a5a00; } .nat-avoid { background: rgba(220, 60, 60, 0.15); color: #a02020; } body.dark .nat-safe { background: rgba(82, 183, 136, 0.22); color: #7fd4a5; } body.dark .nat-caution { background: rgba(255, 183, 77, 0.2); color: #ffc97a; } body.dark .nat-avoid { background: rgba(255, 110, 110, 0.2); color: #ff9b9b; } .natural-card .strategy-header { gap: 8px; } .natural-card .strategy-header h3 { font-size: 14px; line-height: 1.3; } .nat-latin { display: block; font-size: 11px; font-weight: 400; font-style: italic; color: var(--muted-fg); margin-top: 2px; } .nat-helps { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; } .nat-help-chip { display: inline-block; padding: 3px 10px; background: var(--surface-variant); border: 1px solid var(--border); border-radius: 9999px; font-size: 11px; color: var(--text); } .natural-card.nat-avoid { border-left: 3px solid #d04444; } .natural-card.nat-caution { border-left: 3px solid #d69020; } .natural-card.nat-safe { border-left: 3px solid #2ea043; } /* Expandable category sections in naturals view */ .nat-category { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; overflow: hidden; } .nat-category-summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; user-select: none; list-style: none; background: linear-gradient(to right, var(--surface-variant), transparent 70%); transition: background .15s; } .nat-category-summary::-webkit-details-marker { display: none; } .nat-category-summary:hover { background: var(--surface-variant); } .nat-category-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 9px; background: rgba(46, 160, 67, 0.12); color: var(--primary, #00695C); flex-shrink: 0; } .nat-category-icon i { font-size: 20px; } .nat-category-label { flex: 1; font-size: 15px; font-weight: 700; color: var(--text); } .nat-category-count { background: var(--surface-variant); color: var(--muted-fg); padding: 2px 10px; border-radius: 9999px; font-size: 12px; font-weight: 600; } .nat-category-chevron { font-size: 22px; color: var(--muted-fg); transition: transform .2s; } .nat-category[open] .nat-category-chevron { transform: rotate(180deg); } .nat-category-body { padding: 8px 12px 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; } .nat-category-body .natural-card { margin-bottom: 0; } /* Crisis resources — grouped by country, same visual style as nat-category */ .crisis-country { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; overflow: hidden; } .crisis-country-summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; user-select: none; list-style: none; background: linear-gradient(to right, var(--surface-variant), transparent 70%); } .crisis-country-summary::-webkit-details-marker { display: none; } .crisis-country-summary strong { flex: 1; font-size: 15px; color: var(--text); } .crisis-country-count { background: var(--surface-variant); color: var(--muted-fg); padding: 2px 10px; border-radius: 9999px; font-size: 12px; font-weight: 600; } .crisis-country[open] .nat-category-chevron { transform: rotate(180deg); } .crisis-country-body { border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; } .crisis-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface-variant); border-radius: 10px; } .crisis-item-cat { width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .crisis-item-main { flex: 1; min-width: 0; } .crisis-item-name { font-size: 14px; font-weight: 600; color: var(--text); } .crisis-item-desc { font-size: 12px; color: var(--muted-fg); line-height: 1.4; margin-top: 2px; } .crisis-item-phone { flex-shrink: 0; background: var(--primary, #00695C); color: #fff; padding: 6px 12px; border-radius: 9999px; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; } .crisis-item-phone:hover { filter: brightness(1.1); } /* Custom SVG icons — replace Unicode emojis throughout the app */ .i-icn { display: inline-flex; align-items: center; justify-content: center; vertical-align: -3px; line-height: 0; } .i-icn svg, .icn { vertical-align: middle; } .i-icn svg { display: block; } /* Time-of-day chip icon tint */ .med-tod-chip .i-icn svg { stroke: currentColor; } /* Naturals — search bar */ .naturals-search-wrap { position: relative; margin-bottom: 12px; } .naturals-search-wrap input[type="search"] { width: 100%; box-sizing: border-box; padding: 11px 40px 11px 40px; font: inherit; font-size: 14px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; outline: none; transition: border-color .12s, box-shadow .12s; } .naturals-search-wrap input[type="search"]:focus { border-color: var(--primary, #00695C); box-shadow: 0 0 0 3px rgba(0,105,92,0.12); } .naturals-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted-fg); font-size: 20px; pointer-events: none; } .naturals-search-clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: var(--muted-fg); cursor: pointer; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0; } .naturals-search-clear:hover { background: var(--surface-variant); } .nat-search-section { margin-bottom: 16px; } .nat-search-section h4 { margin: 8px 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted-fg); } /* Naturals — recipe card */ .nat-recipe { border-left: 3px solid var(--primary, #00695C); background: linear-gradient(to right, rgba(0,105,92,0.04), transparent 40%); } .nat-recipe__emoji { font-size: 22px; margin-right: 8px; } .nat-recipe-section { margin-top: 10px; padding: 8px 12px; background: var(--surface-variant); border-radius: 8px; } .nat-recipe-section__title { font-size: 12px; font-weight: 700; color: var(--muted-fg); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px; } .nat-recipe-section p { margin: 0; font-size: 13.5px; line-height: 1.55; } .nat-recipe-ingredients { list-style: none; padding: 0; margin: 0; } .nat-recipe-ingredient { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13px; border-bottom: 1px dashed var(--border); flex-wrap: wrap; } .nat-recipe-ingredient:last-child { border-bottom: none; } .nat-recipe-ingredient strong { color: var(--text); } .nat-recipe-ingredient em { color: var(--muted-fg); font-size: 12px; } .nat-recipe-ingredient__part { color: var(--muted-fg); font-size: 12.5px; } .nat-recipe-ingredient__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .nat-recipe-ingredient__dot.nat-safe { background: #2ea043; } .nat-recipe-ingredient__dot.nat-caution { background: #d69020; } .nat-recipe-ingredient__dot.nat-avoid { background: #d04444; } /* Recipes card — subtle warm gradient on top of the amber accent border */ .nat-hub-card--recipes { background: linear-gradient(135deg, var(--card) 0%, color-mix(in srgb, var(--nat-color) 6%, var(--card)) 100%); } .nat-warnings { background: rgba(220, 150, 30, 0.08); border-left: 3px solid #d69020; border-radius: 6px; padding: 8px 12px; margin-top: 10px; font-size: 12.5px; color: #7c4a00; } body.dark .nat-warnings { color: #ffc97a; background: rgba(255, 183, 77, 0.08); } .nat-warnings p { margin: 2px 0; line-height: 1.4; } .nat-sources { margin-top: 12px; padding: 8px 12px; background: var(--surface-variant); border-radius: 6px; font-size: 12px; } .nat-sources summary { cursor: pointer; font-weight: 600; color: var(--primary, #00695C); list-style: none; padding: 2px 0; } .nat-sources summary::-webkit-details-marker { display: none; } .nat-sources[open] summary { margin-bottom: 8px; } .nat-sources ul { margin: 0; padding-left: 18px; } .nat-sources li { margin-bottom: 4px; line-height: 1.45; color: var(--muted-fg); } .nat-sources a { color: var(--primary, #00695C); text-decoration: none; word-break: break-word; } .nat-sources a:hover { text-decoration: underline; } /* ==================== Chip Group (JS-created chips) ==================== */ .chip-group { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .chip { display: inline-flex; align-items: center; gap: 4px; padding: 6px 14px; border: 1px solid var(--border); border-radius: 9999px; background: var(--bg); color: var(--text-secondary); font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.15s; } .chip:hover { border-color: var(--primary); color: var(--primary); } .chip.active { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); } .chip i { font-size: 16px; } /* ==================== Empty State ==================== */ .empty-state { text-align: center; padding: 56px 24px 40px; color: var(--muted-fg); display: flex; flex-direction: column; align-items: center; gap: 14px; } .empty-state i { font-size: 56px; line-height: 1; opacity: 0.45; color: var(--primary); width: 88px; height: 88px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent); margin-bottom: 4px; } .empty-state p { font-size: 15px; margin: 0; max-width: 320px; line-height: 1.45; } /* ==================== Sub-nav Tabs ==================== */ .sub-nav { display: flex; gap: 0; margin-bottom: 16px; border-bottom: 2px solid var(--border); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; } .sub-nav::-webkit-scrollbar { display: none; } .sub-nav-item { padding: 10px 16px; border: none; background: none; color: var(--text-secondary); font-size: 14px; font-weight: 500; font-family: inherit; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color 0.15s, border-color 0.15s; white-space: nowrap; flex-shrink: 0; } .sub-nav-item:hover { color: var(--text); } .sub-nav-item.active { color: var(--primary); border-bottom-color: var(--primary); } /* ==================== JS-created Toggle Switch ==================== */ /* Used by JS when creating toggles dynamically (e.g., taper table, profile wizard) */ .toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; } .toggle input { opacity: 0; width: 0; height: 0; position: absolute; } .toggle-track { position: absolute; inset: 0; background: var(--border); border-radius: 12px; cursor: pointer; transition: background 0.2s; } .toggle-track::before { content: ''; position: absolute; width: 20px; height: 20px; left: 2px; bottom: 2px; background: var(--bg); border-radius: 50%; transition: transform 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,0.1); } .toggle input:checked + .toggle-track { background: var(--primary); } .toggle input:checked + .toggle-track::before { transform: translateX(20px); background: #fff; } /* ==================== JS-created Badges ==================== */ .badge-success { background: #c8e6c9; color: #2e7d32; } .badge-warning { background: #fff9c4; color: #f57f17; } .badge-danger { background: #ffcdd2; color: #c62828; } .badge-info { background: var(--primary-light); color: var(--primary); } [data-theme="dark"] .badge-success { background: rgba(46,125,50,0.2); } [data-theme="dark"] .badge-warning { background: rgba(245,127,23,0.2); } [data-theme="dark"] .badge-danger { background: rgba(198,40,40,0.2); } /* ==================== JS-created Setting Rows ==================== */ .setting-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--border); } .setting-row:last-child { border-bottom: none; } .setting-label { font-size: 14px; font-weight: 500; } .setting-desc { font-size: 12px; color: var(--text-secondary); margin-top: 2px; } /* ==================== JS-created Medication Items ==================== */ .med-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); } .med-check { width: 24px; height: 24px; border: 2px solid var(--border); border-radius: 50%; cursor: pointer; transition: all 0.15s; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .med-check.checked { background: var(--success); border-color: var(--success); color: #fff; } .med-info { flex: 1; } .med-name { font-size: 14px; font-weight: 600; } .med-dose { font-size: 12px; color: var(--text-secondary); } /* ==================== JS-created Buttons (kept for dynamic elements) ==================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 16px; height: 36px; border: 1px solid var(--input); border-radius: calc(var(--radius) - 2px); background: var(--bg); color: var(--text); font-size: 14px; font-weight: 500; font-family: inherit; cursor: pointer; transition: background 0.15s, border-color 0.15s; white-space: nowrap; outline: none; } .btn:hover { background: var(--accent); color: var(--accent-fg); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); } .btn-primary:hover { opacity: 0.9; background: var(--primary); color: var(--primary-fg); } .btn-danger { background: var(--destructive); color: #fff; border-color: var(--destructive); } .btn-danger:hover { opacity: 0.9; } .btn-sm { height: 28px; padding: 0 10px; font-size: 12px; } .btn-block { width: 100%; } .btn-icon { padding: 0; width: 40px; height: 40px; border: none; background: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text); transition: background 0.15s; } .btn-icon:hover { background: var(--accent); } /* ==================== JS-created Confirm Dialog ==================== */ .confirm-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; display: flex; align-items: center; justify-content: center; } .confirm-dialog { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; max-width: 360px; width: 90%; box-shadow: var(--shadow-lg); } .confirm-dialog h3 { font-size: 16px; font-weight: 600; margin-bottom: 8px; } .confirm-dialog p { font-size: 14px; color: var(--text-secondary); margin-bottom: 16px; } .confirm-actions { display: flex; gap: 8px; justify-content: flex-end; } /* ==================== JS-created Form Elements ==================== */ .form-group { margin-bottom: 16px; } .form-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; } .form-input, .form-select, .form-textarea { display: block; width: 100%; padding: 8px 12px; border: 1px solid var(--input); border-radius: calc(var(--radius) - 2px); background: var(--bg); color: var(--text); font-size: 14px; font-family: inherit; outline: none; transition: border-color 0.15s; } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,105,92,0.1); } .form-textarea { resize: vertical; min-height: 80px; line-height: 1.5; } .form-select { cursor: pointer; appearance: auto; } .form-hint { font-size: 12px; color: var(--muted-fg); margin-top: 4px; } /* ==================== Table Overflow Wrapper ==================== */ .table-wrap { overflow-x: auto; margin: 12px 0; } /* ==================== Responsive ==================== */ @media (max-width: 480px) { .view { padding: calc(var(--topbar-height) + 12px) 12px 12px; } .mood-scale { gap: 2px; } .mood-btn { height: 38px; font-size: 12px; border-width: 1px; } } @media (max-width: 380px) { /* very small screens: 2 rows of 5 keeps tap targets usable */ .mood-scale { flex-wrap: wrap; gap: 4px; } .mood-btn { flex: 1 1 calc(20% - 4px); height: 42px; font-size: 14px; } } /* ==================== Community Feed ==================== */ .post-avatar { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--primary-light); color: var(--primary); font-size: 22px; flex-shrink: 0; } .community-reactions .chip { min-height: 32px; font-size: 13px; } .community-reactions .chip:not(.border) { background: var(--primary-light); border-color: var(--primary); color: var(--primary); } /* Community filter bar */ .community-filter-bar { display: flex; gap: 8px; margin-bottom: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; } .community-filter-bar::-webkit-scrollbar { display: none; } .community-filter-bar .chip { white-space: nowrap; font-size: 13px; gap: 4px; } .community-filter-bar .chip:not(.border) { background: var(--primary-light); border-color: var(--primary); color: var(--primary); } /* Comment threading */ .comment-reply { margin-left: 32px; padding-left: 12px; border-left: 2px solid var(--border); } .comment-reply-btn { background: none; border: none; color: var(--muted-fg); font-size: 12px; cursor: pointer; padding: 4px 0 0; text-decoration: underline; } .comment-reply-btn:hover { color: var(--primary); } .comment-quote { font-size: 12px; color: var(--muted-fg); border-left: 3px solid var(--border); padding: 2px 8px; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .comment-reply-input { margin: 8px 0 8px 32px; padding-left: 12px; border-left: 2px solid var(--primary); } .comment-reply-input .comment-quote { margin-bottom: 6px; } /* Delete account dialog */ .delete-account-dialog::backdrop { background: rgba(0, 0, 0, 0.5); } .delete-account-dialog .error { background: var(--destructive); color: #fff; } .delete-account-dialog .error:disabled { opacity: 0.4; cursor: not-allowed; } /* ==================== Calendar view ==================== */ .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .cal-day-header { text-align: center; font-size: 11px; font-weight: 600; color: var(--muted-fg); padding: 6px 0; text-transform: uppercase; letter-spacing: .5px; } .cal-day { aspect-ratio: 1; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); position: relative; cursor: pointer; font-family: inherit; padding: 4px; transition: transform .12s, border-color .12s; color: var(--text); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; } .cal-day:hover { transform: scale(1.05); border-color: var(--primary, #00695C); z-index: 2; } .cal-day--empty { visibility: hidden; } .cal-day--today { outline: 2px solid var(--primary, #00695C); outline-offset: -2px; } .cal-day-num { font-size: 13px; font-weight: 600; align-self: flex-start; } .cal-day-marks { font-size: 10px; display: flex; align-items: center; gap: 2px; flex-wrap: wrap; line-height: 1; } .cal-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary, #00695C); display: inline-block; } .cal-benzo-dot { width: 6px; height: 6px; border-radius: 50%; background: #b45309; display: inline-block; } .cal-day--mood-1 { background: rgba(220, 38, 38, 0.35); } .cal-day--mood-2 { background: rgba(220, 38, 38, 0.28); } .cal-day--mood-3 { background: rgba(234, 88, 12, 0.28); } .cal-day--mood-4 { background: rgba(234, 88, 12, 0.2); } .cal-day--mood-5 { background: rgba(234, 179, 8, 0.22); } .cal-day--mood-6 { background: rgba(234, 179, 8, 0.16); } .cal-day--mood-7 { background: rgba(132, 204, 22, 0.2); } .cal-day--mood-8 { background: rgba(132, 204, 22, 0.3); } .cal-day--mood-9 { background: rgba(34, 197, 94, 0.3); } .cal-day--mood-10 { background: rgba(34, 197, 94, 0.4); } .cal-dialog-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 500; display: flex; align-items: center; justify-content: center; padding: 16px; backdrop-filter: blur(2px); } .cal-dialog { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; max-width: 520px; width: 100%; max-height: 85vh; overflow-y: auto; padding: 18px 20px; box-shadow: 0 8px 32px rgba(0,0,0,0.25); } .cal-dialog-mood { background: var(--surface-variant); padding: 8px 12px; border-radius: 8px; margin-bottom: 8px; font-size: 14px; } .cal-flag { display: inline-block; padding: 4px 10px; background: var(--surface-variant); border-radius: 9999px; font-size: 12.5px; margin: 4px 4px 0 0; } .cal-dialog-entry { margin-bottom: 10px; padding: 10px 12px; background: var(--surface-variant); border-radius: 8px; } .cal-dialog-entry strong { display: block; margin-bottom: 4px; color: var(--primary, #00695C); } .cal-dialog-entry p { margin: 0; font-size: 13px; line-height: 1.5; } /* ==================== Sobriety (% no streaks) ==================== */ .sobriety-group { margin-bottom: 14px; } .sobriety-group:last-child { margin-bottom: 0; } .sobriety-group h4 { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--muted-fg); text-transform: uppercase; letter-spacing: .4px; } .sobriety-row { display: grid; grid-template-columns: 70px 56px 48px 1fr; gap: 8px; align-items: center; padding: 6px 0; font-size: 13px; } .sobriety-label { color: var(--text); font-weight: 600; } .sobriety-frac { color: var(--muted-fg); font-size: 12px; } .sobriety-pct { color: var(--primary, #00695C); font-weight: 700; text-align: right; } .sobriety-bar { height: 6px; background: var(--surface-variant); border-radius: 9999px; overflow: hidden; position: relative; } .sobriety-bar-fill { display: block; height: 100%; background: linear-gradient(90deg, #52b788, #2ea043); border-radius: inherit; transition: width .4s ease; } @media (max-width: 480px) { .sobriety-row { grid-template-columns: 60px 46px 40px 1fr; font-size: 12px; } } /* ==================== Journal — photo thumbnail ==================== */ .diary-entry-thumb { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); flex-shrink: 0; background: var(--surface-variant); } /* ==================== Journal — templates empty state ==================== */ .diary-template-btn { background: var(--surface-variant); border: 1px solid var(--border); border-radius: 12px; padding: 14px 12px; cursor: pointer; text-align: center; transition: transform .12s, border-color .12s, background .12s; color: var(--text); font-family: inherit; font-size: 13px; } .diary-template-btn:hover { transform: translateY(-1px); border-color: var(--primary, #00695C); background: var(--surface); } .diary-template-btn strong { display: block; font-size: 13px; } /* ==================== Naturals — bandeau débutants ==================== */ .naturals-beginners { background: linear-gradient(135deg, rgba(46,160,67,0.1), rgba(82,183,136,0.06)); border: 1px solid rgba(46,160,67,0.25); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; font-size: 13px; } .naturals-beginners strong { color: var(--primary, #00695C); } .naturals-beginners .nb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .naturals-beginners .nb-chip { display: inline-block; padding: 3px 10px; background: rgba(46,160,67,0.12); border-radius: 9999px; font-size: 12px; color: var(--primary, #00695C); font-weight: 600; cursor: pointer; border: none; font-family: inherit; } .naturals-beginners .nb-chip:hover { background: rgba(46,160,67,0.22); } /* ==================== Médicaments — blocs moment du jour ==================== */ .meds-tod-block { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; } .meds-tod-header { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px solid var(--border); } .meds-tod-header strong { font-size: 14px; color: var(--primary, #00695C); } .meds-tod-hours { font-size: 11px; color: var(--muted-fg); } .meds-tod-block .med-item { margin-top: 6px; } .med-taken-time { font-size: 12px; color: var(--muted-fg); margin-left: 4px; } /* Time-of-day chip picker in add-med-form */ .med-tod-chip { cursor: pointer; transition: background .15s, border-color .15s; } .med-tod-chip.selected { background: var(--primary, #00695C); color: #fff; border-color: var(--primary, #00695C); } /* ==================== Dashboard widgets ==================== */ .dash-article-link, .dash-nat-item, .dash-forum-item { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; background: var(--surface-variant); border: 1px solid var(--border); border-radius: 10px; text-decoration: none; color: var(--text); transition: transform .12s, background .12s, border-color .12s; } .dash-article-link:hover, .dash-nat-item:hover, .dash-forum-item:hover { transform: translateY(-1px); background: var(--surface); border-color: var(--primary, #00695C); } .dash-article-link strong, .dash-nat-item strong { font-size: 14px; color: var(--text); } .dash-article-link span, .dash-nat-item span { font-size: 12px; color: var(--muted-fg); line-height: 1.4; } .dash-nat-item + .dash-nat-item, .dash-forum-item + .dash-forum-item { margin-top: 8px; } .dash-forum-item { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; } .dash-forum-title { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; } .dash-forum-count { flex-shrink: 0; font-size: 11px; color: var(--muted-fg); background: var(--surface); padding: 2px 8px; border-radius: 9999px; border: 1px solid var(--border); } /* ==================== UI breathing (spacing audit) ==================== */ /* Generous & consistent spacing across cards, headings, chips, forms and recipe layouts. */ /* View padding: wider gutters on mobile, more on desktop */ .view { padding: calc(var(--topbar-height) + 20px) 20px 28px; } @media (min-width: 600px) { .view { padding-left: 24px; padding-right: 24px; } } @media (min-width: 1024px) { .view { padding-left: 32px; padding-right: 32px; } } /* Article cards — roomier inside, rhythm outside */ body.benzo-ready article.round { padding: 20px; } body.benzo-ready article.round + article.round, body.benzo-ready .view > article.round:not(:first-child) { margin-top: 14px; } /* Section headings breathe before body content */ .view > h5 { margin: 0 0 16px; } .view > h6 { margin: 0 0 12px; } article.round > h6:first-child { margin-bottom: 14px; } /* Back-button rows at the top of sub-views */ .view > .row:first-child { margin-bottom: 14px !important; } /* Chip groups — more generous gap */ .chip-group { gap: 10px; } .chip-group + * { margin-top: 14px; } /* Form fields — vertical rhythm */ .field.round.border, .field.round { margin-bottom: 14px; } .field.round + .row, .field.round + .chip-group { margin-top: 12px; } /* Nat entries (per-category view) */ .nat-entry { margin-bottom: 14px; padding: 16px 18px; } .nat-entry__head { margin-bottom: 10px; } .nat-entry__desc { line-height: 1.55; margin: 0 0 10px; } .nat-entry > * + * { margin-top: 8px; } /* Recipe cards — sections clearly separated */ .nat-recipe { padding: 18px 20px; } .nat-recipe-section { padding: 12px 14px; margin-top: 12px; border-radius: 10px; } .nat-recipe-section p { line-height: 1.55; } .nat-recipe-ingredients { margin-top: 4px; } .nat-recipe-ingredient { padding: 8px 0; gap: 10px; } /* Meds time-of-day blocks */ .meds-tod-block { padding: 16px 18px; margin-bottom: 12px; } .meds-tod-header { padding-bottom: 10px; margin-bottom: 10px; } .med-item { padding: 12px 14px; border-radius: 10px; } .med-item + .med-item { margin-top: 8px; } /* Calendar grid and cells — a touch more air */ .cal-grid { gap: 6px; } .cal-day { padding: 6px; } .cal-day-header { padding: 8px 0; } .meds-tod-chip-wrap { gap: 10px; } /* Sobriety rows */ .sobriety-group { margin-bottom: 16px; } .sobriety-row { padding: 8px 0; gap: 10px; } /* Diary entries */ .diary-entry { padding: 14px 16px; margin-bottom: 10px; border-radius: 12px; } .diary-entry + .diary-entry { margin-top: 8px; } /* Crisis country grouping */ .crisis-country { margin-bottom: 12px; } .crisis-country-summary { padding: 14px 16px; } .crisis-country-body { padding: 12px 14px; gap: 10px; } .crisis-item { padding: 12px 14px; } /* Dashboard widget cards */ .dash-article-link, .dash-nat-item, .dash-forum-item { padding: 12px 16px; } .dash-nat-item + .dash-nat-item, .dash-forum-item + .dash-forum-item { margin-top: 10px; } /* (Naturals hub spacing now lives in the consolidated .nat-hub block above — these duplicate rules were trimmed.) */ /* Quick actions tiles in Dashboard — padding override against Beer defaults */ .quick-action { padding: 18px 14px !important; } /* Constrain content width on very large screens for better line-length */ @media (min-width: 1400px) { .view { max-width: 920px; } } /* ==================== Landing — Dual access badge + gallery ==================== */ .lp-cta-note { margin: 10px 0 0; text-align: center; font-size: 13px; color: #5a7a6a; } /* Forum direct-access block — landing page */ .lp-forum-direct { max-width: 540px; margin: 18px auto 0; padding: 18px 20px; text-align: center; background: rgba(255,255,255,0.5); border: 1px solid rgba(45,106,79,0.18); border-radius: 14px; } .lp-forum-direct__sep { display: block; width: 40px; height: 2px; background: rgba(45,106,79,0.3); margin: 0 auto 14px; border-radius: 2px; } .lp-forum-direct__lead { margin: 0 0 12px; font-size: 14px; color: #1b4332; } .lp-forum-direct__lead strong { color: #2d6a4f; } .lp-forum-direct__btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 22px; background: #fff; color: #1b4332; border: 2px solid #2d6a4f; border-radius: 10px; text-decoration: none; font-size: 15px; font-weight: 700; transition: background .15s, color .15s, transform .12s, box-shadow .12s; min-height: 44px; } .lp-forum-direct__btn:hover { background: #2d6a4f; color: #fff; transform: translateY(-1px); box-shadow: 0 3px 10px rgba(45,106,79,.25); } .lp-forum-direct__btn:focus-visible { outline: 2px solid #52b788; outline-offset: 3px; } .lp-forum-direct__arrow { font-weight: 700; } .lp-forum-direct__note { margin: 10px 0 0; font-size: 12.5px; color: #5a7a6a; line-height: 1.45; } [data-theme="dark"] .lp-forum-direct { background: rgba(27,46,27,0.7); border-color: rgba(149,213,178,0.25); } [data-theme="dark"] .lp-forum-direct__lead { color: #d8f3dc; } [data-theme="dark"] .lp-forum-direct__lead strong { color: #95d5b2; } [data-theme="dark"] .lp-forum-direct__btn { background: rgba(45,106,79,0.15); color: #d8f3dc; border-color: #95d5b2; } [data-theme="dark"] .lp-forum-direct__btn:hover { background: #95d5b2; color: #081c15; } [data-theme="dark"] .lp-forum-direct__note { color: #9ab89a; } .lp-dual-access { max-width: 540px; margin: 22px auto 0; padding: 16px 18px; background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(46, 160, 67, 0.2); border-radius: 14px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); } [data-theme="dark"] .lp-dual-access { background: rgba(20, 40, 30, 0.6); border-color: rgba(82, 183, 136, 0.25); } .lp-dual-access__title { text-align: center; font-size: 15px; color: #1b4332; margin-bottom: 10px; } [data-theme="dark"] .lp-dual-access__title { color: #d8f3dc; } .lp-dual-access__arrow { color: #52b788; margin: 0 4px; font-weight: 700; } .lp-dual-access__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; } .lp-dual-access__item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: rgba(82, 183, 136, 0.08); border-radius: 10px; } .lp-dual-access__ic { flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: rgba(46, 160, 67, 0.15); color: #2d6a4f; } .lp-dual-access__name { font-size: 13px; font-weight: 700; color: #1b4332; } .lp-dual-access__sub { font-size: 11.5px; color: #5a7a6a; line-height: 1.35; } [data-theme="dark"] .lp-dual-access__name { color: #d8f3dc; } [data-theme="dark"] .lp-dual-access__sub { color: #95d5b2; } .lp-dual-access__sep { font-size: 20px; font-weight: 700; color: #52b788; } .lp-dual-access__forumcta { display: block; text-align: center; margin-top: 12px; font-size: 13px; color: #2d6a4f; text-decoration: none; font-weight: 600; } .lp-dual-access__forumcta:hover { text-decoration: underline; } @media (max-width: 480px) { .lp-dual-access__row { grid-template-columns: 1fr; } .lp-dual-access__sep { display: none; } } /* Gallery */ .lp-gallery-sec { background: #f8fbf9; padding: 48px 0; } [data-theme="dark"] .lp-gallery-sec { background: rgba(15, 31, 23, 0.5); } .lp-gallery { display: flex; gap: 16px; overflow-x: auto; overflow-y: hidden; padding: 8px 4px 20px; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: rgba(46,160,67,0.4) transparent; } .lp-gallery::-webkit-scrollbar { height: 8px; } .lp-gallery::-webkit-scrollbar-thumb { background: rgba(46,160,67,0.4); border-radius: 8px; } .lp-gallery__card { flex: 0 0 260px; margin: 0; background: #fff; border: 1px solid #d7e2db; border-radius: 18px; overflow: hidden; box-shadow: 0 6px 20px rgba(27, 67, 50, 0.08); scroll-snap-align: start; display: flex; flex-direction: column; transition: transform .18s, box-shadow .18s; } [data-theme="dark"] .lp-gallery__card { background: #1a2e23; border-color: #2a4334; } .lp-gallery__card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(27, 67, 50, 0.14); } .lp-gallery__card img { display: block; width: 100%; aspect-ratio: 9 / 17; object-fit: cover; object-position: top; background: linear-gradient(135deg, #d8f3dc, #b7e4c7); } [data-theme="dark"] .lp-gallery__card img { background: linear-gradient(135deg, rgba(82,183,136,0.15), rgba(27,67,50,0.35)); } .lp-gallery__card figcaption { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 2px; } .lp-gallery__card figcaption strong { font-size: 14px; color: #1b4332; } [data-theme="dark"] .lp-gallery__card figcaption strong { color: #d8f3dc; } .lp-gallery__card figcaption span { font-size: 12px; color: #5a7a6a; line-height: 1.4; } @media (min-width: 900px) { .lp-gallery__card { flex: 0 0 280px; } } /* Landing — live forum posts in community grid */ .lp-post-live { display: block; padding: 10px 12px; background: #f8fbf9; border: 1px solid #d7e2db; border-radius: 10px; text-decoration: none; color: inherit; margin-bottom: 8px; transition: transform .12s, border-color .12s; } .lp-post-live:hover { transform: translateY(-1px); border-color: #52b788; } .lp-post-live .lp-post-name { font-weight: 600; color: #1b4332; font-size: 13px; margin-bottom: 2px; } .lp-post-live .lp-post-meta { font-size: 11px; color: #5a7a6a; } [data-theme="dark"] .lp-post-live { background: rgba(20,40,30,0.5); border-color: #2a4334; } [data-theme="dark"] .lp-post-live .lp-post-name { color: #d8f3dc; } [data-theme="dark"] .lp-post-live .lp-post-meta { color: #95d5b2; } .lp-topic-live { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; background: rgba(82,183,136,0.06); border-radius: 8px; text-decoration: none; color: #1b4332; font-size: 13px; margin-bottom: 6px; transition: background .12s; } .lp-topic-live:hover { background: rgba(82,183,136,0.12); } .lp-topic-live .lp-topic-meta { font-size: 11px; color: #5a7a6a; flex-shrink: 0; } [data-theme="dark"] .lp-topic-live { color: #d8f3dc; background: rgba(82,183,136,0.1); } [data-theme="dark"] .lp-topic-live .lp-topic-meta { color: #95d5b2; } /* ==================== Print ==================== */ @media print { header, nav.bottom, .crisis-fab, .toast, .offline-bar, .wip-banner { display: none !important; } body { padding: 0; } .view { max-width: 100%; padding: 0 !important; } } /* ==================== Landing Page ==================== */ #landing-page { position: fixed; top: var(--wip-height); left: 0; right: 0; bottom: 0; z-index: 100; overflow-y: auto; overflow-x: hidden; background: #f0f9f4; font-family: inherit; -webkit-overflow-scrolling: touch; } /* Reserve space at the bottom of the landing so the fixed cookie banner doesn't cover the CTAs (Créer mon compte / Se connecter / Accéder au forum). Applies only while the banner is on screen. */ body.has-cookie-banner #landing-page { padding-bottom: 140px; } @media (min-width: 768px) { body.has-cookie-banner #landing-page { padding-bottom: 80px; } } .lp-container { max-width: 960px; margin: 0 auto; padding: 0 24px; } /* Hero */ .lp-hero { background: linear-gradient(155deg, #0b3320 0%, #195c3e 45%, #2a7a56 100%); padding: 72px 0 80px; text-align: center; position: relative; overflow: hidden; } @media (max-width: 767px) { .lp-hero { padding: 28px 0 40px; } } .lp-deco { position: absolute; background: #95d5b2; border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%; opacity: 0.055; pointer-events: none; } .lp-deco-1 { width: 420px; height: 420px; top: -160px; left: -110px; transform: rotate(22deg); } .lp-deco-2 { width: 260px; height: 260px; bottom: -90px; right: -70px; transform: rotate(-18deg); } .lp-deco-3 { width: 160px; height: 160px; top: 40%; right: 8%; opacity: 0.035; } .lp-logo-wrap { margin-bottom: 8px; } .lp-leaf-icon { width: 68px; height: 68px; filter: drop-shadow(0 6px 16px rgba(0,0,0,0.35)); } .lp-title { font-size: clamp(2.4rem, 7vw, 4rem); font-weight: 800; color: #fff; margin: 0 0 14px; letter-spacing: -0.03em; line-height: 1; } .lp-tagline { font-size: clamp(1rem, 2.6vw, 1.25rem); color: #b7e4c7; margin: 0 0 20px; font-weight: 400; } .lp-desc { font-size: .98rem; color: #95d5b2; max-width: 540px; margin: 0 auto 38px; line-height: 1.75; } @media (max-width: 767px) { .lp-logo-wrap { margin-bottom: 4px; } .lp-leaf-icon { width: 48px; height: 48px; } .lp-title { margin-bottom: 8px; } .lp-tagline { margin-bottom: 10px; line-height: 1.3; } .lp-desc { font-size: .88rem; margin-bottom: 22px; line-height: 1.5; } .lp-btn-primary, .lp-btn-ghost { padding: 12px 22px; } } .lp-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; } .lp-btn-primary { background: #52b788; color: #0b3320; border: none; padding: 15px 30px; font-size: 1rem; font-weight: 700; border-radius: 50px; cursor: pointer; transition: background .2s, transform .15s, box-shadow .2s; font-family: inherit; box-shadow: 0 4px 20px rgba(0,0,0,0.3); } .lp-btn-primary:hover { background: #74c69d; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,0.35); } .lp-btn-primary:active { transform: translateY(0); } .lp-btn-ghost { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.55); padding: 13px 30px; font-size: 1rem; font-weight: 600; border-radius: 50px; cursor: pointer; transition: background .2s, border-color .2s; font-family: inherit; } .lp-btn-ghost:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.85); } .lp-trust-line { color: #74c69d; font-size: .86rem; margin: 0; } /* Section base */ .lp-sec { padding: 64px 24px; } .lp-sec-green { background: #f0f9f4; } .lp-sec-dark { background: #1a4731; } .lp-sec-warn { background: #fffde7; padding: 36px 24px; } .lp-sec-light { background: #f8fdf9; } .lp-sec-cta { background: #185c3e; text-align: center; padding: 56px 24px; } .lp-sh { text-align: center; font-size: clamp(1.35rem, 4vw, 1.85rem); font-weight: 700; color: #1a4731; margin: 0 0 40px; } /* Feature cards */ .lp-feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; } .lp-feat { background: #fff; border-radius: 18px; padding: 28px 22px; box-shadow: 0 2px 16px rgba(20,80,50,0.07); transition: transform .2s, box-shadow .2s; } .lp-feat:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(20,80,50,0.13); } .lp-feat-icon { font-size: 2.1rem; display: block; margin-bottom: 12px; line-height: 1; } .lp-feat h3 { font-size: 1rem; font-weight: 700; color: #1a4731; margin: 0 0 8px; } .lp-feat p { font-size: .87rem; color: #5a7a6a; line-height: 1.65; margin: 0; } /* Privacy section */ .lp-priv-inner { display: flex; align-items: center; gap: 48px; flex-wrap: wrap; } .lp-priv-text { flex: 1; min-width: 280px; } .lp-priv-badge { display: inline-block; background: rgba(82,183,136,0.2); color: #95d5b2; padding: 4px 14px; border-radius: 20px; font-size: .84rem; font-weight: 600; margin-bottom: 16px; letter-spacing: .02em; } .lp-priv-text h2 { color: #fff; font-size: 1.6rem; font-weight: 700; margin: 0 0 14px; } .lp-priv-text > p { color: #b7e4c7; font-size: .95rem; line-height: 1.7; margin: 0 0 18px; } .lp-priv-text strong { color: #d8f3dc; } .lp-priv-list { list-style: none; padding: 0; margin: 0; } .lp-priv-list li { color: #95d5b2; font-size: .9rem; padding: 5px 0; border-bottom: 1px solid rgba(82,183,136,0.12); } .lp-priv-list li:last-child { border-bottom: none; } .lp-priv-deco { flex-shrink: 0; display: none; } @media (min-width: 600px) { .lp-priv-deco { display: block; } } /* Disclaimer */ .lp-warn-box { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid #ffe082; border-left: 5px solid #f9a825; border-radius: 14px; padding: 20px 24px; max-width: 820px; margin: 0 auto; } .lp-warn-icon { font-size: 2rem; flex-shrink: 0; line-height: 1.1; } .lp-warn-box strong { display: block; color: #bf6f00; margin-bottom: 8px; font-size: .98rem; } .lp-warn-box p { color: #5a5a5a; font-size: .87rem; line-height: 1.65; margin: 0; } /* Legal section */ .lp-legal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; } .lp-legal-col h3 { color: #1a4731; font-size: 1.02rem; font-weight: 700; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid #d8f3dc; } .lp-legal-col p { font-size: .82rem; color: #5a6e5a; line-height: 1.65; margin: 0 0 10px; } /* Bottom CTA section */ .lp-sec-cta h2 { color: #d8f3dc; margin: 0 0 8px; font-size: 1.6rem; font-weight: 700; } .lp-sec-cta p { color: #95d5b2; margin: 0 0 28px; } /* Footer */ .lp-footer { background: #0b3320; color: #52b788; padding: 24px; } .lp-footer-row { max-width: 960px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; font-size: .84rem; } .lp-footer a { color: #95d5b2; text-decoration: none; } .lp-footer a:hover { text-decoration: underline; } /* ==================== Landing — Community Section ==================== */ .lp-community-hero { background: linear-gradient(180deg, #fff 0%, #f0f9f4 100%); padding: 72px 24px; } .lp-comm-badge { display: inline-block; background: #d8f3dc; color: #1a4731; padding: 5px 16px; border-radius: 20px; font-size: .88rem; font-weight: 700; margin-bottom: 16px; letter-spacing: .02em; } .lp-comm-title { font-size: clamp(1.8rem, 5vw, 2.8rem); font-weight: 800; color: #0d3b27; margin: 0 0 12px; letter-spacing: -.02em; } .lp-comm-sub { font-size: 1rem; color: #5a7a6a; max-width: 600px; line-height: 1.75; margin: 0 0 40px; } .lp-comm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; } .lp-comm-card { background: #fff; border-radius: 20px; padding: 28px; box-shadow: 0 4px 24px rgba(20,80,50,0.09); display: flex; flex-direction: column; gap: 20px; } .lp-comm-card-forum { background: #1a4731; } .lp-comm-card-top { display: flex; gap: 16px; align-items: flex-start; } .lp-comm-icon { font-size: 2rem; flex-shrink: 0; line-height: 1; } .lp-comm-card h3 { font-size: 1.05rem; font-weight: 700; color: #1a4731; margin: 0 0 6px; } .lp-comm-card p { font-size: .88rem; color: #5a7a6a; line-height: 1.6; margin: 0; } .lp-comm-card-forum h3 { color: #d8f3dc; } .lp-comm-card-forum p { color: #95d5b2; } /* Mock posts */ .lp-comm-preview { display: flex; flex-direction: column; gap: 12px; } .lp-post-mock { display: flex; gap: 12px; background: #f8fdf9; border-radius: 12px; padding: 12px 14px; } .lp-post-avatar { font-size: 1.5rem; flex-shrink: 0; line-height: 1.2; } .lp-post-name { font-size: .78rem; color: #5a7a6a; font-weight: 600; margin-bottom: 3px; } .lp-post-text { font-size: .88rem; color: #1a2e1a; line-height: 1.5; margin-bottom: 6px; } .lp-post-reacts { font-size: .76rem; color: #2d8055; } /* Forum topics */ .lp-forum-topics { display: flex; flex-direction: column; gap: 8px; flex: 1; } .lp-topic { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; padding: 10px 14px; font-size: .87rem; color: #b7e4c7; } .lp-forum-link { display: inline-block; background: #52b788; color: #0b3320; font-weight: 700; font-size: .9rem; padding: 10px 20px; border-radius: 50px; text-decoration: none; text-align: center; transition: background .2s; } .lp-forum-link:hover { background: #74c69d; } /* === Meds catalog === */ .meds-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; } .med-cat-card { padding: 12px 14px; border: 1px solid var(--border, rgba(0,0,0,0.08)); background: var(--surface, #fff); display: flex; flex-direction: column; gap: 6px; } .med-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .med-cat-name { font-weight: 600; font-size: 15px; line-height: 1.2; } .med-cat-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 8px; border-radius: 100px; flex-shrink: 0; } .med-cat-badge--benzo { background: rgba(0, 105, 92, 0.12); color: #00695c; } .med-cat-badge--z { background: rgba(142, 36, 170, 0.12); color: #8e24aa; } .med-cat-brands { font-size: 12px; color: var(--muted-fg, #666); line-height: 1.4; } .med-cat-stats { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 12px; color: var(--muted-fg, #666); margin-top: 2px; } .med-cat-stats strong { color: var(--fg, #111); font-weight: 600; } .med-cat-timing { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .tod-pill { font-size: 11px; padding: 2px 8px; border-radius: 100px; background: rgba(0, 0, 0, 0.06); color: var(--fg, #333); line-height: 1.4; } .meds-tab.active { background: var(--primary, #00695c); color: #fff; border-color: transparent; } .cat-filter-chip.active { background: var(--primary, #00695c); color: #fff; border-color: transparent; } /* === Naturals tabs === */ .naturals-tabs { flex-wrap: wrap; gap: 6px; margin-bottom: 14px; padding-bottom: 4px; } .nat-tab { background: transparent; border: 1px solid var(--border, rgba(0,0,0,0.12)); color: var(--fg, #222); padding: 8px 14px; border-radius: 100px; font-size: 13px; line-height: 1.2; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; transition: background .15s, border-color .15s, color .15s; white-space: nowrap; } .nat-tab:hover { background: rgba(0, 105, 92, 0.06); border-color: rgba(0, 105, 92, 0.4); } .nat-tab.active { background: var(--primary, #00695c); border-color: transparent; color: #fff; } .nat-tab.active:hover { background: #00594f; } .nat-tab i { font-size: 16px; line-height: 1; } /* === Naturals HUB (landing) — same polish as breathing exercise grid === */ .nat-hub { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 8px; } @media (min-width: 640px) { .nat-hub { grid-template-columns: repeat(2, 1fr); gap: 18px; } } .nat-hub-card { /* Reset Beer-CSS button defaults */ box-sizing: border-box; width: 100%; height: auto; margin: 0; display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1.5px solid var(--border); border-left: 4px solid var(--nat-color, var(--primary)); border-radius: 16px; background: var(--card); color: var(--text); text-align: left; cursor: pointer; font: inherit; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease; } .nat-hub-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.08), 0 0 0 1px var(--nat-color, var(--primary)); border-color: var(--nat-color, var(--primary)); } .nat-hub-card:focus-visible { outline: 2px solid var(--nat-color, var(--primary)); outline-offset: 2px; } /* Icon nest — colored circle with the category hue */ .nat-hub-card__emoji { flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 26px; line-height: 1; color: var(--nat-color, var(--primary)); background: color-mix(in srgb, var(--nat-color, var(--primary)) 14%, transparent); } .nat-hub-card__emoji svg, .nat-hub-card__emoji .i-icn, .nat-hub-card__emoji i { width: 26px; height: 26px; color: inherit; } .nat-hub-card__body { flex: 1; min-width: 0; } .nat-hub-card__title { font-family: var(--ff-display, 'Fraunces', Georgia, serif); font-size: 18px; font-weight: 700; line-height: 1.2; display: flex; align-items: center; gap: 10px; color: var(--text); } .nat-hub-card__count { font-size: 12px; font-weight: 700; color: var(--nat-color, var(--primary)); background: color-mix(in srgb, var(--nat-color, var(--primary)) 15%, transparent); padding: 3px 10px; border-radius: 100px; line-height: 1.2; } .nat-hub-card__preview { font-size: 13px; color: var(--muted-fg); margin-top: 6px; line-height: 1.4; } .nat-hub-card__arrow { flex-shrink: 0; font-size: 22px; color: var(--muted-fg); opacity: 0.55; transition: transform .15s ease, opacity .15s ease, color .15s ease; } .nat-hub-card:hover .nat-hub-card__arrow { transform: translateX(3px); opacity: 1; color: var(--nat-color, var(--primary)); } /* Dark mode tweak — keep contrast on tinted icon halo */ [data-theme="dark"] .nat-hub-card { background: var(--card); } [data-theme="dark"] .nat-hub-card__emoji { background: color-mix(in srgb, var(--nat-color, var(--primary)) 22%, transparent); } /* === Naturals entries (bullet-point style) === */ .nat-entries { display: flex; flex-direction: column; gap: 0; } .nat-entry { padding: 16px 16px 18px; border-top: 1px solid var(--border, rgba(0,0,0,0.08)); border-left: 3px solid transparent; background: var(--surface, #fff); transition: background .15s; } .nat-entry:first-child { border-top: 1px solid var(--border, rgba(0,0,0,0.08)); } .nat-entry:last-child { border-bottom: 1px solid var(--border, rgba(0,0,0,0.08)); } .nat-entry.nat-safe { border-left-color: #1e7a35; } .nat-entry.nat-caution { border-left-color: #c08a2a; background: rgba(200, 138, 42, 0.03); } .nat-entry.nat-avoid { border-left-color: #b03030; background: rgba(176, 48, 48, 0.04); } .nat-entry__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .nat-entry__title { flex: 1; min-width: 0; line-height: 1.25; } .nat-entry__name { font-family: var(--ff-display, 'Fraunces', Georgia, serif); font-size: 18px; font-weight: 600; color: var(--fg, #111); } .nat-entry__latin { display: block; font-style: italic; font-size: 12px; color: var(--muted-fg, #7a6560); margin-top: 2px; font-family: var(--ff-body, system-ui, sans-serif); font-weight: 400; } .nat-entry__desc { font-size: 14px; line-height: 1.55; color: var(--fg, #111); margin: 0 0 10px; } .nat-entry__stats { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; } .nat-stat { display: grid; grid-template-columns: 130px 1fr; gap: 12px; font-size: 13px; line-height: 1.5; align-items: start; } @media (max-width: 500px) { .nat-stat { grid-template-columns: 1fr; gap: 2px; } } .nat-stat__label { font-weight: 600; color: var(--muted-fg, #7a6560); white-space: nowrap; } .nat-stat__value { color: var(--fg, #111); word-wrap: break-word; } .nat-stat__sub { display: inline-block; margin-top: 2px; font-size: 12px; color: var(--muted-fg, #7a6560); } .nat-entry__warnings { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: rgba(176, 48, 48, 0.08); border-left: 3px solid #b03030; font-size: 13px; line-height: 1.5; } .nat-entry.nat-caution .nat-entry__warnings { background: rgba(200, 138, 42, 0.1); border-left-color: #c08a2a; } .nat-entry__warnings p { margin: 0; } .nat-entry__warnings p + p { margin-top: 6px; } .nat-entry__sources { margin-top: 10px; font-size: 12px; } .nat-entry__sources summary { cursor: pointer; color: var(--muted-fg, #7a6560); font-weight: 600; list-style: none; user-select: none; } .nat-entry__sources summary::-webkit-details-marker { display: none; } .nat-entry__sources[open] summary { margin-bottom: 6px; } .nat-entry__sources ul { margin: 4px 0 0; padding-left: 18px; line-height: 1.5; } .nat-entry__sources li { margin-bottom: 4px; } .nat-entry__sources a { color: var(--primary, #00695c); text-decoration: underline; text-decoration-color: rgba(0, 105, 92, 0.3); } .nat-entry__sources a:hover { text-decoration-color: var(--primary, #00695c); } /* ======================================================================== 2026 modernization pass — soft depth, refined type, subtle gradients. Intentionally at the bottom so it overrides earlier legacy rules without rewriting them. ======================================================================== */ :root { --radius: 14px; --radius-lg: 20px; /* Elevation — softer, layered, lightly green-tinted shadows */ --shadow-xs: 0 1px 2px rgba(16, 60, 40, 0.04); --shadow-sm: 0 1px 3px rgba(16, 60, 40, 0.06), 0 1px 2px rgba(16, 60, 40, 0.04); --shadow: 0 2px 6px rgba(16, 60, 40, 0.06), 0 1px 2px rgba(16, 60, 40, 0.05); --shadow-md: 0 6px 18px -4px rgba(16, 60, 40, 0.10), 0 2px 6px -2px rgba(16, 60, 40, 0.06); --shadow-lg: 0 12px 32px -8px rgba(16, 60, 40, 0.14), 0 4px 10px -4px rgba(16, 60, 40, 0.08); } [data-theme="dark"] { --shadow-xs: 0 1px 2px rgba(0,0,0,0.25); --shadow-sm: 0 1px 3px rgba(0,0,0,0.30); --shadow: 0 2px 8px rgba(0,0,0,0.35); --shadow-md: 0 6px 20px -4px rgba(0,0,0,0.45); --shadow-lg: 0 14px 36px -10px rgba(0,0,0,0.55); } /* Cards: softer edge, micro-gradient, real elevation */ body.benzo-ready article.round { border: 1px solid rgba(45, 106, 79, 0.08); border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 40%), var(--card); box-shadow: var(--shadow); transition: box-shadow .2s ease, transform .2s ease; } body.benzo-ready article.round:hover { box-shadow: var(--shadow-md); } [data-theme="dark"] body.benzo-ready article.round { border-color: rgba(149, 213, 178, 0.12); background: linear-gradient(180deg, rgba(149, 213, 178, 0.04) 0%, rgba(149, 213, 178, 0) 40%), var(--card); } /* Typography rhythm — better hierarchy + slight tracking on headings */ body.benzo-ready h5, body.benzo-ready h6 { letter-spacing: -0.015em; font-weight: 650; color: var(--text); } .view > h5 { font-size: 1.4rem; line-height: 1.2; } .view > h6 { font-size: 1.05rem; line-height: 1.3; } article.round > h6:first-child { font-size: 1rem; font-weight: 650; } p, li { line-height: 1.6; } .small-text, .muted-text { font-size: 0.82rem; color: var(--muted-fg); } /* Primary buttons feel like real affordances */ body.benzo-ready button.round:not(.small):not(.transparent):not(.circle), body.benzo-ready .lp-btn-primary { border-radius: 9999px; padding: 12px 22px; font-weight: 600; letter-spacing: -0.005em; box-shadow: 0 2px 4px rgba(45, 106, 79, 0.12); transition: transform .12s ease, box-shadow .18s ease, background .15s ease; } body.benzo-ready button.round:not(.small):not(.transparent):not(.circle):hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(45, 106, 79, 0.18); } body.benzo-ready button.round:not(.small):not(.transparent):not(.circle):active { transform: translateY(0); box-shadow: 0 1px 2px rgba(45, 106, 79, 0.15); } /* Inputs: softer borders, better focus ring */ body.benzo-ready .field.round.border { border-radius: 12px; transition: border-color .15s ease, box-shadow .15s ease; } body.benzo-ready .field.round.border:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.14); } /* Header: finer texture, light top glow */ body.benzo-ready > header { background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 60%), linear-gradient(135deg, #1b4332 0%, #2d6a4f 100%) !important; box-shadow: 0 1px 0 rgba(0,0,0,0.08), 0 4px 16px -6px rgba(16, 60, 40, 0.18); } /* Bottom nav: subtle top shadow so it floats above scrolled content */ body.benzo-ready > nav.bottom { box-shadow: 0 -4px 16px -6px rgba(16, 60, 40, 0.10), 0 -1px 0 rgba(45, 106, 79, 0.08); } /* Quick action tiles on dashboard — make them tangible */ .quick-action, .dash-quick-action { border-radius: var(--radius-lg); transition: transform .15s ease, box-shadow .18s ease, border-color .15s ease; } .quick-action:hover, .dash-quick-action:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: rgba(45, 106, 79, 0.25); } /* Mood scale buttons: larger rounding, richer active state */ .mood-btn { border-radius: 12px; transition: transform .1s ease, background .15s ease, border-color .15s ease; } .mood-btn:hover { transform: translateY(-1px); } .mood-btn.active { box-shadow: 0 4px 10px rgba(45, 106, 79, 0.25); } /* Chips and badges */ .chip { border-radius: 9999px; transition: background .15s ease, color .15s ease, border-color .15s ease; } /* Landing hero — punchier title, softer glow */ .lp-title { background: linear-gradient(180deg, #ffffff 0%, #d8f3dc 95%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 4px 32px rgba(0, 0, 0, 0.25); } /* Nav item focus — visible for keyboard users */ .nav-item:focus-visible, .desktop-nav-item:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; } /* Smooth scroll for anchor nav + better rendering */ html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ======================================================================== Auth overlay — Beer CSS falls back to Material purple for the overlay dialog; force our forest-green palette on every element inside. ======================================================================== */ #auth-overlay { --primary: #2d6a4f; --on-primary: #ffffff; --primary-container: #d8f3dc; --on-primary-container: #1b4332; --secondary: #52b788; --on-secondary: #081c15; --surface: #ffffff; --on-surface: #1b4332; --outline: rgba(45,106,79,0.32); --outline-variant: rgba(45,106,79,0.16); } #auth-overlay h6, #auth-overlay h5 { color: #1b4332 !important; font-weight: 650; letter-spacing: -0.01em; } /* Primary solid button */ #auth-overlay button.round:not(.border):not(.transparent) { background: #2d6a4f !important; color: #ffffff !important; border-radius: 9999px !important; padding: 12px 22px; font-weight: 600; box-shadow: 0 2px 4px rgba(45,106,79,.18); transition: transform .12s, box-shadow .15s, background .15s; } #auth-overlay button.round:not(.border):not(.transparent):hover { background: #1b4332 !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(45,106,79,.26); } /* Secondary / bordered button */ #auth-overlay button.round.border { border: 1px solid rgba(45,106,79,0.35) !important; color: #1b4332 !important; background: #ffffff !important; border-radius: 9999px !important; } #auth-overlay button.round.border:hover { background: #f0f9f4 !important; border-color: #2d6a4f !important; } /* Transparent "S'inscrire / Se connecter" switch button */ #auth-overlay button.transparent { color: #2d6a4f !important; font-weight: 600; } /* Inputs: green focus ring */ #auth-overlay .field.round.border { border-color: rgba(45,106,79,0.22) !important; } #auth-overlay .field.round.border:focus-within { border-color: #2d6a4f !important; box-shadow: 0 0 0 3px rgba(45,106,79,0.16); } #auth-overlay label { color: #5a7a6a; } /* Forum preview box in SSO mode */ #auth-overlay .forum-preview, #auth-overlay .auth-forum-preview { background: #f0f9f4 !important; border-color: rgba(45,106,79,0.18) !important; } #auth-overlay .forum-preview strong, #auth-overlay .auth-forum-preview strong { color: #1b4332; } #auth-overlay a { color: #2d6a4f; } #auth-overlay a:hover { color: #1b4332; } /* ============================================================ Medical safety modals — non-dismissible-by-X consent + crisis ============================================================ */ .bp-modal-backdrop { position: fixed; inset: 0; background: rgba(11, 51, 32, 0.85); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 10001; } .bp-modal-backdrop[hidden] { display: none; } .bp-modal-crisis { z-index: 10002; } .bp-modal-card { background: var(--card, #fff); color: var(--fg, #1b1b1b); max-width: 480px; width: 100%; padding: 28px; border-radius: 20px; box-shadow: var(--shadow-lg, 0 20px 60px rgba(0,0,0,0.3)); max-height: 92vh; overflow-y: auto; } .bp-modal-title { margin: 0 0 8px; font-size: 1.25rem; line-height: 1.3; color: var(--primary, #00695C); } .bp-modal-crisis .bp-modal-title { color: #b81414; } .bp-modal-intro { margin: 0 0 18px; font-size: .95rem; line-height: 1.5; } /* Consent checkboxes */ .bp-consent-list { list-style: none; margin: 0 0 20px; padding: 0; } .bp-consent-list li { margin-bottom: 12px; } .bp-consent-list label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: .92rem; line-height: 1.45; } .bp-consent-list input[type="checkbox"] { flex-shrink: 0; margin-top: 3px; width: 18px; height: 18px; cursor: pointer; accent-color: var(--primary, #00695C); } /* Crisis resources block */ .bp-crisis-resources { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; } .bp-crisis-call { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: #fdecec; color: #6b0a0a; text-decoration: none; border: 1px solid #f5b7b7; transition: transform 0.15s, box-shadow 0.15s; } .bp-crisis-call:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(184, 20, 20, 0.15); } .bp-crisis-call i { font-size: 26px; color: #b81414; } .bp-crisis-call strong { display: block; font-size: 1rem; } .bp-crisis-call small { display: block; font-size: .8rem; opacity: 0.85; margin-top: 2px; } body.dark .bp-crisis-call { background: #2a1414; color: #ffd1d1; border-color: #5a2424; } .bp-crisis-link { background: transparent; border: 1px dashed var(--primary, #00695C); color: var(--primary, #00695C); border-radius: 12px; padding: 12px 14px; cursor: pointer; font-size: .92rem; text-align: left; width: 100%; } .bp-crisis-link:hover { background: rgba(0, 105, 92, 0.08); } /* Action row */ .bp-modal-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; } .bp-modal-actions .round[disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* Mobile (<480px) */ @media (max-width: 480px) { .bp-modal-backdrop { padding: 8px; } .bp-modal-card { padding: 20px; max-width: 92vw; border-radius: 16px; } .bp-modal-actions { flex-direction: column-reverse; } .bp-modal-actions .round { width: 100%; } } /* ============================================================ BenzoPotes — patches CSS (audit 2026-04-30) À ajouter en fin de style.css. Aucune règle existante n'est modifiée : on se contente d'ajouter des règles plus spécifiques qui réparent les bugs identifiés. ============================================================ */ /* ---------- P1.1 — Onglet sub-nav actif invisible ----------- Bug : le conteneur a les classes "sub-nav tabs" en même temps, donc .tabs > .active impose background = var(--primary) et .sub-nav-item.active impose color = var(--primary). Résultat : texte invisible (couleur identique au fond). Fix : on force un fond transparent et on garde le style "onglet souligné" voulu par .sub-nav. ------------------------------------------------------------ */ .sub-nav.tabs > .sub-nav-item, .sub-nav > .sub-nav-item { background: transparent !important; border-radius: 0 !important; } .sub-nav.tabs > .sub-nav-item.active, .sub-nav > .sub-nav-item.active { background: transparent !important; color: var(--primary) !important; border-bottom: 2px solid var(--primary) !important; font-weight: 600; } /* Focus clavier visible sur les onglets (manquait) */ .sub-nav-item:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; } /* ---------- P1.2 — Lien "Forum" toujours en surbrillance ----- Bug : .desktop-nav-forum a un style fond plein vert + texte blanc, ce qui le fait paraître actif quel que soit l'écran courant. C'est un raccourci externe, pas un état actif. Fix : on neutralise et on indique le caractère externe. ------------------------------------------------------------ */ .desktop-nav-item.desktop-nav-forum { background: transparent !important; color: var(--text) !important; border: 1px solid var(--border); font-weight: 500; } .desktop-nav-item.desktop-nav-forum:hover, .desktop-nav-item.desktop-nav-forum:focus-visible { background: var(--accent) !important; color: var(--text) !important; } /* Vrai état actif réservé au lien actuellement consulté */ .desktop-nav-item.active, .desktop-nav-item[aria-current="page"] { background: var(--accent) !important; color: var(--primary) !important; font-weight: 600; } /* ---------- P2.1 — Contraste mode sombre --------------------- Bug : --muted-fg = #7a947a → ratio 4.37 sur fond surface, juste sous WCAG AA pour les petits textes (Terrible/Très bien à 11 px, "Aucun plan de sevrage actif"). Fix : remontée des tons de gris en mode sombre. ------------------------------------------------------------ */ :root.dark, html.dark, [data-theme="dark"] { --muted-fg: #a8c7af; /* avant : #7a947a (4.37) → après : ~6.2 */ --text-secondary: #b8d6c0; /* meilleure lisibilité sur surface foncée */ } /* Labels Terrible/Très bien : taille minimale lisible */ .mood-scale-label, .mood-edges, .scale-edges { font-size: 12px !important; font-weight: 500; } /* ---------- P2.2 — prefers-reduced-motion non respecté ------- Important pour les exercices de respiration animés et les transitions de modale (utilisateurs sujets vertiges en sevrage). ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* Garder l'animation respiration mais en cycle ralenti et discret */ .breath-circle, .breath-orb { animation: none !important; } } /* ---------- P3.1 — Cibles tactiles trop petites en mobile ---- "Je veux aider" (30 px), "Voir tout / Tout voir" (18 px), "Tous les pays" (30 px). WCAG cible 44×44. ------------------------------------------------------------ */ @media (pointer: coarse), (max-width: 767px) { .wip-cta, .see-all, .view-all, .topbar-action, a[role="button"], button.text-button { min-height: 44px; padding: 10px 14px; display: inline-flex; align-items: center; justify-content: center; } } /* ---------- P3.2 — Champ dose : suffixe mg visible ----------- L'utilisateur ne voit pas l'unité quand il tape. On affiche "mg" en suffixe purement décoratif (ne perturbe pas la valeur). ------------------------------------------------------------ */ .dose-input-wrapper { position: relative; } .dose-input-wrapper::after { content: 'mg'; position: absolute; right: 44px; /* laisser place aux flèches du number input */ top: 50%; transform: translateY(-50%); color: var(--muted-fg); pointer-events: none; font-size: 14px; font-weight: 500; } /* ---------- P3.3 — Email tronqué dans la barre du haut ------- #user-email déborde (94 px sur 71 px). On gère proprement. ------------------------------------------------------------ */ .app-topbar-email { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: help; } /* ---------- P3.4 — Validation formulaire de sevrage ---------- Style des erreurs affichées par le patch JS (voir patches.js). ------------------------------------------------------------ */ .form-errors { background: rgba(198, 40, 40, 0.08); border-left: 4px solid #c62828; color: #8b0000; padding: 12px 16px; border-radius: 8px; margin: 0 0 16px 0; } .form-errors p { margin: 4px 0; font-size: 14px; line-height: 1.4; } :root.dark .form-errors, html.dark .form-errors, [data-theme="dark"] .form-errors { background: rgba(255, 100, 100, 0.12); color: #ffb4b4; border-left-color: #ff6b6b; } /* ---------- P2.3 — Classe utilitaire visually-hidden --------- Pour les labels invisibles mais lus par les lecteurs d'écran. ------------------------------------------------------------ */ .visually-hidden, .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* ---------- P3.5 — Bouton flottant "Urgence" en mobile ------- Le panneau rouge vertical à droite couvre du contenu sur les viewports étroits. On le réduit en mobile. ------------------------------------------------------------ */ @media (max-width: 600px) { .emergency-tab, [aria-label*="Urgence"][aria-label*="Ressources"] { writing-mode: initial !important; width: 44px; height: 44px; border-radius: 50%; bottom: 80px; top: auto; right: 8px; padding: 0; } .emergency-tab > span:not(.icon), .emergency-tab .label-text { display: none; } }