/* الشكل الزجاجي اللامع (أزرق / أخضر) — بيشتغل فوق site.css و brand.css لما يكون . الكلاسيك = التصميم القديم زي ما هو (بنهاري وليلي). */ :root[data-skin="glass_blue"]{--a1:#3B82F6;--a2:#22D3EE;--a3:#6366F1;--gl:56,189,248;--b1:#061426;--b2:#0B2A4A;--b3:#0F3B5C} :root[data-skin="glass_green"]{--a1:#10B981;--a2:#4ADE80;--a3:#14B8A6;--gl:52,211,153;--b1:#04161A;--b2:#08303A;--b3:#0B3F45} :root[data-skin^="glass"]{ color-scheme:dark; --bg:var(--b1);--bg2:var(--b2);--surface:rgba(255,255,255,.07);--surface2:rgba(255,255,255,.1); --line:rgba(255,255,255,.16);--line2:rgba(255,255,255,.26); --text:#F1F7FF;--muted:#A9C1DC;--faint:#7F9AB8; --hero:linear-gradient(135deg,color-mix(in srgb,var(--b1) 60%,var(--a3)),color-mix(in srgb,var(--b2) 50%,var(--a1)),color-mix(in srgb,var(--b3) 60%,var(--a2))); --btn:linear-gradient(180deg,var(--a2),var(--a1)); --glow:0 0 0 1px rgba(var(--gl),.4),0 0 30px rgba(var(--gl),.55),0 18px 40px -12px rgba(0,0,0,.6); --glow-soft:0 0 0 1px rgba(var(--gl),.25),0 0 24px rgba(var(--gl),.28),0 18px 36px -14px rgba(0,0,0,.55); --display:'Alexandria','Cairo',system-ui,sans-serif; --body:'Alexandria','IBM Plex Sans Arabic',system-ui,sans-serif; --font:'Alexandria','Cairo',system-ui,sans-serif; } [data-skin^="glass"] body,[data-skin^="glass"] html{background:var(--b1)} [data-skin^="glass"] body{ background: radial-gradient(1200px 700px at 85% -10%,var(--b3),transparent 60%), radial-gradient(900px 600px at 0% 40%,color-mix(in srgb,var(--b2) 70%,var(--a3)),transparent 65%), linear-gradient(180deg,var(--b1),var(--b2) 55%,var(--b1)); background-attachment:fixed; } [data-skin^="glass"] body::before{background:radial-gradient(900px 500px at 50% 120%,rgba(var(--gl),.12),transparent 60%)} [data-skin^="glass"] a{color:var(--a2)} [data-skin^="glass"] .grad,[data-skin^="glass"] .gradient-text{background:linear-gradient(90deg,var(--a2),var(--a1));-webkit-background-clip:text;background-clip:text;color:transparent} [data-skin^="glass"] h1,[data-skin^="glass"] h2{text-shadow:0 2px 30px rgba(var(--gl),.3)} [data-skin^="glass"] .grad,[data-skin^="glass"] .gradient-text{text-shadow:none} /* الزجاج: كروت شفافة + إطار منوّر + لمعة + هالة وشادو */ [data-skin^="glass"] .card,[data-skin^="glass"] .feat,[data-skin^="glass"] .role,[data-skin^="glass"] .panel,[data-skin^="glass"] .kpi{ background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.04)); border:1.5px solid rgba(255,255,255,.2); backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%); box-shadow:var(--glow-soft);position:relative; } [data-skin^="glass"] .card::before,[data-skin^="glass"] .feat::before,[data-skin^="glass"] .role::before,[data-skin^="glass"] .panel::before{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:linear-gradient(125deg,rgba(255,255,255,.22),transparent 35%,transparent 75%,rgba(255,255,255,.05)); } [data-skin^="glass"] .feat:hover{transform:translateY(-6px);box-shadow:var(--glow);border-color:rgba(var(--gl),.6)} [data-skin^="glass"] .feat .ic{box-shadow:0 0 22px rgba(var(--gl),.6),inset 0 1px 0 rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.4)} [data-skin^="glass"] .feat .open{color:var(--a2)} /* الزراير: زي زرار الإعلان — لامع ومنوّر */ [data-skin^="glass"] .btn{background:var(--btn);border:1.5px solid rgba(255,255,255,.5);color:#fff; box-shadow:0 0 0 4px rgba(var(--gl),.16),0 0 30px rgba(var(--gl),.7),inset 0 2px 0 rgba(255,255,255,.45),0 12px 26px -8px rgba(0,0,0,.6)} [data-skin^="glass"] .btn:hover{filter:brightness(1.1);box-shadow:0 0 0 6px rgba(var(--gl),.12),0 0 46px rgba(var(--gl),.9),inset 0 2px 0 rgba(255,255,255,.45),0 12px 26px -8px rgba(0,0,0,.6)} [data-skin^="glass"] .btn.ghost{background:rgba(255,255,255,.06);border-color:rgba(var(--gl),.5);color:#fff;box-shadow:0 0 18px rgba(var(--gl),.25)} /* النافبار والحاجات الصغيرة */ [data-skin^="glass"] .nav{background:color-mix(in srgb,var(--b1) 72%,transparent);border-bottom:1px solid rgba(var(--gl),.3);box-shadow:0 8px 30px -18px rgba(var(--gl),.7)} [data-skin^="glass"] .logo img,[data-skin^="glass"] .brand img{filter:drop-shadow(0 0 14px rgba(var(--gl),.9))} [data-skin^="glass"] .pill{color:#fff;background:rgba(var(--gl),.14);border-color:rgba(var(--gl),.45)} [data-skin^="glass"] .ticker span{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)} [data-skin^="glass"] .switch{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);backdrop-filter:blur(12px)} [data-skin^="glass"] .switch button[aria-selected="true"],[data-skin^="glass"] .switch button[aria-checked="true"]{background:linear-gradient(135deg,var(--a1),var(--a3));box-shadow:0 0 18px rgba(var(--gl),.6)} [data-skin^="glass"] .field input,[data-skin^="glass"] .field select,[data-skin^="glass"] input,[data-skin^="glass"] select,[data-skin^="glass"] textarea{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);color:var(--text)} [data-skin^="glass"] .field input:focus,[data-skin^="glass"] .field select:focus{outline:2px solid var(--a2)} [data-skin^="glass"] select option{background:var(--b2)} [data-skin^="glass"] .theme-btn{display:none} /* الموبايل اللي في الصفحة */ [data-skin^="glass"] .phone{background:linear-gradient(160deg,color-mix(in srgb,var(--b3) 70%,#fff 8%),var(--b1));box-shadow:0 0 0 1px rgba(255,255,255,.25),0 0 50px rgba(var(--gl),.45),0 40px 90px -20px rgba(0,0,0,.8)} [data-skin^="glass"] .screen{background:linear-gradient(180deg,var(--b1),var(--b2))} [data-skin^="glass"] .row{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14)} [data-skin^="glass"] .hcard{box-shadow:0 0 26px rgba(var(--gl),.55);border:1px solid rgba(255,255,255,.3)} [data-skin^="glass"] .ph-btn{background:var(--btn);box-shadow:0 0 22px rgba(var(--gl),.7);border:1px solid rgba(255,255,255,.45)} [data-skin^="glass"] .sec{color:var(--a2)} /* المودال والأسعار والتحميل */ [data-skin^="glass"] .modal{background:rgba(2,8,16,.7)} [data-skin^="glass"] .mbox{background:linear-gradient(160deg,color-mix(in srgb,var(--b2) 92%,#fff),color-mix(in srgb,var(--b1) 96%,#000));border:1.5px solid rgba(255,255,255,.22);box-shadow:var(--glow)} [data-skin^="glass"] .plan.best{border-color:rgba(var(--gl),.7);box-shadow:var(--glow)} [data-skin^="glass"] .plan .tag{background:linear-gradient(135deg,var(--a1),var(--a3));box-shadow:0 0 16px rgba(var(--gl),.7)} [data-skin^="glass"] .dl{border:1.5px solid rgba(255,255,255,.25);box-shadow:var(--glow)} [data-skin^="glass"] .dl .btn{background:#fff;color:var(--b1);border-color:#fff} /* لوحة الأدمن */ [data-skin^="glass"] .side{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));backdrop-filter:blur(16px);border-inline-end:1px solid rgba(var(--gl),.25)} [data-skin^="glass"] .side a.on{background:linear-gradient(90deg,rgba(var(--gl),.35),rgba(var(--gl),.08));box-shadow:inset 3px 0 0 var(--a2),0 0 24px -6px rgba(var(--gl),.8)} [data-skin^="glass"] .kpi::after{background:var(--c,var(--a1))} [data-skin^="glass"] .kpi.hero{background:linear-gradient(135deg,var(--a1),var(--a3));border-color:rgba(255,255,255,.35);box-shadow:var(--glow)} [data-skin^="glass"] table th{color:var(--muted)} [data-skin^="glass"] .toast{background:color-mix(in srgb,var(--b3) 85%,#fff);border:1px solid rgba(255,255,255,.25)} /* اختيار الشكل */ .skin-pick{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line2);flex:none} .skin-pick button{all:unset;cursor:pointer;width:26px;height:26px;border-radius:50%;display:grid;place-items:center} .skin-pick button i{width:14px;height:14px;border-radius:50%;display:block;box-shadow:0 0 0 2px rgba(255,255,255,.25)} .skin-pick button[aria-pressed="true"] i{box-shadow:0 0 0 2px #fff,0 0 12px currentColor} .skin-pick button:focus-visible{outline:2px solid #67E8F9} .skin-float{position:fixed;inset-inline-start:14px;bottom:14px;z-index:60;backdrop-filter:blur(12px)} /* ===== المشهد اللي بيشرح: مصادر → خيوط نور → شاشة زجاج ===== */ .scene-sec{padding:40px 0 0} .scene{--sa1:var(--a1,#3B82F6);--sa2:var(--a2,#22D3EE);--sgl:var(--gl,56,189,248);position:relative;max-width:760px;margin:0 auto;aspect-ratio:760/600} .scene svg.beams{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .scene .beam{fill:none;stroke-width:6;stroke-linecap:round;filter:url(#sBlur)} .scene .beam.core{stroke-width:1.6;filter:none} .scene .beam.spark{stroke-width:2.4;filter:none;stroke:#fff;stroke-dasharray:3 60;animation:sflow 1.6s linear infinite} @keyframes sflow{to{stroke-dashoffset:-63}} .scene .ico{position:absolute;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;transform:translate(-50%,-50%); background:radial-gradient(circle at 35% 30%,#fff,#e3ecf7);box-shadow:0 0 0 2px rgba(255,255,255,.6),0 0 26px rgba(var(--sgl),.85),0 8px 18px rgba(0,0,0,.35);animation:sbob 4s ease-in-out infinite} .scene .ico svg{width:30px;height:30px} .scene .ico small{position:absolute;top:100%;margin-top:6px;white-space:nowrap;font:700 12px var(--display);color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.6)} @keyframes sbob{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,-50%) translateY(-7px)}} .scene .win{position:absolute;left:12%;right:12%;bottom:0;height:52%;border-radius:20px;padding:12px; background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05));border:1.5px solid rgba(255,255,255,.25); backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%); box-shadow:0 0 0 1px rgba(var(--sgl),.35),0 0 40px rgba(var(--sgl),.55),0 0 120px rgba(var(--sgl),.25),0 30px 60px rgba(0,0,0,.5);overflow:hidden;color:#F1F7FF} .scene .win::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.3),transparent 30%,transparent 70%,rgba(255,255,255,.08));pointer-events:none} .scene .win::after{content:"";position:absolute;left:-40%;top:0;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.25),transparent);animation:sshine 5s ease-in-out infinite} @keyframes sshine{0%,60%{left:-40%}100%{left:120%}} .scene .wbar{display:flex;gap:6px;align-items:center;margin-bottom:8px} .scene .wbar i{width:10px;height:10px;border-radius:50%} .scene .wbar span{margin-inline-start:auto;font-size:12px;color:#A9C1DC} .scene .srows{display:flex;flex-direction:column;gap:7px} .scene .srow{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);opacity:0;transform:translateY(14px);animation:srowin .6s forwards} .scene .srow .av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:800 13px var(--display);color:#fff;flex:none} .scene .srow b{font-size:13.5px;display:block} .scene .srow em{font-style:normal;font-size:11.5px;color:#A9C1DC;display:block} .scene .srow .tg{margin-inline-start:auto;font-size:11px;padding:3px 9px;border-radius:999px;background:rgba(var(--sgl),.18);border:1px solid rgba(var(--sgl),.45);white-space:nowrap} @keyframes srowin{to{opacity:1;transform:none}} [data-theme="light"]:not([data-skin^="glass"]) .scene .ico small{color:#131936;text-shadow:none} @media(max-width:560px){.scene{aspect-ratio:390/560}.scene .win{left:2%;right:2%;height:54%}.scene .ico{width:42px;height:42px}.scene .ico svg{width:23px;height:23px}.scene .ico small{font-size:10.5px}.scene .srow .tg{display:none}} @media(prefers-reduced-motion:reduce){.scene .srow{opacity:1;transform:none}}