/* ===== 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); } /* ===== BASE TYPOGRAPHY & GLOBAL STYLES ===== */ html { scroll-behavior: smooth; } body { font-family: 'Poppins', sans-serif; font-weight: 400; line-height: 1.6; overflow-x: hidden; } body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; opacity: 0.015; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); } h1, h2, h3, h4, h5, h6 { font-family: 'Poppins', sans-serif; font-weight: 700; } /* Gradient text animation */ .gradient-text { background: var(--gradient-brand-text); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: gradient-shift 8s ease infinite; } @keyframes gradient-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* ===== UTILITY CLASSES ===== */ /* Force white text on gradient-brand buttons/elements */ [style*="gradient-brand"] { color: #ffffff; } /* 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; padding-bottom: 0.1em; margin-bottom: -0.1em; } .t-gradient-brand-hero { background: var(--gradient-brand-hero); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; padding-bottom: 0.1em; margin-bottom: -0.1em; } .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); } .t-dropdown-item-active { color: var(--text-primary); font-weight: 500; border-left: 2px solid var(--brand-primary); } /* Theme toggle button */ .theme-toggle-btn { color: var(--text-secondary); transition: color 0.2s; } .theme-toggle-btn:hover { color: var(--text-primary); } /* Nav link hover underline — slides in from left */ [data-nav-link] { position: relative; } [data-nav-link]::after { content: ''; position: absolute; bottom: -6px; left: 0; width: 0; height: 2px; background: var(--gradient-brand); border-radius: 1px; pointer-events: none; transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1); } [data-nav-link]:hover::after { width: 100%; } /* Active nav link underline — always fully visible */ .nav-link-active::after { width: 100% !important; } /* 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 — theme-aware variants handled by JS in carousel */ /* Service pillar cards — always white text on dark overlay */ .service-tile h3, .service-tile li { color: #ffffff !important; } /* Focus ring — visible on keyboard navigation */ :focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; } /* Standardised button hover states */ /* Type 1: Primary CTA (gradient) */ .t-btn-primary { background: var(--gradient-brand); color: #ffffff; cursor: pointer; transition: opacity 0.2s, transform 0.2s; } .t-btn-primary:hover { opacity: 0.9; transform: translateY(-1px); } .t-btn-primary:active { transform: scale(0.98); } /* Type 2: Secondary (outline) */ .t-btn-secondary { background-color: transparent; color: var(--text-primary); border: 1px solid var(--border-subtle); cursor: pointer; transition: background-color 0.2s, border-color 0.2s; } .t-btn-secondary:hover { background-color: var(--bg-surface-alt); border-color: var(--border-strong); } .t-btn-secondary:active { transform: scale(0.98); } /* Type 3: Ghost (text only, subtle bg on hover) */ .t-btn-ghost { background-color: transparent; color: var(--text-secondary); cursor: pointer; transition: background-color 0.2s, color 0.2s; } .t-btn-ghost:hover { background-color: var(--brand-primary-10); color: var(--text-primary); } .t-btn-ghost:active { transform: scale(0.98); } /* ===== SHARED ACCESSIBILITY & ANIMATION ===== */ /* Skip link — visible on focus only */ .skip-link { position: absolute; top: -100%; left: 50%; transform: translateX(-50%); z-index: 9999; padding: 0.75rem 1.5rem; background: var(--gradient-brand); color: #fff; font-weight: 600; border-radius: 0 0 0.5rem 0.5rem; text-decoration: none; transition: top 0.2s; } .skip-link:focus { top: 0; } /* Scroll-reveal fade-up */ .reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.7s cubic-bezier(.22,1,.36,1), transform 0.7s cubic-bezier(.22,1,.36,1); } .reveal.revealed { opacity: 1; transform: translateY(0); } /* Stagger delays */ .stagger-1 { transition-delay: 0ms; } .stagger-2 { transition-delay: 100ms; } .stagger-3 { transition-delay: 200ms; } .stagger-4 { transition-delay: 300ms; } /* Hover lift for glass cards */ .hover-lift { transition: transform 0.25s cubic-bezier(.22,1,.36,1), box-shadow 0.25s ease; } .hover-lift:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(21,162,227,0.1); } /* Reduced motion — global overrides */ @media (prefers-reduced-motion: reduce) { .gradient-text, .gradient-text-hero { animation: none !important; } .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .hover-lift:hover { transform: none !important; } html { scroll-behavior: auto !important; } } /* 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; }