/* ============================================================= A Door to Islam — main.css All theme styles. Loaded via inc/enqueue.php (handle: adti-style). Dark theme is default ([data-theme="dark"] on ). Light theme overrides follow each block under [data-theme="light"]. ============================================================= */ /* ── GOOGLE FONTS ─────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;1,400&family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Lora:ital,wght@0,400;0,500;1,400&display=swap'); /* ── CSS CUSTOM PROPERTIES ────────────────────────────────────────────────── */ :root { /* Brand colours */ --gold:#D4AF37; --gold-l:#e8c84a; --gold-m:#b8942a; --gold-d:rgba(212,175,55,.14); --gold-dd:rgba(212,175,55,.07); --teal:#2C7D82; --teal-l:#3a9da3; --teal-dk:#1a5558; --teal-dp:#0e3638; --red:#C1272D; /* Typography */ --ff-d:'Playfair Display',Georgia,serif; --ff-b:'EB Garamond',Georgia,serif; --ff-u:'Lora',Georgia,serif; /* Motion */ --silk:cubic-bezier(.16,1,.3,1); --spring:cubic-bezier(.34,1.56,.64,1); --tf:.18s; --tm:.38s; --ts:.65s; } /* Dark theme (default) */ [data-theme="dark"] { --bg:#07090a; --bg2:#0b1214; --bg3:#0f1618; --bg4:#131e20; --bg5:#172426; --sur:rgba(255,255,255,.035); --sur2:rgba(255,255,255,.065); --sur3:rgba(255,255,255,.10); --bdr:rgba(212,175,55,.18); --bdr2:rgba(255,255,255,.07); --bdr3:rgba(255,255,255,.04); --tx:#F4F0E8; --tx2:rgba(244,240,232,.68); --tx3:rgba(244,240,232,.38); --tx4:rgba(244,240,232,.20); --glass:rgba(10,16,18,.80); --gbdr:rgba(212,175,55,.28); --cbg:#0e1a1c; --cbg2:rgba(18,28,30,.95); --nbg:rgba(7,9,10,.95); --shd:0 2px 24px rgba(0,0,0,.5); --sgold:0 8px 40px rgba(212,175,55,.12); } /* Light theme */ [data-theme="light"] { --bg:#FFFFFF; --bg2:#F7F6F2; --bg3:#EEECEA; --bg4:#E5E2DC; --bg5:#DBD8D0; --sur:rgba(44,125,130,.06); --sur2:rgba(44,125,130,.11); --sur3:rgba(44,125,130,.17); --bdr:rgba(138,104,0,.28); --bdr2:rgba(0,0,0,.09); --bdr3:rgba(0,0,0,.05); --tx:#1C2022; --tx2:#4A5254; --tx3:#6B7274; --tx4:#96A0A2; --glass:rgba(255,255,255,.93); --gbdr:rgba(138,104,0,.30); --cbg:#FFFFFF; --cbg2:rgba(255,255,255,.98); --nbg:rgba(255,255,255,.97); --shd:0 1px 8px rgba(0,0,0,.07),0 4px 20px rgba(0,0,0,.05); --sgold:0 6px 28px rgba(138,104,0,.16); --gold-lt:#8A6800; --teal-lt:#1D6B70; } /* ── RESET & BASE ─────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; overflow-x: hidden; } body { font-family: var(--ff-b); background: var(--bg); color: var(--tx); overflow-x: hidden; transition: background .4s var(--silk), color .4s var(--silk); line-height: 1.65; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; background: none; border: none; } ::-webkit-scrollbar { width: 3px; } ::-webkit-scrollbar-thumb { background: var(--gold-m); border-radius: 2px; } [data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(29,107,112,.35); } /* Film grain overlay — dark mode only */ [data-theme="dark"] body::after { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E"); pointer-events: none; z-index: 9998; opacity: .4; } /* ── ACCESSIBILITY ────────────────────────────────────────────────────────── */ .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; } [data-theme="light"] :focus-visible { outline-color: var(--teal-lt); } /* ── LAYOUT ───────────────────────────────────────────────────────────────── */ .wrap { max-width: 1440px; margin: 0 auto; padding: 0 64px; } section { padding: 96px 0; position: relative; } .sec { margin-bottom: 52px; text-align: center; } .sec-l { text-align: left; } .eye { font-family: var(--ff-u); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); font-weight: 500; display: block; margin-bottom: 10px; } [data-theme="light"] .eye { color: var(--teal-lt); } .hdl { font-family: var(--ff-d); font-weight: 700; line-height: 1.06; letter-spacing: -.02em; color: var(--tx); font-size: clamp(2rem,3.2vw,2.8rem); margin-bottom: 14px; } .bod { font-family: var(--ff-b); font-size: 1.05rem; line-height: 1.75; color: var(--tx2); } em.g { color: var(--gold); font-style: italic; } [data-theme="light"] em.g { color: var(--gold-lt); } .div { height: 1px; background: linear-gradient(90deg, transparent 0%, var(--bdr2) 20%, var(--bdr2) 80%, transparent); } /* ── SCROLL REVEAL ───────────────────────────────────────────────────────── */ .rv { opacity: 0; transform: translateY(26px); transition: opacity var(--ts) var(--silk), transform var(--ts) var(--silk); } .rv.in { opacity: 1; transform: translateY(0); } .rv.d1 { transition-delay: .08s; } .rv.d2 { transition-delay: .16s; } .rv.d3 { transition-delay: .24s; } .rv.d4 { transition-delay: .32s; } /* ── BUTTONS ─────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 26px; border-radius: 24px; font-family: var(--ff-u); font-size: .75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; border: none; transition: all var(--tm) var(--silk); cursor: pointer; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .btn-g { background: var(--gold); color: #0d1518; box-shadow: 0 4px 20px rgba(212,175,55,.3); } .btn-g:hover { background: var(--gold-l); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(212,175,55,.45); } [data-theme="light"] .btn-g { background: var(--gold-lt); } [data-theme="light"] .btn-g:hover { background: #7A5B00; } .btn-ol { background: transparent; color: var(--tx2); border: 1px solid var(--bdr2); } .btn-ol:hover { border-color: var(--gold); color: var(--gold); } [data-theme="light"] .btn-ol:hover { border-color: var(--teal-lt); color: var(--teal-lt); } /* ── PILL BUTTONS ────────────────────────────────────────────────────────── */ .pill { display: inline-flex; align-items: center; gap: 6px; padding: 9px 22px; border-radius: 22px; font-family: var(--ff-u); font-size: .72rem; font-weight: 500; letter-spacing: .05em; cursor: pointer; transition: all var(--tf); border: none; } .pill-g { background: var(--gold); color: #0d1518; } .pill-g:hover { background: var(--gold-l); transform: translateY(-1px); } [data-theme="light"] .pill-g { background: var(--gold-lt); } .pill-r { background: transparent; color: var(--tx2); border: 1.5px solid var(--bdr2); } .pill-r:hover { border-color: var(--gold); color: var(--gold); } [data-theme="light"] .pill-r:hover { border-color: var(--teal-lt); color: var(--teal-lt); } .pill-ol { background: transparent; color: var(--gold); border: 1.5px solid var(--gold); } .pill-ol:hover { background: var(--gold); color: #0d1518; } [data-theme="light"] .pill-ol { color: var(--teal-lt); border-color: var(--teal-lt); } [data-theme="light"] .pill-ol:hover { background: var(--teal-lt); color: #fff; } /* Badge chips */ .gbdg { padding: 3px 10px; border-radius: 20px; font-family: var(--ff-u); font-size: .62rem; letter-spacing: .06em; font-weight: 500; } .bdg-g { background: var(--gold); color: #0d1518; } [data-theme="light"] .bdg-g { background: var(--gold-lt); color: #fff; } .bdg-c { background: rgba(0,0,0,.55); color: #fff; border: 1px solid rgba(255,255,255,.22); font-weight: 600; } [data-theme="light"] .bdg-c { background: rgba(0,0,0,.55); color: #fff; border-color: rgba(255,255,255,.22); } /* ── NAVIGATION ──────────────────────────────────────────────────────────── */ #nav { position: relative; background: var(--nbg); backdrop-filter: blur(24px) saturate(160%); border-bottom: 1px solid var(--bdr3); transition: all var(--tm) var(--silk); } .nav-in { max-width: 1440px; margin: 0 auto; padding: 0 48px; height: 66px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .nav-logo { display: flex; align-items: center; gap: 10px; } .nav-mark { width: 30px; height: 30px; border: 1px solid var(--gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--gold); } .nav-name { font-family: var(--ff-d); font-size: 1rem; font-weight: 600; color: var(--tx); } .nav-name span { color: var(--gold); } [data-theme="light"] .nav-name span { color: var(--teal-lt); } .nav-links { display: flex; align-items: center; gap: 28px; list-style: none; } .nav-links a { font-family: var(--ff-u); font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; color: var(--tx3); transition: color var(--tf); } .nav-links a:hover { color: var(--gold); } [data-theme="light"] .nav-links a:hover { color: var(--teal-lt); } .nav-r { display: flex; align-items: center; gap: 12px; } /* Theme toggle */ .tw { display: flex; align-items: center; gap: 7px; } .tl { font-family: var(--ff-u); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tx4); min-width: 26px; } .tt { width: 40px; height: 21px; background: var(--sur2); border: 1px solid var(--bdr); border-radius: 11px; cursor: pointer; position: relative; transition: all var(--tm); flex-shrink: 0; } .tt::after { content: ''; position: absolute; top: 3px; left: 3px; width: 13px; height: 13px; background: var(--gold); border-radius: 50%; transition: transform var(--tm) var(--spring); } [data-theme="light"] .tt::after { transform: translateX(19px); } /* ── HERO ────────────────────────────────────────────────────────────────── */ #hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; background: var(--bg); padding: 0; } .h-amb { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 90% 70% at 50% 30%, rgba(44,125,130,.15) 0%, transparent 65%), radial-gradient(ellipse 50% 50% at 50% 20%, rgba(212,175,55,.06) 0%, transparent 55%), radial-gradient(ellipse 120% 40% at 50% 100%, rgba(44,125,130,.08) 0%, transparent 60%); } .h-pat { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .h-pat svg { width: 100%; height: 100%; opacity: .055; } [data-theme="light"] .h-pat polygon, [data-theme="light"] .h-pat circle { stroke: #2C7D82 !important; } .arch-c { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(500px,78vw); height: 100%; pointer-events: none; display: flex; flex-direction: column; align-items: center; } .arch-w { width: 100%; flex-shrink: 0; animation: archUp 1.2s var(--silk) .2s both; } @keyframes archUp { from { opacity:0; transform:scaleY(.92) translateY(30px) } to { opacity:1; transform:scaleY(1) translateY(0) } } .h-body { position: relative; z-index: 2; text-align: center; padding: 0 24px; max-width: 740px; margin-top: 5vh; } .h-eye { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 26px; opacity: 0; animation: fUp .8s var(--silk) .5s forwards; } .e-line { width: 34px; height: 1px; background: var(--gold); opacity: .5; } .h-title { font-family: var(--ff-d); font-size: clamp(2.8rem,6vw,5.8rem); font-weight: 700; line-height: 1.03; letter-spacing: -.025em; background: linear-gradient(160deg, var(--tx) 0%, rgba(244,240,232,.9) 40%, var(--gold) 70%, var(--tx) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 18px; opacity: 0; animation: fUp .9s var(--silk) .65s forwards; } [data-theme="light"] .h-title { background: linear-gradient(160deg, var(--tx) 0%, var(--tx2) 40%, var(--gold-lt) 70%, var(--tx) 100%); -webkit-background-clip: text; background-clip: text; } .h-sub { font-family: 'EB Garamond', serif; font-size: clamp(1.2rem,2.3vw,1.85rem); font-weight: 400; font-style: italic; color: var(--tx2); margin-bottom: 38px; opacity: 0; animation: fUp .9s var(--silk) .8s forwards; } .h-sub em { color: var(--gold); font-style: italic; } [data-theme="light"] .h-sub em { color: var(--gold-lt); } .h-ctas { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; opacity: 0; animation: fUp .9s var(--silk) .95s forwards; } .h-cred { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 26px; white-space: nowrap; opacity: 0; animation: fUp .8s var(--silk) 1.3s forwards; } .cr-i { display: flex; align-items: center; gap: 8px; font-family: var(--ff-u); font-size: .63rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tx4); } .cr-d { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); opacity: .5; } .scr { position: absolute; right: 46px; bottom: 38px; display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: 0; animation: fIn 1s var(--silk) 1.8s forwards; } .scr span { font-family: var(--ff-u); font-size: .56rem; letter-spacing: .2em; text-transform: uppercase; color: var(--tx4); writing-mode: vertical-rl; } .scr-t { width: 1px; height: 50px; background: linear-gradient(to bottom, var(--gold), transparent); animation: sBeat 2.2s ease-in-out infinite; } @keyframes sBeat { 0%,100%{opacity:.25} 50%{opacity:.9} } @keyframes fUp { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} } @keyframes fIn { from{opacity:0} to{opacity:1} } /* ── 404 PAGE ────────────────────────────────────────────────────────────── */ .adti-404 { min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; background: var(--bg); padding: 96px 24px; } .adti-404-body { position: relative; z-index: 2; text-align: center; max-width: 740px; width: 100%; } .adti-404-eye { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 32px; opacity: 0; animation: fUp .8s var(--silk) .2s forwards; } .adti-404-eye-text { font-family: var(--ff-u); font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); } [data-theme="light"] .adti-404-eye-text { color: var(--gold-lt); } .adti-404-arabic { font-family: 'EB Garamond', serif; font-size: clamp(2.4rem, 5vw, 3.6rem); color: var(--gold); margin-bottom: 28px; line-height: 1.4; letter-spacing: .02em; opacity: 0; animation: fUp .9s var(--silk) .35s forwards; } [data-theme="light"] .adti-404-arabic { color: var(--gold-lt); } .adti-404-title { font-family: var(--ff-d); font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 700; line-height: 1.2; letter-spacing: -.015em; background: linear-gradient(160deg, var(--tx) 0%, rgba(244,240,232,.9) 40%, var(--gold) 70%, var(--tx) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 14px; opacity: 0; animation: fUp .9s var(--silk) .5s forwards; } [data-theme="light"] .adti-404-title { background: linear-gradient(160deg, var(--tx) 0%, var(--tx2) 40%, var(--gold-lt) 70%, var(--tx) 100%); -webkit-background-clip: text; background-clip: text; } .adti-404-citation { font-family: var(--ff-u); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--tx3); margin-bottom: 32px; opacity: 0; animation: fUp .9s var(--silk) .6s forwards; } .adti-404-sub { font-family: 'EB Garamond', serif; font-size: clamp(1.05rem, 1.8vw, 1.25rem); font-style: italic; color: var(--tx2); line-height: 1.6; margin-bottom: 40px; opacity: 0; animation: fUp .9s var(--silk) .75s forwards; } .adti-404-cta { display: flex; justify-content: center; opacity: 0; animation: fUp .9s var(--silk) .9s forwards; } /* ── METRICS ─────────────────────────────────────────────────────────────── */ #metrics { padding: 0; background: var(--bg2); border-top: 1px solid var(--bdr); border-bottom: 1px solid var(--bdr); } [data-theme="light"] #metrics { background: var(--bg2); } .m-row { max-width: 1440px; margin: 0 auto; padding: 0 64px; display: grid; grid-template-columns: repeat(4,1fr); } .m-cell { padding: 34px 20px; text-align: center; border-right: 1px solid var(--bdr3); } .m-cell:last-child { border-right: none; } .m-num { font-family: var(--ff-d); font-size: 2.5rem; font-weight: 700; color: var(--gold); line-height: 1; display: block; } [data-theme="light"] .m-num { color: var(--gold-lt); } .m-lbl { font-family: var(--ff-u); font-size: .66rem; letter-spacing: .15em; text-transform: uppercase; color: var(--tx3); margin-top: 7px; display: block; } /* ── TESTIMONIALS ────────────────────────────────────────────────────────── */ .tg { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 44px; } .tc { background: var(--cbg); border: 1px solid var(--bdr2); border-radius: 12px; padding: 28px; transition: all var(--tm) var(--silk); position: relative; } .tc:hover { border-color: var(--bdr); transform: translateY(-4px); box-shadow: var(--sgold); } .tc::after { content: '\201C'; position: absolute; top: 16px; right: 20px; font-family: var(--ff-d); font-size: 4.5rem; line-height: 1; color: var(--gold); opacity: .09; pointer-events: none; } .stars { display: flex; gap: 3px; margin-bottom: 12px; } .star { color: var(--gold); font-size: .72rem; } .tt-t { font-size: .93rem; line-height: 1.8; color: var(--tx2); margin-bottom: 20px; } .ta { display: flex; align-items: center; gap: 11px; } .av { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg,var(--teal),var(--gold)); display: flex; align-items: center; justify-content: center; font-family: var(--ff-d); font-size: .88rem; font-weight: 600; color: #0d1518; } .an { font-size: .83rem; font-weight: 600; color: var(--tx); } .al { font-size: .68rem; color: var(--tx3); } /* ── KNOWLEDGE NAVIGATOR ─────────────────────────────────────────────────── */ .kg { display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; margin-top: 44px; } .kc { background: var(--bg3); border: 1px solid var(--bdr2); padding: 36px 28px; cursor: pointer; position: relative; overflow: hidden; transition: all var(--tm) var(--silk); color: var(--tx); display: block; } .kc::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg,var(--teal),var(--gold)); transform: scaleX(0); transform-origin: left; transition: transform var(--tm) var(--silk); } .kc:hover::after { transform: scaleX(1); } .kc:hover { background: var(--bg4); border-color: var(--bdr); transform: translateY(-5px); box-shadow: var(--sgold); } .ki { font-size: 1.9rem; margin-bottom: 20px; display: block; } .kl { font-family: var(--ff-u); font-size: .63rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 7px; } [data-theme="light"] .kl { color: var(--teal-lt); } .kt { font-family: var(--ff-d); font-size: 1.2rem; font-weight: 600; margin-bottom: 11px; color: var(--tx); } .kd { font-size: .86rem; line-height: 1.72; color: var(--tx2); margin-bottom: 20px; } .kct { font-family: var(--ff-u); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); } [data-theme="light"] .kct { color: var(--teal-lt); } /* ── GUIDES LIBRARY ──────────────────────────────────────────────────────── */ .gflt { display: flex; gap: 8px; margin-top: 40px; flex-wrap: wrap; justify-content: center; } .gfb { padding: 7px 18px; background: var(--sur); border: 1px solid var(--bdr2); border-radius: 20px; font-family: var(--ff-u); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tx2); cursor: pointer; transition: all var(--tf); } .gfb:hover, .gfb.on { background: var(--gold); color: #0d1518; border-color: var(--gold); } [data-theme="light"] .gfb:hover, [data-theme="light"] .gfb.on { background: var(--gold-lt); color: #fff; border-color: var(--gold-lt); } .gg { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 28px; } .gc { background: var(--cbg); border: 1px solid var(--bdr2); border-radius: 12px; overflow: hidden; transition: all var(--tm) var(--silk); cursor: pointer; } .gc:hover { transform: translateY(-5px); box-shadow: var(--sgold); border-color: rgba(212,175,55,.25); } .gc-link { display: block; color: var(--tx); text-decoration: none; } .gi { height: 200px; position: relative; overflow: hidden; } .gi-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 3.5rem; } .g-bgs { position: absolute; bottom: 12px; left: 12px; display: flex; gap: 6px; z-index: 2; flex-wrap: wrap; } .gbdg { padding: 3px 10px; border-radius: 20px; font-family: var(--ff-u); font-size: .62rem; letter-spacing: .06em; font-weight: 500; } .bdg-g { background: var(--gold); color: #0d1518; } .bdg-c { background: rgba(0,0,0,.55); color: #fff; backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.22); font-weight: 600; } [data-theme="light"] .bdg-g { background: var(--gold-lt); color: #fff; } [data-theme="light"] .bdg-c { background: rgba(0,0,0,.55); color: #fff; border-color: rgba(255,255,255,.22); backdrop-filter: blur(8px); } .gb { padding: 20px 20px 22px; } .gtl { font-family: var(--ff-d); font-size: 1.08rem; font-weight: 600; color: var(--tx); margin-bottom: 8px; line-height: 1.3; } .gds { font-size: .82rem; color: var(--tx2); line-height: 1.65; margin-bottom: 14px; } .gmt { display: flex; align-items: center; justify-content: space-between; } .gml { display: flex; gap: 12px; align-items: center; } .gmi { font-family: var(--ff-u); font-size: .68rem; color: var(--tx3); } .grd { font-family: var(--ff-u); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); } [data-theme="light"] .grd { color: var(--teal-lt); } .gg-empty { padding: 48px; text-align: center; color: var(--tx3); font-family: var(--ff-u); font-size: .85rem; } /* ── TAWHEED ─────────────────────────────────────────────────────────────── */ .twg { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 52px; } .twc { background: var(--sur); border: 1px solid var(--bdr2); border-radius: 3px; padding: 42px 32px; transition: all var(--ts) var(--silk); position: relative; overflow: hidden; } .twc::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg,transparent,var(--gold),transparent); transform: scaleX(0); transition: transform var(--tm) var(--silk); } .twc:hover::before { transform: scaleX(1); } .twc:hover { background: var(--sur2); transform: translateY(-6px); box-shadow: var(--sgold); } .twi { width: 54px; height: 54px; border-radius: 50%; background: var(--gold-d); border: 1px solid var(--bdr); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; margin-bottom: 24px; transition: all var(--tm); } .twc:hover .twi { background: rgba(212,175,55,.22); box-shadow: 0 0 18px rgba(212,175,55,.18); } .tw-ar { font-family: 'EB Garamond',serif; font-size: 1.25rem; color: var(--gold); margin-bottom: 7px; direction: rtl; } [data-theme="light"] .tw-ar { color: var(--teal-lt); } .tw-t { font-family: var(--ff-d); font-size: 1.08rem; font-weight: 600; color: var(--tx); margin-bottom: 13px; } .tw-d { font-size: .88rem; line-height: 1.78; color: var(--tx2); } /* ── THREE LEVELS ───────────────────────────────────────────────────────── */ .lv-grid { display: grid; grid-template-columns: 220px 1fr; gap: 0; margin-top: 40px; align-items: start; } .lv-panels { min-width: 0; } .lb-row { display: flex; flex-direction: column; gap: 3px; } .lb { display: flex; align-items: center; gap: 16px; padding: 18px 20px; width: 100%; background: var(--sur); border: 1px solid var(--bdr2); border-left: 3px solid transparent; cursor: pointer; text-align: left; color: var(--tx); transition: all var(--tm) var(--silk); } .lb.on { background: var(--sur2); border-left-color: var(--gold); } [data-theme="light"] .lb.on { border-left-color: var(--teal-lt); } .lb:hover { background: var(--sur2); } .lp { display: none; padding: 28px; background: var(--sur); border: 1px solid var(--bdr2); border-radius: 0 8px 8px 0; } .lp.on { display: block; animation: fIn .4s var(--silk); } .lt { font-family: var(--ff-d); font-size: 1.4rem; font-weight: 600; color: var(--tx); margin-bottom: 13px; } .ld { font-size: .93rem; line-height: 1.8; color: var(--tx2); margin-bottom: 28px; } .pilrow { display: grid; grid-template-columns: repeat(5,1fr); gap: 9px; } .pil { background: var(--sur); border: 1px solid var(--bdr2); padding: 16px 8px; text-align: center; border-radius: 2px; cursor: pointer; transition: all var(--tf); } .pil:hover { border-color: var(--gold); background: var(--gold-dd); } .piln { font-family: var(--ff-d); font-size: 1.6rem; color: var(--gold); opacity: .45; line-height: 1; } .pil:hover .piln { opacity: 1; } [data-theme="light"] .piln { color: var(--gold-lt); } .pilnm { font-family: var(--ff-u); font-size: .65rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tx2); margin-top: 5px; } .bg { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; } .bc { background: var(--sur); border: 1px solid var(--bdr2); padding: 17px; border-radius: 2px; cursor: pointer; transition: all var(--tf); } .bc:hover { border-color: var(--gold); transform: translateY(-2px); } .bi { font-size: 1.25rem; margin-bottom: 8px; } .bn { font-family: var(--ff-u); font-size: .76rem; font-weight: 500; color: var(--tx); margin-bottom: 4px; } .bd { font-size: .71rem; color: var(--tx3); line-height: 1.5; } .ihsan-quote { text-align: center; padding: 32px; background: var(--sur); border: 1px solid var(--bdr); border-radius: 3px; } .ihsan-icon { font-size: 2.6rem; margin-bottom: 12px; } .ihsan-text { font-family: var(--ff-d); font-size: 1.05rem; color: var(--gold); font-style: italic; line-height: 1.7; } [data-theme="light"] .ihsan-text { color: var(--gold-lt); } .ihsan-text footer { font-size: .8rem; color: var(--tx3); margin-top: 10px; font-style: normal; } /* ── SHAHADA ─────────────────────────────────────────────────────────────── */ .sh-g { display: grid; grid-template-columns: 1fr 1fr; gap: 68px; align-items: center; margin-top: 52px; } .sh-c { border: 1px solid var(--gold); border-radius: 4px; padding: 48px 40px; text-align: center; background: var(--glass); backdrop-filter: blur(20px); position: relative; overflow: hidden; } .sh-gl { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 260px; height: 260px; background: radial-gradient(circle,rgba(212,175,55,.07) 0%,transparent 70%); pointer-events: none; } .sh-ar { font-family: 'EB Garamond',serif; font-size: 1.9rem; color: var(--gold); line-height: 1.6; direction: rtl; } [data-theme="light"] .sh-ar { color: var(--gold-lt); } .sh-ph { font-size: .88rem; color: var(--tx2); font-style: italic; line-height: 1.65; } .sh-en { font-family: var(--ff-d); font-size: .92rem; color: var(--tx); line-height: 1.65; font-style: italic; } .sh-mode { margin-bottom: 20px; } .togs { display: flex; justify-content: center; gap: 7px; flex-wrap: wrap; margin-top: 20px; } .tog { padding: 5px 13px; background: var(--sur); border: 1px solid var(--bdr2); border-radius: 20px; font-family: var(--ff-u); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; color: var(--tx2); transition: all var(--tf); } .tog.on, .tog:hover { background: var(--gold); color: #0d1518; border-color: var(--gold); } [data-theme="light"] .tog.on, [data-theme="light"] .tog:hover { background: var(--teal-lt); color: #fff; border-color: var(--teal-lt); } .tog--disabled { opacity: .4; cursor: not-allowed; } .tog--disabled:hover { background: var(--sur); color: var(--tx2); border-color: var(--bdr2); } .sl { display: flex; flex-direction: column; } .stp { display: flex; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--bdr3); cursor: pointer; transition: all var(--tf); } .stp:last-child { border-bottom: none; } .stp:hover { padding-left: 6px; } .sb { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--gold-d); border: 1px solid var(--bdr); display: flex; align-items: center; justify-content: center; font-family: var(--ff-u); font-size: .76rem; color: var(--gold); transition: all var(--tf); } .stp:hover .sb { background: var(--gold); color: #0d1518; } [data-theme="light"] .sb { color: var(--teal-lt); } .st { font-family: var(--ff-d); font-size: .95rem; font-weight: 600; color: var(--tx); margin-bottom: 4px; } .sd { font-size: .82rem; color: var(--tx2); line-height: 1.65; } /* ── RITUALS ─────────────────────────────────────────────────────────────── */ .rt { display: flex; margin-top: 44px; } .rtb { flex: 1; padding: 14px; background: var(--sur); border: 1px solid var(--bdr2); border-right: none; font-family: var(--ff-u); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tx2); cursor: pointer; transition: all var(--tf); text-align: center; } .rtb:last-child { border-right: 1px solid var(--bdr2); } .rtb.on { background: var(--gold); color: #0d1518; font-weight: 600; border-color: var(--gold); } [data-theme="light"] .rtb.on { background: var(--teal-lt); color: #fff; border-color: var(--teal-lt); } .rb { background: var(--sur); border: 1px solid var(--bdr2); border-top: none; padding: 40px; } .rb-title { font-family: var(--ff-d); font-size: 1.1rem; font-weight: 600; color: var(--tx); margin-bottom: 5px; } .rb-sub { font-size: .83rem; color: var(--tx2); margin-bottom: 24px; } .rs { display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; margin-top: 26px; } .rsi { text-align: center; position: relative; } .rsi::after { content: '→'; position: absolute; right: -8px; top: 14px; color: var(--gold); opacity: .22; font-size: .72rem; } .rsi:last-child::after { display: none; } .rsic { width: 46px; height: 46px; border-radius: 50%; background: var(--gold-d); border: 1px solid var(--bdr); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; margin: 0 auto 9px; transition: all var(--tf); cursor: pointer; } .rsi:hover .rsic { background: var(--gold); transform: scale(1.1); } .rsil { font-family: var(--ff-u); font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tx2); line-height: 1.4; } /* ── RITUAL PURIFICATION (Wudhu / Tayammum / Ghusl) ───────────────────────── */ #purification { padding: 96px 0; background: var(--bg2); position: relative; overflow: hidden; } [data-theme="light"] #purification { background: var(--bg2); } .rp-modes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 32px auto 28px; max-width: 480px; } .rp-mode { font-family: var(--ff-u); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; padding: 10px 22px; border-radius: 22px; background: transparent; color: var(--tx2); border: 1px solid var(--bdr2); cursor: pointer; transition: all var(--tm) var(--silk); } .rp-mode:hover { color: var(--gold); border-color: var(--gold); } [data-theme="light"] .rp-mode:hover { color: var(--teal); border-color: var(--teal); } .rp-mode.on { background: var(--gold); color: #0d1518; border-color: var(--gold); box-shadow: 0 4px 18px rgba(212,175,55,.28); } [data-theme="light"] .rp-mode.on { background: var(--teal); color: #fff; border-color: var(--teal); box-shadow: 0 4px 18px rgba(44,125,130,.22); } .rp-topbar { display: flex; align-items: center; justify-content: center; margin-bottom: 24px; } .rp-meta { font-family: var(--ff-u); font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--tx3); } .rp-stage { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; align-items: stretch; min-height: 620px; } /* Left: 3D orbit universe */ .rp-universe { position: relative; min-height: 620px; border-radius: 14px; overflow: hidden; background: radial-gradient(ellipse at center, var(--bg3) 0%, var(--bg) 70%); border: 1px solid var(--bdr2); cursor: grab; perspective: 1400px; } .rp-universe:active { cursor: grabbing; } .rp-aurora { position: absolute; left: 50%; top: 50%; width: 620px; height: 620px; margin-left: -310px; margin-top: -310px; border-radius: 50%; background: radial-gradient(circle, rgba(212,175,55,.10) 0%, rgba(212,175,55,.04) 36%, transparent 70%); pointer-events: none; } [data-theme="light"] .rp-aurora { background: radial-gradient(circle, rgba(44,125,130,.10) 0%, rgba(44,125,130,.04) 36%, transparent 70%); } .rp-ring { position: absolute; left: 50%; top: 50%; width: 660px; height: 660px; margin-left: -330px; margin-top: -330px; border-radius: 50%; border: 1px dashed var(--bdr); transform: rotateX(70deg); pointer-events: none; opacity: .35; } .rp-orbit { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: translate(-50%, -50%) rotateX(70deg) rotateZ(0deg); transform-style: preserve-3d; transition: transform 540ms var(--silk); } .rp-core { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin-left: -9px; margin-top: -9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 32px rgba(212,175,55,.55), 0 0 6px rgba(212,175,55,.9); pointer-events: none; } [data-theme="light"] .rp-core { background: var(--teal); box-shadow: 0 0 32px rgba(44,125,130,.45), 0 0 6px rgba(44,125,130,.8); } .rp-hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); font-family: var(--ff-u); font-size: .58rem; letter-spacing: .15em; text-transform: uppercase; color: var(--tx3); white-space: nowrap; pointer-events: none; } /* Beads in 3D ring */ .rp-body { position: absolute; left: 0; top: 0; transform-style: preserve-3d; cursor: pointer; } .rp-body-card { transition: opacity .42s var(--silk), filter .42s var(--silk), transform .42s var(--silk); } .rp-bead { width: 88px; height: 88px; border-radius: 50%; background: var(--cbg); border: 1px solid var(--bdr); display: flex; flex-direction: column; align-items: center; justify-content: center; transform: translate(-50%, -50%); transition: all .35s var(--silk); } .rp-bead-num { font-family: var(--ff-u); font-size: .58rem; letter-spacing: .14em; color: var(--tx3); margin-bottom: 2px; } .rp-bead-text { font-family: var(--ff-d); font-size: .8rem; color: var(--tx); font-weight: 600; } .rp-body.focus .rp-bead { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 36px rgba(212,175,55,.35); transform: translate(-50%, -50%) scale(1.12); } .rp-body.focus .rp-bead-num { color: rgba(13,21,24,.7); } .rp-body.focus .rp-bead-text { color: #0d1518; } [data-theme="light"] .rp-body.focus .rp-bead { background: var(--teal); border-color: var(--teal); box-shadow: 0 0 36px rgba(44,125,130,.30); } [data-theme="light"] .rp-body.focus .rp-bead-num { color: rgba(255,255,255,.7); } [data-theme="light"] .rp-body.focus .rp-bead-text { color: #fff; } .rp-body.focus-ring .rp-bead { border-color: var(--gold); } .rp-body.done .rp-bead { background: var(--sur2); border-color: var(--bdr); } .rp-body.done .rp-bead-text { color: var(--tx2); } .rp-body.suggested:not(.focus) .rp-bead { border-color: var(--gold); animation: rp-pulse 2.4s ease-in-out infinite; } @keyframes rp-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(212,175,55,.38); } 50% { box-shadow: 0 0 0 8px rgba(212,175,55,0); } } /* Right: side panel */ .rp-panel { display: flex; flex-direction: column; gap: 18px; } .rp-card { background: var(--cbg); border: 1px solid var(--bdr2); border-radius: 12px; padding: 28px 30px; transition: opacity .18s ease, transform .18s ease; } [data-theme="light"] .rp-card { background: var(--cbg); border-color: var(--bdr); box-shadow: 0 4px 18px rgba(0,0,0,.04); } .rp-card.rp-swap-out-left { opacity: 0; transform: translateX(-12px); } .rp-card.rp-swap-out-right { opacity: 0; transform: translateX( 12px); } .rp-num-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .rp-step-num { font-family: var(--ff-u); font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--tx3); } .rp-step-status { font-family: var(--ff-u); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; padding: 4px 12px; border-radius: 12px; background: var(--sur); color: var(--tx2); border: 1px solid var(--bdr2); } .rp-step-status.now { background: var(--gold); color: #0d1518; border-color: var(--gold); } [data-theme="light"] .rp-step-status.now { background: var(--teal); color: #fff; border-color: var(--teal); } .rp-step-status.done { background: var(--sur2); color: var(--gold); border-color: var(--gold); } [data-theme="light"] .rp-step-status.done { color: var(--teal); border-color: var(--teal); } .rp-step-title { font-family: var(--ff-d); font-size: 1.5rem; font-weight: 700; line-height: 1.18; color: var(--tx); margin-bottom: 10px; letter-spacing: -.012em; } .rp-micro-sub { font-family: var(--ff-b); font-style: italic; font-size: 1rem; color: var(--gold); min-height: 1.6em; margin-bottom: 12px; transition: opacity .25s ease; } [data-theme="light"] .rp-micro-sub { color: var(--teal); } .rp-micro-sub.rp-fading { opacity: 0; } .rp-step-instr { font-family: var(--ff-b); font-size: 1rem; line-height: 1.7; color: var(--tx2); margin-bottom: 22px; } .rp-micro-block { padding-top: 18px; border-top: 1px solid var(--bdr3); } .rp-micro-label { font-family: var(--ff-u); font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; color: var(--tx3); margin-bottom: 12px; } .rp-micro-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .rp-micro-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--sur); border: 1px solid var(--bdr3); border-radius: 8px; cursor: pointer; transition: all .22s ease; } .rp-micro-item:hover { background: var(--sur2); border-color: var(--bdr2); } .rp-micro-item.active { background: var(--gold-d); border-color: var(--gold); } [data-theme="light"] .rp-micro-item.active { background: var(--sur2); border-color: var(--teal); } .rp-micro-item.done { opacity: .55; } .rp-micro-marker { width: 10px; height: 10px; border-radius: 50%; background: var(--sur3); border: 1px solid var(--bdr2); flex-shrink: 0; } .rp-micro-item.active .rp-micro-marker { background: var(--gold); border-color: var(--gold); } [data-theme="light"] .rp-micro-item.active .rp-micro-marker { background: var(--teal); border-color: var(--teal); } .rp-micro-item.done .rp-micro-marker { background: var(--gold); border-color: var(--gold); } .rp-micro-item-text { flex: 1; font-family: var(--ff-b); font-size: .9rem; color: var(--tx); } .rp-micro-item-num { font-family: var(--ff-u); font-size: .56rem; letter-spacing: .12em; color: var(--tx3); } .rp-actions { display: flex; gap: 12px; justify-content: flex-end; } .rp-btn-back, .rp-btn-next { font-size: .68rem; padding: 11px 24px; } .rp-btn-next.rp-secondary { background: transparent; color: var(--gold); border: 1px solid var(--gold); } [data-theme="light"] .rp-btn-next.rp-secondary { color: var(--teal); border-color: var(--teal); } /* Mobile collapse */ @media (max-width: 1100px) { .rp-stage { grid-template-columns: minmax(0, 1fr); min-height: auto; } .rp-universe { min-height: 520px; } } @media (max-width: 768px) { #purification { padding: 64px 0; } .rp-modes { gap: 6px; } .rp-mode { padding: 8px 16px; font-size: .62rem; letter-spacing: .1em; } .rp-universe { min-height: 440px; } .rp-aurora { width: 420px; height: 420px; margin-left: -210px; margin-top: -210px; } .rp-ring { width: 460px; height: 460px; margin-left: -230px; margin-top: -230px; } .rp-bead { width: 70px; height: 70px; } .rp-bead-text { font-size: .72rem; } .rp-card { padding: 20px 22px; } .rp-step-title { font-size: 1.2rem; } .rp-step-instr { font-size: .92rem; } .rp-actions { justify-content: stretch; } .rp-btn-back, .rp-btn-next { flex: 1; padding: 11px 12px; } .rp-hint { font-size: .54rem; letter-spacing: .12em; } } /* ═══════════════════════════════════════════════════════════════════════════ RITUAL PURIFICATION — LAYOUT 3 (RSOS Atmospheric, Canvas-Driven) The atmospheric background is rendered into a element by the prototype's ported wave/dune simulation (see main.js Module 17). CSS here only handles canvas sizing, the bead orbit row, the glassmorphic side panel, the bottom hint, and responsive scaling. NO gradient atmosphere reconstruction here — that's the canvas's job. ═══════════════════════════════════════════════════════════════════════════ */ /* Section base */ .rp-layout-3 { background: var(--bg); padding: 88px 0 0; position: relative; overflow: hidden; } .rp-layout-3 .wrap.rp3-wrap { position: relative; z-index: 3; } /* Stage — full-section atmospheric scene */ .rp3-stage { position: relative; width: 100%; height: clamp(540px, 70vh, 780px); margin-top: 32px; overflow: hidden; isolation: isolate; } /* Atmosphere wrappers — each holds one canvas. Both render simultaneously in DOM but only one is visible (via section root class), and only one has its RAF loop running (managed by JS in Module 17). */ .rp3-atmos { position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .9s var(--silk); } .rp-atmos-on-ocean .rp3-atmos--ocean { opacity: 1; } .rp-atmos-on-desert .rp3-atmos--desert { opacity: 1; } /* Canvas — fills its parent. The ported simulation handles its own internal resolution (RENDER_SCALE constant in the prototype) and handles resize via window resize listener. */ .rp3-atmos-canvas { width: 100%; height: 100%; display: block; } /* Topbar (only meta now — orbit title removed per spec) */ .rp3-topbar { position: absolute; top: 22px; right: 26px; left: 26px; display: flex; justify-content: flex-end; align-items: center; z-index: 5; pointer-events: none; } .rp3-topbar-meta { font-family: var(--ff-u); font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; color: var(--tx2); background: color-mix(in srgb, var(--bg) 55%, transparent); padding: 6px 14px; border-radius: 14px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* 3-bead orbit row (prev / active / next) */ .rp3-orbit-row { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-58%); display: flex; justify-content: center; align-items: center; gap: clamp(80px, 10vw, 140px); z-index: 4; pointer-events: none; } .rp3-bead { position: relative; width: clamp(110px, 13vw, 160px); height: clamp(110px, 13vw, 160px); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: color-mix(in srgb, var(--bg2) 55%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); cursor: pointer; transition: all .55s var(--silk); pointer-events: auto; } .rp3-bead--prev, .rp3-bead--next { opacity: .35; transform: scale(.78); filter: blur(.5px); } .rp3-bead--prev:hover, .rp3-bead--next:hover { opacity: .6; } .rp3-bead--active { background: color-mix(in srgb, var(--gold) 22%, var(--bg2)); border: 1.5px solid var(--gold); box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold) 18%, transparent), 0 0 60px color-mix(in srgb, var(--gold) 35%, transparent), inset 0 0 30px color-mix(in srgb, var(--gold) 18%, transparent); cursor: default; animation: rp3-bead-pulse 3s var(--silk) infinite; } [data-theme="light"] .rp3-bead--active { background: color-mix(in srgb, var(--teal) 18%, var(--bg2)); border-color: var(--teal); box-shadow: 0 0 0 6px color-mix(in srgb, var(--teal) 14%, transparent), 0 0 60px color-mix(in srgb, var(--teal) 28%, transparent), inset 0 0 30px color-mix(in srgb, var(--teal) 14%, transparent); } .rp3-bead--empty { background: transparent; border: 0; cursor: default; pointer-events: none; } .rp3-bead.done .rp3-bead-num { color: var(--gold); } .rp3-bead-num { font-family: var(--ff-u); font-size: .58rem; letter-spacing: .14em; color: var(--tx3); margin-bottom: 6px; } .rp3-bead--active .rp3-bead-num { color: var(--gold); } [data-theme="light"] .rp3-bead--active .rp3-bead-num { color: var(--teal); } .rp3-bead-text { font-family: var(--ff-d); font-size: clamp(.78rem, 1vw, .96rem); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tx); text-align: center; } @keyframes rp3-bead-pulse { 0%, 100% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold) 18%, transparent), 0 0 60px color-mix(in srgb, var(--gold) 35%, transparent), inset 0 0 30px color-mix(in srgb, var(--gold) 18%, transparent); } 50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--gold) 8%, transparent), 0 0 80px color-mix(in srgb, var(--gold) 45%, transparent), inset 0 0 30px color-mix(in srgb, var(--gold) 22%, transparent); } } /* Reflection dot — small bright dot below the active bead */ .rp3-reflection { position: absolute; left: 50%; top: 64%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 24px color-mix(in srgb, var(--gold) 60%, transparent), 0 0 4px var(--gold); z-index: 4; animation: rp3-reflection-pulse 3s var(--silk) infinite; } [data-theme="light"] .rp3-reflection { background: var(--teal); box-shadow: 0 0 24px color-mix(in srgb, var(--teal) 50%, transparent), 0 0 4px var(--teal); } @keyframes rp3-reflection-pulse { 0%, 100% { opacity: .85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.2); } } /* Side panel — glassmorphic overlay */ .rp3-panel { position: absolute; top: 50%; right: clamp(24px, 4vw, 64px); transform: translateY(-50%); width: clamp(320px, 32vw, 460px); padding: 28px 30px 24px; border-radius: 14px; background: color-mix(in srgb, var(--bg) 62%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 22%, transparent); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); box-shadow: 0 24px 60px color-mix(in srgb, #000 50%, transparent), inset 0 1px 0 color-mix(in srgb, var(--gold) 12%, transparent); z-index: 6; } [data-theme="light"] .rp3-panel { background: color-mix(in srgb, var(--bg) 78%, transparent); border-color: color-mix(in srgb, var(--teal) 22%, transparent); box-shadow: 0 24px 60px color-mix(in srgb, #000 18%, transparent), inset 0 1px 0 color-mix(in srgb, var(--teal) 14%, transparent); } .rp3-panel-num-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .rp3-panel-step-num { font-family: var(--ff-u); font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; color: var(--tx3); } .rp3-panel-status { font-family: var(--ff-u); font-size: .56rem; letter-spacing: .18em; text-transform: uppercase; padding: 4px 12px; border-radius: 11px; border: 1px solid color-mix(in srgb, var(--tx3) 50%, transparent); color: var(--tx3); } .rp3-panel-status.now { border-color: var(--gold); color: var(--gold); background: color-mix(in srgb, var(--gold) 8%, transparent); } [data-theme="light"] .rp3-panel-status.now { border-color: var(--teal); color: var(--teal); background: color-mix(in srgb, var(--teal) 8%, transparent); } .rp3-panel-status.done { border-color: var(--gold); color: var(--gold); } .rp3-panel-status.ahead { opacity: .6; } .rp3-panel-title { font-family: var(--ff-d); font-size: clamp(1.6rem, 2.2vw, 2.1rem); font-weight: 700; line-height: 1.15; color: var(--tx); margin: 0 0 6px; letter-spacing: -.012em; } .rp3-panel-sub { font-family: var(--ff-b); font-style: italic; font-size: 1rem; color: var(--gold); margin: 0 0 14px; min-height: 1.4em; transition: opacity .25s ease; } [data-theme="light"] .rp3-panel-sub { color: var(--teal); } .rp3-panel-instr { font-family: var(--ff-b); font-size: .96rem; line-height: 1.6; color: var(--tx2); margin: 0 0 18px; } .rp3-panel-micro-block { padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--bdr) 60%, transparent); margin-bottom: 18px; } .rp3-panel-micro-label { font-family: var(--ff-u); font-size: .56rem; letter-spacing: .26em; text-transform: uppercase; color: var(--tx3); margin-bottom: 10px; } .rp3-panel-micro-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; } .rp3-panel-micro-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 7px; cursor: pointer; transition: background var(--tf), opacity var(--tf); } .rp3-panel-micro-item:hover { background: color-mix(in srgb, var(--gold) 6%, transparent); } .rp3-panel-micro-item.active { background: color-mix(in srgb, var(--gold) 10%, transparent); } [data-theme="light"] .rp3-panel-micro-item.active { background: color-mix(in srgb, var(--teal) 10%, transparent); } .rp3-panel-micro-item.done { opacity: .5; } .rp3-panel-micro-marker { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--tx3) 40%, transparent); flex-shrink: 0; } .rp3-panel-micro-item.active .rp3-panel-micro-marker { background: var(--gold); } .rp3-panel-micro-item.done .rp3-panel-micro-marker { background: var(--gold); } [data-theme="light"] .rp3-panel-micro-item.active .rp3-panel-micro-marker, [data-theme="light"] .rp3-panel-micro-item.done .rp3-panel-micro-marker { background: var(--teal); } .rp3-panel-micro-text { flex: 1; font-family: var(--ff-b); font-size: .88rem; color: var(--tx); } .rp3-panel-micro-num { font-family: var(--ff-u); font-size: .54rem; letter-spacing: .14em; color: var(--tx3); } .rp3-panel-actions { display: flex; gap: 10px; margin-top: 4px; } .rp3-btn { flex: 1; font-family: var(--ff-u); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; padding: 12px 18px; border-radius: 7px; cursor: pointer; border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); background: transparent; color: var(--tx); transition: all var(--tf); } .rp3-btn:hover:not(:disabled) { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent); } .rp3-btn:disabled { opacity: .35; cursor: not-allowed; } .rp3-btn-next { background: color-mix(in srgb, var(--gold) 22%, var(--bg2)); border-color: var(--gold); } [data-theme="light"] .rp3-btn-next { background: var(--teal); color: #fff; border-color: var(--teal); } .rp3-btn-next:hover:not(:disabled) { background: var(--gold); color: #0d1518; } [data-theme="light"] .rp3-btn-next:hover:not(:disabled) { background: color-mix(in srgb, var(--teal) 88%, #000); } /* Bottom hint */ .rp3-hint { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); font-family: var(--ff-u); font-size: .56rem; letter-spacing: .26em; text-transform: uppercase; color: var(--tx3); opacity: .55; z-index: 5; pointer-events: none; white-space: nowrap; } /* Mode tabs — Layout 3 sits before the stage on dark bg */ .rp-layout-3 .rp-modes { margin: 28px auto 0; } /* ─── RESPONSIVE ───────────────────────────────────────────────────────── */ @media (max-width: 1100px) { .rp3-stage { height: clamp(620px, 90vh, 820px); } .rp3-panel { position: static; transform: none; width: calc(100% - 48px); margin: 0 24px 24px; top: auto; right: auto; } .rp3-orbit-row { top: 38%; transform: translateY(-50%); gap: clamp(40px, 8vw, 90px); } .rp3-reflection { top: 50%; } } @media (max-width: 768px) { .rp-layout-3 { padding: 56px 0 0; } /* Stage becomes a block-flow container with absolute atmosphere behind. Atmosphere canvas remains absolute (covers the whole stage). All UI elements (orbit row + reflection + panel + hint) participate in normal vertical flow so they stack cleanly without overlapping each other. The atmosphere shows through the gaps between them, preserving the RSOS visual experience without losing readability. */ .rp3-stage { height: auto; min-height: 0; display: flex; flex-direction: column; align-items: stretch; padding: 70px 0 60px; } .rp3-topbar { top: 14px; left: 14px; right: 14px; } .rp3-topbar-meta { font-size: .56rem; letter-spacing: .18em; padding: 5px 10px; } /* Orbit becomes static — flows in document order ABOVE the panel. This single change is what eliminates the overlap shown in the screenshot. */ .rp3-orbit-row { position: static; transform: none; top: auto; gap: 18px; padding: 24px 12px 28px; flex: 0 0 auto; z-index: 4; } .rp3-bead { width: 78px; height: 78px; } .rp3-bead-text { font-size: .68rem; letter-spacing: .04em; } .rp3-bead-num { font-size: .5rem; } .rp3-bead--active { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 18%, transparent), 0 0 36px color-mix(in srgb, var(--gold) 30%, transparent); } /* Reflection dot: hidden on mobile. The "reflection on water" metaphor only makes sense when the bead floats above the surface (desktop layout). On mobile the bead sits in document flow above the panel, so a "reflection" below it would just be a stray dot inside the panel. */ .rp3-reflection { display: none; } /* Panel: static, full-width, sits below orbit row in flow. z-index keeps it above any atmosphere elements that might creep into its area. Background is more translucent on mobile so the RSOS atmosphere reads through clearly while text stays legible thanks to backdrop-blur. */ .rp3-panel { position: static; transform: none; width: calc(100% - 28px); margin: 0 14px; padding: 20px 22px 18px; top: auto; right: auto; flex: 0 0 auto; z-index: 6; background: rgba(0, 0, 0, 0.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } [data-theme="light"] .rp3-panel { background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .rp3-panel-title { font-size: 1.4rem; } .rp3-panel-instr { font-size: .9rem; line-height: 1.55; } .rp3-panel-actions { flex-direction: row; gap: 8px; } .rp3-btn { padding: 11px 12px; font-size: .62rem; letter-spacing: .12em; } /* Bottom hint — keep absolute, anchored to stage bottom so it sits under the panel without affecting flow. */ .rp3-hint { position: absolute; font-size: .5rem; letter-spacing: .14em; bottom: 12px; z-index: 5; } } @media (max-width: 480px) { .rp3-stage { padding: 64px 0 56px; } .rp3-orbit-row { gap: 8px; padding: 18px 8px 22px; } .rp3-bead { width: 64px; height: 64px; } .rp3-bead-text { font-size: .56rem; } .rp3-bead-num { font-size: .44rem; } } /* Reduced motion — kill bead pulse + reflection, but keep the canvas simulation (the wave/dune sim is decorative ambient motion, low contrast, and is the prototype's intended visual — disabling it would hide the feature entirely). The pulse/reflection effects are higher-amplitude. */ @media (prefers-reduced-motion: reduce) { .rp3-bead--active, .rp3-reflection { animation: none !important; } } /* ── PRAYER SANCTUARY ────────────────────────────────────────────────────── */ #prayer { padding: 96px 0 108px; background: var(--bg); position: relative; overflow: hidden; } .prs-wrap { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; margin-top: 56px; align-items: start; } .prs-mihrab { position: relative; display: flex; flex-direction: column; align-items: center; margin: 0 auto; width: min(380px,100%); } .prs-arch-wrap { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: visible; } .prs-arch-svg { width: 100%; height: 100%; } .prs-interior { position: relative; z-index: 3; width: 100%; padding: 40px 36px 32px; background: linear-gradient(175deg,var(--bg3) 0%,var(--bg4) 55%,var(--bg3) 100%); border: 1px solid rgba(212,175,55,.2); border-radius: 2px 2px 0 0; overflow: hidden; min-height: 440px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; } [data-theme="light"] .prs-interior { background: linear-gradient(175deg,#F9F7F2 0%,#F2EDE3 55%,#F9F7F2 100%); border-color: rgba(29,107,112,.18); } .prs-phase { font-family: var(--ff-u); font-size: .56rem; letter-spacing: .26em; text-transform: uppercase; color: rgba(212,175,55,.65); display: flex; align-items: center; gap: 9px; position: relative; z-index: 1; } [data-theme="light"] .prs-phase { color: rgba(29,107,112,.7); } .prs-phase::before, .prs-phase::after { content: ''; width: 24px; height: 1px; background: currentColor; opacity: .5; } .prs-sprite { width: 180px; height: 200px; display: flex; align-items: center; justify-content: center; margin: 12px auto 4px; position: relative; z-index: 1; } .prs-sprite img { max-width: 100%; max-height: 100%; object-fit: contain; transition: opacity .4s ease; pointer-events: none; user-select: none; } .prs-focus-tip { font-family: var(--ff-u); font-size: .55rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(212,175,55,.55); } [data-theme="light"] .prs-focus-tip { color: rgba(29,107,112,.5); } .prs-base { width: 100%; padding: 16px 20px; background: rgba(212,175,55,.07); border-top: 1px solid rgba(212,175,55,.15); border-radius: 0 0 2px 2px; text-align: center; } [data-theme="light"] .prs-base { background: rgba(29,107,112,.05); border-color: rgba(29,107,112,.12); } .prs-arabic { font-family: 'EB Garamond',serif; font-size: 1.5rem; color: var(--gold); direction: rtl; display: block; margin-bottom: 4px; } [data-theme="light"] .prs-arabic { color: var(--teal-lt); } .prs-transliteration { font-family: var(--ff-u); font-size: .65rem; letter-spacing: .1em; color: var(--tx3); font-style: italic; } .prs-right { display: flex; flex-direction: column; gap: 0; } .prs-progress { display: flex; align-items: center; gap: 0; margin-bottom: 32px; padding: 0 4px; overflow-x: auto; scrollbar-width: none; } .prs-progress::-webkit-scrollbar { display: none; } .prs-prog-step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; min-width: 52px; cursor: pointer; transition: transform .2s ease; position: relative; } .prs-prog-step:hover { transform: translateY(-2px); } .prs-diamond { width: 16px; height: 16px; border: 1.5px solid rgba(212,175,55,.3); transform: rotate(45deg); background: transparent; transition: all .35s cubic-bezier(.34,1.56,.64,1); position: relative; z-index: 2; } [data-theme="light"] .prs-diamond { border-color: rgba(29,107,112,.25); } .prs-prog-step.on .prs-diamond { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 4px rgba(212,175,55,.15), 0 0 12px rgba(212,175,55,.3); } [data-theme="light"] .prs-prog-step.on .prs-diamond { background: var(--teal-lt); border-color: var(--teal-lt); } .prs-prog-step.done .prs-diamond { background: rgba(212,175,55,.35); border-color: rgba(212,175,55,.5); } .prs-prog-step::before { content: ''; position: absolute; top: 8px; right: calc(50% + 8px); left: calc(-50% + 8px); height: 1px; background: rgba(212,175,55,.15); z-index: 1; } .prs-prog-step:first-child::before { display: none; } .prs-prog-step.on::before, .prs-prog-step.done::before { background: rgba(212,175,55,.4); } .prs-prog-num { font-family: var(--ff-u); font-size: .52rem; letter-spacing: .08em; color: rgba(212,175,55,.4); white-space: nowrap; } .prs-prog-step.on .prs-prog-num { color: rgba(212,175,55,.9); } .prs-card { position: relative; background: var(--cbg); border: 1px solid rgba(212,175,55,.18); border-radius: 2px; overflow: hidden; transition: border-color .3s; } [data-theme="light"] .prs-card { background: #FDFCF8; border-color: rgba(29,107,112,.15); } .prs-card-inner { padding: 28px 32px; position: relative; z-index: 2; transition: opacity .35s ease, transform .4s cubic-bezier(.16,1,.3,1); } .prs-card-inner.out { opacity: 0; transform: translateY(10px); } .prs-card-header { font-family: var(--ff-u); font-size: .55rem; letter-spacing: .24em; text-transform: uppercase; color: rgba(212,175,55,.6); margin-bottom: 14px; } [data-theme="light"] .prs-card-header { color: rgba(29,107,112,.6); } .prs-card-title { font-family: var(--ff-d); font-size: 1.65rem; font-weight: 700; color: var(--tx); line-height: 1.05; letter-spacing: -.025em; margin-bottom: 6px; } .prs-instruction { font-family: var(--ff-b); font-size: .98rem; line-height: 1.85; color: var(--tx2); margin-bottom: 18px; } .prs-technique { padding: 18px 20px; background: rgba(212,175,55,.06); border: 1px solid rgba(212,175,55,.14); border-radius: 2px; position: relative; overflow: hidden; } [data-theme="light"] .prs-technique { background: rgba(138,104,0,.05); border-color: rgba(138,104,0,.14); } .prs-technique::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(to bottom,var(--gold),transparent); } [data-theme="light"] .prs-technique::before { background: linear-gradient(to bottom,var(--gold-lt),transparent); } .prs-tech-label { font-family: var(--ff-u); font-size: .54rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(212,175,55,.7); margin-bottom: 7px; } [data-theme="light"] .prs-tech-label { color: rgba(138,104,0,.7); } .prs-tech-text { font-family: var(--ff-u); font-size: .8rem; letter-spacing: .02em; color: var(--tx); line-height: 1.6; font-style: italic; } .prs-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; } .prs-nav-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border-radius: 1px; border: 1px solid rgba(212,175,55,.25); background: transparent; cursor: pointer; font-family: var(--ff-u); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tx2); transition: all .25s ease; } [data-theme="light"] .prs-nav-btn { border-color: rgba(29,107,112,.2); } .prs-nav-btn:hover { border-color: var(--gold); color: var(--gold); background: rgba(212,175,55,.05); } [data-theme="light"] .prs-nav-btn:hover { border-color: var(--teal-lt); color: var(--teal-lt); } .prs-nav-btn:disabled { opacity: .25; pointer-events: none; } .prs-nav-btn.primary { background: rgba(212,175,55,.1); border-color: rgba(212,175,55,.4); color: var(--gold); } [data-theme="light"] .prs-nav-btn.primary { background: rgba(29,107,112,.07); border-color: rgba(29,107,112,.3); color: var(--teal-lt); } .prs-counter { font-family: var(--ff-u); font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: var(--tx3); } .prs-counter em { color: var(--gold); font-style: normal; } [data-theme="light"] .prs-counter em { color: var(--teal-lt); } .prs-steplist { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; border-top: 1px solid rgba(212,175,55,.1); padding-top: 16px; } .prs-steplist-head { grid-column: 1 / -1; font-family: var(--ff-u); font-size: .54rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(212,175,55,.5); margin-bottom: 2px; } .prs-sl-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px; padding: 12px; border-radius: 10px; cursor: pointer; transition: all .2s ease; border: 1px solid rgba(212,175,55,.15); background: var(--cbg); } .prs-sl-item:hover { background: rgba(212,175,55,.07); border-color: rgba(212,175,55,.3); } .prs-sl-item.on { background: rgba(212,175,55,.1); border-color: rgba(212,175,55,.5); } [data-theme="light"] .prs-sl-item.on { background: rgba(29,107,112,.08); border-color: rgba(29,107,112,.35); } .prs-sl-n { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; background: rgba(212,175,55,.12); border: 1px solid rgba(212,175,55,.25); display: flex; align-items: center; justify-content: center; } .prs-sl-n span { font-family: var(--ff-u); font-size: .56rem; font-weight: 700; color: var(--tx3); } .prs-sl-item.on .prs-sl-n { background: var(--gold); border-color: var(--gold); } .prs-sl-item.on .prs-sl-n span { color: #0d1518; } .prs-sl-name { font-family: var(--ff-u); font-size: .68rem; letter-spacing: .04em; color: var(--tx2); line-height: 1.35; } .prs-sl-item.on .prs-sl-name { color: var(--gold); font-weight: 600; } [data-theme="light"] .prs-sl-item.on .prs-sl-name { color: var(--teal-lt); } @media (max-width: 768px) { /* Prayer Sanctuary: compact mobile layout — reduce vertical scale so primary content fits naturally within one screen fold. Desktop unchanged. */ #prayer { padding: 56px 0 64px; } .prs-wrap { gap: 24px; margin-top: 32px; } /* Mihrab interior: kill desktop's 440px min-height which was forcing huge empty space above/below the sprite on mobile. */ .prs-interior { min-height: 0; padding: 22px 14px 18px; gap: 14px; } /* Sprite shrunk further — was 140×160, now 110×130 to match mobile fold */ .prs-sprite { width: 110px; height: 130px; margin: 6px auto 2px; } /* Phase label tighter */ .prs-phase { font-size: .5rem; letter-spacing: .18em; } .prs-phase::before, .prs-phase::after { width: 16px; } /* Focus tip below sprite tighter */ .prs-focus-tip { font-size: .5rem; letter-spacing: .14em; } /* Mihrab base (Arabic + transliteration) padding tighter */ .prs-base { padding: 12px 16px; } .prs-arabic { font-size: 1.25rem; margin-bottom: 2px; } .prs-transliteration { font-size: .6rem; } /* Progress diamonds row: tighter spacing */ .prs-progress { margin-bottom: 16px; gap: 0; padding: 0 2px; } .prs-prog-step { min-width: 40px; gap: 4px; } /* Card inner padding tighter */ .prs-card-inner { padding: 18px 16px; } .prs-card-step-label { font-size: .56rem; letter-spacing: .18em; margin-bottom: 8px; } .prs-card-name { font-size: 1.4rem; line-height: 1.2; margin-bottom: 10px; } .prs-card-desc { font-size: .9rem; line-height: 1.55; } /* Steplist horizontal slider: keep behavior but tighter cards */ .prs-steplist { display: flex; grid-template-columns: none; overflow-x: auto; gap: 12px; scroll-snap-type: x mandatory; padding-bottom: 8px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; margin-top: 16px; padding-top: 14px; } .prs-steplist-head { display: none; } .prs-sl-item { min-width: 70%; scroll-snap-align: center; flex-shrink: 0; padding: 12px 14px; } /* Prev/Next nav buttons: tighter */ .prs-nav { padding: 10px 14px; } .prs-nav-num { font-size: .85rem; } } /* ── FASTING TIMELINE ────────────────────────────────────────────────────── */ #fasting { padding: 0; overflow: hidden; position: relative; background: var(--bg); } .sw-outer { position: relative; } .sw-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; } .sw-shell { position: absolute; inset: 0; background: #060c16; overflow: hidden; } .sw-sky { position: absolute; inset: 0; transition: background 1.4s ease; z-index: 0; } .sw-stars { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; } .sw-sun { position: absolute; z-index: 3; pointer-events: none; width: 72px; height: 72px; border-radius: 50%; background: radial-gradient(circle at 38% 35%,#fff9e6 0%,#FFE566 22%,#FFA500 55%,#FF6B00 100%); box-shadow: 0 0 0 12px rgba(255,180,0,.12), 0 0 0 28px rgba(255,150,0,.07), 0 0 60px rgba(255,160,0,.25); transition: left 1.2s cubic-bezier(.16,1,.3,1), bottom 1.2s cubic-bezier(.16,1,.3,1), opacity 1s ease; } .sw-moon { position: absolute; z-index: 3; pointer-events: none; width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(circle at 35% 30%,#f0f4ff 0%,#ccd8f0 35%,#a0b0d0 70%,#7890b8 100%); opacity: 0; transition: opacity 1.2s ease, left 1.2s cubic-bezier(.16,1,.3,1), bottom 1.2s cubic-bezier(.16,1,.3,1); } .sw-moon::before { content: ''; position: absolute; width: 38px; height: 38px; border-radius: 50%; background: #0a1628; top: 4px; left: 10px; } .sw-header { position: absolute; top: 0; left: 0; right: 0; z-index: 10; padding: 36px 64px 0; text-align: center; } .sw-header .hdl { color: #FFFFFF; text-shadow: 0 2px 24px rgba(0,0,0,.65), 0 1px 4px rgba(0,0,0,.5); } .sw-header .hdl em.g { color: var(--gold); text-shadow: 0 2px 24px rgba(0,0,0,.65), 0 1px 4px rgba(0,0,0,.5); } [data-theme="light"] .sw-header .hdl { color: #FFFFFF; text-shadow: 0 2px 24px rgba(0,0,0,.65), 0 1px 4px rgba(0,0,0,.5); } [data-theme="light"] .sw-header .hdl em.g { color: var(--gold); text-shadow: 0 2px 24px rgba(0,0,0,.65), 0 1px 4px rgba(0,0,0,.5); } .sw-horizon { position: absolute; bottom: 240px; left: 0; right: 0; z-index: 2; height: 1px; background: linear-gradient(90deg,transparent 0%,rgba(212,175,55,.15) 20%,rgba(212,175,55,.15) 80%,transparent); } .sw-ground { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; height: 240px; background: linear-gradient(to top,rgba(2,8,14,.95) 0%,rgba(2,8,14,.7) 60%,transparent 100%); } .sw-mosque { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); color: #0a1822; } .sw-track { position: absolute; bottom: 180px; left: 0; right: 0; z-index: 5; padding: 0 5%; } .sw-track-active { position: absolute; top: 50%; left: 5%; height: 2px; background: linear-gradient(90deg,var(--gold),rgba(212,175,55,.4)); transform: translateY(-50%); transition: width 1s cubic-bezier(.16,1,.3,1); width: 0; box-shadow: 0 0 8px rgba(212,175,55,.3); } .sw-nodes { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; height: 56px; } .sw-node { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; flex: 1; transition: transform .35s cubic-bezier(.34,1.56,.64,1); } .sw-node:hover { transform: translateY(-4px); } .sw-node.on { transform: translateY(-6px); } .sw-node-dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(212,175,55,.25); border: 1.5px solid rgba(212,175,55,.4); transition: all .4s; } .sw-node.on .sw-node-dot { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 8px rgba(212,175,55,.08), 0 0 24px rgba(212,175,55,.3); transform: scale(1.3); } .sw-node-label { font-family: var(--ff-u); font-size: .56rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(244,240,232,.45); white-space: nowrap; transition: color .3s; } .sw-node.on .sw-node-label { color: rgba(212,175,55,.9); } .sw-card { position: absolute; bottom: 200px; left: 50%; transform: translateX(-50%); width: min(520px,86vw); /* WCAG-safe dark glass — works across ALL sky phases (PRE-DAWN deep blue, DAWN orange, DHUHR bright, MAGHRIB warm sunset, ISHA dark). A 62%-opaque dark ground neutralizes any sky tint that comes through, so white text ALWAYS has strong contrast (~8-9:1, WCAG AAA). Backdrop-blur preserves the atmospheric feel without sacrificing legibility. Top sheen + inset highlight read as authentic glass surface under the sun/moon. */ background: linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 35%, rgba(0,0,0,0) 60%, rgba(0,0,0,.18) 100%), rgba(8,15,25,.62); backdrop-filter: blur(16px) saturate(110%); -webkit-backdrop-filter: blur(16px) saturate(110%); border: 1px solid rgba(212,175,55,.42); border-radius: 12px; padding: 24px 28px; z-index: 8; transition: opacity .38s ease, transform .42s cubic-bezier(.16,1,.3,1); box-shadow: 0 12px 36px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12); } /* Light theme: the sky animation is identical in both themes (the .sw-sky element is set by JS inline-style and doesn't read theme tokens), so the card uses the same dark glass treatment in light mode. */ [data-theme="light"] .sw-card { background: linear-gradient(180deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,0) 35%, rgba(0,0,0,0) 60%, rgba(0,0,0,.2) 100%), rgba(8,15,25,.62); backdrop-filter: blur(16px) saturate(110%); -webkit-backdrop-filter: blur(16px) saturate(110%); border-color: rgba(212,175,55,.42); box-shadow: 0 12px 36px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12); } /* Force WHITE text on the glass card across both themes — required for WCAG contrast against any sky phase. Drop shadows reinforce each glyph against the moving celestial bodies (sun/moon traversing behind glass). */ .sw-card-eyebrow { display: flex; justify-content: space-between; align-items: center; gap: 9px; font-family: var(--ff-u); font-size: .65rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); text-shadow: 0 1px 8px rgba(0,0,0,.65); margin-bottom: 8px; } .sw-card-time { color: rgba(255,255,255,.85); font-style: italic; text-transform: none; letter-spacing: .04em; font-family: var(--ff-b); text-shadow: 0 1px 8px rgba(0,0,0,.65); } .sw-card-title { font-family: var(--ff-d); font-size: 1.2rem; font-weight: 600; color: #ffffff; text-shadow: 0 1px 12px rgba(0,0,0,.75); margin-bottom: 6px; } .sw-card-body { font-family: var(--ff-b); font-size: .92rem; line-height: 1.55; color: rgba(255,255,255,.94); text-shadow: 0 1px 8px rgba(0,0,0,.65); margin: 0; } [data-theme="light"] .sw-card-eyebrow { color: var(--gold); text-shadow: 0 1px 12px rgba(0,0,0,.7); } [data-theme="light"] .sw-card-time { color: rgba(255,255,255,.85); text-shadow: 0 1px 12px rgba(0,0,0,.7); } [data-theme="light"] .sw-card-title { color: #ffffff; text-shadow: 0 1px 14px rgba(0,0,0,.8); } [data-theme="light"] .sw-card-body { color: rgba(255,255,255,.94); text-shadow: 0 1px 10px rgba(0,0,0,.7); } /* Permitted / Nullifiers strip — canonical .sw-laws */ .sw-laws { position: absolute; bottom: 0; left: 0; right: 0; z-index: 6; display: grid; grid-template-columns: 1fr 1fr; background: rgba(2,8,14,.92); border-top: 1px solid rgba(212,175,55,.12); padding-bottom: 20px; } [data-theme="light"] .sw-laws { background: rgba(248,246,242,.97); border-color: rgba(29,107,112,.12); } .sw-laws-col { padding: 16px 20px; } .sw-laws-col:first-child { border-right: 1px solid rgba(212,175,55,.08); } [data-theme="light"] .sw-laws-col:first-child { border-right-color: rgba(29,107,112,.1); } .sw-laws-head { font-family: var(--ff-d); font-size: .82rem; font-weight: 600; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.07); display: flex; align-items: center; gap: 7px; } [data-theme="light"] .sw-laws-head { border-color: rgba(0,0,0,.07); } .sw-laws-head.al { color: rgba(212,175,55,.9); } .sw-laws-head.nu { color: rgba(193,39,45,.9); } [data-theme="light"] .sw-laws-head.al { color: var(--gold-lt); } [data-theme="light"] .sw-laws-head.nu { color: var(--red, rgba(180,30,30,.85)); } .sw-items { display: flex; flex-wrap: wrap; gap: 5px; } .sw-item { display: flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 14px; font-family: var(--ff-u); font-size: .6rem; letter-spacing: .06em; transition: all .2s; } .sw-item.a { background: rgba(212,175,55,.07); border: 1px solid rgba(212,175,55,.18); color: rgba(244,240,232,.7); } .sw-item.a:hover { background: rgba(212,175,55,.14); } .sw-item.n { background: rgba(193,39,45,.07); border: 1px solid rgba(193,39,45,.18); color: rgba(244,240,232,.65); } .sw-item.n:hover { background: rgba(193,39,45,.14); } [data-theme="light"] .sw-item.a { background: rgba(138,104,0,.06); border-color: rgba(138,104,0,.2); color: var(--tx2); } [data-theme="light"] .sw-item.n { background: rgba(193,39,45,.05); border-color: rgba(193,39,45,.18); color: var(--tx2); } .sw-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; } .sw-item.a .sw-dot { background: rgba(212,175,55,.8); } .sw-item.n .sw-dot { background: rgba(193,39,45,.8); } [data-theme="light"] .sw-item.a .sw-dot { background: var(--gold-lt); } .sw-badge { position: absolute; top: 20px; right: 24px; z-index: 15; display: flex; align-items: center; gap: 7px; font-family: var(--ff-u); font-size: .57rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(244,240,232,.35); opacity: 0; transition: opacity .5s ease; pointer-events: none; } .sw-badge.vis { opacity: 1; } .sw-bdot { width: 5px; height: 5px; border-radius: 50%; background: rgba(212,175,55,.7); animation: swPulse 2s ease-in-out infinite; } @keyframes swPulse { 0%,100%{opacity:.3;transform:scale(1)} 50%{opacity:1;transform:scale(1.7)} } .sw-counter { position: absolute; top: 20px; left: 24px; z-index: 15; font-family: var(--ff-u); font-size: .56rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(244,240,232,.3); opacity: 0; transition: opacity .4s; } .sw-counter.vis { opacity: 1; } .sw-skip { position: absolute; bottom: 185px; right: 20px; z-index: 15; background: rgba(2,8,14,.7); backdrop-filter: blur(12px); border: 1px solid rgba(212,175,55,.2); border-radius: 20px; padding: 7px 18px; font-family: var(--ff-u); font-size: .59rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(244,240,232,.5); cursor: pointer; opacity: 0; pointer-events: none; transition: all .25s ease; } .sw-skip.vis { opacity: .7; pointer-events: auto; } .sw-skip:hover { opacity: 1; border-color: rgba(212,175,55,.6); color: rgba(212,175,55,.9); } /* ── HAJJ MAP ────────────────────────────────────────────────────────────── */ #hajj { padding: 96px 0 0; background: var(--bg); overflow: hidden; } .hjw { position: relative; margin-top: 52px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; } .hj-map { position: relative; width: 100%; min-height: 560px; background: #ffffff; overflow: hidden; border-radius: 12px; border: 1px solid var(--bdr2); cursor: grab; } .hj-map:active { cursor: grabbing; } [data-theme="light"] .hj-map { background: #ffffff; } .hj-parallax { position: absolute; inset: 0; will-change: transform; display: flex; align-items: center; justify-content: center; } .hj-visual { display: flex; align-items: center; justify-content: center; height: 500px; position: relative; width: 100%; } .hj-img { max-width: 450px; max-height: 450px; width: 450px; object-fit: contain; transition: transform 0.4s ease, opacity 0.3s ease; animation: hj-float 3s ease-in-out infinite; pointer-events: none; user-select: none; } @keyframes hj-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @media (max-width: 768px) { .hj-visual { height: 320px; } .hj-img { width: 100%; max-width: 280px; max-height: 280px; } } .hj-tooltip { position: absolute; z-index: 50; background: var(--cbg); border: 1px solid var(--bdr2); border-radius: 8px; padding: 8px 14px; font-family: var(--ff-u); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); pointer-events: none; opacity: 0; transition: opacity .2s; white-space: nowrap; } [data-theme="light"] .hj-tooltip { color: var(--teal-lt); } .hj-tooltip.vis { opacity: 1; } .hj-preview { position: absolute; z-index: 50; width: 240px; background: var(--cbg); border: 1px solid var(--bdr2); border-radius: 10px; box-shadow: 0 16px 48px rgba(0,0,0,.5); overflow: hidden; pointer-events: none; opacity: 0; transform: translateY(8px); transition: opacity .22s ease, transform .25s cubic-bezier(.16,1,.3,1); } .hj-preview.vis { opacity: 1; transform: translateY(0); } .hj-preview-info { padding: 12px 14px; } .hj-preview-step { font-family: var(--ff-u); font-size: .55rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; } [data-theme="light"] .hj-preview-step { color: var(--teal-lt); } .hj-preview-title { font-family: var(--ff-d); font-size: .9rem; font-weight: 600; color: var(--tx); margin-bottom: 5px; } .hj-preview-desc { font-size: .73rem; color: var(--tx2); line-height: 1.55; } .hj-panel { display: grid; grid-template-columns: 1fr; background: var(--bg2); border: 1px solid var(--bdr2); border-radius: 12px; overflow: hidden; min-height: 560px; } .hj-steps { display: flex; flex-direction: column; max-height: 280px; overflow-y: auto; scrollbar-width: thin; border-bottom: 1px solid var(--bdr3); background: var(--bg3); } .hj-step-item { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--bdr3); cursor: pointer; transition: all .22s ease; flex-shrink: 0; } .hj-step-item:last-child { border-bottom: none; } .hj-step-item:hover { background: var(--bg4); } .hj-step-item.on { background: var(--sur2); }.hj-step-num { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; background: var(--gold-d); border: 1px solid var(--bdr); display: flex; align-items: center; justify-content: center; font-family: var(--ff-u); font-size: .6rem; font-weight: 600; color: var(--tx3); transition: all .22s; } .hj-step-item.on .hj-step-num { background: var(--gold); color: #0d1518; border-color: var(--gold); } .hj-step-name { font-family: var(--ff-d); font-size: .88rem; font-weight: 600; color: var(--tx); } .hj-step-item.on .hj-step-name { color: var(--gold); } [data-theme="light"] .hj-step-item.on .hj-step-name { color: var(--teal-lt); } @media (max-width: 1100px) { .hj-steps { flex-direction: row; max-height: none; overflow-x: auto; overflow-y: hidden; gap: 12px; scroll-snap-type: x mandatory; padding: 12px; border-bottom: 1px solid var(--bdr3); -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .hj-step-item { min-width: 70%; scroll-snap-align: center; flex-shrink: 0; flex-direction: column; align-items: flex-start; border-bottom: none; border-radius: 8px; border: 1px solid var(--bdr3); } .hj-step-item:last-child { border-bottom: 1px solid var(--bdr3); } } .hj-info { padding: 28px 32px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; } .hj-info-content { transition: opacity .3s ease, transform .38s cubic-bezier(.16,1,.3,1); } .hj-info-content.out { opacity: 0; transform: translateY(10px); } .hj-info-eyebrow { display: flex; align-items: center; gap: 8px; font-family: var(--ff-u); font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; } [data-theme="light"] .hj-info-eyebrow { color: var(--teal-lt); } .hj-info-title { font-family: var(--ff-d); font-size: 1.25rem; font-weight: 700; color: var(--tx); line-height: 1.15; margin-bottom: 12px; } .hj-info-body { font-family: var(--ff-b); font-size: .9rem; line-height: 1.78; color: var(--tx2); margin-bottom: 18px; } .hj-info-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .hj-watch-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: 2px; border: 1px solid rgba(212,175,55,.35); background: rgba(212,175,55,.08); color: var(--gold); font-family: var(--ff-u); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: all .2s; } .hj-watch-btn:hover { background: rgba(212,175,55,.15); } .hj-watch-btn--soon { opacity: .4; pointer-events: none; } .hj-start-wrap { text-align: center; margin-top: 28px; } .hj-start-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 32px; background: rgba(212,175,55,.12); border: 1px solid rgba(212,175,55,.4); border-radius: 2px; color: var(--gold); font-family: var(--ff-u); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: all var(--tm) var(--silk); } .hj-start-btn:hover { background: rgba(212,175,55,.2); transform: translateY(-2px); } .hj-start-btn-icon { font-size: 1.1rem; } .hj-tour-bar { position: absolute; bottom: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; background: rgba(2,20,16,.88); backdrop-filter: blur(16px); border-top: 1px solid rgba(212,175,55,.18); transform: translateY(100%); transition: transform .4s cubic-bezier(.16,1,.3,1); } .hj-tour-bar.vis { transform: translateY(0); } [data-theme="light"] .hj-tour-bar { background: rgba(255,255,255,.92); } .hj-tour-info { display: flex; align-items: center; gap: 14px; } .hj-tour-step { font-family: var(--ff-u); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); } [data-theme="light"] .hj-tour-step { color: var(--teal-lt); } .hj-tour-name { font-family: var(--ff-d); font-size: .95rem; font-weight: 600; color: var(--tx); } .hj-tour-progress { flex: 1; height: 2px; background: var(--bdr2); border-radius: 1px; overflow: hidden; margin: 0 16px; } .hj-tour-fill { height: 100%; background: var(--gold); transition: width .6s cubic-bezier(.16,1,.3,1); width: 0; } [data-theme="light"] .hj-tour-fill { background: var(--teal-lt); } .hj-tour-controls { display: flex; gap: 6px; } .hj-modal { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.82); backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity .3s ease; } .hj-modal.vis { opacity: 1; pointer-events: auto; } .hj-modal-inner { width: min(740px,92vw); background: var(--cbg); border: 1px solid var(--bdr2); border-radius: 14px; overflow: hidden; transform: scale(.95) translateY(20px); transition: transform .35s cubic-bezier(.16,1,.3,1); box-shadow: 0 32px 80px rgba(0,0,0,.6); } .hj-modal.vis .hj-modal-inner { transform: scale(1) translateY(0); } .hj-modal-vid-wrap { position: relative; background: var(--bg3); min-height: 200px; display: flex; align-items: center; justify-content: center; } .hj-modal-vid-inner { width: 100%; padding: 48px 32px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px; } .hj-modal-vid-label { font-family: var(--ff-u); font-size: .65rem; letter-spacing: .18em; text-transform: uppercase; color: var(--tx3); } .hj-modal-info { padding: 20px 24px; border-bottom: 1px solid var(--bdr3); } .hj-modal-step { font-family: var(--ff-u); font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; } [data-theme="light"] .hj-modal-step { color: var(--teal-lt); } .hj-modal-title { font-family: var(--ff-d); font-size: 1.1rem; font-weight: 600; color: var(--tx); } .hj-modal-nav { display: flex; gap: 8px; padding: 16px 24px; justify-content: flex-end; } /* ── QURAN MANUSCRIPT ────────────────────────────────────────────────────── */ .ql { display: grid; grid-template-columns: 1fr 1.4fr; gap: 68px; align-items: center; margin-top: 52px; } .mw { position: relative; display: flex; align-items: center; justify-content: center; } .ms { width: 100%; max-width: 310px; background: var(--cbg); border: 1px solid rgba(212,175,55,.3); border-radius: 2px; padding: 28px; position: relative; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.3); animation: msF 5s ease-in-out infinite; } @keyframes msF { 0%,100%{transform:translateY(0) rotate(-.5deg)} 50%{transform:translateY(-10px) rotate(.5deg)} } .ms::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 5px; background: linear-gradient(to bottom,var(--gold),rgba(212,175,55,.3),var(--gold)); } .ms::after { content: ''; position: absolute; inset: 7px; border: 1px solid rgba(212,175,55,.13); pointer-events: none; } .msh { text-align: center; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid rgba(212,175,55,.18); } .msb { font-family: 'EB Garamond',serif; font-size: 1.4rem; color: var(--gold); direction: rtl; line-height: 1.6; display: block; } [data-theme="light"] .msb { color: var(--gold-lt); } .mstl { font-family: var(--ff-u); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--tx3); margin-top: 7px; } .ms-verses { margin-bottom: 12px; } .ma { direction: rtl; text-align: right; font-family: 'EB Garamond',serif; font-size: 1.05rem; line-height: 2.1; color: var(--tx2); margin-bottom: 4px; } .ma span { color: var(--gold); font-size: .82rem; } [data-theme="light"] .ma span { color: var(--gold-lt); } .mtr { font-family: var(--ff-u); font-size: .72rem; color: var(--tx3); line-height: 1.7; font-style: italic; border-top: 1px solid rgba(212,175,55,.09); padding-top: 11px; } .msg { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 180px; height: 180px; background: radial-gradient(circle,rgba(212,175,55,.07) 0%,transparent 70%); pointer-events: none; } .mau { position: absolute; bottom: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%; background: var(--gold); color: #0d1518; display: flex; align-items: center; justify-content: center; font-size: .76rem; cursor: pointer; animation: ap 2s ease-in-out infinite; } .mau--disabled { opacity: .35; pointer-events: none; animation: none; } @keyframes ap { 0%{box-shadow:0 0 0 0 rgba(212,175,55,.4)} 70%{box-shadow:0 0 0 10px rgba(212,175,55,0)} 100%{box-shadow:0 0 0 0 rgba(212,175,55,0)} } .qms { display: flex; flex-direction: column; gap: 12px; } .qm { background: var(--cbg2); border: 1px solid var(--bdr2); border-radius: 4px; padding: 24px; cursor: pointer; transition: all var(--tm) var(--silk); } .qm:hover { border-color: var(--gold); transform: translateX(6px); } .qmt { font-family: var(--ff-d); font-size: .96rem; font-weight: 600; color: var(--tx); margin-bottom: 5px; display: flex; justify-content: space-between; align-items: center; } .qmd { font-size: .8rem; color: var(--tx2); line-height: 1.65; } .qq { padding: 0; overflow: hidden; } .qq-band { height: 220px; background: linear-gradient(135deg,#021a10 0%,#04301a 25%,#052a14 50%,#04301a 75%,#021a10 100%); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .qq-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 50% 50%,rgba(44,125,130,.25) 0%,transparent 65%); } [data-theme="light"] .qq-band { /* Deeper teal gradient on light theme so the verse text reads with high contrast. Previously this was a near-white band (#e8f4f5 → #c8e8eb) which washed out the italic Garamond verse and the gold reference label. */ background: linear-gradient(135deg,#0e3a3e 0%,#1a5a60 25%,#1d6b70 50%,#1a5a60 75%,#0e3a3e 100%); } [data-theme="light"] .qq-band::before { background: radial-gradient(ellipse 60% 80% at 50% 50%,rgba(212,175,55,.18) 0%,transparent 65%); } [data-theme="light"] .qq-text { /* Light-on-deep-teal for clear contrast. Subtle warm tint to feel intentional, not stark white. */ color: #FAF6E8; text-shadow: 0 1px 14px rgba(2,26,16,.35); } [data-theme="light"] .qq-moon { color: var(--gold); opacity: .55; } [data-theme="light"] .qq-minaret svg { fill: rgba(212,175,55,.45); } .qq-minaret { position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 55px; height: 130px; opacity: .15; } .qq-moon { position: absolute; left: calc(50% - 55px); top: 28px; font-size: 2rem; opacity: .28; color: #fff; } .qq-body { position: relative; z-index: 1; text-align: center; padding: 0 40px; } .qq-text { font-family: 'EB Garamond',serif; font-size: clamp(1.4rem,2.8vw,2.2rem); font-style: italic; color: #F0ECE0; line-height: 1.45; margin-bottom: 14px; } .qq-ref { font-family: var(--ff-u); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); } /* ── FITRAH ──────────────────────────────────────────────────────────────── */ .fthr { display: flex; gap: 14px; margin-top: 44px; overflow-x: auto; padding-bottom: 12px; scrollbar-width: thin; scrollbar-color: var(--gold) transparent; } .fthr::-webkit-scrollbar { height: 3px; } .fthr::-webkit-scrollbar-thumb { background: var(--gold-m); } .fti2 { flex-shrink: 0; width: 210px; background: var(--bg3); border: 1px solid var(--bdr2); border-radius: 10px; padding: 28px 20px; text-align: center; cursor: pointer; transition: all var(--tm) var(--silk); position: relative; overflow: hidden; } .fti2:hover { border-color: var(--gold); transform: translateY(-5px); box-shadow: var(--sgold); } .fii { font-size: 2.4rem; margin-bottom: 14px; display: block; } .fin { font-family: var(--ff-d); font-size: 1rem; font-weight: 600; color: var(--tx); margin-bottom: 8px; } .fid { font-size: .78rem; color: var(--tx2); line-height: 1.65; } .fiar { font-family: 'EB Garamond',serif; font-size: .88rem; color: var(--gold); margin-top: 10px; direction: rtl; } [data-theme="light"] .fiar { color: var(--teal-lt); } /* ── RIGHTS COMPASS ──────────────────────────────────────────────────────── */ #rights { padding: 0; overflow: hidden; background: var(--bg); position: relative; } .urc-header { padding: 96px 64px 52px; max-width: 1440px; margin: 0 auto; text-align: center; } .urc-header .bod { max-width: 500px; margin: 0 auto; } .urc-outer { position: relative; } .urc-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; } .urc-shell { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; background: var(--bg); } .urc-stage { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; } .urc-ambient { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 55% 55% at 50% 50%,rgba(44,125,130,.07) 0%,transparent 68%); } .urc-svg-wrap { width: min(480px,86vw); height: min(480px,86vw); position: relative; z-index: 1; } .urc-svg-wrap svg { width: 100%; height: 100%; overflow: visible; } .urc-panel { display: flex; flex-direction: column; justify-content: center; padding: 56px 68px 56px 52px; position: relative; overflow: hidden; border-left: 1px solid var(--bdr3); } .urc-info { transition: opacity .35s ease, transform .42s cubic-bezier(.16,1,.3,1); } .urc-info.out { opacity: 0; transform: translateY(14px); } .urc-num { font-family: var(--ff-d); font-size: 4.5rem; font-weight: 700; line-height: 1; letter-spacing: -.05em; margin-bottom: 8px; color: var(--gold); opacity: .09; } [data-theme="light"] .urc-num { color: var(--gold-lt); } .urc-cat { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-family: var(--ff-u); font-size: .59rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); } [data-theme="light"] .urc-cat { color: var(--teal-lt); } .urc-cat::before { content: ''; display: block; width: 22px; height: 1px; background: currentColor; opacity: .65; } .urc-ico { font-size: 2.4rem; margin-bottom: 18px; display: block; } .urc-ttl { font-family: var(--ff-d); font-size: clamp(1.5rem,2.2vw,2.1rem); font-weight: 700; color: var(--tx); line-height: 1.1; letter-spacing: -.022em; margin-bottom: 16px; } .urc-ttl em { color: var(--gold); font-style: italic; } [data-theme="light"] .urc-ttl em { color: var(--gold-lt); } .urc-body { font-family: var(--ff-b); font-size: 1rem; line-height: 1.82; color: var(--tx2); max-width: 340px; margin-bottom: 24px; } .urc-ar { font-family: 'EB Garamond',serif; font-size: 1.4rem; color: var(--gold); direction: rtl; opacity: .68; margin-bottom: 32px; } [data-theme="light"] .urc-ar { color: var(--gold-lt); } .urc-strip { display: flex; align-items: center; gap: 0; } .urc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bdr2); border: 1px solid var(--bdr2); cursor: pointer; flex-shrink: 0; transition: all .32s cubic-bezier(.34,1.56,.64,1); } .urc-dot.on { background: var(--gold); border-color: var(--gold); transform: scale(1.5); } [data-theme="light"] .urc-dot.on { background: var(--teal-lt); border-color: var(--teal-lt); } .urc-thread { flex: 1; height: 1px; background: var(--bdr3); max-width: 10px; min-width: 4px; } .urc-shell { transform-origin: center center; transition: transform .72s cubic-bezier(.16,1,.3,1); } .urc-shell.zoom-in { transform: scale(1.04); } .urc-shell.zoom-out { transform: scale(1); } .urc-stage { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; } .urc-ambient { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 55% 55% at 50% 50%,rgba(44,125,130,.07) 0%,transparent 68%); } [data-theme="light"] .urc-ambient { background: radial-gradient(ellipse 55% 55% at 50% 50%,rgba(29,107,112,.05) 0%,transparent 68%); } .urc-svg-wrap { width: min(480px,86vw); height: min(480px,86vw); position: relative; z-index: 1; } .urc-svg-wrap svg { width: 100%; height: 100%; overflow: visible; } .urc-panel { display: flex; flex-direction: column; justify-content: center; padding: 56px 68px 56px 52px; position: relative; overflow: hidden; border-left: 1px solid var(--bdr3); } .urc-pbar { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--bdr3); z-index: 10; overflow: hidden; } .urc-pfill { position: absolute; top: 0; left: 0; right: 0; background: linear-gradient(to bottom,var(--teal),var(--gold)); transition: height .5s cubic-bezier(.16,1,.3,1); height: 0; } .urc-badge { position: absolute; top: 26px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 7px; font-family: var(--ff-u); font-size: .57rem; letter-spacing: .18em; text-transform: uppercase; color: var(--tx4); z-index: 20; pointer-events: none; white-space: nowrap; opacity: 0; transition: opacity .45s ease; } .urc-badge.vis { opacity: 1; } .urc-bdot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); animation: urcPulse 2s ease-in-out infinite; } @keyframes urcPulse { 0%,100%{opacity:.4;transform:scale(1)} 50%{opacity:1;transform:scale(1.7)} } .urc-counter { position: absolute; bottom: 26px; right: 28px; font-family: var(--ff-u); font-size: .56rem; letter-spacing: .18em; text-transform: uppercase; color: var(--tx4); z-index: 10; opacity: 0; transition: opacity .4s ease; } .urc-counter.vis { opacity: 1; } .urc-skip { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); background: var(--glass); backdrop-filter: blur(14px); border: 1px solid var(--bdr2); border-radius: 20px; padding: 7px 22px; font-family: var(--ff-u); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tx3); cursor: pointer; transition: all .25s ease; z-index: 20; white-space: nowrap; opacity: 0; pointer-events: none; } .urc-skip.vis { opacity: .65; pointer-events: auto; } .urc-skip:hover { opacity: 1; border-color: var(--gold); color: var(--gold); } [data-theme="light"] .urc-skip:hover { border-color: var(--teal-lt); color: var(--teal-lt); } /* ── PROPHET TEACHINGS ───────────────────────────────────────────────────── */ #prophet { padding: 0; } .tb { display: grid; grid-template-columns: repeat(5,1fr); gap: 0; margin: 0; } .to { position: relative; overflow: hidden; cursor: pointer; min-height: 340px; display: flex; flex-direction: column; justify-content: flex-end; } .tobg { position: absolute; inset: 0; transition: transform .6s var(--silk); } .to:hover .tobg { transform: scale(1.06); } .to::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.35) 50%,transparent 100%); transition: opacity .3s; } .to:hover::after { opacity: .82; } .toc { position: relative; z-index: 1; padding: 24px 20px; } .toi { font-size: 2.2rem; margin-bottom: 10px; display: block; } .ton { font-family: var(--ff-d); font-size: 1.08rem; font-weight: 600; color: #fff; margin-bottom: 8px; } .tod { font-size: .78rem; color: rgba(244,240,232,.72); line-height: 1.65; max-height: 0; overflow: hidden; transition: max-height .4s var(--silk); } .to:hover .tod { max-height: 120px; } .tobdr { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--silk); } .to:hover .tobdr { transform: scaleX(1); } /* ── GROWTH PATH ─────────────────────────────────────────────────────────── */ #growth { padding: 96px 0; background: var(--bg2); } .gr-rows { margin-top: 52px; display: flex; flex-direction: column; gap: 60px; } .gr-row { position: relative; } .gr-row-line { position: absolute; top: 30px; left: calc(12.5%); right: calc(12.5%); height: 2px; background: linear-gradient(90deg,var(--gold),rgba(212,175,55,.25),var(--gold)); opacity: .30; pointer-events: none; z-index: 0; } .gr-cols { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; position: relative; z-index: 1; } .gm { text-align: center; position: relative; } .gm-c { position: absolute; top: 30px; left: calc(50% + 30px); right: calc(-50% + 30px); height: 2px; background: linear-gradient(90deg,var(--gold),rgba(212,175,55,.2)); opacity: .32; pointer-events: none; z-index: 0; } .gm:last-child .gm-c { display: none; } .gm-ico { width: 60px; height: 60px; border-radius: 50%; background: var(--gold-d); border: 2px solid var(--gold); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin: 0 auto; position: relative; z-index: 1; transition: all var(--tm) var(--spring); } .gm:hover .gm-ico { transform: scale(1.12); box-shadow: 0 0 22px rgba(212,175,55,.32); } .gm-lk .gm-ico { background: var(--sur); border-color: var(--bdr2); opacity: .58; } .gm-card { background: var(--cbg); border: 1px solid var(--bdr2); border-radius: 10px; padding: 20px; margin-top: 20px; text-align: left; transition: all var(--tm) var(--silk); } .gm:hover .gm-card { border-color: rgba(212,175,55,.28); box-shadow: var(--sgold); transform: translateY(-3px); } .gm-lk .gm-card { opacity: .58; } .gm-wk { font-family: var(--ff-u); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 5px; } [data-theme="light"] .gm-wk { color: var(--gold-lt); } .gm-t { font-family: var(--ff-d); font-size: 1.08rem; font-weight: 600; color: var(--tx); margin-bottom: 3px; } .gm-s { font-family: var(--ff-u); font-size: .7rem; color: var(--teal-l); margin-bottom: 10px; } .gm-d { font-size: .8rem; color: var(--tx2); line-height: 1.65; } /* ── CTA ─────────────────────────────────────────────────────────────────── */ #cta { padding: 96px 0; position: relative; overflow: hidden; } .cta-am { position: absolute; inset: 0; background: linear-gradient(135deg,rgba(44,125,130,.09) 0%,transparent 50%,rgba(44,125,130,.04) 100%); } .cta-pt { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-width='0.4' opacity='0.07'%3E%3Ccircle cx='40' cy='40' r='36'/%3E%3Ccircle cx='40' cy='40' r='20'/%3E%3Cline x1='4' y1='40' x2='76' y2='40'/%3E%3Cline x1='40' y1='4' x2='40' y2='76'/%3E%3C/g%3E%3C/svg%3E"); } .cta-inn { position: relative; z-index: 1; max-width: 660px; } .cta-t { font-family: var(--ff-d); font-size: clamp(2.1rem,3.8vw,3.4rem); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; margin-bottom: 20px; color: var(--tx); } .cta-t em { color: var(--gold); font-style: italic; } [data-theme="light"] .cta-t em { color: var(--gold-lt); } .cta-d { font-size: .98rem; color: var(--tx2); line-height: 1.78; margin-bottom: 32px; max-width: 470px; } .cta-btns { display: flex; gap: 12px; flex-wrap: wrap; } .cta-cg { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 48px; } .cta-card { background: var(--cbg); border: 1px solid var(--bdr2); border-radius: 12px; overflow: hidden; transition: all var(--tm) var(--silk); cursor: pointer; display: block; color: var(--tx); } .cta-card:hover { transform: translateY(-5px); box-shadow: var(--sgold); border-color: rgba(212,175,55,.3); } .cta-img { height: 180px; position: relative; display: flex; align-items: center; justify-content: center; font-size: 3rem; } .cta-bdy { padding: 20px; } .cta-badges { display: flex; gap: 6px; margin-bottom: 10px; } .cta-ct { font-family: var(--ff-d); font-size: 1.05rem; font-weight: 600; color: var(--tx); margin-bottom: 8px; line-height: 1.3; } .cta-cd { font-size: .82rem; color: var(--tx2); line-height: 1.65; margin-bottom: 14px; } .cta-lnk { font-family: var(--ff-u); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); } [data-theme="light"] .cta-lnk { color: var(--teal-lt); } /* ── COMMUNITY ───────────────────────────────────────────────────────────── */ #comm { padding: 96px 0; background: var(--bg3); } [data-theme="light"] #comm { background: var(--bg2); } .cm-g { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 48px; } .cm-c { background: var(--cbg); border: 1px solid var(--bdr2); border-radius: 12px; padding: 34px 28px; transition: all var(--tm) var(--silk); position: relative; overflow: hidden; } .cm-c:hover { transform: translateY(-4px); box-shadow: var(--sgold); } .cm-c.feat { border-color: rgba(212,175,55,.45); } .cm-c.feat:hover { border-color: rgba(212,175,55,.7); } .cm-ic { width: 44px; height: 44px; border-radius: 8px; background: var(--gold-d); border: 1px solid var(--bdr); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; } .cm-ic.f { background: rgba(212,175,55,.2); } [data-theme="light"] .cm-ic { background: rgba(29,107,112,.09); border-color: rgba(29,107,112,.18); } [data-theme="light"] .cm-ic.f { background: rgba(138,104,0,.11); } .cm-t { font-family: var(--ff-d); font-size: 1.2rem; font-weight: 700; color: var(--tx); margin-bottom: 11px; } .cm-d { font-size: .85rem; color: var(--tx2); line-height: 1.72; margin-bottom: 22px; } .cm-newsletter { margin-top: 4px; } .cm-nl-row { display: flex; } .cm-nl-input { flex: 1; padding: 8px 12px; background: var(--sur); border: 1px solid var(--bdr2); border-right: none; border-radius: 2px 0 0 2px; color: var(--tx); font-family: var(--ff-u); font-size: .76rem; outline: none; transition: border-color var(--tf); } .cm-nl-input::placeholder { color: var(--tx4); } .cm-nl-input:focus { border-color: var(--gold); } [data-theme="light"] .cm-nl-input:focus { border-color: var(--teal-lt); } .cm-nl-btn { padding: 8px 14px; background: var(--gold); color: #0d1518; border: none; border-radius: 0 2px 2px 0; font-family: var(--ff-u); font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background var(--tf); } .cm-nl-btn:hover { background: var(--gold-l); } [data-theme="light"] .cm-nl-btn { background: var(--gold-lt); } .cm-nl-msg { font-family: var(--ff-u); font-size: .68rem; color: var(--tx3); margin-top: 8px; min-height: 1em; } /* ── MC4WP form (when plugin renders inside .cm-newsletter--mc4wp) ────────── */ /* MINIMAL theme styling — colors, fonts, borders only. NO layout overrides, NO flex/grid on .mc4wp-form-fields, NO :has() selectors, NO transforms. This preserves MC4WP's native block-flow layout exactly as the plugin ships it (each field in its own

), which is what the user confirmed works. Only the inputs and submit button adopt ADTI theme colors. */ .cm-newsletter--mc4wp { margin-top: 4px; } .cm-newsletter--mc4wp .mc4wp-form { margin: 0; } .cm-newsletter--mc4wp .mc4wp-form-fields p { margin: 0 0 10px; } .cm-newsletter--mc4wp .mc4wp-form-fields p:last-child { margin-bottom: 0; } /* Email/text inputs — match .cm-nl-input visual language */ .cm-newsletter--mc4wp .mc4wp-form input[type="email"], .cm-newsletter--mc4wp .mc4wp-form input[type="text"] { width: 100%; padding: 9px 12px; background: var(--sur); border: 1px solid var(--bdr2); border-radius: 3px; color: var(--tx); font-family: var(--ff-u); font-size: .76rem; outline: none; transition: border-color var(--tf); } .cm-newsletter--mc4wp .mc4wp-form input[type="email"]::placeholder, .cm-newsletter--mc4wp .mc4wp-form input[type="text"]::placeholder { color: var(--tx4); } .cm-newsletter--mc4wp .mc4wp-form input[type="email"]:focus, .cm-newsletter--mc4wp .mc4wp-form input[type="text"]:focus { border-color: var(--gold); } [data-theme="light"] .cm-newsletter--mc4wp .mc4wp-form input[type="email"]:focus, [data-theme="light"] .cm-newsletter--mc4wp .mc4wp-form input[type="text"]:focus { border-color: var(--teal-lt); } /* Submit button — match .cm-nl-btn visual language */ .cm-newsletter--mc4wp .mc4wp-form input[type="submit"], .cm-newsletter--mc4wp .mc4wp-form button[type="submit"], .cm-newsletter--mc4wp .mc4wp-form button:not([type]) { width: 100%; padding: 9px 14px; background: var(--gold); color: #0d1518; border: none; border-radius: 3px; font-family: var(--ff-u); font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background var(--tf); } .cm-newsletter--mc4wp .mc4wp-form input[type="submit"]:hover, .cm-newsletter--mc4wp .mc4wp-form button[type="submit"]:hover, .cm-newsletter--mc4wp .mc4wp-form button:not([type]):hover { background: var(--gold-l); } [data-theme="light"] .cm-newsletter--mc4wp .mc4wp-form input[type="submit"], [data-theme="light"] .cm-newsletter--mc4wp .mc4wp-form button[type="submit"], [data-theme="light"] .cm-newsletter--mc4wp .mc4wp-form button:not([type]) { background: var(--gold-lt); } /* Labels — MC4WP often inlines "Email address:" before the input. Style them as quiet supporting text. Admins may hide labels entirely via MC4WP form settings; this is just for the default case. */ .cm-newsletter--mc4wp .mc4wp-form label { display: block; font-family: var(--ff-u); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tx3); margin-bottom: 4px; } /* Response messages — success/error feedback uses ADTI typography + colors */ .cm-newsletter--mc4wp .mc4wp-response, .cm-newsletter--mc4wp .mc4wp-alert { font-family: var(--ff-u); font-size: .68rem; color: var(--tx3); margin-top: 10px; line-height: 1.4; } .cm-newsletter--mc4wp .mc4wp-response p, .cm-newsletter--mc4wp .mc4wp-alert p { margin: 0; } .cm-newsletter--mc4wp .mc4wp-alert.mc4wp-success, .cm-newsletter--mc4wp .mc4wp-alert.mc4wp-success p { color: var(--gold); } .cm-newsletter--mc4wp .mc4wp-alert.mc4wp-error, .cm-newsletter--mc4wp .mc4wp-alert.mc4wp-error p { color: var(--red); } [data-theme="light"] .cm-newsletter--mc4wp .mc4wp-alert.mc4wp-success, [data-theme="light"] .cm-newsletter--mc4wp .mc4wp-alert.mc4wp-success p { color: var(--teal-lt); } /* ── FOOTER ──────────────────────────────────────────────────────────────── */ body > footer, .site-footer { background: var(--bg); border-top: 1px solid var(--bdr2); padding: 68px 0 34px; } .ft { display: grid; grid-template-columns: 1.5fr repeat(4,1fr); gap: 48px; padding-bottom: 48px; border-bottom: 1px solid var(--bdr3); margin-bottom: 30px; } .logo-nm { font-family: var(--ff-d); font-size: 1.15rem; font-weight: 700; color: var(--tx); margin-bottom: 9px; } .logo-nm span { color: var(--gold); } [data-theme="light"] .logo-nm span { color: var(--teal-lt); } .fbr p { font-size: .82rem; color: var(--tx2); line-height: 1.72; margin-bottom: 18px; } .nl-f { display: flex; } .nl-i { flex: 1; padding: 8px 13px; background: var(--sur); border: 1px solid var(--bdr2); border-right: none; border-radius: 2px 0 0 2px; color: var(--tx); font-family: var(--ff-u); font-size: .76rem; outline: none; transition: border-color var(--tf); } .nl-i::placeholder { color: var(--tx4); } .nl-i:focus { border-color: var(--gold); } [data-theme="light"] .nl-i { background: var(--bg2); } .nl-b { padding: 8px 14px; background: var(--gold); color: #0d1518; border: none; border-radius: 0 2px 2px 0; font-family: var(--ff-u); font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background var(--tf); } .nl-b:hover { background: var(--gold-l); } [data-theme="light"] .nl-b { background: var(--gold-lt); color: #fff; } .fc-hd { font-family: var(--ff-u); font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; } [data-theme="light"] .fc-hd { color: var(--teal-lt); } .fc-l { list-style: none; display: flex; flex-direction: column; gap: 8px; } .fc-l a { font-size: .8rem; color: var(--tx2); transition: color var(--tf); display: flex; align-items: center; gap: 5px; } .fc-l a::before { content: '→'; font-size: .62rem; opacity: .3; } .fc-l a:hover { color: var(--gold); } [data-theme="light"] .fc-l a:hover { color: var(--teal-lt); } .fb { display: flex; align-items: center; justify-content: space-between; } .fcp { font-family: var(--ff-u); font-size: .7rem; color: var(--tx4); } .soc { display: flex; gap: 10px; } .so { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--bdr2); display: flex; align-items: center; justify-content: center; font-size: .82rem; color: var(--tx3); transition: all var(--tf); } .so:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); } [data-theme="light"] .so:hover { border-color: var(--teal-lt); color: var(--teal-lt); } /* ── RESPONSIVE ──────────────────────────────────────────────────────────── */ @media (max-width: 1200px) { .tb { grid-template-columns: repeat(3,1fr); } .prs-wrap { grid-template-columns: minmax(0, 1fr); } .urc-shell { grid-template-columns: 1fr; grid-template-rows: 1fr auto; } } @media (max-width: 1100px) { .wrap { padding: 0 36px; } .kg { grid-template-columns: repeat(2,1fr); } .ft { grid-template-columns: 1fr 1fr 1fr; } .hjw { grid-template-columns: 1fr; } .hj-map { min-height: 420px; } .hj-panel { min-height: auto; } } @media (max-width: 768px) { .nav-links { display: none; } /* Keep navbar a single row on mobile — preventing wrap eliminates the "button overlapping section below" bug seen on Samsung S8+ width. The 66px desktop height is preserved but flex-wrap is killed so any overflow scrolls horizontally within the nav-in (clipped by overflow: hidden) rather than spilling into the section below the fixed nav. */ .nav-in { padding: 0 16px; height: 60px; flex-wrap: nowrap; gap: 8px; overflow: hidden; } .nav-logo { flex-shrink: 0; min-width: 0; } .nav-mark { width: 26px; height: 26px; font-size: 11px; } .nav-name { font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-r { gap: 8px; flex-shrink: 0; } .nav-r .btn-g { font-size: .58rem; padding: 7px 12px; letter-spacing: .05em; white-space: nowrap; } .tw { gap: 5px; } .tl { min-width: 0; font-size: .54rem; letter-spacing: .1em; } /* Toggle: smaller track + smaller knob + matching translate so the gold knob stays fully inside the pill in light mode (was overflowing by ~5px because the desktop translateX(19px) was too far for the 34px track). */ .tt { width: 34px; height: 18px; } .tt::after { top: 2px; left: 2px; width: 12px; height: 12px; } [data-theme="light"] .tt::after { transform: translateX(16px); } .wrap { padding: 0 20px; } section { padding: 64px 0; } .tg, .twg, .cm-g, .cta-cg, .gg, .gr-cols { grid-template-columns: 1fr; } .sh-g, .ql { grid-template-columns: 1fr; } .prs-wrap { grid-template-columns: minmax(0, 1fr); } .lv-grid { grid-template-columns: 1fr; } .lp { border-radius: 0 0 8px 8px; } .m-row { grid-template-columns: repeat(2,1fr); } .rs, .pilrow { grid-template-columns: repeat(3,1fr); } .tb { grid-template-columns: repeat(2,1fr); } /* Iman beliefs grid: 2 columns on mobile (was 3, cards became unreadable). minmax(0,1fr) prevents long words like "Muhammad ﷺ" from forcing the cell wider than its share, which was clipping content. */ .bg { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .bc { padding: 14px 13px; } .ft { grid-template-columns: 1fr 1fr; gap: 28px; } .gr-row-line { display: none; } .gm-c { display: none; } .urc-panel { padding: 24px 22px 28px; border-left: none; border-top: 1px solid var(--bdr3); } /* Fasting header: clear the fixed navbar on mobile so the title isn't cropped */ .sw-header { padding: 80px 18px 0; } .sw-header .hdl { font-size: 1.6rem; line-height: 1.15; } /* Fasting card: positioned just above the laws bar (which sits at bottom: 0 and is ~250-280px tall on mobile from its wrapping pill rows). The glass background defined in the desktop rule is inherited — only position, padding, width, and typography sizing are adjusted for mobile. */ /* Card mobile position: bottom: 340px clears the laws bar entirely on mobile (laws bar is ~280-310px tall with wrapping pill rows + headers). Was 240px which overlapped the "Permitted During Fast" / "Nullifiers of Fast" headers. Only position changes — typography, padding, width unchanged. */ .sw-card { bottom: 340px; padding: 11px 16px; width: min(520px,92vw); } .sw-skip { bottom: 350px; } .sw-card-eyebrow { font-size: .5rem; margin-bottom: 3px; letter-spacing: .14em; } .sw-card-title { font-size: .95rem; margin-bottom: 4px; line-height: 1.25; } .sw-card-body { font-size: .76rem; line-height: 1.45; } .sw-laws-col { padding: 12px 14px; } .sw-item { font-size: .55rem; padding: 3px 8px; } /* Hide the "SCROLL TO EXPLORE" badge on mobile — it overlaps the compass top arc on small screens where the compass scales to fit available height. Mobile users naturally scroll-explore without the hint cue. */ .urc-badge { display: none; } /* Mobile-responsive header padding (was inline style="padding:96px 64px 52px" in PHP which didn't shrink on mobile). */ .urc-header { padding: 32px 24px 36px; } } @media (max-width: 480px) { /* Very small screens (S8+ width 360): further compress the navbar */ .nav-in { padding: 0 12px; height: 56px; gap: 6px; } .nav-mark { width: 22px; height: 22px; font-size: 10px; } .nav-name { font-size: .8rem; } /* Hide the "Light"/"Dark" word — the toggle's visual state is sufficient. This frees ~50px of horizontal space so the CTA fits without wrapping. */ .tl { display: none; } .nav-r { gap: 6px; } .nav-r .btn-g { font-size: .54rem; padding: 6px 10px; letter-spacing: .04em; } .tt { width: 32px; height: 17px; } .tt::after { top: 2px; left: 2px; width: 11px; height: 11px; } [data-theme="light"] .tt::after { transform: translateX(15px); } /* Iman beliefs: tighter 2-col on 360px width */ .bg { gap: 8px; } .bc { padding: 12px 10px; } .kg { grid-template-columns: 1fr; } .m-row { grid-template-columns: 1fr; } .tb { grid-template-columns: 1fr; } .ft { grid-template-columns: 1fr; } .rs { grid-template-columns: repeat(2,1fr); } } /* ═══════════════════════════════════════════════════════════════════════════ ASSET IMAGE OVERLAYS — Knowledge Navigator / Tawheed / Iman / Guides Each rule reads its image URL from a CSS custom property (--*-img) set inline by PHP, so swapping images is a data-only change. The overlay is a top-to-bottom gradient using the section's existing card background token so text remains legible while the photograph reads through. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Knowledge Navigator cards (.kc) ─────────────────────────────────────── */ /* WCAG strategy: image at full opacity reads clearly; a strong dark overlay sits between image and text so white text always passes contrast on any image. White text is forced regardless of theme — black text on a tinted image is unreadable in light mode. Stacking note: the overlay lives on `.kc-bg::after` (not on the parent's `::before`) so it's guaranteed to paint AFTER the image's background-image regardless of DOM order or z-index ties. */ .kc.kc-has-img { position: relative; isolation: isolate; overflow: hidden; } .kc-bg { position: absolute; inset: 0; background-image: var(--kc-img); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 1; z-index: -1; transition: transform .8s var(--silk); } .kc-bg::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.58); pointer-events: none; } .kc.kc-has-img:hover .kc-bg { transform: scale(1.04); } /* Force white text on image cards regardless of theme — required for WCAG contrast against the image+overlay ground. */ .kc.kc-has-img, .kc.kc-has-img .kt, .kc.kc-has-img .kd, .kc.kc-has-img .kl, .kc.kc-has-img .kct, .kc.kc-has-img .ki { color: #fff; } .kc.kc-has-img .kl { color: rgba(255,255,255,.88); } .kc.kc-has-img .kd { color: rgba(255,255,255,.92); } [data-theme="light"] .kc.kc-has-img, [data-theme="light"] .kc.kc-has-img .kt, [data-theme="light"] .kc.kc-has-img .kd, [data-theme="light"] .kc.kc-has-img .kl, [data-theme="light"] .kc.kc-has-img .kct, [data-theme="light"] .kc.kc-has-img .ki { color: #fff; } [data-theme="light"] .kc.kc-has-img .kl { color: rgba(255,255,255,.88); } [data-theme="light"] .kc.kc-has-img .kd { color: rgba(255,255,255,.92); } /* ── Tawheed cards (.twc) — same recipe ──────────────────────────────────── */ .twc.twc-has-img { position: relative; isolation: isolate; overflow: hidden; } .twc-bg { position: absolute; inset: 0; background-image: var(--twc-img); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 1; z-index: -1; transition: transform .8s var(--silk); } .twc-bg::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.58); pointer-events: none; } /* Hover: keep the same overlay; just gently zoom the image. Avoids opacity fade-out that previously broke contrast on hover. */ .twc.twc-has-img:hover .twc-bg { transform: scale(1.03); } /* White text on image — both themes */ .twc.twc-has-img, .twc.twc-has-img .twi, .twc.twc-has-img .tw-ar, .twc.twc-has-img .tw-t, .twc.twc-has-img .tw-d { color: #fff; } .twc.twc-has-img .tw-d { color: rgba(255,255,255,.92); } .twc.twc-has-img .tw-ar { color: rgba(255,255,255,.85); } [data-theme="light"] .twc.twc-has-img, [data-theme="light"] .twc.twc-has-img .twi, [data-theme="light"] .twc.twc-has-img .tw-ar, [data-theme="light"] .twc.twc-has-img .tw-t, [data-theme="light"] .twc.twc-has-img .tw-d { color: #fff; } [data-theme="light"] .twc.twc-has-img .tw-d { color: rgba(255,255,255,.92); } [data-theme="light"] .twc.twc-has-img .tw-ar { color: rgba(255,255,255,.85); } /* ── Iman belief cards (.bc) inside Three Levels tabs ───────────────────── */ .bc.bc-has-img { position: relative; isolation: isolate; overflow: hidden; } .bc-bg { position: absolute; inset: 0; background-image: var(--bc-img); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 1; z-index: -1; transition: transform .8s var(--silk); } .bc-bg::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.58); pointer-events: none; } .bc.bc-has-img:hover .bc-bg { transform: scale(1.04); } .bc.bc-has-img, .bc.bc-has-img .bi, .bc.bc-has-img .bn, .bc.bc-has-img .bd { color: #fff; } .bc.bc-has-img .bd { color: rgba(255,255,255,.9); } [data-theme="light"] .bc.bc-has-img, [data-theme="light"] .bc.bc-has-img .bi, [data-theme="light"] .bc.bc-has-img .bn, [data-theme="light"] .bc.bc-has-img .bd { color: #fff; } [data-theme="light"] .bc.bc-has-img .bd { color: rgba(255,255,255,.9); } /* ── Guide library cards (.gi.gi-has-img) ────────────────────────────────── */ /* PHP no longer emits an inline linear-gradient for image-having guides (only --gi-img is shipped), so we can set the image background cleanly without !important overrides or background-color resets. */ .gi.gi-has-img { background-image: var(--gi-img); background-size: cover; background-position: center; background-repeat: no-repeat; } .gi.gi-has-img::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); pointer-events: none; z-index: 1; } /* Badges stay absolute-positioned at bottom-left of the image area (original design), with z-index above the ::after overlay so they render on top. Previously they were overridden to `position: relative` which made them flow at the TOP of the image div and get clipped by the card's `overflow: hidden` boundary (visible in screenshot). */ .gi.gi-has-img .g-bgs { z-index: 2; } .gi.gi-has-img .gi-ph { position: relative; z-index: 2; color: #fff; } /* Mobile — preserve aspect / no overflow */ @media (max-width: 768px) { .twc-bg, .kc-bg, .bc-bg { background-position: center 30%; } } /* ── Prophet Teaching cards (.to) — canonical reference pattern ──────────── */ .to-bg-img { position: absolute; inset: 0; background-image: var(--to-img); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 1; transition: transform .8s var(--silk); pointer-events: none; } .to.to-has-img:hover .to-bg-img { transform: scale(1.06); } .to.to-has-img::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: rgba(0, 0, 0, 0.45); } @media (max-width: 768px) { .to-bg-img { background-position: center 30%; } } /* ── CTA cards with brand logo images (.cta-img.cta-img--logo) ───────────── */ /* Each logo image already includes its own brand background (Mahad yellow, YouTube red, Sarhaan white). Use background-size: cover so the entire panel fills with the brand color and the centered logo shows naturally. */ .cta-img.cta-img--logo { background-image: var(--cta-img); background-size: cover; background-position: center; background-repeat: no-repeat; font-size: 0; /* hide any leftover text node space */ } /* ═══════════════════════════════════════════════════════════════════════════ SACRED JOURNEY LAYER — Refinement Pass ─────────────────────────────────────────────────────────────────────────── Three components, all additive overlays. No section markup is touched. 1. .sj-spy — top-center scroll spy 2. .sj-spine — right-side architectural spine (one unified structure with embedded nodes + continuous fill line) 3. #journey-overlay-root — runtime chapter divider overlay system, driven entirely by the JourneyDividers JS module (no markup is rendered into section DOM) Principle: continuity of consciousness. Soft transitions, atmospheric blending, no hard cuts, no flashy animations. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Atmospheric body ambient (preserved from prior pass) ────────────────── */ body.sj-zone-arrival { --sj-amb: rgba(212,175,55,.04); } body.sj-zone-belief { --sj-amb: rgba(212,175,55,.05); } body.sj-zone-purification { --sj-amb: rgba(70,130,180,.04); } body.sj-zone-worship { --sj-amb: rgba(212,175,55,.06); } body.sj-zone-revelation { --sj-amb: rgba(180,140,80,.05); } body.sj-zone-character { --sj-amb: rgba(120,90,150,.04); } body.sj-zone-community { --sj-amb: rgba(212,175,55,.05); } body::after { content: ''; position: fixed; inset: 0; z-index: 1; background: radial-gradient(ellipse 90% 60% at 50% 50%, var(--sj-amb, transparent) 0%, transparent 70%); pointer-events: none; transition: background 1.8s cubic-bezier(.4,0,.2,1); } /* ── 1. TOP SCROLL SPY — center-top chapter whisper ──────────────────────── */ .sj-spy { position: fixed; top: 18px; left: 50%; transform: translateX(-50%) translateY(-2px); z-index: 88; display: inline-flex; align-items: center; gap: 9px; padding: 6px 16px; background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(10px) saturate(120%); -webkit-backdrop-filter: blur(10px) saturate(120%); border: 1px solid rgba(212,175,55,.16); border-radius: 20px; font-family: var(--ff-u); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--tx3); opacity: 0; pointer-events: none; transition: opacity .9s cubic-bezier(.4,0,.2,1), transform .9s cubic-bezier(.4,0,.2,1); white-space: nowrap; max-width: calc(100vw - 32px); } .sj-spy.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); } .sj-spy-glyph { color: var(--gold); font-size: .72rem; transition: color .9s cubic-bezier(.4,0,.2,1); } .sj-spy-label { overflow: hidden; text-overflow: ellipsis; } /* Label-text cross-fade — JS toggles .is-changing while swapping text */ .sj-spy.is-changing .sj-spy-label, .sj-spy.is-changing .sj-spy-glyph { opacity: 0; transition: opacity .35s cubic-bezier(.4,0,.2,1); } [data-theme="light"] .sj-spy { border-color: rgba(29,107,112,.18); } [data-theme="light"] .sj-spy-glyph { color: var(--teal-lt); } /* ── 2. RIGHT-SIDE SPINE — single continuous architectural structure ────── */ .sj-spine { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 90; display: flex; flex-direction: column; align-items: center; pointer-events: none; } .sj-spine * { pointer-events: auto; } /* The container itself is the architectural ornament — translucent rounded capsule with subtle inner glow, like a sacred relic. */ .sj-spine-track { position: relative; display: flex; flex-direction: column; align-items: center; padding: 20px 8px; background: color-mix(in srgb, var(--bg) 60%, transparent); backdrop-filter: blur(12px) saturate(115%); -webkit-backdrop-filter: blur(12px) saturate(115%); border: 1px solid rgba(212,175,55,.16); border-radius: 24px; box-shadow: 0 8px 32px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04); transition: background 1.2s cubic-bezier(.4,0,.2,1), border-color 1.2s cubic-bezier(.4,0,.2,1); } [data-theme="light"] .sj-spine-track { background: color-mix(in srgb, var(--bg) 78%, transparent); border-color: rgba(29,107,112,.18); box-shadow: 0 8px 32px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.6); } /* The continuous vertical thread runs through the spine from top to bottom. It has two layers: a faint base track + a gold fill that grows downward as the user descends through the journey. */ .sj-spine-fill { position: absolute; left: 50%; top: 26px; bottom: 26px; width: 1px; transform: translateX(-50%); background: linear-gradient(180deg, rgba(212,175,55,.28) 0%, rgba(212,175,55,.28) var(--sj-fill, 0%), rgba(212,175,55,.08) var(--sj-fill, 0%), rgba(212,175,55,.08) 100%); transition: background 1.4s cubic-bezier(.4,0,.2,1); z-index: 0; } [data-theme="light"] .sj-spine-fill { background: linear-gradient(180deg, rgba(29,107,112,.36) 0%, rgba(29,107,112,.36) var(--sj-fill, 0%), rgba(29,107,112,.12) var(--sj-fill, 0%), rgba(29,107,112,.12) 100%); } /* Stage nodes — embedded INTO the spine. Each is a clickable button but visually integrated into the track. */ .sj-spine-nodes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; position: relative; z-index: 1; } .sj-node-li { display: flex; justify-content: center; } .sj-node-btn { display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; cursor: pointer; padding: 0; position: relative; } .sj-node-glyph { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); border: 1px solid rgba(212,175,55,.22); color: rgba(212,175,55,.5); font-size: .64rem; transition: color 1.2s cubic-bezier(.4,0,.2,1), border-color 1.2s cubic-bezier(.4,0,.2,1), background 1.2s cubic-bezier(.4,0,.2,1), box-shadow 1.2s cubic-bezier(.4,0,.2,1); } [data-theme="light"] .sj-node-glyph { border-color: rgba(29,107,112,.26); color: rgba(29,107,112,.55); } .sj-node-tip { position: absolute; right: calc(100% + 14px); top: 50%; transform: translateY(-50%) translateX(6px); padding: 4px 10px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(212,175,55,.16); border-radius: 4px; font-family: var(--ff-u); font-size: .54rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tx3); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .55s cubic-bezier(.4,0,.2,1), transform .55s cubic-bezier(.4,0,.2,1); } .sj-node-btn:hover .sj-node-tip, .sj-node-btn:focus-visible .sj-node-tip { opacity: 1; transform: translateY(-50%) translateX(0); } [data-theme="light"] .sj-node-tip { border-color: rgba(29,107,112,.2); } /* Active state — the glyph glows softly; no scale jumps, no bouncing */ .sj-node-li.is-active .sj-node-glyph { color: var(--gold); border-color: var(--gold); background: rgba(212,175,55,.12); box-shadow: 0 0 14px rgba(212,175,55,.32), inset 0 0 6px rgba(212,175,55,.18); } .sj-node-li.is-visited .sj-node-glyph { color: rgba(212,175,55,.7); border-color: rgba(212,175,55,.4); } [data-theme="light"] .sj-node-li.is-active .sj-node-glyph { color: var(--teal-lt); border-color: var(--teal-lt); background: rgba(29,107,112,.1); box-shadow: 0 0 14px rgba(29,107,112,.25), inset 0 0 6px rgba(29,107,112,.15); } [data-theme="light"] .sj-node-li.is-visited .sj-node-glyph { color: rgba(29,107,112,.7); border-color: rgba(29,107,112,.45); } /* Mobile toggle hidden on desktop */ .sj-spine-toggle { display: none; } /* ── 3. CHAPTER DRIFTS — REMOVED ────────────────────────────────────────── The old .sj-drifts fixed-position fade-in cards have been replaced by the JourneyDividers runtime overlay system. See #journey-overlay-root rules below and the JourneyDividers module in assets/js/main.js. ───────────────────────────────────────────────────────────────────────── */ /* ── Mobile — compact spine, top spy stays readable ──────────────────────── */ @media (max-width: 768px) { .sj-spine { right: 10px; /* Slight inset from edge; spine sits compact */ } .sj-spine-track { padding: 12px 6px; border-radius: 18px; } .sj-spine-fill { top: 18px; bottom: 18px; } .sj-spine-nodes { gap: 12px; } .sj-node-glyph { width: 16px; height: 16px; font-size: .54rem; } .sj-node-tip { display: none; } /* tooltips would overflow viewport */ /* Collapsed state — minimal, just a single thread + dot */ .sj-spine.is-collapsed .sj-spine-nodes { display: none; } .sj-spine.is-collapsed .sj-spine-fill { display: none; } .sj-spine.is-collapsed .sj-spine-track { padding: 4px; } .sj-spine-toggle { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-top: 6px; padding: 0; border: 1px solid rgba(212,175,55,.22); border-radius: 50%; background: transparent; color: var(--gold); font-size: .6rem; cursor: pointer; transition: transform .5s cubic-bezier(.4,0,.2,1); } [data-theme="light"] .sj-spine-toggle { border-color: rgba(29,107,112,.26); color: var(--teal-lt); } /* Top spy a touch tighter on mobile */ .sj-spy { top: 12px; font-size: .52rem; letter-spacing: .14em; padding: 5px 12px; } .sj-spy-glyph { font-size: .64rem; } } /* ── Reduced motion — respect user preference ────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .sj-spy, .sj-spine-track, .sj-spine-fill, .sj-node-glyph, .sj-node-tip, body::after { transition: none !important; animation: none !important; } } /* ═══════════════════════════════════════════════════════════════════════════ JOURNEY DIVIDER OVERLAY (runtime, JS-driven) ─────────────────────────────────────────────────────────────────────────── Pure ephemeral overlay layer for sacred chapter dividers. The HTML root (#journey-overlay-root) is created ONCE by the JourneyDividers JS module and stays empty until a divider state fires. When firing, the module updates the inner content (.journey-divider-overlay) and toggles .active to fade in. Fading out removes .active; content stays until next show(). Strict properties: - position: fixed (never affects layout flow) - pointer-events: none (never blocks scroll/clicks) - z-index above the page atmospheric overlay, below the navbar - opacity + transform only — no layout shifts, no scroll height changes - all transitions are CSS — JS only toggles classes ═══════════════════════════════════════════════════════════════════════════ */ #journey-overlay-root { position: fixed; inset: 0; z-index: 92; pointer-events: none; /* The container itself is invisible — only its child .journey-divider-overlay renders content. */ } .journey-divider-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, calc(-50% + 14px)); width: min(640px, 90vw); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 28px 28px; opacity: 0; pointer-events: none; /* Soft atmospheric backdrop — translucent so the section below stays visible through the overlay. NEVER full opaque. */ background: radial-gradient( ellipse 100% 70% at 50% 50%, color-mix(in srgb, var(--bg) 78%, transparent) 0%, color-mix(in srgb, var(--bg) 40%, transparent) 55%, transparent 100% ); backdrop-filter: blur(8px) saturate(115%); -webkit-backdrop-filter: blur(8px) saturate(115%); transition: opacity 1.0s cubic-bezier(.4,0,.2,1), transform 1.4s cubic-bezier(.4,0,.2,1); } .journey-divider-overlay.active { opacity: 1; transform: translate(-50%, -50%); } /* Typography hierarchy — sacred phrase, large title, descriptor */ .journey-divider-overlay .phrase { display: inline-flex; align-items: center; gap: 9px; font-family: var(--ff-u); font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); text-shadow: 0 1px 12px color-mix(in srgb, var(--bg) 75%, transparent); } .journey-divider-overlay .phrase-glyph { font-size: .95rem; color: var(--gold); filter: drop-shadow(0 0 12px rgba(212,175,55,.35)); } .journey-divider-overlay .title { font-family: var(--ff-d); font-size: clamp(1.8rem, 4.2vw, 2.8rem); font-weight: 600; color: var(--tx); line-height: 1.08; margin: 2px 0; /* Stencil halo for WCAG contrast against any underlying section */ text-shadow: 0 2px 20px color-mix(in srgb, var(--bg) 80%, transparent), 0 1px 6px color-mix(in srgb, var(--bg) 70%, transparent); } .journey-divider-overlay .desc { font-family: var(--ff-b); font-style: italic; font-size: clamp(.92rem, 1.5vw, 1.05rem); color: var(--tx2); max-width: 38ch; line-height: 1.55; margin: 0; text-shadow: 0 1px 10px color-mix(in srgb, var(--bg) 70%, transparent); } /* Light theme — atmospheric tone adjustments */ [data-theme="light"] .journey-divider-overlay .phrase, [data-theme="light"] .journey-divider-overlay .phrase-glyph { color: var(--gold); } [data-theme="light"] .journey-divider-overlay .title { color: var(--tx); } [data-theme="light"] .journey-divider-overlay .desc { color: var(--tx2); } /* The "ease" divider (Quran 94:6) — special treatment: title is the verse itself, so center it with more breathing room and a moon glyph emphasis. */ .journey-divider-overlay[data-key="ease"] .title { font-style: italic; font-size: clamp(1.5rem, 3.6vw, 2.2rem); } .journey-divider-overlay[data-key="ease"] .phrase-glyph { font-size: 1.15rem; } /* Mobile compact */ @media (max-width: 768px) { .journey-divider-overlay { width: min(92vw, 480px); padding: 22px 20px; gap: 10px; } .journey-divider-overlay .phrase { font-size: .54rem; letter-spacing: .2em; } .journey-divider-overlay .title { font-size: clamp(1.4rem, 6vw, 2rem); } .journey-divider-overlay .desc { font-size: clamp(.85rem, 3.5vw, 1rem); max-width: 32ch; } } /* Reduced motion — instant on/off, no drift */ @media (prefers-reduced-motion: reduce) { .journey-divider-overlay { transition: opacity .2s linear !important; transform: translate(-50%, -50%) !important; } }