From b670e49d79ee3e1c33d4a296b71ebcb62091a555 Mon Sep 17 00:00:00 2001 From: TheFlow Date: Fri, 24 Oct 2025 12:41:53 +1300 Subject: [PATCH] fix(css): correct justify-center syntax error in loading overlay MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fixed invalid CSS property 'justify-center;' on line 486 of tractatus-theme.css. Changed to correct CSS property: 'justify-content: center;' This was causing Firefox console errors: "Unknown property 'justify-center;'. Declaration dropped." The error was in the .loading-overlay class which is used for loading states across admin pages. The invalid property prevented proper centering of loading spinners on mobile devices. Also regenerated minified CSS (39.4% size reduction: 24KB → 15KB). 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- public/css/tractatus-theme.css | 2 +- public/css/tractatus-theme.min.css | 780 +---------------------------- 2 files changed, 2 insertions(+), 780 deletions(-) diff --git a/public/css/tractatus-theme.css b/public/css/tractatus-theme.css index 18b66b7d..60b31b9e 100644 --- a/public/css/tractatus-theme.css +++ b/public/css/tractatus-theme.css @@ -483,7 +483,7 @@ h3 { letter-spacing: -0.015em; } backdrop-filter: blur(2px); display: flex; align-items: center; - justify-center; + justify-content: center; z-index: 50; } diff --git a/public/css/tractatus-theme.min.css b/public/css/tractatus-theme.min.css index 26978f9b..a2e9ef06 100644 --- a/public/css/tractatus-theme.min.css +++ b/public/css/tractatus-theme.min.css @@ -1,779 +1 @@ -/** - * 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; - --tractatus-core-mid: #448aff; - --tractatus-core-end: #0891b2; - /* ======================================== - * SIX GOVERNANCE SERVICES - * Hexagonal node colors mapped to framework components - * ======================================== */ - --service-boundary-light: #10b981; - --service-boundary-dark: #059669; - --service-instruction-light: #6366f1; - --service-instruction-dark: #4f46e5; - --service-validator-light: #8b5cf6; - --service-validator-dark: #7c3aed; - --service-pressure-light: #f59e0b; - --service-pressure-dark: #d97706; - --service-metacognitive-light: #ec4899; - --service-metacognitive-dark: #db2777; - --service-deliberation-light: #14b8a6; - --service-deliberation-dark: #0f766e; - /* ======================================== - * UI NEUTRALS - Slate-based - * Technical, professional feel - * ======================================== */ - --bg-primary: #ffffff; - --bg-secondary: #f8fafc; - --bg-tertiary: #f1f5f9; - --text-primary: #0f172a; - --text-secondary: #475569; - --text-tertiary: #94a3b8; - --border-light: #e2e8f0; - --border-medium: #cbd5e1; - --border-dark: #94a3b8; - --bg-primary-dark: #0f172a; - --bg-secondary-dark: #1e293b; - --text-primary-dark: #f8fafc; - /* ======================================== - * SEMANTIC COLORS - * State and feedback colors - * ======================================== */ - --success: #10b981; - --success-light: #d1fae5; - --success-dark: #065f46; - --warning: #f59e0b; - --warning-light: #fef3c7; - --warning-dark: #92400e; - --error: #ef4444; - --error-light: #fee2e2; - --error-dark: #991b1b; - --info: #0ea5e9; - --info-light: #e0f2fe; - --info-dark: #075985; - /* ======================================== - * TYPOGRAPHY SYSTEM - * Font families and weights - * ======================================== */ - --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-light: 300; - --font-normal: 400; - --font-medium: 500; - --font-semibold: 600; - --font-bold: 700; - --font-extrabold: 800; - /* ======================================== - * GRADIENTS - * Pre-defined gradient combinations - * ======================================== */ - --gradient-hero: linear-gradient(135deg, #64ffda 0%, #448aff 50%, #0ea5e9 100%); - --gradient-primary-btn: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%); - --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%); - --gradient-all-services: linear-gradient(90deg, - #10b981 0%, - #6366f1 20%, - #8b5cf6 40%, - #f59e0b 60%, - #ec4899 80%, - #14b8a6 100% - ); - /* ======================================== - * SPACING SCALE - * Consistent spacing throughout - * ======================================== */ - --spacing-xs: 0.25rem; - --spacing-sm: 0.5rem; - --spacing-md: 1rem; - --spacing-lg: 1.5rem; - --spacing-xl: 2rem; - --spacing-2xl: 3rem; - --spacing-3xl: 4rem; - /* ======================================== - * BORDER RADIUS - * Rounded corner styles - * ======================================== */ - --radius-sm: 0.25rem; - --radius-md: 0.5rem; - --radius-lg: 0.75rem; - --radius-xl: 1rem; - --radius-2xl: 1.5rem; - --radius-full: 9999px; - /* ======================================== - * 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 - * ======================================== */ -.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-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); } -.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); } -.bg-gradient-hero { background: var(--gradient-hero); } -.bg-gradient-all-services { background: var(--gradient-all-services); } -/* ======================================== - * COMPONENT BASE STYLES - * Foundational component patterns - * ======================================== */ -.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); -} -.btn-primary { - background: var(--gradient-primary-btn); - color: white; -} -.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 { - 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); -} -.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); } -h1, h2, h3, h4, h5, h6 { - font-family: var(--font-display); - font-weight: 700; -} -h1 { letter-spacing: -0.025em; } -h2 { letter-spacing: -0.02em; } -h3 { letter-spacing: -0.015em; } -/* ======================================== - * ANIMATIONS & MICRO-INTERACTIONS - * Scroll effects and hover states - * ======================================== */ -@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; - } -} -.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; -} -.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-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 - * ======================================== */ -*:focus-visible { - outline: 3px solid var(--tractatus-core-end); - outline-offset: 2px; -} -@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 - * ======================================== */ -.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 { - position: absolute; - inset: 0; - background: rgba(255, 255, 255, 0.9); - backdrop-filter: blur(2px); - display: flex; - align-items: center; - justify-center; - z-index: 50; -} -.loading-overlay-dark { - background: rgba(15, 23, 42, 0.9); -} -.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 { - 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-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-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); -} -.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%); -} -.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-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; -} -.min-h-16 { - min-height: 64px; -} -.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 { - 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 - * ======================================== */ -.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); -} -.animate-on-scroll[data-animation="fade-in"] { - opacity: 0; -} -.animate-on-scroll[data-animation="fade-in"].is-visible { - opacity: 1; -} -.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); -} -.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); -} -.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); -} -.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); -} -.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); -} -.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); -} -.animate-on-scroll:not([data-animation]) { - opacity: 0; - transform: translateY(2rem); -} -.animate-on-scroll:not([data-animation]).is-visible { - opacity: 1; - transform: translateY(0); -} -@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; -} -@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) { -} -/* ======================================== - * 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; - } -} +:root{--tractatus-core-start:#64ffda;--tractatus-core-mid:#448aff;--tractatus-core-end:#0891b2;--service-boundary-light:#10b981;--service-boundary-dark:#059669;--service-instruction-light:#6366f1;--service-instruction-dark:#4f46e5;--service-validator-light:#8b5cf6;--service-validator-dark:#7c3aed;--service-pressure-light:#f59e0b;--service-pressure-dark:#d97706;--service-metacognitive-light:#ec4899;--service-metacognitive-dark:#db2777;--service-deliberation-light:#14b8a6;--service-deliberation-dark:#0f766e;--bg-primary:#ffffff;--bg-secondary:#f8fafc;--bg-tertiary:#f1f5f9;--text-primary:#0f172a;--text-secondary:#475569;--text-tertiary:#94a3b8;--border-light:#e2e8f0;--border-medium:#cbd5e1;--border-dark:#94a3b8;--bg-primary-dark:#0f172a;--bg-secondary-dark:#1e293b;--text-primary-dark:#f8fafc;--success:#10b981;--success-light:#d1fae5;--success-dark:#065f46;--warning:#f59e0b;--warning-light:#fef3c7;--warning-dark:#92400e;--error:#ef4444;--error-light:#fee2e2;--error-dark:#991b1b;--info:#0ea5e9;--info-light:#e0f2fe;--info-dark:#075985;--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-light:300;--font-normal:400;--font-medium:500;--font-semibold:600;--font-bold:700;--font-extrabold:800;--gradient-hero:linear-gradient(135deg,#64ffda 0%,#448aff 50%,#0ea5e9 100%);--gradient-primary-btn:linear-gradient(135deg,#0ea5e9 0%,#0284c7 100%);--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%);--gradient-all-services:linear-gradient(90deg,#10b981 0%,#6366f1 20%,#8b5cf6 40%,#f59e0b 60%,#ec4899 80%,#14b8a6 100% );--spacing-xs:0.25rem;--spacing-sm:0.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-2xl:3rem;--spacing-3xl:4rem;--radius-sm:0.25rem;--radius-md:0.5rem;--radius-lg:0.75rem;--radius-xl:1rem;--radius-2xl:1.5rem;--radius-full:9999px;--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);--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-base:0;--z-dropdown:1000;--z-sticky:1020;--z-fixed:1030;--z-modal-backdrop:1040;--z-modal:1050;--z-popover:1060;--z-tooltip:1070}.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-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)}.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)}.bg-gradient-hero{background:var(--gradient-hero)}.bg-gradient-all-services{background:var(--gradient-all-services)}.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)}.btn-primary{background:var(--gradient-primary-btn);color:white}.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{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)}.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)}.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)}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:700}h1{letter-spacing:-0.025em}h2{letter-spacing:-0.02em}h3{letter-spacing:-0.015em}@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}}.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}.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-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)}*:focus-visible{outline:3px solid var(--tractatus-core-end);outline-offset:2px}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}}.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{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{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{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)}}.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-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)}.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%)}.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-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}.min-h-16{min-height:64px}.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{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}.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)}.animate-on-scroll[data-animation="fade-in"]{opacity:0}.animate-on-scroll[data-animation="fade-in"].is-visible{opacity:1}.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)}.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)}.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)}.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)}.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)}.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)}.animate-on-scroll:not([data-animation]){opacity:0;transform:translateY(2rem)}.animate-on-scroll:not([data-animation]).is-visible{opacity:1;transform:translateY(0)}@media (prefers-reduced-motion:reduce){.animate-on-scroll{opacity:1 !important;transform:none !important;transition:none !important}}body{transition:opacity 0.3s ease-in-out}body.page-fade-in{opacity:1}body.page-fade-out{opacity:0}@media (prefers-reduced-motion:reduce){body{transition:none !important}}.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}}@media (prefers-color-scheme:dark){}@media print{*{background:white !important;color:black !important;box-shadow:none !important}a{text-decoration:underline}.no-print{display:none !important}} \ No newline at end of file