/* Shared theme tokens for Clare (light/dark) */ /* Supports two brand themes: NHS (default) and Clare (maroon) */ /* Brand theme is controlled via data-brand attribute on element */ :root { /* Primary backgrounds */ --bg: #ffffff; --bg-primary: #ffffff; --bg-secondary: #f8f9fa; --bg-tertiary: #fafbfc; /* Text colors - NHS aligned */ --fg: #231F20; --text-primary: #231F20; --text-secondary: #425563; --text-muted: #768692; --muted-fg: #425563; /* Card and borders */ --card: #f8fafc; --card-border: #e2e8f0; --border-color: #dee2e6; --border-light: #e5e7eb; /* Brand colors - NHS Blue aligned */ /* WCAG 2.1 AA Contrast verified: #005EB8 on #FFFFFF = 6.4:1 (passes 4.5:1) */ --color-primary: #005EB8; /* NHS Blue - Trust, confidence, reliability */ --color-primary-dark: #003087; --color-primary-darker: #002266; --color-primary-light: rgba(0, 94, 184, 0.1); --color-primary-lighter: rgba(0, 94, 184, 0.05); /* Supporting NHS colors */ --color-nhs-light-blue: #41B6E6; --color-nhs-aqua: #00A9CE; /* Gradient colors for header and UI elements */ --gradient-start: #005EB8; --gradient-mid: #004A99; --gradient-end: #003570; --gradient-dark: #002050; --gradient-light: #0072CE; --gradient-accent: #4DA3FF; /* Gray scale colors */ --color-gray-50: #f8f9fa; --color-gray-100: #f1f3f5; --color-gray-200: #e9ecef; --color-gray-300: #dee2e6; --color-gray-400: #ced4da; --color-gray-500: #768692; --color-gray-600: #425563; --color-gray-700: #343a40; --color-gray-800: #231F20; /* Accent and status colors - NHS aligned */ --accent: #00A9CE; /* NHS Aqua for CTAs */ --accent-contrast: #ffffff; --accent-muted: #41B6E6; --warning: #FFB81C; /* NHS Amber */ --warning-light: #fff3cd; --danger: #DA291C; /* NHS Red - errors only */ --danger-light: #f8d7da; --success: #009639; /* NHS Green - positive actions */ --success-light: #d4edda; --info: #005EB8; --info-light: #d1ecf1; --link: #005EB8; --chip: #e2e8f0; /* Shadows */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 2px 4px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); --shadow-lg: 0 4px 8px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.06); } [data-theme="dark"] { /* Primary backgrounds - softer than pure black */ --bg: #121212; --bg-primary: #121212; --bg-secondary: #1E1E1E; --bg-tertiary: #2D2D2D; /* Text colors - not pure white for eye comfort */ --fg: #E1E1E1; --text-primary: #E1E1E1; --text-secondary: #A0A0A0; --text-muted: #808080; --muted-fg: #A0A0A0; /* Card and borders */ --card: #1E1E1E; --card-border: #3D3D3D; --border-color: #3D3D3D; --border-light: #3D3D3D; /* Brand colors - NHS Blue lightened for dark backgrounds */ /* WCAG 2.1 AA Contrast verified: #4DA3FF on #121212 = 7.2:1 (passes 4.5:1) */ --color-primary: #4DA3FF; /* Lighter NHS Blue for dark mode */ --color-primary-dark: #005EB8; --color-primary-darker: #003087; --color-primary-light: rgba(77, 163, 255, 0.15); --color-primary-lighter: rgba(77, 163, 255, 0.1); /* Supporting NHS colors - lightened for dark mode */ --color-nhs-light-blue: #7DD3F8; --color-nhs-aqua: #5BC8E8; /* Gradient colors - lightened for dark mode */ --gradient-start: #4DA3FF; --gradient-mid: #3D8BD9; --gradient-end: #2D73B3; --gradient-dark: #1D5B8D; --gradient-light: #5DB8FF; --gradient-accent: #7DD3FF; /* Accent and status colors - lightened for dark backgrounds */ --accent: #5BC8E8; /* Lighter aqua */ --accent-contrast: #121212; --accent-muted: #41B6E6; --warning: #FFD666; /* Lighter amber */ --danger: #FF6B6B; /* Lighter red */ --success: #4ADE80; /* Lighter green */ --link: #4DA3FF; --chip: #1E1E1E; /* Shadows (darker for dark mode) */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.15); --shadow-md: 0 2px 4px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.15); --shadow-lg: 0 4px 8px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.2); } /* ===== CLARE BRAND THEME (Maroon) ===== */ /* Override NHS Blue with Clare Maroon when data-brand="clare" is set */ [data-brand="clare"] { /* Brand colors - Clare Maroon */ /* WCAG 2.1 AA Contrast verified: #990033 on #FFFFFF = 7.8:1 (passes 4.5:1) */ --color-primary: #990033; /* Clare Maroon - Distinctive, professional */ --color-primary-dark: #7a0028; --color-primary-darker: #660022; --color-primary-light: rgba(153, 0, 51, 0.1); --color-primary-lighter: rgba(153, 0, 51, 0.05); /* Text colors - slightly warmer */ --fg: #0f172a; --text-primary: #212529; --text-secondary: #6c757d; --text-muted: #868e96; --muted-fg: #475569; /* Gray scale - neutral */ --color-gray-500: #6c757d; --color-gray-600: #495057; --color-gray-800: #212529; /* Accent and status colors - Clare palette */ --accent: #0ea5e9; /* Sky blue for CTAs */ --accent-muted: #7dd3fc; --warning: #f59e0b; --danger: #ef4444; --success: #10b981; --info: #17a2b8; --link: #0ea5e9; /* Gradient colors - Clare Maroon palette */ --gradient-start: #990033; --gradient-mid: #7a0028; --gradient-end: #5c001e; --gradient-dark: #3d0014; --gradient-light: #b3003d; --gradient-accent: #cc0044; } /* Logo display based on theme */ .clare-logo-light { display: block; } .clare-logo-dark { display: none; } [data-theme="dark"] .clare-logo-light { display: none; } [data-theme="dark"] .clare-logo-dark { display: block; } /* Logo wave and icon colors - inherit from brand */ .clare-logo-light, .clare-logo-dark, .alpha-icon, .omega-icon { color: var(--color-primary); } /* Clare brand - convert NHS Blue to Clare Maroon using CSS filters */ /* Filter converts #005EB8 (blue) to #990033 (maroon) */ [data-brand="clare"] .clare-logo-light, [data-brand="clare"] .clare-logo-dark, [data-brand="clare"] .alpha-icon, [data-brand="clare"] .omega-icon { filter: hue-rotate(130deg) saturate(2) brightness(0.85); } /* Clare brand in dark mode */ [data-brand="clare"][data-theme="dark"] { /* Brand colors - Clare Maroon (same in dark for brand consistency) */ --color-primary: #990033; --color-primary-dark: #7a0028; --color-primary-darker: #660022; --color-primary-light: rgba(153, 0, 51, 0.15); --color-primary-lighter: rgba(153, 0, 51, 0.1); /* Text colors for dark mode */ --fg: #e5e7eb; --text-primary: #ffffff; --text-secondary: #b3b3b3; --text-muted: #8a8a8a; --muted-fg: #94a3b8; /* Accent colors - lightened for dark backgrounds */ --accent: #38bdf8; --accent-muted: #0b6ea7; --warning: #fbbf24; --danger: #f87171; --success: #34d399; --link: #7dd3fc; /* Gradient colors - Clare Maroon lightened for dark mode */ --gradient-start: #cc0044; --gradient-mid: #990033; --gradient-end: #7a0028; --gradient-dark: #5c001e; --gradient-light: #e6005c; --gradient-accent: #ff1a6c; } /* Basic element mappings so templates can opt-in with vars */ body { font-family: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--fg); padding-bottom: 80px; } a { color: var(--link); } .card, .panel, .drawer, .box { background: var(--card); border-color: var(--card-border); } .btn-primary { background: var(--accent); color: var(--accent-contrast); } .btn-primary:hover { filter: brightness(0.95); } .badge, .chip { background: var(--chip); color: var(--fg); } /* Source Type Badges */ .source-type { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .source-type.nice { background: #dcfce7; color: #15803d; border: 1px solid #16a34a; } .source-type.cks { background: #fef3c7; color: #d97706; border: 1px solid #f59e0b; } .source-type.clinical-trial { background: #e0e7ff; color: #4338ca; border: 1px solid #6366f1; } .source-type.pdf-guideline { background: #fce7f3; color: #be185d; border: 1px solid #ec4899; } .source-type.sign-guideline { background: #dbeafe; color: #1e40af; border: 1px solid #3b82f6; } [data-theme="dark"] .source-type.nice { background: rgba(220, 252, 231, 0.15); color: #34d399; border-color: rgba(22, 163, 74, 0.4); } [data-theme="dark"] .source-type.cks { background: rgba(254, 243, 199, 0.15); color: #fbbf24; border-color: rgba(245, 158, 11, 0.4); } [data-theme="dark"] .source-type.clinical-trial { background: rgba(224, 231, 255, 0.15); color: #a5b4fc; border-color: rgba(99, 102, 241, 0.4); } [data-theme="dark"] .source-type.pdf-guideline { background: rgba(252, 231, 243, 0.15); color: #f9a8d4; border-color: rgba(236, 72, 153, 0.4); } [data-theme="dark"] .source-type.sign-guideline { background: rgba(219, 234, 254, 0.15); color: #93c5fd; border-color: rgba(59, 130, 246, 0.4); } /* Clare Logo Base Styles */ .logo-center { position: relative; display: inline-block; cursor: pointer; } /* Enhanced Citation Overlay System */ .citation-link { color: var(--color-primary); text-decoration: none; padding: 2px 4px; border-radius: 3px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; position: relative; background: var(--color-primary-lighter); } .citation-link:hover { background: var(--color-primary-light); text-decoration: underline; } .citation-link.active { background: var(--color-primary-light); } /* Clinical Calculator Highlight Styles */ .calculator-highlight { cursor: pointer; transition: all 0.2s ease; border-bottom: 1px dashed var(--color-primary); display: inline; } .calculator-highlight:hover { border-bottom-style: solid; } .calculator-highlight:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; } .calculator-highlight.active { border-bottom-style: solid; } /* Enhanced Citation Bubble Styles */ .citation-bubble { position: absolute; background: var(--bg); border: 1px solid var(--card-border); border-radius: 8px; padding: 12px 16px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); z-index: 1000; max-width: 280px; opacity: 0; transform: scale(0.9) translateY(-10px); transition: all 0.2s ease; pointer-events: none; } .citation-bubble.show { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; } .citation-bubble.detailed { max-width: 400px; padding: 20px 24px; } /* Citation bubble arrow */ .citation-bubble::before { content: ''; position: absolute; top: -6px; left: 20px; width: 12px; height: 12px; background: var(--bg); border: 1px solid var(--card-border); border-bottom: none; border-right: none; transform: rotate(45deg); } .citation-bubble-source { font-weight: 600; color: var(--color-primary); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; font-size: 0.9rem; } .citation-bubble-source::before { content: ''; display: inline-block; width: 8px; height: 8px; background: var(--color-primary); border-radius: 50%; flex-shrink: 0; } .citation-bubble-title { color: var(--fg); font-weight: 500; margin-bottom: 8px; line-height: 1.3; font-size: 0.95rem; } .citation-bubble-link { color: var(--color-primary); text-decoration: none; font-weight: 500; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 4px; } .citation-bubble-link:hover { text-decoration: underline; } .citation-bubble-link::after { content: '↗'; font-size: 0.7rem; } /* Progressive disclosure button */ .show-details-btn { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; margin-top: 8px; background: var(--color-primary); color: white; border: none; border-radius: 4px; font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; } .show-details-btn:hover { background: var(--color-primary-dark); transform: translateY(-1px); } .show-details-btn::after { content: '→'; transition: transform 0.2s ease; } .citation-bubble.detailed .show-details-btn { display: none; } /* Enhanced detailed view styles */ .citation-bubble.detailed .citation-evidence { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--card-border); } .evidence-grade { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; background: #f0f9ff; border: 1px solid #0ea5e9; border-radius: 4px; font-size: 0.75rem; font-weight: 600; color: #0369a1; margin-bottom: 8px; } .evidence-grade.grade-a { background: #dcfce7; border-color: #16a34a; color: #15803d; } .evidence-grade.grade-b { background: #fef3c7; border-color: #f59e0b; color: #d97706; } .evidence-grade.grade-c { background: #fee2e2; border-color: #ef4444; color: #dc2626; } .evidence-grade.grade-trial { background: #e0e7ff; border-color: #6366f1; color: #4338ca; } .evidence-grade.grade-pdf { background: #fce7f3; border-color: #ec4899; color: #be185d; } .publication-date { font-size: 0.8rem; color: var(--muted-fg); margin-bottom: 8px; } .citation-summary { font-size: 0.85rem; color: var(--muted-fg); line-height: 1.4; margin-bottom: 12px; } .clinical-details { background: var(--card); padding: 12px; border-radius: 6px; border-left: 3px solid var(--color-primary); margin-bottom: 12px; } .clinical-details-title { font-weight: 600; color: var(--color-primary); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; } .clinical-details-content { font-size: 0.85rem; color: var(--muted-fg); line-height: 1.4; } /* Dark mode adjustments */ [data-theme="dark"] .citation-bubble { background: var(--card); border-color: var(--card-border); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .citation-bubble::before { background: var(--card); border-color: var(--card-border); } [data-theme="dark"] .evidence-grade { background: rgba(240, 249, 255, 0.1); border-color: rgba(14, 165, 233, 0.3); color: #7dd3fc; } [data-theme="dark"] .evidence-grade.grade-a { background: rgba(220, 252, 231, 0.1); border-color: rgba(22, 163, 74, 0.3); color: #34d399; } [data-theme="dark"] .evidence-grade.grade-b { background: rgba(254, 243, 199, 0.1); border-color: rgba(245, 158, 11, 0.3); color: #fbbf24; } [data-theme="dark"] .evidence-grade.grade-c { background: rgba(254, 226, 226, 0.1); border-color: rgba(239, 68, 68, 0.3); color: #f87171; } [data-theme="dark"] .evidence-grade.grade-trial { background: rgba(224, 231, 255, 0.1); border-color: rgba(99, 102, 241, 0.3); color: #a5b4fc; } [data-theme="dark"] .evidence-grade.grade-pdf { background: rgba(252, 231, 243, 0.1); border-color: rgba(236, 72, 153, 0.3); color: #f9a8d4; } [data-theme="dark"] .clinical-details { background: rgba(15, 23, 42, 0.5); } /* Mobile CSS removed - desktop only */ /* ===== HEADER STYLES ===== */ .header { background: var(--bg-primary); padding: 0; /* Remove padding to allow absolute left positioning */ min-height: 120px; width: 100%; box-sizing: border-box; position: relative; } .header-content { width: 100%; /* Full width */ margin: 0; display: flex; justify-content: space-between; /* Logo at absolute left, controls at absolute right */ align-items: center; padding: 1rem 2rem; /* Padding on content instead of parent */ } .header .logo { text-decoration: none; display: flex; align-items: center; } .header h1 { color: var(--color-primary); margin: 0; font-size: 1.8em; } .header .title-section { position: absolute; top: 16px; left: 16px; z-index: 100; display: flex; flex-direction: column; align-items: flex-start; } .header .subtitle { color: var(--text-secondary); font-size: 0.95em; margin: 0; } .auth-buttons { display: flex; gap: 1rem; align-items: center; } /* Mobile CSS removed - desktop only */ /* ===== FOOTER STYLES =====*/ .page-footer { position: fixed; bottom: 0; left: 0; right: 0; background: var(--bg-primary); padding: 0; /* Remove padding to allow absolute positioning */ z-index: 102; transition: all 0.3s ease; } .page-footer p { margin: 0; font-size: 13px; color: var(--text-secondary); } .footer-content { width: 100%; /* Full width - no max-width constraint */ display: flex; justify-content: space-between; /* Left text at absolute left, right links at absolute right */ align-items: center; flex-wrap: wrap; gap: 1rem; padding: 12px 24px; /* Padding on content instead of parent */ } .footer-links { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; } .footer-link { color: var(--text-secondary); text-decoration: none; font-size: 13px; transition: color 0.2s ease; } .footer-link:hover { color: var(--text-secondary) !important; } [data-theme="dark"] .footer-link:hover { color: #ffffff !important; } /* Footer with search box styling */ .page-footer.with-search { padding: 20px 24px 16px 24px; background: var(--bg-primary); } .page-footer .input-area.bottom { margin-bottom: 10px; } /* ===== ACCESSIBILITY: Reduced Motion ===== */ /* Respects user preference for reduced motion - critical for vestibular disorders */ @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; } } /* ===== ACCESSIBILITY: Skip Links (WCAG 2.4.1) ===== */ /* Hidden by default, visible on focus for keyboard navigation */ .skip-link { position: absolute; top: -100px; left: 50%; transform: translateX(-50%); background: var(--color-primary); color: #ffffff; padding: 12px 24px; text-decoration: none; font-weight: 600; font-size: 14px; border-radius: 0 0 8px 8px; z-index: 10000; transition: top 0.2s ease; } .skip-link:focus { top: 0; outline: 2px solid var(--color-primary-dark); outline-offset: 2px; } [data-theme="dark"] .skip-link { background: var(--color-primary); color: #121212; } /* ===== ACCESSIBILITY: Focus Visible ===== */ /* Enhanced focus states for keyboard navigation */ :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* Remove default focus for mouse users, keep for keyboard */ :focus:not(:focus-visible) { outline: none; } /* ===== ACCESSIBILITY: Visually Hidden (Screen Reader Only) ===== */ /* Hide content visually but keep it accessible to screen readers */ .visually-hidden, .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }