diff --git a/public/about.html b/public/about.html index 6adc6212..feda28dd 100644 --- a/public/about.html +++ b/public/about.html @@ -248,6 +248,9 @@ + + + diff --git a/public/architecture.html b/public/architecture.html index 157e1667..d6575b90 100644 --- a/public/architecture.html +++ b/public/architecture.html @@ -519,6 +519,9 @@ + + + diff --git a/public/css/tractatus-theme.css b/public/css/tractatus-theme.css index 535f12bd..e33a9917 100644 --- a/public/css/tractatus-theme.css +++ b/public/css/tractatus-theme.css @@ -929,6 +929,29 @@ h3 { letter-spacing: -0.015em; } } } +/* ======================================== + * 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; + } +} + /* ======================================== * DARK MODE SUPPORT (Future) * Placeholder for dark mode implementation diff --git a/public/css/tractatus-theme.min.css b/public/css/tractatus-theme.min.css index da4990f0..dba75731 100644 --- a/public/css/tractatus-theme.min.css +++ b/public/css/tractatus-theme.min.css @@ -1 +1,757 @@ -: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-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,#64ffda 0%,#448aff 50%,#0ea5e9 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}@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 +/** + * 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; + } +} +/* ======================================== + * 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; + } +} diff --git a/public/implementer.html b/public/implementer.html index 9c27ab2f..68bb84d3 100644 --- a/public/implementer.html +++ b/public/implementer.html @@ -747,6 +747,9 @@ if (pressure.level === 'CRITICAL') { + + + diff --git a/public/index.html b/public/index.html index ee59c4d3..9f9f4ab1 100644 --- a/public/index.html +++ b/public/index.html @@ -398,6 +398,9 @@ Additional case studies and research findings documented in technical papers + + + diff --git a/public/js/page-transitions.js b/public/js/page-transitions.js new file mode 100644 index 00000000..2b26743d --- /dev/null +++ b/public/js/page-transitions.js @@ -0,0 +1,78 @@ +/** + * Page Transitions + * Tractatus Framework - Phase 3: Page Transitions + * + * Provides smooth fade transitions between pages for better UX + */ + +class PageTransitions { + constructor() { + this.transitionDuration = 300; // milliseconds + this.init(); + } + + init() { + // Add fade-in class to body on page load + document.body.classList.add('page-fade-in'); + + // Attach click handlers to internal links + this.attachLinkHandlers(); + + console.log('[PageTransitions] Initialized'); + } + + attachLinkHandlers() { + // Get all internal links (href starts with / or is relative) + const links = document.querySelectorAll('a[href^="/"], a[href^="./"], a[href^="../"]'); + + links.forEach(link => { + // Skip if link has target="_blank" or download attribute + if (link.getAttribute('target') === '_blank' || link.hasAttribute('download')) { + return; + } + + link.addEventListener('click', (e) => { + // Allow Ctrl/Cmd+click to open in new tab + if (e.ctrlKey || e.metaKey || e.shiftKey) { + return; + } + + // Skip if link has hash (same-page navigation) + const href = link.getAttribute('href'); + if (href && href.startsWith('#')) { + return; + } + + e.preventDefault(); + this.transitionToPage(link.href); + }); + }); + + console.log(`[PageTransitions] Attached handlers to ${links.length} links`); + } + + transitionToPage(url) { + // Remove fade-in, add fade-out + document.body.classList.remove('page-fade-in'); + document.body.classList.add('page-fade-out'); + + // Navigate after fade-out completes + setTimeout(() => { + window.location.href = url; + }, this.transitionDuration); + } +} + +// Initialize on DOM ready +if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', () => { + new PageTransitions(); + }); +} else { + new PageTransitions(); +} + +// Export for module systems +if (typeof module !== 'undefined' && module.exports) { + module.exports = PageTransitions; +} diff --git a/public/leader.html b/public/leader.html index 3bba3a16..4234b66a 100644 --- a/public/leader.html +++ b/public/leader.html @@ -600,6 +600,9 @@ + + + diff --git a/public/researcher.html b/public/researcher.html index 68db939c..035b1e8b 100644 --- a/public/researcher.html +++ b/public/researcher.html @@ -515,6 +515,9 @@ + + +