:root{--ink:#12201f;--muted:#61706d;--paper:#f7f5ef;--cream:#fffdf8;--teal:#0b4545;--teal2:#0f5c58;--navy:#091a2b;--gold:#c9a65a;--gold2:#ead9a5;--line:rgba(13,69,69,.13);--shadow:0 24px 70px rgba(10,39,39,.11);--radius:28px;--max:1180px} *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.7;-webkit-font-smoothing:antialiased}a{color:var(--teal2)}img{max-width:100%;height:auto}.container{width:min(var(--max),calc(100% - 40px));margin:auto}.skip{position:absolute;left:-9999px}.skip:focus{left:20px;top:20px;z-index:9999;background:white;padding:12px 16px;border-radius:12px}.site-header{position:sticky;top:0;z-index:100;background:rgba(247,245,239,.88);backdrop-filter:blur(18px);border-bottom:1px solid rgba(12,69,69,.08)}.nav-shell{display:flex;align-items:center;height:82px;gap:26px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font-weight:800;letter-spacing:-.02em}.brand img{width:44px;height:44px;border-radius:14px;object-fit:cover;box-shadow:0 5px 18px rgba(7,35,35,.16)}.brand small{display:block;font-weight:600;color:var(--muted);font-size:11px;letter-spacing:.02em}.desktop-nav{display:flex;align-items:center;gap:2px;margin-left:auto}.nav-group{position:relative}.nav-link,.icon-btn{display:inline-flex;align-items:center;gap:7px;padding:12px 12px;border-radius:12px;color:#243533;text-decoration:none;font-size:14px;font-weight:700;border:0;background:transparent;cursor:pointer}.nav-link:hover,.icon-btn:hover{background:#fff}.mega{position:absolute;top:48px;right:0;width:310px;padding:12px;background:rgba(255,253,248,.98);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);display:none}.nav-group:hover .mega,.nav-group:focus-within .mega{display:grid}.mega a{padding:10px 12px;border-radius:11px;text-decoration:none;color:#31423f;font-size:14px}.mega a:hover{background:#f1eee5;color:var(--teal)}.nav-actions{display:flex;gap:6px}.menu-btn{display:none}.hero{position:relative;overflow:hidden;background:var(--navy);color:white;min-height:650px;display:flex;align-items:center}.hero-bg{position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(4,21,29,.94) 0%,rgba(4,28,34,.80) 46%,rgba(4,25,31,.28) 100%),url('/assets/media/2024/11/mosque-615415_1920-1.webp');background-size:cover;background-position:center}.hero::after{content:"";position:absolute;inset:auto -10% -42% 38%;height:520px;background:radial-gradient(circle,rgba(201,166,90,.20),transparent 64%)}.hero-inner{position:relative;z-index:1;padding:100px 0 88px;display:grid;grid-template-columns:1.05fr .72fr;gap:70px;align-items:end}.eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--gold2);text-transform:uppercase;font-size:12px;letter-spacing:.17em;font-weight:800}.eyebrow::before{content:"";width:28px;height:1px;background:var(--gold)}h1,h2,h3{line-height:1.12;letter-spacing:-.035em}.hero h1{font-family:Georgia,"Times New Roman",serif;font-weight:500;font-size:clamp(49px,6vw,82px);margin:18px 0 22px;max-width:820px}.hero p{font-size:19px;color:rgba(255,255,255,.78);max-width:670px;line-height:1.65}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:999px;padding:14px 20px;text-decoration:none;font-weight:800;font-size:14px;transition:.2s}.btn-primary{background:linear-gradient(135deg,#f0dfab,#cda956);color:#102726;box-shadow:0 12px 30px rgba(201,166,90,.20)}.btn-primary:hover{transform:translateY(-2px)}.btn-ghost{border:1px solid rgba(255,255,255,.22);color:white;background:rgba(255,255,255,.06)}.hero-card{padding:25px;border-radius:28px;border:1px solid rgba(255,255,255,.16);background:rgba(6,32,38,.58);backdrop-filter:blur(15px);box-shadow:0 25px 70px rgba(0,0,0,.18)}.hero-card strong{font-size:17px}.hero-card p{font-size:14px;margin:8px 0 18px}.mini-links{display:grid;grid-template-columns:1fr 1fr;gap:8px}.mini-links a{padding:11px 12px;border-radius:12px;background:rgba(255,255,255,.08);color:white;text-decoration:none;font-size:13px;font-weight:700}.mini-links a:hover{background:rgba(255,255,255,.15)}.section{padding:92px 0}.section.tight{padding:72px 0}.section-head{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:35px}.kicker{color:var(--teal2);text-transform:uppercase;font-size:12px;letter-spacing:.15em;font-weight:900}.section h2{font-family:Georgia,"Times New Roman",serif;font-size:clamp(36px,4.5vw,57px);font-weight:500;margin:7px 0 0}.section-head p{max-width:520px;color:var(--muted);margin:0}.prayer-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.prayer{position:relative;aspect-ratio:.65;overflow:hidden;border-radius:25px;background:#102e31;color:white;text-decoration:none;box-shadow:0 18px 42px rgba(11,69,69,.12)}.prayer img{width:100%;height:100%;object-fit:cover;transition:.5s}.prayer::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 38%,rgba(5,22,27,.87) 100%)}.prayer:hover img{transform:scale(1.045)}.prayer-copy{position:absolute;z-index:2;left:18px;right:18px;bottom:18px}.prayer-copy small{color:#e9d59e;font-weight:800}.prayer-copy h3{margin:4px 0 0;font-size:22px;color:white}.journey-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.journey{background:var(--cream);padding:27px;border-radius:26px;border:1px solid var(--line);text-decoration:none;color:var(--ink);transition:.25s;min-height:205px;position:relative;overflow:hidden}.journey:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:rgba(201,166,90,.5)}.j-icon{width:52px;height:52px;border-radius:17px;display:grid;place-items:center;background:linear-gradient(145deg,#e9d79f,#caa55b);color:var(--navy);font-size:23px;margin-bottom:30px}.journey h3{font-size:22px;margin:0 0 8px}.journey p{color:var(--muted);font-size:14px;margin:0;line-height:1.6}.journey .arrow{position:absolute;right:22px;bottom:20px;font-weight:900;color:var(--teal)}.feature{background:linear-gradient(135deg,var(--teal),var(--navy));color:white;border-radius:36px;overflow:hidden;display:grid;grid-template-columns:1fr .82fr;min-height:440px;box-shadow:var(--shadow)}.feature-copy{padding:60px}.feature h2{font-size:clamp(39px,4.6vw,60px);margin:10px 0 18px}.feature p{color:rgba(255,255,255,.76);max-width:590px}.feature-image{min-height:380px;background:url('/assets/media/2024/11/makkah1.webp') center/cover}.chips{display:flex;gap:9px;flex-wrap:wrap;margin-top:25px}.chip{padding:9px 12px;border-radius:999px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.12);font-size:12px;font-weight:750;color:#f7edce}.card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.guide-card{background:var(--cream);border:1px solid var(--line);border-radius:23px;padding:23px;text-decoration:none;color:var(--ink);min-height:190px;display:flex;flex-direction:column}.guide-card .cat{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--teal2);font-weight:900}.guide-card h3{font-size:20px;margin:12px 0}.guide-card p{color:var(--muted);font-size:13px;line-height:1.55;margin:0}.guide-card .more{margin-top:auto;padding-top:15px;font-weight:800;font-size:13px;color:var(--teal)}.cta{padding:55px;border:1px solid rgba(201,166,90,.4);background:linear-gradient(145deg,#fffcf4,#f2ead7);border-radius:34px;display:flex;justify-content:space-between;align-items:center;gap:30px}.cta h2{font-size:40px;margin:0 0 10px}.cta p{color:var(--muted);margin:0}.site-footer{background:#071a22;color:rgba(255,255,255,.72);padding:60px 0 28px;margin-top:80px}.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px}.foot-brand{font-size:24px;color:white;font-family:Georgia,serif}.foot-grid h4{color:#ecdcae;margin:0 0 14px;font-size:13px;text-transform:uppercase;letter-spacing:.11em}.foot-grid a{display:block;color:rgba(255,255,255,.67);text-decoration:none;margin:7px 0;font-size:13px}.foot-grid a:hover{color:white}.copyright{margin-top:45px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);font-size:12px;display:flex;justify-content:space-between;gap:20px}.mobile-panel{display:none}.page-hero{background:linear-gradient(145deg,#0a3a3d,#081a2b);color:white;padding:75px 0 68px;position:relative;overflow:hidden}.page-hero::after{content:"";position:absolute;right:-10%;top:-40%;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(201,166,90,.2),transparent 68%)}.crumbs{font-size:12px;color:rgba(255,255,255,.58);margin-bottom:23px}.crumbs a{color:#e9d9ad;text-decoration:none}.page-hero h1{position:relative;z-index:1;font-family:Georgia,serif;font-size:clamp(42px,5vw,65px);font-weight:500;margin:0;max-width:950px}.page-hero .lead{max-width:760px;color:rgba(255,255,255,.72);margin:18px 0 0;font-size:17px}.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:50px;align-items:start;padding:64px 0}.article{background:var(--cream);border:1px solid var(--line);border-radius:28px;padding:clamp(25px,4vw,54px);box-shadow:0 14px 40px rgba(12,54,54,.05);min-width:0}.article h2{font-family:Georgia,serif;font-size:34px;margin-top:1.65em}.article h3{font-size:24px;margin-top:1.5em}.article p{margin:1em 0}.article strong{color:#132e2a}.article img{display:block;margin:24px auto;border-radius:18px}.article figure{margin:28px auto}.article figcaption{font-size:12px;color:var(--muted);text-align:center}.article table{width:100%;border-collapse:collapse;display:block;overflow-x:auto}.article td,.article th{border:1px solid #dcd9d0;padding:10px 12px}.article blockquote{margin:28px 0;border-left:4px solid var(--gold);padding:8px 22px;background:#f6f0e2;border-radius:0 14px 14px 0}.article iframe{max-width:100%;border:0;border-radius:18px}.article .wp-block-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.article .wp-block-buttons{display:flex;gap:10px;flex-wrap:wrap}.article .wp-block-button__link{display:inline-flex;padding:10px 16px;border-radius:999px;background:var(--teal)!important;color:white!important;text-decoration:none}.article .has-text-align-center{text-align:center}.article .aligncenter{margin-left:auto;margin-right:auto;text-align:center}.article ul,.article ol{padding-left:24px}.toc{position:sticky;top:112px}.toc-box{border:1px solid var(--line);border-radius:20px;padding:19px;background:rgba(255,253,248,.72)}.toc h4{margin:0 0 12px;font-size:12px;text-transform:uppercase;letter-spacing:.11em;color:var(--muted)}.toc a{display:block;text-decoration:none;color:#485956;font-size:13px;line-height:1.35;padding:7px 0}.toc a:hover{color:var(--teal)}.toc .h3{padding-left:12px;color:#71807d}.related{margin-top:28px}.related h4{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}.related a{display:block;text-decoration:none;padding:10px 0;border-top:1px solid var(--line);font-size:13px;font-weight:750;color:var(--teal)}.all-guides{padding:70px 0}.filter-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:30px}.filter{padding:9px 13px;border-radius:999px;border:1px solid var(--line);background:var(--cream);cursor:pointer;font-weight:750;color:#44504f}.filter.active{background:var(--teal);color:white}.guides-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.search-page{padding:70px 0}.search-input{width:100%;font:inherit;font-size:18px;padding:18px 20px;border-radius:18px;border:1px solid var(--line);background:white;outline:none}.search-input:focus{box-shadow:0 0 0 4px rgba(15,92,88,.1);border-color:#4b8f89}.search-results{margin-top:20px}.search-result{display:block;padding:20px;border-radius:18px;background:white;border:1px solid var(--line);text-decoration:none;color:var(--ink);margin:10px 0}.search-result small{color:var(--teal2);font-weight:800}.search-result h3{margin:5px 0}.search-result p{color:var(--muted);margin:0;font-size:13px}.contact-box{padding:26px;border-radius:22px;background:#eff3ee;border:1px solid var(--line);margin-top:25px}.notice{background:#fff7dc;border:1px solid #ead69c;border-radius:15px;padding:14px 16px;font-size:13px}.search-modal{position:fixed;inset:0;z-index:500;background:rgba(5,19,24,.72);backdrop-filter:blur(8px);display:none;padding:8vh 20px}.search-modal.open{display:block}.search-dialog{max-width:760px;margin:auto;background:var(--paper);border-radius:25px;padding:22px;box-shadow:0 35px 100px rgba(0,0,0,.35)}.search-top{display:flex;gap:10px}.search-top input{flex:1;padding:16px 17px;font:inherit;border:1px solid var(--line);border-radius:14px}.close-search{border:0;border-radius:14px;background:#e8e5dc;padding:0 16px;cursor:pointer}.modal-results{max-height:60vh;overflow:auto;margin-top:12px}.modal-results a{display:block;text-decoration:none;padding:13px;border-radius:13px;color:var(--ink)}.modal-results a:hover{background:white}.modal-results small{display:block;color:var(--teal2)} @media(max-width:1000px){.desktop-nav{display:none}.menu-btn{display:inline-flex}.nav-actions{margin-left:auto}.hero-inner{grid-template-columns:1fr}.hero-card{max-width:620px}.prayer-grid{grid-template-columns:repeat(3,1fr)}.journey-grid{grid-template-columns:repeat(2,1fr)}.card-grid{grid-template-columns:repeat(2,1fr)}.feature{grid-template-columns:1fr}.feature-image{min-height:330px}.article-layout{grid-template-columns:1fr}.toc{position:relative;top:auto;order:1}.toc-box{display:none}.guides-grid{grid-template-columns:repeat(2,1fr)}.foot-grid{grid-template-columns:1.4fr 1fr 1fr}.mobile-panel{position:fixed;inset:82px 0 0;z-index:99;background:rgba(247,245,239,.98);padding:24px 20px;overflow:auto}.mobile-panel.open{display:block}.mobile-panel a{display:block;padding:12px 8px;border-bottom:1px solid var(--line);text-decoration:none;font-weight:750;color:var(--ink)}.mobile-panel .sub{padding-left:22px;font-size:13px;color:var(--muted)}} @media(max-width:680px){.container{width:min(100% - 28px,var(--max))}.brand small{display:none}.hero{min-height:0}.hero-inner{padding:74px 0 65px;gap:38px}.hero h1{font-size:48px}.hero p{font-size:16px}.mini-links{grid-template-columns:1fr 1fr}.section{padding:67px 0}.section-head{display:block}.section-head p{margin-top:14px}.prayer-grid{grid-template-columns:repeat(2,1fr)}.prayer:last-child{grid-column:1/-1;aspect-ratio:1.5}.journey-grid,.card-grid,.guides-grid{grid-template-columns:1fr}.feature-copy{padding:34px}.cta{padding:32px;display:block}.cta .btn{margin-top:22px}.foot-grid{grid-template-columns:1fr 1fr}.foot-grid>div:first-child{grid-column:1/-1}.copyright{display:block}.copyright span{display:block}.copyright span+span{margin-top:8px}.article{padding:25px 18px;border-radius:20px}.article .wp-block-columns{grid-template-columns:1fr}.page-hero{padding:55px 0}.page-hero h1{font-size:43px}} .article .wp-block-embed{margin:24px 0}.article .wp-block-embed__wrapper{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#071a22}.article .wp-block-embed__wrapper iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.article .wp-element-caption{margin-top:8px;color:var(--muted);font-size:12px} /* === ROYAL CELESTIAL THEME v2 === */ :root{ --ink:#23133c; --muted:#736882; --paper:#faf7ff; --cream:#fffaff; --teal:#43216f; --teal2:#6d35a8; --navy:#120525; --gold:#d6b34f; --gold2:#f1df9a; --violet:#7a35c9; --amethyst:#9f57df; --nebula:#c143c8; --night:#110522; --line:rgba(86,41,126,.14); --shadow:0 26px 72px rgba(48,15,79,.15); } body{ background: radial-gradient(circle at 8% 12%,rgba(157,88,220,.09),transparent 24rem), radial-gradient(circle at 94% 38%,rgba(203,67,196,.06),transparent 23rem), linear-gradient(180deg,#fbf8ff 0%,#f8f4fd 45%,#fbf8ff 100%); color:var(--ink); } a{color:#6a2fa6} .site-header{ background:linear-gradient(90deg,rgba(18,5,37,.96),rgba(39,10,67,.94),rgba(20,6,42,.96)); border-bottom:1px solid rgba(232,203,111,.19); box-shadow:0 8px 30px rgba(20,3,40,.14); } .site-header::after{ content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px; background:linear-gradient(90deg,transparent,rgba(233,202,103,.58),transparent); } .brand{color:#fff}.brand small{color:rgba(244,231,255,.66)} .brand img{border:1px solid rgba(236,207,105,.38);box-shadow:0 6px 22px rgba(142,57,195,.25)} .nav-link,.icon-btn{color:rgba(255,255,255,.86)} .nav-link:hover,.icon-btn:hover{background:rgba(255,255,255,.08);color:#fff} .mega{ background:linear-gradient(180deg,rgba(255,251,255,.99),rgba(249,243,255,.99)); border:1px solid rgba(119,56,165,.16); box-shadow:0 26px 70px rgba(31,5,53,.24); } .mega::before{ content:"";position:absolute;inset:0 18px auto;height:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.72 } .mega a{color:#3f2b52}.mega a:hover{background:#f0e8fb;color:#58268d} .hero{ background:#10031f; min-height:690px; isolation:isolate; } .hero-bg{ background-image: linear-gradient(90deg,rgba(15,3,34,.97) 0%,rgba(36,8,66,.89) 42%,rgba(42,8,73,.56) 72%,rgba(12,3,29,.42) 100%), radial-gradient(circle at 68% 22%,rgba(191,68,209,.54),transparent 34%), radial-gradient(circle at 85% 55%,rgba(92,45,200,.45),transparent 38%), url('/assets/media/2024/11/mosque-615415_1920-1.webp'); background-size:cover,cover,cover,cover; background-position:center,center,center,center; filter:saturate(1.18) contrast(1.03); } .hero-bg::after{ content:"";position:absolute;inset:34px;border:2px solid rgba(229,198,93,.72); box-shadow:inset 0 0 35px rgba(240,212,113,.05),0 0 25px rgba(112,47,161,.08); pointer-events:none; } .hero::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.72; background-image: radial-gradient(circle,rgba(255,255,255,.95) 0 1px,transparent 1.6px), radial-gradient(circle,rgba(241,220,151,.82) 0 1px,transparent 1.5px), radial-gradient(circle,rgba(214,166,255,.75) 0 1px,transparent 1.7px), radial-gradient(circle at 72% 32%,rgba(255,255,255,.9) 0 1.7px,transparent 2.3px), radial-gradient(circle at 82% 18%,rgba(245,213,116,.78) 0 1.5px,transparent 2.2px); background-size:118px 118px,173px 173px,227px 227px,100% 100%,100% 100%; background-position:4px 7px,46px 29px,82px 11px,0 0,0 0; mask-image:linear-gradient(90deg,rgba(0,0,0,.35),#000 46%,#000 100%); } .hero::after{ content:"";position:absolute;z-index:0;inset:auto -8% -48% 28%;height:650px; background: radial-gradient(circle at 50% 45%,rgba(185,70,215,.34),transparent 38%), radial-gradient(circle at 72% 35%,rgba(100,70,230,.28),transparent 33%), radial-gradient(circle,rgba(222,187,80,.16),transparent 66%); filter:blur(8px); } .hero-inner{padding:112px 0 100px;gap:76px}.hero h1{ font-family:Palatino Linotype,Palatino,Georgia,"Times New Roman",serif; font-size:clamp(52px,6.4vw,88px); text-shadow:0 4px 30px rgba(73,17,105,.45); } .hero p{color:rgba(249,241,255,.82)} .eyebrow{color:#f4df96;letter-spacing:.2em}.eyebrow::before{background:linear-gradient(90deg,var(--gold),#f6e6a9)} .btn-primary{ background:linear-gradient(135deg,#f6e7a4 0%,#d8b34f 52%,#b8872d 100%); color:#2a163d; box-shadow:0 14px 34px rgba(207,164,54,.26),inset 0 1px 0 rgba(255,255,255,.5); } .btn-primary:hover{box-shadow:0 18px 42px rgba(207,164,54,.34);transform:translateY(-2px) scale(1.01)} .btn-ghost{border-color:rgba(240,217,139,.34);background:rgba(85,35,120,.23);color:#fff} .btn-ghost:hover{background:rgba(129,54,171,.34);border-color:rgba(240,217,139,.55)} .hero-card{ position:relative; background:linear-gradient(145deg,rgba(42,10,70,.75),rgba(17,5,38,.72)); border:1px solid rgba(235,205,103,.36); box-shadow:0 28px 80px rgba(8,1,21,.36),inset 0 0 45px rgba(147,61,186,.08); } .hero-card::before{ content:"✦";position:absolute;right:22px;top:16px;color:#e5c45f;font-size:18px;text-shadow:0 0 16px rgba(236,203,94,.5) } .hero-card p{color:rgba(246,235,255,.72)} .mini-links a{background:linear-gradient(135deg,rgba(255,255,255,.085),rgba(176,83,216,.08));border:1px solid rgba(255,255,255,.07)} .mini-links a:hover{background:rgba(182,87,221,.18);border-color:rgba(233,204,106,.2)} .section{position:relative}.section-head .kicker,.kicker{color:#7437aa}.section h2,.cta h2{ font-family:Palatino Linotype,Palatino,Georgia,"Times New Roman",serif; color:#29133e; } .section-head>div{position:relative}.section-head>div::after{ content:"✦ · ✧";display:block;margin-top:11px;color:#c49a39;font-size:11px;letter-spacing:.3em;opacity:.72 } .prayer{ background:#1f0a36; border:1px solid rgba(228,196,90,.20); box-shadow:0 22px 52px rgba(57,17,87,.18); } .prayer::before{content:"";position:absolute;z-index:2;inset:9px;border:1px solid rgba(242,218,137,.22);border-radius:18px;pointer-events:none} .prayer::after{background:linear-gradient(180deg,rgba(30,4,55,.03) 20%,rgba(32,4,57,.38) 55%,rgba(12,2,28,.95) 100%)} .prayer:hover{box-shadow:0 28px 64px rgba(74,22,112,.28),0 0 0 1px rgba(219,183,70,.18)} .prayer-copy small{color:#edd27b}.prayer-copy h3{text-shadow:0 2px 12px rgba(0,0,0,.38)} main>.section:nth-of-type(3){ background: radial-gradient(circle at 15% 25%,rgba(146,69,198,.09),transparent 24rem), radial-gradient(circle at 82% 75%,rgba(203,67,196,.06),transparent 22rem), linear-gradient(180deg,rgba(250,247,255,0),rgba(245,237,252,.72),rgba(250,247,255,0)); } .journey{ background:linear-gradient(150deg,rgba(255,253,255,.96),rgba(248,242,253,.96)); border:1px solid rgba(108,50,152,.13); box-shadow:0 12px 35px rgba(63,20,93,.05); } .journey::before{ content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:-85px;top:-90px; background:radial-gradient(circle,rgba(157,77,204,.12),transparent 68%);transition:.3s } .journey:hover{border-color:rgba(207,168,56,.48);box-shadow:0 24px 58px rgba(68,20,100,.13)} .journey:hover::before{transform:scale(1.16)} .j-icon{ background:linear-gradient(145deg,#ecd880,#c89c34); color:#301145;box-shadow:0 9px 22px rgba(185,135,37,.18) } .journey .arrow{color:#7035a5} .feature{ position:relative; background: radial-gradient(circle at 20% 20%,rgba(183,58,200,.30),transparent 30%), radial-gradient(circle at 68% 0%,rgba(104,60,211,.28),transparent 35%), linear-gradient(135deg,#2b0a49 0%,#1d0739 48%,#0f0627 100%); border:1px solid rgba(227,194,83,.28); box-shadow:0 30px 85px rgba(44,8,72,.25); } .feature::after{ content:"";position:absolute;inset:18px;border:1px solid rgba(237,207,107,.18);border-radius:25px;pointer-events:none;z-index:2 } .feature-copy{position:relative;z-index:3}.feature h2{font-family:Palatino Linotype,Palatino,Georgia,serif;color:#fff} .feature p{color:rgba(246,235,255,.76)} .feature-image{position:relative;filter:saturate(.92) contrast(1.05)} .feature-image::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#190632 0%,rgba(34,7,61,.35) 35%,rgba(45,8,68,.05) 100%)} .chip{background:rgba(151,67,191,.14);border-color:rgba(234,205,104,.18);color:#f2df9d} .celestial-spotlight{padding-top:50px;padding-bottom:50px} .verse-spotlight{ position:relative;overflow:hidden;min-height:430px;border-radius:38px;padding:62px; display:grid;grid-template-columns:1fr .72fr;align-items:center;gap:45px;color:white; background: radial-gradient(circle at 72% 28%,rgba(218,76,224,.62),transparent 21%), radial-gradient(circle at 88% 65%,rgba(79,66,219,.48),transparent 28%), radial-gradient(circle at 42% 70%,rgba(142,45,184,.30),transparent 30%), linear-gradient(135deg,#1c063b,#35105f 46%,#13042f 100%); border:1px solid rgba(239,209,104,.48); box-shadow:0 30px 90px rgba(50,10,80,.27); } .verse-spotlight::before{ content:"";position:absolute;inset:0;opacity:.68;pointer-events:none; background-image: radial-gradient(circle,rgba(255,255,255,.92) 0 1px,transparent 1.6px), radial-gradient(circle,rgba(241,211,111,.85) 0 1px,transparent 1.5px), radial-gradient(circle,rgba(213,164,255,.82) 0 1px,transparent 1.6px); background-size:112px 112px,177px 177px,233px 233px; background-position:9px 13px,48px 42px,91px 23px; } .verse-spotlight::after{content:"";position:absolute;inset:18px;border:1px solid rgba(241,214,115,.50);border-radius:26px;pointer-events:none} .verse-copy,.verse-orbit{position:relative;z-index:2}.verse-copy .eyebrow{margin-bottom:8px}.verse-copy h2{font-family:Palatino Linotype,Palatino,Georgia,serif;color:white;font-size:clamp(42px,5vw,66px);margin:4px 0 12px} .verse-copy p{max-width:590px;color:rgba(250,240,255,.78)} .verse-arabic{font-family:"Times New Roman",serif;font-size:clamp(42px,5vw,68px);line-height:1.3;text-align:center;color:#fff8dd;text-shadow:0 0 28px rgba(246,216,113,.22)} .verse-label{text-align:center;margin-top:10px;color:#f0d985;font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:800} .orbit-ring{width:min(260px,80%);aspect-ratio:1;border-radius:50%;margin:0 auto;display:grid;place-items:center;position:relative;border:1px solid rgba(239,213,117,.45);box-shadow:0 0 80px rgba(181,68,209,.28),inset 0 0 50px rgba(109,61,209,.12)} .orbit-ring::before,.orbit-ring::after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.16)} .orbit-ring::before{inset:20px}.orbit-ring::after{inset:45px;border-color:rgba(241,210,105,.2)} .orbit-star{position:absolute;color:#f2d568;text-shadow:0 0 14px rgba(242,213,104,.65)} .orbit-star.one{top:7%;left:49%}.orbit-star.two{right:7%;top:48%}.orbit-star.three{left:12%;bottom:18%} .guide-card{ background:linear-gradient(155deg,#fffaff,#fbf5ff); border-color:rgba(96,42,140,.13); box-shadow:0 10px 32px rgba(60,20,91,.04); position:relative;overflow:hidden;transition:.24s } .guide-card::before{content:"";position:absolute;inset:0 auto auto 0;width:100%;height:3px;background:linear-gradient(90deg,#6d35a8,#c64ac7,#d2ad47);opacity:.72} .guide-card:hover{transform:translateY(-4px);border-color:rgba(207,168,56,.35);box-shadow:0 20px 48px rgba(61,18,92,.12)} .guide-card .cat{color:#7639aa}.guide-card .more{color:#6d35a8} .cta{ position:relative;overflow:hidden; border:1px solid rgba(221,188,71,.45); background: radial-gradient(circle at 80% 20%,rgba(182,67,202,.20),transparent 25%), linear-gradient(135deg,#fefaff,#f4eafa 58%,#fbf5e9 100%); box-shadow:0 20px 52px rgba(64,20,95,.10); } .cta::after{content:"✦";position:absolute;right:34px;top:22px;color:#c69a32;font-size:20px;opacity:.65} .site-footer{ background: radial-gradient(circle at 18% 0%,rgba(137,48,180,.22),transparent 28rem), radial-gradient(circle at 82% 20%,rgba(70,53,190,.18),transparent 25rem), linear-gradient(145deg,#130525,#0b031b 70%); border-top:1px solid rgba(229,198,91,.20); } .foot-grid h4{color:#f0d986}.foot-grid a{color:rgba(245,232,255,.67)}.foot-grid a:hover{color:#fff}.copyright{border-color:rgba(235,205,102,.14)} .page-hero{ background: radial-gradient(circle at 76% 20%,rgba(188,64,207,.42),transparent 28%), radial-gradient(circle at 92% 80%,rgba(76,60,206,.32),transparent 33%), linear-gradient(135deg,#210740,#300b56 48%,#110427 100%); border-bottom:1px solid rgba(231,198,89,.25); isolation:isolate; } .page-hero::before{ content:"";position:absolute;inset:0;z-index:0;opacity:.55;pointer-events:none; background-image: radial-gradient(circle,rgba(255,255,255,.9) 0 1px,transparent 1.5px), radial-gradient(circle,rgba(242,214,114,.75) 0 1px,transparent 1.4px); background-size:145px 145px,211px 211px;background-position:11px 21px,66px 39px; } .page-hero::after{background:radial-gradient(circle,rgba(213,78,214,.27),transparent 64%)} .page-hero .container{position:relative;z-index:2}.crumbs{color:rgba(250,239,255,.59)}.crumbs a{color:#f0d67c} .page-hero h1{font-family:Palatino Linotype,Palatino,Georgia,serif;text-shadow:0 3px 24px rgba(47,6,72,.45)} .page-hero .lead{color:rgba(249,238,255,.75)} .article{ background:linear-gradient(180deg,#fffaff 0%,#fffdfd 100%); border-color:rgba(91,41,131,.12); box-shadow:0 18px 52px rgba(59,20,89,.07); } .article h2{font-family:Palatino Linotype,Palatino,Georgia,serif;color:#3a1959} .article h3{color:#432262}.article strong{color:#331b50} .article blockquote{border-left-color:#cda640;background:linear-gradient(90deg,#fbf2d8,#faf3ff);color:#3b2850} .article .wp-block-button__link{background:linear-gradient(135deg,#62309a,#8b41b9)!important;color:white!important;box-shadow:0 8px 18px rgba(93,39,139,.18)} .toc-box{background:linear-gradient(180deg,rgba(255,252,255,.86),rgba(248,241,252,.86));border-color:rgba(91,41,131,.13)} .toc a{color:#645271}.toc a:hover{color:#6e31a8}.related a{color:#6c32a4} .filter.active{background:linear-gradient(135deg,#5b2b8d,#8a3fb2)} .search-input:focus{box-shadow:0 0 0 4px rgba(119,54,167,.10);border-color:#8b52ad} .search-result{background:#fffaff;border-color:rgba(91,41,131,.12)}.search-result small{color:#7438aa} .contact-box{background:linear-gradient(145deg,#f6eefb,#fffaf0);border-color:rgba(96,42,140,.13)} .search-modal{background:rgba(14,3,28,.82)} .search-dialog{background:linear-gradient(180deg,#fbf7ff,#f7f0fb);border:1px solid rgba(231,198,87,.18)} .close-search{background:#eadff2;color:#4d286a}.modal-results small{color:#7437a9} @media(max-width:1000px){ .mobile-panel{background:linear-gradient(180deg,rgba(24,6,45,.99),rgba(38,9,64,.99));border-top:1px solid rgba(229,199,93,.14)} .mobile-panel a{color:#fff;border-bottom-color:rgba(255,255,255,.09)} .mobile-panel .sub{color:rgba(241,229,250,.68)} .verse-spotlight{grid-template-columns:1fr;gap:34px}.verse-orbit{max-width:420px;margin:auto;width:100%} } @media(max-width:680px){ .hero-bg::after{inset:14px;border-width:1px} .hero-inner{padding:88px 0 72px}.hero h1{font-size:49px} .hero-card{border-radius:24px} .section-head>div::after{margin-top:8px} .verse-spotlight{padding:38px 24px;min-height:0;border-radius:28px}.verse-spotlight::after{inset:11px;border-radius:20px} .verse-copy h2{font-size:43px}.orbit-ring{width:220px}.verse-arabic{font-size:45px} .page-hero{padding:65px 0 58px} .cta::after{right:18px;top:14px} } /* SOURCE-LED VISUAL SYSTEM v1 */ /* Visual motifs are inspired by descriptions in Qur'an 15:16, 24:35, 18:31, 47:15, 55:46-68, 56:28-34, 76:15-21 and authentic hadith on Paradise. They are atmospheric references, not depictions of the unseen. */ /* Luxurious daily-prayer cards: artwork carries the time-of-day story; HTML owns all text for accuracy/accessibility. */ .prayer-grid{gap:18px;align-items:stretch} .prayer.prayer-luxe{aspect-ratio:auto;min-height:520px;display:flex;flex-direction:column;border-radius:28px;overflow:hidden;background:linear-gradient(180deg,#2d1050 0%,#18072f 100%);border:1px solid rgba(237,205,93,.64);box-shadow:0 24px 62px rgba(48,12,74,.22),inset 0 0 0 1px rgba(255,255,255,.05);isolation:isolate} .prayer.prayer-luxe::before{inset:8px;border-radius:20px;border-color:rgba(248,220,124,.40);z-index:5} .prayer.prayer-luxe::after{display:none} .prayer-art{position:relative;height:55%;min-height:275px;overflow:hidden;background:#291044} .prayer-art::after{content:"";position:absolute;inset:auto 0 0;height:42%;background:linear-gradient(180deg,transparent,rgba(26,5,48,.92));pointer-events:none} .prayer-art img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .55s ease,filter .55s ease;filter:saturate(1.06) contrast(1.03)} .prayer-luxe:hover .prayer-art img{transform:scale(1.045);filter:saturate(1.14) contrast(1.04)} .prayer-body{position:relative;z-index:3;flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px 18px 18px;background:radial-gradient(circle at 50% 0%,rgba(160,73,205,.15),transparent 42%),linear-gradient(180deg,#281044,#14072a 100%)} .prayer-body::before,.prayer-body::after{content:"";position:absolute;width:75px;height:75px;bottom:-17px;opacity:.28;background:repeating-radial-gradient(circle at 0 100%,transparent 0 12px,rgba(218,179,65,.30) 13px 14px,transparent 15px 25px)} .prayer-body::before{left:-5px}.prayer-body::after{right:-5px;transform:scaleX(-1)} .prayer-name{font-family:Palatino Linotype,Palatino,Georgia,serif;font-size:clamp(30px,2.7vw,45px);line-height:.98;color:#fff8dc;text-shadow:0 2px 18px rgba(244,209,100,.10)} .prayer-salah{font-family:Palatino Linotype,Palatino,Georgia,serif;font-size:22px;color:#f7efff;margin-top:6px} .prayer-ornament{display:flex;align-items:center;gap:9px;width:100%;margin:15px 0 8px;color:#e9c75b;font-size:12px} .prayer-ornament::before,.prayer-ornament::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,#d8ad3c)} .prayer-ornament::after{background:linear-gradient(90deg,#d8ad3c,transparent)} .prayer-body small{font-size:12px;font-weight:850;color:#f0d66f;letter-spacing:.02em} .prayer-pill{margin-top:auto;min-width:76%;padding:7px 14px;border:1px solid #e6bf48;border-radius:999px;color:#fff;font-weight:850;font-size:13px;background:rgba(10,3,27,.28);box-shadow:inset 0 0 16px rgba(137,65,189,.12)} .prayer-fajr{--card-glow:#d9a6ff}.prayer-dhuhr{--card-glow:#a9d5ff}.prayer-asr{--card-glow:#f0b77c}.prayer-maghrib{--card-glow:#ef7da9}.prayer-isha{--card-glow:#8078ff} .prayer-luxe:hover{transform:translateY(-6px);box-shadow:0 32px 76px color-mix(in srgb,var(--card-glow) 20%,rgba(44,9,74,.35)),0 0 0 1px rgba(237,205,93,.25)} /* Revelation-inspired page atmospheres. */ body.theme-royal{--theme-a:#24063f;--theme-b:#44116b;--theme-c:#130229;--theme-accent:#e1bd55;--theme-soft:#b983dc} body.theme-royal .page-hero{background:radial-gradient(circle at 76% 18%,color-mix(in srgb,var(--theme-soft) 44%,transparent),transparent 28%),radial-gradient(circle at 92% 82%,rgba(76,60,206,.28),transparent 32%),linear-gradient(135deg,var(--theme-a),var(--theme-b) 50%,var(--theme-c))} body.theme-royal .page-hero::after{content:"";position:absolute;inset:18px;z-index:0;border:1px solid rgba(236,204,94,.28);border-radius:28px;pointer-events:none;background:none;width:auto;height:auto} body.theme-royal .page-hero .container{position:relative;z-index:2} body.theme-royal .article{border-color:rgba(100,47,141,.14);box-shadow:0 18px 52px rgba(57,18,86,.07)} body.theme-royal .article h2{color:#32134b} body.theme-royal .article blockquote{border-left-color:#cda53f;background:linear-gradient(90deg,#fff9e9,#faf3ff)} body.theme-royal .toc-box{border-color:rgba(106,54,145,.15);background:rgba(255,251,255,.82)} /* Qur'an / celestial — stars, night sky, ornament. Qur'an 15:16. */ body.theme-quran{--theme-a:#13042d;--theme-b:#3a0b67;--theme-c:#09021a;--theme-soft:#a044d2} body.theme-quran .page-hero::before{opacity:.85;background-image:radial-gradient(circle,rgba(255,255,255,.95) 0 1px,transparent 1.5px),radial-gradient(circle,rgba(242,211,102,.86) 0 1px,transparent 1.4px),radial-gradient(circle,rgba(194,142,255,.85) 0 1px,transparent 1.5px);background-size:103px 103px,173px 173px,257px 257px;background-position:8px 17px,47px 35px,91px 9px} /* Nur / remembrance — glass, pearl and luminous layers. Qur'an 24:35. */ body.theme-light{--theme-a:#2a0b48;--theme-b:#63327e;--theme-c:#170329;--theme-soft:#efd987} body.theme-light .page-hero{background:radial-gradient(circle at 72% 34%,rgba(255,248,207,.30),transparent 8%),radial-gradient(circle at 72% 34%,rgba(222,186,90,.20),transparent 21%),radial-gradient(circle at 88% 12%,rgba(175,99,210,.35),transparent 30%),linear-gradient(135deg,#260841,#4d1a6e 50%,#160329)} body.theme-light .article{background:linear-gradient(155deg,rgba(255,255,255,.97),rgba(255,250,238,.97));box-shadow:0 18px 55px rgba(95,54,111,.08),inset 0 0 40px rgba(244,225,164,.08)} /* Water / purification — crystal, silver-blue and flowing highlights. */ body.theme-water{--theme-a:#071f3c;--theme-b:#0d5580;--theme-c:#061729;--theme-soft:#76d7e6} body.theme-water .page-hero{background:radial-gradient(ellipse at 80% 25%,rgba(175,236,247,.28),transparent 20%),radial-gradient(ellipse at 78% 78%,rgba(72,190,213,.25),transparent 31%),linear-gradient(135deg,#071b34,#0d5075 52%,#071526)} body.theme-water .page-hero::before{opacity:.43;background-image:repeating-radial-gradient(ellipse at 20% 100%,transparent 0 24px,rgba(218,247,255,.22) 25px 26px,transparent 27px 48px)} body.theme-water .article blockquote{border-left-color:#67bccc;background:linear-gradient(90deg,#eefbfc,#f9fbff)} /* Gardens — deep green, gold and cool water. Qur'an 18:31; 55:46-66; 56:30-32. */ body.theme-garden{--theme-a:#082c26;--theme-b:#116149;--theme-c:#061d1c;--theme-soft:#5cbf88} body.theme-garden .page-hero{background:radial-gradient(circle at 80% 12%,rgba(225,189,69,.22),transparent 20%),radial-gradient(ellipse at 76% 82%,rgba(67,198,155,.30),transparent 28%),linear-gradient(135deg,#082823,#105742 52%,#061a19)} body.theme-garden .article{background:linear-gradient(155deg,#fffef8,#f4fbf6)} body.theme-garden .article h2{color:#17493a} /* Islamic calendar — moonlit, quieter celestial atmosphere. */ body.theme-moon{--theme-a:#0c123c;--theme-b:#312266;--theme-c:#070b26;--theme-soft:#8e8ee8} body.theme-moon .page-hero{background:radial-gradient(circle at 82% 26%,rgba(255,248,210,.66) 0 1.8%,rgba(255,245,204,.18) 2%,transparent 10%),radial-gradient(circle at 78% 24%,rgba(111,97,212,.24),transparent 30%),linear-gradient(135deg,#0c123b,#30215f 54%,#070a22)} /* Faith — jewel emerald with gold/silver restraint. */ body.theme-emerald{--theme-a:#113329;--theme-b:#28664d;--theme-c:#0a221d;--theme-soft:#81c59e} body.theme-emerald .page-hero{background:radial-gradient(circle at 78% 18%,rgba(229,194,81,.23),transparent 22%),linear-gradient(135deg,#102e27,#28644c 52%,#091e1a)} /* Makkah / Umrah — warm stone, night indigo and gold. */ body.theme-makkah{--theme-a:#2b153f;--theme-b:#714a38;--theme-c:#160b29;--theme-soft:#d5a75a} body.theme-makkah .page-hero{background:radial-gradient(circle at 79% 16%,rgba(236,197,93,.35),transparent 22%),linear-gradient(135deg,#29133d,#6b4435 50%,#150a28)} /* Night / special prayer — stillness and concentrated stars. */ body.theme-night-prayer{--theme-a:#0b082c;--theme-b:#271052;--theme-c:#050519;--theme-soft:#786ac6} /* The five obligatory prayer pages carry their time-of-day color story. */ body.theme-fajr{--theme-a:#38205b;--theme-b:#8b5a91;--theme-c:#25133d;--theme-soft:#efb7cd} body.theme-dhuhr{--theme-a:#173759;--theme-b:#5c80b5;--theme-c:#132943;--theme-soft:#e7d28b} body.theme-asr{--theme-a:#4d294f;--theme-b:#a66d70;--theme-c:#2b1738;--theme-soft:#f2bb79} body.theme-maghrib{--theme-a:#4a153c;--theme-b:#a03d58;--theme-c:#260d31;--theme-soft:#f08a79} body.theme-isha{--theme-a:#080c2a;--theme-b:#27135a;--theme-c:#030616;--theme-soft:#746df1} /* Ayatul Kursi remains celestial and vast, without a literal depiction of the Kursi. */ body.theme-kursi .page-hero{min-height:350px;display:flex;align-items:center;background:radial-gradient(circle at 76% 28%,rgba(209,75,224,.54),transparent 20%),radial-gradient(circle at 92% 70%,rgba(76,69,219,.42),transparent 29%),linear-gradient(135deg,#160332,#39105f 50%,#0b0221)} body.theme-kursi .page-hero::before{opacity:.9;background-size:82px 82px,151px 151px,233px 233px} /* Homepage motif system. */ .motif-section{background:radial-gradient(circle at 10% 10%,rgba(133,57,178,.06),transparent 22rem),linear-gradient(180deg,#fbf8ff,#f7f2fb)} .motif-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .motif{position:relative;overflow:hidden;min-height:190px;padding:27px;border-radius:25px;color:white;border:1px solid rgba(232,201,93,.25);box-shadow:0 18px 48px rgba(53,14,80,.11);display:flex;flex-direction:column;justify-content:flex-end} .motif::after{content:"";position:absolute;inset:10px;border:1px solid rgba(255,255,255,.11);border-radius:17px;pointer-events:none} .motif>span{position:absolute;top:24px;right:25px;font-size:31px;color:#efd56f;text-shadow:0 0 20px rgba(239,213,111,.4)} .motif strong{font-family:Palatino Linotype,Palatino,Georgia,serif;font-size:22px;position:relative;z-index:2} .motif small{font-size:11px;letter-spacing:.09em;color:rgba(255,255,255,.7);text-transform:uppercase;position:relative;z-index:2;margin-top:4px} .motif-light{background:radial-gradient(circle at 72% 27%,rgba(255,246,198,.55),transparent 12%),linear-gradient(145deg,#4d1c67,#211033)} .motif-sky{background:radial-gradient(circle at 23% 20%,rgba(174,79,214,.55),transparent 23%),radial-gradient(circle at 80% 65%,rgba(71,78,207,.42),transparent 26%),linear-gradient(145deg,#190536,#0b0828)} .motif-sky::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,#fff 0 1px,transparent 1.5px),radial-gradient(circle,#eacb65 0 1px,transparent 1.5px);background-size:48px 48px,79px 79px;opacity:.5} .motif-water{background:radial-gradient(ellipse at 80% 15%,rgba(188,238,245,.35),transparent 22%),linear-gradient(145deg,#0a3d58,#102543)} .motif-garden{background:radial-gradient(circle at 80% 20%,rgba(221,185,65,.26),transparent 18%),linear-gradient(145deg,#0a4437,#112c2a)} /* Journey cards subtly preview their material world. */ .journey:nth-child(2){background:radial-gradient(circle at 88% 15%,rgba(110,205,223,.16),transparent 26%),linear-gradient(150deg,#fcfeff,#edfafd)} .journey:nth-child(3){background:radial-gradient(circle at 88% 15%,rgba(113,59,192,.14),transparent 28%),linear-gradient(150deg,#fffaff,#f5efff)} .journey:nth-child(4){background:radial-gradient(circle at 87% 17%,rgba(232,198,89,.16),transparent 24%),linear-gradient(150deg,#fffdf7,#faf3ff)} .journey:nth-child(5){background:radial-gradient(circle at 86% 15%,rgba(67,60,175,.14),transparent 26%),linear-gradient(150deg,#fbfbff,#f2f0fb)} .journey:nth-child(6){background:radial-gradient(circle at 86% 15%,rgba(37,128,90,.14),transparent 26%),linear-gradient(150deg,#fcfff9,#f0f8f2)} @media(max-width:1000px){.prayer.prayer-luxe{min-height:500px}.motif-strip{grid-template-columns:repeat(2,1fr)}} @media(max-width:680px){.prayer-grid{grid-template-columns:1fr 1fr;gap:12px}.prayer.prayer-luxe{min-height:410px;border-radius:23px}.prayer:last-child{grid-column:1/-1;aspect-ratio:auto;min-height:430px}.prayer-art{min-height:210px}.prayer-body{padding:18px 12px 14px}.prayer-name{font-size:29px}.prayer-salah{font-size:18px}.prayer-ornament{margin:10px 0 6px}.motif-strip{grid-template-columns:1fr}.motif{min-height:155px}.page-hero::after{inset:10px!important;border-radius:18px!important}} /* SOURCE-LED ARTWORK INTEGRATION v2 */ /* Original atmospheric art built from the visual vocabulary documented in SOURCE-LED-VISUAL-SYSTEM.md. Art is symbolic. It is never labelled as a literal depiction of Paradise, Allah, the Kursi, angels or any unseen reality. */ /* Homepage: make the first impression visibly royal/celestial rather than template-like. */ .theme-home .hero{min-height:720px;background:#10031f} .theme-home .hero-bg{ background-image: linear-gradient(90deg,rgba(13,2,31,.96) 0%,rgba(28,7,53,.82) 44%,rgba(26,7,50,.32) 72%,rgba(12,2,29,.18) 100%), linear-gradient(180deg,rgba(15,4,34,.10),rgba(15,4,34,.42)), url('/assets/design/source-led/light-glass.webp'); background-position:center center;background-size:cover; filter:saturate(1.06) contrast(1.03) } .theme-home .hero::before{ content:"";position:absolute;inset:20px;z-index:1;pointer-events:none;border:1px solid rgba(239,207,99,.46);border-radius:2px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.025) } .theme-home .hero::after{z-index:0;background:radial-gradient(circle,rgba(231,188,77,.23),transparent 63%)} .theme-home .hero h1{text-shadow:0 4px 35px rgba(14,1,31,.58);max-width:760px} .theme-home .hero p{color:rgba(255,248,255,.83);text-shadow:0 2px 18px rgba(10,0,24,.35)} .theme-home .hero-card{background:linear-gradient(155deg,rgba(42,10,70,.66),rgba(14,4,34,.70));border-color:rgba(239,207,99,.30);box-shadow:0 26px 80px rgba(5,0,18,.28),inset 0 0 34px rgba(188,86,214,.07)} .theme-home .hero-card::before{content:"✦";display:block;color:#eed16b;font-size:17px;margin-bottom:9px;text-shadow:0 0 20px rgba(239,208,105,.55)} .theme-home .mini-links a{border:1px solid rgba(236,204,96,.11);background:rgba(255,255,255,.065)} .theme-home .mini-links a:hover{border-color:rgba(236,204,96,.28);background:rgba(255,255,255,.12)} /* Real imagery now carries the four source-led material worlds on the homepage. */ .motif{isolation:isolate;text-decoration:none;transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;background-size:cover!important;background-position:center!important} .motif::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(13,3,26,.10) 0%,rgba(13,3,26,.18) 35%,rgba(13,3,26,.88) 100%)} .motif::after{z-index:1;border-color:rgba(241,211,105,.28)} .motif>*{z-index:2} .motif:hover{transform:translateY(-6px);box-shadow:0 28px 65px rgba(45,9,71,.22);border-color:rgba(239,207,99,.56)} .motif-light{background-image:url('/assets/design/source-led/light-glass.webp')!important} .motif-sky{background-image:url('/assets/design/source-led/heavens-stars.webp')!important} .motif-water{background-image:url('/assets/design/source-led/water-crystal.webp')!important} .motif-garden{background-image:url('/assets/design/source-led/garden-shade.webp')!important} .motif>span{z-index:2;background:rgba(23,5,43,.42);border:1px solid rgba(238,207,103,.34);width:46px;height:46px;border-radius:50%;display:grid;place-items:center;backdrop-filter:blur(8px)} .motif strong{text-shadow:0 3px 18px rgba(7,0,18,.60)} .motif small{color:rgba(255,247,255,.84);text-shadow:0 2px 10px rgba(8,0,18,.55)} /* Ayatul Kursi spotlight: cosmic artwork behind live, accurate HTML text. */ .verse-spotlight{ background-image: linear-gradient(90deg,rgba(22,3,46,.96) 0%,rgba(40,7,68,.80) 52%,rgba(20,3,45,.34) 100%), url('/assets/design/source-led/heavens-stars.webp'); background-size:cover;background-position:center; } .verse-spotlight::before{background-image:radial-gradient(circle,rgba(255,255,255,.9) 0 1px,transparent 1.5px),radial-gradient(circle,rgba(240,207,94,.75) 0 1px,transparent 1.4px);background-size:123px 123px,211px 211px;opacity:.36} /* Theme-family heroes use matching source-led art with strong overlays for readability. */ body.theme-quran .page-hero{ background-image:linear-gradient(90deg,rgba(13,2,31,.96),rgba(33,7,60,.82) 52%,rgba(14,3,35,.38)),url('/assets/design/source-led/heavens-stars.webp'); background-size:cover;background-position:center 42%; } body.theme-light .page-hero{ background-image:linear-gradient(90deg,rgba(35,7,57,.96),rgba(64,20,83,.78) 54%,rgba(24,4,42,.34)),url('/assets/design/source-led/light-glass.webp'); background-size:cover;background-position:center 48%; } body.theme-water .page-hero{ background-image:linear-gradient(90deg,rgba(4,28,50,.96),rgba(7,60,89,.77) 54%,rgba(5,30,48,.28)),url('/assets/design/source-led/water-crystal.webp'); background-size:cover;background-position:center 50%; } body.theme-garden .page-hero{ background-image:linear-gradient(90deg,rgba(5,42,32,.96),rgba(15,75,56,.76) 54%,rgba(7,34,29,.27)),url('/assets/design/source-led/garden-shade.webp'); background-size:cover;background-position:center 48%; } body.theme-moon .page-hero,body.theme-night-prayer .page-hero{ background-image:linear-gradient(90deg,rgba(5,7,35,.96),rgba(30,15,74,.80) 54%,rgba(8,6,31,.31)),url('/assets/design/source-led/heavens-stars.webp'); background-size:cover;background-position:center 38%; } body.theme-emerald .page-hero{ background-image:linear-gradient(90deg,rgba(6,46,34,.96),rgba(23,91,67,.76) 54%,rgba(7,37,32,.27)),url('/assets/design/source-led/garden-shade.webp'); background-size:cover;background-position:center 50%; } body.theme-kursi .page-hero{ background-image:linear-gradient(90deg,rgba(15,2,36,.96),rgba(51,10,83,.78) 53%,rgba(11,2,31,.26)),url('/assets/design/source-led/heavens-stars.webp'); background-size:cover;background-position:center 40%; } /* Each obligatory Salah page gets its own time-of-day artwork. */ body.theme-fajr .page-hero{background-image:linear-gradient(90deg,rgba(34,12,61,.95),rgba(73,36,93,.72) 55%,rgba(33,11,58,.22)),url('/assets/design/prayer-scenes/prayer-1.webp');background-size:cover;background-position:center 42%} body.theme-dhuhr .page-hero{background-image:linear-gradient(90deg,rgba(18,43,73,.95),rgba(48,87,133,.69) 55%,rgba(17,42,70,.19)),url('/assets/design/prayer-scenes/prayer-2.webp');background-size:cover;background-position:center 43%} body.theme-asr .page-hero{background-image:linear-gradient(90deg,rgba(59,27,58,.95),rgba(131,71,79,.70) 55%,rgba(49,22,49,.20)),url('/assets/design/prayer-scenes/prayer-3.webp');background-size:cover;background-position:center 43%} body.theme-maghrib .page-hero{background-image:linear-gradient(90deg,rgba(65,14,52,.96),rgba(139,43,75,.70) 55%,rgba(48,12,47,.19)),url('/assets/design/prayer-scenes/prayer-4.webp');background-size:cover;background-position:center 45%} body.theme-isha .page-hero{background-image:linear-gradient(90deg,rgba(3,7,29,.97),rgba(23,15,67,.76) 55%,rgba(4,6,26,.22)),url('/assets/design/prayer-scenes/prayer-5.webp');background-size:cover;background-position:center 42%} /* Keep page title hierarchy crisp over richer art. */ .page-hero h1{max-width:850px;text-wrap:balance;text-shadow:0 4px 34px rgba(5,0,18,.60)} .page-hero .lead{max-width:730px;text-shadow:0 2px 18px rgba(5,0,18,.50)} .page-hero::before{mix-blend-mode:screen} /* Richer content dividers, without reducing reading clarity. */ .article h2::after{content:"";display:block;width:46px;height:2px;margin-top:12px;background:linear-gradient(90deg,#c69a31,#edd98a);border-radius:3px} .article img{border-radius:19px;box-shadow:0 14px 42px rgba(35,10,52,.10)} .article figure{margin-block:1.8rem} .article hr{border:0;height:1px;background:linear-gradient(90deg,transparent,rgba(182,139,43,.42),transparent);margin:2.5rem 0} @media(max-width:680px){ .theme-home .hero{min-height:660px}.theme-home .hero::before{inset:10px} .theme-home .hero-bg{background-position:60% center} .motif{min-height:210px} body.theme-quran .page-hero,body.theme-light .page-hero,body.theme-water .page-hero,body.theme-garden .page-hero,body.theme-moon .page-hero,body.theme-night-prayer .page-hero,body.theme-emerald .page-hero,body.theme-kursi .page-hero{background-position:62% center} } .saws-mark{display:inline-block;font-family:"Times New Roman",serif;font-size:1.08em;line-height:1;color:#6d35a8;white-space:nowrap;vertical-align:baseline} /* CONTENT POLISH v3 */ /* Imported WordPress content gets a deliberate editorial treatment without changing the source teaching. */ .article>.wp-block-buttons:first-child,.article>.wp-block-buttons:nth-of-type(2){justify-content:center;margin:0 0 13px} .article .wp-block-buttons .wp-block-button__link{background:linear-gradient(135deg,#4d1d78,#7b39a5)!important;border:1px solid rgba(220,183,72,.42);box-shadow:0 7px 20px rgba(68,25,98,.12);font-size:12px;letter-spacing:.025em} .article .wp-block-buttons .wp-block-button__link:hover{transform:translateY(-1px);background:linear-gradient(135deg,#633090,#9149b7)!important} .salah-section-label{margin:36px 0 16px!important;padding:18px 20px!important;border-radius:18px!important;color:#fff!important;background:linear-gradient(135deg,#35105d,#61268b)!important;border:1px solid rgba(229,193,80,.38)!important;box-shadow:0 12px 34px rgba(51,15,77,.13)!important;font-family:Palatino Linotype,Palatino,Georgia,serif!important;font-size:23px!important;letter-spacing:-.015em!important;position:relative;overflow:hidden} .salah-section-label::after{content:"✦";position:absolute;right:18px;top:50%;transform:translateY(-50%);color:#edcf68;font-family:Georgia,serif;font-size:16px} .salah-section-label.female{background:linear-gradient(135deg,#53205f,#7d356f)!important} .salah-video-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px;margin:0 0 28px!important} .salah-video-grid .wp-block-embed{margin:0!important;background:linear-gradient(145deg,#1a082e,#090315);padding:8px;border-radius:21px;border:1px solid rgba(223,186,70,.29);box-shadow:0 16px 42px rgba(49,14,74,.12)} .salah-video-grid .wp-block-embed__wrapper{border-radius:14px!important} .channel-callout{margin-top:48px;padding:24px;border-radius:23px;display:grid;grid-template-columns:54px 1fr;gap:18px;align-items:start;background:radial-gradient(circle at 88% 0%,rgba(178,72,199,.14),transparent 25%),linear-gradient(145deg,#f8effd,#fff9ed);border:1px solid rgba(104,45,146,.15);box-shadow:0 14px 38px rgba(60,18,91,.07)} .channel-play{width:50px;height:50px;border-radius:17px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#4e1d78,#8a3cad);box-shadow:0 9px 25px rgba(89,37,127,.2);font-size:17px;padding-left:3px} .channel-callout-copy strong{display:block;font-family:Palatino Linotype,Palatino,Georgia,serif;font-size:20px;color:#32134b;margin-bottom:5px} .channel-copy{margin:0 0 13px!important;color:#62526b;font-size:13px;line-height:1.65} .channel-btn{display:inline-flex;align-items:center;padding:9px 13px;border-radius:999px;text-decoration:none!important;font-size:12px;font-weight:850;color:#fff!important;background:linear-gradient(135deg,#5f2b8f,#8b42b2)} .channel-btn:hover{transform:translateY(-1px)} .article audio{width:100%;margin:13px 0 6px;accent-color:#7135a4} .saws-mark{color:#6d35a8;font-family:"Times New Roman",serif} @media(max-width:680px){ .salah-video-grid{grid-template-columns:1fr} .salah-section-label{font-size:20px!important;margin-top:28px!important} .channel-callout{grid-template-columns:1fr;padding:20px}.channel-play{width:44px;height:44px} } /* Small specificity fixes for imported strong tags inside premium controls. */ .salah-section-label strong,.article .wp-block-buttons .wp-block-button__link strong{color:#fff!important} /* PAGE WORLDS v5 — page-specific visual language without changing teaching content */ .world-intro{padding:34px 0 0;background:linear-gradient(180deg,#160525 0,#f7f5ef 100%)} .world-shell{position:relative;display:grid;grid-template-columns:minmax(280px,.82fr) minmax(0,1.18fr);min-height:300px;border-radius:32px;overflow:hidden;border:1px solid rgba(218,178,67,.30);background:#1b082c;box-shadow:0 24px 70px rgba(35,8,55,.17)} .world-art{position:relative;min-height:300px;background-image:linear-gradient(90deg,rgba(24,5,44,.05),rgba(24,5,44,.36)),var(--world-image);background-size:cover;background-position:center} .world-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 58%,rgba(27,8,44,.96) 100%)} .world-symbol{position:absolute;left:28px;top:27px;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#f2d871;font-size:24px;border:1px solid rgba(241,207,99,.45);background:rgba(22,4,41,.48);backdrop-filter:blur(10px);box-shadow:0 0 35px rgba(221,172,63,.14)} .world-copy{position:relative;padding:48px 54px 45px 30px;color:#fff;display:flex;flex-direction:column;justify-content:center;background:radial-gradient(circle at 76% 20%,rgba(136,52,179,.18),transparent 32%)} .world-copy::after{content:"";position:absolute;right:24px;top:24px;bottom:24px;width:1px;background:linear-gradient(transparent,rgba(238,201,88,.5),transparent)} .world-eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#efd36f;font-weight:900} .world-copy h2{font-family:Palatino Linotype,Palatino,Georgia,serif;font-size:clamp(31px,4vw,48px);font-weight:500;margin:8px 0 13px;color:#fff;letter-spacing:-.025em} .world-copy p{margin:0;max-width:650px;color:rgba(255,247,255,.78);font-size:15px;line-height:1.72} .world-cta{margin-top:20px;font-size:12px;font-weight:850;color:#f2df9e;letter-spacing:.03em} .world-moon .world-art::before{content:"☾";position:absolute;z-index:1;right:26px;top:18px;color:#fff1b6;font-size:58px;text-shadow:0 0 35px rgba(255,226,127,.55)} .world-garden .world-shell{background:#092a22}.world-garden .world-copy{background:radial-gradient(circle at 75% 20%,rgba(66,155,107,.15),transparent 32%)} .world-water .world-shell{background:#082741}.world-water .world-copy{background:radial-gradient(circle at 75% 20%,rgba(67,178,219,.17),transparent 32%)} .world-light .world-shell{background:#2b0d3c}.world-light .world-copy{background:radial-gradient(circle at 72% 18%,rgba(232,186,83,.14),transparent 31%)} .page-pathways{padding:58px 0 8px;background:var(--paper)} .pathways-head{display:flex;align-items:end;justify-content:space-between;gap:35px;margin-bottom:22px} .pathways-head h2{font-family:Palatino Linotype,Palatino,Georgia,serif;font-weight:500;font-size:clamp(31px,4vw,46px);margin:5px 0 0;color:#241331} .pathways-head p{max-width:430px;margin:0;color:#756c79;font-size:13px} .path-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} .path-card{position:relative;min-height:128px;padding:22px 46px 20px 22px;border-radius:21px;text-decoration:none;color:#271435;background:linear-gradient(145deg,#fffdfb,#f7eff9);border:1px solid rgba(104,45,146,.13);box-shadow:0 10px 30px rgba(51,15,76,.055);transition:.22s ease} .path-card::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:4px;background:linear-gradient(#d6a93d,#7c3daa)} .path-card span{display:block;color:#8b6b2e;text-transform:uppercase;letter-spacing:.105em;font-size:10px;font-weight:900;margin-bottom:9px} .path-card strong{display:block;font-family:Palatino Linotype,Palatino,Georgia,serif;font-size:20px;font-weight:600;line-height:1.18;color:#2e1740} .path-card b{position:absolute;right:20px;bottom:18px;color:#7a3aa1;font-size:17px} .path-card:hover{transform:translateY(-4px);border-color:rgba(188,141,39,.42);box-shadow:0 18px 38px rgba(51,15,76,.10)} /* Make the imported content feel like the continuation of each world, not a separate template. */ .world-intro + .page-pathways + .article-layout,.world-intro + .article-layout{padding-top:44px} body.theme-quran .article{box-shadow:0 17px 50px rgba(48,11,70,.07);border-color:rgba(90,42,116,.12)} body.theme-light .article{box-shadow:0 17px 50px rgba(72,25,83,.065);border-color:rgba(125,76,137,.12)} body.theme-garden .article,body.theme-emerald .article{box-shadow:0 17px 50px rgba(10,77,54,.065);border-color:rgba(29,112,78,.12)} body.theme-moon .article{box-shadow:0 17px 50px rgba(27,20,90,.07);border-color:rgba(73,63,142,.12)} @media(max-width:900px){ .world-shell{grid-template-columns:1fr}.world-art{min-height:245px}.world-art::after{background:linear-gradient(180deg,transparent 50%,rgba(27,8,44,.96) 100%)}.world-copy{padding:28px 28px 32px}.world-copy::after{display:none} .path-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:620px){ .world-intro{padding-top:20px}.world-shell{border-radius:24px;min-height:0}.world-art{min-height:220px}.world-symbol{left:18px;top:18px;width:46px;height:46px;font-size:20px}.world-copy{padding:24px 22px 27px}.world-copy h2{font-size:31px}.world-copy p{font-size:13.5px} .page-pathways{padding-top:42px}.pathways-head{display:block}.pathways-head p{margin-top:9px}.path-grid{grid-template-columns:1fr}.path-card{min-height:108px} } /* DEEP CONTENT POLISH v5 */ /* Qur'an pages: keep imported Surah images together as a refined reading gallery. */ .page-surah .article>.wp-block-image{padding:9px;border:1px solid rgba(105,48,134,.12);background:linear-gradient(145deg,#fffdfd,#f8f0fb);border-radius:23px;box-shadow:0 11px 30px rgba(57,15,82,.06)} .page-surah .article>.wp-block-image img{margin:0 auto;box-shadow:none;border-radius:15px} .page-surah .article>.wp-block-quote{border-left:0;padding:28px 30px;background:radial-gradient(circle at 90% 0%,rgba(131,54,167,.09),transparent 30%),linear-gradient(145deg,#fcf8ff,#fffaf0);border:1px solid rgba(114,55,142,.13);border-radius:22px;color:#392842} .page-surah .article>.wp-block-quote::before{content:"✦";display:block;color:#c69a31;font-size:16px;margin-bottom:12px} .page-surah .article>.wp-block-buttons:first-child{padding:9px;border-radius:999px;background:rgba(74,27,105,.045);border:1px solid rgba(95,45,128,.08);overflow-x:auto;justify-content:flex-start;flex-wrap:nowrap} .page-surah .article>.wp-block-buttons:first-child .wp-block-button{flex:0 0 auto} /* Du'a / Dhikr: luminous panels and gentler tables. */ .page-dua .article,.page-dua-hub .article,.page-names .article{background:radial-gradient(circle at 92% 2%,rgba(151,78,171,.06),transparent 18%),#fffdf9} .page-dua .article blockquote,.page-dua-hub .article blockquote,.page-names .article blockquote{border-left:0;border:1px solid rgba(186,139,43,.22);background:linear-gradient(145deg,#fffaf0,#fbf3fd);border-radius:22px;padding:25px 28px;box-shadow:inset 0 0 30px rgba(195,151,57,.035)} .page-dua .article blockquote::before,.page-dua-hub .article blockquote::before,.page-names .article blockquote::before{content:"✦";display:block;color:#c79c35;font-size:15px;margin-bottom:9px} .page-dua-hub .article table,.page-names .article table{border-collapse:separate;border-spacing:0;overflow:hidden;border:1px solid rgba(107,54,133,.14);border-radius:18px;background:#fff} .page-dua-hub .article th,.page-names .article th{background:linear-gradient(135deg,#3b155d,#65308b);color:#fff;border-color:rgba(255,255,255,.12);font-size:12px;letter-spacing:.02em} .page-dua-hub .article td,.page-names .article td{border-color:#eee5ef;vertical-align:top} .page-dua-hub .article tr:nth-child(even) td,.page-names .article tr:nth-child(even) td{background:#fcf8fc} /* Ramadan: make buttons and content feel seasonal without changing copy. */ .page-ramadan-hub .article>.wp-block-buttons:first-of-type,.page-ramadan .article>.wp-block-buttons:first-of-type{padding:13px;border-radius:24px;background:linear-gradient(135deg,#1b0937,#32135a);border:1px solid rgba(232,195,77,.28);box-shadow:0 14px 40px rgba(31,8,58,.10)} .page-ramadan-hub .article>.wp-block-buttons .wp-block-button__link,.page-ramadan .article>.wp-block-buttons .wp-block-button__link{background:rgba(255,255,255,.075)!important;border:1px solid rgba(239,205,91,.25)!important;color:#fff!important;box-shadow:none} .page-ramadan-hub .article>.wp-block-buttons .wp-block-button__link:hover,.page-ramadan .article>.wp-block-buttons .wp-block-button__link:hover{background:rgba(239,205,91,.13)!important} .page-ramadan-hub .article>.wp-block-image:first-child img{border:1px solid rgba(226,188,70,.24);box-shadow:0 20px 55px rgba(36,8,64,.14)} /* Hijri calendar: convert imported media-text blocks into premium month cards. */ .page-calendar .article>.wp-block-media-text{display:grid!important;grid-template-columns:minmax(180px,.40fr) minmax(0,.60fr)!important;gap:0!important;margin:20px 0!important;border:1px solid rgba(85,49,123,.13);border-radius:24px;overflow:hidden;background:linear-gradient(145deg,#fffdfb,#f8f1fa);box-shadow:0 12px 34px rgba(55,19,78,.06)} .page-calendar .wp-block-media-text__media{min-height:220px;background:#170729;display:flex;align-items:stretch} .page-calendar .wp-block-media-text__media img{width:100%;height:100%;min-height:220px;object-fit:cover;margin:0;border-radius:0;box-shadow:none} .page-calendar .wp-block-media-text__content{padding:25px 27px!important;align-self:center} .page-calendar .wp-block-media-text__content p{margin:.45em 0} .page-calendar .wp-block-media-text__content strong{color:#5e2d7d} /* Foundational pages: reverent, non-representational editorial treatment. */ .page-faith .article,.page-faith-hub .article{background:radial-gradient(circle at 92% 3%,rgba(204,160,56,.055),transparent 19%),#fffdf9} .page-faith .article h2,.page-faith .article h3,.page-faith-hub .article h2,.page-faith-hub .article h3{color:#3b1b50} .page-faith .article table,.page-faith-hub .article table{border-radius:18px;overflow:hidden;border:1px solid rgba(103,55,128,.13)} .page-faith .article blockquote,.page-faith-hub .article blockquote{background:linear-gradient(145deg,#fbf5ff,#fffbed);border-left-color:#c99e39} /* A subtle celestial divider before imported article content. */ .world-intro + .article-layout::before,.page-pathways + .article-layout::before{content:"✦ · ✧ · ✦";position:absolute;left:50%;transform:translateX(-50%);top:8px;color:#bd9639;letter-spacing:.36em;font-size:11px;white-space:nowrap;opacity:.75} .world-intro + .article-layout,.page-pathways + .article-layout{position:relative} @media(max-width:700px){ .page-calendar .article>.wp-block-media-text{grid-template-columns:1fr!important}.page-calendar .wp-block-media-text__media{min-height:180px}.page-calendar .wp-block-media-text__media img{min-height:180px}.page-calendar .wp-block-media-text__content{padding:21px!important} .page-surah .article>.wp-block-quote{padding:22px 20px} } /* FINAL POLISH v6 */ /* Accessibility, reading comfort and launch-readiness. No religious teaching text is changed here. */ :focus-visible{outline:3px solid #f0cf68;outline-offset:4px;border-radius:8px} html{scroll-padding-top:104px} body.modal-open{overflow:hidden} button,input,a{touch-action:manipulation} /* Make the royal identity continue through the chrome without sacrificing contrast. */ .site-header{backdrop-filter:blur(20px) saturate(1.12)} .nav-link,.icon-btn{min-height:44px} .mega a,.mobile-panel a{min-height:42px;display:flex;align-items:center} .mobile-panel{overscroll-behavior:contain} /* Long-form reading comfort. */ .article{font-size:16.5px;line-height:1.78} .article>p,.article>ul,.article>ol,.article>blockquote{max-width:76ch} .article p{overflow-wrap:anywhere} .article li{margin:.36em 0} .article a:not(.wp-block-button__link):not(.channel-btn){text-underline-offset:3px;text-decoration-thickness:1px} .article a:not(.wp-block-button__link):not(.channel-btn):hover{text-decoration-thickness:2px} .article h2,.article h3{scroll-margin-top:112px;text-wrap:balance} .article .arabic-text{font-family:"Traditional Arabic","Noto Naskh Arabic","Scheherazade New",Georgia,serif;font-size:1.34em;line-height:2.05;letter-spacing:0;text-align:right;max-width:100%;overflow-wrap:normal;word-break:normal;color:#2f1940} .theme-water .article .arabic-text,.theme-garden .article .arabic-text,.theme-emerald .article .arabic-text{color:#153f38} .article [dir="rtl"]{unicode-bidi:plaintext} .article table{max-width:100%;-webkit-overflow-scrolling:touch} .article iframe{display:block;width:100%;aspect-ratio:16/9;height:auto;background:#11051f} .article audio{min-height:44px} /* Search should feel finished, not like a utility overlay. */ .search-modal{background:rgba(10,2,23,.82)} .search-dialog{border:1px solid rgba(211,170,65,.28);box-shadow:0 35px 110px rgba(8,0,20,.55),inset 0 0 0 1px rgba(255,255,255,.35)} .search-top input:focus{outline:3px solid rgba(117,58,166,.22);border-color:#8950b2} .modal-results a{border:1px solid transparent} .modal-results a:hover,.modal-results a:focus-visible{background:#fff;border-color:rgba(109,54,143,.12)} .modal-results strong{display:block;margin-top:2px;color:#2d183a} .search-hint,.search-empty{padding:18px;margin:0;color:#74667b;font-size:13px;text-align:center} /* Slightly stronger hover/focus language across interactive cards. */ .journey,.guide-card,.path-card,.prayer-luxe,.motif{will-change:transform} .journey:focus-visible,.guide-card:focus-visible,.path-card:focus-visible,.prayer-luxe:focus-visible,.motif:focus-visible{outline-color:#d7ad3e;box-shadow:0 0 0 5px rgba(220,175,54,.15),var(--shadow)} /* Mobile refinements. */ @media(max-width:680px){ .site-header .nav-shell{height:72px} .brand img{width:40px;height:40px} .mobile-panel.open{max-height:calc(100vh - 72px);overflow:auto;padding-bottom:28px} .page-hero h1{font-size:clamp(36px,10.5vw,46px)} .article{font-size:16px;line-height:1.75} .article .arabic-text{font-size:1.28em;line-height:2} .article table{font-size:13px} .search-modal{padding:5vh 12px} .search-dialog{padding:15px;border-radius:21px} .search-top input{min-width:0;padding:14px} .close-search{min-width:48px} } /* Respect visitors who reduce motion. */ @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important} .journey:hover,.guide-card:hover,.path-card:hover,.prayer-luxe:hover,.motif:hover,.btn-primary:hover{transform:none!important} } /* High-contrast users retain the decorative world but get harder edges. */ @media(prefers-contrast:more){ .article,.journey,.guide-card,.path-card,.toc-box{border-color:#6b5274} .btn,.wp-block-button__link{border:2px solid currentColor!important} .muted,.article figcaption{color:#4c4350} } /* Printable study pages: remove chrome and preserve the actual learning content. */ @media print{ .site-header,.site-footer,.search-modal,.toc,.channel-callout,.world-intro,.page-pathways,.hero-actions{display:none!important} body{background:#fff!important;color:#111!important;font-size:11pt;line-height:1.5} .page-hero{background:#fff!important;color:#111!important;padding:0 0 20px!important} .page-hero::before,.page-hero::after{display:none!important} .page-hero h1,.page-hero .lead,.crumbs{color:#111!important;text-shadow:none!important} .article-layout{display:block!important;padding:0!important} .article{border:0!important;box-shadow:none!important;padding:0!important;background:#fff!important} .article a{color:#111!important;text-decoration:none!important} .article img{max-height:720px;object-fit:contain;break-inside:avoid} .article blockquote,.article table,.article figure{break-inside:avoid} } /* Religious-content QA notes */ .qa-note,.fiqh-note,.source-note{ margin:1.5rem 0;padding:1rem 1.1rem;border-radius:18px; border:1px solid rgba(176,135,45,.34);background:linear-gradient(145deg,rgba(255,251,241,.94),rgba(248,241,255,.92)); box-shadow:0 12px 32px rgba(39,18,62,.07) } .qa-note strong,.fiqh-note strong,.source-note strong{color:#3a1d54} .fiqh-note{border-left:4px solid #7b4baa} .source-note{border-left:4px solid #b58b32;font-size:.94em} .source-note a{font-weight:700} .article .source-list{display:grid;gap:.55rem;margin:1rem 0 1.5rem;padding-left:1.25rem} .article .source-list li{padding-left:.15rem} .article .verified-kicker{font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;font-weight:800;color:#765094;margin-bottom:.35rem} /* Surah virtue evidence cards — v9 source QA */ .surah-evidence-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:1.25rem 0 2rem} .surah-evidence-card{padding:22px 23px;border-radius:22px;background:radial-gradient(circle at 100% 0%,rgba(129,69,175,.10),transparent 31%),linear-gradient(145deg,#fffdf9,#faf5ff);border:1px solid rgba(92,48,123,.14);box-shadow:0 13px 34px rgba(42,18,61,.065)} .surah-evidence-card h3{margin:.5rem 0 .55rem;font-size:1.3rem} .surah-evidence-card h3 a{color:#331548;text-decoration:none} .surah-evidence-card h3 a:hover{text-decoration:underline;text-underline-offset:4px} .surah-evidence-card p{margin:.55rem 0;max-width:none} .evidence-grade{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .65rem;border-radius:999px;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase} .evidence-sahih{background:#e8f6ee;color:#175c3a;border:1px solid #bfe3ce} .evidence-hasan{background:#f4effb;color:#5e347c;border:1px solid #ddc9ed} .evidence-caution{background:#fff5df;color:#76520b;border:1px solid #eed39a} .evidence-links{font-size:.86rem;color:#74677b}.evidence-links a{font-weight:700} @media(max-width:760px){.surah-evidence-grid{grid-template-columns:1fr}.surah-evidence-card{padding:19px}} /* Quran translation/source identification — v9 */ .quran-source-strip{margin:0 0 1.7rem;padding:18px 20px;border-radius:20px;background:linear-gradient(145deg,rgba(249,244,255,.97),rgba(255,251,239,.96));border:1px solid rgba(175,135,46,.27);box-shadow:0 12px 30px rgba(42,18,61,.055)} .quran-source-strip>strong{display:block;font-family:Palatino Linotype,Palatino,Georgia,serif;font-size:1.18rem;color:#351649;margin-bottom:.3rem} .quran-source-strip p{margin:.38rem 0;max-width:none;font-size:.93rem;line-height:1.62} .quran-source-strip .verified-kicker{margin:0 0 .35rem} /* ECOSYSTEM AUDIT v10 — study architecture and reader controls */ :root{--arabic-scale:1} .article .arabic-text{font-size:calc(1.34em * var(--arabic-scale))} .reader-tools{display:flex;align-items:center;gap:7px;margin:0 0 22px;padding:10px 12px;width:max-content;max-width:100%;border-radius:999px;background:linear-gradient(145deg,#f8f1ff,#fff9e9);border:1px solid rgba(151,105,181,.18);box-shadow:0 8px 24px rgba(48,18,68,.06)} .reader-tools span{font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#674978;margin-right:2px} .reader-tools button{min-width:42px;height:38px;border-radius:999px;border:1px solid rgba(107,55,142,.16);background:#fff;color:#47205d;font-weight:850;cursor:pointer} .reader-tools button:hover,.reader-tools button:focus-visible{background:#4f2370;color:#fff;border-color:#4f2370} .short-surah-study,.juz-study{margin:0 0 2.2rem;padding:26px;border-radius:27px;background:radial-gradient(circle at 90% 0%,rgba(139,65,183,.14),transparent 28%),linear-gradient(145deg,#fffdf9,#f8f0ff);border:1px solid rgba(98,49,130,.14);box-shadow:0 18px 44px rgba(47,15,68,.07)} .short-surah-study h2,.juz-study h2{margin:.25rem 0 .55rem;color:#34164a} .study-intro,.juz-study>p{max-width:78ch!important;color:#5d5064} .study-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0 22px} .study-steps>div{padding:15px;border-radius:18px;background:rgba(255,255,255,.82);border:1px solid rgba(111,61,143,.12)} .study-steps b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#532276,#8a43ad);color:#fff;font-size:.78rem;margin-bottom:9px} .study-steps strong{display:block;color:#351549;font-size:.95rem}.study-steps span{display:block;margin-top:3px;color:#74677a;font-size:.78rem;line-height:1.45} .surah-study-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin:18px 0} .surah-study-card{display:flex;min-height:146px;flex-direction:column;padding:15px;border-radius:19px;text-decoration:none!important;background:linear-gradient(155deg,#241039,#13071f);border:1px solid rgba(224,184,66,.3);box-shadow:inset 0 0 35px rgba(119,46,151,.16);transition:.18s ease} .surah-study-card:hover{transform:translateY(-2px);border-color:#e1bd5a}.surah-study-card .surah-num{color:#d7b24f;font-size:.7rem;font-weight:900;letter-spacing:.12em}.surah-study-card strong{color:#fff!important;font-family:Palatino Linotype,Palatino,Georgia,serif;font-size:1.03rem;margin:.25rem 0}.surah-study-card small{color:#cbbfd1;font-size:.73rem}.surah-study-card .study-cta{margin-top:auto;padding-top:12px;color:#edcf6e;font-size:.72rem;font-weight:800} .juz-link-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:18px 0} .juz-link-grid a{display:flex;gap:9px;align-items:center;padding:11px 12px;border-radius:15px;background:#fff;border:1px solid rgba(103,56,133,.13);text-decoration:none!important;color:#3d2051;font-weight:750}.juz-link-grid a:hover{border-color:#b68b35;background:#fffaf0}.juz-link-grid span{display:grid;place-items:center;min-width:30px;height:30px;border-radius:50%;background:#eee3f6;color:#633486;font-size:.72rem;font-weight:900} @media(max-width:860px){.surah-study-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.study-steps{grid-template-columns:repeat(2,1fr)}.juz-link-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:540px){.short-surah-study,.juz-study{padding:19px;border-radius:22px}.surah-study-grid,.study-steps,.juz-link-grid{grid-template-columns:1fr}.surah-study-card{min-height:125px}.reader-tools{width:100%;justify-content:center}.article .arabic-text{font-size:calc(1.28em * var(--arabic-scale))}} /* V12 CHILDREN & FAMILIES */ .theme-family{background:#fbf7ff;color:#25152e} .family-hero{position:relative;overflow:hidden;background:radial-gradient(circle at 75% 20%,rgba(185,87,232,.32),transparent 28%),radial-gradient(circle at 12% 82%,rgba(232,190,83,.12),transparent 24%),linear-gradient(135deg,#170629 0%,#33105a 48%,#150726 100%);color:#fff} .family-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 20% 30%,rgba(255,255,255,.85) 0 1px,transparent 1.3px),radial-gradient(circle at 70% 20%,rgba(255,236,164,.72) 0 1px,transparent 1.4px),radial-gradient(circle at 82% 70%,rgba(255,255,255,.65) 0 1px,transparent 1.2px);background-size:72px 72px,105px 105px,132px 132px;opacity:.55;pointer-events:none} .family-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;padding:96px 0 86px} .family-hero-copy h1{font-family:Palatino Linotype,Palatino,Georgia,serif;font-size:clamp(54px,7vw,92px);line-height:.91;letter-spacing:-.035em;margin:18px 0 24px;color:#fff8e3} .family-hero-copy p{font-size:20px;line-height:1.72;color:rgba(255,255,255,.82);max-width:700px} .family-trust{display:flex;flex-wrap:wrap;gap:12px 20px;margin-top:26px;font-size:13px;color:#f4d972;letter-spacing:.02em} .family-collage{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:250px 205px;gap:14px;transform:rotate(1deg)} .family-tile{margin:0;border-radius:28px;overflow:hidden;border:1px solid rgba(246,210,99,.58);box-shadow:0 26px 56px rgba(0,0,0,.26);position:relative} .family-tile::after{content:"";position:absolute;inset:8px;border:1px solid rgba(255,235,164,.34);border-radius:21px;pointer-events:none} .family-tile img{width:100%;height:100%;object-fit:cover;display:block}.tile-a{grid-row:1/3}.tile-b img{object-position:center}.tile-c,.tile-d{display:none} .family-path-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .family-path{position:relative;min-height:275px;padding:30px;border-radius:26px;text-decoration:none;overflow:hidden;border:1px solid rgba(92,43,123,.10);background:#fff;box-shadow:0 16px 45px rgba(55,22,78,.08);transition:.25s ease;color:#271431} .family-path::after{content:"";position:absolute;width:160px;height:160px;border-radius:50%;right:-60px;top:-70px;background:radial-gradient(circle,rgba(132,58,177,.18),transparent 68%)} .family-path:hover{transform:translateY(-4px);box-shadow:0 24px 54px rgba(55,22,78,.14);border-color:rgba(210,166,54,.45)} .family-path .path-no{display:inline-flex;width:42px;height:42px;border-radius:50%;align-items:center;justify-content:center;background:#2b0e49;color:#f1d56b;font-weight:800;font-size:13px} .family-path h3{font-family:Palatino Linotype,Palatino,Georgia,serif;font-size:31px;margin:24px 0 12px;color:#381652}.family-path p{color:#6c5b73;line-height:1.65}.family-path strong{position:absolute;left:30px;bottom:26px;color:#6d289a;font-size:14px} .path-wudu{background:linear-gradient(160deg,#fff,#effbff)}.path-surah{background:linear-gradient(160deg,#fff,#f3efff)}.path-dua{background:linear-gradient(160deg,#fff,#fff8ea)}.path-video{background:linear-gradient(160deg,#fff,#f7effa)}.path-print{background:linear-gradient(160deg,#fff,#f0f8f1)} .family-method{background:linear-gradient(180deg,#f4edfa,#fbf8ff)}.method-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.method-grid>div{padding:28px 24px;border-radius:24px;background:#fff;border:1px solid rgba(86,44,112,.1)}.method-grid span{font-family:Georgia,serif;color:#a37b16;font-size:30px}.method-grid h3{font-family:Palatino Linotype,Palatino,Georgia,serif;font-size:23px;margin:15px 0 8px;color:#40195d}.method-grid p{font-size:14px;line-height:1.65;color:#706277} .tutorial-choice{display:grid;grid-template-columns:1fr 1fr;gap:22px}.tutorial-choice>a{display:grid;grid-template-columns:42% 58%;min-height:320px;border-radius:30px;overflow:hidden;text-decoration:none;background:#1d0a34;color:white;border:1px solid rgba(233,202,92,.42);box-shadow:0 24px 50px rgba(42,13,66,.16)}.tutorial-choice>a>div:last-child{padding:36px 32px;display:flex;flex-direction:column;justify-content:center}.tutorial-choice h3{font-family:Palatino Linotype,Palatino,Georgia,serif;font-size:33px;color:#fff5d1;margin:8px 0 12px}.tutorial-choice p{color:rgba(255,255,255,.74);line-height:1.65}.tutorial-choice span{color:#efcf63;text-transform:uppercase;letter-spacing:.13em;font-size:11px}.tutorial-choice strong{margin-top:18px;color:#f1d56b}.choice-art{background-size:cover;background-position:center;min-height:260px}.choice-male{background-image:linear-gradient(0deg,rgba(25,5,46,.35),transparent),url('/assets/design/prayer-scenes/prayer-2.webp')}.choice-female{background-image:linear-gradient(0deg,rgba(25,5,46,.35),transparent),url('/assets/design/prayer-scenes/prayer-4.webp')} .family-progress{background:linear-gradient(135deg,#18062c,#35115b);color:#fff}.progress-shell{display:grid;grid-template-columns:.82fr 1.18fr;gap:56px;align-items:center}.progress-copy h2{font-family:Palatino Linotype,Palatino,Georgia,serif;font-size:45px;color:#fff5d7;margin:10px 0 16px}.progress-copy p{color:rgba(255,255,255,.75);line-height:1.72}.family-progress .btn-ghost{border-color:rgba(241,211,104,.45);color:#f1d568;margin-top:14px}.progress-list{display:grid;gap:10px}.progress-list label{display:flex;gap:15px;align-items:flex-start;padding:17px 19px;border-radius:18px;background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.10);cursor:pointer}.progress-list input{margin-top:4px;width:20px;height:20px;accent-color:#d7b84f}.progress-list strong{display:block;color:#fff5d5}.progress-list small{display:block;color:rgba(255,255,255,.66);margin-top:4px;line-height:1.45}.progress-list label.done{background:rgba(225,194,83,.12);border-color:rgba(235,203,88,.38)} .family-parent{background:#fff}.parent-note{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;padding:50px;border-radius:34px;background:linear-gradient(145deg,#fbf7ff,#f7f1ea);border:1px solid rgba(86,44,112,.12)}.parent-note h2{font-family:Palatino Linotype,Palatino,Georgia,serif;font-size:43px;color:#3e1958;margin:10px 0}.parent-points{display:grid;grid-template-columns:1fr 1fr;gap:18px}.parent-points p{margin:0;padding:20px;border-radius:18px;background:rgba(255,255,255,.72);line-height:1.6;color:#65566b}.parent-points strong{color:#3e1958} .family-mini-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.family-mini-grid a{padding:24px;border-radius:20px;background:#fff;text-decoration:none;border:1px solid rgba(88,44,113,.1);box-shadow:0 12px 32px rgba(50,18,70,.06)}.family-mini-grid span{display:block;color:#9b7518;text-transform:uppercase;letter-spacing:.12em;font-size:10px;margin-bottom:8px}.family-mini-grid strong{color:#40195d;font-family:Palatino Linotype,Palatino,Georgia,serif;font-size:20px} .home-family-feature{background:linear-gradient(180deg,#fbf8ff,#f5edf9)}.family-feature-shell{display:grid;grid-template-columns:.9fr 1.1fr;gap:42px;align-items:center;padding:18px 0}.family-feature-art{position:relative;height:420px;border-radius:30px;overflow:hidden;border:1px solid rgba(219,185,74,.35);box-shadow:0 25px 60px rgba(52,18,76,.15)}.family-feature-art img{width:100%;height:100%;object-fit:cover}.family-feature-art::after{content:"";position:absolute;inset:12px;border:1px solid rgba(255,228,126,.40);border-radius:22px}.family-feature-badge{position:absolute;z-index:2;left:24px;bottom:24px;background:rgba(29,7,50,.82);backdrop-filter:blur(10px);color:#f1d46a;padding:10px 16px;border-radius:999px;font-size:12px;border:1px solid rgba(242,210,98,.34)}.family-feature-copy h2{font-family:Palatino Linotype,Palatino,Georgia,serif;font-size:clamp(38px,4vw,58px);line-height:1.03;color:#3d1857;margin:12px 0 18px}.family-feature-copy p{font-size:18px;line-height:1.7;color:#6c5a72}.family-feature-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}.family-feature-links a{text-decoration:none;padding:12px 15px;border-radius:999px;background:#fff;color:#542071;border:1px solid rgba(88,40,115,.13);font-size:13px}.family-feature-links a:first-child{background:#32104f;color:#f7de7c;border-color:#32104f} .family-inline-note{margin:18px 0 28px;padding:18px 20px;border-radius:18px;background:linear-gradient(135deg,#f6edfc,#fff9e9);border:1px solid rgba(115,66,144,.13)}.family-inline-note>span{display:block;text-transform:uppercase;letter-spacing:.12em;color:#987018;font-size:10px;font-weight:800;margin-bottom:5px}.family-inline-note p{margin:0!important;color:#63566b!important}.family-inline-note a{font-weight:700} @media(max-width:1000px){.family-hero-grid{grid-template-columns:1fr;gap:42px;padding:80px 0 68px}.family-collage{grid-template-rows:220px 180px;max-width:700px}.family-path-grid{grid-template-columns:1fr 1fr}.method-grid{grid-template-columns:1fr 1fr}.tutorial-choice{grid-template-columns:1fr}.progress-shell{grid-template-columns:1fr}.parent-note{grid-template-columns:1fr}.family-mini-grid{grid-template-columns:1fr 1fr}.family-feature-shell{grid-template-columns:1fr}.family-feature-art{height:340px}} @media(max-width:680px){.family-hero-grid{padding:68px 0 58px}.family-hero-copy h1{font-size:52px}.family-hero-copy p{font-size:17px}.family-trust{display:grid;gap:7px}.family-collage{grid-template-columns:1fr 1fr;grid-template-rows:200px 150px;gap:9px}.family-tile{border-radius:20px}.family-path-grid,.method-grid,.family-mini-grid{grid-template-columns:1fr}.family-path{min-height:240px}.tutorial-choice>a{grid-template-columns:1fr;min-height:0}.choice-art{min-height:210px}.tutorial-choice>a>div:last-child{padding:28px 24px}.parent-note{padding:28px 22px;gap:28px}.parent-points{grid-template-columns:1fr}.progress-copy h2{font-size:38px}.family-feature-art{height:280px}.family-feature-copy h2{font-size:40px}} /* V13 START HERE */ .nav-start{color:#6b4310!important;background:linear-gradient(135deg,#fff9e7,#f3df9c)!important;border:1px solid rgba(190,145,42,.28)!important;margin-right:3px}.nav-start:hover{background:linear-gradient(135deg,#fff4ce,#edd27b)!important}.theme-start-here{background:#fbf8ff;color:#26152f}.start-hero{position:relative;overflow:hidden;color:#fff;background:radial-gradient(circle at 74% 18%,rgba(184,85,234,.28),transparent 27%),radial-gradient(circle at 15% 86%,rgba(232,190,83,.14),transparent 28%),linear-gradient(135deg,#120522,#351058 52%,#120521)}.start-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 22% 27%,rgba(255,255,255,.8) 0 1px,transparent 1.4px),radial-gradient(circle at 77% 24%,rgba(255,225,129,.72) 0 1px,transparent 1.4px),radial-gradient(circle at 65% 76%,rgba(255,255,255,.64) 0 1px,transparent 1.2px);background-size:88px 88px,119px 119px,147px 147px;opacity:.45}.start-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center;padding:100px 0 92px}.start-copy h1{font-family:Palatino Linotype,Palatino,Georgia,serif;font-size:clamp(56px,7vw,92px);line-height:.92;letter-spacing:-.04em;color:#fff7df;margin:19px 0 25px}.start-copy p{font-size:20px;line-height:1.7;color:rgba(255,255,255,.8);max-width:690px}.start-trust{display:flex;flex-wrap:wrap;gap:12px 22px;color:#efd269;font-size:13px;margin-top:27px}.start-visual{position:relative;min-height:520px}.start-frame{position:absolute;inset:15px 28px 35px 55px;border-radius:42% 42% 27px 27px;overflow:hidden;border:1px solid rgba(247,211,97,.72);box-shadow:0 35px 90px rgba(0,0,0,.32)}.start-frame::after{content:"";position:absolute;inset:11px;border:1px solid rgba(255,236,171,.38);border-radius:inherit}.start-frame img{width:100%;height:100%;object-fit:cover;display:block}.start-float{position:absolute;z-index:2;padding:11px 15px;border-radius:16px;background:rgba(25,6,45,.79);border:1px solid rgba(238,203,87,.4);box-shadow:0 16px 40px rgba(0,0,0,.24);backdrop-filter:blur(10px);font-size:11px;color:#e5bd4d}.start-float strong{display:block;color:#fff4d0;font-size:14px;margin-top:2px}.start-float.one{left:3px;top:82px}.start-float.two{right:0;top:205px}.start-float.three{left:21px;bottom:70px}.start-stage-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.start-stage{position:relative;display:grid;grid-template-columns:58px 1fr;gap:20px;min-height:225px;padding:28px;border-radius:27px;text-decoration:none;background:#fff;border:1px solid rgba(91,43,121,.11);box-shadow:0 15px 42px rgba(55,21,78,.07);transition:.24s;color:#30153e}.start-stage:hover{transform:translateY(-4px);box-shadow:0 24px 55px rgba(55,21,78,.12);border-color:rgba(209,166,53,.45)}.stage-no{width:52px;height:52px;border-radius:18px;display:grid;place-items:center;background:#2b0d49;color:#f0d36c;font-weight:900;font-size:13px}.start-stage small{text-transform:uppercase;letter-spacing:.13em;color:#9a7418;font-weight:900;font-size:10px}.start-stage h3{font-family:Palatino Linotype,Palatino,Georgia,serif;color:#3b1854;font-size:30px;margin:6px 0 9px}.start-stage p{color:#6d5d73;margin:0;line-height:1.6;font-size:14px}.start-stage strong{display:block;color:#6c2796;margin-top:16px;font-size:13px}.stage-water{background:linear-gradient(150deg,#fff,#eefaff)}.stage-prayer{background:linear-gradient(150deg,#fff,#f7effd)}.stage-quran{background:linear-gradient(150deg,#fff,#f2efff)}.stage-dhikr{background:linear-gradient(150deg,#fff,#fff8e9)}.stage-life{background:linear-gradient(150deg,#fff,#f0f8f1)}.start-now{background:linear-gradient(180deg,#f6f0fb,#fbf8ff)}.start-now-shell{display:grid;grid-template-columns:.9fr 1.1fr;gap:52px;align-items:start;padding:47px;border-radius:34px;background:#fff;border:1px solid rgba(91,43,121,.1);box-shadow:0 18px 48px rgba(55,21,78,.06)}.start-now h2{font-family:Palatino Linotype,Palatino,Georgia,serif;font-size:45px;color:#3b1854;margin:9px 0 14px}.start-now p{color:#6d5d73}.start-now-links{display:grid;gap:11px}.start-now-links a{padding:19px 20px;border-radius:19px;background:linear-gradient(145deg,#fbf8ff,#fffaf0);border:1px solid rgba(94,45,121,.1);text-decoration:none}.start-now-links span{display:block;color:#9a7418;text-transform:uppercase;letter-spacing:.12em;font-size:9px;font-weight:900}.start-now-links strong{display:block;color:#45205d;margin-top:4px}.start-foundation-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.start-foundation-grid a{position:relative;padding:29px 28px 25px;border-radius:26px;background:#fff;text-decoration:none;border:1px solid rgba(89,43,116,.1);box-shadow:0 13px 38px rgba(55,21,78,.06);min-height:235px}.start-foundation-grid span{display:grid;width:43px;height:43px;place-items:center;border-radius:50%;background:#32104f;color:#efd267;font-size:11px;font-weight:900}.start-foundation-grid h3{font-family:Palatino Linotype,Palatino,Georgia,serif;font-size:29px;color:#3d1955;margin:21px 0 10px}.start-foundation-grid p{color:#6b5b71;line-height:1.6}.start-foundation-grid b{color:#742d9c;font-size:13px}.start-progress{background:linear-gradient(135deg,#170629,#38115c);color:#fff}.start-progress-shell{display:grid;grid-template-columns:.82fr 1.18fr;gap:56px;align-items:center}.start-progress-copy h2{font-family:Palatino Linotype,Palatino,Georgia,serif;font-size:47px;color:#fff4d4;margin:10px 0 16px}.start-progress-copy p{color:rgba(255,255,255,.74)}.start-progress .btn-ghost{border-color:rgba(239,207,91,.4);color:#efd269;margin-top:14px}.start-progress-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}.start-progress-list label{display:flex;gap:13px;padding:17px;border-radius:18px;background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.1);cursor:pointer}.start-progress-list input{width:19px;height:19px;margin-top:4px;accent-color:#d7b84f}.start-progress-list strong{display:block;color:#fff4d2}.start-progress-list small{display:block;color:rgba(255,255,255,.63);line-height:1.42;margin-top:4px}.start-progress-list label.done{background:rgba(225,194,83,.13);border-color:rgba(235,203,88,.4)}.start-help{background:#fff}.start-help-shell{padding:48px;border-radius:34px;background:linear-gradient(145deg,#fbf7ff,#f7f1ea);border:1px solid rgba(89,43,116,.11)}.start-help-shell>div:first-child{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:28px}.start-help h2{font-family:Palatino Linotype,Palatino,Georgia,serif;font-size:43px;color:#3b1854;margin:8px 0 0;max-width:660px}.start-help-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.start-help-grid a{padding:23px;border-radius:20px;text-decoration:none;background:rgba(255,255,255,.78);border:1px solid rgba(91,43,121,.1)}.start-help-grid span{display:block;color:#997318;text-transform:uppercase;letter-spacing:.12em;font-size:9px;font-weight:900}.start-help-grid strong{display:block;font-family:Palatino Linotype,Palatino,Georgia,serif;font-size:22px;color:#3e1a57;margin:7px 0}.start-help-grid p{font-size:13px;color:#6c5d71;margin:0;line-height:1.55}.home-start-banner{padding:28px 0;background:linear-gradient(90deg,#24103d,#3b145f);color:#fff}.home-start-inner{display:flex;align-items:center;justify-content:space-between;gap:28px}.home-start-inner span{display:block;color:#efd267;text-transform:uppercase;letter-spacing:.13em;font-size:10px;font-weight:900}.home-start-inner strong{display:block;font-family:Palatino Linotype,Palatino,Georgia,serif;font-size:25px;color:#fff6da;margin-top:3px}.home-start-inner p{margin:4px 0 0;color:rgba(255,255,255,.67);font-size:13px}.home-start-inner .btn{white-space:nowrap}.start-inline-note{margin:18px 0 28px;padding:18px 20px;border-radius:18px;background:linear-gradient(135deg,#f6edfc,#fff9e9);border:1px solid rgba(115,66,144,.13)}.start-inline-note>span{display:block;text-transform:uppercase;letter-spacing:.12em;color:#987018;font-size:10px;font-weight:800;margin-bottom:5px}.start-inline-note p{margin:0!important;color:#63566b!important}.start-inline-note a{font-weight:800} @media(max-width:1100px){.desktop-nav .nav-start{display:none}} @media(max-width:900px){.start-hero-grid{grid-template-columns:1fr;gap:44px;padding:80px 0 70px}.start-visual{min-height:430px;max-width:720px}.start-stage-grid,.start-progress-list{grid-template-columns:1fr}.start-now-shell,.start-progress-shell{grid-template-columns:1fr}.start-foundation-grid{grid-template-columns:1fr 1fr}.home-start-inner{align-items:flex-start}} @media(max-width:620px){.start-hero-grid{padding:65px 0 56px}.start-copy h1{font-size:51px}.start-copy p{font-size:17px}.start-trust{display:grid;gap:7px}.start-visual{min-height:330px}.start-frame{inset:10px 18px 28px 30px;border-radius:32% 32% 23px 23px}.start-float{padding:8px 10px}.start-float.two{top:135px}.start-float.three{bottom:42px}.start-stage-grid,.start-foundation-grid,.start-help-grid{grid-template-columns:1fr}.start-stage{grid-template-columns:48px 1fr;padding:23px;min-height:0}.stage-no{width:44px;height:44px;border-radius:14px}.start-stage h3{font-size:26px}.start-now-shell,.start-help-shell{padding:28px 22px}.start-now h2,.start-progress-copy h2,.start-help h2{font-size:37px}.start-help-shell>div:first-child{display:block}.home-start-inner{display:block}.home-start-inner .btn{margin-top:15px}.start-foundation-grid a{min-height:0}} /* V14 MY LEARNING + INSTALLABLE STATIC APP */ .guide-tools{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px;position:relative;z-index:2} .guide-save,.guide-share,.learning-clear{ appearance:none;border:1px solid rgba(239,207,105,.34);border-radius:999px;padding:10px 15px; font:800 12px/1.2 Inter,ui-sans-serif,system-ui,sans-serif;cursor:pointer; color:#fff3cc;background:rgba(255,255,255,.07);transition:.2s } .guide-save:hover,.guide-share:hover{background:rgba(255,255,255,.13);border-color:rgba(239,207,105,.6)} .guide-save.saved{background:linear-gradient(135deg,#f3dea0,#caa447);color:#2d143d;border-color:#e7cb74} .theme-my-learning{background:#faf7ff} .learning-hero{position:relative;overflow:hidden;background: radial-gradient(circle at 70% 18%,rgba(193,73,230,.32),transparent 24rem), radial-gradient(circle at 20% 90%,rgba(225,185,74,.15),transparent 26rem), linear-gradient(135deg,#10031f,#321050 51%,#150426);color:#fff} .learning-hero::before{content:"";position:absolute;inset:0;opacity:.62;pointer-events:none;background-image: radial-gradient(circle,rgba(255,255,255,.9) 0 1px,transparent 1.5px), radial-gradient(circle,rgba(241,211,111,.8) 0 1px,transparent 1.4px), radial-gradient(circle,rgba(204,148,255,.72) 0 1px,transparent 1.5px); background-size:109px 109px,171px 171px,229px 229px;background-position:7px 13px,54px 31px,82px 18px} .learning-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .75fr;gap:72px;align-items:center;padding:105px 0 96px} .learning-hero h1{font-family:Palatino Linotype,Palatino,Georgia,serif;font-size:clamp(58px,7vw,92px);line-height:.94;color:#fff6d9;margin:18px 0 23px;letter-spacing:-.045em} .learning-hero p{max-width:700px;color:rgba(255,255,255,.79);font-size:19px;line-height:1.7} .learning-trust{display:flex;flex-wrap:wrap;gap:11px 22px;margin-top:26px;color:#efd36f;font-size:12px;font-weight:800} .learning-orbit{position:relative;width:min(440px,90vw);aspect-ratio:1;margin:auto;display:grid;place-items:center} .learning-orbit::before{content:"";position:absolute;inset:9%;border-radius:50%;background:radial-gradient(circle,rgba(196,82,228,.24),transparent 61%);filter:blur(10px)} .learning-ring{position:absolute;border-radius:50%;border:1px solid rgba(239,207,102,.38)} .ring-one{inset:8%;transform:rotate(16deg)}.ring-two{inset:22%;border-color:rgba(225,176,255,.27);transform:rotate(-19deg)} .learning-ring::after{content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:#efd066;top:8%;left:23%;box-shadow:0 0 16px #efd066} .learning-core{position:relative;width:150px;height:150px;border-radius:50%;display:grid;place-items:center;text-align:center;font-size:34px;color:#f4dc86;background:linear-gradient(145deg,rgba(58,18,91,.97),rgba(25,6,47,.98));border:1px solid rgba(240,207,100,.55);box-shadow:0 0 65px rgba(182,68,214,.28),inset 0 0 35px rgba(241,212,109,.06)} .learning-core small{position:absolute;top:83px;color:#fff3d0;font-size:10px;letter-spacing:.15em;line-height:1.35;font-weight:900} .learning-star{position:absolute;color:#f2d979;text-shadow:0 0 18px rgba(241,211,111,.75)}.learning-star.s1{top:7%;right:27%;font-size:22px}.learning-star.s2{left:7%;top:49%;font-size:16px}.learning-star.s3{right:7%;bottom:24%;font-size:19px} .learning-overview{background:linear-gradient(180deg,#faf7ff,#f5effb)} .learning-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .learning-stat{min-height:165px;padding:24px;border-radius:25px;background:linear-gradient(145deg,#fff,#fbf5ff);border:1px solid rgba(93,42,126,.11);box-shadow:0 12px 35px rgba(57,17,83,.055);display:flex;flex-direction:column;justify-content:center;text-decoration:none} .learning-stat span{text-transform:uppercase;letter-spacing:.13em;font-size:9px;color:#947019;font-weight:900}.learning-stat strong{font-family:Palatino Linotype,Palatino,Georgia,serif;font-size:42px;line-height:1;color:#3a1852;margin:9px 0}.learning-stat small{color:#736477} .learning-stat-link:hover{transform:translateY(-3px);border-color:rgba(204,158,47,.42);box-shadow:0 18px 42px rgba(57,17,83,.09)} .learning-saved{background:#fff}.learning-recent{background:linear-gradient(180deg,#f7f1fb,#fcfaff)} .learning-section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:28px}.learning-section-head h2{font-family:Palatino Linotype,Palatino,Georgia,serif;font-size:clamp(38px,4.5vw,55px);color:#301443;margin:7px 0 5px}.learning-section-head p{color:#6e6273;max-width:700px;margin:0} .learning-clear{color:#632c82;background:#fff;border-color:rgba(97,43,128,.18);padding:10px 14px}.learning-clear:hover{background:#f6eef9}.learning-clear.danger{color:#7e2442;border-color:rgba(139,49,76,.22)} .learning-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px} .learning-card{position:relative;padding:24px;border-radius:24px;background:linear-gradient(150deg,#fffdfd,#f9f2fc);border:1px solid rgba(95,43,128,.12);box-shadow:0 12px 35px rgba(53,17,76,.05);min-height:220px;display:flex;flex-direction:column} .learning-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.learning-card-top span{text-transform:uppercase;letter-spacing:.11em;color:#99731c;font-size:9px;font-weight:900} .learning-remove{border:0;width:31px;height:31px;border-radius:50%;background:#f1e7f5;color:#6e358d;font-size:20px;line-height:1;cursor:pointer}.learning-remove:hover{background:#e8d7ef} .learning-card h3{font-family:Palatino Linotype,Palatino,Georgia,serif;font-size:25px;margin:16px 0 9px;line-height:1.16}.learning-card h3 a{text-decoration:none;color:#3b1951}.learning-card p{color:#706373;font-size:13px;line-height:1.58;margin:0}.learning-open{margin-top:auto;padding-top:19px;text-decoration:none;color:#6f2f96;font-size:13px;font-weight:900} .learning-empty{text-align:center;padding:56px 24px;border:1px dashed rgba(100,47,131,.2);border-radius:28px;background:rgba(250,246,252,.75)}.learning-empty[hidden]{display:none}.learning-empty>span{display:block;color:#c29b39;font-size:40px}.learning-empty h3{font-family:Palatino Linotype,Palatino,Georgia,serif;color:#3c1b50;font-size:28px;margin:7px 0}.learning-empty p{color:#726575}.learning-empty a{font-weight:900;color:#713097} .learning-install{background:linear-gradient(135deg,#1a0731,#37105a);color:#fff}.learning-install-shell{display:grid;grid-template-columns:1fr auto;grid-template-areas:"copy button" "copy note";align-items:center;gap:10px 45px;padding:46px;border-radius:34px;border:1px solid rgba(234,199,84,.28);background:radial-gradient(circle at 85% 20%,rgba(169,64,198,.22),transparent 28%),rgba(255,255,255,.035)} .learning-install-shell>div:first-child{grid-area:copy}.learning-install-shell h2{font-family:Palatino Linotype,Palatino,Georgia,serif;color:#fff3d2;font-size:45px;margin:7px 0 13px}.learning-install-shell p{color:rgba(255,255,255,.72);max-width:700px}.learning-install-shell>[data-install-app]{grid-area:button}.learning-install-note{grid-area:note;color:rgba(255,255,255,.52);font-size:12px;max-width:280px;text-align:right} .learning-privacy{background:#fff}.learning-privacy-shell{display:grid;grid-template-columns:.8fr 1.2fr;gap:52px;padding:45px;border-radius:32px;background:linear-gradient(145deg,#fffaf0,#faf3ff);border:1px solid rgba(98,43,128,.11)}.learning-privacy-shell h2{font-family:Palatino Linotype,Palatino,Georgia,serif;font-size:43px;color:#39184f;margin:8px 0}.learning-privacy-shell p{color:#6e6173}.learning-data-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:19px}.learning-data-actions a{font-weight:900;color:#6f2e96;text-decoration:none} .home-learning-banner{padding:24px 0;background:linear-gradient(90deg,#130527,#2a0b48 55%,#190630);color:#fff;border-top:1px solid rgba(239,207,105,.14)} .home-learning-inner{display:grid;grid-template-columns:54px 1fr auto;gap:18px;align-items:center}.home-learning-icon{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:rgba(239,207,105,.12);border:1px solid rgba(239,207,105,.34);color:#efd26a;font-size:20px}.home-learning-inner span{display:block;color:#e9cb68;text-transform:uppercase;letter-spacing:.12em;font-size:9px;font-weight:900}.home-learning-inner strong{display:block;font-family:Palatino Linotype,Palatino,Georgia,serif;color:#fff4d6;font-size:24px;margin-top:2px}.home-learning-inner p{margin:2px 0 0;color:rgba(255,255,255,.62);font-size:12px}.home-learning-inner .btn-ghost{white-space:nowrap} .contact-source-note{margin:26px 0;padding:20px;border-radius:18px;background:linear-gradient(145deg,#fff8e9,#f9f0fc);border:1px solid rgba(126,79,139,.13)}.contact-source-note p{margin:.4em 0 0} .offline-page{min-height:100vh;display:grid;place-items:center;padding:32px;background:radial-gradient(circle at 70% 20%,rgba(180,70,210,.22),transparent 30rem),linear-gradient(135deg,#120522,#321050);color:#fff}.offline-card{width:min(720px,100%);padding:52px;border-radius:34px;background:rgba(255,255,255,.07);border:1px solid rgba(238,205,99,.34);box-shadow:0 30px 80px rgba(0,0,0,.25)}.offline-card h1{font-family:Palatino Linotype,Palatino,Georgia,serif;color:#fff5d8;font-size:clamp(46px,7vw,72px);margin:17px 0}.offline-card p{color:rgba(255,255,255,.73);font-size:17px} @media(max-width:900px){ .learning-hero-grid{grid-template-columns:1fr;gap:35px;padding:80px 0 70px}.learning-orbit{max-width:380px} .learning-stats{grid-template-columns:1fr 1fr}.learning-grid{grid-template-columns:1fr 1fr} .learning-install-shell{grid-template-columns:1fr;grid-template-areas:"copy" "button" "note";gap:18px}.learning-install-note{text-align:left;max-width:none} .learning-privacy-shell{grid-template-columns:1fr}.home-learning-inner{grid-template-columns:50px 1fr}.home-learning-inner .btn{grid-column:1/-1;justify-self:start} } @media(max-width:620px){ .learning-hero-grid{padding:63px 0 55px}.learning-hero h1{font-size:51px}.learning-hero p{font-size:16px}.learning-trust{display:grid;gap:7px} .learning-orbit{width:300px}.learning-core{width:120px;height:120px}.learning-core small{top:69px} .learning-stats,.learning-grid{grid-template-columns:1fr}.learning-section-head{display:block}.learning-section-head .learning-clear{margin-top:14px} .learning-install-shell,.learning-privacy-shell{padding:29px 22px}.learning-install-shell h2,.learning-privacy-shell h2{font-size:36px} .home-learning-inner{display:block}.home-learning-icon{margin-bottom:12px}.home-learning-inner .btn{margin-top:14px} .guide-tools{margin-top:18px}.guide-save,.guide-share{padding:10px 13px} } /* v15 Daily Adhkar */ .theme-daily-adhkar{background:#11071f} .adhkar-hero{position:relative;overflow:hidden;background:radial-gradient(circle at 20% 20%,rgba(138,71,190,.28),transparent 38%),radial-gradient(circle at 80% 30%,rgba(224,180,89,.16),transparent 32%),linear-gradient(145deg,#160924,#27113f 58%,#0d1027);color:#fff;padding:clamp(74px,9vw,132px) 0 72px} .adhkar-hero:before{content:"";position:absolute;inset:0;background-image:radial-gradient(#fff 1px,transparent 1px);background-size:42px 42px;opacity:.07;mask-image:linear-gradient(to bottom,#000,transparent)} .adhkar-hero-grid{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(36px,6vw,88px);align-items:center} .adhkar-copy h1{font-size:clamp(3rem,6vw,6.4rem);line-height:.93;letter-spacing:-.055em;margin:.25em 0 .28em;max-width:850px} .adhkar-copy>p{font-size:clamp(1.06rem,1.5vw,1.28rem);line-height:1.75;color:#e7dff0;max-width:720px} .adhkar-trust{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:26px;color:#e5ca87;font-size:.88rem;font-weight:700;letter-spacing:.02em} .adhkar-visual{position:relative;min-height:520px;border:1px solid rgba(232,196,112,.38);border-radius:42px;overflow:hidden;box-shadow:0 36px 90px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.08)} .adhkar-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(16,7,29,.72),transparent 52%)} .adhkar-visual img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0} .adhkar-orbit{position:absolute;z-index:2;right:32px;bottom:30px;width:150px;height:150px;border:1px solid rgba(242,205,117,.55);border-radius:50%;display:grid;place-content:center;text-align:center;box-shadow:0 0 45px rgba(224,180,89,.17),inset 0 0 35px rgba(255,255,255,.05);backdrop-filter:blur(8px)} .adhkar-orbit:before,.adhkar-orbit:after{content:"";position:absolute;border:1px solid rgba(242,205,117,.24);border-radius:50%;inset:-16px}.adhkar-orbit:after{inset:-34px;opacity:.55} .adhkar-orbit span{font-family:serif;font-size:2.45rem;direction:rtl}.adhkar-orbit small{color:#e5ca87;text-transform:uppercase;letter-spacing:.17em;font-size:.62rem} .adhkar-jump{background:#1c0d31;border-top:1px solid rgba(231,193,109,.16);border-bottom:1px solid rgba(231,193,109,.16);position:sticky;top:72px;z-index:22} .adhkar-jump-inner{display:flex;gap:8px;overflow:auto;padding:12px 0;scrollbar-width:none}.adhkar-jump-inner::-webkit-scrollbar{display:none}.adhkar-jump a{flex:0 0 auto;color:#eee4f7;text-decoration:none;padding:10px 14px;border-radius:999px;font-size:.86rem;font-weight:700}.adhkar-jump a:hover{background:rgba(255,255,255,.08);color:#f2cf7d}.adhkar-jump a span{color:#e6bd65;margin-right:5px} .adhkar-intro,.adhkar-section{background:#f8f4fb}.adhkar-section.alt{background:#efe8f5}.adhkar-section-head{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:end;margin-bottom:32px}.adhkar-section-head h2{font-size:clamp(2rem,3.5vw,3.5rem);line-height:1.02;margin:10px 0 0;color:#26133e;letter-spacing:-.035em}.adhkar-section-head>p{color:#65586f;line-height:1.75;margin:0;max-width:620px} .adhkar-time{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:7px 12px;font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.11em;background:#fff;border:1px solid #decfe8;color:#4e286e}.adhkar-time.sun{box-shadow:inset 3px 0 #e2ae42}.adhkar-time.prayer{box-shadow:inset 3px 0 #9d6cbd}.adhkar-time.night{box-shadow:inset 3px 0 #5450ac}.adhkar-time.dawn{box-shadow:inset 3px 0 #73b9ca}.adhkar-time.travel{box-shadow:inset 3px 0 #4c9a78} .adhkar-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.adhkar-grid.one{grid-template-columns:1fr}.adhkar-card{position:relative;overflow:hidden;background:linear-gradient(145deg,#fff,rgba(255,255,255,.83));border:1px solid #ded0e7;border-radius:26px;padding:clamp(22px,3vw,34px);box-shadow:0 16px 40px rgba(45,24,62,.08)}.adhkar-card:before{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:-60px;top:-80px;filter:blur(2px);opacity:.22;pointer-events:none}.glow-sky:before{background:#704dce}.glow-gold:before{background:#e2ad42}.glow-pearl:before{background:#d9c7ee}.glow-water:before{background:#5bb8d1}.glow-violet:before{background:#9b4fc4}.glow-garden:before{background:#3b9d72}.adhkar-card.wide{grid-column:1/-1} .adhkar-card-top{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.source-grade,.adhkar-count-label{display:inline-flex;border-radius:999px;padding:6px 10px;font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.source-grade{background:#221139;color:#f2d789}.source-grade.hasan{background:#402258}.source-grade.sahih{background:#143d31;color:#d8f4e6}.adhkar-count-label{background:#f2ebf6;color:#5c4868}.adhkar-card h3{position:relative;font-size:clamp(1.55rem,2.4vw,2.25rem);margin:.1em 0 .55em;color:#26133e;letter-spacing:-.025em}.adhkar-arabic{font-size:calc(clamp(1.75rem,3vw,2.8rem)*var(--arabic-scale,1));line-height:1.9;text-align:right;color:#211334;margin:18px 0 12px}.adhkar-arabic.long{font-size:calc(clamp(1.45rem,2.4vw,2.15rem)*var(--arabic-scale,1));line-height:2}.translit{font-style:italic;color:#55425f;line-height:1.7}.adhkar-meaning,.adhkar-note{color:#5e5265;line-height:1.72}.adhkar-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.adhkar-links a{display:inline-flex;text-decoration:none;color:#492766;font-weight:800;background:#f1e8f6;border:1px solid #dfcee9;border-radius:999px;padding:8px 12px;font-size:.78rem}.adhkar-links a:hover{background:#2a143f;color:#fff;border-color:#2a143f} .dhikr-counter{display:flex;align-items:center;gap:12px;margin-top:24px;padding-top:22px;border-top:1px solid #e6ddeb}.dhikr-tap{appearance:none;border:0;width:112px;height:112px;border-radius:50%;background:radial-gradient(circle at 35% 25%,#7c4e9e,#241037 72%);color:#fff;box-shadow:0 12px 30px rgba(44,18,65,.23),inset 0 0 0 2px rgba(240,200,111,.38);cursor:pointer;display:grid;place-content:center}.dhikr-tap span{font-size:2.15rem;font-weight:800;line-height:1}.dhikr-tap small{margin-top:5px;color:#efd18a;font-size:.66rem}.dhikr-tap.complete{background:radial-gradient(circle at 35% 25%,#3b9b72,#15382c 72%)}.dhikr-reset,.dhikr-multi-reset{border:1px solid #d9c8e3;background:#fff;color:#5d456c;border-radius:999px;padding:9px 13px;font-weight:700;cursor:pointer}.dhikr-reset:hover,.dhikr-multi-reset:hover{border-color:#7f5698;color:#35194c} .adhkar-three{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0}.adhkar-three>div{background:#f4eef7;border:1px solid #e2d6e8;border-radius:16px;padding:16px;text-align:center}.adhkar-three strong{display:block;color:#2a173d;font-size:1.08rem}.adhkar-three span{display:block;color:#75647f;font-size:.76rem;margin:5px 0}.adhkar-three b{color:#9b6a19;font-size:.85rem} .dhikr-multi{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:22px;padding-top:20px;border-top:1px solid #e5dbe9}.dhikr-multi button:not(.dhikr-multi-reset){border:1px solid #d9c9e2;background:#fff;border-radius:15px;padding:13px 10px;cursor:pointer;color:#3d254e}.dhikr-multi button:not(.dhikr-multi-reset).complete{background:#e5f5ed;border-color:#94cbb0}.dhikr-multi span{display:block;font-size:.75rem}.dhikr-multi strong{display:block;margin-top:3px}.dhikr-multi-reset{grid-column:1/-1;justify-self:start;margin-top:3px} .adhkar-source-note{position:relative;overflow:hidden;background:linear-gradient(135deg,#241038,#35164f);color:#fff;border:1px solid rgba(235,196,104,.35);border-radius:28px;padding:clamp(28px,5vw,58px);box-shadow:0 20px 55px rgba(42,18,62,.2)}.adhkar-source-note:after{content:"✦";position:absolute;right:36px;top:20px;font-size:7rem;color:rgba(235,196,104,.08)}.adhkar-source-note h2{font-size:clamp(2rem,3.5vw,3.6rem);max-width:950px;line-height:1.06;margin:.28em 0}.adhkar-source-note p{max-width:850px;color:#ddd1e7;line-height:1.75} @media(max-width:820px){.adhkar-hero-grid,.adhkar-section-head{grid-template-columns:1fr}.adhkar-visual{min-height:380px}.adhkar-grid{grid-template-columns:1fr}.adhkar-card.wide{grid-column:auto}.adhkar-jump{top:64px}.adhkar-three{grid-template-columns:1fr}.dhikr-multi{grid-template-columns:1fr}.adhkar-card-top{align-items:flex-start;flex-direction:column}.adhkar-copy h1{font-size:clamp(2.8rem,15vw,4.8rem)}.adhkar-orbit{width:120px;height:120px;right:22px;bottom:22px}.adhkar-orbit span{font-size:2rem}} @media(max-width:520px){.adhkar-hero{padding-top:58px}.adhkar-visual{min-height:320px;border-radius:28px}.adhkar-jump a{font-size:.78rem;padding:9px 10px}.adhkar-card{border-radius:22px;padding:20px}.adhkar-arabic{font-size:calc(1.75rem*var(--arabic-scale,1))}.dhikr-tap{width:96px;height:96px}} /* v16 local Surah audio library */ .surah-audio-card{margin:14px 0 28px;padding:16px 18px;border:1px solid rgba(190,145,255,.28);border-radius:20px;background:linear-gradient(135deg,rgba(74,25,108,.08),rgba(232,201,126,.09));box-shadow:0 12px 32px rgba(45,19,67,.08)} .surah-audio-card .surah-audio-kicker{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:#7135a4;margin-bottom:7px} .surah-audio-card audio{display:block;width:100%;margin:0 0 7px} .surah-audio-card figcaption{font-size:.88rem;color:#675d70} .audio-unavailable-note{margin:12px 0 28px;padding:12px 15px;border-left:3px solid #b58b43;background:rgba(240,224,191,.22);border-radius:10px;color:#5b5060;font-size:.92rem} .theme-royal .surah-audio-card{border-color:rgba(224,193,113,.34);background:linear-gradient(135deg,rgba(75,25,113,.09),rgba(224,193,113,.11))} /* V17 MORE AUDIO LIBRARY */ .recitation-set{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:18px 0 24px} .recitation-option,.recitation-library-card,.adhkar-audio-wrap{position:relative;overflow:hidden;border:1px solid rgba(220,184,94,.28);border-radius:18px;padding:16px;background:linear-gradient(145deg,rgba(38,17,65,.94),rgba(17,17,48,.92));box-shadow:0 18px 44px rgba(20,8,35,.16)} .recitation-option:before,.recitation-library-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 0%,rgba(208,158,255,.18),transparent 34%),radial-gradient(circle at 8% 100%,rgba(243,194,91,.12),transparent 34%);pointer-events:none} .recitation-option>* ,.recitation-library-card>*{position:relative} .recitation-option .audio-kicker,.recitation-library-card .audio-kicker{display:inline-block;font-size:.73rem;letter-spacing:.11em;text-transform:uppercase;color:#eacb79;font-weight:800;margin-bottom:6px} .recitation-option h3,.recitation-library-card h3{margin:.1rem 0 .35rem;color:#fff6dc;font-size:1.05rem} .recitation-option p,.recitation-library-card p{margin:.25rem 0 .7rem;color:rgba(255,255,255,.78);font-size:.9rem;line-height:1.5} .recitation-option audio,.recitation-library-card audio,.audio-alt audio,.adhkar-audio-wrap audio{display:block;width:100%;margin-top:10px} .audio-alt{margin-top:10px;border-top:1px solid rgba(213,174,83,.22);padding-top:8px} .audio-alt summary{cursor:pointer;color:#b8892f;font-weight:750;font-size:.9rem} .audio-alt p{font-size:.82rem;margin:.45rem 0;color:#675a73} .recitation-library{margin:26px 0;padding:24px;border-radius:24px;background:linear-gradient(145deg,#21103a,#11142c);border:1px solid rgba(224,186,89,.3)} .recitation-library h2{color:#fff2c9;margin-top:0}.recitation-library>.intro{color:rgba(255,255,255,.8);max-width:760px} .recitation-library-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px} .audio-note{font-size:.82rem;color:#796d86;margin:.65rem 0 0} .audio-rights-note{border-left:3px solid #c99b3f;background:rgba(244,235,210,.55);padding:10px 13px;border-radius:0 12px 12px 0;font-size:.84rem;margin:14px 0;color:#4e4358} .adhkar-audio-wrap{margin-top:14px;background:linear-gradient(145deg,rgba(44,24,70,.96),rgba(17,22,51,.96));color:white} .adhkar-audio-wrap strong{display:block;color:#ffe5a4;margin-bottom:3px}.adhkar-audio-wrap small{color:rgba(255,255,255,.72)} @media(max-width:760px){.recitation-set,.recitation-library-grid{grid-template-columns:1fr}.recitation-library{padding:18px}.recitation-option,.recitation-library-card{padding:14px}} /* V18 AUDIO EXPERIENCE */ .theme-audio .page-hero{background:radial-gradient(circle at 82% 10%,rgba(181,102,255,.23),transparent 28%),linear-gradient(135deg,#130925,#251044 58%,#10142d)} .audio-hero{position:relative;overflow:hidden;background:linear-gradient(145deg,#170a2d,#2b124c 55%,#12172f);color:#fff;padding:42px 0;border-bottom:1px solid rgba(232,196,105,.2)} .audio-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 10% 15%,rgba(213,153,255,.2),transparent 27%),radial-gradient(circle at 86% 82%,rgba(241,191,79,.14),transparent 24%);pointer-events:none} .audio-hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(250px,.7fr);align-items:center;gap:36px}.audio-hero h2{font-size:clamp(2rem,4vw,3.6rem);line-height:1.02;color:#fff4cf;margin:.35rem 0 1rem}.audio-hero p{max-width:760px;color:rgba(255,255,255,.82);font-size:1.02rem;line-height:1.72}.audio-trust-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.audio-trust-row span{border:1px solid rgba(239,205,116,.24);background:rgba(255,255,255,.06);border-radius:999px;padding:8px 11px;font-size:.8rem;color:#f8e8b6} .audio-orbit{width:min(290px,70vw);aspect-ratio:1;margin:auto;border-radius:50%;display:grid;place-items:center;position:relative;background:radial-gradient(circle,#6a2f91 0 17%,#21103d 18% 43%,#0f1733 44% 70%,transparent 71%);box-shadow:0 0 80px rgba(173,101,255,.22),inset 0 0 0 1px rgba(247,210,107,.28)}.audio-orbit:before,.audio-orbit:after,.audio-orbit i{content:"";position:absolute;border:1px solid rgba(236,203,112,.32);border-radius:50%;inset:11%}.audio-orbit:after{inset:25%;border-color:rgba(218,176,255,.3)}.audio-orbit i{inset:-4% 46%;border:0;border-left:1px solid rgba(244,210,118,.26);transform:rotate(48deg)}.audio-orbit>span{font-size:3.2rem;color:#ffe19a;text-shadow:0 0 30px rgba(255,213,115,.5)}.audio-orbit b{position:absolute;bottom:16%;font-family:serif;font-size:1.1rem;letter-spacing:.04em;color:#fff1c2} .audio-learning-note,.audio-provenance-note{border:1px solid rgba(182,139,53,.22);border-radius:20px;padding:20px 22px;background:linear-gradient(145deg,rgba(255,251,240,.9),rgba(248,242,255,.92));box-shadow:0 14px 38px rgba(41,19,58,.08)}.audio-learning-note strong{font-size:1.05rem;color:#4a2a63}.audio-learning-note p,.audio-provenance-note p{margin:.4rem 0 0;color:#60566b;line-height:1.65}.audio-section.alt{background:linear-gradient(180deg,rgba(244,239,251,.72),rgba(255,255,255,.4))}.audio-library-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.audio-library-grid.featured{grid-template-columns:repeat(2,minmax(0,1fr))}.audio-library-card{position:relative;overflow:hidden;border:1px solid rgba(211,171,76,.26);border-radius:20px;padding:18px;background:linear-gradient(145deg,#211039,#11162e);box-shadow:0 16px 40px rgba(25,9,39,.13)}.audio-library-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 100% 0%,rgba(202,133,255,.16),transparent 33%),radial-gradient(circle at 0 100%,rgba(239,194,90,.1),transparent 28%);pointer-events:none}.audio-library-card>*{position:relative}.audio-library-top{display:flex;justify-content:space-between;gap:10px;align-items:center}.audio-kicker{font-size:.72rem;text-transform:uppercase;letter-spacing:.11em;color:#edca73;font-weight:800}.audio-duration{font-variant-numeric:tabular-nums;color:rgba(255,255,255,.58);font-size:.78rem}.audio-library-card h3{color:#fff4d1;font-size:1.08rem;margin:.45rem 0 .4rem;line-height:1.3}.audio-library-card p{color:rgba(255,255,255,.72);font-size:.86rem;line-height:1.55;margin:.25rem 0 .8rem}.audio-library-card audio{width:100%;display:block;margin:10px 0}.audio-library-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}.audio-library-links a{font-size:.8rem;color:#f2cf78;text-decoration:none;border-bottom:1px solid rgba(242,207,120,.3)}.audio-library-card.audio-missing{background:linear-gradient(145deg,#2a2132,#171923);border-style:dashed}.audio-library-card.audio-missing h3{color:#f4e8f7}.audio-more{text-align:center;margin-top:24px}.audio-provenance-note{background:linear-gradient(135deg,#fff8e7,#f7f1ff)}.audio-provenance-note h2{margin:.25rem 0 .45rem;color:#2c173d}.audio-provenance-note a{display:inline-block;margin-top:10px;color:#6c3a88;font-weight:750} @media(max-width:980px){.audio-library-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.audio-hero-grid{grid-template-columns:1fr}.audio-orbit{width:230px}} @media(max-width:680px){.audio-library-grid,.audio-library-grid.featured{grid-template-columns:1fr}.audio-hero{padding:30px 0}.audio-orbit{width:190px}.audio-library-card{padding:15px}.audio-learning-note,.audio-provenance-note{padding:17px}} /* V19 QURAN PRACTICE */ .theme-practice .page-hero{background:radial-gradient(circle at 82% 5%,rgba(188,111,255,.24),transparent 26%),linear-gradient(135deg,#150828,#2f1052 55%,#10162f)} .practice-hero{position:relative;overflow:hidden;padding:68px 0 62px;color:#fff;background:radial-gradient(circle at 15% 25%,rgba(176,90,232,.22),transparent 30%),radial-gradient(circle at 88% 75%,rgba(232,190,80,.13),transparent 25%),linear-gradient(145deg,#16092c,#321153 55%,#10162e)} .practice-hero:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 20% 30%,rgba(255,255,255,.78) 0 1px,transparent 1.2px),radial-gradient(circle at 75% 20%,rgba(255,222,127,.68) 0 1px,transparent 1.2px);background-size:88px 88px,124px 124px;opacity:.42;pointer-events:none} .practice-hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr);gap:54px;align-items:center}.practice-hero h2{font-family:Palatino Linotype,Palatino,Georgia,serif;font-size:clamp(2.7rem,5vw,5.3rem);line-height:.98;color:#fff3cc;margin:.5rem 0 1rem}.practice-hero p{font-size:1.04rem;line-height:1.75;color:rgba(255,255,255,.82);max-width:760px}.practice-trust{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}.practice-trust span{border:1px solid rgba(238,202,111,.25);background:rgba(255,255,255,.06);border-radius:999px;padding:8px 11px;font-size:.79rem;color:#f6e4ad} .practice-orbit{width:min(300px,72vw);aspect-ratio:1;border-radius:50%;margin:auto;display:grid;place-items:center;position:relative;background:radial-gradient(circle,#6f3397 0 17%,#281146 18% 44%,#10172f 45% 69%,transparent 70%);box-shadow:0 0 90px rgba(177,99,248,.24),inset 0 0 0 1px rgba(243,208,112,.3)}.practice-orbit:before,.practice-orbit:after,.practice-orbit i{content:"";position:absolute;border:1px solid rgba(239,207,115,.34);border-radius:50%;inset:10%}.practice-orbit:after{inset:25%;border-color:rgba(221,179,255,.3)}.practice-orbit i{inset:-5% 48%;border:0;border-left:1px solid rgba(242,207,111,.25);transform:rotate(53deg)}.practice-orbit>span{font-family:serif;font-size:3.2rem;color:#ffe4a0;text-shadow:0 0 30px rgba(255,218,128,.45)}.practice-orbit b{position:absolute;bottom:15%;font-size:.72rem;letter-spacing:.18em;color:#fff0be} .practice-principle{padding:28px;border-radius:26px;background:linear-gradient(145deg,#fffdf8,#f8f1ff);border:1px solid rgba(111,59,143,.14);box-shadow:0 17px 42px rgba(49,20,67,.07)}.practice-principle h2{margin:.3rem 0 1rem;color:#35164b}.practice-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.practice-steps>div{padding:16px;border-radius:18px;background:#fff;border:1px solid rgba(104,58,132,.12)}.practice-steps b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#542575,#914ab4);color:#fff;margin-bottom:9px}.practice-steps strong{display:block;color:#351649}.practice-steps span{display:block;color:#746979;font-size:.82rem;line-height:1.45;margin-top:3px} .practice-progress-section{background:linear-gradient(180deg,rgba(246,240,251,.7),rgba(255,255,255,.3))}.practice-progress-shell{display:grid;grid-template-columns:1fr auto auto;gap:26px;align-items:center;padding:26px 30px;border-radius:28px;background:linear-gradient(135deg,#1e0d36,#331254);color:#fff;border:1px solid rgba(229,192,99,.3);box-shadow:0 18px 46px rgba(35,13,52,.16)}.practice-progress-shell h2{margin:.25rem 0 .45rem;color:#fff1c6}.practice-progress-shell p{margin:0;color:rgba(255,255,255,.75);max-width:700px}.practice-progress-ring{--p:0;display:grid;place-items:center;width:94px;height:94px;border-radius:50%;background:conic-gradient(#e9c560 calc(var(--p)*1%),rgba(255,255,255,.12) 0);position:relative}.practice-progress-ring:after{content:"";position:absolute;inset:8px;border-radius:50%;background:#25103f}.practice-progress-ring span{position:relative;z-index:1;color:#fff2c2;font-weight:850;font-size:.9rem}.practice-progress-shell .learning-clear{border-color:rgba(245,220,151,.35);color:#fff2c3;background:rgba(255,255,255,.06)} .practice-section.alt{background:linear-gradient(180deg,rgba(245,239,251,.75),rgba(255,255,255,.35))}.practice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.practice-grid.essentials{grid-template-columns:repeat(2,minmax(0,1fr))}.practice-card{position:relative;overflow:hidden;padding:18px;border-radius:22px;background:linear-gradient(145deg,#21103b,#11162e);border:1px solid rgba(224,187,92,.28);box-shadow:0 16px 40px rgba(25,9,39,.13);transition:.2s ease}.practice-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 100% 0%,rgba(201,129,255,.17),transparent 32%),radial-gradient(circle at 0 100%,rgba(239,194,89,.1),transparent 28%);pointer-events:none}.practice-card>*{position:relative}.practice-card.reviewed{border-color:rgba(229,196,103,.72);box-shadow:0 16px 42px rgba(86,44,118,.18),inset 0 0 0 1px rgba(229,196,103,.14)}.practice-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.practice-number{font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;color:#edcb75;font-weight:850}.practice-reviewed{border:1px solid rgba(240,209,123,.25);background:rgba(255,255,255,.06);color:#f3ddb0;border-radius:999px;padding:7px 9px;font-size:.72rem;font-weight:800;cursor:pointer}.practice-reviewed[aria-pressed="true"]{background:#e6c25e;color:#241231;border-color:#e6c25e}.practice-card h3{font-family:Palatino Linotype,Palatino,Georgia,serif;color:#fff4d2;font-size:1.25rem;margin:.7rem 0 .65rem}.practice-card audio{display:block;width:100%;margin:10px 0}.practice-audio-meta{display:flex;flex-wrap:wrap;gap:7px;margin:.2rem 0 .5rem}.practice-audio-meta span{font-size:.7rem;color:#ddc4e8;border:1px solid rgba(222,192,236,.18);border-radius:999px;padding:5px 8px}.practice-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.practice-controls label{display:flex;flex-direction:column;gap:4px;color:rgba(255,255,255,.68);font-size:.69rem;text-transform:uppercase;letter-spacing:.06em}.practice-controls select{border:1px solid rgba(232,201,119,.24);background:#171329;color:#fff;border-radius:10px;padding:8px;font-size:.8rem}.practice-repeat-status{grid-column:1/-1;min-height:1.1rem;color:#e8cd7e;font-size:.75rem}.practice-links{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px}.practice-links a{font-size:.78rem;color:#f1ce77;text-decoration:none;border-bottom:1px solid rgba(241,206,119,.28)}.practice-card-missing{background:linear-gradient(145deg,#2b2233,#171923);border-style:dashed}.practice-audio-missing{display:grid;gap:5px;margin:12px 0;padding:14px;border-radius:14px;background:rgba(255,255,255,.05);color:rgba(255,255,255,.72)}.practice-audio-missing strong{color:#f1dfad}.practice-audio-missing span{font-size:.82rem;line-height:1.45}.practice-note{margin-top:22px;padding:16px 18px;border-left:3px solid #b58a3c;background:linear-gradient(135deg,#fff8e8,#f9f3ff);border-radius:0 16px 16px 0;color:#5d5264;line-height:1.65} .practice-quiz-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.practice-quiz{padding:21px;border-radius:22px;background:linear-gradient(145deg,#fffdfa,#f8f2ff);border:1px solid rgba(104,58,132,.13);box-shadow:0 12px 32px rgba(43,18,59,.06)}.practice-quiz>span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#542375;color:#fff;font-weight:850}.practice-quiz h3{font-size:1rem;line-height:1.5;color:#3b1d4f;margin:.75rem 0}.practice-quiz>div{display:flex;flex-wrap:wrap;gap:7px}.practice-quiz button{border:1px solid rgba(91,46,121,.16);background:#fff;color:#47225b;border-radius:999px;padding:8px 10px;font-weight:750;cursor:pointer}.practice-quiz button:hover,.practice-quiz button:focus-visible{border-color:#8c50ae;background:#f6effa}.practice-quiz button.correct{background:#e9f7ef;color:#1c5e3d;border-color:#bee4cd}.practice-quiz button.wrong{background:#fff1ec;color:#84402d;border-color:#f0c8ba}.practice-quiz [data-quiz-feedback]{min-height:1.3rem;margin:.7rem 0 0;font-size:.82rem;color:#6a5c70} @media(max-width:980px){.practice-hero-grid{grid-template-columns:1fr}.practice-orbit{width:230px}.practice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.practice-progress-shell{grid-template-columns:1fr auto}.practice-progress-shell .learning-clear{grid-column:1/-1;width:max-content}.practice-steps{grid-template-columns:repeat(2,1fr)}} @media(max-width:680px){.practice-hero{padding:42px 0}.practice-orbit{width:185px}.practice-grid,.practice-grid.essentials,.practice-quiz-grid,.practice-steps{grid-template-columns:1fr}.practice-progress-shell{grid-template-columns:1fr;text-align:left;padding:22px}.practice-progress-ring{width:82px;height:82px}.practice-controls{grid-template-columns:1fr 1fr}.practice-card{padding:15px}.practice-principle{padding:20px}} .home-practice-feature{background:linear-gradient(180deg,#fbf8ff,#fff)}.home-practice-feature .home-feature-shell{display:grid;grid-template-columns:1.25fr .75fr;gap:30px;align-items:center;padding:34px;border-radius:28px;background:radial-gradient(circle at 90% 10%,rgba(179,93,236,.18),transparent 30%),linear-gradient(135deg,#1d0b35,#321151);color:#fff;border:1px solid rgba(229,195,103,.28);box-shadow:0 18px 48px rgba(34,12,52,.15)}.home-practice-feature h2{color:#fff1c9;margin:.3rem 0 .65rem;font-size:clamp(2rem,4vw,3.2rem)}.home-practice-feature p{color:rgba(255,255,255,.8);max-width:720px}.home-practice-mark{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;text-align:center;padding:22px;border-radius:24px;background:rgba(255,255,255,.06);border:1px solid rgba(238,203,111,.22)}.home-practice-mark span{font-family:Palatino Linotype,Palatino,Georgia,serif;font-size:2.4rem;color:#ffe19b}.home-practice-mark b{color:#cfa2e8}.home-practice-mark small{grid-column:1/-1;color:#d9c9e4;letter-spacing:.14em;font-weight:800;font-size:.68rem}@media(max-width:760px){.home-practice-feature .home-feature-shell{grid-template-columns:1fr;padding:23px}.home-practice-mark{max-width:300px}} /* v19 five learning stats */ .learning-stats:has([data-learning-quran-progress]){grid-template-columns:repeat(5,minmax(0,1fr))}@media(max-width:1050px){.learning-stats:has([data-learning-quran-progress]){grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.learning-stats:has([data-learning-quran-progress]){grid-template-columns:1fr}} /* v20 Prayer Times & Qibla */ .theme-prayer-times{background:#f8f4fb}.prayer-page-hero{position:relative;overflow:hidden;background:radial-gradient(circle at 75% 15%,rgba(221,86,220,.28),transparent 28%),radial-gradient(circle at 86% 62%,rgba(89,74,218,.25),transparent 30%),linear-gradient(135deg,#17052e,#36105c 52%,#101733);color:#fff}.prayer-page-hero:after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.82) 0 1px,transparent 1.5px);background-size:72px 72px;opacity:.16;pointer-events:none}.prayer-page-hero>.container{position:relative;z-index:2}.prayer-page-hero h1{color:#fff1c9;font-size:clamp(3.2rem,6vw,6.5rem);line-height:.95}.prayer-page-hero .lead{color:rgba(255,255,255,.8);max-width:800px}.prayer-page-hero .crumbs,.prayer-page-hero .crumbs a{color:rgba(255,255,255,.66)} .prayer-tool-section{background:linear-gradient(180deg,#fff,#f7f1fb)}.prayer-tool-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr);gap:22px;align-items:stretch}.prayer-tool-panel,.prayer-method-note{border-radius:30px;border:1px solid rgba(103,48,139,.14);box-shadow:0 18px 50px rgba(45,17,66,.07)}.prayer-tool-panel{padding:32px;background:linear-gradient(145deg,#fffdfc,#faf4ff)}.prayer-tool-panel h2{font-family:Palatino Linotype,Palatino,Georgia,serif;font-size:clamp(2.2rem,4vw,3.8rem);color:#35164b;margin:.35rem 0 .65rem}.prayer-tool-intro{color:#6a5d70;line-height:1.72;max-width:790px}.prayer-time-form{display:grid;gap:17px;margin-top:25px}.prayer-field{display:flex;flex-direction:column;gap:7px}.prayer-field>span{font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;font-weight:850;color:#5a2c77}.prayer-field small{color:#807384}.prayer-field input,.prayer-field select{width:100%;border:1px solid rgba(93,48,120,.18);background:#fff;color:#2e183b;border-radius:14px;padding:13px 14px;font:inherit;outline:none}.prayer-field input:focus,.prayer-field select:focus{border-color:#8a50ad;box-shadow:0 0 0 3px rgba(126,69,165,.12)}.prayer-form-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}.prayer-form-actions{display:flex;gap:10px;flex-wrap:wrap}.prayer-location-btn{border:1px solid rgba(103,50,135,.2);background:#fff;color:#53246f}.prayer-location-btn:hover{background:#f6eef9}.prayer-status{margin:0;color:#706376;font-size:.86rem}.prayer-status.error{color:#8f3547}.prayer-method-note{padding:30px;background:radial-gradient(circle at 100% 0%,rgba(217,170,76,.15),transparent 31%),linear-gradient(145deg,#211039,#12172e);color:#fff}.prayer-method-note>span{display:block;color:#e4bf68;text-transform:uppercase;letter-spacing:.11em;font-size:.7rem;font-weight:850}.prayer-method-note strong{display:block;font-family:Palatino Linotype,Palatino,Georgia,serif;font-size:2rem;line-height:1.13;color:#fff3d1;margin:.7rem 0}.prayer-method-note p{color:rgba(255,255,255,.72);line-height:1.7}.prayer-method-note a{color:#f0ce78;font-weight:850;text-decoration:none} .prayer-results-section{background:linear-gradient(180deg,#f3edf8,#fff)}.prayer-results-section[hidden]{display:none}.prayer-results-head{display:grid;grid-template-columns:1fr auto;gap:22px;align-items:end;margin-bottom:25px}.prayer-results-head h2{font-family:Palatino Linotype,Palatino,Georgia,serif;font-size:clamp(2.4rem,4.5vw,4.3rem);color:#321548;margin:.3rem 0}.prayer-results-head p{margin:.2rem 0;color:#6c6072}.prayer-dot{margin:0 6px;color:#c49b3b}.prayer-provider-meta{font-size:.82rem}.next-prayer-card{min-width:180px;padding:17px 20px;border-radius:20px;background:linear-gradient(135deg,#211039,#341254);color:#fff;border:1px solid rgba(229,194,101,.32)}.next-prayer-card span{display:block;color:#e9ca74;font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;font-weight:850}.next-prayer-card strong{display:block;font-family:Palatino Linotype,Palatino,Georgia,serif;color:#fff1c9;font-size:1.8rem;margin:.15rem 0}.next-prayer-card small{color:rgba(255,255,255,.68)} .prayer-time-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:11px}.time-card{position:relative;overflow:hidden;padding:21px 14px;border-radius:23px;background:linear-gradient(145deg,#24103e,#12172f);color:#fff;text-align:center;border:1px solid rgba(229,194,99,.22);box-shadow:0 14px 38px rgba(29,11,43,.11);transition:.2s}.time-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 0%,rgba(191,100,246,.17),transparent 35%);pointer-events:none}.time-card>*{position:relative}.time-card>span{display:block;font-family:serif;color:#dfc1eb;font-size:1.2rem}.time-card h3{font-size:.9rem;color:#f5e2ad;margin:.4rem 0}.time-card strong{display:block;font-family:Palatino Linotype,Palatino,Georgia,serif;font-size:2rem;color:#fff3cf}.time-card small{display:block;color:rgba(255,255,255,.58);margin-top:.25rem}.time-card.sunrise{background:linear-gradient(145deg,#72512e,#2b1d39)}.time-card.maghrib{background:linear-gradient(145deg,#6a274f,#2d123f)}.time-card.isha{background:linear-gradient(145deg,#17123e,#0e1933)}.time-card.next{border-color:#edcb72;box-shadow:0 16px 44px rgba(109,59,144,.19),0 0 0 2px rgba(232,197,104,.12)}.time-card.next:after{content:"NEXT";position:absolute;top:9px;right:9px;padding:3px 6px;border-radius:999px;background:#e8c45f;color:#261332;font-size:.55rem;font-weight:900;letter-spacing:.1em} .qibla-panel{margin-top:26px;display:grid;grid-template-columns:1fr auto;gap:38px;align-items:center;padding:34px;border-radius:30px;background:radial-gradient(circle at 88% 20%,rgba(176,70,208,.2),transparent 28%),linear-gradient(135deg,#1d0b34,#311151);color:#fff;border:1px solid rgba(233,198,103,.28)}.qibla-copy h2{font-family:Palatino Linotype,Palatino,Georgia,serif;color:#fff1cb;font-size:clamp(2rem,4vw,3.4rem);margin:.35rem 0}.qibla-copy p{color:rgba(255,255,255,.78);max-width:720px;line-height:1.7}.qibla-copy>small{display:block;color:rgba(255,255,255,.52);margin-top:13px}.qibla-bearing{display:flex;align-items:end;gap:9px;margin-top:16px}.qibla-bearing strong{font-family:Palatino Linotype,Palatino,Georgia,serif;font-size:3.3rem;color:#f0cf76;line-height:1}.qibla-bearing span{color:#d9c9e5;padding-bottom:5px}.qibla-compass{position:relative;width:220px;height:220px;border-radius:50%;border:2px solid rgba(237,204,112,.45);box-shadow:0 0 65px rgba(179,82,219,.2),inset 0 0 35px rgba(255,255,255,.05);background:radial-gradient(circle,#421968 0 9%,#1d0e36 10% 62%,#10162e 63%);flex:0 0 auto}.qibla-compass:before,.qibla-compass:after{content:"";position:absolute;background:rgba(240,210,124,.17)}.qibla-compass:before{left:50%;top:12%;bottom:12%;width:1px}.qibla-compass:after{top:50%;left:12%;right:12%;height:1px}.qibla-compass>span{position:absolute;color:#d9c5e3;font-size:.7rem;font-weight:850}.qibla-compass .north{top:8px;left:50%;transform:translateX(-50%);color:#f0cf76}.qibla-compass .south{bottom:8px;left:50%;transform:translateX(-50%)}.qibla-compass .east{right:10px;top:50%;transform:translateY(-50%)}.qibla-compass .west{left:10px;top:50%;transform:translateY(-50%)}.qibla-arrow{position:absolute;inset:22px;transform:rotate(0deg);transition:transform .7s cubic-bezier(.2,.75,.2,1)}.qibla-arrow i{position:absolute;left:50%;top:3px;width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:95px solid #efcc70;transform:translateX(-50%);filter:drop-shadow(0 0 10px rgba(239,204,112,.38));clip-path:polygon(50% 0,100% 100%,50% 79%,0 100%)}.qibla-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#fff0bd;font-size:22px;z-index:4} .prayer-guidance-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.prayer-guidance-grid article{padding:24px;border-radius:23px;background:linear-gradient(145deg,#fffdf9,#faf4ff);border:1px solid rgba(102,51,135,.12)}.prayer-guidance-grid article>span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#542474;color:#fff;font-weight:850}.prayer-guidance-grid h3{color:#3b1a50;margin:.8rem 0 .5rem}.prayer-guidance-grid p{color:#706373;line-height:1.65;margin:0}.context-utility-card{display:grid;grid-template-columns:1fr auto;align-items:center;gap:24px;padding:28px;border-radius:26px;background:linear-gradient(135deg,#1e0d36,#341254);color:#fff;border:1px solid rgba(231,196,101,.27)}.context-utility-card h2{font-family:Palatino Linotype,Palatino,Georgia,serif;color:#fff1c8;margin:.3rem 0 .45rem}.context-utility-card p{color:rgba(255,255,255,.72);margin:0} .home-prayer-utility{padding:22px 0;background:linear-gradient(90deg,#281044,#16082b 60%,#10172e);border-top:1px solid rgba(239,203,108,.16);border-bottom:1px solid rgba(239,203,108,.13);color:#fff}.home-prayer-utility-inner{display:grid;grid-template-columns:54px 1fr auto;gap:18px;align-items:center}.home-prayer-compass{position:relative;width:52px;height:52px;border:1px solid rgba(235,202,112,.38);border-radius:50%;display:grid;place-items:center;color:#e9c96f}.home-prayer-compass span{position:absolute;top:4px;font-size:.55rem;font-weight:900}.home-prayer-compass i{font-style:normal;font-size:24px;transform:rotate(118deg)}.home-prayer-utility-inner>div:nth-child(2)>span{display:block;color:#e9ca70;text-transform:uppercase;letter-spacing:.12em;font-size:.65rem;font-weight:900}.home-prayer-utility-inner strong{display:block;font-family:Palatino Linotype,Palatino,Georgia,serif;color:#fff2d0;font-size:1.55rem;margin:.08rem 0}.home-prayer-utility-inner p{margin:0;color:rgba(255,255,255,.65);font-size:.82rem}.home-prayer-utility .btn{white-space:nowrap} @media(max-width:1050px){.prayer-time-grid{grid-template-columns:repeat(3,1fr)}.prayer-tool-grid{grid-template-columns:1fr}.qibla-panel{grid-template-columns:1fr auto}.prayer-guidance-grid{grid-template-columns:1fr 1fr}.home-prayer-utility-inner{grid-template-columns:52px 1fr}.home-prayer-utility .btn{grid-column:1/-1;justify-self:start}} @media(max-width:700px){.prayer-page-hero h1{font-size:3.4rem}.prayer-tool-panel,.prayer-method-note{padding:22px}.prayer-form-row{grid-template-columns:1fr}.prayer-form-actions .btn{width:100%;justify-content:center}.prayer-results-head{grid-template-columns:1fr}.next-prayer-card{width:100%}.prayer-time-grid{grid-template-columns:repeat(2,1fr)}.qibla-panel{grid-template-columns:1fr;text-align:left;padding:24px}.qibla-compass{width:190px;height:190px;margin:auto}.prayer-guidance-grid{grid-template-columns:1fr}.context-utility-card{grid-template-columns:1fr}.home-prayer-utility-inner{display:block}.home-prayer-compass{margin-bottom:12px}.home-prayer-utility .btn{margin-top:14px}} /* v26 imported-column resilience: prevent intrinsic media widths from forcing horizontal scroll */ .article .wp-block-column{min-width:0;max-width:100%} .article .wp-block-column figure,.article .wp-block-column img{max-width:100%}