/* ============================================================ DESIGN TOKENS ============================================================ */ :root{ --ease:cubic-bezier(0.22,1,0.36,1); --ease-soft:cubic-bezier(0.4,0,0.2,1); --gold:#e6c584; --gold-light:#f2ddab; --gold-deep:#9c7a3c; --ink:#ece6d7; --ink-soft:#aab0cc; --ink-faint:#767ea0; --glass:rgba(14,20,44,0.55); --glass-edge:rgba(230,197,132,0.16); --line:rgba(230,197,132,0.12); --radius:1.5rem; } *{ -webkit-tap-highlight-color:transparent; } /* NOTE: base colour lives on only. A background on would paint in normal-flow order — ABOVE the z-index:-n celestial layers — and hide them. */ html{ background:#04050e; } html.scroll-smooth{ scroll-behavior:smooth; } body{ font-family:'Outfit',system-ui,sans-serif; color:var(--ink); background:transparent; overflow-x:hidden; position:relative; min-height:100vh; -webkit-font-smoothing:antialiased; } ::selection{ background:rgba(230,197,132,.28); color:#fff; } ::-webkit-scrollbar{ width:10px; } ::-webkit-scrollbar-track{ background:#05060f; } ::-webkit-scrollbar-thumb{ background:linear-gradient(#1b2450,#0a1026); border-radius:8px; border:2px solid #05060f; } /* ============================================================ CELESTIAL BACKDROP (base gradient + nebula + canvases) ============================================================ */ #space{ position:fixed; inset:0; z-index:-6; overflow:hidden; background: radial-gradient(140% 100% at 50% -20%, #1a2656 0%, #0d1436 30%, #080b20 60%, #04050e 100%); } .nebula{ position:fixed; z-index:-5; pointer-events:none; filter:blur(74px); opacity:.5; mix-blend-mode:screen; } .nebula.a{ top:-12%; left:-8%; width:60vw; height:60vw; background:radial-gradient(circle at 40% 40%, rgba(48,104,196,.52), transparent 62%); animation:drift1 34s var(--ease-soft) infinite alternate; } .nebula.b{ top:18%; right:-14%; width:56vw; height:56vw; background:radial-gradient(circle at 60% 40%, rgba(52,142,168,.34), transparent 62%); animation:drift2 42s var(--ease-soft) infinite alternate; } .nebula.c{ bottom:-22%; left:24%; width:64vw; height:64vw; background:radial-gradient(circle at 50% 50%, rgba(120,158,210,.14), transparent 60%); animation:drift3 50s var(--ease-soft) infinite alternate; } @keyframes drift1{ to{ transform:translate(6%,8%) scale(1.12);} } @keyframes drift2{ to{ transform:translate(-7%,5%) scale(1.15);} } @keyframes drift3{ to{ transform:translate(4%,-6%) scale(1.1);} } /* ---- CSS starfield (guaranteed base layer: parallax + drift + twinkle) ---- */ #css-stars{ position:fixed; inset:0; z-index:-4; pointer-events:none; overflow:hidden; } .cs-layer{ position:absolute; inset:0; will-change:transform; transition:transform .5s var(--ease-soft); } .cs-move{ position:absolute; top:0; left:0; width:100%; height:2000px; animation:cs-drift linear infinite; } .cs-dot{ position:absolute; left:0; top:0; width:2px; height:2px; border-radius:50%; background:transparent; } .cs-dot.dup{ top:2000px; } .l1 .cs-dot{ width:1.8px; height:1.8px; } .l1 .cs-move{ animation-duration:210s; } .l2 .cs-dot{ width:2.6px; height:2.6px; } .l2 .cs-move{ animation-duration:160s; } .l3 .cs-dot{ width:4px; height:4px; } .l3 .cs-move{ animation-duration:120s; } .l1{ animation:tw1 7s ease-in-out infinite alternate; } .l2{ animation:tw2 5s ease-in-out infinite alternate; } .l3{ animation:tw3 3.6s ease-in-out infinite alternate; } @keyframes cs-drift{ from{ transform:translateY(0);} to{ transform:translateY(-2000px);} } @keyframes tw1{ from{opacity:.55;} to{opacity:.95;} } @keyframes tw2{ from{opacity:.7;} to{opacity:1;} } @keyframes tw3{ from{opacity:.65;} to{opacity:1;} } #sky-canvas{ position:fixed; inset:0; z-index:-3; pointer-events:none; } #fx-canvas{ position:fixed; inset:0; z-index:60; pointer-events:none; } /* faint vignette to seat content */ #vignette{ position:fixed; inset:0; z-index:-2; pointer-events:none; background:radial-gradient(125% 95% at 50% 42%, transparent 62%, rgba(3,4,12,.6) 100%); } @media (prefers-reduced-motion:reduce){ .nebula, .cs-move, .cs-layer{ animation:none !important; } } /* ============================================================ TYPOGRAPHY HELPERS ============================================================ */ .gold-text{ background:linear-gradient(180deg,#f6e6bd 0%,#e6c584 52%,#a9863f 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 1px 14px rgba(230,197,132,.28)); } .eyebrow{ font-size:.72rem; letter-spacing:var(--celestial,0.28em); text-transform:uppercase; color:var(--gold); display:inline-flex; align-items:center; gap:.7rem; } .eyebrow::before,.eyebrow::after{ content:''; width:26px; height:1px; background:linear-gradient(90deg,transparent,rgba(230,197,132,.6)); } .eyebrow.solo::before{ display:none; } .h-display{ font-family:'Cormorant Garamond',serif; font-weight:500; line-height:1.04; letter-spacing:-0.01em; } /* ============================================================ REUSABLE COMPONENTS ============================================================ */ .glass{ background:var(--glass); backdrop-filter:blur(18px) saturate(1.1); -webkit-backdrop-filter:blur(18px) saturate(1.1); border:1px solid var(--glass-edge); } .hairline{ box-shadow:inset 0 0 0 1px rgba(230,197,132,.10); } .btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.6rem; padding:.9rem 1.7rem; border-radius:999px; font-size:.92rem; font-weight:500; letter-spacing:.02em; transition:all .35s var(--ease); cursor:pointer; overflow:hidden; white-space:nowrap; } .btn-gold{ color:#160f02; background:linear-gradient(180deg,#f6e6bd,#e6c584 55%,#cba85d); box-shadow:0 10px 30px -10px rgba(230,197,132,.55), inset 0 1px 0 rgba(255,255,255,.5); } .btn-gold:hover{ transform:translateY(-2px); box-shadow:0 16px 44px -12px rgba(230,197,132,.7), inset 0 1px 0 rgba(255,255,255,.6); } .btn-gold::after{ content:''; position:absolute; inset:0; background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.55) 50%,transparent 80%); transform:translateX(-130%); transition:transform .8s var(--ease); } .btn-gold:hover::after{ transform:translateX(130%); } .btn-ghost{ color:var(--gold); background:rgba(230,197,132,.05); border:1px solid rgba(230,197,132,.28); backdrop-filter:blur(10px); } .btn-ghost:hover{ color:var(--gold-light); border-color:rgba(230,197,132,.6); background:rgba(230,197,132,.1); transform:translateY(-2px); } .btn:active{ transform:translateY(0) scale(.98); } .chip{ display:inline-flex; align-items:center; gap:.5rem; padding:.4rem 1rem; border-radius:999px; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); background:rgba(230,197,132,.05); border:1px solid rgba(230,197,132,.2); } .card{ position:relative; border-radius:var(--radius); padding:1.9rem; background:linear-gradient(180deg, rgba(18,24,52,.55), rgba(8,12,30,.5)); border:1px solid rgba(230,197,132,.12); backdrop-filter:blur(14px); transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease); overflow:hidden; } .card::before{ content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; background:linear-gradient(140deg, rgba(230,197,132,.35), transparent 40%, transparent 60%, rgba(120,140,230,.22)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .5s var(--ease); } .card:hover{ transform:translateY(-8px); border-color:rgba(230,197,132,.28); box-shadow:0 40px 80px -40px rgba(0,0,0,.9), 0 0 60px -30px rgba(230,197,132,.35); } .card:hover::before{ opacity:1; } .card-glow{ position:absolute; inset:auto; top:-40%; right:-30%; width:60%; height:80%; background:radial-gradient(circle, rgba(230,197,132,.14), transparent 70%); opacity:0; transition:opacity .6s var(--ease); pointer-events:none; } .card:hover .card-glow{ opacity:1; } .icon-orb{ width:3.2rem; height:3.2rem; border-radius:1rem; display:grid; place-items:center; font-size:1.4rem; color:var(--gold-light); background:radial-gradient(circle at 30% 25%, rgba(230,197,132,.22), rgba(20,26,54,.6)); box-shadow:inset 0 0 0 1px rgba(230,197,132,.25), 0 8px 20px -10px rgba(0,0,0,.7); } /* ============================================================ REVEAL ON SCROLL ============================================================ */ .reveal{ opacity:0; transform:translateY(30px); transition:opacity .9s var(--ease), transform .9s var(--ease); } .reveal.in{ opacity:1; transform:none; } [data-delay="1"]{ transition-delay:.08s; } [data-delay="2"]{ transition-delay:.16s; } [data-delay="3"]{ transition-delay:.24s; } [data-delay="4"]{ transition-delay:.32s; } [data-delay="5"]{ transition-delay:.40s; } /* ============================================================ MOTION ============================================================ */ .float{ animation:float 7s ease-in-out infinite; } @keyframes float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-16px);} } .breathe{ animation:breathe 6s ease-in-out infinite; } @keyframes breathe{ 0%,100%{ filter:drop-shadow(0 0 22px rgba(230,197,132,.35)); transform:scale(1);} 50%{ filter:drop-shadow(0 0 46px rgba(230,197,132,.6)); transform:scale(1.03);} } .spin-slow{ animation:spin 60s linear infinite; } @keyframes spin{ to{ transform:rotate(360deg);} } .tap-pop{ animation:pop .4s var(--ease); } @keyframes pop{ 0%{transform:scale(1);} 42%{transform:scale(1.16);} 100%{transform:scale(1);} } @media (prefers-reduced-motion:reduce){ .float,.breathe,.spin-slow{ animation:none !important; } } /* ============================================================ NAV ============================================================ */ #nav{ transition:background .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s var(--ease); border-bottom:1px solid transparent; } #nav.scrolled{ background:rgba(6,9,22,.7); backdrop-filter:blur(16px); border-color:rgba(230,197,132,.1); } .nav-link{ position:relative; color:var(--ink-soft); font-size:.9rem; letter-spacing:.02em; transition:color .3s var(--ease); } .nav-link::after{ content:''; position:absolute; left:0; bottom:-6px; height:1px; width:0; background:linear-gradient(90deg,var(--gold),transparent); transition:width .35s var(--ease); } .nav-link:hover{ color:var(--gold-light); } .nav-link:hover::after{ width:100%; } .brand-logo{ filter:drop-shadow(0 0 12px rgba(230,197,132,.45)); transition:transform .5s var(--ease); } .brand:hover .brand-logo{ transform:rotate(-6deg) scale(1.06); } /* mobile menu — absolute so it leaves the fixed header's flow, otherwise #nav.scrolled backdrop-filter blurs the whole (tall) header box. */ #mobile-menu{ position:absolute; top:100%; left:0; right:0; transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s; } #mobile-menu.hidden-menu{ opacity:0; transform:translateY(-12px); pointer-events:none; visibility:hidden; backdrop-filter:none; -webkit-backdrop-filter:none; } /* ============================================================ LOADER ============================================================ */ #loader{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; background:radial-gradient(120% 100% at 50% 30%, #0b1130, #04050e 75%); transition:opacity 1s var(--ease), visibility 1s; } body.loaded #loader{ opacity:0; visibility:hidden; } .loader-inner{ text-align:center; } .loader-ring{ width:120px; height:120px; margin:0 auto; position:relative; } .loader-ring img{ position:absolute; inset:0; margin:auto; width:82px; height:82px; object-fit:contain; animation:breathe 3.2s ease-in-out infinite; } .loader-ring::before{ content:''; position:absolute; inset:0; border-radius:50%; border:1px solid rgba(230,197,132,.2); border-top-color:rgba(230,197,132,.8); animation:spin 1.6s linear infinite; } .loader-text{ margin-top:1.6rem; font-family:'Cormorant Garamond',serif; font-size:1.3rem; color:var(--ink-soft); letter-spacing:.32em; text-transform:uppercase; animation:fadePulse 2.4s ease-in-out infinite; } @keyframes fadePulse{ 0%,100%{opacity:.4;} 50%{opacity:.9;} } /* interactive tasbih */ .dua-tab{ padding:.45rem 1.05rem; border-radius:999px; font-size:.78rem; letter-spacing:.05em; color:var(--ink-soft); background:rgba(255,255,255,.03); border:1px solid rgba(230,197,132,.14); transition:all .3s var(--ease); cursor:pointer; } .dua-tab:hover{ color:var(--gold-light); border-color:rgba(230,197,132,.3); } .dua-tab.active{ background:linear-gradient(180deg,#e6c584,#9c7a3c); color:#0b1226; border-color:transparent; font-weight:600; } .dua-card{ border-radius:1.1rem; padding:1.3rem; background:rgba(255,255,255,.025); border:1px solid rgba(230,197,132,.12); transition:all .35s var(--ease); } .dua-card:hover{ border-color:rgba(230,197,132,.34); background:rgba(230,197,132,.045); transform:translateY(-4px); } .drawer{ max-height:0; overflow:hidden; opacity:0; transition:max-height .6s var(--ease), opacity .5s ease; } .drawer.open{ max-height:2200px; opacity:1; } .mini-btn{ width:2.4rem; height:2.4rem; border-radius:999px; display:grid; place-items:center; background:rgba(255,255,255,.04); border:1px solid rgba(230,197,132,.2); color:var(--gold); font-size:1.15rem; transition:all .3s var(--ease); cursor:pointer; } .mini-btn:hover{ background:rgba(230,197,132,.14); color:var(--gold-light); } .mini-btn svg{ width:1rem; height:1rem; } .mini-btn.is-off{ color:var(--ink-faint); border-color:rgba(255,255,255,.12); } /* ---- Contact modal ---- */ .modal{ position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:1.25rem; transition:opacity .45s var(--ease), visibility .45s; } .modal.hidden-modal{ opacity:0; visibility:hidden; pointer-events:none; } .modal-backdrop{ position:absolute; inset:0; background:rgba(3,5,14,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } .modal-panel{ position:relative; width:100%; max-width:30rem; border-radius:1.5rem; padding:2.2rem; box-shadow:0 40px 110px -30px rgba(0,0,0,.85); transform:translateY(18px) scale(.97); transition:transform .5s var(--ease); } .modal:not(.hidden-modal) .modal-panel{ transform:none; } .modal-x{ position:absolute; top:1rem; right:1rem; font-size:1rem; } .field-label{ display:block; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:.45rem; } .field{ width:100%; padding:.8rem 1rem; border-radius:.85rem; background:rgba(255,255,255,.04); border:1px solid rgba(230,197,132,.18); color:var(--ink); font-family:inherit; font-size:.95rem; transition:all .3s var(--ease); } .field:focus{ outline:none; border-color:rgba(230,197,132,.5); background:rgba(230,197,132,.06); box-shadow:0 0 0 3px rgba(230,197,132,.1); } .field::placeholder{ color:var(--ink-faint); } /* ============================================================ COLLECTION PAGES (dhikr.html / duas.html) ============================================================ */ main{ position:relative; z-index:1; } .page-hero{ padding:8rem 1.25rem 2.5rem; text-align:center; } .page-wrap{ max-width:52rem; margin:0 auto; padding:0 1.25rem 6rem; } .cat-bar{ position:sticky; top:74px; z-index:30; display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; padding:1rem; margin-bottom:1.5rem; background:rgba(6,9,22,.55); backdrop-filter:blur(14px); border:1px solid var(--glass-edge); border-radius:1.2rem; } .section-head{ display:flex; align-items:center; gap:1rem; margin:2.75rem 0 1.4rem; } .section-head h2{ font-family:'Cormorant Garamond',serif; font-weight:500; font-size:1.9rem; color:var(--ink); white-space:nowrap; } .section-head .rule{ flex:1; height:1px; background:linear-gradient(90deg, rgba(230,197,132,.35), transparent); } .section-head .count{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); } .zikr{ position:relative; border-radius:1.35rem; padding:1.75rem 1.75rem 1.4rem; background:linear-gradient(180deg, rgba(18,24,52,.5), rgba(8,12,30,.46)); border:1px solid rgba(230,197,132,.12); margin-bottom:1.1rem; overflow:hidden; transition:border-color .4s var(--ease), transform .4s var(--ease); } .zikr:hover{ border-color:rgba(230,197,132,.28); transform:translateY(-2px); } .zikr .num{ position:absolute; top:1.1rem; left:1.4rem; font-family:'Cormorant Garamond',serif; font-size:1.05rem; color:var(--gold-deep); } .zikr .title{ padding-left:2.2rem; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:1rem; } .zikr .ar{ font-family:'Amiri',serif; font-size:1.9rem; line-height:2.1; color:var(--ink); text-align:right; direction:rtl; margin-bottom:1rem; } /* transliteration = warm sand · translation = cool moonlight — distinct colours, not just italics */ .zikr .tl{ font-style:italic; color:#e0cb9f; font-size:.95rem; line-height:1.6; margin-bottom:.55rem; } .zikr .en{ color:#9fb0d6; font-size:.92rem; line-height:1.65; } .zikr .meta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem; margin-top:1.1rem; padding-top:.9rem; border-top:1px solid rgba(230,197,132,.1); } .zikr .rep{ font-size:.72rem; letter-spacing:.05em; color:var(--gold); background:rgba(230,197,132,.08); border:1px solid rgba(230,197,132,.2); border-radius:999px; padding:.25rem .8rem; } .zikr .ref{ font-size:.7rem; letter-spacing:.05em; color:var(--ink-faint); } .to-top{ position:fixed; right:1.25rem; bottom:1.25rem; z-index:40; width:2.9rem; height:2.9rem; border-radius:999px; display:grid; place-items:center; color:var(--gold); background:rgba(6,9,22,.7); border:1px solid rgba(230,197,132,.25); backdrop-filter:blur(10px); opacity:0; pointer-events:none; transition:opacity .4s var(--ease), transform .4s var(--ease); } .to-top.show{ opacity:1; pointer-events:auto; } .to-top:hover{ transform:translateY(-3px); color:var(--gold-light); } @media (max-width:640px){ .zikr .ar{ font-size:1.6rem; line-height:1.95; } .cat-bar{ top:64px; } }