169 lines
43 KiB
HTML
169 lines
43 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ar" dir="rtl">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta name="theme-color" content="#080e20">
|
||
<meta name="description" content="صَقِل — نعيد التفكير في رحلة التعلّم. رؤية تعليمية تجمع الشرح المناسب، التدريب الهادف والمراجعة، وتبدأ من الصف العاشر.">
|
||
<title>صَقِل — الفهم يصنع الفرق</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Alexandria:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||
<style>
|
||
:root{--ink:#080e20;--surface:#10182e;--white:#f5f7ff;--muted:#abb6cf;--blue:#507aff;--lime:#d7eea5;--line:rgba(192,210,255,.15);--ease:cubic-bezier(.22,1,.36,1);--font:'Alexandria',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
|
||
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;background:var(--ink);color:var(--white);font-family:var(--font);line-height:1.9;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}a{color:inherit;text-decoration:none}button{cursor:pointer}button:disabled{cursor:default}svg{display:block}::selection{background:#a5bcff;color:var(--ink)}:focus-visible{outline:3px solid #b6ceff;outline-offset:6px}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:600}p{color:var(--muted)}.wrap{width:min(1240px,calc(100% - 96px));margin-inline:auto}.eyebrow{font-size:11px;letter-spacing:.04em;display:flex;align-items:center;gap:10px;color:var(--muted)}.eyebrow::before{content:'';width:21px;height:1px;background:currentColor}.latin{font-family:'Manrope',sans-serif;direction:ltr}.pill{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:99px;padding:7px 13px;font-size:10px;color:#c5d0e7}.dot{width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 15px #d7eea555}.btn{display:inline-flex;justify-content:center;align-items:center;gap:26px;border:1px solid transparent;border-radius:12px;padding:14px 23px;font-size:12px;font-weight:500;transition:transform .3s var(--ease),background .3s,box-shadow .3s;min-height:50px}.btn:hover{transform:translateY(-3px)}.btn-primary{background:var(--blue);color:white;box-shadow:0 6px 28px #365ffb24}.btn-primary:hover{background:#668aff;box-shadow:0 10px 35px #365ffb55}.btn-outline{border-color:var(--line);background:#ffffff04}.btn-outline:hover{background:#ffffff0c}.arrow{font-family:Arial,sans-serif;font-size:23px;line-height:1}.skip{position:fixed;top:-90px;right:20px;z-index:99;background:white;color:var(--ink);padding:10px 20px}.skip:focus{top:10px}.scroll-progress{position:fixed;top:0;right:0;height:2px;width:100%;background:var(--blue);transform:scaleX(0);transform-origin:right;z-index:90}
|
||
.header{position:sticky;top:0;z-index:40;background:rgba(8,14,32,.86);backdrop-filter:blur(22px);border-bottom:1px solid var(--line)}.nav{height:88px;display:flex;align-items:center;justify-content:space-between;gap:32px}.brand{display:flex;align-items:center;gap:12px}.brand-symbol{width:36px;height:42px;color:#91acff}.brand-name{font-size:29px;font-weight:700;line-height:1.2}.brand-sub{font-family:'Manrope',sans-serif;font-size:8px;letter-spacing:4px;color:#9caaca;display:block;margin-top:5px}.nav-links{display:flex;align-items:center;gap:30px;font-size:11px;color:#b8c3db}.nav-links a:hover{color:white}.nav-end{display:flex;align-items:center;gap:13px}.nav-end .btn{padding:10px 19px;font-size:10px;min-height:42px}.motion-toggle{border:1px solid var(--line);background:transparent;color:#b8c3db;border-radius:50%;width:35px;height:35px;font-size:12px}.menu-toggle{display:none;background:transparent;border:1px solid var(--line);border-radius:8px;color:white;padding:8px 12px}
|
||
.hero{position:relative;overflow:hidden;isolation:isolate}.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 20% 37%,#233f903c,transparent 52%);z-index:-1}.hero-grid{min-height:710px;display:grid;grid-template-columns:1.05fr 1fr;gap:30px;align-items:center;padding-block:70px 55px}.hero-copy{z-index:2}.hero h1{font-size:clamp(48px,5.15vw,75px);line-height:1.5;letter-spacing:-2px;margin:23px 0 18px}.hero h1 em{font-style:normal;color:#8eacff;position:relative}.hero h1 em::after{content:'';position:absolute;bottom:-6px;right:0;width:100%;height:7px;border-top:2px solid #6c92ff;border-radius:50%;transform:rotate(-3deg)}.hero-desc{font-size:14px;max-width:455px;line-height:2.25}.hero-actions{display:flex;gap:12px;margin-top:30px}.hero-note{font-size:10px;margin-top:22px;color:#8b99b9;display:flex;gap:9px;align-items:center}.hero-note span{width:4px;height:4px;border-radius:50%;background:#8195c1}.hero-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding:22px 0;font-size:10px;color:#8998b8}.hero-bottom .latin{letter-spacing:2px;font-size:9px}.scroll-cue{display:flex;gap:14px;align-items:center}.scroll-cue b{font-size:18px;font-weight:400;color:#c6d5f8}
|
||
.universe{height:540px;position:relative;direction:ltr;perspective:1000px;--mx:0deg;--my:0deg}.universe-inner{height:100%;position:relative;transform:rotateX(var(--my)) rotateY(var(--mx));transition:transform .7s var(--ease)}.universe-grid{position:absolute;inset:0;background-image:linear-gradient(#7f9eff09 1px,transparent 1px),linear-gradient(90deg,#7f9eff09 1px,transparent 1px);background-size:43px 43px;mask-image:radial-gradient(ellipse,black,transparent 70%)}.orbit{position:absolute;inset:6%;border:1px solid #8aa9ff22;border-radius:50%;transform:rotate(-30deg) scaleY(.64)}.orbit.two{inset:0 7%;transform:rotate(36deg) scaleY(.7);border-style:dashed;border-color:#8aa9ff1c}.orbit.three{inset:14% 0;transform:rotate(95deg) scaleY(.75)}.satellite-track{position:absolute;inset:8%;animation:orbit 32s linear infinite}.satellite-track::after{content:'';position:absolute;top:45%;left:0;width:7px;height:7px;background:#c6d8ff;border-radius:50%;box-shadow:0 0 24px 7px #6a94ff55}.universe-glow{position:absolute;inset:22%;background:#345fdc;filter:blur(65px);opacity:.35}.core{position:absolute;top:50%;left:50%;width:285px;height:310px;transform:translate(-50%,-50%);animation:float 7s ease-in-out infinite}.core svg{width:100%;height:100%;filter:drop-shadow(0 28px 30px #0008)}.concept-tag{position:absolute;z-index:3;border:1px solid #9bbaff30;background:linear-gradient(120deg,#1d2d4ded,#101b33e8);box-shadow:0 12px 35px #0003;backdrop-filter:blur(12px);border-radius:13px;display:flex;align-items:center;gap:12px;padding:13px 17px;direction:rtl;animation:float 7s ease-in-out infinite}.concept-tag b{font-size:12px;font-weight:500}.concept-tag small{display:block;font-size:8px;color:#a3b3d1;margin-top:3px}.tag-icon{width:31px;height:31px;border:1px solid #789cf84d;border-radius:9px;display:grid;place-items:center;color:#abc3ff;font-family:'Manrope',sans-serif;font-size:16px}.tag-one{top:16%;right:0;animation-delay:-1s}.tag-two{top:47%;left:-2%;animation-delay:-3s}.tag-three{bottom:10%;right:5%;animation-delay:-5s}.tag-three .tag-icon{color:var(--lime);border-color:#d7eea53d}.universe-label{position:absolute;left:14%;top:7%;font-size:8px;letter-spacing:2px;color:#8198c6}.universe-coordinate{position:absolute;bottom:4%;left:14%;font-size:9px;letter-spacing:2px;color:#677fae}.spark{position:absolute;width:3px;height:3px;background:#a4bfff;border-radius:50%;box-shadow:0 0 10px #9bb7ff}.spark.a{top:22%;left:22%}.spark.b{bottom:22%;left:15%}.spark.c{top:37%;right:10%}
|
||
.principles{background:#d7eea5;color:#18251c}.principles .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:24px}.principles p{color:#354635;font-size:11px}.principles strong{font-size:14px;font-weight:500}.principles i{font-size:19px;font-style:normal;opacity:.45}.section{padding-block:108px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:45px}.section-head h2{font-size:clamp(28px,3.1vw,42px);line-height:1.7;margin-top:13px;letter-spacing:-.8px}.section-head>p{max-width:370px;font-size:12px;line-height:2.2}.section-number{color:#667797;font-family:'Manrope',sans-serif;font-size:11px;letter-spacing:2px}.journey{background:#f3f4f0;color:#18222c}.journey .eyebrow{color:#667368}.journey .section-head p{color:#65716d}.journey-layout{display:grid;grid-template-columns:1fr 1.1fr;gap:65px;align-items:stretch}.steps{display:flex;flex-direction:column;gap:4px}.step{display:grid;grid-template-columns:35px 1fr 20px;gap:17px;text-align:right;padding:25px 18px;background:transparent;border:0;border-top:1px solid #ccd4cb;color:#79837b;transition:background .3s,color .3s;border-radius:0;width:100%}.step[aria-selected=true]{background:#e6eadf;color:#182b20;border-radius:12px;border-color:transparent}.step .latin{font-size:11px;margin-top:7px}.step .step-title{display:block;font-weight:600;font-size:18px;margin-bottom:8px}.step .step-copy{display:block;font-size:11px;color:#667368;max-width:345px}.step-arrow{font-size:20px;transition:transform .3s}.step[aria-selected=true] .step-arrow{transform:translateX(-4px);color:#47752d}.journey-panel{position:relative;min-height:385px;border-radius:22px;background:#e4e9e0;overflow:hidden;padding:33px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid #d4ddcf}.panel-top{display:flex;justify-content:space-between;color:#607259;font-size:9px}.panel-art{height:190px;display:grid;place-items:center;position:relative}.panel-art::before{content:'';width:240px;height:150px;border:1px solid #b5c7ac;border-radius:50%;transform:rotate(-20deg);position:absolute}.idea-card{position:relative;background:#f7f9f3;border:1px solid #d2ddc8;border-radius:16px;padding:20px 35px;box-shadow:0 15px 30px #52674a15;transform:rotate(-5deg);transition:transform .6s var(--ease)}.idea-card span{display:block;text-align:center;font-size:11px;color:#617656}.idea-card strong{font-size:36px;font-weight:500;color:#28442a;display:block;text-align:center}.idea-card::after{content:'✦';position:absolute;top:-15px;left:-15px;width:42px;height:42px;display:grid;place-items:center;background:#d7eea5;color:#3b5b2d;border-radius:12px;font-size:24px;box-shadow:0 4px 15px #66824a15}.journey-panel[data-stage="1"] .idea-card{transform:rotate(4deg)}.journey-panel[data-stage="2"] .idea-card{transform:rotate(0)}.panel-description h3{font-size:20px;margin-bottom:7px}.panel-description p{color:#607259;font-size:11px;line-height:2}.panel-rule{width:60px;height:3px;background:#7c9a64;border-radius:3px;margin-top:20px}.journey-caption{margin-top:24px;font-size:10px;color:#64745d!important}
|
||
.features{position:relative;background:radial-gradient(ellipse at 90% 60%,#14234380,transparent 60%)}.bento{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:18px}.feature{position:relative;border:1px solid var(--line);border-radius:20px;padding:30px;background:linear-gradient(130deg,#ffffff05,transparent);overflow:hidden;transition:transform .4s var(--ease),border-color .4s;min-height:330px}.feature:hover{transform:translateY(-6px);border-color:#678eee75}.feature h3{font-size:18px;margin-bottom:12px}.feature p{font-size:11px;line-height:2.15}.feature-top{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#8ca4cf;margin-bottom:34px}.feature-visual{height:117px;position:relative;margin-bottom:25px}.paths{display:flex;flex-direction:column;gap:11px;justify-content:center}.path-line{height:22px;border:1px solid #5576ba55;border-radius:20px;position:relative;width:78%;background:linear-gradient(90deg,#507aff16,#507aff05)}.path-line:nth-child(2){width:95%;border-color:#8ca4ff;box-shadow:0 0 22px #527cff16}.path-line:nth-child(3){width:60%}.path-line::before{content:'';height:7px;width:7px;background:#738ccc;border-radius:50%;position:absolute;right:12px;top:6px}.path-line:nth-child(2)::before{background:var(--lime)}.path-line::after{content:'';height:2px;width:40%;background:#667da74d;position:absolute;right:32px;top:9px}.source-stack{display:flex;align-items:center;justify-content:center;direction:ltr}.source-sheet{position:absolute;width:74px;height:96px;border:1px solid #5d74a477;background:#16223a;border-radius:9px;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:14px;transform:rotate(-14deg) translateX(-39px)}.source-sheet:nth-child(2){transform:rotate(12deg) translateX(32px);background:#1c2d48}.source-sheet:nth-child(3){transform:rotate(-2deg);background:#233558}.source-sheet i{height:2px;background:#87a0d66b;width:100%}.source-sheet i:last-child{width:55%}.source-sheet span{font-size:9px;color:#b9cafa;font-family:'Manrope',sans-serif}.question-art{display:flex;align-items:center;justify-content:center;gap:13px}.question-art span{width:62px;height:62px;border:1px solid #668ac95c;background:#23355855;border-radius:16px;font-size:32px;display:grid;place-items:center;transform:rotate(9deg);color:#94b1f4}.question-art i{height:1px;width:25px;background:#627ba0}.question-art b{width:43px;height:43px;border-radius:50%;border:1px solid #afc9844d;color:var(--lime);display:grid;place-items:center;font-weight:400;font-size:20px}.feature-note{font-size:10px;margin-top:22px;color:#8698b9}.manifesto{margin-top:75px;padding-block:36px;border-block:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:35px}.manifesto h3{font-size:25px;max-width:550px;line-height:1.9}.manifesto h3 span{color:#8daaff}.manifesto p{font-size:11px;max-width:330px}
|
||
.people{background:#0d1428}.people-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-block:1px solid var(--line)}.person{padding:35px 32px 35px 45px;border-left:1px solid var(--line)}.person:first-child{padding-right:0}.person:last-child{border:0}.person-no{font-family:'Manrope',sans-serif;font-size:10px;color:#7589af;margin-bottom:28px}.person h3{font-size:23px;margin-bottom:12px}.person p{font-size:11px;min-height:84px;line-height:2.2}.text-link{display:inline-flex;align-items:center;gap:20px;margin-top:25px;font-size:11px;color:#a5bfff}.text-link:hover{color:white}.person:nth-child(2) .text-link{color:var(--lime)}.faq-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:90px}.faq-intro h2{font-size:34px;line-height:1.7;margin:15px 0}.faq-intro p{font-size:12px}.faq-list details{border-bottom:1px solid var(--line);padding:21px 0}.faq-list details:first-child{border-top:1px solid var(--line)}.faq-list summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:25px;font-size:13px;cursor:pointer}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary::after{content:'+';color:#829dd4;font-family:'Manrope',sans-serif;font-size:22px;font-weight:400}.faq-list details[open] summary::after{content:'−'}.faq-list details p{font-size:11px;line-height:2.3;padding:16px 0 5px;max-width:520px}.closing{padding-bottom:85px}.closing-box{position:relative;isolation:isolate;overflow:hidden;border:1px solid #6388f35e;background:linear-gradient(110deg,#142653,#182c66 60%,#25438f);border-radius:24px;padding:60px;text-align:center}.closing-box::before,.closing-box::after{content:'';position:absolute;width:600px;height:600px;border:1px solid #8caeff1f;border-radius:50%;z-index:-1;left:-400px;top:-100px}.closing-box::after{left:auto;right:-400px;top:-330px}.closing-box .eyebrow{justify-content:center;color:#b4c9fc}.closing-box h2{font-size:clamp(30px,4vw,49px);margin:14px 0}.closing-box p{font-size:12px;color:#b2c5ec;max-width:500px;margin-inline:auto}.closing-box .btn{margin-top:28px;background:var(--white);color:#1f3977}.footer-top{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:30px 0 40px;border-bottom:1px solid var(--line)}.footer-note{font-size:10px;margin-top:15px}.footer-links{display:flex;flex-wrap:wrap;gap:25px;font-size:10px;color:#9cadcd}.footer-links a:hover{color:white}.footer-bottom{display:flex;justify-content:space-between;gap:20px;padding:22px 0 28px;font-size:9px;color:#7284a6}.footer-bottom .latin{letter-spacing:2px}
|
||
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -13px}}@keyframes orbit{to{rotate:360deg}}.reveal{opacity:1;transform:none}.animate-ready .reveal.pending{opacity:0;transform:translateY(25px)}.animate-ready .reveal{transition:opacity .8s var(--ease),transform .8s var(--ease)}.motion-off *,.motion-off *::before,.motion-off *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.motion-off .universe-inner{transform:none}.motion-off .reveal.pending{opacity:1;transform:none}
|
||
@media(min-width:1500px){.hero-grid{min-height:790px}.universe{height:600px}.core{width:330px;height:360px}}
|
||
@media(max-width:1050px){.wrap{width:calc(100% - 56px)}.nav-links{gap:18px}.hero h1{font-size:55px}.hero-grid{gap:15px;min-height:680px}.universe{height:460px}.concept-tag{padding:10px 12px}.tag-one{right:-10px}.core{width:250px}.journey-layout{gap:30px}.feature{padding:24px}.bento{gap:12px}.faq-layout{gap:45px}.nav{gap:20px}.nav-links{font-size:10px}}
|
||
@media(max-width:760px){html{scroll-padding-top:90px}.wrap{width:calc(100% - 40px)}.nav{height:74px;gap:10px}.brand-name{font-size:24px}.brand-symbol{width:29px}.brand-sub{font-size:7px}.nav-end .btn{font-size:9px;padding:8px 13px;min-height:39px}.menu-toggle{display:block;font-size:11px}.nav-links{display:none;position:absolute;top:74px;right:0;left:0;background:#101a30;border-bottom:1px solid var(--line);padding:23px;flex-direction:column;align-items:stretch;gap:0;font-size:12px}.nav-links a{padding:12px}.nav-links.is-open{display:flex}.motion-toggle{width:31px;height:31px}.nav-end{gap:8px}.hero-grid{grid-template-columns:1fr;padding-top:42px;gap:15px}.hero-copy{text-align:center}.hero-copy>.pill{font-size:9px}.hero h1{font-size:clamp(42px,8.8vw,62px);letter-spacing:-1px;margin-top:20px;line-height:1.55}.hero-desc{font-size:12px;margin-inline:auto;max-width:420px}.hero-actions{justify-content:center;gap:10px;margin-top:24px}.hero-actions .btn{padding:12px 17px;font-size:11px;gap:20px}.hero-note{justify-content:center;font-size:9px;flex-wrap:wrap}.universe{height:390px;width:min(440px,100%);margin-inline:auto}.core{width:235px;height:270px}.tag-one{right:0;top:12%}.tag-two{left:0}.tag-three{right:3%;bottom:6%}.concept-tag b{font-size:10px}.concept-tag small{font-size:7px}.tag-icon{width:26px;height:26px}.universe-label{top:6%;left:5%;font-size:7px}.universe-coordinate{font-size:7px;left:5%;bottom:6%}.hero-grid{padding-bottom:25px}.hero-bottom{font-size:9px;padding-block:19px}.hero-bottom .latin{font-size:7px;letter-spacing:1px}.principles .wrap{justify-content:center;flex-wrap:wrap;gap:10px 18px;padding-block:21px}.principles p{width:100%;text-align:center;font-size:9px;margin-bottom:3px}.principles strong{font-size:11px}.principles i{font-size:14px}.section{padding-block:65px}.section-head{display:block;margin-bottom:30px}.section-head h2{font-size:29px}.section-head>p{margin-top:17px;font-size:11px}.journey-layout{grid-template-columns:1fr;gap:24px}.step{padding:20px 14px}.step .step-title{display:block;font-weight:600;font-size:16px}.journey-panel{min-height:350px;padding:24px}.panel-art{height:170px}.journey-caption{font-size:9px}.bento{grid-template-columns:1fr;gap:15px}.feature{padding:26px;min-height:0;display:grid;grid-template-columns:1fr 105px;column-gap:20px}.feature-top{grid-column:1/-1;margin-bottom:20px}.feature-visual{grid-column:2;grid-row:2/4;height:100px;margin:0;align-self:center}.feature h3{grid-row:2;grid-column:1;font-size:17px}.feature p{grid-row:3;grid-column:1;font-size:10px}.source-sheet{width:51px;height:75px;padding:10px;gap:7px}.source-sheet:first-child{transform:rotate(-14deg) translateX(-20px)}.source-sheet:nth-child(2){transform:rotate(12deg) translateX(20px)}.question-art{gap:7px}.question-art span{width:42px;height:48px;font-size:25px}.question-art b{width:30px;height:30px;font-size:16px}.question-art i{width:8px}.manifesto{margin-top:42px;display:block;padding-block:28px}.manifesto h3{font-size:22px}.manifesto p{margin-top:15px;font-size:11px}.people-grid{grid-template-columns:1fr;border-bottom:0}.person,.person:first-child{padding:28px 0;border-left:0;border-bottom:1px solid var(--line)}.person:last-child{border-bottom:1px solid var(--line)}.person-no{margin-bottom:15px}.person h3{font-size:21px}.person p{min-height:0;max-width:480px}.person .text-link{margin-top:15px}.faq-layout{grid-template-columns:1fr;gap:30px}.faq-intro h2{font-size:29px}.faq-list summary{font-size:12px}.closing{padding-bottom:40px}.closing-box{padding:40px 22px;border-radius:18px}.closing-box h2{font-size:29px;line-height:1.8}.closing-box p{font-size:10px}.footer-top{align-items:start;flex-direction:column;gap:24px}.footer-links{gap:20px;font-size:10px}.footer-bottom{flex-direction:column;font-size:8px;gap:10px}}
|
||
@media(max-width:380px){.nav .brand-symbol{display:none}.nav .brand{gap:0}.nav-end .btn{gap:10px}.nav-end{gap:6px}.menu-toggle{padding:8px 9px}}
|
||
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.reveal.pending{opacity:1!important;transform:none!important}.universe-inner{transform:none!important}}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<a class="skip" href="#main">انتقل إلى المحتوى</a>
|
||
<div class="scroll-progress" aria-hidden="true"></div>
|
||
<header class="header">
|
||
<nav class="wrap nav" aria-label="التنقل الرئيسي">
|
||
<a href="#main" class="brand" aria-label="صَقِل — الرئيسية">
|
||
<svg class="brand-symbol" viewBox="0 0 40 46" fill="none" aria-hidden="true"><path d="M20 2 37 12v21L20 44 3 33V12L20 2Z" stroke="currentColor" stroke-width="1.4"/><path d="m10 28 10 6 10-6M10 21l10 6 10-6M10 14l10 6 10-6" stroke="currentColor" stroke-width="2"/></svg>
|
||
<span class="brand-name">صَقِل<span class="brand-sub">SAQEL</span></span>
|
||
</a>
|
||
<div class="nav-links" id="navigation"><a href="#journey">فلسفة التعلّم</a><a href="#approach">تجربة صَقِل</a><a href="#community">لكل دور، مساحة</a><a href="#questions">أسئلة شائعة</a></div>
|
||
<div class="nav-end"><button class="motion-toggle" type="button" aria-label="إيقاف الحركة" aria-pressed="false" title="إيقاف الحركة">Ⅱ</button><a class="btn btn-outline" href="/student">دخول المنصة <span aria-hidden="true">↗</span></a><button class="menu-toggle" aria-controls="navigation" aria-expanded="false" type="button">القائمة</button></div>
|
||
</nav>
|
||
</header>
|
||
<main id="main">
|
||
<section class="hero" aria-labelledby="hero-title">
|
||
<div class="wrap hero-grid">
|
||
<div class="hero-copy">
|
||
<span class="pill"><span class="dot" aria-hidden="true"></span> رؤية جديدة للتعلّم. تبدأ من الفهم.</span>
|
||
<h1 id="hero-title">العِلم يفتح آفاقك.<br><em>والفهم يصقلك.</em></h1>
|
||
<p class="hero-desc">للعقول التي تسأل، وتحاول، وتطمح لأبعد.<br>نبني في صَقِل تجربة تجمع الشرح المناسب والتدريب الهادف، ليصبح ما تتعلّمه قدرةً تفكّر بها.</p>
|
||
<div class="hero-actions"><a href="/student" class="btn btn-primary">ادخل إلى صَقِل <span class="arrow" aria-hidden="true">←</span></a><a href="#journey" class="btn btn-outline">اكتشف الفكرة <span aria-hidden="true">↓</span></a></div>
|
||
<p class="hero-note"><span aria-hidden="true"></span> قيد التطوير والتحقق <span aria-hidden="true"></span> البداية من الصف العاشر</p>
|
||
</div>
|
||
<div class="universe" aria-hidden="true">
|
||
<div class="universe-inner"><div class="universe-grid"></div><div class="universe-glow"></div><div class="orbit"></div><div class="orbit two"></div><div class="orbit three"></div><div class="satellite-track"></div>
|
||
<span class="universe-label latin">THE SHAPE OF UNDERSTANDING</span>
|
||
<div class="core"><svg viewBox="0 0 300 330" fill="none"><defs><linearGradient id="plane" x1="30" y1="50" x2="245" y2="230" gradientUnits="userSpaceOnUse"><stop stop-color="#b6d0ff" stop-opacity=".75"/><stop offset=".42" stop-color="#527eff" stop-opacity=".35"/><stop offset="1" stop-color="#294bae" stop-opacity=".1"/></linearGradient><linearGradient id="edge" x1="20" y1="100" x2="280" y2="230"><stop stop-color="#b2cdff"/><stop offset="1" stop-color="#4b73ff" stop-opacity=".25"/></linearGradient><linearGradient id="beam" x1="150" y1="0" x2="150" y2="290" gradientUnits="userSpaceOnUse"><stop stop-color="#b9d6ff" stop-opacity="0"/><stop offset=".5" stop-color="#b9d6ff" stop-opacity=".8"/><stop offset="1" stop-color="#b9d6ff" stop-opacity="0"/></linearGradient></defs><path d="m150 160 126 70-126 73L24 230l126-70Z" fill="#101f47" stroke="#5679c1" stroke-opacity=".5"/><path d="m24 230 126 73 126-73v13l-126 73-126-73v-13Z" fill="#1a2e61" stroke="#5071b7" stroke-opacity=".4"/><path d="m150 116 126 70-126 73L24 186l126-70Z" fill="url(#plane)" stroke="url(#edge)"/><path d="m150 73 126 70-126 73L24 143l126-70Z" fill="url(#plane)" stroke="url(#edge)"/><path d="m150 30 126 70-126 73L24 100l126-70Z" fill="url(#plane)" stroke="url(#edge)" stroke-width="1.5"/><path d="m150 52 86 48-86 50-86-50 86-48Z" stroke="#d0e2ff" stroke-opacity=".4"/><path d="m150 76 42 24-42 25-42-25 42-24Z" fill="#b8d1ff" fill-opacity=".25" stroke="#c1d7ff" stroke-opacity=".8"/><path d="M150 0v303" stroke="url(#beam)"/><path d="m24 100 0 130M276 100v130" stroke="#89a6ed" stroke-opacity=".25" stroke-dasharray="3 7"/><circle cx="150" cy="100" r="5" fill="#e4eeff"/><circle cx="150" cy="100" r="14" stroke="#d5e5ff" stroke-opacity=".4"/><circle cx="24" cy="100" r="3" fill="#abc6ff"/><circle cx="276" cy="100" r="3" fill="#abc6ff"/></svg></div>
|
||
<div class="concept-tag tag-one"><span class="tag-icon">◇</span><div><b>فهمٌ أعمق</b><small>من السؤال إلى الفكرة</small></div></div>
|
||
<div class="concept-tag tag-two"><span class="tag-icon">↗</span><div><b>تدريبٌ هادف</b><small>من الفكرة إلى التطبيق</small></div></div>
|
||
<div class="concept-tag tag-three"><span class="tag-icon">✦</span><div><b>معرفةٌ تبقى</b><small>بالمحاولة والمراجعة</small></div></div>
|
||
<span class="spark a"></span><span class="spark b"></span><span class="spark c"></span><span class="universe-coordinate latin">CURIOSITY → CLARITY → GROWTH</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="wrap hero-bottom"><a href="#journey" class="scroll-cue"><b aria-hidden="true">↓</b> تعرّف على ما نبنيه</a><span class="latin">BUILT AROUND THE WAY YOU UNDERSTAND</span></div>
|
||
</section>
|
||
<div class="principles"><div class="wrap"><p>فلسفتنا في ثلاث كلمات</p><strong>فضول يفتح السؤال</strong><i aria-hidden="true">✳</i><strong>تدريب يبني القدرة</strong><i aria-hidden="true">✳</i><strong>فهم يترك أثرًا</strong></div></div>
|
||
<section class="section journey" id="journey" aria-labelledby="journey-title"><div class="wrap">
|
||
<div class="section-head reveal"><div><span class="eyebrow">01 / فلسفة التعلّم</span><h2 id="journey-title">لحظة «فهمتها»<br>هي البداية.</h2></div><p>المعرفة تتكوّن عندما تسأل وتجرّب وتعود للفكرة.<br>هذه رحلة التعلّم التي نصمّم صَقِل حولها.</p></div>
|
||
<div class="journey-layout reveal">
|
||
<div class="steps" role="tablist" aria-label="مراحل رحلة التعلّم" aria-orientation="vertical">
|
||
<button type="button" class="step" role="tab" id="step-0" aria-controls="journey-panel" aria-selected="true" tabindex="0" data-step="0"><span class="latin">01</span><span><span class="step-title">افهم بطريقتك</span><span class="step-copy">الشرح المناسب يقرّب الفكرة. نطمح إلى إتاحة أساليب متعددة للدرس نفسه، لتجد ما يناسبك.</span></span><span class="step-arrow" aria-hidden="true">←</span></button>
|
||
<button type="button" class="step" role="tab" id="step-1" aria-controls="journey-panel" aria-selected="false" tabindex="-1" data-step="1"><span class="latin">02</span><span><span class="step-title">حوّل الفكرة إلى قدرة</span><span class="step-copy">جرّب بنفسك، فسّر خطواتك، واكتشف أين تحتاج إلى مساعدة. للمحاولة مكان أساسي في رحلتك.</span></span><span class="step-arrow" aria-hidden="true">←</span></button>
|
||
<button type="button" class="step" role="tab" id="step-2" aria-controls="journey-panel" aria-selected="false" tabindex="-1" data-step="2"><span class="latin">03</span><span><span class="step-title">عُد إليها. وثبّتها.</span><span class="step-copy">الفهم يحتاج إلى مراجعة. نضع العودة للأفكار والتعلّم من الأخطاء في قلب التجربة التي نبنيها.</span></span><span class="step-arrow" aria-hidden="true">←</span></button>
|
||
</div>
|
||
<div class="journey-panel" id="journey-panel" role="tabpanel" aria-labelledby="step-0" tabindex="0" data-stage="0"><div class="panel-top"><span>تصوّر لرحلة التعلّم</span><span class="latin" id="panel-counter">01 / 03</span></div><div class="panel-art" aria-hidden="true"><div class="idea-card"><span id="idea-label">كل فكرة تبدأ بـ</span><strong id="idea-word">لماذا؟</strong></div></div><div class="panel-description"><h3 id="panel-title">مساحة للسؤال.</h3><p id="panel-copy">نريد للشرح أن يفتح فضولك، وأن يساعدك على ربط الفكرة بما تعرفه، خطوةً خطوة.</p><div class="panel-rule" aria-hidden="true"></div></div></div>
|
||
</div>
|
||
<p class="journey-caption">هذا عرض لفلسفة المنتج، وليس درسًا منشورًا أو نتيجة تعلّم مقاسة.</p>
|
||
</div></section>
|
||
<section class="section features" id="approach" aria-labelledby="approach-title"><div class="wrap">
|
||
<div class="section-head reveal"><div><span class="eyebrow">02 / تجربة صَقِل</span><h2 id="approach-title">تفاصيل تخدم عقلك.</h2></div><p>رؤيتنا لتقنية تعليمية تجعل الطريق إلى الفهم أوضح، وتمنح كل خطوة هدفًا ومصدرًا.</p></div>
|
||
<div class="bento">
|
||
<article class="feature reveal"><div class="feature-top"><span>حرية في التعلّم</span><span class="latin">01 ↗</span></div><div class="feature-visual paths" aria-hidden="true"><div class="path-line"></div><div class="path-line"></div><div class="path-line"></div></div><h3>فكرة واحدة.<br>أكثر من طريق للفهم.</h3><p>نصمّم تجربة تتيح تنوّع شروحات المعلمين للدرس المنهجي نفسه، بحسب الحصص المتاحة لك.</p></article>
|
||
<article class="feature reveal"><div class="feature-top"><span>معرفة لها مرجع</span><span class="latin">02 ↗</span></div><div class="feature-visual source-stack" aria-hidden="true"><div class="source-sheet"><i></i><i></i><i></i></div><div class="source-sheet"><i></i><i></i><i></i></div><div class="source-sheet"><span>SOURCE</span><i></i><i></i></div></div><h3>الدرس متصل<br>بمصادره.</h3><p>كتاب، ورقة عمل، وخريطة ذهنية. نعمل على ربط موارد كل درس بمنهجه ونسخته المعتمدة.</p></article>
|
||
<article class="feature reveal"><div class="feature-top"><span>تقنية تخدم التفكير</span><span class="latin">03 ↗</span></div><div class="feature-visual question-art" aria-hidden="true"><span>؟</span><i></i><b>↗</b></div><h3>السؤال المناسب.<br>في سياق الدرس.</h3><p>نتطلّع إلى مساعدة ذكية مرتبطة بمحتوى الدرس، تمنحك تلميحًا يقودك إلى التفكير والمحاولة.</p></article>
|
||
</div><p class="feature-note">هذه ملامح التجربة المستهدفة. يتحدد المتاح فعليًا داخل البوابة بحسب المحتوى المنشور وصلاحية الوصول.</p>
|
||
<div class="manifesto reveal"><h3>نؤمن أن التقنية تكون أقوى<br>عندما تجعل <span>تفكيرك أعمق.</span></h3><p>المعلم في قلب العملية، والمحتوى هو المرجع، والطالب شريك في بناء فهمه. هذه المبادئ تقود ما نبنيه.</p></div>
|
||
</div></section>
|
||
<section class="section people" id="community" aria-labelledby="community-title"><div class="wrap"><div class="section-head reveal"><div><span class="eyebrow">03 / منظومة تتكامل</span><h2 id="community-title">طموح مشترك.<br>ولكل دور، مساحة.</h2></div><p>تبدأ رحلة التعلّم بالطالب، وتتكامل بخبرة المعلم ومساندة الأسرة والمدرسة.</p></div>
|
||
<div class="people-grid reveal"><article class="person"><div class="person-no">01 / LEARN</div><h3>للطالب الفضولي</h3><p>ادخل بوابتك، وتعرّف على المواد والموارد المتاحة لحسابك. اجعل سؤالك القادم خطوةً نحو فهم أعمق.</p><a class="text-link" href="/student">بوابة الطالب <span class="arrow" aria-hidden="true">←</span></a></article><article class="person"><div class="person-no">02 / INSPIRE</div><h3>للمعلّم الملهم</h3><p>لخبرتك وطريقتك في الشرح قيمة. استوديو المعلم هو مساحتك للعمل على محتواك ومتابعة رحلتك على المنصة.</p><a class="text-link" href="/teacher">استوديو المعلم <span class="arrow" aria-hidden="true">←</span></a></article><article class="person"><div class="person-no">03 / SUPPORT</div><h3>لمن يساند الرحلة</h3><p>مساحة لولي الأمر والمدرسة، ضمن الصلاحيات والربط المتاحين، ليكون لكل طرف دوره في متابعة التعلّم.</p><a class="text-link" href="/guardian">بوابة ولي الأمر <span class="arrow" aria-hidden="true">←</span></a><br><a class="text-link" href="/school-admin">بوابة المدرسة <span class="arrow" aria-hidden="true">←</span></a></article></div>
|
||
</div></section>
|
||
<section class="section" id="questions" aria-labelledby="questions-title"><div class="wrap faq-layout"><div class="faq-intro reveal"><span class="eyebrow">وضوح من البداية</span><h2 id="questions-title">قبل أن تبدأ.</h2><p>إجابات قصيرة عن صَقِل وما نبنيه.</p></div><div class="faq-list reveal"><details open><summary>ما هي صَقِل؟</summary><p>منصة تعليمية قيد التطوير والتحقق. نبني تجربة تربط الدرس المنهجي بالشرح والتدريب والمراجعة، مع بداية مركّزة على الصف العاشر.</p></details><details><summary>هل كل ما يظهر هنا متاح الآن؟</summary><p>تعرض هذه الصفحة رؤية المنتج، إلى جانب روابط البوابات الموجودة. المشاهد البصرية توضيحية، ويعتمد توفر الدروس والموارد والميزات داخل المنصة على النشر والصلاحيات واكتمال التحقق.</p></details><details><summary>هل يمكنني اختيار المعلم؟</summary><p>هذا جزء من التجربة المستهدفة: الاختيار بين الحصص المتاحة للدرس نفسه عند تعدد المعلمين. لا يعني ذلك أن لكل درس عدة شروحات منشورة الآن.</p></details><details><summary>كيف أعرف المواد المتاحة وشروط الوصول؟</summary><p>ابدأ من بوابة الطالب للتحقق مما يظهر لحسابك. لا تعرض هذه الصفحة أسعارًا أو باقات معتمدة، ولا تفترض توفر مادة أو اشتراك قبل ظهور تفاصيلهما الفعلية داخل المنصة.</p></details></div></div></section>
|
||
<section class="closing" aria-labelledby="closing-title"><div class="wrap closing-box reveal"><span class="eyebrow">لكل عقل أفق يستحقه</span><h2 id="closing-title">فضولك يستحق خطوة.</h2><p>تعرّف على صَقِل من الداخل، واكتشف المتاح لك اليوم، ونحن نبني تجربة تعليمية تليق بطموحك.</p><a class="btn" href="/student">إلى بوابة الطالب <span class="arrow" aria-hidden="true">←</span></a></div></section>
|
||
</main>
|
||
<footer class="wrap"><div class="footer-top"><div><a href="#main" class="brand"><span class="brand-name">صَقِل<span class="brand-sub">SAQEL</span></span></a><p class="footer-note">الفهم يصنع الفرق.</p></div><nav class="footer-links" aria-label="روابط التذييل"><a href="#journey">فلسفتنا</a><a href="/student">الطالب</a><a href="/teacher">المعلم</a><a href="/guardian">ولي الأمر</a><a href="/school-admin">المدرسة</a></nav></div><div class="footer-bottom"><span>© <span id="year">2026</span> صَقِل. جميع الحقوق محفوظة.</span><span class="latin">MADE FOR CURIOUS MINDS.</span><span>منصة قيد التطوير والتحقق</span></div></footer>
|
||
<script>
|
||
(() => {
|
||
'use strict';
|
||
const root = document.documentElement;
|
||
const reduced = window.matchMedia('(prefers-reduced-motion: reduce)');
|
||
const motionButton = document.querySelector('.motion-toggle');
|
||
let paused = reduced.matches;
|
||
function setMotion() {
|
||
root.classList.toggle('motion-off', paused);
|
||
motionButton.setAttribute('aria-pressed', String(paused));
|
||
motionButton.setAttribute('aria-label', paused ? 'تشغيل الحركة' : 'إيقاف الحركة');
|
||
motionButton.title = paused ? 'تشغيل الحركة' : 'إيقاف الحركة';
|
||
motionButton.textContent = paused ? '▷' : 'Ⅱ';
|
||
}
|
||
setMotion();
|
||
motionButton.addEventListener('click', () => { paused = !paused; setMotion(); });
|
||
reduced.addEventListener('change', event => { paused = event.matches; setMotion(); });
|
||
document.getElementById('year').textContent = new Date().getFullYear();
|
||
const menuButton = document.querySelector('.menu-toggle');
|
||
const navigation = document.getElementById('navigation');
|
||
function closeMenu() { navigation.classList.remove('is-open'); menuButton.setAttribute('aria-expanded', 'false'); }
|
||
menuButton.addEventListener('click', () => { const open = navigation.classList.toggle('is-open'); menuButton.setAttribute('aria-expanded', String(open)); });
|
||
navigation.addEventListener('click', event => { if (event.target.closest('a')) closeMenu(); });
|
||
document.addEventListener('keydown', event => { if (event.key === 'Escape' && navigation.classList.contains('is-open')) { closeMenu(); menuButton.focus(); } });
|
||
document.addEventListener('click', event => { if (!event.target.closest('.nav')) closeMenu(); });
|
||
const stages = [
|
||
['كل فكرة تبدأ بـ', 'لماذا؟', 'مساحة للسؤال.', 'نريد للشرح أن يفتح فضولك، وأن يساعدك على ربط الفكرة بما تعرفه، خطوةً خطوة.'],
|
||
['الفهم يصبح قدرة عندما', 'تجرّب.', 'مساحة للمحاولة.', 'نصمّم التدريب ليمنحك فرصة لاستخدام الفكرة، وتفسير خطواتك، ومعرفة موضع التعثّر.'],
|
||
['المعرفة تنمو عندما', 'تعود.', 'مساحة للمراجعة.', 'العودة إلى الفكرة والتعلّم من الأخطاء جزء من الرحلة التي نستهدفها، حتى تبني فهمًا يمكن الرجوع إليه.']
|
||
];
|
||
const tabs = [...document.querySelectorAll('[data-step]')];
|
||
function activate(index, focus = false) {
|
||
tabs.forEach((tab, i) => { tab.setAttribute('aria-selected', String(i === index)); tab.tabIndex = i === index ? 0 : -1; });
|
||
const panel = document.getElementById('journey-panel');
|
||
panel.dataset.stage = String(index); panel.setAttribute('aria-labelledby', tabs[index].id);
|
||
['idea-label', 'idea-word', 'panel-title', 'panel-copy'].forEach((id, i) => { document.getElementById(id).textContent = stages[index][i]; });
|
||
document.getElementById('panel-counter').textContent = `0${index + 1} / 03`;
|
||
if (focus) tabs[index].focus();
|
||
}
|
||
tabs.forEach((tab, index) => {
|
||
tab.addEventListener('click', () => activate(index));
|
||
tab.addEventListener('keydown', event => {
|
||
let next;
|
||
if (event.key === 'ArrowDown') next = (index + 1) % tabs.length;
|
||
if (event.key === 'ArrowUp') next = (index + tabs.length - 1) % tabs.length;
|
||
if (event.key === 'Home') next = 0;
|
||
if (event.key === 'End') next = tabs.length - 1;
|
||
if (next !== undefined) { event.preventDefault(); activate(next, true); }
|
||
});
|
||
});
|
||
if ('IntersectionObserver' in window && !reduced.matches) {
|
||
root.classList.add('animate-ready');
|
||
const observer = new IntersectionObserver(entries => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.remove('pending'); observer.unobserve(entry.target); } }); }, { threshold: .08 });
|
||
document.querySelectorAll('.reveal').forEach(element => { element.classList.add('pending'); observer.observe(element); });
|
||
}
|
||
const progress = document.querySelector('.scroll-progress');
|
||
let scrollPending = false;
|
||
function updateProgress() { const height = root.scrollHeight - innerHeight; progress.style.transform = `scaleX(${height > 0 ? Math.min(1, Math.max(0, scrollY / height)) : 0})`; scrollPending = false; }
|
||
addEventListener('scroll', () => { if (!scrollPending) { scrollPending = true; requestAnimationFrame(updateProgress); } }, { passive: true });
|
||
addEventListener('resize', updateProgress); updateProgress();
|
||
const universe = document.querySelector('.universe');
|
||
if (matchMedia('(hover: hover) and (pointer: fine)').matches) {
|
||
universe.addEventListener('pointermove', event => {
|
||
if (paused || reduced.matches) return;
|
||
const rect = universe.getBoundingClientRect();
|
||
universe.style.setProperty('--mx', `${((event.clientX - rect.left) / rect.width - .5) * 10}deg`);
|
||
universe.style.setProperty('--my', `${-((event.clientY - rect.top) / rect.height - .5) * 8}deg`);
|
||
});
|
||
universe.addEventListener('pointerleave', () => { universe.style.setProperty('--mx', '0deg'); universe.style.setProperty('--my', '0deg'); });
|
||
}
|
||
document.addEventListener('visibilitychange', () => { document.querySelectorAll('.core, .concept-tag, .satellite-track').forEach(element => { element.style.animationPlayState = document.hidden ? 'paused' : ''; }); });
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|