/* Liquid Theme — Pastel gradients, animated glows, very rounded corners */ /* ========================================================================== Liquid Theme — Pastel gradients, animated glows, very rounded corners Activated via data-theme="liquid" on ========================================================================== */ [data-theme="liquid"] { --nn-green: #7c3aed; --nn-green-dark: #6d28d9; --nn-green-hover: #8b5cf6; --nn-pink: #ec4899; --nn-pink-hover: #f472b6; --nn-purple: #818cf8; --nn-amber: #fbbf24; --nn-bg: #fdf2f8; --nn-surface: #ffffff; --nn-surface-alt: #faf5ff; --nn-border: #e9d5ff; --nn-border-hover: #d8b4fe; --nn-text: #1e1b4b; --nn-text-muted: #6b7280; --nn-text-faint: #9ca3af; /* Override Bootstrap color variables */ --bs-primary: #7c3aed; --bs-primary-rgb: 124, 58, 237; --bs-secondary: #6b7280; --bs-secondary-rgb: 107, 114, 128; --bs-success: #10b981; --bs-success-rgb: 16, 185, 129; --bs-info: #818cf8; --bs-info-rgb: 129, 140, 248; --bs-warning: #fbbf24; --bs-warning-rgb: 251, 191, 36; --bs-danger: #ec4899; --bs-danger-rgb: 236, 72, 153; --bs-light: #ffffff; --bs-light-rgb: 255, 255, 255; --bs-dark: #1e1b4b; --bs-dark-rgb: 30, 27, 75; --bs-body-color: #1e1b4b; --bs-body-color-rgb: 30, 27, 75; --bs-body-bg: #fdf2f8; --bs-body-bg-rgb: 253, 242, 248; --bs-link-color: #7c3aed; --bs-link-hover-color: #8b5cf6; } /* --- Liquid structural overrides --- */ [data-theme="liquid"] * { border-radius: 1.25rem; } [data-theme="liquid"] .badge, [data-theme="liquid"] .btn, [data-theme="liquid"] .nav-link { border-radius: 9999px; } [data-theme="liquid"] body { font-family: 'Inter', system-ui, sans-serif; background: linear-gradient(135deg, #fdf2f8 0%, #ede9fe 30%, #dbeafe 60%, #fce7f3 100%); background-attachment: fixed; } [data-theme="liquid"] ::selection { background: rgba(124, 58, 237, 0.2); color: #1e1b4b; } [data-theme="liquid"] .navbar { background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(20px) saturate(1.8); -webkit-backdrop-filter: blur(20px) saturate(1.8); border-bottom: 1px solid rgba(233, 213, 255, 0.5); box-shadow: 0 4px 30px rgba(124, 58, 237, 0.06); } [data-theme="liquid"] .navbar-brand { color: #1e1b4b; } [data-theme="liquid"] .navbar-brand i { color: #7c3aed; } [data-theme="liquid"] .navbar-dark .navbar-nav .nav-link { color: #6b7280; } [data-theme="liquid"] .navbar-dark .navbar-nav .nav-link:hover, [data-theme="liquid"] .navbar-dark .navbar-nav .nav-link.active { color: #7c3aed; text-shadow: none; } [data-theme="liquid"] .card { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(12px); border: 1px solid rgba(233, 213, 255, 0.4); box-shadow: 0 8px 32px rgba(124, 58, 237, 0.08); animation: liquidCardShimmer 6s ease-in-out infinite; } @keyframes liquidCardShimmer { 0%, 100% { box-shadow: 0 8px 32px rgba(124, 58, 237, 0.08), 0 0 0 rgba(236, 72, 153, 0); } 50% { box-shadow: 0 8px 32px rgba(236, 72, 153, 0.1), 0 0 20px rgba(124, 58, 237, 0.06); } } [data-theme="liquid"] .card-header { background: linear-gradient(135deg, rgba(233, 213, 255, 0.3), rgba(252, 231, 243, 0.3)); border-bottom: 1px solid rgba(233, 213, 255, 0.4); } [data-theme="liquid"] .nn-card-header { background: linear-gradient(135deg, #7c3aed, #a855f7); color: #fff; border-bottom: 1px solid rgba(139, 92, 246, 0.5); } [data-theme="liquid"] .card-footer { background: linear-gradient(135deg, rgba(219, 234, 254, 0.3), rgba(233, 213, 255, 0.3)); border-top: 1px solid rgba(233, 213, 255, 0.4); } [data-theme="liquid"] .shadow-sm { box-shadow: 0 8px 32px rgba(124, 58, 237, 0.08); } [data-theme="liquid"] .btn-primary { background: linear-gradient(135deg, #8b5cf6, #ec4899); border: none; color: #fff; box-shadow: 0 4px 20px rgba(139, 92, 246, 0.3); animation: liquidBtnGlow 4s ease-in-out infinite; } @keyframes liquidBtnGlow { 0%, 100% { box-shadow: 0 4px 20px rgba(139, 92, 246, 0.3); } 50% { box-shadow: 0 4px 28px rgba(236, 72, 153, 0.4); } } [data-theme="liquid"] .btn-primary:hover { background: linear-gradient(135deg, #7c3aed, #db2777); color: #fff; box-shadow: 0 6px 28px rgba(139, 92, 246, 0.45); transform: translateY(-2px); } [data-theme="liquid"] .btn-outline-primary { color: #7c3aed; border: 1px solid rgba(139, 92, 246, 0.4); box-shadow: none; } [data-theme="liquid"] .btn-outline-primary:hover { background: linear-gradient(135deg, #8b5cf6, #ec4899); color: #fff; border-color: transparent; box-shadow: 0 4px 20px rgba(139, 92, 246, 0.3); } [data-theme="liquid"] .btn-danger { background: linear-gradient(135deg, #f43f5e, #fb7185); border: none; box-shadow: 0 4px 20px rgba(244, 63, 94, 0.2); } [data-theme="liquid"] .btn-danger:hover { box-shadow: 0 6px 28px rgba(244, 63, 94, 0.35); transform: translateY(-2px); } [data-theme="liquid"] .btn-outline-danger { border: 1px solid rgba(244, 63, 94, 0.4); color: #f43f5e; } [data-theme="liquid"] .btn-outline-secondary { border: 1px solid rgba(233, 213, 255, 0.6); color: #6b7280; } [data-theme="liquid"] .btn-outline-secondary:hover { background: rgba(233, 213, 255, 0.3); color: #1e1b4b; } [data-theme="liquid"] .badge.bg-primary { background: linear-gradient(135deg, #8b5cf6, #a78bfa); color: #fff; border: none; } [data-theme="liquid"] .badge.bg-success { background: linear-gradient(135deg, #6ee7b7, #34d399); color: #065f46; border: none; } [data-theme="liquid"] .badge.bg-danger { background: linear-gradient(135deg, #fda4af, #fb7185); color: #9f1239; border: none; } [data-theme="liquid"] .badge.bg-warning { background: linear-gradient(135deg, #fde68a, #fbbf24); color: #78350f; border: none; } [data-theme="liquid"] .badge.bg-secondary { background: rgba(233, 213, 255, 0.4); color: #6b7280; border: none; } [data-theme="liquid"] .badge.bg-info { background: linear-gradient(135deg, #c4b5fd, #818cf8); color: #fff; border: none; } [data-theme="liquid"] .form-control, [data-theme="liquid"] .form-select { background-color: rgba(255, 255, 255, 0.8); border: 1px solid rgba(233, 213, 255, 0.6); color: #1e1b4b; } [data-theme="liquid"] .form-control:focus, [data-theme="liquid"] .form-select:focus { border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15), 0 4px 16px rgba(139, 92, 246, 0.1); } [data-theme="liquid"] .form-control::placeholder { color: #9ca3af; } [data-theme="liquid"] .input-group-text { background: linear-gradient(135deg, rgba(233, 213, 255, 0.3), rgba(252, 231, 243, 0.3)); border: 1px solid rgba(233, 213, 255, 0.6); color: #6b7280; } [data-theme="liquid"] .form-label { color: #4b5563; } [data-theme="liquid"] .dropdown-menu { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(20px); border: 1px solid rgba(233, 213, 255, 0.4); box-shadow: 0 12px 40px rgba(124, 58, 237, 0.1); } [data-theme="liquid"] .dropdown-item { color: #6b7280; } [data-theme="liquid"] .dropdown-item:hover { background: linear-gradient(135deg, rgba(233, 213, 255, 0.3), rgba(252, 231, 243, 0.3)); color: #1e1b4b; } [data-theme="liquid"] .dropdown-divider { border-color: rgba(233, 213, 255, 0.4); } [data-theme="liquid"] .alert { border: 1px solid rgba(233, 213, 255, 0.4); box-shadow: 0 4px 16px rgba(124, 58, 237, 0.06); backdrop-filter: blur(8px); } [data-theme="liquid"] .alert-success { background: rgba(209, 250, 229, 0.6); color: #065f46; } [data-theme="liquid"] .alert-danger { background: rgba(254, 226, 226, 0.6); color: #9f1239; } [data-theme="liquid"] .alert-warning { background: rgba(254, 249, 195, 0.6); color: #78350f; } [data-theme="liquid"] .alert-info { background: rgba(224, 231, 255, 0.6); color: #3730a3; } [data-theme="liquid"] .btn-close { filter: none; } [data-theme="liquid"] .table > :not(caption) > * > * { border-bottom: 1px solid rgba(233, 213, 255, 0.3); } [data-theme="liquid"] .table > thead { border-bottom: 2px solid rgba(233, 213, 255, 0.5); } [data-theme="liquid"] .table-light, [data-theme="liquid"] thead.table-light > tr > th { background: linear-gradient(135deg, rgba(233, 213, 255, 0.2), rgba(252, 231, 243, 0.2)); color: #4b5563; } [data-theme="liquid"] .table-dark, [data-theme="liquid"] thead.table-dark > tr > th { background: linear-gradient(135deg, rgba(233, 213, 255, 0.2), rgba(219, 234, 254, 0.2)); color: #4b5563; } [data-theme="liquid"] .auth-card { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(20px); border: 1px solid rgba(233, 213, 255, 0.4); box-shadow: 0 20px 60px rgba(124, 58, 237, 0.1); } [data-theme="liquid"] .auth-card::before { background: linear-gradient(90deg, #8b5cf6, #ec4899); height: 3px; } [data-theme="liquid"] .nn-gradient-text { background: linear-gradient(135deg, #8b5cf6, #ec4899, #38bdf8); background-size: 200% 200%; animation: liquidGradientText 4s ease-in-out infinite; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } @keyframes liquidGradientText { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } [data-theme="liquid"] .nn-glow { filter: none; } [data-theme="liquid"] .modal-content { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(20px); border: 1px solid rgba(233, 213, 255, 0.4); box-shadow: 0 20px 60px rgba(124, 58, 237, 0.12); } [data-theme="liquid"] .modal-header { border-bottom: 1px solid rgba(233, 213, 255, 0.4); } [data-theme="liquid"] .modal-footer { border-top: 1px solid rgba(233, 213, 255, 0.4); } [data-theme="liquid"] .list-group-item { background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(233, 213, 255, 0.4); } [data-theme="liquid"] .progress { background: rgba(233, 213, 255, 0.3); border: 1px solid rgba(233, 213, 255, 0.4); overflow: hidden; } [data-theme="liquid"] .progress-bar { background: linear-gradient(90deg, #8b5cf6, #ec4899); } [data-theme="liquid"] .nav-pills .nav-link.active { background: linear-gradient(135deg, #8b5cf6, #ec4899); color: #fff; border: none; box-shadow: 0 4px 16px rgba(139, 92, 246, 0.2); } [data-theme="liquid"] .page-link { background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(233, 213, 255, 0.4); color: #6b7280; } [data-theme="liquid"] .page-item.active .page-link { background: linear-gradient(135deg, #8b5cf6, #ec4899); border-color: transparent; color: #fff; } [data-theme="liquid"] .stepper-circle { border: 2px solid rgba(233, 213, 255, 0.6); box-shadow: 0 4px 12px rgba(124, 58, 237, 0.08); } [data-theme="liquid"] .stepper-step.active .stepper-circle { background: linear-gradient(135deg, #8b5cf6, #ec4899); border-color: transparent; box-shadow: 0 4px 16px rgba(139, 92, 246, 0.3); } [data-theme="liquid"] .navbar-toggler { border: 1px solid rgba(233, 213, 255, 0.6); } [data-theme="liquid"] .navbar-toggler-icon { filter: invert(0); } [data-theme="liquid"] ::-webkit-scrollbar-track { background: #fdf2f8; } [data-theme="liquid"] ::-webkit-scrollbar-thumb { background: #d8b4fe; border-radius: 9999px; } [data-theme="liquid"] ::-webkit-scrollbar-thumb:hover { background: #a78bfa; }