/* ============================================================ TAKHRIJ HADITH LAB — Tema halaman Jejak Projek (track.html) Mewarisi sistem reka bentuk halaman utama: · Dark — emas manuskrip + mandala gelap (lalai) · Light — biru dakwat + parchment berlakaran Tema dibaca dari localStorage 'thl-theme' (skrip dalam ). ============================================================ */ html[data-theme="dark"] { --card-bg: rgba(20, 25, 39, 0.6); --border-color: rgba(232, 222, 200, 0.14); --text-primary: #EDE8DC; --text-secondary: #8E94A1; --t-accent: #C8A35C; --t-accent-bright: #E3C285; --t-accent-deep: #9A7B3F; --t-accent-rgb: 200, 163, 92; --t-on-accent: #15110A; --t-glass-border: rgba(232, 222, 200, 0.16); --t-glass-highlight: rgba(255, 255, 255, 0.08); --t-panel: #11151F; --t-inner: rgba(255, 255, 255, 0.04); --t-placeholder: #565D6B; --t-error-text: #FCA5A5; --t-copyright: rgba(237, 232, 220, 0.4); color-scheme: dark; } html[data-theme="light"] { --card-bg: rgba(253, 251, 246, 0.65); --border-color: rgba(38, 50, 78, 0.15); --text-primary: #14213A; --text-secondary: #3F4A64; --t-accent: #1A52B8; --t-accent-bright: #2E72E5; --t-accent-deep: #123E8F; --t-accent-rgb: 26, 82, 184; --t-on-accent: #FBF9F4; --t-glass-border: rgba(255, 255, 255, 0.75); --t-glass-highlight: rgba(255, 255, 255, 0.9); --t-panel: #FDFBF6; --t-inner: rgba(38, 50, 78, 0.04); --t-placeholder: #A3A294; --t-error-text: #B91C1C; --t-copyright: rgba(20, 33, 58, 0.72); color-scheme: light; } /* ── Latar bercorak ikut tema ── */ html[data-theme="dark"] body { background: #0A0D13 url('assets/images/bg-dark-pattern.webp') center / cover no-repeat fixed; } html[data-theme="light"] body { background: #F2EEE5 url('assets/images/bg-light-sketch.webp') center / cover no-repeat fixed; } /* ── Logo: putih dalam dark mode ── */ html[data-theme="dark"] .logo-img { filter: brightness(0) invert(0.95); } /* ── Kad utama: kaca macOS ── */ .track-card { background: var(--card-bg); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); border: 1px solid var(--t-glass-border); box-shadow: inset 0 1px 0 var(--t-glass-highlight), 0 30px 70px -35px rgba(0, 0, 0, 0.6); } .track-card:hover { border-color: rgba(var(--t-accent-rgb), 0.35); box-shadow: inset 0 1px 0 var(--t-glass-highlight), 0 35px 80px -35px rgba(0, 0, 0, 0.65); } /* ── Tajuk ── */ .track-header h1 { font-family: 'Cinzel Decorative', Georgia, serif; font-weight: 400; text-transform: capitalize; font-size: 1.7rem; color: var(--text-primary); letter-spacing: 0.01em; } /* ── Borang carian ── */ .track-input { background: var(--t-inner); border-color: var(--border-color); color: var(--text-primary); } .track-input::placeholder { color: var(--t-placeholder); } .track-input:focus { border-color: var(--t-accent); box-shadow: 0 0 0 3.5px rgba(var(--t-accent-rgb), 0.18); background: rgba(var(--t-accent-rgb), 0.05); } .track-input:focus + i { color: var(--t-accent); } .btn-track { background: linear-gradient(135deg, var(--t-accent-bright), var(--t-accent) 60%, var(--t-accent-deep)); color: var(--t-on-accent); border-radius: 999px; box-shadow: 0 8px 24px -10px rgba(var(--t-accent-rgb), 0.5); } .btn-track:hover { box-shadow: 0 10px 30px -8px rgba(var(--t-accent-rgb), 0.6); } html[data-theme="light"] .btn-track { background: var(--t-accent); } html[data-theme="light"] .btn-track:hover { background: var(--t-accent-deep); } /* ── Loading & ralat ── */ .spinner { border-color: rgba(var(--t-accent-rgb), 0.18); border-top-color: var(--t-accent); } .error-box { color: var(--t-error-text); } /* ── Panel dalaman (progress & meta) ── */ .progress-section, .meta-box { background: var(--t-inner); border-color: var(--border-color); } .meta-lbl { color: var(--text-secondary); } .meta-val { color: var(--text-primary); } /* ── Langkah kemajuan ── */ .step-icon { background: var(--t-panel); border-color: var(--border-color); color: var(--text-secondary); box-shadow: 0 0 0 4px var(--t-panel); } .step-label, .step-desc { color: var(--text-secondary); } .step-line { background: var(--border-color); } .step-line::after { background: var(--t-accent); } .step-item.current .step-icon { background: rgba(var(--t-accent-rgb), 0.12); border-color: var(--t-accent); color: var(--t-accent-bright); box-shadow: 0 0 0 4px rgba(var(--t-accent-rgb), 0.15); } .step-item.current .step-label, .step-item.current .step-desc { color: var(--t-accent-bright); } .step-item.done .step-icon { background: var(--t-accent); border-color: var(--t-accent); color: var(--t-on-accent); } .step-item.done .step-label { color: var(--text-primary); } .step-item.done .step-desc { color: var(--text-secondary); } /* ── Hak cipta ── */ .copyright { color: var(--t-copyright); } /* ── Butang WhatsApp terapung ── */ .wa-float { position: fixed; right: 1.6rem; bottom: 1.6rem; z-index: 950; display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(135deg, #2EE17A, #25D366 55%, #1DA851); color: #FFFFFF; font-size: 1.7rem; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 28px -8px rgba(37, 211, 102, 0.55), 0 4px 12px rgba(0, 0, 0, 0.25); transition: transform 0.35s ease, box-shadow 0.35s ease; } .wa-float:hover { transform: translateY(-4px) scale(1.06); } @media (max-width: 768px) { .wa-float { right: 1.1rem; bottom: 1.1rem; width: 52px; height: 52px; font-size: 1.5rem; } }