/* ============================================================ Sirat — luxury prayer companion Time-aware backgrounds · bilingual · PWA-ready ============================================================ */ :root{ --gold: oklch(80% .15 85); --gold-soft: oklch(89% .1 88); --gold-deep: oklch(64% .15 75); --ink: oklch(96% .015 85); --muted: oklch(74% .03 85); --card-border: oklch(80% .15 85 / .18); --card-border-hover: oklch(80% .15 85 / .5); --gradient-gold: linear-gradient(135deg, oklch(89% .1 88) 0%, oklch(74% .16 75) 100%); --gradient-card: linear-gradient(180deg, oklch(30% .05 262/.55), oklch(18% .04 260/.45)); --shadow-elegant: 0 24px 70px -20px oklch(8% .03 265 / .8); --ease: cubic-bezier(.22, 1, .36, 1); --nav-h: 74px; /* default (night) sky – overridden by time themes */ --sky-top: oklch(12% .04 265); --sky-bot: oklch(18% .05 260); --scene: transparent; --radial: oklch(80% .15 85 / .18); --star-op: 1; } /* ===== time themes (set on ) ===== */ /* ============================================================ وضع الواجهة (فاتح/غامق) — data-mode يعيد فقط ألوان النصوص والبطاقات، ولا يلمس متغيرات مشهد الخلفية (‎--sky-*, --star-op, --orb-*, --mosque-col‎) التي تبقى دوماً حسب الوقت الحقيقي بغض النظر عن الوضع المختار. هذا يضمن أن السماء/النجوم/ القمر تعكس الوقت الفعلي دائماً، والوضع يأثر فقط على "العموم". ============================================================ */ body[data-mode="dark"]{ --ink: oklch(96% .015 85); --muted: oklch(74% .03 85); --gold: oklch(80% .15 85); --gold-soft: oklch(89% .1 88); --gold-deep: oklch(64% .15 75); --card-border: oklch(80% .15 85 / .18); --card-border-hover: oklch(80% .15 85 / .5); --gradient-gold: linear-gradient(135deg, oklch(89% .1 88) 0%, oklch(74% .16 75) 100%); --gradient-card: linear-gradient(180deg, oklch(30% .05 262/.65), oklch(18% .04 260/.58)); } body[data-mode="light"]{ --ink: oklch(26% .05 250); --muted: oklch(42% .06 250); --gold: oklch(46% .13 65); --gold-soft: oklch(42% .13 62); --gold-deep: oklch(42% .13 62); --card-border: oklch(42% .09 245/.3); --card-border-hover: oklch(42% .11 245/.55); --gradient-gold: linear-gradient(135deg, oklch(50% .14 65) 0%, oklch(40% .13 58) 100%); --gradient-card: linear-gradient(180deg, oklch(99% .02 235/.82), oklch(93% .04 225/.75)); } /* بالوضع الفاتح الصريح، نطبّق نفس تحسينات التباين المستخدمة أصلاً بأوقات النهار (العناصر التي كانت مشروطة بـ body[data-time="sunrise/dhuhr/asr"]) بغض النظر عن الوقت الفعلي */ body[data-mode="light"] header, body[data-mode="light"] nav#mainNav a, body[data-mode="light"] .login-btn, body[data-mode="light"] .hero-crescent, body[data-mode="light"] .hero-welcome, body[data-mode="light"] .hero-sub{color:var(--gold-deep)} body[data-time="fajr"]{ /* الفجر — أزرق ليلي يتحول لوردي */ --sky-top: oklch(22% .06 275); --sky-bot: oklch(46% .09 40); --radial: oklch(75% .12 50 / .22); --star-op:.5; --orb-top:34%; --orb-left:22%; --orb-bg:radial-gradient(circle at 40% 40%, oklch(90% .08 55), oklch(72% .13 45)); --orb-glow:0 0 70px 18px oklch(72% .13 45 / .3); --cloud-op:.4; --mosque-col:oklch(14% .05 300/.85); } body[data-time="sunrise"]{ /* الشروق — ذهبي دافئ */ --sky-top: oklch(60% .1 60); --sky-bot: oklch(80% .11 82); --radial: oklch(70% .13 70 / .28); --star-op:0; --ink: oklch(26% .06 55); --muted: oklch(40% .07 55); --gold: oklch(48% .14 60); --gold-soft: oklch(42% .13 58); --gold-deep: oklch(42% .14 58); --card-border: oklch(40% .1 60/.32); --card-border-hover: oklch(40% .12 60/.55); --gradient-gold: linear-gradient(135deg, oklch(52% .15 62) 0%, oklch(40% .14 55) 100%); --gradient-card: linear-gradient(180deg, oklch(98% .03 85/.72), oklch(92% .05 80/.6)); --orb-top:24%; --orb-left:26%; --orb-bg:radial-gradient(circle at 40% 40%, oklch(96% .1 90), oklch(84% .14 78)); --orb-glow:0 0 90px 26px oklch(85% .14 80 / .45); --cloud-op:.7; --mosque-col:oklch(40% .09 55/.5); } body[data-time="dhuhr"]{ /* الظهر — سماء نهار صافية */ --sky-top: oklch(64% .11 235); --sky-bot: oklch(85% .06 220); --radial: oklch(95% .04 210 / .3); --star-op:0; --ink: oklch(26% .05 250); --muted: oklch(42% .06 250); --gold: oklch(46% .13 65); --gold-soft: oklch(42% .13 62); --gold-deep: oklch(42% .13 62); --card-border: oklch(42% .09 245/.3); --card-border-hover: oklch(42% .11 245/.55); --gradient-gold: linear-gradient(135deg, oklch(50% .14 65) 0%, oklch(40% .13 58) 100%); --gradient-card: linear-gradient(180deg, oklch(99% .02 235/.72), oklch(93% .04 225/.6)); --orb-top:12%; --orb-left:50%; --orb-bg:radial-gradient(circle at 45% 45%, oklch(99% .06 95), oklch(92% .12 90)); --orb-glow:0 0 100px 30px oklch(95% .1 92 / .5); --cloud-op:.85; --mosque-col:oklch(45% .08 240/.4); } body[data-time="asr"]{ /* العصر — ذهبي هادئ قبل الغروب */ --sky-top: oklch(60% .1 205); --sky-bot: oklch(78% .1 88); --radial: oklch(78% .11 85 / .28); --star-op:0; --ink: oklch(27% .05 80); --muted: oklch(42% .06 80); --gold: oklch(47% .14 70); --gold-soft: oklch(42% .13 66); --gold-deep: oklch(42% .14 66); --card-border: oklch(42% .1 85/.3); --card-border-hover: oklch(42% .12 85/.55); --gradient-gold: linear-gradient(135deg, oklch(50% .15 72) 0%, oklch(40% .14 62) 100%); --gradient-card: linear-gradient(180deg, oklch(97% .03 90/.72), oklch(90% .05 82/.6)); --orb-top:20%; --orb-left:72%; --orb-bg:radial-gradient(circle at 45% 45%, oklch(96% .1 90), oklch(86% .14 80)); --orb-glow:0 0 90px 26px oklch(88% .13 82 / .45); --cloud-op:.7; --mosque-col:oklch(42% .08 80/.45); } body[data-time="maghrib"]{ /* المغرب — غروب برتقالي/بنفسجي */ --sky-top: oklch(30% .1 300); --sky-bot: oklch(58% .16 40); --radial: oklch(72% .16 45 / .32); --star-op:.35; --orb-top:44%; --orb-left:76%; --orb-bg:radial-gradient(circle at 45% 45%, oklch(88% .13 55), oklch(68% .18 38)); --orb-glow:0 0 80px 24px oklch(70% .18 40 / .4); --cloud-op:.55; --mosque-col:oklch(16% .07 320/.9); } body[data-time="isha"]{ /* العشاء — ليل عميق */ --sky-top: oklch(10% .035 265); --sky-bot: oklch(17% .05 260); --radial: oklch(80% .15 85 / .18); --star-op:1; --orb-top:16%; --orb-left:74%; --orb-bg:radial-gradient(circle at 38% 38%, oklch(92% .02 260), oklch(80% .03 255)); --orb-glow:0 0 60px 14px oklch(85% .04 260 / .28); --orb-crater:radial-gradient(circle at 60% 35%, oklch(60% .02 260/.4) 8%, transparent 9%),radial-gradient(circle at 40% 60%, oklch(60% .02 260/.35) 6%, transparent 7%); --cloud-op:.3; --mosque-col:oklch(6% .03 265/.92); } *{margin:0;padding:0;box-sizing:border-box} @keyframes kenburns{0%{transform:scale(1) translateY(0)}100%{transform:scale(1.08) translateY(-1%)}} @keyframes ctaPulse{0%,100%{box-shadow:0 8px 24px -8px var(--gold-deep)}50%{box-shadow:0 8px 34px -6px var(--gold-deep)}} .cta-primary{animation:ctaPulse 2.6s ease-in-out infinite} .scroll-hint{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);color:var(--gold-soft); opacity:.75;animation:bounceDown 2s ease-in-out infinite;cursor:pointer} body[data-page="home"] .scroll-hint{color:var(--gold-soft)} @keyframes bounceDown{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}} .scroll-hint svg{width:26px;height:26px} ::selection{background:oklch(80% .15 85/.35);color:inherit;-webkit-text-fill-color:inherit} .hero-title::selection,.next-name::selection,.section-head h2::selection,.footer-brand::selection{ background:oklch(80% .15 85/.35)} html{scroll-behavior:smooth} body{ font-family:'Cairo',sans-serif; color:var(--ink); min-height:100vh; min-height:100dvh; overflow-x:hidden; position:relative; padding-bottom:30px; transition:color .8s var(--ease); } html[lang="en"] body{font-family:'Inter',sans-serif} /* ===== background layers ===== */ .bg-sky,.bg-radial,.bg-scene,.stars,.bg-clouds,.bg-orb,.bg-mosque,.bg-hero-img,.bg-motif{position:fixed;inset:0;z-index:0;pointer-events:none} .bg-sky{background:linear-gradient(160deg,var(--sky-top),var(--sky-bot));transition:background .9s var(--ease)} .bg-radial{background:radial-gradient(circle at 50% -5%,var(--radial),transparent 62%);transition:background .9s var(--ease)} /* طبقة تصحيح لوني: تُفعّل فقط عند اختيار وضع صريح (فاتح/غامق)، عشان توحّد مظهر السماء الحقيقية (اللي ممكن تكون ألوان غروب/شروق متنوعة) مع الوضع المطلوب بدل ما تختلط الألوان وتطلع "موحلة". الوقت الفعلي يبقى يتحكم بالنجوم/القمر كما هو. */ .bg-mode-tint{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .5s var(--ease)} body[data-mode="dark"] .bg-mode-tint{opacity:.62;background:linear-gradient(160deg,oklch(14% .03 265),oklch(10% .02 260))} body[data-mode="light"] .bg-mode-tint{opacity:.55;background:linear-gradient(160deg,oklch(97% .015 235),oklch(90% .03 220))} body[data-page="home"] .bg-radial{animation:radialBreathe 10s ease-in-out infinite} @keyframes radialBreathe{0%,100%{opacity:.75}50%{opacity:1}} /* real mosque photo — shown on home only */ .bg-hero-img{background:url('../images/hero-mosque.jpg') center top/cover no-repeat;opacity:0;z-index:1; animation:kenburns 40s ease-in-out infinite alternate; transition:opacity 1s var(--ease)} .bg-hero-img::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg, oklch(8% .03 265/.35) 0%, oklch(8% .03 265/.15) 40%, oklch(8% .03 265/.75) 100%)} body[data-page="home"] .bg-hero-img{opacity:1} /* on home, hide the drawn scene so the photo leads */ body[data-page="home"] .bg-orb, body[data-page="home"] .bg-clouds, body[data-page="home"] .bg-mosque, body[data-page="home"] .bg-motif{opacity:0 !important} body[data-page="home"] .stars{opacity:calc(var(--star-op) * .5)} /* subtle Islamic pattern on inner pages */ .bg-pattern{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0; background:url('../images/pattern.jpg') center/560px repeat; mix-blend-mode:overlay;transition:opacity .8s var(--ease)} body:not([data-page="home"]) .bg-pattern{opacity:.04} .stars{overflow:hidden;opacity:var(--star-op);transition:opacity .9s var(--ease)} .star{position:absolute;background:var(--gold-soft);border-radius:50%; animation:twinkle var(--dur) ease-in-out infinite var(--delay)} @keyframes twinkle{0%,100%{opacity:.1;transform:scale(.8)}50%{opacity:.75;transform:scale(1.15)}} /* shooting star (night only) */ .shooting{position:absolute;width:2px;height:2px;background:var(--gold-soft);border-radius:50%; box-shadow:0 0 6px 1px var(--gold-soft);opacity:0} .shooting::after{content:"";position:absolute;top:50%;inset-inline-end:2px;width:80px;height:1px; background:linear-gradient(to var(--tail,left),var(--gold-soft),transparent);transform:translateY(-50%)} @keyframes shoot{0%{opacity:0;transform:translate(0,0)}8%{opacity:.9}40%{opacity:.9}100%{opacity:0;transform:translate(-260px,150px)}} /* moving orb (sun / moon) */ .bg-orb{overflow:hidden} .orb{position:absolute;top:var(--orb-top,16%);left:var(--orb-left,50%);width:120px;height:120px;border-radius:50%; transform:translateX(-50%);transition:top 1.2s var(--ease),left 1.2s var(--ease),background 1.2s var(--ease),box-shadow 1.2s var(--ease); background:var(--orb-bg,radial-gradient(circle at 40% 40%, oklch(92% .11 88), oklch(78% .15 80))); box-shadow:var(--orb-glow,0 0 80px 20px oklch(85% .13 85 / .35))} .orb::after{content:"";position:absolute;inset:0;border-radius:50%; background:var(--orb-crater,none);opacity:.5} /* drifting clouds */ .bg-clouds{overflow:hidden;opacity:var(--cloud-op,.6);transition:opacity .9s var(--ease)} .cloud{position:absolute;background:radial-gradient(closest-side, oklch(95% .02 240/.5), transparent); border-radius:50%;filter:blur(6px);animation:drift var(--cdur,60s) linear infinite var(--cdelay,0s)} @keyframes drift{from{transform:translateX(120vw)}to{transform:translateX(-40vw)}} /* mosque silhouette at the horizon */ .bg-mosque{top:auto;bottom:0;height:38vh;z-index:0; color:var(--mosque-col,oklch(8% .03 265/.9));transition:color .9s var(--ease)} .bg-mosque svg{position:absolute;bottom:0;width:100%;height:100%;display:block} .bg-mosque .glowline{stroke:var(--gold);stroke-width:.5;opacity:.35;fill:none} /* per-page motif (reflects the nature of each section) */ .bg-motif{z-index:0;opacity:.05;display:flex;align-items:center;justify-content:center; transition:opacity .8s var(--ease);color:var(--gold)} .bg-motif svg{width:min(46vw,380px);height:auto;max-height:44vh;margin-top:14vh} .bg-motif .spin{transform-origin:center;animation:spin 120s linear infinite} .bg-motif .pulse{transform-origin:center;animation:motifPulse 8s ease-in-out infinite} @keyframes spin{to{transform:rotate(360deg)}} @keyframes motifPulse{0%,100%{opacity:.5;transform:scale(.98)}50%{opacity:1;transform:scale(1.02)}} /* ===== header ===== */ header{position:fixed;top:0;inset-inline:0;z-index:30;display:flex;align-items:center;justify-content:space-between; gap:16px;padding:16px 5vw;padding-top:calc(16px + env(safe-area-inset-top)); background:linear-gradient(180deg, oklch(10% .03 265/.7) 0%, oklch(10% .03 265/0) 100%); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} /* on light daytime themes the header wash should be light, not dark */ body[data-time="sunrise"]:not([data-mode="dark"]) header,body[data-time="dhuhr"]:not([data-mode="dark"]) header,body[data-time="asr"]:not([data-mode="dark"]) header,body[data-mode="light"] header{ background:linear-gradient(180deg, oklch(96% .03 85/.6) 0%, oklch(96% .03 85/0) 100%)} .brand{display:flex;flex-direction:row;align-items:center;gap:10px;line-height:1;cursor:pointer;user-select:none} .brand-logo{width:38px;height:38px;flex-shrink:0;filter:drop-shadow(0 2px 6px oklch(10% .03 265/.5))} .brand-text{display:flex;flex-direction:column;line-height:1} html[dir="ltr"] .brand-text{align-items:flex-start} .ar-mark{font-family:'Amiri',serif;font-size:30px;font-weight:700; background:var(--gradient-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} html[lang="en"] .ar-mark{font-family:'Cormorant Garamond',serif;letter-spacing:.06em} .brand-sub{font-size:10px;letter-spacing:.42em;color:var(--gold-soft);opacity:.7;margin-top:3px} nav#mainNav{display:flex;gap:24px} nav#mainNav a{color:var(--ink);text-decoration:none;font-size:15px;font-weight:600; position:relative;transition:color .25s var(--ease),opacity .25s var(--ease); white-space:nowrap;cursor:pointer;opacity:1;text-shadow:0 1px 10px oklch(10% .03 265/.6)} body[data-time="sunrise"]:not([data-mode="dark"]) nav#mainNav a,body[data-time="dhuhr"]:not([data-mode="dark"]) nav#mainNav a,body[data-time="asr"]:not([data-mode="dark"]) nav#mainNav a,body[data-mode="light"] nav#mainNav a{text-shadow:none} nav#mainNav a:hover,nav#mainNav a.active{color:var(--gold-soft)} body[data-time="sunrise"]:not([data-mode="dark"]) nav#mainNav a.active, body[data-time="dhuhr"]:not([data-mode="dark"]) nav#mainNav a.active, body[data-time="asr"]:not([data-mode="dark"]) nav#mainNav a.active,body[data-mode="light"] nav#mainNav a.active{color:var(--gold-deep)} nav#mainNav a.active::after{content:"";position:absolute;bottom:-8px;inset-inline:0;height:2px; background:var(--gradient-gold);border-radius:2px} .header-actions{display:flex;align-items:center;gap:12px} .theme-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px; background:oklch(50% .05 260/.25);border:1px solid var(--card-border);color:var(--ink); border-radius:50%;cursor:pointer;backdrop-filter:blur(10px); transition:border-color .25s var(--ease),transform .2s var(--ease)} .theme-btn:hover{border-color:var(--card-border-hover);transform:translateY(-1px)} .theme-btn svg{width:17px;height:17px} .lang-btn{display:flex;align-items:center;gap:6px;background:oklch(50% .05 260/.25);border:1px solid var(--card-border); color:var(--ink);border-radius:999px;padding:8px 14px;font-size:13px;font-weight:700;cursor:pointer; backdrop-filter:blur(10px);transition:border-color .25s var(--ease),transform .2s var(--ease)} .lang-btn:hover{border-color:var(--card-border-hover);transform:translateY(-1px)} .lang-btn svg{width:16px;height:16px;opacity:.85} .login-btn{font-family:inherit;font-weight:700;font-size:14px;color:oklch(14% .03 265); background:var(--gradient-gold);border:none;border-radius:999px;padding:10px 20px;cursor:pointer; box-shadow:0 6px 20px -6px var(--gold-deep);transition:transform .25s var(--ease)} .login-btn:hover{transform:scale(1.05)} body[data-time="sunrise"]:not([data-mode="dark"]) .login-btn,body[data-time="dhuhr"]:not([data-mode="dark"]) .login-btn,body[data-time="asr"]:not([data-mode="dark"]) .login-btn,body[data-mode="light"] .login-btn{color:oklch(97% .02 85)} /* ===== main ===== */ main{position:relative;z-index:10;padding:8px 5vw 60px;max-width:1120px;margin:0 auto} /* inner pages start below the fixed header; home stays full-bleed under it */ body:not([data-page="home"]) main{padding-top:100px} .view{animation:fadeUp .6s var(--ease) both} @keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} /* ===== home landing ===== */ .hero{text-align:center;padding:70px 0 40px;position:relative} .hero-crescent{width:64px;height:64px;margin:0 auto 18px;color:var(--gold-soft);opacity:.9; animation:float 6s ease-in-out infinite; filter:drop-shadow(0 0 18px oklch(80% .15 85/.45))} body[data-time="sunrise"]:not([data-mode="dark"]) .hero-crescent,body[data-time="dhuhr"]:not([data-mode="dark"]) .hero-crescent,body[data-time="asr"]:not([data-mode="dark"]) .hero-crescent,body[data-mode="light"] .hero-crescent{color:var(--gold-deep)} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} .hero-title{font-family:'Amiri',serif;font-size:clamp(48px,9vw,84px);font-weight:700;line-height:1; background:var(--gradient-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} html[lang="en"] .hero-title{font-family:'Cormorant Garamond',serif;letter-spacing:.04em} .hero-welcome{color:var(--gold-soft);font-size:15px;font-weight:700;margin-top:16px} body[data-time="sunrise"]:not([data-mode="dark"]) .hero-welcome,body[data-time="dhuhr"]:not([data-mode="dark"]) .hero-welcome,body[data-time="asr"]:not([data-mode="dark"]) .hero-welcome,body[data-mode="light"] .hero-welcome{color:var(--gold-deep)} .hero-tagline{color:var(--muted);font-size:clamp(14px,3.5vw,17px);margin-top:14px;max-width:440px; margin-inline:auto;line-height:1.7} .hero-sub{color:var(--gold-soft);font-size:clamp(12px,3vw,15px);margin-top:10px;font-weight:600} body[data-time="sunrise"]:not([data-mode="dark"]) .hero-sub,body[data-time="dhuhr"]:not([data-mode="dark"]) .hero-sub,body[data-time="asr"]:not([data-mode="dark"]) .hero-sub,body[data-mode="light"] .hero-sub{color:var(--gold-deep)} .hero-world{color:var(--muted);font-size:13px;margin-top:6px;opacity:.85} .hero-date{margin:0 auto 14px} .hero-meta{margin-bottom:18px} .hero-clock{font-size:clamp(28px,6vw,40px);font-weight:200;letter-spacing:.18em;margin-top:26px; display:inline-block;padding:10px 26px;border-radius:999px; background:oklch(80% .15 85/.08);border:1px solid var(--card-border);backdrop-filter:blur(10px); box-shadow:0 0 30px -8px oklch(80% .15 85/.25)} .hero-next{color:var(--gold-soft);font-size:14px;font-weight:600;margin-top:12px;min-height:18px; display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap} .hero-next .hn-name{font-weight:700} .hero-next .hn-time{font-weight:300;letter-spacing:.06em} .hero-next .hn-sep{opacity:.5} .hero-next .hn-remain{color:var(--muted);font-weight:600} body[data-time="sunrise"]:not([data-mode="dark"]) .hero-next,body[data-time="dhuhr"]:not([data-mode="dark"]) .hero-next,body[data-time="asr"]:not([data-mode="dark"]) .hero-next,body[data-mode="light"] .hero-next{color:var(--gold-deep)} .hero-actions{display:flex;gap:12px;justify-content:center;margin-top:22px;flex-wrap:wrap} .cta-primary,.cta-ghost{font-family:inherit;font-weight:700;font-size:15px;border-radius:999px; padding:13px 28px;cursor:pointer;transition:transform .25s var(--ease)} .cta-primary{color:oklch(14% .03 265);background:var(--gradient-gold);border:none;box-shadow:0 8px 24px -8px var(--gold-deep)} body[data-time="sunrise"]:not([data-mode="dark"]) .cta-primary,body[data-time="dhuhr"]:not([data-mode="dark"]) .cta-primary,body[data-time="asr"]:not([data-mode="dark"]) .cta-primary,body[data-mode="light"] .cta-primary{color:oklch(97% .02 85)} .cta-ghost{color:var(--ink);background:transparent;border:1px solid var(--card-border)} .cta-primary:hover,.cta-ghost:hover{transform:scale(1.05)} .cta-ghost:hover{border-color:var(--card-border-hover)} /* section headings */ .section-head{text-align:center;margin:64px auto 34px;max-width:600px} .section-head h2{font-family:'Amiri',serif;font-size:clamp(34px,6vw,52px);font-weight:700;line-height:1.1; background:var(--gradient-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} html[lang="en"] .section-head h2{font-family:'Cormorant Garamond',serif} .section-head p{color:var(--muted);font-size:15px;margin-top:12px;line-height:1.7} .section-head::after{content:"";display:block;width:60px;height:2px;margin:20px auto 0; background:var(--gradient-gold);border-radius:2px;opacity:.6} /* features grid */ .features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1080px;margin:0 auto} .feature-card{background:var(--gradient-card);border:1px solid var(--card-border);border-radius:22px; padding:30px 26px;backdrop-filter:blur(16px);text-align:start; opacity:0;transform:translateY(24px); transition:transform .5s var(--ease),border-color .35s var(--ease),opacity .5s var(--ease),box-shadow .35s var(--ease)} .feature-card.reveal{opacity:1;transform:translateY(0)} .feature-card:hover{transform:translateY(-8px) scale(1.015);border-color:var(--card-border-hover); box-shadow:0 16px 40px -14px oklch(80% .15 85/.35)} .feature-icon{width:52px;height:52px;border-radius:15px;display:flex;align-items:center;justify-content:center; background:var(--gradient-gold);margin-bottom:20px;transition:transform .4s var(--ease)} .feature-card:hover .feature-icon{transform:scale(1.1) rotate(-6deg)} .feature-icon svg{width:26px;height:26px;color:oklch(16% .03 265)} body[data-time="sunrise"]:not([data-mode="dark"]) .feature-icon svg,body[data-time="dhuhr"]:not([data-mode="dark"]) .feature-icon svg,body[data-time="asr"]:not([data-mode="dark"]) .feature-icon svg,body[data-mode="light"] .feature-icon svg{color:oklch(97% .02 85)} .feature-card h3{font-size:19px;font-weight:700;margin-bottom:10px} .feature-card p{color:var(--muted);font-size:14px;line-height:1.75} /* devices grid */ .devices-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1000px;margin:0 auto} .device-card{background:var(--gradient-card);border:1px solid var(--card-border);border-radius:22px; padding:34px 18px;text-align:center;backdrop-filter:blur(16px); opacity:0;transform:translateY(24px); transition:transform .5s var(--ease),border-color .35s var(--ease),opacity .5s var(--ease),box-shadow .35s var(--ease)} .device-card.reveal{opacity:1;transform:translateY(0)} .device-card:hover{transform:translateY(-8px) scale(1.02);border-color:var(--card-border-hover); box-shadow:0 16px 40px -14px oklch(80% .15 85/.3)} .device-emoji{width:44px;height:44px;margin:0 auto 16px;color:var(--gold-soft)} .device-emoji svg{width:100%;height:100%} body[data-time="sunrise"]:not([data-mode="dark"]) .device-emoji,body[data-time="dhuhr"]:not([data-mode="dark"]) .device-emoji,body[data-time="asr"]:not([data-mode="dark"]) .device-emoji,body[data-mode="light"] .device-emoji{color:var(--gold-deep)} .device-card h3{font-size:18px;font-weight:700;margin-bottom:6px} .device-card p{color:var(--muted);font-size:13px} .install-wrap{text-align:center;margin-top:34px} /* footer */ .site-footer{text-align:center;margin-top:70px;padding-top:34px;border-top:1px solid var(--card-border)} .footer-brand{font-family:'Amiri',serif;font-size:28px;font-weight:700; background:var(--gradient-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} html[lang="en"] .footer-brand{font-family:'Cormorant Garamond',serif} .footer-text{color:var(--muted);font-size:13px;margin-top:8px} @media(max-width:900px){ .features-grid{grid-template-columns:repeat(2,1fr)} .devices-grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:560px){ .features-grid{grid-template-columns:1fr} } /* ===== HOME PAGE: photo is always dark, force a light readable palette ===== */ body[data-page="home"]{ --ink: oklch(96% .015 85); --muted: oklch(82% .03 85); --gold: oklch(80% .15 85); --gold-soft: oklch(89% .1 88); --gold-deep: oklch(80% .15 85); --card-border: oklch(80% .15 85 / .22); --gradient-gold: linear-gradient(135deg, oklch(89% .1 88) 0%, oklch(74% .16 75) 100%); } body[data-page="home"] header{ background:linear-gradient(180deg, oklch(10% .03 265/.7) 0%, oklch(10% .03 265/0) 100%) !important} body[data-page="home"] nav#mainNav a{text-shadow:0 1px 10px oklch(10% .03 265/.7) !important} body[data-page="home"] .cta-primary{color:oklch(14% .03 265) !important} body[data-page="home"] .hero-sub,body[data-page="home"] .hero-next{color:var(--gold-soft) !important} body[data-page="home"] .feature-icon svg{color:oklch(16% .03 265) !important} /* date pill */ .date-pill{display:flex;align-items:center;justify-content:center;gap:10px;margin:6px auto 44px;width:fit-content; transition:opacity .3s var(--ease); padding:10px 22px;border-radius:999px;font-size:14px;color:var(--gold-soft); background:oklch(40% .05 262/.35);border:1px solid var(--card-border);backdrop-filter:blur(12px)} body[data-time="sunrise"]:not([data-mode="dark"]) .date-pill,body[data-time="dhuhr"]:not([data-mode="dark"]) .date-pill,body[data-time="asr"]:not([data-mode="dark"]) .date-pill,body[data-mode="light"] .date-pill{color:var(--gold-deep)} .date-pill .sep{opacity:.5} /* next prayer card */ .next-card{position:relative;max-width:660px;margin:0 auto 44px;text-align:center;overflow:hidden; background:var(--gradient-card);border:1px solid var(--card-border);border-radius:30px; padding:46px 28px;backdrop-filter:blur(22px);box-shadow:var(--shadow-elegant)} .next-glow{position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,var(--radial),transparent 65%); opacity:.7;pointer-events:none} .next-label{position:relative;font-size:13px;letter-spacing:.34em;color:var(--muted);margin-bottom:14px} .next-name{position:relative;font-family:'Amiri',serif;font-size:clamp(44px,8vw,66px);font-weight:700;line-height:1; background:var(--gradient-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} html[lang="en"] .next-name{font-family:'Cormorant Garamond',serif} .next-time{position:relative;font-size:clamp(26px,5vw,34px);font-weight:300;letter-spacing:.14em;margin-top:8px} .countdown{position:relative;display:inline-block;margin-top:20px;padding:8px 20px;border-radius:999px; font-size:14px;font-weight:600;color:var(--gold-soft); background:oklch(80% .15 85/.12);border:1px solid var(--card-border)} body[data-time="sunrise"]:not([data-mode="dark"]) .countdown,body[data-time="dhuhr"]:not([data-mode="dark"]) .countdown,body[data-time="asr"]:not([data-mode="dark"]) .countdown,body[data-mode="light"] .countdown{color:var(--gold-deep)} .meta-line{position:relative;margin-top:14px;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;min-height:16px} /* city search modal (reuses .name-modal base) */ .city-search-box{max-width:420px} .city-search-field{width:100%;font-family:inherit;font-size:15px;padding:14px 18px;border-radius:14px;color:var(--ink); background:oklch(80% .15 85/.08);border:1px solid var(--card-border);outline:none;margin-bottom:14px} .city-results{display:flex;flex-direction:column;gap:8px;max-height:280px;overflow-y:auto} .city-result{text-align:start;font-family:inherit;font-size:14px;padding:12px 16px;border-radius:12px;cursor:pointer; background:oklch(80% .15 85/.06);border:1px solid var(--card-border);color:var(--ink)} .city-result:hover{border-color:var(--card-border-hover)} .loc-edit-btn{background:oklch(80% .15 85/.12);border:1px solid var(--card-border);border-radius:999px; padding:5px 12px 5px 8px;font-size:12px;font-weight:700;cursor:pointer;color:var(--gold-soft); display:inline-flex;align-items:center;gap:5px} body[data-time="sunrise"]:not([data-mode="dark"]) .loc-edit-btn,body[data-time="dhuhr"]:not([data-mode="dark"]) .loc-edit-btn,body[data-time="asr"]:not([data-mode="dark"]) .loc-edit-btn,body[data-mode="light"] .loc-edit-btn{color:var(--gold-deep)} .loc-edit-icon{font-size:13px} .fav-hint{font-size:11px;color:var(--muted);margin-top:10px} .fav-chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:8px} .fav-chip{font-family:inherit;font-size:12px;font-weight:600;padding:6px 14px;border-radius:999px;cursor:pointer; background:oklch(80% .15 85/.08);border:1px solid var(--card-border);color:var(--muted); display:inline-flex;align-items:center;gap:6px} .fav-chip.active{background:var(--gradient-gold);color:oklch(14% .03 265);border-color:transparent} body[data-time="sunrise"]:not([data-mode="dark"]) .fav-chip.active,body[data-time="dhuhr"]:not([data-mode="dark"]) .fav-chip.active,body[data-time="asr"]:not([data-mode="dark"]) .fav-chip.active,body[data-mode="light"] .fav-chip.active{color:oklch(97% .02 85)} .fav-chip .fav-x{opacity:.6;font-size:10px} .fav-chip .fav-x:hover{opacity:1} .notif-bell{position:absolute;top:12px;inset-inline-start:12px;background:none;border:none;cursor:pointer; font-size:13px;opacity:.45;line-height:1;padding:2px} .notif-bell.on{opacity:1} .share-preview-box{max-width:460px;padding:20px} .share-preview-img{width:100%;border-radius:16px;display:block;margin-bottom:16px;box-shadow:0 12px 32px oklch(10% .03 265/.35)} .share-preview-download{width:100%} .city-fav-toggle{margin-top:16px;width:100%} .notif-settings-btn{margin-inline-start:auto;font-size:16px;padding:8px 14px} .notif-settings-sub{font-size:12px;color:var(--muted);text-align:center;margin:-6px 0 14px} .notif-toggle-list{display:flex;flex-direction:column;gap:4px;margin-top:8px} .notif-toggle-row{display:flex;align-items:center;justify-content:space-between;padding:12px 4px; border-bottom:1px solid var(--card-border)} .notif-toggle-row:last-child{border-bottom:none} .notif-switch{width:44px;height:26px;border-radius:999px;border:1px solid var(--card-border); background:oklch(80% .15 85/.12);cursor:pointer;position:relative;padding:0} .notif-switch-dot{position:absolute;top:2px;inset-inline-start:2px;width:20px;height:20px;border-radius:50%; background:var(--muted);transition:inset-inline-start .2s var(--ease),background .2s var(--ease)} .notif-switch.on{background:var(--gradient-gold);border-color:transparent} .notif-switch.on .notif-switch-dot{inset-inline-start:20px;background:oklch(14% .03 265)} .makrooh-card{max-width:420px;margin:18px auto 0;padding:20px 22px;text-align:center} .makrooh-title{font-size:15px;font-weight:700;color:var(--gold-soft);margin-bottom:4px} body[data-time="sunrise"]:not([data-mode="dark"]) .makrooh-title,body[data-time="dhuhr"]:not([data-mode="dark"]) .makrooh-title,body[data-time="asr"]:not([data-mode="dark"]) .makrooh-title,body[data-mode="light"] .makrooh-title{color:var(--gold-deep)} .makrooh-sub{font-size:12px;color:var(--muted);margin-bottom:14px} .makrooh-rows{display:flex;flex-direction:column;gap:8px} .makrooh-row{display:flex;justify-content:space-between;font-size:13px;padding:8px 4px;border-bottom:1px solid var(--card-border)} .makrooh-row:last-child{border-bottom:none} .makrooh-time{color:var(--muted);font-variant-numeric:tabular-nums} .loc-line{font-size:12px;color:var(--muted)} .weather-chip:not([hidden]){display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--gold-soft); padding:5px 12px;border-radius:999px;background:oklch(80% .15 85/.1);border:1px solid var(--card-border)} body[data-time="sunrise"]:not([data-mode="dark"]) .weather-chip,body[data-time="dhuhr"]:not([data-mode="dark"]) .weather-chip,body[data-time="asr"]:not([data-mode="dark"]) .weather-chip,body[data-mode="light"] .weather-chip{color:var(--gold-deep)} .weather-chip svg{width:15px;height:15px} .weather-chip .temp{font-weight:700} /* prayer grid */ .prayer-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;max-width:1000px;margin:0 auto} .p-card{position:relative;background:var(--gradient-card);border:1px solid var(--card-border);border-radius:20px; padding:24px 12px;text-align:center;backdrop-filter:blur(14px); transition:transform .35s var(--ease),border-color .35s var(--ease)} .p-card:hover{transform:translateY(-6px);border-color:var(--card-border-hover)} .p-card.active{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 12px 34px -12px var(--gold-deep)} .p-card .tag{position:absolute;top:-10px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:700; color:oklch(20% .02 265);background:var(--gradient-gold);padding:3px 12px;border-radius:999px;white-space:nowrap} body[data-time="sunrise"]:not([data-mode="dark"]) .p-card .tag,body[data-time="dhuhr"]:not([data-mode="dark"]) .p-card .tag,body[data-time="asr"]:not([data-mode="dark"]) .p-card .tag,body[data-mode="light"] .p-card .tag{color:oklch(97% .02 85)} .p-card .icon{width:26px;height:26px;margin:0 auto 12px;color:var(--gold-soft);opacity:.9} body[data-time="sunrise"]:not([data-mode="dark"]) .p-card .icon,body[data-time="dhuhr"]:not([data-mode="dark"]) .p-card .icon,body[data-time="asr"]:not([data-mode="dark"]) .p-card .icon,body[data-mode="light"] .p-card .icon{color:var(--gold-deep)} .p-card .name{font-size:15px;color:var(--muted);margin-bottom:8px;font-weight:600} .p-card .time{font-size:22px;font-weight:300;letter-spacing:.05em} .p-card .rakat{font-size:11px;color:var(--muted);margin-top:8px;line-height:1.6} .prayed-btn{margin-top:12px;font-family:inherit;font-size:11px;font-weight:700;padding:5px 12px; border-radius:999px;cursor:pointer;background:oklch(80% .15 85/.1);border:1px solid var(--card-border); color:var(--gold-soft)} body[data-time="sunrise"]:not([data-mode="dark"]) .prayed-btn,body[data-time="dhuhr"]:not([data-mode="dark"]) .prayed-btn,body[data-time="asr"]:not([data-mode="dark"]) .prayed-btn,body[data-mode="light"] .prayed-btn{color:var(--gold-deep)} .p-card.prayed .prayed-btn{background:oklch(72% .17 150/.18);border-color:oklch(72% .17 150/.4);color:oklch(72% .17 150)} .p-card.just-entered{animation:justEntered 2s ease-in-out 2} @keyframes justEntered{0%,100%{box-shadow:0 0 0 1px var(--gold),0 12px 34px -12px var(--gold-deep)}50%{box-shadow:0 0 0 3px var(--gold),0 16px 44px -10px var(--gold-deep)}} .duha-card{max-width:220px;margin:18px auto 0} .duha-note{font-size:11px;color:var(--muted);margin-top:8px} .rm-imsak{margin-top:14px;font-size:14px;color:var(--gold-soft)} body[data-time="sunrise"]:not([data-mode="dark"]) .rm-imsak,body[data-time="dhuhr"]:not([data-mode="dark"]) .rm-imsak,body[data-time="asr"]:not([data-mode="dark"]) .rm-imsak,body[data-mode="light"] .rm-imsak{color:var(--gold-deep)} .qiyam-card{margin-top:18px} /* ===== soon placeholder ===== */ .soon-view:not([hidden]){display:flex;align-items:flex-start;justify-content:center;padding-top:24px} .glass{background:var(--gradient-card);border:1px solid var(--card-border);backdrop-filter:blur(20px);box-shadow:var(--shadow-elegant)} .soon-card{max-width:440px;text-align:center;border-radius:28px;padding:48px 32px} .soon-icon{width:56px;height:56px;margin:0 auto 20px;color:var(--gold-soft)} .soon-icon svg{width:100%;height:100%} .soon-card h2{font-family:'Amiri',serif;font-size:40px;font-weight:700;margin-bottom:12px; background:var(--gradient-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} html[lang="en"] .soon-card h2{font-family:'Cormorant Garamond',serif} .soon-card p{color:var(--muted);font-size:15px;line-height:1.7} /* ===== Prayer times: sub-tabs, controls, monthly table ===== */ .pt-subtabs{display:flex;gap:8px;justify-content:center;margin:20px auto 26px;max-width:360px} .pt-tab{flex:1;font-family:inherit;font-weight:700;font-size:14px;padding:11px 0;border-radius:999px;cursor:pointer; background:var(--gradient-card);border:1px solid var(--card-border);color:var(--muted); backdrop-filter:blur(12px);transition:all .25s var(--ease)} .pt-tab.active{color:oklch(14% .03 265);background:var(--gradient-gold);border-color:transparent} body[data-time="sunrise"]:not([data-mode="dark"]) .pt-tab.active,body[data-time="dhuhr"]:not([data-mode="dark"]) .pt-tab.active,body[data-time="asr"]:not([data-mode="dark"]) .pt-tab.active,body[data-mode="light"] .pt-tab.active{color:oklch(97% .02 85)} .pt-controls{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:18px} .pt-range-btn{font-size:13px;padding:10px 16px;white-space:nowrap} .pt-range-panel{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;align-items:flex-end; max-width:640px;margin:0 auto 22px;padding:18px 20px;border-radius:18px; background:var(--gradient-card);border:1px solid var(--card-border);backdrop-filter:blur(14px)} .pt-range-apply,.pt-range-reset{font-size:13px;padding:10px 18px;height:44px} .pt-field{display:flex;flex-direction:column;gap:6px;min-width:150px} .pt-field label{font-size:12px;color:var(--muted);font-weight:600} .pt-select{font-family:inherit;font-size:14px;padding:10px 12px;border-radius:12px;color:var(--ink); background:var(--gradient-card);border:1px solid var(--card-border);backdrop-filter:blur(12px);cursor:pointer} .pt-select option{background:oklch(16% .04 260);color:oklch(96% .015 85)} .seg{display:flex;background:var(--gradient-card);border:1px solid var(--card-border);border-radius:12px;overflow:hidden;backdrop-filter:blur(12px)} .seg button{flex:1;font-family:inherit;font-size:13px;font-weight:600;padding:10px 14px;cursor:pointer; background:transparent;border:none;color:var(--muted);transition:all .2s var(--ease)} .seg button.active{background:var(--gradient-gold);color:oklch(14% .03 265)} body[data-time="sunrise"]:not([data-mode="dark"]) .seg button.active,body[data-time="dhuhr"]:not([data-mode="dark"]) .seg button.active,body[data-time="asr"]:not([data-mode="dark"]) .seg button.active,body[data-mode="light"] .seg button.active{color:oklch(97% .02 85)} .month-nav{display:flex;align-items:center;gap:8px;background:var(--gradient-card);border:1px solid var(--card-border); border-radius:12px;padding:4px;backdrop-filter:blur(12px)} .mn-btn{width:34px;height:34px;border-radius:9px;border:none;cursor:pointer;font-size:20px; background:oklch(80% .15 85/.1);color:var(--gold-soft);transition:background .2s var(--ease)} .mn-btn:hover{background:oklch(80% .15 85/.2)} body[data-time="sunrise"]:not([data-mode="dark"]) .mn-btn,body[data-time="dhuhr"]:not([data-mode="dark"]) .mn-btn,body[data-time="asr"]:not([data-mode="dark"]) .mn-btn,body[data-mode="light"] .mn-btn{color:var(--gold-deep)} .mn-label{flex:1;text-align:center;font-weight:700;font-size:14px;min-width:120px} .pt-actions{display:flex;gap:10px;justify-content:center;margin-bottom:22px;flex-wrap:wrap} .pt-export{font-size:13px;padding:9px 18px;display:inline-flex;align-items:center;gap:7px} .pt-table-wrap{overflow-x:auto;border-radius:20px;border:1px solid var(--card-border); background:var(--gradient-card);backdrop-filter:blur(14px);box-shadow:var(--shadow-elegant)} .pt-loading{padding:50px 20px;text-align:center;color:var(--muted);font-size:14px} table.pt-table{width:100%;border-collapse:collapse;min-width:640px} .pt-table thead th{position:sticky;top:0;background:oklch(20% .04 262/.95);backdrop-filter:blur(8px); font-size:13px;font-weight:700;color:var(--gold-soft);padding:14px 10px;text-align:center; border-bottom:1px solid var(--card-border);white-space:nowrap} body[data-time="sunrise"]:not([data-mode="dark"]) .pt-table thead th,body[data-time="dhuhr"]:not([data-mode="dark"]) .pt-table thead th,body[data-time="asr"]:not([data-mode="dark"]) .pt-table thead th,body[data-mode="light"] .pt-table thead th{color:var(--gold-deep);background:oklch(92% .04 85/.95)} .pt-table tbody td{padding:12px 10px;text-align:center;font-size:14px;font-weight:300; border-bottom:1px solid oklch(80% .15 85/.06);white-space:nowrap} .pt-table tbody tr:hover{background:oklch(80% .15 85/.05)} .pt-table tbody tr.is-today{background:oklch(80% .15 85/.12)} .pt-table tbody tr.is-today td{color:var(--gold-soft);font-weight:600} body[data-time="sunrise"]:not([data-mode="dark"]) .pt-table tbody tr.is-today td,body[data-time="dhuhr"]:not([data-mode="dark"]) .pt-table tbody tr.is-today td,body[data-time="asr"]:not([data-mode="dark"]) .pt-table tbody tr.is-today td,body[data-mode="light"] .pt-table tbody tr.is-today td{color:var(--gold-deep)} .pt-table .col-day{font-weight:600;color:var(--muted)} .pt-table .col-date{font-weight:600} @media(max-width:560px){ .pt-controls{flex-direction:column;align-items:stretch} .pt-field{min-width:0} } /* ===== Qibla compass ===== */ .qibla-wrap{max-width:520px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center} .compass{position:relative;width:min(80vw,340px);height:min(80vw,340px);margin:10px auto 30px} .compass-ring{position:absolute;inset:0;border-radius:50%; background:var(--gradient-card);border:1px solid var(--card-border); box-shadow:var(--shadow-elegant),inset 0 0 60px oklch(80% .15 85/.06); backdrop-filter:blur(14px);transition:transform .3s var(--ease)} .compass-ring::before{content:"";position:absolute;inset:14px;border-radius:50%; border:1px dashed oklch(60% .13 65/.45)} .compass-ring::after{content:"";position:absolute;inset:34px;border-radius:50%; border:1px solid oklch(60% .13 65/.25)} body[data-time="sunrise"]:not([data-mode="dark"]) .compass-ring::before,body[data-time="dhuhr"]:not([data-mode="dark"]) .compass-ring::before,body[data-time="asr"]:not([data-mode="dark"]) .compass-ring::before,body[data-mode="light"] .compass-ring::before{border-color:oklch(45% .12 60/.5)} body[data-time="sunrise"]:not([data-mode="dark"]) .compass-ring::after,body[data-time="dhuhr"]:not([data-mode="dark"]) .compass-ring::after,body[data-time="asr"]:not([data-mode="dark"]) .compass-ring::after,body[data-mode="light"] .compass-ring::after{border-color:oklch(45% .12 60/.3)} .dir{position:absolute;font-weight:700;font-size:16px;color:var(--gold-soft);z-index:3} body[data-time="sunrise"]:not([data-mode="dark"]) .dir,body[data-time="dhuhr"]:not([data-mode="dark"]) .dir,body[data-time="asr"]:not([data-mode="dark"]) .dir,body[data-mode="light"] .dir{color:var(--gold-deep)} .dir-n{top:12px;left:50%;transform:translateX(-50%);color:oklch(60% .2 25)} .dir-s{bottom:12px;left:50%;transform:translateX(-50%)} .dir-e{right:14px;top:50%;transform:translateY(-50%)} .dir-w{left:14px;top:50%;transform:translateY(-50%)} .ticks{position:absolute;inset:0} .tick{position:absolute;top:0;left:50%;width:1px;height:50%;transform-origin:bottom center; background:linear-gradient(to top,oklch(55% .12 65/.5) 0 10px,transparent 10px)} .tick.major{background:linear-gradient(to top,oklch(50% .13 62/.8) 0 16px,transparent 16px);width:2px} body[data-time="sunrise"]:not([data-mode="dark"]) .tick,body[data-time="dhuhr"]:not([data-mode="dark"]) .tick,body[data-time="asr"]:not([data-mode="dark"]) .tick,body[data-mode="light"] .tick{background:linear-gradient(to top,oklch(45% .12 58/.5) 0 10px,transparent 10px)} body[data-time="sunrise"]:not([data-mode="dark"]) .tick.major,body[data-time="dhuhr"]:not([data-mode="dark"]) .tick.major,body[data-time="asr"]:not([data-mode="dark"]) .tick.major,body[data-mode="light"] .tick.major{background:linear-gradient(to top,oklch(40% .13 55/.85) 0 16px,transparent 16px)} .qibla-pointer{position:absolute;top:50%;left:50%;width:0;height:0;transform-origin:center; transform:translate(-50%,-50%) rotate(0deg);transition:transform .25s var(--ease);z-index:2} .qibla-pointer::before{content:"";position:absolute;left:50%;top:0;transform:translate(-50%,-100%); width:5px;height:112px;border-radius:3px; background:linear-gradient(to top,transparent,var(--gold) 30%,var(--gold-soft)); box-shadow:0 0 12px oklch(80% .15 85/.6)} .kaaba-badge{position:absolute;left:50%;top:-134px;transform:translateX(-50%);z-index:5; width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center; background:linear-gradient(145deg,oklch(22% .02 265),oklch(12% .02 265)); border:1.5px solid var(--gold-soft);box-shadow:0 6px 18px oklch(10% .03 265/.55),0 0 0 3px oklch(80% .15 85/.15)} .kaaba-mark{font-size:19px;line-height:1;filter:drop-shadow(0 1px 2px oklch(0% 0 0/.4))} .compass-center{position:absolute;top:50%;left:50%;width:16px;height:16px;transform:translate(-50%,-50%); border-radius:50%;background:var(--gradient-gold);box-shadow:0 0 0 4px oklch(80% .15 85/.15);z-index:6} .compass-readout{position:absolute;top:52%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:1; display:flex;flex-direction:column;align-items:center;pointer-events:none} .compass-readout-deg{font-size:15px;font-weight:700;color:var(--muted);opacity:.55} .compass-readout-label{font-size:9px;color:var(--muted);opacity:.4;margin-top:2px;max-width:80px} .qs-alt{display:block;font-size:11px;color:var(--muted);margin-top:2px} .qibla-info{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;width:100%} .qibla-stat{flex:1;min-width:130px;background:var(--gradient-card);border:1px solid var(--card-border); border-radius:18px;padding:18px 14px;backdrop-filter:blur(14px)} .qs-label{display:block;font-size:12px;color:var(--muted);margin-bottom:8px} .qs-value{font-size:26px;font-weight:300;color:var(--ink)} .qs-value small{font-size:14px;color:var(--muted)} .qibla-status{margin-top:22px;font-size:15px;font-weight:600;color:var(--gold-soft);min-height:22px} body[data-time="sunrise"]:not([data-mode="dark"]) .qibla-status,body[data-time="dhuhr"]:not([data-mode="dark"]) .qibla-status,body[data-time="asr"]:not([data-mode="dark"]) .qibla-status,body[data-mode="light"] .qibla-status{color:var(--gold-deep)} .qibla-status.facing{color:oklch(72% .17 150)} .qibla-enable{margin-top:20px} .qibla-hint{margin-top:14px;font-size:12px;color:var(--muted);max-width:340px;line-height:1.7} .qibla-calib-hint{margin-top:10px;font-size:12px;color:oklch(75% .15 75);max-width:340px;line-height:1.7; background:oklch(75% .15 75/.1);border:1px solid oklch(75% .15 75/.3);border-radius:12px;padding:10px 16px} .qibla-method-note{margin-top:14px;font-size:11px;color:var(--muted);opacity:.8} .qibla-actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;justify-content:center} .qibla-actions .cta-ghost{font-size:13px;padding:10px 18px} .qibla-map-section{width:100%;max-width:640px;margin:0 auto} .qibla-map-wrap{border-radius:20px;overflow:hidden;border:1px solid var(--card-border);box-shadow:var(--shadow-elegant)} .qibla-map-frame{width:100%;height:340px;background:#e5e5e5} .kaaba-map-icon{font-size:22px;text-align:center;line-height:28px} .qibla-map-open-wrap{text-align:center;margin-top:14px} .qibla-map-open{font-size:13px;padding:9px 18px;display:inline-block} .occasions-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px;max-width:1000px;margin:0 auto} .occasions-disclaimer{max-width:640px;margin:0 auto 28px;font-size:12px;color:var(--muted);line-height:1.9; background:oklch(80% .15 85/.06);border:1px solid var(--card-border);border-radius:14px;padding:14px 20px} .occasion-card{padding:24px 18px;text-align:center} .occ-emoji{font-size:30px;margin-bottom:10px} .occ-name{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:8px;min-height:40px;display:flex;align-items:center;justify-content:center} .occ-date{font-size:14px;color:var(--gold-soft);font-weight:600} body[data-mode="light"] .occ-date{color:var(--gold-deep)} .occ-hijri{font-size:11px;color:var(--muted);margin-top:4px} .occ-countdown{margin-top:12px;font-size:11px;font-weight:700;padding:5px 12px;border-radius:999px;display:inline-block; background:oklch(80% .15 85/.12);color:var(--gold-soft);border:1px solid var(--card-border)} body[data-mode="light"] .occ-countdown{color:var(--gold-deep)} /* ===== bottom tabbar (mobile) ===== */ .tabbar{position:fixed;bottom:0;inset-inline:0;z-index:30;display:none; gap:2px;padding:8px 6px calc(8px + env(safe-area-inset-bottom)); background:oklch(14% .03 265/.85);backdrop-filter:blur(20px);border-top:1px solid var(--card-border); overflow-x:auto;scrollbar-width:none} .tabbar::-webkit-scrollbar{display:none} .tabbar a{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:60px; padding:6px 4px;color:var(--muted);text-decoration:none;font-size:11px;font-weight:600;cursor:pointer; transition:color .2s var(--ease)} .tabbar a.active{color:var(--gold-soft)} .tabbar a svg{width:22px;height:22px} /* ===== responsive ===== */ @media(max-width:900px){ nav#mainNav{display:none} .tabbar{display:flex} .login-btn{display:none} .prayer-grid{grid-template-columns:repeat(3,1fr)} body{padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom))} } @media(max-width:520px){ .prayer-grid{grid-template-columns:repeat(2,1fr)} header{padding-inline:4vw} .ar-mark{font-size:25px} .login-btn{display:none} } @media(prefers-reduced-motion:reduce){ .star{animation:none;opacity:.4} .view{animation:none} *{transition-duration:.01ms !important} } /* ============================================================ SECTIONS: names, quran, adhkar, tasbih, ramadan, tracker, zakat ============================================================ */ /* 99 Names */ .names-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:1000px;margin:0 auto} .name-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px 10px; border-radius:18px;cursor:pointer;text-align:center;font-family:inherit; background:var(--gradient-card);border:1px solid var(--card-border);backdrop-filter:blur(14px); transition:transform .3s var(--ease),border-color .3s var(--ease)} .name-card:hover{transform:translateY(-5px);border-color:var(--card-border-hover)} .name-card.in-quran{border-color:oklch(80% .15 85/.4)} .name-num{position:absolute;top:8px;inset-inline-start:10px;font-size:11px;color:var(--muted);opacity:.6} .name-ar{font-family:'Amiri',serif;font-size:24px;font-weight:700;color:var(--gold-soft)} body[data-time="sunrise"]:not([data-mode="dark"]) .name-ar,body[data-time="dhuhr"]:not([data-mode="dark"]) .name-ar,body[data-time="asr"]:not([data-mode="dark"]) .name-ar,body[data-mode="light"] .name-ar{color:var(--gold-deep)} .name-tr{font-size:12px;color:var(--muted)} .name-badge{position:absolute;top:6px;inset-inline-end:8px;font-size:12px;color:var(--gold);opacity:.7} @media(max-width:760px){.names-grid{grid-template-columns:repeat(3,1fr)}} @media(max-width:480px){.names-grid{grid-template-columns:repeat(2,1fr)}} /* Name modal */ .name-modal:not([hidden]){display:flex} .name-modal[hidden]{display:none} .name-modal{position:fixed;inset:0;z-index:100;align-items:center;justify-content:center;padding:20px} .nm-backdrop{position:absolute;inset:0;background:oklch(8% .03 265/.7);backdrop-filter:blur(6px)} .nm-box{position:relative;max-width:480px;width:100%;background:var(--gradient-card);border:1px solid var(--card-border); border-radius:26px;padding:38px 30px;text-align:center;backdrop-filter:blur(24px);box-shadow:var(--shadow-elegant); max-height:85vh;overflow-y:auto} .nm-close{position:absolute;top:16px;inset-inline-end:16px;width:32px;height:32px;border-radius:50%;border:none; background:oklch(80% .15 85/.12);color:var(--ink);cursor:pointer;font-size:14px} .nm-name{font-family:'Amiri',serif;font-size:46px;font-weight:700; background:var(--gradient-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .nm-tr{font-size:15px;color:var(--muted);margin-top:4px;letter-spacing:.05em} .nm-meaning{font-size:17px;line-height:1.8;margin-top:20px;color:var(--ink)} .nm-verse-wrap{margin-top:22px;padding:20px;border-radius:18px;background:oklch(80% .15 85/.08);border:1px solid var(--card-border)} .nm-verse{font-family:'Amiri',serif;font-size:22px;line-height:2;color:var(--gold-soft)} body[data-time="sunrise"]:not([data-mode="dark"]) .nm-verse,body[data-time="dhuhr"]:not([data-mode="dark"]) .nm-verse,body[data-time="asr"]:not([data-mode="dark"]) .nm-verse,body[data-mode="light"] .nm-verse{color:var(--gold-deep)} .nm-ref{font-size:13px;color:var(--muted);margin-top:10px} .nm-source{font-size:13px;color:var(--gold);margin-top:18px;opacity:.85} body[data-time="sunrise"]:not([data-mode="dark"]) .nm-source,body[data-time="dhuhr"]:not([data-mode="dark"]) .nm-source,body[data-time="asr"]:not([data-mode="dark"]) .nm-source,body[data-mode="light"] .nm-source{color:var(--gold-deep)} /* Quran */ .quran-controls{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:20px} .seg-toggle{font-family:inherit;font-size:14px;font-weight:600;padding:10px 20px;border-radius:12px;cursor:pointer; background:var(--gradient-card);border:1px solid var(--card-border);color:var(--muted);backdrop-filter:blur(12px)} .seg-toggle.active{background:var(--gradient-gold);color:oklch(14% .03 265);border-color:transparent} body[data-time="sunrise"]:not([data-mode="dark"]) .seg-toggle.active,body[data-time="dhuhr"]:not([data-mode="dark"]) .seg-toggle.active,body[data-time="asr"]:not([data-mode="dark"]) .seg-toggle.active,body[data-mode="light"] .seg-toggle.active{color:oklch(97% .02 85)} .quran-audio{display:flex;align-items:center;gap:14px;max-width:760px;margin:0 auto 24px;padding:14px 20px; border-radius:16px;background:var(--gradient-card);border:1px solid var(--card-border);backdrop-filter:blur(14px)} .qa-btn{width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;font-size:16px;flex-shrink:0; background:var(--gradient-gold);color:oklch(14% .03 265);box-shadow:0 6px 18px -6px var(--gold-deep)} body[data-time="sunrise"]:not([data-mode="dark"]) .qa-btn,body[data-time="dhuhr"]:not([data-mode="dark"]) .qa-btn,body[data-time="asr"]:not([data-mode="dark"]) .qa-btn,body[data-mode="light"] .qa-btn{color:oklch(97% .02 85)} .qa-title{font-size:14px;font-weight:600;color:var(--ink)} .ayah-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:2px} .ayah-row{padding:20px 22px;border-radius:16px;background:var(--gradient-card);border:1px solid transparent; transition:border-color .25s var(--ease)} .ayah-row:hover{border-color:var(--card-border)} .ayah-num{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;padding:0 8px; border-radius:50%;background:oklch(80% .15 85/.12);color:var(--gold-soft);font-size:13px;font-weight:700;margin-bottom:12px} body[data-time="sunrise"]:not([data-mode="dark"]) .ayah-num,body[data-time="dhuhr"]:not([data-mode="dark"]) .ayah-num,body[data-time="asr"]:not([data-mode="dark"]) .ayah-num,body[data-mode="light"] .ayah-num{color:var(--gold-deep)} .ayah-ar{font-family:'Amiri',serif;font-size:26px;line-height:2.1;text-align:justify;color:var(--ink)} .ayah-en{font-size:15px;line-height:1.8;color:var(--muted);margin-top:12px;text-align:start} html[lang="en"] .ayah-ar{text-align:right;direction:rtl} /* Adhkar / Duaa */ .adhkar-tabs{max-width:440px} .adhkar-list{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:14px} .adhkar-card{padding:24px 24px;border-radius:20px;background:var(--gradient-card);border:1px solid var(--card-border);backdrop-filter:blur(14px)} .duaa-title{font-size:15px;font-weight:700;color:var(--gold-soft);margin-bottom:14px} body[data-time="sunrise"]:not([data-mode="dark"]) .duaa-title,body[data-time="dhuhr"]:not([data-mode="dark"]) .duaa-title,body[data-time="asr"]:not([data-mode="dark"]) .duaa-title,body[data-mode="light"] .duaa-title{color:var(--gold-deep)} .adhkar-ar{font-family:'Amiri',serif;font-size:22px;line-height:2;text-align:justify;color:var(--ink)} .adhkar-en{font-size:14px;line-height:1.8;color:var(--muted);margin-top:12px} .adhkar-foot{display:flex;justify-content:space-between;align-items:center;margin-top:16px;gap:12px} .adhkar-ref{font-size:12px;color:var(--muted);opacity:.7} .adhkar-count{font-family:inherit;font-size:13px;font-weight:600;padding:7px 16px;border-radius:999px;cursor:pointer; background:oklch(80% .15 85/.12);border:1px solid var(--card-border);color:var(--gold-soft)} body[data-time="sunrise"]:not([data-mode="dark"]) .adhkar-count,body[data-time="dhuhr"]:not([data-mode="dark"]) .adhkar-count,body[data-time="asr"]:not([data-mode="dark"]) .adhkar-count,body[data-mode="light"] .adhkar-count{color:var(--gold-deep)} /* Tasbih */ .tasbih-wrap{max-width:420px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:26px} .tasbih-phrase{width:100%;text-align:center} .tasbih-circle{width:min(70vw,280px);height:min(70vw,280px);border-radius:50%;cursor:pointer;font-family:inherit; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px; background:var(--gradient-card);border:2px solid var(--card-border);backdrop-filter:blur(16px); box-shadow:var(--shadow-elegant);transition:transform .1s var(--ease),border-color .3s var(--ease)} .tasbih-circle:active{transform:scale(.96)} .tasbih-circle.pulse-done{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold),var(--shadow-elegant)} .tasbih-count{font-size:64px;font-weight:200;color:var(--gold-soft)} body[data-time="sunrise"]:not([data-mode="dark"]) .tasbih-count,body[data-time="dhuhr"]:not([data-mode="dark"]) .tasbih-count,body[data-time="asr"]:not([data-mode="dark"]) .tasbih-count,body[data-mode="light"] .tasbih-count{color:var(--gold-deep)} .tasbih-phrase{font-family:'Amiri',serif;font-size:26px;font-weight:700;color:var(--ink)} .tasbih-target{font-size:13px;color:var(--muted)} .tasbih-controls{display:flex;gap:8px;flex-wrap:wrap;justify-content:center} .tasbih-tgt{padding:8px 18px;font-size:14px} .tasbih-tgt.active{background:var(--gradient-gold);color:oklch(14% .03 265);border-color:transparent} /* Ramadan */ .ramadan-card{max-width:520px;margin:0 auto;text-align:center;border-radius:26px;padding:44px 30px} .rm-status{font-size:18px;font-weight:700;color:var(--gold-soft);margin-bottom:6px} body[data-time="sunrise"]:not([data-mode="dark"]) .rm-status,body[data-time="dhuhr"]:not([data-mode="dark"]) .rm-status,body[data-time="asr"]:not([data-mode="dark"]) .rm-status,body[data-mode="light"] .rm-status{color:var(--gold-deep)} .rm-label{font-size:14px;color:var(--muted);margin-bottom:18px} .rm-timer{font-size:clamp(44px,11vw,72px);font-weight:200;letter-spacing:.08em;line-height:1; background:var(--gradient-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .rm-sub{font-size:14px;color:var(--muted);margin-top:16px} /* Tracker */ .tracker-wrap{max-width:480px;margin:0 auto;display:flex;flex-direction:column;gap:12px} .tracker-row{display:flex;align-items:center;gap:16px;padding:18px 22px;border-radius:16px;cursor:pointer;font-family:inherit; background:var(--gradient-card);border:1px solid var(--card-border);backdrop-filter:blur(14px); transition:border-color .25s var(--ease)} .tracker-row.done{border-color:oklch(72% .17 150/.5)} .tr-check{width:28px;height:28px;border-radius:50%;border:2px solid var(--card-border);display:flex;align-items:center; justify-content:center;color:oklch(72% .17 150);font-weight:700;flex-shrink:0} .tracker-row.done .tr-check{border-color:oklch(72% .17 150);background:oklch(72% .17 150/.15)} .tr-name{font-size:17px;font-weight:600;color:var(--ink)} .tracker-progress{max-width:480px;margin:22px auto 0;text-align:center;font-size:15px;font-weight:600;color:var(--gold-soft)} body[data-time="sunrise"]:not([data-mode="dark"]) .tracker-progress,body[data-time="dhuhr"]:not([data-mode="dark"]) .tracker-progress,body[data-time="asr"]:not([data-mode="dark"]) .tracker-progress,body[data-mode="light"] .tracker-progress{color:var(--gold-deep)} /* Zakat */ .zakat-card{max-width:560px;margin:0 auto;border-radius:26px;padding:34px 30px} .zakat-form{display:flex;flex-direction:column;gap:16px} .zakat-input{width:100%} .zakat-result{margin-top:26px;padding-top:22px;border-top:1px solid var(--card-border)} .zk-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;font-size:16px} .zk-label{color:var(--muted)} .zk-val{font-weight:600;color:var(--ink)} .zk-total{margin-top:8px;padding-top:16px;border-top:1px dashed var(--card-border)} .zk-total .zk-label{color:var(--gold-soft);font-weight:700} body[data-time="sunrise"]:not([data-mode="dark"]) .zk-total .zk-label,body[data-time="dhuhr"]:not([data-mode="dark"]) .zk-total .zk-label,body[data-time="asr"]:not([data-mode="dark"]) .zk-total .zk-label,body[data-mode="light"] .zk-total .zk-label{color:var(--gold-deep)} .zk-total .zk-val{font-size:24px;color:var(--gold-soft)} body[data-time="sunrise"]:not([data-mode="dark"]) .zk-total .zk-val,body[data-time="dhuhr"]:not([data-mode="dark"]) .zk-total .zk-val,body[data-time="asr"]:not([data-mode="dark"]) .zk-total .zk-val,body[data-mode="light"] .zk-total .zk-val{color:var(--gold-deep)} /* ===== notification stack ===== */ .notif-stack{position:fixed;bottom:16px;inset-inline-start:16px;z-index:50;display:flex;flex-direction:column; gap:10px;max-width:340px;width:calc(100% - 32px)} @media(max-width:900px){.notif-stack{bottom:calc(var(--nav-h) + 12px)}} .notif-card{position:relative;display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:16px; background:var(--gradient-card);border:1px solid var(--card-border);backdrop-filter:blur(18px); box-shadow:var(--shadow-elegant);animation:notifIn .4s var(--ease) both} @keyframes notifIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .notif-icon{width:36px;height:36px;flex-shrink:0;border-radius:10px;display:flex;align-items:center;justify-content:center; background:var(--gradient-gold)} .notif-icon svg{width:18px;height:18px;color:oklch(16% .03 265)} .notif-body{flex:1;min-width:0} .notif-title{font-size:13px;font-weight:700;color:var(--ink)} .notif-text{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.5} .notif-actions{display:flex;gap:8px;margin-top:10px} .notif-btn{font-family:inherit;font-size:12px;font-weight:700;padding:6px 14px;border-radius:999px;cursor:pointer; background:var(--gradient-gold);color:oklch(14% .03 265);border:none} .notif-close{position:absolute;top:8px;inset-inline-start:8px;width:20px;height:20px;border:none;border-radius:50%; background:oklch(80% .15 85/.12);color:var(--muted);cursor:pointer;font-size:11px;line-height:1} /* ===== prayer progress bar ===== */ .prayer-progress{width:min(280px,80vw);height:5px;border-radius:999px;background:oklch(80% .15 85/.15); margin:16px auto 0;overflow:hidden} .pp-bar{height:100%;width:0%;border-radius:999px;background:var(--gradient-gold);transition:width 1s linear} /* ===== share button ===== */ .share-wrap{margin-top:22px;margin-bottom:6px;text-align:center} .share-btn{display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-size:13px;font-weight:700; padding:9px 18px;border-radius:999px;cursor:pointer;color:var(--ink); background:transparent;border:1px solid var(--card-border);transition:all .25s var(--ease)} .share-btn:hover{border-color:var(--card-border-hover);transform:translateY(-1px)} .share-btn::before{content:"↗";font-size:14px} /* ===== live stats bar ===== */ .stats-bar{display:flex;justify-content:center;gap:34px;flex-wrap:wrap;max-width:700px;margin:56px auto 0; padding:22px 20px;border-radius:20px;background:var(--gradient-card);border:1px solid var(--card-border); backdrop-filter:blur(14px)} .stat-item{text-align:center} .stat-num{font-size:24px;font-weight:700;color:var(--gold-soft);display:block} body[data-time="sunrise"]:not([data-mode="dark"]) .stat-num,body[data-time="dhuhr"]:not([data-mode="dark"]) .stat-num,body[data-time="asr"]:not([data-mode="dark"]) .stat-num,body[data-mode="light"] .stat-num{color:var(--gold-deep)} .stat-label{font-size:12px;color:var(--muted);margin-top:4px} /* ===== daily quote ===== */ .quote-card{max-width:640px;margin:34px auto 0;text-align:center;border-radius:24px;padding:36px 30px;position:relative} .quote-card .quote-text,.quote-card .quote-ref{transition:opacity .3s var(--ease)} .quote-card.fading .quote-text,.quote-card.fading .quote-ref{opacity:0} .quote-mark{position:absolute;top:6px;inset-inline-start:22px;font-family:'Amiri',serif;font-size:60px; color:var(--gold-soft);opacity:.3;line-height:1} .quote-text{font-family:'Amiri',serif;font-size:20px;line-height:1.9;color:var(--ink)} .quote-ref{margin-top:14px;font-size:12px;color:var(--muted)} /* ===== Ramadan teaser ===== */ .ramadan-teaser:not([hidden]){max-width:640px;margin:24px auto 0;text-align:center;border-radius:20px;padding:20px 24px; background:var(--gradient-card);border:1px solid var(--card-border);backdrop-filter:blur(14px); display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;cursor:pointer} .ramadan-teaser .rt-emoji{font-size:26px} .ramadan-teaser .rt-text{font-size:14px;font-weight:600;color:var(--gold-soft)} body[data-time="sunrise"]:not([data-mode="dark"]) .ramadan-teaser .rt-text,body[data-time="dhuhr"]:not([data-mode="dark"]) .ramadan-teaser .rt-text,body[data-time="asr"]:not([data-mode="dark"]) .ramadan-teaser .rt-text,body[data-mode="light"] .ramadan-teaser .rt-text{color:var(--gold-deep)} @media(max-width:560px){ .stats-bar{gap:20px;padding:18px} .stat-num{font-size:20px} }