/* ============================================================================ HOTEL MOOMSIE - HMS :: THEMES Six complete themes driven purely by CSS custom properties. Switch instantly with (see assets/js/theme.js). Themes: light (Daylight) / dark (Midnight) / neon / glass / bw / corporate ============================================================================ */ /* ------------------------------------------------------------------ tokens */ :root { --font: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-display: var(--font); --mono: ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, Consolas, monospace; /* room + booking status colors (overridden per theme) */ --st-available: #16a34a; --st-occupied: #e11d48; --st-reserved: #2563eb; --st-cleaning: #9333ea; --st-maintenance: #d97706; } /* ------------------------------------------------------------------ LIGHT */ [data-theme="light"] { --bg: #eef2f8; --bg-2: #e3e9f5; --surface: #ffffff; --surface-2: #f5f8fc; --surface-3: #edf2f9; --text: #101828; --text-2: #5b6b84; --text-3: #93a1b8; --border: #e3e9f2; --border-2: #c9d4e6; --accent: #4f46e5; --accent-2: #06b6d4; --accent-grad: linear-gradient(135deg, #4f46e5, #7c3aed 55%, #06b6d4); --on-accent: #ffffff; --accent-soft: rgba(79, 70, 229, 0.10); --ok: #15803d; --ok-bg: rgba(34, 197, 94, 0.14); --bad: #be123c; --bad-bg: rgba(225, 29, 72, 0.12); --warn: #b45309; --warn-bg: rgba(245, 158, 11, 0.15); --info: #1d4ed8; --info-bg: rgba(59, 130, 246, 0.13); --shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 6px 20px rgba(16, 24, 40, 0.07); --shadow-lg: 0 10px 40px rgba(16, 24, 40, 0.14); --glow: 0 8px 24px rgba(79, 70, 229, 0.35); --radius: 16px; --radius-s: 10px; --blur: 0px; --grid-line: rgba(79, 70, 229, 0.05); /* tower */ --tw-face: linear-gradient(165deg, #ffffff, #eef2f9 60%, #e2e9f4); --tw-face-2: linear-gradient(165deg, #f2f5fa, #e6ecf6); --tw-edge: rgba(120, 137, 170, 0.55); --window-off: rgba(148, 163, 194, 0.35); --tw-sign: #4f46e5; --scene-sky: radial-gradient(90rem 40rem at 50% -10rem, rgba(99, 102, 241, 0.14), transparent 60%), linear-gradient(180deg, #f6f8fd 0%, #e9eef7 100%); --meta-theme: #eef2f8; } /* ------------------------------------------------------------------- DARK */ [data-theme="dark"] { --bg: #0b1220; --bg-2: #0e1729; --surface: #131c30; --surface-2: #0f1828; --surface-3: #1a2740; --text: #e7eef9; --text-2: #93a4c3; --text-3: #5c6f92; --border: #233450; --border-2: #31415f; --accent: #38bdf8; --accent-2: #a78bfa; --accent-grad: linear-gradient(135deg, #0ea5e9, #6366f1 60%, #a78bfa); --on-accent: #041018; --accent-soft: rgba(56, 189, 248, 0.14); --ok: #4ade80; --ok-bg: rgba(34, 197, 94, 0.16); --bad: #fb7185; --bad-bg: rgba(244, 63, 94, 0.16); --warn: #fbbf24; --warn-bg: rgba(245, 158, 11, 0.16); --info: #60a5fa; --info-bg: rgba(59, 130, 246, 0.16); --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(2, 8, 20, 0.45); --shadow-lg: 0 18px 50px rgba(2, 8, 20, 0.6); --glow: 0 10px 30px rgba(56, 189, 248, 0.35); --radius: 16px; --radius-s: 10px; --blur: 0px; --grid-line: rgba(56, 189, 248, 0.07); --st-available: #22c55e; --st-occupied: #f43f5e; --st-reserved: #3b82f6; --st-cleaning: #a855f7; --st-maintenance: #f59e0b; --tw-face: linear-gradient(165deg, #1a2438, #121a2c 60%, #0d1424); --tw-face-2: linear-gradient(165deg, #151f33, #101728); --tw-edge: rgba(72, 94, 134, 0.7); --window-off: rgba(70, 90, 128, 0.35); --tw-sign: #38bdf8; --scene-sky: radial-gradient(70rem 34rem at 50% -8rem, rgba(56, 189, 248, 0.10), transparent 60%), linear-gradient(180deg, #0d1830 0%, #0b1220 100%); --meta-theme: #0b1220; } /* ------------------------------------------------------------------- NEON */ [data-theme="neon"] { --bg: #050314; --bg-2: #07051c; --surface: rgba(17, 13, 43, 0.72); --surface-2: rgba(24, 18, 60, 0.55); --surface-3: rgba(32, 24, 78, 0.65); --text: #e9f6ff; --text-2: #97a3e0; --text-3: #5f6aa8; --border: rgba(0, 240, 255, 0.22); --border-2: rgba(0, 240, 255, 0.45); --accent: #00f0ff; --accent-2: #ff2bd6; --accent-grad: linear-gradient(135deg, #00f0ff, #7c3aed 55%, #ff2bd6); --on-accent: #001318; --accent-soft: rgba(0, 240, 255, 0.10); --ok: #00ffa3; --ok-bg: rgba(0, 255, 163, 0.12); --bad: #ff3860; --bad-bg: rgba(255, 56, 96, 0.14); --warn: #ffcc00; --warn-bg: rgba(255, 204, 0, 0.14); --info: #38b6ff; --info-bg: rgba(56, 182, 255, 0.14); --shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 10px 34px rgba(0, 0, 0, 0.5); --shadow-lg: 0 22px 60px rgba(0, 0, 0, 0.7); --glow: 0 0 18px rgba(0, 240, 255, 0.45), 0 0 42px rgba(0, 240, 255, 0.18); --radius: 12px; --radius-s: 8px; --blur: 6px; --grid-line: rgba(0, 240, 255, 0.12); --st-available: #00ffa3; --st-occupied: #ff3860; --st-reserved: #38b6ff; --st-cleaning: #c47dff; --st-maintenance: #ffb020; --tw-face: linear-gradient(165deg, rgba(20, 16, 54, 0.92), rgba(11, 8, 32, 0.95)); --tw-face-2: linear-gradient(165deg, rgba(15, 12, 44, 0.9), rgba(9, 7, 26, 0.95)); --tw-edge: rgba(0, 240, 255, 0.5); --window-off: rgba(0, 240, 255, 0.10); --tw-sign: #00f0ff; --scene-sky: radial-gradient(60rem 30rem at 50% -6rem, rgba(124, 58, 237, 0.25), transparent 55%), radial-gradient(40rem 20rem at 85% 15%, rgba(255, 43, 214, 0.10), transparent 60%), linear-gradient(180deg, #0a0630 0%, #050314 100%); --meta-theme: #050314; } /* ------------------------------------------------------------------ GLASS */ [data-theme="glass"] { --bg: #dfe7ff; --bg-2: #d3ddf9; --surface: rgba(255, 255, 255, 0.52); --surface-2: rgba(255, 255, 255, 0.34); --surface-3: rgba(255, 255, 255, 0.65); --text: #1b2340; --text-2: #4d5878; --text-3: #7c87a8; --border: rgba(255, 255, 255, 0.65); --border-2: rgba(99, 102, 241, 0.35); --accent: #6366f1; --accent-2: #ec4899; --accent-grad: linear-gradient(135deg, #6366f1, #8b5cf6 50%, #ec4899); --on-accent: #ffffff; --accent-soft: rgba(99, 102, 241, 0.14); --ok: #0e9f6e; --ok-bg: rgba(16, 185, 129, 0.16); --bad: #e0245e; --bad-bg: rgba(236, 72, 153, 0.14); --warn: #b45309; --warn-bg: rgba(245, 158, 11, 0.18); --info: #2563eb; --info-bg: rgba(37, 99, 235, 0.13); --shadow: 0 8px 32px rgba(60, 72, 148, 0.14); --shadow-lg: 0 24px 60px rgba(60, 72, 148, 0.24); --glow: 0 10px 30px rgba(99, 102, 241, 0.35); --radius: 20px; --radius-s: 12px; --blur: 18px; --grid-line: rgba(99, 102, 241, 0.06); --st-available: #10b981; --st-occupied: #ec4899; --st-reserved: #3b82f6; --st-cleaning: #a855f7; --st-maintenance: #f59e0b; --tw-face: linear-gradient(165deg, rgba(255, 255, 255, 0.55), rgba(219, 228, 255, 0.45)); --tw-face-2: linear-gradient(165deg, rgba(235, 240, 255, 0.5), rgba(210, 222, 252, 0.4)); --tw-edge: rgba(255, 255, 255, 0.75); --window-off: rgba(120, 134, 180, 0.25); --tw-sign: #6366f1; --scene-sky: radial-gradient(50rem 24rem at 20% 0%, rgba(99, 102, 241, 0.25), transparent 55%), linear-gradient(180deg, rgba(214, 222, 255, 0.8), rgba(232, 222, 252, 0.8)); --meta-theme: #dfe7ff; } /* --------------------------------------------------------------- BLACK&WHITE */ [data-theme="bw"] { --bg: #f4f4f4; --bg-2: #ececec; --surface: #ffffff; --surface-2: #f0f0f0; --surface-3: #e8e8e8; --text: #0a0a0a; --text-2: #555555; --text-3: #8a8a8a; --border: #d6d6d6; --border-2: #0a0a0a; --accent: #0a0a0a; --accent-2: #555555; --accent-grad: linear-gradient(135deg, #0a0a0a, #333333); --on-accent: #ffffff; --accent-soft: rgba(10, 10, 10, 0.08); --ok: #0a0a0a; --ok-bg: rgba(10, 10, 10, 0.08); --bad: #333333; --bad-bg: rgba(10, 10, 10, 0.12); --warn: #555555; --warn-bg: rgba(10, 10, 10, 0.06); --info: #333333; --info-bg: rgba(10, 10, 10, 0.07); --shadow: 0 1px 0 rgba(10, 10, 10, 0.06); --shadow-lg: 0 12px 32px rgba(10, 10, 10, 0.18); --glow: 0 6px 18px rgba(10, 10, 10, 0.25); --radius: 4px; --radius-s: 2px; --blur: 0px; --grid-line: rgba(10, 10, 10, 0.05); --st-available: #0a0a0a; --st-occupied: #4d4d4d; --st-reserved: #8a8a8a; --st-cleaning: #b5b5b5; --st-maintenance: #2e2e2e; --tw-face: linear-gradient(165deg, #ffffff, #ededed 60%, #e0e0e0); --tw-face-2: linear-gradient(165deg, #f5f5f5, #e6e6e6); --tw-edge: rgba(10, 10, 10, 0.5); --window-off: rgba(120, 120, 120, 0.35); --tw-sign: #0a0a0a; --scene-sky: linear-gradient(180deg, #fbfbfb 0%, #efefef 100%); --meta-theme: #f4f4f4; } /* -------------------------------------------------------------- CORPORATE */ [data-theme="corporate"] { --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif; --bg: #f2f4f8; --bg-2: #e9edf4; --surface: #ffffff; --surface-2: #f7f9fc; --surface-3: #eef2f8; --text: #17233b; --text-2: #536079; --text-3: #8b96ac; --border: #e0e6f0; --border-2: #c4cedd; --accent: #0f3460; --accent-2: #d4af37; --accent-grad: linear-gradient(135deg, #0f3460, #1a4a7f 60%, #d4af37); --on-accent: #ffffff; --accent-soft: rgba(15, 52, 96, 0.09); --ok: #1c6e42; --ok-bg: rgba(28, 110, 66, 0.12); --bad: #a12b2b; --bad-bg: rgba(161, 43, 43, 0.11); --warn: #8a6d1d; --warn-bg: rgba(184, 146, 47, 0.16); --info: #0f3460; --info-bg: rgba(15, 52, 96, 0.10); --shadow: 0 1px 2px rgba(23, 35, 59, 0.06), 0 6px 18px rgba(23, 35, 59, 0.08); --shadow-lg: 0 14px 44px rgba(23, 35, 59, 0.16); --glow: 0 8px 22px rgba(212, 175, 55, 0.35); --radius: 12px; --radius-s: 8px; --blur: 0px; --grid-line: rgba(15, 52, 96, 0.05); --st-available: #1c6e42; --st-occupied: #a12b2b; --st-reserved: #1a4a7f; --st-cleaning: #6b4fa1; --st-maintenance: #9a6b0f; --tw-face: linear-gradient(165deg, #ffffff, #f0f3f8 55%, #e3e9f2); --tw-face-2: linear-gradient(165deg, #f4f6fa, #e8ecf3); --tw-edge: rgba(23, 35, 59, 0.45); --window-off: rgba(120, 132, 160, 0.4); --tw-sign: #0f3460; --scene-sky: radial-gradient(70rem 32rem at 50% -8rem, rgba(212, 175, 55, 0.14), transparent 55%), linear-gradient(180deg, #f7f9fc, #edf1f7); --meta-theme: #f2f4f8; } /* ============================================================================ THEME-SPECIFIC BODY BACKGROUNDS & DECOR ============================================================================ */ /* Glass: animated aurora blobs behind everything */ [data-theme="glass"] body::before { content: ''; position: fixed; inset: -20%; z-index: -2; background: radial-gradient(42rem 30rem at 15% 20%, rgba(99, 102, 241, 0.45), transparent 60%), radial-gradient(38rem 26rem at 85% 15%, rgba(236, 72, 153, 0.30), transparent 60%), radial-gradient(46rem 30rem at 70% 85%, rgba(56, 189, 248, 0.38), transparent 62%), radial-gradient(30rem 22rem at 10% 80%, rgba(167, 139, 250, 0.35), transparent 60%); filter: blur(30px); animation: auroraDrift 26s ease-in-out infinite alternate; } @keyframes auroraDrift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(3%, -2%, 0) scale(1.06); } 100% { transform: translate3d(-3%, 2%, 0) scale(1.02); } } /* Neon: perspective grid floor + faint stars */ [data-theme="neon"] body::before { content: ''; position: fixed; inset: 0; z-index: -2; background-image: radial-gradient(rgba(0, 240, 255, 0.16) 1px, transparent 1.6px), radial-gradient(rgba(255, 43, 214, 0.10) 1px, transparent 1.6px); background-size: 140px 140px, 90px 90px; background-position: 0 0, 45px 60px; } [data-theme="neon"] body::after { content: ''; position: fixed; left: -50%; right: -50%; bottom: -10%; height: 45vh; z-index: -1; background: linear-gradient(transparent, rgba(0, 240, 255, 0.06)), repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 60px), repeating-linear-gradient(0deg, var(--grid-line) 0 1px, transparent 1px 60px); transform: perspective(600px) rotateX(60deg); transform-origin: top center; pointer-events: none; mask-image: linear-gradient(to top, transparent, black 60%); -webkit-mask-image: linear-gradient(to top, transparent, black 60%); } /* Dark: subtle starfield */ [data-theme="dark"] body::before { content: ''; position: fixed; inset: 0; z-index: -2; background-image: radial-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 1.5px), radial-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1.5px); background-size: 190px 190px, 120px 120px; background-position: 0 0, 40px 55px; opacity: 0.5; } /* Black & white: paper grain */ [data-theme="bw"] body::before { content: ''; position: fixed; inset: 0; z-index: -2; background-image: repeating-linear-gradient(0deg, rgba(10, 10, 10, 0.015) 0 1px, transparent 1px 3px); pointer-events: none; } /* ============================================================================ BW THEME STATUS PATTERNS (distinguish statuses without color) ============================================================================ */ [data-theme="bw"] .badge.b-available { background: #fff; color: #0a0a0a; border: 1.5px solid #0a0a0a; } [data-theme="bw"] .badge.b-occupied { background: #0a0a0a; color: #fff; } [data-theme="bw"] .badge.b-reserved { background: repeating-linear-gradient(45deg, #0a0a0a 0 5px, #fff 5px 10px); color: #0a0a0a; text-shadow: 0 0 3px #fff; } [data-theme="bw"] .badge.b-cleaning { background: #fff; color: #0a0a0a; border: 1.5px dashed #0a0a0a; } [data-theme="bw"] .badge.b-maintenance { background: repeating-linear-gradient(135deg, #0a0a0a 0 3px, #fff 3px 6px); color: #0a0a0a; text-shadow: 0 0 3px #fff; } /* ============================================================================ NEON EXTRA ACCENTS ============================================================================ */ [data-theme="neon"] .card, [data-theme="neon"] .topbar { backdrop-filter: blur(var(--blur)); } [data-theme="neon"] .card:hover { border-color: var(--border-2); } [data-theme="neon"] .btn-primary { box-shadow: var(--glow); } [data-theme="neon"] .stat-card .stat-icon { box-shadow: 0 0 14px rgba(0, 240, 255, 0.35); } /* Glass: every surface gets the frost */ [data-theme="glass"] .card, [data-theme="glass"] .topbar, [data-theme="glass"] .modal-card, [data-theme="glass"] .dropdown-menu, [data-theme="glass"] .toast { backdrop-filter: blur(var(--blur)) saturate(1.25); -webkit-backdrop-filter: blur(var(--blur)) saturate(1.25); } [data-theme="glass"] .topbar { background: rgba(255, 255, 255, 0.4); } [data-theme="glass"] .table thead th { background: rgba(255, 255, 255, 0.5); } /* Corporate: display font for headings */ [data-theme="corporate"] h1, [data-theme="corporate"] h2, [data-theme="corporate"] h3, [data-theme="corporate"] .brand-name, [data-theme="corporate"] .page-title { font-family: var(--font-display); letter-spacing: 0.01em; }