/** * Modern Theme — Tiivi/Aika * Supports three theme modes: * light – Standard Bootstrap light + pattern background * dark – Standard Bootstrap dark + pattern background * futuristic – Dark neon glassmorphism + Three.js + pattern background * * Futuristic mode is activated via data-theme-style="futuristic" on . */ /* ============================================================= Base Design Tokens — All Themes ============================================================= */ :root { /* Spacing */ --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --spacing-2xl: 3rem; /* Border Radius */ --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --card-radius: 1rem; /* Neutral Grays */ --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151; --gray-800: #1f2937; --gray-900: #111827; /* Transitions */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1); } /* ============================================================= Base Body — All Themes ============================================================= */ body { font-family: 'Poppins', 'Inter', 'Segoe UI', system-ui, sans-serif; font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Three.js canvas — always positioned, hidden unless futuristic */ #bg-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -3; pointer-events: none; display: none; } /* ============================================================= Base Component Enhancements — All Themes ============================================================= */ .card { border-radius: var(--card-radius); transition: transform var(--transition-base), box-shadow var(--transition-base); } .card:hover { transform: translateY(-2px); } .btn { border-radius: var(--radius-md); font-weight: 600; padding: 0.5rem 1rem; transition: all var(--transition-base); } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn-sm { padding: 0.375rem 0.75rem; font-size: 0.875rem; } .form-control, .form-select { border-radius: var(--radius-md); transition: all var(--transition-fast); padding: 0.625rem 0.875rem; } .badge { border-radius: var(--radius-sm); font-weight: 500; padding: 0.375rem 0.625rem; font-size: 0.75rem; } .alert { border-radius: var(--radius-lg); padding: 1rem 1.25rem; } .modal-content { border-radius: var(--radius-xl); } .dropdown-menu { border-radius: var(--radius-lg); padding: 0.5rem; margin-top: 0.5rem; } .dropdown-item { border-radius: var(--radius-md); padding: 0.625rem 1rem; transition: all var(--transition-fast); margin-bottom: 0.125rem; } .accordion-item { margin-bottom: var(--spacing-sm); border-radius: var(--radius-lg); overflow: hidden; } .accordion-button { border-radius: var(--radius-lg); font-weight: 500; padding: 1rem 1.25rem; } .table thead th { font-weight: 600; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; padding: 1rem 0.75rem; } /* Page Transition */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .page-content { animation: fadeIn 0.4s ease-out; } /* Skeleton Loader */ .skeleton { background: linear-gradient(90deg, rgba(128,128,128,0.1) 25%, rgba(128,128,128,0.2) 50%, rgba(128,128,128,0.1) 75%); background-size: 200% 100%; animation: skeleton-loading 1.5s ease-in-out infinite; border-radius: var(--radius-md); } @keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Text gradient utility */ .text-gradient { background: linear-gradient(135deg, #00d4ff 0%, #b347ea 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ============================================================= ███████ ██ ██ ████████ ██ ██ ██████ ██ ███████ ████████ ██ ██████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ █████ ██ ██ ██ ██ ██ ██████ ██ ███████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██████ ██ ██████ ██ ██ ██ ███████ ██ ██ ██████ All rules below are scoped to [data-theme-style="futuristic"] and only apply when the user chooses the Futuristic theme. ============================================================= */ /* --- Design Tokens --- */ [data-theme-style="futuristic"] { /* Neon Palette */ --neon-blue: #00d4ff; --neon-purple: #b347ea; --neon-pink: #ff2d7c; --neon-green: #00ff88; --neon-orange: #ff6b35; --neon-cyan: #00e5ff; --neon-gold: #ffd700; /* Semantic Aliases */ --primary-color: #00d4ff; --primary-hover: #00b8e6; --secondary-color: #b347ea; --success-color: #00ff88; --warning-color: #ff6b35; --danger-color: #ff2d7c; --info-color: #00e5ff; /* Backgrounds */ --bg-primary: #06060f; --bg-secondary: #0d0d1a; --bg-card: rgba(14, 14, 28, 0.85); --bg-card-hover: rgba(20, 20, 40, 0.95); --glass-border: 1px solid rgba(255, 255, 255, 0.06); --glass-blur: blur(16px); /* Glow Shadows */ --glow-blue: 0 0 20px rgba(0, 212, 255, 0.25); --glow-purple: 0 0 20px rgba(179, 71, 234, 0.25); --glow-pink: 0 0 20px rgba(255, 45, 124, 0.25); --glow-green: 0 0 20px rgba(0, 255, 136, 0.25); --glow-orange: 0 0 20px rgba(255, 107, 53, 0.25); /* Text */ --text-primary: #e4e8f0; --text-secondary: #6b7a90; --text-muted: #4a5568; /* Gradients */ --primary-gradient: linear-gradient(135deg, #00d4ff 0%, #b347ea 100%); --success-gradient: linear-gradient(135deg, #00ff88 0%, #00b894 100%); --warning-gradient: linear-gradient(135deg, #ff6b35 0%, #ff2d7c 100%); --info-gradient: linear-gradient(135deg, #00d4ff 0%, #00e5ff 100%); --danger-gradient: linear-gradient(135deg, #ff2d7c 0%, #ff6b35 100%); /* Shadows */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3); } /* --- Scanline overlay --- */ [data-theme-style="futuristic"] body::after { content: ''; position: fixed; inset: 0; z-index: -1; background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.03) 2px, rgba(0, 0, 0, 0.03) 4px); pointer-events: none; } /* --- Three.js canvas visible --- */ [data-theme-style="futuristic"] #bg-canvas { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -3; pointer-events: none; } /* --- Body color --- */ [data-theme-style="futuristic"] body { color: var(--text-primary); } /* ============================================================= Futuristic: Cards — Glassmorphism ============================================================= */ [data-theme-style="futuristic"] .card { background: var(--bg-card); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: var(--glass-border); color: var(--text-primary); box-shadow: var(--shadow-md); } [data-theme-style="futuristic"] .card:hover { box-shadow: var(--shadow-lg); } [data-theme-style="futuristic"] .card-header { border-radius: var(--card-radius) var(--card-radius) 0 0 !important; border-bottom: 1px solid rgba(0, 212, 255, 0.1); background: rgba(0, 212, 255, 0.04); font-weight: 600; color: var(--text-primary); } /* ============================================================= Futuristic: Buttons — Neon Outlined ============================================================= */ [data-theme-style="futuristic"] .btn-primary { background: linear-gradient(135deg, rgba(0, 212, 255, 0.15) 0%, rgba(179, 71, 234, 0.15) 100%); border: 1px solid rgba(0, 212, 255, 0.3); color: var(--neon-blue); box-shadow: 0 0 10px rgba(0, 212, 255, 0.1); } [data-theme-style="futuristic"] .btn-primary:hover { background: linear-gradient(135deg, rgba(0, 212, 255, 0.25) 0%, rgba(179, 71, 234, 0.25) 100%); box-shadow: 0 0 20px rgba(0, 212, 255, 0.25); color: #fff; border-color: var(--neon-blue); } [data-theme-style="futuristic"] .btn-success { background: rgba(0, 255, 136, 0.12); border: 1px solid rgba(0, 255, 136, 0.25); color: var(--neon-green); } [data-theme-style="futuristic"] .btn-success:hover { background: rgba(0, 255, 136, 0.22); box-shadow: var(--glow-green); color: #fff; border-color: var(--neon-green); } [data-theme-style="futuristic"] .btn-danger { background: rgba(255, 45, 124, 0.12); border: 1px solid rgba(255, 45, 124, 0.25); color: var(--neon-pink); } [data-theme-style="futuristic"] .btn-danger:hover { background: rgba(255, 45, 124, 0.22); box-shadow: var(--glow-pink); color: #fff; border-color: var(--neon-pink); } [data-theme-style="futuristic"] .btn-warning { background: rgba(255, 107, 53, 0.12); border: 1px solid rgba(255, 107, 53, 0.25); color: var(--neon-orange); } [data-theme-style="futuristic"] .btn-warning:hover { background: rgba(255, 107, 53, 0.22); box-shadow: var(--glow-orange); color: #fff; border-color: var(--neon-orange); } [data-theme-style="futuristic"] .btn-info { background: rgba(0, 212, 255, 0.1); border: 1px solid rgba(0, 229, 255, 0.25); color: var(--neon-cyan); } [data-theme-style="futuristic"] .btn-info:hover { background: rgba(0, 212, 255, 0.2); box-shadow: 0 0 15px rgba(0, 229, 255, 0.2); color: #fff; border-color: var(--neon-cyan); } [data-theme-style="futuristic"] .btn-secondary { background: rgba(107, 122, 144, 0.12); border: 1px solid rgba(107, 122, 144, 0.25); color: var(--text-secondary); } [data-theme-style="futuristic"] .btn-secondary:hover { background: rgba(107, 122, 144, 0.22); color: var(--text-primary); border-color: var(--text-secondary); } [data-theme-style="futuristic"] .btn-outline-primary { color: var(--neon-blue); border: 1px solid rgba(0, 212, 255, 0.25); background: transparent; } [data-theme-style="futuristic"] .btn-outline-primary:hover { background: rgba(0, 212, 255, 0.1); border-color: var(--neon-blue); color: #fff; box-shadow: 0 0 15px rgba(0, 212, 255, 0.15); } [data-theme-style="futuristic"] .btn-outline-secondary { color: var(--text-secondary); border: 1px solid rgba(255, 255, 255, 0.08); background: transparent; } [data-theme-style="futuristic"] .btn-outline-secondary:hover { background: rgba(0, 212, 255, 0.08); border-color: rgba(0, 212, 255, 0.2); color: var(--neon-blue); box-shadow: 0 0 10px rgba(0, 212, 255, 0.08); } [data-theme-style="futuristic"] .btn-outline-danger { color: var(--neon-pink); border: 1px solid rgba(255, 45, 124, 0.2); background: transparent; } [data-theme-style="futuristic"] .btn-outline-danger:hover { background: rgba(255, 45, 124, 0.1); border-color: var(--neon-pink); color: #fff; box-shadow: var(--glow-pink); } [data-theme-style="futuristic"] .btn-outline-info { color: var(--neon-cyan); border: 1px solid rgba(0, 229, 255, 0.2); background: transparent; } [data-theme-style="futuristic"] .btn-outline-info:hover { background: rgba(0, 229, 255, 0.1); border-color: var(--neon-cyan); color: #fff; } /* ============================================================= Futuristic: Form Controls — Dark Neon ============================================================= */ [data-theme-style="futuristic"] .form-control, [data-theme-style="futuristic"] .form-select { border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(14, 14, 28, 0.6); color: var(--text-primary); } [data-theme-style="futuristic"] .form-control:focus, [data-theme-style="futuristic"] .form-select:focus { border-color: var(--neon-blue); box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.15); background: rgba(14, 14, 28, 0.8); color: var(--text-primary); } [data-theme-style="futuristic"] .form-control::placeholder { color: var(--text-muted); } [data-theme-style="futuristic"] .form-floating > .form-control, [data-theme-style="futuristic"] .form-floating > .form-select { background: rgba(14, 14, 28, 0.6); border-color: rgba(255, 255, 255, 0.08); color: var(--text-primary); } [data-theme-style="futuristic"] .form-floating > label { color: var(--text-secondary); } [data-theme-style="futuristic"] .form-check-input { background-color: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); } [data-theme-style="futuristic"] .form-check-input:checked { background-color: var(--neon-blue); border-color: var(--neon-blue); box-shadow: 0 0 8px rgba(0, 212, 255, 0.3); } [data-theme-style="futuristic"] .form-check-label { color: var(--text-primary); } [data-theme-style="futuristic"] .form-text { color: var(--text-secondary); } /* ============================================================= Futuristic: Tables — Dark Neon ============================================================= */ [data-theme-style="futuristic"] .table { color: var(--text-primary); --bs-table-bg: transparent; border-radius: var(--radius-lg); overflow: hidden; } [data-theme-style="futuristic"] .table-light, [data-theme-style="futuristic"] .table thead { background: rgba(0, 212, 255, 0.04) !important; color: var(--text-primary); --bs-table-bg: rgba(0, 212, 255, 0.04); } [data-theme-style="futuristic"] .table tbody tr { transition: background-color var(--transition-fast); } [data-theme-style="futuristic"] .table-hover tbody tr:hover { background: rgba(0, 212, 255, 0.05) !important; --bs-table-hover-bg: rgba(0, 212, 255, 0.05); } [data-theme-style="futuristic"] .table-sm td, [data-theme-style="futuristic"] .table-sm th { border-color: rgba(255, 255, 255, 0.04); } /* ============================================================= Futuristic: Badges — Neon ============================================================= */ [data-theme-style="futuristic"] .badge.bg-primary { background: rgba(0, 212, 255, 0.2) !important; color: var(--neon-blue); } [data-theme-style="futuristic"] .badge.bg-success { background: rgba(0, 255, 136, 0.2) !important; color: var(--neon-green); } [data-theme-style="futuristic"] .badge.bg-danger { background: rgba(255, 45, 124, 0.2) !important; color: var(--neon-pink); } [data-theme-style="futuristic"] .badge.bg-warning { background: rgba(255, 107, 53, 0.2) !important; color: var(--neon-orange); } [data-theme-style="futuristic"] .badge.bg-info { background: rgba(0, 229, 255, 0.2) !important; color: var(--neon-cyan); } [data-theme-style="futuristic"] .badge.bg-secondary { background: rgba(107, 122, 144, 0.2) !important; color: var(--text-secondary); } /* ============================================================= Futuristic: Alerts — Dark Neon ============================================================= */ [data-theme-style="futuristic"] .alert-info { background: rgba(0, 212, 255, 0.08); border: 1px solid rgba(0, 212, 255, 0.15); color: var(--neon-blue); } [data-theme-style="futuristic"] .alert-success { background: rgba(0, 255, 136, 0.08); border: 1px solid rgba(0, 255, 136, 0.15); color: var(--neon-green); } [data-theme-style="futuristic"] .alert-danger { background: rgba(255, 45, 124, 0.08); border: 1px solid rgba(255, 45, 124, 0.15); color: var(--neon-pink); } [data-theme-style="futuristic"] .alert-warning { background: rgba(255, 107, 53, 0.08); border: 1px solid rgba(255, 107, 53, 0.15); color: var(--neon-orange); } /* ============================================================= Futuristic: Modals — Dark Glass ============================================================= */ [data-theme-style="futuristic"] .modal-content { background: var(--bg-card); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: var(--glass-border); box-shadow: var(--shadow-xl); color: var(--text-primary); } [data-theme-style="futuristic"] .modal-header { border-bottom: 1px solid rgba(0, 212, 255, 0.1); padding: 1.5rem; } [data-theme-style="futuristic"] .modal-footer { border-top: 1px solid rgba(0, 212, 255, 0.1); padding: 1.5rem; } /* ============================================================= Futuristic: Accordion — Dark Glass ============================================================= */ [data-theme-style="futuristic"] .accordion-item { border: var(--glass-border); box-shadow: var(--shadow-sm); background: var(--bg-card); } [data-theme-style="futuristic"] .accordion-button { background: transparent; color: var(--text-primary); } [data-theme-style="futuristic"] .accordion-button:not(.collapsed) { background-color: rgba(0, 212, 255, 0.08); color: var(--neon-blue); } /* ============================================================= Futuristic: Navigation — Dark Glass ============================================================= */ [data-theme-style="futuristic"] .navbar { box-shadow: var(--shadow-md); backdrop-filter: blur(16px); background-color: rgba(14, 14, 28, 0.85) !important; border-bottom: 1px solid rgba(0, 212, 255, 0.08); } [data-theme-style="futuristic"] .nav-link { border-radius: var(--radius-md); transition: all var(--transition-fast); margin: 0 0.25rem; color: var(--text-secondary); } [data-theme-style="futuristic"] .nav-link:hover { background-color: rgba(0, 212, 255, 0.08); color: var(--neon-blue); transform: translateY(-1px); } /* ============================================================= Futuristic: Dropdowns — Dark Glass ============================================================= */ [data-theme-style="futuristic"] .dropdown-menu { background: var(--bg-card); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: var(--glass-border); box-shadow: var(--shadow-xl); } [data-theme-style="futuristic"] .dropdown-item { color: var(--text-primary); } [data-theme-style="futuristic"] .dropdown-item:hover { background-color: rgba(0, 212, 255, 0.08); color: var(--neon-blue); transform: translateX(4px); } /* ============================================================= Futuristic: Footer — Dark Glass ============================================================= */ [data-theme-style="futuristic"] .footer { backdrop-filter: blur(16px); background-color: rgba(14, 14, 28, 0.6); padding: 2rem 0; border-top: 1px solid rgba(0, 212, 255, 0.08); } /* ============================================================= Futuristic: Scrollbar — Dark Neon ============================================================= */ [data-theme-style="futuristic"] ::-webkit-scrollbar { width: 10px; height: 10px; } [data-theme-style="futuristic"] ::-webkit-scrollbar-track { background: rgba(6, 6, 15, 0.5); } [data-theme-style="futuristic"] ::-webkit-scrollbar-thumb { background: rgba(0, 212, 255, 0.15); border-radius: var(--radius-lg); } [data-theme-style="futuristic"] ::-webkit-scrollbar-thumb:hover { background: rgba(0, 212, 255, 0.3); } /* ============================================================= Futuristic: Focus States — Neon Glow ============================================================= */ [data-theme-style="futuristic"] *:focus-visible { outline: 2px solid var(--neon-blue); outline-offset: 2px; box-shadow: 0 0 12px rgba(0, 212, 255, 0.25); } /* ============================================================= Futuristic: Text Override Helpers — Neon ============================================================= */ [data-theme-style="futuristic"] .text-primary { color: var(--neon-blue) !important; } [data-theme-style="futuristic"] .text-success { color: var(--neon-green) !important; } [data-theme-style="futuristic"] .text-danger { color: var(--neon-pink) !important; } [data-theme-style="futuristic"] .text-warning { color: var(--neon-orange) !important; } [data-theme-style="futuristic"] .text-info { color: var(--neon-cyan) !important; } [data-theme-style="futuristic"] .text-secondary { color: var(--text-secondary) !important; } [data-theme-style="futuristic"] .text-dark { color: var(--text-primary) !important; } [data-theme-style="futuristic"] .text-muted { color: var(--text-secondary) !important; } /* ============================================================= Futuristic: Utility Classes ============================================================= */ [data-theme-style="futuristic"] .glassmorphism { background: var(--bg-card); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: var(--glass-border); } /* ============================================================= Futuristic: List Group — Dark Neon ============================================================= */ [data-theme-style="futuristic"] .list-group-item { background: transparent; border: none; border-radius: var(--radius-md) !important; margin-bottom: var(--spacing-xs); transition: all var(--transition-fast); color: var(--text-primary); border-bottom: 1px solid rgba(255, 255, 255, 0.04); } [data-theme-style="futuristic"] .list-group-item:hover { background: rgba(0, 212, 255, 0.05); transform: translateX(4px); box-shadow: var(--shadow-md); color: var(--text-primary); } /* ============================================================= Futuristic: Toast — Dark Glass ============================================================= */ [data-theme-style="futuristic"] .toast { background: var(--bg-card); backdrop-filter: var(--glass-blur); border: var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); color: var(--text-primary); } /* ============================================================= Futuristic: Progress Bars — Neon Gradient ============================================================= */ [data-theme-style="futuristic"] .progress { border-radius: var(--radius-lg); height: 0.75rem; background: rgba(255, 255, 255, 0.06); } [data-theme-style="futuristic"] .progress-bar { border-radius: var(--radius-lg); background: var(--primary-gradient); } [data-theme-style="futuristic"] .progress-bar.bg-success { background: var(--success-gradient) !important; } [data-theme-style="futuristic"] .progress-bar.bg-warning { background: var(--warning-gradient) !important; } [data-theme-style="futuristic"] .progress-bar.bg-danger { background: var(--danger-gradient) !important; } [data-theme-style="futuristic"] .progress-bar.bg-info { background: var(--info-gradient) !important; } /* ============================================================= Responsive Enhancements — All Themes ============================================================= */ @media (max-width: 768px) { .card { margin-bottom: var(--spacing-md); } .table { font-size: 0.875rem; } .btn { font-size: 0.875rem; padding: 0.5rem 0.875rem; } } /* ============================================================= Reduced Motion — All Themes ============================================================= */ @media (prefers-reduced-motion: reduce) { .card, .btn, .list-group-item, .dropdown-item, .nav-link { transition: none !important; } .card:hover { transform: none; } .page-content { animation: none; } #bg-canvas { display: none !important; } } /* ============================================================= Print Styles — All Themes ============================================================= */ @media print { .navbar, .footer, .btn, .modal, #bg-canvas { display: none !important; } .card { box-shadow: none; border: 1px solid var(--gray-300); background: #fff; } body::after { display: none; } }