tractatus/public/css/tractatus-theme.min.css

/** * Tractatus AI Safety Framework - Theme System * * Based on TRACTATUS_BRAND_SYSTEM.md * Created: 2025-10-18 * * This file defines the complete color, typography, and design token system * for the Tractatus Framework. It implements the 6-node hexagonal orbital * brand identity with service-specific colors. */:root { /* ======================================== * CORE IDENTITY - Cyan to Blue Gradient * Shared with MySovereignty Passport * ======================================== */ --tractatus-core-start: #64ffda; /* Cyan 300 - Clarity, transparency */ --tractatus-core-mid: #448aff; /* Blue 400 - Trust, logic */ --tractatus-core-end: #0891b2; /* Cyan 600 - Technical precision (WCAG AA: 4.57:1 on gray-50) */ /* ======================================== * SIX GOVERNANCE SERVICES * Hexagonal node colors mapped to framework components * ======================================== */ /* 1. BoundaryEnforcer - Emerald Green */ --service-boundary-light: #10b981; /* Emerald 500 */ --service-boundary-dark: #059669; /* Emerald 600 */ /* 2. InstructionPersistenceClassifier - Indigo */ --service-instruction-light: #6366f1; /* Indigo 500 */ --service-instruction-dark: #4f46e5; /* Indigo 600 */ /* 3. CrossReferenceValidator - Purple */ --service-validator-light: #8b5cf6; /* Purple 500 */ --service-validator-dark: #7c3aed; /* Purple 600 */ /* 4. ContextPressureMonitor - Amber */ --service-pressure-light: #f59e0b; /* Amber 500 */ --service-pressure-dark: #d97706; /* Amber 600 */ /* 5. MetacognitiveVerifier - Rose */ --service-metacognitive-light: #ec4899; /* Pink 500 */ --service-metacognitive-dark: #db2777; /* Pink 600 */ /* 6. PluralisticDeliberationOrchestrator - Teal */ --service-deliberation-light: #14b8a6; /* Teal 500 */ --service-deliberation-dark: #0f766e; /* Teal 700 */ /* ======================================== * UI NEUTRALS - Slate-based * Technical, professional feel * ======================================== */ /* Light mode backgrounds */ --bg-primary: #ffffff; --bg-secondary: #f8fafc; /* Slate 50 */ --bg-tertiary: #f1f5f9; /* Slate 100 */ /* Text colors */ --text-primary: #0f172a; /* Slate 900 */ --text-secondary: #475569; /* Slate 600 */ --text-tertiary: #94a3b8; /* Slate 400 */ /* Borders */ --border-light: #e2e8f0; /* Slate 200 */ --border-medium: #cbd5e1; /* Slate 300 */ --border-dark: #94a3b8; /* Slate 400 */ /* Dark mode (future implementation) */ --bg-primary-dark: #0f172a; /* Slate 900 */ --bg-secondary-dark: #1e293b; /* Slate 800 */ --text-primary-dark: #f8fafc; /* Slate 50 */ /* ======================================== * SEMANTIC COLORS * State and feedback colors * ======================================== */ /* Success (safety achieved) */ --success: #10b981; /* Emerald 500 - matches BoundaryEnforcer */ --success-light: #d1fae5; /* Emerald 100 */ --success-dark: #065f46; /* Emerald 800 */ /* Warning (attention needed) */ --warning: #f59e0b; /* Amber 500 - matches PressureMonitor */ --warning-light: #fef3c7; /* Amber 100 */ --warning-dark: #92400e; /* Amber 800 */ /* Error (boundary violation) */ --error: #ef4444; /* Red 500 */ --error-light: #fee2e2; /* Red 100 */ --error-dark: #991b1b; /* Red 800 */ /* Info (neutral notification) */ --info: #0ea5e9; /* Cyan 500 - matches core */ --info-light: #e0f2fe; /* Cyan 100 */ --info-dark: #075985; /* Cyan 800 */ /* ======================================== * TYPOGRAPHY SYSTEM * Font families and weights * ======================================== */ /* Font stacks */ --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'SF Mono', Monaco, 'Cascadia Code', monospace; /* Font weights */ --font-light: 300; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-extrabold: 800; /* ======================================== * GRADIENTS * Pre-defined gradient combinations * ======================================== */ /* Primary hero gradient */ --gradient-hero: linear-gradient(135deg, #64ffda 0%, #448aff 50%, #0ea5e9 100%); /* Primary CTA button */ --gradient-primary-btn: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%); /* Service-specific button gradients */ --gradient-btn-boundary: linear-gradient(135deg, #10b981 0%, #059669 100%); --gradient-btn-instruction: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); --gradient-btn-validator: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); --gradient-btn-pressure: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); --gradient-btn-metacognitive: linear-gradient(135deg, #ec4899 0%, #db2777 100%); --gradient-btn-deliberation: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%); /* Multi-service highlight gradient */ --gradient-all-services: linear-gradient(90deg, #10b981 0%, /* BoundaryEnforcer */ #6366f1 20%, /* InstructionPersistence */ #8b5cf6 40%, /* Validator */ #f59e0b 60%, /* PressureMonitor */ #ec4899 80%, /* Metacognitive */ #14b8a6 100% /* Deliberation */ ); /* ======================================== * SPACING SCALE * Consistent spacing throughout * ======================================== */ --spacing-xs: 0.25rem; /* 4px */ --spacing-sm: 0.5rem; /* 8px */ --spacing-md: 1rem; /* 16px */ --spacing-lg: 1.5rem; /* 24px */ --spacing-xl: 2rem; /* 32px */ --spacing-2xl: 3rem; /* 48px */ --spacing-3xl: 4rem; /* 64px */ /* ======================================== * BORDER RADIUS * Rounded corner styles * ======================================== */ --radius-sm: 0.25rem; /* 4px */ --radius-md: 0.5rem; /* 8px */ --radius-lg: 0.75rem; /* 12px */ --radius-xl: 1rem; /* 16px */ --radius-2xl: 1.5rem; /* 24px */ --radius-full: 9999px; /* Fully rounded */ /* ======================================== * SHADOWS * Elevation system * ======================================== */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* ======================================== * TRANSITIONS * Standard animation timing * ======================================== */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1); /* ======================================== * Z-INDEX SCALE * Layer management * ======================================== */ --z-base: 0; --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070;}/* ======================================== * UTILITY CLASSES * Common reusable patterns * ======================================== *//* Service color accent classes */.accent-boundary { border-left-color: var(--service-boundary-light); }.accent-instruction { border-left-color: var(--service-instruction-light); }.accent-validator { border-left-color: var(--service-validator-light); }.accent-pressure { border-left-color: var(--service-pressure-light); }.accent-metacognitive { border-left-color: var(--service-metacognitive-light); }.accent-deliberation { border-left-color: var(--service-deliberation-light); }/* Text color utilities */.text-boundary { color: var(--service-boundary-light); }.text-instruction { color: var(--service-instruction-light); }.text-validator { color: var(--service-validator-light); }.text-pressure { color: var(--service-pressure-light); }.text-metacognitive { color: var(--service-metacognitive-light); }.text-deliberation { color: var(--service-deliberation-light); }/* Background utilities */.bg-boundary { background-color: var(--service-boundary-light); }.bg-instruction { background-color: var(--service-instruction-light); }.bg-validator { background-color: var(--service-validator-light); }.bg-pressure { background-color: var(--service-pressure-light); }.bg-metacognitive { background-color: var(--service-metacognitive-light); }.bg-deliberation { background-color: var(--service-deliberation-light); }/* Gradient backgrounds */.bg-gradient-hero { background: var(--gradient-hero); }.bg-gradient-all-services { background: var(--gradient-all-services); }/* ======================================== * COMPONENT BASE STYLES * Foundational component patterns * ======================================== *//* Button base */.btn-base { font-weight: var(--font-semibold); padding: 0.75rem 2rem; border-radius: var(--radius-md); transition: all var(--transition-normal); box-shadow: var(--shadow-md);}.btn-base:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px);}/* Primary button */.btn-primary { background: var(--gradient-primary-btn); color: white;}/* Service-specific buttons */.btn-boundary { background: var(--gradient-btn-boundary); color: white; }.btn-instruction { background: var(--gradient-btn-instruction); color: white; }.btn-validator { background: var(--gradient-btn-validator); color: white; }.btn-pressure { background: var(--gradient-btn-pressure); color: white; }.btn-metacognitive { background: var(--gradient-btn-metacognitive); color: white; }.btn-deliberation { background: var(--gradient-btn-deliberation); color: white; }/* Card base */.card-base { background: var(--bg-primary); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); padding: 2rem; transition: all var(--transition-normal);}.card-interactive:hover { box-shadow: var(--shadow-xl); transform: translateY(-4px);}/* Service-specific cards (with left border accent) */.card-service { border-left: 4px solid transparent;}.card-service.boundary { border-left-color: var(--service-boundary-light); }.card-service.instruction { border-left-color: var(--service-instruction-light); }.card-service.validator { border-left-color: var(--service-validator-light); }.card-service.pressure { border-left-color: var(--service-pressure-light); }.card-service.metacognitive { border-left-color: var(--service-metacognitive-light); }.card-service.deliberation { border-left-color: var(--service-deliberation-light); }/* ======================================== * RESPONSIVE TYPOGRAPHY * Fluid type scale * ======================================== */.text-display-sm { font-size: clamp(2.5rem, 5vw, 3.5rem); font-family: var(--font-display); }.text-display-md { font-size: clamp(3rem, 6vw, 4.5rem); font-family: var(--font-display); }.text-display-lg { font-size: clamp(3.5rem, 8vw, 6rem); font-family: var(--font-display); }/* Apply Inter to headings */h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700;}/* Fine-tune letter spacing for Inter */h1 { letter-spacing: -0.025em; }h2 { letter-spacing: -0.02em; }h3 { letter-spacing: -0.015em; }/* ======================================== * ANIMATIONS & MICRO-INTERACTIONS * Scroll effects and hover states * ======================================== *//* Keyframes */@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); }}@keyframes fadeInScale { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); }}@keyframes slideInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); }}@keyframes slideInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); }}@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; }}/* Animation utility classes */.animate-fade-in { animation: fadeIn 0.6s ease-out;}.animate-fade-in-scale { animation: fadeInScale 0.5s ease-out;}.animate-slide-in-left { animation: slideInLeft 0.6s ease-out;}.animate-slide-in-right { animation: slideInRight 0.6s ease-out;}.animate-pulse { animation: pulse 2s ease-in-out infinite;}/* Staggered animation delays */.animate-delay-100 { animation-delay: 100ms; }.animate-delay-200 { animation-delay: 200ms; }.animate-delay-300 { animation-delay: 300ms; }.animate-delay-400 { animation-delay: 400ms; }.animate-delay-500 { animation-delay: 500ms; }/* Hover effects */.hover-lift { transition: transform var(--transition-normal), box-shadow var(--transition-normal);}.hover-lift:hover { transform: translateY(-4px);}.hover-scale { transition: transform var(--transition-normal);}.hover-scale:hover { transform: scale(1.05);}.hover-glow { transition: box-shadow var(--transition-normal);}.hover-glow:hover { box-shadow: 0 0 20px rgba(14, 165, 233, 0.3);}/* ======================================== * ACCESSIBILITY * Focus states and reduced motion * ======================================== *//* Enhanced focus indicators */*:focus-visible { outline: 3px solid var(--tractatus-core-end); outline-offset: 2px;}/* Respect user's motion preferences */@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }}/* ======================================== * LOADING STATES * Spinner and loading indicators * ======================================== *//* Loading spinner */.spinner { width: 40px; height: 40px; border: 4px solid var(--border-light); border-top-color: var(--tractatus-core-end); border-radius: 50%; animation: spin 0.8s linear infinite;}.spinner-sm { width: 20px; height: 20px; border-width: 2px;}.spinner-lg { width: 60px; height: 60px; border-width: 6px;}@keyframes spin { to { transform: rotate(360deg); }}/* Loading overlay */.loading-overlay { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 50;}.loading-overlay-dark { background: rgba(15, 23, 42, 0.9);}/* Skeleton loading */.skeleton { background: linear-gradient( 90deg, var(--bg-secondary) 0%, var(--bg-tertiary) 50%, var(--bg-secondary) 100% ); background-size: 200% 100%; animation: skeleton-loading 1.5s ease-in-out infinite; border-radius: 0.375rem;}@keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; }}.skeleton-text { height: 1rem; margin-bottom: 0.5rem;}.skeleton-heading { height: 2rem; width: 60%; margin-bottom: 1rem;}/* Loading dots */.loading-dots { display: inline-flex; gap: 0.5rem;}.loading-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--tractatus-core-end); animation: loading-dots 1.4s ease-in-out infinite;}.loading-dots span:nth-child(2) { animation-delay: 0.2s;}.loading-dots span:nth-child(3) { animation-delay: 0.4s;}@keyframes loading-dots { 0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); }}/* ======================================== * CSP-COMPLIANT UTILITY CLASSES * Common styles extracted from inline attributes * ======================================== *//* Text Colors */.text-tractatus-link { color: var(--tractatus-core-end);}.text-service-boundary { color: var(--service-boundary-light);}.text-service-instruction { color: var(--service-instruction-light);}.text-service-validator { color: var(--service-validator-light);}.text-service-pressure { color: var(--service-pressure-light);}.text-service-metacognitive { color: var(--service-metacognitive-light);}.text-service-deliberation { color: var(--service-deliberation-light);}/* Border Colors */.border-l-tractatus { border-left-color: var(--tractatus-core-end);}.border-l-service-boundary { border-left-color: var(--service-boundary-light);}.border-l-service-instruction { border-left-color: var(--service-instruction-light);}.border-l-service-validator { border-left-color: var(--service-validator-light);}.border-l-service-pressure { border-left-color: var(--service-pressure-light);}.border-l-service-metacognitive { border-left-color: var(--service-metacognitive-light);}.border-l-service-deliberation { border-left-color: var(--service-deliberation-light);}/* Gradient Backgrounds */.bg-gradient-tractatus { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 50%, #7e22ce 100%);}.bg-gradient-service-boundary { background: linear-gradient(135deg, #10b981 0%, #059669 100%);}.bg-gradient-service-instruction { background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);}.bg-gradient-service-validator { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);}.bg-gradient-service-pressure { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);}.bg-gradient-service-metacognitive { background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);}.bg-gradient-service-deliberation { background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);}.bg-gradient-cyan-blue { background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);}/* Tailwind Gradient Utilities (not in compiled tailwind.css) */.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); }.bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); }/* From colors */.from-blue-50 { --tw-gradient-from: #eff6ff; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(239,246,255,0)); }.from-blue-600 { --tw-gradient-from: #2563eb; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(37,99,235,0)); }.from-blue-900 { --tw-gradient-from: #1e3a8a; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(30,58,138,0)); }.from-emerald-500 { --tw-gradient-from: #10b981; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(16,185,129,0)); }.from-indigo-50 { --tw-gradient-from: #eef2ff; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(238,242,255,0)); }.from-indigo-500 { --tw-gradient-from: #6366f1; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(99,102,241,0)); }.from-indigo-600 { --tw-gradient-from: #4f46e5; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(79,70,229,0)); }.from-amber-50 { --tw-gradient-from: #fffbeb; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255,251,235,0)); }.from-amber-500 { --tw-gradient-from: #f59e0b; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(245,158,11,0)); }.from-purple-50 { --tw-gradient-from: #faf5ff; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(250,245,255,0)); }.from-purple-500 { --tw-gradient-from: #a855f7; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(168,85,247,0)); }.from-purple-600 { --tw-gradient-from: #9333ea; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(147,51,234,0)); }.from-rose-500 { --tw-gradient-from: #f43f5e; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(244,63,94,0)); }.from-teal-50 { --tw-gradient-from: #f0fdfa; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(240,253,250,0)); }.from-teal-500 { --tw-gradient-from: #14b8a6; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(20,184,166,0)); }.from-teal-600 { --tw-gradient-from: #0d9488; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(13,148,136,0)); }.from-teal-700 { --tw-gradient-from: #0f766e; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(15,118,110,0)); }.from-yellow-50 { --tw-gradient-from: #fefce8; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(254,252,232,0)); }.from-orange-50 { --tw-gradient-from: #fff7ed; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255,247,237,0)); }.from-gray-50 { --tw-gradient-from: #f9fafb; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(249,250,251,0)); }.from-gray-800 { --tw-gradient-from: #1f2937; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(31,41,55,0)); }.from-green-50 { --tw-gradient-from: #f0fdf4; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(240,253,244,0)); }.from-sky-500 { --tw-gradient-from: #0ea5e9; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(14,165,233,0)); }.from-pink-50 { --tw-gradient-from: #fdf2f8; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(253,242,248,0)); }.from-pink-500 { --tw-gradient-from: #ec4899; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(236,72,153,0)); }/* Via colors */.via-blue-50 { --tw-gradient-stops: var(--tw-gradient-from), #eff6ff, var(--tw-gradient-to, rgba(239,246,255,0)); }.via-blue-700 { --tw-gradient-stops: var(--tw-gradient-from), #1d4ed8, var(--tw-gradient-to, rgba(29,78,216,0)); }.via-teal-50 { --tw-gradient-stops: var(--tw-gradient-from), #f0fdfa, var(--tw-gradient-to, rgba(240,253,250,0)); }.via-teal-800 { --tw-gradient-stops: var(--tw-gradient-from), #115e59, var(--tw-gradient-to, rgba(17,94,89,0)); }/* To colors */.to-blue-50 { --tw-gradient-to: #eff6ff; }.to-blue-600 { --tw-gradient-to: #2563eb; }.to-blue-700 { --tw-gradient-to: #1d4ed8; }.to-purple-50 { --tw-gradient-to: #faf5ff; }.to-purple-600 { --tw-gradient-to: #9333ea; }.to-purple-700 { --tw-gradient-to: #7e22ce; }.to-purple-900 { --tw-gradient-to: #581c87; }.to-emerald-50 { --tw-gradient-to: #ecfdf5; }.to-emerald-600 { --tw-gradient-to: #059669; }.to-emerald-700 { --tw-gradient-to: #047857; }.to-emerald-800 { --tw-gradient-to: #065f46; }.to-indigo-50 { --tw-gradient-to: #eef2ff; }.to-indigo-600 { --tw-gradient-to: #4f46e5; }.to-amber-600 { --tw-gradient-to: #d97706; }.to-rose-600 { --tw-gradient-to: #e11d48; }.to-teal-50 { --tw-gradient-to: #f0fdfa; }.to-teal-600 { --tw-gradient-to: #0d9488; }.to-orange-50 { --tw-gradient-to: #fff7ed; }.to-cyan-600 { --tw-gradient-to: #0891b2; }.to-green-50 { --tw-gradient-to: #f0fdf4; }.to-red-50 { --tw-gradient-to: #fef2f2; }.to-violet-600 { --tw-gradient-to: #7c3aed; }.to-gray-100 { --tw-gradient-to: #f3f4f6; }.to-gray-900 { --tw-gradient-to: #111827; }.to-pink-600 { --tw-gradient-to: #db2777; }/* Tailwind Opacity Background Utilities (v3 shorthand not in compiled CSS) */.bg-white\/10 { background-color: rgba(255, 255, 255, 0.1); }.bg-white\/20 { background-color: rgba(255, 255, 255, 0.2); }.bg-white\/40 { background-color: rgba(255, 255, 255, 0.4); }.bg-blue-800\/50 { background-color: rgba(30, 64, 175, 0.5); }.bg-green-500\/20 { background-color: rgba(16, 185, 129, 0.2); }.border-blue-400\/30 { border-color: rgba(96, 165, 250, 0.3); }.border-green-300\/50 { border-color: rgba(110, 231, 183, 0.5); }.border-white\/40 { border-color: rgba(255, 255, 255, 0.4); }.backdrop-blur { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }/* Text Shadows */.text-shadow-sm { text-shadow: 0 1px 2px rgba(0,0,0,0.1);}.text-shadow-md { text-shadow: 0 2px 4px rgba(0,0,0,0.1);}/* Badge Backgrounds (with matching text colors) */.badge-boundary { color: #065f46; background-color: #d1fae5;}.badge-instruction { color: #3730a3; background-color: #e0e7ff;}.badge-validator { color: #581c87; background-color: #f3e8ff;}.badge-pressure { color: #92400e; background-color: #fef3c7;}.badge-metacognitive { color: #831843; background-color: #fce7f3;}.badge-deliberation { color: #134e4a; background-color: #ccfbf1;}/* Layout Utilities */.min-h-16 { min-height: 64px;}/* Auth Error Page */.auth-error-container { display: flex; align-items: center; justify-content: center; height: 100vh; font-family: system-ui, -apple-system, sans-serif;}.auth-error-content { text-align: center;}.auth-error-icon { width: 64px; height: 64px; margin: 0 auto 16px; color: #3B82F6;}.auth-error-title { font-size: 20px; font-weight: 600; color: #111827; margin-bottom: 8px;}.auth-error-message { color: #6B7280; margin-bottom: 16px;}.auth-error-redirect { color: #9CA3AF; font-size: 14px;}/* Coming Soon Overlay */.coming-soon-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.95); z-index: 9999; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(10px);}.coming-soon-card { background: white; padding: 3rem; border-radius: 1rem; max-width: 600px; text-align: center; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);}.coming-soon-title { font-size: 2.5rem; font-weight: bold; color: #1f2937; margin-bottom: 1rem;}.coming-soon-subtitle { font-size: 1.25rem; color: #6b7280; margin-bottom: 2rem;}.coming-soon-info-box { background: #eff6ff; border-left: 4px solid #3b82f6; padding: 1.5rem; margin-bottom: 2rem; text-align: left;}.coming-soon-info-title { color: #1e40af; margin-bottom: 0.5rem;}.coming-soon-info-text { color: #1e3a8a; font-size: 0.875rem; margin: 0;}.coming-soon-status { color: #6b7280; font-size: 0.875rem; margin-bottom: 1.5rem;}.coming-soon-button { display: inline-block; background: #3b82f6; color: white; padding: 0.75rem 2rem; border-radius: 0.5rem; text-decoration: none; font-weight: 600; transition: background 0.2s;}.coming-soon-button:hover { background: #2563eb;}.coming-soon-footer { margin-top: 1.5rem; font-size: 0.75rem; color: #9ca3af;}.coming-soon-footer a { color: #3b82f6; text-decoration: none;}.coming-soon-footer a:hover { text-decoration: underline;}/* ======================================== * SCROLL ANIMATIONS * Intersection Observer-based scroll animations * ======================================== *//* Scroll animation initial states (before visible) */.animate-on-scroll { transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);}/* Fade in animation */.animate-on-scroll[data-animation="fade-in"] { opacity: 0;}.animate-on-scroll[data-animation="fade-in"].is-visible { opacity: 1;}/* Slide up animation */.animate-on-scroll[data-animation="slide-up"] { opacity: 0; transform: translateY(2rem);}.animate-on-scroll[data-animation="slide-up"].is-visible { opacity: 1; transform: translateY(0);}/* Slide down animation */.animate-on-scroll[data-animation="slide-down"] { opacity: 0; transform: translateY(-2rem);}.animate-on-scroll[data-animation="slide-down"].is-visible { opacity: 1; transform: translateY(0);}/* Slide left animation */.animate-on-scroll[data-animation="slide-left"] { opacity: 0; transform: translateX(2rem);}.animate-on-scroll[data-animation="slide-left"].is-visible { opacity: 1; transform: translateX(0);}/* Slide right animation */.animate-on-scroll[data-animation="slide-right"] { opacity: 0; transform: translateX(-2rem);}.animate-on-scroll[data-animation="slide-right"].is-visible { opacity: 1; transform: translateX(0);}/* Scale in animation */.animate-on-scroll[data-animation="scale-in"] { opacity: 0; transform: scale(0.95);}.animate-on-scroll[data-animation="scale-in"].is-visible { opacity: 1; transform: scale(1);}/* Rotate in animation */.animate-on-scroll[data-animation="rotate-in"] { opacity: 0; transform: rotate(12deg) scale(0.95);}.animate-on-scroll[data-animation="rotate-in"].is-visible { opacity: 1; transform: rotate(0deg) scale(1);}/* Default animation if no data-animation specified */.animate-on-scroll:not([data-animation]) { opacity: 0; transform: translateY(2rem);}.animate-on-scroll:not([data-animation]).is-visible { opacity: 1; transform: translateY(0);}/* Respect user's motion preferences for scroll animations */@media (prefers-reduced-motion: reduce) { .animate-on-scroll { opacity: 1 !important; transform: none !important; transition: none !important; }}/* ======================================== * PAGE TRANSITIONS * Smooth fade transitions between pages * ======================================== */body { transition: opacity 0.3s ease-in-out;}body.page-fade-in { opacity: 1;}body.page-fade-out { opacity: 0;}/* Respect user's motion preferences for page transitions */@media (prefers-reduced-motion: reduce) { body { transition: none !important; }}/* ======================================== * DATA VISUALIZATIONS * Pressure chart and timeline components * ======================================== */.gauge-fill-path { transition: stroke 0.3s ease;}.timeline-event { transition: all 0.3s ease;}.timeline-event:hover { transform: scale(1.05);}@media (prefers-reduced-motion: reduce) { .gauge-fill-path, .timeline-event { transition: none !important; } .timeline-event:hover { transform: none !important; }}/* ======================================== * DARK MODE SUPPORT (Future) * Placeholder for dark mode implementation * ======================================== */@media (prefers-color-scheme: dark) { /* Will be implemented in Phase 3 */}/* ======================================== * PRINT STYLES * Optimize for PDF/print output * ======================================== */@media print { * { background: white !important; color: black !important; box-shadow: none !important; } a { text-decoration: underline; } .no-print { display: none !important; }}