:root{ --bg:#07090d;--panel:rgba(13,16,22,.76);--panel2:rgba(18,22,29,.84); --line:rgba(255,255,255,.11);--line2:rgba(255,255,255,.2); --text:#f5f7fa;--muted:#a9b0bb;--soft:#737b87;--accent:#dfe5eb;--silver:#9da6b1; --shadow:0 28px 80px rgba(0,0,0,.48) } *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:"Tajawal",system-ui,sans-serif;overflow-x:hidden} a{color:inherit;text-decoration:none}button,input{font:inherit}.cinematic-page{min-height:100vh}.cinematic-page::selection{background:#dce2e8;color:#080a0d} .cinematic-bg{position:fixed;inset:0;z-index:-5;background:#06080c;overflow:hidden} .cinematic-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.64) contrast(1.08) brightness(.48);transform:scale(1.02)} .cinematic-vignette{position:absolute;inset:0;background: radial-gradient(circle at 72% 30%,rgba(200,215,230,.09),transparent 24%), linear-gradient(90deg,rgba(5,7,11,.95) 0%,rgba(5,7,11,.77) 35%,rgba(6,8,12,.39) 65%,rgba(5,7,11,.72) 100%), linear-gradient(180deg,rgba(5,7,10,.24),rgba(6,8,12,.36) 55%,#07090d 100%)} .cinematic-grid{position:absolute;inset:0;opacity:.16;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to bottom,black,transparent 88%)} .starfield{position:absolute;inset:0;overflow:hidden;pointer-events:none} .star{position:absolute;width:2px;height:2px;background:white;border-radius:50%;opacity:.25;animation:twinkle var(--dur,4s) ease-in-out infinite var(--delay,0s);box-shadow:0 0 8px rgba(255,255,255,.9)} .star.big{width:3px;height:3px}.star.cross{width:1px;height:10px;border-radius:1px;box-shadow:none;background:linear-gradient(transparent,#fff,transparent)} .star.cross:after{content:"";position:absolute;width:10px;height:1px;left:-4.5px;top:4.5px;background:linear-gradient(90deg,transparent,#fff,transparent)} @keyframes twinkle{0%,100%{opacity:.14;transform:scale(.65)}50%{opacity:.85;transform:scale(1.28)}} .page-wipe{position:fixed;inset:0;z-index:9999;background:#07090d;display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s} .page-wipe.show{opacity:1;visibility:visible}.wipe-mark{display:flex;gap:18px;align-items:center;color:#d9dfe5;letter-spacing:.38em}.wipe-mark span{animation:spinStar 1.2s linear infinite}@keyframes spinStar{to{transform:rotate(180deg)}} .site-header{position:fixed;z-index:100;top:14px;left:50%;transform:translateX(-50%);width:min(94%,1480px);height:72px;display:grid;grid-template-columns:260px 1fr 260px;align-items:center;padding:0 18px;border:1px solid var(--line);border-radius:20px;background:rgba(8,10,14,.66);backdrop-filter:blur(22px) saturate(1.1);box-shadow:0 14px 50px rgba(0,0,0,.24)} .site-brand{display:flex;align-items:center;gap:12px;justify-self:start}.brand-orbit{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;background:rgba(255,255,255,.04);position:relative} .brand-orbit:before{content:"✦";position:absolute;top:-7px;right:-3px;font-size:10px;color:#e8edf2}.brand-orbit img{width:36px;height:36px;border-radius:50%;object-fit:cover}.brand-copy{display:flex;flex-direction:column;line-height:1.12}.brand-copy strong{font-size:15px}.brand-copy small{font-size:9px;color:#87909b;letter-spacing:.18em;margin-top:5px} .site-nav{display:flex;gap:5px;justify-content:center}.site-nav a{padding:11px 15px;border-radius:12px;color:#aeb5be;font-size:14px;position:relative;transition:.25s}.site-nav a:hover{color:#fff;background:rgba(255,255,255,.05)}.site-nav a.active{color:#fff;background:rgba(255,255,255,.07)}.site-nav a.active:after{content:"✦";position:absolute;bottom:-17px;left:50%;transform:translateX(-50%);font-size:8px;color:#e3e8ed} .header-actions{display:flex;gap:8px;align-items:center;justify-self:end}.discord-chip,.play-chip{height:40px;padding:0 13px;border-radius:11px;border:1px solid var(--line);display:flex;align-items:center;gap:8px;font-size:12px;color:#c4cad1;background:rgba(255,255,255,.04);transition:.25s}.play-chip{background:#e8edf2;color:#080a0d;font-weight:800;border-color:#fff}.play-chip:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(255,255,255,.13)}.play-chip i{width:7px;height:7px;border-radius:50%;background:#0a0d10;box-shadow:0 0 0 4px rgba(10,13,16,.1)} .site-menu{display:none;width:40px;height:40px;border-radius:11px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:white;cursor:pointer} .hero-pro{width:min(1440px,92%);min-height:100vh;margin:auto;padding:135px 0 78px;display:grid;grid-template-columns:1.07fr .93fr;align-items:center;gap:40px}.hero-copy-pro{max-width:760px}.hero-badge,.eyebrow{display:inline-flex;align-items:center;gap:12px;color:#c8ced5;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}.hero-badge{padding:8px 13px;border:1px solid var(--line);border-radius:99px;background:rgba(10,12,16,.35);backdrop-filter:blur(10px)}.hero-badge span,.eyebrow i{font-style:normal;color:#f4f7fa;font-size:9px} .hero-rule{display:flex;align-items:center;gap:12px;margin:28px 0 10px;color:#7e8792;font-size:10px;letter-spacing:.3em}.hero-rule i{display:block;width:52px;height:1px;background:linear-gradient(90deg,transparent,#7e8792)}.hero-rule i:last-child{background:linear-gradient(90deg,#7e8792,transparent)} .hero-pro h1{font-size:clamp(72px,8.9vw,138px);line-height:.85;margin:0;letter-spacing:-.055em;font-weight:900;text-shadow:0 20px 70px rgba(0,0,0,.48)}.hero-pro h1 em,.section-intro h2 em,.inner-hero h1 em{font-style:normal;color:transparent;background:linear-gradient(180deg,#fff,#9ba5b0 72%,#656e79);-webkit-background-clip:text;background-clip:text}.hero-pro p{max-width:670px;color:#b8bfc8;font-size:18px;line-height:2;margin:30px 0 30px;text-shadow:0 2px 18px rgba(0,0,0,.85)} .hero-actions{display:flex;flex-wrap:wrap;gap:12px}.primary-cta,.ghost-cta{min-height:52px;padding:0 22px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:800;font-size:14px;transition:.25s}.primary-cta{background:#eff3f6;color:#080b0e;box-shadow:0 18px 50px rgba(0,0,0,.28)}.primary-cta:hover{transform:translateY(-3px);box-shadow:0 18px 45px rgba(235,240,245,.15)}.ghost-cta{border:1px solid var(--line2);background:rgba(10,12,16,.42);backdrop-filter:blur(12px);color:#e4e8ec}.pulse-dot{width:8px;height:8px;border-radius:50%;background:#0c1014;box-shadow:0 0 0 0 rgba(0,0,0,.34);animation:pulse 1.7s infinite}@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(0,0,0,0)}} .hero-stats{display:flex;align-items:center;gap:24px;margin-top:42px;color:#8e97a2}.hero-stats>i{width:1px;height:34px;background:var(--line)}.hero-stats div{display:flex;flex-direction:column}.hero-stats b{color:#e9edf1;font-size:13px;letter-spacing:.1em}.hero-stats span{font-size:11px;margin-top:4px} .hero-emblem-pro{position:relative;min-height:580px;display:grid;place-items:center}.hero-emblem-pro img{width:min(430px,76%);aspect-ratio:1;border-radius:50%;object-fit:cover;filter:grayscale(1) contrast(1.08) drop-shadow(0 40px 90px rgba(0,0,0,.7));z-index:2}.emblem-halo{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.12)}.halo-a{width:510px;height:510px}.halo-b{width:600px;height:600px;border-style:dashed;animation:rotateHalo 35s linear infinite}@keyframes rotateHalo{to{transform:rotate(360deg)}}.emblem-halo:before,.emblem-halo:after{content:"✦";position:absolute;color:#eef2f5;font-size:10px}.emblem-halo:before{top:9%;right:16%}.emblem-halo:after{bottom:9%;left:16%}.emblem-stars span{position:absolute;z-index:3;color:#e9edf1}.emblem-stars span:nth-child(1){top:13%;left:19%;font-size:16px}.emblem-stars span:nth-child(2){top:29%;right:10%;font-size:12px}.emblem-stars span:nth-child(3){bottom:22%;left:8%;font-size:11px}.emblem-stars span:nth-child(4){bottom:12%;right:24%;font-size:16px}.emblem-caption{position:absolute;bottom:7%;display:flex;gap:12px;align-items:center;color:#a3abb5;font-size:10px;letter-spacing:.3em}.emblem-caption i{width:44px;height:1px;background:#6d7580} .destinations-pro,.rules-stage,.store-stage,.guide-content{position:relative;z-index:2}.destinations-pro{padding:120px max(4%,calc((100vw - 1440px)/2));background:linear-gradient(180deg,rgba(7,9,13,.96),#07090d)}.section-intro{text-align:center;max-width:780px;margin:0 auto 55px}.section-intro h2{font-size:clamp(42px,5vw,74px);line-height:1.05;margin:18px 0 15px;letter-spacing:-.04em}.section-intro p{color:#949da8;font-size:15px;line-height:1.9} .feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.feature-card{min-height:350px;border:1px solid var(--line);border-radius:24px;padding:28px;background:linear-gradient(145deg,rgba(18,22,29,.9),rgba(10,13,18,.9));position:relative;overflow:hidden;transition:.35s;box-shadow:0 20px 55px rgba(0,0,0,.16)}.feature-card:before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(220,228,235,.12),transparent 68%);top:-90px;left:-80px;opacity:0;transition:.35s}.feature-card:hover{transform:translateY(-8px);border-color:rgba(255,255,255,.24);box-shadow:var(--shadow)}.feature-card:hover:before{opacity:1}.card-index{position:absolute;left:25px;top:22px;font-size:11px;color:#626b77;letter-spacing:.2em}.card-icon{width:58px;height:58px;border-radius:18px;border:1px solid var(--line);display:grid;place-items:center;font-size:26px;background:rgba(255,255,255,.035);margin:36px 0 34px}.feature-card small{font-size:9px;letter-spacing:.26em;color:#6f7883}.feature-card h3{font-size:28px;margin:10px 0}.feature-card p{color:#959ea9;line-height:1.9;min-height:76px}.feature-card b{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:18px;margin-top:24px;font-size:13px} .rules-stage{background:#07090d;padding:115px max(4%,calc((100vw - 1440px)/2))}.rules-layout{display:grid;grid-template-columns:290px 1fr;gap:22px;align-items:start}.sidebar{position:sticky;top:105px;border:1px solid var(--line);border-radius:20px;padding:15px;background:rgba(13,16,22,.78);backdrop-filter:blur(14px);max-height:calc(100vh - 130px);overflow:auto}.sidebar-title{font-size:11px;color:#7d8692;padding:10px 10px 15px;border-bottom:1px solid var(--line);margin-bottom:8px}.nav-item{width:100%;border:0;background:transparent;color:#a5adb7;display:flex;justify-content:space-between;align-items:center;padding:11px 12px;border-radius:11px;text-align:right;cursor:pointer;transition:.2s}.nav-item:hover,.nav-item.active{background:rgba(255,255,255,.065);color:#fff}.nav-item small{background:rgba(255,255,255,.07);padding:3px 7px;border-radius:7px;color:#7d8691}.tools{display:flex;gap:12px;align-items:center;margin-bottom:18px;position:sticky;top:104px;z-index:5}.search-box{flex:1;height:54px;border:1px solid var(--line);border-radius:15px;background:rgba(13,16,22,.88);backdrop-filter:blur(16px);display:flex;align-items:center;gap:12px;padding:0 15px}.search-box input{flex:1;background:transparent;border:0;outline:0;color:white;font-size:14px}.search-box kbd{font-size:9px;color:#68717c;border:1px solid var(--line);padding:4px 7px;border-radius:6px}.result-count{font-size:11px;color:#8e97a2;white-space:nowrap}.rule-section{scroll-margin-top:220px;margin-bottom:22px}.section-heading{display:flex;justify-content:space-between;align-items:center;padding:0 5px 12px}.section-heading h2{font-size:22px;margin:0}.section-heading span{font-size:10px;color:#747d89}.rules-card{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:rgba(12,15,20,.82)}.rule-row{display:grid;grid-template-columns:64px 1fr;gap:0;border-bottom:1px solid rgba(255,255,255,.07);min-height:65px}.rule-row:last-child{border-bottom:0}.rule-number{display:grid;place-items:center;color:#d6dce2;border-left:1px solid rgba(255,255,255,.07);font-weight:800}.rule-text{padding:18px 20px;color:#b0b7c0;line-height:1.75;font-size:14px}.highlight{background:#e8edf2;color:#090c0f;border-radius:3px;padding:0 2px}.empty-state,.empty-pro{text-align:center;padding:70px 20px;color:#8f98a3}.empty-state div,.empty-pro span{font-size:34px}.empty-state h3,.empty-pro h3{color:#fff} .inner-page .cinematic-bg video{filter:saturate(.58) contrast(1.08) brightness(.37)}.inner-hero{width:min(1440px,92%);min-height:620px;margin:auto;padding:150px 0 80px;display:grid;grid-template-columns:1fr 340px;align-items:center;gap:40px}.inner-hero-copy{max-width:850px}.inner-hero h1{font-size:clamp(58px,7vw,104px);line-height:.92;margin:22px 0;letter-spacing:-.045em}.inner-hero p{color:#aeb6bf;font-size:17px;line-height:2;max-width:710px}.inner-symbol{height:300px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;align-content:center;gap:15px;background:radial-gradient(circle,rgba(255,255,255,.07),transparent 64%);box-shadow:inset 0 0 60px rgba(255,255,255,.025);position:relative}.inner-symbol:before,.inner-symbol:after{content:"✦";position:absolute;color:#dce2e8}.inner-symbol:before{top:22px}.inner-symbol:after{bottom:22px}.inner-symbol span{font-size:70px}.inner-symbol b{font-size:10px;letter-spacing:.42em;color:#7f8893} .guide-toolbar{position:sticky;top:100px;z-index:20;width:min(1180px,92%);margin:-25px auto 45px;display:grid;grid-template-columns:1fr 120px;gap:12px}.guide-search-pro,.guide-result{min-height:62px;border:1px solid var(--line);background:rgba(10,13,18,.88);backdrop-filter:blur(18px);border-radius:17px;display:flex;align-items:center}.guide-search-pro{padding:0 15px;gap:12px}.guide-search-pro input{flex:1;background:transparent;border:0;outline:0;color:white}.guide-search-pro button{border:1px solid var(--line);background:rgba(255,255,255,.04);color:#9ba4ae;border-radius:9px;padding:7px 10px;cursor:pointer}.guide-result{justify-content:center;flex-direction:column}.guide-result small{font-size:9px;color:#6f7884}.guide-result b{font-size:18px;margin-top:2px}.guide-content{width:min(1440px,92%);margin:0 auto;padding:20px 0 110px}.guide-group{margin-bottom:70px}.group-heading{display:flex;align-items:center;gap:14px;margin-bottom:22px}.group-heading>span{font-size:10px;color:#69727d;letter-spacing:.2em}.group-heading h2{font-size:27px;margin:0}.group-heading i{height:1px;flex:1;background:linear-gradient(90deg,var(--line2),transparent)}.place-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.place-card{min-height:260px;border:1px solid var(--line);border-radius:19px;padding:20px;background:linear-gradient(145deg,rgba(18,22,29,.84),rgba(10,13,18,.88));position:relative;overflow:hidden;transition:.28s}.place-card:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.22);box-shadow:0 22px 55px rgba(0,0,0,.25)}.place-card.is-hidden{display:none}.guide-group.is-empty{display:none}.place-top{display:flex;justify-content:space-between;color:#65707b;font-size:10px}.place-star{color:#e2e7ec}.place-icon{font-size:25px;margin:28px 0 18px;color:#dbe1e7}.place-card small{color:#65707b;font-size:9px}.place-card h3{font-size:20px;margin:7px 0 9px}.place-card p{font-size:13px;line-height:1.8;color:#929ca7;margin:0} .store-stage{width:min(1360px,92%);margin:0 auto;padding:0 0 120px}.store-note{border:1px solid var(--line);border-radius:17px;padding:18px 22px;background:rgba(13,16,22,.82);display:flex;gap:15px;align-items:flex-start;margin-bottom:18px}.store-note>span{font-size:18px}.store-note b{font-size:13px}.store-note p{margin:5px 0 0;color:#8f98a3;font-size:12px}.store-pro-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.store-pro-card{border:1px solid var(--line);border-radius:25px;padding:27px;background:linear-gradient(145deg,rgba(18,22,29,.9),rgba(10,13,18,.91));min-height:430px;display:flex;flex-direction:column;transition:.3s}.store-pro-card:hover{transform:translateY(-7px);border-color:rgba(255,255,255,.22);box-shadow:var(--shadow)}.store-card-mark{display:flex;justify-content:space-between;color:#66707b;font-size:9px;letter-spacing:.18em}.store-logo{width:98px;height:98px;margin:38px 0 24px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;background:rgba(255,255,255,.025)}.store-logo img{width:82px;height:82px;border-radius:50%;object-fit:cover;filter:grayscale(1)}.support-star{font-size:36px}.store-pro-card h2{font-size:28px;margin:0 0 10px}.store-pro-card p{color:#929ba6;line-height:1.9;font-size:14px;flex:1}.store-pro-card>a{border-top:1px solid var(--line);padding-top:17px;margin-top:26px;display:flex;justify-content:space-between;font-size:13px;font-weight:800} .site-footer{background:#06080b;border-top:1px solid var(--line);padding:42px max(4%,calc((100vw - 1440px)/2)) 28px;position:relative;z-index:2}.footer-line{display:flex;align-items:center;justify-content:center;gap:14px;color:#dce2e8;margin-bottom:30px}.footer-line i{height:1px;width:90px;background:linear-gradient(90deg,transparent,#6e7782,transparent)}.footer-line span{font-size:8px}.footer-inner{display:flex;align-items:center;justify-content:space-between;color:#7f8994;font-size:11px}.footer-brand{display:flex;align-items:center;gap:10px}.footer-brand img{width:42px;height:42px;border-radius:50%;filter:grayscale(1)}.footer-brand div{display:flex;flex-direction:column}.footer-brand strong{color:#d9dfe5;font-size:13px}.footer-brand small{margin-top:3px}.to-top{position:fixed;left:24px;bottom:24px;z-index:50;width:44px;height:44px;border:1px solid var(--line);border-radius:13px;background:rgba(12,15,20,.82);backdrop-filter:blur(14px);color:white;opacity:0;transform:translateY(15px);pointer-events:none;transition:.25s}.to-top.show{opacity:1;transform:none;pointer-events:auto}.notfound{min-height:100vh;display:grid;place-items:center;align-content:center;text-align:center;padding:120px 20px}.notfound>b{font-size:130px;line-height:1}.notfound>span{font-size:25px}.notfound h1{font-size:34px;margin:10px}.notfound p{color:#919aa5} .reveal{opacity:0;transform:translateY(24px);transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1)}.reveal.in{opacity:1;transform:none}.delay-1{transition-delay:.08s}.delay-2{transition-delay:.16s} @media(max-width:1100px){ .site-header{grid-template-columns:220px 1fr 210px}.discord-chip{display:none} .hero-pro{grid-template-columns:1fr}.hero-emblem-pro{min-height:460px}.hero-emblem-pro img{width:350px}.halo-a{width:420px;height:420px}.halo-b{width:480px;height:480px} .place-grid{grid-template-columns:repeat(3,1fr)}.store-pro-grid{grid-template-columns:1fr 1fr}.store-pro-card:last-child{grid-column:1/-1} } @media(max-width:820px){ .site-header{grid-template-columns:1fr auto;height:64px}.brand-copy small{display:none}.site-nav{position:absolute;top:72px;left:0;right:0;display:none;flex-direction:column;padding:10px;background:rgba(8,10,14,.96);border:1px solid var(--line);border-radius:16px;backdrop-filter:blur(20px)}.site-nav.open{display:flex}.site-nav a.active:after{display:none}.site-menu{display:block}.play-chip{display:none} .hero-pro{padding-top:120px}.hero-pro h1{font-size:78px}.hero-pro p{font-size:16px}.hero-emblem-pro{min-height:390px}.hero-emblem-pro img{width:280px}.halo-a{width:330px;height:330px}.halo-b{width:380px;height:380px} .feature-grid{grid-template-columns:1fr}.feature-card{min-height:280px}.rules-layout{grid-template-columns:1fr}.sidebar{position:relative;top:auto;max-height:none}.tools{top:90px} .inner-hero{grid-template-columns:1fr;min-height:auto;padding-top:140px}.inner-symbol{height:220px;width:220px}.place-grid{grid-template-columns:repeat(2,1fr)}.guide-toolbar{top:88px}.store-pro-grid{grid-template-columns:1fr}.store-pro-card:last-child{grid-column:auto} } @media(max-width:540px){ .site-header{top:9px;width:95%;padding:0 10px}.site-brand{gap:8px}.brand-orbit{width:40px;height:40px}.brand-orbit img{width:31px;height:31px}.brand-copy strong{font-size:13px}.header-actions{gap:5px} .hero-pro{width:90%;padding-top:118px}.hero-pro h1{font-size:57px}.hero-rule{display:none}.hero-stats{gap:14px;justify-content:space-between}.hero-stats span{font-size:9px}.hero-emblem-pro{min-height:330px}.hero-emblem-pro img{width:220px}.halo-a{width:265px;height:265px}.halo-b{width:305px;height:305px} .destinations-pro,.rules-stage{padding-left:5%;padding-right:5%}.section-intro h2{font-size:40px}.rules-layout{gap:12px}.tools{flex-direction:column;align-items:stretch}.result-count{text-align:left}.rule-row{grid-template-columns:48px 1fr}.rule-text{padding:15px;font-size:13px} .inner-hero{width:90%}.inner-hero h1{font-size:52px}.inner-symbol{width:180px;height:180px}.inner-symbol span{font-size:50px}.guide-toolbar{grid-template-columns:1fr 80px;width:90%}.guide-search-pro button{display:none}.guide-content{width:90%}.place-grid{grid-template-columns:1fr}.place-card{min-height:220px}.store-stage{width:90%} .footer-inner{flex-direction:column;gap:18px;text-align:center}.footer-line i{width:50px} } /* ========================================================= NJM ULTRA LUXURY — animated typography + premium motion ========================================================= */ :root{ --lux-1:#e8edf2; --lux-2:#aeb7c2; --lux-3:#6f7a86; --lux-4:#8a7f91; --lux-5:#9b8b73; --lux-6:#788993; --lux-speed:9s; } /* Premium animated metallic letters */ .hero-pro h1, .inner-hero h1, .section-intro h2, .feature-card h3, .place-card h3, .store-pro-card h2, .group-heading h2, .section-heading h2, .brand-copy strong, .footer-brand strong, .notfound h1{ background: linear-gradient( 110deg, #d7dde3 0%, #9ca5af 16%, #69737e 31%, #8b8290 45%, #756b5c 58%, #667985 72%, #bec5cc 88%, #7e8892 100% ); background-size:320% 320%; -webkit-background-clip:text; background-clip:text; color:transparent !important; animation:luxTextFlow var(--lux-speed) cubic-bezier(.45,.05,.55,.95) infinite; filter:drop-shadow(0 0 16px rgba(115,125,135,.08)); } @keyframes luxTextFlow{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } /* Faster shimmer for small premium labels */ .eyebrow, .hero-badge, .hero-rule b, .feature-card small, .inner-symbol b, .store-card-mark b, .place-card small, .brand-copy small, .emblem-caption span{ background:linear-gradient(90deg,#66717c,#b7bec6,#7f8994,#948b96,#8a7d6c,#73858e,#aeb5bc,#66717c); background-size:260% 100%; -webkit-background-clip:text; background-clip:text; color:transparent !important; animation:luxLabelFlow 7s linear infinite; } @keyframes luxLabelFlow{to{background-position:260% 0}} /* Animated color on interactive text without becoming "rainbow" */ .site-nav a:hover span, .site-nav a.active span, .feature-card b, .store-pro-card>a, .ghost-cta, .primary-cta:hover, .footer-line span, .place-star{ background:linear-gradient(90deg,#d8dde2,#8e99a4,#766f7b,#8f806d,#748993,#d8dde2); background-size:250% 100%; -webkit-background-clip:text; background-clip:text; color:transparent !important; animation:luxLabelFlow 6s linear infinite; } /* Aurora atmosphere */ .cinematic-bg::before, .cinematic-bg::after{ content:""; position:absolute; width:54vw; height:54vw; border-radius:50%; filter:blur(95px); opacity:.13; pointer-events:none; mix-blend-mode:screen; } .cinematic-bg::before{ top:-25vw;right:-10vw; background:radial-gradient(circle,#536273 0%,#3f3948 30%,transparent 68%); animation:auroraDriftA 18s ease-in-out infinite alternate; } .cinematic-bg::after{ left:-20vw;bottom:-30vw; background:radial-gradient(circle,#445761 0%,#4d444f 34%,#544938 54%,transparent 72%); animation:auroraDriftB 23s ease-in-out infinite alternate; } @keyframes auroraDriftA{ from{transform:translate3d(0,0,0) scale(.9)} to{transform:translate3d(-10vw,10vh,0) scale(1.18)} } @keyframes auroraDriftB{ from{transform:translate3d(0,0,0) scale(.96)} to{transform:translate3d(14vw,-8vh,0) scale(1.15)} } /* Premium glass header */ .site-header{ isolation:isolate; overflow:visible; } .site-header::before{ content:""; position:absolute; inset:-1px; border-radius:20px; padding:1px; background:linear-gradient(115deg,rgba(210,218,225,.22),rgba(109,122,136,.14),rgba(112,100,116,.16),rgba(126,108,84,.12),rgba(198,205,212,.2)); background-size:300% 300%; animation:luxBorder 11s ease infinite; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; } @keyframes luxBorder{ 0%,100%{background-position:0 50%} 50%{background-position:100% 50%} } /* Animated premium cards */ .feature-card, .place-card, .store-pro-card, .rules-card, .sidebar, .store-note, .inner-symbol{ position:relative; } .feature-card::after, .place-card::after, .store-pro-card::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background: linear-gradient(125deg,transparent 0 35%,rgba(255,255,255,.08) 46%,rgba(197,217,255,.09) 50%,rgba(255,255,255,.03) 55%,transparent 66%); background-size:250% 100%; background-position:160% 0; opacity:.65; transition:opacity .3s; animation:cardSheen 9s ease-in-out infinite; } @keyframes cardSheen{ 0%,62%,100%{background-position:160% 0} 82%{background-position:-70% 0} } .feature-card:hover::after, .place-card:hover::after, .store-pro-card:hover::after{opacity:1} /* Hover lift with soft colored edge */ .feature-card:hover, .place-card:hover, .store-pro-card:hover{ box-shadow: 0 32px 90px rgba(0,0,0,.42), 0 0 0 1px rgba(209,220,255,.08), 0 0 42px rgba(96,110,124,.09); } /* Hero logo gets rotating spectral glow */ .hero-emblem-pro::before{ content:""; position:absolute; width:72%; aspect-ratio:1; border-radius:50%; background:conic-gradient(from 0deg,transparent,#667685,transparent,#736978,transparent,#776b59,transparent,#5f747e,transparent); filter:blur(26px); opacity:.14; animation:logoAura 17s linear infinite; } @keyframes logoAura{to{transform:rotate(360deg)}} /* Star accents now richer */ .star{ background:radial-gradient(circle,#fff 0 30%,#c8d8ff 55%,transparent 72%); } .star.cross{ background:linear-gradient(transparent,#f5f7ff,transparent); } .star.cross:after{ background:linear-gradient(90deg,transparent,#e7dcff,#fff,#e7dcff,transparent); } /* Mouse luxury spotlight */ .lux-spotlight{ position:fixed; z-index:-1; width:520px; height:520px; border-radius:50%; pointer-events:none; transform:translate(-50%,-50%); background:radial-gradient(circle,rgba(94,108,122,.09),rgba(89,79,95,.035) 34%,transparent 70%); filter:blur(8px); opacity:0; transition:opacity .45s ease; } body:hover .lux-spotlight{opacity:1} /* Scroll progress */ .lux-progress{ position:fixed; z-index:1000; top:0;left:0; width:100%; height:2px; pointer-events:none; background:rgba(255,255,255,.025); } .lux-progress i{ display:block; width:0%; height:100%; background:linear-gradient(90deg,#667788,#7d7182,#8b7960,#657b84,#c4cbd1); box-shadow:0 0 14px rgba(112,126,138,.45); transition:width .08s linear; } /* Button refinement */ .primary-cta{ position:relative; overflow:hidden; background:linear-gradient(120deg,#d9dee3,#9ca6b0 34%,#7f7684 56%,#8a7b66 76%,#c5ccd2); background-size:220% 100%; animation:ctaFlow 8s linear infinite; } @keyframes ctaFlow{to{background-position:220% 0}} .primary-cta::after{ content:""; position:absolute; width:70px;height:180%; left:-100px;top:-40%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent); transform:rotate(16deg); animation:ctaShine 4.8s ease-in-out infinite; } @keyframes ctaShine{ 0%,60%{left:-110px} 82%,100%{left:calc(100% + 110px)} } /* Guide cards gain individual star constellation effect */ .place-card::before{ content:"✦"; position:absolute; left:19px; bottom:17px; font-size:8px; color:rgba(225,232,255,.45); text-shadow:22px -16px 0 rgba(242,222,255,.18),42px -2px 0 rgba(221,238,255,.13); animation:tinyPulse 4s ease-in-out infinite; } @keyframes tinyPulse{50%{opacity:.35;transform:scale(.86)}} /* Footer gets luxurious fade line */ .site-footer::before{ content:""; position:absolute; left:10%;right:10%;top:-1px;height:1px; background:linear-gradient(90deg,transparent,#647586,#756c7b,#84745f,#5f747f,transparent); background-size:250% 100%; animation:luxLabelFlow 9s linear infinite; opacity:.65; } /* Reduced motion accessibility */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important} .lux-spotlight{display:none} } /* Keep mobile premium but light */ @media(max-width:700px){ .cinematic-bg::before,.cinematic-bg::after{opacity:.075;filter:blur(70px)} .lux-spotlight{display:none} .feature-card::after,.place-card::after,.store-pro-card::after{animation-duration:14s} } /* ===== NJM DARK LUXURY OVERRIDE ===== */ body{background:#06070a} .cinematic-vignette{ background: radial-gradient(circle at 72% 30%,rgba(90,102,116,.08),transparent 25%), linear-gradient(90deg,rgba(4,5,8,.96) 0%,rgba(6,7,10,.83) 38%,rgba(8,9,12,.5) 68%,rgba(5,6,9,.8) 100%), linear-gradient(180deg,rgba(4,5,8,.34),rgba(5,6,9,.48) 55%,#06070a 100%) !important; } .site-header{ background:rgba(7,8,11,.79) !important; border-color:rgba(180,188,198,.1) !important; } .feature-card,.place-card,.store-pro-card{ background:linear-gradient(145deg,rgba(16,18,23,.94),rgba(7,9,12,.96)) !important; } .rules-card,.sidebar,.store-note,.guide-search-pro,.guide-result{ background:rgba(9,11,15,.9) !important; } .primary-cta{ color:#0b0d10 !important; box-shadow:0 14px 34px rgba(0,0,0,.34),0 0 0 1px rgba(255,255,255,.08) inset !important; } .ghost-cta{ background:rgba(8,10,13,.62) !important; border-color:rgba(160,168,178,.13) !important; } .hero-pro p,.inner-hero p,.section-intro p,.feature-card p,.place-card p,.store-pro-card p{ color:#9299a2 !important; } .section-heading{scroll-margin-top:220px} /* ===== RULES SIDEBAR STICKY FIX ===== */ .rules-stage, .rules-layout{ overflow:visible !important; } .rules-layout{ align-items:start !important; } .rules-layout .sidebar{ position:sticky !important; top:104px !important; align-self:start !important; max-height:calc(100vh - 122px) !important; overflow-y:auto !important; overflow-x:hidden !important; overscroll-behavior:contain; z-index:12; scrollbar-width:thin; } /* On desktop keep the menu following the user while reading rules. */ @media(min-width:821px){ .rules-layout .sidebar{ position:-webkit-sticky !important; position:sticky !important; top:104px !important; } } /* On mobile it becomes normal-flow to avoid consuming the viewport. */ @media(max-width:820px){ .rules-layout .sidebar{ position:relative !important; top:auto !important; max-height:none !important; overflow:visible !important; } } /* ===== NJM — REMOVE DECORATIVE CIRCLES / RINGS ===== */ /* إزالة الدوائر المحيطة بالشعار في الرئيسية */ .emblem-halo, .hero-emblem-pro::before{ display:none !important; } /* إبقاء الشعار بدون إطار دائري أو قص دائري من CSS */ .hero-emblem-pro img{ border-radius:0 !important; } /* إزالة الدائرة الصغيرة حول شعار الهيدر */ .brand-orbit{ border-radius:12px !important; border-color:rgba(255,255,255,.10) !important; background:rgba(255,255,255,.025) !important; } .brand-orbit img{ border-radius:8px !important; } /* الرموز الكبيرة في صفحات الدليل والمتجر بدل دائرة */ .inner-symbol{ border-radius:24px !important; background: linear-gradient(145deg,rgba(18,22,29,.72),rgba(8,10,14,.78)) !important; } /* شعارات بطاقات المتجر بدل الحاويات الدائرية */ .store-logo{ border-radius:20px !important; } .store-logo img{ border-radius:14px !important; } /* أي دائرة زخرفية مشابهة في البطاقات */ .feature-card::before{ border-radius:24px !important; } /* إلغاء أي حلقات/دوائر بصرية إضافية */ .emblem-halo::before, .emblem-halo::after{ display:none !important; } /* ===== NJM — REMOVE ALL DECORATIVE CIRCLES AND THEIR CONTENT ===== */ .emblem-halo, .emblem-stars, .emblem-caption, .hero-emblem-pro, .hero-emblem-pro::before, .hero-emblem-pro::after, .inner-symbol, .store-logo, .brand-orbit::before{ display:none !important; } /* بعد حذف الجزء الدائري من الهيرو، خَلِّ النص ياخذ المساحة بشكل أنظف */ .hero-pro{ grid-template-columns:1fr !important; } .hero-copy-pro{ max-width:900px !important; } /* بعد حذف رموز الدليل/المتجر */ .inner-hero{ grid-template-columns:1fr !important; } .inner-hero-copy{ max-width:920px !important; } /* لا دوائر زخرفية داخل الكروت */ .feature-card::before, .place-card::before{ border-radius:0 !important; } /* إزالة أي مظهر دائري متبقٍ من شعارات الهيدر */ .brand-orbit{ border-radius:10px !important; } .brand-orbit img{ border-radius:6px !important; } /* ===== STORE — OFFICIAL ONLY ===== */ .store-pro-grid{ grid-template-columns:minmax(0,760px) !important; justify-content:center !important; } .store-pro-card{ width:100% !important; } .store-pro-card:last-child{ grid-column:auto !important; } /* ===== RULES SIDEBAR — HIDE CATEGORY COUNTS ===== */ .sidebar .nav-item small{display:none !important;} .sidebar .nav-item{justify-content:flex-start !important;} /* ===== NJM — SERVER BUTTON MOVING COLORS ===== */ .primary-cta, .play-chip{ position:relative !important; overflow:hidden !important; background: linear-gradient( 110deg, #dfe5ea 0%, #9da8b2 18%, #686f79 34%, #817685 50%, #8c7b65 66%, #6f7f86 82%, #dfe5ea 100% ) !important; background-size:320% 100% !important; animation:njmServerButtonFlow 5s linear infinite !important; color:#090b0e !important; } .primary-cta::before, .play-chip::before{ content:"" !important; position:absolute !important; inset:0 !important; pointer-events:none !important; background:linear-gradient( 115deg, transparent 25%, rgba(255,255,255,.10) 40%, rgba(255,255,255,.40) 50%, rgba(255,255,255,.10) 60%, transparent 75% ) !important; transform:translateX(-130%) !important; animation:njmServerButtonShine 3.2s ease-in-out infinite !important; } .primary-cta > *, .play-chip > *{ position:relative; z-index:2; } @keyframes njmServerButtonFlow{ 0% { background-position:0% 50%; } 50% { background-position:100% 50%; } 100% { background-position:0% 50%; } } @keyframes njmServerButtonShine{ 0%,55% { transform:translateX(-130%); } 82%,100% { transform:translateX(130%); } } /* Keep the animation active even when the OS requests reduced motion, specifically for this server button. */ @media (prefers-reduced-motion:reduce){ .primary-cta, .play-chip{ animation:njmServerButtonFlow 5s linear infinite !important; } .primary-cta::before, .play-chip::before{ animation:njmServerButtonShine 3.2s ease-in-out infinite !important; } } /* ===== NJM HEADER DISCORD + ARABIC TEXT COLLISION FIX ===== */ .discord-chip{ font-size:0 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; width:42px !important; min-width:42px !important; height:38px !important; padding:0 !important; overflow:visible !important; } .discord-chip::before, .discord-chip::after{content:none !important;} .discord-real-icon{ display:block !important; width:20px !important; height:20px !important; flex:0 0 20px !important; color:currentColor !important; } /* Arabic must not inherit Latin negative tracking from the redesign. */ html[dir="rtl"] body, html[dir="rtl"] a, html[dir="rtl"] button, html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] select{ letter-spacing:0 !important; font-kerning:normal !important; } .hero-copy-pro h1, .inner-hero h1, .section-intro h2, .section-head h2, .section-heading h2, .group-heading h2, .guide-group h3, .feature-card h3, .place-card h3, .store-pro-card h2, .rule-section h2, .site-nav a, .primary-cta, .play-chip, .reference-secondary, .reference-side-button, .sidebar .nav-item{ letter-spacing:0 !important; word-spacing:.025em !important; font-kerning:normal !important; word-break:normal !important; overflow-wrap:break-word !important; } .hero-copy-pro h1{line-height:1.16 !important;padding-block:.06em .10em !important;} .inner-hero h1{line-height:1.20 !important;padding-block:.05em .10em !important;} .section-intro h2, .section-head h2, .section-heading h2, .group-heading h2, .rule-section h2{line-height:1.38 !important;} .feature-card h3, .place-card h3, .store-pro-card h2, .guide-group h3{line-height:1.55 !important;} .hero-copy-pro p, .inner-hero p, .feature-card p, .place-card p, .guide-group p, .store-pro-card p, .rule-text, .rule-row p{ letter-spacing:0 !important; word-spacing:.02em !important; line-height:1.85 !important; word-break:normal !important; overflow-wrap:break-word !important; } .primary-cta, .play-chip, .reference-secondary, .reference-side-button{ line-height:1.35 !important; white-space:nowrap !important; } /* ========================================================== NJM — CONSOLIDATED STABLE EFFECTS / LAYOUT One authoritative block to avoid conflicting overrides. ========================================================== */ /* Header stays exactly centered/fixed. */ .site-header{ position:fixed !important; top:14px !important; left:50% !important; right:auto !important; transform:translateX(-50%) !important; width:min(94%,1480px) !important; margin:0 !important; z-index:100 !important; } /* Tiny header light line without changing positioning. */ .site-header::after{ content:""; position:absolute; left:8%; right:8%; bottom:-1px; height:1px; pointer-events:none; background:linear-gradient(90deg,transparent,rgba(170,180,192,.16),rgba(123,111,130,.12),transparent); background-size:220% 100%; animation:njmHeaderLine 9s linear infinite; } @keyframes njmHeaderLine{ from{background-position:0 0} to{background-position:220% 0} } /* Global star layer: visual only, never participates in layout. */ .njm-stars-layer{ position:fixed !important; inset:0 !important; z-index:1 !important; pointer-events:none !important; overflow:hidden !important; opacity:.72; } .njm-star{ position:absolute; width:2px; height:2px; border-radius:50%; background:rgba(225,231,238,.70); box-shadow:0 0 7px rgba(183,194,207,.30); animation:njmStarTwinkle var(--twinkle,4.8s) ease-in-out infinite; animation-delay:var(--delay,0s); } .njm-star.medium{width:3px;height:3px;background:rgba(210,218,228,.80)} .njm-star.spark{ width:4px;height:4px;border-radius:1px; transform:rotate(45deg); background:rgba(230,235,240,.90); box-shadow:0 0 12px rgba(190,201,215,.48); } .njm-star.spark::before, .njm-star.spark::after{ content:""; position:absolute; left:50%;top:50%; transform:translate(-50%,-50%) rotate(-45deg); background:linear-gradient(90deg,transparent,rgba(224,230,237,.65),transparent); } .njm-star.spark::before{width:14px;height:1px} .njm-star.spark::after{width:1px;height:14px} @keyframes njmStarTwinkle{ 0%,100%{opacity:.12;scale:.7} 50%{opacity:.9;scale:1} } /* Page content stays above stars. No positioning is forced on header here. */ main,.site-footer,.page-wipe{position:relative;z-index:2} /* Lower rules search bar ONLY: normal document flow, never follows scroll. */ .rules-stage .tools, .rules-stage .rules-content > .tools, .rules-stage .rules-layout > .tools, .rules-stage .rules-search, .rules-stage .rules-toolbar{ position:relative !important; top:auto !important; bottom:auto !important; left:auto !important; right:auto !important; inset:auto !important; transform:none !important; z-index:3 !important; } .rules-stage .tools{ margin-bottom:22px !important; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); } /* Keep requested rules category sidebar sticky on desktop. */ .rules-layout .sidebar{ position:sticky !important; top:104px !important; align-self:start !important; max-height:calc(100vh - 124px); overflow:auto; } /* Light effect on rules cards/search; pseudo-elements never alter layout. */ .rules-card{position:relative;overflow:hidden} .rules-card::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.14; background: radial-gradient(circle at 12% 18%,rgba(170,181,194,.11),transparent 18%), radial-gradient(circle at 88% 78%,rgba(128,114,135,.07),transparent 20%); animation:njmQuietGlow 9s ease-in-out infinite alternate; } .rules-stage .tools::before{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.022) 47%,rgba(145,154,168,.035) 52%,transparent 68%); background-size:240% 100%; animation:njmSearchSheen 10s ease-in-out infinite; } @keyframes njmSearchSheen{ 0%,25%{background-position:100% 0} 65%,100%{background-position:-120% 0} } /* Quiet effects for sections that otherwise look empty. */ .guide-group, .store-pro-card, .inner-hero, .error-stage, .site-footer{ position:relative; isolation:isolate; overflow:hidden; } .guide-group::after, .store-pro-card::after, .inner-hero::after, .error-stage::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.14; background: radial-gradient(circle at 20% 24%,rgba(160,171,184,.10),transparent 14%), radial-gradient(circle at 78% 72%,rgba(124,111,131,.07),transparent 15%); animation:njmQuietGlow 12s ease-in-out infinite alternate; } @keyframes njmQuietGlow{ from{transform:translate3d(-1%,0,0)} to{transform:translate3d(1%,-1%,0)} } .guide-group > *, .store-pro-card > *, .inner-hero > *, .error-stage > *, .site-footer > *{ position:relative; z-index:1; } .site-footer::before{ content:""; position:absolute; left:50%; bottom:-120px; width:min(720px,80vw); height:220px; transform:translateX(-50%); pointer-events:none; border-radius:50%; background:radial-gradient(circle,rgba(125,137,153,.06),transparent 70%); filter:blur(42px); } /* Do not change guide toolbar behavior here. */ /* Mobile: sidebar becomes normal flow; header remains centered. */ @media(max-width:760px){ .site-header{ top:9px !important; width:95% !important; } .rules-layout .sidebar{ position:relative !important; top:auto !important; max-height:none !important; overflow:visible !important; } .njm-stars-layer{opacity:.52} .njm-star:nth-child(3n){display:none} } /* Accessibility/performance */ @media(prefers-reduced-motion:reduce){ .site-header::after, .njm-star, .rules-card::before, .rules-stage .tools::before, .guide-group::after, .store-pro-card::after, .inner-hero::after, .error-stage::after{ animation:none !important; } }