/* ╔════════════════════════════════════════════════════════════════╗ ║ SABR.AI APP-DESIGN (Premium iOS-Style Layer) ║ ║ Diese Datei wird NACH style.css geladen → übersteuert sauber ║ ║ Keine !important-Spaghetti. Klare Spezifität durch Layer. ║ ╚════════════════════════════════════════════════════════════════╝ */ /* ════════════════════════════════════════════════════════════════ 01. FONT - Plus Jakarta Sans als Premium-App-Schrift ════════════════════════════════════════════════════════════════ */ :root { /* Premium Font Stack — Plus Jakarta Sans + iOS-System */ --font-app: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --font-arabic: 'Amiri', 'Scheherazade New', serif; } html, body, .pages, .page, .app-header, .bottom-nav, button, input, textarea, select, .section-title, .welcome-banner, .daily-goal-card, .mawaqit-card, .uc-name, .uc-status, .uc-subtitle, .cm-greeting, .cm-body, .cm-time, .salat-hero-title, .salat-translation, .stats-title, .stats-sub, .stats-pct, .fc-title, .fc-sub, .lpc-title, .lpc-text, .lpc-status, .pc-name, .pc-rakah, .qc-title, .qc-dir, .qc-deg, .kt-label, .kt-detail, .kt-pct, .qh-title, .qh-sub, .qd-title, .qd-sub, .surah-list-item, .surah-name, .surah-arabic, .surah-meta, .cat-card, .cat-label, .fh-name, .fh-members, .fh-xp, .ftc-title, .ftc-sub, .ftc-num, .tc-title, .tc-prize, .fc-title, .fc-desc, .uc-hero-title, .uc-hero-sub, .uc-hero-name { font-family: var(--font-app); font-feature-settings: "cv11", "ss03", "salt"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Arabisch behält Amiri */ .arabic, .ayah, [lang="ar"], .splash-bismillah, .logo-bismillah, .salat-arabic, .ucbt-ar { font-family: var(--font-arabic); } /* ════════════════════════════════════════════════════════════════ 02. GLOBAL TAP-FEEDBACK (iOS-spürbar überall) ════════════════════════════════════════════════════════════════ */ .pages button, .pages [role="button"], .pages .nav-btn, .pages .cat-card, .pages .prayer-card, .pages .surah-list-item, .pages .utc-chip, .pages .uc-sugg, .pages .uc-back, .pages .uc-clear, .pages .uc-mic, .pages .uc-send, .pages .fatiha-cta, .pages .last-prayer-card, .pages .qibla-card, .pages .stats-card, .pages .salat-hero, .pages .ht-check-cell { -webkit-tap-highlight-color: transparent; transition: transform 0.12s cubic-bezier(0.16, 1, 0.3, 1), filter 0.12s ease-out; } .pages button:active, .pages [role="button"]:active, .pages .nav-btn:active, .pages .cat-card:active, .pages .prayer-card:active, .pages .surah-list-item:active, .pages .utc-chip:active, .pages .uc-sugg:active, .pages .fatiha-cta:active, .pages .last-prayer-card:active, .pages .qibla-card:active, .pages .salat-hero:active { transform: scale(0.97); filter: brightness(1.06); } .pages .uc-back:active, .pages .uc-clear:active, .pages .uc-mic:active, .pages .uc-send:active, .pages .ht-check-cell:active { transform: scale(0.92); } /* ════════════════════════════════════════════════════════════════ 03. PAGE-TRANSITIONS (smooth Slide-In beim Tab-Wechsel) ════════════════════════════════════════════════════════════════ */ .pages > .page { display: none; } .pages > .page.active { display: block; /* v333: Einblend-Animation ENTFERNT. Das alte appPageIn nutzte transform: translateY + 0.38s — genau in diesem Animations-Fenster hat iOS die gesetzte Scroll-Position verworfen → sichtbarer Sprung. Ohne Animation erscheint die Seite SOFORT an der richtigen (unteren) Position. */ } /* ════════════════════════════════════════════════════════════════ 04. BOTTOM-NAV (echter iOS Tab-Bar Look) ════════════════════════════════════════════════════════════════ */ .bottom-nav.bottom-nav { background: linear-gradient(180deg, rgba(7,12,28,0.92) 0%, rgba(4,8,20,0.99) 100%); border-top: 1px solid rgba(229,196,106,0.10); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); box-shadow: 0 -8px 32px rgba(0,0,0,0.45), 0 -1px 0 rgba(255,255,255,0.04); padding: 6px 8px calc(8px + env(safe-area-inset-bottom)); } .bottom-nav .nav-btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px 4px 6px; border-radius: 14px; font-size: 9.5px; font-weight: 600; letter-spacing: 0.2px; color: rgba(232,238,248,0.42); background: transparent; transition: color 0.32s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1); cursor: pointer; } .bottom-nav .nav-btn::before { content: ''; position: absolute; top: 50%; left: 50%; width: 48px; height: 40px; transform: translate(-50%, -50%) scale(0.7); border-radius: 14px; background: radial-gradient(circle, rgba(229,196,106,0.25) 0%, rgba(229,196,106,0.08) 50%, transparent 100%); opacity: 0; transition: opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1), transform 0.42s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; box-shadow: none; z-index: 0; } .bottom-nav .nav-btn svg { position: relative; z-index: 1; width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; transition: stroke 0.32s cubic-bezier(0.16, 1, 0.3, 1), transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), filter 0.32s cubic-bezier(0.16, 1, 0.3, 1); } .bottom-nav .nav-btn span { position: relative; z-index: 1; } .bottom-nav .nav-btn.active { color: #f5e8b8; } .bottom-nav .nav-btn.active::before { opacity: 1; transform: translate(-50%, -50%) scale(1); } .bottom-nav .nav-btn.active svg { stroke: #f5d878; filter: drop-shadow(0 0 8px rgba(245,216,120,0.55)); transform: translateY(-1px) scale(1.06); } .bottom-nav .nav-btn:active { transform: scale(0.92); } /* ════════════════════════════════════════════════════════════════ 05. APP-HEADER Polish ════════════════════════════════════════════════════════════════ */ .app-header { background: linear-gradient(180deg, rgba(5,10,22,0.92) 0%, rgba(5,10,22,0.72) 100%); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid rgba(229,196,106,0.08); } .logo-brand { letter-spacing: -0.02em; font-weight: 800; } /* ════════════════════════════════════════════════════════════════ 06. SCROLLBAR Polish (iOS-Style hidden scrollbar) ════════════════════════════════════════════════════════════════ */ .pages, .page, .uc-chat-box, .surah-list, .dua-list { scrollbar-width: thin; scrollbar-color: rgba(229,196,106,0.15) transparent; } .pages::-webkit-scrollbar, .page::-webkit-scrollbar, .uc-chat-box::-webkit-scrollbar, .surah-list::-webkit-scrollbar, .dua-list::-webkit-scrollbar { width: 4px; height: 4px; } .pages::-webkit-scrollbar-thumb, .uc-chat-box::-webkit-scrollbar-thumb { background: rgba(229,196,106,0.18); border-radius: 999px; } /* ════════════════════════════════════════════════════════════════ 07. SECTION-TITLE einheitlich überall ════════════════════════════════════════════════════════════════ */ .pages .section-title { font-family: var(--font-app); font-size: 11px; font-weight: 600; color: #f5d878; letter-spacing: 2.2px; text-transform: uppercase; margin: 24px 4px 12px; opacity: 0.85; } /* ════════════════════════════════════════════════════════════════ 08. INPUT-DEFAULTS (überall einheitlich) ════════════════════════════════════════════════════════════════ */ .pages input[type="text"]:not(.uc-input-wrap input):not(.sa-input-wrap input), .pages input[type="number"], .pages input[type="email"], .pages input[type="password"], .pages input[type="search"], .pages textarea { font-family: var(--font-app); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); border-radius: 14px; color: #f5f0e1; padding: 13px 16px; font-size: 15px; transition: border-color 0.25s ease-out, box-shadow 0.25s ease-out; } .pages input:focus, .pages textarea:focus, .pages select:focus { outline: none; border-color: rgba(229,196,106,0.42); box-shadow: 0 0 0 3px rgba(229,196,106,0.12); } /* ════════════════════════════════════════════════════════════════ 09. TAWBA CHAT - PREMIUM REDESIGN (sauber, iOS-Style, no !important) ════════════════════════════════════════════════════════════════ */ /* --- Container --- */ #page-ustadh .ustadh-chat { position: relative; display: flex; flex-direction: column; height: calc(100vh - 90px); height: calc(100dvh - 90px); min-height: 0; background: radial-gradient(ellipse 95% 40% at 50% 0%, rgba(229,196,106,0.10) 0%, transparent 65%), radial-gradient(ellipse 100% 60% at 50% 100%, rgba(60,80,140,0.05) 0%, transparent 60%), linear-gradient(180deg, #050a1f 0%, #060d28 50%, #07112d 100%); border-radius: 28px; border: 1px solid rgba(229,196,106,0.10); overflow: hidden; box-shadow: inset 0 1px 0 rgba(229,196,106,0.08), 0 16px 48px rgba(0,0,0,0.55); animation: tawbaIn 0.55s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes tawbaIn { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } } /* --- Atmosphäre (Sterne + Glow) - subtil --- */ #page-ustadh .uc-bg-atmosphere { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; } #page-ustadh .uc-bg-glow { position: absolute; top: -140px; left: 50%; transform: translateX(-50%); width: 540px; height: 540px; border-radius: 50%; background: radial-gradient(circle, rgba(229,196,106,0.13) 0%, rgba(229,196,106,0.03) 45%, transparent 70%); filter: blur(48px); animation: tawbaGlow 8s ease-in-out infinite; } @keyframes tawbaGlow { 0%, 100% { opacity: 0.55; transform: translateX(-50%) scale(1); } 50% { opacity: 0.95; transform: translateX(-50%) scale(1.08); } } #page-ustadh .uc-bg-stars span { position: absolute; width: 1.4px; height: 1.4px; background: rgba(255,245,220,0.5); border-radius: 50%; box-shadow: 0 0 3px rgba(255,245,220,0.45), 0 0 6px rgba(255,245,220,0.2); animation: tawbaTwinkle 5s ease-in-out infinite; } @keyframes tawbaTwinkle { 0%, 100% { opacity: 0.12; transform: scale(0.7); } 50% { opacity: 0.65; transform: scale(1.3); } } /* --- Header --- */ #page-ustadh .uc-header { position: relative; z-index: 10; display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 12px; background: linear-gradient(180deg, rgba(229,196,106,0.07), transparent); border-bottom: 1px solid rgba(229,196,106,0.12); backdrop-filter: blur(14px) saturate(180%); -webkit-backdrop-filter: blur(14px) saturate(180%); } /* Back & Clear Buttons */ #page-ustadh .uc-back, #page-ustadh .uc-clear { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.10); color: rgba(232,238,248,0.78); display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; transition: all 0.2s ease-out; } #page-ustadh .uc-back:hover, #page-ustadh .uc-clear:hover { background: rgba(229,196,106,0.10); border-color: rgba(229,196,106,0.25); } /* Mond-Avatar */ #page-ustadh .uc-avatar { width: 54px; height: 54px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #1a1d36 0%, #0a0d20 100%); border: 1.5px solid rgba(229,196,106,0.35); display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; overflow: hidden; box-shadow: 0 0 22px rgba(229,196,106,0.42), 0 0 8px rgba(229,196,106,0.3), inset 0 0 14px rgba(229,196,106,0.12); animation: tawbaAvatarBreath 4s ease-in-out infinite; } @keyframes tawbaAvatarBreath { 0%, 100% { box-shadow: 0 0 22px rgba(229,196,106,0.42), 0 0 8px rgba(229,196,106,0.3), inset 0 0 14px rgba(229,196,106,0.12); } 50% { box-shadow: 0 0 32px rgba(229,196,106,0.65), 0 0 16px rgba(229,196,106,0.45), inset 0 0 18px rgba(229,196,106,0.18); } } #page-ustadh .uc-avatar svg { width: 42px; height: 42px; filter: drop-shadow(0 0 5px rgba(229,196,106,0.7)); animation: tawbaAvatarFloat 6s ease-in-out infinite; } @keyframes tawbaAvatarFloat { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-2px) rotate(2deg); } } /* Name + Status */ #page-ustadh .uc-info { flex: 1; min-width: 0; } #page-ustadh .uc-name { font-size: 19px; font-weight: 700; color: #f5e8b8; letter-spacing: -0.2px; line-height: 1.15; text-shadow: 0 0 14px rgba(245,232,184,0.22); } #page-ustadh .uc-status { font-size: 13px; color: rgba(232,238,248,0.62); display: flex; align-items: center; gap: 7px; margin-top: 3px; font-weight: 500; letter-spacing: 0.1px; } #page-ustadh .uc-status .uc-dot { width: 8px; height: 8px; border-radius: 50%; background: #4caf76; box-shadow: 0 0 10px rgba(76,175,118,0.8); animation: tawbaDotPulse 2.2s ease-in-out infinite; display: inline-block; } @keyframes tawbaDotPulse { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.3); } } /* --- Chat-Box --- */ #page-ustadh .uc-chat-box { flex: 1; position: relative; z-index: 2; overflow-y: auto; padding: 20px 16px 20px; display: flex; flex-direction: column; gap: 18px; scroll-behavior: smooth; min-height: 0; } /* --- Bubbles - Glassmorphism Premium --- */ #page-ustadh .chat-msg { position: relative; max-width: 88%; padding: 14px 16px; font-size: 15px; line-height: 1.55; letter-spacing: 0.1px; border-radius: 20px; background: transparent; border: 1px solid transparent; box-shadow: none; animation: tawbaMsgIn 0.5s cubic-bezier(0.16, 1, 0.3, 1); } #page-ustadh .chat-msg::before, #page-ustadh .chat-msg::after { display: none; } @keyframes tawbaMsgIn { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Bot-Bubble (links, Glas) */ #page-ustadh .chat-msg.bot { align-self: flex-start; background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.028) 100%); border: 1px solid rgba(255,255,255,0.10); border-radius: 20px 20px 20px 6px; color: rgba(245,248,255,0.94); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 24px -8px rgba(0,0,0,0.5); } #page-ustadh .chat-msg.bot .cm-greeting, #page-ustadh .chat-msg.bot strong { display: block; font-family: var(--font-app); font-size: 15px; font-weight: 700; font-style: normal; color: #f5d878; margin-bottom: 6px; letter-spacing: 0.1px; } #page-ustadh .chat-msg.bot .cm-emoji { display: inline-block; font-size: 1.1em; margin-left: 4px; vertical-align: middle; } #page-ustadh .chat-msg.bot .cm-body { font-size: 15px; line-height: 1.55; color: rgba(245,248,255,0.92); font-weight: 400; } #page-ustadh .chat-msg.bot .cm-time { display: block; font-size: 11px; color: rgba(232,238,248,0.4); margin-top: 8px; letter-spacing: 0.3px; font-weight: 500; } /* Ayah-Block (Quran-Vers) */ #page-ustadh .chat-msg.bot .ayah { font-family: var(--font-arabic); font-size: 1.5rem; text-align: center; margin: 14px 0 6px; color: #f5e8b8; direction: rtl; line-height: 1.85; text-shadow: 0 0 22px rgba(245,232,184,0.3); padding: 4px 0; border: none; } #page-ustadh .chat-msg.bot .ayah-tr { font-size: 11.5px; font-style: italic; text-align: center; color: rgba(232,238,248,0.52); margin-bottom: 8px; letter-spacing: 0.3px; } #page-ustadh .chat-msg.bot .dua-tip { background: rgba(229,196,106,0.08); border: 1px solid rgba(229,196,106,0.18); padding: 9px 13px; margin-top: 12px; border-radius: 12px; font-size: 13px; font-style: italic; color: rgba(245,216,120,0.92); letter-spacing: 0.2px; } /* User-Bubble (rechts, Gold) */ #page-ustadh .chat-msg.user { align-self: flex-end; max-width: 84%; margin-left: auto; background: linear-gradient(135deg, rgba(229,196,106,0.16) 0%, rgba(229,196,106,0.07) 100%); border: 1px solid rgba(229,196,106,0.28); border-radius: 20px 20px 6px 20px; color: rgba(245,248,255,0.96); text-align: left; font-style: normal; font-weight: 400; backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 24px -8px rgba(0,0,0,0.5); } /* --- Input-Bereich (Mic + Input + Gold-Send) --- */ #page-ustadh .uc-input-row { position: relative; z-index: 10; padding: 12px 14px calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, transparent, rgba(5,7,20,0.95) 30%); border-top: 1px solid rgba(229,196,106,0.10); } #page-ustadh .uc-input-wrap { display: flex; gap: 4px; align-items: center; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); border-radius: 22px; padding: 6px; transition: border-color 0.22s ease-out, box-shadow 0.22s ease-out; } #page-ustadh .uc-input-wrap:focus-within { border-color: rgba(229,196,106,0.42); box-shadow: 0 0 0 3px rgba(229,196,106,0.10); } /* Mic-Button */ #page-ustadh .uc-mic { position: relative; width: 40px; height: 40px; border-radius: 50%; background: transparent; border: none; color: rgba(232,238,248,0.6); display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; transition: color 0.2s ease-out; } #page-ustadh .uc-mic:hover { color: #f5d878; } #page-ustadh .uc-mic.recording { color: #e05555; } #page-ustadh .uc-mic-pulse { position: absolute; inset: -2px; border-radius: 50%; border: 2px solid rgba(224,85,85,0.5); opacity: 0; pointer-events: none; } #page-ustadh .uc-mic.recording .uc-mic-pulse { opacity: 1; animation: tawbaMicPulse 1.2s ease-in-out infinite; } @keyframes tawbaMicPulse { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.4); opacity: 0; } } /* Input-Feld */ #page-ustadh .uc-input-wrap input { flex: 1; background: transparent; border: none; outline: none; color: #f5f0e1; font-family: var(--font-app); font-size: 15px; font-weight: 400; padding: 10px 4px; letter-spacing: 0.15px; min-width: 0; } #page-ustadh .uc-input-wrap input::placeholder { color: rgba(232,238,248,0.36); font-weight: 400; } /* Send-Button (Premium Gold) */ #page-ustadh .uc-send { width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #fff5cc 0%, transparent 50%), linear-gradient(135deg, #f5d878 0%, #d4a830 42%, #a07810 78%, #7a5810 100%); border: 1px solid rgba(255,235,170,0.5); color: #1a1004; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease-out; box-shadow: 0 4px 18px rgba(229,196,106,0.55), 0 0 24px rgba(229,196,106,0.32), inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -2px 6px rgba(0,0,0,0.22); } #page-ustadh .uc-send svg { filter: drop-shadow(0 1px 1px rgba(255,255,255,0.4)); transform: translateX(1px); } #page-ustadh .uc-send:hover { box-shadow: 0 6px 24px rgba(229,196,106,0.7), 0 0 36px rgba(229,196,106,0.45), inset 0 1px 0 rgba(255,255,255,0.65), inset 0 -2px 6px rgba(0,0,0,0.22); } /* Versteckt: alte Hero/Topbar/Suggestions vom älteren Tawba */ #page-ustadh .uc-hero, #page-ustadh .uc-suggestions, #page-ustadh .uc-topbar { display: none; } /* ════════════════════════════════════════════════════════════════ 10. SALAT TAB - PREMIUM REDESIGN (saubere Spezifität, no !important) ════════════════════════════════════════════════════════════════ */ #page-salat { padding-bottom: 48px; position: relative; } /* --- Hero --- */ #page-salat .salat-hero { background: radial-gradient(ellipse at 50% 0%, rgba(229,196,106,0.22), transparent 60%), linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%); border: 1px solid rgba(229,196,106,0.18); border-radius: 28px; padding: 16px 16px 20px; margin-bottom: 16px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 12px 32px rgba(0,0,0,0.35); position: relative; overflow: hidden; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } #page-salat .salat-hero-title { font-family: var(--font-app); font-size: 24px; font-weight: 700; color: #f5e8b8; letter-spacing: -0.3px; margin-bottom: 4px; text-shadow: 0 0 18px rgba(245,232,184,0.3); } #page-salat .salat-arabic { font-family: var(--font-arabic); font-size: 1.6rem; color: #f5d878; text-shadow: 0 0 16px rgba(245,216,120,0.28); } #page-salat .salat-translation { font-family: var(--font-app); font-size: 13px; font-style: italic; color: rgba(232,238,248,0.6); } /* --- Fatiha-CTA (Premium-Card mit Goldglow) --- */ #page-salat .fatiha-cta { background: linear-gradient(135deg, rgba(229,196,106,0.12) 0%, rgba(255,255,255,0.03) 100%); border: 1px solid rgba(229,196,106,0.30); border-radius: 22px; padding: 16px; margin-bottom: 16px; display: flex; align-items: center; gap: 14px; cursor: pointer; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 6px 20px rgba(0,0,0,0.25), 0 0 24px rgba(229,196,106,0.18), inset 0 1px 0 rgba(255,255,255,0.06); position: relative; overflow: hidden; } #page-salat .fatiha-cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 100% 50%, rgba(229,196,106,0.18), transparent 60%); pointer-events: none; } #page-salat .fatiha-cta .fc-icon-wrap { width: 50px; height: 50px; border-radius: 14px; background: radial-gradient(circle at 30% 25%, #fff5cc 0%, transparent 50%), linear-gradient(135deg, #f5d878, #c0911e); display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; z-index: 1; box-shadow: 0 4px 16px rgba(229,196,106,0.42), inset 0 1px 0 rgba(255,255,255,0.45); } #page-salat .fatiha-cta .fc-icon { font-size: 1.6rem; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2)); } #page-salat .fatiha-cta .fc-text { flex: 1; min-width: 0; position: relative; z-index: 1; } #page-salat .fatiha-cta .fc-title { font-family: var(--font-app); font-size: 16px; font-weight: 700; color: #f5e8b8; margin-bottom: 3px; letter-spacing: -0.1px; } #page-salat .fatiha-cta .fc-sub { font-family: var(--font-app); font-size: 12px; color: rgba(232,238,248,0.6); font-weight: 500; letter-spacing: 0.1px; } #page-salat .fatiha-cta .fc-arrow { color: #f5d878; font-size: 1.3rem; position: relative; z-index: 1; transition: transform 0.25s ease-out; } #page-salat .fatiha-cta:hover .fc-arrow { transform: translateX(5px); } /* --- Last-Prayer-Card --- */ #page-salat .last-prayer-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 22px; padding: 14px 16px; margin-bottom: 16px; display: flex; align-items: center; gap: 12px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 6px 20px rgba(0,0,0,0.22); } #page-salat .last-prayer-card .lpc-icon { width: 44px; height: 44px; border-radius: 14px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; } #page-salat .last-prayer-card .lpc-info { flex: 1; min-width: 0; } #page-salat .last-prayer-card .lpc-title { font-family: var(--font-app); font-size: 11px; font-weight: 600; color: #f5d878; letter-spacing: 1.8px; text-transform: uppercase; margin-bottom: 2px; } #page-salat .last-prayer-card .lpc-text { font-family: var(--font-app); font-size: 15px; color: #f5f0e1; font-weight: 500; } #page-salat .last-prayer-card .lpc-status { font-family: var(--font-app); font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); color: rgba(232,238,248,0.6); } /* --- Prayer-Cards (5er Grid für Pflichtgebete) --- */ #page-salat .salat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 8px; } #page-salat .salat-grid.sunnah { grid-template-columns: repeat(3, 1fr); gap: 10px; } #page-salat .prayer-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 12px 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1); min-height: 96px; position: relative; overflow: hidden; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } #page-salat .prayer-card.selected { background: linear-gradient(135deg, rgba(76,175,118,0.22), rgba(76,175,118,0.08)); border-color: rgba(76,175,118,0.42); box-shadow: 0 0 20px rgba(76,175,118,0.28), inset 0 1px 0 rgba(255,255,255,0.1); } #page-salat .prayer-card.selected::after { content: ''; position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; border-radius: 50%; background: #4caf76; box-shadow: 0 0 12px rgba(76,175,118,0.65); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-size: 12px; background-position: center; background-repeat: no-repeat; } #page-salat .prayer-card .pc-icon { font-size: 1.7rem; line-height: 1; } #page-salat .prayer-card .pc-name { font-family: var(--font-app); font-weight: 700; font-size: 13px; color: #f5f0e1; letter-spacing: 0.2px; } #page-salat .prayer-card .pc-rakah { font-family: var(--font-app); font-size: 10px; color: rgba(232,238,248,0.55); font-weight: 500; letter-spacing: 0.5px; } #page-salat .salat-grid.sunnah .prayer-card { min-height: 108px; padding: 16px 8px; } #page-salat .salat-grid.sunnah .pc-icon { font-size: 1.9rem; } #page-salat .salat-grid.sunnah .pc-name { font-size: 15px; } #page-salat .salat-grid.sunnah .pc-rakah { font-size: 11px; } /* --- Qibla-Card --- */ #page-salat .qibla-card { background: radial-gradient(circle at 25% 30%, rgba(229,196,106,0.12), transparent 60%), rgba(255,255,255,0.04); border: 1px solid rgba(229,196,106,0.18); border-radius: 22px; padding: 16px; margin-top: 16px; display: flex; align-items: center; gap: 16px; position: relative; overflow: hidden; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 8px 24px rgba(0,0,0,0.25); } #page-salat .qibla-card .qc-compass { width: 82px; height: 82px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.06), rgba(20,28,52,0.9)), conic-gradient(from 0deg, transparent, rgba(229,196,106,0.32), transparent); border: 2px solid rgba(229,196,106,0.42); flex-shrink: 0; position: relative; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 22px rgba(229,196,106,0.28), inset 0 0 14px rgba(0,0,0,0.45); } #page-salat .qibla-card .qc-needle { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); } #page-salat .qibla-card .qc-arrow { font-size: 1.5rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); } #page-salat .qibla-card .qc-kaaba { font-size: 1.6rem; position: absolute; top: 4px; left: 50%; transform: translateX(-50%); } #page-salat .qibla-card .qc-info { flex: 1; } #page-salat .qibla-card .qc-title { font-family: var(--font-app); font-size: 11px; font-weight: 600; color: #f5d878; letter-spacing: 1.8px; text-transform: uppercase; margin-bottom: 4px; } #page-salat .qibla-card .qc-dir { font-family: var(--font-app); font-size: 16px; color: #f5f0e1; font-weight: 600; margin-bottom: 2px; } #page-salat .qibla-card .qc-deg { font-family: var(--font-app); font-size: 13px; color: rgba(232,238,248,0.6); font-weight: 500; letter-spacing: 0.5px; } /* --- Stats-Card --- */ #page-salat .stats-card { background: linear-gradient(135deg, rgba(229,196,106,0.10) 0%, rgba(255,255,255,0.02) 100%); border: 1px solid rgba(229,196,106,0.18); border-radius: 22px; padding: 16px 20px; margin-top: 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.25); position: relative; overflow: hidden; } #page-salat .stats-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 100% 0%, rgba(229,196,106,0.20), transparent 65%); pointer-events: none; } #page-salat .stats-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 12px; position: relative; z-index: 1; } #page-salat .stats-title { font-family: var(--font-app); font-size: 13px; font-weight: 600; color: #f5d878; letter-spacing: 1.5px; text-transform: uppercase; } #page-salat .stats-sub { font-family: var(--font-app); font-size: 11px; color: rgba(232,238,248,0.6); font-weight: 500; margin-top: 3px; } #page-salat .stats-pct { font-family: var(--font-app); font-size: 32px; font-weight: 700; color: #f5e8b8; text-shadow: 0 0 20px rgba(245,232,184,0.3); line-height: 1; letter-spacing: -0.5px; } #page-salat .progress-bar { height: 6px; background: rgba(255,255,255,0.06); border-radius: 999px; overflow: hidden; position: relative; z-index: 1; } #page-salat .progress-fill { height: 100%; background: linear-gradient(90deg, #f5d878, #d4a830, #a07810); border-radius: 999px; box-shadow: 0 0 14px rgba(229,196,106,0.55); transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1); } /* Salat-Mosque-Foot */ #page-salat .salat-mosque-foot { margin: 32px -16px -16px; opacity: 0.85; filter: drop-shadow(0 0 18px rgba(229,196,106,0.14)); pointer-events: none; } /* ════════════════════════════════════════════════════════════════ 11. HOME TAB - PREMIUM POLISH (Welcome, Daily-Goal, Mawaqit) ════════════════════════════════════════════════════════════════ */ /* v75: Mehr top-Padding damit die Feed-Liste auf dem Handy nicht zu weit oben klebt */ #page-home { padding: 18px 16px 32px; } /* Welcome-Banner */ #page-home .welcome-banner { background: radial-gradient(ellipse at 0% 0%, rgba(229,196,106,0.14), transparent 55%), linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%); border: 1px solid rgba(229,196,106,0.15); border-radius: 24px; padding: 18px 18px 16px; margin-bottom: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 10px 28px rgba(0,0,0,0.3); display: flex; justify-content: space-between; align-items: flex-start; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } #page-home .wb-greeting { display: flex; flex-direction: column; gap: 4px; } #page-home .wb-salam { font-family: var(--font-app); font-size: 13px; color: rgba(232,238,248,0.6); font-weight: 500; letter-spacing: 0.2px; } #page-home .wb-name { font-family: var(--font-app); font-size: 22px; font-weight: 700; color: #f5e8b8; letter-spacing: -0.4px; line-height: 1.15; text-shadow: 0 0 18px rgba(245,232,184,0.25); } #page-home .wb-date { font-family: var(--font-app); font-size: 11px; color: rgba(232,238,248,0.5); font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; margin-top: 4px; } /* Daily-Goal-Card */ #page-home .daily-goal-card { background: radial-gradient(ellipse at 100% 0%, rgba(76,175,118,0.10), transparent 60%), linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%); border: 1px solid rgba(76,175,118,0.18); border-radius: 22px; padding: 16px 18px; margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center; gap: 16px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 8px 22px rgba(0,0,0,0.25); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } #page-home .dgc-left { display: flex; gap: 12px; align-items: center; } #page-home .dgc-icon { width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(135deg, rgba(76,175,118,0.25), rgba(76,175,118,0.10)); border: 1px solid rgba(76,175,118,0.28); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; } #page-home .dgc-title { font-family: var(--font-app); font-size: 11px; font-weight: 600; color: #5fd47d; letter-spacing: 1.8px; text-transform: uppercase; margin-bottom: 2px; } #page-home .dgc-progress { font-family: var(--font-app); font-size: 15px; font-weight: 600; color: #f5f0e1; letter-spacing: -0.1px; } #page-home .dgc-circle { width: 52px; height: 52px; position: relative; flex-shrink: 0; } #page-home .dgc-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-app); font-size: 12px; font-weight: 700; color: #f5e8b8; } /* Mawaqit-Card (Gebetszeiten) */ #page-home .mawaqit-card { background: radial-gradient(ellipse at 50% 0%, rgba(229,196,106,0.10), transparent 60%), linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%); border: 1px solid rgba(229,196,106,0.16); border-radius: 24px; padding: 18px; margin-bottom: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 10px 28px rgba(0,0,0,0.3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } #page-home .mw-empty { text-align: center; padding: 12px 4px; } #page-home .mw-empty .mw-icon { font-size: 2rem; margin-bottom: 8px; } #page-home .mw-empty .mw-title { font-family: var(--font-app); font-size: 16px; font-weight: 700; color: #f5e8b8; margin-bottom: 4px; letter-spacing: -0.2px; } #page-home .mw-empty .mw-sub { font-family: var(--font-app); font-size: 13px; color: rgba(232,238,248,0.6); font-weight: 500; margin-bottom: 14px; line-height: 1.4; } #page-home .mw-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; } #page-home .mw-city { font-family: var(--font-app); font-size: 17px; font-weight: 700; color: #f5e8b8; letter-spacing: -0.2px; } #page-home .mw-date { font-family: var(--font-app); font-size: 12px; color: rgba(232,238,248,0.6); font-weight: 500; margin-top: 2px; } #page-home .mw-next { text-align: right; } #page-home .mw-next-lbl { font-family: var(--font-app); font-size: 10px; font-weight: 600; color: #f5d878; letter-spacing: 1.5px; text-transform: uppercase; } #page-home .mw-next-name { font-family: var(--font-app); font-size: 15px; font-weight: 700; color: #f5e8b8; margin-top: 2px; letter-spacing: -0.1px; } #page-home .mw-next-time { font-family: var(--font-app); font-size: 22px; font-weight: 800; color: #f5d878; letter-spacing: -0.5px; text-shadow: 0 0 16px rgba(245,216,120,0.4); } #page-home .mw-next-countdown { font-family: var(--font-app); font-size: 11px; color: rgba(232,238,248,0.55); font-weight: 500; letter-spacing: 0.3px; } /* btn-gold (Standort aktivieren etc.) */ .pages .btn-gold { font-family: var(--font-app); background: radial-gradient(circle at 35% 28%, #fff5cc 0%, transparent 50%), linear-gradient(135deg, #f5d878 0%, #d4a830 42%, #a07810 78%, #7a5810 100%); border: 1px solid rgba(255,235,170,0.45); color: #1a1004; padding: 12px 22px; border-radius: 14px; font-size: 14px; font-weight: 700; letter-spacing: 0.2px; cursor: pointer; transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease-out; box-shadow: 0 4px 16px rgba(229,196,106,0.5), 0 0 20px rgba(229,196,106,0.28), inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -2px 6px rgba(0,0,0,0.18); } .pages .btn-gold:hover { box-shadow: 0 6px 22px rgba(229,196,106,0.65), 0 0 30px rgba(229,196,106,0.4), inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -2px 6px rgba(0,0,0,0.18); } /* ════════════════════════════════════════════════════════════════ 12. SPLASH STARS + SHOOTING STARS (über Foto) ════════════════════════════════════════════════════════════════ */ .tawba-intro .ti-sky-fx { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; mix-blend-mode: screen; } /* Leuchtende Sterne - mit Glow + abwechselnd zwinkern */ .tawba-intro .ti-star { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff5dc; box-shadow: 0 0 6px rgba(255, 245, 200, 1), 0 0 14px rgba(255, 235, 160, 0.8), 0 0 28px rgba(255, 225, 140, 0.45); animation: starGlow 3.2s ease-in-out infinite; opacity: 0; } @keyframes starGlow { 0%, 100% { opacity: 0.25; transform: scale(0.6); box-shadow: 0 0 4px rgba(255, 245, 200, 0.7), 0 0 8px rgba(255, 235, 160, 0.4); } 50% { opacity: 1; transform: scale(1.5); box-shadow: 0 0 10px rgba(255, 245, 200, 1), 0 0 22px rgba(255, 235, 160, 0.9), 0 0 42px rgba(255, 225, 140, 0.55); } } /* Versetzte Delays — abwechselndes Leuchten */ .tawba-intro .ti-s-1 { animation-delay: 0s; animation-duration: 3.2s; } .tawba-intro .ti-s-2 { animation-delay: 0.4s; animation-duration: 2.6s; } .tawba-intro .ti-s-3 { animation-delay: 1.1s; animation-duration: 3.8s; } .tawba-intro .ti-s-4 { animation-delay: 0.8s; animation-duration: 3.0s; } .tawba-intro .ti-s-5 { animation-delay: 1.5s; animation-duration: 2.8s; } .tawba-intro .ti-s-6 { animation-delay: 0.2s; animation-duration: 3.4s; } .tawba-intro .ti-s-7 { animation-delay: 1.8s; animation-duration: 2.4s; } .tawba-intro .ti-s-8 { animation-delay: 2.2s; animation-duration: 3.6s; } .tawba-intro .ti-s-9 { animation-delay: 0.6s; animation-duration: 3.0s; } .tawba-intro .ti-s-10 { animation-delay: 2.6s; animation-duration: 2.8s; } .tawba-intro .ti-s-11 { animation-delay: 1.3s; animation-duration: 3.2s; } .tawba-intro .ti-s-12 { animation-delay: 0.9s; animation-duration: 2.6s; } .tawba-intro .ti-s-13 { animation-delay: 2.0s; animation-duration: 3.4s; } .tawba-intro .ti-s-14 { animation-delay: 0.3s; animation-duration: 3.0s; } .tawba-intro .ti-s-15 { animation-delay: 1.6s; animation-duration: 2.8s; } .tawba-intro .ti-s-16 { animation-delay: 2.4s; animation-duration: 3.2s; } /* SHOOTING STARS - diagonal ziehende Sternschnuppen mit Schweif */ .tawba-intro .ti-shoot { position: absolute; width: 130px; height: 2px; background: linear-gradient( 90deg, rgba(255, 245, 200, 0) 0%, rgba(255, 245, 200, 0.6) 40%, rgba(255, 245, 200, 1) 95%, rgba(255, 245, 200, 1) 100% ); border-radius: 2px; filter: drop-shadow(0 0 6px rgba(255, 245, 200, 1)) drop-shadow(0 0 12px rgba(255, 230, 150, 0.7)) drop-shadow(0 0 22px rgba(255, 215, 120, 0.4)); opacity: 0; transform-origin: right center; } .tawba-intro .ti-shoot::after { /* Kopf der Sternschnuppe */ content: ''; position: absolute; right: -3px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #fff8e0; box-shadow: 0 0 10px rgba(255, 245, 200, 1), 0 0 20px rgba(255, 225, 140, 0.85); } .tawba-intro .ti-shoot-1 { top: 14%; left: 6%; animation: shoot1 10s ease-in 1.5s infinite; } .tawba-intro .ti-shoot-2 { top: 26%; left: 50%; animation: shoot2 13s ease-in 5s infinite; } .tawba-intro .ti-shoot-3 { top: 8%; left: 30%; animation: shoot3 16s ease-in 8s infinite; } .tawba-intro .ti-shoot-4 { top: 38%; left: 12%; animation: shoot4 19s ease-in 12s infinite; } @keyframes shoot1 { 0% { opacity: 0; transform: rotate(22deg) translateX(0); } 3% { opacity: 1; } 9% { opacity: 0; transform: rotate(22deg) translateX(320px); } 100% { opacity: 0; transform: rotate(22deg) translateX(320px); } } @keyframes shoot2 { 0% { opacity: 0; transform: rotate(28deg) translateX(0); } 3% { opacity: 1; } 8% { opacity: 0; transform: rotate(28deg) translateX(280px); } 100% { opacity: 0; transform: rotate(28deg) translateX(280px); } } @keyframes shoot3 { 0% { opacity: 0; transform: rotate(18deg) translateX(0); } 3% { opacity: 1; } 10% { opacity: 0; transform: rotate(18deg) translateX(360px); } 100% { opacity: 0; transform: rotate(18deg) translateX(360px); } } @keyframes shoot4 { 0% { opacity: 0; transform: rotate(35deg) translateX(0); } 3% { opacity: 1; } 9% { opacity: 0; transform: rotate(35deg) translateX(300px); } 100% { opacity: 0; transform: rotate(35deg) translateX(300px); } } /* ════════════════════════════════════════════════════════════════ 13. TAWBA PAGE - kein Scrollen, alles passt in Viewport ════════════════════════════════════════════════════════════════ */ /* Wenn Tawba aktiv: Page-Container nimmt exakt verfügbare Höhe */ #page-ustadh.page.active { display: flex; flex-direction: column; height: calc(100vh - 56px); height: calc(100dvh - 56px); overflow: hidden; padding-bottom: 0; padding-top: 0; margin: 0; } /* ustadh-chat füllt den ganzen page-ustadh */ #page-ustadh .ustadh-chat { flex: 1; height: 100%; min-height: 0; margin: 0; border-radius: 0; border: none; box-shadow: none; } /* Chat-Box hat begrenzte Höhe + scrollt INTERN wenn Messages wachsen */ #page-ustadh .uc-chat-box { flex: 1; min-height: 0; overflow-y: auto; } /* ════════════════════════════════════════════════════════════════ 14. PAGES - korrektes Bottom-Padding für Bottom-Nav ════════════════════════════════════════════════════════════════ */ .pages > .page { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } /* Tawba braucht KEIN Bottom-Padding weil Input am Bottom + dezent unter Nav */ .pages > #page-ustadh.page { padding-bottom: 0; } /* ════════════════════════════════════════════════════════════════ 15. BODY-SCROLL-LOCK wenn Tawba aktiv (kein Page-Scroll mehr) ════════════════════════════════════════════════════════════════ */ /* v334 ★ Tawba/Ustādh aktiv (inkl. Intro-Splash): Scroll-Lock — Page scrollt nicht, Chat scrollt intern. FRÜHER per :has() — iOS wertet :has() VERZÖGERT aus, darum ging der Lock beim Zurück-auf-Home zu spät auf → der gesetzte Home-Scroll klemmte auf 0 und sprang danach nach unten (DER Feed-Bug). Jetzt per Klasse `tawba-locked`, die showPage SYNCHRON setzt/entfernt → Lock sofort weg, Home landet ohne Sprung. */ html.tawba-locked, html.tawba-locked body { overflow: hidden; height: 100vh; height: 100dvh; position: relative; } html.tawba-locked .pages { overflow: hidden; height: 100vh; height: 100dvh; } /* ════════════════════════════════════════════════════════════════ 16. SPLASH FOTO - exakt iPhone-Viewport, KEIN Scroll ════════════════════════════════════════════════════════════════ */ .tawba-intro { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; overflow: hidden; } .tawba-intro .ti-bg-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } /* ════════════════════════════════════════════════════════════════ 17. MOND GLOW (verstärkt, atmend) + ORNAMENT GLOWS unten ════════════════════════════════════════════════════════════════ */ /* Mond-Glow: warm goldenes Leuchten über dem Mond im Foto */ .tawba-intro .ti-moon-pulse { position: absolute; top: 14%; left: 50%; margin-left: -140px; width: 280px; height: 280px; border-radius: 50%; z-index: 3; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(circle, rgba(255,225,140,0.55) 0%, rgba(255,200,100,0.30) 20%, rgba(245,180,80,0.12) 45%, transparent 70%); filter: blur(28px); animation: tawbaMoonGlow 3.5s ease-in-out infinite; } @keyframes tawbaMoonGlow { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } } /* Ornament-Glows: warmes Gold-Leuchten für die 2 islamischen Sterne unten */ .tawba-intro .ti-orn-glow { position: absolute; bottom: 12%; width: 180px; height: 180px; border-radius: 50%; z-index: 3; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(circle, rgba(255,210,100,0.55) 0%, rgba(245,180,80,0.25) 25%, rgba(235,160,60,0.10) 50%, transparent 75%); filter: blur(20px); animation: tawbaOrnGlow 4s ease-in-out infinite; } .tawba-intro .ti-orn-glow-left { left: 4%; animation-delay: 0s; } .tawba-intro .ti-orn-glow-right { right: 4%; animation-delay: -2s; } @keyframes tawbaOrnGlow { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.15); } } /* ════════════════════════════════════════════════════════════════ 18. TAWBA-CHAT - fixe Position (zwischen Header + Bottom-Nav) ════════════════════════════════════════════════════════════════ */ :root { --header-h: 56px; --nav-h: 76px; } /* Spezifisch nur für Tawba: Page nimmt fixen Raum, kein Scroll */ #page-ustadh.page.active { position: fixed; top: var(--header-h); left: 0; right: 0; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); height: auto; width: 100%; margin: 0; padding: 0; overflow: hidden; display: flex; flex-direction: column; z-index: 5; } #page-ustadh .ustadh-chat { flex: 1; width: 100%; height: 100%; min-height: 0; margin: 0; border-radius: 0; border: none; box-shadow: none; display: flex; flex-direction: column; overflow: hidden; } /* Chat-Box innen: nur DAS scrollt wenn Messages wachsen */ #page-ustadh .uc-chat-box { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } /* ╔══════════════════════════════════════════════════════════════════╗ ║ TAWBA PREMIUM v2 - Refinement (Apple/Notion AI/Perplexity-Level) ║ ║ - Kompakter Header (60px statt 75px) ║ ║ - Bubble mit weichen 22px Radius + tieferem Glas ║ ║ - Input + Mic + Send als EINE Premium-Kapsel ║ ║ - Subtilere Glows, weichere Übergänge ║ ║ - Bessere Typografie (line-height, letter-spacing) ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* ════════════════════════════════════════════════════════════════ 19. HEADER REFINEMENT - kompakter, balancierter ════════════════════════════════════════════════════════════════ */ #page-ustadh .uc-header { display: flex; align-items: center; gap: 12px; padding: 10px 14px 11px; background: linear-gradient(180deg, rgba(229,196,106,0.05) 0%, rgba(229,196,106,0.01) 100%); border-bottom: 1px solid rgba(229,196,106,0.10); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); min-height: 60px; } /* Back / Trash Buttons - feiner */ #page-ustadh .uc-back, #page-ustadh .uc-clear { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); color: rgba(232,238,248,0.72); display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; transition: background 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s cubic-bezier(0.16, 1, 0.3, 1), transform 0.16s cubic-bezier(0.16, 1, 0.3, 1); } #page-ustadh .uc-back:hover, #page-ustadh .uc-clear:hover { background: rgba(229,196,106,0.08); border-color: rgba(229,196,106,0.20); } /* Avatar - etwas kleiner, eleganter */ #page-ustadh .uc-avatar { width: 46px; height: 46px; border: 1.2px solid rgba(229,196,106,0.30); box-shadow: 0 0 18px rgba(229,196,106,0.32), 0 0 6px rgba(229,196,106,0.22), inset 0 0 10px rgba(229,196,106,0.08); animation: tawbaAvatarBreathSoft 5s ease-in-out infinite; } @keyframes tawbaAvatarBreathSoft { 0%, 100% { box-shadow: 0 0 18px rgba(229,196,106,0.32), 0 0 6px rgba(229,196,106,0.22), inset 0 0 10px rgba(229,196,106,0.08); } 50% { box-shadow: 0 0 26px rgba(229,196,106,0.48), 0 0 12px rgba(229,196,106,0.32), inset 0 0 14px rgba(229,196,106,0.12); } } #page-ustadh .uc-avatar svg { width: 36px; height: 36px; } /* Name - moderner, tighter */ #page-ustadh .uc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 1px; } #page-ustadh .uc-name { font-size: 17px; font-weight: 700; color: #f5e8b8; letter-spacing: -0.25px; line-height: 1.2; text-shadow: 0 0 10px rgba(245,232,184,0.18); } #page-ustadh .uc-status { font-size: 12px; color: rgba(232,238,248,0.58); display: flex; align-items: center; gap: 6px; margin-top: 1px; font-weight: 500; letter-spacing: 0.05px; } #page-ustadh .uc-status .uc-dot { width: 7px; height: 7px; border-radius: 50%; background: #4caf76; box-shadow: 0 0 8px rgba(76,175,118,0.7); animation: tawbaDotPulseSoft 2.5s ease-in-out infinite; } @keyframes tawbaDotPulseSoft { 0%, 100% { opacity: 0.65; transform: scale(0.92); } 50% { opacity: 1; transform: scale(1.14); } } /* ════════════════════════════════════════════════════════════════ 20. BUBBLE REFINEMENT - weicher, Premium-Glas ════════════════════════════════════════════════════════════════ */ #page-ustadh .uc-chat-box { padding: 22px 18px 22px; gap: 20px; } #page-ustadh .chat-msg { max-width: 86%; padding: 16px 18px 14px; font-size: 15px; line-height: 1.6; letter-spacing: -0.05px; border-radius: 22px; } /* Bot-Bubble - Premium-Glas */ #page-ustadh .chat-msg.bot { align-self: flex-start; background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.03) 100%); border: 1px solid rgba(255,255,255,0.09); border-radius: 22px 22px 22px 8px; color: rgba(245,248,255,0.95); backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -1px 0 rgba(0,0,0,0.15), 0 10px 30px -10px rgba(0,0,0,0.55), 0 4px 12px -4px rgba(0,0,0,0.35); } #page-ustadh .chat-msg.bot .cm-greeting, #page-ustadh .chat-msg.bot strong { display: block; font-family: var(--font-app); font-size: 15.5px; font-weight: 700; color: #f5d878; margin-bottom: 7px; letter-spacing: -0.15px; line-height: 1.3; } #page-ustadh .chat-msg.bot .cm-body { font-size: 15px; line-height: 1.62; color: rgba(245,248,255,0.92); font-weight: 400; letter-spacing: -0.05px; } #page-ustadh .chat-msg.bot .cm-time { font-size: 11px; color: rgba(232,238,248,0.36); margin-top: 10px; letter-spacing: 0.2px; font-weight: 500; } /* User-Bubble - matching Premium-Glas mit Goldtouch */ #page-ustadh .chat-msg.user { align-self: flex-end; max-width: 82%; background: linear-gradient(180deg, rgba(229,196,106,0.14) 0%, rgba(229,196,106,0.06) 100%); border: 1px solid rgba(229,196,106,0.22); border-radius: 22px 22px 8px 22px; color: rgba(248,250,255,0.97); backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.10), 0 10px 30px -10px rgba(0,0,0,0.55), 0 4px 12px -4px rgba(229,196,106,0.18); } /* ════════════════════════════════════════════════════════════════ 21. INPUT-KAPSEL - Mic + Input + Send als EIN Element (Apple/Notion AI/Perplexity Niveau) ════════════════════════════════════════════════════════════════ */ #page-ustadh .uc-input-row { padding: 12px 14px calc(16px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, transparent 0%, rgba(5,7,20,0.85) 30%, rgba(5,7,20,0.96) 100%); border-top: 1px solid rgba(229,196,106,0.08); } /* DIE Kapsel - ein einheitliches Premium-Element */ #page-ustadh .uc-input-wrap { display: flex; align-items: center; gap: 6px; background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.025) 100%); border: 1px solid rgba(255,255,255,0.10); border-radius: 26px; padding: 5px 5px 5px 8px; min-height: 48px; transition: border-color 0.32s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.32s cubic-bezier(0.16, 1, 0.3, 1), background 0.32s cubic-bezier(0.16, 1, 0.3, 1); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.12), 0 4px 16px -4px rgba(0,0,0,0.4); } #page-ustadh .uc-input-wrap:focus-within { border-color: rgba(229,196,106,0.40); background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.035) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.10), 0 0 0 4px rgba(229,196,106,0.10), 0 8px 24px -6px rgba(229,196,106,0.20); } /* Mic - integriertes Icon, gleiche Höhe */ #page-ustadh .uc-mic { position: relative; width: 38px; height: 38px; border-radius: 50%; background: transparent; border: none; color: rgba(232,238,248,0.55); display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; transition: color 0.28s cubic-bezier(0.16, 1, 0.3, 1), background 0.28s cubic-bezier(0.16, 1, 0.3, 1); } #page-ustadh .uc-mic svg { width: 19px; height: 19px; } #page-ustadh .uc-mic:hover { color: #f5d878; background: rgba(229,196,106,0.06); } #page-ustadh .uc-mic.recording { color: #e05555; background: rgba(224,85,85,0.10); } #page-ustadh .uc-mic-pulse { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(224,85,85,0.45); opacity: 0; pointer-events: none; } #page-ustadh .uc-mic.recording .uc-mic-pulse { opacity: 1; animation: tawbaMicPulseSmooth 1.4s ease-in-out infinite; } @keyframes tawbaMicPulseSmooth { 0% { transform: scale(1); opacity: 0.75; } 100% { transform: scale(1.45); opacity: 0; } } /* Input - elegant, integriert */ #page-ustadh .uc-input-wrap input { flex: 1; background: transparent; border: none; outline: none; color: #f5f0e1; font-family: var(--font-app); font-size: 15.5px; font-weight: 400; letter-spacing: -0.05px; padding: 10px 6px; min-width: 0; } #page-ustadh .uc-input-wrap input::placeholder { color: rgba(232,238,248,0.35); font-weight: 400; letter-spacing: -0.05px; } /* Send-Button - integrierter Teil der Kapsel, gleiche Höhe */ #page-ustadh .uc-send { width: 38px; height: 38px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #fff5cc 0%, transparent 55%), linear-gradient(135deg, #f5d878 0%, #d4a830 50%, #a07810 100%); border: 1px solid rgba(255,235,170,0.42); color: #1a1004; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.32s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 2px 12px rgba(229,196,106,0.42), 0 0 16px rgba(229,196,106,0.22), inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -2px 4px rgba(0,0,0,0.18); } #page-ustadh .uc-send svg { width: 17px; height: 17px; transform: translateX(0.5px) translateY(-0.5px); filter: drop-shadow(0 1px 1px rgba(255,255,255,0.35)); } #page-ustadh .uc-send:hover { box-shadow: 0 4px 18px rgba(229,196,106,0.55), 0 0 24px rgba(229,196,106,0.35), inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -2px 4px rgba(0,0,0,0.18); } /* ════════════════════════════════════════════════════════════════ 22. CHAT-BG - subtilere Glows, weichere Übergänge ════════════════════════════════════════════════════════════════ */ #page-ustadh .ustadh-chat { background: radial-gradient(ellipse 100% 38% at 50% 0%, rgba(229,196,106,0.07) 0%, transparent 65%), radial-gradient(ellipse 110% 70% at 50% 100%, rgba(60,80,140,0.04) 0%, transparent 65%), linear-gradient(180deg, #04081a 0%, #06091e 50%, #08102a 100%); } /* Dezentere Sterne im Chat-Hintergrund */ #page-ustadh .uc-bg-stars span { background: rgba(255,245,220,0.42); box-shadow: 0 0 2.5px rgba(255,245,220,0.4), 0 0 5px rgba(255,245,220,0.18); animation: tawbaTwinkleSoft 6s ease-in-out infinite; } @keyframes tawbaTwinkleSoft { 0%, 100% { opacity: 0.10; transform: scale(0.7); } 50% { opacity: 0.55; transform: scale(1.25); } } #page-ustadh .uc-bg-glow { background: radial-gradient(circle, rgba(229,196,106,0.10) 0%, rgba(229,196,106,0.025) 45%, transparent 70%); animation: tawbaGlowSoft 9s ease-in-out infinite; } @keyframes tawbaGlowSoft { 0%, 100% { opacity: 0.5; transform: translateX(-50%) scale(1); } 50% { opacity: 0.85; transform: translateX(-50%) scale(1.06); } } /* ╔══════════════════════════════════════════════════════════════════╗ ║ TAWBA SPLASH v22 - schlicht, sehr dunkel, Code-only ║ ║ Tiefes Schwarz, Mond, USTADH/TAWBAH, kleine Ornamente, 3 Dots ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* Container - SEHR dunkel, fast schwarz */ .tawba-intro-v22 { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; background: radial-gradient(ellipse 90% 40% at 50% 18%, rgba(40,30,15,0.22) 0%, transparent 60%), linear-gradient(180deg, #000000 0%, #010204 30%, #020410 70%, #03061a 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 9000; overflow: hidden; padding: 36px 28px; animation: ti22FadeIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; cursor: pointer; } .tawba-intro-v22.fading { animation: ti22FadeOut 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes ti22FadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes ti22FadeOut { from { opacity: 1; } to { opacity: 0; } } /* Hide all old splash elements */ .tawba-intro-v22 .ti-bg-photo, .tawba-intro-v22 .ti-photo-overlay, .tawba-intro-v22 .ti-sky-fx, .tawba-intro-v22 .ti-moon-pulse, .tawba-intro-v22 .ti-orn-glow, .tawba-intro-v22 .ti-loading { display: none; } /* Subtile Sterne */ .tawba-intro-v22 .ti22-stars { position: absolute; inset: 0; pointer-events: none; } .tawba-intro-v22 .ti22-stars span { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: rgba(255,245,220,0.6); box-shadow: 0 0 4px rgba(255,245,220,0.6), 0 0 8px rgba(255,225,150,0.3); animation: ti22Twinkle 4s ease-in-out infinite; } .tawba-intro-v22 .ti22-stars span:nth-child(2) { animation-delay: 0.5s; } .tawba-intro-v22 .ti22-stars span:nth-child(3) { animation-delay: 1.2s; } .tawba-intro-v22 .ti22-stars span:nth-child(4) { animation-delay: 1.8s; } .tawba-intro-v22 .ti22-stars span:nth-child(5) { animation-delay: 0.3s; } .tawba-intro-v22 .ti22-stars span:nth-child(6) { animation-delay: 2.1s; } .tawba-intro-v22 .ti22-stars span:nth-child(7) { animation-delay: 1.5s; } .tawba-intro-v22 .ti22-stars span:nth-child(8) { animation-delay: 0.9s; } .tawba-intro-v22 .ti22-stars span:nth-child(9) { animation-delay: 2.7s; } .tawba-intro-v22 .ti22-stars span:nth-child(10){ animation-delay: 0.4s; } @keyframes ti22Twinkle { 0%, 100% { opacity: 0.2; transform: scale(0.7); } 50% { opacity: 0.85; transform: scale(1.3); } } /* Mond mittig oben */ .tawba-intro-v22 .ti22-moon-wrap { position: relative; width: 160px; height: 160px; margin: 0 auto 0; opacity: 0; animation: ti22Rise 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards; } .tawba-intro-v22 .ti22-moon-halo { position: absolute; inset: -38px; border-radius: 50%; background: radial-gradient(circle, rgba(255,225,140,0.20) 0%, rgba(255,225,140,0.05) 45%, transparent 70%); filter: blur(12px); animation: ti22HaloPulse 4s ease-in-out infinite; pointer-events: none; } @keyframes ti22HaloPulse { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } } .tawba-intro-v22 .ti22-moon { position: relative; width: 100%; height: 100%; filter: drop-shadow(0 0 22px rgba(255,220,120,0.45)) drop-shadow(0 0 8px rgba(255,220,120,0.4)) drop-shadow(0 6px 18px rgba(0,0,0,0.5)); } /* USTADH (oben) / TAWBAH (unten) als Brand */ .tawba-intro-v22 .ti22-brand { text-align: center; margin-top: 10px; opacity: 0; animation: ti22Rise 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards; } .tawba-intro-v22 .ti22-ustadh { font-family: var(--font-app); font-size: 13px; font-weight: 600; color: rgba(245,240,225,0.65); letter-spacing: 5px; margin-bottom: 6px; } .tawba-intro-v22 .ti22-tawbah { font-family: var(--font-app); font-size: 30px; font-weight: 600; color: #f5d878; letter-spacing: 4px; text-shadow: 0 0 22px rgba(245,216,120,0.55), 0 0 8px rgba(245,216,120,0.45); } /* Tagline */ .tawba-intro-v22 .ti22-tagline { text-align: center; margin-top: 32px; max-width: 320px; opacity: 0; animation: ti22Rise 1.3s cubic-bezier(0.16, 1, 0.3, 1) 1.4s forwards; } .tawba-intro-v22 .ti22-tag-main { font-family: 'Plus Jakarta Sans', -apple-system, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.35; color: #ffffff; letter-spacing: -0.3px; text-shadow: 0 0 18px rgba(255,255,255,0.12); margin-bottom: 14px; } .tawba-intro-v22 .ti22-tag-sub { font-family: 'Plus Jakarta Sans', -apple-system, sans-serif; font-size: 14px; font-weight: 400; color: rgba(232,238,248,0.65); letter-spacing: 0.1px; } @keyframes ti22Rise { 0% { opacity: 0; transform: translateY(14px); } 100% { opacity: 1; transform: translateY(0); } } /* 2 islamische Sternornamente unten links/rechts (klein, dezent) */ .tawba-intro-v22 .ti22-orn { position: absolute; bottom: 90px; width: 80px; height: 80px; opacity: 0; animation: ti22OrnIn 1.4s cubic-bezier(0.16, 1, 0.3, 1) 1.8s forwards; pointer-events: none; filter: drop-shadow(0 0 12px rgba(229,196,106,0.4)); } .tawba-intro-v22 .ti22-orn svg { width: 100%; height: 100%; animation: ti22Spin 90s linear infinite; } .tawba-intro-v22 .ti22-orn-left { left: 12px; } .tawba-intro-v22 .ti22-orn-right { right: 12px; } @keyframes ti22OrnIn { 0% { opacity: 0; transform: scale(0.85); } 100% { opacity: 0.8; transform: scale(1); } } @keyframes ti22Spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* 3 Lade-Dots ganz unten */ .tawba-intro-v22 .ti22-dots { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; opacity: 0; animation: ti22Rise 1.0s cubic-bezier(0.16, 1, 0.3, 1) 2.0s forwards; } .tawba-intro-v22 .ti22-dots i { width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff5cc 0%, #e5c46a 60%, #a07810 100%); box-shadow: 0 0 10px rgba(229,196,106,0.7), 0 0 18px rgba(229,196,106,0.35); animation: ti22DotPulse 1.6s ease-in-out infinite; } .tawba-intro-v22 .ti22-dots i:nth-child(2) { animation-delay: 0.2s; } .tawba-intro-v22 .ti22-dots i:nth-child(3) { animation-delay: 0.4s; } @keyframes ti22DotPulse { 0%, 100% { opacity: 0.35; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.25); } } /* Tap-to-skip */ .tawba-intro-v22 .ti22-skip { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); font-family: 'Plus Jakarta Sans', sans-serif; font-size: 9px; font-weight: 500; color: rgba(232,238,248,0.22); letter-spacing: 2.5px; text-transform: uppercase; opacity: 0; animation: ti22Rise 1.0s ease 2.6s forwards; } /* ╔══════════════════════════════════════════════════════════════════╗ ║ TAWBA CHAT v22 - sehr sehr dunkel, schlicht ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* Chat-Container - fast schwarz */ #page-ustadh .ustadh-chat { background: radial-gradient(ellipse 90% 30% at 50% 0%, rgba(229,196,106,0.04) 0%, transparent 65%), linear-gradient(180deg, #000000 0%, #010204 50%, #030410 100%); border: 1px solid rgba(229,196,106,0.07); box-shadow: 0 16px 48px rgba(0,0,0,0.7); } /* Hintergrund-Atmosphäre — nahezu unsichtbar (schlicht) */ #page-ustadh .uc-bg-atmosphere { display: none; } /* Header subtiler */ #page-ustadh .uc-header { background: linear-gradient(180deg, rgba(229,196,106,0.03) 0%, transparent 100%); border-bottom: 1px solid rgba(229,196,106,0.07); } /* Bot-Bubble: dunkler, klarere Kontur */ #page-ustadh .chat-msg.bot { background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.018) 100%); border: 1px solid rgba(255,255,255,0.07); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 24px -8px rgba(0,0,0,0.6); } /* User-Bubble: noch dunkler-gold */ #page-ustadh .chat-msg.user { background: linear-gradient(180deg, rgba(229,196,106,0.10) 0%, rgba(229,196,106,0.04) 100%); border: 1px solid rgba(229,196,106,0.18); } /* Input-Kapsel dunkler */ #page-ustadh .uc-input-row { background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.85) 30%, rgba(0,0,0,0.96) 100%); border-top: 1px solid rgba(229,196,106,0.06); } #page-ustadh .uc-input-wrap { background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.018) 100%); border: 1px solid rgba(255,255,255,0.08); } /* ╔══════════════════════════════════════════════════════════════════╗ ║ TAWBA CHAT v23 - sehr dunkel + dezente Sterne sichtbar ║ ║ Layout wie Screenshot, atmosphärisch, Input-Bar breit ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* Chat-Container - tief schwarz mit atmosphärischem Verlauf */ #page-ustadh .ustadh-chat { background: radial-gradient(ellipse 85% 25% at 50% 0%, rgba(229,196,106,0.025) 0%, transparent 60%), radial-gradient(ellipse 110% 60% at 50% 100%, rgba(30,40,80,0.035) 0%, transparent 70%), linear-gradient(180deg, #000000 0%, #010205 30%, #02040b 65%, #04061a 100%); border: none; box-shadow: 0 20px 60px rgba(0,0,0,0.8); } /* Atmosphäre - dezente Sterne SICHTBAR machen */ #page-ustadh .uc-bg-atmosphere { display: block; position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; } #page-ustadh .uc-bg-glow { position: absolute; top: -140px; left: 50%; transform: translateX(-50%); width: 540px; height: 540px; border-radius: 50%; background: radial-gradient(circle, rgba(229,196,106,0.06) 0%, rgba(229,196,106,0.015) 50%, transparent 75%); filter: blur(48px); animation: ucGlowAtmos 10s ease-in-out infinite; } @keyframes ucGlowAtmos { 0%, 100% { opacity: 0.45; transform: translateX(-50%) scale(1); } 50% { opacity: 0.75; transform: translateX(-50%) scale(1.06); } } /* Dezente Sterne — sichtbar aber subtil */ #page-ustadh .uc-bg-stars { position: absolute; inset: 0; pointer-events: none; } #page-ustadh .uc-bg-stars span { position: absolute; width: 1.5px; height: 1.5px; border-radius: 50%; background: rgba(255,245,220,0.65); box-shadow: 0 0 3px rgba(255,245,220,0.55), 0 0 6px rgba(255,225,150,0.3); animation: ucStarSubtle 4.5s ease-in-out infinite; } @keyframes ucStarSubtle { 0%, 100% { opacity: 0.15; transform: scale(0.7); } 50% { opacity: 0.6; transform: scale(1.3); } } /* Varied delays for staggered twinkle */ #page-ustadh .uc-bg-stars span:nth-child(1) { animation-delay: 0s; animation-duration: 4s; } #page-ustadh .uc-bg-stars span:nth-child(2) { animation-delay: 0.6s; animation-duration: 5s; } #page-ustadh .uc-bg-stars span:nth-child(3) { animation-delay: 1.4s; animation-duration: 4.5s; } #page-ustadh .uc-bg-stars span:nth-child(4) { animation-delay: 2.0s; animation-duration: 4s; } #page-ustadh .uc-bg-stars span:nth-child(5) { animation-delay: 0.9s; animation-duration: 5.2s; } #page-ustadh .uc-bg-stars span:nth-child(6) { animation-delay: 2.4s; animation-duration: 4.2s; } #page-ustadh .uc-bg-stars span:nth-child(7) { animation-delay: 0.3s; animation-duration: 4.8s; } #page-ustadh .uc-bg-stars span:nth-child(8) { animation-delay: 1.7s; animation-duration: 5.4s; } #page-ustadh .uc-bg-stars span:nth-child(9) { animation-delay: 1.0s; animation-duration: 4.4s; } #page-ustadh .uc-bg-stars span:nth-child(10) { animation-delay: 2.7s; animation-duration: 4.6s; } /* Bot-Bubble — dezent darker für nachtatmosphäre */ #page-ustadh .chat-msg.bot { background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.015) 100%); border: 1px solid rgba(255,255,255,0.06); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 10px 30px -10px rgba(0,0,0,0.7); } /* INPUT-BAR — breit, Send-Button klar rechts */ #page-ustadh .uc-input-row { padding: 12px 14px calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.92) 25%, rgba(0,0,0,0.99) 100%); border-top: 1px solid rgba(229,196,106,0.06); } /* Die Kapsel — breit, klare Premium-Form */ #page-ustadh .uc-input-wrap { display: flex; align-items: center; gap: 8px; width: 100%; background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.018) 100%); border: 1px solid rgba(255,255,255,0.08); border-radius: 28px; padding: 5px 6px 5px 8px; min-height: 52px; backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 6px 22px -6px rgba(0,0,0,0.6); } #page-ustadh .uc-input-wrap:focus-within { border-color: rgba(229,196,106,0.32); box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 0 0 4px rgba(229,196,106,0.08), 0 8px 28px -6px rgba(229,196,106,0.18); } /* Mic — links, dezent */ #page-ustadh .uc-mic { width: 42px; height: 42px; border-radius: 50%; color: rgba(232,238,248,0.55); } #page-ustadh .uc-mic svg { width: 20px; height: 20px; } /* Input — Mitte, breite Touch-Area, unscharfer Placeholder */ #page-ustadh .uc-input-wrap input { flex: 1; background: transparent; border: none; outline: none; color: #f5f0e1; font-family: var(--font-app); font-size: 15px; font-weight: 400; letter-spacing: -0.05px; padding: 11px 6px; min-width: 0; } /* Placeholder: leicht transparent + weich (unscharf wirkend) */ #page-ustadh .uc-input-wrap input::placeholder { color: rgba(232,238,248,0.30); font-weight: 400; letter-spacing: 0; font-style: normal; opacity: 0.85; text-shadow: 0 0 2px rgba(232,238,248,0.15); } /* Send-Button — rechts, klar sichtbar, Gold */ #page-ustadh .uc-send { width: 42px; height: 42px; min-width: 42px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #fff5cc 0%, transparent 55%), linear-gradient(135deg, #f5d878 0%, #d4a830 50%, #a07810 100%); border: 1px solid rgba(255,235,170,0.5); color: #1a1004; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 3px 14px rgba(229,196,106,0.5), 0 0 18px rgba(229,196,106,0.28), inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -2px 4px rgba(0,0,0,0.2); } #page-ustadh .uc-send svg { width: 19px; height: 19px; transform: translateX(1px); filter: drop-shadow(0 1px 1px rgba(255,255,255,0.4)); } /* ╔══════════════════════════════════════════════════════════════════╗ ║ v24 PREMIUM REDESIGN (Apple+Islamic, dunkler, iMessage-Stil) ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* ════════════════════════════════════════════════════════════════ 24.1 HEADER - Online-Status "Tawbaers Online" ════════════════════════════════════════════════════════════════ */ .app-header .logo { display: flex; flex-direction: column; gap: 2px; } .app-header .logo-online { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; } .app-header .logo-online-dot { width: 7px; height: 7px; border-radius: 50%; background: #4caf76; box-shadow: 0 0 6px rgba(76,175,118,0.85), 0 0 12px rgba(76,175,118,0.4); animation: ucDotPulse 2.4s ease-in-out infinite; } .app-header .logo-online-txt { font-family: var(--font-app); font-size: 11px; font-weight: 500; color: rgba(232,238,248,0.62); letter-spacing: 0.15px; } /* ════════════════════════════════════════════════════════════════ 24.2 BOTTOM-NAV - Icons konsistent (stroke 1.5px, gold-glow) ════════════════════════════════════════════════════════════════ */ .bottom-nav .nav-btn svg { width: 24px; height: 24px; stroke-width: 1.5; } .bottom-nav .nav-btn.active svg { filter: drop-shadow(0 0 8px rgba(245,216,120,0.65)) drop-shadow(0 0 3px rgba(255,255,255,0.35)); } /* ════════════════════════════════════════════════════════════════ 24.3 TAWBA CHAT v24 - dunkler, Sterne, goldene Lichtreflexe ════════════════════════════════════════════════════════════════ */ #page-ustadh .ustadh-chat { background: radial-gradient(ellipse 90% 30% at 50% 0%, rgba(229,196,106,0.06) 0%, transparent 60%), radial-gradient(circle 40% at 18% 35%, rgba(229,196,106,0.04) 0%, transparent 60%), radial-gradient(circle 40% at 82% 65%, rgba(60,80,160,0.05) 0%, transparent 60%), linear-gradient(180deg, #000000 0%, #010204 35%, #02030c 70%, #04061a 100%); } /* "Heute" Date-Chip */ #page-ustadh .uc-date-chip { align-self: center; padding: 5px 14px; background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.08); border-radius: 999px; font-family: var(--font-app); font-size: 12px; font-weight: 500; color: rgba(232,238,248,0.62); letter-spacing: 0.1px; margin: 8px 0 4px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* Message-Row: Avatar links + Bubble rechts daneben (wie iMessage) */ #page-ustadh .uc-msg-row { display: flex; align-items: flex-end; gap: 10px; max-width: 92%; align-self: flex-start; } #page-ustadh .uc-msg-avatar { width: 42px; height: 42px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #1a1d36 0%, #0a0d20 100%); border: 1px solid rgba(229,196,106,0.28); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; box-shadow: 0 0 14px rgba(229,196,106,0.32), inset 0 0 10px rgba(229,196,106,0.08); animation: tawbaAvatarBreathSoft 4s ease-in-out infinite; } #page-ustadh .uc-msg-avatar svg { width: 34px; height: 34px; filter: drop-shadow(0 0 4px rgba(229,196,106,0.6)); } /* Bubble selbst (innerhalb der msg-row) */ #page-ustadh .uc-msg-row .chat-msg.bot { flex: 1; max-width: calc(100% - 52px); background: linear-gradient(180deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.02) 100%); border: 1px solid rgba(255,255,255,0.075); border-radius: 20px 20px 20px 6px; padding: 14px 16px 12px; backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 28px -10px rgba(0,0,0,0.65); } /* Wenn der ALT-Container (.chat-msg.bot direct child of .uc-chat-box) noch da ist */ #page-ustadh .uc-chat-box > .chat-msg.bot { display: none; } /* ════════════════════════════════════════════════════════════════ 24.4 INPUT-BAR v24 - Mic GRÖSSER + Send GRÖSSER + mehr Glow ════════════════════════════════════════════════════════════════ */ #page-ustadh .uc-input-wrap { min-height: 58px; padding: 6px 6px 6px 12px; border-radius: 32px; background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%); border: 1px solid rgba(255,255,255,0.10); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 28px -8px rgba(0,0,0,0.7), 0 0 30px rgba(229,196,106,0.05); } #page-ustadh .uc-input-wrap:focus-within { border-color: rgba(229,196,106,0.36); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 0 0 4px rgba(229,196,106,0.09), 0 10px 32px -8px rgba(229,196,106,0.20); } /* Mic-Button GRÖSSER */ #page-ustadh .uc-mic { width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); color: rgba(232,238,248,0.7); flex-shrink: 0; transition: all 0.25s cubic-bezier(0.16,1,0.3,1); } #page-ustadh .uc-mic svg { width: 22px; height: 22px; stroke-width: 1.7; } #page-ustadh .uc-mic:hover { background: rgba(229,196,106,0.10); color: #f5d878; border-color: rgba(229,196,106,0.24); } /* Send-Button GRÖSSER + mehr Glow */ #page-ustadh .uc-send { width: 46px; height: 46px; min-width: 46px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #fff5cc 0%, transparent 55%), linear-gradient(135deg, #f5d878 0%, #d4a830 50%, #a07810 100%); border: 1.5px solid rgba(255,235,170,0.55); color: #1a1004; flex-shrink: 0; box-shadow: 0 4px 18px rgba(229,196,106,0.6), 0 0 28px rgba(229,196,106,0.38), 0 0 6px rgba(229,196,106,0.5), inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -2px 5px rgba(0,0,0,0.22); } #page-ustadh .uc-send svg { width: 22px; height: 22px; transform: translateX(1px); filter: drop-shadow(0 1px 1px rgba(255,255,255,0.45)); } #page-ustadh .uc-send:hover { box-shadow: 0 6px 24px rgba(229,196,106,0.78), 0 0 38px rgba(229,196,106,0.5), 0 0 8px rgba(229,196,106,0.6), inset 0 1px 0 rgba(255,255,255,0.7), inset 0 -2px 5px rgba(0,0,0,0.22); } /* Input placeholder weicher */ #page-ustadh .uc-input-wrap input { font-size: 15.5px; letter-spacing: -0.05px; padding: 12px 8px; } #page-ustadh .uc-input-wrap input::placeholder { color: rgba(232,238,248,0.32); font-weight: 400; letter-spacing: 0; opacity: 0.85; } /* ╔══════════════════════════════════════════════════════════════════╗ ║ v25 PREMIUM UI - Outfit Font, Online/Offline, BIG Buttons ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* ════════════════════════════════════════════════════════════════ 25.1 APP-SCHRIFT - "Outfit" (modern, freundlich, premium iOS) ════════════════════════════════════════════════════════════════ */ :root { --font-app: "Outfit", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", Roboto, "Helvetica Neue", sans-serif; } body { font-family: var(--font-app); } /* ════════════════════════════════════════════════════════════════ 25.2 ONLINE-STATUS unter Logo (nur "Online" / "Offline") ════════════════════════════════════════════════════════════════ */ .app-header .logo-online-txt { font-family: var(--font-app); font-size: 11px; font-weight: 500; color: rgba(232,238,248,0.55); letter-spacing: 0.3px; transition: color 0.3s ease-out; } .app-header .logo-online-dot { width: 6px; height: 6px; border-radius: 50%; background: #4caf76; box-shadow: 0 0 6px rgba(76,175,118,0.7), 0 0 10px rgba(76,175,118,0.35); animation: ucDotPulse 2.4s ease-in-out infinite; transition: background 0.3s ease-out, box-shadow 0.3s ease-out; } /* Offline-State */ .app-header .logo-online.is-offline .logo-online-dot { background: #8a8a8a; box-shadow: 0 0 4px rgba(138,138,138,0.4); animation: none; } .app-header .logo-online.is-offline .logo-online-txt { color: rgba(232,238,248,0.35); } /* ════════════════════════════════════════════════════════════════ 25.3 INPUT-BAR - Mic + Send Premium GROSS (52px) + krasser Glow ════════════════════════════════════════════════════════════════ */ #page-ustadh .uc-input-row { padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); } #page-ustadh .uc-input-wrap { min-height: 64px; padding: 6px 6px 6px 14px; border-radius: 36px; background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.022) 100%); border: 1px solid rgba(255,255,255,0.10); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 30px -10px rgba(0,0,0,0.7), 0 0 36px rgba(229,196,106,0.06); gap: 8px; } #page-ustadh .uc-input-wrap:focus-within { border-color: rgba(229,196,106,0.40); box-shadow: inset 0 1px 0 rgba(255,255,255,0.13), 0 0 0 4px rgba(229,196,106,0.10), 0 12px 36px -8px rgba(229,196,106,0.24); } /* Mic GROSS (52px) - eleganter Border */ #page-ustadh .uc-mic { width: 52px; height: 52px; min-width: 52px; border-radius: 50%; background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.025) 100%); border: 1px solid rgba(255,255,255,0.12); color: rgba(232,238,248,0.78); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.25s cubic-bezier(0.16,1,0.3,1); box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 4px 14px -4px rgba(0,0,0,0.5); } #page-ustadh .uc-mic svg { width: 24px; height: 24px; stroke-width: 1.8; } #page-ustadh .uc-mic:hover { background: linear-gradient(180deg, rgba(229,196,106,0.14) 0%, rgba(229,196,106,0.06) 100%); border-color: rgba(229,196,106,0.32); color: #f5d878; } #page-ustadh .uc-mic.recording { background: linear-gradient(180deg, rgba(224,85,85,0.20) 0%, rgba(224,85,85,0.08) 100%); border-color: rgba(224,85,85,0.45); color: #ff7777; } /* Send GROSS (52px) - heftiger Premium Multi-Layer-Glow */ #page-ustadh .uc-send { width: 52px; height: 52px; min-width: 52px; border-radius: 50%; background: radial-gradient(circle at 32% 26%, #fff8d8 0%, transparent 50%), linear-gradient(135deg, #f5d878 0%, #e0b840 30%, #c09020 65%, #8a6010 100%); border: 1.5px solid rgba(255,235,170,0.6); color: #1a1004; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s cubic-bezier(0.16,1,0.3,1); box-shadow: 0 6px 22px rgba(229,196,106,0.68), 0 0 32px rgba(229,196,106,0.45), 0 0 8px rgba(229,196,106,0.6), inset 0 1px 0 rgba(255,255,255,0.65), inset 0 -3px 6px rgba(0,0,0,0.25); } #page-ustadh .uc-send svg { width: 25px; height: 25px; stroke-width: 2.2; transform: translateX(1px) translateY(-0.5px); filter: drop-shadow(0 1px 2px rgba(255,255,255,0.5)); } #page-ustadh .uc-send:hover { box-shadow: 0 8px 28px rgba(229,196,106,0.85), 0 0 42px rgba(229,196,106,0.6), 0 0 12px rgba(229,196,106,0.7), inset 0 1px 0 rgba(255,255,255,0.75), inset 0 -3px 6px rgba(0,0,0,0.25); } #page-ustadh .uc-send:active { transform: scale(0.92); } /* Input-Feld: Outfit + größer */ #page-ustadh .uc-input-wrap input { font-family: var(--font-app); font-size: 16px; font-weight: 400; letter-spacing: -0.05px; padding: 14px 6px; } #page-ustadh .uc-input-wrap input::placeholder { color: rgba(232,238,248,0.34); font-weight: 400; letter-spacing: 0; opacity: 0.9; } /* ════════════════════════════════════════════════════════════════ 25.4 NAV-ICONS Konsistenz (alle Outline Stroke 1.6, Glow gleich) ════════════════════════════════════════════════════════════════ */ .bottom-nav .nav-btn svg { width: 24px; height: 24px; stroke-width: 1.6; fill: none; } .bottom-nav .nav-btn.active svg { filter: drop-shadow(0 0 8px rgba(245,216,120,0.7)) drop-shadow(0 0 3px rgba(255,255,255,0.4)); } /* ╔══════════════════════════════════════════════════════════════════╗ ║ v26 - Manrope, Splash-Schnuppen, Glas-Send, mehr Sterne, Icons ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* ════════════════════════════════════════════════════════════════ 26.1 SCHRIFTART → Manrope (weicher, friendly, premium iOS) ════════════════════════════════════════════════════════════════ */ :root { --font-app: "Manrope", "Outfit", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", Roboto, "Helvetica Neue", sans-serif; } body, .pages, .page, button, input, textarea { font-family: var(--font-app); letter-spacing: -0.01em; } /* ════════════════════════════════════════════════════════════════ 26.2 SPLASH - Sterne stärker + Sternschnuppen ════════════════════════════════════════════════════════════════ */ /* Sterne deutlicher, abwechselnd zwinkern */ .tawba-intro-v22 .ti22-stars span { background: rgba(255, 245, 220, 0.9); box-shadow: 0 0 5px rgba(255, 245, 220, 0.85), 0 0 10px rgba(255, 230, 160, 0.45); } /* Individuelle Twinkle-Delays für alle 18 Sterne */ .tawba-intro-v22 .ti22-stars span:nth-child(1) { animation-delay: 0s; animation-duration: 3.4s; } .tawba-intro-v22 .ti22-stars span:nth-child(2) { animation-delay: 0.4s; animation-duration: 4.2s; } .tawba-intro-v22 .ti22-stars span:nth-child(3) { animation-delay: 1.1s; animation-duration: 3.0s; } .tawba-intro-v22 .ti22-stars span:nth-child(4) { animation-delay: 0.6s; animation-duration: 3.8s; } .tawba-intro-v22 .ti22-stars span:nth-child(5) { animation-delay: 1.8s; animation-duration: 3.2s; } .tawba-intro-v22 .ti22-stars span:nth-child(6) { animation-delay: 2.2s; animation-duration: 4.0s; } .tawba-intro-v22 .ti22-stars span:nth-child(7) { animation-delay: 0.9s; animation-duration: 3.6s; } .tawba-intro-v22 .ti22-stars span:nth-child(8) { animation-delay: 1.4s; animation-duration: 4.4s; } .tawba-intro-v22 .ti22-stars span:nth-child(9) { animation-delay: 2.6s; animation-duration: 3.2s; } .tawba-intro-v22 .ti22-stars span:nth-child(10) { animation-delay: 0.3s; animation-duration: 3.8s; } .tawba-intro-v22 .ti22-stars span:nth-child(11) { animation-delay: 1.6s; animation-duration: 3.4s; } .tawba-intro-v22 .ti22-stars span:nth-child(12) { animation-delay: 2.0s; animation-duration: 4.2s; } .tawba-intro-v22 .ti22-stars span:nth-child(13) { animation-delay: 0.7s; animation-duration: 3.6s; } .tawba-intro-v22 .ti22-stars span:nth-child(14) { animation-delay: 1.3s; animation-duration: 3.0s; } .tawba-intro-v22 .ti22-stars span:nth-child(15) { animation-delay: 2.4s; animation-duration: 4.0s; } .tawba-intro-v22 .ti22-stars span:nth-child(16) { animation-delay: 0.5s; animation-duration: 3.4s; } .tawba-intro-v22 .ti22-stars span:nth-child(17) { animation-delay: 1.9s; animation-duration: 3.8s; } .tawba-intro-v22 .ti22-stars span:nth-child(18) { animation-delay: 2.3s; animation-duration: 3.6s; } /* Sternschnuppen-Container + 4 Schnuppen */ .tawba-intro-v22 .ti22-shooting { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; mix-blend-mode: screen; } .tawba-intro-v22 .ti22-shoot { position: absolute; width: 120px; height: 2px; background: linear-gradient(90deg, rgba(255,245,220,0) 0%, rgba(255,245,220,0.85) 75%, #fff8e0 100%); border-radius: 2px; opacity: 0; filter: drop-shadow(0 0 6px rgba(255,245,220,1)) drop-shadow(0 0 12px rgba(255,225,140,0.55)); transform-origin: right center; } .tawba-intro-v22 .ti22-shoot::after { content: ''; position: absolute; right: -3px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #fff8e0; box-shadow: 0 0 10px rgba(255,245,220,1), 0 0 18px rgba(255,225,140,0.7); } .tawba-intro-v22 .ti22-shoot-1 { top: 10%; left: 6%; animation: ti22Shoot1 9s ease-in 1.2s infinite; } .tawba-intro-v22 .ti22-shoot-2 { top: 22%; left: 48%; animation: ti22Shoot2 13s ease-in 4.5s infinite; } .tawba-intro-v22 .ti22-shoot-3 { top: 16%; left: 32%; animation: ti22Shoot3 16s ease-in 8s infinite; } .tawba-intro-v22 .ti22-shoot-4 { top: 30%; left: 14%; animation: ti22Shoot4 19s ease-in 12s infinite; } @keyframes ti22Shoot1 { 0% { opacity: 0; transform: rotate(22deg) translateX(0); } 3% { opacity: 1; } 9% { opacity: 0; transform: rotate(22deg) translateX(280px); } 100%{ opacity: 0; transform: rotate(22deg) translateX(280px); } } @keyframes ti22Shoot2 { 0% { opacity: 0; transform: rotate(28deg) translateX(0); } 3% { opacity: 1; } 8% { opacity: 0; transform: rotate(28deg) translateX(260px); } 100%{ opacity: 0; transform: rotate(28deg) translateX(260px); } } @keyframes ti22Shoot3 { 0% { opacity: 0; transform: rotate(18deg) translateX(0); } 3% { opacity: 1; } 10% { opacity: 0; transform: rotate(18deg) translateX(320px); } 100%{ opacity: 0; transform: rotate(18deg) translateX(320px); } } @keyframes ti22Shoot4 { 0% { opacity: 0; transform: rotate(32deg) translateX(0); } 3% { opacity: 1; } 9% { opacity: 0; transform: rotate(32deg) translateX(290px); } 100%{ opacity: 0; transform: rotate(32deg) translateX(290px); } } /* ════════════════════════════════════════════════════════════════ 26.3 SPLASH - 3 Loading-Dots DEUTLICHER ════════════════════════════════════════════════════════════════ */ .tawba-intro-v22 .ti22-dots { bottom: 44px; gap: 14px; } .tawba-intro-v22 .ti22-dots i { width: 11px; height: 11px; background: radial-gradient(circle at 32% 28%, #fff5cc 0%, #e5c46a 55%, #a07810 100%); box-shadow: 0 0 14px rgba(229,196,106,0.85), 0 0 26px rgba(229,196,106,0.50), inset 0 1px 1px rgba(255,255,255,0.45); animation: ti22DotsLoadingPulse 1.5s ease-in-out infinite; } .tawba-intro-v22 .ti22-dots i:nth-child(1) { animation-delay: 0s; } .tawba-intro-v22 .ti22-dots i:nth-child(2) { animation-delay: 0.22s; } .tawba-intro-v22 .ti22-dots i:nth-child(3) { animation-delay: 0.44s; } @keyframes ti22DotsLoadingPulse { 0%, 100% { opacity: 0.30; transform: scale(0.75); } 50% { opacity: 1; transform: scale(1.35); } } /* ════════════════════════════════════════════════════════════════ 26.4 CHAT - Gold-Send-Button WEG → dezent Glas ════════════════════════════════════════════════════════════════ */ #page-ustadh .uc-send { background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.04) 100%); border: 1px solid rgba(255,255,255,0.16); color: rgba(245,248,255,0.85); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 4px 14px -4px rgba(0,0,0,0.55); } #page-ustadh .uc-send svg { filter: none; color: rgba(245,248,255,0.92); } #page-ustadh .uc-send:hover { background: linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.06) 100%); border-color: rgba(255,255,255,0.24); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 6px 18px -4px rgba(0,0,0,0.6); } /* ════════════════════════════════════════════════════════════════ 26.5 CHAT - mehr Sterne im Hintergrund (deutlicher sichtbar) ════════════════════════════════════════════════════════════════ */ #page-ustadh .uc-bg-stars { display: block !important; } #page-ustadh .uc-bg-stars span { background: rgba(255,245,220,0.65); box-shadow: 0 0 4px rgba(255,245,220,0.55), 0 0 8px rgba(255,225,150,0.3); width: 1.8px; height: 1.8px; } /* Mehr Sterne sichtbar */ #page-ustadh .uc-bg-stars span:nth-child(odd) { width: 2.2px; height: 2.2px; } /* ════════════════════════════════════════════════════════════════ 26.6 HOME - SVG-Icons statt Emojis (Container-Styling) ════════════════════════════════════════════════════════════════ */ #page-home .dgc-icon svg, #page-home .mw-icon svg, #page-home .mw-mosque-icon svg { display: block; color: #f5d878; filter: drop-shadow(0 0 6px rgba(245,216,120,0.35)); } #page-home .dgc-icon { background: linear-gradient(135deg, rgba(76,175,118,0.22), rgba(76,175,118,0.08)); border: 1px solid rgba(76,175,118,0.30); } #page-home .dgc-icon svg { color: #5fd47d; filter: drop-shadow(0 0 6px rgba(94,212,125,0.4)); } #page-home .mw-icon { width: 64px; height: 64px; border-radius: 22px; background: linear-gradient(135deg, rgba(229,196,106,0.16), rgba(229,196,106,0.06)); border: 1px solid rgba(229,196,106,0.25); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; } #page-home .mw-mosque-icon { width: 44px; height: 44px; border-radius: 14px; background: rgba(229,196,106,0.10); border: 1px solid rgba(229,196,106,0.20); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* ╔══════════════════════════════════════════════════════════════════╗ ║ v27 - Onboarding, Adhkar Premium, Quran/Family Polish ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* ════════════════════════════════════════════════════════════════ 27.1 ONBOARDING-FLOW ════════════════════════════════════════════════════════════════ */ .onboard-overlay { position: fixed; inset: 0; z-index: 9500; background: radial-gradient(ellipse 80% 50% at 50% 10%, rgba(229,196,106,0.10) 0%, transparent 60%), linear-gradient(180deg, #000000 0%, #02030a 50%, #04061a 100%); display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; animation: obFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .onboard-overlay.is-closing { animation: obFadeOut 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes obFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes obFadeOut { 0% { opacity: 1; } 100% { opacity: 0; transform: scale(1.04); filter: blur(8px); } } .onboard-card { width: 100%; max-width: 420px; background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.015) 100%); border: 1px solid rgba(229,196,106,0.16); border-radius: 28px; padding: 28px 24px 24px; backdrop-filter: blur(20px) saturate(180%); box-shadow: 0 24px 60px -20px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.06); position: relative; } .onboard-dots { display: flex; justify-content: center; gap: 8px; margin-bottom: 28px; } .ob-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.12); transition: all 0.3s cubic-bezier(0.16,1,0.3,1); } .ob-dot.active { background: #f5d878; box-shadow: 0 0 10px rgba(245,216,120,0.6); width: 24px; border-radius: 999px; } .ob-dot.done { background: rgba(229,196,106,0.5); } .onboard-step { display: none; text-align: center; min-height: 260px; animation: obStepIn 0.5s cubic-bezier(0.16,1,0.3,1); } .onboard-step.active { display: block; } @keyframes obStepIn { /* v286: kein seitliches Rucken mehr ("soll grade sein") → ruhiger, gerader Fade */ from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } } .ob-icon { width: 88px; height: 88px; margin: 0 auto 22px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(229,196,106,0.18), rgba(229,196,106,0.04) 70%); border: 1px solid rgba(229,196,106,0.22); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 30px rgba(229,196,106,0.18), inset 0 1px 0 rgba(255,255,255,0.08); } .ob-icon svg { width: 56px; height: 56px; filter: drop-shadow(0 0 6px rgba(245,216,120,0.5)); } .ob-icon-emoji { font-size: 44px; } .ob-title { font-family: var(--font-app); font-size: 26px; font-weight: 700; color: #f5e8b8; letter-spacing: -0.4px; margin-bottom: 10px; } .ob-sub { font-family: var(--font-app); font-size: 15px; font-weight: 400; color: rgba(232,238,248,0.62); line-height: 1.55; letter-spacing: -0.05px; margin-bottom: 22px; } .ob-input { width: 100%; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); border-radius: 16px; padding: 14px 18px; font-family: var(--font-app); font-size: 16px; font-weight: 500; color: #f5f0e1; text-align: center; letter-spacing: -0.05px; outline: none; transition: border-color 0.25s, box-shadow 0.25s; } .ob-input:focus { border-color: rgba(229,196,106,0.40); box-shadow: 0 0 0 3px rgba(229,196,106,0.10); } .ob-gender, .ob-goals { display: flex; gap: 8px; justify-content: center; margin-top: 14px; } .ob-gender-pill, .ob-goal-pill { flex: 1; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); border-radius: 14px; padding: 12px 16px; font-family: var(--font-app); font-size: 14px; font-weight: 600; color: rgba(232,238,248,0.7); cursor: pointer; transition: all 0.22s cubic-bezier(0.16,1,0.3,1); } .ob-gender-pill.active, .ob-goal-pill.active { background: linear-gradient(180deg, rgba(229,196,106,0.18), rgba(229,196,106,0.08)); border-color: rgba(229,196,106,0.40); color: #f5e8b8; box-shadow: 0 0 16px rgba(229,196,106,0.20); } .onboard-actions { display: flex; gap: 10px; margin-top: 28px; } .ob-btn { flex: 1; padding: 14px 20px; border-radius: 14px; font-family: var(--font-app); font-size: 15px; font-weight: 600; letter-spacing: 0.1px; cursor: pointer; transition: all 0.25s cubic-bezier(0.16,1,0.3,1); border: 1px solid transparent; } .ob-btn-back { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.10); color: rgba(232,238,248,0.7); } .ob-btn-back:active { transform: scale(0.97); } .ob-btn-next { background: radial-gradient(circle at 32% 26%, #fff8d8 0%, transparent 50%), linear-gradient(135deg, #f5d878 0%, #d4a830 50%, #a07810 100%); border-color: rgba(255,235,170,0.5); color: #1a1004; box-shadow: 0 4px 18px rgba(229,196,106,0.45), inset 0 1px 0 rgba(255,255,255,0.5); } .ob-btn-next:active { transform: scale(0.97); } .ob-btn-back.hidden { visibility: hidden; } /* ════════════════════════════════════════════════════════════════ 27.2 ADHKAR - Premium Polish (Kategorien-Cards, Suche) ════════════════════════════════════════════════════════════════ */ #page-dua { padding-bottom: 110px; } #page-dua .daily-adhkar { background: radial-gradient(ellipse at 0% 0%, rgba(229,196,106,0.12), transparent 55%), linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015)); border: 1px solid rgba(229,196,106,0.18); border-radius: 24px; padding: 16px 16px 18px; margin-bottom: 16px; backdrop-filter: blur(8px); box-shadow: 0 10px 28px rgba(0,0,0,0.3); } #page-dua .da-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } #page-dua .da-title { font-family: var(--font-app); font-size: 16px; font-weight: 700; color: #f5e8b8; letter-spacing: -0.2px; display: flex; align-items: center; gap: 8px; } #page-dua .da-title-icon { color: #f5d878; display: inline-flex; align-items: center; } #page-dua .da-pct { font-family: var(--font-app); font-size: 22px; font-weight: 700; color: #f5d878; letter-spacing: -0.4px; text-shadow: 0 0 14px rgba(245,216,120,0.4); } #page-dua .da-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } #page-dua .da-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 14px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; transition: all 0.25s cubic-bezier(0.16,1,0.3,1); } #page-dua .da-card:active { transform: scale(0.97); background: rgba(229,196,106,0.08); } #page-dua .da-icon { color: #f5d878; } #page-dua .da-lbl { font-family: var(--font-app); font-size: 13px; font-weight: 600; color: rgba(245,240,225,0.9); letter-spacing: -0.1px; } #page-dua .da-count { font-family: var(--font-app); font-size: 12px; font-weight: 500; color: rgba(232,238,248,0.55); letter-spacing: 0.2px; } /* Such-Leiste */ #page-dua .dua-search { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); border-radius: 16px; padding: 4px 4px 4px 14px; display: flex; align-items: center; gap: 10px; margin-bottom: 18px; min-height: 46px; transition: border-color 0.25s, box-shadow 0.25s; } #page-dua .dua-search:focus-within { border-color: rgba(229,196,106,0.36); box-shadow: 0 0 0 3px rgba(229,196,106,0.08); } #page-dua .dua-search .ds-icon { color: rgba(232,238,248,0.45); display: inline-flex; align-items: center; } #page-dua .dua-search input { flex: 1; background: transparent; border: none; outline: none; color: #f5f0e1; font-family: var(--font-app); font-size: 15px; font-weight: 400; padding: 10px 4px; } #page-dua .dua-search input::placeholder { color: rgba(232,238,248,0.32); } /* Kategorien-Cards */ #page-dua .dua-cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; } #page-dua .dua-cat-card, #page-dua .dua-fav-list > * { background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.07); border-radius: 18px; padding: 14px 14px 16px; cursor: pointer; transition: all 0.25s cubic-bezier(0.16,1,0.3,1); } #page-dua .dua-cat-card:active { transform: scale(0.97); background: rgba(229,196,106,0.06); border-color: rgba(229,196,106,0.18); } /* ════════════════════════════════════════════════════════════════ 27.3 QURAN - Polish ════════════════════════════════════════════════════════════════ */ #page-quran { padding-bottom: 110px; } #page-quran .quran-header { background: radial-gradient(ellipse at 50% 0%, rgba(229,196,106,0.14), transparent 60%), linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); border: 1px solid rgba(229,196,106,0.18); border-radius: 24px; padding: 20px 16px; margin-bottom: 14px; text-align: center; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 22px rgba(0,0,0,0.3); } #page-quran .qh-title { font-family: var(--font-app); font-size: 24px; font-weight: 700; color: #f5e8b8; letter-spacing: -0.4px; margin-bottom: 4px; } #page-quran .qh-sub { font-family: var(--font-app); font-size: 12px; font-weight: 500; color: rgba(232,238,248,0.55); letter-spacing: 0.3px; } #page-quran .khatm-tracker { background: rgba(255,255,255,0.04); border: 1px solid rgba(229,196,106,0.14); border-radius: 20px; padding: 14px 16px; margin-bottom: 14px; display: flex; align-items: center; gap: 12px; } #page-quran .surah-list-item { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 14px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; margin-bottom: 8px; cursor: pointer; transition: all 0.22s cubic-bezier(0.16,1,0.3,1); } #page-quran .surah-list-item:hover { background: rgba(229,196,106,0.05); border-color: rgba(229,196,106,0.16); } /* ════════════════════════════════════════════════════════════════ 27.4 FAMILY - Polish ════════════════════════════════════════════════════════════════ */ #page-family { padding-bottom: 110px; } #page-family .family-tasbih-card, #page-family .tournament-card, #page-family .family-challenge, #page-family .sadaqah-card, #page-family .reminder-strip, #page-family .salam-strip { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 20px; padding: 16px; margin-bottom: 12px; backdrop-filter: blur(8px); box-shadow: 0 8px 22px rgba(0,0,0,0.25); } #page-family .family-header { background: radial-gradient(ellipse at 0% 0%, rgba(229,196,106,0.14), transparent 60%), linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015)); border: 1px solid rgba(229,196,106,0.18); border-radius: 22px; padding: 16px 18px; margin-bottom: 16px; } /* ════════════════════════════════════════════════════════════════ 27.5 SETTINGS-Modal Polish ════════════════════════════════════════════════════════════════ */ #settingsModal .modal-content { background: linear-gradient(180deg, rgba(20,28,52,0.96) 0%, rgba(10,14,32,0.98) 100%); border: 1px solid rgba(229,196,106,0.16); border-radius: 28px 28px 0 0; backdrop-filter: blur(20px) saturate(180%); } #settingsModal .modal-title { font-family: var(--font-app); font-weight: 700; letter-spacing: -0.3px; color: #f5e8b8; } #settingsModal .settings-section { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; padding: 14px 16px; margin-bottom: 10px; } #settingsModal .settings-label { font-family: var(--font-app); font-size: 11px; font-weight: 600; color: rgba(245,216,120,0.7); letter-spacing: 1.6px; text-transform: uppercase; margin-bottom: 8px; } /* ════════════════════════════════════════════════════════════════ 27.6 PUSH-NOTIFICATION TOAST (für Gebetszeit-Reminder) ════════════════════════════════════════════════════════════════ */ .push-toast { position: fixed; bottom: calc(110px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%) translateY(40px); z-index: 9000; width: calc(100% - 32px); max-width: 380px; background: linear-gradient(180deg, rgba(20,28,52,0.95), rgba(10,14,32,0.98)); border: 1px solid rgba(229,196,106,0.32); border-radius: 16px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; backdrop-filter: blur(16px) saturate(180%); box-shadow: 0 12px 32px rgba(0,0,0,0.5); opacity: 0; transition: all 0.32s cubic-bezier(0.16,1,0.3,1); } .push-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); } .push-toast .pt-icon { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, rgba(229,196,106,0.22), rgba(229,196,106,0.08)); border: 1px solid rgba(229,196,106,0.30); display: flex; align-items: center; justify-content: center; color: #f5d878; flex-shrink: 0; } .push-toast .pt-info { flex: 1; min-width: 0; } .push-toast .pt-title { font-family: var(--font-app); font-size: 14px; font-weight: 600; color: #f5e8b8; letter-spacing: -0.1px; } .push-toast .pt-sub { font-family: var(--font-app); font-size: 12px; font-weight: 400; color: rgba(232,238,248,0.62); margin-top: 2px; } /* ════════════════════════════════════════════════════════════════ 27.7 TAWBA STREAMING-CURSOR (Typing-Animation) ════════════════════════════════════════════════════════════════ */ .chat-msg.bot.is-streaming::after { content: ''; display: inline-block; width: 8px; height: 16px; background: #f5d878; margin-left: 4px; vertical-align: text-bottom; animation: chatCursorBlink 0.85s ease-in-out infinite; border-radius: 2px; } @keyframes chatCursorBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* Typing-Indicator (3 Dots) während Bot tippt */ .uc-typing { display: flex; gap: 5px; align-items: center; padding: 14px 16px; align-self: flex-start; background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02)); border: 1px solid rgba(255,255,255,0.075); border-radius: 20px 20px 20px 6px; backdrop-filter: blur(18px) saturate(160%); width: fit-content; animation: tawbaMsgIn 0.4s cubic-bezier(0.16,1,0.3,1); } .uc-typing span { width: 7px; height: 7px; border-radius: 50%; background: rgba(245,216,120,0.8); animation: typingBounce 1.2s ease-in-out infinite; } .uc-typing span:nth-child(2) { animation-delay: 0.2s; } .uc-typing span:nth-child(3) { animation-delay: 0.4s; } @keyframes typingBounce { 0%, 100% { transform: translateY(0); opacity: 0.4; } 50% { transform: translateY(-4px); opacity: 1; } } /* ╔══════════════════════════════════════════════════════════════════╗ ║ v28 - Premium Toast, Empty-States, iOS-Splash-Screen-Hints ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* ════════════════════════════════════════════════════════════════ 28.1 TOAST Premium (statt nackter Text-Box) ════════════════════════════════════════════════════════════════ */ #toast { position: fixed; bottom: calc(110px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%) translateY(40px); z-index: 9000; padding: 12px 22px; background: linear-gradient(180deg, rgba(20,28,52,0.96) 0%, rgba(10,14,32,0.98) 100%); border: 1px solid rgba(229,196,106,0.30); border-radius: 999px; font-family: var(--font-app, "Manrope", sans-serif); font-size: 14px; font-weight: 600; color: #f5e8b8; letter-spacing: -0.05px; backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); box-shadow: 0 12px 32px rgba(0,0,0,0.5), 0 0 24px rgba(229,196,106,0.18), inset 0 1px 0 rgba(255,255,255,0.10); opacity: 0; pointer-events: none; transition: opacity 0.32s cubic-bezier(0.16,1,0.3,1), transform 0.32s cubic-bezier(0.34,1.56,0.64,1); white-space: nowrap; max-width: calc(100vw - 32px); } #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } /* XP-Float */ .xp-float { position: fixed; z-index: 9100; font-family: var(--font-app, "Manrope", sans-serif); font-size: 22px; font-weight: 800; color: #f5d878; text-shadow: 0 0 12px rgba(245,216,120,0.7), 0 0 24px rgba(245,216,120,0.4); letter-spacing: -0.5px; pointer-events: none; opacity: 0; transition: none; } .xp-float.show { animation: xpFloatUp 1.2s cubic-bezier(0.16,1,0.3,1) forwards; } @keyframes xpFloatUp { 0% { opacity: 0; transform: translateY(0) scale(0.8); } 20% { opacity: 1; transform: translateY(-10px) scale(1.05); } 100% { opacity: 0; transform: translateY(-80px) scale(1); } } /* ════════════════════════════════════════════════════════════════ 28.2 EMPTY-STATES (für leere Family, Quran-Favoriten etc.) ════════════════════════════════════════════════════════════════ */ .sa-empty { text-align: center; padding: 40px 24px; color: rgba(232,238,248,0.55); } .sa-empty-icon { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, rgba(229,196,106,0.10), rgba(229,196,106,0.02)); border: 1px solid rgba(229,196,106,0.16); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; color: rgba(245,216,120,0.7); } .sa-empty-icon svg { width: 30px; height: 30px; } .sa-empty-title { font-family: var(--font-app); font-size: 17px; font-weight: 700; color: #f5e8b8; letter-spacing: -0.2px; margin-bottom: 6px; } .sa-empty-sub { font-family: var(--font-app); font-size: 14px; font-weight: 400; color: rgba(232,238,248,0.55); line-height: 1.55; letter-spacing: -0.05px; } /* ════════════════════════════════════════════════════════════════ 28.3 PWA Install-Hint (für iOS Safari "Add to Home Screen") ════════════════════════════════════════════════════════════════ */ .pwa-hint { position: fixed; bottom: calc(120px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%) translateY(40px); z-index: 8900; background: linear-gradient(180deg, rgba(20,28,52,0.96), rgba(10,14,32,0.98)); border: 1px solid rgba(229,196,106,0.28); border-radius: 18px; padding: 14px 18px; display: flex; align-items: center; gap: 12px; max-width: calc(100% - 32px); backdrop-filter: blur(16px) saturate(180%); box-shadow: 0 12px 32px rgba(0,0,0,0.55); opacity: 0; transition: all 0.4s cubic-bezier(0.16,1,0.3,1); } .pwa-hint.is-show { opacity: 1; transform: translateX(-50%) translateY(0); } .pwa-hint-icon { font-size: 22px; flex-shrink: 0; } .pwa-hint-text { font-family: var(--font-app); font-size: 13px; font-weight: 500; color: #f5e8b8; letter-spacing: -0.05px; line-height: 1.4; } .pwa-hint-close { width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,0.06); border: none; color: rgba(232,238,248,0.55); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* ════════════════════════════════════════════════════════════════ 28.4 SETTINGS Toggle-Switch (iOS-Style) ════════════════════════════════════════════════════════════════ */ .settings-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .settings-toggle-lbl { font-family: var(--font-app); font-size: 15px; font-weight: 500; color: rgba(245,240,225,0.85); } .settings-toggle { position: relative; display: inline-block; width: 50px; height: 30px; flex-shrink: 0; } .settings-toggle input { opacity: 0; width: 0; height: 0; } .settings-toggle-track { position: absolute; inset: 0; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.12); border-radius: 999px; cursor: pointer; transition: all 0.28s cubic-bezier(0.16,1,0.3,1); } .settings-toggle-track::before { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; background: #ffffff; border-radius: 50%; transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1); box-shadow: 0 2px 6px rgba(0,0,0,0.35); } .settings-toggle input:checked + .settings-toggle-track { background: linear-gradient(180deg, #f5d878, #d4a830); border-color: rgba(255,235,170,0.5); box-shadow: inset 0 1px 0 rgba(255,255,255,0.3); } .settings-toggle input:checked + .settings-toggle-track::before { transform: translateX(20px); } /* ╔══════════════════════════════════════════════════════════════════╗ ║ v29 - MAARIFA DARK EDITORIAL (verspielt + seriös) ║ ║ Anthrazit + Sage + Gold | Fraunces Serif | runde Cards ║ ╚══════════════════════════════════════════════════════════════════╝ */ :root { /* ════ NEUE PALETTE — Anthrazit-Editorial ════ */ --bg-canvas: #0c0d12; /* Hintergrund: warmes Schwarz-Anthrazit */ --bg-elevated: #131521; /* Card-Hintergrund */ --bg-elevated-2: #1a1d2b; /* Card-Hover / Modal */ --bg-tint: rgba(255,253,247,0.018); /* warm-cream-Hauch */ /* Text - cream-warm statt rein-weiß */ --txt-primary: #f4ede0; /* warmes Cream */ --txt-secondary: rgba(244,237,224,0.62); --txt-tertiary: rgba(244,237,224,0.38); --txt-disabled: rgba(244,237,224,0.20); /* Akzent 1: warmes Gold (Maarifa-Style) */ --accent-gold: #c8a360; --accent-gold-soft: #e0b870; --accent-gold-glow: rgba(224,184,112,0.20); /* Akzent 2: Sage/Mint — verspielt aber ruhig */ --accent-sage: #8db8a8; --accent-sage-soft: #a8d4c4; --accent-sage-glow: rgba(141,184,168,0.18); /* Akzent 3: Warmes Lila — emotional */ --accent-mauve: #b89cc8; --accent-mauve-glow: rgba(184,156,200,0.15); /* Borders — sehr subtil, warm */ --border-hairline: rgba(244,237,224,0.06); --border-soft: rgba(244,237,224,0.10); --border-strong: rgba(244,237,224,0.16); --border-accent: rgba(200,163,96,0.22); /* Schatten — weicher, editorial */ --shadow-soft: 0 8px 24px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.03) inset; --shadow-elev: 0 12px 36px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.05) inset; --shadow-float: 0 24px 48px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.06) inset; --shadow-glow-gold: 0 0 28px rgba(200,163,96,0.18); --shadow-glow-sage: 0 0 28px rgba(141,184,168,0.18); /* Schriften */ --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-body: "Manrope", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif; --font-arabic: "Amiri", "Scheherazade New", serif; /* Radius — generös rund */ --r-sm: 12px; --r-md: 18px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px; } /* ════════════════════════════════════════════════════════════════ 29.1 BASE — Anthrazit-Background, warme Cream-Text ════════════════════════════════════════════════════════════════ */ html, body { background: var(--bg-canvas); color: var(--txt-primary); font-family: var(--font-body); letter-spacing: -0.005em; } body { background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(200,163,96,0.04) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 50% 100%, rgba(141,184,168,0.025) 0%, transparent 60%), var(--bg-canvas); } /* ════════════════════════════════════════════════════════════════ 29.2 APP-HEADER — editorial, dezent ════════════════════════════════════════════════════════════════ */ .app-header { background: linear-gradient(180deg, rgba(12,13,18,0.92) 0%, rgba(12,13,18,0.65) 100%); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border-bottom: 1px solid var(--border-hairline); } .logo-bismillah { font-family: var(--font-arabic); color: var(--accent-gold-soft); opacity: 0.85; } .logo-brand { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; color: var(--txt-primary); } .logo-brand .logo-ai, .logo-brand .logo-dot { color: var(--accent-gold-soft); } .app-header .logo-online-txt { font-family: var(--font-body); font-size: 11px; color: var(--txt-secondary); letter-spacing: 0.3px; } .app-header .header-icon-btn, .app-header .header-xp { background: var(--bg-elevated); border: 1px solid var(--border-soft); color: var(--txt-secondary); border-radius: var(--r-pill); } /* ════════════════════════════════════════════════════════════════ 29.3 CARDS — Maarifa-Style: weich, großzügig, editorial ════════════════════════════════════════════════════════════════ */ .welcome-banner, .daily-goal-card, .mawaqit-card, #page-home .welcome-banner, #page-home .daily-goal-card, #page-home .mawaqit-card, .salat-hero, .fatiha-cta, .last-prayer-card, .qibla-card, .stats-card, .khatm-tracker, .quran-last-read, .daily-adhkar, .family-tasbih-card, .tournament-card, .family-challenge, .sadaqah-card, #page-dua .daily-adhkar { background: var(--bg-elevated); border: 1px solid var(--border-hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-soft); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* Hero/Premium-Cards mit Gold-Akzent */ .welcome-banner, .salat-hero, .fatiha-cta, #page-home .welcome-banner { background: radial-gradient(ellipse 90% 70% at 0% 0%, rgba(200,163,96,0.08), transparent 55%), var(--bg-elevated); border-color: var(--border-accent); box-shadow: var(--shadow-elev), var(--shadow-glow-gold); } /* ════════════════════════════════════════════════════════════════ 29.4 TYPO — Fraunces Serif für Hierarchy ════════════════════════════════════════════════════════════════ */ h1, h2, h3, .welcome-banner .wb-name, .salat-hero-title, .dgc-progress, .mw-city, .qh-title, .qd-title, .ob-title, .stats-pct, .fc-title, .uc-name, .lu-title, .lu-name, .section-title, .ach-title { font-family: var(--font-display); letter-spacing: -0.022em; font-feature-settings: "ss01"; } .welcome-banner .wb-name { font-weight: 700; font-size: 28px; color: var(--txt-primary); } .welcome-banner .wb-salam { font-family: var(--font-body); font-size: 12px; font-weight: 500; color: var(--txt-secondary); letter-spacing: 1.5px; text-transform: uppercase; } .salat-hero-title { font-size: 28px; font-weight: 700; color: var(--txt-primary); } .qh-title { font-size: 32px; font-weight: 700; color: var(--txt-primary); } .mw-city { font-size: 20px; font-weight: 600; color: var(--txt-primary); } .stats-pct { font-size: 38px; font-weight: 700; color: var(--accent-gold-soft); letter-spacing: -0.04em; } .fc-title { font-size: 18px; font-weight: 600; } /* Section-Titles editorial-style */ .section-title, .pages .section-title, #page-salat .section-title, #page-dua .section-title { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 2.4px; text-transform: uppercase; color: var(--accent-gold); margin: 32px 4px 14px; position: relative; padding-left: 14px; } .section-title::before, #page-salat .section-title::before, #page-dua .section-title::before { content: ''; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-gold); transform: translateY(-50%); box-shadow: 0 0 8px var(--accent-gold-glow); } /* ════════════════════════════════════════════════════════════════ 29.5 BOTTOM-NAV — editorial, dezent gold ════════════════════════════════════════════════════════════════ */ .bottom-nav.bottom-nav { background: linear-gradient(180deg, rgba(12,13,18,0.95) 0%, rgba(8,9,14,0.99) 100%); border-top: 1px solid var(--border-hairline); backdrop-filter: blur(28px) saturate(180%); } .bottom-nav .nav-btn { color: var(--txt-tertiary); font-family: var(--font-body); font-weight: 600; letter-spacing: 0.4px; } .bottom-nav .nav-btn.active { color: var(--accent-gold-soft); } .bottom-nav .nav-btn.active::before { background: radial-gradient(circle, rgba(200,163,96,0.20) 0%, rgba(200,163,96,0.06) 50%, transparent 100%); } .bottom-nav .nav-btn.active svg { stroke: var(--accent-gold-soft); filter: drop-shadow(0 0 8px var(--accent-gold-glow)) drop-shadow(0 0 3px rgba(255,255,255,0.3)); } /* Home-Circle (Mittelbutton) */ .bottom-nav .nav-home .nav-home-circle { background: linear-gradient(135deg, var(--accent-gold-soft) 0%, var(--accent-gold) 100%); box-shadow: 0 6px 22px rgba(200,163,96,0.45), inset 0 1px 0 rgba(255,255,255,0.4); } /* ════════════════════════════════════════════════════════════════ 29.6 TAWBA CHAT — editorial dark mit Sage-Akzenten ════════════════════════════════════════════════════════════════ */ #page-ustadh .ustadh-chat { background: radial-gradient(ellipse 90% 35% at 50% 0%, rgba(200,163,96,0.05) 0%, transparent 60%), radial-gradient(ellipse 80% 60% at 100% 100%, rgba(141,184,168,0.04) 0%, transparent 60%), var(--bg-canvas); border: none; } #page-ustadh .uc-header { background: linear-gradient(180deg, rgba(200,163,96,0.05), transparent); border-bottom: 1px solid var(--border-hairline); } #page-ustadh .uc-name { font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: var(--txt-primary); } #page-ustadh .uc-status .uc-dot { background: var(--accent-sage); box-shadow: 0 0 10px var(--accent-sage-glow); } /* Bot-Bubble: editorial Glas */ #page-ustadh .chat-msg.bot { background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: var(--r-md) var(--r-md) var(--r-md) 6px; box-shadow: var(--shadow-soft); } #page-ustadh .chat-msg.bot .cm-greeting { font-family: var(--font-display); font-weight: 700; font-style: normal; font-size: 17px; color: var(--accent-gold-soft); letter-spacing: -0.015em; } #page-ustadh .chat-msg.bot .cm-body { font-family: var(--font-body); color: var(--txt-primary); } /* User-Bubble: subtile Sage-Tönung statt Gold (verspielter) */ #page-ustadh .chat-msg.user { background: linear-gradient(180deg, rgba(141,184,168,0.12), rgba(141,184,168,0.05)); border: 1px solid rgba(141,184,168,0.22); border-radius: var(--r-md) var(--r-md) 6px var(--r-md); color: var(--txt-primary); } /* Input-Bar dezent */ #page-ustadh .uc-input-wrap { background: var(--bg-elevated); border: 1px solid var(--border-soft); box-shadow: var(--shadow-soft); } #page-ustadh .uc-input-wrap:focus-within { border-color: var(--accent-gold); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 0 3px var(--accent-gold-glow); } #page-ustadh .uc-send { background: linear-gradient(180deg, var(--accent-sage-soft), var(--accent-sage)); border: 1px solid rgba(168,212,196,0.3); color: #0c0d12; box-shadow: 0 4px 16px var(--accent-sage-glow), inset 0 1px 0 rgba(255,255,255,0.35); } #page-ustadh .uc-send svg { color: #0c0d12; } #page-ustadh .uc-send:hover { box-shadow: 0 6px 22px var(--accent-sage-glow), inset 0 1px 0 rgba(255,255,255,0.45); } /* ════════════════════════════════════════════════════════════════ 29.7 BUTTONS — Premium-Outline + Gold-Filled ════════════════════════════════════════════════════════════════ */ .btn-gold, .pages .btn-gold { background: linear-gradient(180deg, var(--accent-gold-soft) 0%, var(--accent-gold) 100%); border: 1px solid rgba(255,235,170,0.42); color: #0c0d12; font-family: var(--font-body); font-weight: 700; letter-spacing: 0.2px; border-radius: var(--r-md); padding: 14px 22px; box-shadow: 0 4px 16px rgba(200,163,96,0.4), inset 0 1px 0 rgba(255,255,255,0.42); } .btn-outline { background: var(--bg-elevated); border: 1px solid var(--border-soft); color: var(--txt-primary); border-radius: var(--r-md); font-family: var(--font-body); font-weight: 600; padding: 13px 20px; } /* ════════════════════════════════════════════════════════════════ 29.8 ONBOARDING — Editorial-Style ════════════════════════════════════════════════════════════════ */ .onboard-overlay { background: radial-gradient(ellipse 80% 50% at 50% 10%, rgba(200,163,96,0.08), transparent 60%), var(--bg-canvas); } .onboard-card { background: var(--bg-elevated); border: 1px solid var(--border-accent); border-radius: var(--r-xl); box-shadow: var(--shadow-float), var(--shadow-glow-gold); } .ob-title { font-family: var(--font-display); font-weight: 700; font-size: 28px; color: var(--txt-primary); letter-spacing: -0.025em; } .ob-sub { font-family: var(--font-body); color: var(--txt-secondary); } .ob-dot.active { background: var(--accent-gold-soft); box-shadow: 0 0 10px var(--accent-gold-glow); } .ob-btn-next { background: linear-gradient(180deg, var(--accent-gold-soft) 0%, var(--accent-gold) 100%); color: #0c0d12; } /* ════════════════════════════════════════════════════════════════ 29.9 SPLASH (Tawba-Intro) — editorial dark ════════════════════════════════════════════════════════════════ */ .tawba-intro-v22 { background: radial-gradient(ellipse 70% 50% at 50% 14%, rgba(200,163,96,0.06) 0%, transparent 60%), radial-gradient(ellipse 80% 50% at 50% 100%, rgba(141,184,168,0.04) 0%, transparent 60%), linear-gradient(180deg, #08090e 0%, #0c0d14 50%, #0d0e18 100%); } .tawba-intro-v22 .ti22-tawbah { font-family: var(--font-display); font-weight: 700; letter-spacing: 6px; color: var(--accent-gold-soft); } .tawba-intro-v22 .ti22-ustadh { font-family: var(--font-body); font-weight: 600; letter-spacing: 5px; color: var(--txt-secondary); } /* ════════════════════════════════════════════════════════════════ 29.10 INPUTS überall — editorial ════════════════════════════════════════════════════════════════ */ .pages input[type="text"]:not(.uc-input-wrap input):not(.sa-input-wrap input), .pages input[type="number"], .pages input[type="email"], .pages textarea, .settings-input { background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: var(--r-md); color: var(--txt-primary); font-family: var(--font-body); font-size: 15px; } /* ════════════════════════════════════════════════════════════════ 29.11 MODAL Polish ════════════════════════════════════════════════════════════════ */ .modal-overlay { background: rgba(8,9,14,0.78); backdrop-filter: blur(12px); } .modal-card { background: var(--bg-elevated-2); border: 1px solid var(--border-soft); border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--shadow-float); } .modal-title { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; color: var(--txt-primary); } .settings-label { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--accent-gold); } /* ════════════════════════════════════════════════════════════════ 29.12 SUBTILE MIKRO-VERSPIELTHEIT ════════════════════════════════════════════════════════════════ */ .welcome-banner, .daily-goal-card, .mawaqit-card, .salat-hero, .fatiha-cta, .last-prayer-card, .qibla-card, .stats-card, .khatm-tracker { transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.32s ease-out, border-color 0.32s ease-out; } .welcome-banner:hover, .daily-goal-card:hover, .mawaqit-card:hover { transform: translateY(-2px); border-color: var(--border-strong); } /* Page transitions — sanfter */ .pages > .page.active { animation: pageEditorialIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes pageEditorialIn { 0% { opacity: 0; transform: translateY(16px) scale(0.992); } 100% { opacity: 1; transform: translateY(0) scale(1); } } /* ════════════════════════════════════════════════════════════════ 29.13 Toast editorial ════════════════════════════════════════════════════════════════ */ #toast { background: var(--bg-elevated-2); border: 1px solid var(--border-accent); color: var(--txt-primary); font-family: var(--font-body); font-weight: 600; box-shadow: var(--shadow-float), var(--shadow-glow-gold); } /* ╔══════════════════════════════════════════════════════════════════╗ ║ v29 SANCTUARY EDITION — Apple-Level Emotional Luxury ║ ║ Cinematic Atmosphere, Maarifa-Editorial, Floating Particles ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* ════════════════════════════════════════════════════════════════ 29.A GLOBAL ATMOSPHERE (Body-Layer Floating Particles + Stars + Bloom) ════════════════════════════════════════════════════════════════ */ .sa-atmos { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } /* MOON-BLOOM — radiale soft-Glows oben + unten */ .sa-bloom { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.55; } .sa-bloom-top { width: 700px; height: 700px; top: -350px; left: 50%; margin-left: -350px; background: radial-gradient(circle, rgba(224,184,112,0.13) 0%, rgba(224,184,112,0.04) 40%, transparent 70%); animation: saBloomBreathe 12s ease-in-out infinite; } .sa-bloom-bottom { width: 600px; height: 600px; bottom: -300px; left: 50%; margin-left: -300px; background: radial-gradient(circle, rgba(141,184,168,0.08) 0%, rgba(141,184,168,0.02) 40%, transparent 70%); animation: saBloomBreathe 14s ease-in-out infinite; animation-delay: -4s; } @keyframes saBloomBreathe { 0%, 100% { opacity: 0.45; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.08); } } /* AURORA — schräge driftende Lichtschleier */ .sa-aurora { position: absolute; width: 130%; height: 50%; border-radius: 50%; filter: blur(60px); opacity: 0.30; } .sa-aurora-1 { top: 15%; left: -15%; background: radial-gradient(ellipse at 50% 50%, rgba(184,156,200,0.20) 0%, transparent 65%); animation: saAurora1 28s ease-in-out infinite; } .sa-aurora-2 { bottom: 15%; right: -15%; background: radial-gradient(ellipse at 50% 50%, rgba(141,184,168,0.16) 0%, transparent 65%); animation: saAurora2 32s ease-in-out infinite; } @keyframes saAurora1 { 0%, 100% { transform: translateX(0) translateY(0) rotate(-8deg); } 50% { transform: translateX(60px) translateY(-30px) rotate(-3deg); } } @keyframes saAurora2 { 0%, 100% { transform: translateX(0) translateY(0) rotate(8deg); } 50% { transform: translateX(-50px) translateY(40px) rotate(3deg); } } /* STAR-FIELD — 40 zwinkernde Sterne */ .sa-stars { position: absolute; inset: 0; } .sa-stars span { position: absolute; width: 1.5px; height: 1.5px; border-radius: 50%; background: rgba(244,237,224,0.7); box-shadow: 0 0 3px rgba(244,237,224,0.55), 0 0 6px rgba(244,237,224,0.25); animation: saStarTwinkle 5s ease-in-out infinite; } .sa-stars span:nth-child(3n) { animation-delay: 1.2s; animation-duration: 4.2s; } .sa-stars span:nth-child(5n) { animation-delay: 2.8s; animation-duration: 6s; } .sa-stars span:nth-child(7n) { animation-delay: 0.6s; animation-duration: 4.8s; } .sa-stars span:nth-child(11n) { animation-delay: 3.4s; animation-duration: 5.6s; } .sa-stars span:nth-child(13n) { animation-delay: 1.8s; animation-duration: 4.4s; width: 2px; height: 2px; } @keyframes saStarTwinkle { 0%, 100% { opacity: 0.18; transform: scale(0.7); } 50% { opacity: 0.78; transform: scale(1.35); } } /* DUST-PARTICLES — driftet sanft nach oben */ .sa-dust { position: absolute; inset: 0; } .sa-dust i { position: absolute; bottom: -8px; left: var(--x); width: 2px; height: 2px; border-radius: 50%; background: rgba(224,184,112,0.55); box-shadow: 0 0 4px rgba(224,184,112,0.5); animation: saDustRise var(--dur) linear infinite; animation-delay: var(--d); opacity: 0; } @keyframes saDustRise { 0% { transform: translateY(0) translateX(0); opacity: 0; } 10% { opacity: 0.7; } 50% { transform: translateY(-50vh) translateX(20px); opacity: 0.5; } 90% { opacity: 0.4; } 100% { transform: translateY(-105vh) translateX(-15px); opacity: 0; } } /* App-Header + Pages ÜBER der Atmosphäre */ .app-header, .pages, .bottom-nav { position: relative; z-index: 1; } .pages { background: transparent; } /* ════════════════════════════════════════════════════════════════ 29.B SANCTUARY HERO (Home — emotional entry) ════════════════════════════════════════════════════════════════ */ .sanctuary-hero { text-align: center; padding: 28px 16px 24px; margin-bottom: 8px; animation: saFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes saFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .sanctuary-hero .sh-salam { font-family: var(--font-arabic, 'Amiri', serif); font-size: 14px; color: var(--accent-gold-soft, #e0b870); letter-spacing: 1.5px; margin-bottom: 8px; opacity: 0.82; } .sanctuary-hero .sh-name { font-family: var(--font-display, 'Fraunces', serif); font-size: 38px; font-weight: 700; color: var(--txt-primary, #f4ede0); letter-spacing: -0.035em; line-height: 1.1; text-shadow: 0 0 32px rgba(224,184,112,0.15); } .sanctuary-hero .sh-line { width: 32px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-gold-soft, #e0b870), transparent); margin: 14px auto 12px; opacity: 0.6; } .sanctuary-hero .sh-date { font-family: var(--font-body); font-size: 11.5px; font-weight: 500; color: var(--txt-tertiary); letter-spacing: 2.2px; text-transform: uppercase; } /* MOOD-CARD — Wie fühlst du dich heute? */ .mood-card { background: radial-gradient(ellipse 85% 60% at 50% 0%, rgba(224,184,112,0.06) 0%, transparent 60%), var(--bg-elevated, #131521); border: 1px solid var(--border-soft, rgba(244,237,224,0.10)); border-radius: var(--r-lg, 24px); padding: 22px 18px; margin: 0 0 14px; box-shadow: var(--shadow-elev); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .mood-card-head { text-align: center; margin-bottom: 18px; } .mood-eyebrow { font-family: var(--font-body); font-size: 10.5px; font-weight: 600; letter-spacing: 2.4px; text-transform: uppercase; color: var(--accent-gold); margin-bottom: 6px; opacity: 0.85; } .mood-title { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--txt-primary); letter-spacing: -0.022em; } .mood-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .mood-pill { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px 12px; background: rgba(244,237,224,0.025); border: 1px solid var(--border-hairline); border-radius: var(--r-md, 18px); color: var(--txt-secondary); font-family: var(--font-body); cursor: pointer; transition: all 0.32s cubic-bezier(0.34, 1.56, 0.64, 1); } .mood-pill .mood-icon { width: 36px; height: 36px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(244,237,224,0.035); color: var(--accent-gold-soft); transition: all 0.32s cubic-bezier(0.34, 1.56, 0.64, 1); } .mood-pill .mood-lbl { font-size: 12px; font-weight: 600; color: var(--txt-secondary); letter-spacing: 0.1px; } .mood-pill:hover, .mood-pill.is-active { background: linear-gradient(180deg, rgba(224,184,112,0.10), rgba(224,184,112,0.025)); border-color: var(--border-accent); transform: translateY(-2px); } .mood-pill.is-active .mood-icon { background: linear-gradient(180deg, var(--accent-gold-soft), var(--accent-gold)); color: #0c0d12; box-shadow: 0 6px 18px rgba(224,184,112,0.4); } .mood-pill.is-active .mood-lbl { color: var(--txt-primary); } /* SANCTUARY-GRID — 4 große Entry-Cards */ .sanctuary-grid { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; } .sanctuary-card { display: flex; align-items: center; gap: 16px; padding: 18px 20px; background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: var(--r-lg); cursor: pointer; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: var(--shadow-soft); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); position: relative; overflow: hidden; text-align: left; } .sanctuary-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 100% at 0% 50%, rgba(224,184,112,0.08), transparent 60%); opacity: 0; transition: opacity 0.4s ease-out; pointer-events: none; } .sanctuary-card:hover { transform: translateY(-2px); border-color: var(--border-accent); box-shadow: var(--shadow-elev), var(--shadow-glow-gold); } .sanctuary-card:hover::before { opacity: 1; } .sanctuary-card:active { transform: scale(0.98); } .sc-icon-wrap { width: 56px; height: 56px; border-radius: 18px; background: radial-gradient(circle at 30% 30%, rgba(224,184,112,0.10), rgba(224,184,112,0.02)); border: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; z-index: 1; } .sc-tawba .sc-icon-wrap { background: radial-gradient(circle at 30% 30%, rgba(224,184,112,0.18), rgba(224,184,112,0.04)); border-color: var(--border-accent); box-shadow: 0 0 24px rgba(224,184,112,0.18); } .sc-reflect .sc-icon-wrap { background: radial-gradient(circle at 30% 30%, rgba(141,184,168,0.15), rgba(141,184,168,0.04)); border-color: rgba(141,184,168,0.25); box-shadow: 0 0 24px rgba(141,184,168,0.18); } .sc-dua .sc-icon-wrap { background: radial-gradient(circle at 30% 30%, rgba(224,184,112,0.14), rgba(224,184,112,0.03)); border-color: var(--border-accent); } .sc-guide .sc-icon-wrap { background: radial-gradient(circle at 30% 30%, rgba(184,156,200,0.14), rgba(184,156,200,0.03)); border-color: rgba(184,156,200,0.25); box-shadow: 0 0 24px rgba(184,156,200,0.15); } .sc-icon-wrap svg { width: 32px; height: 32px; } .sc-body { flex: 1; min-width: 0; position: relative; z-index: 1; } .sc-title { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--txt-primary); letter-spacing: -0.02em; margin-bottom: 3px; } .sc-sub { font-family: var(--font-body); font-size: 13px; font-weight: 400; color: var(--txt-secondary); letter-spacing: -0.01em; line-height: 1.45; } .sc-arrow { color: var(--txt-tertiary); display: flex; align-items: center; flex-shrink: 0; transition: transform 0.3s ease-out, color 0.3s ease-out; position: relative; z-index: 1; } .sanctuary-card:hover .sc-arrow { color: var(--accent-gold-soft); transform: translateX(4px); } /* ════════════════════════════════════════════════════════════════ 29.C TAWBA EMPTY-STATE (Floating Moon Centerpiece) ════════════════════════════════════════════════════════════════ */ #page-ustadh .uc-empty-state { display: none; /* nur zeigen wenn keine Messages */ text-align: center; padding: 40px 24px; margin: 20px 0; animation: saFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1); } #page-ustadh .uc-chat-box:has(.uc-msg-row):not(:has(.chat-msg)) .uc-empty-state { display: block; } .ues-moon { width: 120px; height: 120px; margin: 0 auto 24px; position: relative; animation: uesMoonFloat 7s ease-in-out infinite; } .ues-moon-halo { position: absolute; inset: -40px; border-radius: 50%; background: radial-gradient(circle, rgba(224,184,112,0.18) 0%, rgba(224,184,112,0.04) 50%, transparent 75%); filter: blur(16px); animation: uesHaloPulse 5s ease-in-out infinite; } .ues-moon svg { position: relative; z-index: 1; width: 100%; height: 100%; filter: drop-shadow(0 0 30px rgba(224,184,112,0.5)) drop-shadow(0 0 12px rgba(224,184,112,0.5)) drop-shadow(0 8px 24px rgba(0,0,0,0.5)); } @keyframes uesMoonFloat { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-6px) rotate(1.5deg); } } @keyframes uesHaloPulse { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } } .ues-title { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--txt-primary); letter-spacing: -0.025em; margin-bottom: 6px; text-shadow: 0 0 24px rgba(244,237,224,0.18); } .ues-sub { font-family: var(--font-display); font-size: 18px; font-style: italic; font-weight: 500; color: var(--accent-gold-soft); letter-spacing: -0.01em; margin-bottom: 20px; } .ues-hint { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: rgba(244,237,224,0.04); border: 1px solid var(--border-hairline); border-radius: 999px; font-family: var(--font-body); font-size: 11.5px; font-weight: 500; color: var(--txt-tertiary); letter-spacing: 0.2px; } .ues-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-sage); box-shadow: 0 0 8px var(--accent-sage-glow); animation: uesDotPulse 2.4s ease-in-out infinite; } @keyframes uesDotPulse { 0%, 100% { opacity: 0.65; transform: scale(1); } 50% { opacity: 1; transform: scale(1.25); } } /* ════════════════════════════════════════════════════════════════ 29.D INPUT BAR — Floating Glass Pill (Sanctuary-Style) ════════════════════════════════════════════════════════════════ */ #page-ustadh .uc-input-row { padding: 14px 14px calc(18px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, transparent 0%, rgba(8,9,14,0.85) 30%, rgba(8,9,14,0.96) 100%); border-top: 1px solid var(--border-hairline); } #page-ustadh .uc-input-wrap { background: var(--bg-elevated-2, #1a1d2b); border: 1px solid var(--border-soft); border-radius: 999px; padding: 7px 7px 7px 14px; min-height: 60px; backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 28px rgba(0,0,0,0.45), 0 0 32px rgba(224,184,112,0.06); } #page-ustadh .uc-input-wrap:focus-within { border-color: var(--border-accent); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 0 3px var(--accent-gold-glow), 0 8px 32px rgba(224,184,112,0.18); } #page-ustadh .uc-mic { width: 46px; height: 46px; background: rgba(244,237,224,0.04); border: 1px solid var(--border-hairline); color: var(--txt-secondary); } #page-ustadh .uc-mic:hover { background: rgba(141,184,168,0.10); border-color: rgba(141,184,168,0.30); color: var(--accent-sage); } #page-ustadh .uc-input-wrap input { font-family: var(--font-body); font-size: 15.5px; color: var(--txt-primary); letter-spacing: -0.01em; } #page-ustadh .uc-input-wrap input::placeholder { color: var(--txt-tertiary); font-style: italic; opacity: 0.7; transition: opacity 0.4s ease-out; } /* Send-Button: sage statt grell-gold (verspielter, dezenter) */ #page-ustadh .uc-send { width: 46px; height: 46px; background: linear-gradient(180deg, var(--accent-sage-soft), var(--accent-sage)); border: 1px solid rgba(168,212,196,0.4); color: #0c0d12; box-shadow: 0 4px 16px rgba(141,184,168,0.4), inset 0 1px 0 rgba(255,255,255,0.35); } #page-ustadh .uc-send svg { width: 22px; height: 22px; color: #0c0d12; filter: drop-shadow(0 1px 1px rgba(255,255,255,0.3)); } #page-ustadh .uc-send:hover { box-shadow: 0 6px 22px rgba(141,184,168,0.55), inset 0 1px 0 rgba(255,255,255,0.45); } /* ════════════════════════════════════════════════════════════════ 29.E REFLECTION / JOURNAL (Distraction-Free Glass-Paper) ════════════════════════════════════════════════════════════════ */ #page-reflection { padding-bottom: 110px; } .reflection-hero { text-align: center; padding: 24px 16px 18px; margin-bottom: 12px; animation: saFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .rf-eyebrow { font-family: var(--font-body); font-size: 10.5px; font-weight: 600; letter-spacing: 2.4px; text-transform: uppercase; color: var(--accent-sage); margin-bottom: 8px; opacity: 0.85; } .rf-title { font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--txt-primary); letter-spacing: -0.028em; margin-bottom: 8px; line-height: 1.1; } .rf-sub { font-family: var(--font-body); font-size: 13px; font-weight: 400; color: var(--txt-secondary); letter-spacing: -0.01em; line-height: 1.5; max-width: 320px; margin: 0 auto; } .rf-prompts { display: flex; gap: 8px; overflow-x: auto; padding: 4px 16px 16px; scrollbar-width: none; margin: 0 -16px 16px; } .rf-prompts::-webkit-scrollbar { display: none; } .rf-prompt { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: 999px; font-family: var(--font-body); font-size: 12.5px; font-weight: 600; color: var(--txt-secondary); white-space: nowrap; cursor: pointer; flex-shrink: 0; transition: all 0.3s cubic-bezier(0.16,1,0.3,1); } .rf-prompt svg { color: var(--accent-gold-soft); } .rf-prompt:hover { background: var(--bg-elevated-2); border-color: var(--border-accent); color: var(--txt-primary); } .rf-prompt:active { transform: scale(0.96); } /* Glass-Paper Writing Surface */ .rf-paper { position: relative; background: linear-gradient(180deg, rgba(244,237,224,0.025), rgba(244,237,224,0.01)), var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: var(--r-lg); padding: 22px 22px 16px; box-shadow: var(--shadow-elev); margin-bottom: 28px; overflow: hidden; } .rf-paper-glow { position: absolute; top: 0; left: 0; right: 0; height: 80px; background: linear-gradient(180deg, rgba(224,184,112,0.04), transparent); pointer-events: none; } .rf-textarea { width: 100%; background: transparent; border: none; outline: none; resize: none; color: var(--txt-primary); font-family: var(--font-display); font-size: 18px; font-weight: 500; line-height: 1.65; letter-spacing: -0.012em; min-height: 220px; position: relative; z-index: 1; } .rf-textarea::placeholder { color: var(--txt-tertiary); font-style: italic; opacity: 0.7; } .rf-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-hairline); position: relative; z-index: 1; } .rf-meta { font-family: var(--font-body); font-size: 11.5px; font-weight: 500; color: var(--txt-tertiary); letter-spacing: 0.2px; display: flex; align-items: center; gap: 6px; } .rf-meta-sep { opacity: 0.5; } .rf-action { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: rgba(244,237,224,0.04); border: 1px solid var(--border-soft); border-radius: 999px; font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--txt-secondary); letter-spacing: 0.1px; cursor: pointer; transition: all 0.25s cubic-bezier(0.16,1,0.3,1); } .rf-action:hover { background: rgba(224,184,112,0.08); border-color: var(--border-accent); color: var(--accent-gold-soft); } .rf-entries { margin-bottom: 80px; } .rf-entry-card { padding: 16px 18px; background: var(--bg-elevated); border: 1px solid var(--border-hairline); border-radius: var(--r-md); margin-bottom: 10px; cursor: pointer; transition: all 0.3s ease-out; } .rf-entry-card:hover { border-color: var(--border-soft); background: var(--bg-elevated-2); } .rf-entry-date { font-family: var(--font-body); font-size: 10.5px; font-weight: 600; color: var(--accent-gold); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 6px; } .rf-entry-preview { font-family: var(--font-display); font-size: 15px; font-weight: 500; color: var(--txt-primary); line-height: 1.55; letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ════════════════════════════════════════════════════════════════ 29.F ALLES → FRAUNCES Headlines + Editorial Spacing ════════════════════════════════════════════════════════════════ */ #page-ustadh .uc-bg-atmosphere { display: none; } /* atmos kommt jetzt global */ .uc-bg-stars { display: none; } .uc-bg-glow { display: none; } /* Bottom-Nav noch editorial-er */ .bottom-nav .nav-btn span { font-family: var(--font-body); font-size: 9.5px; font-weight: 600; } /* ╔══════════════════════════════════════════════════════════════════╗ ║ v30 SANCTUARY II — Major UI/UX Upgrade ║ ║ Splash + Chat + Input + Empty-State + Micro-Interactions ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* ════════════════════════════════════════════════════════════════ 30.A SPLASH v30 — Spiritual Cinematic Awakening ════════════════════════════════════════════════════════════════ */ .splash-v30 { position: fixed; inset: 0; z-index: 99999; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; background: #08090e; animation: splashFadeOut 0.7s var(--ease-out, cubic-bezier(0.16,1,0.3,1)) 4.4s forwards; } .splash-v30.hide { display: none; } /* v337: Nav + Header während des Start-Splash KOMPLETT verstecken (Nav hat backdrop-filter = eigener Stacking-Context und blitzte sonst unten durch). Klasse wird ~4s nach dem Splash wieder entfernt. */ html.splash-on .bottom-nav, html.splash-on .app-header { display: none !important; } @keyframes splashFadeOut { 0% { opacity: 1; transform: scale(1); filter: blur(0); } 100% { opacity: 0; visibility: hidden; pointer-events: none; transform: scale(1.02); filter: blur(6px); } } /* Background Layers (depth) */ .splash-v30 .sp-bg-layer { position: absolute; inset: 0; pointer-events: none; } .splash-v30 .sp-bg-base { background: radial-gradient(ellipse 90% 60% at 50% 0%, rgba(200,163,96,0.10) 0%, transparent 55%), radial-gradient(ellipse 80% 60% at 50% 100%, rgba(141,184,168,0.04) 0%, transparent 55%), linear-gradient(180deg, #08090e 0%, #0b0c14 50%, #0d0e18 100%); animation: spBgBreathe 9s ease-in-out infinite; } .splash-v30 .sp-bg-aurora { background: radial-gradient(ellipse 60% 40% at 20% 30%, rgba(184,156,200,0.10) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 80% 70%, rgba(141,184,168,0.08) 0%, transparent 60%); animation: spAuroraDrift 16s ease-in-out infinite; filter: blur(50px); } @keyframes spBgBreathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.04); opacity: 0.92; } } @keyframes spAuroraDrift { 0%, 100% { transform: translateX(0) translateY(0); } 50% { transform: translateX(30px) translateY(-20px); } } /* Stars */ .splash-v30 .sp-stars span { position: absolute; width: 1.8px; height: 1.8px; border-radius: 50%; background: rgba(244,237,224,0.85); box-shadow: 0 0 4px rgba(244,237,224,0.7), 0 0 8px rgba(244,237,224,0.35); animation: spStarTwinkle 4.5s ease-in-out infinite; } .splash-v30 .sp-stars span:nth-child(3n) { animation-delay: 1.2s; animation-duration: 3.8s; } .splash-v30 .sp-stars span:nth-child(5n) { animation-delay: 2.4s; animation-duration: 5.5s; width: 2.2px; height: 2.2px; } .splash-v30 .sp-stars span:nth-child(7n) { animation-delay: 0.6s; animation-duration: 4.2s; } .splash-v30 .sp-stars span:nth-child(11n) { animation-delay: 3.2s; animation-duration: 5.0s; } @keyframes spStarTwinkle { 0%, 100% { opacity: 0.25; transform: scale(0.7); } 50% { opacity: 0.95; transform: scale(1.4); } } /* Particles (floating from bottom) */ .splash-v30 .sp-particles { position: absolute; inset: 0; pointer-events: none; } .splash-v30 .sp-particles i { position: absolute; bottom: -8px; left: var(--x); width: 2.2px; height: 2.2px; border-radius: 50%; background: rgba(224,184,112,0.65); box-shadow: 0 0 6px rgba(224,184,112,0.5), 0 0 14px rgba(224,184,112,0.25); animation: spParticleRise var(--dur) linear infinite; animation-delay: var(--d); opacity: 0; } @keyframes spParticleRise { 0% { transform: translateY(0) translateX(0); opacity: 0; } 10% { opacity: 0.85; } 50% { transform: translateY(-50vh) translateX(20px); opacity: 0.6; } 100% { transform: translateY(-110vh) translateX(-12px); opacity: 0; } } /* Center Orb (the moon) */ .splash-v30 .sp-orb-wrap { position: relative; width: 180px; height: 180px; margin-bottom: 38px; animation: spOrbBreathe 4s ease-in-out infinite; } @keyframes spOrbBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } } .splash-v30 .sp-orb { position: relative; z-index: 3; width: 100%; height: 100%; filter: drop-shadow(0 0 36px rgba(244,212,150,0.55)) drop-shadow(0 0 18px rgba(244,212,150,0.45)) drop-shadow(0 12px 32px rgba(0,0,0,0.55)); } .splash-v30 .sp-orb-halo-outer { position: absolute; inset: -80px; border-radius: 50%; background: radial-gradient(circle, rgba(244,212,150,0.18) 0%, rgba(244,212,150,0.05) 45%, transparent 75%); filter: blur(28px); animation: spHaloOuter 5s ease-in-out infinite; z-index: 1; } .splash-v30 .sp-orb-halo-inner { position: absolute; inset: -32px; border-radius: 50%; background: radial-gradient(circle, rgba(255,235,170,0.25) 0%, rgba(255,235,170,0.06) 50%, transparent 80%); filter: blur(14px); animation: spHaloInner 3.5s ease-in-out infinite; z-index: 2; } @keyframes spHaloOuter { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } } @keyframes spHaloInner { 0%, 100% { opacity: 0.85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } } /* Content (Brand + Tagline) */ .splash-v30 .sp-content { position: relative; z-index: 5; text-align: center; margin-bottom: 56px; opacity: 0; animation: spContentIn 1.2s var(--ease-out, cubic-bezier(0.16,1,0.3,1)) 0.4s forwards; } @keyframes spContentIn { 0% { opacity: 0; transform: translateY(12px); filter: blur(4px); } 100% { opacity: 1; transform: translateY(0); filter: blur(0); } } .splash-v30 .sp-brand { font-family: var(--font-display, "Fraunces", Georgia, serif); font-size: 42px; font-weight: 700; letter-spacing: -0.025em; margin-bottom: 14px; line-height: 1; } .splash-v30 .sp-brand-sabr { color: #f4ede0; text-shadow: 0 0 24px rgba(244,237,224,0.20); } .splash-v30 .sp-brand-dot, .splash-v30 .sp-brand-ai { color: #e0b870; text-shadow: 0 0 22px rgba(224,184,112,0.55); } .splash-v30 .sp-tagline { font-family: var(--font-body, "Manrope", sans-serif); font-size: 13px; font-weight: 500; color: rgba(244,237,224,0.62); letter-spacing: 0.5px; } /* Loader: 3 breathing dots */ .splash-v30 .sp-loader { display: flex; gap: 14px; position: absolute; bottom: 80px; z-index: 5; } .splash-v30 .sp-loader span { width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff5cc 0%, #e0b870 55%, #8a6520 100%); box-shadow: 0 0 10px rgba(224,184,112,0.7), 0 0 20px rgba(224,184,112,0.4); animation: spLoaderBreathe 1.6s ease-in-out infinite; } .splash-v30 .sp-loader span:nth-child(2) { animation-delay: 0.2s; } .splash-v30 .sp-loader span:nth-child(3) { animation-delay: 0.4s; } @keyframes spLoaderBreathe { 0%, 100% { opacity: 0.32; transform: scale(0.78); } 50% { opacity: 1; transform: scale(1.30); } } /* Hide old splash-* if they're still in the markup (safety) */ .splash-v30 .splash-bg-orbs, .splash-v30 .splash-content, .splash-v30 .splash-bismillah, .splash-v30 .splash-logo-wrap, .splash-v30 .splash-loader { display: none; } /* ════════════════════════════════════════════════════════════════ 30.B TAWBA CHAT v30 — Emotional Glass Dialogue System ════════════════════════════════════════════════════════════════ */ /* Chat Container: deep layered gradient mit ambient light */ #page-ustadh .ustadh-chat { background: radial-gradient(ellipse 80% 30% at 50% 0%, rgba(200,163,96,0.06) 0%, transparent 65%), radial-gradient(ellipse 60% 50% at 100% 50%, rgba(184,156,200,0.04) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 0% 100%, rgba(141,184,168,0.04) 0%, transparent 60%), linear-gradient(180deg, #0a0c14 0%, #0c0e1a 50%, #0e1020 100%); border: none; position: relative; } /* Ambient depth: subtle moving glow inside the chat */ #page-ustadh .ustadh-chat::before { content: ''; position: absolute; top: -10%; left: 50%; transform: translateX(-50%); width: 80%; height: 60%; background: radial-gradient(ellipse at 50% 0%, rgba(224,184,112,0.06) 0%, transparent 65%); filter: blur(40px); pointer-events: none; animation: ucAmbientBreathe 8s ease-in-out infinite; z-index: 0; } @keyframes ucAmbientBreathe { 0%, 100% { opacity: 0.55; transform: translateX(-50%) scale(1); } 50% { opacity: 0.85; transform: translateX(-50%) scale(1.06); } } /* Chat-Box: relative über dem Ambient-Glow */ #page-ustadh .uc-chat-box { position: relative; z-index: 1; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* BOT MESSAGES — glassmorphism + golden edge glow */ #page-ustadh .chat-msg.bot { background: linear-gradient(180deg, rgba(244,237,224,0.055) 0%, rgba(244,237,224,0.020) 100%); border: 1px solid rgba(244,237,224,0.10); border-radius: 22px 22px 22px 6px; padding: 16px 18px 13px; backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -1px 0 rgba(0,0,0,0.18), 0 12px 30px -12px rgba(0,0,0,0.65), 0 0 22px rgba(200,163,96,0.06); position: relative; animation: ucMsgFloat 0.6s var(--ease-out, cubic-bezier(0.16,1,0.3,1)); } /* subtle golden edge glow on bot msgs */ #page-ustadh .chat-msg.bot::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(180deg, rgba(224,184,112,0.20), transparent 60%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: 0.8; } @keyframes ucMsgFloat { 0% { opacity: 0; transform: translateY(10px); filter: blur(2px); } 100% { opacity: 1; transform: translateY(0); filter: blur(0); } } #page-ustadh .chat-msg.bot .cm-greeting { font-family: var(--font-display, "Fraunces", serif); font-size: 17px; font-weight: 700; font-style: normal; color: #f4d896; letter-spacing: -0.018em; margin-bottom: 8px; text-shadow: 0 0 14px rgba(244,212,150,0.25); } #page-ustadh .chat-msg.bot .cm-body { font-family: var(--font-body, "Manrope", sans-serif); font-size: 15px; line-height: 1.65; /* mehr Atemraum */ color: rgba(248,242,228,0.92); letter-spacing: -0.005em; font-weight: 400; } #page-ustadh .chat-msg.bot .cm-time { font-family: var(--font-body, "Manrope", sans-serif); font-size: 10.5px; color: rgba(244,237,224,0.32); letter-spacing: 0.3px; margin-top: 10px; } /* USER MESSAGES — simpler glass, less glow */ #page-ustadh .chat-msg.user { background: linear-gradient(180deg, rgba(141,184,168,0.10) 0%, rgba(141,184,168,0.035) 100%); border: 1px solid rgba(141,184,168,0.18); border-radius: 22px 22px 6px 22px; padding: 14px 16px; color: rgba(248,242,228,0.95); font-family: var(--font-body); font-size: 15px; line-height: 1.6; letter-spacing: -0.005em; backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 22px -10px rgba(0,0,0,0.5); } /* Typing indicator — breathing 3 dots with pulse glow */ .uc-typing { display: flex; gap: 6px; align-items: center; padding: 14px 18px; align-self: flex-start; background: linear-gradient(180deg, rgba(244,237,224,0.045), rgba(244,237,224,0.018)); border: 1px solid rgba(244,237,224,0.08); border-radius: 22px 22px 22px 6px; backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); width: fit-content; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 22px -10px rgba(0,0,0,0.5); animation: ucMsgFloat 0.4s var(--ease-out, cubic-bezier(0.16,1,0.3,1)); } /* v76: Apple-Bounce-Dots wie Splash-Loader/Tawba-Intro fuer Konsistenz */ .uc-typing span { width: 10px !important; height: 10px !important; border-radius: 50%; background: rgba(245,201,119,0.95) !important; box-shadow: 0 0 12px rgba(245,201,119,0.6), 0 0 4px rgba(245,201,119,0.35) !important; animation: appleDotBounce 1.4s cubic-bezier(0.4, 0, 0.6, 1) infinite both !important; will-change: transform, opacity; } .uc-typing span:nth-child(2) { animation-delay: 0.16s !important; } .uc-typing span:nth-child(3) { animation-delay: 0.32s !important; } /* Streaming-Cursor (während AI streamt) */ .chat-msg.bot.is-streaming::after { content: ''; display: inline-block; width: 8px; height: 16px; background: linear-gradient(180deg, #f4d896, #e0b870); border-radius: 2px; margin-left: 4px; vertical-align: text-bottom; animation: ucCursorBlink 0.85s ease-in-out infinite; box-shadow: 0 0 8px rgba(224,184,112,0.5); } @keyframes ucCursorBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* ════════════════════════════════════════════════════════════════ 30.C EMPTY-STATE v30 — Floating Moon + atmospheric particles ════════════════════════════════════════════════════════════════ */ #page-ustadh .uc-empty-state { text-align: center; padding: 56px 24px 40px; position: relative; animation: ucEmptyIn 0.9s var(--ease-out, cubic-bezier(0.16,1,0.3,1)); } @keyframes ucEmptyIn { 0% { opacity: 0; transform: translateY(20px) scale(0.96); filter: blur(6px); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } .ues-moon { width: 140px; height: 140px; margin: 0 auto 28px; position: relative; animation: uesMoonFloat 7s ease-in-out infinite; } .ues-moon-halo { position: absolute; inset: -54px; border-radius: 50%; background: radial-gradient(circle, rgba(224,184,112,0.22) 0%, rgba(224,184,112,0.05) 55%, transparent 80%); filter: blur(22px); animation: uesHaloPulse 5.5s ease-in-out infinite; } .ues-moon svg { position: relative; z-index: 1; width: 100%; height: 100%; filter: drop-shadow(0 0 32px rgba(224,184,112,0.55)) drop-shadow(0 0 14px rgba(244,212,150,0.50)) drop-shadow(0 12px 28px rgba(0,0,0,0.55)); } @keyframes uesMoonFloat { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } } @keyframes uesHaloPulse { 0%, 100% { opacity: 0.65; transform: scale(1); } 50% { opacity: 1; transform: scale(1.10); } } .ues-title { font-family: var(--font-display, "Fraunces", serif); font-size: 28px; font-weight: 700; color: #f4ede0; letter-spacing: -0.028em; margin-bottom: 6px; text-shadow: 0 0 28px rgba(244,237,224,0.20); } .ues-sub { font-family: var(--font-display, "Fraunces", serif); font-size: 19px; font-style: italic; font-weight: 500; color: #f4d896; letter-spacing: -0.01em; margin-bottom: 24px; text-shadow: 0 0 18px rgba(244,212,150,0.22); } .ues-hint { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; background: rgba(244,237,224,0.04); border: 1px solid rgba(244,237,224,0.08); border-radius: 999px; font-family: var(--font-body, "Manrope", sans-serif); font-size: 11.5px; font-weight: 500; color: rgba(244,237,224,0.55); letter-spacing: 0.3px; backdrop-filter: blur(8px); } .ues-dot { width: 6px; height: 6px; border-radius: 50%; background: #8db8a8; box-shadow: 0 0 8px rgba(141,184,168,0.65); animation: uesDotPulse 2.4s ease-in-out infinite; } @keyframes uesDotPulse { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.28); } } /* ════════════════════════════════════════════════════════════════ 30.D INPUT BAR v30 — Floating Glass Pill (Premium) ════════════════════════════════════════════════════════════════ */ #page-ustadh .uc-input-row { padding: 12px 14px calc(16px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, transparent 0%, rgba(8,9,14,0.75) 20%, rgba(8,9,14,0.96) 100%); border-top: 1px solid rgba(244,237,224,0.06); position: relative; z-index: 5; } #page-ustadh .uc-input-wrap { display: flex; align-items: center; gap: 8px; background: linear-gradient(180deg, rgba(244,237,224,0.06) 0%, rgba(244,237,224,0.02) 100%); border: 1px solid rgba(244,237,224,0.12); border-radius: 999px; padding: 7px 8px 7px 16px; min-height: 60px; backdrop-filter: blur(28px) saturate(200%); -webkit-backdrop-filter: blur(28px) saturate(200%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.18), 0 10px 32px rgba(0,0,0,0.55), 0 0 32px rgba(224,184,112,0.04); transition: border-color 0.36s var(--ease-out, cubic-bezier(0.16,1,0.3,1)), box-shadow 0.36s var(--ease-out, cubic-bezier(0.16,1,0.3,1)); } #page-ustadh .uc-input-wrap:focus-within { border-color: rgba(224,184,112,0.36); box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -1px 0 rgba(0,0,0,0.18), 0 0 0 4px rgba(224,184,112,0.10), 0 12px 38px rgba(224,184,112,0.16); } /* Mic Button — pulse glow */ #page-ustadh .uc-mic { position: relative; width: 46px; height: 46px; border-radius: 50%; background: rgba(244,237,224,0.05); border: 1px solid rgba(244,237,224,0.10); color: rgba(244,237,224,0.65); display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; transition: all 0.28s var(--ease-out, cubic-bezier(0.16,1,0.3,1)); } #page-ustadh .uc-mic::before { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 1.5px solid rgba(141,184,168,0.35); opacity: 0; pointer-events: none; animation: ucMicIdlePulse 3s ease-in-out infinite; } @keyframes ucMicIdlePulse { 0%, 100% { transform: scale(1); opacity: 0; } 50% { transform: scale(1.18); opacity: 0.4; } } #page-ustadh .uc-mic:hover { background: rgba(141,184,168,0.10); border-color: rgba(141,184,168,0.32); color: #a8d4c4; } #page-ustadh .uc-mic.recording { background: rgba(224,85,85,0.14); border-color: rgba(224,85,85,0.42); color: #ff7777; } #page-ustadh .uc-mic.recording::before { border-color: rgba(224,85,85,0.55); animation: ucMicRecordPulse 1.2s ease-in-out infinite; } @keyframes ucMicRecordPulse { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.5); opacity: 0; } } #page-ustadh .uc-mic-pulse { display: none; } /* Input field */ #page-ustadh .uc-input-wrap input { flex: 1; background: transparent; border: none; outline: none; color: #f4ede0; font-family: var(--font-body, "Manrope", sans-serif); font-size: 15.5px; font-weight: 400; letter-spacing: -0.005em; padding: 12px 4px; min-width: 0; } #page-ustadh .uc-input-wrap input::placeholder { color: rgba(244,237,224,0.32); font-style: italic; letter-spacing: 0; opacity: 0.85; transition: opacity 0.5s ease-out; } /* Send Button — subtle gold accent */ #page-ustadh .uc-send { width: 46px; height: 46px; min-width: 46px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, rgba(255,235,170,0.95) 0%, transparent 55%), linear-gradient(180deg, #f4d896 0%, #c8a360 100%); border: 1px solid rgba(255,235,170,0.50); color: #1a1006; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; transition: transform 0.18s var(--ease-spring, cubic-bezier(0.34,1.56,0.64,1)), box-shadow 0.32s var(--ease-out, cubic-bezier(0.16,1,0.3,1)); box-shadow: 0 4px 16px rgba(224,184,112,0.50), 0 0 22px rgba(224,184,112,0.30), inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -2px 4px rgba(0,0,0,0.18); } #page-ustadh .uc-send svg { width: 21px; height: 21px; filter: drop-shadow(0 1px 1px rgba(255,255,255,0.42)); transform: translateX(1px); } #page-ustadh .uc-send:hover { box-shadow: 0 6px 22px rgba(224,184,112,0.65), 0 0 30px rgba(224,184,112,0.42), inset 0 1px 0 rgba(255,255,255,0.65), inset 0 -2px 4px rgba(0,0,0,0.18); } #page-ustadh .uc-send:active { transform: scale(0.92); } /* ════════════════════════════════════════════════════════════════ 30.E KEYBOARD-AWARE INPUT (iOS) ════════════════════════════════════════════════════════════════ */ @supports (height: 100dvh) { /* v260 FIX: bei offener Tastatur den Chat ÜBER der Tastatur enden lassen, sonst lag die Eingabe dahinter (man sah nicht, was man tippt). Bottom an die Tastaturhöhe ankern + height:auto → füllt Header→Tastatur. */ body:has(#ucInput:focus) #page-ustadh.page.active { bottom: var(--kb-height, 0px) !important; height: auto !important; } } /* prevent body bounce when input focused */ #page-ustadh.page.active { overscroll-behavior: contain; } /* v260: Tawba regelt die Tastatur über fixe Position (oben) → kein zusätzliches Page-Padding */ html.kb-open #page-ustadh.page.active { padding-bottom: 0 !important; } /* ════════════════════════════════════════════════════════════════ 30.F MICRO-INTERACTIONS (überall) ════════════════════════════════════════════════════════════════ */ .pages button, .pages [role="button"], .pages .sanctuary-card, .pages .mood-pill, .pages .nav-btn, .pages .cat-card, .pages .prayer-card, .pages .surah-list-item, .pages .rf-prompt, .pages .rf-action, .pages .fatiha-cta, .pages .last-prayer-card, .pages .qibla-card, .pages .stats-card, .pages .da-card, .pages .dua-cat-card { transition: transform 0.16s var(--ease-out, cubic-bezier(0.16,1,0.3,1)), filter 0.20s ease-out, background-color 0.22s ease-out, border-color 0.22s ease-out; will-change: transform; } .pages button:active, .pages [role="button"]:active, .pages .sanctuary-card:active, .pages .mood-pill:active, .pages .cat-card:active, .pages .prayer-card:active, .pages .surah-list-item:active, .pages .rf-prompt:active, .pages .fatiha-cta:active, .pages .last-prayer-card:active, .pages .qibla-card:active, .pages .da-card:active, .pages .dua-cat-card:active { transform: scale(0.98); filter: brightness(1.04); } /* ════════════════════════════════════════════════════════════════ 30.G SCROLL POLISH — iOS-native momentum ════════════════════════════════════════════════════════════════ */ html, body, .pages, .page, .uc-chat-box, .surah-list, .dua-list { -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; } .pages, .page { scroll-behavior: smooth; } /* ════════════════════════════════════════════════════════════════ 30.H SUBTLE UI BREATHING (background of app) ════════════════════════════════════════════════════════════════ */ .sa-atmos { animation: saAtmosBreathe 22s ease-in-out infinite; } @keyframes saAtmosBreathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.94; } } /* ╔══════════════════════════════════════════════════════════════════╗ ║ v31 — ★ SABR DIRECTION (Synthesis) ║ ║ Dark Mode · Gold-primär · Plus Jakarta · keine Emojis ║ ║ Synced mit SABR-DESIGN-SPEC.md ║ ╚══════════════════════════════════════════════════════════════════╝ */ :root { /* ── Backgrounds ── */ --bg: #0c0d12; /* v389: EIN einheitliches warmes Schwarz app-weit */ --bg-soft: #12131c; --surface: #181a26; --surface-elev: #221f30; --surface-warm: #1f1a26; /* ── Borders ── */ --border: rgba(245,201,119,0.10); --border-strong: rgba(245,201,119,0.20); /* ── Accents ── */ --gold: #f5c977; /* PRIMARY */ --gold-deep: #d4a247; --gold-glow: rgba(245,201,119,0.22); --emerald: #4ade80; /* nur "done"-States */ --emerald-glow: rgba(74,222,128,0.18); --lavender: #a78bfa; /* mood / spiritual */ --rose: #fb7185; /* streak / fire */ /* ── Text ── */ --text: #f4ede0; --text-muted: rgba(244,237,224,0.60); --text-dim: rgba(244,237,224,0.35); /* ── Typography ── */ --font-ui: "Plus Jakarta Sans", -apple-system, system-ui, sans-serif; --font-arabic: "Amiri", "Scheherazade New", serif; /* Legacy-Aliase auf neue Tokens umbiegen */ --bg-canvas: var(--bg); --bg-elevated: var(--surface); --bg-elevated-2: var(--surface-elev); --txt-primary: var(--text); --txt-secondary: var(--text-muted); --txt-tertiary: var(--text-dim); --accent-gold: var(--gold); --accent-gold-soft:var(--gold); --accent-gold-glow:var(--gold-glow); --border-soft: var(--border); --border-strong: var(--border-strong); --border-accent: var(--border-strong); --font-body: var(--font-ui); --font-app: var(--font-ui); } /* ──────────────────────────────────────────────────────────────── v31.1 BASE — warmes Dark-Ink + Plus Jakarta global ──────────────────────────────────────────────────────────────── */ html, body { background: var(--bg); color: var(--text); font-family: var(--font-ui); letter-spacing: -0.005em; } body { background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(245,201,119,0.045) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 50% 100%, rgba(167,139,250,0.030) 0%, transparent 60%), var(--bg); } /* Body & UI komplett auf Plus Jakarta */ body, button, input, textarea, select, .pages, .page, .app-header, .bottom-nav, .logo-brand, .section-title, .welcome-banner, .daily-goal-card, .mawaqit-card, .uc-hero-title, .uc-hero-sub, .uc-name, .uc-status, .cm-greeting, .cm-body, .cm-time, .salat-hero-title, .salat-translation, .stats-title, .stats-sub, .stats-pct, .fc-title, .fc-sub, .lpc-title, .lpc-text, .pc-name, .pc-rakah, .qc-title, .qc-dir, .surah-list-item, .surah-name, .surah-meta, .cat-card, .cat-label, .fh-name, .fh-members, .fh-xp, .tc-title, .tc-prize { font-family: var(--font-ui); } /* Arabisch behält Amiri */ .arabic, .ayah, [lang="ar"], .splash-bismillah, .logo-bismillah, .salat-arabic, .ucbt-ar, .surah-arabic { font-family: var(--font-arabic); letter-spacing: 0; } /* ──────────────────────────────────────────────────────────────── v31.2 TYPE SCALE — mobile (Spec-konform) ──────────────────────────────────────────────────────────────── */ .t-display-xl { font-size: 48px; font-weight: 800; line-height: 1.0; letter-spacing: -1.6px; } .t-display-l { font-size: 38px; font-weight: 800; line-height: 1.0; letter-spacing: -1.0px; } .t-display-m { font-size: 28px; font-weight: 800; line-height: 1.05; letter-spacing: -0.7px; } .t-headline { font-size: 22px; font-weight: 800; line-height: 1.2; letter-spacing: -0.5px; } .t-title { font-size: 18px; font-weight: 800; line-height: 1.2; letter-spacing: -0.3px; } .t-body-l { font-size: 15px; font-weight: 500; line-height: 1.5; } .t-body { font-size: 14px; font-weight: 500; line-height: 1.5; } .t-caption { font-size: 12px; font-weight: 600; line-height: 1.4; color: var(--text-muted); } .t-micro { font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); } /* Hijri-Date Mikro-Caps Default */ .hijri-date, .micro-caps { font-size: 11px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-muted); } /* Arabische Ayah — größer + atmender */ .arabic, .ayah, [lang="ar"] { line-height: 2.0; direction: rtl; } /* ──────────────────────────────────────────────────────────────── v31.3 SURFACES — Cards mit dezenter Gold-Tint ──────────────────────────────────────────────────────────────── */ .welcome-banner, .daily-goal-card, .mawaqit-card, .last-prayer-card, .qibla-card, .stats-card, .salat-hero, .cat-card, .surah-list-item, .fc-title-card, .da-card, .dua-cat-card, .sanctuary-card, .rf-prompt, .mood-card { background: linear-gradient(135deg, var(--gold-glow), transparent 55%), var(--surface); border: 1px solid var(--border-strong); border-radius: 22px; position: relative; overflow: hidden; } /* Eckiger Gold-Glow oben-rechts (subtile Deko) */ .welcome-banner::after, .daily-goal-card::after, .salat-hero::after, .sanctuary-card::after { content: ""; position: absolute; top: -30px; right: -30px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, var(--gold-glow), transparent 60%); pointer-events: none; z-index: 0; } .welcome-banner > *, .daily-goal-card > *, .salat-hero > *, .sanctuary-card > * { position: relative; z-index: 1; } /* ──────────────────────────────────────────────────────────────── v31.4 PRIMARY CTA — Gold-Gradient Button ──────────────────────────────────────────────────────────────── */ .fatiha-cta, .btn-primary, .cta-primary, .uc-onb-cta, .salat-hero .salat-action, .mawaqit-card .mc-cta { height: 56px; border-radius: 18px; border: none; background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #1a1408; font-family: var(--font-ui); font-weight: 800; font-size: 16px; letter-spacing: -0.2px; box-shadow: 0 8px 24px rgba(245,201,119,0.35), inset 0 1px 0 rgba(255,255,255,0.2); transition: transform 0.16s cubic-bezier(0.16,1,0.3,1), filter 0.16s ease; } .fatiha-cta:active, .btn-primary:active, .cta-primary:active, .uc-onb-cta:active { transform: scale(0.97); filter: brightness(1.06); } /* ──────────────────────────────────────────────────────────────── v31.5 STAT PILLS (Streak / Level / Counts) ──────────────────────────────────────────────────────────────── */ .stat-pill { flex: 1; border-radius: 18px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg, rgba(251,113,133,0.15), transparent); border: 1px solid rgba(251,113,133,0.33); } .stat-pill .stat-num { font-size: 20px; font-weight: 800; color: var(--rose); font-variant-numeric: tabular-nums; } .stat-pill .stat-label { font-size: 11px; color: var(--text-muted); } .stat-pill.gold { background: linear-gradient(135deg, var(--gold-glow), transparent); border-color: var(--border-strong); } .stat-pill.gold .stat-num { color: var(--gold); } .stat-pill.emerald { background: linear-gradient(135deg, var(--emerald-glow), transparent); border-color: rgba(74,222,128,0.30); } .stat-pill.emerald .stat-num { color: var(--emerald); } .stat-pill.lavender { background: linear-gradient(135deg, rgba(167,139,250,0.15), transparent); border-color: rgba(167,139,250,0.30); } .stat-pill.lavender .stat-num { color: var(--lavender); } /* ──────────────────────────────────────────────────────────────── v31.6 MOOD / STATUS CHIPS ──────────────────────────────────────────────────────────────── */ .mood-pill, .utc-chip, .uc-sugg, .mood-chip { padding: 9px 14px; border-radius: 18px; background: rgba(245,201,119,0.10); border: 1.5px solid rgba(245,201,119,0.40); color: var(--gold); font-family: var(--font-ui); font-weight: 700; font-size: 13px; letter-spacing: -0.1px; } .mood-chip.lavender { background: rgba(167,139,250,0.10); border-color: rgba(167,139,250,0.40); color: var(--lavender); } .mood-chip.emerald { background: rgba(74,222,128,0.10); border-color: rgba(74,222,128,0.40); color: var(--emerald); } .mood-chip.rose { background: rgba(251,113,133,0.10); border-color: rgba(251,113,133,0.40); color: var(--rose); } /* ──────────────────────────────────────────────────────────────── v31.7 ICON BUTTONS — 38×38, radius 12 ──────────────────────────────────────────────────────────────── */ .icon-btn, .uc-back, .uc-clear, .uc-mic, .nav-back-btn { width: 38px; height: 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--border); color: var(--text); } .icon-btn:active { transform: scale(0.92); filter: brightness(1.08); } /* ──────────────────────────────────────────────────────────────── v31.8 BOTTOM TAB BAR — floating pill, blur backdrop ──────────────────────────────────────────────────────────────── */ .bottom-nav { position: fixed; left: 14px; right: 14px; bottom: 18px; border-radius: 26px; background: rgba(24,22,36,0.72); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border: 1px solid var(--border); box-shadow: 0 12px 36px rgba(0,0,0,0.55); padding: 8px; } .bottom-nav .nav-btn { color: var(--text-dim); border-radius: 18px; font-family: var(--font-ui); font-weight: 700; transition: all 0.18s ease; } .bottom-nav .nav-btn.active { background: var(--gold-glow); border: 1px solid var(--border-strong); color: var(--gold); font-weight: 800; } .bottom-nav .nav-btn:not(.active) .nav-label { display: none; /* inactive = icon only */ } /* ──────────────────────────────────────────────────────────────── v31.9 EMOJI-PURGE — Spec sagt: KEINE EMOJIS (in :before/:after / Inhalten blockieren — fallback Custom-Icons) ──────────────────────────────────────────────────────────────── */ .emoji, .emoji-only { display: none !important; } /* ──────────────────────────────────────────────────────────────── v31.10 CHAT — Bubbles im neuen Gold/Surface-System ──────────────────────────────────────────────────────────────── */ #page-ustadh .chat-msg.bot { background: linear-gradient(180deg, rgba(245,201,119,0.06), rgba(245,201,119,0.02)), var(--surface); border: 1px solid var(--border-strong); color: var(--text); } #page-ustadh .chat-msg.user { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #1a1408; font-weight: 600; } #page-ustadh .uc-input-wrap { background: rgba(24,22,36,0.78); border: 1px solid var(--border-strong); backdrop-filter: blur(28px) saturate(200%); } /* ──────────────────────────────────────────────────────────────── v31.11 LINKS / ACTIVE COLOR — alles Gold-primär ──────────────────────────────────────────────────────────────── */ a, .link, .text-accent { color: var(--gold); } ::selection { background: var(--gold-glow); color: var(--text); } /* ╔══════════════════════════════════════════════════════════════════╗ ║ v32 ★ SABR DIRECTION — HOME LAYOUT (Synthesis Final) ║ ║ Matches the 10 Synthesis HTML reference screens ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* Legacy-Elemente auf Home, die nicht mehr ins neue Layout passen */ #page-home .sanctuary-hero, #page-home .sanctuary-grid, #page-home .daily-goal-card, #page-home .mawaqit-card, #page-home .tasbih-cta, #page-home .coach-card { display: none !important; } /* Container */ #page-home { padding: 12px 16px 120px; } .sabr-home { display: flex; flex-direction: column; gap: 18px; margin-bottom: 16px; } /* ── Header ── */ .shh-row { display: flex; align-items: center; gap: 14px; } .shh-avatar { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #1a1408; font-weight: 800; font-size: 19px; box-shadow: 0 4px 14px rgba(245,201,119,0.30); flex-shrink: 0; } .shh-grow { flex: 1; min-width: 0; } .shh-salam { font-size: 12px; color: var(--text-muted); font-weight: 500; line-height: 1.3; } .shh-name { font-size: 22px; font-weight: 800; line-height: 1.1; letter-spacing: -0.5px; color: var(--text); } .shh-bell { width: 42px; height: 42px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); color: var(--text); display: flex; align-items: center; justify-content: center; position: relative; flex-shrink: 0; } .shh-bell-dot { position: absolute; top: 9px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--rose); box-shadow: 0 0 8px var(--rose); } /* ── Stat-Pills ── */ .shp-row { display: flex; gap: 12px; } .shp-pill { flex: 1; padding: 14px 16px; border-radius: 18px; display: flex; align-items: center; gap: 12px; border: 1px solid; } .shp-pill svg { flex-shrink: 0; } .shp-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .shp-num { font-size: 20px; font-weight: 800; line-height: 1.0; letter-spacing: -0.4px; font-variant-numeric: tabular-nums; } .shp-lbl { font-size: 11px; color: var(--text-muted); font-weight: 500; } .shp-streak { background: linear-gradient(135deg, rgba(251,113,133,0.15), transparent); border-color: rgba(251,113,133,0.33); color: var(--rose); } .shp-streak .shp-num { color: var(--rose); } .shp-streak .shp-lbl { color: var(--text-muted); } /* v346 (H16) ★ Streak-Flamme: grau wenn 0, rot-orange + Glow wenn aktiv. Beim Entflammen (0→aktiv) eine coole, erwachsene Ignite-Animation — grau→Farbe, leicht drehend + aufflackernd. */ .shp-streak svg { color: #6b727f; /* aus = grau */ transition: color .45s ease, filter .45s ease; transform-origin: 50% 70%; } .shp-streak.is-lit svg { color: #ff7a1a; /* an = rot-orange */ filter: drop-shadow(0 0 5px rgba(255,122,26,0.6)) drop-shadow(0 0 12px rgba(255,80,0,0.3)); } .shp-streak.is-lit svg path:first-child { fill: rgba(255,122,26,0.16); } /* dezente Glut innen */ .shp-streak.igniting svg { animation: flameIgnite .9s cubic-bezier(0.22,1,0.36,1); } @keyframes flameIgnite { 0% { transform: rotate(-12deg) scale(0.82); filter: grayscale(1) brightness(1.1); } 35% { transform: rotate(9deg) scale(1.2); filter: grayscale(0) brightness(1.5) drop-shadow(0 0 10px rgba(255,122,26,0.85)); } 65% { transform: rotate(-5deg) scale(1.06); } 100% { transform: rotate(0deg) scale(1); filter: grayscale(0); } } .shp-level { background: linear-gradient(135deg, var(--gold-glow), transparent); border-color: var(--border-strong); color: var(--gold); } .shp-level .shp-num { color: var(--gold); } .shp-level .shp-lbl { color: var(--text-muted); } /* ── Next Prayer Card ── */ .snp-card { position: relative; width: 100%; text-align: left; background: linear-gradient(135deg, var(--gold-glow), transparent 55%), var(--surface); border: 1px solid var(--border-strong); border-radius: 22px; padding: 18px 18px 16px; color: var(--text); overflow: hidden; display: flex; flex-direction: column; gap: 8px; } .snp-card::after { content: ""; position: absolute; top: -30px; right: -30px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, var(--gold-glow), transparent 60%); pointer-events: none; } .snp-card > * { position: relative; z-index: 1; } .snp-eyebrow { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.6px; color: var(--gold); display: flex; align-items: center; gap: 7px; } .snp-eb-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); } .snp-eb-sep { opacity: 0.5; } .snp-headline { display: flex; align-items: baseline; gap: 12px; margin-top: 4px; } .snp-name { font-size: 38px; font-weight: 800; letter-spacing: -1.0px; line-height: 1.0; color: var(--text); } .snp-ar { font-family: var(--font-arabic); font-size: 26px; color: var(--gold); line-height: 1.0; } .snp-time { font-size: 26px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -0.5px; margin-top: 2px; } /* 5-Dot Timeline */ .snp-timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 10px; position: relative; } .snp-timeline::before { content: ""; position: absolute; top: 5px; left: 6%; right: 6%; height: 2px; background: var(--border); border-radius: 1px; } .snp-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; } .snp-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-elev); border: 1.5px solid var(--border); position: relative; z-index: 1; } .snp-cell.done .snp-dot { background: var(--emerald); border-color: var(--emerald); box-shadow: 0 0 8px var(--emerald-glow); } .snp-cell.now .snp-dot { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 12px var(--gold-glow); } .snp-pname { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: capitalize; } .snp-ptime { font-size: 10px; color: var(--text-dim); font-variant-numeric: tabular-nums; } .snp-cell.now .snp-pname, .snp-cell.now .snp-ptime { color: var(--gold); } .snp-cell.done .snp-pname, .snp-cell.done .snp-ptime { color: var(--text-muted); } /* ── Mood Eyebrow ── */ .smh-row { display: flex; align-items: baseline; justify-content: space-between; margin-top: 2px; } .smh-title { font-size: 17px; font-weight: 800; color: var(--text); letter-spacing: -0.3px; } .smh-hint { font-size: 12px; color: var(--text-dim); } /* ── Mood-Card v32 Restyle (Chips: Icon oben, Label unten) ── */ .mood-card-v32 { background: transparent; border: none; padding: 0; margin: 0 0 16px; } .mood-card-v32 .mood-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .mood-card-v32 .mood-pill { flex-direction: column; gap: 6px; padding: 14px 8px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-family: var(--font-ui); font-weight: 600; font-size: 12px; letter-spacing: -0.1px; min-height: 78px; justify-content: center; align-items: center; } .mood-card-v32 .mood-pill .mood-icon { color: var(--text-muted); } .mood-card-v32 .mood-pill[data-mood="ruhig"] { color: var(--text); } .mood-card-v32 .mood-pill[data-mood="ruhig"] .mood-icon { color: var(--emerald); } .mood-card-v32 .mood-pill[data-mood="schwer"] .mood-icon { color: var(--lavender); } .mood-card-v32 .mood-pill[data-mood="unruhig"] .mood-icon { color: var(--text-muted); } .mood-card-v32 .mood-pill[data-mood="dankbar"] .mood-icon { color: var(--gold); } .mood-card-v32 .mood-pill.active, .mood-card-v32 .mood-pill.selected { background: linear-gradient(135deg, rgba(167,139,250,0.18), transparent); border-color: rgba(167,139,250,0.50); } /* ── Schnellzugriff ── */ .shr-head { display: flex; align-items: baseline; justify-content: space-between; margin: 4px 0 10px; } .shr-h-title { font-size: 17px; font-weight: 800; color: var(--text); letter-spacing: -0.3px; } .shr-h-edit { background: transparent; border: none; color: var(--gold); font-weight: 700; font-size: 13px; font-family: var(--font-ui); } .shr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .shr-card { position: relative; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 16px 16px 18px; color: var(--text); font-family: var(--font-ui); overflow: hidden; display: flex; flex-direction: column; gap: 4px; min-height: 116px; } .shr-card .shr-deco { position: absolute; top: -22px; right: -22px; width: 90px; height: 90px; border-radius: 50%; pointer-events: none; } .shr-tone-gold .shr-deco { background: radial-gradient(circle, var(--gold-glow), transparent 70%); } .shr-tone-emerald .shr-deco { background: radial-gradient(circle, var(--emerald-glow), transparent 70%); } .shr-tone-lavender .shr-deco { background: radial-gradient(circle, rgba(167,139,250,0.20), transparent 70%); } .shr-tone-gold { border-color: var(--border-strong); } .shr-card .shr-ic { width: 36px; height: 36px; border-radius: 11px; background: var(--surface-elev); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 8px; position: relative; z-index: 1; } .shr-tone-gold .shr-ic { color: var(--gold); } .shr-tone-emerald .shr-ic { color: var(--emerald); } .shr-tone-lavender .shr-ic { color: var(--lavender); } .shr-name { font-size: 15px; font-weight: 800; color: var(--text); letter-spacing: -0.2px; position: relative; z-index: 1; } .shr-sub { font-size: 11.5px; color: var(--text-muted); font-weight: 500; position: relative; z-index: 1; } /* ── Status Bar Spacer (für iPhone Notch-Optik) ── */ #page-home::before { content: ""; display: block; height: 8px; } /* Active feedback */ .shp-pill:active, .snp-card:active, .shr-card:active, .shh-bell:active, .shr-h-edit:active { transform: scale(0.98); filter: brightness(1.05); transition: transform 0.12s ease, filter 0.12s ease; } /* ╔══════════════════════════════════════════════════════════════════╗ ║ v33 ★ SABR DIRECTION — ALL PAGES synced to Synthesis screens ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* ────────────────────────────────────────────────────────────────── v33.0 GLOBAL — app-header dezenter, no-emoji im UI Chrome ────────────────────────────────────────────────────────────────── */ .app-header { background: rgba(13,12,20,0.78); backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%); border-bottom: 1px solid var(--border); } .app-header .logo-bismillah { font-size: 13px; opacity: 0.78; } .app-header .logo-brand { font-size: 17px; letter-spacing: -0.3px; } .app-header .header-xp { background: linear-gradient(135deg, var(--gold-glow), transparent); border: 1px solid var(--border-strong); color: var(--gold); font-weight: 800; } /* ────────────────────────────────────────────────────────────────── v33.1 USTADH TAWBA CHAT — Bot dark slate / User gold gradient ────────────────────────────────────────────────────────────────── */ #page-ustadh { background: var(--bg); } #page-ustadh .uc-header { background: rgba(13,12,20,0.82); backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid var(--border); } #page-ustadh .uc-back, #page-ustadh .uc-clear { width: 38px; height: 38px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); color: var(--text); } #page-ustadh .uc-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--gold-deep)); box-shadow: 0 4px 14px rgba(245,201,119,0.35); } #page-ustadh .uc-name { font-family: var(--font-ui); font-weight: 800; color: var(--text); font-size: 16px; letter-spacing: -0.3px; } #page-ustadh .uc-status { font-size: 11px; color: var(--text-muted); font-weight: 500; display: flex; align-items: center; gap: 6px; } #page-ustadh .uc-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 8px var(--emerald); } /* Chat-Box-Hintergrund: clean dark */ #page-ustadh .uc-chat-box { background: var(--bg); } #page-ustadh .uc-date-chip { background: transparent; color: var(--text-dim); font-size: 11px; letter-spacing: 0.6px; text-transform: none; font-weight: 500; } /* Bot bubble */ #page-ustadh .chat-msg.bot { background: var(--surface); border: 1px solid var(--border); border-radius: 6px 18px 18px 18px; color: var(--text); box-shadow: none; padding: 14px 16px; line-height: 1.5; } #page-ustadh .chat-msg.bot::before { display: none; } #page-ustadh .cm-greeting { font-weight: 700; color: var(--text); font-size: 15px; margin-bottom: 4px; } #page-ustadh .cm-body { font-size: 14.5px; color: var(--text); } #page-ustadh .cm-time { font-size: 11px; color: var(--text-dim); margin-top: 6px; } /* Mini bot avatar dot beside bubble */ #page-ustadh .uc-msg-avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--gold); flex-shrink: 0; box-shadow: 0 0 12px var(--gold-glow); } #page-ustadh .uc-msg-avatar svg { display: none; } /* User bubble — full gold gradient */ #page-ustadh .chat-msg.user { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #1a1408; border: none; border-radius: 18px 18px 6px 18px; font-weight: 600; box-shadow: 0 8px 22px rgba(245,201,119,0.22); padding: 13px 16px; line-height: 1.45; } /* Inline Quran card */ #page-ustadh .chat-msg.bot .quran-card, #page-ustadh .ucbt-quran, #page-ustadh .uc-quran-inline { margin-top: 10px; background: rgba(13,12,20,0.65); border: 1px solid var(--border-strong); border-radius: 16px; padding: 14px 16px; } #page-ustadh .ucbt-quran-head, #page-ustadh .ucbt-ref { font-size: 10.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; } #page-ustadh .ucbt-ar { font-family: var(--font-arabic); font-size: 22px; color: var(--text); text-align: right; direction: rtl; line-height: 1.9; margin: 4px 0 8px; } #page-ustadh .ucbt-trans { font-size: 13.5px; color: var(--text-muted); font-style: italic; } /* Input pill */ #page-ustadh .uc-input-row { background: linear-gradient(180deg, transparent, rgba(13,12,20,0.75) 40%); padding: 10px 14px 14px; } #page-ustadh .uc-input-wrap { background: var(--surface); border: 1px solid var(--border-strong); border-radius: 999px; padding: 4px 6px 4px 14px; display: flex; align-items: center; gap: 8px; backdrop-filter: blur(20px); } #page-ustadh .uc-input-wrap input, #page-ustadh #ucInput { background: transparent; border: none; color: var(--text); font-family: var(--font-ui); font-size: 14.5px; flex: 1; padding: 12px 4px; } #page-ustadh .uc-input-wrap input::placeholder { color: var(--text-dim); } #page-ustadh .uc-mic { width: 38px; height: 38px; border-radius: 50%; background: transparent; border: none; color: var(--text-muted); } #page-ustadh .uc-send { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #1a1408; border: none; box-shadow: 0 6px 18px rgba(245,201,119,0.40); display: flex; align-items: center; justify-content: center; } /* Mood-Chips innerhalb von Tawba (utc-chip etc.) — bunte Akzente */ #page-ustadh .utc-chip, #page-ustadh .uc-sugg { padding: 9px 14px; border-radius: 18px; background: rgba(167,139,250,0.12); border: 1.5px solid rgba(167,139,250,0.40); color: var(--lavender); font-family: var(--font-ui); font-weight: 700; font-size: 13px; } #page-ustadh .utc-chip[data-tone="rose"] { background: rgba(251,113,133,0.12); border-color: rgba(251,113,133,0.40); color: var(--rose); } #page-ustadh .utc-chip[data-tone="gold"] { background: var(--gold-glow); border-color: var(--border-strong); color: var(--gold); } #page-ustadh .utc-chip[data-tone="emerald"] { background: rgba(74,222,128,0.12); border-color: rgba(74,222,128,0.40); color: var(--emerald); } /* ────────────────────────────────────────────────────────────────── v33.2 SALAH — Compass + Prayer list with green-check + week grid ────────────────────────────────────────────────────────────────── */ #page-salat { background: var(--bg); padding-top: 12px; } /* Hero kompakter — Sujud illustration verkleinern */ #page-salat .salat-hero { background: linear-gradient(135deg, var(--gold-glow), transparent 55%), var(--surface); border: 1px solid var(--border-strong); border-radius: 22px; padding: 16px 18px; margin-bottom: 14px; overflow: hidden; position: relative; } #page-salat .salat-hero::after { content: ""; position: absolute; top: -30px; right: -30px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, var(--gold-glow), transparent 60%); } #page-salat .salat-illustr { opacity: 0.30; filter: saturate(0.7); max-height: 90px; } #page-salat .salat-hero-title { font-family: var(--font-ui); font-weight: 800; font-size: 30px; letter-spacing: -0.7px; color: var(--text); } #page-salat .salat-arabic { font-family: var(--font-arabic); color: var(--gold); font-size: 22px; line-height: 1.6; } #page-salat .salat-translation { color: var(--text-muted); font-size: 12.5px; } /* Qibla compass card */ #page-salat .qibla-card { background: var(--surface); border: 1px solid var(--border-strong); border-radius: 22px; padding: 18px; margin-bottom: 14px; } #page-salat .qc-compass { background: radial-gradient(circle at center, rgba(13,12,20,0.95), rgba(13,12,20,0.7)); border: 2px solid var(--border-strong); } #page-salat .qc-arrow { color: var(--gold); filter: drop-shadow(0 0 6px var(--gold-glow)); } #page-salat .qc-title { color: var(--gold); font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 700; } #page-salat .qc-deg { font-size: 36px; font-weight: 800; color: var(--text); letter-spacing: -0.7px; font-variant-numeric: tabular-nums; } #page-salat .qc-dir { color: var(--text-muted); font-size: 13px; } /* Prayer rows: green check (done) / gold pill (current) / dim (future) */ #page-salat .salat-grid { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; } #page-salat .prayer-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 14px 16px; display: flex; align-items: center; gap: 14px; } #page-salat .prayer-card.done { border-color: rgba(74,222,128,0.30); } #page-salat .prayer-card.done .pc-icon-wrap { background: var(--emerald); color: #052e10; box-shadow: 0 0 16px var(--emerald-glow); } #page-salat .prayer-card.current, #page-salat .prayer-card.now { background: linear-gradient(135deg, var(--gold-glow), transparent 55%), var(--surface); border-color: var(--border-strong); } #page-salat .prayer-card.current .pc-name, #page-salat .prayer-card.now .pc-name { color: var(--gold); } #page-salat .pc-name { font-weight: 800; font-size: 17px; color: var(--text); letter-spacing: -0.3px; } #page-salat .pc-rakah, #page-salat .pc-time { font-size: 12px; color: var(--text-muted); } #page-salat .pc-icon-wrap { width: 42px; height: 42px; border-radius: 12px; background: var(--surface-elev); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; } /* Last prayer card / Fatiha CTA / stats card */ #page-salat .last-prayer-card, #page-salat .stats-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 14px 16px; margin-bottom: 12px; } #page-salat .fatiha-cta { background: linear-gradient(135deg, var(--gold-glow), transparent 55%), var(--surface); border: 1px solid var(--border-strong); border-radius: 18px; padding: 14px 16px; } #page-salat .stats-pct { color: var(--gold); font-weight: 800; } #page-salat .progress-bar { background: rgba(244,237,224,0.08); border-radius: 999px; height: 8px; } #page-salat .progress-fill { background: linear-gradient(90deg, var(--gold), var(--gold-deep)); border-radius: 999px; } #page-salat .salat-mosque-foot { opacity: 0.35; } /* ────────────────────────────────────────────────────────────────── v33.3 QURAN / MUSHAF — gold accent header + cream paper bleibt ────────────────────────────────────────────────────────────────── */ #page-quran .quran-header, #page-quran .quran-detail-header { background: rgba(13,12,20,0.78); backdrop-filter: blur(18px); border-bottom: 1px solid var(--border); } #page-quran .qh-title, #page-quran .qd-title { font-family: var(--font-ui); font-weight: 800; font-size: 22px; letter-spacing: -0.5px; color: var(--text); } #page-quran .qh-sub, #page-quran .qd-sub { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 700; color: var(--gold); } #page-quran .qd-back, #page-quran .qd-fav { width: 38px; height: 38px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); color: var(--text); } /* Khatm-tracker card */ #page-quran .khatm-tracker { background: var(--surface); border: 1px solid var(--border-strong); border-radius: 18px; padding: 14px 16px; margin-bottom: 14px; display: flex; align-items: center; gap: 14px; } #page-quran .kt-icon { width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(135deg, var(--gold-glow), transparent), var(--surface-elev); color: var(--gold); font-size: 22px; display: flex; align-items: center; justify-content: center; } #page-quran .kt-label { color: var(--text); font-weight: 700; font-size: 14px; } #page-quran .kt-pct { color: var(--gold); font-weight: 800; font-size: 17px; } #page-quran .kt-bar { background: rgba(244,237,224,0.08); border-radius: 999px; height: 6px; overflow: hidden; } #page-quran .kt-bar-fill { background: linear-gradient(90deg, var(--gold), var(--gold-deep)); } #page-quran .kt-detail { color: var(--text-muted); font-size: 11px; } /* Surah list rows */ #page-quran .surah-list-item { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 12px 14px; margin-bottom: 8px; } #page-quran .surah-name { font-weight: 800; color: var(--text); } #page-quran .surah-arabic { font-family: var(--font-arabic); color: var(--gold); } #page-quran .surah-meta { color: var(--text-muted); font-size: 11.5px; } /* Mushaf cream paper enhancement */ #page-quran .mushaf-book { background: #f4ede0; border-radius: 22px; box-shadow: 0 12px 40px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.5); margin: 8px 4px; } /* Tabs */ #page-quran .quran-tabs { gap: 6px; } #page-quran .qt-tab { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 8px 14px; color: var(--text-muted); font-weight: 700; font-family: var(--font-ui); } #page-quran .qt-tab.active { background: linear-gradient(135deg, var(--gold-glow), transparent); border-color: var(--border-strong); color: var(--gold); } /* ────────────────────────────────────────────────────────────────── v33.4 TASBIH FULLSCREEN — hero hybrid orb ────────────────────────────────────────────────────────────────── */ .tasbih-fullscreen { background: var(--bg); } .tasbih-fullscreen .tf-header { border-bottom: 1px solid var(--border); } .tasbih-fullscreen .tf-title { font-family: var(--font-ui); font-weight: 800; color: var(--text); letter-spacing: -0.3px; } .tasbih-fullscreen .tf-close, .tasbih-fullscreen .tf-reset { width: 38px; height: 38px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); color: var(--text); } .tasbih-fullscreen .tf-session-pill { padding: 8px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); font-weight: 700; font-size: 13px; font-family: var(--font-ui); } .tasbih-fullscreen .tf-session-pill.active { background: linear-gradient(135deg, var(--gold-glow), transparent); border-color: var(--border-strong); color: var(--gold); } /* Big center counter */ .tasbih-fullscreen .tf-counter { font-family: var(--font-ui); font-weight: 800; text-align: center; padding: 24px 0 12px; } .tasbih-fullscreen .tf-num { font-size: 72px; line-height: 1.0; color: var(--gold); letter-spacing: -2px; font-variant-numeric: tabular-nums; text-shadow: 0 0 24px var(--gold-glow); } .tasbih-fullscreen .tf-sep, .tasbih-fullscreen .tf-target { font-size: 22px; color: var(--text-muted); } .tasbih-fullscreen .tf-arabic { font-family: var(--font-arabic); color: var(--gold); font-size: 30px; text-align: center; } .tasbih-fullscreen .tf-meaning { text-align: center; color: var(--text-muted); text-transform: uppercase; letter-spacing: 2px; font-size: 11px; font-weight: 700; } /* TAP button */ .tasbih-fullscreen .tf-tap { width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle at 35% 32%, #fff5cc 0%, var(--gold) 22%, var(--gold-deep) 55%, #6b4818 82%, #1a1006 100%); color: #1a1408; border: none; box-shadow: 0 0 40px var(--gold-glow), inset 0 4px 14px rgba(255,235,170,0.45), inset 0 -8px 20px rgba(0,0,0,0.30); margin: 18px auto; display: flex; align-items: center; justify-content: center; } .tasbih-fullscreen .tf-tap-text { font-family: var(--font-ui); font-weight: 800; font-size: 26px; letter-spacing: 4px; color: #2a1a08; } .tasbih-fullscreen .tf-tap-ring { border: 2px solid var(--gold); box-shadow: 0 0 30px var(--gold-glow); } .tasbih-fullscreen .tf-stats { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 14px; margin: 14px; } .tasbih-fullscreen .tf-stat-num { color: var(--gold); font-weight: 800; } /* Tasbih chain colors */ .tasbih-fullscreen .tf-bead { filter: drop-shadow(0 0 8px var(--gold-glow)); } /* ────────────────────────────────────────────────────────────────── v33.5 FAMILY / CLAN — Banu Sabr ────────────────────────────────────────────────────────────────── */ #page-family { background: var(--bg); } #page-family .family-header { background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 16px 18px; margin-bottom: 14px; } #page-family .fh-name { font-family: var(--font-ui); font-weight: 800; font-size: 26px; color: var(--text); letter-spacing: -0.5px; } #page-family .fh-name strong, #page-family .fh-name .gold { color: var(--gold); } #page-family .fh-members, #page-family .fh-xp { color: var(--text-muted); font-size: 12px; } #page-family .fh-code { background: var(--surface-elev); border: 1px solid var(--border-strong); color: var(--gold); font-weight: 800; padding: 8px 14px; border-radius: 12px; } /* Challenge banner */ #page-family .family-challenge { background: linear-gradient(135deg, var(--gold-glow), transparent 60%), var(--surface); border: 1px solid var(--border-strong); border-radius: 22px; padding: 16px 18px; margin-bottom: 14px; position: relative; overflow: hidden; } #page-family .family-challenge::after { content: ""; position: absolute; top: -30px; right: -30px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, var(--gold-glow), transparent 60%); } #page-family .fc-title { color: var(--text); font-weight: 800; font-size: 18px; } #page-family .fc-desc { color: var(--text-muted); font-size: 13px; } #page-family .fc-reward { background: rgba(251,113,133,0.15); border: 1px solid rgba(251,113,133,0.33); color: var(--rose); font-weight: 700; padding: 6px 12px; border-radius: 999px; font-size: 12px; } #page-family .fc-bar { background: rgba(244,237,224,0.08); border-radius: 999px; height: 8px; overflow: hidden; } #page-family .fc-bar-fill { background: linear-gradient(90deg, var(--gold), var(--gold-deep)); } #page-family .fc-meta { color: var(--gold); font-weight: 800; font-size: 20px; } /* Tournament + member rows */ #page-family .tournament-card, #page-family .sadaqah-card, #page-family .family-tasbih-card, #page-family .top-performer { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 14px 16px; margin-bottom: 12px; } #page-family .ftc-num, #page-family .sc-count, #page-family .tp-xp { color: var(--gold); font-weight: 800; } #page-family .members-list .member-row, #page-family .tournament-rows .tr-row { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 12px 14px; margin-bottom: 8px; } #page-family .promise-add-row input, #page-family #promiseInput { background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: 14px; padding: 12px 14px; } #page-family .promise-add-row button { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #1a1408; border-radius: 14px; font-weight: 800; } /* ────────────────────────────────────────────────────────────────── v33.6 REFLEXION — Dein Herz with mood counters ────────────────────────────────────────────────────────────────── */ #page-reflection { background: var(--bg); } #page-reflection .reflection-hero { margin-bottom: 14px; } #page-reflection .rf-eyebrow { font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; } #page-reflection .rf-title { font-family: var(--font-ui); font-weight: 800; font-size: 38px; letter-spacing: -1.0px; color: var(--text); line-height: 1.0; margin-top: 4px; } #page-reflection .rf-title em, #page-reflection .rf-title .gold { color: var(--gold); font-style: normal; } #page-reflection .rf-sub { color: var(--text-muted); font-size: 13px; margin-top: 8px; } /* Prompts as chips with active gold-outline */ #page-reflection .rf-prompts { display: flex; gap: 10px; overflow-x: auto; padding: 4px 0 8px; scrollbar-width: none; } #page-reflection .rf-prompts::-webkit-scrollbar { display: none; } #page-reflection .rf-prompt { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 10px 14px; color: var(--text); font-family: var(--font-ui); font-weight: 700; font-size: 13px; white-space: nowrap; flex-shrink: 0; } #page-reflection .rf-prompt.active, #page-reflection .rf-prompt:focus-visible { background: linear-gradient(135deg, var(--gold-glow), transparent); border-color: var(--gold); color: var(--gold); } /* Composer card */ #page-reflection .rf-paper, #page-reflection .rf-composer { background: var(--surface); border: 1px solid var(--border-strong); border-radius: 22px; padding: 16px; margin-top: 12px; } #page-reflection .rf-paper textarea, #page-reflection .rf-composer textarea, #page-reflection #rfText { background: transparent; border: none; color: var(--text); font-family: var(--font-ui); font-size: 15px; line-height: 1.6; width: 100%; min-height: 160px; resize: none; } #page-reflection .rf-paper textarea::placeholder { color: var(--text-dim); } #page-reflection .rf-saved { display: flex; align-items: center; gap: 6px; color: var(--emerald); font-size: 12px; font-weight: 600; } #page-reflection .rf-save-btn, #page-reflection .rf-cta-save { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #1a1408; border: none; font-weight: 800; border-radius: 14px; padding: 10px 16px; } /* History entries */ #page-reflection .rf-entries .rf-entry, #page-reflection .rf-history-item { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; margin-bottom: 10px; } #page-reflection .rf-entry-title { font-weight: 800; color: var(--text); font-size: 15px; } #page-reflection .rf-entry-meta { color: var(--text-muted); font-size: 11px; } /* ────────────────────────────────────────────────────────────────── v33.7 LEVEL / PFAD — Level disc + week chart + breakdown ────────────────────────────────────────────────────────────────── */ #page-points { background: var(--bg); } #page-points .level-hero { background: linear-gradient(135deg, var(--gold-glow), transparent 55%), var(--surface); border: 1px solid var(--border-strong); border-radius: 22px; padding: 18px; margin-bottom: 14px; position: relative; overflow: hidden; } #page-points .level-hero::after { content: ""; position: absolute; top: -30px; right: -30px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, var(--gold-glow), transparent 60%); } #page-points .lh-stars { display: none; } #page-points .lh-badge { width: 86px; height: 86px; border-radius: 50%; background: radial-gradient(circle at 35% 32%, rgba(245,201,119,0.9), var(--gold-deep) 65%, #2a1a08 100%); border: 3px solid var(--gold); color: #1a1408; font-weight: 800; font-size: 30px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 30px var(--gold-glow), inset 0 2px 8px rgba(255,255,255,0.4); flex-shrink: 0; position: relative; z-index: 1; } #page-points .lh-num { font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--gold); font-weight: 700; } #page-points .lh-title { font-family: var(--font-ui); font-weight: 800; font-size: 32px; color: var(--text); letter-spacing: -0.8px; line-height: 1.0; } #page-points .lh-xp { color: var(--text); font-weight: 800; font-size: 22px; margin-top: 6px; } #page-points .lh-xp .gold { color: var(--gold); } #page-points .lh-bar { background: rgba(244,237,224,0.08); border-radius: 999px; height: 8px; } #page-points .lh-bar-fill { background: linear-gradient(90deg, var(--gold), var(--gold-deep)); border-radius: 999px; } #page-points .lh-bar-info, #page-points .lh-forecast { color: var(--text-muted); font-size: 12px; } /* XP breakdown — rows mit icon + horizontal bar + value */ #page-points .xp-grid { display: flex; flex-direction: column; gap: 10px; } #page-points .xp-item { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; } #page-points .xp-item .xp-icon { width: 38px; height: 38px; border-radius: 12px; background: var(--surface-elev); border: 1px solid var(--border); color: var(--gold); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; } #page-points .xp-item .xp-lbl { color: var(--text); font-weight: 700; flex: 1; } #page-points .xp-item .xp-num { color: var(--emerald); font-weight: 800; } /* Week chart bars */ #page-points .week-chart { background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 18px 18px 12px; margin-bottom: 14px; } #page-points .week-chart .wc-bar { background: var(--emerald); border-radius: 8px 8px 4px 4px; box-shadow: 0 0 12px var(--emerald-glow); } #page-points .week-chart .wc-bar.today { background: var(--gold); box-shadow: 0 0 12px var(--gold-glow); } #page-points .week-chart .wc-day { color: var(--text-muted); font-size: 11px; font-weight: 600; } /* Achievements grid */ #page-points .achievements-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } #page-points .achievement-tile, #page-points .ach-tile { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 14px 8px; text-align: center; } #page-points .achievement-tile.unlocked, #page-points .ach-tile.unlocked { background: linear-gradient(135deg, var(--gold-glow), transparent); border-color: var(--gold); } /* ────────────────────────────────────────────────────────────────── v33.8 ADHKAR — Morgen/Abend + hero dhikr card + list ────────────────────────────────────────────────────────────────── */ #page-dua { background: var(--bg); } #page-dua .daily-adhkar { background: linear-gradient(135deg, var(--gold-glow), transparent 60%), var(--surface); border: 1px solid var(--border-strong); border-radius: 22px; padding: 16px 18px; margin-bottom: 14px; position: relative; overflow: hidden; } #page-dua .da-title { color: var(--text); font-weight: 800; font-size: 16px; } #page-dua .da-pct { color: var(--gold); font-weight: 800; font-size: 18px; } #page-dua .da-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; } #page-dua .da-card { background: var(--surface-elev); border: 1px solid var(--border); border-radius: 16px; padding: 14px 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--text); } #page-dua .da-card[data-time="morning"] .da-icon { color: var(--gold); } #page-dua .da-card[data-time="evening"] .da-icon { color: var(--lavender); } #page-dua .da-lbl { font-weight: 700; font-size: 13px; } #page-dua .da-count { color: var(--gold); font-weight: 800; font-variant-numeric: tabular-nums; } #page-dua .dua-search { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 10px 14px; display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } #page-dua .dua-search input { background: transparent; border: none; color: var(--text); flex: 1; font-family: var(--font-ui); } #page-dua .dua-search input::placeholder { color: var(--text-dim); } #page-dua .dua-cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; } #page-dua .dua-cat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 14px; color: var(--text); } #page-dua .dua-cat-card .cat-label { color: var(--text); font-weight: 800; font-size: 14px; } /* Adhkar fullscreen (hero dhikr card) */ .adhkar-fullscreen { background: var(--bg); } .adhkar-fullscreen .af-hero { background: linear-gradient(135deg, var(--gold-glow), transparent 55%), var(--surface); border: 1px solid var(--border-strong); border-radius: 22px; padding: 18px; margin: 14px; } .adhkar-fullscreen .af-arabic { font-family: var(--font-arabic); color: var(--text); font-size: 26px; line-height: 2.0; direction: rtl; text-align: center; margin: 16px 0 12px; } .adhkar-fullscreen .af-counter-btn, .adhkar-fullscreen .af-tap { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #1a1408; font-weight: 800; border-radius: 18px; box-shadow: 0 8px 24px rgba(245,201,119,0.35); } /* ────────────────────────────────────────────────────────────────── v33.9 ONBOARDING — gold CTA matches Synthesis ────────────────────────────────────────────────────────────────── */ .onboard-overlay { background: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(245,201,119,0.06), transparent 60%), var(--bg); } .onboard-step h1, .onboard-step .ob-title { font-family: var(--font-ui); font-weight: 800; font-size: 32px; letter-spacing: -0.8px; color: var(--text); } .onboard-step .ob-title .gold, .onboard-step .ob-brand { color: var(--gold); } .onboard-overlay .ob-gender-pill, .onboard-overlay .ob-goal-pill { background: var(--surface); border: 1.5px solid var(--border); color: var(--text); border-radius: 16px; font-weight: 700; } .onboard-overlay .ob-gender-pill.active, .onboard-overlay .ob-goal-pill.active { background: linear-gradient(135deg, var(--gold-glow), transparent); border-color: var(--gold); color: var(--gold); } .onboard-overlay #obNextBtn, .onboard-overlay .ob-next { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #1a1408; font-weight: 800; font-family: var(--font-ui); border: none; border-radius: 18px; box-shadow: 0 8px 24px rgba(245,201,119,0.35); height: 56px; } .onboard-overlay #obNameInput, .onboard-overlay input[type="text"] { background: var(--surface); border: 1px solid var(--border-strong); color: var(--text); font-family: var(--font-ui); border-radius: 14px; padding: 14px 16px; } .onboard-overlay .ob-dot { background: var(--border); } .onboard-overlay .ob-dot.active { background: var(--gold); box-shadow: 0 0 8px var(--gold-glow); } .onboard-overlay .ob-dot.done { background: var(--gold-deep); } /* ────────────────────────────────────────────────────────────────── v33.10 SPLASH — last polish (orb stays, palette aligned) ────────────────────────────────────────────────────────────────── */ .splash-v30 { background: var(--bg); } .splash-v30 .sp-brand-sabr { color: var(--text); } .splash-v30 .sp-brand-dot, .splash-v30 .sp-brand-ai { color: var(--gold); } .splash-v30 .sp-tagline { color: var(--text-muted); } .splash-v30 .sp-loader span { background: var(--gold); } /* ╔══════════════════════════════════════════════════════════════════╗ ║ v34 ★ SYNTHESIS — All-Pages Markup-Rebuild Styling ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* ╔════════════════════════════════════════════════════════════════════╗ ║ v34.1 SALAH PAGE — Hijri / Title / Qibla / Prayer rows / Week ║ ╚════════════════════════════════════════════════════════════════════╝ */ #page-salat { padding: 14px 16px 120px; } #page-salat .ss-page { display: flex; flex-direction: column; gap: 14px; } /* v86: Legacy-Salat-Blocks die es eh nicht mehr im HTML gibt. .salat-hero ist v84+ AKTIV - aus dem Hide-Block raus! .section-title in page-salat muessen auch sichtbar bleiben. */ #page-salat .fatiha-cta, #page-salat .last-prayer-card, #page-salat .qibla-card, #page-salat .stats-card, #page-salat .salat-mosque-foot, #page-salat .salat-grid { display: none !important; } /* Header row: Hijri eyebrow + Title + Hamburg pill */ .ss-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 4px; } .ss-hijri { font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-muted); } .ss-title { font-family: var(--font-ui); font-weight: 800; font-size: 38px; letter-spacing: -1.2px; color: var(--text); line-height: 1.0; margin-top: 4px; } .ss-loc { background: var(--surface); border: 1px solid var(--border-strong); color: var(--text); border-radius: 999px; padding: 8px 14px; font-family: var(--font-ui); font-weight: 700; font-size: 12.5px; display: inline-flex; align-items: center; gap: 7px; } .ss-loc svg { color: var(--gold); } /* Qibla Compass Card */ .ss-qibla { background: var(--surface); border: 1px solid var(--border-strong); border-radius: 22px; padding: 16px 18px; display: flex; align-items: center; gap: 18px; position: relative; overflow: hidden; } .ss-qibla::after { content: ""; position: absolute; top: -30px; right: -30px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, var(--gold-glow), transparent 60%); pointer-events: none; } .ss-qc-dial { position: relative; width: 110px; height: 110px; background: radial-gradient(circle at 50% 50%, rgba(20,15,8,0.95), rgba(13,12,20,0.7)); border: 2px solid var(--border-strong); border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 2px 12px rgba(0,0,0,0.45); } .ss-qc-ring { position: absolute; inset: 8px; border-radius: 50%; border: 1px dashed rgba(245,201,119,0.25); } .ss-qc-marks { position: absolute; inset: 0; font-size: 9px; font-weight: 800; color: var(--text-muted); letter-spacing: 1px; } .ss-qc-marks .ss-qc-n { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); color: var(--gold); } .ss-qc-marks .ss-qc-e { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); } .ss-qc-marks .ss-qc-s { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); } .ss-qc-marks .ss-qc-w { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); } .ss-qc-needle { position: absolute; top: 50%; left: 50%; width: 4px; height: 42px; background: linear-gradient(180deg, var(--gold), var(--gold-deep)); transform: translate(-50%, -100%); border-radius: 2px; transform-origin: 50% 100%; box-shadow: 0 0 12px var(--gold-glow); transition: transform 0.4s ease; } .ss-qc-tip { position: absolute; top: -4px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid var(--gold); filter: drop-shadow(0 0 4px var(--gold-glow)); } .ss-qc-kaaba { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: var(--gold); opacity: 0.6; } .ss-qc-info { flex: 1; position: relative; z-index: 1; } .ss-qc-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gold); } .ss-qc-deg { font-family: var(--font-ui); font-weight: 800; font-size: 34px; line-height: 1.0; letter-spacing: -1px; color: var(--text); margin: 6px 0 4px; font-variant-numeric: tabular-nums; } .ss-qc-meta { font-size: 12px; color: var(--text-muted); } .ss-qc-ar { margin-top: 10px; background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #1a1408; border: none; border-radius: 999px; padding: 7px 14px; font-family: var(--font-ui); font-weight: 800; font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 4px 14px rgba(245,201,119,0.30); } /* Heute Pflichten Head */ .ss-pflicht-head { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; } .ss-ph-title { font-family: var(--font-ui); font-weight: 800; font-size: 17px; color: var(--text); letter-spacing: -0.3px; } .ss-ph-pill { background: var(--surface-elev); border: 1px solid var(--border-strong); color: var(--gold); font-weight: 800; font-size: 12px; padding: 6px 12px; border-radius: 999px; font-variant-numeric: tabular-nums; } /* Prayer rows */ .ss-prayers { display: flex; flex-direction: column; gap: 8px; } .ss-pr { width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; font-family: var(--font-ui); color: var(--text); } .ss-pr-check { width: 38px; height: 38px; border-radius: 11px; background: var(--surface-elev); border: 1px solid var(--border); color: var(--text-muted); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ss-pr-done .ss-pr-check { background: var(--emerald); border-color: var(--emerald); color: #052e10; box-shadow: 0 0 16px var(--emerald-glow); } .ss-pr-now .ss-pr-check { background: var(--surface-elev); border-color: var(--gold); color: var(--gold); } .ss-pr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ss-pr-line { display: flex; align-items: baseline; gap: 8px; } .ss-pr-name { font-weight: 800; font-size: 17px; color: var(--text); letter-spacing: -0.3px; } .ss-pr-ar { font-family: var(--font-arabic); font-size: 17px; color: var(--text-muted); } .ss-pr-now .ss-pr-name, .ss-pr-now .ss-pr-ar { color: var(--gold); } .ss-pr-sub { font-size: 11.5px; color: var(--text-dim); font-weight: 600; letter-spacing: 0.2px; } .ss-pr-done .ss-pr-sub { color: var(--emerald); } .ss-pr-now .ss-pr-sub { color: var(--gold); } .ss-pr-time { font-weight: 800; font-size: 17px; color: var(--text); font-variant-numeric: tabular-nums; } .ss-pr-now { background: linear-gradient(135deg, var(--gold-glow), transparent 55%), var(--surface); border-color: var(--border-strong); box-shadow: 0 0 0 1px rgba(245,201,119,0.20); } .ss-pr-now .ss-pr-time { color: var(--gold); } .ss-pr-future { opacity: 0.65; } .ss-pr-cta { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #1a1408; font-weight: 800; font-size: 12px; padding: 6px 12px; border-radius: 999px; flex-shrink: 0; box-shadow: 0 4px 12px rgba(245,201,119,0.30); } /* Week heat grid */ .ss-week { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 14px 16px; } .ss-week-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .ss-week-title { font-weight: 800; font-size: 15px; color: var(--text); } .ss-week-meta { font-size: 12px; color: var(--text-muted); font-weight: 600; } .ss-week-grid { display: flex; flex-direction: column; gap: 4px; } .ss-wg-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .ss-wg-head { margin-bottom: 4px; } .ss-wg-day { font-size: 11px; font-weight: 700; text-align: center; color: var(--text-muted); letter-spacing: 0.5px; } .ss-wg-day.is-today { color: var(--gold); } .ss-wg-cell { height: 22px; border-radius: 6px; background: var(--surface-elev); border: 1px solid var(--border); } .ss-wg-cell.is-done { background: var(--emerald); border-color: var(--emerald); box-shadow: 0 0 8px var(--emerald-glow); } .ss-wg-cell.is-missed { background: rgba(244,237,224,0.04); } .ss-wg-cell.is-future { opacity: 0.4; } /* ╔════════════════════════════════════════════════════════════════════╗ ║ v34.2 TASBIH FULLSCREEN — 99-Dot Ring + Center Orb ║ ║ v36-fix: Display NUR mit .show Klasse, nicht standardmäßig! ║ ╚════════════════════════════════════════════════════════════════════╝ */ .tasbih-fullscreen.tf-v34 { background: radial-gradient(ellipse 80% 60% at 50% 35%, rgba(245,201,119,0.05), transparent 60%), var(--bg); padding: 14px 16px 30px; /* v36-fix: KEIN display:flex hier - sonst zeigt sich Tasbih auf jedem Page-Load */ /* display:none kommt vom Base-Rule (.tasbih-fullscreen) - nur .show enabled flex */ } /* v36-fix: explizit nur mit .show class anzeigen */ .tasbih-fullscreen.tf-v34.show { display: flex !important; flex-direction: column; gap: 14px; } /* hide ALL old internal tasbih elements */ .tasbih-fullscreen.tf-v34 .tf-header[hidden], .tasbih-fullscreen.tf-v34 .tf-session-row, .tasbih-fullscreen.tf-v34 .tf-timer, .tasbih-fullscreen.tf-v34 .tf-crescent, .tasbih-fullscreen.tf-v34 .tf-chain-wrap, .tasbih-fullscreen.tf-v34 .tf-counter:not(.tf34-orb-count), .tasbih-fullscreen.tf-v34 .tf-arabic, .tasbih-fullscreen.tf-v34 .tf-meaning, .tasbih-fullscreen.tf-v34 .tf-tap, .tasbih-fullscreen.tf-v34 .tf-pills, .tasbih-fullscreen.tf-v34 .tf-stats { display: none !important; } /* Header */ .tf34-head { display: flex; align-items: center; gap: 12px; padding: 4px 0 6px; } .tf34-back, .tf34-reset { width: 38px; height: 38px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); color: var(--text); display: inline-flex; align-items: center; justify-content: center; } .tf34-title-wrap { flex: 1; text-align: center; } .tf34-title { font-family: var(--font-ui); font-weight: 800; font-size: 18px; color: var(--text); letter-spacing: -0.3px; line-height: 1.1; } .tf34-sub { font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-muted); margin-top: 2px; } /* Stage progress bars */ .tf34-stages { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; } .tf34-stage { display: flex; flex-direction: column; gap: 5px; } .tf34-st-bar { height: 4px; border-radius: 2px; background: rgba(244,237,224,0.08); overflow: hidden; } .tf34-st-fill { height: 100%; width: 0%; background: rgba(244,237,224,0.15); border-radius: 2px; transition: width 0.3s ease; } .tf34-stage[data-stage="subhan"] .tf34-st-fill { background: linear-gradient(90deg, var(--emerald), #6fd99b); box-shadow: 0 0 8px var(--emerald-glow); width: 100%; } .tf34-stage[data-stage="subhan"] .tf34-st-lbl { color: var(--emerald); } .tf34-stage[data-stage="alhamd"] .tf34-st-fill { background: linear-gradient(90deg, var(--gold), var(--gold-deep)); box-shadow: 0 0 8px var(--gold-glow); } .tf34-stage[data-stage="alhamd"] .tf34-st-lbl { color: var(--gold); } .tf34-stage[data-stage="akbar"] .tf34-st-lbl { color: var(--text-dim); } .tf34-st-lbl { font-size: 11px; font-weight: 700; letter-spacing: 0.3px; text-align: center; } .tf34-stage.is-active .tf34-st-fill { width: var(--p, 0%); } .tf34-stage.is-done .tf34-st-fill { width: 100% !important; } .tf34-stage.is-future .tf34-st-fill { width: 0% !important; } /* Orb wrap */ .tf34-orb-wrap { position: relative; width: 320px; height: 320px; margin: 8px auto 4px; } .tf34-ring { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .tf34-ring circle.dot { fill: rgba(244,237,224,0.18); transition: fill 0.2s ease, r 0.2s ease; } .tf34-ring circle.dot.is-done { fill: var(--gold); filter: url(#tf34DotGlow); } .tf34-ring circle.dot.is-milestone { fill: var(--gold); } .tf34-ring circle.dot.is-milestone.is-done { fill: #fff5cc; } .tf34-ring circle.dot.is-pending { fill: rgba(244,237,224,0.10); } /* Center orb */ .tf34-orb { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle at 35% 32%, #fff5cc 0%, var(--gold) 22%, var(--gold-deep) 55%, #6b4818 82%, #1a1006 100%); border: none; color: #1a1408; box-shadow: 0 0 56px rgba(245,201,119,0.30), inset 0 8px 24px rgba(255,235,170,0.55), inset 0 -10px 24px rgba(0,0,0,0.35); font-family: var(--font-ui); } .tf34-orb-halo { position: absolute; inset: -12px; border-radius: 50%; background: radial-gradient(circle, rgba(245,201,119,0.20), transparent 70%); pointer-events: none; animation: tf34Halo 3.6s ease-in-out infinite; } @keyframes tf34Halo { 0%, 100% { transform: scale(1); opacity: 0.55; } 50% { transform: scale(1.06); opacity: 0.85; } } .tf34-orb-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 100%; } .tf34-orb-ar { font-family: var(--font-arabic); font-size: 22px; color: #2a1a08; line-height: 1.1; margin-bottom: 2px; } .tf34-orb-lbl { font-size: 10px; font-weight: 800; letter-spacing: 1.8px; color: #4a3408; text-transform: uppercase; } .tf34-orb-count { font-size: 64px; font-weight: 800; color: #2a1a08; line-height: 1.0; font-variant-numeric: tabular-nums; letter-spacing: -2px; margin-top: 4px; } .tf34-orb-of { font-size: 10px; font-weight: 800; letter-spacing: 1.8px; color: #4a3408; } .tf34-orb:active { transform: translate(-50%, -50%) scale(0.96); } /* Pager */ .tf34-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin: -4px 0; } .tf34-pg-arr { width: 30px; height: 30px; border-radius: 50%; background: transparent; border: 1px solid var(--border); color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; } .tf34-pg-dots { display: flex; gap: 6px; } .tf34-pg-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(244,237,224,0.15); } .tf34-pg-dot.is-active { background: var(--gold); width: 22px; border-radius: 4px; } .tf34-pg-dot.is-done { background: var(--emerald); } /* Stats strip */ .tf34-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; } .tf34-stat { background: var(--surface); padding: 14px 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; } .tf34-sn { font-family: var(--font-ui); font-weight: 800; font-size: 19px; color: var(--gold); font-variant-numeric: tabular-nums; } .tf34-sn-lav { color: var(--lavender); } .tf34-sl { font-size: 11px; color: var(--text-muted); font-weight: 500; } .tf34-hint { text-align: center; font-size: 10.5px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--text-dim); margin-top: 4px; } /* ╔════════════════════════════════════════════════════════════════════╗ ║ v34.3 FAMILY / BANŪ SABR ║ ╚════════════════════════════════════════════════════════════════════╝ */ #page-family { padding: 14px 16px 120px; } /* v79: Nur wirklich verdaechtige Legacy-Elemente versteckt halten. Alle anderen Features (Stories, Tasbih, Promises, Tournament, Sadaqah, Reminder, Salam, Members, Goals, Feed) wieder sichtbar. */ #page-family .family-header { display: none !important; } .fm-head-row { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 14px; } .fm-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-muted); } .fm-name { font-family: var(--font-ui); font-weight: 800; font-size: 34px; letter-spacing: -1px; line-height: 1.0; color: var(--text); margin-top: 4px; } .fm-name-suffix { color: var(--gold); } .fm-shield { width: 56px; height: 64px; background: linear-gradient(180deg, var(--gold-glow), transparent); color: var(--gold); display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 0 12px var(--gold-glow)); } /* Wochen-Challenge */ .fm-challenge { background: linear-gradient(135deg, var(--gold-glow), transparent 60%), var(--surface); border: 1px solid var(--border-strong); border-radius: 22px; padding: 18px 18px 16px; margin-bottom: 18px; position: relative; overflow: hidden; } .fm-ch-deco { position: absolute; top: -30px; right: -30px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, var(--gold-glow), transparent 60%); pointer-events: none; } .fm-ch-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--rose); position: relative; z-index: 1; } .fm-ch-title { font-family: var(--font-ui); font-weight: 800; font-size: 24px; line-height: 1.15; letter-spacing: -0.5px; color: var(--text); margin: 8px 0 12px; position: relative; z-index: 1; } .fm-ch-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; position: relative; z-index: 1; } .fm-ch-counter { display: inline-flex; align-items: baseline; gap: 6px; } .fm-ch-num { font-family: var(--font-ui); font-weight: 800; font-size: 52px; line-height: 1.0; letter-spacing: -2px; color: var(--gold); font-variant-numeric: tabular-nums; } .fm-ch-of { color: var(--text-muted); font-size: 17px; font-weight: 700; } .fm-ch-xp { background: var(--surface-elev); border: 1px solid var(--border-strong); color: var(--gold); font-weight: 800; font-size: 11.5px; padding: 7px 12px; border-radius: 999px; } .fm-ch-bar { height: 8px; border-radius: 999px; background: rgba(244,237,224,0.08); overflow: hidden; position: relative; z-index: 1; } .fm-ch-fill { height: 100%; width: 80%; background: linear-gradient(90deg, var(--gold), var(--gold-deep)); border-radius: 999px; box-shadow: 0 0 12px var(--gold-glow); } /* Diese Woche head */ .fm-week-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; } .fm-week-title { font-family: var(--font-ui); font-weight: 800; font-size: 17px; color: var(--text); } .fm-week-end { color: var(--gold); font-weight: 700; font-size: 12px; } /* Podium: 3 avatars + bars */ .fm-podium { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: end; gap: 12px; margin-bottom: 14px; min-height: 220px; } .fm-po-col { display: flex; flex-direction: column; align-items: center; gap: 8px; } .fm-po-crown { font-size: 20px; color: var(--gold); } .fm-po-av { width: 66px; height: 66px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 22px; color: #1a1408; position: relative; } .fm-po-1 .fm-po-av { background: linear-gradient(135deg, #fff5cc, var(--gold) 55%, var(--gold-deep)); box-shadow: 0 0 24px var(--gold-glow), inset 0 2px 8px rgba(255,255,255,0.4); width: 86px; height: 86px; font-size: 28px; } .fm-po-2 .fm-po-av { background: linear-gradient(135deg, #d0d4dc, #8b919a 60%, #5a5e66); color: #1a1a1f; } .fm-po-3 .fm-po-av { background: linear-gradient(135deg, #d4a070, #a06030 60%, #6b3c10); } .fm-po-nm { font-weight: 800; color: var(--text); font-size: 14px; letter-spacing: -0.2px; } .fm-po-xp { font-size: 12px; color: var(--gold); font-weight: 700; font-variant-numeric: tabular-nums; } .fm-po-bar { width: 100%; border-radius: 8px 8px 0 0; display: flex; align-items: flex-start; justify-content: center; color: var(--text); font-weight: 800; font-size: 22px; padding-top: 10px; } .fm-po-1 .fm-po-bar { background: linear-gradient(180deg, rgba(245,201,119,0.40), rgba(245,201,119,0.18)); height: 120px; color: var(--gold); } .fm-po-2 .fm-po-bar { background: linear-gradient(180deg, rgba(208,212,220,0.25), rgba(208,212,220,0.08)); height: 84px; color: #b8bcc4; } .fm-po-3 .fm-po-bar { background: linear-gradient(180deg, rgba(212,160,112,0.30), rgba(160,96,48,0.10)); height: 64px; color: #d4a070; } /* Ranks */ .fm-ranks { display: flex; flex-direction: column; gap: 6px; } .fm-rank { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 10px 14px; display: flex; align-items: center; gap: 12px; color: var(--text); font-weight: 700; } .fm-rank-num { font-size: 13px; color: var(--text-muted); width: 16px; } .fm-rank-av { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-elev); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: var(--text); } .fm-rank-nm { flex: 1; font-size: 14px; } .fm-rank-xp { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 700; } .fm-rank-me { background: linear-gradient(135deg, var(--gold-glow), transparent), var(--surface); border-color: var(--border-strong); } .fm-rank-me .fm-rank-num, .fm-rank-me .fm-rank-nm { color: var(--gold); } .fm-rank-me .fm-rank-av { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #1a1408; } /* ╔════════════════════════════════════════════════════════════════════╗ ║ v34.4 REFLEXION — Dein Herz ║ ╚════════════════════════════════════════════════════════════════════╝ */ #page-reflection { padding: 14px 16px 120px; } /* Head row */ .rf34-head-row { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 16px; } .rf34-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-muted); } .rf34-title { font-family: var(--font-ui); font-weight: 800; font-size: 40px; letter-spacing: -1.2px; color: var(--text); line-height: 1.0; margin-top: 4px; } .rf34-title-gold { color: var(--gold); } .rf34-priv { display: inline-flex; align-items: center; gap: 6px; background: rgba(74,222,128,0.12); border: 1px solid rgba(74,222,128,0.40); color: var(--emerald); font-weight: 700; font-size: 12px; padding: 6px 12px; border-radius: 999px; } /* Mood Counter cards */ .rf34-moods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 18px; } .rf34-mood { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 12px 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--text); font-family: var(--font-ui); } .rf34-mc-ic { display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); margin-bottom: 2px; } .rf34-mc-lbl { font-size: 11.5px; font-weight: 600; color: var(--text-muted); } .rf34-mc-num { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; } .rf34-mc-grateful .rf34-mc-ic, .rf34-mc-grateful .rf34-mc-num { color: var(--gold); } .rf34-mc-calm .rf34-mc-ic, .rf34-mc-calm .rf34-mc-num { color: var(--emerald); } .rf34-mc-heavy .rf34-mc-ic, .rf34-mc-heavy .rf34-mc-num { color: var(--rose); } .rf34-mc-new .rf34-mc-ic, .rf34-mc-new .rf34-mc-num { color: var(--lavender); } .rf34-mc-new { background: transparent; border: 1.5px dashed var(--border-strong); } /* Prompts head */ .rf34-prompt-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; } .rf34-prompt-title { font-family: var(--font-ui); font-weight: 800; font-size: 15px; color: var(--text); } .rf34-prompt-meta { font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; } /* Re-style existing rf-prompts to look like Synthesis chips */ #page-reflection .rf-prompts { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: none; margin-bottom: 10px; } #page-reflection .rf-prompts::-webkit-scrollbar { display: none; } #page-reflection .rf-prompt { flex-shrink: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 10px 16px; font-family: var(--font-ui); font-weight: 700; font-size: 13.5px; color: var(--text); white-space: nowrap; } #page-reflection .rf-prompt:first-child, #page-reflection .rf-prompt.is-active { background: linear-gradient(135deg, var(--gold-glow), transparent); border-color: var(--gold); color: var(--gold); } /* Composer / journal (re-use existing rf-paper) */ #page-reflection .rf-paper, #page-reflection .rf-composer, #page-reflection .rf-entry-form { background: var(--surface); border: 1px solid var(--border-strong); border-radius: 22px; padding: 16px 18px; margin-bottom: 14px; } /* ╔════════════════════════════════════════════════════════════════════╗ ║ v34.5 PFAD/LEVEL — Disc + Bar Chart + Breakdown ║ ╚════════════════════════════════════════════════════════════════════╝ */ #page-points { padding: 14px 16px 120px; } /* v75: Legacy-Markup wurde aus HTML entfernt - quick-prayers ist wieder normal sichtbar */ /* Section-Titles im Points sichtbar lassen damit Achievements/Clan ne Headline haben */ /* Head row */ .pf34-head-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .pf34-back, .pf34-share { width: 38px; height: 38px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); color: var(--text); display: inline-flex; align-items: center; justify-content: center; } .pf34-title { flex: 1; text-align: center; font-family: var(--font-ui); font-weight: 800; font-size: 18px; color: var(--text); letter-spacing: -0.3px; } /* Hero */ .pf34-hero { /* v348 (H5/H11): premium Look — kräftigerer Gold-Schein, Gold-Rand, weicher Glow-Schatten */ background: radial-gradient(130% 100% at 0% 0%, rgba(245,201,119,0.18), transparent 56%), linear-gradient(135deg, var(--gold-glow), transparent 55%), var(--surface); border: 1px solid rgba(245,201,119,0.32); border-radius: 22px; padding: 18px; margin-bottom: 14px; position: relative; overflow: hidden; box-shadow: 0 12px 32px -14px rgba(245,201,119,0.28), inset 0 1px 0 rgba(255,255,255,0.07); } .pf34-hero-deco { position: absolute; top: -40px; right: -40px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, var(--gold-glow), transparent 60%); } .pf34-hero-top { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; position: relative; z-index: 1; } .pf34-disc { position: relative; width: 96px; height: 96px; flex-shrink: 0; } .pf34-disc-svg { width: 100%; height: 100%; } .pf34-disc-bg { fill: none; stroke: rgba(244,237,224,0.08); stroke-width: 4; } .pf34-disc-fill { fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 0 6px var(--gold-glow)); transition: stroke-dashoffset 0.6s ease; } .pf34-disc-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; } .pf34-disc-eb { font-size: 9px; font-weight: 800; letter-spacing: 1.8px; color: var(--gold); text-transform: uppercase; } .pf34-disc-num { font-family: var(--font-ui); font-weight: 800; font-size: 42px; line-height: 1.0; color: var(--text); letter-spacing: -1.5px; } .pf34-info { flex: 1; min-width: 0; } .pf34-info-eb { font-size: 10.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-muted); } .pf34-info-name { font-family: var(--font-ui); font-weight: 800; font-size: 28px; line-height: 1.0; letter-spacing: -0.7px; color: var(--text); margin-top: 4px; } .pf34-info-ar { font-family: var(--font-arabic); font-size: 18px; color: var(--gold); margin-top: 2px; } .pf34-xp-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; position: relative; z-index: 1; } .pf34-xp-cur { font-family: var(--font-ui); font-weight: 800; font-size: 22px; color: var(--text); font-variant-numeric: tabular-nums; } .pf34-xp-rem { color: var(--gold); font-weight: 800; font-size: 13px; } .pf34-xp-max { color: var(--text-muted); font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; } .pf34-xp-bar { height: 8px; border-radius: 999px; background: rgba(244,237,224,0.08); overflow: hidden; position: relative; z-index: 1; } .pf34-xp-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--gold), var(--gold-deep)); border-radius: 999px; box-shadow: 0 0 8px var(--gold-glow); transition: width 0.6s ease; } .pf34-xp-meta { font-size: 12px; color: var(--text-muted); margin-top: 8px; text-align: center; position: relative; z-index: 1; } .pf34-next-name { color: var(--lavender); font-weight: 700; } /* Week bar-chart */ .pf34-week { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 16px 18px 12px; margin-bottom: 16px; } .pf34-week-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; } .pf34-week-title { font-family: var(--font-ui); font-weight: 800; font-size: 15px; color: var(--text); } .pf34-week-pill { background: rgba(74,222,128,0.12); border: 1px solid rgba(74,222,128,0.30); color: var(--emerald); font-weight: 800; font-size: 11.5px; padding: 5px 10px; border-radius: 999px; } .pf34-bar-chart { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; height: 140px; padding-bottom: 22px; position: relative; } .pf34-bc-col { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; } .pf34-bc-bar { width: 100%; min-height: 8px; background: var(--emerald); border-radius: 8px 8px 4px 4px; box-shadow: 0 0 12px var(--emerald-glow); } .pf34-bc-col.is-today .pf34-bc-bar { background: var(--gold); box-shadow: 0 0 16px var(--gold-glow); } .pf34-bc-day { font-size: 11px; font-weight: 700; color: var(--text-muted); } .pf34-bc-col.is-today .pf34-bc-day { color: var(--gold); } /* Breakdown */ .pf34-break-head { font-family: var(--font-ui); font-weight: 800; font-size: 17px; color: var(--text); margin-bottom: 10px; } .pf34-breakdown { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .pf34-br-row { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; } .pf34-br-ic { width: 38px; height: 38px; border-radius: 11px; background: var(--surface-elev); border: 1px solid var(--border); color: var(--gold); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; } .pf34-br-name { flex: 1; color: var(--text); font-weight: 800; font-size: 14.5px; } .pf34-br-val { color: var(--emerald); font-weight: 800; font-variant-numeric: tabular-nums; font-size: 14.5px; } .pf34-br-bar { position: absolute; bottom: 0; left: 14px; right: 14px; height: 3px; border-radius: 999px; background: rgba(244,237,224,0.08); overflow: hidden; } .pf34-br-row { position: relative; padding-bottom: 14px; } .pf34-br-fill { height: 100%; width: 0%; background: var(--emerald); border-radius: 999px; box-shadow: 0 0 6px var(--emerald-glow); } /* ╔════════════════════════════════════════════════════════════════════╗ ║ v34.6 ADHKĀR ║ ╚════════════════════════════════════════════════════════════════════╝ */ #page-dua { padding: 14px 16px 120px; } #page-dua .daily-adhkar, #page-dua .dua-search, #page-dua .section-title, #page-dua .dua-cat-grid, #page-dua #duaFavSection { display: none !important; } .ad34-head-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .ad34-title { font-family: var(--font-ui); font-weight: 800; font-size: 30px; letter-spacing: -0.8px; color: var(--text); } .ad34-search-btn { width: 38px; height: 38px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); color: var(--text); display: inline-flex; align-items: center; justify-content: center; } /* Toggle */ .ad34-tog { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: var(--surface-elev); border: 1px solid var(--border); border-radius: 16px; padding: 4px; margin-bottom: 14px; } .ad34-tog-btn { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: transparent; border: none; color: var(--text-muted); font-family: var(--font-ui); } .ad34-tog-btn.is-active { background: var(--surface); color: var(--text); box-shadow: 0 2px 8px rgba(0,0,0,0.30); } .ad34-tog-morning.is-active { color: var(--gold); } .ad34-tog-morning.is-active svg { color: var(--gold); } .ad34-tog-evening.is-active { color: var(--lavender); } .ad34-tog-evening.is-active svg { color: var(--lavender); } .ad34-tog-btn > span { display: flex; flex-direction: column; gap: 2px; text-align: left; } .ad34-tog-lbl { font-weight: 800; font-size: 14px; } .ad34-tog-time { font-size: 10.5px; color: var(--text-muted); font-weight: 600; } /* Progress card */ .ad34-progress { width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 14px 16px; margin-bottom: 14px; display: flex; align-items: center; gap: 14px; } .ad34-pr-ring { position: relative; width: 44px; height: 44px; flex-shrink: 0; } .ad34-pr-ring svg { width: 100%; height: 100%; transform: rotate(0deg); } .ad34-pr-bg { fill: none; stroke: rgba(244,237,224,0.08); stroke-width: 3; } .ad34-pr-fill { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 4px var(--gold-glow)); } .ad34-pr-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: var(--gold); } .ad34-pr-info { flex: 1; min-width: 0; } .ad34-pr-title { color: var(--text); font-weight: 800; font-size: 14.5px; } .ad34-pr-meta { color: var(--text-muted); font-size: 12px; } .ad34-pr-cta { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #1a1408; font-family: var(--font-ui); font-weight: 800; padding: 8px 14px; border-radius: 999px; font-size: 12.5px; box-shadow: 0 4px 14px rgba(245,201,119,0.30); } /* Hero Dhikr */ .ad34-hero { background: var(--surface); border: 1px solid var(--border-strong); border-radius: 22px; padding: 18px; margin-bottom: 14px; position: relative; overflow: hidden; } .ad34-hero::after { content: ""; position: absolute; top: -30px; right: -30px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, var(--gold-glow), transparent 60%); pointer-events: none; } .ad34-hero-eb { font-size: 10.5px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gold); position: relative; z-index: 1; } .ad34-hero-sep { opacity: 0.5; margin: 0 4px; } .ad34-hero-title { font-family: var(--font-ui); font-weight: 800; font-size: 18px; color: var(--text); line-height: 1.25; letter-spacing: -0.3px; margin-top: 6px; position: relative; z-index: 1; } .ad34-hero-ar { font-family: var(--font-arabic); font-size: 22px; color: var(--text); line-height: 2.0; direction: rtl; text-align: right; margin: 12px 0 8px; position: relative; z-index: 1; } .ad34-hero-trans { font-size: 13px; color: var(--gold); font-style: italic; font-weight: 600; margin-bottom: 6px; position: relative; z-index: 1; } .ad34-hero-de { font-size: 13px; color: var(--text-muted); line-height: 1.55; position: relative; z-index: 1; } .ad34-hero-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; position: relative; z-index: 1; } .ad34-hero-rep { font-size: 11.5px; color: var(--text-muted); font-weight: 600; } .ad34-hero-tap { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #1a1408; border: none; font-family: var(--font-ui); font-weight: 800; font-size: 18px; box-shadow: 0 8px 24px rgba(245,201,119,0.40), inset 0 2px 6px rgba(255,235,170,0.5); } /* Next list head */ .ad34-next-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; } .ad34-next-head > :first-child { font-family: var(--font-ui); font-weight: 800; font-size: 15px; color: var(--text); } .ad34-next-meta { font-size: 11.5px; color: var(--text-dim); font-weight: 600; } .ad34-next-list { display: flex; flex-direction: column; gap: 8px; } .ad34-nx { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; color: var(--text); font-weight: 700; font-size: 13.5px; } .ad34-nx-num { background: var(--surface-elev); border: 1px solid var(--border); color: var(--gold); width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; } /* ╔════════════════════════════════════════════════════════════════════╗ ║ v34.7 MUSHAF — Surah header banner ║ ╚════════════════════════════════════════════════════════════════════╝ */ .qd34-head-row { display: flex; align-items: center; gap: 12px; padding: 4px 0 14px; } .qd34-back, .qd34-fav { width: 38px; height: 38px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); color: var(--text); display: inline-flex; align-items: center; justify-content: center; } .qd34-title-wrap { flex: 1; text-align: center; } .qd34-title { font-family: var(--font-ui); font-weight: 800; font-size: 19px; color: var(--text); letter-spacing: -0.3px; } .qd34-sub { font-size: 10.5px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gold); margin-top: 2px; } .qd34-khatm { background: var(--surface); border: 1px solid var(--border-strong); border-radius: 18px; padding: 12px 14px; margin-bottom: 14px; display: flex; align-items: center; gap: 14px; } .qd34-kh-ring { position: relative; width: 44px; height: 44px; flex-shrink: 0; } .qd34-kh-ring svg { width: 100%; height: 100%; } .qd34-kh-bg { fill: none; stroke: rgba(244,237,224,0.08); stroke-width: 3; } .qd34-kh-fill { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 4px var(--gold-glow)); } .qd34-kh-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: var(--gold); } .qd34-kh-info { flex: 1; min-width: 0; } .qd34-kh-title { color: var(--text); font-weight: 800; font-size: 14px; } .qd34-kh-meta { color: var(--text-muted); font-size: 11.5px; } .qd34-kh-plan { background: var(--surface-elev); border: 1px solid var(--border-strong); color: var(--gold); font-family: var(--font-ui); font-weight: 800; padding: 7px 13px; border-radius: 999px; font-size: 12px; } /* ╔════════════════════════════════════════════════════════════════════╗ ║ v34.8 USTĀDH TAWBA — fine tuning: avatar Disc gold + chip row ║ ╚════════════════════════════════════════════════════════════════════╝ */ #page-ustadh .uc-avatar { background: radial-gradient(circle at 35% 32%, #fff5cc, var(--gold) 50%, var(--gold-deep) 100%); box-shadow: 0 4px 14px rgba(245,201,119,0.35); } #page-ustadh .uc-avatar svg { display: none; } #page-ustadh .uc34-bot { background: var(--surface); border: 1px solid var(--border); border-radius: 4px 18px 18px 18px; } #page-ustadh .uc34-bot .cm-greeting { color: var(--text); font-weight: 700; } #page-ustadh .uc34-bot .cm-body { color: var(--text); } /* Mood chip row als Bot-Bubble Erweiterung */ .uc34-chip-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 8px 6px 40px; margin-bottom: 12px; } .uc34-chip { padding: 9px 14px; border-radius: 18px; font-family: var(--font-ui); font-weight: 700; font-size: 13px; border: 1.5px solid; } .uc34-chip-lav { background: rgba(167,139,250,0.12); border-color: rgba(167,139,250,0.40); color: var(--lavender); } .uc34-chip-rose { background: rgba(251,113,133,0.12); border-color: rgba(251,113,133,0.40); color: var(--rose); } .uc34-chip-gold { background: rgba(245,201,119,0.15); border-color: rgba(245,201,119,0.50); color: var(--gold); } /* ╔════════════════════════════════════════════════════════════════════╗ ║ v34.9 BOTTOM NAV polish (icon-only inactive, icon+text active) ║ ╚════════════════════════════════════════════════════════════════════╝ */ .bottom-nav .nav-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px; } .bottom-nav .nav-btn .nav-icon, .bottom-nav .nav-btn svg { color: inherit; } .bottom-nav .nav-btn.active { background: linear-gradient(135deg, var(--gold-glow), transparent); border: 1px solid var(--border-strong); color: var(--gold); } .bottom-nav .nav-btn.active .nav-label { display: inline; font-family: var(--font-ui); font-weight: 800; font-size: 13px; } /* ╔══════════════════════════════════════════════════════════════════╗ ║ v35 ★ FINAL MOBILE POLISH — Bug-Fixes + Premium Production ║ ║ Scrolling · Keyboard · Chat-Glass · Splash · Native-Feel ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* ────────────────────────────────────────────────────────────────── v35.1 GLOBAL FOUNDATION — iOS-Safe Viewport + Smooth Rendering ────────────────────────────────────────────────────────────────── */ :root { /* iOS-safe viewport height (set per JS, fallback 1vh) */ --vh: 1vh; --vh-full: 1vh; --kb-height: 0px; --nav-h: 78px; --nav-pad: 14px; --header-h: 56px; } html, body { /* Echte mobile Höhe via JS-Custom-Property — vermeidet iOS-Safari-Adressleiste-Bug */ min-height: 100vh; min-height: calc(var(--vh, 1vh) * 100); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* No iOS-Bounce */ overscroll-behavior-y: none; /* Prevent text-size adjustment on orientation change */ -webkit-text-size-adjust: 100%; } /* Universal touch tuning */ * { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } /* Allow text selection in text content */ p, span, div, h1, h2, h3, h4, h5, h6, .chat-msg, .cm-body, .ad34-hero-de, .ad34-hero-trans { -webkit-touch-callout: default; } input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; } /* Buttons & links: snappy touch */ button, [role="button"], a, .nav-btn, .mood-pill, .shr-card, .ss-pr, .rf-prompt { touch-action: manipulation; } /* Smooth scrolling globally, but reduced for users who prefer */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ────────────────────────────────────────────────────────────────── v35.2 SCROLL CONTAINERS — Single-Scroll Pattern, Native Feel ────────────────────────────────────────────────────────────────── */ /* Body ist der EINZIGE Haupt-Scroller. Pages selbst scrollen NICHT, außer fullscreen-Overlays wie Chat/Tasbih/Adhkar. */ body { position: relative; background: var(--bg); } main.pages { width: 100%; min-height: calc(var(--vh, 1vh) * 100 - var(--header-h)); } /* Page-Container: no eigener overflow */ .pages .page { overflow: visible; -webkit-overflow-scrolling: auto; } /* Genug Platz am Page-Boden damit Content nicht unter bottom-nav rutscht */ .pages .page { padding-bottom: calc(var(--nav-h) + var(--nav-pad) + env(safe-area-inset-bottom) + 24px); } /* In Fullscreen-Overlays (chat/tasbih) intern scrollen */ #page-ustadh.active { display: flex; flex-direction: column; position: fixed; inset: 0; height: 100%; height: calc(var(--vh, 1vh) * 100); padding-bottom: 0; z-index: 50; background: var(--bg); } #page-ustadh .uc-chat-box { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scroll-behavior: smooth; padding-bottom: calc(env(safe-area-inset-bottom) + 12px); } #page-ustadh .uc-header { flex-shrink: 0; padding-top: max(env(safe-area-inset-top), 8px); } #page-ustadh .uc-input-row { flex-shrink: 0; padding-bottom: max(env(safe-area-inset-bottom), 12px); } /* Tasbih Fullscreen scrollt intern wenn nötig */ .tasbih-fullscreen { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-top: max(env(safe-area-inset-top), 12px); padding-bottom: max(env(safe-area-inset-bottom), 24px); } /* Fullscreens für Fatiha/Adhkar */ .tarteel-mode, .adhkar-fullscreen { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* ────────────────────────────────────────────────────────────────── v35.3 HEADER + BOTTOM-NAV — Sticky, Safe-Area, Glass ────────────────────────────────────────────────────────────────── */ .app-header { position: sticky; top: 0; z-index: 40; padding-top: max(env(safe-area-inset-top), 4px); /* Bei Fullscreen-Pages verstecken */ } /* v334: ohne :has() (iOS-Verzögerung). Sibling-Selektor + tawba-locked-Klasse = beide synchron. */ #page-ustadh.active ~ .app-header, html.tawba-locked .app-header { display: none; } .bottom-nav.bottom-nav { position: fixed; left: 14px; right: 14px; bottom: max(env(safe-area-inset-bottom), 10px); z-index: 45; /* Premium glass */ background: linear-gradient(180deg, rgba(24,22,36,0.92), rgba(13,12,20,0.92)); backdrop-filter: blur(26px) saturate(180%); -webkit-backdrop-filter: blur(26px) saturate(180%); border: 1px solid var(--border-strong); border-radius: 26px; box-shadow: 0 14px 36px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06); padding: 6px 8px; display: flex; gap: 4px; /* Bei Tawba-Fullscreen verstecken (chat hat eigenen input row) */ } /* v46: Bottom-Nav SICHTBAR im Chat (User-Wunsch: normal verlassen können) */ /* body:has(#page-ustadh.active) .bottom-nav { display: none; } -- v46 entfernt */ .bottom-nav .nav-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 8px; border-radius: 18px; color: var(--text-dim); background: transparent; border: none; transition: background 0.2s ease, color 0.2s ease, transform 0.12s ease; font-family: var(--font-ui); font-weight: 700; font-size: 12px; min-height: 44px; /* Apple HIG: min tap target */ } .bottom-nav .nav-btn span:not(.nav-icon), .bottom-nav .nav-btn .nav-label { display: none; } .bottom-nav .nav-btn.active { background: linear-gradient(135deg, var(--gold-glow), transparent 70%), var(--surface); color: var(--gold); box-shadow: inset 0 0 0 1px var(--border-strong); } .bottom-nav .nav-btn.active span:not(.nav-icon), .bottom-nav .nav-btn.active .nav-label { display: inline; } .bottom-nav .nav-btn:active { transform: scale(0.94); } /* ────────────────────────────────────────────────────────────────── v35.4 PAGE TRANSITIONS — Premium fade-slide ────────────────────────────────────────────────────────────────── */ .pages > .page { display: none; animation: none; } .pages > .page.active { display: block; animation: pageEnter 0.34s cubic-bezier(0.22, 1, 0.36, 1) both; will-change: transform, opacity; } @keyframes pageEnter { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } } .pages > .page.is-leaving { animation: pageLeave 0.22s ease-out both; } @keyframes pageLeave { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-6px); } } /* v333 ★ FEED-SPRUNG-FIX: ALLE Seiten-Übergangs-Animationen deaktiviert. Es gab DREI Einblend- Animationen (appPageIn, pageEditorialIn, pageEnter) — alle mit transform: translateY. Genau in diesem Animations-Fenster verwirft iOS die gesetzte Scroll-Position → sichtbarer Sprung. Ohne Animation erscheint jede Seite SOFORT an der richtigen Position. (Override am Dateiende = gewinnt.) */ .pages > .page.active, .pages > .page.is-leaving { animation: none !important; } /* ────────────────────────────────────────────────────────────────── v35.5 SPLASH — Cleaner timing, hard-hide nach Fade ────────────────────────────────────────────────────────────────── */ .splash-screen.splash-v30.hide { opacity: 0; pointer-events: none; transition: opacity 0.7s ease; visibility: hidden; } .splash-v30 { z-index: 9999; /* Mit iOS-safe height arbeiten */ height: 100vh; height: calc(var(--vh-full, 1vh) * 100); } /* ────────────────────────────────────────────────────────────────── v35.6 USTĀDH TAWBA CHAT — Premium Glassmorphism Cinematic ────────────────────────────────────────────────────────────────── */ #page-ustadh { background: radial-gradient(ellipse 100% 60% at 50% 0%, rgba(245,201,119,0.06) 0%, transparent 55%), radial-gradient(ellipse 80% 60% at 50% 100%, rgba(167,139,250,0.04) 0%, transparent 55%), var(--bg); } /* Header glass */ #page-ustadh .uc-header { background: linear-gradient(180deg, rgba(13,12,20,0.92), rgba(13,12,20,0.72)); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border-bottom: 1px solid var(--border); padding: 12px 14px; display: flex; align-items: center; gap: 12px; } /* Bubble micro-animation */ #page-ustadh .chat-msg { animation: msgIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; will-change: transform, opacity; } @keyframes msgIn { 0% { opacity: 0; transform: translateY(8px) scale(0.98); } 100% { opacity: 1; transform: translateY(0) scale(1); } } /* Bot bubble — glass-soft with gold edge */ #page-ustadh .chat-msg.bot { background: linear-gradient(180deg, rgba(244,237,224,0.06), rgba(244,237,224,0.02)), rgba(24,22,36,0.74); border: 1px solid var(--border); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border-radius: 4px 18px 18px 18px; padding: 14px 16px; max-width: 84%; position: relative; box-shadow: 0 8px 24px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.05); } #page-ustadh .chat-msg.bot::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(180deg, rgba(245,201,119,0.30), transparent 60%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } /* User bubble — full gold gradient with dark text */ #page-ustadh .chat-msg.user { background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%); color: #1a1408; border: none; border-radius: 18px 18px 6px 18px; padding: 13px 16px; font-family: var(--font-ui); font-weight: 600; box-shadow: 0 10px 28px rgba(245,201,119,0.30), inset 0 1px 0 rgba(255,255,255,0.25); align-self: flex-end; max-width: 84%; } /* Typing indicator (3-dot pulse) */ #page-ustadh .chat-msg.typing, .uc-typing-dots { display: inline-flex; gap: 4px; background: rgba(24,22,36,0.74); border: 1px solid var(--border); border-radius: 4px 18px 18px 18px; padding: 14px 16px; max-width: 70px; backdrop-filter: blur(20px); } .uc-typing-dots span, #page-ustadh .chat-msg.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: typingPulse 1.4s ease-in-out infinite; display: inline-block; } .uc-typing-dots span:nth-child(2), #page-ustadh .chat-msg.typing span:nth-child(2) { animation-delay: 0.2s; } .uc-typing-dots span:nth-child(3), #page-ustadh .chat-msg.typing span:nth-child(3) { animation-delay: 0.4s; } @keyframes typingPulse { 0%, 100% { opacity: 0.3; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.1); } } /* Input row — anchored at bottom, glass, keyboard-aware */ #page-ustadh .uc-input-row { background: linear-gradient(180deg, transparent 0%, rgba(13,12,20,0.85) 30%, rgba(13,12,20,0.96) 100%); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); padding: 12px 14px max(14px, env(safe-area-inset-bottom)); } #page-ustadh .uc-input-wrap { background: rgba(24,22,36,0.85); border: 1px solid var(--border-strong); border-radius: 999px; padding: 4px 4px 4px 16px; display: flex; align-items: center; gap: 8px; box-shadow: 0 8px 28px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.05); min-height: 56px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } #page-ustadh .uc-input-wrap:focus-within { border-color: var(--gold); box-shadow: 0 8px 28px rgba(0,0,0,0.40), 0 0 0 3px rgba(245,201,119,0.18); } #page-ustadh #ucInput { background: transparent; border: none; color: var(--text); font-family: var(--font-ui); font-size: 15px; flex: 1; padding: 14px 4px; outline: none; } #page-ustadh #ucInput::placeholder { color: var(--text-dim); } #page-ustadh .uc-mic { width: 40px; height: 40px; border-radius: 50%; background: transparent; color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; border: none; } #page-ustadh .uc-send { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #1a1408; border: none; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(245,201,119,0.40), inset 0 1px 0 rgba(255,255,255,0.30); transition: transform 0.15s ease, box-shadow 0.15s ease; } #page-ustadh .uc-send:active { transform: scale(0.92); box-shadow: 0 3px 10px rgba(245,201,119,0.35); } #page-ustadh .uc-send svg { transform: translateX(1px); } /* Message row spacing */ #page-ustadh .uc-msg-row { margin: 12px 0; padding: 0 14px; display: flex; gap: 10px; align-items: flex-end; } /* Mood chip row tighter */ #page-ustadh .uc34-chip-row { padding: 4px 14px 8px 50px; gap: 8px; } /* ────────────────────────────────────────────────────────────────── v35.7 INPUT FIELDS — premium global ────────────────────────────────────────────────────────────────── */ input[type="text"], input[type="search"], input[type="number"], textarea { font-family: var(--font-ui); font-size: 15px; /* iOS: prevent zoom on focus */ } @supports (-webkit-touch-callout: none) { /* iOS-only: input min 16px verhindert Auto-Zoom */ input, textarea, select { font-size: max(16px, 15px); } } /* ────────────────────────────────────────────────────────────────── v35.8 ALL PAGES — Bottom Padding für Floating-Nav ────────────────────────────────────────────────────────────────── */ #page-home, #page-points, #page-family, #page-salat, #page-dua, #page-quran, #page-reflection, #page-calendar { padding-bottom: calc(var(--nav-h) + 22px + env(safe-area-inset-bottom)); } /* ────────────────────────────────────────────────────────────────── v35.9 IMAGE / SVG performance — GPU compositing ────────────────────────────────────────────────────────────────── */ .shh-avatar, .shp-pill, .snp-card, .sh-orb-wrap, .sp-orb-wrap, .tf34-orb, .pf34-disc, .ss-qibla, .fm-podium .fm-po-av { transform: translateZ(0); backface-visibility: hidden; } /* ────────────────────────────────────────────────────────────────── v35.10 OFFLINE BANNER — falls Verbindung weg ────────────────────────────────────────────────────────────────── */ html.is-offline::before { content: "Offline — manche Funktionen sind eingeschränkt"; position: fixed; top: 0; left: 0; right: 0; background: linear-gradient(180deg, var(--rose), #c9425c); color: white; text-align: center; padding: 6px 14px; font-family: var(--font-ui); font-weight: 700; font-size: 12px; z-index: 9998; letter-spacing: 0.3px; } html.is-offline body { padding-top: 28px; } /* ────────────────────────────────────────────────────────────────── v35.11 KEYBOARD-AWARE — wenn Tastatur offen ist ────────────────────────────────────────────────────────────────── */ html.kb-open .bottom-nav { display: none; } html.kb-open #page-ustadh .uc-input-row { /* Sticky direct over keyboard */ position: relative; bottom: 0; } html.kb-open .pages .page { padding-bottom: calc(var(--kb-height, 0px) + 24px); } /* ────────────────────────────────────────────────────────────────── v35.12 BOTTOM-NAV smarter Anzeige (versteckt in Fullscreens) ────────────────────────────────────────────────────────────────── */ .tasbih-fullscreen.show ~ .bottom-nav, .tarteel-mode.show ~ .bottom-nav, .adhkar-fullscreen.show ~ .bottom-nav, .onboard-overlay[style*="flex"] ~ .bottom-nav { display: none !important; } /* ────────────────────────────────────────────────────────────────── v35.13 SCROLLBAR — Webkit hidden everywhere (mobile-clean) ────────────────────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 0px; height: 0px; } * { scrollbar-width: none; -ms-overflow-style: none; } /* ╔══════════════════════════════════════════════════════════════════╗ ║ v36 ★ HABIT-FEED + PREMIUM-LOCK + ONBOARDING-HABIT-STEP ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* ──────────────────────────────────────────────────────────────── v36.1 HABIT-FEED auf Home — Streak-Driver ──────────────────────────────────────────────────────────────── */ .hb-feed { background: var(--surface); border: 1px solid var(--border-strong); border-radius: 22px; padding: 16px 16px 12px; margin-top: 2px; position: relative; overflow: hidden; } .hb-feed::before { content: ""; position: absolute; top: -30px; right: -30px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, var(--emerald-glow), transparent 65%); pointer-events: none; } .hb-feed-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; position: relative; z-index: 1; } .hb-feed-title { font-family: var(--font-ui); font-weight: 800; font-size: 17px; color: var(--text); letter-spacing: -0.3px; } .hb-feed-count { font-size: 13px; color: var(--gold); font-weight: 800; font-variant-numeric: tabular-nums; } .hb-list { display: flex; flex-direction: column; gap: 8px; position: relative; z-index: 1; } .hb-item { width: 100%; text-align: left; background: var(--surface-elev); border: 1px solid var(--border); border-radius: 14px; padding: 10px 12px; display: flex; align-items: center; gap: 12px; color: var(--text); font-family: var(--font-ui); transition: background 0.2s ease, border-color 0.2s ease, transform 0.12s ease; } .hb-item:active { transform: scale(0.98); } .hb-check { width: 28px; height: 28px; border-radius: 8px; background: rgba(244,237,224,0.05); border: 1.5px solid var(--border-strong); display: inline-flex; align-items: center; justify-content: center; color: transparent; flex-shrink: 0; transition: all 0.2s ease; } .hb-item.is-done .hb-check { background: var(--emerald); border-color: var(--emerald); color: #052e10; box-shadow: 0 0 14px var(--emerald-glow); } .hb-item.is-done { background: linear-gradient(135deg, rgba(74,222,128,0.06), transparent 70%), var(--surface-elev); border-color: rgba(74,222,128,0.30); } .hb-item.is-done .hb-text strong { color: var(--emerald); text-decoration: line-through; text-decoration-color: rgba(74,222,128,0.5); text-decoration-thickness: 1px; } .hb-text { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; } .hb-text strong { font-size: 14.5px; font-weight: 800; color: var(--text); letter-spacing: -0.2px; } .hb-text span { font-size: 11.5px; color: var(--text-muted); } .hb-arrow { color: var(--text-dim); flex-shrink: 0; } .hb-add { width: 100%; margin-top: 10px; background: transparent; border: 1.5px dashed var(--border-strong); border-radius: 14px; padding: 10px; color: var(--gold); font-family: var(--font-ui); font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; position: relative; z-index: 1; } .hb-add:active { transform: scale(0.98); background: rgba(245,201,119,0.05); } /* ──────────────────────────────────────────────────────────────── v36.2 ONBOARDING — Habit-Step ──────────────────────────────────────────────────────────────── */ .ob-sub-hint { display: inline-block; margin-top: 4px; font-size: 11.5px; color: var(--gold); font-weight: 700; letter-spacing: 0.3px; } .ob-habits { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow-y: auto; margin: 14px 0 12px; padding-right: 4px; } .ob-habit { width: 100%; text-align: left; background: var(--surface); border: 1.5px solid var(--border); border-radius: 14px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; color: var(--text); font-family: var(--font-ui); position: relative; transition: all 0.2s ease; } .ob-habit.is-selected { background: linear-gradient(135deg, var(--gold-glow), transparent 60%), var(--surface); border-color: var(--gold); } .ob-habit:active { transform: scale(0.98); } .ob-habit-ic { width: 36px; height: 36px; border-radius: 11px; background: var(--surface-elev); display: inline-flex; align-items: center; justify-content: center; color: var(--gold); flex-shrink: 0; } .ob-habit.is-selected .ob-habit-ic { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #1a1408; } .ob-habit-text { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; } .ob-habit-text strong { font-size: 14.5px; font-weight: 800; color: var(--text); letter-spacing: -0.2px; } .ob-habit-text span { font-size: 11.5px; color: var(--text-muted); } .ob-habit-plus { opacity: 0.7; } .ob-plus-badge { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #1a1408; font-size: 9px; font-weight: 800; letter-spacing: 1.2px; padding: 3px 7px; border-radius: 6px; flex-shrink: 0; } .ob-habit-count { text-align: center; font-size: 12px; font-weight: 700; color: var(--gold); margin-bottom: 4px; } .ob-btn.is-disabled { opacity: 0.4; pointer-events: none; } /* ──────────────────────────────────────────────────────────────── v36.3 PREMIUM-MODAL — Conversion-Driver ──────────────────────────────────────────────────────────────── */ .premium-modal { position: fixed; inset: 0; z-index: 9500; display: flex; align-items: flex-end; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .premium-modal.is-open { opacity: 1; pointer-events: auto; } .pm-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.65); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .pm-card { position: relative; width: 100%; max-width: 460px; background: linear-gradient(180deg, rgba(245,201,119,0.10) 0%, transparent 30%), var(--surface); border-top: 1px solid var(--border-strong); border-radius: 28px 28px 0 0; padding: 30px 22px max(34px, env(safe-area-inset-bottom)); color: var(--text); transform: translateY(100%); transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1); font-family: var(--font-ui); } .premium-modal.is-open .pm-card { transform: translateY(0); } .pm-close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-elev); border: 1px solid var(--border); color: var(--text-muted); font-size: 22px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .pm-crown { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #1a1408; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; box-shadow: 0 8px 24px rgba(245,201,119,0.40), inset 0 2px 6px rgba(255,235,170,0.50); } .pm-title { font-size: 30px; font-weight: 800; letter-spacing: -0.7px; color: var(--text); } .pm-sub { font-size: 14px; color: var(--gold); font-weight: 700; margin-top: 4px; margin-bottom: 18px; } .pm-perks { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 10px; } .pm-perks li { font-size: 14px; color: var(--text); line-height: 1.45; } .pm-price { background: linear-gradient(135deg, var(--gold-glow), transparent 80%); border: 1px solid var(--border-strong); border-radius: 16px; padding: 14px 18px; margin-bottom: 14px; display: flex; align-items: baseline; gap: 8px; } .pm-price-main { font-size: 28px; font-weight: 800; color: var(--gold); letter-spacing: -0.7px; } .pm-price-meta { font-size: 12.5px; color: var(--text-muted); } .pm-cta { width: 100%; background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #1a1408; border: none; height: 56px; border-radius: 18px; font-family: var(--font-ui); font-weight: 800; font-size: 16px; box-shadow: 0 10px 26px rgba(245,201,119,0.40), inset 0 1px 0 rgba(255,255,255,0.30); margin-bottom: 10px; } .pm-cta:active { transform: scale(0.98); } .pm-later { width: 100%; background: transparent; border: none; color: var(--text-muted); font-family: var(--font-ui); font-weight: 600; font-size: 13.5px; padding: 12px; } /* ──────────────────────────────────────────────────────────────── v36.4 HABIT-PICKER MODAL (Add-Habit Sheet) ──────────────────────────────────────────────────────────────── */ .hp-modal { position: fixed; inset: 0; z-index: 9400; display: flex; align-items: flex-end; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .hp-modal.is-open { opacity: 1; pointer-events: auto; } .hp-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .hp-sheet { position: relative; width: 100%; max-width: 460px; background: var(--surface); border-top: 1px solid var(--border-strong); border-radius: 24px 24px 0 0; padding: 12px 18px max(24px, env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1); font-family: var(--font-ui); } .hp-modal.is-open .hp-sheet { transform: translateY(0); } .hp-grab { width: 40px; height: 4px; border-radius: 2px; background: var(--border-strong); margin: 0 auto 16px; } .hp-title { font-size: 18px; font-weight: 800; color: var(--text); margin-bottom: 14px; } .hp-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .hp-item { background: var(--surface-elev); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; color: var(--text); font-family: var(--font-ui); text-align: left; } .hp-item .hp-text { flex: 1; display: flex; flex-direction: column; gap: 1px; } .hp-item .hp-text strong { font-size: 14.5px; font-weight: 800; } .hp-item .hp-text span { font-size: 11.5px; color: var(--text-muted); } .hp-item:not(.is-locked) svg { color: var(--gold); } .hp-item.is-locked { opacity: 0.65; } .hp-cancel { width: 100%; background: var(--surface-elev); border: 1px solid var(--border); color: var(--text); border-radius: 14px; padding: 12px; font-family: var(--font-ui); font-weight: 700; font-size: 14px; } /* ╔══════════════════════════════════════════════════════════════════╗ ║ v38 ★ SCROLL HOTFIX + Back-Navigation Polish ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* v38.1 — GUARANTEE BODY SCROLL works (defensive) */ html { height: auto; } html, body { /* Vertical scroll must always be available */ overflow-x: hidden; overflow-y: auto !important; height: auto; min-height: 100vh; min-height: calc(var(--vh, 1vh) * 100); touch-action: pan-y; } /* v38.2 — Pages dürfen nicht auf 100vh festgenagelt sein außer Tawba */ .pages, main.pages { overflow: visible !important; height: auto !important; min-height: auto; } .pages .page:not(#page-ustadh) { overflow: visible; height: auto; min-height: auto; } /* v38.3 — Tawba Fullscreen bleibt fixed - aber mit klarer Back-Logik */ #page-ustadh .uc-back { /* Visual hint: ist ein NAV-Button, nicht nur ein Icon */ cursor: pointer; } /* v38.4 — Sicherstellen dass NICHTS am Body-Scroll hängen bleibt */ body.modal-open { overflow: hidden; position: fixed; width: 100%; } /* v38.5 — Touch-action für Scroll-Container */ .uc-chat-box, .surah-list, .dua-list, .tasbih-fullscreen, .tarteel-mode, .adhkar-fullscreen { touch-action: pan-y; } /* v38.6 — Wenn Habit-Feed-Modal/Premium-Modal offen ist, Body NICHT locken (sonst kann der User nicht durch die Modal-Sheet scrollen wenn nötig) */ .premium-modal.is-open ~ body, .hp-modal.is-open ~ body { overflow: hidden; } /* ╔══════════════════════════════════════════════════════════════════╗ ║ v40 ★ PREMIUM CINEMATIC — Vollmond / Journey-Hero / Stern-Sheet ║ ║ Dark mystisch · Glassmorphism · WhatsApp-Chat · Family-Premium ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* ──────────────────────────────────────────────────────────────── v40.1 SPLASH — Vollmond, dunkler, cinematic ──────────────────────────────────────────────────────────────── */ .splash-v30 { background: radial-gradient(ellipse 90% 60% at 50% 35%, rgba(245,201,119,0.12) 0%, transparent 55%), radial-gradient(ellipse 70% 50% at 50% 80%, rgba(167,139,250,0.05) 0%, transparent 60%), linear-gradient(180deg, #04050a 0%, #060710 50%, #03040a 100%); } .splash-v30 .sp-orb-wrap { filter: drop-shadow(0 0 60px rgba(245,201,119,0.30)); } .splash-v30 .sp-orb-halo-outer { background: radial-gradient(circle, rgba(245,201,119,0.18) 0%, transparent 65%); } .splash-v30 .sp-orb-halo-inner { background: radial-gradient(circle, rgba(245,201,119,0.08) 0%, transparent 70%); } .splash-v30 .sp-stars span, .splash-v30 .sp-particles i { filter: blur(0.4px); } .splash-v30 .sp-brand-sabr { font-family: var(--font-display, "Fraunces", serif); font-weight: 800; letter-spacing: -1px; color: var(--text); } /* ──────────────────────────────────────────────────────────────── v40.2 HOME — Journey-Hero + Ayah-Card (statt Habit-Feed) ──────────────────────────────────────────────────────────────── */ /* Habit-Feed komplett verstecken (Legacy in DOM falls noch da) */ .hb-feed { display: none !important; } .jh-card { background: linear-gradient(135deg, var(--gold-glow), transparent 55%), linear-gradient(180deg, rgba(36,28,18,0.85), rgba(20,16,12,0.95)); border: 1px solid var(--border-strong); border-radius: 24px; padding: 22px 22px 20px; position: relative; overflow: hidden; margin-top: 2px; box-shadow: 0 14px 36px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.06); } .jh-deco { position: absolute; top: -50px; right: -50px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, var(--gold-glow), transparent 60%); pointer-events: none; } .jh-eyebrow { font-size: 10.5px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; color: var(--gold); position: relative; z-index: 1; } .jh-goal { font-family: var(--font-ui); font-weight: 800; font-size: 24px; line-height: 1.15; letter-spacing: -0.6px; color: var(--text); margin: 6px 0 16px; position: relative; z-index: 1; } .jh-progress-row { display: flex; align-items: baseline; gap: 14px; margin-bottom: 12px; position: relative; z-index: 1; } .jh-progress-num { font-family: var(--font-ui); font-weight: 800; font-size: 64px; line-height: 1.0; letter-spacing: -2.5px; color: var(--gold); font-variant-numeric: tabular-nums; text-shadow: 0 0 24px var(--gold-glow); } .jh-progress-meta { font-size: 13px; color: var(--text-muted); font-weight: 600; line-height: 1.35; } .jh-progress-sub { color: var(--text); font-weight: 500; opacity: 0.85; } .jh-bar { height: 8px; border-radius: 999px; background: rgba(244,237,224,0.08); overflow: hidden; position: relative; z-index: 1; } .jh-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--gold), var(--gold-deep)); border-radius: 999px; box-shadow: 0 0 10px var(--gold-glow); transition: width 0.6s cubic-bezier(0.22,1,0.36,1); } .jh-bar-meta { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--text-muted); font-weight: 600; margin-top: 8px; position: relative; z-index: 1; } .jh-next-lvl .gold { color: var(--gold); font-weight: 700; } /* Ayah-Card */ .ayah-card { background: radial-gradient(ellipse 100% 80% at 100% 0%, rgba(167,139,250,0.10), transparent 60%), var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 18px 20px 20px; margin-top: 14px; position: relative; } .ayah-eyebrow { font-size: 10.5px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--lavender); } .ayah-ar { font-family: var(--font-arabic); font-size: 26px; line-height: 1.9; color: var(--text); direction: rtl; text-align: right; margin: 12px 0 10px; } .ayah-de { font-size: 14.5px; color: var(--text-muted); line-height: 1.55; font-style: italic; } .ayah-ref { font-size: 11px; font-weight: 800; color: var(--gold); letter-spacing: 1.4px; text-transform: uppercase; margin-top: 8px; } /* ──────────────────────────────────────────────────────────────── v40.3 ONBOARDING — Journey-Goal-Cards (statt Habits) ──────────────────────────────────────────────────────────────── */ .ob-goals-v40 { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 10px; } .ob-goal-card { width: 100%; text-align: left; background: var(--surface); border: 1.5px solid var(--border); border-radius: 16px; padding: 14px 16px; display: flex; align-items: center; gap: 14px; color: var(--text); font-family: var(--font-ui); transition: all 0.2s ease; } .ob-goal-card.is-selected { background: linear-gradient(135deg, var(--gold-glow), transparent 60%), var(--surface); border-color: var(--gold); box-shadow: 0 8px 22px rgba(245,201,119,0.18); } .ob-goal-card:active { transform: scale(0.98); } .ob-goal-ic { width: 42px; height: 42px; border-radius: 14px; background: var(--surface-elev); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; } .ob-goal-card.is-selected .ob-goal-ic { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); } .ob-goal-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ob-goal-text strong { font-size: 15px; font-weight: 800; color: var(--text); letter-spacing: -0.2px; } .ob-goal-text span { font-size: 12px; color: var(--text-muted); } .ob-motivation { width: 100%; background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: 14px; padding: 12px 16px; font-family: var(--font-ui); font-size: 14px; margin-top: 4px; } .ob-motivation::placeholder { color: var(--text-dim); } /* ──────────────────────────────────────────────────────────────── v40.4 HEADER STERN-XP — Premium Pill ──────────────────────────────────────────────────────────────── */ .header-xp { background: linear-gradient(135deg, var(--gold-glow), transparent 80%); border: 1px solid var(--border-strong); color: var(--gold); border-radius: 999px; padding: 7px 12px 7px 10px; font-family: var(--font-ui); font-weight: 800; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 4px 12px rgba(245,201,119,0.18); transition: transform 0.16s ease, box-shadow 0.16s ease; } .header-xp:active { transform: scale(0.94); } .header-xp-star { color: var(--gold); filter: drop-shadow(0 0 4px var(--gold-glow)); } /* ──────────────────────────────────────────────────────────────── v40.5 POINTS-SHEET — Bottom-Sheet wenn Stern getippt ──────────────────────────────────────────────────────────────── */ .pts-sheet-wrap { position: fixed; inset: 0; z-index: 9400; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .pts-sheet-wrap.is-open { opacity: 1; pointer-events: auto; } .pts-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.65); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .pts-sheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--bg); border-top: 1px solid var(--border-strong); border-radius: 26px 26px 0 0; height: 88vh; height: calc(var(--vh, 1vh) * 88); display: flex; flex-direction: column; transform: translateY(100%); transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1); box-shadow: 0 -20px 50px rgba(0,0,0,0.55); } .pts-sheet-wrap.is-open .pts-sheet { transform: translateY(0); } .pts-sheet-head { position: relative; padding: 10px 16px 6px; flex-shrink: 0; } .pts-grab { width: 40px; height: 4px; border-radius: 2px; background: var(--border-strong); margin: 0 auto 6px; } .pts-close { position: absolute; top: 12px; right: 14px; width: 36px; height: 36px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); color: var(--text); display: inline-flex; align-items: center; justify-content: center; } .pts-sheet-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 0 14px max(20px, env(safe-area-inset-bottom)); } .pts-sheet-body .page.pts-inline { display: block !important; position: static !important; padding-bottom: 0 !important; animation: none !important; } /* Hide page-points from main nav since it's now a sheet */ #page-points:not(.pts-inline) { display: none !important; } /* ──────────────────────────────────────────────────────────────── v40.6 CHAT — WhatsApp/iMessage Style (Bubbles + Input + Timing) ──────────────────────────────────────────────────────────────── */ #page-ustadh .uc-chat-box { background: radial-gradient(ellipse 100% 60% at 50% 0%, rgba(245,201,119,0.04) 0%, transparent 50%), var(--bg); padding: 14px 14px 24px; } /* Bubble base */ #page-ustadh .chat-msg { margin: 4px 0; padding: 11px 15px 9px; max-width: 78%; font-size: 15px; line-height: 1.42; font-family: var(--font-ui); position: relative; word-wrap: break-word; letter-spacing: -0.05px; } #page-ustadh .chat-msg.bot { background: rgba(28,26,40,0.92); border: 1px solid rgba(245,201,119,0.10); color: var(--text); border-radius: 18px 18px 18px 4px; align-self: flex-start; box-shadow: 0 4px 14px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.04); } #page-ustadh .chat-msg.user { background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%); color: #1a1408; border: none; border-radius: 18px 18px 4px 18px; align-self: flex-end; margin-left: auto; font-weight: 600; box-shadow: 0 6px 18px rgba(245,201,119,0.30), inset 0 1px 0 rgba(255,255,255,0.25); } /* iMessage-style: timestamp inside, sehr small + opacity */ #page-ustadh .chat-msg .cm-time { display: block; font-size: 10.5px; font-weight: 500; margin-top: 4px; opacity: 0.55; letter-spacing: 0.1px; } #page-ustadh .chat-msg.user .cm-time { color: rgba(26,20,8,0.75); text-align: right; } /* Avatar nur einmal pro Gruppe — wenn nicht erste, kein Avatar */ #page-ustadh .uc-msg-row { margin: 8px 0; padding: 0; display: flex; gap: 8px; align-items: flex-end; } #page-ustadh .uc-msg-avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--gold-deep)); flex-shrink: 0; box-shadow: 0 0 12px var(--gold-glow); margin-bottom: 4px; } #page-ustadh .uc-msg-avatar svg { display: none; } /* WhatsApp-style typing indicator */ .uc-typing-dots, #page-ustadh .chat-msg.typing { background: rgba(28,26,40,0.92); border-radius: 18px 18px 18px 4px; padding: 14px 18px; min-width: 56px; max-width: 70px; display: inline-flex; gap: 5px; align-items: center; border: 1px solid rgba(245,201,119,0.08); } .uc-typing-dots span, #page-ustadh .chat-msg.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); animation: typingBounce 1.2s ease-in-out infinite; display: inline-block; } .uc-typing-dots span:nth-child(2), #page-ustadh .chat-msg.typing span:nth-child(2) { animation-delay: 0.15s; } .uc-typing-dots span:nth-child(3), #page-ustadh .chat-msg.typing span:nth-child(3) { animation-delay: 0.3s; } @keyframes typingBounce { 0%, 100% { opacity: 0.35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } } /* Input bar — ChatGPT mobile style: rounded pill, send-button modern */ #page-ustadh .uc-input-row { background: linear-gradient(180deg, transparent 0%, rgba(13,12,20,0.90) 30%, rgba(13,12,20,0.98) 100%); padding: 10px 14px max(14px, env(safe-area-inset-bottom)); } #page-ustadh .uc-input-wrap { background: rgba(32,28,40,0.92); border: 1px solid rgba(245,201,119,0.20); border-radius: 28px; padding: 6px 6px 6px 18px; display: flex; align-items: center; gap: 8px; backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); min-height: 56px; box-shadow: 0 10px 30px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.06); transition: border-color 0.2s ease, box-shadow 0.2s ease; } #page-ustadh .uc-input-wrap:focus-within { border-color: var(--gold); box-shadow: 0 10px 30px rgba(0,0,0,0.45), 0 0 0 3px rgba(245,201,119,0.16); } #page-ustadh #ucInput { background: transparent; border: none; color: var(--text); font-family: var(--font-ui); font-size: 15.5px; flex: 1; padding: 13px 4px; outline: none; font-weight: 500; } #page-ustadh #ucInput::placeholder { color: var(--text-dim); font-weight: 500; } #page-ustadh .uc-mic { width: 40px; height: 40px; border-radius: 50%; background: transparent; color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; border: none; transition: color 0.15s ease, background 0.15s ease; } #page-ustadh .uc-mic:active { color: var(--gold); background: rgba(245,201,119,0.10); } #page-ustadh .uc-send { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #1a1408; border: none; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(245,201,119,0.40), inset 0 1px 0 rgba(255,255,255,0.30); transition: transform 0.15s ease, box-shadow 0.15s ease; } #page-ustadh .uc-send:active { transform: scale(0.90); box-shadow: 0 2px 8px rgba(245,201,119,0.30); } /* Date-Chip / Today Marker — iMessage style */ #page-ustadh .uc-date-chip { text-align: center; font-size: 11px; color: var(--text-dim); font-weight: 600; letter-spacing: 0.4px; margin: 14px 0 8px; text-transform: none; background: transparent; border: none; } /* ──────────────────────────────────────────────────────────────── v40.7 FAMILY LEADERBOARD POLISH — Premium Cards ──────────────────────────────────────────────────────────────── */ #page-family .fm-podium { margin-bottom: 18px; } #page-family .fm-po-av { /* deeper shadow, better stand */ box-shadow: 0 12px 28px rgba(0,0,0,0.45), inset 0 2px 6px rgba(255,255,255,0.30); } #page-family .fm-po-1 .fm-po-av { /* gold disc grösser, mit halo */ box-shadow: 0 0 32px rgba(245,201,119,0.45), 0 12px 28px rgba(0,0,0,0.50), inset 0 3px 8px rgba(255,255,255,0.40); } #page-family .fm-po-bar { /* glass + inset highlight */ border: 1px solid rgba(255,255,255,0.05); border-radius: 10px 10px 0 0; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); } /* Ranks-Liste premium cards */ #page-family .fm-rank { background: linear-gradient(180deg, rgba(36,32,48,0.78), rgba(28,24,40,0.92)); border: 1px solid var(--border); border-radius: 16px; padding: 11px 14px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 4px 14px rgba(0,0,0,0.25); transition: transform 0.14s ease; } #page-family .fm-rank:active { transform: scale(0.98); } #page-family .fm-rank-num { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-elev); border-radius: 50%; color: var(--text-muted); font-weight: 800; font-size: 11px; } #page-family .fm-rank-me { background: linear-gradient(135deg, var(--gold-glow), transparent 70%), linear-gradient(180deg, rgba(36,32,48,0.85), rgba(28,24,40,0.95)); border: 1px solid rgba(245,201,119,0.40); box-shadow: 0 8px 24px rgba(245,201,119,0.15), 0 4px 14px rgba(0,0,0,0.25); } #page-family .fm-rank-me .fm-rank-num { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #1a1408; } /* Tournament Card upgrade */ #page-family .tournament-card, #page-family .family-tasbih-card, #page-family .sadaqah-card, #page-family .top-performer { background: linear-gradient(180deg, rgba(36,32,48,0.85), rgba(24,22,36,0.95)); border: 1px solid var(--border-strong); border-radius: 20px; padding: 16px 18px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 10px 30px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.05); margin-bottom: 12px; } /* ──────────────────────────────────────────────────────────────── v40.8 NAVIGATION FIX — Touch responsiveness ──────────────────────────────────────────────────────────────── */ .bottom-nav .nav-btn { /* Ensure proper tap target + no double-tap issues */ position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; -webkit-user-select: none; } .bottom-nav .nav-btn::after { /* Larger invisible tap area */ content: ""; position: absolute; inset: -6px; border-radius: inherit; } /* Nav-4 layout (war nav-5 vorher) */ .bottom-nav.nav-4 { display: flex; gap: 4px; } .bottom-nav.nav-4 .nav-btn { flex: 1; min-width: 0; } /* ──────────────────────────────────────────────────────────────── v40.9 GLOBAL DARK POLISH — kein generisches Weiß ──────────────────────────────────────────────────────────────── */ body { background: radial-gradient(ellipse 90% 50% at 50% 0%, rgba(245,201,119,0.04) 0%, transparent 55%), radial-gradient(ellipse 70% 50% at 50% 100%, rgba(167,139,250,0.025) 0%, transparent 60%), #0a0911; } .app-header { background: linear-gradient(180deg, rgba(10,9,17,0.92), rgba(10,9,17,0.70)); border-bottom: 1px solid rgba(245,201,119,0.06); } /* ╔══════════════════════════════════════════════════════════════════╗ ║ v41 ★ Nav-Labels immer + Tawba Chat-Fix + Polish ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* v41.1 — Bottom-Nav: Labels IMMER sichtbar (auch inaktive) */ .bottom-nav .nav-btn span:not(.nav-icon), .bottom-nav .nav-btn .nav-label { display: inline !important; font-size: 10.5px; font-weight: 700; margin-top: 2px; letter-spacing: 0.1px; opacity: 0.78; } .bottom-nav .nav-btn.active span:not(.nav-icon), .bottom-nav .nav-btn.active .nav-label { opacity: 1; font-weight: 800; } /* Nav-Btn neu: icon oben, label unten */ .bottom-nav .nav-btn { flex-direction: column !important; gap: 3px !important; padding: 8px 4px !important; } /* v41.2 — Tawba Chat: ustadhChat IMMER sichtbar (default visible) Inline-style="display:none" wird per JS überschrieben sobald renderUstadh läuft. Defensive: wenn JS bricht, chat trotzdem zeigen. */ #ustadhChat { display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%; } #page-ustadh.active #ustadhChat[style*="none"] { /* nur wenn JS explizit hidden gesetzt hat - kein override */ } /* v41.3 — Tawba intro: kürzer, schöner */ .tawba-intro { z-index: 60; /* unter splash-v30 (9999) aber über page-content */ } /* v41.4 — 3-Punkte-Typing Indikator (uc-typing class, bei aktivem Stream) */ .uc-typing { display: inline-flex; gap: 6px; align-items: center; background: rgba(28,26,40,0.92); border: 1px solid rgba(245,201,119,0.12); border-radius: 18px 18px 18px 4px; padding: 14px 18px; width: fit-content; margin: 8px 14px; align-self: flex-start; box-shadow: 0 4px 14px rgba(0,0,0,0.25); animation: typingFadeIn 0.3s ease both; } .uc-typing span { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); display: inline-block; animation: typingBounce 1.2s ease-in-out infinite; opacity: 0.5; } .uc-typing span:nth-child(2) { animation-delay: 0.15s; } .uc-typing span:nth-child(3) { animation-delay: 0.30s; } @keyframes typingFadeIn { 0% { opacity: 0; transform: translateY(4px); } 100% { opacity: 1; transform: translateY(0); } } /* v41.5 — Streaming-Bubble (während AI Text kommt) - kleiner cursor blink */ .chat-msg .cm-stream::after { content: "▌"; display: inline-block; color: var(--gold); animation: cursorBlink 0.8s steps(2) infinite; margin-left: 2px; opacity: 0.7; } .chat-msg.is-done .cm-stream::after { display: none; } @keyframes cursorBlink { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } /* v41.6 — Home gap nach Removal von smh-row sauber */ .sabr-home { gap: 16px; } /* ╔══════════════════════════════════════════════════════════════════╗ ║ v42 ★ MAUER + Touch-Fixes + Tawba clean + Bug-Repair ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* ──────────────────────────────────────────────────────────────── v42.1 MAUER — Tagebuch / Daily-Notes-Stream auf Home ──────────────────────────────────────────────────────────────── */ .mauer-card { background: radial-gradient(ellipse 80% 60% at 100% 0%, rgba(167,139,250,0.08), transparent 65%), linear-gradient(180deg, rgba(28,24,40,0.85), rgba(20,18,32,0.95)); border: 1px solid var(--border); border-radius: 22px; padding: 18px 18px 14px; margin-top: 2px; box-shadow: 0 10px 30px rgba(0,0,0,0.30); } .mauer-head { margin-bottom: 12px; } .mauer-title { font-family: var(--font-ui); font-weight: 800; font-size: 17px; letter-spacing: -0.3px; color: var(--text); } .mauer-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; } .mauer-input-row { display: flex; align-items: center; gap: 8px; background: rgba(36,32,48,0.85); border: 1px solid var(--border); border-radius: 16px; padding: 4px 4px 4px 14px; margin-bottom: 12px; min-height: 48px; transition: border-color 0.18s ease, box-shadow 0.18s ease; } .mauer-input-row:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(245,201,119,0.16); } #mauerInput { background: transparent; border: none; color: var(--text); font-family: var(--font-ui); font-size: 14.5px; flex: 1; padding: 10px 4px; outline: none; } #mauerInput::placeholder { color: var(--text-dim); } .mauer-send { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #1a1408; border: none; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(245,201,119,0.35); transition: transform 0.14s ease; } .mauer-send:active { transform: scale(0.90); } .mauer-send svg { transform: translateX(1px); } .mauer-stream { display: flex; flex-direction: column; gap: 8px; } .mauer-empty { text-align: center; padding: 16px 4px; color: var(--text-dim); font-size: 13px; font-style: italic; } .mauer-entry { background: rgba(36,32,48,0.65); border: 1px solid rgba(245,201,119,0.08); border-radius: 14px; padding: 11px 14px 9px; animation: mauerIn 0.32s cubic-bezier(0.22,1,0.36,1) both; } @keyframes mauerIn { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: translateY(0); } } .mauer-entry-text { font-size: 14px; color: var(--text); line-height: 1.45; font-weight: 500; word-wrap: break-word; white-space: pre-wrap; } .mauer-entry-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; } .mauer-entry-time { font-size: 11px; color: var(--text-dim); font-weight: 600; } .mauer-entry-del { background: transparent; border: none; color: var(--text-dim); padding: 4px 6px; border-radius: 8px; opacity: 0.5; transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease; } .mauer-entry-del:hover, .mauer-entry-del:active { opacity: 1; color: var(--rose); background: rgba(251,113,133,0.10); } /* ──────────────────────────────────────────────────────────────── v42.2 CLICK-BUGS: Z-Index + Pointer-Events Audit ──────────────────────────────────────────────────────────────── */ /* Bottom-Nav z-index sicherstellen */ .bottom-nav.bottom-nav { z-index: 50; } .bottom-nav .nav-btn { pointer-events: auto !important; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } /* App-Header: keine pointer-events:none Konflikte */ .app-header { z-index: 45; pointer-events: auto; } /* Page-Content darf nicht über Nav rutschen */ .pages > .page.active { isolation: isolate; pointer-events: auto; } /* Form-Inputs IMMER klickbar */ input, textarea, button, [role="button"] { pointer-events: auto !important; } /* Mood-Pills + Mood-Card komplett ausblenden (war v42-Entfernung) */ .mood-card, .mood-pill, .smh-row, .uc34-chip-row, .uc34-chip { display: none !important; } /* v42.3 — Achievements-Strip + Home-Streak ausblenden (auf Home) */ #page-home .achievements-strip, #page-home .home-streak, #page-home .section-title { display: none !important; } /* ──────────────────────────────────────────────────────────────── v42.4 CALENDAR — Wochen-Tabs sicher klickbar + cleaner ──────────────────────────────────────────────────────────────── */ .ht-week-tabs { display: flex; gap: 6px; margin-bottom: 12px; position: relative; z-index: 2; } .ht-week-tab { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 9px 6px; color: var(--text-muted); font-family: var(--font-ui); font-weight: 700; font-size: 13px; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: all 0.18s ease; position: relative; z-index: 3; } .ht-week-tab.active { background: linear-gradient(135deg, var(--gold-glow), transparent), var(--surface-elev); border-color: var(--gold); color: var(--gold); font-weight: 800; } .ht-week-tab:active { transform: scale(0.96); } .ht-table-wrap { touch-action: pan-y; overflow-x: auto; position: relative; } .ht-add-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 4px 4px 4px 14px; min-height: 48px; } #htHabitInput { background: transparent; border: none; color: var(--text); font-family: var(--font-ui); font-size: 14.5px; flex: 1; padding: 10px 4px; outline: none; } #htHabitInput::placeholder { color: var(--text-dim); } #htAddBtn { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #1a1408; border: none; font-size: 22px; font-weight: 800; line-height: 1; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(245,201,119,0.35); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } #htAddBtn:active { transform: scale(0.90); } /* ──────────────────────────────────────────────────────────────── v42.5 TAWBA CLEANER — weniger überladen, sicherer Back-Button ──────────────────────────────────────────────────────────────── */ #page-ustadh { background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(245,201,119,0.04), transparent 60%), var(--bg); } /* Background atmosphere reduzieren */ #page-ustadh .uc-bg-atmosphere, #page-ustadh .uc-bg-glow, #page-ustadh .uc-bg-stars { display: none !important; } /* Header cleaner - kein dekoratives Gewucher */ #page-ustadh .uc-header { background: rgba(13,12,20,0.92); backdrop-filter: blur(20px) saturate(160%); border-bottom: 1px solid var(--border); padding: 12px 14px; display: flex; align-items: center; gap: 12px; } #page-ustadh .uc-back { width: 40px; height: 40px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; z-index: 5; } #page-ustadh .uc-back:active { transform: scale(0.92); } #page-ustadh .uc-clear { width: 36px; height: 36px; border-radius: 11px; background: transparent; border: 1px solid var(--border); color: var(--text-muted); cursor: pointer; touch-action: manipulation; } #page-ustadh .uc-info { flex: 1; min-width: 0; } #page-ustadh .uc-name { font-family: var(--font-ui); font-weight: 800; font-size: 16px; letter-spacing: -0.25px; color: var(--text); } #page-ustadh .uc-status { font-size: 11.5px; color: var(--text-muted); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; margin-top: 1px; } /* Empty-State cleaner */ #page-ustadh .ues-moon { filter: drop-shadow(0 0 30px rgba(245,201,119,0.25)); } #page-ustadh .ues-title { font-family: var(--font-ui); font-weight: 800; font-size: 22px; letter-spacing: -0.4px; color: var(--text); } #page-ustadh .ues-sub { font-size: 14px; color: var(--text-muted); margin-top: 4px; } #page-ustadh .ues-hint { margin-top: 16px; font-size: 12px; color: var(--text-dim); } /* Date-Chip "Heute" subtle */ #page-ustadh .uc-date-chip { text-align: center; font-size: 11px; font-weight: 600; color: var(--text-dim); background: transparent; border: none; margin: 14px 0 8px; letter-spacing: 0.4px; } /* ──────────────────────────────────────────────────────────────── v42.6 GLOBAL TOUCH POLISH — anti-bugs ──────────────────────────────────────────────────────────────── */ .pages .page button, .pages .page [role="button"], .pages .page input, .pages .page textarea, .pages .page select { cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; pointer-events: auto; } input, textarea { cursor: text; } /* Inputs sollten nicht hinter overlays liegen */ input:focus, textarea:focus { position: relative; z-index: 4; } /* Disabled buttons: klare visual + keine clicks */ button:disabled, [aria-disabled="true"] { opacity: 0.4; pointer-events: none; cursor: not-allowed; } /* ╔══════════════════════════════════════════════════════════════════╗ ║ v43 ★ MAUER SOCIAL — Twitter-Style Posts mit Likes ║ ╚══════════════════════════════════════════════════════════════════╝ */ .mauer-title-row { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; } .mauer-status { display: inline-flex; align-items: center; gap: 5px; background: rgba(74,222,128,0.12); border: 1px solid rgba(74,222,128,0.30); border-radius: 999px; padding: 3px 8px; font-size: 10px; font-weight: 800; letter-spacing: 0.5px; color: var(--emerald); } .mauer-status.is-offline { background: rgba(251,113,133,0.12); border-color: rgba(251,113,133,0.30); color: var(--rose); } .mauer-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 6px var(--emerald); animation: liveDot 1.4s ease-in-out infinite; } .mauer-status.is-offline .mauer-status-dot { background: var(--rose); box-shadow: 0 0 6px var(--rose); animation: none; } @keyframes liveDot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.85); } } /* Loading dots */ .mauer-loading { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 18px 0; } .mauer-loading span { width: 7px; height: 7px; border-radius: 50%; background: var(--text-dim); animation: typingBounce 1.2s ease-in-out infinite; } .mauer-loading span:nth-child(2) { animation-delay: 0.15s; } .mauer-loading span:nth-child(3) { animation-delay: 0.30s; } /* Post-Cards (Twitter-Style) */ .mauer-post { background: rgba(36,32,48,0.65); border: 1px solid rgba(245,201,119,0.06); border-radius: 14px; padding: 12px 14px 10px; display: flex; flex-direction: column; gap: 6px; animation: mauerIn 0.32s cubic-bezier(0.22,1,0.36,1) both; } .mauer-post-head { display: flex; align-items: center; gap: 7px; font-size: 12.5px; } .mauer-post-av { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #1a1408; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 11px; flex-shrink: 0; } .mauer-post-author { font-weight: 800; color: var(--text); font-size: 13px; letter-spacing: -0.1px; } .mauer-post-dot { color: var(--text-dim); } .mauer-post-time { color: var(--text-muted); font-size: 12px; font-weight: 500; } .mauer-post-text { font-size: 14px; line-height: 1.45; color: var(--text); font-weight: 500; white-space: pre-wrap; word-wrap: break-word; padding-left: 31px; } .mauer-post-foot { display: flex; align-items: center; margin-top: 2px; padding-left: 31px; } .mauer-like { display: inline-flex; align-items: center; gap: 5px; background: transparent; border: none; color: var(--text-dim); font-family: var(--font-ui); font-weight: 600; font-size: 12px; padding: 6px 8px 6px 4px; border-radius: 8px; transition: color 0.15s ease, background 0.15s ease, transform 0.12s ease; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .mauer-like:active { transform: scale(0.94); } .mauer-like:hover { background: rgba(251,113,133,0.08); color: var(--rose); } .mauer-like.is-liked { color: var(--rose); } .mauer-like.is-liked svg { animation: likeBump 0.35s cubic-bezier(0.22,1,0.36,1); filter: drop-shadow(0 0 6px rgba(251,113,133,0.4)); } @keyframes likeBump { 0% { transform: scale(1); } 50% { transform: scale(1.35); } 100% { transform: scale(1); } } .mauer-like-count { font-variant-numeric: tabular-nums; min-width: 14px; } /* Refresh-Button unten */ .mauer-refresh { margin-top: 10px; background: transparent; border: 1px solid var(--border); color: var(--text-muted); border-radius: 10px; padding: 7px 12px; font-family: var(--font-ui); font-weight: 700; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; width: 100%; justify-content: center; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .mauer-refresh:active { transform: scale(0.97); } .mauer-refresh:hover { color: var(--gold); border-color: var(--border-strong); } /* alte mauer-entry styles bleiben für Backwards-Compat (nicht mehr im Markup) */ /* ╔══════════════════════════════════════════════════════════════════╗ ║ v45 ★ Splash · Tawba-Intro · Chat — Cinematic Premium Pass ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* ──────────────────────────────────────────────────────────────── v45.1 ONBOARDING STEP 1 — Vollmond + Wordmark + Trust + Anmelden ──────────────────────────────────────────────────────────────── */ .onboard-overlay { background: linear-gradient(180deg, #070f1e 0%, #04070f 60%, #03050a 100%); } .ob-step-splash { display: none; position: relative; text-align: center; padding: 40px 20px 24px; } .ob-step-splash.active { display: block; } /* Sternenhimmel hinter Mond */ .ob-stars-bg { position: absolute; inset: 0 0 50% 0; pointer-events: none; z-index: 0; } .ob-st { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; box-shadow: 0 0 4px rgba(255,255,255,0.65); animation: obStarT 3.2s ease-in-out infinite; } .ob-st:nth-child(2n) { animation-delay: 0.7s; animation-duration: 2.6s; } .ob-st:nth-child(3n) { animation-delay: 1.2s; animation-duration: 3.8s; } @keyframes obStarT { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } } .ob-star-gold { position: absolute; width: 4px; height: 4px; background: var(--gold); transform: rotate(45deg); box-shadow: 0 0 8px var(--gold), 0 0 14px rgba(245,201,119,0.5); animation: obStarT 2.4s ease-in-out infinite; } /* Vollmond Hero */ .ob-fullmoon { width: 180px; height: 180px; margin: 8px auto 22px; position: relative; z-index: 1; filter: drop-shadow(0 0 36px rgba(245,201,119,0.45)) drop-shadow(0 0 14px rgba(255,235,170,0.30)); animation: obMoonBreathe 5s ease-in-out infinite; } @keyframes obMoonBreathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.03); } } .ob-fullmoon svg { width: 100%; height: 100%; } /* Wordmark sabr.ai */ .ob-wordmark { font-family: var(--font-ui); font-weight: 800; font-size: 60px; letter-spacing: -2.5px; color: var(--text); line-height: 1; margin-top: 4px; } .ob-wm-dot, .ob-wm-ai { color: var(--gold); } .ob-subline { font-size: 10.5px; font-weight: 800; letter-spacing: 4px; color: var(--text-muted); margin-top: 8px; text-transform: uppercase; } /* Trust-Line */ .ob-trust { margin-top: 28px; display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,0.04); border: 1px solid rgba(245,201,119,0.14); padding: 8px 14px; border-radius: 999px; color: var(--text-muted); font-size: 11.5px; font-weight: 600; } .ob-trust svg { color: var(--gold); flex-shrink: 0; } /* Anmelden-Link unten */ .ob-signin { text-align: center; margin-top: 14px; font-size: 13px; color: var(--text-muted); } .ob-signin a { color: var(--gold); font-weight: 800; text-decoration: none; margin-left: 4px; } .ob-signin a:hover { text-decoration: underline; } /* Nur auf Step 1 sichtbar — andere Steps haben den Link nicht relevant */ .onboard-overlay:not(:has(.ob-step-splash.active)) .ob-signin { display: none; } /* ──────────────────────────────────────────────────────────────── v45.2 TAWBA INTRO — Cinematic + Trust-Panel + 4 Dots + CTA ──────────────────────────────────────────────────────────────── */ .tawba-intro.tawba-intro-v22 { background: radial-gradient(ellipse 90% 50% at 50% 18%, rgba(245,201,119,0.10), transparent 55%), radial-gradient(ellipse 80% 60% at 50% 85%, rgba(167,139,250,0.06), transparent 60%), linear-gradient(180deg, #04070f 0%, #02030a 100%); } /* Eyebrow Label "USTĀDH · TAWBA" */ .ti45-eyebrow { position: relative; margin: 12px auto 16px; font-size: 10.5px; font-weight: 800; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); text-align: center; } /* Tagline cinematic */ .ti45-tagline { padding: 0 22px; text-align: center; } .ti45-tagline .ti22-tag-main { font-family: var(--font-ui); font-weight: 700; font-size: 27px; letter-spacing: -0.5px; line-height: 1.2; color: var(--text); } .ti45-italic { font-style: italic; color: var(--gold); font-weight: 600; } .ti45-tagline .ti22-tag-sub { margin-top: 12px; font-size: 14px; line-height: 1.55; color: var(--text-muted); font-weight: 500; } /* Trust-Panel (3 Zeilen, Glass) */ .ti45-trust { margin: 24px 18px 22px; background: rgba(0,0,0,0.40); backdrop-filter: blur(10px) saturate(160%); -webkit-backdrop-filter: blur(10px) saturate(160%); border: 1px solid rgba(245,201,119,0.10); border-radius: 18px; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; } .ti45-trust-row { display: flex; align-items: center; gap: 11px; font-size: 12.5px; color: var(--text-muted); line-height: 1.4; } .ti45-trust-row svg { color: var(--gold); flex-shrink: 0; } .ti45-trust-row strong { color: var(--text); font-weight: 700; } /* 4 Dots */ .ti45-dots { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 20px 0 18px; } .ti45-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(245,201,119,0.30); transition: all 0.3s ease; } .ti45-dots i.is-active { width: 24px; border-radius: 3px; background: var(--gold); box-shadow: 0 0 10px rgba(245,201,119,0.55); } /* CTA Button */ .ti45-cta { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #1a1408; border: none; border-radius: 16px; padding: 14px 24px; font-family: var(--font-ui); font-weight: 800; font-size: 15px; letter-spacing: -0.1px; box-shadow: 0 10px 26px rgba(245,201,119,0.30), inset 0 1px 0 rgba(255,255,255,0.30); margin: 0 auto; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform 0.14s ease; } .ti45-cta:active { transform: scale(0.96); } .ti45-cta svg { transform: translateX(1px); } /* Skip-Hint */ .ti45-skip { text-align: center; margin-top: 16px; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: var(--text-dim); text-transform: uppercase; } /* ──────────────────────────────────────────────────────────────── v45.3 CHAT — Bismillāh-Pill + Date-Marker + Online + Plus + Send-Toggle ──────────────────────────────────────────────────────────────── */ /* Online-Dot teal */ .uc-dot.uc-dot-teal { background: #5eead4; box-shadow: 0 0 8px #5eead4; } .uc-online { color: #5eead4; } /* Avatar polish — keep crescent + add subtle teal-glow ring */ #page-ustadh .uc-avatar { width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, rgba(245,201,119,0.45), transparent 55%), linear-gradient(160deg, #2d2547, #15193b); border: 1.5px solid rgba(245,201,119,0.55); position: relative; overflow: visible; } #page-ustadh .uc-avatar::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; border-radius: 50%; background: #5eead4; border: 2px solid var(--bg); box-shadow: 0 0 8px #5eead4; } /* Bismillāh-Pill */ .uc45-bism { display: block; width: fit-content; margin: 12px auto 8px; padding: 6px 14px; border-radius: 14px; background: linear-gradient(135deg, rgba(245,201,119,0.20), rgba(245,201,119,0.08)); border: 1px solid rgba(245,201,119,0.25); color: var(--gold); font-family: var(--font-arabic); font-size: 14px; text-align: center; letter-spacing: 0; } /* Date-Marker "HEUTE · 14:08" */ .uc-date-chip.uc45-datemark { text-align: center; font-size: 10px; font-weight: 800; letter-spacing: 1.6px; color: var(--text-dim); background: transparent; border: none; margin: 8px 0 10px; text-transform: uppercase; } /* Message Avatar Mini (28px statt 40px) */ .uc-msg-avatar.uc45-msg-av { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, rgba(245,201,119,0.45), transparent 55%), linear-gradient(160deg, #2d2547, #15193b); border: 1px solid rgba(245,201,119,0.40); flex-shrink: 0; align-self: flex-end; margin-bottom: 2px; } /* Welcome-Greeting Bubble */ .uc45-greeting .cm-body { font-size: 15.5px; line-height: 1.4; color: var(--text); } .uc45-greeting .uc45-sub { margin-top: 2px; color: var(--text-muted); font-size: 14.5px; font-weight: 500; } .uc45-name { color: var(--gold); font-weight: 800; } /* Input Row mit Plus links */ .uc45-input-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px max(14px, env(safe-area-inset-bottom)); } .uc45-plus { width: 42px; height: 42px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); color: var(--text); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform 0.14s ease, background 0.14s ease; } .uc45-plus:active { transform: scale(0.92); background: var(--surface-elev); } .uc-input-wrap.uc45-input-wrap { flex: 1; background: rgba(32,28,40,0.92); border: 1px solid rgba(245,201,119,0.18); border-radius: 22px; padding: 4px 4px 4px 16px; display: flex; align-items: center; gap: 6px; min-height: 46px; } .uc-input-wrap.uc45-input-wrap:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(245,201,119,0.15); } /* Mic + Send Toggle: zeige Mic OHNE text, Send WENN text */ .uc45-mic, .uc45-send { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform 0.14s ease, opacity 0.18s ease; } .uc45-mic { background: transparent; color: var(--text-muted); } .uc45-mic:active { color: var(--gold); } .uc45-send { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #1a1408; box-shadow: 0 4px 12px rgba(245,201,119,0.35); } .uc45-send:active { transform: scale(0.90); } /* Default: show mic, hide send */ .uc-input-wrap.uc45-input-wrap .uc45-send { display: none; } /* When input has text: hide mic, show send */ .uc-input-wrap.uc45-input-wrap.has-text .uc45-mic { display: none; } .uc-input-wrap.uc45-input-wrap.has-text .uc45-send { display: inline-flex; } /* ──────────────────────────────────────────────────────────────── v45.4 SPLASH polish — Vollmond bleibt, Background dunkler ──────────────────────────────────────────────────────────────── */ .splash-v30 { background: radial-gradient(ellipse 90% 50% at 50% 30%, rgba(245,201,119,0.10) 0%, transparent 60%), linear-gradient(180deg, #070f1e 0%, #04070f 50%, #02030a 100%); } /* ╔══════════════════════════════════════════════════════════════════╗ ║ v46 ★ 1:1 Design Match + Chat Quick-Feed + Family-Polish ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* ──────────────────────────────────────────────────────────────── v46.1 ONBOARDING STEP 1 — exakte Splash-Optik ──────────────────────────────────────────────────────────────── */ .onboard-card { /* Bei Step 1 mehr Atmosphäre, kein scrollbarer Container */ background: transparent; box-shadow: none; border: none; } .ob-step-splash { min-height: 70vh; display: none; flex-direction: column; align-items: center; justify-content: flex-start; } .ob-step-splash.active { display: flex; } /* Onboarding-Dots verstecken auf Step 1 (Design hat keine) */ .onboard-overlay:has(.ob-step-splash.active) .onboard-dots { display: none; } /* Onboarding-Actions: Back-Btn auf Step 1 verstecken */ .onboard-overlay:has(.ob-step-splash.active) .ob-btn-back { display: none; } .onboard-overlay:has(.ob-step-splash.active) .ob-btn-next { flex: 1; width: 100%; height: 56px; border-radius: 16px; font-size: 16px; } /* Polish: Wordmark größer + cleaner */ .ob-wordmark { font-family: var(--font-ui); font-weight: 800; font-size: 64px; letter-spacing: -2.5px; margin-top: 8px; } /* ──────────────────────────────────────────────────────────────── v46.2 CHAT — Bottom-Nav sichtbar + Padding für Chat-Box ──────────────────────────────────────────────────────────────── */ /* Bottom-Nav bleibt sichtbar im Chat - aber Chat-Container braucht padding-bottom für Input-Row PLUS Bottom-Nav */ #page-ustadh.active .uc-chat-box { padding-bottom: calc(80px + env(safe-area-inset-bottom)); } #page-ustadh.active .uc-input-row { /* Über Bottom-Nav floaten lassen */ bottom: calc(70px + env(safe-area-inset-bottom)); position: fixed; left: 0; right: 0; background: linear-gradient(180deg, transparent 0%, rgba(13,12,20,0.92) 25%, rgba(13,12,20,0.98) 100%); z-index: 30; } /* Quick-Feed: horizontale Chips am Ende der initial-Konversation */ .uc46-feed { display: flex; gap: 8px; padding: 10px 14px 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .uc46-feed::-webkit-scrollbar { display: none; } .uc46-feed-chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; background: rgba(36,32,48,0.78); border: 1px solid rgba(245,201,119,0.18); color: var(--text); border-radius: 999px; padding: 9px 14px; font-family: var(--font-ui); font-weight: 600; font-size: 13px; white-space: nowrap; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform 0.14s ease, border-color 0.14s ease; } .uc46-feed-chip:active { transform: scale(0.96); border-color: var(--gold); } .uc46-feed-chip > span:first-child { font-size: 15px; } .uc46-heart { display: inline-block; font-size: 14px; margin-left: 2px; } /* ──────────────────────────────────────────────────────────────── v46.3 TAWBA-INTRO — Cinematic 1:1 match ──────────────────────────────────────────────────────────────── */ /* CTA & Skip immer am Boden positioniert */ .tawba-intro.tawba-intro-v22 { display: flex; flex-direction: column; align-items: center; padding-top: 70px; padding-bottom: 30px; } .ti22-skip.ti45-skip { position: absolute; top: 16px; right: 16px; margin: 0; z-index: 5; cursor: pointer; } .ti45-cta { margin-top: auto; margin-bottom: 16px; min-width: 220px; justify-content: center; } /* Skip-Hint auch tap-fähig */ .ti22-skip { cursor: pointer; touch-action: manipulation; } /* Avatar besser positionieren (oben statt mittig) */ .ti22-moon-wrap { margin-top: 10px; } /* ──────────────────────────────────────────────────────────────── v46.4 FAMILY — Empty + Buttons funktional ──────────────────────────────────────────────────────────────── */ #page-family .family-empty { text-align: center; padding: 60px 28px; display: flex; flex-direction: column; align-items: center; gap: 14px; } #page-family .fe-icon { font-size: 64px; } #page-family .fe-title { font-family: var(--font-ui); font-weight: 800; font-size: 24px; color: var(--text); letter-spacing: -0.4px; } #page-family .fe-arabic { font-family: var(--font-arabic); color: var(--gold); font-size: 22px; line-height: 1.8; margin-top: 8px; } #page-family .fe-desc { font-size: 14px; color: var(--text-muted); line-height: 1.5; max-width: 320px; } #page-family .fe-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 320px; margin-top: 12px; } #page-family .btn-gold { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #1a1408; border: none; height: 52px; border-radius: 16px; font-family: var(--font-ui); font-weight: 800; font-size: 15px; box-shadow: 0 8px 22px rgba(245,201,119,0.30); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } #page-family .btn-gold:active { transform: scale(0.97); } #page-family .btn-outline { background: transparent; color: var(--text); border: 1.5px solid var(--border-strong); height: 52px; border-radius: 16px; font-family: var(--font-ui); font-weight: 700; font-size: 15px; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } #page-family .btn-outline:active { transform: scale(0.97); background: var(--surface); } /* ╔══════════════════════════════════════════════════════════════════╗ ║ v47 ★ Family Full-Sections (Stories · Live · Tournament · ║ ║ Promises · Reminder · Salam · Members · Feed) ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* v48: Family Empty State - JS toggle funktional (kein !important mehr) */ #page-family .family-empty { flex-direction: column; align-items: center; } /* ── Stories (24h Activity) ── */ .family-stories { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 6px 0 14px; margin-bottom: 14px; } .family-stories::-webkit-scrollbar { display: none; } .story-bubble { flex-shrink: 0; display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 8px 12px 8px 8px; min-width: 180px; } .story-bubble.is-own { background: linear-gradient(135deg, var(--gold-glow), transparent 70%), var(--surface); border-color: var(--border-strong); } .story-av { width: 32px; height: 32px; border-radius: 50%; background: var(--surface-elev); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; color: var(--gold); flex-shrink: 0; } .story-bubble.is-own .story-av { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #1a1408; } .story-info { min-width: 0; } .story-nm { font-size: 11px; font-weight: 700; color: var(--text); } .story-tx { font-size: 12px; color: var(--text-muted); margin-top: 1px; line-height: 1.3; } .story-tm { font-size: 10px; color: var(--text-dim); margin-top: 2px; } /* ── Live Activity ── */ .live-activity { display: inline-flex; align-items: center; gap: 7px; background: rgba(74,222,128,0.10); border: 1px solid rgba(74,222,128,0.25); border-radius: 999px; padding: 6px 12px; font-size: 12px; color: var(--emerald); margin-bottom: 14px; } .live-activity .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 8px var(--emerald); animation: liveDot 1.4s ease-in-out infinite; } /* ── Promises (Inshallah-Versprechen) ── */ .promise-row { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 10px 12px; margin-bottom: 8px; } .promise-row.is-done { opacity: 0.55; } .promise-row.is-done .promise-text { text-decoration: line-through; } .promise-author { font-size: 11px; font-weight: 800; color: var(--gold); background: var(--gold-glow); padding: 3px 8px; border-radius: 999px; flex-shrink: 0; } .promise-text { flex: 1; color: var(--text); font-size: 13.5px; font-weight: 500; } .promise-check { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-elev); border: 1.5px solid var(--border-strong); color: var(--text); font-size: 14px; font-weight: 800; flex-shrink: 0; cursor: pointer; } .promise-row.is-done .promise-check { background: var(--emerald); border-color: var(--emerald); color: #052e10; } .promise-empty { text-align: center; color: var(--text-dim); font-size: 12.5px; font-style: italic; padding: 14px 0; } .promise-add-row { display: flex; gap: 8px; margin-top: 10px; } #promiseInput { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; color: var(--text); font-family: var(--font-ui); font-size: 13.5px; } #promiseInput::placeholder { color: var(--text-dim); } #promiseAddBtn { width: 38px; height: 38px; background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #1a1408; border: none; border-radius: 50%; font-size: 22px; font-weight: 800; } /* ── Tournament Rows ── */ .tournament-rows { display: flex; flex-direction: column; gap: 6px; } .tr-row { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; } .tr-row.is-me { background: linear-gradient(135deg, var(--gold-glow), transparent 70%), var(--surface); border-color: var(--gold); } .tr-medal { font-size: 16px; width: 22px; text-align: center; } .tr-av { width: 28px; height: 28px; border-radius: 50%; background: var(--surface-elev); color: var(--gold); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; } .tr-row.is-me .tr-av { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #1a1408; } .tr-nm { flex: 1; color: var(--text); font-weight: 700; font-size: 13.5px; } .tr-xp { color: var(--gold); font-weight: 800; font-variant-numeric: tabular-nums; font-size: 13px; } /* ── Reminder-Strip ── */ .reminder-strip, .salam-strip { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px 0 14px; } .reminder-strip::-webkit-scrollbar, .salam-strip::-webkit-scrollbar { display: none; } .reminder-btn, .salam-btn { flex-shrink: 0; display: flex; align-items: center; gap: 7px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px 6px 6px; color: var(--text); font-family: var(--font-ui); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .reminder-btn:active, .salam-btn:active { transform: scale(0.96); } .reminder-av, .salam-av { width: 26px; height: 26px; border-radius: 50%; background: var(--surface-elev); color: var(--gold); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 11px; } .reminder-nm, .salam-nm { font-size: 12.5px; font-weight: 700; } .reminder-action, .salam-action { font-size: 11px; color: var(--text-muted); } .salam-btn { background: linear-gradient(135deg, rgba(167,139,250,0.10), transparent), var(--surface); } .salam-action { color: var(--lavender); } /* ── Members Comparison List ── */ .members-list { display: flex; flex-direction: column; gap: 6px; } .member-row { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; } .member-row.is-me { background: linear-gradient(135deg, var(--gold-glow), transparent 70%), var(--surface); border-color: var(--gold); } .member-av { width: 32px; height: 32px; border-radius: 50%; background: var(--surface-elev); color: var(--gold); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; } .member-row.is-me .member-av { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #1a1408; } .member-nm { flex: 1; color: var(--text); font-weight: 700; font-size: 14px; } .member-diff { font-size: 12px; font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; } .member-row.is-me .member-diff { color: var(--gold); } /* ── Family Goals (gemeinsame Ziele) ── */ .family-goals { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .fam-goal { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; } .fam-goal.done { background: linear-gradient(135deg, rgba(74,222,128,0.10), transparent), var(--surface); border-color: rgba(74,222,128,0.35); } .fam-goal .fg-icon { font-size: 18px; } .fam-goal .fg-text { flex: 1; color: var(--text); font-size: 13.5px; font-weight: 600; } .fam-goal.done .fg-text { color: var(--emerald); } .fam-goal .fg-prog { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--gold); font-size: 13px; } .fam-goal.done .fg-prog { color: var(--emerald); } /* ── Activities Feed mit Reactions ── */ .family-feed { display: flex; flex-direction: column; gap: 10px; } .feed-row { display: flex; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; } .feed-av { width: 36px; height: 36px; border-radius: 50%; background: var(--surface-elev); color: var(--gold); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; } .feed-body { flex: 1; min-width: 0; } .feed-head { font-size: 12px; } .feed-head strong { color: var(--text); } .feed-tm { color: var(--text-dim); margin-left: 6px; font-weight: 500; } .feed-tx { color: var(--text); font-size: 13.5px; line-height: 1.4; margin-top: 3px; } .feed-reactions { display: flex; gap: 6px; margin-top: 8px; } .feed-reactions .rb { background: var(--surface-elev); border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; font-size: 12px; color: var(--text-muted); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .feed-reactions .rb:active { transform: scale(0.94); } .feed-reactions .rb.is-reacted { background: rgba(245,201,119,0.14); border-color: var(--gold); color: var(--gold); } /* ── Family Tasbih Card bar ── */ .ftc-bar { height: 6px; background: rgba(244,237,224,0.08); border-radius: 999px; overflow: hidden; margin-top: 8px; } .ftc-bar-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--gold), var(--gold-deep)); border-radius: 999px; transition: width 0.5s ease; } .ftc-goal { font-size: 11.5px; color: var(--text-muted); margin-top: 6px; } /* ── Family-Section-Titles besser ── */ #page-family .section-title { font-family: var(--font-ui); font-weight: 800; font-size: 14.5px; color: var(--text); letter-spacing: -0.2px; margin: 18px 0 10px; } /* ── Leave-Button ── */ .leave-family-btn, #leaveFamBtn { width: 100%; background: transparent; border: 1px solid rgba(251,113,133,0.30); color: var(--rose); border-radius: 14px; padding: 12px; font-family: var(--font-ui); font-weight: 700; font-size: 14px; margin-top: 20px; cursor: pointer; } .leave-family-btn:active, #leaveFamBtn:active { transform: scale(0.98); } /* ╔══════════════════════════════════════════════════════════════════╗ ║ v48 ★ Family Empty - House SVG Float + Glow + Visibility-Fix ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* House-Icon-Wrap: zentriert + relative für Glow */ .fe-icon-wrap { position: relative; width: 160px; height: 160px; margin: 14px auto 18px; display: flex; align-items: center; justify-content: center; animation: feFloat 4.2s ease-in-out infinite; } @keyframes feFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } /* Soft Glow hinter dem Haus */ .fe-glow { position: absolute; inset: 0; background: radial-gradient(circle at 50% 55%, rgba(245,201,119,0.32) 0%, rgba(245,201,119,0.08) 38%, transparent 65%); filter: blur(8px); z-index: 0; animation: feGlowPulse 3.6s ease-in-out infinite; } @keyframes feGlowPulse { 0%, 100% { opacity: 0.75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } } /* House SVG */ .fe-house { position: relative; z-index: 1; width: 100%; height: 100%; filter: drop-shadow(0 6px 20px rgba(245,201,119,0.30)); } /* Fenster eigene leichte Blink-Animation */ .fe-window { animation: feWindowBreathe 4.8s ease-in-out infinite; transform-origin: center; } .fe-window:nth-of-type(2) { animation-delay: 1.2s; } @keyframes feWindowBreathe { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } } /* Empty-State Container besser */ #page-family .family-empty { text-align: center; padding: 30px 28px 60px; gap: 6px; max-width: 380px; margin: 0 auto; } #page-family .fe-title { font-family: var(--font-ui); font-weight: 800; font-size: 22px; color: var(--text); letter-spacing: -0.3px; margin-top: 6px; } #page-family .fe-arabic { font-family: var(--font-arabic); color: var(--gold); font-size: 22px; line-height: 1.7; margin-top: 6px; } #page-family .fe-desc { font-size: 13.5px; color: var(--text-muted); line-height: 1.5; margin-top: 8px; max-width: 300px; } #page-family .fe-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 300px; margin-top: 22px; } /* ╔══════════════════════════════════════════════════════════════════╗ ║ v49 ★ Family Class-Based Visibility (bulletproof) ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* v49: Wenn no-family Klasse: familyActive komplett weg, familyEmpty zeigen */ #page-family.no-family #familyActive { display: none !important; } #page-family.no-family #familyEmpty { display: flex !important; } /* v49: Wenn has-family Klasse: familyEmpty komplett weg, familyActive zeigen */ #page-family.has-family #familyEmpty { display: none !important; } #page-family.has-family #familyActive { display: block !important; } /* v49: Symbol bleibt sichtbar als App-Icon-Style (rounded square framing optional) */ .fe-icon-wrap { /* keep position + glow but no rounding - feel free user can add later */ } /* ╔══════════════════════════════════════════════════════════════════╗ ║ v50 ★ Final Polish — Family ABSOLUT verschwunden + Settings ║ ║ + 3 Dots + Bayan leiser + Bug-Fixes ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* v50: Family Active-Block triple-defense */ #familyActive[hidden], #page-family.no-family #familyActive, #page-family.no-family #familyActive[hidden] { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; pointer-events: none !important; } /* v50: Tawba-Intro nur 3 Dots zentriert (Splash-Style) */ .ti50-3dots i { width: 6px; height: 6px; background: rgba(245,201,119,0.30); } .ti50-3dots i.is-active { width: 24px; background: var(--gold); box-shadow: 0 0 12px rgba(245,201,119,0.60); } /* v50: Bayan Placeholder leiser (subtiler, weniger Kontrast) */ #mauerInput::placeholder { color: rgba(240,238,233,0.30) !important; font-weight: 400; font-style: normal; letter-spacing: 0.1px; } /* v50: Modal-Overlay open Animation + Backdrop */ .modal-overlay { position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .modal-overlay.is-open { opacity: 1; pointer-events: auto; } .modal-card { background: var(--surface); border: 1px solid var(--border-strong); border-radius: 22px; padding: 22px 22px 28px; width: 100%; max-width: 420px; max-height: 84vh; overflow-y: auto; position: relative; transform: translateY(20px) scale(0.96); transition: transform 0.3s cubic-bezier(0.22,1,0.36,1); } .modal-overlay.is-open .modal-card { transform: translateY(0) scale(1); } .modal-close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; background: var(--surface-elev); border: 1px solid var(--border); color: var(--text-muted); font-size: 20px; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .modal-title { font-family: var(--font-ui); font-weight: 800; font-size: 22px; color: var(--text); margin-bottom: 18px; letter-spacing: -0.4px; } /* v50: Settings Sections */ .settings-section { margin-bottom: 20px; } .settings-label { font-size: 11.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; } .settings-input { width: 100%; background: var(--surface-elev); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; color: var(--text); font-family: var(--font-ui); font-size: 14.5px; outline: none; } .settings-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(245,201,119,0.15); } .gender-row { display: flex; gap: 8px; } .gender-pill { flex: 1; background: var(--surface-elev); border: 1.5px solid var(--border); color: var(--text); border-radius: 12px; padding: 10px 14px; font-family: var(--font-ui); font-weight: 700; font-size: 14px; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: all 0.18s ease; } .gender-pill.active { background: linear-gradient(135deg, var(--gold-glow), transparent), var(--surface); border-color: var(--gold); color: var(--gold); } .settings-toggle-row { display: flex; align-items: center; justify-content: space-between; } .settings-toggle-lbl { color: var(--text); font-size: 14px; } .settings-toggle { position: relative; width: 44px; height: 24px; cursor: pointer; } .settings-toggle input { position: absolute; opacity: 0; width: 0; height: 0; } .settings-toggle-track { position: absolute; inset: 0; background: var(--surface-elev); border: 1px solid var(--border); border-radius: 999px; transition: background 0.2s ease; } .settings-toggle-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: var(--text); border-radius: 50%; transition: transform 0.2s ease, background 0.2s ease; } .settings-toggle input:checked ~ .settings-toggle-track { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); border-color: var(--gold); } .settings-toggle input:checked ~ .settings-toggle-track::after { transform: translateX(20px); background: #1a1408; } .about-text { font-size: 13px; color: var(--text-muted); line-height: 1.55; } .about-text strong { color: var(--gold); } .danger-btn { color: var(--rose) !important; border-color: rgba(251,113,133,0.40) !important; } /* ╔══════════════════════════════════════════════════════════════════╗ ║ v51 ★ Version-Marker + Force-Update Polish ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* v51: Version-Marker im Header (klein, dezent, debug-fähig) */ .version-marker { display: inline-block; margin-left: 8px; padding: 2px 6px; background: rgba(245,201,119,0.10); border: 1px solid rgba(245,201,119,0.20); border-radius: 6px; color: var(--gold); font-family: var(--font-ui); font-weight: 700; font-size: 9px; letter-spacing: 0.5px; vertical-align: middle; opacity: 0.6; } .version-marker:hover { opacity: 1; } /* ╔══════════════════════════════════════════════════════════════════╗ ║ v52 ★ Apple-Style Polish: Loading-Dots · More-Menü · ║ ║ Glowing-Emoji · Version dynamisch · Production-Ready ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* ──────────────────────────────────────────────────────────────── v52.1 LOADING DOTS — Apple iOS Indicator-Style ──────────────────────────────────────────────────────────────── */ .sp-loader.sp-loader-v52, .ti52-loader { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 24px auto 0; position: relative; z-index: 2; } .sp-loader.sp-loader-v52 span, .ti52-loader span { width: 8px; height: 8px; border-radius: 50%; background: rgba(245,201,119,0.85); box-shadow: 0 0 8px rgba(245,201,119,0.45); animation: appleDotBounce 1.4s cubic-bezier(0.4, 0, 0.6, 1) infinite both; will-change: transform, opacity; } .sp-loader.sp-loader-v52 span:nth-child(2), .ti52-loader span:nth-child(2) { animation-delay: 0.16s; } .sp-loader.sp-loader-v52 span:nth-child(3), .ti52-loader span:nth-child(3) { animation-delay: 0.32s; } @keyframes appleDotBounce { 0%, 80%, 100% { transform: scale(0.5); opacity: 0.4; } 40% { transform: scale(1.05); opacity: 1; box-shadow: 0 0 14px rgba(245,201,119,0.85), 0 0 4px rgba(245,201,119,0.4); } } /* v52: Tawba-Intro Loading-Dots auch unten zentriert */ .ti52-loader { margin-top: 16px; margin-bottom: 4px; padding: 8px 0; } /* ──────────────────────────────────────────────────────────────── v52.2 MORE-MENU im Chat (Drei-Punkte) — Apple Action-Sheet ──────────────────────────────────────────────────────────────── */ .uc-more.uc52-more { width: 42px; height: 42px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; flex-shrink: 0; transition: background 0.14s ease, transform 0.14s ease; } .uc-more.uc52-more:active { transform: scale(0.92); background: var(--surface-elev); } .uc-more-menu { position: fixed; top: 70px; right: 14px; width: 240px; background: rgba(28,26,40,0.92); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border: 1px solid rgba(245,201,119,0.18); border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04); padding: 6px; z-index: 8000; opacity: 0; transform: translateY(-8px) scale(0.96); transform-origin: top right; transition: opacity 0.22s cubic-bezier(0.22,1,0.36,1), transform 0.22s cubic-bezier(0.22,1,0.36,1); pointer-events: none; } .uc-more-menu.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .uc-more-item { width: 100%; background: transparent; border: none; color: var(--text); font-family: var(--font-ui); font-weight: 600; font-size: 14px; padding: 11px 12px; border-radius: 10px; text-align: left; display: flex; align-items: center; gap: 11px; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background 0.14s ease; } .uc-more-item:hover, .uc-more-item:active { background: rgba(245,201,119,0.08); color: var(--gold); } .uc-more-item svg { color: var(--gold); flex-shrink: 0; } .uc-more-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 4px 8px; } .uc-more-close { justify-content: center; color: var(--text-muted) !important; font-weight: 700; } /* ──────────────────────────────────────────────────────────────── v52.3 FAMILY EMPTY-STATE — Apple-Style Glowing Emoji Float ──────────────────────────────────────────────────────────────── */ .family-empty-v52 .fe-icon-wrap { position: relative; width: 180px; height: 180px; margin: 14px auto 22px; display: flex; align-items: center; justify-content: center; animation: appleFloat 5.6s cubic-bezier(0.42, 0, 0.58, 1) infinite; will-change: transform; } @keyframes appleFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } .family-empty-v52 .fe-glow { position: absolute; inset: -10px; background: radial-gradient(circle at 50% 55%, rgba(245,201,119,0.38) 0%, rgba(245,201,119,0.18) 25%, rgba(167,139,250,0.10) 50%, transparent 70%); filter: blur(14px); z-index: 0; animation: appleGlowPulse 4.2s ease-in-out infinite; } @keyframes appleGlowPulse { 0%, 100% { opacity: 0.65; transform: scale(1); } 50% { opacity: 0.95; transform: scale(1.10); } } .family-empty-v52 .fe-house { position: relative; z-index: 1; width: 100%; height: 100%; filter: drop-shadow(0 8px 28px rgba(245,201,119,0.42)) drop-shadow(0 2px 10px rgba(245,201,119,0.25)); } /* Fenster atmen smoother (Apple ease) */ .family-empty-v52 .fe-window { animation: appleWindowBreathe 5.2s cubic-bezier(0.42, 0, 0.58, 1) infinite; transform-origin: center; transform-box: fill-box; } .family-empty-v52 .fe-window:nth-of-type(2) { animation-delay: 1.4s; } @keyframes appleWindowBreathe { 0%, 100% { opacity: 0.72; } 50% { opacity: 1; } } /* ──────────────────────────────────────────────────────────────── v52.4 VERSION-MARKER (dynamisch via JS gesetzt) ──────────────────────────────────────────────────────────────── */ .version-marker:empty { display: none; } .version-marker:not(:empty) { display: inline-block; } /* ──────────────────────────────────────────────────────────────── v52.5 Tawba-Intro Skip-Text-Element entfernt (Auto-Advance) — Cleanup ──────────────────────────────────────────────────────────────── */ .ti22-skip, .ti45-skip { display: none !important; } /* ──────────────────────────────────────────────────────────────── v52.6 SETTINGS-MODAL: sicherstellen dass es immer zentral und sichtbar ist ──────────────────────────────────────────────────────────────── */ #settingsModal.modal-overlay { z-index: 9100; } #settingsModal .modal-card { background: var(--surface); } /* ╔══════════════════════════════════════════════════════════════════╗ ║ v53 ★ User-Requests: Loader bottom · Sticky-Blur · ║ ║ Apple-Emoji · Prayer-Times · Halal Scanner · ║ ║ Theme/Sprache · Points-System · ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* ──────────────────────────────────────────────────────────────── v53.1 LADE-PUNKTE GANZ UNTEN (Splash + Tawba-Intro) ──────────────────────────────────────────────────────────────── */ .splash-v30 .sp-loader.sp-loader-v52 { position: absolute; bottom: calc(34px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); margin: 0; } /* v75: Loading-Dots im Tawba-Intro hochsetzen damit Bottom-Nav sie nicht verdeckt + sichtbarer machen (gleicher Look wie Splash-Loader) */ .tawba-intro .ti52-loader { position: absolute; bottom: calc(96px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); margin: 0; z-index: 100; } .tawba-intro .ti52-loader span { width: 10px !important; height: 10px !important; background: rgba(245,201,119,0.95) !important; box-shadow: 0 0 12px rgba(245,201,119,0.6), 0 0 4px rgba(245,201,119,0.3) !important; } /* ──────────────────────────────────────────────────────────────── v53.2 HEADER + FOOTER STICKY+BLUR (keine Lücke beim Scrollen) ──────────────────────────────────────────────────────────────── */ .app-header { position: sticky; top: 0; z-index: 800; background: rgba(7,15,30,0.72); backdrop-filter: blur(28px) saturate(170%); -webkit-backdrop-filter: blur(28px) saturate(170%); border-bottom: 1px solid rgba(255,255,255,0.06); padding-top: env(safe-area-inset-top); } /* v53: Bottom-Nav vollflächiger Glass-Hintergrund, keine Lücke */ .bottom-nav.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; background: rgba(7,15,30,0.78); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); border-top: 1px solid rgba(255,255,255,0.07); border-radius: 0; padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); box-shadow: 0 -2px 24px rgba(0,0,0,0.30); } /* Page-Container Bottom-Padding angepasst für neue Nav-Höhe */ .pages > .page.active { padding-bottom: calc(98px + env(safe-area-inset-bottom)); } /* ──────────────────────────────────────────────────────────────── v53.3 FAMILY EMPTY — Apple Native 🏠 Emoji + Soft Lichtschein ──────────────────────────────────────────────────────────────── */ .family-empty-v52 .fe-icon-wrap { width: 200px; height: 200px; } /* SVG verstecken — wir nutzen jetzt Apple Native Emoji */ .family-empty-v52 .fe-house { display: none; } /* Apple Native Emoji rendern */ .family-empty-v52 .fe-icon-wrap::before { content: "🏠"; font-size: 110px; line-height: 1; position: relative; z-index: 2; text-shadow: 0 0 22px rgba(245,201,119,0.40), 0 0 50px rgba(245,201,119,0.20), 0 6px 18px rgba(0,0,0,0.30); /* iOS native font */ font-family: -apple-system, "Apple Color Emoji", "Segoe UI Emoji", system-ui, sans-serif; } /* Lichtschein — weicher Strahl statt Kreis */ .family-empty-v52 .fe-glow { position: absolute; inset: -30px -30px -10px -30px; background: radial-gradient(ellipse 50% 70% at 50% 40%, rgba(255,245,210,0.55) 0%, rgba(245,201,119,0.30) 25%, rgba(245,201,119,0.10) 50%, transparent 75%); filter: blur(22px); z-index: 0; animation: appleLightBeam 4.6s ease-in-out infinite; } @keyframes appleLightBeam { 0%, 100% { opacity: 0.75; transform: scale(1) translateY(0); } 50% { opacity: 1; transform: scale(1.08) translateY(-4px); } } /* ──────────────────────────────────────────────────────────────── v53.4 HOME — Gebetszeiten Card unter Streak/Level ──────────────────────────────────────────────────────────────── */ .home-prayer-card { background: linear-gradient(135deg, rgba(245,201,119,0.10), rgba(167,139,250,0.06)), rgba(28,26,40,0.55); border: 1px solid rgba(245,201,119,0.16); border-radius: 18px; padding: 14px 16px; margin: 0 0 14px 0; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .hpc-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .hpc-title { font-family: var(--font-ui); font-weight: 800; font-size: 13px; color: var(--text); letter-spacing: -0.2px; display: inline-flex; align-items: center; gap: 6px; } .hpc-title svg { color: var(--gold); } .hpc-loc { font-size: 11px; color: var(--text-muted); font-weight: 600; } /* v231 ★ Nächstes Gebet (Mawaqit-Stil) + Live-Countdown */ .hpc-next { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0 10px; padding: 11px 14px; border-radius: 13px; background: linear-gradient(135deg, rgba(245,201,119,0.22), rgba(245,201,119,0.06)); border: 1px solid rgba(245,201,119,0.30); } .hpc-next[hidden] { display: none; } .hpc-next-eyebrow { font-size: 9px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold, #f5c977); opacity: 0.85; margin-bottom: 3px; } .hpc-next-name { font-family: var(--font-ui); font-weight: 800; font-size: 18px; color: var(--text, #f4ede0); letter-spacing: -0.3px; } .hpc-next-r { text-align: right; flex-shrink: 0; } .hpc-next-time { font-family: var(--font-ui); font-weight: 800; font-size: 20px; color: var(--gold, #f5c977); line-height: 1.1; } .hpc-next-count { font-size: 11px; font-weight: 700; color: var(--text-muted, rgba(244,237,224,0.7)); margin-top: 1px; } .hpc-jumua { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding: 8px 13px; border-radius: 11px; background: rgba(159,217,196,0.10); border: 1px solid rgba(159,217,196,0.22); } .hpc-jumua[hidden] { display: none; } .hpc-jumua-lbl { font-size: 12px; font-weight: 800; color: #9fd9c4; letter-spacing: 0.04em; } .hpc-jumua-time { font-family: var(--font-ui); font-weight: 800; font-size: 14px; color: #cdeee0; } .hpc-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; } .hpc-cell { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 8px 4px; text-align: center; transition: all 0.18s ease; } .hpc-cell.is-next { background: linear-gradient(135deg, rgba(245,201,119,0.20), rgba(245,201,119,0.08)); border-color: var(--gold); box-shadow: 0 0 14px rgba(245,201,119,0.20); } .hpc-cell.is-past { opacity: 0.45; } .hpc-cell-name { font-size: 9.5px; font-weight: 800; letter-spacing: 0.5px; color: var(--text-muted); text-transform: uppercase; margin-bottom: 2px; } .hpc-cell-time { font-family: var(--font-ui); font-weight: 700; font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; } .hpc-cell.is-next .hpc-cell-name, .hpc-cell.is-next .hpc-cell-time { color: var(--gold); } /* v232 ★ Iqāma-Zeit unter der Adhān-Zeit (Mawaqit-Gefühl) */ .hpc-cell-iq { margin-top: 3px; padding-top: 3px; border-top: 1px solid rgba(255,255,255,0.08); font-family: var(--font-ui); font-weight: 700; font-size: 11px; color: var(--gold-soft, #f5c977); opacity: 0.8; font-variant-numeric: tabular-nums; } .hpc-cell.is-next .hpc-cell-iq { opacity: 1; } /* Hijri-Datum */ .hpc-hijri { font-size: 11.5px; font-weight: 600; color: var(--gold-soft, #f5c977); opacity: 0.78; margin: -2px 0 9px; } .hpc-hijri[hidden] { display: none; } /* Adhān/Iqāma-Legende */ .hpc-legend { display: flex; justify-content: center; gap: 16px; margin-top: 7px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; color: var(--text-muted, rgba(244,237,224,0.55)); } .hpc-legend[hidden] { display: none; } .hpc-legend span { display: inline-flex; align-items: center; gap: 5px; } .hpc-legend span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; } .hpc-lg-a::before { background: var(--text, #f4ede0); } .hpc-lg-i::before { background: var(--gold-soft, #f5c977); } /* v313 ★ Gebetszeiten-Hinweis (Richtwert · folge deiner Moschee) */ .hpc-hint { margin-top: 9px; padding-top: 9px; border-top: 1px solid rgba(245,201,119,0.12); font-size: 11px; line-height: 1.4; text-align: center; color: rgba(244,237,224,0.5); font-weight: 600; } .hpc-locate { text-align: center; padding: 12px 0 4px; } .hpc-locate-btn { background: transparent; border: 1px solid rgba(245,201,119,0.30); color: var(--gold); border-radius: 999px; padding: 7px 14px; font-family: var(--font-ui); font-weight: 700; font-size: 12px; cursor: pointer; touch-action: manipulation; } /* ──────────────────────────────────────────────────────────────── v53.5 HALAL SCANNER NAV-BUTTON + PAGE ──────────────────────────────────────────────────────────────── */ #page-halal { padding-top: 16px; } .halal-hero { text-align: center; padding: 24px 16px; } .halal-hero-emoji { font-size: 64px; display: block; margin-bottom: 8px; filter: drop-shadow(0 4px 12px rgba(74,222,128,0.30)); } .halal-hero-title { font-family: var(--font-ui); font-weight: 800; font-size: 24px; color: var(--text); letter-spacing: -0.4px; } .halal-hero-sub { font-size: 13.5px; color: var(--text-muted); margin-top: 4px; max-width: 280px; margin-left: auto; margin-right: auto; } .halal-search-row { display: flex; gap: 8px; margin: 18px 0; } .halal-search-input { flex: 1; background: rgba(36,32,48,0.85); border: 1px solid rgba(245,201,119,0.18); border-radius: 12px; padding: 12px 14px; color: var(--text); font-family: var(--font-ui); font-size: 14.5px; outline: none; } .halal-search-input::placeholder { color: var(--text-dim); } .halal-scan-btn { width: 46px; height: 46px; background: linear-gradient(135deg, var(--gold), var(--gold-deep)); border: none; border-radius: 12px; color: #1a1408; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .halal-result { border-radius: 18px; padding: 18px; margin-bottom: 14px; border: 1px solid; } .halal-result-halal { background: rgba(74,222,128,0.10); border-color: rgba(74,222,128,0.35); } .halal-result-haram { background: rgba(251,113,133,0.10); border-color: rgba(251,113,133,0.35); } .halal-result-unknown { background: rgba(245,201,119,0.08); border-color: rgba(245,201,119,0.30); } .halal-result-badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; } .halal-result-halal .halal-result-badge { background: var(--emerald); color: #052e10; } .halal-result-haram .halal-result-badge { background: var(--rose); color: #2a0810; } .halal-result-unknown .halal-result-badge { background: var(--gold); color: #1a1408; } .halal-result-name { font-family: var(--font-ui); font-weight: 800; font-size: 18px; color: var(--text); } .halal-result-reason { font-size: 13px; color: var(--text-muted); margin-top: 4px; line-height: 1.4; } .halal-cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 14px; } .halal-cat-pill { background: rgba(36,32,48,0.65); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 10px 12px; color: var(--text); font-size: 13px; cursor: pointer; touch-action: manipulation; text-align: left; } .halal-cat-pill:active { transform: scale(0.97); } /* ──────────────────────────────────────────────────────────────── v53.6 THEME + SPRACHE — Settings + Onboarding Toggle ──────────────────────────────────────────────────────────────── */ .theme-row, .lang-row { display: flex; gap: 8px; } .theme-pill, .lang-pill { flex: 1; background: var(--surface-elev); border: 1.5px solid var(--border); color: var(--text); border-radius: 12px; padding: 11px 12px; font-family: var(--font-ui); font-weight: 700; font-size: 13.5px; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: all 0.18s ease; } .theme-pill.active, .lang-pill.active { background: linear-gradient(135deg, var(--gold-glow), transparent), var(--surface); border-color: var(--gold); color: var(--gold); } /* Light-Mode Variablen (wenn html.theme-light gesetzt) */ html.theme-light { --bg: #f7f4eb; --bg-soft: #efe9d8; --surface: #ffffff; --surface-elev: #f0ebde; --surface-warm: #fcf6e6; --border: rgba(35,28,12,0.10); --border-strong: rgba(212,162,71,0.30); --text: #1a1408; --text-muted: rgba(26,20,8,0.62); --text-dim: rgba(26,20,8,0.35); } html.theme-light body { background: var(--bg); } html.theme-light .app-header { background: rgba(247,244,235,0.78); border-bottom-color: rgba(0,0,0,0.06); } html.theme-light .bottom-nav.bottom-nav { background: rgba(247,244,235,0.82); border-top-color: rgba(0,0,0,0.06); } /* ╔══════════════════════════════════════════════════════════════════╗ ║ v54 ★ Settings + Clan + Family Bulletproof + Modals ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* v54: Settings-Modal ULTRA force show (bei Inline-Style display:flex) */ .modal-overlay { position: fixed !important; inset: 0 !important; z-index: 9000; } .modal-overlay.is-open { z-index: 99999 !important; } /* v54: Family-Empty + Active triple-defense Visibility */ #page-family.no-family #familyActive, #page-family.no-family #familyActive[hidden] { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; pointer-events: none !important; } #page-family.has-family #familyEmpty { display: none !important; visibility: hidden !important; height: 0 !important; pointer-events: none !important; } /* v54: Clan-Member-Liste */ .clan-members { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; } .clan-member { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; } .clan-member.is-me { background: linear-gradient(135deg, var(--gold-glow), transparent 70%), var(--surface); border-color: var(--gold); } .clan-member .cm-rank { font-size: 14px; font-weight: 800; min-width: 28px; color: var(--gold); } .clan-member .cm-av { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-elev); color: var(--gold); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; } .clan-member.is-me .cm-av { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #1a1408; } .clan-member .cm-nm { flex: 1; color: var(--text); font-weight: 700; font-size: 14px; } .clan-member .cm-xp { color: var(--gold); font-weight: 800; font-variant-numeric: tabular-nums; font-size: 13px; } /* v54: Clan Empty + Header */ .clan-empty { text-align: center; padding: 24px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; margin: 14px 0; } .clan-empty .ce-icon { font-size: 48px; margin-bottom: 8px; } .clan-empty .ce-title { font-family: var(--font-ui); font-weight: 800; font-size: 18px; color: var(--text); } .clan-empty .ce-desc { font-size: 13px; color: var(--text-muted); margin: 6px 0 14px; } .clan-empty .ce-actions { display: flex; flex-direction: column; gap: 8px; } .clan-header { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 18px; padding: 14px; margin-bottom: 12px; } .ch-logo { width: 50px; height: 50px; font-size: 28px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--gold-glow), transparent); border-radius: 14px; flex-shrink: 0; } .ch-info { flex: 1; min-width: 0; } .ch-name { font-family: var(--font-ui); font-weight: 800; font-size: 17px; color: var(--text); letter-spacing: -0.3px; } .ch-meta { font-size: 12px; color: var(--text-muted); } .ch-meta strong { color: var(--gold); } .ch-code { background: var(--surface-elev); border: 1px solid var(--border-strong); color: var(--gold); border-radius: 10px; padding: 6px 12px; font-family: var(--font-ui); font-weight: 700; font-size: 12px; } .clan-desc { background: rgba(245,201,119,0.06); border-radius: 12px; padding: 10px 14px; color: var(--text-muted); font-size: 13px; margin-bottom: 12px; } .leave-clan-btn { width: 100%; background: transparent; border: 1px solid rgba(251,113,133,0.30); color: var(--rose); border-radius: 12px; padding: 11px; font-family: var(--font-ui); font-weight: 700; font-size: 14px; margin-top: 16px; cursor: pointer; } /* v54: Clan-Icon-Picker + Color-Picker */ .clan-icon-picker { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; } .cip-btn { background: var(--surface-elev); border: 1.5px solid var(--border); color: var(--text); border-radius: 10px; padding: 8px; font-size: 22px; cursor: pointer; aspect-ratio: 1; display: inline-flex; align-items: center; justify-content: center; touch-action: manipulation; } .cip-btn.active { border-color: var(--gold); background: linear-gradient(135deg, var(--gold-glow), transparent), var(--surface); } .clan-color-picker { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; } .ccp-btn { border: 2px solid transparent; border-radius: 50%; aspect-ratio: 1; cursor: pointer; touch-action: manipulation; } .ccp-btn.active { border-color: var(--text); transform: scale(1.10); } /* v54: Points-Page Week-Chart Bars */ .week-chart { display: flex; align-items: flex-end; justify-content: space-between; gap: 4px; height: 100px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px; } .wc-day { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; height: 100%; justify-content: flex-end; } .wc-bar { width: 100%; min-height: 6px; background: var(--emerald); border-radius: 6px 6px 4px 4px; box-shadow: 0 0 10px rgba(74,222,128,0.30); } .wc-day.today .wc-bar { background: var(--gold); box-shadow: 0 0 12px var(--gold-glow); } .wc-name { font-size: 10px; font-weight: 700; color: var(--text-muted); } .wc-day.today .wc-name { color: var(--gold); } /* v54: XP-Grid */ .xp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 14px; } .xp-item { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 6px; text-align: center; } .xp-icon { font-size: 20px; display: block; } .xp-lbl { font-size: 10px; font-weight: 700; color: var(--text-muted); margin-top: 2px; } .xp-num { font-family: var(--font-ui); font-weight: 800; font-size: 16px; color: var(--gold); margin-top: 2px; } /* v54: Achievement-Grid */ .achievements-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .ach-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 10px 6px; text-align: center; opacity: 0.5; transition: all 0.18s ease; } .ach-card.unlocked { opacity: 1; background: linear-gradient(135deg, var(--gold-glow), transparent), var(--surface); border-color: var(--gold); } .ach-card-icon { font-size: 28px; } .ach-card-name { font-family: var(--font-ui); font-weight: 800; font-size: 11px; color: var(--text); margin-top: 4px; } .ach-card-desc { font-size: 9.5px; color: var(--text-muted); margin-top: 2px; line-height: 1.3; } /* ════════════════════════════════════════════════════════════════ v60 ★ THEME-LIGHT VERVOLLSTÄNDIGUNG Damit der Light-Mode-Toggle eine echte, sichtbare Wirkung hat. Vorher waren nur 5 Variablen + 2 Selektoren überschrieben → halbgar. Jetzt: Karten, Inputs, Buttons, Modals, Nav alle korrekt umgefärbt. ════════════════════════════════════════════════════════════════ */ html.theme-light { --gold: #b88830; --gold-soft: #d4a247; --gold-glow: rgba(184, 136, 48, 0.18); --shadow-soft: 0 2px 8px rgba(20, 14, 0, 0.06); --shadow-strong: 0 8px 24px rgba(20, 14, 0, 0.10); } /* Karten + Surfaces */ html.theme-light .card, html.theme-light .surface, html.theme-light .home-card, html.theme-light .prayer-card, html.theme-light .quick-card, html.theme-light .halal-result, html.theme-light .ach-card, html.theme-light .clan-header, html.theme-light .level-hero, html.theme-light .pf34-hero, html.theme-light .pf34-week, html.theme-light .xp-item, html.theme-light .quick-xp-btn, html.theme-light .week-chart, html.theme-light .settings-section, html.theme-light .modal-content, html.theme-light .modal-card, html.theme-light .modal-body, html.theme-light .modal-overlay > .modal-inner { background: var(--surface) !important; color: var(--text); border-color: var(--border); box-shadow: var(--shadow-soft); } /* Inputs */ html.theme-light input[type="text"], html.theme-light input[type="search"], html.theme-light input[type="number"], html.theme-light textarea, html.theme-light select, html.theme-light .settings-input { background: #ffffff !important; color: var(--text) !important; border: 1px solid var(--border) !important; } html.theme-light input::placeholder, html.theme-light textarea::placeholder { color: var(--text-dim) !important; } /* Bottom-Nav Icons */ html.theme-light .bottom-nav .nav-item, html.theme-light .bn-item { color: var(--text-muted); } html.theme-light .bottom-nav .nav-item.active, html.theme-light .bn-item.active { color: var(--gold); } /* Text-Defaults */ html.theme-light body, html.theme-light .page, html.theme-light .section-title, html.theme-light .pf34-title, html.theme-light h1, html.theme-light h2, html.theme-light h3 { color: var(--text); } /* Buttons */ html.theme-light .btn-gold { background: linear-gradient(135deg, var(--gold-soft), var(--gold)); color: #ffffff; border: none; } html.theme-light .btn-outline { background: transparent; color: var(--gold); border: 1px solid var(--gold); } /* Bayan / Mauer Posts */ html.theme-light .mauer-post, html.theme-light .post-card { background: var(--surface) !important; color: var(--text); border: 1px solid var(--border); } /* Modal-Overlay Dimmung weniger schwarz im Light Mode */ html.theme-light .modal-overlay { background: rgba(35, 28, 12, 0.45); } /* Theme/Lang Pills */ html.theme-light .theme-pill, html.theme-light .lang-pill { background: var(--surface); color: var(--text); border: 1px solid var(--border); } html.theme-light .theme-pill.active, html.theme-light .lang-pill.active { background: linear-gradient(135deg, var(--gold-glow), transparent), var(--surface); border-color: var(--gold); color: var(--gold); } /* Status-Bar (Halal Badges bleiben farbig) */ html.theme-light .halal-result-halal { background: rgba(46, 160, 67, 0.10) !important; } html.theme-light .halal-result-haram { background: rgba(220, 50, 50, 0.10) !important; } html.theme-light .halal-result-unknown { background: rgba(120, 120, 120, 0.08) !important; } /* SVG Disc im Light Mode */ html.theme-light .pf34-disc-bg { stroke: rgba(35, 28, 12, 0.10); } html.theme-light .pf34-disc-fill { stroke: var(--gold); } /* Smooth transition damit der Switch sichtbar ist */ html.theme-light body, html body { transition: background-color 280ms ease, color 280ms ease; } /* ════════════════════════════════════════════════════════════════ v69 ★ BRUTAL SHELL — Schönes Vollbild-Wrapper Design Forciert dark + gold im Brutal-Overlay, egal welches Theme aktiv ist. Damit pf34 Disc/Bars/Cards + Settings-Modal-Card hübsch aussehen. ════════════════════════════════════════════════════════════════ */ #brutalOverlay.sabr-brutal-shell { /* Force dark-Vars im Shell, egal ob html.theme-light/dark. v389: exakt gleiche Töne wie der Rest der App (vorher bläulich #070b15 → Farb-Bruch) */ --bg: #0c0d12; --bg-soft: #12131c; --surface: #181a26; --surface-elev: #221f30; --surface-warm: #1f1a26; --border: rgba(212,162,71,0.18); --border-strong: rgba(212,162,71,0.30); --text: #f4ede0; --text-muted: rgba(244,237,224,0.65); --text-dim: rgba(244,237,224,0.40); --gold: #d4a247; --gold-soft: #e0b25a; --gold-glow: rgba(212,162,71,0.20); --emerald: #4ea372; --emerald-glow: rgba(78,163,114,0.20); color: var(--text); } /* Cards/Surfaces im Shell — alle dark + gold-border */ #brutalOverlay .modal-card, #brutalOverlay .settings-section, #brutalOverlay .pf34-hero, #brutalOverlay .pf34-week, #brutalOverlay .pf34-br-row, #brutalOverlay .ach-card, #brutalOverlay .clan-header, #brutalOverlay .clan-empty, #brutalOverlay .quick-xp-btn, #brutalOverlay .qp-pill { background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--border) !important; } #brutalOverlay .settings-section { border-radius: 18px !important; padding: 18px 16px !important; margin-bottom: 14px !important; } #brutalOverlay .settings-label { color: var(--gold) !important; font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; margin-bottom: 10px !important; display: block !important; } #brutalOverlay .settings-input { background: var(--surface-elev) !important; color: var(--text) !important; border: 1px solid var(--border) !important; border-radius: 12px !important; padding: 12px 14px !important; font-size: 15px !important; width: 100% !important; } #brutalOverlay .settings-input::placeholder { color: var(--text-dim) !important; } /* Pills im Shell (Gender / Goal / Theme / Lang) */ #brutalOverlay .gender-pill, #brutalOverlay .theme-pill, #brutalOverlay .lang-pill { background: var(--surface-elev) !important; color: var(--text-muted) !important; border: 1px solid var(--border) !important; border-radius: 999px !important; padding: 10px 18px !important; font-size: 14px !important; font-weight: 600 !important; cursor: pointer !important; flex: 1 !important; text-align: center !important; transition: all 0.2s ease !important; } #brutalOverlay .gender-pill.active, #brutalOverlay .theme-pill.active, #brutalOverlay .lang-pill.active { background: linear-gradient(135deg, var(--gold), var(--gold-soft)) !important; color: #0a0a0a !important; border-color: var(--gold) !important; box-shadow: 0 4px 16px var(--gold-glow) !important; transform: scale(1.02) !important; } #brutalOverlay .gender-row, #brutalOverlay .theme-row, #brutalOverlay .lang-row { display: flex !important; gap: 10px !important; } /* Notification-Toggle hübsch */ #brutalOverlay .settings-toggle-row { display: flex !important; justify-content: space-between !important; align-items: center !important; } #brutalOverlay .settings-toggle-lbl { color: var(--text) !important; font-size: 15px !important; } #brutalOverlay .settings-toggle { position: relative !important; display: inline-block !important; width: 54px !important; height: 30px !important; cursor: pointer !important; } #brutalOverlay .settings-toggle input { opacity: 0 !important; width: 0 !important; height: 0 !important; } #brutalOverlay .settings-toggle-track { position: absolute !important; inset: 0 !important; background: var(--surface-elev) !important; border: 1px solid var(--border) !important; border-radius: 999px !important; transition: background 0.2s ease !important; } #brutalOverlay .settings-toggle-track::before { content: '' !important; position: absolute !important; width: 22px !important; height: 22px !important; top: 3px !important; left: 3px !important; background: var(--text) !important; border-radius: 50% !important; transition: transform 0.2s ease !important; } #brutalOverlay .settings-toggle input:checked + .settings-toggle-track { background: var(--gold) !important; border-color: var(--gold) !important; } #brutalOverlay .settings-toggle input:checked + .settings-toggle-track::before { transform: translateX(24px) !important; background: #0a0a0a !important; } /* About-Text */ #brutalOverlay .about-text { color: var(--text-muted) !important; font-size: 13.5px !important; line-height: 1.5 !important; } /* Buttons im Shell */ #brutalOverlay .btn-outline { background: transparent !important; color: var(--gold) !important; border: 1px solid var(--gold) !important; border-radius: 12px !important; padding: 12px 16px !important; font-size: 14px !important; font-weight: 600 !important; width: 100% !important; cursor: pointer !important; } #brutalOverlay .btn-outline.danger-btn { color: #ff6b6b !important; border-color: #ff6b6b !important; } #brutalOverlay .btn-gold { background: linear-gradient(135deg, var(--gold), var(--gold-soft)) !important; color: #0a0a0a !important; border: none !important; border-radius: 12px !important; padding: 14px 18px !important; font-size: 15px !important; font-weight: 700 !important; cursor: pointer !important; } /* About-Text Strong */ #brutalOverlay .about-text strong { color: var(--gold) !important; } /* Versteckte legacy-Punkte-Elemente wieder sichtbar */ #brutalOverlay .clan-empty, #brutalOverlay .clan-header, #brutalOverlay .clan-desc, #brutalOverlay .clan-members, #brutalOverlay .leave-clan-btn, #brutalOverlay .achievements-grid, #brutalOverlay .quick-xp-grid, #brutalOverlay .section-title, #brutalOverlay .quick-prayers { display: block !important; } #brutalOverlay .quick-xp-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; } #brutalOverlay .quick-xp-btn { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 16px 12px !important; border-radius: 14px !important; color: var(--text) !important; cursor: pointer !important; transition: transform 0.15s ease !important; } #brutalOverlay .quick-xp-btn:active { transform: scale(0.96) !important; } #brutalOverlay .quick-xp-btn .qxi { font-size: 26px !important; margin-bottom: 4px !important; } #brutalOverlay .quick-xp-btn .qxl { font-size: 12px !important; color: var(--text-muted) !important; margin-bottom: 4px !important; } #brutalOverlay .quick-xp-btn .qxp { font-size: 14px !important; font-weight: 700 !important; color: var(--gold) !important; } #brutalOverlay .quick-prayers { display: grid !important; grid-template-columns: repeat(5, 1fr) !important; gap: 8px !important; } #brutalOverlay .qp-pill { display: flex !important; flex-direction: column !important; align-items: center !important; padding: 12px 6px !important; border-radius: 12px !important; cursor: pointer !important; } #brutalOverlay .qp-pill.done { background: linear-gradient(135deg, var(--gold), var(--gold-soft)) !important; color: #0a0a0a !important; border-color: var(--gold) !important; box-shadow: 0 4px 14px var(--gold-glow) !important; } #brutalOverlay .qp-pill .qp-name { font-size: 11px !important; font-weight: 700 !important; margin-bottom: 4px !important; } #brutalOverlay .qp-pill .qp-check { font-size: 18px !important; line-height: 1 !important; } /* Achievement Grid */ #brutalOverlay .achievements-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; } #brutalOverlay .ach-card { display: flex !important; flex-direction: column !important; align-items: center !important; padding: 12px 6px !important; border-radius: 12px !important; text-align: center !important; opacity: 0.5 !important; } #brutalOverlay .ach-card.unlocked { opacity: 1 !important; border-color: var(--gold) !important; background: linear-gradient(180deg, rgba(212,162,71,0.15), rgba(212,162,71,0.05)) !important; } #brutalOverlay .ach-card-icon { font-size: 26px !important; margin-bottom: 4px !important; } #brutalOverlay .ach-card-name { font-size: 11px !important; font-weight: 700 !important; color: var(--text) !important; margin-bottom: 2px !important; } #brutalOverlay .ach-card-desc { font-size: 9.5px !important; color: var(--text-muted) !important; } /* Clan Empty State */ #brutalOverlay .clan-empty { display: flex !important; flex-direction: column !important; align-items: center !important; padding: 24px 16px !important; border-radius: 18px !important; text-align: center !important; } #brutalOverlay .ce-icon { font-size: 42px !important; margin-bottom: 12px !important; } #brutalOverlay .ce-title { font-size: 16px !important; font-weight: 700 !important; color: var(--text) !important; margin-bottom: 6px !important; } #brutalOverlay .ce-desc { font-size: 13px !important; color: var(--text-muted) !important; margin-bottom: 18px !important; line-height: 1.4 !important; } #brutalOverlay .ce-actions { display: flex !important; flex-direction: column !important; gap: 8px !important; width: 100% !important; } /* PF34 Hero Bereich */ #brutalOverlay .pf34-hero { border-radius: 22px !important; padding: 22px 18px !important; margin-bottom: 16px !important; position: relative !important; } #brutalOverlay .pf34-hero-top { display: flex !important; align-items: center !important; gap: 16px !important; margin-bottom: 18px !important; } #brutalOverlay .pf34-disc { position: relative !important; width: 76px !important; height: 76px !important; flex-shrink: 0 !important; } #brutalOverlay .pf34-disc-svg { width: 100% !important; height: 100% !important; transform: rotate(0) !important; } #brutalOverlay .pf34-disc-bg { stroke: rgba(244,237,224,0.10) !important; fill: none !important; stroke-width: 6 !important; } #brutalOverlay .pf34-disc-fill { stroke: var(--gold) !important; fill: none !important; stroke-width: 6 !important; stroke-linecap: round !important; } #brutalOverlay .pf34-disc-inner { position: absolute !important; inset: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; } #brutalOverlay .pf34-disc-eb { font-size: 9px !important; letter-spacing: 1.5px !important; color: var(--text-muted) !important; font-weight: 700 !important; } #brutalOverlay .pf34-disc-num { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important; font-size: 26px !important; font-weight: 700 !important; color: var(--gold) !important; line-height: 1 !important; } #brutalOverlay .pf34-info { flex: 1 !important; min-width: 0 !important; } #brutalOverlay .pf34-info-eb { font-size: 10px !important; letter-spacing: 1.8px !important; color: var(--text-muted) !important; font-weight: 700 !important; margin-bottom: 4px !important; } #brutalOverlay .pf34-info-name { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important; font-size: 22px !important; font-weight: 700 !important; color: var(--text) !important; margin-bottom: 2px !important; } #brutalOverlay .pf34-info-ar { font-family: Amiri, Georgia, serif !important; font-size: 17px !important; color: var(--gold) !important; direction: rtl !important; } #brutalOverlay .pf34-xp-row { display: flex !important; justify-content: space-between !important; font-size: 11px !important; color: var(--text-muted) !important; margin-bottom: 6px !important; } #brutalOverlay .pf34-xp-cur { color: var(--gold) !important; font-weight: 700 !important; } #brutalOverlay .pf34-xp-max { color: var(--text-dim) !important; } #brutalOverlay .pf34-xp-bar { height: 8px !important; background: rgba(244,237,224,0.08) !important; border-radius: 999px !important; overflow: hidden !important; margin-bottom: 8px !important; } #brutalOverlay .pf34-xp-fill { height: 100% !important; background: linear-gradient(90deg, var(--gold), var(--gold-soft)) !important; border-radius: 999px !important; box-shadow: 0 0 12px var(--gold-glow) !important; transition: width 0.5s ease !important; } #brutalOverlay .pf34-xp-meta { font-size: 11px !important; color: var(--text-muted) !important; text-align: center !important; } #brutalOverlay .pf34-next-name { color: var(--gold) !important; } #brutalOverlay .pf34-week { padding: 18px 16px !important; border-radius: 22px !important; margin-bottom: 16px !important; } #brutalOverlay .pf34-week-head { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 14px !important; } #brutalOverlay .pf34-week-title { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important; font-size: 17px !important; font-weight: 700 !important; color: var(--text) !important; } #brutalOverlay .pf34-week-pill { background: rgba(78,163,114,0.15) !important; color: var(--emerald) !important; font-weight: 700 !important; font-size: 11px !important; padding: 4px 10px !important; border-radius: 999px !important; } #brutalOverlay .pf34-bar-chart { display: grid !important; grid-template-columns: repeat(7, 1fr) !important; gap: 6px !important; align-items: end !important; height: 140px !important; padding-bottom: 24px !important; position: relative !important; } #brutalOverlay .pf34-bc-col { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 6px !important; height: 100% !important; justify-content: flex-end !important; } #brutalOverlay .pf34-bc-bar { width: 100% !important; min-height: 6px !important; background: var(--emerald) !important; border-radius: 8px 8px 4px 4px !important; box-shadow: 0 0 10px var(--emerald-glow) !important; } #brutalOverlay .pf34-bc-col.is-today .pf34-bc-bar { background: var(--gold) !important; box-shadow: 0 0 14px var(--gold-glow) !important; } #brutalOverlay .pf34-bc-day { font-size: 11px !important; font-weight: 700 !important; color: var(--text-muted) !important; } #brutalOverlay .pf34-bc-col.is-today .pf34-bc-day { color: var(--gold) !important; } /* Breakdown Rows */ #brutalOverlay .pf34-break-head { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important; font-weight: 700 !important; font-size: 17px !important; color: var(--text) !important; margin: 4px 0 12px !important; } #brutalOverlay .pf34-breakdown { display: flex !important; flex-direction: column !important; gap: 10px !important; margin-bottom: 18px !important; } #brutalOverlay .pf34-br-row { border-radius: 14px !important; padding: 14px 16px !important; display: flex !important; align-items: center !important; gap: 14px !important; position: relative !important; padding-bottom: 16px !important; } #brutalOverlay .pf34-br-ic { width: 40px !important; height: 40px !important; border-radius: 12px !important; background: var(--surface-elev) !important; border: 1px solid var(--border) !important; color: var(--gold) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; font-size: 19px !important; } #brutalOverlay .pf34-br-name { flex: 1 !important; color: var(--text) !important; font-weight: 700 !important; font-size: 14.5px !important; } #brutalOverlay .pf34-br-val { color: var(--emerald) !important; font-weight: 800 !important; font-variant-numeric: tabular-nums !important; font-size: 14.5px !important; } #brutalOverlay .pf34-br-bar { position: absolute !important; bottom: 0 !important; left: 14px !important; right: 14px !important; height: 3px !important; border-radius: 999px !important; background: rgba(244,237,224,0.08) !important; overflow: hidden !important; } #brutalOverlay .pf34-br-fill { display: block !important; height: 100% !important; background: var(--emerald) !important; border-radius: 999px !important; box-shadow: 0 0 8px var(--emerald-glow) !important; transition: width 0.5s ease !important; } /* Pulse Animation am Close-Button beim hover */ #brutalOverlay #brutalClose:active { transform: scale(0.92) !important; } /* ════════════════════════════════════════════════════════════════ v71 ★ MILESTONES ROADMAP XP-Schwellen mit Belohnungen — locked icon → gold wenn erreicht ════════════════════════════════════════════════════════════════ */ .xp-milestones { display: flex !important; flex-direction: column !important; gap: 10px !important; margin-bottom: 18px !important; } .ms-row { display: grid !important; grid-template-columns: 44px 1fr auto !important; grid-template-rows: auto 4px !important; column-gap: 12px !important; align-items: center !important; padding: 12px 14px !important; background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 14px !important; position: relative !important; } .ms-row.ms-reached { background: linear-gradient(180deg, rgba(212,162,71,0.12), rgba(212,162,71,0.04)) !important; border-color: var(--gold) !important; } .ms-icon { font-size: 28px !important; width: 44px !important; height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 12px !important; background: var(--surface-elev) !important; border: 1px solid var(--border) !important; grid-row: span 2 !important; } .ms-row.ms-reached .ms-icon { background: linear-gradient(135deg, var(--gold), var(--gold-soft)) !important; border-color: var(--gold) !important; box-shadow: 0 4px 14px var(--gold-glow) !important; } .ms-info { display: flex !important; flex-direction: column !important; gap: 2px !important; min-width: 0 !important; } .ms-label { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important; font-weight: 700 !important; font-size: 15px !important; color: var(--text) !important; line-height: 1.1 !important; } .ms-reward { font-size: 11px !important; color: var(--text-muted) !important; letter-spacing: 0.4px !important; text-transform: uppercase !important; font-weight: 600 !important; } .ms-row.ms-reached .ms-reward { color: var(--gold) !important; } .ms-xp { font-variant-numeric: tabular-nums !important; font-weight: 800 !important; font-size: 13px !important; color: var(--text-muted) !important; text-align: right !important; } .ms-row.ms-reached .ms-xp { color: var(--gold) !important; } .ms-bar { grid-column: 2 / span 2 !important; height: 3px !important; border-radius: 999px !important; background: rgba(244,237,224,0.08) !important; overflow: hidden !important; display: block !important; } .ms-fill { display: block !important; height: 100% !important; background: linear-gradient(90deg, var(--gold), var(--gold-soft)) !important; border-radius: 999px !important; transition: width 0.5s ease !important; } /* ════════════════════════════════════════════════════════════════ v73 ★ PHONE-FRAME MOCKUP für Desktop / Laptop Auf Bildschirmen >= 768px wird die ganze App in einem iPhone- Mockup-Rahmen gezeigt — wie wenn man die App aufm Handy sieht. Auf echten Handys (< 768px) bleibt's normal full-screen. ════════════════════════════════════════════════════════════════ */ @media (min-width: 768px) and (hover: hover) and (pointer: fine) { html { background: radial-gradient(ellipse 80% 60% at 20% 20%, rgba(212,162,71,0.06), transparent 60%), radial-gradient(ellipse 60% 50% at 80% 80%, rgba(78,163,114,0.05), transparent 50%), linear-gradient(135deg, #0a0d18 0%, #050811 100%) !important; min-height: 100vh !important; height: 100vh !important; overflow: hidden !important; display: flex !important; align-items: center !important; justify-content: center !important; } body { /* iPhone-Frame Maße */ position: relative !important; width: 414px !important; height: 896px !important; max-width: calc(100vw - 40px) !important; max-height: calc(100vh - 32px) !important; margin: 0 !important; border-radius: 50px !important; border: 8px solid #0a0d18 !important; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.04), 0 0 0 2px #1a1d28, 0 35px 90px rgba(0,0,0,0.75), 0 8px 24px rgba(0,0,0,0.5) !important; overflow: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; /* transform erzeugt neuen containing-block fuer position:fixed Kinder */ transform: translateZ(0) !important; /* iPhone Notch */ } body::before { content: '' !important; position: absolute !important; top: 8px !important; left: 50% !important; transform: translateX(-50%) !important; width: 110px !important; height: 26px !important; background: #050811 !important; border-radius: 14px !important; z-index: 2147483646 !important; /* unter brutalOverlay aber ueber allem anderen */ pointer-events: none !important; } /* Position-fixed Children sollen IM Frame bleiben (nicht zum Viewport eskapieren) */ /* Modal-overlay → absolute zur body */ .modal-overlay { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; inset: 0 !important; } /* brutalOverlay – auch absolute zur body */ #brutalOverlay, [id^="brutalOverlay"] { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; inset: 0 !important; } /* App-Header sticky/fixed darf nicht aus Frame raus */ .app-header { position: sticky !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; } /* Bottom-Nav fixed am Frame-Bottom (body hat transform → fixed bleibt im Frame). v146: war sticky → rutschte bei Fullscreen-Pages (Tawba/Tasbih sind position:fixed, Flow kollabiert) nach OBEN. fixed hält sie zuverlässig unten auf Mac/iPad. */ .bottom-nav { position: fixed !important; top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; } /* Tasbih Fullscreen + Adhkar Fullscreen auch in Frame */ .tasbih-fullscreen, .adhkar-fullscreen, #tasbihFullscreen, #adhkarFullscreen { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; } /* Toast + xpFloat innerhalb Frame */ #toast, #xpFloat { position: absolute !important; } /* Version-Update-Banner */ .version-update-banner { position: absolute !important; bottom: 70px !important; left: 16px !important; right: 16px !important; } } /* Auf grossen Screens noch mehr Drehraum */ @media (min-width: 1024px) and (hover: hover) and (pointer: fine) { body { width: 414px !important; height: min(896px, calc(100vh - 64px)) !important; } } /* ════════════════════════════════════════════════════════════════ v77 ★ FAMILY HEADER · Code-Pill + Icon Tile ════════════════════════════════════════════════════════════════ */ .fm-code-pill { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 14px; border-radius: 999px; background: rgba(212,162,71,0.10); border: 1px solid rgba(212,162,71,0.40); color: var(--gold, #d4a247); font-family: var(--font-ui, system-ui), sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.5px; cursor: pointer; transition: transform 0.15s ease, background 0.15s ease; touch-action: manipulation; } .fm-code-pill:active { transform: scale(0.97); background: rgba(212,162,71,0.16); } .fm-code-pill .fm-code-label { font-size: 10px; opacity: 0.75; letter-spacing: 1.4px; } .fm-code-pill .fm-code-val { font-family: 'SF Mono', Menlo, monospace; letter-spacing: 1.5px; font-size: 14px; } /* Familie Shield (Icon-Tile, Container) */ .fm-shield { width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, rgba(212,162,71,0.20), rgba(212,162,71,0.05)); border: 1px solid rgba(212,162,71,0.30); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--gold); } /* Brutal-Overlay scope: gleiche Farben in dark-Shell */ #brutalOverlay .fm-code-pill { background: rgba(212,162,71,0.10) !important; border-color: rgba(212,162,71,0.40) !important; color: var(--gold, #d4a247) !important; } #brutalOverlay .fm-shield { background: linear-gradient(135deg, rgba(212,162,71,0.20), rgba(212,162,71,0.05)) !important; border-color: rgba(212,162,71,0.30) !important; } /* ════════════════════════════════════════════════════════════════ v80 ★ FAMILY WOW-EFFECTS - Crown-Glow Pulse auf #1 - Live-Activity breathing dot - Counter Tick-Animation - Podium Hero-Glow als Leaderboard-Bottom ════════════════════════════════════════════════════════════════ */ /* Live-Activity Dot: breathing pulse */ .live-activity { display: flex !important; align-items: center; gap: 12px; padding: 12px 16px; background: linear-gradient(135deg, rgba(78,163,114,0.10), rgba(78,163,114,0.04)); border: 1px solid rgba(78,163,114,0.30); border-radius: 14px; margin-bottom: 14px; font-weight: 600; color: var(--emerald, #4ea372); } .live-activity .live-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--emerald, #4ea372); box-shadow: 0 0 0 0 var(--emerald, #4ea372); animation: liveBreathe 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; flex-shrink: 0; } @keyframes liveBreathe { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(78,163,114,0.7); } 70% { transform: scale(1.15); box-shadow: 0 0 0 12px rgba(78,163,114,0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(78,163,114,0); } } /* Top-Performer Crown: golden glow pulse */ .top-performer { display: flex !important; align-items: center; gap: 14px; padding: 16px 18px; background: radial-gradient(ellipse 80% 60% at 20% 50%, rgba(212,162,71,0.18), transparent 60%), linear-gradient(135deg, rgba(212,162,71,0.12), rgba(212,162,71,0.04)); border: 1px solid rgba(212,162,71,0.40); border-radius: 16px; margin-bottom: 16px; position: relative; overflow: hidden; } .top-performer::before { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,225,160,0.18) 50%, transparent 70%); background-size: 200% 100%; animation: tpShimmer 3s ease-in-out infinite; pointer-events: none; } @keyframes tpShimmer { 0%, 100% { background-position: 200% 0; } 50% { background-position: -100% 0; } } .top-performer .tp-crown { font-size: 32px; animation: crownGlow 2.4s ease-in-out infinite; filter: drop-shadow(0 0 12px rgba(212,162,71,0.7)); flex-shrink: 0; z-index: 1; } @keyframes crownGlow { 0%, 100% { transform: scale(1) rotate(-3deg); filter: drop-shadow(0 0 12px rgba(212,162,71,0.7)) drop-shadow(0 0 4px rgba(255,225,160,0.5)); } 50% { transform: scale(1.15) rotate(3deg); filter: drop-shadow(0 0 24px rgba(212,162,71,1)) drop-shadow(0 0 8px rgba(255,225,160,0.8)); } } .top-performer .tp-info { flex: 1; min-width: 0; z-index: 1; } .top-performer .tp-lbl { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 700; color: var(--text-muted, rgba(244,237,224,0.65)); margin-bottom: 2px; } .top-performer .tp-name { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 18px; font-weight: 700; color: var(--text, #f4ede0); } .top-performer .tp-xp { font-family: 'SF Mono', Menlo, monospace; font-weight: 800; color: var(--gold, #d4a247); font-size: 15px; letter-spacing: 0.5px; z-index: 1; } /* Counter Animation auf der Wochen-Challenge */ .fm-ch-num, .ftc-num { display: inline-block; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); } .fm-ch-num.is-popping, .ftc-num.is-popping { transform: scale(1.3); color: var(--gold, #d4a247); text-shadow: 0 0 20px rgba(212,162,71,0.6); } /* Leaderboard Hero-Style ganz unten */ .fm-leaderboard-head { margin-top: 28px !important; padding: 16px 0 8px; border-top: 1px solid rgba(212,162,71,0.20); } .fm-leaderboard-head .fm-week-title { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-weight: 700; font-size: 22px; background: linear-gradient(135deg, #f5c977, #d4a247); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Podium: Gold-Crown Pulse + Hero-Glow am Boden */ .fm-podium .fm-po-crown { display: inline-block; animation: crownGlow 2.4s ease-in-out infinite; filter: drop-shadow(0 0 8px rgba(212,162,71,0.7)); } .fm-podium .fm-po-1 .fm-po-av { box-shadow: 0 0 0 3px rgba(212,162,71,0.5), 0 8px 28px rgba(212,162,71,0.45); animation: goldPodiumPulse 3s ease-in-out infinite; } @keyframes goldPodiumPulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(212,162,71,0.5), 0 8px 28px rgba(212,162,71,0.45); } 50% { box-shadow: 0 0 0 5px rgba(212,162,71,0.7), 0 12px 40px rgba(212,162,71,0.75); } } /* ════════════════════════════════════════════════════════════════ v81 ★ FAMILY POLISH - Bessere Spacing zwischen Sektionen - Section-Titles mit Gold-Akzent + Margin-Top - Gleichmaeßige Card-Borders + Shadows - Live-Activity prominenter - Stories als Carousel mit Snap ════════════════════════════════════════════════════════════════ */ #page-family .section-title { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important; font-weight: 700 !important; font-size: 17px !important; margin: 24px 0 12px !important; color: var(--text, #1a1408) !important; letter-spacing: -0.2px !important; display: flex !important; align-items: center !important; gap: 8px !important; } #page-family .section-title::before { content: ''; display: inline-block; width: 3px; height: 18px; background: linear-gradient(180deg, var(--gold, #d4a247), var(--gold-soft, #e0b25a)); border-radius: 2px; margin-right: 2px; } /* Family Stories — bessere Card-Optik */ .family-stories { display: flex !important; gap: 10px !important; overflow-x: auto !important; padding-bottom: 4px !important; margin: 12px 0 18px !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; } .family-stories::-webkit-scrollbar { display: none !important; } .story-bubble { flex: 0 0 auto; scroll-snap-align: start; display: flex; gap: 10px; align-items: center; padding: 12px 14px; background: var(--surface, #fff); border: 1px solid var(--border, rgba(35,28,12,0.10)); border-radius: 14px; min-width: 180px; max-width: 220px; box-shadow: 0 2px 8px rgba(20,14,0,0.04); } .story-bubble.is-own { background: linear-gradient(135deg, rgba(212,162,71,0.12), rgba(212,162,71,0.04)); border-color: rgba(212,162,71,0.30); } .story-bubble .story-av { width: 38px; height: 38px; border-radius: 50%; background: var(--surface-elev, #efe9d8); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; flex-shrink: 0; } .story-bubble.is-own .story-av { background: linear-gradient(135deg, var(--gold), var(--gold-soft)); color: #0a0a0a; } .story-bubble .story-info { min-width: 0; flex: 1; } .story-bubble .story-nm { font-weight: 700; font-size: 12px; color: var(--text-muted); letter-spacing: 0.2px; margin-bottom: 2px; } .story-bubble .story-tx { font-weight: 600; font-size: 13.5px; color: var(--text); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .story-bubble .story-tm { font-size: 10.5px; color: var(--text-dim); margin-top: 2px; } /* Reminder Strip Polish */ .reminder-info { font-size: 12.5px !important; color: var(--text-muted) !important; margin-bottom: 10px !important; } .reminder-strip { display: flex !important; gap: 8px !important; overflow-x: auto !important; padding-bottom: 4px !important; } .reminder-strip::-webkit-scrollbar { display: none !important; } .reminder-btn { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; transition: all 0.15s ease; } .reminder-btn:active { transform: scale(0.96); background: linear-gradient(135deg, rgba(212,162,71,0.12), rgba(212,162,71,0.04)); border-color: rgba(212,162,71,0.30); } .reminder-btn .reminder-av { width: 26px; height: 26px; border-radius: 50%; background: var(--surface-elev); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; } .reminder-btn .reminder-nm { font-weight: 600; font-size: 13px; } .reminder-btn .reminder-action { font-size: 11px; color: var(--text-muted); } /* Family-Tasbih Card — fixe Zentrierung */ .family-tasbih-card { display: block !important; margin-bottom: 16px !important; padding: 18px 18px 20px !important; background: radial-gradient(ellipse 100% 60% at 50% 0%, rgba(212,162,71,0.06), transparent 60%), var(--surface) !important; border: 1px solid var(--border-strong, rgba(212,162,71,0.30)) !important; border-radius: 18px !important; } .ftc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .ftc-icon { font-size: 28px; } .ftc-info { flex: 1; min-width: 0; } .ftc-title { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-weight: 700; font-size: 16px; line-height: 1.2; } .ftc-sub { font-size: 12px; color: var(--text-muted); } .ftc-add { background: linear-gradient(135deg, var(--gold), var(--gold-soft)); color: #0a0a0a; border: none; border-radius: 999px; padding: 8px 14px; font-weight: 700; font-size: 13px; cursor: pointer; } .ftc-counter { display: flex; align-items: baseline; gap: 8px; margin: 10px 0; } .ftc-num { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-weight: 700; font-size: 36px; color: var(--gold); font-variant-numeric: tabular-nums; line-height: 1; } .ftc-lbl { font-size: 12px; color: var(--text-muted); } .ftc-bar { height: 6px; background: rgba(212,162,71,0.10); border-radius: 999px; overflow: hidden; margin: 10px 0 8px; } .ftc-bar-fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-soft)); border-radius: 999px; transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 0 10px rgba(212,162,71,0.4); } .ftc-goal { font-size: 11.5px; color: var(--text-muted); } /* Promise-Add-Row */ .promise-add-row { display: flex !important; gap: 8px !important; margin-top: 10px !important; } .promise-add-row input { flex: 1; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); font-size: 14px; } .promise-add-row button { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--gold), var(--gold-soft)); color: #0a0a0a; border: none; font-size: 22px; font-weight: 800; cursor: pointer; } /* Members List */ .members-list { display: flex !important; flex-direction: column !important; gap: 8px !important; } .members-list > * { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; } /* Family Goals */ .family-goals { display: flex !important; flex-direction: column !important; gap: 8px !important; } .fam-goal { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; } .fam-goal.done { background: linear-gradient(135deg, rgba(78,163,114,0.12), rgba(78,163,114,0.04)); border-color: rgba(78,163,114,0.30); } .fam-goal .fg-icon { width: 38px; height: 38px; border-radius: 11px; background: var(--surface-elev); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .fam-goal.done .fg-icon { background: linear-gradient(135deg, var(--emerald), var(--emerald-glow)); color: #fff; } .fam-goal .fg-text { flex: 1; min-width: 0; font-weight: 600; font-size: 13.5px; line-height: 1.3; } .fam-goal .fg-prog { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 13px; color: var(--text-muted); } .fam-goal.done .fg-prog { color: var(--emerald); } /* Leave-Button Polish */ .leave-family-btn, #leaveFamBtn { display: block !important; width: 100% !important; margin: 28px 0 12px !important; padding: 14px !important; background: transparent !important; color: #c84444 !important; border: 1px solid rgba(200,68,68,0.40) !important; border-radius: 14px !important; font-weight: 700 !important; font-size: 14px !important; cursor: pointer !important; transition: all 0.15s ease; } .leave-family-btn:active, #leaveFamBtn:active { background: rgba(200,68,68,0.08) !important; transform: scale(0.98); } /* ════════════════════════════════════════════════════════════════ v82 ★ ERINNERUNG SENDEN — Prefab-Chips + Target-Buttons ════════════════════════════════════════════════════════════════ */ .rsend-prefabs { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin: 10px 0 14px !important; } .rsend-prefab { padding: 8px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-weight: 600; font-size: 13px; cursor: pointer; transition: all 0.15s ease; white-space: nowrap; } .rsend-prefab:active { transform: scale(0.96); } .rsend-prefab.is-active { background: linear-gradient(135deg, var(--gold), var(--gold-soft)) !important; color: #0a0a0a !important; border-color: var(--gold) !important; box-shadow: 0 4px 14px rgba(212,162,71,0.30); transform: scale(1.03); } .rsend-targets { display: flex !important; gap: 8px !important; overflow-x: auto !important; padding-bottom: 4px !important; -webkit-overflow-scrolling: touch !important; } .rsend-targets::-webkit-scrollbar { display: none !important; } .rsend-target { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; transition: all 0.18s ease; } .rsend-target:active { transform: scale(0.96); } .rsend-target.is-sent { background: linear-gradient(135deg, rgba(78,163,114,0.18), rgba(78,163,114,0.06)) !important; border-color: rgba(78,163,114,0.50) !important; animation: rsSentPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes rsSentPop { 0% { transform: scale(0.96); } 50% { transform: scale(1.08); } 100% { transform: scale(1.0); } } .rsend-target .rsend-av { width: 28px; height: 28px; border-radius: 50%; background: var(--surface-elev); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; } .rsend-target .rsend-nm { font-weight: 600; font-size: 13px; } /* ════════════════════════════════════════════════════════════════ v83 ★ Promise-Add Plus-Button clean + perfect zentriert ════════════════════════════════════════════════════════════════ */ .promise-add-row { display: flex !important; align-items: stretch !important; gap: 10px !important; margin-top: 12px !important; } .promise-add-row input { flex: 1 !important; padding: 12px 16px !important; border-radius: 14px !important; border: 1px solid var(--border) !important; background: var(--surface) !important; font-size: 14px !important; font-family: inherit !important; color: var(--text) !important; height: 48px !important; outline: none !important; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .promise-add-row input::placeholder { color: var(--text-dim) !important; } .promise-add-row input:focus { border-color: var(--gold) !important; box-shadow: 0 0 0 3px rgba(212,162,71,0.18) !important; } #promiseAddBtn, .promise-add-row button { width: 48px !important; height: 48px !important; min-width: 48px !important; padding: 0 !important; border-radius: 14px !important; background: linear-gradient(135deg, var(--gold, #d4a247), var(--gold-soft, #e0b25a)) !important; color: #0a0a0a !important; border: none !important; font-size: 24px !important; font-weight: 800 !important; line-height: 1 !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 4px 14px rgba(212,162,71,0.30) !important; transition: transform 0.15s ease, box-shadow 0.15s ease !important; /* Plus visuell perfekt mittig (Glyph hat oft Baseline-Offset) */ text-align: center !important; text-indent: 0 !important; padding-bottom: 2px !important; } #promiseAddBtn:active, .promise-add-row button:active { transform: scale(0.94); box-shadow: 0 2px 8px rgba(212,162,71,0.30) !important; } /* ════════════════════════════════════════════════════════════════ v84 ★ SALAT-HUB · Live-Ummah + Qibla + Today + Hadith + Cities ════════════════════════════════════════════════════════════════ */ #page-salat { padding: 18px 16px 100px; } /* 1. HERO (mit !important damit alte v34-Regeln nicht durchschlagen) */ #page-salat .salat-hero, .salat-hero { position: relative !important; padding: 26px 22px 24px !important; border-radius: 24px !important; margin-bottom: 18px !important; background: radial-gradient(ellipse 90% 70% at 30% 20%, rgba(212,162,71,0.30), transparent 60%), radial-gradient(ellipse 80% 60% at 80% 80%, rgba(78,163,114,0.15), transparent 50%), linear-gradient(135deg, #0b0f1c 0%, #131726 100%) !important; color: #f4ede0 !important; overflow: hidden !important; border: 1px solid rgba(212,162,71,0.30) !important; box-shadow: 0 12px 40px rgba(11,15,28,0.45) !important; } .salat-hero-deco { position: absolute; top: -20%; right: -20%; width: 240px; height: 240px; background: radial-gradient(circle, rgba(212,162,71,0.18), transparent 70%); filter: blur(8px); pointer-events: none; animation: salatGlowFloat 8s ease-in-out infinite alternate; } @keyframes salatGlowFloat { 0% { transform: translate(0, 0); } 100% { transform: translate(-20px, 20px); } } .salat-hero-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1.6px; color: rgba(244,237,224,0.65); margin-bottom: 12px; position: relative; } .salat-hero-count { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; display: flex; align-items: baseline; gap: 8px; position: relative; } .salat-hero-count > span:first-child { font-size: 44px; font-weight: 800; color: var(--gold, #d4a247); letter-spacing: -1.5px; font-variant-numeric: tabular-nums; line-height: 1; text-shadow: 0 0 24px rgba(212,162,71,0.4); animation: counterFlicker 7s ease-in-out infinite; } @keyframes counterFlicker { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } } .salat-hero-unit { font-size: 14px; font-weight: 700; color: rgba(244,237,224,0.7); } .salat-hero-sub { font-size: 14px; color: rgba(244,237,224,0.85); margin-top: 6px; position: relative; } .salat-hero-sub strong { color: var(--gold, #d4a247); font-weight: 700; } .salat-pulse-bar { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 10px 14px; background: rgba(212,162,71,0.10); border: 1px solid rgba(212,162,71,0.25); border-radius: 999px; font-size: 12.5px; color: rgba(244,237,224,0.85); position: relative; } .salat-pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold, #d4a247); box-shadow: 0 0 12px rgba(212,162,71,0.7); animation: liveBreathe 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite; flex-shrink: 0; } /* 2. MEINE GEBETE HEUTE */ .salat-today-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 8px 0 8px; } #page-salat .qp-pill { background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 14px; padding: 12px 6px; display: flex !important; flex-direction: column !important; align-items: center; cursor: pointer; transition: transform 0.15s ease; } #page-salat .qp-pill:active { transform: scale(0.96); } #page-salat .qp-pill.done { background: linear-gradient(135deg, var(--gold), var(--gold-soft)) !important; color: #0a0a0a !important; border-color: var(--gold); box-shadow: 0 4px 16px rgba(212,162,71,0.30); } #page-salat .qp-pill .qp-icon { font-size: 18px; margin-bottom: 2px; } #page-salat .qp-pill .qp-name { font-size: 12px; font-weight: 700; } #page-salat .qp-pill .qp-check { font-size: 14px; margin-top: 4px; } .salat-today-meta { font-size: 12.5px; color: var(--text-muted); text-align: center; margin-bottom: 18px; } /* 3. NÄCHSTES GEBET */ .salat-next-card { background: radial-gradient(ellipse 60% 80% at 80% 20%, rgba(78,163,114,0.15), transparent 60%), var(--surface); border: 1px solid var(--border-strong, rgba(212,162,71,0.30)); border-radius: 20px; padding: 18px 20px; margin-bottom: 22px; text-align: center; } .salat-next-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 1.8px; color: var(--text-muted); margin-bottom: 6px; } .salat-next-name { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 24px; font-weight: 700; color: var(--text); margin-bottom: 2px; } .salat-next-time { font-family: 'SF Mono', Menlo, monospace; font-size: 38px; font-weight: 800; color: var(--gold, #d4a247); line-height: 1; margin: 4px 0; } .salat-next-countdown { font-size: 13px; color: var(--text-muted); } /* 4. QIBLA */ .salat-qibla { display: grid; grid-template-columns: 200px 1fr; gap: 16px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 16px; margin-bottom: 18px; } .salat-qibla-ring { width: 200px; height: 200px; position: relative; } .salat-qibla-svg { width: 100%; height: 100%; } .salat-qibla-bg { stroke: var(--border); } .salat-qibla-marks line { stroke: var(--text-muted); } .salat-qibla-needle polygon { fill: var(--gold, #d4a247); stroke: var(--gold-soft); stroke-width: 1; filter: drop-shadow(0 2px 6px rgba(212,162,71,0.5)); } .salat-qibla-needle circle { fill: var(--gold-soft); } .salat-qibla-lbl { font-family: var(--font-ui); font-size: 10px; font-weight: 700; fill: var(--text-muted); } .salat-qibla-info { display: flex; flex-direction: column; gap: 8px; } .sqi-row { display: flex; justify-content: space-between; font-size: 13px; } .sqi-row .sqi-lbl { color: var(--text-muted); font-weight: 600; } .salat-qibla-btn { margin-top: 6px; background: linear-gradient(135deg, var(--gold), var(--gold-soft)); color: #0a0a0a; border: none; border-radius: 12px; padding: 10px 14px; font-weight: 700; font-size: 13px; cursor: pointer; } @media (max-width: 380px) { .salat-qibla { grid-template-columns: 1fr; text-align: center; } .salat-qibla-ring { margin: 0 auto; width: 180px; height: 180px; } } /* 5. DIESE WOCHE */ .salat-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 18px; } .sw-day { display: flex; flex-direction: column; align-items: center; padding: 12px 4px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); } .sw-day.sw-low { background: rgba(78,163,114,0.10); border-color: rgba(78,163,114,0.20); } .sw-day.sw-mid { background: rgba(78,163,114,0.25); border-color: rgba(78,163,114,0.40); } .sw-day.sw-full { background: linear-gradient(135deg, var(--gold), var(--gold-soft)); border-color: var(--gold); } .sw-day.sw-today { box-shadow: 0 0 0 2px var(--gold), 0 4px 12px rgba(212,162,71,0.30); } .sw-day .sw-num { font-weight: 800; font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 18px; color: var(--text); } .sw-day.sw-full .sw-num { color: #0a0a0a; } .sw-day .sw-day-lbl { font-size: 10px; font-weight: 700; color: var(--text-muted); margin-top: 2px; } .sw-day.sw-full .sw-day-lbl { color: #0a0a0a; } /* 6. HADITH */ .salat-hadith { background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(212,162,71,0.10), transparent 60%), var(--surface); border: 1px solid var(--border-strong, rgba(212,162,71,0.25)); border-radius: 20px; padding: 22px 20px; margin-bottom: 18px; text-align: center; } .salat-hadith .sh-ayah { font-family: Amiri, Georgia, serif; font-size: 22px; color: var(--gold, #d4a247); line-height: 1.6; margin-bottom: 12px; direction: rtl; } .salat-hadith .sh-text { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 15px; font-style: italic; color: var(--text); margin-bottom: 8px; line-height: 1.4; } .salat-hadith .sh-source { font-size: 11px; color: var(--text-muted); letter-spacing: 1px; text-transform: uppercase; font-weight: 700; } /* 7. ADHAN WELTWEIT */ .salat-cities { display: flex; flex-direction: column; gap: 6px; margin-bottom: 22px; } .sc-row { display: grid; grid-template-columns: 24px 1fr auto auto; gap: 10px; align-items: center; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; font-size: 13px; } .sc-row.sc-active { background: linear-gradient(135deg, rgba(212,162,71,0.18), rgba(212,162,71,0.04)); border-color: rgba(212,162,71,0.40); animation: scActivePulse 2s ease-in-out infinite; } @keyframes scActivePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(212,162,71,0); } 50% { box-shadow: 0 0 0 4px rgba(212,162,71,0.20); } } .sc-flag { font-size: 16px; } .sc-name { font-weight: 700; color: var(--text); } .sc-time { font-family: 'SF Mono', Menlo, monospace; font-weight: 700; color: var(--text-muted); font-size: 12px; } .sc-prayer { font-size: 12px; color: var(--gold, #d4a247); font-weight: 700; } .sc-row.sc-active .sc-name, .sc-row.sc-active .sc-prayer { color: var(--gold, #d4a247); } /* ════════════════════════════════════════════════════════════════ v85 ★ DOPAMIN-KICK CSS · Burst-Text + Particles + Flash ════════════════════════════════════════════════════════════════ */ .dk-burst-txt { position: fixed; z-index: 2147483646; pointer-events: none; transform: translate(-50%, -50%); font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-weight: 800; font-size: 38px; color: var(--gold, #d4a247); text-shadow: 0 0 24px rgba(212,162,71,0.9), 0 0 8px rgba(255,225,160,0.8), 0 2px 6px rgba(0,0,0,0.4); letter-spacing: -1px; animation: dkBurstTxt 1.2s cubic-bezier(0.16, 1.2, 0.34, 1) forwards; will-change: transform, opacity; } @keyframes dkBurstTxt { 0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; } 25% { transform: translate(-50%, -80%) scale(1.4); opacity: 1; } 60% { transform: translate(-50%, -130%) scale(1.1); opacity: 1; } 100% { transform: translate(-50%, -200%) scale(0.85); opacity: 0; } } .dk-particle { position: fixed; z-index: 2147483645; pointer-events: none; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #fff5cc 0%, #f5c977 50%, #d4a247 100%); box-shadow: 0 0 12px rgba(212,162,71,0.8), 0 0 4px rgba(255,225,160,0.6); transform: translate(-50%, -50%); animation: dkParticle 0.85s cubic-bezier(0.4, 0.0, 0.2, 1) forwards; will-change: transform, opacity; } @keyframes dkParticle { 0% { transform: translate(-50%, -50%) translate(0, 0) scale(1); opacity: 1; } 60% { opacity: 1; transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(0.7); } 100% { transform: translate(-50%, -50%) translate(var(--dx), calc(var(--dy) + 40px)) scale(0.2); opacity: 0; } } .dk-screen-flash { position: fixed; inset: 0; z-index: 2147483644; pointer-events: none; background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(212,162,71,0.18), transparent 70%); animation: dkScreenFlash 0.38s ease-out forwards; } @keyframes dkScreenFlash { 0% { opacity: 0; transform: scale(0.95); } 30% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.05); } } /* Counter Pop am Header */ #xpNum.is-popping { display: inline-block; animation: xpNumPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); color: var(--gold, #d4a247); text-shadow: 0 0 12px rgba(212,162,71,0.7); } @keyframes xpNumPop { 0% { transform: scale(1); } 30% { transform: scale(1.35); } 100% { transform: scale(1); } } /* ════════════════════════════════════════════════════════════════ v85 ★ LIVE-PRAYERS ROWS (alle 5 Gebete weltweit) ════════════════════════════════════════════════════════════════ */ .salat-hero-total { display: flex; align-items: baseline; gap: 8px; position: relative; } .salat-hero-total > span:first-child { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 38px; font-weight: 800; color: var(--gold, #d4a247); letter-spacing: -1px; font-variant-numeric: tabular-nums; line-height: 1; text-shadow: 0 0 24px rgba(212,162,71,0.4); animation: counterFlicker 7s ease-in-out infinite; } .salat-live-prayers { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; position: relative; } .slp-row { display: grid; grid-template-columns: 24px 60px 1fr auto; align-items: center; gap: 10px; padding: 8px 12px; background: rgba(244,237,224,0.05); border: 1px solid rgba(244,237,224,0.10); border-radius: 10px; font-size: 12.5px; color: rgba(244,237,224,0.85); } .slp-row.is-active { background: linear-gradient(135deg, rgba(212,162,71,0.15), rgba(212,162,71,0.05)); border-color: rgba(212,162,71,0.30); } .slp-row.is-idle { opacity: 0.45; } .slp-icon { font-size: 16px; } .slp-name { font-weight: 700; color: rgba(244,237,224,0.95); font-size: 13px; } .slp-bar { display: block; height: 6px; background: rgba(244,237,224,0.08); border-radius: 999px; overflow: hidden; } .slp-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--gold, #d4a247), var(--gold-soft, #e0b25a)); border-radius: 999px; box-shadow: 0 0 8px rgba(212,162,71,0.6); transition: width 0.6s ease; } .slp-row.is-idle .slp-fill { background: rgba(244,237,224,0.20); box-shadow: none; } .slp-cnt { font-family: 'SF Mono', Menlo, monospace; font-weight: 700; font-size: 12px; color: var(--gold, #d4a247); text-align: right; font-variant-numeric: tabular-nums; min-width: 70px; } .slp-row.is-idle .slp-cnt { color: rgba(244,237,224,0.40); } /* ════════════════════════════════════════════════════════════════ v85 ★ QIBLA mit Kaaba-Marker (rotierender Compass + Found-Glow) ════════════════════════════════════════════════════════════════ */ .salat-qibla-ring { width: 200px; height: 200px; position: relative; margin: 0 auto; /* Smooth-Find-Glow am Ring wenn Qibla gefunden */ transition: filter 0.3s ease; } .salat-qibla-ring.is-found { filter: drop-shadow(0 0 30px rgba(212,162,71,0.7)); } .salat-qibla-card { position: absolute; inset: 0; transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1); transform-origin: center center; will-change: transform; } /* "Du" Marker (statisch, immer oben) */ .salat-qibla-you { position: absolute; top: -28px; left: 50%; transform: translateX(-50%); font-size: 14px; font-weight: 800; color: var(--gold, #d4a247); text-align: center; line-height: 1; z-index: 2; } .salat-qibla-you span { font-size: 10px; letter-spacing: 1.5px; font-weight: 700; color: var(--text-muted, rgba(244,237,224,0.65)); display: block; margin-top: 2px; } /* Kaaba-Marker — ist innerhalb der Card, rotiert mit ihr */ .salat-qibla-kaaba { position: absolute; top: 50%; left: 50%; font-size: 32px; transform: translate(-50%, -50%); filter: drop-shadow(0 0 12px rgba(212,162,71,0.5)); transition: all 0.2s ease; z-index: 1; pointer-events: none; } .salat-qibla-kaaba.is-found { font-size: 40px; filter: drop-shadow(0 0 24px rgba(212,162,71,0.95)) drop-shadow(0 0 8px rgba(255,225,160,0.7)); animation: kaabaFound 1.4s ease-in-out infinite; } @keyframes kaabaFound { 0%, 100% { transform: translate(-50%, -50%) rotate(0deg) translate(0, -90px) rotate(0deg) scale(1); } 50% { transform: translate(-50%, -50%) rotate(0deg) translate(0, -90px) rotate(0deg) scale(1.1); } } /* Status-Row */ .sqi-status { font-weight: 700; color: var(--gold, #d4a247); font-size: 13px; padding: 8px 0; text-align: center; font-variant-numeric: tabular-nums; } /* Qibla-Layout reset wenn beide nebeneinander */ @media (min-width: 400px) { .salat-qibla { grid-template-columns: 200px 1fr; } } /* ════════════════════════════════════════════════════════════════ v86 ★ MOTIVATIONS-RIBBON + Live-Dot in Hero + Tick-Animation ════════════════════════════════════════════════════════════════ */ .salat-motiv-ribbon { text-align: center; padding: 4px 8px 14px; position: relative; margin-bottom: 4px; } .smr-quote { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 20px; font-weight: 700; color: var(--text, #1a1408); letter-spacing: -0.3px; line-height: 1.25; transition: opacity 0.28s ease; } .smr-sub { font-size: 13px; color: var(--text-muted); margin-top: 4px; font-weight: 500; font-style: italic; transition: opacity 0.28s ease; } /* Live-Dot Inline im Eyebrow */ .salat-hero-eyebrow { display: inline-flex !important; align-items: center; gap: 8px; } .salat-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff4d6d; box-shadow: 0 0 0 0 rgba(255, 77, 109, 0.6); animation: salatLiveDotBlink 1.4s ease-in-out infinite; flex-shrink: 0; } @keyframes salatLiveDotBlink { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,77,109,0.6); transform: scale(1); } 50% { box-shadow: 0 0 0 6px rgba(255,77,109,0); transform: scale(1.2); } } /* Tick Pulse beim Counter-Update */ #salatLiveTotal.is-tick { animation: salatTotalTick 0.4s ease-out; } @keyframes salatTotalTick { 0% { color: var(--gold, #d4a247); } 50% { color: #fff5cc; text-shadow: 0 0 30px rgba(212,162,71,0.9); } 100% { color: var(--gold, #d4a247); } } .salat-hero-tick { font-size: 11px; color: rgba(244,237,224,0.55); margin-top: 4px; font-variant-numeric: tabular-nums; position: relative; } .salat-hero-tick #salatHeroDelta { color: var(--gold-soft, #e0b25a); font-weight: 700; } /* In Phone-Frame Light-Theme richtig kontrastiert */ html.theme-light .smr-quote { color: #1a1408; } html.theme-light .smr-sub { color: rgba(26,20,8,0.62); } /* ════════════════════════════════════════════════════════════════ v87 ★ SALAT MEKKA-HERO (riesig, Wow-Faktor) ════════════════════════════════════════════════════════════════ */ .salat-mekka-hero { position: relative !important; padding: 30px 22px 26px !important; border-radius: 24px !important; margin-bottom: 14px !important; background: radial-gradient(ellipse 80% 60% at 20% 30%, rgba(212,162,71,0.32), transparent 60%), radial-gradient(ellipse 90% 70% at 80% 80%, rgba(78,163,114,0.18), transparent 60%), linear-gradient(135deg, #0b0f1c 0%, #131726 60%, #0a0d18 100%) !important; color: #f4ede0 !important; overflow: hidden !important; border: 1px solid rgba(212,162,71,0.30) !important; box-shadow: 0 16px 50px rgba(11,15,28,0.55), inset 0 1px 0 rgba(255,255,255,0.08) !important; text-align: left; } .smh-bg { position: absolute; top: -50%; right: -30%; width: 360px; height: 360px; background: radial-gradient(circle, rgba(212,162,71,0.18), transparent 70%); filter: blur(20px); pointer-events: none; animation: salatGlowFloat 9s ease-in-out infinite alternate; } .smh-kaaba { position: absolute; top: 14px; right: 16px; font-size: 62px; opacity: 0.85; filter: drop-shadow(0 6px 14px rgba(0,0,0,0.4)); animation: kaabaPulse 3.6s ease-in-out infinite; pointer-events: none; } @keyframes kaabaPulse { 0%, 100% { transform: scale(1); filter: drop-shadow(0 6px 14px rgba(0,0,0,0.4)) drop-shadow(0 0 24px rgba(212,162,71,0.3)); } 50% { transform: scale(1.06); filter: drop-shadow(0 8px 18px rgba(0,0,0,0.4)) drop-shadow(0 0 36px rgba(212,162,71,0.55)); } } .smh-eyebrow { display: inline-flex !important; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: 1.8px; color: rgba(244,237,224,0.7); position: relative; z-index: 1; } .smh-title { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 17px; font-weight: 600; color: rgba(244,237,224,0.85); margin-top: 8px; position: relative; z-index: 1; } .smh-count { margin-top: 4px; display: flex; align-items: baseline; gap: 8px; position: relative; z-index: 1; } .smh-count > span:first-child { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 52px; font-weight: 800; color: var(--gold, #d4a247); letter-spacing: -2px; font-variant-numeric: tabular-nums; line-height: 1; text-shadow: 0 0 30px rgba(212,162,71,0.55); } .smh-unit { font-size: 16px; font-weight: 700; color: rgba(244,237,224,0.7); } .smh-prayer { margin-top: 10px; font-size: 13px; color: rgba(244,237,224,0.7); position: relative; z-index: 1; } .smh-prayer #salatMekkaPrayer { color: var(--gold, #d4a247); font-weight: 700; } /* Live-Strip ganz unten — dezent */ .salat-ummah-strip { display: inline-flex !important; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 999px; background: linear-gradient(135deg, rgba(78,163,114,0.10), rgba(78,163,114,0.04)); border: 1px solid rgba(78,163,114,0.25); margin: 22px 0 8px; font-size: 12.5px; color: var(--text-muted); } .salat-ummah-strip .salat-live-dot { background: #4ea372 !important; box-shadow: 0 0 0 0 rgba(78,163,114,0.6) !important; animation: livePulseEmerald 1.6s ease-in-out infinite; } @keyframes livePulseEmerald { 0%, 100% { box-shadow: 0 0 0 0 rgba(78,163,114,0.5); transform: scale(1); } 50% { box-shadow: 0 0 0 6px rgba(78,163,114,0); transform: scale(1.15); } } .sus-lbl { font-weight: 600; } .sus-count #salatLiveTotal { font-family: 'SF Mono', Menlo, monospace; font-weight: 800; color: var(--emerald, #4ea372); font-variant-numeric: tabular-nums; } /* ════════════════════════════════════════════════════════════════ v87 ★ FĀTIḤA-TEST ════════════════════════════════════════════════════════════════ */ .salat-fatiha { background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(212,162,71,0.08), transparent 60%), var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 18px; margin-bottom: 22px; } .sf-intro { font-size: 13.5px; color: var(--text-muted); text-align: center; margin-bottom: 14px; line-height: 1.4; } .sf-target { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .sf-slot { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-elev, rgba(244,237,224,0.04)); border: 1px dashed var(--border); min-height: 38px; cursor: default; } .sf-slot.is-filled { background: linear-gradient(135deg, rgba(212,162,71,0.10), rgba(212,162,71,0.02)); border: 1px solid var(--gold); cursor: pointer; } .sf-slot.sf-correct { background: linear-gradient(135deg, rgba(78,163,114,0.20), rgba(78,163,114,0.04)); border-color: var(--emerald, #4ea372); } .sf-slot.sf-wrong { background: linear-gradient(135deg, rgba(220,80,80,0.18), rgba(220,80,80,0.04)); border-color: #dc5050; } .sf-slot-n { width: 24px; height: 24px; border-radius: 50%; background: rgba(212,162,71,0.15); color: var(--gold); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 11px; flex-shrink: 0; } .sf-slot-content { flex: 1; min-width: 0; } .sf-slot.is-filled .sf-chip-tr, .sf-slot.sf-correct .sf-chip-tr, .sf-slot.sf-wrong .sf-chip-tr { color: var(--text); font-size: 13px; font-weight: 600; } .sf-pool { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .sf-chip { padding: 8px 12px; background: var(--surface); border: 1px solid var(--border-strong, rgba(212,162,71,0.30)); border-radius: 999px; color: var(--text); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: transform 0.12s ease; } .sf-chip:active { transform: scale(0.95); } .sf-actions { display: flex; gap: 10px; } .sf-check { flex: 1; background: linear-gradient(135deg, var(--gold), var(--gold-soft)); color: #0a0a0a; font-weight: 800; border: none; border-radius: 12px; padding: 12px; font-size: 14px; cursor: pointer; box-shadow: 0 4px 14px rgba(212,162,71,0.30); } .sf-reset { background: transparent; color: var(--text-muted); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; font-size: 13px; cursor: pointer; } .sf-result { margin-top: 12px; text-align: center; font-weight: 700; font-size: 13px; } .sf-result.sf-success { color: var(--emerald, #4ea372); font-size: 15px; } .sf-result.sf-pending { color: var(--gold); } .sf-result.sf-partial { color: var(--text-muted); } .sf-perfect { display: inline-block; margin-top: 4px; background: linear-gradient(135deg, var(--gold), var(--gold-soft)); color: #0a0a0a; padding: 4px 14px; border-radius: 999px; font-weight: 800; font-size: 13px; } /* ════════════════════════════════════════════════════════════════ v87 ★ AR-QIBLA OVERLAY (Kamera-Vollbild) ════════════════════════════════════════════════════════════════ */ .salat-ar-overlay { position: fixed; inset: 0; z-index: 2147483647; background: #000; overflow: hidden; } .sao-cam { width: 100%; height: 100%; object-fit: cover; } .sao-target { position: absolute; top: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 10; transition: left 0.18s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease; pointer-events: none; } .sao-kaaba { font-size: 64px; filter: drop-shadow(0 0 18px rgba(212,162,71,0.7)); transition: all 0.3s ease; } .sao-target.is-found .sao-kaaba { font-size: 84px; filter: drop-shadow(0 0 32px rgba(212,162,71,1)) drop-shadow(0 0 10px rgba(255,225,160,0.8)); animation: kaabaFound 1.2s ease-in-out infinite; } .sao-hint { margin-top: 8px; color: #fff; font-weight: 800; font-size: 18px; text-shadow: 0 2px 8px rgba(0,0,0,0.8); font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; } .sao-crosshair { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, transparent 49.5%, rgba(255,255,255,0.20) 49.5% 50.5%, transparent 50.5%), linear-gradient(to right, transparent 49.5%, rgba(255,255,255,0.20) 49.5% 50.5%, transparent 50.5%); } .sao-degree { position: absolute; bottom: max(env(safe-area-inset-bottom), 32px); left: 50%; transform: translateX(-50%); padding: 10px 18px; border-radius: 999px; background: rgba(0,0,0,0.6); color: #fff; font-family: 'SF Mono', Menlo, monospace; font-weight: 800; font-size: 18px; backdrop-filter: blur(8px); } .sao-close { position: absolute; top: max(env(safe-area-inset-top), 16px); right: 16px; width: 44px; height: 44px; border-radius: 50%; background: rgba(0,0,0,0.6); color: #fff; font-size: 28px; border: 1px solid rgba(255,255,255,0.2); cursor: pointer; backdrop-filter: blur(8px); } /* AR-Button auf Salat-Page */ .salat-qibla-ar { background: rgba(0,0,0,0.85) !important; color: #fff !important; margin-top: 6px; } /* ════════════════════════════════════════════════════════════════ v88 ★ FAMILY REDESIGN · Discord-Server Look ════════════════════════════════════════════════════════════════ */ /* Verstecke ALTE Section-Titles im Family-Active wenn fm88 da ist */ #familyActive .section-title { display: none !important; } /* Hero-Grid: Live + Top Performer */ .fm88-hero-grid { display: grid !important; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-bottom: 14px; } .fm88-hero-card { position: relative; border-radius: 18px; padding: 16px 14px; overflow: hidden; display: flex !important; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 4px; min-height: 88px; } .fm88-hero-card.fm88-live { background: linear-gradient(135deg, rgba(78,163,114,0.18), rgba(78,163,114,0.04)); border: 1px solid rgba(78,163,114,0.30); } .fm88-hero-card.fm88-top { background: radial-gradient(ellipse 80% 60% at 30% 30%, rgba(212,162,71,0.20), transparent 60%), linear-gradient(135deg, rgba(212,162,71,0.14), rgba(212,162,71,0.04)); border: 1px solid rgba(212,162,71,0.40); overflow: hidden; } .fm88-hero-card.fm88-top::before { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,225,160,0.16) 50%, transparent 70%); background-size: 200% 100%; animation: tpShimmer 3.6s ease-in-out infinite; pointer-events: none; } .fm88-live-dot { width: 10px; height: 10px; border-radius: 50%; background: #4ea372; box-shadow: 0 0 0 0 rgba(78,163,114,0.6); animation: liveBreathe 2s ease-in-out infinite; } .fm88-live-num { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 30px; font-weight: 800; color: var(--emerald, #4ea372); line-height: 1; } .fm88-live-lbl { font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 700; color: var(--text-muted); } .fm88-top-crown { font-size: 28px; animation: crownGlow 2.4s ease-in-out infinite; filter: drop-shadow(0 0 12px rgba(212,162,71,0.7)); } .fm88-top-name { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 17px; font-weight: 700; color: var(--text); z-index: 1; } .fm88-top-xp { font-family: 'SF Mono', Menlo, monospace; font-weight: 800; color: var(--gold, #d4a247); font-size: 13px; z-index: 1; } /* Stories Reel — horizontal bubbles wie Instagram-Stories */ .fm88-stories-reel { display: flex !important; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 4px 0 12px; margin-bottom: 12px; } .fm88-stories-reel::-webkit-scrollbar { display: none; } .fm88-stories-reel .story-bubble { flex: 0 0 auto; width: 78px; display: flex !important; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; background: transparent !important; padding: 0 !important; border: none !important; } .fm88-stories-reel .story-av { width: 62px; height: 62px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, var(--gold, #d4a247), var(--gold-soft, #e0b25a)); display: inline-flex !important; align-items: center; justify-content: center; font-weight: 800; color: #0a0a0a; font-size: 22px; border: 3px solid var(--surface); box-shadow: 0 0 0 2px var(--gold, #d4a247), 0 4px 14px rgba(212,162,71,0.25); position: relative; } .fm88-stories-reel .story-info { text-align: center; } .fm88-stories-reel .story-nm { font-size: 11px; font-weight: 700; color: var(--text); margin: 0 !important; } .fm88-stories-reel .story-tx, .fm88-stories-reel .story-tm { display: none !important; /* keep clean */ } /* TASBIH-ORB (kein Text-Schlucht-Block mehr) */ .fm88-tasbih-orb { display: flex !important; flex-direction: column; align-items: center; margin: 18px 0 22px; position: relative; } .fm88-orb-ring { position: relative; width: 200px; height: 200px; } .fm88-orb-svg { width: 100%; height: 100%; filter: drop-shadow(0 0 24px rgba(212,162,71,0.4)); } .fm88-orb-num { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 44px; font-weight: 800; fill: var(--gold, #d4a247); } .fm88-orb-lbl { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; fill: var(--text-muted); } .fm88-orb-goal { font-size: 10px; font-weight: 600; fill: var(--text-muted); } .fm88-orb-btn { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--gold), var(--gold-soft)); color: #0a0a0a; border: 3px solid var(--surface); border-radius: 999px; padding: 10px 22px; font-weight: 800; font-size: 16px; cursor: pointer; box-shadow: 0 6px 16px rgba(212,162,71,0.4); transition: transform 0.15s ease; } .fm88-orb-btn:active { transform: translateX(-50%) scale(0.96); } /* Generic fm88-section Wrapper */ .fm88-section { margin-bottom: 22px; } .fm88-section-head { display: flex !important; align-items: center; justify-content: space-between; font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 10px; padding-bottom: 2px; } .fm88-sec-meta { font-size: 11px; color: var(--text-muted); font-family: var(--font-ui, system-ui); letter-spacing: 0.5px; font-weight: 600; } /* RSEND Prefabs nur Emoji */ #rsendPrefabs .rsend-prefab { padding: 12px 14px !important; font-size: 22px !important; background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 14px !important; color: var(--text) !important; min-width: 50px !important; text-align: center !important; } #rsendPrefabs .rsend-prefab.is-active { background: linear-gradient(135deg, var(--gold), var(--gold-soft)) !important; border-color: var(--gold) !important; box-shadow: 0 4px 14px rgba(212,162,71,0.30) !important; transform: scale(1.08) !important; } /* PROMISES Card-Style mit slight Gradient */ .promise-row { background: radial-gradient(ellipse 60% 50% at 80% 50%, rgba(212,162,71,0.06), transparent 60%), var(--surface); border-radius: 14px; padding: 12px 14px; border: 1px solid var(--border); display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .promise-row.is-done { background: linear-gradient(135deg, rgba(78,163,114,0.12), rgba(78,163,114,0.02)); border-color: rgba(78,163,114,0.30); } .promise-row .promise-author { font-weight: 700; font-size: 12px; color: var(--gold, #d4a247); min-width: 50px; } .promise-row .promise-text { flex: 1; font-size: 13.5px; color: var(--text); } .promise-row.is-done .promise-text { color: var(--text-muted); text-decoration: line-through; } .promise-check { width: 28px; height: 28px; border-radius: 50%; background: var(--surface-elev); border: 1px solid var(--border); color: var(--gold); font-size: 14px; font-weight: 800; cursor: pointer; } .promise-row.is-done .promise-check { background: linear-gradient(135deg, var(--emerald, #4ea372), rgba(78,163,114,0.7)); color: #fff; border-color: var(--emerald, #4ea372); } .promise-empty { text-align: center; font-size: 13px; color: var(--text-muted); padding: 14px; border: 1px dashed var(--border); border-radius: 12px; } /* MEMBERS-LIST Avatar-Grid mit Gradient-Cards */ .members-list .member-row, .members-list .ml-row { display: flex !important; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; margin-bottom: 6px; } /* FAMILY GOALS — Gradient pro Color */ .fam-goal { display: grid !important; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; margin-bottom: 8px; } .fam-goal.fg-gold { background: linear-gradient(135deg, rgba(212,162,71,0.10), rgba(212,162,71,0.02)); border-color: rgba(212,162,71,0.30); } .fam-goal.fg-emerald { background: linear-gradient(135deg, rgba(78,163,114,0.10), rgba(78,163,114,0.02)); border-color: rgba(78,163,114,0.30); } .fam-goal.fg-flame { background: linear-gradient(135deg, rgba(232,140,30,0.12), rgba(232,140,30,0.02)); border-color: rgba(232,140,30,0.30); } .fam-goal.is-done .fg-icon { background: linear-gradient(135deg, var(--gold), var(--gold-soft)); color: #0a0a0a; } .fam-goal .fg-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--surface-elev); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; } .fam-goal .fg-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .fam-goal .fg-text { font-weight: 700; font-size: 13.5px; color: var(--text); } .fam-goal .fg-bar { height: 4px; background: rgba(0,0,0,0.08); border-radius: 999px; overflow: hidden; } .fam-goal .fg-bar-fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-soft)); border-radius: 999px; transition: width 0.5s ease; } .fam-goal.fg-emerald .fg-bar-fill { background: linear-gradient(90deg, var(--emerald, #4ea372), rgba(78,163,114,0.7)); } .fam-goal.fg-flame .fg-bar-fill { background: linear-gradient(90deg, #e88c1e, #f5b748); } .fam-goal .fg-prog { font-family: 'SF Mono', Menlo, monospace; font-weight: 800; font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; text-align: right; } .fam-goal .fg-prog small { font-size: 10px; color: var(--text-muted); font-weight: 600; display: block; } /* ════════════════════════════════════════════════════════════════ v88 ★ FĀTIḤA-TEST mit grossem Arabic ════════════════════════════════════════════════════════════════ */ .sf-chip { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 4px !important; padding: 10px 14px !important; background: var(--surface) !important; border: 1px solid var(--border-strong, rgba(212,162,71,0.25)) !important; border-radius: 14px !important; text-align: right !important; min-width: 100% !important; max-width: 100%; } .sf-chip .sf-chip-ar { font-family: Amiri, Georgia, serif; font-size: 18px; color: var(--gold, #d4a247); line-height: 1.6; direction: rtl; display: block; } .sf-chip .sf-chip-tr { display: block; font-size: 11.5px; font-style: italic; color: var(--text-muted); text-align: left; font-weight: 500; } #salatFatihaPool { flex-direction: column !important; gap: 8px !important; } #salatFatihaPool .sf-chip { flex: 0 0 auto; } .sf-slot { min-height: 60px !important; } .sf-slot.is-filled .sf-chip-ar { font-family: Amiri, Georgia, serif; font-size: 17px; color: var(--gold, #d4a247); direction: rtl; display: block; text-align: right; } .sf-slot.is-filled .sf-chip-tr { display: block; font-size: 11px; color: var(--text-muted); text-align: left; font-style: italic; } .sf-slot.sf-correct .sf-chip-ar { color: var(--emerald, #4ea372); } .sf-slot.sf-wrong .sf-chip-ar { color: #dc5050; } /* ════════════════════════════════════════════════════════════════ v88 ★ STREAK DRAMA — Flammen-Animation auf Home ════════════════════════════════════════════════════════════════ */ .jh-flame-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(232,140,30,0.12), transparent 60%); animation: flameBreathe 3s ease-in-out infinite; border-radius: inherit; opacity: 0; transition: opacity 0.6s ease; } .jh-streak-3 .jh-flame-bg { opacity: 0.4; } .jh-streak-7 .jh-flame-bg { opacity: 0.7; background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(232,140,30,0.20), transparent 60%); } .jh-streak-30 .jh-flame-bg { opacity: 1; background: radial-gradient(ellipse 90% 70% at 50% 100%, rgba(232,140,30,0.32), transparent 60%), radial-gradient(ellipse 60% 50% at 30% 100%, rgba(232,80,20,0.25), transparent 60%); } @keyframes flameBreathe { 0%, 100% { transform: scale(1) translateY(0); opacity: var(--flame-op, 0.5); } 50% { transform: scale(1.1) translateY(-4px); opacity: calc(var(--flame-op, 0.5) * 1.4); } } /* Flame Emoji am Streak-Counter wird groesser mit laengerer Streak */ .jh-streak-emoji { display: inline-block; margin-left: 6px; font-size: 24px; filter: drop-shadow(0 0 8px rgba(232,140,30,0.6)); animation: flameWobble 0.8s ease-in-out infinite alternate; } .jh-streak-7 .jh-streak-emoji { font-size: 32px; filter: drop-shadow(0 0 14px rgba(232,140,30,0.9)); } .jh-streak-30 .jh-streak-emoji { font-size: 42px; filter: drop-shadow(0 0 20px rgba(232,80,20,1)) drop-shadow(0 0 4px rgba(255,200,80,0.8)); } .jh-streak-100 .jh-streak-emoji { font-size: 52px; filter: drop-shadow(0 0 30px rgba(255,80,20,1)) drop-shadow(0 0 8px rgba(255,255,0,0.7)); } @keyframes flameWobble { 0% { transform: rotate(-3deg) scale(1); } 100% { transform: rotate(3deg) scale(1.06); } } /* ════════════════════════════════════════════════════════════════ v88 ★ ACHIEVEMENT FULLSCREEN-TAKEOVER (Confetti + Centered Hero) ════════════════════════════════════════════════════════════════ */ .ach-takeover { position: fixed; inset: 0; z-index: 2147483647; display: flex; align-items: center; justify-content: center; background: rgba(7, 15, 30, 0.92); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); animation: achTakeoverIn 0.5s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes achTakeoverIn { 0% { opacity: 0; backdrop-filter: blur(0px); } 100% { opacity: 1; backdrop-filter: blur(20px); } } .ach-takeover-card { position: relative; background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(212,162,71,0.40), transparent 60%), linear-gradient(135deg, #0b0f1c 0%, #131726 60%, #0a0d18 100%); border: 2px solid rgba(212,162,71,0.50); border-radius: 28px; padding: 40px 28px 32px; max-width: 86vw; text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,0.6); animation: achCardIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes achCardIn { 0% { transform: scale(0.5) rotate(-12deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } } .ach-takeover .ach-icon { font-size: 80px; margin-bottom: 16px; filter: drop-shadow(0 0 32px rgba(212,162,71,0.9)); animation: achIconPulse 1.2s ease-in-out infinite; } @keyframes achIconPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); filter: drop-shadow(0 0 48px rgba(212,162,71,1)) drop-shadow(0 0 12px rgba(255,225,160,0.8)); } } .ach-takeover .ach-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 2px; color: rgba(212,162,71,0.85); text-transform: uppercase; margin-bottom: 8px; } .ach-takeover .ach-title { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 28px; font-weight: 800; color: #f4ede0; letter-spacing: -0.5px; margin-bottom: 6px; } .ach-takeover .ach-desc { font-size: 14px; color: rgba(244,237,224,0.7); margin-bottom: 26px; } .ach-takeover .ach-cta { background: linear-gradient(135deg, var(--gold, #d4a247), var(--gold-soft, #e0b25a)); color: #0a0a0a; border: none; border-radius: 14px; padding: 14px 28px; font-weight: 800; font-size: 15px; cursor: pointer; box-shadow: 0 8px 24px rgba(212,162,71,0.5); } /* Confetti — 24 pieces fall + tilt */ .ach-confetti { position: absolute; width: 8px; height: 12px; border-radius: 2px; top: -10px; pointer-events: none; animation: confettiFall 2.4s cubic-bezier(0.2, 0.8, 0.3, 1) forwards; } @keyframes confettiFall { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 100% { transform: translateY(120vh) rotate(720deg); opacity: 0.6; } } /* ════════════════════════════════════════════════════════════════ v89 ★ AL-FĀTIḤA TARTEEL (Voice-Recognition) ════════════════════════════════════════════════════════════════ */ .salat-tarteel { background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(212,162,71,0.10), transparent 60%), var(--surface); border: 1px solid var(--border-strong, rgba(212,162,71,0.25)); border-radius: 22px; padding: 22px 20px 18px; margin-bottom: 22px; } /* v344 (M2): Hinweis warum Fātiḥa-Test zu Salat gehört */ .st-intro-note { text-align: center; font-size: 12.5px; line-height: 1.5; color: rgba(244,237,224,0.66); margin: 0 0 14px; padding: 10px 12px; border-radius: 12px; background: rgba(245,201,119,0.06); border: 1px solid rgba(245,201,119,0.18); } .st-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; } .st-progress-bar { flex: 1; height: 6px; background: rgba(0,0,0,0.08); border-radius: 999px; overflow: hidden; } .st-progress-fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-soft)); border-radius: 999px; transition: width 0.5s ease; box-shadow: 0 0 8px rgba(212,162,71,0.6); } .st-progress-lbl { font-family: 'SF Mono', Menlo, monospace; font-weight: 800; font-size: 12px; color: var(--gold, #d4a247); } .st-verse { text-align: center; margin-bottom: 18px; padding: 16px 0; } .st-verse-num { font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase; font-weight: 800; color: var(--text-muted); margin-bottom: 8px; } .st-verse-ar { font-family: Amiri, Georgia, serif; font-size: 30px; line-height: 2; color: var(--gold, #d4a247); direction: rtl; margin-bottom: 14px; letter-spacing: 0.5px; text-shadow: 0 0 18px rgba(212,162,71,0.25); } .st-verse-tr { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 14px; font-style: italic; color: var(--text); margin-bottom: 6px; } .st-verse-de { font-size: 12px; color: var(--text-muted); line-height: 1.4; } .st-status { text-align: center; padding: 10px 12px; border-radius: 12px; font-size: 13px; font-weight: 700; color: var(--text-muted); background: var(--surface-elev, rgba(0,0,0,0.03)); margin-bottom: 14px; min-height: 24px; } .st-status.sf-success { background: linear-gradient(135deg, rgba(78,163,114,0.18), rgba(78,163,114,0.04)); color: var(--emerald, #4ea372); border: 1px solid rgba(78,163,114,0.30); } .st-status.sf-pending { background: linear-gradient(135deg, rgba(212,162,71,0.18), rgba(212,162,71,0.04)); color: var(--gold, #d4a247); border: 1px solid rgba(212,162,71,0.30); animation: stPendingPulse 1.4s ease-in-out infinite; } @keyframes stPendingPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(212,162,71,0.4); } 50% { box-shadow: 0 0 0 6px rgba(212,162,71,0); } } .st-status.sf-wrong { background: linear-gradient(135deg, rgba(220,80,80,0.16), rgba(220,80,80,0.04)); color: #dc5050; border: 1px solid rgba(220,80,80,0.30); } .st-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-bottom: 12px; } .st-listen, .st-mic { padding: 14px; border-radius: 14px; font-weight: 800; font-size: 14px; cursor: pointer; border: none; transition: transform 0.12s ease; } .st-listen { background: var(--surface-elev, rgba(0,0,0,0.04)); color: var(--text); border: 1px solid var(--border); } .st-listen:active { transform: scale(0.96); } .st-mic { background: linear-gradient(135deg, var(--gold, #d4a247), var(--gold-soft, #e0b25a)); color: #0a0a0a; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 4px 16px rgba(212,162,71,0.4); } .st-mic:active { transform: scale(0.96); } .st-mic-icon { font-size: 18px; } .st-nav { display: flex; gap: 8px; margin-bottom: 8px; } .st-prev, .st-next { flex: 1; padding: 10px; background: transparent; border: 1px solid var(--border); border-radius: 12px; color: var(--text); font-weight: 700; font-size: 13px; cursor: pointer; } .st-prev:disabled, .st-next:disabled { opacity: 0.4; cursor: not-allowed; } .st-restart-row { text-align: center; } .st-restart { background: transparent; border: none; color: var(--text-muted); font-size: 12px; text-decoration: underline; cursor: pointer; padding: 4px; } /* ════════════════════════════════════════════════════════════════ v89 ★ HOME · Pflichtgebete-Tracker im Prayer-Times-Card ════════════════════════════════════════════════════════════════ */ .hpc-todays-pills { display: grid !important; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 14px; } #homePrayerCard .qp-pill, #hpcTodaysPills .qp-pill { display: flex !important; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; font-size: 10px; } #homePrayerCard .qp-pill.done, #hpcTodaysPills .qp-pill.done { background: linear-gradient(135deg, var(--gold), var(--gold-soft)) !important; color: #0a0a0a !important; border-color: var(--gold); box-shadow: 0 2px 10px rgba(212,162,71,0.25); } #hpcTodaysPills .qp-name { font-weight: 700; font-size: 11px; } #hpcTodaysPills .qp-check { font-size: 13px; } .hpc-todays-meta { font-size: 11px; color: var(--text-muted); text-align: center; margin-top: 8px; } /* ════════════════════════════════════════════════════════════════ v90 ★ Tarteel Word-by-Word Highlighting (gruen/rot live) ════════════════════════════════════════════════════════════════ */ #stVerseAr .st-word { display: inline-block; padding: 1px 4px; margin: 0 1px; border-radius: 6px; transition: all 0.18s ease; color: var(--gold, #d4a247); position: relative; } #stVerseAr .st-word.is-correct { color: var(--emerald, #4ea372) !important; background: rgba(78,163,114,0.10); text-shadow: 0 0 12px rgba(78,163,114,0.4); animation: stWordPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes stWordPop { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } } #stVerseAr .st-word.is-wrong { color: #dc5050 !important; background: rgba(220,80,80,0.10); text-shadow: 0 0 12px rgba(220,80,80,0.3); animation: stWordShake 0.4s ease-in-out; } @keyframes stWordShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } } #stVerseAr .st-word.is-current { outline: 2px solid var(--gold, #d4a247); outline-offset: 2px; animation: stWordCurrent 1.2s ease-in-out infinite; } @keyframes stWordCurrent { 0%, 100% { outline-color: rgba(212,162,71,0.5); } 50% { outline-color: rgba(212,162,71,1); } } /* ════════════════════════════════════════════════════════════════ v91 ★ Recording-Dot + Anhören-Button SVG-Style ════════════════════════════════════════════════════════════════ */ .st-rec-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: #ff4d6d; box-shadow: 0 0 0 0 rgba(255,77,109,0.6); animation: recDotPulse 1.0s ease-in-out infinite; } @keyframes recDotPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,77,109,0.7); transform: scale(1); } 50% { box-shadow: 0 0 0 6px rgba(255,77,109,0); transform: scale(1.1); } } .st-listen { display: flex !important; align-items: center; justify-content: center; gap: 6px; } .st-mic .st-mic-icon { display: inline-flex; align-items: center; justify-content: center; } /* ════════════════════════════════════════════════════════════════ v92 ★ ADHAN-SETTINGS · Per-Prayer Toggles ════════════════════════════════════════════════════════════════ */ .settings-prayer-toggles { margin-top: 14px; background: rgba(0,0,0,0.04); border-radius: 12px; padding: 8px 12px; } .spt-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 4px; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; border-bottom: 1px solid rgba(0,0,0,0.04); } .spt-row:last-child { border-bottom: none; } .spt-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--gold, #d4a247); cursor: pointer; } /* Brutal-Shell scope */ #brutalOverlay .settings-prayer-toggles { background: rgba(255,255,255,0.05); } #brutalOverlay .spt-row { color: var(--text); border-bottom-color: rgba(255,255,255,0.08); } /* ════════════════════════════════════════════════════════════════ v92 ★ SALAT · Daily-Challenge + Per-Prayer-Streaks + Heatmap ════════════════════════════════════════════════════════════════ */ .salat-daily-challenge { background: radial-gradient(ellipse 80% 60% at 0% 0%, rgba(212,162,71,0.15), transparent 60%), linear-gradient(135deg, var(--surface), var(--surface-elev, var(--surface))); border: 1px solid rgba(212,162,71,0.32); border-radius: 18px; padding: 16px 18px; margin-bottom: 22px; position: relative; overflow: hidden; } .salat-daily-challenge::before { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,225,160,0.10) 50%, transparent 70%); background-size: 200% 100%; animation: tpShimmer 4s ease-in-out infinite; pointer-events: none; } .sdc-eyebrow { font-size: 10px; letter-spacing: 1.8px; font-weight: 800; text-transform: uppercase; color: var(--gold, #d4a247); margin-bottom: 6px; } .sdc-row { display: flex; align-items: center; gap: 14px; } .sdc-info { flex: 1; min-width: 0; } .sdc-title { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 2px; } .sdc-desc { font-size: 12px; color: var(--text-muted); } .sdc-reward { font-family: 'SF Mono', Menlo, monospace; font-weight: 800; color: var(--gold); font-size: 15px; flex-shrink: 0; padding: 8px 12px; background: rgba(212,162,71,0.10); border-radius: 10px; } .sdc-claim { width: 100%; margin-top: 12px; padding: 12px; background: linear-gradient(135deg, var(--gold), var(--gold-soft)); color: #0a0a0a; font-weight: 800; font-size: 14px; border: none; border-radius: 12px; cursor: pointer; box-shadow: 0 4px 14px rgba(212,162,71,0.30); } .sdc-claim.is-done { background: linear-gradient(135deg, rgba(78,163,114,0.20), rgba(78,163,114,0.06)); color: var(--emerald, #4ea372); box-shadow: none; cursor: default; } /* Per-Prayer Streaks */ .salat-prayer-streaks { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 22px; } .sps-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 6px; text-align: center; } .sps-card.sps-flame1 { border-color: rgba(232,140,30,0.30); background: linear-gradient(135deg, rgba(232,140,30,0.06), transparent); } .sps-card.sps-flame2 { border-color: rgba(232,140,30,0.55); background: linear-gradient(135deg, rgba(232,140,30,0.14), rgba(232,140,30,0.02)); } .sps-card.sps-flame3 { border-color: var(--gold); background: linear-gradient(135deg, rgba(212,162,71,0.20), rgba(212,162,71,0.04)); box-shadow: 0 4px 14px rgba(212,162,71,0.25); } .sps-name { font-size: 11px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.5px; } .sps-num { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 26px; font-weight: 800; color: var(--text); line-height: 1.1; margin: 2px 0; } .sps-card.sps-flame3 .sps-num { color: var(--gold); } .sps-lbl { font-size: 9px; color: var(--text-muted); letter-spacing: 1px; text-transform: uppercase; font-weight: 700; } /* Heatmap (GitHub-Style 5 weeks x 7 days) */ .salat-heatmap { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px; margin-bottom: 22px; } .sh-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; } .sh-cell { aspect-ratio: 1; border-radius: 4px; background: rgba(0,0,0,0.04); transition: transform 0.15s ease; } .sh-cell.sh-l0 { background: rgba(212,162,71,0.06); } .sh-cell.sh-l1 { background: rgba(78,163,114,0.25); } .sh-cell.sh-l3 { background: rgba(78,163,114,0.50); } .sh-cell.sh-l4 { background: rgba(78,163,114,0.75); } .sh-cell.sh-l5 { background: linear-gradient(135deg, var(--gold), var(--gold-soft)); box-shadow: 0 0 8px rgba(212,162,71,0.5); } .sh-cell.sh-today { outline: 2px solid var(--gold); outline-offset: 1px; } .sh-cell.sh-future { background: transparent; border: 1px dashed rgba(0,0,0,0.08); } .sh-legend { display: flex; align-items: center; gap: 4px; margin-top: 10px; font-size: 10px; color: var(--text-muted); font-weight: 700; letter-spacing: 0.5px; } .sh-legend .sh-cell { width: 12px; height: 12px; } /* ════════════════════════════════════════════════════════════════ v92 ★ FAMILY · Group-Challenge + Live-Feed ════════════════════════════════════════════════════════════════ */ .fm92-group-challenge { background: radial-gradient(ellipse 90% 60% at 0% 0%, rgba(212,162,71,0.18), transparent 60%), linear-gradient(135deg, #0b0f1c 0%, #131726 100%); color: #f4ede0; border: 1px solid rgba(212,162,71,0.30); border-radius: 20px; padding: 18px 18px 16px; margin-bottom: 16px; position: relative; overflow: hidden; } .fm92-gc-head { margin-bottom: 14px; } .fm92-gc-eyebrow { font-size: 10px; letter-spacing: 1.8px; font-weight: 800; color: rgba(212,162,71,0.85); text-transform: uppercase; margin-bottom: 4px; } .fm92-gc-title { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 22px; font-weight: 800; color: #f4ede0; } .fm92-gc-progress { margin-bottom: 10px; } .fm92-gc-bar { height: 10px; background: rgba(244,237,224,0.08); border-radius: 999px; overflow: hidden; } .fm92-gc-fill { height: 100%; background: linear-gradient(90deg, var(--gold, #d4a247), var(--gold-soft, #e0b25a)); border-radius: 999px; box-shadow: 0 0 10px rgba(212,162,71,0.6); transition: width 0.5s ease; } .fm92-gc-meta { display: flex; justify-content: space-between; margin-top: 6px; font-size: 13px; } .fm92-gc-now { font-family: 'SF Mono', Menlo, monospace; font-weight: 800; color: var(--gold); } .fm92-gc-pct { font-weight: 700; color: rgba(244,237,224,0.6); } .fm92-gc-reward { margin-top: 8px; font-size: 12px; color: rgba(244,237,224,0.7); text-align: center; padding-top: 8px; border-top: 1px solid rgba(244,237,224,0.08); } /* Live-Feed */ .fm92-live-feed { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 14px; margin-bottom: 18px; } .fm92-lf-head { display: flex; align-items: center; gap: 8px; font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 10px; } .fm92-lf-head::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #4ea372; box-shadow: 0 0 0 0 rgba(78,163,114,0.6); animation: liveBreathe 1.6s ease-in-out infinite; } .fm92-lf-list { display: flex; flex-direction: column; gap: 6px; } .fm92-lf-row { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; padding: 8px 4px; font-size: 12.5px; color: var(--text); } .fm92-lf-row.is-own { background: rgba(212,162,71,0.08); border-radius: 8px; padding: 8px 10px; margin: 0 -6px; } .fm92-lf-av { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--gold-soft)); color: #0a0a0a; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; } .fm92-lf-tx { color: var(--text-muted); } .fm92-lf-tx strong { color: var(--text); font-weight: 700; } .fm92-lf-tm { font-size: 11px; color: var(--text-dim); white-space: nowrap; } /* ════════════════════════════════════════════════════════════════ v93 ★ ĪMĀN-PULSE · Live-EKG Hero (UNIKAT) ════════════════════════════════════════════════════════════════ */ .iman-pulse-card { position: relative; margin: 14px 0 18px; padding: 16px 18px 14px; border-radius: 22px; background: radial-gradient(ellipse at 30% 0%, rgba(212,175,55,0.18), transparent 70%), linear-gradient(180deg, #0d0f0d 0%, #14110a 100%); border: 1px solid rgba(212,175,55,0.22); box-shadow: 0 12px 38px rgba(0,0,0,0.45), inset 0 1px 0 rgba(212,175,55,0.18); overflow: hidden; } .iman-pulse-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 80% 100%, rgba(212,175,55,0.10), transparent 60%); pointer-events: none; } .ipc-head { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 4px; } .ipc-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; color: rgba(212,175,55,0.9); text-transform: uppercase; } .ipc-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #ef5350; box-shadow: 0 0 8px rgba(239,83,80,0.8); animation: ipcDot 1.2s ease-in-out infinite; } @keyframes ipcDot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } } .ipc-score { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 34px; font-weight: 700; color: #d4af37; line-height: 1; letter-spacing: -0.02em; text-shadow: 0 0 24px rgba(212,175,55,0.5); } .ipc-score.is-pop { animation: ipcPop 0.6s cubic-bezier(0.25,1.5,0.5,1); } @keyframes ipcPop { 0% { transform: scale(1); } 40% { transform: scale(1.15); text-shadow: 0 0 36px rgba(212,175,55,0.9); } 100% { transform: scale(1); } } .ipc-ekg { display: block; width: 100%; height: 90px; margin: 2px 0 6px; background: linear-gradient(180deg, rgba(212,175,55,0.04), transparent 60%); border-top: 1px dashed rgba(212,175,55,0.10); border-bottom: 1px dashed rgba(212,175,55,0.10); } .ipc-ekg #ipcHead { filter: drop-shadow(0 0 6px rgba(212,175,55,1)); } .ipc-foot { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-top: 6px; } .ipc-foot-l { text-align: left; } .ipc-foot-r { text-align: right; } .ipc-foot-m { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-style: italic; font-size: 12.5px; color: rgba(255,255,255,0.7); text-align: center; } .ipc-label { font-size: 9.5px; letter-spacing: 0.16em; color: rgba(255,255,255,0.45); text-transform: uppercase; } .ipc-value { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 18px; font-weight: 700; color: #d4af37; } /* ════════════════════════════════════════════════════════════════ v93 ★ VERS HEUTE · personalisierter Quran-Vers (UNIKAT) ════════════════════════════════════════════════════════════════ */ .vers-heute-card { position: relative; margin: 0 0 18px; padding: 18px 18px 16px; border-radius: 20px; background: linear-gradient(180deg, #faf6ed 0%, #f3ecd9 100%); border: 1px solid rgba(140,103,40,0.18); box-shadow: 0 8px 24px rgba(80,55,15,0.10); overflow: hidden; } .vers-heute-card::after { content: ''; position: absolute; top: -40px; right: -40px; width: 160px; height: 160px; background: radial-gradient(circle, rgba(212,175,55,0.10), transparent 70%); pointer-events: none; } .vhc-eyebrow { display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; color: rgba(120,90,30,0.8); text-transform: uppercase; margin-bottom: 12px; } .vhc-mark { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #d4af37, #a98421); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: 0; } .vhc-ref { margin-left: auto; color: rgba(120,90,30,0.6); letter-spacing: 0.08em; font-weight: 600; } .vhc-ar { font-family: 'Amiri Quran', 'Amiri', 'Scheherazade New', serif; font-size: 26px; line-height: 1.85; color: #2a1d0a; text-align: right; margin-bottom: 14px; } .vhc-de { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 16px; line-height: 1.55; color: #3a2a14; font-style: italic; margin-bottom: 12px; } .vhc-why { padding: 10px 12px; border-left: 3px solid #d4af37; background: rgba(212,175,55,0.08); border-radius: 4px; font-size: 13px; line-height: 1.5; color: #5a4322; margin-bottom: 14px; } .vhc-actions { display: flex; justify-content: flex-end; } .vhc-btn { appearance: none; border: none; cursor: pointer; padding: 9px 16px; border-radius: 12px; background: linear-gradient(135deg, #d4af37, #b8941f); color: #1a1408; font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 13px; font-weight: 700; box-shadow: 0 4px 12px rgba(212,175,55,0.3); transition: transform 0.2s, box-shadow 0.2s; } .vhc-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(212,175,55,0.4); } .vhc-btn:active { transform: translateY(0); } /* ════════════════════════════════════════════════════════════════ v93 ★ 40-FAJR-PASS · Hadith-basierter Nifaq-Schutz (UNIKAT) ════════════════════════════════════════════════════════════════ */ .fajr40-card { position: relative; margin: 0 0 18px; padding: 16px 16px 14px; border-radius: 20px; background: linear-gradient(140deg, #0a1418 0%, #0e1a22 50%, #0a1418 100%); border: 1px solid rgba(120,180,220,0.18); box-shadow: 0 10px 30px rgba(0,0,0,0.4); overflow: hidden; } .fajr40-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(140,200,240,0.10), transparent 60%); pointer-events: none; } .f40-head { position: relative; display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .f40-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; color: rgba(140,200,240,0.85); text-transform: uppercase; } .f40-counter { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 26px; font-weight: 700; color: #b8d4e8; line-height: 1; } .f40-counter .f40-sl { font-size: 14px; color: rgba(184,212,232,0.55); font-weight: 500; margin-left: 2px; } .f40-hadith { position: relative; font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-style: italic; font-size: 12px; line-height: 1.5; color: rgba(220,235,245,0.7); padding: 8px 10px; border-left: 2px solid rgba(140,200,240,0.4); background: rgba(140,200,240,0.05); border-radius: 0 6px 6px 0; margin-bottom: 12px; } .f40-grid { position: relative; display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin-bottom: 10px; } .f40-slot { aspect-ratio: 1 / 1; border-radius: 4px; background: rgba(255,255,255,0.04); border: 1px solid rgba(140,200,240,0.10); position: relative; transition: background 0.3s, transform 0.3s; } .f40-slot.is-filled { background: linear-gradient(135deg, #5cb8f0, #2a7fb8); border-color: rgba(140,200,240,0.6); box-shadow: 0 0 6px rgba(92,184,240,0.4); } .f40-slot.is-broken { background: rgba(120,120,120,0.18); border-color: rgba(120,120,120,0.25); opacity: 0.6; } .f40-slot.is-today { outline: 2px solid #d4af37; outline-offset: 1px; animation: f40Today 1.6s ease-in-out infinite; } @keyframes f40Today { 0%,100% { box-shadow: 0 0 0 0 rgba(212,175,55,0.6); } 50% { box-shadow: 0 0 0 4px rgba(212,175,55,0); } } .f40-status { position: relative; font-size: 12px; color: rgba(220,235,245,0.6); text-align: center; font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-style: italic; } /* ════════════════════════════════════════════════════════════════ v93 ★ MOOD-SHIFT · Pre/Post Gebets-Mood (UNIKAT) ════════════════════════════════════════════════════════════════ */ .mood-shift-card { margin: 18px 0; padding: 14px 14px 12px; border-radius: 18px; background: linear-gradient(180deg, #faf6ed 0%, #f3eee2 100%); border: 1px solid rgba(140,103,40,0.14); } .msc-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; color: rgba(120,90,30,0.8); text-transform: uppercase; margin-bottom: 10px; } .msc-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 10px; } .msc-bar { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 10px; background: rgba(212,175,55,0.06); border: 1px solid rgba(140,103,40,0.10); } .msc-bar-name { font-size: 11px; font-weight: 600; color: rgba(60,45,20,0.7); letter-spacing: 0.05em; } .msc-bar-track { width: 100%; height: 36px; background: rgba(140,103,40,0.08); border-radius: 4px; position: relative; overflow: hidden; } .msc-bar-fill { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, #d4af37, #b8941f); border-radius: 4px; transition: height 0.6s cubic-bezier(0.25,0.1,0.25,1); } .msc-bar-fill.is-neg { background: linear-gradient(180deg, #c66a5a, #963f30); } .msc-bar-val { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 12px; font-weight: 700; color: #5a4322; } .msc-bar.is-empty .msc-bar-fill { display: none; } .msc-bar.is-empty .msc-bar-val { color: rgba(60,45,20,0.25); } .msc-foot { font-size: 11.5px; color: rgba(60,45,20,0.55); font-style: italic; font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; line-height: 1.4; } .mood-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 2147483647; display: flex; align-items: center; justify-content: center; padding: 24px; animation: mmFade 0.3s ease; } .mood-modal[hidden] { display: none; } @keyframes mmFade { from { opacity: 0; } to { opacity: 1; } } .mm-card { width: 100%; max-width: 360px; padding: 24px 22px; border-radius: 22px; background: linear-gradient(180deg, #faf6ed 0%, #f3ecd9 100%); box-shadow: 0 20px 60px rgba(0,0,0,0.5); text-align: center; animation: mmSlide 0.4s cubic-bezier(0.25,1.5,0.5,1); } @keyframes mmSlide { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .mm-title { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 22px; font-weight: 700; color: #2a1d0a; margin-bottom: 4px; } .mm-sub { font-size: 13px; color: rgba(60,45,20,0.6); margin-bottom: 18px; } .mm-row { display: flex; justify-content: space-between; gap: 6px; margin-bottom: 14px; } .mm-emo { appearance: none; border: none; cursor: pointer; flex: 1; aspect-ratio: 1 / 1; border-radius: 14px; background: rgba(212,175,55,0.08); border: 1px solid rgba(140,103,40,0.15); font-size: 28px; transition: transform 0.2s, background 0.2s; } .mm-emo:hover { transform: scale(1.1); background: rgba(212,175,55,0.18); } .mm-emo:active { transform: scale(0.95); } .mm-skip { appearance: none; border: none; cursor: pointer; background: transparent; color: rgba(60,45,20,0.5); font-size: 13px; text-decoration: underline; } /* ════════════════════════════════════════════════════════════════ v93 ★ SAJDA-PASSPORT · Geo-Stempel (UNIKAT) ════════════════════════════════════════════════════════════════ */ .sajda-pass-card { margin: 0 0 18px; padding: 14px 14px 12px; border-radius: 18px; background: linear-gradient(140deg, #1a1408 0%, #2a1f10 50%, #1a1408 100%); border: 1px solid rgba(212,175,55,0.22); box-shadow: 0 10px 28px rgba(0,0,0,0.4); position: relative; overflow: hidden; } .sajda-pass-card::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, transparent 0 18px, rgba(212,175,55,0.04) 18px 19px), radial-gradient(circle at 20% 10%, rgba(212,175,55,0.12), transparent 50%); pointer-events: none; } .spc-eyebrow { position: relative; font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; color: rgba(212,175,55,0.85); text-transform: uppercase; margin-bottom: 6px; } .spc-stat { position: relative; font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 13px; color: rgba(255,255,255,0.7); margin-bottom: 12px; } .spc-stat span { color: #d4af37; font-weight: 700; font-size: 16px; } .spc-stamps { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 8px; margin-bottom: 10px; min-height: 84px; } .spc-stamp { position: relative; aspect-ratio: 1 / 1.1; border-radius: 10px; background: linear-gradient(160deg, rgba(212,175,55,0.18), rgba(212,175,55,0.05)); border: 1.5px dashed rgba(212,175,55,0.5); padding: 6px 5px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center; font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; transform: rotate(-2deg); transition: transform 0.3s; } .spc-stamp:nth-child(even) { transform: rotate(2deg); } .spc-stamp:nth-child(3n) { transform: rotate(-1deg); } .spc-stamp:hover { transform: rotate(0deg) scale(1.05); } .spc-st-city { font-size: 11px; font-weight: 700; color: #d4af37; letter-spacing: 0.02em; line-height: 1.1; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 100%; } .spc-st-prayer { font-size: 10px; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.08em; } .spc-st-date { font-size: 9.5px; color: rgba(255,255,255,0.4); } .spc-empty { grid-column: 1 / -1; text-align: center; font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-style: italic; font-size: 12.5px; color: rgba(255,255,255,0.45); padding: 20px 10px; } .spc-foot { position: relative; font-size: 11px; color: rgba(255,255,255,0.45); font-style: italic; font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; line-height: 1.4; } /* ════════════════════════════════════════════════════════════════ v94 ★ UNIKAT++ · Adhan-Wave + Sajda-Detector + Khushu-Ring + Prophet-Mirror ════════════════════════════════════════════════════════════════ */ /* — GLOBAL ADHAN-WAVE — Hero-Globus mit Live-Adhan-Punkten */ .adhan-wave-card { position: relative; margin: 14px 0 18px; padding: 16px 16px 14px; border-radius: 24px; background: radial-gradient(ellipse at 50% 0%, rgba(140,200,240,0.12), transparent 60%), linear-gradient(180deg, #050b16 0%, #0a1424 70%, #050b16 100%); border: 1px solid rgba(140,200,240,0.18); box-shadow: 0 12px 38px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04); overflow: hidden; } .aw-eyebrow { display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; color: rgba(140,200,240,0.85); text-transform: uppercase; margin-bottom: 12px; } .aw-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #4eb3ff; box-shadow: 0 0 8px rgba(78,179,255,0.9); animation: awDot 1.6s ease-in-out infinite; } @keyframes awDot { 0%,100% { opacity:1 } 50% { opacity:0.3 } } .aw-counter { margin-left: auto; font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; color: #ffd76e; font-weight: 700; letter-spacing: 0.04em; } .aw-globe-wrap { display: flex; justify-content: center; align-items: center; padding: 4px 0; } .aw-globe { width: 220px; height: 220px; } #awMeridians { animation: awSpin 60s linear infinite; transform-origin: 0 0; } @keyframes awSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .aw-dot { fill: #ffd76e; filter: drop-shadow(0 0 6px rgba(255,215,110,0.9)); animation: awPulse 2s ease-in-out infinite; } @keyframes awPulse { 0%,100% { r: 1.6; opacity: 0.6; } 50% { r: 2.8; opacity: 1; } } .aw-dot-ring { fill: none; stroke: rgba(255,215,110,0.6); stroke-width: 0.6; animation: awRing 2.2s ease-out infinite; transform-box: fill-box; transform-origin: center; } @keyframes awRing { 0% { r: 1; opacity: 0.8; } 100% { r: 8; opacity: 0; } } .aw-foot { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-style: italic; text-align: center; font-size: 12.5px; color: rgba(220,235,250,0.6); margin-top: 6px; } /* — SAJDA-DETECTOR — */ .sajda-det-card { position: relative; margin: 0 0 18px; padding: 14px 14px 12px; border-radius: 20px; background: linear-gradient(180deg, #0d0f0d 0%, #14110a 100%); border: 1px solid rgba(212,175,55,0.20); box-shadow: 0 10px 28px rgba(0,0,0,0.45); } .sd-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .sd-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; color: rgba(212,175,55,0.85); text-transform: uppercase; } .sd-toggle { appearance: none; border: none; cursor: pointer; padding: 7px 14px; border-radius: 10px; background: linear-gradient(135deg, #d4af37, #b8941f); color: #1a1408; font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 12px; font-weight: 700; } .sd-toggle.is-active { background: rgba(78,163,114,0.18); color: #4ea372; border: 1px solid rgba(78,163,114,0.4); } .sd-live { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px; border-radius: 14px; background: linear-gradient(135deg, rgba(212,175,55,0.06), rgba(212,175,55,0.02)); border: 1px dashed rgba(212,175,55,0.20); margin-bottom: 12px; } .sd-pose { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 18px; font-weight: 700; color: #d4af37; } .sd-time { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 22px; font-weight: 700; color: #ffd76e; letter-spacing: -0.02em; } .sd-live.is-sajda { background: linear-gradient(135deg, rgba(212,175,55,0.18), rgba(212,175,55,0.05)); border-color: rgba(212,175,55,0.5); box-shadow: 0 0 0 0 rgba(212,175,55,0.4); animation: sdPulse 1.4s ease-in-out infinite; } @keyframes sdPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(212,175,55,0.4); } 50% { box-shadow: 0 0 0 8px rgba(212,175,55,0); } } .sd-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; } .sd-stat { padding: 8px 6px; border-radius: 10px; background: rgba(255,255,255,0.03); border: 1px solid rgba(212,175,55,0.10); text-align: center; } .sd-stat-lbl { font-size: 9.5px; letter-spacing: 0.12em; color: rgba(255,255,255,0.45); text-transform: uppercase; margin-bottom: 3px; } .sd-stat-val { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 16px; font-weight: 700; color: #d4af37; } .sd-foot { text-align: center; font-size: 11.5px; color: rgba(255,255,255,0.45); font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-style: italic; line-height: 1.4; } /* — KHUSHU-RING — Apple-Watch-Style */ .khushu-ring-card { margin: 0 0 18px; padding: 16px 16px 14px; border-radius: 22px; background: radial-gradient(ellipse at 30% 0%, rgba(212,175,55,0.10), transparent 70%), linear-gradient(180deg, #0d0f0d 0%, #14110a 100%); border: 1px solid rgba(212,175,55,0.22); box-shadow: 0 10px 30px rgba(0,0,0,0.45); } .kr-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; color: rgba(212,175,55,0.85); text-transform: uppercase; margin-bottom: 12px; } .kr-body { display: grid; grid-template-columns: 130px 1fr; gap: 12px; align-items: center; } .kr-svg { width: 130px; height: 130px; filter: drop-shadow(0 0 12px rgba(212,175,55,0.3)); } #krProgress { transition: stroke-dashoffset 1s cubic-bezier(0.25,1,0.5,1); } .kr-detail { display: flex; flex-direction: column; gap: 4px; } .kr-row { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid rgba(212,175,55,0.08); } .kr-row:last-child { border-bottom: none; } .kr-prayer { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 13px; color: rgba(255,255,255,0.8); } .kr-pts { appearance: none; border: none; cursor: pointer; padding: 4px 10px; border-radius: 10px; background: rgba(212,175,55,0.10); border: 1px solid rgba(212,175,55,0.2); font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 12px; font-weight: 700; color: #d4af37; letter-spacing: 0.05em; min-width: 60px; } .kr-pts.is-rated { background: linear-gradient(135deg, #d4af37, #b8941f); color: #1a1408; border-color: transparent; } .kr-foot { text-align: center; margin-top: 10px; font-size: 11.5px; color: rgba(255,255,255,0.45); font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-style: italic; } /* Khushu Modal */ .khushu-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 2147483647; display: flex; align-items: center; justify-content: center; padding: 20px; } .khushu-modal[hidden] { display: none; } .khm-card { width: 100%; max-width: 380px; padding: 22px 20px; border-radius: 22px; background: linear-gradient(180deg, #faf6ed 0%, #f3ecd9 100%); box-shadow: 0 20px 60px rgba(0,0,0,0.5); text-align: center; } .khm-title { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 20px; font-weight: 700; color: #2a1d0a; margin-bottom: 4px; } .khm-sub { font-size: 13px; color: rgba(60,45,20,0.6); margin-bottom: 14px; } .khm-scale { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin-bottom: 14px; } .khm-scale button { appearance: none; border: none; cursor: pointer; aspect-ratio: 1 / 1; border-radius: 8px; background: rgba(212,175,55,0.1); border: 1px solid rgba(140,103,40,0.18); font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-weight: 700; font-size: 13px; color: #5a4322; transition: transform 0.15s, background 0.15s; } .khm-scale button:hover { transform: scale(1.1); background: rgba(212,175,55,0.25); } .khm-skip { appearance: none; border: none; cursor: pointer; background: transparent; color: rgba(60,45,20,0.5); font-size: 13px; text-decoration: underline; } /* — PROPHET-MIRROR — */ .prophet-mirror-card { position: relative; margin: 0 0 18px; padding: 18px 16px 16px; border-radius: 22px; background: linear-gradient(180deg, #f8f4e9 0%, #ede4cc 100%); border: 1px solid rgba(140,103,40,0.22); box-shadow: 0 12px 32px rgba(80,55,15,0.18); overflow: hidden; } .prophet-mirror-card::before { content: ''; position: absolute; top: -40px; left: -40px; width: 200px; height: 200px; background: repeating-conic-gradient(from 0deg, rgba(212,175,55,0.06) 0deg 10deg, transparent 10deg 20deg); border-radius: 50%; pointer-events: none; } .pm-eyebrow { position: relative; font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; color: rgba(120,90,30,0.85); text-transform: uppercase; margin-bottom: 12px; } .pm-body { position: relative; display: grid; grid-template-columns: 78px 1fr; gap: 14px; align-items: center; margin-bottom: 12px; } .pm-portrait { width: 78px; height: 78px; border-radius: 50%; background: linear-gradient(135deg, #d4af37, #8c6728); display: flex; align-items: center; justify-content: center; font-family: 'Amiri', 'Scheherazade New', serif; font-size: 36px; font-weight: 700; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.3); box-shadow: inset 0 0 0 3px rgba(255,255,255,0.18), inset 0 0 0 4px rgba(212,175,55,0.5), 0 8px 22px rgba(80,55,15,0.3); } .pm-name { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 22px; font-weight: 700; color: #2a1d0a; line-height: 1.1; } .pm-arabic { font-family: 'Amiri', 'Scheherazade New', serif; font-size: 20px; color: #8c6728; direction: rtl; margin: 2px 0 4px; } .pm-trait { font-size: 11.5px; color: rgba(120,90,30,0.7); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; } .pm-why { position: relative; padding: 10px 12px; border-left: 3px solid #d4af37; background: rgba(212,175,55,0.08); border-radius: 4px; font-size: 13px; line-height: 1.55; color: #3a2a14; margin-bottom: 10px; } .pm-story { position: relative; font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-style: italic; font-size: 13px; line-height: 1.55; color: rgba(80,55,15,0.85); } /* ════════════════════════════════════════════════════════════════ v95 ★ POST-SALAH ADHKAR · Marifa-Style Mega Tap-Counter ════════════════════════════════════════════════════════════════ */ .adhkar-modal { position: fixed; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(212,175,55,0.18), rgba(8,8,12,0.92) 70%); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); z-index: 2147483647; display: flex; align-items: center; justify-content: center; padding: 20px 16px; animation: adhkFade 0.4s ease; } .adhkar-modal[hidden] { display: none; } @keyframes adhkFade { from { opacity: 0; backdrop-filter: blur(0); } to { opacity: 1; } } .adhk-wrap { width: 100%; max-width: 420px; max-height: calc(100vh - 40px); border-radius: 26px; background: radial-gradient(ellipse at 50% -10%, rgba(212,175,55,0.18), transparent 70%), linear-gradient(180deg, #0d0f0d 0%, #14110a 100%); border: 1px solid rgba(212,175,55,0.30); box-shadow: 0 30px 80px rgba(0,0,0,0.75), inset 0 1px 0 rgba(212,175,55,0.18); padding: 22px 22px 18px; position: relative; overflow: hidden; display: flex; flex-direction: column; animation: adhkSlide 0.5s cubic-bezier(0.25,1.2,0.35,1); } @keyframes adhkSlide { from { transform: translateY(30px) scale(0.96); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } .adhk-head { position: relative; text-align: center; margin-bottom: 6px; } .adhk-close { position: absolute; top: -8px; right: -6px; appearance: none; border: none; cursor: pointer; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.6); font-size: 20px; line-height: 1; } .adhk-prayer { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.16em; color: rgba(212,175,55,0.85); text-transform: uppercase; } .adhk-sub { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-style: italic; font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 2px; } .adhk-steps { display: flex; justify-content: center; gap: 8px; margin: 14px 0 16px; } .adhk-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(212,175,55,0.18); border: 1px solid rgba(212,175,55,0.35); transition: all 0.3s; } .adhk-dot.is-active { background: #d4af37; box-shadow: 0 0 12px rgba(212,175,55,0.7); transform: scale(1.3); } .adhk-dot.is-done { background: rgba(212,175,55,0.6); } .adhk-body { text-align: center; margin-bottom: 10px; min-height: 92px; display: flex; flex-direction: column; justify-content: center; } .adhk-ar { font-family: 'Amiri Quran', 'Amiri', 'Scheherazade New', serif; font-size: 38px; line-height: 1.6; color: #ffd76e; text-shadow: 0 0 24px rgba(212,175,55,0.4); margin-bottom: 8px; transition: font-size 0.3s; } .adhk-ar.is-long { font-size: 22px; line-height: 1.8; } .adhk-tr { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-style: italic; font-size: 15px; color: #d4af37; margin-bottom: 4px; } .adhk-de { font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.4; } /* COUNTER + RING */ .adhk-counter-wrap { position: relative; width: 240px; height: 240px; margin: 14px auto 12px; } .adhk-ring { position: absolute; inset: 0; width: 100%; height: 100%; } #adhkRingP { transition: stroke-dashoffset 0.4s cubic-bezier(0.25,1,0.5,1); } .adhk-tap { position: absolute; inset: 18px; appearance: none; border: none; cursor: pointer; border-radius: 50%; background: radial-gradient(circle at 40% 35%, rgba(255,235,170,0.25), transparent 60%), linear-gradient(160deg, #d4af37 0%, #a8841e 60%, #6b4818 100%); color: #1a1408; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: inset 0 -8px 20px rgba(0,0,0,0.4), inset 0 4px 10px rgba(255,255,255,0.25), 0 12px 30px rgba(0,0,0,0.5), 0 0 60px rgba(212,175,55,0.4); transition: transform 0.12s, box-shadow 0.2s; -webkit-tap-highlight-color: transparent; } .adhk-tap:active { transform: scale(0.96); box-shadow: inset 0 -4px 14px rgba(0,0,0,0.4), inset 0 2px 8px rgba(255,255,255,0.15), 0 6px 16px rgba(0,0,0,0.4), 0 0 80px rgba(255,215,110,0.7); } .adhk-tap.is-complete { background: radial-gradient(circle at 40% 35%, rgba(170,255,180,0.3), transparent 60%), linear-gradient(160deg, #4ea372 0%, #2e7d50 60%, #1a4d30 100%); animation: adhkComplete 0.6s ease; } @keyframes adhkComplete { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } } .adhk-tap-cnt { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-weight: 700; font-size: 80px; line-height: 1; letter-spacing: -0.04em; text-shadow: 0 2px 6px rgba(0,0,0,0.3); } .adhk-tap-cnt.is-pop { animation: adhkCntPop 0.3s cubic-bezier(0.25,1.5,0.5,1); } @keyframes adhkCntPop { 0% { transform: scale(1); } 40% { transform: scale(1.18); text-shadow: 0 0 24px rgba(255,255,255,0.6); } 100% { transform: scale(1); } } .adhk-tap-of { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 18px; font-weight: 600; opacity: 0.65; margin-top: 2px; } .adhk-tap-hint { font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase; opacity: 0.55; margin-top: 4px; font-weight: 700; } /* AKTIONEN */ .adhk-actions { display: grid; grid-template-columns: 56px 1fr 56px; gap: 8px; margin-bottom: 8px; } .adhk-act { appearance: none; border: none; cursor: pointer; padding: 12px 14px; border-radius: 14px; font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 14px; font-weight: 700; transition: background 0.2s; } .adhk-act-back, .adhk-act-next { background: rgba(212,175,55,0.12); border: 1px solid rgba(212,175,55,0.25); color: #d4af37; font-size: 24px; line-height: 1; padding: 8px; } .adhk-act-skip { background: transparent; color: rgba(255,255,255,0.45); text-decoration: underline; text-underline-offset: 4px; font-size: 13px; } .adhk-act-back:hover, .adhk-act-next:hover { background: rgba(212,175,55,0.22); } .adhk-foot { text-align: center; font-size: 11px; color: rgba(255,255,255,0.4); font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-style: italic; margin-top: 4px; } /* ════════════════════════════════════════════════════════════════ v95 ★ BRAND IDENTITY · Mihrāb-Mark + neue Tagline ════════════════════════════════════════════════════════════════ */ .sp-content { display: flex; flex-direction: column; align-items: center; } .sp-mark { width: 64px; height: 76px; margin-bottom: 18px; filter: drop-shadow(0 6px 22px rgba(212,175,55,0.5)); animation: spMarkRise 1.6s cubic-bezier(0.25,1.2,0.35,1); } @keyframes spMarkRise { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .sp-brand-v95 { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-weight: 700; font-size: 44px; letter-spacing: 0.04em; text-transform: none; line-height: 1; display: flex; align-items: baseline; text-shadow: 0 4px 24px rgba(0,0,0,0.6); } .sp-brand-v95 .sp-brand-sabr { color: #ffffff; } .sp-brand-v95 .sp-brand-dot { color: #d4af37; margin: 0 4px; font-size: 0.9em; transform: translateY(-0.1em); display: inline-block; } .sp-brand-v95 .sp-brand-ai { background: linear-gradient(180deg, #ffe9a8 0%, #d4af37 50%, #8c6728 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-weight: 800; } .sp-tagline-v95 { margin-top: 14px; font-family: system-ui, -apple-system, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.5em; color: rgba(255,255,255,0.55); text-transform: uppercase; text-indent: 0.5em; } .sp-bismillah-mini { margin-top: 22px; font-family: 'Amiri Quran', 'Amiri', 'Scheherazade New', serif; font-size: 14px; color: rgba(212,175,55,0.55); letter-spacing: 0.02em; animation: spBismFade 2.4s ease; } @keyframes spBismFade { from { opacity: 0; } to { opacity: 1; } } /* Header-Logo (von draußen sichtbar wenn App offen) — auch krasser */ .app-header .logo-brand { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-weight: 700; letter-spacing: 0.02em; } .app-header .logo-brand .logo-dot { color: #d4af37; font-size: 0.85em; display: inline-block; transform: translateY(-0.1em); margin: 0 1px; } .app-header .logo-brand .logo-ai { background: linear-gradient(180deg, #ffe9a8 0%, #d4af37 60%, #8c6728 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 800; } /* ════════════════════════════════════════════════════════════════ v97 ★ MINIMAL SPLASH · klares 3-Zonen Flex-Layout (kein absolute-Bug) ════════════════════════════════════════════════════════════════ */ .splash-v30 { /* Override: 3-Zonen-Layout statt einfaches center */ justify-content: space-between !important; padding: 0 !important; background: linear-gradient(180deg, #050b16 0%, #0a1424 60%, #050b16 100%); } .splash-v30 .sp-bg-aurora { opacity: 0.45; } .splash-v30 .sp-content-v96 { position: relative !important; top: auto !important; left: auto !important; transform: none !important; margin: 0 !important; width: 100%; /* Top-Zone: SABR.AI weiter oben (12vh statt 22vh) */ padding: calc(env(safe-area-inset-top, 0px) + 12vh) 24px 0; display: flex; flex-direction: column; align-items: center; z-index: 10; opacity: 0; animation: sp97In 0.8s ease 0.2s forwards; } @keyframes sp97In { from { opacity: 0; } to { opacity: 1; } } .splash-v30 .sp-content-v96 .sp-brand-v95 { font-size: 52px; letter-spacing: 0.02em; margin-bottom: 0; } .splash-v30 .sp-content-v96 .sp-bismillah-mini { margin-top: 28px; font-size: 13px; color: rgba(229,196,106,0.55); } /* Bottom-Zone: Tagline + 3 Dots */ .splash-v30 .sp-loader-v96 { position: relative !important; left: auto !important; bottom: auto !important; transform: none !important; margin: 0 auto calc(env(safe-area-inset-bottom, 0px) + 72px); display: flex; gap: 12px; z-index: 10; } /* Tagline DEEN OVER DUNYA wird vom content nach unten gezogen */ .splash-v30 .sp-content-v96 .sp-tagline-v95 { display: none; /* aus dem top-content entfernt */ } .splash-v30 .sp-tagline-bottom { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 100px); transform: translateX(-50%); font-family: system-ui, -apple-system, sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: 0.32em; color: rgba(229,196,106,0.62); text-transform: uppercase; text-indent: 0.32em; z-index: 10; white-space: nowrap; opacity: 0; animation: sp97In 1.2s cubic-bezier(0.16,1,0.3,1) 0.7s forwards; } /* Loading-Dots prominenter sichtbar machen */ .splash-v30 .sp-loader-v96 span { width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(135deg, #ffe9a8, #d4af37); box-shadow: 0 0 12px rgba(212,175,55,0.7); animation: sp97Dot 1.4s ease-in-out infinite; } .splash-v30 .sp-loader-v96 span:nth-child(2) { animation-delay: 0.2s; } .splash-v30 .sp-loader-v96 span:nth-child(3) { animation-delay: 0.4s; } @keyframes sp97Dot { 0%, 100% { opacity: 0.35; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.15); } } /* ════════════════════════════════════════════════════════════════ v96 ★ TAWBA-INTRO · Mond entfernt · klares Layout + 3 Dots unten ════════════════════════════════════════════════════════════════ */ .ti96-brand { position: relative; text-align: center; margin: 50px 0 22px; z-index: 5; animation: ti96Rise 1.2s cubic-bezier(0.25,1.2,0.35,1); } @keyframes ti96Rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .ti96-name { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-weight: 700; font-size: 40px; letter-spacing: 0.04em; line-height: 1; display: inline-flex; align-items: baseline; text-shadow: 0 4px 24px rgba(0,0,0,0.7); } .ti96-sabr { color: #ffffff; } .ti96-dot { color: #d4af37; font-size: 0.85em; margin: 0 4px; transform: translateY(-0.12em); display: inline-block; } .ti96-ai { background: linear-gradient(180deg, #ffe9a8 0%, #d4af37 50%, #8c6728 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 800; } .ti96-tagline { margin-top: 10px; font-family: system-ui, -apple-system, sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: 0.5em; color: rgba(229,196,106,0.7); text-transform: uppercase; text-indent: 0.5em; } .ti96-dots { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); transform: translateX(-50%); display: flex; gap: 10px; z-index: 10; } .ti96-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(229,196,106,0.45); animation: ti96Dot 1.4s ease-in-out infinite; } .ti96-dots span:nth-child(1) { animation-delay: 0s; } .ti96-dots span:nth-child(2) { animation-delay: 0.2s; } .ti96-dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes ti96Dot { 0%, 100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); background: #ffe9a8; } } /* alte Mond-Container ausblenden falls noch von altem CSS aktiviert */ .ti22-moon-wrap, .ti22-moon-halo, .ti52-loader { display: none !important; } /* ════════════════════════════════════════════════════════════════ v96 ★ TAWBA-CHAT · Empty-State neu · Bubbles moderner ════════════════════════════════════════════════════════════════ */ .uc-empty-v96 { display: flex; flex-direction: column; align-items: center; padding: 42px 20px 22px; text-align: center; } .ues96-mark { width: 78px; height: 78px; margin-bottom: 22px; filter: drop-shadow(0 6px 18px rgba(212,175,55,0.32)); animation: ues96Float 4s ease-in-out infinite; } @keyframes ues96Float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .ues96-title { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-weight: 700; font-size: 26px; color: #f5f0dc; letter-spacing: -0.01em; margin-bottom: 6px; } .ues96-sub { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-style: italic; font-size: 16px; color: rgba(229,196,106,0.85); margin-bottom: 18px; } .ues96-hint { font-size: 12px; color: rgba(245,240,220,0.55); letter-spacing: 0.03em; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,0.04); border: 1px solid rgba(229,196,106,0.18); display: inline-flex; align-items: center; gap: 8px; } .ues96-hint .ues-dot { width: 6px; height: 6px; border-radius: 50%; background: #4ea372; box-shadow: 0 0 6px rgba(78,163,114,0.7); } /* alte Mond-Empty-State Container ausblenden */ .ues-moon, .ues-moon-halo { display: none !important; } /* Chat-Header moderner */ .ustadh-chat .uc-header { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); background: linear-gradient(180deg, rgba(8,12,20,0.85), rgba(8,12,20,0.65)); border-bottom: 1px solid rgba(229,196,106,0.15); padding: 12px 16px; } .ustadh-chat .uc-avatar { background: linear-gradient(135deg, #d4af37, #8c6728); border: 2px solid rgba(229,196,106,0.4); box-shadow: 0 4px 14px rgba(212,175,55,0.3); } .ustadh-chat .uc-name { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-weight: 700; font-size: 16px; color: #f5f0dc; } .ustadh-chat .uc-status { font-size: 11.5px; color: rgba(245,240,220,0.6); } .ustadh-chat .uc-online { color: #4ea372; } .ustadh-chat .uc-dot-teal { background: #4ea372; box-shadow: 0 0 6px rgba(78,163,114,0.8); } /* Bubbles moderner & ruhiger */ .ustadh-chat .chat-msg.bot, .ustadh-chat .uc34-bot, .ustadh-chat .uc45-greeting { background: linear-gradient(160deg, rgba(245,240,220,0.95), rgba(232,225,196,0.92)) !important; color: #2a1d0a !important; border-radius: 6px 22px 22px 22px !important; padding: 14px 18px !important; border: 1px solid rgba(140,103,40,0.18) !important; box-shadow: 0 8px 22px rgba(0,0,0,0.25) !important; font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important; line-height: 1.55 !important; max-width: 88% !important; } .ustadh-chat .chat-msg.user { background: linear-gradient(135deg, #d4af37, #a8841e) !important; color: #1a1408 !important; border-radius: 22px 6px 22px 22px !important; font-weight: 600 !important; box-shadow: 0 6px 16px rgba(212,175,55,0.25) !important; } .ustadh-chat .uc-msg-avatar.uc45-msg-av { background: linear-gradient(135deg, #d4af37, #8c6728); width: 32px; height: 32px; border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,0.4); } .ustadh-chat .uc45-bism { background: linear-gradient(180deg, rgba(255,233,168,0.10), rgba(140,103,40,0.05)); border: 1px solid rgba(229,196,106,0.25); color: rgba(255,233,168,0.85); padding: 8px 18px; border-radius: 999px; font-family: 'Amiri Quran', 'Amiri', serif; font-size: 14px; display: inline-block; margin: 14px auto 8px; } .ustadh-chat .uc-date-chip { background: rgba(255,255,255,0.04); border: 1px solid rgba(229,196,106,0.15); color: rgba(245,240,220,0.55); font-size: 10px; letter-spacing: 0.18em; padding: 4px 10px; border-radius: 999px; margin: 6px auto 14px; } /* Quick-Action Chips moderner */ .ustadh-chat .uc46-feed-chip { background: rgba(255,255,255,0.05); border: 1px solid rgba(229,196,106,0.22); color: #f5f0dc; padding: 10px 14px; border-radius: 14px; font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; transition: transform 0.15s, background 0.2s; } .ustadh-chat .uc46-feed-chip:hover { background: rgba(229,196,106,0.12); transform: translateY(-1px); } /* ════════════════════════════════════════════════════════════════ v97 ★ TAWBA-CHAT KOMPLETT REDESIGN · Premium iMessage-Style ════════════════════════════════════════════════════════════════ */ /* Container: tieferes, ruhigeres Hintergrund-Setup */ #page-ustadh .ustadh-chat { background: radial-gradient(ellipse 70% 25% at 50% 0%, rgba(229,196,106,0.06) 0%, transparent 70%) !important, linear-gradient(180deg, #0a0d18 0%, #0c1020 50%, #0a0e1c 100%) !important; border-radius: 0 !important; border: none !important; box-shadow: none !important; /* v99 ISSUE-9 Fix: 100vh als Fallback ZUERST, dann 100dvh damit iOS Safari den dynamic-viewport bevorzugt (Adressleisten-Höhe wird subtrahiert) */ height: 100vh !important; height: 100dvh !important; } /* Atmosphere sehr subtil */ #page-ustadh .uc-bg-glow { opacity: 0.4 !important; filter: blur(80px) !important; } #page-ustadh .uc-bg-stars span { opacity: 0.2 !important; } /* HEADER · iMessage-Style minimal */ #page-ustadh .uc-header { background: rgba(10, 13, 24, 0.85) !important; border-bottom: 1px solid rgba(229,196,106,0.08) !important; backdrop-filter: blur(24px) saturate(180%) !important; -webkit-backdrop-filter: blur(24px) saturate(180%) !important; padding: 12px 14px !important; gap: 10px !important; } #page-ustadh .uc-back { background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(229,196,106,0.18) !important; color: rgba(245,240,220,0.9) !important; width: 36px; height: 36px; border-radius: 50% !important; display: flex; align-items: center; justify-content: center; } #page-ustadh .uc-back:hover { background: rgba(229,196,106,0.12) !important; } #page-ustadh .uc-avatar { width: 42px; height: 42px; border-radius: 50% !important; background: radial-gradient(circle at 30% 30%, #ffe9a8 0%, #d4af37 50%, #8c6728 100%) !important; border: 2px solid rgba(229,196,106,0.45) !important; box-shadow: 0 4px 16px rgba(212,175,55,0.35), inset 0 -3px 8px rgba(0,0,0,0.3), inset 0 2px 4px rgba(255,255,255,0.3) !important; display: flex; align-items: center; justify-content: center; position: relative; } /* Avatar Mond/SVG ausblenden, durch ت ersetzen */ #page-ustadh .uc-avatar svg { display: none !important; } #page-ustadh .uc-avatar::after { content: 'ت'; font-family: 'Amiri', 'Scheherazade New', serif; font-size: 24px; font-weight: 700; color: #1a1408; text-shadow: 0 1px 2px rgba(255,255,255,0.4); line-height: 1; } #page-ustadh .uc-info { flex: 1; } #page-ustadh .uc-name { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important; font-weight: 700 !important; font-size: 16px !important; color: #f5f0dc !important; letter-spacing: -0.01em !important; margin-bottom: 2px !important; } #page-ustadh .uc-status { font-size: 11.5px !important; color: rgba(245,240,220,0.55) !important; display: flex; align-items: center; gap: 6px; } #page-ustadh .uc-online { color: #4ea372 !important; font-weight: 600 !important; } #page-ustadh .uc-dot-teal { width: 7px !important; height: 7px !important; background: #4ea372 !important; box-shadow: 0 0 8px rgba(78,163,114,0.9) !important; animation: uc97Pulse 1.6s ease-in-out infinite; } @keyframes uc97Pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.85); opacity: 0.6; } } #page-ustadh .uc-more, #page-ustadh .uc52-more, #page-ustadh .uc-more.uc52-more { background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(229,196,106,0.18) !important; color: rgba(245,240,220,0.9) !important; width: 36px; height: 36px; border-radius: 50% !important; } /* CHAT-BOX · ruhig, sauber */ #page-ustadh .uc-chat-box { padding: 16px 14px 20px !important; background: transparent !important; gap: 0 !important; } /* BISMILLAH-PILL oben · dezent zentriert */ #page-ustadh .uc45-bism { display: block !important; margin: 4px auto 16px !important; text-align: center !important; background: linear-gradient(180deg, rgba(229,196,106,0.10), rgba(229,196,106,0.04)) !important; border: 1px solid rgba(229,196,106,0.22) !important; color: rgba(229,196,106,0.85) !important; padding: 7px 22px !important; border-radius: 999px !important; font-family: 'Amiri Quran', 'Amiri', serif !important; font-size: 14px !important; font-weight: 400 !important; width: fit-content !important; letter-spacing: 0.02em !important; box-shadow: 0 2px 12px rgba(212,175,55,0.08); } /* DATE-CHIP · sauber */ #page-ustadh .uc-date-chip, #page-ustadh .uc45-datemark { display: block !important; margin: 6px auto 16px !important; text-align: center !important; background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(229,196,106,0.10) !important; color: rgba(245,240,220,0.45) !important; font-size: 10px !important; letter-spacing: 0.2em !important; font-weight: 600 !important; padding: 4px 12px !important; border-radius: 999px !important; width: fit-content !important; text-transform: uppercase; } /* MESSAGE-ROW Layout */ #page-ustadh .uc-msg-row { display: flex !important; gap: 8px !important; align-items: flex-end !important; margin-bottom: 14px !important; } #page-ustadh .uc-msg-avatar, #page-ustadh .uc45-msg-av { width: 30px !important; height: 30px !important; flex-shrink: 0; border-radius: 50% !important; background: radial-gradient(circle at 30% 30%, #ffe9a8 0%, #d4af37 60%, #8c6728 100%) !important; border: 1.5px solid rgba(229,196,106,0.35) !important; box-shadow: 0 2px 8px rgba(212,175,55,0.3) !important; display: flex !important; align-items: center; justify-content: center; position: relative; } #page-ustadh .uc45-msg-av::after, #page-ustadh .uc-msg-avatar::after { content: 'ت'; font-family: 'Amiri', serif; font-size: 17px; font-weight: 700; color: #1a1408; line-height: 1; } /* BOT-BUBBLE · cream parchment, modern */ #page-ustadh .chat-msg.bot, #page-ustadh .uc34-bot, #page-ustadh .uc45-greeting { background: linear-gradient(160deg, #faf6ed 0%, #f3ecd9 100%) !important; color: #2a1d0a !important; border-radius: 4px 20px 20px 20px !important; padding: 13px 17px !important; border: 1px solid rgba(140,103,40,0.14) !important; box-shadow: 0 6px 18px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.5) !important; font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important; font-size: 15px !important; line-height: 1.55 !important; max-width: 80% !important; position: relative; } #page-ustadh .chat-msg.bot strong, #page-ustadh .uc45-name { color: #8c6728 !important; font-weight: 700 !important; } #page-ustadh .chat-msg.bot .cm-body, #page-ustadh .uc45-greeting .cm-body { color: #2a1d0a !important; background: transparent !important; padding: 0 !important; } #page-ustadh .uc45-sub { color: rgba(80,55,15,0.7) !important; font-style: italic !important; margin-top: 4px !important; font-size: 14px !important; } #page-ustadh .uc46-heart { color: #c66a5a !important; font-style: normal !important; } /* USER-BUBBLE · richer gold */ #page-ustadh .chat-msg.user { background: linear-gradient(135deg, #ffd76e 0%, #d4af37 50%, #a8841e 100%) !important; color: #1a1408 !important; border-radius: 20px 4px 20px 20px !important; padding: 13px 17px !important; font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important; font-weight: 600 !important; font-size: 15px !important; line-height: 1.5 !important; max-width: 80% !important; margin-left: auto !important; box-shadow: 0 8px 22px rgba(212,175,55,0.32), inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -2px 4px rgba(0,0,0,0.12) !important; border: none !important; } /* QUICK-ACTION CHIPS · iMessage-Tapbacks */ #page-ustadh .uc46-feed { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin-top: 8px !important; padding: 10px 6px 14px !important; } #page-ustadh .uc46-feed-chip { background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)) !important; border: 1px solid rgba(229,196,106,0.22) !important; color: rgba(245,240,220,0.9) !important; padding: 9px 14px !important; border-radius: 999px !important; font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important; font-size: 13px !important; font-weight: 600 !important; display: inline-flex !important; align-items: center; gap: 6px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: all 0.2s; } #page-ustadh .uc46-feed-chip:hover, #page-ustadh .uc46-feed-chip:active { background: linear-gradient(180deg, rgba(229,196,106,0.18), rgba(229,196,106,0.08)) !important; border-color: rgba(229,196,106,0.4) !important; transform: translateY(-1px); } #page-ustadh .uc46-feed-chip span:first-child { font-size: 15px; } /* INPUT-BAR · floating glass at bottom */ #page-ustadh .uc-input-row { position: sticky !important; bottom: 0; background: linear-gradient(180deg, transparent 0%, rgba(10,13,24,0.95) 30%, rgba(10,13,24,1) 100%) !important; padding: 16px 14px calc(env(safe-area-inset-bottom, 0px) + 16px) !important; display: flex !important; gap: 10px; align-items: center; z-index: 50; } #page-ustadh .uc-input-wrap { flex: 1; background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(229,196,106,0.22) !important; border-radius: 999px !important; padding: 4px 4px 4px 18px !important; display: flex; align-items: center; gap: 8px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 4px 16px rgba(0,0,0,0.3); transition: all 0.2s; } #page-ustadh .uc-input-wrap:focus-within { background: rgba(255,255,255,0.10) !important; border-color: rgba(229,196,106,0.5) !important; box-shadow: 0 4px 22px rgba(212,175,55,0.18); } #page-ustadh .uc-input-wrap input { flex: 1; background: transparent !important; border: none !important; outline: none !important; color: #f5f0dc !important; font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important; font-size: 15px !important; padding: 10px 0 !important; } #page-ustadh .uc-input-wrap input::placeholder { color: rgba(245,240,220,0.4) !important; font-style: italic; } #page-ustadh .uc-send-btn, #page-ustadh .uc-input-row button[id*="end"], #page-ustadh .uc-input-row button[aria-label*="enden"] { width: 40px !important; height: 40px !important; border-radius: 50% !important; background: linear-gradient(135deg, #ffd76e 0%, #d4af37 50%, #a8841e 100%) !important; border: none !important; color: #1a1408 !important; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(212,175,55,0.4); cursor: pointer; transition: transform 0.12s, box-shadow 0.2s; } #page-ustadh .uc-send-btn:active { transform: scale(0.92); } /* EMPTY-STATE v97 noch sauberer */ #page-ustadh .uc-empty-v96 { padding: 40px 24px 16px !important; } #page-ustadh .ues96-mark { width: 88px !important; height: 88px !important; } #page-ustadh .ues96-title { font-size: 28px !important; margin-bottom: 8px !important; } #page-ustadh .ues96-sub { font-size: 15px !important; margin-bottom: 20px !important; } /* WELCOME (uw) – auch v97 polish */ #page-ustadh .ustadh-welcome { background: radial-gradient(ellipse 70% 25% at 50% 0%, rgba(229,196,106,0.06) 0%, transparent 70%), linear-gradient(180deg, #0a0d18 0%, #0c1020 50%, #0a0e1c 100%) !important; } /* ════════════════════════════════════════════════════════════════ v100 ★ SPLASH · FINAL FIX (authoritativ, letztes Wort im Cascade) ───────────────────────────────────────────────────────────────── ROOT-CAUSE der "nicht mittig / Dots fehlen"-Bugs: .sp-stars hatte KEINE position-Regel → war position:static und wurde damit als 3. Flex-Item im .splash-v30 Column-Flex gezaehlt. space-between hat dann die Brand in die vertikale MITTE geschoben statt nach oben, und die Dot-Position verrechnet. Fix: alle dekorativen Layer raus aus dem Flow (absolute), nur Content + Bottom-Block bleiben in-flow → bulletproof Layout. ════════════════════════════════════════════════════════════════ */ .splash-v30 .sp-stars, .splash-v30 .sp-particles, .splash-v30 .sp-bg-layer { position: absolute !important; inset: 0 !important; pointer-events: none; z-index: 1; } .splash-v30 { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; padding: 0 !important; background: linear-gradient(180deg, #050b16 0%, #0a1424 58%, #050b16 100%) !important; } /* ── TOP-ZONE: Wordmark + Bismillah · oberes Drittel, horizontal mittig ── */ .splash-v30 .sp-content-v96 { position: relative !important; top: auto !important; left: auto !important; transform: none !important; margin: 0 !important; width: 100% !important; padding: calc(env(safe-area-inset-top, 0px) + 21vh) 24px 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; z-index: 10; /* v103 FIX: Die fruehere Regel (Block ~18030) setzt opacity:0 + sp97In(forwards). Dieser spaetere Block ueberschrieb NUR die animation mit sp100In (reine translateY-Bewegung, KEIN opacity-Keyframe) – dadurch blieb die opacity:0 der alten Regel fuer immer aktiv -> SABR.AI + Bismillah unsichtbar. Jetzt opacity hart auf 1, sp100In macht nur den dezenten Slide-Up. → Marke kann NIE dauerhaft unsichtbar bleiben. */ opacity: 1 !important; animation: sp100In 1s cubic-bezier(0.16,1,0.3,1) 0.25s backwards; } .splash-v30 .sp-content-v96 .sp-brand-v95 { font-size: 54px !important; letter-spacing: 0.015em !important; margin: 0 !important; justify-content: center; } .splash-v30 .sp-content-v96 .sp-bismillah-mini { margin-top: 26px !important; font-size: 13px !important; color: rgba(229,196,106,0.58) !important; } /* alte inline-Tagline aus dem Top-Content raus */ .splash-v30 .sp-content-v96 .sp-tagline-v95 { display: none !important; } /* ── BOTTOM-ZONE: ein Block, via margin-top:auto ganz nach unten ── */ .splash-v30 .sp-bottom { position: relative !important; margin-top: auto !important; margin-bottom: calc(env(safe-area-inset-bottom, 0px) + 52px) !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 20px; width: 100%; z-index: 10; animation: sp100In 1.1s cubic-bezier(0.16,1,0.3,1) 0.6s backwards; } .splash-v30 .sp-bottom .sp-tagline-bottom { position: relative !important; left: auto !important; bottom: auto !important; transform: none !important; margin: 0 !important; font-family: system-ui, -apple-system, sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: 0.34em; text-indent: 0.34em; color: rgba(229,196,106,0.62); text-transform: uppercase; white-space: nowrap; opacity: 1; animation: none; } /* Die 3 Lade-Dots — prominent, mittig, animiert */ .splash-v30 .sp-bottom .sp-loader { position: relative !important; left: auto !important; bottom: auto !important; transform: none !important; margin: 0 !important; display: flex !important; gap: 11px; align-items: center; justify-content: center; } .splash-v30 .sp-bottom .sp-loader span { width: 9px !important; height: 9px !important; border-radius: 50% !important; background: linear-gradient(135deg, #ffe9a8, #d4af37) !important; box-shadow: 0 0 12px rgba(212,175,55,0.7) !important; animation: sp100Dot 1.4s ease-in-out infinite !important; } .splash-v30 .sp-bottom .sp-loader span:nth-child(2) { animation-delay: 0.18s !important; } .splash-v30 .sp-bottom .sp-loader span:nth-child(3) { animation-delay: 0.36s !important; } /* v100: NUR transform (kein opacity) → Content kann nie unsichtbar haengen bleiben, selbst wenn die Animation pausiert/nicht startet. */ @keyframes sp100In { from { transform: translateY(12px); } to { transform: translateY(0); } } @keyframes sp100Dot { 0%, 100% { opacity: 0.32; transform: scale(0.78); } 50% { opacity: 1; transform: scale(1.18); } } /* ════════════════════════════════════════════════════════════════ v100 ★ ONBOARDING STEP-1 ("intro") · Cover-Optik ───────────────────────────────────────────────────────────────── - Mond ("die lampe") entfernt (HTML) - sabr.ai im oberen Drittel statt mittig - 3 Lade-Punkte ganz unten (margin-top:auto) - alles horizontal mittig ════════════════════════════════════════════════════════════════ */ .ob-step-splash { min-height: 76vh !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; text-align: center !important; padding: calc(env(safe-area-inset-top, 0px) + 15vh) 20px 0 !important; /* v100: kein translateX-Slide mehr (war Ursache fuer "zuckt / nicht mittig"). v100b: KEINE Opacity-Animation auf dem Container — der Ruhezustand ist IMMER opacity:1, damit der Intro NIE unsichtbar haengen bleibt (reduced-motion / pausierte Animation). Die Kinder steigen transform-only ein. */ opacity: 1 !important; animation: none !important; } .ob-step-splash.active { display: flex !important; } /* v100b: KONTRAST-FIX — der Intro-Hintergrund ist dunkel-navy, aber das aktive Theme ist hell (var(--text) = dunkelbraun). Dadurch waren "sabr", die Tagline und der Trust-Text dunkel-auf-dunkel = quasi unsichtbar. Hier explizit helle Farben fuer den dunklen Intro erzwingen. */ .ob-step-splash .ob-wordmark, .ob-step-splash .ob-wm-sabr { color: #f4ede0 !important; } .ob-step-splash .ob-wm-dot, .ob-step-splash .ob-wm-ai { color: #e5c46a !important; } .ob-step-splash .ob-subline { color: rgba(244,237,224,0.78) !important; } .ob-step-splash .ob-trust, .ob-step-splash .ob-trust * { color: rgba(244,237,224,0.80) !important; } .ob-step-splash .ob-trust { border-color: rgba(244,237,224,0.18) !important; background: rgba(244,237,224,0.05) !important; } /* "Schon dabei? Anmelden" Footer ebenfalls hell auf dunklem Intro */ .onboard-overlay:has(.ob-step-splash.active) .ob-signin { color: rgba(244,237,224,0.70) !important; } /* v100b: ALLE Onboarding-Steps haben einen dunklen Overlay-Hintergrund, aber das aktive Theme ist hell (var(--text)=dunkelbraun). Dadurch waren Titel ("Wie heißt du?"), Sub-Texte und Input-Felder dunkel-auf-dunkel. Fix: Titel/Sub/Input hell erzwingen. Die Goal-Cards (weisser --surface Hintergrund) bleiben absichtlich unangetastet — dort ist dunkler Text korrekt. */ .onboard-overlay .ob-title { color: #f4ede0 !important; } .onboard-overlay .ob-sub, .onboard-overlay .ob-sub-hint { color: rgba(244,237,224,0.72) !important; } .onboard-overlay .ob-input { color: #f4ede0 !important; background: rgba(244,237,224,0.06) !important; border-color: rgba(244,237,224,0.20) !important; } .onboard-overlay .ob-input::placeholder { color: rgba(244,237,224,0.45) !important; } .ob-step-splash .ob-wordmark { margin-top: 0 !important; font-size: 62px !important; letter-spacing: -2px !important; line-height: 1 !important; animation: sp100In 0.9s cubic-bezier(0.16,1,0.3,1) 0.1s backwards; } .ob-step-splash .ob-subline { margin-top: 12px !important; animation: sp100In 0.9s cubic-bezier(0.16,1,0.3,1) 0.25s backwards; } .ob-step-splash .ob-trust { margin-top: 30px !important; animation: sp100In 0.9s cubic-bezier(0.16,1,0.3,1) 0.4s backwards; } /* 3 Lade-Punkte ganz unten (über dem Weiter-Button) */ .ob-loader { margin-top: auto !important; margin-bottom: 6px; display: flex; gap: 11px; align-items: center; justify-content: center; animation: sp100In 1s cubic-bezier(0.16,1,0.3,1) 0.7s backwards; } .ob-loader span { width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(135deg, #ffe9a8, #d4af37); box-shadow: 0 0 12px rgba(212,175,55,0.7); animation: sp100Dot 1.4s ease-in-out infinite; } .ob-loader span:nth-child(2) { animation-delay: 0.18s; } .ob-loader span:nth-child(3) { animation-delay: 0.36s; } /* ════════════════════════════════════════════════════════════════ v100 ★ FEED-COHESION — Salat + Family premium unify Ziel: ein konsistentes Karten-System, kein zufaelliges dark/light Mix mehr. Mekka-Hero Overflow-Fix. Family dark-Karte -> parchment. ════════════════════════════════════════════════════════════════ */ /* ── Konsistente Karten-Rhythmik (gleiche Ecken + Abstaende) ────── */ .salat-mekka-hero, .adhan-wave-card, .sajda-det-card, .khushu-ring-card, .prophet-mirror-card, .iman-pulse-card, .vers-heute-card, .fajr40-card, .salat-daily-challenge, .mood-shift-card, .sajda-pass-card, .salat-next-card { border-radius: 22px !important; margin-bottom: 14px !important; } /* ───────────────────────────────────────────────────────────────── SALAT · MEKKA-HERO — zentriert, kein Text-Clipping, Kaaba dezent Vorher: 52px Zahl + "Muslime" daneben -> "Musli" abgeschnitten, Kaaba-Emoji (62px) ueberlappt die LIVE-Eyebrow. Jetzt: alles zentriert, Zahl responsive (clamp), Einheit darunter, Kaaba als grosses leises Wasserzeichen HINTER dem Text. ───────────────────────────────────────────────────────────────── */ .salat-mekka-hero { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; padding: 26px 22px 24px !important; } .salat-mekka-hero .smh-kaaba { position: absolute !important; top: auto !important; left: auto !important; right: -14px !important; bottom: -22px !important; font-size: 132px !important; opacity: 0.06 !important; z-index: 0 !important; filter: none !important; animation: none !important; } .salat-mekka-hero .smh-eyebrow { justify-content: center !important; margin: 0 auto !important; z-index: 2 !important; position: relative !important; } .salat-mekka-hero .smh-title { text-align: center !important; z-index: 2 !important; position: relative !important; margin-top: 10px !important; } .salat-mekka-hero .smh-count { flex-direction: column !important; align-items: center !important; gap: 1px !important; margin-top: 8px !important; z-index: 2 !important; } .salat-mekka-hero .smh-count > span:first-child { font-size: clamp(46px, 14.5vw, 62px) !important; letter-spacing: -1.5px !important; line-height: 1 !important; } .salat-mekka-hero .smh-unit { font-size: 12px !important; font-weight: 800 !important; letter-spacing: 3px !important; text-transform: uppercase !important; opacity: 0.6 !important; } .salat-mekka-hero .smh-prayer { text-align: center !important; z-index: 2 !important; position: relative !important; margin-top: 12px !important; padding-top: 12px !important; border-top: 1px solid rgba(244,237,224,0.10) !important; width: 100% !important; } /* ───────────────────────────────────────────────────────────────── FAMILY · "FAMILIEN-MISSION" Karte — von dunkel auf Parchment Vorher: einzige schwarze Karte in einem hellen Feed -> Fremdkoerper. Jetzt: helle Parchment-Karte mit Gold-Akzent wie die Wochen-Challenge. ───────────────────────────────────────────────────────────────── */ .fm92-group-challenge { background: linear-gradient(135deg, var(--gold-glow), transparent 55%), var(--surface) !important; color: var(--text) !important; border: 1px solid var(--border-strong) !important; border-radius: 22px !important; box-shadow: 0 8px 26px rgba(26,20,8,0.06) !important; } .fm92-gc-eyebrow { color: var(--gold) !important; } .fm92-gc-title { color: var(--text) !important; } .fm92-gc-bar { background: rgba(26,20,8,0.08) !important; } .fm92-gc-now { color: var(--gold) !important; } .fm92-gc-pct { color: var(--text-muted) !important; } .fm92-gc-reward { color: var(--text-muted) !important; border-top: 1px solid var(--border) !important; } /* ── Family · "Erinnerung senden" Chips: schlanke Pills statt Bloecke ── */ #rsendPrefabs { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; } #rsendPrefabs .rsend-prefab { padding: 9px 15px !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.2px !important; background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 999px !important; color: var(--text) !important; min-width: 0 !important; width: auto !important; text-align: center !important; } #rsendPrefabs .rsend-prefab.is-active { background: linear-gradient(135deg, var(--gold), var(--gold-soft)) !important; border-color: var(--gold) !important; color: #2a1d07 !important; box-shadow: 0 4px 14px rgba(212,162,71,0.30) !important; transform: scale(1.04) !important; } /* ── Family · "Keine weiteren Mitglieder" Empty-State dezenter ──── */ .fm-ranks .fm-rank[style*="center"] { background: var(--surface-elev) !important; border: 1px dashed var(--border-strong) !important; color: var(--text-muted) !important; border-radius: 14px !important; font-size: 12.5px !important; font-weight: 600 !important; } /* ════════════════════════════════════════════════════════════════ v101 ★ INTRO — clean "code"-Splash Aufbau (alles vertikal + horizontal mittig): بِسْمِ ٱللَّٰهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ (Amiri, dezent Gold) sabr.ai (Monospace, Punkt mit Tiefe/Glow) DEEN ÜBER DUNYĀ (gedimmt, getrackt) [Trust-Pill] • • • (3 Punkte, ganz unten gepinnt) Sterne weg = schlicht; nur ein leiser Gold-Glow als Ambiente. ════════════════════════════════════════════════════════════════ */ /* Sternenhimmel raus -> schlicht/clean */ .ob-step-splash .ob-stars-bg { display: none !important; } /* Container: vertikal mittig, sanfter Gold-Glow statt Sternen */ .ob-step-splash { justify-content: center !important; gap: 0 !important; padding: calc(env(safe-area-inset-top, 0px) + 7vh) 22px calc(env(safe-area-inset-bottom, 0px) + 9vh) !important; background: radial-gradient(ellipse 72% 42% at 50% 44%, rgba(212,162,71,0.10), transparent 72%) !important; } /* ── Bismillah über sabr.ai ─────────────────────────────────────── */ .ob-step-splash .ob-bismillah { font-family: var(--font-arabic) !important; font-size: clamp(21px, 6.4vw, 29px) !important; font-weight: 400 !important; line-height: 1.7 !important; letter-spacing: 0 !important; color: rgba(229,196,106,0.92) !important; text-shadow: 0 0 26px rgba(212,162,71,0.28) !important; margin: 0 0 26px !important; animation: sp100In 0.9s cubic-bezier(0.16,1,0.3,1) 0.05s backwards !important; } /* ── sabr.ai — Monospace, schlicht, "Domain"-Look ──────────────── */ .ob-step-splash .ob-wordmark { font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Menlo', 'Consolas', monospace !important; font-weight: 600 !important; font-size: clamp(40px, 13vw, 58px) !important; letter-spacing: -1px !important; line-height: 1 !important; margin: 0 !important; animation: sp100In 0.9s cubic-bezier(0.16,1,0.3,1) 0.18s backwards !important; } .ob-step-splash .ob-wm-sabr { color: #f6efe2 !important; } .ob-step-splash .ob-wm-ai { color: rgba(246,239,226,0.50) !important; } /* gedimmt = TLD-Look */ /* der Punkt "." mit Tiefe — glühender Gold-Akzent */ .ob-step-splash .ob-wm-dot { color: #e9cb72 !important; text-shadow: 0 0 10px rgba(233,203,114,0.95), 0 0 24px rgba(212,162,71,0.55) !important; } /* ── Tagline ────────────────────────────────────────────────────── */ .ob-step-splash .ob-subline { font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Menlo', 'Consolas', monospace !important; font-size: 10px !important; font-weight: 500 !important; letter-spacing: 4.5px !important; text-transform: uppercase !important; color: rgba(246,239,226,0.48) !important; margin: 13px 0 0 !important; animation: sp100In 0.9s cubic-bezier(0.16,1,0.3,1) 0.30s backwards !important; } /* ── Trust-Pill ─────────────────────────────────────────────────── */ .ob-step-splash .ob-trust { margin: 32px 0 0 !important; animation: sp100In 0.9s cubic-bezier(0.16,1,0.3,1) 0.42s backwards !important; } /* ── 3 Punkte: ganz UNTEN gepinnt, restlicher Stack bleibt mittig ─ */ .ob-step-splash .ob-loader { position: absolute !important; left: 0 !important; right: 0 !important; bottom: calc(env(safe-area-inset-bottom, 0px) + 20px) !important; margin: 0 !important; } /* ════════════════════════════════════════════════════════════════ v102 ★ SALAT-FEED · Collapsible Accordion Aus dem Karten-Dump wird ein echter Feed. Header = tappbare Zeile, Body klappt smooth auf (grid-rows 0fr->1fr). Innere Karten behalten ihr eigenes Styling — sie werden nur ein-/ausgeblendet. ════════════════════════════════════════════════════════════════ */ .salat-feed { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; } .sf-acc { display: flex; flex-direction: column; } .sf-acc-head { width: 100%; display: flex; align-items: center; gap: 12px; padding: 15px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; font-family: var(--font-ui); font-weight: 800; font-size: 15px; letter-spacing: -0.2px; color: var(--text); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color 0.2s ease, background 0.2s ease, transform 0.12s ease; } .sf-acc-head:active { transform: scale(0.992); } .sf-acc.is-open > .sf-acc-head { border-color: var(--border-strong); background: var(--surface-elev); border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; } .sf-acc-ic { font-size: 18px; width: 22px; text-align: center; flex-shrink: 0; } .sf-acc-title { flex: 1; min-width: 0; } /* Chevron (CSS-only, zeigt runter -> beim Öffnen hoch) */ .sf-acc-chev { width: 9px; height: 9px; flex-shrink: 0; margin: -4px 2px 0 0; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(45deg); transition: transform 0.32s cubic-bezier(0.16,1,0.3,1); } .sf-acc.is-open .sf-acc-chev { transform: rotate(-135deg); margin-top: 3px; } /* Body: smooth Höhen-Kollaps (JS-gesteuerte height-Animation = iOS-Safari-sicher, kein 0fr/1fr-grid-Trick der beim 1. Tap haengenbleibt) */ .sf-acc-body { height: 0; overflow: hidden; transition: height 0.34s cubic-bezier(0.16,1,0.3,1); } .sf-acc.is-open > .sf-acc-body { height: auto; } .sf-acc-inner { overflow: hidden; } .sf-acc-inner > * { margin-top: 10px !important; margin-bottom: 0 !important; } /* Prayer-Tracker = der Held des Feeds: größere Tap-Targets, klare Icons */ #salatFeed .salat-today-grid { margin: 10px 0 0 !important; } #salatFeed .salat-today-meta { margin: 12px 0 2px !important; } #page-salat #salatFeed .qp-pill { padding: 14px 6px !important; border-radius: 15px !important; gap: 1px; } #page-salat #salatFeed .qp-pill .qp-icon { font-size: 19px; margin-bottom: 3px; } #page-salat #salatFeed .qp-pill .qp-name { font-size: 12px; font-weight: 800; letter-spacing: 0.2px; } #page-salat #salatFeed .qp-pill .qp-check { font-size: 15px; margin-top: 5px; opacity: 0.85; } #page-salat #salatFeed .qp-pill.done .qp-check { opacity: 1; } /* Al-Fātiḥa Test: dezent kompakter + anderer Akzent (gold) wenn offen */ .sf-acc:has(#salatTarteel).is-open > .sf-acc-head { border-color: var(--gold-soft); background: linear-gradient(135deg, var(--gold-glow), var(--surface-elev) 60%); } #salatFeed #salatTarteel { margin-top: 10px !important; } #salatFeed #salatTarteel .st-verse-ar { font-size: clamp(22px, 6.6vw, 30px) !important; } #salatFeed #salatTarteel .st-verse { padding: 14px !important; } /* ════════════════════════════════════════════════════════════════ v102 ★ FAMILY · DU'Ā-WAND (Bonding-Feature) Jeder teilt ein Duʿā, die Familie sagt „Āmīn". Emotionaler Klebstoff. ════════════════════════════════════════════════════════════════ */ .fm-duawall { background: radial-gradient(ellipse 90% 60% at 0% 0%, var(--gold-glow), transparent 60%), var(--surface); border: 1px solid var(--border-strong); border-radius: 22px; padding: 16px 16px 14px; margin-bottom: 14px; box-shadow: 0 8px 26px rgba(26,20,8,0.06); } .fm-dw-head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; } .fm-dw-ic { font-size: 24px; flex-shrink: 0; } .fm-dw-title { font-family: var(--font-ui); font-weight: 800; font-size: 16px; color: var(--text); letter-spacing: -0.3px; } .fm-dw-sub { font-size: 12px; color: var(--text-muted); margin-top: 1px; } .fm-dw-list { display: flex; flex-direction: column; gap: 9px; } .fm-dw-empty { font-size: 13px; color: var(--text-muted); text-align: center; padding: 14px 8px; } .fm-dw-card { background: var(--surface-elev); border: 1px solid var(--border); border-radius: 15px; padding: 12px 13px; } .fm-dw-by { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; } .fm-dw-av { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #2a1d07; background: linear-gradient(135deg, var(--gold), var(--gold-soft)); flex-shrink: 0; } .fm-dw-by > span:last-child { font-size: 12.5px; font-weight: 700; color: var(--text-muted); } .fm-dw-text { font-size: 14.5px; line-height: 1.45; color: var(--text); margin-bottom: 10px; } .fm-dw-amin { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; min-height: 44px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--gold); font-family: var(--font-ui); font-weight: 800; font-size: 13px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.12s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease; } .fm-dw-amin:active { transform: scale(0.94); } .fm-dw-amin-n { min-width: 18px; text-align: center; font-size: 12px; font-weight: 800; color: var(--text-muted); } .fm-dw-amin.is-mine { background: linear-gradient(135deg, var(--gold), var(--gold-soft)); border-color: var(--gold); color: #2a1d07; } .fm-dw-amin.is-mine .fm-dw-amin-n { color: #2a1d07; } .fm-dw-add { display: flex; gap: 8px; margin-top: 12px; } .fm-dw-add input { flex: 1; min-width: 0; background: var(--surface-elev); border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px; font-family: var(--font-ui); font-size: 14px; color: var(--text); -webkit-appearance: none; } .fm-dw-add input::placeholder { color: var(--text-muted); } .fm-dw-add input:focus { outline: none; border-color: var(--gold-soft); } .fm-dw-add button { flex-shrink: 0; padding: 0 18px; border-radius: 12px; border: none; background: linear-gradient(135deg, var(--gold), var(--gold-soft)); color: #2a1d07; font-family: var(--font-ui); font-weight: 800; font-size: 14px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.12s ease; } .fm-dw-add button:active { transform: scale(0.96); } /* ════════════════════════════════════════════════════════════════ v102 ★ TAP-FIX · Geschlossene Modals duerfen KEINE Taps stehlen Problem: .modal-overlay bleibt display:flex (nur opacity:0 + pe:none). pointer-events:none am Overlay wird von Kindern mit pointer-events:auto (Buttons/Pills) ueberschrieben -> unsichtbare Modal-Buttons fangen echte Finger-Taps quer ueber den Screen ab (User: "kann nicht alles anklicken"). elementFromPoint/Hit-Testing trifft dann den unsichtbaren Button statt das eigentliche Element. Fix: gesamte Subtree eines NICHT offenen Modals komplett aus dem Hit-Testing nehmen. Fade (opacity) bleibt unangetastet. ════════════════════════════════════════════ */ .modal-overlay:not(.is-open):not(.show), .modal-overlay:not(.is-open):not(.show) * { pointer-events: none !important; } /* Sicherheitsnetz: offenes Modal -> Inhalt wieder voll tappbar */ .modal-overlay.is-open, .modal-overlay.show { pointer-events: auto; } /* ════════════════════════════════════════════════════════════════ v103 ★ KALENDER · grosser Seitentitel "Disziplin" Gleiche Schrift wie der Rest der Seite (Plus Jakarta Sans), gross & fett ueber der Monatsnavigation. ════════════════════ */ #page-calendar .cal-page-title { font-family: var(--font-app) !important; font-size: clamp(38px, 12vw, 52px); font-weight: 800; line-height: 1.02; letter-spacing: -0.03em; color: var(--text); text-shadow: 0 0 18px rgba(245,201,119,0.4); margin: 4px 0 16px; padding: 0 2px; } #page-calendar .cal-page-title::after { content: ""; display: block; width: 46px; height: 4px; margin-top: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--gold), var(--gold-soft)); } /* ════════════════════════════════════════════════════════════════ v103 ★ FAMILY · Typografie harmonisieren Problem: die fm88/fm92-Bloecke (v88/v92) haengen noch an hart verdrahtetem Fraunces-Serif + SF-Mono, waehrend der Rest der App im Light-Theme laengst auf Plus Jakarta Sans (var(--font-ui)) umgestellt wurde (siehe Override-Liste ~Z6110). Dadurch wirkt die Family-Seite stilistisch fremd / "altbacken". Fix: alle Titel, Namen & Zahlen der Family-Bloecke auf die Seiten-Schrift ziehen – gleiche Schrift wie der Rest der Seite. Groessen/Gewichte bleiben. ════════════════════════════════════════════════════════════════ */ #page-family .fm88-section-head, #page-family .fm88-live-num, #page-family .fm88-live-lbl, #page-family .fm88-top-name, #page-family .fm88-top-xp, #page-family .fm88-orb-num, #page-family .fm88-orb-lbl, #page-family .fm88-orb-goal, #page-family .fm92-gc-title, #page-family .fm92-gc-now, #page-family .fm92-gc-eyebrow, #page-family .fm92-lf-head, #page-family .fm92-lf-av { font-family: var(--font-ui) !important; } /* Zahlen sauber tabellarisch ausrichten (ersetzt Mono-Look) */ #page-family .fm88-top-xp, #page-family .fm92-gc-now, #page-family .fm88-live-num, #page-family .fm88-orb-num { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } /* Section-Heads etwas praeziser: kraeftiger + enger gesetzt, damit sie ohne Serif trotzdem Praesenz haben */ #page-family .fm88-section-head { font-weight: 800; font-size: 18px; letter-spacing: -0.02em; } /* ════════════════════════════════════════════════════════════════ v105 ★ SABR ICONS (.sic) · eigene gefuellte Symbole statt Emojis Erbt Farbe via currentColor; Groesse via font-size (1em) oder explizite Helfer-Klassen. Inline ausgerichtet wie ein Text-Glyph. ════════════════════════════════════════════════════════════════ */ .sic { width: 1em; height: 1em; display: inline-block; vertical-align: -0.135em; /* sitzt wie ein Emoji auf der Baseline */ fill: currentColor; flex: none; line-height: 0; -webkit-user-select: none; user-select: none; } .sic use { fill: currentColor; } /* Groessen-Helfer */ .sic-sm { width: 0.9em; height: 0.9em; } .sic-lg { width: 1.35em; height: 1.35em; } .sic-xl { width: 1.8em; height: 1.8em; } /* ════════════════════════════════════════════════════════════════ v108 ★ BRAND 1:1 · Arial Rounded MT Bold · Cover/Intro/Header gleich ════════════════════════════════════════════════════════════════ */ :root { /* v137: Spec — Wordmark = Baloo 2 ExtraBold (NICHT Arial Rounded/Poppins) */ --font-brand: "Baloo 2", system-ui, sans-serif; } /* Intro/Splash · Navy-Verlauf + Gold-Glow oben (Spec) */ .splash-v30 { background: radial-gradient(115% 70% at 50% 12%, rgba(245,201,119,0.08), transparent 55%), radial-gradient(140% 90% at 50% 0%, #122031 0%, #0c1521 55%, #070c14 100%) !important; } /* Wordmark in Baloo 2 800 — alle Glyphen erzwingen */ .splash-v30 .sp-content-v96 .sp-brand-v95, .splash-v30 .sp-content-v96 .sp-brand-v95 .sp-brand-sabr, .splash-v30 .sp-content-v96 .sp-brand-v95 .sp-brand-dot, .splash-v30 .sp-content-v96 .sp-brand-v95 .sp-brand-ai { font-family: var(--font-brand) !important; font-weight: 800 !important; } .splash-v30 .sp-content-v96 .sp-brand-v95 { letter-spacing: -1px !important; align-items: baseline !important; font-size: 62px !important; /* v139: größer */ /* v139: kein Font-Swap-Flash — erst zeigen wenn Baloo 2 geladen */ opacity: 0; transition: opacity .4s ease; } .splash-v30 .sp-content-v96 .sp-brand-v95.font-ready { opacity: 1; } .splash-v30 .sp-brand-v95 .sp-brand-sabr { color: #f4f1e6 !important; -webkit-text-fill-color: #f4f1e6 !important; } .splash-v30 .sp-brand-v95 .sp-brand-dot { color: #f0b740 !important; -webkit-text-fill-color: #f0b740 !important; font-size: 1em !important; margin: 0 0.01em !important; transform: none !important; } .splash-v30 .sp-brand-v95 .sp-brand-ai { background: none !important; color: #f0b740 !important; -webkit-text-fill-color: #f0b740 !important; } /* Layout: Bismillah oben (margin nach unten) → SABR.AI → DEEN OVER DUNYA drunter */ .splash-v30 .sp-content-v96 .sp-bismillah-mini { margin: 0 0 22px !important; font-size: 13px !important; color: rgba(224,178,90,0.55) !important; } .splash-v30 .sp-content-v96 .sp-tagline-bottom { position: relative !important; left: auto !important; bottom: auto !important; transform: none !important; margin: 18px 0 0 !important; font-family: "Plus Jakarta Sans", system-ui, sans-serif !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: 6px !important; text-indent: 6px !important; color: #8a929c !important; text-transform: uppercase !important; white-space: nowrap !important; opacity: 1 !important; animation: none !important; } /* Header-Wordmark oben links — identische Schrift */ .app-header .logo-brand { font-family: var(--font-brand) !important; font-weight: 700 !important; letter-spacing: 0 !important; } .app-header .logo-brand .logo-dot { color: #e0b25a !important; -webkit-text-fill-color: #e0b25a !important; transform: none !important; } /* ════════════════════════════════════════════════════════════════ v109 ★ FAMILY · PREMIUM ACTIVITY STREAM Eine vereinte, lebendige Aktivitäts-Feed (ersetzt Live + Aktivitäten). Typ-Akzente, XP-Pills, interaktive Reaktionen, Zeit-Gruppierung, Filter. ════════════════════════════════════════════════════════════════ */ .fm109-feed { background: linear-gradient(180deg, rgba(255,255,255,0.030), rgba(255,255,255,0) 60%); border: 1px solid var(--border); border-radius: 22px; padding: 16px 14px 14px; margin-bottom: 22px; box-shadow: 0 10px 30px rgba(0,0,0,0.18); } .fm109-feed-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 13px; } .fm109-feed-title { display: flex; align-items: center; gap: 9px; font-family: var(--font-display, Fraunces), Georgia, serif; font-size: 18px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; } .fm109-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ea372; flex: none; box-shadow: 0 0 0 0 rgba(78,163,114,0.55); animation: liveBreathe 1.6s ease-in-out infinite; } .fm109-feed-presence { font-size: 11.5px; font-weight: 600; white-space: nowrap; color: var(--text-muted); background: rgba(78,163,114,0.10); border: 1px solid rgba(78,163,114,0.22); padding: 4px 10px; border-radius: 999px; } .fm109-feed-presence span { color: #6fce9c; font-weight: 800; } /* Filter-Chips (horizontal scrollbar, randlos) */ .fm109-feed-filters { display: flex; gap: 7px; overflow-x: auto; margin: 0 -14px 14px; padding: 2px 14px 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .fm109-feed-filters::-webkit-scrollbar { display: none; } .fm109-fchip { flex: 0 0 auto; background: var(--surface-elev); border: 1px solid var(--border); color: var(--text-muted); font-size: 12.5px; font-weight: 600; padding: 6px 14px; border-radius: 999px; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background .18s, color .18s, border-color .18s, box-shadow .18s; } .fm109-fchip:active { transform: scale(0.96); } .fm109-fchip.is-active { background: linear-gradient(135deg, #e0b25a, #c79545); color: #15110a; border-color: transparent; box-shadow: 0 4px 14px rgba(224,178,90,0.24); } /* Liste + Zeit-Trenner */ .fm109-list { display: flex; flex-direction: column; } .fm109-daysep { font-size: 10px; font-weight: 800; letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-dim); padding: 14px 2px 8px; } .fm109-daysep:first-child { padding-top: 0; } /* Karte */ .fm109-card { position: relative; display: flex; gap: 12px; padding: 13px 14px 13px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; margin-bottom: 9px; overflow: hidden; animation: fm109In .42s cubic-bezier(.22,1,.36,1) both; } .fm109-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--acc, var(--gold)); opacity: 0.9; } .fm109-card.is-own { background: linear-gradient(135deg, rgba(224,178,90,0.11), rgba(224,178,90,0.03)); border-color: rgba(224,178,90,0.30); } @keyframes fm109In { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } } /* Avatar + Typ-Badge */ .fm109-av-wrap { position: relative; flex: none; width: 42px; height: 42px; } .fm109-av { width: 42px; height: 42px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; color: var(--text); background: var(--surface-elev); border: 1px solid var(--border); } .fm109-type { position: absolute; right: -5px; bottom: -5px; width: 21px; height: 21px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--acc, var(--gold)); color: #15110a; border: 2px solid var(--bg); box-shadow: 0 2px 6px rgba(0,0,0,0.25); } .fm109-type .sic { width: 12px; height: 12px; } /* Body */ .fm109-body { flex: 1; min-width: 0; } .fm109-top { display: flex; align-items: center; gap: 8px; } .fm109-author { font-size: 13.5px; color: var(--text); font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fm109-me { color: #e0b25a; font-weight: 800; } .fm109-xp { flex: none; font-size: 10.5px; font-weight: 800; letter-spacing: 0.02em; color: #6fce9c; background: rgba(78,163,114,0.12); border: 1px solid rgba(78,163,114,0.26); padding: 1px 7px; border-radius: 999px; } .fm109-time { margin-left: auto; flex: none; font-size: 11px; color: var(--text-dim); white-space: nowrap; } .fm109-text { font-size: 13.5px; line-height: 1.42; color: var(--text-muted); margin-top: 4px; } /* Reaktionen */ .fm109-rx { display: flex; gap: 7px; margin-top: 11px; } .fm109-rb { display: inline-flex; align-items: center; gap: 5px; background: var(--surface-elev); border: 1px solid var(--border); border-radius: 999px; padding: 5px 11px; font-size: 12px; font-weight: 700; color: var(--text-muted); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform .12s, background .18s, color .18s, border-color .18s; } .fm109-rb .sic { width: 13px; height: 13px; } .fm109-rb .rb-n { font-variant-numeric: tabular-nums; } .fm109-rb:active { transform: scale(0.92); } .fm109-rb.is-reacted { background: rgba(224,178,90,0.15); border-color: rgba(224,178,90,0.50); color: #e0b25a; } .fm109-rb.rx-pop { animation: fm109Pop .34s ease; } @keyframes fm109Pop { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } } .fm109-empty { text-align: center; color: var(--text-dim); font-size: 13px; padding: 28px 0; } /* ═══════════════════════════════════════════════════════════════════ v110 ★ BANŪ HERO · Living Crest + Familien-Stufe + Kollektiver Streak Premium-Tier Family-Identität (Bronze→Diamant) + Loss-Aversion-Streak ═══════════════════════════════════════════════════════════════════ */ /* ── HERO: Identität + Familien-Stufe ── */ .bn-hero { position: relative; margin: 4px 0 14px; padding: 20px 18px 18px; border-radius: 24px; overflow: hidden; background: radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, var(--tier-c1, #d4a247) 22%, transparent) 0%, transparent 55%), linear-gradient(165deg, var(--surface-elev) 0%, var(--surface) 100%); border: 1px solid color-mix(in srgb, var(--tier-c2, #a4642f) 38%, var(--border)); box-shadow: 0 18px 48px -22px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.06); } .bn-hero-glow { position: absolute; inset: -40% -20% auto -20%; height: 75%; background: radial-gradient(60% 100% at 50% 0%, color-mix(in srgb, var(--tier-c1, #d4a247) 30%, transparent) 0%, transparent 70%); filter: blur(6px); pointer-events: none; animation: bnGlowPulse 6s ease-in-out infinite; } @keyframes bnGlowPulse { 0%,100% { opacity: 0.55; transform: translateY(0); } 50% { opacity: 0.9; transform: translateY(6px); } } .bn-hero-top { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; } /* Living Crest */ .bn-crest { flex: 0 0 auto; width: 76px; height: 76px; filter: drop-shadow(0 6px 14px rgba(0,0,0,0.45)); animation: bnCrestFloat 5.5s ease-in-out infinite; } @keyframes bnCrestFloat { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-4px) rotate(-1deg); } } .bn-crest svg { display: block; width: 100%; height: 100%; } .bn-id { flex: 1 1 auto; min-width: 0; } .bn-tier { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tier-c2, var(--gold)); } .bn-name { font-family: var(--font-display, 'Fraunces', serif); font-size: 25px; font-weight: 700; line-height: 1.05; color: var(--text); margin: 2px 0 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bn-id-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .bn-members { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); } .bn-members .sic { width: 14px; height: 14px; color: var(--gold); } .bn-code { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; background: color-mix(in srgb, var(--text) 6%, transparent); border: 1px solid var(--border); color: var(--text-muted); font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; cursor: pointer; transition: background .18s ease, transform .12s ease; } .bn-code:active { transform: scale(0.95); } .bn-code:hover { background: color-mix(in srgb, var(--text) 11%, transparent); } .bn-code svg { opacity: 0.7; } /* Familien-Stufe Fortschritt */ .bn-level { position: relative; z-index: 1; margin-top: 16px; } .bn-level-bar { height: 9px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--text) 9%, transparent); box-shadow: inset 0 1px 2px rgba(0,0,0,0.18); } .bn-level-fill { height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, var(--tier-c2, var(--gold)) 0%, var(--tier-c1, var(--gold-soft)) 100%); box-shadow: 0 0 12px color-mix(in srgb, var(--tier-c1, var(--gold)) 60%, transparent); transition: width .9s cubic-bezier(.22,1,.36,1); position: relative; } .bn-level-fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent); transform: translateX(-100%); animation: bnShine 3.2s ease-in-out infinite; } @keyframes bnShine { 0% { transform: translateX(-100%); } 60%,100% { transform: translateX(220%); } } .bn-level-meta { margin-top: 7px; font-size: 11.5px; color: var(--text-dim); text-align: center; font-weight: 600; } .bn-level-meta span { color: var(--text-muted); font-weight: 800; } /* ── KOLLEKTIVER STREAK ── */ .bn-streak { position: relative; overflow: hidden; margin: 0 0 16px; padding: 18px 18px 16px; border-radius: 22px; background: linear-gradient(165deg, var(--surface-elev) 0%, var(--surface) 100%); border: 1px solid var(--border); transition: border-color .3s ease, box-shadow .3s ease; } .bn-streak-rays { position: absolute; top: -60px; left: 50%; width: 280px; height: 280px; transform: translateX(-50%); pointer-events: none; opacity: 0.5; background: conic-gradient(from 0deg, transparent 0deg, color-mix(in srgb, var(--flame, #ff7a3c) 22%, transparent) 10deg, transparent 20deg, transparent 90deg, color-mix(in srgb, var(--flame, #ff7a3c) 18%, transparent) 100deg, transparent 110deg, transparent 180deg, color-mix(in srgb, var(--flame, #ff7a3c) 22%, transparent) 190deg, transparent 200deg, transparent 270deg, color-mix(in srgb, var(--flame, #ff7a3c) 18%, transparent) 280deg, transparent 290deg); animation: bnRays 24s linear infinite; } @keyframes bnRays { to { transform: translateX(-50%) rotate(360deg); } } .bn-streak-main { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 12px; } .bn-streak-flame { font-size: 46px; line-height: 1; filter: drop-shadow(0 4px 12px rgba(255,120,50,0.5)); animation: bnFlame 2.4s ease-in-out infinite; } @keyframes bnFlame { 0%,100% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.08) rotate(2deg); } } .bn-streak-flame.bn-flame-pop { animation: bnFlamePop .8s ease; } @keyframes bnFlamePop { 0% { transform: scale(1); } 35% { transform: scale(1.5) rotate(8deg); } 100% { transform: scale(1); } } .bn-streak-count { display: flex; flex-direction: column; align-items: flex-start; } .bn-streak-num { font-family: var(--font-display, 'Fraunces', serif); font-size: 52px; font-weight: 800; line-height: 0.9; color: var(--gold); background: linear-gradient(180deg, var(--gold-soft) 0%, var(--gold) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 2px 14px color-mix(in srgb, var(--gold) 30%, transparent); } .bn-streak-unit { font-size: 11px; font-weight: 700; line-height: 1.1; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); margin-top: 3px; } /* Status-Banner */ .bn-streak-status { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; margin: 14px 0 0; padding: 10px 13px; border-radius: 13px; font-size: 13px; font-weight: 600; line-height: 1.3; } .bn-streak-status-ic { display: inline-flex; flex: 0 0 auto; } .bn-streak-status-ic .sic { width: 17px; height: 17px; } /* Heute-dabei Dots */ .bn-streak-today { position: relative; z-index: 1; margin-top: 14px; } .bn-streak-today-lbl { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 8px; } .bn-streak-dots { display: flex; flex-wrap: wrap; gap: 7px; } .bn-dot { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; border: 1.5px solid transparent; transition: transform .15s ease; } .bn-dot .sic { width: 14px; height: 14px; } .bn-dot.is-done { background: color-mix(in srgb, var(--emerald) 22%, transparent); border-color: color-mix(in srgb, var(--emerald) 55%, transparent); color: var(--emerald); } .bn-dot.is-open { background: color-mix(in srgb, var(--text) 6%, transparent); border-color: color-mix(in srgb, var(--text) 16%, transparent); color: var(--text-muted); } .bn-dot.is-me { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--gold); } .bn-dot.is-me.is-open { animation: bnDotNudge 1.6s ease-in-out infinite; } @keyframes bnDotNudge { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } } /* CTA */ .bn-streak-cta { position: relative; z-index: 1; display: block; width: 100%; margin-top: 15px; padding: 14px; border: none; border-radius: 14px; font-size: 14.5px; font-weight: 800; letter-spacing: 0.01em; cursor: pointer; color: #1a130a; background: linear-gradient(180deg, var(--gold-soft) 0%, var(--gold) 100%); box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--gold) 70%, transparent); transition: transform .12s ease, box-shadow .2s ease, filter .2s ease; } .bn-streak-cta:active { transform: scale(0.97); } /* ── Streak-Zustände ── */ /* RISK: eigener Teil fehlt → dringlich rot/amber, loss-aversion */ .bn-streak.is-risk { border-color: color-mix(in srgb, #e8553c 50%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, #e8553c 22%, transparent), 0 18px 44px -24px rgba(232,85,60,0.6); animation: bnRiskPulse 2.6s ease-in-out infinite; } @keyframes bnRiskPulse { 0%,100% { box-shadow: 0 0 0 1px color-mix(in srgb, #e8553c 22%, transparent), 0 18px 44px -24px rgba(232,85,60,0.55); } 50% { box-shadow: 0 0 0 1px color-mix(in srgb, #e8553c 42%, transparent), 0 18px 52px -20px rgba(232,85,60,0.85); } } .bn-streak.is-risk .bn-streak-status { background: color-mix(in srgb, #e8553c 14%, transparent); color: #ffb3a3; } .bn-streak.is-risk .bn-streak-status-ic .sic { color: #ff7a5f; } /* NUDGE: ich fertig, andere offen → warm, community */ .bn-streak.is-nudge .bn-streak-status { background: color-mix(in srgb, var(--gold) 13%, transparent); color: var(--gold-soft); } .bn-streak.is-nudge .bn-streak-status-ic .sic { color: var(--gold); } .bn-streak.is-nudge .bn-streak-cta { background: linear-gradient(180deg, color-mix(in srgb, var(--gold-soft) 86%, #fff) 0%, var(--gold) 100%); } /* SAFE: alle dabei → ruhig grün, Belohnung */ .bn-streak.is-safe { border-color: color-mix(in srgb, var(--emerald) 45%, transparent); } .bn-streak.is-safe .bn-streak-status { background: color-mix(in srgb, var(--emerald) 14%, transparent); color: color-mix(in srgb, var(--emerald) 80%, #fff); } .bn-streak.is-safe .bn-streak-status-ic .sic { color: var(--emerald); } .bn-streak.is-safe .bn-streak-cta { color: #07140d; background: linear-gradient(180deg, color-mix(in srgb, var(--emerald) 75%, #fff) 0%, var(--emerald) 100%); box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--emerald) 65%, transparent); } .bn-streak.bn-cheered { animation: bnCheered .9s ease; } @keyframes bnCheered { 0% { transform: scale(1); } 30% { transform: scale(1.015); } 100% { transform: scale(1); } } /* ═══════════════════════════════════════════════════════════════════ v111 ★ SAISON-LIGA · Familie-gegen-Familie (Promotion/Relegation) Wiederkomm-Motor: wöchentlicher Wettkampf, Auf-/Abstiegszone ═══════════════════════════════════════════════════════════════════ */ .lg-card { position: relative; overflow: hidden; margin: 0 0 16px; padding: 18px 16px 16px; border-radius: 22px; background: radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--lg-c1, var(--gold)) 14%, transparent) 0%, transparent 55%), linear-gradient(165deg, var(--surface-elev) 0%, var(--surface) 100%); border: 1px solid color-mix(in srgb, var(--lg-c2, var(--gold)) 32%, var(--border)); box-shadow: 0 16px 40px -24px rgba(0,0,0,0.6); } .lg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .lg-div { display: flex; align-items: center; gap: 11px; min-width: 0; } .lg-div-badge { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(140deg, var(--gold-soft), var(--gold)); box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--lg-c2, var(--gold)) 70%, transparent), inset 0 1px 0 rgba(255,255,255,0.5); position: relative; } .lg-div-badge::after { content: '★'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 17px; color: rgba(20,16,8,0.55); } .lg-div-name { font-family: var(--font-display, 'Fraunces', serif); font-size: 18px; font-weight: 700; color: var(--text); line-height: 1.05; } .lg-div-sub { font-size: 11px; color: var(--text-dim); font-weight: 600; margin-top: 1px; } .lg-timer { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; background: color-mix(in srgb, var(--text) 6%, transparent); border: 1px solid var(--border); font-size: 11.5px; font-weight: 800; color: var(--text-muted); letter-spacing: 0.02em; white-space: nowrap; } .lg-timer-ic { color: var(--gold); } .lg-legend { display: flex; gap: 14px; margin: 13px 2px 9px; } .lg-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); } .lg-legend-item i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; } .lg-leg-promo i { background: var(--emerald); } .lg-leg-rel i { background: #e8553c; } .lg-list { display: flex; flex-direction: column; gap: 3px; } .lg-row { display: grid; grid-template-columns: 26px 28px 1fr auto auto; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 12px; position: relative; border-left: 3px solid transparent; transition: background .2s ease; } .lg-rank { font-size: 13px; font-weight: 800; color: var(--text-dim); text-align: center; font-variant-numeric: tabular-nums; } .lg-av { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: var(--text-muted); background: color-mix(in srgb, var(--text) 8%, transparent); } .lg-nm { font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .lg-nm em { font-style: normal; font-weight: 800; color: var(--gold); font-size: 11.5px; } .lg-mv { flex: 0 0 auto; } .lg-xp { font-size: 12.5px; font-weight: 800; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .lg-xp::after { content: ' XP'; font-size: 9.5px; font-weight: 700; color: var(--text-dim); } /* Promotion-Zone */ .lg-row.is-promo { border-left-color: var(--emerald); background: color-mix(in srgb, var(--emerald) 7%, transparent); } .lg-row.is-promo .lg-rank { color: var(--emerald); } .lg-row.is-promo .lg-mv { color: var(--emerald); } /* Relegation-Zone */ .lg-row.is-rel { border-left-color: #e8553c; background: color-mix(in srgb, #e8553c 7%, transparent); } .lg-row.is-rel .lg-rank { color: #e8553c; } .lg-row.is-rel .lg-mv { color: #e8553c; } /* Eigene Familie */ .lg-row.is-me { background: color-mix(in srgb, var(--gold) 15%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gold) 55%, transparent); } .lg-row.is-me .lg-nm { font-weight: 800; } .lg-row.is-me .lg-av { background: var(--gold); color: #1a130a; } .lg-row.is-me.is-promo { background: color-mix(in srgb, var(--emerald) 16%, transparent); } .lg-row.is-me.is-rel { background: color-mix(in srgb, #e8553c 16%, transparent); } /* Fuß-Banner */ .lg-foot { margin-top: 12px; padding: 10px 13px; border-radius: 12px; font-size: 12.5px; font-weight: 700; line-height: 1.3; text-align: center; } .lg-foot.is-promo { background: color-mix(in srgb, var(--emerald) 13%, transparent); color: color-mix(in srgb, var(--emerald) 82%, #fff); } .lg-foot.is-rel { background: color-mix(in srgb, #e8553c 13%, transparent); color: #ffb3a3; } .lg-foot.is-mid { background: color-mix(in srgb, var(--gold) 12%, transparent); color: var(--gold-soft); } /* ═══════════════════════════════════════════════════════════════════ v112 ★ TÄGLICHES FAMILIEN-RITUAL · Daily-Comeback Quest Resettet jeden Tag → täglicher Grund zurückzukommen ═══════════════════════════════════════════════════════════════════ */ .dq-card { position: relative; overflow: hidden; margin: 0 0 16px; padding: 16px; border-radius: 20px; background: radial-gradient(110% 70% at 0% 0%, color-mix(in srgb, var(--emerald) 12%, transparent) 0%, transparent 50%), linear-gradient(165deg, var(--surface-elev) 0%, var(--surface) 100%); border: 1px solid color-mix(in srgb, var(--emerald) 28%, var(--border)); transition: box-shadow .3s ease, border-color .3s ease; } .dq-card.dq-pulse { animation: dqPulse .6s ease; } @keyframes dqPulse { 0% { transform: scale(1); } 30% { transform: scale(1.012); } 100% { transform: scale(1); } } .dq-head { display: flex; align-items: center; gap: 12px; } .dq-ic { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--emerald) 16%, transparent); border: 1px solid color-mix(in srgb, var(--emerald) 32%, transparent); } .dq-ic .sic { width: 22px; height: 22px; color: var(--emerald); } .dq-htext { flex: 1 1 auto; min-width: 0; } .dq-kicker { font-size: 10px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: color-mix(in srgb, var(--emerald) 80%, var(--text-muted)); } .dq-title { font-family: var(--font-display, 'Fraunces', serif); font-size: 16.5px; font-weight: 700; color: var(--text); line-height: 1.12; margin-top: 2px; } .dq-reward { flex: 0 0 auto; align-self: flex-start; padding: 4px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; white-space: nowrap; color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); } .dq-prog { margin-top: 14px; } .dq-prog-bar { height: 10px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--text) 9%, transparent); box-shadow: inset 0 1px 2px rgba(0,0,0,0.18); } .dq-prog-fill { height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--emerald) 80%, #000) 0%, var(--emerald) 100%); box-shadow: 0 0 10px color-mix(in srgb, var(--emerald) 55%, transparent); transition: width .7s cubic-bezier(.22,1,.36,1); } .dq-prog-meta { margin-top: 6px; font-size: 11.5px; font-weight: 600; color: var(--text-dim); text-align: right; } .dq-prog-meta span { color: var(--text-muted); font-weight: 800; } .dq-contrib { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 12px; } .dq-chip { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: var(--text-muted); background: color-mix(in srgb, var(--text) 8%, transparent); border: 1.5px solid transparent; } .dq-chip.is-me { background: var(--emerald); color: #07140d; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--emerald); } .dq-more { font-size: 11px; font-weight: 700; color: var(--text-dim); margin-left: 4px; } .dq-more.is-all { color: var(--emerald); } .dq-cta { display: block; width: 100%; margin-top: 14px; padding: 13px; border: none; border-radius: 13px; font-size: 14px; font-weight: 800; cursor: pointer; color: #07140d; background: linear-gradient(180deg, color-mix(in srgb, var(--emerald) 78%, #fff) 0%, var(--emerald) 100%); box-shadow: 0 9px 22px -10px color-mix(in srgb, var(--emerald) 65%, transparent); transition: transform .12s ease, filter .2s ease; } .dq-cta:active { transform: scale(0.97); } .dq-cta:disabled { cursor: default; filter: saturate(0.7) brightness(0.95); opacity: 0.85; } .dq-status { margin-top: 10px; text-align: center; font-size: 12px; font-weight: 700; color: var(--text-muted); } /* Vollendet-Zustand */ .dq-card.is-done { border-color: color-mix(in srgb, var(--emerald) 55%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--emerald) 30%, transparent), 0 16px 40px -24px color-mix(in srgb, var(--emerald) 70%, transparent); } .dq-card.is-done .dq-status { color: color-mix(in srgb, var(--emerald) 82%, #fff); } /* ═══════════════════════════════════════════════════════════════════ v113 ★ FAMILIE-ROSTER · vereint Mitglieder + Anstupsen + Salām Ein sauberes Mitglieder-Sheet statt 3 redundanter Strips ═══════════════════════════════════════════════════════════════════ */ .fr-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .fr-hint { font-size: 11px; font-weight: 600; color: var(--text-dim); letter-spacing: 0; text-transform: none; } .fr-list { display: flex; flex-direction: column; gap: 8px; } .fr-mem { border-radius: 16px; overflow: hidden; background: linear-gradient(165deg, var(--surface-elev) 0%, var(--surface) 100%); border: 1px solid var(--border); transition: border-color .2s ease, box-shadow .2s ease; } .fr-mem.is-expanded { border-color: color-mix(in srgb, var(--gold) 45%, transparent); box-shadow: 0 12px 30px -18px rgba(0,0,0,0.5); } .fr-mem.is-me { border-color: color-mix(in srgb, var(--gold) 35%, transparent); background: color-mix(in srgb, var(--gold) 8%, var(--surface-elev)); } .fr-mem-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: none; background: transparent; cursor: pointer; text-align: left; color: inherit; font: inherit; } .fr-mem-head:disabled { cursor: default; } .fr-av { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; color: var(--text-muted); background: color-mix(in srgb, var(--text) 9%, transparent); position: relative; } .fr-mem.is-me .fr-av { background: var(--gold); color: #1a130a; } .fr-mem-info { flex: 1 1 auto; min-width: 0; } .fr-mem-name { display: block; font-size: 14.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fr-mem-name em { font-style: normal; font-weight: 800; color: var(--gold); font-size: 12px; } .fr-mem-sub { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 11.5px; font-weight: 600; color: var(--text-muted); } .fr-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; } .fr-mem.is-done .fr-dot { background: var(--emerald); box-shadow: 0 0 6px color-mix(in srgb, var(--emerald) 60%, transparent); } .fr-mem.is-open-day .fr-dot { background: color-mix(in srgb, var(--text) 22%, transparent); } .fr-chev { flex: 0 0 auto; color: var(--text-dim); transition: transform .25s ease, color .2s ease; } .fr-mem.is-expanded .fr-chev { transform: rotate(90deg); color: var(--gold); } /* Aufklapp-Aktionen */ .fr-actions { max-height: 0; overflow: hidden; transition: max-height .3s ease, padding .3s ease; padding: 0 14px; } .fr-mem.is-expanded .fr-actions { max-height: 260px; padding: 0 14px 14px; } .fr-act-lbl { font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin: 2px 0 9px; } .fr-act-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; } .fr-act { padding: 9px 6px; border-radius: 11px; border: 1px solid var(--border); background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--text); font-size: 12px; font-weight: 700; cursor: pointer; transition: transform .12s ease, background .18s ease, border-color .18s ease; } .fr-act:active { transform: scale(0.95); } .fr-act:hover { background: color-mix(in srgb, var(--gold) 14%, transparent); border-color: color-mix(in srgb, var(--gold) 38%, transparent); } .fr-salam { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin-top: 9px; padding: 11px; border: none; border-radius: 12px; font-size: 13px; font-weight: 800; cursor: pointer; color: #07140d; background: linear-gradient(180deg, color-mix(in srgb, var(--emerald) 78%, #fff) 0%, var(--emerald) 100%); transition: transform .12s ease; } .fr-salam:active { transform: scale(0.97); } .fr-salam .sic { width: 16px; height: 16px; } /* ═══════════════════════════════════════════════════════════════ v114 ★ FAMILIEN-MEILENSTEINE — collectible Badges (Long-Term Pull) ═══════════════════════════════════════════════════════════════ */ .fmile { margin: 18px 0 4px; } .fmile-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 2px 10px; } .fmile-title { font-family: var(--font-display, serif); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); } .fmile-count { font-size: 12.5px; font-weight: 700; color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); padding: 3px 9px; border-radius: 999px; font-variant-numeric: tabular-nums; } .fmile-strip { display: flex; gap: 11px; overflow-x: auto; overflow-y: hidden; padding: 4px 2px 12px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .fmile-strip::-webkit-scrollbar { display: none; } .fmile-card { flex: 0 0 132px; scroll-snap-align: start; position: relative; border-radius: 18px; padding: 15px 13px 14px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; overflow: hidden; transition: transform .14s ease; } .fmile-card:active { transform: scale(0.975); } /* Locked: gedämpft, neutraler Track */ .fmile-card.is-locked { background: color-mix(in srgb, var(--text) 4%, var(--surface)); border: 1px solid color-mix(in srgb, var(--text) 9%, transparent); } .fmile-card.is-locked .fmile-badge { background: color-mix(in srgb, var(--text) 7%, transparent); border-color: color-mix(in srgb, var(--text) 12%, transparent); } .fmile-card.is-locked .fmile-badge .sic { color: color-mix(in srgb, var(--text) 34%, transparent); } .fmile-card.is-locked .fmile-t { color: color-mix(in srgb, var(--text) 70%, transparent); } /* Unlocked: Gold-Glow */ .fmile-card.is-unlocked { background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--gold) 20%, transparent) 0%, transparent 62%), color-mix(in srgb, var(--gold) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--gold) 42%, transparent); box-shadow: 0 6px 20px -10px color-mix(in srgb, var(--gold) 55%, transparent); } .fmile-badge { position: relative; width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; margin-bottom: 4px; } .fmile-card.is-unlocked .fmile-badge { background: linear-gradient(160deg, color-mix(in srgb, var(--gold-soft) 90%, #fff) 0%, var(--gold) 100%); border: 1px solid color-mix(in srgb, var(--gold) 55%, #fff); box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--gold) 70%, transparent); } .fmile-card.is-unlocked .fmile-badge .sic { width: 26px; height: 26px; color: #2a1d05; } .fmile-card.is-locked .fmile-badge .sic { width: 25px; height: 25px; } .fmile-check { position: absolute; right: -5px; bottom: -5px; width: 21px; height: 21px; border-radius: 999px; background: linear-gradient(160deg, color-mix(in srgb, var(--emerald) 82%, #fff), var(--emerald)); border: 2px solid var(--surface); display: grid; place-items: center; } .fmile-check .sic { width: 12px; height: 12px; color: #fff; } .fmile-t { font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); line-height: 1.2; } .fmile-d { font-size: 11px; font-weight: 500; color: var(--text-muted); line-height: 1.15; } .fmile-state { margin-top: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold); } .fmile-prog { margin-top: 7px; display: flex; align-items: center; gap: 6px; width: 100%; } .fmile-prog-bar { flex: 1; height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--text) 11%, transparent); overflow: hidden; } .fmile-prog-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold-soft), var(--gold)); transition: width .5s cubic-bezier(.4,0,.2,1); } .fmile-prog span { font-size: 10px; font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; min-width: 26px; text-align: right; } /* ═══════════════════════════════════════════════════════════════ v115 ★ FAMILIEN-WETTKAMPF intern — teilt das Liga-Design (.lg-*), nur kleine Akzente: Krone-Badge, Top-3-Ränge, Champion, Bewegung. ═══════════════════════════════════════════════════════════════ */ .mc-card { margin-top: -2px; } /* Krone-Badge statt ★ */ .mc-badge { display: grid; place-items: center; } .mc-badge::after { content: none; } .mc-badge .sic { width: 21px; height: 21px; color: #2a1d05; } /* Top-3 Rangfarben (Gold / Silber / Bronze) */ .mc-top1 .lg-rank { color: var(--gold); } .mc-top2 .lg-rank { color: #aab3c2; } .mc-top3 .lg-rank { color: #c8895a; } /* Krone vor dem Namen des Wochen-Champions */ .mc-crown { display: inline-flex; align-items: center; vertical-align: -2px; margin-right: 4px; } .mc-crown .sic { width: 14px; height: 14px; color: var(--gold); } /* Champion-Zeile (Platz 1) */ .lg-row.mc-row.is-champ { background: color-mix(in srgb, var(--gold) 11%, transparent); border-left-color: var(--gold); } .lg-row.mc-row.is-champ .lg-av { background: linear-gradient(140deg, var(--gold-soft), var(--gold)); color: #1a130a; } .lg-row.mc-row.is-champ.is-me { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gold) 60%, transparent); } /* Bewegung vs. Vorwoche */ .lg-row.mc-row.is-up .lg-mv { color: var(--emerald); } .lg-row.mc-row.is-down .lg-mv { color: #e8553c; } .mc-same { color: var(--text-dim); font-weight: 800; font-size: 14px; line-height: 1; } /* ═══════════════════════════════════════════════════════════════ v116 ★ PRIME-MOMENT — das eine Gebet, das JETZT zählt Living-Feed-Kopfkarte: Fenster offen (gold) / dringend (rot) / gesichert (smaragd) / Nacht vor Fajr (indigo). Einheitliche Design-Sprache: Fraunces + Gold + color-mix (theme-robust). ═══════════════════════════════════════════════════════════════ */ .pmk-card { position: relative; overflow: hidden; margin: 0 0 14px; padding: 16px 16px 14px; border-radius: 22px; background: radial-gradient(130% 90% at 0% 0%, color-mix(in srgb, var(--gold) 15%, transparent) 0%, transparent 55%), linear-gradient(165deg, var(--surface-elev) 0%, var(--surface) 100%); border: 1px solid color-mix(in srgb, var(--gold) 34%, var(--border)); box-shadow: 0 16px 40px -24px rgba(0,0,0,0.6); } .pmk-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .pmk-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); } .pmk-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); animation: pmkPulse 2s infinite; } @keyframes pmkPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 45%, transparent); } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .pmk-clock { font-size: 12.5px; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; white-space: nowrap; } .pmk-main { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 9px; } .pmk-info { min-width: 0; } .pmk-name { font-family: var(--font-display, 'Fraunces', serif); font-size: 30px; font-weight: 700; color: var(--text); line-height: 1; letter-spacing: -0.01em; } .pmk-sub { margin-top: 5px; font-size: 12px; font-weight: 600; color: var(--text-muted); line-height: 1.3; } .pmk-cta { flex: 0 0 auto; border: none; cursor: pointer; padding: 12px 17px; border-radius: 14px; font-size: 14px; font-weight: 800; color: #241806; background: linear-gradient(160deg, var(--gold-soft), var(--gold)); box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--gold) 80%, transparent); transition: transform .12s ease; white-space: nowrap; } .pmk-cta:active { transform: scale(0.96); } .pmk-bar { margin-top: 13px; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; } .pmk-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold-soft), var(--gold)); transition: width .6s cubic-bezier(.4,0,.2,1); } .pmk-day { display: flex; gap: 7px; margin-top: 11px; } .pmk-d { flex: 1; height: 24px; border-radius: 8px; display: grid; place-items: center; font-size: 10.5px; font-weight: 800; color: color-mix(in srgb, var(--text) 38%, transparent); background: color-mix(in srgb, var(--text) 6%, transparent); } .pmk-d.is-done { color: #fff; background: linear-gradient(160deg, color-mix(in srgb, var(--emerald) 80%, #fff), var(--emerald)); } .pmk-d.is-cur { color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gold) 55%, transparent); } /* Dringend: Fenster schließt bald */ .pmk-card.is-urgent { border-color: color-mix(in srgb, #e8553c 45%, var(--border)); background: radial-gradient(130% 90% at 0% 0%, color-mix(in srgb, #e8553c 13%, transparent) 0%, transparent 55%), linear-gradient(165deg, var(--surface-elev) 0%, var(--surface) 100%); } .pmk-card.is-urgent .pmk-dot { background: #e8553c; } .pmk-card.is-urgent .pmk-clock { color: #e8553c; } .pmk-card.is-urgent .pmk-bar-fill { background: linear-gradient(90deg, #f0a08c, #e8553c); } /* Gesichert */ .pmk-card.is-done { border-color: color-mix(in srgb, var(--emerald) 40%, var(--border)); } .pmk-card.is-done .pmk-dot { background: var(--emerald); animation: none; } .pmk-card.is-done .pmk-clock { color: var(--emerald); } .pmk-card.is-done .pmk-bar-fill { background: linear-gradient(90deg, color-mix(in srgb, var(--emerald) 70%, #fff), var(--emerald)); } /* Nacht vor Fajr */ .pmk-card.is-night .pmk-dot { background: #8ea4d8; animation: none; } .pmk-card.is-night .pmk-clock { color: #8ea4d8; } .pmk-card.is-night .pmk-bar-fill { background: linear-gradient(90deg, #b9c7ea, #8ea4d8); } /* ═══════════════════════════════════════════════════════════════ v117 ★ SALAT-CELEBRATION — Jackpot-Takeover beim Gebets-Tap Fullscreen-Overlay, Konfetti-Canvas, Spring-Card, XP-Roll-Up, gestaffelte Bonus-Zeilen, 5/5-Schatztruhe. Dopamin mit Würde. ═══════════════════════════════════════════════════════════════ */ .scel { position: fixed; inset: 0; z-index: 11000; display: flex; align-items: center; justify-content: center; background: rgba(12, 9, 3, 0.66); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); opacity: 0; transition: opacity .25s ease; } .scel.is-on { opacity: 1; } .scel-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .scel-card { position: relative; width: min(330px, 86vw); padding: 26px 22px 20px; border-radius: 26px; text-align: center; background: radial-gradient(120% 75% at 50% 0%, color-mix(in srgb, var(--gold) 22%, transparent) 0%, transparent 60%), linear-gradient(170deg, var(--surface-elev) 0%, var(--surface) 100%); border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--border)); box-shadow: 0 30px 80px -20px rgba(0,0,0,0.75); animation: scelCardIn .5s cubic-bezier(.2,1.4,.4,1) both; } @keyframes scelCardIn { 0% { transform: scale(0.72) translateY(26px); opacity: 0; } 100% { transform: scale(1) translateY(0); opacity: 1; } } .scel-stamp { width: 74px; height: 74px; margin: -58px auto 8px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(160deg, color-mix(in srgb, var(--emerald) 80%, #fff), var(--emerald)); border: 4px solid var(--surface); box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--emerald) 80%, transparent); animation: scelStampIn .55s cubic-bezier(.2,1.6,.4,1) .12s both; } @keyframes scelStampIn { 0% { transform: scale(0) rotate(-30deg); } 100% { transform: scale(1) rotate(0); } } .scel-stamp .sic { width: 36px; height: 36px; color: #fff; } .scel-prayer { font-family: var(--font-display, 'Fraunces', serif); font-size: 34px; font-weight: 700; color: var(--text); line-height: 1.05; } .scel-sub { font-size: 11.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); margin-top: 2px; } .scel-xp { display: flex; align-items: baseline; justify-content: center; gap: 4px; margin-top: 12px; } .scel-xp-plus { font-family: var(--font-display, 'Fraunces', serif); font-size: 30px; font-weight: 700; color: var(--gold); } #scelXpNum { font-family: var(--font-display, 'Fraunces', serif); font-size: 54px; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; line-height: 1; text-shadow: 0 2px 22px color-mix(in srgb, var(--gold) 55%, transparent); } .scel-xp-lbl { font-size: 14px; font-weight: 800; color: var(--text-dim); letter-spacing: 0.1em; } .scel-rows { margin-top: 13px; display: flex; flex-direction: column; gap: 6px; } .scel-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 11px; background: color-mix(in srgb, var(--text) 5%, transparent); opacity: 0; animation: scelRowIn .4s cubic-bezier(.2,1.2,.4,1) both; } @keyframes scelRowIn { 0% { transform: translateX(34px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } .scel-row-t { font-size: 12.5px; font-weight: 700; color: var(--text-muted); } .scel-row-xp { font-size: 13px; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; } .scel-row.is-hot { background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 20%, transparent), color-mix(in srgb, var(--gold) 8%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent); } .scel-row.is-hot .scel-row-t { color: var(--text); } .scel-dots { display: flex; gap: 6px; margin-top: 14px; } .scel-dot { flex: 1; height: 25px; border-radius: 8px; display: grid; place-items: center; font-size: 10.5px; font-weight: 800; color: color-mix(in srgb, var(--text) 36%, transparent); background: color-mix(in srgb, var(--text) 6%, transparent); } .scel-dot.is-done { color: #fff; background: linear-gradient(160deg, color-mix(in srgb, var(--emerald) 80%, #fff), var(--emerald)); } .scel-dot.is-new { animation: scelDotPop .5s cubic-bezier(.2,1.6,.4,1) .65s both; } @keyframes scelDotPop { 0% { transform: scale(1); } 50% { transform: scale(1.35); } 100% { transform: scale(1); } } .scel-btn { margin-top: 16px; width: 100%; border: none; cursor: pointer; padding: 13px 18px; border-radius: 14px; font-size: 14.5px; font-weight: 800; color: #241806; background: linear-gradient(160deg, var(--gold-soft), var(--gold)); box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--gold) 80%, transparent); transition: transform .12s ease; } .scel-btn:active { transform: scale(0.97); } /* ── 5/5 Truhen-Bühne ── */ .scel-mega { position: relative; text-align: center; width: min(330px, 86vw); } .scel-mega-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-soft); } .scel-mega-title { font-family: var(--font-display, 'Fraunces', serif); font-size: 40px; font-weight: 800; color: #fff; margin-top: 4px; text-shadow: 0 4px 30px color-mix(in srgb, var(--gold) 65%, transparent); } .scel-chest { position: relative; margin: 30px auto 0; width: 130px; height: 110px; border: none; background: none; cursor: pointer; display: block; animation: scelChestWiggle 1.6s ease-in-out infinite; } @keyframes scelChestWiggle { 0%, 100% { transform: rotate(0); } 8% { transform: rotate(-4deg); } 16% { transform: rotate(4deg); } 24% { transform: rotate(-2.5deg); } 32% { transform: rotate(0); } } .scel-chest-glow { position: absolute; inset: -28px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--gold) 38%, transparent) 0%, transparent 65%); animation: scelGlow 1.6s ease-in-out infinite; pointer-events: none; } @keyframes scelGlow { 0%, 100% { opacity: .65; } 50% { opacity: 1; } } .scel-chest-lid { position: absolute; left: 8px; right: 8px; top: 0; height: 42px; border-radius: 16px 16px 6px 6px; background: linear-gradient(170deg, #f0cd84, #c08a2e); border: 2px solid #8a5e1a; box-shadow: inset 0 3px 0 rgba(255,255,255,0.35); transition: transform .45s cubic-bezier(.2,1.3,.4,1); z-index: 2; } .scel-chest-box { position: absolute; left: 0; right: 0; top: 34px; bottom: 0; border-radius: 10px 10px 18px 18px; background: linear-gradient(170deg, #d8a854, #9a6b20); border: 2px solid #8a5e1a; display: grid; place-items: center; } .scel-chest-box .sic { width: 34px; height: 34px; color: #3a2706; opacity: .65; } .scel-chest.is-open { animation: none; } .scel-chest.is-open .scel-chest-lid { transform: translateY(-44px) rotate(-16deg); } .scel-chest.is-open .scel-chest-glow { opacity: 1; inset: -44px; } .scel-chest-hint { margin-top: 18px; font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.85); } .scel-chest-reward { margin-top: 8px; font-family: var(--font-display, 'Fraunces', serif); font-size: 46px; font-weight: 800; color: var(--gold); text-shadow: 0 4px 28px color-mix(in srgb, var(--gold) 70%, transparent); animation: scelRewardPop .6s cubic-bezier(.2,1.6,.4,1) both; } @keyframes scelRewardPop { 0% { transform: scale(0.3) translateY(14px); opacity: 0; } 100% { transform: scale(1) translateY(0); opacity: 1; } } .scel-btn-collect { max-width: 230px; margin: 18px auto 0; display: block; } /* ── Prime-Karte: Streak-Combo Chip ── */ .pmk-combo { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; margin-right: 8px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; color: var(--gold); background: color-mix(in srgb, var(--gold) 13%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 32%, transparent); font-variant-numeric: tabular-nums; white-space: nowrap; } .pmk-combo .sic { width: 12px; height: 12px; } /* KRITISCH: hidden-Attribut muss display:flex schlagen (sonst blockiert das unsichtbare Overlay alle Taps der App) */ .scel[hidden] { display: none !important; } /* ═══════════════════════════════════════════════════════════════ v118 ★ LAUNCH-FOKUS — Pills leben in der Prime-Karte, Feed radikal reduziert (1 Loop + 1 Challenge + 3 Schubladen) ═══════════════════════════════════════════════════════════════ */ #pmkCard .salat-today-grid { margin: 14px 0 0; } #pmkCard .salat-today-meta { margin: 10px 0 0; font-size: 12px; } /* Feed-Abstand: direkte Karten + Schubladen ruhig gestapelt */ .salat-feed { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; } .salat-feed > .fajr40-card { margin: 0; } /* [hidden] muss IMMER gewinnen (display-Regeln überschreiben sonst) */ .pmk-combo[hidden], .pmk-cta[hidden], .scel [hidden] { display: none !important; } /* ═══════════════════════════════════════════════════════════════ v119 ★ CEO-LISTE — Azan-Karte, Freunde, Benachrichtigungen, Kalender-Intro, Family-Battle. Einheitlich: Gold + Fraunces. ═══════════════════════════════════════════════════════════════ */ /* ── Azan-Karte ── */ .azn-card { margin: 0 0 14px; padding: 13px 14px 12px; border-radius: 18px; background: linear-gradient(165deg, var(--surface-elev) 0%, var(--surface) 100%); border: 1px solid var(--border); } .azn-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 2px 9px; } .azn-title { font-size: 12px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-dim); } .azn-loc { font-size: 11px; font-weight: 700; color: var(--gold); } .azn-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; } /* v343 (M3): Standort-Hinweis + Button in der Salat-Azan-Karte (statt Default-Zeiten) */ .azn-loc-hint { margin-top: 13px; text-align: center; } .azn-loc-hint .azn-hint-txt { font-size: 12.5px; line-height: 1.45; color: rgba(244,237,224,0.6); margin: 0 0 10px; } .azn-loc-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(245,201,119,0.4); background: rgba(245,201,119,0.08); color: var(--gold,#e5c46a); font-weight: 700; font-size: 13.5px; cursor: pointer; } .azn-loc-btn:active { transform: scale(0.97); } .azn-loc-btn .sic { width: 15px; height: 15px; } .azn-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; border-radius: 11px; background: color-mix(in srgb, var(--text) 5%, transparent); } .azn-cell.is-past { opacity: 0.45; } .azn-cell.is-next { background: color-mix(in srgb, var(--gold) 14%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gold) 45%, transparent); opacity: 1; } .azn-name { font-size: 10.5px; font-weight: 800; color: var(--text-muted); } .azn-time { font-size: 13px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; } .azn-cell.is-next .azn-time { color: var(--gold); } /* ── Sheets (Freunde + Benachrichtigungen) ── */ .fnd-sheet, .ntf-sheet { position: fixed; inset: 0; z-index: 10500; display: flex; align-items: flex-end; justify-content: center; background: rgba(10, 8, 3, 0.55); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); opacity: 0; transition: opacity .22s ease; } .fnd-sheet[hidden], .ntf-sheet[hidden] { display: none !important; } .fnd-sheet.is-on, .ntf-sheet.is-on { opacity: 1; } .fnd-card, .ntf-card { width: 100%; max-width: 520px; max-height: 76vh; overflow-y: auto; -webkit-overflow-scrolling: touch; border-radius: 24px 24px 0 0; padding: 18px 16px calc(20px + env(safe-area-inset-bottom)); background: linear-gradient(170deg, var(--surface-elev) 0%, var(--surface) 100%); border: 1px solid var(--border); border-bottom: none; transform: translateY(14px); transition: transform .25s cubic-bezier(.2,1,.4,1); } .fnd-sheet.is-on .fnd-card, .ntf-sheet.is-on .ntf-card { transform: translateY(0); } .fnd-head, .ntf-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; } .fnd-title, .ntf-title { font-family: var(--font-display, 'Fraunces', serif); font-size: 21px; font-weight: 700; color: var(--text); } .fnd-week { font-size: 11px; font-weight: 700; color: var(--text-dim); margin-left: auto; } .fnd-close, .ntf-close { margin-left: auto; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer; font-size: 17px; line-height: 1; color: var(--text-muted); background: color-mix(in srgb, var(--text) 8%, transparent); } .fnd-head .fnd-close { margin-left: 8px; } .fnd-list { display: flex; flex-direction: column; gap: 4px; } .fnd-empty { padding: 18px 10px; text-align: center; font-size: 13px; color: var(--text-muted); line-height: 1.5; } .fnd-row { display: grid; grid-template-columns: 22px 30px 1fr auto auto; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 12px; } .fnd-row.is-me { background: color-mix(in srgb, var(--gold) 13%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gold) 45%, transparent); } .fnd-row.is-battle { background: color-mix(in srgb, var(--gold) 7%, transparent); } .fnd-rank { font-size: 12.5px; font-weight: 800; color: var(--text-dim); text-align: center; font-variant-numeric: tabular-nums; } .fnd-av { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 800; color: var(--text-muted); background: color-mix(in srgb, var(--text) 8%, transparent); } .fnd-row.is-me .fnd-av { background: var(--gold); color: #1a130a; } .fnd-nm { font-size: 13.5px; font-weight: 700; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fnd-nm em { font-style: normal; font-weight: 800; color: var(--gold); font-size: 11px; } .fnd-battle-tag { display: block; font-size: 10.5px; font-weight: 800; color: var(--gold); margin-top: 1px; } .fnd-actions { display: inline-flex; gap: 5px; } .fnd-act { width: 30px; height: 30px; border-radius: 9px; border: none; cursor: pointer; font-size: 13px; display: grid; place-items: center; background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text-muted); } .fnd-act.is-on { background: color-mix(in srgb, var(--gold) 22%, transparent); color: var(--gold); } .fnd-xp { font-size: 12.5px; font-weight: 800; color: var(--text-muted); font-variant-numeric: tabular-nums; } .fnd-add-row { display: flex; gap: 8px; margin-top: 13px; } .fnd-input { flex: 1; padding: 11px 13px; border-radius: 12px; border: 1px solid var(--border); background: color-mix(in srgb, var(--text) 4%, transparent); color: var(--text); font-size: 14px; outline: none; } .fnd-input:focus { border-color: color-mix(in srgb, var(--gold) 50%, var(--border)); } .fnd-add { width: 44px; border-radius: 12px; border: none; cursor: pointer; font-size: 20px; font-weight: 700; color: #241806; background: linear-gradient(160deg, var(--gold-soft), var(--gold)); } .fnd-hint { margin-top: 10px; font-size: 10.5px; color: var(--text-dim); text-align: center; } /* ── Benachrichtigungen ── */ .ntf-list { display: flex; flex-direction: column; gap: 6px; } .ntf-row { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 13px; background: color-mix(in srgb, var(--text) 4%, transparent); } .ntf-row.is-urgent { background: color-mix(in srgb, #e8553c 9%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #e8553c 30%, transparent); } .ntf-ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--gold) 13%, transparent); color: var(--gold); } .ntf-row.is-urgent .ntf-ic { background: color-mix(in srgb, #e8553c 15%, transparent); color: #e8553c; } .ntf-ic .sic { width: 17px; height: 17px; } .ntf-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .ntf-t { font-size: 13.5px; font-weight: 800; color: var(--text); } .ntf-sub { font-size: 11.5px; font-weight: 600; color: var(--text-muted); } /* ── Kalender-Intro: Blur + Satz ── */ .cal-intro { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: flex-start; justify-content: center; padding-top: 17vh; background: rgba(7, 5, 2, 0.74); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); opacity: 0; transition: opacity .5s ease; } .cal-intro.is-on { opacity: 1; } .cal-intro-inner { text-align: center; padding: 0 30px; max-width: 420px; } .cal-intro-mark { font-size: 26px; color: var(--gold); margin-bottom: 12px; } .cal-intro-quote { font-family: var(--font-display, 'Fraunces', serif); font-size: 24px; font-weight: 700; color: #f4ead6; line-height: 1.32; letter-spacing: -0.01em; text-shadow: 0 2px 24px rgba(0,0,0,0.5); } .cal-intro-sub { margin-top: 12px; font-size: 14.5px; font-weight: 600; color: rgba(244,234,214,0.72); font-style: italic; line-height: 1.45; } /* ── Family: aktuelles Gebet + Battle ── */ .fr-cur { display: inline-block; margin-top: 3px; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: 0.04em; } .fr-cur.is-done { color: var(--emerald); background: color-mix(in srgb, var(--emerald) 13%, transparent); } .fr-cur.is-open { color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); } .fr-remind { width: 100%; margin-bottom: 9px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 12px; border-radius: 12px; border: none; cursor: pointer; font-size: 13px; font-weight: 800; color: #241806; background: linear-gradient(160deg, var(--gold-soft), var(--gold)); } .fr-remind .sic { width: 15px; height: 15px; } .fr-battle { width: 100%; margin-top: 7px; padding: 10px 12px; border-radius: 12px; cursor: pointer; font-size: 13px; font-weight: 800; color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); border: 1px solid var(--border); } .fr-battle.is-on { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, transparent); background: color-mix(in srgb, var(--gold) 10%, transparent); } .fr-battle-strip { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; padding: 11px 13px; border-radius: 13px; font-size: 12.5px; color: var(--text); } .fr-battle-strip.is-lead { background: color-mix(in srgb, var(--emerald) 11%, transparent); } .fr-battle-strip.is-behind { background: color-mix(in srgb, #e8553c 10%, transparent); } .fbs-ic { font-size: 15px; } .fbs-txt { flex: 1; min-width: 0; } .fbs-state { font-weight: 800; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; } .fr-battle-strip.is-lead .fbs-state { color: var(--emerald); } .fr-battle-strip.is-behind .fbs-state { color: #e8553c; } /* ── Header: Friends-Button neben Bell ── */ .shh-friends { margin-right: 8px; } /* ═══════════════════════════════════════════════════════════════ v120 ★ QIBLA premium · Gebets-Sperre · Dialog ═══════════════════════════════════════════════════════════════ */ /* ── Qibla ── */ .qbl { display: flex; flex-direction: column; align-items: center; padding: 6px 0 4px; } .qbl-dial { position: relative; width: 240px; height: 240px; } .qbl-rot { position: absolute; inset: 0; transition: transform .25s cubic-bezier(.2,.8,.3,1); will-change: transform; } .qbl-svg { width: 100%; height: 100%; } .qbl-circle { color: color-mix(in srgb, var(--text) 16%, transparent); } .qbl-n { font-size: 13px; font-weight: 800; fill: var(--gold); } .qbl-l { font-size: 11px; font-weight: 700; fill: color-mix(in srgb, var(--text) 38%, transparent); } .qbl-kaaba { position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(160deg, var(--gold-soft), var(--gold)); box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--gold) 75%, transparent); transform: translate(-50%, -50%) translate(0, -90px); } .qbl-kaaba .sic { width: 20px; height: 20px; color: #241806; } .qbl-kaaba.is-found { box-shadow: 0 0 0 5px color-mix(in srgb, var(--emerald) 35%, transparent), 0 4px 14px -4px color-mix(in srgb, var(--emerald) 75%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--emerald) 80%, #fff), var(--emerald)); } .qbl-kaaba.is-found .sic { color: #fff; } .qbl-ring-glow { position: absolute; inset: 6px; border-radius: 50%; pointer-events: none; transition: box-shadow .3s ease; } .qbl-ring-glow.is-found { box-shadow: 0 0 0 2px color-mix(in srgb, var(--emerald) 55%, transparent), 0 0 36px -4px color-mix(in srgb, var(--emerald) 45%, transparent); } .qbl-needle { position: absolute; left: 50%; top: -3px; transform: translateX(-50%); font-size: 15px; color: var(--gold); text-shadow: 0 2px 10px color-mix(in srgb, var(--gold) 60%, transparent); } .qbl-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 0; pointer-events: none; } .qbl-deg { font-family: var(--font-display, 'Fraunces', serif); font-size: 30px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1; } .qbl-deg-lbl { font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); margin-top: 3px; } .qbl-dist { margin-top: 12px; font-size: 12.5px; font-weight: 700; color: var(--text-muted); } .qbl-status { margin-top: 7px; padding: 7px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 800; color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent); display: inline-flex; align-items: center; gap: 6px; } .qbl-status .sic { width: 14px; height: 14px; } .qbl-btn { margin-top: 13px; width: 100%; padding: 13px 16px; border-radius: 14px; border: none; cursor: pointer; font-size: 14px; font-weight: 800; color: #241806; background: linear-gradient(160deg, var(--gold-soft), var(--gold)); box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--gold) 75%, transparent); transition: transform .12s ease; } .qbl-btn:active { transform: scale(0.97); } /* ── Gebets-Pills: gesperrt bis die Zeit eintrifft ── */ .qp-pill.is-locked { opacity: 0.42; filter: grayscale(0.35); } .qp-pill.is-locked .qp-check { font-size: 9.5px; font-weight: 800; letter-spacing: 0; font-variant-numeric: tabular-nums; } /* ── Sperr-Dialog ── */ .pwait { position: fixed; inset: 0; z-index: 10800; display: flex; align-items: center; justify-content: center; background: rgba(8, 6, 2, 0.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .22s ease; } .pwait[hidden] { display: none !important; } .pwait.is-on { opacity: 1; } .pwait-card { width: min(320px, 84vw); text-align: center; padding: 24px 20px 18px; border-radius: 24px; background: linear-gradient(170deg, var(--surface-elev) 0%, var(--surface) 100%); border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--border)); box-shadow: 0 28px 70px -22px rgba(0,0,0,0.75); transform: scale(0.94); transition: transform .25s cubic-bezier(.2,1.2,.4,1); } .pwait.is-on .pwait-card { transform: scale(1); } .pwait-ic { width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 16px; display: grid; place-items: center; background: color-mix(in srgb, var(--gold) 14%, transparent); color: var(--gold); } .pwait-ic .sic { width: 24px; height: 24px; } .pwait-title { font-family: var(--font-display, 'Fraunces', serif); font-size: 19px; font-weight: 700; color: var(--text); line-height: 1.2; } .pwait-sub { margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); } .pwait-remind { margin-top: 16px; width: 100%; padding: 13px 16px; border-radius: 14px; border: none; cursor: pointer; font-size: 14px; font-weight: 800; color: #241806; background: linear-gradient(160deg, var(--gold-soft), var(--gold)); } .pwait-remind:disabled { opacity: 0.75; } .pwait-close { margin-top: 9px; width: 100%; padding: 11px 16px; border-radius: 13px; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--text-muted); background: color-mix(in srgb, var(--text) 6%, transparent); border: 1px solid var(--border); } /* ═══════════════════════════════════════════════════════════════ v122 ★ MOTIVATIONSKARTEN (Home, über Bayān) — Styles waren in v42 gelöscht worden; hier neu: Swipe-Karten, premium, 3 Typen. ═══════════════════════════════════════════════════════════════ */ .motiv-stack { margin: 4px 0 18px; } .ms-cards { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 2px; } .ms-cards::-webkit-scrollbar { display: none; } .ms-card { flex: 0 0 100%; scroll-snap-align: center; border-radius: 20px; padding: 18px 17px 15px; background: radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--gold) 12%, transparent) 0%, transparent 55%), linear-gradient(165deg, var(--surface-elev) 0%, var(--surface) 100%); border: 1px solid color-mix(in srgb, var(--gold) 28%, var(--border)); } .ms-card.warning { background: radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, #e8553c 12%, transparent) 0%, transparent 55%), linear-gradient(165deg, var(--surface-elev) 0%, var(--surface) 100%); border-color: color-mix(in srgb, #e8553c 32%, var(--border)); } .ms-card.success { background: radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--emerald) 13%, transparent) 0%, transparent 55%), linear-gradient(165deg, var(--surface-elev) 0%, var(--surface) 100%); border-color: color-mix(in srgb, var(--emerald) 32%, var(--border)); } .msc-icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--gold) 14%, transparent); color: var(--gold); margin-bottom: 10px; } .ms-card.warning .msc-icon { background: color-mix(in srgb, #e8553c 14%, transparent); color: #e8553c; } .ms-card.success .msc-icon { background: color-mix(in srgb, var(--emerald) 14%, transparent); color: var(--emerald); } .msc-icon .sic { width: 19px; height: 19px; } .msc-title { font-family: var(--font-display, 'Fraunces', serif); font-size: 18px; font-weight: 700; color: var(--text); line-height: 1.15; } .msc-text { margin-top: 7px; font-size: 13.5px; font-weight: 500; color: var(--text-muted); line-height: 1.5; } .msc-source { margin-top: 10px; font-size: 11px; font-weight: 700; color: var(--text-dim); font-style: italic; } .ms-dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; } .ms-dot { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--text) 16%, transparent); transition: all .25s ease; } .ms-dot.active { width: 18px; border-radius: 999px; background: var(--gold); } /* ═══ v123 ★ Family Live-Sync Badge ═══ */ .fr-sync { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 8px; padding: 6px 12px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; } .fr-sync-dot { width: 7px; height: 7px; border-radius: 50%; } .fr-sync.is-live { color: var(--emerald); background: color-mix(in srgb, var(--emerald) 11%, transparent); } .fr-sync.is-live .fr-sync-dot { background: var(--emerald); animation: pmkPulse 2s infinite; } .fr-sync.is-local { color: var(--text-dim); background: color-mix(in srgb, var(--text) 6%, transparent); } .fr-sync.is-local .fr-sync-dot { background: var(--text-dim); } /* ═══ v124 ★ Handle-Zeile + Dialog-Alt-Button ═══ */ .fnd-handle-row { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; padding: 10px 13px; border-radius: 13px; background: color-mix(in srgb, var(--gold) 9%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent); } .fnd-handle-lbl { font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-dim); } .fnd-handle { font-family: var(--font-display, 'Fraunces', serif); font-size: 16px; font-weight: 700; color: var(--gold); flex: 1; } .fnd-handle-copy { border: none; cursor: pointer; padding: 7px 13px; border-radius: 10px; font-size: 12px; font-weight: 800; color: #241806; background: linear-gradient(160deg, var(--gold-soft), var(--gold)); } .pwait-remind-alt { background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); border: 1px solid var(--border); } /* ═══ v126 ★ iOS Status-Bar — gefrostetes Glas hinter Uhr/Akku (durchscheinend + blur wie native Apps; Content scrollt dahinter durch) ═══ */ body::after { content: ''; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); background: linear-gradient(180deg, rgba(7,11,21,0.78) 0%, rgba(7,11,21,0.42) 100%); -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%); z-index: 99998; pointer-events: none; } /* ═══════════════════════════════════════════════════════════════ v126 ★ FAMILY · GEMEINSAM (kollaborativ statt Wettkampf) ═══════════════════════════════════════════════════════════════ */ .fw-badge { display: grid; place-items: center; } .fw-badge::after { content: none; } .fw-badge .sic { width: 20px; height: 20px; color: #241806; } /* Geteilte Familienleistung */ .fw-shared { margin: 14px 0 12px; } .fw-shared-top { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 7px; } .fw-shared-top #fwSharedNum { font-family: var(--font-display, 'Fraunces', serif); font-size: 22px; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; } .fw-shared-sep, .fw-shared-unit { color: var(--text-dim); font-weight: 600; } .fw-bar { height: 9px; border-radius: 999px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; } .fw-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold-soft), var(--gold)); transition: width .6s cubic-bezier(.4,0,.2,1); box-shadow: 0 0 14px -2px color-mix(in srgb, var(--gold) 60%, transparent); } /* Beitragende — KEIN Rang, KEINE Krone */ .fw-row { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 12px; } .fw-row.is-me { background: color-mix(in srgb, var(--gold) 11%, transparent); } .fw-av { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 800; color: var(--text-muted); background: color-mix(in srgb, var(--text) 8%, transparent); } .fw-row.is-me .fw-av { background: var(--gold); color: #1a130a; } .fw-nm { font-size: 13.5px; font-weight: 700; color: var(--text); min-width: 0; } .fw-nm em { font-style: normal; font-weight: 800; color: var(--gold); font-size: 11px; } .fw-mini { display: block; margin-top: 5px; height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--text) 9%, transparent); overflow: hidden; } .fw-mini-fill { display: block; height: 100%; border-radius: 999px; background: color-mix(in srgb, var(--emerald) 70%, var(--gold)); transition: width .5s ease; } .fw-contrib { font-size: 12.5px; font-weight: 800; color: var(--emerald); font-variant-numeric: tabular-nums; white-space: nowrap; } .fw-hadith { display: block; margin-top: 6px; font-size: 11.5px; font-weight: 500; font-style: italic; color: var(--text-muted); line-height: 1.4; } /* Duʿā-Aktion im Roster */ .fr-dua { width: 100%; margin-top: 7px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 12px; border-radius: 12px; cursor: pointer; font-size: 13px; font-weight: 800; color: #241806; background: linear-gradient(160deg, var(--gold-soft), var(--gold)); border: none; } .fr-dua .sic { width: 15px; height: 15px; } /* Bond-Strip (statt Battle-Strip) */ .fr-bond-strip { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding: 11px 13px; border-radius: 13px; font-size: 12.5px; color: var(--text); background: color-mix(in srgb, var(--emerald) 10%, transparent); } .fr-bond-strip .fbs-ic { display: inline-grid; place-items: center; color: var(--emerald); } .fr-bond-strip .fbs-ic .sic { width: 18px; height: 18px; } .fr-bond-strip .fbs-txt { flex: 1; min-width: 0; } /* ═══════════════════════════════════════════════════════════════ v127 ★ USTĀDH-CHAT · symmetrisch, premium, dunkel + Intro-Ladepunkte Finaler Override — vereinheitlicht Bubbles, Avatare, Chips, Input. ═══════════════════════════════════════════════════════════════ */ /* Chat-Fläche: gleichmäßiger Rhythmus */ #page-ustadh .uc-chat-box { display: flex; flex-direction: column; gap: 12px; padding: 14px 14px 10px; } #page-ustadh .uc-msg-row { display: flex; align-items: flex-end; gap: 8px; margin: 0; max-width: 100%; } #page-ustadh .uc-msg-row.user-row { justify-content: flex-end; } /* Avatar — überall identische gold Scheibe */ #page-ustadh .uc-msg-avatar, #page-ustadh .uc45-msg-av { width: 30px; height: 30px; min-width: 30px; border-radius: 50%; flex: 0 0 30px; align-self: flex-end; margin: 0; background: radial-gradient(circle at 35% 30%, #fff5cc 0%, #e5c46a 55%, #8a6520 100%); box-shadow: 0 2px 8px -2px rgba(224,184,112,0.5); position: static; } #page-ustadh .uc-msg-avatar svg { display: none; } /* Bot-Bubble — dunkel, premium, links */ #page-ustadh .chat-msg.bot, #page-ustadh .uc-msg-row .chat-msg.bot, #page-ustadh .uc-chat-box > .chat-msg.bot { background: linear-gradient(165deg, var(--surface-elev) 0%, var(--surface) 100%) !important; border: 1px solid var(--border) !important; border-radius: 18px 18px 18px 6px !important; padding: 12px 15px !important; max-width: 80% !important; color: var(--text) !important; font-size: 14.5px !important; line-height: 1.5 !important; box-shadow: 0 4px 16px -10px rgba(0,0,0,0.6) !important; } #page-ustadh .chat-msg.bot strong, #page-ustadh .chat-msg.bot .uc45-name { color: var(--gold) !important; font-weight: 700 !important; } #page-ustadh .chat-msg.bot .cm-body { font-size: 14.5px !important; line-height: 1.5 !important; color: var(--text) !important; margin: 0 !important; } #page-ustadh .chat-msg.bot .uc45-sub { color: var(--text-muted) !important; margin-top: 4px !important; } #page-ustadh .chat-msg.bot .cm-time { font-size: 10.5px !important; color: var(--text-dim) !important; margin-top: 6px !important; opacity: 0.8; } /* User-Bubble — gold, rechts, gleiche Maße */ #page-ustadh .chat-msg.user { background: linear-gradient(160deg, var(--gold-soft), var(--gold)) !important; color: #241806 !important; border: none !important; border-radius: 18px 18px 6px 18px !important; padding: 12px 15px !important; max-width: 80% !important; font-size: 14.5px !important; line-height: 1.5 !important; font-weight: 600 !important; box-shadow: 0 6px 18px -10px color-mix(in srgb, var(--gold) 70%, transparent) !important; } #page-ustadh .chat-msg.user .cm-time { font-size: 10.5px !important; color: #4a3a14 !important; margin-top: 5px !important; text-align: right; opacity: 0.75; } /* Ladepunkte — exakt wie im Intro (3 atmende Gold-Punkte) */ #page-ustadh .uc-typing { display: inline-flex !important; align-self: flex-start !important; align-items: center !important; gap: 9px !important; margin: 0 0 0 38px !important; padding: 15px 18px !important; background: linear-gradient(165deg, var(--surface-elev) 0%, var(--surface) 100%) !important; border: 1px solid var(--border) !important; border-radius: 18px 18px 18px 6px !important; width: auto !important; max-width: none !important; } #page-ustadh .uc-typing span { width: 8px !important; height: 8px !important; border-radius: 50% !important; background: radial-gradient(circle at 35% 30%, #fff5cc 0%, #e0b870 55%, #8a6520 100%) !important; box-shadow: 0 0 10px rgba(224,184,112,0.7), 0 0 20px rgba(224,184,112,0.4) !important; animation: spLoaderBreathe 1.6s ease-in-out infinite !important; } #page-ustadh .uc-typing span:nth-child(2) { animation-delay: 0.2s !important; } #page-ustadh .uc-typing span:nth-child(3) { animation-delay: 0.4s !important; } /* Bismillāh + Datum mittig & dezent */ #page-ustadh .uc45-bism { text-align: center; } #page-ustadh .uc-date-chip { align-self: center; } /* Quick-Action-Chips — symmetrisches 2-Spalten-Raster, gleiche Größe */ #page-ustadh .uc46-feed { display: grid !important; grid-template-columns: 1fr 1fr; gap: 9px; overflow: visible !important; padding: 4px 2px 2px; margin-top: 4px; } #page-ustadh .uc46-feed-chip { width: 100% !important; min-width: 0 !important; flex: none !important; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 12px !important; border-radius: 14px; background: linear-gradient(165deg, var(--surface-elev), var(--surface)) !important; border: 1px solid var(--border) !important; font-size: 13.5px; font-weight: 700; color: var(--text); white-space: nowrap; } /* einzelnen letzten Chip mittig über beide Spalten */ #page-ustadh .uc46-feed-chip:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; min-width: 55%; } #page-ustadh .uc46-feed-chip .sic { width: 16px; height: 16px; color: var(--gold); } /* Input-Row — Plus neutral (kein Grün), gleiche runde Buttons */ #page-ustadh .uc45-plus { width: 42px !important; height: 42px !important; border-radius: 50% !important; background: linear-gradient(165deg, var(--surface-elev), var(--surface)) !important; border: 1px solid var(--border) !important; color: var(--gold) !important; } #page-ustadh .uc45-send { background: linear-gradient(160deg, var(--gold-soft), var(--gold)) !important; color: #241806 !important; } /* ═══════════════════════════════════════════════════════════════ v128 ★ Kalender-Navy dunkler (nur #page-calendar, Struktur bleibt) + Ustādh-Intro: 3 Lade­punkte unten (wie im Splash) ═══════════════════════════════════════════════════════════════ */ #page-calendar { --card: #0c1320; --card-2: #111a2e; --card-3: #16203a; } /* Ustādh-Empty-State Loader = die 3 atmenden Gold-Punkte aus dem Intro */ #page-ustadh .ues-loader { display: flex; justify-content: center; gap: 13px; margin-top: 22px; } #page-ustadh .ues-loader span { width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff5cc 0%, #e0b870 55%, #8a6520 100%); box-shadow: 0 0 10px rgba(224,184,112,0.7), 0 0 20px rgba(224,184,112,0.4); animation: spLoaderBreathe 1.6s ease-in-out infinite; } #page-ustadh .ues-loader span:nth-child(2) { animation-delay: 0.2s; } #page-ustadh .ues-loader span:nth-child(3) { animation-delay: 0.4s; } /* ═══════════════════════════════════════════════════════════════ v129 ★ FIX: 3-Punkt-Loader animiert auf iOS nur teilweise Ursache: konkurrierende .sp-loader-Regeln (appleDotBounce/sp100Dot) + positive animation-delays mit !important → Safari killt Punkt 2/3. Lösung: EIN autoritativer Override, frischer Keyframe, NEGATIVE Delays (alle Punkte bewegen sich ab Frame 1), -webkit-Prefix. ═══════════════════════════════════════════════════════════════ */ @-webkit-keyframes sabrDotPulse { 0%, 100% { opacity: 0.30; -webkit-transform: scale(0.72); transform: scale(0.72); } 50% { opacity: 1; -webkit-transform: scale(1.25); transform: scale(1.25); } } @keyframes sabrDotPulse { 0%, 100% { opacity: 0.30; -webkit-transform: scale(0.72); transform: scale(0.72); } 50% { opacity: 1; -webkit-transform: scale(1.25); transform: scale(1.25); } } /* Splash-Intro (unten) · Ustādh-Intro · Ustādh-Typing — alle gleich */ .splash-v30 .sp-bottom .sp-loader span, #page-ustadh .ues-loader span, #page-ustadh .uc-typing span { -webkit-animation: sabrDotPulse 1.5s ease-in-out infinite !important; animation: sabrDotPulse 1.5s ease-in-out infinite !important; will-change: transform, opacity; } .splash-v30 .sp-bottom .sp-loader span:nth-child(1), #page-ustadh .ues-loader span:nth-child(1), #page-ustadh .uc-typing span:nth-child(1) { -webkit-animation-delay: 0s !important; animation-delay: 0s !important; } .splash-v30 .sp-bottom .sp-loader span:nth-child(2), #page-ustadh .ues-loader span:nth-child(2), #page-ustadh .uc-typing span:nth-child(2) { -webkit-animation-delay: -0.5s !important; animation-delay: -0.5s !important; } .splash-v30 .sp-bottom .sp-loader span:nth-child(3), #page-ustadh .ues-loader span:nth-child(3), #page-ustadh .uc-typing span:nth-child(3) { -webkit-animation-delay: -1.0s !important; animation-delay: -1.0s !important; } /* ═══════════════════════════════════════════════════════════════ v130 ★ Kalender + Familie-Empty: Navy VIEL dunkler (fast schwarz-navy) ═══════════════════════════════════════════════════════════════ */ #page-calendar { --card: #070a11; --card-2: #0a0e18; --card-3: #0d1220; } /* Familie "keine Familie"-Empty-State Navy ebenfalls viel dunkler */ #page-family .family-empty, #page-family .family-empty-v52 { background: linear-gradient(135deg, #070a11 0%, #0a0e18 100%) !important; } /* ═══════════════════════════════════════════════════════════════ v131 ★ Family-Woche: Umschalter Gemeinsam ↔ interne Rangliste ═══════════════════════════════════════════════════════════════ */ .mc-toggle { display: flex; gap: 4px; margin: 12px 0 2px; padding: 4px; border-radius: 13px; background: color-mix(in srgb, var(--text) 6%, transparent); } .mc-tab { flex: 1; border: none; cursor: pointer; padding: 8px 10px; border-radius: 10px; font-size: 12.5px; font-weight: 800; color: var(--text-muted); background: transparent; transition: all .15s ease; } .mc-tab.is-on { color: #241806; background: linear-gradient(160deg, var(--gold-soft), var(--gold)); box-shadow: 0 4px 12px -6px color-mix(in srgb, var(--gold) 70%, transparent); } /* Rangliste-Zeilen (freundlich, kein Battle) */ .fw-row.mcr-row { grid-template-columns: 26px 30px 1fr auto; } .mcr-rank { font-size: 13px; font-weight: 800; color: var(--text-dim); text-align: center; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; justify-content: center; } .mcr-rank.is-1 { color: var(--gold); } .mcr-rank .sic { width: 16px; height: 16px; } .fw-row.is-lead { background: color-mix(in srgb, var(--gold) 11%, transparent); } .mcr-tag { display: inline-block; margin-left: 7px; font-size: 10px; font-weight: 800; color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); padding: 2px 7px; border-radius: 999px; vertical-align: middle; } /* ═══════════════════════════════════════════════════════════════ v132 ★ FIX (endlich richtig): Tawba-INTRO-Punkte = .ti96-dots Die bisherigen Loader-Fixes liefen an .ti96-dots vorbei. Diese Punkte (unten im Tawba-Intro) hatten noch ti96Dot + positive Delays → iOS animiert nur den ersten. Jetzt: sabrDotPulse, NEGATIVE Delays, -webkit-Prefix, sichtbarer Gold-Glow. ═══════════════════════════════════════════════════════════════ */ .ti96-dots span { width: 9px !important; height: 9px !important; border-radius: 50% !important; background: radial-gradient(circle at 35% 30%, #fff5cc 0%, #e0b870 55%, #8a6520 100%) !important; box-shadow: 0 0 10px rgba(224,184,112,0.7), 0 0 20px rgba(224,184,112,0.4) !important; -webkit-animation: sabrDotPulse 1.5s ease-in-out infinite !important; animation: sabrDotPulse 1.5s ease-in-out infinite !important; will-change: transform, opacity; } .ti96-dots span:nth-child(1) { -webkit-animation-delay: 0s !important; animation-delay: 0s !important; } .ti96-dots span:nth-child(2) { -webkit-animation-delay: -0.5s !important; animation-delay: -0.5s !important; } .ti96-dots span:nth-child(3) { -webkit-animation-delay: -1.0s !important; animation-delay: -1.0s !important; } /* ═══════════════════════════════════════════════════════════════ v133 ★ EINHEITLICHE SCHRIFT überall Problem: Tawba-Chat + Chips rendern in Fraunces (Serif), während Home/Kalender/Family in Plus Jakarta Sans laufen. Zudem 3 abweichende --font-app-Definitionen + nicht geladene Fonts (Inter/Nunito/…). Fix: eine kanonische UI-Schrift erzwingen; Tawba-Body angleichen. Fraunces bleibt NUR für Display-Headings, Amiri für Arabisch. ═══════════════════════════════════════════════════════════════ */ :root, .theme-dark, .theme-light { --font-app: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif !important; --font-ui: var(--font-app) !important; --font-body: var(--font-app) !important; } /* Tawba-Body (Chat-Bubbles + Quick-Chips) auf UI-Schrift wie überall */ #page-ustadh .chat-msg, #page-ustadh .chat-msg .cm-body, #page-ustadh .chat-msg .cm-greeting, #page-ustadh .chat-msg .uc45-sub, #page-ustadh .chat-msg strong, #page-ustadh .uc46-feed-chip, #page-ustadh .uc-empty-state .ues-title, #page-ustadh .uc-empty-state .ues-sub, #page-ustadh .uc-empty-state .ues-hint { font-family: var(--font-app) !important; } /* Arabisch bleibt Amiri (nicht überschreiben) */ #page-ustadh [dir="rtl"], #page-ustadh .ayah-ar, #page-ustadh .uc45-bism { font-family: var(--font-arabic) !important; } /* v133b: exakte Bubble-Selektoren spiegeln (schlägt die Fraunces-Regeln) */ #page-ustadh .chat-msg.bot, #page-ustadh .uc34-bot, #page-ustadh .uc45-greeting, .ustadh-chat .chat-msg.bot, .ustadh-chat .uc34-bot, .ustadh-chat .uc45-greeting, #page-ustadh .chat-msg.user, .ustadh-chat .chat-msg.user { font-family: var(--font-app) !important; } /* ═══════════════════════════════════════════════════════════════ v134 ★ Tawba-Intro: Nav ausblenden + Ladepunkte garantiert sichtbar (Punkte lagen hinter der unteren Navigation) ═══════════════════════════════════════════════════════════════ */ body.tawba-intro-on .bottom-nav { opacity: 0 !important; pointer-events: none !important; transition: opacity .25s ease; } .ti96-dots { position: fixed !important; left: 50% !important; bottom: calc(env(safe-area-inset-bottom, 0px) + 26px) !important; transform: translateX(-50%) !important; z-index: 9999 !important; } /* ═══════════════════════════════════════════════════════════════ v134 ★ FAMILIE EINLADEN — prominenter Native-Share-Button ═══════════════════════════════════════════════════════════════ */ .fm-invite { position: relative; overflow: hidden; width: 100%; margin: 0 0 16px; display: flex; align-items: center; gap: 13px; padding: 15px 16px; border-radius: 18px; cursor: pointer; border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent); background: linear-gradient(150deg, color-mix(in srgb, var(--gold) 22%, var(--surface)) 0%, var(--surface) 90%); box-shadow: 0 10px 26px -14px color-mix(in srgb, var(--gold) 70%, transparent); text-align: left; transition: transform .12s ease; } .fm-invite:active { transform: scale(0.985); } /* dezenter Glanz-Sweep zieht den Blick (cool) */ .fm-invite::after { content: ''; position: absolute; top: 0; left: -60%; width: 50%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.14), transparent); transform: skewX(-18deg); animation: fmInviteSheen 3.6s ease-in-out infinite; } @keyframes fmInviteSheen { 0%, 60% { left: -60%; } 100% { left: 130%; } } .fm-invite-ic { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(160deg, var(--gold-soft), var(--gold)); color: #241806; box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--gold) 75%, transparent); } .fm-invite-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .fm-invite-main { font-family: var(--font-display, 'Fraunces', serif); font-size: 17px; font-weight: 700; color: var(--text); line-height: 1.1; } .fm-invite-sub { font-size: 11.5px; font-weight: 600; color: var(--text-muted); } .fm-invite-sub b { color: var(--gold); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; } .fm-invite-arrow { flex: 0 0 auto; color: var(--gold); display: grid; place-items: center; } /* ═══════════════════════════════════════════════════════════════ v135 ★ GEBETS-ÜBERSICHT + GEBETSPLÄTZE (Foto) ═══════════════════════════════════════════════════════════════ */ /* ── Wer hat heute gebetet? ── */ .fpb-card { margin: 0 0 16px; padding: 15px 15px 12px; border-radius: 18px; background: linear-gradient(165deg, var(--surface-elev) 0%, var(--surface) 100%); border: 1px solid var(--border); } .fpb-head { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 11px; } .fpb-title { font-family: var(--font-display, serif); font-size: 17px; font-weight: 700; color: var(--text); } .fpb-cols { display: flex; gap: 0; } .fpb-cols i { width: 26px; text-align: center; font-style: normal; font-size: 10.5px; font-weight: 800; color: var(--text-dim); letter-spacing: 0; } .fpb-grid { display: flex; flex-direction: column; gap: 4px; } .fpb-row { display: grid; grid-template-columns: 28px 1fr 130px auto; align-items: center; gap: 8px; padding: 7px 6px; border-radius: 11px; } .fpb-row.is-me { background: color-mix(in srgb, var(--gold) 10%, transparent); } .fpb-av { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: var(--text-muted); background: color-mix(in srgb, var(--text) 8%, transparent); } .fpb-row.is-me .fpb-av { background: var(--gold); color: #1a130a; } .fpb-nm { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fpb-nm em { font-style: normal; color: var(--gold); font-size: 11px; font-weight: 800; } .fpb-cells { display: flex; gap: 0; justify-content: flex-start; } .fpb-cell { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; margin: 0 1px; font-size: 12px; font-weight: 800; color: var(--text-dim); background: color-mix(in srgb, var(--text) 6%, transparent); } .fpb-cell.is-done { color: #fff; background: linear-gradient(160deg, color-mix(in srgb, var(--emerald) 82%, #fff), var(--emerald)); } .fpb-cnt { font-size: 12px; font-weight: 800; color: var(--text-muted); font-variant-numeric: tabular-nums; text-align: right; } .fpb-cnt.is-full { color: var(--emerald); } /* ── Gebetsplätze (Foto-Strip) ── */ .fmsp-card { margin: 0 0 16px; padding: 15px 15px 13px; border-radius: 18px; background: linear-gradient(165deg, var(--surface-elev) 0%, var(--surface) 100%); border: 1px solid var(--border); } .fmsp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 2px 12px; } .fmsp-title { font-family: var(--font-display, serif); font-size: 17px; font-weight: 700; color: var(--text); } .fmsp-sub { font-size: 11px; font-weight: 600; color: var(--text-muted); } .fmsp-strip { display: flex; gap: 13px; overflow-x: auto; overflow-y: hidden; padding: 2px 2px 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .fmsp-strip::-webkit-scrollbar { display: none; } .fmsp-add, .fmsp-item { flex: 0 0 auto; border: none; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 64px; } .fmsp-add-ic { width: 62px; height: 62px; border-radius: 16px; display: grid; place-items: center; color: #241806; background: linear-gradient(160deg, var(--gold-soft), var(--gold)); box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--gold) 75%, transparent); } .fmsp-add-lbl, .fmsp-nm { font-size: 11px; font-weight: 700; color: var(--text-muted); } .fmsp-ring { width: 62px; height: 62px; border-radius: 16px; padding: 2.5px; display: block; background: linear-gradient(150deg, var(--gold-soft), var(--gold)); } .fmsp-item.is-seen .fmsp-ring { background: color-mix(in srgb, var(--text) 18%, transparent); } .fmsp-item.is-me .fmsp-ring { background: linear-gradient(150deg, var(--emerald), color-mix(in srgb, var(--emerald) 60%, var(--gold))); } .fmsp-thumb { width: 100%; height: 100%; border-radius: 13px; object-fit: cover; display: block; } .fmsp-empty { font-size: 12px; color: var(--text-dim); align-self: center; padding: 14px 6px; line-height: 1.4; } /* ── Vollbild-Ansicht ── */ .fmsp-modal { position: fixed; inset: 0; z-index: 11200; display: flex; align-items: center; justify-content: center; background: rgba(5, 4, 2, 0.92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .22s ease; } .fmsp-modal[hidden] { display: none !important; } .fmsp-modal.is-on { opacity: 1; } .fmsp-modal-inner { width: min(92vw, 460px); text-align: center; } .fmsp-full { width: 100%; max-height: 72vh; object-fit: contain; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); box-shadow: 0 30px 80px -20px rgba(0,0,0,0.8); } .fmsp-cap { margin-top: 14px; font-size: 14px; color: #f0e6d2; } .fmsp-cap b { color: var(--gold); font-weight: 800; } .fmsp-close { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 14px); right: 16px; width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer; font-size: 24px; line-height: 1; color: #fff; background: rgba(255,255,255,0.12); } /* ═══════════════════════════════════════════════════════════════ v136 ★ FAMILIE-STORIES (Instagram-Style) — Profile oben, Foto-Story-Viewer ═══════════════════════════════════════════════════════════════ */ .fmsp-strip { display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden; padding: 4px 2px 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .fmsp-strip::-webkit-scrollbar { display: none; } .fst-tile { flex: 0 0 auto; border: none; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 5px; width: 66px; } .fst-ring { position: relative; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; padding: 3px; } /* ungesehene Spots → animierter Gold-Ring */ .fst-ring.has { background: conic-gradient(from 210deg, var(--gold-soft), var(--gold), #f3d99a, var(--gold-soft)); } .fst-ring.seen { background: color-mix(in srgb, var(--text) 20%, transparent); } .fst-ring.none { background: color-mix(in srgb, var(--text) 11%, transparent); } .fst-ring.add { background: color-mix(in srgb, var(--gold) 30%, transparent); } .fst-av { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; font-size: 21px; font-weight: 800; color: var(--text); background: linear-gradient(160deg, var(--surface-elev), var(--surface)); border: 2px solid var(--surface); } .fst-tile.is-me .fst-av { color: var(--gold); } .fst-plus { position: absolute; right: -1px; bottom: -1px; width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 800; line-height: 1; color: #241806; background: linear-gradient(160deg, var(--gold-soft), var(--gold)); border: 2px solid var(--surface); } .fst-nm { font-size: 11.5px; font-weight: 700; color: var(--text); max-width: 66px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fst-st { font-size: 10px; font-weight: 700; color: var(--text-muted); } /* ── Story-Viewer (Vollbild) ── */ .fmsp-modal { position: fixed; inset: 0; z-index: 11200; background: #000; opacity: 0; transition: opacity .2s ease; } .fmsp-modal[hidden] { display: none !important; } .fmsp-modal.is-on { opacity: 1; } .fmsp-full { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; } .fmsp-segs { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 10px); left: 12px; right: 12px; display: flex; gap: 4px; z-index: 3; } .fst-seg { flex: 1; height: 3px; border-radius: 999px; background: rgba(255,255,255,0.3); overflow: hidden; } .fst-seg.done { background: #fff; } .fst-seg.active i { display: block; height: 100%; width: 100%; background: #fff; transform-origin: left; animation: fstSeg 4s linear forwards; } @keyframes fstSeg { from { transform: scaleX(0); } to { transform: scaleX(1); } } .fmsp-zone { position: absolute; top: 0; bottom: 0; width: 38%; border: none; background: transparent; cursor: pointer; z-index: 2; } .fmsp-zone-prev { left: 0; } .fmsp-zone-next { right: 0; width: 62%; } .fmsp-close { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 22px); right: 16px; width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer; font-size: 22px; line-height: 1; color: #fff; background: rgba(255,255,255,0.15); z-index: 4; } .fmsp-cap { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 26px); text-align: center; font-size: 14px; color: #fff; z-index: 3; padding: 0 20px; text-shadow: 0 2px 10px rgba(0,0,0,0.7); } .fmsp-cap b { color: var(--gold); font-weight: 800; } /* ═══════════════════════════════════════════════════════════════ v137 ★ LOGO / INTRO / HEADER — exakt nach Spec Wordmark SABR.AI = Baloo 2 ExtraBold (800). SABR #f4f1e6 · .AI #f0b740 ═══════════════════════════════════════════════════════════════ */ /* Splash-Hintergrund: Navy-Verlauf + Gold-Glow oben */ .splash-v30 .sp-bg-base, .splash-v30 .sp-bg-aurora { background: radial-gradient(115% 70% at 50% 12%, rgba(245,201,119,0.08), transparent 55%), radial-gradient(140% 90% at 50% 0%, #122031 0%, #0c1521 55%, #070c14 100%) !important; opacity: 1 !important; } /* ── Wordmark = Baloo 2, 800 ── */ .sp-brand-v95, .app-header .logo-brand, .logo-brand { font-family: "Baloo 2", system-ui, sans-serif !important; font-weight: 800 !important; letter-spacing: -1px !important; } .sp-brand-v95 { font-size: 62px !important; line-height: 0.9 !important; } .sp-brand-v95 .sp-brand-sabr { color: #f4f1e6 !important; } .sp-brand-v95 .sp-brand-dot, .sp-brand-v95 .sp-brand-ai { color: #f0b740 !important; background: none !important; -webkit-text-fill-color: #f0b740 !important; -webkit-background-clip: border-box !important; } /* Header-Wordmark (oben links in der App) */ .app-header .logo-brand { color: #f4f1e6 !important; } .app-header .logo-dot, .app-header .logo-ai { color: #f0b740 !important; -webkit-text-fill-color: #f0b740 !important; background: none !important; } /* ── Tagline DEEN OVER DUNYA ── */ .sp-tagline-bottom { font-family: "Plus Jakarta Sans", system-ui, sans-serif !important; font-weight: 500 !important; font-size: 13px !important; letter-spacing: 6px !important; color: #8a929c !important; text-indent: 6px; } /* ── Bismillah ── */ .sp-bismillah-mini { font-family: "Amiri", serif !important; font-size: 18px !important; color: #f0b740 !important; opacity: 0.9 !important; } /* ── 3 Lade­punkte = Gold #f0b740 (Animation bleibt) ── */ .splash-v30 .sp-bottom .sp-loader span { background: #f0b740 !important; box-shadow: 0 0 10px rgba(240,183,64,0.6) !important; } /* v137b: Header-Punkt exakt #f0b740 (war gold-soft) */ .app-header .logo-brand .logo-dot { color: #f0b740 !important; -webkit-text-fill-color: #f0b740 !important; background: none !important; } /* ═══ v140 ★ Onboarding-Wordmark = Spec (wie Splash, keine 2. Art) ═══ */ .ob-wordmark, .ob-step-splash .ob-wordmark, .ob-wm-sabr, .ob-wm-dot, .ob-wm-ai, .ob-step-splash .ob-wm-sabr, .ob-step-splash .ob-wm-dot, .ob-step-splash .ob-wm-ai { font-family: "Baloo 2", system-ui, sans-serif !important; font-weight: 800 !important; letter-spacing: -1px !important; text-transform: uppercase !important; } .ob-wm-sabr, .ob-step-splash .ob-wm-sabr { color: #f4f1e6 !important; -webkit-text-fill-color: #f4f1e6 !important; background: none !important; } .ob-wm-dot, .ob-wm-ai, .ob-step-splash .ob-wm-dot, .ob-step-splash .ob-wm-ai { color: #f0b740 !important; -webkit-text-fill-color: #f0b740 !important; background: none !important; } .ob-subline, .ob-step-splash .ob-subline { color: #8a929c !important; font-family: "Plus Jakarta Sans", system-ui, sans-serif !important; font-weight: 500 !important; letter-spacing: 6px !important; } /* ═══ v140 ★ FAMILY einfarbig — kein Grün, alles Gold/Dunkel wie überall ═══ */ #page-family { --emerald: var(--gold) !important; --emerald-soft: var(--gold-soft) !important; } /* ═══ v140 ★ Splash: EINE Position (kein Slide-Jump), an der unteren Höhe ═══ */ .splash-v30 .sp-content-v96, .splash-v30 .sp-content-v96 .sp-brand-v95, .splash-v30 .sp-content-v96 .sp-bismillah-mini, .splash-v30 .sp-content-v96 .sp-tagline-bottom { animation: none !important; } /* v140b: restliche hartcodierte Grüns in Family → Gold */ #page-family .fm109-live-dot { background: var(--gold) !important; box-shadow: 0 0 8px rgba(212,162,71,0.55) !important; } #page-family .fm109-feed-presence, #page-family .fm109-xp { background: color-mix(in srgb, var(--gold) 13%, transparent) !important; border-color: color-mix(in srgb, var(--gold) 30%, transparent) !important; color: var(--gold) !important; } #page-family .fm109-type { background: var(--gold) !important; color: #241806 !important; } #page-family .fam-goal.fg-emerald { background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 22%, transparent), color-mix(in srgb, var(--gold) 8%, transparent)) !important; border-color: color-mix(in srgb, var(--gold) 30%, transparent) !important; } #page-family .fg-emerald .fg-icon, #page-family .fg-emerald .fg-pct { color: var(--gold) !important; } #page-family .fg-bar-fill, #page-family .fg-emerald .fg-bar-fill { background: linear-gradient(90deg, var(--gold-soft), var(--gold)) !important; } /* generischer Fallback: grünliche Texte/Borders im Family neutralisieren */ #page-family [class*="emerald"], #page-family [class*="-green"] { } /* ═══════════════════════════════════════════════════════════════ v142 ★ Login-Screen: Bismillah kleiner · SABR.AI größer · Buttons ═══════════════════════════════════════════════════════════════ */ .ob-step-splash .ob-bismillah { font-size: clamp(14px, 4.2vw, 18px) !important; /* kleiner */ margin-bottom: 14px !important; } .ob-step-splash .ob-wordmark { font-size: 76px !important; /* größer (war 62) */ letter-spacing: -1px !important; } .ob-step-splash { padding-top: calc(env(safe-area-inset-top, 0px) + 12vh) !important; } /* Login-Buttons */ .ob-auth { display: flex; flex-direction: column; gap: 11px; width: 100%; max-width: 340px; margin: 26px auto 0; } .ob-google { display: flex; align-items: center; justify-content: center; gap: 11px; width: 100%; padding: 14px 16px; border-radius: 14px; cursor: pointer; font-size: 15px; font-weight: 700; color: #1f1f1f; background: #ffffff; border: none; box-shadow: 0 8px 22px -10px rgba(0,0,0,0.5); transition: transform .12s ease; } .ob-google:active { transform: scale(0.98); } .ob-email { width: 100%; padding: 14px 16px; border-radius: 14px; cursor: pointer; font-size: 14.5px; font-weight: 700; color: #f4ede0; background: rgba(244,237,224,0.08); border: 1px solid rgba(244,237,224,0.20); transition: transform .12s ease; } .ob-email:active { transform: scale(0.98); } /* Standard-"Weiter"/Back auf dem Login-Screen ausblenden (Buttons ersetzen es) */ .onboard-overlay:has(.ob-step-splash.active) .onboard-actions { display: none !important; } /* ═══════════════════════════════════════════════════════════════ v143 ★ Ladebildschirm = EINE Version (wie Login-Screen) + Leuchten ═══════════════════════════════════════════════════════════════ */ /* Splash exakt wie der Login-Screen positionieren/dimensionieren */ .splash-v30 .sp-content-v96 { padding-top: calc(env(safe-area-inset-top, 0px) + 12vh) !important; } .splash-v30 .sp-content-v96 .sp-brand-v95 { font-size: 76px !important; letter-spacing: -1px !important; } .splash-v30 .sp-content-v96 .sp-bismillah-mini { font-size: clamp(14px, 4.2vw, 18px) !important; } /* Leichtes Gold-Leuchten auf BEIDEN (Splash + Login) — eine Optik */ .splash-v30 .sp-brand-v95, .splash-v30 .sp-brand-v95 .sp-brand-sabr, .splash-v30 .sp-brand-v95 .sp-brand-ai, .ob-step-splash .ob-wordmark, .ob-step-splash .ob-wm-sabr, .ob-step-splash .ob-wm-ai { text-shadow: 0 0 26px rgba(240,183,64,0.40), 0 0 60px rgba(240,183,64,0.18) !important; } /* v143 ★ Obere Leiste (Header) auf ALLEN Feeds sichtbar + sticky + Blur-Lücke */ .app-header { position: sticky !important; top: 0 !important; z-index: 60 !important; } /* ═══════════════════════════════════════════════════════════════ v144 ★ Onboarding: Alter · 3 Gewohnheiten · Islam-Fragen · Tutorial ═══════════════════════════════════════════════════════════════ */ .onboard-overlay .ob-age { margin-top: 10px; } /* Gewohnheiten-Chips */ .ob-habits { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin: 6px 0 4px; max-width: 360px; } .ob-habit { padding: 10px 14px; border-radius: 999px; cursor: pointer; font-size: 13.5px; font-weight: 700; color: #f4ede0; background: rgba(244,237,224,0.06); border: 1px solid rgba(244,237,224,0.18); transition: all .14s ease; } .ob-habit.is-on { color: #241806; background: linear-gradient(160deg, var(--gold-soft), var(--gold)); border-color: transparent; box-shadow: 0 6px 16px -8px rgba(240,183,64,0.7); } .ob-habit:active { transform: scale(0.96); } .ob-habit-custom { margin-top: 12px; } .ob-habit-count { margin-top: 10px; font-size: 12px; font-weight: 800; color: var(--gold); letter-spacing: 0.03em; } /* Islam-Fragen */ .ob-q { width: 100%; max-width: 360px; margin: 4px auto 0; text-align: left; } .ob-q + .ob-q { margin-top: 18px; } .ob-q-title { font-size: 14px; font-weight: 700; color: #f4ede0; margin-bottom: 9px; } .ob-q-opts { display: flex; flex-wrap: wrap; gap: 8px; } .ob-q-opt { padding: 9px 13px; border-radius: 12px; cursor: pointer; font-size: 13px; font-weight: 700; color: rgba(244,237,224,0.85); background: rgba(244,237,224,0.06); border: 1px solid rgba(244,237,224,0.18); transition: all .14s ease; } .ob-q-opt.is-on { color: #241806; background: linear-gradient(160deg, var(--gold-soft), var(--gold)); border-color: transparent; } .ob-q-opt:active { transform: scale(0.97); } /* Mini-Tutorial nach Onboarding */ .ob-tut { position: fixed; inset: 0; z-index: 12000; display: flex; align-items: center; justify-content: center; background: rgba(7,11,21,0.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transition: opacity .25s ease; padding: 24px; } .ob-tut.is-on { opacity: 1; } .ob-tut-card { width: min(340px, 88vw); text-align: center; padding: 30px 24px 22px; border-radius: 26px; background: linear-gradient(170deg, var(--surface-elev) 0%, var(--surface) 100%); border: 1px solid color-mix(in srgb, var(--gold) 32%, var(--border)); box-shadow: 0 30px 80px -20px rgba(0,0,0,0.7); } .ob-tut-ic { width: 66px; height: 66px; margin: 0 auto 16px; border-radius: 20px; display: grid; place-items: center; background: linear-gradient(160deg, var(--gold-soft), var(--gold)); box-shadow: 0 10px 24px -8px rgba(240,183,64,0.6); } .ob-tut-ic .sic { width: 32px; height: 32px; color: #241806; } .ob-tut-t { font-family: var(--font-display, serif); font-size: 22px; font-weight: 700; color: var(--text); line-height: 1.15; } .ob-tut-d { margin-top: 10px; font-size: 14.5px; line-height: 1.5; color: var(--text-muted); } .ob-tut-dots { display: flex; justify-content: center; gap: 6px; margin: 18px 0 4px; } .ob-tut-dots span { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--text) 18%, transparent); transition: all .25s ease; } .ob-tut-dots span.is-on { width: 18px; border-radius: 999px; background: var(--gold); } .ob-tut-btn { margin-top: 14px; width: 100%; border: none; cursor: pointer; padding: 14px 18px; border-radius: 14px; font-size: 15px; font-weight: 800; color: #241806; background: linear-gradient(160deg, var(--gold-soft), var(--gold)); } .ob-tut-skip { margin-top: 8px; width: 100%; border: none; cursor: pointer; background: none; font-size: 12.5px; font-weight: 700; color: var(--text-dim); } /* ═══════════════════════════════════════════════════════════════ v146 ★ Ustādh-Tawba-Intro — Fixes · Wordmark = Haupt-Intro (Baloo 2 800, Punkt "." statt mittigem "·") · Intro bleibt im App-Frame (statt 100vw über den ganzen Desktop) · Bottom-Nav bleibt sichtbar + klickbar → Home/Feed jederzeit erreichbar ═══════════════════════════════════════════════════════════════ */ /* — Wordmark exakt wie Haupt-Splash/Login — */ .ti96-name, .ti96-name .ti96-sabr, .ti96-name .ti96-dot, .ti96-name .ti96-ai { font-family: var(--font-brand) !important; /* Baloo 2 */ font-weight: 800 !important; } .ti96-name { font-size: 46px !important; letter-spacing: -1px !important; align-items: baseline !important; line-height: 1 !important; text-shadow: 0 6px 30px rgba(0,0,0,0.55) !important; } .ti96-sabr { color: #f4f1e6 !important; -webkit-text-fill-color: #f4f1e6 !important; } .ti96-dot { color: #f0b740 !important; -webkit-text-fill-color: #f0b740 !important; font-size: 1em !important; margin: 0 0.01em !important; transform: none !important; /* nicht mittig — sitzt auf der Grundlinie */ background: none !important; } .ti96-ai { background: none !important; color: #f0b740 !important; -webkit-text-fill-color: #f0b740 !important; } /* — Intro im Frame halten (Anker = #page-ustadh.active, das ist fixed inset:0) — */ .tawba-intro, .tawba-intro-v22 { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; } /* — Bottom-Nav während Intro sichtbar + klickbar (User: Home/Feed sehen + raus können) — */ body.tawba-intro-on .bottom-nav { opacity: 1 !important; pointer-events: auto !important; z-index: 9400 !important; /* über dem Intro (z 9000) */ } /* Intro-Inhalt über der Nav halten, nicht dahinter */ .tawba-intro-v22 { padding-bottom: 116px !important; } .ti96-dots { bottom: calc(env(safe-area-inset-bottom, 0px) + 104px) !important; z-index: 9000 !important; /* unter der Nav */ } /* ═══ v147 ★ Tawba-Intro: CTA-Button entfernt · Lade-Punkte weiter unten ═══ */ #ti45Cta, .ti45-cta { display: none !important; } .tawba-intro-v22 { padding-bottom: 92px !important; } .ti96-dots { bottom: calc(env(safe-area-inset-bottom, 0px) + 90px) !important; } /* ═══════════════════════════════════════════════════════════════ v148 ★ Onboarding-Eingabe stabil auf JEDEM Gerät · Tastatur deckt das Name-Feld nicht mehr zu (Overlay scrollbar) · kein Zittern beim Tastatur-Öffnen (margin:auto statt center-clip) · Step-Wechsel = sanftes Fade statt horizontalem Slide-Ruckeln ═══════════════════════════════════════════════════════════════ */ .onboard-overlay { overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior: contain !important; align-items: flex-start !important; padding-top: max(env(safe-area-inset-top), 20px) !important; padding-bottom: max(env(safe-area-inset-bottom), 20px) !important; } /* Karte zentriert wenn Platz, scrollt ohne Clipping wenn Tastatur offen */ .onboard-card { margin: auto !important; flex-shrink: 0 !important; } /* Step-Wechsel: nur Fade (kein translateX → kein „Zittern") */ .onboard-step, .onboard-step.active { animation: obStepFade 0.3s ease both !important; } @keyframes obStepFade { from { opacity: 0; } to { opacity: 1; } } /* Eingabefelder: 16px verhindert iOS-Auto-Zoom, kein Transform-Wackeln */ .onboard-overlay .ob-input, .onboard-overlay input, .onboard-overlay #obNameInput, .onboard-overlay #obAgeInput { font-size: 16px !important; transform: none !important; } /* ═══════════════════════════════════════════════════════════════ v149 ★ Family "Heute zusammen" — emotionaler Aufmacher Echte Daten: wer hat gebetet · Familien-Streak · was DIR noch fehlt ═══════════════════════════════════════════════════════════════ */ .fm-today { margin: 12px 0 14px; padding: 16px 16px 14px; border-radius: 20px; background: radial-gradient(120% 80% at 50% 0%, rgba(245,201,119,0.12), transparent 60%), linear-gradient(180deg, rgba(245,201,119,0.06), rgba(255,255,255,0.02)); border: 1px solid rgba(245,201,119,0.20); box-shadow: 0 12px 30px -18px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.05); } .fm-today:empty { display: none; } .fm-today-eyebrow { font-family: var(--font-app), sans-serif; font-size: 10.5px; font-weight: 800; letter-spacing: 2.5px; color: var(--gold); opacity: 0.85; margin-bottom: 7px; } .fm-today-headline { font-family: var(--font-display), serif; font-size: 21px; font-weight: 700; line-height: 1.15; color: #f6efe0; letter-spacing: -0.3px; } .fm-today-bar { margin: 11px 0 9px; height: 8px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; } .fm-today-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold-soft, #f5d878), var(--gold, #e5c46a)); box-shadow: 0 0 12px rgba(245,201,119,0.5); transition: width 0.6s cubic-bezier(0.16,1,0.3,1); } .fm-today-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--font-app), sans-serif; font-size: 12.5px; font-weight: 600; color: rgba(246,239,224,0.62); } .fm-today-streak { color: #f6cf6a; font-weight: 800; background: rgba(245,201,119,0.12); padding: 3px 9px; border-radius: 999px; } .fm-today-nudge { display: block; width: 100%; text-align: left; margin-top: 12px; padding: 12px 14px; border-radius: 14px; font-family: var(--font-app), sans-serif; font-size: 13.5px; font-weight: 700; color: #2a1d05; background: linear-gradient(135deg, var(--gold-soft, #f5d878), var(--gold, #e5c46a)); border: none; cursor: pointer; box-shadow: 0 8px 20px -10px rgba(245,201,119,0.7); transition: transform 0.12s ease; } .fm-today-nudge b { font-weight: 900; } .fm-today-nudge:active { transform: scale(0.98); } .fm-today-nudge.done { color: #f6efe0; cursor: default; background: rgba(255,255,255,0.05); border: 1px solid rgba(245,201,119,0.22); box-shadow: none; } /* ═══════════════════════════════════════════════════════════════ v150 ★ A) FAMILY ENTSCHLACKT — nur die starken Sektionen zeigen (Identität · Heute zusammen · Einladen · Familie heute · Wer hat gebetet · Duʿā-Wand). Rest ausgeblendet = clean & fokussiert. ═══════════════════════════════════════════════════════════════ */ #page-family #bnStreak, #page-family #dqCard, #page-family #lgCard, #page-family #mcCard, #page-family .fw-card, #page-family #fmile, #page-family #familyStories, #page-family #fm109Feed, #page-family .fm88-tasbih-orb, #page-family .fm88-section { display: none !important; } /* etwas mehr Luft zwischen den verbleibenden Karten */ #page-family #familyActive > .fmsp-card, #page-family #familyActive > .fpb-card, #page-family #familyActive > .fm-duawall { margin-top: 14px; } /* ═══════════════════════════════════════════════════════════════ v150 ★ B) EINSTELLUNGEN cleaner im App-Stil (gold/dunkel, ruhig) ═══════════════════════════════════════════════════════════════ */ #settingsModal .modal-card { padding: 22px 18px calc(env(safe-area-inset-bottom, 0px) + 22px); } #settingsModal .modal-title { font-family: var(--font-display), serif; font-size: 20px; letter-spacing: -0.3px; margin-bottom: 16px; } #settingsModal .settings-section { background: rgba(255,255,255,0.025); border: 1px solid rgba(245,201,119,0.12); border-radius: 16px; padding: 13px 14px; margin-bottom: 11px; } #settingsModal .settings-label { font-family: var(--font-app), sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(245,201,119,0.78); margin-bottom: 9px; } #settingsModal .settings-input { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); border-radius: 12px; padding: 12px 14px; font-size: 16px; color: #f4efe2; width: 100%; } #settingsModal .settings-input:focus { border-color: rgba(245,201,119,0.4); box-shadow: 0 0 0 3px rgba(245,201,119,0.10); outline: none; } #settingsModal .gender-row { gap: 8px; } #settingsModal .gender-pill { border-radius: 12px; font-weight: 700; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.03); color: rgba(244,239,226,0.8); } #settingsModal .gender-pill.active { background: linear-gradient(135deg, var(--gold-soft, #f5d878), var(--gold, #e5c46a)); color: #2a1d05; border-color: transparent; } #settingsModal .about-text { font-size: 13px; line-height: 1.6; color: rgba(244,239,226,0.6); } #settingsModal .spt-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 2px; font-size: 14px; color: rgba(244,239,226,0.85); } /* Upgrade-Einstieg oben in den Einstellungen */ /* v329 ★ v1 kostenlos: Upgrade-/Pro-Banner ausblenden (greift auch im Settings-Klon). Bei Pro-Update entfernen. */ body.sabr-free .set-upgrade { display: none !important; } .set-upgrade { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 15px; margin-bottom: 16px; border-radius: 18px; cursor: pointer; background: radial-gradient(120% 100% at 0% 0%, rgba(245,201,119,0.22), transparent 60%), linear-gradient(135deg, rgba(245,201,119,0.14), rgba(245,201,119,0.05)); border: 1px solid rgba(245,201,119,0.34); box-shadow: 0 10px 26px -14px rgba(245,201,119,0.5); } .set-up-ic { width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--gold-soft, #f5d878), var(--gold, #e5c46a)); color: #2a1d05; } .set-up-ic .sic { width: 20px; height: 20px; } .set-up-txt { flex: 1; text-align: left; display: flex; flex-direction: column; gap: 2px; } .set-up-main { font-family: var(--font-display), serif; font-size: 16px; font-weight: 700; color: #f7efdd; } .set-up-sub { font-size: 12px; color: rgba(245,201,119,0.75); } .set-up-arrow { color: var(--gold, #e5c46a); flex-shrink: 0; } /* ═══════════════════════════════════════════════════════════════ v150 ★ C) PRICING — Free · Pro (4€) · Premium (10€) ═══════════════════════════════════════════════════════════════ */ .pricing-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; transition: opacity 0.28s ease; } .pricing-modal.is-open { opacity: 1; } .pr-backdrop { position: absolute; inset: 0; background: rgba(2,4,10,0.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .pr-sheet { position: relative; z-index: 1; width: 100%; max-width: 420px; max-height: 92vh; overflow-y: auto; -webkit-overflow-scrolling: touch; background: linear-gradient(180deg, #11141f 0%, #0a0d16 100%); border: 1px solid rgba(245,201,119,0.18); border-radius: 26px; padding: 22px 16px 18px; box-shadow: 0 40px 90px -30px rgba(0,0,0,0.8); transform: translateY(14px); transition: transform 0.32s cubic-bezier(0.16,1,0.3,1); } .pricing-modal.is-open .pr-sheet { transform: translateY(0); } .pr-close { position: absolute; top: 12px; right: 14px; z-index: 2; width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer; background: rgba(255,255,255,0.06); color: #cfc7b6; font-size: 19px; line-height: 1; } .pr-head { text-align: center; margin-bottom: 16px; } .pr-crown { width: 46px; height: 46px; margin: 0 auto 9px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--gold-soft, #f5d878), var(--gold, #e5c46a)); color: #2a1d05; box-shadow: 0 10px 24px -10px rgba(245,201,119,0.7); } .pr-crown .sic { width: 24px; height: 24px; } .pr-title { font-family: var(--font-display), serif; font-size: 24px; font-weight: 800; color: #f7efdd; letter-spacing: -0.4px; } .pr-sub { font-size: 12.5px; color: rgba(244,239,226,0.55); margin-top: 3px; } .pr-grid { display: flex; flex-direction: column; gap: 11px; } .pr-tier { position: relative; border-radius: 18px; padding: 15px 15px 14px; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.09); } .pr-tier.is-feature { background: radial-gradient(120% 80% at 50% 0%, rgba(245,201,119,0.14), transparent 60%), rgba(245,201,119,0.04); border-color: rgba(245,201,119,0.45); box-shadow: 0 14px 34px -18px rgba(245,201,119,0.5); } .pr-badge { position: absolute; top: -9px; left: 15px; font-size: 10px; font-weight: 900; letter-spacing: 1.5px; color: #2a1d05; padding: 3px 10px; border-radius: 999px; background: linear-gradient(135deg, var(--gold-soft, #f5d878), var(--gold, #e5c46a)); } .pr-tier-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 11px; } .pr-tier-name { font-family: var(--font-display), serif; font-size: 19px; font-weight: 700; color: #f7efdd; } .pr-tier-price b { font-size: 22px; font-weight: 800; color: var(--gold, #e5c46a); } .pr-tier-price span { font-size: 12px; color: rgba(244,239,226,0.5); margin-left: 3px; } .pr-feats { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; } .pr-feats li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: rgba(244,239,226,0.82); line-height: 1.35; } .pr-feats li .sic { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; color: var(--gold, #e5c46a); } .pr-feats li b { color: #f7efdd; font-weight: 800; } .pr-cta { width: 100%; padding: 12px; border-radius: 13px; cursor: pointer; font-family: var(--font-app), sans-serif; font-size: 14.5px; font-weight: 800; border: 1px solid transparent; transition: transform 0.12s ease; } .pr-cta:active { transform: scale(0.98); } .pr-cta[disabled] { opacity: 0.55; cursor: default; } .pr-cta-free { background: rgba(255,255,255,0.05); color: #f4efe2; border-color: rgba(255,255,255,0.12); } .pr-cta-pro { background: linear-gradient(135deg, var(--gold-soft, #f5d878), var(--gold, #e5c46a)); color: #2a1d05; box-shadow: 0 10px 24px -12px rgba(245,201,119,0.8); } .pr-cta-premium { background: rgba(245,201,119,0.10); color: var(--gold, #e5c46a); border-color: rgba(245,201,119,0.45); } .pr-foot { text-align: center; font-size: 11.5px; color: rgba(244,239,226,0.45); margin-top: 14px; } /* v150 ★ Settings-Feinschliff: native Checkboxen in Gold statt Weiß */ #settingsModal input[type="checkbox"] { accent-color: var(--gold, #e5c46a); width: 18px; height: 18px; cursor: pointer; } /* v151 ★ Family-Sperre (nur Premium) — Sperr-Ansicht */ .fam-locked { display: none; flex-direction: column; align-items: center; text-align: center; gap: 12px; margin: 8vh 18px 0; padding: 28px 22px 26px; border-radius: 24px; background: radial-gradient(120% 80% at 50% 0%, rgba(245,201,119,0.14), transparent 60%), linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.012)); border: 1px solid rgba(245,201,119,0.22); } .fam-lock-ic { width: 58px; height: 58px; border-radius: 17px; margin-bottom: 2px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--gold-soft, #f5d878), var(--gold, #e5c46a)); color: #2a1d05; box-shadow: 0 12px 28px -12px rgba(245,201,119,0.7); } .fam-lock-ic .sic { width: 28px; height: 28px; } .fam-lock-title { font-family: var(--font-display), serif; font-size: 22px; font-weight: 800; color: #f7efdd; } .fam-lock-sub { font-size: 13.5px; line-height: 1.5; color: rgba(244,239,226,0.6); max-width: 300px; } .fam-lock-cta { margin-top: 6px; padding: 13px 26px; border-radius: 14px; border: none; cursor: pointer; font-family: var(--font-app), sans-serif; font-size: 14.5px; font-weight: 800; color: #2a1d05; background: linear-gradient(135deg, var(--gold-soft, #f5d878), var(--gold, #e5c46a)); box-shadow: 0 12px 26px -12px rgba(245,201,119,0.8); } .fam-lock-cta:active { transform: scale(0.98); } /* v152 ★ Premium-Family-Insight (Anführer-Sicht) im "Heute zusammen" */ .fm-today-insights { margin-top: 10px; padding: 9px 12px; border-radius: 12px; font-size: 12.5px; font-weight: 600; color: rgba(246,239,224,0.82); background: rgba(245,201,119,0.07); border: 1px solid rgba(245,201,119,0.18); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .fm-today-insights b { color: #f7efdd; font-weight: 800; } .fm-ti-tag { font-size: 9px; font-weight: 900; letter-spacing: 1px; color: #2a1d05; padding: 2px 7px; border-radius: 999px; background: linear-gradient(135deg, var(--gold-soft, #f5d878), var(--gold, #e5c46a)); } /* ═══════════════════════════════════════════════════════════════ v153 ★ Intro: EINE Version · dunklerer Hintergrund · Sterne blinken abwechselnd ═══════════════════════════════════════════════════════════════ */ /* Neue User: Splash zeigt KEINEN Wordmark mehr → nur der Login zeigt SABR.AI (eine Version) */ html.skip-splash #splashScreen .sp-content-v96 { display: none !important; } /* FOUT-Schutz: Login-Wordmark erst sichtbar wenn Baloo 2 geladen (kein Font-/Größen-Sprung) */ .ob-wordmark { opacity: 0; transition: opacity .4s ease; } .ob-wordmark.font-ready { opacity: 1; } /* Dunklerer Hintergrund — Splash + Login/Onboarding */ .splash-v30, .splash-v30 .sp-bg-base { background: radial-gradient(130% 85% at 50% 0%, #0a1018 0%, #050a12 48%, #010307 100%) !important; } .splash-v30 .sp-bg-aurora { opacity: 0.26 !important; } .onboard-overlay { background: radial-gradient(ellipse 80% 45% at 50% 6%, rgba(229,196,106,0.06) 0%, transparent 55%), linear-gradient(180deg, #02040b 0%, #010207 55%, #000205 100%) !important; } /* Sterne blinken abwechselnd (gegenphasig + verschiedene Dauern) */ @keyframes sabrTwinkle { 0%, 100% { opacity: 0.14; } 50% { opacity: 1; } } .splash-v30 .sp-stars span, .ob-step-splash .ob-st, .ob-step-splash .ob-star-gold { animation: sabrTwinkle 3s ease-in-out infinite; will-change: opacity; } .splash-v30 .sp-stars span:nth-child(2n), .ob-step-splash .ob-st:nth-child(2n) { animation-delay: -1.5s; animation-duration: 2.4s; } .splash-v30 .sp-stars span:nth-child(3n), .ob-step-splash .ob-st:nth-child(3n) { animation-delay: -0.7s; animation-duration: 3.7s; } .splash-v30 .sp-stars span:nth-child(5n) { animation-delay: -2.2s; animation-duration: 4.3s; } /* Gold-Sterne im Login etwas kräftiger + eigener Rhythmus */ .ob-step-splash .ob-star-gold { animation-duration: 2.6s; } .ob-step-splash .ob-star-gold:nth-child(2n) { animation-delay: -1.3s; } /* ═══════════════════════════════════════════════════════════════ v154 ★ Universelle Handy-Anpassung · Desktop-Mockup-Frame nur noch auf Maus-Geräten (Frame-Queries gegatet) → jedes Handy (jede Größe/Orientierung/Foldable) nutzt das volle Vollbild-Layout · Safe-Area: Header klärt Notch/Dynamic Island, Nav klärt Home-Indicator (nur Touch-Geräte, damit der Desktop-Frame seine Optik behält) ═══════════════════════════════════════════════════════════════ */ @media (hover: none), (pointer: coarse) { .app-header { padding-top: max(env(safe-area-inset-top), 12px) !important; } .bottom-nav { bottom: max(env(safe-area-inset-bottom), 12px) !important; } /* Letzter Content nicht hinter der schwebenden Nav verstecken */ .pages { padding-bottom: calc(100px + env(safe-area-inset-bottom)) !important; } } /* ═══════════════════════════════════════════════════════════════ v156 ★ SABR STORYS — Gebets-Storys oben auf Home (Phase 1) ═══════════════════════════════════════════════════════════════ */ .sabr-stories { display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden; padding: 6px 2px 10px; margin: 4px 0 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .sabr-stories::-webkit-scrollbar { display: none; } .story-circle, .story-add { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; padding: 0; width: 70px; } .story-nm { font-family: var(--font-app), sans-serif; font-size: 11.5px; font-weight: 600; color: rgba(244,239,226,0.75); max-width: 68px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .story-ring { width: 64px; height: 64px; border-radius: 50%; padding: 3px; background: conic-gradient(var(--gold, #e5c46a) calc(var(--p) * 1%), rgba(255,255,255,0.13) 0); display: flex; align-items: center; justify-content: center; transition: transform .12s ease; } .story-circle:active .story-ring { transform: scale(0.94); } .story-circle.is-done .story-ring { background: conic-gradient(from 0deg, var(--gold-soft, #f5d878), var(--gold, #e5c46a), var(--gold-soft, #f5d878)); box-shadow: 0 0 14px -2px rgba(245,201,119,0.6); } .story-av { width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(135deg, #2a2438, #15121d); border: 2px solid #0a0d16; display: flex; align-items: center; justify-content: center; font-family: var(--font-display), serif; font-weight: 800; font-size: 22px; color: #f4efe2; } .story-circle.is-me .story-av { background: linear-gradient(135deg, var(--gold-soft, #f5d878), var(--gold, #e5c46a)); color: #2a1d05; } .story-add-circle { width: 64px; height: 64px; border-radius: 50%; border: 2px dashed rgba(245,201,119,0.4); color: var(--gold, #e5c46a); display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 300; background: rgba(245,201,119,0.05); } .story-add .story-nm { color: rgba(245,201,119,0.8); } /* ── Vollbild-Story-Viewer ── */ .story-viewer { position: fixed; inset: 0; z-index: 99990; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity .25s ease; } .story-viewer.is-open { opacity: 1; } .sv-backdrop { position: absolute; inset: 0; background: rgba(2,4,10,0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .sv-card { position: relative; z-index: 1; width: 100%; max-width: 380px; background: linear-gradient(180deg, #14111d 0%, #0b0912 100%); border: 1px solid rgba(245,201,119,0.18); border-radius: 24px; padding: 22px 18px 18px; box-shadow: 0 30px 70px -24px rgba(0,0,0,0.85); transform: translateY(12px) scale(0.98); transition: transform .3s cubic-bezier(0.16,1,0.3,1); } .story-viewer.is-open .sv-card { transform: translateY(0) scale(1); } .sv-segs { display: flex; gap: 4px; margin-bottom: 16px; } .sv-segs span { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.16); } .sv-segs span.is-on { background: var(--gold, #e5c46a); } .sv-close { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(255,255,255,0.08); color: #cfc7b6; font-size: 18px; cursor: pointer; z-index: 3; } .sv-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .sv-av { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display), serif; font-weight: 800; font-size: 20px; color: #f4efe2; background: linear-gradient(135deg, #2a2438, #15121d); } .sv-av.is-me { background: linear-gradient(135deg, var(--gold-soft, #f5d878), var(--gold, #e5c46a)); color: #2a1d05; } .sv-nm { font-family: var(--font-display), serif; font-size: 18px; font-weight: 700; color: #f7efdd; } .sv-sub { font-size: 12.5px; color: rgba(244,239,226,0.6); margin-top: 2px; } .sv-prayers { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; } .sv-prayer { display: flex; align-items: center; gap: 10px; padding: 10px 13px; border-radius: 13px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); font-size: 14px; color: rgba(244,239,226,0.55); } .sv-prayer .sic { width: 17px; height: 17px; color: rgba(244,239,226,0.3); } .sv-prayer span { flex: 1; font-weight: 700; } .sv-prayer b { font-size: 12px; font-weight: 700; color: rgba(244,239,226,0.4); } .sv-prayer.ok { background: rgba(245,201,119,0.08); border-color: rgba(245,201,119,0.22); color: #f4efe2; } .sv-prayer.ok .sic { color: var(--gold, #e5c46a); } .sv-prayer.ok b { color: var(--gold, #e5c46a); } .sv-reactbar { display: flex; justify-content: space-between; gap: 6px; margin-bottom: 9px; } .sv-react { flex: 1; padding: 9px 0; border-radius: 13px; font-size: 22px; cursor: pointer; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); transition: transform .12s ease, background .15s ease; } .sv-react:active { transform: scale(1.18); } .sv-react.is-on { background: rgba(245,201,119,0.18); border-color: rgba(245,201,119,0.5); transform: scale(1.08); } .sv-react-hint { text-align: center; font-size: 11.5px; color: rgba(245,201,119,0.7); } .sv-prev, .sv-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer; background: rgba(255,255,255,0.06); color: #f4efe2; font-size: 22px; line-height: 1; } .sv-prev { left: -6px; } .sv-next { right: -6px; } .sv-prev[disabled], .sv-next[disabled] { opacity: 0; pointer-events: none; } /* ═══════════════════════════════════════════════════════════════ v157 ★ Freunde verbinden — Modal + Story-Reaktionen anderer ═══════════════════════════════════════════════════════════════ */ .addfr-modal { position: fixed; inset: 0; z-index: 99995; display: flex; align-items: flex-end; justify-content: center; opacity: 0; transition: opacity .25s ease; } .addfr-modal.is-open { opacity: 1; } .addfr-backdrop { position: absolute; inset: 0; background: rgba(2,4,10,0.8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .addfr-sheet { position: relative; z-index: 1; width: 100%; max-width: 440px; background: linear-gradient(180deg, #14111d, #0b0912); border: 1px solid rgba(245,201,119,0.18); border-radius: 26px 26px 0 0; padding: 24px 20px calc(env(safe-area-inset-bottom, 0px) + 24px); transform: translateY(24px); transition: transform .3s cubic-bezier(0.16,1,0.3,1); } .addfr-modal.is-open .addfr-sheet { transform: translateY(0); } .addfr-close { position: absolute; top: 14px; right: 16px; width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(255,255,255,0.07); color: #cfc7b6; font-size: 18px; cursor: pointer; } .addfr-title { font-family: var(--font-display), serif; font-size: 22px; font-weight: 800; color: #f7efdd; } .addfr-sub { font-size: 13px; color: rgba(244,239,226,0.6); margin: 4px 0 8px; line-height: 1.45; } .addfr-lbl { font-size: 10.5px; font-weight: 800; letter-spacing: 1.6px; color: rgba(245,201,119,0.78); margin: 16px 0 8px; } .addfr-mycode { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-radius: 14px; cursor: pointer; border: 1px dashed rgba(245,201,119,0.4); background: rgba(245,201,119,0.06); color: var(--gold, #e5c46a); font-family: var(--font-display), serif; font-weight: 800; font-size: 24px; letter-spacing: 4px; } .addfr-mycode span { font-family: var(--font-app), sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0; color: rgba(245,201,119,0.85); } .addfr-row { display: flex; gap: 8px; } .addfr-input { flex: 1; padding: 13px 14px; border-radius: 13px; min-width: 0; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); color: #f4efe2; font-size: 16px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; } .addfr-input::placeholder { letter-spacing: 1px; color: rgba(244,239,226,0.35); } .addfr-add { padding: 0 18px; border-radius: 13px; border: none; cursor: pointer; background: linear-gradient(135deg, var(--gold-soft, #f5d878), var(--gold, #e5c46a)); color: #2a1d05; font-weight: 800; font-size: 14px; white-space: nowrap; } .addfr-list { display: flex; flex-wrap: wrap; gap: 7px; } .addfr-chip { padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,0.05); border: 1px solid rgba(245,201,119,0.2); font-size: 12.5px; font-weight: 700; color: #f4efe2; } .sv-others { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 10px; } .sv-others span { font-size: 11.5px; font-weight: 700; color: rgba(244,239,226,0.72); background: rgba(255,255,255,0.05); padding: 4px 9px; border-radius: 999px; } /* ═══════════════════════════════════════════════════════════════ v158 ★ UI/UX-Durchgang ═══════════════════════════════════════════════════════════════ */ /* 1) Bottom-Nav bündig am unteren Rand — KEINE Lücke */ .bottom-nav.bottom-nav { left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; border-radius: 22px 22px 0 0 !important; padding-left: 10px !important; padding-right: 10px !important; padding-top: 8px !important; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px) !important; } /* Bayān (Home) + Mekka-Zähler (Salat) komplett entfernen */ .bayan-card { display: none !important; } .salat-mekka-hero { display: none !important; } /* 2) Eigene Story = sauberes Erstellungsfenster */ .sv-hint-top { font-size: 12px; color: rgba(245,201,119,0.78); text-align: center; margin: -4px 0 14px; line-height: 1.4; } .sv-open { cursor: pointer; width: 100%; text-align: left; background: rgba(245,201,119,0.06) !important; border-color: rgba(245,201,119,0.26) !important; color: #f4efe2 !important; transition: transform .12s ease; } .sv-open:active { transform: scale(0.99); } .sv-cam { display: flex; align-items: center; justify-content: center; flex: 0 0 27px !important; width: 27px; height: 27px; border-radius: 8px; color: #2a1d05; background: linear-gradient(135deg, var(--gold-soft, #f5d878), var(--gold, #e5c46a)); } .sv-cam .sic { width: 15px; height: 15px; } .sv-open b { color: var(--gold, #e5c46a) !important; font-weight: 800; } .sv-photo { width: 36px; height: 36px; border-radius: 9px; object-fit: cover; margin-left: auto; border: 1px solid rgba(245,201,119,0.35); } /* 3) Ustādh-Tawba-Intro: Logo größer · Lade-Punkte + Seiten-Sterne tiefer */ .ti96-name { font-size: 56px !important; } .ti96-dots { bottom: calc(env(safe-area-inset-bottom, 0px) + 72px) !important; } .tawba-intro-v22 .ti22-orn { bottom: 50px !important; } /* ═══════════════════════════════════════════════════════════════ v159 ★ Story Tick/Foto entkoppelt · Demo-Profil · +-zentriert · Tawba-Eyebrow ═══════════════════════════════════════════════════════════════ */ /* Eigene Story: Gebets-Zeile — Tick links (abschließen) · Kamera rechts (Foto, mehrfach) */ .sv-prow { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 14px; margin-bottom: 8px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); } .sv-prow.ok { background: rgba(245,201,119,0.08); border-color: rgba(245,201,119,0.22); } .sv-tick { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 2px solid rgba(255,255,255,0.22); background: transparent; color: #2a1d05; display: flex; align-items: center; justify-content: center; transition: transform .12s ease; } .sv-tick:active { transform: scale(0.9); } .sv-tick.on { background: linear-gradient(135deg, var(--gold-soft, #f5d878), var(--gold, #e5c46a)); border-color: transparent; } .sv-tick .sic { width: 16px; height: 16px; } .sv-pmid { flex: 1; min-width: 0; } .sv-pname { font-size: 14px; font-weight: 700; color: #f4efe2; } .sv-pname em { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--gold, #e5c46a); } .sv-thumbs { display: flex; gap: 5px; margin-top: 6px; flex-wrap: wrap; } .sv-thumbs img { width: 38px; height: 38px; border-radius: 8px; object-fit: cover; border: 1px solid rgba(245,201,119,0.3); } .sv-camadd { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 11px; cursor: pointer; border: none; display: flex; align-items: center; justify-content: center; color: #2a1d05; transition: transform .12s ease; background: linear-gradient(135deg, var(--gold-soft, #f5d878), var(--gold, #e5c46a)); } .sv-camadd:active { transform: scale(0.94); } .sv-camadd .sic { width: 18px; height: 18px; } /* Demo-Beispielfoto im Freundes-Viewer */ .sv-demo-photo { height: 120px; border-radius: 14px; margin-bottom: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: linear-gradient(135deg, #2a2438, #14111d); border: 1px solid rgba(245,201,119,0.2); } .sv-dp-em { font-size: 38px; } .sv-demo-photo b { font-size: 11.5px; font-weight: 700; color: rgba(245,201,119,0.72); letter-spacing: 0.5px; } /* "+"-Symbol im Freunde-Kreis perfekt zentriert (SVG) */ .story-add-circle svg { width: 26px; height: 26px; display: block; } /* Ustādh-Tawba-Intro: Eyebrow-Schriftzug größer */ .ti45-eyebrow { font-size: 14px !important; letter-spacing: 4.5px !important; } /* ═══════════════════════════════════════════════════════════════ v160 ★ Ustādh-Tawba-Chat — Premium-Restyle (Spec) ═══════════════════════════════════════════════════════════════ */ #page-ustadh .ustadh-chat { background: radial-gradient(120% 50% at 50% 0%, #122031 0%, #0b1320 45%, #080d16 100%) !important; } /* Gold-Glow oben mittig hinter dem Header */ #page-ustadh .uc-bg-glow { background: radial-gradient(60% 50% at 50% 0%, rgba(240,183,64,0.16), transparent 70%) !important; opacity: 1 !important; } #page-ustadh .uc-bg-stars span { background: #fff !important; } /* ── HEADER ── */ #page-ustadh .uc-header { background: linear-gradient(180deg, rgba(18,32,49,0.92), rgba(11,19,32,0.6)) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border-bottom: 1px solid rgba(245,205,120,0.08) !important; padding: 10px 12px !important; gap: 11px !important; align-items: center !important; } #page-ustadh .uc-back, #page-ustadh .uc-more { width: 40px !important; height: 40px !important; border-radius: 13px !important; background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(245,205,120,0.10) !important; color: #eef2f6 !important; display: flex !important; align-items: center; justify-content: center; } /* Avatar: Gold-Conic-Ring außen + dunkler Kern */ #page-ustadh .uc-av-pro { width: 46px !important; height: 46px !important; border-radius: 50% !important; padding: 2.5px !important; background: conic-gradient(from 210deg, #f5cd78, #f0b740, #7a5512, #f5cd78) !important; box-shadow: 0 0 16px -4px rgba(240,183,64,0.5) !important; flex-shrink: 0; } #page-ustadh .uc-av-pro svg { width: 100% !important; height: 100% !important; display: block !important; border-radius: 50%; } #page-ustadh .uc-info { flex: 1; min-width: 0; } #page-ustadh .uc-name { font-family: var(--font-app), sans-serif !important; font-size: 16px !important; font-weight: 800 !important; letter-spacing: -0.3px !important; color: #f4f1e6 !important; display: flex !important; align-items: center; gap: 6px; } #page-ustadh .uc-verified { display: inline-flex; align-items: center; flex-shrink: 0; } #page-ustadh .uc-verified svg { filter: drop-shadow(0 0 5px rgba(240,183,64,0.5)); } #page-ustadh .uc-status { font-size: 12px !important; color: rgba(238,242,246,0.55) !important; display: flex; align-items: center; gap: 6px; margin-top: 1px; } #page-ustadh .uc-status .uc-dot, #page-ustadh .uc-dot-teal { width: 7px !important; height: 7px !important; border-radius: 50% !important; background: #4ade80 !important; box-shadow: 0 0 8px rgba(74,222,128,0.8) !important; } #page-ustadh .uc-online { color: #4ade80 !important; font-weight: 700 !important; } /* ── HEUTE-Trenner ── */ #page-ustadh .uc-date-chip, #page-ustadh .uc45-datemark { text-align: center !important; font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; color: rgba(238,242,246,0.32) !important; background: none !important; border: none !important; margin: 6px auto 14px !important; padding: 0 !important; } /* ── Bismillah-Opener + Gold-Linie ── */ #page-ustadh .uc45-bism { text-align: center !important; font-family: 'Amiri', serif !important; direction: rtl; font-size: 17px !important; color: #f5cd78 !important; margin: 6px auto 6px !important; } #page-ustadh .uc45-bism::after { content: ''; display: block; width: 40px; height: 2px; margin: 9px auto 18px; background: linear-gradient(90deg, transparent, #f0b740, transparent); border-radius: 2px; } /* ── Coach-Bubble (eingehend) ── */ #page-ustadh .chat-msg.bot { background: linear-gradient(180deg, #162132, #131c2a) !important; border: 1px solid rgba(255,255,255,0.05) !important; border-radius: 22px 22px 22px 7px !important; box-shadow: 0 8px 22px -12px rgba(0,0,0,0.6) !important; color: #eef2f6 !important; font-size: 14.5px !important; line-height: 1.55 !important; padding: 12px 15px !important; max-width: 80% !important; } #page-ustadh .chat-msg.bot .cm-body { color: #eef2f6 !important; } #page-ustadh .chat-msg.bot .uc45-sub { color: rgba(238,242,246,0.6) !important; } #page-ustadh .uc-msg-avatar, #page-ustadh .uc45-msg-av { width: 26px !important; height: 26px !important; border-radius: 50% !important; flex-shrink: 0; background: conic-gradient(from 210deg, #f5cd78, #f0b740, #7a5512, #f5cd78) !important; } /* ── User-Bubble (ausgehend) ── */ #page-ustadh .chat-msg.user { background: linear-gradient(160deg, #f3c463, #e3a52f) !important; color: #241a07 !important; font-weight: 600 !important; border-radius: 22px 22px 7px 22px !important; border: none !important; box-shadow: 0 10px 28px rgba(240,183,64,0.28) !important; padding: 11px 15px !important; max-width: 80% !important; font-size: 14.5px !important; } /* Zeitstempel */ #page-ustadh .cm-time { font-size: 9.5px !important; color: rgba(238,242,246,0.32) !important; margin-top: 4px !important; } #page-ustadh .chat-msg.user .cm-time { color: rgba(36,26,7,0.5) !important; } /* ── Typing-Indikator (gold, bobbing) ── */ #page-ustadh .uc-typing { display: flex !important; gap: 5px !important; padding: 12px 15px !important; } #page-ustadh .uc-typing span { width: 8px !important; height: 8px !important; border-radius: 50% !important; background: #f0b740 !important; animation: ucBob 1.2s ease-in-out infinite !important; } #page-ustadh .uc-typing span:nth-child(2) { animation-delay: 0.2s !important; } #page-ustadh .uc-typing span:nth-child(3) { animation-delay: 0.4s !important; } @keyframes ucBob { 0%,100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(-5px); opacity: 1; } } /* ── Ayah-Karte ── */ #page-ustadh .uc-ayah { background: linear-gradient(165deg, rgba(240,183,64,0.10), rgba(240,183,64,0.02)); border: 1px solid rgba(240,183,64,0.22); border-radius: 20px; padding: 15px; margin: 8px 0; } #page-ustadh .uc-ayah-tag { font-size: 10.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #f0b740; display: flex; align-items: center; gap: 6px; } #page-ustadh .uc-ayah-ar { font-family: 'Amiri', serif; direction: rtl; font-size: 21px; color: #f5cd78; margin: 12px 0 8px; line-height: 1.7; } #page-ustadh .uc-ayah-tr { font-style: italic; font-size: 13.5px; color: rgba(238,242,246,0.7); } /* ── Eingabeleiste (floating Pille) ── */ #page-ustadh .uc-input-row, #page-ustadh .uc45-input-row { background: none !important; border: none !important; padding: 8px 12px calc(env(safe-area-inset-bottom, 0px) + 10px) !important; } #page-ustadh .uc-input-wrap, #page-ustadh .uc45-input-wrap { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(245,205,120,0.16) !important; border-radius: 26px !important; box-shadow: 0 8px 24px -14px rgba(0,0,0,0.7) !important; } #page-ustadh #ucInput { color: #eef2f6 !important; font-size: 15px !important; } #page-ustadh #ucInput::placeholder { color: rgba(238,242,246,0.4) !important; } #page-ustadh .uc45-plus { width: 38px !important; height: 38px !important; border-radius: 50% !important; background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(245,205,120,0.16) !important; color: #f0b740 !important; } #page-ustadh .uc-mic, #page-ustadh .uc45-mic { color: rgba(238,242,246,0.5) !important; background: none !important; } #page-ustadh .uc-send, #page-ustadh .uc45-send { width: 40px !important; height: 40px !important; border-radius: 50% !important; background: linear-gradient(160deg, #f5cd78, #f0b740) !important; color: #241a07 !important; box-shadow: 0 8px 22px -8px rgba(240,183,64,0.6) !important; border: none !important; } /* v160b ★ Tawba-Chat Feinschliff */ /* Teal-Avatar-Badge entfernen (Status zeigt der grüne Online-Punkt) */ #page-ustadh .uc-avatar::after { display: none !important; } /* Bismillah ohne Box — clean zentriert (Spec) */ #page-ustadh .uc45-bism { background: none !important; border: none !important; padding: 0 !important; width: auto !important; box-shadow: none !important; } /* ═══════════════════════════════════════════════════════════════ v161 ★ Tawba-Chat: clean wie Referenz (Vorlagen-Chips weg, größer/luftiger) ═══════════════════════════════════════════════════════════════ */ /* Mood-Vorlagen-Chips komplett raus → cleaner Chat wie im Screenshot */ #page-ustadh .uc46-feed { display: none !important; } #page-ustadh .uc-empty-state, #page-ustadh .uc-empty-v96 { display: none !important; } /* Bubbles größer + luftiger (nicht eng) */ #page-ustadh .chat-msg.bot, #page-ustadh .chat-msg.user { font-size: 15.5px !important; line-height: 1.6 !important; padding: 14px 17px !important; max-width: 84% !important; } #page-ustadh .uc45-greeting .cm-body { font-size: 16px !important; } #page-ustadh .uc45-sub { margin-top: 6px !important; font-size: 15px !important; color: rgba(238,242,246,0.62) !important; font-style: normal !important; } #page-ustadh .uc-msg-row { margin-bottom: 16px !important; gap: 10px !important; } #page-ustadh .uc45-bism { font-size: 19px !important; margin-top: 14px !important; } #page-ustadh .uc-date-chip, #page-ustadh .uc45-datemark { margin: 8px auto 18px !important; } /* Eingabeleiste etwas größer/präsenter */ #page-ustadh #ucInput { font-size: 15.5px !important; } #page-ustadh .uc-send, #page-ustadh .uc45-send { width: 44px !important; height: 44px !important; } #page-ustadh .uc45-plus { width: 40px !important; height: 40px !important; } /* ═══════════════════════════════════════════════════════════════ v162 ★ Story-System neu — Vollbild-Viewer (Instagram/BeReal-Style) Pro Bild swipebar · Reaktion pro Bild · gesehene Story = grauer Ring ═══════════════════════════════════════════════════════════════ */ /* Gesehene Freundes-Story → Ring entsättigt (wie IG) */ .story-circle.is-seen .story-ring { background: conic-gradient(rgba(255,255,255,0.22) 100%, rgba(255,255,255,0.22) 0) !important; box-shadow: none !important; } .story-circle.is-seen .story-av { opacity: 0.92; } /* Vollbild-Viewer füllt den ganzen Screen (überschreibt die Card-Zentrierung) */ .sv-fs { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: flex; flex-direction: column; background: #08060e; overflow: hidden; opacity: 0; transform: scale(1.03); transition: opacity .25s ease, transform .3s cubic-bezier(0.16,1,0.3,1); padding: calc(env(safe-area-inset-top, 0px) + 10px) 0 calc(env(safe-area-inset-bottom, 0px) + 4px); } .story-viewer.is-open .sv-fs { opacity: 1; transform: scale(1); } /* Segment-Balken oben */ .sv-fs .sv-segs { gap: 4px; padding: 0 12px; margin-bottom: 12px; } .sv-fs .sv-segs span { position: relative; height: 3px; border-radius: 3px; background: rgba(255,255,255,0.24); overflow: hidden; } .sv-fs .sv-segs span.seen { background: rgba(255,255,255,0.85); } .sv-fs .sv-segs span.is-on { background: rgba(255,255,255,0.24); } /* v163: Füllbalken läuft automatisch durch (Instagram-Style) */ .sv-fs .sv-segs span.is-on .sv-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 3px; background: var(--gold-soft, #f5d878); box-shadow: 0 0 8px -1px rgba(245,201,119,0.65); animation-name: svFill; animation-timing-function: linear; animation-fill-mode: forwards; } @keyframes svFill { from { width: 0; } to { width: 100%; } } /* Kopfzeile (Avatar · Name · Schließen) */ .sv-topbar { display: flex; align-items: center; gap: 11px; padding: 0 14px 12px; position: relative; z-index: 4; } .sv-topbar .sv-av { width: 40px; height: 40px; font-size: 17px; box-shadow: 0 0 0 2px rgba(245,201,119,0.5); } .sv-topbar .sv-id { flex: 1; min-width: 0; } .sv-topbar .sv-nm { font-family: var(--font-display), serif; font-size: 16px; font-weight: 700; color: #f7efdd; line-height: 1.15; } .sv-topbar .sv-sub { font-size: 12px; color: rgba(244,239,226,0.66); margin-top: 1px; } .sv-topbar .sv-close { position: static; width: 32px; height: 32px; flex-shrink: 0; } /* v325 ★ Melden-Button (Apple 1.2 / UGC) — dezent, neben dem Schließen */ .sv-report { position: static; width: 32px; height: 32px; flex-shrink: 0; border: none; border-radius: 50%; background: rgba(255,255,255,0.08); color: rgba(244,239,226,0.72); font-size: 15px; line-height: 1; cursor: pointer; z-index: 4; display: flex; align-items: center; justify-content: center; } .sv-report:active { background: rgba(229,115,115,0.22); color: #ffb4b4; } /* Tap-Zonen: links zurück (schmal) · rechts weiter (breit) */ .sv-tapzone { position: absolute; top: 62px; bottom: 132px; z-index: 3; background: none; border: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } .sv-tap-prev { left: 0; width: 32%; } .sv-tap-next { right: 0; width: 68%; } /* Der eigentliche Slide (Foto oder Gradient) */ .sv-fs .sv-slide { position: relative; flex: 1; margin: 0 12px; border-radius: 20px; overflow: hidden; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 -90px 100px -50px rgba(0,0,0,0.72); } .sv-slide-em { font-size: 64px; filter: drop-shadow(0 10px 28px rgba(0,0,0,0.55)); } .sv-slide-tag { position: absolute; left: 14px; bottom: 14px; z-index: 2; padding: 7px 13px; border-radius: 999px; font-size: 13px; font-weight: 800; color: #fff; background: rgba(8,6,14,0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.14); } /* Status-Slide (echter Freund ohne Foto-Sync) */ .sv-fs .sv-slide-status { background: linear-gradient(170deg, #141d2e, #0a0d16); box-shadow: none; align-items: stretch; padding: 18px; } .sv-fs .sv-slide-status .sv-prayers { margin: auto 0; width: 100%; } /* Reaktionsleiste unten */ .sv-bottom { padding: 14px 16px 4px; position: relative; z-index: 4; } .sv-fs .sv-reactbar { gap: 8px; margin-bottom: 8px; } .sv-fs .sv-react { padding: 11px 0; font-size: 24px; background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); } .sv-fs .sv-react-hint { color: rgba(245,201,119,0.78); font-size: 12px; } /* ═══════════════════════════════════════════════════════════════ v164 ★ Ustādh-Tawba-Chat — Handy-Feinschliff Bubbles hug-content (kein breiter Klotz) · Header-Avatar Mond-Emoji ohne Gold-Ring & zentriert · Coach-Nachrichten-Avatar = Mond (statt ت) · Verifizierungs-Haken crisp · Home-Button · Kreise perfekt rund ═══════════════════════════════════════════════════════════════ */ /* 1) BUBBLES: an Inhalt anpassen — der Übeltäter war flex:1 (→ volle Breite) */ #page-ustadh .uc-msg-row .chat-msg.bot, #page-ustadh .chat-msg.bot, #page-ustadh .chat-msg.user { flex: 0 1 auto !important; width: fit-content !important; max-width: 80% !important; } #page-ustadh .uc-msg-row { align-items: flex-end !important; max-width: 100% !important; } #page-ustadh .uc-msg-row.user-row { justify-content: flex-end !important; } /* 2) HEADER-AVATAR: dunkler runder Kreis + Mond-Emoji · KEIN Gold-Ring · zentriert */ #page-ustadh .uc-avatar.uc-av-emoji { width: 44px !important; height: 44px !important; flex: 0 0 44px !important; aspect-ratio: 1 / 1 !important; border-radius: 50% !important; padding: 0 !important; background: radial-gradient(120% 120% at 32% 26%, #1d2c45, #0d1626) !important; border: 1px solid rgba(245,205,120,0.22) !important; box-shadow: none !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 23px !important; line-height: 1 !important; text-align: center; overflow: hidden; animation: none !important; } #page-ustadh .uc-avatar.uc-av-emoji::after { display: none !important; } /* kein Teal-Punkt */ /* 3) VERIFIZIERUNGS-HAKEN: crisp (kein Blur-Glow), sauber neben dem Namen */ #page-ustadh .uc-verified { display: inline-flex !important; align-items: center !important; margin-left: 5px !important; flex-shrink: 0 !important; } #page-ustadh .uc-verified svg { filter: none !important; display: block !important; } /* 4) COACH-NACHRICHTEN-AVATAR: runder dunkler Kreis + Mond-Emoji statt ت-Buchstabe */ #page-ustadh .uc-msg-avatar, #page-ustadh .uc45-msg-av { width: 30px !important; height: 30px !important; flex: 0 0 30px !important; aspect-ratio: 1 / 1 !important; border-radius: 50% !important; padding: 0 !important; background: radial-gradient(120% 120% at 32% 26%, #1d2c45, #0d1626) !important; border: 1px solid rgba(245,205,120,0.18) !important; box-shadow: none !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden; animation: none !important; } #page-ustadh .uc-msg-avatar::after, #page-ustadh .uc45-msg-av::after { content: '🌙' !important; font-size: 15px; line-height: 1; } #page-ustadh .uc-msg-avatar svg, #page-ustadh .uc45-msg-av svg { display: none !important; } /* altes ت/SVG raus */ /* 5) INTRO: die 3 Punkte + die rotierenden Ornamente WEITER nach unten */ .ti96-dots { bottom: calc(env(safe-area-inset-bottom, 0px) + 38px) !important; } .tawba-intro-v22 .ti22-orn { bottom: 22px !important; } /* ═══════════════════════════════════════════════════════════════════════ v165 ★ USTĀDH-TAWBA-CHAT — Referenz-genauer Rebuild (Screenshot = Quelle) FIXES (alles auf gemessener Evidenz, keine Annahmen): A) HOME-BUTTON war TOT: setupUstadh() läuft nie (window-lookup schlägt fehl) → der Klick-Handler wurde nie gebunden. Fix: data-page="home" im HTML nutzt den globalen Delegations-Handler (wie die Bottom-Nav). Verifiziert. B) VERSCHWENDETER PLATZ: Eingabeleiste war position:sticky + bottom:70px → schwebte ~60px über der Nav (toter Streifen). + toter top:56px-Versatz für den hier ausgeblendeten Global-Header. Beides entfernt. C) Header clean: Zurück = klarer Chevron, Avatar = Gold-Ring + Halbmond, 3-Punkte-Menü + Extra-Icon raus. ═══════════════════════════════════════════════════════════════════════ */ /* ── A+B) LAYOUT: voller vertikaler Raum, Inhalt bis knapp über die Nav ── */ #page-ustadh.page.active, #page-ustadh.active { top: 0 !important; /* toten 56px-Versatz oben zurückholen */ bottom: calc(var(--nav-h, 78px) + env(safe-area-inset-bottom) + 4px) !important; background: radial-gradient(120% 55% at 50% 0%, #122031 0%, #0b1320 45%, #080d16 100%) !important; } /* Header bündig oben (Notch via eigene Safe-Area), nicht doppelt versetzt */ #page-ustadh .uc-header { padding-top: max(env(safe-area-inset-top), 12px) !important; flex-shrink: 0 !important; } /* Chat-Fläche füllt den ganzen Raum zwischen Header und Eingabe */ #page-ustadh .uc-chat-box { flex: 1 1 auto !important; min-height: 0 !important; } /* Eingabeleiste sitzt JETZT direkt über der Nav — kein sticky-Lift mehr */ #page-ustadh .uc-input-row, #page-ustadh.active .uc-input-row { position: relative !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; flex-shrink: 0 !important; padding: 10px 12px 12px !important; /* kleiner Abstand zur Nav = die padding-bottom */ } /* ── C) HEADER-AVATAR: Gold-Glanz-Ring (conic) + cleaner Halbmond ── */ #page-ustadh .uc-avatar.uc-av-moon { width: 46px !important; height: 46px !important; flex: 0 0 46px !important; aspect-ratio: 1 / 1 !important; border-radius: 50% !important; padding: 2px !important; /* = Ringdicke */ background: conic-gradient(from 215deg, #f5cd78, #f0b740 22%, #8a6520 48%, #f5cd78 74%, #f0b740 100%) !important; box-shadow: 0 0 0 1px rgba(245,205,120,0.20), 0 4px 16px -5px rgba(240,183,64,0.55) !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: visible !important; animation: none !important; font-size: 0 !important; line-height: 0 !important; } #page-ustadh .uc-avatar.uc-av-moon .uc-av-disc { width: 100% !important; height: 100% !important; border-radius: 50% !important; background: radial-gradient(135% 135% at 32% 26%, #1b2a44 0%, #0c1424 100%) !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; } #page-ustadh .uc-avatar.uc-av-moon .uc-av-disc svg { display: block !important; } #page-ustadh .uc-avatar.uc-av-moon::after, #page-ustadh .uc-avatar.uc-av-moon::before { display: none !important; } /* Coach-Nachrichten-Avatar: gleicher dunkler Kreis + gold-Halbmond (konsistent) */ #page-ustadh .uc-msg-avatar, #page-ustadh .uc45-msg-av { width: 30px !important; height: 30px !important; flex: 0 0 30px !important; aspect-ratio: 1 / 1 !important; border-radius: 50% !important; padding: 0 !important; background: radial-gradient(135% 135% at 32% 26%, #1b2a44 0%, #0c1424 100%) !important; border: 1px solid rgba(245,205,120,0.28) !important; box-shadow: none !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; animation: none !important; } #page-ustadh .uc-msg-avatar::after, #page-ustadh .uc45-msg-av::after { content: '' !important; width: 15px !important; height: 15px !important; font-size: 0 !important; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z' fill='%23f5cd78'/%3E%3C/svg%3E") !important; } #page-ustadh .uc-msg-avatar svg, #page-ustadh .uc45-msg-av svg { display: none !important; } /* ── C) HEADER aufräumen: 3-Punkte-Menü + Extra-Icon raus, Verified crisp ── */ #page-ustadh .uc-more, #page-ustadh #ucMoreBtn, #page-ustadh .uc52-more, #page-ustadh #ucClear, #page-ustadh .uc-more-menu { display: none !important; } #page-ustadh .uc-verified { display: inline-flex !important; align-items: center !important; margin-left: 5px !important; flex-shrink: 0 !important; } #page-ustadh .uc-verified svg { filter: none !important; display: block !important; } /* ── BUBBLES: rund (Referenz ~20px) + luftig, hugt den Inhalt ── */ #page-ustadh .chat-msg.bot, #page-ustadh .uc-msg-row .chat-msg.bot { flex: 0 1 auto !important; width: fit-content !important; max-width: 84% !important; border-radius: 20px 20px 20px 7px !important; padding: 14px 17px !important; } #page-ustadh .chat-msg.user { flex: 0 1 auto !important; width: fit-content !important; max-width: 84% !important; border-radius: 20px 20px 7px 20px !important; padding: 14px 17px !important; } #page-ustadh .uc-msg-row { align-items: flex-end !important; } #page-ustadh .uc-msg-row.user-row { justify-content: flex-end !important; } /* ── FIX: „+"-Button war auf 2px gequetscht (padding:0 18px auf 40px border-box) → Padding raus, festes Quadrat, SVG mittig in voller Größe ── */ #page-ustadh .uc45-plus, #page-ustadh #ucPlusBtn { padding: 0 !important; width: 40px !important; height: 40px !important; flex: 0 0 40px !important; display: flex !important; align-items: center !important; justify-content: center !important; } #page-ustadh .uc45-plus svg, #page-ustadh #ucPlusBtn svg { width: 20px !important; height: 20px !important; flex: 0 0 20px !important; display: block !important; } /* ═══════════════════════════════════════════════════════════════════════ v166 ★ TAWBA-CHAT VEREDELUNG — ruhiger, weniger Gold, gerahmt, perfekte Kreise Wünsche des Users (Screenshot = Quelle): 1) Avatar: Gold-Ring zu stark → dezenter, eleganter, weniger Gold 2) Branding: Längsstrich über dem „a" raus (Ustādh → Ustadh) 3) Großer Rahmen-Card um die ganze Chat-Erfahrung 4) Eingabe: kreisförmiges Mikro raus → Fokus auf Text 5) Palette: dunkler, weniger helles Gold, weiche Premium-Töne 6) Hintergrund: sehr dezente Sterne (bereits gesät, hier subtil gehalten) 7) Kreise: alle perfekt rund (Send-Button war 46×40 oval → fix) 8) Stimmung: warm, ruhig, modern, menschlich — nicht steif/protzig ═══════════════════════════════════════════════════════════════════════ */ /* (5) Palette: dunkler, ruhiger Grund */ #page-ustadh.page.active, #page-ustadh.active { background: radial-gradient(125% 60% at 50% 0%, #101d2e 0%, #0a121d 45%, #060b13 100%) !important; } /* (3) GROSSER RAHMEN-CARD — umschließt Chat + Eingabe, endet knapp über der Nav */ #page-ustadh .uc-frame { flex: 1 1 auto !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; position: relative !important; z-index: 2 !important; /* über dem Sternen-Layer (z1) */ margin: 6px 13px 8px !important; /* Seiten + kleiner Abstand zur Nav */ border: 1px solid rgba(255,255,255,0.075) !important; border-radius: 26px !important; background: rgba(12,19,31,0.45) !important; /* leicht transluzent → Sterne schimmern durch */ box-shadow: 0 18px 50px -28px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.035) !important; overflow: hidden !important; /* runde Ecken clippen den Inhalt */ } #page-ustadh .uc-frame .uc-chat-box { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; padding-left: 15px !important; padding-right: 15px !important; } /* (4) Eingabezeile sitzt im Rahmen unten, transparent + feine Trennlinie */ #page-ustadh .uc-frame .uc-input-row, #page-ustadh.active .uc-frame .uc-input-row { position: relative !important; flex-shrink: 0 !important; background: transparent !important; border-top: 1px solid rgba(255,255,255,0.05) !important; padding: 9px 10px 10px !important; } /* (4) Mikrofon raus — Fokus klar auf Text-Eingabe */ #page-ustadh .uc-mic, #page-ustadh .uc45-mic { display: none !important; } /* (1) HEADER-AVATAR: kein Gold-Conic-Ring mehr → ruhiger Hairline-Rahmen */ #page-ustadh .uc-avatar.uc-av-moon { padding: 0 !important; background: rgba(255,255,255,0.035) !important; border: 1px solid rgba(255,255,255,0.11) !important; box-shadow: 0 2px 10px -5px rgba(0,0,0,0.6) !important; } #page-ustadh .uc-avatar.uc-av-moon .uc-av-disc { background: radial-gradient(135% 135% at 32% 26%, #1a2742 0%, #0c1626 100%) !important; } #page-ustadh .uc-avatar.uc-av-moon svg path { fill: #d8c8a0 !important; } /* gedämpfter, ruhiger Mond */ /* (7) Verified-Badge gedämpft (weniger helles Gold) */ #page-ustadh .uc-verified svg path:first-child { fill: #bca873 !important; } /* (1) COACH-NACHRICHTEN-AVATAR: gleicher ruhiger Look + gedämpfter Mond */ #page-ustadh .uc-msg-avatar, #page-ustadh .uc45-msg-av { border: 1px solid rgba(255,255,255,0.10) !important; background: radial-gradient(135% 135% at 32% 26%, #1a2742 0%, #0c1626 100%) !important; } #page-ustadh .uc-msg-avatar::after, #page-ustadh .uc45-msg-av::after { background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z' fill='%23d8c8a0'/%3E%3C/svg%3E") !important; } /* (5) Bismillāh + Akzente weicher / weniger Gold */ #page-ustadh .uc45-bism { color: #cdb98a !important; } #page-ustadh .uc45-bism::after { background: linear-gradient(90deg, transparent, rgba(199,168,110,0.55), transparent) !important; } #page-ustadh .uc45-name, #page-ustadh .chat-msg.bot .uc45-name { color: #d2c094 !important; } /* (5) „+"-Button gedämpft */ #page-ustadh .uc45-plus, #page-ustadh #ucPlusBtn { color: #c2a874 !important; background: rgba(255,255,255,0.035) !important; border: 1px solid rgba(255,255,255,0.09) !important; } /* (5+7) SEND-BUTTON: perfekter Kreis (war 46×40 oval — min-width:46 + height:40 hatten ihn gestaucht) → alle Dimensionen hart gesperrt + gedämpftes Gold, wenig Glow */ #page-ustadh .uc-send, #page-ustadh .uc45-send { width: 42px !important; height: 42px !important; min-width: 42px !important; max-width: 42px !important; min-height: 42px !important; max-height: 42px !important; flex: 0 0 42px !important; aspect-ratio: 1 / 1 !important; padding: 0 !important; border-radius: 50% !important; background: linear-gradient(160deg, #cdb583, #a4854b) !important; color: #221904 !important; box-shadow: 0 4px 14px -7px rgba(170,140,80,0.55) !important; border: none !important; display: flex !important; align-items: center !important; justify-content: center !important; } #page-ustadh .uc-send svg, #page-ustadh .uc45-send svg { width: 18px !important; height: 18px !important; flex: 0 0 18px !important; } /* (7) ALLE Story-Kreise garantiert perfekt rund (kein Stauchen im Flex) */ .story-ring, .story-av, .story-add-circle { aspect-ratio: 1 / 1 !important; flex-shrink: 0 !important; } /* (5) Ambient-Glow noch dezenter (weniger Gold-Schein oben) */ #page-ustadh .uc-bg-glow { background: radial-gradient(circle, rgba(210,190,150,0.05) 0%, rgba(210,190,150,0.012) 50%, transparent 75%) !important; } /* ═══════════════════════════════════════════════════════════════════════ v167 ★ TAWBA-CHAT: dunkler, einheitliche Eingabe, Mond-Emoji, ruhiger 1) Hintergrund dunkler 2) Sterne subtil 3) Header tiefer + Luft 4) Mond = 🌙-Emoji mit zartem Glow 5) Eingabe: [Feld]·[Audio]·[Senden] 6) Send-Button Slate statt Gold 7) einheitliches Button-System 8) ruhiger ═══════════════════════════════════════════════════════════════════════ */ /* (1) HINTERGRUND DUNKLER — tiefere Nachttöne, mehr Kontrast */ #page-ustadh.page.active, #page-ustadh.active { background: radial-gradient(130% 62% at 50% -2%, #0a131f 0%, #060c15 46%, #02050a 100%) !important; } #page-ustadh .uc-frame { background: rgba(9,15,25,0.52) !important; border-color: rgba(255,255,255,0.06) !important; } /* (2) STERNE — sehr subtil, klein, über die ganze Höhe (HTML säet 16 Sterne) */ #page-ustadh .uc-bg-stars span { width: 1.4px !important; height: 1.4px !important; background: rgba(228,236,248,0.5) !important; box-shadow: 0 0 3px rgba(228,236,248,0.4) !important; } #page-ustadh .uc-bg-stars span:nth-child(3n) { opacity: 0.6; } /* (3) HEADER tiefer + mehr Luft + sauberere Hierarchie */ #page-ustadh .uc-header { padding-top: max(calc(env(safe-area-inset-top) + 16px), 32px) !important; padding-bottom: 14px !important; gap: 13px !important; } /* (4) MOND-EMOJI 🌙 mit zartem warmem Glow — Akzent, kein Hauptelement */ #page-ustadh .uc-avatar.uc-av-moon { padding: 0 !important; background: rgba(255,255,255,0.03) !important; border: 1px solid rgba(255,255,255,0.09) !important; box-shadow: 0 2px 12px -5px rgba(0,0,0,0.65) !important; font-size: 0 !important; } #page-ustadh .uc-avatar.uc-av-moon .uc-av-disc { background: radial-gradient(135% 135% at 32% 26%, #18243c 0%, #0a1322 100%) !important; } #page-ustadh .uc-moon-emoji { font-size: 22px !important; line-height: 1 !important; display: block !important; filter: drop-shadow(0 0 5px rgba(245,210,150,0.45)) !important; } /* Coach-Nachrichten-Avatar: gleiches 🌙-Emoji statt SVG-Halbmond */ #page-ustadh .uc-msg-avatar::after, #page-ustadh .uc45-msg-av::after { content: '🌙' !important; background: none !important; width: auto !important; height: auto !important; font-size: 15px !important; line-height: 1 !important; filter: drop-shadow(0 0 4px rgba(245,210,150,0.4)) !important; } /* (5+6+7) EINGABE-LEISTE — ein einheitliches Bauteil: links Textfeld (flex), rechts Audio + Senden als gleich große Kreise */ #page-ustadh .uc-input-row, #page-ustadh.active .uc-input-row { display: flex !important; align-items: center !important; gap: 8px !important; padding: 9px 12px 11px !important; } #page-ustadh .uc45-plus, #page-ustadh #ucPlusBtn { display: none !important; } /* Plus-Button raus */ #page-ustadh .uc-input-wrap, #page-ustadh .uc45-input-wrap { flex: 1 1 auto !important; display: flex !important; align-items: center !important; height: 44px !important; padding: 0 16px !important; background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.09) !important; border-radius: 22px !important; box-shadow: none !important; } #page-ustadh #ucInput { width: 100% !important; background: none !important; border: none !important; color: #eef2f6 !important; font-size: 15px !important; padding: 0 !important; } #page-ustadh #ucInput::placeholder { color: rgba(238,242,246,0.4) !important; } /* Audio + Senden: identische Maße, Padding, Radius (44px-Kreise) */ #page-ustadh .uc-mic, #page-ustadh .uc45-mic, #page-ustadh .uc-send, #page-ustadh .uc45-send { display: flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; min-width: 44px !important; max-width: 44px !important; min-height: 44px !important; max-height: 44px !important; flex: 0 0 44px !important; aspect-ratio: 1 / 1 !important; padding: 0 !important; border-radius: 50% !important; } #page-ustadh .uc-mic svg, #page-ustadh .uc45-mic svg, #page-ustadh .uc-send svg, #page-ustadh .uc45-send svg { width: 20px !important; height: 20px !important; flex: 0 0 20px !important; } /* Audio = ruhiger Ghost-Button */ #page-ustadh .uc-mic, #page-ustadh .uc45-mic { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.10) !important; color: rgba(232,237,245,0.7) !important; box-shadow: none !important; } /* (6) Senden = dezentes Slate-Blau-Grau (kein Gold). Höhere Spezifität nötig: eine Altregel (#page-ustadh .uc-input-row button[aria-label*="enden"]) trifft „Senden" und färbte den Button gold (1,2,1). Hier mit button.uc45-send gleichgezogen + später in der Quelle → gewinnt, inkl. Größe (Altregel zwang 40px → Audio/Send wären ungleich). */ #page-ustadh .uc-input-row button.uc-send, #page-ustadh .uc-input-row button.uc45-send { width: 44px !important; height: 44px !important; min-width: 44px !important; max-width: 44px !important; min-height: 44px !important; max-height: 44px !important; flex: 0 0 44px !important; aspect-ratio: 1 / 1 !important; border-radius: 50% !important; padding: 0 !important; background: linear-gradient(160deg, #4b5972, #333e52) !important; color: #eaf0f8 !important; border: 1px solid rgba(255,255,255,0.08) !important; box-shadow: 0 5px 16px -9px rgba(0,0,0,0.7) !important; } /* (7) Header-Back-Button: gleiche Icon-Größe (20px), konsistenter Look */ #page-ustadh .uc-back svg { width: 20px !important; height: 20px !important; } /* ═══════════════════════════════════════════════════════════════════════ v168 ★ TAWBA-CHAT: echter Nachthimmel + klare Eingabe-Hierarchie 1) Sterne WIRKLICH sichtbar (Galaxie) + seltene Sternschnuppe 2) Rahmen transparent → Nachthimmel zieht durch die ganze Fläche 3) Mic = schlichtes Icon IM Feld (sekundär) · Senden = klare Hauptaktion 4) Send-Icon mathematisch zentriert 5) ruhige, edle Farben statt Gold ═══════════════════════════════════════════════════════════════════════ */ /* (A0) ★★ KERN-FIX: die Atmosphäre-Schicht war global per display:none !important abgeschaltet (Zeile ~10297) — DESHALB waren über alle Runden NIE Sterne sichtbar. Hier wieder einschalten (gleiche Spezifität, später in der Quelle → gewinnt). */ #page-ustadh .uc-bg-atmosphere, #page-ustadh .uc-bg-glow, #page-ustadh .uc-bg-stars, #page-ustadh .uc-bg-starfield { display: block !important; } #page-ustadh .uc-bg-atmosphere { position: absolute !important; inset: 0 !important; z-index: 1 !important; overflow: hidden !important; pointer-events: none !important; } #page-ustadh .uc-bg-stars { position: absolute !important; inset: 0 !important; display: block !important; } /* (A) RAHMEN fast transparent → Sterne/Galaxie ziehen durch die ganze Fläche */ #page-ustadh .uc-frame { background: rgba(8,13,22,0.14) !important; border-color: rgba(255,255,255,0.05) !important; box-shadow: 0 18px 50px -28px rgba(0,0,0,0.7) !important; } #page-ustadh .uc-chat-box, #page-ustadh #ucChatBox { background: transparent !important; } /* (B) STATISCHES DICHTES STERNENFELD (Galaxie-Gefühl) — sehr niedrige Deckkraft, prozentuale Positionen skalieren auf jede Bildschirmgröße */ #page-ustadh .uc-bg-starfield { position: absolute !important; inset: 0 !important; pointer-events: none !important; z-index: 0 !important; background-repeat: no-repeat !important; background-image: /* zarte kühle Nebel-Schleier für Tiefe */ radial-gradient(42% 26% at 68% 30%, rgba(96,124,196,0.055), transparent 72%), radial-gradient(36% 22% at 28% 68%, rgba(126,96,168,0.045), transparent 72%), /* dichtes Sternenfeld */ radial-gradient(1.4px 1.4px at 6% 8%, rgba(255,255,255,0.60), transparent 62%), radial-gradient(1px 1px at 13% 22%, rgba(214,226,250,0.42), transparent 62%), radial-gradient(1.2px 1.2px at 20% 5%, rgba(255,255,255,0.50), transparent 62%), radial-gradient(1px 1px at 27% 17%, rgba(206,220,248,0.38), transparent 62%), radial-gradient(1.5px 1.5px at 34% 9%, rgba(255,255,255,0.55), transparent 62%), radial-gradient(1px 1px at 41% 24%, rgba(214,226,250,0.40), transparent 62%), radial-gradient(1.1px 1.1px at 49% 6%, rgba(255,255,255,0.48), transparent 62%), radial-gradient(1px 1px at 56% 19%, rgba(206,220,248,0.36), transparent 62%), radial-gradient(1.3px 1.3px at 63% 11%, rgba(255,255,255,0.52), transparent 62%), radial-gradient(1px 1px at 71% 23%, rgba(214,226,250,0.40), transparent 62%), radial-gradient(1.4px 1.4px at 79% 7%, rgba(255,255,255,0.56), transparent 62%), radial-gradient(1px 1px at 86% 20%, rgba(206,220,248,0.36), transparent 62%), radial-gradient(1.2px 1.2px at 93% 12%, rgba(255,255,255,0.50), transparent 62%), radial-gradient(1px 1px at 9% 36%, rgba(214,226,250,0.40), transparent 62%), radial-gradient(1.3px 1.3px at 17% 47%, rgba(255,255,255,0.50), transparent 62%), radial-gradient(1px 1px at 25% 39%, rgba(206,220,248,0.34), transparent 62%), radial-gradient(1.1px 1.1px at 33% 52%, rgba(255,255,255,0.46), transparent 62%), radial-gradient(1px 1px at 44% 43%, rgba(214,226,250,0.38), transparent 62%), radial-gradient(1.4px 1.4px at 52% 55%, rgba(255,255,255,0.52), transparent 62%), radial-gradient(1px 1px at 61% 41%, rgba(206,220,248,0.34), transparent 62%), radial-gradient(1.2px 1.2px at 69% 53%, rgba(255,255,255,0.48), transparent 62%), radial-gradient(1px 1px at 77% 45%, rgba(214,226,250,0.36), transparent 62%), radial-gradient(1.3px 1.3px at 85% 57%, rgba(255,255,255,0.50), transparent 62%), radial-gradient(1px 1px at 94% 48%, rgba(206,220,248,0.34), transparent 62%), radial-gradient(1.1px 1.1px at 7% 64%, rgba(255,255,255,0.46), transparent 62%), radial-gradient(1px 1px at 16% 76%, rgba(214,226,250,0.36), transparent 62%), radial-gradient(1.3px 1.3px at 24% 67%, rgba(255,255,255,0.48), transparent 62%), radial-gradient(1px 1px at 36% 79%, rgba(206,220,248,0.32), transparent 62%), radial-gradient(1.2px 1.2px at 47% 71%, rgba(255,255,255,0.46), transparent 62%), radial-gradient(1px 1px at 58% 83%, rgba(214,226,250,0.34), transparent 62%), radial-gradient(1.3px 1.3px at 67% 73%, rgba(255,255,255,0.48), transparent 62%), radial-gradient(1px 1px at 78% 85%, rgba(206,220,248,0.32), transparent 62%), radial-gradient(1.2px 1.2px at 88% 75%, rgba(255,255,255,0.46), transparent 62%), radial-gradient(1px 1px at 12% 90%, rgba(214,226,250,0.32), transparent 62%), radial-gradient(1.1px 1.1px at 30% 93%, rgba(255,255,255,0.42), transparent 62%), radial-gradient(1px 1px at 52% 95%, rgba(206,220,248,0.30), transparent 62%), radial-gradient(1.2px 1.2px at 73% 92%, rgba(255,255,255,0.42), transparent 62%), radial-gradient(1px 1px at 90% 94%, rgba(214,226,250,0.30), transparent 62%); } /* (C) FUNKELNDE Akzent-Sterne — heller, lebendiger (inline animation-delay bleibt erhalten) */ #page-ustadh .uc-bg-stars span { width: 1.6px !important; height: 1.6px !important; background: rgba(234,242,254,0.85) !important; box-shadow: 0 0 4px rgba(210,224,250,0.5) !important; animation-name: ucStar168 !important; animation-duration: 4.6s !important; animation-timing-function: ease-in-out !important; animation-iteration-count: infinite !important; opacity: 1 !important; } #page-ustadh .uc-bg-stars span.uc-star-bright { width: 2.5px !important; height: 2.5px !important; background: #ffffff !important; box-shadow: 0 0 6px rgba(222,234,255,0.8), 0 0 13px rgba(176,198,255,0.4) !important; } @keyframes ucStar168 { 0%, 100% { opacity: 0.30; } 50% { opacity: 0.90; } } /* (D) SELTENE, LANGSAME STERNSCHNUPPE — rein atmosphärisch, kein Effekt-Feuerwerk */ #page-ustadh .uc-shooting-star { position: absolute !important; inset: 0 !important; overflow: hidden !important; pointer-events: none !important; z-index: 0 !important; } #page-ustadh .uc-shooting-star::before { content: '' !important; position: absolute !important; top: 15%; left: -10%; width: 86px; height: 1.4px; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(214,228,255,0.75) 88%, #ffffff 100%); border-radius: 2px; filter: drop-shadow(0 0 4px rgba(200,220,255,0.65)); transform: translate3d(0,0,0) rotate(17deg); opacity: 0; animation: ucShoot168 16s ease-in infinite; } @keyframes ucShoot168 { 0%, 84% { opacity: 0; transform: translate3d(0,0,0) rotate(17deg); } 86% { opacity: 0.9; } 93% { opacity: 0; transform: translate3d(340px, 150px, 0) rotate(17deg); } 100% { opacity: 0; transform: translate3d(340px, 150px, 0) rotate(17deg); } } @media (prefers-reduced-motion: reduce) { #page-ustadh .uc-shooting-star::before { animation: none !important; opacity: 0 !important; } } /* (E) EINGABE-HIERARCHIE — Senden ist die Hauptaktion. Mic liegt jetzt als schlichtes Icon IM Textfeld (sekundär, kein Kreis). */ #page-ustadh .uc-input-wrap, #page-ustadh .uc45-input-wrap { height: 46px !important; min-height: 46px !important; max-height: 46px !important; border-radius: 23px !important; padding: 0 10px 0 16px !important; gap: 0 !important; } #page-ustadh .uc-input-wrap #ucInput, #page-ustadh .uc45-input-wrap #ucInput { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; } /* Mic INNEN: schlichtes, gedämpftes Icon — kein Kreis, kein Rahmen, sekundär */ #page-ustadh .uc-input-wrap .uc-mic, #page-ustadh .uc-input-wrap .uc45-mic, #page-ustadh .uc-input-row .uc-input-wrap button.uc-mic { display: flex !important; align-items: center !important; justify-content: center !important; width: 30px !important; height: 30px !important; min-width: 30px !important; max-width: 30px !important; min-height: 30px !important; max-height: 30px !important; flex: 0 0 30px !important; aspect-ratio: 1 / 1 !important; margin: 0 0 0 4px !important; padding: 0 !important; background: none !important; border: none !important; box-shadow: none !important; border-radius: 50% !important; color: rgba(232,237,245,0.42) !important; } #page-ustadh .uc-input-wrap .uc-mic svg, #page-ustadh .uc-input-wrap .uc45-mic svg { width: 19px !important; height: 19px !important; flex: 0 0 19px !important; } #page-ustadh .uc-input-wrap .uc-mic:active { color: rgba(232,237,245,0.72) !important; } /* (F) SENDEN = klare Hauptaktion: etwas größer als das Mic-Icon, ruhiges Mondlicht-Slate (kein Gold), Icon mathematisch zentriert. Höhere Spezifität schlägt die Gold-Altregel button[aria-label*="enden"]. */ #page-ustadh .uc-input-row button.uc-send, #page-ustadh .uc-input-row button.uc45-send { display: flex !important; align-items: center !important; justify-content: center !important; width: 46px !important; height: 46px !important; min-width: 46px !important; max-width: 46px !important; min-height: 46px !important; max-height: 46px !important; flex: 0 0 46px !important; aspect-ratio: 1 / 1 !important; border-radius: 50% !important; padding: 0 !important; background: linear-gradient(155deg, #56647f 0%, #3a4660 100%) !important; color: #eef3fb !important; border: 1px solid rgba(255,255,255,0.10) !important; box-shadow: 0 9px 22px -11px rgba(72,94,140,0.62), inset 0 1px 0 rgba(255,255,255,0.07) !important; } /* Paper-Plane optisch zentrieren: das Icon zeigt nach oben-rechts (Schwerpunkt dort), darum minimal nach unten-links rücken → wirkt mittig im Kreis. */ #page-ustadh .uc-input-row button.uc-send svg, #page-ustadh .uc-input-row button.uc45-send svg { width: 20px !important; height: 20px !important; flex: 0 0 20px !important; transform: translate(-1px, 1px) !important; } /* (G) WENIGER GOLD insgesamt — User-Bubble von grellem Gold → ruhiges Champagner. (Beibehaltung des warmen User/dunkel-Coach-Kontrasts, nur entschärft.) */ #page-ustadh .chat-msg.user { background: linear-gradient(140deg, #c6b489 0%, #a8976e 100%) !important; color: #241d10 !important; box-shadow: 0 4px 14px -8px rgba(0,0,0,0.5) !important; } /* (H) Ambient-Glow von warm-gold → sehr zarter kühler Schimmer (ruhigere Nacht) */ #page-ustadh .uc-bg-glow { background: radial-gradient(circle, rgba(120,150,210,0.045) 0%, rgba(120,150,210,0.012) 50%, transparent 75%) !important; } /* ═══════════════════════════════════════════════════════════════════════ v169 ★ APP-WEITE SCHRIFT-VEREINHEITLICHUNG — ganze App wie Kalender-Feed ───────────────────────────────────────────────────────────────────── User-Wunsch: „die ganze App soll einheitlich aussehen, von der Schriftart her, am besten an den Kalender-Feed halten." Der Kalender-Titel („Disziplin") nutzt Plus Jakarta Sans (sans) — andere Seiten nutzten Fraunces (Serif) für Titel/Namen/Zahlen/Zitate → Serif/Sans-Flickenteppich. UMSETZUNG (zwei Teile): • Quelle bereinigt: alle ~80 hartkodierten „Fraunces, Georgia, serif"- Deklarationen wurden direkt im File auf Plus Jakarta Sans umgeschrieben (kein Override-Wust mehr → sauberere Struktur). • (1) hier: --font-display global auf Plus Jakarta Sans → erfasst zusätzlich alle ~25 var(--font-display, 'Fraunces'…)-Fallback-Stellen in einem Zug. Amiri (Arabisch) + Baloo 2 (SABR.AI-Logo) bleiben unangetastet. ═══════════════════════════════════════════════════════════════════════ */ /* (1) Display-Variable global auf die UI-/Kalender-Schrift umstellen. */ :root, .theme-dark, .theme-light { --font-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif !important; } /* (2) Titel/Überschriften brauchen in Plus Jakarta Sans etwas mehr Gewicht, damit sie so selbstbewusst wirken wie der Kalender-Titel „Disziplin" (900). Nur echte Titel — Zahlen/Namen/Zitate behalten ihr Gewicht. */ #brutalOverlay .pf34-week-title, #brutalOverlay .pf34-break-head, #page-family .section-title, .ach-takeover .ach-title, .fm-leaderboard-head .fm-week-title, .fm88-section-head, .fm92-gc-title, .fm92-lf-head, .ftc-title, .sdc-title, .smh-title { font-weight: 800 !important; letter-spacing: -0.01em !important; } /* ═══════════════════════════════════════════════════════════════════════ v170 ★ MEHR-HUB — dunkler Werkzeug-Tab (ersetzt Salat), Look wie Kalender Dunkle Karten + Gold-Akzente, Titel im „Disziplin"-Stil. Gebet bleibt als Karte erreichbar → nichts geht verloren. ═══════════════════════════════════════════════════════════════════════ */ #page-more { padding: 14px 16px 120px; } .more-head { margin: 6px 0 18px; } .more-title { font-family: var(--font-ui, "Plus Jakarta Sans"), sans-serif; font-size: clamp(32px, 11vw, 46px); font-weight: 800; letter-spacing: -1px; color: #f5f0e6; line-height: 1; } .more-underline { width: 46px; height: 4px; border-radius: 3px; background: var(--gold, #e0b870); margin: 10px 0 0; } .more-sub { margin-top: 12px; font-size: 13.5px; color: rgba(232,237,245,0.55); } .more-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; } .more-card { display: flex; flex-direction: column; gap: 7px; text-align: left; min-height: 116px; padding: 14px; border-radius: 18px; background: rgba(20, 26, 39, 0.92); border: 1px solid rgba(212, 180, 131, 0.16); color: #f4ede0; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.12s ease, border-color 0.2s ease, background 0.2s ease; } .more-card:active { transform: scale(0.97); border-color: rgba(212,180,131,0.34); } .more-ico { width: 40px; height: 40px; border-radius: 12px; background: rgba(212, 180, 131, 0.12); color: var(--gold, #e0b870); display: flex; align-items: center; justify-content: center; margin-bottom: 2px; } .more-ico svg { width: 21px; height: 21px; } .more-card-title { font-family: var(--font-ui, "Plus Jakarta Sans"), sans-serif; font-size: 14.5px; font-weight: 700; color: #f4ede0; letter-spacing: -0.2px; } .more-card-sub { font-size: 11.5px; line-height: 1.35; color: rgba(232, 237, 245, 0.5); margin-top: -3px; } .more-badge { margin-top: auto; font-size: 10px; font-weight: 600; letter-spacing: 0.2px; } .more-badge-free { color: rgba(232, 237, 245, 0.42); } .more-badge-soon { align-self: flex-start; color: var(--gold, #e0b870); background: rgba(212, 180, 131, 0.12); padding: 2px 8px; border-radius: 999px; } .more-card-soon { opacity: 0.82; } .more-card-soon .more-ico { color: rgba(212,180,131,0.7); } /* ═══════════════════════════════════════════════════════════════════════ v171 ★ TAWBA-STERNE: mehr Tiefe + abwechselndes Funkeln Aufbauend auf v168 (NICHT entfernen — Re-Enable-Override bleibt aktiv). Problem vorher: alle Sterne mit gleicher Dauer (4.6s) → zu gleichförmig. Hier: 7 verschiedene Dauern (organisches, abwechselndes Flackern), Parallax-Drift zweier Sternenebenen (Tiefe), pulsierendes Leuchten der hellen Sterne, zarte Farb-Variation (kühl/warm), zweite Sternschnuppe. ═══════════════════════════════════════════════════════════════════════ */ /* (1) Normale Sterne: weiches, lebendiges Funkeln (Opacity + Mini-Scale) */ #page-ustadh .uc-bg-stars span { animation-name: ucTwinkle171 !important; animation-timing-function: ease-in-out !important; animation-iteration-count: infinite !important; will-change: opacity, transform; } @keyframes ucTwinkle171 { 0%, 100% { opacity: 0.20; transform: scale(0.7); } 50% { opacity: 0.95; transform: scale(1.18); } } /* (2) Abwechselnd: 7 verschiedene Dauern → kein Gleichtakt, Nachbarsterne funkeln versetzt. Zusammen mit den inline animation-delays = lebendig. */ #page-ustadh .uc-bg-stars span:nth-child(7n+1) { animation-duration: 3.2s !important; } #page-ustadh .uc-bg-stars span:nth-child(7n+2) { animation-duration: 4.6s !important; } #page-ustadh .uc-bg-stars span:nth-child(7n+3) { animation-duration: 2.6s !important; } #page-ustadh .uc-bg-stars span:nth-child(7n+4) { animation-duration: 5.4s !important; } #page-ustadh .uc-bg-stars span:nth-child(7n+5) { animation-duration: 3.8s !important; } #page-ustadh .uc-bg-stars span:nth-child(7n+6) { animation-duration: 6.3s !important; } #page-ustadh .uc-bg-stars span:nth-child(7n) { animation-duration: 4.1s !important; } /* (3) Zarte Farb-Variation für Galaxie-Tiefe: manche kühl-blau, manche warm-gold */ #page-ustadh .uc-bg-stars span:nth-child(5n+2) { background: rgba(176,200,255,0.92) !important; box-shadow: 0 0 5px rgba(150,180,255,0.55) !important; } #page-ustadh .uc-bg-stars span:nth-child(5n+4) { background: rgba(255,231,188,0.9) !important; box-shadow: 0 0 5px rgba(228,196,140,0.5) !important; } /* (4) Helle Sterne: kräftiges, pulsierendes LEUCHTEN (Glow atmet, Stern pulsiert). MUSS nach den nth-child-Regeln stehen (gleiche Spezifität → später gewinnt). */ #page-ustadh .uc-bg-stars span.uc-star-bright { animation-name: ucBright171 !important; animation-duration: 5s !important; background: #ffffff !important; } @keyframes ucBright171 { 0%, 100% { opacity: 0.45; transform: scale(0.9); box-shadow: 0 0 5px rgba(222,234,255,0.55), 0 0 11px rgba(176,198,255,0.25); } 50% { opacity: 1; transform: scale(1.5); box-shadow: 0 0 9px rgba(255,255,255,0.95), 0 0 20px rgba(176,198,255,0.6), 0 0 36px rgba(150,180,255,0.32); } } /* (5) PARALLAX-TIEFE: zwei Sternenebenen driften sehr langsam gegenläufig. Das Auge liest die unterschiedliche Geschwindigkeit als räumliche Tiefe. */ #page-ustadh .uc-bg-starfield { animation: ucDriftFar171 90s ease-in-out infinite alternate !important; } #page-ustadh .uc-bg-stars { animation: ucDriftNear171 64s ease-in-out infinite alternate !important; } @keyframes ucDriftFar171 { from { transform: translate3d(0, 0, 0) scale(1.03); } to { transform: translate3d(-11px, 7px, 0) scale(1.06); } } @keyframes ucDriftNear171 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(9px, -6px, 0); } } /* (6) Sternschnuppen: erste etwas häufiger + zweite, andere Bahn → mehr Leben */ #page-ustadh .uc-shooting-star::before { animation-duration: 11s !important; } #page-ustadh .uc-shooting-star::after { content: ''; position: absolute; top: 40%; left: -12%; width: 64px; height: 1.2px; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(224,236,255,0.7) 86%, #ffffff 100%); border-radius: 2px; filter: drop-shadow(0 0 4px rgba(200,220,255,0.6)); transform: translate3d(0,0,0) rotate(24deg); opacity: 0; animation: ucShoot171b 19s ease-in infinite; } @keyframes ucShoot171b { 0%, 70% { opacity: 0; transform: translate3d(0,0,0) rotate(24deg); } 73% { opacity: 0.85; } 82% { opacity: 0; transform: translate3d(300px, 180px, 0) rotate(24deg); } 100% { opacity: 0; transform: translate3d(300px, 180px, 0) rotate(24deg); } } /* (7) Ruhe-Modus respektieren: kein Drift / keine Schnuppe, nur sanftes Funkeln */ @media (prefers-reduced-motion: reduce) { #page-ustadh .uc-bg-starfield, #page-ustadh .uc-bg-stars { animation: none !important; transform: none !important; } #page-ustadh .uc-shooting-star::after { animation: none !important; opacity: 0 !important; } } /* ═══════════════════════════════════════════════════════════════════════ v173 ★ FAMILY-BOARD „Wer hat heute gebetet?" — exakt ausgerichtet + krasser Bug vorher: Kopf-Buchstaben (F D A M I) saßen flush-rechts (flex), die Zeilen-Kästchen aber im Grid mit Zähler-Spalte rechts daneben → F stand NICHT über dem ersten Kästchen. Fix: Kopf UND Zeilen teilen dasselbe 4-Spalten-Grid; die 5 Kästchen + 5 Buchstaben je ein identisches 5er-Sub-Grid. ═══════════════════════════════════════════════════════════════════════ */ #page-family .fpb-card { padding: 16px 16px 14px !important; border-radius: 20px !important; } /* gemeinsames Grid: [Avatar | Name | 5 Kästchen | Zähler] */ #page-family .fpb-head, #page-family .fpb-row { display: grid !important; grid-template-columns: 32px minmax(0,1fr) 138px 34px !important; align-items: center !important; gap: 8px !important; } #page-family .fpb-head { padding: 0 6px 12px !important; } /* gleiche Seiten-Einrückung wie die Zeilen → Buchstaben exakt über Kästchen */ #page-family .fpb-title { grid-column: 1 / 3 !important; font-family: var(--font-ui) !important; font-weight: 800 !important; font-size: 16px !important; letter-spacing: -0.2px !important; } /* Buchstaben-Reihe + Kästchen-Reihe = identisches 5er-Grid → perfekt bündig */ #page-family .fpb-cols, #page-family .fpb-cells { grid-column: 3 !important; display: grid !important; grid-template-columns: repeat(5, 1fr) !important; gap: 6px !important; } #page-family .fpb-cols i { width: auto !important; text-align: center !important; font-style: normal !important; font-size: 10px !important; font-weight: 800 !important; color: rgba(232,237,245,0.42) !important; letter-spacing: 0.4px !important; } #page-family .fpb-grid { display: flex !important; flex-direction: column !important; gap: 5px !important; } #page-family .fpb-row { padding: 8px 6px !important; border-radius: 13px !important; } #page-family .fpb-row.is-me { background: color-mix(in srgb, var(--gold) 9%, transparent) !important; } #page-family .fpb-av { width: 32px !important; height: 32px !important; border-radius: 50% !important; font-size: 13px !important; font-weight: 800 !important; } #page-family .fpb-nm { grid-column: 2 !important; font-family: var(--font-ui) !important; font-size: 13.5px !important; font-weight: 700 !important; } /* Kästchen: saubere Quadrate, gleich breit wie ihr Buchstabe darüber */ #page-family .fpb-cell { width: auto !important; height: auto !important; aspect-ratio: 1 / 1 !important; margin: 0 !important; border-radius: 8px !important; display: grid !important; place-items: center !important; font-size: 12px !important; font-weight: 800 !important; background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.07) !important; color: rgba(232,237,245,0.30) !important; } #page-family .fpb-cell.is-done { background: linear-gradient(160deg, #34d39a 0%, #1d9e75 100%) !important; border-color: transparent !important; color: #05140e !important; box-shadow: 0 3px 10px -3px rgba(46,204,143,0.55) !important; } #page-family .fpb-cnt { grid-column: 4 !important; text-align: right !important; font-variant-numeric: tabular-nums !important; font-size: 12.5px !important; font-weight: 800 !important; color: rgba(232,237,245,0.5) !important; } #page-family .fpb-cnt.is-full { color: #f0c987 !important; } /* ═══════════════════════════════════════════════════════════════════════ v174 ★ FAMILY auf's nächste Level • Gold-Moment, wenn ALLE heute komplett (5/5) gebetet haben • Duʿā-Wand: Free sieht alles (Vorgeschmack), aber Mitbeten klar als 🔒 Pro ═══════════════════════════════════════════════════════════════════════ */ /* (1) „Heute zusammen" wird golden, wenn die Familie heute komplett ist */ #page-family #fmTodayHero.is-complete { background: linear-gradient(155deg, rgba(224,184,112,0.22) 0%, rgba(224,184,112,0.07) 58%, transparent 100%) !important; border: 1px solid rgba(224,184,112,0.42) !important; box-shadow: 0 0 34px -10px rgba(224,184,112,0.4) !important; } #page-family #fmTodayHero.is-complete .fm-today-eyebrow { color: rgba(231,196,128,0.92) !important; } #page-family #fmTodayHero.is-complete .fm-today-headline { color: #f4dcab !important; text-shadow: 0 0 18px rgba(224,184,112,0.35) !important; } #page-family #fmTodayHero.is-complete .fm-today-fill { background: linear-gradient(90deg, #e8c987, #f6e1b4) !important; box-shadow: 0 0 12px rgba(224,184,112,0.55) !important; } #page-family #fmTodayHero.is-complete .fm-today-nudge.done { color: #f4dcab !important; } /* (2) Duʿā-Wand im Free-Zustand: klar als Pro markiert (statt nur Toast) */ #page-family .fm-duawall.is-locked .fm-dw-head { position: relative !important; } #page-family .fm-duawall.is-locked .fm-dw-head::after { content: '🔒 Pro'; position: absolute !important; top: 0; right: 0; font-size: 10px; font-weight: 800; letter-spacing: 0.3px; color: var(--gold, #e0b870); background: rgba(224,184,112,0.12); padding: 3px 9px; border-radius: 999px; } #page-family .fm-duawall.is-locked .fm-dw-add { opacity: 0.62 !important; } #page-family .fm-duawall.is-locked .fm-dw-add input::placeholder { color: rgba(232,237,245,0.4) !important; } #page-family .fm-dw-amin.is-locked { opacity: 0.72 !important; } #page-family .fm-dw-amin.is-locked .fm-dw-amin-lbl::before { content: '🔒 '; font-size: 10px; } /* (3) Āmīn fühlbarer (kleiner Druck-Effekt) */ #page-family .fm-dw-amin:not(.is-locked):active { transform: scale(0.9) !important; } /* ═══════════════════════════════════════════════════════════════════════ v175 ★ TAGES-VERS-BOX — gemeinsamer täglicher Moment für die Familie Geschlossen = einladende Gold-Box zum Antippen (Wiederkomm-Anreiz), geöffnet = Vers-Reveal (Amiri-Arabisch + Plus Jakarta Sans wie überall). ═══════════════════════════════════════════════════════════════════════ */ #page-family .fam-daily { margin: 0 0 16px; } /* — geschlossen: glühende, pulsierende Gold-Box — */ #page-family .fam-daily.is-closed .fam-daily-open { width: 100%; display: flex; align-items: center; gap: 13px; padding: 16px; border-radius: 18px; cursor: pointer; background: linear-gradient(150deg, rgba(224,184,112,0.18) 0%, rgba(224,184,112,0.06) 68%, rgba(20,26,39,0.45) 100%); border: 1px solid rgba(224,184,112,0.42); animation: famDailyPulse 3.4s ease-in-out infinite; } #page-family .fam-daily.is-closed .fam-daily-open:active { transform: scale(0.985); } @keyframes famDailyPulse { 0%, 100% { box-shadow: 0 0 22px -12px rgba(224,184,112,0.4); } 50% { box-shadow: 0 0 34px -6px rgba(224,184,112,0.6); } } #page-family .fam-daily-gift { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 13px; display: grid; place-items: center; color: var(--gold, #e0b870); background: rgba(224,184,112,0.14); } #page-family .fam-daily-gift svg { width: 24px; height: 24px; } #page-family .fam-daily-txt { display: flex; flex-direction: column; gap: 3px; text-align: left; flex: 1 1 auto; } #page-family .fam-daily-eyebrow { font-family: var(--font-ui); font-size: 11px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; color: rgba(231,196,128,0.85); } #page-family .fam-daily-cta { font-family: var(--font-ui); font-size: 14.5px; font-weight: 700; color: #f4ede0; } #page-family .fam-daily-chev { color: var(--gold, #e0b870); font-size: 22px; font-weight: 700; } /* — geöffnet: Vers-Karte mit Reveal-Animation — */ #page-family .fam-daily.is-open { padding: 18px 18px 16px; border-radius: 18px; background: linear-gradient(160deg, rgba(224,184,112,0.12) 0%, rgba(20,26,39,0.55) 62%); border: 1px solid rgba(224,184,112,0.28); animation: famDailyReveal 0.5s cubic-bezier(0.2,0.8,0.3,1); } @keyframes famDailyReveal { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } } #page-family .fam-daily.is-open .fam-daily-eyebrow { display: block; margin-bottom: 12px; text-align: center; } #page-family .fam-daily-ar { font-family: var(--font-arabic, 'Amiri', Georgia, serif); font-size: 25px; line-height: 1.75; color: #f6efe0; text-align: center; margin-bottom: 12px; } #page-family .fam-daily-de { font-family: var(--font-ui); font-size: 15px; line-height: 1.5; color: rgba(244,237,224,0.86); text-align: center; margin-bottom: 9px; } #page-family .fam-daily-ref { font-family: var(--font-ui); font-size: 12px; font-weight: 800; letter-spacing: 0.3px; color: var(--gold, #e0b870); text-align: center; } /* ═══════════════════════════════════════════════════════════════════════ v176 ★ FAMILY-LEERZUSTAND aufgewertet (Solo-User sehen den Wert) • Bunte 🏠-Emoji raus (Stilbruch) → goldenes On-Brand-SVG zurück • Vorschau-Board + Nutzen-Chips, damit „leer" nach „lohnt sich" aussieht ═══════════════════════════════════════════════════════════════════════ */ /* Emoji entfernen, goldenes SVG-Haus zurückholen (einheitlicher Look) */ .family-empty-v52 .fe-icon-wrap::before { content: none !important; } .family-empty-v52 .fe-icon-wrap { width: 132px !important; height: 132px !important; display: grid !important; place-items: center !important; } .family-empty-v52 .fe-house { display: block !important; width: 118px !important; height: 118px !important; } /* Vorschau-Board („so sieht's aus") */ #page-family .fe-preview { width: 100%; margin: 18px 0 4px; background: rgba(20,26,39,0.55); border: 1px solid rgba(212,180,131,0.16); border-radius: 16px; padding: 12px 13px 13px; } #page-family .fe-preview-label { font-family: var(--font-ui); font-size: 10.5px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; color: rgba(231,196,128,0.8); margin-bottom: 10px; text-align: left; } #page-family .fe-pv-board { display: flex; flex-direction: column; gap: 6px; } #page-family .fe-pv-row { display: grid; grid-template-columns: 26px minmax(0,1fr) 118px 30px; align-items: center; gap: 8px; } #page-family .fe-pv-row.is-me { opacity: 1; } #page-family .fe-pv-av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-ui); font-size: 11px; font-weight: 800; color: rgba(232,237,245,0.75); background: rgba(255,255,255,0.07); } #page-family .fe-pv-row.is-me .fe-pv-av { background: var(--gold,#e0b870); color: #1a130a; } #page-family .fe-pv-nm { font-family: var(--font-ui); font-size: 12.5px; font-weight: 700; color: rgba(244,237,224,0.9); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #page-family .fe-pv-cells { display: grid; grid-template-columns: repeat(5,1fr); gap: 5px; } #page-family .fe-pv-cells i { aspect-ratio: 1/1; border-radius: 6px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.07); } #page-family .fe-pv-cells i.on { background: linear-gradient(160deg,#34d39a,#1d9e75); border-color: transparent; } #page-family .fe-pv-cnt { font-family: var(--font-ui); font-size: 11px; font-weight: 800; color: rgba(232,237,245,0.55); text-align: right; } #page-family .fe-pv-cnt.full { color: #f0c987; } /* Nutzen-Chips */ #page-family .fe-benefits { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin: 14px 0 4px; } #page-family .fe-benefit { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: 12px; font-weight: 700; color: rgba(244,237,224,0.82); background: rgba(212,180,131,0.10); border: 1px solid rgba(212,180,131,0.16); padding: 6px 11px; border-radius: 999px; } #page-family .fe-benefit svg { width: 15px; height: 15px; color: var(--gold,#e0b870); } /* v353 H6 ★ Geteilter-Lohn-Motivator (stärkster Anreis-Hadith) */ #page-family .fe-reward { margin: 14px auto 2px; max-width: 320px; font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; font-style: italic; line-height: 1.5; text-align: center; color: rgba(244,237,224,0.74); background: linear-gradient(180deg, rgba(212,180,131,0.09), rgba(212,180,131,0.05)); border: 1px solid rgba(212,180,131,0.18); border-radius: 14px; padding: 11px 14px; } /* ═══════════════════════════════════════════════════════════════════════ v177 ★ „NICHT DÜNN, WIE EINE ECHTE APP" — Premium-Gewicht & Kontrast Plus Jakarta Sans @400 wirkt auf dunklem Grund zu dünn. Basis hoch auf 500, Lesetexte 500–600, schwache Graustufen kräftiger. Arabisch (Amiri) bleibt. ═══════════════════════════════════════════════════════════════════════ */ /* Basis-UI-Text solider (vererbter Text ist damit nicht mehr hauchdünn) */ body, button, input, textarea, select { font-weight: 500; } /* Tawba-Chat: Lesetext kräftiger + luftiger */ #page-ustadh .chat-msg.bot .cm-body { font-weight: 500 !important; line-height: 1.58 !important; } #page-ustadh .chat-msg.user .cm-body, #page-ustadh .chat-msg.user { font-weight: 500 !important; } /* Untertitel / Captions app-weit: nicht dünn */ .ob-sub, .rf-sub, .sc-sub, .sa-empty-sub, .pt-sub, .ti22-tag-sub, .bn-id-meta, .fm-dw-sub { font-weight: 500 !important; } /* ── Family: Inhalts-Texte solide + besserer Kontrast (angenehmer fürs Auge) ── */ #page-family .fm-dw-text { font-weight: 600 !important; line-height: 1.52 !important; color: rgba(244,237,224,0.97) !important; } #page-family .fm-dw-sub { color: rgba(244,237,224,0.74) !important; } #page-family .fm-today-meta span { color: rgba(246,239,224,0.82) !important; font-weight: 600 !important; } #page-family .fm-today-headline { font-weight: 800 !important; } #page-family .fe-desc { font-weight: 500 !important; line-height: 1.58 !important; color: rgba(244,237,224,0.8) !important; } #page-family .fam-daily-de { font-weight: 500 !important; color: rgba(244,237,224,0.93) !important; } #page-family .fpb-nm { font-weight: 700 !important; } #page-family .fpb-cnt { color: rgba(232,237,245,0.7) !important; } #page-family .fm-dw-by span:last-child { font-weight: 700 !important; } /* Mehr-Hub: Karten-Untertitel kräftiger lesbar */ #page-more .more-card-sub { color: rgba(232,237,245,0.62) !important; font-weight: 500 !important; } #page-more .more-card-title { font-weight: 800 !important; } /* ═══════════════════════════════════════════════════════════════════════ v178 ★ MITGLIED-DETAIL-SHEET — Tap auf Board-Zeile → Gebete/Streak/Aktionen Selbstständiges Bottom-Sheet (dunkel/gold), bündelt die verstreuten Mitglieder-Infos + macht die Connect-Aktionen endlich sichtbar/nutzbar. ═══════════════════════════════════════════════════════════════════════ */ .fms-overlay { position: fixed; inset: 0; z-index: 9300; display: none; align-items: flex-end; justify-content: center; } .fms-overlay.is-open { display: flex; } .fms-backdrop { position: absolute; inset: 0; background: rgba(5,8,14,0.6); opacity: 0; transition: opacity 0.25s ease; } .fms-overlay.is-open .fms-backdrop { opacity: 1; } .fms-card { position: relative; z-index: 1; width: 100%; max-width: 480px; background: linear-gradient(180deg, #141a27 0%, #0e131d 100%); border: 1px solid rgba(212,180,131,0.18); border-bottom: none; border-radius: 24px 24px 0 0; padding: 22px 18px calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.2,0.8,0.2,1); font-family: var(--font-ui), sans-serif; } .fms-overlay.is-open .fms-card { transform: translateY(0); } .fms-x { position: absolute; top: 14px; right: 16px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.06); border: none; color: rgba(232,237,245,0.6); font-size: 20px; line-height: 1; cursor: pointer; } .fms-head { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; } .fms-av { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; font-size: 19px; font-weight: 800; color: rgba(232,237,245,0.82); background: rgba(255,255,255,0.08); } .fms-av.is-me { background: var(--gold, #e0b870); color: #1a130a; } .fms-name { font-size: 19px; font-weight: 800; color: #f4ede0; } .fms-meta { font-size: 13px; font-weight: 600; color: rgba(244,237,224,0.64); margin-top: 2px; } .fms-cells { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 18px; } .fms-pcol { display: flex; flex-direction: column; align-items: center; gap: 6px; } .fms-cell { width: 100%; aspect-ratio: 1 / 1; border-radius: 11px; display: grid; place-items: center; font-size: 16px; font-weight: 800; color: rgba(232,237,245,0.3); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.07); } .fms-cell.is-done { background: linear-gradient(160deg,#34d39a,#1d9e75); border-color: transparent; color: #05140e; box-shadow: 0 3px 10px -3px rgba(46,204,143,0.5); } .fms-plabel { font-size: 11px; font-weight: 700; color: rgba(232,237,245,0.52); } .fms-actions { display: flex; flex-direction: column; gap: 9px; } .fms-act { width: 100%; padding: 14px; border-radius: 14px; font-family: var(--font-ui); font-size: 14.5px; font-weight: 700; color: #f4ede0; cursor: pointer; background: rgba(212,180,131,0.14); border: 1px solid rgba(212,180,131,0.28); } .fms-act:active { transform: scale(0.98); } .fms-act.ghost { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); color: rgba(244,237,224,0.85); } .fms-note { font-size: 13.5px; font-weight: 600; color: rgba(244,237,224,0.72); text-align: center; padding: 6px 0 2px; } /* ═══════════════════════════════════════════════════════════════════════ v179 ★ ELTERN-HEBEL — „Duʿā für [Name]" im Mitglied-Sheet Der stärkste Wunsch von Eltern: dass ihr Kind im Gebet bleibt. Das Mächtigste dafür ist das Duʿā der Eltern. Prominenter Gold-Button + herzlicher Reveal. ═══════════════════════════════════════════════════════════════════════ */ .fms-act.fms-dua-btn, .fms-act.fms-dua-share { background: linear-gradient(150deg, #e8c987 0%, #d4a247 100%); border-color: transparent; color: #1f1708; font-weight: 800; } .fms-dua-eyebrow { font-family: var(--font-ui); font-size: 13px; font-weight: 800; letter-spacing: 0.3px; color: var(--gold, #e0b870); text-align: center; margin: 8px 0 16px; } .fms-dua-ar { font-family: var(--font-arabic, 'Amiri', Georgia, serif); font-size: 25px; line-height: 1.85; color: #f6efe0; text-align: center; margin-bottom: 14px; } .fms-dua-de { font-family: var(--font-ui); font-size: 15px; font-weight: 500; line-height: 1.55; color: rgba(244,237,224,0.92); text-align: center; margin-bottom: 9px; } .fms-dua-ref { font-family: var(--font-ui); font-size: 12px; font-weight: 800; letter-spacing: 0.3px; color: var(--gold, #e0b870); text-align: center; margin-bottom: 18px; } /* ═══════════════════════════════════════════════════════════════════════ v180 ★ TAGES-VERS-KISTE cooler + spielnah (Loot-Box-Gefühl) Schatztruhe mit Shimmer + schwebenden Funken; beim Öffnen: Schütteln + Lichtblitz/Funken-Burst → dann Vers-Reveal. ═══════════════════════════════════════════════════════════════════════ */ #page-family .fam-daily.is-closed .fam-daily-open { position: relative; overflow: hidden; padding: 18px 16px; border: 1px solid rgba(224,184,112,0.5); background: linear-gradient(150deg, rgba(224,184,112,0.22) 0%, rgba(224,184,112,0.07) 64%, rgba(20,26,39,0.5) 100%); } /* Shimmer-Sweep über die Karte (premium, lebendig) */ #page-family .fam-daily.is-closed .fam-daily-open::after { content: ''; position: absolute; top: 0; left: -60%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,245,210,0.30), transparent); transform: skewX(-18deg); pointer-events: none; animation: famShimmer180 3.8s ease-in-out infinite; } @keyframes famShimmer180 { 0% { left: -60%; } 55%, 100% { left: 135%; } } #page-family .fam-daily-gift { position: relative; z-index: 2; width: 52px; height: 52px; flex: 0 0 52px; border-radius: 15px; background: rgba(224,184,112,0.16); animation: famChestBob180 2.8s ease-in-out infinite; } #page-family .fam-daily-gift svg { width: 29px; height: 29px; } @keyframes famChestBob180 { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-2px) rotate(-2deg); } } /* schwebende Funken um die Truhe */ #page-family .fam-daily-sparkles { position: absolute; left: 10px; top: 0; bottom: 0; width: 84px; z-index: 1; pointer-events: none; } #page-family .fam-daily-sparkles i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #f6e1b4; box-shadow: 0 0 6px rgba(246,225,180,0.9); opacity: 0; animation: famSpark180 2.6s ease-in-out infinite; } #page-family .fam-daily-sparkles i:nth-child(1) { left: 4px; top: 28%; animation-delay: 0s; } #page-family .fam-daily-sparkles i:nth-child(2) { left: 64px; top: 20%; animation-delay: 0.7s; } #page-family .fam-daily-sparkles i:nth-child(3) { left: 50px; top: 72%; animation-delay: 1.3s; } #page-family .fam-daily-sparkles i:nth-child(4) { left: 8px; top: 76%; animation-delay: 1.9s; } @keyframes famSpark180 { 0%,100% { opacity: 0; transform: scale(0.4); } 45% { opacity: 1; transform: scale(1); } } /* Burst beim Öffnen */ #page-family .fam-daily-burst { position: absolute; left: 36px; top: 50%; width: 10px; height: 10px; z-index: 3; transform: translate(-50%,-50%) scale(0); border-radius: 50%; pointer-events: none; } #page-family .fam-daily.is-bursting .fam-daily-open { animation: famChestShake180 0.5s ease; } #page-family .fam-daily.is-bursting .fam-daily-burst { background: radial-gradient(circle, rgba(255,250,235,0.95) 0%, rgba(246,225,180,0.6) 35%, transparent 70%); animation: famBurst180 0.62s ease-out forwards; } @keyframes famBurst180 { 0% { transform: translate(-50%,-50%) scale(0); opacity: 1; } 70% { opacity: 0.85; } 100% { transform: translate(-50%,-50%) scale(28); opacity: 0; } } @keyframes famChestShake180 { 0%,100% { transform: translateX(0) rotate(0); } 20% { transform: translateX(-3px) rotate(-1.5deg); } 40% { transform: translateX(3px) rotate(1.5deg); } 60% { transform: translateX(-2px) rotate(-1deg); } 80% { transform: translateX(2px) rotate(1deg); } } @media (prefers-reduced-motion: reduce) { #page-family .fam-daily.is-closed .fam-daily-open::after, #page-family .fam-daily-gift, #page-family .fam-daily-sparkles i { animation: none !important; } #page-family .fam-daily.is-bursting .fam-daily-open, #page-family .fam-daily.is-bursting .fam-daily-burst { animation: none !important; } } /* ═══════════════════════════════════════════════════════════════════════ v182 ★ Family-Top mit „Bock": Tages-Vers-Truhe ganz oben für ALLE, Hype-Hero, „Beitreten mit Code" als dezenter Link ganz unten. ═══════════════════════════════════════════════════════════════════════ */ #page-family .fe-join-link { display: block; margin: 16px auto 0; padding: 8px 12px; background: none; border: none; cursor: pointer; font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: rgba(232,237,245,0.5); text-decoration: underline; text-underline-offset: 3px; } #page-family .fe-join-link:active { color: var(--gold, #e0b870); } /* Hero nicht mehr vertikal wegzentrieren (Truhe sitzt jetzt darüber) */ #page-family.no-family #familyEmpty { min-height: 0 !important; justify-content: flex-start !important; padding-top: 4px; } /* ═══════════════════════════════════════════════════════════════════════ v183 ★ 3-Tap-Truhe — Spannung aufbauen: 3 Fortschritts-Punkte + Ruckel/Tap ═══════════════════════════════════════════════════════════════════════ */ #page-family .fam-daily-prog { display: flex; gap: 5px; align-items: center; z-index: 2; flex: 0 0 auto; } #page-family .fam-daily-prog i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.18); transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } #page-family .fam-daily-prog i.on { background: var(--gold, #e0b870); transform: scale(1.3); box-shadow: 0 0 8px rgba(224,184,112,0.85); } #page-family .fam-daily.is-jolt .fam-daily-open { animation: famJolt183 0.32s ease; } @keyframes famJolt183 { 0%,100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-4px) rotate(-2deg) scale(1.02); } 55% { transform: translateX(4px) rotate(2deg) scale(1.03); } 80% { transform: translateX(-2px); } } @media (prefers-reduced-motion: reduce) { #page-family .fam-daily.is-jolt .fam-daily-open { animation: none !important; } } /* ═══════════════════════════════════════════════════════════════════════ v184 ★ Kompakter Familien-Header: Name+XP (links) · Gebete heute ×Mitglieder (rechts) ═══════════════════════════════════════════════════════════════════════ */ #page-family .famtop { display: flex; gap: 10px; margin: 0 0 14px; } #page-family .famtop-id, #page-family .famtop-prog { background: rgba(20,26,39,0.92); border: 1px solid rgba(212,180,131,0.16); border-radius: 16px; padding: 13px 15px; } #page-family .famtop-id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 5px; } #page-family .famtop-name { font-family: var(--font-ui); font-size: 18px; font-weight: 800; color: #f5f0e6; letter-spacing: -0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #page-family .famtop-xp { display: flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--gold, #e0b870); } #page-family .famtop-prog { flex: 0 0 auto; min-width: 106px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; } #page-family .famtop-prog-lbl { font-size: 10px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; color: rgba(232,237,245,0.5); } #page-family .famtop-prog-val { font-family: var(--font-ui); font-size: 22px; font-weight: 800; color: #f5f0e6; line-height: 1; } #page-family .famtop-prog-of { font-size: 14px; font-weight: 700; color: rgba(232,237,245,0.5); } #page-family .famtop-prog-bar { width: 100%; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.08); overflow: hidden; margin-top: 2px; } #page-family .famtop-prog-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg,#34d39a,#1d9e75); transition: width 0.4s ease; } /* v184b: großer Crest/Level-Block ist durch den kompakten Header oben ersetzt → ausblenden (kein doppelter Name/XP) */ #page-family #bnHero { display: none !important; } /* ═══════════════════════════════════════════════════════════════════════ v185 ★ Tawba-Begrüßung: Typewriter-Cursor (clean), Schrift-Flash am Splash gefixt ═══════════════════════════════════════════════════════════════════════ */ #page-ustadh .uc45-sub.is-typing::after { content: '▍'; display: inline-block; margin-left: 1px; color: rgba(232,237,245,0.5); animation: ucCaret185 0.9s steps(1) infinite; } @keyframes ucCaret185 { 0%,50% { opacity: 1; } 50.01%,100% { opacity: 0; } } /* ═══════════════════════════════════════════════════════════════════════ v186 ★ Familien-Profilbild im Kopf (links neben Name) ═══════════════════════════════════════════════════════════════════════ */ #page-family .famtop-id { flex-direction: row !important; align-items: center; gap: 11px; } #page-family .famtop-id-txt { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1 1 auto; } #page-family .famtop-avatar { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(212,180,131,0.14); color: var(--gold, #e0b870); } #page-family .famtop-avatar svg, #page-family .famtop-avatar .sic { width: 22px; height: 22px; } #page-family .famtop-avatar:empty { display: none; } /* ═══════════════════════════════════════════════════════════════════════ v187 ★ Splash ohne Font-Swap + „1 von 1"-Karte raus + Komplett-Moment im Zähler ═══════════════════════════════════════════════════════════════════════ */ /* (1) v188: Splash-Schriftzug in der RUNDEN Marken-Schrift Baloo 2 („wie damals"). Bleibt versteckt bis Baloo 2 geladen ist (.font-ready) → rund UND kein Swap. */ #splashScreen .sp-brand-v95, #splashScreen .sp-brand-v95 span, #splashScreen .sp-brand, #splashScreen .sp-brand span { font-family: "Baloo 2", -apple-system, system-ui, sans-serif !important; } /* v200: „Heute zusammen"-Hero ist DER tägliche Anker (Streak + Nudge) -> wieder sichtbar. Doppelung vermeiden: der Zähler im Kompakt-Header wird stattdessen ausgeblendet. */ #page-family #fmTodayHero { display: block !important; } #page-family #fmTodayHero:empty { display: none !important; } #page-family .famtop-prog { display: none !important; } /* (3) „alle komplett" → der Header-Zähler wird golden (Belohnungs-Moment) */ #page-family .famtop.is-complete .famtop-prog { border-color: rgba(224,184,112,0.5) !important; background: linear-gradient(150deg, rgba(224,184,112,0.18), rgba(20,26,39,0.6)) !important; } #page-family .famtop.is-complete .famtop-prog-val { color: #f4dcab !important; } #page-family .famtop.is-complete .famtop-prog-fill { background: linear-gradient(90deg,#e8c987,#f6e1b4) !important; } /* ═══════════════════════════════════════════════════════════════════════ v189 ★ Mini-Leaderboard (Streak-Rangliste) + Dua-Wand-Eingabe sauber & tippbar ═══════════════════════════════════════════════════════════════════════ */ /* Mini-Leaderboard */ #page-family .fm-mini-lb { margin: 0 0 16px; padding: 14px 15px; border-radius: 18px; background: rgba(20,26,39,0.92); border: 1px solid rgba(212,180,131,0.16); } #page-family .fm-mini-lb:empty { display: none; } #page-family .fm-lb-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; } #page-family .fm-lb-title { font-family: var(--font-ui); font-size: 15px; font-weight: 800; color: #f4ede0; } #page-family .fm-lb-sub { font-size: 11px; font-weight: 600; color: rgba(232,237,245,0.45); } #page-family .fm-lb-row { display: grid; grid-template-columns: 26px 28px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 7px 4px; border-radius: 10px; } #page-family .fm-lb-row.is-me { background: color-mix(in srgb, var(--gold) 9%, transparent); } #page-family .fm-lb-rank { font-size: 15px; font-weight: 800; text-align: center; color: rgba(232,237,245,0.7); } #page-family .fm-lb-av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: rgba(232,237,245,0.82); background: rgba(255,255,255,0.07); } #page-family .fm-lb-row.is-me .fm-lb-av { background: var(--gold,#e0b870); color: #1a130a; } #page-family .fm-lb-nm { font-family: var(--font-ui); font-size: 13.5px; font-weight: 700; color: #f4ede0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #page-family .fm-lb-val { font-size: 13px; font-weight: 800; color: var(--gold,#e0b870); } /* Dua-Wand-Eingabe: klar tippbar + Gold-Teilen (kein Dimmen mehr) */ #page-family .fm-duawall.is-locked { /* neutralisiert (Wand ist frei) */ } #page-family .fm-dw-add { display: flex; gap: 8px; margin-top: 12px; opacity: 1 !important; } #page-family .fm-dw-add input { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 14px; border-radius: 14px; background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.1) !important; color: #f4ede0 !important; font-family: var(--font-ui); font-size: 14px; } #page-family .fm-dw-add input::placeholder { color: rgba(232,237,245,0.42) !important; } #page-family .fm-dw-add input:focus { border-color: rgba(212,180,131,0.5) !important; outline: none; background: rgba(255,255,255,0.07) !important; } #page-family .fm-dw-add button { flex: 0 0 auto; height: 44px; padding: 0 18px; border-radius: 14px; background: linear-gradient(150deg,#e8c987,#d4a247); border: none; color: #1f1708; font-family: var(--font-ui); font-size: 14px; font-weight: 800; cursor: pointer; } #page-family .fm-dw-add button:active { transform: scale(0.97); } /* ═══════════════════════════════════════════════════════════════════════ v191 ★ Splash-Inhalt konstant etwas tiefer + kein Sprung beim Font-Laden (Slide-Animation raus in v191; hier Position + stabile Zeilenhöhen) ═══════════════════════════════════════════════════════════════════════ */ .splash-v30 .sp-content-v96 { padding-top: calc(env(safe-area-inset-top, 0px) + 18vh) !important; } /* Wortmarke + Bismillah: feste (font-größen-basierte) Zeilenhöhe → Box ändert sich nicht, wenn Baloo 2 / Amiri nachladen → kein vertikaler Ruck. */ .splash-v30 .sp-content-v96 .sp-brand-v95 { line-height: 0.95 !important; min-height: 0.95em; } .splash-v30 .sp-content-v96 .sp-bismillah-mini { line-height: 1.45 !important; min-height: 1.45em; } /* ═══════════════════════════════════════════════════════════════════════ v192 ★ Leaderboard (Monatspunkte) + Belohnung für #1 + (!)-Punkte-Erklärung ═══════════════════════════════════════════════════════════════════════ */ #page-family .fm-lb-head { position: relative; } #page-family .fm-lb-info { margin-left: auto; width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%; background: rgba(212,180,131,0.16); border: 1px solid rgba(212,180,131,0.3); color: var(--gold,#e0b870); font-weight: 800; font-size: 14px; cursor: pointer; display: grid; place-items: center; line-height: 1; } #page-family .fm-lb-row.is-first { background: color-mix(in srgb, var(--gold) 8%, transparent); } #page-family .fm-lb-row.is-first.is-me { background: color-mix(in srgb, var(--gold) 15%, transparent); } #page-family .fm-lb-row.is-first .fm-lb-rank { font-size: 17px; } #page-family .fm-lb-reward { width: 100%; margin-top: 11px; display: flex; align-items: center; gap: 10px; padding: 12px 13px; border-radius: 13px; cursor: pointer; text-align: left; background: rgba(212,180,131,0.1); border: 1px dashed rgba(212,180,131,0.38); color: rgba(244,237,224,0.85); font-family: var(--font-ui); font-size: 13px; font-weight: 600; } #page-family .fm-lb-reward.has { border-style: solid; background: rgba(212,180,131,0.15); } #page-family .fm-lb-reward b { color: var(--gold,#e0b870); font-weight: 800; } #page-family .fm-lb-reward-ic { font-size: 18px; flex: 0 0 auto; } #page-family .fm-lb-reward:active { transform: scale(0.99); } /* (!) Punkte-Info-Sheet (nutzt .fms-overlay/.fms-card-Basis) */ #famPointsInfo .fpi-title { font-family: var(--font-ui); font-size: 19px; font-weight: 800; color: #f5f0e6; margin: 2px 0 16px; } #famPointsInfo .fpi-row { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; } #famPointsInfo .fpi-ic { font-size: 20px; flex: 0 0 26px; text-align: center; } #famPointsInfo .fpi-row b { display: block; font-family: var(--font-ui); font-size: 14.5px; font-weight: 700; color: #f4ede0; } #famPointsInfo .fpi-row span { display: block; font-size: 13px; line-height: 1.45; color: rgba(244,237,224,0.65); margin-top: 2px; } /* ═══════════════════════════════════════════════════════════════════════ v193 ★ Leaderboard im Podium-Stil „wie damals" (Zahlen statt Emoji-Medaillen) ═══════════════════════════════════════════════════════════════════════ */ #page-family #famMiniLb .fm-podium { min-height: 188px; margin: 8px 0 2px; } #page-family #famMiniLb .fm-po-col.is-me .fm-po-nm { color: var(--gold,#e0b870); } #page-family #famMiniLb .fm-ranks { margin-top: 4px; } #page-family #famMiniLb .fm-rank-me .fm-rank-num, #page-family #famMiniLb .fm-rank-me .fm-rank-nm { color: var(--gold,#e0b870); } #page-family #famMiniLb .fm-rank-xp { color: var(--gold,#e0b870); font-weight: 800; font-size: 13px; } /* Belohnungs-Icon jetzt als sauberes SVG (kein Emoji) */ #page-family .fm-lb-reward-ic { display: inline-flex; } #page-family .fm-lb-reward-ic svg { width: 18px; height: 18px; color: var(--gold,#e0b870); display: block; } /* (!) Info-Sheet: Zeilen ohne Emoji-Spalte, sauber */ #famPointsInfo .fpi-row { gap: 0; } /* ═══════════════════════════════════════════════════════════════════════ v194 ★ Tawba: Hintergrund atmosphärischer + Chat-Rahmen deutlich abgegrenzt ═══════════════════════════════════════════════════════════════════════ */ /* Tieferer, schönerer Nachthimmel HINTER den Sternen (Atmosphäre-Layer-Background, liegt unter glow/starfield/stars → Sterne bleiben sichtbar) */ #page-ustadh .uc-bg-atmosphere { background: radial-gradient(125% 75% at 50% -8%, rgba(40,54,92,0.40) 0%, rgba(12,18,32,0.10) 52%, transparent 72%), radial-gradient(95% 55% at 50% 112%, rgba(66,44,98,0.26) 0%, transparent 62%), linear-gradient(180deg, #070b14 0%, #04070e 100%) !important; } /* Chat-Panel klar abgegrenzt: deutliche, goldene Umrandung + sanftes Tiefe-Schatten */ #page-ustadh .uc-frame { background: linear-gradient(180deg, rgba(16,22,38,0.34) 0%, rgba(8,12,22,0.48) 100%) !important; border: 1.5px solid rgba(224,184,112,0.34) !important; border-radius: 24px !important; box-shadow: 0 22px 64px -26px rgba(0,0,0,0.85), 0 0 26px -10px rgba(224,184,112,0.18), inset 0 1px 0 rgba(255,255,255,0.06) !important; } /* ════════════════════════════════════════════════════════════════ v195 ★ ADHKĀR · Ḥiṣnul-Muslim Browser (Morgen & Abend) ════════════════════════════════════════════════════════════════ */ .hisn-overlay{ position:fixed; inset:0; z-index:9000; display:flex; flex-direction:column; background: radial-gradient(120% 80% at 50% -10%, rgba(245,201,119,0.10), transparent 60%), linear-gradient(180deg, #0e0d16 0%, #0a0910 100%); transform:translateY(100%); transition:transform .34s cubic-bezier(.22,.61,.36,1); will-change:transform; } .hisn-overlay.is-open{ transform:translateY(0); } body.hisn-open{ overflow:hidden; } .hisn-head{ flex:0 0 auto; display:flex; align-items:center; gap:14px; padding:calc(env(safe-area-inset-top,0px) + 16px) 18px 14px; border-bottom:1px solid rgba(245,201,119,0.14); } .hisn-close{ flex:0 0 auto; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,0.05); border:1px solid rgba(245,201,119,0.18); color:var(--gold, #f5c977); cursor:pointer; -webkit-tap-highlight-color:transparent; } .hisn-close svg{ width:18px; height:18px; } .hisn-close:active{ transform:scale(.92); } .hisn-head-titles{ display:flex; flex-direction:column; gap:2px; } .hisn-head-title{ font-family:var(--font-app,'Plus Jakarta Sans',sans-serif); font-weight:800; font-size:1.32rem; letter-spacing:-.01em; color:var(--text, #f4ede0); } .hisn-head-sub{ font-size:.78rem; font-weight:500; color:var(--text-muted, rgba(244,237,224,0.6)); } .hisn-tabs{ flex:0 0 auto; display:flex; gap:8px; padding:14px 18px 4px; } .hisn-tab{ flex:1; padding:11px 8px; border-radius:14px; font-family:var(--font-app,'Plus Jakarta Sans',sans-serif); font-weight:700; font-size:.95rem; color:var(--text-muted, rgba(244,237,224,0.55)); background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:all .18s ease; } .hisn-tab.is-active{ color:#1a1408; background:linear-gradient(180deg, var(--gold-soft,#f5c977), var(--gold-deep,#d4a247)); border-color:transparent; box-shadow:0 6px 18px rgba(245,201,119,0.22); } .hisn-list{ flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:14px 16px calc(env(safe-area-inset-bottom,0px) + 28px); display:flex; flex-direction:column; gap:13px; } /* v307 ★ Adhkār-Kategorie-Gitter (Kacheln mit Emoji) */ .hisn-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; width:100%; } @media (min-width:520px){ .hisn-grid{ grid-template-columns:repeat(3, 1fr); } } .hisn-cat{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; aspect-ratio:1 / 1; text-align:center; padding:14px 10px; background:linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02)); border:1px solid rgba(245,201,119,0.18); border-radius:22px; color:#f4ede0; font-family:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform .12s ease, border-color .2s ease, background .2s ease; } .hisn-cat:active{ transform:scale(0.96); } .hisn-cat.is-complete{ border-color:rgba(95,209,106,0.5); background:linear-gradient(180deg, rgba(95,209,106,0.12), rgba(95,209,106,0.03)); } .hisn-cat-emoji{ font-size:34px; line-height:1; } .hisn-cat-title{ font-size:15px; font-weight:800; letter-spacing:-.01em; } .hisn-cat-meta{ font-size:11px; font-weight:700; color:rgba(244,237,224,0.5); } .hisn-cat.is-complete .hisn-cat-meta{ color:#7fd98a; } .hisn-back svg{ width:22px; height:22px; } /* v314 ★ Familie gründen — Profilbild-Upload, Glow-Button, edler */ .fam-photo-pick { display:flex; flex-direction:column; align-items:center; gap:9px; margin:4px 0 20px; } .fam-photo-btn { position:relative; width:100px; height:100px; border-radius:50%; border:2px solid rgba(245,201,119,0.4); background:rgba(255,255,255,0.05); cursor:pointer; -webkit-tap-highlight-color:transparent; padding:0; display:grid; place-items:center; transition:transform .12s ease, border-color .2s ease; } .fam-photo-btn:active { transform:scale(0.95); } .fam-photo-btn:hover { border-color:rgba(245,201,119,0.7); } .fam-photo-preview { width:100%; height:100%; border-radius:50%; overflow:hidden; display:grid; place-items:center; color:rgba(245,201,119,0.75); } .fam-photo-preview .sic { width:40px; height:40px; } .fam-av-img { width:100%; height:100%; object-fit:cover; display:block; } .fam-photo-badge { position:absolute; right:0; bottom:0; width:32px; height:32px; border-radius:50%; background:linear-gradient(180deg,#f5e3b0,#e5c46a); color:#1a130a; display:grid; place-items:center; border:3px solid #14182a; box-shadow:0 3px 10px rgba(0,0,0,0.32); } .fam-photo-hint { font-size:12.5px; font-weight:700; color:rgba(244,237,224,0.55); } /* Datei-Input unsichtbar (zeigte im Klon ein weißes Kästchen) */ .fam-photo-input { display:none !important; } /* Erstellen-Button: eigene (grüne) Farbe + Leuchten drumrum (Klon-Spezifität schlagen) */ #brutalOverlay .fam-create-btn, .fam-create-btn { background:linear-gradient(135deg,#6be6a6,#39b97f) !important; color:#08130d !important; font-weight:800 !important; font-size:16px !important; border:none !important; border-radius:18px !important; padding:16px !important; animation:famGlow 2.4s ease-in-out infinite; } @keyframes famGlow { 0%,100% { box-shadow:0 0 0 1px rgba(107,230,166,0.45), 0 0 22px rgba(57,185,127,0.45), 0 8px 22px rgba(0,0,0,0.25); } 50% { box-shadow:0 0 0 1px rgba(107,230,166,0.65), 0 0 36px rgba(57,185,127,0.72), 0 8px 22px rgba(0,0,0,0.25); } } /* Familie-Modal: dickere/edlere Schrift + rundere Icon-Buttons */ .fam-create-card .settings-label { font-weight:800 !important; font-size:14px; letter-spacing:-0.01em; } .fam-create-card .modal-title { font-weight:800; } .fam-create-card .cip-btn { border-radius:14px; } .fam-create-card .cip-btn.active { box-shadow:0 0 0 2px rgba(245,201,119,0.55); } .cip-emoji { font-size:24px; line-height:1; display:grid; place-items:center; } .fam-av-emoji { display:grid; place-items:center; width:100%; height:100%; font-size:30px; line-height:1; } /* Admin: Familienbild antippbar ändern */ .fam-av-editable { position:relative; cursor:pointer; -webkit-tap-highlight-color:transparent; } .fam-av-editable::after { content:'📷'; position:absolute; right:-4px; bottom:-4px; width:21px; height:21px; border-radius:50%; font-size:11px; display:grid; place-items:center; background:linear-gradient(180deg,#f5e3b0,#e5c46a); border:2px solid #14182a; box-shadow:0 2px 6px rgba(0,0,0,0.3); } /* v316 ★ Ustādh Tawba — Schloss "kommt bald" nach dem Intro */ .ustadh-lock { position:relative; flex:1 1 auto; display:flex; align-items:center; justify-content:center; min-height:62vh; padding:40px 28px; overflow:hidden; } /* v385: Rechteck-Karte wie bei „Mehr" (.more-soon) — User: dort viel schöner */ .ustadh-lock-inner { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; max-width:340px; padding: 40px 26px; background: linear-gradient(165deg, rgba(245,201,119,.10), rgba(255,255,255,.025) 60%); border: 1px solid rgba(245,201,119,.22); border-radius: 22px; } .ustadh-lock-icon { width:80px; height:80px; border-radius:50%; display:grid; place-items:center; color:var(--gold,#f5c977); background:radial-gradient(circle at 50% 35%, rgba(245,201,119,0.18), rgba(245,201,119,0.04)); border:1px solid rgba(245,201,119,0.25); box-shadow:0 0 44px rgba(245,201,119,0.16); } .ustadh-lock-title { font-size:21px; font-weight:800; color:var(--text,#f4ede0); letter-spacing:-0.01em; } .ustadh-lock-msg { font-size:14.5px; line-height:1.6; color:rgba(244,237,224,0.62); font-weight:500; } /* v385: eigene Sternenebene fürs Schloss — funkelnde Sterne + langsam aufsteigende Lichtpunkte, unabhängig vom fragilen .uc-bg-*-System (das während der Sperre versteckt ist). */ .ustadh-lock-stars { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; } .ustadh-lock-stars span { position:absolute; width:2px; height:2px; border-radius:50%; background:#eaf1ff; box-shadow:0 0 4px rgba(220,232,255,0.7); opacity:0.18; animation: famTwinkleStar 4s ease-in-out infinite; } .ustadh-lock-stars span:nth-child(3n) { animation-duration:5.6s; } .ustadh-lock-stars span:nth-child(4n) { animation-duration:3.2s; } .ustadh-lock-stars span:nth-child(5n+2) { animation-duration:6.5s; } .ustadh-lock-mote { position:absolute; bottom:-10px; width:3px; height:3px; border-radius:50%; background:#f5c977; box-shadow:0 0 7px rgba(245,201,119,0.85); opacity:0; animation: ustadhLockMoteRise 6.5s ease-out infinite; } @keyframes ustadhLockMoteRise { 0% { opacity:0; transform:translateY(0); } 15% { opacity:0.8; } 80% { opacity:0.3; } 100% { opacity:0; transform:translateY(-260px); } } @media (prefers-reduced-motion: reduce) { .ustadh-lock-stars span, .ustadh-lock-mote { animation:none !important; opacity:0.5; } } /* v316 ★ Einwilligungs-Zeile mit Rechts-Links unter den Anmelde-Knöpfen */ .ob-consent { margin-top:14px; text-align:center; font-size:11.5px; line-height:1.5; color:rgba(244,237,224,0.5); padding:0 8px; } .ob-consent a { color:rgba(245,201,119,0.85); text-decoration:underline; font-weight:600; } .ob-consent-note { display:block; margin-top:8px; font-size:10.5px; line-height:1.45; color:rgba(244,237,224,0.38); } /* v321 ★ Onboarding Habits: eigene Eingabe-Kästchen + Vorschlags-Chips (cooler) */ .ob-hfields { display:flex; flex-direction:column; gap:11px; width:100%; margin:8px 0 4px; } .ob-hfield { display:flex; align-items:center; gap:11px; width:100%; } .ob-hfield-n { flex:0 0 auto; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:14px; font-weight:800; color:var(--gold,#f5c977); background:rgba(245,201,119,0.12); border:1px solid rgba(245,201,119,0.25); } .ob-hinput { flex:1 1 auto; min-width:0; padding:14px 16px; border-radius:15px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); color:var(--text,#f4ede0); font-size:15.5px; font-weight:600; font-family:inherit; transition:border-color .18s ease, background .18s ease; } .ob-hinput::placeholder { color:rgba(244,237,224,0.34); font-weight:500; } .ob-hinput:focus { outline:none; border-color:rgba(245,201,119,0.6); background:rgba(255,255,255,0.07); } .ob-hsugg-label { margin:16px 0 9px; font-size:11.5px; font-weight:800; letter-spacing:0.07em; text-transform:uppercase; color:rgba(244,237,224,0.42); } .ob-hsugg { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; } .ob-hchip { padding:9px 14px; border-radius:999px; font-size:13.5px; font-weight:700; font-family:inherit; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); color:var(--text,#f4ede0); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform .12s ease, background .18s ease, border-color .18s ease; } .ob-hchip:active { transform:scale(0.95); } .ob-hchip.is-used { background:linear-gradient(180deg, rgba(245,201,119,0.22), rgba(245,201,119,0.1)); border-color:rgba(245,201,119,0.55); color:var(--gold,#f5c977); } .ob-habit-count { margin-top:14px; text-align:center; font-size:13px; font-weight:800; color:var(--gold-soft,#f5c977); opacity:0.85; } .hisn-card{ background:linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015)); border:1px solid rgba(245,201,119,0.16); border-radius:20px; padding:16px 16px 12px; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:border-color .2s ease, box-shadow .2s ease, transform .08s ease; } .hisn-card:active{ transform:scale(.992); } .hisn-card.is-done{ border-color:rgba(141,184,168,0.55); box-shadow:0 0 0 1px rgba(141,184,168,0.25) inset; } .hisn-card-top{ display:flex; align-items:center; gap:10px; margin-bottom:11px; } .hisn-num{ flex:0 0 auto; width:24px; height:24px; border-radius:8px; display:grid; place-items:center; font-size:.72rem; font-weight:800; color:var(--gold,#f5c977); background:rgba(245,201,119,0.10); border:1px solid rgba(245,201,119,0.2); } .hisn-title{ flex:1 1 auto; font-family:var(--font-app,'Plus Jakarta Sans',sans-serif); font-weight:700; font-size:.92rem; color:var(--text, #f4ede0); } .hisn-count{ flex:0 0 auto; font-weight:800; font-size:.8rem; color:var(--gold,#f5c977); background:rgba(245,201,119,0.08); border:1px solid rgba(245,201,119,0.22); border-radius:999px; padding:4px 11px; min-width:42px; text-align:center; font-variant-numeric:tabular-nums; } /* v347 (M5): Favoriten-Stern auf jeder Karte + Leerzustand */ .hisn-fav{ flex:0 0 auto; background:none; border:none; cursor:pointer; font-size:18px; line-height:1; color:rgba(244,237,224,0.4); padding:2px 4px; transition:transform .15s ease, color .2s ease; } .hisn-fav.is-fav{ color:#f5c977; text-shadow:0 0 8px rgba(245,201,119,0.55); } .hisn-fav:active{ transform:scale(1.35); } .hisn-empty-favs{ text-align:center; color:rgba(244,237,224,0.62); font-size:13.5px; line-height:1.55; padding:34px 22px; } .hisn-card.is-done .hisn-count{ color:#9fe6cf; background:rgba(141,184,168,0.12); border-color:rgba(141,184,168,0.4); } .hisn-ar{ font-family:var(--font-arabic,'Amiri',serif); font-size:1.62rem; line-height:2.15; color:var(--text, #f4ede0); text-align:right; margin-bottom:10px; letter-spacing:0; } .hisn-tr{ font-size:.86rem; font-style:italic; line-height:1.55; color:var(--gold-soft,#f5c977); opacity:.82; margin-bottom:8px; } .hisn-de{ font-size:.9rem; line-height:1.6; font-weight:500; color:var(--text-muted, rgba(244,237,224,0.74)); } .hisn-foot{ margin-top:10px; padding-top:9px; border-top:1px solid rgba(255,255,255,0.05); font-size:.72rem; font-weight:600; color:var(--text-dim, rgba(244,237,224,0.34)); } .hisn-card.is-done .hisn-foot::before{ content:'✓ '; color:#9fe6cf; } /* ════════════════════════════════════════════════════════════════ v196 ★ MEHR-HUB · Maarifa-Stil (Rechtecke untereinander + Symbole) ════════════════════════════════════════════════════════════════ */ #page-more .more-list, .more-list { display: flex; flex-direction: column; gap: 11px; } .more-row { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 15px 15px; border-radius: 18px; background: linear-gradient(180deg, rgba(20,26,39,0.96), rgba(16,20,31,0.96)); border: 1px solid rgba(245,201,119,0.14); color: #f4ede0; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.1s ease, border-color 0.2s ease, background 0.2s ease; } .more-row:active { transform: scale(0.985); border-color: rgba(245,201,119,0.3); } .more-row-ico { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; } .more-row-ico svg { width: 24px; height: 24px; } /* sanfte, eigene Farb-Tints (NICHT Maarifa-Farben) */ .more-row-ico.tint-gold { background: rgba(245,201,119,0.13); color: #f5c977; } .more-row-ico.tint-green { background: rgba(141,184,168,0.15); color: #9fd9c4; } .more-row-ico.tint-mauve { background: rgba(184,156,200,0.15); color: #cdb0e0; } .more-row-ico.tint-teal { background: rgba(120,196,196,0.14); color: #8fd6d6; } .more-row-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .more-row-title { font-family: var(--font-ui, "Plus Jakarta Sans"), sans-serif; font-size: 15.5px; font-weight: 800; letter-spacing: -0.2px; color: #f6efe3; } .more-row-sub { font-size: 12.5px; font-weight: 500; line-height: 1.3; color: rgba(232,237,245,0.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .more-row-chev { flex: 0 0 auto; color: rgba(245,201,119,0.5); display: grid; place-items: center; } .more-row-chev svg { width: 18px; height: 18px; } .more-row-badge { flex: 0 0 auto; font-size: 10.5px; font-weight: 800; letter-spacing: 0.3px; color: #f5c977; background: rgba(245,201,119,0.12); border: 1px solid rgba(245,201,119,0.22); padding: 4px 10px; border-radius: 999px; } /* ════════════════════════════════════════════════════════════════ v196 ★ QIBLA · quadratischer Rahmen + mehr Vibe + Glitch-Fix ════════════════════════════════════════════════════════════════ */ .qbl-frame { position: relative; width: min(100%, 320px); aspect-ratio: 1 / 1; margin: 2px auto 0; border-radius: 28px; display: grid; place-items: center; background: radial-gradient(80% 80% at 50% 38%, rgba(245,201,119,0.10), transparent 62%), linear-gradient(180deg, #14121d 0%, #0c0b13 100%); border: 1px solid rgba(245,201,119,0.22); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 18px 44px -22px rgba(0,0,0,0.8); overflow: hidden; } /* dezente Himmels-Punkte für Vibe */ .qbl-frame::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(1.5px 1.5px at 22% 28%, rgba(245,201,119,0.5), transparent), radial-gradient(1.5px 1.5px at 78% 22%, rgba(255,255,255,0.35), transparent), radial-gradient(1.5px 1.5px at 68% 76%, rgba(245,201,119,0.4), transparent), radial-gradient(1.5px 1.5px at 30% 72%, rgba(255,255,255,0.3), transparent); opacity: 0.7; } .qbl-frame .qbl-dial { width: min(74%, 230px); height: min(74%, 230px); } /* Nadel = sauberes SVG-Dreieck statt Text-Glyph (war der „Bug"-Look) */ .qbl-needle { top: 6px; font-size: 0; line-height: 0; } .qbl-needle svg { width: 22px; height: 14px; display: block; color: var(--gold, #f5c977); filter: drop-shadow(0 2px 8px rgba(245,201,119,0.55)); } /* permanenter dezenter Gold-Ring um die Scheibe */ .qbl-ring-glow { inset: 4px; box-shadow: inset 0 0 0 1.5px rgba(245,201,119,0.2); } .qbl-deg { color: var(--gold, #f5c977); font-family: var(--font-ui,"Plus Jakarta Sans"),sans-serif; } .qbl-deg-lbl { color: rgba(245,201,119,0.6); } .qbl { padding-top: 4px; } /* ════════════════════════════════════════════════════════════════ v197 ★ QIBLA-OVERLAY · eigenständig (Body + Aktionen) ════════════════════════════════════════════════════════════════ */ .q-overlay .q-body { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 20px 20px calc(env(safe-area-inset-bottom,0px) + 28px); } .q-status { font-family: var(--font-ui, "Plus Jakarta Sans"), sans-serif; font-size: 14px; font-weight: 800; text-align: center; color: var(--gold, #f5c977); background: rgba(245,201,119,0.10); border: 1px solid rgba(245,201,119,0.2); padding: 9px 18px; border-radius: 999px; max-width: 90%; } .q-dist { font-size: 13px; font-weight: 600; color: rgba(244,237,224,0.6); margin-top: -4px; } .q-btn { width: min(100%, 320px); padding: 15px 16px; border-radius: 16px; border: none; cursor: pointer; font-family: var(--font-ui, "Plus Jakarta Sans"), sans-serif; font-size: 15px; font-weight: 800; color: #241806; background: linear-gradient(180deg, #f5c977, #d4a247); box-shadow: 0 10px 24px -10px rgba(245,201,119,0.7); -webkit-tap-highlight-color: transparent; transition: transform .12s ease; } .q-btn:active { transform: scale(0.97); } /* ════════════════════════════════════════════════════════════════ v198 ★ QIBLA · Kaaba-Marker neu (rund statt Kästchen) + Politur ════════════════════════════════════════════════════════════════ */ .qbl-kaaba { width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 50% 34%, #fffaf0, #efe0c2); border: 1.5px solid rgba(245,201,119,0.7); box-shadow: 0 0 20px -2px rgba(245,201,119,0.55), 0 6px 16px -4px rgba(0,0,0,0.55); display: grid; place-items: center; overflow: visible; } .qbl-kaaba .qk-svg { width: 26px; height: 26px; display: block; } .qbl-kaaba.is-found { border-color: rgba(61,220,151,0.9); background: radial-gradient(circle at 50% 34%, #fffaf0, #efe0c2) !important; /* Kaaba-Scheibe bleibt sichtbar */ animation: qkGlow 1.15s ease-in-out infinite; } /* pulst NUR den Schein — NICHT transform (der positioniert die Kaaba auf dem Ring) */ @keyframes qkGlow { 0%,100% { box-shadow: 0 0 0 4px rgba(61,220,151,0.20), 0 0 24px -2px rgba(61,220,151,0.65); } 50% { box-shadow: 0 0 0 6px rgba(61,220,151,0.32), 0 0 34px 0px rgba(61,220,151,0.9); } } /* Scheibe etwas wärmer + Ring klarer */ .qbl-frame .qbl-circle { color: rgba(245,201,119,0.18); } .qbl-frame .qbl-n { fill: var(--gold,#f5c977); font-weight: 800; } .qbl-frame .qbl-l { fill: rgba(244,237,224,0.42); } .qbl-ring-glow { box-shadow: inset 0 0 0 1.5px rgba(245,201,119,0.22); } /* Grad größer + edler, Label dezent */ .q-overlay .qbl-deg { font-size: 34px; font-weight: 800; color: var(--gold,#f5c977); text-shadow: 0 2px 12px rgba(245,201,119,0.35); } .q-overlay .qbl-deg-lbl { font-size: 9.5px; letter-spacing: 0.18em; color: rgba(244,237,224,0.45); } .q-overlay .qbl-needle svg { width: 24px; height: 16px; } /* v198 ★ Adhkār/Duʿās Tagesfortschritt (gibt „Sinn") */ .hisn-progress { display: flex; align-items: center; gap: 10px; padding: 4px 18px 10px; } .hisn-prog-track { flex: 1 1 auto; height: 7px; border-radius: 999px; background: rgba(255,255,255,0.07); overflow: hidden; } .hisn-prog-track > i { display: block; height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, #d4a247, #f5c977); box-shadow: 0 0 10px rgba(245,201,119,0.5); transition: width .35s cubic-bezier(.22,.61,.36,1); } .hisn-prog-txt { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: rgba(245,201,119,0.85); font-variant-numeric: tabular-nums; } /* ════════════════════════════════════════════════════════════════ v201 ★ Sprachwahl im Intro (DE/EN Pills oben rechts) ════════════════════════════════════════════════════════════════ */ .ob-lang-top { position: absolute; top: calc(env(safe-area-inset-top,0px) + 12px); right: 14px; z-index: 30; display: flex; gap: 5px; background: rgba(255,255,255,0.05); border: 1px solid rgba(245,201,119,0.2); border-radius: 999px; padding: 3px; } .ob-lang-top .lang-pill { min-width: 38px; padding: 5px 10px; border: none; border-radius: 999px; background: transparent; color: rgba(244,237,224,0.55); font-family: var(--font-ui, "Plus Jakarta Sans"), sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: all .15s ease; } .ob-lang-top .lang-pill.active { background: linear-gradient(180deg, #f5c977, #d4a247); color: #241806; } /* ════════════════════════════════════════════════════════════════ v202 ★ Team-Sprint #1 — Politur (Bug/UX-Berichte) ════════════════════════════════════════════════════════════════ */ /* Bottom-Nav: 44px+ Tap-Targets (HIG) */ .bottom-nav .nav-btn { min-height: 48px; } /* Lesbarkeit: zu blasse Sekundär-/Label-Texte anheben */ .bottom-nav .nav-btn { color: rgba(232,238,248,0.58); } .more-badge-free { color: rgba(232,237,245,0.6) !important; } /* Halal: „umstritten"-Hinweis + Disclaimer (Vertrauen statt Fatwa-Ton) */ .halal-result-note { margin-top: 6px; font-size: 11.5px; font-weight: 700; color: #e8b86a; background: rgba(245,201,119,0.10); border: 1px solid rgba(245,201,119,0.22); border-radius: 8px; padding: 5px 9px; display: inline-block; } .halal-disclaimer { margin-top: 12px; padding: 10px 12px; font-size: 11.5px; line-height: 1.5; font-weight: 500; color: rgba(244,237,224,0.6); background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; text-align: center; } /* ════════════════════════════════════════════════════════════════ v204 ★ FAMILIEN-FEED-KARTEN (Home) · Duʿā · Majlis · Gute Tat ════════════════════════════════════════════════════════════════ */ .feedc-card { margin: 12px 0 0; padding: 16px 16px 14px; border-radius: 20px; background: linear-gradient(180deg, rgba(245,201,119,0.05), rgba(255,255,255,0.018)); border: 1px solid rgba(245,201,119,0.18); box-shadow: 0 12px 30px -20px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.04); } .feedc-card:empty { display: none; } .feedc-majlis { border-color: rgba(141,184,168,0.28); background: linear-gradient(180deg, rgba(141,184,168,0.06), rgba(255,255,255,0.015)); } .feedc-deed { border-color: rgba(184,156,200,0.26); background: linear-gradient(180deg, rgba(184,156,200,0.06), rgba(255,255,255,0.015)); } .feedc-eyebrow { font-family: var(--font-ui,"Plus Jakarta Sans"),sans-serif; font-size: 10px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold,#f5c977); margin-bottom: 9px; } .feedc-majlis .feedc-eyebrow { color: #9fd9c4; } .feedc-deed .feedc-eyebrow { color: #cdb0e0; } .feedc-ar { font-family: var(--font-arabic,"Amiri",serif); font-size: 1.5rem; line-height: 2; color: var(--text,#f4ede0); text-align: right; margin-bottom: 8px; } .feedc-tr { font-size: 0.82rem; font-style: italic; line-height: 1.5; color: var(--gold-soft,#f5c977); opacity: 0.8; margin-bottom: 6px; } .feedc-de { font-size: 0.92rem; line-height: 1.55; font-weight: 500; color: var(--text-muted, rgba(244,237,224,0.74)); } .feedc-q { font-family: var(--font-ui,"Plus Jakarta Sans"),sans-serif; font-size: 1.08rem; font-weight: 700; line-height: 1.4; color: var(--text,#f4ede0); } .feedc-deed-txt { font-family: var(--font-ui,"Plus Jakarta Sans"),sans-serif; font-size: 1.02rem; font-weight: 700; line-height: 1.4; color: var(--text,#f4ede0); } .feedc-hint { margin-top: 6px; font-size: 0.8rem; font-weight: 500; color: var(--text-dim, rgba(244,237,224,0.5)); } /* v224: Kontext-/Sunnah-Begründung unter Duʿā bzw. Gute Tat */ .feedc-ctx { display: flex; align-items: flex-start; gap: 7px; margin-top: 11px; padding: 9px 11px; border-radius: 12px; background: rgba(245,201,119,0.07); border: 1px solid rgba(245,201,119,0.14); border-left: 2.5px solid rgba(245,201,119,0.55); } .feedc-ctx .sic { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; color: var(--gold,#f5c977); opacity: 0.9; } .feedc-ctx span { font-family: var(--font-ui,"Plus Jakarta Sans"),sans-serif; font-size: 0.8rem; line-height: 1.5; font-weight: 500; color: var(--text-muted, rgba(244,237,224,0.72)); } .feedc-deed .feedc-ctx { background: rgba(184,156,200,0.08); border-color: rgba(184,156,200,0.16); border-left-color: rgba(184,156,200,0.6); } .feedc-deed .feedc-ctx .sic { color: #cdb0e0; } .feedc-btn { margin-top: 13px; width: 100%; padding: 11px 14px; border-radius: 13px; border: 1px solid rgba(245,201,119,0.3); background: rgba(245,201,119,0.1); font-family: var(--font-ui,"Plus Jakarta Sans"),sans-serif; font-size: 13.5px; font-weight: 800; color: var(--gold,#f5c977); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .1s ease, background .2s ease; } .feedc-btn:active { transform: scale(0.98); } .feedc-btn.is-done { color: #1a1408; background: linear-gradient(180deg, #f5c977, #d4a247); border-color: transparent; } .feedc-majlis .feedc-btn { color: #9fd9c4; border-color: rgba(141,184,168,0.35); background: rgba(141,184,168,0.1); } .feedc-majlis .feedc-btn.is-done { color: #0c1a14; background: linear-gradient(180deg,#9fe6cf,#5bbfa1); } .feedc-deed .feedc-btn { color: #cdb0e0; border-color: rgba(184,156,200,0.35); background: rgba(184,156,200,0.1); } .feedc-deed .feedc-btn.is-done { color: #1a1022; background: linear-gradient(180deg,#d9bff0,#b388d6); } /* ════════════════════════════════════════════════════════════════ v205 ★ STOLZ-MOMENTE · gute Taten der Kinder (Family) ════════════════════════════════════════════════════════════════ */ .fm-deed { margin: 14px 0 0; padding: 16px 16px 14px; border-radius: 20px; background: linear-gradient(180deg, rgba(245,201,119,0.07), rgba(255,255,255,0.018)); border: 1px solid rgba(245,201,119,0.22); box-shadow: 0 12px 30px -20px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.04); } .fm-deed:empty { display: none; } .fm-deed-head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; } .fm-deed-ic { font-size: 22px; line-height: 1; } .fm-deed-title { font-family: var(--font-ui,"Plus Jakarta Sans"),sans-serif; font-weight: 800; font-size: 16px; color: var(--text,#f4ede0); } .fm-deed-sub { font-size: 12px; font-weight: 500; color: var(--text-muted,rgba(244,237,224,0.6)); margin-top: 1px; } .fm-deed-add { width: 100%; padding: 11px; border-radius: 13px; border: 1px dashed rgba(245,201,119,0.4); background: rgba(245,201,119,0.07); color: var(--gold,#f5c977); font-family: var(--font-ui,"Plus Jakarta Sans"),sans-serif; font-size: 13.5px; font-weight: 800; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .2s ease; } .fm-deed-add:active { background: rgba(245,201,119,0.14); } .fm-deed-form { margin-top: 11px; display: flex; flex-direction: column; gap: 8px; } .fm-deed-form[hidden] { display: none; } .fm-deed-input { width: 100%; padding: 11px 13px; border-radius: 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(245,201,119,0.2); color: var(--text,#f4ede0); font-size: 14px; font-family: var(--font-ui,"Plus Jakarta Sans"),sans-serif; } .fm-deed-input::placeholder { color: rgba(244,237,224,0.4); } .fm-deed-chips { display: flex; flex-wrap: wrap; gap: 6px; } .fm-deed-chip { padding: 6px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(255,255,255,0.05); border: 1px solid rgba(245,201,119,0.22); color: var(--text-muted,rgba(244,237,224,0.72)); cursor: pointer; -webkit-tap-highlight-color: transparent; } .fm-deed-chip:active { background: rgba(245,201,119,0.16); color: var(--gold,#f5c977); } .fm-deed-save { margin-top: 2px; width: 100%; padding: 12px; border-radius: 13px; border: none; background: linear-gradient(180deg, #f5c977, #d4a247); color: #1a1408; font-family: var(--font-ui,"Plus Jakarta Sans"),sans-serif; font-size: 14px; font-weight: 800; cursor: pointer; -webkit-tap-highlight-color: transparent; box-shadow: 0 8px 20px -10px rgba(245,201,119,0.7); } .fm-deed-save:active { transform: scale(0.98); } .fm-deed-list { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; } .fm-deed-item { padding: 12px 13px; border-radius: 14px; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.06); } .fm-deed-line { font-size: 14px; line-height: 1.45; color: var(--text,#f4ede0); } .fm-deed-line b { font-weight: 800; color: var(--gold-soft,#f5c977); } .fm-deed-reacts { display: flex; gap: 7px; margin-top: 9px; flex-wrap: wrap; } .fm-deed-react { padding: 5px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); color: var(--text-muted,rgba(244,237,224,0.7)); cursor: pointer; -webkit-tap-highlight-color: transparent; font-variant-numeric: tabular-nums; transition: all .15s ease; } .fm-deed-react.is-on { background: rgba(245,201,119,0.16); border-color: rgba(245,201,119,0.5); color: var(--gold,#f5c977); } .fm-deed-empty { margin-top: 12px; font-size: 13px; font-weight: 500; color: var(--text-dim,rgba(244,237,224,0.5)); text-align: center; padding: 4px 0; } /* ════════════════════════════════════════════════════════════════ v206 ★ „Wer hat heute gebetet?" — Frage in EINER Zeile, Buchstaben eng über den Kästchen (kein leerer Raum mehr) ════════════════════════════════════════════════════════════════ */ #page-family .fpb-title-full { display: block !important; grid-column: auto !important; width: 100% !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; font-family: var(--font-ui,"Plus Jakarta Sans"),sans-serif !important; font-size: 15.5px !important; font-weight: 800 !important; letter-spacing: -0.2px !important; color: var(--text,#f4ede0) !important; margin: 0 2px 8px !important; } /* Kopf jetzt NUR die F D A M I-Reihe, eng an die Kästchen */ #page-family .fpb-head { grid-template-columns: 32px minmax(0,1fr) 138px 34px !important; padding: 0 6px 5px !important; /* weniger Abstand nach unten -> Buchstaben direkt über den Kästchen */ } #page-family .fpb-cols { grid-column: 3 !important; } /* ════════════════════════════════════════════════════════════════ v206 ★ FAMILIEN-ZIELE (Family Habits) ════════════════════════════════════════════════════════════════ */ .fmh-card { margin: 14px 0 0; padding: 16px 16px 14px; border-radius: 20px; background: linear-gradient(180deg, rgba(245,201,119,0.06), rgba(255,255,255,0.018)); border: 1px solid rgba(245,201,119,0.2); box-shadow: 0 12px 30px -20px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.04); } .fmh-card:empty { display: none; } .fmh-head { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; } .fmh-ic { font-size: 21px; line-height: 1; } .fmh-htext { flex: 1 1 auto; min-width: 0; } .fmh-title { font-family: var(--font-ui,"Plus Jakarta Sans"),sans-serif; font-weight: 800; font-size: 16px; color: var(--text,#f4ede0); } .fmh-sub { font-size: 12px; font-weight: 500; color: var(--text-muted,rgba(244,237,224,0.6)); margin-top: 1px; } .fmh-count { flex: 0 0 auto; font-size: 12px; font-weight: 800; color: var(--gold,#f5c977); background: rgba(245,201,119,0.1); border: 1px solid rgba(245,201,119,0.22); border-radius: 999px; padding: 3px 10px; } .fmh-list { display: flex; flex-direction: column; gap: 9px; } .fmh-item { position: relative; padding: 12px 13px; border-radius: 15px; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.07); transition: border-color .25s ease, background .25s ease; } .fmh-item.is-all { border-color: rgba(245,201,119,0.55); background: linear-gradient(180deg, rgba(245,201,119,0.13), rgba(245,201,119,0.04)); box-shadow: 0 0 0 1px rgba(245,201,119,0.2) inset; } .fmh-del { position: absolute; top: 8px; right: 9px; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(255,255,255,0.06); color: rgba(244,237,224,0.4); font-size: 15px; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; } .fmh-del:active { background: rgba(255,90,90,0.2); color: #ff9b9b; } .fmh-line { display: flex; align-items: center; gap: 9px; padding-right: 26px; } .fmh-hic { font-size: 18px; line-height: 1; flex: 0 0 auto; } .fmh-lbl { font-family: var(--font-ui,"Plus Jakarta Sans"),sans-serif; font-size: 14px; font-weight: 700; color: var(--text,#f4ede0); } .fmh-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 11px; } .fmh-avs { display: flex; gap: 5px; flex-wrap: wrap; } .fmh-av { position: relative; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; background: rgba(255,255,255,0.07); border: 1.5px solid rgba(255,255,255,0.1); color: rgba(244,237,224,0.45); transition: all .2s ease; } .fmh-av.is-on { background: linear-gradient(160deg, #34d39a, #1d9e75); border-color: transparent; color: #05140e; box-shadow: 0 3px 9px -3px rgba(46,204,143,0.6); } .fmh-av.is-on i { position: absolute; bottom: -3px; right: -3px; font-size: 9px; font-style: normal; background: #1d9e75; color: #fff; width: 13px; height: 13px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--bg,#0d0c14); } .fmh-confirm { flex: 0 0 auto; padding: 8px 14px; border-radius: 11px; border: 1px solid rgba(245,201,119,0.3); background: rgba(245,201,119,0.1); color: var(--gold,#f5c977); font-family: var(--font-ui,"Plus Jakarta Sans"),sans-serif; font-size: 12.5px; font-weight: 800; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: all .15s ease; } .fmh-confirm:active { transform: scale(0.96); } .fmh-confirm.is-done { color: #05140e; background: linear-gradient(160deg, #34d39a, #1d9e75); border-color: transparent; } .fmh-all { margin-top: 9px; font-size: 12px; font-weight: 800; color: var(--gold,#f5c977); text-align: center; } .fmh-add { margin-top: 11px; width: 100%; padding: 10px; border-radius: 12px; border: 1px dashed rgba(245,201,119,0.4); background: rgba(245,201,119,0.06); color: var(--gold,#f5c977); font-family: var(--font-ui,"Plus Jakarta Sans"),sans-serif; font-size: 13px; font-weight: 800; cursor: pointer; -webkit-tap-highlight-color: transparent; } .fmh-form { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; } .fmh-form[hidden] { display: none; } .fmh-suggest { display: flex; flex-wrap: wrap; gap: 6px; } .fmh-chip { padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(255,255,255,0.05); border: 1px solid rgba(245,201,119,0.2); color: var(--text-muted,rgba(244,237,224,0.72)); cursor: pointer; -webkit-tap-highlight-color: transparent; } .fmh-chip:active { background: rgba(245,201,119,0.16); color: var(--gold,#f5c977); } .fmh-input { width: 100%; padding: 11px 13px; border-radius: 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(245,201,119,0.2); color: var(--text,#f4ede0); font-size: 14px; font-family: var(--font-ui,"Plus Jakarta Sans"),sans-serif; } .fmh-input::placeholder { color: rgba(244,237,224,0.4); } .fmh-save { width: 100%; padding: 11px; border-radius: 12px; border: none; background: linear-gradient(180deg, #f5c977, #d4a247); color: #1a1408; font-family: var(--font-ui,"Plus Jakarta Sans"),sans-serif; font-size: 13.5px; font-weight: 800; cursor: pointer; -webkit-tap-highlight-color: transparent; } .fmh-maxnote { margin-top: 11px; font-size: 11.5px; font-weight: 500; color: var(--text-dim,rgba(244,237,224,0.5)); text-align: center; } /* ════════════════════════════════════════════════════════════════ v207 ★ Familien-Ziele — clean (keine Emojis, Haken klein & mittig) ════════════════════════════════════════════════════════════════ */ #page-family .fmh-ic { display: grid; place-items: center; width: 30px; height: 30px; color: var(--gold,#f5c977); } #page-family .fmh-ic svg { width: 22px; height: 22px; } #page-family .fmh-item { display: flex !important; align-items: center; gap: 11px; position: relative; padding: 11px 12px; border-radius: 14px; } #page-family .fmh-check { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(245,201,119,0.4); background: transparent; display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: all .18s ease; padding: 0; } #page-family .fmh-check:active { transform: scale(0.92); } #page-family .fmh-check.is-done { background: linear-gradient(160deg, #34d39a, #1d9e75); border-color: transparent; box-shadow: 0 3px 9px -3px rgba(46,204,143,0.6); } .fmh-tick { display: block; } #page-family .fmh-check .fmh-tick { width: 15px; height: 15px; color: #05140e; } #page-family .fmh-lbl { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--text,#f4ede0); } #page-family .fmh-avs { flex: 0 0 auto; display: flex; gap: 4px; } #page-family .fmh-av { position: static; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; font-weight: 800; background: rgba(255,255,255,0.07); border: 1.5px solid rgba(255,255,255,0.1); color: rgba(244,237,224,0.5); overflow: hidden; } #page-family .fmh-av.is-on { background: linear-gradient(160deg,#34d39a,#1d9e75); border-color: transparent; color: #05140e; } #page-family .fmh-av .fmh-tick { width: 12px; height: 12px; color: #05140e; } #page-family .fmh-del { position: static; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,0.05); border: none; color: rgba(244,237,224,0.4); cursor: pointer; -webkit-tap-highlight-color: transparent; } #page-family .fmh-del svg { width: 13px; height: 13px; } #page-family .fmh-del:active { background: rgba(255,90,90,0.2); color: #ff9b9b; } #page-family .fmh-formlbl { font-size: 11px; font-weight: 700; color: var(--text-dim,rgba(244,237,224,0.5)); letter-spacing: 0.02em; margin: 2px 0 -2px; } /* ════════════════════════════════════════════════════════════════ v208 ★ Familien-Ziele: alle Profile sichtbar (wer/Status), Count neben Titel · + Sterne/Sternschnuppen-Hintergrund auf Family ════════════════════════════════════════════════════════════════ */ /* Count direkt neben die Überschrift */ #page-family .fmh-titlerow { display: flex; align-items: center; gap: 9px; } #page-family .fmh-head { align-items: flex-start; } #page-family .fmh-count { font-size: 11px; font-weight: 800; color: var(--gold,#f5c977); background: rgba(245,201,119,0.12); border: 1px solid rgba(245,201,119,0.22); border-radius: 999px; padding: 2px 9px; } /* Avatare: Identität IMMER sichtbar — grün = erledigt, grau = noch nicht */ #page-family .fmh-avs { gap: 5px; } #page-family .fmh-av { position: relative; overflow: visible; width: 28px; height: 28px; font-size: 11.5px; font-weight: 800; background: rgba(255,255,255,0.06); border: 1.5px solid rgba(255,255,255,0.13); color: rgba(244,237,224,0.55); } #page-family .fmh-av.is-on { background: linear-gradient(160deg,#34d39a,#1d9e75); border-color: transparent; color: #05140e; box-shadow: 0 2px 8px -2px rgba(46,204,143,0.55); } #page-family .fmh-avtick { position: absolute; bottom: -3px; right: -3px; width: 13px; height: 13px; border-radius: 50%; background: #1d9e75; display: grid; place-items: center; border: 1.5px solid var(--bg,#0d0c14); } #page-family .fmh-avtick .fmh-tick { width: 8px; height: 8px; color: #fff; stroke-width: 4.2; } /* ── Sterne + Sternschnuppe im Hintergrund von Family ── */ #page-family { position: relative; } #page-family > * { position: relative; z-index: 1; } #page-family::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; } @keyframes famDrift { from { background-position: 0 0; } to { background-position: 300px 340px; } } @keyframes famTwinkle { 0%,100%{ opacity:0.45 } 50%{ opacity:0.75 } } #page-family::after { content: ""; position: fixed; top: 14%; left: -15%; z-index: 0; pointer-events: none; width: 140px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), rgba(245,201,119,0.7), transparent); filter: drop-shadow(0 0 6px rgba(255,255,255,0.6)); transform: rotate(18deg); opacity: 0; animation: famShoot 11s ease-in-out infinite; } @keyframes famShoot { 0%, 70% { opacity: 0; transform: translate(0,0) rotate(18deg); } 74% { opacity: 0.95; } 92% { opacity: 0; } 100% { opacity: 0; transform: translate(115vw, 42vh) rotate(18deg); } } @media (prefers-reduced-motion: reduce){ #page-family::before,#page-family::after{ animation:none } } /* ════════════════════════════════════════════════════════════════ v209 ★ Duʿā des Tages (Āmīn) + Hadith des Tages (Family) ════════════════════════════════════════════════════════════════ */ .fmd-card { margin: 14px 0 0; padding: 16px 16px 14px; border-radius: 20px; background: linear-gradient(180deg, rgba(245,201,119,0.06), rgba(255,255,255,0.018)); border: 1px solid rgba(245,201,119,0.2); box-shadow: 0 12px 30px -20px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.04); } .fmd-card:empty { display: none; } .fmd-hadith { border-color: rgba(141,184,168,0.26); background: linear-gradient(180deg, rgba(141,184,168,0.06), rgba(255,255,255,0.015)); } .fmd-eyebrow { font-family: var(--font-ui,"Plus Jakarta Sans"),sans-serif; font-size: 10px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold,#f5c977); margin-bottom: 10px; } .fmd-hadith .fmd-eyebrow { color: #9fd9c4; } .fmd-ar { font-family: var(--font-arabic,"Amiri",serif); font-size: 1.5rem; line-height: 2.05; color: var(--text,#f4ede0); text-align: right; margin-bottom: 9px; } .fmd-de { font-size: 0.92rem; line-height: 1.55; font-weight: 500; color: var(--text-muted,rgba(244,237,224,0.74)); } .fmd-ref { margin-top: 6px; font-size: 0.78rem; font-weight: 700; color: var(--gold-soft,#f5c977); opacity: 0.85; } .fmd-hadith .fmd-ref { color: #9fd9c4; } .fmd-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 13px; } .fmd-avs { display: flex; gap: 5px; flex-wrap: wrap; } .fmd-av { width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; background: rgba(255,255,255,0.06); border: 1.5px solid rgba(255,255,255,0.13); color: rgba(244,237,224,0.55); } .fmd-av.is-on { background: linear-gradient(160deg,#34d39a,#1d9e75); border-color: transparent; color: #05140e; box-shadow: 0 2px 8px -2px rgba(46,204,143,0.5); } .fmd-amin { flex: 0 0 auto; padding: 9px 18px; border-radius: 12px; border: 1px solid rgba(245,201,119,0.32); background: rgba(245,201,119,0.1); color: var(--gold,#f5c977); font-family: var(--font-ui,"Plus Jakarta Sans"),sans-serif; font-size: 13px; font-weight: 800; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: all .15s ease; } .fmd-amin:active { transform: scale(0.96); } .fmd-amin.is-on { color: #05140e; background: linear-gradient(160deg,#34d39a,#1d9e75); border-color: transparent; } /* v210 ★ Ṣalawāt-Zähler (Family) */ .fmd-salawat { border-color: rgba(184,156,200,0.26); background: linear-gradient(180deg, rgba(184,156,200,0.06), rgba(255,255,255,0.015)); } .fmd-salawat .fmd-eyebrow { color: #cdb0e0; } .fsal-ar { font-family: var(--font-arabic,"Amiri",serif); font-size: 1.45rem; line-height: 1.9; color: var(--text,#f4ede0); text-align: center; margin-bottom: 8px; } .fsal-de { font-size: 0.86rem; line-height: 1.5; color: var(--text-muted,rgba(244,237,224,0.66)); text-align: center; } .fsal-prog { margin-top: 12px; height: 7px; border-radius: 999px; background: rgba(255,255,255,0.07); overflow: hidden; } .fsal-prog > i { display: block; height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg,#b388d6,#cdb0e0); box-shadow: 0 0 10px rgba(184,156,200,0.5); transition: width .25s ease; } .fsal-row { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin-top: 9px; } .fsal-count { font-size: 26px; font-weight: 800; color: #cdb0e0; font-variant-numeric: tabular-nums; } .fsal-goal { font-size: 13px; font-weight: 600; color: var(--text-muted,rgba(244,237,224,0.6)); } .fsal-tap { margin-top: 12px; width: 100%; padding: 13px; border-radius: 14px; border: none; background: linear-gradient(180deg,#cdb0e0,#b388d6); color: #1a1022; font-family: var(--font-ui,"Plus Jakarta Sans"),sans-serif; font-size: 14px; font-weight: 800; cursor: pointer; -webkit-tap-highlight-color: transparent; box-shadow: 0 8px 20px -10px rgba(184,156,200,0.7); } .fsal-tap:active { transform: scale(0.98); } /* ════════════════════════════════════════════════════════════════ v211 ★ MOSCHEEN-Overlay (eigene Moschee + in der Nähe) ════════════════════════════════════════════════════════════════ */ .mq-overlay .mq-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 18px calc(env(safe-area-inset-bottom,0px) + 28px); display: flex; flex-direction: column; gap: 14px; } .mq-mine { padding: 16px; border-radius: 18px; background: linear-gradient(180deg, rgba(245,201,119,0.1), rgba(255,255,255,0.02)); border: 1px solid rgba(245,201,119,0.28); } .mq-mine-label { font-size: 10px; font-weight: 800; letter-spacing: 0.16em; color: var(--gold,#f5c977); margin-bottom: 6px; } .mq-mine-name { font-family: var(--font-ui,"Plus Jakarta Sans"),sans-serif; font-size: 18px; font-weight: 800; color: var(--text,#f4ede0); } .mq-mine-dist { font-size: 12.5px; font-weight: 600; color: var(--text-muted,rgba(244,237,224,0.62)); margin-top: 2px; } .mq-mine-empty { font-size: 13.5px; line-height: 1.5; color: var(--text-muted,rgba(244,237,224,0.6)); } .mq-find { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 14px; border-radius: 15px; border: none; background: linear-gradient(180deg, #f5c977, #d4a247); color: #1a1408; font-family: var(--font-ui,"Plus Jakarta Sans"),sans-serif; font-size: 14.5px; font-weight: 800; cursor: pointer; -webkit-tap-highlight-color: transparent; box-shadow: 0 10px 24px -10px rgba(245,201,119,0.7); } .mq-find svg { width: 19px; height: 19px; } .mq-find:active { transform: scale(0.98); } /* ════════════════════════════════════════════════════════════════ v228 ★ Moschee-Overlay · ÜBER den Einstellungen + Suche oben (tastatur-freundlich: Eingabe bleibt oben, Tastatur verdeckt nichts) ════════════════════════════════════════════════════════════════ */ #mosqueOverlay { z-index: 100001; } /* v234: über der Brutal-Hülle (99999) der Einstellungen */ /* v229/v230: direkt aufploppen per reinem Fade — KEIN transform. Wichtig: ein transformiertes fixed-Overlay bildet einen Containing-Block, wodurch die iOS-Tastatur beim Tippen springt. Darum transform IMMER none. v233 FIX: weil transform:none den translateY(100%)-Versteck-Mechanismus ersetzt, MUSS das geschlossene Overlay per display:none + pointer-events:none raus — sonst liegt eine unsichtbare Vollbild-Schicht über der App und schluckt alle Klicks. */ #mosqueOverlay { transform: none; opacity: 0; transition: opacity .15s ease; will-change: auto; pointer-events: none; } #mosqueOverlay.is-open { transform: none; opacity: 1; pointer-events: auto; } #mosqueOverlay[hidden] { display: none !important; } .mq-searchbar { flex: 0 0 auto; position: relative; display: flex; align-items: center; gap: 8px; padding: 14px 18px 12px; } .mq-searchbar .mq-input { flex: 1 1 auto; min-width: 0; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,0.06); border: 1px solid rgba(245,201,119,0.25); color: var(--text,#f4ede0); font-size: 15px; font-family: var(--font-ui,"Plus Jakarta Sans"),sans-serif; -webkit-appearance: none; appearance: none; } .mq-searchbar .mq-input::placeholder { color: rgba(244,237,224,0.42); } .mq-searchbar .mq-input:focus { outline: none; border-color: var(--gold,#f5c977); box-shadow: 0 0 0 3px rgba(245,201,119,0.14); } .mq-search-btn { flex: 0 0 auto; padding: 14px 17px; border-radius: 14px; border: none; background: linear-gradient(180deg, #f5c977, #d4a247); color: #1a1408; font-family: var(--font-ui,"Plus Jakarta Sans"),sans-serif; font-size: 14px; font-weight: 800; cursor: pointer; -webkit-tap-highlight-color: transparent; } .mq-search-btn:active { transform: scale(0.97); } .mq-gps { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 18px 6px; padding: 11px; border-radius: 13px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: var(--gold-soft, #f5c977); font-family: var(--font-ui,"Plus Jakarta Sans"),sans-serif; font-size: 13.5px; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; } .mq-gps svg { width: 17px; height: 17px; } .mq-gps:active { transform: scale(0.98); } /* Body beginnt jetzt direkt unter der Suche (kein großer Top-Abstand) */ .mq-overlay .mq-body { padding-top: 8px; } /* v224: Abschnitts-Labels + "oder"-Trenner machen den Ablauf klar */ .mq-seclbl { display: flex; align-items: center; gap: 7px; margin-bottom: -6px; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245,216,120,0.78); } .mq-seclbl .sic { width: 15px; height: 15px; color: var(--gold,#f5c977); opacity: 0.9; } .mq-or { display: flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted,rgba(244,237,224,0.45)); margin: 2px 0; } .mq-or::before, .mq-or::after { content: ""; flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent); } .mq-status { font-size: 13px; font-weight: 600; color: var(--text-muted,rgba(244,237,224,0.66)); text-align: center; min-height: 1px; } .mq-status:empty { display: none; } .mq-list { display: flex; flex-direction: column; gap: 9px; } .mq-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 14px; border-radius: 15px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); } .mq-it-info { min-width: 0; flex: 1 1 auto; } .mq-it-name { font-family: var(--font-ui,"Plus Jakarta Sans"),sans-serif; font-size: 14.5px; font-weight: 700; color: var(--text,#f4ede0); } .mq-it-dist { font-size: 12px; font-weight: 600; color: var(--gold-soft,#f5c977); opacity: 0.85; margin-top: 2px; } .mq-it-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; } .mq-it-map { font-size: 12px; font-weight: 700; color: var(--text-muted,rgba(244,237,224,0.7)); text-decoration: none; padding: 7px 10px; border-radius: 10px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); } .mq-it-set { font-size: 12px; font-weight: 800; color: var(--gold,#f5c977); padding: 7px 11px; border-radius: 10px; cursor: pointer; -webkit-tap-highlight-color: transparent; background: rgba(245,201,119,0.1); border: 1px solid rgba(245,201,119,0.3); } .mq-it-set:active { transform: scale(0.95); } .mq-manual { display: flex; gap: 8px; margin-top: 4px; } .mq-input { flex: 1 1 auto; min-width: 0; padding: 12px 14px; border-radius: 13px; background: rgba(255,255,255,0.05); border: 1px solid rgba(245,201,119,0.2); color: var(--text,#f4ede0); font-size: 14px; font-family: var(--font-ui,"Plus Jakarta Sans"),sans-serif; } .mq-input::placeholder { color: rgba(244,237,224,0.4); } .mq-save { flex: 0 0 auto; padding: 12px 16px; border-radius: 13px; border: none; background: rgba(245,201,119,0.14); color: var(--gold,#f5c977); font-family: var(--font-ui,"Plus Jakarta Sans"),sans-serif; font-size: 13.5px; font-weight: 800; cursor: pointer; -webkit-tap-highlight-color: transparent; } /* v212 ★ Familien-Streak: Meilenstein-Fortschritt (7/30/100/365) */ .bn-mile { margin: 12px 0 2px; } .bn-mile-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .bn-mile-lbl { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(244,237,224,0.55); } .bn-mile-val { font-size: 12.5px; font-weight: 800; color: var(--gold,#f5c977); font-variant-numeric: tabular-nums; } .bn-mile-track { height: 7px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; } .bn-mile-track > i { display: block; height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, #d4a247, #f5c977); box-shadow: 0 0 10px rgba(245,201,119,0.5); transition: width .4s cubic-bezier(.22,.61,.36,1); } .bn-mile-hint { margin-top: 7px; font-size: 11.5px; font-weight: 600; color: rgba(244,237,224,0.6); } /* v214 ★ OpenStreetMap-Quellenangabe (rechtlich nötig bei OSM-Daten) */ .mq-attrib { margin-top: 6px; text-align: center; font-size: 11px; color: var(--text-dim,rgba(244,237,224,0.45)); } .mq-attrib a { color: var(--gold-soft,#f5c977); text-decoration: none; opacity: 0.85; } /* v216 ★ Ṣalawāt: halten & aussprechen (kein Spam) + Umschrift */ .fsal-translit { text-align: center; font-size: 0.92rem; font-style: italic; font-weight: 600; color: var(--gold-soft,#f5c977); opacity: 0.9; margin: -2px 0 6px; letter-spacing: .2px; } .fsal-hold { position: relative; overflow: hidden; margin-top: 12px; width: 100%; padding: 15px; border-radius: 14px; border: none; background: rgba(184,156,200,0.16); color: #cdb0e0; font-family: var(--font-ui,"Plus Jakarta Sans"),sans-serif; font-size: 14px; font-weight: 800; cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; touch-action: none; } .fsal-hold-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: linear-gradient(90deg,#b388d6,#cdb0e0); opacity: 0.55; transition: width .05s linear; } .fsal-hold-lbl { position: relative; z-index: 1; } .fsal-hold.is-holding { color: #1a1022; } /* ╔══════════════════════════════════════════════════════════════════╗ ║ v225 ★ EINSTELLUNGEN · clean & ruhig (kein Gedränge, mehr Luft) ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* Karte: ruhig, etwas mehr Atem, dezenter Gold-Schimmer oben */ #settingsModal .modal-card { background: radial-gradient(120% 45% at 50% -8%, rgba(245,201,119,0.07), transparent 55%), var(--surface); border-color: rgba(245,201,119,0.12); box-shadow: 0 30px 80px -30px rgba(0,0,0,0.7); padding: 24px 20px 30px; } /* Titel: Zahnrad in dezenter Gold-Kachel */ #settingsModal .modal-title { display: flex; align-items: center; gap: 11px; font-size: 22px; margin-bottom: 22px; } #settingsModal .modal-title .sic { width: 30px; height: 30px; padding: 6px; border-radius: 10px; background: linear-gradient(135deg, rgba(245,201,119,0.2), rgba(245,201,119,0.05)); color: var(--gold); box-sizing: border-box; } /* Sektionen: KEINE Box-in-Box mehr — flach, luftig, nur Haarlinie als Trenner */ #settingsModal .settings-section { background: transparent; border: none; border-radius: 0; padding: 0 2px 18px; margin: 0 0 18px; border-bottom: 1px solid rgba(255,255,255,0.06); } #settingsModal .settings-section:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } /* Label: klar lesbar, normale Schreibweise, ruhiges Gold — kein technisches Versal-Gedränge */ #settingsModal .settings-label { text-transform: none; font-size: 12.5px; font-weight: 700; letter-spacing: 0.01em; color: rgba(245,216,120,0.85); margin-bottom: 12px; } /* Schließen-Knopf: weicher, mit Hover */ #settingsModal .modal-close { transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease; } #settingsModal .modal-close:hover { background: rgba(245,201,119,0.14); color: var(--gold); transform: rotate(90deg); } /* Upgrade-Titel: zurück auf App-Schrift (kein Serif mehr) */ .set-up-main { font-family: var(--font-app) !important; } /* Eingabe-Feld + Pills: etwas mehr Höhe = mehr Ruhe */ #settingsModal .settings-input { font-size: 15px; padding: 13px 14px; } #settingsModal .gender-pill, #settingsModal .lang-pill, #settingsModal .goal-pill { padding: 12px 14px; } #settingsModal .gender-row, #settingsModal .lang-row { gap: 9px; } /* Sprache: saubere DE/EN-Monogramme statt Flaggen-Emojis */ .lang-mono { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 20px; padding: 0 5px; border-radius: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.5px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: var(--text-muted); } .lang-pill.active .lang-mono { background: linear-gradient(135deg, var(--gold), var(--gold-deep, #c79a3e)); border-color: var(--gold); color: #1a1408; } /* Über-Box: eigener ruhiger Rahmen für den Fließtext */ #settingsModal .about-text { background: rgba(0,0,0,0.18); border: 1px solid rgba(255,255,255,0.05); border-radius: 12px; padding: 13px 14px; } #settingsModal .about-text strong { display: inline-flex; align-items: center; gap: 6px; } #settingsModal .about-text .sic { width: 14px; height: 14px; color: var(--gold); } /* ╔══════════════════════════════════════════════════════════════════╗ ║ v236 ★ EINSTELLUNGEN (Brutal-Hülle = was der User WIRKLICH sieht)║ ║ flach & ruhig statt Box-in-Box — überschreibt die alten Brutal- ║ ║ Section-Boxen mit Haarlinien-Trennern + normaler Schreibweise. ║ ╚══════════════════════════════════════════════════════════════════╝ */ #brutalOverlay .settings-section { background: transparent !important; border: none !important; border-bottom: 1px solid rgba(212,162,71,0.13) !important; border-radius: 0 !important; padding: 0 2px 18px !important; margin: 0 0 18px !important; box-shadow: none !important; } #brutalOverlay .settings-section:last-of-type { border-bottom: none !important; margin-bottom: 4px !important; padding-bottom: 0 !important; } #brutalOverlay .settings-label { color: rgba(224,178,90,0.92) !important; font-family: var(--font-app) !important; text-transform: none !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.01em !important; margin-bottom: 12px !important; } /* Upgrade-Banner etwas ruhiger einbetten */ #brutalOverlay .set-upgrade { margin-bottom: 18px !important; } /* Eingabe/Pills im Brutal-Settings etwas luftiger */ #brutalOverlay .settings-input { padding: 13px 14px !important; font-size: 15px !important; } #brutalOverlay .gender-row, #brutalOverlay .lang-row { gap: 9px !important; } /* Adhan-Per-Gebet-Zeilen: dezente Trennlinien statt nackter Kästchen */ #brutalOverlay .spt-row { border-bottom: 1px solid rgba(255,255,255,0.05) !important; padding: 11px 2px !important; } /* ╔══════════════════════════════════════════════════════════════════╗ ║ v237 ★ EINSTELLUNGEN · KOMPLETT-REDESIGN ║ ║ Profil-Hero + gruppierte Premium-Karten. Gilt für Original UND ║ ║ Brutal-Hülle (das was der User wirklich sieht). ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* Brutal-Außenhülle transparent — die Gruppen SIND die Karten */ #brutalOverlay .modal-card { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } /* Profil-Hero */ .set2-hero { display: flex; align-items: center; gap: 14px; margin: 2px 0 18px; } .set2-avatar { width: 54px; height: 54px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-app); font-weight: 800; font-size: 22px; color: #1a1408; background: linear-gradient(135deg, #f5d878, #d4a247); box-shadow: 0 8px 22px -8px rgba(245,201,119,0.65); } .set2-hero-main { flex: 1 1 auto; min-width: 0; } .set2-name-input { width: 100%; background: transparent !important; border: none !important; outline: none; font-family: var(--font-app); font-weight: 800; font-size: 20px; letter-spacing: -0.3px; color: var(--text, #f4ede0); padding: 0 !important; } .set2-name-input::placeholder { color: var(--text-dim, rgba(244,237,224,0.4)); } .set2-hero-sub { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-soft, #f5c977); opacity: 0.8; margin-top: 3px; } /* Gruppen-Karten */ .set2-group { background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)) !important; border: 1px solid rgba(245,201,119,0.14) !important; border-radius: 18px !important; padding: 16px 16px !important; margin-bottom: 14px !important; box-shadow: 0 12px 30px -24px rgba(0,0,0,0.8) !important; } .set2-gtitle { display: flex; align-items: center; gap: 8px; font-family: var(--font-app); font-size: 12.5px; font-weight: 700; letter-spacing: 0.01em; color: var(--gold-soft, #f5c977); margin-bottom: 11px; } .set2-gic { width: 15px; height: 15px; color: var(--gold, #f5c977); flex-shrink: 0; opacity: 0.95; } .set2-mt { margin-top: 18px; } .set2-full { width: 100%; } .set2-about { font-size: 12px; line-height: 1.6; text-align: center; color: var(--text-muted, rgba(244,237,224,0.6)); padding: 6px 8px 2px; margin-top: 2px; } .set2-about strong { display: block; margin-top: 8px; color: var(--gold, #f5c977); font-weight: 800; } .set2-about .sic { width: 13px; height: 13px; vertical-align: -2px; } /* ╔══════════════════════════════════════════════════════════════════╗ ║ v238 ★ EINSTELLUNGEN · STRUKTUR-REDESIGN (iOS-artige Listen) ║ ║ Label links · Wert/Schalter rechts · gruppierte Listen mit Caps ║ ╚══════════════════════════════════════════════════════════════════╝ */ .set3-hero { display:flex; align-items:center; gap:14px; margin:2px 0 16px; } .set3-cap { font-size:11px; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold-soft,#f5c977); opacity:0.75; margin:24px 8px 10px; } .set3-list { background:linear-gradient(180deg, rgba(255,255,255,0.062), rgba(255,255,255,0.03)); border:1px solid rgba(255,255,255,0.085); border-radius:20px; overflow:hidden; margin-bottom:6px; box-shadow:0 6px 22px rgba(0,0,0,0.16); } .set3-row { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; padding:15px 18px; min-height:58px; box-sizing:border-box; border-bottom:1px solid rgba(255,255,255,0.06); background:transparent; border-left:none; border-right:none; border-top:none; font-family:var(--font-app); text-align:left; } .set3-list > .set3-row:last-child, .set3-list > .set3-sub:last-child { border-bottom:none; } .set3-lbl { flex:1 1 auto; min-width:0; font-size:15.5px; font-weight:700; color:var(--text,#f4ede0); letter-spacing:-0.01em; } .set3-val { font-size:14px; font-weight:700; color:var(--gold-soft,#f5c977); max-width:55%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .set3-chev { width:17px; height:17px; color:var(--text-dim,rgba(244,237,224,0.4)); flex-shrink:0; } .set3-tap { cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .15s ease; } .set3-tap:active { background:rgba(255,255,255,0.05); } .set3-danger .set3-lbl { color:var(--rose,#fb7185); } .set3-danger .set3-chev { color:rgba(251,113,133,0.5); } /* Kompakte Segment-Controls rechts in der Zeile */ .set3-seg { display:flex; gap:6px; flex:0 0 auto; } .set3-seg .gender-pill, .set3-seg .lang-pill { flex:0 0 auto; padding:7px 13px !important; font-size:13px !important; border-radius:10px !important; min-width:0 !important; } .set3-seg .lang-pill { padding:7px 11px !important; } /* Unter-Bereich: Erinnerungen pro Gebet */ .set3-sub { padding:6px 16px 12px; border-bottom:1px solid rgba(255,255,255,0.06); } .set3-sublbl { font-size:12px; font-weight:700; color:var(--text-muted,rgba(244,237,224,0.6)); margin:4px 0 8px; } .set3-sub .settings-prayer-toggles { display:flex; flex-direction:column; gap:2px; } .set3-sub .spt-row { display:flex; align-items:center; justify-content:space-between; padding:9px 2px !important; border-bottom:none !important; font-size:14px; color:var(--text,#f4ede0); } /* Hässliche weiße Checkboxen → schöne Gold-Häkchen */ .set3-sub .spt-row input[type="checkbox"]{ -webkit-appearance:none; appearance:none; flex-shrink:0; width:24px; height:24px; border-radius:8px; cursor:pointer; position:relative; margin:0; border:1.5px solid rgba(245,201,119,0.35); background:rgba(255,255,255,0.04); transition:background .15s ease, border-color .15s ease; } .set3-sub .spt-row input[type="checkbox"]:checked{ background:linear-gradient(135deg,#f5d878,#d4a247); border-color:var(--gold,#f5c977); } .set3-sub .spt-row input[type="checkbox"]:checked::after{ content:""; position:absolute; left:8px; top:3.5px; width:5px; height:10px; border:solid #1a1408; border-width:0 2.5px 2.5px 0; transform:rotate(45deg); } /* Brutal: die alten spt-row !important-Trenner für set3 neutralisieren */ #brutalOverlay .set3-sub .spt-row { border-bottom:none !important; padding:9px 2px !important; } /* v240 ★ FIX: Toggle hatte 2 Knöpfe (::before UND ::after) → "2 Punkte". Doppelten entfernen. */ .settings-toggle-track::after { display: none !important; } /* v245 ★ Intro: goldener Mond über der Bismillah (Style wie BeSabr-Splash, größer) */ .ob-step-splash .ob-moon { display: flex; justify-content: center; margin-bottom: 14px; } .ob-step-splash .ob-moon-svg { width: 66px; height: 66px; color: #f5c977; fill: #f5c977; filter: drop-shadow(0 0 20px rgba(245,201,119,0.45)); } /* v246 ★ Disziplin/Kalender KOMPLETT dicker (User-Wunsch) */ #page-calendar .cal-month-big, #page-calendar .cal-pct-num, #page-calendar .sb-streak-num, #page-calendar .sb-month-pct-big, #page-calendar .csi-num { font-weight: 800 !important; } #page-calendar .cal-mnav-btn, #page-calendar .cal-nav-arr, #page-calendar .cal-hijri-big, #page-calendar .cal-meta-tag, #page-calendar .cal-hijri-desc, #page-calendar .cal-pct-lbl, #page-calendar .ht-week-tab, #page-calendar .ht-habit-name, #page-calendar .ht-dn, #page-calendar .ht-dd, #page-calendar .ht-tpl, #page-calendar .ht-tpl-title, #page-calendar .ht-empty, #page-calendar .ht-checkmark, #page-calendar .ht-del-habit, #page-calendar .sb-goals-title, #page-calendar .css-title { font-weight: 800 !important; } #page-calendar .sb-streak-lbl, #page-calendar .sb-month-pct-title, #page-calendar .sb-month-pct-sub, #page-calendar .csi-lbl, #page-calendar .css-period, #page-calendar .ht-add-row input, #page-calendar .sb-add-goal-row input { font-weight: 700 !important; } /* v246 ★ Mond auch im Ladescreen (Splash), über der Bismillah — Style wie BeSabr */ #splashScreen .sp-moon { display: flex; justify-content: center; margin-bottom: 12px; } #splashScreen .sp-moon-svg { width: 58px; height: 58px; color: #f5c977; fill: #f5c977; filter: drop-shadow(0 0 18px rgba(245,201,119,0.45)); } /* v247 ★ Kalender: Feuer als EIGENES Symbol (dezent im Hintergrund) statt Emoji + mehr Platz für Habit-Namen */ #page-calendar .sb-streak-card { position: relative; overflow: hidden; } #page-calendar .sb-streak-fire { position: absolute !important; right: 12px; top: 50%; transform: translateY(-50%); width: 78px !important; height: 78px !important; font-size: 0 !important; opacity: 0.15; z-index: 0; filter: none !important; pointer-events: none; } #page-calendar .sb-fire-svg { width: 100%; height: 100%; display: block; fill: #f5c977; } #page-calendar .sb-streak-num, #page-calendar .sb-streak-lbl { position: relative; z-index: 1; } /* Habit-Namen 2-zeilig (lesbar), aber Tag-Spalten brauchen Tap-Platz → moderates Namensfeld */ #page-calendar .ht-row { grid-template-columns: 104px repeat(var(--days, 8), 1fr) !important; } #page-calendar .ht-habit-name { white-space: normal !important; text-overflow: clip !important; font-size: 0.78rem !important; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 380px) { #page-calendar .ht-row { grid-template-columns: 92px repeat(var(--days, 8), 1fr) !important; } } /* v250 ★ Habits eintragen zuverlässig: Zellen sind jetzt