/* ============================================================ MEDIGATE — RAMADAN ENGINE (REBUILD v2 — VISIBLE BY DEFAULT) ============================================================ */ /* Everything below only paints when */ html:not([data-ramadan="on"]) [class^="ramadan-"], html:not([data-ramadan="on"]) [class*=" ramadan-"] { display: none !important; } /* ------------------------------------------------------------ FLOATING THEME BUTTON — always visible once ramadan.js loads, regardless of data-ramadan state. This is how you turn it on. ------------------------------------------------------------ */ /* ------------------------------------------------------------ BACKGROUND PATTERNS — stronger opacity so they are unmistakable ------------------------------------------------------------ */ html[data-ramadan="on"]::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.9; } html.ramadan-bg-night-sky::before { background: radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.9) 50%, transparent), radial-gradient(2px 2px at 70% 15%, rgba(255,255,255,0.8) 50%, transparent), radial-gradient(2px 2px at 40% 60%, rgba(255,255,255,0.7) 50%, transparent), radial-gradient(2px 2px at 85% 45%, rgba(255,255,255,0.7) 50%, transparent), radial-gradient(2px 2px at 10% 75%, rgba(255,255,255,0.6) 50%, transparent), radial-gradient(ellipse 70% 50% at 50% 0%, var(--rmd-primary, #1B2A4A) 0%, transparent 70%); } html.ramadan-bg-lantern-pattern::before { background: radial-gradient(ellipse 55% 45% at 15% 90%, var(--rmd-secondary, #C0733B) 0%, transparent 65%), radial-gradient(ellipse 55% 45% at 85% 10%, var(--rmd-accent, #F4C888) 0%, transparent 65%); } html.ramadan-bg-mosque-shadow::before { background: linear-gradient(180deg, transparent 55%, var(--rmd-primary, #0F4C3A) 150%); opacity: 0.28; } html.ramadan-bg-islamic-pattern::before { background-image: repeating-linear-gradient(45deg, var(--rmd-secondary, #B08D57) 0, var(--rmd-secondary, #B08D57) 2px, transparent 2px, transparent 24px); opacity: 0.14; } html.ramadan-bg-crescent-pattern::before { background: radial-gradient(ellipse 45% 35% at 90% 5%, var(--rmd-secondary, #C9A227) 0%, transparent 70%); } /* ------------------------------------------------------------ HOME GREETING CARD — no auto-hide anymore, stays until you navigate away or turn the theme off. ------------------------------------------------------------ */ .ramadan-greeting-card { position: relative; display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 14px 18px; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--rmd-primary, #000) 55%, transparent), color-mix(in srgb, var(--rmd-secondary, #000) 30%, transparent)); border: 1px solid color-mix(in srgb, var(--rmd-accent, #fff) 35%, transparent); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); opacity: 0; transform: translateY(-6px); transition: opacity 0.5s ease, transform 0.5s ease; overflow: hidden; } .ramadan-greeting-card::before { content: ''; position: absolute; top: 0; left: -40%; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--rmd-accent, #fff) 22%, transparent), transparent); animation: ramadan-card-shimmer 3.6s ease-in-out infinite; pointer-events: none; } @keyframes ramadan-card-shimmer { 0% { left: -40%; } 60%, 100% { left: 130%; } } .ramadan-greeting-card--in { opacity: 1; transform: translateY(0); } .ramadan-greeting-card__icon { font-size: 24px; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--rmd-accent, #fff) 70%, transparent)); animation: ramadan-icon-breathe 3.4s ease-in-out infinite; display: inline-block; } @keyframes ramadan-icon-breathe { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.12) rotate(-4deg); } } .ramadan-greeting-card__title { font-weight: 800; font-size: 14px; color: var(--rmd-accent, #fff); text-shadow: 0 0 14px color-mix(in srgb, var(--rmd-accent, #fff) 55%, transparent); margin: 0; letter-spacing: .01em; } .ramadan-greeting-card__subtitle { font-size: 12px; color: color-mix(in srgb, var(--rmd-accent, #fff) 55%, var(--rmd-secondary, #aaa) 45%); margin: 2px 0 0; opacity: 0.92; } /* ------------------------------------------------------------ AI ACCESSORY OVERLAY ------------------------------------------------------------ */ .ramadan-ai-avatar { position: relative; } .ramadan-ai-accessory { position: absolute; font-size: 16px; pointer-events: none; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--rmd-accent, #fff) 65%, transparent)); } .ramadan-ai-accessory--hand { bottom: -2px; right: -8px; } .ramadan-ai-accessory--head { top: -14px; left: 50%; transform: translateX(-50%); } .ramadan-ai-accessory--companion { bottom: -6px; left: -8px; } .ramadan-ai-avatar--themed::after { content: ""; position: absolute; inset: -12%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--rmd-accent, #fff) 45%, transparent), transparent 70%); z-index: -1; animation: ramadan-pulse 3.2s ease-in-out infinite; } @keyframes ramadan-pulse { 0%, 100% { opacity: 0.55; transform: scale(0.96); } 50% { opacity: 1; transform: scale(1.08); } } /* ------------------------------------------------------------ SIDEBAR ------------------------------------------------------------ */ .ramadan-sidebar { border-inline-end: 2px solid color-mix(in srgb, var(--rmd-accent, #fff) 40%, transparent) !important; } .ramadan-sidebar--glow { box-shadow: 4px 0 24px color-mix(in srgb, var(--rmd-primary, #000) 30%, transparent); } .ramadan-sidebar-icon { margin-left: 6px; font-size: 14px; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--rmd-accent, #fff) 70%, transparent)); } /* ------------------------------------------------------------ HEADER ------------------------------------------------------------ */ .ramadan-header { border-bottom-color: color-mix(in srgb, var(--rmd-accent, #fff) 30%, transparent) !important; } .ramadan-header-icon { font-size: 15px; margin-right: 6px; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--rmd-accent, #fff) 65%, transparent)); } /* ------------------------------------------------------------ LOGIN ------------------------------------------------------------ */ .ramadan-login-deco { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } .ramadan-login-deco__item--moon::before { content: "🌙"; position: absolute; top: 6%; right: 8%; font-size: 58px; filter: drop-shadow(0 0 22px color-mix(in srgb, var(--rmd-accent, #fff) 80%, transparent)); } .ramadan-login-deco__item--lantern::before { content: "🏮"; position: absolute; top: 6%; left: 8%; font-size: 64px; filter: drop-shadow(0 0 20px color-mix(in srgb, var(--rmd-accent, #F4C888) 80%, transparent)); animation: ramadan-sway 4s ease-in-out infinite; } .ramadan-login-deco__item--lantern::after { content: "🏮"; position: absolute; top: 4%; right: 12%; font-size: 44px; filter: drop-shadow(0 0 16px color-mix(in srgb, var(--rmd-accent, #F4C888) 75%, transparent)); animation: ramadan-sway 4.6s ease-in-out infinite reverse; } .ramadan-login-deco__item--mosque::before { content: "🕌"; position: absolute; bottom: 2%; left: 50%; transform: translateX(-50%); font-size: 76px; opacity: 0.28; filter: drop-shadow(0 0 24px color-mix(in srgb, var(--rmd-secondary, #D4AF37) 60%, transparent)); } .ramadan-login-deco__item--stars::before { content: "✨"; position: absolute; top: 16%; left: 12%; font-size: 24px; opacity: 0.85; animation: ramadan-twinkle 3.5s ease-in-out infinite; } .ramadan-login-deco__item--glow { position: absolute; inset: 0; background: radial-gradient(ellipse 55% 45% at 50% 0%, color-mix(in srgb, var(--rmd-accent, #fff) 18%, transparent), transparent 70%); } @keyframes ramadan-sway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } } /* ------------------------------------------------------------ PARTICLE LAYER ------------------------------------------------------------ */ .ramadan-particle-layer { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; } .ramadan-particle { position: absolute; pointer-events: none; } .ramadan-particle--star { width: 3px; height: 3px; border-radius: 50%; background: var(--rmd-accent, #fff); animation: ramadan-twinkle 4s ease-in-out infinite; } .ramadan-particle--dust { bottom: -10px; width: 4px; height: 4px; border-radius: 50%; background: color-mix(in srgb, var(--rmd-accent, #fff) 80%, transparent); animation: ramadan-float-up 9s linear infinite; } .ramadan-particle--firefly { width: 5px; height: 5px; border-radius: 50%; background: var(--rmd-accent, #ffd479); box-shadow: 0 0 10px 3px color-mix(in srgb, var(--rmd-accent, #ffd479) 80%, transparent); animation: ramadan-drift 6s ease-in-out infinite; } .ramadan-particle--crescent { top: 4%; right: 5%; width: 30px; height: 30px; border-radius: 50%; background: transparent; box-shadow: 8px 0 0 0 var(--rmd-accent, #fff); filter: drop-shadow(0 0 12px color-mix(in srgb, var(--rmd-accent, #fff) 65%, transparent)); animation: ramadan-pulse 5s ease-in-out infinite; } .ramadan-particle--lantern-glow { bottom: 0; left: 3%; width: 160px; height: 120px; background: radial-gradient(ellipse, color-mix(in srgb, var(--rmd-secondary, #C0733B) 40%, transparent), transparent 70%); } @keyframes ramadan-twinkle { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } } @keyframes ramadan-float-up { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 0.7; } 90% { opacity: 0.5; } 100% { transform: translateY(-100vh); opacity: 0; } } @keyframes ramadan-drift { 0%, 100% { transform: translate(0, 0); opacity: 0.5; } 50% { transform: translate(10px, -14px); opacity: 1; } } /* PDF viewer stays clean */ #viewer .ramadan-particle-layer, .pdf-canvas ~ .ramadan-particle, .page-wrapper .ramadan-particle { display: none !important; } @media (prefers-reduced-motion: reduce) { .ramadan-particle, .ramadan-ai-avatar--themed::after, .ramadan-login-deco__item--lantern::before { animation: none !important; } } .ramadan-login-greeting { text-align: center; font-family: 'Space Mono', monospace; font-size: 15px; font-weight: 700; color: var(--rmd-accent, #fff); margin-bottom: 14px; letter-spacing: .08em; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--rmd-accent, #fff) 60%, transparent)); } .ramadan-ai-panel { border-color: color-mix(in srgb, var(--rmd-accent, #fff) 25%, transparent) !important; box-shadow: 0 0 0 1px color-mix(in srgb, var(--rmd-accent, #fff) 15%, transparent), 0 32px 80px rgba(0,0,0,.8), 0 0 60px color-mix(in srgb, var(--rmd-accent, #fff) 12%, transparent) !important; animation: ramadan-panel-glow 4s ease-in-out infinite; } @keyframes ramadan-panel-glow { 0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--rmd-accent, #fff) 12%, transparent), 0 32px 80px rgba(0,0,0,.8), 0 0 40px color-mix(in srgb, var(--rmd-accent, #fff) 8%, transparent); } 50% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--rmd-accent, #fff) 30%, transparent), 0 32px 80px rgba(0,0,0,.8), 0 0 70px color-mix(in srgb, var(--rmd-accent, #fff) 18%, transparent); } } .ramadan-ai-panel-icon { font-size: 15px; margin-right: 8px; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--rmd-accent, #fff) 75%, transparent)); animation: ramadan-sway 4s ease-in-out infinite; } /* ═══ SIDEBAR FESTIVE TOUCH ═══ */ html[data-ramadan="on"] #sidebar .sb-brand-icon { box-shadow: 0 0 14px color-mix(in srgb, var(--rmd-accent, #fff) 45%, transparent); animation: ramadan-icon-breathe 3.4s ease-in-out infinite; } html[data-ramadan="on"] .nav-item.active { border-color: color-mix(in srgb, var(--rmd-accent, #fff) 40%, transparent) !important; background: linear-gradient(90deg, color-mix(in srgb, var(--rmd-primary, #000) 35%, transparent), color-mix(in srgb, var(--rmd-secondary, #000) 15%, transparent)) !important; } html[data-ramadan="on"] .nav-item.active::before { background: var(--rmd-accent, #fff) !important; box-shadow: 0 0 8px color-mix(in srgb, var(--rmd-accent, #fff) 80%, transparent); } html[data-ramadan="on"] .nav-item:hover { border-color: color-mix(in srgb, var(--rmd-accent, #fff) 22%, transparent) !important; background: color-mix(in srgb, var(--rmd-accent, #fff) 6%, transparent) !important; } /* ═══ HEADER BUTTONS ═══ */ html[data-ramadan="on"] .hdr-btn:hover { border-color: color-mix(in srgb, var(--rmd-accent, #fff) 45%, transparent) !important; box-shadow: 0 0 12px color-mix(in srgb, var(--rmd-accent, #fff) 25%, transparent); } html[data-ramadan="on"] #timer-pill { border-color: color-mix(in srgb, var(--rmd-accent, #fff) 30%, rgba(255,214,10,0.18)) !important; } /* ═══ CARDS ON HOVER ═══ */ html[data-ramadan="on"] .qa-card:hover, html[data-ramadan="on"] .qm-card:hover, html[data-ramadan="on"] .game-card:hover { border-color: color-mix(in srgb, var(--rmd-accent, #fff) 35%, transparent) !important; box-shadow: 0 8px 24px color-mix(in srgb, var(--rmd-accent, #fff) 14%, transparent), 0 8px 18px rgba(0,0,0,.35) !important; } /* ═══ AI PANEL BUTTONS ═══ */ html[data-ramadan="on"] .mg-hdr-btn:hover { border-color: color-mix(in srgb, var(--rmd-accent, #fff) 45%, transparent) !important; box-shadow: 0 0 14px color-mix(in srgb, var(--rmd-accent, #fff) 22%, transparent) !important; } html[data-ramadan="on"] .mg-media-chip { border-color: color-mix(in srgb, var(--rmd-accent, #fff) 22%, transparent) !important; } html[data-ramadan="on"] .mg-media-chip:hover { background: color-mix(in srgb, var(--rmd-accent, #fff) 10%, transparent) !important; border-color: color-mix(in srgb, var(--rmd-accent, #fff) 45%, transparent) !important; } html[data-ramadan="on"] #mg36-send { background: linear-gradient(135deg, var(--rmd-accent, #00e5ff), var(--rmd-secondary, #7b2fff)) !important; } html[data-ramadan="on"] .mg-logo { box-shadow: 0 0 20px color-mix(in srgb, var(--rmd-accent, #fff) 35%, transparent), inset 0 1px 0 rgba(255,255,255,.25) !important; } /* ═══ AI CHAT BUBBLES — FESTIVE ═══ */ html[data-ramadan="on"] .mg-bubble-user { background: linear-gradient(135deg, color-mix(in srgb, var(--rmd-accent, #00e5ff) 16%, transparent), color-mix(in srgb, var(--rmd-secondary, #7b2fff) 14%, transparent)) !important; border-color: color-mix(in srgb, var(--rmd-accent, #fff) 32%, transparent) !important; } html[data-ramadan="on"] .mg-bubble-ai { border-color: color-mix(in srgb, var(--rmd-accent, #fff) 14%, transparent) !important; position: relative; overflow: hidden; } html[data-ramadan="on"] .mg-bubble-ai::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--rmd-accent, #fff) 55%, transparent), transparent); animation: ramadan-bubble-sheen 4.5s ease-in-out infinite; pointer-events: none; } @keyframes ramadan-bubble-sheen { 0%, 100% { opacity: .3; } 50% { opacity: 1; } } html[data-ramadan="on"] .mg-expl-lang-flag { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--rmd-accent, #fff) 60%, transparent)); } html[data-ramadan="on"] .mg-expl-lang-lbl { color: var(--rmd-accent, var(--mg-p)) !important; } html[data-ramadan="on"] .mg-expl-body strong { color: var(--rmd-accent, rgba(0,212,255,.92)) !important; } html[data-ramadan="on"] .mg-badge { border-color: color-mix(in srgb, var(--rmd-accent, #fff) 20%, transparent) !important; color: color-mix(in srgb, var(--rmd-accent, #fff) 70%, var(--mg-dim) 30%) !important; } html[data-ramadan="on"] .mg-exam-toggle { background: color-mix(in srgb, var(--rmd-secondary, #000) 10%, transparent) !important; } html[data-ramadan="on"] .mg-exam-toggle-lbl { color: var(--rmd-accent, var(--mg-acc)) !important; } html[data-ramadan="on"] .mg-exam-q { border-color: color-mix(in srgb, var(--rmd-accent, #fff) 18%, transparent) !important; } html[data-ramadan="on"] .mg-empty-glow { border-color: color-mix(in srgb, var(--rmd-accent, #fff) 22%, transparent) !important; box-shadow: 0 0 48px color-mix(in srgb, var(--rmd-accent, #fff) 14%, transparent) !important; } html[data-ramadan="on"] .mg-empty-title { color: var(--rmd-accent, var(--mg-p)) !important; } html[data-ramadan="on"] .mg-chip:hover { border-color: color-mix(in srgb, var(--rmd-accent, #fff) 38%, transparent) !important; color: var(--rmd-accent, var(--mg-p)) !important; background: color-mix(in srgb, var(--rmd-accent, #fff) 8%, transparent) !important; } /* ═══ EXTRA RAMADAN VIBES ═══ */ /* Themed scrollbar inside AI panel */ html[data-ramadan="on"] #mg36-msgs::-webkit-scrollbar-thumb { background: linear-gradient(180deg, color-mix(in srgb, var(--rmd-accent, #fff) 55%, transparent), color-mix(in srgb, var(--rmd-secondary, #fff) 55%, transparent)) !important; } /* Typing dots glow with theme color */ html[data-ramadan="on"] .mg-dot { background: color-mix(in srgb, var(--rmd-accent, #fff) 65%, transparent) !important; box-shadow: 0 0 6px color-mix(in srgb, var(--rmd-accent, #fff) 50%, transparent); } /* Send button festive pulse */ html[data-ramadan="on"] #mg36-send { animation: ramadan-send-pulse 2.6s ease-in-out infinite; } @keyframes ramadan-send-pulse { 0%, 100% { box-shadow: 0 4px 16px color-mix(in srgb, var(--rmd-accent, #fff) 30%, transparent); } 50% { box-shadow: 0 4px 26px color-mix(in srgb, var(--rmd-accent, #fff) 55%, transparent); } } /* Header title gradient shimmer */ html[data-ramadan="on"] #mg36-hdr-title, html[data-ramadan="on"] .home-name span { background: linear-gradient(90deg, var(--rmd-accent, #fff), var(--rmd-secondary, #fff), var(--rmd-accent, #fff)) !important; background-size: 200% auto; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; animation: ramadan-text-shimmer 5s linear infinite; } @keyframes ramadan-text-shimmer { 0% { background-position: 0% center; } 100% { background-position: 200% center; } } /* Small corner crescent inside AI panel — subtle, non-intrusive */ html[data-ramadan="on"] #mg36-panel::before { content: '🌙'; position: absolute; bottom: 10px; left: 14px; font-size: 13px; opacity: .35; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--rmd-accent, #fff) 60%, transparent)); pointer-events: none; z-index: 1; animation: ramadan-icon-breathe 5s ease-in-out infinite; } /* xp bar festive glow */ html[data-ramadan="on"] .xp-bar-fill { background: linear-gradient(90deg, var(--rmd-accent, #fff), var(--rmd-secondary, #fff)) !important; box-shadow: 0 0 10px color-mix(in srgb, var(--rmd-accent, #fff) 45%, transparent); } /* home xp card subtle themed border */ html[data-ramadan="on"] .xp-card { border-color: color-mix(in srgb, var(--rmd-accent, #fff) 22%, transparent) !important; } /* streak flame glow */ html[data-ramadan="on"] .xp-streak-num { color: var(--rmd-accent, var(--p)) !important; text-shadow: 0 0 8px color-mix(in srgb, var(--rmd-accent, #fff) 45%, transparent); } /* ═══ SPLASH SCREEN — FESTIVE ═══ */ html[data-ramadan="on"] #splash-bg { background: radial-gradient(ellipse 60% 50% at 50% 30%, color-mix(in srgb, var(--rmd-primary, #000) 45%, transparent) 0%, transparent 70%), var(--login-bg) !important; } html[data-ramadan="on"] .splash-text-full::after, html[data-ramadan="on"] .splash-left-half, html[data-ramadan="on"] .splash-right-half { background: linear-gradient(120deg, var(--rmd-accent, #00e5ff) 0%, var(--rmd-secondary, #9b6fff) 55%, var(--rmd-accent, #e040fb) 100%) !important; background-size: 200% auto !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; animation: ramadan-text-shimmer 3.2s linear infinite !important; } html[data-ramadan="on"] .splash-sub { color: color-mix(in srgb, var(--rmd-accent, #fff) 55%, rgba(255,255,255,.3) 45%) !important; } html[data-ramadan="on"] .splash-wordmark::before { content: var(--rmd-splash-icon, "✨"); position: absolute; top: -46px; left: 50%; transform: translateX(-50%); font-size: 32px; opacity: 0; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--rmd-accent, #fff) 70%, transparent)); animation: ramadan-splash-icon-in .6s .2s cubic-bezier(.22,1,.36,1) forwards, ramadan-icon-breathe 2.8s .85s ease-in-out infinite; } @keyframes ramadan-splash-icon-in { from { opacity: 0; transform: translateX(-50%) translateY(12px) scale(.6); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } } /* soft glow pulse behind the whole splash text */ html[data-ramadan="on"] .splash-wordmark::after { content: ''; position: absolute; inset: -30px -60px; background: radial-gradient(ellipse, color-mix(in srgb, var(--rmd-accent, #fff) 14%, transparent) 0%, transparent 70%); z-index: -1; animation: ramadan-icon-breathe 3.4s ease-in-out infinite; pointer-events: none; }