/* ===== LUCENTE THEME SYSTEM ===== */ /* Dark theme (default) — no class on */ /* Light theme — .light class on */ :root { /* Backgrounds */ --bg-page: #000000; --bg-surface: #111827; --bg-surface-alt: #1f2937; --bg-elevated: #0a0e1a; --bg-elevated-alt: #0d1220; --bg-overlay-97: rgba(10,14,26,0.97); --bg-overlay-95: rgba(17,24,39,0.95); --bg-overlay-60: rgba(17,24,39,0.6); --bg-glass: rgba(255,255,255,0.02); --bg-surface-60: rgba(17,24,39,0.6); --bg-surface-30: rgba(17,24,39,0.3); --bg-surface-40: rgba(17,24,39,0.4); --bg-surface-alt-70: rgba(31,41,55,0.7); /* Text */ --text-primary: #ffffff; --text-secondary: #d1d5db; --text-tertiary: #9ca3af; --text-faint: #6b7280; --text-inverted: #000000; --text-placeholder: #4b5563; /* Borders */ --border-default: #1f2937; --border-subtle: #374151; --border-faint: rgba(255,255,255,0.06); --border-strong: #4b5563; /* Brand */ --brand-primary: #15a2e3; --brand-primary-rgb: 21, 162, 227; --brand-navy: #103889; --brand-accent: #15a2e3; --brand-primary-hover: #1390cc; --brand-primary-5: rgba(21,162,227,0.05); --brand-primary-10: rgba(21,162,227,0.1); --brand-primary-15: rgba(21,162,227,0.15); --brand-primary-20: rgba(21,162,227,0.2); --brand-primary-25: rgba(21,162,227,0.25); /* Brand borders */ --brand-border-15: rgba(21,162,227,0.15); --brand-border-20: rgba(21,162,227,0.2); --brand-border-25: rgba(21,162,227,0.25); --brand-border-30: rgba(21,162,227,0.3); --brand-border-40: rgba(21,162,227,0.4); --brand-border-50: rgba(21,162,227,0.5); /* Status */ --status-success: #10b981; --status-success-bg: rgba(16,185,129,0.15); --status-success-border: rgba(16,185,129,0.3); --status-error: #ef4444; --status-error-bg: rgba(239,68,68,0.1); --status-error-border: rgba(239,68,68,0.2); --status-warning: #f59e0b; --status-warning-bg: rgba(245,158,11,0.15); --status-warning-border: rgba(245,158,11,0.3); /* Scrollbar */ --scrollbar-track: #111111; --scrollbar-thumb: #15a2e3; /* Hero overlays */ --hero-overlay-top: rgba(0,0,0,0.6); --hero-overlay-mid: rgba(0,0,0,0.7); --hero-overlay-bottom: rgba(0,0,0,0.9); /* Gradients */ --gradient-brand: linear-gradient(135deg, #103889, #15a2e3); --gradient-brand-hover: linear-gradient(135deg, #0d2d70, #1390cc); --gradient-brand-text: linear-gradient(135deg, #103889 0%, #15a2e3 50%, #103889 100%); --gradient-brand-hero: linear-gradient(135deg, #103889 0%, #15a2e3 100%); --gradient-divider: linear-gradient(to right, transparent, rgba(21,162,227,0.35), transparent); --gradient-surface-brand: linear-gradient(135deg, rgba(16,56,137,0.08) 0%, rgba(21,162,227,0.05) 100%); /* Shadows */ --shadow-brand: rgba(21,162,227,0.25); --shadow-dropdown: rgba(0,0,0,0.9); } .light { --bg-page: #f8f9fa; --bg-surface: #ffffff; --bg-surface-alt: #f3f4f6; --bg-elevated: #ffffff; --bg-elevated-alt: #f9fafb; --bg-overlay-97: rgba(255,255,255,0.97); --bg-overlay-95: rgba(255,255,255,0.95); --bg-overlay-60: rgba(107,114,128,0.1); --bg-glass: rgba(0,0,0,0.02); --bg-surface-60: rgba(255,255,255,0.6); --bg-surface-30: rgba(255,255,255,0.3); --bg-surface-40: rgba(255,255,255,0.4); --bg-surface-alt-70: rgba(243,244,246,0.7); --text-primary: #111827; --text-secondary: #4b5563; --text-tertiary: #6b7280; --text-faint: #9ca3af; --text-inverted: #ffffff; --text-placeholder: #9ca3af; --border-default: #e5e7eb; --border-subtle: #d1d5db; --border-faint: rgba(0,0,0,0.06); --border-strong: #9ca3af; --brand-primary: #15a2e3; --brand-primary-rgb: 21, 162, 227; --brand-accent: #15a2e3; --brand-primary-10: rgba(21,162,227,0.08); --brand-primary-15: rgba(21,162,227,0.12); --brand-primary-20: rgba(21,162,227,0.15); --brand-primary-25: rgba(21,162,227,0.2); --status-success: #059669; --status-success-bg: rgba(5,150,105,0.1); --status-success-border: rgba(5,150,105,0.2); --status-error: #dc2626; --status-error-bg: rgba(220,38,38,0.08); --status-error-border: rgba(220,38,38,0.15); --status-warning: #d97706; --status-warning-bg: rgba(217,119,6,0.1); --status-warning-border: rgba(217,119,6,0.2); --scrollbar-track: #e5e7eb; --scrollbar-thumb: #15a2e3; --hero-overlay-top: rgba(255,255,255,0.7); --hero-overlay-mid: rgba(255,255,255,0.8); --hero-overlay-bottom: rgba(255,255,255,0.93); --gradient-brand: linear-gradient(135deg, #103889, #15a2e3); --gradient-brand-hover: linear-gradient(135deg, #0d2d70, #1390cc); --gradient-brand-text: linear-gradient(135deg, #103889 0%, #15a2e3 50%, #103889 100%); --gradient-brand-hero: linear-gradient(135deg, #103889 0%, #15a2e3 100%); --gradient-divider: linear-gradient(to right, transparent, rgba(21,162,227,0.2), transparent); --gradient-surface-brand: linear-gradient(135deg, rgba(16,56,137,0.06) 0%, rgba(21,162,227,0.04) 100%); --shadow-brand: rgba(21,162,227,0.15); --shadow-dropdown: rgba(0,0,0,0.15); } /* ===== UTILITY CLASSES ===== */ /* Background */ .t-bg-page { background-color: var(--bg-page); } .t-bg-surface { background-color: var(--bg-surface); } .t-bg-surface-alt { background-color: var(--bg-surface-alt); } .t-bg-elevated { background-color: var(--bg-elevated); } .t-bg-elevated-alt { background-color: var(--bg-elevated-alt); } .t-bg-glass { background-color: var(--bg-glass); } .t-bg-surface-60 { background-color: var(--bg-surface-60); } .t-bg-surface-30 { background-color: var(--bg-surface-30); } .t-bg-surface-40 { background-color: var(--bg-surface-40); } .t-bg-surface-alt-70 { background-color: var(--bg-surface-alt-70); } .t-bg-overlay-97 { background-color: var(--bg-overlay-97); } .t-bg-overlay-95 { background-color: var(--bg-overlay-95); } .t-bg-overlay-60 { background-color: var(--bg-overlay-60); } .t-bg-brand { background-color: var(--brand-primary); } .t-bg-brand-5 { background-color: var(--brand-primary-5); } .t-bg-brand-10 { background-color: var(--brand-primary-10); } .t-bg-brand-15 { background-color: var(--brand-primary-15); } .t-bg-brand-20 { background-color: var(--brand-primary-20); } .t-bg-brand-25 { background-color: var(--brand-primary-25); } .t-bg-success { background-color: var(--status-success-bg); } .t-bg-error { background-color: var(--status-error-bg); } .t-bg-warning { background-color: var(--status-warning-bg); } /* Text */ .t-text-primary { color: var(--text-primary); } .t-text-secondary { color: var(--text-secondary); } .t-text-tertiary { color: var(--text-tertiary); } .t-text-faint { color: var(--text-faint); } .t-text-inverted { color: var(--text-inverted); } .t-text-brand { color: var(--brand-primary); } .t-text-accent { color: var(--brand-accent); } .t-text-success { color: var(--status-success); } .t-text-error { color: var(--status-error); } .t-text-warning { color: var(--status-warning); } /* Border */ .t-border-default { border-color: var(--border-default); } .t-border-subtle { border-color: var(--border-subtle); } .t-border-faint { border-color: var(--border-faint); } .t-border-strong { border-color: var(--border-strong); } .t-border-brand { border-color: var(--brand-primary); } .t-border-brand-15 { border-color: var(--brand-border-15); } .t-border-brand-20 { border-color: var(--brand-border-20); } .t-border-brand-25 { border-color: var(--brand-border-25); } .t-border-brand-30 { border-color: var(--brand-border-30); } .t-border-brand-40 { border-color: var(--brand-border-40); } .t-border-brand-50 { border-color: var(--brand-border-50); } .t-border-success { border-color: var(--status-success-border); } .t-border-error { border-color: var(--status-error-border); } .t-border-warning { border-color: var(--status-warning-border); } /* Gradient */ .t-gradient-brand { background: var(--gradient-brand); } .t-gradient-brand-hover { background: var(--gradient-brand-hover); } .t-gradient-brand-text { background: var(--gradient-brand-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .t-gradient-brand-hero { background: var(--gradient-brand-hero); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .t-gradient-divider { background: var(--gradient-divider); } .t-gradient-surface { background: var(--gradient-surface-brand); } /* Hover */ .t-hover-text-primary:hover { color: var(--text-primary); } .t-hover-text-secondary:hover { color: var(--text-secondary); } .t-hover-text-brand:hover { color: var(--brand-primary); } .t-hover-text-accent:hover { color: var(--brand-accent); } .t-hover-bg-surface:hover { background-color: var(--bg-surface); } .t-hover-bg-surface-alt:hover { background-color: var(--bg-surface-alt); } .t-hover-bg-brand-10:hover { background-color: var(--brand-primary-10); } .t-hover-bg-brand-20:hover { background-color: var(--brand-primary-20); } .t-hover-bg-brand-hover:hover { background-color: var(--brand-primary-hover); } .t-hover-border-strong:hover { border-color: var(--border-strong); } .t-hover-border-brand:hover { border-color: var(--brand-primary); } .t-hover-border-brand-40:hover { border-color: var(--brand-border-40); } .t-hover-border-brand-50:hover { border-color: var(--brand-border-50); } /* Group hover */ .group:hover .t-group-hover-text-primary { color: var(--text-primary); } .group:hover .t-group-hover-text-accent { color: var(--brand-accent); } .group:hover .t-group-hover-bg-brand-20 { background-color: var(--brand-primary-20); } .group:hover .t-group-hover-border-brand-40 { border-color: var(--brand-border-40); } /* Placeholder */ .t-placeholder::placeholder { color: var(--text-placeholder); } /* ===== COMPONENT STYLES ===== */ /* Dropdown items (replaces onmouseover/onmouseout in nav.js) */ .t-dropdown-item { display: block; padding: 8px 16px; font-size: 0.875rem; color: var(--text-secondary); text-decoration: none; transition: background-color 0.15s, color 0.15s; } .t-dropdown-item:hover { background-color: var(--brand-primary-15); color: var(--text-primary); } /* Theme toggle button */ .theme-toggle-btn { color: var(--text-secondary); transition: color 0.2s; } .theme-toggle-btn:hover { color: var(--text-primary); } /* Active nav link underline (replaces Tailwind after:bg-[#15a2e3]) */ .nav-link-active::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 100%; height: 2px; background-color: var(--brand-primary); } /* Glass morphism — theme-aware */ .glass { background-color: var(--bg-glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* Solid nav bar — opaque in both themes */ .nav-solid { background-color: var(--bg-elevated); border-bottom: 1px solid var(--border-default); } .light .nav-solid { background-color: #ffffff; } /* Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--scrollbar-track); } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; } /* Noise overlay — reduce in light mode */ .light body::before { opacity: 0.008; } /* Partner logos — give dark-background logos a white pill in light mode */ .light .partner-logo-wrap img { background-color: #ffffff; border-radius: 8px; padding: 4px 8px; } /* Service pillar cards — lighter overlay in light mode */ .light .service-pillar-overlay { background: linear-gradient(to top, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.75) 50%, rgba(255,255,255,0.3) 100%) !important; } .light .service-pillar-overlay h3, .light .service-pillar-overlay li { color: var(--text-primary); } /* Service pillar hover overlay — use brand in light mode too */ .light .service-pillar-hover { background: linear-gradient(to top, var(--brand-primary) 0%, rgba(21,162,227,0.85) 50%, rgba(21,162,227,0.6) 100%) !important; } .light .service-pillar-hover h3 { color: #ffffff; } .light .service-pillar-hover li { color: rgba(255,255,255,0.75); } /* Standardised button hover states */ /* Type 1: Primary CTA (gradient) */ .t-btn-primary { background: var(--gradient-brand); color: #ffffff; transition: opacity 0.2s, transform 0.2s; } .t-btn-primary:hover { opacity: 0.9; transform: translateY(-1px); } /* Type 2: Secondary (outline) */ .t-btn-secondary { background-color: transparent; color: var(--text-primary); border: 1px solid var(--border-subtle); transition: background-color 0.2s, border-color 0.2s; } .t-btn-secondary:hover { background-color: var(--bg-surface-alt); border-color: var(--border-strong); } /* Type 3: Ghost (text only, subtle bg on hover) */ .t-btn-ghost { background-color: transparent; color: var(--text-secondary); transition: background-color 0.2s, color 0.2s; } .t-btn-ghost:hover { background-color: var(--brand-primary-10); color: var(--text-primary); } /* Theme transition — only on toggle, not on page load */ html.theme-transitioning, html.theme-transitioning * { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important; }