Spaces:
Sleeping
Sleeping
| /* style.css - MoodVerse (Elegant Purple-Serene Theme with Mystical Glow) */ | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| @import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&display=swap'); /* Poetic Arabic font */ | |
| body { | |
| font-family: 'Inter', system-ui, -apple-system, sans-serif; | |
| background: linear-gradient(135deg, #f8f5ff 0%, #f3e8ff 50%, #ede9fe 100%); | |
| background-image: | |
| radial-gradient(circle at 20% 80%, rgba(180, 140, 255, 0.15) 0%, transparent 50%), | |
| radial-gradient(circle at 80% 20%, rgba(147, 197, 253, 0.15) 0%, transparent 50%); | |
| color: #2d1b4e; | |
| } | |
| .main { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| } | |
| /* Header */ | |
| .header-welcome { | |
| text-align: center; | |
| background: rgba(255, 255, 255, 0.92); | |
| backdrop-filter: blur(12px); | |
| padding: 24px; | |
| border-radius: 24px; | |
| box-shadow: 0 8px 40px rgba(120, 72, 200, 0.15); | |
| margin-bottom: 24px; | |
| border: 1px solid rgba(255, 255, 255, 0.3); | |
| } | |
| .header-welcome h1 { | |
| font-size: 3em; | |
| background: linear-gradient(135deg, #6a11cb, #a044ff); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| margin: 0 0 12px 0; | |
| font-weight: 700; | |
| letter-spacing: -0.02em; | |
| text-shadow: 0 2px 12px rgba(160, 68, 255, 0.25); | |
| } | |
| .header-welcome em { | |
| font-size: 1.2em; | |
| color: #9c27b0; | |
| font-weight: 400; | |
| font-style: italic; | |
| display: block; | |
| margin-top: 6px; | |
| } | |
| /* Personal Touch */ | |
| .personal-touch { | |
| background: linear-gradient(135deg, #fdf4ff 0%, #f3e8ff 100%); | |
| padding: 16px; | |
| border-radius: 14px; | |
| margin: 12px 0; | |
| border-left: 4px solid #d8b4fe; | |
| font-size: 1em; | |
| color: #6d28d9; | |
| box-shadow: 0 3px 10px rgba(173, 127, 255, 0.1); | |
| } | |
| /* Content Containers */ | |
| .tab-content, .mood-content, .output-section { | |
| background: rgba(255, 255, 255, 0.92); | |
| backdrop-filter: blur(12px); | |
| padding: 18px; | |
| border-radius: 20px; | |
| box-shadow: 0 6px 28px rgba(120, 72, 200, 0.15); | |
| border: 1px solid rgba(255, 255, 255, 0.25); | |
| margin-bottom: 14px; | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .tab-content:hover, .mood-content:hover, .output-section:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 36px rgba(120, 72, 200, 0.2); | |
| } | |
| /* Placeholder */ | |
| .output-placeholder { | |
| text-align: center; | |
| color: #7e22ce; | |
| font-style: italic; | |
| padding: 22px; | |
| font-size: 1.2em; | |
| } | |
| /* Poetic Card with Sparkles */ | |
| .poetic-card { | |
| position: relative; /* required for pseudo-element positioning */ | |
| max-width: 1000px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| border-radius: 22px; | |
| background: linear-gradient(135deg, #faf5ff 0%, #ede9fe 100%); | |
| box-shadow: 0 10px 40px rgba(147, 51, 234, 0.15); | |
| font-family: 'Amiri', serif; | |
| border: 1px solid #c4b5fd; | |
| animation: fadeInUp 0.7s ease-out; | |
| overflow: hidden; /* hide overflowing sparkles */ | |
| } | |
| /* Sparkle overlay */ | |
| .poetic-card::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; left: 0; | |
| width: 100%; height: 100%; | |
| background: radial-gradient(circle, rgba(255,255,255,0.4) 1px, transparent 1px); | |
| background-size: 20px 20px; | |
| pointer-events: none; /* allow clicks through sparkles */ | |
| animation: sparkleMove 6s linear infinite; | |
| z-index: 0; /* behind the content */ | |
| } | |
| /* Keep card content above sparkles */ | |
| .poetic-card > * { | |
| position: relative; | |
| z-index: 1; | |
| } | |
| /* Sparkle movement */ | |
| @keyframes sparkleMove { | |
| 0% { background-position: 0 0; } | |
| 50% { background-position: 10px 10px; } | |
| 100% { background-position: 0 0; } | |
| } | |
| /* Tagline */ | |
| .tagline-section { | |
| font-size: 20px; | |
| color: #6d28d9; /* Slightly brighter for pop */ | |
| font-weight: 600; | |
| margin-bottom: 12px; | |
| text-align: center; | |
| } | |
| /* Expander */ | |
| .expander-section details { | |
| background: rgba(250, 245, 255, 0.85); | |
| padding: 12px; | |
| border-radius: 10px; | |
| border: 1px solid #c4b5fd; | |
| display: inline-block; | |
| } | |
| .expander-section summary { | |
| font-weight: 600; | |
| color: #7c3aed; | |
| cursor: pointer; | |
| } | |
| /* Verse Labels */ | |
| .verse-label { | |
| font-size: 14px; | |
| font-weight: 600; | |
| color: #7c3aed; | |
| margin-bottom: 4px; | |
| text-align: center; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| /* Surah & Verse Styling */ | |
| .surah-title { | |
| font-weight: 700; | |
| font-size: 19px; | |
| margin-bottom: 12px; | |
| text-align: center; | |
| background: linear-gradient(135deg, #7c3aed, #9333ea); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| text-shadow: 0 2px 6px rgba(147, 51, 234, 0.25); | |
| } | |
| .arabic-text { | |
| direction: rtl; | |
| text-align: right; | |
| font-size: 30px; | |
| color: #4c1d95; | |
| margin-bottom: 12px; | |
| font-family: 'Amiri', serif; | |
| text-shadow: 0 2px 12px rgba(124, 58, 237, 0.4); /* mystical glow */ | |
| } | |
| .english-text { | |
| font-size: 16px; | |
| margin-bottom: 10px; | |
| line-height: 1.6; | |
| color: #312e81; | |
| text-align: left; | |
| } | |
| .urdu-text { | |
| font-size: 16px; | |
| margin-bottom: 10px; | |
| line-height: 1.6; | |
| color: #312e81; | |
| text-align: right; | |
| direction: rtl; | |
| } | |
| /* Tafseer */ | |
| .tafseer-divider { border-color: #9c27b0; margin: 12px 0; } | |
| .tafseer-en-title, .tafseer-ur-title { | |
| font-size: 15px; | |
| color: #6d28d9; | |
| margin-bottom: 6px; | |
| font-weight: bold; | |
| } | |
| .tafseer-en-text, .tafseer-ur-text { | |
| font-size: 14px; | |
| color: #374151; | |
| margin-bottom: 8px; | |
| } | |
| /* Mood Buttons & Heading */ | |
| .mood-grid { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 12px; | |
| margin-top: 12px; | |
| justify-content: space-around; | |
| } | |
| /* Mood Buttons */ | |
| .mood-btn { | |
| font-weight: 600; | |
| border: none; | |
| border-radius: 14px; | |
| padding: 14px 20px; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| box-shadow: 0 5px 18px rgba(0, 0, 0, 0.2); | |
| cursor: pointer; | |
| min-width: 140px; | |
| flex: 1 1 20%; | |
| max-width: 180px; | |
| text-align: center; | |
| /* Remove default background/color here */ | |
| /* color will be inherited from inline style (white) */ | |
| } | |
| .mood-btn:hover { | |
| transform: translateY(-3px) scale(1.03); | |
| box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25); | |
| } | |
| .mood-btn:active { | |
| transform: translateY(0); | |
| } | |
| .mood-heading { | |
| text-align: center; | |
| font-weight: 700; | |
| font-size: 22px; | |
| background: linear-gradient(135deg, #7c3aed, #9333ea); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| margin-bottom: 10px; | |
| text-shadow: 0 2px 6px rgba(147, 51, 234, 0.3); | |
| animation: glowMood 1.2s ease-in-out infinite alternate; | |
| } | |
| @keyframes glowMood { | |
| 0% { text-shadow: 0 2px 6px rgba(147, 51, 234, 0.3); } | |
| 100% { text-shadow: 0 2px 14px rgba(147, 51, 234, 0.6); } | |
| } | |
| /* Multicolored moods */ | |
| .mood-btn:nth-child(1) { background: linear-gradient(135deg, #6a11cb, #a044ff); } | |
| .mood-btn:nth-child(2) { background: linear-gradient(135deg, #9333ea, #c084fc); } | |
| .mood-btn:nth-child(3) { background: linear-gradient(135deg, #ec4899, #f472b6); } | |
| .mood-btn:nth-child(4) { background: linear-gradient(135deg, #3b82f6, #60a5fa); } | |
| .mood-btn:nth-child(5) { background: linear-gradient(135deg, #10b981, #34d399); } | |
| .mood-btn:nth-child(6) { background: linear-gradient(135deg, #f59e0b, #fbbf24); } | |
| /* Hover & Active */ | |
| .mood-btn:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 10px 28px rgba(0,0,0,0.25); } | |
| .mood-btn:active { transform: translateY(0); } | |
| /* Forms */ | |
| .search-form { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 16px; | |
| margin-top: 12px; | |
| } | |
| .stTextInput > div > div > input, | |
| .stSelectbox > div, .stRadio > div { | |
| border-radius: 14px; | |
| border: 2px solid #c4b5fd; | |
| background: rgba(255, 255, 255, 0.85); | |
| transition: all 0.3s ease; | |
| padding: 10px 14px; | |
| } | |
| .stTextInput > div > div > input:focus, | |
| .stSelectbox > div:focus, .stRadio > div:focus { | |
| border-color: #7c3aed; | |
| box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15); | |
| } | |
| /* Buttons */ | |
| .stButton > button { | |
| background: linear-gradient(135deg, #6d28d9 0%, #9333ea 100%); | |
| color: white; | |
| border-radius: 14px; | |
| padding: 12px 22px; | |
| font-weight: 600; | |
| border: none; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 5px 20px rgba(124, 58, 237, 0.25); | |
| width: 100%; | |
| } | |
| .stButton > button:hover { | |
| background: linear-gradient(135deg, #5b21b6 0%, #7c3aed 100%); | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 30px rgba(124, 58, 237, 0.35); | |
| } | |
| /* Animations */ | |
| @keyframes fadeInUp { | |
| from { opacity: 0; transform: translateY(30px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .main .block-container { animation: fadeInUp 0.6s ease-out forwards; } | |
| /* Responsive */ | |
| @media (max-width: 768px) { | |
| .header-welcome h1 { font-size: 2.2em; } | |
| .mood-grid { flex-direction: column; gap: 10px; } | |
| .search-form { grid-template-columns: 1fr; gap: 14px; } | |
| .poetic-card { padding: 14px; } | |
| .arabic-text { font-size: 24px; } | |
| } | |