/* ===== DESIGN SYSTEM 2026 — BERLIOZ ===== */ :root { /* Primary */ --color-primary: #0f766e; --color-primary-hover: #0d9488; --color-primary-muted: rgba(15, 118, 110, 0.1); --color-primary-border: rgba(15, 118, 110, 0.25); /* Page & surfaces */ --bg-page: #f1f5f9; --bg-surface: #ffffff; --bg-muted: #f8fafc; /* Neutrals */ --color-neutral-100: #f1f5f9; --color-neutral-200: #e2e8f0; --color-neutral-500: #64748b; --color-neutral-700: #334155; --color-neutral-900: #0f172a; /* Semantic */ --color-success: #059669; --color-success-bg: rgba(5, 150, 105, 0.1); --color-warning: #d97706; --color-warning-bg: rgba(217, 119, 6, 0.1); --color-danger: #dc2626; --color-danger-bg: rgba(220, 38, 38, 0.1); /* Text */ --text-high: var(--color-neutral-900); --text-mid: var(--color-neutral-700); --text-low: var(--color-neutral-500); --text-hint: #94a3b8; /* Border */ --border-subtle: var(--color-neutral-200); --border-mid: #cbd5e1; /* Typography scale */ --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 2rem; --line-height-tight: 1.25; --line-height-normal: 1.5; --line-height-relaxed: 1.65; /* Spacing scale */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; /* Radius */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 9999px; /* Transitions */ --transition-fast: 0.15s ease; --transition-base: 0.25s ease; --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1); /* Shadows */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12); } /* Dark mode — automatic via prefers-color-scheme: DISABLED Dark mode is now only activated via [data-theme="dark"] on */ /* Dark mode — manual toggle via [data-theme="dark"] on */ [data-theme="dark"] { --color-primary: #2dd4bf; --color-primary-hover: #14b8a6; --color-primary-muted: rgba(45, 212, 191, 0.1); --color-primary-border: rgba(45, 212, 191, 0.2); --bg-page: #0a0f1a; --bg-surface: #1e293b; --bg-muted: #162032; --border-subtle: #2d3f55; --border-mid: #334155; --text-high: #f1f5f9; --text-mid: #cbd5e1; --text-low: #94a3b8; --text-hint: #64748b; --color-success: #34d399; --color-success-bg: rgba(52, 211, 153, 0.1); --color-warning: #fbbf24; --color-warning-bg: rgba(251, 191, 36, 0.1); --color-danger: #f87171; --color-danger-bg: rgba(248, 113, 113, 0.1); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.4); } /* ===== RESET & BASE ===== */ * { margin: 0; padding: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; } html { scroll-behavior: smooth; background-color: var(--bg-page); min-height: 100%; scroll-padding-top: 100px; } body { font-family: 'Inter', system-ui, -apple-system, sans-serif; color: var(--text-high); background: var(--bg-page); line-height: var(--line-height-normal); min-height: 100vh; overflow-x: hidden; display: flex; flex-direction: column; } /* ===== LAYOUT ===== */ .container { max-width: 1400px; margin: 0 auto; padding: 0 var(--space-8); } /* ===== NAVIGATION ===== */ .navbar { position: fixed; top: var(--space-6); left: 50%; transform: translateX(-50%) translateY(0); width: fit-content; min-width: 320px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border-subtle); border-radius: var(--radius-full); z-index: 1000; padding: var(--space-3) var(--space-8); box-shadow: var(--shadow-md); transition: transform var(--transition-smooth), opacity var(--transition-smooth); } .navbar.hidden { transform: translateX(-50%) translateY(-150%); opacity: 0; pointer-events: none; } [data-theme="dark"] .navbar { background: rgba(30, 41, 59, 0.95); } .navbar .container { display: flex; align-items: center; gap: var(--space-8); height: 48px; padding: 0; } .navbar-brand { font-weight: 800; font-size: var(--font-size-lg); letter-spacing: -0.02em; color: var(--text-high); text-decoration: none; display: flex; align-items: center; gap: var(--space-2); line-height: 1; } .brand-icon { font-size: var(--font-size-xl); color: var(--color-primary); } .brand-icon.image { width: 1.5rem; height: 1.5rem; border-radius: 50%; object-fit: cover; } .nav-menu { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-2); background: var(--bg-muted); border-radius: var(--radius-full); } .nav-list { display: flex; gap: var(--space-1); list-style: none; align-items: center; } .nav-link { color: var(--text-mid); text-decoration: none; font-size: var(--font-size-sm); font-weight: 500; padding: var(--space-2) var(--space-5); border-radius: var(--radius-full); transition: all var(--transition-fast); background: transparent; border: none; cursor: pointer; } .nav-link:hover { color: var(--text-high); background: var(--bg-surface); } .nav-link.active { color: var(--text-high); background: var(--bg-surface); } /* Theme Toggle */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-full); background: transparent; border: 1px solid var(--border-subtle); color: var(--text-mid); cursor: pointer; transition: all var(--transition-fast); } .theme-toggle:hover { background: var(--bg-muted); color: var(--text-high); border-color: var(--border-mid); } .theme-toggle svg { width: 18px; height: 18px; } /* Light mode (default): show moon icon to switch TO dark */ /* Dark mode: show sun icon to switch TO light */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* Mobile Toggle */ .nav-toggle { display: none; flex-direction: column; justify-content: space-between; width: 24px; height: 18px; background: transparent; border: none; cursor: pointer; padding: 0; z-index: 1001; } .nav-toggle span { display: block; height: 2px; width: 100%; background-color: var(--text-high); border-radius: 2px; transition: all var(--transition-smooth); } /* ===== HERO ===== */ .hero { padding: 12rem 0 var(--space-10); text-align: center; } .hero-title { font-size: clamp(2.5rem, 8vw, 4.5rem); font-weight: 900; line-height: var(--line-height-tight); letter-spacing: -0.05em; margin-bottom: var(--space-8); color: var(--text-high); } .hero-title .accent { color: var(--color-primary); } .hero-subtitle { font-size: var(--font-size-lg); color: var(--text-mid); max-width: 560px; margin: 0 auto; font-weight: 400; } /* Section divider with feature pills */ .section-divider { padding: var(--space-8) 0 var(--space-10); } .feature-pills { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; } .feature-pill { padding: var(--space-2) var(--space-5); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-full); font-size: var(--font-size-sm); color: var(--text-mid); font-weight: 500; box-shadow: var(--shadow-sm); } /* ===== MAIN CARD ===== */ .main { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: clamp(var(--space-8), 4vw, 3.5rem); position: relative; overflow: hidden; box-shadow: var(--shadow-lg); animation: reveal 1s cubic-bezier(0.16, 1, 0.3, 1) backwards; animation-delay: 0.15s; max-width: 720px; margin: 0 auto; width: 100%; } .main > section { width: 100%; } .panel { display: none; position: relative; z-index: 1; width: 100%; max-width: 100%; } .panel.active { display: block; } .panel-header { margin-bottom: var(--space-6); } .panel-header h2 { font-size: var(--font-size-2xl); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 var(--space-1); color: var(--text-high); } .hint { color: var(--text-mid); font-size: var(--font-size-sm); margin: 0; } /* ===== FORMS & INPUTS ===== */ .form-group { display: flex; flex-direction: column; gap: var(--space-3); } @media (min-width: 480px) { .form-group { flex-direction: row; } .form-group input { flex: 1; } } input[type="url"], input[type="text"], input[type="password"] { width: 100%; padding: var(--space-4) var(--space-5); background: var(--bg-muted); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--text-high); font-size: var(--font-size-base); transition: all var(--transition-fast); box-shadow: var(--shadow-sm); } input::placeholder { color: var(--text-hint); } input:focus { outline: none; border-color: var(--color-primary); background: var(--bg-surface); box-shadow: 0 0 0 3px var(--color-primary-muted); } button:focus-visible, .nav-link:focus-visible, a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } input[type="file"] { color: var(--text-mid); font-size: var(--font-size-sm); } /* ===== BUTTONS ===== */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-3) var(--space-6); border-radius: var(--radius-full); font-weight: 600; text-decoration: none; transition: all var(--transition-fast); border: 1px solid transparent; cursor: pointer; font-size: var(--font-size-sm); box-shadow: var(--shadow-sm); } .btn.primary, .btn-primary { background: var(--color-primary); color: #fff; border: none; } .btn.primary:hover, .btn-primary:hover { background: var(--color-primary-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn.primary:disabled, .btn-primary:disabled { background: var(--bg-muted); border-color: var(--border-subtle); color: var(--text-low); cursor: not-allowed; box-shadow: none; transform: none; } .btn-secondary { background: none; border: 1px solid var(--border-mid); color: var(--text-mid); } .btn-secondary:hover { background: var(--bg-muted); color: var(--text-high); border-color: var(--border-mid); } /* ===== BADGES ===== */ .badge { display: inline-flex; padding: 2px 8px; border-radius: var(--radius-sm); font-size: var(--font-size-xs); font-weight: 500; } .badge-ok { background: var(--color-success-bg); color: var(--color-success); } .badge-warn { background: var(--color-warning-bg); color: var(--color-warning); } .badge-bad { background: var(--color-danger-bg); color: var(--color-danger); } /* ===== ALERTS ===== */ .alert { padding: var(--space-4); border-left: 3px solid var(--color-warning); background: var(--color-warning-bg); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-size: var(--font-size-sm); } /* ===== RESULTS ===== */ #analyser-result, #ocr-result { margin-top: var(--space-6); padding: var(--space-5) var(--space-6); border-radius: var(--radius-lg); min-height: 60px; } .result-ok { background: var(--color-success-bg); border: 1px solid var(--color-success); } .result-bad { background: var(--color-danger-bg); border: 1px solid var(--color-danger); } .result-loading { background: var(--bg-muted); color: var(--text-mid); } #analyser-result h3, #ocr-result h3 { margin: 0 0 var(--space-2); font-size: var(--font-size-lg); font-weight: 700; } #analyser-result p, #ocr-result p { margin: var(--space-1) 0; font-size: var(--font-size-sm); } /* Table Scroll Wrapper */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-lg); } .table-scroll table { min-width: 400px; } /* Analysis Table */ .analysis-table { width: 100%; margin: var(--space-6) 0; border-collapse: collapse; background: var(--bg-muted); border-radius: var(--radius-lg); overflow: hidden; } .analysis-table thead { background: var(--color-primary-muted); color: var(--color-primary); font-weight: 600; text-transform: uppercase; font-size: var(--font-size-xs); letter-spacing: 0.05em; } .analysis-table th, .analysis-table td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--border-subtle); } .analysis-table tbody tr:last-child td { border-bottom: none; } .analysis-table tbody tr { transition: background-color var(--transition-fast); } .analysis-table tbody tr:hover { background: var(--color-primary-muted); } .analysis-table .row-ok { background: var(--color-success-bg); } .analysis-table .row-bad { background: var(--color-danger-bg); } .analysis-table .row-neutral { background: transparent; } .analysis-table td:last-child { text-align: center; font-size: var(--font-size-xl); } /* ===== CHAT ===== */ #chat-messages { min-height: 450px; max-height: calc(100vh - 300px); overflow-y: auto; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--border-mid) transparent; } #chat-messages::-webkit-scrollbar { width: 6px; } #chat-messages::-webkit-scrollbar-track { background: transparent; } #chat-messages::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 3px; } /* Welcome / Empty State */ .chat-welcome { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 3rem var(--space-6); gap: var(--space-5); } .chat-welcome-icon { font-size: var(--font-size-3xl); width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; background: var(--color-primary-muted); border: 1px solid var(--color-primary-border); border-radius: var(--radius-lg); color: var(--color-primary); } .chat-welcome-text { color: var(--text-mid); font-size: var(--font-size-base); line-height: var(--line-height-relaxed); max-width: 420px; } .chat-legend { font-size: var(--font-size-sm); color: var(--text-low); margin: var(--space-2) 0 0; max-width: 420px; line-height: var(--line-height-normal); } .chat-suggestions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; margin-top: var(--space-2); } .chat-suggestion { background: var(--bg-muted); border: 1px solid var(--border-subtle); border-radius: var(--radius-full); color: var(--text-mid); padding: var(--space-2) var(--space-4); font-size: var(--font-size-sm); font-weight: 500; cursor: pointer; transition: all var(--transition-fast); } .chat-suggestion:hover { background: var(--color-primary-muted); border-color: var(--color-primary); color: var(--text-high); transform: translateY(-1px); } /* Chat Bubbles */ .chat-message { display: flex; gap: var(--space-3); padding: var(--space-4) 0; margin-bottom: var(--space-1); animation: chatReveal 0.4s cubic-bezier(0.16, 1, 0.3, 1) backwards; } @keyframes chatReveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .chat-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-base); flex-shrink: 0; margin-top: 2px; } .chat-message.user .chat-avatar { background: var(--color-primary); color: #fff; box-shadow: 0 4px 12px var(--color-primary-muted); } .chat-message.assistant .chat-avatar { background: var(--bg-muted); border: 1px solid var(--border-subtle); color: var(--color-primary); } .chat-bubble { flex: 1; min-width: 0; } .chat-bubble .role { font-weight: 700; font-size: var(--font-size-xs); margin-bottom: var(--space-1); color: var(--text-low); text-transform: uppercase; letter-spacing: 0.06em; } .chat-bubble .bubble-content { padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); } .chat-message.user .chat-bubble .bubble-content { background: var(--color-primary-muted); border: 1px solid var(--color-primary-border); border-bottom-right-radius: var(--radius-sm); } .chat-message.user .chat-bubble .role { color: var(--color-primary); } .chat-message.assistant .chat-bubble .bubble-content { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-bottom-left-radius: var(--radius-sm); box-shadow: var(--shadow-sm); } .chat-message.assistant .chat-bubble .role { color: var(--text-low); } /* Product Header - Badge Style */ .product-header { display: flex; justify-content: space-between; align-items: center; background: var(--bg-muted); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-6); margin-bottom: var(--space-6); } .product-info-section { flex: 1; } .product-header h4 { margin: 0 0 var(--space-2) 0; font-size: var(--font-size-base); font-weight: 600; color: var(--text-high); } .product-meta { font-size: var(--font-size-sm); color: var(--text-mid); margin: 0; } .verdict-container { text-align: right; min-width: 160px; } .verdict { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); font-size: var(--font-size-sm); font-weight: 600; margin-bottom: var(--space-2); } .verdict-ok { background: var(--color-success-bg); color: var(--color-success); border: 1px solid var(--color-success); } .verdict-bad { background: var(--color-danger-bg); color: var(--color-danger); border: 1px solid var(--color-danger); } .verdict-icon { font-weight: bold; } .confidence-bar { width: 100%; height: 4px; background: var(--border-subtle); border-radius: 2px; overflow: hidden; margin-bottom: var(--space-1); } .confidence-fill { height: 100%; background: var(--color-success); transition: width 0.5s ease; } .confidence-text { font-size: var(--font-size-xs); color: var(--text-mid); margin: 0; } /* Composition Table */ .composition-table { width: 100%; border-collapse: collapse; margin: var(--space-4) 0; font-size: var(--font-size-sm); background: var(--bg-muted); border-radius: var(--radius-md); overflow: hidden; } .composition-table thead { background: var(--color-primary-muted); color: var(--color-primary); font-weight: 600; text-transform: uppercase; font-size: var(--font-size-xs); letter-spacing: 0.03em; } .composition-table th { padding: var(--space-3) var(--space-3); text-align: left; border-bottom: 2px solid var(--border-mid); } .composition-table td { padding: var(--space-3) var(--space-3); border-bottom: 1px solid var(--border-subtle); vertical-align: middle; } .composition-table tbody tr:last-child td { border-bottom: none; } .composition-table tbody tr { transition: background-color var(--transition-fast); } .composition-table tbody tr:hover { background: var(--color-primary-muted); } .composition-table .row-status-ok { background: var(--color-success-bg); } .composition-table .row-status-ok:hover { background: var(--color-success-bg); } .composition-table .row-status-bad { background: var(--color-danger-bg); } .composition-table .row-status-bad:hover { background: var(--color-danger-bg); } .composition-table .row-status-neutral { background: transparent; } .composition-table .param { font-weight: 500; color: var(--text-high); width: 35%; } .composition-table .value { font-weight: 600; color: var(--color-primary); width: 20%; } .composition-table .threshold { color: var(--text-mid); font-size: var(--font-size-sm); width: 30%; } .composition-table .status { text-align: center; font-weight: 600; font-size: var(--font-size-sm); width: 15%; } .status-ok { color: var(--color-success); } .status-bad { color: var(--color-danger); } .status-neutral { color: var(--text-mid); } /* Product Advice */ .product-advice { margin-top: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--color-primary-muted); border-left: 3px solid var(--color-primary); border-radius: 0 var(--radius-md) var(--radius-md) 0; } .product-advice p { margin: 0; font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); color: var(--text-high); } /* Markdown Styling */ .product-advice ol, .product-advice ul, .chat-text ol, .chat-text ul { margin: var(--space-2) 0 var(--space-2) var(--space-6); padding: 0; } .product-advice li, .chat-text li { margin: var(--space-1) 0; color: var(--text-high); font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); } .product-advice strong, .chat-text strong { font-weight: 600; color: var(--text-high); } .product-advice em, .chat-text em { font-style: italic; color: var(--color-primary); } .product-advice code, .chat-text code { background: var(--color-primary-muted); padding: 0.2rem 0.4rem; border-radius: 4px; font-family: 'Courier New', monospace; font-size: var(--font-size-sm); color: var(--color-primary); } .chat-text { font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); color: var(--text-high); } .chat-bubble pre, .chat-bubble table { font-size: var(--font-size-sm); overflow-x: auto; margin-top: var(--space-2); } .chat-bubble table { border-collapse: collapse; width: 100%; } .chat-bubble th, .chat-bubble td { padding: var(--space-2) var(--space-3); text-align: left; border: 1px solid var(--border-subtle); } /* Typing indicator */ .chat-typing .bubble-content { display: flex; align-items: center; gap: var(--space-3); } .chat-typing .typing-dots { display: flex; gap: 4px; } .chat-typing .typing-dots span { width: 8px; height: 8px; background: var(--color-primary); border-radius: 50%; animation: typingDot 1.4s infinite ease-in-out both; } .chat-typing .typing-dots span:nth-child(1) { animation-delay: 0s; } .chat-typing .typing-dots span:nth-child(2) { animation-delay: 0.2s; } .chat-typing .typing-dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes typingDot { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; } 40% { transform: scale(1); opacity: 1; } } .chat-typing .typing-label { font-size: var(--font-size-sm); color: var(--text-low); } /* Chat Input */ .chat-input-container { padding-bottom: env(safe-area-inset-bottom, var(--space-4)); } .chat-input-row { display: flex; gap: var(--space-3); margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); } .chat-input-row input { flex: 1; margin-bottom: 0; } .chat-input-row .btn { flex-shrink: 0; width: 48px; height: 48px; padding: 0; display: flex; align-items: center; justify-content: center; } /* ===== TOAST ===== */ .toast { position: fixed; bottom: var(--space-8); left: 50%; transform: translateX(-50%) translateY(100px); background: var(--color-primary); color: #fff; padding: var(--space-3) var(--space-6); border-radius: var(--radius-full); font-size: var(--font-size-sm); font-weight: 500; box-shadow: var(--shadow-lg); z-index: 9999; opacity: 0; transition: all var(--transition-smooth); } .toast.show { transform: translateX(-50%) translateY(0); opacity: 1; } /* ===== MISC ===== */ .warning { background: var(--color-warning-bg); border: 1px solid var(--color-warning); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); margin: var(--space-2) 0; font-size: var(--font-size-sm); } .expander { margin-top: var(--space-3); } .expander summary { cursor: pointer; font-size: var(--font-size-sm); color: var(--text-mid); transition: color var(--transition-fast); } .expander summary:hover { color: var(--text-high); } .expander pre { font-size: var(--font-size-sm); max-height: 150px; overflow-y: auto; white-space: pre-wrap; margin-top: var(--space-2); } /* Warnings sous le tableau d'analyse */ .product-warnings { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--color-warning-bg); border: 1px solid var(--color-warning); border-radius: var(--radius-md); font-size: var(--font-size-sm); color: var(--text-high); } /* Ligne "Discuter de ce résultat" (Analyser / OCR) */ .open-chat-row { margin: var(--space-6) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); } .open-chat-row .btn-open-chat { width: 100%; justify-content: center; } /* ===== ANIMATIONS ===== */ @keyframes reveal { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ===== FOOTER ===== */ .footer { padding: var(--space-10) 0 var(--space-8); background: var(--bg-page); border-top: none; margin-top: calc(var(--space-10) * 3); text-align: center; } .footer p { color: var(--text-low); font-size: var(--font-size-sm); } /* ===== RESPONSIVE ===== */ @media (max-width: 768px) { .navbar { width: calc(100% - var(--space-8)); top: var(--space-4); padding: var(--space-3) var(--space-5); min-width: unset; } .navbar .container { justify-content: space-between; gap: 0; height: 40px; } .nav-toggle { display: flex; z-index: 1001; } .nav-menu { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: var(--bg-surface); flex-direction: column; justify-content: center; padding: var(--space-8); z-index: 1000; opacity: 0; visibility: hidden; pointer-events: none; transition: all var(--transition-smooth); border-radius: 0; } .nav-menu.active { opacity: 1; visibility: visible; pointer-events: auto; } .nav-list { flex-direction: column; gap: var(--space-6); width: 100%; align-items: center; } .nav-link { font-size: var(--font-size-xl); width: 100%; text-align: center; padding: var(--space-4); } /* Hamburger Animation */ .nav-toggle.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .nav-toggle.active span:nth-child(2) { opacity: 0; transform: scaleX(0); } .nav-toggle.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } .hero { padding: 8rem 0 var(--space-6); } .hero-title { font-size: 2.5rem; } .main { padding: var(--space-6); } } /* Mobile Stack - Product Header (P0 fix) */ @media (max-width: 480px) { .product-header { flex-direction: column; align-items: flex-start; gap: var(--space-4); } .verdict-container { min-width: unset; width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); } } /* Extra small screens */ @media (max-width: 374px) { .container { padding: 0 var(--space-4); } .main { padding: var(--space-4); } } /* ===== ONBOARDING MODAL ===== */ .onboarding-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 2000; padding: var(--space-4); opacity: 0; transition: opacity var(--transition-base); } .onboarding-overlay.visible { opacity: 1; } .onboarding-overlay.hidden { display: none; } .onboarding-modal { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: var(--space-8); max-width: 400px; width: 100%; position: relative; box-shadow: var(--shadow-lg); transform: translateY(20px); transition: transform var(--transition-smooth); } .onboarding-overlay.visible .onboarding-modal { transform: translateY(0); } .onboarding-skip { position: absolute; top: var(--space-4); right: var(--space-4); background: none; border: none; font-size: var(--font-size-sm); color: var(--text-low); cursor: pointer; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); transition: color var(--transition-fast); } .onboarding-skip:hover { color: var(--text-high); } .onboarding-slide { text-align: center; padding: var(--space-4) 0 var(--space-6); display: none; } .onboarding-slide.active { display: block; } .onboarding-icon { width: 56px; height: 56px; border-radius: var(--radius-lg); background: var(--color-primary-muted); border: 1px solid var(--color-primary-border); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-5); color: var(--color-primary); } .onboarding-icon svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .onboarding-title { font-size: var(--font-size-xl); font-weight: 700; color: var(--text-high); margin-bottom: var(--space-3); letter-spacing: -0.02em; } .onboarding-text { font-size: var(--font-size-sm); color: var(--text-mid); line-height: var(--line-height-relaxed); max-width: 300px; margin: 0 auto; } .onboarding-dots { display: flex; justify-content: center; gap: var(--space-2); margin-bottom: var(--space-6); } .onboarding-dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--border-mid); transition: all var(--transition-fast); } .onboarding-dot.active { width: 24px; background: var(--color-primary); } .onboarding-footer { display: flex; gap: var(--space-3); } .onboarding-footer .btn { flex: 1; justify-content: center; } .onboarding-prev { display: none; } /* ===== INTERACTIVE TOUR ===== */ .tour-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 3000; display: none; pointer-events: none; } .tour-overlay.active { display: block; } .tour-highlight { position: relative; z-index: 3001; border-radius: var(--radius-md); outline: 3px solid var(--color-primary); outline-offset: 2px; box-shadow: 0 0 0 6px var(--color-primary-muted), 0 0 20px rgba(15, 118, 110, 0.4); animation: tourPulse 1.2s ease-in-out infinite; } @keyframes tourPulse { 0%, 100% { outline-offset: 2px; box-shadow: 0 0 0 6px var(--color-primary-muted), 0 0 20px rgba(15, 118, 110, 0.4); } 50% { outline-offset: 4px; box-shadow: 0 0 0 10px var(--color-primary-muted), 0 0 30px rgba(15, 118, 110, 0.6); } } .tour-tooltip { position: fixed; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-5); width: 280px; z-index: 3002; box-shadow: var(--shadow-lg); display: none; animation: tooltipReveal 0.25s cubic-bezier(0.16, 1, 0.3, 1); } .tour-tooltip.active { display: block; } @keyframes tooltipReveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .tour-step-label { font-size: var(--font-size-xs); font-weight: 600; color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-2); } .tour-title { font-size: var(--font-size-base); font-weight: 700; color: var(--text-high); margin-bottom: var(--space-2); } .tour-text { font-size: var(--font-size-sm); color: var(--text-mid); line-height: var(--line-height-relaxed); margin-bottom: var(--space-4); } .tour-footer { display: flex; align-items: center; justify-content: space-between; } .tour-dots { display: flex; gap: var(--space-1); } .tour-dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--border-mid); transition: all var(--transition-fast); } .tour-dot.active { width: 16px; background: var(--color-primary); } .tour-actions { display: flex; gap: var(--space-2); } .tour-btn-prev, .tour-btn-next { font-size: var(--font-size-xs); font-weight: 600; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); cursor: pointer; border: 1px solid var(--border-mid); background: none; color: var(--text-mid); transition: all var(--transition-fast); } .tour-btn-next { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } .tour-btn-prev:hover { background: var(--bg-muted); color: var(--text-high); } .tour-btn-next:hover { background: var(--color-primary-hover); } .tour-close { position: absolute; top: var(--space-3); right: var(--space-3); background: none; border: none; font-size: var(--font-size-lg); color: var(--text-low); cursor: pointer; line-height: 1; padding: 2px var(--space-1); } .tour-close:hover { color: var(--text-high); } /* Replay button */ .tour-replay-btn { position: fixed; bottom: var(--space-6); right: var(--space-6); width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--bg-surface); border: 1px solid var(--border-subtle); color: var(--text-mid); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); transition: all var(--transition-fast); z-index: 1500; } .tour-replay-btn:hover { background: var(--color-primary-muted); border-color: var(--color-primary); color: var(--color-primary); transform: scale(1.08); } .tour-replay-btn svg { width: 18px; height: 18px; } /* Tour scroll hint - full overlay */ .tour-scroll-hint { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); z-index: 3010; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .tour-scroll-hint.visible { opacity: 1; pointer-events: auto; } .scroll-hint-content { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); color: #fff; text-align: center; padding: var(--space-6); } .scroll-hint-content svg { width: 48px; height: 48px; animation: scrollArrowBounce 0.6s ease-in-out infinite; } .scroll-hint-content span { font-size: var(--font-size-xl); font-weight: 700; } .scroll-hint-content small { font-size: var(--font-size-sm); opacity: 0.8; } @keyframes scrollArrowBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } /* Tour mobile adjustments */ @media (max-width: 600px) { .tour-tooltip { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); top: auto !important; width: calc(100vw - 32px); max-width: 400px; } .tour-replay-btn { bottom: var(--space-4); right: var(--space-4); width: 40px; height: 40px; } } /* ===== TRIAGE QUESTIONNAIRE ===== */ .triage-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); z-index: 4000; display: flex; align-items: center; justify-content: center; padding: var(--space-4); opacity: 0; transition: opacity 0.3s ease; } .triage-overlay.hidden { display: none; } .triage-overlay.visible { opacity: 1; } .triage-modal { background: var(--bg-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); max-width: 420px; width: 100%; padding: var(--space-8); transform: scale(0.95); transition: transform 0.3s ease; } .triage-overlay.visible .triage-modal { transform: scale(1); } .triage-header { text-align: center; margin-bottom: var(--space-6); } .triage-icon { font-size: 3rem; margin-bottom: var(--space-3); } .triage-header h2 { font-size: var(--font-size-xl); font-weight: 700; color: var(--text-high); margin: 0 0 var(--space-2); } .triage-header p { font-size: var(--font-size-sm); color: var(--text-low); margin: 0; } .triage-step { display: none; } .triage-step.active { display: block; } .triage-question { font-size: var(--font-size-base); font-weight: 600; color: var(--text-high); margin-bottom: var(--space-4); text-align: center; } .triage-options { display: flex; flex-direction: column; gap: var(--space-3); } .triage-option { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); background: var(--bg-muted); border: 2px solid var(--border-subtle); border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); text-align: left; } .triage-option:hover { border-color: var(--color-primary); background: var(--color-primary-muted); } .triage-option:active { transform: scale(0.98); } .option-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; background: var(--bg-surface); border-radius: var(--radius-sm); flex-shrink: 0; } .option-text { font-size: var(--font-size-sm); font-weight: 500; color: var(--text-high); } .triage-back { margin-top: var(--space-4); background: none; border: none; color: var(--text-low); font-size: var(--font-size-sm); cursor: pointer; padding: var(--space-2); } .triage-back:hover { color: var(--color-primary); } .triage-footer { margin-top: var(--space-6); text-align: center; border-top: 1px solid var(--border-subtle); padding-top: var(--space-4); } .triage-skip { background: none; border: none; color: var(--text-low); font-size: var(--font-size-xs); cursor: pointer; text-decoration: underline; } .triage-skip:hover { color: var(--text-mid); } .triage-sain-message { text-align: center; padding: var(--space-4) 0 var(--space-6); } .sain-icon { font-size: 3rem; display: block; margin-bottom: var(--space-3); } .triage-sain-message h3 { font-size: var(--font-size-lg); font-weight: 700; color: var(--color-success); margin: 0 0 var(--space-3); } .triage-sain-message p { font-size: var(--font-size-sm); color: var(--text-mid); margin: 0 0 var(--space-2); line-height: var(--line-height-relaxed); } .triage-sain-actions { display: flex; flex-direction: column; gap: var(--space-3); } .triage-option-secondary { background: transparent; border-style: dashed; } .triage-option-secondary:hover { background: var(--bg-muted); } .triage-option-link { text-decoration: none; color: inherit; } .triage-option-link:hover { border-color: var(--color-primary); background: var(--color-primary-muted); } @media (max-width: 480px) { .triage-modal { padding: var(--space-6); } .triage-icon { font-size: 2.5rem; } }